/* ==========================================================================
   CMCS — Composición de la Home (PGC-001)
   ========================================================================== */

/* ---- Barra de utilidad --------------------------------------------------- */
.utilidad {
  background: var(--marino-hondo);
  color: var(--marino-tinte);
  font-size: var(--t-xs);
}
.utilidad__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-5);
  min-height: 2.5rem;
}
.utilidad a:not(.boton) { color: var(--marino-tinte); text-decoration: none; }
.utilidad a:not(.boton):hover { color: #FFF; text-decoration: underline; }
/* EL TELÉFONO ES EL ÚNICO ENLACE QUE SE TOCA CON EL DEDO EN LA BARRA, y en un
   teléfono es además el que más se toca de toda la página: una madre que abre el
   sitio para llamar al colegio. Medía 14 px de alto, que es la altura de su
   letra. La WCAG 2.5.8 pide 24 px de destino, y aquí no vale la excepción de
   separación porque en móvil los otros dos enlaces de la barra están ocultos y
   éste se queda solo. El relleno vertical lo lleva a 24 sin mover la barra: el
   `margin` negativo devuelve lo que el `padding` añadiría. */
.utilidad__tel {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding-block: var(--e-2);
  margin-block: calc(-1 * var(--e-2));
  color: #FFF;
  font-variant-numeric: tabular-nums;
}

/* ---- Cabecera ------------------------------------------------------------ */
.cabecera { background: var(--marino); position: relative; }
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-6);
  padding-block: var(--e-5);
}
.cabecera__marca { display: block; flex: none; }
/* EL TAMAÑO DEL LOGOTIPO, Y POR QUÉ SUBIÓ (2026-09-10) --------------------
   Andrés cambió el archivo por uno que el cliente pidió, y con él cambió la
   PROPORCIÓN: el anterior medía 2092 × 597 —3,5 a 1, con el texto debajo del
   monograma— y el nuevo mide 6440 × 934 —6,9 a 1, todo en un renglón—.

   Eso es lo que hace que «se vea muy pequeño», y no es una impresión: a los
   mismos 13rem de ancho, el logotipo pasó de 59 px de alto a 30. La mitad.
   Un 15 % de ancho sólo lo devolvía a 35, así que aquí se sube más —a 16rem,
   un 23 %— y aun así queda por debajo de la presencia que tenía antes.
   Devolvérsela del todo pedía 26rem, y a esa anchura el logotipo y el menú se
   pelean la fila en portátiles de 1280.

   SI HACE FALTA MÁS, el sitio donde tocar es éste y los otros dos de abajo
   —`.menu__marca` y `.pie__marca img`—, y lo que hay que mirar es que a 1024
   el menú siga cabiendo en un renglón. */
.cabecera__marca img { width: clamp(10.5rem, 25vw, 16rem); }

.nav__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__lista a {
  display: block;
  padding-block: var(--e-2);
  color: #FFF;
  font-family: var(--fuente-titular);
  font-weight: 500;
  font-size: var(--t-sm);
  text-decoration: none;
  border-bottom: var(--hilo-trama) solid transparent;
  transition: border-color var(--dur-corta) var(--sale);
}
.nav__lista a:hover,
.nav__lista a[aria-current="page"] { border-bottom-color: var(--ceruleo); }

/* ---- La llave y el menú del teléfono --------------------------------------
   Hasta el 2026-09-08 no había menú en ningún ancho: la navegación eran seis
   renglones apilados que se comían 285 px de la primera pantalla. En un colegio,
   el teléfono es la superficie donde se decide.

   El corte está en 62rem porque es donde los seis destinos dejan de caber en un
   renglón junto al logotipo (unos 975 px de contenido).                       */

.llave {
  display: none;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: transparent;
  border: var(--hilo-fino) solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radio-0);
  color: #FFF;
  font-family: var(--fuente-codigo);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-codigo);
  text-transform: uppercase;
  cursor: pointer;
}
.llave:hover { border-color: #FFF; }
/* Tres hilos, como la trama. */
.llave__rayas,
.llave__rayas::before,
.llave__rayas::after {
  display: block;
  width: 1.1rem;
  height: var(--hilo-trama);
  background: currentColor;
}
.llave__rayas { position: relative; }
.llave__rayas::before,
.llave__rayas::after { content: ''; position: absolute; left: 0; }
.llave__rayas::before { top: -0.35rem; }
.llave__rayas::after  { top:  0.35rem; }

.menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--marino-hondo);
  color: #FFF;
}
.menu::backdrop { background: rgba(10, 12, 30, 0.6); }
.menu[open] {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--e-6);
  padding: var(--e-5) var(--canal) var(--e-7);
}

