/* ============================================================
   FUNDACIÓN BANÚS · COMPONENTES
   Todo se apoya en tokens semánticos, nunca en primitivas.
   Consecuencia: cualquier bloque puesto en [data-surface="arena"]
   se recolorea solo y sigue cumpliendo contraste.
   ============================================================ */

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

/* El peso vive aquí, en body, y no en .cuerpo: así lo hereda todo lo
   que no declare uno propio, que es exactamente la definición de "texto
   sin voz asignada". Antes no se declaraba en ningún sitio y ese texto
   caía en el 400 por defecto del navegador — la única voz del sistema
   que nadie había elegido.

   CONSECUENCIA BUSCADA, NO DESCUIDO: además del texto de lectura, esto
   aligera el menú (.nav__item), los enlaces con flecha (.enlace-flecha)
   y la línea legal del pie (.pie__legal), que tampoco declaraban peso.
   Los tres pasan de 400 a 200. Se miró y se decidió dejarlos así: la
   interfaz acompaña al tono fino del conjunto en vez de plantarle
   encima un gris más sólido.

   Si algún día uno de ellos se ve frágil —el menú es el candidato, va a
   --text-menor—, la solución es declararle su peso a esa pieza, nunca
   subir --fw-lectura: eso engordaría los párrafos largos, que es justo
   lo que se vino a arreglar. */
body {
  margin: 0;
  background: var(--surface);
  color: var(--texto);
  font-family: var(--font-texto);
  font-size: var(--text-cuerpo);
  font-weight: var(--fw-lectura);
  line-height: var(--lh-cuerpo);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--acento-suelo);
  color: var(--texto);
}

/* Foco visible siempre: es interfaz pública, se navega con teclado. */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Salto al contenido: obligatorio para navegación por teclado. Vive en el
   sistema —no en cada hoja de página— porque lo lleva TODA página; tenerlo
   por duplicado en los CSS de página dejaba el enlace visible en las que no
   cargaban esa hoja (contacto, aviso legal, privacidad). */
.salto {
  position: absolute;
  left: -9999px;
  top: var(--space-sm);
  z-index: 10;
  background: var(--fb-negro-calido);
  color: var(--fb-blanco-roto);
  padding: var(--space-xs) var(--space-md);
  text-decoration: none;
}

.salto:focus { left: var(--space-sm); }

/* ---------- Superficies ---------- */
.superficie {
  background: var(--surface);
  color: var(--texto);
}

.seccion {
  padding-block: var(--seccion-y);
  /* Aire al llegar por un enlace ancla (p. ej. "Ver convocatorias" →
     #becas): la sección no queda pegada al borde superior. */
  scroll-margin-top: var(--space-lg);
}

/* Desplazamiento suave al saltar a una sección por su ancla. Solo si el
   usuario no ha pedido reducir movimiento. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.contenedor {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------- Tipografía ---------- */

/* Rótulo monumental. Mayúsculas + tracking amplio = "grabado en fachada". */
.rotulo {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: var(--text-display);
  line-height: var(--lh-apretado);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  margin: 0;
}

.rotulo--hero {
  font-size: var(--text-hero);
  letter-spacing: var(--track-hero);
}

/* El tracking en mayúsculas deja un hueco fantasma tras la última letra.
   Con el texto alineado a la izquierda ese hueco cae al final de la línea
   y no desplaza nada, así que no se compensa: hacerlo con un margen
   negativo solo ensanchaba la caja y desbordaba la pantalla en anchos
   estrechos. Si algún día un rótulo va centrado, la compensación se pone
   ahí y solo ahí. */

/* Etiqueta pequeña sobre el rótulo: "(01) ENTENDIMIENTO DEL PROYECTO" */
.eyebrow {
  font-family: var(--font-texto);
  font-size: var(--text-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin: 0 0 var(--space-sm);
}

.eyebrow--acento { color: var(--acento-display); }

/* Voz editorial. El briefing es explícito: "va en dosis pequeñas". */
.editorial {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--texto-editorial);
  max-width: var(--medida);
  margin: 0;
}

.editorial--display {
  font-size: var(--text-display);
  line-height: var(--lh-titulo);
  color: var(--texto);
}

.editorial em,
.editorial .destacado {
  font-style: italic;
  color: var(--acento-texto);
}

.titulo {
  font-family: var(--font-texto);
  font-size: var(--text-titulo);
  font-weight: var(--fw-regular);
  line-height: var(--lh-titulo);
  margin: 0;
}

.cuerpo {
  max-width: var(--medida);
  color: var(--texto-tenue);
  margin: 0;
}

.cuerpo + .cuerpo { margin-top: var(--space-sm); }

/* ---------- Enlaces ---------- */
/* Subrayado fino que engorda al pasar: editorial, no de botón. */
.enlace,
.prosa a {
  color: var(--acento-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--acento-suelo);
  transition: text-decoration-color var(--dur-rapida) var(--ease);
}

.enlace:hover,
.prosa a:hover { text-decoration-color: currentColor; }

/* ---------- Enlace con flecha ----------
   Para los "ver todo" al pie de una sección. Pesa poco a propósito: no
   compite con el contenido que remata. Sin subrayado —la flecha ya dice
   que es un enlace— y a cuerpo menor. La flecha es larga y fina, como la
   que cierra el briefing, y avanza un poco al pasar el ratón: el gesto
   refuerza hacia dónde lleva. */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-menor);
  color: var(--texto-tenue);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease);
}

.enlace-flecha__icono {
  flex: none;
  width: 2.75rem;
  height: auto;
  color: var(--acento-display);
  transition: transform var(--dur-media) var(--ease);
}

.enlace-flecha:hover {
  color: var(--texto);
}

.enlace-flecha:hover .enlace-flecha__icono {
  transform: translateX(0.35rem);
}

/* Pie de sección: el enlace se va a la derecha y queda cerca de las
   tarjetas, como remate y no como bloque aparte. */
.seccion__pie {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-sm);
}

/* En móvil el enlace flota a la derecha y queda descuadrado respecto a lo
   que tiene encima (p. ej. "Cómo participar", alineada al margen). Apilado,
   debe caer al mismo margen izquierdo, uno debajo de otro. */
@media (max-width: 820px) {
  .seccion__pie { justify-content: flex-start; }
}

/* ---------- Regla de sección ---------- */
/* La banda doble de la cabecera del briefing. */
.regla {
  border: 0;
  height: var(--regla-gruesa);
  background: var(--borde-fuerte);
  margin: 0;
}

