/* =========================================================
   ANIMACIONES Y ESTILO MODERNO – PORTADA (index.html)
   Se carga DESPUÉS de nuevo.css. Si se quita este archivo
   (y animaciones.js) la página vuelve a verse como antes.
   ========================================================= */

:root{
  --az-oscuro: #0a2a66;
  --az-noche: #1a2a4a;
  --rojo: #ce1b28;
  --rojo-hover: #a9151f;
  --amarillo: #f2c94c;
  --fuente: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ── Tipografía moderna (antes caía en la letra por defecto del navegador) ── */
body, input, select, textarea, button{ font-family: var(--fuente); }
body{ -webkit-font-smoothing: antialiased; }
html{ scroll-behavior: smooth; }

/* ── Barra superior: sombra al hacer scroll ── */
.topbar{ transition: box-shadow .3s ease, background-color .3s ease; }
.topbar.is-scrolled{
  box-shadow: 0 8px 30px rgba(10,42,102,.14);
  background-color: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
}
.main-nav > ul > li > a{ position: relative; }
.main-nav > ul > li > a::after{
  content: "";
  position: absolute;
  left: .38rem; right: .38rem; bottom: .45rem;
  height: 2px;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.main-nav > ul > li:hover > a::after{ transform: scaleX(1); }

/* =========================================================
   HERO
   ========================================================= */
.hero-slide{
  min-height: clamp(460px, calc(100vh - 72px), 780px) !important;
  background-image: none !important;   /* la foto va en .hero-slide__bg */
  overflow: hidden;
}
/* Los slides están apilados: sólo el visible puede recibir clics */
.hero-slide{ pointer-events: none; visibility: hidden; transition: opacity .35s ease, transform .7s ease, visibility 0s linear .35s !important; }
.hero-slide.is-active{ pointer-events: auto; visibility: visible; z-index: 2; transition: opacity .35s ease, transform .7s ease, visibility 0s !important; }
.hero-slide__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;   /* la imagen la asigna animaciones.js */
  background-position: center;
  transform: scale(1.12);
}
/* Efecto "Ken Burns": zoom lento mientras el slide está activo */
.hero-slide.is-active .hero-slide__bg{ animation: almaKenBurns 9s ease-out both; }
@keyframes almaKenBurns{
  from{ transform: scale(1.18) translate3d(-1.5%, 1%, 0); }
  to  { transform: scale(1.04) translate3d(0, 0, 0); }
}
.hero-slide::before{
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(10,20,45,.55) 0%, rgba(10,20,45,.2) 70%),
    linear-gradient(180deg, rgba(10,42,102,.55) 0%, rgba(10,42,102,.3) 45%, rgba(10,20,45,.85) 100%) !important;
}
.hero-slide__inner{ z-index: 2 !important; box-sizing: border-box; }
.hero-slide__text{ max-width: 900px !important; }

