/* Instituto Roberto Arlt — hoja de estilo del sitio
   Dirección visual "Cercana", elegida el 23/09/2026.

   El sistema anterior derivaba del brochure institucional y traía sus reglas como
   intocables: navy de fondo, planos de color, sin redondeos ni sombras. Eso es
   lenguaje de folleto impreso, que presenta la institución a un adulto y se lee de
   una vez. Un sitio compite con otros colegios y tiene que dar ganas de consultar,
   y acá la familia elige por cercanía.

   Lo que manda ahora:
     · La foto es la protagonista, en formas suaves.
     · Cada nivel tiene su color, para que se elija de un vistazo.
     · Fondo claro y cálido; el bordó del colegio queda para el escudo y detalles.
     · Tipografía amable, sin llegar a infantil: el sitio también habla de secundaria.
   ------------------------------------------------------------------------- */

/* --- Tipografía ---
 * Cardo para los títulos y Montserrat para todo lo demás. Sale del brochure que
 * armó el colegio, que usa esas dos, y del Canva que mandaron como referencia.
 *
 * POR QUÉ CARDO NO VA EN EL CUERPO: es una serif pensada para textos
 * académicos impresos. En un título grande se ve institucional, que es
 * justamente lo que pidieron; en un formulario, en un botón o en una etiqueta
 * de 13 px sobre una pantalla de celular se lee bastante peor que una sans. El
 * propio brochure usa Montserrat para el texto chico por el mismo motivo.
 *
 * Los archivos se sirven desde este mismo sitio y no desde Google: el sitio no
 * pide nada a terceros, ni siquiera una letra.
 */
@font-face {
  font-family: 'Cardo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../tipografia/cardo-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cardo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../tipografia/cardo-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cardo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../tipografia/cardo-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cardo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../tipografia/cardo-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cardo';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../tipografia/cardo-400-italica-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cardo';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../tipografia/cardo-400-italica-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../tipografia/montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../tipografia/montserrat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../tipografia/montserrat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../tipografia/montserrat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Paleta del brochure institucional. Los valores salen de su content stream,
     no muestreados de una captura: ver brand/README.md.

     Por qué se cambió la paleta cálida anterior: el uniforme del colegio es navy
     y bordó, y eso domina todas las fotos. Midiendo los colores de las fotos del
     sitio, los tonos que más pesan son bordós profundos (#44192E, #701C26,
     #4C1B28) y azules (#131932, #283450). La terracota y el crema anteriores son
     naranjas cálidos y peleaban con cada foto. */
  --arlt-tinta: #15202E;
  --arlt-gris: #59637A;
  --arlt-papel: #FFFFFF;
  --arlt-crema: #F1F4F8;
  --arlt-blanco: #FFFFFF;
  --arlt-linea: #D9E0E9;

  /* Primarios del brochure */
  --arlt-navy: #001D3B;
  --arlt-bordo: #850000;
  --arlt-azul: #003367;

  /* Un color por nivel, los cuatro dentro de la familia de la marca, ordenados
     de cálido a frío según avanza la etapa. Todos con blanco encima muy por
     encima del mínimo de 4.5:1, que es lo que la paleta anterior rozaba justo. */
  /* EL ORDEN LO DA EL CANVA DEL COLEGIO, no un criterio nuestro. Hasta el
     06/10 era «de cálido a frío según avanza la etapa» (SOL-701), y Maternal y
     Primario estaban cruzados respecto de la imagen que mandó Zoe. Manda el
     colegio: M azul, I bordó, P rojo, S navy. SOL-826. */
  --arlt-maternal: #003367;      /* blanco encima: 12.58:1 */
  --arlt-inicial: #850000;       /* blanco encima: 10.51:1 */
  --arlt-primario: #B10303;      /* blanco encima:  7.28:1 */
  --arlt-medio: #001D3B;         /* blanco encima: 16.95:1 */
  --arlt-accion: #B10303;        /* el botón de avance del brochure: 7.28:1 */
  --arlt-accion-osc: #8A0202;    /* hover y color de enlace */
  --arlt-naranja-claro: #B10303; /* decorativo: puntos y fondos */

  --arlt-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --arlt-font-titulo: 'Cardo', Georgia, 'Times New Roman', serif;

  --arlt-size-hero: clamp(2.375rem, 1.5rem + 3.6vw, 3.75rem);
  --arlt-size-h1: clamp(2.125rem, 1.5rem + 2.4vw, 3rem);
  --arlt-size-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);
  --arlt-size-h3: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  --arlt-size-lead: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem);
  --arlt-size-body: 1.09375rem;
  --arlt-size-small: .9375rem;

  --arlt-r: 20px;
  --arlt-r-chico: 12px;
  --arlt-sombra: 0 2px 6px -3px rgba(0,29,59,.16), 0 18px 34px -26px rgba(0,29,59,.42);
  --arlt-sombra-alta: 0 20px 44px -24px rgba(0,29,59,.5);

  /* El margen lateral crece con la pantalla: en un monitor ancho un canal fijo
     y angosto deja el contenido flotando en el medio. */
  --arlt-gutter: clamp(1.375rem, .5rem + 2.5vw, 5rem);
  --arlt-max: 1920px;
}

*, *::before, *::after { box-sizing: border-box; }
/* La cabecera es pegajosa y mide ~145px. Sin esto, un enlace interno —#consulta,
   #preinscripcion, #niveles— deja el destino debajo de la cabecera: se llegaba al
   formulario con el título tapado. */
/*
 * `scrollbar-gutter: stable` reserva SIEMPRE el lugar de la barra de
 * desplazamiento. Sin esto, cada vez que se traba el desplazamiento —la pantalla
 * de bienvenida, el menú abierto— la barra desaparece, la página se ensancha unos
 * 15 px y el texto se reacomoda: al terminar la animación de entrada, una palabra
 * del titular se caía al renglón de abajo, a la vista.
 */
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem;
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Sin esto, una animación infinita (el aviso desplazable) no se detiene: se
     repite cada 0,01 ms, que es justo lo contrario de lo que se pidió. */
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0; background: var(--arlt-papel); color: var(--arlt-tinta);
  font-family: var(--arlt-font); font-size: var(--arlt-size-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--arlt-accion-osc); overflow-wrap: anywhere; }  /* 6.26:1 sobre el fondo claro */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--arlt-accion); outline-offset: 2px; border-radius: 4px;
}

.arlt-salto-contenido {
  position: absolute; left: -9999px; background: var(--arlt-tinta); color: var(--arlt-blanco);
  padding: .75rem 1.25rem; z-index: 100; border-radius: 0 0 var(--arlt-r-chico) 0;
}
.arlt-salto-contenido:focus { left: 0; top: 0; }

.arlt-caja { width: 100%; max-width: var(--arlt-max); margin-inline: auto; padding-inline: var(--arlt-gutter); }

/* --- Tipografía ----------------------------------------------------------- */
/* Cardo es serif: el interletrado negativo que le venía bien a Nunito acá
   aprieta los remates y ensucia el título. Va en cero. */
h1, h2, h3, h4 { font-family: var(--arlt-font-titulo); line-height: 1.16; letter-spacing: 0; font-weight: 700; }
/* Nada de palabras sueltas al final de un bloque. El navegador reparte las últimas
   líneas para que no quede una palabra corta sola; donde no está soportado, los
     del HTML ya atan cada número a su unidad («16:30 h» nunca se parte). */
h2, h3, h4 { text-wrap: balance; }
p, li, dd, dt, figcaption, .arlt-datos span, .arlt-lead { text-wrap: pretty; }
h1 { font-size: var(--arlt-size-h1); }
h2 { font-size: var(--arlt-size-h2); }
h3 { font-size: var(--arlt-size-h3); }
.arlt-kicker { font-size: var(--arlt-size-small); font-weight: 700; color: var(--arlt-color-pag, var(--arlt-accion)); margin: 0 0 .25rem; }
.arlt-title { font-size: var(--arlt-size-h2); margin: 0; }
.arlt-lead { font-size: var(--arlt-size-lead); color: var(--arlt-gris); }
.arlt-cita { font-size: var(--arlt-size-lead); font-style: italic; max-width: 46ch; }
.arlt-subtitulo {
  font-weight: 800; font-size: .8125rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--arlt-gris); margin: 1.75rem 0 .375rem;
}
/* La barra de acento del sistema anterior ya no se usa: la jerarquía la dan el
   tamaño y el color. Queda oculta para no tocar el marcado de las once páginas. */
.arlt-acento { display: none; }

.arlt-pildora {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #F6EAEA; color: var(--arlt-bordo); font-weight: 700; font-size: .875rem;  /* 9.5:1 sobre su fondo */
  padding: .5rem 1rem; border-radius: 999px; margin-bottom: 1.125rem;
}
.arlt-pildora::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--arlt-naranja-claro); }

/* --- Botones -------------------------------------------------------------- */
.arlt-boton {
  display: inline-block; font-weight: 700; font-size: .9375rem;
  padding: .875rem 1.625rem; border: 0; cursor: pointer; text-decoration: none;
  background: var(--arlt-accion); color: var(--arlt-blanco); border-radius: 999px;
  box-shadow: 0 8px 20px -10px rgba(192,78,38,.85);
  transition: transform .16s ease, background .16s ease;
}
.arlt-boton:hover { background: var(--arlt-accion-osc); transform: translateY(-2px); }
.arlt-boton--claro { background: var(--arlt-blanco); color: var(--arlt-tinta); box-shadow: var(--arlt-sombra); }
.arlt-boton--claro:hover { background: var(--arlt-crema); }
.arlt-boton--borde { background: transparent; color: var(--arlt-tinta); box-shadow: inset 0 0 0 2px var(--arlt-linea); }
.arlt-boton--borde:hover { background: var(--arlt-crema); }
/* Quedaba en bordó, heredado del sistema anterior: en este el color de acción es el
   naranja, así que ese rojo no pertenecía a nada. Los tres botones que la usan
   —"Ver en el mapa", "Volver al inicio"— son acciones secundarias, así que toman el
   estilo neutro. Se resuelve acá y no hay que tocar el marcado de las páginas. */
.arlt-boton--navy { background: transparent; color: var(--arlt-tinta); box-shadow: inset 0 0 0 2px var(--arlt-linea); }
.arlt-boton--navy:hover { background: var(--arlt-crema); transform: none; }

/* --- Aviso desplazable ----------------------------------------------------- */
/* Reemplaza al botón de preinscripción que estaba en la barra: dice lo mismo, no
   ocupa lugar en la cabecera y se ve desde cualquier página. La pista lleva el
   texto DOS veces y se desplaza media pista: al terminar, la segunda copia está
   exactamente donde arrancó la primera y el ciclo no tiene costura. */
/* El selector de idioma estuvo acá adentro hasta el 05/10 y no funcionaba: la
   marquesina es `overflow: hidden` y el texto quedaba guillotinado a mitad de
   palabra justo contra los botones —«Inscripción abie│ES EN 中文»—, que se lee
   como algo roto y no como una separación. En el celular además se comía un
   tercio de la franja. Se fue a la cabecera, que es donde se lo busca. */
.arlt-ticker {
  display: block; overflow: hidden; text-decoration: none;
  background: var(--arlt-bordo); color: var(--arlt-blanco);
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  padding-block: .5rem;
}

/* --- Selector de idioma ---------------------------------------------------- */
/* UN SOLO BOTÓN, porque la fila de la cabecera no tiene lugar: medido, entre el
   logo y el primer enlace quedaba **1 px** a 1340 px y 13 px a 1366. Los tres
   idiomas desplegados ocupaban 114 px y no entraban de ninguna manera; el botón
   solo ocupa poco más que un ícono de red social y se pone al lado de ellos.

   ES UN `<details>`, no un widget de JavaScript: abre, cierra y se maneja con el
   teclado sin una línea de script.

   EL GLOBO ES LO IMPORTANTE. Es lo que busca alguien que no puede leer ni una
   palabra de la página, que es exactamente a quien está dirigido esto. La sigla
   al lado dice en cuál está parado.

   CADA IDIOMA SE NOMBRA EN SU IDIOMA —«中文», no «Chino»—: así se reconoce el
   propio sin entender el de la página. */
.arlt-idiomas { position: relative; flex: 0 0 auto; }
.arlt-idiomas__boton {
  display: inline-flex; align-items: center; gap: .25rem;
  height: 2.25rem; padding-inline: .5rem; border-radius: 999px;
  color: var(--arlt-tinta); cursor: pointer; list-style: none;
  transition: background .2s ease;
}
/* El triangulito que Safari y Firefox le ponen solo a un <summary>. */
.arlt-idiomas__boton::-webkit-details-marker { display: none; }
.arlt-idiomas__boton::marker { content: ""; }
.arlt-idiomas__boton:hover, .arlt-idiomas[open] .arlt-idiomas__boton { background: var(--arlt-crema); }
.arlt-idiomas__globo { width: 1.1875rem; height: 1.1875rem; flex: 0 0 auto; }
.arlt-idiomas__sigla { font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
/* Escondido para el ojo, NO para el lector de pantalla: `display: none` y
   `visibility: hidden` lo sacan del árbol de accesibilidad y entonces el botón
   se anuncia sólo como «ES», que no dice qué hace. Mismo recorte a un píxel que
   usa el rótulo del botón de menú. */
.arlt-idiomas__rotulo {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.arlt-idiomas__lista {
  position: absolute; top: calc(100% + .375rem); right: 0; z-index: 30;
  display: grid; min-width: 9.5rem; padding: .3125rem;
  background: var(--arlt-papel); border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 29, 59, .08), 0 12px 28px rgba(0, 29, 59, .16);
}
.arlt-idiomas__lista a {
  padding: .5rem .625rem; border-radius: 8px;
  color: var(--arlt-tinta); text-decoration: none;
  font-size: .875rem; font-weight: 600; white-space: nowrap;
}
.arlt-idiomas__lista a:hover, .arlt-idiomas__lista a:focus-visible { background: var(--arlt-crema); }
/* El que ya está elegido se marca con el bordó de la marca y su tilde, no sólo
   con un fondo: a un fondo suave no se le ve el estado de un vistazo. */
.arlt-idiomas__lista a[aria-current] { color: var(--arlt-bordo); font-weight: 800; }
.arlt-idiomas__lista a[aria-current]::after { content: " ✓"; }

/* En el celular queda SÓLO EL GLOBO. Medido a 360 y 390 px: con la sigla al lado,
   el botón mide 56 px y se monta sobre «ROBERTO ARLT» —el hueco daba −19 px a 360
   y −4 a 390—. Sin ella son 34 px y sobra. No se pierde nada: el globo es lo que
   se busca, y en qué idioma está parado lo dice la página entera. Quien usa
   lector de pantalla lo sigue escuchando, que para eso el rótulo está escondido
   con recorte y no con `display: none`. */
@media (max-width: 620px) {
  .arlt-idiomas__sigla { display: none; }
  .arlt-idiomas__boton { padding-inline: .4375rem; }
}
.arlt-ticker__pista { display: flex; width: max-content; animation: arlt-desplazar 60s linear infinite; }
.arlt-ticker__tramo { display: flex; flex: 0 0 auto; }
.arlt-ticker__frase { flex: 0 0 auto; padding-inline: 1.75rem; white-space: nowrap; }
.arlt-ticker__frase b { font-weight: 800; }
.arlt-ticker:hover .arlt-ticker__pista, .arlt-ticker:focus-visible .arlt-ticker__pista { animation-play-state: paused; }
@keyframes arlt-desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Cabecera ------------------------------------------------------------- */
/* Antes eran dos franjas —logo + redes + botón arriba, ocho enlaces abajo— y se
   comían la primera pantalla. Ahora es UNA sola fila con el nombre y los enlaces
   al lado. Debajo de 1080 px los enlaces no entran en una fila sin apretarse, así
   que ahí pasan a un panel a pantalla completa detrás del botón de menú.
   El aviso desplazable va adentro de la cabecera para que los dos queden fijos
   juntos al desplazar la página. */
.arlt-cabecera {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.93); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--arlt-linea);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/*
 * SIN DESENFOQUE EN PANTALLAS TÁCTILES. `backdrop-filter` obliga al navegador a
 * volver a desenfocar la franja en CADA cuadro, y acá adentro hay además una
 * animación que no para nunca (el aviso de inscripción), así que ese trabajo no
 * se interrumpe ni cuando la página está quieta. En una computadora no se nota;
 * en un teléfono de gama media alcanza para que el desplazamiento se sienta
 * trabado y para que la batería lo pague.
 *
 * La barra ya era blanca al 93%: dejarla opaca no cambia nada a la vista.
 */