.regla--fina {
  height: var(--linea);
  background: var(--borde);
}

/* ---------- Lista numerada (objetivos, mapa del sitio) ---------- */
.lista-num {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: item;
}

.lista-num > li {
  counter-increment: item;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-top: var(--linea) solid var(--borde);
}

.lista-num > li:last-child { border-bottom: var(--linea) solid var(--borde); }

/* La numeración es rótulo, no texto: aquí el rosa Banús sí cumple. */
.lista-num > li::before {
  content: counter(item, decimal-leading-zero);
  font-family: var(--font-texto);
  font-size: var(--text-menor);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  color: var(--acento-display);
}

.lista-num__titulo {
  font-size: var(--text-cuerpo);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2xs);
}

.lista-num__desc {
  color: var(--texto-tenue);
  font-size: var(--text-menor);
  margin: 0;
  max-width: var(--medida);
}

/* ---------- Evento (agenda) ----------
   Cada cita se presenta con su cartel. Es una decisión con coste: un
   evento sin pieza gráfica no entra bien aquí, así que la sección pide
   diseño por evento — asumido y presupuestado como mantenimiento.
   Para cuando el cartel aún no exista, ver .evento__figura--pendiente:
   el hueco se ve deliberado y no roto. */
/* NORMA: o las tres tarjetas van en una fila, o se desliza en carrusel.
   Nunca se parten en una segunda fila.

   No hace falta ni media query ni JavaScript, y no hay ningún ancho de
   corte inventado: flex-wrap vale "nowrap" por defecto, así que las
   tarjetas no bajan nunca. A partir de ahí, las tres reglas de .evento
   (crecer sí, encoger no, base 300px) hacen todo el trabajo:

     · Si caben las tres → crecen y reparten la fila entre ellas.
     · Si no caben       → al no encoger, desbordan, y ese desbordamiento
                           ES el carrusel. El punto exacto en el que pasa
                           lo decide la suma de los anchos, no un número
                           que haya escrito yo.
     · Con una o dos     → el tope de 380px impide que se estiren hasta
                           quedar deformes. */
.agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* Al deslizar, la tarjeta encaja alineada con el margen del texto y no
     pegada al filo de la pantalla. */
  scroll-padding-inline-start: 0;
  /* Aire abajo para que el filete y el foco del teclado no queden
     cortados por el borde del contenedor de scroll. */
  padding-bottom: var(--space-2xs);
  /* Barra de scroll oculta: cuando el carrusel se activa, la tarjeta
     siguiente asomando ya invita a deslizar, así que la barra sobra. El
     deslizamiento sigue funcionando (rueda, trackpad, táctil, teclado);
     solo desaparece el elemento visual. */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* Edge antiguo */
}

/* Chrome y Safari: la barra se oculta con el pseudo-elemento. */
.agenda::-webkit-scrollbar {
  display: none;
}

.agenda > .evento {
  flex: 1 0 300px;
  max-width: 380px;
  scroll-snap-align: start;
}

/* Filete fino alrededor de toda la tarjeta: el borde es el que hace el
   trabajo editorial, no una sombra ni un relleno. Se refuerza al pasar
   el ratón en vez de mover la tarjeta de sitio. */
.evento {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--linea) solid var(--borde);
  transition: border-color var(--dur-media) var(--ease);
}

.evento:hover {
  border-color: var(--borde-fuerte);
}

.evento__figura {
  margin: 0;
  overflow: hidden;
  background: var(--surface-panel);
  /* La proporción la fija el contenedor, no el archivo: así los carteles
     cuadran entre sí aunque lleguen a distintos tamaños, y no hay salto
     de maqueta mientras la imagen carga. */
  aspect-ratio: 3 / 2;
}

/* El texto vive dentro del filete, con aire suficiente para que la
   tarjeta lea como una ficha de catálogo y no como un bloque apretado. */
.evento__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-md);
  /* Llena la tarjeta para que los datos puedan anclarse al fondo. */
  flex: 1;
}

.evento__figura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease);
}

.evento:hover .evento__figura img {
  transform: scale(1.03);
}

/* Cartel aún no entregado. Mismo lenguaje de tramas que el briefing:
   comunica "falta una pieza", no "la web está rota". */
.evento__figura--pendiente {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 6px,
    var(--borde) 6px 7px
  );
}

.evento__figura--pendiente span {
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* La fecha manda: es una agenda. Va en el acento de rótulo, igual que
   la numeración de las listas — cifra, no texto corrido. */
.evento__fecha {
  font-size: var(--text-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--acento-display);
}

.evento__titulo {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: var(--text-lead);
  line-height: var(--lh-titulo);
  margin: 0;
  /* Reserva el alto de dos líneas siempre: así un título de una línea
     ocupa lo mismo que uno de dos y el extracto arranca a la misma altura
     en todas las tarjetas. */
  min-height: calc(var(--lh-titulo) * 2em);
}

.evento__enlace {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease);
}

/* El enlace se estira sobre toda la tarjeta: se puede pulsar en
   cualquier punto, pero el lector de pantalla anuncia un solo enlace
   con el título por nombre, no un chorro con la fecha y el lugar. */
.evento__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
}

.evento:hover .evento__enlace {
  color: var(--acento-texto);
}

/* Extracto: dos o tres líneas para saber de qué va la cita sin entrar.
   La medida corta es a propósito — es un aperitivo, no la sinopsis. */
.evento__extracto {
  font-size: var(--text-menor);
  line-height: var(--lh-cuerpo);
  color: var(--texto-tenue);
  margin: 0;
}

/* Ficha de datos, separada por una regla fina. Va en <dl> porque es
   literalmente una lista de pares etiqueta-valor: quien use lector de
   pantalla oye "Hora: 20:30" y no dos textos sueltos. */
.evento__datos {
  /* Anclados al fondo: el margen automático empuja los datos abajo, así
     hora y lugar cuadran entre tarjetas aunque el extracto tenga más o
     menos líneas. */
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: var(--linea) solid var(--borde);
  width: 100%;
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--text-micro);
}

.evento__dato {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
}

