/* ==========================================================================
   Moven Agency — Hoja de estilos
   Sistema de diseño basado en DESIGN.md (dark editorial premium, sin neón).

   Índice
   1.  Tokens (:root)
   2.  Reset & base
   3.  Fondos (grano + partículas)
   4.  Tipografía base & utilidades (container, skip-link)
   5.  Botones
   6.  Navegación
   7.  Hero
   8.  Cabeceras de sección
   9.  Servicios (índice numerado)
   10. Visuales animados de los servicios
   11. Marquee
   12. Trabajos (showcase)
   13. CTA
   14. Footer
   15. WhatsApp flotante
   16. Reveal & motion
   17. Responsive
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
    /* Tinta índigo — derivada del morado oscuro de marca #3E1AAA (ver BRANDING.md) */
    --ink-900: #0A0818;
    --ink-850: #0D0B1F;
    --ink-800: #141127;
    --ink-700: #1D1936;

    /* Texto — porcelana fría (gris claro de marca #F3F3F5 como principal) */
    --bone: #F3F3F5;
    --bone-dim: #A19FB4;
    --bone-faint: #67647E;

    --line: rgba(243, 243, 245, 0.09);
    --line-strong: rgba(243, 243, 245, 0.16);

    /* Acento primario — morado principal #734BEE, aclarado para texto chico sobre tinta */
    --accent: #8F6FF3;
    --accent-deep: #734BEE;
    --accent-dim: #5A48A8;

    /* Acento frío — azul eléctrico de marca #0080FF, aclarado. Solo señal/movimiento. */
    --accent-cool: #3D9BFF;
    --accent-cool-dim: #1D6FD1;

    --font-display: 'Schibsted Grotesk', sans-serif;
    --font-heading: 'Kumbh Sans', 'Schibsted Grotesk', sans-serif;
    --font-body: 'Hanken Grotesk', sans-serif;

    --maxw: 1280px;
    --ease: cubic-bezier(0.32, 0.72, 0, 1);

    --z-nav: 100;
    --z-overlay: 90;
    --z-grain: 200;
}

/* 1b. FUENTES — los titulares H1/H2 usan Kumbh Sans (Google Fonts, geométrica).
   Display/UI sigue Schibsted Grotesk; body, Hanken Grotesk. */

