:root{
    --lime:#C6F135;
    --lime-dark:#a8cf1f;
    --black:#0D0D0D;
    --white:#FFFFFF;
    --off-white:#F0F0F0;
    --dark-2:#151515;
    --dark-3:#1E1E1E;
    --dark-4:#2A2A2A;
    --footer:#080808;
    --surface-light:#F5F4F0;
    --line-light:#E2E2DD;
    --t-on-dark:#F0F0F0;
    --t-muted:rgba(255,255,255,.6);
    --t-subtle:rgba(255,255,255,.55);
    --t-on-light:#0D0D0D;
    --t-light-muted:#555;
    --display:"Oswald","DIN Condensed","DIN Alternate","Bebas Neue",Impact,"Arial Narrow",sans-serif;
    --body:"Helvetica Neue",Arial,sans-serif;
    --pad-y:clamp(72px,10vw,120px);
    --pad-x:5vw;
  }

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:74px;-webkit-text-size-adjust:100%}
  body{
    font-family:var(--body);
    font-size:15px;line-height:1.7;
    color:var(--t-on-dark);
    background:var(--black);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  ::selection{background:var(--lime);color:var(--black)}

  .display{
    font-family:var(--display);
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:-.5px;
    line-height:1.05;
  }

  .wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad-x)}
  section{padding:var(--pad-y) 0;position:relative}

  /* ===== Eyebrow + headings ===== */
  .eyebrow{
    font-family:var(--body);
    font-size:11px;font-weight:700;
    letter-spacing:5px;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:14px;
    margin-bottom:26px;color:var(--lime);
  }
  .eyebrow::before{content:"";width:34px;height:2px;background:var(--lime);display:inline-block}
  .light .eyebrow{color:var(--t-on-light)}
  .light .eyebrow::before{background:var(--t-on-light)}

  h2.section-title{
    font-family:var(--display);text-transform:uppercase;font-weight:700;
    font-size:clamp(30px,5vw,58px);letter-spacing:-1px;line-height:1.02;
    max-width:18ch;margin-bottom:24px;
  }
  .lead{font-size:clamp(15px,1.6vw,18px);max-width:60ch;color:var(--t-muted)}
  .light .lead{color:var(--t-light-muted)}

  /* ===== Sections base color ===== */
  .light{background:var(--white);color:var(--t-on-light)}

  /* ===== NAV ===== */
  header{
    position:fixed;top:0;left:0;width:100%;z-index:100;
    transition:background .3s ease,border-color .3s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{background:rgba(13,13,13,.97);border-bottom:1px solid var(--dark-4)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
  .brand{font-family:var(--display);font-weight:700;font-size:14px;line-height:.96;letter-spacing:.5px;color:#fff;text-transform:uppercase}
  .brand .sp{color:var(--lime)}

  .nav-right{display:flex;align-items:center;gap:26px}
  .nav-links{display:flex;align-items:center;gap:34px;list-style:none}
  .nav-links a{
    font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--t-muted);position:relative;padding:6px 0;transition:color .25s;
  }
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--lime);transition:width .3s ease}
  .nav-links a:hover{color:#fff}
  .nav-links a:hover::after{width:100%}

  .lang{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:1px}
  .lang a{color:var(--t-subtle);transition:color .2s}
  .lang a.active{color:var(--lime)}
  .lang a:hover{color:#fff}
  .lang .sep{color:var(--dark-4)}

  .btn{
    font-family:var(--body);display:inline-block;cursor:pointer;
    font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
    border-radius:4px;transition:background .25s,color .25s,border-color .25s,transform .15s;
  }
  .btn-lime{background:var(--lime);color:var(--black);padding:14px 26px}
  .btn-lime:hover{background:var(--lime-dark)}
  .btn-ghost{border:1px solid var(--dark-4);color:#fff;padding:13px 26px}
  .btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
  .light .btn-ghost{border-color:var(--line-light);color:var(--black)}
  .light .btn-ghost:hover{border-color:var(--black);color:var(--black)}
  .btn:active{transform:translateY(1px)}
  .nav .btn-lime{padding:12px 22px}

  /* Mobile menu (pure CSS) */
  .menu-toggle,.menu-chk{display:none}
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
  .burger span{width:24px;height:2px;background:#fff;transition:.3s}

  /* ===== HERO ===== */
  .hero{
    min-height:100vh;display:flex;align-items:center;
    padding-top:120px;padding-bottom:60px;overflow:hidden;
    background:var(--black);position:relative;
  }
  /* Capa 0: vídeo de fondo (cubre el hero); poster de respaldo mientras carga o si no reproduce */
  .hero-media{position:absolute;inset:0;z-index:0;width:100%;height:100%;
    object-fit:cover;object-position:center;filter:saturate(.92);background:var(--black)}
  /* Capa 1: scrim funcional para legibilidad del texto (negro, sin color) */
  .hero-scrim{position:absolute;inset:0;z-index:1;
    background:
      linear-gradient(90deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.72) 34%,rgba(8,8,8,.30) 64%,rgba(8,8,8,.12) 100%),
      linear-gradient(0deg,rgba(8,8,8,.85) 0%,rgba(8,8,8,0) 45%);
  }
  .hero .wrap{position:relative;z-index:3;width:100%}
  .hero h1{
    font-family:var(--display);text-transform:uppercase;font-weight:700;
    font-size:clamp(44px,8.5vw,108px);letter-spacing:-2px;line-height:.96;
    max-width:14ch;margin-bottom:30px;
  }
  .hero h1 .hl{color:var(--lime)}
  .hero .lead{max-width:54ch;margin-bottom:40px}
  .hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

  /* stats */
  .stats{display:flex;flex-wrap:wrap;gap:0;margin-top:64px;border-top:1px solid var(--dark-4)}
  .stat{flex:1 1 160px;padding:28px 26px 28px 0;border-right:1px solid var(--dark-4)}
  .stat:last-child{border-right:0}
  .stat .num{font-family:var(--display);font-weight:700;font-size:clamp(40px,6vw,64px);color:var(--lime);line-height:1}
  .stat .lbl{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--t-muted);margin-top:8px}

  /* ===== generic card grid ===== */
  .grid{display:grid;gap:1px;background:var(--dark-4);border:1px solid var(--dark-4)}
  .light .grid{background:var(--line-light);border-color:var(--line-light)}
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}
  .card{background:var(--black);padding:36px 32px;position:relative;overflow:hidden;transition:background .3s}
  .light .card{background:var(--white)}
  .card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--lime);transition:width .4s ease}
  .card:hover::before{width:100%}
  .card:hover{background:var(--dark-3)}
  .light .card:hover{background:var(--surface-light)}
  .card h3{font-family:var(--display);text-transform:uppercase;font-weight:700;font-size:21px;letter-spacing:0;margin-bottom:12px}
  .card p{font-size:14.5px;color:var(--t-muted)}
  .light .card p{color:var(--t-light-muted)}

  /* problema list */
  .prob-item{padding-left:22px;border-left:2px solid var(--lime);margin-bottom:6px}
  .prob-item h3{font-family:var(--display);text-transform:uppercase;font-size:19px;margin-bottom:8px}

  /* ===== SERVICIOS ===== */
  .svc .icon{width:46px;height:46px;color:var(--t-on-light);margin-bottom:24px;transition:color .3s}
  .svc .card:hover .icon{color:var(--lime-dark)}
  .svc .num-tag{font-family:var(--display);font-weight:700;font-size:13px;color:var(--lime-dark);letter-spacing:2px;position:absolute;top:30px;right:30px}
  .svc .result{display:inline-flex;gap:8px;align-items:flex-start;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-light);
    font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t-on-light)}
  .svc .result .arrow{color:var(--lime-dark);font-family:var(--display)}

  /* ===== METODOLOGÍA ===== */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dark-4);border:1px solid var(--dark-4)}
  .step{background:var(--black);padding:34px 28px;position:relative;transition:background .3s}
  .step::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--lime);transition:width .4s ease}
  .step:hover::before{width:100%}
  .step:hover{background:var(--dark-3)}
  .step .n{font-family:var(--display);font-weight:700;font-size:46px;color:var(--lime);opacity:.5;line-height:1;margin-bottom:18px}
  .step h3{font-family:var(--display);text-transform:uppercase;font-size:19px;margin-bottom:12px}
  .step p{font-size:14px;color:var(--t-muted)}

  /* ===== BENEFICIOS ===== */
  .ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light)}
  .ben{background:var(--white);padding:32px 30px;position:relative;transition:background .3s}
  .ben::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--lime);transition:width .4s ease}
  .ben:hover::before{width:100%}
  .ben:hover{background:var(--surface-light)}
  .ben .up{font-family:var(--display);font-weight:700;font-size:30px;color:var(--t-on-light);display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .ben .up::before{content:"↑";color:var(--lime-dark)}
  .ben p{font-size:14px;color:var(--t-light-muted)}

  /* ===== TRAYECTORIA marquee ===== */
  .trust h2{margin-bottom:18px}
  .marquee{margin-top:50px;position:relative;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .marquee-track{display:flex;gap:14px;width:max-content;animation:scroll 38s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .pill{flex:0 0 auto;border:1px solid rgba(198,241,53,.35);color:var(--lime);
    font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
    padding:11px 20px;border-radius:3px;white-space:nowrap;
    transition:border-color .25s ease,background .25s ease,color .25s ease}
  .pill:hover{border-color:var(--lime);background:var(--lime);color:var(--black)}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ===== PERFIL CLIENTE ===== */
  .cli .card h3{display:flex;align-items:center;gap:12px}
  .cli .card .bullet{font-family:var(--display);font-weight:700;color:var(--lime-dark);font-size:15px}

  /* ===== CTA ===== */
  .cta{text-align:center}
  .cta .eyebrow{justify-content:center}
  .cta h2{margin:0 auto 22px;max-width:20ch}
  .cta .lead{margin:0 auto 38px}
  .cta-mail{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:14px;
    display:inline-block;margin-top:26px;color:var(--lime);letter-spacing:2px;border-bottom:2px solid var(--lime);padding-bottom:4px}
  .cta-mail:hover{color:#fff;border-color:#fff}

  /* ===== FOOTER ===== */
  footer{background:var(--footer);padding:70px 0 40px;border-top:1px solid var(--dark-4)}
  .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;margin-bottom:50px}
  .foot-logo .l{font-family:var(--display);font-weight:700;font-size:30px;line-height:.98;letter-spacing:.5px}
  .foot-logo .l span{color:var(--lime)}
  .foot-col h4{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--t-subtle);margin-bottom:16px}
  .foot-col p,.foot-col a{font-size:14px;color:var(--t-muted);display:block;margin-bottom:6px}
  .foot-col a:hover{color:var(--lime)}
  .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
    padding-top:26px;border-top:1px solid var(--dark-4);font-size:12px;color:var(--t-subtle)}
  .foot-bottom a{color:var(--t-subtle)}
  .foot-bottom a:hover{color:var(--lime)}

  /* ===== reveal animation ===== */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

  /* ===== RESPONSIVE ===== */
  @media(max-width:900px){
    .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
    .steps{grid-template-columns:repeat(2,1fr)}
    .ben-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:1024px){
    .burger{display:flex}
    .nav-links{
      position:fixed;top:74px;right:0;width:min(78%,320px);height:calc(100vh - 74px);
      background:var(--dark-2);flex-direction:column;align-items:flex-start;gap:0;
      padding:24px;transform:translateX(110%);transition:transform .35s ease;
      border-left:1px solid var(--dark-4);
    }
    .nav-links a{width:100%;padding:16px 0;border-bottom:1px solid var(--dark-4);font-size:14px}
    .nav-links li:last-child{margin-top:18px}
    .nav-links .btn-lime{width:100%;text-align:center}
    .menu-chk:checked ~ .nav-links{transform:translateX(0)}
    .menu-chk:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .menu-chk:checked ~ .burger span:nth-child(2){opacity:0}
    .menu-chk:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  }
  @media(max-width:620px){
    .g-2,.g-3,.g-4{grid-template-columns:1fr}
    .steps,.ben-grid{grid-template-columns:1fr}
    .stat{flex:1 1 50%;border-right:0;border-bottom:1px solid var(--dark-4);padding-right:0}
    .foot-top{flex-direction:column}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important}
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
  }

  /* --- fotografías de equipo --- */
  .persona-head{display:flex;gap:46px;align-items:flex-start;flex-wrap:wrap}
  .persona-txt{flex:1 1 460px;min-width:0}
  .foto-persona{flex:none;width:270px;height:270px;object-fit:cover;display:block;
    border:1px solid var(--line-light);border-radius:4px}
  .card picture{display:block;width:calc(100% + 64px);margin:-36px -32px 24px}
  .foto-card{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 20%}
  .persona-head picture{flex:none;display:block}
  @media(max-width:620px){
    .foto-persona{width:180px;height:180px}
    .card picture{width:calc(100% + 44px);margin:-24px -22px 18px}
  }


