/* ============================================================
   ESCENAS — componentes visuales
   ============================================================ */

.title-script{
  font-family:var(--f-script);
  font-size:clamp(40px,11vw,62px);
  line-height:.98;font-weight:400;margin:0 0 6px;
}
.title-script--ink{color:var(--burdeos);}
.title-script--sm{font-size:clamp(34px,9vw,48px);}

/* ---------- ESCENA 1 · PORTADA ---------- */
.cover{ text-align:center; }
.cover__photo{
  width:min(42%,158px);aspect-ratio:1;margin:0 auto 20px;
  border-radius:50%;overflow:hidden;position:relative;z-index:5;
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 56%, rgba(0,0,0,.35) 70%, transparent 80%);
  mask:radial-gradient(circle at 50% 50%, #000 56%, rgba(0,0,0,.35) 70%, transparent 80%);
}
.cover__photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 60%;
  filter:sepia(.28) saturate(1.05) brightness(.96) contrast(1.02);
}
.cover__valance{
  position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  width:118%;max-width:none;opacity:.5;z-index:2;
  filter:sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(.7);
  mix-blend-mode:screen;
}
.spotlight{
  position:absolute;top:-12%;left:50%;transform:translateX(-50%);
  width:130%;height:90%;z-index:1;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%, rgba(245,225,180,.22), transparent 70%);
}
.cover__inner{ z-index:5; }
.cover__tag{
  font-size:clamp(28px,7.6vw,42px);
  color:var(--rosa);
  margin:0 0 10px;text-shadow:0 2px 18px rgba(0,0,0,.4);
}
.cover__sub{ margin:0 0 4px;opacity:.85; font-style:italic;}
.cover__names{
  color:#f3e3c8;
  margin:36px 0 20px;
  font-size:clamp(60px,18vw,104px);
  text-shadow:0 6px 30px rgba(0,0,0,.5);
}
.cover__names .amp{ color:var(--mostaza); font-size:.86em; }
.cover__credit .date-strip{ color:var(--mostaza); font-size:16px; }
.cover__where{ margin:14px 0 0; opacity:.6; }

