:root {
  --green-1: #092e26;
  --green-2: #054133;
  --green-3: #021914;

  --red-1: #ad1d23;
  --red-2: #760b11;

  --gold-1: #c8973e;
  --gold-2: #f0d795;
  --gold-3: #fff0bc;

  --cream-1: #fffaf0;
  --cream-2: #f4e8d3;

  --text: #302d28;

  --ease:
    cubic-bezier(.16,1,.3,1);
}


/* ======================================================
   RESET
====================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  overflow-x: hidden;

  color: var(--text);

  background: var(--cream-1);

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

body.lightbox-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video,
canvas {
  max-width: 100%;
}

button {
  font: inherit;
}

.oculto {
  display: none !important;
}


/* ======================================================
   CARGA
====================================================== */

.pantalla-carga {
  position: fixed;
  inset: 0;

  z-index: 999999;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  color: white;

  background:
    radial-gradient(
      circle at 50% 40%,
      #0a5543,
      #021914 65%
    );
}

.loader-halo {
  position: absolute;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(240,215,149,.18),
      transparent 65%
    );

  animation:
    loadingHalo 2.5s ease-in-out infinite;
}

.loader-estrella {
  position: relative;

  z-index: 2;

  color: var(--gold-2);

  font-size: 60px;

  animation:
    loadingStar 2s ease-in-out infinite;
}

.loader-titulo {
  position: relative;

  z-index: 2;

  margin-top: 20px;

  font-family:
    Georgia,
    serif;

  font-size: 24px;
}

.loader-texto {
  position: relative;

  z-index: 2;

  margin-top: 8px;

  opacity: .55;

  font-size: 9px;

  letter-spacing: 2.4px;

  text-transform: uppercase;
}

@keyframes loadingHalo {

  50% {
    transform: scale(1.35);
    opacity: .4;
  }

}

@keyframes loadingStar {

  50% {
    transform:
      scale(1.25)
      rotate(10deg);

    filter:
      drop-shadow(
        0 0 25px var(--gold-2)
      );
  }

}


/* ======================================================
   ERROR
====================================================== */

.error-pagina {
  min-height: 100vh;

  display: grid;
  place-items: center;

  padding: 25px;

  background:
    radial-gradient(
      circle,
      #0b4437,
      #021713
    );
}

.error-card {
  width: min(480px,100%);

  padding: 45px;

  text-align: center;

  border-radius: 25px;

  background: var(--cream-1);

  box-shadow:
    0 35px 100px rgba(0,0,0,.4);
}

.error-icon {
  color: var(--gold-1);

  font-size: 50px;
}

.error-card h1 {
  font-family:
    Georgia,
    serif;
}


/* ======================================================
   NAV
====================================================== */

.nav-flotante {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 10000;

  min-height: 70px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    8px clamp(16px,5vw,70px);

  color: white;

  background:
    rgba(2,24,19,.65);

  border-bottom:
    1px solid rgba(255,255,255,.08);

  backdrop-filter:
    blur(18px);

  transition:
    min-height .4s,
    background .4s,
    box-shadow .4s;
}

.nav-flotante.scrolled {
  min-height: 58px;

  background:
    rgba(2,24,19,.96);

  box-shadow:
    0 10px 40px rgba(0,0,0,.25);
}

.nav-marca {
  display: flex;
  align-items: center;

  gap: 11px;
}

.nav-logo {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  color: var(--gold-2);

  border:
    1px solid rgba(240,215,149,.4);

  border-radius: 50%;

  animation:
    navLogo 5s ease-in-out infinite;
}

@keyframes navLogo {

  50% {
    transform: rotate(180deg);

    box-shadow:
      0 0 20px rgba(240,215,149,.18);
  }

}

.nav-marca strong {
  display: block;

  font-family:
    Georgia,
    serif;

  font-weight: normal;
}

.nav-marca small {
  display: block;

  margin-top: 2px;

  opacity: .5;

  font-size: 7px;

  letter-spacing: 1.7px;

  text-transform: uppercase;
}

.nav-links {
  display: flex;

  gap: 25px;
}

.nav-links a {
  position: relative;

  padding: 7px 0;

  color:
    rgba(255,255,255,.72);

  font-size: 11px;
}

.nav-links a::after {
  content: "";

  position: absolute;

  left: 50%;
  right: 50%;
  bottom: 0;

  height: 1px;

  background: var(--gold-2);

  transition:
    left .3s,
    right .3s;
}

.nav-links a:hover {
  color: white;
}

.nav-links a:hover::after {
  left: 0;
  right: 0;
}


/* ======================================================
   PARTICULAS GENERALES
====================================================== */

.particle-layer {
  position: absolute;
  inset: 0;

  z-index: 1;

  overflow: hidden;

  pointer-events: none;
}

.particle {
  position: absolute;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  opacity: .5;

  animation:
    particleFloat linear infinite;
}

.particle.gold {
  background: var(--gold-2);

  box-shadow:
    0 0 8px rgba(240,215,149,.65);
}

.particle.white {
  background: white;

  box-shadow:
    0 0 8px rgba(255,255,255,.6);
}

@keyframes particleFloat {

  from {
    transform:
      translate3d(
        0,
        30px,
        0
      );
  }

  to {
    transform:
      translate3d(
        25px,
        -110vh,
        0
      );
  }

}


/* ======================================================
   HERO
====================================================== */

.hero {
  position: relative;

  min-height: 100svh;

  display: grid;
  place-items: center;

  overflow: hidden;

  color: white;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(220,179,84,.18),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #0a3c30,
      #052b23 50%,
      #021712
    );
}

.hero-overlay {
  position: absolute;
  inset: 0;

  z-index: 2;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(0,0,0,.34)
    );
}

.hero-aurora {
  position: absolute;

  border-radius: 50%;

  filter: blur(50px);

  pointer-events: none;
}

.hero-aurora-1 {
  width: 600px;
  height: 600px;

  left: -200px;
  top: 15%;

  background:
    rgba(177,24,31,.18);

  animation:
    auroraOne 9s ease-in-out infinite;
}

.hero-aurora-2 {
  width: 700px;
  height: 700px;

  right: -250px;
  top: 10%;

  background:
    rgba(211,169,72,.12);

  animation:
    auroraTwo 11s ease-in-out infinite;
}

@keyframes auroraOne {

  50% {
    transform:
      translate(130px,90px)
      scale(1.2);
  }

}

@keyframes auroraTwo {

  50% {
    transform:
      translate(-120px,120px)
      scale(.85);
  }

}


/* ======================================================
   NIEVE
====================================================== */

.snow-layer {
  position: absolute;
  inset: 0;

  z-index: 5;

  overflow: hidden;

  pointer-events: none;
}

.snowflake {
  position: absolute;

  top: -20px;

  border-radius: 50%;

  background: white;

  box-shadow:
    0 0 8px white;

  animation:
    snowFall linear infinite;
}

@keyframes snowFall {

  to {
    transform:
      translate3d(
        40px,
        110vh,
        0
      )
      rotate(180deg);
  }

}


/* ======================================================
   LUCES HERO
====================================================== */

.hero-luces {
  position: absolute;

  z-index: 7;

  top: 78px;
  left: 4%;
  right: 4%;

  display: flex;
  justify-content: space-around;

  pointer-events: none;
}

.hero-luces::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: -6px;

  height: 25px;

  border-top:
    1px solid rgba(255,255,255,.15);

  border-radius: 50%;
}

.hero-luces i {
  width: 8px;
  height: 14px;

  position: relative;

  border-radius:
    50% 50% 45% 45%;

  background: var(--gold-2);

  box-shadow:
    0 0 15px var(--gold-2);

  animation:
    lightPulse 1.8s ease-in-out infinite alternate;
}

.hero-luces i:nth-child(2n) {
  background: #c62a31;

  box-shadow:
    0 0 15px #c62a31;

  animation-delay: .5s;
}

.hero-luces i:nth-child(3n) {
  background: white;

  box-shadow:
    0 0 15px white;

  animation-delay: 1s;
}

@keyframes lightPulse {

  from {
    opacity: .28;
    transform: scale(.75);
  }

  to {
    opacity: 1;
    transform: scale(1.25);
  }

}


/* ======================================================
   ESTRELLAS HERO
====================================================== */

.hero-stars span {
  position: absolute;

  z-index: 4;

  color:
    rgba(240,215,149,.45);

  animation:
    starTwinkle 3s ease-in-out infinite;
}

.hero-stars span:nth-child(1) {
  left: 12%;
  top: 25%;
}

.hero-stars span:nth-child(2) {
  right: 12%;
  top: 28%;

  animation-delay: .8s;
}

.hero-stars span:nth-child(3) {
  left: 22%;
  bottom: 25%;

  animation-delay: 1.4s;
}

.hero-stars span:nth-child(4) {
  right: 22%;
  bottom: 30%;

  animation-delay: 2s;
}

.hero-stars span:nth-child(5) {
  right: 8%;
  top: 50%;

  animation-delay: 2.5s;
}

@keyframes starTwinkle {

  0%,
  100% {
    opacity: .2;
    transform: scale(.7);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }

}


/* ======================================================
   HERO CONTENT
====================================================== */

.hero-content {
  position: relative;

  z-index: 8;

  width:
    min(900px,92%);

  padding:
    125px 15px;

  text-align: center;
}

.hero-school {
  color: var(--gold-2);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(14px,2vw,19px);

  letter-spacing: 1.5px;
}

.hero-school span {
  margin: 0 8px;
}

.hero-pretitle {
  margin-top: 26px;

  opacity: .65;

  font-size: 9px;

  letter-spacing: 4px;

  text-transform: uppercase;
}

.hero-title {
  position: relative;

  margin:
    15px auto 0;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(52px,8vw,96px);

  font-weight: normal;

  line-height: .9;

  animation:
    heroTitleFloat 5s ease-in-out infinite;
}

.hero-title span {
  display: block;

  margin-top: 8px;

  background:
    linear-gradient(
      90deg,
      #cf9d43,
      #fff1bd,
      #d1a34d,
      #fff1bd,
      #cf9d43
    );

  background-size: 300% auto;

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  font-style: italic;

  animation:
    goldText 6s linear infinite;
}

.hero-title::after {
  content: "";

  position: absolute;

  top: -15%;
  left: -30%;

  width: 18%;
  height: 130%;

  transform: rotate(20deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.75),
      transparent
    );

  filter: blur(6px);

  animation:
    titleShine 5s ease-in-out infinite;
}

@keyframes heroTitleFloat {

  50% {
    transform: translateY(-7px);
  }

}

@keyframes goldText {

  to {
    background-position:
      300% center;
  }

}

@keyframes titleShine {

  0%,
  35% {
    left: -30%;
    opacity: 0;
  }

  45% {
    opacity: .8;
  }

  65% {
    left: 115%;
    opacity: 0;
  }

  100% {
    left: 115%;
    opacity: 0;
  }

}

.hero-year {
  margin-top: 23px;

  color: var(--gold-2);

  font-family: Georgia, serif;

  font-size: 23px;

  letter-spacing: 11px;
}

.hero-divider,
.gold-divider {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  margin: 23px auto;

  color: var(--gold-1);
}

.hero-divider i,
.gold-divider i {
  position: relative;

  overflow: hidden;

  width: 75px;
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      var(--gold-1)
    );
}

.hero-divider i:last-child,
.gold-divider i:last-child {
  background:
    linear-gradient(
      to left,
      transparent,
      var(--gold-1)
    );
}

.hero-divider i::after,
.gold-divider i::after {
  content: "";

  position: absolute;

  width: 35%;
  height: 100%;

  left: -50%;

  background: white;

  animation:
    lineShimmer 4s linear infinite;
}

@keyframes lineShimmer {

  55%,
  100% {
    left: 150%;
  }

}

.hero-phrase {
  font-family: Georgia, serif;

  font-size:
    clamp(19px,3vw,29px);

  line-height: 1.45;
}

.hero-family {
  position: relative;

  width:
    min(600px,100%);

  display: flex;
  flex-direction: column;

  gap: 7px;

  margin:
    34px auto 0;

  padding:
    19px 15px;

  border-top:
    1px solid rgba(240,215,149,.25);

  border-bottom:
    1px solid rgba(240,215,149,.25);

  animation:
    familyGlow 4s ease-in-out infinite;
}

