/* ============================================================
   XV GLAM PINK — styles.css
   Paleta: Fucsia · Magenta · Dorado · Rosa · Blanco
   Estilo: Ultra-glam, destellos, bokeh, corona, reluciente
   ============================================================ */

/* === VARIABLES ============================================= */
:root {
  --fuchsia:      #E91E8C;
  --fuchsia-deep: #C0165C;
  --magenta:      #8B0045;
  --hot-pink:     #FF2D78;
  --pink-mid:     #F0176A;
  --pink-light:   #FF80BC;
  --pink-pale:    #FFE0F0;
  --gold:         #FFD700;
  --gold-rose:    #E8A87C;
  --gold-pale:    #FFF5CC;
  --gold-warm:    #F5C842;
  --white:        #FFFFFF;
  --dark:         #1A0010;
  --dark-mid:     #2D0020;
  --text-on-dark: #FFE8F5;
  --text-dim:     #FF9FCC;
  --border-gold:  rgba(255,215,0,.4);
  --border-pink:  rgba(233,30,140,.4);
  --glow-pink:    rgba(233,30,140,.45);
  --glow-gold:    rgba(255,215,0,.45);
  --circ:         314.159;
}

/* === RESET & BASE ========================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  background: var(--dark);
  color: var(--text-on-dark);
  overflow-x: hidden;
}

.body--locked { overflow: hidden; }
h1,h2,h3,h4 { font-family: 'Cinzel Decorative', serif; margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }

/* === GLITTER PARTICLE ====================================== */
.glitter {
  position: absolute;
  left: var(--x, 50%);
  top:  var(--y, 50%);
  width:  var(--s, 5px);
  height: var(--s, 5px);
  background: var(--gc, #FFD700);
  clip-path: polygon(
    50% 0%, 56% 38%, 93% 25%,
    63% 50%, 93% 75%, 56% 62%,
    50% 100%, 44% 62%, 7% 75%,
    37% 50%, 7% 25%, 44% 38%
  ); /* 6-pointed star */
  animation: glitterSpin var(--d, 2.5s) var(--del, 0s) infinite ease-in-out;
  pointer-events: none;
}
@keyframes glitterSpin {
  0%,100% { opacity:0; transform:scale(.3) rotate(0deg); }
  35%     { opacity:1; transform:scale(1.8) rotate(120deg); }
  65%     { opacity:.85; transform:scale(1.4) rotate(240deg); }
}

/* === BOKEH DOT ============================================= */
.bokeh-dot {
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--blur, 10px));
  opacity: var(--op, .25);
  animation: bokehFloat var(--d, 5s) var(--del, 0s) infinite ease-in-out alternate;
  pointer-events: none;
}
@keyframes bokehFloat {
  0%   { transform: translateY(0)   scale(1); opacity: var(--op, .25); }
  50%  { transform: translateY(-20px) scale(1.1); opacity: calc(var(--op, .25) * 1.5); }
  100% { transform: translateY(0)   scale(.9); opacity: var(--op, .25); }
}

/* === 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; }

/* === SHIMMER TEXT ========================================== */
@keyframes shimmer {
  0%   { background-position: -300% center; }
  100% { background-position:  300% center; }
}
.text-shimmer {
  background: linear-gradient(90deg,
    var(--gold) 0%, #FFF 20%, var(--pink-light) 40%,
    var(--gold) 60%, #FFF 80%, var(--gold) 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* === CROWN PULSE =========================================== */
@keyframes crownPulse {
  0%,100% { transform:scale(1);    text-shadow:0 0 10px var(--glow-gold); }
  50%     { transform:scale(1.12); text-shadow:0 0 30px var(--gold), 0 0 60px var(--glow-gold); }
}
.crown-pulse { animation: crownPulse 2.5s ease-in-out infinite; }

/* ============================================================
   INTRO — CORTINA SPLIT REVEAL
   ============================================================ */
.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* Las dos mitades de la cortina */
.curtain {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  overflow: hidden;
  transition: transform 1s cubic-bezier(.76,0,.24,1);
  will-change: transform;
}

.curtain::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Fondo de la cortina: gradiente magenta/fucsia */
  background: radial-gradient(
    ellipse at center,
    var(--fuchsia-deep) 0%,
    var(--magenta) 50%,
    var(--dark) 100%
  );
}

/* Patrón de destellos en el fondo de la cortina */
.curtain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,215,0,.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,45,120,.12) 0%, transparent 50%);
}

