/* ---------- 1 · HERO del nivel: foto a sangre + 6 hechos al pie ---------- */
.hero--nivel{ min-height:600px; }
.hero__foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 40%;
  transform:scale(1.04); animation:hero-asienta 6s cubic-bezier(.22,1,.28,1) both;
}
@keyframes hero-asienta{ to{ transform:scale(1); } }
.hero--nivel .hero__velo{
  background:
    linear-gradient(to top,    rgba(12,31,79,.86) 0%, rgba(12,31,79,.46) 34%, rgba(12,31,79,0) 64%),
    linear-gradient(to bottom, rgba(12,31,79,.66) 0%, rgba(12,31,79,.20) 14%, rgba(12,31,79,0) 30%),
    linear-gradient(to right,  rgba(12,31,79,.34) 0%, rgba(12,31,79,0) 55%);
}
/* El hero es una rejilla: el copy queda en flujo, pegado arriba de los hechos. */
.hero--nivel{ display:grid; grid-template-rows:1fr auto; }
.hero--nivel .hero__copy{ position:relative; inset:auto; align-self:end; padding-bottom:clamp(18px,3vh,30px); z-index:1; }
.hero--nivel .hero__h1{ max-width:none; font-size:min(var(--t-h1), 3.3vw); }
.hero--nivel .hero__apoyo{ margin-top:14px; }
/* En ≤900 el CTA del header se esconde: sin esto la mamá no tiene cómo agendar. */
.hero__ir{ display:none; }

.hechos{ position:relative; z-index:1; margin:0; color:var(--blanco); }
.hechos__marco{ border-top:1px solid rgba(249,198,88,.55); padding:clamp(14px,2.2vh,22px) clamp(200px,19vw,270px) clamp(18px,3vh,30px) 0; /* derecha: reserva de Porfirio */ }
.hechos__lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:clamp(10px,1.2vw,20px);
}
.hecho{ display:grid; gap:5px; min-width:0; }

.hecho dt{ font-family:var(--f-display); font-weight:500; font-size:clamp(17px,1.72vw,25px); line-height:1.1; letter-spacing:-.01em; overflow-wrap:break-word; }
.hecho dt small{ font-size:.58em; font-weight:400; letter-spacing:0; }
.hecho dd{ margin:0; font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.78); line-height:1.3; }
/* entran en escalera cuando la página carga */
.hecho{ opacity:0; transform:translateY(10px); animation:hecho-entra .8s cubic-bezier(.22,1,.28,1) both; animation-delay:calc(.9s + var(--i,0) * .11s); }
@keyframes hecho-entra{ to{ opacity:1; transform:none; } }
html.intro-viva .hecho{ animation-delay:calc(3.75s + var(--i,0) * .11s); }

/* ---------- Encabezado común de sección (eyebrow con línea + título = H1) ---------- */
.niv__enca{ margin-bottom:clamp(10px,1.7vh,24px); }
.niv__ante{
  margin:0 0 10px; font-size:var(--t-label); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
}
.niv__ante::before{ content:""; display:block; width:72px; height:1px; margin-bottom:11px; background:var(--navy); transform:scaleX(0); transform-origin:left center; }
.niv__ante--oro{ color:rgba(255,255,255,.85); }
.niv__ante--oro::before{ background:var(--oro-vivo); }
html:not(.js-traza) .niv__ante::before{ transform:none; }
.se-traza .niv__ante::before{ animation:cta-traza 1.15s cubic-bezier(.22,1,.28,1) .1s both; }
.niv__tit{
  margin:0; font-family:var(--f-display); font-weight:500;
  font-size:min(var(--t-h1), 3.45vw); line-height:1.08; letter-spacing:-.012em; text-wrap:balance;
}
@media (max-width:900px){ .niv__tit{ font-size:clamp(30px,8.4vw,40px); } }
.niv__lin{ display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em; }
.niv__lin > span{ display:block; }
html.js-traza .niv__lin > span{ transform:translateY(112%); transition:transform 1.25s cubic-bezier(.76,0,.24,1) .12s; }
html.js-traza .niv__lin:nth-child(2) > span{ transition-delay:.28s; }
html.js-traza .niv__lin:nth-child(3) > span{ transition-delay:.44s; }
html.js-traza .se-traza .niv__lin > span{ transform:none; }
/* reveal genérico: sube y aparece */
html.js-traza [data-traza]:not(.se-traza) .niv__sube{ opacity:0; transform:translateY(14px); }
.niv__sube{ transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.28,1); transition-delay:calc(var(--i,0) * .12s); }