.hero-family span {
  opacity: .55;

  font-size: 8px;

  letter-spacing: 2.2px;

  text-transform: uppercase;
}

.hero-family strong {
  color: var(--gold-2);

  font-family: Georgia, serif;

  font-size:
    clamp(23px,4vw,34px);

  font-weight: normal;
}

@keyframes familyGlow {

  50% {
    box-shadow:
      0 0 50px rgba(240,215,149,.08);
  }

}


/* ======================================================
   HERO BUTTON
====================================================== */

.hero-button {
  position: relative;

  overflow: hidden;

  display: inline-flex;
  align-items: center;

  gap: 15px;

  margin-top: 35px;

  padding:
    15px 27px;

  border:
    1px solid rgba(255,255,255,.18);

  border-radius: 100px;

  background:
    linear-gradient(
      135deg,
      var(--red-1),
      var(--red-2)
    );

  box-shadow:
    0 15px 40px rgba(0,0,0,.28);

  animation:
    buttonBreath 3.5s ease-in-out infinite;
}

.hero-button::after {
  content: "";

  position: absolute;

  top: -100%;
  left: -70%;

  width: 30%;
  height: 300%;

  transform: rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.50),
      transparent
    );

  animation:
    buttonSweep 3.8s infinite;
}

.hero-button b {
  animation:
    arrowBounce 1.5s ease-in-out infinite;
}

@keyframes buttonBreath {

  50% {
    transform: scale(1.025);

    box-shadow:
      0 20px 55px rgba(180,25,32,.30),
      0 0 28px rgba(240,215,149,.13);
  }

}

@keyframes buttonSweep {

  55%,
  100% {
    left: 150%;
  }

}

@keyframes arrowBounce {

  50% {
    transform: translateY(5px);
  }

}


/* ======================================================
   HERO ENTRADA
====================================================== */

.hero-enter {
  opacity: 0;

  transform: translateY(30px);

  filter: blur(5px);
}

body.loaded .hero-enter {
  animation:
    heroEnter .9s var(--ease) forwards;
}

body.loaded .h1 {
  animation-delay: .1s;
}

body.loaded .h2 {
  animation-delay: .25s;
}

body.loaded .h3 {
  animation-delay: .4s;
}

body.loaded .h4 {
  animation-delay: .55s;
}

body.loaded .h5 {
  animation-delay: .7s;
}

body.loaded .h6 {
  animation-delay: .85s;
}

body.loaded .h7 {
  animation-delay: 1s;
}

@keyframes heroEnter {

  to {
    opacity: 1;

    transform: translateY(0);

    filter: blur(0);
  }

}


/* ======================================================
   BOSQUE HERO
====================================================== */

.hero-scenery {
  position: absolute;

  z-index: 3;

  left: 0;
  right: 0;
  bottom: 0;

  height: 120px;
}

.hill {
  position: absolute;

  left: -10%;
  right: -10%;

  height: 140px;

  bottom: -95px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.06);
}

.hill-two {
  bottom: -112px;

  transform: scaleX(.7);

  background:
    rgba(255,255,255,.09);
}

.tree-line {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  gap: 10px;
}

.tree-line i,
.footer-trees i {
  width: 0;
  height: 0;

  border-left:
    15px solid transparent;

  border-right:
    15px solid transparent;

  border-bottom:
    55px solid #103728;

  transform-origin:
    center bottom;

  animation:
    treeSway 5s ease-in-out infinite;
}

.tree-line .tree-big,
.footer-trees .big {
  border-left-width: 27px;
  border-right-width: 27px;
  border-bottom-width: 95px;

  border-bottom-color:
    #174b37;
}

.tree-line i:nth-child(2),
.footer-trees i:nth-child(2) {
  animation-delay: .5s;
}

.tree-line i:nth-child(3),
.footer-trees i:nth-child(3) {
  animation-delay: 1s;
}

@keyframes treeSway {

  50% {
    transform: rotate(.8deg);
  }

}


/* ======================================================
   SECCIONES
====================================================== */

.section {
  position: relative;

  overflow: hidden;

  padding:
    105px 22px;
}

.section-inner {
  position: relative;

  z-index: 4;

  width:
    min(1120px,100%);

  margin: auto;
}

.section-inner.narrow {
  width:
    min(820px,100%);
}

.section-eyebrow {
  margin-bottom: 13px;

  text-align: center;

  color: #99732f;

  font-size: 9px;

  font-weight: bold;

  letter-spacing: 4px;

  text-transform: uppercase;
}

.section-eyebrow.light {
  color: var(--gold-2);
}

.section h2 {
  margin:
    0 auto 17px;

  text-align: center;

  color: #40241e;

  font-family: Georgia, serif;

  font-size:
    clamp(35px,5vw,56px);

  font-weight: normal;

  line-height: 1.08;
}

.light-title {
  color: white !important;
}

.section-intro {
  max-width: 650px;

  margin: auto;

  text-align: center;

  color: #726b62;

  font-family: Georgia, serif;

  font-size: 19px;

  line-height: 1.75;
}


/* ======================================================
   SCROLL REVEAL
====================================================== */

.reveal-item,
.reveal-card {
  opacity: 0;

  transform:
    translateY(35px)
    scale(.98);

  filter: blur(3px);

  transition:
    opacity .85s ease,
    transform .85s var(--ease),
    filter .85s ease;
}

.reveal-group.in-view
.reveal-item {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  filter: blur(0);
}

.reveal-group.in-view
.reveal-item:nth-child(1) {
  transition-delay: .05s;
}

.reveal-group.in-view
.reveal-item:nth-child(2) {
  transition-delay: .15s;
}

.reveal-group.in-view
.reveal-item:nth-child(3) {
  transition-delay: .25s;
}

.reveal-group.in-view
.reveal-item:nth-child(4) {
  transition-delay: .35s;
}

.reveal-group.in-view
.reveal-item:nth-child(5) {
  transition-delay: .45s;
}

.reveal-card.visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  filter: blur(0);
}


/* ======================================================
   BIENVENIDA
====================================================== */

.bienvenida {
  background:
    linear-gradient(
      180deg,
      #fffaf0,
      #f3e7d2
    );
}

.floating-symbol {
  position: absolute;

  z-index: 2;

  color:
    rgba(183,139,57,.12);

  font-size: 80px;

  animation:
    symbolFloat 8s ease-in-out infinite;
}

.fs-1 {
  left: 4%;
  top: 20%;
}

.fs-2 {
  right: 8%;
  top: 15%;

  font-size: 60px;

  animation-delay: 2s;
}

.fs-3 {
  right: 3%;
  bottom: 5%;

  animation-delay: 4s;
}

@keyframes symbolFloat {

  50% {
    transform:
      translateY(-30px)
      rotate(20deg)
      scale(1.1);
  }

}

.message-card {
  position: relative;

  max-width: 660px;

  display: flex;
  align-items: center;

  gap: 18px;

  margin:
    42px auto 0;

  padding:
    25px;

  overflow: hidden;

  border:
    1px solid rgba(199,151,62,.25);

  border-radius: 20px;

  background:
    rgba(255,255,255,.68);

  box-shadow:
    0 20px 55px rgba(72,46,15,.07);

  animation:
    messageFloat 5s ease-in-out infinite;
}

.message-glow {
  position: absolute;

  width: 180px;
  height: 180px;

  top: -90px;
  right: -80px;

  border-radius: 50%;

  background:
    rgba(220,177,84,.12);

  filter: blur(20px);

  animation:
    messageGlow 5s ease-in-out infinite;
}

.message-star {
  position: relative;

  z-index: 2;

  color: var(--gold-1);

  font-size: 29px;

  animation:
    messageStar 3s infinite;
}

.message-card p {
  position: relative;

  z-index: 2;

  margin: 0;

  color: #655d52;

  line-height: 1.65;
}

@keyframes messageFloat {

  50% {
    transform: translateY(-6px);

    box-shadow:
      0 27px 65px rgba(72,46,15,.11);
  }

}

@keyframes messageGlow {

  50% {
    transform: scale(1.4);

    opacity: .4;
  }

}

@keyframes messageStar {

  50% {
    transform:
      rotate(180deg)
      scale(1.25);
  }

}


/* ======================================================
   VIDEO
====================================================== */

.video-section {
  color: white;

  background:
    radial-gradient(
      circle at center,
      #133f40,
      #061a1b 72%
    );
}

.video-beam {
  position: absolute;

  width: 300px;
  height: 900px;

  top: -300px;

  opacity: .08;

  background:
    linear-gradient(
      to bottom,
      transparent,
      white,
      transparent
    );

  filter: blur(25px);

  animation:
    beamMove 8s ease-in-out infinite;
}

.beam-left {
  left: 5%;

  transform: rotate(20deg);
}

.beam-right {
  right: 5%;

  transform: rotate(-20deg);

  animation-delay: 4s;
}

@keyframes beamMove {

  50% {
    transform:
      translateY(220px)
      rotate(25deg);

    opacity: .14;
  }

}

.video-subtitle {
  margin:
    -2px 0 35px;

  text-align: center;

  color:
    rgba(255,255,255,.62);

  font-family: Georgia, serif;
}

.video-frame {
  position: relative;

  width:
    min(900px,100%);

  margin: auto;

  padding: 9px;

  overflow: hidden;

  border:
    1px solid rgba(240,215,149,.5);

  border-radius: 22px;

  background: #020b0a;

  box-shadow:
    0 35px 100px rgba(0,0,0,.45);

  animation:
    frameFloat 6s ease-in-out infinite;
}

.video-frame::before {
  content: "";

  position: absolute;

  z-index: 5;

  top: -120%;
  left: -50%;

  width: 30%;
  height: 350%;

  transform: rotate(22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.16),
      transparent
    );

  animation:
    frameSweep 6s infinite;
}

.frame-light {
  position: absolute;

  inset: -20px;

  border-radius: 30px;

  box-shadow:
    inset 0 0 45px rgba(240,215,149,.15);

  pointer-events: none;
}

.video-frame video {
  width: 100%;

  max-height: 72vh;

  display: block;

  border-radius: 15px;

  background: black;
}

.frame-star {
  position: absolute;

  z-index: 6;

  color: var(--gold-2);

  animation:
    frameStar 2.8s infinite ease-in-out;
}

.frame-star.s1 {
  left: 15px;
  top: 12px;
}

.frame-star.s2 {
  right: 18px;
  top: 20px;

  animation-delay: 1s;
}

.frame-star.s3 {
  right: 30px;
  bottom: 15px;

  animation-delay: 2s;
}

@keyframes frameFloat {

  50% {
    transform:
      translateY(-8px)
      scale(1.005);

    box-shadow:
      0 45px 120px rgba(0,0,0,.5),
      0 0 45px rgba(240,215,149,.10);
  }

}

@keyframes frameSweep {

  0%,
  50% {
    left: -50%;
  }

  70%,
  100% {
    left: 150%;
  }

}

@keyframes frameStar {

  50% {
    transform:
      scale(1.5)
      rotate(90deg);

    filter:
      drop-shadow(
        0 0 10px var(--gold-2)
      );
  }

}

.video-indicator {
  width: fit-content;

  margin:
    25px auto 0;

  padding:
    10px 16px;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius: 100px;

  color:
    rgba(255,255,255,.65);

  font-size: 10px;
}

.video-indicator i {
  width: 8px;
  height: 8px;

  display: inline-block;

  margin-right: 8px;

  border-radius: 50%;

  background: var(--gold-2);

  animation:
    indicatorPulse 1.5s infinite;
}

@keyframes indicatorPulse {

  70% {
    box-shadow:
      0 0 0 9px
      rgba(240,215,149,0);
  }

  0% {
    box-shadow:
      0 0 0 0
      rgba(240,215,149,.45);
  }

}


/* ======================================================
   DETALLES
====================================================== */

.details-section {
  background:
    linear-gradient(
      180deg,
      #faf3e5,
      #fffaf0
    );
}

.details-grid {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 20px;

  margin-top: 42px;
}