.curtain--left  { left: 0;  }
.curtain--right { right: 0; }

.curtain--left.opening  { transform: translateX(-100%); }
.curtain--right.opening { transform: translateX(100%); }

/* Contenido de la intro (encima de las cortinas) */
.intro-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10;
  pointer-events: none; /* el btn se habilita por z-index propio */
}

.intro-glitter,
.intro-bokeh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.intro-body {
  position: relative;
  z-index: 11;
  pointer-events: auto;
  padding: 2rem 1.5rem;
  max-width: 480px;
}

.crown-wrap { margin-bottom: .75rem; }
.crown-icon {
  font-size: clamp(2.5rem, 7vw, 4rem);
  color: var(--gold);
  animation: crownPulse 2.5s ease-in-out infinite;
}

.intro-mis {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(.65rem, 2vw, .9rem);
  letter-spacing: 6px;
  color: var(--gold-pale);
  margin-bottom: 0;
}
.intro-xv {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 6px;
  text-shadow: 0 0 20px var(--glow-gold), 0 0 40px rgba(255,215,0,.3);
  margin-bottom: .5rem;
}
.intro-name {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(4rem, 16vw, 7rem);
  font-weight: 400;
  color: var(--white);
  text-shadow:
    0 0 20px var(--glow-pink),
    0 0 60px rgba(233,30,140,.5),
    0 2px 8px rgba(0,0,0,.4);
  line-height: 1;
  margin-bottom: .5rem;
}
.intro-sep {
  display:flex; align-items:center; justify-content:center; gap:.75rem; margin:.75rem 0;
}
.intro-sep span { display:block; width:40px; height:1px; background:linear-gradient(to right,transparent,var(--gold)); }
.intro-sep span:last-child { background:linear-gradient(to left,transparent,var(--gold)); }
.intro-sep i { color:var(--gold); font-size:.9rem; animation:crownPulse 2s infinite; }

.intro-date, .intro-city {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(.7rem, 2vw, .85rem);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-pale);
  margin-bottom: .35rem;
}
.intro-city { color: var(--pink-light); margin-bottom: 1.75rem; }

/* Botón intro */
.intro-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: linear-gradient(135deg, var(--hot-pink), var(--fuchsia-deep));
  border: 2px solid rgba(255,215,0,.5);
  border-radius: 50px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(.65rem, 2vw, .78rem);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: .95rem 2.5rem;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 0 30px var(--glow-pink), 0 6px 20px rgba(0,0,0,.3);
  animation: btnGlow 2.2s ease-in-out infinite;
  transition: transform .2s;
}
@keyframes btnGlow {
  0%,100% { box-shadow:0 0 20px var(--glow-pink),0 6px 20px rgba(0,0,0,.3); }
  50%     { box-shadow:0 0 50px var(--glow-pink),0 0 80px rgba(255,45,120,.3); }
}
.intro-btn:hover  { transform: translateY(-3px) scale(1.02); }
.intro-btn:active { transform: scale(.97); }

.intro-btn-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-150%);
  animation: btnShine 2.5s ease-in-out infinite 1s;
}
@keyframes btnShine {
  0%,100% { transform: translateX(-150%); }
  50%     { transform: translateX(150%); }
}

/* === PETAL BURST =========================================== */
.petal {
  position: fixed;
  z-index: 9998;
  font-size: var(--size, 14px);
  pointer-events: none;
  animation: petalFly var(--dur, 1.2s) var(--del, 0s) ease-out forwards;
}
@keyframes petalFly {
  0%   { transform:translate(0,0) rotate(0deg) scale(1); opacity:1; }
  100% { transform:translate(var(--dx,0px),60vh) rotate(var(--rot,360deg)) scale(.2); opacity:0; }
}

