360STARK \u2013 Header<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<\/head>\n<body style=\"background:#0f1117; min-height:120vh; margin:0; font-family:'Outfit',sans-serif;\">\n\n<header id=\"header-flotante\">\n <div class=\"header-container\">\n\n <div class=\"logo\">\n <a href=\"https:\/\/360stark.com\/\">\n <svg viewBox=\"0 0 220 80\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"40\" cy=\"40\" r=\"33\" stroke=\"white\" stroke-width=\"2.5\" stroke-dasharray=\"170 37\" stroke-linecap=\"round\" fill=\"none\"\/>\n <circle cx=\"40\" cy=\"40\" r=\"33\" stroke=\"#FF8C00\" stroke-width=\"3\" stroke-dasharray=\"80 127\" stroke-linecap=\"round\" stroke-dashoffset=\"60\" fill=\"none\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 40 40\" to=\"360 40 40\" dur=\"13s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <text x=\"40\" y=\"48\" text-anchor=\"middle\" font-size=\"26\" font-weight=\"700\" fill=\"#6B7A90\" font-family=\"sans-serif\">S<\/text>\n <text x=\"90\" y=\"45\" font-size=\"22\" font-family=\"monospace\" fill=\"white\"><tspan fill=\"#FF8C00\">360\u00b0<\/tspan> STARK<\/text>\n <\/svg>\n <\/a>\n <\/div>\n\n <nav class=\"menu-principal\" id=\"menu-principal\">\n <ul>\n <li><a href=\"https:\/\/360stark.com\/\" data-slug=\"\">Inicio<\/a><\/li>\n\n <li class=\"has-dropdown\" id=\"menu-servicios\">\n <a href=\"https:\/\/360stark.com\/#servicios\/\" data-slug=\"servicios\" id=\"btn-servicios\">\n Servicios <span class=\"menu-caret\">\u25be<\/span>\n <\/a>\n <div class=\"services-dropdown\" id=\"mega-servicios\">\n <div class=\"services-inner\">\n\n <div class=\"services-col\">\n <div class=\"col-category\">Visibilidad & Medios<\/div>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/marketing-360\/\">\n <span class=\"s-num\">01<\/span>\n <div><span class=\"s-title\">Marketing 360\u00b0<\/span><span class=\"s-desc\">Estrategia integral que cubre todos los canales. Una sola agencia para toda tu presencia digital.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/seo-sem-paid-media\/\">\n <span class=\"s-num\">02<\/span>\n <div><span class=\"s-title\">SEO \/ SEM & Paid Media<\/span><span class=\"s-desc\">Posicionamiento org\u00e1nico y campa\u00f1as de pago. Google Ads, Meta Ads y TikTok Ads con ROI medible.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/branding-diseno\/\">\n <span class=\"s-num\">03<\/span>\n <div><span class=\"s-title\">Branding & Dise\u00f1o<\/span><span class=\"s-desc\">Identidad visual completa. Dise\u00f1o gr\u00e1fico, motion y contenido visual que conecta y perdura.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/auditorias\/\">\n <span class=\"s-num\">10<\/span>\n <div><span class=\"s-title\">Auditor\u00edas<\/span><span class=\"s-desc\">An\u00e1lisis completo de tu presencia digital: SEO, rendimiento, UX y competencia.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <\/div>\n\n <div class=\"col-divider\"><\/div>\n\n <div class=\"services-col\">\n <div class=\"col-category\">Tecnolog\u00eda & Desarrollo<\/div>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/web-development\/\">\n <span class=\"s-num\">04<\/span>\n <div><span class=\"s-title\">Web Development<\/span><span class=\"s-desc\">Desarrollo web a medida, r\u00e1pido y escalable. Tecnolog\u00eda al servicio de tu negocio.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/smartwebs-ia\/\">\n <span class=\"s-num\">05<\/span>\n <div><span class=\"s-title\">Smartwebs & IA<\/span><span class=\"s-desc\">Webs inteligentes con automatizaciones e inteligencia artificial integrada para escalar sin l\u00edmites.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/booking-systems\/\">\n <span class=\"s-num\">07<\/span>\n <div><span class=\"s-title\">Booking Systems<\/span><span class=\"s-desc\">Sistemas de reservas online para restaurantes, cl\u00ednicas y hoteles. Automatiza citas.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/hosting-mantenimiento\/\">\n <span class=\"s-num\">09<\/span>\n <div><span class=\"s-title\">Hosting & Mantenimiento<\/span><span class=\"s-desc\">Servidor r\u00e1pido y seguro. Actualizaciones, backups, seguridad y soporte continuo.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <\/div>\n\n <div class=\"col-divider\"><\/div>\n\n <div class=\"services-col\">\n <div class=\"col-category\">Presencia F\u00edsica & Digital<\/div>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/biolinks-nfc\/\">\n <span class=\"s-num\">06<\/span>\n <div><span class=\"s-badge\">\u00b7 EN COLABORACI\u00d3N CON LINKSCARD.PRO<\/span><span class=\"s-title\">Biolinks & NFC<\/span><span class=\"s-desc\">Tu hub de enlaces con marca propia. Tarjetas NFC f\u00edsicas que comparten tu perfil al instante.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/cartas-digitales\/\">\n <span class=\"s-num\">08<\/span>\n <div><span class=\"s-title\">Cartas Digitales<\/span><span class=\"s-desc\">Men\u00fas digitales QR y NFC para hosteler\u00eda. Actualizaci\u00f3n en tiempo real, sin impresi\u00f3n.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n <\/li>\n\n <li><a href=\"https:\/\/360stark.com\/#nosotros\/\" data-slug=\"nosotros\">Nosotros<\/a><\/li>\n <li><a href=\"https:\/\/360stark.com\/portfolio\/\" data-slug=\"portfolio\">Portfolio<\/a><\/li>\n <li><a href=\"https:\/\/360stark.com\/clientes\/\" data-slug=\"clientes\">Clientes<\/a><\/li>\n <\/ul>\n <\/nav>\n\n <div class=\"header-right\">\n <div class=\"contacto-wrapper\" id=\"contacto-wrapper\">\n <button class=\"btn-contacto\" id=\"btn-contacto\" aria-expanded=\"false\">\n Contacto <span class=\"btn-caret\">\u25be<\/span>\n <\/button>\n <div class=\"contacto-dropdown\" id=\"contacto-dropdown\">\n <a class=\"contacto-item\" id=\"contacto-email\" href=\"mailto:hola@360stark.com\">\n <span class=\"contacto-icon\">\u2709<\/span><span>Email<\/span>\n <\/a>\n <a class=\"contacto-item\" id=\"contacto-whatsapp\" href=\"#\" target=\"_blank\" rel=\"noopener\">\n <span class=\"contacto-icon\">\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 32 32\"><path fill=\"#25D366\" d=\"M16 0C7.163 0 0 7.163 0 16c0 2.822.736 5.47 2.027 7.77L0 32l8.437-2.01A15.93 15.93 0 0016 32c8.837 0 16-7.163 16-16S24.837 0 16 0z\"\/><path fill=\"#fff\" d=\"M23.5 20.3c-.3-.15-1.8-.89-2.08-.99-.28-.1-.48-.15-.68.15-.2.3-.77.99-.95 1.19-.17.2-.35.22-.65.07-.3-.15-1.27-.47-2.42-1.5-.89-.8-1.5-1.78-1.67-2.08-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.68-1.64-.93-2.24-.24-.59-.49-.51-.68-.52H13.5c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.27.49 1.7.63.72.23 1.37.2 1.88.12.57-.09 1.76-.72 2.01-1.41.25-.69.25-1.28.17-1.41-.07-.13-.27-.2-.57-.35z\"\/><\/svg>\n <\/span><span id=\"whatsapp-label\">WhatsApp ES<\/span>\n <\/a>\n <a class=\"contacto-item\" id=\"contacto-llamar\" href=\"#\">\n <span class=\"contacto-icon\">\ud83d\udcde<\/span><span id=\"llamar-label\">Llamar ES<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"selector-idiomas desktop-only\">\n <button id=\"idioma-toggle\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n <span class=\"flag\" id=\"flag-activo\">\ud83c\uddea\ud83c\uddf8<\/span>\n <span class=\"code\" id=\"code-activo\">ES<\/span>\n <span class=\"caret\">\u25bc<\/span>\n <\/button>\n <ul id=\"idioma-list\" role=\"listbox\" aria-label=\"Seleccionar idioma\">\n <li data-prefix=\"\" data-flag=\"\ud83c\uddea\ud83c\uddf8\" data-code=\"ES\" role=\"option\" tabindex=\"0\"><span class=\"flag\">\ud83c\uddea\ud83c\uddf8<\/span> ES \u2013 Espa\u00f1ol<\/li>\n <li data-prefix=\"de\" data-flag=\"\ud83c\udde9\ud83c\uddea\" data-code=\"DE\" role=\"option\" tabindex=\"0\"><span class=\"flag\">\ud83c\udde9\ud83c\uddea<\/span> DE \u2013 Deutsch<\/li>\n <li data-prefix=\"en\" data-flag=\"\ud83c\uddec\ud83c\udde7\" data-code=\"EN\" role=\"option\" tabindex=\"0\"><span class=\"flag\">\ud83c\uddec\ud83c\udde7<\/span> EN \u2013 English<\/li>\n <\/ul>\n <\/div>\n\n \n <button class=\"menu-mobile-toggle\" id=\"menu-toggle\" aria-label=\"Abrir men\u00fa\" aria-expanded=\"false\">\n <span><\/span><span><\/span><span><\/span>\n <\/button>\n <\/div>\n <\/div>\n<\/header>\n\n<div id=\"idioma-flotante-mobile\">\n <button id=\"idioma-toggle-mobile\" aria-expanded=\"false\">\n <span class=\"flag\" id=\"flag-activo-mobile\">\ud83c\uddea\ud83c\uddf8<\/span>\n <span class=\"code\" id=\"code-activo-mobile\">ES<\/span>\n <span class=\"caret\">\u25bc<\/span>\n <\/button>\n <ul id=\"idioma-list-mobile\" role=\"listbox\">\n <li data-prefix=\"\" data-flag=\"\ud83c\uddea\ud83c\uddf8\" data-code=\"ES\" role=\"option\" tabindex=\"0\"><span class=\"flag\">\ud83c\uddea\ud83c\uddf8<\/span> ES \u2013 Espa\u00f1ol<\/li>\n <li data-prefix=\"de\" data-flag=\"\ud83c\udde9\ud83c\uddea\" data-code=\"DE\" role=\"option\" tabindex=\"0\"><span class=\"flag\">\ud83c\udde9\ud83c\uddea<\/span> DE \u2013 Deutsch<\/li>\n <li data-prefix=\"en\" data-flag=\"\ud83c\uddec\ud83c\udde7\" data-code=\"EN\" role=\"option\" tabindex=\"0\"><span class=\"flag\">\ud83c\uddec\ud83c\udde7<\/span> EN \u2013 English<\/li>\n <\/ul>\n<\/div>\n\n<style>\n:root {\n --orange: #FF8C00;\n --bg-header: rgba(20,20,20,0.97);\n --radius: 33px;\n}\n*, *::before, *::after { box-sizing: border-box; }\n\n#header-flotante {\n position: fixed;\n top: 25px; left: 50px; right: 50px;\n z-index: 9999;\n background: var(--bg-header);\n box-shadow: 0 4px 20px rgba(255,140,0,0.30);\n border-radius: var(--radius);\n font-family: 'Outfit', sans-serif;\n overflow: visible;\n transition: top 0.3s, box-shadow 0.3s;\n}\n#header-flotante.scrolled { top: 12px; box-shadow: 0 4px 30px rgba(255,140,0,0.50); }\n.header-container {\n display: flex; align-items: center; justify-content: space-between;\n gap: 20px; padding: 14px 24px; transition: padding 0.3s;\n}\n#header-flotante.scrolled .header-container { padding: 8px 24px; }\n\n.logo a { display: flex; align-items: center; }\n.logo svg { height: 58px; width: auto; display: block; transition: height 0.2s; }\n#header-flotante.scrolled .logo svg { height: 46px; }\n\n.menu-principal ul {\n list-style: none; display: flex; flex-wrap: wrap;\n gap: 4px 12px; margin: 0; padding: 0; align-items: center;\n}\n.menu-principal ul li { position: relative; }\n.menu-principal ul li a {\n text-decoration: none; color: #fff; font-size: 14px; font-weight: 500;\n white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent;\n transition: color 0.2s, border-color 0.2s;\n display: flex; align-items: center; gap: 3px; cursor: pointer;\n}\n.menu-principal ul li a:hover { color: var(--orange); border-bottom-color: var(--orange); }\n.menu-caret { font-size: 10px; transition: transform 0.25s; }\n#btn-servicios.active { color: var(--orange); border-bottom-color: var(--orange); }\n#btn-servicios.active .menu-caret { transform: rotate(180deg); }\n\n\/* SERVICES DROPDOWN DESKTOP *\/\n.services-dropdown {\n display: none; position: fixed; left: 50px; right: 50px;\n background: rgba(15,17,23,0.99); border: 1px solid rgba(255,140,0,0.20);\n border-radius: 20px; box-shadow: 0 16px 48px rgba(255,140,0,0.18);\n z-index: 10000; overflow: hidden; animation: dropdownAnim 0.22s ease forwards;\n}\n.services-dropdown.open { display: block; }\n.services-inner {\n display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr;\n max-height: 380px; overflow-y: auto; padding: 20px 4px;\n scrollbar-width: thin; scrollbar-color: rgba(255,140,0,0.3) transparent;\n}\n.services-inner::-webkit-scrollbar { width: 4px; }\n.services-inner::-webkit-scrollbar-thumb { background: rgba(255,140,0,0.3); border-radius: 4px; }\n.col-divider { background: rgba(255,140,0,0.12); margin: 8px 0; }\n.services-col { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; }\n.col-category {\n font-size: 10px; font-weight: 600; color: var(--orange);\n text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px 10px; opacity: 0.7;\n}\n.service-item {\n display: flex; gap: 8px; align-items: flex-start; text-decoration: none;\n padding: 10px; border-radius: 12px; border: 1px solid transparent;\n transition: background 0.2s, border-color 0.2s;\n}\n.service-item:hover { background: rgba(255,140,0,0.07); border-color: rgba(255,140,0,0.22); }\n.s-num { font-size: 10px; font-weight: 600; color: var(--orange); opacity: 0.6; flex-shrink: 0; padding-top: 2px; min-width: 16px; }\n.service-item > div { display: flex; flex-direction: column; gap: 2px; }\n.s-badge { font-size: 9px; font-weight: 600; color: var(--orange); letter-spacing: 0.03em; opacity: 0.75; line-height: 1.3; }\n.s-title { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.3; }\n.s-desc { font-size: 11px; color: #666; line-height: 1.5; }\n.s-link { font-size: 11px; color: var(--orange); font-weight: 500; margin-top: 2px; }\n\n.header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }\n.contacto-wrapper { position: relative; }\n.btn-contacto {\n background: var(--orange); color: #fff; height: 38px; padding: 0 20px;\n border-radius: var(--radius); border: none; cursor: pointer;\n font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px;\n white-space: nowrap; display: flex; align-items: center; gap: 6px;\n transition: transform 0.2s, box-shadow 0.2s;\n}\n.btn-contacto:hover { transform: scale(1.04); box-shadow: 0 4px 18px rgba(255,140,0,0.45); }\n.btn-caret { font-size: 10px; transition: transform 0.25s; }\n.btn-contacto[aria-expanded=\"true\"] .btn-caret { transform: rotate(180deg); }\n.contacto-dropdown {\n display: none; position: absolute; top: calc(100% + 10px); right: 0;\n background: rgba(20,20,20,0.99); border: 1px solid rgba(255,140,0,0.22);\n border-radius: 18px; box-shadow: 0 8px 28px rgba(255,140,0,0.22);\n padding: 8px 0; min-width: 195px; z-index: 10001;\n animation: dropdownAnim 0.2s ease forwards;\n}\n.contacto-dropdown.open { display: block; }\n.contacto-item {\n display: flex; align-items: center; gap: 10px; padding: 11px 18px;\n text-decoration: none; color: #ddd; font-size: 13px; font-weight: 500;\n font-family: 'Outfit', sans-serif; transition: background 0.15s, color 0.15s; white-space: nowrap;\n}\n.contacto-item:hover { background: rgba(255,140,0,0.10); color: var(--orange); }\n.contacto-icon { font-size: 15px; display: flex; align-items: center; min-width: 18px; }\n.contacto-item:first-child { border-radius: 18px 18px 0 0; }\n.contacto-item:last-child { border-radius: 0 0 18px 18px; }\n.contacto-item + .contacto-item { border-top: 1px solid rgba(255,140,0,0.08); }\n\n.selector-idiomas { position: relative; }\n#idioma-toggle {\n background: #1a1a1a; color: #fff; height: 38px; padding: 0 14px;\n border-radius: var(--radius); border: 1px solid var(--orange);\n cursor: pointer; display: flex; align-items: center; gap: 5px;\n font-size: 13px; font-family: 'Outfit', sans-serif; white-space: nowrap; transition: background 0.2s;\n}\n#idioma-toggle:hover { background: #252525; }\n.caret { font-size: 9px; transition: transform 0.25s; }\n#idioma-toggle[aria-expanded=\"true\"] .caret { transform: rotate(180deg); }\n#idioma-list {\n display: none; position: absolute; top: calc(100% + 8px); right: 0;\n background: rgba(20,20,20,0.98); border-radius: 16px;\n border: 1px solid rgba(255,140,0,0.22); box-shadow: 0 8px 24px rgba(255,140,0,0.18);\n flex-direction: column; padding: 8px 0; min-width: 160px;\n list-style: none; margin: 0; z-index: 10000; animation: dropdownAnim 0.2s ease forwards;\n}\n#idioma-list.open { display: flex; }\n#idioma-list li {\n padding: 10px 16px; cursor: pointer; display: flex; gap: 8px;\n align-items: center; color: #ddd; font-size: 13px;\n font-family: 'Outfit', sans-serif; transition: background 0.15s;\n}\n#idioma-list li:hover { background: rgba(255,140,0,0.10); color: var(--orange); }\n#idioma-list li.activo { color: var(--orange); }\n#idioma-list li:first-child { border-radius: 16px 16px 0 0; }\n#idioma-list li:last-child { border-radius: 0 0 16px 16px; }\n\n.menu-mobile-toggle {\n display: none; flex-direction: column; justify-content: center;\n align-items: center; gap: 5px; cursor: pointer;\n width: 36px; height: 36px; background: none; border: none; padding: 0; flex-shrink: 0;\n}\n.menu-mobile-toggle span {\n width: 22px; height: 2.5px; background: var(--orange);\n display: block; border-radius: 2px;\n transition: transform 0.3s, opacity 0.3s; transform-origin: center;\n}\n.menu-mobile-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }\n.menu-mobile-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }\n.menu-mobile-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }\n\n#idioma-flotante-mobile {\n display: none; position: fixed; z-index: 9998; top: 80px; left: 16px;\n}\n#idioma-toggle-mobile {\n background: rgba(20,20,20,0.97); color: #fff; height: 34px; padding: 0 12px;\n border-radius: var(--radius); border: 1px solid var(--orange);\n box-shadow: 0 4px 12px rgba(255,140,0,0.22);\n cursor: pointer; display: flex; align-items: center; gap: 5px;\n font-size: 13px; font-family: 'Outfit', sans-serif; white-space: nowrap;\n}\n#idioma-toggle-mobile[aria-expanded=\"true\"] .caret { transform: rotate(180deg); }\n#idioma-list-mobile {\n display: none; position: absolute; top: calc(100% + 8px); left: 0;\n background: rgba(20,20,20,0.98); border-radius: 16px;\n border: 1px solid rgba(255,140,0,0.22); box-shadow: 0 8px 24px rgba(255,140,0,0.18);\n flex-direction: column; padding: 8px 0; min-width: 160px;\n list-style: none; margin: 0; z-index: 10000; animation: dropdownAnim 0.2s ease forwards;\n}\n#idioma-list-mobile.open { display: flex; }\n#idioma-list-mobile li {\n padding: 10px 16px; cursor: pointer; display: flex; gap: 8px;\n align-items: center; color: #ddd; font-size: 13px;\n font-family: 'Outfit', sans-serif; transition: background 0.15s;\n}\n#idioma-list-mobile li:hover { background: rgba(255,140,0,0.10); color: var(--orange); }\n#idioma-list-mobile li.activo { color: var(--orange); }\n#idioma-list-mobile li:first-child { border-radius: 16px 16px 0 0; }\n#idioma-list-mobile li:last-child { border-radius: 0 0 16px 16px; }\n\n@keyframes dropdownAnim {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MOBILE \u2264 992px\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media (max-width: 992px) {\n\n #header-flotante { left: 16px; right: 16px; top: 16px; }\n .desktop-only { display: none !important; }\n .menu-mobile-toggle{ display: flex; }\n #idioma-flotante-mobile { display: flex; align-items: flex-start; }\n\n nav.menu-principal {\n position: absolute;\n top: calc(100% + 12px);\n left: 0; right: 0;\n background: rgba(15,17,23,0.99);\n border-radius: 20px;\n border: 1px solid rgba(255,140,0,0.18);\n box-shadow: 0 8px 28px rgba(255,140,0,0.18);\n padding: 8px 15px 12px 0;\n display: none;\n z-index: 9997;\n overflow-y: auto;\n max-height: 82vh;\n }\n nav.menu-principal.open {\n display: block;\n animation: dropdownAnim 0.25s ease forwards;\n }\n\n nav.menu-principal > ul {\n display: flex !important;\n flex-direction: column !important;\n flex-wrap: nowrap !important;\n align-items: flex-start !important;\n gap: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n list-style: none;\n width: 100%;\n }\n nav.menu-principal > ul > li {\n width: 100%;\n position: relative;\n }\n nav.menu-principal > ul > li > a {\n display: flex !important;\n flex-direction: row !important;\n align-items: center !important;\n justify-content: space-between !important;\n text-align: left !important;\n width: 100% !important;\n padding: 12px 0 12px 18px !important;\n font-size: 15px !important;\n font-weight: 500;\n color: #fff !important;\n text-decoration: none;\n border-bottom: none !important;\n border-radius: 10px;\n white-space: nowrap !important;\n gap: 0 !important;\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n }\n nav.menu-principal > ul > li > a:hover {\n background: rgba(255,140,0,0.08) !important;\n color: var(--orange) !important;\n border-bottom-color: transparent !important;\n }\n\n .services-dropdown {\n position: static !important;\n display: none !important;\n left: auto !important; right: auto !important; top: auto !important;\n width: 100% !important;\n background: rgba(10,10,15,0.98) !important;\n border: 1px solid rgba(255,140,0,0.13) !important;\n border-radius: 12px !important;\n box-shadow: none !important;\n margin: 2px 0 6px 0;\n overflow: hidden;\n animation: none !important;\n }\n .services-dropdown.open { display: block !important; }\n\n .services-inner {\n display: block !important;\n max-height: 250px;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 6px 15px 10px 0 !important;\n scrollbar-width: thin;\n scrollbar-color: rgba(255,140,0,0.25) transparent;\n }\n .services-inner::-webkit-scrollbar { width: 3px; }\n .services-inner::-webkit-scrollbar-thumb { background: rgba(255,140,0,0.25); border-radius: 3px; }\n\n .col-divider { display: none !important; }\n\n .services-col {\n display: block !important;\n width: 100% !important;\n padding: 0 !important;\n }\n .col-category {\n display: block !important;\n text-align: left !important;\n padding: 10px 0 3px 18px !important;\n font-size: 9px !important;\n font-weight: 700;\n color: var(--orange);\n opacity: 0.6;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n }\n .service-item {\n display: flex !important;\n flex-direction: row !important;\n align-items: center !important;\n justify-content: flex-start !important;\n width: 100% !important;\n padding: 8px 0 8px 18px !important;\n border-radius: 8px !important;\n border: none !important;\n background: transparent;\n gap: 8px !important;\n text-decoration: none;\n transition: background 0.15s;\n }\n .service-item:hover { background: rgba(255,140,0,0.06) !important; border-color: transparent !important; }\n .service-item > div {\n display: flex !important;\n flex-direction: row !important;\n align-items: center !important;\n gap: 6px !important;\n width: 100%;\n }\n .s-num {\n font-size: 10px !important; color: var(--orange) !important;\n opacity: 0.45; flex-shrink: 0 !important; min-width: 18px;\n font-weight: 600; padding-top: 0 !important;\n }\n .s-title {\n font-size: 13px !important; font-weight: 500 !important;\n color: #d8d8d8 !important; white-space: nowrap;\n overflow: hidden; text-overflow: ellipsis;\n }\n .s-desc { display: none !important; }\n .s-link { display: none !important; }\n .s-badge { display: none !important; }\n\n .contacto-dropdown { right: auto !important; left: 0 !important; }\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n const BASE = \"https:\/\/360stark.com\";\n const PREFIXES = [\"de\", \"en\"];\n\n const CONTACTO = {\n \"\": { wa: \"34657730100\", waLabel: \"WhatsApp ES\", tel: \"+34657730100\", telLabel: \"Llamar ES\" },\n \"de\": { wa: \"4915259322567\", waLabel: \"WhatsApp DE\", tel: \"+4915259322567\", telLabel: \"Anrufen DE\" },\n \"en\": { wa: \"34657730100\", waLabel: \"WhatsApp EN\", tel: \"+34657730100\", telLabel: \"Call EN\" },\n };\n\n function detectarIdioma() {\n const seg = window.location.pathname.split(\"\/\").filter(Boolean);\n return PREFIXES.includes(seg[0]) ? seg[0] : \"\";\n }\n\n function buildUrl(prefijo, enlace) {\n if (typeof enlace === \"string\" && enlace.startsWith(\"#\")) {\n return prefijo ? `${BASE}\/${prefijo}\/${enlace}` : `${BASE}\/${enlace}`;\n }\n let slug = String(enlace).replace(BASE, \"\").replace(\/^\\\/\/, \"\");\n PREFIXES.forEach(p => { slug = slug.replace(new RegExp(\"^\" + p + \"\/\"), \"\"); });\n return prefijo ? `${BASE}\/${prefijo}\/${slug}` : `${BASE}\/${slug}`;\n }\n\n function actualizarContacto(prefijo) {\n const data = CONTACTO[prefijo] || CONTACTO[\"\"];\n document.getElementById(\"contacto-whatsapp\").href = `https:\/\/wa.me\/${data.wa}`;\n document.getElementById(\"whatsapp-label\").textContent = data.waLabel;\n document.getElementById(\"contacto-llamar\").href = `tel:${data.tel}`;\n document.getElementById(\"llamar-label\").textContent = data.telLabel;\n }\n\n function posicionarServicesDropdown() {\n const drop = document.getElementById(\"mega-servicios\");\n if (!drop || window.innerWidth <= 992) return;\n const bottom = document.getElementById(\"header-flotante\").getBoundingClientRect().bottom;\n drop.style.top = (bottom + 8) + \"px\";\n }\n\n function posicionarIdiomaFlotante() {\n const flotante = document.getElementById(\"idioma-flotante-mobile\");\n if (!flotante || window.innerWidth > 992) return;\n flotante.style.top = (document.getElementById(\"header-flotante\").getBoundingClientRect().bottom + 10) + \"px\";\n }\n\n const header = document.getElementById(\"header-flotante\");\n const menuToggle = document.getElementById(\"menu-toggle\");\n const menu = document.getElementById(\"menu-principal\");\n const btnServicios = document.getElementById(\"btn-servicios\");\n const dropServicios = document.getElementById(\"mega-servicios\");\n const btnContacto = document.getElementById(\"btn-contacto\");\n const contactoDrop = document.getElementById(\"contacto-dropdown\");\n const idiomaToggle = document.getElementById(\"idioma-toggle\");\n const idiomaList = document.getElementById(\"idioma-list\");\n const flagActivo = document.getElementById(\"flag-activo\");\n const codeActivo = document.getElementById(\"code-activo\");\n const idiomaItems = idiomaList.querySelectorAll(\"li\");\n const idiomaToggleM = document.getElementById(\"idioma-toggle-mobile\");\n const idiomaListM = document.getElementById(\"idioma-list-mobile\");\n const flagActivoM = document.getElementById(\"flag-activo-mobile\");\n const codeActivoM = document.getElementById(\"code-activo-mobile\");\n const idiomaItemsM = idiomaListM.querySelectorAll(\"li\");\n const idiomaActual = detectarIdioma();\n\n function inicializarIdioma(items, flagEl, codeEl) {\n items.forEach(li => {\n if (li.dataset.prefix === idiomaActual) {\n flagEl.textContent = li.dataset.flag;\n codeEl.textContent = li.dataset.code;\n li.classList.add(\"activo\");\n }\n });\n }\n inicializarIdioma(idiomaItems, flagActivo, codeActivo);\n inicializarIdioma(idiomaItemsM, flagActivoM, codeActivoM);\n actualizarContacto(idiomaActual);\n\n function actualizarLinks(prefijo) {\n menu.querySelectorAll(\"a[data-slug]\").forEach(a => {\n const slug = a.dataset.slug;\n a.href = slug ? buildUrl(prefijo, slug + \"\/\") : buildUrl(prefijo, \"\");\n });\n }\n actualizarLinks(idiomaActual);\n\n \/* \u2500\u2500 Cierra dropdowns secundarios (NO el men\u00fa mobile) \u2500\u2500 *\/\n function closeDropdowns() {\n dropServicios.classList.remove(\"open\");\n btnServicios.classList.remove(\"active\");\n contactoDrop.classList.remove(\"open\");\n btnContacto.setAttribute(\"aria-expanded\", \"false\");\n idiomaList.classList.remove(\"open\");\n idiomaToggle.setAttribute(\"aria-expanded\", \"false\");\n idiomaListM.classList.remove(\"open\");\n idiomaToggleM.setAttribute(\"aria-expanded\", \"false\");\n }\n\n \/* \u2500\u2500 Cierra absolutamente todo incluyendo el men\u00fa mobile \u2500\u2500 *\/\n function closeAll() {\n closeDropdowns();\n menu.classList.remove(\"open\");\n menuToggle.classList.remove(\"open\");\n menuToggle.setAttribute(\"aria-expanded\", \"false\");\n }\n\n window.addEventListener(\"scroll\", () => {\n header.classList.toggle(\"scrolled\", window.scrollY > 50);\n posicionarServicesDropdown();\n posicionarIdiomaFlotante();\n }, { passive: true });\n window.addEventListener(\"resize\", () => {\n posicionarServicesDropdown();\n posicionarIdiomaFlotante();\n }, { passive: true });\n posicionarServicesDropdown();\n posicionarIdiomaFlotante();\n\n \/* \u2500\u2500 HAMBURGUESA: gestiona su propio toggle, sin depender de closeAll \u2500\u2500\n FIX CLAVE: el handler hace stopPropagation para que el click no llegue\n al document (que llamar\u00eda a closeAll y lo volver\u00eda a cerrar al instante).\n El estado open\/close lo maneja \u00e9l mismo de forma expl\u00edcita. \u2500\u2500 *\/\n menuToggle.addEventListener(\"click\", function (e) {\n e.stopPropagation();\n const estaAbierto = menu.classList.contains(\"open\");\n if (estaAbierto) {\n \/* Cerrar men\u00fa *\/\n menu.classList.remove(\"open\");\n menuToggle.classList.remove(\"open\");\n menuToggle.setAttribute(\"aria-expanded\", \"false\");\n dropServicios.classList.remove(\"open\");\n btnServicios.classList.remove(\"active\");\n } else {\n \/* Abrir men\u00fa \u2014 cerrar primero cualquier otro dropdown *\/\n closeDropdowns();\n menu.classList.add(\"open\");\n menuToggle.classList.add(\"open\");\n menuToggle.setAttribute(\"aria-expanded\", \"true\");\n }\n });\n\n \/* \u2500\u2500 Servicios \u2500\u2500 *\/\n btnServicios.addEventListener(\"click\", function (e) {\n e.preventDefault();\n e.stopPropagation();\n if (window.innerWidth <= 992) {\n const isOpen = dropServicios.classList.toggle(\"open\");\n btnServicios.classList.toggle(\"active\", isOpen);\n return;\n }\n const isOpen = dropServicios.classList.contains(\"open\");\n closeDropdowns();\n if (!isOpen) {\n dropServicios.classList.add(\"open\");\n btnServicios.classList.add(\"active\");\n posicionarServicesDropdown();\n }\n });\n\n \/* \u2500\u2500 Contacto \u2500\u2500 *\/\n btnContacto.addEventListener(\"click\", function (e) {\n e.stopPropagation();\n const isOpen = contactoDrop.classList.contains(\"open\");\n closeDropdowns();\n if (!isOpen) { contactoDrop.classList.add(\"open\"); btnContacto.setAttribute(\"aria-expanded\", \"true\"); }\n });\n\n \/* \u2500\u2500 Idioma desktop \u2500\u2500 *\/\n idiomaToggle.addEventListener(\"click\", function (e) {\n e.stopPropagation();\n const isOpen = idiomaList.classList.contains(\"open\");\n closeDropdowns();\n if (!isOpen) { idiomaList.classList.add(\"open\"); idiomaToggle.setAttribute(\"aria-expanded\", \"true\"); }\n });\n\n \/* \u2500\u2500 Idioma mobile \u2500\u2500 *\/\n idiomaToggleM.addEventListener(\"click\", function (e) {\n e.stopPropagation();\n const isOpen = idiomaListM.classList.contains(\"open\");\n closeDropdowns();\n if (!isOpen) { idiomaListM.classList.add(\"open\"); idiomaToggleM.setAttribute(\"aria-expanded\", \"true\"); }\n });\n\n \/* \u2500\u2500 Selector idioma \u2500\u2500 *\/\n function crearSelectorHandler(items, flagEl, codeEl, listEl, toggleEl) {\n items.forEach(li => {\n function seleccionar() {\n const prefijo = li.dataset.prefix;\n flagEl.textContent = li.dataset.flag;\n codeEl.textContent = li.dataset.code;\n items.forEach(i => i.classList.remove(\"activo\"));\n li.classList.add(\"activo\");\n listEl.classList.remove(\"open\");\n toggleEl.setAttribute(\"aria-expanded\", \"false\");\n actualizarContacto(prefijo);\n actualizarLinks(prefijo);\n window.location.href = buildUrl(prefijo, window.location.href);\n }\n li.addEventListener(\"click\", seleccionar);\n li.addEventListener(\"keydown\", e => { if (e.key === \"Enter\" || e.key === \" \") { e.preventDefault(); seleccionar(); } });\n });\n }\n crearSelectorHandler(idiomaItems, flagActivo, codeActivo, idiomaList, idiomaToggle);\n crearSelectorHandler(idiomaItemsM, flagActivoM, codeActivoM, idiomaListM, idiomaToggleM);\n\n \/* \u2500\u2500 Click fuera cierra todo \u2500\u2500 *\/\n document.addEventListener(\"click\", closeAll);\n\n \/* El header para la propagaci\u00f3n hacia document EXCEPTO el menuToggle,\n que ya tiene su propio stopPropagation y maneja su estado solo *\/\n header.addEventListener(\"click\", function (e) {\n \/* Solo parar si NO es el propio menuToggle (\u00e9l ya lo gestiona) *\/\n if (!menuToggle.contains(e.target)) {\n e.stopPropagation();\n }\n });\n\n document.getElementById(\"idioma-flotante-mobile\").addEventListener(\"click\", e => e.stopPropagation());\n document.getElementById(\"contacto-wrapper\").addEventListener(\"click\", e => e.stopPropagation());\n});\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b388ff elementor-widget elementor-widget-html\" data-id=\"9b388ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>360\u00b0 Stark \u2014 Hero<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --orange: #FF8C00;\n --orange-deep: #E67A00;\n --orange-light: #FFB347;\n --carbon: #0f1117;\n --carbon-mid: #161b24;\n --carbon-border: rgba(255, 255, 255, 0.07);\n --white: #ffffff;\n --white-muted: rgba(255, 255, 255, 0.6);\n }\n\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: 'Outfit', sans-serif;\n background: var(--carbon);\n color: var(--white);\n overflow-x: hidden;\n }\/* HERO *\/\n .hero {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 120px 5% 80px;\n position: relative;\n overflow: hidden;\n }\n\n .hero-bg {\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse 60% 50% at 70% 40%, rgba(255, 140, 0, 0.08) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 20% 70%, rgba(107, 122, 144, 0.06) 0%, transparent 70%);\n }\n\n .hero-grid-lines {\n position: absolute;\n inset: 0;\n background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n background-size: 80px 80px;\n mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);\n }\n\n .hero-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: rgba(255, 140, 0, 0.1);\n border: 1px solid rgba(255, 140, 0, 0.25);\n color: var(--orange-light);\n font-size: 11px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n padding: 6px 16px;\n border-radius: 100px;\n font-family: 'Space Mono', monospace;\n margin-bottom: 36px;\n width: fit-content;\n animation: fadeUp 0.8s ease both;\n }\n\n .hero-tag::before {\n content: '';\n width: 6px;\n height: 6px;\n background: var(--orange);\n border-radius: 50%;\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0%, 100% {\n opacity: 1;\n transform:scale(1)\n }\n\n 50% {\n opacity: .5;\n transform: scale(.7)\n }\n }\n\n .hero-headline {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(72px, 10vw, 140px);\n line-height: 0.92;\n letter-spacing: -0.01em;\n margin-bottom: 32px;\n animation: fadeUp 0.8s 0.1s ease both;\n }\n\n .hero-headline .line-orange {\n color: var(--orange);\n }\n\n .hero-headline .line-dim {\n color: rgba(255, 255, 255, 0.15);\n }\n\n .hero-sub {\n font-size: 18px;\n color: var(--white-muted);\n max-width: 520px;\n line-height: 1.65;\n margin-bottom: 48px;\n font-weight: 300;\n animation: fadeUp 0.8s 0.2s ease both;\n }\n\n .hero-actions {\n display: flex;\n gap: 16px;\n align-items: center;\n animation: fadeUp 0.8s 0.3s ease both;\n }\n\n .btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--orange);\n color: var(--carbon);\n font-weight: 600;\n font-size: 14px;\n padding: 14px 28px;\n border-radius: 8px;\n text-decoration: none;\n letter-spacing: 0.02em;\n transition: background 0.2s, transform 0.15s, box-shadow 0.2s;\n }\n\n .btn-primary:hover {\n background: var(--orange-deep);\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(255, 140, 0, 0.3);\n }\n\n .btn-secondary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n color: var(--white-muted);\n font-size: 14px;\n text-decoration: none;\n padding: 14px 0;\n transition: color 0.2s;\n }\n\n .btn-secondary:hover {\n color: var(--white);\n }\n\n .btn-secondary svg {\n transition: transform 0.2s;\n }\n\n .btn-secondary:hover svg {\n transform: translateX(4px);\n }\n\n .hero-stats {\n display: flex;\n gap: 48px;\n margin-top: 80px;\n padding-top: 40px;\n border-top: 1px solid var(--carbon-border);\n animation: fadeUp 0.8s 0.4s ease both;\n }\n\n .stat-num {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 42px;\n color: var(--orange);\n line-height: 1;\n }\n\n .stat-label {\n font-size: 12px;\n color: var(--white-muted);\n letter-spacing: 0.06em;\n text-transform: uppercase;\n margin-top: 4px;\n }\/* \u2500\u2500 HERO VISUAL \u2500\u2500 *\/\n .hero-visual {\n position: absolute;\n right: 5%;\n top: 50%;\n margin-top: -230px;\n width: 460px;\n height: 460px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: floatHero 6s ease-in-out infinite, fadeUp 1s 0.3s ease both;\n }\n\n @keyframes floatHero {\n 0%, 100% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-14px);\n }\n }\/* Logo *\/\n .logo-svg {\n width: 280px;\n height: 280px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 2;\n filter: drop-shadow(0 0 60px rgba(255, 140, 0, 0.15));\n }\/* \u2500\u2500 FLOATING PILL BUTTONS (fixed positions) \u2500\u2500 *\/\n \/*\n Each button is absolutely positioned relative to .hero-visual center.\n top: 50% + translateY(-50%) centers it vertically.\n left: 50% + translateX(-50%) centers it horizontally.\n Then we offset by the precomputed x,y coordinates.\n Individual float animations keep them alive without rotation.\n *\/\n .orbit-btn {\n position: absolute;\n width: 100px;\n height: 33px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n background: rgba(15, 17, 23, 0.6);\n border: 1px solid var(--orange);\n border-radius: 7px;\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n color: #fff;\n font-family: 'Space Mono', monospace;\n font-size: 11px;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n white-space: nowrap;\n text-decoration: none;\n cursor: pointer;\n z-index: 3;\n transition: background 0.25s, border-color 0.25s, box-shadow 0.3s, filter 0.3s;\n }\n\n .orbit-btn:hover {\n background: rgba(255, 140, 0, 0.18);\n border-color: #FFB347;\n color: #fff;\n box-shadow:\n 0 0 10px 3px rgba(255, 140, 0, 0.65), 0 0 28px 8px rgba(255, 140, 0, 0.3), inset 0 0 10px rgba(255, 140, 0, 0.15);\n animation-play-state: paused;\n z-index: 10;\n }\/*\n Positions: radius=200px, 10 buttons, starting from top (-90deg)\n Each button: left = 50% + x - 38.5px (half width)\n top = 50% + y - 16.5px (half height)\n\n btn1: x=0, y=-200 \u2192 top: calc(50% - 217px) left: calc(50% - 38.5px)\n btn2: x=118, y=-162 \u2192 top: calc(50% - 179px) left: calc(50% + 79.5px)\n btn3: x=190, y=-62 \u2192 top: calc(50% - 78.5px) left: calc(50% + 151.5px)\n btn4: x=190, y=62 \u2192 top: calc(50% + 45.5px) left: calc(50% + 151.5px)\n btn5: x=118, y=162 \u2192 top: calc(50% + 145.5px) left: calc(50% + 79.5px)\n btn6: x=0, y=200 \u2192 top: calc(50% + 183.5px) left: calc(50% - 38.5px)\n btn7: x=-118, y=162 \u2192 top: calc(50% + 145.5px) left: calc(50% - 156.5px)\n btn8: x=-190, y=62 \u2192 top: calc(50% + 45.5px) left: calc(50% - 228.5px)\n btn9: x=-190, y=-62 \u2192 top: calc(50% - 78.5px) left: calc(50% - 228.5px)\n btn10: x=-118, y=-162 \u2192 top: calc(50% - 179px) left: calc(50% - 156.5px)\n *\/\n .orbit-btn:nth-child(1) {\n top: calc(50% - 216px);\n left: calc(50% - 38.5px);\n --tx: 0px;\n --ty: -216px;\n animation: floatBtn 4.0s ease-in-out infinite;\n }\n\n .orbit-btn:nth-child(2) {\n top: calc(50% - 178px);\n left: calc(50% + 79.5px);\n --tx: 118px;\n --ty: -162px;\n animation: floatBtn 4.5s ease-in-out infinite 0.3s;\n }\n\n .orbit-btn:nth-child(3) {\n top: calc(50% - 78px);\n left: calc(50% + 151.5px);\n --tx: 190px;\n --ty: -62px;\n animation: floatBtn 3.8s ease-in-out infinite 0.6s;\n }\n\n .orbit-btn:nth-child(4) {\n top: calc(50% + 46px);\n left: calc(50% + 151.5px);\n --tx: 190px;\n --ty: 62px;\n animation: floatBtn 4.2s ease-in-out infinite 0.9s;\n }\n\n .orbit-btn:nth-child(5) {\n top: calc(50% + 146px);\n left: calc(50% + 79.5px);\n --tx: 118px;\n --ty: 162px;\n animation: floatBtn 3.6s ease-in-out infinite 1.2s;\n }\n\n .orbit-btn:nth-child(6) {\n top: calc(50% + 183px);\n left: calc(50% - 38.5px);\n --tx: 0px;\n --ty: 200px;\n animation: floatBtn 4.8s ease-in-out infinite 1.5s;\n }\n\n .orbit-btn:nth-child(7) {\n top: calc(50% + 146px);\n left: calc(50% - 156.5px);\n --tx: -118px;\n --ty: 162px;\n animation: floatBtn 4.1s ease-in-out infinite 1.8s;\n }\n\n .orbit-btn:nth-child(8) {\n top: calc(50% + 46px);\n left: calc(50% - 228.5px);\n --tx: -190px;\n --ty: 62px;\n animation: floatBtn 3.9s ease-in-out infinite 2.1s;\n }\n\n .orbit-btn:nth-child(9) {\n top: calc(50% - 78px);\n left: calc(50% - 228.5px);\n --tx: -190px;\n --ty: -62px;\n animation: floatBtn 4.4s ease-in-out infinite 2.4s;\n }\n\n .orbit-btn:nth-child(10) {\n top: calc(50% - 178px);\n left: calc(50% - 156.5px);\n --tx: -118px;\n --ty: -162px;\n animation: floatBtn 3.7s ease-in-out infinite 2.7s;\n }\/* Gentle individual float \u2014 each button bobs slightly up\/down independently *\/\n @keyframes floatBtn {\n 0%, 100% {\n transform: translateY(0px);\n }\n\n 50% {\n transform: translateY(-7px);\n }\n }\/* Fade in staggered *\/\n .orbit-btn:nth-child(1) {\n animation-delay: 0s, 0.1s;\n }\n\n .orbit-btn:nth-child(2) {\n animation-delay: 0.3s, 0.2s;\n }\n\n .orbit-btn:nth-child(3) {\n animation-delay: 0.6s, 0.3s;\n }\n\n .orbit-btn:nth-child(4) {\n animation-delay: 0.9s, 0.4s;\n }\n\n .orbit-btn:nth-child(5) {\n animation-delay: 1.2s, 0.5s;\n }\n\n .orbit-btn:nth-child(6) {\n animation-delay: 1.5s, 0.6s;\n }\n\n .orbit-btn:nth-child(7) {\n animation-delay: 1.8s, 0.7s;\n }\n\n .orbit-btn:nth-child(8) {\n animation-delay: 2.1s, 0.8s;\n }\n\n .orbit-btn:nth-child(9) {\n animation-delay: 2.4s, 0.9s;\n }\n\n .orbit-btn:nth-child(10) {\n animation-delay: 2.7s, 1.0s;\n }\n\n @keyframes fadeUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @media (max-width: 1100px) {\n .hero-visual {\n display: none;\n }\n }\n\n @media (max-width: 900px) {\n .hero-stats {\n gap: 28px;\n flex-wrap: wrap;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"hero\">\n <div class=\"hero-bg\"><\/div>\n <div class=\"hero-grid-lines\"><\/div>\n\n <div class=\"hero-tag\">Full Stack Agency \u00b7 Made in Europe<\/div>\n\n <h1 class=\"hero-headline\">\n\n TU MARCA.\n <br>\n <span class=\"line-orange\">SIN L\u00cdMITES.<\/span>\n <br>\n <span class=\"line-dim\">360\u00b0<\/span>\n <\/h1>\n\n <p class=\"hero-sub\">\n Estrategia, dise\u00f1o, tecnolog\u00eda y performance en un solo equipo. Hacemos crecer marcas que quieren liderar.\n <\/p>\n\n <div class=\"hero-actions\">\n <a href=\"#contacto\" class=\"btn-primary\">\n\n Empieza ahora\n \n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n <\/svg>\n <\/a>\n <a href=\"#portfolio\" class=\"btn-secondary\">\n\n Ver proyectos\n \n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n <\/svg>\n <\/a>\n <\/div>\n\n <div class=\"hero-stats\">\n <div>\n <div class=\"stat-num\">+120<\/div>\n <div class=\"stat-label\">Proyectos entregados<\/div>\n <\/div>\n <div>\n <div class=\"stat-num\">+80<\/div>\n <div class=\"stat-label\">Clientes satisfechos<\/div>\n <\/div>\n <div>\n <div class=\"stat-num\">10+<\/div>\n <div class=\"stat-label\">A\u00f1os de experiencia<\/div>\n <\/div>\n <div>\n <div class=\"stat-num\">360\u00b0<\/div>\n <div class=\"stat-label\">Visi\u00f3n de marca<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"hero-visual\">\n\n \n <a href=\"#marketing\" class=\"orbit-btn\">Marketing<\/a>\n <a href=\"#seo-sem\" class=\"orbit-btn\">SEO\/SEM<\/a>\n <a href=\"#branding\" class=\"orbit-btn\">Branding<\/a>\n <a href=\"#webdev\" class=\"orbit-btn\">Web.Dev<\/a>\n <a href=\"#smartwebs\" class=\"orbit-btn\">Smartwebs<\/a>\n <a href=\"#biolinks\" class=\"orbit-btn\">Biolinks NFC<\/a>\n <a href=\"#booking\" class=\"orbit-btn\">Booking<\/a>\n <a href=\"#cartas\" class=\"orbit-btn\">Cartas QR<\/a>\n <a href=\"#hosting\" class=\"orbit-btn\">Hosting<\/a>\n <a href=\"#auditorias\" class=\"orbit-btn\">Auditor\u00edas<\/a>\n\n \n<svg class=\"logo-svg\" viewBox=\"0 0 340 340\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"170\" cy=\"170\" r=\"150\" stroke=\"rgba(255,255,255,0.04)\" stroke-width=\"1\"\/>\n <circle cx=\"170\" cy=\"170\" r=\"120\" stroke=\"rgba(255,255,255,0.06)\" stroke-width=\"1\"\/>\n \n <circle cx=\"170\" cy=\"170\" r=\"140\" stroke=\"white\" stroke-width=\"3.5\" stroke-dasharray=\"600 100\" stroke-linecap=\"round\"\/>\n \n <circle cx=\"170\" cy=\"170\" r=\"140\" stroke=\"#FF8C00\" stroke-width=\"4\" stroke-dasharray=\"160 480\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 170 170\" to=\"360 170 170\" dur=\"10s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n\n <circle cx=\"170\" cy=\"170\" r=\"140\" stroke=\"rgba(255,140,0,0.3)\" stroke-width=\"1\" stroke-dasharray=\"80 560\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"180 170 170\" to=\"-180 170 170\" dur=\"16s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n\n \n <text x=\"170\" y=\"180\" text-anchor=\"middle\" font-size=\"88\" font-weight=\"700\" fill=\"#4a5668\" font-family=\"sans-serif\">S<\/text>\n\n \n <text x=\"170\" y=\"228\" text-anchor=\"middle\" font-size=\"20\" font-weight=\"600\" fill=\"#FF8C00\" font-family=\"Montserrat, sans-serif\" letter-spacing=\"2\">\n 360\u00ba\n <\/text>\n\n \n <text x=\"170\" y=\"256\" text-anchor=\"middle\" font-size=\"18\" fill=\"rgba(255,255,255,0.35)\" font-family=\"monospace\" letter-spacing=\"8\">\n STARK\n <\/text>\n<\/svg>\n\n <\/div>\n <\/section>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a6c102e elementor-widget elementor-widget-html\" data-id=\"a6c102e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>360\u00b0 Stark \u2014 Marquee<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --orange: #FF8C00;\n --carbon-mid: #161b24;\n --carbon-border: rgba(255, 255, 255, 0.07);\n --steel-light: #9AAAC0;\n }\n\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n background: var(--carbon-mid);\n }\n\n .marquee-section {\n border-top: 1px solid var(--carbon-border);\n border-bottom: 1px solid var(--carbon-border);\n padding: 18px 0;\n overflow: hidden;\n background: var(--carbon-mid);\n }\n\n .marquee-track {\n display: flex;\n white-space: nowrap;\n animation: marquee 28s linear infinite;\n }\n\n @keyframes marquee {\n from {\n transform: translateX(0);\n }\n\n to {\n transform: translateX(-50%);\n }\n }\n\n .marquee-item {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 0 32px;\n font-family: 'Space Mono', monospace;\n font-size: 11px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--steel-light);\n }\n\n .marquee-dot {\n width: 4px;\n height: 4px;\n background: var(--orange);\n border-radius: 50%;\n flex-shrink: 0;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"marquee-section\">\n <div class=\"marquee-track\">\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Marketing 360\u00b0\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n SEO \/ SEM\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Branding\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Paid Media\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Web Development\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Dise\u00f1o Creativo\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Biolinks\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Premium Web\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Hosting\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Mantenimiento\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Marketing 360\u00b0\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n SEO \/ SEM\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Branding\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Paid Media\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Web Development\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Dise\u00f1o Creativo\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Biolinks\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Premium Web\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Hosting\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Mantenimiento\n <\/span>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c3fb1dc elementor-widget elementor-widget-html\" data-id=\"c3fb1dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>360\u00b0 Stark \u2014 Servicios<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n --orange: #FF8C00;\n --orange-deep: #E67A00;\n --carbon: #0f1117;\n --carbon-mid: #161b24;\n --carbon-surface: #1e2433;\n --carbon-border: rgba(255,255,255,0.07);\n --white: #ffffff;\n --white-muted: rgba(255,255,255,0.6);\n}\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nbody { font-family: 'Outfit', sans-serif; background: var(--carbon); color: var(--white); }\n\n.section-tag { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }\n.section-tag::before { content: ''; display: block; width: 28px; height: 1px; background: var(--orange); }\n.section-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 5.5vw, 72px); line-height: 1; }\n.section-title span { color: var(--orange); }\n.section-header { margin-bottom: 64px; }\n\n.services { padding: 120px 5%; background: var(--carbon); }\n\n.services-grid {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 2px;\n background: var(--carbon-border);\n border: 1px solid var(--carbon-border);\n border-radius: 16px;\n overflow: hidden;\n}\n\n.service-card {\n background: var(--carbon-mid);\n padding: 36px 28px;\n position: relative;\n overflow: hidden;\n transition: background 0.3s;\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: inherit;\n cursor: pointer;\n}\n\n.service-card::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(255,140,0,0.06) 0%, transparent 60%);\n opacity: 0;\n transition: opacity 0.3s;\n}\n.service-card:hover { background: var(--carbon-surface); }\n.service-card:hover::before { opacity: 1; }\n\n.service-icon {\n width: 44px; height: 44px;\n background: rgba(255,140,0,0.1);\n border: 1px solid rgba(255,140,0,0.2);\n border-radius: 10px;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 20px;\n transition: background 0.3s, border-color 0.3s;\n flex-shrink: 0;\n}\n.service-card:hover .service-icon { background: rgba(255,140,0,0.18); border-color: rgba(255,140,0,0.4); }\n.service-icon svg { width: 20px; height: 20px; }\n\n.service-num {\n position: absolute;\n top: 28px; right: 24px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 44px;\n color: rgba(255,255,255,0.03);\n line-height: 1;\n transition: color 0.3s;\n}\n.service-card:hover .service-num { color: rgba(255,140,0,0.06); }\n\n.service-title { font-size: 15px; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.01em; line-height: 1.3; }\n.service-desc { font-size: 13px; color: var(--white-muted); line-height: 1.6; font-weight: 300; flex: 1; }\n\n.service-tag {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n margin-top: 4px;\n margin-bottom: 8px;\n font-size: 9px;\n font-family: 'Space Mono', monospace;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--orange);\n opacity: 0.7;\n}\n\n.service-arrow {\n margin-top: 20px;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: 11px;\n color: var(--orange);\n font-family: 'Space Mono', monospace;\n letter-spacing: 0.08em;\n text-decoration: none;\n opacity: 0;\n transform: translateY(6px);\n transition: opacity 0.3s, transform 0.3s;\n}\n.service-card:hover .service-arrow { opacity: 1; transform: translateY(0); }\n\n\/* 2 filas de 5 \u2014 mobile: 2 columnas *\/\n@media (max-width: 1100px) {\n .services-grid { grid-template-columns: repeat(2, 1fr); }\n}\n@media (max-width: 600px) {\n .services-grid { grid-template-columns: 1fr; }\n}\n<\/style>\n<\/head>\n<body>\n<section class=\"services\" id=\"servicios\">\n <div class=\"section-header\">\n <div class=\"section-tag\">Qu\u00e9 hacemos<\/div>\n <h2 class=\"section-title\">NUESTROS <span>SERVICIOS<\/span><\/h2>\n <\/div>\n\n <div class=\"services-grid\">\n\n \n <a class=\"service-card\" id=\"marketing\" href=\"\/servicios\/marketing-360\">\n <div class=\"service-num\">01<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <path d=\"M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Marketing 360\u00b0<\/div>\n <div class=\"service-desc\">Estrategia integral que cubre todos los canales. Una sola agencia para toda tu presencia digital.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"seo-sem\" href=\"\/servicios\/seo-sem-paid-media\">\n <div class=\"service-num\">02<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"M21 21l-4.35-4.35\"\/>\n <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">SEO \/ SEM & Paid Media<\/div>\n <div class=\"service-desc\">Posicionamiento org\u00e1nico y campa\u00f1as de pago. Google Ads, Meta Ads y TikTok Ads con ROI medible.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"branding\" href=\"\/servicios\/branding-diseno\">\n <div class=\"service-num\">03<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Branding & Dise\u00f1o<\/div>\n <div class=\"service-desc\">Identidad visual completa. Dise\u00f1o gr\u00e1fico, motion y contenido visual que conecta y perdura.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"webdev\" href=\"\/servicios\/web-development\">\n <div class=\"service-num\">04<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Web Development<\/div>\n <div class=\"service-desc\">Desarrollo web a medida, r\u00e1pido y escalable. Tecnolog\u00eda al servicio de tu negocio y conversi\u00f3n.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"smartwebs\" href=\"\/servicios\/smartwebs-ia\">\n <div class=\"service-num\">05<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\n <path d=\"M3 9h18M9 21V9\"\/>\n <path d=\"M15 6l1.5 1.5L15 9\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Smartwebs & IA<\/div>\n <div class=\"service-desc\">Webs inteligentes con automatizaciones e inteligencia artificial integrada para escalar sin l\u00edmites.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"biolinks\" href=\"\/servicios\/biolinks-nfc\">\n <div class=\"service-num\">06<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71\"\/>\n <path d=\"M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Biolinks & NFC<\/div>\n <div class=\"service-tag\">\u00b7 En colaboraci\u00f3n con Linkscard.pro<\/div>\n <div class=\"service-desc\">Tu hub de enlaces con marca propia. Tarjetas NFC f\u00edsicas inteligentes que comparten tu perfil al instante.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"booking\" href=\"\/servicios\/booking-systems\">\n <div class=\"service-num\">07<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/>\n <path d=\"M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Booking Systems<\/div>\n <div class=\"service-desc\">Sistemas de reservas online para restaurantes, cl\u00ednicas y hoteles. Automatiza citas y gestiona disponibilidad.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"cartas\" href=\"\/servicios\/cartas-digitales\">\n <div class=\"service-num\">08<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n <polyline points=\"10 9 9 9 8 9\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Cartas Digitales<\/div>\n <div class=\"service-desc\">Men\u00fas digitales QR y NFC para hosteler\u00eda. Actualizaci\u00f3n en tiempo real, sin impresi\u00f3n y con dise\u00f1o de marca.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"hosting\" href=\"\/servicios\/hosting-mantenimiento\">\n <div class=\"service-num\">09<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"8\" rx=\"2\"\/>\n <rect x=\"2\" y=\"14\" width=\"20\" height=\"8\" rx=\"2\"\/>\n <line x1=\"6\" y1=\"6\" x2=\"6.01\" y2=\"6\"\/>\n <line x1=\"6\" y1=\"18\" x2=\"6.01\" y2=\"18\"\/>\n <path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Hosting & Mantenimiento<\/div>\n <div class=\"service-desc\">Servidor r\u00e1pido y seguro incluido. Actualizaciones, backups, seguridad y soporte continuo en un solo paquete.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"auditorias\" href=\"\/servicios\/auditorias\">\n <div class=\"service-num\">10<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M9 11l3 3L22 4\"\/>\n <path d=\"M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Auditor\u00edas<\/div>\n <div class=\"service-desc\">An\u00e1lisis completo de tu presencia digital: SEO, rendimiento, UX y competencia. Diagn\u00f3stico real, soluciones concretas.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n <\/div>\n<\/section>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5dc2221 elementor-widget elementor-widget-html\" data-id=\"5dc2221\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>360\u00b0 Stark \u2014 Nosotros<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --orange: #FF8C00;\n --orange-deep: #E67A00;\n --carbon: #0f1117;\n --carbon-mid: #161b24;\n --carbon-surface: #1e2433;\n --carbon-border: rgba(255, 255, 255, 0.07);\n --white: #ffffff;\n --white-muted: rgba(255, 255, 255, 0.6);\n }\n\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: 'Outfit', sans-serif;\n background: var(--carbon-mid);\n color: var(--white);\n }\n\n .section-tag {\n font-family: 'Space Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--orange);\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .section-tag::before {\n content: '';\n display: block;\n width: 28px;\n height: 1px;\n background: var(--orange);\n }\n\n .section-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(42px, 5.5vw, 72px);\n line-height: 1;\n }\n\n .section-title span {\n color: var(--orange);\n }\n\n .btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--orange);\n color: var(--carbon);\n font-weight: 600;\n font-size: 14px;\n padding: 14px 28px;\n border-radius: 8px;\n text-decoration: none;\n transition: background 0.2s, transform 0.15s, box-shadow 0.2s;\n }\n\n .btn-primary:hover {\n background: var(--orange-deep);\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(255, 140, 0, 0.3);\n }\n\n .about {\n padding: 120px 5%;\n background: var(--carbon-mid);\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n }\n\n .about-visual {\n position: relative;\n }\n\n .about-big-s {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 320px;\n line-height: 0.85;\n color: rgba(255, 255, 255, 0.025);\n position: absolute;\n top: -20px;\n left: -20px;\n pointer-events: none;\n user-select: none;\n }\n\n .about-card {\n background: var(--carbon-surface);\n border: 1px solid var(--carbon-border);\n border-radius: 16px;\n padding: 40px;\n position: relative;\n z-index: 1;\n }\n\n .about-card-highlight {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--orange), transparent);\n border-radius: 16px 16px 0 0;\n }\n\n .about-values {\n display: flex;\n flex-direction: column;\n gap: 20px;\n margin-top: 32px;\n }\n\n .about-value {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 16px;\n background: rgba(255, 140, 0, 0.04);\n border: 1px solid rgba(255, 140, 0, 0.1);\n border-radius: 10px;\n transition: border-color 0.2s, background 0.2s;\n }\n\n .about-value:hover {\n border-color: rgba(255, 140, 0, 0.25);\n background: rgba(255, 140, 0, 0.07);\n }\n\n .about-value-icon {\n width: 36px;\n height: 36px;\n flex-shrink: 0;\n background: rgba(255, 140, 0, 0.12);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .about-value-title {\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .about-value-text {\n font-size: 13px;\n color: var(--white-muted);\n line-height: 1.55;\n font-weight: 300;\n }\n\n .about-content p {\n font-size: 17px;\n line-height: 1.75;\n color: var(--white-muted);\n font-weight: 300;\n margin-bottom: 24px;\n }\n\n .about-content p strong {\n color: var(--white);\n font-weight: 500;\n }\n\n @media (max-width: 900px) {\n .about {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"about\" id=\"nosotros\">\n <div class=\"about-visual\">\n <div class=\"about-big-s\">S<\/div>\n <div class=\"about-card\">\n <div class=\"about-card-highlight\"><\/div>\n <div class=\"section-tag\" style=\"margin-bottom:12px;\">Qui\u00e9nes somos<\/div>\n <h2 style=\"font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,4vw,52px);line-height:1;margin-bottom:24px;\">\n EQUIPO\n <br>\n <span style=\"color:var(--orange);\">FULL STACK<\/span>\n <\/h2>\n <p style=\"font-size:14px;color:var(--white-muted);line-height:1.7;margin-bottom:20px;font-weight:300;\">Dise\u00f1adores, desarrolladores, estrategas y creativos trabajando como uno solo bajo la metodolog\u00eda 360\u00b0.<\/p>\n <div class=\"about-values\">\n <div class=\"about-value\">\n <div class=\"about-value-icon\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"about-value-title\">Resultados reales<\/div>\n <div class=\"about-value-text\">No vendemos promesas. Vendemos n\u00fameros, crecimiento y ROI medible.<\/div>\n <\/div>\n <\/div>\n <div class=\"about-value\">\n <div class=\"about-value-icon\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"about-value-title\">Visi\u00f3n 360\u00b0<\/div>\n <div class=\"about-value-text\">Todos los frentes cubiertos: creativo, t\u00e9cnico y de negocio, coordinados.<\/div>\n <\/div>\n <\/div>\n <div class=\"about-value\">\n <div class=\"about-value-icon\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/>\n <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n <path d=\"M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"about-value-title\">Equipo dedicado<\/div>\n <div class=\"about-value-text\">Tu proyecto siempre con un equipo comprometido y un account manager directo.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"about-content\" style=\"padding-left:20px;\">\n <div class=\"section-tag\">Nuestra historia<\/div>\n <h2 class=\"section-title\" style=\"margin-bottom:32px;\">\n AGENCIA \n <span>SIN<\/span>\n <br>\n L\u00cdMITES\n <\/h2>\n <p>\n Nacimos con una idea clara: \n <strong>las marcas merecen una agencia que lo entienda todo<\/strong>\n , no un proveedor para cada cosa.\n <\/p>\n <p>En 360\u00b0 Stark no tenemos departamentos aislados. Tenemos un ecosistema donde estrategia, dise\u00f1o, c\u00f3digo y medios conviven y se potencian mutuamente.<\/p>\n <p>\n El resultado: \n <strong>proyectos m\u00e1s coherentes, ejecuci\u00f3n m\u00e1s r\u00e1pida y marcas m\u00e1s fuertes.<\/strong>\n <\/p>\n <div style=\"margin-top:40px;\">\n <a href=\"#contacto\" class=\"btn-primary\" style=\"width:fit-content;\">\n Trabajemos juntos \n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\">\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-908a4f1 elementor-widget elementor-widget-html\" data-id=\"908a4f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>CTA Contacto \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\nhtml{\n scroll-behavior:smooth;\n}\n.cta-section{padding:120px 5%;background:var(--carbon);position:relative;overflow:hidden;text-align:center}\n.cta-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 100%,rgba(255,140,0,.07) 0%,transparent 70%)}\n.cta-inner{position:relative;z-index:1;max-width:700px;margin:0 auto}\n.cta-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,7vw,88px);line-height:.95;margin-bottom:20px}\n.cta-title span{color:var(--orange)}\n.cta-sub{font-size:17px;color:var(--white-muted);line-height:1.65;margin-bottom:48px;font-weight:300}\n.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}\n.cta-alt{display:flex;align-items:center;gap:8px;color:var(--white-muted);font-size:14px;text-decoration:none;padding:14px 0;transition:color .2s}\n.cta-alt:hover{color:var(--white)}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<a href=\"#contacto\"><\/a><\/a>\n\n<section class=\"cta-section\" id=\"contacto\">\n <div class=\"cta-bg\"><\/div>\n <div class=\"cta-inner\">\n <div class=\"section-tag reveal\" style=\"justify-content:center;\"><span style=\"width:0;margin:0;padding:0\"><\/span>Empieza hoy<\/div>\n <h2 class=\"cta-title reveal\">\u00bfLISTO PARA<br><span>EMPEZAR?<\/span><\/h2>\n <p class=\"cta-sub reveal\">Cu\u00e9ntanos tu proyecto y te preparamos una propuesta en menos de 24 horas. Sin compromiso.<\/p>\n <div class=\"cta-actions reveal\">\n <a href=\"mailto:mail@360stark.com\" class=\"btn-primary\">\n Escribir ahora\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z\"\/><\/svg>\n <\/a>\n <a href=\"https:\/\/wa.me\/34657730100\" class=\"cta-alt\" target=\"_blank\" rel=\"noopener\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z\"\/><\/svg>\n WhatsApp directo\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<script src=\"shared.js\"><\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13edbf3 elementor-widget elementor-widget-html\" data-id=\"13edbf3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<footer id=\"sp-footer\">\n <div class=\"sp-footer-inner\">\n\n \n <div class=\"sp-footer-brand\">\n <a href=\"..\/index.html\" class=\"sp-footer-logo\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 80 80\" fill=\"none\">\n <circle cx=\"40\" cy=\"40\" r=\"33\" stroke=\"white\" stroke-width=\"2.5\" stroke-dasharray=\"170 37\" stroke-linecap=\"round\"\/>\n <circle cx=\"40\" cy=\"40\" r=\"33\" stroke=\"#FF8C00\" stroke-width=\"3\" stroke-dasharray=\"80 127\" stroke-linecap=\"round\" stroke-dashoffset=\"60\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 40 40\" to=\"360 40 40\" dur=\"12s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <text x=\"40\" y=\"48\" text-anchor=\"middle\" font-size=\"26\" font-weight=\"700\" fill=\"#6B7A90\" font-family=\"sans-serif\">S<\/text>\n <\/svg>\n <span class=\"sp-footer-logo-text\"><span>360\u00b0<\/span> STARK<\/span>\n <\/a>\n <p class=\"sp-footer-tagline\">FULL STACK AGENCY \u00b7 MADE IN EUROPE<\/p>\n <\/div>\n\n \n <div class=\"sp-footer-links\">\n <a href=\"..\/aviso-legal.html\">Aviso Legal<\/a>\n <span>\u00b7<\/span>\n <a href=\"..\/privacidad.html\">Pol\u00edtica de Privacidad<\/a>\n <span>\u00b7<\/span>\n <a href=\"..\/cookies.html\">Cookies<\/a>\n <\/div>\n\n \n <div class=\"sp-footer-copy\">\n Todos los derechos reservados 2026 \u00a9\n DEV. <a href=\"https:\/\/360stark.com\" target=\"_blank\" rel=\"noopener\">360\u00baSTARK<\/a>\n <\/div>\n\n <\/div>\n<\/footer>\n\n<script>\ndocument.addEventListener('mouseleave',()=>{dot.classList.add('is-hidden');ring.classList.add('is-hidden')});\ndocument.addEventListener('mouseenter',()=>{dot.classList.remove('is-hidden');ring.classList.remove('is-hidden')});\ndocument.querySelectorAll('a,button,.plan-card,.include-card,.faq-item').forEach(el=>{\n el.addEventListener('mouseenter',()=>{dot.classList.add('is-hover');ring.classList.add('is-hover')});\n el.addEventListener('mouseleave',()=>{dot.classList.remove('is-hover');ring.classList.remove('is-hover')});\n});\n\nconst observer = new IntersectionObserver(entries=>{\n entries.forEach((e,i)=>{\n if(e.isIntersecting) {\n setTimeout(()=>e.target.classList.add('visible'),i*80);\n observer.unobserve(e.target);\n }\n });\n},{threshold:.1});\ndocument.querySelectorAll('.reveal').forEach(el=>observer.observe(el));\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f17fe1 elementor-widget elementor-widget-html\" data-id=\"5f17fe1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>360\u00b0 Stark \u2014 Cursor (Desktop Only)<\/title>\n\n<style>\n\/* \u2500\u2500\u2500 CURSOR SOLO DESKTOP \u2500\u2500\u2500 *\/\n\n\/* Ocultar cursor nativo SOLO en desktop *\/\n@media (hover: hover) and (pointer: fine) {\n * { cursor: none !important; }\n}\n\n\/* Cursor DOT *\/\n#cursor-dot {\n position: fixed;\n top: 0; left: 0;\n width: 10px;\n height: 10px;\n background: #FF8C00;\n border-radius: 50%;\n pointer-events: none;\n z-index: 2147483647;\n transform: translate(-50%, -50%);\n transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.3s ease;\n will-change: transform;\n}\n\n\/* Cursor RING *\/\n#cursor-ring {\n position: fixed;\n top: 0; left: 0;\n width: 34px;\n height: 34px;\n border: 1.5px solid rgba(255, 140, 0, 0.6);\n border-radius: 50%;\n pointer-events: none;\n z-index: 2147483646;\n transform: translate(-50%, -50%);\n transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;\n will-change: transform;\n}\n\n\/* Estado hover *\/\n#cursor-dot.is-hover {\n width: 16px;\n height: 16px;\n background: #FFB347;\n}\n\n#cursor-ring.is-hover {\n width: 52px;\n height: 52px;\n border-color: rgba(255, 140, 0, 0.9);\n}\n\n\/* Ocultar cuando sale de la ventana *\/\n#cursor-dot.is-hidden,\n#cursor-ring.is-hidden {\n opacity: 0;\n}\n\n\/* Ocultar completamente en m\u00f3vil\/tablet *\/\n@media (hover: none), (pointer: coarse) {\n #cursor-dot,\n #cursor-ring {\n display: none !important;\n }\n}\n<\/style>\n<\/head>\n\n<body style=\"background:#0f1117;min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:sans-serif;color:#fff;gap:20px;\">\n\n\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<script>\n(function() {\n\n \/\/ \ud83d\udc49 SOLO DESKTOP\n if (!window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n return;\n }\n\n const dot = document.getElementById('cursor-dot');\n const ring = document.getElementById('cursor-ring');\n\n if (!dot || !ring) return;\n\n let mouseX = -100, mouseY = -100;\n let ringX = -100, ringY = -100;\n let rafId;\n\n \/\/ Movimiento del rat\u00f3n (dot inmediato)\n document.addEventListener('mousemove', e => {\n mouseX = e.clientX;\n mouseY = e.clientY;\n\n dot.style.transform = `translate(calc(-50% + ${mouseX}px), calc(-50% + ${mouseY}px))`;\n dot.style.left = '0';\n dot.style.top = '0';\n\n dot.classList.remove('is-hidden');\n ring.classList.remove('is-hidden');\n });\n\n \/\/ Animaci\u00f3n del ring (con lag)\n function animateRing() {\n ringX += (mouseX - ringX) * 0.14;\n ringY += (mouseY - ringY) * 0.14;\n\n ring.style.transform = `translate(calc(-50% + ${ringX}px), calc(-50% + ${ringY}px))`;\n ring.style.left = '0';\n ring.style.top = '0';\n\n rafId = requestAnimationFrame(animateRing);\n }\n animateRing();\n\n \/\/ Ocultar al salir de la ventana\n document.addEventListener('mouseleave', () => {\n dot.classList.add('is-hidden');\n ring.classList.add('is-hidden');\n });\n\n document.addEventListener('mouseenter', () => {\n dot.classList.remove('is-hidden');\n ring.classList.remove('is-hidden');\n });\n\n \/\/ Hover en elementos interactivos\n const interactivos = 'a, button, [role=\"button\"], input, textarea, select, label, .orbit-btn, .service-card, .portfolio-item, .btn-reserva';\n\n function addHover(el) {\n el.addEventListener('mouseenter', () => {\n dot.classList.add('is-hover');\n ring.classList.add('is-hover');\n });\n el.addEventListener('mouseleave', () => {\n dot.classList.remove('is-hover');\n ring.classList.remove('is-hover');\n });\n }\n\n document.querySelectorAll(interactivos).forEach(addHover);\n\n \/\/ Detectar elementos din\u00e1micos\n const observer = new MutationObserver(mutations => {\n mutations.forEach(m => {\n m.addedNodes.forEach(node => {\n if (node.nodeType === 1) {\n if (node.matches && node.matches(interactivos)) addHover(node);\n node.querySelectorAll && node.querySelectorAll(interactivos).forEach(addHover);\n }\n });\n });\n });\n\n observer.observe(document.body, { childList: true, subtree: true });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>360STARK \u2013 Header S 360\u00b0 STARK Inicio Servicios \u25be Visibilidad & Medios 01 Marketing 360\u00b0Estrategia integral que cubre todos los canales. Una sola agencia para toda tu presencia digital.Saber m\u00e1s \u2192 02 SEO \/ SEM & Paid MediaPosicionamiento org\u00e1nico y campa\u00f1as de pago. Google Ads, Meta Ads y TikTok Ads con ROI medible.Saber m\u00e1s \u2192 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":97,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":366,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/9\/revisions\/366"}],"wp:attachment":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\n360STARK \u2013 Header<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<\/head>\n<body style=\"background:#0f1117; min-height:120vh; margin:0; font-family:'Outfit',sans-serif;\">\n\n<header id=\"header-flotante\">\n <div class=\"header-container\">\n\n <div class=\"logo\">\n <a href=\"https:\/\/360stark.com\/\">\n <svg viewBox=\"0 0 220 80\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"40\" cy=\"40\" r=\"33\" stroke=\"white\" stroke-width=\"2.5\" stroke-dasharray=\"170 37\" stroke-linecap=\"round\" fill=\"none\"\/>\n <circle cx=\"40\" cy=\"40\" r=\"33\" stroke=\"#FF8C00\" stroke-width=\"3\" stroke-dasharray=\"80 127\" stroke-linecap=\"round\" stroke-dashoffset=\"60\" fill=\"none\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 40 40\" to=\"360 40 40\" dur=\"13s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <text x=\"40\" y=\"48\" text-anchor=\"middle\" font-size=\"26\" font-weight=\"700\" fill=\"#6B7A90\" font-family=\"sans-serif\">S<\/text>\n <text x=\"90\" y=\"45\" font-size=\"22\" font-family=\"monospace\" fill=\"white\"><tspan fill=\"#FF8C00\">360\u00b0<\/tspan> STARK<\/text>\n <\/svg>\n <\/a>\n <\/div>\n\n <nav class=\"menu-principal\" id=\"menu-principal\">\n <ul>\n <li><a href=\"https:\/\/360stark.com\/\" data-slug=\"\">Inicio<\/a><\/li>\n\n <li class=\"has-dropdown\" id=\"menu-servicios\">\n <a href=\"https:\/\/360stark.com\/#servicios\/\" data-slug=\"servicios\" id=\"btn-servicios\">\n Servicios <span class=\"menu-caret\">\u25be<\/span>\n <\/a>\n <div class=\"services-dropdown\" id=\"mega-servicios\">\n <div class=\"services-inner\">\n\n <div class=\"services-col\">\n <div class=\"col-category\">Visibilidad & Medios<\/div>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/marketing-360\/\">\n <span class=\"s-num\">01<\/span>\n <div><span class=\"s-title\">Marketing 360\u00b0<\/span><span class=\"s-desc\">Estrategia integral que cubre todos los canales. Una sola agencia para toda tu presencia digital.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/seo-sem-paid-media\/\">\n <span class=\"s-num\">02<\/span>\n <div><span class=\"s-title\">SEO \/ SEM & Paid Media<\/span><span class=\"s-desc\">Posicionamiento org\u00e1nico y campa\u00f1as de pago. Google Ads, Meta Ads y TikTok Ads con ROI medible.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/branding-diseno\/\">\n <span class=\"s-num\">03<\/span>\n <div><span class=\"s-title\">Branding & Dise\u00f1o<\/span><span class=\"s-desc\">Identidad visual completa. Dise\u00f1o gr\u00e1fico, motion y contenido visual que conecta y perdura.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/auditorias\/\">\n <span class=\"s-num\">10<\/span>\n <div><span class=\"s-title\">Auditor\u00edas<\/span><span class=\"s-desc\">An\u00e1lisis completo de tu presencia digital: SEO, rendimiento, UX y competencia.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <\/div>\n\n <div class=\"col-divider\"><\/div>\n\n <div class=\"services-col\">\n <div class=\"col-category\">Tecnolog\u00eda & Desarrollo<\/div>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/web-development\/\">\n <span class=\"s-num\">04<\/span>\n <div><span class=\"s-title\">Web Development<\/span><span class=\"s-desc\">Desarrollo web a medida, r\u00e1pido y escalable. Tecnolog\u00eda al servicio de tu negocio.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/smartwebs-ia\/\">\n <span class=\"s-num\">05<\/span>\n <div><span class=\"s-title\">Smartwebs & IA<\/span><span class=\"s-desc\">Webs inteligentes con automatizaciones e inteligencia artificial integrada para escalar sin l\u00edmites.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/booking-systems\/\">\n <span class=\"s-num\">07<\/span>\n <div><span class=\"s-title\">Booking Systems<\/span><span class=\"s-desc\">Sistemas de reservas online para restaurantes, cl\u00ednicas y hoteles. Automatiza citas.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/hosting-mantenimiento\/\">\n <span class=\"s-num\">09<\/span>\n <div><span class=\"s-title\">Hosting & Mantenimiento<\/span><span class=\"s-desc\">Servidor r\u00e1pido y seguro. Actualizaciones, backups, seguridad y soporte continuo.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <\/div>\n\n <div class=\"col-divider\"><\/div>\n\n <div class=\"services-col\">\n <div class=\"col-category\">Presencia F\u00edsica & Digital<\/div>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/biolinks-nfc\/\">\n <span class=\"s-num\">06<\/span>\n <div><span class=\"s-badge\">\u00b7 EN COLABORACI\u00d3N CON LINKSCARD.PRO<\/span><span class=\"s-title\">Biolinks & NFC<\/span><span class=\"s-desc\">Tu hub de enlaces con marca propia. Tarjetas NFC f\u00edsicas que comparten tu perfil al instante.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <a class=\"service-item\" href=\"https:\/\/360stark.com\/cartas-digitales\/\">\n <span class=\"s-num\">08<\/span>\n <div><span class=\"s-title\">Cartas Digitales<\/span><span class=\"s-desc\">Men\u00fas digitales QR y NFC para hosteler\u00eda. Actualizaci\u00f3n en tiempo real, sin impresi\u00f3n.<\/span><span class=\"s-link\">Saber m\u00e1s \u2192<\/span><\/div>\n <\/a>\n <\/div>\n\n <\/div>\n <\/div>\n <\/li>\n\n <li><a href=\"https:\/\/360stark.com\/#nosotros\/\" data-slug=\"nosotros\">Nosotros<\/a><\/li>\n <li><a href=\"https:\/\/360stark.com\/portfolio\/\" data-slug=\"portfolio\">Portfolio<\/a><\/li>\n <li><a href=\"https:\/\/360stark.com\/clientes\/\" data-slug=\"clientes\">Clientes<\/a><\/li>\n <\/ul>\n <\/nav>\n\n <div class=\"header-right\">\n <div class=\"contacto-wrapper\" id=\"contacto-wrapper\">\n <button class=\"btn-contacto\" id=\"btn-contacto\" aria-expanded=\"false\">\n Contacto <span class=\"btn-caret\">\u25be<\/span>\n <\/button>\n <div class=\"contacto-dropdown\" id=\"contacto-dropdown\">\n <a class=\"contacto-item\" id=\"contacto-email\" href=\"mailto:hola@360stark.com\">\n <span class=\"contacto-icon\">\u2709<\/span><span>Email<\/span>\n <\/a>\n <a class=\"contacto-item\" id=\"contacto-whatsapp\" href=\"#\" target=\"_blank\" rel=\"noopener\">\n <span class=\"contacto-icon\">\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 32 32\"><path fill=\"#25D366\" d=\"M16 0C7.163 0 0 7.163 0 16c0 2.822.736 5.47 2.027 7.77L0 32l8.437-2.01A15.93 15.93 0 0016 32c8.837 0 16-7.163 16-16S24.837 0 16 0z\"\/><path fill=\"#fff\" d=\"M23.5 20.3c-.3-.15-1.8-.89-2.08-.99-.28-.1-.48-.15-.68.15-.2.3-.77.99-.95 1.19-.17.2-.35.22-.65.07-.3-.15-1.27-.47-2.42-1.5-.89-.8-1.5-1.78-1.67-2.08-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.68-1.64-.93-2.24-.24-.59-.49-.51-.68-.52H13.5c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.27.49 1.7.63.72.23 1.37.2 1.88.12.57-.09 1.76-.72 2.01-1.41.25-.69.25-1.28.17-1.41-.07-.13-.27-.2-.57-.35z\"\/><\/svg>\n <\/span><span id=\"whatsapp-label\">WhatsApp ES<\/span>\n <\/a>\n <a class=\"contacto-item\" id=\"contacto-llamar\" href=\"#\">\n <span class=\"contacto-icon\">\ud83d\udcde<\/span><span id=\"llamar-label\">Llamar ES<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"selector-idiomas desktop-only\">\n <button id=\"idioma-toggle\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n <span class=\"flag\" id=\"flag-activo\">\ud83c\uddea\ud83c\uddf8<\/span>\n <span class=\"code\" id=\"code-activo\">ES<\/span>\n <span class=\"caret\">\u25bc<\/span>\n <\/button>\n <ul id=\"idioma-list\" role=\"listbox\" aria-label=\"Seleccionar idioma\">\n <li data-prefix=\"\" data-flag=\"\ud83c\uddea\ud83c\uddf8\" data-code=\"ES\" role=\"option\" tabindex=\"0\"><span class=\"flag\">\ud83c\uddea\ud83c\uddf8<\/span> ES \u2013 Espa\u00f1ol<\/li>\n <li data-prefix=\"de\" data-flag=\"\ud83c\udde9\ud83c\uddea\" data-code=\"DE\" role=\"option\" tabindex=\"0\"><span class=\"flag\">\ud83c\udde9\ud83c\uddea<\/span> DE \u2013 Deutsch<\/li>\n <li data-prefix=\"en\" data-flag=\"\ud83c\uddec\ud83c\udde7\" data-code=\"EN\" role=\"option\" tabindex=\"0\"><span class=\"flag\">\ud83c\uddec\ud83c\udde7<\/span> EN \u2013 English<\/li>\n <\/ul>\n <\/div>\n\n \n <button class=\"menu-mobile-toggle\" id=\"menu-toggle\" aria-label=\"Abrir men\u00fa\" aria-expanded=\"false\">\n <span><\/span><span><\/span><span><\/span>\n <\/button>\n <\/div>\n <\/div>\n<\/header>\n\n<div id=\"idioma-flotante-mobile\">\n <button id=\"idioma-toggle-mobile\" aria-expanded=\"false\">\n <span class=\"flag\" id=\"flag-activo-mobile\">\ud83c\uddea\ud83c\uddf8<\/span>\n <span class=\"code\" id=\"code-activo-mobile\">ES<\/span>\n <span class=\"caret\">\u25bc<\/span>\n <\/button>\n <ul id=\"idioma-list-mobile\" role=\"listbox\">\n <li data-prefix=\"\" data-flag=\"\ud83c\uddea\ud83c\uddf8\" data-code=\"ES\" role=\"option\" tabindex=\"0\"><span class=\"flag\">\ud83c\uddea\ud83c\uddf8<\/span> ES \u2013 Espa\u00f1ol<\/li>\n <li data-prefix=\"de\" data-flag=\"\ud83c\udde9\ud83c\uddea\" data-code=\"DE\" role=\"option\" tabindex=\"0\"><span class=\"flag\">\ud83c\udde9\ud83c\uddea<\/span> DE \u2013 Deutsch<\/li>\n <li data-prefix=\"en\" data-flag=\"\ud83c\uddec\ud83c\udde7\" data-code=\"EN\" role=\"option\" tabindex=\"0\"><span class=\"flag\">\ud83c\uddec\ud83c\udde7<\/span> EN \u2013 English<\/li>\n <\/ul>\n<\/div>\n\n<style>\n:root {\n --orange: #FF8C00;\n --bg-header: rgba(20,20,20,0.97);\n --radius: 33px;\n}\n*, *::before, *::after { box-sizing: border-box; }\n\n#header-flotante {\n position: fixed;\n top: 25px; left: 50px; right: 50px;\n z-index: 9999;\n background: var(--bg-header);\n box-shadow: 0 4px 20px rgba(255,140,0,0.30);\n border-radius: var(--radius);\n font-family: 'Outfit', sans-serif;\n overflow: visible;\n transition: top 0.3s, box-shadow 0.3s;\n}\n#header-flotante.scrolled { top: 12px; box-shadow: 0 4px 30px rgba(255,140,0,0.50); }\n.header-container {\n display: flex; align-items: center; justify-content: space-between;\n gap: 20px; padding: 14px 24px; transition: padding 0.3s;\n}\n#header-flotante.scrolled .header-container { padding: 8px 24px; }\n\n.logo a { display: flex; align-items: center; }\n.logo svg { height: 58px; width: auto; display: block; transition: height 0.2s; }\n#header-flotante.scrolled .logo svg { height: 46px; }\n\n.menu-principal ul {\n list-style: none; display: flex; flex-wrap: wrap;\n gap: 4px 12px; margin: 0; padding: 0; align-items: center;\n}\n.menu-principal ul li { position: relative; }\n.menu-principal ul li a {\n text-decoration: none; color: #fff; font-size: 14px; font-weight: 500;\n white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent;\n transition: color 0.2s, border-color 0.2s;\n display: flex; align-items: center; gap: 3px; cursor: pointer;\n}\n.menu-principal ul li a:hover { color: var(--orange); border-bottom-color: var(--orange); }\n.menu-caret { font-size: 10px; transition: transform 0.25s; }\n#btn-servicios.active { color: var(--orange); border-bottom-color: var(--orange); }\n#btn-servicios.active .menu-caret { transform: rotate(180deg); }\n\n\/* SERVICES DROPDOWN DESKTOP *\/\n.services-dropdown {\n display: none; position: fixed; left: 50px; right: 50px;\n background: rgba(15,17,23,0.99); border: 1px solid rgba(255,140,0,0.20);\n border-radius: 20px; box-shadow: 0 16px 48px rgba(255,140,0,0.18);\n z-index: 10000; overflow: hidden; animation: dropdownAnim 0.22s ease forwards;\n}\n.services-dropdown.open { display: block; }\n.services-inner {\n display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr;\n max-height: 380px; overflow-y: auto; padding: 20px 4px;\n scrollbar-width: thin; scrollbar-color: rgba(255,140,0,0.3) transparent;\n}\n.services-inner::-webkit-scrollbar { width: 4px; }\n.services-inner::-webkit-scrollbar-thumb { background: rgba(255,140,0,0.3); border-radius: 4px; }\n.col-divider { background: rgba(255,140,0,0.12); margin: 8px 0; }\n.services-col { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; }\n.col-category {\n font-size: 10px; font-weight: 600; color: var(--orange);\n text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px 10px; opacity: 0.7;\n}\n.service-item {\n display: flex; gap: 8px; align-items: flex-start; text-decoration: none;\n padding: 10px; border-radius: 12px; border: 1px solid transparent;\n transition: background 0.2s, border-color 0.2s;\n}\n.service-item:hover { background: rgba(255,140,0,0.07); border-color: rgba(255,140,0,0.22); }\n.s-num { font-size: 10px; font-weight: 600; color: var(--orange); opacity: 0.6; flex-shrink: 0; padding-top: 2px; min-width: 16px; }\n.service-item > div { display: flex; flex-direction: column; gap: 2px; }\n.s-badge { font-size: 9px; font-weight: 600; color: var(--orange); letter-spacing: 0.03em; opacity: 0.75; line-height: 1.3; }\n.s-title { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.3; }\n.s-desc { font-size: 11px; color: #666; line-height: 1.5; }\n.s-link { font-size: 11px; color: var(--orange); font-weight: 500; margin-top: 2px; }\n\n.header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }\n.contacto-wrapper { position: relative; }\n.btn-contacto {\n background: var(--orange); color: #fff; height: 38px; padding: 0 20px;\n border-radius: var(--radius); border: none; cursor: pointer;\n font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13px;\n white-space: nowrap; display: flex; align-items: center; gap: 6px;\n transition: transform 0.2s, box-shadow 0.2s;\n}\n.btn-contacto:hover { transform: scale(1.04); box-shadow: 0 4px 18px rgba(255,140,0,0.45); }\n.btn-caret { font-size: 10px; transition: transform 0.25s; }\n.btn-contacto[aria-expanded=\"true\"] .btn-caret { transform: rotate(180deg); }\n.contacto-dropdown {\n display: none; position: absolute; top: calc(100% + 10px); right: 0;\n background: rgba(20,20,20,0.99); border: 1px solid rgba(255,140,0,0.22);\n border-radius: 18px; box-shadow: 0 8px 28px rgba(255,140,0,0.22);\n padding: 8px 0; min-width: 195px; z-index: 10001;\n animation: dropdownAnim 0.2s ease forwards;\n}\n.contacto-dropdown.open { display: block; }\n.contacto-item {\n display: flex; align-items: center; gap: 10px; padding: 11px 18px;\n text-decoration: none; color: #ddd; font-size: 13px; font-weight: 500;\n font-family: 'Outfit', sans-serif; transition: background 0.15s, color 0.15s; white-space: nowrap;\n}\n.contacto-item:hover { background: rgba(255,140,0,0.10); color: var(--orange); }\n.contacto-icon { font-size: 15px; display: flex; align-items: center; min-width: 18px; }\n.contacto-item:first-child { border-radius: 18px 18px 0 0; }\n.contacto-item:last-child { border-radius: 0 0 18px 18px; }\n.contacto-item + .contacto-item { border-top: 1px solid rgba(255,140,0,0.08); }\n\n.selector-idiomas { position: relative; }\n#idioma-toggle {\n background: #1a1a1a; color: #fff; height: 38px; padding: 0 14px;\n border-radius: var(--radius); border: 1px solid var(--orange);\n cursor: pointer; display: flex; align-items: center; gap: 5px;\n font-size: 13px; font-family: 'Outfit', sans-serif; white-space: nowrap; transition: background 0.2s;\n}\n#idioma-toggle:hover { background: #252525; }\n.caret { font-size: 9px; transition: transform 0.25s; }\n#idioma-toggle[aria-expanded=\"true\"] .caret { transform: rotate(180deg); }\n#idioma-list {\n display: none; position: absolute; top: calc(100% + 8px); right: 0;\n background: rgba(20,20,20,0.98); border-radius: 16px;\n border: 1px solid rgba(255,140,0,0.22); box-shadow: 0 8px 24px rgba(255,140,0,0.18);\n flex-direction: column; padding: 8px 0; min-width: 160px;\n list-style: none; margin: 0; z-index: 10000; animation: dropdownAnim 0.2s ease forwards;\n}\n#idioma-list.open { display: flex; }\n#idioma-list li {\n padding: 10px 16px; cursor: pointer; display: flex; gap: 8px;\n align-items: center; color: #ddd; font-size: 13px;\n font-family: 'Outfit', sans-serif; transition: background 0.15s;\n}\n#idioma-list li:hover { background: rgba(255,140,0,0.10); color: var(--orange); }\n#idioma-list li.activo { color: var(--orange); }\n#idioma-list li:first-child { border-radius: 16px 16px 0 0; }\n#idioma-list li:last-child { border-radius: 0 0 16px 16px; }\n\n.menu-mobile-toggle {\n display: none; flex-direction: column; justify-content: center;\n align-items: center; gap: 5px; cursor: pointer;\n width: 36px; height: 36px; background: none; border: none; padding: 0; flex-shrink: 0;\n}\n.menu-mobile-toggle span {\n width: 22px; height: 2.5px; background: var(--orange);\n display: block; border-radius: 2px;\n transition: transform 0.3s, opacity 0.3s; transform-origin: center;\n}\n.menu-mobile-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }\n.menu-mobile-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }\n.menu-mobile-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }\n\n#idioma-flotante-mobile {\n display: none; position: fixed; z-index: 9998; top: 80px; left: 16px;\n}\n#idioma-toggle-mobile {\n background: rgba(20,20,20,0.97); color: #fff; height: 34px; padding: 0 12px;\n border-radius: var(--radius); border: 1px solid var(--orange);\n box-shadow: 0 4px 12px rgba(255,140,0,0.22);\n cursor: pointer; display: flex; align-items: center; gap: 5px;\n font-size: 13px; font-family: 'Outfit', sans-serif; white-space: nowrap;\n}\n#idioma-toggle-mobile[aria-expanded=\"true\"] .caret { transform: rotate(180deg); }\n#idioma-list-mobile {\n display: none; position: absolute; top: calc(100% + 8px); left: 0;\n background: rgba(20,20,20,0.98); border-radius: 16px;\n border: 1px solid rgba(255,140,0,0.22); box-shadow: 0 8px 24px rgba(255,140,0,0.18);\n flex-direction: column; padding: 8px 0; min-width: 160px;\n list-style: none; margin: 0; z-index: 10000; animation: dropdownAnim 0.2s ease forwards;\n}\n#idioma-list-mobile.open { display: flex; }\n#idioma-list-mobile li {\n padding: 10px 16px; cursor: pointer; display: flex; gap: 8px;\n align-items: center; color: #ddd; font-size: 13px;\n font-family: 'Outfit', sans-serif; transition: background 0.15s;\n}\n#idioma-list-mobile li:hover { background: rgba(255,140,0,0.10); color: var(--orange); }\n#idioma-list-mobile li.activo { color: var(--orange); }\n#idioma-list-mobile li:first-child { border-radius: 16px 16px 0 0; }\n#idioma-list-mobile li:last-child { border-radius: 0 0 16px 16px; }\n\n@keyframes dropdownAnim {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MOBILE \u2264 992px\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media (max-width: 992px) {\n\n #header-flotante { left: 16px; right: 16px; top: 16px; }\n .desktop-only { display: none !important; }\n .menu-mobile-toggle{ display: flex; }\n #idioma-flotante-mobile { display: flex; align-items: flex-start; }\n\n nav.menu-principal {\n position: absolute;\n top: calc(100% + 12px);\n left: 0; right: 0;\n background: rgba(15,17,23,0.99);\n border-radius: 20px;\n border: 1px solid rgba(255,140,0,0.18);\n box-shadow: 0 8px 28px rgba(255,140,0,0.18);\n padding: 8px 15px 12px 0;\n display: none;\n z-index: 9997;\n overflow-y: auto;\n max-height: 82vh;\n }\n nav.menu-principal.open {\n display: block;\n animation: dropdownAnim 0.25s ease forwards;\n }\n\n nav.menu-principal > ul {\n display: flex !important;\n flex-direction: column !important;\n flex-wrap: nowrap !important;\n align-items: flex-start !important;\n gap: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n list-style: none;\n width: 100%;\n }\n nav.menu-principal > ul > li {\n width: 100%;\n position: relative;\n }\n nav.menu-principal > ul > li > a {\n display: flex !important;\n flex-direction: row !important;\n align-items: center !important;\n justify-content: space-between !important;\n text-align: left !important;\n width: 100% !important;\n padding: 12px 0 12px 18px !important;\n font-size: 15px !important;\n font-weight: 500;\n color: #fff !important;\n text-decoration: none;\n border-bottom: none !important;\n border-radius: 10px;\n white-space: nowrap !important;\n gap: 0 !important;\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n }\n nav.menu-principal > ul > li > a:hover {\n background: rgba(255,140,0,0.08) !important;\n color: var(--orange) !important;\n border-bottom-color: transparent !important;\n }\n\n .services-dropdown {\n position: static !important;\n display: none !important;\n left: auto !important; right: auto !important; top: auto !important;\n width: 100% !important;\n background: rgba(10,10,15,0.98) !important;\n border: 1px solid rgba(255,140,0,0.13) !important;\n border-radius: 12px !important;\n box-shadow: none !important;\n margin: 2px 0 6px 0;\n overflow: hidden;\n animation: none !important;\n }\n .services-dropdown.open { display: block !important; }\n\n .services-inner {\n display: block !important;\n max-height: 250px;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 6px 15px 10px 0 !important;\n scrollbar-width: thin;\n scrollbar-color: rgba(255,140,0,0.25) transparent;\n }\n .services-inner::-webkit-scrollbar { width: 3px; }\n .services-inner::-webkit-scrollbar-thumb { background: rgba(255,140,0,0.25); border-radius: 3px; }\n\n .col-divider { display: none !important; }\n\n .services-col {\n display: block !important;\n width: 100% !important;\n padding: 0 !important;\n }\n .col-category {\n display: block !important;\n text-align: left !important;\n padding: 10px 0 3px 18px !important;\n font-size: 9px !important;\n font-weight: 700;\n color: var(--orange);\n opacity: 0.6;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n }\n .service-item {\n display: flex !important;\n flex-direction: row !important;\n align-items: center !important;\n justify-content: flex-start !important;\n width: 100% !important;\n padding: 8px 0 8px 18px !important;\n border-radius: 8px !important;\n border: none !important;\n background: transparent;\n gap: 8px !important;\n text-decoration: none;\n transition: background 0.15s;\n }\n .service-item:hover { background: rgba(255,140,0,0.06) !important; border-color: transparent !important; }\n .service-item > div {\n display: flex !important;\n flex-direction: row !important;\n align-items: center !important;\n gap: 6px !important;\n width: 100%;\n }\n .s-num {\n font-size: 10px !important; color: var(--orange) !important;\n opacity: 0.45; flex-shrink: 0 !important; min-width: 18px;\n font-weight: 600; padding-top: 0 !important;\n }\n .s-title {\n font-size: 13px !important; font-weight: 500 !important;\n color: #d8d8d8 !important; white-space: nowrap;\n overflow: hidden; text-overflow: ellipsis;\n }\n .s-desc { display: none !important; }\n .s-link { display: none !important; }\n .s-badge { display: none !important; }\n\n .contacto-dropdown { right: auto !important; left: 0 !important; }\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n const BASE = \"https:\/\/360stark.com\";\n const PREFIXES = [\"de\", \"en\"];\n\n const CONTACTO = {\n \"\": { wa: \"34657730100\", waLabel: \"WhatsApp ES\", tel: \"+34657730100\", telLabel: \"Llamar ES\" },\n \"de\": { wa: \"4915259322567\", waLabel: \"WhatsApp DE\", tel: \"+4915259322567\", telLabel: \"Anrufen DE\" },\n \"en\": { wa: \"34657730100\", waLabel: \"WhatsApp EN\", tel: \"+34657730100\", telLabel: \"Call EN\" },\n };\n\n function detectarIdioma() {\n const seg = window.location.pathname.split(\"\/\").filter(Boolean);\n return PREFIXES.includes(seg[0]) ? seg[0] : \"\";\n }\n\n function buildUrl(prefijo, enlace) {\n if (typeof enlace === \"string\" && enlace.startsWith(\"#\")) {\n return prefijo ? `${BASE}\/${prefijo}\/${enlace}` : `${BASE}\/${enlace}`;\n }\n let slug = String(enlace).replace(BASE, \"\").replace(\/^\\\/\/, \"\");\n PREFIXES.forEach(p => { slug = slug.replace(new RegExp(\"^\" + p + \"\/\"), \"\"); });\n return prefijo ? `${BASE}\/${prefijo}\/${slug}` : `${BASE}\/${slug}`;\n }\n\n function actualizarContacto(prefijo) {\n const data = CONTACTO[prefijo] || CONTACTO[\"\"];\n document.getElementById(\"contacto-whatsapp\").href = `https:\/\/wa.me\/${data.wa}`;\n document.getElementById(\"whatsapp-label\").textContent = data.waLabel;\n document.getElementById(\"contacto-llamar\").href = `tel:${data.tel}`;\n document.getElementById(\"llamar-label\").textContent = data.telLabel;\n }\n\n function posicionarServicesDropdown() {\n const drop = document.getElementById(\"mega-servicios\");\n if (!drop || window.innerWidth <= 992) return;\n const bottom = document.getElementById(\"header-flotante\").getBoundingClientRect().bottom;\n drop.style.top = (bottom + 8) + \"px\";\n }\n\n function posicionarIdiomaFlotante() {\n const flotante = document.getElementById(\"idioma-flotante-mobile\");\n if (!flotante || window.innerWidth > 992) return;\n flotante.style.top = (document.getElementById(\"header-flotante\").getBoundingClientRect().bottom + 10) + \"px\";\n }\n\n const header = document.getElementById(\"header-flotante\");\n const menuToggle = document.getElementById(\"menu-toggle\");\n const menu = document.getElementById(\"menu-principal\");\n const btnServicios = document.getElementById(\"btn-servicios\");\n const dropServicios = document.getElementById(\"mega-servicios\");\n const btnContacto = document.getElementById(\"btn-contacto\");\n const contactoDrop = document.getElementById(\"contacto-dropdown\");\n const idiomaToggle = document.getElementById(\"idioma-toggle\");\n const idiomaList = document.getElementById(\"idioma-list\");\n const flagActivo = document.getElementById(\"flag-activo\");\n const codeActivo = document.getElementById(\"code-activo\");\n const idiomaItems = idiomaList.querySelectorAll(\"li\");\n const idiomaToggleM = document.getElementById(\"idioma-toggle-mobile\");\n const idiomaListM = document.getElementById(\"idioma-list-mobile\");\n const flagActivoM = document.getElementById(\"flag-activo-mobile\");\n const codeActivoM = document.getElementById(\"code-activo-mobile\");\n const idiomaItemsM = idiomaListM.querySelectorAll(\"li\");\n const idiomaActual = detectarIdioma();\n\n function inicializarIdioma(items, flagEl, codeEl) {\n items.forEach(li => {\n if (li.dataset.prefix === idiomaActual) {\n flagEl.textContent = li.dataset.flag;\n codeEl.textContent = li.dataset.code;\n li.classList.add(\"activo\");\n }\n });\n }\n inicializarIdioma(idiomaItems, flagActivo, codeActivo);\n inicializarIdioma(idiomaItemsM, flagActivoM, codeActivoM);\n actualizarContacto(idiomaActual);\n\n function actualizarLinks(prefijo) {\n menu.querySelectorAll(\"a[data-slug]\").forEach(a => {\n const slug = a.dataset.slug;\n a.href = slug ? buildUrl(prefijo, slug + \"\/\") : buildUrl(prefijo, \"\");\n });\n }\n actualizarLinks(idiomaActual);\n\n \/* \u2500\u2500 Cierra dropdowns secundarios (NO el men\u00fa mobile) \u2500\u2500 *\/\n function closeDropdowns() {\n dropServicios.classList.remove(\"open\");\n btnServicios.classList.remove(\"active\");\n contactoDrop.classList.remove(\"open\");\n btnContacto.setAttribute(\"aria-expanded\", \"false\");\n idiomaList.classList.remove(\"open\");\n idiomaToggle.setAttribute(\"aria-expanded\", \"false\");\n idiomaListM.classList.remove(\"open\");\n idiomaToggleM.setAttribute(\"aria-expanded\", \"false\");\n }\n\n \/* \u2500\u2500 Cierra absolutamente todo incluyendo el men\u00fa mobile \u2500\u2500 *\/\n function closeAll() {\n closeDropdowns();\n menu.classList.remove(\"open\");\n menuToggle.classList.remove(\"open\");\n menuToggle.setAttribute(\"aria-expanded\", \"false\");\n }\n\n window.addEventListener(\"scroll\", () => {\n header.classList.toggle(\"scrolled\", window.scrollY > 50);\n posicionarServicesDropdown();\n posicionarIdiomaFlotante();\n }, { passive: true });\n window.addEventListener(\"resize\", () => {\n posicionarServicesDropdown();\n posicionarIdiomaFlotante();\n }, { passive: true });\n posicionarServicesDropdown();\n posicionarIdiomaFlotante();\n\n \/* \u2500\u2500 HAMBURGUESA: gestiona su propio toggle, sin depender de closeAll \u2500\u2500\n FIX CLAVE: el handler hace stopPropagation para que el click no llegue\n al document (que llamar\u00eda a closeAll y lo volver\u00eda a cerrar al instante).\n El estado open\/close lo maneja \u00e9l mismo de forma expl\u00edcita. \u2500\u2500 *\/\n menuToggle.addEventListener(\"click\", function (e) {\n e.stopPropagation();\n const estaAbierto = menu.classList.contains(\"open\");\n if (estaAbierto) {\n \/* Cerrar men\u00fa *\/\n menu.classList.remove(\"open\");\n menuToggle.classList.remove(\"open\");\n menuToggle.setAttribute(\"aria-expanded\", \"false\");\n dropServicios.classList.remove(\"open\");\n btnServicios.classList.remove(\"active\");\n } else {\n \/* Abrir men\u00fa \u2014 cerrar primero cualquier otro dropdown *\/\n closeDropdowns();\n menu.classList.add(\"open\");\n menuToggle.classList.add(\"open\");\n menuToggle.setAttribute(\"aria-expanded\", \"true\");\n }\n });\n\n \/* \u2500\u2500 Servicios \u2500\u2500 *\/\n btnServicios.addEventListener(\"click\", function (e) {\n e.preventDefault();\n e.stopPropagation();\n if (window.innerWidth <= 992) {\n const isOpen = dropServicios.classList.toggle(\"open\");\n btnServicios.classList.toggle(\"active\", isOpen);\n return;\n }\n const isOpen = dropServicios.classList.contains(\"open\");\n closeDropdowns();\n if (!isOpen) {\n dropServicios.classList.add(\"open\");\n btnServicios.classList.add(\"active\");\n posicionarServicesDropdown();\n }\n });\n\n \/* \u2500\u2500 Contacto \u2500\u2500 *\/\n btnContacto.addEventListener(\"click\", function (e) {\n e.stopPropagation();\n const isOpen = contactoDrop.classList.contains(\"open\");\n closeDropdowns();\n if (!isOpen) { contactoDrop.classList.add(\"open\"); btnContacto.setAttribute(\"aria-expanded\", \"true\"); }\n });\n\n \/* \u2500\u2500 Idioma desktop \u2500\u2500 *\/\n idiomaToggle.addEventListener(\"click\", function (e) {\n e.stopPropagation();\n const isOpen = idiomaList.classList.contains(\"open\");\n closeDropdowns();\n if (!isOpen) { idiomaList.classList.add(\"open\"); idiomaToggle.setAttribute(\"aria-expanded\", \"true\"); }\n });\n\n \/* \u2500\u2500 Idioma mobile \u2500\u2500 *\/\n idiomaToggleM.addEventListener(\"click\", function (e) {\n e.stopPropagation();\n const isOpen = idiomaListM.classList.contains(\"open\");\n closeDropdowns();\n if (!isOpen) { idiomaListM.classList.add(\"open\"); idiomaToggleM.setAttribute(\"aria-expanded\", \"true\"); }\n });\n\n \/* \u2500\u2500 Selector idioma \u2500\u2500 *\/\n function crearSelectorHandler(items, flagEl, codeEl, listEl, toggleEl) {\n items.forEach(li => {\n function seleccionar() {\n const prefijo = li.dataset.prefix;\n flagEl.textContent = li.dataset.flag;\n codeEl.textContent = li.dataset.code;\n items.forEach(i => i.classList.remove(\"activo\"));\n li.classList.add(\"activo\");\n listEl.classList.remove(\"open\");\n toggleEl.setAttribute(\"aria-expanded\", \"false\");\n actualizarContacto(prefijo);\n actualizarLinks(prefijo);\n window.location.href = buildUrl(prefijo, window.location.href);\n }\n li.addEventListener(\"click\", seleccionar);\n li.addEventListener(\"keydown\", e => { if (e.key === \"Enter\" || e.key === \" \") { e.preventDefault(); seleccionar(); } });\n });\n }\n crearSelectorHandler(idiomaItems, flagActivo, codeActivo, idiomaList, idiomaToggle);\n crearSelectorHandler(idiomaItemsM, flagActivoM, codeActivoM, idiomaListM, idiomaToggleM);\n\n \/* \u2500\u2500 Click fuera cierra todo \u2500\u2500 *\/\n document.addEventListener(\"click\", closeAll);\n\n \/* El header para la propagaci\u00f3n hacia document EXCEPTO el menuToggle,\n que ya tiene su propio stopPropagation y maneja su estado solo *\/\n header.addEventListener(\"click\", function (e) {\n \/* Solo parar si NO es el propio menuToggle (\u00e9l ya lo gestiona) *\/\n if (!menuToggle.contains(e.target)) {\n e.stopPropagation();\n }\n });\n\n document.getElementById(\"idioma-flotante-mobile\").addEventListener(\"click\", e => e.stopPropagation());\n document.getElementById(\"contacto-wrapper\").addEventListener(\"click\", e => e.stopPropagation());\n});\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b388ff elementor-widget elementor-widget-html\" data-id=\"9b388ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>360\u00b0 Stark \u2014 Hero<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --orange: #FF8C00;\n --orange-deep: #E67A00;\n --orange-light: #FFB347;\n --carbon: #0f1117;\n --carbon-mid: #161b24;\n --carbon-border: rgba(255, 255, 255, 0.07);\n --white: #ffffff;\n --white-muted: rgba(255, 255, 255, 0.6);\n }\n\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: 'Outfit', sans-serif;\n background: var(--carbon);\n color: var(--white);\n overflow-x: hidden;\n }\/* HERO *\/\n .hero {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 120px 5% 80px;\n position: relative;\n overflow: hidden;\n }\n\n .hero-bg {\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse 60% 50% at 70% 40%, rgba(255, 140, 0, 0.08) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 20% 70%, rgba(107, 122, 144, 0.06) 0%, transparent 70%);\n }\n\n .hero-grid-lines {\n position: absolute;\n inset: 0;\n background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n background-size: 80px 80px;\n mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);\n }\n\n .hero-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: rgba(255, 140, 0, 0.1);\n border: 1px solid rgba(255, 140, 0, 0.25);\n color: var(--orange-light);\n font-size: 11px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n padding: 6px 16px;\n border-radius: 100px;\n font-family: 'Space Mono', monospace;\n margin-bottom: 36px;\n width: fit-content;\n animation: fadeUp 0.8s ease both;\n }\n\n .hero-tag::before {\n content: '';\n width: 6px;\n height: 6px;\n background: var(--orange);\n border-radius: 50%;\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0%, 100% {\n opacity: 1;\n transform:scale(1)\n }\n\n 50% {\n opacity: .5;\n transform: scale(.7)\n }\n }\n\n .hero-headline {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(72px, 10vw, 140px);\n line-height: 0.92;\n letter-spacing: -0.01em;\n margin-bottom: 32px;\n animation: fadeUp 0.8s 0.1s ease both;\n }\n\n .hero-headline .line-orange {\n color: var(--orange);\n }\n\n .hero-headline .line-dim {\n color: rgba(255, 255, 255, 0.15);\n }\n\n .hero-sub {\n font-size: 18px;\n color: var(--white-muted);\n max-width: 520px;\n line-height: 1.65;\n margin-bottom: 48px;\n font-weight: 300;\n animation: fadeUp 0.8s 0.2s ease both;\n }\n\n .hero-actions {\n display: flex;\n gap: 16px;\n align-items: center;\n animation: fadeUp 0.8s 0.3s ease both;\n }\n\n .btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--orange);\n color: var(--carbon);\n font-weight: 600;\n font-size: 14px;\n padding: 14px 28px;\n border-radius: 8px;\n text-decoration: none;\n letter-spacing: 0.02em;\n transition: background 0.2s, transform 0.15s, box-shadow 0.2s;\n }\n\n .btn-primary:hover {\n background: var(--orange-deep);\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(255, 140, 0, 0.3);\n }\n\n .btn-secondary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n color: var(--white-muted);\n font-size: 14px;\n text-decoration: none;\n padding: 14px 0;\n transition: color 0.2s;\n }\n\n .btn-secondary:hover {\n color: var(--white);\n }\n\n .btn-secondary svg {\n transition: transform 0.2s;\n }\n\n .btn-secondary:hover svg {\n transform: translateX(4px);\n }\n\n .hero-stats {\n display: flex;\n gap: 48px;\n margin-top: 80px;\n padding-top: 40px;\n border-top: 1px solid var(--carbon-border);\n animation: fadeUp 0.8s 0.4s ease both;\n }\n\n .stat-num {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 42px;\n color: var(--orange);\n line-height: 1;\n }\n\n .stat-label {\n font-size: 12px;\n color: var(--white-muted);\n letter-spacing: 0.06em;\n text-transform: uppercase;\n margin-top: 4px;\n }\/* \u2500\u2500 HERO VISUAL \u2500\u2500 *\/\n .hero-visual {\n position: absolute;\n right: 5%;\n top: 50%;\n margin-top: -230px;\n width: 460px;\n height: 460px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation: floatHero 6s ease-in-out infinite, fadeUp 1s 0.3s ease both;\n }\n\n @keyframes floatHero {\n 0%, 100% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-14px);\n }\n }\/* Logo *\/\n .logo-svg {\n width: 280px;\n height: 280px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 2;\n filter: drop-shadow(0 0 60px rgba(255, 140, 0, 0.15));\n }\/* \u2500\u2500 FLOATING PILL BUTTONS (fixed positions) \u2500\u2500 *\/\n \/*\n Each button is absolutely positioned relative to .hero-visual center.\n top: 50% + translateY(-50%) centers it vertically.\n left: 50% + translateX(-50%) centers it horizontally.\n Then we offset by the precomputed x,y coordinates.\n Individual float animations keep them alive without rotation.\n *\/\n .orbit-btn {\n position: absolute;\n width: 100px;\n height: 33px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n background: rgba(15, 17, 23, 0.6);\n border: 1px solid var(--orange);\n border-radius: 7px;\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n color: #fff;\n font-family: 'Space Mono', monospace;\n font-size: 11px;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n white-space: nowrap;\n text-decoration: none;\n cursor: pointer;\n z-index: 3;\n transition: background 0.25s, border-color 0.25s, box-shadow 0.3s, filter 0.3s;\n }\n\n .orbit-btn:hover {\n background: rgba(255, 140, 0, 0.18);\n border-color: #FFB347;\n color: #fff;\n box-shadow:\n 0 0 10px 3px rgba(255, 140, 0, 0.65), 0 0 28px 8px rgba(255, 140, 0, 0.3), inset 0 0 10px rgba(255, 140, 0, 0.15);\n animation-play-state: paused;\n z-index: 10;\n }\/*\n Positions: radius=200px, 10 buttons, starting from top (-90deg)\n Each button: left = 50% + x - 38.5px (half width)\n top = 50% + y - 16.5px (half height)\n\n btn1: x=0, y=-200 \u2192 top: calc(50% - 217px) left: calc(50% - 38.5px)\n btn2: x=118, y=-162 \u2192 top: calc(50% - 179px) left: calc(50% + 79.5px)\n btn3: x=190, y=-62 \u2192 top: calc(50% - 78.5px) left: calc(50% + 151.5px)\n btn4: x=190, y=62 \u2192 top: calc(50% + 45.5px) left: calc(50% + 151.5px)\n btn5: x=118, y=162 \u2192 top: calc(50% + 145.5px) left: calc(50% + 79.5px)\n btn6: x=0, y=200 \u2192 top: calc(50% + 183.5px) left: calc(50% - 38.5px)\n btn7: x=-118, y=162 \u2192 top: calc(50% + 145.5px) left: calc(50% - 156.5px)\n btn8: x=-190, y=62 \u2192 top: calc(50% + 45.5px) left: calc(50% - 228.5px)\n btn9: x=-190, y=-62 \u2192 top: calc(50% - 78.5px) left: calc(50% - 228.5px)\n btn10: x=-118, y=-162 \u2192 top: calc(50% - 179px) left: calc(50% - 156.5px)\n *\/\n .orbit-btn:nth-child(1) {\n top: calc(50% - 216px);\n left: calc(50% - 38.5px);\n --tx: 0px;\n --ty: -216px;\n animation: floatBtn 4.0s ease-in-out infinite;\n }\n\n .orbit-btn:nth-child(2) {\n top: calc(50% - 178px);\n left: calc(50% + 79.5px);\n --tx: 118px;\n --ty: -162px;\n animation: floatBtn 4.5s ease-in-out infinite 0.3s;\n }\n\n .orbit-btn:nth-child(3) {\n top: calc(50% - 78px);\n left: calc(50% + 151.5px);\n --tx: 190px;\n --ty: -62px;\n animation: floatBtn 3.8s ease-in-out infinite 0.6s;\n }\n\n .orbit-btn:nth-child(4) {\n top: calc(50% + 46px);\n left: calc(50% + 151.5px);\n --tx: 190px;\n --ty: 62px;\n animation: floatBtn 4.2s ease-in-out infinite 0.9s;\n }\n\n .orbit-btn:nth-child(5) {\n top: calc(50% + 146px);\n left: calc(50% + 79.5px);\n --tx: 118px;\n --ty: 162px;\n animation: floatBtn 3.6s ease-in-out infinite 1.2s;\n }\n\n .orbit-btn:nth-child(6) {\n top: calc(50% + 183px);\n left: calc(50% - 38.5px);\n --tx: 0px;\n --ty: 200px;\n animation: floatBtn 4.8s ease-in-out infinite 1.5s;\n }\n\n .orbit-btn:nth-child(7) {\n top: calc(50% + 146px);\n left: calc(50% - 156.5px);\n --tx: -118px;\n --ty: 162px;\n animation: floatBtn 4.1s ease-in-out infinite 1.8s;\n }\n\n .orbit-btn:nth-child(8) {\n top: calc(50% + 46px);\n left: calc(50% - 228.5px);\n --tx: -190px;\n --ty: 62px;\n animation: floatBtn 3.9s ease-in-out infinite 2.1s;\n }\n\n .orbit-btn:nth-child(9) {\n top: calc(50% - 78px);\n left: calc(50% - 228.5px);\n --tx: -190px;\n --ty: -62px;\n animation: floatBtn 4.4s ease-in-out infinite 2.4s;\n }\n\n .orbit-btn:nth-child(10) {\n top: calc(50% - 178px);\n left: calc(50% - 156.5px);\n --tx: -118px;\n --ty: -162px;\n animation: floatBtn 3.7s ease-in-out infinite 2.7s;\n }\/* Gentle individual float \u2014 each button bobs slightly up\/down independently *\/\n @keyframes floatBtn {\n 0%, 100% {\n transform: translateY(0px);\n }\n\n 50% {\n transform: translateY(-7px);\n }\n }\/* Fade in staggered *\/\n .orbit-btn:nth-child(1) {\n animation-delay: 0s, 0.1s;\n }\n\n .orbit-btn:nth-child(2) {\n animation-delay: 0.3s, 0.2s;\n }\n\n .orbit-btn:nth-child(3) {\n animation-delay: 0.6s, 0.3s;\n }\n\n .orbit-btn:nth-child(4) {\n animation-delay: 0.9s, 0.4s;\n }\n\n .orbit-btn:nth-child(5) {\n animation-delay: 1.2s, 0.5s;\n }\n\n .orbit-btn:nth-child(6) {\n animation-delay: 1.5s, 0.6s;\n }\n\n .orbit-btn:nth-child(7) {\n animation-delay: 1.8s, 0.7s;\n }\n\n .orbit-btn:nth-child(8) {\n animation-delay: 2.1s, 0.8s;\n }\n\n .orbit-btn:nth-child(9) {\n animation-delay: 2.4s, 0.9s;\n }\n\n .orbit-btn:nth-child(10) {\n animation-delay: 2.7s, 1.0s;\n }\n\n @keyframes fadeUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @media (max-width: 1100px) {\n .hero-visual {\n display: none;\n }\n }\n\n @media (max-width: 900px) {\n .hero-stats {\n gap: 28px;\n flex-wrap: wrap;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"hero\">\n <div class=\"hero-bg\"><\/div>\n <div class=\"hero-grid-lines\"><\/div>\n\n <div class=\"hero-tag\">Full Stack Agency \u00b7 Made in Europe<\/div>\n\n <h1 class=\"hero-headline\">\n\n TU MARCA.\n <br>\n <span class=\"line-orange\">SIN L\u00cdMITES.<\/span>\n <br>\n <span class=\"line-dim\">360\u00b0<\/span>\n <\/h1>\n\n <p class=\"hero-sub\">\n Estrategia, dise\u00f1o, tecnolog\u00eda y performance en un solo equipo. Hacemos crecer marcas que quieren liderar.\n <\/p>\n\n <div class=\"hero-actions\">\n <a href=\"#contacto\" class=\"btn-primary\">\n\n Empieza ahora\n \n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n <\/svg>\n <\/a>\n <a href=\"#portfolio\" class=\"btn-secondary\">\n\n Ver proyectos\n \n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n <\/svg>\n <\/a>\n <\/div>\n\n <div class=\"hero-stats\">\n <div>\n <div class=\"stat-num\">+120<\/div>\n <div class=\"stat-label\">Proyectos entregados<\/div>\n <\/div>\n <div>\n <div class=\"stat-num\">+80<\/div>\n <div class=\"stat-label\">Clientes satisfechos<\/div>\n <\/div>\n <div>\n <div class=\"stat-num\">10+<\/div>\n <div class=\"stat-label\">A\u00f1os de experiencia<\/div>\n <\/div>\n <div>\n <div class=\"stat-num\">360\u00b0<\/div>\n <div class=\"stat-label\">Visi\u00f3n de marca<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"hero-visual\">\n\n \n <a href=\"#marketing\" class=\"orbit-btn\">Marketing<\/a>\n <a href=\"#seo-sem\" class=\"orbit-btn\">SEO\/SEM<\/a>\n <a href=\"#branding\" class=\"orbit-btn\">Branding<\/a>\n <a href=\"#webdev\" class=\"orbit-btn\">Web.Dev<\/a>\n <a href=\"#smartwebs\" class=\"orbit-btn\">Smartwebs<\/a>\n <a href=\"#biolinks\" class=\"orbit-btn\">Biolinks NFC<\/a>\n <a href=\"#booking\" class=\"orbit-btn\">Booking<\/a>\n <a href=\"#cartas\" class=\"orbit-btn\">Cartas QR<\/a>\n <a href=\"#hosting\" class=\"orbit-btn\">Hosting<\/a>\n <a href=\"#auditorias\" class=\"orbit-btn\">Auditor\u00edas<\/a>\n\n \n<svg class=\"logo-svg\" viewBox=\"0 0 340 340\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"170\" cy=\"170\" r=\"150\" stroke=\"rgba(255,255,255,0.04)\" stroke-width=\"1\"\/>\n <circle cx=\"170\" cy=\"170\" r=\"120\" stroke=\"rgba(255,255,255,0.06)\" stroke-width=\"1\"\/>\n \n <circle cx=\"170\" cy=\"170\" r=\"140\" stroke=\"white\" stroke-width=\"3.5\" stroke-dasharray=\"600 100\" stroke-linecap=\"round\"\/>\n \n <circle cx=\"170\" cy=\"170\" r=\"140\" stroke=\"#FF8C00\" stroke-width=\"4\" stroke-dasharray=\"160 480\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 170 170\" to=\"360 170 170\" dur=\"10s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n\n <circle cx=\"170\" cy=\"170\" r=\"140\" stroke=\"rgba(255,140,0,0.3)\" stroke-width=\"1\" stroke-dasharray=\"80 560\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"180 170 170\" to=\"-180 170 170\" dur=\"16s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n\n \n <text x=\"170\" y=\"180\" text-anchor=\"middle\" font-size=\"88\" font-weight=\"700\" fill=\"#4a5668\" font-family=\"sans-serif\">S<\/text>\n\n \n <text x=\"170\" y=\"228\" text-anchor=\"middle\" font-size=\"20\" font-weight=\"600\" fill=\"#FF8C00\" font-family=\"Montserrat, sans-serif\" letter-spacing=\"2\">\n 360\u00ba\n <\/text>\n\n \n <text x=\"170\" y=\"256\" text-anchor=\"middle\" font-size=\"18\" fill=\"rgba(255,255,255,0.35)\" font-family=\"monospace\" letter-spacing=\"8\">\n STARK\n <\/text>\n<\/svg>\n\n <\/div>\n <\/section>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a6c102e elementor-widget elementor-widget-html\" data-id=\"a6c102e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>360\u00b0 Stark \u2014 Marquee<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --orange: #FF8C00;\n --carbon-mid: #161b24;\n --carbon-border: rgba(255, 255, 255, 0.07);\n --steel-light: #9AAAC0;\n }\n\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n background: var(--carbon-mid);\n }\n\n .marquee-section {\n border-top: 1px solid var(--carbon-border);\n border-bottom: 1px solid var(--carbon-border);\n padding: 18px 0;\n overflow: hidden;\n background: var(--carbon-mid);\n }\n\n .marquee-track {\n display: flex;\n white-space: nowrap;\n animation: marquee 28s linear infinite;\n }\n\n @keyframes marquee {\n from {\n transform: translateX(0);\n }\n\n to {\n transform: translateX(-50%);\n }\n }\n\n .marquee-item {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 0 32px;\n font-family: 'Space Mono', monospace;\n font-size: 11px;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--steel-light);\n }\n\n .marquee-dot {\n width: 4px;\n height: 4px;\n background: var(--orange);\n border-radius: 50%;\n flex-shrink: 0;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"marquee-section\">\n <div class=\"marquee-track\">\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Marketing 360\u00b0\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n SEO \/ SEM\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Branding\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Paid Media\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Web Development\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Dise\u00f1o Creativo\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Biolinks\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Premium Web\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Hosting\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Mantenimiento\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Marketing 360\u00b0\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n SEO \/ SEM\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Branding\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Paid Media\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Web Development\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Dise\u00f1o Creativo\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Biolinks\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Premium Web\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Hosting\n <\/span>\n <span class=\"marquee-item\">\n <span class=\"marquee-dot\"><\/span>\n Mantenimiento\n <\/span>\n <\/div>\n <\/div>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c3fb1dc elementor-widget elementor-widget-html\" data-id=\"c3fb1dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>360\u00b0 Stark \u2014 Servicios<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n --orange: #FF8C00;\n --orange-deep: #E67A00;\n --carbon: #0f1117;\n --carbon-mid: #161b24;\n --carbon-surface: #1e2433;\n --carbon-border: rgba(255,255,255,0.07);\n --white: #ffffff;\n --white-muted: rgba(255,255,255,0.6);\n}\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nbody { font-family: 'Outfit', sans-serif; background: var(--carbon); color: var(--white); }\n\n.section-tag { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }\n.section-tag::before { content: ''; display: block; width: 28px; height: 1px; background: var(--orange); }\n.section-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 5.5vw, 72px); line-height: 1; }\n.section-title span { color: var(--orange); }\n.section-header { margin-bottom: 64px; }\n\n.services { padding: 120px 5%; background: var(--carbon); }\n\n.services-grid {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 2px;\n background: var(--carbon-border);\n border: 1px solid var(--carbon-border);\n border-radius: 16px;\n overflow: hidden;\n}\n\n.service-card {\n background: var(--carbon-mid);\n padding: 36px 28px;\n position: relative;\n overflow: hidden;\n transition: background 0.3s;\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: inherit;\n cursor: pointer;\n}\n\n.service-card::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(255,140,0,0.06) 0%, transparent 60%);\n opacity: 0;\n transition: opacity 0.3s;\n}\n.service-card:hover { background: var(--carbon-surface); }\n.service-card:hover::before { opacity: 1; }\n\n.service-icon {\n width: 44px; height: 44px;\n background: rgba(255,140,0,0.1);\n border: 1px solid rgba(255,140,0,0.2);\n border-radius: 10px;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 20px;\n transition: background 0.3s, border-color 0.3s;\n flex-shrink: 0;\n}\n.service-card:hover .service-icon { background: rgba(255,140,0,0.18); border-color: rgba(255,140,0,0.4); }\n.service-icon svg { width: 20px; height: 20px; }\n\n.service-num {\n position: absolute;\n top: 28px; right: 24px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 44px;\n color: rgba(255,255,255,0.03);\n line-height: 1;\n transition: color 0.3s;\n}\n.service-card:hover .service-num { color: rgba(255,140,0,0.06); }\n\n.service-title { font-size: 15px; font-weight: 600; margin-bottom: 10px; letter-spacing: 0.01em; line-height: 1.3; }\n.service-desc { font-size: 13px; color: var(--white-muted); line-height: 1.6; font-weight: 300; flex: 1; }\n\n.service-tag {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n margin-top: 4px;\n margin-bottom: 8px;\n font-size: 9px;\n font-family: 'Space Mono', monospace;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--orange);\n opacity: 0.7;\n}\n\n.service-arrow {\n margin-top: 20px;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: 11px;\n color: var(--orange);\n font-family: 'Space Mono', monospace;\n letter-spacing: 0.08em;\n text-decoration: none;\n opacity: 0;\n transform: translateY(6px);\n transition: opacity 0.3s, transform 0.3s;\n}\n.service-card:hover .service-arrow { opacity: 1; transform: translateY(0); }\n\n\/* 2 filas de 5 \u2014 mobile: 2 columnas *\/\n@media (max-width: 1100px) {\n .services-grid { grid-template-columns: repeat(2, 1fr); }\n}\n@media (max-width: 600px) {\n .services-grid { grid-template-columns: 1fr; }\n}\n<\/style>\n<\/head>\n<body>\n<section class=\"services\" id=\"servicios\">\n <div class=\"section-header\">\n <div class=\"section-tag\">Qu\u00e9 hacemos<\/div>\n <h2 class=\"section-title\">NUESTROS <span>SERVICIOS<\/span><\/h2>\n <\/div>\n\n <div class=\"services-grid\">\n\n \n <a class=\"service-card\" id=\"marketing\" href=\"\/servicios\/marketing-360\">\n <div class=\"service-num\">01<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <path d=\"M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Marketing 360\u00b0<\/div>\n <div class=\"service-desc\">Estrategia integral que cubre todos los canales. Una sola agencia para toda tu presencia digital.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"seo-sem\" href=\"\/servicios\/seo-sem-paid-media\">\n <div class=\"service-num\">02<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"M21 21l-4.35-4.35\"\/>\n <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">SEO \/ SEM & Paid Media<\/div>\n <div class=\"service-desc\">Posicionamiento org\u00e1nico y campa\u00f1as de pago. Google Ads, Meta Ads y TikTok Ads con ROI medible.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"branding\" href=\"\/servicios\/branding-diseno\">\n <div class=\"service-num\">03<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Branding & Dise\u00f1o<\/div>\n <div class=\"service-desc\">Identidad visual completa. Dise\u00f1o gr\u00e1fico, motion y contenido visual que conecta y perdura.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"webdev\" href=\"\/servicios\/web-development\">\n <div class=\"service-num\">04<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Web Development<\/div>\n <div class=\"service-desc\">Desarrollo web a medida, r\u00e1pido y escalable. Tecnolog\u00eda al servicio de tu negocio y conversi\u00f3n.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"smartwebs\" href=\"\/servicios\/smartwebs-ia\">\n <div class=\"service-num\">05<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\n <path d=\"M3 9h18M9 21V9\"\/>\n <path d=\"M15 6l1.5 1.5L15 9\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Smartwebs & IA<\/div>\n <div class=\"service-desc\">Webs inteligentes con automatizaciones e inteligencia artificial integrada para escalar sin l\u00edmites.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"biolinks\" href=\"\/servicios\/biolinks-nfc\">\n <div class=\"service-num\">06<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71\"\/>\n <path d=\"M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Biolinks & NFC<\/div>\n <div class=\"service-tag\">\u00b7 En colaboraci\u00f3n con Linkscard.pro<\/div>\n <div class=\"service-desc\">Tu hub de enlaces con marca propia. Tarjetas NFC f\u00edsicas inteligentes que comparten tu perfil al instante.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"booking\" href=\"\/servicios\/booking-systems\">\n <div class=\"service-num\">07<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/>\n <path d=\"M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Booking Systems<\/div>\n <div class=\"service-desc\">Sistemas de reservas online para restaurantes, cl\u00ednicas y hoteles. Automatiza citas y gestiona disponibilidad.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"cartas\" href=\"\/servicios\/cartas-digitales\">\n <div class=\"service-num\">08<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"\/>\n <polyline points=\"14 2 14 8 20 8\"\/>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n <polyline points=\"10 9 9 9 8 9\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Cartas Digitales<\/div>\n <div class=\"service-desc\">Men\u00fas digitales QR y NFC para hosteler\u00eda. Actualizaci\u00f3n en tiempo real, sin impresi\u00f3n y con dise\u00f1o de marca.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"hosting\" href=\"\/servicios\/hosting-mantenimiento\">\n <div class=\"service-num\">09<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"8\" rx=\"2\"\/>\n <rect x=\"2\" y=\"14\" width=\"20\" height=\"8\" rx=\"2\"\/>\n <line x1=\"6\" y1=\"6\" x2=\"6.01\" y2=\"6\"\/>\n <line x1=\"6\" y1=\"18\" x2=\"6.01\" y2=\"18\"\/>\n <path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Hosting & Mantenimiento<\/div>\n <div class=\"service-desc\">Servidor r\u00e1pido y seguro incluido. Actualizaciones, backups, seguridad y soporte continuo en un solo paquete.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n \n <a class=\"service-card\" id=\"auditorias\" href=\"\/servicios\/auditorias\">\n <div class=\"service-num\">10<\/div>\n <div class=\"service-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M9 11l3 3L22 4\"\/>\n <path d=\"M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11\"\/>\n <\/svg>\n <\/div>\n <div class=\"service-title\">Auditor\u00edas<\/div>\n <div class=\"service-desc\">An\u00e1lisis completo de tu presencia digital: SEO, rendimiento, UX y competencia. Diagn\u00f3stico real, soluciones concretas.<\/div>\n <span class=\"service-arrow\">Saber m\u00e1s \u2192<\/span>\n <\/a>\n\n <\/div>\n<\/section>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5dc2221 elementor-widget elementor-widget-html\" data-id=\"5dc2221\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>360\u00b0 Stark \u2014 Nosotros<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --orange: #FF8C00;\n --orange-deep: #E67A00;\n --carbon: #0f1117;\n --carbon-mid: #161b24;\n --carbon-surface: #1e2433;\n --carbon-border: rgba(255, 255, 255, 0.07);\n --white: #ffffff;\n --white-muted: rgba(255, 255, 255, 0.6);\n }\n\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: 'Outfit', sans-serif;\n background: var(--carbon-mid);\n color: var(--white);\n }\n\n .section-tag {\n font-family: 'Space Mono', monospace;\n font-size: 10px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--orange);\n margin-bottom: 16px;\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .section-tag::before {\n content: '';\n display: block;\n width: 28px;\n height: 1px;\n background: var(--orange);\n }\n\n .section-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(42px, 5.5vw, 72px);\n line-height: 1;\n }\n\n .section-title span {\n color: var(--orange);\n }\n\n .btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--orange);\n color: var(--carbon);\n font-weight: 600;\n font-size: 14px;\n padding: 14px 28px;\n border-radius: 8px;\n text-decoration: none;\n transition: background 0.2s, transform 0.15s, box-shadow 0.2s;\n }\n\n .btn-primary:hover {\n background: var(--orange-deep);\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(255, 140, 0, 0.3);\n }\n\n .about {\n padding: 120px 5%;\n background: var(--carbon-mid);\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n }\n\n .about-visual {\n position: relative;\n }\n\n .about-big-s {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 320px;\n line-height: 0.85;\n color: rgba(255, 255, 255, 0.025);\n position: absolute;\n top: -20px;\n left: -20px;\n pointer-events: none;\n user-select: none;\n }\n\n .about-card {\n background: var(--carbon-surface);\n border: 1px solid var(--carbon-border);\n border-radius: 16px;\n padding: 40px;\n position: relative;\n z-index: 1;\n }\n\n .about-card-highlight {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--orange), transparent);\n border-radius: 16px 16px 0 0;\n }\n\n .about-values {\n display: flex;\n flex-direction: column;\n gap: 20px;\n margin-top: 32px;\n }\n\n .about-value {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 16px;\n background: rgba(255, 140, 0, 0.04);\n border: 1px solid rgba(255, 140, 0, 0.1);\n border-radius: 10px;\n transition: border-color 0.2s, background 0.2s;\n }\n\n .about-value:hover {\n border-color: rgba(255, 140, 0, 0.25);\n background: rgba(255, 140, 0, 0.07);\n }\n\n .about-value-icon {\n width: 36px;\n height: 36px;\n flex-shrink: 0;\n background: rgba(255, 140, 0, 0.12);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .about-value-title {\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 4px;\n }\n\n .about-value-text {\n font-size: 13px;\n color: var(--white-muted);\n line-height: 1.55;\n font-weight: 300;\n }\n\n .about-content p {\n font-size: 17px;\n line-height: 1.75;\n color: var(--white-muted);\n font-weight: 300;\n margin-bottom: 24px;\n }\n\n .about-content p strong {\n color: var(--white);\n font-weight: 500;\n }\n\n @media (max-width: 900px) {\n .about {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section class=\"about\" id=\"nosotros\">\n <div class=\"about-visual\">\n <div class=\"about-big-s\">S<\/div>\n <div class=\"about-card\">\n <div class=\"about-card-highlight\"><\/div>\n <div class=\"section-tag\" style=\"margin-bottom:12px;\">Qui\u00e9nes somos<\/div>\n <h2 style=\"font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,4vw,52px);line-height:1;margin-bottom:24px;\">\n EQUIPO\n <br>\n <span style=\"color:var(--orange);\">FULL STACK<\/span>\n <\/h2>\n <p style=\"font-size:14px;color:var(--white-muted);line-height:1.7;margin-bottom:20px;font-weight:300;\">Dise\u00f1adores, desarrolladores, estrategas y creativos trabajando como uno solo bajo la metodolog\u00eda 360\u00b0.<\/p>\n <div class=\"about-values\">\n <div class=\"about-value\">\n <div class=\"about-value-icon\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"about-value-title\">Resultados reales<\/div>\n <div class=\"about-value-text\">No vendemos promesas. Vendemos n\u00fameros, crecimiento y ROI medible.<\/div>\n <\/div>\n <\/div>\n <div class=\"about-value\">\n <div class=\"about-value-icon\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"about-value-title\">Visi\u00f3n 360\u00b0<\/div>\n <div class=\"about-value-text\">Todos los frentes cubiertos: creativo, t\u00e9cnico y de negocio, coordinados.<\/div>\n <\/div>\n <\/div>\n <div class=\"about-value\">\n <div class=\"about-value-icon\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\">\n <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/>\n <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n <path d=\"M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\"\/>\n <\/svg>\n <\/div>\n <div>\n <div class=\"about-value-title\">Equipo dedicado<\/div>\n <div class=\"about-value-text\">Tu proyecto siempre con un equipo comprometido y un account manager directo.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"about-content\" style=\"padding-left:20px;\">\n <div class=\"section-tag\">Nuestra historia<\/div>\n <h2 class=\"section-title\" style=\"margin-bottom:32px;\">\n AGENCIA \n <span>SIN<\/span>\n <br>\n L\u00cdMITES\n <\/h2>\n <p>\n Nacimos con una idea clara: \n <strong>las marcas merecen una agencia que lo entienda todo<\/strong>\n , no un proveedor para cada cosa.\n <\/p>\n <p>En 360\u00b0 Stark no tenemos departamentos aislados. Tenemos un ecosistema donde estrategia, dise\u00f1o, c\u00f3digo y medios conviven y se potencian mutuamente.<\/p>\n <p>\n El resultado: \n <strong>proyectos m\u00e1s coherentes, ejecuci\u00f3n m\u00e1s r\u00e1pida y marcas m\u00e1s fuertes.<\/strong>\n <\/p>\n <div style=\"margin-top:40px;\">\n <a href=\"#contacto\" class=\"btn-primary\" style=\"width:fit-content;\">\n Trabajemos juntos \n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\">\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n <\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-908a4f1 elementor-widget elementor-widget-html\" data-id=\"908a4f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>CTA Contacto \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\nhtml{\n scroll-behavior:smooth;\n}\n.cta-section{padding:120px 5%;background:var(--carbon);position:relative;overflow:hidden;text-align:center}\n.cta-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 100%,rgba(255,140,0,.07) 0%,transparent 70%)}\n.cta-inner{position:relative;z-index:1;max-width:700px;margin:0 auto}\n.cta-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,7vw,88px);line-height:.95;margin-bottom:20px}\n.cta-title span{color:var(--orange)}\n.cta-sub{font-size:17px;color:var(--white-muted);line-height:1.65;margin-bottom:48px;font-weight:300}\n.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}\n.cta-alt{display:flex;align-items:center;gap:8px;color:var(--white-muted);font-size:14px;text-decoration:none;padding:14px 0;transition:color .2s}\n.cta-alt:hover{color:var(--white)}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<a href=\"#contacto\"><\/a><\/a>\n\n<section class=\"cta-section\" id=\"contacto\">\n <div class=\"cta-bg\"><\/div>\n <div class=\"cta-inner\">\n <div class=\"section-tag reveal\" style=\"justify-content:center;\"><span style=\"width:0;margin:0;padding:0\"><\/span>Empieza hoy<\/div>\n <h2 class=\"cta-title reveal\">\u00bfLISTO PARA<br><span>EMPEZAR?<\/span><\/h2>\n <p class=\"cta-sub reveal\">Cu\u00e9ntanos tu proyecto y te preparamos una propuesta en menos de 24 horas. Sin compromiso.<\/p>\n <div class=\"cta-actions reveal\">\n <a href=\"mailto:mail@360stark.com\" class=\"btn-primary\">\n Escribir ahora\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z\"\/><\/svg>\n <\/a>\n <a href=\"https:\/\/wa.me\/34657730100\" class=\"cta-alt\" target=\"_blank\" rel=\"noopener\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z\"\/><\/svg>\n WhatsApp directo\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n<script src=\"shared.js\"><\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13edbf3 elementor-widget elementor-widget-html\" data-id=\"13edbf3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<footer id=\"sp-footer\">\n <div class=\"sp-footer-inner\">\n\n \n <div class=\"sp-footer-brand\">\n <a href=\"..\/index.html\" class=\"sp-footer-logo\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 80 80\" fill=\"none\">\n <circle cx=\"40\" cy=\"40\" r=\"33\" stroke=\"white\" stroke-width=\"2.5\" stroke-dasharray=\"170 37\" stroke-linecap=\"round\"\/>\n <circle cx=\"40\" cy=\"40\" r=\"33\" stroke=\"#FF8C00\" stroke-width=\"3\" stroke-dasharray=\"80 127\" stroke-linecap=\"round\" stroke-dashoffset=\"60\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 40 40\" to=\"360 40 40\" dur=\"12s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <text x=\"40\" y=\"48\" text-anchor=\"middle\" font-size=\"26\" font-weight=\"700\" fill=\"#6B7A90\" font-family=\"sans-serif\">S<\/text>\n <\/svg>\n <span class=\"sp-footer-logo-text\"><span>360\u00b0<\/span> STARK<\/span>\n <\/a>\n <p class=\"sp-footer-tagline\">FULL STACK AGENCY \u00b7 MADE IN EUROPE<\/p>\n <\/div>\n\n \n <div class=\"sp-footer-links\">\n <a href=\"..\/aviso-legal.html\">Aviso Legal<\/a>\n <span>\u00b7<\/span>\n <a href=\"..\/privacidad.html\">Pol\u00edtica de Privacidad<\/a>\n <span>\u00b7<\/span>\n <a href=\"..\/cookies.html\">Cookies<\/a>\n <\/div>\n\n \n <div class=\"sp-footer-copy\">\n Todos los derechos reservados 2026 \u00a9\n DEV. <a href=\"https:\/\/360stark.com\" target=\"_blank\" rel=\"noopener\">360\u00baSTARK<\/a>\n <\/div>\n\n <\/div>\n<\/footer>\n\n<script>\ndocument.addEventListener('mouseleave',()=>{dot.classList.add('is-hidden');ring.classList.add('is-hidden')});\ndocument.addEventListener('mouseenter',()=>{dot.classList.remove('is-hidden');ring.classList.remove('is-hidden')});\ndocument.querySelectorAll('a,button,.plan-card,.include-card,.faq-item').forEach(el=>{\n el.addEventListener('mouseenter',()=>{dot.classList.add('is-hover');ring.classList.add('is-hover')});\n el.addEventListener('mouseleave',()=>{dot.classList.remove('is-hover');ring.classList.remove('is-hover')});\n});\n\nconst observer = new IntersectionObserver(entries=>{\n entries.forEach((e,i)=>{\n if(e.isIntersecting) {\n setTimeout(()=>e.target.classList.add('visible'),i*80);\n observer.unobserve(e.target);\n }\n });\n},{threshold:.1});\ndocument.querySelectorAll('.reveal').forEach(el=>observer.observe(el));\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f17fe1 elementor-widget elementor-widget-html\" data-id=\"5f17fe1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>360\u00b0 Stark \u2014 Cursor (Desktop Only)<\/title>\n\n<style>\n\/* \u2500\u2500\u2500 CURSOR SOLO DESKTOP \u2500\u2500\u2500 *\/\n\n\/* Ocultar cursor nativo SOLO en desktop *\/\n@media (hover: hover) and (pointer: fine) {\n * { cursor: none !important; }\n}\n\n\/* Cursor DOT *\/\n#cursor-dot {\n position: fixed;\n top: 0; left: 0;\n width: 10px;\n height: 10px;\n background: #FF8C00;\n border-radius: 50%;\n pointer-events: none;\n z-index: 2147483647;\n transform: translate(-50%, -50%);\n transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.3s ease;\n will-change: transform;\n}\n\n\/* Cursor RING *\/\n#cursor-ring {\n position: fixed;\n top: 0; left: 0;\n width: 34px;\n height: 34px;\n border: 1.5px solid rgba(255, 140, 0, 0.6);\n border-radius: 50%;\n pointer-events: none;\n z-index: 2147483646;\n transform: translate(-50%, -50%);\n transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;\n will-change: transform;\n}\n\n\/* Estado hover *\/\n#cursor-dot.is-hover {\n width: 16px;\n height: 16px;\n background: #FFB347;\n}\n\n#cursor-ring.is-hover {\n width: 52px;\n height: 52px;\n border-color: rgba(255, 140, 0, 0.9);\n}\n\n\/* Ocultar cuando sale de la ventana *\/\n#cursor-dot.is-hidden,\n#cursor-ring.is-hidden {\n opacity: 0;\n}\n\n\/* Ocultar completamente en m\u00f3vil\/tablet *\/\n@media (hover: none), (pointer: coarse) {\n #cursor-dot,\n #cursor-ring {\n display: none !important;\n }\n}\n<\/style>\n<\/head>\n\n<body style=\"background:#0f1117;min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:sans-serif;color:#fff;gap:20px;\">\n\n\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<script>\n(function() {\n\n \/\/ \ud83d\udc49 SOLO DESKTOP\n if (!window.matchMedia(\"(hover: hover) and (pointer: fine)\").matches) {\n return;\n }\n\n const dot = document.getElementById('cursor-dot');\n const ring = document.getElementById('cursor-ring');\n\n if (!dot || !ring) return;\n\n let mouseX = -100, mouseY = -100;\n let ringX = -100, ringY = -100;\n let rafId;\n\n \/\/ Movimiento del rat\u00f3n (dot inmediato)\n document.addEventListener('mousemove', e => {\n mouseX = e.clientX;\n mouseY = e.clientY;\n\n dot.style.transform = `translate(calc(-50% + ${mouseX}px), calc(-50% + ${mouseY}px))`;\n dot.style.left = '0';\n dot.style.top = '0';\n\n dot.classList.remove('is-hidden');\n ring.classList.remove('is-hidden');\n });\n\n \/\/ Animaci\u00f3n del ring (con lag)\n function animateRing() {\n ringX += (mouseX - ringX) * 0.14;\n ringY += (mouseY - ringY) * 0.14;\n\n ring.style.transform = `translate(calc(-50% + ${ringX}px), calc(-50% + ${ringY}px))`;\n ring.style.left = '0';\n ring.style.top = '0';\n\n rafId = requestAnimationFrame(animateRing);\n }\n animateRing();\n\n \/\/ Ocultar al salir de la ventana\n document.addEventListener('mouseleave', () => {\n dot.classList.add('is-hidden');\n ring.classList.add('is-hidden');\n });\n\n document.addEventListener('mouseenter', () => {\n dot.classList.remove('is-hidden');\n ring.classList.remove('is-hidden');\n });\n\n \/\/ Hover en elementos interactivos\n const interactivos = 'a, button, [role=\"button\"], input, textarea, select, label, .orbit-btn, .service-card, .portfolio-item, .btn-reserva';\n\n function addHover(el) {\n el.addEventListener('mouseenter', () => {\n dot.classList.add('is-hover');\n ring.classList.add('is-hover');\n });\n el.addEventListener('mouseleave', () => {\n dot.classList.remove('is-hover');\n ring.classList.remove('is-hover');\n });\n }\n\n document.querySelectorAll(interactivos).forEach(addHover);\n\n \/\/ Detectar elementos din\u00e1micos\n const observer = new MutationObserver(mutations => {\n mutations.forEach(m => {\n m.addedNodes.forEach(node => {\n if (node.nodeType === 1) {\n if (node.matches && node.matches(interactivos)) addHover(node);\n node.querySelectorAll && node.querySelectorAll(interactivos).forEach(addHover);\n }\n });\n });\n });\n\n observer.observe(document.body, { childList: true, subtree: true });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>360STARK \u2013 Header S 360\u00b0 STARK Inicio Servicios \u25be Visibilidad & Medios 01 Marketing 360\u00b0Estrategia integral que cubre todos los canales. Una sola agencia para toda tu presencia digital.Saber m\u00e1s \u2192 02 SEO \/ SEM & Paid MediaPosicionamiento org\u00e1nico y campa\u00f1as de pago. Google Ads, Meta Ads y TikTok Ads con ROI medible.Saber m\u00e1s \u2192 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":97,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":366,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/9\/revisions\/366"}],"wp:attachment":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}