/* 2. RESET & BASE ---------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background: var(--ink-900);
    color: var(--bone);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::selection { background: var(--bone); color: var(--ink-900); }
a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent-cool); outline-offset: 4px; border-radius: 4px;
}

/* 3. FONDOS ---------------------------------------------------------------- */
.premium-bg {
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background: radial-gradient(120% 120% at 50% 0%, #15112E 0%, var(--ink-900) 65%);
}
.grid-overlay {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: 
        linear-gradient(to right, rgba(243, 243, 245, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(243, 243, 245, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
            mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
}
/* Grano de film */
.grain {
    position: fixed; inset: 0; z-index: var(--z-grain);
    pointer-events: none; opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 4. TIPOGRAFÍA BASE & UTILIDADES ----------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.03em; line-height: 1; font-weight: 800; }
/* Kumbh Sans (geométrica) solo en H1/H2 — peso 700, tracking ajustado para sans display.
   font-synthesis:none evita pesos sintéticos. */
h1, h2 { font-family: var(--font-heading); font-synthesis: none; font-weight: 700; letter-spacing: -0.022em; }

.container { max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(24px, 6vw, 80px); }

.skip-link {
    position: absolute; left: 20px; top: -60px;
    background: var(--bone); color: var(--ink-900);
    padding: 10px 18px; border-radius: 999px;
    font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
    z-index: 300; transition: top 0.3s var(--ease);
}
.skip-link:focus { top: 20px; }


/* 5. BOTONES (Island + icono anidado) ------------------------------------- */
.btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
    border-radius: 999px; cursor: pointer; border: 1px solid transparent;
    transition: transform 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn:active { transform: scale(0.98); }

/* Border Glow (portado de ReactBits, adaptado a las pills): borde violeta que gira
   solo en reposo y, en hover, se ilumina y apunta al cursor. --bg-angle se anima por CSS
   (idle) y lo pisa el JS con !important mientras el cursor está encima. */
@property --bg-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 90deg;
}
.btn::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.6px;
    background: conic-gradient(from var(--bg-angle),
        var(--accent) 6%, transparent 26%,
        var(--accent-cool) 50%, transparent 74%,
        var(--accent) 94%);
    -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, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: 0.28; transition: opacity 0.4s var(--ease); pointer-events: none;
    animation: btnGlowSpin 8s linear infinite;
}
@keyframes btnGlowSpin { to { --bg-angle: 450deg; } }
.btn:hover, .btn:focus-visible {
    box-shadow: 0 0 12px -4px rgba(115, 75, 238, 0.30), 0 0 22px 0 rgba(0, 128, 255, 0.12);
}
.btn:hover::after, .btn:focus-visible::after { opacity: 0.7; }
.btn-primary { background: var(--bone); color: var(--ink-900); padding: 8px 8px 8px 26px; }
.btn-primary .ico {
    width: 34px; height: 34px; border-radius: 999px;
    background: rgba(10, 8, 24, 0.08);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.btn-primary:hover .ico { transform: translate(2px, -2px) scale(1.06); background: rgba(10, 8, 24, 0.14); }
.btn-ghost { background: transparent; color: var(--bone-dim); border-color: var(--line-strong); padding: 14px 26px; }
.btn-ghost:hover { color: var(--bone); border-color: var(--bone); }

/* 6. NAVEGACIÓN (pill flotante de cristal) -------------------------------- */
.nav-wrap { position: fixed; top: 0; left: 0; width: 100%; z-index: var(--z-nav); display: flex; flex-direction: column; align-items: center; padding: 24px clamp(16px, 5vw, 40px) 0; pointer-events: none; }
nav {
    pointer-events: auto;
    width: 100%; max-width: var(--maxw);
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px 12px 26px;
    border-radius: 999px;
    background: rgba(10, 8, 24, 0.55);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
nav.scrolled { background: rgba(10, 8, 24, 0.82); border-color: var(--line-strong); }
.logo { position: relative; display: inline-flex; align-items: center; }
.logo img { height: 30px; width: auto; display: block; }

/* 6c. FLUJO DEL LOGO — una corriente de luz azul->violeta recorre el logo,
   enmascarada con la forma del propio logo (representa la fluidez de la marca).
   Capa aparte sobre el <img> nítido; si el navegador no soporta mask, no se muestra. */
.logo-flow { display: none; }
@supports ((-webkit-mask-image: url("../assets/logos/moven-logo-horizontal-neg.svg")) or (mask-image: url("../assets/logos/moven-logo-horizontal-neg.svg"))) {
    .logo-flow {
        display: block; position: absolute; inset: 0; pointer-events: none;
        -webkit-mask: url("../assets/logos/moven-logo-horizontal-neg.svg") center / contain no-repeat;
                mask: url("../assets/logos/moven-logo-horizontal-neg.svg") center / contain no-repeat;
        background-image: linear-gradient(104deg,
            transparent 34%,
            rgba(61, 155, 255, 0.95) 46%,
            rgba(143, 111, 243, 0.9) 54%,
            transparent 66%);
        background-repeat: no-repeat;
        background-size: 260% 100%;
        background-position: -40% 0;
        opacity: 0;
        animation: logoFlow 6s var(--ease) infinite;
    }
    .logo:hover .logo-flow { animation-duration: 3s; }
}
/* Corriente: entra por la izquierda, cruza el logo y sale por la derecha, con
   una pausa antes de repetir (pulso cada ~6s, no un loop constante). */
@keyframes logoFlow {
    0%   { background-position: -40% 0; opacity: 0; }
    10%  { opacity: 1; }
    46%  { opacity: 1; }
    58%  { background-position: 140% 0; opacity: 0; }
    100% { background-position: 140% 0; opacity: 0; }
}
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a:not(.btn) { position: relative; display: inline-flex; align-items: center; color: var(--bone-dim); padding: 10px 16px; font-family: var(--font-display); font-weight: 500; font-size: 0.88rem; border-radius: 999px; transition: color 0.3s var(--ease); }
.nav-links a:not(.btn):hover { color: var(--bone); }
.nav-links a.active:not(.btn), .nav-links a[aria-current="page"]:not(.btn) { color: var(--bone); }
.nav-links a.active:not(.btn)::after, .nav-links a[aria-current="page"]:not(.btn)::after {
    content: ''; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px;
    border-radius: 999px; background: var(--accent-cool); transform: translateX(-50%);
}
nav .btn-primary { font-size: 0.85rem; padding: 6px 6px 6px 20px; }
nav .btn-primary .ico { width: 30px; height: 30px; }

/* 6b. TOGGLE + MENÚ MOBILE (hamburger de cristal) ------------------------- */
.nav-toggle {
    display: none; /* solo mobile */
    width: 44px; height: 44px; flex-shrink: 0;
    align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--line-strong);
    border-radius: 999px; cursor: pointer; color: var(--bone);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav-toggle:hover { border-color: var(--bone); }
.nav-toggle-bars { position: relative; width: 18px; height: 12px; }
.nav-toggle-bars span {
    position: absolute; left: 0; width: 100%; height: 1.8px; border-radius: 2px;
    background: currentColor; transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
    pointer-events: auto; margin: 10px auto 0; width: 100%; max-width: var(--maxw);
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px; border-radius: 24px;
    background: rgba(10, 8, 24, 0.9);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line-strong);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    transform-origin: top center;
    animation: menuIn 0.4s var(--ease) both;
}
.mobile-menu[hidden] { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }
.mobile-menu a:not(.btn) {
    color: var(--bone-dim); font-family: var(--font-display); font-weight: 600;
    font-size: 1.05rem; padding: 14px 16px; border-radius: 14px;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.mobile-menu a:not(.btn):hover, .mobile-menu a.active:not(.btn) { color: var(--bone); background: var(--ink-800); }
.mobile-menu .btn-primary { justify-content: center; margin-top: 8px; padding: 12px 12px 12px 22px; }

/* 7. HERO (editorial split) ----------------------------------------------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: clamp(110px, 14vh, 168px) clamp(56px, 8vh, 96px); overflow: hidden; }
.hero::before {
    content: ''; position: absolute; top: -10%; right: -5%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
    background: radial-gradient(circle, rgba(115, 75, 238, 0.05), transparent 65%);
    pointer-events: none; z-index: 0;
}
.hero::after {
    content: ''; position: absolute; bottom: -18%; left: -8%; width: 55vw; height: 55vw; max-width: 820px; max-height: 820px;
    background: radial-gradient(circle, rgba(0, 128, 255, 0.05), transparent 65%);
    pointer-events: none; z-index: 0;
}
.hero .container { position: relative; z-index: 1; width: 100%; }
.hero h1 {
    font-size: clamp(2.8rem, 6.4vw, 5.6rem);
    font-weight: 700; letter-spacing: -0.025em; line-height: 0.98;
    max-width: 16ch; text-wrap: balance; margin-bottom: 32px;
}
.hero h1 .soft { color: var(--bone-faint); }
.hero-lower { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 40px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero p { font-size: 1.2rem; color: var(--bone-dim); max-width: 46ch; text-wrap: pretty; }
.hero-meta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.hero-meta .item { display: flex; flex-direction: column; gap: 4px; }
.hero-meta .k { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.hero-meta .v { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-faint); }

/* 7b. HERO FIGURE — sistema animado "Publicidad → Automatización → Marketing" --
   Escena data-viz en el mismo lenguaje que los visuales de servicios (.viz-svg): los
   canales de pauta entran por la izquierda → un motor de automatización los procesa al
   centro → el marketing los convierte en crecimiento a la derecha. Partículas azules
   recorren los flujos. El SVG reusa las clases .viz-svg (.flow/.node/.ring/.tok-a/.lbl);
   acá debajo va solo lo propio de la escena. */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center; gap: clamp(28px, 4vw, 64px); width: 100%;
}
.hero-copy { min-width: 0; }
.hero-figure {
    position: relative; justify-self: center;
    width: min(100%, 520px);
    animation: heroRise 1.1s var(--ease) 0.7s both;
}
/* Reactor: corrientes de partículas entran por la izquierda (señales / pauta), un núcleo
   con anillos y arcos las procesa, y salen disparadas hacia arriba-derecha (crecimiento).
   Mismo concepto que el diagrama anterior, ejecutado como motor vivo: sin cajas ni texto. */
.hero-rx { width: 100%; height: auto; display: block; overflow: visible; animation: heroFloat 11s ease-in-out infinite; }
.hero-rx .stream { fill: none; stroke: rgba(61, 155, 255, 0.09); stroke-width: 1; stroke-dasharray: 2 8; }
.hero-rx .p { fill: var(--accent-cool); }
.hero-rx .p-dim { fill: rgba(61, 155, 255, 0.5); }
.hero-rx .p-out { fill: rgba(122, 193, 255, 0.95); }
.hero-rx .rx-ring { fill: none; stroke: rgba(61, 155, 255, 0.34); stroke-width: 1.2; stroke-dasharray: 3 7; transform-box: view-box; transform-origin: 250px 220px; }
.hero-rx .rx-ring-b { stroke: rgba(61, 155, 255, 0.20); stroke-dasharray: 2 6; }
.hero-rx .rx-arc { fill: none; stroke: rgba(122, 193, 255, 0.5); stroke-width: 1.6; stroke-linecap: round; transform-box: view-box; transform-origin: 250px 220px; }
.hero-rx .r-a { animation: gyroSpin 17s linear infinite; }
.hero-rx .r-b { animation: gyroSpin 12s linear infinite reverse; }
.hero-rx .r-c { animation: gyroSpin 26s linear infinite; }
.hero-rx .rx-core { fill: var(--accent-cool); }
.hero-rx .rx-glow { transform-box: fill-box; transform-origin: center; animation: glowPulse 3s ease-in-out infinite; }
.hero-rx .rx-halo { fill: none; stroke: var(--accent-cool); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ripple 3.4s var(--ease) infinite; }
/* Íconos que viajan por las corrientes (entran redes/ads/mensajes, salen ventas/crecimiento).
   opacity:0 de base = no parpadean en (0,0) antes de que arranque su animación. */
.hero-rx .ic { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.hero-rx .ic-in { stroke: rgba(61, 155, 255, 0.78); }
.hero-rx .ic-out { stroke: rgba(122, 193, 255, 0.95); }
.hero-rx .ic-in .ic-solid, .hero-rx .ic-in .ic-dot { fill: rgba(61, 155, 255, 0.78); stroke: none; }
.hero-rx .ic-out .ic-solid, .hero-rx .ic-out .ic-dot { fill: rgba(122, 193, 255, 0.95); stroke: none; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes gyroSpin { to { transform: rotate(360deg); } }
@keyframes glowPulse { 0%, 100% { opacity: 0.45; transform: scale(0.9); } 50% { opacity: 0.85; transform: scale(1.12); } }
@media (max-width: 920px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-figure { display: none; }
}

/* 8. CABECERAS DE SECCIÓN -------------------------------------------------- */
section.block { padding-block: clamp(100px, 14vw, 190px); }
section.alt { background: var(--ink-850); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: clamp(48px, 7vw, 90px); }
.section-head .left { max-width: 760px; }
.section-title { font-size: clamp(2.4rem, 5.5vw, 4.5rem); font-weight: 700; letter-spacing: -0.022em; line-height: 0.98; text-wrap: balance; }
.section-title em { font-style: normal; color: var(--bone-faint); }
.section-note { color: var(--bone-dim); font-size: 1.05rem; max-width: 34ch; }

/* 9. SERVICIOS (Ecosistema Map) -------------------------------------------- */
.eco-map { position: relative; margin-top: 60px; padding-block: 40px; }
.eco-path { position: absolute; top: 0; bottom: 0; left: 50%; width: 100px; height: 100%; transform: translateX(-50%); pointer-events: none; z-index: 0; }
.eco-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 100px); align-items: center; margin-bottom: clamp(100px, 15vw, 160px); position: relative; z-index: 1; }
.eco-block:last-child { margin-bottom: 0; }
.eco-block:nth-child(odd) .eco-viz { order: -1; }
.eco-text h3 { font-family: var(--font-display); font-size: clamp(2.2rem, 3.5vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 24px; text-wrap: balance; }
.eco-tag { display: inline-block; color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 16px; background: rgba(115, 75, 238, 0.12); padding: 8px 16px; border-radius: 999px; }
.eco-text p { font-size: 1.15rem; color: var(--bone-dim); line-height: 1.7; margin-bottom: 32px; max-width: 46ch; }
.eco-text ul { list-style: none; display: grid; gap: 16px; }
.eco-text li { display: flex; align-items: flex-start; gap: 14px; color: var(--bone); font-size: 1.05rem; }
.eco-text li svg { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; flex-shrink: 0; }

/* 10. VISUALES DE LOS SERVICIOS -------------------------------------------- */

.eco-viz { background: rgba(243, 243, 245, 0.03); border: 1px solid var(--line); padding: 12px; border-radius: 26px; align-self: stretch; box-shadow: 0 40px 80px rgba(0,0,0,0.5); }
.svc-viz-core { background: var(--ink-800); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(243, 243, 245, 0.06); padding: clamp(24px, 4vw, 40px); position: relative; overflow: hidden; height: 100%; }
.svc-viz-core::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.35; -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 80%); mask-image: radial-gradient(circle at 50% 45%, #000, transparent 80%); }

.viz-svg { position: relative; width: 100%; height: auto; display: block; }
.viz-svg .lbl { fill: var(--bone-dim); font-family: var(--font-body); font-size: 11px; font-weight: 500; }
.viz-svg .lbl-faint { fill: var(--bone-faint); }
.viz-svg .node { fill: var(--ink-700); stroke: var(--line-strong); stroke-width: 1.5; }
.viz-svg .wall { stroke: var(--line-strong); stroke-width: 1.5; fill: none; }
.viz-svg .band { stroke: var(--line); stroke-width: 1; fill: none; }
.viz-svg .tok-n { fill: var(--bone-dim); }
.viz-svg .tok-a { fill: var(--accent-cool); }
.viz-svg .ring { fill: none; stroke: var(--accent-cool); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ripple 2.8s var(--ease) infinite; }
.viz-svg .pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s var(--ease) infinite; }
.viz-svg .orbit-line { stroke: var(--line); stroke-width: 1.25; fill: none; stroke-dasharray: 4 6; }
.viz-svg .heart { fill: var(--accent); }
.viz-svg .glyph { stroke: var(--bone); stroke-width: 1.6; fill: none; }
.viz-svg .flow { stroke: rgba(61, 155, 255, 0.42); stroke-width: 1.5; fill: none; stroke-dasharray: 6 7; animation: dash 1.6s linear infinite; }
.viz-svg .draw { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 240; animation: drawmark 5s var(--ease) infinite; }
.viz-svg .swatch { transform-box: fill-box; transform-origin: center; animation: swin 4s var(--ease) infinite; }
.viz-svg .type-spec { font-family: var(--font-display); font-weight: 700; }

/* Keyframes de los visuales */
@keyframes dash { to { stroke-dashoffset: -26; } }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes ripple { 0% { opacity: 0.6; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes drawmark { 0% { stroke-dashoffset: 240; } 40% { stroke-dashoffset: 0; } 72% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 240; } }
@keyframes swin { 0%, 100% { opacity: 0.35; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1); } }

/* 12. TRABAJOS (loop horizontal infinito de tarjetas) --------------------- */
/* Marquee: pista duplicada + translateX(-50%). Se usa margin-right por card (no gap) para
   que las dos mitades midan exactamente igual y el loop no salte. Pausa en hover; bajo
   prefers-reduced-motion se convierte en scroll manual y se ocultan los clones. */
.work-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.work-track { display: flex; width: max-content; animation: workScroll 44s linear infinite; }
.work-marquee:hover .work-track { animation-play-state: paused; }
@keyframes workScroll { to { transform: translateX(-50%); } }

.work {
    flex: 0 0 auto; width: clamp(280px, 30vw, 392px);
    margin-right: clamp(18px, 2.2vw, 30px);
    display: flex; flex-direction: column;
    background: var(--ink-800); border: 1px solid var(--line);
    border-radius: 18px; overflow: hidden;
    transition: transform 0.5s var(--ease), border-color 0.4s var(--ease);
}
.work:hover { border-color: rgba(115, 75, 238, 0.42); transform: translateY(-6px); }
.work .media { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--ink-850); overflow: hidden; }
.work img, .work video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
    .work-marquee { overflow-x: auto; }
    .work-track { animation: none; }
    .work[aria-hidden="true"] { display: none; }
}
.work-tag { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-900); background: var(--accent); padding: 6px 12px; border-radius: 999px; }
.work-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px 20px; border-top: 1px solid var(--line); }
.work-meta h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.work-meta span { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-faint); text-align: right; }