.detail-card {
  position: relative;

  overflow: hidden;

  padding:
    35px 22px;

  text-align: center;

  border:
    1px solid #eadfc8;

  border-radius: 22px;

  background:
    rgba(255,255,255,.78);

  box-shadow:
    0 15px 45px rgba(70,49,20,.07);

  animation:
    cardFloat 5s ease-in-out infinite;
}

.detail-card:nth-child(2) {
  animation-delay: 1.2s;
}

.detail-card:nth-child(3) {
  animation-delay: 2.4s;
}

.card-orbit {
  position: absolute;

  width: 140px;
  height: 140px;

  right: -65px;
  top: -65px;

  border:
    1px solid rgba(199,151,62,.12);

  border-radius: 50%;

  animation:
    orbitSpin 10s linear infinite;
}

.card-orbit::after {
  content: "";

  position: absolute;

  width: 10px;
  height: 10px;

  left: 15px;
  top: 16px;

  border-radius: 50%;

  background: var(--gold-1);

  box-shadow:
    0 0 10px var(--gold-1);
}

.detail-number {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  margin:
    0 auto 15px;

  border-radius: 50%;

  color: white;

  background:
    linear-gradient(
      135deg,
      var(--red-1),
      var(--red-2)
    );

  font-size: 10px;

  animation:
    numberPulse 3s ease-in-out infinite;
}

.detail-label {
  margin-bottom: 9px;

  color: #99732f;

  font-size: 8px;

  letter-spacing: 2px;

  text-transform: uppercase;
}

.detail-value {
  color: #493d34;

  font-family: Georgia, serif;

  line-height: 1.55;
}

@keyframes cardFloat {

  50% {
    transform: translateY(-9px);

    box-shadow:
      0 28px 65px rgba(70,49,20,.12);
  }

}

@keyframes orbitSpin {

  to {
    transform: rotate(360deg);
  }

}

@keyframes numberPulse {

  50% {
    transform: scale(1.12);

    box-shadow:
      0 0 22px rgba(173,29,35,.23);
  }

}


/* ======================================================
   COUNTDOWN
====================================================== */

.countdown-section {
  color: white;

  background:
    radial-gradient(
      circle at top,
      #bf2026,
      #770c11 68%
    );
}

.countdown-wave {
  position: absolute;

  width: 800px;
  height: 800px;

  border:
    1px solid rgba(255,255,255,.05);

  border-radius: 50%;

  animation:
    countdownWave 10s linear infinite;
}

.wave-one {
  left: -350px;
  top: -500px;
}

.wave-two {
  right: -350px;
  bottom: -550px;

  animation-direction: reverse;
}

@keyframes countdownWave {

  to {
    transform:
      rotate(360deg)
      scale(1.2);
  }

}

.countdown-subtitle {
  margin:
    -2px 0 38px;

  text-align: center;

  opacity: .65;

  font-size: 8px;

  letter-spacing: 2.5px;

  text-transform: uppercase;
}

.countdown-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 12px;
}

.countdown-card {
  position: relative;

  overflow: hidden;

  padding:
    26px 10px;

  text-align: center;

  border:
    1px solid rgba(255,255,255,.18);

  border-radius: 18px;

  background:
    rgba(255,255,255,.07);

  backdrop-filter: blur(8px);

  animation:
    countdownFloat 4.5s ease-in-out infinite;
}

.countdown-card:nth-child(2) {
  animation-delay: .7s;
}

.countdown-card:nth-child(3) {
  animation-delay: 1.4s;
}

.countdown-card:nth-child(4) {
  animation-delay: 2.1s;
}

.countdown-card strong {
  display: block;

  font-family: Georgia, serif;

  font-size:
    clamp(34px,6vw,58px);

  font-weight: normal;

  animation:
    numberGlow 2.6s ease-in-out infinite;
}

.countdown-card span {
  display: block;

  margin-top: 5px;

  opacity: .65;

  font-size: 8px;

  letter-spacing: 2px;

  text-transform: uppercase;
}

.count-shine {
  position: absolute;

  top: -120%;
  left: -70%;

  width: 35%;
  height: 350%;

  transform: rotate(22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18),
      transparent
    );

  animation:
    countSweep 5s infinite;
}

@keyframes countdownFloat {

  50% {
    transform: translateY(-7px);
  }

}

@keyframes numberGlow {

  50% {
    transform: scale(1.06);

    text-shadow:
      0 0 22px rgba(255,225,175,.35);
  }

}

@keyframes countSweep {

  55%,
  100% {
    left: 150%;
  }

}


/* ======================================================
   PROGRAMA
====================================================== */

.program-section {
  background:
    linear-gradient(
      180deg,
      #fffaf0,
      #f7efdf
    );
}

.timeline-shell {
  position: relative;

  margin-top: 40px;
}

.timeline-line {
  position: absolute;

  left: 111px;
  top: 25px;
  bottom: 25px;

  width: 2px;

  overflow: hidden;

  background:
    rgba(199,151,62,.18);
}

.timeline-progress {
  width: 100%;
  height: 0;

  background:
    linear-gradient(
      var(--gold-2),
      var(--red-1)
    );

  box-shadow:
    0 0 15px rgba(199,151,62,.25);

  transition:
    height 2.5s var(--ease);
}

.program-section.in-view
.timeline-progress {
  height: 100%;
}

.timeline {
  position: relative;

  z-index: 3;
}

.timeline-item {
  display: grid;

  grid-template-columns:
    90px 20px 1fr;

  gap: 18px;

  align-items: center;

  margin-bottom: 14px;

  padding:
    15px 18px;

  opacity: 0;

  transform:
    translateX(-40px);

  border:
    1px solid #ece2d1;

  border-radius: 17px;

  background: white;

  box-shadow:
    0 10px 30px rgba(65,41,16,.05);

  transition:
    opacity .8s ease,
    transform .8s var(--ease),
    box-shadow .35s;
}

.timeline-item.visible {
  opacity: 1;

  transform: translateX(0);
}

.timeline-item:hover {
  transform:
    translateX(8px)
    scale(1.01);

  box-shadow:
    0 20px 45px rgba(65,41,16,.10);
}

.timeline-time {
  padding:
    12px 8px;

  text-align: center;

  color: white;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      var(--red-1),
      var(--red-2)
    );

  font-family: Georgia, serif;

  animation:
    timePulse 4s ease-in-out infinite;
}

.timeline-dot {
  width: 11px;
  height: 11px;

  margin: auto;

  border:
    2px solid white;

  border-radius: 50%;

  background: var(--gold-1);

  box-shadow:
    0 0 0 3px
    rgba(199,151,62,.16);

  animation:
    timelineDot 1.8s ease-in-out infinite;
}

.timeline-content strong {
  display: block;

  color: #342a25;

  font-family: Georgia, serif;

  font-size: 18px;
}

.timeline-content span {
  display: block;

  margin-top: 4px;

  color: #77706a;

  font-size: 11px;
}

@keyframes timePulse {

  50% {
    box-shadow:
      0 0 25px rgba(173,29,35,.18);
  }

}

@keyframes timelineDot {

  50% {
    transform: scale(1.3);

    box-shadow:
      0 0 0 7px rgba(199,151,62,.08),
      0 0 20px rgba(199,151,62,.35);
  }

}

.program-message {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 18px;

  margin-top: 40px;

  padding: 26px;

  text-align: center;

  border:
    1px solid #e4d4b3;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      white,
      #f8edda
    );

  animation:
    programMessage 5s ease-in-out infinite;
}

.program-message span {
  color: var(--gold-1);

  animation:
    messageStar 3s infinite;
}

.program-message p {
  margin: 0;

  font-family: Georgia, serif;

  font-size: 18px;

  line-height: 1.6;
}

@keyframes programMessage {

  50% {
    transform: translateY(-5px);

    box-shadow:
      0 18px 45px rgba(80,56,25,.08);
  }

}


/* ======================================================
   ACCESOS
====================================================== */

.access-section {
  color: white;

  background:
    radial-gradient(
      circle at top,
      #0b4d3d,
      #03231b 67%,
      #021713
    );
}

.access-aurora {
  position: absolute;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  filter: blur(60px);

  opacity: .14;

  animation:
    accessAurora 9s ease-in-out infinite;
}

.aurora-a {
  left: -250px;
  top: 20%;

  background: var(--red-1);
}

.aurora-b {
  right: -250px;
  bottom: 5%;

  background: var(--gold-1);

  animation-delay: 4s;
}

@keyframes accessAurora {

  50% {
    transform:
      translateX(150px)
      scale(1.2);
  }

}

.access-description {
  max-width: 640px;

  margin:
    0 auto 42px;

  text-align: center;

  color:
    rgba(255,255,255,.64);

  line-height: 1.7;
}

.ticket-grid {
  position: relative;

  z-index: 4;

  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(330px,100%),
        1fr
      )
    );

  gap: 28px;
}


/* ======================================================
   TICKET
====================================================== */

.ticket {
  position: relative;

  overflow: hidden;

  opacity: 0;

  transform:
    perspective(900px)
    rotateX(8deg)
    translateY(50px)
    scale(.94);

  color: #322e29;

  border:
    1px solid rgba(240,215,149,.45);

  border-radius: 23px;

  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 72%, rgba(255,255,255,.12) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 41% 26%, rgba(249,178,51,.20) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 14%, rgba(255,255,255,.14) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 74% 64%, rgba(255,255,255,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 22%, rgba(249,178,51,.18) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 82% 82%, rgba(255,255,255,.15) 0 2px, transparent 3px),
    linear-gradient(180deg, #070b34 0%, #0d1451 42%, #121c68 62%, #090d3d 100%);

  box-shadow:
    0 30px 80px rgba(0,0,0,.30);

  transition:
    opacity .9s,
    transform .9s var(--ease),
    box-shadow .4s;
}

.ticket.visible {
  opacity: 1;

  transform:
    perspective(900px)
    rotateX(0)
    translateY(0)
    scale(1);

  animation:
    ticketFloat 6s ease-in-out infinite;
}

.ticket.visible:hover {
  animation-play-state: paused;

  transform:
    translateY(-10px)
    scale(1.015);

  box-shadow:
    0 45px 110px rgba(0,0,0,.40),
    0 0 35px rgba(199,151,62,.14);
}

.ticket::before {
  content: "";

  position: absolute;

  z-index: 8;

  top: -120%;
  left: -70%;

  width: 25%;
  height: 350%;

  transform: rotate(22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.35),
      transparent
    );

  animation:
    ticketSweep 7s infinite;
}

@keyframes ticketFloat {

  50% {
    transform:
      translateY(-6px);
  }

}

@keyframes ticketSweep {

  0%,
  60% {
    left: -70%;
  }

  80%,
  100% {
    left: 150%;
  }

}

.ticket-top {
  position: relative;

  overflow: hidden;

  padding: 25px;

  text-align: center;

  color: white;

  background:
    linear-gradient(
      135deg,
      var(--red-1),
      var(--red-2)
    );
}

.ticket-top::before {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  right: -100px;
  top: -100px;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius: 50%;

  animation:
    ticketOrbit 8s linear infinite;
}

.ticket-top::after {
  content: "✦";

  position: absolute;

  right: 15px;
  top: 8px;

  color:
    rgba(255,255,255,.16);

  font-size: 80px;

  animation:
    ticketStar 5s linear infinite;
}

@keyframes ticketOrbit {

  to {
    transform: rotate(360deg);
  }

}

@keyframes ticketStar {

  50% {
    transform:
      rotate(180deg)
      scale(1.15);
  }

}

.ticket-title {
  position: relative;

  z-index: 2;

  opacity: .7;

  font-size: 8px;

  letter-spacing: 2px;

  text-transform: uppercase;
}

.ticket-family {
  position: relative;

  z-index: 2;

  margin-top: 5px;

  font-family: Georgia, serif;

  font-size: 27px;
}

.seccion-horario {
  position: relative;

  z-index: 2;

  margin-top: 6px;

  color: var(--gold-2);

  font-size: 14px;
}

.alumnos-seccion {
  padding:
    22px 25px;

  border-bottom:
    1px solid #ede4d4;
}

.mini-label {
  margin-bottom: 10px;

  color: #96712e;

  font-size: 8px;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}

.alumno-item {
  padding: 7px 0;

  border-bottom:
    1px solid #f0eadf;
}

