/* La web pública de una sociedad. Su propia hoja, no la del panel.
 *
 * POR QUÉ APARTE. Lo que se sirve en `<sociedad>.fesma.es` no es la
 * plataforma: no hay menú lateral, ni tablas, ni formularios, ni nada de las
 * dieciséis hojas de componentes del panel. Cargarlas allí sería mandar cien
 * kilobytes de reglas que no se usan a un móvil con cobertura de pueblo.
 *
 * De la casa se traen solo los cimientos —los tokens de color y la tipografía—,
 * porque el sitio de una sociedad federada tiene que parecerse a FESMA sin ser
 * FESMA.
 *
 * ES UNA BASE COMÚN, A PROPÓSITO. Todas las sociedades empiezan con la misma
 * cara, y personalizar viene después. Una sociedad que no sabe hacer webs no
 * quiere elegir tipografías: quiere que la suya se vea bien sin tocar nada.
 */

/* AQUÍ NO HAY TOKENS COPIADOS DE `00-settings`. Los hubo —el bloque entero de
 * variables del panel, pegado a mano «por si acaso»— y casi todos estaban
 * muertos: `--fesma-gold` y `--fesma-night` sin un solo uso, `--nav-height` de
 * una barra que este sitio no tiene. Un token copiado y sin usar no es una
 * reserva, es una promesa de sincronización que nadie va a cumplir. Los dos
 * valores de la casa que esta hoja SÍ usa (el tinta de los titulares y el azul
 * noche del velo del hero) van escritos donde se usan, con su nota.
 *
 * Y el contrato de la personalización, para quien venga a añadir un mando: las
 * sociedades solo tocan las TRES variables `--sp-fuente-titulos`,
 * `--sp-fuente-texto` y `--sp-color`, que la página pisa en línea desde el
 * catálogo cerrado de `estilo.py`. Todo lo demás se CALCULA alrededor
 * (`color-mix` sobre `--sp-color`) — jamás un color de marca escrito a pelo en
 * una regla `sp-`, que es como se rompió la personalización de las iniciales. */

h1,
h2,
h3 {
  font-weight: var(--sp-peso-titulos);
  letter-spacing: 0.3px;
  color: var(--sp-tinta-titulos);
}

:root {
  /* La cara del sitio. Las tres las pisa la propia página con un `<style>` en
     línea según lo que la sociedad haya elegido en «Personalización»; aquí
     están los valores de serie, que son los de FESMA — y lo que se ve si algo
     falla por el camino. */
  --sp-fuente-titulos: "Playfair Display", Georgia, serif;
  --sp-fuente-texto: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sp-color: #d3223c;
  /* Con qué se ESCRIBE el acento. En los ambientes claros es el mismo color;
     en la noche, la pagina inyecta la variante clara del catalogo — el tono
     base como texto sobre oscuro no da AA (medido: el rojo 3,6:1). */
  --sp-acento: #d3223c;
  --sp-tinta-titulos: #111111;
  --sp-peso-titulos: 700;

  --sp-max: 68rem;
  --sp-texto: #1f2430;
  --sp-suave: #667085;
  --sp-borde: #e6e9ee;
  /* El borde de un CONTROL no puede ser el mismo que el de un separador: aquel
     solo decora y este es lo que dice dónde se escribe. Medido: `--sp-borde`
     daba 1,22:1 contra el relleno del campo, y WCAG 1.4.11 pide 3:1. Este da
     4,8:1 y sobra. */
  --sp-borde-control: #6b7280;
  --sp-fondo: #ffffff;
  --sp-fondo-alt: #f7f8fa;
}

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

/* El pie va SIEMPRE abajo. En una página corta —una sociedad con dos
   conferencias, o la de contacto— el pie se subía hasta la mitad de la
   pantalla y dejaba medio blanco debajo, que se lee como una página rota. La
   columna flexible con el `main` creciendo lo empuja al fondo sin fijarlo:
   cuando el contenido es largo, el pie queda donde tiene que quedar y hay que
   bajar hasta él. */
body {
  margin: 0;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--sp-fondo);
  color: var(--sp-texto);
  font-family: var(--sp-fuente-texto);
  line-height: 1.6;
}

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

/* Los titulares van por variable y no por la hoja de tipografía de la casa:
   `00-settings/typography.css` se importa arriba y les pone Playfair a h1/h2/h3
   para toda la plataforma, y aquí lo decide la sociedad. Esta regla va después,
   así que gana. */
h1,
h2,
h3 {
  font-family: var(--sp-fuente-titulos);
}

a {
  color: var(--sp-acento);
}