.dia{ background:var(--crema); padding:clamp(20px,4.15vh,64px) 0 clamp(18px,3.85vh,58px); overflow:hidden; }
.dia__cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
/* tabs: texto + subrayado dorado, sin caja */
.dia__tabs{ display:flex; gap:22px; margin:0 0 6px; padding:0; list-style:none; }
.dia__tab{
  border:0; background:transparent; padding:6px 0 4px; cursor:pointer; font-family:var(--f-text);
  font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(12,31,79,.72);
  position:relative; transition:color .3s ease;
}
.dia__tab::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--oro); transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.22,1,.28,1); }
.dia__tab[aria-selected="true"]{ color:var(--tinta); }
.dia__tab[aria-selected="true"]::after{ transform:scaleX(1); }
.dia__tab:focus-visible{ outline:2px solid var(--oro-vivo); outline-offset:3px; }

/* Las fotos se INTERCALAN: el día la lleva a la IZQUIERDA,
   "cómo aprenden" a la derecha, cuidamos a sangre y "para entrar" otra vez a la
   izquierda. El orden visual se hace con grid-column, no con `order`, para que
   el orden del DOM siga siendo el de lectura (lista → foto). */
.dia__cuerpo{ display:grid; grid-template-columns:minmax(0,62fr) minmax(0,38fr); gap:clamp(22px,3.2vw,52px); align-items:stretch; margin-top:clamp(14px,2.2vh,26px); }
.dia__escena{ grid-column:1; grid-row:1; }
.dia__lista{ grid-column:2; grid-row:1; }
/* lista de momentos: hora en serif grande, etiqueta, una línea */
.dia__lista{ list-style:none; margin:0; padding:0; display:grid; align-content:space-between; gap:2px; }
/* Al pasar la foto a la izquierda, la lista quedó del lado de Porfirio y él
   pisaba el momento 06 (medido por DOM a 1366×657 y 1280×620; a 1470×845 no,
   porque sobra alto). Se le reserva el hueco de abajo: los seis momentos se
   reparten en menos alto, así que la sección NO crece. */
@media (min-width:901px){ .momento:last-child{ padding-right:252px; } }
.momento{
  display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:baseline;
  padding:clamp(4px,.68vh,11px) 0; border-top:1px solid rgba(12,31,79,.12); cursor:pointer;
  transition:opacity .35s ease;
}
.momento:last-child{ border-bottom:1px solid rgba(12,31,79,.12); }
.momento__hora{ font-family:var(--f-display); font-weight:400; font-size:clamp(17px,1.5vw,21px); line-height:1; color:var(--oro-texto); font-variant-numeric:tabular-nums; min-width:2.6ch; transition:color .35s ease; }
.momento__que{ margin:0; font-size:clamp(14px,1.05vw,15.5px); line-height:1.35; color:var(--tinta); }
.momento__que b{ font-weight:600; }
/* Antes el texto de cada momento se abría al hover y solo en el activo.
   Ahora están SIEMPRE abiertos. Deja de haber sorpresa al
   pasar el cursor, y la lista pasa a ser un horario legible de un vistazo. */
.momento__que span{ display:block; font-size:13.5px; line-height:1.45; color:rgba(12,31,79,.74); margin-top:4px; }
.momento[aria-current="true"] .momento__hora{ color:var(--navy); }

.dia__lista:hover .momento:not(:hover):not([aria-current="true"]){ opacity:.72; }
/* barra de progreso del momento activo, dorada, sobre el borde superior */
.momento::before{ content:""; position:absolute; }
.momento{ position:relative; }
.momento[aria-current="true"]::before{ left:0; top:-1px; height:1.5px; width:100%; background:var(--oro); transform:scaleX(0); transform-origin:left center; animation:dia-avanza var(--dia-t,5.5s) linear both; }
.dia.esta-quieto .momento[aria-current="true"]::before{ animation:none; transform:scaleX(1); }
@keyframes dia-avanza{ to{ transform:scaleX(1); } }