.alumno-item:last-child {
  border-bottom: 0;
}

.alumno-item strong {
  display: block;

  color: #173c32;

  font-family: Georgia, serif;
}

.alumno-item span {
  display: block;

  margin-top: 3px;

  color: #7a736b;

  font-size: 11px;
}

.cupos {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 7px;

  padding: 18px;
}

.cupo-box {
  padding:
    13px 5px;

  text-align: center;

  border:
    1px solid #eee5d7;

  border-radius: 12px;

  transition:
    transform .3s,
    background .3s;
}

.cupo-box:hover {
  transform: translateY(-3px);

  background: #f7f2e8;
}

.cupo-box span {
  min-height: 25px;

  display: block;

  color: #8c857c;

  font-size: 8px;

  text-transform: uppercase;
}

.cupo-box strong {
  display: block;

  margin-top: 4px;

  color: #153e32;

  font-family: Georgia, serif;

  font-size: 25px;
}

.cupo-box.destacado {
  background: #edf6f0;
}


/* ======================================================
   QR
====================================================== */

.qr-container {
  padding:
    15px 22px 22px;

  text-align: center;
}

.qr-seccion {
  position: relative;

  width: 280px;

  max-width: 100%;

  aspect-ratio: 1;

  display: grid;
  place-items: center;

  margin: auto;

  padding: 15px;

  border:
    1px solid #e7dbc5;

  border-radius: 16px;

  background: white;

  animation:
    qrGlow 4s ease-in-out infinite;
}

.qr-seccion::before {
  content: "";

  position: absolute;

  inset: -12px;

  z-index: -1;

  border-radius: 25px;

  background:
    radial-gradient(
      circle,
      rgba(199,151,62,.20),
      transparent 70%
    );

  filter: blur(14px);

  animation:
    qrAura 4s ease-in-out infinite;
}

.qr-seccion img,
.qr-seccion canvas {
  max-width: 100%;

  height: auto !important;
}

@keyframes qrGlow {

  50% {
    box-shadow:
      0 0 28px rgba(199,151,62,.18);
  }

}

@keyframes qrAura {

  50% {
    opacity: .25;

    transform: scale(1.08);
  }

}

.qr-instruction {
  margin-top: 14px;

  color: #777168;

  font-size: 10px;

  line-height: 1.5;
}

.folio {
  padding: 13px;

  text-align: center;

  color: #8b8175;

  border-top:
    1px dashed #dbcdb6;

  font-size: 9px;

  letter-spacing: 1px;
}


/* ======================================================
   AVISO
====================================================== */

.access-notice {
  position: relative;

  z-index: 4;

  width:
    min(650px,100%);

  display: flex;
  align-items: flex-start;

  gap: 15px;

  margin:
    38px auto 0;

  padding:
    18px 20px;

  border:
    1px solid rgba(255,255,255,.14);

  border-radius: 15px;

  background:
    rgba(255,255,255,.05);

  animation:
    noticeGlow 5s ease-in-out infinite;
}

.notice-icon {
  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  display: grid;
  place-items: center;

  color: var(--gold-2);

  border:
    1px solid var(--gold-2);

  border-radius: 50%;
}

.access-notice strong {
  color: var(--gold-2);
}

.access-notice p {
  margin:
    3px 0 0;

  color:
    rgba(255,255,255,.63);

  font-size: 11px;
}

@keyframes noticeGlow {

  50% {
    box-shadow:
      0 0 35px rgba(240,215,149,.07);
  }

}


/* ======================================================
   GALERÍA
====================================================== */

.gallery-section {
  background:
    linear-gradient(
      180deg,
      #faf3e5,
      #fffaf0
    );
}

.gallery-grid {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  grid-auto-rows:
    200px;

  gap: 10px;

  margin-top: 42px;
}

.gallery-item {
  position: relative;

  margin: 0;

  overflow: hidden;

  cursor: pointer;

  opacity: 0;

  transform:
    translateY(35px)
    scale(.94);

  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      var(--green-2),
      var(--red-1)
    );

  box-shadow:
    0 12px 35px rgba(40,30,20,.09);

  transition:
    transform .45s var(--ease),
    box-shadow .45s;
}

.gallery-section.in-view
.gallery-item {
  animation:
    galleryReveal .9s var(--ease) forwards;
}

.gallery-item:nth-child(1) {
  animation-delay: .05s !important;
}

.gallery-item:nth-child(2) {
  animation-delay: .12s !important;
}

.gallery-item:nth-child(3) {
  animation-delay: .19s !important;
}

.gallery-item:nth-child(4) {
  animation-delay: .26s !important;
}

.gallery-item:nth-child(5) {
  animation-delay: .33s !important;
}

.gallery-item:nth-child(6) {
  animation-delay: .40s !important;
}

.gallery-item:nth-child(7) {
  animation-delay: .47s !important;
}

.gallery-item:nth-child(8) {
  animation-delay: .54s !important;
}

@keyframes galleryReveal {

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}

.gallery-item.large {
  grid-column: span 2;

  grid-row: span 2;
}

.gallery-item.tall {
  grid-row: span 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .75s var(--ease),
    filter .4s;
}

.gallery-item:hover {
  transform:
    translateY(-8px)
    scale(1.015);

  box-shadow:
    0 25px 65px rgba(40,30,20,.2);
}

.gallery-item:hover img {
  transform: scale(1.10);

  filter:
    brightness(.85);
}

.gallery-shine {
  position: absolute;

  z-index: 3;

  top: -130%;
  left: -80%;

  width: 35%;
  height: 380%;

  transform: rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.22),
      transparent
    );

  animation:
    gallerySweep 7s infinite;
}

.gallery-item:nth-child(2n)
.gallery-shine {
  animation-delay: 2s;
}

@keyframes gallerySweep {

  0%,
  65% {
    left: -80%;
  }

  85%,
  100% {
    left: 160%;
  }

}

.gallery-item figcaption {
  position: absolute;

  z-index: 4;

  left: 50%;
  bottom: 18px;

  transform:
    translate(-50%,15px);

  opacity: 0;

  padding:
    8px 14px;

  color: white;

  border:
    1px solid rgba(255,255,255,.35);

  border-radius: 100px;

  background:
    rgba(0,0,0,.3);

  backdrop-filter: blur(6px);

  font-size: 8px;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  transition:
    opacity .4s,
    transform .4s;
}

.gallery-item:hover figcaption {
  opacity: 1;

  transform:
    translate(-50%,0);
}


/* ======================================================
   LIGHTBOX
====================================================== */

.lightbox {
  position: fixed;
  inset: 0;

  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px;

  background:
    rgba(0,0,0,.94);

  backdrop-filter:
    blur(16px);

  animation:
    lightboxIn .35s ease;
}

@keyframes lightboxIn {

  from {
    opacity: 0;
  }

}

.lightbox-image-wrap {
  width:
    min(1100px,90vw);

  height:
    min(800px,82vh);

  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image-wrap img {
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  border-radius: 12px;

  box-shadow:
    0 30px 100px black;

  animation:
    lightboxImage .55s var(--ease);
}

@keyframes lightboxImage {

  from {
    opacity: 0;

    transform:
      scale(.83)
      translateY(25px);
  }

}

.lightbox-close,
.lightbox-arrow {
  position: absolute;

  cursor: pointer;

  color: white;

  border:
    1px solid rgba(255,255,255,.22);

  border-radius: 50%;

  background:
    rgba(255,255,255,.08);

  transition:
    transform .25s,
    background .25s;
}

.lightbox-close {
  top: 20px;
  right: 25px;

  width: 48px;
  height: 48px;

  font-size: 29px;
}

.lightbox-arrow {
  top: 50%;

  width: 50px;
  height: 50px;

  transform:
    translateY(-50%);

  font-size: 32px;
}

.lightbox-arrow.left {
  left: 20px;
}

.lightbox-arrow.right {
  right: 20px;
}

.lightbox-close:hover {
  transform: scale(1.12);

  background:
    rgba(255,255,255,.15);
}

.lightbox-arrow:hover {
  transform:
    translateY(-50%)
    scale(1.12);

  background:
    rgba(255,255,255,.15);
}


/* ======================================================
   FINAL
====================================================== */

.final-section {
  text-align: center;

  background:
    linear-gradient(
      180deg,
      #fffaf0,
      #f0e1ca
    );
}

.final-star-field span {
  position: absolute;

  color:
    rgba(199,151,62,.25);

  animation:
    finalTwinkle 3s infinite;
}

.final-star-field span:nth-child(1) {
  left: 10%;
  top: 20%;
}

.final-star-field span:nth-child(2) {
  right: 14%;
  top: 18%;

  animation-delay: .7s;
}

.final-star-field span:nth-child(3) {
  left: 20%;
  bottom: 18%;

  animation-delay: 1.4s;
}

.final-star-field span:nth-child(4) {
  right: 25%;
  bottom: 22%;

  animation-delay: 2.1s;
}

.final-star-field span:nth-child(5) {
  left: 50%;
  top: 15%;

  animation-delay: 2.7s;
}

@keyframes finalTwinkle {

  50% {
    transform:
      scale(1.8)
      rotate(90deg);

    opacity: .8;
  }

}

.final-star {
  margin-bottom: 20px;

  color: var(--gold-1);

  font-size: 42px;

  animation:
    finalStar 3s ease-in-out infinite;
}

@keyframes finalStar {

  50% {
    transform:
      scale(1.35)
      rotate(180deg);

    filter:
      drop-shadow(
        0 0 18px rgba(199,151,62,.4)
      );
  }

}

.final-text {
  max-width: 620px;

  margin: auto;

  color: #746c62;

  font-family: Georgia, serif;

  font-size: 18px;

  line-height: 1.7;
}

.final-signature {
  margin-top: 30px;

  color: #8d692c;

  font-family: Georgia, serif;

  font-size: 22px;

  font-style: italic;

  animation:
    signatureFloat 5s ease-in-out infinite;
}

@keyframes signatureFloat {

  50% {
    transform: translateY(-5px);
  }

}


/* ======================================================
   FOOTER
====================================================== */

footer {
  position: relative;

  overflow: hidden;

  padding:
    75px 25px 30px;

  text-align: center;

  color: white;

  background:
    radial-gradient(
      circle at top,
      #0a4a39,
      #021612
    );
}

.footer-stars {
  color: var(--gold-2);

  animation:
    footerStars 3s infinite;
}

@keyframes footerStars {

  50% {
    letter-spacing: 8px;

    text-shadow:
      0 0 15px var(--gold-2);
  }

}

.footer-name {
  margin-top: 18px;

  font-family: Georgia, serif;

  font-size: 30px;
}

.footer-phrase {
  margin-top: 10px;

  color:
    rgba(255,255,255,.58);

  font-family: Georgia, serif;
}

.footer-trees {
  height: 95px;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  gap: 10px;

  margin-top: 30px;
}

.footer-copy {
  padding-top: 20px;

  color:
    rgba(255,255,255,.36);

  border-top:
    1px solid rgba(255,255,255,.10);

  font-size: 8px;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}


/* ======================================================
   RESPONSIVE TABLET
====================================================== */

@media (max-width: 850px) {

  .nav-links {
    display: none;
  }

  .section {
    padding:
      80px 18px;
  }

  .details-grid {
    grid-template-columns:
      1fr;
  }

  .gallery-grid {
    grid-template-columns:
      repeat(2,1fr);

    grid-auto-rows:
      160px;
  }

  .timeline-line {
    left: 90px;
  }

  .timeline-item {
    grid-template-columns:
      72px 14px 1fr;

    gap: 10px;
  }

}


/* ======================================================
   RESPONSIVE MOVIL
====================================================== */

@media (max-width: 600px) {

  .nav-flotante {
    min-height: 60px;

    padding:
      7px 14px;
  }

  .nav-logo {
    width: 33px;
    height: 33px;
  }

  .nav-marca strong {
    font-size: 14px;
  }

  .nav-marca small {
    font-size: 7px;
  }

  .hero-luces {
    top: 67px;
  }

  .hero-content {
    padding:
      105px 8px;
  }

  .hero-title {
    font-size:
      clamp(
        48px,
        15vw,
        69px
      );
  }

  .hero-title::after {
    display: none;
  }

  .hero-year {
    font-size: 20px;

    letter-spacing: 8px;
  }

  .hero-phrase {
    font-size: 19px;
  }

  .hero-family strong {
    font-size: 24px;
  }

  .section {
    padding:
      72px 15px;
  }

  .section h2 {
    font-size:
      clamp(
        32px,
        10vw,
        44px
      );
  }

  .section-intro {
    font-size: 17px;
  }

  .message-card {
    align-items: flex-start;

    padding: 19px;
  }

  .countdown-grid {
    grid-template-columns:
      repeat(2,1fr);
  }

  .timeline-line {
    left: 82px;
  }

  .timeline-item {
    grid-template-columns:
      64px 12px 1fr;

    gap: 9px;

    padding:
      12px 11px;
  }

  .timeline-content strong {
    font-size: 15px;
  }

  .program-message {
    padding:
      20px 14px;
  }

  .ticket-grid {
    grid-template-columns: 1fr;
  }

  .qr-seccion {
    width: 245px;
  }

  .gallery-grid {
    grid-template-columns:
      repeat(2,1fr);

    grid-auto-rows:
      135px;
  }

  .gallery-item.large {
    grid-column: span 2;
  }

  .gallery-item figcaption {
    display: none;
  }

  .lightbox {
    padding:
      20px 8px;
  }

  .lightbox-arrow {
    width: 42px;
    height: 42px;
  }

  .lightbox-arrow.left {
    left: 7px;
  }

  .lightbox-arrow.right {
    right: 7px;
  }

  .lightbox-close {
    top: 10px;
    right: 10px;
  }

}


/* ======================================================
   REDUCIR MOVIMIENTO
====================================================== */

@media (
  prefers-reduced-motion:
  reduce
) {

  *,
  *::before,
  *::after {
    animation:
      none !important;

    transition:
      none !important;
  }

}

/* =========================================================
   COMPATIBILIDAD V34/V35
   Corrige detalles + countdown aunque el HTML tenga
   nombres de clases anteriores.
========================================================= */


/* =========================================================
   DETALLES DEL EVENTO
========================================================= */

.details-grid,
.info-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 22px;

  width: min(1050px, 100%);

  margin:
    45px auto 0;
}