.sp-ancho {
  width: 100%;
  max-width: var(--sp-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── La cabecera ──────────────────────────────────────────────────────────
   Logo y nombre a la izquierda, menú a la derecha. En un móvil el menú pasa
   debajo y se desliza en horizontal: sin JavaScript, sin hamburguesa y sin un
   panel que se quede abierto. Con seis entradas cortas cabe de sobra. */
.sp-cabecera {
  border-bottom: 1px solid var(--sp-borde);
  background: var(--sp-fondo);
}

/* La fila de la cabecera usa un carril MAS ANCHO que el cuerpo (84rem contra
   68): el texto se lee a 68rem, pero la marca, siete secciones, «Acceso
   socios» y el boton de accesibilidad suman ~1300px y a 68rem el menu acababa
   recortando el final — medido. */
.sp-cabecera .sp-ancho {
  max-width: 84rem;
}

.sp-cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* A pantalla ancha la fila NO parte: con el nombre largo y siete secciones, el
   boton de accesibilidad caia a una segunda linea. El que cede es el NOMBRE
   (pasa a dos lineas), y si aun asi no cabe, el menu se desliza en horizontal
   dentro de su carril — los botones del menu siempre en UNA linea. */
@media (min-width: 64rem) {
  .sp-cabecera__fila {
    flex-wrap: nowrap;
  }

  .sp-marca {
    flex: 0 1 auto;
  }

  /* El nombre puede partir en dos lineas y no pasa de 16rem: es lo que cede
     para que el menu no ceda nunca. */
  .sp-marca__nombre {
    max-width: 16rem;
  }

  .sp-nav {
    flex: 0 1 auto;
  }

  .sp-menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Sin barra a la vista: es un carril de emergencia, no un componente. */
    scrollbar-width: none;
  }

  .sp-menu::-webkit-scrollbar {
    display: none;
  }

  .sp-menu a {
    /* Un punto mas compactas que en el cuerpo de la pagina: son siete y
       comparten fila con la marca. */
    padding: 0.4rem 0.55rem;
  }

  .sp-acc {
    flex-shrink: 0;
  }
}

/* En la franja media (1024-1408) el nombre no cabe junto a las siete
   secciones y el boton de acceso: se queda el logo como marca —el enlace
   lleva su nombre en aria-label— y el menu entero a la vista, que es lo que
   se usa. */
@media (min-width: 64rem) and (max-width: 87.99rem) {
  .sp-marca__nombre {
    display: none;
  }
}

.sp-marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* 92px y no 46: el logo de una sociedad es lo único suyo que hay en la
   cabecera —el resto es tipografía y un color— y a 46 px quedaba como el
   favicon de otro. Las iniciales, que son el respaldo de quien no ha subido
   ninguno, van al mismo tamaño: si no, la cabecera cambiaría de altura según
   la sociedad. */
.sp-marca__logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  flex-shrink: 0;
}

.sp-marca__iniciales {
  width: 92px;
  height: 92px;
  font-size: 1.6rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  /* CALCULADO sobre el color de marca, nunca un rgba() del rojo FESMA a pelo:
     así estaba, y una sociedad que eligiera azul veía sus iniciales azules
     sobre un lavado rosa de OTRA marca — en la cabecera de todas sus páginas,
     y justo en las sociedades sin logo, que son las que más dependen de que lo
     de serie quede bien. */
  background: color-mix(in srgb, var(--sp-color) 10%, var(--sp-fondo));
  color: var(--sp-acento);
}

.sp-marca__nombre {
  font-family: var(--sp-fuente-titulos);
  font-size: 1.05rem;
  font-weight: var(--sp-peso-titulos);
  line-height: 1.2;
}

/* El menú se desliza en horizontal cuando no cabe, pero lo que se desliza es
   ÉL, no la página: sin `min-width: 0` el `<nav>` que lo envuelve crece hasta
   el ancho de sus botones —es un hijo flexible, y esos no encogen por debajo de
   su contenido— y lo que acaba desbordando es el `<body>`. Medido en un móvil
   de 390: seis elementos fuera de la ventana y la página moviéndose de lado. */
.sp-nav {
  min-width: 0;
  max-width: 100%;
}

.sp-menu {
  max-width: 100%;
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-menu a {
  display: block;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--sp-texto);
  font-size: 0.9rem;
  white-space: nowrap;
}

.sp-menu a:hover {
  background: var(--sp-fondo-alt);
}

.sp-menu a[aria-current="page"] {
  background: var(--sp-color);
  color: #fff;
}

/* ── El menú en el móvil ──────────────────────────────────────────────────
   Seis pastillas en 390 píxeles se salían de la pantalla y había que
   deslizarlas de lado para ver las últimas, que es de las cosas que nadie
   descubre. Aquí se pliegan en un botón.

   La regla que esconde el menú cuelga de `.sp-con-js`, que pone el guion: sin
   JavaScript no hay botón —nace `hidden`— y las entradas se ven en columna, así
   que se llega a todas igual. */
.sp-menu-boton {
  display: none;
  align-items: center;
  gap: 0.55rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: inherit;
  background: none;
  border: 1px solid var(--sp-borde);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}

.sp-menu-boton[aria-expanded="true"] {
  background: var(--sp-fondo-alt);
}

/* Las tres rayas con `currentColor` y bordes: sin SVG, sin icono de fuente y
   sin una petición más para dibujar tres líneas. */
.sp-menu-boton__rayas {
  position: relative;
  display: block;
  width: 1.05rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.sp-menu-boton__rayas::before,
.sp-menu-boton__rayas::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.sp-menu-boton__rayas::before {
  top: -5px;
}

.sp-menu-boton__rayas::after {
  top: 5px;
}

@media (max-width: 63.99rem) {
  /* SIN JAVASCRIPT el botón no debe salir. Nace con `hidden` y lo enciende el
     guion, pero `display: inline-flex` de una regla de autor le gana a
     `[hidden]` de la hoja del navegador: salía un botón que no hacía nada y,
     como sin el guion tampoco se ponía `.sp-con-js`, el menú se quedaba en fila
     y dos entradas caían fuera de la pantalla. Medido a 390 px. */
  .sp-menu-boton {
    display: inline-flex;
  }

  .sp-menu-boton[hidden] {
    display: none;
  }

  /* Sin el guion, en columna y a la vista: se llega a todas igual. */
  .sp-menu {
    display: grid;
    order: 3;
    flex-basis: 100%;
    width: 100%;
    gap: 0.15rem;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--sp-borde);
  }

  .sp-con-js .sp-menu {
    display: none;
  }

  /* Desplegado ocupa el ancho de la CABECERA. `order` y `flex-basis` iban
     sobre el `<ul>`, pero su padre es el `<nav>` —un `display: block`— así que
     eran inertes y el menú se abría en una tira de 118 px en el centro. Van al
     `<nav>`, que sí es hijo del flex. */
  .sp-nav:has(.sp-menu[data-abierto]) {
    order: 3;
    flex-basis: 100%;
    width: 100%;
  }

  /* Desplegado ocupa el ancho de la cabecera y empuja lo de abajo, en vez de
     flotar encima: una capa flotante tapa justo la primera línea de la página,
     y aquí no hace falta porque la cabecera es corta. */
  .sp-con-js .sp-menu[data-abierto] {
    display: grid;
    /* En columnas cuando quepan: con seis entradas en una sola, la cabecera
       desplegada medía 425 px y en apaisado echaba «Contacto» fuera. */
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.15rem;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--sp-borde);
  }

  .sp-menu a {
    padding: 0.6rem 0.7rem;
  }
}

