/* ══════════════════════════════════════════════════════════════
   CROUTON-SYSTEM.CSS — sistema compartido de Crouton Lab
   ══════════════════════════════════════════════════════════════
   Fuente de verdad: Brandbook v1.3. Tokens, reset, tipografia y
   componentes reutilizables en todas las paginas del sitio.

   Contiene: tokens de color y sombra · reset · tipografia base ·
   utilidades de enfasis y reveal · nav de header+pill · botones ·
   acordeon de servicios · acordeon de FAQ · ticker de servicios ·
   chip/tag · marquesina · footer · scroll-reveal · reduced-motion.

   NO contiene nada especifico de una sola pagina (ids de seccion
   como #hero, #manifesto, #process, #about). Eso vive inline en
   cada HTML. Cargar este archivo ANTES del <style> de cada pagina.
   ══════════════════════════════════════════════════════════════ */


    /* ── RESET & TOKENS ────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* ── IDENTIDAD 2026 · cuatro colores de marca ── */
      --carbon:  #232120;   /* Carbon  · texto, estructura, superficies dark */
      --miga:    #FCF9F6;   /* Miga    · fondo base */
      --toronja: #FD5558;   /* Toronja · PROTAGONISTA: superficies, CTAs */
      --mostaza: #FCD150;   /* Mostaza · APOYO: bloques, acentos */
      /* tinta derivada — solo superficie, nunca elemento */
      --durazno: #FCDAC5;   /* medio Toronja+Mostaza al 30% sobre Miga */
      --border:  rgba(35,33,32,0.12);
      --font:    'Satoshi', sans-serif;
      --ease:    cubic-bezier(0.16, 1, 0.3, 1);
      /* alfas de Carbon. El minimo que aprueba AA sobre Miga es 61%; usamos 70%
         para tener margen. Nada de texto por debajo de --carbon-70. */
      --carbon-70: rgba(35,33,32,0.70);
      --carbon-12: rgba(35,33,32,0.12);
      /* Miga con alfa, para el ACTO 2 (superficies Carbon).
         El minimo que aprueba AA sobre Carbon es 47%; usamos 62%. */
      --miga-62: rgba(252,249,246,0.62);
      --miga-22: rgba(252,249,246,0.22);
      --miga-82: rgba(252,249,246,0.82);

      /* ── SOMBRA DURA — la unica profundidad del sistema ──
         Offset, blur cero, Carbon solido. No simula luz: es una
         segunda superficie de color. Prohibido cualquier blur. */
      --sombra:    6px 6px 0 var(--carbon);
      --sombra-sm: 4px 4px 0 var(--carbon);
      --sombra-in: 3px 3px 0 var(--carbon);   /* estado hover, a medio camino */
      /* Sobre Carbon y Toronja una sombra Carbon es invisible: invierte a Miga.
         El brandbook define la sombra solo para superficies claras — esto
         extiende la regla y hay que documentarlo en la proxima version. */
      --sombra-inv:    6px 6px 0 var(--miga);
      --sombra-inv-in: 3px 3px 0 var(--miga);

      /* ── COLORES SEMANTICOS — capa funcional, no identidad ──
         Dos variantes porque el sistema tiene actos claros y oscuros.
         Regla: Toronja es siempre superficie, el error siempre tinta.
         Ningun estado se comunica solo por color: icono + texto. */
      --error:      #A3160F;  /* 7.47:1 sobre Miga   */
      --error-inv:  #FF8A80;  /* 7.02:1 sobre Carbon */
      --exito:      #146B34;  /* 6.29:1 sobre Miga   */
      --exito-inv:  #72D394;  /* 8.75:1 sobre Carbon */
      --aviso:      #7A5200;  /* 6.60:1 sobre Miga   */
      --aviso-inv:  #F0B429;  /* 8.60:1 sobre Carbon */
      --info:       #1E5A8A;  /* 6.94:1 sobre Miga   */
      --info-inv:   #7EC2F0;  /* 8.29:1 sobre Carbon */
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--miga);
      font-family: var(--font);
      color: var(--carbon);
      overflow-x: hidden;
      isolation: isolate;
    }

    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; border: none; background: none; font: inherit; }
    img { display: block; max-width: 100%; }


    /* ── COLOR UTILS ────────────────────────────────── */
    /* Enfasis: Carbon con subrayado Toronja. El color es superficie, no tinta. */
    .g  {
      color: var(--carbon); font-style: italic; -webkit-text-fill-color: var(--carbon);
      background-image: linear-gradient(var(--toronja), var(--toronja));
      background-repeat: no-repeat; background-size: 100% .16em;
      background-position: 0 97%;
    }
    .fc { color: var(--carbon); }


    /* ── WORD REVEAL ────────────────────────────────────── */
    .wc { display: inline-block; overflow: hidden; vertical-align: top; }
    .w  { display: inline-block; transform: translateY(110%); transition: transform .8s var(--ease) var(--d,0s); }
    .w.up { transform: translateY(0); }

    /* ── NAV — header plano + pill flotante ──────────────── */

    /* ── NAV: header plano, arriba ───────────────────── */
    #nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      width: 100%; transform: none;
      border-radius: 0; padding: 0 56px;
      z-index: 200;
      display: flex; align-items: center;
      height: 68px;
      background: transparent;
      border: none;
      box-shadow: none;
      backdrop-filter: none;
      transition: transform .45s var(--ease), opacity .3s var(--ease),
                  background .25s, border-color .25s;
    }
    #nav.gone { transform: translateY(-100%); opacity: 0; pointer-events: none; }


    /* ── PILL FLOTANTE, ABAJO ─────────────────────────────
       Rectangulo redondeado que se traslada desde fuera de
       pantalla. Plano: sin sombra ni blur, como los acordeones.
       Se despliega hacia arriba con grid-template-rows 0fr -> 1fr. */
    .pill {
      position: fixed;
      bottom: 20px; left: 50%;
      z-index: 250;
      width: min(340px, calc(100vw - 28px));
      display: block;
      border-radius: 28px;
      overflow: hidden;
      /* Carbon solido. El brandbook prohibe backdrop-filter: la unica
         profundidad del sistema es la sombra dura. */
      background: var(--carbon);
      border: 2px solid var(--carbon);
      box-shadow: var(--sombra);
      opacity: 0;
      transform: translateX(-50%) translateY(160%);
      pointer-events: none;
      transition: transform .6s var(--ease), opacity .35s var(--ease);
    }
    .pill.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }

    /* el panel va ANTES de la barra, asi crece hacia arriba */
    .pill-panel {
      display: grid; grid-template-rows: 0fr;
      transition: grid-template-rows .45s var(--ease);
    }
    .pill.open .pill-panel { grid-template-rows: 1fr; }
    .pill-panel-inner { overflow: hidden; }
    .pill-links { display: flex; flex-direction: column; padding: 18px 22px 4px; }
    .pill-links a {
      font-family: var(--font); font-size: 15px; font-weight: 700;
      /* .82, no .62: sobre vidrio el alfa del texto se suma al del fondo.
         A .62 el peor caso da 3.64 y falla AA. */
      letter-spacing: -.2px; color: rgba(252,249,246,.82);
      padding: 10px 0; transition: color .2s;
    }
    .pill-links a:hover, .pill-links a:focus-visible { color: var(--miga); }

    .pill-bar { display: flex; align-items: center; height: 58px; padding: 0 8px 0 18px; }
    .pill-mark { width: 26px; height: 26px; flex-shrink: 0; margin-right: 12px; }
    .pill-mark svg { width: 26px; height: 26px; display: block; }

    .pill-toggle {
      margin-left: auto;
      display: flex; align-items: center; gap: 9px;
      font-family: var(--font); font-size: 11px; font-weight: 700;
      letter-spacing: 1.8px; text-transform: uppercase;
      color: rgba(252,249,246,.82); white-space: nowrap;
      transition: color .25s;
    }
    .pill.open .pill-toggle { color: var(--miga); }
    .pill-toggle-icon {
      width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
      border: 1.5px solid rgba(252,249,246,.30);
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; line-height: 1;
      transition: transform .4s var(--ease), background .3s, color .3s, border-color .3s;
    }
    /* mismo giro de 45 grados que el icono del FAQ */
    .pill.open .pill-toggle-icon {
      transform: rotate(45deg);
      background: var(--mostaza); border-color: var(--mostaza); color: var(--carbon);
    }
    .pill-cta {
      background: var(--toronja); color: var(--carbon);
      font-family: var(--font); font-size: 11px; font-weight: 700;
      letter-spacing: 1.8px; text-transform: uppercase;
      padding: 11px 16px; border-radius: 100px; white-space: nowrap;
      margin-left: 12px; transition: opacity .2s;
    }
    .pill-cta:hover { opacity: .88; }

    /* fills del logomark, controlados por CSS para poder invertirlos */
    .pk-cube { fill: var(--miga); }
    .pk-dot  { fill: var(--mostaza); }


    .nav-logo {
      display: flex; align-items: center; flex-shrink: 0;
      text-decoration: none; white-space: nowrap; overflow: hidden;
      font-family: var(--font); font-weight: 900;
      font-size: 17px; letter-spacing: -0.5px; color: var(--carbon);
      /* reset crouton-nav.css badge styles */
      background: none; width: auto; height: auto;
      border-radius: 0; padding: 0;
      transform: none !important;
    }
    .nav-logo-chip {
      background: var(--toronja); color: var(--carbon);
      font-weight: 900; font-size: 14px;
      padding: 1px 7px; border-radius: 8px; margin-left: 5px;
    }

    .nav-links {
      flex: 1 1 auto;
      display: flex; align-items: center; justify-content: center;
    }

    .nav-link {
      font-family: var(--font);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--carbon-70);
      padding: 8px 16px;
      border-radius: 8px;
      transition: color .18s, background .18s;
    }

    .nav-link:hover { color: var(--carbon); background: var(--carbon-12); }
    .nav-link.active { color: var(--carbon); background: none; }

    .nav-cta {
      background: var(--toronja);
      color: var(--carbon);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      padding: 10px 22px;
      border-radius: 100px;
      box-shadow: var(--sombra-sm);
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), width .5s var(--ease), opacity .3s var(--ease);
      display: block; flex-shrink: 0; white-space: nowrap;
    }

    .nav-cta:hover  { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--carbon); }
    .nav-cta:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--carbon); }


    @media (max-width: 640px) {
      .nav-link { padding: 8px 10px; font-size: 11px; }
      .nav-cta  { padding: 9px 14px; font-size: 11px; }
    }

    /* Fix D6: los 5 links + logo + CTA del header no caben en una sola
       fila por debajo de ~900px (a 13px + letter-spacing:3px, "SERVICIOS"
       y "AUTOMATIZACIONES" no entran) — antes se apretaban o desbordaban.
       Debajo del breakpoint, el header queda solo con logo + CTA, y la
       pill flotante (que ya duplica los mismos 5 links) se muestra desde
       el principio en vez de esperar a que el usuario baje el scroll —
       es la unica forma de llegar a Servicios/Proceso/Nosotros/Blog/
       Contacto en ese ancho. */
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .pill { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
    }

    /* ── BOTONES ──────────────────────────────────────────── */
    .btn-main {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--toronja);
      color: var(--carbon);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      padding: 16px 36px;
      border-radius: 100px;
      box-shadow: var(--sombra);
      transition: transform .18s var(--ease), box-shadow .18s var(--ease);
    }
    /* Press brutalista: el boton se desplaza dentro de su propia sombra */
    .btn-main:hover  { transform: translate(3px, 3px); box-shadow: var(--sombra-in); }
    .btn-main:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--carbon); }

    .btn-ghost {
      font-family: var(--font);
      font-size: 14px;
      font-weight: 500;
      color: var(--carbon-70);
      border-bottom: 1.5px solid var(--carbon-70);
      padding-bottom: 2px;
      transition: color .2s, border-color .2s;
    }
    .btn-ghost:hover { color: var(--carbon); border-color: var(--carbon); }

    .btn-dark {
      background: var(--carbon); color: var(--miga);
      font-family: var(--font); font-size: 14px; font-weight: 700;
      letter-spacing: 3px; text-transform: uppercase;
      padding: 18px 44px; border-radius: 100px;
      box-shadow: var(--sombra-inv);
      transition: transform .18s var(--ease), box-shadow .18s var(--ease);
      display: inline-block; position: relative; overflow: hidden;
    }
    .btn-dark:hover  { transform: translate(3px, 3px); box-shadow: var(--sombra-inv-in); }
    .btn-dark:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--miga); }

    .btn-dark .ripple {
      position: absolute; border-radius: 50%;
      background: rgba(255,255,255,.18);
      transform: scale(0);
      animation: ripple-out .55s ease-out forwards;
      pointer-events: none;
    }
    @keyframes ripple-out { to { transform: scale(4); opacity: 0; } }

    /* ── MARQUESINA (mecanica generica) ──────────────────── */
    .marquee-wrap { overflow: hidden; }
    .marquee-track {
      display: flex; gap: 40px; align-items: center;
      width: max-content;
      animation: mq 24s linear infinite;
    }
    .marquee-track:hover { animation-play-state: paused; }
    @keyframes mq { from { transform: translateX(0) } to { transform: translateX(-50%) } }


    /* ── SERVICES (accordion) ─────────────────────────────── */
    #services { border-bottom: 2px solid var(--carbon-12); }

    .svc-accordion { display: flex; flex-direction: column; }

    .svc-item {
      border-top: 2px solid var(--carbon-12);
      overflow: hidden;
      transition: background .35s var(--ease);
    }
    .svc-item:last-child { border-bottom: 2px solid var(--carbon-12); }

    .svc-trigger {
      width: 100%; display: flex; align-items: center; gap: 20px;
      padding: 28px 56px; background: none; border: none; cursor: pointer;
      font-family: var(--font); text-align: left;
      transition: background .2s;
    }
    .svc-trigger:hover { background: rgba(35,33,32,.03); }

    .svc-item-num {
      font-size: 11px; font-weight: 700; letter-spacing: 5px;
      text-transform: uppercase; color: var(--carbon-70); flex-shrink: 0;
      transition: color .35s;
    }

    .svc-item-name {
      font-size: clamp(22px, 3vw, 38px); font-weight: 900;
      letter-spacing: -1.5px; color: var(--carbon);
      transition: color .35s;
    }

    .svc-item-chevron {
      margin-left: auto; font-size: 22px; color: var(--carbon-70); flex-shrink: 0;
      transition: transform .35s var(--ease), color .35s;
    }

    .svc-body {
      display: grid; grid-template-rows: 0fr;
      transition: grid-template-rows .4s var(--ease);
    }
    .svc-body-inner {
      overflow: hidden; padding: 0 56px;
      display: flex; flex-direction: column; gap: 20px;
    }

    .svc-body-title {
      font-family: var(--font); font-weight: 900;
      font-size: clamp(28px, 4vw, 52px); letter-spacing: -2px; line-height: .95;
      color: var(--carbon); transition: color .35s;
    }

    .svc-body p {
      font-family: var(--font); font-size: 16px; font-weight: 500;
      line-height: 1.65; color: var(--carbon-70); max-width: 560px;
      transition: color .35s;
    }

    .svc-features { list-style: none; display: flex; flex-direction: column; gap: 9px; }
    .svc-features li {
      font-family: var(--font); font-size: 14px; font-weight: 500;
      color: var(--carbon-70); display: flex; align-items: flex-start;
      gap: 10px; line-height: 1.5; transition: color .35s;
    }
    .svc-features li::before { content: '→'; flex-shrink: 0; font-size: 12px; color: var(--carbon-70); transition: color .35s; }

    .svc-link {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font); font-size: 13px; font-weight: 700;
      letter-spacing: 3px; text-transform: uppercase;
      color: var(--carbon); transition: gap .2s, color .35s;
      padding-bottom: 40px;
    }
    .svc-link:hover { gap: 14px; }
    .svc-link::after { content: '→'; }

    /* Active — black */
    .svc-item.open { background: var(--carbon); }
    .svc-item.open .svc-trigger:hover { background: rgba(255,255,255,.04); }
    .svc-item.open .svc-item-num {
      color: var(--mostaza);
      transform: translateX(6px);
    }
    .svc-item-num { transition: color .35s var(--ease), transform .35s var(--ease); }
    .svc-item.open .svc-item-name { color: var(--miga); }
    .svc-item.open .svc-item-chevron { transform: rotate(90deg); color: rgba(252,249,246,.5); }
    .svc-item.open .svc-body { grid-template-rows: 1fr; }
    .svc-item.open .svc-body-title { color: var(--miga); }
    .svc-item.open .svc-body p { color: rgba(252,249,246,.55); }
    .svc-item.open .svc-features li { color: rgba(252,249,246,.58); }
    .svc-item.open .svc-features li::before { color: var(--mostaza); }
    .svc-item.open .svc-link { color: var(--miga); }

    @media (max-width: 768px) {
      .svc-trigger { padding: 20px 24px; gap: 14px; }
      .svc-body-inner { padding: 0 24px; }
    }


    /* ── FAQ ─────────────────────────────────────────────── */
    #faq {
      background: var(--miga);
      border-bottom: 2px solid var(--carbon-12);
      padding: 80px 56px;
    }

    .faq-header { margin-bottom: 48px; }

    .faq-label {
      font-family: var(--font); font-size: 11px; font-weight: 700;
      letter-spacing: 5px; text-transform: uppercase;
      color: var(--carbon-70); margin-bottom: 16px;
    }

    .faq-title {
      font-family: var(--font); font-weight: 900;
      font-size: clamp(36px, 5vw, 62px);
      letter-spacing: -3px; line-height: .95; color: var(--carbon);
    }

    .faq-list {
      display: flex; flex-direction: column; gap: 8px; max-width: 860px;
    }

    .faq-item {
      border: 2px solid var(--carbon); border-radius: 16px; overflow: hidden;
      box-shadow: var(--sombra-sm);
      transition: background .3s var(--ease), border-color .3s var(--ease),
                  transform .22s var(--ease), box-shadow .22s var(--ease);
    }
    /* al pasar por encima se hunde un poco; al abrirse se asienta del todo */
    .faq-item:hover:not(.open) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--carbon); }
    .faq-item.open { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--carbon); }

    .faq-trigger {
      width: 100%; display: flex; align-items: center;
      justify-content: space-between; gap: 20px;
      padding: 22px 28px; background: none; border: none; cursor: pointer;
      font-family: var(--font); font-size: 17px; font-weight: 700;
      letter-spacing: -.3px; color: var(--carbon); text-align: left;
    }

    .faq-icon {
      width: 32px; height: 32px; border-radius: 50%;
      border: 2px solid var(--carbon-12); display: flex;
      align-items: center; justify-content: center; flex-shrink: 0;
      font-size: 18px; line-height: 1; color: var(--carbon); font-weight: 400;
      transition: transform .35s var(--ease), background .3s, color .3s, border-color .3s;
    }

    .faq-body {
      display: grid; grid-template-rows: 0fr;
      transition: grid-template-rows .4s var(--ease);
    }
    .faq-body-inner { overflow: hidden; padding: 0 28px; }
    .faq-body-inner p {
      font-family: var(--font); font-size: 15px; font-weight: 500;
      line-height: 1.7; color: var(--carbon-70); padding-bottom: 24px; max-width: 720px;
    }

    /* Active — peach */
    .faq-item.open { background: var(--durazno); border-color: var(--durazno); }
    .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--carbon); border-color: var(--carbon); color: var(--durazno); }
    .faq-item.open .faq-body { grid-template-rows: 1fr; }
    .faq-item.open .faq-body-inner p { color: rgba(35,33,32,.68); }

    @media (max-width: 768px) {
      #faq { padding: 60px 24px; }
      .faq-trigger { font-size: 15px; padding: 18px 20px; }
      .faq-body-inner { padding: 0 20px; }
    }


    /* ── SERVICES TICKER ────────────────────────────────── */
    .svc-ticker {
      background: var(--toronja);
      overflow: hidden;
      border-top: 2px solid var(--carbon-12);
      border-bottom: 2px solid var(--carbon-12);
    }
    .svc-ticker .marquee-track { animation-name: mqr; animation-duration: 32s; gap: 0; }
    @keyframes mqr { from { transform: translateX(-50%) } to { transform: translateX(0) } }

    .ticker-item {
      display: flex; align-items: center; gap: 20px;
      padding: 16px 28px; white-space: nowrap;
      font-family: var(--font); font-size: 13px; font-weight: 700;
      color: var(--carbon); letter-spacing: 3px; text-transform: uppercase;
    }
    .ticker-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(35,33,32,.5); flex-shrink: 0; }

    /* ── CHIP / TAG ───────────────────────────────────────── */
    .tag {
      font-family: var(--font); font-size: 12px; font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase;
      color: var(--miga);
      padding: 7px 16px; border-radius: 100px;
      border: 2px solid var(--miga-22);
      box-shadow: 0 0 0 var(--miga);
      opacity: 0; transform: scale(0.7);
      transition: opacity .32s var(--ease) calc(.62s + var(--td,0s)), transform .32s var(--ease) calc(.62s + var(--td,0s)), border-color .25s ease, background .25s, color .25s;
    }
    .tag.up { opacity: 1; transform: scale(1); }
    .tag:hover {
      border-color: var(--miga); background: var(--miga); color: var(--carbon);
      transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--miga-22);
    }
    @media (min-width: 768px) { .tag { transition: border-color .25s ease, background .25s, color .25s; } }


    /* ── FOOTER ──────────────────────────────────────────── */
    footer {
      padding: 48px 56px;
      background: var(--carbon);
      display: flex; align-items: center;
      justify-content: space-between; flex-wrap: wrap; gap: 24px;
    }

    .footer-left { display: flex; flex-direction: column; gap: 8px; }

    .footer-brand {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font); font-weight: 900;
      font-size: 18px; letter-spacing: -1px; color: var(--miga);
    }

    .footer-brand-chip {
      background: var(--toronja); color: var(--carbon);
      font-weight: 900; padding: 2px 10px;
      border-radius: 8px; font-size: 16px;
    }

    .footer-copy {
      font-family: var(--font); font-size: 12px; font-weight: 500;
      color: rgba(252,249,246,.58); letter-spacing: .8px;
    }

    .footer-links { display: flex; gap: 28px; list-style: none; flex-wrap: wrap; }
    .footer-links a {
      font-family: var(--font); font-size: 13px; font-weight: 500;
      color: rgba(252,249,246,.62); transition: color .2s;
    }
    .footer-links a:hover { color: var(--miga); }


    @media (max-width: 768px) {
      footer { padding: 40px 24px; }
    }


    /* ── SCROLL REVEAL ─────────────────────────────────── */
    .reveal { opacity: 0; transform: translateY(32px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
    .reveal.vis { opacity: 1; transform: translateY(0); }
    .reveal.d1 { transition-delay: .12s; }
    .reveal.d2 { transition-delay: .24s; }
    .reveal.d3 { transition-delay: .36s; }

    /* ── MOVIMIENTO REDUCIDO (parte compartida) ──────────
       El brandbook lo exige: con reduced-motion se desactiva todo
       salvo cambios de opacidad, y ningun elemento queda atrapado
       en un estado intermedio de animacion. Los selectores especificos
       de cada pagina (ej. hero, process) van en el <style> de esa pagina,
       en su propio bloque @media (prefers-reduced-motion: reduce). */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
      /* estados finales, no iniciales */
      .reveal { opacity: 1 !important; transform: none !important; }
      .w { transform: none !important; }
      .tag { opacity: 1 !important; transform: none !important; }
      /* el press deja de desplazar, pero la sombra se mantiene */
      .btn-main:hover, .btn-dark:hover, .nav-cta:hover,
      .faq-item:hover, .tag:hover {
        transform: none !important;
      }
      /* marquesinas quietas */
      .marquee-track { animation: none !important; }
    }