/* ==========================================================
   Fernanda Regina · XV Años
   Tema: La Reina de Corazones (Alicia en el País de las Maravillas)
   ========================================================== */

:root{
  --black:      #080204;
  --black-2:    #12060a;
  --wine:       #2a0710;
  --wine-2:     #430a16;
  --red:        #b3001b;
  --red-br:     #d5142e;
  --rose:       #e8546b;
  --gold:       #d4af37;
  --gold-lt:    #f2dc9a;
  --gold-dk:    #8a6a15;
  --cream:      #f5ece0;
  --cream-dim:  rgba(245,236,224,.72);

  --f-title:  'Cinzel', serif;
  --f-body:   'Cormorant Garamond', Georgia, serif;
  --f-script: 'Italianno', 'Pinyon Script', cursive;

  --wrap: 620px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.6;
  overflow-x:hidden;
}
body.locked{ overflow:hidden; height:100%; }

img,svg{ display:block; max-width:100%; }

/* El atributo hidden debe ganarle a cualquier display de clase */
[hidden]{ display:none !important; }

/* Corazón dorado reutilizable (ornamentos) */
.ornament__heart,.divider__heart{
  display:block; width:16px; height:16px;
  background:linear-gradient(180deg,#f6e3a1,#d4af37 50%,#a67c1e);
  clip-path:polygon(50% 100%, 8% 42%, 8% 20%, 26% 4%, 50% 20%, 74% 4%, 92% 20%, 92% 42%);
}

/* ====================== PORTADA DE ENTRADA ====================== */
.entry{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 32%, #3a0b16 0%, #1a0409 45%, #080204 100%);
  text-align:center; overflow:hidden;
  transition:opacity .9s ease, visibility .9s;
}
.entry.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }

.entry__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 2px, transparent 2px 22px),
    radial-gradient(closest-side, transparent 40%, rgba(0,0,0,.85) 100%);
}
.entry__rose{
  position:absolute; width:190px; pointer-events:none;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.85));
}
.entry__rose--l{ bottom:-52px; left:-64px;  --r:14deg;  transform:rotate(14deg);  animation:sway 10s ease-in-out infinite; }
.entry__rose--r{ top:-46px;   right:-58px;  --r:-20deg; transform:rotate(-20deg); animation:sway 12s ease-in-out infinite reverse; }

.entry__inner{ position:relative; padding:24px; z-index:2; }

.entry__cat{
  width:min(240px,62vw); margin:0 auto 18px;
  filter:drop-shadow(0 0 36px rgba(90,220,220,.35)) drop-shadow(0 8px 20px rgba(0,0,0,.8));
  animation:catFloat 5.5s ease-in-out infinite;
}
.entry__kicker{
  margin:0 0 4px; font-family:var(--f-title);
  font-size:.62rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); opacity:.8;
}
.entry__name{
  margin:0; font-family:var(--f-script);
  font-size:clamp(3.2rem,16vw,5.6rem); line-height:.86; font-weight:400;
  color:var(--cream);
  text-shadow:0 0 32px rgba(213,20,46,.5), 0 2px 18px rgba(0,0,0,.8);
}
.entry__name span{
  display:block;
  background:linear-gradient(180deg,#f6e3a1,#d4af37 45%,#a67c1e 80%,#f0d68a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.entry__rule{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:14px auto 26px; max-width:220px;
}
.entry__rule span{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.entry__rule i{
  font-family:var(--f-title); font-style:normal;
  font-size:.95rem; letter-spacing:.28em; color:var(--gold);
}
.entry__btn{
  position:relative; cursor:pointer;
  padding:15px 40px; border:1px solid var(--gold);
  background:rgba(179,0,27,.16); color:var(--gold-lt);
  font-family:var(--f-title); font-size:.72rem;
  letter-spacing:.28em; text-transform:uppercase; border-radius:2px;
  transition:background .35s, color .35s, box-shadow .35s;
  -webkit-tap-highlight-color:transparent;
}
.entry__btn:hover,.entry__btn:focus-visible{
  background:var(--red); color:#fff; outline:none;
  box-shadow:0 0 34px rgba(213,20,46,.5);
}
.entry__btnRing{
  position:absolute; inset:-7px; border:1px solid rgba(212,175,55,.32);
  border-radius:3px; animation:ringPulse 2.6s ease-out infinite; pointer-events:none;
}
.entry__hint{
  margin:18px 0 0; font-size:.85rem; font-style:italic;
  color:rgba(245,236,224,.42); letter-spacing:.04em;
}

@keyframes ringPulse{
  0%{ transform:scale(1); opacity:.7; }
  70%{ transform:scale(1.12); opacity:0; }
  100%{ opacity:0; }
}
@keyframes catFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-12px) scale(1.02); }
}