.evento__datos dt {
  flex: 0 0 4rem;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.evento__datos dd {
  margin: 0;
  color: var(--texto);
}

/* ---------- Novedades (Actualidad) ----------
   Listado editorial de novedades: crónicas de eventos, anuncios de
   ganadores y apariciones en prensa. Lo usan la página de Actualidad y
   el teaser de la home, por eso vive en el sistema.

   SIN PORTADAS a propósito: "la jerarquía la hace la tipografía, no un
   cartel". Cada entrada existe con solo fecha, etiquetas, titular y
   extracto; la imagen es un extra que vive dentro de la crónica y su
   galería, nunca un requisito del listado. Se recolorea solo en negro,
   arena o piedra como todo lo demás. */
.novedades {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  border-top: var(--linea) solid var(--borde);
}

/* Estructura ÚNICA para todos los anchos: meta arriba (fecha +
   etiquetas) y cuerpo debajo. Sin columna de ancho fijo —se probó y se
   apelmazaba en anchos intermedios—, así la fila respira a cualquier
   medida. Las tres variantes (crónica interna, prensa externa, anuncio)
   son solo el destino del enlace; el tipo lo dice la etiqueta. */
.novedad {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* Aire generoso arriba/abajo y padding lateral FLUIDO: mucho en
     pantalla grande, se reduce con suavidad al estrechar en vez de
     saltar de golpe. La fila respira dentro de su regla en lugar de
     pegarse al filo del contenedor. */
  padding: var(--space-xl) clamp(var(--space-sm), 4vw, var(--space-lg));
  border-bottom: var(--linea) solid var(--borde);
  transition: background-color var(--dur-media) var(--ease);
}

/* Un lavado sutil al pasar el ratón, sin mover la fila. */
.novedad:hover {
  background: color-mix(in srgb, var(--texto) 3%, transparent);
}

/* Fila de meta: fecha + etiquetas, siempre en línea (envuelve como
   bloque si no cabe). Espaciado unificado: space-2xs entre etiquetas,
   space-md entre la fecha y el grupo de etiquetas. */
.novedad__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
}

/* La fecha manda: es un índice cronológico. Cifra en acento, no texto. */
.novedad__fecha {
  font-size: var(--text-menor);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--acento-display);
}

.novedad__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* Todas las pastillas del meta comparten caja (mismo cuerpo y relleno),
   lleven o no el modificador --cat: así categoría y tipo casan en altura
   y no se descuadran. La jerarquía la marca el color/peso de cada
   variante, no el tamaño. */
.novedad__etiquetas .etiqueta {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  padding: 2px var(--space-2xs);
}

/* Cuerpo: titular editorial + extracto + acción. */
.novedad__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.novedad__titulo {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: var(--text-titulo);
  line-height: var(--lh-titulo);
  margin: 0;
  text-wrap: balance;
}

.novedad__enlace {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease);
}

/* El enlace se estira sobre toda la fila: se pulsa en cualquier punto,
   pero el lector de pantalla anuncia un solo enlace con el título. */
.novedad__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
}

.novedad:hover .novedad__enlace {
  color: var(--acento-texto);
}

.novedad__extracto {
  font-size: var(--text-cuerpo);
  line-height: var(--lh-cuerpo);
  color: var(--texto-tenue);
  margin: 0;
  max-width: var(--medida);
}

/* La acción remata la fila y dice a dónde lleva: «Leer la crónica →»,
   «<Medio> ↗» (prensa externa), «Ver los relatos premiados →». Pesa
   poco a propósito; la flecha avanza un poco al pasar el ratón. */
.novedad__accion {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-menor);
  color: var(--texto-tenue);
}

.novedad__accion svg {
  width: 2.25rem;
  height: auto;
  color: var(--acento-display);
  transition: transform var(--dur-media) var(--ease);
}

/* La flecha compacta de "abre en otra web" es cuadrada; se le fija el
   ancho para que no herede el de la flecha larga. */
.novedad__accion svg.novedad__accion-externo {
  width: 1.1rem;
}

.novedad:hover .novedad__accion {
  color: var(--texto);
}

.novedad:hover .novedad__accion svg {
  transform: translateX(0.3rem);
}

@media (max-width: 640px) {
  /* La estructura ya es única; en pantalla estrecha solo se recorta un
     poco el aire vertical y el titular baja a tamaño lead para no
     dominar de más. */
  .novedad { padding-block: var(--space-lg); }
  .novedad__titulo { font-size: var(--text-lead); }
}

/* ---------- Convocatoria ----------
   La pieza central de "Becas y Concursos". El briefing pide
   «convocatorias claras, con bases descargables y un camino evidente
   para presentarse», así que manda el dato duro —premio, plazo— y la
   descarga, no la prosa.

   Dos columnas: a la izquierda el relato, a la derecha la ficha con las
   cifras. La ficha va sobre superficie piedra, que hasta ahora no se
   usaba en la home: destaca sin necesidad de otro color. */
/* Tres filas, y cada una hace un trabajo. La clave es que el estado
   ocupe una fila entera para sí: así la ficha arranca en la SEGUNDA
   fila, exactamente a la altura del título, sin empujarla con márgenes
   calculados a ojo que se descuadran en cuanto cambia un texto.
   Y al compartir fila con el bloque de título y párrafo, la ficha
   termina justo donde termina el párrafo. La alineación es estructural. */
.convocatoria {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas:
    "estado    ."
    "principal ficha"
    "acciones  acciones";
  column-gap: var(--space-xl);
  row-gap: var(--space-md);
  align-items: start;
}

.convocatoria__estado {
  grid-area: estado;
  justify-self: start;
  /* El aire que la separa del título; pegada parecía su antetítulo. */
  margin-bottom: var(--space-md);
}

.convocatoria__principal {
  grid-area: principal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

/* Los <br> del HTML fijan el corte en dos líneas. Para que se respete,
   la línea más larga («XXVI Concurso de Cuentos») tiene que caber en la
   columna: al cuerpo de --text-display pedía más de lo que hay y el
   navegador añadía sus propios saltos, partiéndolo en cuatro. */
.convocatoria__titulo {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: var(--lh-titulo);
  margin: 0;
}

/* A cuerpo de entradilla el párrafo competía con el título y se leía
   pesado. Es una aclaración, no un lema: baja a cuerpo de texto. */
.convocatoria__texto {
  font-size: var(--text-cuerpo);
  line-height: var(--lh-cuerpo);
  color: var(--texto-tenue);
  max-width: var(--medida);
  margin: 0;
}

/* Descargar a la izquierda, "cómo participar" empujado al extremo
   derecho de la columna: el margen automático se come el hueco entre
   ambos, sin depender de un ancho fijo. */
.convocatoria__acciones {
  grid-area: acciones;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

.convocatoria__acciones .enlace-flecha {
  margin-inline-start: auto;
}

/* La ficha, en clave editorial: sin recuadro, sin fondo y sin cifras en
   rosa. Antes era un panel con borde y los premios enormes en color de
   acento — el lenguaje exacto de una etiqueta de precio, que es justo lo
   que este briefing no quiere. Ahora son reglas finas y pares
   etiqueta-valor, como el colofón de un catálogo: la jerarquía la hace
   la tipografía, no un cartel. */
.convocatoria__ficha {
  grid-area: ficha;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-top: var(--linea) solid var(--borde);
  display: grid;
  /* Estira hasta el fondo de su fila y reparte las cuatro líneas por el
     camino: así empieza con el título y acaba con el párrafo, sea cual
     sea el largo del texto. El espaciado lo pone el hueco disponible, no
     un relleno fijo que había que ajustar a mano. */
  height: 100%;
  align-content: space-between;
}

.convocatoria__dato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-2xs);
  border-bottom: var(--linea) solid var(--borde);
}