/* ── El cuerpo ────────────────────────────────────────────────────────── */
.sp-principal {
  flex: 1 0 auto;
  padding: 2.5rem 0 3.5rem;
}

/* La escala SUBIÓ a propósito. Un h1 a 1.9rem y los h2 a 1.25 eran jerarquía
   de documento interno: Playfair —la personalización más visible que tiene una
   sociedad— a esos cuerpos pierde el contraste de trazo que la justifica. */
.sp-titulo {
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin: 0 0 0.35rem;
}

.sp-entradilla {
  color: var(--sp-suave);
  margin: 0 0 2rem;
}

.sp-seccion + .sp-seccion {
  margin-top: 3rem;
}

.sp-seccion__titulo {
  font-size: 1.5rem;
  margin: 0 0 1.1rem;
}

/* La firma de cada sección: un filete corto en el color de marca. Es lo que
   hace que el h2 pese más que un rótulo sin subirlo de cuerpo otra vez. */
.sp-seccion__titulo::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--sp-color);
  margin-top: 0.45rem;
}

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

/* ── La rejilla de carteles ───────────────────────────────────────────── */
.sp-carteles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1.25rem;
}

.sp-cartel {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--sp-borde);
  border-radius: 12px;
  overflow: hidden;
  background: var(--sp-fondo);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.sp-cartel:hover,
.sp-cartel:focus-visible {
  box-shadow: 0 0.5rem 1.5rem -0.6rem rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

.sp-cartel__imagen {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--sp-fondo-alt);
}

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

/* Sin cartel no se deja un hueco gris: se pinta la fecha en grande, que es el
   dato por el que se reconocería igualmente. Un marco vacío se lee como algo
   roto. */
.sp-cartel__sinimagen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--sp-suave);
}

.sp-cartel__dia {
  /* En la tipografía de TITULARES: es el número más grande de la tarjeta y
     heredaba la de texto, con lo que la elección de la sociedad no se veía
     justo donde más cuerpo tiene. */
  font-family: var(--sp-fuente-titulos);
  font-size: 2.4rem;
  font-weight: var(--sp-peso-titulos);
  line-height: 1;
  color: var(--sp-acento);
}

.sp-cartel__mes {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sp-cartel__pie {
  padding: 0.75rem 0.85rem 0.9rem;
}

.sp-cartel__titulo {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}

.sp-cartel__fecha {
  display: block;
  font-size: 0.85rem;
  color: var(--sp-suave);
  margin-top: 0.2rem;
}

.sp-etiqueta {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--sp-fondo-alt);
  color: var(--sp-suave);
  border: 1px solid var(--sp-borde);
}

/* ── La ficha de un evento ────────────────────────────────────────────── */
.sp-ficha {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 2rem;
  /* Centrado y no `start`: el cartel es vertical y la columna de datos casi
     siempre más corta, así que pegados arriba quedaba un cartel largo con un
     bloque de texto colgando de su esquina y medio metro de blanco debajo. Con
     `center` el más corto se centra contra el más alto, sea cual sea. */
  align-items: center;
}

@media (max-width: 46rem) {
  .sp-ficha {
    /* `minmax(0, 1fr)` y no `1fr`: una sola palabra larga —un enlace o un
       correo pegados en la descripción— fija el ancho mínimo de la columna y
       empuja la página entera de lado. Es el mismo `minmax` que ya lleva la
       versión ancha. */
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* Y que la palabra se parta antes que sacar la página de la pantalla. Va a
   TODO lo que lleva texto de dentro de la ficha, no a tres selectores elegidos:
   un enlace o un correo pegados sin espacios caben en cualquiera de ellos, y
   basta con que se escape uno para que la página se mueva de lado. */
.sp-ficha,
.sp-ficha *,
.sp-parrafo,
.sp-texto,
.sp-descripcion {
  overflow-wrap: anywhere;
}

.sp-ficha__cartel img {
  border-radius: 12px;
  border: 1px solid var(--sp-borde);
  width: 100%;
}

.sp-datos {
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
}

.sp-datos dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sp-suave);
  padding-top: 0.15rem;
}

.sp-datos dd {
  margin: 0;
}

.sp-persona + .sp-persona {
  border-top: 1px solid var(--sp-borde);
  padding-top: 1rem;
  margin-top: 1rem;
}

.sp-persona__nombre {
  font-weight: 600;
  margin: 0 0 0.15rem;
}

.sp-persona__cargo {
  color: var(--sp-suave);
  font-size: 0.9rem;
  margin: 0;
}

.sp-meritos {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--sp-suave);
  font-size: 0.9rem;
}

/* ── La junta ─────────────────────────────────────────────────────────── */
.sp-junta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.sp-junta__ficha {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid var(--sp-borde);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  background: var(--sp-fondo);
}