@media (hover: none), (max-width: 900px) {
  .arlt-cabecera { background: var(--arlt-blanco); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Al despegarse del tope, la cabecera levanta una sombra: marca que la página se
   movió por debajo. La clase la pone el JavaScript. */
.arlt-cabecera--flotante { box-shadow: 0 10px 30px -22px rgba(0,29,59,.55); }
.arlt-cabecera__fila {
  position: relative; z-index: 40; display: flex; align-items: center;
  gap: clamp(1rem, .25rem + 2vw, 2.5rem); justify-content: space-between; padding-block: .5625rem;
}
/* El botón de inscripción no entra en el celular: ahí la barra queda con el
   nombre, el idioma, las redes y el botón de menú, y la inscripción está a un
   toque de distancia adentro del panel.
   DESDE 1024 px SÍ SE MUESTRA, aunque los enlaces estén en el botón de menú.
   Antes aparecía sólo con la barra completa, y al subir el corte (hoy 1480) por el
   botón de idioma los portátiles de 1366 px se quedaban sin él: el único llamado
   a la acción de la cabecera desaparecía en uno de los anchos más comunes.
   Medido: a 1024 px sobran 343 px entre el nombre y los controles. */
.arlt-cabecera__cta { display: none; }
@media (min-width: 1024px) {
  .arlt-cabecera__cta { display: inline-flex; font-size: .875rem; padding: .625rem 1.125rem; }
}
.arlt-logo { display: flex; align-items: center; gap: .6875rem; text-decoration: none; color: var(--arlt-tinta); min-width: 0; }
.arlt-logo img { width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; transition: transform .35s cubic-bezier(.22,.7,.3,1); }
.arlt-logo:hover img { transform: rotate(-4deg) scale(1.06); }
/* Con los enlaces en la misma fila el nombre se quedaba sin lugar y se partía
   en dos renglones justo arriba del corte de 1080 px. */
/* El patrón de titular del brochure, que es el ejemplo que dio el colegio:
   "Instituto" en Cardo regular itálica, más chico, sobre "ROBERTO ARLT" en
   Cardo negrita y mayúsculas. Las dos líneas juntas ocupan lo mismo que la
   línea única anterior, así que la cabecera no cambia de alto. */
.arlt-logo__nombre { display: grid; line-height: 1; font-family: var(--arlt-font-titulo); white-space: nowrap; }
/* En `em`, no en `rem`: el `font-size` que el bloque de 620 px le pone al
   nombre tiene que llegar a estas dos líneas. Con `rem` no llegaba —`rem`
   mira la raíz, no al padre— y el lockup seguía midiendo lo mismo en el
   celular, que es justo donde no sobra lugar. */
.arlt-logo__nombre i { font-style: italic; font-weight: 400; font-size: .8125em; letter-spacing: .01em; opacity: .85; }
.arlt-logo__nombre b { font-weight: 700; font-size: 1.0625em; letter-spacing: .06em; text-transform: uppercase; }

.arlt-menu-boton {
  display: inline-flex; align-items: center; gap: .625rem; flex: 0 0 auto;
  background: var(--arlt-crema); color: var(--arlt-tinta); border: 0;
  font-family: inherit; font-size: .875rem; font-weight: 700; border-radius: 999px;
  padding: .5625rem .875rem .5625rem 1.125rem; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.arlt-menu-boton:hover { background: var(--arlt-linea); }
.arlt-menu-boton__icono { position: relative; width: 18px; height: 12px; flex: 0 0 auto; }
.arlt-menu-boton__icono i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .28s ease, opacity .18s ease;
}
.arlt-menu-boton__icono i:nth-child(1) { top: 0; }
.arlt-menu-boton__icono i:nth-child(2) { top: 5px; }
.arlt-menu-boton__icono i:nth-child(3) { top: 10px; }
.arlt-menu-boton[aria-expanded="true"] .arlt-menu-boton__icono i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.arlt-menu-boton[aria-expanded="true"] .arlt-menu-boton__icono i:nth-child(2) { opacity: 0; }
.arlt-menu-boton[aria-expanded="true"] .arlt-menu-boton__icono i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- Navegación en pantalla grande ---------------------------------------- */
/* 1480. MEDIDO el 09/10: con los ocho enlaces, el logo, el botón de idioma, los
   dos íconos de redes y el botón de inscripción, la barra completa NECESITA
   1460 px. Acá van 20 de margen.
   HISTORIA, porque es el mismo error CINCO veces: arrancó en 1280 y necesitaba
   1296; se subió a 1300 y necesitaba 1304; se subió a 1320 y necesitaba 1328; se
   subió a 1420 y necesitaba 1460. Las cuatro veces se puso el corte EN EL NÚMERO
   MEDIDO o a doce de distancia, y el cambio siguiente lo volvió a romper — la
   tercera, cuando el colegio decidió el 01/10 que «Nivel Medio» pasa a «Nivel
   Secundario», cinco letras más; la cuarta, el botón de idioma del 05/10.
   LA QUINTA ESTUVO PUBLICADA Y ROTA. Entre el 05/10 y el 09/10 el sitio se
   pisaba el logo con «Inicio» en TODO ancho de 1420 a 1459 —1440 incluido, que
   es el portátil más común— porque el corte se fijó con la medición vieja y
   nadie volvió a correr `cabecera-sin-pisarse.html` después de agregar el
   botón de idioma. Lo encontró ese barrido, no el ojo.
   EL PRECIO ACEPTADO: de 1420 a 1479 los ocho enlaces pasan al botón de menú.
   Son los portátiles de 1440. El menú del botón está completo y el botón de
   inscripción sigue en la barra desde 1024, así que no se pierde nada; se pierde
   el gusto de ver la fila entera. Si alguna vez hay que recuperarla, la palanca
   es sacar «Nivel» de los tres enlaces («Inicial», «Primario», «Secundario»):
   son ~100 px y lo decide el colegio, no esta hoja.
   Y OJO CON CÓMO SE MIDE: la `ul` del menú puede entrar holgada y sus enlaces
   desbordarla igual, porque van centrados y se salen por los dos lados. Medir el
   hueco entre el logo y la `ul` da «entra» mientras «Inicio» ya está encima del
   logo. Hay que comparar las cajas de los ENLACES, que es lo que hace
   `cabecera-sin-pisarse.html`. Si se toca un rótulo: correr ese barrido y
   actualizar el número de acá arriba. */
@media (min-width: 1480px) {
  .arlt-menu-boton { display: none; }
  /* EN LA BARRA ANCHA NO SE TOCA NADA. Los niveles se partieron en dos líneas
     para el panel (SOL-827); acá los dos `span` vuelven a ser una sola línea y
     el menú dice exactamente lo que decía: «Nivel Inicial», «Nivel Primario»,
     «Nivel Secundario»… y «Maternal» a secas, que es como estaba.
     No es un detalle: el «Nivel » de Maternal suma unos 45 px a una fila que ya
     necesita 1460 de 1480. Con él, el corte tendría que subir a ~1525 y hasta
     los portátiles de 1512 perderían el menú. */
  .arlt-nav__rotulo, .arlt-nav__nombre { display: inline; font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
  .arlt-nav__nivel--maternal .arlt-nav__rotulo { display: none; }
  /* Y EN INGLÉS Y CHINO EL RÓTULO NO SE COMPONE CON EL NOMBRE. En castellano los
     dos `span` juntos dicen «Nivel Inicial», que es lo que el menú decía siempre;
     en inglés daban «Level Early Years» y en chino «学段 幼儿园», que no es como
     se nombra ese nivel en ninguno de los dos. En la barra ancha de esos dos
     idiomas va sólo el nombre —«Early Years», «幼儿园»—, que además es más corto
     que lo que había. En el panel, donde el rótulo va en su propia línea, los
     tres idiomas siguen igual. */
  :lang(en) .arlt-nav__rotulo, :lang(zh) .arlt-nav__rotulo { display: none; }

  /* --- «Quiénes somos» y lo que cuelga de ella ---------------------------- */
  /* AGRUPADAS PORQUE LA BARRA NO TIENE LUGAR, no por gusto: medido el 06/10, la
     fila necesita 1460 px de los 1480 del corte, y cada entrada suelta son unos
     130 px. Con «Nuestro equipo» y «Nuestra historia» sueltas el corte tendría
     que subir a ~1680 y casi ningún escritorio vería los enlaces.
     SIN JAVASCRIPT: abre al pasar el mouse y al entrar con el teclado
     (`:focus-within`), así que se puede llegar tabulando. */
  .arlt-nav__sub { position: relative; }
  .arlt-nav__sub > a::after {
    content: ""; display: inline-block; vertical-align: middle;
    width: .3125rem; height: .3125rem; margin-left: .375rem; margin-top: -.1875rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); opacity: .6;
  }
  .arlt-nav__sublista {
    /* EL TEXTO DE LAS OPCIONES CAE EN LA MISMA COLUMNA QUE EL DEL ENLACE. Lo que
       tiene que alinear es el texto, no la caja: el panel es más ancho que la
       palabra y tiene su propio relleno, así que alinear los bordes deja las
       letras corridas, y centrarlo las corre para el otro lado.

       La cuenta, toda en variables para que siga valiendo si cambia un relleno:
       `left` se mide desde el borde interno del <li>, que ya viene desplazado por
       la sangría del separador de grupo; de ahí hay que descontar el relleno del
       panel y el de la opción, que es lo que separa su borde de su texto.
       Medido el 07/10 a 1440: enlace y opciones arrancan los dos en 910. */
    --arlt-sub-relleno: .3125rem;   /* el del panel */
    --arlt-sub-opcion: .625rem;     /* el de cada opción */
    position: absolute; top: calc(100% + .5rem); transform: none;
    left: calc(var(--arlt-nav-sangria, 0px) - var(--arlt-sub-relleno) - var(--arlt-sub-opcion));
    z-index: 30; min-width: 11rem; padding: var(--arlt-sub-relleno); margin: 0; list-style: none;
    display: grid; opacity: 0; visibility: hidden;
    background: var(--arlt-papel); border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 29, 59, .08), 0 12px 28px rgba(0, 29, 59, .16);
    transition: opacity .15s ease;
  }
  /* El hueco entre el enlace y el panel haría que el desplegable se cerrara al
     cruzarlo con el mouse: este puente invisible lo tapa. */
  .arlt-nav__sublista::before { content: ""; position: absolute; left: 0; right: 0; top: -.625rem; height: .625rem; }
  .arlt-nav__sub:hover .arlt-nav__sublista,
  .arlt-nav__sub:focus-within .arlt-nav__sublista { opacity: 1; visibility: visible; }
  .arlt-nav__sublista a {
    padding: .5rem var(--arlt-sub-opcion); border-radius: 8px; white-space: nowrap;
    font-size: .9375rem; font-weight: 600; color: var(--arlt-tinta);
  }
  .arlt-nav__sublista a:hover, .arlt-nav__sublista a:focus-visible { background: var(--arlt-crema); }
  /* Tres columnas en vez de tres cajas en fila: con flex, los enlaces quedarían
     centrados en el espacio SOBRANTE, que no es el centro de la página salvo que
     el logo y el botón midan igual. Con `1fr auto 1fr` el medio es el medio. */
  /* `1fr auto 1fr` repartía las sobras en partes iguales y el logo desbordaba
     su columna: medido, el logo ocupa 208 px en una columna de 180 y se comía
     el primer enlace del menú. Con `auto` el logo y el botón toman lo que
     necesitan y el menú se queda con el resto, centrado adentro. Así no puede
     superponerse a ningún ancho. */
  .arlt-cabecera__fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1rem, .25rem + 1.5vw, 2.5rem); }
  .arlt-logo { justify-self: start; }
  .arlt-cabecera__fin { justify-self: end; }
  .arlt-cabecera__cta { display: inline-flex; font-size: .875rem; padding: .625rem 1.125rem; }
  .arlt-nav { min-width: 0; }
  .arlt-nav > .arlt-caja { padding: 0; max-width: none; }
  /* `> .arlt-caja > ul` y no `.arlt-nav ul`: así no alcanza a la sublista de
     «Quiénes somos». Escrito como descendiente le ganaba en especificidad
     —0,1,1 contra 0,1,0— y el desplegable salía EN FILA, con el flex de la
     barra, en vez de uno abajo del otro. */
  .arlt-nav > .arlt-caja > ul {
    display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
    list-style: none; margin: 0; padding: 0; gap: clamp(.75rem, .1rem + .75vw, 1.375rem);
  }
  .arlt-nav a {
    position: relative; display: block; white-space: nowrap;
    font-size: clamp(.875rem, .55rem + .25vw, .9375rem); font-weight: 600; color: var(--arlt-gris);
    text-decoration: none; padding-block: .375rem;
    transition: color .2s ease;
  }
  .arlt-nav a:hover { color: var(--arlt-tinta); }
  /* El subrayado crece desde la izquierda en vez de aparecer de golpe. */
  .arlt-nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    background: var(--arlt-color-pag, var(--arlt-accion));
    transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.22,.7,.3,1);
  }
  .arlt-nav a:hover::after, .arlt-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .arlt-nav a[aria-current="page"] { color: var(--arlt-tinta); font-weight: 800; }
  /* Tres grupos: el inicio, los niveles con inglés, y lo institucional. */
  /* La sangría va en una variable porque el desplegable la necesita para
     centrarse sobre el TEXTO y no sobre el separador. */
  .arlt-nav .arlt-nav__grupo {
    --arlt-nav-sangria: clamp(.75rem, .1rem + .75vw, 1.375rem);
    border-left: 1px solid var(--arlt-linea); padding-left: var(--arlt-nav-sangria);
  }
  /* `.arlt-nav a` (0-1-1) le gana a `.arlt-nav__cta` (0-1-0): sin nombrar el
     contenedor, el botón se seguía viendo y se estiraba de lado a lado. */
  .arlt-nav .arlt-nav__cta { display: none; }
}