.convocatoria__ficha dt {
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* Los importes en Public Sans, no en Bodoni: las cifras piden la voz
   neutra de los datos —la que el briefing reserva a interfaz y
   formularios—, donde el número se lee limpio. En Bodoni, un serif de
   alto contraste, los dígitos hacían floritura. En blanco roto y no en
   rosa para que suenen a dato, no a oferta. */
/* En light, no regular: a este cuerpo y en blanco roto sobre negro, el
   400 de Public Sans se leía robusto, casi en negrita. El 300 devuelve
   el aire fino que pide el tono editorial. El número sigue destacando
   por su color pleno, no por el grosor del trazo. */
.convocatoria__ficha dd {
  margin: 0;
  font-family: var(--font-texto);
  font-weight: var(--fw-light);
  font-size: var(--text-cuerpo);
  line-height: 1.3;
  color: var(--texto);
  text-align: right;
}

/* Plazo y fallo son fechas, no premios: bajan un escalón, también en
   light y en color atenuado. */
.convocatoria__dato--fecha dd {
  font-family: var(--font-texto);
  font-weight: var(--fw-light);
  font-size: var(--text-cuerpo);
  color: var(--texto-tenue);
}

@media (max-width: 820px) {
  /* Una columna: todo se apila en el orden de lectura. Hay que redefinir
     también las áreas —si no, las del lado derecho se quedan sin columna
     donde caer— y anular el estirado de la ficha, que solo tiene sentido
     cuando comparte fila con el título. */
  .convocatoria {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "estado"
      "principal"
      "ficha"
      "acciones";
    gap: var(--space-lg);
  }

  .convocatoria__ficha {
    height: auto;
  }

  /* Apiladas y a la izquierda: sin dos columnas, empujar "cómo
     participar" al extremo derecho dejaría un salto raro. Una debajo de
     la otra, ambas alineadas al margen. */
  .convocatoria__acciones {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .convocatoria__acciones .enlace-flecha {
    margin-inline-start: 0;
  }

  /* Etiqueta encima, valor debajo, ambos a la izquierda. En dos columnas
     la fecha larga ("Hasta el 31 de agosto de 2026") comprimía la
     etiqueta y "PLAZO DE ADMISIÓN" se partía en tres líneas. Apilados
     cada uno tiene el ancho entero. */
  .convocatoria__dato {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xs);
    padding-block: var(--space-xs);
  }

  .convocatoria__ficha dd {
    text-align: left;
  }
}

/* ---------- Quiénes somos ----------
   El bloque institucional. Es la sección más literaria de la home, así
   que la voz editorial (Bodoni) lleva la misión y el sans neutro cuenta
   el origen. Dos columnas asimétricas: el enunciado de la misión pesa
   más que el relato de los hechos. */
.quienes {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: var(--space-2xl);
  row-gap: var(--space-xl);
  align-items: start;
}

/* La misión, en Bodoni. NO a cuerpo de titular: es una frase entera, y a
   --text-display se comía la columna entera en ocho líneas, justo lo
   contrario del "va en dosis pequeñas" del briefing. A este cuerpo lee
   como una cita editorial —elegante y contenida— y equilibra con la
   columna de los hechos. */
.quienes__lead {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: var(--lh-lead);
  color: var(--texto);
  margin: 0;
  text-wrap: balance;
}

.quienes__relato {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.quienes__relato .cuerpo {
  font-size: var(--text-cuerpo);
}

/* Los hechos: fundación, año, sede. Reglas finas, en clave de colofón,
   igual que la ficha de la convocatoria — el mismo idioma para todos los
   datos duros del sitio. */
.quienes__hechos {
  margin: 0;
  width: 100%;
  border-top: var(--linea) solid var(--borde);
  display: grid;
}

.quienes__hecho {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-sm);
  border-bottom: var(--linea) solid var(--borde);
}

.quienes__hechos dt {
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.quienes__hechos dd {
  margin: 0;
  font-family: var(--font-texto);
  font-weight: var(--fw-light);
  font-size: var(--text-cuerpo);
  color: var(--texto);
}

@media (max-width: 820px) {
  .quienes {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-lg);
  }

  .quienes__hecho {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xs);
  }
}

/* ---------- Tarjeta ---------- */
.tarjeta {
  background: var(--surface-panel);
  border: var(--linea) solid var(--borde);
  border-radius: var(--radius-none);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.tarjeta__meta {
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--acento-display);
}

/* El peso va declarado, como en sus hermanos (.evento__titulo,
   .convocatoria__titulo). Antes se lo callaba y heredaba el 400 por
   defecto, que casualmente era el correcto; desde que body baja a
   --fw-lectura heredaría 300, y Bodoni Moda empieza en 400: el
   navegador no falla, falsifica un fino adelgazando el trazo. */
.tarjeta__titulo {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: var(--text-lead);
  line-height: var(--lh-titulo);
  margin: 0;
}

.tarjeta--enlazable {
  transition: border-color var(--dur-media) var(--ease),
              transform var(--dur-media) var(--ease);
}

.tarjeta--enlazable:hover {
  border-color: var(--borde-fuerte);
  transform: translateY(-2px);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-texto);
  font-size: var(--text-menor);
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: background-color var(--dur-media) var(--ease),
              color var(--dur-media) var(--ease),
              border-color var(--dur-media) var(--ease);
}

/* Contorno: el CTA del briefing. Discreto, editorial. */
.boton--contorno {
  background: transparent;
  color: var(--texto);
  border: var(--linea) solid var(--acento-display);
}

