/*
 * Hoja de estilos editorial compartida por los portales.
 *
 * Cada portal define su paleta en :root mediante la clase de tema del body.
 * El objetivo visual es un archivo documental: tipografía legible, mucho aire,
 * tablas que se leen como una obra de referencia y cero ruido publicitario.
 */

:root {
  --tipo-titular: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --tipo-texto: "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --tipo-interfaz: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tipo-mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --fondo: #fbfaf7;
  --fondo-alt: #f3f1eb;
  --fondo-hondo: #14161c;
  --texto: #1b1c20;
  --texto-suave: #55565d;
  --texto-tenue: #7c7d85;
  --linea: #ddd9cf;
  --linea-fuerte: #c3bdae;
  --acento: #8a1c1c;
  --acento-suave: #f2e3e0;
  --dorado: #a4822c;

  --ancho: 1180px;
  --ancho-texto: 44rem;
  --radio: 3px;
  --sombra: 0 1px 2px rgba(20, 22, 28, .06), 0 8px 24px rgba(20, 22, 28, .05);
}

body.tema-motor {
  --fondo: #f7f7f8;
  --fondo-alt: #edeef0;
  --fondo-hondo: #101216;
  --linea: #d8dade;
  --linea-fuerte: #b6b9c0;
  --acento: #b4331d;
  --acento-suave: #f6e5e1;
  --dorado: #8b8f98;
}

/* --- Reinicio ------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--tipo-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration-color: var(--linea-fuerte); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--acento); }

h1, h2, h3, h4 { font-family: var(--tipo-titular); font-weight: 600; line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

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

.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--texto); color: #fff; padding: .75rem 1.25rem;
}
.salto-contenido:focus { left: 0; }

/* --- Cabecera ------------------------------------------------------------ */

.cabecera { background: var(--fondo); border-bottom: 1px solid var(--linea); }

.cabecera-interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: 1.4rem 0 1.1rem; flex-wrap: wrap;
}
/* El logotipo es un lockup: lleva el nombre y el lema dibujados dentro, así que
   ocupa el sitio de los dos. Altura fija y ancho automático, para que la
   cabecera no cambie de tamaño al acabar de cargar la imagen. */
.marca { text-decoration: none; display: block; }
.marca-logo { display: block; height: 78px; width: auto; max-width: 100%; }

.buscador-cabecera { display: flex; flex: 1 1 22rem; max-width: 34rem; }
.buscador-cabecera input {
  flex: 1; font-family: var(--tipo-interfaz); font-size: .95rem;
  padding: .7rem .9rem; border: 1px solid var(--linea-fuerte);
  border-right: 0; border-radius: var(--radio) 0 0 var(--radio);
  background: #fff; color: var(--texto); min-width: 0;
}
.buscador-cabecera input:focus { outline: 2px solid var(--acento); outline-offset: -2px; }
.buscador-cabecera button {
  font-family: var(--tipo-interfaz); font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; padding: .7rem 1.2rem; border: 1px solid var(--texto);
  background: var(--texto); color: var(--fondo); cursor: pointer;
  border-radius: 0 var(--radio) var(--radio) 0;
}
.buscador-cabecera button:hover { background: var(--acento); border-color: var(--acento); }

.navegacion { border-top: 1px solid var(--linea); background: var(--fondo-alt); }
.navegacion ul {
  display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: .7rem 0;
  overflow-x: auto; scrollbar-width: none;
}
.navegacion ul::-webkit-scrollbar { display: none; }
.navegacion a {
  font-family: var(--tipo-interfaz); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--texto-suave); white-space: nowrap;
}
.navegacion a:hover { color: var(--acento); }

/* El interruptor del menú sólo existe en pantalla estrecha. En ancha, el botón
   desaparece y la lista se ve entera.

   La casilla nunca lleva display:none: así no podría recibir el foco y el menú
   sería inalcanzable con el teclado. Se saca de la vista sin sacarla del flujo. */
.navegacion-interruptor {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip-path: inset(50%); overflow: hidden;
}
.navegacion-boton { display: none; }

