/* Tema Expo Navidad — tokens y capa común de las páginas públicas.
 *
 * Paleta tomada del dossier 2026: verde profundo de la franja, crema de las
 * láminas, dorado del logo y rojo de la cinta. Se carga al FINAL del <head>
 * de cada página para ganarle a los <style> heredados de GR sin tener que
 * reescribirlos: lo específico de cada página sigue viviendo en su archivo.
 */
:root {
  --expo-verde: #0F3D2B;
  --expo-verde-noche: #072217;
  --expo-verde-pino: #1B5E3F;
  --expo-verde-claro: #2E7D57;
  --expo-crema: #F7F1E3;
  --expo-crema-2: #EFE5CF;
  --expo-tinta: #173F2E;
  --expo-oro: #D9A93F;
  --expo-oro-claro: #F3D58A;
  --expo-oro-osc: #A87A1E;
  --expo-rojo: #B3161B;
  --expo-rojo-osc: #8E0F14;
  --expo-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --expo-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Fondo de noche navideña: verde profundo con un brillo cálido arriba y una
   trama muy tenue de nieve. Va en `html` para no pelear con los fondos que
   algunas páginas ponen en `body`. */
html { background: var(--expo-verde-noche); }
body.expo {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(217, 169, 63, 0.10), transparent 70%),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05) 0 1px, transparent 2px) 0 0 / 90px 90px,
    radial-gradient(circle at 70% 65%, rgba(255,255,255,0.04) 0 1px, transparent 2px) 0 0 / 130px 130px,
    linear-gradient(180deg, var(--expo-verde) 0%, var(--expo-verde-noche) 60%) fixed;
  background-color: var(--expo-verde-noche);
}
/* Páginas claras (la portada): crema del dossier en vez de la noche verde. */
body.expo.expo-claro { background: var(--expo-crema); }

/* Titulares grandes con la serif del dossier. Los rótulos chicos, botones y
   menús siguen en Oswald: es angosta y los layouts heredados cuentan con eso. */
body.expo h1,
body.expo h2 {
  font-family: var(--expo-serif);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Rótulo tipo dossier: mayúsculas chicas con una raya dorada debajo. */
.expo-rotulo {
  display: inline-block;
  font-family: var(--expo-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.expo-rotulo::after {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 12px;
  background: var(--expo-oro);
}

/* Foco visible y coherente en todo el sitio. */
body.expo a:focus-visible,
body.expo button:focus-visible,
body.expo input:focus-visible,
body.expo select:focus-visible {
  outline: 2px solid var(--expo-oro-claro);
  outline-offset: 2px;
}

::selection { background: var(--expo-oro); color: var(--expo-verde-noche); }