/*
 * La maquetación del sitio público: portada, «Sobre AIREAN», grupos y el 404.
 *
 * Solo maquetación. Los colores, la tipografía y los estilos base (titulares,
 * enlaces, «.boton», «.etiqueta», «.textura», «.banda», «.con-bola») están en
 * «tokens.css», que carga «templates/base.html» para todo el sitio, y aquí se
 * usan por su ROL —var(--fondo), var(--texto), var(--linea)…— y nunca por su
 * valor. Es lo que hace que el modo oscuro salga solo: tokens.css redefine los
 * roles y esta hoja no tiene que repetir ni una regla.
 *
 * El modo oscuro sigue el convenio de tokens.css, y cualquier regla de tema
 * que se añada aquí tiene que usar los mismos dos selectores:
 *
 *   @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) … }
 *   :root[data-theme="dark"] …
 *
 * El primero es el automático (el sistema pide oscuro y nadie ha elegido
 * claro a mano); el segundo, la elección manual, que pone «static/js/tema.js»
 * en <html> antes de pintar. Hacen falta los dos: con solo la media, quien
 * elige oscuro con el sistema en claro vería la mitad de la página en cada
 * tema.
 *
 * Las medidas salen de «airean-kit/referencia/Main.dc.html» (contenedor de
 * 1120 px, cabecera, pie, portada), «Sobre.dc.html», «Grupos.dc.html» y, a
 * 390 px, de «Movil.dc.html».
 */

/* --- Tema del navegador -------------------------------------------------- */

/* Para que las barras de desplazamiento, los controles de formulario y el
   autocompletado del navegador sigan al tema y no salgan blancos sobre tinta. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

/* «border-box» para todo, como hace el «preflight» de Tailwind en la
   plataforma. No es manía: tokens.css da a «.boton» un alto mínimo de 44 px Y
   un relleno, y con la caja de serie (content-box) el relleno se suma encima
   y el botón «Entrar» salía de 61 px. Así los botones miden lo mismo en las
   dos mitades del sitio. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* --- El fondo de la página --------------------------------------------- */

/*
 * La textura, detrás de todo el sitio y no solo del héroe.
 *
 * La llevaba puesta el héroe y nadie más, así que en cuanto se bajaba un
 * dedo la página se quedaba en un plano liso y el fondo ya no volvía a
 * aparecer en todo el recorrido. Ahora es una capa fija por detrás: las
 * secciones que no pintan fondo la dejan ver, y las que sí lo pintan
 * —la cabecera, el pie, «banda» y «oscura»— la tapan, que es exactamente
 * lo que las hace leerse como separadores.
 *
 * Va en un pseudoelemento fijo y no en un «background-attachment: fixed» del
 * «body» porque esa propiedad la tratan mal los navegadores del móvil, y
 * tampoco en un fondo normal porque sobre una página de varios miles de
 * píxeles el «cover» amplía la imagen hasta deshacerla. Fija cubre la
 * ventana y se ve al mismo tamaño en todas las secciones.
 *
 * El «z-index: -1» la deja por detrás del contenido y por delante del color
 * de respaldo que «tokens.css» le pone al «body», que es lo que se ve si la
 * imagen no llega a cargar.
 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("texturas/textura-clara.77b80326e11b.webp");
  background-size: cover;
  background-position: center;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before {
    background-image: url("texturas/textura-oscura.4612562efdd1.webp");
  }
}
:root[data-theme="dark"] body::before {
  background-image: url("texturas/textura-oscura.4612562efdd1.webp");
}

/* Los botones de la referencia van a 14 px y con el alto justo del objetivo
   táctil; tokens.css los deja heredar la letra del texto (17 px), que en la
   monoespaciada queda grande. */
.boton {
  padding: 0 22px;
  font-size: 0.875rem;
}

/* El pie abajo del todo aunque la página sea corta (el 404, por ejemplo): sin
   esto se queda a media pantalla con el fondo vacío debajo. «dvh» y no «vh»
   para que en el móvil no cuente la barra del navegador que se esconde. */