.work-more {
    text-align: center; margin-top: clamp(40px, 5vw, 72px); padding-top: 32px;
    font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    font-weight: 600; font-style: italic; letter-spacing: -0.02em;
    background: linear-gradient(90deg, transparent, var(--accent) 32%, var(--accent-cool) 68%, transparent);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* 12b. PÁGINA NOSOTROS ----------------------------------------------------- */
.about-hero { min-height: 100svh; align-items: center; padding-block: clamp(136px, 18vh, 220px) clamp(58px, 9vh, 112px); }
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.72fr); column-gap: clamp(44px, 7vw, 96px); row-gap: 44px; align-items: end; }
.about-hero-copy { align-self: center; }
.about-hero h1 { max-width: 13ch; margin-bottom: 30px; }
.about-lower { justify-content: flex-start; align-items: flex-start; }
.about-lower p { max-width: 48ch; }
.about-meta { grid-column: 1 / -1; margin-top: 24px; }

.about-signal {
    justify-self: end; width: min(100%, 430px);
    background: rgba(243, 243, 245, 0.03);
    border: 1px solid var(--line); border-radius: 24px; padding: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.38);
}
.signal-core {
    position: relative; overflow: hidden; min-height: 520px;
    display: flex; flex-direction: column; padding: clamp(22px, 3vw, 30px);
    background: var(--ink-800); border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(243, 243, 245, 0.06);
}
.signal-core::before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 32px 32px; opacity: 0.26;
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%);
    mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%);
}
.signal-label {
    position: relative; z-index: 1; color: var(--bone-faint);
    font-family: var(--font-display); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
}
.signal-svg { position: relative; z-index: 1; width: 100%; margin: 26px 0 18px; }
.signal-orbit { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 4 9; animation: signalDash 12s linear infinite; }
.signal-orbit.orbit-b { stroke: var(--line); animation-duration: 8s; animation-direction: reverse; }
.signal-axis { fill: none; stroke: var(--line); stroke-width: 1; }
.signal-node { fill: var(--ink-700); stroke: var(--accent-cool); stroke-width: 1.4; }
.signal-center { fill: var(--ink-900); stroke: var(--line-strong); stroke-width: 1.5; }
.signal-m { fill: none; stroke: var(--bone); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.signal-pulse { fill: none; stroke: var(--accent-cool); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ripple 3.4s var(--ease) infinite; }
.signal-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: auto; border-top: 1px solid var(--line); }
.signal-grid div { display: grid; gap: 5px; padding-top: 18px; }
.signal-grid div:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--line); }
.signal-grid div:nth-child(even) { padding-left: 16px; }
.signal-grid div:nth-child(n+3) { margin-top: 18px; border-top: 1px solid var(--line); }
.signal-grid span, .method-idx, .principle-row > span {
    color: var(--accent); font-family: var(--font-display); font-size: 0.82rem;
    font-weight: 600; font-variant-numeric: tabular-nums;
}
.signal-grid b { color: var(--bone); font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; }
@keyframes signalDash { to { stroke-dashoffset: -104; } }

