{"id":214,"date":"2026-04-11T14:32:50","date_gmt":"2026-04-11T14:32:50","guid":{"rendered":"https:\/\/360stark.com\/?page_id=214"},"modified":"2026-04-29T22:38:54","modified_gmt":"2026-04-29T22:38:54","slug":"branding-diseno","status":"publish","type":"page","link":"https:\/\/360stark.com\/en\/branding-diseno\/","title":{"rendered":"Branding & Dise\u00f1o Grafico"},"content":{"rendered":"\t\t
\n\t\t\t\t
\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 <!-- \u26a0\ufe0f el toggle NO tiene stopPropagation \u2014 gestiona su estado \u00e9l solo -->\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 Branding & Dise\u00f1o \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<section class=\"hero\">\n <div class=\"hero-bg\"><\/div>\n <div class=\"hero-grid\"><\/div>\n <div class=\"hero-eyebrow\">Servicio 03 \u00b7 Branding & Dise\u00f1o<\/div>\n <h1 class=\"hero-title\">MARCAS QUE<br><span class=\"accent\">IMPACTAN.<\/span><br><span class=\"dim\">SIEMPRE.<\/span><\/h1>\n <p class=\"hero-sub\">Creamos identidades visuales que trascienden. Dise\u00f1o gr\u00e1fico, motion y contenido visual con un prop\u00f3sito claro: hacer que tu marca sea inconfundible.<\/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<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 Branding & Dise\u00f1o \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<div class=\"stats-bar\">\n <div class=\"stat reveal\"><div class=\"stat-num\">100%<\/div><div class=\"stat-label\">Proyectos custom, sin plantillas<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"stat-num\">+120<\/div><div class=\"stat-label\">Identidades creadas<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"stat-num\">5d<\/div><div class=\"stat-label\">Primeras propuestas<\/div><\/div>\n <div class=\"stat reveal\"><div class=\"stat-num\">\u221e<\/div><div class=\"stat-label\">Revisiones incluidas<\/div><\/div>\n<\/div>\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 Branding & Dise\u00f1o \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<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 <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 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/><\/svg><\/div>\n <div class=\"include-title\">Identidad visual completa<\/div>\n <div class=\"include-desc\">Logo, paleta de colores, tipograf\u00edas, iconograf\u00eda y sistema de dise\u00f1o. Todo lo que necesitas para tener una marca consistente.<\/div>\n <\/div>\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\">Manual de marca<\/div>\n <div class=\"include-desc\">Gu\u00eda de uso de tu identidad: normas de aplicaci\u00f3n, variaciones del logo, usos correctos e incorrectos. Tu marca siempre consistente.<\/div>\n <\/div>\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 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\/><\/svg><\/div>\n <div class=\"include-title\">Dise\u00f1o gr\u00e1fico<\/div>\n <div class=\"include-desc\">Flyers, carteles, banners, presentaciones, packaging y cualquier pieza que necesites. Dise\u00f1o que vende y comunica.<\/div>\n <\/div>\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=\"M15 10l4.553-2.069A1 1 0 0121 8.869V15.13a1 1 0 01-1.447.9L15 14M3 8a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z\"\/><\/svg><\/div>\n <div class=\"include-title\">Contenido para redes<\/div>\n <div class=\"include-desc\">Plantillas de Instagram, Facebook, LinkedIn y TikTok con tu identidad visual. Creatividades que destacan en el feed.<\/div>\n <\/div>\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=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"\/><\/svg><\/div>\n <div class=\"include-title\">Motion & v\u00eddeo<\/div>\n <div class=\"include-desc\">Animaciones de logo, intros para v\u00eddeos, reels animados y contenido en movimiento que llama la atenci\u00f3n.<\/div>\n <\/div>\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\">Fotograf\u00eda de producto\/marca<\/div>\n <div class=\"include-desc\">Sesi\u00f3n de fotos o direcci\u00f3n creativa para que tus im\u00e1genes comuniquen la esencia de tu marca.<\/div>\n <\/div>\n <\/div>\n<\/section>\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 Branding & Dise\u00f1o \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<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\">Brief creativo<\/div>\n <div class=\"step-desc\">Entendemos tu negocio, tu p\u00fablico y tus referentes. Cuanto m\u00e1s nos cuentes, m\u00e1s acertamos.<\/div>\n <\/div>\n <div class=\"step reveal\">\n <div class=\"step-num\">02<\/div>\n <div class=\"step-title\">Propuestas de concepto<\/div>\n <div class=\"step-desc\">Presentamos 2-3 direcciones creativas distintas para que elijas la que m\u00e1s conecta contigo.<\/div>\n <\/div>\n <div class=\"step reveal\">\n <div class=\"step-num\">03<\/div>\n <div class=\"step-title\">Desarrollo completo<\/div>\n <div class=\"step-desc\">Desarrollamos la identidad elegida en todos sus elementos y formatos.<\/div>\n <\/div>\n <div class=\"step reveal\">\n <div class=\"step-num\">04<\/div>\n <div class=\"step-title\">Entrega de archivos<\/div>\n <div class=\"step-desc\">Te entregamos todos los archivos en los formatos que necesitas: AI, PDF, SVG, PNG, JPG.<\/div>\n <\/div>\n <\/div>\n<\/section>\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 Branding & Dise\u00f1o \u00b7 360\u00b0 Stark<\/title>\n<link rel=\"stylesheet\" href=\"shared.css\">\n<style>\n.pricing{padding:120px 5%;background:var(--carbon)}\n.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}\n.plan-card{background:var(--carbon-mid);border:1px solid var(--carbon-border);border-radius:20px;padding:40px 36px;position:relative;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s;display:flex;flex-direction:column}\n.plan-card:hover{transform:translateY(-6px);border-color:rgba(255,140,0,.3);box-shadow:0 20px 60px rgba(0,0,0,.4)}\n.plan-card.featured{border-color:rgba(255,140,0,.4);background:var(--carbon-surface)}\n.plan-card.featured::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange-light))}\n.plan-badge{position:absolute;top:20px;right:20px;background:var(--orange);color:var(--carbon);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:20px}\n.plan-icon{width:52px;height:52px;background:rgba(255,140,0,.1);border:1px solid rgba(255,140,0,.2);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:24px}\n.plan-icon svg{width:24px;height:24px}\n.plan-name{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:.04em;margin-bottom:8px}\n.plan-desc{font-size:14px;color:var(--white-muted);line-height:1.55;font-weight:300;margin-bottom:28px}\n.plan-price{margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--carbon-border)}\n.plan-price .from{font-size:12px;color:var(--steel-light);font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:4px}\n.plan-price .amount{font-family:'Bebas Neue',sans-serif;font-size:52px;color:var(--orange);line-height:1}\n.plan-price .period{font-size:13px;color:var(--steel-light)}\n.plan-price .note{font-size:12px;color:var(--steel);margin-top:4px;display:block}\n.plan-features{list-style:none;display:flex;flex-direction:column;gap:12px;flex:1;margin-bottom:32px}\n.plan-features li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--white-muted);line-height:1.5}\n.plan-features li::before{content:'';width:16px;height:16px;border-radius:50%;background:rgba(255,140,0,.15);border:1px solid rgba(255,140,0,.3);flex-shrink:0;margin-top:2px;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\");background-repeat:no-repeat;background-position:center}\n.plan-features li.disabled{opacity:.35}\n.plan-features li.disabled::before{background-image:none;border-color:rgba(255,255,255,.15)}\n.plan-cta{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:10px;font-weight:700;font-size:14px;letter-spacing:.02em;text-decoration:none;transition:background .2s,transform .15s,box-shadow .2s;text-align:center}\n.plan-cta.primary{background:var(--orange);color:var(--carbon)}\n.plan-cta.primary:hover{background:var(--orange-deep);transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,140,0,.3)}\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.pricing-note{margin-top:32px;text-align:center;font-size:13px;color:var(--steel);font-family:'Space Mono',monospace}\n.pricing-note a{color:var(--orange);text-decoration:none}\n@media(max-width:1100px){.pricing-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}}\n<\/style>\n<\/head>\n<body>\n<div id=\"cursor-dot\"><\/div>\n<div id=\"cursor-ring\"><\/div>\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 proyecto.<\/p>\n <\/div>\n <div class=\"pricing-grid\">\n\n <div class=\"plan-card reveal\">\n <div class=\"plan-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg><\/div>\n <div class=\"plan-name\">Identidad B\u00e1sico<\/div>\n <div class=\"plan-desc\">Para nuevas marcas o rebranding de negocio local que necesita una identidad s\u00f3lida y funcional.<\/div>\n <div class=\"plan-price\">\n <span class=\"from\">Desde<\/span><span class=\"amount\">790<\/span><span class=\"period\">\u20ac<\/span>\n <span class=\"note\">Pago \u00fanico<\/span>\n <\/div>\n <ul class=\"plan-features\">\n <li>Logo en todas sus variantes<\/li>\n <li>Paleta de colores<\/li>\n <li>Tipograf\u00edas de marca<\/li>\n <li>Manual de uso b\u00e1sico<\/li>\n <li>Archivos en todos los formatos<\/li>\n <li class=\"disabled\">Contenido RRSS<\/li>\n <li class=\"disabled\">Motion<\/li>\n <\/ul>\n <a href=\"#contacto\" class=\"plan-cta outline\">Solicitar presupuesto<\/a>\n <\/div>\n\n <div class=\"plan-card featured reveal\">\n <div class=\"plan-badge\">M\u00e1s popular<\/div>\n <div class=\"plan-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg><\/div>\n <div class=\"plan-name\">Marca completa Profesional<\/div>\n <div class=\"plan-desc\">La identidad completa con todo lo que necesitas para lanzar o relanzar tu marca con fuerza.<\/div>\n <div class=\"plan-price\">\n <span class=\"from\">Desde<\/span><span class=\"amount\">1.490<\/span><span class=\"period\">\u20ac<\/span>\n <span class=\"note\">Pago \u00fanico<\/span>\n <\/div>\n <ul class=\"plan-features\">\n <li>Todo el plan B\u00e1sico<\/li>\n <li>Manual de marca completo<\/li>\n <li>10 plantillas para redes sociales<\/li>\n <li>Papeler\u00eda corporativa (tarjeta, firma email)<\/li>\n <li>Animaci\u00f3n de logo<\/li>\n <li>Informe de marca y posicionamiento<\/li>\n <li class=\"disabled\">Sesi\u00f3n fotogr\u00e1fica<\/li>\n <\/ul>\n <a href=\"#contacto\" class=\"plan-cta primary\">Solicitar presupuesto<\/a>\n <\/div>\n\n <div class=\"plan-card reveal\">\n <div class=\"plan-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#FF8C00\" stroke-width=\"1.8\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg><\/div>\n <div class=\"plan-name\">Marca premium Premium<\/div>\n <div class=\"plan-desc\">Para marcas que quieren destacar en todos los soportes. Dise\u00f1o completo con motion y fotograf\u00eda.<\/div>\n <div class=\"plan-price\">\n <span class=\"from\">Desde<\/span><span class=\"amount\">2.490<\/span><span class=\"period\">\u20ac<\/span>\n <span class=\"note\">Pago \u00fanico<\/span>\n <\/div>\n <ul class=\"plan-features\">\n <li>Todo el plan Profesional<\/li>\n <li>30 plantillas para redes sociales<\/li>\n <li>Pack de motion: 5 animaciones<\/li>\n <li>Direcci\u00f3n de sesi\u00f3n fotogr\u00e1fica<\/li>\n <li>Kit de prensa y presentaci\u00f3n<\/li>\n <li>Acompa\u00f1amiento durante el lanzamiento<\/li>\n <li>Revisiones ilimitadas<\/li>\n <\/ul>\n <a href=\"#contacto\" class=\"plan-cta outline\">Solicitar presupuesto<\/a>\n <\/div>\n\n <\/div>\n <p class=\"pricing-note reveal\">\u00bfNecesitas algo diferente? <a href=\"#contacto\">Cu\u00e9ntanos tu caso<\/a> y hacemos una propuesta personalizada.<\/p>\n<\/section>\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-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 Branding & Dise\u00f1o \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<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\">\u00bfCu\u00e1nto tarda el proceso?<\/div>\n <div class=\"faq-a\">Desde el brief hasta la entrega final suelen ser 3-5 semanas, dependiendo de la complejidad y la velocidad de aprobaci\u00f3n de cada fase.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfCu\u00e1ntas revisiones est\u00e1n incluidas?<\/div>\n <div class=\"faq-a\">Incluimos revisiones ilimitadas dentro de cada fase del proceso. Queremos que el resultado sea perfecto para ti.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfQu\u00e9 pasa si no me gusta ninguna propuesta?<\/div>\n <div class=\"faq-a\">Es algo muy raro, pero si ocurre, volvemos a empezar desde el brief. Tu satisfacci\u00f3n es nuestra prioridad.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfTrabaj\u00e1is con marcas ya existentes?<\/div>\n <div class=\"faq-a\">S\u00ed. Podemos hacer un rebranding completo, una evoluci\u00f3n de tu marca actual o simplemente ampliar tu sistema de dise\u00f1o.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfEn qu\u00e9 formatos entreg\u00e1is los archivos?<\/div>\n <div class=\"faq-a\">En todos los que necesites: AI, EPS, SVG para vectoriales; PDF para documentos; PNG y JPG para web y redes.<\/div>\n <\/div>\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\">\u00bfIncluye el registro de la marca?<\/div>\n <div class=\"faq-a\">El dise\u00f1o s\u00ed, el registro legal no. Te recomendamos registrar tu marca en la OEPM y podemos orientarte en el proceso.<\/div>\n <\/div>\n <\/div>\n<\/section>\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 Branding & Dise\u00f1o \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<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<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 \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\n \u2551 360\u00b0 STARK \u2014 FOOTER SUBP\u00c1GINAS \u2551\n \u2551 Incluir justo antes de <\/body> \u2551\n \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\n-->\n\n<footer id=\"sp-footer\">\n <div class=\"sp-footer-inner\">\n\n <!-- Logo + tagline -->\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 <!-- Links legales -->\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 <!-- Copyright -->\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<!-- ELEMENTOS DEL CURSOR -->\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-214","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/214","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=214"}],"version-history":[{"count":6,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/214\/revisions"}],"predecessor-version":[{"id":330,"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/pages\/214\/revisions\/330"}],"wp:attachment":[{"href":"https:\/\/360stark.com\/en\/wp-json\/wp\/v2\/media?parent=214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}