/* Cortinas de teatro que se abren al cargar */
.curtain{
  position:absolute;top:0;bottom:0;width:54%;z-index:40;pointer-events:none;
  background:
    repeating-linear-gradient(90deg, #3a0f15 0 18px, #5e1f26 18px 38px, #731f2a 38px 52px, #4a1820 52px 70px);
  box-shadow:inset -30px 0 60px rgba(0,0,0,.5);
  transition:transform 2.2s cubic-bezier(.7,0,.2,1);
}
.curtain--l{left:0;transform:translateX(0);}
.curtain--r{right:0;transform:translateX(0);box-shadow:inset 30px 0 60px rgba(0,0,0,.5);}
body.curtains-open .curtain--l{transform:translateX(-102%);}
body.curtains-open .curtain--r{transform:translateX(102%);}
@media (prefers-reduced-motion: reduce){
  .curtain{transition:none;}
}

.scroll-hint{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-family:var(--f-type);font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.65;
}
.scroll-hint svg{width:20px;height:20px;animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- ESCENA 2 · COUNTDOWN ---------- */
.countdown .title-script{ color:#f3e3c8; }
.countdown em{ color:var(--mostaza); font-style:italic; }
.deco{ position:absolute; z-index:2; opacity:.9; }
.deco--clap{ width:96px;top:7%;right:8%;
  filter:sepia(1) saturate(2) hue-rotate(-8deg) brightness(1.05); }
.cd{
  display:flex;align-items:flex-start;justify-content:center;gap:6px;
  margin:26px 0 24px;
}
.cd__cell{
  display:flex;flex-direction:column;align-items:center;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(243,227,200,.18);
  border-radius:12px;padding:14px 10px 10px;min-width:62px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.cd__num{
  font-family:var(--f-marker);
  font-size:clamp(34px,9vw,46px);line-height:1;color:var(--mostaza);
  font-variant-numeric:tabular-nums;
}
.cd__lbl{
  font-family:var(--f-type);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.7;margin-top:7px;
}
.cd__sep{
  font-family:var(--f-marker);font-size:30px;color:var(--rosa);opacity:.6;
  align-self:center;padding-top:6px;
}
.filmstrip{ width:200px;margin:8px auto 0;opacity:.9;
  filter:sepia(1) saturate(1.6) hue-rotate(-10deg) brightness(1.15); }

/* ---------- ESCENA 3 · PROTAGONISTAS ---------- */
.portrait{ margin:6px auto 22px; width:min(74%,280px); }
.portrait__frame{
  position:relative;background:var(--cream-2);
  border:2px solid var(--burdeos);
  border-radius:6px;padding:30px 18px;
  box-shadow:0 16px 40px rgba(70,40,25,.22);
}
.portrait__frame::before{
  content:"";position:absolute;inset:6px;border:1px solid rgba(94,31,38,.3);border-radius:3px;pointer-events:none;
}
.portrait__img{ width:100%; mix-blend-mode:multiply; }
.sprocket{
  position:absolute;left:0;right:0;height:14px;
  background:repeating-linear-gradient(90deg, transparent 0 12px, var(--burdeos) 12px 20px);
  -webkit-mask:repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 20px);
  opacity:.55;
}
.sprocket--t{top:8px;} .sprocket--b{bottom:8px;}
.protagonistas__names{
  color:var(--burdeos);font-size:clamp(44px,13vw,66px);margin:0 0 12px;
}
.protagonistas__names .amp{ color:var(--terracota); }

/* ---------- ESCENA 4 · PADRES ---------- */
.parents{ text-align:center; }
.parents .title-script{ line-height:1.16; }
.branch{ position:absolute;top:30px;left:50%;transform:translateX(-50%);width:160px;height:64px;z-index:2;opacity:.85; }
.parents .scene__inner{ margin-top:30px; }
.parents__grid{
  display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px;
}
.parents__col{ }
.parents__role{
  font-family:var(--f-type);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--terracota);margin:0 0 10px;
}
.parents__name{
  font-family:var(--f-serif);font-size:clamp(19px,5vw,23px);
  font-weight:600;color:var(--paper-text);margin:3px 0;line-height:1.3;
}
.parents__amp{ width:46px;opacity:.7;margin:6px 0; }
.parents__amp img{ width:100%; }

/* ---------- ESCENA 5 · UBICACIÓN ---------- */
.location .title-script{ color:#f3e7cf; }
.ticket{
  position:relative;background:var(--cream-2);color:var(--paper-text);
  border-radius:14px;padding:30px 26px;margin-top:22px;
  box-shadow:0 22px 50px rgba(0,0,0,.3);
  border:1px dashed rgba(94,31,38,.35);
}
.ticket__notch{
  position:absolute;top:50%;width:26px;height:26px;border-radius:50%;
  background:var(--oliva);transform:translateY(-50%);
}
.ticket__notch--l{left:-13px;} .ticket__notch--r{right:-13px;}
.ticket__admit{
  font-family:var(--f-type);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--terracota);margin:0 0 14px;
}
.ticket__venue{
  font-family:var(--f-serif);font-weight:600;font-size:clamp(24px,6.5vw,30px);
  line-height:1.1;margin:0 0 4px;
}
.ticket__venue .script{ font-family:var(--f-script);font-size:1.5em;font-weight:400;color:var(--burdeos);display:inline-block;margin-top:4px; }
.ticket__addr{ font-size:16px;line-height:1.5;color:var(--paper-soft);margin:14px 0 22px; }
.ticket__perf .btn{ width:100%;justify-content:center; }

/* ---------- ESCENAS 6/7 · ACTOS ---------- */
.acts .cue{ color:var(--terracota); }
.act{
  display:flex;align-items:center;gap:16px;text-align:left;
  background:var(--cream-2);
  border:1px solid rgba(94,31,38,.14);
  border-radius:14px;padding:16px 18px;margin:12px 0;
  box-shadow:0 10px 26px rgba(70,40,25,.1);
}
.act--alt{ background:#efe4cf; }
.act__doodle{ width:54px;flex:0 0 54px; mix-blend-mode:multiply; }
.act__body{ flex:1; }
.act__label{
  font-family:var(--f-type);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terracota);margin:0 0 3px;
}
.act__title{
  font-family:var(--f-serif);font-weight:600;font-size:clamp(20px,5.4vw,25px);
  margin:0;line-height:1.15;color:var(--paper-text);
}
.act__time{
  font-family:var(--f-marker);font-size:clamp(26px,7vw,34px);
  color:var(--burdeos);line-height:1;
}
.act--mini{ padding:13px 16px;margin:9px 0; }
.act--mini .act__doodle{ width:44px;flex-basis:44px; }
.act__doodle--svg{ aspect-ratio:1;height:auto;mix-blend-mode:normal; }
.acts .title-script--sm{ margin-bottom:14px; }

/* ---------- ESCENA 8 · CIERRE FIESTA ---------- */
.closing-party .title-script{ color:#f3e3c8; }
.closing-party .lead{ color:var(--rosa); }
.car{ width:min(64%,224px);margin:22px auto 18px;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.55)); }
.big-time{
  display:inline-block;font-family:var(--f-marker);
  font-size:clamp(58px,17vw,92px);color:var(--mostaza);line-height:1;margin-top:14px;
  text-shadow:0 6px 28px rgba(0,0,0,.45);
}

/* ---------- ESCENA 9 · DRESS CODE ---------- */
.faq-head{ display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:8px; }
.faq-head__ic{ width:58px; mix-blend-mode:multiply; }
.faq-q{
  font-family:var(--f-script);font-size:clamp(34px,9vw,46px);
  color:var(--burdeos);line-height:1;margin:0;
}
.swatches{
  display:flex;flex-wrap:wrap;justify-content:center;gap:34px 20px;margin:28px auto 18px;max-width:340px;
}
.sw{
  position:relative;width:50px;height:50px;border-radius:50%;
  background:var(--c);box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.sw:hover{ transform:scale(1.22); box-shadow:0 10px 24px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.18); z-index:2; }
.sw::after{
  content:attr(data-name);position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);
  font-family:var(--f-type);font-size:10px;letter-spacing:.02em;color:var(--paper-soft);white-space:nowrap;
}
.dress__wink{
  background:rgba(201,139,124,.16);border-radius:14px;padding:14px 18px;margin:30px 0 0;
  font-size:16px;line-height:1.5;
}
.dress__wink em{ color:var(--terracota);font-weight:600;font-style:normal; }
.avoid{ margin-top:26px;border-top:1px solid rgba(94,31,38,.16);padding-top:20px; }
.avoid__title{
  font-family:var(--f-type);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-soft);margin:0 0 16px;
}
.avoid__row{ display:flex;flex-wrap:wrap;justify-content:center;gap:48px 26px; }
.sw--x{ width:38px;height:38px;opacity:.92; }
.sw--x::before{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  background:linear-gradient(45deg,transparent 44%, var(--burdeos) 44% 56%, transparent 56%);
}
.sw--x::after{ font-size:9px;top:calc(100% + 9px);bottom:auto;white-space:normal;width:66px;text-align:center;line-height:1.2; }
.avoid__note{ font-size:15px;color:var(--paper-soft);margin:22px 0 0;font-style:italic; }