/* El avatar tipográfico de una persona de la junta: dos letras en la
   tipografía de titulares sobre un lavado del color de marca. El bloque más
   árido de la web era una tabla disfrazada de tarjetas; con cara —aunque sea
   tipográfica— ya se lee como gente. */
.sp-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--sp-fuente-titulos);
  font-weight: var(--sp-peso-titulos);
  font-size: 1.05rem;
  background: color-mix(in srgb, var(--sp-color) 12%, var(--sp-fondo));
  color: var(--sp-acento);
}

.sp-junta__mas {
  margin: 1rem 0 0;
}

/* ── El pie ───────────────────────────────────────────────────────────── */
.sp-pie {
  flex-shrink: 0;
  border-top: 1px solid var(--sp-borde);
  background: var(--sp-fondo-alt);
  padding: 2.5rem 0 1.5rem;
  font-size: 0.875rem;
  color: var(--sp-suave);
}

.sp-pie a {
  color: inherit;
  text-decoration: none;
}

.sp-pie a:hover {
  color: var(--sp-texto);
  text-decoration: underline;
}

/* Cuatro bloques que caben o no caben, sin puntos de ruptura escritos a mano:
   `auto-fit` los reparte y el `minmax` decide cuándo saltan de línea. Una
   sociedad sin redes tiene tres, y la rejilla no se entera. */
.sp-pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem;
  padding-bottom: 2rem;
}

.sp-pie__marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sp-pie__logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.sp-pie__nombre {
  margin: 0;
  font-family: var(--sp-fuente-titulos);
  font-weight: var(--sp-peso-titulos);
  color: var(--sp-texto);
  line-height: 1.2;
}

.sp-pie__lugar {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
}

.sp-pie__rotulo {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sp-texto);
}

.sp-pie__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.sp-pie__lista li {
  word-break: break-word;
}

/* «Instagram @loquesea»: el nombre de la red en gris y el usuario destacado.
   Sin iconos de marca a propósito — meterlos obligaría a cargar Font Awesome
   entero en una web pública por dos dibujos, o a dibujar dos logos de memoria. */
.sp-pie__red {
  color: var(--sp-suave);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.25rem;
}

.sp-pie__linea {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sp-borde);
  font-size: 0.8rem;
}

/* ── En construcción ──────────────────────────────────────────────────── */
.sp-obras {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

/* ── Contacto ─────────────────────────────────────────────────────────────
   Dos piezas, una al lado de la otra mientras quepan: la ficha con los datos y
   el formulario.

   NO son dos columnas de rejilla con un `1fr` a la derecha. Lo eran, y el `1fr`
   se comía todo el ancho sobrante de un monitor grande mientras el formulario
   se quedaba en su ancho máximo: quedaba pegado a la izquierda, con un desierto
   a la derecha y sin parecer que estuviera en ninguna parte. Con `flex` y un
   `flex-basis`, las dos piezas ocupan lo que necesitan y el hueco sobra por
   fuera, que es donde tiene que sobrar. */
.sp-contacto {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem 3rem;
}

.sp-contacto__datos {
  flex: 0 1 16rem;
}

.sp-contacto__formulario {
  flex: 1 1 26rem;
  max-width: 38rem;
}

.sp-contacto__titulo {
  font-size: 1.05rem;
  margin: 0 0 1rem;
}

/* La ficha de datos: etiqueta encima y valor debajo. Antes era una rejilla de
   dos columnas con la etiqueta en versalitas grises a la izquierda, y con
   «INSTAGRAM» al lado de un usuario largo se leía como un volcado de base de
   datos, no como la tarjeta de una sociedad. */
.sp-ficha-datos {
  margin: 0;
}

/* El aire va entre PARES, no entre la etiqueta y su valor. Con un `gap` de
   rejilla se separaba también «CORREO» de su correo, y la ficha se estiraba en
   una escalera de ocho renglones sueltos donde hay cuatro datos. */
.sp-ficha-datos dt {
  margin-top: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sp-suave);
}

.sp-ficha-datos dt:first-of-type {
  margin-top: 0;
}

.sp-ficha-datos dd {
  margin: 0.15rem 0 0;
  word-break: break-word;
}

/* El formulario, con cara de formulario: su propio marco sobre fondo suave, en
   vez de campos sueltos flotando sobre el blanco de la página. */
.sp-formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--sp-borde);
  border-radius: 14px;
  background: var(--sp-fondo-alt);
}

@media (max-width: 34rem) {
  .sp-formulario {
    grid-template-columns: 1fr;
    padding: 1.15rem;
  }
}

.sp-campo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.sp-campo--ancho {
  grid-column: 1 / -1;
}

.sp-campo label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sp-suave);
}

.sp-campo input,
.sp-campo select,
.sp-campo textarea {
  font: inherit;
  /* 16px y no 15,2: por debajo de 16, Safari en iPhone hace zoom al enfocar el
     campo y deja la página descuadrada, y salir de ahí es cosa del usuario. */
  font-size: 1rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--sp-borde-control);
  border-radius: 8px;
  background: var(--sp-fondo);
  color: inherit;
  width: 100%;
  min-width: 0;
}

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

.sp-campo input:focus-visible,
.sp-campo select:focus-visible,
.sp-campo textarea:focus-visible {
  outline: 2px solid var(--sp-color);
  outline-offset: 1px;
  border-color: transparent;
}

/* El destino de pulsación llega a 24 px (WCAG 2.2, 2.5.8): medía 21,8 y en un
   móvil se falla. Se consigue con `padding` en la etiqueta, que es lo que se
   pulsa —envuelve a la casilla—, sin agrandar el dibujo del cuadrito. */
.sp-consentimiento label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0;
  min-height: 1.5rem;
  font-weight: 400;
  font-size: 0.85rem;
  color: inherit;
}