.sitio {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.sitio > main { flex: 1 0 auto; }

/* --- Contenedor --------------------------------------------------------- */

/* 1120 px de contenido más el margen lateral, que en el móvil baja a 16 px.
   «content-box» a propósito: el ancho de lectura es el de dentro, y así no
   cambia si alguna hoja de terceros pone «border-box» a todo. */
.contenedor {
  box-sizing: content-box;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

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

/* «Saltar al contenido»: el primer tabulador lo enseña. Con cuatro enlaces y
   un botón en la cabecera, quien navega con teclado se los ahorra en cada
   página. */
.saltar {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

/* --- Marca con cambio de tema ------------------------------------------- */

/* El logotipo y el símbolo son dibujos, no vectores: no pueden tomar
   «currentColor». Por eso van dos <img> —el de fondo claro y el de fondo
   oscuro— y aquí se enseña uno u otro.

   No se usa <picture> con «media», que sería lo natural, porque <picture>
   solo mira la preferencia del sistema: quien elige oscuro a mano con el
   sistema en claro vería el logotipo de tinta sobre fondo de tinta. Las dos
   imágenes comparten caja de recorte en el kit, así que el cambio no mueve
   nada.

   Se enseñan como bloque: son imágenes sueltas dentro de un enlace. */
.si-claro { display: block; }
.si-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .si-claro { display: none; }
  :root:not([data-theme="light"]) .si-oscuro { display: block; }
}
:root[data-theme="dark"] .si-claro { display: none; }
:root[data-theme="dark"] .si-oscuro { display: block; }

/* El ancho se fija aquí y el alto sale de la proporción del fichero, que
   llevan los atributos width/height del <img>: reservan el hueco antes de que
   llegue la imagen y la cabecera no da un salto al cargar. Nunca por debajo
   de 120 px: el kit pide el símbolo en lugar del logotipo a partir de ahí. */
.logotipo {
  width: 142px;
  max-width: none;
  height: auto;
}

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

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

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
}

/* El espacio libre alrededor del logotipo tiene que ser, como poco, el
   diámetro de la bola (unos 12 px a este tamaño): lo dan el relleno del
   enlace y el de la fila. */
.cabecera__marca {
  display: inline-flex;
  padding-block: 4px;
  text-decoration: none;
}
.cabecera__marca .logotipo { width: 120px; }

/* La navegación de escritorio y el botón «Entrar» no caben a 390 px: en el
   móvil se recogen en el menú, como en «Movil.dc.html». */
.cabecera__nav,
.cabecera__entrar { display: none; }

.cabecera__nav {
  flex-wrap: wrap;
  gap: 0 22px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Los enlaces de navegación miden 44 px de alto aunque la letra sea de 13: el
   objetivo táctil del kit. El relleno vertical de la referencia solo daba 41. */
.cabecera__nav a,
.cabecera__menu-panel a:not(.boton),
.pie__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  color: var(--texto);
  text-decoration: none;
}
.cabecera__nav a:hover,
.cabecera__menu-panel a:not(.boton):hover,
.pie__nav a:hover {
  text-decoration: underline;
}

/* La página en la que se está: la raya de la bola debajo, como en
   «Plataforma.dc.html». Es de los pocos sitios donde la arcilla se gana el
   sitio: marca un estado, no decora. */
.cabecera__nav a[aria-current="page"],
.cabecera__menu-panel a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--acento);
}