/* escena: la foto grande del momento activo, con su pie */
.dia__escena{ margin:0; position:relative; overflow:hidden; background:var(--noche); min-height:clamp(270px,38vh,340px); isolation:isolate; }
.dia__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; opacity:0; transform:scale(1.06); transition:opacity 1s ease, transform 7s cubic-bezier(.22,1,.28,1); filter:saturate(.92); }
.dia__foto.es-activa{ opacity:1; transform:scale(1); z-index:1; }
.dia__pie{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(48px,7vh,72px) clamp(18px,2.4vw,32px) clamp(16px,2.4vh,24px) clamp(18px,2.4vw,32px);
  background:linear-gradient(to top, rgba(12,31,79,.82), rgba(12,31,79,0)); color:var(--blanco);
}
.dia__pie-eti{ margin:0 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--oro-vivo); }
.dia__pie-dice{ margin:0; font-family:var(--f-display); font-style:italic; font-size:clamp(17px,1.5vw,22px); line-height:1.35; max-width:36ch; text-shadow:0 1px 12px rgba(12,31,79,.5); }
.dia__pie > *{ transition:opacity .5s ease .25s, transform .6s cubic-bezier(.22,1,.28,1) .25s; }
.dia__pie.cambia > *{ opacity:0; transform:translateY(6px); transition-delay:0s; transition-duration:.25s; }
/* ---------- CIERRE DE SECCIÓN — mismo componente que el epílogo ----------
   Todas las secciones cierran igual que
   "Un lugar seguro para aprender, crecer y formarse con valores." — misma
   serif, mismo tamaño, misma disposición (dos filetes que crecen desde el
   centro). La frase no se desvanece: se ESCRIBE de izquierda a derecha. */
.cierre{ margin:clamp(18px,2.8vh,32px) 0 0; display:flex; flex-direction:column; align-items:center; gap:clamp(11px,1.6vh,17px); text-align:center; }
/* Cuando el cierre es un enlace, su subrayado chocaba con los dos filetes:
   tres rayas juntas. El enlace pierde el subrayado (los filetes ya enmarcan)
   y el bloque gana aire. */
.cierre--oscuro{ gap:clamp(18px,2.8vh,28px); }
.cierre--oscuro .cierre__frase a{ border-bottom:0; padding-bottom:0; }
.cierre--oscuro .cierre__frase a:hover{ color:var(--oro-vivo); }
.cierre__filete{
  display:block; width:min(560px,80vw); height:1px; background:var(--c-lin,var(--navy)); opacity:.55;
  transform:scaleX(0); transform-origin:center; transition:transform 1.7s cubic-bezier(.45,0,.2,1) .35s;
}
.cierre__frase{
  margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(19px,1.8vw,26px);
  line-height:1.3; color:var(--c-tinta,var(--tinta)); max-width:38ch;
  clip-path:inset(0 100% 0 0); opacity:0;
  transition:clip-path 1.6s cubic-bezier(.45,0,.2,1) .72s, opacity .5s ease .72s;
}
.cierre__frase a{ color:inherit; border-bottom:1.5px solid var(--oro-vivo); padding-bottom:3px; }
.cierre__frase a:hover{ color:var(--oro-vivo); }
.cierre--oscuro{ --c-lin:var(--oro-vivo); --c-tinta:var(--blanco); }
/* En "cómo aprenden" el cierre vive dentro de la columna de texto: se centra
   respecto a ESA columna, no respecto a la pantalla. */
.cierre--col{ align-items:center; text-align:center; margin-top:clamp(20px,3.4vh,38px); }
.cierre--col .cierre__filete{ width:min(100%,560px); }
.cierre.se-traza .cierre__filete, html:not(.js-traza) .cierre__filete{ transform:scaleX(1); }
.cierre.se-traza .cierre__frase, html:not(.js-traza) .cierre__frase{ clip-path:inset(0 0 0 0); opacity:1; }
/* El cierre pesa ~100 px más que la línea suelta que sustituye. El tamaño de
   la frase NO se toca (es el punto del cambio): el aire se recorta del ritmo
   de la sección para que siga cabiendo en una pantalla. */