/* ====================== FX GLOBALES ====================== */
.fx{ position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden; }

.fx__cards i{
  position:absolute; top:-14vh;
  width:26px; height:36px;
  opacity:0; will-change:transform; filter:blur(.4px);
  animation:cardFall linear infinite;
}
.fx__cards i::before{
  content:''; position:absolute; inset:0;
  background:#fdf6ec; border:1px solid rgba(212,175,55,.85); border-radius:3px;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.fx__cards i::after{
  content:'♥'; position:absolute; inset:0;
  display:grid; place-items:center; color:var(--red); font-size:15px; line-height:1;
}
.fx__cards i.s::after{ content:'♠'; color:#14090c; }
.fx__cards i.d::after{ content:'♦'; color:var(--red); }
.fx__cards i.c::after{ content:'♣'; color:#14090c; }

@keyframes cardFall{
  0%   { transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
  10%  { opacity:.26; }
  90%  { opacity:.2; }
  100% { transform:translate3d(var(--dx,40px),118vh,0) rotate(var(--rot,540deg)); opacity:0; }
}

.fx__dust i{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle,#fff6d8,rgba(212,175,55,0));
  animation:dustFloat linear infinite; will-change:transform;
}
@keyframes dustFloat{
  0%  { transform:translate3d(0,110vh,0) scale(.6); opacity:0; }
  15% { opacity:.9; }
  85% { opacity:.7; }
  100%{ transform:translate3d(var(--dx,20px),-12vh,0) scale(1.1); opacity:0; }
}

/* ====================== MÚSICA ====================== */
.music{
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(212,175,55,.6);
  background:rgba(20,4,9,.82); backdrop-filter:blur(8px);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.55);
  transition:transform .3s, border-color .3s, opacity .4s;
  opacity:0; pointer-events:none;
  -webkit-tap-highlight-color:transparent;
}
.music.is-on{ opacity:1; pointer-events:auto; }
.music:hover{ transform:scale(1.08); border-color:var(--gold); }
.music__bars{ display:flex; align-items:flex-end; gap:3px; height:17px; }
.music__bars i{ width:3px; background:var(--gold-lt); border-radius:2px; animation:bar .95s ease-in-out infinite; }
.music__bars i:nth-child(1){ height:8px;  animation-delay:0s;   }
.music__bars i:nth-child(2){ height:16px; animation-delay:.18s; }
.music__bars i:nth-child(3){ height:11px; animation-delay:.36s; }
.music__bars i:nth-child(4){ height:14px; animation-delay:.54s; }
@keyframes bar{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } }
.music.is-paused .music__bars i{ animation-play-state:paused; transform:scaleY(.42); opacity:.5; }

/* ====================== ESTRUCTURA ====================== */
.page{ position:relative; z-index:3; }

.wrap{
  width:min(var(--wrap), 88vw);
  margin-inline:auto; text-align:center;
  position:relative; z-index:3;
}

.sec{ position:relative; padding:82px 0; overflow:hidden; }
.sec--tint{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(67,10,22,.55), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}
.sec--tint::before,.sec--tint::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.35),transparent);
}
.sec--tint::before{ top:0; } .sec--tint::after{ bottom:0; }

/* ====================== TIPOGRAFÍA ====================== */
.h-script{
  margin:.15em 0 .18em;
  font-family:var(--f-script); font-weight:400;
  font-size:clamp(2.9rem,10.5vw,4.1rem); line-height:1;
  color:var(--cream);
  text-shadow:0 2px 26px rgba(213,20,46,.35);
}
.sub{ margin:0 auto 26px; max-width:34ch; font-size:1.02rem; color:var(--cream-dim); line-height:1.55; }
.lead{ margin:20px auto 0; max-width:38ch; font-size:1.04rem; color:var(--cream-dim); line-height:1.72; }
.quote{ margin:0 auto; max-width:26ch; font-size:1.16rem; font-style:italic; line-height:1.7; color:var(--gold-lt); }

.ico{ width:62px; height:62px; margin:0 auto 6px; }
.ico--sm{ width:44px; height:44px; margin-bottom:16px; opacity:.85; }

.ornament{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:8px; }
.ornament span{ width:54px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.ornament span:last-child{ background:linear-gradient(90deg,var(--gold),transparent); }

.divider{ margin:44px auto; width:100%; display:grid; place-items:center; position:relative; }
.divider::before{
  content:''; position:absolute; top:50%; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.4),transparent);
}
.divider__heart{ position:relative; width:22px; height:22px; }

/* ====================== IMÁGENES DECORATIVAS ====================== */
.rose,.bouquet,.guard,.cat{ position:absolute; pointer-events:none; z-index:1; }
.rose,.bouquet{ filter:drop-shadow(0 10px 26px rgba(0,0,0,.8)); }

