/* ==========================================================================
   ASAEXS — Estilos base (estructura + identidad visual)
   Proyecto: reestructuración de www.asaexs.es en HTML/CSS/JS plano
   Paleta y tipografías extraídas del sitio actual (Divi):
   - Rojo primario (banda header):     #e00000
   - Rojo oscuro (submenús / acentos): #d00000
   - Texto base:                       #666666
   - Títulos secundarios:              #333333
   - Footer principal:                 #000000 (texto blanco)
   - Bloque del tiempo (footer):       #ffffff (título en rojo #d00000)
   - Tipografías: Atkinson Hyperlegible Next (texto/menús),
     Open Sans (títulos), Source Sans 3 / Source Sans Pro (subtítulos)

   Estructura del header (2 filas, evita el desbordamiento en escritorio):
     .site-header__top   → logo | redes + idioma + botón Menú
     .nav__menu          → barra de menú a ancho completo

   Todos los recursos son locales (imágenes, banderas). No se enlaza nada
   del WordPress antiguo.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  --color-primario: #e00000;
  --color-primario-oscuro: #d00000;
  --color-texto: #666666;
  --color-titulos: #333333;
  /* Rojo del subtítulo de las bandas de la portada (el del sitio live) */
  --color-acento: #ff0009;
  --color-banda: #eeeeee;
  --color-fondo: #ffffff;
  --color-nav-fondo: #ffffff;
  --color-nav-texto: rgba(0, 0, 0, 0.6);
  --color-footer: #000000;
  --color-footer-texto: #ffffff;
  --fuente-texto: "Atkinson Hyperlegible Next", Arial, Helvetica, sans-serif;
  --fuente-titulo: "Open Sans", Arial, Helvetica, sans-serif;
  --fuente-secundaria: "Source Sans 3", "Source Sans Pro", Helvetica, Arial, Lucida, sans-serif;
  --ancho-max: 1200px;
  --alto-separacion: 1.25rem;
  /* Punto en el que el menú horizontal deja de caber y pasa a botón "Menú".
     Medido en el navegador: la barra completa ocupa ~1084px, así que se pliega
     antes de quedarse sin sitio (el valor también está en js/main.js). */
  --corte-menu: 1100px;
}

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

/* OJO: no poner overflow-x aquí ni en body. Convertiría html/body en el
   contenedor de scroll y anularía el header sticky (.site-header). El sitio no
   tiene desbordamiento horizontal: si apareciera, hay que corregir la causa. */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente-texto);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-texto);
  background: var(--color-fondo);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  color: var(--color-titulos);
  font-weight: 600;
  line-height: 1.25;
}

h1 {
  font-size: 40px;
}

h2 {
  font-family: var(--fuente-secundaria);
  font-size: 20px;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* Foco visible homogéneo en todo el sitio (accesibilidad) */

a:focus-visible,
button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Enlace de salto al contenido (visible solo con teclado)
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 300;
  background: var(--color-fondo);
  color: var(--color-primario);
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   Header — banda roja, dos filas
   -------------------------------------------------------------------------- */

.site-header {
  width: 100%;
  background: var(--color-primario);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__top {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0.75rem var(--alto-separacion);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-header__logo {
  display: block;
  flex: 0 0 auto;
}

.site-header__logo img {
  display: block;
  height: 50px;
  width: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

/* Redes sociales en iconos (header y pie comparten aspecto) */

.site-header__social,
.site-footer__social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.site-header__social-link,
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-footer-texto);
  color: var(--color-primario);
  transition: background 0.15s ease, color 0.15s ease;
}

.site-header__social-link:hover,
.site-header__social-link:focus-visible,
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  background: var(--color-primario-oscuro);
  color: var(--color-footer-texto);
  outline: none;
}

.social-svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}

/* Selector de idioma (banderas locales) */

.site-header__lang {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-header__lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  opacity: 0.6;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.site-header__lang-btn img {
  display: block;
  width: 22px;
  height: 17px;
  object-fit: cover;
  border-radius: 2px;
}

.site-header__lang-btn:hover,
.site-header__lang-btn:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.7);
  opacity: 1;
  outline: none;
}

.site-header__lang-btn[aria-pressed="true"] {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Botón "Menú" (solo móvil) */

.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-nav-fondo);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  color: var(--color-primario);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}

.nav__toggle-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
}

.nav__toggle-bars span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   Navegación — barra roja a ancho completo con submenús rojo oscuro
   -------------------------------------------------------------------------- */

.nav__menu {
  background: var(--color-primario);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.nav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0.25rem var(--alto-separacion);
}

.nav__item {
  position: relative;
  flex: 0 0 auto;
}

.nav__link {
  display: block;
  padding: 0.5rem 0.65rem;
  color: var(--color-footer-texto);
  font-family: var(--fuente-texto);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 3px;
  position: relative;
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--color-footer-texto);
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.nav__link[aria-current="page"] {
  color: var(--color-footer-texto);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 -2px 0 #ffffff;
}

/* Flecha de desplegable con espacio respecto al texto */

.nav__link--has-sub {
  padding-right: 1.9rem;
}

.nav__link--has-sub::after {
  content: "";
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-footer-texto);
  opacity: 0.85;
  transition: transform 0.15s ease;
  pointer-events: none;
}

.nav__item--has-sub:hover > .nav__link--has-sub::after,
.nav__item--has-sub:focus-within > .nav__link--has-sub::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Submenú con fondo rojo oscuro */