/* --- Navegación en pantalla chica: panel a pantalla completa --------------- */
@media (max-width: 1479px) {
  .arlt-nav {
    position: fixed; inset: 0; z-index: -1;
    background: var(--arlt-navy); color: var(--arlt-blanco);
    display: grid; align-content: center;
    padding-block: 5.5rem 4.5rem; overflow-y: auto;
    opacity: 0; visibility: hidden;
  }
  .arlt-cabecera[data-abierto="true"] .arlt-nav { opacity: 1; visibility: visible; z-index: 39; }
  .arlt-nav > .arlt-caja > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; }
  /* Centrado: el panel ocupa la pantalla entera y los enlaces apoyados contra el
     borde izquierdo dejaban todo el peso de un lado. */
  .arlt-nav > .arlt-caja { text-align: center; }
  .arlt-nav a {
    display: block; text-decoration: none; color: rgba(255,255,255,.82);
    font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
    font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
    padding-block: .375rem; width: max-content; max-width: 100%; margin-inline: auto;
    transition: color .18s ease, transform .18s ease;
  }
  .arlt-nav a:hover { color: var(--arlt-blanco); transform: translateY(-2px); }
  .arlt-nav a[aria-current="page"] { color: var(--arlt-blanco); }
  .arlt-nav a[aria-current="page"]::after {
    content: ""; display: block; height: 3px; border-radius: 3px; margin-top: .25rem;
    background: var(--arlt-color-pag, var(--arlt-accion));
  }
  .arlt-nav .arlt-nav__grupo { margin-top: 1.125rem; padding-top: 1.125rem; border-top: 1px solid rgba(255,255,255,.16); }
  /* En el panel no hay desplegable: hay lugar de sobra y esconder una entrada
     detrás de otra en una pantalla completa sería inventar un clic. Las de la
     sublista se ven sueltas, como las demás.
     `list-style` y los márgenes van acá y no se heredan de la lista de arriba:
     con `display: contents` la caja del <ul> desaparece pero sus <li> siguen
     siendo `list-item`, así que sin esto aparecen los puntitos. */
  .arlt-nav__sublista { display: contents; list-style: none; margin: 0; padding: 0; }

  /* --- Los niveles, con el formato del Canva (SOL-827) --------------------- */
  /* «Nivel» arriba en Cardo Regular y el nombre abajo en Cardo Bold mayúsculas,
     como el titular que mandó Zoe el 06/10. Es el mismo patrón de dos líneas que
     el sitio ya usa en los titulares (`arlt-kicker` sobre `arlt-title`), así que
     no entra nada nuevo: entra acá.
     EN BLANCO, no en el azul del Canva: el panel es navy. El formato es el del
     colegio; el color se adapta al fondo. */
  .arlt-nav__rotulo {
    display: block; font-family: var(--arlt-font-titulo);
    font-weight: 400; letter-spacing: 0; line-height: 1.1;
    font-size: clamp(.9375rem, .7rem + .7vw, 1.25rem);
    color: rgba(255, 255, 255, .62);
  }
  .arlt-nav__nombre {
    display: block; font-family: var(--arlt-font-titulo);
    font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
  }
  /* Dos líneas por nivel ocupan más alto que una: el panel se queda sin aire con
     el espacio de antes. Y el aire va ENTRE los pares, no adentro: con el mismo
     hueco en los dos lados, «Nivel» se leía pegado al nombre de arriba en vez de
     al suyo, y los cuatro niveles quedaban como ocho líneas sueltas. */
  .arlt-nav__nivel a { padding-block: 0; }
  .arlt-nav__nivel + .arlt-nav__nivel { margin-top: .875rem; }
  .arlt-nav__nivel + :not(.arlt-nav__nivel) { margin-top: 1.125rem; }

  /* UNA SOLA RAYA PARA EL GRUPO, no una por nivel. En el Canva la raya separa el
     titular de lo de arriba; acá cinco seguidas compiten entre sí y con el
     subrayado del enlace activo. Reemplaza al hilo que ya traía el grupo. */
  .arlt-nav .arlt-nav__nivel--maternal {
    position: relative; border-top: 0; margin-top: 1.5rem; padding-top: 1.75rem;
  }
  .arlt-nav .arlt-nav__nivel--maternal::before {
    content: ""; position: absolute; top: 1rem; left: 50%; transform: translateX(-50%);
    width: 3rem; height: 3px; border-radius: 3px; background: var(--arlt-blanco);
  }
  .arlt-nav__cta { margin-top: 2.25rem; justify-self: center; }

  /* Con el panel abierto la cabecera se apoya sobre el navy: pierde su fondo para
     no dibujar una franja clara encima, y el logo pasa a blanco. */
  .arlt-cabecera[data-abierto="true"] { background: transparent; border-bottom-color: transparent; backdrop-filter: none; box-shadow: none; }
  .arlt-cabecera[data-abierto="true"] .arlt-logo { color: var(--arlt-blanco); }
  /* EL ESCUDO BLANCO ES OTRO ARCHIVO, no un filtro. `invert(1)` cambiaba el
     negro por blanco pero NO toca el canal alfa, y el escudo es un dibujo de
     línea translúcido: sólo el 13 % del lienzo tiene tinta y esa tinta promedia
     88 de 255 de opacidad. Invertido quedaba blanco al 35 %, o sea un fantasma
     gris sobre el navy —medido: brillo medio 88 de 255—, que es lo que el
     colegio vio y pidió corregir (SOL-825).
     Con CSS no se puede subir el alfa: ningún filtro lo hace. `escudo-blanco.webp`
     es el mismo dibujo con un ajuste de niveles sobre el alfa —lo que estaba por
     debajo de 20 se va, lo que pasa 110 queda sólido—, así que conserva la forma
     y pierde el halo que lo desvaía. Medido ahora: 182 de 255. Pesa 3,6 KB. */
  .arlt-logo__escudo-blanco { display: none; }
  .arlt-cabecera[data-abierto="true"] .arlt-logo__escudo { display: none; }
  .arlt-cabecera[data-abierto="true"] .arlt-logo__escudo-blanco { display: block; }
  /* Las tres redes viven en la misma fila que el logo, así que sobre el panel
     navy pasan a blanco igual que él. No es por gusto: el azul de Facebook sobre
     el navy da 2,5:1 y no se distingue. Los colores de marca mandan en la barra
     normal, que es la que se ve el 99% del tiempo; el panel abierto es un estado
     de paso y ahí manda que se lean. Se pisa también el degradado de Instagram,
     que se aplica sobre el `path`. El botón de WhatsApp, que es flotante, se
     esconde entero con el menú abierto: está más abajo. */
  .arlt-cabecera[data-abierto="true"] .arlt-redes a { color: var(--arlt-blanco); }
  .arlt-cabecera[data-abierto="true"] .arlt-redes__ig svg path { fill: currentColor; }
  .arlt-cabecera[data-abierto="true"] .arlt-redes a:hover,
  .arlt-cabecera[data-abierto="true"] .arlt-redes a:focus-visible {
    color: var(--arlt-blanco); background: rgba(255,255,255,.14);
  }
  /* El globo del idioma vive en la misma fila y es del color de la tinta: sobre
     el panel navy daba 1,3:1 y DESAPARECÍA. Mismo tratamiento que las redes. */
  .arlt-cabecera[data-abierto="true"] .arlt-idiomas__boton { color: var(--arlt-blanco); }
  .arlt-cabecera[data-abierto="true"] .arlt-idiomas__boton:hover,
  .arlt-cabecera[data-abierto="true"] .arlt-idiomas[open] .arlt-idiomas__boton { background: rgba(255,255,255,.14); }
  .arlt-cabecera[data-abierto="true"] .arlt-menu-boton { background: rgba(255,255,255,.14); color: var(--arlt-blanco); }
  .arlt-cabecera[data-abierto="true"] .arlt-menu-boton:hover { background: rgba(255,255,255,.24); }
  .arlt-cabecera[data-abierto="true"] .arlt-aviso { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  /* El panel es hermano del logo y del botón dentro de la misma fila, así que con
     z-index 39 se dibuja encima de los dos —incluido el botón que sirve para
     cerrarlo—. Los dos suben por arriba del panel. */
  .arlt-cabecera[data-abierto="true"] .arlt-logo,
  .arlt-cabecera[data-abierto="true"] .arlt-redes,
  .arlt-cabecera[data-abierto="true"] .arlt-idiomas,
  .arlt-cabecera[data-abierto="true"] .arlt-menu-boton { position: relative; z-index: 41; }
  body[data-menu="abierto"] { overflow: hidden; }
}

@media (max-width: 620px) {
  .arlt-logo img { width: 40px; height: 40px; }
  .arlt-logo__nombre { font-size: .9375rem; }
  /* La palabra «Menú» se saca de la vista PERO NO DEL LECTOR DE PANTALLA.
     Con `display: none` el botón se quedaba sin nombre: en el celular es la
     única puerta a la navegación y un lector lo anunciaba sólo como «botón».
     Lo detectó el barrido de accesibilidad en las once páginas, con severidad
     crítica, el 01/10/2026. El recorte a un píxel es la forma de esconder algo
     que tiene que seguir leyéndose; `visibility: hidden` y `display: none`
     también lo sacan del árbol de accesibilidad y no sirven. */
  .arlt-menu-boton__texto {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  /* `relative` porque el rótulo pasó a estar fuera de flujo: sin esto se
     posiciona contra un ancestro cualquiera. */
  .arlt-menu-boton { padding: .625rem; border-radius: 50%; position: relative; }
}
/* Medido: a 414 px el nombre del colegio y las tres redes se tocaban. Acá el
   lockup y los íconos bajan otro escalón y el hueco vuelve a ser positivo en
   los anchos de celular que se usan de verdad, 360 incluido. */
@media (max-width: 430px) {
  .arlt-logo__nombre { font-size: .875rem; }
  .arlt-logo img { width: 36px; height: 36px; }
  .arlt-logo { gap: .5rem; }
}

/* --- Portada -------------------------------------------------------------- */
.arlt-hero { padding-block: clamp(1.75rem, 1rem + 2vw, 2.75rem) 0; }
.arlt-hero .arlt-caja { display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(2rem, 1rem + 4vw, 3rem); align-items: center; }
.arlt-hero h1 { font-size: var(--arlt-size-hero); margin: 0 0 1rem; text-wrap: balance; }
.arlt-hero h1 mark { background: none; color: var(--arlt-bordo); }
.arlt-hero p { color: var(--arlt-gris); margin: 0 0 1.75rem; max-width: 44ch; }
.arlt-hero__acciones { display: flex; gap: .75rem; flex-wrap: wrap; }
.arlt-hero__foto { position: relative; }
/* El marco recorta. La entrada agranda la foto un 12% y sin esto se salía de
   su columna: a 900 px el documento terminaba 20 px más ancho que la pantalla.
   El sello de los años queda AFUERA del marco a propósito: se apoya sobre el
   borde de la foto y un recorte se lo comería. */
.arlt-hero__marco { display: block; overflow: hidden; border-radius: var(--arlt-r); }
.arlt-hero__marco > img { width: 100%; aspect-ratio: 5/4; object-fit: cover; display: block; }
.arlt-hero__sello {
  position: absolute; right: -1rem; bottom: -1.375rem;
  background: var(--arlt-blanco); border-radius: var(--arlt-r-chico);
  padding: 1rem 1.375rem; box-shadow: var(--arlt-sombra-alta);
  display: flex; gap: .875rem; align-items: center;
}
/* `--arlt-azul` y no `--arlt-primario`: es el número de años del sello, no el
   nivel Primario. Usaba el token del nivel porque hasta el 06/10 valían lo
   mismo; desde SOL-826 Primario es rojo y esto tiene que seguir azul. */
.arlt-hero__sello b { font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--arlt-azul); }
.arlt-hero__sello span { font-size: .875rem; color: var(--arlt-gris); line-height: 1.3; }

/* Encabezado de las interiores: la foto con el título encima. */
.arlt-hero--interior { padding-block: 0; }
.arlt-hero--interior .arlt-caja { display: block; }
.arlt-portada {
  position: relative; isolation: isolate; color: var(--arlt-blanco);
  border-radius: var(--arlt-r); overflow: hidden; margin-top: 1.5rem;
  /* En fila, el kicker, el título, la barra y la cita se acomodaban uno al lado
     del otro y se pisaban entre sí. Van apilados, apoyados abajo a la izquierda. */
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  min-height: clamp(300px, 34vw, 460px);
  padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}
.arlt-portada { background: var(--arlt-navy); }
.arlt-portada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Dos velos: uno de abajo hacia arriba para el bloque de texto, y otro desde la
   izquierda, porque varias fotos de cabecera son claras justo donde va el texto. */
.arlt-portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top,    rgba(0,14,29,.88) 0%,  rgba(0,14,29,.45) 48%, rgba(0,14,29,.08) 100%),
    linear-gradient(to right,  rgba(0,14,29,.62) 0%,  rgba(0,14,29,.18) 46%, rgba(0,14,29,0)   72%);
}
.arlt-portada .arlt-kicker { color: rgba(255,255,255,.85); }
.arlt-portada .arlt-cita { color: rgba(255,255,255,.94); margin: .875rem 0 0; max-width: 42ch; }
.arlt-portada .arlt-kicker { margin: 0; }
.arlt-portada .arlt-title { margin: 0; }
.arlt-portada .arlt-acento { margin: 1rem 0 0; }

/* --- Niveles: una tarjeta por nivel, con su color ------------------------- */
/* La perspectiva es para que la inclinación de entrada de las tarjetas se vea
   como profundidad y no como un achatado. */
.arlt-niveles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; list-style: none; margin: 0; padding: 0; perspective: 1400px; }
.arlt-nivel { display: flex; }
.arlt-nivel a {
  display: flex; flex-direction: column; text-decoration: none; color: inherit; width: 100%;
  background: var(--arlt-blanco); border-radius: var(--arlt-r); overflow: hidden;
  box-shadow: var(--arlt-sombra); transition: transform .18s ease, box-shadow .18s ease;
}
.arlt-nivel a:hover { transform: translateY(-5px); box-shadow: var(--arlt-sombra-alta); }
.arlt-nivel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.arlt-nivel__cuerpo { padding: 1.125rem 1.25rem 1.375rem; }
.arlt-nivel__circulo {
  display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--arlt-blanco); padding: .3125rem .75rem;
  border-radius: 999px; margin-bottom: .625rem; background: var(--arlt-accion);
}
.arlt-nivel--maternal .arlt-nivel__circulo { background: var(--arlt-maternal); }
.arlt-nivel--inicial  .arlt-nivel__circulo { background: var(--arlt-inicial); }
.arlt-nivel--primario .arlt-nivel__circulo { background: var(--arlt-primario); }
.arlt-nivel--medio    .arlt-nivel__circulo { background: var(--arlt-medio); }

/* --- La inicial de cada nivel ---------------------------------------------- */
/* Sale de la página 4 del brochure: un círculo del color del nivel con su letra
   inicial adentro. Es el punto 5 de lo que pidió el colegio.

   LA LETRA VA MACIZA, no en contorno como el brochure. En el brochure el
   contorno funciona porque el círculo ocupa un tercio de la página; acá mide
   2,75 rem y una letra de contorno a ese tamaño se cierra sola y queda sucia.
   Además el relleno blanco es lo que da el contraste de 7,3:1 sobre los cuatro
   colores de nivel —el mismo que exige el resto del sitio—: con la letra en
   contorno, el interior del glifo es el color del círculo y el contraste real
   pasa a ser el del borde de un pelo.

   La tipografía es Cardo, la de los títulos y la del brochure. El colegio dijo
   que la letra puede ser de otra tipografía; ésta ya es la suya. */
.arlt-nivel__inicial,
.arlt-portada__inicial {
  display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 50%; color: var(--arlt-blanco);
  font-family: var(--arlt-font-titulo); font-weight: 700; line-height: 1;
  background: var(--arlt-color-pag, var(--arlt-accion));
}
.arlt-nivel__inicial { width: 2.75rem; height: 2.75rem; font-size: 1.375rem; }
.arlt-nivel--maternal .arlt-nivel__inicial { background: var(--arlt-maternal); }
.arlt-nivel--inicial  .arlt-nivel__inicial { background: var(--arlt-inicial); }
.arlt-nivel--primario .arlt-nivel__inicial { background: var(--arlt-primario); }
.arlt-nivel--medio    .arlt-nivel__inicial { background: var(--arlt-medio); }

/* En la tarjeta, la inicial y el nombre del nivel van en la misma línea, como en
   el brochure: el círculo a la izquierda y el nombre al lado. */
.arlt-nivel__marca { display: flex; align-items: center; gap: .6875rem; margin-bottom: .625rem; }
/* SOL-828: el formato del Canva. Al lado del círculo, el nombre del nivel en
   Cardo Bold; debajo, lo que abarca y el turno en Cardo Regular. Era todo
   Montserrat, con el turno en gris y en el cuerpo más chico de la tarjeta, que
   es justo lo que Zoe pidió corregir: «que tenga mayor presencia y se lea
   mejor». Las mayúsculas y el espaciado se quedan: son del brochure. */
.arlt-nivel__etiqueta {
  font-family: var(--arlt-font-titulo);
  font-size: 1rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--arlt-tinta);
}

/* Y al entrar al nivel, que es donde el colegio pidió que se viera, el círculo
   acompaña al título de la portada. Sobre el panel navy el color del nivel
   quedaría apagado, así que ahí el círculo va en blanco con la letra del color
   del nivel: la misma pieza, invertida. */
.arlt-portada__inicial {
  width: 3.5rem; height: 3.5rem; font-size: 1.75rem;
  background: var(--arlt-blanco); color: var(--arlt-color-pag, var(--arlt-accion));
}
.arlt-portada__marca { display: flex; align-items: center; gap: .875rem; margin-bottom: .5rem; }
.arlt-portada__marca .arlt-kicker { margin: 0; }
@media (max-width: 620px) {
  .arlt-portada__inicial { width: 2.875rem; height: 2.875rem; font-size: 1.4375rem; }
}

/* Cada nivel tiñe sus propios acentos: el subrayado de la navegación, la línea
   del encabezado y las etiquetas de los datos. El color ya existe en la tarjeta
   del nivel en la portada, así que la página lo continúa. */
