/* ============================================================
   BIRTHDAY GALA — styles.css
   Paleta: Negro profundo · Oro real · Champagne · Carbón
   Estilo: Art Deco · Luxury Gala · Black Tie · Elegante
   ============================================================ */

/* === VARIABLES ============================================= */
:root {
  --black:        #080808;
  --charcoal:     #1A1A1A;
  --dark-grey:    #252525;
  --mid-grey:     #333333;
  --gold:         #D4AF37;
  --gold-bright:  #F0D060;
  --gold-dark:    #A07C1A;
  --gold-pale:    #F5E8B0;
  --champagne:    #F5F0E8;
  --white:        #FFFFFF;
  --text-on-dark: #C8B878;
  --text-light:   #E8E0CC;
  --text-dim:     #666655;
  --border-gold:  rgba(212,175,55,.35);
  --glow-gold:    rgba(212,175,55,.4);
  --shadow:       rgba(0,0,0,.7);
  --plum-deep:    #2c112a;
  --rose-wine:    #6f2349;
  --rose-soft:    #e8b7c6;
  --petal:        #f6dbe3;
  --mist:         rgba(255,245,248,.72);
  --sparkle:      rgba(255,236,242,.95);
}

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

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

/* === SHIMMER GOLD TEXT ===================================== */
@keyframes goldShimmer {
  0%   { background-position: -300% center; }
  100% { background-position:  300% center; }
}
.shimmer-gold {
  background: linear-gradient(90deg,
    var(--gold-dark) 0%, var(--gold) 30%,
    var(--gold-bright) 50%, var(--gold) 70%, var(--gold-dark) 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 5s linear infinite;
}

/* === ORNAMENT PULSE ======================================== */
@keyframes gemPulse {
  0%,100% { text-shadow:0 0 6px var(--glow-gold); transform:scale(1); }
  50%     { text-shadow:0 0 20px var(--gold),0 0 40px var(--glow-gold); transform:scale(1.12); }
}

/* ============================================================
   INTRO SCREEN — Blur Dissolve
   ============================================================ */
.intro-screen {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(circle at 20% 20%, rgba(232,183,198,.18), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.11), transparent 18%),
    radial-gradient(circle at 50% 82%, rgba(212,175,55,.14), transparent 24%),
    linear-gradient(145deg, #150913 0%, #281024 35%, #4d1838 68%, #1d0c16 100%);
  display: flex; align-items: center; justify-content: center;
  transition: filter .9s ease, opacity .9s ease, transform .9s ease;
  will-change: filter, opacity;
  overflow: hidden;
}
.intro-screen.is-closing {
  filter: blur(18px);
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

/* Art Deco rings de fondo */
.intro-deco { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.deco-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(212,175,55,.15);
  animation: ringRotate 30s linear infinite;
}
.deco-ring--outer { width:90vmin; height:90vmin; }
.deco-ring--inner { width:65vmin; height:65vmin; border-width:2px; border-color:rgba(212,175,55,.08); animation-direction:reverse; animation-duration:20s; }
@keyframes ringRotate { to { transform:rotate(360deg); } }

.deco-rays { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.deco-rays span {
  position: absolute;
  width: 1px; height: 42vmin;
  background: linear-gradient(to bottom, transparent, rgba(212,175,55,.06), transparent);
  transform-origin: center center;
}
.deco-rays span:nth-child(1)  { transform: rotate(0deg); }
.deco-rays span:nth-child(2)  { transform: rotate(22.5deg); }
.deco-rays span:nth-child(3)  { transform: rotate(45deg); }
.deco-rays span:nth-child(4)  { transform: rotate(67.5deg); }
.deco-rays span:nth-child(5)  { transform: rotate(90deg); }
.deco-rays span:nth-child(6)  { transform: rotate(112.5deg); }
.deco-rays span:nth-child(7)  { transform: rotate(135deg); }
.deco-rays span:nth-child(8)  { transform: rotate(157.5deg); }

/* Cuatro esquinas decorativas */
.corner {
  position: absolute;
  width: clamp(40px, 8vmin, 70px);
  height: clamp(40px, 8vmin, 70px);
  border-color: var(--gold);
  border-style: solid;
  border-width: 0;
  opacity: .7;
}
.corner--tl { top:1.5rem; left:1.5rem;  border-top-width:2px; border-left-width:2px; }
.corner--tr { top:1.5rem; right:1.5rem; border-top-width:2px; border-right-width:2px; }
.corner--bl { bottom:1.5rem; left:1.5rem;  border-bottom-width:2px; border-left-width:2px; }
.corner--br { bottom:1.5rem; right:1.5rem; border-bottom-width:2px; border-right-width:2px; }

/* Contenido de la intro */
.intro-body {
  position: relative; z-index: 2;
  text-align: center; padding: 2rem 1.5rem;
  max-width: 520px;
  animation: introFadeIn 1.2s ease .3s both;
}
@keyframes introFadeIn { from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);} }

.intro-overline {
  font-family: 'Cinzel', serif;
  font-size: clamp(.55rem, 1.5vw, .72rem);
  letter-spacing: 6px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 1.5rem;
}

.intro-age-badge {
  display: inline-flex; align-items: baseline; gap: .5rem;
  border: 1px solid var(--border-gold);
  padding: .6rem 2rem;
  margin-bottom: 1.5rem;
  position: relative;
}
.intro-age-badge::before, .intro-age-badge::after {
  content:''; position:absolute;
  width:8px; height:8px;
  background:var(--gold); transform:rotate(45deg);
  top:50%; margin-top:-4px;
}
.intro-age-badge::before { left:-5px; }
.intro-age-badge::after  { right:-5px; }

.iab-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 300; line-height: 1;
  color: var(--gold);
}
.iab-word {
  font-family: 'Cinzel', serif;
  font-size: clamp(.6rem, 1.5vw, .75rem);
  letter-spacing: 5px;
  color: var(--gold-pale);
}

