/* ═══════════════════════════════════════════════════════════════════════════
   Mérida Country Club — hoja de estilo única.
   Las media queries van TODAS al final del archivo: a igual especificidad gana
   la última regla, y estar dentro de una media query no da prioridad.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fuentes propias. Se sirven desde el propio dominio: en Venezuela una
      llamada extra a fonts.gstatic.com se paga en segundos de espera. ───── */
@font-face {
  font-family: "Marcellus";
  src: url("../fuentes/marcellus-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Marcellus";
  src: url("../fuentes/marcellus-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: "Archivo";
  src: url("../fuentes/archivo-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
  font-family: "Archivo";
  src: url("../fuentes/archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB;
}

/* ── Sistema ──────────────────────────────────────────────────────────────── */
:root {
  /* Paleta de la PWA del asociado (Gestor de Apariencia → Tema App), para que la
     web pública y la aplicación se vean de la misma familia.
       primario #019DF4 · secundario #0B2739 · fondo #F8FAFC · texto #0F172A
     --accion es ese mismo azul oscurecido: sobre #019DF4 el texto blanco se
     queda en 2,6:1 y no se lee; sobre #0179C4 sube a 4,6:1. */
  --hondo: #0B2739;
  --hondo-2: #123449;
  --hondo-3: #1D4763;
  --nieve: #F8FAFC;
  --nieve-2: #E9EFF5;
  --grafito: #0F172A;
  --grafito-suave: #475569;
  /* El primario es el azul CLARO. Rinde 7,5:1 sobre el marino y 8,7:1 con
     texto oscuro encima, así que manda en los botones y en todo lo que se
     pinta sobre fondo oscuro. Lo que no puede es ser texto sobre blanco: ahí
     se queda en 2,0:1. Para eso está --marca, más abajo. */
  /* Azul rey. Sustituye al celeste #5FBEF8 que vestía la barra, la cabecera,
     las franjas y el pie. Es #2440B5 y no el azul rey de manual (#4169E1)
     porque ese, con texto blanco encima, se queda en 4,63:1 y el texto pequeño
     del pie y de la barra se lee mal; este rinde 8,11:1 y sigue siendo un azul
     rey vivo, no un marino.
     --azul-rgb existe porque la cabecera va translúcida sobre el contenido y
     necesita el color por canales. Antes ese valor estaba escrito a mano y se
     quedó desincronizado del resto. */
  --azul: #2440B5;
  --azul-rgb: 36 64 181;
  --azul-medio: #019DF4;   /* el primario de la PWA; sirve de estado hover */
  /* 4,74:1 sobre el fondo nieve. Antes era #0179C4, que se quedaba en 4,43 y
     no llegaba al minimo de 4,5 para texto pequeno: fallaban la miga «Inicio»
     de todas las paginas interiores, las etiquetas de las noticias y el tipo
     de los libros de la biblioteca. Son cinco puntos mas oscuro, no se nota
     al lado del anterior, y deja de incumplir. */
  --accion: #0174BD;
  --accion-oscura: #015E9B;

  /* Colores heráldicos del escudo. No son tema: son el contenido de la sección
     "Qué dice el escudo", donde cada muestra tiene que enseñar su color real. */
  --gules-heraldico: #C4161C;
  --sable-heraldico: #0A0908;
  --oro-heraldico: #C8962A;
  --cielo-heraldico: #7CC5E8;

  /* Estados. El rojo sobrevive al cambio de paleta porque avisa, no decora. */
  --error: #C4161C;
  --error-oscuro: #9E1116;
  --exito: #1F6A3C;

  --fuente-titulo: "Marcellus", "Palatino Linotype", Georgia, serif;
  --fuente-texto: "Archivo", "Segoe UI", system-ui, sans-serif;

  /* Escala modular fluida, razón 1,33 */
  --t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.83rem);
  --t-s: clamp(0.88rem, 0.84rem + 0.2vw, 0.97rem);
  --t-m: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --t-l: clamp(1.33rem, 1.2rem + 0.6vw, 1.6rem);
  --t-xl: clamp(1.77rem, 1.5rem + 1.3vw, 2.5rem);
  --t-2xl: clamp(2.36rem, 1.8rem + 2.8vw, 4rem);
  --t-3xl: clamp(3.1rem, 2rem + 5.5vw, 6.5rem);

  --espacio-seccion: clamp(3rem, 1.8rem + 5.5vw, 6.5rem);
  --ancho: 76rem;

  /* Radios: el tema de la App fija 1,5rem para los botones y el resto se
     escala a partir de ahí. */
  --radio-boton: 1.5rem;
  --radio-tarjeta: 1.25rem;
  --radio-campo: 0.85rem;
  --radio-chico: 0.6rem;
  --radio: var(--radio-chico);
  --borde-fino: 1px solid rgba(15, 23, 42, 0.12);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nieve);
  color: var(--grafito);
  font-family: var(--fuente-texto);
  font-size: var(--t-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
}

p { margin: 0 0 1em; }

cite { font-style: italic; }

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

/* --marca es «el color con el que se resalta sobre ESTE fondo». Ninguno vale
   para todo el sitio, que ahora tiene tres clases de superficie:

     fondo nieve  -> --accion  (el azul oscurecido, 4,4:1)
     fondo azul   -> --hondo   (el marino, 8,7:1)
     sobre foto   -> --azul    (el claro, 7,5:1 contra el velo marino)

   La usan los acentos —líneas, bordes, antetítulos, el mes de la cartelera— y
   también el anillo de foco, que es el mismo problema con otro nombre: hace
   falta 3:1 contra el fondo, y 4,5:1 cuando además es texto. */
/* --tinta es «el color del texto sobre ESTA superficie», hermana de --marca.
   Las variantes «--claro» se escribieron cuando las franjas eran marinas; al
   pasar a azul claro, el blanco se quedó en 1,97:1 en 31 sitios de la portada.
   En vez de ir corrigiendo clase por clase, el color lo decide la superficie. */
:root { --tinta: var(--grafito); --tinta-suave: var(--grafito-suave); }
/* Con el azul rey, estas cuatro superficies pasan a ser oscuras: la tinta que
   antes era marina ahora tiene que ser nieve, o no se lee nada encima. */
.barra-servicio,
.cabecera,
.franja--azul,
.pie { --tinta: var(--nieve); --tinta-suave: rgba(248, 250, 252, 0.80); }
/* La portada sigue siendo oscura: ahí la tinta es la nieve. */
.portada { --tinta: var(--nieve); --tinta-suave: rgba(248, 250, 252, 0.82); }

:root { --marca: var(--accion); --contra: var(--nieve); }
/* Sobre el azul rey, quien resalta es el blanco: un botón marino encima casi no
   se despega del fondo. El botón queda nieve con el texto en azul rey. */
.barra-servicio,
.cabecera,
.franja--azul,
.pie { --marca: var(--nieve); --contra: var(--azul); }
/* La portada va sobre fotos con un velo oscuro, así que el botón también es
   claro; antes era el celeste, que con el azul rey dejaría el texto marino
   encima de un fondo oscuro y no se leería. */
.portada { --marca: var(--nieve); --contra: var(--hondo); }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: var(--radio);
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accion);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radio-campo) 0;
  z-index: 100;
}
.salto-contenido:focus {
  left: 0;
}