.bento-text-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); }
.bt-main { display: flex; flex-direction: column; justify-content: center; }
.about-lead { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--bone); margin-bottom: 24px; text-wrap: balance; }
.about-lead em { color: var(--accent); font-style: normal; }
.bt-sub { color: var(--bone-dim); font-size: 1.15rem; line-height: 1.6; max-width: 36ch; }
.bt-side { display: grid; gap: 24px; }
.bt-stat { background: var(--ink-800); border: 1px solid var(--line); border-radius: 20px; padding: clamp(28px, 4vw, 36px); }
.bt-stat .d-num { font-family: var(--font-display); font-weight: 700; font-size: 3rem; color: var(--accent-cool); line-height: 1; margin-bottom: 4px; display: block; }
.bt-stat .d-lbl { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-faint); margin-bottom: 16px; display: block; }
.bt-stat p { color: var(--bone-dim); font-size: 1.05rem; line-height: 1.6; max-width: 44ch; }

.team-roles { border-top: 1px solid var(--line); margin-top: clamp(56px, 8vw, 96px); display: grid; }
.team-role {
    display: grid; grid-template-columns: 56px 1fr; gap: 28px;
    padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line);
    transition: background 0.5s var(--ease);
}
.team-role:hover { background: var(--ink-800); padding-inline: 8px; }
.team-role-idx {
    color: var(--accent); font-family: var(--font-display); font-size: 0.82rem;
    font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 4px;
}
.team-role-ico { color: var(--accent); display: inline-flex; padding-top: 3px; }
.team-role-ico svg { width: 28px; height: 28px; }
.team-role h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; transition: transform 0.5s var(--ease); }
.team-role:hover h3 { transform: translateX(10px); }
.team-role p { color: var(--bone-dim); font-size: 0.98rem; line-height: 1.6; max-width: 54ch; }