.menu__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  padding-bottom: var(--e-4);
  border-bottom: var(--hilo-fino) solid rgba(255, 255, 255, 0.2);
}
.menu__marca { width: 11rem; }
.menu__cerrar {
  padding: var(--e-3) var(--e-4);
  background: transparent;
  border: var(--hilo-fino) solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radio-0);
  color: #FFF;
  font-family: var(--fuente-codigo);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-codigo);
  text-transform: uppercase;
  cursor: pointer;
}
.menu__cerrar:hover { border-color: #FFF; }

.menu__nav { overflow-y: auto; }
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__lista li + li { border-top: var(--hilo-fino) solid rgba(255, 255, 255, 0.14); }
.menu__lista a {
  display: block;
  /* Renglones altos: el destino se toca con el pulgar, no se apunta. */
  padding: var(--e-5) 0;
  color: #FFF;
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.menu__lista a:hover,
.menu__lista a:focus-visible { color: var(--ceruleo-claro); }

.menu__pie { display: grid; gap: var(--e-5); }
.menu__pie .boton { justify-content: center; }
.menu__dato { display: grid; gap: var(--e-2); margin: 0; }
.menu__rotulo { color: var(--marino-tinte); }
.menu__dato a {
  color: #FFF;
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: var(--t-md);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.menu__enlaces { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); margin: 0; }
.menu__enlaces a { color: var(--marino-tinte); font-size: var(--t-sm); }

@media (max-width: 62rem) {
  .nav { display: none; }
  .llave { display: inline-flex; }
}
@media (min-width: 62.01rem) {
  .menu { display: none; }
}

/* En el teléfono la barra de utilidad se queda sólo con el teléfono, centrado:
   los tres destinos se caían de línea y comían dos renglones antes de la web.
   Los otros dos viven en el menú. */
/* APP CERVANTES EN LA BARRA (2026-09-14). Cápsula con filete de oro y el
   ícono del celular con la flecha de descarga: es lo único de la barra que
   presenta algo nuevo. Oro como filete e ícono, nunca como letra. Los selectores
   llevan `.utilidad a` para ganarle a `.utilidad a:not(.boton)`, que pinta los
   enlaces de la barra en marino tinte y los subraya al pasar. */
.utilidad a.utilidad__app {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 1.5rem;
  padding: 0.15em 0.85em;
  border: var(--hilo-fino) solid rgba(240, 180, 41, 0.6);
  border-radius: var(--radio-cta);
  color: #FFF;
}
.utilidad a.utilidad__app:hover { text-decoration: none; background: rgba(240, 180, 41, 0.14); }
.utilidad__app svg { flex: none; width: 1.05em; height: 1.05em; color: var(--oro); }

@media (max-width: 40rem) {
  /* La cápsula de la app lleva `.utilidad a.utilidad__app` para ganarle al
     color de la barra, y con esa especificidad también le ganaba a este
     `display: none`: en el teléfono se quedaba sola junto al número. Se apaga
     con su mismo selector; en móvil vive en el menú. */
  .utilidad__extra, .utilidad a.utilidad__app { display: none; }
  .utilidad__fila { justify-content: center; }
}

/* ---- Portada ------------------------------------------------------------- */
.portada {
  position: relative;
  background: var(--marino);
  color: #FFF;
  overflow: hidden;
}
.portada__contenido {
  position: relative;
  padding-block: clamp(var(--e-8), 9vw, var(--e-10));
  display: grid;
  gap: var(--e-6);
  max-width: 54rem;
}
.portada h1 { color: #FFF; }
.portada__entrada {
  font-size: var(--t-md);
  line-height: var(--interlinea-lead);
  color: #D9DDF0;
  max-width: 46ch;
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--e-4); }

/* ---- El colegio visto A TRAVÉS del tejido -------------------------------
   El video no va detrás del titular: se enmascara con la urdimbre y aparece
   en franjas verticales, como mirar a través de la tela. Una segunda máscara
   lo desvanece hacia la izquierda, de modo que el titular NUNCA se apoya
   sobre imagen en movimiento y su contraste sigue siendo medible.           */

.pelicula {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* La fotografía es la base y está SIEMPRE, también en móvil y sin JavaScript.
   El video, cuando existe, se superpone. Antes la portada era un campo azul
   plano: eso leía a maqueta, no a colegio. */
.pelicula__base,
.pelicula > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  display: block;
  filter: saturate(0.78) contrast(1.05);
}
.pelicula > video { opacity: 0; transition: opacity 700ms var(--sale); }
.pelicula > video.corriendo { opacity: 1; }

/* Dos velos. El vertical asienta la cabecera y el pie del campo; el
   horizontal deja la mitad izquierda en marino sólido, que es donde vive el
   titular. Así el contraste del H1 sigue siendo medible sobre imagen. */
.pelicula::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--marino) 0%, rgba(42,46,104,0.94) 34%, rgba(42,46,104,0.55) 62%, rgba(42,46,104,0.34) 100%),
    linear-gradient(to bottom, rgba(28,31,74,0.85) 0%, transparent 26%, transparent 62%, rgba(28,31,74,0.80) 100%);
}