/* ── Barra utilitaria ─────────────────────────────────────────────────────── */
.barra-servicio {
  background: var(--azul);
  color: rgba(248, 250, 252, 0.82);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
}
.barra-servicio__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  flex-wrap: wrap;
}
.barra-servicio__lugar { margin: 0; }
.barra-servicio__acciones {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.enlace-discreto {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.enlace-discreto:hover { color: var(--azul); border-bottom-color: var(--azul); }
.enlace-discreto:active { color: var(--azul); }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(var(--azul-rgb) / 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(11, 39, 57, 0.22);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.7rem;
}
.marca {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--tinta);
}
.marca__escudo { width: 3.25rem; height: 3.25rem; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca__nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--t-l);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.marca__desde {
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.menu__lista {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu__lista a {
  color: var(--tinta);
  text-decoration: none;
  font-size: var(--t-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-block: 0.35rem;
  position: relative;
}
.menu__lista a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.menu__lista a:hover { color: #fff; }
.menu__lista a:hover::after { transform: scaleX(1); }
.menu__lista a:active { color: var(--azul); }

.menu-boton {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: 1px solid rgba(1, 157, 244, 0.5);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--t-s);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radio-boton);
  cursor: pointer;
}
.menu-boton:hover { border-color: var(--azul); background: rgba(1, 157, 244, 0.12); }
.menu-boton__barras,
.menu-boton__barras::before,
.menu-boton__barras::after {
  display: block;
  width: 1.1rem;
  height: 1.5px;
  background: currentColor;
  content: "";
}
.menu-boton__barras { position: relative; }
.menu-boton__barras::before { position: absolute; top: -5px; }
.menu-boton__barras::after { position: absolute; top: 5px; }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--fuente-texto);
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.8rem;
  border: 1px solid transparent;
  border-radius: var(--radio-boton);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.12s ease;
}
.boton--pequeno { padding: 0.5rem 1.1rem; font-size: var(--t-xs); }

.boton--accion { background: var(--accion); color: #fff; }
.boton--accion:hover { background: var(--accion-oscura); }
.boton--accion:active { transform: translateY(1px); }

.boton--azul { background: var(--marca); color: var(--contra); }
.boton--azul:hover { filter: brightness(1.18); }
.boton--azul:active { transform: translateY(1px); }

.boton--contorno {
  border-color: rgba(248, 250, 252, 0.5);
  color: var(--nieve);
  background: rgba(11, 39, 57, 0.25);
}
.boton--contorno:hover { border-color: var(--nieve); background: rgba(248, 250, 252, 0.12); }

.boton--contorno-claro { border-color: rgba(248, 250, 252, 0.45); color: var(--nieve); }
.boton--contorno-claro:hover { border-color: var(--azul); color: var(--azul); }

.boton[disabled],
.boton[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.enlace-subrayado {
  color: inherit;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--marca);
  text-decoration-thickness: 2px;
}
.enlace-subrayado:hover { color: var(--accion-oscura); text-decoration-color: var(--accion-oscura); }

/* ── Portada ──────────────────────────────────────────────────────────────── */
.portada {
  position: relative;
  min-height: min(88vh, 46rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--hondo);
  color: var(--nieve);
  padding-block: clamp(4rem, 10vw, 8rem) clamp(2rem, 5vw, 4rem);
  isolation: isolate;
}

/* El mosaico. --columnas y --filas las escribe el guion, no se fijan aquí:
   salen de dividir el hueco real entre --pieza, que es el lado que se busca
   para cada azulejo. Antes eran 5×3 fijas —una columna por pico del escudo—
   pero el alto de la portada cambia con la ventana, así que en un escritorio
   ancho las piezas salían apaisadas y en el teléfono alargadas. Un mosaico se
   reconoce por ser cuadrado; el guiño al escudo no lo veía nadie. */
.mosaico {
  --pieza: 240px;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--columnas, 5), 1fr);
  grid-template-rows: repeat(var(--filas, 3), 1fr);
  z-index: -2;
  background: var(--hondo);
}
.mosaico__celda {
  position: relative;
  overflow: hidden;
  background: var(--hondo);
}
/* La retícula solo se ve mientras el mosaico se arma: es lo que hace que se
   lean piezas colocándose y no una foto encendiéndose. Vive siempre aquí, en
   opacidad 0, para que al quitar la clase se desvanezca en vez de cortarse. */
.mosaico__celda::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(248, 250, 252, 0.13);
  opacity: 0;
  transition: opacity 0.55s ease;
}
.mosaico--entrando .mosaico__celda::after { opacity: 1; }
.mosaico__capa {
  position: absolute;
  inset: -1px;
  filter: saturate(1.08) brightness(1.06);
  background-size: calc(var(--columnas, 5) * 100%) calc(var(--filas, 3) * 100%);
  background-position: var(--px) var(--py);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.9s ease, transform 1.4s ease;
}
.mosaico__capa--visible { opacity: 1; transform: scale(1); }

/* Al armarse, cada celda es una ficha que gira sobre su eje vertical hasta
   quedar de frente. Parte de 90° justos: ahí la ficha mide cero de ancho, así
   que no hay dorso que enseñar ni costura que tapar, y por eso tampoco hace
   falta backface-visibility.
   La perspectiva va en la propia celda y no en el mosaico: puesta en el padre,
   las fichas de los extremos se proyectarían muy torcidas —cada una a una
   distancia distinta del punto de fuga— y el barrido se vería desigual. */
.mosaico--entrando .mosaico__celda {
  /* Perspectiva corta (600 px para un azulejo de ~240) y la pieza llegando
     desde el fondo: con 900 px y sin translateZ el giro se notaba plano,
     casi una persiana. Cuanto menor es la distancia al punto de fuga, más se
     abre el trapecio y más se lee el volumen. */
  transform: perspective(600px) translateZ(-120px) rotateY(-90deg);
  /* Sin transición AQUÍ, y esto no es un olvido: ponerla en el estado de
     partida hacía que colocarse de canto fuese ya una animación de 0° a −90°.
     Al añadir después la clase de llegada, el destino cambiaba a 0° con la
     celda todavía en 0°, y la transición acababa yendo de 0° a 0°: las fichas
     aparecían en vez de girar. La transición vive solo en la llegada. */
  transition: none;
}
.mosaico--entrando .mosaico__celda--puesta {
  transform: perspective(600px) translateZ(0) rotateY(0deg);
  /* 0,78 s y no 0,72: el recorrido ahora es más largo (gira y además se
     acerca), y con la duración de antes se veía atropellado. */
  transition: transform 0.78s cubic-bezier(0.22, 0.72, 0.3, 1);
}
/* Mientras gira, la foto se descubre sola. La escala que había aquí se retira:
   con el giro puesto, dos gestos a la vez en la misma pieza se estorban. */
.mosaico--entrando .mosaico__capa {
  transform: none;
  transition: opacity 0.5s linear;
}

/* Sin JS: una sola foto, completa y quieta. La misma que recibe con JS, para
   que la portada no cambie de cara según el navegador. */
.mosaico--estatico {
  display: block;
  background: var(--hondo) url("../img/hero-sede.jpg") center/cover no-repeat;
}

.portada__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(11, 39, 57, 0.88) 0%, rgba(11, 39, 57, 0.45) 38%,
                    rgba(11, 39, 57, 0.14) 72%, rgba(11, 39, 57, 0.04) 100%),
    linear-gradient(100deg, rgba(11, 39, 57, 0.72) 0%, rgba(11, 39, 57, 0.44) 30%,
                    rgba(11, 39, 57, 0.14) 58%, rgba(11, 39, 57, 0) 80%);
}

.portada__contenido { max-width: 46rem; }

/* ── El texto entra detrás del mosaico ────────────────────────────────────
   Escalonado en el mismo orden en que se lee: antetítulo, titular, párrafo,
   botones y al final la línea del pie. Cuelga de .con-js (ver base.html): sin
   JavaScript nada de esto se aplica y el texto está ahí desde el principio. */
.con-js .portada__contenido > *,
.con-js .portada__pie {
  opacity: 0;
  transform: translateY(0.85rem);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 0.72, 0.3, 1);
}
.con-js .portada__contenido > *:nth-child(2) { transition-delay: 90ms; }
.con-js .portada__contenido > *:nth-child(3) { transition-delay: 180ms; }
.con-js .portada__contenido > *:nth-child(4) { transition-delay: 270ms; }
.con-js .portada__pie { transition-delay: 360ms; }