.sp-consentimiento input {
  width: 1.05rem;
  height: 1.05rem;
}

.sp-consentimiento input {
  width: auto;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.sp-boton {
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--sp-color);
  color: #fff;
  cursor: pointer;
  /* `align-self` y no `justify-self`: el botón vive dentro de un `.sp-campo`,
     que es una columna flexible, y ahí el hijo se estira a lo ancho salvo que
     se le diga que no. */
  align-self: flex-start;
}

.sp-boton:hover {
  filter: brightness(0.94);
}

/* El cepo para robots: fuera de la pantalla, no `display:none` — hay robots
   que se saltan lo que está oculto y rellenan lo demás. */
.sp-cepo {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sp-aviso {
  color: #1f2430;
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--sp-borde);
  margin: 0 0 1.75rem;
  max-width: 38rem;
}

.sp-aviso--ok {
  background: #e8f6ed;
  border-color: #bfe3cd;
}

.sp-aviso--mal {
  background: #fdecee;
  border-color: #f5c2c7;
}

/* Ni verde ni rojo: el mensaje SÍ se guardó, pero el aviso por correo no salió.
   Pintarlo de verde sería decir que todo fue bien. */
.sp-aviso--avisa {
  background: #fff6e5;
  border-color: #f2d9a8;
}

/* ── La portada ───────────────────────────────────────────────────────────
   Contesta lo que se pregunta quien entra sin conoceros: qué hacéis
   próximamente, quiénes sois, qué se cuece dentro y dónde seguiros. */
.sp-parrafo {
  margin: 0;
  max-width: 44rem;
}

/* La agenda de actividades. Van en lista y no en carteles porque lo que importa
   de un taller o de la sesión de los miércoles es CUÁNDO, no el dibujo — y
   porque casi nunca tienen cartel. */
.sp-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-width: 44rem;
}

.sp-agenda a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--sp-borde);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: var(--sp-fondo);
}

.sp-agenda a:hover {
  border-color: var(--sp-acento);
}

/* El mes se salía y tocaba el texto del evento: «SEPTIEMBRE 2026» no cabe en
   3,2rem y desbordaba la columna. Ahora la columna crece con su contenido pero
   no se come la fila (`max-width`), y el mes puede partirse en dos líneas. */
.sp-agenda__cuando {
  display: grid;
  justify-items: center;
  flex-shrink: 0;
  min-width: 3.2rem;
  max-width: 5.5rem;
  line-height: 1.1;
}

.sp-agenda__dia {
  font-family: var(--sp-fuente-titulos);
  font-size: 1.5rem;
  font-weight: var(--sp-peso-titulos);
  color: var(--sp-acento);
}

.sp-agenda__mes {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sp-suave);
  text-align: center;
  overflow-wrap: anywhere;
}

.sp-agenda__que {
  min-width: 0;
}

.sp-agenda__titulo {
  display: block;
  font-weight: 600;
}

.sp-agenda__detalle {
  display: block;
  font-size: 0.85rem;
  color: var(--sp-suave);
}

/* Las redes, con el nombre de la red arriba y el usuario debajo: lo mismo que
   el pie, pero en fichas — aquí las encuentra quien acaba de llegar y no va a
   bajar hasta el final. */
.sp-redes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.sp-redes a {
  display: grid;
  gap: 0.1rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--sp-borde);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: var(--sp-fondo);
}

.sp-redes a:hover {
  border-color: var(--sp-acento);
}

.sp-redes__donde {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sp-suave);
}

.sp-redes__quien {
  font-weight: 600;
  word-break: break-word;
}

/* Un matiz al lado de un dato: «de la madrugada», y cosas así. Va detrás del
   dato y en gris, no debajo: es una aclaración de esa línea, no otra línea. */
.sp-matiz {
  color: var(--sp-suave);
  font-size: 0.9em;
}

/* ── Las migas ────────────────────────────────────────────────────────────
   Solo en la ficha de un evento, que es la única página a dos niveles de la
   portada. Van arriba del todo y antes del titular: son el camino de vuelta,
   no un adorno del contenido.

   El separador lo pone el CSS y no el HTML: un «›» escrito entre etiquetas lo
   lee en voz alta un lector de pantalla, y «Inicio mayor que Conferencias» no
   es lo que hay que oír. */
.sp-migas {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--sp-suave);
}

.sp-migas ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.sp-migas li + li::before {
  content: "›";
  margin-right: 0.35rem;
  color: var(--sp-borde);
}

.sp-migas a {
  color: inherit;
  text-decoration: none;
}

.sp-migas a:hover {
  color: var(--sp-acento);
  text-decoration: underline;
}

/* El último es donde estás: ni enlace ni color de enlace, y que no se coma la
   línea entera si el título es largo. */
.sp-migas [aria-current="page"] {
  color: var(--sp-texto);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── Documentos ───────────────────────────────────────────────────────────
   Lista, no rejilla: de un documento lo que importa es su nombre, y una fila
   por documento se recorre con la vista mejor que unas tarjetas. */
.sp-documentos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-width: 44rem;
}

/* `:not(.sp-accion)` porque los dos botones de una ficha TAMBIÉN son enlaces
   dentro de esta lista, y esta regla —un selector más específico— les ganaba y
   los pintaba como el recuadro entero: salían en blanco con borde gris en vez
   de como botones. */
.sp-documentos a:not(.sp-accion) {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--sp-borde);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: var(--sp-fondo);
}

.sp-documentos a:not(.sp-accion):hover {
  border-color: var(--sp-acento);
}

.sp-documentos__nombre {
  font-weight: 600;
}

.sp-documentos__detalle {
  font-size: 0.85rem;
  color: var(--sp-suave);
}

