/* =====================================================================
   BLOQUE 5 — NIVELES ACADEMICOS
   ADN de las cards del bloque 2, mismo feel & touch: hover = la tocada
   crece, las otras encogen, brillo que barre, flecha que avanza, texto
   completo que se despliega. Sin escena de scroll.
   ===================================================================== */
:root{ --crema:#FBF7EE; }   /* blanco calido con un pelo de oro: ADN NK */
.niveles{
  background:var(--crema);
  /* El aire lo pagan las cards (el JS les quita alto), no los textos. */
  padding:clamp(30px,5.6vh,76px) 0 clamp(34px,6.2vh,84px);
  scroll-margin-top:calc(var(--cab-h, 95px) + 12px);
}
.niveles__enca{ margin:0 0 clamp(20px,3.8vh,34px); text-align:left; }
.niveles__ante{
  margin:0 0 clamp(12px,2.4vh,20px); font-size:15.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#004484;
}
.niveles__tit{
  margin:0; max-width:none;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(27px,2.8vw,44px); line-height:1.15; color:var(--tinta);
}

/* ---- las cuatro cards ------------------------------------------------ */
.niveles__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(14px,1.6vw,26px);
}
.nivel{ margin:0; min-width:0; }
.nivel__card{
  position:relative; display:block; overflow:hidden; border-radius:14px;
  height:var(--nivel-alto, auto); aspect-ratio:3 / 4;
  background:var(--tinta); isolation:isolate; text-decoration:none; color:inherit;
  transition:transform .42s cubic-bezier(.22,1,.28,1), box-shadow .42s ease;
}
@media (min-width:901px){ .niveles[style*="--nivel-alto"] .nivel__card{ aspect-ratio:auto; } }
.nivel__foto{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 25%;
}
/* Degradado calcado de .campus__cara--frente::after */
.nivel__card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(12,31,79,0)   30%,
    rgba(12,31,79,.34) 55%,
    rgba(12,31,79,.72) 78%,
    rgba(12,31,79,.92) 100%);
}
/* El brillo que barre: mismo que .campus__brillo, misma keyframe. */
.nivel__brillo{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(105deg,
    transparent 34%, rgba(255,255,255,.30) 47%,
    rgba(255,255,255,.06) 56%, transparent 66%);
  transform:translateX(-120%); opacity:0;
}
.nivel__pie{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 clamp(14px,5%,28px) clamp(18px,4.2%,30px);
  color:var(--blanco);
}
.nivel__nom{
  margin:0; font-family:var(--f-display); font-weight:400;
  font-size:clamp(20px,1.9vw,28px); line-height:1.1; color:var(--blanco);
}
.nivel__lema{
  margin:clamp(4px,.5vw,8px) 0 0; color:var(--oro-vivo);
  font-family:var(--f-text); font-weight:700; text-transform:uppercase;
  font-size:clamp(11.5px,1vw,14.5px); letter-spacing:.13em; line-height:1.3;
}
/* En reposo la card dice lo minimo: nombre y lema. El texto y el CTA se
   despliegan al pasar el cursor. */
