/* ════════════════════════════════════════════════════════════════
   MyLPRO | Mantenimiento Industrial y Limpieza Profesional
   Sistema de diseño derivado del logo:
     - Azul eléctrico + cian de agua  -> atmósfera, luz, superficies
     - Oro metálico                   -> acción y énfasis (CTA, palabras clave)
     - Negro azulado                  -> fondo único de la página (tema oscuro)
   Reglas de sistema:
     - Radios: botones y chips = píldora, tarjetas = 24px, inputs = 14px
     - Escala z-index: progreso 110 > header 100 > menú 95 > WhatsApp 90
                       > grano 3 > brillo de cursor 2 > contenido
     - Mobile first: estilos base = móvil; min-width 640 / 960 / 1280
   ════════════════════════════════════════════════════════════════ */

/* ───────────── 1. TOKENS ───────────── */
:root {
    color-scheme: dark;

    --ink-1000: #03050a;
    --ink-950: #05080f;
    --ink-900: #070c16;
    --ink-850: #0a1120;
    --ink-800: #0e1730;

    --line: rgba(160, 190, 255, .12);
    --line-strong: rgba(160, 190, 255, .22);

    --text: #eef4ff;
    --text-2: #aebad3;
    --text-3: #8391b0;

    --blue-300: #8fb8ff;
    --blue-400: #5b95ff;
    --blue-500: #2f6df0;
    --blue-600: #1f52c7;
    --blue-700: #173d96;
    --cyan: #6fd6ff;

    --gold-100: #fff4c7;
    --gold-200: #ffe28a;
    --gold-300: #f7c948;
    --gold-400: #e0a826;
    --gold-500: #b9801a;
    --grad-gold: linear-gradient(115deg, #fff1b5 0%, #f7cf55 26%, #d9a32a 50%, #fbe590 72%, #b27a17 100%);

    --r-card: 24px;
    --r-input: 14px;
    --r-pill: 999px;

    --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-script: 'Playfair Display', Georgia, serif;

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);

    --header-h: 76px;
    --gutter: clamp(20px, 5vw, 40px);
    --maxw: 1240px;
    --sp: clamp(84px, 12vw, 168px);
}

/* ───────────── 2. BASE ───────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #2a3a63 var(--ink-950);
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--ink-950);
    color: var(--text);
    font: 400 1rem/1.6 var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

body::after { /* grano fijo y sin eventos: textura premium sin costo de scroll */
    content: "";
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html.is-locked, html.is-locked body { overflow: hidden; }

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, dl, dd, address { margin: 0; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: rgba(247, 201, 72, .35); color: #fff; }

:focus-visible {
    outline: 2px solid var(--gold-300);
    outline-offset: 3px;
    border-radius: 8px;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    left: 16px; top: -80px;
    z-index: 2000;
    padding: 12px 18px;
    border-radius: var(--r-pill);
    background: var(--gold-300);
    color: #1b1204;
    font-weight: 600;
    transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 16px; }

.container {
    width: 100%;
    max-width: calc(var(--maxw) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(820px + var(--gutter) * 2); }

.gold {
    background: var(--grad-gold);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: sheen 7s linear infinite;
}
.gold-wrap { display: inline; }

/* ───────────── 3. TIPOGRAFIA DE SECCION ───────────── */
.section { position: relative; padding-block: var(--sp); }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
    margin-bottom: 18px;
    font: 600 .78rem/1 var(--font-display);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-300);
}

.section-title {
    font: 700 clamp(2rem, 1.2rem + 3.6vw, 3.6rem)/1.08 var(--font-display);
    letter-spacing: -.035em;
    word-spacing: .07em;
    text-wrap: balance;
}

.section-lead {
    margin-top: 20px;
    max-width: 56ch;
    color: var(--text-2);
    font-size: clamp(1rem, .95rem + .3vw, 1.18rem);
    text-wrap: pretty;
}
.section-head--center .section-lead { margin-inline: auto; }

/* Palabras separadas por JS para el reveal de titulares */
.is-split .w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: .06em .02em .2em;
    margin: -.06em -.02em -.2em;
}
.is-split .wi {
    display: inline-block;
    transform: translate3d(0, 115%, 0) rotate(5deg);
    transform-origin: 0 100%;
    transition: transform 1.1s var(--ease-out) calc(var(--i, 0) * 60ms);
}
.is-split.in .wi { transform: none; }

/* Estados iniciales de animación SOLO cuando el JS esta activo */
html.fx [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1.2s var(--ease-out) var(--d, 0s);
}
html.fx [data-reveal].in { opacity: 1; transform: none; }

html.fx [data-stagger] > * { opacity: 0; }
html.fx [data-stagger] > *.in {
    opacity: 1;
    animation: rise-in 1.1s var(--ease-out) calc(var(--i, 0) * 90ms) backwards;
}

/* ───────────── 4. BOTONES ───────────── */
.btn {
    --h: 52px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    height: var(--h);
    padding: 0 1.6rem;
    border: 0;
    border-radius: var(--r-pill);
    font: 600 1rem/1 var(--font-display);
    letter-spacing: -.005em;
    white-space: nowrap;
    transition: transform .45s var(--ease-out), translate .5s var(--ease-out), box-shadow .45s var(--ease-out), background-position .6s var(--ease-out), background-color .3s;
    -webkit-tap-highlight-color: transparent;
}
.btn > * { position: relative; z-index: 1; }
.btn i { font-size: 1.25em; }
.btn--sm { --h: 44px; padding: 0 1.15rem; font-size: .92rem; }
.btn--lg { --h: 58px; padding: 0 1.9rem; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn:active { transform: translateY(1px) scale(.98); }

.btn--gold {
    color: #1b1204;
    background: var(--grad-gold);
    background-size: 220% 100%;
    box-shadow: 0 14px 34px -12px rgba(224, 168, 38, .6), inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 0 rgba(120, 76, 10, .35);
}
.btn--gold::before { /* barrido de brillo */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
    transform: translateX(-130%);
    transition: transform .9s var(--ease-out);
}
.btn--gold:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 20px 44px -12px rgba(224, 168, 38, .75), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(120, 76, 10, .35); }
.btn--gold:hover::before { transform: translateX(130%); }