.cabecera__entrar {
  margin-left: auto;
  padding-inline: 20px;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

/* --- El listado de quedadas ---------------------------------------------- */

/*
 * Una lista y no una rejilla de tarjetas: lo que se compara entre dos
 * quedadas es CUÁNDO, y eso se lee bajando por una columna de fechas mucho
 * mejor que saltando entre cajas. En tarjetas, la vista va al titular, que es
 * lo que menos cambia de una a otra.
 */
.quedadas {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.quedada-fila {
  padding-block: 20px;
  border-top: 1px solid var(--linea);
}
.quedada-fila:last-child {
  border-bottom: 1px solid var(--linea);
}
.quedada-fila h3 {
  margin: 4px 0;
}
.quedada-fila h3 a {
  color: var(--texto);
  text-decoration: none;
}
.quedada-fila h3 a:hover {
  color: var(--acento-texto);
  text-decoration: underline;
}
.quedada-fila p {
  margin: 0;
}

/* La fecha en la monoespaciada y en el acento: es el dato que se busca al
   recorrer la lista, y en la misma letra que el titular habría que leerla. */
.quedada-fila__cuando {
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  color: var(--acento-texto);
}
.quedada-fila__datos {
  margin-top: 4px;
}

/* Lo que ya fue, más apagado pero legible: sigue cumpliendo el 4,5:1 porque
   usa el gris de texto del kit y no una transparencia inventada. */
.quedada-fila--pasada .quedada-fila__cuando {
  color: var(--texto-suave);
}

/* --- Montar un grupo y editar su ficha ----------------------------------- */

/*
 * La tarjeta del «+». Es la punteada de al lado, pero esta se pulsa, así que
 * tiene que parecerlo: el acento en el signo y el borde que responde. Entera
 * es el objetivo táctil, que a 240 px de alto sobra de largo; no hace falta
 * «tocable».
 */
.tarjeta-hueco--accion {
  align-items: flex-start;
  text-decoration: none;
  color: var(--texto);
  transition:
    border-color 0.15s,
    color 0.15s;
}
.tarjeta-hueco--accion:hover,
.tarjeta-hueco--accion:focus-visible {
  border-color: var(--acento);
  border-style: solid;
}
.tarjeta-hueco__mas {
  font-family: var(--fuente-titulos);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--acento);
  margin-bottom: 8px;
}

/*
 * El formulario. Una columna y campos a lo ancho: se rellena en un móvil tan
 * a menudo como en un escritorio —quien lleva un grupo lo actualiza desde
 * donde esté— y dos columnas ahí obligan a apuntar.
 *
 * El ancho se acota en «ch» y no en píxeles: lo que cansa de un campo largo
 * no es su medida, es cuánto texto cabe antes de perder el renglón.
 */
.formulario {
  max-width: 44ch;
  margin-top: 28px;
}

.campo-formulario {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 20px;
}
.campo-formulario label {
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.campo-formulario input,
.campo-formulario select,
.campo-formulario textarea {
  width: 100%;
  padding: 10px 12px;
}
/* Los 44 px del objetivo táctil que `tokens.css` le da a todo campo son el
   mínimo de una línea; para escribir una descripción de varios párrafos son
   una rendija. */
.campo-formulario textarea {
  min-height: 9rem;
  resize: vertical;
}
.campo-formulario__ayuda {
  font-size: 0.875rem;
  color: var(--texto-suave);
}

/* En magenta no: el acento de AIREAN es la arcilla, y un segundo rojo solo
   para los errores metría un color más en una paleta de cuatro. El peso y el
   filete de la izquierda ya los distinguen de la ayuda. */
.formulario__error {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--acento-texto);
  border-left: 3px solid var(--acento);
  padding-left: 10px;
}

.formulario .acciones {
  margin-top: 28px;
}

/* --- El estado de la sesión en la cabecera ------------------------------- */

/*
 * Quién eres, el panel si administras, y salir. En escritorio van en fila al
 * final de la cabecera, donde antes estaba «Entrar» a secas.
 *
 * El «margin-left: auto» viaja aquí cuando hay sesión, por lo mismo que en
 * «cabecera__tema»: el hueco flexible tiene que abrirse ANTES del grupo
 * entero, no entre sus piezas.
 */
.cabecera__sesion { display: none; }

.cabecera__quien {
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  color: var(--texto);
  text-decoration: none;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cabecera__quien:hover { color: var(--acento-texto); }

.cabecera__panel {
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  color: var(--acento-texto);
}

/* El formulario no pinta nada: existe solo para que la salida sea un POST con
   su CSRF. Sin esto mete un bloque y rompe la fila. */
.cabecera__salir { margin: 0; display: inline-flex; }

/* El alias se recorta con puntos suspensivos y no empuja: un alias de treinta
   caracteres —y se admiten— echaría la navegación fuera de la cabecera. */
@media (min-width: 48rem) {
  .cabecera__sesion {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
  }
  /* Con sesión, el hueco lo abre el grupo y no el botón de tema, que pasa a
     ir pegado a él. */
  .cabecera__tema:has(+ .cabecera__sesion) { margin-left: auto; }
  .cabecera__tema + .cabecera__sesion { margin-left: 0; }
}

/* --- El botón de claro/oscuro ------------------------------------------- */

/*
 * Mismo tamaño y misma forma que el botón del menú del móvil que tiene al
 * lado: los dos son controles de icono, y que uno midiera distinto del otro se
 * vería en la única fila donde están los dos.
 *
 * Sin fondo ni filete en reposo: en la cabecera ya está «Entrar» pintado como
 * botón sólido, y un segundo botón con cuerpo al lado le quitaría el único
 * sitio donde la página pide que mires. Esto es un ajuste, no una llamada.
 */
.boton-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--objetivo-tactil);
  height: var(--objetivo-tactil);
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--texto);
  cursor: pointer;
}
.boton-tema:hover { background: var(--linea); }

/* El «margin-left: auto» que llevaba «Entrar» se pasa aquí, que ahora es el
   primero de los dos: si se quedara en «Entrar», el hueco flexible se abriría
   ENTRE los dos y este botón acabaría pegado a la navegación, a media fila. */