@keyframes sway{
  0%,100%{ transform:rotate(var(--r,0deg)) translateY(0); }
  50%    { transform:rotate(var(--r,0deg)) translateY(-12px); }
}

/* Rosa suelta */
.rose--tl{ width:180px; top:-54px;  left:-70px;  --r:-14deg; transform:rotate(-14deg); animation:sway 9s  ease-in-out infinite; }
.rose--tr{ width:150px; top:-40px;  right:-62px; --r:18deg;  transform:rotate(18deg);  animation:sway 11s ease-in-out infinite reverse; }
.rose--br{ width:165px; bottom:5%;  right:-72px; --r:-22deg; transform:rotate(-22deg); animation:sway 12s ease-in-out infinite; }
.rose--c1{ width:74px;  top:26%;    left:5%;  opacity:.55; --r:28deg; transform:rotate(28deg); animation:sway 8s ease-in-out infinite reverse; }
.rose--count{ width:118px; top:22px;   right:-46px; --r:16deg;  transform:rotate(16deg);  animation:sway 13s ease-in-out infinite; }.rose--rsvp { width:126px; top:26px;   right:-52px; --r:-16deg; transform:rotate(-16deg); animation:sway 12s ease-in-out infinite reverse; }

/* Ramo vertical */
.bouquet--hero{ width:150px; bottom:0; left:-58px;  --r:6deg;   transform:rotate(6deg);   animation:sway 13s ease-in-out infinite; }
.bouquet--rsvp{ width:120px; bottom:0; left:-84px;  --r:-6deg;  transform:rotate(-6deg);  animation:sway 14s ease-in-out infinite reverse; }

/* Gato de Cheshire */
.cat--hero{
  left:0; right:0; margin-inline:auto; bottom:12%;
  width:min(280px,68vw); opacity:.34;
  filter:drop-shadow(0 0 40px rgba(90,220,220,.3));
  animation:catFloat 7s ease-in-out infinite;
}
.cat--closing{
  position:relative; margin:0 auto 24px;
  width:min(210px,56vw); opacity:.75;
  filter:drop-shadow(0 0 34px rgba(90,220,220,.32)) drop-shadow(0 8px 20px rgba(0,0,0,.7));
  animation:catFloat 6s ease-in-out infinite;
}

/* Soldados naipe (guardias) */
.sec--guards{ padding-bottom:96px; }
.guard{
  bottom:0; width:172px; opacity:.72;
  filter:saturate(1.1) contrast(1.05) drop-shadow(0 0 26px rgba(0,0,0,.9));
}
.guard--l{ left:-42px;  transform:rotate(4deg)  scaleX(-1); }
.guard--r{ right:-42px; transform:rotate(-4deg); }