/* La urdimbre corta la fotografía: se ve el colegio A TRAVÉS del tejido. */
.portada .urdimbre {
  z-index: 1;
  --color-urdimbre: rgba(255, 255, 255, 0.16);
}

.portada__contenido { z-index: 2; }

/* Control de pausa — WCAG 2.2.2: todo movimiento automático de más de
   5 segundos necesita un control visible para detenerlo. */
/* Abajo a la IZQUIERDA: el inferior derecho es donde entran las acciones del
   segundo tiempo de la portada, y no se pueden pisar. */
/* UN ICONO, NO UN RÓTULO, desde el 2026-09-09. La norma pide un control
   visible, no un letrero: «PAUSAR VIDEO» en versales sobre la fotografía era lo
   único de la portada que se leía como una instrucción, y competía con las dos
   acciones de abajo a la derecha, que son las que sí queremos que se lean.

   Es EL MISMO botón redondo que las flechas del coverflow —misma talla, mismo
   fondo, mismo borde—: en esta página el círculo ya es la figura que manda, y
   un control nuevo con su propia forma sería un sistema más. 46 px de lado,
   por encima de los 24 que pide la WCAG 2.5.8. El nombre accesible lo lleva
   `aria-label`, que el guion cambia junto con el icono. */
.pelicula__control {
  position: absolute;
  /* A LA IZQUIERDA, ENCIMA DE LA NOTA DE LA MÚSICA (2026-09-10). Pasó unas
     horas a la derecha, cuando WhatsApp estaba a la izquierda; al mudarse
     WhatsApp a la derecha, este control vuelve a su lado y se apila sobre la
     nota: los dos gobiernan algo que suena o se mueve solo. El `left` es el
     mismo del muelle, corrido lo que mide de más —2,9rem contra 2,75— para que
     los dos queden centrados en la misma columna. */
  left: calc(max(var(--e-5), env(safe-area-inset-left)) - 0.075rem);
  bottom: calc(var(--e-5) + 2.75rem + var(--e-3));
  z-index: 3;
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  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);
}
.pelicula__control:hover { border-color: #FFF; background: rgba(20, 24, 60, 0.8); }
.pelicula__icono { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.pelicula__icono[hidden] { display: none; }

@media (max-width: 48rem) {
  /* En móvil no se descarga el video, pero la fotografía se queda: es lo que
     hace que la portada exista. */
  .pelicula > video { display: none; }
  .pelicula::after {
    background:
      linear-gradient(to bottom, rgba(28,31,74,0.55) 0%, rgba(42,46,104,0.92) 55%, var(--marino) 100%);
  }
}

/* La trama que cruza la portada, a media altura */
.portada__trama {
  position: absolute;
  left: 0; right: 0;
  top: 62%;
  --color-paso: var(--marino);
}

/* El orillo era una tira con las tres cifras justo debajo del video. Se retiró
   el 2026-09-07: repetía «Indicadores y reconocimientos oficiales» palabra por
   palabra. Queda solo el filete —`.orillo-hilo`, en base.css— como remate de la
   portada.                                                                    */

/* ---- Bandas de contenido -------------------------------------------------- */
.banda { position: relative; padding-block: clamp(var(--e-8), 7vw, var(--e-9)); }
.banda--clara { background: var(--lana-clara); }
.banda__titulo { color: var(--marino); max-width: 22ch; }
.banda__cuerpo { margin-top: var(--e-5); font-size: var(--t-md); color: var(--tinta-suave); }

/* Urdimbre tenue sobre el campo claro */
.banda .urdimbre { --color-urdimbre: rgba(42, 46, 104, 0.07); }

/* ---- Ruta pedagógica: cuatro hiladas del tejido --------------------------
   Lista de definición, no una parrilla de tarjetas iguales: cada etapa es
   una hilada de trama, y el hilo que las separa es literal.                  */
.ruta { margin: var(--e-7) 0 0; }
.ruta__hilada {
  display: grid;
  grid-template-columns: minmax(12rem, 3fr) minmax(0, 7fr);
  gap: var(--e-3) var(--e-7);
  align-items: baseline;
  padding-block: var(--e-6);
}
.ruta__etapa {
  font-family: var(--fuente-titular);
  font-weight: var(--peso-titular);
  font-size: var(--t-lg);
  letter-spacing: var(--tracking-titular);
  color: var(--marino);
  margin: 0;
}
.ruta__resumen { margin: 0; color: var(--tinta-suave); }
.ruta .trama { --color-paso: var(--lana-clara); }

@media (max-width: 44rem) {
  .ruta__hilada { grid-template-columns: 1fr; gap: var(--e-2); }
}

/* ---- El respaldo: tres afirmaciones con documento --------------------------
   Sustituye a la antigua «Evidencia», que era una lista de tres párrafos sobre
   marino. Dos cambios de fondo:

   CAMPO CLARO. Venían cuatro secciones marino seguidas y ésta se hundía entre
   ellas; en claro corta la racha y aparece al salir del equipo docente.

   EL ORO YA NO PUEDE SER TEXTO AQUÍ. Sobre campo claro da 1,65:1 —ilegible—, así
   que baja a ser SUPERFICIE: el filete de 4 px que remata cada ficha, el mismo
   orillo que cerraba la portada. Lo que se lee en color es el código, en
   cerúleo hondo (5,3:1). Si alguien vuelve a pintar de oro una línea de texto
   sobre este fondo, está rompiendo el contraste.                              */

.respaldo { background: var(--campo-cielo); color: var(--tinta); }

/* EL ENCABEZADO VA AL EJE, las fichas no. Andrés lo pidió el 2026-09-08.
   Centrar el encabezado y dejar el contenido alineado a la izquierda es lo que
   hace que las tres tarjetas se lean como una tabla y no como tres párrafos:
   el eje anuncia el bloque, la retícula lo ordena. Centrarlo TODO —tarjetas
   incluidas— rompería el filo izquierdo que comparten cifra, título, detalle y
   código, que es de donde sale la sensación de documento. */
.respaldo__encabezado {
  text-align: center;
  margin-inline: auto;
  max-width: 64rem;
}
.respaldo__antetitulo {
  display: block;
  /* `max-width: none` porque en base.css todo `p` lleva la medida de lectura, y
     una caja estrecha alineada a la izquierda no se centra por mucho
     `text-align: center` que tenga el padre: se centra su TEXTO dentro de una
     caja que sigue pegada al margen. */
  max-width: none;
  margin: 0 0 var(--e-4);
  color: var(--ceruleo-hondo);
}
/* DOS RENGLONES, NO TRES. Andrés lo pidió el 2026-09-08. A 16em el titular caía
   en tres y la entrada en otras tres, y seis renglones centrados antes de las
   fichas se leen como un muro. La medida va en `em` para que el punto de corte
   siga al tamaño de letra en vez de quedarse fijo en píxeles. */
.respaldo__titulo {
  color: var(--marino);
  /* Dos renglones se consiguen ENSANCHANDO el lienzo a 64rem, no encogiendo la
     letra: «Indicadores y reconocimientos oficiales» son 38 caracteres y a 46rem
     caían en tres. La talla se queda en la de acto, que es la que rima con
     «Quién enseña» y «Noticias y circulares».
     Ojo si alguien intenta bajarla desde aquí: `.acto__declaracion` vive en
     actos.css, que carga después, así que ganaría esa y no ésta. */
  width: min(100%, 20em);
  max-width: none;
  margin-inline: auto;
  text-wrap: balance;
}
.respaldo__entrada {
  margin: var(--e-5) auto 0;
  max-width: 56ch;
  font-size: var(--t-md);
  line-height: var(--interlinea-lead);
  color: var(--tinta-suave);
  text-wrap: pretty;
}

/* ---- Las tres, EN RENGLONES -------------------------------------------------
   Eran tres columnas. El cliente pidió el 2026-09-10 que se leyeran «como la
   parte de Familias que dice qué consultar y cada cuánto cambia», y tenía
   razón por un motivo que no es de gusto: las tres columnas obligaban a leer
   en zigzag —sello, cifra, título, detalle, código; volver arriba; repetir—
   cuando lo que la sección quiere es que se comparen las tres. En renglones se
   comparan solas: los tres sellos forman una columna, las tres cifras otra, y
   los tres documentos otra al filo derecho.

   ES EL MISMO OBJETO QUE `.indice-anio`, y a propósito: hilo fino entre
   renglones, un ancla grande a la izquierda y la columna de la derecha
   alineada al filo. Lo que cambia es que aquí NO son enlaces —no hay a dónde
   llevar— así que no llevan ni flecha ni estado de señalado. Un renglón que se
   ilumina y no hace nada al pulsarlo es peor que uno quieto.

   EL ORO SE CONSERVA COMO ORILLO, ahora como una sola línea sobre el bloque en
   vez de tres filetes que se tocaban. Y sigue siendo SUPERFICIE, nunca texto:
   sobre campo claro da 1,65:1.                                               */

.respaldos {
  display: grid;
  margin: clamp(var(--e-7), 5vw, var(--e-8)) 0;
  padding: 0;
  list-style: none;
  border-top: var(--hilo-orillo) solid var(--oro);
}

.respaldo-fila {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: clamp(var(--e-4), 3vw, var(--e-7));
  align-items: center;
  padding: clamp(var(--e-5), 2.8vw, var(--e-7)) 0;
  border-bottom: var(--hilo-fino) solid rgba(42, 46, 104, 0.18);
}

/* Ancho fijo para el sello y no `auto`: los tres logos tienen proporciones muy
   distintas —dos apaisados y uno casi cuadrado— y con `auto` cada renglón
   empezaría su cifra en un sitio. Con la caja fija, las tres cifras caen a
   plomo, que es lo que hace que el bloque se lea como una tabla. */
.respaldo-fila__sello {
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 8vw, 6.5rem);
}

.respaldo-fila__cifra {
  font-family: var(--fuente-titular);
  font-weight: var(--peso-titular);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  color: var(--marino);
  font-variant-numeric: tabular-nums lining-nums;
  /* Anchura mínima para que «A+», «298» y «2» arranquen su título en la misma
     vertical. Sin esto, el «2» dejaría su renglón descolgado. */
  min-width: 3.2ch;
  text-align: center;
}

.respaldo-fila__cuerpo { display: grid; gap: var(--e-2); }
.respaldo-fila__que {
  margin: 0;
  font-family: var(--fuente-titular);
  font-weight: var(--peso-titular);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.14;
  letter-spacing: var(--tracking-titular);
  color: var(--marino);
  text-wrap: balance;
}
.respaldo-fila__detalle {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: 56ch;
}

/* Al filo derecho y alineado a la derecha: los tres documentos forman una
   columna que se lee de un vistazo, que es de lo que trata la sección.
   El código va en cerúleo hondo (5,3:1) y NUNCA en oro. */
.respaldo-fila__aval { display: grid; gap: var(--e-1); text-align: right; }
.respaldo-fila__rotulo { color: var(--tinta-suave); }
.respaldo-fila__codigo {
  font-size: var(--t-sm);
  line-height: 1.3;
  color: var(--ceruleo-hondo);
  font-weight: 700;
}

@media (max-width: 46rem) {
  /* El sello y la cifra se quedan juntos arriba y el documento pasa debajo:
     cuatro columnas en un teléfono dejarían el detalle en una cuchilla de
     ocho caracteres. */
  .respaldo-fila {
    grid-template-columns: auto auto;
    gap: var(--e-3) var(--e-5);
    align-items: center;
  }
  .respaldo-fila__cuerpo,
  .respaldo-fila__aval { grid-column: 1 / -1; }
  .respaldo-fila__aval { text-align: left; }
}

.sello { width: auto; flex: none; }
.sello--soacha { height: 2.6rem; }
.sello--icfes  { height: 2.2rem; }
.sello--sena   { height: 3.1rem; }

.respaldo-ficha__que {
  margin: 0;
  font-size: var(--t-base);
  font-weight: var(--peso-titular);
  line-height: 1.28;
  letter-spacing: 0;
  color: var(--marino);
  text-wrap: balance;
}
/* La cifra es el titular real de la ficha; el resto del h3 es su unidad. */
.respaldo-ficha__cifra {
  display: block;
  font-size: clamp(3.6rem, 6.4vw, 5.2rem);
  font-weight: var(--peso-titular);
  line-height: 0.84;
  letter-spacing: var(--tracking-display);
  color: var(--marino);
  margin-bottom: var(--e-3);
  font-variant-numeric: tabular-nums lining-nums;
}

.respaldo-ficha__detalle {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--tinta-suave);
  max-width: 34ch;
}