.btn--ghost {
    color: var(--text);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.btn--ghost:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .1); border-color: rgba(160, 190, 255, .4); }

.ripple {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, .5);
    transform: scale(0);
    animation: ripple .8s ease-out forwards;
}
.btn--ghost .ripple { background: rgba(160, 190, 255, .35); }

/* ───────────── 5. LOADER ───────────── */
.loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    color: #fff;
}
.loader__panel {
    position: absolute;
    left: 0; right: 0;
    height: 50.5%;
    background:
        radial-gradient(60% 90% at 50% 100%, rgba(47, 109, 240, .22), transparent 70%),
        var(--ink-1000);
    transition: transform 1.15s var(--ease-in-out) .25s;
}
.loader__panel--top { top: 0; }
.loader__panel--bottom {
    bottom: 0;
    background:
        radial-gradient(60% 90% at 50% 0%, rgba(47, 109, 240, .22), transparent 70%),
        var(--ink-1000);
}
.loader__bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.loader__bubbles span {
    position: absolute;
    bottom: -40px;
    left: var(--x);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    border: 1px solid rgba(160, 210, 255, .5);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35), rgba(111, 214, 255, .06) 60%);
    opacity: 0;
    animation: rise var(--t) linear var(--d) infinite;
}
.loader__center {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 22px;
    transition: opacity .6s var(--ease-out), transform .9s var(--ease-out), filter .6s;
}

.orb { position: relative; width: 140px; height: 140px; }
.orb__ring { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); overflow: visible; }
.orb__ring circle { fill: none; stroke-linecap: round; }
.orb__track { stroke: rgba(160, 190, 255, .14); stroke-width: 1.5; }
.orb__bar {
    stroke: url(#ld-grad);
    stroke-width: 2.6;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--p, 0));
    transition: stroke-dashoffset .25s linear;
    filter: drop-shadow(0 0 6px rgba(79, 139, 255, .7));
}
.orb__spin {
    stroke: rgba(255, 226, 138, .95);
    stroke-width: 2.6;
    stroke-dasharray: 7 93;
    transform-origin: 70px 70px;
    animation: spin 1.5s linear infinite;
}
.orb__glass {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .1), rgba(10, 17, 32, .9) 60%);
    border: 1px solid rgba(160, 190, 255, .22);
    box-shadow: inset 0 0 30px rgba(47, 109, 240, .25), 0 0 60px rgba(47, 109, 240, .25);
}
.orb__liquid {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 100%;
    transform: translateY(calc(100% - var(--p, 0) * 1%));
    transition: transform .3s linear;
}
.orb__liquid i {
    position: absolute;
    left: 50%;
    top: -6px;
    width: 280px;
    height: 280px;
    margin-left: -140px;
    border-radius: 43%;
    background: linear-gradient(180deg, rgba(79, 139, 255, .95), rgba(31, 82, 199, .95));
    animation: spin 7s linear infinite;
}
.orb__liquid i:nth-child(2) {
    top: -2px;
    background: linear-gradient(180deg, rgba(111, 214, 255, .5), rgba(47, 109, 240, .55));
    border-radius: 40%;
    animation-duration: 10s;
    animation-direction: reverse;
}
.orb__mark {
    position: relative;
    z-index: 2;
    padding: .05em .1em .2em;
    font: italic 800 1.9rem/1.2 var(--font-script);
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
}
.loader__tag {
    font: 500 .74rem/1 var(--font-display);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--text-2);
    text-align: center;
    padding-inline: 20px;
}
.loader__status { font: 700 2.6rem/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.loader__status small { margin-left: 2px; font-size: 1.1rem; font-weight: 500; color: var(--gold-300); }

.loader.is-leaving .loader__center { opacity: 0; transform: scale(1.14); filter: blur(8px); }
.loader.is-leaving .loader__panel--top { transform: translateY(-101%); }
.loader.is-leaving .loader__panel--bottom { transform: translateY(101%); }
.loader.is-leaving .loader__bubbles { opacity: 0; transition: opacity .5s; }
.loader.is-done { display: none; }

/* ───────────── 6. EFECTOS GLOBALES ───────────── */
.cursor-glow {
    position: fixed;
    left: 0; top: 0;
    z-index: 2;
    width: 560px; height: 560px;
    margin: -280px 0 0 -280px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(79, 139, 255, .15), transparent 62%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity .8s;
    will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }

.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 110;
    height: 3px;
    pointer-events: none;
}
.scroll-progress span {
    display: block;
    height: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--blue-500), var(--cyan) 45%, var(--gold-300));
    box-shadow: 0 0 14px rgba(79, 139, 255, .8);
}

/* ───────────── 7. HEADER ───────────── */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 12px var(--gutter) 0;
    transition: transform .8s var(--ease-out);
}
.site-header.is-hidden { transform: translateY(-140%); }

.site-header__bar {
    max-width: var(--maxw);
    margin-inline: auto;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 8px 0 16px;
    border-radius: var(--r-pill);
    background: rgba(7, 12, 22, .5);
    border: 1px solid rgba(160, 190, 255, .12);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 50px -30px rgba(0, 0, 0, .9);
    transition: background .5s, border-color .5s;
}
.site-header.is-scrolled .site-header__bar { background: rgba(5, 8, 15, .8); border-color: rgba(160, 190, 255, .2); }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 12px;
    font-size: 19px;
    color: var(--gold-200);
    background: linear-gradient(145deg, var(--blue-500), var(--blue-700));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px -8px rgba(47, 109, 240, .8);
}
.brand__word {
    padding: .05em .08em .2em;
    font: italic 800 1.6rem/1.2 var(--font-script);
    letter-spacing: .01em;
    background: var(--grad-gold);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: sheen 8s linear infinite;
}