/* ==========================================================================
   ALTRIAN GLOBAL SPORTS — Accesibilidad de teclado
   WCAG 2.1 · criterio 2.4.7 Focus Visible (AA) y 2.1.1 Teclado (A)

   Añadir AL FINAL de  assets/altrian.css  (paquete v16).
   Va al final a propósito: así gana a las reglas anteriores sin tener que
   tocar nada de lo que ya existe.

   No usa sombras ni degradados: sólo `outline`, según la norma de marca.

   NOTA: sustituye a la versión anterior de este fichero, que sólo cubría
   el foco visible. Ahora incluye también el arreglo del menú hamburguesa.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. El menú hamburguesa tiene que ser operable con teclado.

   Hoy el CSS dice:
       .menu-toggle,.menu-chk{display:none}

   `display:none` saca el checkbox del árbol de foco. La etiqueta .burger no
   es un control focusable por sí misma, así que por debajo de 1024 px el
   menú no se puede abrir con teclado: incumple el criterio 2.1.1, nivel A.

   Se sustituye por ocultación visual, que mantiene el control focusable.
   Sigue oculto a la vista y sigue sin ocupar espacio.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .menu-chk {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
  }
}

/* Por encima del punto de ruptura la hamburguesa no se ve, así que el
   checkbox vuelve a desaparecer: si no, el teclado se pararía en un control
   invisible que no hace nada. */