.nav__submenu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--color-primario-oscuro);
  display: none;
  padding: 0.5rem 0;
  z-index: 110;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.nav__item--has-sub:hover > .nav__submenu,
.nav__item--has-sub:focus-within > .nav__submenu {
  display: block;
}

.nav__submenu .nav__link {
  padding: 0.5rem 1.25rem;
  white-space: nowrap;
  color: var(--color-footer-texto);
  font-size: 17px;
  background: transparent;
  border-radius: 0;
}

.nav__submenu .nav__link:hover,
.nav__submenu .nav__link:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-footer-texto);
}

.nav__submenu .nav__link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
   Hero (solo index.html) — texto a la izquierda, slider a la derecha
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  width: 100%;
  background: #000000;
  overflow: hidden;
  /* 80% de la ventana. Se repite con svh porque en móvil la barra del navegador
     hace que 100vh sea más alto que el área realmente visible. */
  min-height: 80vh;
  min-height: 80svh;
}

/* Fondo del hero: la foto del campus del sitio live (campus.jpg), oscurecida para
   que el texto blanco se lea. Antes usaba por error la primera diapositiva del
   carrusel. */

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/fondo-campus.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  filter: brightness(0.45) saturate(1.05);
  z-index: 0;
}

.hero__container {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* 30% texto / 70% carrusel, ambos centrados en el alto del hero */
  grid-template-columns: 30% 70%;
  gap: 2.5rem;
  align-items: center;
  min-height: 80vh;
  min-height: 80svh;
  padding: 3rem 0;
}

.hero__text {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.hero__logo {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 96px;
  opacity: 0.95;
}

.hero__text h1 {
  color: #ffffff;
  font-size: 38px;
  line-height: 1.15;
  font-family: var(--fuente-titulo);
}

.hero__tag {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--fuente-secundaria);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-left: 3px solid var(--color-primario);
  padding-left: 0.75rem;
}

/* El vídeo del campus (YouTube). La caja guarda la proporción vertical de un
   Short (9/16) dentro del alto del hero; el iframe la llena. El vídeo arranca
   en silencio al cargar la página y va en bucle (mute=1 es imprescindible
   para que el navegador permita el autoplay). */
.hero__video {
  position: relative;
  width: 100%;
  height: clamp(280px, 50vh, 520px);
  min-height: 260px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* El vídeo es un Short: más estrecho que el hueco del antiguo slider. El
   iframe se centra y saca su ancho de la proporción 9/16 (con el alto de la
   caja, siempre cabe: en el peor caso, 320px de ventana, necesita 169px). */
.hero__video iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  aspect-ratio: 9 / 16;
  border: 0;
}

/* --------------------------------------------------------------------------
   Banner de logos (portada) — FEGAUS (externo) y Revista Gaudeamus (interna)
   Banda blanca justo debajo del hero, como en el sitio live.
   -------------------------------------------------------------------------- */

.banner {
  background: var(--color-fondo);
}

.banner__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 3rem var(--alto-separacion);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 4rem;
}