.respaldo-ficha__codigo {
  margin: 0;
  padding-top: var(--e-4);
  border-top: var(--hilo-fino) solid var(--lana-honda);
  color: var(--ceruleo-hondo);
}

/* Tres columnas o una, nunca dos. Con `auto-fit` a 768 px caían 2 + 1 y la
   tercera quedaba huérfana debajo, que se lee como un error de maquetación. El
   corte está en 62rem porque tres columnas de 16rem más los canales piden 1.008
   px de ventana; por debajo no caben y es mejor apilarlas.
   Apiladas, el filete de oro en las tres sobra: se queda en la primera, como
   orillo del bloque entero. */
/* El cierre de la sección va AL EJE, como el encabezado. Andrés lo pidió el
   2026-09-08. Pegado al margen izquierdo, el botón quedaba bajo la primera
   columna y parecía pertenecerle a ella y no a las tres. */
.respaldo__cierre { display: flex; justify-content: center; }

@media (max-width: 62rem) {
  .respaldos { grid-template-columns: 1fr; }
  /* Apiladas, el hilo vertical no separa nada: pasa a ser horizontal, y el
     orillo de oro se queda sólo en la primera, como remate del bloque entero. */
  .respaldo-ficha { padding-inline: 0; padding-bottom: var(--e-6); }
  .respaldo-ficha + .respaldo-ficha {
    border-left: 0;
    border-top: var(--hilo-fino) solid rgba(42, 46, 104, 0.16);
  }
  .respaldo-ficha__detalle { max-width: none; }
}

