/* Colegio Forjadores — lo unico que comparten las tres direcciones.
 * Tokens, tipografia, reinicio y piso de accesibilidad. CERO layout:
 * si compartieran layout serian una sola propuesta con tres pieles.
 *
 * Los colores NO son inventados: salen medidos del escudo y de la rosa de los
 * vientos que el colegio ya usa (PNG oficiales del sitio actual).
 *   escudo azul medio    #175588
 *   escudo azul profundo #012F63
 *   rosa navy            #2B3F57
 *   rosa crema           #E9E4D5
 */

:root {
  /* --- marca, medidos --- */
  --azul-escudo:   #175588;
  --azul-profundo: #012F63;
  --navy:          #2B3F57;
  --crema:         #E9E4D5;

  /* --- derivados de trabajo --- */
  --tinta:      #0D1B2E;   /* texto sobre claro */
  --tinta-2:    #45566E;   /* texto secundario sobre claro */
  --papel:      #FFFFFF;
  --papel-2:    #F4F6F9;
  --linea:      #DCE3EC;
  --accion:     #0F4C8A;   /* boton primario sobre claro */
  --accion-alta:#0B3A6B;
  --dorado:     #A8823C;   /* del filo del escudo; acento, nunca texto chico */
  --alerta:     #8C2F1E;

  /* sobre oscuro */
  --sobre-oscuro:      #FFFFFF;
  --sobre-oscuro-2:    #C6D4E6;

  --radio:   10px;
  --radio-g: 18px;
  --sombra:  0 1px 2px rgba(13,27,46,.06), 0 8px 24px rgba(13,27,46,.07);
  --ancho:   1180px;

  --texto: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --titulo: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --palo: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

img, video, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

button, input, select { font: inherit; color: inherit; }

/* Piso de accesibilidad: foco visible siempre, en ambos fondos. */
:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Saltar al contenido: obligatorio, y visible al tabular. */
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--papel); color: var(--accion);
  padding: 10px 16px; border-radius: var(--radio); font-weight: 700;
  transition: top .15s ease;
}
.saltar:focus { top: 12px; }

/* Area tactil minima 44px en todo lo que se toca. */
a.boton, button, .toque { min-height: 44px; }

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

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