.banner__logo {
  display: block;
  flex: 0 1 auto;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

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

/* Tamaños tomados del sitio live: FEGAUS a tamaño natural y Gaudeamus reducido */

.banner__logo--fegaus img {
  width: 316px;
}

.banner__logo--gaudeamus img {
  width: 474px;
}

.banner__logo:hover,
.banner__logo:focus-visible {
  transform: translateY(-2px);
  opacity: 0.88;
  outline: none;
}

.banner__logo:focus-visible {
  outline: 3px solid var(--color-primario);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Contenido principal
   -------------------------------------------------------------------------- */

.site-main {
  flex: 1;
  max-width: var(--ancho-max);
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem var(--alto-separacion);
}

.site-main__placeholder {
  border: 2px dashed #c9c9c9;
  border-radius: 8px;
  padding: 3rem 1.5rem;
  text-align: center;
  color: #8a8a8a;
}

.site-main__placeholder h1,
.site-main__placeholder h2 {
  font-size: 40px;
  font-family: var(--fuente-titulo);
  color: var(--color-titulos);
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Portada — bandas a ancho completo

   La portada encadena bloques que ocupan todo el ancho de la ventana (como en
   el sitio live), así que su <main> no limita el ancho ni añade relleno: lo
   hace cada banda. Las otras 12 páginas siguen usando .site-main.
   -------------------------------------------------------------------------- */

.site-main--portada {
  max-width: none;
  padding: 0;
}

/* Una banda: ancho completo y ~50px de relleno arriba y abajo, como las
   secciones del sitio live. */
.banda {
  padding: 3.125rem var(--alto-separacion);
}

.banda__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
}

/* Fondo gris con el patrón de chevrones del sitio live: es el mismo SVG en
   línea (64×64) que usa Divi, que aquí queda como recurso propio del CSS. */
.banda--gris {
  background-color: var(--color-banda);
  background-image: url("data:image/svg+xml,%3Csvg fill='rgba(219,219,219,0.2)' preserveAspectRatio='none' viewBox='0 0 64 64' height='64px' width='64px' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,32,32,64H0Zm64,0L32,0H0L64,64Z'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Banda con foto de fondo (la de Actividades Destacadas): la Casa das Campas,
   lavada con un velo blanco del 55% **horneado en la imagen** (brillo medio
   199, entre 140 y 255), igual que el fondo de «Asóciate». Así el titular
   `#333` de 48px se lee en cualquier punto (peor caso 3,8:1, que para texto
   grande pasa AA; en la media, 7,5:1) y no hace falta ni velo de CSS ni
   sombras. Si se quiere la foto más presente, se baja el 0,55 en la receta de
   NO_SUBIR/project.md y se regenera `images/casa_das_campas.webp`. */
.banda--foto {
  background-color: var(--color-banda);
  background-image: url("../images/casa_das_campas.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Tamaños y colores medidos en el sitio live: título 48px en gris oscuro y
   subtítulo 29px en rojo. */
.banda__titulo {
  font-family: var(--fuente-secundaria);
  font-size: 48px;
  font-weight: 600;
  color: var(--color-titulos);
  text-align: center;
  padding-bottom: 10px;
}

.banda__subtitulo {
  font-family: var(--fuente-titulo);
  font-size: 29px;
  font-weight: 600;
  color: var(--color-acento);
  text-align: center;
  padding-bottom: 10px;
}

/* En pantallas estrechas el título no puede quedarse en 48px */
@media (max-width: 900px) {
  .banda {
    padding: 2rem var(--alto-separacion);
  }

  .banda__titulo {
    font-size: 30px;
  }

  .banda__subtitulo {
    font-size: 22px;
  }
}

/* ==========================================================================
   ACTIVIDADES

   Todo lo que rodea a las entradas de actividades: las tres bandas de la
   portada, las tarjetas, las páginas de archivo (rejilla + paginación), la
   página de cada actividad y su galería.

   El marcado lo genera NO_SUBIR/tools/actividades.py, y js/actividades.js
   vuelve a pintar las tarjetas cuando una fecha cambia de categoría: si se
   cambia una tarjeta aquí, hay que cambiarla también allí.
   ========================================================================== */

/* ------------------------------------------- Bandas de la portada y mitades */

/* Cada bloque de la portada ocupa el 50% del alto de la ventana. Se usa
   `min-height` (no `height`) para que, en pantallas bajas, el contenido pueda
   crecer en vez de recortarse. */
.banda--50vh {
  min-height: 50vh;
  display: flex;
  align-items: center;
}

.banda--50vh > .banda__inner {
  width: 100%;
}

.banda__inner--centrada {
  text-align: center;
}

/* Curso Actual | Cursos Anteriores, cada una al 50% del ancho */
.banda__inner--mitades {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
  align-items: start;
}

.mitad {
  min-width: 0;
}

/* ------------------------------------------- Banda «Asóciate» (portada) */

/* Foto propia de fondo, ya oscurecida en el propio archivo: aquí todo el texto
   va en blanco y la foto original es clara (gente al aire libre). El velo del
   68% está horneado en `images/asociate.webp` (brillo medio 48, los puntos más
   claros en ~75), así que el fondo sale oscuro siempre —también en una captura
   o una vista previa que no pinte filtros ni capas con transparencia— y el
   texto blanco pasa de 7:1 de contraste (AA y AAA de sobra). La receta para
   rehacerlo desde el original está en NO_SUBIR/project.md. */
.banda--asociate {
  padding: 4.5rem var(--alto-separacion);
  background-color: var(--color-footer);
  background-image: url("../images/asociate.webp");
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
}

.asociate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  align-items: center;
}

.asociate__titulo {
  font-family: var(--fuente-secundaria);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.22;
  color: #ffffff;
  text-wrap: balance;
}

.asociate__acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

/* El logo del pie, que ya está recortado para fondo oscuro */
.asociate__logo {
  width: 230px;
  max-width: 100%;
  height: auto;
}

/* El botón es aquí el único elemento con el que se puede interactuar: va un
   poco más grande que los del resto del sitio y con sombra para despegarlo
   de la foto. */
.banda--asociate .boton {
  padding: 1rem 2.25rem;
  font-size: 17px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Los títulos de sección llevan a su página de archivo */
.banda__enlace {
  color: inherit;
}

.banda__enlace:hover,
.banda__enlace:focus-visible {
  color: var(--color-primario);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.banda--50vh .banda__titulo {
  margin-bottom: 1.25rem;
}

.banda__titulo--pequeno {
  font-size: 26px;
}

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

/* Las tarjetas se reparten en columnas **y el grupo va siempre centrado**: con
   una sola tarjeta se centra ella sola, con dos salen dos columnas centradas y
   con tres, la fila entera. Si hay más, la fila que queda suelta también se
   centra. Con `grid` de columnas fijas eso no se puede: la tarjeta suelta se
   quedaba pegada a la izquierda ocupando un hueco de tres. Por eso es flex con
   ancho fijo por tarjeta: `justify-content: center` centra igual las filas llenas
   que la suelta. */
.tarjetas,
.rejilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  list-style: none;
}

/* Cada tarjeta ocupa una de las tres columnas posibles. Como las tarjetas no
   crecen (flex-grow: 0), cuando en una fila caben menos se quedan de su ancho y
   el conjunto se centra, en vez de estirarse. */
.tarjetas > li,
.rejilla > li {
  flex: 0 1 calc((100% - 4rem) / 3);
  min-width: 0;
}

.tarjeta {
  text-align: left;
  background: var(--color-fondo);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tarjeta:hover,
.tarjeta:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.tarjeta__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* La foto de la tarjeta se ajusta al hueco **entera**: se escala hasta tocar el ancho
   o el alto (lo que antes llegue), sin recortarla ni deformarla. Lo que sobra del hueco
   queda del color de fondo, que es clarito para que no cante. Para que la foto llene
   el hueco aunque haya que recortarla, basta cambiar `contain` por `cover`. */
.tarjeta__media {
  display: block;
  background: #f4f4f4;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.tarjeta__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  padding: 1rem 1.15rem 1.2rem;
}

.tarjeta__fecha {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primario);
}

.tarjeta__titulo {
  font-family: var(--fuente-secundaria);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-titulos);
}

.tarjeta__enlace:focus-visible {
  outline: 3px solid var(--color-primario);
  outline-offset: -3px;
}

/* En las bandas de 50vh la tarjeta no puede crecer sin límite */
.banda--50vh .tarjeta__media {
  max-height: 22vh;
}

/* Tarjeta compacta (mitad de ancho): foto a la izquierda y texto a la derecha.
   Van una debajo de otra a todo el ancho de su columna, así que ahí no hay nada
   que centrar. La regla lleva dos clases para ganarle a las de arriba y a las de
   los cortes de ancho de abajo. */
.tarjetas.tarjetas--compactas > li {
  flex: 0 1 100%;
}

.tarjetas--compactas {
  gap: 1rem;
}

.tarjeta--compacta .tarjeta__enlace {
  flex-direction: row;
  align-items: center;
}

.tarjeta--compacta .tarjeta__media {
  flex: 0 0 132px;
  aspect-ratio: 4 / 3;
  max-height: none;
}

.tarjeta--compacta .tarjeta__cuerpo {
  padding: 0.75rem 1rem;
}

.tarjeta--compacta .tarjeta__titulo {
  font-size: 17px;
}

/* Tarjetas de la revista GAUDEAMUS: la portada es vertical (480×680), así que
   no vale el 16/10 de las tarjetas de actividades. Toda la tarjeta es un
   enlace, de modo que la llamada a la acción es un texto, no un botón. */
.tarjeta--revista .tarjeta__media {
  aspect-ratio: 5 / 7;
  background: #f4f4f4;
}

.tarjeta__accion {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--fuente-secundaria);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-primario);
}

.sin-actividades {
  padding: 2.5rem 1rem;
  text-align: center;
  font-style: italic;
  color: #8a8a8a;
}

/* Botón «Ver más de …» de cada categoría en la página de actividades de la
   asociación: cierra la banda cuando quedan más entradas de las que se enseñan. */
.banda__mas {
  margin-top: 2rem;
  text-align: center;
}

/* ------------------------------------------- Página de archivo (categoría) */

.banda--archivo {
  padding: 2.75rem var(--alto-separacion);
}

.archivo__cuenta {
  margin-top: 2rem;
  text-align: center;
  font-size: 14px;
  color: #8a8a8a;
}

.categorias-nav__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  list-style: none;
  margin-bottom: 2.5rem;
}

.categorias-nav__enlace {
  font-family: var(--fuente-secundaria);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-texto);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.categorias-nav__enlace:hover,
.categorias-nav__enlace:focus-visible {
  color: var(--color-primario);
}

.categorias-nav__enlace[aria-current="page"] {
  color: var(--color-primario);
  border-bottom-color: var(--color-primario);
}

/* Paginación de los archivos (la construye js/actividades.js) */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2.5rem;
}

.paginacion:empty {
  display: none;
}

.paginacion__boton {
  min-width: 40px;
  height: 40px;
  padding: 0 0.6rem;
  font-family: var(--fuente-texto);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-titulos);
  background: var(--color-fondo);
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  cursor: pointer;
}

