/* ============================================================
   CUMPLEAÑOS NEON — styles.css
   Paleta: Navy oscuro · Neón amarillo · Cian · Rosa · Morado
   Estilo: Dark neon party, brillante, festivo, elegante
   ============================================================ */

/* === VARIABLES ============================================= */
:root {
  --navy:         #080C1E;
  --navy-mid:     #0C1230;
  --navy-light:   #101840;
  --neon-yellow:  #FFD700;
  --neon-cyan:    #00E5FF;
  --neon-pink:    #FF2D78;
  --neon-purple:  #B84FFF;
  --neon-green:   #39FF14;
  --neon-orange:  #FF6B35;
  --white:        #FFFFFF;
  --text-on-dark: #C8D8FF;
  --text-dim:     #6878A8;
  --glow-yellow:  rgba(255,215,0,.5);
  --glow-cyan:    rgba(0,229,255,.5);
  --glow-pink:    rgba(255,45,120,.5);
  --glow-purple:  rgba(184,79,255,.5);
  --glow-green:   rgba(57,255,20,.5);
  --circ:         314.159;
}

/* === NEON TEXT EFFECTS ===================================== */
.neon-yellow {
  color: var(--neon-yellow) !important;
  text-shadow:
    0 0 6px var(--neon-yellow),
    0 0 14px var(--neon-yellow),
    0 0 30px rgba(255,215,0,.6);
}
.neon-cyan {
  color: var(--neon-cyan) !important;
  text-shadow:
    0 0 6px var(--neon-cyan),
    0 0 14px var(--neon-cyan),
    0 0 30px rgba(0,229,255,.6);
}
.neon-pink {
  color: var(--neon-pink) !important;
  text-shadow:
    0 0 6px var(--neon-pink),
    0 0 14px var(--neon-pink),
    0 0 30px rgba(255,45,120,.6);
}
.neon-purple {
  color: var(--neon-purple) !important;
  text-shadow:
    0 0 6px var(--neon-purple),
    0 0 14px var(--neon-purple),
    0 0 30px rgba(184,79,255,.6);
}

/* === NEON FLICKER ANIMATION ================================ */
@keyframes neonFlicker {
  0%,19%,21%,23%,25%,54%,56%,100% { opacity:1; }
  20%,24%,55% { opacity:.45; }
}