/* Con acciones: el nombre a la izquierda y los dos verbos a la derecha. La
   ficha ya no es un enlace entero —tiene dos destinos distintos— así que el
   recuadro pasa del `<a>` al `<li>`. */
.sp-documentos--fichas .sp-documento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--sp-borde);
  border-radius: 10px;
  background: var(--sp-fondo);
}

.sp-documentos--fichas .sp-documento__datos {
  display: grid;
  gap: 0.15rem;
  /* Que el nombre largo parta línea en vez de empujar los botones fuera. */
  min-width: 0;
  flex: 1 1 14rem;
}

.sp-documento__acciones {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.sp-accion {
  font-weight: 600;
  font-size: 0.9rem;
  /* Medido: con 0,55rem el botón daba 43 px de alto y el objetivo táctil que
     pide Apple son 44. Un píxel es un píxel. */
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--sp-color);
  border-radius: 999px;
  text-decoration: none;
  background: var(--sp-color);
  color: #fff;
  white-space: nowrap;
}

.sp-accion--suave {
  background: transparent;
  color: var(--sp-color);
}

.sp-accion:hover {
  filter: brightness(0.94);
}

.sp-accion--suave:hover {
  background: color-mix(in srgb, var(--sp-color) 10%, transparent);
  filter: none;
}

/* ── El visor de documentos ───────────────────────────────────────────────
   Un `<dialog>` nativo: la capa oscura, el Escape y el foco atrapado dentro
   los pone el navegador. Aquí solo se le da tamaño. */
.sp-visor {
  /* Casi toda la pantalla: un PDF con menos sitio no se lee, se adivina. */
  width: min(60rem, 94vw);
  height: min(88vh, 88svh);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sp-fondo);
  color: var(--sp-texto);
}

.sp-visor[open] {
  display: flex;
  flex-direction: column;
}

.sp-visor::backdrop {
  background: rgba(15, 18, 25, 0.65);
}

.sp-visor__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--sp-borde);
  flex-shrink: 0;
}

.sp-visor__titulo {
  margin: 0;
  font-family: var(--sp-fuente-titulos);
  font-weight: var(--sp-peso-titulos);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-visor__acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.sp-visor__cerrar {
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  /* 44 px de lado: es un botón de móvil, y una «×» pequeña se falla. */
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sp-suave);
  cursor: pointer;
}

.sp-visor__cerrar:hover {
  background: var(--sp-fondo-alt);
  color: var(--sp-texto);
}

.sp-visor__marco {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  /* Sin esto el marco hereda el fondo blanco de la página y un PDF que tarda
     en pintar parece un documento en blanco. */
  background: var(--sp-fondo-alt);
}

/* Con el visor abierto la página de detrás no se mueve. `<dialog>` bloquea el
   ratón pero no la rueda, y ver el listado desplazándose bajo la capa oscura
   mientras se lee un PDF despista. */
.sp-visor-abierto,
.sp-visor-abierto body {
  overflow: hidden;
}

/* En el móvil el visor ocupa la pantalla entera: los márgenes redondeados
   quitaban sitio justo donde no sobra. */
@media (max-width: 40rem) {
  .sp-visor {
    width: 100vw;
    height: 100vh;
    height: 100svh;
    border-radius: 0;
    margin: 0;
  }

  /* «Abrir aparte» NO se esconde aquí aunque apriete: el móvil es justo donde
     el navegador puede no pintar el PDF dentro del marco, y esa es la salida.
     La barra parte línea, que para eso está el `flex-wrap`. */
}

/* Texto escrito con el editor: párrafos, títulos y listas de verdad. Sin esto
   los `<h3>` heredaban el tamaño de un titular de sección y la presentación
   parecía otra portada. */
.sp-texto > :first-child { margin-top: 0; }
.sp-texto > :last-child { margin-bottom: 0; }

.sp-texto p {
  margin: 0 0 0.9rem;
}

.sp-texto h3,
.sp-texto h4 {
  font-size: 1.05rem;
  margin: 1.5rem 0 0.5rem;
}

.sp-texto ul,
.sp-texto ol {
  margin: 0 0 0.9rem;
  padding-left: 1.3rem;
}

.sp-texto li {
  margin-bottom: 0.25rem;
}

/* Lo que escribe una presidencia en la descripción de un evento es TEXTO, con
   sus saltos de línea. Sin esto salía todo pegado en un bloque corrido. */
.sp-descripcion {
  margin-top: 1.5rem;
  white-space: pre-line;
}

/* Un acto ya celebrado. Gris y sin peso: es un dato, no una alarma. */
.sp-etiqueta--pasado {
  background: var(--sp-fondo-alt);
  color: var(--sp-suave);
}

/* El cartel enlaza a sí mismo a tamaño completo. */
.sp-ficha__cartel a {
  display: block;
}

/* ── El hero de la portada ────────────────────────────────────────────────
   El telón. La portada abría con un h1 pequeño y una línea gris — el arranque
   de un documento, no el de una web de espectáculo. Con foto, el nombre va en
   grande sobre ella y un velo hacia el color de marca garantiza el contraste
   sea cual sea la imagen; sin foto, el mismo hero sobre un lavado del color de
   marca — la portada de una sociedad recién llegada ya no está vacía.

   Sale del `.sp-ancho` de la página con el truco del margen a ancho de
   ventana: el contenedor está centrado, así que `50% - 50vw` llega justo a los
   bordes. El `overflow-x: hidden` del body ya se come el pelo de la barra de
   desplazamiento. */