.paginacion__boton:hover:not(:disabled),
.paginacion__boton:focus-visible {
  border-color: var(--color-primario);
  color: var(--color-primario);
}

.paginacion__boton[aria-current="page"] {
  background: var(--color-primario);
  border-color: var(--color-primario);
  color: #ffffff;
}

.paginacion__boton:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ------------------------------------------------- Página de una actividad */

.entrada__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.entrada__fecha {
  color: var(--color-texto);
}

.entrada__separador {
  color: #bbbbbb;
}

.entrada__categoria {
  color: var(--color-primario);
}

.entrada__categoria:hover,
.entrada__categoria:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.entrada__titulo {
  font-size: 40px;
  max-width: 900px;
  margin: 0 auto;
}

.entrada__figura {
  display: flex;
  justify-content: center;
}

/* La foto grande de una actividad no lleva recorte: se ve a su proporción, ocupando el
   ancho de la página. Si es muy alta (una foto vertical de móvil), `max-height` la deja
   en un tamaño razonable y `contain` la encaja entera, sin deformarla. */
.entrada__imagen {
  width: 100%;
  max-width: var(--ancho-max);
  max-height: 80vh;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: #f4f4f4;
}

/* Fotografía dentro del texto de una página a mano (por ejemplo la de la Junta
   Directiva): se ve entera, sin el recorte 16/9 de las portadas de actividades,
   y se ajusta al ancho de la columna de texto. */
.entrada__figura--texto {
  margin: 0;
}

.entrada__figura--texto .entrada__imagen {
  aspect-ratio: auto;
  height: auto;
  max-width: 100%;
}

.entrada__texto {
  max-width: 820px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
}

.entrada__texto p {
  margin-bottom: 1.1rem;
}

.entrada__texto p:last-child {
  margin-bottom: 0;
}