/* === INVITATION WRAPPER ==================================== */
.invitation { display:none; opacity:0; transition:opacity .5s 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(--fuchsia), var(--gold));
  z-index: 998;
  box-shadow: 0 0 10px var(--glow-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(26,0,16,.94);
  border-bottom-color: rgba(255,215,0,.25);
  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(--gold);
  text-decoration: none;
  text-shadow: 0 0 12px var(--glow-gold);
}
#mainNav .nav-link {
  font-family: 'Montserrat', sans-serif;
  font-size: .65rem; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,.82); padding: .4rem .9rem;
  transition: color .3s;
}
#mainNav .nav-link:hover { color: var(--gold); }
.nav-pill {
  background: linear-gradient(135deg, var(--hot-pink), var(--fuchsia-deep)) !important;
  border-radius: 50px !important;
  color: #fff !important;
  padding: .4rem 1.4rem !important;
  box-shadow: 0 0 14px var(--glow-pink);
}
.nav-pill:hover { transform: translateY(-2px); box-shadow: 0 0 24px var(--glow-pink) !important; }

#mainNav .navbar-toggler { border-color: rgba(255,215,0,.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%28255,215,0,0.85%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media(max-width:991px){
  #navMenu { background:rgba(26,0,16,.97); border:1px solid rgba(255,215,0,.3); padding:1rem 1.5rem; margin-top:.5rem; }
  #navMenu .nav-link { color:var(--text-on-dark)!important; border-bottom:1px solid rgba(233,30,140,.25); padding:.65rem 0; }
  #navMenu .nav-link:last-child { border-bottom:none; }
  .nav-pill { border-radius:50px!important; text-align:center; }
}

/* === HERO ================================================== */
.hero-section {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  /* IMAGEN: reemplaza esta URL con la foto real de la quinceañera */
  background:
    linear-gradient(155deg, rgba(26,0,16,.92) 0%, rgba(139,0,69,.86) 30%, rgba(233,30,140,.76) 58%, rgba(255,128,188,.72) 78%, rgba(255,215,0,.72) 100%),
    linear-gradient(45deg, var(--dark) 0%, var(--magenta) 48%, var(--gold) 100%);
  background-size: 180% 180%;
  background-position: center;
  animation: heroGlamFlow 14s ease-in-out infinite alternate;
}
@media(max-width:767px){ .hero-section { background-attachment:scroll; } }

.hero-section::before,
.hero-section::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.hero-section::before {
  inset: -16%;
  opacity: .38;
  background:
    conic-gradient(from 12deg at 15% 78%, transparent 0 18deg, rgba(255,215,0,.18) 19deg 44deg, transparent 45deg 80deg, rgba(255,255,255,.12) 81deg 104deg, transparent 105deg),
    conic-gradient(from 210deg at 86% 18%, transparent 0 20deg, rgba(255,128,188,.2) 21deg 50deg, transparent 51deg 88deg, rgba(255,215,0,.16) 89deg 112deg, transparent 113deg),
    radial-gradient(circle at 24% 26%, rgba(255,255,255,.62) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 34%, rgba(255,215,0,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 82%, rgba(255,128,188,.58) 0 1px, transparent 2px);
  animation: heroGlamPetals 20s ease-in-out infinite alternate;
}

.hero-section::after {
  inset: 0;
  opacity: .5;
  background:
    radial-gradient(circle at 20% 42%, rgba(255,255,255,.78) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 62%, rgba(255,215,0,.72) 0 1px, transparent 2px),
    radial-gradient(circle at 65% 22%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    linear-gradient(118deg, transparent 0 45%, rgba(255,255,255,.16) 48%, transparent 52% 100%);
  background-size: auto, auto, auto, 260% 260%;
  animation: heroGlamSweep 8s ease-in-out infinite;
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26,0,16,.46) 0%,
    rgba(192,22,92,.18) 40%,
    rgba(26,0,16,.72) 100%
  );
  z-index: 1;
}

.hero-glitter, .hero-bokeh { position:absolute; inset:0; overflow:hidden; pointer-events:none; }

.hero-body {
  position: relative; z-index: 2;
  padding: 1.5rem 1.5rem 4rem;
  width: 100%; text-align: center;
}
@keyframes heroIn { from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);} }
.hero-entrance { animation: heroIn 1.2s ease .5s both; }

@keyframes heroGlamFlow {
  from { background-position: 0% 45%; }
  to   { background-position: 100% 55%; }
}

@keyframes heroGlamPetals {
  from { transform: translate3d(-1.5%, -1%, 0) rotate(-1deg); }
  to   { transform: translate3d(1.5%, 1%, 0) rotate(1deg); }
}

@keyframes heroGlamSweep {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0% 50%; }
  50%      { background-position: 0 0, 0 0, 0 0, 100% 50%; }
}