.nivel__txt{
  margin:0; max-width:34ch; overflow:hidden;
  font-family:var(--f-text); font-weight:500;
  font-size:clamp(13.5px,1vw,15px); line-height:1.45; color:rgba(255,255,255,.88);
  max-height:0; opacity:0;
  transition:max-height .55s cubic-bezier(.22,1,.28,1), opacity .4s ease, margin-top .55s cubic-bezier(.22,1,.28,1);
}
.nivel__ir{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  margin-top:0; max-height:0; opacity:0; overflow:hidden;
  font-family:var(--f-text); font-weight:700; text-transform:uppercase;
  font-size:clamp(11.5px,.95vw,14px); letter-spacing:.11em; color:var(--blanco);
  white-space:nowrap; padding-bottom:8px;
  transition:max-height .55s cubic-bezier(.22,1,.28,1), opacity .4s ease, margin-top .55s cubic-bezier(.22,1,.28,1), color .3s ease;
}
.nivel__ir svg{ width:14px; height:14px; transition:transform .3s ease; }
.nivel__ir::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; border-radius:2px; background:var(--oro-vivo);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .6s cubic-bezier(.22,1,.28,1) .25s;
}
.nivel__card.esta-abierta .nivel__txt,
.nivel__card.esta-abierta .nivel__ir{ max-height:8em; opacity:1; margin-top:clamp(8px,1vw,12px); }
.nivel__card.esta-abierta .nivel__ir::after{ transform:scaleX(1); }
@media (hover:hover) and (pointer:fine){
  .niveles__grid:hover .nivel__card{ transform:scale(.93); }
  .niveles__grid:hover .nivel__card:hover{
    transform:scale(1.06);
    box-shadow:0 24px 58px rgba(12,31,79,.28);
  }
  .nivel__card:hover .nivel__brillo{ animation:campus-brillo 780ms cubic-bezier(.22,1,.28,1) both; }
  .nivel__card:hover .nivel__txt,
  .nivel__card:hover .nivel__ir{ max-height:8em; opacity:1; margin-top:clamp(8px,1vw,12px); }
  .nivel__card:hover .nivel__ir::after{ transform:scaleX(1); }
  .nivel__card:hover .nivel__ir{ color:var(--oro-vivo); }
  .nivel__card:hover .nivel__ir svg{ transform:translateX(4px); }
}

.niveles__linea{
  display:block; height:2.5px; background:var(--oro-vivo); border-radius:2px;
  transform-origin:left center;
  transform:translateX(var(--dx, 0px)) scaleX(var(--k, 1));
  opacity:.9;
}
.niveles__linea--arriba{ margin-top:clamp(26px,5vh,52px); }
.niveles__linea--abajo{ margin-top:clamp(22px,4.2vh,42px); }
@keyframes linea-enmarca{
  0%   { transform:translateX(0) scaleX(0); opacity:1; }
  42%  { transform:translateX(0) scaleX(1); opacity:1; }
  58%  { transform:translateX(0) scaleX(1); opacity:1; }
  100% { transform:translateX(var(--dx, 0px)) scaleX(var(--k, 1)); opacity:.9; }
}
html.js-traza .niveles__linea{ transform:translateX(0) scaleX(0); }
html.js-traza .niveles__linea.se-traza{
  animation:linea-enmarca 2.1s cubic-bezier(.4,0,.2,1) both;
}
html.js-traza .niveles__linea--abajo.se-traza{ animation-delay:.12s; }