.method-list { border-top: 1px solid var(--line); }
.method-row {
    display: grid; grid-template-columns: 64px minmax(170px, 0.72fr) minmax(280px, 1fr) minmax(170px, 0.68fr);
    gap: 28px; align-items: start; padding: clamp(28px, 3.6vw, 46px) 8px;
    border-bottom: 1px solid var(--line); transition: background 0.5s var(--ease);
}
.method-row:hover { background: var(--ink-800); }
.method-row h3 {
    font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em;
    transition: transform 0.5s var(--ease);
}
.method-row:hover h3 { transform: translateX(12px); }
.method-row p { color: var(--bone-dim); font-size: 1rem; line-height: 1.65; max-width: 48ch; text-wrap: pretty; }
.method-meta {
    color: var(--bone-faint); font-size: 0.75rem; letter-spacing: 0.12em;
    line-height: 1.45; text-align: right; text-transform: uppercase;
}

.principles-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(44px, 7vw, 100px); align-items: start; }
.principles-copy { position: sticky; top: 140px; }
.principles-copy p { color: var(--bone-dim); font-size: 1.08rem; line-height: 1.7; max-width: 34ch; margin-top: 28px; }
.principle-rows { border-top: 1px solid var(--line); }
.principle-row {
    display: grid; grid-template-columns: 56px 1fr; gap: 28px;
    padding: clamp(26px, 3vw, 38px) 0; border-bottom: 1px solid var(--line);
}
.principle-row h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 10px; }
.principle-row p { color: var(--bone-dim); font-size: 1rem; line-height: 1.65; max-width: 54ch; }