/* ====================== HERO ====================== */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center;
  padding:90px 0 110px; overflow:hidden; isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(58% 42% at 50% 40%, rgba(179,0,27,.42) 0%, rgba(60,6,16,.35) 45%, transparent 72%),
    radial-gradient(90% 70% at 50% 100%, rgba(42,7,16,.9), transparent 70%),
    linear-gradient(180deg,#0d0206 0%, #1c0510 40%, #080204 100%);
}
.hero__arch{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(430px,84vw); aspect-ratio:1/1.22;
  border:1px solid rgba(212,175,55,.28);
  border-radius:50% 50% 8px 8px / 42% 42% 4px 4px;
  box-shadow:0 0 70px rgba(213,20,46,.16) inset, 0 0 40px rgba(0,0,0,.6);
}
.hero__arch::after{
  content:''; position:absolute; inset:9px;
  border:1px solid rgba(212,175,55,.14);
  border-radius:50% 50% 6px 6px / 42% 42% 3px 3px;
}
.hero__content{ position:relative; z-index:4; text-align:center; padding:0 18px; }
.hero__pre{
  margin:0 0 14px; font-family:var(--f-title);
  font-size:.58rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); opacity:.86;
}
.hero__name{
  margin:0; font-family:var(--f-script); font-weight:400;
  font-size:clamp(3.6rem,16vw,5.8rem); line-height:.95; color:#fff;
  text-shadow:0 0 40px rgba(213,20,46,.55), 0 3px 22px rgba(0,0,0,.85);
}
.hero__xv{ display:flex; align-items:center; justify-content:center; gap:16px; margin:10px auto 6px; max-width:270px; }
.hero__xvLine{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.hero__xvNum{
  font-family:var(--f-title); font-size:1.7rem; letter-spacing:.16em;
  background:linear-gradient(180deg,#f6e3a1,#d4af37 50%,#a67c1e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  margin:0; font-family:var(--f-title); font-size:.62rem;
  letter-spacing:.4em; text-transform:uppercase; color:var(--cream-dim);
}
.hero__date{
  margin:24px 0 0; font-family:var(--f-title); font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-lt);
}
.hero__scroll{
  position:absolute; bottom:28px; left:0; right:0; margin-inline:auto; z-index:5;
  width:30px; height:30px;
}
.hero__scroll span{
  position:absolute; left:50%; top:50%;
  width:15px; height:15px; margin:-11px 0 0 -8px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  animation:flechaAbajo 1.9s ease-in-out infinite;
}
@keyframes flechaAbajo{
  0%,100%{ transform:rotate(45deg) translate(0,0);   opacity:.45; }
  50%    { transform:rotate(45deg) translate(5px,5px); opacity:1; }
}

/* ====================== FRASE ====================== */
.sec--quote{ padding:70px 0 66px; background:linear-gradient(180deg, rgba(42,7,16,.5), transparent); }

/* Padres y padrinos */
.familia{ margin-top:44px; }
.familia__rol{
  margin:0 0 14px; font-family:var(--f-title); font-weight:600;
  font-size:clamp(1rem,4.4vw,1.24rem);
  letter-spacing:.24em; text-transform:uppercase;
  background:linear-gradient(180deg,#f8ecc0,#d4af37 48%,#a67c1e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 12px rgba(212,175,55,.28));
}
.familia__nombres{
  margin:0; font-size:1.14rem; line-height:1.9;
  color:var(--cream); letter-spacing:.02em;
}
.familia__sep{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:24px auto;
}
.familia__sep span{ width:48px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.familia__sep span:last-child{ background:linear-gradient(90deg,var(--gold),transparent); }

/* ====================== VESTIMENTA ====================== */
.vest__formal{
  margin:0 0 20px; font-family:var(--f-title);
  font-size:.72rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold-lt);
}
.vest__regla{
  margin:0 auto 26px; max-width:24ch;
  font-size:1.1rem; line-height:1.7; color:var(--cream);
}
.vest__regla b{ color:var(--red-br); font-weight:500; letter-spacing:.04em; }
.vest__reina{
  margin:0 auto; width:min(320px,84vw);
  border:1px solid rgba(212,175,55,.4); border-radius:4px;
  overflow:hidden; background:rgba(0,0,0,.4);
  box-shadow:0 12px 34px rgba(0,0,0,.7);
}
.vest__reina img{ width:100%; height:auto; }

/* ====================== CONTADOR ====================== */
.sec--count{ padding-top:64px; }

.datebox{
  display:grid; justify-content:center; align-items:center;
  grid-template-columns:auto auto auto; gap:6px 20px;
  margin:26px auto 34px; width:max-content;
}
.datebox__side{
  font-family:var(--f-title); font-size:.64rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cream-dim);
  border-top:1px solid rgba(212,175,55,.55); padding-top:9px; align-self:center;
}
.datebox__num{
  grid-row:1; grid-column:2;
  font-family:var(--f-title); font-size:3.5rem; line-height:1;
  background:linear-gradient(180deg,#f6e3a1,#d4af37 50%,#a67c1e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.datebox__month{
  grid-row:2; grid-column:2;
  font-family:var(--f-title); font-size:.66rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold-lt); margin-top:2px;
}
.count__label{
  margin:0 0 10px; font-family:var(--f-title); font-size:.6rem;
  letter-spacing:.38em; text-transform:uppercase; color:var(--cream-dim);
}
.count{ display:flex; align-items:flex-start; justify-content:center; gap:clamp(4px,2.6vw,16px); }
.count__cell{ display:flex; flex-direction:column; align-items:center; min-width:clamp(52px,17vw,76px); }
.count__cell b{
  font-family:var(--f-title); font-weight:500;
  font-size:clamp(2.1rem,10vw,3rem); line-height:1; color:#fff;
  font-variant-numeric:tabular-nums; text-shadow:0 0 24px rgba(213,20,46,.55);
}
.count__cell i{
  margin-top:7px; font-style:normal; font-family:var(--f-title);
  font-size:.54rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.count__sep{
  display:flex; align-items:center; justify-content:center;
  height:clamp(2.1rem,10vw,3rem);
  font-family:var(--f-title); font-size:clamp(1.35rem,5.6vw,1.9rem);
  line-height:1; color:rgba(212,175,55,.7);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 0%,49%{opacity:1;} 50%,100%{opacity:.4;} }

.count__done{ display:none; margin:6px 0 0; font-family:var(--f-script); font-size:2.4rem; color:var(--gold-lt); }
.is-day .count{ display:none; }
.is-day .count__label{ display:none; }
.is-day .count__done{ display:block; }

/* Calendario */
.cal{
  margin:44px auto 0; padding:20px 16px 16px; width:min(340px,86vw);
  border:1px solid rgba(212,175,55,.28); border-radius:4px;
  background:rgba(255,255,255,.022);
}
.cal__title{
  margin:0 0 14px; font-family:var(--f-title); font-size:.62rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-lt);
}
.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px 2px; }
.cal__grid span{ font-size:.82rem; line-height:1.9; color:var(--cream-dim); font-variant-numeric:tabular-nums; }
.cal__grid .dow{
  font-family:var(--f-title); font-size:.5rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); opacity:.85; margin-bottom:3px;
}
.cal__grid .on{
  color:#fff; font-weight:500;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3CradialGradient id='h' cx='50%25' cy='38%25' r='68%25'%3E%3Cstop offset='0%25' stop-color='%23e8324a'/%3E%3Cstop offset='60%25' stop-color='%23b3001b'/%3E%3Cstop offset='100%25' stop-color='%236e0011'/%3E%3C/radialGradient%3E%3Cpath d='M16 29.5 C1.5 19.5 -0.5 8.5 6 3.7 C11.5 -0.3 16 5.5 16 8.5 C16 5.5 20.5 -0.3 26 3.7 C32.5 8.5 30.5 19.5 16 29.5 Z' fill='url(%23h)'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center 48%; background-size:30px 30px;
  text-shadow:0 1px 3px rgba(0,0,0,.65);
}