.entrada__texto a {
  color: var(--color-primario);
  text-decoration: underline;
}

.entrada__texto strong {
  color: var(--color-titulos);
}

/* Subtítulos y listas dentro del texto de una página a mano (por ejemplo
   Historia y Obxetivos). En el sitio live eran títulos y guiones; aquí son
   listas de verdad y las mayúsculas se ponen con CSS en vez de escribirlas, que
   es mejor para los lectores de pantalla y para el buscador. */
.entrada__texto h2,
.entrada__texto h3 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.entrada__texto h2 {
  font-size: 26px;
  margin: 2.75rem 0 1rem;
}

.entrada__texto h3 {
  font-size: 19px;
  margin: 2rem 0 0.85rem;
}

/* El texto va pegado al borde de arriba: el primer subtítulo no necesita aire */
.entrada__texto > h2:first-child {
  margin-top: 0;
}

.entrada__texto ul {
  margin: 0 0 1.25rem 1.35rem;
  list-style: disc outside;
}

.entrada__texto li {
  margin-bottom: 0.55rem;
}

.entrada__texto > ul:last-child {
  margin-bottom: 0;
}

/* La cita de la revista GAUDEAMUS (el «acta de nacimiento» de la publicación):
   cursiva y centrada, como la pidió la asociación, separada de la introducción
   por una raya roja. */
.entrada__cita {
  margin: 2.75rem auto 0;
  padding: 0;
  font-style: italic;
  text-align: center;
  color: var(--color-texto);
}

.entrada__cita::before {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 0 auto 2rem;
  background: var(--color-primario);
}

.entrada__pie {
  background: var(--color-fondo);
}

.boton {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  font-family: var(--fuente-secundaria);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--color-primario);
  border-radius: 6px;
  transition: background 0.15s ease;
}

.boton:hover,
.boton:focus-visible {
  background: var(--color-primario-oscuro);
}

/* ---------------------------------------------------------------- Galería */

.banda--galeria .banda__titulo--pequeno {
  margin-bottom: 1.5rem;
  text-align: center;
}

/* La galería de la página Galería (galeria.html): rejilla fija de 4 columnas
   × 5 filas; js/galeria.js pagina a 20 fotos. Con menos ancho se ajusta el
   número de columnas; en la de actividades (.galeria a secas) no cambia nada.
   Doble clase a propósito: la regla base de .galeria va más abajo en el
   fichero y, a igualdad, la ganaría ella. */
.galeria.galeria--pagina {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 900px) {
  .galeria.galeria--pagina {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .galeria.galeria--pagina {
    grid-template-columns: 1fr;
  }
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.9rem;
  list-style: none;
}

.galeria__enlace {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #f4f4f4;
}

/* Igual que en las tarjetas: la foto se ve entera dentro del hueco (sin recortes). El
   visor a pantalla completa la sigue enseñando al máximo tamaño. */
.galeria__enlace img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.galeria__enlace:hover img,
.galeria__enlace:focus-visible img {
  transform: scale(1.06);
}

/* El vídeo de una actividad (solo si lleva): centrado dentro de la banda
   gris; la galería queda justo debajo. Por defecto la caja es vertical 9/16
   (los Shorts); con video-actividad--apaisado (watch/youtu.be) sale 16/9. */
.video-actividad {
  position: relative;
  margin: 0 auto;
  height: clamp(300px, 55vh, 560px);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.video-actividad iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  aspect-ratio: 9 / 16;
  border: 0;
}

.video-actividad--apaisado iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 1000px;
  left: 0;
  right: 0;
  transform: none;
  margin: 0 auto;
  top: 50%;
  bottom: auto;
  height: auto;
  translate: 0 -50%;
}

.banda--video {
  padding-bottom: 2.2rem;
}

.banda--video .banda__titulo--pequeno {
  margin-bottom: 1.5rem;
  text-align: center;
}

/* En pantallas estrechas la caja baja de alto para no comerse toda la pantalla. */
@media (max-width: 700px) {
  .video-actividad {
    height: 340px;
  }
}

/* Visor a pantalla completa (lo abre js/actividades.js) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  padding: 1.5rem;
}

.lightbox.is-open {
  display: flex;
}

.lightbox__imagen {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox__cerrar,
.lightbox__flecha {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 26px;
  line-height: 1;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.lightbox__cerrar:hover,
.lightbox__flecha:hover,
.lightbox__cerrar:focus-visible,
.lightbox__flecha:focus-visible {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox__cerrar {
  top: 1rem;
  right: 1rem;
}

.lightbox__flecha--anterior {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__flecha--siguiente {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

body.sin-scroll {
  overflow: hidden;
}

/* Visor de la revista (Real3D Flipbook). El plugin ajusta el alto del libro al
   ancho disponible, así que la caja se mide para que quepa en la pantalla: en
   escritorio el libro se ve a doble página (1,41 = dos páginas de 480×680) y en
   móvil a página suelta (0,71), en los dos casos sin salirse de la ventana. */
.lightbox--visor {
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1rem 1.25rem;
  z-index: 200; /* por encima del encabezado pegajoso, que va en 100 */
  /* Fondo opaco (el visor de las fotos de las actividades usa negro al 92%):
     aquí detrás hay un libro y la página del sitio solo distrae. */
  background: #0e0e0e;
}

.visor__titulo {
  font-family: var(--fuente-secundaria);
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
}