@media (max-width: 55rem) {
  /* Antes la lista se desbordaba con la barra de scroll oculta: en un móvil se
     veían dos entradas y nada indicaba que hubiera siete más. */
  .navegacion-boton {
    display: flex; align-items: center; gap: .6rem; cursor: pointer;
    padding: .85rem 0; font-family: var(--tipo-interfaz); font-size: .8rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave);
    user-select: none;
  }
  .navegacion-icono {
    position: relative; display: block; width: 20px; height: 2px;
    background: currentColor; transition: background .15s;
  }
  .navegacion-icono::before,
  .navegacion-icono::after {
    content: ""; position: absolute; left: 0; width: 20px; height: 2px;
    background: currentColor; transition: transform .15s;
  }
  .navegacion-icono::before { top: -6px; }
  .navegacion-icono::after  { top: 6px; }

  /* Abierto: las tres rayas se convierten en aspa. */
  .navegacion-interruptor:checked ~ .navegacion-boton .navegacion-icono { background: transparent; }
  .navegacion-interruptor:checked ~ .navegacion-boton .navegacion-icono::before { transform: translateY(6px) rotate(45deg); }
  .navegacion-interruptor:checked ~ .navegacion-boton .navegacion-icono::after  { transform: translateY(-6px) rotate(-45deg); }

  .navegacion ul {
    display: none; flex-direction: column; gap: 0; padding: 0 0 .6rem;
    overflow: visible;
  }
  .navegacion-interruptor:checked ~ ul { display: flex; }
  .navegacion li + li { border-top: 1px solid var(--linea); }
  .navegacion ul a { display: block; padding: .8rem .2rem; font-size: .82rem; }

  /* El foco por teclado tiene que verse: el interruptor está oculto. */
  .navegacion-interruptor:focus-visible ~ .navegacion-boton {
    outline: 2px solid var(--acento); outline-offset: 3px;
  }
}

.migas { border-bottom: 1px solid var(--linea); background: var(--fondo); }
.migas ol {
  display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0;
  padding: .6rem 0; font-family: var(--tipo-interfaz); font-size: .78rem; color: var(--texto-tenue);
}
.migas li + li::before { content: "/"; margin-right: .5rem; color: var(--linea-fuerte); }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--acento); text-decoration: underline; }

/* --- Estructura de página ------------------------------------------------ */

.contenido { padding: 2.5rem 0 4rem; }

.seccion { margin-bottom: 3.5rem; }
.seccion-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; border-bottom: 2px solid var(--texto); padding-bottom: .5rem; margin-bottom: 1.5rem;
}
.seccion-cabecera h2 { margin: 0; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .04em; }
.seccion-cabecera a {
  font-family: var(--tipo-interfaz); font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; color: var(--texto-suave); white-space: nowrap;
}
.seccion-cabecera a:hover { color: var(--acento); }

.rejilla { display: grid; gap: 1.75rem; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/* --- Portada -------------------------------------------------------------- */

.destacado {
  display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start; padding-bottom: 2.5rem; margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--linea);
}
.destacado-principal h1 { margin-bottom: .4rem; }
.destacado-principal .entradilla { font-size: 1.15rem; color: var(--texto-suave); }
.destacado-lateral { border-left: 1px solid var(--linea); padding-left: 2rem; }

@media (max-width: 60rem) {
  .destacado { grid-template-columns: 1fr; }
  .destacado-lateral { border-left: 0; padding-left: 0; border-top: 1px solid var(--linea); padding-top: 1.5rem; }
}

.etiqueta {
  display: inline-block; font-family: var(--tipo-interfaz); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acento);
  margin-bottom: .6rem; font-weight: 600;
}

/* --- Tarjetas ------------------------------------------------------------- */

.tarjeta { display: block; text-decoration: none; }
.tarjeta h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.tarjeta:hover h3 { color: var(--acento); }
.tarjeta p { font-size: .95rem; color: var(--texto-suave); margin-bottom: .4rem; }
.tarjeta-meta {
  font-family: var(--tipo-interfaz); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-tenue);
}