.intro-rule {
  display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0;
}
.intro-rule span { display:block; height:1px; width:60px; background:linear-gradient(to right,transparent,var(--gold),transparent); }
.intro-rule i { color:var(--gold); font-size:.9rem; animation:gemPulse 2.5s infinite; }

.intro-name {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(4rem, 14vw, 7rem);
  font-weight: 400; color: var(--white); line-height: 1.05;
  text-shadow: 0 0 40px rgba(212,175,55,.2), 0 2px 8px rgba(0,0,0,.6);
  margin-bottom: 0;
}

.intro-date-line, .intro-city-line {
  font-family: 'Cinzel', serif;
  font-size: clamp(.6rem, 1.5vw, .75rem);
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: .35rem;
}
.intro-city-line { color: var(--text-on-dark); margin-bottom: 2rem; }
.intro-date-line i, .intro-city-line i { color: var(--gold); margin-right: .5rem; }

/* Botón intro */
.intro-btn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: clamp(.6rem, 1.5vw, .72rem);
  letter-spacing: 4px; text-transform: uppercase;
  padding: 0; cursor: pointer;
  overflow: hidden;
  transition: color .35s ease;
}
.ib-inner {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 2.5rem;
  position: relative; overflow: hidden;
}
.ib-inner::before {
  content: ''; position: absolute; inset: 0;
  background: var(--gold); transform: translateX(-101%);
  transition: transform .4s cubic-bezier(.76,0,.24,1); z-index: 0;
}
.ib-text, .intro-btn i { position: relative; z-index: 1; }
.intro-btn:hover { color: var(--black); }
.intro-btn:hover .ib-inner::before { transform: translateX(0); }
.intro-btn:active { transform: scale(.98); }

/* Spark burst */
.spark {
  position: fixed; z-index: 9998; pointer-events: none;
  font-size: var(--fs, 12px); color: var(--gold);
  animation: sparkFly var(--fd, .8s) var(--del, 0s) ease-out forwards;
}
@keyframes sparkFly {
  0%   { transform:translate(0,0) rotate(0deg) scale(1); opacity:1; }
  100% { transform:translate(var(--dx),var(--dy)) rotate(var(--rot,180deg)) scale(.1); opacity:0; }
}

/* ============================================================
   INVITATION WRAPPER
   ============================================================ */
.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:2px; width:0%;
  background:linear-gradient(to right,var(--gold-dark),var(--gold),var(--gold-bright));
  z-index:999; box-shadow:0 0 6px var(--glow-gold);
  transition:width .1s linear;
}

/* ============================================================
   NAVBAR
   ============================================================ */
#mainNav {
  background:transparent; border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s,padding .4s; padding:1.4rem 0; z-index:500;
}
#mainNav.scrolled {
  background:rgba(8,8,8,.95); border-bottom-color:var(--border-gold);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:.8rem 0;
}
#mainNav .navbar-brand {
  font-family:'Cinzel',serif; font-size:.85rem; letter-spacing:5px;
  color:var(--gold); text-decoration:none;
}
#mainNav .nav-link {
  font-family:'Cinzel',serif; font-size:.65rem; letter-spacing:3px; text-transform:uppercase;
  color:rgba(255,255,255,.7); padding:.4rem 1rem; transition:color .3s;
}
#mainNav .nav-link:hover { color:var(--gold); }
.nav-gold-border { border:1px solid var(--border-gold)!important; color:var(--gold)!important; padding:.4rem 1.25rem!important; }
.nav-gold-border:hover { background:var(--gold); color:var(--black)!important; }
#mainNav .navbar-toggler { border-color:var(--border-gold); }
#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%28212,175,55,0.85%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media(max-width:991px){
  #navMenu{background:rgba(8,8,8,.98);border:1px solid var(--border-gold);padding:1rem 1.5rem;margin-top:.5rem;}
  #navMenu .nav-link{color:var(--text-light)!important;border-bottom:1px solid rgba(212,175,55,.15);padding:.65rem 0;}
  #navMenu .nav-link:last-child{border-bottom:none;}
}

