/* ==========================================================================
   CMCS — Dos bloques que la Home no tenía
   --------------------------------------------------------------------------
   1. QUIÉN ENSEÑA. Un padre no matricula un edificio: matricula a la persona
      que va a estar seis horas al día con su hijo. Los veintitrés en disco y
      una persona grande al lado, con sus datos a tamaño de lectura.

   2. NOTICIAS Y CIRCULARES. Es a lo que las familias entran de verdad:
      matrículas, boletines, cronogramas. Va en coverflow: el cartel de frente
      y los demás girando en perspectiva.

   Las dos se mueven solas, y las dos se detienen al pasar el ratón, al recibir
   el foco de teclado y con un botón visible — WCAG 2.2.2 pide un mecanismo de
   pausa para todo movimiento automático de más de cinco segundos.
   ========================================================================== */

/* ==========================================================================
   1 · QUIÉN ENSEÑA — CUATRO MEDALLONES
   --------------------------------------------------------------------------
   Quinta forma de esta sección. Las cuatro descartadas están escritas en
   `paginas/inicio.html`, encima del marcado; la lección que dejaron es una y
   conviene no volver a aprenderla:

   ESTA SECCIÓN NO ES UN CENSO. Enseñar a los veintitrés —en reja o en hilera—
   parecía la respuesta obvia a la pregunta «quién enseña», y no lo era:
   veintitrés retratos normalizados a la vez son un dato de sistema, no una
   presentación. Andrés lo dijo en una frase: «si ponemos todo se ve
   copadísimo». Cuatro personas se miran; veintitrés se cuentan.

   Así que van CUATRO —los tres directivos y una docente que se releva entre las
   veinte— y el equipo completo vive a un clic, en el botón de debajo.

   Y como sólo son cuatro, EL GLOBO PUEDE SER UNA FICHA DE VERDAD: cargo,
   nombre, estudios, universidad y el horario de atención, a tamaño de lectura.
   Ese horario es el dato más útil de la sección —es cuándo puede una madre
   hablar con quien enseña a su hijo— y ya se perdió una vez por meterlo en
   letra chica encima de una cara. Aquí tiene su propio espacio.
   ========================================================================== */