.detail-card,
.info-card {
  position: relative;

  min-height: 200px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding:
    34px 25px;

  text-align: center;

  border:
    1px solid rgba(199,151,62,.25);

  border-radius: 22px;

  background:
    rgba(255,255,255,.82);

  box-shadow:
    0 15px 45px
    rgba(70,49,20,.08);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  animation:
    tarjetaFlotante 5s
    ease-in-out infinite;

  transition:
    transform .4s ease,
    box-shadow .4s ease,
    border-color .4s ease;
}


.detail-card:nth-child(2),
.info-card:nth-child(2) {
  animation-delay:
    .8s;
}


.detail-card:nth-child(3),
.info-card:nth-child(3) {
  animation-delay:
    1.6s;
}


.detail-card:hover,
.info-card:hover {
  transform:
    translateY(-10px)
    scale(1.02);

  border-color:
    rgba(199,151,62,.55);

  box-shadow:
    0 28px 70px
    rgba(70,49,20,.15),
    0 0 30px
    rgba(199,151,62,.10);
}


@keyframes tarjetaFlotante {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-7px);
  }

}


/* número 01 / 02 / 03 */

.detail-number,
.info-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  margin:
    0 auto 15px;

  color: white;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #ad1d23,
      #760b11
    );

  font-size: 11px;

  font-weight: 700;

  box-shadow:
    0 8px 25px
    rgba(150,20,25,.18);

  animation:
    iconoDetalle 3s
    ease-in-out infinite;
}


@keyframes iconoDetalle {

  50% {
    transform:
      scale(1.10);

    box-shadow:
      0 0 25px
      rgba(173,29,35,.22);
  }

}


.detail-label,
.info-label {
  margin-bottom:
    10px;

  color:
    #98732e;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    2px;

  text-transform:
    uppercase;
}


.detail-value,
.info-value {
  color:
    #493d34;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    18px;

  line-height:
    1.55;
}


/* =========================================================
   CUENTA REGRESIVA
========================================================= */

.countdown-grid,
.countdown {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 15px;

  width:
    min(800px,100%);

  margin:
    40px auto 0;
}


.countdown-card,
.count-box {
  position: relative;

  min-height: 145px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding:
    25px 12px;

  text-align: center;

  border:
    1px solid
    rgba(255,255,255,.20);

  border-radius:
    18px;

  background:
    rgba(255,255,255,.07);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.08);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  animation:
    contadorFlotar 4.5s
    ease-in-out infinite;
}


.countdown-card:nth-child(2),
.count-box:nth-child(2) {
  animation-delay:
    .45s;
}


.countdown-card:nth-child(3),
.count-box:nth-child(3) {
  animation-delay:
    .90s;
}


.countdown-card:nth-child(4),
.count-box:nth-child(4) {
  animation-delay:
    1.35s;
}


@keyframes contadorFlotar {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-7px);
  }

}


/* brillo que atraviesa cada contador */

.countdown-card::before,
.count-box::before {
  content: "";

  position: absolute;

  top: -120%;
  left: -70%;

  width: 32%;
  height: 350%;

  transform:
    rotate(22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18),
      transparent
    );

  animation:
    brilloContador 5s
    linear infinite;
}


.countdown-card:nth-child(2)::before,
.count-box:nth-child(2)::before {
  animation-delay:
    .7s;
}


.countdown-card:nth-child(3)::before,
.count-box:nth-child(3)::before {
  animation-delay:
    1.4s;
}


.countdown-card:nth-child(4)::before,
.count-box:nth-child(4)::before {
  animation-delay:
    2.1s;
}


@keyframes brilloContador {

  0%,
  55% {
    left:
      -70%;
  }

  80%,
  100% {
    left:
      150%;
  }

}


/* números */

.countdown-card strong,
.count-box strong {
  position: relative;

  z-index: 2;

  display: block;

  color: white;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      38px,
      6vw,
      62px
    );

  font-weight:
    400;

  line-height:
    1;

  animation:
    numeroContador 2.7s
    ease-in-out infinite;
}


@keyframes numeroContador {

  0%,
  100% {
    transform:
      scale(1);

    text-shadow:
      0 0 0
      transparent;
  }

  50% {
    transform:
      scale(1.05);

    text-shadow:
      0 0 22px
      rgba(255,225,175,.32);
  }

}


/* textos días/horas/minutos/segundos */

.countdown-card span,
.count-box span {
  position: relative;

  z-index: 2;

  display: block;

  margin-top:
    10px;

  color:
    rgba(255,255,255,.70);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    2px;

  text-transform:
    uppercase;
}


/* =========================================================
   FONDO CUENTA REGRESIVA
========================================================= */

.countdown-section {
  position: relative;

  overflow: hidden;

  min-height:
    500px;

  display: flex;
  align-items: center;

  color: white;

  background:
    radial-gradient(
      circle at 50% 0%,
      #c92a30,
      #991017 45%,
      #710a0f 100%
    );
}


.countdown-section::before {
  content: "";

  position: absolute;

  width: 650px;
  height: 650px;

  left: 50%;
  top: -460px;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(255,218,145,.16),
      transparent 68%
    );

  animation:
    haloCountdown 5s
    ease-in-out infinite;
}


@keyframes haloCountdown {

  50% {
    transform:
      translateX(-50%)
      scale(1.25);

    opacity:
      .55;
  }

}


/* =========================================================
   ANIMACIÓN DEL TÍTULO DEL COUNTDOWN
========================================================= */

.countdown-section h2 {
  position: relative;

  color: white !important;

  animation:
    tituloCountdown 4s
    ease-in-out infinite;
}


@keyframes tituloCountdown {

  50% {
    text-shadow:
      0 0 30px
      rgba(255,220,160,.16);
  }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width: 850px
) {

  .details-grid,
  .info-grid {
    grid-template-columns:
      1fr;

    max-width:
      600px;
  }

}


@media (
  max-width: 600px
) {

  .countdown-grid,
  .countdown {
    grid-template-columns:
      repeat(2,1fr);

    gap:
      10px;
  }


  .countdown-card,
  .count-box {
    min-height:
      125px;

    padding:
      20px 8px;
  }


  .countdown-card strong,
  .count-box strong {
    font-size:
      40px;
  }


  .detail-card,
  .info-card {
    min-height:
      165px;
  }

}

/* =========================================================
   GALERIA CARRUSEL 3D
========================================================= */

.gallery-carousel {
  position: relative;

  width: min(1100px, 100%);

  height: 520px;

  margin: 45px auto 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  perspective: 1400px;
}


.gallery-track {
  position: relative;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;
}


.gallery-slide {
  position: absolute;

  left: 50%;
  top: 50%;

  width: min(520px, 70vw);
  height: 390px;

  overflow: hidden;

  border-radius: 24px;

  opacity: 0;

  cursor: pointer;

  transform:
    translate(-50%, -50%)
    scale(.6);

  transition:
    transform .8s cubic-bezier(.16,1,.3,1),
    opacity .8s ease,
    filter .8s ease,
    box-shadow .8s ease;

  box-shadow:
    0 30px 90px rgba(0,0,0,.20);

  background: #063528;
}


.gallery-slide img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .8s cubic-bezier(.16,1,.3,1);
}


.gallery-slide::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0,0,0,.32)
    );
}


/* FOTO CENTRAL */

.gallery-slide.active {
  z-index: 10;

  opacity: 1;

  filter: none;

  transform:
    translate(-50%, -50%)
    translateZ(80px)
    scale(1);

  box-shadow:
    0 45px 120px rgba(0,0,0,.30),
    0 0 50px rgba(199,151,62,.12);
}


.gallery-slide.active:hover img {
  transform:
    scale(1.04);
}


/* FOTO IZQUIERDA */

.gallery-slide.prev {
  z-index: 5;

  opacity: .72;

  filter:
    brightness(.72);

  transform:
    translate(-115%, -50%)
    rotateY(35deg)
    scale(.76);
}


/* FOTO DERECHA */

.gallery-slide.next {
  z-index: 5;

  opacity: .72;

  filter:
    brightness(.72);

  transform:
    translate(15%, -50%)
    rotateY(-35deg)
    scale(.76);
}


/* FOTOS MÁS ALEJADAS */

.gallery-slide.prev-far {
  z-index: 2;

  opacity: .20;

  filter:
    brightness(.45);

  transform:
    translate(-150%, -50%)
    rotateY(45deg)
    scale(.55);
}


.gallery-slide.next-far {
  z-index: 2;

  opacity: .20;

  filter:
    brightness(.45);

  transform:
    translate(50%, -50%)
    rotateY(-45deg)
    scale(.55);
}


/* ocultar las demás */

.gallery-slide.hidden {
  opacity: 0;

  pointer-events: none;

  transform:
    translate(-50%, -50%)
    scale(.4);
}


/* brillo animado */

.gallery-slide.active::before {
  content: "";

  position: absolute;

  z-index: 3;

  top: -120%;
  left: -60%;

  width: 25%;
  height: 350%;

  transform:
    rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.25),
      transparent
    );

  animation:
    galleryActiveShine 5s infinite;
}


@keyframes galleryActiveShine {

  0%,
  55% {
    left: -60%;
  }

  80%,
  100% {
    left: 150%;
  }

}


/* flechas */

.gallery-arrow {
  position: absolute;

  z-index: 20;

  top: 50%;

  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  transform:
    translateY(-50%);

  cursor: pointer;

  color: white;

  border:
    1px solid rgba(255,255,255,.22);

  border-radius: 50%;

  background:
    rgba(5,45,35,.72);

  backdrop-filter:
    blur(10px);

  font-size: 34px;

  box-shadow:
    0 10px 30px rgba(0,0,0,.15);

  transition:
    transform .25s,
    background .25s,
    box-shadow .25s;
}


.gallery-arrow:hover {
  transform:
    translateY(-50%)
    scale(1.10);

  background:
    #8e1117;

  box-shadow:
    0 15px 35px rgba(0,0,0,.25);
}


.gallery-arrow-left {
  left: 20px;
}