/* ============================================================
   HERO — tipográfico con marco Art Deco
   ============================================================ */
.hero-section {
  min-height:100vh; position:relative; overflow:hidden;
  /* IMAGEN: reemplaza URL en css → .hero-section { background-image: url('TU_FOTO.jpg') } */
  background:
    radial-gradient(circle at 16% 18%, rgba(246,219,227,.24), transparent 18%),
    radial-gradient(circle at 84% 16%, rgba(255,255,255,.22), transparent 14%),
    radial-gradient(circle at 50% 28%, rgba(212,175,55,.14), transparent 20%),
    radial-gradient(circle at 50% 72%, rgba(232,183,198,.12), transparent 28%),
    linear-gradient(140deg, #150913 0%, #31122e 34%, #612245 66%, #24101d 100%);
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,7,16,.2) 0%, rgba(18,8,18,.72) 100%);
}

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

.hero-section::before {
  width:62vmax;
  height:62vmax;
  left:-16vmax;
  bottom:-20vmax;
  border-radius:50%;
  background:radial-gradient(circle, rgba(246,219,227,.18) 0%, rgba(246,219,227,.05) 34%, transparent 68%);
  animation:heroAuraLeft 14s ease-in-out infinite alternate;
}

.hero-section::after {
  width:48vmax;
  height:48vmax;
  right:-10vmax;
  top:-16vmax;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.14) 0%, rgba(212,175,55,.04) 36%, transparent 70%);
  animation:heroAuraRight 16s ease-in-out infinite alternate;
}

.hero-sparkle,
.hero-bloom {
  position:absolute;
  pointer-events:none;
  z-index:1;
}

.hero-sparkle {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--sparkle);
  box-shadow:0 0 0 8px rgba(255,255,255,.03), 0 0 22px rgba(246,219,227,.32), 0 0 42px rgba(212,175,55,.2);
  animation:heroTwinkle 6s ease-in-out infinite;
}

.hero-sparkle::before,
.hero-sparkle::after {
  content:'';
  position:absolute;
  inset:50%;
  width:1px;
  height:54px;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.65), transparent);
  transform:translate(-50%, -50%);
}

.hero-sparkle::after {
  transform:translate(-50%, -50%) rotate(90deg);
}

.hero-sparkle--one { top:18%; left:18%; animation-delay:.2s; }
.hero-sparkle--two { top:24%; right:17%; animation-delay:1.6s; }
.hero-sparkle--three { bottom:18%; right:24%; animation-delay:3.2s; }

.hero-bloom {
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(246,219,227,.18) 0%, rgba(246,219,227,.08) 34%, transparent 68%);
  filter:blur(2px);
  animation:heroBloom 12s ease-in-out infinite alternate;
}

.hero-bloom--left { left:-40px; top:16%; }
.hero-bloom--right { right:-70px; bottom:10%; animation-delay:1.4s; }

@keyframes heroAuraLeft {
  from { transform:translate3d(0, 0, 0) scale(1); }
  to { transform:translate3d(28px, -16px, 0) scale(1.08); }
}

@keyframes heroAuraRight {
  from { transform:translate3d(0, 0, 0) scale(1); }
  to { transform:translate3d(-22px, 20px, 0) scale(1.1); }
}

@keyframes heroTwinkle {
  0%, 100% { opacity:.4; transform:scale(.85); }
  45% { opacity:1; transform:scale(1.15); }
  70% { opacity:.72; transform:scale(.95); }
}

@keyframes heroBloom {
  from { transform:translate3d(0, 0, 0) scale(.96); opacity:.8; }
  to { transform:translate3d(14px, -18px, 0) scale(1.08); opacity:1; }
}

.hero-frame-wrap { position:relative; z-index:2; padding:2rem; }

/* Marco Art Deco */
.hero-frame {
  position:absolute; inset:clamp(1rem,3vmin,2rem); pointer-events:none;
}
.frame-corner {
  position:absolute; width:clamp(30px,5vmin,50px); height:clamp(30px,5vmin,50px);
  border-color:rgba(246,219,227,.66); border-style:solid; border-width:0;
}
.frame-corner--tl{top:0;left:0;border-top-width:1px;border-left-width:1px;}
.frame-corner--tr{top:0;right:0;border-top-width:1px;border-right-width:1px;}
.frame-corner--bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px;}
.frame-corner--br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px;}
.frame-hs { position:absolute; left:calc(clamp(30px,5vmin,50px) + 8px); right:calc(clamp(30px,5vmin,50px) + 8px); height:1px; top:0; background:linear-gradient(to right,transparent,rgba(246,219,227,.5),transparent); }
.frame-hs--b { top:auto; bottom:0; }
.frame-vs { position:absolute; top:calc(clamp(30px,5vmin,50px) + 8px); bottom:calc(clamp(30px,5vmin,50px) + 8px); width:1px; left:0; background:linear-gradient(to bottom,transparent,rgba(246,219,227,.5),transparent); }
.frame-vs--r { left:auto; right:0; }