.cabecera__tema { display: none; }
.cabecera__tema + .cabecera__entrar { margin-left: 0; }

/* En el móvil vive dentro del panel desplegable, donde no hay iconos sueltos
   sino una columna de opciones: ahí se acompaña de su rótulo y ocupa la fila
   entera, como los demás enlaces del panel. */
.boton-tema--menu {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding-inline: 2px;
}
.boton-tema--menu::after {
  content: attr(aria-label);
  font-family: var(--fuente-datos);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* El menú del móvil: un <details>, que abre y cierra sin una línea de
   JavaScript. La política de contenido no admite scripts en línea y esto no
   merece un fichero propio; además funciona con el JavaScript apagado. */
.cabecera__menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--objetivo-tactil);
  height: var(--objetivo-tactil);
  border-radius: var(--radio);
  color: var(--texto);
  cursor: pointer;
  list-style: none;
}
.cabecera__menu > summary::-webkit-details-marker { display: none; }
.cabecera__menu > summary:hover { background: var(--linea); }
.cabecera__menu:not([open]) .icono-cerrar,
.cabecera__menu[open] .icono-abrir { display: none; }

/* El panel cuelga de la cabecera entera, no del botón: así ocupa todo el
   ancho y empuja nada, porque va por encima del contenido. */
.cabecera__menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding: 8px clamp(16px, 4vw, 32px) 20px;
  border-bottom: 1px solid var(--linea);
  background: var(--fondo);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cabecera__menu-panel .boton {
  text-transform: none;
  justify-content: center;
  margin-top: 12px;
  letter-spacing: 0.04em;
}

@media (min-width: 48rem) {
  .cabecera__fila {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px 28px;
    padding-block: 18px;
  }
  .cabecera__marca { padding-block: 6px; }
  .cabecera__marca .logotipo { width: 142px; }
  .cabecera__nav { display: flex; }
  .cabecera__entrar { display: inline-flex; }
  .cabecera__tema { display: inline-flex; margin-left: auto; }
  .cabecera__menu { display: none; }
}

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

/* Las páginas de una sola columna de texto: hoy, el 404. */
.pagina {
  padding-block: clamp(40px, 6vw, 72px);
}
.pagina > h1 { margin: 0 0 20px; }
.pagina > p { max-width: 62ch; margin: 0 0 16px; }
.pagina > p.entradilla {
  font-size: 1.1875rem;
  max-width: 46ch;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* ==========================================================================
   Las páginas: portada, «Sobre AIREAN», grupos y la página de un grupo
   ========================================================================== */

/* Lo que el navegador trae de serie y estorba: los márgenes de titulares y
   párrafos (cada pieza pone los suyos, como la referencia) y la negrita de
   700 (la referencia usa 600, que en Archivo es la que no se empasta).
   Todo dentro de «:where», elemento incluido, para que la regla pese cero:
   así gana cualquier clase de abajo, «.pagina > h1» del 404 y también el
   ritmo de 18 px, que pesa cero igual y va después. Con el elemento fuera
   del «:where» la puesta a cero pesaba (0,0,1) y se comía ese ritmo. */
:where(.sitio main :is(h1, h2, h3, p)) { margin: 0; }
:where(.sitio main) strong { font-weight: 600; }
:where(.sitio main) img { max-width: 100%; height: auto; }

/* El ritmo vertical dentro de un bloque de texto: 18 px entre piezas, el
   espacio más repetido en las referencias. Con especificidad cero, así que la
   pieza que necesita otro (los botones a 32, la lista de criterios a 28) lo
   pone con su clase y gana sola. */
:where(.fila__texto, .fila__titulo, .dos-columnas__cuerpo, .ficha-grupo__cuerpo, .grupos__intro) > * + * {
  margin-top: 18px;
}

/* --- Ritmo de secciones ------------------------------------------------- */

/* Los tres rellenos verticales de las referencias. Van en el elemento que
   lleva «.contenedor» o en la sección, nunca en los dos. */
.seccion { padding-block: clamp(48px, 6vw, 80px); }
.seccion--media { padding-block: clamp(48px, 6vw, 72px); }
.seccion--corta { padding-block: clamp(40px, 5vw, 56px); }

.con-filetes { border-block: 1px solid var(--linea); }
.con-filete-arriba { border-top: 1px solid var(--linea); }

/* --- Zonas oscuras en los dos temas ------------------------------------- */

/* La banda de la plataforma, el héroe de «Sobre», la línea de historia y la
   caja del símbolo de un grupo sin logotipo son oscuros TAMBIÉN en el tema
   claro, como en las referencias. En vez de escribir colores en cada pieza se
   redefinen aquí los ROLES con los valores del modo oscuro de tokens.css, y
   todo lo de dentro —texto, «.boton», «.etiqueta», la bola, los enlaces— los
   toma solo. Los dos grises son los del modo oscuro de tokens.css, que no les
   da nombre propio; si allí cambian, aquí también. */
.oscura {
  --fondo: var(--airean-tinta);
  --texto: var(--airean-papel);
  --texto-suave: #B3AC9F;
  --linea: #3A352E;
  --acento: var(--airean-arcilla-clara);
  --acento-texto: var(--airean-arcilla-clara);
  background-color: var(--fondo);
  color: var(--texto);
}

/* La textura oscura sin depender del tema, para las zonas de arriba que la
   llevan (el héroe de «Sobre», la franja del símbolo en el listado). La ruta
   es relativa a esta hoja, como las de tokens.css, y el almacén con huella la
   reescribe al recoger los estáticos. */
.textura-oscura {
  background-image: url("texturas/textura-oscura.4612562efdd1.webp");
  background-size: cover;
  background-position: center;
}

/* En el modo oscuro, una banda oscura sobre la página oscura se funde: el
   filete la separa. En claro el filete no se ve contra el papel. */
section.oscura { border-block: 1px solid var(--linea); }

/* --- Piezas de texto ---------------------------------------------------- */

/* El rótulo con la bola: «.etiqueta» y «.con-bola» de tokens.css, con la bola
   de 10 px y el gris suave de la referencia. A veces es un <h2> —cuando la
   sección no tiene otro titular— y por eso se le quitan aquí la anchura y el
   interlineado que tokens.css da a los titulares. */
.rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--texto-suave);
  font-stretch: normal;
  line-height: 1.4;
}
.rotulo.con-bola::before {
  flex: none;
  width: 10px;
  height: 10px;
  margin: 0;
}
/* Cuando el rótulo va encima de un titular, el hueco lo pone el ritmo. */
.rotulo--cerca { margin-bottom: 0; }
/* Un rótulo que es enlace (la ficha de un grupo vuelve al listado): suelto,
   fuera de una frase, así que necesita el objetivo táctil entero. */