.ficha-enlace {
  display: block; text-decoration: none; padding: .9rem 1rem;
  border: 1px solid var(--linea); border-radius: var(--radio); background: #fff;
  transition: border-color .15s ease, transform .15s ease;
}
.ficha-enlace:hover { border-color: var(--acento); transform: translateY(-1px); }
.ficha-enlace .nombre { display: block; font-family: var(--tipo-titular); font-size: 1.05rem; }
.ficha-enlace .detalle {
  display: block; font-family: var(--tipo-interfaz); font-size: .74rem;
  color: var(--texto-tenue); margin-top: .15rem;
}

.lista-limpia { list-style: none; margin: 0; padding: 0; }
.lista-limpia li { padding: .65rem 0; border-bottom: 1px solid var(--linea); }
.lista-limpia li:last-child { border-bottom: 0; }
.lista-limpia a { text-decoration: none; }
.lista-limpia a:hover { color: var(--acento); }

.decadas { display: flex; flex-wrap: wrap; gap: .5rem; }
.decadas a {
  font-family: var(--tipo-interfaz); font-size: .85rem; text-decoration: none;
  padding: .45rem .85rem; border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: #fff;
}
.decadas a:hover { border-color: var(--acento); color: var(--acento); }

/* --- Artículo ------------------------------------------------------------- */

.articulo { max-width: var(--ancho-texto); margin-inline: auto; }
.articulo-cabecera { margin-bottom: 2rem; }
.articulo-cabecera h1 { margin-bottom: .5rem; }
.articulo-entradilla { font-size: 1.18rem; color: var(--texto-suave); margin-bottom: 1rem; }
.articulo-firma {
  font-family: var(--tipo-interfaz); font-size: .78rem; letter-spacing: .05em;
  color: var(--texto-tenue); border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea); padding: .6rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem;
}

.articulo-cuerpo > * { margin-bottom: 1.35rem; }
.articulo-cuerpo h2 { margin-top: 2.4rem; }
.articulo-cuerpo h3 { margin-top: 1.8rem; }
.articulo-cuerpo p { font-size: 1.09rem; }

.cita { margin: 2rem 0; padding-left: 1.25rem; border-left: 3px solid var(--acento); }
.cita blockquote { margin: 0; font-family: var(--tipo-titular); font-size: 1.25rem; font-style: italic; }
.cita figcaption { font-family: var(--tipo-interfaz); font-size: .8rem; color: var(--texto-tenue); margin-top: .5rem; }

.imagen { margin: 2rem 0; }
.imagen img { width: 100%; border-radius: var(--radio); }
.imagen figcaption { font-family: var(--tipo-interfaz); font-size: .8rem; color: var(--texto-tenue); margin-top: .5rem; }
.imagen .credito { color: var(--linea-fuerte); }

.lista { padding-left: 1.3rem; }
.lista li { margin-bottom: .45rem; }

.aviso {
  border: 1px solid var(--linea-fuerte); border-left: 4px solid var(--dorado);
  background: var(--fondo-alt); padding: 1rem 1.25rem; border-radius: var(--radio);
}
.aviso h3 { font-size: 1rem; margin-bottom: .35rem; }
.aviso p { margin: 0; font-size: .98rem; }
.aviso-warning { border-left-color: var(--acento); }
.aviso-data { border-left-color: var(--texto); }

.dato {
  display: grid; gap: .1rem; border-top: 2px solid var(--texto);
  padding-top: .75rem; margin: 2rem 0;
}
.dato-valor { font-family: var(--tipo-titular); font-size: 2.4rem; line-height: 1; }
.dato-unidad { font-size: 1.1rem; color: var(--texto-suave); }
.dato-etiqueta {
  font-family: var(--tipo-interfaz); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-suave);
}
.dato-contexto { font-size: .92rem; color: var(--texto-tenue); }