/* ---- Pie ------------------------------------------------------------------ */
.pie { background: var(--marino-hondo); color: var(--marino-tinte); }
.pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--e-7);
  padding-block: var(--e-8) var(--e-6);
}
.pie h2 {
  font-size: var(--t-sm);
  font-weight: var(--peso-titular);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FFF;
  margin-bottom: var(--e-4);
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.pie a:not(.boton) { color: var(--marino-tinte); text-decoration: none; font-size: var(--t-sm); }
.pie a:not(.boton):hover { color: #FFF; text-decoration: underline; }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4) var(--e-6);
  border-top: var(--hilo-fino) solid rgba(255, 255, 255, 0.15);
  padding-block: var(--e-5);
  font-size: var(--t-xs);
}
.pie__legal p { margin: 0; max-width: none; }

.pie__firma {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45em;
  color: var(--marino-tinte);
}
.pie__firma--colegio {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.pie__corazon-texto {
  color: #8FD0F0;
  line-height: 1;
  translate: 0 -0.03em;
}

@media (max-width: 44rem) {
  .pie__legal { justify-content: flex-start; }
}
/* El pie tiene sitio de sobra, así que aquí el logotipo sí recupera su
   presencia anterior: 15rem sobre 6,9 a 1 son 35 px de alto, los mismos que
   daban 11rem con la proporción vieja. */
.pie__marca img { width: 15rem; margin-bottom: var(--e-4); }

/* ---- La cabecera se asienta al bajar -------------------------------------
   Sobre fotografía el logo y la navegación flotaban sin nada que los
   sostuviera, y en cuanto el video se abre compiten con él. Al bajar, la
   cabecera gana un fondo translúcido con desenfoque y se queda fija. */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Sólida en reposo: la cabecera NO se superpone a la fotografía, asi que
     transparente dejaba el logotipo blanco sobre el fondo claro de la pagina
     y desaparecia. Al bajar gana translucidez y desenfoque. */
  background: var(--marino);
  transition: background var(--dur-media) var(--sale);
}
.utilidad { position: relative; z-index: 51; }

@supports (animation-timeline: scroll(root block)) {
  @media (prefers-reduced-motion: no-preference) {
    .cabecera {
      animation: asentar-cabecera linear both;
      animation-timeline: scroll(root block);
      animation-range: 8svh 26svh;
    }
  }
}
@keyframes asentar-cabecera {
  from { background: rgba(42,46,104,1); backdrop-filter: blur(0px); }
  to   { background: rgba(20,23,58,0.86); backdrop-filter: blur(14px); }
}
/* Sin scroll-driven, la cabecera lleva su fondo desde el principio. */
@supports not (animation-timeline: scroll(root block)) {
  .cabecera { background: rgba(20,23,58,0.82); backdrop-filter: blur(14px); }
}

/* ---- La cabecera flota SOBRE el video de portada -------------------------
   La portada ya no empieza 147 px por debajo del borde: el video arranca a
   pantalla completa y la cabecera va encima. Para poder subirla con un margen
   negativo sin JavaScript y sin desplazamiento de layout, la altura del tope
   se fija por token en vez de depender del contenido.

   Sólo a partir de 68 rem: por debajo de esa medida la navegación puede pasar
   a dos líneas, la altura dejaría de ser predecible y el margen negativo ya no
   cuadraría. Ahí la cabecera se queda donde está, que también funciona.       */

@media (min-width: 68rem) {
  :root { --tope: 9rem; }

  .cabecera__fila { min-height: 6.5rem; padding-block: 0; }

  .es-portada .expansion { margin-top: calc(-1 * var(--tope)); }

  /* TRANSPARENTE SÓLO EN LA PORTADA — `.es-portada` en el `<body>`, que pone
     `construir.py`.

     Aquí ya había un aviso escrito: «si la cabecera se quedara transparente
     para siempre, más abajo la navegación caería sobre contenido claro y
     desaparecería. Es el error que ya cometimos una vez». Volvió a pasar el
     2026-09-08 con las seis páginas internas: heredaban la transparencia, no
     tienen video ni margen negativo que meta un campo oscuro debajo, y el menú
     quedó blanco sobre el fondo claro de la página. Invisible.

     La transparencia sólo tiene sentido donde hay una fotografía debajo. En las
     internas la cabecera se queda sólida y se ve siempre.

     Y el condicional de `@supports` sigue importando: si la cabecera se quedara
     transparente sin el asentamiento por scroll, el problema volvería más
     abajo, en la primera sección clara. */
  @supports (animation-timeline: scroll(root block)) {
    @media (prefers-reduced-motion: no-preference) {
      .es-portada .utilidad,
      .es-portada .cabecera { background: transparent; }
      /* Sobre video, el gris de la barra de utilidad se pierde. */
      .es-portada .utilidad,
      .es-portada .utilidad a:not(.boton) { color: rgba(255,255,255,0.86); text-shadow: 0 1px 10px rgba(8,10,22,0.85); }
      .es-portada .cabecera { animation-name: asentar-cabecera-flotante; }
      .es-portada .utilidad {
        animation: asentar-utilidad linear both;
        animation-timeline: scroll(root block);
        animation-range: 8svh 26svh;
      }
    }
  }
}

@keyframes asentar-cabecera-flotante {
  from { background: rgba(42,46,104,0); backdrop-filter: blur(0px); }
  to   { background: rgba(20,23,58,0.86); backdrop-filter: blur(14px); }
}
@keyframes asentar-utilidad {
  from { background: rgba(20,23,58,0); }
  to   { background: rgba(16,18,44,0.88); }
}

/* ==========================================================================
   EL MUELLE — WhatsApp y música, flotando abajo a la izquierda (2026-09-10)
   --------------------------------------------------------------------------
   Los pidió el cliente. WhatsApp va abajo a la DERECHA y la música abajo a la
   IZQUIERDA desde el 2026-09-10 —la primera versión los apilaba juntos a la
   izquierda, y Andrés corrigió la esquina de WhatsApp—. La razón de cada
   decisión —el verde, la música apagada al llegar, el número provisional—
   está junto al marcado, en `plantilla.html`.

   En la portada, el control del video se apila ENCIMA de la nota: los dos son
   mandos de algo que suena o se mueve solo, y juntos se leen como una columna
   de mandos en vez de como dos botones sueltos. Ver `.pelicula__control`. */

.muelle {
  position: fixed;
  z-index: 60;
  bottom: max(var(--e-5), env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: var(--e-3);
  pointer-events: none;            /* la caja no tapa la página; sólo el botón */
}
.muelle--izquierda { left:  max(var(--e-5), env(safe-area-inset-left)); }
.muelle--derecha   { right: max(var(--e-5), env(safe-area-inset-right)); }
.muelle__boton {
  pointer-events: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-media) var(--sale), box-shadow var(--dur-media) var(--sale),
              background-color var(--dur-corta) ease, border-color var(--dur-corta) ease;
}
.muelle__boton:focus-visible { outline: var(--hilo-trama) solid var(--oro); outline-offset: 3px; }

/* ---- WhatsApp y el Oso Andino (2026-09-11) --------------------------------
   El enlace es la caja del disco verde; el oso va detrás, colgado de él y
   saliéndose por arriba. Todo lo que se pulsa dentro —disco u oso— es el
   enlace. Las medidas salen del montaje de Andrés: el oso mide 1,7 veces el
   disco, está centrado sobre él y tiene los pies casi a ras de su borde.

   Los TRES MOVIMIENTOS van en dos piezas distintas porque dos animaciones sobre
   la misma propiedad no se suman —gana la última—:
     · `.muelle__oso` (la caja)  ASOMA una vez al cargar: sube desde detrás del
                                 disco. Anima `translate` y `opacity`.
     · la imagen de dentro       SALUDA cada 7 s —un vaivén de dos grados desde
                                 los pies— y se ESTIRA al pasar el ratón. Anima
                                 `rotate` y, en el hover, `translate`.        */
.muelle__whatsapp {
  position: relative;
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  pointer-events: auto;
  text-decoration: none;
}
.muelle__whatsapp:focus-visible { outline: var(--hilo-trama) solid var(--oro); outline-offset: 3px; }
.muelle__disco {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #25D366;
  color: #FFF;
  box-shadow: 0 10px 26px rgba(8, 10, 26, 0.32), 0 0 0 3px rgba(255, 255, 255, 0.9);
}
.muelle__disco svg { width: 1.75rem; height: 1.75rem; }
.muelle__whatsapp:hover .muelle__disco,
.muelle__whatsapp:focus-visible .muelle__disco { transform: scale(1.06); box-shadow: 0 16px 34px rgba(8, 10, 26, 0.38), 0 0 0 3px #FFF; }

.muelle__oso {
  position: absolute;
  z-index: 0;
  /* CENTRADO SIN `translate`, que queda libre para la animación. La caja es el
     doble de ancha que el disco —de -50 % a -50 %— y centra al oso con flex.
     Se probó antes `left/right: 0` con márgenes automáticos y NO sirve aquí: el
     enlace es `display: grid`, y en una rejilla el hijo absoluto se alinea con
     `justify-self`, no con los márgenes. El oso salía pegado a la izquierda del
     disco y cortado por el borde de la ventana.
     La caja mide dos discos de alto porque el dibujo deja aire arriba y abajo
     dentro de su lienzo de 347 × 442. */
  left: -50%; right: -50%;
  bottom: -6%;
  height: 201%;
  display: flex;
  justify-content: center;
  pointer-events: none;           /* el gesto lo recibe el enlace, no la imagen */
}
.muelle__oso img {
  display: block;
  height: 100%;
  width: auto;
  transform-origin: 50% 88%;      /* los pies: el saludo se balancea desde ahí */
  /* EL HALO CLARO. El pelaje del oso es casi el marino del sitio y sobre el
     cabezote se perdía la silueta. Un halo blanco muy suave la despega del
     fondo oscuro sin parecer un recorte, y la sombra de debajo la asienta en
     los fondos claros. */
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.85)) drop-shadow(0 8px 12px rgba(8, 10, 26, 0.35));
  transition: translate var(--dur-media) var(--sale);
}
.muelle__whatsapp:hover .muelle__oso img,
.muelle__whatsapp:focus-visible .muelle__oso img { translate: 0 -7%; }