/* === STRING LIGHTS ========================================= */
.string-lights {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 0 .5rem;
  pointer-events: none;
}
.light-bulb {
  width: 12px; height: 14px;
  border-radius: 50% 50% 40% 40%;
  background: var(--lc, #FFD700);
  box-shadow: 0 0 8px 3px var(--lc, #FFD700), 0 0 20px var(--lc, #FFD700);
  position: relative;
  animation: lightBlink var(--ld, 2s) var(--del, 0s) ease-in-out infinite alternate;
  flex-shrink: 0;
}
.light-bulb::before {
  content: '';
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 18px;
  background: rgba(255,255,255,.25);
}
@keyframes lightBlink {
  0%   { opacity: 1; }
  100% { opacity: .3; }
}

/* === CONFETTI ============================================== */
.confetti-piece {
  position: absolute;
  width: var(--cw, 8px);
  height: var(--ch, 8px);
  background: var(--cc, #FFD700);
  left: var(--cx, 50%);
  top: var(--cy, -10px);
  border-radius: var(--cr, 0);
  animation: confettiFall var(--cd, 3s) var(--del, 0s) linear infinite;
  pointer-events: none;
}
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(var(--crot, 360deg)); opacity: 0; }
}

/* === BALLOONS ============================================== */
.balloons-bl, .balloons-br {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  pointer-events: none;
  z-index: 1;
}
.balloons-bl { left: 1rem; }
.balloons-br { right: 1rem; }

.balloon {
  width: 54px;
  height: var(--bh, 100px);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), var(--bc, #B84FFF));
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
  display: block;
  animation: balloonSway var(--bsw, 3s) var(--del, 0s) ease-in-out infinite alternate;
  filter: drop-shadow(0 0 8px var(--bc, #B84FFF));
}
.balloon::after {
  content: '';
  position: absolute;
  bottom: -28px; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 28px;
  background: rgba(255,255,255,.3);
}
@keyframes balloonSway {
  0%   { transform: rotate(-6deg) translateY(0); }
  100% { transform: rotate(6deg)  translateY(-8px); }
}

/* === FIREWORK / PETAL BURST ================================ */
.firework {
  position: fixed;
  z-index: 9998;
  font-size: var(--fs, 16px);
  pointer-events: none;
  animation: fireworkFly var(--fd, 1s) var(--del, 0s) ease-out forwards;
}
@keyframes fireworkFly {
  0%   { transform:translate(0,0) rotate(0deg) scale(1); opacity:1; }
  100% { transform:translate(var(--dx,0px),var(--dy,-80px)) rotate(var(--rot,180deg)) scale(.2); opacity:0; }
}

/* === SCROLL ANIMATIONS ===================================== */
.reveal       { opacity:0; transform:translateY(40px); transition:opacity .9s ease,transform .9s ease; transition-delay:var(--delay,0s); }
.reveal-left  { opacity:0; transform:translateX(-44px); transition:opacity .9s ease,transform .9s ease; }
.reveal-right { opacity:0; transform:translateX(44px);  transition:opacity .9s ease,transform .9s ease; }
.revealed     { opacity:1!important; transform:translate(0)!important; }

/* === RESET & BASE ========================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Nunito',sans-serif; font-weight:300; background:var(--navy); color:var(--text-on-dark); overflow-x:hidden; }
.body--locked { overflow:hidden; }
h1,h2,h3,h4 { font-family:'Dancing Script',cursive; margin:0; }
p { margin:0; }
img { max-width:100%; display:block; }

/* ============================================================
   INTRO SCREEN — Zoom-out reveal
   ============================================================ */
.intro-screen {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 171, 214, .18), transparent 24%),
    radial-gradient(circle at 78% 18%, rgba(125, 231, 255, .14), transparent 18%),
    radial-gradient(circle at 50% 82%, rgba(255, 216, 111, .12), transparent 22%),
    linear-gradient(145deg, #120922 0%, #23103b 38%, #3d1b52 68%, #13091f 100%);
  display: flex; align-items: center; justify-content: center;
  transition: transform .85s cubic-bezier(.4,0,.2,1), opacity .85s ease;
  will-change: transform, opacity;
  overflow: hidden;
}
.intro-screen.is-closing {
  transform: scale(1.5);
  opacity: 0;
  pointer-events: none;
}

.confetti-wrap, .intro-stars {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}

.intro-screen::before,
.intro-screen::after,
.hero-section::before,
.hero-section::after,
.banner-neon::before,
.banner-neon::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.intro-screen::before {
  width: 42vw;
  height: 42vw;
  min-width: 260px;
  min-height: 260px;
  left: -10vw;
  top: 8vh;
  background: radial-gradient(circle, rgba(255, 119, 183, .18), rgba(255, 119, 183, 0) 68%);
  filter: blur(18px);
  opacity: .95;
  animation: neonBloomFloat 12s ease-in-out infinite;
}

.intro-screen::after {
  width: 38vw;
  height: 38vw;
  min-width: 240px;
  min-height: 240px;
  right: -8vw;
  bottom: 10vh;
  background: radial-gradient(circle, rgba(125, 231, 255, .16), rgba(125, 231, 255, 0) 70%);
  filter: blur(20px);
  animation: neonBloomFloat 14s ease-in-out infinite reverse;
}

.intro-body {
  position: relative; z-index: 5;
  text-align: center; padding: 2rem 1.5rem;
  max-width: 480px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(12, 10, 32, .68), rgba(20, 14, 44, .42));
  box-shadow: 0 24px 80px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
}

.cake-wrap { position: relative; display: inline-block; margin-bottom: .75rem; }
.cake-icon {
  font-size: clamp(3rem, 9vw, 5rem);
  color: var(--neon-yellow);
  text-shadow:
    0 0 10px var(--neon-yellow),
    0 0 30px var(--neon-yellow),
    0 0 60px rgba(255,215,0,.5);
  animation: neonFlicker 4s ease-in-out infinite;
}
.cake-glow {
  position: absolute; inset: -8px;
  background: radial-gradient(circle, rgba(255,215,0,.2), transparent 70%);
  border-radius: 50%; pointer-events: none;
}

.intro-invited {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(.65rem, 2vw, .8rem);
  letter-spacing: 5px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: .25rem;
}

/* "Cumpleaños" texto principal */
.intro-party {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(2.8rem, 11vw, 5rem);
  font-weight: 700;
  color: var(--neon-yellow);
  text-shadow:
    0 0 8px var(--neon-yellow),
    0 0 20px var(--neon-yellow),
    0 0 50px rgba(255,215,0,.5);
  line-height: 1; margin-bottom: .1rem;
  animation: neonFlicker 6s ease-in-out infinite 1s;
}

/* Nombre */
.intro-name {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(3rem, 13vw, 6rem);
  font-weight: 400; line-height: 1;
  color: var(--neon-cyan);
  text-shadow:
    0 0 8px var(--neon-cyan),
    0 0 20px var(--neon-cyan),
    0 0 50px rgba(0,229,255,.5);
  margin-bottom: 1.25rem;
  animation: neonFlicker 5s ease-in-out infinite .5s;
}

/* Caja de fecha estilo neón */
.intro-date-box {
  display: inline-flex; align-items: center; gap: 1rem;
  border: 2px solid var(--neon-cyan);
  border-radius: 10px;
  padding: .75rem 1.5rem;
  box-shadow:
    0 0 8px var(--neon-cyan),
    0 0 20px rgba(0,229,255,.25),
    inset 0 0 8px rgba(0,229,255,.08);
  margin-bottom: .9rem;
  color: var(--white);
}
.intro-date-box i { color: var(--neon-cyan); font-size: 1.3rem; flex-shrink: 0; }
.idb-date {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(.65rem, 2vw, .82rem);
  letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
}
.idb-time {
  font-family: 'Orbitron', monospace;
  font-size: 1rem; color: var(--neon-yellow);
  text-shadow: 0 0 8px var(--neon-yellow);
}

.intro-city {
  font-size: .8rem; letter-spacing: 2px; color: var(--text-dim);
  margin-bottom: 1.75rem;
}
.intro-city i { color: var(--neon-pink); }

.intro-bloom,
.hero-bloom,
.banner-bloom {
  position: absolute;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(18px);
  opacity: .55;
}

.intro-bloom--left,
.hero-bloom--left,
.banner-bloom--left {
  left: -8rem;
  top: 18%;
  background: radial-gradient(circle, rgba(255, 119, 183, .24), rgba(255, 119, 183, 0) 70%);
  animation: neonBloomFloat 13s ease-in-out infinite;
}

.intro-bloom--right,
.hero-bloom--right,
.banner-bloom--right {
  right: -8rem;
  bottom: 14%;
  background: radial-gradient(circle, rgba(125, 231, 255, .22), rgba(125, 231, 255, 0) 72%);
  animation: neonBloomFloat 15s ease-in-out infinite reverse;
}

.intro-spark,
.hero-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 12px rgba(255,255,255,.85), 0 0 24px rgba(255, 216, 111, .55);
  animation: neonTwinkle 3.6s ease-in-out infinite;
}