.cronologia { list-style: none; margin: 2rem 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--linea); }
.cronologia li { position: relative; padding: 0 0 1.4rem 1rem; }
.cronologia li::before {
  content: ""; position: absolute; left: -1.5rem; top: .55rem;
  width: 9px; height: 9px; background: var(--acento); border-radius: 50%;
  transform: translateX(-4px);
}
.cronologia-fecha {
  display: block; font-family: var(--tipo-interfaz); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue);
}
.cronologia-titulo { display: block; font-family: var(--tipo-titular); font-size: 1.08rem; }
.cronologia-texto { display: block; font-size: .95rem; color: var(--texto-suave); }

.entidad-relacionada { margin: 2rem 0; }
.entidad-relacionada a {
  display: block; text-decoration: none; border: 1px solid var(--linea);
  border-left: 4px solid var(--dorado); padding: .9rem 1.1rem;
  background: #fff; border-radius: var(--radio);
}
.entidad-relacionada a:hover { border-color: var(--acento); border-left-color: var(--acento); }
.entidad-tipo {
  display: block; font-family: var(--tipo-interfaz); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue);
}
.entidad-nombre { display: block; font-family: var(--tipo-titular); font-size: 1.1rem; }
.entidad-resumen { display: block; font-size: .92rem; color: var(--texto-suave); margin-top: .2rem; }

/* --- Tablas de datos ------------------------------------------------------ */

.tabla-envoltorio { margin: 2rem 0; }
.tabla-titulo {
  font-family: var(--tipo-interfaz); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-suave); margin-bottom: .5rem;
}
.tabla-scroll { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
.tabla { width: 100%; border-collapse: collapse; font-family: var(--tipo-interfaz); font-size: .9rem; }
.tabla th, .tabla td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--linea); }
.tabla thead th {
  background: var(--fondo-alt); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-suave); position: sticky; top: 0;
}
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--fondo-alt); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-nota { font-size: .82rem; color: var(--texto-tenue); margin-top: .5rem; }

.sin-dato { color: var(--texto-tenue); font-style: italic; }

/* --- Fuentes -------------------------------------------------------------- */

.fuentes { margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid var(--texto); }
.fuentes h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; }
.fuentes ol { font-family: var(--tipo-interfaz); font-size: .88rem; padding-left: 1.3rem; }
.fuentes li { margin-bottom: .5rem; }
.fuente-meta { color: var(--texto-tenue); }
.fuentes-nota { font-size: .9rem; color: var(--texto-suave); }

/* --- Afiliación ----------------------------------------------------------- */

.afiliacion {
  margin: 2rem 0; padding: 1rem 1.25rem; border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio); background: var(--fondo-alt);
}
.afiliacion a { font-family: var(--tipo-interfaz); font-weight: 600; }
.afiliacion-nota {
  display: block; font-family: var(--tipo-interfaz); font-size: .72rem;
  color: var(--texto-tenue); margin-top: .35rem;
}
.afiliacion-bloque ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.afiliacion-bloque li { margin-bottom: .4rem; }

/* --- Buscador y resultados ------------------------------------------------ */