/* ---- cierre: navy solido + UN glow que lo recorre -------------------- */
.niveles__cierre{
  margin:clamp(22px,4.2vh,42px) 0 0; text-align:center;
  font-family:var(--f-display); font-weight:400; font-style:italic;
  font-size:clamp(22px,2.2vw,34px); line-height:1.2; color:var(--tinta);
}
.niveles__frase{ position:relative; display:inline-block; color:var(--tinta); }
.niveles__frase::after{
  content:attr(data-texto); position:absolute; inset:0; pointer-events:none;
  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;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Muy lento y muy evidente: 14s
   cruzando de lado a lado a velocidad uniforme, y 4s de reposo. */
.niveles__cierre.se-traza .niveles__frase::after{
  animation:glow-cruza 18s linear 2.2s infinite;
}
@keyframes glow-cruza{
  0%   { background-position:160% 0; }
  78%  { background-position:-160% 0; }
  100% { background-position:-160% 0; }
}

/* ---- entrada al scroll ------------------------------------------------ */
html.js-traza .niveles__ante,
html.js-traza .niveles__tit{ opacity:0; transform:translateY(14px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.28,1); }
html.js-traza .niveles__tit{ transition-delay:.14s; }
html.js-traza .nivel{ opacity:0; transform:translateY(26px);
  transition:opacity 1.05s ease var(--escalon,0s), transform 1.05s cubic-bezier(.22,1,.28,1) var(--escalon,0s); }
.nivel:nth-of-type(1){ --escalon:.00s; }
.nivel:nth-of-type(2){ --escalon:.18s; }
.nivel:nth-of-type(3){ --escalon:.36s; }
.nivel:nth-of-type(4){ --escalon:.54s; }
/* El cierre entra cuando las lineas ya se estan contrayendo (1.2s). */
html.js-traza .niveles__cierre{ opacity:0; transform:translateY(10px);
  transition:opacity 1s ease 1.2s, transform 1s cubic-bezier(.22,1,.28,1) 1.2s; }
html.js-traza .niveles__enca.se-traza .niveles__ante,
html.js-traza .niveles__enca.se-traza .niveles__tit{ opacity:1; transform:none; }
html.js-traza .nivel.se-traza{ opacity:1; transform:none; }
html.js-traza .niveles__cierre.se-traza{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html.js-traza .niveles__ante, html.js-traza .niveles__tit,
  html.js-traza .nivel, html.js-traza .niveles__cierre{ opacity:1; transform:none; transition:none; }
  .nivel__card, .nivel__txt, .niveles__linea{ transition:none; }
  .nivel__card:hover .nivel__brillo{ animation:none; }
  .niveles__cierre.se-traza .niveles__frase::after{ animation:none; }
  html.js-traza .niveles__linea.se-traza{ animation:none; transform:translateX(var(--dx,0px)) scaleX(var(--k,1)); }
}

/* ---- movil: dos columnas, sin hover: la card tocada se abre ----------- */
@media (max-width:900px){
  .niveles__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .nivel__card{ height:auto; aspect-ratio:3 / 4; }
  .niveles__cierre{ font-size:clamp(19px,5.2vw,24px); }
}


/* =====================================================================
   BLOQUE 6 — VIDA ESCOLAR
   Fondo blanco. Carrusel de fotos pegadas que corre solo, muy lento, y
   se detiene al interactuar.
   ===================================================================== */
.vida{
  background:var(--blanco);
  padding:clamp(30px,5.6vh,76px) 0 clamp(30px,5.4vh,72px);
  scroll-margin-top:calc(var(--cab-h, 95px) + 12px);
  overflow:hidden;
}
.vida__enca{ margin:0 auto clamp(20px,3.8vh,34px); text-align:left; }
.vida__ante{
  margin:0 0 clamp(12px,2.4vh,20px); font-size:15.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#004484;
}
.vida__tit{
  margin:0 0 clamp(12px,2.2vh,20px); max-width:none;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(27px,2.8vw,44px); line-height:1.15; color:var(--tinta);
}
.vida__intro{
  margin:0; max-width:64ch;
  font-family:var(--f-text); font-weight:500;
  font-size:clamp(16px,1.25vw,18px); line-height:1.5; color:rgba(12,31,79,.78);
}

/* ---- el carrusel ----------------------------------------------------- */
.vida__carrusel{ position:relative; }
/* La ventana va de margen a margen de la PANTALLA (las fotos "pegadas" se
   salen del marco para ocupar mas espacio). */
.vida__ventana{ overflow:hidden; width:100%; }
.vida__tira{
  list-style:none; margin:0; padding:0;
  display:flex; gap:clamp(10px,.9vw,14px); align-items:stretch;
  height:var(--vida-alto, 46vh);
  will-change:transform;
  /* arranca con el margen del marco a la izquierda */
  padding-left:max(4vw, calc((100vw - var(--marco-max)) / 2));
}
/* Todas del mismo tamano: el ancho lo publica el JS (--vida-ancho) para que
   se vean 3 y un pedazo de la 4a; la foto se recorta al
   centro con object-fit. */
.vida__foto{ flex:0 0 var(--vida-ancho, 400px); height:100%; display:flex; flex-direction:column; }
.vida__img{ flex:1 1 auto; min-height:0; overflow:hidden; border-radius:14px; background:var(--nube); }
.vida__img img{ transition:transform .6s ease; }
.vida__foto:hover .vida__img img{ transform:scale(1.03); }
.vida__pie{ flex:0 0 auto; display:flex; flex-direction:column; gap:4px; padding:12px 2px 0; text-align:left; }
.vida__eti{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#004484; }
.vida__dice{ font-family:var(--f-display); font-style:italic; font-size:clamp(14.5px,1.1vw,16.5px); line-height:1.35; color:var(--tinta); }
.vida__foto img{ display:block; height:100%; width:100%; object-fit:cover; object-position:50% 35%;
  -webkit-user-drag:none; user-select:none; pointer-events:none; }
/* ---- tira fisica: cursor-badge, arrastre e indicador de progreso -------- */
.vida__ventana{ position:relative; cursor:default; outline:none; }
.vida__ventana:focus-visible{ box-shadow:inset 0 0 0 3px var(--oro-vivo); }
.vida__ventana.arrastrando .vida__tira{ transition:none; }
/* El badge que sigue al cursor. Lo mueve el JS (--cx/--cy). */
.vida__cursor{ display:none; 
  position:fixed; left:0; top:0; z-index:60; pointer-events:none;
  width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:rgba(12,31,79,.82); color:var(--oro-vivo);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--f-text); font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  transform:translate3d(var(--cx, -200px), var(--cy, -200px), 0) scale(.6);
  opacity:0;
  transition:opacity .25s ease, transform .18s cubic-bezier(.22,1,.28,1);
}
.vida__cursor svg{ width:20px; height:20px; }
.vida__carrusel.con-cursor .vida__cursor{ opacity:1; transform:translate3d(var(--cx), var(--cy), 0) scale(1); }
.vida__carrusel.con-cursor.arrastrando .vida__cursor{ transform:translate3d(var(--cx), var(--cy), 0) scale(.85); background:var(--oro-vivo); color:var(--tinta); }
.vida__progreso{ margin-top:clamp(16px,2.6vh,24px); }
.vida__linea{
  display:block; height:2.5px; background:var(--oro-vivo); border-radius:2px;
  transform:scaleX(var(--avance, 1)); transform-origin:left center;
}
@media (hover:none), (pointer:coarse){ .vida__ventana{ cursor:auto; } .vida__cursor{ display:none; } }

.vida__redes{
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(20px,3.8vh,34px); flex-wrap:wrap;
}
.vida__vive{
  margin:0; font-family:var(--f-text); font-weight:700;
  font-size:clamp(16px,1.35vw,20px); letter-spacing:.02em; color:#004484;
}
.vida__iconos{ list-style:none; margin:0; padding:0; display:flex; gap:clamp(12px,1.2vw,17px); }
/* CTA de la seccion. Sin caja de color: texto +
   subrayado dorado que se traza, como el resto de los llamados del sitio. */
.vida__cierre{ display:flex; justify-content:center; margin-top:clamp(18px,3.2vh,30px); }
.vida__ir{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-text); font-weight:700; font-size:clamp(13px,1vw,15px);
  letter-spacing:.14em; text-transform:uppercase; color:#004484; text-decoration:none; padding-bottom:6px;
  transition:color .3s ease;
}
.vida__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);
}
.vida__ir:hover::after, .vida__ir:focus-visible::after{ transform:scaleX(1); }
.vida__ir svg{ width:18px; height:18px; transition:transform .3s ease; }
.vida__ir:hover svg{ transform:translateX(4px); }
.vida__iconos a{
  display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  color:#004484; border:1.5px solid rgba(0,68,132,.28);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.vida__iconos svg{ width:26px; height:26px; }
.vida__iconos a:hover{ background:#004484; color:var(--blanco); border-color:#004484; transform:translateY(-2px); }
.vida__iconos a[data-pendiente]{ opacity:.55; cursor:default; }

/* ---- entrada al scroll ------------------------------------------------ */
html.js-traza .vida__ante, html.js-traza .vida__tit, html.js-traza .vida__intro{
  opacity:0; transform:translateY(14px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.28,1); }
html.js-traza .vida__tit{ transition-delay:.14s; }
html.js-traza .vida__intro{ transition-delay:.28s; }
html.js-traza .vida__carrusel{ opacity:0; transform:translateY(22px);
  transition:opacity 1.1s ease .2s, transform 1.1s cubic-bezier(.22,1,.28,1) .2s; }
html.js-traza .vida__redes{ opacity:0; transition:opacity .9s ease .9s; }
html.js-traza .vida__enca.se-traza .vida__ante,
html.js-traza .vida__enca.se-traza .vida__tit,
html.js-traza .vida__enca.se-traza .vida__intro{ opacity:1; transform:none; }
html.js-traza .vida__carrusel.se-traza{ opacity:1; transform:none; }
html.js-traza .vida__redes.se-traza{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  html.js-traza .vida__ante, html.js-traza .vida__tit, html.js-traza .vida__intro,
  html.js-traza .vida__carrusel, html.js-traza .vida__redes{ opacity:1; transform:none; transition:none; }
}

/* ---- movil: 1 foto grande + parte de la siguiente, con el dedo ------ */
@media (max-width:900px){
  .vida__ventana{ overflow:hidden; touch-action:pan-y; }
  /* ⚠️ Antes había un `transform:none !important` aquí que le ganaba al
     transform inline del motor: en celular la tira NUNCA se movía. */
  .vida__tira{ height:auto; padding-left:4vw; padding-right:4vw; }
  .vida__foto{ flex:0 0 78vw; height:auto; }
  .vida__img{ height:58vw; flex:0 0 58vw; }
  .vida__foto img{ width:100%; height:100%; }
  .vida__pie{ padding-top:10px; } .vida__dice{ font-size:14px; }
  .vida__barra{ padding-left:4vw; padding-right:4vw; }
  .vida__flecha{ width:38px; height:38px; }
  .vida__flecha--izq{ left:3vw; } .vida__flecha--der{ right:3vw; }
}


/* =====================================================================
   BLOQUE 7 — ADMISIONES / AGENDA TU VISITA
   Azul institucional a la izquierda con textos en blanco y dos botones;
   foto fija a la derecha a toda la altura, sin margen arriba, abajo ni a
   la derecha.
   ===================================================================== */
.visita{
  background:var(--tinta); color:var(--blanco);
  scroll-margin-top:calc(var(--cab-h, 95px) + 12px);
}
.visita__marco{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:var(--visita-alto, auto);
}
.visita__col{
  /* el texto arranca en el margen del marco; a la derecha, aire antes de la foto */
  padding:clamp(34px,6.4vh,84px) clamp(28px,4vw,72px) clamp(34px,6.4vh,84px)
          max(4vw, calc((100vw - var(--marco-max)) / 2));
  display:flex; flex-direction:column; justify-content:center;
}
.visita__ante{
  margin:0 0 clamp(14px,2.8vh,24px); font-size:15.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--oro-vivo);
}
.visita__tit{
  margin:0 0 clamp(18px,3.4vh,30px);
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(27px,2.8vw,44px); line-height:1.15; color:var(--blanco);
}
.visita__txt{
  margin:0 0 clamp(10px,1.8vh,16px); max-width:52ch;
  font-family:var(--f-text); font-weight:500;
  font-size:clamp(16px,1.25vw,18px); line-height:1.5; color:rgba(255,255,255,.86);
}
.visita__txt--2{ margin-bottom:clamp(22px,4vh,36px); }
.visita__botones{ display:flex; flex-wrap:wrap; gap:clamp(22px,3vw,44px); align-items:center; }
/* CTAs sin fondo: texto en mayusculas + subrayado dorado que se dibuja
   (= .campus__ir). El primero en oro, el segundo en blanco. */
.visita__cta{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:6px 0 8px; text-decoration:none;
  font-family:var(--f-text); font-weight:700; text-transform:uppercase;
  font-size:clamp(12.5px,1vw,14.5px); letter-spacing:.11em; color:var(--blanco);
  transition:color .25s ease;
}
.visita__cta--1{ color:var(--oro-vivo); }
.visita__cta svg{ width:15px; height:15px; transition:transform .3s ease; }
.visita__cta::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; border-radius:2px; background:var(--oro-vivo);
  transform:scaleX(1); transform-origin:left center;
}
html.js-traza .visita__cta::after{ transform:scaleX(0); }
html.js-traza .visita.se-traza .visita__cta::after{
  animation:cta-traza .70s cubic-bezier(.22,1,.28,1) .75s both;
}
html.js-traza .visita.se-traza .visita__cta--2::after{ animation-delay:.9s; }
@media (hover:hover) and (pointer:fine){
  .visita__cta:hover{ color:var(--oro-vivo); }
  .visita__cta:hover svg{ transform:translateX(4px); }
  html.js-traza .visita.se-traza .visita__cta:hover::after{
    animation:cta-traza .70s cubic-bezier(.22,1,.28,1) .75s both,
              cta-rearma .52s cubic-bezier(.5,0,.5,1) both;
  }
}
@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; }
}
@media (prefers-reduced-motion:reduce){
  html.js-traza .visita__cta::after, html.js-traza .visita.se-traza .visita__cta::after{ animation:none; transform:scaleX(1); }
}
.visita__foto{
  margin:0; position:relative; overflow:hidden; background:var(--noche);
}
.visita__foto img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%;
}
/* La linea que abraza la foto. Va por DENTRO del borde (26px, como el hilo
   del bloque 4) con halo para aguantar el contraste sobre la foto. El
   trazado lo escribe el JS a partir de la caja de la foto. */