.sp-hero {
  position: relative;
  margin: -2.5rem calc(50% - 50vw) 2.5rem;
  padding: 3.5rem 0;
  background: color-mix(in srgb, var(--sp-color) 6%, var(--sp-fondo));
  overflow: hidden;
}

.sp-hero--foto {
  padding: 5.5rem 0;
}

.sp-hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El velo: de casi nada arriba a casi opaco abajo, hacia una mezcla del color
   de marca con el azul noche de la casa (#1d1733, el de los fondos «mágicos»
   de fesma.es). Es lo que hace AA el texto blanco sin depender de la foto. */
.sp-hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sp-color) 55%, #1d1733e0) 0%,
    color-mix(in srgb, var(--sp-color) 45%, #1d1733f5) 100%
  );
  opacity: 0.82;
}

.sp-hero__contenido {
  position: relative;
}

.sp-hero__nombre {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.1;
  margin: 0;
}

.sp-hero--foto .sp-hero__nombre,
.sp-hero--foto .sp-hero__lema,
.sp-hero--foto .sp-hero__lugar {
  color: #fff;
}

.sp-hero__lema {
  font-size: 1.15rem;
  margin: 0.6rem 0 0;
  max-width: 38rem;
}

.sp-hero__lugar {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sp-suave);
}

.sp-hero--foto .sp-hero__lugar {
  color: #ffffffd9;
}

/* ── Las bandas de la portada ─────────────────────────────────────────────
   El mismo truco de ancho completo para alternar fondos: «Quiénes somos» y la
   junta van sobre el fondo alterno, como el pie. Es lo que da ritmo a una
   portada que era cinco bloques idénticos sobre blanco corrido. */
.sp-seccion--banda {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-block: 2.5rem;
  background: var(--sp-fondo-alt);
}

.sp-seccion + .sp-seccion--banda,
.sp-seccion--banda + .sp-seccion {
  margin-top: 3rem;
}

/* ── La cartelera ─────────────────────────────────────────────────────────
   El evento destacado, en grande y sobre banda del color de marca: la gala
   anual merece cartelera, no una casilla de 13rem igual que un ensayo. Es UNA
   tarjeta-enlace entera, como las de la rejilla. */
