/* ============================================================
   COLEGIO NUEVO KAAN KUN — VERSIÓN ALTERNATIVA · Fase 0 (hero)
   ADN: economía visual institucional (una voz tipográfica, etiquetas
   chicas, hairlines, cero sombras, movimiento solo de entrada).
   La cabecera vive en css/cabecera.css; no se modifica desde aquí.
   ============================================================ */

:root{
  --tinta:    #0C1F4F;
  --noche:    #0C2650;
  --navy:     #004484;
  --oro:      #C0A145;
  --oro-texto:#856F30;  /* mismo tono, más profundo: 4.55:1 sobre crema.
                           Solo para texto chico; las líneas siguen en --oro. */
  --oro-vivo: #F9C658;
  --crema:    #FBF7EE;
  --nube:     #EDF4FA;
  --blanco:   #FFFFFF;

  --f-display: 'Newsreader', Georgia, serif;
  --f-text:    'Montserrat', system-ui, sans-serif;

  --marco: 92%;
  --marco-max: 1660px;

  /* Escala tipográfica: cuerpo 15–16.5px, H1 ≈52px a 1366px. */
  --t-label: 12.5px;
  --t-body:  clamp(15px, 1.1vw, 16.5px);
  --t-h1:    clamp(38px, 4.2vw, 66px);

  --cab-h: 105px; /* lo mide el JS al cargar */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--blanco); color:var(--tinta);
  font-family:var(--f-text); font-size:var(--t-body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img,video{ display:block; max-width:100%; }

/* Keyframes que usa la cabecera (css/cabecera.css). */
@keyframes cae-suave{ from{ transform:translateY(-12px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes cta-traza{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes cta-rearma{ 0%{ transform:scaleX(1); transform-origin:right center; } 48%{ transform:scaleX(0); transform-origin:right center; } 52%{ transform:scaleX(0); transform-origin:left center; } 100%{ transform:scaleX(1); transform-origin:left center; } }
@keyframes campus-brillo{ 0%{ transform:translateX(-120%); opacity:0; } 30%{ opacity:1; } 70%{ opacity:.7; } 100%{ transform:translateX(120%); opacity:0; } }
@keyframes menu-baja{ from{ transform:translateY(-8px); opacity:0; } to{ transform:none; opacity:1; } }

/* ============================================================
   HERO — una pantalla. Video a sangre, H1 abajo-izquierda,
   un solo CTA, cintillo al pie. Nada atado al scroll.
   ============================================================ */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  background:var(--noche);
  isolation:isolate;
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 30%;
  /* Grade de color único: saturación baja, contraste suave. */
}
.hero__pase{ position:absolute; inset:0; overflow:hidden; z-index:0; }   /* z-index 0 = contexto propio: el z que crece en cada vuelta se queda aquí dentro y nunca tapa el titular */
.hero__pase img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--x,50%) 40%; opacity:0; }
.hero__pase img.es-viva{ opacity:1; animation:pase-entra 1.6s ease both, pase-zoom 8s linear both; }
.hero__pase img.es-inicial{ animation:pase-zoom 8s linear both; }   /* la primera ya está al cargar: sin fundido desde negro */
@keyframes pase-entra{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pase-zoom{ from{ transform:scale(1.001); } to{ transform:scale(1.07); } }
@media (prefers-reduced-motion:reduce){ .hero__pase img.es-viva{ animation:none; } }

/* Velo solo en orillas: abajo para el texto, izquierda leve.
   El centro del video queda limpio. */
.hero__velo{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top,    rgba(12,31,79,.72) 0%, rgba(12,31,79,.30) 36%, rgba(12,31,79,0) 62%),
    linear-gradient(to bottom, rgba(12,31,79,.42) 0%, rgba(12,31,79,0) 22%),
    linear-gradient(to right,  rgba(12,31,79,.30) 0%, rgba(12,31,79,0) 50%);
}
.hero__copy{
  position:absolute; left:0; right:0;
  bottom:clamp(64px, 12vh, 120px);
  color:var(--blanco);
  animation:aparece .8s ease-out both;
}
@keyframes aparece{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.hero__eyebrow{
  margin:0 0 14px; font-size:var(--t-label); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82);
}
/* La raya dorada que se arma (ADN del sitio: hairline sobre
   cada eyebrow). Se traza de izquierda a derecha cuando el texto entra. */
.hero__eyebrow::before{
  content:""; display:block; width:72px; height:1px; margin-bottom:16px;
  background:var(--oro-vivo); transform:scaleX(0); transform-origin:left center;
  animation:cta-traza .9s cubic-bezier(.22,1,.28,1) .5s both;
}
html.intro-viva .hero__eyebrow::before{ animation-delay:3.45s; }
.hero__h1{
  margin:0; font-family:var(--f-display); font-weight:500;
  font-size:var(--t-h1); line-height:1.04; letter-spacing:-.012em;
  max-width:none;
  text-shadow:0 2px 24px rgba(12,31,79,.35);
}
.hero__apoyo{
  margin:18px 0 6px; max-width:52ch;
  font-size:clamp(17px,1.4vw,21px); line-height:1.5; color:rgba(255,255,255,.94);
}
/* CTA como en el header: texto + subrayado dorado que se traza,
   discreto, sin caja de color. */
.hero__cta{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  margin-top:28px; padding:6px 0;
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blanco); white-space:nowrap;
}
.hero__cta::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; border-radius:2px; background:var(--oro-vivo);
  transform-origin:left center;
  animation:cta-traza .70s cubic-bezier(.22,1,.28,1) .9s both;
}
.hero__cta .btn__flecha{ transition:transform .2s ease; }
.hero__cta:hover .btn__flecha{ transform:translateX(4px); }
.hero__cta:hover::after{
  animation:cta-traza .70s cubic-bezier(.22,1,.28,1) .9s both,
            cta-rearma .52s cubic-bezier(.5,0,.5,1) both;
}
.hero__cta:focus-visible{ outline:2px solid var(--oro-vivo); outline-offset:4px; }

/* Botón de pausa: 32 px, monocromo, abajo-derecha. En el build real se
   aparta de la reserva de Porfirio (251 px); en el boceto no hay Porfirio. */
.hero__pausa{
  position:absolute; right:max(4vw, calc((100% - var(--marco-max)) / 2));
  bottom:clamp(40px, 8vh, 84px);
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.7); background:rgba(12,31,79,.25);
  color:var(--blanco); cursor:pointer; display:grid; place-items:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero__pausa svg{ width:14px; height:14px; }
.hero__pausa .ico-play{ display:none; }
.hero.esta-pausado .hero__pausa .ico-play{ display:block; }
.hero.esta-pausado .hero__pausa .ico-pausa{ display:none; }
.hero__pausa:focus-visible{ outline:2px solid var(--oro-vivo); outline-offset:2px; }