.visor__titulo:empty {
  display: none;
}

.visor__caja {
  width: min(94vw, 1180px, calc((100vh - 190px) * 1.41));
}

/* ------------------------------------------- Índice de actividades (carpeta) */

.categorias {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
}

.categoria-ficha__enlace {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 1.5rem 1.25rem;
  background: var(--color-fondo);
  border: 1px solid #dddddd;
  border-radius: 8px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.categoria-ficha__enlace:hover,
.categoria-ficha__enlace:focus-visible {
  border-color: var(--color-primario);
  transform: translateY(-2px);
}

.categoria-ficha__titulo {
  font-family: var(--fuente-secundaria);
  font-size: 19px;
  font-weight: 600;
  color: var(--color-titulos);
}

.categoria-ficha__cuenta {
  font-size: 14px;
  color: #8a8a8a;
}

/* ----------------------------------------------------------- Responsive */

@media (max-width: 900px) {
  .rejilla,
  .tarjetas {
    gap: 1.25rem;
  }

  .rejilla > li,
  .tarjetas > li {
    flex-basis: calc((100% - 1.25rem) / 2);
  }

  .banda__inner--mitades {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* El fondo pasa a la versión estrecha (21 KB) y la rejilla se apila: el
     texto arriba y el logo con el botón debajo. */
  .banda--asociate {
    background-image: url("../images/asociate-900.webp");
    background-position: center 30%;
  }

  .asociate {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    text-align: center;
  }

  .asociate__titulo {
    font-size: 30px;
  }

  .asociate__logo {
    width: 180px;
  }

  .banda--50vh .banda__titulo {
    margin-bottom: 1rem;
  }

  .banda__titulo--pequeno {
    font-size: 22px;
  }

  .entrada__titulo {
    font-size: 30px;
  }

  .entrada__texto {
    font-size: 16px;
  }

  /* Los subtítulos del texto bajan con el resto: en mayúsculas "pedían" menos */
  .entrada__texto h2 {
    font-size: 21px;
  }

  .entrada__texto h3 {
    font-size: 18px;
  }

  .categorias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .rejilla > li,
  .tarjetas > li {
    flex-basis: 100%;
  }

  .tarjeta__titulo {
    font-size: 18px;
  }

  .banda--50vh {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .banda--asociate {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .asociate__titulo {
    font-size: 25px;
  }

  .banda--asociate .boton {
    padding: 0.9rem 1.75rem;
    font-size: 15px;
  }

  .galeria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .categorias-nav__lista {
    gap: 0.4rem 1rem;
  }

  .categorias-nav__enlace {
    font-size: 13px;
  }

  /* En el móvil las tarjetas de las bandas pasan a horizontal: así las tres
     caben en el 50% de alto sin obligar a bajar media pantalla. */
  .banda--50vh .tarjeta__enlace {
    flex-direction: row;
    align-items: center;
  }

  .banda--50vh .tarjeta__media {
    flex: 0 0 116px;
    aspect-ratio: 4 / 3;
    max-height: none;
  }

  .banda--50vh .tarjeta__cuerpo {
    padding: 0.65rem 0.9rem;
  }

  .banda--50vh .tarjeta__fecha {
    font-size: 12px;
  }

  .banda--50vh .tarjeta__titulo {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   Footer — 1 fila × 4 columnas (widget del tiempo dentro de columna)
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-footer);
  color: var(--color-footer-texto);
  margin-top: auto;
}

.site-footer__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 2.5rem var(--alto-separacion) 1.5rem;
  display: grid;
  grid-template-columns: 20fr 20fr 20fr 40fr;
  gap: 2.5rem;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer__col h2 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--fuente-secundaria);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: var(--color-footer-texto);
}

/* Widget del tiempo dentro de una columna (40%) */

.site-footer__weather {
  width: 100%;
}

.site-footer__weather h2 {
  font-family: var(--fuente-titulo);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-primario-oscuro);
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem 0;
}

.site-footer__weather iframe {
  width: 100%;
  min-height: 180px;
  border: 0;
  border-radius: 6px;
}

/* Logo del pie: centrado en su columna y un 30% más grande que antes (64px) */

.site-footer__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.site-footer__logo img {
  height: calc(64px * 1.3);
  width: auto;
  margin-bottom: 0.5rem;
}

.site-footer__desc {
  font-family: var(--fuente-texto);
  font-size: 16px;
  font-weight: 500;
  opacity: 0.9;
}

.site-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer__links a {
  color: var(--color-footer-texto);
  font-family: var(--fuente-texto);
  font-size: 16px;
  font-weight: 500;
  opacity: 0.85;
}

.site-footer__links a[aria-current="page"] {
  opacity: 1;
  color: var(--color-primario);
  text-decoration: underline;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  opacity: 1;
  color: var(--color-primario);
  text-decoration: underline;
  outline: none;
}

/* Redes sociales del footer: misma fila de iconos que en el header */

.site-footer__social {
  margin-top: 1rem;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1rem var(--alto-separacion);
  text-align: center;
  font-family: var(--fuente-texto);
  font-size: 0.8rem;
  opacity: 0.75;
}

/* ==========================================================================
   BUZÓN DE SUGERENCIAS (contacto.html)

   La página tiene dos columnas, como en el sitio live: a la izquierda la
   presentación y la dirección postal, a la derecha el formulario. Debajo está
   la ventana con la información de protección de datos, que el visitante tiene
   que leer y aceptar para poder enviar. El formulario lo manda
   buzon-enviar.php y lo controla js/buzon.js.
   ========================================================================== */

.buzon {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 2.5rem 3rem;
  align-items: start;
}

.buzon__columna {
  min-width: 0;
}

/* Dentro de la columna el texto ocupa todo el ancho: la medida de lectura ya la
   marca la propia columna. */
.buzon .entrada__texto {
  max-width: none;
  margin: 0;
}

/* <address> sale en cursiva por defecto */
.buzon__direccion {
  font-style: normal;
  margin-bottom: 1.1rem;
}

/* ------------------------------------------------------------ El formulario */

.buzon__form {
  display: grid;
  gap: 1.1rem;
  max-width: 640px;
  padding: 1.75rem;
  background: #f7f7f7;
  border-radius: 8px;
}

.buzon__obligatorios {
  font-size: 14px;
  color: var(--color-texto);
}

.campo {
  display: grid;
  gap: 0.35rem;
}

.campo__etiqueta {
  font-family: var(--fuente-texto);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-titulos);
}