.dia .cierre{ margin-top:clamp(22px,3.4vh,40px); gap:clamp(14px,2.2vh,22px); }
.dia .cierre__frase{ max-width:none; }
@media (min-width:901px){ .dia .cierre{ padding-right:60px; } }
html.js-traza .dia__cuerpo:not(.se-traza) .dia__escena,
html.js-traza .aprenden:not(.se-traza) .aprenden__foto,
html.js-traza .entrar:not(.se-traza) .entrar__foto,
html.js-traza .cuida:not(.se-traza) .cuida__fondo{ clip-path:inset(100% 0 0 0); }
.dia__escena, .aprenden__foto, .entrar__foto{ transition:clip-path 1.3s cubic-bezier(.76,0,.24,1) .06s; clip-path:inset(0 0 0 0); }
html.js-traza .entrar:not(.se-traza) .entrar__foto img{ transform:scale(1.1) translateY(-2.5%); }
.dia__escena::after, .aprenden__foto::after, .entrar__foto::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(to right, rgba(249,198,88,0), var(--oro-vivo) 45%, rgba(249,198,88,0));
}
.dia__cuerpo.se-traza .dia__escena::after, .se-traza .aprenden__foto::after, .se-traza .entrar__foto::after{ animation:telon-filo 1.3s cubic-bezier(.76,0,.24,1) .06s both; }
@keyframes telon-filo{ 0%{ bottom:0; opacity:1; } 88%{ opacity:1; } 100%{ bottom:100%; opacity:0; } }
html.js-traza .dia__cuerpo:not(.se-traza) .momento{ opacity:0; transform:translateY(16px); }
.momento{ transition:opacity .8s ease calc(var(--i,0) * .13s + .38s), transform .8s cubic-bezier(.22,1,.28,1) calc(var(--i,0) * .13s + .38s); }

/* ---------- 3 · CÓMO APRENDEN: foto 60 % a sangre + 4 pilares en el aire ---------- */
.aprenden{ background:var(--blanco); overflow:hidden; }
.aprenden__grid{ display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr); min-height:clamp(520px, calc(100svh - var(--cab-h,65px)), 820px); }
.aprenden__foto{ margin:0; position:relative; overflow:hidden; background:var(--noche); }
.aprenden__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; filter:saturate(.92); transform:scale(1.001); transition:transform 1.8s cubic-bezier(.22,1,.28,1); }
.aprenden:hover .aprenden__foto img{ transform:scale(1.04); }
.aprenden__txt{ display:grid; align-content:center; padding:clamp(16px,2.2vh,38px) clamp(24px,3.2vw,48px) clamp(16px,2.2vh,38px) max(4vw, (100vw - var(--marco-max)) / 2); }
.aprenden .niv__tit{ font-size:clamp(26px,2.4vw,35px); white-space:normal; }
.aprenden .niv__enca{ margin-bottom:clamp(10px,1.6vh,18px); }
.pilares{ list-style:none; margin:clamp(10px,1.6vh,22px) 0 0; padding:0; display:grid; }
.pilar{ display:grid; grid-template-columns:30px 1fr; column-gap:14px; align-items:baseline; padding:clamp(6px,1vh,12px) 0; border-top:1px solid rgba(12,31,79,.12); }
.pilar:last-child{ border-bottom:1px solid rgba(12,31,79,.12); }
/* Letras en vez de números: A·B·C·D en serif, un punto
   más grandes y en oro vivo — no son pasos, son rasgos. */
.pilar__n{ font-family:var(--f-display); font-size:clamp(22px,1.85vw,27px); line-height:1; color:var(--oro-texto); }
.pilar__t{ font-family:var(--f-display); font-weight:500; font-size:clamp(17px,1.4vw,20px); line-height:1.2; margin:0; }
.pilar__p{ grid-column:2; margin:4px 0 0; font-size:clamp(13.5px,1.02vw,15px); line-height:1.5; color:rgba(12,31,79,.72); }
/* reveal: la foto sube su telón (arriba) y los pilares entran en escalera.
   La foto además se asienta: entra un punto más grande y baja a su sitio. */
html.js-traza .aprenden:not(.se-traza) .aprenden__foto img{ transform:scale(1.1) translateY(-2.5%); }
.aprenden__foto img{ transition:transform 1.9s cubic-bezier(.22,1,.28,1); }
html.js-traza .pilares:not(.se-traza) .pilar{ opacity:0; transform:translateY(16px); }
.pilar{ transition:opacity .8s ease calc(var(--i,0) * .15s + .42s), transform .8s cubic-bezier(.22,1,.28,1) calc(var(--i,0) * .15s + .42s); }