.arlt-pag--maternal { --arlt-color-pag: var(--arlt-maternal); }
.arlt-pag--inicial  { --arlt-color-pag: var(--arlt-inicial); }
.arlt-pag--primario { --arlt-color-pag: var(--arlt-primario); }
.arlt-pag--medio    { --arlt-color-pag: var(--arlt-medio); }
/* El turno pasa del gris a la tinta. «Presencia» es tamaño Y contraste: en gris
   sobre el papel daba 4,9:1 y se leía como una nota al pie. */
.arlt-nivel__nombre {
  display: block; font-family: var(--arlt-font-titulo);
  font-weight: 400; font-size: 1.1875rem; line-height: 1.3;
}
.arlt-nivel__rango {
  display: block; font-family: var(--arlt-font-titulo);
  font-weight: 400; font-size: 1.125rem; line-height: 1.3; color: var(--arlt-tinta);
}

/* --- Nuestro equipo -------------------------------------------------------- */
/* FICHA HORIZONTAL EN DOS COLUMNAS, elegida el 07/10 entre cuatro bocetos
   (`pruebas/bocetos-equipo.html`). Por qué ésta y no una grilla de retratos
   grandes, que es lo que había:

   ⚠️ ESTO CAMBIÓ EL 12/10 y el párrafo de arriba quedó viejo a propósito, para
   que se vea qué se dejó atrás. La maqueta era una ficha horizontal con la foto
   en un círculo de 100 px al costado del nombre, elegida en su momento porque
   ocupaba 582 px en vez de 1383 y porque los cargos largos entraban en una
   línea. Mateo pidió que la foto se note: «que se vea bien la foto, que se
   note». Así que la foto pasó a ser lo primero y ocupa el ancho entero de la
   tarjeta, y los dos motivos de antes se aceptaron como costo — la sección es
   más alta y dos cargos se parten en dos renglones.

   Los fondos de las fotos no son idénticos y el círculo lo disimulaba; ahora
   que se ven enteras importa más. Están emparejados en el archivo:
   ver `sitio/README.md`. */
.arlt-equipo {
  list-style: none; margin: 2rem auto 0; padding: 0;
  display: grid; gap: clamp(1rem, .5rem + 1.5vw, 1.75rem);
  /* EN EL CELULAR, DOS COLUMNAS Y PUNTO — y escritas, no deducidas.
     `repeat(auto-fit, minmax(9.5rem, 20rem))` acá daba UNA sola: para saber
     cuántas repeticiones entran, el navegador usa el MÁXIMO del `minmax` cuando
     es un largo fijo, no el mínimo. Con 20rem de máximo, en 330 px de ancho
     entra una. El mínimo de 9.5rem no lo mira nadie. */
  grid-template-columns: 1fr 1fr;
  /* ARRANCA DONDE ARRANCA EL TÍTULO. Tenía `max-width: 63rem` y márgenes
     automáticos, así que a 1440 la grilla quedaba centrada 72 px más adentro
     que el «Nuestro / Equipo» de arriba y se veía desalineada (lo marcó Mateo,
     12/10). El tope lo pone `.arlt-caja`, que es el mismo para el título, el
     texto y todo lo demás de la sección: acá no hace falta otro.
     Y `start` en vez de `center` por lo mismo, para los niveles: ahí la lista
     tiene dos personas y centradas quedaban flotando en el medio con el título
     pegado a la izquierda. */
  justify-content: start;
}
/* SEIS PERSONAS VAN SIEMPRE DE A TRES, en dos filas. Antes esto era sólo
   `auto-fit`, y el número de columnas salía del ancho que hubiera: en una
   ventana de unos 800 px entraban dos y quedaban tres filas de a dos,
   arrinconadas contra la izquierda. Se veía mal y Mateo lo marcó (12/10).
   Ahora, cuando hay tres o más, son tres fijas y las tarjetas se achican para
   entrar —`minmax(0, 1fr)`, no un ancho mínimo— en vez de saltar a dos filas.

   CON MENOS DE TRES NO SE TOCA, y por eso el `:has()`: al final de cada nivel
   la lista tiene SÓLO DOS (el directivo y el vicedirectivo). Con tres columnas
   fijas esos dos quedaban pegados a la izquierda con un hueco al lado; cayendo
   a la regla de arriba se centran solos.

   Si un navegador no entiende `:has()` no se rompe nada: se queda con el
   `auto-fit` centrado, que es como estaba. */
@media (min-width: 48rem) {
  /* Pocas personas: tantas como entren, centradas. */
  .arlt-equipo { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 20rem)); }
  /* Tres o más: tres por fila, siempre. */
  .arlt-equipo:has(> li:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.arlt-equipo__persona {
  display: block; border-radius: 16px; overflow: hidden; background: var(--arlt-papel);
  box-shadow: 0 1px 2px rgba(0, 29, 59, .05), 0 6px 18px rgba(0, 29, 59, .07);
}
/* LA FOTO MANDA, y por pedido explícito (12/10): antes era un círculo de 100 px
   al costado del nombre y la cara no se distinguía.

   `top center`: el retrato viene en 4:5 y así se respeta entero; si algún día
   entra uno con otra proporción, el recorte toma la parte de arriba, que es
   donde está la cara. Centrado, cortaría la frente.

   ⚠️ EL TECHO SON 500 px. Los retratos que mandó el colegio miden 500×625 y no
   hay otros. Por eso la tarjeta se corta en `20rem` (320 px): más grande que
   eso empieza a estirarse y se pone blanda en pantallas de densidad 2. Si
   alguna vez llegan los originales del fotógrafo, se puede subir ese tope. */
.arlt-equipo__foto {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: top center; background: var(--arlt-crema);
}
.arlt-equipo__persona > div { padding: .9375rem 1.125rem 1.25rem; }
.arlt-equipo__nombre {
  margin: 0; font-family: var(--arlt-font-titulo); font-weight: 700;
  font-size: 1.1875rem; line-height: 1.25; color: var(--arlt-tinta);
}
/* El cargo toma el color de la página: en la portada es el bordó y adentro de
   un nivel, el color de ese nivel.
   SE PARTE EN DOS RENGLONES Y ESTÁ ACEPTADO. «Directora de Estudios Nivel
   Secundario» no entra en una línea debajo de una foto de 320 px. Con la foto
   al costado entraba, y ése era el motivo de la maqueta anterior; al pasar la
   foto a protagonista se cambió un problema por el otro a sabiendas. Las
   tarjetas de una misma fila se estiran a la más alta, así que desparejo no
   queda. */
.arlt-equipo__cargo {
  margin: .25rem 0 0; font-size: .9375rem; font-weight: 600; line-height: 1.3;
  color: var(--arlt-color-pag, var(--arlt-bordo));
}

/* EN EL CELULAR LA LETRA BAJA UN ESCALÓN. Con dos columnas la tarjeta mide unos
   158 px y adentro quedan 122 de texto: a tamaño de escritorio, «Rector General
   de la Institución» salía en tres renglones y «Mariano Piccuto» en dos. No
   rompe nada —las tarjetas de una fila se estiran a la más alta— pero se lee
   como un acordeón. Un escalón menos y el relleno más angosto lo acomodan sin
   tocar el tamaño de la foto, que es lo que se pidió que se note.
   Las dos columnas se mantienen: una sola dejaría la sección en 2.500 px de
   alto para presentar a seis personas. */
@media (max-width: 47.9375rem) {
  .arlt-equipo__persona > div { padding: .75rem .8125rem 1rem; }
  .arlt-equipo__nombre { font-size: 1rem; }
  .arlt-equipo__cargo { font-size: .8125rem; margin-top: .1875rem; }
}

/* El aviso de que lo que se ve es un ejemplo. SE BORRA junto con los datos de
   ejemplo, cuando el colegio mande el material que falte. */
.arlt-equipo__pendiente {
  margin: .25rem 0 0; font-size: .9375rem; color: var(--arlt-gris);
  border-left: 3px solid var(--arlt-linea); padding-left: .75rem;
}

/* --- Nuestra historia ------------------------------------------------------ */
/* Las fotos vienen de un escaneo, así que no tienen todas la misma proporción y
   no se recortan a una grilla pareja: se las deja en su caja con `object-fit:
   contain` sobre el crema. Recortar fotos antiguas a un cuadrado es perder
   justamente lo que el colegio quiere mostrar. */
.arlt-historia__texto { max-width: 46rem; }
.arlt-historia__fotos {
  margin-top: 2rem; display: grid; gap: clamp(1.25rem, .5rem + 2vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.arlt-historia__foto { margin: 0; }
.arlt-historia__foto img {
  display: block; width: 100%; aspect-ratio: 10 / 7; object-fit: contain;
  border-radius: 14px; background: var(--arlt-crema);
}
.arlt-historia__foto figcaption {
  margin-top: .625rem; font-size: .9375rem; color: var(--arlt-gris); line-height: 1.4;
}

/* --- Bloque de inscripción ------------------------------------------------ */
.arlt-inscripcion { padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem); }
.arlt-inscripcion__caja-ext {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--arlt-bordo); color: var(--arlt-blanco);
  border-radius: clamp(20px, 2vw, 34px); padding: clamp(1.75rem, 1rem + 3vw, 3rem);
}
/* Una foto de fondo, debajo de un velo bordó bien opaco: aporta textura sin
   restarle una pizca de contraste al texto ni al formulario. */
.arlt-inscripcion__caja-ext::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../fotos/jardin.webp") no-repeat;
  /* La posición se mueve por variable para el desplazamiento a distinta velocidad.
     Mover la POSICIÓN del fondo y no el elemento es lo que hace que no pueda
     correr nada de lugar ni taparle el formulario a nadie. */
  background-size: cover;
  background-position: center calc(50% + var(--arlt-desplazo, 0px));
}
.arlt-inscripcion__caja-ext::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(133,0,0,.97) 0%, rgba(133,0,0,.9) 55%, rgba(133,0,0,.82) 100%);
}
/* En el celular, la versión chica de esa foto. No es una concesión de calidad:
   la foto va DEBAJO de un velo bordó al 97%, así que de ella se ve la textura y
   nada más. Pesaba 134 KB y la chica pesa 45. Medido el 02/10: era el archivo
   más pesado que se bajaba un celular en la portada, y el único que quedaba
   afuera del `srcset` justamente por ser un fondo de CSS y no una etiqueta. */
@media (max-width: 620px) {
  .arlt-inscripcion__caja-ext::before { background-image: url("../fotos/jardin-cel.webp"); }
}
.arlt-inscripcion__grilla { display: grid; grid-template-columns: 1fr minmax(0, 43rem); gap: clamp(1.75rem, 1rem + 3vw, 4rem); align-items: center;
  /* El plano de color va a todo el ancho, pero si las dos columnas se separan
     sin tope quedan en dos puntas con un vacío enorme en el medio. */
  max-width: 84rem; margin-inline: auto; }
/* La columna izquierda la define el alto del formulario. Con el tipo chico el
   texto quedaba flotando en un vacío grande: el año ocupa el bloque. */
.arlt-inscripcion__ciclo { font-size: clamp(2.75rem, 1rem + 7vw, 6rem); font-weight: 800; line-height: .95; margin: 0; letter-spacing: -.035em; }
.arlt-inscripcion__ciclo b { color: #FF8A8A; }
.arlt-inscripcion__niveles { color: rgba(255,255,255,.82); margin: 1.25rem 0 0; font-size: var(--arlt-size-lead); font-weight: 600; }
.arlt-inscripcion__caja { background: var(--arlt-blanco); color: var(--arlt-tinta); border-radius: var(--arlt-r); padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); box-shadow: var(--arlt-sombra); }
.arlt-inscripcion__caja h2 { font-size: 1.5rem; margin: 0 0 .375rem; }

/* --- Secciones y planos --------------------------------------------------- */
.arlt-seccion { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
/* Planos de color. El brochure trabaja con masas grandes de bordó y navy —son
   el 23% y el 15% de su superficie—; el sitio las usa en las bandas que separan
   secciones, para no quedar todo blanco. */
.arlt-panel--claro, .arlt-panel--gris { background: var(--arlt-crema); color: var(--arlt-tinta); }
.arlt-panel { background: var(--arlt-bordo); color: var(--arlt-blanco); }
.arlt-panel--navy { background: var(--arlt-navy); color: var(--arlt-blanco); }
.arlt-panel--blue { background: var(--arlt-azul); color: var(--arlt-blanco); }
.arlt-panel a, .arlt-panel--navy a, .arlt-panel--blue a { color: var(--arlt-blanco); }
.arlt-panel .arlt-lema__valores, .arlt-panel--navy .arlt-lema__valores,
.arlt-panel .arlt-kicker, .arlt-panel--navy .arlt-kicker,
.arlt-panel--blue .arlt-kicker,
.arlt-inscripcion__caja-ext > .arlt-inscripcion__grilla .arlt-kicker,
.arlt-cierre__caja .arlt-kicker { color: rgba(255,255,255,.85); }
/* dentro de una tarjeta blanca el kicker vuelve a su color */
.arlt-inscripcion__caja .arlt-kicker { color: var(--arlt-accion); }
/* El texto guía es gris por defecto: sobre un plano oscuro no llega al mínimo. */
.arlt-panel .arlt-lead, .arlt-panel--navy .arlt-lead, .arlt-panel--blue .arlt-lead,
.arlt-cierre__caja .arlt-lead { color: rgba(255,255,255,.9); }
.arlt-seccion--lectura > .arlt-caja { max-width: 42rem; }

/* --- Foto + texto --------------------------------------------------------- */
.arlt-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: center; padding-block: clamp(2rem, 1rem + 3vw, 3.5rem);
  max-width: var(--arlt-max); margin-inline: auto; padding-inline: var(--arlt-gutter);
  /* La foto y el texto entran corridos desde afuera: sin recortar, esos píxeles de
     más ensanchan el documento y aparece una barra horizontal en pantallas chicas.
     `clip` y no `hidden`: `hidden` crearía un contenedor de desplazamiento y
     rompería la cabecera fija. */
  overflow-x: clip;
}
.arlt-duo > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--arlt-r); }
.arlt-duo__texto > * { max-width: 52ch; }
.arlt-duo__texto > :first-child { margin-top: 0; }
.arlt-duo__texto > :last-child { margin-bottom: 0; }
.arlt-duo--invertido > img { order: 2; }

/* --- Tarjetas ------------------------------------------------------------- */
.arlt-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 1.5rem; }
.arlt-ficha { background: var(--arlt-blanco); border-radius: var(--arlt-r); overflow: hidden; box-shadow: var(--arlt-sombra); }
.arlt-ficha img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.arlt-ficha__cuerpo { padding: 1.25rem 1.375rem 1.5rem; }
.arlt-ficha__cuerpo > :first-child { margin-top: 0; }
.arlt-ficha__cuerpo > :last-child { margin-bottom: 0; }

/* --- Datos, listas, acordeón --------------------------------------------- */
/* Tres datos cortos en una columna angosta dejaban media pantalla vacía:
   en pantalla ancha van uno al lado del otro y ocupan el bloque. */
.arlt-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
/* Filo de color arriba del encabezado del nivel. */
.arlt-pag--maternal .arlt-portada, .arlt-pag--inicial .arlt-portada,
.arlt-pag--primario .arlt-portada, .arlt-pag--medio .arlt-portada {
  border-top: 6px solid var(--arlt-color-pag);
}
.arlt-datos li { display: flex; flex-direction: column; gap: .375rem;
  padding: 1.125rem 0 0; border-top: 3px solid var(--arlt-color-pag, var(--arlt-accion)); }
.arlt-datos dt, .arlt-datos b { font-size: .8125rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--arlt-color-pag, var(--arlt-accion)); }

.arlt-lista { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .875rem; max-width: 64ch; }
.arlt-ficha .arlt-lista, .arlt-ficha__cuerpo .arlt-lista { max-width: none; }
/* Rótulo un poco más ancho: con 9rem, "Áreas extracurriculares:" partía en dos
   y dejaba el renglón descolgado. */
.arlt-ficha .arlt-lista li:has(> b) { grid-template-columns: 1.4375rem minmax(7.5rem, 11rem) minmax(0, 1fr); }

/* El borde derecho quedaba muy irregular en columnas angostas. Justificado con
   partición de palabras: los renglones terminan en el mismo punto y, al poder
   cortar palabras, no se abren huecos entre palabras. La partición necesita el
   idioma declarado, que el sitio ya trae en <html lang="es-AR">. */
