/* ==========================================================================
   Sproochegalerie — Secciones (mobile)
   ========================================================================== */

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--grey);
  color: var(--oat);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--dur-fast);
}
.skip:focus { top: var(--s-3); }

/* Sin `opacity`. El par más ajustado de la paleta —rojo sobre burdeos— tiene
   4,66:1, así que cualquier transparencia lo tira debajo de AA. La jerarquía
   la hace el tamaño, la mayúscula y el interletrado de `.label`. */
.band__eyebrow { margin: 0 0 var(--s-3); }
.section__intro { margin-top: var(--s-4); }

/* El hero vive en css/hero.css: tiene su propia grilla, sus tres layouts y su
   ciclo de transiciones, y mezclarlo acá sólo generaba reglas que se pisaban. */

/* --- À la une --------------------------------------------------------------
   El bocadillo lleva el ángulo completo de la marca. Con el margen inferior se
   deja lugar a la cola, que se sale de la caja. */

.bubble h2 { margin-block: var(--s-2) var(--s-3); }

.bubble__cta {
  margin-top: var(--s-4);
  border-color: currentColor;
  color: inherit;
}

/* --- Bandas de contenido --------------------------------------------------- */

.band h2 + .lead,
.band h2 + p { margin-top: var(--s-5); }
.band .btn { margin-top: var(--s-6); }

/* --- Actividades ----------------------------------------------------------- */

#activites .pills { margin-top: var(--s-6); }
#activites .rail { margin-top: var(--s-5); }
/* Del ancho de su rótulo y centrado, como botón secundario (`.btn--texto`):
   relleno o de línea competía con los botones de las fichas, que ya llevan
   color. */
.section__more { display: flex; width: fit-content; margin-inline: auto; }
.rail__empty { margin-top: var(--s-6); font-weight: 700; }



/* --- Partenaires ----------------------------------------------------------- */

.partners { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-4); }
/* Sin recuadro: sólo una línea a la izquierda, que agrupa logo y texto sin
   encerrarlos. (Con el filete completo los tres partenaires se leían como
   tres cajas de formulario.) */
/* Cada partenaire en una caja de un violeta un poco más claro que la banda,
   sin borde: el cambio de tono alcanza para separarlas. (Se probaron antes un
   recuadro con filete —se leía como formulario— y una línea a la izquierda.) */
.partner {
  padding: var(--s-6) var(--s-5);
  background: color-mix(in srgb, #fff 40%, var(--paper));
}
.partner > :last-child {
  margin-bottom: 0;
  /* recorta el aire de interlínea que queda debajo del último renglón, para que
     la línea termine con las letras (donde el navegador lo soporta) */
  text-box: trim-end text alphabetic;
}
.partner h3 { margin-bottom: var(--s-2); }
/* El logo de cada partenaire, dibujado como máscara sobre la tinta de la banda:
   los archivos son de colores distintos —Graffiti verde y negro, Axwai negro—
   y así los tres quedan parejos. Mismo alto para todos; el ancho lo da la
   proporción de cada archivo. */
.partner__logo {
  display: block;
  height: 56px;
  margin-bottom: var(--s-4);
  background: var(--ink);
  -webkit-mask: var(--logo) left center / contain no-repeat;
  mask: var(--logo) left center / contain no-repeat;
}
/* Los altos no son iguales a propósito: igualados, Graffiti —ancho, con la
   bajada fina— se veía más liviano y Axwai —un símbolo compacto y macizo—
   más pesado. Se compensa a ojo para que los tres pesen lo mismo. */
.partner__logo--graffiti { --logo: url("../assets/partenaires/graffiti.png"); aspect-ratio: 224 / 90; height: 48px; }
.partner__logo--axwai    { --logo: url("../assets/partenaires/axwai.png");    aspect-ratio: 534 / 446; height: 60px; }
/* BESA, sin logo todavía: el nombre como logotipo, en la condensada de los
   títulos, con la caja del mismo alto que los otros dos. */
.partner__logo--texto {
  height: 48px;
  background: none;
  -webkit-mask: none;
  mask: none;
  color: var(--ink);
  font-family: var(--font-display-cond);
  font-weight: 700;
  font-size: 52px;
  line-height: 48px;
  letter-spacing: -0.01em;
}

/* --- Infos prácticas ------------------------------------------------------- */

.facts { margin: var(--s-8) 0 0; display: grid; gap: var(--s-5); }
.fact { padding-bottom: var(--s-5); border-bottom: 1px solid currentColor; }
.fact:last-child { border-bottom: 0; padding-bottom: 0; }
.fact dt { font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.fact dd { margin: var(--s-2) 0 0; }

/* --- El mapa -----------------------------------------------------------------
   Una imagen fija del plano del centro, en avena y gris: calles reales, pero
   dibujadas con la paleta del sitio (assets/mapa-luxembourg.svg). Va sin
   marco; el crédito de OpenStreetMap, que la licencia pide, debajo y chico. */
.mapa { margin: var(--s-6) 0 0; }
.mapa img { display: block; width: 100%; height: auto; }
.mapa__credito {
  margin-top: var(--s-2);
  font-size: 11px;
  opacity: 0.7;
}


/* --- Contacto -------------------------------------------------------------- */

.signup { margin-top: var(--s-8); display: grid; gap: var(--s-4); }
.signup .btn { margin-top: 0; width: 100%; justify-content: space-between; }

/* --- Footer ----------------------------------------------------------------
   Centrado, como el juego que lo sigue: los dos son el cierre de la página.
   Arriba el logo completo —el que trae «Language is our playground»—; después
   la navegación en la condensada de los títulos, apilada, como un eco del
   menú; los sitios del SNJ como píldoras, igual que los filtros, con la
   flecha del sitio inclinada porque salen de la página; y la nota, chica.
   (Antes era un logo chico, dos columnas de enlaces y un «↗» de la fuente.) */
.site-footer {
  border-top: var(--border-w) solid var(--ink);
  padding-block: var(--s-12) var(--s-8);
  text-align: center;
}
.logo--footer { width: 112px; margin: 0 auto var(--s-8); }

.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav a {
  display: inline-block;
  padding-block: 4px;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-display-cond);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.footer-nav a:hover,
.footer-nav a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.footer-ext {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
}
.footer-ext a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--s-3);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--r-pill);
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-sm);
}
.footer-ext a:hover { background: var(--ink); color: var(--paper); }
/* La flecha de los botones, girada hacia arriba a la derecha: sale del sitio. */
.footer-ext__flecha {
  width: 12px;
  height: 9px;
  background: currentColor;
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
  transform: rotate(-45deg);
}
.footer-note { margin: var(--s-6) 0 0; opacity: 0.72; }