/* Franja de inscripciones: bajo el hero, fuera del video. */
.franja{
  display:block; background:var(--tinta); color:var(--blanco);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.franja .marco{
  display:flex; align-items:center; justify-content:center; gap:14px 22px;
  padding:15px 0; flex-wrap:wrap; text-align:center;
}
.franja b{ font-weight:700; font-size:clamp(13px,1vw,15px); letter-spacing:.02em; }
.franja span{ font-size:clamp(13px,.95vw,14.5px); color:rgba(255,255,255,.82); }
.franja svg{ width:20px; height:20px; color:var(--oro-vivo); flex:0 0 auto; transition:transform .2s ease; }
.franja:hover svg{ transform:translateX(3px); }

.nav__grupo{ position:relative; }
.nav__padre{ display:inline-flex; align-items:center; gap:5px; }
.nav__chev{ width:12px; height:12px; transition:transform .2s ease; }
.nav__grupo:hover .nav__chev, .nav__grupo:focus-within .nav__chev{ transform:rotate(180deg); }
.nav__panel{
  position:absolute; left:-14px; top:calc(100% + 10px); min-width:272px;
  background:var(--blanco); border:1px solid rgba(12,31,79,.12);
  padding:8px 0; display:none; z-index:50;
}
.nav__panel::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.nav__grupo:hover .nav__panel, .nav__grupo:focus-within .nav__panel{ display:block; }
.nav__panel a{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 16px; color:var(--tinta);
  font-size:13.5px; font-weight:600; letter-spacing:.04em; text-transform:none;
}
.nav__panel a small{ font-size:11.5px; font-weight:500; color:rgba(12,31,79,.55); letter-spacing:.02em; white-space:nowrap; }
.nav__panel a:hover{ background:var(--crema); }
.nav__panel a::after{ display:none; }

.cab .cab__cta, .cab .cab__cta:hover{ background:none; transform:none; border-radius:0; padding:5px 0; }
.cab.menu-abierto .cab__cta{
  order:3; width:auto; align-self:flex-start; margin-top:14px;
  display:inline-flex; justify-content:flex-start; padding:8px 0;
  background:none; color:var(--tinta); font-size:15px; letter-spacing:.08em;
  border-bottom:2px solid var(--oro-vivo);
}
.cab.menu-abierto .cab__cols{ display:flex; flex-direction:column; align-items:stretch; }
.cab.menu-abierto .cab__fila2{ order:1; }
.cab.menu-abierto .util{ order:2; margin-top:10px; padding-top:10px; border-top:1px solid rgba(12,31,79,.10); }
.cab.menu-abierto .nav__grupo{ display:block; }
.cab.menu-abierto .nav__panel{
  position:static; display:block; min-width:0; border:0; padding:0 0 4px 18px; background:transparent;
}
.cab.menu-abierto .nav__panel a{ min-height:44px; font-size:15.5px; font-weight:500; border-bottom:0; padding:4px 4px; }
.cab.menu-abierto .nav__chev{ display:none; }

.cab .marca__l3{ display:none; }
.cab .marca__l1, .cab .marca__l2{ font-size:calc(min(2.05vw, 32px) - var(--m,0) * 7px); line-height:1.02; }
.cab .marca__l2{ margin-top:3px; }
@media (max-width:1180px){ .cab .marca__l1, .cab .marca__l2{ font-size:clamp(19px, 2.6vw, 26px); } }
@media (max-width:720px){ .cab .marca__l1, .cab .marca__l2{ font-size:clamp(17px, 4.6vw, 21px); } }

.cab{ position:fixed; left:0; right:0; top:0; transition:background .35s ease, border-color .35s ease; }
.cab.es-transparente{
  background:transparent; border-bottom-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.cab.es-transparente .marca__l1,
.cab.es-transparente .marca__l2,
.cab.es-transparente .util a,
.cab.es-transparente .nav a{ color:var(--blanco); }
.cab.es-transparente .marca__l3{ color:var(--oro-vivo); }
.cab.es-transparente .util svg{ fill:var(--blanco); }
.cab.es-transparente .util a:hover,
.cab.es-transparente .util a:hover svg{ color:var(--oro-vivo); fill:var(--oro-vivo); }
.cab.es-transparente .cab__cta{ color:var(--blanco); }
.cab.es-transparente .nav__panel a{ color:var(--tinta); }
.cab.es-transparente .menu span{ background:var(--blanco); }
.cab.es-transparente .marca__sello{ filter:drop-shadow(0 2px 10px rgba(12,31,79,.35)); }

/* ============================================================
   EL COLEGIO · tres franjas con el texto encima
   40 vh cada una, apiladas sin aire; fondo editorial; velo solo del
   lado del texto. Cortina diagonal al entrar; push-in al hover.
   ============================================================ */
.colegio{ background:var(--crema); padding:clamp(32px,5.5vh,64px) 0 clamp(32px,5.5vh,64px); overflow:hidden; }
.colegio__enca{ margin-bottom:clamp(18px,3vh,30px); }
.colegio__ante{
  margin:0 0 12px; font-size:15.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
}
.colegio__tit{
  margin:0; font-family:var(--f-display); font-weight:500;
  /* Mismo tamaño que el H1 del hero, en UNA línea en
     escritorio: se topa con el ancho del marco (4.3vw) para que quepa. */
  font-size:min(var(--t-h1), 4.3vw); line-height:1.06; letter-spacing:-.012em;
  white-space:nowrap;
}
@media (max-width:900px){ .colegio__tit{ white-space:normal; font-size:clamp(30px,8.4vw,40px); text-wrap:balance; } }
.colegio__pila{ display:grid; }
.franja-c{ width:84%; }
.franja-c--izq{ justify-self:start; }
.franja-c--der{ justify-self:end; }
.franja-c{
  position:relative; display:grid; align-items:center; overflow:hidden;
  height:clamp(364px, 46vh, 480px);
  background:var(--noche); color:var(--blanco); text-decoration:none;
  isolation:isolate;
}
.franja-c__fondo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  transform:scale(1.001); transition:transform 1.8s cubic-bezier(.22,1,.28,1);
}
.franja-c:hover .franja-c__fondo{ transform:scale(1.045); }
/* Velo solo del lado del texto, en TRES tonalidades de la casa casadas con la
   luz de cada foto: mañana = azul institucional; interior =
   tinta profunda; atardecer = navy con calor dorado. Un recorrido de luz, no
   tres colores. El lado sin texto queda limpio. */
.franja-c__velo{ position:absolute; inset:0; pointer-events:none; }
.franja-c{ --v1:rgba(12,31,79,.78); --v2:rgba(12,31,79,.5); }
.franja-c--manana{   --v1:rgba(0,68,132,.80);  --v2:rgba(0,68,132,.50); }
.franja-c--interior{ --v1:rgba(12,31,79,.84);  --v2:rgba(12,31,79,.54); }
.franja-c--atardecer{--v1:rgba(58,40,14,.82);  --v2:rgba(46,36,30,.52); }
.franja-c--izq .franja-c__velo{ background:linear-gradient(to right, var(--v1) 0%, var(--v2) 40%, rgba(12,31,79,0) 64%); }
.franja-c--der .franja-c__velo{ background:linear-gradient(to left,  var(--v1) 0%, var(--v2) 40%, rgba(12,31,79,0) 64%); }
/* Fundido a crema en el borde ABIERTO de la franja: integra la escalera con
   el fondo. Corto, para que sea fusión y no viñeta. */
.franja-c::after{ content:""; position:absolute; top:0; bottom:0; width:34%; pointer-events:none; z-index:1; }
.franja-c--izq::after{ right:0; background:linear-gradient(to right, rgba(251,247,238,0) 0%, rgba(251,247,238,.35) 45%, rgba(251,247,238,.8) 78%, var(--crema) 100%); }
.franja-c--der::after{ left:0;  background:linear-gradient(to left,  rgba(251,247,238,0) 0%, rgba(251,247,238,.35) 45%, rgba(251,247,238,.8) 78%, var(--crema) 100%); }
.franja-c__txt{ z-index:2; }
.franja-c__txt{
  position:relative; width:min(56%, 760px); padding:0 clamp(22px,3vw,48px);
  text-shadow:0 1px 2px rgba(12,31,79,.5), 0 2px 22px rgba(12,31,79,.45);
}
.franja-c--izq .franja-c__txt{ padding-left:max(4vw, calc((100vw - var(--marco-max)) / 2)); }
.franja-c--der .franja-c__txt{ justify-self:end; padding-right:max(4vw, calc((100vw - var(--marco-max)) / 2)); }
.franja-c__ante{
  margin:0 0 10px; font-size:var(--t-label); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85);
}
.franja-c__num{ font-family:var(--f-display); font-weight:400; font-size:24px; letter-spacing:0; color:var(--oro-vivo); line-height:1; margin-right:10px; vertical-align:-2px; }
.franja-c__nom{
  margin:0 0 12px; font-family:var(--f-display); font-weight:500;
  font-size:clamp(26px,2.5vw,38px); line-height:1.1; letter-spacing:-.012em; text-wrap:balance;
}
.franja-c__p{ margin:0 0 16px; font-size:clamp(15px,1.2vw,17.5px); line-height:1.52; color:rgba(255,255,255,.94); }
.franja-c__ir{
  position:relative; display:inline-flex; align-items:center; gap:8px; padding-bottom:5px;
  font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blanco);
  text-decoration:none;
}
.franja-c__ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,1.8vw,30px); }
.franja-c--dos .franja-c__ir--ancla::before{ content:""; position:absolute; inset:0; z-index:1; }
.franja-c--dos .franja-c__ir--ancla{ position:static; }
.franja-c--dos .franja-c__ir--ancla::after{ z-index:2; }
.franja-c__tour{
  position:relative; z-index:3; display:inline-flex; align-items:center; gap:9px;
  padding-bottom:5px; font-size:12.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blanco); text-decoration:none;
  transition:color .3s ease;
}
.franja-c__tour::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--oro-vivo); transform:scaleX(.3); transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,1,.28,1);
}
.franja-c__tour:hover, .franja-c__tour:focus-visible{ color:var(--blanco); }
.franja-c__tour:hover::after, .franja-c__tour:focus-visible::after{ transform:scaleX(1); }
.franja-c__tour-ico{ width:17px; height:17px; flex:0 0 17px; color:var(--oro-vivo); }
@media (max-width:640px){ .franja-c__ctas{ gap:10px; } }
.franja-c__ir::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--oro-vivo);
  transform:scaleX(.35); transform-origin:left center; transition:transform .5s cubic-bezier(.22,1,.28,1);
}
.franja-c:hover .franja-c__ir::after{ transform:scaleX(1); }
.franja-c__ir svg{ width:15px; height:15px; transition:transform .3s ease; }
.franja-c:hover .franja-c__ir svg{ transform:translateX(4px); }
.franja-c:focus-visible{ outline:2px solid var(--oro-vivo); outline-offset:3px; }