.equipo__encabezado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e-5) var(--e-8);
  align-items: end;
}
.equipo__antetitulo { color: #8FD0F0; margin: 0 0 var(--e-4); }
.equipo__entrada {
  margin: 0;
  font-size: var(--t-md);
  line-height: var(--interlinea-lead);
  color: var(--marino-tinte);
  max-width: 46ch;
}
.equipo__entrada b { color: #FFF; font-weight: 700; }

/* ---- El conjunto ---------------------------------------------------------
   AL EJE, y el encabezado no. Es lo mismo que hace «Indicadores»: el
   encabezado cruza el ancho y debajo el grupo se lee como una pieza compacta.
   Pegados al margen izquierdo, cuatro discos pequeños se pierden en un lienzo
   de 1.280 px. Y centrados, el globo tiene sitio a los dos lados: anclado a la
   izquierda de la fila, la ficha del primero se saldría de la página.

   El hueco de arriba es para el globo. No llega a cubrirlo entero a propósito:
   una ficha de 11rem reservada en blanco dejaría la sección con un agujero
   permanente para algo que sólo aparece al acercarse. Lo que sobra lo invade
   sobre el encabezado, que es lo que hace cualquier globo de ayuda.            */
.equipo__cuerpo {
  display: grid;
  justify-items: center;
  padding-top: clamp(7rem, 11vw, 14rem);
}

.hilera {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  --medallon: clamp(6.5rem, 11.4vw, 11.4rem);
  /* El solape es lo que convierte cuatro discos sueltos en un grupo, pero baja
     cada vez que crecen: en la versión de veintitrés era 0,38; con cuatro a
     98px, 0,26; y a 160px, 0,14. No es capricho —Andrés los pidió «un poquito
     más separados»— sino que el solape tiene que medirse en píxeles reales y no
     en proporción: un tercio de un disco pequeño es un mordisco discreto, un
     tercio de uno grande le tapa media cara al vecino. */
  --solape: calc(var(--medallon) * 0.14);
  /* El radio del globo. Vale lo dicho en `tokens.css` sobre los naipes: la
     alternativa suave de un botón es la píldora, y un globo de 352 × 200 px no
     puede ser una píldora. O recta o redondeada de verdad, y aquí manda la
     forma del bocadillo. */
  --radio-globo: 1rem;
}

.medallon { position: relative; }
.medallon + .medallon { margin-left: calc(-1 * var(--solape)); }
/* El señalado pasa por delante de sus vecinos; si no, el aro quedaría cortado
   por el disco de al lado. */
.medallon:hover,
.medallon:focus-within,
.medallon.abierta { z-index: 40; }

.medallon__boton {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radio-0);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.medallon__disco {
  display: block;
  width: var(--medallon);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: clip;
  background: var(--campo-cielo);
  /* El aro NO es un `border`: un borde metería su grosor DENTRO del disco y
     encogería la cara. Como sombra extendida crece hacia fuera, y además tapa
     al vecino de debajo, que es lo que separa un disco del siguiente. */
  box-shadow: 0 0 0 3px var(--campo-marino);
  /* `opacity` entra en la lista aunque en reposo no cambie: es lo que el relevo
     de más abajo anima, y una propiedad que no está declarada aquí saltaría de
     golpe en vez de desvanecerse. */
  transition: box-shadow 320ms var(--sale), transform 460ms var(--sale),
              opacity 320ms var(--sale);
}
.medallon__disco img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Al 22 %: el retrato normalizado es 4:5 y recortado a cuadrado por el centro
     le cortaría la barbilla. */
  object-position: 50% 22%;
  display: block;
  filter: saturate(0.85) brightness(0.9);
  transition: filter 320ms var(--sale);
}

/* CRECE DE VERDAD: un 34 %, no el 5 % de la referencia. Con cuatro medallones
   hay sitio de sobra, y el salto de tamaño es lo que dice «éste es el que está
   mirando» sin necesidad de apagar a los otros tres. */
.medallon__boton:hover .medallon__disco,
.medallon__boton:focus-visible .medallon__disco,
.abierta .medallon__disco {
  transform: translateY(-0.5rem) scale(1.34);
  box-shadow: 0 0 0 3px var(--campo-marino), 0 0 0 5px var(--oro),
              0 18px 40px rgba(4, 6, 18, 0.5);
}
.medallon__boton:hover .medallon__disco img,
.medallon__boton:focus-visible .medallon__disco img,
.abierta .medallon__disco img { filter: none; }

/* EL FOCO DEL TECLADO VA EN EL ARO, no en un recuadro: un `outline` alrededor
   del botón dibuja un cuadrado en torno a un disco, que sería la única esquina
   viva de la sección. */
.medallon__boton:focus-visible { outline: none; }

/* ---- El globo ------------------------------------------------------------
   DOS ELEMENTOS, y es a propósito. `.medallon__globo` lleva la inclinación que
   sigue al cursor y `.globo__caja` la entrada con rebote: son dos animaciones
   sobre `transform` y una sola declaración no puede llevar las dos —la última
   ganaría entera—. Es la misma lección que los discos del pórtico.

   La referencia inclinaba hasta 45° y desplazaba 50px. Aquí son 10° y 26px: la
   ficha es cinco veces más grande que su rótulo, y a ese tamaño un giro de 45°
   deja de leerse como un gesto y pasa a leerse como una imagen torcida.        */
.medallon__globo {
  position: absolute;
  left: 50%;
  /* 2,8rem: al crecer un 34 %, un disco de 160px se sale 27px por arriba de su
     caja, y con el medio centímetro que además sube son 35px. El hueco tiene que
     ser mayor que ese crecimiento; si algún día los discos vuelven a crecer, esta
     medida sube con ellos. */
  bottom: calc(100% + 2.8rem);
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(-50% + var(--desliz, 0px))) rotate(var(--giro, 0deg));
  transition: transform 420ms cubic-bezier(0.22, 1.3, 0.36, 1),
              opacity 160ms linear,
              visibility 0s linear 160ms;
}
.medallon:hover .medallon__globo,
.medallon:focus-within .medallon__globo,
.medallon.abierta .medallon__globo {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.globo__caja {
  position: relative;
  display: grid;
  gap: 0.15rem;
  width: max-content;
  max-width: 22rem;
  padding: var(--e-4) var(--e-5) var(--e-4);
  /* Blanco sobre el campo marino: el globo tiene que ser lo más claro de la
     pantalla en ese instante, porque es a donde va la mirada.
     OJO CON EL ORO AQUÍ: sobre blanco da 1,65:1 y es ilegible. En esta ficha el
     color lo lleva el cerúleo hondo (5,3:1). */
  background: #FFF;
  /* ESQUINA REDONDEADA Y PUNTA: es un GLOBO DE CÓMIC desde el 2026-09-09, como
     lo dibujó Andrés en Figma. No es un capricho de forma: la ficha ya se movía
     siguiendo al cursor, y un rectángulo que flota sobre una cara no dice de
     quién habla. Con la punta sí. Y la esquina recta no puede convivir con una
     punta: un globo de esquinas vivas no se lee como globo, se lee como una
     ficha con un pico pegado. */
  border-radius: var(--radio-globo);
  box-shadow: 0 22px 54px rgba(4, 6, 18, 0.55);
  text-align: left;
}

/* LA PUNTA. Se queda clavada sobre el medallón mientras la caja se desliza, que
   es lo que hace un globo de verdad: el bocadillo flota, pero la punta no se
   despega de la boca de quien habla. Por eso RESTA `--desliz` en lugar de
   ignorarlo: el guion desplaza la caja `+desliz` y la punta vuelve `−desliz`.
   Si no lo restara, la punta viajaría con la caja y a los 52 px de recorrido ya
   estaría señalando al vecino.

   `clamp` para que nunca se meta en la esquina redondeada.
   El vértice va al 38 % y no al 50 %: una punta simétrica se lee como la flecha
   de un desplegable; una asimétrica, como un globo dibujado.
   La sombra va con `drop-shadow` y no con `box-shadow` porque `box-shadow`
   dibujaría la sombra del RECTÁNGULO, no la del triángulo recortado. */
.globo__caja::after {
  content: '';
  position: absolute;
  top: 100%;
  left: clamp(1.7rem, calc(50% - var(--desliz, 0px)), calc(100% - 1.7rem));
  width: 1.5rem;
  height: 0.85rem;
  translate: -50% -1px;
  background: #FFF;
  clip-path: polygon(0 0, 100% 0, 38% 100%);
  filter: drop-shadow(0 8px 10px rgba(4, 6, 18, 0.3));
}

.globo__cargo { color: var(--ceruleo-hondo); }
.globo__nombre {
  font-family: var(--fuente-titular);
  font-weight: var(--peso-titular);
  font-size: 1.05rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--marino);
  margin-top: var(--e-1);
}
.globo__titulo {
  margin-top: var(--e-3);
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--tinta);
}
.globo__casa { font-size: 0.8rem; line-height: 1.32; color: var(--tinta-suave); }
.globo__atiende {
  display: grid;
  gap: 0.1rem;
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: var(--hilo-fino) solid var(--lana-honda);
}
.globo__rotulo { color: var(--ceruleo-hondo); }
.globo__horario {
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--marino);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
  .medallon:hover .globo__caja,
  .medallon:focus-within .globo__caja,
  .medallon.abierta .globo__caja {
    animation: brotar-globo 420ms cubic-bezier(0.22, 1.35, 0.4, 1) both;
  }
}
@keyframes brotar-globo {
  0%   { opacity: 0; transform: translateY(1.1rem) scale(0.7); }
  58%  { opacity: 1; transform: translateY(-0.2rem) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* EL RELEVO DE LOS CUATRO. Se apagan, cambian por dentro y vuelven. Con un
   retardo escalonado por medallón: los cuatro apagándose a la vez se leen como
   un parpadeo de la sección entera; entrando uno detrás de otro se lee como un
   relevo. El retardo lo reparte el guion en `--turno`. */
.en-relevo .medallon__disco {
  opacity: 0;
  transform: translateY(0) scale(0.94);
  transition-duration: 300ms;
  transition-delay: calc(var(--turno, 0) * 70ms);
}

/* ---- El pie --------------------------------------------------------------- */

.equipo__pista {
  margin: clamp(var(--e-5), 2.5vw, var(--e-6)) 0 0;
  max-width: none;
  font-size: var(--t-sm);
  color: var(--marino-tinte);
  text-align: center;
}
/* En pantalla táctil no hay puntero que «se acerque»: se toca. El verbo cambia
   con el aparato, no la frase entera. */
.pista--tacto { display: none; }
@media (hover: none) {
  .pista--puntero { display: none; }
  .pista--tacto { display: inline; }
}

.equipo__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-4) var(--e-6);
  margin-top: clamp(var(--e-6), 3vw, var(--e-7));
}