/* Contenido del hero */
.hero-content {
  max-width:820px;
  padding:clamp(3.2rem,8vmin,5.6rem) clamp(1.4rem,5vmin,3.6rem);
  border:1px solid rgba(246,219,227,.18);
  border-radius:34px;
  background:linear-gradient(180deg, rgba(25,11,23,.46) 0%, rgba(21,10,20,.7) 100%);
  box-shadow:0 24px 70px rgba(7,2,9,.44), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(212,175,55,.08);
  backdrop-filter:blur(12px);
}
@keyframes heroIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.hero-entrance { animation:heroIn 1.3s ease .5s both; }

.hero-overline {
  font-family:'Cinzel',serif; font-size:clamp(.55rem,1.5vw,.72rem);
  letter-spacing:7px; text-transform:uppercase; color:rgba(246,219,227,.84); margin-bottom:1.2rem;
}

.hero-age-block {
  display:inline-flex; align-items:center; gap:1.25rem;
  background:linear-gradient(135deg, rgba(246,219,227,.14) 0%, rgba(212,175,55,.08) 100%);
  border:1px solid rgba(246,219,227,.22);
  border-radius:999px;
  padding:.85rem 2rem; margin-bottom:1.35rem;
  box-shadow:0 16px 34px rgba(13,4,11,.24);
}
.hab-num {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(3.5rem,10vw,6rem); font-weight:300;
  color:var(--petal); line-height:1;
  text-shadow:0 0 22px rgba(232,183,198,.14);
}
.hab-side { display:flex; flex-direction:column; align-items:flex-start; }
.hab-text {
  font-family:'Cinzel',serif; font-size:clamp(.55rem,1.5vw,.7rem);
  letter-spacing:5px; color:rgba(246,219,227,.88);
}

.hero-rule {
  width:80px; height:1px; margin:.9rem auto;
  background:linear-gradient(to right,transparent,rgba(246,219,227,.84),transparent);
}
.hero-name {
  font-family:'Great Vibes',cursive; font-size:clamp(4rem,14vw,8rem);
  font-weight:400; color:var(--white); line-height:1;
  text-shadow:0 0 46px rgba(232,183,198,.18),0 12px 36px rgba(0,0,0,.32);
  margin-bottom:.25rem;
}
.hero-tagline {
  font-family:'Cinzel',serif; font-size:clamp(.6rem,1.8vw,.8rem);
  letter-spacing:7px; text-transform:uppercase; color:rgba(255,242,247,.82); margin-bottom:1rem;
}
.hero-date {
  font-family:'Cinzel',serif; font-size:clamp(.65rem,2vw,.9rem);
  letter-spacing:4px; text-transform:uppercase; color:rgba(255,242,247,.78);
  margin-bottom:.55rem;
}
.hero-city { font-size:.88rem; letter-spacing:2px; color:rgba(255,243,245,.66); margin-bottom:2rem; }
.hero-city i { color:var(--gold-bright); }

.hero-cta {
  display:inline-flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:'Cinzel',serif; font-size:clamp(.6rem,1.5vw,.72rem);
  letter-spacing:4px; text-transform:uppercase;
  color:var(--petal); text-decoration:none; transition:color .3s, transform .3s;
}
.hero-cta:hover { color:var(--white); transform:translateY(-2px); }
.hcta-line { display:block; width:32px; height:1px; background:linear-gradient(to right, transparent, var(--petal), transparent); transition:width .3s; }
.hero-cta:hover .hcta-line { width:56px; }

.hero-scroll-cue { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2; text-align:center; }
.hsc-line { display:block; width:1px; height:56px; background:linear-gradient(to bottom,var(--petal),transparent); margin:0 auto .5rem; animation:scrollDrop 1.8s ease-in-out infinite; }
@keyframes scrollDrop{0%{opacity:0;transform:scaleY(0);transform-origin:top;}60%{opacity:1;transform:scaleY(1);}100%{opacity:0;transform:translateY(20px);}}
.hsc-icon { color:var(--petal); font-size:.9rem; animation:bounce .8s ease-in-out infinite; }
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

@media(max-width:767px){
  .hero-frame-wrap { width:100%; padding:1.2rem; }
  .hero-content {
    border-radius:26px;
    padding:2.8rem 1.2rem 3.4rem;
  }
  .hero-age-block {
    gap:.8rem;
    padding:.78rem 1.3rem;
  }
  .hero-sparkle--one { top:14%; left:8%; }
  .hero-sparkle--two { top:19%; right:10%; }
  .hero-sparkle--three { bottom:15%; right:14%; }
}

/* ============================================================
   SHARED HELPERS
   ============================================================ */
section { padding:7rem 0; position:relative; }