.gallery-arrow-right {
  right: 20px;
}


/* puntos */

.gallery-dots {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  margin-top: 4px;
}


.gallery-dot {
  width: 7px;
  height: 7px;

  padding: 0;

  cursor: pointer;

  border: 0;

  border-radius: 50%;

  background:
    rgba(140,100,35,.28);

  transition:
    width .3s,
    background .3s,
    border-radius .3s;
}


.gallery-dot.active {
  width: 27px;

  border-radius: 100px;

  background:
    linear-gradient(
      90deg,
      var(--red-1),
      var(--gold-1)
    );
}


.gallery-caption {
  margin-top: 17px;

  text-align: center;

  color: #877c6e;

  font-size: 9px;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}


/* halo del carrusel */

.gallery-carousel::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 600px;
  height: 450px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(203,160,67,.10),
      transparent 68%
    );

  filter: blur(25px);

  animation:
    galleryHalo 5s ease-in-out infinite;
}


@keyframes galleryHalo {

  50% {
    opacity: .45;

    transform:
      translate(-50%, -50%)
      scale(1.10);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .gallery-carousel {
    height: 430px;
  }


  .gallery-slide {
    width: 78vw;
    height: 330px;
  }


  .gallery-slide.prev {
    transform:
      translate(-125%, -50%)
      rotateY(28deg)
      scale(.68);
  }


  .gallery-slide.next {
    transform:
      translate(25%, -50%)
      rotateY(-28deg)
      scale(.68);
  }


  .gallery-slide.prev-far,
  .gallery-slide.next-far {
    opacity: 0;
  }


  .gallery-arrow {
    width: 44px;
    height: 44px;

    font-size: 28px;
  }


  .gallery-arrow-left {
    left: 5px;
  }


  .gallery-arrow-right {
    right: 5px;
  }

}

/* =========================================================
   VIDEO COMO FONDO DE SECCIÓN
========================================================= */

.video-hero-section {
  position: relative;

  min-height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  color: white;

  background: #031713;
}


/* video ocupando toda la sección */

.video-background {
  position: absolute;

  z-index: 1;

  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;

  transform:
    translate(-50%, -50%)
    scale(1.06);

  object-fit: cover;

  pointer-events: none;

  filter:
    saturate(.92)
    contrast(1.05)
    brightness(.72);

  transition:
    transform 8s ease,
    filter 1s ease;
}


/* zoom cinematográfico mientras está visible */

.video-hero-section.in-view
.video-background {
  transform:
    translate(-50%, -50%)
    scale(1);

  filter:
    saturate(1)
    contrast(1.05)
    brightness(.78);
}


/* overlay para que el texto sea legible */

.video-background-overlay {
  position: absolute;
  inset: 0;

  z-index: 2;

  background:
    linear-gradient(
      180deg,
      rgba(2,18,15,.78) 0%,
      rgba(2,18,15,.32) 28%,
      rgba(2,18,15,.28) 55%,
      rgba(2,18,15,.68) 100%
    );
}


/* un gradiente oscuro lateral para dar profundidad */

.video-background-overlay::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at center,
      transparent 0%,
      rgba(0,0,0,.12) 55%,
      rgba(0,0,0,.40) 100%
    );
}


/* contenido sobre el video */

.video-background-content {
  position: relative;

  z-index: 5;

  width:
    min(900px, 92%);

  padding:
    120px 20px 100px;

  text-align: center;
}


/* titulo grande */

.video-background-title {
  margin:
    0 auto 18px;

  color: white;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(48px,7vw,90px);

  font-weight: 400;

  line-height: 1;

  text-shadow:
    0 15px 45px
    rgba(0,0,0,.45);

  animation:
    videoTitleFloat 5s
    ease-in-out infinite;
}


@keyframes videoTitleFloat {

  50% {
    transform:
      translateY(-6px);

    text-shadow:
      0 20px 55px
      rgba(0,0,0,.52),
      0 0 30px
      rgba(240,215,149,.12);
  }

}


/* separador */

.video-background-divider {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  margin:
    24px auto;

  color: var(--gold-2);
}


.video-background-divider i {
  position: relative;

  overflow: hidden;

  width: 85px;
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      var(--gold-2)
    );
}


.video-background-divider i:last-child {
  background:
    linear-gradient(
      to left,
      transparent,
      var(--gold-2)
    );
}


.video-background-divider i::after {
  content: "";

  position: absolute;

  top: 0;
  left: -50%;

  width: 35%;
  height: 100%;

  background: white;

  animation:
    videoDividerShine 4s infinite;
}


@keyframes videoDividerShine {

  55%,
  100% {
    left: 150%;
  }

}


/* texto */

.video-background-text {
  margin:
    0 auto;

  color:
    rgba(255,255,255,.82);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(18px,2.5vw,25px);

  line-height: 1.6;
}


/* tarjeta transparente encima del video */

.video-background-message {
  width:
    min(650px, 100%);

  display: flex;
  align-items: center;

  gap: 16px;

  margin:
    35px auto 0;

  padding:
    20px 24px;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius:
    18px;

  background:
    rgba(3,25,20,.38);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-shadow:
    0 20px 55px
    rgba(0,0,0,.20);

  animation:
    videoMessageFloat 5s
    ease-in-out infinite;
}


.video-background-message span {
  color:
    var(--gold-2);

  font-size:
    26px;

  animation:
    videoStarSpin 4s
    ease-in-out infinite;
}


.video-background-message p {
  margin: 0;

  color:
    rgba(255,255,255,.82);

  text-align: left;

  line-height:
    1.6;
}


@keyframes videoMessageFloat {

  50% {
    transform:
      translateY(-5px);

    box-shadow:
      0 30px 70px
      rgba(0,0,0,.28);
  }

}


@keyframes videoStarSpin {

  50% {
    transform:
      rotate(180deg)
      scale(1.25);
  }

}


/* boton de audio */

.video-audio-button {
  position: relative;

  overflow: hidden;

  display: inline-flex;
  align-items: center;

  gap: 10px;

  margin-top:
    28px;

  padding:
    12px 20px;

  cursor: pointer;

  color: white;

  border:
    1px solid
    rgba(255,255,255,.20);

  border-radius:
    100px;

  background:
    rgba(0,0,0,.28);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  transition:
    background .3s,
    transform .3s,
    border-color .3s;
}


.video-audio-button:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(240,215,149,.45);

  background:
    rgba(123,14,18,.70);
}


.video-audio-button::after {
  content: "";

  position: absolute;

  top: -100%;
  left: -60%;

  width: 30%;
  height: 300%;

  transform:
    rotate(25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.35),
      transparent
    );

  animation:
    videoButtonShine 4s infinite;
}


@keyframes videoButtonShine {

  60%,
  100% {
    left: 150%;
  }

}


/* indicador hacia abajo */

.video-scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 8px;

  margin-top:
    40px;

  color:
    rgba(255,255,255,.55);

  font-size:
    8px;

  letter-spacing:
    2px;

  text-transform:
    uppercase;
}


.video-scroll-indicator b {
  color:
    var(--gold-2);

  font-size:
    20px;

  animation:
    videoScrollArrow 1.5s
    ease-in-out infinite;
}


@keyframes videoScrollArrow {

  50% {
    transform:
      translateY(7px);
  }

}


/* destello ambiental sobre el video */

.video-hero-section::after {
  content: "";

  position: absolute;

  z-index: 3;

  width: 700px;
  height: 700px;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  pointer-events: none;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(240,215,149,.08),
      transparent 68%
    );

  animation:
    videoAmbientGlow 6s
    ease-in-out infinite;
}


@keyframes videoAmbientGlow {

  50% {
    transform:
      translate(-50%, -50%)
      scale(1.2);

    opacity: .5;
  }

}


/* móvil */

@media (max-width: 600px) {

  .video-hero-section {
    min-height:
      92svh;
  }


  .video-background {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }


  .video-background-content {
    padding:
      100px 15px
      80px;
  }


  .video-background-title {
    font-size:
      clamp(
        43px,
        13vw,
        63px
      );
  }


  .video-background-message {
    padding:
      17px;

    align-items:
      flex-start;
  }


  .video-background-message p {
    font-size:
      13px;
  }

}

/* =========================================================
   V36
   PALETA AZUL + DORADO
   DISEÑO MÁS COMPACTO
========================================================= */

:root {

  --blue-main: #1c1e40;
  --blue-dark: #101225;
  --blue-light: #292d5e;

  --gold-main: #f9b233;
  --gold-light: #ffd275;
  --gold-soft: #f8cf83;

  --cream-main: #fffaf1;
  --cream-secondary: #f7f0e4;

  --text-dark: #25263c;


  /* compatibilidad con variables anteriores */

  --green-1: #1c1e40;
  --green-2: #24274f;
  --green-3: #101225;

  --red-1: #f9b233;
  --red-2: #d99518;

  --gold-1: #f9b233;
  --gold-2: #ffd275;
  --gold-3: #fff0bb;

  --cream-1: #fffaf1;
  --cream-2: #f7f0e4;

}


/* =========================================================
   REDUCIR ESPACIOS GENERALES
========================================================= */

.section {
  padding:
    68px 20px;
}


.section-inner {
  width:
    min(1080px, 100%);
}


.section-inner.narrow {
  width:
    min(780px, 100%);
}


.section h2 {
  margin-bottom:
    12px;
}


.section-eyebrow {
  margin-bottom:
    9px;
}


.gold-divider {
  margin:
    15px auto 22px;
}


/* =========================================================
   NAV
========================================================= */

.nav-flotante {

  min-height:
    62px;

  background:
    rgba(28,30,64,.82);

  border-bottom:
    1px solid
    rgba(249,178,51,.14);

}


.nav-flotante.scrolled {

  min-height:
    54px;

  background:
    rgba(28,30,64,.97);

  box-shadow:
    0 10px 35px
    rgba(6,7,20,.22);

}


.nav-logo {

  color:
    #f9b233;

  border-color:
    rgba(249,178,51,.45);

}


.nav-links a::after {

  background:
    #f9b233;

}


/* =========================================================
   HERO AZUL
========================================================= */

.hero {

  background:

    radial-gradient(
      circle at 50% 30%,
      rgba(249,178,51,.16),
      transparent 29%
    ),

    radial-gradient(
      circle at 10% 75%,
      rgba(249,178,51,.07),
      transparent 27%
    ),

    linear-gradient(
      180deg,
      #24274f 0%,
      #1c1e40 48%,
      #101225 100%
    );

}


.hero-aurora-1 {

  background:
    rgba(249,178,51,.11);

}


.hero-aurora-2 {

  background:
    rgba(64,73,158,.18);

}


.hero-school,
.hero-year,
.hero-divider,
.hero-family strong {

  color:
    #f9b233;

}


.hero-title span {

  background:

    linear-gradient(
      90deg,
      #e29a16,
      #ffd977,
      #f9b233,
      #fff0ad,
      #e29a16
    );

  background-size:
    300% auto;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

}


/* botón principal */

.hero-button {

  color:
    #1c1e40;

  font-weight:
    700;

  background:

    linear-gradient(
      135deg,
      #ffd16c,
      #f9b233
    );

  border:
    1px solid
    rgba(255,221,144,.5);

  box-shadow:
    0 15px 40px
    rgba(249,178,51,.16);

}


.hero-button:hover {

  box-shadow:
    0 20px 55px
    rgba(249,178,51,.25);

}


/* =========================================================
   BIENVENIDA MÁS COMPACTA
========================================================= */

.bienvenida {

  padding-top:
    58px;

  padding-bottom:
    58px;

  background:

    linear-gradient(
      180deg,
      #fffaf1,
      #f7f0e4
    );

}


.message-card {

  margin-top:
    28px;

  padding:
    20px 23px;

  border-color:
    rgba(249,178,51,.28);

}


.message-star {

  color:
    #f9b233;

}


/* =========================================================
   VIDEO COMO FONDO
   REDUCIR ALTURA VACÍA
========================================================= */

.video-hero-section {

  min-height:
    72svh;

  color:
    white;

  background:
    #101225;

}


.video-background {

  filter:

    saturate(.95)
    contrast(1.05)
    brightness(.67);

}