/* --- Bloqueo del scroll con el panel abierto ------------------------------- */
body[data-nav-open="true"] { overflow: hidden; }

/* --- Títulos que se escriben solos -----------------------------------------
   Cada letra entra deslizándose dentro de su celda, con una curva suave. Dos diferencias
   deliberadas con el hero: entran todas desde abajo y en orden de lectura, no
   al azar. En el hero el azar es el gesto —la composición se rearma sola—;
   acá el título es texto que hay que leer, y barajarlo lo vuelve ruido.

   El corte en letras lo hace js/main.js, y sólo cuando el título entra en
   pantalla. Sin JS o sin movimiento, el título se ve normal: las reglas de
   abajo sólo actúan sobre el marcado que el script agrega. */

.let {
  display: inline-block;
  overflow: hidden;
  /* La celda recorta por arriba y por abajo del alto de línea, así que hay que
     devolverle el aire o se comen los acentos y las colas de la p y la g. */
  padding-block: 0.12em 0.18em;
  margin-block: -0.12em -0.18em;
  vertical-align: top;
}
.let__i {
  display: inline-block;
  will-change: transform;
}
/* El movimiento va con transición y no con la API de animaciones, y la razón es
   de seguridad: acá hay texto escondido esperando a que algo lo muestre. Con
   una animación, si no llega a correr —observer que no dispara, animaciones
   desactivadas, un error antes de tiempo— el título se queda invisible y la
   sección pierde su encabezado. Con una transición, el estado final lo fija una
   clase: si las transiciones están apagadas el título aparece de golpe, pero
   aparece. */
/* Fluido y no a pasos: la letra sube con una curva que sale rápido y frena
   larga, como el menú y las demás entradas. (Antes iba con steps(7), la
   lectura mecánica de las fichas del hero; en los títulos se sentía trabada.)
   Algo más largo que antes porque la curva se lleva el final despacio. */
.titulo--parte .let__i {
  transform: translateY(105%);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 24ms);
}
.titulo--visible .let__i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .titulo--parte .let__i { transform: none; transition: none; }
}

/* La palabra no se corta. Sin esto, al ser cada letra un `inline-block`, el
   navegador rompe la línea entre dos cualesquiera: «par cœur» salía «cœ / ur». */
.palabra { white-space: nowrap; display: inline-block; }