/* Entrada: cortina diagonal desde el lado del texto; reposo recto.
   ⚠️ El recorte va en la FOTO y el VELO (hijos), nunca en la franja que
   vigila el IntersectionObserver: Chrome calcula la intersección después
   del clip-path, y una franja recortada a área cero "nunca aparece" —
   el reveal no disparaba si se recorta el elemento observado. */
html.js-traza .franja-c:not(.se-traza){ background:transparent; }
html.js-traza .franja-c--izq .franja-c__fondo, html.js-traza .franja-c--izq .franja-c__velo{ clip-path:polygon(0 0, 6% 0, -6% 100%, 0 100%); }
html.js-traza .franja-c--der .franja-c__fondo, html.js-traza .franja-c--der .franja-c__velo{ clip-path:polygon(100% 0, 106% 0, 94% 100%, 100% 100%); }
html.js-traza .franja-c__fondo, html.js-traza .franja-c__velo{ transition:clip-path 1.1s cubic-bezier(.22,1,.28,1), transform 1.8s cubic-bezier(.22,1,.28,1); }
html.js-traza .franja-c--izq.se-traza .franja-c__fondo, html.js-traza .franja-c--izq.se-traza .franja-c__velo{ clip-path:polygon(0 0, 118% 0, 100% 100%, 0 100%); }
html.js-traza .franja-c--der.se-traza .franja-c__fondo, html.js-traza .franja-c--der.se-traza .franja-c__velo{ clip-path:polygon(-18% 0, 100% 0, 100% 100%, 0 100%); }
html.js-traza .franja-c__txt{ opacity:0; transform:translateY(14px); transition:opacity .8s ease .5s, transform .8s cubic-bezier(.22,1,.28,1) .5s; }
html.js-traza .franja-c.se-traza .franja-c__txt{ opacity:1; transform:none; }
html.js-traza .colegio__enca{ opacity:0; transform:translateY(14px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.28,1); }
html.js-traza .colegio__enca.se-traza{ opacity:1; transform:none; }

@media (max-width:900px){
  .franja-c{ width:100%; height:auto; min-height:420px; align-items:end; }
  .franja-c__txt, .franja-c--izq .franja-c__txt, .franja-c--der .franja-c__txt{ width:100%; justify-self:start; padding:120px 5vw 24px; }
  .franja-c::after{ display:none; }
  .franja-c--izq .franja-c__velo, .franja-c--der .franja-c__velo{ background:linear-gradient(to top, var(--v1) 0%, var(--v2) 45%, rgba(12,31,79,0) 75%); }
  .franja-c__fondo{ object-position:60% 50%; }
}

/* ============================================================
   CIERRE "Agenda tu visita": una frase, quién te recibe,
   tres señales como recorrido de puntos, un CTA principal + epílogo.
   ============================================================ */
/* Titular por líneas bajo cortina */
.visita__lin{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.visita__lin > span{ display:block; }
html.js-traza .visita__lin > span{ transform:translateY(108%); transition:transform .95s cubic-bezier(.76,0,.24,1); }
html.js-traza .visita__lin:nth-child(2) > span{ transition-delay:.14s; }
html.js-traza .visita.se-traza .visita__lin > span{ transform:none; }
.visita__txt{ max-width:40ch; }
/* Quién te recibe: serif cálida con hairline dorada que se arma encima */
.visita__quien{
  position:relative; margin:clamp(14px,2.4vh,22px) 0 0; padding-top:16px; max-width:44ch;
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(16.5px,1.3vw,19.5px); line-height:1.45; color:rgba(255,255,255,.94);
}
.visita__quien::before{ content:""; position:absolute; left:0; top:0; width:72px; height:1px; background:var(--oro-vivo); transform:scaleX(0); transform-origin:left center; }
.visita.se-traza .visita__quien::before, html:not(.js-traza) .visita__quien::before{ animation:cta-traza .9s cubic-bezier(.22,1,.28,1) 1s both; }
html.js-traza .visita__quien{ opacity:0; transform:translateY(12px); transition:opacity .7s ease .95s, transform .7s cubic-bezier(.22,1,.28,1) .95s; }
html.js-traza .visita.se-traza .visita__quien{ opacity:1; transform:none; }
/* Tres señales: puntos dorados unidos por una línea que se traza */
.visita__puntos{
  list-style:none; margin:clamp(20px,3.2vh,30px) 0 clamp(20px,3.4vh,32px); padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; position:relative; max-width:600px;
}
.visita__puntos::before{ content:""; position:absolute; left:5px; right:calc(25% - 9px); top:5px; height:1px; background:var(--oro-vivo); transform:scaleX(0); transform-origin:left center; transition:transform 1.4s linear 1.25s; }
.visita.se-traza .visita__puntos::before, html:not(.js-traza) .visita__puntos::before{ transform:scaleX(1); }
.visita__punto{ position:relative; padding-top:20px; }
.visita__punto-b{ position:absolute; left:0; top:0; width:11px; height:11px; 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); }
.visita__punto:nth-child(1){ --pd:1.3s; } .visita__punto:nth-child(2){ --pd:1.7s; } .visita__punto:nth-child(3){ --pd:2.1s; } .visita__punto:nth-child(4){ --pd:2.5s; }
.visita.se-traza .visita__punto-b, html:not(.js-traza) .visita__punto-b{ transform:scale(1); }
.visita__punto-t{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.9); line-height:1.35; opacity:0; transition:opacity .6s ease calc(var(--pd,1.3s) + .12s); }
.visita.se-traza .visita__punto-t, html:not(.js-traza) .visita__punto-t{ opacity:1; }
/* CTA secundario, más discreto */
.visita__cta--2{ font-size:clamp(11.5px,.85vw,12.5px); color:rgba(255,255,255,.78); }
.visita__cta--2::after{ opacity:.55; }
html.js-traza .visita.se-traza .visita__cta::after{ animation-delay:1.6s; }
html.js-traza .visita.se-traza .visita__cta--2::after{ animation-delay:1.9s; }
/* Epílogo: el H1 del hero entre dos filetes que crecen desde el centro */
.epilogo{ background:var(--crema); padding:clamp(30px,5vh,48px) 4vw; display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2vh,20px); text-align:center; }
.epilogo__filete{ display:block; width:min(560px,80vw); height:1px; background:var(--navy); opacity:.55; transform:scaleX(0); transform-origin:center; transition:transform 1.4s cubic-bezier(.45,0,.2,1); }
.epilogo__frase{ margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(19px,1.8vw,26px); line-height:1.3; color:var(--tinta); opacity:0; transform:translateY(8px); transition:opacity .9s ease .5s, transform .9s cubic-bezier(.22,1,.28,1) .5s; }
.epilogo.se-traza .epilogo__filete, html:not(.js-traza) .epilogo__filete{ transform:scaleX(1); }
.epilogo.se-traza .epilogo__frase, html:not(.js-traza) .epilogo__frase{ opacity:1; transform:none; }
@media (max-width:900px){
  .visita__puntos{ grid-template-columns:1fr; gap:10px; max-width:none; }
  .visita__puntos::before{ left:5px; right:auto; width:1px; height:calc(100% - 10px); top:5px; transform:scaleY(0); transform-origin:top center; }
  .visita.se-traza .visita__puntos::before, html:not(.js-traza) .visita__puntos::before{ transform:scaleY(1); }
  .visita__punto{ padding-top:0; padding-left:24px; }
  .visita__punto-b{ top:2px; }
}
@media (prefers-reduced-motion:reduce){
  html.js-traza .visita__lin > span, html.js-traza .visita__quien{ transform:none; opacity:1; transition:none; }
}

