/* ============================================================
   IAFFR · SISTEMA DE DISEÑO · TOKENS
   Paleta derivada por muestreo del sello institucional real
   (img/logos (11).png): #C21E36 anillo, #A31718 cruz maltesa,
   #510F10 hachas, #EDEEF2 fondo.
   ============================================================ */

/* ---------- Tipografía autoalojada ---------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:100 900; font-stretch:62% 125%;
  font-display:swap; font-style:normal;
}
@font-face{font-family:'Plex';src:url('../fonts/plex-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url('../fonts/plex-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Plex';src:url('../fonts/plex-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'PlexMono';src:url('../fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  /* --- Color: muestreado de logosprincipal.png ---
     #002F67 azul institucional · #F60700 rojo operativo · #FFC32D oro */
  --navy:        #002F67;   /* azul institucional del logotipo */
  --navy-deep:   #001B3D;
  --carbon:      #070B12;   /* base de página, negro con tinte azul */
  --carbon-rise: #0E1526;   /* superficie elevada */
  --steel:       #22304A;
  --steel-line:  #24314A;   /* hairlines sobre oscuro */
  --smoke:       #7C88A0;   /* texto secundario sobre oscuro */
  --ash:         #AAB4C8;
  --bone:        #EDEEF2;
  --paper:       #F6F7FA;
  --paper-line:  #D9DEE8;   /* hairlines sobre claro */

  /* --- Acento único, BLOQUEADO en toda la obra ---
     --fire es el rojo de marca, para gráfica y filetes.
     --fire-ink es la versión para superficies interactivas:
     alcanza 5.5:1 contra blanco, --fire sólo llega a 4.25:1. */
  --fire:        #F60700;
  --fire-ink:    #D40600;
  --fire-hover:  #B70500;

  /* --- Señal funcional. Regla documentada: el oro aparece
         ÚNICAMENTE en la franja reflectiva, en la numeración
         del modelo educativo y en focus-visible. --- */
  --amber:       #FFC32D;

  /* --- Semántica --- */
  --bg:            var(--carbon);
  --bg-rise:       var(--carbon-rise);
  --text:          var(--bone);
  --text-dim:      var(--ash);
  --text-quiet:    var(--smoke);
  --line:          var(--steel-line);
  --accent:        var(--fire);
  --on-accent:     #FFFFFF;
  --seal-knockout: #FFFFFF;

  /* --- Radio: sistema BLOQUEADO ---
     Paneles y tarjetas: 0 (recto, institucional)
     Controles interactivos: 3px
     Nunca pastilla, nunca radios mixtos fuera de esta regla. */
  --r-panel: 0px;
  --r-ctl:   3px;

  /* --- Escala de espaciado (base 4) --- */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:8rem;

  /* --- Tipografía --- */
  --font-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Plex','Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'PlexMono',ui-monospace,'SFMono-Regular','Consolas',monospace;

  /* Escala fluida. clamp() evita saltos entre 360px y 1920px */
  --t-display: clamp(2.5rem, 1.4rem + 4.6vw, 5.25rem);
  --t-h1:      clamp(2rem,   1.3rem + 3.0vw, 3.5rem);
  --t-h2:      clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --t-h3:      clamp(1.15rem,1.02rem + .55vw, 1.5rem);
  --t-body:    clamp(1rem,   .97rem + .14vw, 1.0625rem);
  --t-small:   .875rem;
  --t-micro:   .75rem;

  --lh-tight:1.06; --lh-head:1.18; --lh-body:1.65;

  /* --- Capas. Escala documentada, sin z-index arbitrarios --- */
  --z-base:1; --z-sticky:100; --z-nav:200; --z-overlay:300; --z-modal:400;

  /* --- Movimiento. Curvas de catálogo, no aproximadas. --- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);      /* entradas y salidas */
  --ease-io:     cubic-bezier(0.77, 0, 0.175, 1);     /* desplazamiento en pantalla */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);      /* panel deslizante */
  --dur-press:120ms;   /* feedback de botón */
  --dur-1:120ms;
  --dur-2:180ms;
  --dur-3:260ms;       /* acordeón y menú: bajo el techo de 300ms */
  --dur-4:500ms;       /* revelado al scroll: registro explicativo */

  --maxw: 1280px;
  --gutter: clamp(1.25rem, .8rem + 2vw, 3rem);
}

/* El sitio está bloqueado en tema oscuro institucional.
   Las superficies claras son SECCIONES dentro del mismo tema,
   no una inversión de tema. */
.on-light{
  --bg:var(--paper); --bg-rise:#FFFFFF;
  --text:var(--carbon); --text-dim:#4A515D; --text-quiet:#6B7280;
  --line:var(--paper-line); --on-accent:#FFFFFF;
}

/* Movimiento reducido significa menos y más suave, no cero.
   Se conservan las transiciones de opacidad y color, que ayudan a
   comprender el cambio de estado; se elimina el desplazamiento. */
@media (prefers-reduced-motion:reduce){
  :root{--dur-press:0ms;--dur-4:200ms}
}