/* ---------- 4 · ASÍ CUIDAMOS: foto en penumbra + 4 puntos dorados unidos ---------- */
.cuida{ position:relative; min-height:clamp(520px, calc(100svh - var(--cab-h,65px)), 820px); display:grid; align-items:center; overflow:hidden; background:var(--tinta); color:var(--blanco); isolation:isolate; padding:clamp(40px,6vh,72px) 0; }
.cuida__fondo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; filter:saturate(.85) brightness(.9); transform:scale(1.001); transition:transform 12s linear, clip-path 1.35s cubic-bezier(.76,0,.24,1); clip-path:inset(0 0 0 0); }
.cuida.se-traza .cuida__fondo, html:not(.js-traza) .cuida__fondo{ transform:scale(1.05); }
.cuida__velo{ position:absolute; inset:0; background:linear-gradient(to right, rgba(12,31,79,.92) 0%, rgba(12,31,79,.82) 52%, rgba(12,31,79,.58) 82%, rgba(12,31,79,.34) 100%); }
.cuida__marco{ position:relative; z-index:1; }
.cuida .niv__tit{ max-width:none; }
.cuida__preg{ margin:clamp(10px,1.8vh,16px) 0 0; font-family:var(--f-display); font-style:italic; font-size:clamp(17px,1.5vw,21px); color:rgba(255,255,255,.86); max-width:none; }
/* recorrido de puntos: 4 en fila unidos por una línea que se traza */
/* sin tope de 1100 px: los cuatro puntos ocupan el marco completo, si no el
   bloque se ve cargado a la izquierda con un hueco muerto a la derecha. */
.cuida__puntos{ list-style:none; margin:clamp(26px,4.4vh,44px) 0 0; padding:0; position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(18px,2.6vw,40px); }
.cuida__puntos::before{ content:""; position:absolute; left:6px; right:6px; top:5px; height:1.5px; background:linear-gradient(to right, var(--oro-vivo), rgba(249,198,88,.45)); transform:scaleX(0); transform-origin:left center; transition:transform 2.4s linear 1s; }
.cuida__puntos.se-traza::before, html:not(.js-traza) .cuida__puntos::before{ transform:scaleX(1); }
.cuida__punto{ position:relative; padding-top:22px; }
.cuida__punto-b{ position:absolute; left:0; top:0; width:13px; height:13px; border-radius:50%; background:var(--tinta); border:1.5px solid var(--oro-vivo); box-shadow:0 0 0 3px var(--tinta); transform:scale(0); transition:transform .45s cubic-bezier(.34,1.5,.64,1) var(--pd,1.3s); }
/* los cuatro puntos encienden SINCRONIZADOS con el avance de la línea */
.cuida__punto:nth-child(1){ --pd:1.05s; } .cuida__punto:nth-child(2){ --pd:1.75s; } .cuida__punto:nth-child(3){ --pd:2.5s; } .cuida__punto:nth-child(4){ --pd:3.25s; }
.cuida__puntos.se-traza .cuida__punto-b, html:not(.js-traza) .cuida__punto-b{ transform:scale(1); }
.cuida__punto-t{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--oro-vivo); line-height:1.35; }
.cuida__punto-p{ margin:9px 0 0; font-size:clamp(14px,1.08vw,15.5px); line-height:1.55; color:rgba(255,255,255,.92); }
.cuida__punto-t, .cuida__punto-p{ opacity:0; transition:opacity .6s ease calc(var(--pd,1.3s) + .12s); }
.cuida__puntos.se-traza .cuida__punto-t, .cuida__puntos.se-traza .cuida__punto-p, html:not(.js-traza) .cuida__punto-t, html:not(.js-traza) .cuida__punto-p{ opacity:1; }

/* ---------- 5 · PARA ENTRAR: foto por la IZQUIERDA + calculador de grado ----------
   Las otras tres secciones llevan la foto a la derecha o a
   sangre; esta la lleva a la izquierda para que el ojo no vea el mismo
   arreglo cuatro veces. */
.entrar{ background:var(--crema); padding:0 0 clamp(14px,2.2vh,26px); overflow:hidden; }
/* el grid deja sitio para la tira de hechos que cruza debajo */
.entrar__grid{ display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr); min-height:clamp(420px, calc(100svh - var(--cab-h,65px) - 132px), 700px); align-items:stretch; }
.entrar__foto{ margin:0; position:relative; overflow:hidden; background:var(--noche); }
.entrar__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; filter:saturate(.92); transform:scale(1.001); transition:transform 1.9s cubic-bezier(.22,1,.28,1); }
.entrar__txt{ display:grid; align-content:center; padding:clamp(12px,1.8vh,34px) max(4vw,(100vw - var(--marco-max)) / 2) clamp(12px,1.8vh,34px) clamp(24px,3.2vw,52px); }
.entrar .niv__tit{ font-size:clamp(28px,2.9vw,41px); }
.entrar .niv__enca{ margin-bottom:clamp(8px,1.3vh,16px); }