.section-eyebrow {
  font-family:'Cinzel',serif; font-size:.65rem; letter-spacing:5px; text-transform:uppercase;
  color:var(--gold); margin-bottom:.5rem;
}
.section-heading {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(2rem,5vw,3.4rem); color:var(--text-light);
  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 — FLIP CLOCK STYLE
   ============================================================ */
.cd-section { background:var(--charcoal); padding:7rem 0; }

.flip-grid {
  display:flex; align-items:center; justify-content:center;
  gap:.5rem; flex-wrap:wrap; margin:2.5rem 0;
}

.flip-unit { display:flex; flex-direction:column; align-items:center; gap:.75rem; }

.flip-card {
  width:clamp(90px,18vw,140px);
  height:clamp(110px,16vw,150px);
  background:var(--black);
  border:1px solid var(--border-gold);
  box-shadow:0 0 20px rgba(212,175,55,.08),inset 0 2px 0 rgba(212,175,55,.1);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}

.flip-top, .flip-bot {
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-weight:600; font-style:normal;
  font-size:clamp(2.5rem,7vw,5rem);
  color:var(--gold-bright); line-height:1;
  padding:.4em .25em;
}
.flip-top { width:100%; height:100%; border-bottom:none; padding:.25em; }
.flip-bot { display:none; }

.flip-mid {
  position:absolute; top:50%; left:0; right:0; height:1px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  transform:translateY(-50%);
  box-shadow:0 0 6px var(--glow-gold);
}

/* Animación de volteo */
.flip-top.is-flipping { animation:flipDown .3s ease; }
.flip-bot.is-flipping { animation:flipUp   .3s ease; }
@keyframes flipDown { 0%{transform:rotateX(0);}50%{transform:rotateX(-90deg);}100%{transform:rotateX(0);} }
@keyframes flipUp   { 0%{transform:rotateX(0);}50%{transform:rotateX(90deg);} 100%{transform:rotateX(0);} }

.flip-label {
  font-family:'Cinzel',serif; font-size:.55rem; letter-spacing:4px; text-transform:uppercase;
  color:var(--text-dim);
}

.flip-sep span {
  display:block; font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,5vw,3.5rem);
  color:var(--gold); line-height:1; opacity:.7;
  animation:sepBlink 1s step-end infinite;
}
@keyframes sepBlink { 50%{opacity:.15;} }

.cd-tagline {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.2rem,3vw,1.7rem); color:var(--text-on-dark); opacity:.8; margin-top:1rem;
}

/* ============================================================
   ABOUT SECTION — Side by side
   ============================================================ */
.about-section { background:var(--black); padding:0; overflow:hidden; }

.about-photo-wrap { position:relative; height:100%; min-height:420px; }
.about-photo { width:100%; height:100%; object-fit:cover; object-position:top; min-height:420px; display:block; }
.about-photo-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to right,transparent 60%,var(--black) 100%);
}
.about-photo-tag {
  position:absolute; bottom:2rem; left:2rem;
  background:rgba(8,8,8,.85); border:1px solid var(--border-gold);
  padding:.75rem 1.5rem; display:flex; align-items:baseline; gap:.5rem;
  box-shadow:0 0 16px var(--glow-gold);
}
.apt-num { font-family:'Cormorant Garamond',serif; font-size:3rem; color:var(--gold); line-height:1; }
.apt-word { font-family:'Cinzel',serif; font-size:.65rem; letter-spacing:4px; color:var(--gold-pale); }

.about-text-wrap { padding:5rem 3.5rem 5rem 4rem; }
.about-body { font-size:1rem; line-height:1.85; color:var(--text-light); margin:1.5rem 0; opacity:.9; }
.about-quote {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1.25rem; color:var(--text-on-dark);
  border-left:2px solid var(--gold); padding-left:1.5rem;
  margin:0 0 2rem; background:none;
}
.about-stats { display:flex; gap:0; }
.about-stat { text-align:center; flex:1; }
.as-num { display:block; font-family:'Cormorant Garamond',serif; font-size:2.5rem; color:var(--gold); line-height:1; }
.as-label { font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:3px; text-transform:uppercase; color:var(--text-dim); }
.about-stat-sep { width:1px; background:var(--border-gold); margin:0 1.5rem; }

@media(max-width:991px){
  .about-text-wrap { padding:3rem 2rem; }
  .about-photo-overlay { background:linear-gradient(to bottom,transparent 60%,var(--black) 100%); }
}

/* ============================================================
   EVENT SECTION — Two-column grid
   ============================================================ */
.event-section { background:var(--charcoal); padding:7rem 0; }

.event-grid {
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:0;
}

.event-gala-card {
  background:rgba(0,0,0,.4); border:1px solid var(--border-gold);
  padding:3.5rem 3rem; text-align:center; position:relative;
  transition:box-shadow .3s;
}
.event-gala-card:hover { box-shadow:0 0 40px rgba(212,175,55,.08); }
.event-gala-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(to right,transparent,var(--gold),transparent); box-shadow:0 0 8px var(--glow-gold); }