.portada--texto .portada__contenido > *,
.portada--texto .portada__pie { opacity: 1; transform: none; }
.portada__antetitulo {
  text-shadow: 0 1px 3px rgba(11, 39, 57, 0.9), 0 2px 16px rgba(11, 39, 57, 0.8);
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--nieve);
  margin-bottom: 1.1rem;
  /* Esta línea cae en el 13% superior del héroe, donde el velo vale 0,04-0,14
     a propósito para que se vea la foto. Medido sobre las fotos reales del
     club, el blanco se quedaba ahí entre 1,2:1 y 1,8:1 y no se leía —ni con la
     sombra—. Oscurecer el velo entero sería deshacer justo lo que se pidió, así
     que el respaldo va solo detrás del texto: una línea corta no tapa nada.
     Con 0,80 de marino sube a 4,6:1 en el peor caso medido.
     El inline-block es necesario: sin él la caja ocuparía todo el ancho de la
     columna y el fondo se vería como una banda hasta el borde. */
  display: inline-block;
  background: rgba(11, 39, 57, 0.8);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radio-boton);
}
.portada__titulo {
  text-shadow: 0 2px 22px rgba(11, 39, 57, 0.5);
  font-size: var(--t-3xl);
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
  text-wrap: balance;
}
.portada__entrada {
  text-shadow: 0 1px 12px rgba(11, 39, 57, 0.6);
  font-size: var(--t-l);
  line-height: 1.55;      /* texto claro sobre fondo oscuro: más aire */
  color: rgba(248, 250, 252, 0.9);
  max-width: 38rem;
}
.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}
.portada__pie {
  position: relative;
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  padding-left: 1.25rem;
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
  font-size: var(--t-xs);
  /* Sin mayúsculas: son 65 caracteres, y eso ya es una frase, no una etiqueta.
     En versales y con 0,18em de espaciado se leía letra a letra. El tracking
     se queda, más suave, que es lo que le daba el aire de pie de portada. */
  letter-spacing: 0.08em;
  color: rgba(248, 250, 252, 0.72);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.portada__pie-marca {
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  background: var(--marca);
}

/* ── Franjas ──────────────────────────────────────────────────────────────── */
.franja { padding-block: var(--espacio-seccion); }
.franja--sin-tope { padding-top: 0; }
.franja--clara { background: var(--nieve); }
/* La franja ya no es marina: el azul claro es el fondo y el marino, dentro,
   pasa a ser el color con el que se resalta. Es la combinación que mejor
   rinde del sitio: 8,68:1. */
.franja--azul { background: var(--azul); color: var(--nieve); }

.titulo-seccion {
  font-size: var(--t-2xl);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.titulo-seccion--claro { color: var(--tinta); }

.parrafo-guia {
  font-size: var(--t-l);
  line-height: 1.5;
  color: var(--grafito-suave);
  max-width: 34rem;
}
.parrafo-guia--ancho { max-width: 44rem; margin-bottom: 2.5rem; }
.parrafo-guia--claro { color: var(--tinta-suave); line-height: 1.6; }

.parrafo { max-width: 34rem; }

.nota-pie {
  margin-top: 2rem;
  font-size: var(--t-xs);
  color: var(--grafito-suave);
  border-left: 2px solid var(--marca);
  padding-left: 0.9rem;
  max-width: 34rem;
}
.nota-pie--claro { color: rgba(248, 250, 252, 0.65); }

/* ── El club ──────────────────────────────────────────────────────────────── */
.rejilla-club {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.datos {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.datos__par {
  background: var(--nieve-2);
  border: var(--borde-fino);
  border-radius: var(--radio-tarjeta);
  padding: 1.4rem 1.2rem;
}
.datos dt {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafito-suave);
  margin-bottom: 0.4rem;
}
.datos dd { margin: 0; display: flex; flex-direction: column; }
.datos dd strong {
  font-family: var(--fuente-titulo);
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1;
  color: var(--accion);
}
.datos dd span { font-size: var(--t-xs); color: var(--grafito-suave); }

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */
.tarjetas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}
.tarjeta {
  background: var(--nieve-2);
  border: var(--borde-fino);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}
.tarjeta__imagen { aspect-ratio: 4 / 3; overflow: hidden; background: var(--hondo-3); }
.tarjeta__imagen img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.tarjeta:hover .tarjeta__imagen img { transform: scale(1.05); }
.tarjeta__cuerpo { padding: 1.3rem 1.3rem 1.6rem; }
.tarjeta__cuerpo h3 { font-size: var(--t-l); margin-bottom: 0.4rem; }
.tarjeta__cuerpo p { font-size: var(--t-s); color: var(--grafito-suave); margin: 0; }

/* ── El escudo ────────────────────────────────────────────────────────────── */
.rejilla-escudo {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.rejilla-escudo__pieza { margin: 0; text-align: center; }
.rejilla-escudo__pieza img {
  width: min(100%, 24rem);
  margin-inline: auto;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5));
}
.rejilla-escudo__pieza figcaption {
  margin-top: 1.5rem;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  max-width: 24rem;
  margin-inline: auto;
}

.blasón { list-style: none; margin: 2rem 0 0; padding: 0; }
.blasón__pieza {
  display: flex;
  gap: 1.1rem;
  padding-block: 1.15rem;
  border-top: 1px solid rgba(248, 250, 252, 0.14);
}
.blasón__pieza:last-child { border-bottom: 1px solid rgba(248, 250, 252, 0.14); }
.blasón__pieza h3 {
  font-size: var(--t-l);
  color: var(--tinta);
  margin-bottom: 0.25rem;
}
.blasón__pieza p {
  margin: 0;
  font-size: var(--t-s);
  color: var(--tinta-suave);
}
.blasón__muestra {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0.3rem;
  border: 1px solid rgba(248, 250, 252, 0.25);
  border-radius: var(--radio-chico);
}
.blasón__muestra--gules { background: var(--gules-heraldico); }
.blasón__muestra--sable { background: var(--sable-heraldico); }
.blasón__muestra--oro { background: var(--oro-heraldico); }
.blasón__muestra--cruz {
  background:
    linear-gradient(var(--gules-heraldico), var(--gules-heraldico)) center / 34% 100% no-repeat,
    linear-gradient(var(--gules-heraldico), var(--gules-heraldico)) center / 100% 34% no-repeat,
    var(--hondo-2);
}

/* ── Cronología ───────────────────────────────────────────────────────────── */
.cronologia { list-style: none; margin: 0; padding: 0; counter-reset: hito; }
.cronologia__hito {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: 2.5rem;
  border-top: var(--borde-fino);
}
.cronologia__hito:last-child { border-bottom: var(--borde-fino); }
.cronologia__ano {
  font-family: var(--fuente-titulo);
  font-size: var(--t-xl);
  color: var(--accion);
  margin: 0;
  line-height: 1;
  position: sticky;
  top: 6rem;
  align-self: start;
}
.cronologia__cuerpo h3 { font-size: var(--t-l); margin-bottom: 0.6rem; }
.cronologia__cuerpo p { max-width: 38rem; }
.cronologia__figura { margin: 1.75rem 0 0; max-width: 34rem; }
.cronologia__figura img {
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: var(--radio-tarjeta);
  background: #fff;
}
.cronologia__figura figcaption {
  margin-top: 0.7rem;
  font-size: var(--t-xs);
  color: var(--grafito-suave);
}

/* ── La tierra, antes del club ─────────────────────────────────────────────
   Deliberadamente distinta de la cronología: aquello es la historia del club,
   con años exactos sacados de las actas; esto son capas de propiedad de un
   terreno, algunas de siglos. Si se vieran iguales, el visitante leería los
   «1628» y los «1938» como si fueran lo mismo. Por eso van en rejilla de
   tarjetas y no en línea de tiempo, y el dato temporal va arriba y pequeño. */
.tierra { margin-block: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 3vw, 2rem); }
.tierra__titulo {
  font-size: var(--t-xl);
  margin-bottom: 0.7rem;
}
.estratos {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
.estrato {
  background: var(--nieve);
  border: var(--borde-fino);
  border-radius: var(--radio-tarjeta);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.estrato__cuando {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* --accion se queda en 4,43:1 y esto es texto pequeño, que pide 4,5. */
  color: var(--accion-oscura);
  margin: 0 0 0.45rem;
}
.estrato h4 {
  font-family: var(--fuente-titulo);
  font-size: var(--t-l);
  font-weight: 400;
  margin: 0 0 0.5rem;
}
.estrato p { margin: 0; font-size: var(--t-s); }

/* ── Eventos ──────────────────────────────────────────────────────────────── */
.rejilla-eventos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.cartel-vacio {
  border: 1px dashed rgba(15, 23, 42, 0.3);
  border-radius: var(--radio-tarjeta);
  background: var(--nieve-2);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.cartel-vacio h3 { font-size: var(--t-l); margin-bottom: 0.6rem; }
.cartel-vacio p { color: var(--grafito-suave); font-size: var(--t-s); }

/* ── Asociados ───────────────────────────────────────────────────────────────── */
.rejilla-asociados {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.lista-marcada { list-style: none; margin: 0; padding: 0; }
.lista-marcada li {
  position: relative;
  padding: 0.9rem 0 0.9rem 2.2rem;
  border-bottom: 1px solid rgba(248, 250, 252, 0.14);
  color: var(--tinta-suave);
  font-size: var(--t-s);
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 1.1rem;
  height: 1px;
  background: var(--marca);
}

/* ── Contacto ─────────────────────────────────────────────────────────────── */
.rejilla-contacto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.ficha { margin: 1.5rem 0 0; }
.ficha dt {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafito-suave);
  margin-top: 1.2rem;
}
.ficha dd { margin: 0.2rem 0 0; }
.por-definir {
  color: var(--grafito-suave);
  font-style: italic;
  border-bottom: 1px dotted var(--grafito-suave);
}

.formulario {
  border: var(--borde-fino);
  border-radius: var(--radio-tarjeta);
  background: var(--nieve-2);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.formulario h3 { font-size: var(--t-l); margin-bottom: 1.25rem; }
.campo { margin-bottom: 1.1rem; }
.campo label {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafito-suave);
  margin-bottom: 0.4rem;
}
.campo input,
.campo textarea {
  width: 100%;
  font-family: var(--fuente-texto);
  font-size: var(--t-m);
  color: var(--grafito);
  background: var(--nieve);
  border: 1px solid rgba(15, 23, 42, 0.25);
  border-radius: var(--radio-campo);
  padding: 0.8rem 1rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.campo input:hover,
.campo textarea:hover { border-color: rgba(15, 23, 42, 0.45); }
.campo input:focus,
.campo textarea:focus {
  /* El borde es lo que identifica el estado, así que sigue a --marca como el
     anillo de los botones: --azul se quedaba en 2,80:1 contra el relleno del
     campo y 2,39:1 contra el fondo de alrededor, y WCAG 2.2 (1.4.11) pide
     3:1. Con el azul oscurecido sube a 4,43:1. La sombra solo refuerza; si el
     navegador no entiende color-mix se queda sin ella y el borde aguanta. */
  border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 24%, transparent);
  outline: none;
}
.campo--error input,
.campo--error textarea { border-color: var(--error); }
/* Un campo en error que recibe el foco tiene que decir las dos cosas: que está
   mal y que es donde estás escribiendo. El borde rojo es idéntico con foco y
   sin él —esta regla va después de :focus y gana—, así que sin el halo el
   campo no señala nada justo cuando el usuario va a corregirlo. El halo va en
   rojo, no en el azul del foco, para no dar dos mensajes a la vez. */
.campo--error input:focus,
.campo--error textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 30%, transparent);
}
.campo__error {
  margin: 0.35rem 0 0;
  font-size: var(--t-xs);
  color: var(--error-oscuro);
}
.formulario__aviso {
  margin: 1rem 0 0;
  font-size: var(--t-s);
  min-height: 1.5em;
}
.formulario__aviso[data-estado="ok"] { color: var(--exito); }
.formulario__aviso[data-estado="error"] { color: var(--error-oscuro); }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.pie {
  background: var(--azul);
  color: rgba(248, 250, 252, 0.80);
  padding-block: 3rem;
  font-size: var(--t-s);
}
.pie__fila {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: start;
}
.pie__marca { display: flex; gap: 1rem; align-items: center; }
.pie__marca p { margin: 0; }
/* Sobre el azul rey del pie, el marino se queda en 1,82:1. Se usa la tinta
   de la superficie, que ya es la nieve. */
.pie__marca strong { color: var(--tinta); font-weight: 600; }
.pie__fuente { max-width: 26rem; margin: 0; font-size: var(--t-xs); }
/* El pie no tenía ningún enlace hasta que se añadió el de la biblioteca, y
   salía con el azul por defecto del navegador: 1,64:1 sobre el marino. */
.pie__fuente a {
  color: var(--marca);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  /* Antes era el celeste escrito a mano, que sobre el azul rey del pie
       casi no se distingue. Ahora sale del propio color del enlace. */
    text-decoration-color: color-mix(in srgb, var(--marca) 55%, transparent);
}
.pie__fuente a:hover { text-decoration-color: currentColor; }


/* ── Noticias ─────────────────────────────────────────────────────────────── */
.encabezado-doble {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.encabezado-doble .parrafo-guia { margin-bottom: 0; }

.enlace-subrayado--claro { color: var(--marca); text-decoration-color: var(--azul); }
.enlace-subrayado--claro:hover { color: #fff; text-decoration-color: #fff; }

.cargando {
  color: rgba(248, 250, 252, 0.6);
  font-size: var(--t-s);
  margin: 0;
}

.noticias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}
.noticia {
  background: var(--nieve);
  border: 1px solid rgba(11, 39, 57, 0.14);
  border-radius: var(--radio-tarjeta);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: background-color 0.2s ease;
}
.noticia:hover { background: #fff; border-color: rgba(11, 39, 57, 0.45); }
.noticia__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--t-xs);
  /* Hereda del fondo en el que este, en vez de llevar el nieve clavado. Este
     color se escribio cuando las noticias solo vivian sobre la franja azul; al
     pasar la lista a fondo claro la fecha quedaba nieve sobre nieve, 1:1, y
     desaparecia entera estando en el HTML. */
  color: var(--tinta-suave, var(--grafito-suave));
}
/* Sobre las superficies azules sigue haciendo falta el nieve translucido. */
.franja--azul .noticia__meta,
.cabecera .noticia__meta,
.portada .noticia__meta { color: rgba(248, 250, 252, 0.72); }
.franja--azul :is(.noticia, .destacada) .noticia__meta { color: var(--grafito-suave); }
.noticia__etiqueta {
  color: var(--marca);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(1, 157, 244, 0.14);
  border: 1px solid rgba(1, 157, 244, 0.35);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.noticia__titulo {
  font-size: var(--t-l);
  color: var(--nieve);
  margin: 0;
}
.noticia__texto {
  margin: 0;
  font-size: var(--t-s);
  color: rgba(248, 250, 252, 0.78);
  flex: 1;
}
.noticia .enlace-subrayado { align-self: start; font-size: var(--t-s); }

.cartel-vacio--claro {
  border-color: rgba(11, 39, 57, 0.28);
  background: var(--nieve);
  color: var(--hondo);
}
.cartel-vacio--claro p { color: var(--grafito-suave); }

/* ── Lista de instalaciones menores ──────────────────────────────────────── */
.subtitulo-lista {
  font-size: var(--t-l);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.25rem;
  padding-top: 1.25rem;
  border-top: var(--borde-fino);
}
.rejilla-simple {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.1rem 2rem;
}
.rejilla-simple li {
  display: flex;
  flex-direction: column;
  padding-left: 1.1rem;
  border-left: 2px solid var(--marca);
}
.rejilla-simple strong { font-weight: 600; }
.rejilla-simple span { font-size: var(--t-xs); color: var(--grafito-suave); }


/* ── Noticias con imagen ──────────────────────────────────────────────────── */
.encabezado-doble .enlace-subrayado { white-space: nowrap; }

/* Sin fotografía no se deja el hueco: va el escudo sobre el azul del club. */
.sin-foto {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 30% 20%, var(--hondo-3) 0%, var(--hondo) 70%);
}
.sin-foto img { width: 42%; max-width: 9rem; opacity: 0.55; }

.destacada {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: var(--nieve);
  border: 1px solid rgba(11, 39, 57, 0.14);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  margin-bottom: 1rem;
}
.destacada__foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--hondo-3); }
.destacada__foto img { width: 100%; height: 100%; object-fit: cover; }
.destacada__cuerpo {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  justify-content: center;
}
.destacada__titulo {
  font-size: var(--t-xl);
  color: var(--nieve);
  margin: 0;
  text-wrap: balance;
}
.destacada__texto {
  margin: 0;
  color: rgba(248, 250, 252, 0.8);
  font-size: var(--t-s);
  max-width: 40ch;
}
.destacada .enlace-subrayado { align-self: start; font-size: var(--t-s); }