.video-background-overlay {

  background:

    linear-gradient(
      180deg,
      rgba(16,18,37,.76) 0%,
      rgba(28,30,64,.30) 30%,
      rgba(28,30,64,.25) 55%,
      rgba(16,18,37,.78) 100%
    );

}


.video-background-content {

  padding:
    80px 20px 65px;

}


.video-background-title {

  color:
    white;

  font-size:
    clamp(
      42px,
      6vw,
      75px
    );

}


.video-background-divider {

  margin:
    17px auto;

  color:
    #f9b233;

}


.video-background-divider i {

  background:

    linear-gradient(
      to right,
      transparent,
      #f9b233
    );

}


.video-background-divider i:last-child {

  background:

    linear-gradient(
      to left,
      transparent,
      #f9b233
    );

}


.video-background-message {

  margin-top:
    24px;

  padding:
    17px 21px;

  background:
    rgba(28,30,64,.40);

  border-color:
    rgba(249,178,51,.22);

}


.video-background-message span {

  color:
    #f9b233;

}


.video-audio-button {

  margin-top:
    20px;

  border-color:
    rgba(249,178,51,.30);

  background:
    rgba(28,30,64,.55);

}


.video-audio-button:hover {

  color:
    #1c1e40;

  background:
    #f9b233;

}


.video-scroll-indicator {

  margin-top:
    25px;

}


.video-scroll-indicator b {

  color:
    #f9b233;

}


/* =========================================================
   GALERÍA INMEDIATAMENTE DESPUÉS DEL VIDEO
========================================================= */

.gallery-section {

  padding-top:
    58px;

  padding-bottom:
    60px;

  background:

    linear-gradient(
      180deg,
      #fffaf1,
      #f5eddf
    );

}


.gallery-section .section-eyebrow {

  color:
    #ad7713;

}


.gallery-carousel {

  height:
    440px;

  margin-top:
    25px;

}


.gallery-slide {

  height:
    340px;

  border:
    1px solid
    rgba(249,178,51,.20);

}


.gallery-slide.active {

  box-shadow:

    0 35px 90px
    rgba(28,30,64,.22),

    0 0 45px
    rgba(249,178,51,.12);

}


.gallery-slide.prev,
.gallery-slide.next {

  filter:

    brightness(.72)
    saturate(.88);

}


.gallery-arrow {

  color:
    #f9b233;

  background:
    rgba(28,30,64,.88);

  border-color:
    rgba(249,178,51,.26);

}


.gallery-arrow:hover {

  color:
    #1c1e40;

  background:
    #f9b233;

}


.gallery-dot {

  background:
    rgba(28,30,64,.22);

}


.gallery-dot.active {

  background:

    linear-gradient(
      90deg,
      #1c1e40,
      #f9b233
    );

}


.gallery-caption {

  margin-top:
    10px;

  color:
    #6a6b80;

}


/* =========================================================
   DETALLES
========================================================= */

.details-section {

  padding-top:
    58px;

  padding-bottom:
    58px;

  background:

    linear-gradient(
      180deg,
      #f7f0e4,
      #fffaf1
    );

}


.details-grid,
.info-grid {

  margin-top:
    28px;

  gap:
    15px;

}


.detail-card,
.info-card {

  min-height:
    165px;

  padding:
    24px 20px;

  border-color:
    rgba(28,30,64,.12);

  box-shadow:
    0 12px 35px
    rgba(28,30,64,.06);

}


.detail-number,
.info-icon {

  width:
    42px;

  height:
    42px;

  margin-bottom:
    11px;

  color:
    #1c1e40;

  background:

    linear-gradient(
      135deg,
      #ffd46e,
      #f9b233
    );

  box-shadow:
    0 8px 22px
    rgba(249,178,51,.16);

}


.detail-label,
.info-label {

  color:
    #a36c0a;

}


.detail-value,
.info-value {

  color:
    #1c1e40;

}


/* =========================================================
   COUNTDOWN AZUL
========================================================= */

.countdown-section {

  min-height:
    auto;

  padding-top:
    65px;

  padding-bottom:
    65px;

  background:

    radial-gradient(
      circle at 50% -10%,
      #343969,
      #1c1e40 55%,
      #101225 100%
    );

}


.countdown-section::before {

  background:

    radial-gradient(
      circle,
      rgba(249,178,51,.15),
      transparent 68%
    );

}


.countdown-subtitle,
.countdown-frase {

  margin-bottom:
    27px;

}


.countdown-grid,
.countdown {

  margin-top:
    27px;

  gap:
    11px;

}


.countdown-card,
.count-box {

  min-height:
    120px;

  padding:
    18px 9px;

  border-color:
    rgba(249,178,51,.20);

  background:
    rgba(255,255,255,.05);

}


.countdown-card strong,
.count-box strong {

  color:
    #f9b233;

}


.countdown-card span,
.count-box span {

  color:
    rgba(255,255,255,.68);

}


/* =========================================================
   PROGRAMA
========================================================= */

.program-section {

  padding-top:
    58px;

  padding-bottom:
    58px;

  background:
    #fffaf1;

}


.timeline-shell {

  margin-top:
    28px;

}


.timeline-item {

  margin-bottom:
    9px;

  padding:
    12px 15px;

  border-color:
    rgba(28,30,64,.10);

}


.timeline-time {

  color:
    #1c1e40;

  background:

    linear-gradient(
      135deg,
      #ffd36c,
      #f9b233
    );

  font-weight:
    700;

}


.timeline-dot {

  background:
    #f9b233;

}


.program-message {

  margin-top:
    25px;

  padding:
    19px;

  border-color:
    rgba(249,178,51,.25);

}


/* =========================================================
   ACCESOS AZUL
========================================================= */

.access-section {

  padding-top:
    65px;

  padding-bottom:
    65px;

  background:

    radial-gradient(
      circle at top,
      #303464,
      #1c1e40 55%,
      #101225
    );

}


.aurora-a {

  background:
    #f9b233;

}


.aurora-b {

  background:
    #5360c5;

}


.access-description {

  margin-bottom:
    30px;

}


.ticket-grid {

  gap:
    20px;

}


.ticket {

  border-color:
    rgba(249,178,51,.38);

}


.ticket-top {

  background:

    linear-gradient(
      135deg,
      #272b59,
      #1c1e40
    );

  border-bottom:
    3px solid
    #f9b233;

}


.ticket-title {

  color:
    rgba(255,255,255,.70);

}


.ticket-family {

  color:
    white;

}


.seccion-horario {

  color:
    #f9b233;

}


.qr-seccion {

  border-color:
    rgba(249,178,51,.35);

}


.access-notice {

  margin-top:
    25px;

  border-color:
    rgba(249,178,51,.22);

}


.notice-icon,
.access-notice strong {

  color:
    #f9b233;

  border-color:
    #f9b233;

}


/* =========================================================
   FINAL
========================================================= */

.final-section {

  padding-top:
    60px;

  padding-bottom:
    55px;

  background:

    linear-gradient(
      180deg,
      #fffaf1,
      #f6ecdb
    );

}


.final-star,
.final-signature {

  color:
    #c8840c;

}


/* =========================================================
   FOOTER AZUL
========================================================= */

footer {

  padding:
    55px 25px 25px;

  background:

    radial-gradient(
      circle at top,
      #2b3061,
      #1c1e40 60%,
      #101225
    );

}


.footer-stars {

  color:
    #f9b233;

}


.footer-trees i,
.tree-line i {

  border-bottom-color:
    #272b59;

}


.footer-trees .big,
.tree-line .tree-big {

  border-bottom-color:
    #f9b233;

}


/* =========================================================
   PARTÍCULAS
========================================================= */

.particle.gold {

  background:
    #f9b233;

  box-shadow:
    0 0 8px
    rgba(249,178,51,.60);

}


.particle.white {

  background:
    rgba(255,255,255,.9);

}


/* =========================================================
   MOBILE MÁS COMPACTO
========================================================= */

@media (
  max-width: 600px
) {

  .section {

    padding:
      52px 14px;

  }


  .bienvenida,
  .gallery-section,
  .details-section,
  .program-section,
  .final-section {

    padding-top:
      48px;

    padding-bottom:
      48px;

  }


  .video-hero-section {

    min-height:
      70svh;

  }


  .video-background-content {

    padding:
      75px 14px 55px;

  }


  .gallery-carousel {

    height:
      365px;

    margin-top:
      18px;

  }


  .gallery-slide {

    width:
      80vw;

    height:
      285px;

  }


  .detail-card,
  .info-card {

    min-height:
      145px;

  }


  .countdown-section {

    padding:
      52px 14px;

  }


  .countdown-card,
  .count-box {

    min-height:
      105px;

  }


  .countdown-card strong,
  .count-box strong {

    font-size:
      36px;

  }


  .access-section {

    padding:
      55px 14px;

  }

}

/* =========================================================
   CONSULTA ALGEBRAIX
========================================================= */

.consulta-accesos {

  width:
    min(720px, 100%);

  margin:
    35px auto 0;

  padding:
    28px;

  position:
    relative;

  overflow:
    hidden;

  text-align:
    center;

  border:
    1px solid
    rgba(249,178,51,.28);

  border-radius:
    20px;

  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.04)
    );

  backdrop-filter:
    blur(15px);

  box-shadow:

    0 25px 70px
    rgba(0,0,0,.18);

}


.consulta-accesos::before {

  content: "";

  position:
    absolute;

  width:
    220px;

  height:
    220px;

  top:
    -130px;

  right:
    -80px;

  border-radius:
    50%;

  background:
    rgba(249,178,51,.09);

}


.consulta-icono {

  width:
    auto;

  height:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0 auto 14px;

  border-radius:
    0;

  color:
    inherit;

  background:
    transparent;

  font-size:
    22px;

  box-shadow:
    none;

}


.consulta-texto h3 {

  margin:
    0 0 6px;

  color:
    white;

  font-size:
    24px;

}


.consulta-texto p {

  margin:
    0;

  color:
    rgba(255,255,255,.65);

  font-size:
    13px;

}


.consulta-form {

  display:
    grid;

  grid-template-columns:
    1fr auto;

  gap:
    10px;

  margin-top:
    22px;

}


.consulta-form input {

  width:
    100%;

  min-height:
    50px;

  padding:
    0 16px;

  color:
    white;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius:
    12px;

  outline:
    none;

  background:
    rgba(10,12,30,.28);

  font-size:
    15px;

  text-transform:
    uppercase;

}


.consulta-form input::placeholder {

  color:
    rgba(255,255,255,.40);

}


.consulta-form input:focus {

  border-color:
    #f9b233;

  box-shadow:

    0 0 0 3px
    rgba(249,178,51,.10);

}


.consulta-button {

  min-height:
    50px;

  padding:
    0 20px;

  border:
    0;

  border-radius:
    12px;

  color:
    #1c1e40;

  background:

    linear-gradient(
      135deg,
      #ffd36c,
      #f9b233
    );

  font-weight:
    700;

  cursor:
    pointer;

}


.consulta-button:disabled {

  opacity:
    .55;

  cursor:
    not-allowed;

}


.mensaje-consulta {

  min-height:
    20px;

  margin-top:
    14px;

  font-size:
    13px;

}


.mensaje-consulta.error {

  color:
    #ffd4d4;

}


.mensaje-consulta.ok {

  color:
    #d5ffe8;

}


.mensaje-consulta.info {

  color:
    #f9d98e;

}


/* =========================================================
   RESULTADO FAMILIA
========================================================= */

.resultado-accesos {

  margin-top:
    35px;

}


.familia-resultado {

  text-align:
    center;

  margin-bottom:
    20px;

}


.familia-resultado span {

  display:
    block;

  color:
    rgba(255,255,255,.56);

  font-size:
    11px;

  letter-spacing:
    1px;

  text-transform:
    uppercase;

}


.familia-resultado h3 {

  margin:
    7px 0 0;

  color:
    #f9b233;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      27px,
      4vw,
      42px
    );

}


.alumnos-familia {

  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-bottom:
    27px;

}


.alumno-chip {

  padding:
    7px 11px;

  border:
    1px solid
    rgba(249,178,51,.18);

  border-radius:
    30px;

  color:
    rgba(255,255,255,.75);

  background:
    rgba(255,255,255,.06);

  font-size:
    11px;

}