@media (min-width: 1025px) {
  .menu-chk { display: none; }
}


/* --------------------------------------------------------------------------
   2. El ratón no dibuja anillo; el teclado sí.
   -------------------------------------------------------------------------- */
:focus:not(:focus-visible) {
  outline: none;
}


/* --------------------------------------------------------------------------
   3. Anillo por defecto — fondos oscuros
   (cabecera, pie y secciones negras: el lima contrasta 12:1 sobre #0D0D0D)
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.brand:focus-visible,
.lang a:focus-visible {
  outline: 3px solid #C6F135;
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   4. Fondos claros — el lima sobre blanco se queda en 1,5:1, por debajo del
   3:1 que exige el criterio 1.4.11. Sobre `.light` el anillo pasa a negro.
   -------------------------------------------------------------------------- */
.light a:focus-visible,
.light button:focus-visible,
.light input:focus-visible,
.light select:focus-visible,
.light textarea:focus-visible,
.light summary:focus-visible,
.light [tabindex]:focus-visible,
.light .btn:focus-visible {
  outline-color: #0D0D0D;
}

/* El botón lima sobre fondo claro: se separa un punto más para que el
   anillo negro no se confunda con el borde del propio botón. */
.light .btn-lime:focus-visible {
  outline-offset: 4px;
}