.sp-cartelera {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.75rem 2rem;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(120deg, color-mix(in srgb, var(--sp-color) 88%, #1d1733) 0%, color-mix(in srgb, var(--sp-color) 55%, #1d1733) 100%);
  color: #fff;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.sp-cartelera:hover,
.sp-cartelera:focus-visible {
  box-shadow: 0 0.6rem 1.8rem -0.6rem rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.sp-cartelera__cartel {
  flex: 0 0 12rem;
}

.sp-cartelera__cartel img {
  display: block;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.35);
}

.sp-cartelera__datos {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.sp-cartelera__proximamente {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffffcc;
}

.sp-cartelera__titulo {
  font-family: var(--sp-fuente-titulos);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: var(--sp-peso-titulos);
  line-height: 1.15;
}

.sp-cartelera__ponentes {
  font-size: 1rem;
  color: #ffffffe6;
}

.sp-cartelera__fecha {
  font-weight: 600;
  margin-top: 0.35rem;
}

.sp-cartelera__lugar {
  font-size: 0.9rem;
  color: #ffffffd9;
}

/* Con pinta de botón pero dentro del enlace grande: es una señal de «esto se
   pulsa», no un segundo destino. */
.sp-cartelera__boton {
  justify-self: start;
  margin-top: 0.75rem;
  padding: 0.45rem 1.2rem;
  border-radius: 999px;
  background: #fff;
  color: color-mix(in srgb, var(--sp-color) 80%, #1d1733);
  font-weight: 700;
  font-size: 0.9rem;
}

@media (max-width: 46rem) {
  .sp-cartelera {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.25rem;
  }

  .sp-cartelera__cartel {
    flex-basis: auto;
    max-width: 16rem;
    margin: 0 auto;
  }
}

/* ── La banda de vista previa ─────────────────────────────────────────────
   Fija arriba y sin disimulo: quien la ve es la presidencia con su billete, y
   la banda es lo que le recuerda que el resto del mundo sigue viendo el
   «Próximamente». */
.sp-previa {
  margin: 0;
  padding: 0.6rem 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  background: #fff6e5;
  color: #6d5a1c;
  border-bottom: 1px solid #f2d9a8;
}

/* El destello dorado del pie, alineado con su línea de texto. */
.sp-destello {
  vertical-align: -0.05em;
  margin-right: 0.25rem;
}

/* ── Accesibilidad ────────────────────────────────────────────────────────
   Las MISMAS preferencias que la web de la federación (mismas clases en
   `<html>`, mismas claves de almacenamiento), reescritas para esta hoja: el
   «nuclear reset» de allí apunta a Bootstrap y aquí no hay Bootstrap. Como
   toda la hoja va por tokens, el alto contraste es cambiar los tokens. */

/* El salto al contenido: invisible hasta el primer tabulador. */
.sp-salto {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 60;
  padding: 0.5rem 1rem;
  border-radius: 0 0 8px 8px;
  background: var(--sp-color);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}

.sp-salto:focus {
  top: 0;
}

/* Tamaños de texto. Toda la hoja mide en rem, así que con esto crece entera. */
html.a11y-text-lg { font-size: 125%; }
html.a11y-text-xl { font-size: 150%; }

/* Alto contraste: los tokens del ambiente, pisados por uno más oscuro que
   cualquiera de los tres. El acento pasa a la variante CLARA del color de la
   sociedad, que la página inyecta siempre — el tono base como texto sobre
   #1a1a1a no da AA (medido: el rojo se queda en 3,6:1). */
html.a11y-high-contrast {
  --sp-fondo: #1a1a1a;
  --sp-fondo-alt: #242424;
  --sp-texto: #f0f0f0;
  --sp-tinta-titulos: #ffffff;
  --sp-suave: #c9c9c9;
  --sp-borde: #4d4d4d;
  --sp-borde-control: #9e9e9e;
  --sp-acento: var(--sp-acento-claro);
}

/* Fuente para dislexia: OpenDyslexic, servida DESDE CASA como en la
   federación. Un @font-face no se descarga hasta que algo lo usa, así que
   quien no active el modo no paga ni un byte. */
@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/opendyslexic/opendyslexic-400.woff2") format("woff2");
}

@font-face {
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/opendyslexic/opendyslexic-700.woff2") format("woff2");
}

html.a11y-readable-font body,
html.a11y-readable-font h1,
html.a11y-readable-font h2,
html.a11y-readable-font h3 {
  font-family: "OpenDyslexic", "Comic Sans MS", "Verdana", system-ui, sans-serif;
  letter-spacing: 0.03em;
  word-spacing: 0.12em;
}

html.a11y-readable-font body {
  line-height: 1.8;
}

/* Sin animaciones: ni transiciones ni desplazamiento suave. */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Enmarcar lo que se señala: dónde estoy, dicho con un recuadro. */
html.a11y-outline a:hover,
html.a11y-outline button:hover,
html.a11y-outline summary:hover,
html.a11y-outline input:hover,
html.a11y-outline select:hover,
html.a11y-outline textarea:hover {
  outline: 3px solid var(--sp-acento) !important;
  outline-offset: 2px;
}

/* Y lo mismo del sistema, respetado aunque no se toque ningún botón. */
@media (prefers-reduced-motion: reduce) {
  .sp-cartel,
  .sp-cartelera,
  .sp-salto {
    transition: none;
  }
}

/* ── El menú de accesibilidad ─────────────────────────────────────────────
   Un `<details>` nativo: apertura, cierre y teclado los pone el navegador.
   Nace `hidden` y lo enciende el guion — sin JavaScript sus botones no harían
   nada, y un control que no hace nada es peor que no tenerlo. */
.sp-acc {
  position: relative;
  flex-shrink: 0;
}

.sp-acc__boton {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--sp-borde);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.sp-acc__boton::-webkit-details-marker {
  display: none;
}

.sp-acc__boton:hover,
.sp-acc[open] .sp-acc__boton {
  background: var(--sp-fondo-alt);
}

.sp-acc__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 70;
  width: min(19rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid var(--sp-borde);
  border-radius: 12px;
  background: var(--sp-fondo);
  box-shadow: 0 0.75rem 2rem -0.75rem rgba(0, 0, 0, 0.35);
  display: grid;
  gap: 0.45rem;
}

/* En ventana estrecha el desplegable anclado a la derecha del boton se salia
   por la IZQUIERDA de la pantalla (el ancho era casi el viewport entero, y el
   ancla no esta pegada al borde): media caja quedaba fuera, con las opciones
   cortadas. Ahi el panel deja de colgar del boton y se abre como una lamina
   fija a lo ancho, debajo de la cabecera. */
@media (max-width: 48rem) {
  .sp-acc__panel {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 5rem;
    width: auto;
    max-height: calc(100vh - 7rem);
    max-height: calc(100svh - 7rem);
    overflow-y: auto;
  }
}

.sp-acc__rotulo {
  margin: 0.35rem 0 0.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sp-suave);
}

.sp-acc__rotulo:first-child {
  margin-top: 0;
}

.sp-acc__grupo {
  display: flex;
  gap: 0.35rem;
}

.sp-acc__grupo button,
.sp-acc__opcion,
.sp-acc__reiniciar {
  font: inherit;
  font-size: 0.88rem;
  color: inherit;
  background: var(--sp-fondo);
  border: 1px solid var(--sp-borde-control);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  text-align: left;
}

.sp-acc__grupo button {
  flex: 1 1 0;
  text-align: center;
}

.sp-acc__grupo button[aria-pressed="true"] {
  background: var(--sp-color);
  border-color: var(--sp-color);
  color: #fff;
  font-weight: 600;
}

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

.sp-acc__estado {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sp-suave);
}

.sp-acc__opcion[aria-pressed="true"] {
  border-color: var(--sp-color);
}

.sp-acc__opcion[aria-pressed="true"] .sp-acc__estado {
  color: var(--sp-acento);
}

.sp-acc__grupo button:hover,
.sp-acc__opcion:hover,
.sp-acc__reiniciar:hover {
  background: var(--sp-fondo-alt);
}

.sp-acc__grupo button[aria-pressed="true"]:hover {
  background: var(--sp-color);
  filter: brightness(0.94);
}

.sp-acc__reiniciar {
  margin-top: 0.35rem;
  text-align: center;
  color: var(--sp-suave);
}

/* Texto solo para lectores de pantalla. */
.sp-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Con solo el icono, el botón es redondo y del alto de las pastillas. */
.sp-acc__boton {
  padding: 0.45rem 0.55rem;
}

/* «Acceso socios»: la única entrada del menú con cara de botón. Es de la
   PLANTILLA, no del escaparate — cierra el menú de las 65 y lleva al login de
   la federación, que es donde vive el panel. Perfilada con el acento (relleno
   solo al pasar) para que no compita con la pestaña activa. */
.sp-menu a.sp-menu__acceso {
  border: 1px solid var(--sp-acento);
  color: var(--sp-acento);
  font-weight: 600;
  margin-left: 0.35rem;
}

.sp-menu a.sp-menu__acceso:hover,
.sp-menu a.sp-menu__acceso:focus-visible {
  background: var(--sp-color);
  border-color: var(--sp-color);
  color: #fff;
}