.hero-chip{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1rem;
  margin-bottom: 1.2rem;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: clamp(.7rem, 1.2vw, .82rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-chip::before{
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amarillo);
  box-shadow: 0 0 0 0 rgba(242,201,76,.7);
  animation: almaPing 1.8s ease-out infinite;
}
@keyframes almaPing{
  0%  { box-shadow: 0 0 0 0 rgba(242,201,76,.7); }
  100%{ box-shadow: 0 0 0 12px rgba(242,201,76,0); }
}

.hero-slide__kicker{ font-weight: 900 !important; letter-spacing: .06em !important; }
.hero-slide__kicker .resalta{
  background: linear-gradient(90deg, #fff 0%, var(--amarillo) 50%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: almaBrillo 5s linear infinite;
}
@keyframes almaBrillo{ to{ background-position: 200% center; } }

.hero-slide__desc{ font-weight: 600 !important; line-height: 1.5; text-shadow: 0 2px 12px rgba(0,0,0,.6); }

.hero-slide__actions{ justify-content: center; margin-top: 1.6rem; gap: .9rem; }
.hero-cta{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none !important;
  border: 2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.hero-cta svg{ width: 18px; height: 18px; transition: transform .2s ease; }
.hero-cta:hover svg{ transform: translateX(4px); }
.hero-cta--primario{
  background: var(--rojo);
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(206,27,40,.45);
}
.hero-cta--primario:hover{ background: var(--rojo-hover); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(206,27,40,.55); }
.hero-cta--vidrio{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.6);
  color: #fff !important;
  backdrop-filter: blur(6px);
}
.hero-cta--vidrio:hover{ background: #fff; color: var(--az-oscuro) !important; transform: translateY(-3px); }

/* Entrada escalonada del texto (complementa la animación de nuevo.css) */
.hero-slide__text.is-anim .hero-chip{ animation: almaTextIn .6s ease both; }
.hero-slide__text.is-anim .hero-slide__kicker{ animation: almaTextIn .7s ease .12s both !important; }
.hero-slide__text.is-anim .hero-slide__desc{ animation: almaTextIn .7s ease .26s both !important; }
.hero-slide__text.is-anim .hero-slide__actions{ animation: almaTextIn .7s ease .4s both; }

/* Puntos con barra de progreso */
.hero-slider .hero-slider__dots{
  display: flex !important;
  bottom: 34px;
  gap: 10px;
}
.hero-slider .hero-dot{
  position: relative;
  width: 34px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  overflow: hidden;
  padding: 0;
  transition: width .3s ease;
}
.hero-slider .hero-dot.is-active{ width: 64px; background: rgba(255,255,255,.35); }
.hero-slider .hero-dot.is-active::after{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: left;
  animation: almaProgreso 5.5s linear both;
}
.hero-slider:hover .hero-dot.is-active::after{ animation-play-state: paused; }
@keyframes almaProgreso{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

/* Indicador "deslizá" */
.hero-scroll{
  position: absolute;
  left: 50%;
  bottom: 70px;
  z-index: 6;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 14px;
}
.hero-scroll::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  animation: almaRueda 1.6s ease-in-out infinite;
}
@keyframes almaRueda{
  0%  { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100%{ opacity: 0; transform: translateY(14px); }
}
@media (max-width: 736px){
  .hero-scroll{ display: none; }
  .hero-slide{ min-height: 78vh !important; }
  .hero-cta{ width: 100%; max-width: 300px; justify-content: center; }
}

/* =========================================================
   CINTA EN MOVIMIENTO
   ========================================================= */
.cinta{
  background: var(--rojo);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  padding: .95rem 0;
  position: relative;
  z-index: 3;
}
.cinta__track{
  display: inline-flex;
  animation: almaCinta 38s linear infinite;
}
.cinta:hover .cinta__track{ animation-play-state: paused; }
.cinta__grupo{ display: inline-flex; align-items: center; }
.cinta__item{
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cinta__item::after{
  content: "★";
  margin: 0 1.6rem;
  color: var(--amarillo);
  font-size: .8rem;
}
@keyframes almaCinta{ to{ transform: translateX(-50%); } }

/* =========================================================
   NIVELES – tarjetas con descripción que aparece
   ========================================================= */
#carreras .nivel-link{
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .3s ease;
}
#carreras .nivel-link:hover{ box-shadow: 0 24px 50px rgba(10,42,102,.32); }
#carreras .nivel-img{ height: 360px; }
#carreras .nivel-link::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,30,70,.92) 0%, rgba(10,30,70,.35) 45%, rgba(10,30,70,0) 70%);
  transition: opacity .35s ease;
}
#carreras .nivel-label{ z-index: 2; }
.nivel-info{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.3rem 1.3rem 1.4rem;
  color: #fff;
  text-align: left;
}
.nivel-info__txt{
  display: block;
  margin: 0;
  font-size: .9rem;
  line-height: 1.45;
  color: rgba(255,255,255,.92);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .35s ease, margin .35s ease;
}
#carreras .nivel-link:hover .nivel-info__txt,
#carreras .nivel-link:focus-visible .nivel-info__txt{ max-height: 9em; opacity: 1; margin-bottom: .8rem; }
.nivel-info__ver{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nivel-info__ver::after{ content: "→"; transition: transform .2s ease; }
#carreras .nivel-link:hover .nivel-info__ver::after{ transform: translateX(5px); }
/* En celulares no hay "hover": la descripción se muestra siempre */
@media (hover: none){
  .nivel-info__txt{ max-height: none; opacity: 1; margin-bottom: .8rem; }
}

.nivel-preinsc{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: .9rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #fff;
  color: var(--az-oscuro) !important;
  box-shadow: 0 6px 16px rgba(10,42,102,.18);
  font-weight: 800;
  font-size: .85rem;
  text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.nivel-preinsc:hover{ background: var(--rojo); border-color: var(--rojo); color: #fff !important; transform: translateY(-2px); }

/* =========================================================
   CIFRAS CON CONTADOR
   ========================================================= */
.cifras{
  background: linear-gradient(135deg, var(--az-oscuro) 0%, #123a85 100%);
  padding: 3.2rem 1rem;
  position: relative;
  overflow: hidden;
}
.cifras::before,
.cifras::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  animation: almaFlotar 12s ease-in-out infinite;
}
.cifras::before{ width: 320px; height: 320px; top: -140px; left: -80px; }
.cifras::after{ width: 220px; height: 220px; bottom: -110px; right: 6%; animation-delay: -6s; }
@keyframes almaFlotar{
  0%,100%{ transform: translate3d(0,0,0); }
  50%    { transform: translate3d(30px,20px,0); }
}
.cifras__grid{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
@media (max-width: 800px){ .cifras__grid{ grid-template-columns: repeat(2, 1fr); row-gap: 2rem; } }
.cifra__num{
  display: block;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
}
.cifra__num .mas{ color: var(--amarillo); }
.cifra__txt{
  display: block;
  margin-top: .5rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* =========================================================
   APARICIÓN AL HACER SCROLL (amplía .reveal de nuevo.css)
   ========================================================= */
.reveal.delay-5{ transition-delay: .40s; }
.reveal.delay-6{ transition-delay: .48s; }
.reveal--izq { transform: translateX(-40px); }
.reveal--der { transform: translateX(40px); }
.reveal--zoom{ transform: scale(.92); }
.reveal--izq.is-visible,
.reveal--der.is-visible,
.reveal--zoom.is-visible{ transform: none; }

/* Novedades */
.novedad-card{ transition: transform .3s ease, box-shadow .3s ease, opacity .6s ease !important; }
.novedad-card.reveal.is-visible:hover{ transform: translateY(-6px); }

/* ¿Por qué elegirnos? */
.elegirnos__card{
  position: relative;
  overflow: hidden;
  transition: background .25s ease, transform .3s ease, opacity .6s ease, border-color .25s ease !important;
}
.elegirnos__card.is-visible:hover{ transform: translateY(-6px); border-color: rgba(242,201,76,.6); }
.elegirnos__card::before{
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-20deg);
}
.elegirnos__card:hover::before{ animation: almaReflejo .8s ease; }
@keyframes almaReflejo{ to{ left: 130%; } }
.elegirnos__card:hover .elegirnos__ico{ animation: almaSalto .6s ease; }
.elegirnos__card:hover .elegirnos__ico svg{ fill: var(--amarillo); }
.elegirnos__ico svg{ transition: fill .25s ease; }
@keyframes almaSalto{
  0%,100%{ transform: translateY(0); }
  40%    { transform: translateY(-8px); }
  70%    { transform: translateY(2px); }
}

/* Banner preinscripciones: botón que "late" */
#preinscripciones-banner .preinsc__btn{ animation: almaLatido 2.4s ease-in-out infinite; }
#preinscripciones-banner .preinsc__btn:hover{ animation-play-state: paused; }
@keyframes almaLatido{
  0%,100%{ box-shadow: 0 0 0 0 rgba(206,27,40,.6); }
  50%    { box-shadow: 0 0 0 14px rgba(206,27,40,0); }
}

/* Carreras */
.carrera-card{ transition: transform .25s ease, box-shadow .3s ease, opacity .6s ease !important; }
.carrera-card:hover{ box-shadow: 0 20px 44px rgba(0,0,0,.3); }
.carrera-card__content{ transition: transform .3s ease; }
.carrera-card:hover .carrera-card__content{ transform: translateY(-6px); }

/* WhatsApp: anillo pulsante */
.wa-float__btn{ position: relative; }
.wa-float__btn::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: almaOnda 2s ease-out infinite;
}
@keyframes almaOnda{
  0%  { transform: scale(1);   opacity: .8; }
  100%{ transform: scale(1.6); opacity: 0; }
}

/* Botón volver arriba */
.volver-arriba{
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--az-oscuro);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(10,42,102,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
}
.volver-arriba svg{ width: 20px; height: 20px; fill: #fff; }
.volver-arriba.visible{ opacity: 1; transform: none; pointer-events: auto; }
.volver-arriba:hover{ background: var(--rojo); }
@media (max-width: 480px){ .volver-arriba{ left: 16px; bottom: 16px; } }

/* =========================================================
   ACCESIBILIDAD: quien pide "menos movimiento" en su
   dispositivo ve la página quieta.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .cinta__track{ animation: none !important; }
  .reveal--izq, .reveal--der, .reveal--zoom{ transform: none !important; }
}