.nav { display: none; }
.nav a {
    padding: 10px 14px;
    border-radius: var(--r-pill);
    font-size: .95rem;
    font-weight: 500;
    color: var(--text-2);
    transition: color .3s, background .3s;
}
.nav a:hover, .nav a.is-current { color: var(--text); background: rgba(255, 255, 255, .07); }
.nav-cta { display: none; }

.burger {
    position: relative;
    width: 46px; height: 46px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, .05);
}
.burger span {
    position: absolute;
    left: 14px; right: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform .6s var(--ease-out), top .6s var(--ease-out);
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 26px; }
html.menu-open .burger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
html.menu-open .burger span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

/* Menu movil */
.menu {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--header-h) + 32px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
    background: radial-gradient(120% 70% at 100% 0%, rgba(47, 109, 240, .38), transparent 60%), var(--ink-950);
    clip-path: circle(0 at calc(100% - 44px) 40px);
    visibility: hidden;
    transition: clip-path .9s var(--ease-in-out), visibility 0s .9s;
}
html.menu-open .menu {
    clip-path: circle(150% at calc(100% - 44px) 40px);
    visibility: visible;
    transition: clip-path .9s var(--ease-in-out), visibility 0s;
}
.menu__nav { display: grid; }
.menu__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font: 600 clamp(1.9rem, 8.5vw, 2.7rem)/1 var(--font-display);
    letter-spacing: -.03em;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .5s, transform .5s;
}
.menu__nav a i { font-size: .8em; color: var(--gold-300); }
html.menu-open .menu__nav a {
    opacity: 1;
    transform: none;
    transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
}
html.menu-open .menu__nav a:nth-child(1) { transition-delay: .25s; }
html.menu-open .menu__nav a:nth-child(2) { transition-delay: .31s; }
html.menu-open .menu__nav a:nth-child(3) { transition-delay: .37s; }
html.menu-open .menu__nav a:nth-child(4) { transition-delay: .43s; }
html.menu-open .menu__nav a:nth-child(5) { transition-delay: .49s; }
html.menu-open .menu__nav a:nth-child(6) { transition-delay: .55s; }
.menu__foot { display: grid; gap: 16px; justify-items: stretch; text-align: center; }
.menu__foot p { color: var(--text-2); font-size: .95rem; }

/* ───────────── 8. HERO ───────────── */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    align-items: center;
    padding: calc(var(--header-h) + 28px) 0 56px;
    overflow: clip;
    isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }

.aurora span { position: absolute; border-radius: 50%; will-change: transform; }
.aurora__a {
    width: 78vmax; height: 78vmax;
    left: -26vmax; top: -34vmax;
    background: radial-gradient(circle, rgba(47, 109, 240, .55), transparent 62%);
    animation: drift-a 26s ease-in-out infinite alternate;
}
.aurora__b {
    width: 64vmax; height: 64vmax;
    right: -28vmax; top: -12vmax;
    background: radial-gradient(circle, rgba(111, 214, 255, .26), transparent 62%);
    animation: drift-b 32s ease-in-out infinite alternate;
}
.aurora__c {
    width: 60vmax; height: 60vmax;
    left: 22%; bottom: -34vmax;
    background: radial-gradient(circle, rgba(247, 201, 72, .15), transparent 62%);
    animation: drift-c 28s ease-in-out infinite alternate;
}

.floor {
    position: absolute;
    left: -40%; right: -40%;
    bottom: 0;
    height: 46%;
    perspective: 560px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 88%);
    mask-image: linear-gradient(to top, #000 0%, transparent 88%);
}
.floor::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -100%; bottom: 0;
    background-image:
        linear-gradient(rgba(91, 149, 255, .26) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 149, 255, .26) 1px, transparent 1px);
    background-size: 64px 64px;
    transform-origin: 50% 100%;
    transform: rotateX(68deg);
    animation: floor 4.2s linear infinite;
}

.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hero__inner { display: grid; gap: 44px; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px 8px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    background: rgba(10, 17, 32, .62);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: .9rem;
    color: var(--text-2);
}
.pill i { color: var(--gold-300); font-size: 1.1rem; }
.rotator { display: inline-grid; overflow: hidden; color: var(--gold-200); font-weight: 600; padding-bottom: 2px; }
.rotator span {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(120%);
    transition: transform .8s var(--ease-out), opacity .5s;
}
.rotator span.is-on { opacity: 1; transform: none; }
.rotator span.is-off { opacity: 0; transform: translateY(-120%); }

.hero__title {
    margin: 22px 0 20px;
    font: 700 clamp(2.4rem, 10.2vw, 3.6rem)/1.04 var(--font-display);
    letter-spacing: -.04em;
    word-spacing: .08em;
    text-wrap: balance;
}
.hero__lead {
    max-width: 46ch;
    font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
    color: var(--text-2);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .btn--gold { animation: cta-glow 3.4s ease-in-out infinite; }

/* Entrada del hero: se activa cuando termina el loader */
html.fx .hero [data-intro] { opacity: 0; transform: translateY(26px); filter: blur(10px); }
html.fx.is-loaded .hero [data-intro] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out), filter 1s var(--ease-out);
    transition-delay: calc(var(--n, 0) * .14s + .2s);
}
html.fx .hero [data-intro-visual] { opacity: 0; transform: translateY(70px) scale(.92); }
html.fx.is-loaded .hero [data-intro-visual] {
    opacity: 1;
    transform: none;
    transition: opacity 1.4s var(--ease-out) .45s, transform 1.8s var(--ease-out) .45s;
}