.visita__abrazo{
  position:absolute; inset:0; width:100%; height:100%; z-index:2;
  overflow:visible; pointer-events:none;
}
.visita__abrazo path{
  fill:none; stroke:var(--oro-vivo); stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 3px rgba(6,16,40,.55));
  stroke-dasharray:1; stroke-dashoffset:0;
}
/* Se dibuja CON EL SCROLL: --corte lo publica el JS
   segun cuanto ha entrado la seccion. Sin JS, entera. */
.visita.abrazo-vivo .visita__abrazo path{ stroke-dashoffset:var(--corte, 0); }
/* Entrada al scroll */
html.js-traza .visita__ante,
html.js-traza .visita__txt, html.js-traza .visita__botones{
  opacity:0; transform:translateY(14px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.28,1); }
html.js-traza .visita__txt{ transition-delay:.7s; }
html.js-traza .visita__txt--2{ transition-delay:.38s; }
html.js-traza .visita__botones{ transition-delay:1.3s; }
html.js-traza .visita__foto img{ opacity:0; transform:scale(1.04);
  transition:opacity 1.1s ease .15s, transform 1.4s cubic-bezier(.22,1,.28,1) .15s; }
html.js-traza .visita.se-traza .visita__ante,
html.js-traza .visita.se-traza .visita__txt, html.js-traza .visita.se-traza .visita__botones{ opacity:1; transform:none; }
html.js-traza .visita.se-traza .visita__foto img{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html.js-traza .visita__ante, html.js-traza .visita__tit, html.js-traza .visita__txt,
  html.js-traza .visita__botones, html.js-traza .visita__foto img{ opacity:1; transform:none; transition:none; }
}
@media (max-width:900px){
  .visita__marco{ grid-template-columns:1fr; min-height:0; }
  .visita__foto{ order:-1; aspect-ratio:4 / 3; }
  .visita__col{ padding:clamp(26px,5vh,40px) 4vw clamp(30px,5vh,44px); }
  .visita__botones{ gap:18px 28px; }
}