@media (max-width:900px){
}

.cab .marca__l3{ display:none; }
.cab .marca__l1, .cab .marca__l2{ font-size:calc(min(2.05vw, 32px) - var(--m,0) * 7px); line-height:1.02; }
.cab .marca__l2{ margin-top:3px; }
@media (max-width:1180px){ .cab .marca__l1, .cab .marca__l2{ font-size:clamp(19px, 2.6vw, 26px); } }
@media (max-width:720px){ .cab .marca__l1, .cab .marca__l2{ font-size:clamp(17px, 4.6vw, 21px); } }

.cab{ position:fixed; left:0; right:0; top:0; transition:background .35s ease, border-color .35s ease; }
.cab.es-transparente{
  background:transparent; border-bottom-color:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.cab.es-transparente .marca__l1,
.cab.es-transparente .marca__l2,
.cab.es-transparente .util a,
.cab.es-transparente .nav a{ color:var(--blanco); }
.cab.es-transparente .marca__l3{ color:var(--oro-vivo); }
.cab.es-transparente .util svg{ fill:var(--blanco); }
.cab.es-transparente .util a:hover,
.cab.es-transparente .util a:hover svg{ color:var(--oro-vivo); fill:var(--oro-vivo); }
.cab.es-transparente .cab__cta{ color:var(--blanco); }
.cab.es-transparente .nav__panel a{ color:var(--tinta); }
.cab.es-transparente .menu span{ background:var(--blanco); }
.cab.es-transparente .marca__sello{ filter:drop-shadow(0 2px 10px rgba(12,31,79,.35)); }

/* ============================================================
   Debajo del hero: marcador de que la página sigue (Fase 1).
   ============================================================ */
.sigue{
  background:var(--crema); color:var(--tinta);
  padding:clamp(48px,7vh,80px) 0;
}
.sigue .marco{ display:grid; gap:10px; }
.sigue__label{ margin:0; font-size:var(--t-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); }
.sigue__h2{ margin:0; font-family:var(--f-display); font-weight:500; font-size:clamp(26px,2.7vw,40px); line-height:1.15; max-width:22ch; }
.sigue__p{ margin:0; max-width:60ch; color:#3C4A6B; }

/* ============================================================
   Móvil — el caso principal.
   ============================================================ */
@media (max-width:720px){
  :root{ --t-h1: clamp(36px, 10vw, 46px); }
  .hero{ min-height:600px; }
  .hero__video{ object-position:50% 22%; }
  .hero__velo{
    background:
      linear-gradient(to top, rgba(12,31,79,.74) 0%, rgba(12,31,79,.36) 42%, rgba(12,31,79,0) 68%);
  }
  .hero__copy{ bottom:112px; }
  .hero__eyebrow{ margin-bottom:10px; font-size:11px; }
  .hero__apoyo{ margin-top:12px; font-size:15px; max-width:34ch; }
  .hero__cta{ margin-top:18px; font-size:12px; }
  /* En móvil el botón dice solo la acción; el título completo
     vive en escritorio y en el banner de admisiones. */
  .solo-esc{ display:none; }
  .hero__pausa{ right:4vw; bottom:32px; width:30px; height:30px; }
  .franja .marco{ flex-direction:column; gap:4px; padding:12px 0 14px; }
  .franja svg{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .hero__copy{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* Menú abierto sobre el video: la cabecera se vuelve sólida y en tinta,
   gane o no la clase es-transparente. */
.cab.menu-abierto{ background:rgba(255,255,255,.98); border-bottom-color:rgba(12,31,79,.10); }
.cab.menu-abierto .marca__l1, .cab.menu-abierto .marca__l2,
.cab.menu-abierto .util a, .cab.menu-abierto .nav a{ color:var(--tinta); }
.cab.menu-abierto .marca__l3{ color:var(--oro); }
.cab.menu-abierto .util svg{ fill:var(--tinta); }
.cab.menu-abierto .cab__cta{ color:var(--tinta); }
.cab.menu-abierto .menu span{ background:var(--tinta); }
.cab.menu-abierto .marca__sello{ filter:none; }

/* ============================================================
   Intro del emblema (por tiempo) + portal flotante
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  display:grid; place-items:center;
  background:rgba(12,31,79,.42);
  transition:background .6s ease;
}
.intro.va{ background:rgba(12,31,79,0); }
.intro img{
  width:clamp(190px, 19vw, 270px); height:auto;
  transform-origin:center center; will-change:transform;
  filter:drop-shadow(0 10px 36px rgba(12,31,79,.6));
  animation:intro-llega .6s cubic-bezier(.22,1,.28,1) both;
}
@keyframes intro-llega{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }
/* Celular (9-nov-2026): arranca en 1% de opacidad en vez de 0. A la vista es igual; Chrome no cuenta como pintado
   un elemento en opacidad 0 y el LCP esperaba a la animación (Lighthouse celular 82→93, LCP 4.1→2.4 s). */
@keyframes intro-llega-movil{ from{ opacity:.01; transform:scale(.92); } to{ opacity:1; transform:none; } }
@media (max-width:900px){ .intro img{ animation-name:intro-llega-movil; } }
/* Mientras vuela, el sello de la cabecera espera escondido y el texto del
   hero entra después de que aterriza. */
/* El anillo del header: destino del vuelo. Espera escondido mientras la intro
   corre; en el header compacto se esconde (ahí ya aparece el isotipo a la
   izquierda y sería doble). */
.cab__anillo{ position:relative; flex:0 0 auto; display:block; width:83px; aspect-ratio:1/1; margin-right:0; transition:opacity .25s ease, width .35s ease; }
.cab__anillo img{ position:absolute; inset:0; width:100%; height:100%; transition:opacity .35s ease; }
.cab__anillo-a{ opacity:1; }            /* azul: header blanco */
.cab__anillo-b{ opacity:0; }            /* blanco: header sobre el video */
.cab.es-transparente .cab__anillo-a{ opacity:0; }
.cab.es-transparente .cab__anillo-b{ opacity:1; }
html.intro-viva .cab__anillo{ opacity:0; }
.cab .cab__anillo{ width:calc(83px - var(--m,0) * 39.5px); opacity:calc(1 - var(--m,0) * 1.6); }
@media (max-width:1180px){ .cab__anillo{ display:none; } }
html.intro-viva .hero__copy{ animation-delay:3.05s; }

/* Portal de pagos como utilidad discreta en la fila del menú,
   sin flotar sobre el hero. */
.cab__util{
  position:relative; margin-left:auto; padding:5px 0 5px clamp(14px,1.6vw,26px);
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(12,31,79,.62); text-decoration:none; white-space:nowrap; transition:color .25s ease;
}
.cab__util::before{ content:""; position:absolute; left:0; top:50%; width:1px; height:16px; transform:translateY(-50%); background:rgba(12,31,79,.22); }
.cab__util:hover{ color:var(--tinta); }
.cab.es-transparente .cab__util{ color:rgba(255,255,255,.78); }
.cab.es-transparente .cab__util::before{ background:rgba(255,255,255,.35); }
.cab.es-transparente .cab__util:hover{ color:#fff; }
.cab.menu-abierto .cab__util{ order:4; margin:14px 0 0; padding:8px 0; font-size:13px; color:rgba(12,31,79,.7); }
.cab.menu-abierto .cab__util::before{ display:none; }
.cab__cta{ margin-left:0; }
.nav a, .nav__padre{ white-space:nowrap; }
@media (max-width:1300px){ .cab__util{ padding-left:12px; font-size:10px; } .cab__fila2{ gap:clamp(12px,1.4vw,22px); } .nav{ gap:clamp(10px,1.3vw,22px); } }
@media (prefers-reduced-motion:reduce){ .intro{ display:none; } }

/* ============================================================
   Títulos de sección = tamaño del H1 del hero, y la línea que se arma
   encima de cada eyebrow, del color del eyebrow: azul sobre claro,
   dorada sobre oscuro/foto.
   ============================================================ */
.niveles__tit, .vida__tit, .visita__tit{
  font-size:min(var(--t-h1), 4.3vw) !important; line-height:1.06 !important; letter-spacing:-.012em;
}
.niveles__tit, .vida__tit{ white-space:nowrap; max-width:none !important; }
@media (max-width:900px){
  .niveles__tit, .vida__tit, .visita__tit{ font-size:clamp(30px,8.4vw,40px) !important; white-space:normal; text-wrap:balance; }
}
.colegio__ante::before, .niveles__ante::before, .vida__ante::before, .visita__ante::before, .franja-c__ante::before{
  content:""; display:block; width:72px; height:1px; margin-bottom:14px;
  background:var(--navy); transform:scaleX(0); transform-origin:left center;
}
.visita__ante::before, .franja-c__ante::before{ background:var(--oro-vivo); }
/* se arma cuando su bloque entra; sin JS, ya está armada */
html:not(.js-traza) .colegio__ante::before, html:not(.js-traza) .niveles__ante::before, html:not(.js-traza) .vida__ante::before, html:not(.js-traza) .visita__ante::before, html:not(.js-traza) .franja-c__ante::before{ transform:none; }
.colegio__enca.se-traza .colegio__ante::before, .niveles__enca.se-traza .niveles__ante::before, .vida__enca.se-traza .vida__ante::before, .visita.se-traza .visita__ante::before, .franja-c.se-traza .franja-c__ante::before{
  animation:cta-traza .9s cubic-bezier(.22,1,.28,1) .15s both;
}
.franja-c.se-traza .franja-c__ante::before{ animation-delay:.6s; }

/* ============================================================
   NIVELES · retratos con nombre — A SANGRE, doble página de revista
   Cuatro retratos 3:4 pegados de borde a borde; el texto vive sobre la
   foto: grado en dorado, nombre en serif grande, cita en cursiva, link.
   ============================================================ */
.retratos{ background:var(--crema); padding:clamp(32px,5.5vh,64px) 0 clamp(36px,6vh,72px); overflow:hidden; }
.retratos__enca{ margin-bottom:clamp(20px,3.4vh,36px); }
.retratos__grid{ list-style:none; margin:0; padding:0 clamp(10px,1.2vw,18px); display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(10px,1.2vw,18px); }
.retrato__card{ position:relative; display:block; color:var(--blanco); text-decoration:none; isolation:isolate; overflow:hidden; background:var(--noche); height:clamp(500px, 70vh, 760px); }
.retrato__foto{ position:absolute; inset:0; }
.retrato__foto img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%;
  transform:scale(1.001); transition:transform 1.8s cubic-bezier(.22,1,.28,1), filter .6s ease;
}
.retrato__card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(12,31,79,.82) 0%, rgba(12,31,79,.62) 12%, rgba(12,31,79,.18) 26%, rgba(12,31,79,0) 34%),
    linear-gradient(to top, rgba(12,31,79,.86) 0%, rgba(12,31,79,.5) 34%, rgba(12,31,79,0) 62%);
}
/* ---- ARRIBA, dentro de la foto: el grado en blanco y el lema del nivel en
   oro. Mismo gesto que el resto del sitio: hairline que se traza sobre una
   linea en mayusculas, y la frase en serif. Sin caja. ---- */
/* La banda del nivel tiene alto fijo para que las 4 cards alineen: "Maternal
   y preescolar" ocupa dos lineas y las demas una. (Se probó que el fondo
   siguiera con la foto en vez de banda fija; se descartó por verse forzado.) */
.retrato{ position:relative; --banda:clamp(66px,5.7vw,90px); }
.retrato__eti{
  position:relative; z-index:1;
  margin:0; padding:0 0 clamp(9px,1.2vh,13px);
  height:var(--banda); display:flex; flex-direction:column; justify-content:flex-end;
  font-size:clamp(15px,1.33vw,22px); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#004484;
  line-height:1.22;
}
.retrato__eti::before{
  content:""; display:block; width:0; height:1px; margin-bottom:10px;
  background:var(--oro-vivo);
  transition:width .7s cubic-bezier(.22,1,.28,1) .45s;
}
.retratos__grid.se-traza .retrato__eti::before, html:not(.js-traza) .retrato__eti::before{ width:40px; }
.retrato:hover .retrato__eti::before, .retrato:focus-within .retrato__eti::before{
  width:100%; transition:width .55s cubic-bezier(.22,1,.28,1) 0s;
}
.retrato__alto{
  position:absolute; left:0; right:0; top:0; z-index:1;
  padding:clamp(15px,2.2vh,26px) clamp(16px,1.6vw,28px) 0;
  text-shadow:0 1px 2px rgba(12,31,79,.5), 0 2px 18px rgba(12,31,79,.45);
}
.retrato__lema{
  margin:0; font-family:var(--f-display); font-weight:500;
  font-size:clamp(19px,1.72vw,27px); line-height:1.12; letter-spacing:-.01em;
  color:var(--oro-vivo);
}
/* el grado del alumno: chico, bajo su nombre */
.retrato__grado{
  display:block; margin-top:9px; font-size:clamp(10.5px,.78vw,12px); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--oro-vivo);
}
.retratos__grid:hover .retrato__card:not(:hover) .retrato__foto img{ filter:saturate(.7) brightness(.82); }
.retrato__card:hover .retrato__foto img{ transform:scale(1.05); }
.retrato__pie{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:0 clamp(16px,1.6vw,28px) clamp(18px,2.4vh,30px); text-shadow:0 1px 2px rgba(12,31,79,.5), 0 2px 18px rgba(12,31,79,.45); transition:translate .55s cubic-bezier(.22,1,.28,1); }
/* Hover: el bloque de texto sube entero (propiedad
   `translate`, aparte del `transform` del reveal, para no pelear con él) y
   el llamado crece y se pone dorado — se lee "entra aquí" sin volverse caja. */
.retrato__card:hover .retrato__pie{ translate:0 -14px; }
.retrato__card::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; background:linear-gradient(to top, rgba(12,31,79,.55) 0%, rgba(12,31,79,0) 55%); transition:opacity .55s ease; }
.retrato__card:hover::before{ opacity:1; }
.retrato__quien{ margin:0 0 7px; }
.retrato__grado::before{ content:""; display:block; width:40px; height:1px; margin-bottom:10px; background:var(--oro-vivo); transform:scaleX(0); transform-origin:left center; transition:transform .7s cubic-bezier(.22,1,.28,1) .6s; }
.retratos__grid.se-traza .retrato__grado::before, html:not(.js-traza) .retrato__grado::before{ transform:scaleX(1); }
.retrato__nombre{ font-family:var(--f-display); font-weight:500; font-size:clamp(22px,2.02vw,31px); line-height:1; letter-spacing:-.012em; }
.retrato__frase{ margin:0 0 11px; font-family:var(--f-display); font-style:italic; font-weight:400; font-size:clamp(13px,.98vw,15.5px); line-height:1.4; color:rgba(255,255,255,.9); max-width:26ch; }
.retrato__ir{
  position:relative; display:inline-flex; align-items:center; gap:8px; padding-bottom:5px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blanco);
  transform-origin:left bottom; transition:transform .5s cubic-bezier(.22,1,.28,1), color .35s ease;
}
.retrato__card:hover .retrato__ir{ transform:scale(1.32); color:var(--oro-vivo); }
@media (hover:none){ .retrato__ir{ font-size:13.5px; color:var(--oro-vivo); } .retrato__ir::after{ transform:scaleX(1); } }
.retrato__ir::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--oro-vivo); transform:scaleX(.35); transform-origin:left center; transition:transform .5s cubic-bezier(.22,1,.28,1); }
.retrato__card:hover .retrato__ir::after{ transform:scaleX(1); }
.retrato__ir svg{ width:14px; height:14px; transition:transform .3s ease; }
.retrato__card:hover .retrato__ir svg{ transform:translateX(4px); }
.retrato__card:focus-visible{ outline:2px solid var(--oro-vivo); outline-offset:-3px; }
.retratos__cierre{ margin:clamp(22px,4vh,40px) 0 0; text-align:center; font-family:var(--f-display); font-style:italic; font-size:clamp(20px,1.9vw,28px); color:var(--tinta); }
.retratos__cierre .niveles__frase{ display:inline; }