/* Logo card */
.hero__visual {
    position: relative;
    isolation: isolate;
    width: min(100%, 540px);
    margin-inline: auto;
}
.hero__visual::before { /* rayos de luz que giran detras del logo */
    content: "";
    position: absolute;
    inset: -22%;
    z-index: -1;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(120, 170, 255, .16) 0 4deg, transparent 4deg 14deg);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 66%);
    mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 66%);
    animation: spin 90s linear infinite;
}
.logo-float { perspective: 1100px; animation: floaty 8s ease-in-out infinite; }
.logo-card {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    will-change: transform;
}
.logo-card::after { /* halo ambiente */
    content: "";
    position: absolute;
    inset: 6% 4%;
    z-index: -1;
    border-radius: 40px;
    background: conic-gradient(from var(--ang, 0deg), rgba(47, 109, 240, .7), rgba(111, 214, 255, .4), rgba(247, 201, 72, .5), rgba(47, 109, 240, .7));
    filter: blur(46px);
    opacity: .55;
    animation: ang 9s linear infinite;
}
.logo-card__edge {
    position: absolute;
    inset: -2px;
    border-radius: 30px;
    background: conic-gradient(from var(--ang, 0deg), transparent 0 55%, rgba(79, 139, 255, .95) 72%, var(--gold-200) 84%, #fff 90%, transparent 100%);
    animation: ang 6s linear infinite;
}
.logo-card__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 10 / 9; /* recorte que oculta la marca de agua inferior del archivo original */
    border-radius: 28px;
    background: #0b0b0d;
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9);
}
.logo-card__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.logo-card__shine {
    position: absolute;
    inset: -20% -60%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .24) 50%, transparent 58%);
    transform: translateX(-60%);
    animation: shine 6.5s ease-in-out 2.6s infinite;
}
.logo-card__glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .26), transparent 55%);
    mix-blend-mode: overlay;
    opacity: var(--go, 0);
}

.orbit { position: absolute; inset: 0; list-style: none; pointer-events: none; }
.chip {
    position: absolute;
    transform: translate3d(calc(var(--px, 0) * var(--z) * 1px), calc(var(--py, 0) * var(--z) * 1px), 0);
    will-change: transform;
}
.chip > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px 8px 9px;
    border-radius: var(--r-pill);
    background: rgba(8, 13, 26, .78);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font: 600 .8rem/1 var(--font-display);
    color: var(--text);
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .85);
    animation: floaty var(--fd, 6s) ease-in-out var(--dl, 0s) infinite;
}
.chip i { font-size: 1.1rem; color: var(--gold-300); }
.chip--1 { top: 3%; left: -2%; --fd: 6.5s; }
.chip--2 { top: 18%; right: -2%; --fd: 7.5s; --dl: -2s; }
.chip--3 { bottom: 22%; left: -3%; --fd: 8s; --dl: -4s; }
.chip--4 { bottom: -5%; right: 8%; --fd: 7s; --dl: -1s; }

/* ───────────── 9. MARQUEE ───────────── */
.marquee {
    padding-block: 20px;
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(47, 109, 240, .08), transparent 30%, transparent 70%, rgba(247, 201, 72, .06));
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__set {
    display: flex;
    flex: none;
    align-items: center;
    gap: clamp(22px, 3vw, 46px);
    padding-right: clamp(22px, 3vw, 46px);
    list-style: none;
    font: 600 clamp(1.4rem, 3.4vw, 2.5rem)/1.15 var(--font-display);
    letter-spacing: -.025em;
}
.marquee__set li { white-space: nowrap; }
.marquee__set li:nth-child(4n+1) { color: var(--text); }
.marquee__set li:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1px rgba(174, 186, 211, .55); }
.marquee__set .sep { color: var(--gold-300); font-size: .7em; }

/* ───────────── 10. DECLARACION ───────────── */
.statement { padding-block: clamp(96px, 16vw, 230px); }
.statement__text {
    max-width: 22em;
    font: 600 clamp(1.75rem, 1rem + 3.7vw, 3.9rem)/1.16 var(--font-display);
    letter-spacing: -.03em;
    word-spacing: .06em;
}
.statement__text b { font-weight: inherit; }
.sw { opacity: .16; transition: opacity .6s var(--ease-out), color .6s var(--ease-out); }
.sw.is-lit { opacity: 1; }
.sw--em.is-lit { color: var(--gold-200); }

/* ───────────── 11. SERVICIOS (BENTO) ───────────── */
.services {
    background: radial-gradient(60% 40% at 85% 0%, rgba(47, 109, 240, .14), transparent 70%);
}
.bento { display: grid; gap: 14px; grid-template-columns: 1fr; }

.svc {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 380px;
    border-radius: var(--r-card);
    border: 1px solid var(--line);
    background: var(--ink-850);
    color: var(--text);
    transition: transform .7s var(--ease-out), border-color .5s, box-shadow .7s var(--ease-out);
}
.svc:hover { transform: translateY(-5px); border-color: rgba(160, 190, 255, .3); box-shadow: 0 40px 80px -40px rgba(47, 109, 240, .55); }
.svc::after { /* borde con luz que sigue al cursor */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 226, 138, .95), rgba(79, 139, 255, .4) 42%, transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity .5s;
}
.svc:hover::after { opacity: 1; }

.svc__media { position: absolute; inset: 0; z-index: -1; isolation: isolate; background: linear-gradient(160deg, var(--blue-700), var(--ink-900)); }
.svc__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
    transform: scale(1.06);
    transition: transform 1.6s var(--ease-out);
}
.svc:hover .svc__media img { transform: scale(1.13); }
.svc__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 6, 11, .96) 0%, rgba(4, 6, 11, .78) 36%, rgba(4, 6, 11, .2) 74%, rgba(4, 6, 11, .3) 100%);
}
.svc__media.is-duo::before { /* tiñe las fotos en blanco y negro con el azul de marca */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--blue-500);
    mix-blend-mode: color;
    opacity: .75;
}
.svc__media.is-broken img { display: none; }

