/* ==========================================================================
   tokens.css — fuente única de verdad del sistema visual.
   Lo cargan index.html y las tres páginas legales. No dupliques estos
   valores en ningún otro sitio. El porqué de cada decisión está en design.md.
   ========================================================================== */

/* --- Tipografía autoalojada -----------------------------------------------
   Inter variable (400-800) en un solo archivo por subconjunto. Autoalojada
   a propósito: el CDN de Google transfiere la IP del visitante fuera del EEE
   y añade dos conexiones a la ruta crítica. Licencia SIL OFL en fonts/LICENSE.txt
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
                U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Color: un solo acento, --blue-700. Ver design.md §2 */
  --blue-900:#003566;
  --blue-700:#0171BB;
  --blue-500:#2C95E0;
  --blue-300:#7CC0EE;
  --blue-100:#BFE0F5;
  --blue-50:#E8F2FB;

  --ink:#0A1830;      /* 17,7:1 sobre blanco */
  --ink-2:#34425C;    /* 10,1:1 */
  --ink-3:#566378;    /*  6,1:1 sobre blanco · 5,7:1 sobre --bg-soft · 4,7:1 en el punto
                          más saturado del hero, que es el peor fondo del sitio */
  --ink-inverse:#06182B;

  --line:#E4E9F0;
  --bg:#FFFFFF;
  --bg-soft:#F5F8FB;
  --bg-warm:#FBF9F5;

  /* Sombras tintadas al azul de marca, nunca negro puro */
  --shadow-sm:0 1px 2px rgba(10,24,48,.04), 0 2px 8px rgba(10,24,48,.04);
  --shadow-md:0 4px 12px rgba(10,24,48,.06), 0 12px 32px rgba(10,24,48,.06);
  --shadow-lg:0 24px 64px rgba(1,113,187,.18);

  /* Forma: el radio crece con el tamaño del contenedor. Sin valores sueltos */
  --radius-sm:10px;    /* campos, iconos, chips, elementos pequeños */
  --radius:14px;       /* tarjetas, imágenes */
  --radius-lg:24px;    /* bloques grandes: formulario, banner, CTA */
  --radius-pill:99px;  /* botones y etiquetas */
  --radius-round:50%;  /* círculos: avatares y puntos */

  /* Espaciado base 4 */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-14:56px; --space-18:72px; --space-24:96px;

  --container:1240px;
  --pad:clamp(20px,4vw,40px);
  --font-sans:'Inter','Trebuchet MS',system-ui,-apple-system,sans-serif;

  /* Movimiento. Las curvas nativas de CSS son flojas: solo se usan estas tres.
     ease-in está prohibido en UI (arranca lento justo cuando se mira). Ver design.md §5 */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);       /* algo entra o sale. Por defecto */
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);   /* algo se mueve o transforma */
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);    /* panel del menú móvil */

  --dur-press:160ms;   /* pulsación */
  --dur-hover:180ms;   /* borde, fondo, color */
  --dur-enter:300ms;   /* entrada por scroll */
  --dur-drawer:280ms;  /* panel lateral */
}

/* --- Base compartida ------------------------------------------------------ */
*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:88px}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}

/* Foco visible y consistente en todo el sitio. Ver design.md §7 */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--blue-700);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* Reduced motion REDUCE, no anula. Se conservan los fundidos de opacidad y color,
   que ayudan a entender qué ha cambiado; se eliminan desplazamientos, escalados y
   cualquier animación en bucle. Ver design.md §5 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  /* Fuera toda animación en bucle (el isotipo del hero). */
  *,*::before,*::after{animation:none !important}

  /* Ningún elemento se desplaza ni se escala al interactuar. Se recorta la
     PROPIEDAD, no el transform en sí: hay transforms que colocan cosas
     (el panel del menú vive en translateX(100%)) y anularlos rompería el layout. */
  *,*::before,*::after{
    transition-property:opacity,background-color,border-color,color,box-shadow,fill !important;
  }
  .btn:hover,.btn:active,.cta-big:hover,.btn:hover .arrow{transform:none !important}

  /* La entrada por scroll se queda en un fundido, sin desplazamiento. */
  .fade-in{transform:none !important}
}