.noticia__foto {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hondo-3);
  border-bottom: 1px solid rgba(11, 39, 57, 0.12);
}
.noticia__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.noticia:hover .noticia__foto img { transform: scale(1.04); }
.noticia { padding: 0; overflow: hidden; }
.noticia__cuerpo {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

/* ── Biblioteca: estantería ───────────────────────────────────────────────── */
.tomos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}
.tomos--todos { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }

.tomo__enlace {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}
.tomo__portada {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--nieve-2);
  border-radius: 3px var(--radio-chico) var(--radio-chico) 3px;
  overflow: hidden;
  /* El lomo: una franja oscura a la izquierda y la sombra propia del tomo. */
  box-shadow:
    inset 10px 0 14px -10px rgba(11, 39, 57, 0.75),
    0 10px 24px rgba(15, 23, 42, 0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.tomo__portada::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 6px;
  background: linear-gradient(to right, rgba(11, 39, 57, 0.55), rgba(11, 39, 57, 0));
}
.tomo__portada img { width: 100%; height: 100%; object-fit: cover; }
.tomo__enlace:hover .tomo__portada {
  transform: translateY(-4px) rotate(-0.4deg);
  box-shadow:
    inset 10px 0 14px -10px rgba(11, 39, 57, 0.75),
    0 18px 34px rgba(15, 23, 42, 0.3);
}
.tomo__enlace:focus-visible .tomo__portada { outline: 2px solid var(--marca); outline-offset: 3px; }