/* Reveal: cada retrato abre su cortina en escalera; el texto sube después. */
html.js-traza .retrato__foto img{ clip-path:polygon(0 0, 6% 0, -6% 100%, 0 100%); transition:clip-path 1s cubic-bezier(.22,1,.28,1) var(--esc,0s), transform 1.8s cubic-bezier(.22,1,.28,1), filter .6s ease; }
html.js-traza .retratos__grid.se-traza .retrato__foto img{ clip-path:polygon(0 0, 118% 0, 100% 100%, 0 100%); }
html.js-traza .retrato__pie{ opacity:0; transform:translateY(10px); transition:opacity .7s ease calc(var(--esc,0s) + .45s), transform .7s cubic-bezier(.22,1,.28,1) calc(var(--esc,0s) + .45s), translate .55s cubic-bezier(.22,1,.28,1); }
html.js-traza .retratos__grid.se-traza .retrato__pie{ opacity:1; transform:none; }
html.js-traza .retrato__alto{ opacity:0; transform:translateY(-10px); transition:opacity .7s ease calc(var(--esc,0s) + .4s), transform .7s cubic-bezier(.22,1,.28,1) calc(var(--esc,0s) + .4s); }
html.js-traza .retratos__grid.se-traza .retrato__alto{ opacity:1; transform:none; }
.retrato:nth-child(2){ --esc:.14s; } .retrato:nth-child(3){ --esc:.28s; } .retrato:nth-child(4){ --esc:.42s; }

