/* =====================
   RESET
   ===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =====================
   VARIABLES
   ===================== */
:root {
  --color-bg:       var(--k-dark);
  --color-bg-alt:   #F3F0EA;
  --color-text:     #F2F2F0;
  --color-text-alt: #0B0B0D;
  --color-accent:   var(--k-red);

  /* Paleta de Kodeval. Cambiar un color acá lo cambia en todo el sitio.
     Texto sobre --k-bg, --k-surface y --k-dark: contraste WCAG AAA (7:1).
     Las franjas de color (.tone-*) quedan en AA para el texto chico. */
  --k-dark:          #16171A;  /* grafito: fondos oscuros, nunca negro puro */
  --k-bg:            #DCDFE4;  /* piedra media: fondo claro */
  --k-surface:       #EEF0F2;  /* tarjetas y bloques sobre --k-bg */
  --k-border:        #C3C8CF;
  --k-hover:         #E4E7EB;
  --k-ink:           #1C1D21;  /* texto principal                12.6:1 */
  --k-text-2:        #30343B;  /* párrafos secundarios            9.4:1 */
  --k-muted:         #3B4048;  /* texto secundario                7.8:1 */
  --k-faint:         #3F444D;  /* fechas, notas, metadatos        7.3:1 */
  --k-red:           #8B0001;  /* rojo Kodeval: botones y rojo sobre claro */
  --k-red-hover:     #6E0001;
  --k-red-on-dark:   #F8A094;  /* rojo para texto sobre fondos oscuros */
  --k-on-dark:       #ECEDEF;  /* texto claro sobre oscuro */
  --k-on-dark-muted: rgba(236, 237, 239, 0.72);
  --k-focus-ring:    var(--k-ink); /* las zonas oscuras lo pasan a --k-on-dark */
}

/* =====================
   ACCESIBILIDAD
   ===================== */
/* El header fijo (y el selector de idioma de las legales) no tapa el
   elemento que recibe el foco ni el destino de un ancla (WCAG 2.4.12) */
html { scroll-padding-top: 88px; }

/* Foco visible, grueso y con contraste en todo el sitio (WCAG 2.4.13) */
:focus-visible {
  outline: 3px solid var(--k-focus-ring);
  outline-offset: 2px;
}

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Saltar al contenido": primer elemento al navegar con teclado (WCAG 2.4.1) */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 12px 18px;
  background: var(--k-on-dark);
  color: var(--k-ink);
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }
/* el destino del salto recibe el foco por código: no es un control */
#contenido:focus { outline: none; }

/* Con "reducir movimiento" no hay animaciones ni transiciones de
   movimiento, tampoco las que dispara el mouse (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================
   BODY
   ===================== */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding-top: 64px; /* altura del header */
}

/* =====================
   UTILIDADES
   ===================== */
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}