.pie{
  /* Cuerpo en --nube (el azul-gris del bloque 2) y una
     tira navy de remate. Azul sobre azul con el bloque 7 era una masa. */
  background:var(--nube); color:var(--tinta);
  padding:clamp(34px,6vh,72px) 0 clamp(30px,5vh,56px);
  scroll-margin-top:calc(var(--cab-h, 95px) + 12px);
}
.pie__cols{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.6fr);
  gap:clamp(24px,3vw,56px); align-items:start;
}
.pie__logo{
  display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:var(--tinta);
  margin-bottom:clamp(16px,2.6vh,24px);
}
.pie__logo img{ width:46px; height:auto; }
.pie__logo span{ font-family:var(--f-display); font-size:clamp(18px,1.4vw,21px); font-variant-caps:small-caps; text-transform:lowercase; letter-spacing:.01em; }
.pie__dir{ margin:0 0 clamp(12px,2vh,18px); font-style:normal; font-family:var(--f-text); font-weight:500; font-size:15px; line-height:1.55; color:rgba(12,31,79,.82); }
.pie__datos{ list-style:none; margin:0 0 clamp(16px,2.6vh,24px); padding:0; display:grid; gap:6px; }
.pie__datos a{ color:var(--tinta); text-decoration:none; font-family:var(--f-text); font-weight:500; font-size:15px; border-bottom:1.5px solid rgba(249,198,88,.75); transition:border-color .25s ease; }
.pie__datos a:hover{ border-color:var(--oro-vivo); }
.pie__redes{ list-style:none; margin:0; padding:0; display:flex; gap:12px; }
.pie__redes a{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  color:#004484; border:1.5px solid rgba(0,68,132,.28);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.pie__redes svg{ width:20px; height:20px; }
.pie__redes a:hover{ background:#004484; color:var(--blanco); border-color:#004484; transform:translateY(-2px); }
.pie__redes a[data-pendiente]{ opacity:.5; cursor:default; }
.pie__tit{ margin:6px 0 clamp(12px,2vh,16px); font-family:var(--f-text); font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:#004484; }
.pie__nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.pie__nav a{ color:rgba(12,31,79,.86); text-decoration:none; font-family:var(--f-text); font-weight:500; font-size:15px; transition:color .2s ease; }
.pie__nav a:hover{ color:#004484; }
.pie__mapa{
  position:relative; display:block; overflow:hidden; border-radius:12px;
  height:clamp(150px,22vh,210px); background:var(--blanco);
  box-shadow:0 14px 34px rgba(12,31,79,.14);
}
.pie__mapa iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.8); }
.pie__mapa-tapa{ position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(12,31,79,.08); transition:box-shadow .25s ease; }
.pie__mapa:hover .pie__mapa-tapa{ box-shadow:inset 0 0 0 2px var(--oro-vivo); }
.pie__botones{ display:flex; flex-wrap:wrap; gap:clamp(18px,2.2vw,32px); margin-top:clamp(12px,2vh,18px); }
.pie__cta{
  position:relative; display:inline-flex; align-items:center; gap:8px; padding:4px 0 7px;
  text-decoration:none; color:var(--tinta);
  font-family:var(--f-text); font-weight:700; text-transform:uppercase; font-size:12.5px; letter-spacing:.11em;
  transition:color .25s ease;
}
.pie__cta svg{ width:16px; height:16px; }
.pie__cta--wa svg{ color:#25D366; }
.pie__cta::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--oro-vivo); transform:scaleX(1); transform-origin:left center; }
html.js-traza .pie__cta::after{ transform:scaleX(0); }
html.js-traza .pie.se-traza .pie__cta::after{ animation:cta-traza .7s cubic-bezier(.22,1,.28,1) .6s both; }
html.js-traza .pie.se-traza .pie__cta + .pie__cta::after{ animation-delay:.75s; }
@media (hover:hover) and (pointer:fine){
  .pie__cta:hover{ color:#004484; }
  html.js-traza .pie.se-traza .pie__cta:hover::after{ animation:cta-traza .7s cubic-bezier(.22,1,.28,1) .6s both, cta-rearma .52s cubic-bezier(.5,0,.5,1) both; }
}
/* La tira navy de remate con el legal. */
.pie__tira{ background:var(--tinta); margin-top:clamp(30px,5vh,56px); margin-bottom:calc(-1 * clamp(30px,5vh,56px)); padding:15px 0 16px; }
.pie__legal{ margin:0 auto; text-align:center; font-family:var(--f-text); font-weight:500; font-size:12.5px; letter-spacing:.02em; color:rgba(255,255,255,.72); }
.pie__legal a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
.pie__legal a:hover{ color:var(--blanco); }
/* Entrada al scroll */
html.js-traza .pie__col{ opacity:0; transform:translateY(14px); transition:opacity .8s ease var(--escalon-pie,0s), transform .8s cubic-bezier(.22,1,.28,1) var(--escalon-pie,0s); }
.pie__col:nth-child(2){ --escalon-pie:.12s; } .pie__col:nth-child(3){ --escalon-pie:.24s; } .pie__col:nth-child(4){ --escalon-pie:.36s; }
html.js-traza .pie.se-traza .pie__col{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ html.js-traza .pie__col{ opacity:1; transform:none; transition:none; } html.js-traza .pie__cta::after{ transform:scaleX(1); animation:none; } }
@media (max-width:900px){
  .pie__cols{ grid-template-columns:1fr 1fr; gap:26px 18px; }
  .pie__col--colegio{ grid-column:1 / -1; }
  .pie__col--mapa{ grid-column:1 / -1; }
  .pie__mapa{ height:46vw; }
}



/* Enlaces cuyo destino aún no existe (portal de pagos, aviso de privacidad):
   van SIN href, así no navegan ni saltan al inicio. Se ven igual, pero el
   cursor no promete un clic que no lleva a ningún lado. */
a[data-pendiente]:not([href]){ cursor:default; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible{
  outline:2px solid var(--oro-vivo); outline-offset:3px; border-radius:2px;
}
/* 9 · En celular, al fondo de la página, el botón flotante tapaba el aviso de
   privacidad y el "©". Se le da aire a la tira de remate. */
@media (max-width:900px){
  .pie__tira{ padding-bottom:64px; }
}
.pie__botones{ column-gap:16px; }
.pie__cta{ letter-spacing:.085em; }


.pie__nota{ font-size:.82em; line-height:1.4; opacity:.72; max-width:24ch; margin-top:2px; }
.retrato__idioma{ display:block; margin:0 0 6px; font-family:var(--f-text, 'Montserrat', sans-serif); font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; opacity:.9; }
.niv__nota{ margin:10px 0 0; font-size:clamp(13px,.95vw,15px); line-height:1.45; opacity:.75; }
.nav__nota{ font-size:.82em; font-weight:500; opacity:.7; letter-spacing:.04em; }
.pie__eti{ font-family:var(--f-text); font-weight:500; font-size:15px; color:rgba(12,31,79,.82); }
.pie__datos a{ white-space:nowrap; }
/* Pie: la altura máxima es la de la columna del mapa + WhatsApp; las redes bajan a la base de las columnas Colegio y Familias. */
.pie__col--colegio .pie__datos{ margin-bottom:0; }
@media (min-width:901px){
  .pie__cols > .pie__col{ grid-row:1; }
  .pie__col--colegio{ grid-column:1; } .pie__nav[aria-label="Colegio"]{ grid-column:2; } .pie__nav[aria-label="Familias"]{ grid-column:3; } .pie__col--mapa{ grid-column:4; }
  .pie__cols > .pie__redes{ grid-column:2 / 4; align-self:end; }
}
@media (min-width:1200px){ .pie__cols{ grid-template-columns:minmax(0,1.66fr) minmax(0,.72fr) minmax(0,.72fr) minmax(0,1.6fr); } }   /* la dirección cabe en 2 líneas; el mapa conserva su ancho */
@media (min-width:1200px) and (max-width:1340px){ .pie__botones{ gap:16px; } .pie__cta{ letter-spacing:.3px; } }   /* los dos botones del mapa en un renglón */
@media (min-width:901px){ .pie__mapa{ height:clamp(164px,22vh,210px); } }
@media (max-width:900px){
  .pie__col--colegio{ order:-2; }
  .pie__cols > .pie__redes{ order:-1; grid-column:1 / -1; }
}