.tomo__datos { display: flex; flex-direction: column; gap: 0.15rem; }
.tomo__tipo {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accion);
}
.tomo__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-m);
  line-height: 1.2;
}
.tomo__paginas { font-size: var(--t-xs); color: var(--grafito-suave); }

/* Igual que el pie: el título del tomo va sobre la franja azul. No lo vio la
   medición en local porque allí la biblioteca está vacía y no hay tomos. */
.franja--azul .tomo__titulo { color: var(--tinta); }
.franja--azul .tomo__tipo { color: var(--accion-oscura); }
.franja--azul .tomo__paginas { color: rgba(11, 39, 57, 0.72); }

/* ── Páginas interiores ───────────────────────────────────────────────────── */
.franja--interior { padding-top: clamp(2rem, 4vw, 3rem); }
/* El alto minimo solo si la cabecera de la pagina es TODO lo que hay. Se puso
   cuando cada interior era una sola franja corta y quedaba flotando arriba de
   la pantalla; con una segunda seccion debajo ese 60vh se convierte en 190 px
   de nada entre el boton y el contenido real. Si el navegador no entiende
   :has(), la regla entera se cae y se queda sin alto minimo: falla hacia el
   lado que no deja hueco. */
.franja--interior:not(:has(+ .franja)) { min-height: 60vh; }
.franja--interior .miga { margin-bottom: 0.8rem; }
.franja--clara .miga { color: var(--grafito-suave); }
.franja--clara .miga a { color: var(--accion); }


/* ── Cartelera de eventos ─────────────────────────────────────────────────── */
.subtitulo-cartelera {
  font-size: var(--t-l);
  margin: 0 0 1rem;
}
.cartelera { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }

.evento {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.1rem;
  align-items: center;
  background: var(--nieve-2);
  border: var(--borde-fino);
  border-radius: var(--radio-tarjeta);
  padding: 1rem 1.1rem;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.evento:hover { border-color: rgba(1, 157, 244, 0.5); transform: translateY(-2px); }

/* El taco de fecha: es lo primero que busca quien mira una cartelera. */
.evento__fecha {
  margin: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 3.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radio-chico);
  background: var(--hondo);
  color: var(--nieve);
}
.evento__dia {
  font-family: var(--fuente-titulo);
  font-size: var(--t-xl);
  line-height: 1;
}
.evento__mes {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* El taco de fecha es marino, asi que el mes va en nieve como el dia. Con
     var(--marca) se quedaba en 3,11:1 y no se leia. No se habia visto nunca
     porque la cartelera de la portada esta vacia en produccion: el fallo solo
     sale cuando hay un evento cargado. */
  color: rgba(248, 250, 252, 0.88);
}

.evento__cuerpo { min-width: 0; }
.evento__titulo { font-size: var(--t-l); margin: 0 0 0.15rem; }
.evento__meta {
  margin: 0 0 0.35rem;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Sobre el gris de la ficha, --accion se queda en 4,28:1; la version oscura
     sube a 5,89:1. Mismo caso que el mes: solo se ve con eventos cargados. */
  color: var(--accion-oscura);
}
.evento__texto { margin: 0; font-size: var(--t-s); color: var(--grafito-suave); max-width: 60ch; }

.evento__foto {
  width: 7rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radio-chico);
  background: var(--hondo-3);
}
.evento__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ═══ Adaptación a pantallas pequeñas. Todas las media queries, al final. ═══ */