/* ---------- ESCENA 10 · FAQ ---------- */
.faqs .cue{ color:var(--terracota); }
.faq-card{
  background:var(--cream-2);border:1px solid rgba(94,31,38,.14);
  border-radius:16px;padding:20px 22px;margin:14px 0;text-align:left;
  box-shadow:0 10px 26px rgba(70,40,25,.1);
}
.faq-head--row{ flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;margin-bottom:10px; }
.faq-head--row .faq-head__ic{ width:46px;flex:0 0 46px; }
.faq-head--row .faq-q{ font-size:clamp(26px,7vw,34px);text-align:left; }
.faq-card .body{ margin:0; }
.faq-card em{ color:var(--terracota);font-style:italic; }

/* ---------- ESCENA 11 · QRs ---------- */
.qrs .title-script{ color:#f3e7cf; }
.qr-grid{ display:flex;flex-direction:column;gap:18px;margin:24px 0 14px; }
.qr-card{
  background:var(--cream-2);border-radius:16px;padding:20px;
  box-shadow:0 14px 34px rgba(0,0,0,.22);color:var(--paper-text);
}
.qr-card__code{ width:170px;min-height:0;margin:0 auto 14px;
  background:#fff;border-radius:10px;padding:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
  display:flex;align-items:center;justify-content:center; }
.qr-card__code img{ width:100%;height:auto;display:block;image-rendering:pixelated; }
.qr-card__code canvas{ display:block; }
.qr-card__title{
  font-family:var(--f-serif);font-weight:700;font-size:21px;margin:0 0 4px;color:var(--burdeos);
}
.qr-card__sub{ font-size:14.5px;line-height:1.45;color:var(--paper-soft);margin:0; }
.qr-note{
  font-family:var(--f-type);font-size:11px;letter-spacing:.06em;opacity:.7;margin-top:8px;
}

/* ---------- ESCENA 12 · RSVP ---------- */
.rsvp-scene .title-script{ color:#f3e3c8;margin-bottom:18px; }
.deco--chair{ width:88px;top:6%;left:7%;
  filter:sepia(1) saturate(2) hue-rotate(-8deg) brightness(1.08); }
.rsvp{ background:rgba(0,0,0,.16);border:1px solid rgba(243,227,200,.16);
  border-radius:18px;padding:24px 22px;margin-top:6px; }
.rsvp__q{
  font-family:var(--f-type);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mostaza);margin:0 0 14px;
}
.rsvp-choices{ display:flex;gap:12px;margin-bottom:18px; }
.rsvp-choice{
  flex:1;padding:14px 0;border-radius:12px;
  background:transparent;border:1.5px solid rgba(243,227,200,.3);
  color:#f3e3c8;font-family:var(--f-serif);font-weight:600;font-size:20px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .2s;
}
.rsvp-choice span{ font-size:18px; }
.rsvp-choice:hover{ border-color:var(--mostaza); }
.rsvp-choice.on{ background:var(--mostaza);color:var(--burdeos-2);border-color:var(--mostaza);
  box-shadow:0 8px 22px rgba(200,147,46,.4); }
.rsvp__fields{ display:flex;flex-direction:column;gap:10px; }
.rsvp input{
  width:100%;padding:14px 16px;border-radius:11px;
  background:rgba(243,227,200,.07);
  border:1.5px solid rgba(243,227,200,.22);
  color:#f5ecda;font-family:var(--f-serif);font-size:17px;
  transition:border-color .2s,background .2s;
}
.rsvp input::placeholder{ color:rgba(243,227,200,.5); }
.rsvp input:focus{ outline:none;border-color:var(--mostaza);background:rgba(243,227,200,.12); }
.rsvp__song{ margin-top:2px; }
.rsvp.says-no .rsvp__song{ opacity:.4;pointer-events:none; }
.rsvp__send{ width:100%;justify-content:center;margin-top:16px;background:var(--mostaza);color:var(--burdeos-2);border-color:transparent; }
.rsvp__send:hover{ background:#d6a23e; }
.rsvp__deadline{
  font-family:var(--f-type);font-size:11px;line-height:1.7;letter-spacing:.04em;
  opacity:.72;margin:16px 0 0;
}
.rsvp__deadline strong{ color:var(--mostaza); }
.rsvp-done{ display:none;text-align:center;padding:20px 0; }
.rsvp-done.show{ display:block;animation:popin .5s cubic-bezier(.34,1.56,.64,1); }
.rsvp-done__msg{ font-family:var(--f-script);font-size:clamp(28px,8vw,40px);color:var(--mostaza);line-height:1.05;margin:0 0 20px; }
@keyframes popin{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* shake validación */
.shake{ animation:shake .4s; }
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* ---------- ESCENA 13 · FINALE ---------- */
.finale{ text-align:center; }
.finale__strip{ width:130px;margin:0 auto 22px;opacity:.92;
  filter:sepia(1) saturate(1.6) hue-rotate(-10deg) brightness(1.15); }
.finale__cont{
  font-family:var(--f-script);font-size:clamp(46px,13vw,72px);color:#f3e3c8;line-height:.98;margin:0 0 26px;
}
.finale__couple{ width:130px;margin:0 auto 30px;opacity:.95;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.4)); }
.finale__credit{ margin-bottom:26px; }
.finale__names{ font-size:clamp(40px,12vw,60px);color:var(--mostaza);margin:0 0 14px; }
.finale__names .amp{ color:var(--rosa); }
.finale__credit .date-strip{ color:#e7d3b6;font-size:14px; }
.finale__fin{ opacity:.5;letter-spacing:.4em; }

/* ============================================================
   AJUSTES RESPONSIVE
   ============================================================ */
@media (max-width:380px){
  .cd__cell{ min-width:54px;padding:12px 7px 9px; }
  .cd{ gap:3px; }
  .scene{ padding:56px 22px; }
}
@media (min-width:680px){
  .parents__grid{ }
}