.boton--contorno:hover {
  background: var(--acento-display);
  border-color: var(--acento-display);
  color: var(--fb-blanco-roto);
}

/* Sólido: para la acción principal (participar, descargar bases).
   Texto en blanco roto sobre rosa Banús = 3.4:1 → solo a este cuerpo
   con peso medium, que WCAG cuenta como texto grande a partir de 14pt bold. */
.boton--solido {
  background: var(--acento-display);
  color: var(--fb-blanco-roto);
  border: var(--linea) solid var(--acento-display);
}

.boton--solido:hover {
  background: color-mix(in srgb, var(--acento-display) 82%, var(--fb-negro-calido));
  border-color: color-mix(in srgb, var(--acento-display) 82%, var(--fb-negro-calido));
}

.boton--fantasma {
  background: transparent;
  color: var(--texto);
  border: var(--linea) solid var(--borde);
}

.boton--fantasma:hover { border-color: var(--borde-fuerte); }

/* Compacto: para acciones que acompañan a un contenido y no deben pesar
   como el CTA de un hero. Se recorta el relleno y el cuerpo, pero NO por
   debajo de los 44px de alto que necesita un objetivo táctil para
   pulsarse con el dedo sin fallar. */
.boton--compacto {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-micro);
}

/* ---------- Navegación ----------
   .cabecera y .nav--fin viven en el sistema —no en cada hoja de página—
   porque son el esqueleto que lleva TODA página. Tenerlas por duplicado
   en los CSS de página dejaba el nav sin alinear (y la hamburguesa a la
   izquierda) en las que no cargaban esa hoja: contacto, aviso legal,
   privacidad. */
.cabecera { background: var(--surface); }

/* El menú alineado a la derecha; el flex-end también lleva el botón de
   olas (la hamburguesa flotante) al margen derecho en móvil. Cuando
   llegue el logotipo ocupará el hueco izquierdo y hará falta un
   margin-inline-end: auto sobre él para volver a empujar el resto. */
.nav--fin {
  justify-content: flex-end;
  max-width: none;
}

.nav {
  display: flex;
  /* Stretch, no center: así la pastilla del icono tiene exactamente el
     mismo alto que las de texto, aunque su contenido sea más bajo. */
  align-items: stretch;
  gap: var(--space-2xs);
  flex-wrap: wrap;
  background: var(--surface);
  padding: var(--space-2xs) var(--container-pad);
}

.nav__item {
  display: flex;
  align-items: center;
  font-size: var(--text-menor);
  color: var(--texto);
  text-decoration: none;
  padding: var(--space-xs) var(--space-md);
  transition: background-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease);
}

/* Entrada de icono: caja más estrecha, porque no tiene texto que arropar. */
.nav__item--icono {
  justify-content: center;
  padding-inline: var(--space-sm);
}

.nav__item--icono svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* La pastilla rosa sólida marca la página actual: es la firma de
   "estás aquí". El hover es un anticipo de esa misma pastilla — el
   mismo rosa Banús, en intensidad baja — para que ambos estados se
   lean como una sola idea y no como dos efectos distintos. */
.nav__item:hover,
.nav__item:focus-visible {
  background: color-mix(in srgb, var(--fb-rosa-banus) 42%, transparent);
}

/* Activo en sólido, como en la maqueta del briefing. */
.nav__item[aria-current="page"] {
  background: var(--fb-rosa-banus);
  color: var(--fb-blanco-roto);
}

/* Sobre la página actual el ratón no promete nada: ya estás en ella. */
.nav__item[aria-current="page"]:hover {
  background: var(--fb-rosa-banus);
}

/* ---------- Menú desplegable ----------
   Mejora progresiva: por defecto .nav__lista es "display: contents" —
   desaparece como caja y sus enlaces son hijos directos del flex del
   nav, exactamente el comportamiento de antes de que existiera este
   botón. Ese es también el estado si JavaScript no llega a cargar: sin
   .nav-colapsada (que solo pone nav.js) el menú se ve siempre
   expandido, apilándose por el flex-wrap de toda la vida. Nunca un
   botón que no hace nada. */
.nav__lista {
  display: contents;
}