.rueda__control {
  padding: var(--e-2) 0;
  background: transparent;
  border: 0;
  border-bottom: var(--hilo-fino) solid rgba(255, 255, 255, 0.3);
  color: var(--marino-tinte);
  font-family: var(--fuente-codigo);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-codigo);
  text-transform: uppercase;
  cursor: pointer;
}
.rueda__control:hover { color: #FFF; border-bottom-color: #FFF; }

/* ---- Estrechando --------------------------------------------------------- */

@media (max-width: 64rem) {
  .equipo__encabezado { grid-template-columns: 1fr; align-items: start; }
}

/* LA FICHA DEJA DE COLGAR DE SU MEDALLÓN Y PASA A COLGAR DE LA FILA.
   Mide 22rem —352px— y va centrada sobre su disco, así que por debajo de cierta
   anchura los dos de los extremos la sacan de la página. El punto exacto está en
   torno a 620px; el corte va en 44rem con margen.

   OJO, QUE ESTO NO SE VE MIRANDO LA PANTALLA: la ficha oculta es
   `visibility: hidden`, y una caja oculta así SIGUE OCUPANDO SITIO y sigue
   sumando al desplazamiento horizontal de la página. O sea que la barra de
   desplazamiento aparecía sin que hubiera nada visible que la explicara. Se
   detectó midiendo `scrollWidth` a 560px, no a ojo.

   La solución no es encoger la ficha —el horario dejaría de leerse, que es lo
   que esta sección lleva cinco versiones arreglando— sino cambiarle el ancla:
   los medallones pasan a `static` y la ficha cuelga de la FILA, que está
   centrada en el lienzo. El `z-index` del que está abierto se muda al disco,
   que es quien puede llevarlo a partir de aquí. */
@media (max-width: 44rem) {
  .hilera { position: relative; }
  .medallon { position: static; }
  .medallon__disco { position: relative; }
  .abierta .medallon__disco,
  .medallon__boton:focus-visible .medallon__disco { z-index: 40; }
  .medallon__globo {
    left: 50%;
    width: min(100vw - var(--canal) * 2, 22rem);
    /* El giro también se retira: una ficha del ancho de la pantalla inclinada
       10° se sale por los dos lados. */
    transform: translateX(-50%);
  }
  .globo__caja { max-width: none; width: 100%; }
  /* Aquí la ficha cuelga de la FILA, no del medallón, así que `--desliz` no
     significa nada: la caja está centrada en la fila pase lo que pase. La punta
     tiene que apuntar al que está abierto, y eso sólo se sabe midiendo. El
     guion escribe esa distancia en `--punta`. */
  .globo__caja::after {
    left: clamp(1.7rem, calc(50% + var(--punta, 0px)), calc(100% - 1.7rem));
  }
}

/* En el teléfono los discos no crecen con la pantalla: cuatro de 160px no caben
   ni de lejos. Se quedan en 24vw con un tope, y el solape sube un poco —0,18—
   porque a esa talla vuelven a necesitarlo para leerse como grupo. */
@media (max-width: 34rem) {
  .hilera { --medallon: min(24vw, 6.2rem); --solape: calc(var(--medallon) * 0.18); }
}

@media (prefers-reduced-motion: reduce) {
  .medallon__disco, .medallon__disco img, .medallon__globo { transition: none; }
}

/* ==========================================================================
   2 · NOTICIAS Y CIRCULARES — EL COVERFLOW
   --------------------------------------------------------------------------
   Cuarta forma de esta sección. Las tres anteriores y por qué cayeron están
   escritas en `paginas/inicio.html`, encima del marcado; aquí va lo que hace
   funcionar ésta.

   LA GEOMETRÍA ES LA DE LA REFERENCIA QUE TRAJO ANDRÉS, ángulo por ángulo:
   perspectiva de 1400px, el naipe del centro de frente, el de al lado girado
   24° y encogido al 84 %, el siguiente a 38° y al 68 %, con un desenfoque de
   1px y la luz bajada. Lo que cambia es la piel: allí era un restaurante
   —esquinas de 18px, píldoras, oro viejo, cursivas—, aquí es el sistema.

   TODO SALE DE DOS VARIABLES, y por eso no hay diez reglas:

     --lado   -1, 0 o +1. De qué lado del centro cae el naipe.
     [data-nivel]  0, 1, 2 o 3+. A cuántos pasos del centro está.

   El nivel fija cuánto se aparta, cuánto encoge, cuánto gira y cuánta luz
   pierde; el lado sólo multiplica el desplazamiento y el giro, así que la mitad
   izquierda es la derecha con el signo cambiado. El guion reparte esas dos y
   no toca ni un estilo más.

   `transform` en una sola declaración, y no las propiedades sueltas
   `translate`/`scale`/`rotate`: aquí el ORDEN importa —girar antes o después de
   desplazar da resultados distintos— y sólo la forma larga lo garantiza.

   POR QUÉ LOS CARTELES NO SE RECORTAN. Cada naipe es la pieza a 4:3 —la
   proporción EXACTA con la que el colegio las publica— y debajo un pie marino
   con el tipo, el titular y la fecha. La referencia usaba la foto a sangre con
   el texto encima, que aquí no vale: estas piezas llevan su propia letra dentro
   y un texto encima se cruzaría con el suyo.
   ========================================================================== */

.tablon { position: relative; overflow: clip; }
.tablon__encabezado { position: relative; z-index: 1; text-align: center; }

/* El antetítulo entre dos hilos, como en la referencia. Son de trama cerúlea y
   no de oro: el oro en este sistema sólo marca evidencia verificable. */
.tablon__antetitulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  max-width: none;
  color: #8FD0F0;
  margin: 0 0 var(--e-4);
}
.tablon__antetitulo::before,
.tablon__antetitulo::after {
  content: '';
  width: clamp(1.5rem, 4vw, 3rem);
  height: var(--hilo-fino);
  background: currentColor;
  opacity: 0.55;
}
.tablon__encabezado .acto__declaracion {
  width: min(100%, 15em);
  max-width: none;
  margin-inline: auto;
}
.tablon__entrada {
  margin: var(--e-5) auto 0;
  max-width: 52ch;
  font-size: var(--t-md);
  line-height: var(--interlinea-lead);
  color: var(--marino-tinte);
  text-wrap: balance;
}