/* ====================== UBICACIONES ====================== */
.place__time{ margin:2px 0 6px; font-family:var(--f-title); font-size:1.28rem; letter-spacing:.14em; color:var(--gold-lt); }
.place__time--soon{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(245,236,224,.5); font-style:normal;
}
.place__name{
  margin:0 0 22px; font-family:var(--f-title); font-size:.86rem;
  letter-spacing:.14em; line-height:1.85; text-transform:uppercase; color:var(--cream);
}

/* ====================== BOTONES ====================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 32px; border-radius:2px; border:1px solid var(--gold);
  background:linear-gradient(180deg, rgba(179,0,27,.24), rgba(179,0,27,.08));
  color:var(--gold-lt); text-decoration:none; cursor:pointer;
  font-family:var(--f-title); font-size:.66rem;
  letter-spacing:.24em; text-transform:uppercase;
  transition:background .35s, color .35s, box-shadow .35s, transform .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover,.btn:focus-visible{
  background:var(--red); color:#fff; outline:none;
  box-shadow:0 0 30px rgba(213,20,46,.45); transform:translateY(-1px);
}
.btn:disabled{ opacity:.42; cursor:not-allowed; border-style:dashed; }
.btn:disabled:hover{
  background:linear-gradient(180deg, rgba(179,0,27,.24), rgba(179,0,27,.08));
  color:var(--gold-lt); transform:none; box-shadow:none;
}
.btn--wa{ padding:15px 36px; font-size:.7rem; }
.btn__wa{ width:17px; height:17px; }

/* ====================== "PRÓXIMAMENTE" ====================== */
.soon{
  margin:22px auto 0; padding:22px 20px; width:min(400px,86vw);
  border:1px dashed rgba(212,175,55,.34); border-radius:4px;
  background:rgba(255,255,255,.02);
}
.soon--slim{ margin-top:26px; padding:15px 18px; }
.soon__tag{
  display:inline-block; margin-bottom:8px; padding:4px 13px; border-radius:20px;
  border:1px solid rgba(212,175,55,.5); background:rgba(179,0,27,.16);
  font-family:var(--f-title); font-size:.5rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-lt);
}
.soon p{ margin:0; font-size:.95rem; color:rgba(245,236,224,.55); line-height:1.5; }

