/* ==========================================================
   MODERN.CSS — IEB Villa Celestina
   Segunda capa de modernización: tipografía cinética, anillos
   de luz en tarjetas (mismo lenguaje que los botones), navbar
   que se compacta al hacer scroll, textura de grano, texto con
   degradado animado y transición nativa entre páginas.
   No cambia el HTML ni reestructura nada existente.
========================================================== */

/* ---------- Navbar: se compacta al scrollear ---------- */
.navbar__inner{ transition: height .3s ease; }
.navbar.is-scrolled .navbar__inner{ height: 70px; }
.navbar.is-scrolled .brand img{ width: 41px; height: 41px; }

/* ---------- Texto cinético (palabras animadas al aparecer) ----------
   Por defecto la palabra es 100% visible (fallback seguro si JS no
   corre). JS agrega .k-anim + animation-delay para que aparezca con
   una animación en cascada. animation-fill-mode:both evita cualquier
   parpadeo entre estados. */
.k-word{ display:inline-block; color:inherit; }
.k-word.k-anim{
  animation: kWordIn .7s cubic-bezier(.19,1,.22,1) both;
}
@keyframes kWordIn{
  from{ opacity:0; transform:translateY(.4em); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .k-word.k-anim{ animation:none; }
}

/* Acento naranja: un resplandor suave y pulsante (sin recortar letras,
   a diferencia de un degradado de texto con background-clip) */
.welcome-screen__title span,
.hero h1 .k-accent.k-word,
.hero h1 .k-accent .k-word,
.page-hero h1 .k-accent.k-word,
.page-hero h1 .k-accent .k-word,
.section-heading h2 .k-accent.k-word,
.section-heading h2 .k-accent .k-word,
.about-copy h2 .k-accent.k-word,
.about-copy h2 .k-accent .k-word{
  animation: iebTextGlow 4s ease-in-out infinite;
}
@keyframes iebTextGlow{
  0%,100%{ text-shadow: 0 0 16px rgba(224,114,18,.22); }
  50%{ text-shadow: 0 0 28px rgba(242,168,60,.42); }
}
@media (prefers-reduced-motion: reduce){
  .welcome-screen__title span, .hero h1 .k-accent, .page-hero h1 .k-accent, .section-heading h2 .k-accent, .about-copy h2 .k-accent{ animation:none; }
}

/* ---------- Anillo de luz en tarjetas (mismo lenguaje que los botones) ---------- */
.card-glow{ position:relative; }
.card-glow::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--ieb-angle,0deg),
    transparent 0deg, var(--gold,#f2a83c) 40deg, var(--primary,#e07212) 120deg, var(--ember,#ff9142) 180deg, transparent 240deg, transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.card-glow:hover::before, .card-glow:focus-within::before{
  opacity:1;
  animation:iebSpin 3.2s linear infinite;
}
@media (hover:none), (pointer:coarse){ .card-glow::before{ animation:none!important; opacity:0!important; } }
@media (prefers-reduced-motion:reduce){ .card-glow::before{ animation:none!important; } }

/* ---------- Brillo ambiental: reacciona sobre elementos interactivos ---------- */
.cursor-glow.is-active{
  width:340px; height:340px;
  background:radial-gradient(circle,rgba(224,114,18,.16),transparent 68%);
}

/* ---------- Foco de formulario ---------- */
main input:not([type="checkbox"]):not([type="radio"]):not(#chatbotInput),
main textarea{
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
main input:not([type="checkbox"]):not([type="radio"]):not(#chatbotInput):focus,
main textarea:focus{
  outline:none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(224,114,18,.12), 0 0 22px rgba(224,114,18,.15);
}

/* ---------- Botones: transición fluida para el arrastre magnético ---------- */
.btn-glow{ transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease, background .25s ease; }

@media (prefers-reduced-motion: reduce){
  .btn-glow{ transition: box-shadow .25s ease, border-color .25s ease, background .25s ease; }
}

/* ==========================================================
   VISOR DE GALERÍA ESTILO "SHORTS" — formato vertical inmersivo
   Marco vertical tipo celular con fondo desenfocado de relleno
   (igual que Reels/Shorts/Stories) y navegación arriba/abajo.
   gallery.js define --lightbox-bg con la imagen actual.
========================================================== */
.lightbox__figure{
  width:min(90vw, 430px);
  height:min(88vh, 860px);
  aspect-ratio:9/16;
  border-radius:28px;
  overflow:hidden;
  background:#050202;
  box-shadow:0 30px 100px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.07);
  gap:0;
}

.lightbox__figure::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--lightbox-bg, none);
  background-size:cover;
  background-position:center;
  filter:blur(34px) brightness(.5) saturate(1.2);
  transform:scale(1.2);
}

.lightbox__figure img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:0;
  box-shadow:none;
}

.lightbox__figure img.slide-next{ animation:iebvcLightboxNext .28s ease both; }
.lightbox__figure img.slide-prev{ animation:iebvcLightboxPrev .28s ease both; }

/* Redefine las animaciones horizontales originales en sentido vertical,
   a tono con la navegación arriba/abajo del nuevo formato. */
@keyframes iebvcLightboxNext{
  from{ opacity:.3; transform:translateY(26px) scale(.97); }
  to{ opacity:1; transform:none; }
}
@keyframes iebvcLightboxPrev{
  from{ opacity:.3; transform:translateY(-26px) scale(.97); }
  to{ opacity:1; transform:none; }
}

.lightbox__figure figcaption{
  position:absolute;
  z-index:2;
  left:0; right:0; bottom:0;
  width:auto;
  margin:0;
  padding:34px 20px 18px;
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  color:#fff;
  text-align:left;
  font-size:.85rem;
}

/* Flechas arriba/abajo ancladas al costado derecho, como el riel de
   navegación de Shorts en escritorio. Deslizar sigue funcionando en táctil. */
.lightbox__nav{
  left:auto !important;
  right:max(16px, env(safe-area-inset-right)) !important;
  transform:none !important;
  font-size:1.6rem;
}
.lightbox__nav--prev{ top:calc(50% - 66px) !important; }
.lightbox__nav--next{ top:calc(50% + 10px) !important; }
.lightbox__nav--prev span{ display:inline-block; transform:rotate(90deg); }
.lightbox__nav--next span{ display:inline-block; transform:rotate(90deg); }
.lightbox__nav--prev:hover,
.lightbox__nav--next:hover{ transform:none !important; }
.lightbox__nav--prev:active,
.lightbox__nav--next:active{ transform:scale(.94) !important; }

@media (max-width: 680px){
  .lightbox__figure{
    width:min(94vw, 420px);
    height:calc(100svh - 96px);
    max-height:calc(100dvh - 96px);
    border-radius:22px;
  }
  .lightbox__nav{
    top:auto !important;
    bottom:max(20px, calc(20px + env(safe-area-inset-bottom))) !important;
    right:max(14px, env(safe-area-inset-right)) !important;
  }
  .lightbox__nav--prev{ bottom:calc(84px + max(20px, env(safe-area-inset-bottom))) !important; }
}