/* ---- El aura -------------------------------------------------------------
   Desenfoque grande y saturación alta: lo que tiene que llegar es el COLOR de
   la pieza que está al frente, no su dibujo. `scale` de 1.15 porque `blur` deja
   los bordes transparentes y sin ese margen se vería el marco del desenfoque. */
.tablon__aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}
.tablon__aura img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  scale: 1.15;
  filter: blur(90px) saturate(1.7);
  opacity: 0.4;
  transition: opacity 420ms var(--sale);
}
/* Y por encima, el mismo velo radial de la referencia: aclara el centro, cierra
   los bordes, y hace que el naipe del frente se despegue del campo. */
.tablon__aura::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 46%,
              rgba(42, 46, 104, 0.25) 0%,
              rgba(28, 31, 74, 0.92) 100%);
}
.tablon.en-relevo .tablon__aura img { opacity: 0; }

/* ---- La escena ------------------------------------------------------------ */

.tablon__cuerpo {
  position: relative;
  z-index: 1;
  margin-top: clamp(var(--e-7), 5vw, var(--e-8));
}

.escena {
  position: relative;
  display: grid;
  place-items: center;
  /* La perspectiva es lo que convierte el giro en profundidad. Sin ella los
     naipes de los lados se verían aplastados, no de canto. */
  perspective: 1400px;
  /* El alto lleva el realce DENTRO de la cuenta: si no, el naipe del centro
     crece y se recorta contra el borde de la escena. Es el error clásico de
     agrandar con `scale` y olvidar que el hueco no crece solo. */
  height: calc(var(--ancho-naipe) * 4 / 3 * var(--realce) + var(--e-8));
  /* El ancho del naipe manda sobre todo lo demás: alto, apartes y giros salen
     de él, así que la escena entera escala cambiando esta línea. */
  --ancho-naipe: clamp(13rem, 19vw, 18rem);
  /* CUÁNTO manda el del centro. Andrés lo pidió el 2026-09-09: «un quince por
     ciento». Vive aquí y no en el naipe porque el alto de la escena también
     depende de él, y dos sitios con el mismo número se desincronizan. */
  --realce: 1.15;
  /* LA ESQUINA DEL NAIPE. Atada al ancho de la tarjeta y no a un valor fijo:
     así el redondeo se ve igual de marcado en el móvil —17 px sobre 192— que en
     el escritorio —26 px sobre 288—. Con un número fijo, la misma esquina que
     en grande se nota, en pequeño se come la tarjeta. */
  --radio-naipe: calc(var(--ancho-naipe) * 0.09);
}