.hero-crown {
  font-size: clamp(2rem,6vw,3.5rem);
  color: var(--gold);
  margin-bottom: .5rem;
  animation: crownPulse 2.5s ease-in-out infinite;
}
.hero-mis {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(.6rem,1.8vw,.8rem);
  letter-spacing: 7px; color: var(--gold-pale); margin-bottom: 0;
}
.hero-xvanos {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.2rem,4.5vw,2rem);
  font-weight: 700; letter-spacing: 6px;
  color: var(--gold);
  text-shadow: 0 0 20px var(--glow-gold);
  margin-bottom: .35rem;
}
.hero-name {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(4rem,18vw,7.5rem);
  font-weight: 400; color: #fff;
  text-shadow: 0 0 30px var(--glow-pink), 0 0 60px rgba(233,30,140,.4), 0 2px 10px rgba(0,0,0,.5);
  line-height: 1; margin-bottom: .5rem;
}
.hero-sep { display:flex;align-items:center;justify-content:center;gap:.75rem;margin:.75rem 0; }
.hero-sep span { display:block;width:40px;height:1px;background:linear-gradient(to right,transparent,rgba(255,215,0,.7),transparent); }
.hero-sep i { color:var(--gold);font-size:.9rem; }

.hero-date, .hero-city {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(.7rem,2vw,.9rem);
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,.9); margin-bottom: .35rem;
}
.hero-city { color: var(--pink-light); margin-bottom: 1.5rem; }

/* Aurora inferior del hero */
.hero-aurora {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 120%; height: 180px;
  background: radial-gradient(ellipse at bottom center, rgba(233,30,140,.5) 0%, rgba(255,45,120,.25) 30%, transparent 70%);
  pointer-events: none;
  animation: auroraBreath 4s ease-in-out infinite;
}
@keyframes auroraBreath {
  0%,100%{ opacity:.8; transform:translateX(-50%) scaleX(1);   }
  50%    { opacity:1;  transform:translateX(-50%) scaleX(1.08); }
}

/* === BUTTONS =============================================== */
.btn-glam-pill {
  display: inline-flex; align-items:center; gap:.5rem;
  background: linear-gradient(135deg, var(--hot-pink), var(--fuchsia-deep));
  border: 2px solid rgba(255,215,0,.45);
  border-radius: 50px;
  color: #fff;
  font-family: 'Montserrat', 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 ease;
  box-shadow: 0 0 20px var(--glow-pink), 0 4px 16px rgba(0,0,0,.3);
  position: relative; overflow: hidden;
}
.btn-glam-pill::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);
  transform:translateX(-150%); transition:transform .5s ease;
}
.btn-glam-pill:hover { transform:translateY(-3px); box-shadow:0 0 40px var(--glow-pink),0 8px 24px rgba(0,0,0,.3); color:#fff; }
.btn-glam-pill:hover::before { transform:translateX(150%); }

.btn-glam-outline {
  display: inline-flex; align-items:center; gap:.5rem;
  background: transparent;
  border: 2px solid var(--gold);
  border-radius: 50px;
  color: var(--gold);
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  padding: .9rem 2.5rem;
  text-decoration: none;
  transition: all .3s ease;
}
.btn-glam-outline:hover {
  background: var(--gold); color: var(--dark);
  transform: translateY(-3px); box-shadow: 0 0 24px var(--glow-gold);
}

/* === SHARED HELPERS ======================================== */
section { padding: 6rem 0; position: relative; overflow: hidden; }

.section-glitter { position:absolute; inset:0; pointer-events:none; overflow:hidden; }

.section-crown {
  font-size: 2rem; color: var(--gold);
  animation: crownPulse 2.5s ease-in-out infinite;
  display: block; margin-bottom: .75rem;
}
.section-crown-sm { font-size:1.4rem; color:var(--gold); display:block; margin-bottom:.5rem; animation:crownPulse 2.5s ease-in-out infinite; }

.section-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: .65rem; letter-spacing: 5px; text-transform: uppercase;
  color: var(--gold); margin-bottom: .4rem;
}
.section-heading {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  color: var(--white);
  text-shadow: 0 0 20px var(--glow-pink);
  margin-bottom: .25rem;
}
.gold-rule {
  width: 56px; height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  margin: 1rem auto;
  box-shadow: 0 0 8px var(--glow-gold);
}
.gold-rule.ms-0 { margin-left: 0; }