@media (prefers-reduced-motion: no-preference) {
  .muelle__oso { animation: oso-asoma 820ms cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both; }
  .muelle__oso img { animation: oso-saluda 7s ease-in-out 3s infinite; }
}
@keyframes oso-asoma {
  from { translate: 0 38%; opacity: 0; }
  30%  { opacity: 1; }
  to   { translate: 0 0; opacity: 1; }
}
/* El saludo ocupa el primer 16 % del ciclo —poco más de un segundo— y el resto
   el oso se queda quieto: si se moviera todo el rato, dejaría de ser un saludo
   y pasaría a ser un tic en la esquina de la pantalla. */
@keyframes oso-saluda {
  0%, 16%, 100% { rotate: 0deg; }
  4%  { rotate: -5deg; }
  8%  { rotate: 4deg; }
  12% { rotate: -2.5deg; }
}

/* La música: el mismo trato que el control del video —vidrio marino, borde
   fino— porque es el mismo tipo de mando: uno que gobierna algo que se mueve
   solo. Apagada enseña la nota; sonando, tres barras que laten. */
.muelle__musica {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: rgba(20, 23, 58, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: var(--hilo-fino) solid rgba(255, 255, 255, 0.4);
  color: #FFF;
  box-shadow: 0 8px 20px rgba(8, 10, 26, 0.28);
}
.muelle__musica:hover { border-color: #FFF; background: rgba(20, 23, 58, 0.9); }
.muelle__nota { width: 1.1rem; height: 1.1rem; }
.muelle__barras { display: none; align-items: flex-end; gap: 2px; height: 0.95rem; }
.muelle__barras i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 1px;
  background: var(--oro);
  transform-origin: bottom;
  animation: latir-barra 900ms ease-in-out infinite alternate;
}
.muelle__barras i:nth-child(2) { animation-delay: -300ms; animation-duration: 700ms; }
.muelle__barras i:nth-child(3) { animation-delay: -600ms; animation-duration: 1100ms; }
.muelle__musica.sonando .muelle__nota { display: none; }
.muelle__musica.sonando .muelle__barras { display: flex; }
@keyframes latir-barra {
  from { transform: scaleY(0.3); }
  to   { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .muelle__barras i { animation: none; transform: scaleY(0.7); }
  .muelle__boton { transition: none; }
}

@media (max-width: 48rem) {
  .muelle { bottom: max(var(--e-4), env(safe-area-inset-bottom)); }
  .muelle--izquierda { left:  max(var(--e-4), env(safe-area-inset-left)); }
  .muelle--derecha   { right: max(var(--e-4), env(safe-area-inset-right)); }
  .muelle__whatsapp { width: 3.25rem; height: 3.25rem; }
  /* En el teléfono el oso se queda un punto más bajo: con 1,7 discos tapaba
     demasiada pantalla a la derecha del texto. */
  .muelle__oso { height: 185%; }
}

/* EL PIE DEJA SITIO AL MUELLE. Un botón que flota tapa lo que pasa por debajo
   —eso es lo que hace un botón que flota— pero al final de la página no hay más
   scroll con el que apartarlo, y lo que queda debajo es el pie: el logotipo, la
   dirección y la firma, todos alineados a la izquierda. Medido a 390 px, el de
   WhatsApp caía encima de la firma. Por debajo de 88rem —donde el contenido
   del pie llega hasta los botones— el pie gana por abajo la altura del muelle.
   Por encima, el contenido ya queda lejos de las esquinas y ese hueco sólo
   sería marino vacío. */
@media (max-width: 88rem) {
  /* 88rem Y NO 85: el oso es más ancho que el botón que había, y su borde
     izquierdo cae a unos 96 px del borde de la ventana. El contenido del pie
     termina en `(ancho + 1280) / 2 − canal`; las dos cosas se cruzan por debajo
     de ~1376 px, y con la barra de desplazamiento, un poco más.
     8rem: lo más alto de las dos esquinas es ahora el OSO de WhatsApp
     (2026-09-11), que asoma hasta unos 8,3rem sobre el borde —1,5 de margen y
     casi dos discos de 3,5—. Con los 4,5rem de antes tapaba la firma «Hecho con
     ♥ en Colombia» a 390, 1024, 1280 y 1366 px; medido de nuevo, con 8rem no
     la toca en ninguno de siete tamaños. */
  .pie__legal { padding-bottom: calc(var(--e-5) + 8rem); }
}