.rotulo__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  color: inherit;
  text-decoration: none;
}
.rotulo__enlace:hover { color: var(--acento-texto); }
.rotulo--pegado { margin-bottom: 12px; }

/* Titulares. tokens.css da a <h2> un tamaño único; las referencias usan
   cuatro, de 32 a 52 px, que aquí bajan con la pantalla. */
.titular { font-size: clamp(1.625rem, 3.2vw, 2.125rem); }
.titular--grande { font-size: clamp(1.75rem, 3.6vw, 2.375rem); }
.titular--medio { font-size: clamp(1.5rem, 3vw, 2rem); }
.titular-pagina { font-size: clamp(2.25rem, 5vw, 3.25rem); }

/* El párrafo grande (19 px en las referencias, 17 en el móvil). */
.entradilla {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem);
  max-width: 56ch;
}

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

/* Las líneas en la letra de los datos: subtítulos, disciplinas, fechas. */
.subtitulo {
  font-family: var(--fuente-datos);
  font-size: 0.875rem;
  color: var(--texto-suave);
}

/* --- Filas flexibles ---------------------------------------------------- */

/* El patrón de casi todas las secciones: un bloque de texto que se lleva casi
   todo el ancho (999) y uno lateral —imagen, titular, botón— que se queda con
   lo justo. Cuando no caben, el lateral baja solo, sin consultas de medios:
   a 390 px cada uno ocupa su fila, como en Movil.dc.html. «min-width: 0»
   para que un texto largo no empuje la fila más allá de la pantalla. */
.fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 48px;
}
.fila--arriba { align-items: flex-start; }
.fila__texto { flex: 999 1 420px; min-width: 0; }
.fila__titulo { flex: 1 1 280px; min-width: 0; }
.fila__imagen {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.fila__accion { flex: 1 1 240px; min-width: 0; }

/* La de «Sobre» y «Montar un grupo»: el rótulo a la izquierda y el texto a la
   derecha. En el móvil el rótulo va encima, con menos hueco. */
.dos-columnas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
}
.dos-columnas__rotulo { flex: 1 1 260px; min-width: 0; }
.dos-columnas__rotulo .rotulo { margin: 0; }
.dos-columnas__cuerpo { flex: 999 1 460px; min-width: 0; }
.dos-columnas__cuerpo > p:not(.entradilla, .sigla) { max-width: 58ch; }

