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>Hero \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\n.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:160px 5% 100px;position:relative;overflow:hidden}\n.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 75% 50%,rgba(255,140,0,.07) 0%,transparent 65%),radial-gradient(ellipse 40% 40% at 15% 60%,rgba(107,122,144,.05) 0%,transparent 65%)}\n.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at 30% 50%,black 20%,transparent 75%)}\n.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-light);background:rgba(255,140,0,.08);border:1px solid rgba(255,140,0,.2);padding:6px 16px;border-radius:100px;width:fit-content;margin-bottom:32px;animation:fadeUp .7s ease both}\n.hero-eyebrow::before{content:'';width:6px;height:6px;background:var(--orange);border-radius:50%;animation:pulse 2s infinite}\n.hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(64px,9vw,128px);line-height:.92;letter-spacing:-.01em;margin-bottom:28px;animation:fadeUp .7s .1s ease both}\n.hero-title .accent{color:var(--orange)}\n.hero-title .dim{color:rgba(255,255,255,.12)}\n.hero-sub{font-size:19px;color:var(--white-muted);max-width:560px;line-height:1.65;font-weight:300;margin-bottom:48px;animation:fadeUp .7s .2s ease both}\n.hero-actions{display:flex;gap:16px;align-items:center;animation:fadeUp .7s .3s ease both;flex-wrap:wrap}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<section class=\"hero\">\n <div class=\"hero-bg\"><\/div>\n <div class=\"hero-grid\"><\/div>\n <div class=\"hero-eyebrow\">Servicio 08 \u00b7 Cartas Digitales<\/div>\n <h1 class=\"hero-title\">TU MEN\u00da<br><span class=\"accent\">SIEMPRE AL D\u00cdA.<\/span><br><span class=\"dim\">QR.<\/span><\/h1>\n <p class=\"hero-sub\">Men\u00fas digitales QR y NFC para hosteler\u00eda. Actualizaci\u00f3n en tiempo real, sin impresi\u00f3n, con dise\u00f1o de marca y opci\u00f3n de pedir directamente desde la mesa.<\/p>\n <div class=\"hero-actions\">\n <a href=\"#planes\" class=\"btn-primary\">Ver planes <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n <a href=\"#que-incluye\" class=\"btn-outline\">Qu\u00e9 incluye <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n <\/div>\n<\/section>\n\n<script src=\"shared.js\"><\/script>\n<\/body>\n<\/html>\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>Stats Bar \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\n.stats-bar{background:var(--carbon-mid);border-top:1px solid var(--carbon-border);border-bottom:1px solid var(--carbon-border);padding:40px 5%;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}\n.stat{text-align:center}\n.stat-num{font-family:'Bebas Neue',sans-serif;font-size:48px;color:var(--orange);line-height:1}\n.stat-label{font-size:12px;color:var(--white-muted);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}\n@media(max-width:1100px){.stats-bar{grid-template-columns:repeat(2,1fr)}}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<div class=\"stats-bar\">\n <div class=\"stat reveal\"><div class=\"stat-num\">0\u20ac<\/div><div class=\"stat-label\">Coste de impresi\u00f3n<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"stat-num\">5min<\/div><div class=\"stat-label\">Para actualizar precios<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"stat-num\">QR + NFC<\/div><div class=\"stat-label\">Acceso sin contacto<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"stat-num\">+28%<\/div><div class=\"stat-label\">M\u00e1s pedidos con fotos<\/div><\/div>\n<\/div>\n\n<script src=\"shared.js\"><\/script>\n<\/body>\n<\/html>\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>Qu\u00e9 Incluye \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\n.includes{padding:120px 5%;background:var(--carbon)}\n.includes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:64px;background:var(--carbon-border);border:1px solid var(--carbon-border);border-radius:16px;overflow:hidden}\n.include-card{background:var(--carbon-mid);padding:36px 32px;transition:background .3s;position:relative;overflow:hidden}\n.include-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,140,0,.05) 0%,transparent 60%);opacity:0;transition:opacity .3s}\n.include-card:hover{background:var(--carbon-surface)}\n.include-card:hover::before{opacity:1}\n.include-icon{width:48px;height:48px;background:rgba(255,140,0,.1);border:1px solid rgba(255,140,0,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:background .3s,border-color .3s}\n.include-card:hover .include-icon{background:rgba(255,140,0,.18);border-color:rgba(255,140,0,.4)}\n.include-icon svg{width:22px;height:22px}\n.include-title{font-size:17px;font-weight:600;margin-bottom:10px}\n.include-desc{font-size:14px;color:var(--white-muted);line-height:1.65;font-weight:300}\n@media(max-width:1100px){.includes-grid{grid-template-columns:1fr 1fr}}\n@media(max-width:600px){.includes-grid{grid-template-columns:1fr}}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<section class=\"includes\" id=\"que-incluye\">\n <div class=\"reveal\">\n <div class=\"section-tag\">Qu\u00e9 incluye<\/div>\n <h2 class=\"section-title\">TODO LO QUE <span>NECESITAS<\/span><\/h2>\n <p class=\"section-sub\">Cada proyecto es \u00fanico. Adaptamos cada servicio a tus necesidades y objetivos concretos.<\/p>\n <\/div>\n <div class=\"includes-grid\">\n\n <div class=\"include-card reveal\">\n <div class=\"include-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/><\/svg><\/div>\n <div class=\"include-title\">Dise\u00f1o de carta digital<\/div>\n <div class=\"include-desc\">Tu carta dise\u00f1ada con tu identidad visual: colores, tipograf\u00eda y fotos de tus platos. Una experiencia premium desde el m\u00f3vil.<\/div>\n <\/div>\n\n <div class=\"include-card reveal\">\n <div class=\"include-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z\"\/><\/svg><\/div>\n <div class=\"include-title\">QR para cada mesa<\/div>\n <div class=\"include-desc\">Stickers QR personalizados para cada mesa. Los clientes escanean y acceden a la carta en su m\u00f3vil en un segundo.<\/div>\n <\/div>\n\n <div class=\"include-card reveal\">\n <div class=\"include-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\/><\/svg><\/div>\n <div class=\"include-title\">Actualizaci\u00f3n en tiempo real<\/div>\n <div class=\"include-desc\">Cambia precios, a\u00f1ade platos del d\u00eda o elimina lo que se agot\u00f3 en segundos desde tu m\u00f3vil. Sin redesigns ni costes extra.<\/div>\n <\/div>\n\n <div class=\"include-card reveal\">\n <div class=\"include-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M4 6h16M4 12h8m-8 6h16\"\/><\/svg><\/div>\n <div class=\"include-title\">Categor\u00edas y filtros<\/div>\n <div class=\"include-desc\">Organiza tu carta por categor\u00edas (entrantes, principales, postres, bebidas) y a\u00f1ade filtros por al\u00e9rgenos, vegano o sin gluten.<\/div>\n <\/div>\n\n <div class=\"include-card reveal\">\n <div class=\"include-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z\"\/><\/svg><\/div>\n <div class=\"include-title\">Fotos de platos<\/div>\n <div class=\"include-desc\">Sube fotos de tus platos directamente o te asesoramos sobre fotograf\u00eda gastron\u00f3mica. Las fotos multiplican los pedidos.<\/div>\n <\/div>\n\n <div class=\"include-card reveal\">\n <div class=\"include-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z\"\/><\/svg><\/div>\n <div class=\"include-title\">Pedidos desde la mesa (opcional)<\/div>\n <div class=\"include-desc\">A\u00f1ade la opci\u00f3n de pedir directamente desde el m\u00f3vil. El pedido llega a cocina en tiempo real.<\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n<script src=\"shared.js\"><\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ed7bd08 elementor-widget elementor-widget-html\" data-id=\"ed7bd08\" 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>Proceso \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\n.proceso{padding:120px 5%;background:var(--carbon-mid)}\n.proceso-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;position:relative}\n.proceso-steps::before{content:'';position:absolute;top:28px;left:calc(12.5% + 24px);right:calc(12.5% + 24px);height:1px;background:linear-gradient(90deg,var(--orange),rgba(255,140,0,.2),var(--orange));z-index:0}\n.step{text-align:center;padding:0 24px;position:relative;z-index:1}\n.step-num{width:56px;height:56px;border-radius:50%;background:var(--carbon-surface);border:2px solid var(--orange);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--orange);margin:0 auto 24px;position:relative;z-index:1;transition:background .3s}\n.step:hover .step-num{background:rgba(255,140,0,.15)}\n.step-title{font-size:16px;font-weight:600;margin-bottom:10px}\n.step-desc{font-size:13px;color:var(--white-muted);line-height:1.6}\n@media(max-width:1100px){.proceso-steps{grid-template-columns:repeat(2,1fr);gap:40px}.proceso-steps::before{display:none}}\n@media(max-width:600px){.proceso-steps{grid-template-columns:1fr}}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<section class=\"proceso\" id=\"como-funciona\">\n <div class=\"reveal\">\n <div class=\"section-tag\">C\u00f3mo funciona<\/div>\n <h2 class=\"section-title\">EN <span>4 PASOS<\/span><\/h2>\n <p class=\"section-sub\">Un proceso claro, sin sorpresas y enfocado a resultados.<\/p>\n <\/div>\n <div class=\"proceso-steps\">\n <div class=\"step reveal\">\n <div class=\"step-num\">01<\/div>\n <div class=\"step-title\">Contenido de tu carta<\/div>\n <div class=\"step-desc\">Nos env\u00edas tu carta actual (PDF, foto o documento) y las fotos que tengas de los platos.<\/div>\n <\/div>\n <div class=\"step reveal\">\n <div class=\"step-num\">02<\/div>\n <div class=\"step-title\">Dise\u00f1o digital<\/div>\n <div class=\"step-desc\">Maquetamos tu carta digital con tu identidad visual. Te enviamos previsualizaci\u00f3n para aprobar.<\/div>\n <\/div>\n <div class=\"step reveal\">\n <div class=\"step-num\">03<\/div>\n <div class=\"step-title\">QR y stickers<\/div>\n <div class=\"step-desc\">Generamos los QR personalizados y producimos los stickers para las mesas.<\/div>\n <\/div>\n <div class=\"step reveal\">\n <div class=\"step-num\">04<\/div>\n <div class=\"step-title\">Activaci\u00f3n<\/div>\n <div class=\"step-desc\">Publicamos la carta y entregamos los stickers. Desde ese d\u00eda actualizas todo t\u00fa mismo.<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script src=\"shared.js\"><\/script>\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>Pricing \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\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\n PRICING SECTION\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 *\/\n.pricing { padding: 120px 5% 64px; background: var(--carbon); }\n\n\/* \u2500\u2500 Toggle mensual \/ anual \u2500\u2500 *\/\n.pricing-toggle {\n display: flex; align-items: center; justify-content: center;\n gap: 14px; margin-bottom: 64px;\n}\n.toggle-track {\n width: 56px; height: 28px; border-radius: 14px;\n background: #444; border: none; cursor: pointer;\n position: relative; transition: background .25s; flex-shrink: 0;\n}\n.toggle-track.annual { background: var(--orange); }\n.toggle-thumb {\n position: absolute; top: 3px; left: 3px;\n width: 22px; height: 22px; border-radius: 50%; background: #fff;\n transition: left .25s;\n}\n.toggle-track.annual .toggle-thumb { left: 31px; }\n.toggle-label { font-size: 14px; color: var(--steel-light); transition: color .2s; }\n.toggle-label.active { color: var(--white); font-weight: 500; }\n.toggle-badge {\n font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;\n padding: 4px 12px; border-radius: 20px;\n background: var(--orange); color: var(--carbon);\n}\n\n\/* \u2500\u2500 Plan cards grid \u2500\u2500 *\/\n.pricing-grid {\n display: grid; grid-template-columns: repeat(3, 1fr);\n gap: 24px; align-items: stretch;\n}\n\n\/* \u2500\u2500 Plan card \u2500\u2500 *\/\n.plan-card {\n background: var(--carbon-mid);\n border: 1px solid var(--carbon-border);\n border-radius: 20px; padding: 40px 36px;\n position: relative; overflow: hidden;\n transition: transform .3s, border-color .3s, box-shadow .3s;\n display: flex; flex-direction: column;\n}\n.plan-card:hover {\n transform: translateY(-6px);\n border-color: rgba(255,140,0,.3);\n box-shadow: 0 20px 60px rgba(0,0,0,.4);\n}\n.plan-card.featured {\n border-color: rgba(255,140,0,.4);\n background: var(--carbon-surface);\n border-width: 2px;\n}\n.plan-card.featured::before {\n content: ''; position: absolute;\n top: 0; left: 0; right: 0; height: 3px;\n background: linear-gradient(90deg, var(--orange), var(--orange-light));\n}\n.plan-badge {\n position: absolute; top: 20px; right: 20px;\n background: var(--orange); color: var(--carbon);\n font-size: 10px; font-weight: 700;\n letter-spacing: .08em; text-transform: uppercase;\n padding: 4px 12px; border-radius: 20px;\n}\n.plan-icon {\n width: 52px; height: 52px;\n background: rgba(255,140,0,.1);\n border: 1px solid rgba(255,140,0,.2);\n border-radius: 14px;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 24px;\n}\n.plan-icon svg { width: 24px; height: 24px; }\n.plan-name {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 32px; letter-spacing: .04em; margin-bottom: 8px;\n}\n.plan-desc {\n font-size: 14px; color: var(--white-muted);\n line-height: 1.6; font-weight: 300; margin-bottom: 28px;\n}\n\n\/* \u2500\u2500 Precio \u2500\u2500 *\/\n.plan-price {\n margin-bottom: 16px; padding-bottom: 24px;\n border-bottom: 1px solid var(--carbon-border);\n}\n.plan-price .amount-row { display: flex; align-items: baseline; gap: 4px; }\n.plan-price .amount {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 52px; color: var(--orange); line-height: 1; transition: all .2s;\n}\n.plan-price .period { font-size: 14px; color: var(--steel-light); }\n.plan-price .saving {\n font-size: 12px; color: var(--orange); font-weight: 600;\n opacity: 0; transition: opacity .25s;\n margin-top: 5px; min-height: 18px;\n font-family: 'Space Mono', monospace;\n}\n.plan-price .saving.show { opacity: 1; }\n.plan-price .setup { font-size: 12px; color: var(--steel); margin-top: 4px; display: block; }\n.plan-price .permanencia {\n font-size: 11px; color: var(--steel);\n margin-top: 6px; display: block; letter-spacing: .02em;\n}\n\n\/* \u2500\u2500 Features \u2500\u2500 *\/\n.plan-features {\n list-style: none; display: flex; flex-direction: column;\n gap: 12px; flex: 1; margin-bottom: 32px;\n}\n.plan-features li {\n display: flex; align-items: flex-start; gap: 10px;\n font-size: 14px; color: var(--white-muted); line-height: 1.5;\n}\n.plan-features li::before {\n content: '';\n width: 16px; height: 16px; border-radius: 50%;\n background: rgba(255,140,0,.15);\n border: 1px solid rgba(255,140,0,.3);\n flex-shrink: 0; margin-top: 2px;\n background-image: url(\"data:image\/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 10 10' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M1 5l3 3 5-5' stroke='%23FF8C00' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat; background-position: center;\n}\n.plan-features li .flags { display: flex; gap: 6px; align-items: center; }\n.plan-features li .flags .flag { font-size: 16px; line-height: 1; }\n.plan-features li .flags .sep { font-size: 11px; color: var(--steel); margin: 0 2px; }\n\n\/* \u2500\u2500 CTA planes \u2014 fijado al fondo de cada card \u2500\u2500 *\/\n.plan-cta {\n display: flex; align-items: center; justify-content: center; gap: 10px;\n padding: 14px 24px; border-radius: 10px;\n font-weight: 700; font-size: 14px; letter-spacing: .02em;\n text-decoration: none;\n transition: background .2s, transform .15s, box-shadow .2s;\n text-align: center;\n margin-top: auto; \/* empuja el bot\u00f3n al fondo *\/\n align-self: stretch; \/* mismo ancho en todos *\/\n}\n.plan-cta.primary { background: var(--orange); color: var(--carbon); }\n.plan-cta.primary:hover {\n background: var(--orange-deep);\n transform: translateY(-2px);\n box-shadow: 0 10px 30px rgba(255,140,0,.3);\n}\n.plan-cta.outline { background: transparent; color: var(--orange); border: 1.5px solid rgba(255,140,0,.4); }\n.plan-cta.outline:hover { background: rgba(255,140,0,.08); border-color: var(--orange); }\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\n ADD-ONS SECTION\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 *\/\n.addons { padding: 0 5% 120px; background: var(--carbon); }\n\n.addons-grid {\n display: grid; grid-template-columns: repeat(3, 1fr);\n gap: 20px; margin-top: 48px;\n}\n.addon-card {\n background: var(--carbon-mid);\n border: 1px solid var(--carbon-border);\n border-radius: 20px; padding: 28px 24px;\n display: flex; flex-direction: row; gap: 20px; align-items: flex-start;\n position: relative; overflow: hidden;\n transition: transform .3s, border-color .3s, box-shadow .3s;\n}\n.addon-card:hover {\n transform: translateY(-4px);\n border-color: rgba(255,140,0,.3);\n box-shadow: 0 20px 60px rgba(0,0,0,.4);\n}\n.addon-icon {\n width: 48px; height: 48px; flex-shrink: 0;\n background: rgba(255,140,0,.1);\n border: 1px solid rgba(255,140,0,.2);\n border-radius: 14px;\n display: flex; align-items: center; justify-content: center;\n}\n.addon-icon svg { width: 22px; height: 22px; }\n\n.addon-body { display: flex; flex-direction: column; flex: 1; }\n.addon-name { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 6px; }\n.addon-desc {\n font-size: 13px; color: var(--white-muted);\n line-height: 1.55; margin-bottom: 14px; font-weight: 300;\n}\n\n.addon-langs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }\n.addon-lang-pill {\n display: flex; align-items: center; gap: 4px;\n font-size: 11px; color: var(--white-muted);\n background: var(--carbon-surface);\n border: 1px solid var(--carbon-border);\n border-radius: 20px; padding: 3px 10px;\n}\n.addon-lang-pill .flag { font-size: 13px; line-height: 1; }\n\n.addon-bottom {\n display: flex; align-items: center; justify-content: space-between;\n gap: 12px; margin-top: auto;\n padding-top: 14px; border-top: 1px solid var(--carbon-border);\n}\n.addon-price {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 24px; color: var(--orange); line-height: 1;\n}\n.addon-price-note { font-size: 11px; color: var(--steel); margin-top: 2px; }\n\n.addon-cta {\n white-space: nowrap; text-align: center;\n padding: 9px 18px; border-radius: 10px;\n font-size: 13px; font-weight: 700; text-decoration: none; flex-shrink: 0;\n transition: background .2s, border-color .2s;\n background: transparent; color: var(--orange);\n border: 1.5px solid rgba(255,140,0,.4);\n}\n.addon-cta:hover { background: rgba(255,140,0,.08); border-color: var(--orange); }\n.addon-cta.consult { color: var(--steel-light); border-color: var(--carbon-border); }\n.addon-cta.consult:hover { color: var(--orange); border-color: rgba(255,140,0,.4); }\n\n.addon-badge {\n position: absolute; top: 16px; right: 16px;\n font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;\n padding: 3px 10px; border-radius: 20px;\n background: rgba(255,140,0,.1); color: var(--orange);\n border: 1px solid rgba(255,140,0,.2);\n}\n\n\/* \u2500\u2500 Footer global (debajo de addons) \u2500\u2500 *\/\n.pricing-footer {\n margin-top: 48px; text-align: center;\n display: flex; flex-direction: column; gap: 8px;\n}\n.pricing-note {\n font-size: 13px; color: var(--steel);\n font-family: 'Space Mono', monospace;\n}\n.pricing-note a { color: var(--orange); text-decoration: none; }\n.pricing-note a:hover { text-decoration: underline; }\n.pricing-iva {\n font-size: 11px; color: var(--steel);\n letter-spacing: .04em; font-family: 'Space Mono', monospace;\n}\n\n\/* \u2500\u2500 Responsive \u2500\u2500 *\/\n@media(max-width: 1100px) {\n .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }\n .addons-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }\n}\n@media(max-width: 600px) {\n .pricing-toggle { flex-wrap: wrap; gap: 10px; }\n .addon-card { flex-direction: column; }\n}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n\n<section class=\"pricing\" id=\"planes\">\n <div class=\"reveal\">\n <div class=\"section-tag\">Precios<\/div>\n <h2 class=\"section-title\">ELIGE TU <span>PLAN<\/span><\/h2>\n <p class=\"section-sub\">Precios transparentes adaptados a cada tipo de negocio.<\/p>\n <\/div>\n\n \n <div class=\"pricing-toggle reveal\">\n <span class=\"toggle-label active\" id=\"lbl-monthly\">Mensual<\/span>\n <button class=\"toggle-track\" id=\"toggle\" onclick=\"toggleBilling()\" aria-label=\"Cambiar facturaci\u00f3n\">\n <div class=\"toggle-thumb\"><\/div>\n <\/button>\n <span class=\"toggle-label\" id=\"lbl-annual\">Anual<\/span>\n <span class=\"toggle-badge\">Ahorra con el plan anual<\/span>\n <\/div>\n\n <div class=\"pricing-grid\">\n\n \n <div class=\"plan-card reveal\">\n <div class=\"plan-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/>\n <polyline points=\"9 22 9 12 15 12 15 22\"\/>\n <\/svg>\n <\/div>\n <div class=\"plan-name\">Local Estable<\/div>\n <div class=\"plan-desc\">Tu negocio, siempre accesible. La forma m\u00e1s r\u00e1pida de tener una carta digital profesional con identidad propia.<\/div>\n <div class=\"plan-price\">\n <div class=\"amount-row\">\n <span class=\"amount\" id=\"p0\">34,90<\/span>\n <span class=\"period\" id=\"per0\">\u20ac\/mes<\/span>\n <\/div>\n <div class=\"saving\" id=\"s0\"><\/div>\n <span class=\"setup\">+ 199\u20ac pago inicial \u00fanico<\/span>\n <span class=\"permanencia\">Permanencia m\u00ednima 12 meses<\/span>\n <\/div>\n <ul class=\"plan-features\">\n <li>Hasta 50 art\u00edculos<\/li>\n <li>3 categor\u00edas<\/li>\n <li>BioLink NFC con dise\u00f1o de tu marca<\/li>\n <li>QR para hasta 10 mesas<\/li>\n <li>6 actualizaciones al a\u00f1o<\/li>\n <\/ul>\n \n <a href=\"XXXX\" class=\"plan-cta outline\" id=\"cta0\" target=\"_blank\" rel=\"noopener\">Quiero este plan<\/a>\n <\/div>\n\n \n <div class=\"plan-card featured reveal\">\n <div class=\"plan-badge\">M\u00e1s popular<\/div>\n <div class=\"plan-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>\n <\/svg>\n <\/div>\n <div class=\"plan-name\">Local Activo<\/div>\n <div class=\"plan-desc\">Sin l\u00edmites, sin complicaciones. Carta completa con NFC, filtros y una presencia digital que enamora al cliente.<\/div>\n <div class=\"plan-price\">\n <div class=\"amount-row\">\n <span class=\"amount\" id=\"p1\">39,90<\/span>\n <span class=\"period\" id=\"per1\">\u20ac\/mes<\/span>\n <\/div>\n <div class=\"saving\" id=\"s1\"><\/div>\n <span class=\"setup\">+ 249\u20ac pago inicial \u00fanico<\/span>\n <span class=\"permanencia\">Permanencia m\u00ednima 12 meses<\/span>\n <\/div>\n <ul class=\"plan-features\">\n <li>Art\u00edculos ilimitados<\/li>\n <li>Categor\u00edas ilimitadas<\/li>\n <li>BioLink NFC con dise\u00f1o de tu marca<\/li>\n <li>1 tarjeta TapMe NFC incluida<\/li>\n <li>25 etiquetas QR & NFC incluidas<\/li>\n <li>Filtros: al\u00e9rgenos, vegano, sin gluten<\/li>\n <li>Actualizaciones ilimitadas<\/li>\n <\/ul>\n \n <a href=\"XXXX\" class=\"plan-cta primary\" id=\"cta1\" target=\"_blank\" rel=\"noopener\">Quiero este plan<\/a>\n <\/div>\n\n \n <div class=\"plan-card reveal\">\n <div class=\"plan-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/>\n <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/>\n <\/svg>\n <\/div>\n <div class=\"plan-name\">Local Internacional<\/div>\n <div class=\"plan-desc\">Habla el idioma de tus clientes. Todo lo del plan Activo m\u00e1s tu carta en espa\u00f1ol e ingl\u00e9s para captar al turista desde el primer vistazo.<\/div>\n <div class=\"plan-price\">\n <div class=\"amount-row\">\n <span class=\"amount\" id=\"p2\">49,90<\/span>\n <span class=\"period\" id=\"per2\">\u20ac\/mes<\/span>\n <\/div>\n <div class=\"saving\" id=\"s2\"><\/div>\n <span class=\"setup\">+ 349\u20ac pago inicial \u00fanico<\/span>\n <span class=\"permanencia\">Permanencia m\u00ednima 12 meses<\/span>\n <\/div>\n <ul class=\"plan-features\">\n <li>Todo el plan Local Activo<\/li>\n <li>\n <div class=\"flags\">\n <span class=\"flag\">\ud83c\uddea\ud83c\uddf8<\/span> Espa\u00f1ol\n <span class=\"sep\">+<\/span>\n <span class=\"flag\">\ud83c\uddec\ud83c\udde7<\/span> Ingl\u00e9s\n <\/div>\n <\/li>\n <\/ul>\n \n <a href=\"XXXX\" class=\"plan-cta outline\" id=\"cta2\" target=\"_blank\" rel=\"noopener\">Quiero este plan<\/a>\n <\/div>\n\n <\/div>\n<\/section>\n\n\n<section class=\"addons\" id=\"addons\">\n <div class=\"reveal\">\n <div class=\"section-tag\">Add-ons<\/div>\n <h2 class=\"section-title\">AMPL\u00cdA TU <span>PLAN<\/span><\/h2>\n <p class=\"section-sub\">Complementos opcionales para llevar tu carta al siguiente nivel.<\/p>\n <\/div>\n\n <div class=\"addons-grid\">\n\n \n <div class=\"addon-card reveal\">\n <div class=\"addon-badge\">Por idioma<\/div>\n <div class=\"addon-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 8l6 6\"\/>\n <path d=\"M4 14l6-6 2-3\"\/>\n <path d=\"M2 5h12\"\/>\n <path d=\"M7 2h1\"\/>\n <path d=\"M22 22l-5-10-5 10\"\/>\n <path d=\"M14 18h6\"\/>\n <\/svg>\n <\/div>\n <div class=\"addon-body\">\n <div class=\"addon-name\">Idioma extra<\/div>\n <div class=\"addon-desc\">Traducci\u00f3n nativa de tu carta completa, revisada por hablantes nativos. Nada que suene a m\u00e1quina.<\/div>\n <div class=\"addon-langs\">\n <div class=\"addon-lang-pill\"><span class=\"flag\">\ud83c\udde9\ud83c\uddea<\/span> Alem\u00e1n<\/div>\n <div class=\"addon-lang-pill\"><span class=\"flag\">\ud83c\uddeb\ud83c\uddf7<\/span> Franc\u00e9s<\/div>\n <div class=\"addon-lang-pill\"><span class=\"flag\">\ud83c\uddf8\ud83c\uddea<\/span> Sueco<\/div>\n <div class=\"addon-lang-pill\"><span class=\"flag\">\ud83c\udde9\ud83c\uddf0<\/span> Dan\u00e9s<\/div>\n <\/div>\n <div class=\"addon-bottom\">\n <div>\n <div class=\"addon-price\">199,90\u20ac<\/div>\n <div class=\"addon-price-note\">Pago \u00fanico \u00b7 por idioma<\/div>\n <\/div>\n \n <a href=\"XXXX\" class=\"addon-cta\" target=\"_blank\" rel=\"noopener\">A\u00f1adir<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"addon-card reveal\">\n <div class=\"addon-badge\">30 uds.<\/div>\n <div class=\"addon-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 8.32a7.43 7.43 0 0 1 0 7.36\"\/>\n <path d=\"M9.46 6.21a11.76 11.76 0 0 1 0 11.58\"\/>\n <path d=\"M12.91 4.1a15.91 15.91 0 0 1 .01 15.8\"\/>\n <circle cx=\"19\" cy=\"12\" r=\"2\" fill=\"rgba(255,140,0,.15)\"\/>\n <line x1=\"21\" y1=\"12\" x2=\"22\" y2=\"12\"\/>\n <\/svg>\n <\/div>\n <div class=\"addon-body\">\n <div class=\"addon-name\">Etiquetas QR & NFC de mesa<\/div>\n <div class=\"addon-desc\">Pack de 30 etiquetas f\u00edsicas resistentes e impermeables con el dise\u00f1o de tu marca. Listas para pegar y usar.<\/div>\n <div class=\"addon-bottom\">\n <div>\n <div class=\"addon-price\">59,90\u20ac<\/div>\n <div class=\"addon-price-note\">Pago \u00fanico \u00b7 30 unidades<\/div>\n <\/div>\n \n <a href=\"XXXX\" class=\"addon-cta\" target=\"_blank\" rel=\"noopener\">A\u00f1adir<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"addon-card reveal\">\n <div class=\"addon-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z\"\/>\n <circle cx=\"12\" cy=\"13\" r=\"3\"\/>\n <\/svg>\n <\/div>\n <div class=\"addon-body\">\n <div class=\"addon-name\">Sesi\u00f3n de fotos de platos<\/div>\n <div class=\"addon-desc\">Fotograf\u00eda profesional de tu carta completa. Im\u00e1genes que despiertan el apetito y disparan las conversiones.<\/div>\n <div class=\"addon-bottom\">\n <div>\n <div class=\"addon-price\" style=\"font-family:'Outfit',sans-serif; font-size:17px; padding-top:3px; font-weight:600;\">A consultar<\/div>\n <div class=\"addon-price-note\">Presupuesto personalizado<\/div>\n <\/div>\n <a href=\"#contacto\" class=\"addon-cta consult\">Consultar<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"pricing-footer reveal\">\n <p class=\"pricing-note\">\u00bfNecesitas algo diferente? <a href=\"#contacto\">Cu\u00e9ntanos tu caso<\/a> y hacemos una propuesta a tu medida.<\/p>\n <p class=\"pricing-iva\">Todos los precios indicados no incluyen IVA.<\/p>\n <\/div>\n\n<\/section>\n\n<script src=\"shared.js\"><\/script>\n<script>\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PRICING TOGGLE \u2014 MENSUAL \/ ANUAL\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Sustituye los XXXX por las URLs reales de tu pasarela.\n Hay una URL por plan y modalidad (mensual \/ anual).\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst plans = [\n {\n monthly: 34.90, annual: 349.90, setup: 199,\n urlMonthly: 'XXXX', \/* URL pasarela LOCAL ESTABLE \u2014 mensual *\/\n urlAnnual: 'XXXX' \/* URL pasarela LOCAL ESTABLE \u2014 anual *\/\n },\n {\n monthly: 39.90, annual: 419.90, setup: 249,\n urlMonthly: 'XXXX', \/* URL pasarela LOCAL ACTIVO \u2014 mensual *\/\n urlAnnual: 'XXXX' \/* URL pasarela LOCAL ACTIVO \u2014 anual *\/\n },\n {\n monthly: 49.90, annual: 479.90, setup: 349,\n urlMonthly: 'XXXX', \/* URL pasarela LOCAL INTERNACIONAL \u2014 mensual *\/\n urlAnnual: 'XXXX' \/* URL pasarela LOCAL INTERNACIONAL \u2014 anual *\/\n }\n];\n\nlet isAnnual = false;\n\nfunction fmt(n) {\n return n.toFixed(2).replace('.', ',');\n}\n\nfunction toggleBilling() {\n isAnnual = !isAnnual;\n\n const track = document.getElementById('toggle');\n const lblM = document.getElementById('lbl-monthly');\n const lblA = document.getElementById('lbl-annual');\n\n track.classList.toggle('annual', isAnnual);\n lblM.classList.toggle('active', !isAnnual);\n lblA.classList.toggle('active', isAnnual);\n\n plans.forEach((plan, i) => {\n const price = isAnnual ? plan.annual : plan.monthly;\n const period = isAnnual ? '\u20ac\/a\u00f1o' : '\u20ac\/mes';\n const url = isAnnual ? plan.urlAnnual : plan.urlMonthly;\n\n document.getElementById('p' + i).textContent = fmt(price);\n document.getElementById('per' + i).textContent = period;\n document.getElementById('cta' + i).href = url;\n\n const sEl = document.getElementById('s' + i);\n if (isAnnual) {\n const saving = (plan.monthly * 12) - plan.annual;\n sEl.textContent = '\u2726 Ahorras ' + fmt(saving) + '\u20ac al a\u00f1o';\n sEl.classList.add('show');\n } else {\n sEl.textContent = '';\n sEl.classList.remove('show');\n }\n });\n}\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff52aec elementor-widget elementor-widget-html\" data-id=\"ff52aec\" 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>FAQ \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\n.faq{padding:120px 5%;background:var(--carbon-mid)}\n.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}\n.faq-item{background:var(--carbon-surface);border:1px solid var(--carbon-border);border-radius:14px;padding:28px 32px;transition:border-color .3s}\n.faq-item:hover{border-color:rgba(255,140,0,.25)}\n.faq-q{font-size:16px;font-weight:600;margin-bottom:12px;line-height:1.4}\n.faq-a{font-size:14px;color:var(--white-muted);line-height:1.65;font-weight:300}\n@media(max-width:1100px){.faq-grid{grid-template-columns:1fr}}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<section class=\"faq\" id=\"faq\">\n <div class=\"reveal\">\n <div class=\"section-tag\">FAQ<\/div>\n <h2 class=\"section-title\">PREGUNTAS <span>FRECUENTES<\/span><\/h2>\n <\/div>\n <div class=\"faq-grid\">\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfNecesitan los clientes descargarse una app?<\/div>\n <div class=\"faq-a\">No. Simplemente escanean el QR con la c\u00e1mara de su m\u00f3vil y la carta se abre en el navegador. Sin apps, sin registros.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfY si no tienen QR, pueden acceder igual?<\/div>\n <div class=\"faq-a\">S\u00ed. La carta tambi\u00e9n tiene URL propia que puedes compartir en redes, Google Maps, TripAdvisor o tu web.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfPuedo tener la carta en varios idiomas?<\/div>\n <div class=\"faq-a\">El plan Premium incluye multi-idioma. Disponible en espa\u00f1ol, ingl\u00e9s y alem\u00e1n por defecto, con m\u00e1s idiomas bajo petici\u00f3n.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfCu\u00e1nto tarda en estar lista?<\/div>\n <div class=\"faq-a\">En 5-7 d\u00edas h\u00e1biles desde que nos env\u00edas el contenido de tu carta. Los stickers QR llegan en 3-5 d\u00edas adicionales.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfPuedo cambiar precios yo mismo?<\/div>\n <div class=\"faq-a\">S\u00ed. Tienes un panel de gesti\u00f3n sencillo donde puedes cambiar precios, disponibilidad, a\u00f1adir platos del d\u00eda o activar\/desactivar platos en segundos.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfEl sistema de pedidos llega a cocina autom\u00e1ticamente?<\/div>\n <div class=\"faq-a\">S\u00ed. Los pedidos llegan directamente a una pantalla en cocina o a una tablet. Tambi\u00e9n puedes recibir una notificaci\u00f3n en tu m\u00f3vil.<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script src=\"shared.js\"><\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1ab909 elementor-widget elementor-widget-html\" data-id=\"c1ab909\" 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 \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\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<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>\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-210","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/210","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=210"}],"version-history":[{"count":15,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/210\/revisions"}],"predecessor-version":[{"id":351,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/210\/revisions\/351"}],"wp:attachment":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/media?parent=210"}],"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>Hero \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\n.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:160px 5% 100px;position:relative;overflow:hidden}\n.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 75% 50%,rgba(255,140,0,.07) 0%,transparent 65%),radial-gradient(ellipse 40% 40% at 15% 60%,rgba(107,122,144,.05) 0%,transparent 65%)}\n.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at 30% 50%,black 20%,transparent 75%)}\n.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-light);background:rgba(255,140,0,.08);border:1px solid rgba(255,140,0,.2);padding:6px 16px;border-radius:100px;width:fit-content;margin-bottom:32px;animation:fadeUp .7s ease both}\n.hero-eyebrow::before{content:'';width:6px;height:6px;background:var(--orange);border-radius:50%;animation:pulse 2s infinite}\n.hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(64px,9vw,128px);line-height:.92;letter-spacing:-.01em;margin-bottom:28px;animation:fadeUp .7s .1s ease both}\n.hero-title .accent{color:var(--orange)}\n.hero-title .dim{color:rgba(255,255,255,.12)}\n.hero-sub{font-size:19px;color:var(--white-muted);max-width:560px;line-height:1.65;font-weight:300;margin-bottom:48px;animation:fadeUp .7s .2s ease both}\n.hero-actions{display:flex;gap:16px;align-items:center;animation:fadeUp .7s .3s ease both;flex-wrap:wrap}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<section class=\"hero\">\n <div class=\"hero-bg\"><\/div>\n <div class=\"hero-grid\"><\/div>\n <div class=\"hero-eyebrow\">Servicio 08 \u00b7 Cartas Digitales<\/div>\n <h1 class=\"hero-title\">TU MEN\u00da<br><span class=\"accent\">SIEMPRE AL D\u00cdA.<\/span><br><span class=\"dim\">QR.<\/span><\/h1>\n <p class=\"hero-sub\">Men\u00fas digitales QR y NFC para hosteler\u00eda. Actualizaci\u00f3n en tiempo real, sin impresi\u00f3n, con dise\u00f1o de marca y opci\u00f3n de pedir directamente desde la mesa.<\/p>\n <div class=\"hero-actions\">\n <a href=\"#planes\" class=\"btn-primary\">Ver planes <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n <a href=\"#que-incluye\" class=\"btn-outline\">Qu\u00e9 incluye <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n <\/div>\n<\/section>\n\n<script src=\"shared.js\"><\/script>\n<\/body>\n<\/html>\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>Stats Bar \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\n.stats-bar{background:var(--carbon-mid);border-top:1px solid var(--carbon-border);border-bottom:1px solid var(--carbon-border);padding:40px 5%;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}\n.stat{text-align:center}\n.stat-num{font-family:'Bebas Neue',sans-serif;font-size:48px;color:var(--orange);line-height:1}\n.stat-label{font-size:12px;color:var(--white-muted);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}\n@media(max-width:1100px){.stats-bar{grid-template-columns:repeat(2,1fr)}}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<div class=\"stats-bar\">\n <div class=\"stat reveal\"><div class=\"stat-num\">0\u20ac<\/div><div class=\"stat-label\">Coste de impresi\u00f3n<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"stat-num\">5min<\/div><div class=\"stat-label\">Para actualizar precios<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"stat-num\">QR + NFC<\/div><div class=\"stat-label\">Acceso sin contacto<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"stat-num\">+28%<\/div><div class=\"stat-label\">M\u00e1s pedidos con fotos<\/div><\/div>\n<\/div>\n\n<script src=\"shared.js\"><\/script>\n<\/body>\n<\/html>\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>Qu\u00e9 Incluye \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\n.includes{padding:120px 5%;background:var(--carbon)}\n.includes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:64px;background:var(--carbon-border);border:1px solid var(--carbon-border);border-radius:16px;overflow:hidden}\n.include-card{background:var(--carbon-mid);padding:36px 32px;transition:background .3s;position:relative;overflow:hidden}\n.include-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,140,0,.05) 0%,transparent 60%);opacity:0;transition:opacity .3s}\n.include-card:hover{background:var(--carbon-surface)}\n.include-card:hover::before{opacity:1}\n.include-icon{width:48px;height:48px;background:rgba(255,140,0,.1);border:1px solid rgba(255,140,0,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:background .3s,border-color .3s}\n.include-card:hover .include-icon{background:rgba(255,140,0,.18);border-color:rgba(255,140,0,.4)}\n.include-icon svg{width:22px;height:22px}\n.include-title{font-size:17px;font-weight:600;margin-bottom:10px}\n.include-desc{font-size:14px;color:var(--white-muted);line-height:1.65;font-weight:300}\n@media(max-width:1100px){.includes-grid{grid-template-columns:1fr 1fr}}\n@media(max-width:600px){.includes-grid{grid-template-columns:1fr}}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<section class=\"includes\" id=\"que-incluye\">\n <div class=\"reveal\">\n <div class=\"section-tag\">Qu\u00e9 incluye<\/div>\n <h2 class=\"section-title\">TODO LO QUE <span>NECESITAS<\/span><\/h2>\n <p class=\"section-sub\">Cada proyecto es \u00fanico. Adaptamos cada servicio a tus necesidades y objetivos concretos.<\/p>\n <\/div>\n <div class=\"includes-grid\">\n\n <div class=\"include-card reveal\">\n <div class=\"include-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/><\/svg><\/div>\n <div class=\"include-title\">Dise\u00f1o de carta digital<\/div>\n <div class=\"include-desc\">Tu carta dise\u00f1ada con tu identidad visual: colores, tipograf\u00eda y fotos de tus platos. Una experiencia premium desde el m\u00f3vil.<\/div>\n <\/div>\n\n <div class=\"include-card reveal\">\n <div class=\"include-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z\"\/><\/svg><\/div>\n <div class=\"include-title\">QR para cada mesa<\/div>\n <div class=\"include-desc\">Stickers QR personalizados para cada mesa. Los clientes escanean y acceden a la carta en su m\u00f3vil en un segundo.<\/div>\n <\/div>\n\n <div class=\"include-card reveal\">\n <div class=\"include-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\/><\/svg><\/div>\n <div class=\"include-title\">Actualizaci\u00f3n en tiempo real<\/div>\n <div class=\"include-desc\">Cambia precios, a\u00f1ade platos del d\u00eda o elimina lo que se agot\u00f3 en segundos desde tu m\u00f3vil. Sin redesigns ni costes extra.<\/div>\n <\/div>\n\n <div class=\"include-card reveal\">\n <div class=\"include-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M4 6h16M4 12h8m-8 6h16\"\/><\/svg><\/div>\n <div class=\"include-title\">Categor\u00edas y filtros<\/div>\n <div class=\"include-desc\">Organiza tu carta por categor\u00edas (entrantes, principales, postres, bebidas) y a\u00f1ade filtros por al\u00e9rgenos, vegano o sin gluten.<\/div>\n <\/div>\n\n <div class=\"include-card reveal\">\n <div class=\"include-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z\"\/><\/svg><\/div>\n <div class=\"include-title\">Fotos de platos<\/div>\n <div class=\"include-desc\">Sube fotos de tus platos directamente o te asesoramos sobre fotograf\u00eda gastron\u00f3mica. Las fotos multiplican los pedidos.<\/div>\n <\/div>\n\n <div class=\"include-card reveal\">\n <div class=\"include-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><path d=\"M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z\"\/><\/svg><\/div>\n <div class=\"include-title\">Pedidos desde la mesa (opcional)<\/div>\n <div class=\"include-desc\">A\u00f1ade la opci\u00f3n de pedir directamente desde el m\u00f3vil. El pedido llega a cocina en tiempo real.<\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n<script src=\"shared.js\"><\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ed7bd08 elementor-widget elementor-widget-html\" data-id=\"ed7bd08\" 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>Proceso \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\n.proceso{padding:120px 5%;background:var(--carbon-mid)}\n.proceso-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;position:relative}\n.proceso-steps::before{content:'';position:absolute;top:28px;left:calc(12.5% + 24px);right:calc(12.5% + 24px);height:1px;background:linear-gradient(90deg,var(--orange),rgba(255,140,0,.2),var(--orange));z-index:0}\n.step{text-align:center;padding:0 24px;position:relative;z-index:1}\n.step-num{width:56px;height:56px;border-radius:50%;background:var(--carbon-surface);border:2px solid var(--orange);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--orange);margin:0 auto 24px;position:relative;z-index:1;transition:background .3s}\n.step:hover .step-num{background:rgba(255,140,0,.15)}\n.step-title{font-size:16px;font-weight:600;margin-bottom:10px}\n.step-desc{font-size:13px;color:var(--white-muted);line-height:1.6}\n@media(max-width:1100px){.proceso-steps{grid-template-columns:repeat(2,1fr);gap:40px}.proceso-steps::before{display:none}}\n@media(max-width:600px){.proceso-steps{grid-template-columns:1fr}}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<section class=\"proceso\" id=\"como-funciona\">\n <div class=\"reveal\">\n <div class=\"section-tag\">C\u00f3mo funciona<\/div>\n <h2 class=\"section-title\">EN <span>4 PASOS<\/span><\/h2>\n <p class=\"section-sub\">Un proceso claro, sin sorpresas y enfocado a resultados.<\/p>\n <\/div>\n <div class=\"proceso-steps\">\n <div class=\"step reveal\">\n <div class=\"step-num\">01<\/div>\n <div class=\"step-title\">Contenido de tu carta<\/div>\n <div class=\"step-desc\">Nos env\u00edas tu carta actual (PDF, foto o documento) y las fotos que tengas de los platos.<\/div>\n <\/div>\n <div class=\"step reveal\">\n <div class=\"step-num\">02<\/div>\n <div class=\"step-title\">Dise\u00f1o digital<\/div>\n <div class=\"step-desc\">Maquetamos tu carta digital con tu identidad visual. Te enviamos previsualizaci\u00f3n para aprobar.<\/div>\n <\/div>\n <div class=\"step reveal\">\n <div class=\"step-num\">03<\/div>\n <div class=\"step-title\">QR y stickers<\/div>\n <div class=\"step-desc\">Generamos los QR personalizados y producimos los stickers para las mesas.<\/div>\n <\/div>\n <div class=\"step reveal\">\n <div class=\"step-num\">04<\/div>\n <div class=\"step-title\">Activaci\u00f3n<\/div>\n <div class=\"step-desc\">Publicamos la carta y entregamos los stickers. Desde ese d\u00eda actualizas todo t\u00fa mismo.<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script src=\"shared.js\"><\/script>\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>Pricing \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\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\n PRICING SECTION\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 *\/\n.pricing { padding: 120px 5% 64px; background: var(--carbon); }\n\n\/* \u2500\u2500 Toggle mensual \/ anual \u2500\u2500 *\/\n.pricing-toggle {\n display: flex; align-items: center; justify-content: center;\n gap: 14px; margin-bottom: 64px;\n}\n.toggle-track {\n width: 56px; height: 28px; border-radius: 14px;\n background: #444; border: none; cursor: pointer;\n position: relative; transition: background .25s; flex-shrink: 0;\n}\n.toggle-track.annual { background: var(--orange); }\n.toggle-thumb {\n position: absolute; top: 3px; left: 3px;\n width: 22px; height: 22px; border-radius: 50%; background: #fff;\n transition: left .25s;\n}\n.toggle-track.annual .toggle-thumb { left: 31px; }\n.toggle-label { font-size: 14px; color: var(--steel-light); transition: color .2s; }\n.toggle-label.active { color: var(--white); font-weight: 500; }\n.toggle-badge {\n font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;\n padding: 4px 12px; border-radius: 20px;\n background: var(--orange); color: var(--carbon);\n}\n\n\/* \u2500\u2500 Plan cards grid \u2500\u2500 *\/\n.pricing-grid {\n display: grid; grid-template-columns: repeat(3, 1fr);\n gap: 24px; align-items: stretch;\n}\n\n\/* \u2500\u2500 Plan card \u2500\u2500 *\/\n.plan-card {\n background: var(--carbon-mid);\n border: 1px solid var(--carbon-border);\n border-radius: 20px; padding: 40px 36px;\n position: relative; overflow: hidden;\n transition: transform .3s, border-color .3s, box-shadow .3s;\n display: flex; flex-direction: column;\n}\n.plan-card:hover {\n transform: translateY(-6px);\n border-color: rgba(255,140,0,.3);\n box-shadow: 0 20px 60px rgba(0,0,0,.4);\n}\n.plan-card.featured {\n border-color: rgba(255,140,0,.4);\n background: var(--carbon-surface);\n border-width: 2px;\n}\n.plan-card.featured::before {\n content: ''; position: absolute;\n top: 0; left: 0; right: 0; height: 3px;\n background: linear-gradient(90deg, var(--orange), var(--orange-light));\n}\n.plan-badge {\n position: absolute; top: 20px; right: 20px;\n background: var(--orange); color: var(--carbon);\n font-size: 10px; font-weight: 700;\n letter-spacing: .08em; text-transform: uppercase;\n padding: 4px 12px; border-radius: 20px;\n}\n.plan-icon {\n width: 52px; height: 52px;\n background: rgba(255,140,0,.1);\n border: 1px solid rgba(255,140,0,.2);\n border-radius: 14px;\n display: flex; align-items: center; justify-content: center;\n margin-bottom: 24px;\n}\n.plan-icon svg { width: 24px; height: 24px; }\n.plan-name {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 32px; letter-spacing: .04em; margin-bottom: 8px;\n}\n.plan-desc {\n font-size: 14px; color: var(--white-muted);\n line-height: 1.6; font-weight: 300; margin-bottom: 28px;\n}\n\n\/* \u2500\u2500 Precio \u2500\u2500 *\/\n.plan-price {\n margin-bottom: 16px; padding-bottom: 24px;\n border-bottom: 1px solid var(--carbon-border);\n}\n.plan-price .amount-row { display: flex; align-items: baseline; gap: 4px; }\n.plan-price .amount {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 52px; color: var(--orange); line-height: 1; transition: all .2s;\n}\n.plan-price .period { font-size: 14px; color: var(--steel-light); }\n.plan-price .saving {\n font-size: 12px; color: var(--orange); font-weight: 600;\n opacity: 0; transition: opacity .25s;\n margin-top: 5px; min-height: 18px;\n font-family: 'Space Mono', monospace;\n}\n.plan-price .saving.show { opacity: 1; }\n.plan-price .setup { font-size: 12px; color: var(--steel); margin-top: 4px; display: block; }\n.plan-price .permanencia {\n font-size: 11px; color: var(--steel);\n margin-top: 6px; display: block; letter-spacing: .02em;\n}\n\n\/* \u2500\u2500 Features \u2500\u2500 *\/\n.plan-features {\n list-style: none; display: flex; flex-direction: column;\n gap: 12px; flex: 1; margin-bottom: 32px;\n}\n.plan-features li {\n display: flex; align-items: flex-start; gap: 10px;\n font-size: 14px; color: var(--white-muted); line-height: 1.5;\n}\n.plan-features li::before {\n content: '';\n width: 16px; height: 16px; border-radius: 50%;\n background: rgba(255,140,0,.15);\n border: 1px solid rgba(255,140,0,.3);\n flex-shrink: 0; margin-top: 2px;\n background-image: url(\"data:image\/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 10 10' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M1 5l3 3 5-5' stroke='%23FF8C00' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat; background-position: center;\n}\n.plan-features li .flags { display: flex; gap: 6px; align-items: center; }\n.plan-features li .flags .flag { font-size: 16px; line-height: 1; }\n.plan-features li .flags .sep { font-size: 11px; color: var(--steel); margin: 0 2px; }\n\n\/* \u2500\u2500 CTA planes \u2014 fijado al fondo de cada card \u2500\u2500 *\/\n.plan-cta {\n display: flex; align-items: center; justify-content: center; gap: 10px;\n padding: 14px 24px; border-radius: 10px;\n font-weight: 700; font-size: 14px; letter-spacing: .02em;\n text-decoration: none;\n transition: background .2s, transform .15s, box-shadow .2s;\n text-align: center;\n margin-top: auto; \/* empuja el bot\u00f3n al fondo *\/\n align-self: stretch; \/* mismo ancho en todos *\/\n}\n.plan-cta.primary { background: var(--orange); color: var(--carbon); }\n.plan-cta.primary:hover {\n background: var(--orange-deep);\n transform: translateY(-2px);\n box-shadow: 0 10px 30px rgba(255,140,0,.3);\n}\n.plan-cta.outline { background: transparent; color: var(--orange); border: 1.5px solid rgba(255,140,0,.4); }\n.plan-cta.outline:hover { background: rgba(255,140,0,.08); border-color: var(--orange); }\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\n ADD-ONS SECTION\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 *\/\n.addons { padding: 0 5% 120px; background: var(--carbon); }\n\n.addons-grid {\n display: grid; grid-template-columns: repeat(3, 1fr);\n gap: 20px; margin-top: 48px;\n}\n.addon-card {\n background: var(--carbon-mid);\n border: 1px solid var(--carbon-border);\n border-radius: 20px; padding: 28px 24px;\n display: flex; flex-direction: row; gap: 20px; align-items: flex-start;\n position: relative; overflow: hidden;\n transition: transform .3s, border-color .3s, box-shadow .3s;\n}\n.addon-card:hover {\n transform: translateY(-4px);\n border-color: rgba(255,140,0,.3);\n box-shadow: 0 20px 60px rgba(0,0,0,.4);\n}\n.addon-icon {\n width: 48px; height: 48px; flex-shrink: 0;\n background: rgba(255,140,0,.1);\n border: 1px solid rgba(255,140,0,.2);\n border-radius: 14px;\n display: flex; align-items: center; justify-content: center;\n}\n.addon-icon svg { width: 22px; height: 22px; }\n\n.addon-body { display: flex; flex-direction: column; flex: 1; }\n.addon-name { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 6px; }\n.addon-desc {\n font-size: 13px; color: var(--white-muted);\n line-height: 1.55; margin-bottom: 14px; font-weight: 300;\n}\n\n.addon-langs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }\n.addon-lang-pill {\n display: flex; align-items: center; gap: 4px;\n font-size: 11px; color: var(--white-muted);\n background: var(--carbon-surface);\n border: 1px solid var(--carbon-border);\n border-radius: 20px; padding: 3px 10px;\n}\n.addon-lang-pill .flag { font-size: 13px; line-height: 1; }\n\n.addon-bottom {\n display: flex; align-items: center; justify-content: space-between;\n gap: 12px; margin-top: auto;\n padding-top: 14px; border-top: 1px solid var(--carbon-border);\n}\n.addon-price {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 24px; color: var(--orange); line-height: 1;\n}\n.addon-price-note { font-size: 11px; color: var(--steel); margin-top: 2px; }\n\n.addon-cta {\n white-space: nowrap; text-align: center;\n padding: 9px 18px; border-radius: 10px;\n font-size: 13px; font-weight: 700; text-decoration: none; flex-shrink: 0;\n transition: background .2s, border-color .2s;\n background: transparent; color: var(--orange);\n border: 1.5px solid rgba(255,140,0,.4);\n}\n.addon-cta:hover { background: rgba(255,140,0,.08); border-color: var(--orange); }\n.addon-cta.consult { color: var(--steel-light); border-color: var(--carbon-border); }\n.addon-cta.consult:hover { color: var(--orange); border-color: rgba(255,140,0,.4); }\n\n.addon-badge {\n position: absolute; top: 16px; right: 16px;\n font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;\n padding: 3px 10px; border-radius: 20px;\n background: rgba(255,140,0,.1); color: var(--orange);\n border: 1px solid rgba(255,140,0,.2);\n}\n\n\/* \u2500\u2500 Footer global (debajo de addons) \u2500\u2500 *\/\n.pricing-footer {\n margin-top: 48px; text-align: center;\n display: flex; flex-direction: column; gap: 8px;\n}\n.pricing-note {\n font-size: 13px; color: var(--steel);\n font-family: 'Space Mono', monospace;\n}\n.pricing-note a { color: var(--orange); text-decoration: none; }\n.pricing-note a:hover { text-decoration: underline; }\n.pricing-iva {\n font-size: 11px; color: var(--steel);\n letter-spacing: .04em; font-family: 'Space Mono', monospace;\n}\n\n\/* \u2500\u2500 Responsive \u2500\u2500 *\/\n@media(max-width: 1100px) {\n .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }\n .addons-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }\n}\n@media(max-width: 600px) {\n .pricing-toggle { flex-wrap: wrap; gap: 10px; }\n .addon-card { flex-direction: column; }\n}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n\n<section class=\"pricing\" id=\"planes\">\n <div class=\"reveal\">\n <div class=\"section-tag\">Precios<\/div>\n <h2 class=\"section-title\">ELIGE TU <span>PLAN<\/span><\/h2>\n <p class=\"section-sub\">Precios transparentes adaptados a cada tipo de negocio.<\/p>\n <\/div>\n\n \n <div class=\"pricing-toggle reveal\">\n <span class=\"toggle-label active\" id=\"lbl-monthly\">Mensual<\/span>\n <button class=\"toggle-track\" id=\"toggle\" onclick=\"toggleBilling()\" aria-label=\"Cambiar facturaci\u00f3n\">\n <div class=\"toggle-thumb\"><\/div>\n <\/button>\n <span class=\"toggle-label\" id=\"lbl-annual\">Anual<\/span>\n <span class=\"toggle-badge\">Ahorra con el plan anual<\/span>\n <\/div>\n\n <div class=\"pricing-grid\">\n\n \n <div class=\"plan-card reveal\">\n <div class=\"plan-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/>\n <polyline points=\"9 22 9 12 15 12 15 22\"\/>\n <\/svg>\n <\/div>\n <div class=\"plan-name\">Local Estable<\/div>\n <div class=\"plan-desc\">Tu negocio, siempre accesible. La forma m\u00e1s r\u00e1pida de tener una carta digital profesional con identidad propia.<\/div>\n <div class=\"plan-price\">\n <div class=\"amount-row\">\n <span class=\"amount\" id=\"p0\">34,90<\/span>\n <span class=\"period\" id=\"per0\">\u20ac\/mes<\/span>\n <\/div>\n <div class=\"saving\" id=\"s0\"><\/div>\n <span class=\"setup\">+ 199\u20ac pago inicial \u00fanico<\/span>\n <span class=\"permanencia\">Permanencia m\u00ednima 12 meses<\/span>\n <\/div>\n <ul class=\"plan-features\">\n <li>Hasta 50 art\u00edculos<\/li>\n <li>3 categor\u00edas<\/li>\n <li>BioLink NFC con dise\u00f1o de tu marca<\/li>\n <li>QR para hasta 10 mesas<\/li>\n <li>6 actualizaciones al a\u00f1o<\/li>\n <\/ul>\n \n <a href=\"XXXX\" class=\"plan-cta outline\" id=\"cta0\" target=\"_blank\" rel=\"noopener\">Quiero este plan<\/a>\n <\/div>\n\n \n <div class=\"plan-card featured reveal\">\n <div class=\"plan-badge\">M\u00e1s popular<\/div>\n <div class=\"plan-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>\n <\/svg>\n <\/div>\n <div class=\"plan-name\">Local Activo<\/div>\n <div class=\"plan-desc\">Sin l\u00edmites, sin complicaciones. Carta completa con NFC, filtros y una presencia digital que enamora al cliente.<\/div>\n <div class=\"plan-price\">\n <div class=\"amount-row\">\n <span class=\"amount\" id=\"p1\">39,90<\/span>\n <span class=\"period\" id=\"per1\">\u20ac\/mes<\/span>\n <\/div>\n <div class=\"saving\" id=\"s1\"><\/div>\n <span class=\"setup\">+ 249\u20ac pago inicial \u00fanico<\/span>\n <span class=\"permanencia\">Permanencia m\u00ednima 12 meses<\/span>\n <\/div>\n <ul class=\"plan-features\">\n <li>Art\u00edculos ilimitados<\/li>\n <li>Categor\u00edas ilimitadas<\/li>\n <li>BioLink NFC con dise\u00f1o de tu marca<\/li>\n <li>1 tarjeta TapMe NFC incluida<\/li>\n <li>25 etiquetas QR & NFC incluidas<\/li>\n <li>Filtros: al\u00e9rgenos, vegano, sin gluten<\/li>\n <li>Actualizaciones ilimitadas<\/li>\n <\/ul>\n \n <a href=\"XXXX\" class=\"plan-cta primary\" id=\"cta1\" target=\"_blank\" rel=\"noopener\">Quiero este plan<\/a>\n <\/div>\n\n \n <div class=\"plan-card reveal\">\n <div class=\"plan-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/>\n <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/>\n <\/svg>\n <\/div>\n <div class=\"plan-name\">Local Internacional<\/div>\n <div class=\"plan-desc\">Habla el idioma de tus clientes. Todo lo del plan Activo m\u00e1s tu carta en espa\u00f1ol e ingl\u00e9s para captar al turista desde el primer vistazo.<\/div>\n <div class=\"plan-price\">\n <div class=\"amount-row\">\n <span class=\"amount\" id=\"p2\">49,90<\/span>\n <span class=\"period\" id=\"per2\">\u20ac\/mes<\/span>\n <\/div>\n <div class=\"saving\" id=\"s2\"><\/div>\n <span class=\"setup\">+ 349\u20ac pago inicial \u00fanico<\/span>\n <span class=\"permanencia\">Permanencia m\u00ednima 12 meses<\/span>\n <\/div>\n <ul class=\"plan-features\">\n <li>Todo el plan Local Activo<\/li>\n <li>\n <div class=\"flags\">\n <span class=\"flag\">\ud83c\uddea\ud83c\uddf8<\/span> Espa\u00f1ol\n <span class=\"sep\">+<\/span>\n <span class=\"flag\">\ud83c\uddec\ud83c\udde7<\/span> Ingl\u00e9s\n <\/div>\n <\/li>\n <\/ul>\n \n <a href=\"XXXX\" class=\"plan-cta outline\" id=\"cta2\" target=\"_blank\" rel=\"noopener\">Quiero este plan<\/a>\n <\/div>\n\n <\/div>\n<\/section>\n\n\n<section class=\"addons\" id=\"addons\">\n <div class=\"reveal\">\n <div class=\"section-tag\">Add-ons<\/div>\n <h2 class=\"section-title\">AMPL\u00cdA TU <span>PLAN<\/span><\/h2>\n <p class=\"section-sub\">Complementos opcionales para llevar tu carta al siguiente nivel.<\/p>\n <\/div>\n\n <div class=\"addons-grid\">\n\n \n <div class=\"addon-card reveal\">\n <div class=\"addon-badge\">Por idioma<\/div>\n <div class=\"addon-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 8l6 6\"\/>\n <path d=\"M4 14l6-6 2-3\"\/>\n <path d=\"M2 5h12\"\/>\n <path d=\"M7 2h1\"\/>\n <path d=\"M22 22l-5-10-5 10\"\/>\n <path d=\"M14 18h6\"\/>\n <\/svg>\n <\/div>\n <div class=\"addon-body\">\n <div class=\"addon-name\">Idioma extra<\/div>\n <div class=\"addon-desc\">Traducci\u00f3n nativa de tu carta completa, revisada por hablantes nativos. Nada que suene a m\u00e1quina.<\/div>\n <div class=\"addon-langs\">\n <div class=\"addon-lang-pill\"><span class=\"flag\">\ud83c\udde9\ud83c\uddea<\/span> Alem\u00e1n<\/div>\n <div class=\"addon-lang-pill\"><span class=\"flag\">\ud83c\uddeb\ud83c\uddf7<\/span> Franc\u00e9s<\/div>\n <div class=\"addon-lang-pill\"><span class=\"flag\">\ud83c\uddf8\ud83c\uddea<\/span> Sueco<\/div>\n <div class=\"addon-lang-pill\"><span class=\"flag\">\ud83c\udde9\ud83c\uddf0<\/span> Dan\u00e9s<\/div>\n <\/div>\n <div class=\"addon-bottom\">\n <div>\n <div class=\"addon-price\">199,90\u20ac<\/div>\n <div class=\"addon-price-note\">Pago \u00fanico \u00b7 por idioma<\/div>\n <\/div>\n \n <a href=\"XXXX\" class=\"addon-cta\" target=\"_blank\" rel=\"noopener\">A\u00f1adir<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"addon-card reveal\">\n <div class=\"addon-badge\">30 uds.<\/div>\n <div class=\"addon-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 8.32a7.43 7.43 0 0 1 0 7.36\"\/>\n <path d=\"M9.46 6.21a11.76 11.76 0 0 1 0 11.58\"\/>\n <path d=\"M12.91 4.1a15.91 15.91 0 0 1 .01 15.8\"\/>\n <circle cx=\"19\" cy=\"12\" r=\"2\" fill=\"rgba(255,140,0,.15)\"\/>\n <line x1=\"21\" y1=\"12\" x2=\"22\" y2=\"12\"\/>\n <\/svg>\n <\/div>\n <div class=\"addon-body\">\n <div class=\"addon-name\">Etiquetas QR & NFC de mesa<\/div>\n <div class=\"addon-desc\">Pack de 30 etiquetas f\u00edsicas resistentes e impermeables con el dise\u00f1o de tu marca. Listas para pegar y usar.<\/div>\n <div class=\"addon-bottom\">\n <div>\n <div class=\"addon-price\">59,90\u20ac<\/div>\n <div class=\"addon-price-note\">Pago \u00fanico \u00b7 30 unidades<\/div>\n <\/div>\n \n <a href=\"XXXX\" class=\"addon-cta\" target=\"_blank\" rel=\"noopener\">A\u00f1adir<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"addon-card reveal\">\n <div class=\"addon-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z\"\/>\n <circle cx=\"12\" cy=\"13\" r=\"3\"\/>\n <\/svg>\n <\/div>\n <div class=\"addon-body\">\n <div class=\"addon-name\">Sesi\u00f3n de fotos de platos<\/div>\n <div class=\"addon-desc\">Fotograf\u00eda profesional de tu carta completa. Im\u00e1genes que despiertan el apetito y disparan las conversiones.<\/div>\n <div class=\"addon-bottom\">\n <div>\n <div class=\"addon-price\" style=\"font-family:'Outfit',sans-serif; font-size:17px; padding-top:3px; font-weight:600;\">A consultar<\/div>\n <div class=\"addon-price-note\">Presupuesto personalizado<\/div>\n <\/div>\n <a href=\"#contacto\" class=\"addon-cta consult\">Consultar<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"pricing-footer reveal\">\n <p class=\"pricing-note\">\u00bfNecesitas algo diferente? <a href=\"#contacto\">Cu\u00e9ntanos tu caso<\/a> y hacemos una propuesta a tu medida.<\/p>\n <p class=\"pricing-iva\">Todos los precios indicados no incluyen IVA.<\/p>\n <\/div>\n\n<\/section>\n\n<script src=\"shared.js\"><\/script>\n<script>\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PRICING TOGGLE \u2014 MENSUAL \/ ANUAL\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Sustituye los XXXX por las URLs reales de tu pasarela.\n Hay una URL por plan y modalidad (mensual \/ anual).\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst plans = [\n {\n monthly: 34.90, annual: 349.90, setup: 199,\n urlMonthly: 'XXXX', \/* URL pasarela LOCAL ESTABLE \u2014 mensual *\/\n urlAnnual: 'XXXX' \/* URL pasarela LOCAL ESTABLE \u2014 anual *\/\n },\n {\n monthly: 39.90, annual: 419.90, setup: 249,\n urlMonthly: 'XXXX', \/* URL pasarela LOCAL ACTIVO \u2014 mensual *\/\n urlAnnual: 'XXXX' \/* URL pasarela LOCAL ACTIVO \u2014 anual *\/\n },\n {\n monthly: 49.90, annual: 479.90, setup: 349,\n urlMonthly: 'XXXX', \/* URL pasarela LOCAL INTERNACIONAL \u2014 mensual *\/\n urlAnnual: 'XXXX' \/* URL pasarela LOCAL INTERNACIONAL \u2014 anual *\/\n }\n];\n\nlet isAnnual = false;\n\nfunction fmt(n) {\n return n.toFixed(2).replace('.', ',');\n}\n\nfunction toggleBilling() {\n isAnnual = !isAnnual;\n\n const track = document.getElementById('toggle');\n const lblM = document.getElementById('lbl-monthly');\n const lblA = document.getElementById('lbl-annual');\n\n track.classList.toggle('annual', isAnnual);\n lblM.classList.toggle('active', !isAnnual);\n lblA.classList.toggle('active', isAnnual);\n\n plans.forEach((plan, i) => {\n const price = isAnnual ? plan.annual : plan.monthly;\n const period = isAnnual ? '\u20ac\/a\u00f1o' : '\u20ac\/mes';\n const url = isAnnual ? plan.urlAnnual : plan.urlMonthly;\n\n document.getElementById('p' + i).textContent = fmt(price);\n document.getElementById('per' + i).textContent = period;\n document.getElementById('cta' + i).href = url;\n\n const sEl = document.getElementById('s' + i);\n if (isAnnual) {\n const saving = (plan.monthly * 12) - plan.annual;\n sEl.textContent = '\u2726 Ahorras ' + fmt(saving) + '\u20ac al a\u00f1o';\n sEl.classList.add('show');\n } else {\n sEl.textContent = '';\n sEl.classList.remove('show');\n }\n });\n}\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff52aec elementor-widget elementor-widget-html\" data-id=\"ff52aec\" 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>FAQ \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\n.faq{padding:120px 5%;background:var(--carbon-mid)}\n.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}\n.faq-item{background:var(--carbon-surface);border:1px solid var(--carbon-border);border-radius:14px;padding:28px 32px;transition:border-color .3s}\n.faq-item:hover{border-color:rgba(255,140,0,.25)}\n.faq-q{font-size:16px;font-weight:600;margin-bottom:12px;line-height:1.4}\n.faq-a{font-size:14px;color:var(--white-muted);line-height:1.65;font-weight:300}\n@media(max-width:1100px){.faq-grid{grid-template-columns:1fr}}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n\n<section class=\"faq\" id=\"faq\">\n <div class=\"reveal\">\n <div class=\"section-tag\">FAQ<\/div>\n <h2 class=\"section-title\">PREGUNTAS <span>FRECUENTES<\/span><\/h2>\n <\/div>\n <div class=\"faq-grid\">\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfNecesitan los clientes descargarse una app?<\/div>\n <div class=\"faq-a\">No. Simplemente escanean el QR con la c\u00e1mara de su m\u00f3vil y la carta se abre en el navegador. Sin apps, sin registros.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfY si no tienen QR, pueden acceder igual?<\/div>\n <div class=\"faq-a\">S\u00ed. La carta tambi\u00e9n tiene URL propia que puedes compartir en redes, Google Maps, TripAdvisor o tu web.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfPuedo tener la carta en varios idiomas?<\/div>\n <div class=\"faq-a\">El plan Premium incluye multi-idioma. Disponible en espa\u00f1ol, ingl\u00e9s y alem\u00e1n por defecto, con m\u00e1s idiomas bajo petici\u00f3n.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfCu\u00e1nto tarda en estar lista?<\/div>\n <div class=\"faq-a\">En 5-7 d\u00edas h\u00e1biles desde que nos env\u00edas el contenido de tu carta. Los stickers QR llegan en 3-5 d\u00edas adicionales.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfPuedo cambiar precios yo mismo?<\/div>\n <div class=\"faq-a\">S\u00ed. Tienes un panel de gesti\u00f3n sencillo donde puedes cambiar precios, disponibilidad, a\u00f1adir platos del d\u00eda o activar\/desactivar platos en segundos.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfEl sistema de pedidos llega a cocina autom\u00e1ticamente?<\/div>\n <div class=\"faq-a\">S\u00ed. Los pedidos llegan directamente a una pantalla en cocina o a una tablet. Tambi\u00e9n puedes recibir una notificaci\u00f3n en tu m\u00f3vil.<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script src=\"shared.js\"><\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1ab909 elementor-widget elementor-widget-html\" data-id=\"c1ab909\" 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 \u2014 Cartas Digitales \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\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<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>\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-210","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/210","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=210"}],"version-history":[{"count":15,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/210\/revisions"}],"predecessor-version":[{"id":351,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/210\/revisions\/351"}],"wp:attachment":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/media?parent=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}