/* --- el calculador: sin cajas de color; el select es texto con subrayado dorado --- */
.calc{ margin:0 0 clamp(8px,1.3vh,16px); padding-bottom:clamp(8px,1.2vh,14px); border-bottom:1px solid rgba(12,31,79,.12); }
.calc__preg{ display:block; font-family:var(--f-display); font-size:clamp(18px,1.6vw,24px); color:var(--tinta); margin-bottom:12px; }
.calc__fila{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.calc__sel{
  --hueco:.42em;
  appearance:none; -webkit-appearance:none; border:0; border-radius:0; color:var(--navy); background-color:transparent;
  font-family:var(--f-display); font-size:clamp(26px,2.4vw,36px); font-weight:400;
  font-variant-numeric:tabular-nums; letter-spacing:var(--hueco); line-height:1.25;
  width:calc(4ch + 4 * var(--hueco)); padding:2px 0 10px; text-indent:0;
  background-image:repeating-linear-gradient(to right,
    var(--oro) 0, var(--oro) 1ch,
    transparent 1ch, transparent calc(1ch + var(--hueco)));
  background-repeat:no-repeat; background-position:0 100%;
  background-size:calc(4ch + 3 * var(--hueco)) 2px;
}
.calc__sel:focus{ outline:none; }
.calc__sel:focus{ background-image:repeating-linear-gradient(to right,
    var(--oro-vivo) 0, var(--oro-vivo) 1ch,
    transparent 1ch, transparent calc(1ch + var(--hueco))); }
.calc__sel::placeholder{ color:transparent; }
.calc__sel:focus-visible{ outline:2px solid var(--oro-vivo); outline-offset:6px; }
.calc__res{ margin:clamp(8px,1.2vh,14px) 0 0; min-height:1.2em; font-family:var(--f-display); font-size:clamp(21px,2vw,30px); line-height:1.25; color:var(--tinta); }
.calc__res-t{ display:inline-block; clip-path:inset(0 100% 0 0); transition:clip-path .8s cubic-bezier(.45,0,.2,1); }
.calc__res.se-escribe .calc__res-t{ clip-path:inset(0 0 0 0); }
[hidden]{ display:none !important; }
.calc__res-ir{ display:inline-block; font-family:var(--f-text); font-size:clamp(14px,1.05vw,15.5px); font-weight:600; color:var(--navy); border-bottom:1.5px solid var(--oro); padding-bottom:2px; margin-left:4px; white-space:nowrap; }
.calc__res-ir:hover{ color:var(--oro); }
.calc__res-cuando{ display:inline; font-family:var(--f-text); font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(12,31,79,.58); white-space:nowrap; margin-left:10px; }
.calc__pie{ margin:7px 0 0; font-size:13px; line-height:1.45; color:rgba(12,31,79,.68); max-width:52ch; }

/* --- los tres pasos --- */
.pasos{ list-style:none; margin:0; padding:0; display:grid; }
.paso{ display:grid; grid-template-columns:34px 1fr; column-gap:14px; align-items:baseline; padding:clamp(7px,1.1vh,13px) 0; border-top:1px solid rgba(12,31,79,.12); }
.paso:last-child{ border-bottom:1px solid rgba(12,31,79,.12); }
.paso__n{ font-family:var(--f-display); font-size:clamp(17px,1.4vw,20px); color:var(--oro-texto); font-variant-numeric:tabular-nums; }
.paso__t{ font-family:var(--f-display); font-weight:500; font-size:clamp(17px,1.4vw,20px); line-height:1.2; margin:0; }
.paso__p{ margin:4px 0 0; font-size:clamp(13.5px,1.02vw,15px); line-height:1.5; color:rgba(12,31,79,.72); }
html.js-traza .pasos:not(.se-traza) .paso{ opacity:0; transform:translateY(16px); }
.paso{ transition:opacity .8s ease calc(var(--i,0) * .16s + .42s), transform .8s cubic-bezier(.22,1,.28,1) calc(var(--i,0) * .16s + .42s); }

.entrar__botones{ display:flex; gap:clamp(18px,2.6vw,36px); flex-wrap:wrap; align-items:center; margin-top:clamp(12px,2vh,20px); }
.entrar__cta{ position:relative; display:inline-flex; align-items:center; gap:10px; padding:6px 0; font-size:clamp(15px,1.15vw,17px); font-weight:600; color:var(--tinta); }
.entrar__cta svg{ width:18px; height:18px; transition:transform .3s cubic-bezier(.22,1,.28,1); }
.entrar__cta::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--oro); transform:scaleX(0); transform-origin:left center; transition:transform .6s cubic-bezier(.22,1,.28,1); }
.entrar__cta::after{ transition-delay:1.05s; }
.entrar__botones.se-traza .entrar__cta::after, html:not(.js-traza) .entrar__cta::after{ transform:scaleX(1); }
.entrar__cta:hover svg{ transform:translateX(5px); }
.entrar__cta:hover::after{ animation:cta-rearma .8s cubic-bezier(.22,1,.28,1); }
.entrar__cta--2{ font-weight:500; color:var(--navy); }

