: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,.35);
    --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,.hero .lead{text-shadow:0 2px 24px rgba(0,0,0,.6)}
  .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:.25s;
    text-shadow:0 0 6px rgba(198,241,53,.55),0 0 16px rgba(198,241,53,.35);
    box-shadow:0 0 10px rgba(198,241,53,.12),inset 0 0 8px rgba(198,241,53,.05)}
  .pill:hover{border-color:var(--lime);color:#eaffae;
    text-shadow:0 0 8px rgba(198,241,53,.85),0 0 22px rgba(198,241,53,.6);
    box-shadow:0 0 18px rgba(198,241,53,.3),inset 0 0 10px rgba(198,241,53,.1)}
  @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;
  }
}