.nav__toggle {
  display: none;
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

/* Ambos SVG del botón (olas y cierre) comparten tamaño con la casa. */
.nav__toggle-icono {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* Con ancestro .nav__toggle (dos clases) en vez de una sola: así le
   gana en especificidad a .nav__item--icono svg (clase + tipo), que si
   no forzaría "display:block" en los dos iconos del botón a la vez. */
.nav__toggle .nav__toggle-icono--cerrar {
  display: none;
}

/* El icono cambia de olas a cierre reaccionando al mismo aria-expanded
   que gestiona la accesibilidad — no hay estado duplicado en CSS. */
.nav__toggle[aria-expanded="true"] .nav__toggle-icono--olas {
  display: none;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-icono--cerrar {
  display: block;
}

/* ---------- Colapso ----------
   Aquí NO hay media query. El colapso no depende de un ancho inventado
   sino de un hecho medible: si los títulos del menú no caben en una
   línea, nav.js pone .nav-colapsada en el <html>. Así la regla vale
   igual con seis entradas que con nueve, en español o en inglés, y sin
   tener que recalibrar un número mágico cada vez que cambie el menú.

   Dos motivos independientes para plegar el menú, y basta con uno:
     .nav-colapsada → los títulos no caben.
     .nav-flotante  → hemos dejado atrás la cabecera y solo queda el
                      botón redondo flotando. */
:is(.nav-colapsada, .nav-flotante) .nav__toggle {
  display: inline-flex;
}

/* No hace falta colocar el botón: el margin-inline-end:auto que la casa
   lleva en landing.css se come el espacio libre entre ambos y lo deja
   contra el margen derecho. */

/* Vuelve a ser una caja real (deja de ser "contents"). Colapsada por
   defecto: sus enlaces, al estar dentro de un display:none, salen del
   orden de tabulación sin tocar ni un atributo ARIA — el navegador ya
   se encarga. */
:is(.nav-colapsada, .nav-flotante) .nav__lista {
  display: none;
  flex-basis: 100%;
}

/* flex-basis: 100% obliga a esta caja a caer en una fila propia,
   aprovechando el flex-wrap que el .nav ya tenía; por eso el panel
   aparece bajo el botón, no al lado. */
:is(.nav-colapsada, .nav-flotante) .nav__lista--abierta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-top: var(--linea) solid var(--borde);
  margin-top: var(--space-2xs);
  padding-block: var(--space-2xs);
}

:is(.nav-colapsada, .nav-flotante) .nav__lista--abierta .nav__item {
  padding-block: var(--space-md);
}

:is(.nav-colapsada, .nav-flotante) .nav__lista--abierta .nav__item + .nav__item {
  border-top: var(--linea) solid var(--borde);
}

/* ---------- Botón flotante ----------
   El disco de olas, redondo, arriba a la derecha. Aparece en dos casos, y
   en ambos con EXACTA la misma pinta y posición para que no haya salto:
     · .nav-colapsada → en móvil los títulos no caben: en vez de un header
                        estático que luego se despega, el disco flota desde
                        arriba directamente (la cabecera queda a altura 0 y
                        el contenido arranca en el borde superior).
     · .nav-flotante  → en escritorio, al dejar atrás la cabecera, la barra
                        se despega en este mismo disco.
   Por eso las reglas van sobre :is(.nav-colapsada, .nav-flotante): el disco
   es idéntico esté colapsado, flotando, o ambas cosas a la vez (móvil con
   scroll), y pasar de un estado a otro no cambia nada en pantalla.

   Sobre el color: en vez de detectar qué hay detrás y cambiar de tono
   —imposible de acertar sobre una fotografía, donde el fondo cambia en
   cada píxel— el disco SE TRAE SU PROPIO FONDO. Un velo de negro cálido
   al 68% garantiza por construcción que las olas en blanco roto se lean
   sobre cualquier cosa: medido, el peor caso posible (fondo blanco puro)
   deja 5.3:1, y sobre el arena de la Agenda da 5.5:1. El desenfoque es
   un adorno: si el navegador no lo soporta, el velo sigue ahí y el
   contraste no depende de él. */

/* Reservar el hueco de la cabecera solo cuando se despega POR SCROLL sin
   estar colapsada (escritorio): ahí el contenido daría un salto al quedar
   la barra sin altura. Colapsada (móvil) el disco flota desde el inicio,
   la cabecera nunca ocupó hueco y no hay nada que reservar. */
.nav-flotante:not(.nav-colapsada) .cabecera {
  height: var(--altura-cabecera);
}

:is(.nav-colapsada, .nav-flotante) .nav {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: auto;
  z-index: 20;
  background: transparent;
  padding: var(--space-md);
}

:is(.nav-colapsada, .nav-flotante) .nav__toggle {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border-radius: var(--radius-pill);
  color: var(--fb-blanco-roto);
  background: color-mix(in srgb, var(--fb-negro-calido) 68%, transparent);
  backdrop-filter: blur(10px);
  border: var(--linea) solid color-mix(in srgb, var(--fb-blanco-roto) 30%, transparent);
  transition: background-color var(--dur-rapida) var(--ease),
              border-color var(--dur-rapida) var(--ease);
}

:is(.nav-colapsada, .nav-flotante) .nav__toggle:hover {
  background: var(--fb-rosa-banus);
  border-color: var(--fb-rosa-banus);
}

/* El panel cuelga del botón. Fijo también, y con fondo propio: flota
   sobre el contenido de la página, no dentro de una barra. */
:is(.nav-colapsada, .nav-flotante) .nav__lista--abierta {
  position: fixed;
  top: calc(var(--space-md) + 3.25rem + var(--space-2xs));
  right: var(--space-md);
  width: min(18rem, calc(100vw - var(--space-md) * 2));
  margin-top: 0;
  border: var(--linea) solid color-mix(in srgb, var(--fb-blanco-roto) 20%, transparent);
  background: color-mix(in srgb, var(--fb-negro-calido) 92%, transparent);
  backdrop-filter: blur(10px);
  padding-inline: var(--space-2xs);
}

/* Dentro del panel flotante mandan los colores oscuros del disco,
   aunque la sección de debajo sea arena. */
:is(.nav-colapsada, .nav-flotante) .nav__lista--abierta .nav__item {
  color: var(--fb-blanco-roto);
}

:is(.nav-colapsada, .nav-flotante) .nav__lista--abierta .nav__item + .nav__item {
  border-top-color: color-mix(in srgb, var(--fb-blanco-roto) 18%, transparent);
}

/* ---------- Estado de medición ----------
   nav.js activa esta clase durante un instante para preguntarle al
   navegador cuánto ocupa el menú desplegado en una sola línea. Va
   DESPUÉS de las reglas de .nav-colapsada a propósito: misma
   especificidad, así que gana por orden y no hace falta !important.
   No hay parpadeo posible: el navegador no repinta a mitad de una
   misma tarea, y la clase se pone y se quita sin ceder el hilo. */
/* Doble clase (.nav.nav--midiendo) para ganarle en especificidad al
   justify-content:flex-end que .nav--fin trae de landing.css. No es
   quisquillosidad: con flex-end el sobrante se sale POR LA IZQUIERDA, y
   scrollWidth solo contabiliza el desbordamiento por la derecha, así que
   la medición daba "cabe" siempre. Alineando al inicio, el exceso se va
   a la derecha, que es donde el navegador sabe medirlo. */
.nav.nav--midiendo {
  flex-wrap: nowrap;
  justify-content: flex-start;
  /* Devolver el nav a su sitio estático de ancho completo durante la
     medición: colapsado está position:fixed y encogido al disco, y medir
     ahí daría siempre "cabe" (un fixed con width:auto se ajusta justo al
     contenido). Estático y a ancho de contenedor, el desbordamiento real
     ocurre y se detecta —y así el nav vuelve a expandirse al ensanchar. */
  position: static;
  inset: auto;
  width: auto;
  padding: var(--space-2xs) var(--container-pad);
}

.nav--midiendo .nav__lista {
  display: contents;
}

.nav--midiendo .nav__toggle {
  display: none;
}

/* Sin esto la medición miente y siempre dice que cabe: por defecto un
   elemento flex tiene flex-shrink:1, así que con nowrap los títulos se
   encogen y parten su texto en dos líneas en lugar de desbordar, y
   scrollWidth nunca supera a clientWidth. Fijándolos a su ancho natural
   el desbordamiento por fin ocurre y se puede detectar. */
.nav--midiendo .nav__item {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---------- Etiqueta de estado (convocatoria abierta/cerrada) ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-micro);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--linea) solid currentColor;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-rapida) var(--ease);
}

/* Abierta en verde, cerrada en gris. El verde solo significa "puedes
   presentarte": no es un segundo acento suelto por la web. */