/* ====================== ITINERARIO ====================== */
.itin{
  list-style:none; margin:30px auto 0; padding:0;
  width:min(430px,88vw); text-align:left; position:relative;
}
.itin::before{
  content:''; position:absolute; left:17px; top:18px; bottom:18px; width:1px;
  background:linear-gradient(180deg, transparent, rgba(212,175,55,.55) 5%, rgba(212,175,55,.55) 95%, transparent);
}
.itin__item{ position:relative; padding:0 0 30px 56px; }
.itin__item:last-child{ padding-bottom:0; }
/* Cada momento lleva un palo de la baraja como marcador */
.itin__item::before{
  content:attr(data-palo);
  position:absolute; left:0; top:0; width:35px; height:35px; border-radius:50%;
  display:grid; place-items:center;
  background:#12060a; border:1px solid rgba(212,175,55,.6);
  color:var(--gold-lt); font-size:17px; line-height:1;
  box-shadow:0 0 0 5px rgba(8,2,4,.85);
}
.itin__item--rojo::before{ color:#e8324a; }
.itin__hora{
  margin:0; line-height:35px; font-family:var(--f-title); font-weight:600;
  font-size:.8rem; letter-spacing:.18em; color:var(--gold-lt);
}
.itin__tit{
  margin:0 0 4px; font-family:var(--f-script); font-weight:400;
  font-size:2.3rem; line-height:1; color:var(--cream);
}
.itin__det{ margin:0; font-size:1.02rem; line-height:1.55; color:var(--cream-dim); }
.itin__lista{ margin:6px 0 0; padding:0; list-style:none; }
.itin__lista li{
  position:relative; padding-left:16px;
  font-size:1rem; line-height:1.6; color:var(--cream-dim);
}
.itin__lista li::before{
  content:''; position:absolute; left:2px; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--gold);
}
.itin__extra{
  margin:8px 0 0; font-size:.94rem; font-style:italic; line-height:1.5;
  color:rgba(242,220,154,.78);
}
.acard--itin2{ width:72px; bottom:40px; left:-18px; --r:-14deg; transform:rotate(-14deg); animation:sway 10.5s ease-in-out infinite; }

/* ====================== ÁLBUM ====================== */
.album__status{
  margin:14px 0 0; min-height:1.4em; font-size:.92rem;
  color:var(--gold-lt); font-style:italic;
}
.album__status.is-error{ color:#ff8a9c; }
.album__vacio{
  margin:22px auto 0; max-width:28ch;
  font-size:.95rem; font-style:italic; line-height:1.6;
  color:rgba(245,236,224,.45);
}

/* Cuadrícula de fotos */
.album__grid{
  display:grid; gap:6px; margin-top:24px;
  grid-template-columns:repeat(3,1fr);
}
.shot{
  position:relative; padding:0; margin:0; cursor:pointer;
  aspect-ratio:1/1; overflow:hidden; border-radius:3px;
  border:1px solid rgba(212,175,55,.32);
  background:rgba(255,255,255,.03);
  transition:transform .25s, border-color .25s, box-shadow .25s;
  -webkit-tap-highlight-color:transparent;
}
.shot:hover,.shot:focus-visible{
  transform:scale(1.04); border-color:var(--gold); outline:none;
  box-shadow:0 6px 20px rgba(0,0,0,.6); z-index:2;
}
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot--video{ display:grid; place-items:center; background:rgba(179,0,27,.16); }
.shot__play{
  width:0; height:0;
  border-left:17px solid var(--gold-lt);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));
}
.btn--mas{ margin-top:18px; }

/* Visor a pantalla completa */
.visor{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:rgba(6,1,3,.96); backdrop-filter:blur(6px);
  padding:56px 12px;
}
.visor[hidden]{ display:none; }
.visor__caja{
  display:grid; place-items:center;
  max-width:100%; max-height:100%;
}
.visor__caja img,.visor__caja video{
  max-width:min(96vw,900px); max-height:82vh;
  width:auto; height:auto;
  border-radius:3px; box-shadow:0 14px 50px rgba(0,0,0,.8);
}
.visor__x{
  position:absolute; top:12px; right:14px; z-index:3;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(212,175,55,.5); background:rgba(20,4,9,.85);
  color:var(--gold-lt); font-size:1.7rem; line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.visor__x:hover{ border-color:var(--gold); color:#fff; }
.visor__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(212,175,55,.4); background:rgba(20,4,9,.7);
  -webkit-tap-highlight-color:transparent;
}
.visor__nav::before{
  content:''; position:absolute; top:50%; left:50%;
  width:11px; height:11px; margin:-6px 0 0 -4px;
  border-right:2px solid var(--gold-lt); border-bottom:2px solid var(--gold-lt);
}
.visor__nav--prev{ left:10px; }
.visor__nav--prev::before{ transform:rotate(135deg); margin-left:-7px; }
.visor__nav--next{ right:10px; }
.visor__nav--next::before{ transform:rotate(-45deg); }
.visor__nav:hover{ border-color:var(--gold); }
.visor__pos{
  position:absolute; bottom:16px; left:0; right:0; margin:0; text-align:center;
  font-family:var(--f-title); font-size:.58rem;
  letter-spacing:.26em; color:rgba(212,175,55,.75);
}

@media (min-width:560px){
  .album__grid{ grid-template-columns:repeat(4,1fr); gap:8px; }
}

.album__bar{
  margin:12px auto 0; width:min(280px,80%); height:3px; border-radius:2px;
  background:rgba(212,175,55,.18); overflow:hidden;
}
.album__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--red-br),var(--gold)); transition:width .3s; }