.egc-num {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:5rem; color:rgba(212,175,55,.08); line-height:1;
  position:absolute; top:.5rem; right:1rem;
}
.egc-icon { font-size:2.5rem; color:var(--gold); margin-bottom:1rem; animation:gemPulse 3s infinite; }
.egc-eyebrow { font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:.35rem; }
.egc-heading { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(1.8rem,4vw,2.5rem); color:var(--text-light); }
.egc-rule { width:40px; height:1px; background:var(--gold); margin:1rem auto; box-shadow:0 0 6px var(--glow-gold); }

.egc-list { list-style:none; padding:0; margin:1.5rem 0; text-align:left; }
.egc-list li { display:flex; align-items:flex-start; gap:1rem; padding:.8rem 0; border-bottom:1px solid rgba(212,175,55,.1); font-size:.9rem; color:var(--text-light); line-height:1.6; }
.egc-list li:last-child { border-bottom:none; }
.egc-list li i { color:var(--gold); font-size:.95rem; flex-shrink:0; margin-top:3px; min-width:17px; }

.event-divider {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.75rem; padding:0 1.5rem;
  border-left:1px solid var(--border-gold); border-right:1px solid var(--border-gold);
}
.ed-line { flex:1; width:1px; background:linear-gradient(to bottom,transparent,var(--gold),transparent); min-height:40px; }
.ed-gem { color:var(--gold); font-size:1.2rem; animation:gemPulse 2.5s infinite; }

@media(max-width:767px){
  .event-grid { grid-template-columns:1fr; }
  .event-divider { flex-direction:row; border:none; border-top:1px solid var(--border-gold); border-bottom:1px solid var(--border-gold); padding:1.25rem 0; }
  .ed-line { height:1px; width:auto; flex:1; min-height:auto; background:linear-gradient(to right,transparent,var(--gold),transparent); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-gala {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--gold); border:none;
  color:var(--black); font-family:'Cinzel',serif;
  font-size:.62rem; letter-spacing:3px; text-transform:uppercase;
  padding:.85rem 2.5rem; font-weight:600;
  text-decoration:none; transition:all .3s;
}
.btn-gala:hover { background:var(--gold-bright); color:var(--black); transform:translateY(-3px); box-shadow:0 8px 24px var(--glow-gold); }

.btn-wa {
  background:transparent; border:1px solid #25D366; color:#25D366 !important;
}
.btn-wa:hover { background:#25D366; color:var(--black)!important; box-shadow:0 8px 24px rgba(37,211,102,.3); }

.btn-gala-outline {
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; border:1px solid var(--gold);
  color:var(--gold); font-family:'Cinzel',serif;
  font-size:.62rem; letter-spacing:3px; text-transform:uppercase;
  padding:.85rem 2.5rem; text-decoration:none; transition:all .3s;
}
.btn-gala-outline:hover { background:var(--gold); color:var(--black); transform:translateY(-3px); box-shadow:0 8px 24px var(--glow-gold); }

/* ============================================================
   CALENDAR
   ============================================================ */
.cal-section { background:var(--black); padding:6rem 0; }
.cal-icon { font-size:3rem; color:var(--gold); display:block; margin-bottom:1.25rem; animation:gemPulse 3s infinite; }
.cal-sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.1rem; color:var(--text-dim); }

/* ============================================================
   BANNER GALA
   ============================================================ */
.banner-gala {
  min-height:48vh; position:relative; overflow:hidden;
  background:var(--charcoal);
}
.banner-pattern {
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg,rgba(212,175,55,.04) 0px,rgba(212,175,55,.04) 1px,transparent 1px,transparent 16px),
    repeating-linear-gradient(-45deg,rgba(212,175,55,.04) 0px,rgba(212,175,55,.04) 1px,transparent 1px,transparent 16px);
}
.banner-overlay-gala { position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(8,8,8,.2) 0%,rgba(8,8,8,.7) 100%); }
.banner-content { position:relative; z-index:2; padding:2rem; }
.banner-ornament { display:flex; align-items:center; justify-content:center; gap:1rem; margin:1rem 0; }
.banner-ornament span { display:block; width:60px; height:1px; background:linear-gradient(to right,transparent,var(--gold)); }
.banner-ornament span:last-child { background:linear-gradient(to left,transparent,var(--gold)); }
.banner-ornament i { color:var(--gold); font-size:.9rem; animation:gemPulse 2.5s infinite; }
.banner-badge { font-family:'Cinzel',serif; font-size:clamp(.72rem,2vw,.95rem); letter-spacing:5px; text-transform:uppercase; color:var(--gold); line-height:1.6; margin-bottom:1rem; }
.banner-quote { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(1.5rem,4vw,2.8rem); color:var(--text-light); line-height:1.5; margin-bottom:.75rem; }
.banner-attr { font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:4px; text-transform:uppercase; color:var(--text-dim); }

/* ============================================================
   ITINERARY — Vertical timeline (zigzag alternado)
   ============================================================ */
.iti-section { background:var(--black); padding:7rem 0; }