.svc__body { position: relative; z-index: 2; padding: clamp(22px, 3vw, 34px); max-width: 580px; }
.svc__icon {
    display: inline-grid;
    place-items: center;
    width: 48px; height: 48px;
    margin-bottom: 16px;
    border-radius: 14px;
    font-size: 24px;
    color: var(--gold-200);
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.svc h3 { font: 600 clamp(1.4rem, 1rem + 1.2vw, 1.95rem)/1.12 var(--font-display); letter-spacing: -.025em; word-spacing: .05em; }
.svc p { margin-top: 10px; color: #c6d0e6; max-width: 46ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 18px; }
.chips li {
    padding: 7px 13px;
    border-radius: var(--r-pill);
    font-size: .8rem;
    font-weight: 500;
    color: var(--text);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(160, 190, 255, .18);
}
.svc__go {
    position: absolute;
    top: 18px; right: 18px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    font-size: 20px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .6s var(--ease-out), background .3s, color .3s;
}
.svc:hover .svc__go { transform: rotate(45deg) scale(1.08); background: var(--grad-gold); color: #1b1204; border-color: transparent; }

.svc--blue { background: radial-gradient(120% 130% at 100% 0%, #3b7bff 0%, var(--blue-700) 42%, #0a1530 100%); border-color: rgba(143, 184, 255, .3); }
.svc--gold {
    background: radial-gradient(110% 130% at 0% 0%, rgba(247, 201, 72, .3) 0%, transparent 58%), linear-gradient(160deg, #131b32, var(--ink-900));
    border-color: rgba(247, 201, 72, .3);
}
.svc__ghost {
    position: absolute;
    right: -26px; top: -22px;
    z-index: -1;
    font-size: 250px;
    line-height: 1;
    opacity: .13;
}
.svc--blue .svc__ghost { animation: spin 50s linear infinite; }
.svc--gold .svc__ghost { color: var(--gold-200); animation: floaty 9s ease-in-out infinite; }

/* ───────────── 12. TRABAJOS (PAN HORIZONTAL) ───────────── */
.pan { --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); padding-block: var(--sp); }
.pan__head { margin-bottom: 36px; }
.pan__head > * { max-width: 760px; }
.pan__viewport {
    overflow-x: auto;
    padding: 0 var(--gutter) 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pan__viewport::-webkit-scrollbar { display: none; }
.pan__track { display: flex; gap: 16px; width: max-content; }
.pan__card { flex: 0 0 min(78vw, 360px); scroll-snap-align: center; }
.pan__img {
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-card);
    border: 1px solid var(--line);
    background: linear-gradient(160deg, var(--blue-700), var(--ink-900));
}
.pan__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.pan__card figcaption { display: grid; gap: 4px; padding: 16px 4px 0; }
.pan__card figcaption strong { font: 600 1.12rem/1.25 var(--font-display); letter-spacing: -.02em; }
.pan__card figcaption span { color: var(--text-2); font-size: .95rem; }
.pan__end {
    flex: 0 0 min(78vw, 340px);
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 28px;
    border-radius: var(--r-card);
    border: 1px solid rgba(247, 201, 72, .3);
    background: radial-gradient(120% 120% at 0% 0%, rgba(247, 201, 72, .16), transparent 60%), var(--ink-850);
}
.pan__end p { font: 600 clamp(1.5rem, 1.1rem + 1.4vw, 2rem)/1.15 var(--font-display); letter-spacing: -.03em; }
.pan__progress { display: none; }

/* Modo fijado (lo activa el JS en escritorio y sin reduced-motion) */
.pan.is-pinned { padding-block: 0; }
.pan.is-pinned .pan__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(22px, 4.5vh, 48px);
    overflow: hidden;
    padding-top: calc(var(--header-h) - 6px);
}
.pan.is-pinned .pan__head { margin-bottom: 0; }
.pan.is-pinned .pan__head .section-lead { margin-top: 12px; }
.pan.is-pinned .pan__viewport { overflow: visible; padding: 0; scroll-snap-type: none; }
.pan.is-pinned .pan__track { gap: 28px; padding-inline: var(--edge); align-items: flex-start; will-change: transform; }
.pan.is-pinned .pan__card { flex: 0 0 clamp(300px, 25vw, 400px); }
.pan.is-pinned .pan__img { aspect-ratio: auto; height: clamp(250px, 44vh, 480px); }
.pan.is-pinned .pan__card--short { margin-top: clamp(18px, 5vh, 54px); }
.pan.is-pinned .pan__card--short .pan__img { height: clamp(220px, 38vh, 420px); }
.pan.is-pinned .pan__img img { transform: translate3d(calc((var(--p, 0) - .5) * -70px), 0, 0) scale(1.22); }
.pan.is-pinned .pan__end { flex: 0 0 clamp(300px, 26vw, 380px); align-self: stretch; margin-top: clamp(18px, 5vh, 54px); }
.pan.is-pinned .pan__progress {
    display: block;
    height: 2px;
    margin-inline: var(--edge);
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
}
.pan.is-pinned .pan__progress span {
    display: block;
    height: 100%;
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 0));
    background: var(--grad-gold);
}

/* ───────────── 13. PROCESO ───────────── */
.process { background: radial-gradient(55% 40% at 0% 50%, rgba(47, 109, 240, .13), transparent 70%); }
.process__grid { display: grid; gap: 52px; }
.timeline { position: relative; list-style: none; --tp: 0; }
.timeline__rail {
    position: absolute;
    left: 27px; top: 28px; bottom: 28px;
    width: 2px;
    border-radius: 2px;
    background: var(--line);
    list-style: none;
}
.timeline__fill {
    position: absolute;
    inset: 0;
    transform-origin: 50% 0;
    transform: scaleY(var(--tp));
    background: linear-gradient(to bottom, var(--blue-400), var(--gold-300));
    box-shadow: 0 0 14px rgba(91, 149, 255, .7);
}
.timeline__drop {
    position: absolute;
    left: 50%;
    top: calc(var(--tp) * 100%);
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    font-size: 17px;
    color: #1b1204;
    background: var(--grad-gold);
    box-shadow: 0 0 0 6px rgba(247, 201, 72, .12), 0 0 22px rgba(247, 201, 72, .8);
    z-index: 2;
}
.tl {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 22px;
    padding-bottom: clamp(48px, 8vw, 92px);
}
.tl:last-child { padding-bottom: 0; }
.tl__node {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    font-size: 24px;
    color: var(--text-3);
    background: var(--ink-900);
    border: 1px solid var(--line-strong);
    transition: color .6s, background .6s, box-shadow .8s var(--ease-out), border-color .6s, transform .8s var(--ease-out);
}
.tl.is-on .tl__node {
    color: #1b1204;
    background: var(--grad-gold);
    border-color: transparent;
    transform: scale(1.08);
    box-shadow: 0 0 0 9px rgba(247, 201, 72, .08), 0 14px 34px -8px rgba(247, 201, 72, .55);
}
.tl__body { padding-top: 6px; }
.tl__body h3 { font: 600 clamp(1.35rem, 1rem + 1.1vw, 1.8rem)/1.15 var(--font-display); letter-spacing: -.025em; }
.tl__body p { margin-top: 10px; max-width: 46ch; color: var(--text-2); }

/* ───────────── 14. ESTANDAR ───────────── */
.standard { position: relative; isolation: isolate; overflow: clip; padding-block: var(--sp); }
.standard__bg { position: absolute; inset: -14% 0; z-index: -2; }
.standard__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; opacity: .62; will-change: transform; }
.standard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, var(--ink-950) 0%, rgba(5, 8, 15, .74) 20%, rgba(5, 8, 15, .78) 80%, var(--ink-950) 100%),
        radial-gradient(80% 60% at 15% 30%, rgba(47, 109, 240, .32), transparent 70%);
}
.standard__inner { display: grid; gap: 40px; }
.checks {
    display: grid;
    gap: 18px;
    list-style: none;
    padding: clamp(24px, 3vw, 38px);
    border-radius: var(--r-card);
    background: rgba(8, 13, 26, .6);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .85);
}
.checks li { display: flex; align-items: flex-start; gap: 14px; font-size: 1.04rem; color: var(--text); }
.checks i { flex: none; margin-top: 1px; font-size: 24px; color: var(--gold-300); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat { padding-top: 22px; border-top: 1px solid var(--line-strong); }
.stat__n {
    display: inline-flex;
    align-items: baseline;
    font: 700 clamp(2.6rem, 9vw, 5.6rem)/1 var(--font-display);
    letter-spacing: -.05em;
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.stat__n small { font-size: .5em; letter-spacing: 0; margin-right: 2px; }
.stat dd { margin-top: 10px; max-width: 22ch; font-size: clamp(.82rem, .75rem + .3vw, 1rem); color: var(--text-2); }

/* ───────────── 15. SECTORES ───────────── */
.acc { display: flex; flex-direction: column; gap: 12px; }
.acc__item {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: 100px;
    border-radius: var(--r-card);
    border: 1px solid var(--line);
    background: linear-gradient(160deg, var(--blue-700), var(--ink-900));
    cursor: pointer;
    transition: height .8s var(--ease-out), border-color .5s;
}
.acc__item.is-active { height: 380px; border-color: rgba(160, 190, 255, .3); }
.acc__item img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
    filter: brightness(.55) saturate(.85);
    transform: scale(1.1);
    transition: filter .9s var(--ease-out), transform 1.4s var(--ease-out);
}
.acc__item.is-active img { filter: none; transform: scale(1); }
.acc__item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(4, 6, 11, .94) 0%, rgba(4, 6, 11, .5) 52%, rgba(4, 6, 11, .1) 100%);
}
.acc__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px; }
.acc__body i { display: block; margin-bottom: 6px; font-size: 24px; color: var(--gold-300); }
.acc__body h3 { font: 600 clamp(1.15rem, 1rem + .7vw, 1.55rem)/1.15 var(--font-display); letter-spacing: -.025em; }
.acc__body p {
    max-width: 38ch;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    color: #cdd6ea;
    transition: max-height .8s var(--ease-out), opacity .6s, margin .6s;
}
.acc__item.is-active .acc__body p { max-height: 140px; margin-top: 10px; opacity: 1; transition-delay: .15s; }