.intro-spark--one,
.hero-spark--one { top: 16%; left: 18%; }
.intro-spark--two,
.hero-spark--two { top: 26%; right: 20%; animation-delay: .8s; }
.intro-spark--three,
.hero-spark--three { bottom: 18%; left: 26%; animation-delay: 1.5s; }

/* === BUTTONS =============================================== */
.btn-neon-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--neon-pink), #C0165C);
  border: 2px solid rgba(255,215,0,.4);
  border-radius: 50px; color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  padding: .9rem 2.5rem; text-decoration: none;
  transition: all .3s; position: relative; overflow: hidden;
  box-shadow: 0 0 16px var(--glow-pink), 0 4px 16px rgba(0,0,0,.4);
}
.btn-neon-pill::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-150%); animation:btnShine 2.5s ease infinite 1s;
}
@keyframes btnShine { 0%,100%{transform:translateX(-150%);}50%{transform:translateX(150%);} }
.btn-neon-pill:hover { transform:translateY(-3px) scale(1.02); color:#fff; box-shadow:0 0 32px var(--glow-pink),0 8px 24px rgba(0,0,0,.4); }

.btn-neon-yellow {
  background:linear-gradient(135deg, var(--neon-yellow), #E8A800);
  color: var(--navy) !important;
  box-shadow: 0 0 16px var(--glow-yellow);
}
.btn-neon-yellow:hover { box-shadow:0 0 32px var(--glow-yellow),0 8px 24px rgba(0,0,0,.4); color:var(--navy)!important; }

.btn-neon-cyan {
  background:linear-gradient(135deg, #00B4CC, #007890);
  color: #fff !important;
  border-color: rgba(0,229,255,.5);
  box-shadow: 0 0 16px var(--glow-cyan);
}
.btn-neon-cyan:hover { box-shadow:0 0 32px var(--glow-cyan),0 8px 24px rgba(0,0,0,.4); color:#fff!important; }

.btn-neon-green {
  background:linear-gradient(135deg, #25D366, #1a9e4a);
  color:#fff!important;
  border-color:rgba(57,255,20,.4);
  box-shadow:0 0 16px var(--glow-green);
}
.btn-neon-green:hover { box-shadow:0 0 32px var(--glow-green),0 8px 24px rgba(0,0,0,.4); color:#fff!important; }

/* === INVITATION ============================================ */
.invitation { display:none; opacity:0; transition:opacity .6s ease; }
.invitation.is-visible { display:block; }
.invitation.is-ready   { opacity:1; }

/* === SCROLL PROGRESS ======================================= */
.scroll-bar {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(to right,var(--neon-pink),var(--neon-yellow),var(--neon-cyan));
  z-index:999; box-shadow:0 0 8px var(--neon-pink);
  transition:width .1s linear;
}

/* === NAVBAR ================================================ */
#mainNav {
  background:transparent; border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s,padding .4s; padding:1.3rem 0; z-index:500;
}
#mainNav.scrolled {
  background:rgba(8,12,30,.96); border-bottom-color:rgba(0,229,255,.2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:.7rem 0;
}
#mainNav .navbar-brand {
  font-family:'Great Vibes',cursive; font-size:1.8rem;
  color:var(--neon-yellow); text-decoration:none;
  text-shadow:0 0 12px var(--glow-yellow);
}
#mainNav .nav-link {
  font-family:'Nunito',sans-serif; font-size:.68rem; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.8); padding:.4rem .9rem; transition:color .3s;
}
#mainNav .nav-link:hover { color:var(--neon-cyan); text-shadow:0 0 8px var(--neon-cyan); }
.nav-neon-pill {
  background:linear-gradient(135deg,var(--neon-pink),#A0003C)!important;
  border-radius:50px!important; color:#fff!important;
  box-shadow:0 0 12px var(--glow-pink);
  padding:.4rem 1.4rem!important;
}
.nav-neon-pill:hover { transform:translateY(-2px); box-shadow:0 0 24px var(--glow-pink)!important; }

#mainNav .navbar-toggler { border-color:rgba(0,229,255,.4); }
#mainNav .navbar-toggler-icon {
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,229,255,0.85%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media(max-width:991px){
  #navMenu{background:rgba(8,12,30,.97);border:1px solid rgba(0,229,255,.25);padding:1rem 1.5rem;margin-top:.5rem;}
  #navMenu .nav-link{color:var(--text-on-dark)!important;border-bottom:1px solid rgba(0,229,255,.15);padding:.65rem 0;}
  #navMenu .nav-link:last-child{border-bottom:none;}
}

/* === HERO ================================================== */
.hero-section {
  min-height:100vh; position:relative; overflow:hidden;
  /* IMAGEN: reemplaza URL aquí con foto del festejado */
  background:
    radial-gradient(circle at 22% 24%, rgba(255, 119, 183, .18), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(125, 231, 255, .16), transparent 20%),
    radial-gradient(circle at 50% 86%, rgba(255, 216, 111, .14), transparent 22%),
    linear-gradient(165deg, #0e0a24 0%, #1d0f38 34%, #311347 68%, #12091f 100%);
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14, 10, 36, .76) 0%, rgba(31, 16, 53, .52) 52%, rgba(10, 8, 26, .88) 100%);
}
.hero-lights,.hero-confetti,.hero-balloons{position:absolute;inset:0;overflow:hidden;pointer-events:none;}

.hero-section::before {
  width: 36vw;
  height: 36vw;
  min-width: 260px;
  min-height: 260px;
  left: -6vw;
  bottom: 10vh;
  background: radial-gradient(circle, rgba(255, 119, 183, .18), rgba(255, 119, 183, 0) 72%);
  filter: blur(18px);
  animation: neonBloomFloat 16s ease-in-out infinite;
}

.hero-section::after {
  width: 34vw;
  height: 34vw;
  min-width: 240px;
  min-height: 240px;
  right: -6vw;
  top: 10vh;
  background: radial-gradient(circle, rgba(125, 231, 255, .18), rgba(125, 231, 255, 0) 72%);
  filter: blur(18px);
  animation: neonBloomFloat 14s ease-in-out infinite reverse;
}

.hero-body {
  position:relative; z-index:2; padding:2.4rem 1.8rem;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(12, 10, 32, .66), rgba(18, 12, 36, .42));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 32px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}
@keyframes heroIn{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
.hero-entrance { animation:heroIn 1.2s ease .4s both; }

.hero-cake { font-size:clamp(3rem,8vw,5rem); filter:drop-shadow(0 0 16px var(--neon-yellow)); margin-bottom:.5rem; }
.hero-invited { font-family:'Nunito',sans-serif; font-size:.7rem; letter-spacing:5px; text-transform:uppercase; color:var(--text-dim); margin-bottom:.25rem; }
.hero-party {
  font-family:'Dancing Script',cursive; font-size:clamp(2.8rem,11vw,5.5rem); font-weight:700;
  color:var(--neon-yellow);
  text-shadow:0 0 10px var(--neon-yellow),0 0 25px var(--neon-yellow),0 0 60px rgba(255,215,0,.5);
  line-height:1; margin-bottom:.1rem;
}
.hero-name {
  font-family:'Great Vibes',cursive; font-size:clamp(3rem,12vw,6rem);
  color:var(--neon-cyan);
  text-shadow:0 0 10px var(--neon-cyan),0 0 25px var(--neon-cyan),0 0 60px rgba(0,229,255,.5);
  line-height:1; margin-bottom:1rem;
}
.hero-sep{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:.75rem 0;}
.hero-sep span{display:block;width:50px;height:1px;background:linear-gradient(to right,transparent,rgba(0,229,255,.6),transparent);}
.hero-sep i{color:var(--neon-yellow);font-size:1rem;text-shadow:0 0 8px var(--neon-yellow);}

.hero-date-box {
  display:inline-flex; flex-direction:column; gap:.25rem;
  border:2px solid var(--neon-cyan); border-radius:10px;
  padding:.85rem 2rem; margin-bottom:.6rem;
  box-shadow:0 0 10px var(--neon-cyan),0 0 25px rgba(0,229,255,.2),inset 0 0 8px rgba(0,229,255,.08);
}
.hero-date-box span { font-family:'Nunito',sans-serif; font-size:.78rem; letter-spacing:2px; text-transform:uppercase; color:#fff; font-weight:600; }
.hero-date-box i { color:var(--neon-cyan); margin-right:.5rem; }
.hero-city { font-size:.82rem; letter-spacing:2px; color:var(--text-dim); margin-bottom:0; }
.hero-city i { color:var(--neon-pink); }

.hero-aurora {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:110%; height:160px;
  background:radial-gradient(ellipse at bottom, rgba(125,231,255,.22) 0%,rgba(217,166,255,.16) 40%,transparent 70%);
  pointer-events:none; animation:auroraBreath 4s ease-in-out infinite;
}
@keyframes auroraBreath{0%,100%{opacity:.7;transform:translateX(-50%) scaleX(1);}50%{opacity:1;transform:translateX(-50%) scaleX(1.06);}}
@keyframes neonBloomFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(0,-12px,0) scale(1.06);}
}
@keyframes neonTwinkle{
  0%,100%{opacity:.55;transform:scale(.92);}
  50%{opacity:1;transform:scale(1.18);}
}

/* === SHARED SECTION HELPERS ================================ */
section { padding:6rem 0; position:relative; overflow:hidden; }
.section-eyebrow { font-family:'Nunito',sans-serif; font-size:.65rem; letter-spacing:4px; text-transform:uppercase; color:var(--neon-cyan); margin-bottom:.4rem; }
.section-heading {
  font-family:'Dancing Script',cursive; font-size:clamp(2rem,6vw,3.4rem);
  color:var(--white); text-shadow:0 0 12px rgba(0,229,255,.3); margin-bottom:.25rem;
}
.neon-rule {
  width:56px; height:2px; margin:1rem auto;
  background:linear-gradient(to right,transparent,var(--neon-cyan),transparent);
  box-shadow:0 0 8px var(--neon-cyan);
}
.neon-rule.ms-0 { margin-left:0; }
.cd-stars,.cal-stars { position:absolute; inset:0; pointer-events:none; overflow:hidden; }

/* === COUNTDOWN ============================================= */
.cd-section { background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 60%,var(--navy-light) 100%); padding:6rem 0; }
.rings-grid { display:flex; justify-content:center; align-items:center; gap:2rem; flex-wrap:wrap; margin:2rem 0; }
.ring-wrap { position:relative; width:140px; height:140px; flex-shrink:0; }
.ring-svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg { fill:none; stroke:rgba(0,229,255,.15); stroke-width:6; }
.ring-fill { fill:none; stroke-width:6; stroke-linecap:round; stroke-dasharray:314.159; stroke-dashoffset:314.159; transition:stroke-dashoffset .6s ease; filter:drop-shadow(0 0 4px rgba(0,229,255,.6)); }
.ring-fill--fast { transition:stroke-dashoffset .25s linear; }
.ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-num { font-family:'Orbitron',monospace; font-size:clamp(1.8rem,5vw,2.6rem); line-height:1; }
.ring-lbl { font-family:'Nunito',sans-serif; font-size:.55rem; letter-spacing:3px; text-transform:uppercase; color:var(--text-dim); margin-top:.3rem; }
.cd-msg { font-family:'Dancing Script',cursive; font-size:clamp(1.4rem,4vw,2rem); color:var(--neon-cyan); text-shadow:0 0 12px var(--neon-cyan); margin-top:1.5rem; }