.timeline-gala { position:relative; }
.timeline-gala::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:linear-gradient(to bottom,transparent,var(--gold) 10%,var(--gold) 90%,transparent); transform:translateX(-50%); }

.tg-item {
  display:grid; align-items:center; margin-bottom:3rem;
  position:relative;
}
.tg-item:last-child { margin-bottom:0; }

.tg-item--left  { grid-template-columns:1fr auto 1fr; }
.tg-item--right { grid-template-columns:1fr auto 1fr; }
.tg-item--left  .tg-content { grid-column:1; text-align:right; padding-right:2.5rem; }
.tg-item--left  .tg-dot     { grid-column:2; }
.tg-item--left  > .tg-empty { grid-column:3; }
.tg-item--right .tg-empty   { grid-column:1; }
.tg-item--right .tg-dot     { grid-column:2; }
.tg-item--right .tg-content { grid-column:3; text-align:left; padding-left:2.5rem; }

.tg-dot {
  width:52px; height:52px;
  background:var(--charcoal); border:2px solid var(--gold);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:1.1rem; flex-shrink:0; z-index:1;
  box-shadow:0 0 0 4px var(--black), 0 0 16px var(--glow-gold);
  transition:background .3s, box-shadow .3s;
}
.tg-item:hover .tg-dot { background:var(--gold); color:var(--black); box-shadow:0 0 0 4px var(--black),0 0 28px var(--glow-gold); }
.tg-dot--featured { background:var(--gold); color:var(--black); box-shadow:0 0 0 4px var(--black),0 0 24px var(--glow-gold); }
.tg-dot--fiesta { background:var(--gold-dark); border-color:var(--gold-bright); }

.tg-time { display:block; font-family:'Cinzel',serif; font-size:.58rem; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:.35rem; }
.tg-title { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.5rem; color:var(--text-light); margin-bottom:.25rem; }
.tg-title--featured { color:var(--gold); }
.tg-place { font-size:.85rem; color:var(--text-dim); }

.tg-empty { /* placeholder para el lado vacío */ }

@media(max-width:767px){
  .timeline-gala::before { left:1.5rem; }
  .tg-item--left, .tg-item--right { grid-template-columns:auto 1fr; }
  .tg-item--left .tg-content { grid-column:2; text-align:left; padding-right:0; padding-left:1.5rem; }
  .tg-item--left .tg-dot     { grid-column:1; }
  .tg-item--right .tg-empty  { display:none; }
  .tg-item--right .tg-dot    { grid-column:1; }
  .tg-item--right .tg-content{ grid-column:2; text-align:left; padding-left:1.5rem; }
  .tg-item--left > .tg-empty { display:none; }
  .tg-dot { width:42px; height:42px; font-size:.9rem; }
}

/* ============================================================
   GALLERY — Featured grid (1 grande + 4 thumbs)
   ============================================================ */
.gal-section { background:var(--charcoal); padding:7rem 0; }

.gallery-featured {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

.gf-main, .gf-thumb {
  display:block; padding:0; border:1px solid transparent; background:none; cursor:pointer;
  position:relative; overflow:hidden; transition:border-color .3s, box-shadow .3s;
}
.gf-main:hover,  .gf-thumb:hover  { border-color:var(--gold); box-shadow:0 0 20px var(--glow-gold); }
.gf-main img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.gf-thumb img { width:100%; aspect-ratio:1; object-fit:cover; transition:transform .5s; }
.gf-main:hover img, .gf-thumb:hover img { transform:scale(1.06); }
.gf-main { aspect-ratio:2/3; }

.gf-hover {
  position:absolute; inset:0; background:rgba(8,8,8,.6);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:2rem;
  opacity:0; transition:opacity .3s; backdrop-filter:blur(2px);
}
.gf-main:hover .gf-hover,  .gf-main:focus .gf-hover,
.gf-thumb:hover .gf-hover, .gf-thumb:focus .gf-hover { opacity:1; }

.gf-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}

@media(max-width:767px){
  .gallery-featured { grid-template-columns:1fr; }
  .gf-main { aspect-ratio:4/3; }
}

/* Lightbox */
.lightbox-gala { display:none; position:fixed; inset:0; z-index:9990; align-items:center; justify-content:center; }
.lightbox-gala.open { display:flex; animation:lbIn .3s ease; }
@keyframes lbIn{from{opacity:0;}to{opacity:1;}}
.lb-bg { position:absolute; inset:0; background:rgba(4,4,4,.96); backdrop-filter:blur(10px); }
.lb-wrap { position:relative; z-index:2; max-width:88vw; max-height:84vh; display:flex; align-items:center; }
.lb-img { max-width:100%; max-height:84vh; object-fit:contain; box-shadow:0 0 40px rgba(212,175,55,.2); transition:opacity .25s; }
.lb-close { position:absolute; top:1.25rem; right:1.5rem; z-index:3; background:rgba(212,175,55,.1); border:1px solid var(--border-gold); color:var(--gold); font-size:1.3rem; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .25s; }
.lb-close:hover { background:var(--gold); color:var(--black); }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(212,175,55,.1); border:1px solid var(--border-gold); color:var(--gold); font-size:1.5rem; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .25s; }
.lb-nav:hover { background:var(--gold); color:var(--black); }
.lb-prev{left:1.5rem;} .lb-next{right:1.5rem;}
.lb-counter { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:3; font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:3px; color:var(--text-dim); }