@media (max-width:900px){
  .retratos__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; padding:0 8px; }
  .retrato__card{ height:auto; aspect-ratio:3/5; }
  .retrato__alto{ padding:14px 14px 0; }
  .retrato__foto img{ object-position:50% 12%; }
  .retrato__pie{ padding:0 14px 16px; }
  .retrato__nombre{ font-size:24px; }
  .retrato__frase{ font-size:13.5px; max-width:none; }
  .retratos__grid:hover .retrato__card:not(:hover) .retrato__foto img{ filter:none; }
}

.trayecto{
  list-style:none; margin:clamp(14px,2.4vh,24px) 0 0; padding:0 clamp(10px,1.2vw,18px);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(10px,1.2vw,18px);
  position:relative;
}
.trayecto::before{
  content:""; position:absolute; left:clamp(10px,1.2vw,18px); right:clamp(10px,1.2vw,18px); top:5px; height:1px;
  background:var(--oro-vivo); transform:scaleX(0); transform-origin:left center;
  /* se traza de izquierda a derecha, lineal, para que se vea avanzar */
  transition:transform 2.2s linear;
}
.trayecto.se-traza::before, html:not(.js-traza) .trayecto::before{ transform:scaleX(1); }
.trayecto__p{ position:relative; padding-top:24px; text-align:center; }
.trayecto__punto{
  position:absolute; left:50%; top:-3px; width:17px; height:17px; margin-left:-8.5px; border-radius:50%;
  background:var(--oro-vivo); border:3px solid var(--crema); box-shadow:0 0 0 2px var(--oro-vivo);
  transform:scale(0); transition:transform .5s cubic-bezier(.34,1.5,.64,1) var(--td,0s);
}
/* cada punto aparece cuando la línea llega a su altura (12 % · 37 % · 62 % · 87 % de 2.2 s) */
.trayecto__p:nth-child(1){ --td:.26s; } .trayecto__p:nth-child(2){ --td:.81s; } .trayecto__p:nth-child(3){ --td:1.36s; } .trayecto__p:nth-child(4){ --td:1.91s; }
.trayecto.se-traza .trayecto__punto, html:not(.js-traza) .trayecto__punto{ transform:scale(1); }
.trayecto__eti{ display:block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); opacity:0; transition:opacity .6s ease calc(var(--td,0s) + .15s); }
.trayecto.se-traza .trayecto__eti, html:not(.js-traza) .trayecto__eti{ opacity:1; }
@media (max-width:900px){
  .trayecto{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px; padding:0 8px; }
  .trayecto::before{ left:8px; right:8px; }
  .trayecto__eti{ font-size:9.5px; letter-spacing:.08em; }
}

/* Firma: anillo NK antes de la frase + el glow que la recorre (el de master:
   una sola banda dorada, lenta y constante). Arranca cuando el anillo llega. */
/* Cierre: el anillo llega como estrella (escala + giro corto + destello),
   la frase se arma de izquierda a derecha y desde entonces una banda dorada
   recorre anillo y frase a la vez (misma animación `glow-cruza` de master,
   sobre la frase por background-clip y sobre el anillo por máscara). */
.retratos__cierre{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,1.4vw,22px); flex-wrap:wrap; }
.retratos__sello{ position:relative; display:inline-block; flex:0 0 auto; width:clamp(58px,4.6vw,70px); aspect-ratio:339/360; opacity:0; transform:scale(.35) rotate(-18deg); transition:opacity .5s ease, transform .95s cubic-bezier(.34,1.45,.64,1); }
.retratos__anillo{ display:block; width:100%; height:auto; }
.retratos__luz{ position:absolute; inset:0; pointer-events:none;
  -webkit-mask:url("../assets/isotipo-nk.png") center/contain no-repeat; mask:url("../assets/isotipo-nk.png") center/contain no-repeat;
  background:linear-gradient(100deg, rgba(249,198,88,0) 30%, rgba(249,198,88,.55) 42%, rgba(255,236,190,1) 50%, rgba(249,198,88,.55) 58%, rgba(249,198,88,0) 70%);
  background-size:320% 100%; background-position:160% 0; }
.retratos__cierre.se-traza .retratos__sello, html:not(.js-traza) .retratos__sello{ opacity:1; transform:none; }
.retratos__cierre.se-traza .retratos__sello{ animation:sello-destello 1.6s ease-out .5s 1; }
@keyframes sello-destello{ 0%{ filter:drop-shadow(0 0 0 rgba(249,198,88,0)); } 30%{ filter:drop-shadow(0 0 18px rgba(249,198,88,.85)); } 100%{ filter:drop-shadow(0 0 0 rgba(249,198,88,0)); } }
.retratos__cierre .niveles__frase{ display:inline-block; position:relative; clip-path:inset(0 100% 0 0); transition:clip-path 1.5s cubic-bezier(.22,1,.28,1) .75s; }
.retratos__cierre.se-traza .niveles__frase, html:not(.js-traza) .retratos__cierre .niveles__frase{ clip-path:inset(0 0 0 0); }
/* Una sola banda para anillo + frase: se anima --gp (avance, -1 → 1) en el
   cierre y cada pieza pinta el mismo degradado, del ancho del cierre,
   corrido por su offset — así la luz cruza el anillo y sigue por la frase
   sin cortarse. Sin @property (Safari viejo) no hay banda, nada se rompe. */