/* === ABOUT / FESTEJADO ===================================== */
.about-section { background:var(--navy-mid); padding:6rem 0; }
.about-frame { position:relative; display:inline-block; width:100%; }
.about-photo { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; border:2px solid rgba(0,229,255,.3); box-shadow:0 0 30px var(--glow-cyan),0 16px 40px rgba(0,0,0,.5); position:relative; z-index:1; }
.about-glow-border { position:absolute; inset:-4px; background:linear-gradient(135deg,var(--neon-cyan),transparent,var(--neon-yellow),transparent,var(--neon-cyan)); background-size:200% 200%; animation:glowBorder 3s ease-in-out infinite; z-index:0; opacity:.5; }
@keyframes glowBorder{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.about-corner { position:absolute; width:32px; height:32px; z-index:2; }
.about-corner--tl { top:-6px; left:-6px; border-top:2px solid var(--neon-cyan); border-left:2px solid var(--neon-cyan); box-shadow:-2px -2px 8px var(--neon-cyan); }
.about-corner--br { bottom:-6px; right:-6px; border-bottom:2px solid var(--neon-yellow); border-right:2px solid var(--neon-yellow); box-shadow:2px 2px 8px var(--neon-yellow); }
.about-badge { position:absolute; bottom:1.5rem; right:-1rem; z-index:3; background:linear-gradient(135deg,var(--navy-light),var(--navy-mid)); border:2px solid var(--neon-yellow); width:72px; height:72px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 0 20px var(--glow-yellow); }
.ab-emoji { font-size:1.5rem; line-height:1; }
.ab-age { font-family:'Orbitron',monospace; color:var(--neon-yellow); font-size:1.1rem; text-shadow:0 0 8px var(--neon-yellow); line-height:1; }
.about-text { font-size:.95rem; line-height:1.85; color:var(--text-on-dark); margin:1.25rem 0; opacity:.9; }
.about-quote { font-family:'Dancing Script',cursive; font-size:1.25rem; color:var(--neon-cyan); border-left:3px solid var(--neon-yellow); padding-left:1.25rem; background:none; text-shadow:0 0 10px rgba(0,229,255,.4); margin:0 0 .5rem; }
.about-firma { font-size:.9rem; color:var(--neon-yellow); }

/* === EVENT SECTION ========================================= */
.event-section { background:var(--navy); padding:6rem 0; }
.event-neon-card {
  background:rgba(0,229,255,.04); border:1px solid rgba(0,229,255,.25);
  padding:3rem 2.5rem; height:100%; text-align:center;
  box-shadow:0 0 20px rgba(0,229,255,.08),0 8px 32px rgba(0,0,0,.4);
  position:relative; overflow:hidden;
  transition:transform .3s, box-shadow .3s;
}
.event-neon-card:hover { transform:translateY(-6px); box-shadow:0 0 40px rgba(0,229,255,.15),0 12px 40px rgba(0,0,0,.5); }
.event-neon-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(to right,var(--neon-cyan),var(--neon-purple)); box-shadow:0 0 10px var(--neon-cyan); }
.event-neon-card--featured { border-color:rgba(255,215,0,.4); background:rgba(255,215,0,.04); }
.event-neon-card--featured::before { background:linear-gradient(to right,var(--neon-yellow),var(--neon-pink)); box-shadow:0 0 10px var(--neon-yellow); }
.event-neon-card--featured:hover { box-shadow:0 0 40px rgba(255,215,0,.15),0 12px 40px rgba(0,0,0,.5); }