.proof-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2vw, 24px); }
.proof-tile {
    position: relative; grid-column: span 4; height: clamp(300px, 34vw, 460px);
    overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--ink-800);
}
.proof-tile.tile-wide { grid-column: span 8; }
.proof-tile img, .proof-tile video { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(0.92) contrast(1.02); transform: scale(1.01); transition: transform 0.8s var(--ease), filter 0.8s var(--ease); }
.proof-tile:hover img, .proof-tile:hover video { transform: scale(1.06); filter: saturate(1.04) contrast(1.04); }
.proof-tile::after { content: ''; position: absolute; inset: auto 0 0; height: 44%; background: linear-gradient(to top, rgba(10, 8, 24, 0.88), transparent); pointer-events: none; }
.proof-tile figcaption {
    position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1;
    display: flex; justify-content: space-between; align-items: end; gap: 18px;
}
.proof-tile figcaption span {
    color: var(--accent); font-family: var(--font-display); font-size: 0.68rem;
    font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.proof-tile figcaption b { color: var(--bone); font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.35rem); letter-spacing: -0.02em; text-align: right; }

/* 13. CTA ------------------------------------------------------------------ */
.cta-strip { text-align: center; }
.cta-strip h2 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 700; letter-spacing: -0.025em; line-height: 0.98; max-width: 16ch; margin: 0 auto 40px; text-wrap: balance; }
.cta-actions { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* 14. FOOTER --------------------------------------------------------------- */
footer { border-top: 1px solid var(--line); padding-block: clamp(56px, 8vw, 90px) 40px; }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; }
.footer-brand .logo { display: inline-flex; margin-bottom: 14px; }
.footer-brand .logo img { height: 46px; width: auto; }
.footer-brand p { color: var(--bone-faint); max-width: 32ch; font-size: 0.95rem; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col h5 { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-faint); margin-bottom: 16px; font-weight: 600; }
.footer-col a { display: block; color: var(--bone-dim); font-size: 0.95rem; margin-bottom: 10px; transition: color 0.3s var(--ease); }
.footer-col a:hover { color: var(--bone); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--bone-faint); font-size: 0.82rem; }