@property --gp{ syntax:'<number>'; inherits:true; initial-value:-1; }
.retratos__cierre{ --cw:900px; --gp:-1; }
.retratos__cierre .retratos__luz, .retratos__cierre .niveles__frase::after{
  background-image:linear-gradient(100deg, rgba(249,198,88,0) 32%, rgba(249,198,88,.55) 42%, rgba(255,236,190,1) 50%, rgba(249,198,88,.55) 58%, rgba(249,198,88,0) 68%);
  background-repeat:no-repeat; background-size:var(--cw) 100%;
  background-position:calc(var(--gp) * var(--cw) - var(--ox, 0px)) 0;
}
@keyframes glow-cierre{ 0%{ --gp:-1; } 78%{ --gp:1; } 100%{ --gp:1; } }
.retratos__cierre.se-traza, html:not(.js-traza) .retratos__cierre{ animation:glow-cierre 18s linear 2.2s infinite; }
@media (prefers-reduced-motion:reduce){ .retratos__cierre, .retratos__sello{ animation:none; } }
@media (max-width:900px){ .retratos__cierre{ gap:12px; } .retratos__sello{ width:48px; } }

/* En ≤900 el llamado del header se esconde: sin esto no hay forma de agendar
   desde el celular, que es por donde llega la mayoría. Mismo gesto que el
   resto de los llamados: texto en mayúsculas con subrayado dorado. */
.hero__ir{ display:none; }
@media (max-width:900px){
  .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;
  }
}
.hero__ir:focus-visible{ outline:2px solid var(--oro-vivo); outline-offset:3px; }
.cab__anillo{ --sello:100px; width:var(--sello); }
.cab .cab__anillo{ width:calc(var(--sello) - var(--m,0) * (var(--sello) - 43.5px)); margin-block:calc(-4px * (1 - var(--m,0))); }
@media (max-width:1400px){ .cab__anillo{ --sello:92px; margin-left:-6px; } }
.cab.es-transparente .cab__anillo-b{ filter:drop-shadow(0 1px 5px rgba(12,31,79,.55)); }

.retrato__card::after{
  background:linear-gradient(to top, rgba(12,31,79,.92) 0%, rgba(12,31,79,.74) 22%, rgba(12,31,79,.34) 42%, rgba(12,31,79,0) 58%);
}
.retrato__nivel{
  margin:0; font-family:var(--f-display); font-weight:500; color:var(--blanco);
  font-size:clamp(24px,2.05vw,32px); line-height:1.05; letter-spacing:-.012em;
}
.retrato__pie .retrato__lema{
  margin:5px 0 0; font-family:var(--f-display); font-style:italic; font-weight:400; color:var(--oro-vivo);
  font-size:clamp(15px,1.12vw,18px); line-height:1.2;
}
.retrato__pie .retrato__lema::after{
  content:""; display:block; width:0; height:1px; margin:12px 0 11px; background:var(--oro-vivo);
  transition:width .7s cubic-bezier(.22,1,.28,1) calc(var(--esc,0s) + .6s);
}
.retratos__grid.se-traza .retrato__lema::after, html:not(.js-traza) .retrato__lema::after{ width:40px; }
.retrato__card:hover .retrato__lema::after, .retrato__card:focus-visible .retrato__lema::after{ width:100%; transition-delay:0s; transition-duration:.55s; }
.retrato__frase{ margin:0 0 12px; font-size:clamp(12.5px,.9vw,14px); line-height:1.35; max-width:none; color:rgba(255,255,255,.88); }
.retrato__firma{ font-style:normal; font-family:var(--f-text); font-size:.86em; letter-spacing:.02em; color:rgba(255,255,255,.72); white-space:nowrap; }
@media (min-width:901px){
  .retratos__enca{ margin-bottom:clamp(10px,1.6vh,18px); }
  .retrato__card{ height:clamp(380px, calc(100vh - 230px), 700px); }
}
@media (max-width:900px){
  /* celular: card un poco más alta y la foto anclada arriba, para que el texto no llegue a la barbilla */
  .retrato__card{ aspect-ratio:5/9.4; }
  .retrato__foto img{ object-position:50% 4%; }
  .retrato__pie{ padding:0 12px 14px; }
  .retrato__nivel{ font-size:19px; }
  .retrato__pie .retrato__lema{ font-size:13px; margin-top:3px; }
  .retrato__pie .retrato__lema::after{ margin:9px 0 8px; }
  .retrato__frase{ font-size:12px; margin-bottom:9px; }
  .retrato__ir{ font-size:12px !important; }
}

.visita__quien{ max-width:58ch; }