.campo__control {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: var(--fuente-texto);
  font-size: 16px;
  color: var(--color-titulos);
  background: var(--color-fondo);
  border: 1px solid #cccccc;
  border-radius: 6px;
}

.campo__control:focus-visible {
  outline: 3px solid var(--color-primario);
  outline-offset: 1px;
  border-color: var(--color-primario);
}

.campo__control--area {
  min-height: 180px;
  resize: vertical;
}

/* La casilla de protección de datos: la casilla y su texto, uno al lado del otro */
.campo--acepto {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
}

.campo__check {
  width: 20px;
  height: 20px;
  margin-top: 0.2rem;
  accent-color: var(--color-primario);
}

.campo__etiqueta--check {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-texto);
}

/* Campo con error: lo marca js/buzon.js y el aviso lo escribe él mismo */
.campo--error .campo__control {
  border-color: var(--color-primario);
  background: #fff6f6;
}

.campo__error {
  font-size: 14px;
  color: var(--color-primario);
}

/* El aviso de la casilla va debajo de su texto, no debajo de la casilla */
.campo--acepto .campo__error {
  grid-column: 2;
}

.campo__error[hidden] {
  display: none;
}

.buzon__privacidad {
  margin-top: -0.35rem;
}

.buzon__enlace-modal {
  font-family: var(--fuente-texto);
  font-size: 15px;
  color: var(--color-primario);
  text-decoration: underline;
}

/* Trampa para los robots que rellenan todos los campos: sigue en el formulario
   (no se usa display:none, que algunos detectan) pero nadie la ve. */
.buzon__oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.buzon__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* El aviso de la casilla está ahí desde el primer momento, para que se entienda
   por qué el botón está apagado (así no hay que adivinar qué falta). */
.buzon__aviso-acepto {
  flex: 1 1 260px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-texto);
}

.buzon__aviso-acepto[hidden] {
  display: none;
}

.buzon__enviar,
.modal__aceptar {
  border: 0;
  cursor: pointer;
}

.buzon__enviar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.buzon__resultado {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-texto);
}

.buzon__resultado--ok {
  color: #1a7f37;
}

.buzon__resultado--error {
  color: var(--color-primario);
}

/* ------------------------------------------ Ventana de protección de datos */

.modal {
  position: fixed;
  inset: 0;
  z-index: 300; /* por encima del encabezado pegajoso (100) y del visor (200) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.75);
}

/* Sin esto el display:flex de arriba ganaría al [hidden] del navegador */
.modal[hidden] {
  display: none;
}

.modal__caja {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(780px, 100%);
  max-height: min(88vh, 860px);
  background: var(--color-fondo);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.modal__cerrar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 28px;
  line-height: 1;
  color: var(--color-texto);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.modal__cerrar:hover,
.modal__cerrar:focus-visible {
  color: var(--color-titulos);
  background: #f0f0f0;
}

.modal__titulo {
  margin: 0;
  padding: 1.5rem 4rem 0.85rem 1.75rem;
  font-family: var(--fuente-secundaria);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-titulos);
}

/* El texto es largo: hace scroll dentro de la ventana y el botón de aceptar
   queda siempre a la vista. */
.modal__texto {
  overflow-y: auto;
  padding: 0 1.75rem 1.25rem;
  font-family: var(--fuente-texto);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-texto);
}

.modal__texto p {
  margin-bottom: 0.9rem;
}

.modal__texto ul {
  margin: 0 0 1.1rem 1.25rem;
  list-style: disc outside;
}

.modal__texto li {
  margin-bottom: 0.65rem;
}

.modal__texto a {
  color: var(--color-primario);
  text-decoration: underline;
}

.modal__sangria {
  padding-left: 1.5rem;
}

.modal__acciones {
  padding: 1rem 1.75rem 1.5rem;
  border-top: 1px solid #e5e5e5;
  text-align: right;
}