/* 15. WHATSAPP FLOTANTE ---------------------------------------------------- */
.floating-wa {
    position: fixed; bottom: 26px; right: 26px; width: 56px; height: 56px;
    border-radius: 999px; background: var(--bone); color: var(--ink-900);
    display: flex; align-items: center; justify-content: center; z-index: var(--z-overlay);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); transition: transform 0.4s var(--ease);
}
.floating-wa:hover { transform: scale(1.08); }
.floating-wa:active { transform: scale(0.95); }
.floating-wa svg { width: 27px; height: 27px; fill: var(--ink-900); }

/* 16. REVEAL & MOTION ------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(40px); filter: blur(8px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }

/* 16b. ENTRADAS DE CARGA (cinematográficas, CSS puro) --------------------- */
/* Fade global de página — suaviza el salto index ↔ nosotros */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageIn 0.55s var(--ease) both; }

/* Pill de nav baja desde arriba al cargar */
@keyframes navIn { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
nav { animation: navIn 0.9s var(--ease) 0.12s both; }

/* Hero: reveal escalonado, con el titular subiendo bajo una máscara */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}
@keyframes heroTitleMask {
    from { opacity: 0; transform: translateY(46px); clip-path: inset(0 0 105% 0); }
    to   { opacity: 1; transform: none;            clip-path: inset(0 0 -20% 0); }
}
.hero h1        { animation: heroTitleMask 1.15s var(--ease) 0.30s both; }
.hero p         { animation: heroRise 0.9s var(--ease) 0.52s both; }
.hero-actions   { animation: heroRise 0.9s var(--ease) 0.64s both; }
.hero-meta      { animation: heroRise 0.9s var(--ease) 0.76s both; }
/* El panel de datos de Nosotros entra con su propia cadencia, no como .reveal tardío */
.about-hero .about-signal { animation: heroRise 1s var(--ease) 0.6s both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; filter: none; }
    .work { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}

