/* static/sitio/sitio.css — landing. Paleta cálida propia; no comparte tokens con ui. */
:root {
  color-scheme: light;
  /* Paleta: único lugar con hex */
  --st-crema: #fbf6ee;          /* fondo de página */
  --st-arena: #f3e8d7;          /* bandas alternas, cabecera de página */
  --st-blanco: #ffffff;         /* tarjetas */
  --st-tinta: #2b2118;          /* texto y títulos */
  --st-tinta-suave: #5c4a3b;    /* bajadas, fechas, metadatos */
  --st-ladrillo: #a6401c;       /* enlaces, botón primario */
  --st-ladrillo-oscuro: #86331a;/* hover/activo; contorno de foco sobre claro */
  --st-dorado: #f2c230;         /* acento de marca; botón sobre oscuro; foco sobre oscuro */
  --st-dorado-claro: #fdf3d3;   /* etiqueta de fecha */
  --st-noche: #2e2119;          /* hero, botón Intranet */
  --st-noche-2: #3d2c20;        /* pie y banda final */
  --st-crema-oscura: #f1e6d4;   /* texto secundario sobre noche */
  --st-borde: #e4d5bf;          /* solo decorativo (1,34:1, no transmite información) */

  /* Semánticos */
  --st-fondo: var(--st-crema);
  --st-texto: var(--st-tinta);
  --st-texto-suave: var(--st-tinta-suave);
  --st-enlace: var(--st-ladrillo);
  --st-enlace-hover: var(--st-ladrillo-oscuro);
  --st-foco: var(--st-ladrillo-oscuro);
  --st-foco-oscuro: var(--st-dorado);
  --st-sombra: 0 1px 2px rgb(46 33 25 / .06), 0 6px 20px rgb(46 33 25 / .07);

  /* Tipografía del sistema */
  --st-fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --st-fs-chico: .9375rem;                                  /* 15px: fechas, pie */
  --st-fs-base: 1.0625rem;                                  /* 17px: cuerpo */
  --st-fs-h3: 1.25rem;
  --st-fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  --st-fs-h1: clamp(2.125rem, 1.4rem + 3.4vw, 3.5rem);      /* titulares grandes */
  --st-interlineado: 1.6;
  --st-interlineado-titulo: 1.12;

  /* Medidas */
  --st-ancho: 72rem;
  --st-ancho-texto: 42rem;     /* ~70 caracteres */
  --st-gutter: 1rem;           /* 16px en móvil */
  --st-radio: 14px;
  --st-radio-boton: 999px;
  --st-toque: 44px;            /* área táctil mínima */
}
@media (min-width: 40em) { :root { --st-gutter: 1.5rem; } }

/* Base */
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }

.st-body {
  margin: 0;
  background: var(--st-fondo);
  color: var(--st-texto);
  font: 400 var(--st-fs-base)/var(--st-interlineado) var(--st-fuente);
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

a {
  color: var(--st-enlace);
  text-decoration: underline;
  text-underline-offset: .18em;
}
a:hover { color: var(--st-enlace-hover); }

:focus-visible {
  outline: 3px solid var(--st-foco);
  outline-offset: 2px;
}
.st-hero :focus-visible,
.st-pie :focus-visible,
.st-banda :focus-visible {
  outline-color: var(--st-foco-oscuro);
}

.st-saltar {
  position: absolute;
  transform: translateY(-150%);
  background: var(--st-blanco);
  color: var(--st-texto);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--st-radio) 0;
  z-index: 10;
}
.st-saltar:focus {
  transform: translateY(0);
}

.st-contenedor {
  max-width: var(--st-ancho);
  margin-inline: auto;
  padding-inline: var(--st-gutter);
}

.st-principal { display: block; }

/* Cabecera */
.st-cabecera {
  background: var(--st-crema);
  border-bottom: 1px solid var(--st-borde);
}
.st-cabecera-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .75rem 1rem;
  padding-block: .75rem;
}
.st-nav {
  grid-column: 1 / -1;
}
@media (min-width: 64em) {
  .st-cabecera-fila {
    grid-template-columns: auto 1fr auto;
  }
  .st-nav {
    grid-column: auto;
  }
  .st-boton-intranet {
    order: 2;
  }
}

.st-nav-lista {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.st-nav-lista a {
  min-height: var(--st-toque);
  display: inline-flex;
  align-items: center;
  color: var(--st-texto);
  text-decoration: none;
}
.st-nav-lista a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--st-ladrillo);
  text-decoration-thickness: 3px;
}

.st-marca {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--st-texto);
  text-decoration: none;
  font-weight: 700;
}
.st-marca-texto { display: flex; flex-direction: column; }
.st-marca-texto small {
  display: block;
  font-size: var(--st-fs-chico);
  font-weight: 400;
  color: var(--st-texto-suave);
}