@media (max-width: 64rem) {
  .rejilla-club,
  .rejilla-escudo,
  .rejilla-eventos,
  .rejilla-asociados,
  .rejilla-contacto { grid-template-columns: 1fr; }

  .rejilla-escudo__pieza img { width: min(100%, 17rem); }
  .cronologia__ano { position: static; }

  .menu-boton { display: inline-flex; }

  .menu {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    /* Blanco y no azul: cae justo debajo de la cabecera, que ya es azul
       claro, y con el mismo tono el desplegable no se distinguiria de ella. */
    background: var(--nieve);
    border-bottom: 1px solid rgba(11, 39, 57, 0.25);
    border-radius: 0 0 var(--radio-tarjeta) var(--radio-tarjeta);
    padding: 0.5rem 0 1rem;
  }
  .menu[data-abierto="true"] { display: block; }
  .cabecera__fila { position: relative; flex-wrap: wrap; }
  .menu__lista {
    flex-direction: column;
    gap: 0;
    width: min(100% - 2.5rem, var(--ancho));
    margin-inline: auto;
  }
  .menu__lista a {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(248, 250, 252, 0.1);
  }
  .menu__lista a::after { display: none; }

  .marca__escudo { width: 2.4rem; height: 2.4rem; }
  .marca__nombre { font-size: var(--t-m); }
  .marca { gap: 0.6rem; }
  .cabecera__fila { gap: 0.75rem; padding-block: 0.55rem; }

  /* Solo el icono: el texto sigue en el DOM para quien navega con lector. */
  .menu-boton { padding: 0.6rem 0.7rem; }
  .menu-boton__texto {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .portada__entrada { font-size: var(--t-m); }
  .portada__antetitulo { letter-spacing: 0.16em; }
  .portada { min-height: min(92vh, 42rem); }

  /* Azulejo más pequeño en el teléfono: con 240 px saldría una sola columna y
     con 150 salían dos, que todavía se leen como franjas y no como mosaico.
     Con 125 px caben tres columnas tanto en 360 como en 415 de ancho útil,
     que es casi todo lo que llega. */
  .mosaico { --pieza: 125px; }

  .cronologia__hito { grid-template-columns: 1fr; gap: 0.75rem; padding-block: 2rem; }

  .datos { grid-template-columns: 1fr; }

  .encabezado-doble { align-items: start; gap: 1.2rem; }

  .destacada { grid-template-columns: 1fr; }

  /* La foto del evento se va: en estrecho, la fecha y el texto mandan. */
  .evento { grid-template-columns: auto 1fr; gap: 0.8rem; }
  .evento__foto { display: none; }
  .destacada__foto { aspect-ratio: 16 / 9; }
  .tomos, .tomos--todos { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }

  .barra-servicio__lugar { display: none; }
  .barra-servicio__fila { justify-content: flex-end; }
}


/* ═══ Teléfono: la portada tiene que caber en la pantalla ═══════════════════
   Medido en un 375×812: el bloque ocupaba 726 px y con las dos barras se salía,
   así que había que bajar para ver el pie y la foto casi no se veía. */
@media (max-width: 30rem) {
  .portada {
    /* dvh y no vh: en el móvil la barra del navegador aparece y desaparece. */
    min-height: calc(100dvh - 6.5rem);
    padding-block: 2rem 1.25rem;
    justify-content: center;
  }

  .portada__antetitulo {
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    margin-bottom: 0.7rem;
  }

  .portada__titulo {
    font-size: clamp(2.3rem, 10.4vw, 3rem);
    line-height: 1.02;
    margin-bottom: 0.8rem;
  }

  .portada__entrada {
    font-size: 0.97rem;
    line-height: 1.5;
    max-width: 32ch;   /* una columna de lectura, no el ancho entero */
  }

  /* Los dos botones en fila: apilados a ancho completo se comían media
     pantalla y empujaban la foto fuera. */
  .portada__acciones { gap: 0.6rem; margin-top: 1.4rem; flex-wrap: nowrap; }
  .portada__acciones .boton {
    flex: 1 1 0;
    padding: 0.85rem 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-align: center;
  }

  .portada__pie {
    margin-top: 1.5rem;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    gap: 0.6rem;
    color: rgba(248, 250, 252, 0.55);
  }
  .portada__pie-marca { width: 1.4rem; }

  /* Con el texto más recogido, se deja ver más foto arriba. */
  .portada__velo {
    background:
      linear-gradient(to top, rgba(11, 39, 57, 0.9) 0%, rgba(11, 39, 57, 0.55) 45%,
                      rgba(11, 39, 57, 0.18) 78%, rgba(11, 39, 57, 0.05) 100%);
  }
}

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

/* ── Galería de presidentes ────────────────────────────────────────────────
   Treinta y cuatro retratos al pastel fotografiados del libro. Son cuadros con
   su propio fondo dorado, así que la tarjeta no pinta marco: basta un filete
   fino para despegarlos del papel claro de la franja.

   Va al final del archivo a propósito. Las reglas de este sitio se resuelven
   por orden —a igual especificidad gana la última—, así que lo nuevo se añade
   aquí y no intercalado, donde una regla de más abajo podría anularlo sin que
   se vea leyendo este bloque. */
.presidentes {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  /* 150 px es el ancho en el que una cara al pastel todavía se reconoce. Por
     debajo son manchas y la galería deja de contar nada. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem) clamp(0.9rem, 2vw, 1.4rem);
}
/* subgrid: cada tarjeta toma las tres filas de la rejilla madre (retrato,
   nombre, años), así los años de una misma fila quedan a la misma altura aunque
   un nombre ocupe dos líneas. Se hace así y no reservando un alto fijo para el
   nombre, porque ese hueco se nota en el teléfono, donde casi ninguno lo usa.
   Si el navegador no entiende subgrid, se queda sin alinear y poco más. */
.presidente {
  margin: 0;
  text-align: center;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
}
.presidente img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 43 / 66;      /* el del recorte, para que no salte al cargar */
  object-fit: cover;
  border: 1px solid var(--nieve-2);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(11, 39, 57, 0.14);
  background: var(--nieve-2); /* mientras carga, en vez de un hueco blanco */
}
.presidente__nombre {
  margin: 0.6rem 0 0;
  font-size: var(--t-s);
  font-weight: 600;
  line-height: 1.3;
  color: var(--grafito);
}
.presidente__anos {
  margin: 0.15rem 0 0;
  font-size: var(--t-xs);
  color: var(--grafito-suave);
  font-variant-numeric: tabular-nums;
}

/* ── Descargar un tomo en PDF ──────────────────────────────────────────────
   Va fuera del enlace de la tarjeta (un <a> no puede contener otro), así que
   necesita su propio aspecto: discreto, porque lo normal es leer en pantalla y
   la descarga es la excepción, no la acción principal. */
.tomo__descarga {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 40px;
  margin-top: 0.5rem;
  padding: 0 0.8rem;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--accion);
  text-decoration: none;
  background: var(--nieve);
  border: 1px solid var(--nieve-2);
  border-radius: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.tomo__descarga:hover { background: var(--nieve-2); border-color: var(--accion); }
.tomo__descarga span { color: var(--grafito-suave); font-weight: 400; }

/* ── Accesos de la portada ─────────────────────────────────────────────────
   La portada dejó de ser la página entera: ahora es un vestíbulo con una
   entrada por cada parte del club. Reutiliza la tarjeta de instalaciones para
   que el sitio no hable dos idiomas, pero la tarjeta entera es un enlace. */
.tarjeta--enlace { padding: 0; }
.tarjeta--enlace > a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}
.tarjeta--enlace .tarjeta__imagen { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.tarjeta--enlace .tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta--enlace .tarjeta__cuerpo { display: block; padding: 1.3rem 1.3rem 1.6rem; }
.tarjeta__titulo {
  display: block;
  font-family: var(--serif, inherit);
  font-size: var(--t-l);
  margin-bottom: 0.4rem;
}
.tarjeta__texto { display: block; font-size: var(--t-s); color: var(--grafito-suave); }
/* El subrayado aparece al apuntar la tarjeta, no solo el texto: la zona
   pulsable es la tarjeta entera y conviene que se note cuál se va a abrir. */
.tarjeta--enlace > a:hover .tarjeta__titulo { text-decoration: underline; }
.tarjeta--enlace > a:focus-visible { outline: 3px solid var(--accion); outline-offset: 2px; }

/* ── Dónde estoy ───────────────────────────────────────────────────────────
   Con una sola página larga no hacía falta; con el sitio por partes, sí. */
.menu__lista a[aria-current="page"] {
  font-weight: 600;
  box-shadow: inset 0 -2px 0 currentColor;
}

/* La miga en su propio contenedor, para las páginas cuyo contenido va en
   rejilla: dentro de la rejilla sería una celda más y se pondría al lado. */
.contenedor--miga { padding-bottom: 0; }
.contenedor--miga .miga { margin-bottom: 0; }

/* ── Piezas de fondo claro dentro de una franja azul ───────────────────────
   Con el celeste, la franja azul pintaba su texto en marino y cualquier
   tarjeta de fondo claro que cayera dentro heredaba ese marino, que sobre
   blanco se lee. Con el azul rey, la tinta de la franja pasó a ser la nieve
   y esas tarjetas quedaron con texto blanco sobre fondo blanco: invisible.

   No salió al medir en local porque la copia local no tiene noticias; aparecieron
   doce textos a 1:1 al medir contra el canario, que sí lleva los datos del club.

   Cada pieza con fondo propio recupera aquí su tinta: la de la superficie en la
   que está de verdad, no la de la franja que la rodea. */
.franja--azul :is(.noticia, .destacada, .cartel-vacio, .cartel-vacio--claro, .tomo) {
  --tinta: var(--grafito);
  --tinta-suave: var(--grafito-suave);
  color: var(--grafito);
}
.franja--azul :is(.noticia, .destacada, .cartel-vacio) :is(h2, h3, h4, p, span, a, li) {
  color: inherit;
}
/* El enlace mantiene el azul de acción, que es lo que lo distingue del texto,
   pero en su tono oscuro: el normal (#0179C4) da 4,43:1 sobre el fondo claro
   de la tarjeta y se queda a un pelo del mínimo de 4,5:1. El oscuro sube a
   6,5:1 y a simple vista es el mismo azul. */
.franja--azul :is(.noticia, .destacada, .cartel-vacio) .enlace-subrayado { color: var(--accion-oscura); }

/* ── Instalaciones: collage y visor ────────────────────────────────────────
   La pagina era una rejilla de diez fichas iguales, todas 4:3 y con una foto
   cada una: el tenis, con cinco canchas y un fronton, pesaba lo mismo que la
   fuente de soda, y la ultima fila se quedaba coja. Ahora cada instalacion es
   un bloque con su propio collage, y dentro del collage la primera foto manda.
   La composicion cambia segun cuantas fotos haya, que es lo que distingue un
   collage de una rejilla. */
.instalacion { margin-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.instalacion:first-of-type { margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); }

.instalacion__cabeza {
  display: grid;
  gap: 0.35rem 2.5rem;
  margin-bottom: 1.1rem;
}
.instalacion__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
}
.instalacion__entrada {
  margin: 0;
  max-width: 48ch;
  color: var(--grafito-suave);
}
/* De lado en cuanto cabe: el titulo es corto y su entrada tambien, asi que
   apilados dejaban dos lineas casi vacias delante de cada collage. */
