@font-face{
    font-family:'Satoshi';
    src:url('fonts/Satoshi-Regular.woff2') format('woff2');
    font-weight:400;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:'Satoshi';
    src:url('fonts/Satoshi-Italic.woff2') format('woff2');
    font-weight:400;font-style:italic;font-display:swap;
  }
  @font-face{
    font-family:'Satoshi';
    src:url('fonts/Satoshi-Medium.woff2') format('woff2');
    font-weight:500;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:'Satoshi';
    src:url('fonts/Satoshi-Bold.woff2') format('woff2');
    font-weight:700;font-style:normal;font-display:swap;
  }

  /* Las variables locales son ahora ALIAS de los tokens @naitre (cargados en vendor/naitre/tokens.css).
     La paleta vive en el design system; aquí solo se referencia. */
  :root{
    --bg:var(--nai-color-bg);
    --surface:var(--nai-color-surface);
    --soft:var(--nai-color-soft);
    --ink:var(--nai-color-ink);
    --muted:var(--nai-color-muted);
    --line:var(--nai-color-line);
    --accent:var(--nai-color-accent);
    --accent-ink:var(--nai-color-accent-ink);
    --ai-bg:var(--nai-color-ai-bg);
    --ai-card:var(--nai-color-ai-card);
    --ai-hover:#242932;
    --ai-line:rgba(245,246,247,.14);
    --ai-muted:#9aa1ac;
    --font:'Satoshi',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
    /* ---- Tokens de movimiento ---- */
    /* Fuente única para la entrada de elementos: permiten REDUCIR el movimiento
       (no solo eliminarlo) cuando el usuario lo prefiere. */
    --motion-duration:1s;          /* duración de reveals / entradas */
    --motion-easing:cubic-bezier(.22,1,.36,1);
    --motion-scale:1;              /* multiplicador de desplazamiento/parallax (0 = quieto) */
    --motion-blur:3px;             /* desenfoque de entrada de los reveals */
  }
  /* Reduce, no elimina: a quien pide menos movimiento le dejamos una transición
     mínima de opacidad en vez de un corte seco. */
  @media(prefers-reduced-motion:reduce){
    :root{
      --motion-duration:.2s;
      --motion-easing:ease;
      --motion-scale:0;
      --motion-blur:0px;
    }
  }
  /* Modo oscuro: solo se redefinen los tokens @naitre (valores de @naitre/tokens · variables.dark.css);
     los alias de arriba siguen automáticamente. */
  @media(prefers-color-scheme:dark){
    :root{
      --nai-color-bg:#14161a;
      --nai-color-surface:#1b1e24;
      --nai-color-soft:#23272e;
      --nai-color-ink:#e9eaec;
      --nai-color-muted:#9aa1ac;
      --nai-color-line:#2a2e36;
      --nai-color-accent:#d4714f;
      --nai-color-accent-ink:#df8a6b;
      --nai-color-ai-bg:#181c22;
      --nai-color-ai-card:#1e232a;
      --ai-hover:#262c35;
      --ai-line:rgba(233,234,236,.12);
      --ai-muted:#9aa1ac;
    }
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:96px}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font);
    font-weight:400;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--accent);color:#fff}

  /* ---------- Accesibilidad base ---------- */
  .skip-link{
    position:fixed;top:-100px;left:16px;z-index:500;
    background:var(--ink);color:var(--bg);
    font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
    padding:12px 22px;border-radius:999px;text-decoration:none;transition:top .2s;
  }
  .skip-link:focus{top:16px}
  :focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:2px}
  .ai-section :focus-visible{outline-color:var(--accent)}
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{
      animation-duration:.01ms!important;animation-iteration-count:1!important;
      transition-duration:.01ms!important;transition-delay:0ms!important;
    }
    .reveal{opacity:1;transform:none;filter:none}
  }

  .container{max-width:1100px;margin:0 auto;padding:0 32px}

  /* ---------- Nav ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:color-mix(in srgb,var(--bg) 85%,transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1100px;margin:0 auto;padding:18px 32px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{
    font-size:1.45rem;font-weight:500;letter-spacing:-.01em;
    text-decoration:none;color:var(--ink);
    display:inline-flex;align-items:center;gap:12px;
  }
  .logo span{color:var(--accent)}
  .logo-mark{
    width:34px;height:34px;flex-shrink:0;color:var(--ink);
    transition:transform 1.1s cubic-bezier(.22,1,.36,1);
  }
  .logo:hover .logo-mark{transform:rotate(120deg)}
  @media (prefers-reduced-motion:reduce){
    .logo:hover .logo-mark{transform:none}
  }
  .logo-wordmark{height:24px;width:80px;flex-shrink:0;color:var(--ink)}
  footer .logo-mark{width:26px;height:26px}
  footer .logo-wordmark{height:20px;width:66px}
  .nav-links{display:flex;align-items:center;gap:36px;list-style:none}
  .nav-links a{
    text-decoration:none;color:var(--muted);font-size:.78rem;
    letter-spacing:.12em;text-transform:uppercase;font-weight:500;
    transition:color .25s;
  }
  .nav-links a:hover{color:var(--ink)}
  .lang-switch{
    display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;
  }
  .lang-switch button{
    border:none;background:transparent;cursor:pointer;
    font-family:var(--font);font-size:.75rem;font-weight:500;
    letter-spacing:.08em;padding:7px 14px;border-radius:999px;
    color:var(--muted);transition:all .25s;
  }
  .lang-switch button:hover{color:var(--ink)}
  .lang-switch button.active{background:var(--ink);color:var(--bg)}
  .menu-btn{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:10px;margin:-10px}

  /* ---------- Hero ---------- */
  .hero{position:relative}
  .hero-stage{
    min-height:100vh;min-height:100dvh;
    display:flex;align-items:center;
    position:relative;overflow:clip; /* clip, no hidden: no crea scroll container */
  }
  .hero-content{
    position:relative;z-index:2;
    width:100%;max-width:none;padding:0 6vw;
    opacity:calc(1 - var(--hp,0) * .8);
  }
  .hero-canvas{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
  /* Con JS+motion el canvas está listo desde el primer pintado y la marca estática
     se oculta de inmediato (evita el flash del logo girando antes de activarse). */
  .motion .hero-canvas{display:block}
  .motion .hero-mark,.motion .hero-mark-sm{display:none}
  /* Eyebrow vertical en el margen — voz de cuaderno de laboratorio */
  .hero-eyebrow{
    position:absolute;left:2.4vw;top:15vh;z-index:3;margin:0;
    writing-mode:vertical-rl;transform:rotate(180deg);
    font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
    color:var(--accent-ink);font-weight:500;
  }
  /* Marginalia asimétrica */
  .hero-coord,.hero-fig{
    position:absolute;z-index:3;margin:0;
    font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted);font-variant-numeric:tabular-nums;
  }
  .hero-coord{left:6vw;bottom:8vh}
  .hero-fig{right:6vw;top:14vh;text-align:right}
  @media(max-width:760px){
    .hero-eyebrow{top:auto;bottom:7vh;left:auto;right:5vw;writing-mode:horizontal-tb;transform:none}
    .hero-coord,.hero-fig{display:none}
  }
  .hero-scroll-hint{
    position:absolute;left:0;right:0;bottom:30px;z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:10px;
    font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--muted);opacity:var(--hint-opacity,0);transition:opacity .4s;
    pointer-events:none;
  }
  .hero-scroll-hint::after{
    content:"";width:1px;height:34px;
    background:linear-gradient(var(--muted),transparent);
    animation:hint-fall 1.8s ease-in-out infinite;
  }
  @keyframes hint-fall{
    0%{transform:scaleY(.4);transform-origin:top center;opacity:.3}
    50%{transform:scaleY(1);opacity:.9}
    100%{transform:scaleY(.4);transform-origin:bottom center;opacity:.3}
  }
  /* Scrollytelling activo — lo añade scroll.js solo con JS y sin prefers-reduced-motion */
  .hero--active .hero-track{height:220vh}
  .hero--active .hero-stage{position:sticky;top:0;height:100vh;height:100dvh;min-height:0}
  .hero--active .hero-mark,.hero--active .hero-mark-sm{display:none}
  /* La marginalia se dispersa con deriva propia al salir del acto (solo
     transform: fade-soft con fill both retiene la opacidad, no la pisamos).
     Solo desktop: en móvil el eyebrow es horizontal y sin transform. */
  @media(min-width:761px){
    .hero--active .hero-eyebrow{transform:rotate(180deg) translateY(calc(var(--hp,0) * 7vh))}
    .hero--active .hero-coord{transform:translateY(calc(var(--hp,0) * 9vh))}
    .hero--active .hero-fig{transform:translateY(calc(var(--hp,0) * -7vh))}
  }

  /* ---------- Hero · entrada cinética ---------- */
  /* Los insets laterales/superior son negativos y generosos: la palabra
     monumental del h1 sangra fuera de su caja (margen negativo + -8vw al
     hacer scroll) y un inset a 0 la cortaría. Solo anima el borde inferior. */
  @keyframes hero-in{
    from{opacity:0;transform:translateY(30px);clip-path:inset(-30% -100vw 110% -100vw)}
    to{opacity:1;transform:none;clip-path:inset(-30% -100vw -25% -100vw)}
  }
  .hero-content>h1{animation:hero-in 1s .18s both cubic-bezier(.16,1,.3,1)}
  .hero-content>.hero-sub{animation:hero-in .9s .42s both cubic-bezier(.16,1,.3,1)}
  .hero-content>.hero-cta{animation:hero-in .9s .6s both cubic-bezier(.16,1,.3,1)}
  .hero-eyebrow,.hero-coord,.hero-fig{animation:fade-soft 1s .5s both}
  @keyframes fade-soft{from{opacity:0}to{opacity:1}}
  h1 em{position:relative;display:inline-block;animation:em-glow 4.5s 1.7s ease-in-out infinite}
  h1 em::after{
    content:"";position:absolute;left:0;right:0;bottom:.02em;height:2px;
    background:var(--accent);border-radius:2px;
    transform:scaleX(0);transform-origin:left;
    animation:em-draw .8s 1.15s forwards cubic-bezier(.16,1,.3,1);
  }
  @keyframes em-draw{to{transform:scaleX(1)}}
  @keyframes em-glow{
    0%,100%{text-shadow:0 0 0 rgba(201,99,66,0)}
    50%{text-shadow:0 0 22px rgba(201,99,66,.4)}
  }

  /* ---------- Riel de progreso (lo crea scroll.js) ---------- */
  .scroll-rail{
    position:fixed;top:50%;right:24px;transform:translateY(-50%);
    z-index:90;display:flex;flex-direction:column;align-items:center;gap:12px;
    pointer-events:none;
  }
  .scroll-rail .rl-track{
    position:relative;width:2px;height:42vh;
    background:var(--line);border-radius:2px;
  }
  /* Relleno por transform (scaleY), no height: sin layout por frame */
  .scroll-rail .rl-fill{
    position:absolute;left:0;top:0;width:100%;height:100%;
    background:linear-gradient(var(--accent),var(--accent-ink));border-radius:2px;
    transform:scaleY(0);transform-origin:top;will-change:transform;
  }
  /* Marcadores de acto — cuaderno de laboratorio (los coloca scroll.js) */
  .scroll-rail .rl-dot{
    position:absolute;left:50%;width:5px;height:5px;border-radius:50%;
    transform:translate(-50%,-50%);background:var(--line);
    transition:background .3s,box-shadow .3s;
  }
  .scroll-rail .rl-dot.on{
    background:var(--accent);
    box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent);
  }
  .scroll-rail .rl-pct{
    font-size:.6rem;letter-spacing:.16em;color:var(--muted);
    font-weight:500;font-variant-numeric:tabular-nums;
  }
  @media(max-width:980px){.scroll-rail{display:none}}

  /* ---------- Interacciones (lo activa scroll.js) ---------- */
  .ai-grid{perspective:1200px}
  .ai-card{will-change:transform}
  .ai-card.tilting{transition:transform .14s ease-out,background .35s}
  .btn.mag{transition:transform .18s cubic-bezier(.22,1,.36,1),background .3s,border-color .3s,color .3s}

  /* ---------- Actos II–V · scroll-driven (lo alimenta scroll.js) ---------- */
  /* Numeración de actos — plancha de atlas */
  body{counter-reset:act}
  section{counter-increment:act}
  section>.container{position:relative;z-index:1}
  section::before{
    content:counter(act,upper-roman);
    position:absolute;top:46px;right:5vw;z-index:0;
    font-size:clamp(5rem,15vw,13rem);font-weight:500;line-height:.8;
    letter-spacing:-.04em;color:var(--line);opacity:.42;
    pointer-events:none;user-select:none;
    transform:translateY(calc((var(--vp,.5) - .5) * -64px));
  }
  .ai-section::before{color:rgba(245,246,247,.06);opacity:1}
  @media(max-width:760px){section::before{top:24px;right:5vw;opacity:.35;font-size:clamp(3.5rem,16vw,6rem)}}

  /* Acto II — la losa oscura de IA se eleva al entrar */
  .ai-section{
    will-change:transform,border-radius;
    transform:scale(calc(.984 + var(--enter,1) * .016));
    transform-origin:center top;
    border-radius:calc((1 - var(--enter,1)) * 28px) calc((1 - var(--enter,1)) * 28px) 0 0;
    box-shadow:0 calc((1 - var(--enter,1)) * 38px) calc((1 - var(--enter,1)) * 88px) rgba(16,18,22,calc((1 - var(--enter,1)) * .3));
  }

  /* Parallax de imágenes (transform lo fija scroll.js) */
  .ai-card--feature img{height:120%;top:-10%;bottom:auto}
  .about-photo{overflow:hidden}
  .about-photo img{height:120%;position:relative;top:-10%}
  .hero-mark-sm{display:none}
  h1{
    font-weight:500;
    font-size:clamp(1.5rem,3.2vw,2.7rem);
    line-height:1.1;letter-spacing:-.02em;
    max-width:20ch;
  }
  /* Palabra monumental: contraste de escala extremo, sangra fuera del lienzo */
  h1 em{
    display:block;font-style:italic;font-weight:500;color:var(--accent);
    font-size:clamp(4.5rem,18vw,15rem);line-height:.8;letter-spacing:-.045em;
    margin:.08em 0 .07em -.05em;
    transform:translateX(calc(var(--hp,0) * -8vw)) scale(calc(1 + var(--hp,0) * .05));
    transform-origin:left center;
  }
  .hero-sub{
    margin-top:28px;max-width:40ch;font-size:1.06rem;color:var(--muted);
  }
  .hero-cta{margin-top:40px;display:flex;gap:20px;flex-wrap:wrap}
  .btn{
    display:inline-block;text-decoration:none;font-size:.8rem;
    letter-spacing:.12em;text-transform:uppercase;font-weight:500;
    font-family:var(--font);padding:16px 36px;border-radius:999px;
    transition:background .3s,border-color .3s,color .3s,transform .3s;
  }
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0) scale(.98)}
  .btn-primary{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
  .btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
  .btn-ghost{border:1px solid var(--line);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--ink)}
  .hero-mark{
    position:absolute;right:-12%;top:50%;transform:translateY(-50%);
    width:clamp(420px,52vw,760px);height:auto;aspect-ratio:1;
    color:var(--line);--accent:var(--line);
    user-select:none;pointer-events:none;z-index:1;
    animation:slow-spin 180s linear infinite;
  }
  @keyframes slow-spin{to{transform:translateY(-50%) rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){.hero-mark{animation:none}}

  /* ---------- Sections ---------- */
  section{padding:120px 0;border-top:1px solid var(--line);position:relative}
  .ai-section{border-top:none}
  h2{
    font-weight:500;
    font-size:clamp(2.2rem,6.5vw,5.4rem);line-height:1.02;
    letter-spacing:-.025em;max-width:16ch;margin-bottom:30px;
  }
  /* Intro desplazada a la derecha — composición asimétrica */
  .section-intro{
    max-width:48ch;color:var(--muted);font-size:1.05rem;
    margin-left:clamp(0px,12vw,200px);
  }
  .section-label{
    font-size:.75rem;letter-spacing:.24em;
    text-transform:uppercase;color:var(--accent-ink);font-weight:500;margin-bottom:20px;
  }

  /* ---------- AI featured (único bloque oscuro de la página) ---------- */
  .ai-section{
    background:var(--ai-bg);color:#e9eaec;
    position:relative;overflow:clip;
  }
  /* Carta astronómica de fondo: eco de la marca que gira suavemente con el
     scroll (--vp lo escribe scroll.js; en móvil/reduce queda estática en 0°). */
  .ai-section::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    right:-14vw;top:-16vw;width:56vw;height:56vw;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='rgba(233,234,236,0.11)' stroke-width='0.5' stroke-dasharray='0.7 3'/%3E%3Ccircle cx='50' cy='50' r='33' fill='none' stroke='rgba(233,234,236,0.07)' stroke-width='0.5'/%3E%3Cpath d='M50 4 A46 46 0 0 1 96 50' fill='none' stroke='rgba(201,99,66,0.3)' stroke-width='0.8' stroke-linecap='round'/%3E%3Ccircle cx='96' cy='50' r='1.4' fill='rgba(201,99,66,0.45)'/%3E%3C/svg%3E") center/contain no-repeat;
    transform:rotate(calc((var(--vp,.5) - .5) * 70deg));
  }
  @media(max-width:760px){.ai-section::after{display:none}}
  .ai-section h2{color:#e9eaec;max-width:26ch}
  .ai-section .section-intro{color:var(--ai-muted)}
  .ai-badge{
    display:inline-block;font-size:.74rem;
    letter-spacing:.2em;text-transform:uppercase;font-weight:500;
    color:#16181d;background:var(--accent);border-radius:999px;
    padding:7px 16px;margin-bottom:28px;
  }
  /* Rejilla IA rota — planchas flotantes asimétricas, alturas desfasadas */
  .ai-grid{
    margin-top:72px;display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;perspective:1200px;
  }
  .ai-card{
    position:relative;background:var(--ai-card);padding:36px 30px;
    border:1px solid var(--ai-line);border-radius:16px;
    transition:background .35s;min-height:200px;
    display:flex;flex-direction:column;justify-content:flex-end;
  }
  .ai-card:nth-child(1){grid-column:1/4;grid-row:1/3}  /* destacada, domina a la izquierda */
  .ai-card:nth-child(2){grid-column:4/7;grid-row:1}
  .ai-card:nth-child(3){grid-column:4/7;grid-row:2}
  .ai-card:nth-child(4){grid-column:1/3;grid-row:3}
  .ai-card:nth-child(5){grid-column:3/5;grid-row:3}
  .ai-card:nth-child(6){grid-column:5/7;grid-row:3}
  .ai-card:hover{background:var(--ai-hover)}
  /* Entrada en cascada — la activa scroll.js: .seq oculta, .in dispara, --i escalona */
  .ai-grid.seq .ai-card{opacity:0;transform:translateY(56px)}
  .ai-grid.seq.in .ai-card{
    opacity:1;transform:none;
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(var(--i,0) * .1s);
  }
  .ai-card h3{
    font-weight:500;font-size:1.15rem;letter-spacing:-.01em;
    margin-bottom:10px;color:#e9eaec;
  }
  .ai-card p{font-size:.92rem;color:var(--ai-muted)}
  .ai-card--feature{min-height:440px}
  .ai-card--feature img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:grayscale(1) contrast(1.1);opacity:.42;
  }
  .ai-card--feature::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(24,27,32,.1) 30%,rgba(24,27,32,.92) 85%);
  }
  .ai-card--feature>h3,.ai-card--feature>p,.ai-card--feature>.more{position:relative;z-index:2}
  .ai-card--feature h3{font-size:1.6rem}
  .ai-card--feature p{max-width:44ch}
  .ai-card--tint{
    background:linear-gradient(150deg,#3a2218,#271a14);
  }
  .ai-card--tint:hover{background:linear-gradient(150deg,#46291d,#2e1f18)}
  .ai-cta{margin-top:56px}
  .ai-cta .btn{background:var(--accent);border:1px solid var(--accent);color:#16181d}
  .ai-cta .btn:hover{background:#e9eaec;border-color:#e9eaec}

  /* ---------- Services: lista editorial ---------- */
  .services-list{margin-top:72px;border-top:1px solid var(--line);list-style:none}
  .service{
    display:grid;
    grid-template-columns:clamp(54px,7vw,108px) minmax(0,1.5fr) minmax(0,1.1fr) auto;
    gap:16px 40px;align-items:baseline;
    padding:34px 0;border-bottom:1px solid var(--line);
    transition:padding-left .3s;
    counter-increment:svc;
  }
  .service::before{
    content:counter(svc,decimal-leading-zero);
    font-size:clamp(1.4rem,3vw,2.4rem);font-weight:500;line-height:1;
    color:var(--accent-ink);letter-spacing:-.02em;
  }
  .service h3{
    font-weight:500;font-size:clamp(1.4rem,2.6vw,1.9rem);
    letter-spacing:-.015em;line-height:1.15;transition:color .3s;
  }
  .service p{font-size:.95rem;color:var(--muted);max-width:44ch}
  .service:hover{padding-left:12px}
  .service:hover h3{color:var(--accent-ink)}
  /* Índice editorial — número grande a la izquierda, líneas continuas */
  .services-list{counter-reset:svc}

  /* ---------- Scroll horizontal · Proceso ---------- */
  /* Fallback (sin JS / reduced-motion): paneles en flujo vertical legible */
  .hscroll{padding:0;counter-increment:none}
  .hscroll::before{display:none}
  .hscroll-viewport{padding:120px 0}
  .hscroll-row{display:flex;flex-wrap:wrap;gap:48px 40px;padding:0 6vw}
  .hpanel{flex:1 1 280px;min-width:240px}
  .hpanel--intro{flex-basis:100%;max-width:none}
  .hpanel-num{
    font-size:.78rem;letter-spacing:.24em;color:var(--accent-ink);
    font-weight:500;display:block;margin-bottom:16px;font-variant-numeric:tabular-nums;
  }
  .hpanel h3{
    font-weight:500;font-size:clamp(1.8rem,3vw,2.6rem);
    letter-spacing:-.02em;line-height:1.05;margin-bottom:12px;
  }
  .hpanel p{color:var(--muted);max-width:34ch}
  .hpanel-intro{color:var(--muted);font-size:1.1rem;max-width:42ch;margin-top:8px}
  .hscroll-progress{display:none}

  /* Activo: pin + desplazamiento lateral (lo añade scroll.js) */
  .hscroll--active .hscroll-track{height:260vh;position:relative}
  .hscroll--active .hscroll-viewport{
    position:sticky;top:0;height:100vh;height:100dvh;overflow:clip;
    display:flex;align-items:center;padding:0;
  }
  .hscroll--active .hscroll-row{
    flex-wrap:nowrap;align-items:center;gap:5vw;padding:0 6vw;
    will-change:transform;
  }
  .hscroll--active .hpanel{flex:0 0 auto;width:min(540px,72vw)}
  .hscroll--active .hpanel--intro{width:min(620px,84vw)}
  .hscroll--active .hpanel h3{font-size:clamp(2.6rem,6vw,5rem)}
  /* Indicador de progreso reforzado: más alto y con más contraste de pista,
     para que la posición dentro de la secuencia horizontal sea claramente legible. */
  .hscroll--active .hscroll-progress{
    display:block;position:absolute;left:6vw;right:6vw;bottom:7vh;
    height:4px;background:color-mix(in srgb,var(--ink) 18%,transparent);
    border-radius:4px;overflow:hidden;
  }
  .hscroll--active .hscroll-progress span{
    display:block;height:100%;width:100%;
    background:linear-gradient(90deg,var(--accent),var(--accent-ink));
    box-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent);
    transform:scaleX(0);transform-origin:left;will-change:transform;
  }
  /* Contador de fase (01–04): posición legible dentro de la secuencia */
  .hscroll-count{display:none}
  .hscroll--active .hscroll-count{
    display:block;position:absolute;right:6vw;bottom:calc(7vh + 18px);
    font-size:.72rem;letter-spacing:.22em;color:var(--muted);
    font-weight:500;font-variant-numeric:tabular-nums;
  }
  .hscroll--active .hscroll-count .cur{color:var(--accent-ink)}
  /* Coreografía por panel: presencia (--pp, la escribe scroll.js) según la
     distancia al centro — el panel activo se asienta, los demás esperan.
     Solo desktop: en móvil los paneles quedan asentados (--pp por defecto = 1). */
  @media(min-width:761px){
    .hscroll--active .hpanel{
      transform:translate3d(0,calc((1 - var(--pp,1)) * 26px),0) scale(calc(.97 + var(--pp,1) * .03));
      opacity:calc(.35 + var(--pp,1) * .65);
      transform-origin:center bottom;
      will-change:transform,opacity;
    }
    .hscroll--active .hpanel--intro{transform-origin:left center}
  }
  @media(max-width:760px){
    .hscroll--active .hpanel h3{font-size:clamp(2rem,9vw,3rem)}
  }

  /* ---------- Clickable cards + detail modal ---------- */
  .service,.ai-card{cursor:pointer}
  .service:focus-visible,.ai-card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .more{
    display:inline-block;margin-top:14px;
    font-size:.72rem;letter-spacing:.14em;
    text-transform:uppercase;font-weight:500;color:var(--accent-ink);
    transition:transform .25s;white-space:nowrap;
  }
  .service .more{margin-top:0;justify-self:end}
  .ai-card .more{color:var(--accent)}
  .service:hover .more,.ai-card:hover .more,
  .service:focus-visible .more,.ai-card:focus-visible .more{transform:translateX(4px)}
  .svc-modal{
    position:fixed;inset:0;z-index:400;display:none;
    align-items:center;justify-content:center;padding:24px;
  }
  .svc-modal.open{display:flex}
  .svc-backdrop{
    position:absolute;inset:0;background:rgba(16,18,22,.55);
    backdrop-filter:blur(6px);
  }
  .svc-box{
    position:relative;background:var(--bg);border:1px solid var(--line);
    border-radius:16px;max-width:620px;width:100%;max-height:85vh;
    overflow-y:auto;padding:48px;
    box-shadow:0 32px 80px rgba(16,18,22,.3);
  }
  .svc-box h3{
    font-weight:500;font-size:1.65rem;letter-spacing:-.015em;
    margin-bottom:18px;line-height:1.2;padding-right:32px;
  }
  .svc-body p{color:var(--muted);font-size:.97rem;margin-bottom:8px}
  .svc-body ul{list-style:none;margin:20px 0 8px;border-top:1px solid var(--line)}
  .svc-body li{
    padding:13px 0;border-bottom:1px solid var(--line);
    font-size:.92rem;display:flex;gap:14px;align-items:baseline;
  }
  .svc-body li::before{content:"-";color:var(--accent);flex-shrink:0}
  .svc-box .btn{margin-top:28px}
  .svc-close{
    position:absolute;top:14px;right:14px;background:none;border:none;
    cursor:pointer;color:var(--muted);line-height:1;padding:14px;
  }
  .svc-close:hover{color:var(--ink)}
  @media(max-width:560px){.svc-box{padding:32px 24px}}

  /* ---------- About ---------- */
  /* Nosotros — columnas desiguales, composición asimétrica */
  .about-grid{
    display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(40px,7vw,110px);align-items:start;
  }
  .about-text p{color:var(--muted);margin-bottom:20px;font-size:1rem}
  .about-text p:first-of-type{color:var(--ink);font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:400;line-height:1.45}
  .about-photo{
    margin-top:48px;border-radius:16px;overflow:hidden;
    aspect-ratio:5/4;background:var(--soft);
  }
  .about-photo img{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:grayscale(1) contrast(1.05);
  }
  .pillars{list-style:none;border-top:1px solid var(--line);margin-top:clamp(24px,8vw,96px)}
  .pillars li{
    padding:24px 0;border-bottom:1px solid var(--line);
    display:flex;gap:24px;align-items:baseline;
  }
  .pillars .k{
    font-style:italic;color:var(--accent-ink);
    min-width:52px;font-size:clamp(1.3rem,2.6vw,2.2rem);line-height:1;
  }
  .pillars .t strong{display:block;font-weight:500;font-size:.95rem;margin-bottom:2px}
  .pillars .t span{font-size:.88rem;color:var(--muted)}

  /* ---------- Contact ---------- */
  .contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:8px}
  .contact-email{
    font-size:clamp(1.8rem,5vw,3.4rem);font-weight:500;letter-spacing:-.02em;
    color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);
    transition:color .25s;
  }
  .contact-email:hover{color:var(--accent-ink)}
  form{display:flex;flex-direction:column;gap:0}
  .field{border-bottom:1px solid var(--line);padding:18px 0}
  .field label{
    display:block;font-size:.72rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:6px;
  }
  .field input,.field textarea{
    width:100%;border:none;background:transparent;
    font-family:var(--font);font-size:1rem;font-weight:400;color:var(--ink);
    resize:vertical;
  }
  .field textarea{min-height:96px}
  .field:focus-within{border-bottom-color:var(--accent-ink)}
  .field input:focus-visible,.field textarea:focus-visible{outline:none}
  form .btn{margin-top:36px;align-self:flex-start;cursor:pointer;border:none}
  .form-note{font-size:.8rem;color:var(--muted);margin-top:16px}
  .form-note.is-sent{color:var(--accent-ink)}
  .form-note.is-error{color:#c0392b}
  /* honeypot anti-spam: fuera de pantalla, invisible para humanos */
  .field-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:48px 0}
  .footer-inner{
    max-width:1100px;margin:0 auto;padding:0 32px;
    display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  }
  footer p{font-size:.8rem;color:var(--muted)}
  footer .logo{font-size:1.15rem}

  /* ---------- Chat widget ---------- */
  .chat-fab{
    position:fixed;right:28px;bottom:28px;z-index:300;
    width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
    background:var(--ink);color:var(--bg);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 28px rgba(16,18,22,.25);
    transition:transform .25s,background .25s;
  }
  .chat-fab:hover{transform:scale(1.06)}
  .chat-fab svg{width:30px;height:30px}
  .chat-fab::before{
    content:"";position:absolute;inset:-4px;border-radius:50%;
    border:2px solid var(--accent);opacity:0;
    animation:chat-pulse 3.2s ease-out infinite;
  }
  @keyframes chat-pulse{
    0%{transform:scale(.85);opacity:.55}
    60%{transform:scale(1.25);opacity:0}
    100%{transform:scale(1.25);opacity:0}
  }
  /* El panel se cierra con la X de la cabecera: el FAB desaparece al abrir */
  .chat-fab.open{display:none}
  @media(prefers-reduced-motion:reduce){.chat-fab::before{animation:none}}
  .chat-panel{
    position:fixed;right:28px;bottom:104px;z-index:300;
    width:min(380px,calc(100vw - 40px));height:min(540px,calc(100vh - 140px));
    background:var(--bg);border:1px solid var(--line);border-radius:16px;
    box-shadow:0 24px 64px rgba(16,18,22,.22);
    display:none;flex-direction:column;overflow:hidden;
  }
  .chat-panel.open{display:flex}
  .chat-head{
    background:var(--ai-bg);color:#e9eaec;
    padding:16px 20px;display:flex;align-items:center;gap:12px;
  }
  .chat-head svg{width:30px;height:30px;color:#e9eaec;flex-shrink:0}
  .chat-head .t{font-weight:500;font-size:.95rem;line-height:1.3}
  .chat-head .s{font-size:.72rem;color:var(--ai-muted)}
  .chat-head .close{
    margin-left:auto;background:none;border:none;color:var(--ai-muted);cursor:pointer;
    line-height:1;padding:12px;margin-right:-8px;
  }
  .chat-head .close:hover{color:#e9eaec}
  .chat-head .close svg{width:18px;height:18px}
  .chat-body{
    flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;
  }
  .msg{
    max-width:85%;padding:11px 15px;border-radius:14px;
    font-size:.9rem;line-height:1.55;white-space:pre-wrap;word-wrap:break-word;
  }
  .msg.bot{background:var(--soft);color:var(--ink);border-bottom-left-radius:4px;align-self:flex-start}
  .msg.user{background:var(--ink);color:var(--bg);border-bottom-right-radius:4px;align-self:flex-end}
  .msg.typing span{
    display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--muted);margin-right:4px;
    animation:blink 1.2s infinite;
  }
  .msg.typing span:nth-child(2){animation-delay:.2s}
  .msg.typing span:nth-child(3){animation-delay:.4s;margin-right:0}
  @keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
  .chat-input{
    display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);background:var(--bg);
  }
  .chat-input input{
    flex:1;border:1px solid var(--line);border-radius:999px;
    padding:11px 18px;font-family:var(--font);font-size:.9rem;
    background:var(--surface);color:var(--ink);outline:none;
  }
  .chat-input input::placeholder{color:var(--muted)}
  .chat-input input:focus{border-color:var(--accent-ink)}
  .chat-input input:disabled{opacity:.5;cursor:not-allowed}
  .chat-input button{
    border:none;border-radius:50%;width:44px;height:44px;cursor:pointer;
    background:var(--accent);color:#fff;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    transition:background .25s;
  }
  .chat-input button:hover{background:var(--accent-ink)}
  .chat-input button:disabled{background:var(--line);cursor:default}
  /* Mobile — full-screen takeover (≤680px) */
  @media(max-width:680px){
    .chat-panel{
      inset:0;
      width:100%;height:100dvh;
      border-radius:0;border:none;
    }
    .chat-head{
      padding:12px 16px;
      padding-top:calc(12px + env(safe-area-inset-top,0px));
    }
    .chat-body{padding:14px 16px}
    .chat-input{
      padding:10px 14px;
      padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
    }
    .chat-fab{
      right:18px;
      bottom:max(20px,env(safe-area-inset-bottom,20px));
    }
    /* Botón de cierre de la cabecera con área táctil cómoda */
    .chat-head .close{padding:10px;margin-right:-6px}
    /* Con el chat a pantalla completa, la página de fondo no debe desplazarse */
    body.chat-open{overflow:hidden}
  }
  /* Mobile — ajustes tipográficos en pantallas pequeñas */
  @media(max-width:480px){
    .chat-head .t{font-size:.9rem}
    .chat-head .s{font-size:.65rem}
    .msg{font-size:.85rem;padding:10px 13px}
  }
  /* Fallback for browsers without dvh support */
  @supports not (height: 1dvh){
    @media(max-width:680px){.chat-panel{height:100vh}}
  }

  /* ---------- Reveal animation (stagger) ---------- */
  /* Ruta JS (fallback): IntersectionObserver añade .visible. Usa tokens de movimiento. */
  .reveal{
    opacity:0;
    transform:translateY(calc(30px * var(--motion-scale)));
    filter:blur(var(--motion-blur));
    transition:opacity var(--motion-duration) var(--motion-easing),
               transform var(--motion-duration) var(--motion-easing),
               filter var(--motion-duration) var(--motion-easing);
  }
  .reveal.visible{opacity:1;transform:none;filter:none}
  /* Firma editorial: los titulares entran con más recorrido y un enderezado
     sutil (skew→0). --motion-scale=0 lo neutraliza en reduce-motion. */
  h2.reveal{
    transform:translateY(calc(48px * var(--motion-scale))) skewY(calc(1.2deg * var(--motion-scale)));
    transform-origin:left bottom;
  }
  .ai-grid .reveal:nth-child(2),.services-list .reveal:nth-child(2){transition-delay:.06s}
  .ai-grid .reveal:nth-child(3),.services-list .reveal:nth-child(3){transition-delay:.12s}
  .ai-grid .reveal:nth-child(4),.services-list .reveal:nth-child(4){transition-delay:.18s}
  .ai-grid .reveal:nth-child(5),.services-list .reveal:nth-child(5){transition-delay:.24s}
  .ai-grid .reveal:nth-child(6),.services-list .reveal:nth-child(6){transition-delay:.3s}
  .pillars .reveal:nth-child(2){transition-delay:.06s}
  .pillars .reveal:nth-child(3){transition-delay:.12s}
  .pillars .reveal:nth-child(4){transition-delay:.18s}

  /* ---------- Scroll-driven nativo (mejora progresiva) ----------
     Donde el navegador soporta animation-timeline:view() (Chrome/Edge/Opera,
     Safari 26+; Firefox tras flag), reveals y parallax los lleva el CSS en el
     hilo del compositor: scroll más fluido y sin trabajo en el hilo principal.
     app.js/scroll.js detectan el mismo soporte y desactivan su ruta JS.
     Navegadores sin soporte ignoran este bloque y usan el fallback JS. */
  @supports (animation-timeline:view()){
    /* Reveals: se animan al entrar en el viewport (rango entry). */
    .reveal{
      opacity:0;
      animation:reveal-in var(--motion-easing) both;
      animation-timeline:view();
      animation-range:entry 0% entry 48%;
    }
    @keyframes reveal-in{
      from{opacity:0;transform:translateY(calc(30px * var(--motion-scale)));filter:blur(var(--motion-blur))}
      to{opacity:1;transform:none;filter:none}
    }
    /* Titulares: misma firma editorial (recorrido largo + enderezado) en la capa CSS. */
    h2.reveal{animation-name:reveal-in-h2}
    @keyframes reveal-in-h2{
      from{opacity:0;transform:translateY(calc(48px * var(--motion-scale))) skewY(calc(1.2deg * var(--motion-scale)));filter:blur(var(--motion-blur))}
      to{opacity:1;transform:none;filter:none}
    }
    /* Escalonado: pequeño desfase del rango por columna en rejillas. */
    .ai-grid .reveal:nth-child(2),.services-list .reveal:nth-child(2),.pillars .reveal:nth-child(2){animation-range:entry 4% entry 52%}
    .ai-grid .reveal:nth-child(3),.services-list .reveal:nth-child(3),.pillars .reveal:nth-child(3){animation-range:entry 8% entry 56%}
    .ai-grid .reveal:nth-child(4),.services-list .reveal:nth-child(4),.pillars .reveal:nth-child(4){animation-range:entry 12% entry 60%}
    .ai-grid .reveal:nth-child(5),.services-list .reveal:nth-child(5){animation-range:entry 16% entry 64%}
    .ai-grid .reveal:nth-child(6),.services-list .reveal:nth-child(6){animation-range:entry 20% entry 68%}

    /* Parallax de imágenes: traslación ligada a la travesía del viewport (rango
       cover). --motion-scale=0 (reduced-motion) lo deja inmóvil automáticamente. */
    .ai-card--feature img{
      animation:img-parallax linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    .about-photo img{
      animation:img-parallax-soft linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes img-parallax{
      from{transform:translateY(calc(24px * var(--motion-scale)))}
      to{transform:translateY(calc(-24px * var(--motion-scale)))}
    }
    @keyframes img-parallax-soft{
      from{transform:translateY(calc(21px * var(--motion-scale)))}
      to{transform:translateY(calc(-21px * var(--motion-scale)))}
    }

    /* La firma final: el subrayado del email se dibuja al entrar en escena.
       Con --motion-scale=0 (reduce-motion) nace ya dibujado. */
    .contact-email{border-bottom:none;display:inline-block}
    .contact-email::after{
      content:"";display:block;height:2px;background:var(--accent);
      border-radius:2px;transform-origin:left;
      animation:draw-line linear both;
      animation-timeline:view();
      animation-range:entry 20% entry 75%;
    }
    @keyframes draw-line{
      from{transform:scaleX(calc(1 - var(--motion-scale)))}
      to{transform:scaleX(1)}
    }
  }

  /* ---------- Responsive ---------- */
  @media(max-width:900px){
    .ai-grid{grid-template-columns:1fr}
    .ai-card,.ai-card--feature{grid-column:auto!important;grid-row:auto!important;margin-top:0!important}
    .ai-card--feature{min-height:340px}
  }
  @media(max-width:760px){
    .nav-links{
      display:none;position:absolute;top:100%;left:0;right:0;
      background:var(--bg);border-bottom:1px solid var(--line);
      flex-direction:column;padding:24px 32px;gap:20px;align-items:flex-start;
    }
    .nav-links.open{display:flex}
    .menu-btn{display:block}
    .about-grid,.contact-wrap{grid-template-columns:1fr;gap:48px}
    section{padding:80px 0}
    .hero-mark{display:none}
    .hero-mark-sm{display:block;width:64px;height:64px;margin-bottom:28px;color:var(--ink)}
    /* El átomo se reubica en la zona superior (ver scroll.js, resize): como
       "marca que asciende". El texto se ancla abajo para que no se solapen. */
    .hero-stage{align-items:flex-end}
    .hero-content{padding-bottom:clamp(72px,13vh,150px)}
    .service{grid-template-columns:auto 1fr;gap:6px 18px;padding:26px 0}
    .service::before{grid-row:1/3}
    .service h3{grid-column:2}
    .service p{grid-column:2}
    .service .more{grid-column:2;justify-self:start;margin-top:8px}
    /* Sin desplazamiento asimétrico de la intro en móvil */
    .section-intro{margin-left:0;max-width:none}

    /* ---------- Limpieza de animaciones en móvil ----------
       En pantallas chicas los transforms dirigidos por scroll (scale/sombra,
       parallax) restan fluidez y aportan poco. Se desactivan para una
       experiencia más sobria y profesional. */
    /* Sección IA: sin scale/border-radius/sombra por scroll (causaban jank
       y texto borroso). Queda asentada y plana. */
    .ai-section{transform:none;border-radius:0;box-shadow:none;will-change:auto}
    /* Card de agentes (feature): completamente estática — sin parallax de
       imagen ni entrada en cascada. */
    .ai-card--feature img{animation:none!important;transform:none!important}
    .ai-grid.seq .ai-card--feature{opacity:1!important;transform:none!important;transition:none!important}
    /* Resto de imágenes: sin parallax. */
    .about-photo img{animation:none!important;transform:none!important}
    /* Numerales de acto: sin parallax (un transform menos por frame). */
    section::before{transform:none}
    /* Cascada de tarjetas más corta y rápida (entrada sobria, no salto). */
    .ai-grid.seq .ai-card{transform:translateY(22px)}

    /* Pines más cortos: mejor ritmo de scroll en móvil */
    .hero--active .hero-track{height:150vh}
    .hscroll--active .hscroll-track{height:220vh}
    .hscroll--active .hpanel{width:82vw}
    .hscroll--active .hpanel--intro{width:88vw}
  }