/* Botones */
.st-boton {
  display: inline-flex;
  align-items: center;
  min-height: var(--st-toque);
  padding: .625rem 1.25rem;
  border-radius: var(--st-radio-boton);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
}
.st-boton-primario {
  background: var(--st-ladrillo);
  color: var(--st-blanco);
}
.st-boton-primario:hover {
  background: var(--st-ladrillo-oscuro);
  color: var(--st-blanco);
}
.st-boton-acento {
  background: var(--st-dorado);
  color: var(--st-noche);
}
.st-boton-acento:hover {
  border-color: var(--st-crema);
  color: var(--st-noche);
}
.st-boton-claro {
  background: transparent;
  border-color: var(--st-crema);
  color: var(--st-crema);
}
.st-boton-claro:hover {
  background: var(--st-crema);
  color: var(--st-noche);
}
.st-boton-intranet {
  background: var(--st-noche);
  color: var(--st-crema);
}
.st-boton-intranet:hover {
  background: var(--st-ladrillo-oscuro);
  color: var(--st-blanco);
}

/* Hero */
.st-hero {
  background: var(--st-noche);
  color: var(--st-crema);
  padding-block: clamp(3rem, 8vw, 6rem);
}
.st-antetitulo {
  color: var(--st-dorado);
  font-weight: 700;
  font-size: var(--st-fs-chico);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .75rem;
}
.st-h1 {
  font-size: var(--st-fs-h1);
  line-height: var(--st-interlineado-titulo);
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: 18ch;
  margin: 0 0 1rem;
}
.st-bajada {
  color: var(--st-crema-oscura);
  max-width: var(--st-ancho-texto);
  font-size: 1.125rem;
  margin: 0 0 1.5rem;
}
.st-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Secciones */
.st-seccion { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.st-seccion-arena { background: var(--st-arena); }
.st-seccion h2,
.st-banda h2 {
  font-size: var(--st-fs-h2);
  font-weight: 800;
  color: var(--st-texto);
  margin: 0 0 1.5rem;
}
.st-banda h2 { color: var(--st-crema); }

/* Grilla y tarjetas */
.st-grilla {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 40em) {
  .st-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .st-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.st-grilla > * { min-width: 0; }

.st-tarjeta {
  background: var(--st-blanco);
  border: 1px solid var(--st-borde);
  border-radius: var(--st-radio);
  box-shadow: var(--st-sombra);
  padding: 1.5rem;
}
.st-tarjeta h3,
.st-tarjeta-titulo {
  font-size: var(--st-fs-h3);
  font-weight: 700;
  margin: 0 0 .5rem;
  overflow-wrap: break-word;
}
.st-tarjeta-titulo a,
.st-tarjeta h3 a {
  color: var(--st-texto);
  text-decoration: none;
}
.st-tarjeta-titulo a:hover,
.st-tarjeta h3 a:hover {
  color: var(--st-ladrillo);
}
.st-enlace-mas {
  display: inline-block;
  margin-top: .75rem;
  font-weight: 700;
}

.st-fecha {
  display: inline-block;
  background: var(--st-dorado-claro);
  color: var(--st-texto-suave);
  font-size: var(--st-fs-chico);
  font-weight: 600;
  padding: .125rem .625rem;
  border-radius: 999px;
}

.st-vacio { color: var(--st-texto-suave); }

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

/* Lista de noticias (listado paginado) */
.st-lista-noticias {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
@media (min-width: 40em) {
  .st-lista-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.st-lista-noticias > * { min-width: 0; }

.st-paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: var(--st-fs-chico);
}

/* Cabecera de página interior */
.st-cabecera-pagina {
  background: var(--st-arena);
  padding-block: 2.5rem;
}

/* Artículo y página */
.st-articulo,
.st-prosa { max-width: var(--st-ancho-texto); }
/* m6: la columna de lectura va centrada, no pegada al borde izquierdo. */
.st-articulo { margin-inline: auto; }
.st-prosa p { margin: 0 0 1em; }
.st-lead {
  font-size: 1.1875rem;
  color: var(--st-texto-suave);
}
.st-h1-pagina {
  font-size: var(--st-fs-h2);
  font-weight: 800;
  line-height: var(--st-interlineado-titulo);
  overflow-wrap: break-word;
  margin: .5rem 0 1rem;
}
.st-volver {
  display: inline-block;
  margin-bottom: 1rem;
}
.st-actualizado {
  color: var(--st-texto-suave);
  font-size: var(--st-fs-chico);
}

/* Banda final */
.st-banda {
  background: var(--st-noche-2);
  color: var(--st-crema);
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.st-banda p { color: var(--st-crema-oscura); }

/* Pie */
.st-pie {
  background: var(--st-noche-2);
  color: var(--st-crema);
  font-size: var(--st-fs-chico);
  padding-block: 2.5rem;
}
.st-pie a { color: var(--st-dorado); }
.st-pie-nombre { max-width: var(--st-ancho-texto); margin: 0 0 1rem; }
.st-pie-lista {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.st-pie-copyright { margin: 0; color: var(--st-crema-oscura); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none; scroll-behavior: auto; }
}