@media (min-width: 56rem) {
  .instalacion__cabeza {
    grid-template-columns: minmax(12rem, 18rem) 1fr;
    align-items: baseline;
  }
}

.collage {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.5rem, 0.3rem + 0.6vw, 0.85rem);
  grid-auto-rows: minmax(0, 1fr);
}
/* min-height:0 ademas de min-width:0: en una rejilla, el minimo automatico de
   una celda es su contenido, asi que una fila "1fr" no puede encoger por debajo
   de lo que mide la foto. Con el alto fijo del collage las filas salian de 529
   px dentro de un contenedor de 435 y todo se desbordaba por abajo. */
.collage__hueco { display: block; min-width: 0; min-height: 0; }

.collage__foto {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radio-chico);
  overflow: hidden;
  background: var(--hondo-3);
  cursor: pointer;
  /* El JPEG no tiene canal alfa, asi que el recorte redondeado se ve bien sin
     mascara; isolation evita que el borde dentado asome en Safari. */
  isolation: isolate;
}
.collage__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease, filter 0.45s ease;
}
.collage__lupa {
  position: absolute;
  inset-block-end: 0.6rem;
  inset-inline-end: 0.6rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgb(var(--azul-rgb) / 0.92);
  color: var(--nieve);
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.collage__foto:hover img,
.collage__foto:focus-visible img { transform: scale(1.04); }
.collage__foto:hover .collage__lupa,
.collage__foto:focus-visible .collage__lupa { opacity: 1; transform: translateY(0); }
.collage__foto:active img { transform: scale(1.01); filter: brightness(0.94); }
.collage__foto:focus-visible { outline: 3px solid var(--accion); outline-offset: 3px; }

/* Sin JavaScript el boton no abre nada: se quita el cursor de "pulsable" y la
   lupa para no prometer algo que no va a pasar. */
html:not(.con-js) .collage__foto { cursor: default; }
html:not(.con-js) .collage__lupa { display: none; }

/* Movil: la grande a todo el ancho y el resto de dos en dos. Tres columnas en
   un telefono dejan cada foto en 100 px y no se distingue una cancha de una
   piscina.
   grid-auto-rows vuelve a "auto" aqui: con minmax(0,1fr) todas las filas se
   igualaban a la de la foto grande (262 px) mientras las pequenas ocupaban 171,
   y entre fila y fila quedaba una banda en blanco de 99 px. */
.collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
.collage__hueco:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.collage__hueco:not(:first-child) { aspect-ratio: 1 / 1; }

@media (min-width: 46rem) {
  /* Cada cantidad lleva su reparto. Un solo patron para todas haria que los
     bloques de dos y de cinco fotos se vieran como la misma rejilla.
     Los dos selectores de abajo repiten el :first-child y el :not(:first-child)
     del movil a proposito: con un simple .collage__hueco la regla tenia menos
     especificidad que la de arriba y el aspect-ratio 1/1 del movil seguia
     mandando, asi que la foto grande no llegaba a ocupar las dos filas y el
     collage de cinco se salia por abajo encima del bloque siguiente. Estar
     dentro de una media query no da prioridad. */
  .collage { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(0, 1fr); }
  .collage__hueco:first-child,
  .collage__hueco:not(:first-child) { aspect-ratio: auto; grid-column: auto; }

  .collage--2 { grid-template-columns: repeat(2, 1fr); }
  .collage--2 .collage__hueco { aspect-ratio: 3 / 2; }
  .collage--2 .collage__hueco:first-child { grid-column: auto; }

  .collage--3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); height: clamp(22rem, 34vw, 30rem); }
  .collage--3 .collage__hueco:first-child { grid-area: 1 / 1 / 3 / 3; }

  .collage--4 { grid-template-rows: repeat(2, minmax(0, 1fr)); height: clamp(23rem, 36vw, 32rem); }
  .collage--4 .collage__hueco:first-child { grid-area: 1 / 1 / 3 / 3; }
  .collage--4 .collage__hueco:nth-child(4) { grid-column: span 2; }

  .collage--5 { grid-template-rows: repeat(2, minmax(0, 1fr)); height: clamp(23rem, 36vw, 32rem); }
  .collage--5 .collage__hueco:first-child { grid-area: 1 / 1 / 3 / 3; }
}

/* ── El visor ──────────────────────────────────────────────────────────────
   Solo la foto y la equis. Llevaba pie con el nombre de la instalacion, el
   texto de la foto y un contador, y flechas para pasar; sobraba todo: quien
   abre una foto quiere la foto. El texto no se pierde, sigue en el alt de la
   imagen. */
.visor {
  width: max-content;
  max-width: 96vw;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}
.visor::backdrop { background: rgb(11 39 57 / 0.88); }

.visor__imagen {
  display: block;
  max-width: 96vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  border-radius: var(--radio-chico);
  /* Sin caja negra alrededor: la imagen se ajusta a su propia proporcion, asi
     que no hay banda que rellenar. */
}

.visor__cerrar {
  position: absolute;
  top: -0.9rem;
  inset-inline-end: -0.9rem;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 50%;
  background: var(--azul);
  color: var(--nieve);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.visor__cerrar:hover { background: var(--azul-medio); color: var(--grafito); }
.visor__cerrar:active { filter: brightness(0.92); }
.visor__cerrar:focus-visible { outline: 3px solid var(--nieve); outline-offset: 2px; }

/* En un telefono la equis no puede salirse por el borde: se mete dentro de la
   foto, arriba a la derecha. */
@media (max-width: 40rem) {
  .visor { max-width: 100vw; }
  .visor__imagen { max-width: 100vw; border-radius: 0; }
  .visor__cerrar { top: 0.6rem; inset-inline-end: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .collage__foto img,
  .collage__lupa,
  .visor__cerrar { transition: none; }
  .collage__foto:hover img,
  .collage__foto:focus-visible img { transform: none; }
}

/* ── Eventos y Noticias como paginas de listado ────────────────────────────
   Las dos estaban maquetadas como secciones de una landing: un bloque de color
   a sangre con fichas flotando y, en Noticias, una rejilla de tarjetas iguales
   que aguanta tres anuncios y se vuelve ilegible con treinta. Aqui mandan la
   cronologia y la lectura: cabecera corta, y debajo una lista donde cada
   entrada se lee de un vistazo sin competir con la de al lado. */
.franja--cabecera { min-height: 0; padding-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }

.cabecera-lista { display: grid; gap: 0.6rem; }
/* La cuenta va pegada al titulo, no en la otra punta de la fila. Puesta a la
   derecha con align-items:end quedaba suelta en medio del blanco, lejos de lo
   que cuenta, y parecia un resto de otra seccion. */
.cabecera-lista__cuenta {
  margin: 0.35rem 0 0;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave, var(--grafito-suave));
  font-variant-numeric: tabular-nums;
}
.cabecera-lista__cuenta::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  margin-inline-end: 0.6rem;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.55;
}

/* Separador de ano o de mes: una linea con la etiqueta encima, que ordena la
   lista sin meter un titulo que pese mas que las propias entradas. */
.separador-anio {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: clamp(2rem, 1.4rem + 1.8vw, 3rem) 0 1.1rem;
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: var(--t-l);
  line-height: 1;
  color: var(--grafito);
}
.separador-anio::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(15, 23, 42, 0.16);
}
.separador-anio:first-child { margin-top: 0; }

/* La apertura: la noticia marcada como destacada, y solo esa. */
.apertura {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  align-items: center;
  padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}