/* --------------------------------------------------------------------------
   5. El foco del checkbox se dibuja sobre la hamburguesa, que es lo que se
   ve. El checkbox mide 1 px y es transparente: un anillo sobre él no se
   apreciaría.
   -------------------------------------------------------------------------- */
.menu-chk:focus-visible ~ .burger {
  outline: 3px solid #C6F135;
  outline-offset: 4px;
}


/* --------------------------------------------------------------------------
   6. Modo de contraste alto de Windows: el anillo usa el color del sistema
   en vez del lima, que ahí se descarta.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }
}

/* ===== v18 — el guion que precedía al eyebrow se elimina en todo el sitio ===== */
.eyebrow::before{content:none!important;display:none!important}
.eyebrow{gap:0}
/* ===== v18 — fecha de publicación: permanece en el documento, fuera de pantalla ===== */
.pubdate{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ===== v18 — enlaces dentro de un párrafo: deben verse como enlaces ===== */
.inline-link{font-weight:700;color:var(--lime);border-bottom:2px solid var(--lime);padding-bottom:1px;transition:color .2s,background .2s,border-color .2s}
.inline-link:hover{color:#fff;border-color:#fff}
.light .inline-link{color:var(--t-on-light);border-bottom-color:var(--t-on-light)}
.light .inline-link:hover{background:var(--lime);border-color:var(--lime)}

/* ===== v18 — foto de equipo =====
   1) El atributo height="640" del <img> ganaba a aspect-ratio:1/1, asi que el hueco
      era un rectangulo vertical de 277x640 y object-fit:cover recortaba los lados.
      Con height:auto el cuadro vuelve a ser cuadrado y la foto se ve entera.
   2) Cuadro mas pequeno y alineado con el texto, para suavizar la diferencia de
      encuadre entre los originales. */
.card picture{width:auto;margin:0 0 20px}
.foto-card{width:min(210px,74%);height:auto;object-position:center}
@media(max-width:620px){
  .card picture{width:auto;margin:0 0 18px}
}

/* ===== v18 — logotipo canonico: tres lineas de anchura identica (textLength) ===== */
.brand-mark{display:block;height:40px;width:auto;font-family:"Oswald","DIN Condensed","DIN Alternate","Bebas Neue",Impact,"Arial Narrow",sans-serif;font-weight:700;font-size:175px;letter-spacing:0;fill:#fff}
.brand-mark .sp{fill:var(--lime)}
.foot-mark{height:88px}

/* ===== v18 — el CTA de la cabecera heredaba .nav-links a{color:--t-muted} y salia
   blanco al 60% sobre lima (1,16:1). Regla de marca: SIEMPRE negro sobre lima. ===== */
.nav-links a.btn-lime,.nav-links a.btn-lime:hover{color:var(--black)}
.nav-links a.btn-lime::after{content:none}

/* ==========================================================================
   v18 — Correcciones de motion (auditoria review-animations, 2026-09-10)
   Solo intercambio de propiedades. Ni una etiqueta ni una clase cambian.
   ========================================================================== */

/* 1. La linea lima deslizante pasa de animar width (layout+paint en cada hover)
      a scaleX (GPU). Mismo efecto, misma direccion, la mitad de tiempo. */
.card::before,.step::before,.ben::before{
  width:100%;transform:scaleX(0);transform-origin:left;
  transition:transform 200ms cubic-bezier(.23,1,.32,1)}
.card:hover::before,.step:hover::before,.ben:hover::before{transform:scaleX(1)}
.nav-links a::after{
  width:100%;transform:scaleX(0);transform-origin:left;
  transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.nav-links a:hover::after{transform:scaleX(1)}

/* 2. Fondo de tarjeta en hover: 300ms era largo para un cambio de color */
.card,.step,.ben{transition:background 200ms ease}

/* 3. Aparicion al hacer scroll: curva fuerte y dentro de presupuesto.
      El hero conserva su entrada original a proposito: se ve una vez por
      visita y ahi el teatro esta justificado. */
.reveal{transition:opacity 400ms cubic-bezier(.23,1,.32,1),transform 400ms cubic-bezier(.23,1,.32,1)}
.d1{transition-delay:.04s}.d2{transition-delay:.08s}.d3{transition-delay:.12s}.d4{transition-delay:.16s}
.hero .reveal{transition:opacity .7s ease,transform .7s ease}
.hero .d1{transition-delay:.08s}.hero .d2{transition-delay:.16s}
.hero .d3{transition-delay:.24s}.hero .d4{transition-delay:.32s}

/* 4. transition:.3s equivalia a transition:all */
.burger span{transition:transform 300ms cubic-bezier(.23,1,.32,1),opacity 200ms ease}

/* 5. Feedback de pulsacion perceptible */
.btn:active{transform:scale(.97)}

/* 6. Las cifras dejan de bailar de ancho mientras cuentan */
.stat .num{font-variant-numeric:tabular-nums}

/* 7. Menu movil: curva de cajon iOS, y cerrar mas rapido que abrir */
@media(max-width:760px){
  .nav-links{transition:transform 220ms cubic-bezier(.32,.72,0,1)}
  .menu-chk:checked ~ .nav-links{transition:transform 350ms cubic-bezier(.32,.72,0,1)}
}

/* 8. En tactil el :hover se dispara al tocar y se queda pegado */
@media (hover:none),(pointer:coarse){
  .card:hover::before,.step:hover::before,.ben:hover::before,
  .nav-links a:hover::after{transform:scaleX(0)}
  .card:hover{background:var(--black)}
  .light .card:hover{background:var(--white)}
  .step:hover{background:var(--black)}
  .ben:hover{background:var(--white)}
  .svc .card:hover .icon{color:var(--t-on-light)}
  .pill:hover{border-color:rgba(198,241,53,.35);background:transparent;color:var(--lime)}
}

/* 9. Reduced motion: se quita el movimiento, se conservan color y opacidad */
@media(prefers-reduced-motion:reduce){
  .card::before,.step::before,.ben::before,.nav-links a::after,
  .nav-links,.burger span{transition:none!important}
  .btn:active{transform:none}
}