/* === COUNTDOWN ============================================= */
.cd-section {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-mid) 50%, var(--magenta) 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(233,30,140,.22); stroke-width:6; }
.ring-fill {
  fill:none; stroke:url(#rg1);
  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(255,215,0,.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:'Cinzel Decorative',serif;
  font-size: clamp(1.8rem,5vw,2.6rem);
  color:#fff;
  text-shadow: 0 0 12px var(--glow-pink);
  line-height:1;
}
.ring-lbl {
  font-family:'Montserrat',sans-serif;
  font-size:.55rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-top:.3rem;
}
.cd-msg {
  font-family:'Great Vibes',cursive;
  font-size:clamp(1.4rem,4vw,2rem);
  color:var(--pink-light);
  text-shadow:0 0 20px var(--glow-pink);
  margin-top:1.5rem;
}

/* === ABOUT ================================================= */
.about-section {
  background: linear-gradient(180deg, var(--dark-mid) 0%, var(--dark) 100%);
}
.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(255,215,0,.3);
  box-shadow:0 0 40px var(--glow-pink), 0 16px 40px rgba(0,0,0,.5);
  position:relative; z-index:1;
}
.about-glow {
  position:absolute; inset:-4px;
  background:linear-gradient(135deg,var(--fuchsia),transparent,var(--gold),transparent,var(--fuchsia));
  background-size:200% 200%;
  animation: borderGlow 3s ease-in-out infinite;
  z-index:0; border-radius:2px;
  opacity:.6;
}
@keyframes borderGlow {
  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(--gold); border-left:2px solid var(--gold); }
.about-corner--br { bottom:-6px; right:-6px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold); }
.about-badge {
  position:absolute; bottom:1.5rem; right:-1rem; z-index:3;
  background:linear-gradient(135deg,var(--fuchsia-deep),var(--magenta));
  border:2px solid var(--gold);
  width:72px; height:72px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 0 24px var(--glow-pink);
}
.ab-crown { color:var(--gold); font-size:1rem; margin-bottom:.15rem; }
.ab-xv {
  font-family:'Great Vibes',cursive;
  color:#fff; font-size:1.5rem; 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:'Great Vibes',cursive;
  font-size:1.35rem; color:var(--pink-light);
  border-left:3px solid var(--gold);
  padding-left:1.25rem; background:none;
  text-shadow:0 0 12px var(--glow-pink);
  margin:0 0 .5rem;
}
.about-firma { font-size:.9rem; color:var(--gold); }

/* === FAMILY SECTION ======================================== */
.family-section {
  background: radial-gradient(ellipse at center, var(--dark-mid) 0%, var(--dark) 80%);
  padding: 6rem 0;
}
.parents-row {
  display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap;
}
.parent-glam {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,215,0,.25);
  padding:2rem 2.5rem; text-align:center; flex:1; max-width:280px;
  box-shadow:0 0 20px rgba(233,30,140,.1);
  transition:transform .3s, box-shadow .3s;
}
.parent-glam:hover { transform:translateY(-5px); box-shadow:0 0 30px var(--glow-pink); }
.parent-star { font-size:1.6rem; color:var(--gold); display:block; margin-bottom:.75rem; animation:crownPulse 2.5s infinite; }
.parent-name-glam { font-family:'Great Vibes',cursive; font-size:1.3rem; color:var(--gold-pale); }
.parent-amp { font-family:'Great Vibes',cursive; font-size:2.5rem; color:var(--fuchsia); text-shadow:0 0 15px var(--glow-pink); }

.pad-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
  max-width:700px; margin:0 auto;
}
.pad-glam {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,215,0,.2);
  padding:1.75rem 1rem;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.pad-glam:hover { transform:translateY(-5px); border-color:var(--gold); box-shadow:0 0 24px var(--glow-pink); }
.pad-glam i { font-size:1.8rem; color:var(--fuchsia); margin-bottom:.25rem; }
.pad-cat { font-family:'Cinzel Decorative',serif; font-size:.55rem; letter-spacing:3px; text-transform:uppercase; color:var(--gold); }
.pad-name { font-family:'Great Vibes',cursive; font-size:1.05rem; color:var(--text-on-dark); }