/* 17. RESPONSIVE ----------------------------------------------------------- */
/* Tablet y abajo: los paneles con visual se apilan */
@media (max-width: 920px) {
    .eco-block, .eco-block:nth-child(odd) { grid-template-columns: 1fr; gap: 40px; margin-bottom: 80px; }
    .eco-block:nth-child(odd) .eco-viz { order: 0; }
    .eco-path { display: none; }
    .eco-viz { max-width: 560px; margin: 0 auto; }
    .eco-text p, .eco-text ul { max-width: none; }
    .about-hero-grid,
    .bento-text-grid,
    .principles-grid { grid-template-columns: 1fr; gap: 34px; }
    .about-signal { justify-self: start; max-width: 560px; }
    .about-meta { grid-column: auto; }
    .principles-copy { position: static; }
    .method-row { grid-template-columns: 46px 1fr; gap: 16px 24px; }
    .method-row p,
    .method-meta { grid-column: 2; text-align: left; }
    .proof-mosaic { grid-template-columns: repeat(2, 1fr); }
    .proof-tile,
    .proof-tile.tile-wide { grid-column: auto; height: 300px; }
    .bento-text-grid { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 720px) {
    .nav-wrap { padding-top: 14px; }
    nav { padding: 10px 12px 10px 20px; }
    .nav-links { display: none; }
    .nav-toggle { display: inline-flex; }

    .hero-lower { flex-direction: column; align-items: flex-start; }
    .hero-meta { gap: 22px 28px; }

    .eco-tag { font-size: 0.85rem; padding: 6px 12px; margin-bottom: 12px; }
    .eco-text h3 { font-size: 1.8rem; margin-bottom: 16px; }
    .eco-text p { font-size: 1.05rem; }

    .work-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
    .work-meta span { text-align: left; }

    .cta-actions { flex-direction: column; align-items: stretch; }
    .cta-actions .btn { width: 100%; justify-content: center; }

    .footer-top { gap: 32px; }
    .footer-cols { gap: 40px; }
    .about-hero { padding-top: 128px; }
    .about-signal { width: 100%; }
    .signal-core { min-height: auto; }
    .signal-grid { grid-template-columns: 1fr; }
    .signal-grid div,
    .signal-grid div:nth-child(odd),
    .signal-grid div:nth-child(even),
    .signal-grid div:nth-child(n+3) {
        padding: 14px 0 0; margin-top: 14px; border-top: 1px solid var(--line); border-right: 0;
    }
    .signal-grid div:first-child { margin-top: 0; border-top: 0; }
    .method-row { grid-template-columns: 1fr; gap: 12px; padding-inline: 2px; }
    .method-row p,
    .method-meta { grid-column: auto; }
    .method-row:hover h3 { transform: none; }
    .principle-row { grid-template-columns: 1fr; gap: 10px; }
    .team-role { grid-template-columns: 1fr; gap: 10px; }
    .team-role:hover h3 { transform: none; }
    .proof-mosaic { grid-template-columns: 1fr; }
    .proof-tile,
    .proof-tile.tile-wide { height: 260px; }
    .proof-tile figcaption { flex-direction: column; align-items: flex-start; gap: 4px; }
    .proof-tile figcaption b { text-align: left; }
}

/* Teléfonos chicos */
@media (max-width: 400px) {
    .hero { padding-top: 116px; }
    .hero h1 { font-size: 2.4rem; }
    .hero p { font-size: 1.05rem; }
    .svc-name { font-size: 1.35rem; }
    .btn { font-size: 0.9rem; }
}