/* Las rejillas de tarjetas y columnas: una columna en el móvil, dos en una
   pantalla media y tres en la ancha. */
.rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.rejilla--2 { gap: 28px; }
@media (min-width: 40rem) {
  .rejilla--2,
  .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--3:has(> .columna) { gap: 28px; }
}

/* --- Portada: héroe ----------------------------------------------------- */

.heroe { border-bottom: 1px solid var(--linea); }
.heroe__fila { padding-block: clamp(24px, 6vw, 72px); }

/* El lema a 284 px en el móvil (Movil.dc.html) y a 440 en la ancha. */
.heroe__lema img { width: 100%; max-width: 284px; }
.heroe__traduccion {
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--texto-suave);
}
.heroe__fila .fila__texto > .heroe__traduccion { margin-top: 12px; }
.heroe__fila .fila__texto > .heroe__entradilla { margin-top: 14px; max-width: 46ch; }

/* En el móvil los botones van a todo el ancho y un poco más altos, como el de
   Movil.dc.html: es lo primero que se toca con el pulgar. */
.heroe__acciones { margin-top: 20px; }
.heroe__acciones .boton {
  flex: 1 1 100%;
  justify-content: center;
  min-height: 48px;
}
.heroe__ilustracion { width: 100%; max-width: 196px; }

@media (min-width: 48rem) {
  .heroe__lema img { max-width: 440px; }
  .heroe__traduccion { font-size: 0.9375rem; }
  .heroe__fila .fila__texto > .heroe__traduccion { margin-top: 20px; }
  .heroe__fila .fila__texto > .heroe__entradilla { margin-top: 24px; }
  .heroe__acciones { margin-top: 32px; }
  .heroe__acciones .boton { flex: none; min-height: var(--objetivo-tactil); }
  .heroe__ilustracion { max-width: 360px; }
}

/* La franja de Movil.dc.html, debajo del héroe: oscura en los dos temas y en
   la letra de los datos a 12 px. «Plataforma →» es un enlace suelto y lleva
   los 44 px del objetivo táctil; con ellos la franja ya mide lo que en la
   referencia (14 + 19 + 14), así que el relleno vertical se queda en 2 px.
   Desde 48rem no sale: ver «portada.html». */
.heroe__franja {
  font-family: var(--fuente-datos);
  font-size: 0.75rem;
}
.heroe__franja-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 2px;
}
.heroe__franja-lugar { color: var(--texto-suave); }
.heroe__franja a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  color: var(--texto);
  font-weight: 600;
  text-decoration: none;
}
.heroe__franja a:hover { text-decoration: underline; }

@media (min-width: 48rem) {
  .heroe__franja { display: none; }
}

/* --- Portada: qué hacemos, quedada, grupos, plataforma ------------------ */

.columna {
  border-top: 2px solid var(--texto);
  padding-top: 20px;
}
.columna h3 { font-size: 1.3125rem; line-height: 1.15; }
.columna p { margin-top: 12px; color: var(--texto-suave); }

.fila__texto > .quedada__disciplinas { margin-top: 16px; font-size: 0.9375rem; }

/* Los tres datos de la quedada. Caben de tres en fila en la ancha y de dos en
   el móvil: «[LIBRE / PRECIO]» no parte bien en una columna de un tercio de
   390 px. */
.fila__texto > .quedada__datos {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 20px;
}
.quedada__datos dt { font-size: 0.75rem; color: var(--texto-suave); }
.quedada__datos dd {
  margin: 6px 0 0;
  font-family: var(--fuente-datos);
  font-size: 0.9375rem;
  font-weight: 500;
}
.quedada__ilustracion { width: 100%; max-width: 240px; }
@media (min-width: 48rem) {
  .quedada__ilustracion { max-width: 300px; }
}

/* La tarjeta de un grupo en la portada: logotipo o símbolo, nombre y
   subtítulo. Toda la tarjeta es el enlace. */
.tarjeta-grupo {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  text-decoration: none;
}
.tarjeta-grupo:hover {
  color: var(--texto);
  border-color: var(--borde);
}
.tarjeta-grupo:hover .tarjeta-grupo__nombre { text-decoration: underline; }
.tarjeta-grupo__marca {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 56px;
}
.tarjeta-grupo__marca img { width: 56px; height: 56px; object-fit: contain; }
.tarjeta-grupo__marca .logo-grupo { width: 76px; height: 56px; }
.tarjeta-grupo__nombre {
  display: block;
  font-family: var(--fuente-titulos);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.15;
}
.tarjeta-grupo__subtitulo {
  display: block;
  margin-top: 4px;
  font-family: var(--fuente-datos);
  font-size: 0.875rem;
  color: var(--texto-suave);
}