.tambien{ margin:clamp(18px,2.8vh,30px) 0 0; padding-top:clamp(16px,2.4vh,24px); border-top:1px solid rgba(12,31,79,.14); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,64px); }
.tambien dt{ font-size:12.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--navy); line-height:1.35; }
.tambien dd{ margin:8px 0 0; font-size:clamp(14.5px,1.12vw,16.5px); line-height:1.5; color:rgba(12,31,79,.8); }

/* ---------- Reserva de Porfirio en la columna de "para entrar" ----------
   Porfirio es fijo y ocupa ~250 px desde el borde derecho de la PANTALLA.
   Medido aquí: a 1366/1280 pisa el paso 03; a 1470/1920
   pisa el tercer hecho. Se reserva en los dos, no en toda la columna: el
   texto de arriba conserva su ancho. El tercer hecho es el más corto a
   propósito ("Sí, el colegio es laico"), así que la reserva no le duele. */
@media (min-width:901px){
  .entrar .paso:last-child > div{ padding-right:252px; }
  /* El tercer hecho NO reserva: se prefiere que Porfirio se le
     encime a que el texto salga cortado. Máximo dos líneas. */
}

/* ---------- Ajustes al cierre heredado cuando vive en un nivel ---------- */
.entrar + .visita{ margin-top:clamp(28px,5vh,56px); }