/* ====================== RSVP ====================== */
.sec--rsvp{
  padding:96px 0;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(179,0,27,.34), transparent 70%),
    linear-gradient(180deg, #0d0206, #1c0510 50%, #0d0206);
}
.rsvp__note{ margin:16px auto 0; max-width:30ch; font-size:.86rem; font-style:italic; color:rgba(245,236,224,.42); }

/* Formulario de confirmación */
.rsvp{ margin:6px auto 0; width:min(360px,88vw); text-align:left; }
.rsvp__campo{ display:block; margin-bottom:16px; }
.rsvp__lbl{
  display:block; margin-bottom:7px;
  font-family:var(--f-title); font-size:.55rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
}
.rsvp input{
  width:100%; padding:12px 14px;
  font-family:var(--f-body); font-size:1.02rem; color:var(--cream);
  background:rgba(10,3,6,.7);
  border:1px solid rgba(212,175,55,.38); border-radius:3px;
  transition:border-color .3s, box-shadow .3s;
  -webkit-appearance:none; appearance:none;
}
.rsvp input:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.14);
}

/* Botón del PDF y enlace para confirmar otra invitación */
.btn--pdf{
  width:100%; margin-bottom:8px; font-weight:600;
  background:linear-gradient(180deg,#e9c766,#c9a227 55%,#9c7718);
  color:#1a0409; border-color:#f2dc9a; border-style:solid;
}
.btn--pdf:hover,.btn--pdf:focus-visible,.btn--pdf:disabled:hover{
  background:linear-gradient(180deg,#f6dc8a,#d4af37 55%,#a67c1e); color:#12060a;
}
.btn--pdf:disabled{ opacity:.6; cursor:wait; border-style:solid; }
.rsvp__pdfEstado{
  margin:0 0 20px; min-height:1.3em;
  font-size:.92rem; font-style:italic; color:var(--gold-lt);
}
.rsvp__pdfEstado.is-error{ color:#ff8a9c; }
.rsvp__hecho .btn--wa{ width:100%; }
.rsvp__otra{
  display:block; margin:18px auto 0; padding:6px 10px;
  background:none; border:0; cursor:pointer;
  font-family:var(--f-body); font-size:.94rem; font-style:italic;
  color:rgba(245,236,224,.55); text-decoration:underline; text-underline-offset:3px;
}
.rsvp__otra:hover{ color:var(--gold-lt); }

/* Campo del código */
.rsvp__codigo{
  letter-spacing:.3em; text-align:center;
  font-family:var(--f-title) !important; font-size:1.16rem !important;
}
.rsvp__ayuda{
  margin:7px 0 0; font-size:.86rem; font-style:italic;
  color:rgba(245,236,224,.42);
}

/* Tarjeta con los boletos de la familia */
.rsvp__hallada{
  margin:0 0 20px; padding:20px 16px; text-align:center;
  border:1px solid rgba(212,175,55,.45); border-radius:4px;
  background:linear-gradient(180deg, rgba(179,0,27,.24), rgba(255,255,255,.02));
  animation:aparece .45s ease both;
}
@keyframes aparece{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.rsvp__hFam{
  margin:0 0 10px; font-family:var(--f-title); font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cream);
}
.rsvp__hBol{ margin:0; line-height:1; }
.rsvp__hBol b{
  font-family:var(--f-title); font-weight:500; font-size:2.6rem;
  background:linear-gradient(180deg,#f8ecc0,#d4af37 50%,#a67c1e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rsvp__hBol span{
  font-family:var(--f-title); font-size:.62rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.rsvp__hNota{
  margin:10px 0 0; font-size:.86rem; font-style:italic;
  color:rgba(245,236,224,.5);
}

.rsvp #rsvpBtn{ width:100%; }
.rsvp__estado{
  margin:12px 0 0; min-height:1.3em; text-align:center;
  font-size:.92rem; font-style:italic; color:var(--gold-lt);
}
.rsvp__estado.is-error{ color:#ff8a9c; }

/* Estado "ya confirmaste" */
.rsvp__hecho{
  margin:10px auto 0; padding:26px 22px; width:min(360px,88vw);
  border:1px solid rgba(212,175,55,.4); border-radius:4px;
  background:rgba(179,0,27,.12);
}
.rsvp__hecho{ text-align:center; }
.rsvp__hecho .ornament__heart{ margin:0 auto 16px; width:22px; height:22px; }

/* El agradecimiento, en grande */
.rsvp__gracias{
  margin:0 0 10px; font-family:var(--f-script); font-weight:400;
  font-size:clamp(2.1rem,8.4vw,2.9rem); line-height:1.12;
  color:var(--cream);
  text-shadow:0 2px 26px rgba(213,20,46,.4);
}
.rsvp__gracias span{
  background:linear-gradient(180deg,#f8ecc0,#d4af37 50%,#a67c1e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rsvp__graciasSub{
  margin:0 auto 18px; max-width:28ch;
  font-size:1.04rem; line-height:1.65;
  color:rgba(245,236,224,.8);
}
.rsvp__hechoTxt{
  margin:0 0 20px; font-family:var(--f-title);
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt);
}
.rsvp__hechoPide{
  margin:0 0 14px; font-size:.96rem; font-style:italic;
  color:rgba(245,236,224,.62);
}

/* ====================== CIERRE ====================== */
.closing{
  position:relative; padding:80px 20px 64px; text-align:center;
  background:linear-gradient(180deg, #080204, #1a0409 60%, #080204);
  overflow:hidden;
}
.closing__txt{
  margin:0 auto 8px; max-width:26ch; font-family:var(--f-title);
  font-size:.68rem; letter-spacing:.14em; line-height:2.1;
  text-transform:uppercase; color:var(--cream-dim);
}
.closing__big{
  margin:6px 0 30px; font-family:var(--f-script); font-weight:400;
  font-size:clamp(3rem,13vw,4.6rem); line-height:1;
  background:linear-gradient(180deg,#f6e3a1,#e8546b 60%,#b3001b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Abanico de cartas del cierre */
.fan{
  --c: clamp(64px, 18vw, 96px);
  display:flex; justify-content:center; align-items:flex-end;
  margin:0 auto 40px; padding-top:26px;
}
.fan img{
  width:var(--c); height:auto;
  margin-inline:calc(var(--c) * -0.09);
  transform-origin:50% 95%;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.85));
}
.fan img:nth-child(1){ transform:rotate(-24deg) translateY(16px); z-index:1; }
.fan img:nth-child(2){ transform:rotate(-12deg) translateY(4px);  z-index:2; }
.fan img:nth-child(3){ transform:rotate(0deg)   translateY(-5px); z-index:3; }
.fan img:nth-child(4){ transform:rotate(12deg)  translateY(4px);  z-index:2; }
.fan img:nth-child(5){ transform:rotate(24deg)  translateY(16px); z-index:1; }

.closing__sig{
  margin:0; font-family:var(--f-title); font-size:.54rem;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(212,175,55,.55);
}

/* ====================== CARTAS SUELTAS POR SECCIÓN ====================== */
.acard{
  position:absolute; z-index:1; pointer-events:none;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.8));
}
.acard--hero1{ width:88px; top:11%;    right:5%;   --r:15deg;  transform:rotate(15deg);  animation:sway 8.5s ease-in-out infinite; }
.acard--hero2{ width:74px; bottom:19%; left:7%;    --r:-18deg; transform:rotate(-18deg); animation:sway 10.5s ease-in-out infinite reverse; }
.acard--count{ width:70px; bottom:30px; left:-16px;  --r:-14deg; transform:rotate(-14deg); animation:sway 11s ease-in-out infinite; }
.acard--itin { width:78px; top:34px;    right:-18px; --r:16deg;  transform:rotate(16deg);  animation:sway 9.5s ease-in-out infinite reverse; }
.acard--ubic { width:66px; top:28px;    left:-14px;  --r:-12deg; transform:rotate(-12deg); animation:sway 12s ease-in-out infinite; }
.acard--vest { width:74px; bottom:30px; right:-16px; --r:14deg;  transform:rotate(14deg);  animation:sway 10s ease-in-out infinite reverse; }.acard--album{ width:76px; bottom:34px; left:-18px;  --r:17deg;  transform:rotate(17deg);  animation:sway 9s ease-in-out infinite reverse; }

/* ====================== REVEAL ====================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .95s ease, transform .95s cubic-bezier(.22,.9,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ====================== RESPONSIVE ====================== */
@media (max-width:420px){
  body{ font-size:17px; }
  .sec{ padding:66px 0; }
  .rose--tl{ width:136px; left:-52px; top:-40px; }
  .rose--tr{ width:116px; right:-46px; top:-30px; }
  .rose--br{ width:124px; right:-52px; }
  .bouquet--hero{ width:112px; left:-42px; }
  .bouquet--rsvp{ width:100px; left:-72px; }
  .rose--count{ width:92px; right:-36px; }
  .rose--rsvp{ width:100px; right:-40px; }  .guard{ width:136px; }
  .cal{ padding:16px 10px 12px; }
  .cal__grid span{ font-size:.76rem; }
}
@media (min-width:760px){
  :root{ --wrap:640px; }
  .rose--tl{ width:240px; left:-50px; }
  .rose--tr{ width:200px; right:-46px; }
  .rose--br{ width:220px; right:-56px; }
  .bouquet--hero{ width:210px; left:-46px; }
  .guard{ width:240px; opacity:.68; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}