.buscador-principal { background: var(--fondo-hondo); color: #f5f4ef; padding: 3rem 0; margin-bottom: 3rem; }
.buscador-principal h1 { color: #fff; margin-bottom: .35rem; }
.buscador-principal p { color: #b9b7ae; margin-bottom: 1.5rem; }
.buscador-principal form { display: flex; max-width: 40rem; }
.buscador-principal input {
  flex: 1; font-family: var(--tipo-interfaz); font-size: 1.05rem; padding: .9rem 1.1rem;
  border: 0; border-radius: var(--radio) 0 0 var(--radio); min-width: 0;
}
.buscador-principal button {
  font-family: var(--tipo-interfaz); font-size: .85rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .9rem 1.6rem; border: 0; cursor: pointer;
  background: var(--acento); color: #fff; border-radius: 0 var(--radio) var(--radio) 0;
}
.ejemplos-busqueda {
  margin-top: 1rem; font-family: var(--tipo-interfaz); font-size: .82rem; color: #9b9992;
  display: flex; gap: .75rem; flex-wrap: wrap;
}
.ejemplos-busqueda a { color: #e4e1d7; text-decoration: none; border-bottom: 1px dotted #6d6b64; }
.ejemplos-busqueda a:hover { color: #fff; border-color: #fff; }

.resultado { padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.resultado h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.resultado a { text-decoration: none; }
.resultado a:hover { color: var(--acento); }
.resultado .ruta { font-family: var(--tipo-mono); font-size: .76rem; color: var(--texto-tenue); }

/* --- Paginación ----------------------------------------------------------- */

.paginacion {
  display: flex; gap: .5rem; justify-content: center; align-items: center;
  margin-top: 2.5rem; font-family: var(--tipo-interfaz); font-size: .85rem;
}
.paginacion a, .paginacion span {
  padding: .5rem .9rem; border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio); text-decoration: none; background: #fff;
}
.paginacion .actual { background: var(--texto); color: var(--fondo); border-color: var(--texto); }

/* --- Efemérides ----------------------------------------------------------- */

.efemeride { padding: 1.1rem 0; border-bottom: 1px solid var(--linea); display: grid; gap: .3rem; }
.efemeride-anio { font-family: var(--tipo-titular); font-size: 1.5rem; color: var(--acento); }
.efemeride h3 { margin: 0; font-size: 1.08rem; }
.efemeride .tipo {
  font-family: var(--tipo-interfaz); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texto-tenue);
}
.aniversario { background: var(--acento-suave); border-left: 4px solid var(--acento); padding-left: 1rem; }

/* --- Pie ------------------------------------------------------------------ */

.pie { background: var(--fondo-hondo); color: #c8c6bf; margin-top: 4rem; padding: 3rem 0 1.5rem; }
.pie-interior { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 2fr) 1fr 1fr; }
.pie-titulo { color: #fff; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .06em; }
.pie h3 {
  color: #fff; font-family: var(--tipo-interfaz); font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.pie ul { list-style: none; margin: 0; padding: 0; font-family: var(--tipo-interfaz); font-size: .88rem; }
.pie li { margin-bottom: .4rem; }
.pie a { text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie-nota { font-size: .88rem; color: #8f8d87; }
.pie-legal {
  border-top: 1px solid #2a2d35; margin-top: 2.5rem; padding-top: 1.25rem;
  font-family: var(--tipo-interfaz); font-size: .76rem; color: #7e7c77;
}
.pie-afiliacion { color: #6e6c68; }

@media (max-width: 55rem) {
  .pie-interior { grid-template-columns: 1fr; }
}

/* --- Ficha de entidad ----------------------------------------------------- */

.ficha-cabecera { border-bottom: 2px solid var(--texto); padding-bottom: 1.25rem; margin-bottom: 2rem; }
.ficha-cabecera h1 { margin-bottom: .25rem; }
.ficha-subtitulo { font-family: var(--tipo-interfaz); font-size: .85rem; color: var(--texto-suave); }

.datos-clave {
  display: grid; gap: 1px; background: var(--linea);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border: 1px solid var(--linea); margin-bottom: 2.5rem;
}
.datos-clave div { background: #fff; padding: .9rem 1rem; }
.datos-clave dt {
  font-family: var(--tipo-interfaz); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-tenue); margin-bottom: .2rem;
}
.datos-clave dd { margin: 0; font-family: var(--tipo-titular); font-size: 1.15rem; }

.ficha-columnas { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 60rem) { .ficha-columnas { grid-template-columns: 1fr; } }

.aviso-cobertura {
  font-family: var(--tipo-interfaz); font-size: .84rem; color: var(--texto-suave);
  background: var(--fondo-alt); border: 1px solid var(--linea);
  padding: .8rem 1rem; border-radius: var(--radio); margin-bottom: 1.5rem;
}

/* --- Anuncios ------------------------------------------------------------- */

.anuncio { margin: 2.5rem 0; text-align: center; min-height: 0; }
.anuncio-etiqueta {
  display: block; font-family: var(--tipo-interfaz); font-size: .65rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texto-tenue); margin-bottom: .4rem;
}

/* --- Impresión ------------------------------------------------------------ */

@media print {
  .cabecera, .navegacion, .pie, .afiliacion, .anuncio, .buscador-cabecera { display: none; }
  body { background: #fff; font-size: 11pt; }
  .articulo { max-width: none; }
}

/* --- Emblemas de entidad --------------------------------------------------
   Las fichas y los listados llevan una imagen. Cuando no hay fotografía con
   licencia se sirve un emblema vectorial generado a partir de los propios
   datos de la entidad, así que conviene que respire y no compita con el
   titular. */

.ficha-cabecera.con-emblema {
  display: flex; align-items: flex-start; gap: 1.5rem;
}
.ficha-cabecera-texto { min-width: 0; flex: 1; }

/* El emblema generado es cuadrado, pero una fotografía real casi nunca lo es:
   se recorta al centro en vez de deformarla. */
.ficha-emblema {
  flex: 0 0 auto; width: 108px; height: 108px; border-radius: 10px;
  display: block; background: var(--fondo-suave, #f4f2ee);
  object-fit: cover; object-position: center;
}

.ficha-figura { margin: 0; flex: 0 0 auto; }
.ficha-figura figcaption {
  font-family: var(--tipo-interfaz); font-size: .66rem;
  color: var(--texto-tenue); margin-top: .35rem; max-width: 108px; line-height: 1.3;
}

.ficha-enlace.con-miniatura {
  display: grid; grid-template-columns: 48px 1fr; column-gap: .75rem;
  align-items: center;
}
.ficha-enlace.con-miniatura .miniatura { grid-row: 1 / span 2; }
.ficha-enlace.con-miniatura .nombre { align-self: end; }
.ficha-enlace.con-miniatura .detalle { align-self: start; }

.miniatura {
  width: 48px; height: 48px; border-radius: 8px; display: block;
  object-fit: cover; object-position: center;
}

/* En una tabla el emblema acompaña al nombre en la misma línea: sirve para
   reconocer la ficha de un vistazo sin robarle sitio a las columnas. */
.celda-con-miniatura { display: flex; align-items: center; gap: .5rem; }
.miniatura-fila {
  width: 26px; height: 26px; border-radius: 5px; display: block; flex: 0 0 auto;
  object-fit: cover; object-position: center;
}

@media (max-width: 560px) {
  .ficha-cabecera.con-emblema { gap: 1rem; }
  .ficha-emblema { width: 72px; height: 72px; }
  .ficha-figura figcaption { max-width: 72px; }
}

/* --- Imagen de cabecera de artículo ---------------------------------------
   Los artículos llevan una composición propia, generada a partir del titular y
   de las entidades de las que hablan. Es apaisada porque es la proporción que
   piden las tarjetas sociales, y se sustituye por una fotografía con licencia
   sin tocar la plantilla. */

.articulo-portada { margin: 0 0 2rem; }
.articulo-portada img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radio); border: 1px solid var(--linea);
}

.tarjeta-portada {
  width: 100%; height: auto; display: block; margin-bottom: .85rem;
  border-radius: calc(var(--radio) - 2px);
  aspect-ratio: 1200 / 630; object-fit: cover;
}

/* --- Calendario de efemérides ---------------------------------------------
   Doce bloques, uno por mes, con una casilla por día. El color dice cuánto hay
   documentado: gris es un hueco, y se ve como tal a propósito. */

.calendario {
  display: grid; gap: 1.5rem 1.25rem; margin: 1.75rem 0;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.calendario-mes h2 {
  font-size: .95rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-tenue); margin: 0 0 .55rem;
}
.calendario-dias {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.calendario-dia {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 5px; text-decoration: none;
  font-family: var(--tipo-interfaz); font-size: .74rem; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--acento) 26%, transparent);
  color: var(--texto); border: 1px solid transparent;
}
.calendario-dia.lleno { background: color-mix(in srgb, var(--acento) 62%, transparent); }
.calendario-dia.vacio {
  background: color-mix(in srgb, var(--texto-tenue) 12%, transparent);
  color: var(--texto-tenue);
}
.calendario-dia:hover { border-color: var(--acento); }
.calendario-dia.hoy { outline: 2px solid var(--acento); outline-offset: 1px; font-weight: 700; }

@media (max-width: 420px) {
  .calendario { grid-template-columns: 1fr; }
}

/* Enlace al origen de la imagen, al final del artículo. Deliberadamente
   discreto: debajo de la foto no va nada, y esto no debe competir con el texto. */
.nota-imagenes {
  font-family: var(--tipo-interfaz); font-size: .7rem;
  color: var(--texto-tenue); margin-top: 2rem;
}
.nota-imagenes a { color: inherit; }

/* --- Cifras del archivo, en el pie ------------------------------------------
   No es un adorno de portada: dice cuánto hay y, sobre todo, cuánto de eso está
   documentado de verdad. Un archivo se juzga por su cobertura. */

.pie-cifras {
  border-top: 1px solid var(--borde-tenue, rgba(255,255,255,.12));
  padding-top: 1.4rem; margin-top: 1.4rem;
}
.pie-cifras h3 {
  font-family: var(--tipo-interfaz); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .09em; margin: 0 0 .9rem; opacity: .7;
}
.pie-cifras dl {
  display: grid; gap: 1rem 1.5rem; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.pie-cifras dt {
  font-family: var(--tipo-interfaz); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .07em; opacity: .6;
}
.pie-cifras dd { margin: .15rem 0 0; }
.pie-cifras dd strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pie-cifra-detalle { font-size: .72rem; opacity: .55; line-height: 1.3; }

/* --- Pantallas estrechas ---------------------------------------------------
   Repaso hecho con los dos portales ya llenos de contenido. Lo que fallaba de
   verdad era el menú, que vive más arriba; aquí quedan los ajustes de la
   cabecera y de las piezas que aprietan por debajo de 30rem. */

@media (max-width: 40rem) {
  /* La marca y el buscador dejan de competir por la misma línea. */
  .cabecera-interior {
    flex-direction: column; align-items: stretch; gap: 1rem;
    padding: 1.1rem 0 .9rem;
  }
  /* El lockup es apaisado: en un móvil hay que bajarle la altura o se come
     media pantalla. */
  .marca-logo { height: 52px; }

  /* 22rem de base no caben en un móvil: el buscador ocupa su propia línea. */
  .buscador-cabecera { flex: 1 1 auto; max-width: none; }
  .buscador-cabecera input { font-size: 16px; } /* menos de 16px hace que iOS haga zoom al enfocar */

  .ficha-cabecera.con-emblema { gap: 1rem; }
  .datos-clave { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
  .datos-clave div { padding: .7rem .8rem; }
  .datos-clave dd { font-size: 1rem; }

  /* Las tarjetas de listado se apilan: dos columnas dejan el nombre en tres
     líneas y no se lee nada. */
  .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }

  .pie-cifras dl { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .pie-cifras dd strong { font-size: 1.25rem; }
}

@media (max-width: 30rem) {
  .rejilla-2 { grid-template-columns: 1fr; }
  .calendario { grid-template-columns: 1fr; }
}

/* Un escudo o un logotipo se encaja entero, nunca se recorta: recortarlo para
   llenar el cuadro lo deja en un fragmento —el de la FIFA, que es apaisado, se
   quedaba en dos letras—. Las fotografías sí se recortan, que es lo que quieren. */
.ficha-emblema.es-escudo,
.miniatura.es-escudo,
.miniatura-fila.es-escudo {
  object-fit: contain;
  background: transparent;
}

/* Un dato deducido de otro no es un dato documentado. Se marca discreto pero
   visible: quien lee tiene derecho a saber cuál de las dos cosas está leyendo. */
.dato-inferido {
  display: inline-block; margin-left: .4rem; padding: .05rem .35rem;
  font-family: var(--tipo-interfaz); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-tenue);
  border: 1px solid var(--linea-fuerte); border-radius: 3px; vertical-align: middle;
}