.enc-icon { font-size:2.8rem; margin-bottom:1rem; }
.enc-icon i { color:var(--neon-cyan); text-shadow:0 0 14px var(--neon-cyan); }
.event-neon-card--featured .enc-icon i { color:var(--neon-yellow); text-shadow:0 0 14px var(--neon-yellow); }
.enc-eyebrow { font-size:.65rem; letter-spacing:4px; text-transform:uppercase; color:var(--neon-cyan); margin-bottom:.35rem; }
.event-neon-card--featured .enc-eyebrow { color:var(--neon-yellow); }
.enc-heading { font-family:'Dancing Script',cursive; font-size:clamp(1.8rem,4vw,2.5rem); color:#fff; }

.enc-list { list-style:none; padding:0; margin:1.5rem 0; text-align:left; }
.enc-list li { display:flex; align-items:flex-start; gap:1rem; padding:.8rem 0; border-bottom:1px solid rgba(0,229,255,.12); font-size:.9rem; color:var(--text-on-dark); line-height:1.6; }
.enc-list li:last-child { border-bottom:none; }
.enc-list li i { color:var(--neon-cyan); font-size:1rem; flex-shrink:0; margin-top:3px; min-width:18px; }
.event-neon-card--featured .enc-list li { border-bottom-color:rgba(255,215,0,.12); }
.event-neon-card--featured .enc-list li i { color:var(--neon-yellow); }

/* === CALENDAR SECTION ====================================== */
.cal-section { background:var(--navy-mid); padding:6rem 0; }
.cal-icon { font-size:3.5rem; display:block; margin-bottom:1rem; filter:drop-shadow(0 0 10px var(--neon-yellow)); }
.cal-sub { font-size:.85rem; color:var(--text-dim); }

/* === BANNER NEON =========================================== */
.banner-neon {
  min-height:50vh; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 119, 183, .14), transparent 24%),
    radial-gradient(circle at 78% 32%, rgba(125, 231, 255, .14), transparent 20%),
    linear-gradient(135deg, #171033 0%, #271248 50%, #140b27 100%);
  background-size:200% 200%;
  animation:gradShift 8s ease-in-out infinite;
}
@keyframes gradShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.banner-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.banner-neon::before {
  inset: 1.5rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
}
.banner-neon::after {
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  opacity: .25;
}
.banner-body { position:relative; z-index:2; padding:2rem 2.5rem; }
.banner-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-family: 'Nunito', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--neon-yellow);
  box-shadow: 0 0 18px rgba(255, 216, 111, .12);
  margin-bottom: 1rem;
}
.banner-quote { font-family:'Dancing Script',cursive; font-size:clamp(1.8rem,5.5vw,3.5rem); color:#fff; text-shadow:0 0 20px rgba(0,229,255,.3); line-height:1.4; margin-bottom:1rem; }
.banner-sub { font-family:'Nunito',sans-serif; font-size:.65rem; letter-spacing:5px; text-transform:uppercase; color:var(--neon-cyan); text-shadow:0 0 8px var(--neon-cyan); }

/* === ITINERARY ============================================= */
.iti-section { background:var(--navy-light); padding:6rem 0; }
.iti-scroll { overflow-x:auto; padding:2rem 1.5rem 2.5rem; scrollbar-width:thin; scrollbar-color:var(--neon-cyan) transparent; margin-top:2rem; }
.iti-scroll::-webkit-scrollbar{height:4px;}
.iti-scroll::-webkit-scrollbar-thumb{background:var(--neon-cyan);border-radius:2px;}
.iti-track { display:flex; align-items:center; gap:0; width:max-content; padding:0 2rem; }

.iti-card { background:rgba(255,255,255,.04); border:1px solid rgba(0,229,255,.2); border-radius:12px; padding:2.25rem 1.75rem; width:175px; flex-shrink:0; text-align:center; position:relative; overflow:hidden; transition:transform .3s,border-color .3s,box-shadow .3s; }
.iti-card:hover { transform:translateY(-8px); border-color:var(--neon-cyan); box-shadow:0 0 24px var(--glow-cyan),0 12px 32px rgba(0,0,0,.5); }
.iti-card--featured { background:linear-gradient(145deg,rgba(255,45,120,.12),rgba(184,79,255,.08)); border-color:var(--neon-pink); box-shadow:0 0 20px var(--glow-pink); }
.iti-card--fiesta { background:linear-gradient(145deg,rgba(255,215,0,.1),rgba(255,107,53,.08)); border-color:var(--neon-yellow); }

.iti-num { position:absolute; top:.5rem; right:.75rem; font-family:'Orbitron',monospace; font-size:2.2rem; color:rgba(0,229,255,.12); line-height:1; }
.iti-icon-wrap { font-size:1.8rem; margin-bottom:.75rem; filter:drop-shadow(0 0 6px currentColor); }
.iti-time { display:block; font-family:'Orbitron',monospace; font-size:.65rem; letter-spacing:2px; margin-bottom:.4rem; }
.iti-title { font-family:'Dancing Script',cursive; font-size:1.4rem; color:#fff; margin-bottom:.3rem; }
.iti-place { font-size:.75rem; color:var(--text-dim); }

.iti-arrow { padding:0 .75rem; flex-shrink:0; }
.iti-arrow i { color:var(--neon-purple); font-size:1.3rem; text-shadow:0 0 8px var(--neon-purple); }

@media(max-width:767px){
  .iti-track{flex-direction:column;gap:.75rem;padding:0;width:100%;}
  .iti-card{width:100%;}
  .iti-arrow{transform:rotate(90deg);}
}

/* === DRESSCODE ============================================= */
.dress-section { background:var(--navy); padding:6rem 0; }
.dress-neon-card { background:rgba(0,229,255,.04); border:1px solid rgba(0,229,255,.25); padding:3.5rem 3rem; max-width:640px; margin:0 auto; box-shadow:0 0 24px rgba(0,229,255,.08); }
.dnc-emoji { font-size:3.5rem; display:block; margin-bottom:1rem; filter:drop-shadow(0 0 12px var(--neon-cyan)); }
.dnc-type { font-family:'Dancing Script',cursive; font-size:clamp(1.6rem,4vw,2.2rem); margin-bottom:1rem; }
.dnc-desc { font-size:.95rem; line-height:1.85; color:var(--text-on-dark); max-width:480px; margin:0 auto 2rem; opacity:.9; }
.dnc-swatches { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem; }
.dncs-wrap { display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.dncs { width:46px; height:46px; border-radius:50%; display:inline-block; box-shadow:0 0 10px currentColor,0 4px 12px rgba(0,0,0,.4); cursor:default; transition:transform .25s; }
.dncs:hover { transform:scale(1.25); }
.dncs-wrap small { font-size:.55rem; letter-spacing:2px; text-transform:uppercase; }
.dnc-note { background:rgba(0,229,255,.06); border-left:3px solid var(--neon-yellow); padding:.9rem 1.25rem; font-size:.85rem; color:var(--text-on-dark); text-align:left; }

/* === CONFIRM =============================================== */
.confirm-section { background:radial-gradient(ellipse at center,var(--navy-light) 0%,var(--navy) 70%); padding:6rem 0; overflow:hidden; }
.confirm-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confirm-emoji { font-size:4rem; display:block; margin-bottom:1rem; filter:drop-shadow(0 0 12px var(--neon-yellow)); }
.confirm-text { font-size:1rem; line-height:1.85; color:var(--text-on-dark); opacity:.9; }
.confirm-balloons { font-size:2.5rem; margin-top:2rem; letter-spacing:1rem; }

/* === FOOTER ================================================ */
.footer-neon { background:var(--navy); padding:5rem 0; border-top:1px solid rgba(0,229,255,.15); overflow:hidden; }
.footer-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.footer-emoji { font-size:3rem; display:block; margin-bottom:1rem; filter:drop-shadow(0 0 14px var(--neon-yellow)); }
.footer-name { font-family:'Great Vibes',cursive; font-size:clamp(3rem,9vw,5.5rem); color:var(--neon-cyan); text-shadow:0 0 20px var(--glow-cyan); margin-bottom:.2rem; }
.footer-sub { font-family:'Dancing Script',cursive; font-size:1.4rem; margin-bottom:.35rem; }
.footer-date { font-family:'Orbitron',monospace; font-size:.65rem; letter-spacing:4px; color:var(--text-dim); margin-bottom:2rem; }
.footer-sep { display:flex; align-items:center; justify-content:center; gap:1rem; margin:1.5rem 0; }
.footer-sep span { display:block; flex:1; max-width:60px; height:1px; background:linear-gradient(to right,transparent,rgba(0,229,255,.4),transparent); }
.footer-sep i { color:var(--neon-yellow); text-shadow:0 0 8px var(--neon-yellow); }
.footer-msg { font-size:.9rem; opacity:.65; line-height:1.9; margin-bottom:2rem; }
.footer-copy { font-size:.72rem; opacity:.35; }
.footer-copy .bi-heart-fill { color:var(--neon-pink); }

@media(max-width:767px){
  .intro-body,
  .hero-body,
  .banner-body {
    border-radius: 22px;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .intro-bloom,
  .hero-bloom,
  .banner-bloom {
    width: 14rem;
    height: 14rem;
    opacity: .42;
  }
}