/* ==========================================================================
   ALLIANCE — Sistema de diseño «Intelligence in Motion»
   --------------------------------------------------------------------------
   Evoluciona el sistema suizo publicado. Reglas que no se rompen:
     1. UN ACENTO, y aparece en un solo elemento por pantalla.
     2. Grafito con sesgo frío, nunca negro plano: el #000 se ve barato.
     3. La profundidad se hace con capas y luz, no con sombras difusas.
     4. El movimiento sirve al contenido. Si se nota a sí mismo, sobra.
     5. Todo respeta prefers-reduced-motion, sin excepción.
   ========================================================================== */

/* ------------------------------------------------------------- tipografía */
@font-face{font-family:'Instrument Serif';src:url('../assets/fonts/InstrumentSerif-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('../assets/fonts/InstrumentSerif-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../assets/fonts/InstrumentSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../assets/fonts/InstrumentSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('../assets/fonts/GeistMono-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------ tokens */
:root{
  /* Grafito con sesgo frío */
  --grafito-900:#0B0C0E;
  --grafito-800:#121417;
  --grafito-700:#1A1D21;
  --grafito-600:#24282E;
  --grafito-500:#343941;

  --niebla-400:#8A9099;   /* 4.9:1 sobre 900 — terciario */
  --niebla-200:#C6CAD1;   /* 11.2:1 — secundario */
  --niebla-050:#F2F4F7;   /* 16.8:1 — principal */

  --rojo:#E2231A;         /* único acento, exacto de marca */
  --rojo-alto:#FF4136;    /* texto rojo pequeño sobre oscuro: 5.6:1 */

  --fondo:var(--grafito-900);
  --texto:var(--niebla-050);
  --texto-2:var(--niebla-200);
  --texto-3:var(--niebla-400);
  --linea:rgba(255,255,255,.10);
  --linea-fuerte:rgba(255,255,255,.22);

  /* Tipografía */
  --display:'Instrument Serif',ui-serif,Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,Consolas,monospace;

  /* Tope a 6rem: por encima, en portátiles de 900px de alto los CTA se salen
     del pliegue y el héroe pierde su función. */
  --t-hero:clamp(2.75rem,6.1vw,6rem);
  --t-h2:clamp(2.25rem,4.6vw,4.25rem);
  --t-h3:clamp(1.25rem,1.8vw,1.6rem);
  --t-lead:clamp(1.0625rem,1.5vw,1.35rem);
  --t-cuerpo:1.0625rem;
  --t-peq:.9375rem;
  --t-micro:.75rem;

  /* Espacio: unidad 8, escala abierta */
  --e-1:8px;  --e-2:16px; --e-3:24px; --e-4:32px;
  --e-5:48px; --e-6:64px; --e-7:96px; --e-8:128px; --e-9:160px;

  --canal:clamp(20px,5vw,80px);
  --max:1440px;
  --cols:12;
  --gap:clamp(16px,2vw,32px);

  /* Movimiento */
  --ms:220ms; --ms-lento:420ms;
  --curva:cubic-bezier(.22,.61,.36,1);

  --z-fondo:0; --z-lienzo:1; --z-contenido:2; --z-nav:100;
}

/* -------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--sans);font-size:var(--t-cuerpo);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,li,a{overflow-wrap:break-word}

:focus-visible{outline:2px solid var(--rojo-alto);outline-offset:4px}
::selection{background:var(--rojo);color:#fff}

.saltar{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--rojo);color:#fff;padding:14px 24px;font-weight:700}
.saltar:focus{left:0}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ layout */
.env{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--canal)}
.seccion{padding-block:clamp(72px,11vw,var(--e-9));position:relative}
.rejilla{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap)}

/* Antetítulo: filete + versalitas. El rojo aquí es el único de la sección. */
.rotulo{
  display:inline-flex;align-items:center;gap:var(--e-2);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.22em;
  text-transform:uppercase;color:var(--rojo-alto);
}
.rotulo::before{content:"";width:40px;height:1px;background:currentColor}

.titulo{font-family:var(--display);font-weight:400;font-size:var(--t-h2);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.titulo em{font-style:italic;color:var(--texto-2)}
.lead{font-size:var(--t-lead);color:var(--texto-2);max-width:58ch;text-wrap:pretty}

/* ----------------------------------------------------------------- botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  min-height:56px;padding:16px var(--e-5);max-width:100%;
  font-family:var(--sans);font-size:var(--t-peq);font-weight:700;letter-spacing:.02em;
  border:1px solid transparent;text-align:center;
  transition:background-color var(--ms) var(--curva),color var(--ms) var(--curva),border-color var(--ms) var(--curva);
}
.btn svg{width:16px;height:16px;transition:transform var(--ms) var(--curva)}
.btn:hover svg{transform:translateX(5px)}
.btn--acento{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.btn--acento:hover{background:#c31c14;border-color:#c31c14}
.btn--linea{border-color:var(--linea-fuerte);color:var(--texto)}
.btn--linea:hover{background:var(--niebla-050);color:var(--grafito-900);border-color:var(--niebla-050)}

/* --------------------------------------------------------------- navegación */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  padding-block:var(--e-3);border-bottom:1px solid transparent;
  transition:background-color var(--ms) var(--curva),padding var(--ms) var(--curva),border-color var(--ms) var(--curva);
}
.nav.compacta{background:rgba(11,12,14,.86);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--linea);padding-block:12px}
.nav__fila{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4)}
.nav__logo img{height:44px;width:auto;transition:height var(--ms) var(--curva)}
.nav.compacta .nav__logo img{height:36px}
.nav__menu{display:flex;align-items:center;gap:var(--e-4)}
.nav__link{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--t-peq);color:var(--texto-2);transition:color 140ms var(--curva);
}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:8px;height:1px;background:var(--rojo);transition:right var(--ms) var(--curva)}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--texto)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{right:0}
.nav__cta{margin-left:var(--e-2);min-height:44px;padding:10px var(--e-3)}
.nav__hamb{display:none;flex-direction:column;gap:5px;width:48px;height:48px;align-items:center;justify-content:center}
.nav__hamb span{width:24px;height:1.5px;background:var(--texto);transition:transform var(--ms) var(--curva),opacity 140ms}
.nav__hamb.abierta span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__hamb.abierta span:nth-child(2){opacity:0}
.nav__hamb.abierta span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* --------------------------------------------------------------------- pie */
.pie{border-top:1px solid var(--linea);padding-block:var(--e-7) var(--e-4);background:var(--grafito-800)}
.pie__rejilla{display:grid;grid-template-columns:4fr 2fr 2fr 3fr;gap:var(--e-5) var(--gap)}
.pie h3{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--texto-3);margin-bottom:var(--e-3)}
.pie a{display:inline-flex;align-items:center;min-height:40px;font-size:var(--t-peq);color:var(--texto-2);transition:color 140ms var(--curva)}
.pie a:hover{color:var(--rojo-alto)}
.pie__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e-2);margin-top:var(--e-6);padding-top:var(--e-3);border-top:1px solid var(--linea);font-family:var(--mono);font-size:var(--t-micro);color:var(--texto-3)}

/* --------------------------------------------------- revelado por scroll */
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.visible{opacity:1;transform:none;transition:opacity var(--ms-lento) var(--curva),transform var(--ms-lento) var(--curva)}

/* ------------------------------------------------------------- responsive */
@media(max-width:1024px){
  :root{--cols:6}
  .pie__rejilla{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .nav__hamb{display:flex}
  .nav__menu{
    position:fixed;inset:0 0 0 auto;width:min(88%,380px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--e-3);
    padding:96px var(--e-5);background:var(--grafito-800);border-left:1px solid var(--linea);
    transform:translateX(100%);transition:transform var(--ms-lento) var(--curva);
  }
  .nav__menu.abierto{transform:none}
  .nav__link{font-size:1.15rem}
}
@media(max-width:560px){
  :root{--cols:4}
  .pie__rejilla{grid-template-columns:1fr}
  .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1!important;transform:none!important}
}