.etiqueta--abierta { color: var(--estado-abierto); }
.etiqueta--cerrada { color: var(--texto-tenue); }

/* Al pasar el ratón, un lavado verde para que la pastilla se tiña sin
   tapar el texto. Se usa siempre el verde CLARO (--fb-verde-concha), no
   el --estado-abierto que hereda cada superficie: sobre arena el verde
   hondo oscurecería el fondo hacia el propio color del texto y el
   contraste caería por debajo de AA. Con el claro fijo, negro y arena
   pasan AA (6.6:1 y 4.8:1). */
.etiqueta--abierta:hover {
  background: color-mix(in srgb, var(--fb-verde-concha) 20%, transparent);
}

/* ---------- Campos de formulario ----------
   Neutros y legibles: Public Sans es "el caballo de batalla" del
   briefing, pensada para formularios. El campo se apoya en tokens de
   superficie, así que funciona igual sobre negro que sobre arena, con el
   foco heredando el color de acento de cada fondo. */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.campo label {
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.campo input,
.campo textarea {
  font-family: var(--font-texto);
  font-size: var(--text-cuerpo);
  color: var(--texto);
  background: color-mix(in srgb, var(--texto) 4%, transparent);
  border: var(--linea) solid var(--borde);
  border-radius: var(--radius-none);
  padding: var(--space-sm);
  width: 100%;
  transition: border-color var(--dur-rapida) var(--ease);
}

.campo textarea {
  resize: vertical;
  min-height: 7rem;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--texto-tenue);
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--focus);
}

/* ---------- Contacto ---------- */
.contacto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-2xl);
  align-items: start;
}

.contacto__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.contacto__lead {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: var(--lh-lead);
  color: var(--texto);
  margin: 0;
  text-wrap: balance;
}

/* Los datos como lista de contacto: etiqueta pequeña + dato legible. El
   teléfono y el email son enlaces reales (tel:/mailto:). */
.contacto__datos {
  display: grid;
  gap: var(--space-md);
  margin: 0;
}

.contacto__dato {
  display: grid;
  gap: var(--space-3xs);
}

.contacto__dato dt {
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.contacto__dato dd {
  margin: 0;
  font-size: var(--text-cuerpo);
  color: var(--texto);
}

.contacto__dato a {
  color: var(--texto);
  text-decoration: none;
  border-bottom: var(--linea) solid var(--borde-fuerte);
  transition: border-color var(--dur-rapida) var(--ease);
}

.contacto__dato a:hover { border-color: var(--acento-texto); }

.contacto__form {
  display: grid;
  gap: var(--space-md);
}

@media (max-width: 820px) {
  .contacto {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

/* ---------- Contacto breve (home) ----------
   La invitación en la home. El formulario, la dirección y el mapa viven
   en su página; aquí solo asoma el gesto y una flecha. Bloque estrecho a
   propósito: es un guiño, no una sección de peso. */
.contacto-breve {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: 40ch;
}

.contacto-breve__lead {
  font-family: var(--font-editorial);
  font-weight: var(--fw-regular);
  font-size: var(--text-titulo);
  line-height: var(--lh-titulo);
  color: var(--texto);
  margin: 0;
  text-wrap: balance;
}

/* "Estamos al otro lado" en itálica y acento: la respuesta a la pregunta,
   la parte que remata. */
.contacto-breve__lead em {
  font-style: italic;
  color: var(--acento-texto);
}

/* Franja de cierre: la última de la página, deliberadamente residual.
   Mucho menos alta que una sección normal, rótulo pequeño y contenido
   apretado, para que se lea como un remate y no como una sección más. */
.seccion--cierre {
  padding-block: var(--space-xl) var(--space-lg);
}

.seccion--cierre .rotulo {
  font-size: var(--text-titulo);
}

.seccion--cierre .contacto-breve {
  margin-top: var(--space-md);
  gap: var(--space-md);
}

.seccion--cierre .contacto-breve__lead {
  font-size: var(--text-lead);
}

/* ---------- Pie de página ---------- */
.pie {
  background: var(--fb-negro-calido);
  color: var(--fb-blanco-roto);
  /* Compacto: menos aire arriba y abajo que una sección normal. */
  padding-block: var(--space-lg) var(--space-md);
}

/* Nombre arriba a la izquierda y enlaces debajo, apilados. Todo alineado
   al margen del contenedor, respetando el mismo aire que el resto. */
.pie__grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

/* En Deuterium, no en Bodoni: el nombre de la Fundación en el pie
   funciona como rótulo grabado —eco del hero—, no como cita editorial.
   Mayúsculas y tracking, peso fino y monumental. */
.pie__nombre {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: var(--text-lead);
  line-height: var(--lh-titulo);
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
  max-width: 20ch;
  margin: 0;
}

/* En horizontal, uno tras otro en una sola fila. Envuelve si no caben,
   para no desbordar en pantallas estrechas. "Inicio" vuelve aquí como
   enlace de texto —la casa salió de la barra— para regresar a la home
   desde el resto de páginas. */
.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Versalita: el texto va en minúscula y all-small-caps lo convierte en
   versales pequeñas, sin mayúsculas de caja alta. El poco tracking abre
   las versalitas, que si no se apelmazan.

   El text-transform lo fuerza en vez de confiar en cómo venga escrito.
   Antes dependía de teclear el enlace en minúscula en el HTML, lo cual
   valía mientras el pie estuviera a mano. Desde que sale de un menú de
   WordPress, los títulos los escribe quien administra el sitio en un
   formulario, y ahí «La Fundación» con mayúsculas es lo natural: sin
   esta línea, la L y la F saldrían en caja alta y el resto en versalita,
   que es justo lo que el diseño evita. */
.pie__enlaces a {
  color: var(--fb-blanco-roto);
  text-decoration: none;
  font-size: var(--text-menor);
  text-transform: lowercase;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  opacity: 0.75;
  transition: opacity var(--dur-rapida) var(--ease);
}

.pie__enlaces a:hover { opacity: 1; }

.pie__linea {
  border: 0;
  border-top: var(--linea) solid color-mix(in srgb, var(--fb-blanco-roto) 15%, transparent);
  margin-block: var(--space-lg) var(--space-sm);
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-micro);
  color: color-mix(in srgb, var(--fb-blanco-roto) 60%, transparent);
}

/* ---------- Rejillas ---------- */
.rejilla {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.rejilla--dos {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* ---------- Retrato del patronato (círculo en arena) ---------- */
.retrato {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--fb-arena);
  width: 100%;
}

.retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Galería de fotos de un evento ----------
   El material gráfico de un evento ya CELEBRADO: las fotos del fotógrafo.
   Mismo idioma que el resto de imágenes del sistema —contenedor con
   proporción fija + object-fit cover + filete de 1px, sin sombra— y misma
   rejilla auto-fit que .rejilla, sin media queries: las miniaturas cuadran
   entre sí aunque las fotos lleguen a tamaños y orientaciones distintas. El
   recorte de la miniatura no pierde nada: el visor (galeria.js) enseña la
   foto entera al pulsar.

   Cada foto es un <a href="{foto-grande}"> que envuelve la miniatura, así
   que sin JS el clic ya abre la foto a tamaño completo; con JS, galeria.js
   intercepta y abre el visor. No declara color propio: se recolorea sola
   en negro / arena / piedra como todo lo demás. */
.galeria {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
}

/* El enlace-miniatura: ocupa toda la celda y recorta a 3/2. El filete y el
   fondo-panel (mientras carga) salen de tokens semánticos. */
.galeria__foto {
  display: block;
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-panel);
  border: var(--linea) solid var(--borde);
  transition: border-color var(--dur-media) var(--ease);
}

.galeria__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease);
}