/* =========================================================
   TICKETS DINÁMICOS
========================================================= */

.ticket-programa {

  overflow:
    hidden;

  border:
    1px solid
    rgba(249,178,51,.35);

  border-radius:
    18px;

  background:
    white;

  box-shadow:

    0 25px 65px
    rgba(0,0,0,.18);

}


.ticket-programa-top {

  padding:
    20px;

  color:
    white;

  background:

    linear-gradient(
      135deg,
      #292d5e,
      #1c1e40
    );

  border-bottom:
    3px solid
    #f9b233;

}


.ticket-programa-top small {

  display:
    block;

  margin-bottom:
    6px;

  color:
    rgba(255,255,255,.55);

  font-size:
    10px;

  letter-spacing:
    1px;

  text-transform:
    uppercase;

}


.ticket-programa-top h3 {

  margin:
    0;

  font-size:
    22px;

}


.ticket-programa-datos {

  display:
    flex;

  gap:
    10px;

  flex-wrap:
    wrap;

  margin-top:
    12px;

}


.ticket-programa-dato {

  padding:
    6px 9px;

  border-radius:
    20px;

  color:
    #1c1e40;

  background:
    #f9b233;

  font-size:
    11px;

  font-weight:
    700;

}


.ticket-programa-body {

  padding:
    22px;

  color:
    #1c1e40;

  text-align:
    center;

}


.ticket-alumnos {

  margin-bottom:
    15px;

}


.ticket-alumnos strong {

  display:
    block;

  margin-bottom:
    7px;

  color:
    #1c1e40;

  font-size:
    11px;

  text-transform:
    uppercase;

}


.ticket-alumnos span {

  display:
    block;

  margin:
    3px 0;

  color:
    #686b7d;

  font-size:
    12px;

}


.ticket-qr {

  width:
    fit-content;

  margin:
    16px auto;

  padding:
    12px;

  border:
    1px solid
    rgba(28,30,64,.12);

  border-radius:
    14px;

  background:
    white;

}


.ticket-acompanantes {

  margin-top:
    10px;

  color:
    #686b7d;

  font-size:
    12px;

}


.ticket-acompanantes strong {

  color:
    #1c1e40;

}


.acciones-consulta {

  margin-top:
    25px;

  text-align:
    center;

}


.cambiar-usuario {

  padding:
    10px 16px;

  color:
    rgba(255,255,255,.75);

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.05);

  cursor:
    pointer;

}


.cambiar-usuario:hover {

  border-color:
    rgba(249,178,51,.35);

  color:
    white;

}


.oculto {

  display:
    none !important;

}


@media (
  max-width: 600px
) {

  .consulta-accesos {

    padding:
      22px 15px;

  }


  .consulta-form {

    grid-template-columns:
      1fr;

  }


  .consulta-button {

    width:
      100%;

  }

}

/* =========================================================
   FIX V42
   VISIBILIDAD Y ELIMINACIÓN DE BLUR
========================================================= */

body.loaded .hero-enter {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}


/* =========================================================
   SECCIONES
========================================================= */

.animated-section.in-view,
.animated-section.visible {

  opacity: 1 !important;

  visibility: visible !important;

  filter: none !important;

}


/* =========================================================
   REVEAL
========================================================= */

.reveal-item,
.reveal-card {

  transition:
    opacity .8s ease,
    transform .8s ease;

}


.animated-section.in-view .reveal-item,
.reveal-group.in-view .reveal-item,
.reveal-item.visible,
.reveal-card.in-view,
.reveal-card.visible {

  opacity: 1 !important;

  visibility: visible !important;

  transform: translateY(0) scale(1) !important;

  filter: none !important;

}


/* =========================================================
   CONSULTA ALGEBRAIX
========================================================= */

.consulta-accesos {

  opacity: 1 !important;

  visibility: visible !important;

  transform: none !important;

  filter: none !important;

}


.consulta-accesos *,
.resultado-accesos *,
.ticket-programa * {

  filter: none !important;

}


.consulta-form,
.consulta-form input,
.consulta-form button,
.consulta-texto,
.consulta-icono {

  opacity: 1 !important;

  visibility: visible !important;

  filter: none !important;

  transform: none !important;

}


/* =========================================================
   RESULTADOS
========================================================= */

.resultado-accesos:not(.oculto) {

  opacity: 1 !important;

  visibility: visible !important;

  filter: none !important;

  transform: none !important;

}


/* =========================================================
   GALERÍA
========================================================= */

.gallery-section,
.gallery-carousel,
.gallery-track,
.gallery-slide {

  filter: none !important;

}


.gallery-section.in-view {

  opacity: 1 !important;

  visibility: visible !important;

}

/* =========================================================
   GALERÍA V42
========================================================= */

.gallery-carousel {

  position:
    relative;

  width:
    100%;

  height:
    420px;

  margin:
    25px auto 0;

  perspective:
    1200px;

  overflow:
    hidden;

}


.gallery-track {

  position:
    relative;

  width:
    100%;

  height:
    100%;

}


.gallery-slide {

  position:
    absolute;

  width:
    min(
      520px,
      68vw
    );

  height:
    340px;

  left:
    50%;

  top:
    50%;

  overflow:
    hidden;

  border-radius:
    18px;

  opacity:
    0;

  visibility:
    hidden;

  transform:

    translate(
      -50%,
      -50%
    )

    scale(
      .75
    );

  transition:

    transform .65s
      cubic-bezier(
        .2,
        .8,
        .2,
        1
      ),

    opacity .5s ease,

    filter .5s ease;

  box-shadow:

    0 25px 65px
    rgba(
      28,
      30,
      64,
      .18
    );

}


.gallery-slide img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

}


.gallery-slide.active {

  z-index:
    5;

  opacity:
    1;

  visibility:
    visible;

  transform:

    translate(
      -50%,
      -50%
    )

    scale(
      1
    );

}


.gallery-slide.prev {

  z-index:
    3;

  opacity:
    .65;

  visibility:
    visible;

  transform:

    translate(
      -105%,
      -50%
    )

    rotateY(
      18deg
    )

    scale(
      .82
    );

}


.gallery-slide.next {

  z-index:
    3;

  opacity:
    .65;

  visibility:
    visible;

  transform:

    translate(
      5%,
      -50%
    )

    rotateY(
      -18deg
    )

    scale(
      .82
    );

}


.gallery-slide.far-prev {

  z-index:
    1;

  opacity:
    .22;

  visibility:
    visible;

  transform:

    translate(
      -145%,
      -50%
    )

    scale(
      .68
    );

}


.gallery-slide.far-next {

  z-index:
    1;

  opacity:
    .22;

  visibility:
    visible;

  transform:

    translate(
      45%,
      -50%
    )

    scale(
      .68
    );

}


.gallery-arrow {

  position:
    absolute;

  z-index:
    20;

  top:
    50%;

  width:
    46px;

  height:
    46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  transform:
    translateY(
      -50%
    );

  border:
    1px solid
    rgba(
      249,
      178,
      51,
      .30
    );

  border-radius:
    50%;

  color:
    #f9b233;

  background:
    rgba(
      28,
      30,
      64,
      .90
    );

  font-size:
    30px;

  cursor:
    pointer;

}


.gallery-arrow-left {

  left:
    15px;

}


.gallery-arrow-right {

  right:
    15px;

}


.gallery-dots {

  display:
    flex;

  justify-content:
    center;

  gap:
    7px;

  margin-top:
    10px;

}


.gallery-dot {

  width:
    8px;

  height:
    8px;

  padding:
    0;

  border:
    0;

  border-radius:
    10px;

  background:
    rgba(
      28,
      30,
      64,
      .23
    );

  cursor:
    pointer;

  transition:
    .3s;

}


.gallery-dot.active {

  width:
    25px;

  background:
    #f9b233;

}


@media (
  max-width: 600px
) {

  .gallery-carousel {

    height:
      340px;

  }


  .gallery-slide {

    width:
      76vw;

    height:
      275px;

  }


  .gallery-slide.prev {

    transform:

      translate(
        -112%,
        -50%
      )

      scale(
        .76
      );

  }


  .gallery-slide.next {

    transform:

      translate(
        12%,
        -50%
      )

      scale(
        .76
      );

  }

}
/* =========================================================
   V45 - PIEZAS OFICIALES
   SOLO IMAGENES
========================================================= */

.official-visual-section {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  padding: 28px 18px;
  /* Identico degradado de .access-section (consulta de codigos). */
  background: radial-gradient(circle at top, #303464, #1c1e40 55%, #101225);
}

.official-visual-container {
  position: relative;
  z-index: 2;
  width: min(1100px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 auto;
}

.official-visual-item {
  width: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
}

.official-visual-item:nth-child(2) {
  transition-delay: .12s;
}

.official-visual-section.in-view .official-visual-item,
.official-visual-section.visible .official-visual-item {
  opacity: 1;
  transform: translateY(0);
}

.official-visual-image {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 24px 65px rgba(28,30,64,.14);
  filter: none !important;
  transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s ease;
}

@media (hover:hover) {
  .official-visual-item:hover .official-visual-image {
    transform: translateY(-3px) scale(1.002);
    box-shadow: 0 32px 80px rgba(28,30,64,.18);
  }
}

@media (max-width: 850px) {
  .official-visual-section {
    padding: 20px 12px;
  }

  .official-visual-container {
    gap: 8px;
  }

  .official-visual-image {
    border-radius: 14px;
  }
}

@media (max-width: 600px) {
  .official-visual-section {
    padding: 10px 6px;
  }

  .official-visual-container {
    gap: 6px;
  }

  .official-visual-image {
    border-radius: 10px;
    box-shadow: 0 14px 35px rgba(28,30,64,.14);
  }
}

/* =========================================================
   V45 - ANCLAS CON NAV FIJO
========================================================= */

#accesos,
#invitacion-oficial,
#programa,
#galeria,
#video {
  scroll-margin-top: 78px;
}

/* =========================================================
   CONTROL DE MUSICA
========================================================= */

.music-control {

  position:
    fixed;

  right:
    22px;

  bottom:
    22px;

  z-index:
    99999;

  width:
    50px;

  height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  cursor:
    pointer;

  color:
    #f9b233;

  border:
    1px solid
    rgba(
      249,
      178,
      51,
      .45
    );

  border-radius:
    50%;

  background:
    rgba(
      28,
      30,
      64,
      .92
    );

  box-shadow:
    0 12px 35px
    rgba(
      0,
      0,
      0,
      .22
    );

  backdrop-filter:
    blur(
      10px
    );

  font-size:
    20px;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background .3s ease;

}


.music-control:hover {

  transform:
    scale(
      1.08
    );

}


.music-control.playing {

  animation:
    musicPulse
    2s
    ease-in-out
    infinite;

}


@keyframes musicPulse {

  50% {

    box-shadow:

      0 0 0 8px
      rgba(
        249,
        178,
        51,
        0
      ),

      0 12px 35px
      rgba(
        0,
        0,
        0,
        .25
      );

  }

}


@media (
  max-width: 600px
) {

  .music-control {

    right:
      14px;

    bottom:
      14px;

    width:
      45px;

    height:
      45px;

  }

}

/* Festival 2026 - approved English visual corrections */
.nav-logo { display: inline-flex; align-items: center; justify-content: center; }
.brand-logo { width: 46px; height: 46px; object-fit: contain; display: block; }
.hero-school { max-width: 95vw; text-align: center; }
.hero-title { max-width: min(960px, 94vw); line-height: 1.08; }
.hero-title span { display: block; }
.hero-family span { display: block; }
.hero-family strong { font-size: clamp(1.4rem, 4vw, 2.8rem); }
.tree-line, .footer-trees { display:none !important; }
.torch-symbol { width: 58px; height: 80px; object-fit: contain; display: block; margin: auto; }
.footer-bethlehem-star { font-size: 5rem; color: #f9b233; text-align: center; filter: drop-shadow(0 0 22px #f9b233); margin: 15px auto 0; }
@media(max-width:600px){ .brand-logo { width: 37px; height:37px; } .hero-title { font-size: clamp(2.4rem, 9vw, 4.2rem); } }