.cab__anillo--v4{ --sello:83px; color:#004484; transition:opacity .25s ease, width .35s ease, color .35s ease; }
@media (max-width:1400px){ .cab__anillo--v4{ --sello:83px; margin-left:0; } }
.cab.es-transparente .cab__anillo--v4{ color:#fff; filter:drop-shadow(0 1px 2px rgba(12,31,79,.55)) drop-shadow(0 3px 12px rgba(12,31,79,.45)); }
.cab.es-transparente .cab__anillo--v4 .cab__anillo-b{ filter:none; }
.cab__sello{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cab__sello text{ fill:currentColor; font-family:var(--f-text,'Montserrat',sans-serif); }
.cab__sello-t1{ font-size:26px; font-weight:800; letter-spacing:2px; }
.cab__sello-t2{ font-size:15.5px; font-weight:700; letter-spacing:1.2px; }
.cab__anillo--v4 img{ inset:auto; left:50%; top:50%; width:44%; height:auto; transform:translate(-50%,-50%); }
/* entre 1181 y 1400 px el menú empujaba el sello fuera del margen (41 px a 1366): se aprieta el menú, no el sello */
@media (min-width:1181px) and (max-width:1400px){
  .cab .cab__fila2{ gap:clamp(12px,1.5vw,22px); }
  .cab .nav{ gap:clamp(10px,1.15vw,18px); }
  .cab .nav a{ letter-spacing:.1em; }
  .cab__in{ gap:14px; }
}
/* debajo de 1260 px no cabe con su margen: se oculta (antes se ocultaba en 1180) */
@media (max-width:1260px){ .cab__anillo{ display:none; } }

:root{ --cab-c:71px; }
@media (min-width:1181px){ :root{ --cab-c:62px; } }
@media (min-width:1401px){ :root{ --cab-c:69px; } }
@media (min-width:901px){
  /* Retratos de niveles: título + cards + firma en una pantalla. Se aprieta el aire (arriba, eyebrow→título,
     título→cards, cards→firma, abajo) y la card toma el resto del alto útil. */
  .retratos{ padding:clamp(12px,2.2vh,28px) 0 clamp(12px,2.4vh,30px); }
  .retratos .niveles__ante{ margin-bottom:clamp(6px,1.2vh,14px); }
  .retratos__enca{ margin-bottom:clamp(8px,1.4vh,16px); }
  .retrato__card{ height:clamp(330px, calc(100svh - var(--cab-c) - 272px), 700px); }
  .retratos__cierre{ margin-top:clamp(8px,1.6vh,20px); }
  /* Vida escolar: el mismo aire, más apretado; la tira de fotos toma lo que sobra (lo calcula alt.js) */
  .vida{ padding:clamp(12px,2.2vh,30px) 0 clamp(12px,2.2vh,30px); }
  .vida__ante{ margin-bottom:clamp(6px,1.2vh,14px); }
  .vida__tit{ margin-bottom:clamp(6px,1vh,12px); }
  .vida__enca{ margin-bottom:clamp(10px,1.8vh,22px); }
  .vida__cierre{ margin-top:clamp(8px,1.4vh,18px); }
  .vida__redes{ margin-top:clamp(8px,1.4vh,18px); }
}

@media (min-width:1181px){
  .cab__fila2 .cab__cta{ font-size:clamp(14px, 1.02vw, 15.5px); letter-spacing:.07em; padding:6px 0; }
  .cab__fila2 .cab__cta::after{ height:2.5px; }
}
.cab .marca__sello{ transition:opacity .3s ease; }
html.intro-viva .cab .marca__sello{ opacity:0; }

.colegio__pila{ position:relative; }
.colegio__15{
  position:absolute; z-index:3; right:8vw; bottom:calc(clamp(364px, 46vh, 480px) / 2);
  width:clamp(150px, 12vw, 205px); aspect-ratio:1; color:var(--navy, #0C1F4F);
  transform:translate(50%, 50%) rotate(-10deg); opacity:.9; pointer-events:none;
}
.colegio__15 svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.colegio__15 text{ fill:currentColor; font-family:var(--f-text,'Montserrat',sans-serif); }
.colegio__15-t1{ font-size:26px; font-weight:800; letter-spacing:2px; }
.colegio__15-t2{ font-size:15.5px; font-weight:700; letter-spacing:1.2px; }
.colegio__15 img{ position:absolute; left:50%; top:50%; width:44%; height:auto; transform:translate(-50%,-50%); }
html.js-traza .colegio__15{ opacity:0; }
html.js-traza .franja-c.se-traza + .colegio__15{ animation:f15-estampa .55s cubic-bezier(.3,1.4,.5,1) 1.25s both; }
@keyframes f15-estampa{
  0%  { opacity:0;   transform:translate(50%,50%) rotate(-3deg) scale(1.9); }
  55% { opacity:.95; transform:translate(50%,50%) rotate(-11deg) scale(.93); }
  75% { opacity:.9;  transform:translate(50%,50%) rotate(-9.5deg) scale(1.03); }
  100%{ opacity:.9;  transform:translate(50%,50%) rotate(-10deg) scale(1); }
}
@media (max-width:900px){
  .colegio__15{ position:relative; right:auto; bottom:auto; justify-self:center; margin:26px 0 6px;
    width:128px; transform:rotate(-10deg); }
  html.js-traza .franja-c.se-traza + .colegio__15{ animation-name:f15-estampa-m; animation-delay:.6s; }
  @keyframes f15-estampa-m{ 0%{opacity:0;transform:rotate(-3deg) scale(1.9)} 55%{opacity:.95;transform:rotate(-11deg) scale(.93)} 75%{opacity:.9;transform:rotate(-9.5deg) scale(1.03)} 100%{opacity:.9;transform:rotate(-10deg) scale(1)} }
}
@media (prefers-reduced-motion:reduce){ html.js-traza .colegio__15{ opacity:.9; animation:none !important; } }

.colegio__pila{ --fH:clamp(364px, 46vh, 480px); }
.colegio__15--f1, .colegio__15--f2{ bottom:auto; }
.colegio__15--f1{ top:calc(var(--fH) / 2); right:8vw; transform:translate(50%,-50%) rotate(-10deg); }
.colegio__15--f2{ top:calc(var(--fH) * 1.5); right:auto; left:8vw; transform:translate(-50%,-50%) rotate(8deg); }
html.js-traza .franja-c.se-traza + .colegio__15--f1{ animation:f15-estampa-f1 .55s cubic-bezier(.3,1.4,.5,1) 1.25s both; }
html.js-traza .franja-c.se-traza + .colegio__15--f2{ animation:f15-estampa-f2 .55s cubic-bezier(.3,1.4,.5,1) 1.25s both; }
@keyframes f15-estampa-f1{ 0%{opacity:0;transform:translate(50%,-50%) rotate(-3deg) scale(1.9)} 55%{opacity:.95;transform:translate(50%,-50%) rotate(-11deg) scale(.93)} 75%{opacity:.9;transform:translate(50%,-50%) rotate(-9.5deg) scale(1.03)} 100%{opacity:.9;transform:translate(50%,-50%) rotate(-10deg) scale(1)} }
@keyframes f15-estampa-f2{ 0%{opacity:0;transform:translate(-50%,-50%) rotate(2deg) scale(1.9)} 55%{opacity:.95;transform:translate(-50%,-50%) rotate(9deg) scale(.93)} 75%{opacity:.9;transform:translate(-50%,-50%) rotate(7.5deg) scale(1.03)} 100%{opacity:.9;transform:translate(-50%,-50%) rotate(8deg) scale(1)} }
@media (max-width:900px){
  .colegio__15--f1, .colegio__15--f2{ position:relative; top:auto; left:auto; right:auto; transform:rotate(-10deg); }
  html.js-traza .franja-c.se-traza + .colegio__15--f1, html.js-traza .franja-c.se-traza + .colegio__15--f2{ animation-name:f15-estampa-m; animation-delay:.6s; }
}
html[data-quince="b"] .colegio__15--f1, html[data-quince="b"] .colegio__15--f2{ display:none; }
.visita .visita__cta--2{ font-size:clamp(12.5px,1vw,14.5px); letter-spacing:.11em; color:#fff; }
.visita .visita__cta--2::after{ opacity:1; }

.franja-c__p:has(+ .franja-c__p){ margin-bottom:6px; }
@media (min-width:901px){
  .franja-c:has(.franja-c__p + .franja-c__p){ height:auto; min-height:clamp(364px, 46vh, 480px); padding-block:36px; }
}

/* Encuadre por foto: solo decide qué parte de la foto se ve, para que no se corten las caras. */
@media (max-width:900px){
  img[src*="hero-1-amigos"],img[data-src*="hero-1-amigos"]{ object-position:82% 40% !important; }
  img[src*="hero-4-escolta"],img[data-src*="hero-4-escolta"]{ object-position:60% 40% !important; }
  img[src*="hero-6-preescolar"],img[data-src*="hero-6-preescolar"]{ object-position:50% 40% !important; }
  img[src*="hero-5-primaria"],img[data-src*="hero-5-primaria"]{ object-position:15% 40% !important; }
  img[src*="bach-hero"],img[data-src*="bach-hero"]{ object-position:78% 40% !important; }
  img[src*="pre-hero"],img[data-src*="pre-hero"]{ object-position:78% 40% !important; }
  img[src*="prim-hero"],img[data-src*="prim-hero"]{ object-position:72% 40% !important; }
  img[src*="bach-convivencia"],img[data-src*="bach-convivencia"]{ object-position:72% 50% !important; }
  img[src*="bach-proyectos"],img[data-src*="bach-proyectos"]{ object-position:62% 50% !important; }
  img[src*="sec-esp-computo"],img[data-src*="sec-esp-computo"]{ object-position:70% 50% !important; }
  img[src*="sec-esp-biblioteca"],img[data-src*="sec-esp-biblioteca"]{ object-position:62% 50% !important; }
  img[src*="sec-esp-laboratorio"],img[data-src*="sec-esp-laboratorio"]{ object-position:75% 50% !important; }
  img[src*="vida-mp08"],img[data-src*="vida-mp08"]{ object-position:20% 35% !important; }
  img[src*="vida-pr03"],img[data-src*="vida-pr03"]{ object-position:10% 35% !important; }
}
@media (min-width:901px){
  img[src*="sec-esp-laboratorio"],img[data-src*="sec-esp-laboratorio"]{ object-position:85% 50% !important; }
  img[src*="sec-esp-computo"],img[data-src*="sec-esp-computo"]{ object-position:72% 50% !important; }
  img[src*="prim-esp-computo"],img[data-src*="prim-esp-computo"]{ object-position:68% 50% !important; }
  img[src*="pre-esp-recreo"],img[data-src*="pre-esp-recreo"]{ object-position:25% 50% !important; }
  img[src*="pre-esp-natacion"],img[data-src*="pre-esp-natacion"]{ object-position:40% 50% !important; }
  img[src*="franja-ensenar"],img[data-src*="franja-ensenar"]{ object-position:50% 32% !important; }
  img[src*="prim-hero"],img[data-src*="prim-hero"]{ object-position:58% 15% !important; }
  img[src*="sec-hero"],img[data-src*="sec-hero"]{ object-position:58% 25% !important; }
  img[src*="ed-mamas"],img[data-src*="ed-mamas"]{ object-position:50% 20% !important; }
  img[src*="vida-mp08"],img[data-src*="vida-mp08"]{ object-position:20% 35% !important; }
  img[src*="vida-pr03"],img[data-src*="vida-pr03"]{ object-position:10% 35% !important; }
  img[src*="vida-hh13"],img[data-src*="vida-hh13"]{ object-position:40% 35% !important; }
}