.galeria__foto:hover { border-color: var(--borde-fuerte); }
.galeria__foto:hover img { transform: scale(1.03); }

/* Foco visible propio (la miniatura es un enlace): filete de acento sin
   desplazar la rejilla. */
.galeria__foto:focus-visible {
  outline: var(--regla-gruesa) solid var(--focus);
  outline-offset: 2px;
}

/* Respeto a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .galeria__foto img { transition: none; }
  .galeria__foto:hover img { transform: none; }
}

/* ---------- Visor de galería (diálogo modal de galeria.js) ----------
   <dialog> nativo: el navegador ya da el modal, el foco atrapado y el
   cierre con Escape. Aquí solo se viste. Sobre un velo oscuro para que la
   foto mande; los controles, en blanco roto. */
.visor {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.visor::backdrop {
  background: color-mix(in srgb, var(--fb-negro-calido) 92%, transparent);
}

.visor__escena {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, var(--space-2xl));
}

.visor__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: var(--linea) solid color-mix(in srgb, var(--fb-blanco-roto) 22%, transparent);
}

/* Botones del visor: cerrar arriba a la derecha, prev/next a los lados.
   Área de pulsación amplia, trazo fino en blanco roto, sin relleno. */
.visor__boton {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: var(--linea) solid color-mix(in srgb, var(--fb-blanco-roto) 30%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--fb-negro-calido) 55%, transparent);
  color: var(--fb-blanco-roto);
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease), background-color var(--dur-rapida) var(--ease);
}

.visor__boton:hover {
  border-color: var(--fb-blanco-roto);
  background: color-mix(in srgb, var(--fb-negro-calido) 75%, transparent);
}

.visor__boton:focus-visible {
  outline: var(--regla-gruesa) solid var(--fb-rosa-suave);
  outline-offset: 2px;
}

.visor__boton svg { width: 1.25rem; height: 1.25rem; }

.visor__cerrar { top: clamp(1rem, 3vw, var(--space-lg)); right: clamp(1rem, 3vw, var(--space-lg)); }
.visor__prev   { left: clamp(0.5rem, 2vw, var(--space-lg)); top: 50%; transform: translateY(-50%); }
.visor__next   { right: clamp(0.5rem, 2vw, var(--space-lg)); top: 50%; transform: translateY(-50%); }

/* Contador "3 / 12", discreto, al pie del visor. */
.visor__contador {
  position: absolute;
  bottom: clamp(1rem, 3vw, var(--space-lg));
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fb-blanco-roto) 78%, transparent);
}

@media (max-width: 640px) {
  /* En móvil, prev/next bajan al pie junto al contador para no taparse con
     la foto. */
  .visor__prev  { left: clamp(0.5rem, 3vw, 1rem); top: auto; bottom: clamp(1rem, 3vw, var(--space-lg)); transform: none; }
  .visor__next  { right: clamp(0.5rem, 3vw, 1rem); top: auto; bottom: clamp(1rem, 3vw, var(--space-lg)); transform: none; }
}

/* ---------- Documento legal (aviso legal, privacidad, bases) ----------
   La letra pequeña legal entra en superficie arena: "papel cálido",
   el sitio natural del articulado fino y del pie institucional. */
.legal { padding-block: var(--seccion-y); }

.legal__grupo + .legal__grupo {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: var(--linea) solid var(--borde);
}

/* Los títulos del colofón legal, en versalitas: bajan el tono a
   "colofón". all-small-caps (no small-caps) para que la inicial NO
   sobresalga en caja alta —todas las letras a la misma altura de
   versalita—, y a cuerpo menor para que suenen a rótulo de colofón,
   no a titular. */
.titulo--versalitas {
  font-variant-caps: all-small-caps;
  font-size: var(--text-menor);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
}

/* Prosa legal: letra pequeña de verdad. Cuerpo menor y peso light,
   para que sea el pie discreto del documento y no compita con el
   articulado. */
.legal p {
  color: var(--texto-tenue);
  max-width: var(--medida);
  font-size: var(--text-menor);
  font-weight: var(--fw-light);
}
.legal p + p { margin-top: var(--space-sm); }

.legal li + li { margin-top: var(--space-sm); }

/* Dato aún sin confirmar por la Fundación (CIF, n.º de registro...):
   mismo espíritu que "Cartel pendiente" en la Agenda —marca que falta
   una pieza, no que algo esté roto—, adaptado a texto en línea. */
.dato-pendiente {
  color: var(--acento-texto);
  font-style: italic;
  border-bottom: var(--linea) dashed var(--borde-fuerte);
}

/* Bloque de sede: pares dato-valor en clave de datos, como la ficha
   de un evento de la agenda. */
.sede {
  margin: var(--space-md) 0 0;
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--text-micro);
}

.sede__dato { display: flex; gap: var(--space-md); align-items: baseline; }

.sede__dato dt {
  flex: 0 0 6rem;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-size: var(--text-micro);
  color: var(--texto-tenue);
}

.sede__dato dd {
  margin: 0;
  font-weight: var(--fw-light);
  color: var(--texto-tenue);
}

@media (max-width: 640px) {
  .sede__dato { flex-direction: column; gap: var(--space-3xs); }
}

/* ---------- Respeto por reduce-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .tarjeta--enlazable:hover { transform: none; }
}