.apertura__foto { border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--hondo-3); }
.apertura__foto img,
.apertura__foto .sin-foto { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.apertura__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
  line-height: 1.12;
  margin: 0.35rem 0 0.6rem;
  text-wrap: balance;
}
.apertura__texto { margin: 0 0 0.7rem; color: var(--grafito-suave); max-width: 60ch; }
@media (min-width: 54rem) {
  .apertura { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* La lista. Foto pequena a un lado y el texto al otro: con la foto arriba, cada
   entrada ocupaba una pantalla y la lista dejaba de leerse como lista. */
.entradas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.entrada {
  display: grid;
  gap: clamp(0.8rem, 0.5rem + 1vw, 1.5rem);
  padding-block: clamp(1.2rem, 0.9rem + 1vw, 1.8rem);
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}
.entrada:last-child { border-bottom: 0; }
.entrada__foto { border-radius: var(--radio-chico); overflow: hidden; background: var(--hondo-3); }
.entrada__foto img,
.entrada__foto .sin-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.entrada__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: clamp(1.18rem, 1rem + 0.7vw, 1.55rem);
  line-height: 1.18;
  margin: 0.3rem 0 0.45rem;
  text-wrap: balance;
}
.entrada__texto { margin: 0 0 0.6rem; color: var(--grafito-suave); max-width: 62ch; }
@media (min-width: 44rem) {
  .entrada { grid-template-columns: minmax(10rem, 17rem) minmax(0, 1fr); align-items: start; }
}

/* «Aviso vigente» para lo que no lleva fecha. Se distingue de una fecha de
   verdad: va en cursiva y sin el fondo de la etiqueta, para que nadie lo
   confunda con una categoria. */
.noticia__permanente { font-style: italic; color: var(--grafito-suave); }

/* ── La cartelera ──────────────────────────────────────────────────────── */
.cartelera { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cita {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.6rem);
  align-items: start;
  padding-block: clamp(1.1rem, 0.9rem + 0.9vw, 1.7rem);
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}
.cita:last-child { border-bottom: 0; }
.cita__fecha {
  margin: 0;
  display: grid;
  place-items: center;
  width: 4.1rem;
  padding: 0.5rem 0.3rem 0.6rem;
  border-radius: var(--radio-chico);
  background: var(--azul);
  color: var(--nieve);
  line-height: 1;
}
.cita__dia { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.cita__mes { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.2rem; }
.cita__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.18;
  margin: 0 0 0.3rem;
}
.cita__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0 0 0.4rem; font-size: var(--t-s); color: var(--grafito-suave); }
.cita__meta span + span::before { content: "·"; margin-inline-end: 0.9rem; }
.cita__texto { margin: 0; color: var(--grafito-suave); max-width: 62ch; }
.cita__foto { border-radius: var(--radio-chico); overflow: hidden; grid-column: 2; }
.cita__foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 50rem) {
  .cita { grid-template-columns: auto minmax(0, 1fr) minmax(9rem, 15rem); }
  .cita__foto { grid-column: auto; }
}

/* Los celebrados: solo fecha, titulo y sitio. Repetir aqui el formato de la
   cartelera daria el mismo peso a lo que ya paso que a lo que viene. */
.celebrados { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0; }
.celebrado {
  display: grid;
  gap: 0.15rem 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  align-items: baseline;
}
.celebrado:last-child { border-bottom: 0; }
.celebrado__fecha { font-size: var(--t-s); color: var(--grafito-suave); font-variant-numeric: tabular-nums; }
.celebrado__titulo { font-family: var(--fuente-titulo); font-size: var(--t-m); }
.celebrado__lugar { font-size: var(--t-s); color: var(--grafito-suave); }
@media (min-width: 46rem) {
  .celebrado { grid-template-columns: 12rem minmax(0, 1fr) auto; }
}

.cartel-vacio--ancho { max-width: 46rem; }
.cartel-vacio__acciones { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; margin-top: 1rem; }

.aviso-alquiler {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  align-items: center;
  padding: clamp(1.2rem, 0.9rem + 1.2vw, 2rem);
  border-radius: var(--radio-tarjeta);
  background: var(--nieve-2);
}
.aviso-alquiler p { margin: 0; color: var(--grafito-suave); max-width: 56ch; }
.aviso-alquiler__titulo { font-family: var(--fuente-titulo); font-weight: 400; font-size: var(--t-l); margin: 0 0 0.5rem; }
.aviso-alquiler__foto { border-radius: var(--radio-chico); overflow: hidden; }
.aviso-alquiler__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 52rem) {
  .aviso-alquiler { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.titulo-seccion--menor { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); }

/* ── Portada: las puertas y las cifras ─────────────────────────────────────
   «Recorre el club» eran seis fichas en una rejilla de cuatro: dos huecos en la
   ultima fila y sin Noticias, Biblioteca ni Contacto, que si estan en el menu.
   Ahora son nueve, que es justo lo que cabe en tres columnas sin que sobre
   ninguna celda. */
.puertas {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: clamp(0.8rem, 0.5rem + 1vw, 1.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 38rem) { .puertas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .puertas { grid-template-columns: repeat(3, 1fr); } }

.puerta { display: block; min-width: 0; }
.puerta > a {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  background: var(--nieve-2);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.puerta__imagen { display: block; overflow: hidden; background: var(--hondo-3); }
.puerta__imagen img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.puerta__cuerpo {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.95rem clamp(0.9rem, 0.7rem + 0.5vw, 1.2rem) 1.15rem;
}
.puerta__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--t-l);
  line-height: 1.15;
}
.puerta__texto { font-size: var(--t-s); color: var(--grafito-suave); }

.puerta > a:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.13); }
.puerta > a:hover .puerta__imagen img { transform: scale(1.05); }
.puerta > a:hover .puerta__titulo { text-decoration: underline; text-underline-offset: 3px; }
.puerta > a:active { transform: translateY(-1px); }
.puerta > a:focus-visible { outline: 3px solid var(--accion); outline-offset: 3px; }

/* Las cifras. Son enlaces porque cada una lleva a la pagina donde se comprueba:
   un numero que no se puede verificar es decoracion. */
.franja--cifras { padding-block: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.cifras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 52rem) { .cifras { grid-template-columns: repeat(4, 1fr); } }

.cifra > a {
  display: grid;
  gap: 0.25rem;
  padding: 0.6rem 0.4rem;
  border-radius: var(--radio-chico);
  color: inherit;
  text-decoration: none;
}
.cifra__numero {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cifra__texto {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.82);
}
.cifra > a:hover .cifra__numero { text-decoration: underline; text-underline-offset: 5px; }
.cifra > a:hover .cifra__texto { color: var(--nieve); }
.cifra > a:focus-visible { outline: 3px solid var(--nieve); outline-offset: 2px; }

/* En la portada la lista de noticias va a dos columnas: tres entradas seguidas
   a lo ancho dejaban la franja muy alta para lo poco que cuentan. */
@media (min-width: 62rem) {
  .entradas--portada { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem); }
  .entradas--portada .entrada:nth-last-child(2) { border-bottom: 0; }
}
/* En la portada los tomos van tumbados: con la portada arriba y los datos
   debajo, dos libros ocupaban una franja estrecha a la izquierda y dejaban dos
   tercios del ancho en blanco. */
.tomos--portada { grid-template-columns: 1fr; gap: clamp(0.9rem, 0.6rem + 1vw, 1.5rem); }
@media (min-width: 46rem) { .tomos--portada { grid-template-columns: repeat(2, 1fr); } }
.tomos--portada .tomo__enlace {
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
  padding: 0.9rem;
  border-radius: var(--radio-tarjeta);
  background: var(--nieve-2);
}
.tomos--portada .tomo__portada { flex: 0 0 5.5rem; width: 5.5rem; }
.tomos--portada .tomo__datos { min-width: 0; }
/* El tipo del libro va en el azul oscuro: sobre el gris de esta tarjeta el
   --accion normal se queda en 4,28:1. Sobre el fondo nieve del resto del sitio
   cumple, pero aqui el fondo es mas oscuro y ya no. */
.tomos--portada .tomo__tipo { color: var(--accion-oscura); }

@media (prefers-reduced-motion: reduce) {
  .puerta > a,
  .puerta__imagen img { transition: none; }
  .puerta > a:hover { transform: none; }
  .puerta > a:hover .puerta__imagen img { transform: none; }
}