/* La tarjeta punteada: el hueco del grupo siguiente. El filete discontinuo
   es el convenio del sitio para lo que está por llegar. */
.tarjeta-hueco {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  color: var(--texto-suave);
}
.tarjeta-hueco h2 {
  font-size: 1.25rem;
  font-stretch: 112%;
  font-weight: 700;
  line-height: 1.15;
}
.tarjeta-hueco h2 + p { margin-top: 12px; }
@media (min-width: 40rem) {
  .tarjeta-hueco { padding: 28px; }
  .tarjeta-hueco--alta { min-height: 240px; padding: 24px; }
}

.plataforma__texto { max-width: 54ch; }
.banda__texto { max-width: 58ch; }

/* --- Sobre AIREAN ------------------------------------------------------- */

.sobre__heroe { gap: 24px 40px; }
.sobre__simbolo { flex: none; width: 72px; }
.fila__texto > .sobre__entradilla {
  max-width: 52ch;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem);
}
.sobre__sigla { display: block; width: 100%; max-width: 560px; }
.fila__texto > .sobre__sigla { margin-top: 32px; }
@media (min-width: 48rem) {
  .sobre__simbolo { width: 110px; }
}

/* La sigla como texto, sobre papel: la imagen dibujada solo se lee sobre
   fondo oscuro (ver «sobre.html»). Las iniciales, en el acento. */
.dos-columnas__cuerpo > .sigla {
  margin-top: 24px;
  font-family: var(--fuente-datos);
  font-size: 1.0625rem;
  line-height: 2;
  max-width: 44ch;
}
.sigla__inicial { color: var(--acento-texto); font-weight: 600; }

/* Cada parte de la sigla, en su renglón y empezando todas en el mismo punto:
   es lo que deja las seis iniciales en columna y permite leer AIREAN hacia
   abajo. El sangrado francés —un hueco de una letra que el «text-indent»
   negativo devuelve— es para el caso de que un renglón no quepa: lo que
   envuelve entra un paso y la columna de iniciales no se ensucia. */
.sigla__linea {
  display: block;
  padding-left: 1ch;
  text-indent: -1ch;
}
.dos-columnas__cuerpo > .sigla + p { margin-top: 24px; }

.dos-columnas__cuerpo > .criterios {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.criterios li { display: flex; gap: 18px; }
.criterios__numero {
  flex: none;
  padding-top: 3px;
  font-family: var(--fuente-datos);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--acento-texto);
}

.modos__intro { margin: 12px 0 32px; max-width: 62ch; }

/* La tabla de los dos modos cabe a 390 px con rellenos más cortos; el
   contenedor solo desplaza si una palabra no partiera. */
.tabla-desplazable { overflow-x: auto; }
.modos { width: 100%; border-collapse: collapse; }
.modos th,
.modos td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}
.modos thead th,
.modos thead td { border-bottom: 2px solid var(--texto); }
.modos thead th {
  font-family: var(--fuente-titulos);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}
.modos tbody th {
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--texto-suave);
}
.modos tr > :first-child { padding-left: 0; width: 24%; }
@media (min-width: 48rem) {
  .modos th,
  .modos td { padding: 16px; }
  .modos thead th,
  .modos thead td { padding-block: 14px; }
  .modos thead th { font-size: 1.1875rem; }
}

.historia {
  max-width: 72ch;
  font-family: var(--fuente-datos);
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

/* --- Grupos ------------------------------------------------------------- */

.grupos__intro { padding-block: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 40px); }
.grupos__intro > .entradilla { max-width: 58ch; }
.grupos__lista { padding-bottom: clamp(48px, 6vw, 72px); }

/* La tarjeta del listado: franja de la marca arriba y el texto debajo, con el
   enlace siempre al pie aunque las descripciones midan distinto. */
