Escala.Studio \u2014 Marketing Digital Boutique<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n<style>\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n VARIABLES \u00b7 Paleta Medianoche El\u00e9ctrico\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n:root {\n --negro: #090E14;\n --carbon: #131C26;\n --grafito: #1D2D3E;\n --grafito2: #253545;\n --acento: #00CFFF;\n --acento-dim: rgba(0,207,255,0.12);\n --acento-dim2:rgba(0,207,255,0.06);\n --blanco: #E8EDF2;\n --blanco-puro:#FFFFFF;\n --gris: #5A7A8A;\n --gris-claro: #8A9DAD;\n --borde: rgba(255,255,255,0.07);\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n RESET & BASE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\n\nhtml { scroll-behavior: smooth; }\n\nbody {\n background: var(--negro);\n color: var(--blanco);\n font-family: 'DM Sans', sans-serif;\n font-weight: 300;\n line-height: 1.6;\n overflow-x: hidden;\n}\n\n::selection { background: var(--acento); color: var(--negro); }\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n UTILIDADES\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.container {\n max-width: 1160px;\n margin: 0 auto;\n padding: 0 40px;\n}\n@media(max-width:768px){ .container { padding: 0 24px; } }\n\n.acento { color: var(--acento); }\n.serif { font-family: 'Playfair Display', serif; }\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n NAVBAR\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nnav {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 100;\n padding: 20px 0;\n transition: background .4s, padding .4s;\n}\nnav.scrolled {\n background: rgba(9,14,20,0.95);\n backdrop-filter: blur(12px);\n padding: 14px 0;\n border-bottom: 1px solid var(--borde);\n}\n.nav-inner {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.nav-logo {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 22px;\n letter-spacing: 3px;\n color: var(--blanco);\n text-decoration: none;\n}\n.nav-logo span { color: var(--acento); }\n\n.nav-links {\n display: flex;\n gap: 36px;\n list-style: none;\n}\n.nav-links a {\n font-size: 12px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--gris-claro);\n text-decoration: none;\n transition: color .25s;\n}\n.nav-links a:hover { color: var(--acento); }\n\n.nav-cta {\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--negro);\n background: var(--acento);\n padding: 10px 22px;\n text-decoration: none;\n font-weight: 500;\n transition: opacity .25s;\n}\n.nav-cta:hover { opacity: .85; }\n\n.nav-burger {\n display: none;\n flex-direction: column;\n gap: 5px;\n cursor: pointer;\n padding: 4px;\n}\n.nav-burger span {\n display: block; width: 24px; height: 1.5px;\n background: var(--blanco); transition: .3s;\n}\n\n@media(max-width:768px){\n .nav-links, .nav-cta-wrap { display: none; }\n .nav-burger { display: flex; }\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n HERO\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n position: relative;\n overflow: hidden;\n padding: 120px 0 80px;\n}\n\n\/* Grid de fondo *\/\n.hero-grid {\n position: absolute; inset: 0;\n background-image:\n linear-gradient(rgba(0,207,255,0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0,207,255,0.04) 1px, transparent 1px);\n background-size: 80px 80px;\n}\n\n\/* Glow radial *\/\n.hero-glow {\n position: absolute;\n top: 10%; right: -10%;\n width: 700px; height: 700px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(0,207,255,0.08) 0%, transparent 65%);\n pointer-events: none;\n}\n\n.hero-content {\n position: relative; z-index: 1;\n max-width: 820px;\n}\n\n.hero-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-size: 11px;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: var(--acento);\n margin-bottom: 32px;\n opacity: 0;\n animation: fadeUp .8s ease forwards .1s;\n}\n.hero-eyebrow::before {\n content: '';\n display: block;\n width: 28px; height: 1.5px;\n background: var(--acento);\n}\n\n.hero-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(64px, 10vw, 130px);\n line-height: .92;\n letter-spacing: 2px;\n color: var(--blanco-puro);\n margin-bottom: 32px;\n opacity: 0;\n animation: fadeUp .8s ease forwards .25s;\n}\n.hero-title .line2 {\n color: var(--acento);\n display: block;\n}\n\n.hero-sub {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: clamp(18px, 2.4vw, 26px);\n color: var(--gris-claro);\n max-width: 580px;\n line-height: 1.55;\n margin-bottom: 48px;\n opacity: 0;\n animation: fadeUp .8s ease forwards .42s;\n}\n.hero-sub em {\n color: var(--blanco);\n font-style: normal;\n}\n\n.hero-actions {\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n opacity: 0;\n animation: fadeUp .8s ease forwards .58s;\n}\n\n.btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--acento);\n color: var(--negro);\n font-size: 12px;\n letter-spacing: 2px;\n text-transform: uppercase;\n font-weight: 500;\n padding: 16px 32px;\n text-decoration: none;\n transition: opacity .25s, transform .25s;\n}\n.btn-primary:hover { opacity: .88; transform: translateY(-2px); }\n\n.btn-secondary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n border: 1px solid rgba(255,255,255,0.2);\n color: var(--blanco);\n font-size: 12px;\n letter-spacing: 2px;\n text-transform: uppercase;\n font-weight: 400;\n padding: 15px 32px;\n text-decoration: none;\n transition: border-color .25s, color .25s, transform .25s;\n}\n.btn-secondary:hover {\n border-color: var(--acento);\n color: var(--acento);\n transform: translateY(-2px);\n}\n\n.hero-stats {\n margin-top: 72px;\n display: flex;\n gap: 48px;\n flex-wrap: wrap;\n opacity: 0;\n animation: fadeUp .8s ease forwards .72s;\n padding-top: 48px;\n border-top: 1px solid var(--borde);\n}\n.stat-num {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 40px;\n letter-spacing: 1px;\n color: var(--acento);\n line-height: 1;\n}\n.stat-label {\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--gris);\n margin-top: 4px;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SECCI\u00d3N GEN\u00c9RICA\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.section {\n padding: 120px 0;\n border-top: 1px solid var(--borde);\n}\n@media(max-width:768px){ .section { padding: 72px 0; } }\n\n.section-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-size: 10px;\n letter-spacing: 5px;\n text-transform: uppercase;\n color: var(--acento);\n margin-bottom: 24px;\n}\n.section-eyebrow::before {\n content: '';\n display: block;\n width: 20px; height: 1px;\n background: var(--acento);\n}\n\n.section-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(36px, 5vw, 64px);\n line-height: 1;\n letter-spacing: 1px;\n color: var(--blanco-puro);\n margin-bottom: 20px;\n}\n\n.section-lead {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: clamp(17px, 2vw, 22px);\n color: var(--gris-claro);\n max-width: 600px;\n line-height: 1.6;\n margin-bottom: 64px;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n QUI\u00c9NES SOMOS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.nosotros-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n}\n@media(max-width:900px){\n .nosotros-grid { grid-template-columns: 1fr; gap: 48px; }\n}\n\n\/* Marco para la foto *\/\n.foto-wrap {\n position: relative;\n}\n.foto-placeholder {\n width: 100%;\n aspect-ratio: 4\/5;\n background: var(--grafito);\n border: 1px solid var(--borde);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n color: var(--gris);\n position: relative;\n overflow: hidden;\n}\n\/* Esquina decorativa *\/\n.foto-placeholder::before {\n content: '';\n position: absolute;\n top: 16px; left: 16px;\n width: 40px; height: 40px;\n border-top: 2px solid var(--acento);\n border-left: 2px solid var(--acento);\n}\n.foto-placeholder::after {\n content: '';\n position: absolute;\n bottom: 16px; right: 16px;\n width: 40px; height: 40px;\n border-bottom: 2px solid var(--acento);\n border-right: 2px solid var(--acento);\n}\n.foto-icon {\n font-size: 48px;\n opacity: .3;\n}\n.foto-hint {\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n opacity: .4;\n text-align: center;\n line-height: 1.6;\n}\n\n\/* Para cuando teng\u00e1is la foto real, a\u00f1adid esto al img:\n width:100%; height:100%; object-fit:cover; position:absolute; inset:0; *\/\n\n.foto-badge {\n position: absolute;\n bottom: -20px; right: -20px;\n background: var(--acento);\n color: var(--negro);\n padding: 20px 24px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 15px;\n letter-spacing: 2px;\n line-height: 1.3;\n text-align: center;\n width: 130px;\n}\n@media(max-width:768px){ .foto-badge { display: none; } }\n\n.nosotros-content {}\n\n.nosotros-story {\n font-family: 'Playfair Display', serif;\n font-size: clamp(22px, 2.8vw, 32px);\n line-height: 1.35;\n color: var(--blanco-puro);\n margin-bottom: 32px;\n}\n.nosotros-story em {\n color: var(--acento);\n font-style: italic;\n}\n\n.nosotros-body {\n font-size: 15px;\n line-height: 1.9;\n color: var(--gris-claro);\n margin-bottom: 40px;\n}\n.nosotros-body p + p { margin-top: 18px; }\n\n.nosotros-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n.tag {\n font-size: 10px;\n letter-spacing: 2px;\n text-transform: uppercase;\n padding: 7px 14px;\n background: var(--acento-dim);\n color: var(--acento);\n border: 1px solid rgba(0,207,255,0.2);\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n VALORES\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.valores-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 3px;\n margin-top: 64px;\n}\n@media(max-width:768px){ .valores-grid { grid-template-columns: 1fr; } }\n\n.valor-card {\n background: var(--carbon);\n padding: 40px 32px;\n border-top: 2px solid transparent;\n transition: border-color .3s, background .3s;\n}\n.valor-card:hover {\n border-color: var(--acento);\n background: var(--grafito);\n}\n.valor-num {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 52px;\n color: var(--acento-dim);\n line-height: 1;\n margin-bottom: 20px;\n transition: color .3s;\n}\n.valor-card:hover .valor-num { color: rgba(0,207,255,0.25); }\n.valor-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 22px;\n letter-spacing: 1px;\n color: var(--blanco-puro);\n margin-bottom: 12px;\n}\n.valor-desc {\n font-size: 13px;\n line-height: 1.8;\n color: var(--gris-claro);\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SERVICIOS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.servicios-wrap {\n margin-top: 64px;\n}\n\n.servicio-item {\n border-bottom: 1px solid var(--borde);\n overflow: hidden;\n}\n.servicio-item:first-child { border-top: 1px solid var(--borde); }\n\n.servicio-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 28px 0;\n cursor: pointer;\n gap: 24px;\n transition: color .25s;\n}\n.servicio-header:hover .servicio-nombre { color: var(--acento); }\n\n.servicio-left {\n display: flex;\n align-items: center;\n gap: 24px;\n}\n.servicio-index {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 13px;\n letter-spacing: 2px;\n color: var(--gris);\n width: 24px;\n flex-shrink: 0;\n}\n.servicio-nombre {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(22px, 3vw, 36px);\n letter-spacing: 1px;\n color: var(--blanco-puro);\n transition: color .25s;\n}\n.servicio-tag {\n font-size: 10px;\n letter-spacing: 2px;\n text-transform: uppercase;\n padding: 5px 12px;\n background: var(--acento-dim);\n color: var(--acento);\n border: 1px solid rgba(0,207,255,0.15);\n display: none;\n}\n@media(min-width:600px){ .servicio-tag { display: inline-block; } }\n\n.servicio-arrow {\n width: 32px; height: 32px;\n border: 1px solid var(--borde);\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n transition: background .25s, border-color .25s, transform .35s;\n font-size: 14px;\n color: var(--gris-claro);\n}\n.servicio-item.open .servicio-arrow {\n background: var(--acento);\n border-color: var(--acento);\n color: var(--negro);\n transform: rotate(45deg);\n}\n\n.servicio-body {\n max-height: 0;\n overflow: hidden;\n transition: max-height .45s cubic-bezier(.4,0,.2,1);\n}\n.servicio-body-inner {\n padding: 0 0 36px 48px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n}\n@media(max-width:600px){\n .servicio-body-inner { grid-template-columns: 1fr; padding: 0 0 28px 0; }\n}\n\n.servicio-desc {\n font-size: 15px;\n line-height: 1.85;\n color: var(--gris-claro);\n}\n.servicio-lista {\n list-style: none;\n}\n.servicio-lista li {\n font-size: 13px;\n line-height: 1.7;\n color: var(--gris-claro);\n padding: 6px 0;\n border-bottom: 1px solid var(--borde);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.servicio-lista li::before {\n content: '';\n display: block;\n width: 6px; height: 6px;\n border-radius: 50%;\n background: var(--acento);\n flex-shrink: 0;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n C\u00d3MO TRABAJAMOS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.proceso-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 3px;\n margin-top: 64px;\n}\n@media(max-width:900px){ .proceso-grid { grid-template-columns: 1fr 1fr; } }\n@media(max-width:500px){ .proceso-grid { grid-template-columns: 1fr; } }\n\n.proceso-card {\n background: var(--carbon);\n padding: 36px 28px;\n position: relative;\n overflow: hidden;\n}\n.proceso-card::after {\n content: attr(data-num);\n position: absolute;\n top: -10px; right: 16px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 100px;\n color: var(--acento-dim2);\n line-height: 1;\n letter-spacing: -2px;\n pointer-events: none;\n}\n.proceso-step {\n font-size: 10px;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: var(--acento);\n margin-bottom: 16px;\n}\n.proceso-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 22px;\n letter-spacing: 1px;\n color: var(--blanco-puro);\n margin-bottom: 12px;\n}\n.proceso-desc {\n font-size: 13px;\n line-height: 1.8;\n color: var(--gris-claro);\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n CONTACTO\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.contacto-grid {\n display: grid;\n grid-template-columns: 1fr 1.4fr;\n gap: 80px;\n align-items: start;\n}\n@media(max-width:900px){\n .contacto-grid { grid-template-columns: 1fr; gap: 48px; }\n}\n\n.contacto-info {}\n.contacto-claim {\n font-family: 'Playfair Display', serif;\n font-size: clamp(22px, 3vw, 36px);\n line-height: 1.35;\n color: var(--blanco-puro);\n margin-bottom: 28px;\n}\n.contacto-claim em { color: var(--acento); font-style: italic; }\n\n.contacto-desc {\n font-size: 14px;\n line-height: 1.9;\n color: var(--gris-claro);\n margin-bottom: 36px;\n}\n\n.contacto-dato {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px 0;\n border-bottom: 1px solid var(--borde);\n font-size: 13px;\n color: var(--gris-claro);\n}\n.contacto-dato:last-child { border-bottom: none; }\n.contacto-dato-icon {\n width: 36px; height: 36px;\n background: var(--acento-dim);\n border: 1px solid rgba(0,207,255,0.15);\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n font-size: 15px;\n}\n\n\/* Formulario *\/\n.form-wrap {\n background: var(--carbon);\n padding: 48px;\n border: 1px solid var(--borde);\n}\n@media(max-width:500px){ .form-wrap { padding: 28px 20px; } }\n\n.form-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 28px;\n letter-spacing: 1px;\n color: var(--blanco-puro);\n margin-bottom: 32px;\n}\n\n.form-group {\n margin-bottom: 20px;\n}\n.form-label {\n display: block;\n font-size: 10px;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gris);\n margin-bottom: 8px;\n}\n.form-input,\n.form-select,\n.form-textarea {\n width: 100%;\n background: var(--grafito);\n border: 1px solid var(--borde);\n color: var(--blanco);\n font-family: 'DM Sans', sans-serif;\n font-size: 14px;\n font-weight: 300;\n padding: 14px 16px;\n outline: none;\n transition: border-color .25s;\n appearance: none;\n}\n.form-input::placeholder,\n.form-textarea::placeholder { color: var(--gris); }\n.form-input:focus,\n.form-select:focus,\n.form-textarea:focus { border-color: var(--acento); }\n.form-textarea { resize: vertical; min-height: 120px; }\n\n.form-select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A7A8A' stroke-width='1.5' fill='none'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n padding-right: 40px;\n cursor: pointer;\n}\n.form-select option { background: var(--grafito); }\n\n.form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n}\n@media(max-width:500px){ .form-row { grid-template-columns: 1fr; } }\n\n.form-submit {\n width: 100%;\n background: var(--acento);\n color: var(--negro);\n border: none;\n font-family: 'DM Sans', sans-serif;\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 3px;\n text-transform: uppercase;\n padding: 18px;\n cursor: pointer;\n margin-top: 8px;\n transition: opacity .25s, transform .25s;\n}\n.form-submit:hover { opacity: .88; transform: translateY(-1px); }\n\n.form-nota {\n font-size: 11px;\n color: var(--gris);\n margin-top: 14px;\n line-height: 1.6;\n text-align: center;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n FOOTER\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfooter {\n background: var(--carbon);\n border-top: 1px solid var(--borde);\n padding: 60px 0 40px;\n}\n.footer-inner {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 40px;\n flex-wrap: wrap;\n margin-bottom: 48px;\n}\n.footer-logo {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 28px;\n letter-spacing: 3px;\n color: var(--blanco-puro);\n}\n.footer-logo span { color: var(--acento); }\n.footer-claim {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: 14px;\n color: var(--gris);\n margin-top: 6px;\n}\n.footer-links {\n display: flex;\n gap: 32px;\n list-style: none;\n flex-wrap: wrap;\n}\n.footer-links a {\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--gris);\n text-decoration: none;\n transition: color .25s;\n}\n.footer-links a:hover { color: var(--acento); }\n\n.footer-bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n padding-top: 24px;\n border-top: 1px solid var(--borde);\n}\n.footer-copy {\n font-size: 11px;\n color: var(--gris);\n letter-spacing: 1px;\n}\n.footer-hecho {\n font-size: 11px;\n color: var(--gris);\n letter-spacing: 1px;\n}\n.footer-hecho span { color: var(--acento); }\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n ANIMACIONES\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@keyframes fadeUp {\n from { opacity:0; transform:translateY(28px); }\n to { opacity:1; transform:translateY(0); }\n}\n\n.reveal {\n opacity: 0;\n transform: translateY(24px);\n transition: opacity .7s ease, transform .7s ease;\n}\n.reveal.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SCROLL INDICATOR\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.scroll-line {\n position: absolute;\n bottom: 40px; left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n opacity: 0;\n animation: fadeUp .8s ease forwards .9s;\n}\n.scroll-line span {\n font-size: 9px;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gris);\n}\n.scroll-line-bar {\n width: 1px;\n height: 48px;\n background: linear-gradient(var(--acento), transparent);\n animation: scrollPulse 2s ease-in-out infinite;\n}\n@keyframes scrollPulse {\n 0%,100% { opacity:.4; transform:scaleY(1); }\n 50% { opacity:1; transform:scaleY(1.1); }\n}\n\n<\/style>\n<\/head>\n<body>\n\n\n<nav id=\"nav\">\n <div class=\"container nav-inner\">\n <a href=\"#inicio\" class=\"nav-logo\">ESCALA<span>.<\/span>STUDIO<\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#nosotros\">Nosotros<\/a><\/li>\n <li><a href=\"#servicios\">Servicios<\/a><\/li>\n <li><a href=\"#proceso\">C\u00f3mo trabajamos<\/a><\/li>\n <li><a href=\"#contacto\">Contacto<\/a><\/li>\n <\/ul>\n <a href=\"#contacto\" class=\"nav-cta nav-cta-wrap\">Hablemos \u2708<\/a>\n <div class=\"nav-burger\" onclick=\"toggleMenu()\">\n <span><\/span><span><\/span><span><\/span>\n <\/div>\n <\/div>\n<\/nav>\n\n\n<section id=\"inicio\" class=\"hero\">\n <div class=\"hero-grid\"><\/div>\n <div class=\"hero-glow\"><\/div>\n <div class=\"container\">\n <div class=\"hero-content\">\n <div class=\"hero-eyebrow\">Agencia Boutique \u00b7 Marketing Digital<\/div>\n <h1 class=\"hero-title\">\n Trabajamos con<br>\n <span class=\"line2\">pocos proyectos.<\/span>\n <\/h1>\n <p class=\"hero-sub\">\n Los elegimos bien. Y cuando decimos que <em>estamos contigo<\/em>,\n lo decimos en serio \u2014 tambi\u00e9n en persona.\n <\/p>\n <div class=\"hero-actions\">\n <a href=\"#contacto\" class=\"btn-primary\">Hablemos \u2708<\/a>\n <a href=\"#servicios\" class=\"btn-secondary\">Ver servicios \u2192<\/a>\n <\/div>\n <div class=\"hero-stats\">\n <div>\n <div class=\"stat-num\">100%<\/div>\n <div class=\"stat-label\">Negocios digitales<\/div>\n <\/div>\n <div>\n <div class=\"stat-num\">2<\/div>\n <div class=\"stat-label\">Personas, no agencia<\/div>\n <\/div>\n <div>\n <div class=\"stat-num\">\u221e<\/div>\n <div class=\"stat-label\">Km recorridos por clientes<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"scroll-line\">\n <span>Scroll<\/span>\n <div class=\"scroll-line-bar\"><\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"nosotros\" class=\"section\">\n <div class=\"container\">\n <div class=\"nosotros-grid\">\n\n \n <div class=\"foto-wrap reveal\">\n <div class=\"foto-placeholder\">\n <div class=\"foto-icon\">\ud83d\udcf8<\/div>\n <div class=\"foto-hint\">Aqu\u00ed va vuestra foto.<br>Sustituye este div por un <img><\/div>\n \n <\/div>\n <div class=\"foto-badge\">\n Desde<br>Asturias<br>al mundo\n <\/div>\n <\/div>\n\n \n <div class=\"nosotros-content reveal\">\n <div class=\"section-eyebrow\">Qui\u00e9nes somos<\/div>\n <h2 class=\"section-title\">Irene & Luis<\/h2>\n\n <div class=\"nosotros-story\">\n Luis estudi\u00f3 para piloto.<br>\n <em>Lo dej\u00f3 a medias,<br>o eso pensaba.<\/em>\n <\/div>\n\n <div class=\"nosotros-body\">\n <p>Con el tiempo se dio cuenta de que nunca hab\u00eda dejado de volar. Solo hab\u00eda cambiado de cabina. Hoy pilota campa\u00f1as de Google Ads con la misma l\u00f3gica que aprendi\u00f3 mirando instrumentos: datos, altitud, correcciones constantes, y sin soltar los mandos hasta aterrizar.<\/p>\n <p>Irene lleva los proyectos con la precisi\u00f3n de quien sabe que un vuelo no es solo despegar. Sabe cu\u00e1ndo empujar, cu\u00e1ndo esperar, y c\u00f3mo mantener a todo el mundo orientado cuando aparecen las turbulencias.<\/p>\n <p>Vivimos en Asturias, trabajamos a distancia, y nos desplazamos donde haga falta. Porque creemos que la cercan\u00eda no depende de los kil\u00f3metros.<\/p>\n <\/div>\n\n <div class=\"nosotros-tags\">\n <span class=\"tag\">Google Ads<\/span>\n <span class=\"tag\">Meta Ads<\/span>\n <span class=\"tag\">Project Manager<\/span>\n <span class=\"tag\">Estrategia<\/span>\n <span class=\"tag\">IA aplicada<\/span>\n <span class=\"tag\">Infoproductos<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"valores-grid\">\n <div class=\"valor-card reveal\">\n <div class=\"valor-num\">01<\/div>\n <div class=\"valor-title\">Selecci\u00f3n sobre volumen<\/div>\n <div class=\"valor-desc\">No cogemos cualquier proyecto. Antes de empezar, analizamos si encajamos. Si no, te lo decimos \u2014 aunque duela.<\/div>\n <\/div>\n <div class=\"valor-card reveal\">\n <div class=\"valor-num\">02<\/div>\n <div class=\"valor-title\">Diagn\u00f3stico honesto<\/div>\n <div class=\"valor-desc\">Encontramos lo que falla y lo decimos sin rodeos. Eso es lo que hace un buen amigo que sabe mucho.<\/div>\n <\/div>\n <div class=\"valor-card reveal\">\n <div class=\"valor-num\">03<\/div>\n <div class=\"valor-title\">IA con criterio<\/div>\n <div class=\"valor-desc\">La integramos donde aporta de verdad. No la usamos porque est\u00e9 de moda, sino porque sabemos cu\u00e1ndo tiene sentido.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"servicios\" class=\"section\">\n <div class=\"container\">\n <div class=\"section-eyebrow reveal\">Qu\u00e9 hacemos<\/div>\n <h2 class=\"section-title reveal\">Servicios<\/h2>\n <p class=\"section-lead reveal\">Todo lo que necesita un negocio digital para despegar \u2014 y alguien que se quede en cabina hasta aterrizar.<\/p>\n\n <div class=\"servicios-wrap\">\n\n <div class=\"servicio-item reveal\">\n <div class=\"servicio-header\" onclick=\"toggleServicio(this)\">\n <div class=\"servicio-left\">\n <span class=\"servicio-index\">01<\/span>\n <span class=\"servicio-nombre\">Google Ads<\/span>\n <span class=\"servicio-tag\">El fuerte de Luis<\/span>\n <\/div>\n <div class=\"servicio-arrow\">+<\/div>\n <\/div>\n <div class=\"servicio-body\">\n <div class=\"servicio-body-inner\">\n <div class=\"servicio-desc\">Campa\u00f1as de b\u00fasqueda, display y shopping dise\u00f1adas para convertir. Luis lleva a\u00f1os pilotando cuentas con la misma l\u00f3gica que aprendi\u00f3 en la cabina: datos, correcciones constantes y visi\u00f3n de conjunto. Trabajamos con presupuestos que quieren crecer, no con los que buscan \u00abalgo baratito\u00bb.<\/div>\n <ul class=\"servicio-lista\">\n <li>Auditor\u00eda y diagn\u00f3stico inicial<\/li>\n <li>Estrategia y estructura de campa\u00f1as<\/li>\n <li>Gesti\u00f3n y optimizaci\u00f3n continua<\/li>\n <li>Reporting claro y sin humo<\/li>\n <li>Integraci\u00f3n con anal\u00edtica y CRM<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"servicio-item reveal\">\n <div class=\"servicio-header\" onclick=\"toggleServicio(this)\">\n <div class=\"servicio-left\">\n <span class=\"servicio-index\">02<\/span>\n <span class=\"servicio-nombre\">Meta Ads<\/span>\n <span class=\"servicio-tag\">Social Paid<\/span>\n <\/div>\n <div class=\"servicio-arrow\">+<\/div>\n <\/div>\n <div class=\"servicio-body\">\n <div class=\"servicio-body-inner\">\n <div class=\"servicio-desc\">Facebook e Instagram Ads para infoproductos y negocios digitales. Sabemos lo que funciona en cada fase del embudo \u2014 desde el fr\u00edo hasta el retargeting \u2014 y no vendemos humo con los resultados.<\/div>\n <ul class=\"servicio-lista\">\n <li>Estrategia de captaci\u00f3n y nurturing<\/li>\n <li>Creatividades y copies orientados a conversi\u00f3n<\/li>\n <li>Segmentaci\u00f3n y audiencias personalizadas<\/li>\n <li>Tests A\/B y optimizaci\u00f3n<\/li>\n <li>An\u00e1lisis de resultados real<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"servicio-item reveal\">\n <div class=\"servicio-header\" onclick=\"toggleServicio(this)\">\n <div class=\"servicio-left\">\n <span class=\"servicio-index\">03<\/span>\n <span class=\"servicio-nombre\">Project Management<\/span>\n <span class=\"servicio-tag\">El fuerte de Irene<\/span>\n <\/div>\n <div class=\"servicio-arrow\">+<\/div>\n <\/div>\n <div class=\"servicio-body\">\n <div class=\"servicio-body-inner\">\n <div class=\"servicio-desc\">Irene lleva proyectos digitales complejos con claridad y precisi\u00f3n. Lanzamientos de infoproductos, coordinaci\u00f3n de equipos, gesti\u00f3n de plazos. Todo ordenado, comunicado y entregado. Sin sorpresas de \u00faltima hora.<\/div>\n <ul class=\"servicio-lista\">\n <li>Planificaci\u00f3n y hoja de ruta del proyecto<\/li>\n <li>Coordinaci\u00f3n de equipos y proveedores<\/li>\n <li>Gesti\u00f3n de lanzamientos digitales<\/li>\n <li>Seguimiento y control de tiempos<\/li>\n <li>Comunicaci\u00f3n clara con el cliente<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"servicio-item reveal\">\n <div class=\"servicio-header\" onclick=\"toggleServicio(this)\">\n <div class=\"servicio-left\">\n <span class=\"servicio-index\">04<\/span>\n <span class=\"servicio-nombre\">Estrategia de Marketing<\/span>\n <span class=\"servicio-tag\">El punto de partida<\/span>\n <\/div>\n <div class=\"servicio-arrow\">+<\/div>\n <\/div>\n <div class=\"servicio-body\">\n <div class=\"servicio-body-inner\">\n <div class=\"servicio-desc\">Antes de lanzar nada, analizamos. D\u00f3nde est\u00e1s, d\u00f3nde quieres estar y qu\u00e9 hace falta para llegar. Una estrategia real, adaptada a tu negocio, no un PDF de 80 p\u00e1ginas que nadie lee.<\/div>\n <ul class=\"servicio-lista\">\n <li>An\u00e1lisis de situaci\u00f3n y competencia<\/li>\n <li>Estrategia de comunicaci\u00f3n digital<\/li>\n <li>Definici\u00f3n de canales y presupuesto<\/li>\n <li>Plan de contenidos y lanzamientos<\/li>\n <li>Integraci\u00f3n de IA donde tenga sentido<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"servicio-item reveal\">\n <div class=\"servicio-header\" onclick=\"toggleServicio(this)\">\n <div class=\"servicio-left\">\n <span class=\"servicio-index\">05<\/span>\n <span class=\"servicio-nombre\">Edici\u00f3n de V\u00eddeo & Web<\/span>\n <span class=\"servicio-tag\">Producci\u00f3n digital<\/span>\n <\/div>\n <div class=\"servicio-arrow\">+<\/div>\n <\/div>\n <div class=\"servicio-body\">\n <div class=\"servicio-body-inner\">\n <div class=\"servicio-desc\">Edici\u00f3n de v\u00eddeo para cursos, lanzamientos y redes. Desarrollo web para negocios digitales que necesitan algo m\u00e1s que una plantilla. Siempre orientado a conversi\u00f3n, no solo a que quede bonito.<\/div>\n <ul class=\"servicio-lista\">\n <li>Edici\u00f3n de v\u00eddeo para cursos online<\/li>\n <li>V\u00eddeos de venta y lanzamiento<\/li>\n <li>Desarrollo web en WordPress u otras plataformas<\/li>\n <li>Landing pages de alta conversi\u00f3n<\/li>\n <li>Integraciones con herramientas de venta<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"servicio-item reveal\">\n <div class=\"servicio-header\" onclick=\"toggleServicio(this)\">\n <div class=\"servicio-left\">\n <span class=\"servicio-index\">06<\/span>\n <span class=\"servicio-nombre\">Asistencia Virtual<\/span>\n <span class=\"servicio-tag\">Tu copiloto del d\u00eda a d\u00eda<\/span>\n <\/div>\n <div class=\"servicio-arrow\">+<\/div>\n <\/div>\n <div class=\"servicio-body\">\n <div class=\"servicio-body-inner\">\n <div class=\"servicio-desc\">Apoyo operativo continuo para que t\u00fa te centres en lo que importa y el negocio no se pare. Gestionamos las tareas que consumen tu tiempo pero no necesitan tu cabeza: comunicaciones, coordinaci\u00f3n, seguimientos, herramientas digitales. Todo con la misma exigencia que aplicamos al resto de proyectos \u2014 y con IA integrada donde tiene sentido para que nada se quede a medias.<\/div>\n <ul class=\"servicio-lista\">\n <li>Gesti\u00f3n de agenda, emails y comunicaciones<\/li>\n <li>Coordinaci\u00f3n de proveedores y equipo<\/li>\n <li>Seguimiento de tareas y entregables<\/li>\n <li>Gesti\u00f3n de herramientas digitales (Notion, Slack, Trello\u2026)<\/li>\n <li>Automatizaciones con IA para tareas repetitivas<\/li>\n <li>Soporte en lanzamientos y campa\u00f1as activas<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"proceso\" class=\"section\">\n <div class=\"container\">\n <div class=\"section-eyebrow reveal\">El proceso<\/div>\n <h2 class=\"section-title reveal\">C\u00f3mo trabajamos<\/h2>\n <p class=\"section-lead reveal\">Antes de despegar, revisamos cada instrumento. As\u00ed funciona cada proyecto.<\/p>\n\n <div class=\"proceso-grid\">\n <div class=\"proceso-card reveal\" data-num=\"01\">\n <div class=\"proceso-step\">Paso 01<\/div>\n <div class=\"proceso-title\">Primera llamada<\/div>\n <div class=\"proceso-desc\">Nos conocemos. Entendemos tu negocio, tus objetivos y d\u00f3nde est\u00e1 el problema real. Sin compromiso.<\/div>\n <\/div>\n <div class=\"proceso-card reveal\" data-num=\"02\">\n <div class=\"proceso-step\">Paso 02<\/div>\n <div class=\"proceso-title\">Diagn\u00f3stico<\/div>\n <div class=\"proceso-desc\">Analizamos en profundidad. Detectamos lo que falla y lo que puede mejorar. Y te lo decimos sin filtros.<\/div>\n <\/div>\n <div class=\"proceso-card reveal\" data-num=\"03\">\n <div class=\"proceso-step\">Paso 03<\/div>\n <div class=\"proceso-title\">Plan de vuelo<\/div>\n <div class=\"proceso-desc\">Si encajamos, dise\u00f1amos la estrategia juntos. Cada acci\u00f3n con un prop\u00f3sito claro y un resultado medible.<\/div>\n <\/div>\n <div class=\"proceso-card reveal\" data-num=\"04\">\n <div class=\"proceso-step\">Paso 04<\/div>\n <div class=\"proceso-title\">En cabina<\/div>\n <div class=\"proceso-desc\">Ejecutamos, ajustamos y te mantenemos informado. No desaparecemos. Estamos hasta que aterrizamos.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"clientes\" class=\"section section-logos\">\n <div class=\"container\">\n <div class=\"section-eyebrow reveal\">Con qui\u00e9n volamos<\/div>\n <p class=\"logos-intro reveal\">Trabajamos con negocios digitales que ya tienen tracci\u00f3n y quieren escalar. Estos son los sectores con los que m\u00e1s operamos.<\/p>\n <div class=\"logos-grid reveal\">\n <div class=\"logo-sector\">\n <div class=\"logo-sector-icon\">\ud83c\udf93<\/div>\n <div class=\"logo-sector-name\">Cursos Online<\/div>\n <\/div>\n <div class=\"logo-sector\">\n <div class=\"logo-sector-icon\">\ud83c\udf99\ufe0f<\/div>\n <div class=\"logo-sector-name\">Coaches & Mentores<\/div>\n <\/div>\n <div class=\"logo-sector\">\n <div class=\"logo-sector-icon\">\ud83d\udce6<\/div>\n <div class=\"logo-sector-name\">Infoproductos<\/div>\n <\/div>\n <div class=\"logo-sector\">\n <div class=\"logo-sector-icon\">\ud83d\udcbb<\/div>\n <div class=\"logo-sector-name\">SaaS & Apps<\/div>\n <\/div>\n <div class=\"logo-sector\">\n <div class=\"logo-sector-icon\">\u270d\ufe0f<\/div>\n <div class=\"logo-sector-name\">Personal Brands<\/div>\n <\/div>\n <div class=\"logo-sector\">\n <div class=\"logo-sector-icon\">\ud83d\uded2<\/div>\n <div class=\"logo-sector-name\">Ecommerce Digital<\/div>\n <\/div>\n <\/div>\n <p class=\"logos-nota reveal\">\n \n \u00bfTu sector no aparece? Si tu negocio es 100% digital, probablemente encajamos. <a href=\"#contacto\" class=\"logos-link\">Cu\u00e9ntanoslo \u2192<\/a>\n <\/p>\n <\/div>\n<\/section>\n\n\n<section id=\"encaje\" class=\"section\">\n <div class=\"container\">\n <div class=\"section-eyebrow reveal\">\u00bfEncajamos?<\/div>\n <h2 class=\"section-title reveal\">Antes de hablar,<br>s\u00e9 honesto contigo.<\/h2>\n <p class=\"section-lead reveal\">No trabajamos con todo el mundo. No porque seamos dif\u00edciles, sino porque as\u00ed podemos hacer bien nuestro trabajo.<\/p>\n\n <div class=\"encaje-grid\">\n\n \n <div class=\"encaje-card encaje-si reveal\">\n <div class=\"encaje-header\">\n <div class=\"encaje-icon\">\u2708<\/div>\n <div class=\"encaje-title\">Escala.Studio <span>es para ti<\/span> si\u2026<\/div>\n <\/div>\n <ul class=\"encaje-lista\">\n <li>Tienes un negocio digital que ya genera ventas y quieres escalar<\/li>\n <li>Vendes infoproductos, cursos, servicios online o tienes un SaaS<\/li>\n <li>Buscas una relaci\u00f3n real, no un proveedor que desaparece<\/li>\n <li>Valoras el diagn\u00f3stico honesto aunque no sea lo que quieres o\u00edr<\/li>\n <li>Quieres que alguien se meta de verdad en tu negocio, no que te mande informes<\/li>\n <li>Tienes presupuesto para invertir en publicidad de forma seria<\/li>\n <li>Entiendes que los resultados se construyen, no aparecen de un d\u00eda para otro<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"encaje-card encaje-no reveal\">\n <div class=\"encaje-header\">\n <div class=\"encaje-icon\">\ud83d\udeab<\/div>\n <div class=\"encaje-title\">Probablemente <span>no encajamos<\/span> si\u2026<\/div>\n <\/div>\n <ul class=\"encaje-lista\">\n <li>Tienes un negocio presencial o local sin componente digital<\/li>\n <li>Buscas resultados inmediatos con presupuestos m\u00ednimos<\/li>\n <li>Quieres que gestionemos todo sin involucrarte en el proceso<\/li>\n <li>Necesitas solo ejecuci\u00f3n sin estrategia detr\u00e1s<\/li>\n <li>Est\u00e1s empezando desde cero y a\u00fan no tienes producto validado<\/li>\n <li>Buscas la agencia m\u00e1s barata del mercado<\/li>\n <li>No tienes tiempo para una llamada inicial de diagn\u00f3stico<\/li>\n <\/ul>\n <\/div>\n\n <\/div>\n\n <div class=\"encaje-cta reveal\">\n <p class=\"encaje-cta-text\">\u00bfTe reconoces en la columna verde? Tenemos que hablar.<\/p>\n <a href=\"#contacto\" class=\"btn-primary\">Ver si encajamos \u2708<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"cta-intermedio\">\n <div class=\"cta-intermedio-bg\"><\/div>\n <div class=\"container cta-intermedio-inner\">\n <div class=\"cta-int-left reveal\">\n <div class=\"cta-int-eyebrow\">Primera llamada sin compromiso<\/div>\n <div class=\"cta-int-title\">Cu\u00e9ntanos d\u00f3nde est\u00e1s.<br>Te decimos si podemos<br><em>llevarte m\u00e1s lejos.<\/em><\/div>\n <\/div>\n <div class=\"cta-int-right reveal\">\n <a href=\"#contacto\" class=\"btn-primary btn-large\">Reservar llamada \u2708<\/a>\n <div class=\"cta-int-nota\">Respondemos en menos de 24h \u00b7 Sin compromiso<\/div>\n <\/div>\n <\/div>\n \n <div class=\"cta-runway\">\n <div class=\"cta-runway-line\"><\/div>\n <div class=\"cta-runway-plane\">\u2708<\/div>\n <div class=\"cta-runway-line\"><\/div>\n <\/div>\n<\/div>\n\n\n<section id=\"faq\" class=\"section\">\n <div class=\"container\">\n <div class=\"section-eyebrow reveal\">Preguntas frecuentes<\/div>\n <h2 class=\"section-title reveal\">Lo que nos suelen preguntar<br>antes de despegar.<\/h2>\n\n <div class=\"faq-grid\">\n\n <div class=\"faq-col\">\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfTrabaj\u00e1is con negocios que acaban de empezar?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>Generalmente no. Preferimos trabajar con negocios que ya tienen producto validado y primeras ventas. Si est\u00e1s empezando desde cero, lo mejor es que primero valides tu idea. Cuando tengas tracci\u00f3n, vuelve y hablamos.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfCu\u00e1nto cuesta trabajar con vosotros?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>Depende del proyecto y los servicios que necesites. No publicamos tarifas fijas porque cada situaci\u00f3n es diferente. Lo que s\u00ed te decimos: no somos la opci\u00f3n m\u00e1s barata del mercado, y lo sabemos. Si lo que buscas es precio, hay opciones mejores. Si lo que buscas es resultado, hablemos.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfTrabaj\u00e1is solo con clientes espa\u00f1oles?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>No. Trabajamos en remoto con negocios digitales de cualquier pa\u00eds hispanohablante. Y si el proyecto lo requiere, nos desplazamos. Vivimos en Asturias, pero eso no ha impedido nunca que lleguemos donde hace falta.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfCu\u00e1ntos clientes llev\u00e1is a la vez?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>Pocos. Intencionalmente. Somos dos personas y queremos hacer bien nuestro trabajo. Cuando cogemos un proyecto, lo cogemos de verdad \u2014 no somos una agencia que te pasa a un junior y desaparece. Por eso somos selectivos con lo que aceptamos.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-col\">\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfC\u00f3mo es el proceso para empezar?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>Simple. Rellenas el formulario de contacto o nos escribes. Agendamos una primera llamada de diagn\u00f3stico donde nos cuentas tu situaci\u00f3n. Si vemos que encajamos, te hacemos una propuesta personalizada. Si no, te lo decimos sin rodeos.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfUs\u00e1is IA en vuestro trabajo?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>S\u00ed, pero con criterio. Integramos IA donde tiene sentido y aporta valor real \u2014 en an\u00e1lisis, automatizaciones, optimizaci\u00f3n de campa\u00f1as, generaci\u00f3n de contenido estrat\u00e9gico. No la usamos para rellenar o hacer bulto. Si en tu proyecto no tiene sentido, no la usamos.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfHac\u00e9is contratos de permanencia?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>Dependiendo del servicio s\u00ed hay un m\u00ednimo de compromiso \u2014 especialmente en publicidad, donde los resultados necesitan tiempo para madurar. Pero no hacemos contratos eternos ni atamos a nadie. Preferimos que os qued\u00e9is porque est\u00e1is contentos.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfY si despu\u00e9s de la llamada no encajamos?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>Pasa, y no pasa nada. Si despu\u00e9s de hablar vemos que no somos la mejor opci\u00f3n para ti, te lo decimos. Y si podemos, te orientamos hacia quien s\u00ed pueda ayudarte. Preferimos eso a coger un proyecto que no va a funcionar bien para ninguno de los dos.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<style>\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LOGOS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.section-logos {\n padding-bottom: 80px;\n}\n.logos-intro {\n font-size: 15px;\n color: var(--gris-claro);\n max-width: 560px;\n line-height: 1.8;\n margin-bottom: 48px;\n}\n.logos-grid {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 3px;\n margin-bottom: 28px;\n}\n@media(max-width:900px){ .logos-grid { grid-template-columns: repeat(3,1fr); } }\n@media(max-width:500px){ .logos-grid { grid-template-columns: repeat(2,1fr); } }\n\n.logo-sector {\n background: var(--carbon);\n border: 1px solid var(--borde);\n padding: 28px 16px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n transition: background .25s, border-color .25s, transform .25s;\n cursor: default;\n}\n.logo-sector:hover {\n background: var(--grafito);\n border-color: rgba(0,207,255,0.25);\n transform: translateY(-3px);\n}\n.logo-sector-icon { font-size: 28px; }\n.logo-sector-name {\n font-size: 11px;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n color: var(--gris-claro);\n text-align: center;\n line-height: 1.4;\n}\n.logos-nota {\n font-size: 13px;\n color: var(--gris);\n line-height: 1.7;\n}\n.logos-link {\n color: var(--acento);\n text-decoration: none;\n border-bottom: 1px solid rgba(0,207,255,0.3);\n transition: border-color .2s;\n}\n.logos-link:hover { border-color: var(--acento); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 ENCAJE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.encaje-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 3px;\n margin-bottom: 48px;\n}\n@media(max-width:768px){ .encaje-grid { grid-template-columns: 1fr; } }\n\n.encaje-card {\n padding: 40px 36px;\n}\n.encaje-si {\n background: rgba(0,207,255,0.05);\n border: 1px solid rgba(0,207,255,0.2);\n}\n.encaje-no {\n background: rgba(255,255,255,0.02);\n border: 1px solid var(--borde);\n}\n.encaje-header {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n margin-bottom: 28px;\n}\n.encaje-icon {\n font-size: 24px;\n margin-top: 2px;\n flex-shrink: 0;\n}\n.encaje-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 22px;\n letter-spacing: 1px;\n color: var(--blanco-puro);\n line-height: 1.2;\n}\n.encaje-si .encaje-title span { color: var(--acento); }\n.encaje-no .encaje-title span { color: var(--gris-claro); }\n\n.encaje-lista {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n.encaje-lista li {\n font-size: 14px;\n line-height: 1.6;\n color: var(--gris-claro);\n padding: 12px 0;\n border-bottom: 1px solid var(--borde);\n display: flex;\n align-items: flex-start;\n gap: 12px;\n}\n.encaje-lista li:last-child { border-bottom: none; }\n.encaje-si .encaje-lista li::before {\n content: '\u2713';\n color: var(--acento);\n font-weight: 500;\n font-size: 13px;\n flex-shrink: 0;\n margin-top: 1px;\n}\n.encaje-no .encaje-lista li::before {\n content: '\u00d7';\n color: var(--gris);\n font-size: 16px;\n flex-shrink: 0;\n line-height: 1.4;\n}\n\n.encaje-cta {\n display: flex;\n align-items: center;\n gap: 32px;\n padding: 36px 40px;\n background: var(--carbon);\n border: 1px solid var(--borde);\n flex-wrap: wrap;\n}\n.encaje-cta-text {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: 20px;\n color: var(--blanco);\n flex: 1;\n min-width: 200px;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CTA INTERMEDIO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.cta-intermedio {\n position: relative;\n padding: 80px 0;\n overflow: hidden;\n background: var(--grafito);\n border-top: 1px solid rgba(0,207,255,0.15);\n border-bottom: 1px solid rgba(0,207,255,0.15);\n}\n.cta-intermedio-bg {\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse at 20% 50%, rgba(0,207,255,0.07) 0%, transparent 60%),\n radial-gradient(ellipse at 80% 50%, rgba(0,207,255,0.04) 0%, transparent 60%);\n pointer-events: none;\n}\n.cta-intermedio-inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 48px;\n flex-wrap: wrap;\n position: relative;\n z-index: 1;\n}\n.cta-int-eyebrow {\n font-size: 10px;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: var(--acento);\n margin-bottom: 16px;\n}\n.cta-int-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(32px, 4vw, 52px);\n line-height: 1.05;\n letter-spacing: 1px;\n color: var(--blanco-puro);\n}\n.cta-int-title em {\n color: var(--acento);\n font-style: normal;\n}\n.cta-int-right {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n flex-shrink: 0;\n}\n.btn-large {\n font-size: 13px !important;\n padding: 20px 40px !important;\n}\n.cta-int-nota {\n font-size: 11px;\n letter-spacing: 1px;\n color: var(--gris);\n}\n\n\/* Pista decorativa del CTA *\/\n.cta-runway {\n position: absolute;\n bottom: 0; left: 0; right: 0;\n height: 24px;\n display: flex;\n align-items: center;\n padding: 0 40px;\n gap: 8px;\n pointer-events: none;\n}\n.cta-runway-line {\n flex: 1;\n height: 1px;\n background: repeating-linear-gradient(\n 90deg,\n rgba(0,207,255,0.3) 0px, rgba(0,207,255,0.3) 16px,\n transparent 16px, transparent 28px\n );\n}\n.cta-runway-plane {\n font-size: 14px;\n color: var(--acento);\n animation: planePulse 2s ease-in-out infinite;\n filter: drop-shadow(0 0 6px rgba(0,207,255,0.6));\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FAQ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.faq-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0 48px;\n margin-top: 56px;\n}\n@media(max-width:768px){ .faq-grid { grid-template-columns: 1fr; } }\n\n.faq-col { display: flex; flex-direction: column; }\n\n.faq-item {\n border-bottom: 1px solid var(--borde);\n}\n.faq-item:first-child { border-top: 1px solid var(--borde); }\n\n.faq-q {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 22px 0;\n cursor: pointer;\n gap: 20px;\n transition: color .25s;\n}\n.faq-q:hover { color: var(--acento); }\n.faq-q span {\n font-size: 15px;\n font-weight: 400;\n line-height: 1.4;\n color: var(--blanco);\n transition: color .25s;\n flex: 1;\n}\n.faq-q:hover span { color: var(--acento); }\n\n.faq-arrow {\n width: 28px; height: 28px;\n border: 1px solid var(--borde);\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n font-size: 18px;\n color: var(--gris-claro);\n transition: all .3s;\n}\n.faq-item.open .faq-arrow {\n transform: rotate(45deg);\n background: var(--acento);\n color: var(--negro);\n border-color: var(--acento);\n}\n\n.faq-a {\n max-height: 0;\n overflow: hidden;\n transition: max-height .4s cubic-bezier(.4,0,.2,1);\n}\n.faq-a p {\n font-size: 14px;\n line-height: 1.85;\n color: var(--gris-claro);\n padding-bottom: 22px;\n}\n<\/style>\n\n\n<script>\nfunction toggleFaq(el) {\n const item = el.parentElement;\n const answer = item.querySelector('.faq-a');\n const isOpen = item.classList.contains('open');\n \/\/ Cierra todos\n document.querySelectorAll('.faq-item.open').forEach(i => {\n i.classList.remove('open');\n i.querySelector('.faq-a').style.maxHeight = '0';\n });\n \/\/ Abre el clickado\n if (!isOpen) {\n item.classList.add('open');\n answer.style.maxHeight = answer.scrollHeight + 'px';\n }\n}\n<\/script>\n\n\n<section id=\"contacto\" class=\"section\">\n <div class=\"container\">\n <div class=\"section-eyebrow reveal\">Hablemos<\/div>\n <h2 class=\"section-title reveal\">\u00bfTu negocio est\u00e1 en pista<br>pero no despega?<\/h2>\n\n <div class=\"contacto-grid\">\n\n <div class=\"contacto-info reveal\">\n <div class=\"contacto-claim\">\n Cu\u00e9ntanos qu\u00e9 tienes entre manos.<br>\n <em>Te diremos si podemos ayudarte.<\/em>\n <\/div>\n <p class=\"contacto-desc\">\n No hacemos propuestas gen\u00e9ricas. Si despu\u00e9s de hablar contigo creemos que no encajamos, te lo decimos \u2014 y si podemos, te orientamos hacia quien s\u00ed pueda ayudarte.\n <\/p>\n\n <div class=\"contacto-dato\">\n <div class=\"contacto-dato-icon\">\u2708<\/div>\n Nos desplazamos donde haga falta\n <\/div>\n <div class=\"contacto-dato\">\n <div class=\"contacto-dato-icon\">\ud83d\udccd<\/div>\n Asturias, Espa\u00f1a\n <\/div>\n <div class=\"contacto-dato\">\n <div class=\"contacto-dato-icon\">\ud83d\udcac<\/div>\n Respondemos en menos de 24h\n <\/div>\n <div class=\"contacto-dato\">\n <div class=\"contacto-dato-icon\">\ud83e\udd1d<\/div>\n Solo trabajamos con negocios digitales\n <\/div>\n <\/div>\n\n <div class=\"form-wrap reveal\">\n <div class=\"form-title\">Cu\u00e9ntanos tu proyecto<\/div>\n <form onsubmit=\"handleSubmit(event)\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label class=\"form-label\">Nombre<\/label>\n <input type=\"text\" class=\"form-input\" placeholder=\"Tu nombre\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Email<\/label>\n <input type=\"email\" class=\"form-input\" placeholder=\"tu@email.com\" required>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">\u00bfEn qu\u00e9 podemos ayudarte?<\/label>\n <select class=\"form-select form-input\">\n <option value=\"\" disabled selected>Selecciona un servicio<\/option>\n <option>Google Ads<\/option>\n <option>Meta Ads<\/option>\n <option>Project Management<\/option>\n <option>Estrategia de Marketing<\/option>\n <option>Edici\u00f3n de V\u00eddeo o Web<\/option>\n <option>Varios servicios \/ No lo s\u00e9 a\u00fan<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Cu\u00e9ntanos tu proyecto<\/label>\n <textarea class=\"form-textarea\" placeholder=\"Qu\u00e9 hace tu negocio, d\u00f3nde est\u00e1s ahora y qu\u00e9 necesitas conseguir...\" required><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"form-submit\">Enviar mensaje \u2708<\/button>\n <p class=\"form-nota\">Sin compromisos. Si encajamos, te lo decimos. Si no, tambi\u00e9n.<\/p>\n <\/form>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<footer>\n <div class=\"container\">\n <div class=\"footer-inner\">\n <div>\n <div class=\"footer-logo\">ESCALA<span>.<\/span>STUDIO<\/div>\n <div class=\"footer-claim\">Volamos contigo. Hasta donde haga falta.<\/div>\n <div class=\"footer-social\">\n <a href=\"https:\/\/instagram.com\/escala.studio\" target=\"_blank\" class=\"social-link\" title=\"Instagram\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\n <\/a>\n <a href=\"https:\/\/linkedin.com\/company\/escala.studio\" target=\"_blank\" class=\"social-link\" title=\"LinkedIn\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"3\"\/><path d=\"M7 10v7M7 7v.5M12 17v-4a2 2 0 014 0v4M12 10v7\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#nosotros\">Nosotros<\/a><\/li>\n <li><a href=\"#servicios\">Servicios<\/a><\/li>\n <li><a href=\"#encaje\">\u00bfEncajamos?<\/a><\/li>\n <li><a href=\"#proceso\">Proceso<\/a><\/li>\n <li><a href=\"#faq\">FAQ<\/a><\/li>\n <li><a href=\"#contacto\">Contacto<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer-bottom\">\n <div class=\"footer-copy\">\u00a9 2026 Escala.Studio \u00b7 Todos los derechos reservados<\/div>\n <div class=\"footer-hecho\">Hecho con <span>\u2708<\/span> desde Asturias<\/div>\n <\/div>\n <\/div>\n<\/footer>\n\n<style>\n.footer-social {\n display: flex;\n gap: 12px;\n margin-top: 20px;\n}\n.social-link {\n width: 36px; height: 36px;\n border: 1px solid var(--borde);\n display: flex; align-items: center; justify-content: center;\n color: var(--gris);\n text-decoration: none;\n transition: color .25s, border-color .25s;\n}\n.social-link:hover {\n color: var(--acento);\n border-color: rgba(0,207,255,0.3);\n}\n<\/style>\n\n\n<script>\n \/\/ Nav scroll\n const nav = document.getElementById('nav');\n window.addEventListener('scroll', () => {\n nav.classList.toggle('scrolled', window.scrollY > 60);\n });\n\n \/\/ Reveal on scroll\n const revealEls = document.querySelectorAll('.reveal');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry, i) => {\n if (entry.isIntersecting) {\n setTimeout(() => entry.target.classList.add('visible'), i * 80);\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.12 });\n revealEls.forEach(el => observer.observe(el));\n\n \/\/ Acorde\u00f3n servicios\n function toggleServicio(header) {\n const item = header.parentElement;\n const body = item.querySelector('.servicio-body');\n const isOpen = item.classList.contains('open');\n\n \/\/ Cierra todos\n document.querySelectorAll('.servicio-item.open').forEach(i => {\n i.classList.remove('open');\n i.querySelector('.servicio-body').style.maxHeight = '0';\n });\n\n \/\/ Abre el clickado si estaba cerrado\n if (!isOpen) {\n item.classList.add('open');\n body.style.maxHeight = body.scrollHeight + 'px';\n }\n }\n\n \/\/ Formulario\n function handleSubmit(e) {\n e.preventDefault();\n const btn = e.target.querySelector('.form-submit');\n btn.textContent = '\u2713 Mensaje enviado \u2014 Te respondemos pronto';\n btn.style.background = '#1D2D3E';\n btn.style.color = '#00CFFF';\n btn.disabled = true;\n \/\/ Aqu\u00ed conectar\u00edas con tu backend, Formspree, EmailJS, etc.\n }\n\n \/\/ Mobile menu (b\u00e1sico)\n function toggleMenu() {\n const links = document.querySelector('.nav-links');\n const cta = document.querySelector('.nav-cta-wrap');\n \/\/ Implementar seg\u00fan necesidad\n }\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<div id=\"plane-traveler\" aria-hidden=\"true\">\u2708<\/div>\n\n\n<div id=\"runway-overlay\" aria-hidden=\"true\">\n <div class=\"runway-track\">\n <div class=\"runway-center-line\"><\/div>\n <div class=\"runway-mark\" style=\"left:8%\">TKO<\/div>\n <div class=\"runway-mark\" style=\"left:28%\">28L<\/div>\n <div class=\"runway-mark\" style=\"left:50%\">SCL<\/div>\n <div class=\"runway-mark\" style=\"left:72%\">EST<\/div>\n <div class=\"runway-mark\" style=\"left:90%\">LDG<\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"radar-widget\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 120 120\" width=\"120\" height=\"120\">\n <circle cx=\"60\" cy=\"60\" r=\"55\" fill=\"none\" stroke=\"rgba(0,207,255,0.15)\" stroke-width=\"1\"\/>\n <circle cx=\"60\" cy=\"60\" r=\"37\" fill=\"none\" stroke=\"rgba(0,207,255,0.1)\" stroke-width=\"1\"\/>\n <circle cx=\"60\" cy=\"60\" r=\"18\" fill=\"none\" stroke=\"rgba(0,207,255,0.08)\" stroke-width=\"1\"\/>\n <line x1=\"60\" y1=\"60\" x2=\"60\" y2=\"6\" stroke=\"rgba(0,207,255,0.25)\" stroke-width=\"1\"\/>\n <line x1=\"60\" y1=\"60\" x2=\"114\" y2=\"60\" stroke=\"rgba(0,207,255,0.15)\" stroke-width=\"1\"\/>\n <line x1=\"60\" y1=\"60\" x2=\"60\" y2=\"114\" stroke=\"rgba(0,207,255,0.15)\" stroke-width=\"1\"\/>\n <line x1=\"60\" y1=\"60\" x2=\"6\" y2=\"60\" stroke=\"rgba(0,207,255,0.15)\" stroke-width=\"1\"\/>\n \n <line id=\"radar-sweep\" x1=\"60\" y1=\"60\" x2=\"115\" y2=\"60\"\n stroke=\"rgba(0,207,255,0.7)\" stroke-width=\"1.5\"\n style=\"transform-origin:60px 60px; animation: radarSpin 3s linear infinite;\"\/>\n \n <circle id=\"radar-blip\" cx=\"88\" cy=\"38\" r=\"3\" fill=\"var(--acento)\" opacity=\"0\">\n <animate attributeName=\"opacity\" values=\"0;1;0\" dur=\"3s\" repeatCount=\"indefinite\" begin=\"0.8s\"\/>\n <\/circle>\n <circle cx=\"42\" cy=\"75\" r=\"2\" fill=\"var(--acento)\" opacity=\"0\">\n <animate attributeName=\"opacity\" values=\"0;0.8;0\" dur=\"3s\" repeatCount=\"indefinite\" begin=\"1.6s\"\/>\n <\/circle>\n <\/svg>\n <div class=\"radar-label\">ESCALA.STUDIO \u00b7 EN RUTA<\/div>\n<\/div>\n\n\n<div id=\"route-svg-left\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 60 800\" preserveAspectRatio=\"none\" width=\"60\" height=\"800\">\n <defs>\n <linearGradient id=\"routeGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stop-color=\"rgba(0,207,255,0)\"\/>\n <stop offset=\"30%\" stop-color=\"rgba(0,207,255,0.4)\"\/>\n <stop offset=\"70%\" stop-color=\"rgba(0,207,255,0.4)\"\/>\n <stop offset=\"100%\" stop-color=\"rgba(0,207,255,0)\"\/>\n <\/linearGradient>\n <\/defs>\n <path d=\"M30 0 C30 100, 10 150, 30 250 C50 350, 10 400, 30 500 C50 600, 10 650, 30 800\"\n fill=\"none\" stroke=\"url(#routeGrad)\" stroke-width=\"1.5\" stroke-dasharray=\"6 8\"\n id=\"route-path-left\"\/>\n \n <circle cx=\"30\" cy=\"250\" r=\"4\" fill=\"none\" stroke=\"rgba(0,207,255,0.5)\" stroke-width=\"1.5\">\n <animate attributeName=\"r\" values=\"4;7;4\" dur=\"2.5s\" repeatCount=\"indefinite\"\/>\n <animate attributeName=\"opacity\" values=\"0.5;1;0.5\" dur=\"2.5s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <circle cx=\"30\" cy=\"500\" r=\"4\" fill=\"none\" stroke=\"rgba(0,207,255,0.5)\" stroke-width=\"1.5\">\n <animate attributeName=\"r\" values=\"4;7;4\" dur=\"2.5s\" repeatCount=\"indefinite\" begin=\"1.2s\"\/>\n <animate attributeName=\"opacity\" values=\"0.5;1;0.5\" dur=\"2.5s\" repeatCount=\"indefinite\" begin=\"1.2s\"\/>\n <\/circle>\n <\/svg>\n<\/div>\n\n\n<div id=\"airport-ticker\" aria-hidden=\"true\">\n <div class=\"ticker-label\">PR\u00d3XIMOS DESTINOS<\/div>\n <div class=\"ticker-track\">\n <div class=\"ticker-inner\" id=\"tickerInner\">\n <span>\u00b7 GOOGLE ADS \u00b7 OPTIMIZACI\u00d3N \u00b7<\/span>\n <span>\u00b7 META ADS \u00b7 CONVERSI\u00d3N \u00b7<\/span>\n <span>\u00b7 PROJECT MANAGEMENT \u00b7 CONTROL \u00b7<\/span>\n <span>\u00b7 ESTRATEGIA \u00b7 CRECIMIENTO \u00b7<\/span>\n <span>\u00b7 IA APLICADA \u00b7 EFICIENCIA \u00b7<\/span>\n <span>\u00b7 INFOPRODUCTOS \u00b7 LANZAMIENTOS \u00b7<\/span>\n <span>\u00b7 EDICI\u00d3N DE V\u00cdDEO \u00b7 PRODUCCI\u00d3N \u00b7<\/span>\n <span>\u00b7 DESARROLLO WEB \u00b7 CONVERSI\u00d3N \u00b7<\/span>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"altitude-marker\" data-alt=\"FL350\" id=\"alt-nosotros\" aria-hidden=\"true\"><\/div>\n<div class=\"altitude-marker\" data-alt=\"FL280\" id=\"alt-servicios\" aria-hidden=\"true\"><\/div>\n<div class=\"altitude-marker\" data-alt=\"FL120\" id=\"alt-proceso\" aria-hidden=\"true\"><\/div>\n<div class=\"altitude-marker\" data-alt=\"FL000\" id=\"alt-contacto\" aria-hidden=\"true\"><\/div>\n\n\n<div id=\"coords-display\" aria-hidden=\"true\">\n <div class=\"coord-line\">43\u00b021’N \u00b7 005\u00b051’W<\/div>\n <div class=\"coord-label\">ASTURIAS \u00b7 BASE OPS<\/div>\n<\/div>\n\n<style>\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\n AVI\u00d3N QUE SIGUE EL SCROLL\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 *\/\n#plane-traveler {\n position: fixed;\n right: 28px;\n top: 50%;\n z-index: 90;\n font-size: 22px;\n pointer-events: none;\n transition: top 0.08s linear;\n filter: drop-shadow(0 0 8px rgba(0,207,255,0.6));\n transform: rotate(-45deg);\n opacity: 0.85;\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\n PISTA DE ATERRIZAJE \u2014 hero bottom\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 *\/\n#runway-overlay {\n position: absolute;\n bottom: 0; left: 0; right: 0;\n height: 90px;\n overflow: hidden;\n pointer-events: none;\n z-index: 2;\n}\n.runway-track {\n position: absolute;\n bottom: 0; left: 0; right: 0;\n height: 48px;\n background: rgba(0,0,0,0.25);\n border-top: 1px solid rgba(0,207,255,0.2);\n display: flex;\n align-items: center;\n}\n.runway-center-line {\n position: absolute;\n left: 0; right: 0;\n top: 50%;\n height: 1px;\n background: repeating-linear-gradient(\n 90deg,\n rgba(0,207,255,0.5) 0px,\n rgba(0,207,255,0.5) 32px,\n transparent 32px,\n transparent 56px\n );\n animation: runwayScroll 4s linear infinite;\n}\n@keyframes runwayScroll {\n from { background-position: 0 0; }\n to { background-position: 88px 0; }\n}\n.runway-mark {\n position: absolute;\n bottom: 4px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 10px;\n letter-spacing: 2px;\n color: rgba(0,207,255,0.4);\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\n RADAR FLOTANTE\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 *\/\n#radar-widget {\n position: fixed;\n bottom: 32px;\n left: 28px;\n z-index: 90;\n pointer-events: none;\n opacity: 0.75;\n transition: opacity .3s;\n}\n#radar-widget:hover { opacity: 1; }\n.radar-label {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 9px;\n letter-spacing: 3px;\n color: rgba(0,207,255,0.5);\n text-align: center;\n margin-top: 4px;\n}\n@keyframes radarSpin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n@media(max-width:768px){ #radar-widget { display:none; } }\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\n RUTA SVG LATERAL\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 *\/\n#route-svg-left {\n position: fixed;\n left: 0; top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n pointer-events: none;\n opacity: 0.5;\n transition: opacity .4s;\n}\n@media(max-width:1200px){ #route-svg-left { display:none; } }\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\n TICKER AEROPUERTO\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 *\/\n#airport-ticker {\n background: rgba(9,14,20,0.95);\n border-top: 1px solid rgba(0,207,255,0.15);\n border-bottom: 1px solid rgba(0,207,255,0.15);\n padding: 10px 0;\n overflow: hidden;\n position: relative;\n}\n.ticker-label {\n position: absolute;\n left: 0; top: 0; bottom: 0;\n z-index: 2;\n padding: 0 20px;\n background: var(--acento);\n color: var(--negro);\n font-family: 'Bebas Neue', sans-serif;\n font-size: 11px;\n letter-spacing: 2px;\n display: flex;\n align-items: center;\n white-space: nowrap;\n}\n.ticker-track {\n padding-left: 200px;\n overflow: hidden;\n}\n.ticker-inner {\n display: flex;\n gap: 0;\n animation: tickerMove 30s linear infinite;\n white-space: nowrap;\n}\n.ticker-inner span {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 13px;\n letter-spacing: 3px;\n color: rgba(0,207,255,0.6);\n padding: 0 20px;\n flex-shrink: 0;\n}\n@keyframes tickerMove {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\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\n MARCADORES DE ALTITUD\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 *\/\n.altitude-marker {\n position: relative;\n pointer-events: none;\n}\n.altitude-marker::before {\n content: 'ALT \u00b7 ' attr(data-alt);\n position: absolute;\n right: 40px;\n top: -14px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 10px;\n letter-spacing: 3px;\n color: rgba(0,207,255,0.3);\n z-index: 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\n COORDENADAS EN HERO\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 *\/\n#coords-display {\n position: absolute;\n bottom: 56px;\n right: 40px;\n z-index: 3;\n text-align: right;\n pointer-events: none;\n opacity: 0;\n animation: fadeUp .8s ease forwards 1.1s;\n}\n.coord-line {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 13px;\n letter-spacing: 3px;\n color: rgba(0,207,255,0.5);\n}\n.coord-label {\n font-size: 9px;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: rgba(0,207,255,0.25);\n margin-top: 3px;\n}\n@media(max-width:768px){\n #coords-display { right: 24px; bottom: 64px; }\n #plane-traveler { right: 12px; font-size: 18px; }\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\n PARALLAX HERO GRID\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 *\/\n.hero-grid {\n transition: transform 0.1s linear;\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\n L\u00cdNEA DE RUTA EN PROCESO\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 *\/\n.proceso-connector {\n display: flex;\n align-items: center;\n margin-bottom: -3px;\n padding: 0 0 0 40px;\n position: relative;\n z-index: 1;\n pointer-events: none;\n}\n.proceso-connector-line {\n flex: 1;\n height: 1px;\n background: repeating-linear-gradient(\n 90deg,\n rgba(0,207,255,0.4) 0px, rgba(0,207,255,0.4) 12px,\n transparent 12px, transparent 22px\n );\n}\n.proceso-connector-plane {\n font-size: 16px;\n margin: 0 8px;\n color: var(--acento);\n animation: planePulse 2s ease-in-out infinite;\n filter: drop-shadow(0 0 6px rgba(0,207,255,0.7));\n}\n@keyframes planePulse {\n 0%,100% { transform: translateX(0) rotate(-45deg); opacity:.8; }\n 50% { transform: translateX(6px) rotate(-45deg); opacity:1; }\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\n ESTELA DEL CURSOR\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 *\/\n.cursor-trail {\n position: fixed;\n width: 6px; height: 6px;\n border-radius: 50%;\n background: var(--acento);\n pointer-events: none;\n z-index: 9999;\n transform: translate(-50%, -50%);\n opacity: 0;\n transition: opacity .2s;\n}\n<\/style>\n\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\n AVI\u00d3N QUE SIGUE EL SCROLL\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 *\/\nconst plane = document.getElementById('plane-traveler');\nlet lastScroll = 0;\n\nfunction updatePlane() {\n const scrolled = window.scrollY;\n const maxScroll = document.body.scrollHeight - window.innerHeight;\n const progress = scrolled \/ maxScroll;\n \/\/ Mueve de 8% a 92% de la pantalla verticalmente\n const topPct = 8 + progress * 84;\n plane.style.top = topPct + 'vh';\n\n \/\/ Inclina seg\u00fan direcci\u00f3n del scroll\n const delta = scrolled - lastScroll;\n if (delta > 0) {\n plane.style.transform = 'rotate(-30deg)';\n } else if (delta < 0) {\n plane.style.transform = 'rotate(-60deg)';\n } else {\n plane.style.transform = 'rotate(-45deg)';\n }\n lastScroll = scrolled;\n}\n\nwindow.addEventListener('scroll', updatePlane, { passive: true });\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\n PARALLAX EN HERO GRID\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 *\/\nconst heroGrid = document.querySelector('.hero-grid');\nconst heroGlow = document.querySelector('.hero-glow');\n\nwindow.addEventListener('scroll', () => {\n const y = window.scrollY;\n if (heroGrid) heroGrid.style.transform = `translateY(${y * 0.3}px)`;\n if (heroGlow) heroGlow.style.transform = `translateY(${y * 0.2}px)`;\n}, { passive: true });\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\n TICKER DUPLICADO\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 *\/\nconst ticker = document.getElementById('tickerInner');\nif (ticker) {\n ticker.innerHTML += ticker.innerHTML; \/\/ Duplicar para loop infinito\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\n CONECTOR DE RUTA EN PROCESO\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 *\/\nconst procesoGrid = document.querySelector('.proceso-grid');\nif (procesoGrid) {\n const connector = document.createElement('div');\n connector.className = 'proceso-connector reveal';\n connector.innerHTML = `\n <div class=\"proceso-connector-line\"><\/div>\n <div class=\"proceso-connector-plane\">\u2708<\/div>\n <div class=\"proceso-connector-line\"><\/div>\n `;\n procesoGrid.parentNode.insertBefore(connector, procesoGrid);\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\n MARCADORES DE ALTITUD\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 *\/\nconst altMap = {\n 'alt-nosotros': 'nosotros',\n 'alt-servicios': 'servicios',\n 'alt-proceso': 'proceso',\n 'alt-contacto': 'contacto'\n};\nObject.entries(altMap).forEach(([markerId, sectionId]) => {\n const marker = document.getElementById(markerId);\n const section = document.getElementById(sectionId);\n if (marker && section) {\n section.style.position = 'relative';\n section.prepend(marker);\n }\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\n ESTELA DEL CURSOR\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 *\/\nconst trails = [];\nfor (let i = 0; i < 6; i++) {\n const dot = document.createElement('div');\n dot.className = 'cursor-trail';\n dot.style.width = (6 - i) + 'px';\n dot.style.height = (6 - i) + 'px';\n dot.style.opacity = (0.5 - i * 0.08).toString();\n document.body.appendChild(dot);\n trails.push({ el: dot, x: 0, y: 0 });\n}\n\nlet mouseX = 0, mouseY = 0;\ndocument.addEventListener('mousemove', e => {\n mouseX = e.clientX;\n mouseY = e.clientY;\n trails[0].el.style.opacity = '0.6';\n});\n\nfunction animateTrail() {\n let prevX = mouseX, prevY = mouseY;\n trails.forEach((trail, i) => {\n const speed = 0.25 - i * 0.035;\n trail.x += (prevX - trail.x) * speed;\n trail.y += (prevY - trail.y) * speed;\n trail.el.style.left = trail.x + 'px';\n trail.el.style.top = trail.y + 'px';\n prevX = trail.x;\n prevY = trail.y;\n });\n requestAnimationFrame(animateTrail);\n}\nanimateTrail();\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\n CONTADOR ANIMADO EN STATS\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 *\/\nfunction animateValue(el, end, suffix = '', duration = 1800) {\n let start = 0;\n const step = end \/ (duration \/ 16);\n const timer = setInterval(() => {\n start += step;\n if (start >= end) { start = end; clearInterval(timer); }\n el.textContent = Math.floor(start) + suffix;\n }, 16);\n}\n\n\/\/ Trigger cuando el hero stats entra en vista\nconst statsObs = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n statsObs.unobserve(entry.target);\n }\n });\n}, { threshold: 0.5 });\n\nconst heroStats = document.querySelector('.hero-stats');\nif (heroStats) statsObs.observe(heroStats);\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\n GLITCH EN LOGO AL HOVER\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 *\/\nconst navLogo = document.querySelector('.nav-logo');\nif (navLogo) {\n navLogo.addEventListener('mouseenter', () => {\n navLogo.style.transition = 'none';\n navLogo.style.textShadow =\n '2px 0 0 rgba(0,207,255,0.5), -2px 0 0 rgba(0,207,255,0.3)';\n setTimeout(() => {\n navLogo.style.textShadow =\n '-2px 0 0 rgba(0,207,255,0.5), 2px 0 0 rgba(0,207,255,0.3)';\n }, 80);\n setTimeout(() => {\n navLogo.style.textShadow = 'none';\n }, 160);\n });\n}\n<\/script>\n\n\n\n\n<div id=\"altitude-hud\" aria-hidden=\"true\">\n <div class=\"hud-label\">ALT<\/div>\n <div class=\"hud-bar-wrap\">\n <div class=\"hud-bar-fill\" id=\"hudBarFill\"><\/div>\n <div class=\"hud-tick\" style=\"bottom:25%\"><span>FL100<\/span><\/div>\n <div class=\"hud-tick\" style=\"bottom:50%\"><span>FL200<\/span><\/div>\n <div class=\"hud-tick\" style=\"bottom:75%\"><span>FL350<\/span><\/div>\n <\/div>\n <div class=\"hud-label\" id=\"hudAltValue\">FL000<\/div>\n<\/div>\n\n\n<div id=\"compass-widget\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 80 80\" width=\"80\" height=\"80\">\n <circle cx=\"40\" cy=\"40\" r=\"36\" fill=\"none\" stroke=\"rgba(0,207,255,0.15)\" stroke-width=\"1\"\/>\n <circle cx=\"40\" cy=\"40\" r=\"28\" fill=\"none\" stroke=\"rgba(0,207,255,0.08)\" stroke-width=\"1\"\/>\n \n <text x=\"40\" y=\"10\" text-anchor=\"middle\" fill=\"rgba(0,207,255,0.8)\" font-size=\"8\" font-family=\"Bebas Neue, sans-serif\" letter-spacing=\"1\">N<\/text>\n <text x=\"40\" y=\"76\" text-anchor=\"middle\" fill=\"rgba(0,207,255,0.4)\" font-size=\"7\" font-family=\"Bebas Neue, sans-serif\">S<\/text>\n <text x=\"72\" y=\"44\" text-anchor=\"middle\" fill=\"rgba(0,207,255,0.4)\" font-size=\"7\" font-family=\"Bebas Neue, sans-serif\">E<\/text>\n <text x=\"8\" y=\"44\" text-anchor=\"middle\" fill=\"rgba(0,207,255,0.4)\" font-size=\"7\" font-family=\"Bebas Neue, sans-serif\">O<\/text>\n \n <g id=\"compassNeedle\" style=\"transform-origin:40px 40px; animation: compassSpin 12s ease-in-out infinite alternate;\">\n <polygon points=\"40,12 43,40 40,44 37,40\" fill=\"rgba(0,207,255,0.9)\"\/>\n <polygon points=\"40,68 43,40 40,44 37,40\" fill=\"rgba(255,255,255,0.2)\"\/>\n <\/g>\n <circle cx=\"40\" cy=\"40\" r=\"3\" fill=\"rgba(0,207,255,0.6)\"\/>\n <\/svg>\n <div class=\"compass-label\">RUMBO<\/div>\n<\/div>\n\n\n<div id=\"morse-strip\" aria-hidden=\"true\">\n \n <span class=\"morse-dot\"><\/span>\n <span class=\"morse-gap\"><\/span>\n <span class=\"morse-dot\"><\/span><span class=\"morse-dot\"><\/span><span class=\"morse-dot\"><\/span>\n <span class=\"morse-gap\"><\/span>\n <span class=\"morse-dash\"><\/span><span class=\"morse-dot\"><\/span><span class=\"morse-dash\"><\/span><span class=\"morse-dot\"><\/span>\n <span class=\"morse-gap\"><\/span>\n <span class=\"morse-dot\"><\/span><span class=\"morse-dash\"><\/span>\n <span class=\"morse-gap\"><\/span>\n <span class=\"morse-dot\"><\/span><span class=\"morse-dash\"><\/span><span class=\"morse-dot\"><\/span><span class=\"morse-dot\"><\/span>\n <span class=\"morse-gap\"><\/span>\n <span class=\"morse-dot\"><\/span><span class=\"morse-dash\"><\/span>\n<\/div>\n\n\n\n\n\n<canvas id=\"contrail-canvas\" aria-hidden=\"true\"><\/canvas>\n\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HUD ALT\u00cdMETRO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#altitude-hud {\n position: fixed;\n right: 60px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 89;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n pointer-events: none;\n opacity: 0.55;\n transition: opacity .3s;\n}\n#altitude-hud:hover { opacity: 0.9; }\n\n.hud-label {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 9px;\n letter-spacing: 3px;\n color: rgba(0,207,255,0.7);\n}\n#hudAltValue {\n font-size: 10px;\n color: rgba(0,207,255,0.9);\n letter-spacing: 2px;\n}\n.hud-bar-wrap {\n width: 3px;\n height: 120px;\n background: rgba(0,207,255,0.08);\n border: 1px solid rgba(0,207,255,0.15);\n position: relative;\n overflow: visible;\n}\n.hud-bar-fill {\n position: absolute;\n bottom: 0; left: 0; right: 0;\n background: linear-gradient(to top, rgba(0,207,255,0.8), rgba(0,207,255,0.2));\n transition: height 0.3s ease;\n height: 0%;\n}\n.hud-tick {\n position: absolute;\n right: 6px;\n display: flex;\n align-items: center;\n}\n.hud-tick::before {\n content: '';\n display: block;\n width: 5px;\n height: 1px;\n background: rgba(0,207,255,0.4);\n margin-right: 3px;\n}\n.hud-tick span {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 7px;\n letter-spacing: 1px;\n color: rgba(0,207,255,0.4);\n white-space: nowrap;\n}\n@media(max-width:1100px){ #altitude-hud { display: none; } }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 BR\u00daJULA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#compass-widget {\n position: absolute;\n top: 120px;\n right: 40px;\n z-index: 3;\n pointer-events: none;\n opacity: 0;\n animation: fadeUp .8s ease forwards 1.3s;\n text-align: center;\n}\n.compass-label {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 8px;\n letter-spacing: 3px;\n color: rgba(0,207,255,0.35);\n margin-top: 4px;\n}\n@keyframes compassSpin {\n 0% { transform: rotate(-15deg); }\n 30% { transform: rotate(8deg); }\n 60% { transform: rotate(-5deg); }\n 100% { transform: rotate(12deg); }\n}\n@media(max-width:768px){ #compass-widget { display: none; } }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 MORSE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#morse-strip {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 16px 0;\n justify-content: center;\n opacity: 0.3;\n pointer-events: none;\n overflow: hidden;\n}\n.morse-dot {\n width: 4px; height: 4px;\n border-radius: 50%;\n background: rgba(0,207,255,0.6);\n flex-shrink: 0;\n animation: morsePulse 3s ease-in-out infinite;\n}\n.morse-dash {\n width: 12px; height: 3px;\n background: rgba(0,207,255,0.6);\n flex-shrink: 0;\n border-radius: 2px;\n animation: morsePulse 3s ease-in-out infinite;\n}\n.morse-gap { width: 8px; flex-shrink: 0; }\n@keyframes morsePulse {\n 0%,100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n.morse-dot:nth-child(2) { animation-delay: .2s; }\n.morse-dot:nth-child(4) { animation-delay: .4s; }\n.morse-dot:nth-child(5) { animation-delay: .5s; }\n.morse-dot:nth-child(6) { animation-delay: .6s; }\n.morse-dash:nth-child(8) { animation-delay: .8s; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VENTANILLA FOTO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.foto-placeholder-window {\n position: absolute;\n inset: 0;\n border-radius: 40% 40% 45% 45% \/ 30% 30% 35% 35%;\n border: 2px solid rgba(0,207,255,0.25);\n pointer-events: none;\n z-index: 2;\n box-shadow:\n inset 0 0 40px rgba(0,207,255,0.04),\n 0 0 0 1px rgba(0,207,255,0.08);\n}\n.foto-placeholder-window::before {\n content: '';\n position: absolute;\n top: 8px; left: 8px; right: 8px; bottom: 8px;\n border-radius: 40% 40% 45% 45% \/ 30% 30% 35% 35%;\n border: 1px solid rgba(0,207,255,0.1);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CANVAS CONTRAILS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#contrail-canvas {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 1;\n opacity: 0.4;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 AJUSTE HERO para br\u00fajula \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.hero { position: relative; }\n<\/style>\n\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\n HUD ALT\u00cdMETRO \u2014 sigue el scroll\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 *\/\nconst hudFill = document.getElementById('hudBarFill');\nconst hudAlt = document.getElementById('hudAltValue');\nconst flLevels = ['FL000','FL050','FL100','FL150','FL200','FL250','FL300','FL350','FL390'];\n\nfunction updateHud() {\n const progress = window.scrollY \/ (document.body.scrollHeight - window.innerHeight);\n const pct = Math.min(100, progress * 100);\n if (hudFill) hudFill.style.height = pct + '%';\n if (hudAlt) {\n const idx = Math.floor(progress * (flLevels.length - 1));\n hudAlt.textContent = flLevels[idx] || 'FL000';\n }\n}\nwindow.addEventListener('scroll', updateHud, { passive: true });\nupdateHud();\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 VENTANILLA sobre la foto\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 *\/\nconst fotoPlaceholder = document.querySelector('.foto-placeholder');\nif (fotoPlaceholder) {\n const win = document.createElement('div');\n win.className = 'foto-placeholder-window';\n fotoPlaceholder.appendChild(win);\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\n CONTRAILS \u2014 estelas en el hero\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 *\/\nconst canvas = document.getElementById('contrail-canvas');\nconst heroEl = document.querySelector('.hero');\n\nfunction setupCanvas() {\n if (!canvas || !heroEl) return;\n canvas.width = heroEl.offsetWidth;\n canvas.height = heroEl.offsetHeight;\n const ctx = canvas.getContext('2d');\n\n \/\/ Dibuja 5 estelas de avi\u00f3n paralelas\n const trails = [\n { y: 0.15, len: 0.55, delay: 0 },\n { y: 0.30, len: 0.40, delay: 1.2 },\n { y: 0.50, len: 0.65, delay: 0.4 },\n { y: 0.68, len: 0.35, delay: 2.1 },\n { y: 0.82, len: 0.50, delay: 0.8 },\n ];\n\n let startTime = null;\n\n function drawTrails(timestamp) {\n if (!startTime) startTime = timestamp;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n trails.forEach(t => {\n const elapsed = (timestamp - startTime) \/ 1000;\n const cycle = 8; \/\/ segundos por ciclo\n const phase = ((elapsed + t.delay) % cycle) \/ cycle;\n const x = phase * canvas.width * 1.3 - canvas.width * 0.15;\n const len = t.len * canvas.width;\n const y = t.y * canvas.height;\n\n const grad = ctx.createLinearGradient(x - len, y, x, y);\n grad.addColorStop(0, 'rgba(0,207,255,0)');\n grad.addColorStop(0.7, 'rgba(0,207,255,0.15)');\n grad.addColorStop(1, 'rgba(0,207,255,0)');\n\n ctx.beginPath();\n ctx.moveTo(x - len, y);\n ctx.lineTo(x, y);\n ctx.strokeStyle = grad;\n ctx.lineWidth = 1.5;\n ctx.stroke();\n\n \/\/ Avi\u00f3n en la punta\n ctx.font = '14px serif';\n ctx.fillStyle = 'rgba(0,207,255,0.5)';\n ctx.fillText('\u2708', x + 2, y + 5);\n });\n\n requestAnimationFrame(drawTrails);\n }\n\n requestAnimationFrame(drawTrails);\n}\n\nsetupCanvas();\nwindow.addEventListener('resize', setupCanvas);\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 MORSE \u2014 inserta entre nosotros y valores\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 *\/\nconst nosotrosContent = document.querySelector('.nosotros-content');\nconst morseStrip = document.getElementById('morse-strip');\nif (nosotrosContent && morseStrip) {\n nosotrosContent.parentNode.insertBefore(morseStrip, nosotrosContent.nextSibling);\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\n BR\u00daJULA \u2014 mueve con parallax\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 *\/\nconst compassWidget = document.getElementById('compass-widget');\nwindow.addEventListener('scroll', () => {\n if (!compassWidget) return;\n const y = window.scrollY;\n if (y < window.innerHeight) {\n compassWidget.style.transform = `translateY(${y * 0.15}px)`;\n compassWidget.style.opacity = Math.max(0, 1 - y \/ 500).toString();\n }\n}, { passive: true });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Escala.Studio \u2014 Marketing Digital Boutique ESCALA.STUDIO Nosotros Servicios C\u00f3mo trabajamos Contacto Hablemos \u2708 Agencia Boutique \u00b7 Marketing Digital Trabajamos con pocos proyectos. Los elegimos bien. Y cuando decimos que estamos contigo, lo decimos en serio \u2014 tambi\u00e9n en persona. Hablemos \u2708 Ver servicios \u2192 100% Negocios digitales 2 Personas, no agencia \u221e Km recorridos por […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"s-lo-html","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/escalastudio.es\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/escalastudio.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/escalastudio.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/escalastudio.es\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/escalastudio.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":3,"href":"https:\/\/escalastudio.es\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/escalastudio.es\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/escalastudio.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":11,"date":"2026-05-08T18:08:31","date_gmt":"2026-05-08T18:08:31","guid":{"rendered":"https:\/\/escalastudio.es\/?page_id=11"},"modified":"2026-05-08T18:40:54","modified_gmt":"2026-05-08T18:40:54","slug":"escala-studio-2","status":"publish","type":"page","link":"https:\/\/escalastudio.es\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n\n\n\nEscala.Studio \u2014 Marketing Digital Boutique<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n<style>\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n VARIABLES \u00b7 Paleta Medianoche El\u00e9ctrico\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n:root {\n --negro: #090E14;\n --carbon: #131C26;\n --grafito: #1D2D3E;\n --grafito2: #253545;\n --acento: #00CFFF;\n --acento-dim: rgba(0,207,255,0.12);\n --acento-dim2:rgba(0,207,255,0.06);\n --blanco: #E8EDF2;\n --blanco-puro:#FFFFFF;\n --gris: #5A7A8A;\n --gris-claro: #8A9DAD;\n --borde: rgba(255,255,255,0.07);\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n RESET & BASE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\n\nhtml { scroll-behavior: smooth; }\n\nbody {\n background: var(--negro);\n color: var(--blanco);\n font-family: 'DM Sans', sans-serif;\n font-weight: 300;\n line-height: 1.6;\n overflow-x: hidden;\n}\n\n::selection { background: var(--acento); color: var(--negro); }\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n UTILIDADES\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.container {\n max-width: 1160px;\n margin: 0 auto;\n padding: 0 40px;\n}\n@media(max-width:768px){ .container { padding: 0 24px; } }\n\n.acento { color: var(--acento); }\n.serif { font-family: 'Playfair Display', serif; }\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n NAVBAR\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nnav {\n position: fixed;\n top: 0; left: 0; right: 0;\n z-index: 100;\n padding: 20px 0;\n transition: background .4s, padding .4s;\n}\nnav.scrolled {\n background: rgba(9,14,20,0.95);\n backdrop-filter: blur(12px);\n padding: 14px 0;\n border-bottom: 1px solid var(--borde);\n}\n.nav-inner {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.nav-logo {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 22px;\n letter-spacing: 3px;\n color: var(--blanco);\n text-decoration: none;\n}\n.nav-logo span { color: var(--acento); }\n\n.nav-links {\n display: flex;\n gap: 36px;\n list-style: none;\n}\n.nav-links a {\n font-size: 12px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--gris-claro);\n text-decoration: none;\n transition: color .25s;\n}\n.nav-links a:hover { color: var(--acento); }\n\n.nav-cta {\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--negro);\n background: var(--acento);\n padding: 10px 22px;\n text-decoration: none;\n font-weight: 500;\n transition: opacity .25s;\n}\n.nav-cta:hover { opacity: .85; }\n\n.nav-burger {\n display: none;\n flex-direction: column;\n gap: 5px;\n cursor: pointer;\n padding: 4px;\n}\n.nav-burger span {\n display: block; width: 24px; height: 1.5px;\n background: var(--blanco); transition: .3s;\n}\n\n@media(max-width:768px){\n .nav-links, .nav-cta-wrap { display: none; }\n .nav-burger { display: flex; }\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n HERO\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n position: relative;\n overflow: hidden;\n padding: 120px 0 80px;\n}\n\n\/* Grid de fondo *\/\n.hero-grid {\n position: absolute; inset: 0;\n background-image:\n linear-gradient(rgba(0,207,255,0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0,207,255,0.04) 1px, transparent 1px);\n background-size: 80px 80px;\n}\n\n\/* Glow radial *\/\n.hero-glow {\n position: absolute;\n top: 10%; right: -10%;\n width: 700px; height: 700px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(0,207,255,0.08) 0%, transparent 65%);\n pointer-events: none;\n}\n\n.hero-content {\n position: relative; z-index: 1;\n max-width: 820px;\n}\n\n.hero-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-size: 11px;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: var(--acento);\n margin-bottom: 32px;\n opacity: 0;\n animation: fadeUp .8s ease forwards .1s;\n}\n.hero-eyebrow::before {\n content: '';\n display: block;\n width: 28px; height: 1.5px;\n background: var(--acento);\n}\n\n.hero-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(64px, 10vw, 130px);\n line-height: .92;\n letter-spacing: 2px;\n color: var(--blanco-puro);\n margin-bottom: 32px;\n opacity: 0;\n animation: fadeUp .8s ease forwards .25s;\n}\n.hero-title .line2 {\n color: var(--acento);\n display: block;\n}\n\n.hero-sub {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: clamp(18px, 2.4vw, 26px);\n color: var(--gris-claro);\n max-width: 580px;\n line-height: 1.55;\n margin-bottom: 48px;\n opacity: 0;\n animation: fadeUp .8s ease forwards .42s;\n}\n.hero-sub em {\n color: var(--blanco);\n font-style: normal;\n}\n\n.hero-actions {\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n opacity: 0;\n animation: fadeUp .8s ease forwards .58s;\n}\n\n.btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--acento);\n color: var(--negro);\n font-size: 12px;\n letter-spacing: 2px;\n text-transform: uppercase;\n font-weight: 500;\n padding: 16px 32px;\n text-decoration: none;\n transition: opacity .25s, transform .25s;\n}\n.btn-primary:hover { opacity: .88; transform: translateY(-2px); }\n\n.btn-secondary {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n border: 1px solid rgba(255,255,255,0.2);\n color: var(--blanco);\n font-size: 12px;\n letter-spacing: 2px;\n text-transform: uppercase;\n font-weight: 400;\n padding: 15px 32px;\n text-decoration: none;\n transition: border-color .25s, color .25s, transform .25s;\n}\n.btn-secondary:hover {\n border-color: var(--acento);\n color: var(--acento);\n transform: translateY(-2px);\n}\n\n.hero-stats {\n margin-top: 72px;\n display: flex;\n gap: 48px;\n flex-wrap: wrap;\n opacity: 0;\n animation: fadeUp .8s ease forwards .72s;\n padding-top: 48px;\n border-top: 1px solid var(--borde);\n}\n.stat-num {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 40px;\n letter-spacing: 1px;\n color: var(--acento);\n line-height: 1;\n}\n.stat-label {\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--gris);\n margin-top: 4px;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SECCI\u00d3N GEN\u00c9RICA\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.section {\n padding: 120px 0;\n border-top: 1px solid var(--borde);\n}\n@media(max-width:768px){ .section { padding: 72px 0; } }\n\n.section-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-size: 10px;\n letter-spacing: 5px;\n text-transform: uppercase;\n color: var(--acento);\n margin-bottom: 24px;\n}\n.section-eyebrow::before {\n content: '';\n display: block;\n width: 20px; height: 1px;\n background: var(--acento);\n}\n\n.section-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(36px, 5vw, 64px);\n line-height: 1;\n letter-spacing: 1px;\n color: var(--blanco-puro);\n margin-bottom: 20px;\n}\n\n.section-lead {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: clamp(17px, 2vw, 22px);\n color: var(--gris-claro);\n max-width: 600px;\n line-height: 1.6;\n margin-bottom: 64px;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n QUI\u00c9NES SOMOS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.nosotros-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n align-items: center;\n}\n@media(max-width:900px){\n .nosotros-grid { grid-template-columns: 1fr; gap: 48px; }\n}\n\n\/* Marco para la foto *\/\n.foto-wrap {\n position: relative;\n}\n.foto-placeholder {\n width: 100%;\n aspect-ratio: 4\/5;\n background: var(--grafito);\n border: 1px solid var(--borde);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n color: var(--gris);\n position: relative;\n overflow: hidden;\n}\n\/* Esquina decorativa *\/\n.foto-placeholder::before {\n content: '';\n position: absolute;\n top: 16px; left: 16px;\n width: 40px; height: 40px;\n border-top: 2px solid var(--acento);\n border-left: 2px solid var(--acento);\n}\n.foto-placeholder::after {\n content: '';\n position: absolute;\n bottom: 16px; right: 16px;\n width: 40px; height: 40px;\n border-bottom: 2px solid var(--acento);\n border-right: 2px solid var(--acento);\n}\n.foto-icon {\n font-size: 48px;\n opacity: .3;\n}\n.foto-hint {\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n opacity: .4;\n text-align: center;\n line-height: 1.6;\n}\n\n\/* Para cuando teng\u00e1is la foto real, a\u00f1adid esto al img:\n width:100%; height:100%; object-fit:cover; position:absolute; inset:0; *\/\n\n.foto-badge {\n position: absolute;\n bottom: -20px; right: -20px;\n background: var(--acento);\n color: var(--negro);\n padding: 20px 24px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 15px;\n letter-spacing: 2px;\n line-height: 1.3;\n text-align: center;\n width: 130px;\n}\n@media(max-width:768px){ .foto-badge { display: none; } }\n\n.nosotros-content {}\n\n.nosotros-story {\n font-family: 'Playfair Display', serif;\n font-size: clamp(22px, 2.8vw, 32px);\n line-height: 1.35;\n color: var(--blanco-puro);\n margin-bottom: 32px;\n}\n.nosotros-story em {\n color: var(--acento);\n font-style: italic;\n}\n\n.nosotros-body {\n font-size: 15px;\n line-height: 1.9;\n color: var(--gris-claro);\n margin-bottom: 40px;\n}\n.nosotros-body p + p { margin-top: 18px; }\n\n.nosotros-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n.tag {\n font-size: 10px;\n letter-spacing: 2px;\n text-transform: uppercase;\n padding: 7px 14px;\n background: var(--acento-dim);\n color: var(--acento);\n border: 1px solid rgba(0,207,255,0.2);\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n VALORES\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.valores-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 3px;\n margin-top: 64px;\n}\n@media(max-width:768px){ .valores-grid { grid-template-columns: 1fr; } }\n\n.valor-card {\n background: var(--carbon);\n padding: 40px 32px;\n border-top: 2px solid transparent;\n transition: border-color .3s, background .3s;\n}\n.valor-card:hover {\n border-color: var(--acento);\n background: var(--grafito);\n}\n.valor-num {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 52px;\n color: var(--acento-dim);\n line-height: 1;\n margin-bottom: 20px;\n transition: color .3s;\n}\n.valor-card:hover .valor-num { color: rgba(0,207,255,0.25); }\n.valor-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 22px;\n letter-spacing: 1px;\n color: var(--blanco-puro);\n margin-bottom: 12px;\n}\n.valor-desc {\n font-size: 13px;\n line-height: 1.8;\n color: var(--gris-claro);\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SERVICIOS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.servicios-wrap {\n margin-top: 64px;\n}\n\n.servicio-item {\n border-bottom: 1px solid var(--borde);\n overflow: hidden;\n}\n.servicio-item:first-child { border-top: 1px solid var(--borde); }\n\n.servicio-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 28px 0;\n cursor: pointer;\n gap: 24px;\n transition: color .25s;\n}\n.servicio-header:hover .servicio-nombre { color: var(--acento); }\n\n.servicio-left {\n display: flex;\n align-items: center;\n gap: 24px;\n}\n.servicio-index {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 13px;\n letter-spacing: 2px;\n color: var(--gris);\n width: 24px;\n flex-shrink: 0;\n}\n.servicio-nombre {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(22px, 3vw, 36px);\n letter-spacing: 1px;\n color: var(--blanco-puro);\n transition: color .25s;\n}\n.servicio-tag {\n font-size: 10px;\n letter-spacing: 2px;\n text-transform: uppercase;\n padding: 5px 12px;\n background: var(--acento-dim);\n color: var(--acento);\n border: 1px solid rgba(0,207,255,0.15);\n display: none;\n}\n@media(min-width:600px){ .servicio-tag { display: inline-block; } }\n\n.servicio-arrow {\n width: 32px; height: 32px;\n border: 1px solid var(--borde);\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n transition: background .25s, border-color .25s, transform .35s;\n font-size: 14px;\n color: var(--gris-claro);\n}\n.servicio-item.open .servicio-arrow {\n background: var(--acento);\n border-color: var(--acento);\n color: var(--negro);\n transform: rotate(45deg);\n}\n\n.servicio-body {\n max-height: 0;\n overflow: hidden;\n transition: max-height .45s cubic-bezier(.4,0,.2,1);\n}\n.servicio-body-inner {\n padding: 0 0 36px 48px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n}\n@media(max-width:600px){\n .servicio-body-inner { grid-template-columns: 1fr; padding: 0 0 28px 0; }\n}\n\n.servicio-desc {\n font-size: 15px;\n line-height: 1.85;\n color: var(--gris-claro);\n}\n.servicio-lista {\n list-style: none;\n}\n.servicio-lista li {\n font-size: 13px;\n line-height: 1.7;\n color: var(--gris-claro);\n padding: 6px 0;\n border-bottom: 1px solid var(--borde);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.servicio-lista li::before {\n content: '';\n display: block;\n width: 6px; height: 6px;\n border-radius: 50%;\n background: var(--acento);\n flex-shrink: 0;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n C\u00d3MO TRABAJAMOS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.proceso-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 3px;\n margin-top: 64px;\n}\n@media(max-width:900px){ .proceso-grid { grid-template-columns: 1fr 1fr; } }\n@media(max-width:500px){ .proceso-grid { grid-template-columns: 1fr; } }\n\n.proceso-card {\n background: var(--carbon);\n padding: 36px 28px;\n position: relative;\n overflow: hidden;\n}\n.proceso-card::after {\n content: attr(data-num);\n position: absolute;\n top: -10px; right: 16px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 100px;\n color: var(--acento-dim2);\n line-height: 1;\n letter-spacing: -2px;\n pointer-events: none;\n}\n.proceso-step {\n font-size: 10px;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: var(--acento);\n margin-bottom: 16px;\n}\n.proceso-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 22px;\n letter-spacing: 1px;\n color: var(--blanco-puro);\n margin-bottom: 12px;\n}\n.proceso-desc {\n font-size: 13px;\n line-height: 1.8;\n color: var(--gris-claro);\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n CONTACTO\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.contacto-grid {\n display: grid;\n grid-template-columns: 1fr 1.4fr;\n gap: 80px;\n align-items: start;\n}\n@media(max-width:900px){\n .contacto-grid { grid-template-columns: 1fr; gap: 48px; }\n}\n\n.contacto-info {}\n.contacto-claim {\n font-family: 'Playfair Display', serif;\n font-size: clamp(22px, 3vw, 36px);\n line-height: 1.35;\n color: var(--blanco-puro);\n margin-bottom: 28px;\n}\n.contacto-claim em { color: var(--acento); font-style: italic; }\n\n.contacto-desc {\n font-size: 14px;\n line-height: 1.9;\n color: var(--gris-claro);\n margin-bottom: 36px;\n}\n\n.contacto-dato {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 16px 0;\n border-bottom: 1px solid var(--borde);\n font-size: 13px;\n color: var(--gris-claro);\n}\n.contacto-dato:last-child { border-bottom: none; }\n.contacto-dato-icon {\n width: 36px; height: 36px;\n background: var(--acento-dim);\n border: 1px solid rgba(0,207,255,0.15);\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n font-size: 15px;\n}\n\n\/* Formulario *\/\n.form-wrap {\n background: var(--carbon);\n padding: 48px;\n border: 1px solid var(--borde);\n}\n@media(max-width:500px){ .form-wrap { padding: 28px 20px; } }\n\n.form-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 28px;\n letter-spacing: 1px;\n color: var(--blanco-puro);\n margin-bottom: 32px;\n}\n\n.form-group {\n margin-bottom: 20px;\n}\n.form-label {\n display: block;\n font-size: 10px;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gris);\n margin-bottom: 8px;\n}\n.form-input,\n.form-select,\n.form-textarea {\n width: 100%;\n background: var(--grafito);\n border: 1px solid var(--borde);\n color: var(--blanco);\n font-family: 'DM Sans', sans-serif;\n font-size: 14px;\n font-weight: 300;\n padding: 14px 16px;\n outline: none;\n transition: border-color .25s;\n appearance: none;\n}\n.form-input::placeholder,\n.form-textarea::placeholder { color: var(--gris); }\n.form-input:focus,\n.form-select:focus,\n.form-textarea:focus { border-color: var(--acento); }\n.form-textarea { resize: vertical; min-height: 120px; }\n\n.form-select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A7A8A' stroke-width='1.5' fill='none'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 16px center;\n padding-right: 40px;\n cursor: pointer;\n}\n.form-select option { background: var(--grafito); }\n\n.form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n}\n@media(max-width:500px){ .form-row { grid-template-columns: 1fr; } }\n\n.form-submit {\n width: 100%;\n background: var(--acento);\n color: var(--negro);\n border: none;\n font-family: 'DM Sans', sans-serif;\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 3px;\n text-transform: uppercase;\n padding: 18px;\n cursor: pointer;\n margin-top: 8px;\n transition: opacity .25s, transform .25s;\n}\n.form-submit:hover { opacity: .88; transform: translateY(-1px); }\n\n.form-nota {\n font-size: 11px;\n color: var(--gris);\n margin-top: 14px;\n line-height: 1.6;\n text-align: center;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n FOOTER\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfooter {\n background: var(--carbon);\n border-top: 1px solid var(--borde);\n padding: 60px 0 40px;\n}\n.footer-inner {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 40px;\n flex-wrap: wrap;\n margin-bottom: 48px;\n}\n.footer-logo {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 28px;\n letter-spacing: 3px;\n color: var(--blanco-puro);\n}\n.footer-logo span { color: var(--acento); }\n.footer-claim {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: 14px;\n color: var(--gris);\n margin-top: 6px;\n}\n.footer-links {\n display: flex;\n gap: 32px;\n list-style: none;\n flex-wrap: wrap;\n}\n.footer-links a {\n font-size: 11px;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--gris);\n text-decoration: none;\n transition: color .25s;\n}\n.footer-links a:hover { color: var(--acento); }\n\n.footer-bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n padding-top: 24px;\n border-top: 1px solid var(--borde);\n}\n.footer-copy {\n font-size: 11px;\n color: var(--gris);\n letter-spacing: 1px;\n}\n.footer-hecho {\n font-size: 11px;\n color: var(--gris);\n letter-spacing: 1px;\n}\n.footer-hecho span { color: var(--acento); }\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n ANIMACIONES\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@keyframes fadeUp {\n from { opacity:0; transform:translateY(28px); }\n to { opacity:1; transform:translateY(0); }\n}\n\n.reveal {\n opacity: 0;\n transform: translateY(24px);\n transition: opacity .7s ease, transform .7s ease;\n}\n.reveal.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SCROLL INDICATOR\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.scroll-line {\n position: absolute;\n bottom: 40px; left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n opacity: 0;\n animation: fadeUp .8s ease forwards .9s;\n}\n.scroll-line span {\n font-size: 9px;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gris);\n}\n.scroll-line-bar {\n width: 1px;\n height: 48px;\n background: linear-gradient(var(--acento), transparent);\n animation: scrollPulse 2s ease-in-out infinite;\n}\n@keyframes scrollPulse {\n 0%,100% { opacity:.4; transform:scaleY(1); }\n 50% { opacity:1; transform:scaleY(1.1); }\n}\n\n<\/style>\n<\/head>\n<body>\n\n\n<nav id=\"nav\">\n <div class=\"container nav-inner\">\n <a href=\"#inicio\" class=\"nav-logo\">ESCALA<span>.<\/span>STUDIO<\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#nosotros\">Nosotros<\/a><\/li>\n <li><a href=\"#servicios\">Servicios<\/a><\/li>\n <li><a href=\"#proceso\">C\u00f3mo trabajamos<\/a><\/li>\n <li><a href=\"#contacto\">Contacto<\/a><\/li>\n <\/ul>\n <a href=\"#contacto\" class=\"nav-cta nav-cta-wrap\">Hablemos \u2708<\/a>\n <div class=\"nav-burger\" onclick=\"toggleMenu()\">\n <span><\/span><span><\/span><span><\/span>\n <\/div>\n <\/div>\n<\/nav>\n\n\n<section id=\"inicio\" class=\"hero\">\n <div class=\"hero-grid\"><\/div>\n <div class=\"hero-glow\"><\/div>\n <div class=\"container\">\n <div class=\"hero-content\">\n <div class=\"hero-eyebrow\">Agencia Boutique \u00b7 Marketing Digital<\/div>\n <h1 class=\"hero-title\">\n Trabajamos con<br>\n <span class=\"line2\">pocos proyectos.<\/span>\n <\/h1>\n <p class=\"hero-sub\">\n Los elegimos bien. Y cuando decimos que <em>estamos contigo<\/em>,\n lo decimos en serio \u2014 tambi\u00e9n en persona.\n <\/p>\n <div class=\"hero-actions\">\n <a href=\"#contacto\" class=\"btn-primary\">Hablemos \u2708<\/a>\n <a href=\"#servicios\" class=\"btn-secondary\">Ver servicios \u2192<\/a>\n <\/div>\n <div class=\"hero-stats\">\n <div>\n <div class=\"stat-num\">100%<\/div>\n <div class=\"stat-label\">Negocios digitales<\/div>\n <\/div>\n <div>\n <div class=\"stat-num\">2<\/div>\n <div class=\"stat-label\">Personas, no agencia<\/div>\n <\/div>\n <div>\n <div class=\"stat-num\">\u221e<\/div>\n <div class=\"stat-label\">Km recorridos por clientes<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"scroll-line\">\n <span>Scroll<\/span>\n <div class=\"scroll-line-bar\"><\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"nosotros\" class=\"section\">\n <div class=\"container\">\n <div class=\"nosotros-grid\">\n\n \n <div class=\"foto-wrap reveal\">\n <div class=\"foto-placeholder\">\n <div class=\"foto-icon\">\ud83d\udcf8<\/div>\n <div class=\"foto-hint\">Aqu\u00ed va vuestra foto.<br>Sustituye este div por un <img><\/div>\n \n <\/div>\n <div class=\"foto-badge\">\n Desde<br>Asturias<br>al mundo\n <\/div>\n <\/div>\n\n \n <div class=\"nosotros-content reveal\">\n <div class=\"section-eyebrow\">Qui\u00e9nes somos<\/div>\n <h2 class=\"section-title\">Irene & Luis<\/h2>\n\n <div class=\"nosotros-story\">\n Luis estudi\u00f3 para piloto.<br>\n <em>Lo dej\u00f3 a medias,<br>o eso pensaba.<\/em>\n <\/div>\n\n <div class=\"nosotros-body\">\n <p>Con el tiempo se dio cuenta de que nunca hab\u00eda dejado de volar. Solo hab\u00eda cambiado de cabina. Hoy pilota campa\u00f1as de Google Ads con la misma l\u00f3gica que aprendi\u00f3 mirando instrumentos: datos, altitud, correcciones constantes, y sin soltar los mandos hasta aterrizar.<\/p>\n <p>Irene lleva los proyectos con la precisi\u00f3n de quien sabe que un vuelo no es solo despegar. Sabe cu\u00e1ndo empujar, cu\u00e1ndo esperar, y c\u00f3mo mantener a todo el mundo orientado cuando aparecen las turbulencias.<\/p>\n <p>Vivimos en Asturias, trabajamos a distancia, y nos desplazamos donde haga falta. Porque creemos que la cercan\u00eda no depende de los kil\u00f3metros.<\/p>\n <\/div>\n\n <div class=\"nosotros-tags\">\n <span class=\"tag\">Google Ads<\/span>\n <span class=\"tag\">Meta Ads<\/span>\n <span class=\"tag\">Project Manager<\/span>\n <span class=\"tag\">Estrategia<\/span>\n <span class=\"tag\">IA aplicada<\/span>\n <span class=\"tag\">Infoproductos<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"valores-grid\">\n <div class=\"valor-card reveal\">\n <div class=\"valor-num\">01<\/div>\n <div class=\"valor-title\">Selecci\u00f3n sobre volumen<\/div>\n <div class=\"valor-desc\">No cogemos cualquier proyecto. Antes de empezar, analizamos si encajamos. Si no, te lo decimos \u2014 aunque duela.<\/div>\n <\/div>\n <div class=\"valor-card reveal\">\n <div class=\"valor-num\">02<\/div>\n <div class=\"valor-title\">Diagn\u00f3stico honesto<\/div>\n <div class=\"valor-desc\">Encontramos lo que falla y lo decimos sin rodeos. Eso es lo que hace un buen amigo que sabe mucho.<\/div>\n <\/div>\n <div class=\"valor-card reveal\">\n <div class=\"valor-num\">03<\/div>\n <div class=\"valor-title\">IA con criterio<\/div>\n <div class=\"valor-desc\">La integramos donde aporta de verdad. No la usamos porque est\u00e9 de moda, sino porque sabemos cu\u00e1ndo tiene sentido.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"servicios\" class=\"section\">\n <div class=\"container\">\n <div class=\"section-eyebrow reveal\">Qu\u00e9 hacemos<\/div>\n <h2 class=\"section-title reveal\">Servicios<\/h2>\n <p class=\"section-lead reveal\">Todo lo que necesita un negocio digital para despegar \u2014 y alguien que se quede en cabina hasta aterrizar.<\/p>\n\n <div class=\"servicios-wrap\">\n\n <div class=\"servicio-item reveal\">\n <div class=\"servicio-header\" onclick=\"toggleServicio(this)\">\n <div class=\"servicio-left\">\n <span class=\"servicio-index\">01<\/span>\n <span class=\"servicio-nombre\">Google Ads<\/span>\n <span class=\"servicio-tag\">El fuerte de Luis<\/span>\n <\/div>\n <div class=\"servicio-arrow\">+<\/div>\n <\/div>\n <div class=\"servicio-body\">\n <div class=\"servicio-body-inner\">\n <div class=\"servicio-desc\">Campa\u00f1as de b\u00fasqueda, display y shopping dise\u00f1adas para convertir. Luis lleva a\u00f1os pilotando cuentas con la misma l\u00f3gica que aprendi\u00f3 en la cabina: datos, correcciones constantes y visi\u00f3n de conjunto. Trabajamos con presupuestos que quieren crecer, no con los que buscan \u00abalgo baratito\u00bb.<\/div>\n <ul class=\"servicio-lista\">\n <li>Auditor\u00eda y diagn\u00f3stico inicial<\/li>\n <li>Estrategia y estructura de campa\u00f1as<\/li>\n <li>Gesti\u00f3n y optimizaci\u00f3n continua<\/li>\n <li>Reporting claro y sin humo<\/li>\n <li>Integraci\u00f3n con anal\u00edtica y CRM<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"servicio-item reveal\">\n <div class=\"servicio-header\" onclick=\"toggleServicio(this)\">\n <div class=\"servicio-left\">\n <span class=\"servicio-index\">02<\/span>\n <span class=\"servicio-nombre\">Meta Ads<\/span>\n <span class=\"servicio-tag\">Social Paid<\/span>\n <\/div>\n <div class=\"servicio-arrow\">+<\/div>\n <\/div>\n <div class=\"servicio-body\">\n <div class=\"servicio-body-inner\">\n <div class=\"servicio-desc\">Facebook e Instagram Ads para infoproductos y negocios digitales. Sabemos lo que funciona en cada fase del embudo \u2014 desde el fr\u00edo hasta el retargeting \u2014 y no vendemos humo con los resultados.<\/div>\n <ul class=\"servicio-lista\">\n <li>Estrategia de captaci\u00f3n y nurturing<\/li>\n <li>Creatividades y copies orientados a conversi\u00f3n<\/li>\n <li>Segmentaci\u00f3n y audiencias personalizadas<\/li>\n <li>Tests A\/B y optimizaci\u00f3n<\/li>\n <li>An\u00e1lisis de resultados real<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"servicio-item reveal\">\n <div class=\"servicio-header\" onclick=\"toggleServicio(this)\">\n <div class=\"servicio-left\">\n <span class=\"servicio-index\">03<\/span>\n <span class=\"servicio-nombre\">Project Management<\/span>\n <span class=\"servicio-tag\">El fuerte de Irene<\/span>\n <\/div>\n <div class=\"servicio-arrow\">+<\/div>\n <\/div>\n <div class=\"servicio-body\">\n <div class=\"servicio-body-inner\">\n <div class=\"servicio-desc\">Irene lleva proyectos digitales complejos con claridad y precisi\u00f3n. Lanzamientos de infoproductos, coordinaci\u00f3n de equipos, gesti\u00f3n de plazos. Todo ordenado, comunicado y entregado. Sin sorpresas de \u00faltima hora.<\/div>\n <ul class=\"servicio-lista\">\n <li>Planificaci\u00f3n y hoja de ruta del proyecto<\/li>\n <li>Coordinaci\u00f3n de equipos y proveedores<\/li>\n <li>Gesti\u00f3n de lanzamientos digitales<\/li>\n <li>Seguimiento y control de tiempos<\/li>\n <li>Comunicaci\u00f3n clara con el cliente<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"servicio-item reveal\">\n <div class=\"servicio-header\" onclick=\"toggleServicio(this)\">\n <div class=\"servicio-left\">\n <span class=\"servicio-index\">04<\/span>\n <span class=\"servicio-nombre\">Estrategia de Marketing<\/span>\n <span class=\"servicio-tag\">El punto de partida<\/span>\n <\/div>\n <div class=\"servicio-arrow\">+<\/div>\n <\/div>\n <div class=\"servicio-body\">\n <div class=\"servicio-body-inner\">\n <div class=\"servicio-desc\">Antes de lanzar nada, analizamos. D\u00f3nde est\u00e1s, d\u00f3nde quieres estar y qu\u00e9 hace falta para llegar. Una estrategia real, adaptada a tu negocio, no un PDF de 80 p\u00e1ginas que nadie lee.<\/div>\n <ul class=\"servicio-lista\">\n <li>An\u00e1lisis de situaci\u00f3n y competencia<\/li>\n <li>Estrategia de comunicaci\u00f3n digital<\/li>\n <li>Definici\u00f3n de canales y presupuesto<\/li>\n <li>Plan de contenidos y lanzamientos<\/li>\n <li>Integraci\u00f3n de IA donde tenga sentido<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"servicio-item reveal\">\n <div class=\"servicio-header\" onclick=\"toggleServicio(this)\">\n <div class=\"servicio-left\">\n <span class=\"servicio-index\">05<\/span>\n <span class=\"servicio-nombre\">Edici\u00f3n de V\u00eddeo & Web<\/span>\n <span class=\"servicio-tag\">Producci\u00f3n digital<\/span>\n <\/div>\n <div class=\"servicio-arrow\">+<\/div>\n <\/div>\n <div class=\"servicio-body\">\n <div class=\"servicio-body-inner\">\n <div class=\"servicio-desc\">Edici\u00f3n de v\u00eddeo para cursos, lanzamientos y redes. Desarrollo web para negocios digitales que necesitan algo m\u00e1s que una plantilla. Siempre orientado a conversi\u00f3n, no solo a que quede bonito.<\/div>\n <ul class=\"servicio-lista\">\n <li>Edici\u00f3n de v\u00eddeo para cursos online<\/li>\n <li>V\u00eddeos de venta y lanzamiento<\/li>\n <li>Desarrollo web en WordPress u otras plataformas<\/li>\n <li>Landing pages de alta conversi\u00f3n<\/li>\n <li>Integraciones con herramientas de venta<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"servicio-item reveal\">\n <div class=\"servicio-header\" onclick=\"toggleServicio(this)\">\n <div class=\"servicio-left\">\n <span class=\"servicio-index\">06<\/span>\n <span class=\"servicio-nombre\">Asistencia Virtual<\/span>\n <span class=\"servicio-tag\">Tu copiloto del d\u00eda a d\u00eda<\/span>\n <\/div>\n <div class=\"servicio-arrow\">+<\/div>\n <\/div>\n <div class=\"servicio-body\">\n <div class=\"servicio-body-inner\">\n <div class=\"servicio-desc\">Apoyo operativo continuo para que t\u00fa te centres en lo que importa y el negocio no se pare. Gestionamos las tareas que consumen tu tiempo pero no necesitan tu cabeza: comunicaciones, coordinaci\u00f3n, seguimientos, herramientas digitales. Todo con la misma exigencia que aplicamos al resto de proyectos \u2014 y con IA integrada donde tiene sentido para que nada se quede a medias.<\/div>\n <ul class=\"servicio-lista\">\n <li>Gesti\u00f3n de agenda, emails y comunicaciones<\/li>\n <li>Coordinaci\u00f3n de proveedores y equipo<\/li>\n <li>Seguimiento de tareas y entregables<\/li>\n <li>Gesti\u00f3n de herramientas digitales (Notion, Slack, Trello\u2026)<\/li>\n <li>Automatizaciones con IA para tareas repetitivas<\/li>\n <li>Soporte en lanzamientos y campa\u00f1as activas<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"proceso\" class=\"section\">\n <div class=\"container\">\n <div class=\"section-eyebrow reveal\">El proceso<\/div>\n <h2 class=\"section-title reveal\">C\u00f3mo trabajamos<\/h2>\n <p class=\"section-lead reveal\">Antes de despegar, revisamos cada instrumento. As\u00ed funciona cada proyecto.<\/p>\n\n <div class=\"proceso-grid\">\n <div class=\"proceso-card reveal\" data-num=\"01\">\n <div class=\"proceso-step\">Paso 01<\/div>\n <div class=\"proceso-title\">Primera llamada<\/div>\n <div class=\"proceso-desc\">Nos conocemos. Entendemos tu negocio, tus objetivos y d\u00f3nde est\u00e1 el problema real. Sin compromiso.<\/div>\n <\/div>\n <div class=\"proceso-card reveal\" data-num=\"02\">\n <div class=\"proceso-step\">Paso 02<\/div>\n <div class=\"proceso-title\">Diagn\u00f3stico<\/div>\n <div class=\"proceso-desc\">Analizamos en profundidad. Detectamos lo que falla y lo que puede mejorar. Y te lo decimos sin filtros.<\/div>\n <\/div>\n <div class=\"proceso-card reveal\" data-num=\"03\">\n <div class=\"proceso-step\">Paso 03<\/div>\n <div class=\"proceso-title\">Plan de vuelo<\/div>\n <div class=\"proceso-desc\">Si encajamos, dise\u00f1amos la estrategia juntos. Cada acci\u00f3n con un prop\u00f3sito claro y un resultado medible.<\/div>\n <\/div>\n <div class=\"proceso-card reveal\" data-num=\"04\">\n <div class=\"proceso-step\">Paso 04<\/div>\n <div class=\"proceso-title\">En cabina<\/div>\n <div class=\"proceso-desc\">Ejecutamos, ajustamos y te mantenemos informado. No desaparecemos. Estamos hasta que aterrizamos.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"clientes\" class=\"section section-logos\">\n <div class=\"container\">\n <div class=\"section-eyebrow reveal\">Con qui\u00e9n volamos<\/div>\n <p class=\"logos-intro reveal\">Trabajamos con negocios digitales que ya tienen tracci\u00f3n y quieren escalar. Estos son los sectores con los que m\u00e1s operamos.<\/p>\n <div class=\"logos-grid reveal\">\n <div class=\"logo-sector\">\n <div class=\"logo-sector-icon\">\ud83c\udf93<\/div>\n <div class=\"logo-sector-name\">Cursos Online<\/div>\n <\/div>\n <div class=\"logo-sector\">\n <div class=\"logo-sector-icon\">\ud83c\udf99\ufe0f<\/div>\n <div class=\"logo-sector-name\">Coaches & Mentores<\/div>\n <\/div>\n <div class=\"logo-sector\">\n <div class=\"logo-sector-icon\">\ud83d\udce6<\/div>\n <div class=\"logo-sector-name\">Infoproductos<\/div>\n <\/div>\n <div class=\"logo-sector\">\n <div class=\"logo-sector-icon\">\ud83d\udcbb<\/div>\n <div class=\"logo-sector-name\">SaaS & Apps<\/div>\n <\/div>\n <div class=\"logo-sector\">\n <div class=\"logo-sector-icon\">\u270d\ufe0f<\/div>\n <div class=\"logo-sector-name\">Personal Brands<\/div>\n <\/div>\n <div class=\"logo-sector\">\n <div class=\"logo-sector-icon\">\ud83d\uded2<\/div>\n <div class=\"logo-sector-name\">Ecommerce Digital<\/div>\n <\/div>\n <\/div>\n <p class=\"logos-nota reveal\">\n \n \u00bfTu sector no aparece? Si tu negocio es 100% digital, probablemente encajamos. <a href=\"#contacto\" class=\"logos-link\">Cu\u00e9ntanoslo \u2192<\/a>\n <\/p>\n <\/div>\n<\/section>\n\n\n<section id=\"encaje\" class=\"section\">\n <div class=\"container\">\n <div class=\"section-eyebrow reveal\">\u00bfEncajamos?<\/div>\n <h2 class=\"section-title reveal\">Antes de hablar,<br>s\u00e9 honesto contigo.<\/h2>\n <p class=\"section-lead reveal\">No trabajamos con todo el mundo. No porque seamos dif\u00edciles, sino porque as\u00ed podemos hacer bien nuestro trabajo.<\/p>\n\n <div class=\"encaje-grid\">\n\n \n <div class=\"encaje-card encaje-si reveal\">\n <div class=\"encaje-header\">\n <div class=\"encaje-icon\">\u2708<\/div>\n <div class=\"encaje-title\">Escala.Studio <span>es para ti<\/span> si\u2026<\/div>\n <\/div>\n <ul class=\"encaje-lista\">\n <li>Tienes un negocio digital que ya genera ventas y quieres escalar<\/li>\n <li>Vendes infoproductos, cursos, servicios online o tienes un SaaS<\/li>\n <li>Buscas una relaci\u00f3n real, no un proveedor que desaparece<\/li>\n <li>Valoras el diagn\u00f3stico honesto aunque no sea lo que quieres o\u00edr<\/li>\n <li>Quieres que alguien se meta de verdad en tu negocio, no que te mande informes<\/li>\n <li>Tienes presupuesto para invertir en publicidad de forma seria<\/li>\n <li>Entiendes que los resultados se construyen, no aparecen de un d\u00eda para otro<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"encaje-card encaje-no reveal\">\n <div class=\"encaje-header\">\n <div class=\"encaje-icon\">\ud83d\udeab<\/div>\n <div class=\"encaje-title\">Probablemente <span>no encajamos<\/span> si\u2026<\/div>\n <\/div>\n <ul class=\"encaje-lista\">\n <li>Tienes un negocio presencial o local sin componente digital<\/li>\n <li>Buscas resultados inmediatos con presupuestos m\u00ednimos<\/li>\n <li>Quieres que gestionemos todo sin involucrarte en el proceso<\/li>\n <li>Necesitas solo ejecuci\u00f3n sin estrategia detr\u00e1s<\/li>\n <li>Est\u00e1s empezando desde cero y a\u00fan no tienes producto validado<\/li>\n <li>Buscas la agencia m\u00e1s barata del mercado<\/li>\n <li>No tienes tiempo para una llamada inicial de diagn\u00f3stico<\/li>\n <\/ul>\n <\/div>\n\n <\/div>\n\n <div class=\"encaje-cta reveal\">\n <p class=\"encaje-cta-text\">\u00bfTe reconoces en la columna verde? Tenemos que hablar.<\/p>\n <a href=\"#contacto\" class=\"btn-primary\">Ver si encajamos \u2708<\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"cta-intermedio\">\n <div class=\"cta-intermedio-bg\"><\/div>\n <div class=\"container cta-intermedio-inner\">\n <div class=\"cta-int-left reveal\">\n <div class=\"cta-int-eyebrow\">Primera llamada sin compromiso<\/div>\n <div class=\"cta-int-title\">Cu\u00e9ntanos d\u00f3nde est\u00e1s.<br>Te decimos si podemos<br><em>llevarte m\u00e1s lejos.<\/em><\/div>\n <\/div>\n <div class=\"cta-int-right reveal\">\n <a href=\"#contacto\" class=\"btn-primary btn-large\">Reservar llamada \u2708<\/a>\n <div class=\"cta-int-nota\">Respondemos en menos de 24h \u00b7 Sin compromiso<\/div>\n <\/div>\n <\/div>\n \n <div class=\"cta-runway\">\n <div class=\"cta-runway-line\"><\/div>\n <div class=\"cta-runway-plane\">\u2708<\/div>\n <div class=\"cta-runway-line\"><\/div>\n <\/div>\n<\/div>\n\n\n<section id=\"faq\" class=\"section\">\n <div class=\"container\">\n <div class=\"section-eyebrow reveal\">Preguntas frecuentes<\/div>\n <h2 class=\"section-title reveal\">Lo que nos suelen preguntar<br>antes de despegar.<\/h2>\n\n <div class=\"faq-grid\">\n\n <div class=\"faq-col\">\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfTrabaj\u00e1is con negocios que acaban de empezar?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>Generalmente no. Preferimos trabajar con negocios que ya tienen producto validado y primeras ventas. Si est\u00e1s empezando desde cero, lo mejor es que primero valides tu idea. Cuando tengas tracci\u00f3n, vuelve y hablamos.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfCu\u00e1nto cuesta trabajar con vosotros?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>Depende del proyecto y los servicios que necesites. No publicamos tarifas fijas porque cada situaci\u00f3n es diferente. Lo que s\u00ed te decimos: no somos la opci\u00f3n m\u00e1s barata del mercado, y lo sabemos. Si lo que buscas es precio, hay opciones mejores. Si lo que buscas es resultado, hablemos.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfTrabaj\u00e1is solo con clientes espa\u00f1oles?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>No. Trabajamos en remoto con negocios digitales de cualquier pa\u00eds hispanohablante. Y si el proyecto lo requiere, nos desplazamos. Vivimos en Asturias, pero eso no ha impedido nunca que lleguemos donde hace falta.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfCu\u00e1ntos clientes llev\u00e1is a la vez?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>Pocos. Intencionalmente. Somos dos personas y queremos hacer bien nuestro trabajo. Cuando cogemos un proyecto, lo cogemos de verdad \u2014 no somos una agencia que te pasa a un junior y desaparece. Por eso somos selectivos con lo que aceptamos.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-col\">\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfC\u00f3mo es el proceso para empezar?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>Simple. Rellenas el formulario de contacto o nos escribes. Agendamos una primera llamada de diagn\u00f3stico donde nos cuentas tu situaci\u00f3n. Si vemos que encajamos, te hacemos una propuesta personalizada. Si no, te lo decimos sin rodeos.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfUs\u00e1is IA en vuestro trabajo?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>S\u00ed, pero con criterio. Integramos IA donde tiene sentido y aporta valor real \u2014 en an\u00e1lisis, automatizaciones, optimizaci\u00f3n de campa\u00f1as, generaci\u00f3n de contenido estrat\u00e9gico. No la usamos para rellenar o hacer bulto. Si en tu proyecto no tiene sentido, no la usamos.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfHac\u00e9is contratos de permanencia?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>Dependiendo del servicio s\u00ed hay un m\u00ednimo de compromiso \u2014 especialmente en publicidad, donde los resultados necesitan tiempo para madurar. Pero no hacemos contratos eternos ni atamos a nadie. Preferimos que os qued\u00e9is porque est\u00e1is contentos.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"faq-item reveal\">\n <div class=\"faq-q\" onclick=\"toggleFaq(this)\">\n <span>\u00bfY si despu\u00e9s de la llamada no encajamos?<\/span>\n <div class=\"faq-arrow\">+<\/div>\n <\/div>\n <div class=\"faq-a\">\n <p>Pasa, y no pasa nada. Si despu\u00e9s de hablar vemos que no somos la mejor opci\u00f3n para ti, te lo decimos. Y si podemos, te orientamos hacia quien s\u00ed pueda ayudarte. Preferimos eso a coger un proyecto que no va a funcionar bien para ninguno de los dos.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<style>\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LOGOS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.section-logos {\n padding-bottom: 80px;\n}\n.logos-intro {\n font-size: 15px;\n color: var(--gris-claro);\n max-width: 560px;\n line-height: 1.8;\n margin-bottom: 48px;\n}\n.logos-grid {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 3px;\n margin-bottom: 28px;\n}\n@media(max-width:900px){ .logos-grid { grid-template-columns: repeat(3,1fr); } }\n@media(max-width:500px){ .logos-grid { grid-template-columns: repeat(2,1fr); } }\n\n.logo-sector {\n background: var(--carbon);\n border: 1px solid var(--borde);\n padding: 28px 16px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n transition: background .25s, border-color .25s, transform .25s;\n cursor: default;\n}\n.logo-sector:hover {\n background: var(--grafito);\n border-color: rgba(0,207,255,0.25);\n transform: translateY(-3px);\n}\n.logo-sector-icon { font-size: 28px; }\n.logo-sector-name {\n font-size: 11px;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n color: var(--gris-claro);\n text-align: center;\n line-height: 1.4;\n}\n.logos-nota {\n font-size: 13px;\n color: var(--gris);\n line-height: 1.7;\n}\n.logos-link {\n color: var(--acento);\n text-decoration: none;\n border-bottom: 1px solid rgba(0,207,255,0.3);\n transition: border-color .2s;\n}\n.logos-link:hover { border-color: var(--acento); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 ENCAJE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.encaje-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 3px;\n margin-bottom: 48px;\n}\n@media(max-width:768px){ .encaje-grid { grid-template-columns: 1fr; } }\n\n.encaje-card {\n padding: 40px 36px;\n}\n.encaje-si {\n background: rgba(0,207,255,0.05);\n border: 1px solid rgba(0,207,255,0.2);\n}\n.encaje-no {\n background: rgba(255,255,255,0.02);\n border: 1px solid var(--borde);\n}\n.encaje-header {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n margin-bottom: 28px;\n}\n.encaje-icon {\n font-size: 24px;\n margin-top: 2px;\n flex-shrink: 0;\n}\n.encaje-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 22px;\n letter-spacing: 1px;\n color: var(--blanco-puro);\n line-height: 1.2;\n}\n.encaje-si .encaje-title span { color: var(--acento); }\n.encaje-no .encaje-title span { color: var(--gris-claro); }\n\n.encaje-lista {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n.encaje-lista li {\n font-size: 14px;\n line-height: 1.6;\n color: var(--gris-claro);\n padding: 12px 0;\n border-bottom: 1px solid var(--borde);\n display: flex;\n align-items: flex-start;\n gap: 12px;\n}\n.encaje-lista li:last-child { border-bottom: none; }\n.encaje-si .encaje-lista li::before {\n content: '\u2713';\n color: var(--acento);\n font-weight: 500;\n font-size: 13px;\n flex-shrink: 0;\n margin-top: 1px;\n}\n.encaje-no .encaje-lista li::before {\n content: '\u00d7';\n color: var(--gris);\n font-size: 16px;\n flex-shrink: 0;\n line-height: 1.4;\n}\n\n.encaje-cta {\n display: flex;\n align-items: center;\n gap: 32px;\n padding: 36px 40px;\n background: var(--carbon);\n border: 1px solid var(--borde);\n flex-wrap: wrap;\n}\n.encaje-cta-text {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: 20px;\n color: var(--blanco);\n flex: 1;\n min-width: 200px;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CTA INTERMEDIO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.cta-intermedio {\n position: relative;\n padding: 80px 0;\n overflow: hidden;\n background: var(--grafito);\n border-top: 1px solid rgba(0,207,255,0.15);\n border-bottom: 1px solid rgba(0,207,255,0.15);\n}\n.cta-intermedio-bg {\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse at 20% 50%, rgba(0,207,255,0.07) 0%, transparent 60%),\n radial-gradient(ellipse at 80% 50%, rgba(0,207,255,0.04) 0%, transparent 60%);\n pointer-events: none;\n}\n.cta-intermedio-inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 48px;\n flex-wrap: wrap;\n position: relative;\n z-index: 1;\n}\n.cta-int-eyebrow {\n font-size: 10px;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: var(--acento);\n margin-bottom: 16px;\n}\n.cta-int-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(32px, 4vw, 52px);\n line-height: 1.05;\n letter-spacing: 1px;\n color: var(--blanco-puro);\n}\n.cta-int-title em {\n color: var(--acento);\n font-style: normal;\n}\n.cta-int-right {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n flex-shrink: 0;\n}\n.btn-large {\n font-size: 13px !important;\n padding: 20px 40px !important;\n}\n.cta-int-nota {\n font-size: 11px;\n letter-spacing: 1px;\n color: var(--gris);\n}\n\n\/* Pista decorativa del CTA *\/\n.cta-runway {\n position: absolute;\n bottom: 0; left: 0; right: 0;\n height: 24px;\n display: flex;\n align-items: center;\n padding: 0 40px;\n gap: 8px;\n pointer-events: none;\n}\n.cta-runway-line {\n flex: 1;\n height: 1px;\n background: repeating-linear-gradient(\n 90deg,\n rgba(0,207,255,0.3) 0px, rgba(0,207,255,0.3) 16px,\n transparent 16px, transparent 28px\n );\n}\n.cta-runway-plane {\n font-size: 14px;\n color: var(--acento);\n animation: planePulse 2s ease-in-out infinite;\n filter: drop-shadow(0 0 6px rgba(0,207,255,0.6));\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FAQ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.faq-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0 48px;\n margin-top: 56px;\n}\n@media(max-width:768px){ .faq-grid { grid-template-columns: 1fr; } }\n\n.faq-col { display: flex; flex-direction: column; }\n\n.faq-item {\n border-bottom: 1px solid var(--borde);\n}\n.faq-item:first-child { border-top: 1px solid var(--borde); }\n\n.faq-q {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 22px 0;\n cursor: pointer;\n gap: 20px;\n transition: color .25s;\n}\n.faq-q:hover { color: var(--acento); }\n.faq-q span {\n font-size: 15px;\n font-weight: 400;\n line-height: 1.4;\n color: var(--blanco);\n transition: color .25s;\n flex: 1;\n}\n.faq-q:hover span { color: var(--acento); }\n\n.faq-arrow {\n width: 28px; height: 28px;\n border: 1px solid var(--borde);\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n font-size: 18px;\n color: var(--gris-claro);\n transition: all .3s;\n}\n.faq-item.open .faq-arrow {\n transform: rotate(45deg);\n background: var(--acento);\n color: var(--negro);\n border-color: var(--acento);\n}\n\n.faq-a {\n max-height: 0;\n overflow: hidden;\n transition: max-height .4s cubic-bezier(.4,0,.2,1);\n}\n.faq-a p {\n font-size: 14px;\n line-height: 1.85;\n color: var(--gris-claro);\n padding-bottom: 22px;\n}\n<\/style>\n\n\n<script>\nfunction toggleFaq(el) {\n const item = el.parentElement;\n const answer = item.querySelector('.faq-a');\n const isOpen = item.classList.contains('open');\n \/\/ Cierra todos\n document.querySelectorAll('.faq-item.open').forEach(i => {\n i.classList.remove('open');\n i.querySelector('.faq-a').style.maxHeight = '0';\n });\n \/\/ Abre el clickado\n if (!isOpen) {\n item.classList.add('open');\n answer.style.maxHeight = answer.scrollHeight + 'px';\n }\n}\n<\/script>\n\n\n<section id=\"contacto\" class=\"section\">\n <div class=\"container\">\n <div class=\"section-eyebrow reveal\">Hablemos<\/div>\n <h2 class=\"section-title reveal\">\u00bfTu negocio est\u00e1 en pista<br>pero no despega?<\/h2>\n\n <div class=\"contacto-grid\">\n\n <div class=\"contacto-info reveal\">\n <div class=\"contacto-claim\">\n Cu\u00e9ntanos qu\u00e9 tienes entre manos.<br>\n <em>Te diremos si podemos ayudarte.<\/em>\n <\/div>\n <p class=\"contacto-desc\">\n No hacemos propuestas gen\u00e9ricas. Si despu\u00e9s de hablar contigo creemos que no encajamos, te lo decimos \u2014 y si podemos, te orientamos hacia quien s\u00ed pueda ayudarte.\n <\/p>\n\n <div class=\"contacto-dato\">\n <div class=\"contacto-dato-icon\">\u2708<\/div>\n Nos desplazamos donde haga falta\n <\/div>\n <div class=\"contacto-dato\">\n <div class=\"contacto-dato-icon\">\ud83d\udccd<\/div>\n Asturias, Espa\u00f1a\n <\/div>\n <div class=\"contacto-dato\">\n <div class=\"contacto-dato-icon\">\ud83d\udcac<\/div>\n Respondemos en menos de 24h\n <\/div>\n <div class=\"contacto-dato\">\n <div class=\"contacto-dato-icon\">\ud83e\udd1d<\/div>\n Solo trabajamos con negocios digitales\n <\/div>\n <\/div>\n\n <div class=\"form-wrap reveal\">\n <div class=\"form-title\">Cu\u00e9ntanos tu proyecto<\/div>\n <form onsubmit=\"handleSubmit(event)\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label class=\"form-label\">Nombre<\/label>\n <input type=\"text\" class=\"form-input\" placeholder=\"Tu nombre\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Email<\/label>\n <input type=\"email\" class=\"form-input\" placeholder=\"tu@email.com\" required>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">\u00bfEn qu\u00e9 podemos ayudarte?<\/label>\n <select class=\"form-select form-input\">\n <option value=\"\" disabled selected>Selecciona un servicio<\/option>\n <option>Google Ads<\/option>\n <option>Meta Ads<\/option>\n <option>Project Management<\/option>\n <option>Estrategia de Marketing<\/option>\n <option>Edici\u00f3n de V\u00eddeo o Web<\/option>\n <option>Varios servicios \/ No lo s\u00e9 a\u00fan<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Cu\u00e9ntanos tu proyecto<\/label>\n <textarea class=\"form-textarea\" placeholder=\"Qu\u00e9 hace tu negocio, d\u00f3nde est\u00e1s ahora y qu\u00e9 necesitas conseguir...\" required><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"form-submit\">Enviar mensaje \u2708<\/button>\n <p class=\"form-nota\">Sin compromisos. Si encajamos, te lo decimos. Si no, tambi\u00e9n.<\/p>\n <\/form>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<footer>\n <div class=\"container\">\n <div class=\"footer-inner\">\n <div>\n <div class=\"footer-logo\">ESCALA<span>.<\/span>STUDIO<\/div>\n <div class=\"footer-claim\">Volamos contigo. Hasta donde haga falta.<\/div>\n <div class=\"footer-social\">\n <a href=\"https:\/\/instagram.com\/escala.studio\" target=\"_blank\" class=\"social-link\" title=\"Instagram\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\n <\/a>\n <a href=\"https:\/\/linkedin.com\/company\/escala.studio\" target=\"_blank\" class=\"social-link\" title=\"LinkedIn\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"3\"\/><path d=\"M7 10v7M7 7v.5M12 17v-4a2 2 0 014 0v4M12 10v7\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <ul class=\"footer-links\">\n <li><a href=\"#nosotros\">Nosotros<\/a><\/li>\n <li><a href=\"#servicios\">Servicios<\/a><\/li>\n <li><a href=\"#encaje\">\u00bfEncajamos?<\/a><\/li>\n <li><a href=\"#proceso\">Proceso<\/a><\/li>\n <li><a href=\"#faq\">FAQ<\/a><\/li>\n <li><a href=\"#contacto\">Contacto<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"footer-bottom\">\n <div class=\"footer-copy\">\u00a9 2026 Escala.Studio \u00b7 Todos los derechos reservados<\/div>\n <div class=\"footer-hecho\">Hecho con <span>\u2708<\/span> desde Asturias<\/div>\n <\/div>\n <\/div>\n<\/footer>\n\n<style>\n.footer-social {\n display: flex;\n gap: 12px;\n margin-top: 20px;\n}\n.social-link {\n width: 36px; height: 36px;\n border: 1px solid var(--borde);\n display: flex; align-items: center; justify-content: center;\n color: var(--gris);\n text-decoration: none;\n transition: color .25s, border-color .25s;\n}\n.social-link:hover {\n color: var(--acento);\n border-color: rgba(0,207,255,0.3);\n}\n<\/style>\n\n\n<script>\n \/\/ Nav scroll\n const nav = document.getElementById('nav');\n window.addEventListener('scroll', () => {\n nav.classList.toggle('scrolled', window.scrollY > 60);\n });\n\n \/\/ Reveal on scroll\n const revealEls = document.querySelectorAll('.reveal');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry, i) => {\n if (entry.isIntersecting) {\n setTimeout(() => entry.target.classList.add('visible'), i * 80);\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.12 });\n revealEls.forEach(el => observer.observe(el));\n\n \/\/ Acorde\u00f3n servicios\n function toggleServicio(header) {\n const item = header.parentElement;\n const body = item.querySelector('.servicio-body');\n const isOpen = item.classList.contains('open');\n\n \/\/ Cierra todos\n document.querySelectorAll('.servicio-item.open').forEach(i => {\n i.classList.remove('open');\n i.querySelector('.servicio-body').style.maxHeight = '0';\n });\n\n \/\/ Abre el clickado si estaba cerrado\n if (!isOpen) {\n item.classList.add('open');\n body.style.maxHeight = body.scrollHeight + 'px';\n }\n }\n\n \/\/ Formulario\n function handleSubmit(e) {\n e.preventDefault();\n const btn = e.target.querySelector('.form-submit');\n btn.textContent = '\u2713 Mensaje enviado \u2014 Te respondemos pronto';\n btn.style.background = '#1D2D3E';\n btn.style.color = '#00CFFF';\n btn.disabled = true;\n \/\/ Aqu\u00ed conectar\u00edas con tu backend, Formspree, EmailJS, etc.\n }\n\n \/\/ Mobile menu (b\u00e1sico)\n function toggleMenu() {\n const links = document.querySelector('.nav-links');\n const cta = document.querySelector('.nav-cta-wrap');\n \/\/ Implementar seg\u00fan necesidad\n }\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<div id=\"plane-traveler\" aria-hidden=\"true\">\u2708<\/div>\n\n\n<div id=\"runway-overlay\" aria-hidden=\"true\">\n <div class=\"runway-track\">\n <div class=\"runway-center-line\"><\/div>\n <div class=\"runway-mark\" style=\"left:8%\">TKO<\/div>\n <div class=\"runway-mark\" style=\"left:28%\">28L<\/div>\n <div class=\"runway-mark\" style=\"left:50%\">SCL<\/div>\n <div class=\"runway-mark\" style=\"left:72%\">EST<\/div>\n <div class=\"runway-mark\" style=\"left:90%\">LDG<\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"radar-widget\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 120 120\" width=\"120\" height=\"120\">\n <circle cx=\"60\" cy=\"60\" r=\"55\" fill=\"none\" stroke=\"rgba(0,207,255,0.15)\" stroke-width=\"1\"\/>\n <circle cx=\"60\" cy=\"60\" r=\"37\" fill=\"none\" stroke=\"rgba(0,207,255,0.1)\" stroke-width=\"1\"\/>\n <circle cx=\"60\" cy=\"60\" r=\"18\" fill=\"none\" stroke=\"rgba(0,207,255,0.08)\" stroke-width=\"1\"\/>\n <line x1=\"60\" y1=\"60\" x2=\"60\" y2=\"6\" stroke=\"rgba(0,207,255,0.25)\" stroke-width=\"1\"\/>\n <line x1=\"60\" y1=\"60\" x2=\"114\" y2=\"60\" stroke=\"rgba(0,207,255,0.15)\" stroke-width=\"1\"\/>\n <line x1=\"60\" y1=\"60\" x2=\"60\" y2=\"114\" stroke=\"rgba(0,207,255,0.15)\" stroke-width=\"1\"\/>\n <line x1=\"60\" y1=\"60\" x2=\"6\" y2=\"60\" stroke=\"rgba(0,207,255,0.15)\" stroke-width=\"1\"\/>\n \n <line id=\"radar-sweep\" x1=\"60\" y1=\"60\" x2=\"115\" y2=\"60\"\n stroke=\"rgba(0,207,255,0.7)\" stroke-width=\"1.5\"\n style=\"transform-origin:60px 60px; animation: radarSpin 3s linear infinite;\"\/>\n \n <circle id=\"radar-blip\" cx=\"88\" cy=\"38\" r=\"3\" fill=\"var(--acento)\" opacity=\"0\">\n <animate attributeName=\"opacity\" values=\"0;1;0\" dur=\"3s\" repeatCount=\"indefinite\" begin=\"0.8s\"\/>\n <\/circle>\n <circle cx=\"42\" cy=\"75\" r=\"2\" fill=\"var(--acento)\" opacity=\"0\">\n <animate attributeName=\"opacity\" values=\"0;0.8;0\" dur=\"3s\" repeatCount=\"indefinite\" begin=\"1.6s\"\/>\n <\/circle>\n <\/svg>\n <div class=\"radar-label\">ESCALA.STUDIO \u00b7 EN RUTA<\/div>\n<\/div>\n\n\n<div id=\"route-svg-left\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 60 800\" preserveAspectRatio=\"none\" width=\"60\" height=\"800\">\n <defs>\n <linearGradient id=\"routeGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stop-color=\"rgba(0,207,255,0)\"\/>\n <stop offset=\"30%\" stop-color=\"rgba(0,207,255,0.4)\"\/>\n <stop offset=\"70%\" stop-color=\"rgba(0,207,255,0.4)\"\/>\n <stop offset=\"100%\" stop-color=\"rgba(0,207,255,0)\"\/>\n <\/linearGradient>\n <\/defs>\n <path d=\"M30 0 C30 100, 10 150, 30 250 C50 350, 10 400, 30 500 C50 600, 10 650, 30 800\"\n fill=\"none\" stroke=\"url(#routeGrad)\" stroke-width=\"1.5\" stroke-dasharray=\"6 8\"\n id=\"route-path-left\"\/>\n \n <circle cx=\"30\" cy=\"250\" r=\"4\" fill=\"none\" stroke=\"rgba(0,207,255,0.5)\" stroke-width=\"1.5\">\n <animate attributeName=\"r\" values=\"4;7;4\" dur=\"2.5s\" repeatCount=\"indefinite\"\/>\n <animate attributeName=\"opacity\" values=\"0.5;1;0.5\" dur=\"2.5s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <circle cx=\"30\" cy=\"500\" r=\"4\" fill=\"none\" stroke=\"rgba(0,207,255,0.5)\" stroke-width=\"1.5\">\n <animate attributeName=\"r\" values=\"4;7;4\" dur=\"2.5s\" repeatCount=\"indefinite\" begin=\"1.2s\"\/>\n <animate attributeName=\"opacity\" values=\"0.5;1;0.5\" dur=\"2.5s\" repeatCount=\"indefinite\" begin=\"1.2s\"\/>\n <\/circle>\n <\/svg>\n<\/div>\n\n\n<div id=\"airport-ticker\" aria-hidden=\"true\">\n <div class=\"ticker-label\">PR\u00d3XIMOS DESTINOS<\/div>\n <div class=\"ticker-track\">\n <div class=\"ticker-inner\" id=\"tickerInner\">\n <span>\u00b7 GOOGLE ADS \u00b7 OPTIMIZACI\u00d3N \u00b7<\/span>\n <span>\u00b7 META ADS \u00b7 CONVERSI\u00d3N \u00b7<\/span>\n <span>\u00b7 PROJECT MANAGEMENT \u00b7 CONTROL \u00b7<\/span>\n <span>\u00b7 ESTRATEGIA \u00b7 CRECIMIENTO \u00b7<\/span>\n <span>\u00b7 IA APLICADA \u00b7 EFICIENCIA \u00b7<\/span>\n <span>\u00b7 INFOPRODUCTOS \u00b7 LANZAMIENTOS \u00b7<\/span>\n <span>\u00b7 EDICI\u00d3N DE V\u00cdDEO \u00b7 PRODUCCI\u00d3N \u00b7<\/span>\n <span>\u00b7 DESARROLLO WEB \u00b7 CONVERSI\u00d3N \u00b7<\/span>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"altitude-marker\" data-alt=\"FL350\" id=\"alt-nosotros\" aria-hidden=\"true\"><\/div>\n<div class=\"altitude-marker\" data-alt=\"FL280\" id=\"alt-servicios\" aria-hidden=\"true\"><\/div>\n<div class=\"altitude-marker\" data-alt=\"FL120\" id=\"alt-proceso\" aria-hidden=\"true\"><\/div>\n<div class=\"altitude-marker\" data-alt=\"FL000\" id=\"alt-contacto\" aria-hidden=\"true\"><\/div>\n\n\n<div id=\"coords-display\" aria-hidden=\"true\">\n <div class=\"coord-line\">43\u00b021’N \u00b7 005\u00b051’W<\/div>\n <div class=\"coord-label\">ASTURIAS \u00b7 BASE OPS<\/div>\n<\/div>\n\n<style>\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\n AVI\u00d3N QUE SIGUE EL SCROLL\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 *\/\n#plane-traveler {\n position: fixed;\n right: 28px;\n top: 50%;\n z-index: 90;\n font-size: 22px;\n pointer-events: none;\n transition: top 0.08s linear;\n filter: drop-shadow(0 0 8px rgba(0,207,255,0.6));\n transform: rotate(-45deg);\n opacity: 0.85;\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\n PISTA DE ATERRIZAJE \u2014 hero bottom\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 *\/\n#runway-overlay {\n position: absolute;\n bottom: 0; left: 0; right: 0;\n height: 90px;\n overflow: hidden;\n pointer-events: none;\n z-index: 2;\n}\n.runway-track {\n position: absolute;\n bottom: 0; left: 0; right: 0;\n height: 48px;\n background: rgba(0,0,0,0.25);\n border-top: 1px solid rgba(0,207,255,0.2);\n display: flex;\n align-items: center;\n}\n.runway-center-line {\n position: absolute;\n left: 0; right: 0;\n top: 50%;\n height: 1px;\n background: repeating-linear-gradient(\n 90deg,\n rgba(0,207,255,0.5) 0px,\n rgba(0,207,255,0.5) 32px,\n transparent 32px,\n transparent 56px\n );\n animation: runwayScroll 4s linear infinite;\n}\n@keyframes runwayScroll {\n from { background-position: 0 0; }\n to { background-position: 88px 0; }\n}\n.runway-mark {\n position: absolute;\n bottom: 4px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 10px;\n letter-spacing: 2px;\n color: rgba(0,207,255,0.4);\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\n RADAR FLOTANTE\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 *\/\n#radar-widget {\n position: fixed;\n bottom: 32px;\n left: 28px;\n z-index: 90;\n pointer-events: none;\n opacity: 0.75;\n transition: opacity .3s;\n}\n#radar-widget:hover { opacity: 1; }\n.radar-label {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 9px;\n letter-spacing: 3px;\n color: rgba(0,207,255,0.5);\n text-align: center;\n margin-top: 4px;\n}\n@keyframes radarSpin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n@media(max-width:768px){ #radar-widget { display:none; } }\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\n RUTA SVG LATERAL\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 *\/\n#route-svg-left {\n position: fixed;\n left: 0; top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n pointer-events: none;\n opacity: 0.5;\n transition: opacity .4s;\n}\n@media(max-width:1200px){ #route-svg-left { display:none; } }\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\n TICKER AEROPUERTO\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 *\/\n#airport-ticker {\n background: rgba(9,14,20,0.95);\n border-top: 1px solid rgba(0,207,255,0.15);\n border-bottom: 1px solid rgba(0,207,255,0.15);\n padding: 10px 0;\n overflow: hidden;\n position: relative;\n}\n.ticker-label {\n position: absolute;\n left: 0; top: 0; bottom: 0;\n z-index: 2;\n padding: 0 20px;\n background: var(--acento);\n color: var(--negro);\n font-family: 'Bebas Neue', sans-serif;\n font-size: 11px;\n letter-spacing: 2px;\n display: flex;\n align-items: center;\n white-space: nowrap;\n}\n.ticker-track {\n padding-left: 200px;\n overflow: hidden;\n}\n.ticker-inner {\n display: flex;\n gap: 0;\n animation: tickerMove 30s linear infinite;\n white-space: nowrap;\n}\n.ticker-inner span {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 13px;\n letter-spacing: 3px;\n color: rgba(0,207,255,0.6);\n padding: 0 20px;\n flex-shrink: 0;\n}\n@keyframes tickerMove {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\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\n MARCADORES DE ALTITUD\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 *\/\n.altitude-marker {\n position: relative;\n pointer-events: none;\n}\n.altitude-marker::before {\n content: 'ALT \u00b7 ' attr(data-alt);\n position: absolute;\n right: 40px;\n top: -14px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 10px;\n letter-spacing: 3px;\n color: rgba(0,207,255,0.3);\n z-index: 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\n COORDENADAS EN HERO\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 *\/\n#coords-display {\n position: absolute;\n bottom: 56px;\n right: 40px;\n z-index: 3;\n text-align: right;\n pointer-events: none;\n opacity: 0;\n animation: fadeUp .8s ease forwards 1.1s;\n}\n.coord-line {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 13px;\n letter-spacing: 3px;\n color: rgba(0,207,255,0.5);\n}\n.coord-label {\n font-size: 9px;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: rgba(0,207,255,0.25);\n margin-top: 3px;\n}\n@media(max-width:768px){\n #coords-display { right: 24px; bottom: 64px; }\n #plane-traveler { right: 12px; font-size: 18px; }\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\n PARALLAX HERO GRID\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 *\/\n.hero-grid {\n transition: transform 0.1s linear;\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\n L\u00cdNEA DE RUTA EN PROCESO\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 *\/\n.proceso-connector {\n display: flex;\n align-items: center;\n margin-bottom: -3px;\n padding: 0 0 0 40px;\n position: relative;\n z-index: 1;\n pointer-events: none;\n}\n.proceso-connector-line {\n flex: 1;\n height: 1px;\n background: repeating-linear-gradient(\n 90deg,\n rgba(0,207,255,0.4) 0px, rgba(0,207,255,0.4) 12px,\n transparent 12px, transparent 22px\n );\n}\n.proceso-connector-plane {\n font-size: 16px;\n margin: 0 8px;\n color: var(--acento);\n animation: planePulse 2s ease-in-out infinite;\n filter: drop-shadow(0 0 6px rgba(0,207,255,0.7));\n}\n@keyframes planePulse {\n 0%,100% { transform: translateX(0) rotate(-45deg); opacity:.8; }\n 50% { transform: translateX(6px) rotate(-45deg); opacity:1; }\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\n ESTELA DEL CURSOR\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 *\/\n.cursor-trail {\n position: fixed;\n width: 6px; height: 6px;\n border-radius: 50%;\n background: var(--acento);\n pointer-events: none;\n z-index: 9999;\n transform: translate(-50%, -50%);\n opacity: 0;\n transition: opacity .2s;\n}\n<\/style>\n\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\n AVI\u00d3N QUE SIGUE EL SCROLL\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 *\/\nconst plane = document.getElementById('plane-traveler');\nlet lastScroll = 0;\n\nfunction updatePlane() {\n const scrolled = window.scrollY;\n const maxScroll = document.body.scrollHeight - window.innerHeight;\n const progress = scrolled \/ maxScroll;\n \/\/ Mueve de 8% a 92% de la pantalla verticalmente\n const topPct = 8 + progress * 84;\n plane.style.top = topPct + 'vh';\n\n \/\/ Inclina seg\u00fan direcci\u00f3n del scroll\n const delta = scrolled - lastScroll;\n if (delta > 0) {\n plane.style.transform = 'rotate(-30deg)';\n } else if (delta < 0) {\n plane.style.transform = 'rotate(-60deg)';\n } else {\n plane.style.transform = 'rotate(-45deg)';\n }\n lastScroll = scrolled;\n}\n\nwindow.addEventListener('scroll', updatePlane, { passive: true });\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\n PARALLAX EN HERO GRID\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 *\/\nconst heroGrid = document.querySelector('.hero-grid');\nconst heroGlow = document.querySelector('.hero-glow');\n\nwindow.addEventListener('scroll', () => {\n const y = window.scrollY;\n if (heroGrid) heroGrid.style.transform = `translateY(${y * 0.3}px)`;\n if (heroGlow) heroGlow.style.transform = `translateY(${y * 0.2}px)`;\n}, { passive: true });\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\n TICKER DUPLICADO\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 *\/\nconst ticker = document.getElementById('tickerInner');\nif (ticker) {\n ticker.innerHTML += ticker.innerHTML; \/\/ Duplicar para loop infinito\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\n CONECTOR DE RUTA EN PROCESO\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 *\/\nconst procesoGrid = document.querySelector('.proceso-grid');\nif (procesoGrid) {\n const connector = document.createElement('div');\n connector.className = 'proceso-connector reveal';\n connector.innerHTML = `\n <div class=\"proceso-connector-line\"><\/div>\n <div class=\"proceso-connector-plane\">\u2708<\/div>\n <div class=\"proceso-connector-line\"><\/div>\n `;\n procesoGrid.parentNode.insertBefore(connector, procesoGrid);\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\n MARCADORES DE ALTITUD\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 *\/\nconst altMap = {\n 'alt-nosotros': 'nosotros',\n 'alt-servicios': 'servicios',\n 'alt-proceso': 'proceso',\n 'alt-contacto': 'contacto'\n};\nObject.entries(altMap).forEach(([markerId, sectionId]) => {\n const marker = document.getElementById(markerId);\n const section = document.getElementById(sectionId);\n if (marker && section) {\n section.style.position = 'relative';\n section.prepend(marker);\n }\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\n ESTELA DEL CURSOR\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 *\/\nconst trails = [];\nfor (let i = 0; i < 6; i++) {\n const dot = document.createElement('div');\n dot.className = 'cursor-trail';\n dot.style.width = (6 - i) + 'px';\n dot.style.height = (6 - i) + 'px';\n dot.style.opacity = (0.5 - i * 0.08).toString();\n document.body.appendChild(dot);\n trails.push({ el: dot, x: 0, y: 0 });\n}\n\nlet mouseX = 0, mouseY = 0;\ndocument.addEventListener('mousemove', e => {\n mouseX = e.clientX;\n mouseY = e.clientY;\n trails[0].el.style.opacity = '0.6';\n});\n\nfunction animateTrail() {\n let prevX = mouseX, prevY = mouseY;\n trails.forEach((trail, i) => {\n const speed = 0.25 - i * 0.035;\n trail.x += (prevX - trail.x) * speed;\n trail.y += (prevY - trail.y) * speed;\n trail.el.style.left = trail.x + 'px';\n trail.el.style.top = trail.y + 'px';\n prevX = trail.x;\n prevY = trail.y;\n });\n requestAnimationFrame(animateTrail);\n}\nanimateTrail();\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\n CONTADOR ANIMADO EN STATS\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 *\/\nfunction animateValue(el, end, suffix = '', duration = 1800) {\n let start = 0;\n const step = end \/ (duration \/ 16);\n const timer = setInterval(() => {\n start += step;\n if (start >= end) { start = end; clearInterval(timer); }\n el.textContent = Math.floor(start) + suffix;\n }, 16);\n}\n\n\/\/ Trigger cuando el hero stats entra en vista\nconst statsObs = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n statsObs.unobserve(entry.target);\n }\n });\n}, { threshold: 0.5 });\n\nconst heroStats = document.querySelector('.hero-stats');\nif (heroStats) statsObs.observe(heroStats);\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\n GLITCH EN LOGO AL HOVER\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 *\/\nconst navLogo = document.querySelector('.nav-logo');\nif (navLogo) {\n navLogo.addEventListener('mouseenter', () => {\n navLogo.style.transition = 'none';\n navLogo.style.textShadow =\n '2px 0 0 rgba(0,207,255,0.5), -2px 0 0 rgba(0,207,255,0.3)';\n setTimeout(() => {\n navLogo.style.textShadow =\n '-2px 0 0 rgba(0,207,255,0.5), 2px 0 0 rgba(0,207,255,0.3)';\n }, 80);\n setTimeout(() => {\n navLogo.style.textShadow = 'none';\n }, 160);\n });\n}\n<\/script>\n\n\n\n\n<div id=\"altitude-hud\" aria-hidden=\"true\">\n <div class=\"hud-label\">ALT<\/div>\n <div class=\"hud-bar-wrap\">\n <div class=\"hud-bar-fill\" id=\"hudBarFill\"><\/div>\n <div class=\"hud-tick\" style=\"bottom:25%\"><span>FL100<\/span><\/div>\n <div class=\"hud-tick\" style=\"bottom:50%\"><span>FL200<\/span><\/div>\n <div class=\"hud-tick\" style=\"bottom:75%\"><span>FL350<\/span><\/div>\n <\/div>\n <div class=\"hud-label\" id=\"hudAltValue\">FL000<\/div>\n<\/div>\n\n\n<div id=\"compass-widget\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 80 80\" width=\"80\" height=\"80\">\n <circle cx=\"40\" cy=\"40\" r=\"36\" fill=\"none\" stroke=\"rgba(0,207,255,0.15)\" stroke-width=\"1\"\/>\n <circle cx=\"40\" cy=\"40\" r=\"28\" fill=\"none\" stroke=\"rgba(0,207,255,0.08)\" stroke-width=\"1\"\/>\n \n <text x=\"40\" y=\"10\" text-anchor=\"middle\" fill=\"rgba(0,207,255,0.8)\" font-size=\"8\" font-family=\"Bebas Neue, sans-serif\" letter-spacing=\"1\">N<\/text>\n <text x=\"40\" y=\"76\" text-anchor=\"middle\" fill=\"rgba(0,207,255,0.4)\" font-size=\"7\" font-family=\"Bebas Neue, sans-serif\">S<\/text>\n <text x=\"72\" y=\"44\" text-anchor=\"middle\" fill=\"rgba(0,207,255,0.4)\" font-size=\"7\" font-family=\"Bebas Neue, sans-serif\">E<\/text>\n <text x=\"8\" y=\"44\" text-anchor=\"middle\" fill=\"rgba(0,207,255,0.4)\" font-size=\"7\" font-family=\"Bebas Neue, sans-serif\">O<\/text>\n \n <g id=\"compassNeedle\" style=\"transform-origin:40px 40px; animation: compassSpin 12s ease-in-out infinite alternate;\">\n <polygon points=\"40,12 43,40 40,44 37,40\" fill=\"rgba(0,207,255,0.9)\"\/>\n <polygon points=\"40,68 43,40 40,44 37,40\" fill=\"rgba(255,255,255,0.2)\"\/>\n <\/g>\n <circle cx=\"40\" cy=\"40\" r=\"3\" fill=\"rgba(0,207,255,0.6)\"\/>\n <\/svg>\n <div class=\"compass-label\">RUMBO<\/div>\n<\/div>\n\n\n<div id=\"morse-strip\" aria-hidden=\"true\">\n \n <span class=\"morse-dot\"><\/span>\n <span class=\"morse-gap\"><\/span>\n <span class=\"morse-dot\"><\/span><span class=\"morse-dot\"><\/span><span class=\"morse-dot\"><\/span>\n <span class=\"morse-gap\"><\/span>\n <span class=\"morse-dash\"><\/span><span class=\"morse-dot\"><\/span><span class=\"morse-dash\"><\/span><span class=\"morse-dot\"><\/span>\n <span class=\"morse-gap\"><\/span>\n <span class=\"morse-dot\"><\/span><span class=\"morse-dash\"><\/span>\n <span class=\"morse-gap\"><\/span>\n <span class=\"morse-dot\"><\/span><span class=\"morse-dash\"><\/span><span class=\"morse-dot\"><\/span><span class=\"morse-dot\"><\/span>\n <span class=\"morse-gap\"><\/span>\n <span class=\"morse-dot\"><\/span><span class=\"morse-dash\"><\/span>\n<\/div>\n\n\n\n\n\n<canvas id=\"contrail-canvas\" aria-hidden=\"true\"><\/canvas>\n\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HUD ALT\u00cdMETRO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#altitude-hud {\n position: fixed;\n right: 60px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 89;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n pointer-events: none;\n opacity: 0.55;\n transition: opacity .3s;\n}\n#altitude-hud:hover { opacity: 0.9; }\n\n.hud-label {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 9px;\n letter-spacing: 3px;\n color: rgba(0,207,255,0.7);\n}\n#hudAltValue {\n font-size: 10px;\n color: rgba(0,207,255,0.9);\n letter-spacing: 2px;\n}\n.hud-bar-wrap {\n width: 3px;\n height: 120px;\n background: rgba(0,207,255,0.08);\n border: 1px solid rgba(0,207,255,0.15);\n position: relative;\n overflow: visible;\n}\n.hud-bar-fill {\n position: absolute;\n bottom: 0; left: 0; right: 0;\n background: linear-gradient(to top, rgba(0,207,255,0.8), rgba(0,207,255,0.2));\n transition: height 0.3s ease;\n height: 0%;\n}\n.hud-tick {\n position: absolute;\n right: 6px;\n display: flex;\n align-items: center;\n}\n.hud-tick::before {\n content: '';\n display: block;\n width: 5px;\n height: 1px;\n background: rgba(0,207,255,0.4);\n margin-right: 3px;\n}\n.hud-tick span {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 7px;\n letter-spacing: 1px;\n color: rgba(0,207,255,0.4);\n white-space: nowrap;\n}\n@media(max-width:1100px){ #altitude-hud { display: none; } }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 BR\u00daJULA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#compass-widget {\n position: absolute;\n top: 120px;\n right: 40px;\n z-index: 3;\n pointer-events: none;\n opacity: 0;\n animation: fadeUp .8s ease forwards 1.3s;\n text-align: center;\n}\n.compass-label {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 8px;\n letter-spacing: 3px;\n color: rgba(0,207,255,0.35);\n margin-top: 4px;\n}\n@keyframes compassSpin {\n 0% { transform: rotate(-15deg); }\n 30% { transform: rotate(8deg); }\n 60% { transform: rotate(-5deg); }\n 100% { transform: rotate(12deg); }\n}\n@media(max-width:768px){ #compass-widget { display: none; } }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 MORSE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#morse-strip {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 16px 0;\n justify-content: center;\n opacity: 0.3;\n pointer-events: none;\n overflow: hidden;\n}\n.morse-dot {\n width: 4px; height: 4px;\n border-radius: 50%;\n background: rgba(0,207,255,0.6);\n flex-shrink: 0;\n animation: morsePulse 3s ease-in-out infinite;\n}\n.morse-dash {\n width: 12px; height: 3px;\n background: rgba(0,207,255,0.6);\n flex-shrink: 0;\n border-radius: 2px;\n animation: morsePulse 3s ease-in-out infinite;\n}\n.morse-gap { width: 8px; flex-shrink: 0; }\n@keyframes morsePulse {\n 0%,100% { opacity: 0.4; }\n 50% { opacity: 1; }\n}\n.morse-dot:nth-child(2) { animation-delay: .2s; }\n.morse-dot:nth-child(4) { animation-delay: .4s; }\n.morse-dot:nth-child(5) { animation-delay: .5s; }\n.morse-dot:nth-child(6) { animation-delay: .6s; }\n.morse-dash:nth-child(8) { animation-delay: .8s; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 VENTANILLA FOTO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.foto-placeholder-window {\n position: absolute;\n inset: 0;\n border-radius: 40% 40% 45% 45% \/ 30% 30% 35% 35%;\n border: 2px solid rgba(0,207,255,0.25);\n pointer-events: none;\n z-index: 2;\n box-shadow:\n inset 0 0 40px rgba(0,207,255,0.04),\n 0 0 0 1px rgba(0,207,255,0.08);\n}\n.foto-placeholder-window::before {\n content: '';\n position: absolute;\n top: 8px; left: 8px; right: 8px; bottom: 8px;\n border-radius: 40% 40% 45% 45% \/ 30% 30% 35% 35%;\n border: 1px solid rgba(0,207,255,0.1);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CANVAS CONTRAILS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#contrail-canvas {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 1;\n opacity: 0.4;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 AJUSTE HERO para br\u00fajula \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.hero { position: relative; }\n<\/style>\n\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\n HUD ALT\u00cdMETRO \u2014 sigue el scroll\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 *\/\nconst hudFill = document.getElementById('hudBarFill');\nconst hudAlt = document.getElementById('hudAltValue');\nconst flLevels = ['FL000','FL050','FL100','FL150','FL200','FL250','FL300','FL350','FL390'];\n\nfunction updateHud() {\n const progress = window.scrollY \/ (document.body.scrollHeight - window.innerHeight);\n const pct = Math.min(100, progress * 100);\n if (hudFill) hudFill.style.height = pct + '%';\n if (hudAlt) {\n const idx = Math.floor(progress * (flLevels.length - 1));\n hudAlt.textContent = flLevels[idx] || 'FL000';\n }\n}\nwindow.addEventListener('scroll', updateHud, { passive: true });\nupdateHud();\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 VENTANILLA sobre la foto\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 *\/\nconst fotoPlaceholder = document.querySelector('.foto-placeholder');\nif (fotoPlaceholder) {\n const win = document.createElement('div');\n win.className = 'foto-placeholder-window';\n fotoPlaceholder.appendChild(win);\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\n CONTRAILS \u2014 estelas en el hero\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 *\/\nconst canvas = document.getElementById('contrail-canvas');\nconst heroEl = document.querySelector('.hero');\n\nfunction setupCanvas() {\n if (!canvas || !heroEl) return;\n canvas.width = heroEl.offsetWidth;\n canvas.height = heroEl.offsetHeight;\n const ctx = canvas.getContext('2d');\n\n \/\/ Dibuja 5 estelas de avi\u00f3n paralelas\n const trails = [\n { y: 0.15, len: 0.55, delay: 0 },\n { y: 0.30, len: 0.40, delay: 1.2 },\n { y: 0.50, len: 0.65, delay: 0.4 },\n { y: 0.68, len: 0.35, delay: 2.1 },\n { y: 0.82, len: 0.50, delay: 0.8 },\n ];\n\n let startTime = null;\n\n function drawTrails(timestamp) {\n if (!startTime) startTime = timestamp;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n trails.forEach(t => {\n const elapsed = (timestamp - startTime) \/ 1000;\n const cycle = 8; \/\/ segundos por ciclo\n const phase = ((elapsed + t.delay) % cycle) \/ cycle;\n const x = phase * canvas.width * 1.3 - canvas.width * 0.15;\n const len = t.len * canvas.width;\n const y = t.y * canvas.height;\n\n const grad = ctx.createLinearGradient(x - len, y, x, y);\n grad.addColorStop(0, 'rgba(0,207,255,0)');\n grad.addColorStop(0.7, 'rgba(0,207,255,0.15)');\n grad.addColorStop(1, 'rgba(0,207,255,0)');\n\n ctx.beginPath();\n ctx.moveTo(x - len, y);\n ctx.lineTo(x, y);\n ctx.strokeStyle = grad;\n ctx.lineWidth = 1.5;\n ctx.stroke();\n\n \/\/ Avi\u00f3n en la punta\n ctx.font = '14px serif';\n ctx.fillStyle = 'rgba(0,207,255,0.5)';\n ctx.fillText('\u2708', x + 2, y + 5);\n });\n\n requestAnimationFrame(drawTrails);\n }\n\n requestAnimationFrame(drawTrails);\n}\n\nsetupCanvas();\nwindow.addEventListener('resize', setupCanvas);\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 MORSE \u2014 inserta entre nosotros y valores\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 *\/\nconst nosotrosContent = document.querySelector('.nosotros-content');\nconst morseStrip = document.getElementById('morse-strip');\nif (nosotrosContent && morseStrip) {\n nosotrosContent.parentNode.insertBefore(morseStrip, nosotrosContent.nextSibling);\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\n BR\u00daJULA \u2014 mueve con parallax\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 *\/\nconst compassWidget = document.getElementById('compass-widget');\nwindow.addEventListener('scroll', () => {\n if (!compassWidget) return;\n const y = window.scrollY;\n if (y < window.innerHeight) {\n compassWidget.style.transform = `translateY(${y * 0.15}px)`;\n compassWidget.style.opacity = Math.max(0, 1 - y \/ 500).toString();\n }\n}, { passive: true });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Escala.Studio \u2014 Marketing Digital Boutique ESCALA.STUDIO Nosotros Servicios C\u00f3mo trabajamos Contacto Hablemos \u2708 Agencia Boutique \u00b7 Marketing Digital Trabajamos con pocos proyectos. Los elegimos bien. Y cuando decimos que estamos contigo, lo decimos en serio \u2014 tambi\u00e9n en persona. Hablemos \u2708 Ver servicios \u2192 100% Negocios digitales 2 Personas, no agencia \u221e Km recorridos por […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"s-lo-html","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/escalastudio.es\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/escalastudio.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/escalastudio.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/escalastudio.es\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/escalastudio.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":3,"href":"https:\/\/escalastudio.es\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/escalastudio.es\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/escalastudio.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}