/* === EVENT CARD GLAM ======================================= */
.event-glam { background:linear-gradient(135deg,var(--dark) 0%,var(--dark-mid) 100%); padding:6rem 0; }
.event-glam--alt { background:linear-gradient(135deg,var(--dark-mid) 0%,var(--magenta) 80%,var(--dark) 100%); }

.event-card-glam {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,215,0,.3);
  padding:3.5rem 3rem;
  text-align:center;
  max-width:640px; margin:0 auto;
  box-shadow:0 0 40px rgba(233,30,140,.12), 0 8px 40px rgba(0,0,0,.4);
  position:relative; overflow:hidden;
}
.event-card-glam::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(to right,var(--fuchsia),var(--gold),var(--fuchsia));
  box-shadow:0 0 10px var(--glow-gold);
}
.ecg-icon { font-size:3rem; color:var(--fuchsia); margin-bottom:1rem; animation:crownPulse 3s infinite; }
.ecg-icon--stars { color:var(--gold); }
.ecg-eyebrow { font-size:.65rem; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:.35rem; }
.ecg-heading { font-family:'Cinzel Decorative',serif; font-size:clamp(1.6rem,4vw,2.5rem); color:#fff; text-shadow:0 0 15px var(--glow-pink); }

.ecg-list { list-style:none; padding:0; margin:1.75rem 0; }
.ecg-list li {
  display:flex; align-items:flex-start; gap:1rem;
  padding:.8rem 0; border-bottom:1px solid rgba(255,215,0,.15);
  font-size:.92rem; color:var(--text-on-dark); text-align:left;
}
.ecg-list li:last-child { border-bottom:none; }
.ecg-list li i { color:var(--fuchsia); font-size:1rem; flex-shrink:0; margin-top:3px; min-width:18px; }

/* === BANNER GLAM =========================================== */
.banner-glam {
  min-height:50vh; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--magenta) 0%,var(--fuchsia-deep) 40%,var(--dark) 100%);
  background-size:200% 200%;
  animation:gradShift 6s ease-in-out infinite;
}
@keyframes gradShift {
  0%,100%{background-position:0% 50%;}
  50%    {background-position:100% 50%;}
}
.banner-glitter { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.banner-body { position:relative; z-index:2; padding:2rem; }
.banner-crown { font-size:3rem; color:var(--gold); display:block; margin-bottom:1rem; animation:crownPulse 2.5s infinite; }
.banner-quote {
  font-family:'Great Vibes',cursive;
  font-size:clamp(2rem,7vw,4.5rem); color:#fff;
  text-shadow:0 0 30px var(--glow-pink), 0 2px 10px rgba(0,0,0,.4);
  line-height:1.35; margin-bottom:1rem;
}
.banner-sub { font-size:.7rem; letter-spacing:5px; text-transform:uppercase; color:var(--gold); }

/* === ITINERARY ============================================= */
.iti-section { background:linear-gradient(180deg,var(--dark-mid) 0%,var(--dark) 100%); padding:6rem 0; }
.iti-scroll { overflow-x:auto; padding:2rem 1.5rem 2.5rem; scrollbar-width:thin; scrollbar-color:var(--fuchsia) transparent; margin-top:2rem; }
.iti-scroll::-webkit-scrollbar { height:4px; }
.iti-scroll::-webkit-scrollbar-thumb { background:var(--fuchsia); border-radius:2px; }
.iti-track { display:flex; align-items:center; gap:0; width:max-content; padding:0 2rem; }

.iti-glam {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,215,0,.22);
  border-radius:8px;
  padding:2.25rem 1.75rem;
  width:180px; flex-shrink:0; text-align:center;
  position:relative; overflow:hidden;
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.iti-glam:hover { transform:translateY(-8px); border-color:var(--gold); box-shadow:0 0 30px var(--glow-pink); }
.iti-glam--featured {
  background:linear-gradient(145deg,var(--fuchsia-deep),var(--magenta));
  border-color:var(--gold);
  box-shadow:0 0 24px var(--glow-pink);
}
.iti-glam--fiesta { background:linear-gradient(145deg,var(--magenta),var(--fuchsia-deep)); border-color:var(--gold); }

.iti-num {
  position:absolute; top:.5rem; right:.75rem;
  font-family:'Cinzel Decorative',serif; font-size:2.5rem;
  color:rgba(255,215,0,.15); line-height:1;
}
.iti-icon-wrap { font-size:1.8rem; color:var(--fuchsia); margin-bottom:.75rem; }
.iti-glam--featured .iti-icon-wrap { color:var(--gold); }
.iti-time { display:block; font-size:.6rem; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; }
.iti-title { font-family:'Great Vibes',cursive; font-size:1.5rem; color:#fff; margin-bottom:.3rem; }
.iti-place { font-size:.75rem; color:var(--text-dim); }

.iti-connector {
  padding:0 1rem; flex-shrink:0;
  display:flex; align-items:center;
}
.iti-connector i { color:var(--gold); font-size:1.2rem; animation:crownPulse 2.5s infinite; }

@media(max-width:767px){
  .iti-scroll { overflow-x:auto; }
  .iti-track { flex-direction:column; gap:.75rem; padding:0; width:100%; }
  .iti-glam { width:100%; }
  .iti-connector { transform:rotate(90deg); margin:.25rem auto; }
  .pad-grid { grid-template-columns:repeat(2,1fr); }
}

/* === DRESSCODE ============================================= */
.dress-section { background:linear-gradient(135deg,var(--dark-mid) 0%,var(--dark) 100%); }
.dress-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,215,0,.3);
  padding:3.5rem 3rem; max-width:640px; margin:0 auto;
  box-shadow:0 0 30px rgba(233,30,140,.1);
}
.dress-icon { font-size:3rem; color:var(--fuchsia); display:block; margin-bottom:1.25rem; animation:crownPulse 3s infinite; }
.dress-type { font-family:'Cinzel Decorative',serif; font-size:clamp(1.2rem,3.5vw,1.8rem); color:var(--gold); margin-bottom:1rem; }
.dress-desc { font-size:.95rem; line-height:1.85; color:var(--text-on-dark); max-width:500px; margin:0 auto 1.75rem; opacity:.9; }
.dress-swatches { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem; }
.ds-wrap { display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.ds { width:46px; height:46px; border-radius:50%; display:inline-block; box-shadow:0 4px 12px rgba(0,0,0,.4); cursor:default; transition:transform .25s; }
.ds:hover { transform:scale(1.25); }
.ds--light { box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,215,0,.3); }
.ds-wrap small { font-size:.55rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); }
.dress-note { background:rgba(233,30,140,.08); border-left:3px solid var(--gold); 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(--fuchsia-deep) 0%,var(--dark-mid) 60%,var(--dark) 100%);
  padding:6rem 0;
}
.confirm-cards { display:flex; flex-direction:column; gap:1.5rem; margin-top:2rem; }
.confirm-glam {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,215,0,.3);
  padding:3rem 2.5rem; text-align:center;
  box-shadow:0 0 20px rgba(233,30,140,.1);
}
.cg-icon { font-size:3rem; color:var(--gold); display:block; margin-bottom:1rem; animation:crownPulse 2.5s infinite; }
.cg-title { font-family:'Cinzel Decorative',serif; font-size:clamp(1rem,3vw,1.5rem); color:#fff; margin-bottom:.5rem; }
.cg-text { font-size:.9rem; color:var(--text-on-dark); line-height:1.75; margin-bottom:1.5rem; opacity:.85; }

/* === FOOTER ================================================ */
.footer-glam {
  background:var(--dark); padding:5rem 0; overflow:hidden;
  border-top:1px solid rgba(255,215,0,.2);
}
.footer-glitter { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.footer-crown { font-size:3rem; color:var(--gold); display:block; margin-bottom:1.25rem; animation:crownPulse 2.5s infinite; }
.footer-name { font-family:'Great Vibes',cursive; font-size:clamp(3rem,9vw,5rem); color:#fff; text-shadow:0 0 30px var(--glow-pink); margin-bottom:.25rem; }
.footer-xv { font-family:'Cinzel Decorative',serif; font-size:1rem; color:var(--gold); letter-spacing:5px; margin-bottom:.35rem; }
.footer-date { font-size:.7rem; letter-spacing:4px; text-transform:uppercase; 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; height:1px; max-width:70px; background:linear-gradient(to right,transparent,rgba(255,215,0,.4),transparent); }
.footer-sep i { color:var(--gold); font-size:1rem; }
.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(--fuchsia); }