/* ───────────── 16. FAQ ───────────── */
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 24px 4px;
    border: 0;
    background: none;
    text-align: left;
    font: 600 clamp(1.08rem, .95rem + .55vw, 1.32rem)/1.3 var(--font-display);
    letter-spacing: -.02em;
    color: var(--text);
}
.faq__q i {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    font-size: 18px;
    border: 1px solid var(--line-strong);
    transition: transform .6s var(--ease-out), background .3s, color .3s, border-color .3s;
}
.faq__q:hover i { border-color: var(--gold-300); }
.faq__item.is-open .faq__q i { transform: rotate(135deg); color: #1b1204; background: var(--grad-gold); border-color: transparent; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-out); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 4px 26px; max-width: 62ch; color: var(--text-2); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* ───────────── 17. CONTACTO ───────────── */
.contact {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: calc(var(--sp) + 40px) var(--sp);
    background: linear-gradient(180deg, var(--ink-950) 0%, #081633 52%, #0b1f4d 100%);
}
.contact__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.contact__glow { position: absolute; border-radius: 50%; will-change: transform; }
.contact__glow--a { width: 60vmax; height: 60vmax; left: -22vmax; top: 10%; background: radial-gradient(circle, rgba(47, 109, 240, .4), transparent 62%); animation: drift-a 24s ease-in-out infinite alternate; }
.contact__glow--b { width: 46vmax; height: 46vmax; right: -16vmax; bottom: -10vmax; background: radial-gradient(circle, rgba(247, 201, 72, .16), transparent 62%); animation: drift-c 22s ease-in-out infinite alternate; }
.wave {
    position: absolute;
    left: 0; top: -1px;
    width: 200%;
    max-width: none; /* anula el max-width:100% global de svg, necesario para el loop sin cortes */
    height: 96px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
}
.wave--1 { fill: rgba(47, 109, 240, .16); animation: wave-x 20s linear infinite; }
.wave--2 { top: 12px; fill: rgba(111, 214, 255, .08); animation: wave-x 28s linear infinite reverse; }

.contact__inner { display: grid; gap: 44px; }
.contact__list { display: grid; gap: 14px; margin-top: 32px; }
.contact__row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px 14px 14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
    transition: border-color .4s, background .4s, transform .6s var(--ease-out);
}
a.contact__row:hover { border-color: rgba(247, 201, 72, .45); background: rgba(247, 201, 72, .06); transform: translateX(4px); }
.contact__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 14px;
    font-size: 24px;
    color: var(--gold-200);
    background: linear-gradient(145deg, rgba(47, 109, 240, .5), rgba(23, 61, 150, .5));
    border: 1px solid var(--line-strong);
}
.contact__row small { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.contact__row strong { font: 600 1.08rem/1.3 var(--font-display); letter-spacing: -.01em; }

.contact__logo {
    display: none;
    position: relative;
    isolation: isolate;
    width: min(100%, 360px);
    margin-top: 40px;
}
.contact__logo::before {
    content: "";
    position: absolute;
    inset: 8%;
    z-index: -1;
    border-radius: 40px;
    background: conic-gradient(from var(--ang, 0deg), rgba(47, 109, 240, .7), rgba(111, 214, 255, .4), rgba(247, 201, 72, .5), rgba(47, 109, 240, .7));
    filter: blur(40px);
    opacity: .5;
    animation: ang 10s linear infinite;
}
.contact__logo div { overflow: hidden; aspect-ratio: 10 / 9; border-radius: 24px; border: 1px solid var(--line-strong); background: #0b0b0d; }
.contact__logo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

.form {
    display: grid;
    gap: 18px;
    padding: clamp(24px, 3.4vw, 40px);
    border-radius: var(--r-card);
    background: rgba(8, 13, 26, .72);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 50px 100px -50px rgba(0, 0, 0, .9);
}
.form__title { font: 600 clamp(1.4rem, 1.1rem + 1vw, 1.8rem)/1.2 var(--font-display); letter-spacing: -.03em; }
.form__row { display: grid; gap: 18px; }
@media (min-width: 1280px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field label { font-size: .9rem; font-weight: 500; color: var(--text); }
.field label span { color: var(--text-3); font-weight: 400; }
.field input, .field select, .field textarea {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: var(--r-input);
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 1rem;
    transition: border-color .3s, box-shadow .3s, background .3s;
}
.field textarea { resize: vertical; min-height: 104px; }
.field ::placeholder { color: #8d9bb8; opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(160, 190, 255, .4); }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--blue-400);
    background: rgba(91, 149, 255, .08);
    box-shadow: 0 0 0 4px rgba(91, 149, 255, .22);
}
.field [aria-invalid="true"] { border-color: #ff8a8a; box-shadow: 0 0 0 4px rgba(255, 138, 138, .16); }
.field__err { min-height: 0; font-size: .85rem; color: #ffb4b4; }
.field__err:empty { display: none; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-2); }
.field option { background: #0d1424; color: #fff; }
.form__status { min-height: 1.3em; text-align: center; font-size: .92rem; color: var(--text-2); }
.form__status a { color: var(--gold-200); text-decoration: underline; text-underline-offset: 3px; }
.form.is-sending .btn--gold { pointer-events: none; opacity: .85; }

/* ───────────── 18. FOOTER ───────────── */
.footer { position: relative; overflow: clip; padding-top: clamp(64px, 9vw, 110px); background: var(--ink-1000); border-top: 1px solid var(--line); }
.footer__top { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
.footer__brand, .footer__top > div.footer__col { grid-column: 1 / -1; }
.footer__brand p { margin-top: 18px; max-width: 34ch; color: var(--text-2); }
.footer__col { display: grid; align-content: start; gap: 12px; }
.footer__col h2 { margin-bottom: 4px; font: 600 .78rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.footer__col a { width: fit-content; color: var(--text-2); transition: color .3s, transform .4s var(--ease-out); }
.footer__col a:hover { color: var(--gold-200); transform: translateX(4px); }
.footer__giant {
    margin: clamp(32px, 6vw, 70px) 0 -.18em;
    padding-bottom: .2em;
    text-align: center;
    user-select: none;
    font: italic 800 clamp(3rem, calc((100vw - var(--gutter) * 2) / 4.9), 16.5rem)/.95 var(--font-script);
    letter-spacing: -.02em;
    background: linear-gradient(180deg, rgba(247, 201, 72, .5) 0%, rgba(247, 201, 72, .08) 70%, transparent 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.footer__bottom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-block: 22px calc(26px + 70px);
    border-top: 1px solid var(--line);
    font-size: .9rem;
    color: var(--text-3);
}
.footer__top-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); transition: color .3s; }
.footer__top-link:hover { color: var(--gold-200); }

/* ───────────── 19. WHATSAPP FLOTANTE ───────────── */
.wa-float {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none; /* el tooltip invisible no debe bloquear toques sobre el contenido */
}
.wa-float__btn { pointer-events: auto; }
html.fx .wa-float { opacity: 0; transform: translateY(24px) scale(.8); }
html.fx.is-loaded .wa-float { opacity: 1; transform: none; transition: opacity .9s var(--ease-out) 1.4s, transform 1.1s var(--ease-out) 1.4s; }
.wa-float__btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 62px; height: 62px;
    border-radius: 50%;
    font-size: 34px;
    color: #fff;
    background: linear-gradient(145deg, #2ee27a, #12a150);
    box-shadow: 0 18px 40px -10px rgba(18, 161, 80, .7), inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: transform .5s var(--ease-out);
}
.wa-float__btn::before, .wa-float__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(46, 226, 122, .6);
    animation: pulse-ring 2.8s ease-out infinite;
}
.wa-float__btn::after { animation-delay: 1.4s; }
.wa-float:hover .wa-float__btn { transform: scale(1.08) rotate(-6deg); }
.wa-float__tip {
    padding: 10px 16px;
    border-radius: var(--r-pill);
    font: 600 .9rem/1 var(--font-display);
    color: var(--text);
    background: rgba(8, 13, 26, .9);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateX(14px);
    pointer-events: none;
    transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.wa-float:hover .wa-float__tip, .wa-float:focus-visible .wa-float__tip, .wa-float.is-tip .wa-float__tip { opacity: 1; transform: none; }

/* ───────────── 20. KEYFRAMES ───────────── */
@property --ang { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } }
@keyframes sheen { 0% { background-position: 0% 50%; } 100% { background-position: 240% 50%; } }
@keyframes ang { to { --ang: 360deg; } }
@keyframes shine { 0% { transform: translateX(-60%); } 38%, 100% { transform: translateX(60%); } }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .75; } 100% { transform: translateY(-115vh); opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 44px, 0) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
@keyframes drift-a { to { transform: translate3d(9vmax, 7vmax, 0) scale(1.1); } }
@keyframes drift-b { to { transform: translate3d(-8vmax, 9vmax, 0) scale(.92); } }
@keyframes drift-c { to { transform: translate3d(-12vmax, -5vmax, 0) scale(1.12); } }
@keyframes floor { from { transform: rotateX(68deg) translateY(0); } to { transform: rotateX(68deg) translateY(64px); } }
@keyframes wave-x { to { transform: translateX(-50%); } }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes cta-glow {
    0%, 100% { box-shadow: 0 14px 34px -12px rgba(224, 168, 38, .55), inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 0 rgba(120, 76, 10, .35); }
    50% { box-shadow: 0 18px 54px -8px rgba(247, 201, 72, .85), inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 0 rgba(120, 76, 10, .35); }
}

/* ───────────── 21. RESPONSIVE (mobile first) ───────────── */
@media (min-width: 640px) {
    .hero__title { font-size: clamp(3.2rem, 7.4vw, 4.4rem); }
    .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(380px, auto); }
    .svc--lg { grid-column: span 2; }
}

@media (min-width: 960px) {
    :root { --header-h: 84px; }
    .burger { display: none; }
    .nav { display: flex; align-items: center; gap: 2px; }
    .nav-cta { display: inline-flex; }
    .site-header__bar { height: 64px; padding: 0 10px 0 20px; }

    .hero__inner { grid-template-columns: 1.06fr .94fr; gap: 40px; align-items: center; }
    .hero__title { font-size: clamp(2.8rem, 4.6vw, 4.4rem); }
    .hero__visual { width: min(100%, 560px); margin-inline: 0 0; margin-left: auto; }
    .chip > span { font-size: .88rem; padding: 10px 15px 10px 11px; }

    .bento { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(360px, auto); }
    .svc--lg { grid-column: span 8; }
    .svc--sm { grid-column: span 4; }
    .svc--md { grid-column: span 6; }

    .process__grid { grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
    .process__intro { position: sticky; top: 140px; }

    .standard__inner { grid-template-columns: 1fr 1fr; gap: 64px 90px; align-items: center; }
    .stats { grid-column: 1 / -1; gap: 40px; }

    .acc { flex-direction: row; height: 540px; gap: 14px; }
    .acc__item { height: auto; flex: 1 1 0; min-width: 0; transition: flex-grow .9s var(--ease-out), border-color .5s; }
    .acc__item.is-active { height: auto; flex-grow: 3.6; }
    .acc__body { padding: 26px; }

    .contact__inner { grid-template-columns: 1fr 1.02fr; gap: 80px; align-items: start; }
    .contact__logo { display: block; }

    .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
    .footer__brand, .footer__top > div.footer__col { grid-column: auto; }
}

@media (min-width: 1280px) {
    .chip--1 { left: -6%; }
    .chip--2 { right: -7%; }
    .chip--3 { left: -8%; }
}

@media (max-width: 380px) {
    .btn--lg { padding: 0 1.4rem; font-size: 1rem; }
    .chip--3, .chip--2 { display: none; }
}

@supports not (backdrop-filter: blur(1px)) {
    .site-header__bar, .chip > span, .checks, .form, .pill { background: rgba(7, 12, 22, .94); }
}

/* ───────────── 22. MOVIMIENTO REDUCIDO ───────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
    html.fx [data-reveal], html.fx [data-stagger] > *, html.fx .hero [data-intro], html.fx .hero [data-intro-visual], html.fx .wa-float { opacity: 1 !important; transform: none !important; filter: none !important; }
    .is-split .wi { transform: none !important; }
    .sw { opacity: 1 !important; }
    .cursor-glow, .hero__canvas, .floor, .hero__visual::before { display: none; }
}