.pila {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
}

.naipe {
  grid-area: 1 / 1;
  width: var(--ancho-naipe);
  aspect-ratio: 3 / 4;
  transform-origin: center center;
  transform:
    translateX(calc(var(--aparte, 0rem) * var(--lado, 0)))
    scale(var(--escala, 0.4))
    rotateY(calc(var(--giro, 0deg) * var(--lado, 0)));
  opacity: var(--luz, 0);
  z-index: var(--capa, 0);
  filter: brightness(var(--brillo, 0.4)) blur(var(--borron, 2px));
  transition: transform 800ms cubic-bezier(0.25, 1, 0.5, 1),
              opacity 800ms cubic-bezier(0.25, 1, 0.5, 1),
              filter 800ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Los apartes NO son proporcionales al nivel —0,86 y 1,55 veces el ancho, no
   0,86 y 1,72—: el segundo se acerca al primero a propósito, porque en
   perspectiva un reparto lineal deja al de más atrás demasiado suelto y la fila
   deja de leerse como una sola baraja. */
.naipe[data-nivel="0"] {
  --aparte: 0rem; --escala: var(--realce); --giro: 0deg;  --luz: 1; --capa: 30;
  --brillo: 1;    --borron: 0px;
}
/* Los apartes suben con el realce —0,86 → 0,96 y 1,55 → 1,68—: si se quedaran
   donde estaban, el del centro al crecer no destacaría, sólo taparía más a sus
   vecinos, y el efecto se leería como un desorden, no como una jerarquía. */
.naipe[data-nivel="1"] {
  --aparte: calc(var(--ancho-naipe) * 0.96); --escala: 0.84; --giro: -24deg;
  --luz: 0.7;     --capa: 20; --brillo: 0.78; --borron: 0px;
}
.naipe[data-nivel="2"] {
  --aparte: calc(var(--ancho-naipe) * 1.68); --escala: 0.68; --giro: -38deg;
  --luz: 0.4;     --capa: 10; --brillo: 0.58; --borron: 1px;
}
/* Del tercero en adelante no se ve: sale del centro encogido y apagado, que es
   de donde vuelve cuando le toca. */
.naipe[data-nivel="3"] {
  --aparte: calc(var(--ancho-naipe) * 1.94); --escala: 0.5; --giro: -44deg;
  --luz: 0; --capa: 0; --brillo: 0.4; --borron: 2px;
  pointer-events: none;
}

.naipe__enlace {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  height: 100%;
  color: #FFF;
  text-decoration: none;
  background: var(--marino-hondo);
  /* CON ESQUINAS REDONDEADAS desde el 2026-09-09, por petición del cliente. Lo
     que estaba escrito en `tokens.css` sobre los radios intermedios se escribió
     pensando en BOTONES, donde la alternativa suave existe: la píldora. Una
     tarjeta de 314 × 419 px no puede ser una píldora, así que aquí la elección
     real era 0 o un radio de verdad, y el cliente pidió que se notara.
     Va tan marcada como para leerse como una decisión y no como un descuido.

     `overflow: clip` es obligatorio y no es cosmético: sin él la fotografía
     sigue siendo un rectángulo y las dos esquinas de arriba salen en pico
     dentro de una tarjeta redondeada.

     El filete de tipo se mantiene arriba —ahora curvándose con la esquina—: es
     lo que distingue una circular de una resolución en las siete páginas, y no
     se pierde por ser un carrusel. */
  border-radius: var(--radio-naipe);
  overflow: clip;
  border: var(--hilo-fino) solid rgba(255, 255, 255, 0.14);
  border-top: var(--hilo-orillo) solid var(--ceruleo);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  transition: box-shadow 800ms cubic-bezier(0.25, 1, 0.5, 1);
}
.es-circular   .naipe__enlace { border-top-color: #8FD0F0; }
.es-resolucion .naipe__enlace { border-top-color: var(--oro); }

/* El del centro levanta del campo. La referencia lo hacía con un halo dorado;
   aquí el halo es cerúleo, porque el oro está reservado. */
.naipe[data-nivel="0"] .naipe__enlace {
  box-shadow: 0 30px 70px rgba(6, 8, 20, 0.9), 0 0 40px rgba(0, 134, 192, 0.28);
}
.naipe:not([data-nivel="0"]) .naipe__enlace { cursor: pointer; }

.naipe__lienzo {
  display: block;
  /* 4:3, la proporción EXACTA de las piezas del colegio: así no se recorta ni un
     renglón de los que traen dentro. */
  aspect-ratio: 4 / 3;
  overflow: clip;
  background: rgba(10, 12, 30, 0.5);
}
.naipe__lienzo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 620ms var(--sale);
}
.naipe[data-nivel="0"] .naipe__enlace:hover .naipe__lienzo img { transform: scale(1.03); }

.naipe__texto {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-5) var(--e-5);
}
.naipe__tipo { color: #8FD0F0; }
.es-resolucion .naipe__tipo { color: var(--oro); }
.naipe__titulo {
  align-self: start;
  font-family: var(--fuente-titular);
  font-weight: var(--peso-titular);
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* Tres renglones y punto: todos los naipes miden lo mismo, y un titular largo
     empujaría su pie fuera de la tarjeta. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.naipe__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  padding-top: var(--e-3);
  border-top: var(--hilo-fino) solid rgba(255, 255, 255, 0.18);
}
.naipe__fecha { color: var(--marino-tinte); }
.naipe__leer {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-family: var(--fuente-titular);
  font-weight: 700; font-size: var(--t-xs);
  letter-spacing: 0.02em; text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: var(--hilo-trama) solid var(--ceruleo);
}
.naipe__leer svg { width: 1em; height: 1em; flex: none; }

/* «LEER» SÓLO CUANDO SE PASA POR ENCIMA. Andrés lo pidió el 2026-09-09, y el
   naipe gana con ello: la llamada estaba compitiendo con el titular en las
   cinco tarjetas a la vez, incluidas las de los lados, que ni siquiera llevan
   al artículo. Ahora el naipe enseña qué es y cuándo fue, y sólo declara qué
   hacer cuando el cursor ya está encima.

   Se oculta con `opacity`, NO con `display`: así el pie no se recoloca al
   aparecer —el titular pegaría un salto— y el texto sigue en el árbol de
   accesibilidad, que es de donde el lector de pantalla saca el nombre del
   enlace. Y entra también con `:focus-visible`, porque quien navega con el
   teclado no tiene cursor que poner encima. Los naipes de los lados llevan
   `tabindex="-1"`, así que el foco sólo puede caer en el del centro. */
.naipe__leer {
  opacity: 0;
  translate: 0 0.35rem;
  transition: opacity var(--dur-corta) var(--sale),
              translate var(--dur-corta) var(--sale);
}
.naipe[data-nivel="0"] .naipe__enlace:hover .naipe__leer,
.naipe[data-nivel="0"] .naipe__enlace:focus-visible .naipe__leer {
  opacity: 1;
  translate: 0 0;
  border-bottom-color: #FFF;
}
@media (prefers-reduced-motion: reduce) {
  .naipe__leer { transition: none; translate: 0 0; }
}
.naipe__enlace:focus-visible { outline: var(--hilo-trama) solid var(--oro); outline-offset: 4px; }

/* ---- Las flechas ---------------------------------------------------------
   Redondas, y aquí sí: el círculo no es una esquina redondeada, es la figura
   que manda en toda la portada —los anillos, los discos, el muro del equipo—. */
.escena__paso {
  position: absolute;
  top: 50%;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  padding: 0;
  translate: 0 -50%;
  background: rgba(10, 12, 30, 0.55);
  backdrop-filter: blur(8px);
  border: var(--hilo-fino) solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #FFF;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: border-color var(--dur-corta) var(--sale),
              background var(--dur-corta) var(--sale);
}
.escena__paso svg { width: 1.1rem; height: 1.1rem; }
.escena__paso:hover { border-color: #FFF; background: rgba(20, 24, 60, 0.8); }
.escena__paso--atras    { left: clamp(var(--e-3), 3vw, var(--e-7)); }
.escena__paso--adelante { right: clamp(var(--e-3), 3vw, var(--e-7)); }

/* ---- El rail -------------------------------------------------------------
   La referencia traía puntos. Aquí son TRAZOS, no puntos, y por un motivo
   concreto: Andrés acaba de pedir que desaparezca la fila de puntitos de las
   etapas de la ruta, y una fila de diez puntos justo debajo volvería a poner en
   pantalla la forma que se acaba de quitar. Un trazo que se alarga al llegarle
   el turno dice lo mismo y pertenece al tejido. */
.rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  list-style: none;
  margin: clamp(var(--e-6), 3vw, var(--e-7)) 0 0;
  padding: 0;
}
.salto {
  display: block;
  width: 0.85rem;
  height: 3px;
  padding: 0;
  background: rgba(255, 255, 255, 0.28);
  border: 0;
  border-radius: var(--radio-0);
  cursor: pointer;
  transition: width 420ms var(--sale), background 420ms var(--sale);
}
.salto:hover { background: rgba(255, 255, 255, 0.6); }
.salto[aria-pressed="true"] { width: 2.4rem; background: var(--oro); }
/* El área de toque llega a 44px sin que el trazo engorde: la WCAG 2.5.8 pide
   24px mínimo y en un teléfono diez trazos de 3px serían imposibles de acertar. */
.rail li { display: grid; place-items: center; min-height: 2.75rem; }
.salto:focus-visible { outline: var(--hilo-trama) solid var(--oro); outline-offset: 6px; }

/* ---- Los mandos ----------------------------------------------------------
   Desde el 2026-09-10: fuera el contador «1 / 10» y el rótulo «Pausar el
   paso», que el cliente pidió quitar. La pausa sigue —la WCAG 2.2.2 la exige
   para un carrusel que avanza solo— pero como icono junto al rail, y las dos
   salidas van centradas con el par de la portada: botón de oro y enlace con
   raya. */

.tablon__guia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  margin-top: clamp(var(--e-6), 3vw, var(--e-7));
}
.tablon__guia .rail { margin: 0; }