/* ---------- Móvil (el caso principal) ---------- */
@media (max-width:900px){
  .hero--nivel{ min-height:640px; height:100svh; }
  .hero--nivel .hero__copy{ padding-bottom:18px; }
  .hero--nivel .hero__h1{ max-width:none; font-size:clamp(30px,8vw,40px); }
  .hero--nivel .hero__h1 br{ display:none; }
  .hero--nivel .hero__velo{ background:linear-gradient(to top, rgba(12,31,79,.92) 0%, rgba(12,31,79,.55) 40%, rgba(12,31,79,.05) 70%), linear-gradient(to bottom, rgba(12,31,79,.42) 0%, rgba(12,31,79,0) 22%); }
  .hechos{ background:rgba(12,31,79,.55); }
  .hechos__marco{ border-top:1px solid rgba(249,198,88,.45); padding:16px 0 18px; }
  .hechos__lista{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 10px; }
  .hecho dt{ font-size:clamp(15px,4.6vw,19px); }
  .hecho dd{ font-size:10px; letter-spacing:.06em; }
  .hechos__lista{ gap:12px 10px; }
  .dia__cuerpo{ grid-template-columns:1fr; }
  .dia__escena, .dia__lista{ grid-column:1; grid-row:auto; }
  .dia__tab-l{ display:none; }
  .dia__tab{ letter-spacing:.08em; font-size:12px; }
  .hero__ir{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blanco); text-decoration:none; border-bottom:1.5px solid var(--oro-vivo); padding-bottom:5px; }
  .momento{ column-gap:12px; }
  .dia__escena{ order:-1; aspect-ratio:3/2; min-height:0; }
  .dia__lista{ gap:0; }
  .aprenden__grid{ grid-template-columns:1fr; min-height:0; }
  .aprenden__foto{ aspect-ratio:3/2; order:-1; }
  .aprenden__txt{ padding-inline:4vw; }
  .dia__pie{ padding-right:clamp(18px,2.4vw,32px); }
  .cuida{ min-height:0; }
  .cuida__puntos{ grid-template-columns:1fr; gap:14px; }
  .cuida__puntos::before{ left:5px; right:auto; top:8px; bottom:8px; width:1px; height:auto; background:linear-gradient(to bottom, var(--oro-vivo), rgba(249,198,88,.35)); transform:scaleY(0); transform-origin:top center; }
  .cuida__puntos.se-traza::before{ transform:scaleY(1); }
  .cuida__punto{ padding-top:0; padding-left:26px; }
  .cuida__punto-b{ top:3px; }
  .entrar__grid{ grid-template-columns:1fr; min-height:0; }
  .entrar__foto{ aspect-ratio:3/2; order:-1; }
  .entrar__txt{ padding-inline:4vw; }
  .tambien{ grid-template-columns:1fr; gap:12px; }
  .calc__res{ font-size:clamp(20px,5.4vw,26px); }
  .cierre__frase{ max-width:none; }
  .cierre--col{ margin-top:clamp(16px,2.6vh,26px); }
}
@media (max-width:560px){
  .hechos__lista{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .momento__hora{ min-width:4.6ch; }
}
.momento:focus-visible, .entrar__cta:focus-visible, .cierre__frase a:focus-visible, .hero__ir:focus-visible, .dia__tab:focus-visible{ outline:2px solid var(--oro-vivo); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .hero__foto, .hecho, .dia__foto, .cuida__fondo{ animation:none; transition:none; }
  .niv__lin > span, .cierre__filete, .cierre__frase, .dia__escena, .aprenden__foto, .aprenden__foto img, .entrar__foto, .entrar__foto img{ transition:none !important; animation:none !important; transform:none !important; clip-path:none !important; opacity:1 !important; }
  .dia__escena::after, .aprenden__foto::after, .entrar__foto::after{ animation:none !important; opacity:0 !important; }
  .momento[aria-current="true"]::before{ animation:none; transform:scaleX(1); }
}

.tambien{ position:relative; border-top-color:transparent; }
.tambien::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:rgba(12,31,79,.2);
  transform:scaleX(0); transform-origin:left center; transition:transform 1.5s cubic-bezier(.45,0,.2,1) .1s; }
.tambien.se-traza::before, html:not(.js-traza) .tambien::before{ transform:scaleX(1); }
html.js-traza .tambien:not(.se-traza) > div{ opacity:0; transform:translateY(14px); }
.tambien > div{ transition:opacity .8s ease calc(var(--i,0) * .15s + .45s), transform .8s cubic-bezier(.22,1,.28,1) calc(var(--i,0) * .15s + .45s); }
.tambien > div:nth-child(2){ --i:1; } .tambien > div:nth-child(3){ --i:2; }

@media (min-width:901px) and (min-height:560px){
  .dia, .aprenden, .entrar{ min-height:calc(100svh - var(--cab-c, 61px)); box-sizing:border-box; display:flex; flex-direction:column; }
  .dia > .marco{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-evenly; }
  .dia > .marco > *{ flex:0 0 auto; }
  .dia > .marco > .niv__enca{ margin-bottom:0; }
  .aprenden__grid, .entrar__grid{ flex:1 1 auto; min-height:0; }
  .aprenden__txt, .entrar__txt{ align-content:space-evenly; }
  .cuida{ min-height:calc(100svh - var(--cab-c, 61px)); }
}

@media (min-width:1101px){
  .entrar .pasos{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(16px,1.6vw,26px); border-bottom:1px solid rgba(12,31,79,.12); }
  .entrar .paso{ grid-template-columns:1fr; border:0; padding:clamp(9px,1.3vh,14px) 0; }
  .entrar .paso:last-child{ border:0; }
  .entrar .paso__n{ margin-bottom:4px; }
  .entrar .paso:last-child > div{ padding-right:0; }
}
.dia .cierre{ margin-top:clamp(18px,3vh,36px); }

/* Celular: Porfirio (grande en el hero) pisaba los hechos de la columna
   derecha. Se sube el bloque de hechos lo que mide Porfirio más su margen. */
@media (max-width:900px){
  .hero--nivel .hechos{ padding-bottom:calc(var(--porf-res, 132px) + env(safe-area-inset-bottom, 0px)); }
}