@media (max-width: 900px) {
  .buzon {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .buzon__form {
    max-width: none;
    padding: 1.25rem;
  }
}

/* En móvil la ventana aprovecha toda la pantalla */
@media (max-width: 700px) {
  .modal {
    padding: 0;
  }

  .modal__caja {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* --------------------------------------------------------------------------
   Responsive — hero
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero__container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 0;
  }

  /* En móvil, fondo más ligero (181 KB en vez de 275 KB) */
  .hero__bg {
    background-image: url('../images/fondo-campus-1280.jpg');
  }

  .hero__text {
    align-items: center;
    text-align: center;
  }

  .hero__text h1 {
    font-size: 30px;
  }

  .hero__tag {
    border-left: 0;
    padding-left: 0;
    text-align: center;
  }

  .hero__video {
    height: 300px;
    min-height: 240px;
  }

  .hero__video:hover::after,
  .hero__video:focus-visible::after {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
  }
}

/* --------------------------------------------------------------------------
   Responsive — menú plegable y una sola columna
   El menú horizontal pasa a botón "Menú" antes de que le falte espacio.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  h1,
  .site-main__placeholder h1,
  .site-main__placeholder h2 {
    font-size: 30px;
  }

  .nav__toggle {
    display: inline-flex;
  }

  .nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-top: 0;
    padding: 0.75rem var(--alto-separacion) 1.25rem;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  }

  .nav__menu.is-open {
    display: block;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
  }

  .nav__link {
    font-size: 16px;
    padding: 0.6rem 0.75rem;
  }

  .nav__link--has-sub {
    padding-right: 0.65rem;
  }

  .nav__link--has-sub::after {
    right: 0.75rem;
  }

  .nav__submenu {
    position: static;
    display: block;
    min-width: 0;
    padding: 0 0 0.25rem 1rem;
    box-shadow: none;
    background: transparent;
  }

  .nav__submenu .nav__link {
    font-size: 16px;
    white-space: normal;
    opacity: 0.95;
  }

}

@media (max-width: 1024px) {
  .site-footer__weather-wrapper {
    order: -1;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .site-header__top {
    flex-wrap: wrap;
    row-gap: 0.6rem;
  }

  .site-header__logo {
    margin-inline: auto;
  }

  .site-header__logo img {
    height: 40px;
  }

  /* En pantallas estrechas las acciones (redes, idioma, Menú) bajan a una
     segunda línea centrada: así el header nunca se sale, ni a 320px. */
  .site-header__actions {
    flex-basis: 100%;
    margin-left: 0;
    justify-content: center;
    gap: 1rem;
  }

  .site-header__social-link {
    width: 30px;
    height: 30px;
  }

  .site-header__lang-btn {
    width: 32px;
    height: 32px;
  }
}

/* ==========================================================================
   BANDA DE COOKIES (js/cookies.js la crea y la inyecta en el body)

   Banda fija abajo, en el negro del pie para que se lea como capa propia del
   sitio y no tape el contenido con llamatividad. Esta web solo tiene cookies
   técnicas (idioma y este aviso), así que el texto lo dice sin rodeos: se
   acepta, se rechaza lo no imprescindible (no hay ninguno hoy) o se va a la
   política. El bloque [hidden] hace falta porque abajo hay un display:flex
   que ganaría al [hidden] del navegador.
   ========================================================================== */

.cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 250; /* sobre el encabezado pegajoso (100), bajo los modales (300) */
  background: var(--color-footer);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
}

.cookies[hidden] {
  display: none;
}

.cookies__caja {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 1rem var(--alto-separacion);
}

.cookies__titulo {
  flex: none;
  font-family: var(--fuente-titulo);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-footer-texto);
}

.cookies__texto {
  flex: 1 1 auto;
  font-family: var(--fuente-texto);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

.cookies__enlace {
  color: var(--color-footer-texto);
  text-decoration: underline;
  white-space: nowrap;
}

.cookies__enlace:hover,
.cookies__enlace:focus-visible {
  color: #ffffff;
}

.cookies__botones {
  flex: none;
  display: flex;
  gap: 0.65rem;
}

/* Los dos botones son .boton (rojo); el de rechazar se pinta en negro con
   borde para que «aceptar» no parezca el único camino posible. */
.cookies__botones .boton {
  padding: 0.55rem 1.1rem;
  font-size: 13px;
  white-space: nowrap;
}

.cookies__rechazar {
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.cookies__rechazar:hover,
.cookies__rechazar:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

/* «Configuración de cookies» (pie): no navega, reabre la banda. Lo gestiona
   js/cookies.js; aquí solo se le da el aire de los enlaces del pie. */
.site-footer__enlace-cookies {
  display: inline-block;
  margin-top: 0.85rem;
  color: var(--color-footer-texto);
  font-family: var(--fuente-texto);
  font-size: 16px;
  font-weight: 500;
  opacity: 0.85;
  text-decoration: underline;
}

.site-footer__enlace-cookies:hover,
.site-footer__enlace-cookies:focus-visible {
  opacity: 1;
  color: var(--color-primario);
  outline: none;
}

/* Tablet y móvil: el título se funde con el texto y las columnas pasan a
   apilarse; los botones ocupan su fila con ancho completo. */
@media (max-width: 900px) {
  .cookies__caja {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.9rem var(--alto-separacion) 1.1rem;
  }

  .cookies__titulo {
    margin: 0;
  }

  .cookies__botones {
    flex-direction: row;
  }

  .cookies__botones .boton {
    flex: 1;
    text-align: center;
    /* «Rechazar las no imprescindibles» no cabe en una línea a 390px: se
       permite que el texto parta en dos en pantallas estrechas. */
    white-space: normal;
  }
}

@media (max-width: 380px) {
  .cookies__botones {
    flex-direction: column;
  }
}

/* Respeta a quien pide menos movimiento: el slider deja de girar solo */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}