.arlt-ficha__cuerpo p,
.arlt-ficha .arlt-lista li,
.arlt-grilla > div > p { text-align: justify; hyphens: auto; }
/* El texto que sigue al rótulo es un nodo suelto, no un elemento: no se puede
   seleccionar, así que la justificación va en el renglón y el rótulo se
   devuelve a la izquierda. */
.arlt-ficha .arlt-lista li > b { text-align: left; hyphens: none; }
/* La barra de acento está oculta, así que sin esto el título queda pegado a la
   lista y al acordeón. */
.arlt-title + .arlt-acento + .arlt-acordeon,
.arlt-title + .arlt-acento + .arlt-grilla { margin-top: 1.5rem; }
.arlt-lista li { display: grid; grid-template-columns: 1.4375rem minmax(0, 1fr); gap: .25rem .75rem; align-items: start; font-weight: 600; }
/* Cuando el renglón arranca con un rótulo, éste forma su propia columna: si no,
   la etiqueta y el texto se mezclan y cada renglón corta en un lugar distinto. */
.arlt-lista li:has(> b) { grid-template-columns: 1.4375rem minmax(7rem, 11rem) minmax(0, 1fr); }
.arlt-lista li > b { font-weight: 800; }
.arlt-lista li::before {
  content: "\2713"; flex: none; width: 1.4375rem; height: 1.4375rem; border-radius: 50%;
  /* azul, no el token del nivel Primario: ver el sello de la portada */
  background: var(--arlt-azul); color: var(--arlt-blanco);
  font-size: .8125rem; display: grid; place-items: center; margin-top: .1875rem;
}

.arlt-acordeon { max-width: none; }

/* Con el contenedor en 1920px, un bloque que tiene medida propia queda varado
   contra el borde izquierdo con media pantalla vacía al lado. La solución no es
   centrar el bloque suelto —se desalinearía de su titular— sino acotar y centrar
   toda la caja, titular incluido. */
.arlt-seccion--lectura > .arlt-caja,
.arlt-seccion > .arlt-caja:not(:has(.arlt-grilla)):not(:has(.arlt-niveles)):not(:has(.arlt-datos)):not(:has(.arlt-contacto)):not(:has(.arlt-inscripcion__grilla)):not(:has(.arlt-legal)) {
  max-width: 72rem;
}

/* Secciones que son sólo titular y prosa: en pantalla ancha el texto solo ocupaba
   media sección y quedaba desproporcionado contra el resto de la página. Van a dos
   columnas —titular a la izquierda, texto a la derecha—, que llena el ancho sin
   estirar la línea de lectura. */
.arlt-seccion--dos > .arlt-caja {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: .5rem clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start;
}
.arlt-seccion--dos > .arlt-caja > .arlt-seccion__titulo { grid-column: 1; grid-row: 1; }
.arlt-seccion--dos > .arlt-caja > .arlt-seccion__titulo .arlt-acento { display: none; }
.arlt-seccion--dos > .arlt-caja > p { grid-column: 2; max-width: 68ch; }
@media (max-width: 860px) {
  .arlt-seccion--dos > .arlt-caja { grid-template-columns: 1fr; }
  /* `> p` (0-2-1) le gana a `> *` (0-2-0): hay que nombrarlo o la columna 2
     sigue aplicándose y el texto se sale de la pantalla. */
  .arlt-seccion--dos > .arlt-caja > *,
  .arlt-seccion--dos > .arlt-caja > p { grid-column: 1; grid-row: auto; max-width: none; }
  .arlt-seccion--dos > .arlt-caja > .arlt-seccion__titulo { margin-bottom: .75rem; }
}

/* Y la prosa suelta necesita medida: a 1800px de ancho una línea entra a más de
   200 caracteres y se vuelve ilegible. */
.arlt-seccion > .arlt-caja > p,
.arlt-seccion > .arlt-caja > .arlt-lead { max-width: 70ch; }
/* Si la sección tiene una fila o una grilla que llega al borde, la prosa
   acotada quedaba como un bloque angosto flotando encima. Acompaña el ancho. */