/* --- Entradas al hacer scroll ----------------------------------------------
   Un solo gesto para todo lo que no es título: aparece subiendo un poco. Corto
   y sin rebote, porque el movimiento fuerte del sitio ya lo ponen el hero y los
   títulos; esto sólo tiene que acompañar.

   Mismo criterio de seguridad que los títulos: el estado final lo fija una
   clase y no una animación. Si las transiciones están apagadas o el observer no
   dispara, el contenido aparece de golpe — pero aparece. Nunca queda escondido
   esperando a que corra algo. */

.revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease-out, ease-out),
              transform 520ms var(--ease-out, ease-out);
  transition-delay: calc(var(--r, 0) * 70ms);
}
.revelar--visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
}

/* --- Títulos con fichas ------------------------------------------------------
   Las fichas del hero en un título de sección (ver `titulosConFichas` en
   js/main.js). Todo en `em` del título, así la ficha escala con él: 0,62 de
   ancho por 0,94 de alto —la mayúscula mide 0,70 y sobresale 0,12 arriba y
   abajo—, y la letra al 86 %, como en el hero. A 375 de ancho el cuerpo da 40:
   fichas de 25 × 38. */
.titulo--fichas { text-align: center; }
.titulo--fichas.fichas--armado {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* entre tramos más aire que entre renglones: separa las dos ideas de la
     frase («Vivre les langues,» / «pas les apprendre par cœur») */
  gap: 0.45em;
  font-size: clamp(34px, 10.7vw, 50px);
  line-height: 1;
  margin-bottom: var(--s-5);
}
.fichas-palabra { display: inline-flex; gap: 0.06em; }
/* Palabras unidas por un espacio duro: van juntas en el mismo renglón. */
.fichas-junto { display: inline-flex; gap: 0.3em; }
/* Un `<br>` del título: fuerza el renglón siguiente. */
/* Un tramo que no va en fichas (`data-fichas` en el título): en el corte de
   los títulos —Sans Plomb Condensed Bold—, pero chico, como subtítulo de las
   fichas. Hereda el color de la banda. */
.fichas-texto {
  display: block;
  font-family: var(--font-display-cond);
  font-weight: 700;
  font-size: clamp(20px, 6.7vw, 30px);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
}
/* Con sólo un tramo en fichas hay menos renglones, así que las fichas pueden
   ser más grandes: a 375 de ancho, cuerpo 54 y VIVRE LES casi a ancho
   completo. La frase de abajo va chica, como un subtítulo: las fichas son el
   título. */
.titulo--fichas[data-fichas].fichas--armado { font-size: clamp(40px, 14.4vw, 68px); gap: 0.28em; }
.fichas--armado .fichas-texto {
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 400ms var(--ease-out), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--tras-fichas, 600ms);
}
.fichas--armado.titulo--visible .fichas-texto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fichas--armado .fichas-texto { transition: none; }
}

/* Cada tramo entre `<br>` es su propio bloque de renglones centrados. */
.fichas-tramo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.12em 0.3em;
}
.ficha-t {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.62em;
  height: 0.94em;
  border: 1.3px solid currentColor;
  border-radius: 4px;
  background: var(--paper);
  box-sizing: border-box;
}
.ficha-t__l {
  font-family: var(--font-display-cond);
  font-weight: 700;
  font-size: 0.86em;
  /* La caja de línea de Sans Plomb deja más aire abajo que arriba: centrada
     a ojo la mayúscula quedaba alta. */
  line-height: 1;
  transform: translateY(0.06em);
}

/* La vuelta: las fichas esperan dadas vuelta —se ve el dorso, una ficha
   vacía— y al entrar el título en pantalla giran una por una sobre su eje
   vertical, como cartas, hasta mostrar la letra. En orden de lectura, 45 ms
   entre una y otra. La letra tiene la cara de atrás oculta: mientras la ficha
   mira para el otro lado no se ve, y aparece al pasar de canto. (Se probó
   antes que cayeran desde arriba, apenas torcidas.) */