/* ============================================================
   DRESSCODE — 2 columnas
   ============================================================ */
.dress-section { background:var(--black); padding:7rem 0; }
.dress-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.dress-type { font-family:'Cinzel',serif; font-size:1.8rem; color:var(--gold); letter-spacing:3px; margin:1.25rem 0 .75rem; }
.dress-body { font-size:1rem; line-height:1.85; color:var(--text-light); margin-bottom:1.5rem; opacity:.9; }
.dress-note { background:rgba(212,175,55,.06); border-left:2px solid var(--gold); padding:1rem 1.5rem; font-size:.85rem; color:var(--text-light); }
.dress-swatch-label { font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:4px; text-transform:uppercase; color:var(--text-dim); margin-bottom:1.5rem; }
.dress-swatches { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.dsw-wrap { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.dsw { width:52px; height:52px; border-radius:50%; display:block; box-shadow:0 4px 14px rgba(0,0,0,.6); cursor:default; transition:transform .25s,box-shadow .25s; }
.dsw:hover { transform:scale(1.2); box-shadow:0 6px 20px var(--glow-gold); }
.dsw--light { box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 0 0 1px rgba(212,175,55,.3); }
.dsw-wrap small { font-family:'Cinzel',serif; font-size:.55rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); }

@media(max-width:767px) { .dress-grid { grid-template-columns:1fr; gap:3rem; } }

/* ============================================================
   RSVP — Split layout
   ============================================================ */
.rsvp-section { background:var(--charcoal); padding:7rem 0; }
.rsvp-deadline { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.1rem; color:var(--text-dim); }
.rsvp-deadline strong { color:var(--gold); font-style:normal; }

.rsvp-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:0; }

.rsvp-card {
  background:rgba(0,0,0,.4); border:1px solid var(--border-gold);
  padding:3.5rem 2.5rem; text-align:center;
  transition:box-shadow .3s;
}
.rsvp-card:hover { box-shadow:0 0 30px rgba(212,175,55,.06); }
.rsvp-card-icon { font-size:2.5rem; color:var(--gold); display:block; margin-bottom:1.25rem; animation:gemPulse 3s infinite; }
.rsvp-card-title { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.8rem; color:var(--text-light); margin-bottom:.75rem; }
.rsvp-card-desc { font-size:.9rem; line-height:1.75; color:var(--text-dim); margin-bottom:2rem; }

.rsvp-div { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; padding:0 2rem; border-left:1px solid var(--border-gold); border-right:1px solid var(--border-gold); }
.rd-line { flex:1; width:1px; min-height:40px; background:linear-gradient(to bottom,transparent,var(--gold),transparent); }
.rd-gem { color:var(--gold); font-size:1.1rem; animation:gemPulse 2.5s infinite; }

@media(max-width:767px){
  .rsvp-grid { grid-template-columns:1fr; }
  .rsvp-div { flex-direction:row; border:none; border-top:1px solid var(--border-gold); border-bottom:1px solid var(--border-gold); padding:1.25rem 0; }
  .rd-line { height:1px; min-height:auto; background:linear-gradient(to right,transparent,var(--gold),transparent); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-gala { background:var(--black); padding:5rem 0; border-top:1px solid rgba(212,175,55,.15); }
.footer-ornament { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:2rem; }
.footer-ornament span { display:block; width:60px; height:1px; background:linear-gradient(to right,transparent,var(--gold)); }
.footer-ornament span:last-child { background:linear-gradient(to left,transparent,var(--gold)); }
.footer-ornament i { color:var(--gold); font-size:1rem; animation:gemPulse 2.5s infinite; }
.footer-name { font-family:'Great Vibes',cursive; font-size:clamp(3rem,9vw,5rem); color:var(--text-light); margin-bottom:.35rem; text-shadow:0 0 30px rgba(212,175,55,.12); }
.footer-age { font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:8px; color:var(--gold); margin-bottom:.4rem; }
.footer-date { font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:4px; color:var(--text-dim); margin-bottom:2rem; }
.footer-divider { display:flex; align-items:center; justify-content:center; gap:1rem; margin:1.5rem 0; }
.footer-divider span { display:block; flex:1; max-width:60px; height:1px; background:linear-gradient(to right,transparent,rgba(212,175,55,.4),transparent); }
.fd-diamond { color:var(--gold); font-size:.8rem; }
.footer-msg { font-size:.95rem; opacity:.6; line-height:1.9; margin-bottom:2rem; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.1rem; }
.footer-copy { font-size:.72rem; opacity:.3; }
.footer-copy .bi-heart-fill { color:var(--gold); }