.arlt-seccion > .arlt-caja:is(:has(> .arlt-datos), :has(> .arlt-grilla), :has(> .arlt-legal)) > p,
.arlt-seccion > .arlt-caja:is(:has(> .arlt-datos), :has(> .arlt-grilla), :has(> .arlt-legal)) > .arlt-lead { max-width: none; }
.arlt-acordeon details { border-bottom: 1px solid var(--arlt-linea); }
.arlt-acordeon summary {
  cursor: pointer; padding: 1.0625rem 0; font-weight: 800; font-size: var(--arlt-size-h3);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.arlt-acordeon summary::-webkit-details-marker { display: none; }
/* El signo gira hasta volverse una cruz en vez de cambiar de carácter: un cambio
   de carácter no se puede animar, un giro sí. */
.arlt-acordeon summary::after {
  content: '+'; color: var(--arlt-accion); font-size: 1.75rem; line-height: 1;
  display: inline-block; transition: transform .3s cubic-bezier(.22,.7,.3,1);
}
.arlt-acordeon details[open] summary::after { transform: rotate(135deg); }
.arlt-acordeon summary:hover { color: var(--arlt-accion); }
/* El alto lo anima el JavaScript; sin el recorte el texto se desborda mientras tanto. */
.arlt-acordeon__cuerpo { overflow: hidden; }
.arlt-acordeon details > p { margin-top: 0; padding-bottom: 1.125rem; color: var(--arlt-gris); }

/* --- Franja del lema ------------------------------------------------------ */
.arlt-lema { text-align: center; }
.arlt-lema__titulo { font-weight: 800; font-size: var(--arlt-size-h2); margin: 0 0 .5rem; letter-spacing: -.02em; }
.arlt-lema__valores { color: var(--arlt-gris); font-weight: 700; font-size: var(--arlt-size-small); margin: 0; }
/* La medida de lectura general les daba un ancho tope sin centrarlos: el texto
   quedaba centrado dentro de una caja apoyada a la izquierda. */
.arlt-lema > p, .arlt-lema__titulo { max-width: none; margin-inline: auto; }

 /* --- Texto legal ---------------------------------------------------------- */
/* La política estaba acotada a 80ch: una columna angosta con media página vacía.
   La grilla de cuatro columnas llenaba el ancho pero partía cada apartado en
   renglones de seis palabras llenos de guiones —se leía como una tabla, no como
   un texto—. Va como las demás secciones editoriales: el título en el margen y
   el párrafo corrido al lado, un apartado por fila. Las columnas son explícitas
   (no `1fr`) para que cada fila mida lo que mide el texto y se pueda centrar en
   vez de estirarse y dejar un hueco a la derecha. */
.arlt-legal { margin-top: 2.25rem; display: grid; gap: 2.25rem; }
.arlt-legal > section {
  display: grid; justify-content: center; align-items: start;
  grid-template-columns: minmax(0, 17rem) minmax(0, 68ch);
  gap: .5rem clamp(2rem, 1rem + 3vw, 4.5rem);
}
.arlt-legal > section > h2 { font-size: var(--arlt-size-h3); margin: 0; }
.arlt-legal > section > p { margin: 0; }
@media (max-width: 860px) {
  .arlt-legal { gap: 1.75rem; }
  .arlt-legal > section { grid-template-columns: minmax(0, 1fr); }
}

/* --- Contacto y formularios ---------------------------------------------- */
/* Quien entra a contacto casi siempre viene a escribir, así que el formulario va
   primero. En celular eso es un apilado —formulario, mapa, datos—; en pantalla
   grande apilar dejaría una columna finita con el ancho entero vacío al lado, así
   que van dos columnas y el formulario ocupa la primera. */
.arlt-contacto { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
.arlt-contacto__lado { display: grid; gap: 1.25rem; align-content: start; }
.arlt-contacto__titulo { font-size: var(--arlt-size-h3); margin: .75rem 0 0; }
.arlt-contacto__mapa { border-radius: var(--arlt-r); overflow: hidden; border: 1px solid var(--arlt-linea); }
.arlt-contacto__mapa iframe { display: block; width: 100%; height: clamp(260px, 26vw, 400px); border: 0; }

/* El mapa, antes de pedirlo. Ocupa EL MISMO ALTO que el mapa real para que al
   cargarlo no se mueva nada de lugar debajo. */
.arlt-mapa__pedir {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; height: clamp(260px, 26vw, 400px); border: 0; cursor: pointer;
  font-family: inherit; color: var(--arlt-tinta);
  background: var(--arlt-crema);
  transition: background .2s ease;
}
.arlt-mapa__pedir:hover { background: #EFE6E6; }
.arlt-mapa__pin {
  width: 2.25rem; height: 2.25rem; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--arlt-accion);
  box-shadow: inset 0 0 0 .4375rem var(--arlt-crema);
}
.arlt-mapa__pedir:hover .arlt-mapa__pin { box-shadow: inset 0 0 0 .4375rem #EFE6E6; }
.arlt-mapa__texto { font-weight: 700; font-size: 1rem; }
.arlt-mapa__nota { font-size: .8125rem; color: var(--arlt-gris); }

@media (min-width: 900px) {
  .arlt-contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* Los datos vienen en un <dl>, así que además de los <li> hay que alcanzar a los
   <div> que agrupan cada término con su definición. */
.arlt-datos > div { display: flex; flex-direction: column; gap: .375rem;
  padding: 1.125rem 0 0; border-top: 3px solid var(--arlt-color-pag, var(--arlt-accion)); }
.arlt-datos dd { margin: 0; }
.arlt-datos a { color: var(--arlt-tinta); text-decoration-color: var(--arlt-linea);
  text-underline-offset: 3px; overflow-wrap: anywhere; }
.arlt-datos a:hover { text-decoration-color: var(--arlt-color-pag, var(--arlt-accion)); }
.arlt-datos .arlt-boton { align-self: start; margin-top: .75rem; text-decoration: none; }

.arlt-form { display: grid; gap: .875rem; }
/* UN ESCALÓN MÁS GRANDE TODO (12/10, pedido de Mateo: «los datos que se ven
   dentro del formulario y los datos a cargar»). El formulario es lo que la
   familia tiene que completar y se veía chico al lado del panel bordó. Toca a
   los dos formularios, el de la portada y el de contacto, que son el mismo. */
.arlt-campo { display: grid; gap: .375rem; }
.arlt-campo label { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--arlt-gris); }
/* El asterisco va marcado como decorativo: el campo ya es obligatorio para el
   navegador y para el lector de pantalla por su atributo `required`. Leerlo
   además como "asterisco" en cada rótulo es ruido. */
.arlt-campo__obligatorio { color: var(--arlt-accion); font-weight: 800; }
/* Sin `opacity`: bajarle la opacidad al gris del rótulo lo dejaba en 3,7:1 contra
   el blanco, por debajo del mínimo. Se distingue por el peso y la caja, no por
   estar más apagado. */
.arlt-campo__opcional { font-weight: 500; text-transform: none; letter-spacing: 0; }
/* Dentro de la caja blanca sobre el bordó, el rojo del asterisco se pierde. */
.arlt-inscripcion__caja .arlt-campo__obligatorio { color: var(--arlt-inicial); }
.arlt-campo input, .arlt-campo select, .arlt-campo textarea {
  font-family: inherit; font-size: 1.0625rem; padding: .9375rem 1rem;
  border: 1px solid var(--arlt-linea); border-radius: var(--arlt-r-chico);
  background: var(--arlt-blanco); color: var(--arlt-tinta); width: 100%;
}
.arlt-campo textarea {
  /* Alto fijo y sin tirador: estirarlo a mano desarmaba el formulario. */
  height: 8.5rem; resize: none;
}

/* --- Desplegable de nivel -------------------------------------------------- */
/* Apariencia base sin la del sistema, con la flecha dibujada. Es lo que se ve
   cuando el control propio no se arma: en celular, sin JavaScript o sin GSAP. */
.arlt-campo select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2359637A' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9375rem center; background-size: 12px 8px;
  padding-right: 2.5rem;
}
.arlt-campo select:hover { border-color: var(--arlt-gris); }

/* Aviso de lo que faltó completar, cuando la consulta vuelve rechazada. */
.arlt-form__error {
  margin: 0; padding: .8125rem 1rem; border-radius: var(--arlt-r-chico);
  background: #FDECEC; color: var(--arlt-inicial); border: 1px solid #F3C9C9;
  font-size: .9375rem; font-weight: 600;
}
.arlt-campo [aria-invalid="true"] { border-color: var(--arlt-accion); }

/* Qué hay que corregir, debajo del campo y no en un cartel arriba de todo: la
   persona ya está mirando el campo cuando se entera. */
.arlt-campo__aviso {
  margin: 0; font-size: .8125rem; font-weight: 600; line-height: 1.35;
  color: var(--arlt-accion);                      /* 7.28:1 sobre blanco */
}
.arlt-inscripcion__caja .arlt-campo__aviso { color: var(--arlt-inicial); }
/* La casilla no tiene borde que pintar, así que se marca con un contorno. */
.arlt-acepto input[aria-invalid="true"] { outline: 2px solid var(--arlt-accion); outline-offset: 3px; }
.arlt-acepto + .arlt-campo__aviso { margin-top: -.375rem; }

.arlt-acepto { display: flex; gap: .625rem; align-items: flex-start; font-size: .9375rem; }
/* 18px es chico para el dedo: es el último paso antes de enviar la consulta. */
.arlt-acepto input { margin-top: .125rem; width: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--arlt-accion); }
.arlt-acepto label { padding-block: .25rem; }
.arlt-trampa { position: absolute; left: -9999px; }
.arlt-form__nota { font-size: .8125rem; color: var(--arlt-gris); margin: 0; }
.arlt-form .arlt-boton { width: 100%; }

/* --- Pie ------------------------------------------------------------------ */
/* Era #23201F, casi negro: cortaba en seco con un sitio claro y cálido, y el blanco
   puro encima llevaba el contraste al máximo, que es donde más se nota el borde de
   color que dibujan las letras al renderizarse. Marrón cálido y textos en crema. */
.arlt-pie { background: var(--arlt-navy); color: #D6DEE9; margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
/* Ese margen separa al pie del contenido claro. Pero cuando la última franja de
   la página YA es navy —contacto termina con "35 años educando en valores"— el
   margen dibuja una banda blanca entre dos bloques del mismo color, que parece
   un error de maqueta. Ahí el pie va pegado y los dos leen como un solo cierre. */
main:has(> .arlt-panel--navy:last-child) + .arlt-pie { margin-top: 0; }
.arlt-pie__grilla { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap: 2.5rem; padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
/* En celular el pie se apilaba entero en una columna y quedaba larguísimo: ocho
   enlaces uno debajo del otro más cuatro datos más el bloque de entrevista. Las
   dos primeras secciones comparten fila —entran—, y la de la entrevista va abajo
   a lo ancho. */
@media (max-width: 900px) {
  .arlt-pie__grilla { grid-template-columns: 1fr 1fr; gap: 2rem 1.75rem; }
  .arlt-pie__grilla > *:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 460px) { .arlt-pie__grilla { grid-template-columns: 1fr; } }
.arlt-pie h2 { font-size: 1.125rem; margin: 0 0 1rem; color: #FFFFFF; }
.arlt-pie ul { list-style: none; margin: 0; padding: 0; }
/* Los enlaces del pie medían 20px de alto. En un celular —por donde entra la mayoría
   de las familias— eso es difícil de acertar, y ahí están el teléfono y el correo,
   que son de los datos más buscados. Pasan a 44px de alto útil. */
.arlt-pie__enlaces { columns: 2; column-gap: 1.5rem; }
.arlt-pie__enlaces a { display: flex; align-items: center; padding: .25rem 0; color: #EDE6E1; text-decoration: none; font-size: .9375rem; }
/* El alto de 44px es para poder tocarlo con el dedo: sólo hace falta en celular,
   en escritorio dejaba la lista larguísima y muy separada. */
@media (max-width: 900px) { .arlt-pie__enlaces { columns: 1; } .arlt-pie__enlaces a { min-height: 44px; padding: .5rem 0; } }
@media (max-width: 460px) { .arlt-pie__enlaces { columns: 2; column-gap: 1rem; } }
.arlt-pie__enlaces a:hover { color: #FBF7F4; text-decoration: underline; }
.arlt-pie__dato { display: block; padding: .375rem 0; font-size: .9375rem; }

/* Los datos de contacto eran cuatro líneas sueltas sin decir qué era cada una.
   Van con etiqueta, en dos columnas que se alinean entre sí. */
.arlt-pie__datos { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.25rem; font-size: .9375rem; }
.arlt-pie__datos dt { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #9FB3CC; padding-top: .125rem; }
.arlt-pie__datos dd { margin: 0; }
.arlt-pie__datos a { color: #EDE6E1; }
@media (max-width: 480px) { .arlt-pie__datos { grid-template-columns: 1fr; gap: .125rem; }
  .arlt-pie__datos dd { margin-bottom: .625rem; } }
.arlt-pie__dato a { display: inline-flex; align-items: center; min-height: 40px; }
.arlt-pie__dato a { color: #EDE6E1; }
.arlt-copy { border-top: 1px solid rgba(255,255,255,.16); font-size: .8125rem; }
.arlt-copy__fila { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; padding-block: 1.125rem; }
/* Firma de autoría: el logo va en blanco sobre el navy del pie y se apaga un poco
   para no competir con los datos del colegio, que son lo que se viene a buscar. */
.arlt-firma { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  color: inherit; opacity: .72; transition: opacity .2s ease; }
.arlt-firma:hover, .arlt-firma:focus-visible { opacity: 1; }
.arlt-firma img { height: 20px; width: auto; display: block; }
.arlt-copy a { color: #EDE6E1; }
/* Dentro del pie el fondo es oscuro, así que los colores pensados para fondo claro
   —el naranja de los enlaces y el gris de las notas— quedaban ilegibles: 1.97:1 y
   2.29:1. Sobre oscuro van en claro. */
.arlt-pie a { color: #F6E2D8; }
.arlt-pie a:hover { color: var(--arlt-blanco); }
/* El botón del pie va en claro sobre el fondo oscuro. Necesita ganarle en
   especificidad a `.arlt-pie a`, que si no le pinta el texto de salmón sobre
   blanco: 1.4:1, ilegible. */
.arlt-pie .arlt-pie__cta,
.arlt-pie .arlt-pie__cta:hover { color: var(--arlt-tinta); }
.arlt-pie__cta { margin-top: 1.25rem; }

/* --- Cierre de página ----------------------------------------------------
   Las páginas interiores no tenían ningún botón: la única forma de actuar era un
   formulario de siete campos metido en el pie, que además se repetía en la portada
   y en contacto. Ahora cada página cierra con su propia invitación, que puede
   hablar del nivel que la familia venía leyendo, y el nivel viaja en el enlace. */
.arlt-cierre { padding-block: clamp(2.5rem, 1.5rem + 3vw, 3.5rem); }
.arlt-cierre__caja { background: var(--arlt-navy); color: var(--arlt-blanco); border-radius: clamp(20px, 2vw, 34px); padding: clamp(2rem, 1.25rem + 3vw, 3rem); text-align: center; }
.arlt-cierre h2 { font-size: var(--arlt-size-h2); margin: 0 0 .5rem; letter-spacing: -.02em; }
.arlt-cierre p { color: rgba(255,255,255,.85); margin: 0 auto 1.75rem; max-width: 46ch; }

/* --- Página de error ------------------------------------------------------ */
.arlt-error { text-align: center; padding-block: clamp(3rem, 2rem + 6vw, 6rem); }
.arlt-error__codigo { font-weight: 800; font-size: clamp(4rem, 2rem + 12vw, 8rem); line-height: 1; margin: 0; color: var(--arlt-accion-osc); letter-spacing: -.04em; }

/* --- Adaptación a pantallas chicas --------------------------------------- */
@media (max-width: 980px) { .arlt-niveles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .arlt-hero .arlt-caja, .arlt-inscripcion__grilla { grid-template-columns: 1fr; }
  .arlt-hero__sello { right: 1rem; bottom: -1rem; }
}
@media (max-width: 760px) {
  .arlt-duo, .arlt-duo--invertido { grid-template-columns: 1fr; }
  .arlt-duo--invertido > img { order: 0; }
}
@media (max-width: 520px) { .arlt-niveles { grid-template-columns: 1fr; } }

@media print {
  .arlt-cabecera, .arlt-nav, .arlt-pie, .arlt-boton { display: none; }
  body { color: #000; background: #fff; }
}

/* --- Movimiento ------------------------------------------------------------ */
/* Todo lo de acá abajo es adorno: si el JavaScript no corre, `html.arlt-js` no
   existe, nada se esconde y la página se lee igual. Y todo queda desactivado para
   quien pidió menos movimiento en la configuración de su sistema. */
@media (prefers-reduced-motion: no-preference) {

  /* Aparición al entrar en pantalla. El retraso de cada elemento lo escribe el
     JavaScript, que es el único que sabe en qué orden quedaron. */
  .arlt-js [data-anima] { opacity: 0; transform: translateY(1.75rem); }
  .arlt-js [data-anima][data-visible] { opacity: 1; transform: none; }
  /* La transición es para cuando NO hay GSAP. Con GSAP la librería escribe la
     opacidad en línea fotograma a fotograma, y si además hay una transición CSS
     sobre la misma propiedad el navegador persigue cada valor con 0,65 s de
     atraso: el resultado son textos que se quedan a mitad de camino, con la
     mitad del contraste que deberían tener. */
  .arlt-js:not(.arlt-gsap) [data-anima] {
    transition: opacity .65s cubic-bezier(.22,.7,.3,1), transform .65s cubic-bezier(.22,.7,.3,1);
  }

  /*
   * La portada arranca escondida desde el PRIMER PINTADO y la muestra el
   * JavaScript. Una sola transición de estado.
   *
   * Antes acá había una animación CSS que además se cancelaba al cargar GSAP, y
   * el resultado eran CUATRO estados seguidos: el navegador pintaba la foto, la
   * animación CSS la fundía, GSAP se cargaba y la cancelaba —la foto saltaba a
   * visible—, el script la escondía de nuevo y recién entonces entraba. Eso es lo
   * que se veía como que la pantalla carga dos veces, en todos los niveles.
   *
   * Tiene que estar en la hoja de estilo y colgar de `.arlt-js`, que lo pone un
   * script en el <head>: puesto desde el sitio.js, que va con `defer`, la página
   * ya se pintó y el parpadeo vuelve.
   */
  .arlt-js .arlt-hero .arlt-caja > div:not(.arlt-hero__foto) > *,
  .arlt-js .arlt-hero__marco img,
  .arlt-js .arlt-hero__sello { opacity: 0; }

  /*
   * Los bloques de foto + texto, por la misma razón. La foto se veía, GSAP le
   * aplicaba su estado inicial al recalcular posiciones —eso pasa cuando termina
   * de cargar cada imagen— y desaparecía a la vista; recién al bajar volvía.
   * Escondida desde el primer pintado, ese paso intermedio no existe.
   */
  .arlt-js .arlt-duo > img { clip-path: inset(0% 100% 0% 0%); }
  .arlt-js .arlt-duo--invertido > img { clip-path: inset(0% 0% 0% 100%); }
  .arlt-js .arlt-duo__texto > * { opacity: 0; }

}

/* Títulos que se pintan al recorrerlos. El degradado arranca corrido y GSAP lo
   trae hasta su lugar con el desplazamiento. Las dos puntas del degradado son
   colores opacos y legibles, así que aunque el movimiento nunca ocurra el título
   se lee igual —nunca queda invisible—. Cuelga de `.arlt-gsap`, que el
   JavaScript pone sólo si la librería cargó de verdad.

   SÓLO sobre el encabezado: `.arlt-seccion__titulo` es un <div> con un kicker y
   un <h2> adentro, y el recorte del fondo al texto no se hereda; puesto ahí,
   los dos hijos quedaban con color transparente y sin nada que los pintara. */
/* `:not(:has(...))` deja afuera a la página de contacto, que no lleva animación:
   el degradado se queda a medio traer si nadie lo mueve. */
.arlt-gsap body:not(:has(.arlt-contacto)) .arlt-seccion:not(.arlt-panel--navy) > .arlt-caja > h2.arlt-title,
.arlt-gsap body:not(:has(.arlt-contacto)) .arlt-seccion:not(.arlt-panel--navy) > .arlt-caja > .arlt-seccion__titulo > h2 {
  background-image: linear-gradient(90deg, var(--arlt-tinta) 50%, var(--arlt-gris) 50%);
  background-size: 220% 100%; background-position: 100% 0%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Cardo baja la cola de la `g` y la `j` más de lo que declara su métrica, y un
     fondo nunca se pinta fuera de la caja del elemento: con `background-clip: text`
     eso no recorta el fondo, recorta la LETRA, y la `g` de «Elegí» quedaba cortada
     al ras. Se agranda la caja hacia abajo y se descuenta del margen, así que el
     texto no se corre ni un píxel. Los dos selectores de arriba son `.arlt-title`,
     que tiene `margin: 0`, por eso el descuento es exacto. */
  padding-bottom: .16em; margin-bottom: -.16em;
}
.arlt-gsap .arlt-seccion:not(.arlt-panel--navy) > .arlt-caja > h2.arlt-title > *,
.arlt-gsap .arlt-seccion:not(.arlt-panel--navy) > .arlt-caja > .arlt-seccion__titulo > h2 > * { color: var(--arlt-tinta); }

/* Reacción al pasar el mouse. No depende del JavaScript ni de la aparición. */
.arlt-js:not(.arlt-gsap) .arlt-nivel a img { transition: transform .5s cubic-bezier(.22,.7,.3,1); }
.arlt-js:not(.arlt-gsap) .arlt-nivel a:hover img { transform: scale(1.05); }
.arlt-nivel a { overflow: hidden; }
/* La tarjeta NO usa `transform` para el hover, y es a propósito: GSAP anima el
   `transform` de esta misma tarjeta durante la entrada, y una transición CSS sobre
   la misma propiedad hace que el navegador persiga cada valor con 0,25 s de atraso
   —la tarjeta quedaba 28 px más abajo de donde va—. Atrasar la transición hasta el
   final no alcanza: el choque se muda al último salto. El hover va por la sombra y
   por un acercamiento de la foto, que GSAP no toca. */
.arlt-ficha { transition: box-shadow .25s ease; }
.arlt-ficha:hover { box-shadow: var(--arlt-sombra-alta); }
/* El acercamiento al pasar el mouse lo hace el JavaScript cuando GSAP está, y no
   una transición CSS: GSAP anima el `transform` de estas mismas fotos al entrar, y
   una transición sobre la misma propiedad hace que el navegador persiga cada valor
   con medio segundo de atraso. Es la cuarta vez que aparece este choque; la regla
   es que una transición CSS y GSAP no pueden tocar la misma propiedad del mismo
   elemento. Sin GSAP, la transición se encarga. */
.arlt-js:not(.arlt-gsap) .arlt-ficha img { transition: transform .5s cubic-bezier(.22,.7,.3,1); }
.arlt-js:not(.arlt-gsap) .arlt-ficha:hover img { transform: scale(1.045); }

/* Al imprimir no hay desplazamiento que dispare nada: sin esto la hoja sale en blanco. */
@media print {
  .arlt-js [data-anima] { opacity: 1 !important; transform: none !important; }
  .arlt-ticker { display: none; }
}

/* --- Pantalla de bienvenida ----------------------------------------------- */
/* Sale una sola vez por visita, no en cada página: para moverse dentro del sitio
   está la transición de abajo, y repetir el escudo en cada clic sería un peaje.
   Quién la muestra lo decide el script del <head>, que además la retira a los dos
   segundos pase lo que pase.

   Tres estados, y el de reposo es "no existe": si sólo se distinguiera entre
   `cargando` y el resto, el velo blanco aparecería en TODAS las páginas
   siguientes, que es justo lo que no tiene que pasar. */
.arlt-carga { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .arlt-cargando body { overflow: hidden; }
  .arlt-cargando .arlt-carga, .arlt-saliendo .arlt-carga {
    display: grid; justify-items: center; align-content: center; gap: 1.25rem;
    position: fixed; inset: 0; z-index: 100; background: var(--arlt-papel);
  }
  .arlt-saliendo .arlt-carga { pointer-events: none; animation: arlt-irse .45s ease forwards; }
  @keyframes arlt-irse { to { opacity: 0; visibility: hidden; } }

  /* El escudo se llena de color de abajo hacia arriba: abajo la copia apagada,
     encima la misma imagen a color, recortada y destapándose. */
  .arlt-carga__escudo { position: relative; display: block; width: 104px; height: 106px; }
  .arlt-carga__escudo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .arlt-carga__escudo img:first-child { filter: grayscale(1) opacity(.13); }

  /* Barra debajo del escudo. Va como pseudoelemento para no tocar el marcado de
     las once páginas, y es lo que le da presencia: el escudo solo es un dibujo a
     una tinta y el llenado casi no se nota. */
  /* La barra va en el flujo de la grilla, no clavada a un 50% del alto. Estaba
     posicionada contra el centro de la pantalla, y al sumarle el saludo debajo
     del escudo la grilla pasó a tener dos filas: el centro dejó de ser donde
     estaba el escudo y la barra quedó flotando entre las dos cosas. Como ítem
     de la grilla se acomoda sola, y `order` la pone entre el escudo y el
     saludo —un pseudoelemento `::after` es siempre el último hijo—. */
  .arlt-carga::after {
    content: ""; order: 1;
    width: 148px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--arlt-bordo) 50%, var(--arlt-linea) 50%) 100% 0 / 200% 100% no-repeat;
    animation: arlt-barra 1.1s cubic-bezier(.4,0,.2,1) infinite;
  }
  .arlt-carga__escudo { order: 0; }
  .arlt-carga__hola { order: 2; }
  @keyframes arlt-barra { from { background-position: 100% 0; } to { background-position: 0 0; } }
  .arlt-carga__lleno { clip-path: inset(100% 0% 0% 0%); animation: arlt-llenar 1.1s cubic-bezier(.4,0,.2,1) infinite; }
  @keyframes arlt-llenar {
    0%   { clip-path: inset(100% 0% 0% 0%); }
    55%  { clip-path: inset(0% 0% 0% 0%); }
    100% { clip-path: inset(0% 0% 100% 0%); }
  }

  /* --- El saludo en los tres idiomas --------------------------------------- */
  /* Lo pidió Bautista el 02/10: que al entrar salude en castellano, inglés y
     chino. VA ADENTRO DE LA PANTALLA QUE YA ESTABA, no en un cartel aparte: dos
     pantallas seguidas tapando el sitio es una de más.
     Los tres se turnan en el mismo lugar, 1,5 s cada uno, una sola vuelta. Se
     apilan en una grilla de una celda para que el ancho sea el del más largo y
     no se mueva nada al cambiar. */
  .arlt-carga__hola {
    /* CENTRADO. Los tres idiomas se apilan en la MISMA celda de la grilla, así
       que la caja mide lo que la palabra más larga —«Bienvenidos»— y las otras
       dos, alineadas al arranque, quedaban corridas a la izquierda respecto del
       escudo y de la barra. Medido a 1440: «Welcome» 19 px y «欢迎» 71 px. */
    display: grid; text-align: center; margin: 0; min-height: 2.5rem;
    font-family: var(--arlt-font-titulo); font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    color: var(--arlt-bordo); line-height: 1;
  }
  /* 3s EN TOTAL, UN SEGUNDO CADA SALUDO. Eran 4,5 —1,5 cada uno— y con el medio
     segundo de salida daban 5 de pantalla antes de ver el sitio. Lo pidió Mateo
     el 13/10: «el tiempo del mensaje inicial, lo bajaría un poco». Un segundo
     alcanza para leer «Bienvenidos», «Welcome» y «欢迎».
     LOS PORCENTAJES DEL `@keyframes` NO SE TOCAN: están en proporción, así que
     el cruce entre uno y otro sigue cayendo en el mismo lugar relativo. Si se
     vuelve a cambiar la duración, cambiar también los dos `animation-delay`,
     que tienen que ser un tercio y dos tercios del total. */
  .arlt-carga__hola span {
    grid-area: 1 / 1; opacity: 0;
    animation: arlt-hola 3s ease-in-out both;
  }
  .arlt-carga__hola span:nth-child(2) { animation-delay: 1s; }
  .arlt-carga__hola span:nth-child(3) { animation-delay: 2s; }
  /* SE CRUZAN, no se turnan con un hueco en el medio. Cada uno se queda entero
     hasta el 33%, que es el momento exacto en que el siguiente empieza a
     aparecer —1,5 s de 4,5—, y recién ahí se desvanece mientras el otro sube.
     Medido: con el fundido terminando ANTES del 33% quedaban 300 ms en los que
     no se veía ninguno de los tres, y eso se lee como un parpadeo. */
  @keyframes arlt-hola {
    0%       { opacity: 0; }
    6%, 33%  { opacity: 1; }
    40%, 100% { opacity: 0; }
  }
  .arlt-carga__hola span:nth-child(3) { animation-name: arlt-hola-ultimo; }
  /* El último no se desvanece: atrás no viene ninguno, y un hueco en blanco antes
     de que se vaya la pantalla se ve como un error. */
  @keyframes arlt-hola-ultimo {
    0%  { opacity: 0; }
    6%, 100% { opacity: 1; }
  }
}

/* --- Transición entre páginas ---------------------------------------------- */
/* Con `@view-transition` el propio navegador saca una foto de la página que se va
   y de la que llega y las cruza. No lleva JavaScript, el botón de atrás sigue
   funcionando y los enlaces compartidos también: donde no está implementado, el
   bloque entero se ignora y se navega como siempre. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: arlt-salir .22s ease both; }
  ::view-transition-new(root) { animation: arlt-lente .5s cubic-bezier(.3,0,.2,1) both; }
  @keyframes arlt-salir { to { opacity: 0; } }
  @keyframes arlt-lente {
    from { clip-path: circle(0% at 50% 42%); opacity: .4; }
    to   { clip-path: circle(85% at 50% 42%); opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* El campo reacciona al tocarlo: el desplegable en sí lo dibuja el sistema
   operativo y no se puede animar por dentro. */
.arlt-campo select, .arlt-campo input, .arlt-campo textarea {
  transition: border-color .2s ease, box-shadow .2s ease;
}
.arlt-campo select:focus-visible, .arlt-campo input:focus-visible, .arlt-campo textarea:focus-visible {
  border-color: var(--arlt-accion);
}

/* --- Página de gracias ----------------------------------------------------- */
/* Era el mismo bloque suelto que la página de error. Acá la persona acaba de
   dejar sus datos: además de confirmar, conviene decirle QUÉ va a pasar, o queda
   esperando sin saber cuánto. */
.arlt-gracias { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.arlt-gracias__caja {
  max-width: 44rem; margin-inline: auto; text-align: center;
  background: var(--arlt-blanco); border: 1px solid var(--arlt-linea);
  border-radius: var(--arlt-r); box-shadow: var(--arlt-sombra);
  padding: clamp(2rem, 1.25rem + 3vw, 3.5rem);
}
.arlt-gracias__caja .arlt-kicker { margin: 0; }
.arlt-gracias__caja .arlt-title { margin: .25rem 0 0; }
.arlt-gracias__caja .arlt-lead { margin: 1rem auto 0; max-width: 34rem; }

/* El tilde se dibuja solo: el aro primero y la marca después. */
.arlt-gracias__tilde { display: block; width: 74px; height: 74px; margin: 0 auto 1.5rem; }
.arlt-gracias__tilde svg { width: 100%; height: 100%; display: block; overflow: visible; }
.arlt-gracias__aro, .arlt-gracias__marca {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.arlt-gracias__aro { stroke: var(--arlt-linea); stroke-width: 3; }
.arlt-gracias__marca { stroke: var(--arlt-accion); stroke-width: 4.5; }
@media (prefers-reduced-motion: no-preference) {
  .arlt-gracias__aro { stroke-dasharray: 152; stroke-dashoffset: 152;
    animation: arlt-trazar .7s cubic-bezier(.4,0,.2,1) .15s forwards; transform: rotate(-90deg); transform-origin: 50% 50%; }
  .arlt-gracias__marca { stroke-dasharray: 40; stroke-dashoffset: 40;
    animation: arlt-trazar .45s cubic-bezier(.4,0,.2,1) .75s forwards; }
  @keyframes arlt-trazar { to { stroke-dashoffset: 0; } }
  /* El resto entra detrás del tilde. Es una animación de CSS sola: esta página no
     tiene nada que esconder ni que rescatar, así que no pasa por el JavaScript. */
  .arlt-gracias__caja > *:not(.arlt-gracias__tilde) {
    animation: arlt-entrar-gracias .6s cubic-bezier(.22,.7,.3,1) backwards;
  }
  .arlt-gracias__caja > *:nth-child(2) { animation-delay: .35s; }
  .arlt-gracias__caja > *:nth-child(3) { animation-delay: .45s; }
  .arlt-gracias__caja > *:nth-child(4) { animation-delay: .55s; }
  .arlt-gracias__caja > *:nth-child(5) { animation-delay: .7s; }
  .arlt-gracias__caja > *:nth-child(6) { animation-delay: .85s; }
  .arlt-gracias__caja > *:nth-child(7) { animation-delay: .95s; }
  @keyframes arlt-entrar-gracias { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
}

.arlt-gracias__pasos {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; gap: .875rem; text-align: left; max-width: 30rem; margin-inline: auto;
}
.arlt-gracias__pasos li { display: flex; gap: .875rem; align-items: flex-start; font-size: .9375rem; color: var(--arlt-gris); }
.arlt-gracias__pasos b { color: var(--arlt-tinta); }
.arlt-gracias__num {
  flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--arlt-crema); color: var(--arlt-accion);
  display: grid; place-items: center; font-weight: 800; font-size: .8125rem;
}
.arlt-gracias__atajo { margin: 2rem 0 0; font-size: .9375rem; color: var(--arlt-gris); }
.arlt-gracias__acciones { margin: 1.5rem 0 0; }

/* --- Desplegable propio ---------------------------------------------------- */
/* Sólo existe cuando el JavaScript lo arma, y sólo con mouse: en celular queda el
   selector del sistema, que es mejor. El <select> real sigue adentro —invisible
   pero presente— porque es el que manda el dato y el que el navegador valida. */
.arlt-elegir { position: relative; }
.arlt-elegir__real {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0;
}
.arlt-elegir__boton {
  position: relative; z-index: 1; width: 100%; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font-family: inherit; font-size: 1rem; padding: .8125rem .875rem;
  border: 1px solid var(--arlt-linea); border-radius: var(--arlt-r-chico);
  background: var(--arlt-blanco); color: var(--arlt-tinta);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.arlt-elegir__boton:hover { border-color: var(--arlt-gris); }
.arlt-elegir[data-abierta] .arlt-elegir__boton,
.arlt-elegir__boton[aria-expanded="true"] { border-color: var(--arlt-accion); }
.arlt-elegir--sin-elegir .arlt-elegir__valor { color: var(--arlt-gris); }
.arlt-elegir__flecha {
  flex: 0 0 auto; width: 12px; height: 8px; background: currentColor;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  color: var(--arlt-gris); transition: transform .28s cubic-bezier(.22,.7,.3,1);
}
.arlt-elegir__boton[aria-expanded="true"] .arlt-elegir__flecha { transform: rotate(180deg); }

.arlt-elegir__lista {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .375rem);
  list-style: none; margin: 0; padding: .3125rem;
  max-height: 16rem; overflow-y: auto;
  background: var(--arlt-blanco); border: 1px solid var(--arlt-linea);
  border-radius: var(--arlt-r-chico); box-shadow: var(--arlt-sombra-alta);
}
.arlt-elegir__lista li {
  padding: .5625rem .6875rem; border-radius: calc(var(--arlt-r-chico) - .3125rem);
  cursor: pointer; font-size: .9375rem; color: var(--arlt-tinta);
  transition: background .14s ease, color .14s ease;
}
.arlt-elegir__lista li:hover { background: var(--arlt-crema); }
.arlt-elegir__lista li:focus-visible { outline: 2px solid var(--arlt-accion); outline-offset: -2px; background: var(--arlt-crema); }
.arlt-elegir__lista li[aria-selected="true"] { color: var(--arlt-accion); font-weight: 700; }
.arlt-elegir__lista li[aria-selected="true"]::after { content: " ✓"; }
/* El tilde marca una elección; en el renglón de "Elegí un nivel" no hay ninguna. */
.arlt-elegir__op--vacia::after { content: none !important; }
.arlt-elegir__op--vacia[aria-selected="true"] { font-weight: 400; color: var(--arlt-gris); }
.arlt-elegir__op--vacia { color: var(--arlt-gris); }

/* Dentro de la caja blanca sobre el bordó, el foco y lo elegido usan el rojo
   oscuro de la paleta, que es el que contrasta ahí. */
.arlt-inscripcion__caja .arlt-elegir__lista li[aria-selected="true"] { color: var(--arlt-inicial); }

/* --- Instagram y Facebook, en la barra -------------------------------------- */
/* Lo pidió el colegio: los logos de las dos redes «en una esquina», tocables, cada
   uno a su página. Van DENTRO de la barra, que es sticky: se ven en cualquier
   página y en cualquier punto del scroll, arriba a la derecha, sin taparle nada al
   contenido. Cada una con el color con el que viene su aplicación.
   WhatsApp NO está acá: tiene su propio botón flotante, más abajo en este archivo.
   No es «seguinos», es «escribinos» —es la acción— y por eso ocupa una esquina
   para él solo, que es como lo pidió Zoe. */
.arlt-cabecera__fin { display: flex; align-items: center; gap: .625rem; flex: 0 0 auto; }
.arlt-redes { display: flex; align-items: center; gap: .125rem; }
.arlt-redes a {
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  display: grid; place-items: center;
  transition: background .2s ease, filter .2s ease;
}
.arlt-redes svg { width: 1.1875rem; height: 1.1875rem; fill: currentColor; }
/* Instagram no tiene un color plano: lleva su degradado, definido dentro del
   propio svg y aplicado desde acá para que la regla del menú abierto lo pise. */
.arlt-redes__fb { color: #1877F2; }
.arlt-redes__ig svg path { fill: url(#arlt-ig); }
/* Al pasar por encima no se les cambia el color de marca: se les pone la misma
   pastilla crema que usa el resto de la barra y se saturan un poco. */
.arlt-redes a:hover, .arlt-redes a:focus-visible { background: var(--arlt-crema); filter: saturate(1.2); }

/* Estas tres medidas van ACÁ y no en la sección de la cabecera: la regla base de
   arriba está más abajo en el archivo que aquellos bloques, y con la misma
   especificidad gana la última. Puestas allá no hacían nada, medido. */
@media (max-width: 620px) {
  .arlt-redes a { width: 2rem; height: 2rem; }
  .arlt-redes svg { width: 1.0625rem; height: 1.0625rem; }
}
/* Medido: a 414 px el nombre del colegio y los íconos se tocaban (con tres; con
   dos sobra más, pero los escalones se dejan por si vuelve un tercero). Acá bajan
   otro escalón —junto con el lockup— y el hueco vuelve a ser positivo en los
   anchos de celular que se usan de verdad, 360 incluido. */
@media (max-width: 430px) {
  .arlt-cabecera__fin { gap: .25rem; }
  .arlt-redes { gap: 0; }
  .arlt-redes a { width: 1.75rem; height: 1.75rem; }
  .arlt-redes svg { width: 1rem; height: 1rem; }
  /* El botón de idioma baja el mismo escalón que las redes y queda del mismo
     tamaño que ellas. Sin esto, a 360 px el hueco contra el nombre del colegio
     quedaba en 4 px: no se tocan, pero se ven apretados. */
  .arlt-idiomas__boton { height: 1.75rem; padding-inline: .3125rem; }
  .arlt-idiomas__globo { width: 1rem; height: 1rem; }
}
/* Un escalón más para los celulares más angostos. 360 px es un tamaño real —hay
   Android de sobra— y es el mínimo que barre `pruebas/sin-desborde.html`. El
   nombre del colegio se ajusta acá, lejos del resto de sus reglas, por lo mismo
   que las de arriba: éste es el último bloque del archivo y es el que gana. */
@media (max-width: 380px) {
  .arlt-logo__nombre { font-size: .8125rem; }
  .arlt-logo { gap: .375rem; }
  .arlt-redes a { width: 1.625rem; height: 1.625rem; }
  .arlt-redes svg { width: .9375rem; height: .9375rem; }
}
/* Abajo de 340 px ya no entran las dos cosas sin que el escudo y los íconos
   queden de juguete. Se va el nombre escrito y queda el escudo, que es lo que
   identifica al colegio; el nombre completo está en el encabezado de la página,
   una línea más abajo. Es una red para pantallas que casi no existen: el mínimo
   que barrimos es 360 px, y ahí el nombre se mantiene. */
@media (max-width: 340px) {
  .arlt-logo__nombre { display: none; }
}

/* --- Agenda de entrevistas -------------------------------------------------- */
/* La agenda vive DENTRO del formulario de consulta, enganchada al nivel que ese
   formulario ya pregunta. No es una sección aparte ni repite la pregunta: son el
   mismo pedido, y separarlos obligaba a la familia a decidir cuál de los dos
   formularios le tocaba antes de poder hacer nada.
   Va metida hacia adentro y con un filo de color para que se lea como un paso
   del formulario y no como otro bloque más. */
/* El aire de arriba y de abajo NO es decorativo. El formulario separa sus
   campos con .875rem, y con ese mismo respiro el calendario quedaba pegado al
   desplegable de nivel y al «Mensaje»: se leía como parte del campo anterior en
   vez de como un paso aparte. Un bloque que adentro tiene una grilla de 31
   celdas necesita más borde que un campo de texto. */
.arlt-agenda {
  margin: .75rem 0; padding: 1.25rem 0 1.5rem 1.25rem;
  border-left: 3px solid var(--arlt-color-pag, var(--arlt-accion));
}
/* EN EL CELULAR EL FORMULARIO RESPIRA. Medido el 12/10 a 390 px: tres cajas
   anidadas —la caja de la sección, el panel bordó y la tarjeta blanca— se
   comían 148 px de relleno entre las dos orillas, y al formulario le quedaban
   227 de 390. El calendario no entraba y se desbordaba de su propia tarjeta.
   Con esto le quedan 278. En escritorio no cambia nada: ahí el relleno grande
   es lo que le da aire al panel. */
@media (max-width: 30rem) {
  .arlt-inscripcion__caja-ext { padding: 1rem; }
  .arlt-inscripcion__caja { padding: 1.125rem; }
}

/* Y EL CALENDARIO SE BANCA UN CONTENEDOR ANGOSTO. Siete columnas con relleno
   de tarjeta no entran en 200 px: se aprieta todo un punto antes que dejar que
   se salga. Es el mismo `@container`, mirando para el otro lado. */
@container (max-width: 19rem) {
  .arlt-cal { padding: .75rem .625rem; gap: .5rem; }
  .arlt-cal__semana, .arlt-cal__dias { gap: .125rem; }
  .arlt-cal__dia { font-size: 1rem; }
  .arlt-cal__semana span { font-size: .6875rem; }
  .arlt-cal__flecha { width: 1.75rem; height: 1.75rem; font-size: 1rem; }
}

.arlt-agenda { container-type: inline-size; }
.arlt-agenda__invita { margin: 0 0 .625rem; font-weight: 700; color: var(--arlt-tinta); font-size: 1.0625rem; }
/* EL AVISO DE QUE LOS HORARIOS SON DE EJEMPLO. Va en el HTML y no en el
   JavaScript a propósito: se ve desde que carga la página, antes de que la
   familia toque nada. SE BORRA junto con el `data-arlt-agenda-ejemplo` cuando
   la agenda de verdad esté andando. */
.arlt-agenda__ejemplo {
  margin: 0 0 .875rem; font-size: .875rem; line-height: 1.45; color: var(--arlt-gris);
  border-left: 3px solid var(--arlt-linea); padding-left: .75rem;
}
.arlt-agenda__extra:not([hidden]) { display: grid; gap: 1.125rem; margin-top: 1.5rem; }
.arlt-agenda__turnos { margin-top: 0; }
/* Sin línea acá: la separación entre «agendá» y «o escribinos» la hace
   `__corte`, y dos reglas seguidas se leen como un error de maqueta. Lo que
   marca que el formulario de la entrevista es el paso siguiente es el cartel
   del turno elegido, que aparece recién al tocar un horario. */
.arlt-agenda__turnos:not(:empty) { padding-bottom: .5rem; }
.arlt-agenda__vacio { color: var(--arlt-gris); margin: 0; }

/* --- El calendario --------------------------------------------------------- */
/* Un mes de verdad y no una lista de días: con la lista, un colegio con un mes
   cargado daba treinta bloques que tapaban el resto del formulario y no se
   entendía de un vistazo qué días hay. Acá los días con turno se pueden tocar y
   llevan un punto; el resto está apagado y no recibe toques.
   Calendario y horarios van lado a lado donde entra, porque son un solo gesto:
   elijo el día, veo las horas de ese día. */
/* EL CALENDARIO SE DESPEGA DEL FORMULARIO Y ES MÁS GRANDE (12/10, elegido por
   Mateo entre cuatro bocetos). Estaba suelto entre los campos y pasaba
   desapercibido: es la pieza que convierte una consulta en una entrevista
   agendada, así que tiene que verse. Va en su propio recuadro, con los números
   y el mes un escalón más grandes. */
/* APILADO POR OMISIÓN, EN DOS COLUMNAS SÓLO SI ENTRA — y lo decide el ancho
   del CALENDARIO, no el de la ventana. Esto estaba cortado en 620 px de
   viewport y era la palanca equivocada: el calendario vive adentro de una
   tarjeta que mide la mitad de la pantalla, así que en una notebook de 1024
   quedaba en dos columnas dentro de 425 px y las celdas de los días bajaban a
   25 px — más chicas que en un teléfono. Medido el 12/10 en las dos páginas.

   El orden de las reglas no es casual: lo apilado es lo DE BASE y las dos
   columnas van adentro del `@container`. Un navegador que no entienda
   `@container` ignora esa regla y se queda con lo apilado, que anda en
   cualquier ancho. Al revés se quedaría con las dos columnas, que es el caso
   que rompe. */
.arlt-cal {
  display: grid; gap: .625rem 1.75rem; align-items: start;
  /* `minmax(0, 1fr)` y no `1fr`: el mínimo de `1fr` es el min-content, y acá el
     min-content de la cabecera —dos flechas más el título del mes— estiraba la
     columna y con ella TODO el calendario, que se salía de su propia tarjeta.
     Se ve raro escrito, pero es la diferencia entre «ocupá lo que haya» y
     «ocupá lo que necesites aunque no entre». */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cabecera" "semana" "dias" "horas";
  border: 1px solid var(--arlt-linea); border-radius: 14px;
  padding: 1.125rem 1.25rem; background: var(--arlt-papel);
}
@container (min-width: 36rem) {
  .arlt-cal {
    grid-template-columns: minmax(0, 22rem) minmax(0, 12rem);
    grid-template-areas: "cabecera horas" "semana horas" "dias horas";
  }
}
.arlt-cal__cabecera {
  grid-area: cabecera; display: flex; align-items: center; justify-content: center;
  gap: .25rem; margin-bottom: .25rem;
}
 /* `min-width` en ch y no en rem: lo que tiene que entrar es «septiembre de
    2026», y medido en caracteres no se va de rango cuando el contenedor es
    angosto. Con 9.5rem fijos empujaba la tarjeta hacia afuera en el celular. */
.arlt-cal__mes {
  font-family: var(--arlt-font-titulo); font-weight: 700;
  /* `cqi` es 1% del ancho del CONTENEDOR, no de la ventana: el mes se achica
     cuando la tarjeta es angosta y vuelve a 20 px cuando hay lugar, sin un
     corte a mano. Hace falta porque «septiembre de 2026» mide 18 caracteres y
     a 20 px no entra entre las dos flechas en un celular: se partía en dos
     renglones y el encabezado quedaba torcido. */
  font-size: clamp(.875rem, 4.5cqi, 1.25rem);
  white-space: nowrap;
  color: var(--arlt-tinta); min-width: 0; flex: 1; text-align: center;
}
.arlt-cal__flecha {
  font-family: inherit; font-size: 1.125rem; line-height: 1;
  width: 2rem; height: 2rem; border-radius: 999px; border: 0;
  background: none; color: var(--arlt-tinta); cursor: pointer;
  transition: background .2s ease;
}
.arlt-cal__flecha:hover:not(:disabled) { background: var(--arlt-crema); }
/* Las flechas caminan de a un mes y se apagan recién en los extremos: antes del
   primer mes con turnos y después del último. Saltar de un mes con turnos al
   siguiente con turnos dejaba las dos apagadas cuando había un solo mes
   cargado, y se veían rotas. Apagadas pero a la vista, para que no salte la
   maqueta. */
.arlt-cal__flecha:disabled { opacity: .25; cursor: default; }

.arlt-cal__semana, .arlt-cal__dias {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem;
}
.arlt-cal__semana { grid-area: semana; }
.arlt-cal__semana span {
  text-align: center; font-size: .8125rem; font-weight: 700;
  color: var(--arlt-gris); padding-bottom: .25rem;
}
.arlt-cal__dias { grid-area: dias; }
/* LA TIPOGRAFÍA DEL CANVA también acá (12/10), como ya se hizo con los
   niveles del menú (SOL-827) y los turnos de la portada (SOL-828): Cardo en el
   mes, en los números de los días y en los horarios. Es lo que le da al
   calendario el aire del material del colegio en vez de parecer un control
   genérico del navegador. */
.arlt-cal__dia {
  position: relative; min-width: 0; font-family: var(--arlt-font-titulo); font-size: 1.125rem;
  /* Cuadrado: una celda de calendario que cambia de alto según el mes se ve
     torcida, y el círculo del día elegido dejaría de ser un círculo. */
  aspect-ratio: 1; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: none;
  color: var(--arlt-tinta); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.arlt-cal__dia:hover:not(.es-apagado):not(.es-elegido) {
  background: color-mix(in srgb, var(--arlt-color-pag, var(--arlt-accion)) 16%, transparent);
}
/* UN DÍA CON TURNO SE VE LLENO. Antes se marcaba con un punto de 4 px debajo
   del número: estaba, pero había que buscarlo, y la diferencia entre un día
   disponible y uno apagado era ese punto más un gris apenas distinto. Ahora el
   día con turno tiene fondo propio y se lee de un vistazo cuáles se pueden
   elegir, que es la única pregunta que uno le hace a este calendario.
   El fondo es el color de la página al 7%: alcanza para separarlo del blanco
   sin competir con el día elegido, que va en el color lleno. */
.arlt-cal__dia:not(.es-apagado) {
  background: color-mix(in srgb, var(--arlt-color-pag, var(--arlt-accion)) 7%, transparent);
  font-weight: 700;
}
.arlt-cal__dia.es-elegido {
  background: var(--arlt-color-pag, var(--arlt-accion)); color: var(--arlt-blanco); font-weight: 700;
}
.arlt-cal__dia.es-apagado { color: var(--arlt-linea); cursor: default; background: none; }

/* Los horarios no se estiran a todo el ancho que sobre: un botón de 27rem que
   dice «10:00» se lee como un error de maqueta. */
/* ABAJO VAN EN GRILLA, NO EN UNA FILA QUE SE DESPLAZA. Era
   `grid-auto-flow: column` con `overflow-x: auto`: ocupaba menos alto, pero
   escondía horarios detrás de un desplazamiento lateral que no se ve que está.
   En un bloque cuyo trabajo es que elijas uno, esconder la mitad es caro. */
/* ABAJO SE REPARTEN EL ANCHO ENTERO, y va en FLEX y no en grilla.
   Con `repeat(auto-fit, minmax(4rem, 1fr))` quedaban apretados contra la
   izquierda con la mitad del renglón vacío: `auto-fit` sólo colapsa las
   columnas VACÍAS, y acá no hay ninguna vacía porque el rótulo del día
   —«MIÉRCOLES, 14 DE OCTUBRE»— va con `grid-column: 1 / -1` y las cruza
   todas. Medido: cinco columnas de 70 px, cuatro botones, 79 px muertos.
   En flex el rótulo corta el renglón con `flex-basis: 100%` y los botones se
   reparten lo que queda, sin depender de cuántos horarios tenga ese día.
   EL TOPE DE 11rem es el motivo por el que esto no era flex desde el principio:
   sin él, un día con UN SOLO horario deja un botón de 380 px que dice «09:30»
   y se lee como un error de maqueta. */
.arlt-cal__horas {
  grid-area: horas; display: flex; flex-wrap: wrap; gap: .5rem;
  align-content: start; margin-top: .5rem;
}
.arlt-cal__horas .arlt-cal__dia-elegido { flex: 0 0 100%; }
.arlt-cal__horas .arlt-cal__hora { flex: 1 1 4rem; max-width: 11rem; }
@container (min-width: 36rem) {
  /* Al costado vuelven a ser una columna: ahí el ancho lo da la columna, no
     los botones. */
  .arlt-cal__horas { display: grid; grid-template-columns: 1fr; margin-top: 0; }
  .arlt-cal__horas .arlt-cal__hora { max-width: none; }
}
.arlt-cal__dia-elegido {
  margin: 0 0 .25rem; font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--arlt-color-pag, var(--arlt-accion));
}
.arlt-cal__hora {
  font-family: var(--arlt-font-titulo); font-size: 1.0625rem; font-weight: 700; text-align: center;
  /* 48 px de alto. Eran 44, el mínimo para que un dedo le acierte; se subieron
     junto con el resto del formulario (12/10). */
  min-height: 3rem; padding: .75rem 1.125rem;
  border-radius: var(--arlt-r-chico); border: 1px solid var(--arlt-linea);
  background: var(--arlt-blanco); color: var(--arlt-tinta); cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.arlt-cal__vacio {
  margin: 0; font-size: .875rem; color: var(--arlt-gris); line-height: 1.5;
}
.arlt-cal__hora:hover { border-color: var(--arlt-gris); }
.arlt-cal__hora.es-elegida {
  background: var(--arlt-color-pag, var(--arlt-accion));
  border-color: var(--arlt-color-pag, var(--arlt-accion)); color: var(--arlt-blanco);
}
/* El rótulo del día elegido ocupa toda la fila cuando los horarios están
   debajo; al lado, va arriba de la columna y no hace falta. */
.arlt-cal__dia-elegido { grid-column: 1 / -1; }
/* `:not([hidden])` NO es decorativo. `display: grid` en una clase le gana a la
   regla del navegador para `[hidden]`, que es más débil: sin esto el formulario
   se ve SIEMPRE, desde antes de elegir un horario, y el cartel del turno
   elegido queda como una barra gris vacía. Pasó. */

.arlt-agenda__par { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.arlt-agenda__elegido {
  margin: 1rem 0 0; font-weight: 700; color: var(--arlt-tinta);
  padding: .8125rem 1rem; border-radius: var(--arlt-r-chico);
  background: var(--arlt-crema);
}
/* Por las dudas: un cartel sin texto no se pinta. */
.arlt-agenda__elegido:empty { display: none; }
/* El aviso de que el turno se ocupó no es un error de la familia, así que no se
   pinta de rojo alarma: es información. */
.arlt-agenda__aviso {
  margin: 1rem 0 0; padding: .8125rem 1rem; border-radius: var(--arlt-r-chico);
  background: #FDECEC; color: var(--arlt-inicial); border: 1px solid #F3C9C9;
}
.arlt-agenda__listo {
  margin: 1rem 0 0; padding: 1rem 1.125rem; border-radius: var(--arlt-r-chico);
  background: #ECF7EF; border: 1px solid #C6E6CF; color: #1D5A32; font-weight: 600;
}
@media (max-width: 520px) { .arlt-agenda__par { grid-template-columns: 1fr; } }

/* --- Botón de WhatsApp ----------------------------------------------------- */
/* Fijo abajo a la derecha, que es la esquina donde todo el mundo busca el
   WhatsApp de un negocio. Arriba se probó —es donde lo había pedido Zoe— y
   obligaba a reservarle un hueco en el título de la portada para que no se lo
   tapara. Abajo no compite con nada.
   El verde es el de la marca (#25D366); el ícono en blanco da 3,2:1 sobre ese
   fondo, poco para texto pero suficiente para una silueta que además lleva su
   `aria-label`. */
.arlt-wa {
  position: fixed; z-index: 35;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  height: 3.75rem; border-radius: 999px;
  display: inline-flex; align-items: center;
  background: #25D366; color: var(--arlt-blanco);
  box-shadow: 0 6px 18px rgba(0,0,0,.24);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.arlt-wa svg { width: 2rem; height: 2rem; fill: currentColor; flex: 0 0 auto; margin: 0 .875rem; }

/* El latido. Es un aro que sale del botón y se desvanece, no el botón que
   crece: si creciera, al tocarlo en el celular el dedo podría caer afuera justo
   cuando se está encogiendo.
   El aro se dibuja con `box-shadow` y no con un elemento más, así que no ocupa
   lugar ni recibe toques. Va pegado al borde derecho y con el alto del botón,
   para quedar centrado en el ícono tanto con la frase desplegada como sin ella.
   Ciclo largo a propósito: un pulso rápido no llama la atención, molesta. */
.arlt-wa::after {
  content: ""; position: absolute; right: 0; top: 0;
  width: 3.75rem; height: 3.75rem; border-radius: 999px;
  pointer-events: none;
  animation: arlt-wa-latido 2.8s cubic-bezier(.22,.7,.3,1) infinite;
}
@keyframes arlt-wa-latido {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  65%  { box-shadow: 0 0 0 1.125rem rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
/* Deja de latir cuando ya consiguió lo que buscaba: con la frase desplegada, o
   cuando la persona lo está mirando de cerca. Seguir insistiendo ahí es ruido. */
.arlt-wa.es-saluda::after,
.arlt-wa:hover::after,
.arlt-wa:focus-visible::after { animation: none; }
.arlt-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }

/* La frase sale DEL BOTÓN: el texto arranca con ancho cero y se despliega hacia
   la izquierda, que es para donde hay lugar —el botón está pegado al borde
   derecho—. No es un globo aparte que aparece al lado: es el mismo botón que se
   estira, así que no hay dos cosas que mirar.
   `max-width` y no `width`: el texto decide cuánto mide y la animación sólo le
   corre el techo. Con `width` habría que saber de antemano cuánto ocupa la
   frase, y cambia con la tipografía y con el idioma del navegador. */
.arlt-wa__texto {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-weight: 700; font-size: .9375rem; letter-spacing: .01em;
  padding-left: 0;
  transition: max-width .5s cubic-bezier(.22,.7,.3,1),
              opacity .35s ease, padding-left .5s cubic-bezier(.22,.7,.3,1);
}
.arlt-wa.es-saluda .arlt-wa__texto,
.arlt-wa:hover .arlt-wa__texto,
.arlt-wa:focus-visible .arlt-wa__texto {
  max-width: 16rem; opacity: 1; padding-left: 1.25rem;
}

/* Con el menú a pantalla completa abierto quedaría flotando encima de los
   enlaces. Se esconde y deja de recibir toques. */
body:has(.arlt-cabecera[data-abierto="true"]) .arlt-wa { opacity: 0; pointer-events: none; }
/* Y mientras alguien completa el formulario en un celular se corre: abajo es lo
   único que puede quedar encima del botón de enviar justo cuando lo va a tocar.
   Vuelve solo al salir del campo. */
@media (max-width: 900px) {
  body:has(.arlt-form :focus) .arlt-wa { opacity: 0; pointer-events: none; }
}
/* Para que no tape el final de la página —el botón de enviar, o la firma del
   pie— la página reserva su alto abajo de todo. */
.arlt-pie { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
@media (max-width: 600px) { .arlt-copy { padding-bottom: 4.75rem; } }

/* Quien pide menos movimiento ve la frase igual, pero puesta y no desplegada: lo
   que molesta es el movimiento, no el mensaje. */
@media (prefers-reduced-motion: reduce) {
  .arlt-wa, .arlt-wa__texto { transition: none; }
  .arlt-wa::after { animation: none; }
}

/* Con el menú desplegable abierto la barra se pinta de claro y los íconos siguen
   siendo legibles; no hace falta esconderlos como al botón flotante. */