.fichas--armado .ficha-t {
  transform-style: preserve-3d;
  transform: perspective(4em) rotateY(180deg);
  transition: transform 620ms cubic-bezier(0.3, 0.7, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.fichas--armado .ficha-t__l { backface-visibility: hidden; }

.fichas--armado.titulo--visible .ficha-t { transform: perspective(4em) rotateY(0deg); }
@media (prefers-reduced-motion: reduce) {
  .fichas--armado .ficha-t { transition: none; }
}

/* La sección del centro va centrada entera: con el título en fichas al medio
   y el texto a la izquierda se leían como dos bloques. */
#centre .container { text-align: center; }
/* La etiqueta, despegada de las fichas: pegada a 12 se leía como parte del
   título y no como el nombre de la sección. */
#centre .band__eyebrow { margin-bottom: var(--s-6); }
/* Tres bloques: la etiqueta, el título con su subtítulo y el texto. Entre el
   subtítulo y el texto, más aire que entre la etiqueta y las fichas; con 20
   el texto se leía como continuación del subtítulo. */
#centre .titulo--fichas.fichas--armado { margin-bottom: var(--s-10); }
/* El párrafo, del ancho del título y no de la pantalla: a ancho completo
   (335) se abría bastante más que el renglón más largo de fichas (243) y se
   leía como otro bloque. 14em a 18 px son 252. */
#centre .lead { max-width: 14em; margin-inline: auto; }

/* --- Petit jeu ------------------------------------------------------------------
   El ahorcado de fichas (ver `juego` en js/main.js). Las fichas son las del
   hero: contorno de 1,3 en la tinta, esquinas de 4, la letra en la condensada.
   46 × 64: la palabra más larga (seis letras) mide 306 y entra en 335. */
.juego { --ficha-w: 46px; --ficha-h: 64px; }
/* Todo centrado: el título, la palabra, la pista debajo de las casillas y
   los mensajes. */
.juego .container { text-align: center; }
.juego__indice { margin: var(--s-4) auto 0; max-width: 28ch; }

/* Las casillas y la pista, cerca del título: etiqueta, título, casillas y
   pista se leen como un solo bloque. Las letras, abajo, en el piso. */
.juego__palabra {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--s-6);
}
/* La casilla vacía: punteada, para que se lea como un hueco a llenar. */
.juego__casilla {
  position: relative;
  width: var(--ficha-w);
  height: var(--ficha-h);
  border: 1.3px dashed var(--ink);
  border-radius: 4px;
  box-sizing: border-box;
}
.juego__casilla--llena { border-style: solid; border-color: transparent; }

/* La bandeja va pegada al pie de la banda y a todo el ancho de la pantalla:
   el borde inferior del rojo es el piso contra el que caen las letras, sin
   línea propia. No recorta: las fichas se sacan de ahí para llevarlas a la
   palabra. */
/* Con el fondo del pie, pero separado de él por bastante aire —con poco, el
   título se leía como parte del pie y no del juego—; abajo nada: el borde de
   la página es el piso. */
.band.juego { padding-top: var(--s-12, 48px); padding-bottom: 0; }
.juego__bandeja {
  position: relative;
  height: 112px;
  margin-top: var(--s-2);
  margin-inline: calc(var(--gutter) * -1);
}

.juego__ficha {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ficha-w);
  height: var(--ficha-h);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.3px solid var(--ink);
  border-radius: 4px;
  box-sizing: border-box;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display-cond);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* el arrastre es nuestro: sin esto el navegador scrollea la página */
  touch-action: none;
}
.juego__ficha--en-mano { z-index: 5; cursor: grabbing; }
/* Puesta: queda dentro de su casilla, tapando el punteado. */
.juego__ficha--puesta { inset: -1.3px; width: auto; height: auto; cursor: default; }

/* Ganado: las fichas de la palabra se rellenan, una detrás de otra. */
.juego--ganado .juego__casilla .juego__ficha {
  background: var(--ink);
  color: var(--paper);
  transition: background 300ms var(--ease-out), color 300ms var(--ease-out);
}
.juego--ganado .juego__casilla:nth-child(2) .juego__ficha { transition-delay: 60ms; }
.juego--ganado .juego__casilla:nth-child(3) .juego__ficha { transition-delay: 120ms; }
.juego--ganado .juego__casilla:nth-child(4) .juego__ficha { transition-delay: 180ms; }
.juego--ganado .juego__casilla:nth-child(5) .juego__ficha { transition-delay: 240ms; }
.juego--ganado .juego__casilla:nth-child(6) .juego__ficha { transition-delay: 300ms; }
.juego--ganado .juego__casilla:nth-child(7) .juego__ficha { transition-delay: 360ms; }
.juego--ganado .juego__casilla:nth-child(8) .juego__ficha { transition-delay: 420ms; }
.juego--ganado .juego__casilla:nth-child(9) .juego__ficha { transition-delay: 480ms; }

.juego__estado { min-height: 1.5em; margin-top: var(--s-5); margin-bottom: 0; font-weight: 700; }
.juego__otra { margin: 0 auto; }
/* `.btn` es inline-flex y le gana a `[hidden]`: sin esto el botón se veía
   antes de ganar */
.juego__otra[hidden] { display: none; }