.ficha-grupo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo);
}
.ficha-grupo__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 152px;
  padding: 24px;
}
.ficha-grupo__simbolo { width: 72px; }
.ficha-grupo__marca .logo-grupo { width: 100%; height: 100%; object-fit: contain; }
.ficha-grupo__cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Abajo 13 y no 24: el resto lo pone la zona de toque de «Ver el grupo →». */
  padding: 24px 24px 13px;
}
.ficha-grupo__cuerpo h2 {
  font-size: 1.4375rem;
  font-stretch: 112%;
  font-weight: 700;
  line-height: 1.15;
}
.ficha-grupo__cuerpo > .subtitulo { margin-top: 6px; }
.ficha-grupo__cuerpo > .ficha-grupo__descripcion { margin-top: 16px; }
/* «Ver el grupo →» es un enlace suelto, no uno dentro de una frase, así que
   lleva el objetivo táctil de 44 px como «.grupo__enlaces a». Su texto ocupa
   unos 22 px de esos 44, y los 11 que sobran por arriba y por abajo son zona
   de toque, no hueco: se descuentan del relleno de encima (20 → 9) y del de
   debajo de la tarjeta (24 → 13, en «.ficha-grupo__cuerpo») para que se vea
   como en Grupos.dc.html. */
.ficha-grupo__cuerpo > .ficha-grupo__ver {
  margin-top: auto;
  padding-top: 9px;
  font-family: var(--fuente-datos);
  font-size: 0.875rem;
  font-weight: 600;
}
.ficha-grupo__ver a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
}

/* La página de un grupo. Es corta, y la textura llega hasta el pie: sin esto
   quedaba una franja lisa entre el bloque texturado y el pie, porque «main»
   crece para empujar el pie abajo y la sección no. Solo en esta página «main»
   pasa a ser flexible —con «:has», sin tocar las demás, donde las secciones
   con «.contenedor» se encogerían por sus márgenes automáticos— y la sección
   crece con él. Un navegador sin «:has» enseña la franja lisa, nada más. */
.sitio > main:has(> .grupo-pagina) {
  display: flex;
  flex-direction: column;
}
.grupo-pagina { flex: 1 0 auto; }
.grupo__fila { gap: 28px 40px; }
.grupo__marca {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 165px;
  padding: 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
}
.grupo__marca .logo-grupo { width: 100%; height: 100%; object-fit: contain; }
.grupo__marca--simbolo { width: 140px; height: auto; padding: 24px; }
.grupo__marca--simbolo img { width: 92px; }
.grupo__nombre { font-size: clamp(2rem, 4vw, 2.5rem); }
.fila__texto > .grupo__subtitulo { margin-top: 8px; font-size: 1rem; }
.fila__texto > .grupo__descripcion { margin-top: 20px; }
.grupo__descripcion p + p { margin-top: 1em; }
.fila__texto > .grupo__acciones { margin-top: 28px; }
.fila__texto > .grupo__enlaces {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-family: var(--fuente-datos);
  font-size: 0.875rem;
  font-weight: 600;
}
.grupo__enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
}
.fila__texto > .grupo__aviso {
  margin-top: 24px;
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  color: var(--texto-suave);
}

/* El logotipo de un grupo con un solo fichero lleva detrás el fondo para el
   que está dibujado: el de letras negras, papel, para que no desaparezca en el
   modo oscuro; el de letras claras, tinta. Ver «_logo_grupo.html». */
.logo-grupo { object-fit: contain; }
.logo-grupo--sobre-papel,
.logo-grupo--sobre-tinta {
  padding: 6%;
  border-radius: var(--radio);
}
.logo-grupo--sobre-papel { background: var(--airean-papel); }
.logo-grupo--sobre-tinta { background: var(--airean-tinta); }
/* Y el fondo abraza al dibujo: con el ancho entero de la caja, «object-fit»
   encogía la imagen dentro de un rectángulo de papel mucho mayor que ella. */
:is(.ficha-grupo__marca, .grupo__marca, .tarjeta-grupo__marca)
  :is(.logo-grupo--sobre-papel, .logo-grupo--sobre-tinta) {
  width: auto;
  max-width: 100%;
}

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

.pie {
  border-top: 1px solid var(--linea);
  /* Opaco a propósito, como la cabecera: son el marco del sitio y se leen
     mejor en liso, con la textura corriendo solo por el contenido. */
  background: var(--fondo);
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  padding-block: clamp(40px, 5vw, 56px);
}

.pie__firma {
  flex: 999 1 360px;
  min-width: 0;
}
.pie__firma .logotipo { width: 124px; }
.pie__firma p {
  margin: 18px 0 0;
  max-width: 48ch;
  color: var(--texto-suave);
}

.pie__nav {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.875rem;
}

/* El dominio va en la letra de los datos y en el tono suave: es un dato, no
   un enlace ni un titular. */
.pie__dominio {
  flex: 1 1 200px;
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  color: var(--texto-suave);
}
.pie__dominio p { margin: 0; }
.pie__dominio p + p { margin-top: 8px; }