.tablon__control {
  display: grid;
  place-items: center;
  flex: none;
  /* 2.75rem: los 44 px de área de toque que ya tiene cada trazo del rail. */
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: var(--hilo-fino) solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  color: #FFF;
  cursor: pointer;
  transition: border-color var(--dur-corta) ease, background-color var(--dur-corta) ease;
}
.tablon__control:hover { border-color: #FFF; background: rgba(255, 255, 255, 0.08); }
.tablon__control:focus-visible { outline: var(--hilo-trama) solid var(--oro); outline-offset: 3px; }
.tablon__icono { width: 0.9rem; height: 0.9rem; fill: currentColor; }
.tablon__icono[hidden] { display: none; }

.tablon__pie {
  position: relative;
  z-index: 1;
  margin-top: clamp(var(--e-7), 5vw, var(--e-8));
}
.tablon__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-4) var(--e-7);
}

@media (max-width: 38rem) {
  .tablon__acciones { flex-direction: column; gap: var(--e-5); }
}

/* ---- Estrechando ---------------------------------------------------------
   El naipe crece en proporción a la pantalla y los apartes van con él, así que
   no hay que recolocar nada: sólo se retira el tercer plano, que a esta anchura
   quedaría entero fuera de la pantalla, y las flechas se meten al pie para no
   taparle la cara al cartel. */
@media (max-width: 62rem) {
  .escena { --ancho-naipe: clamp(12rem, 34vw, 16rem); }
}

@media (max-width: 48rem) {
  .escena { --ancho-naipe: min(58vw, 15rem); perspective: 1000px; }
  .naipe[data-nivel="2"] { --luz: 0; --capa: 0; pointer-events: none; }
  .escena__paso { width: 2.5rem; height: 2.5rem; }
  .escena__paso--atras    { left: 0; }
  .escena__paso--adelante { right: 0; }
  .naipe__texto { padding: var(--e-3) var(--e-4) var(--e-4); }
  .tablon__aura img { filter: blur(60px) saturate(1.7); }
}

/* Sin movimiento no hay nada que pausar: los naipes cambian de sitio sin
   recorrerlo y el carrusel se maneja sólo a mano. */
@media (prefers-reduced-motion: reduce) {
  .naipe, .naipe__lienzo img, .tablon__aura img { transition: none; }
}