/* =====================================================================
   MIRIAM & SANTIAGO — Invitación de boda
   Paleta: campirano elegante · marfil, arena, caramelo, tierra, salvia
   Tipografía: Great Vibes · Cormorant Garamond · Marcellus · Montserrat
   ===================================================================== */

/* ------------------------- TOKENS ------------------------- */
:root{
  --bg:        #FAF5EC;
  --bg-panel:  #F1E7D6;
  --bg-deep:   #ECDFCB;
  --paper:     #FFFDF9;
  --line:      rgba(74,59,46,.16);
  --line-2:    rgba(74,59,46,.30);
  --ink:       #453A2D;
  --ink-soft:  #736553;
  --espresso:  #382C20;
  --gold:      #A6805A;
  --gold-deep: #8A6742;
  --sage:      #8C8A6E;
  --taupe:     #C9AE8C;
  --on-dark:   #F7EFE2;
  --on-dark-soft: rgba(247,239,226,.78);

  --f-script:'Great Vibes', 'Segoe Script', cursive;
  --f-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-label: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --f-body:  'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --maxw: 1180px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* ------------------------- RESET / BASE ------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overscroll-behavior-y:none; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  font-weight:300;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--gold); color:#fff; }

/* Fondo con textura de papel muy sutil */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(214,192,160,.20), transparent 60%),
    radial-gradient(1000px 700px at 100% 100%, rgba(140,138,110,.12), transparent 55%),
    var(--bg);
}

/* ------------------------- TIPOGRAFÍA HELPERS ------------------------- */
.label{
  font-family:var(--f-label);
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:clamp(.62rem,1.6vw,.76rem);
  color:var(--gold-deep);
  font-weight:400;
  line-height:1.6;
}
.label.light{ color:rgba(247,239,226,.85); }

.display{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:clamp(2rem,6vw,3.5rem);
  line-height:1.12;
  color:var(--espresso);
  letter-spacing:.01em;
}
.display.light{ color:var(--on-dark); }

.lead{
  font-family:var(--f-serif);
  font-size:clamp(1.15rem,2.6vw,1.5rem);
  font-style:italic;
  color:var(--ink);
  font-weight:400;
  line-height:1.5;
}
.body{
  font-size:clamp(.92rem,2vw,1.02rem);
  color:var(--ink-soft);
  font-weight:300;
}
.body.center{ text-align:center; max-width:44ch; margin-inline:auto; }
.script{
  font-family:var(--f-script);
  color:var(--gold-deep);
  font-size:clamp(1.8rem,5vw,2.6rem);
  line-height:1.2;
}

/* ------------------------- SECCIONES ------------------------- */
.section{ padding:clamp(3.25rem,7.5vw,5.75rem) var(--pad); position:relative; }
.section--panel{ background:var(--bg-panel); }
.section--panel + .section--panel{ background:var(--bg-deep); }

/* Sprig / adorno botánico */
.sprig{ width:clamp(52px,10vw,74px); margin:0 auto 1.6rem; color:var(--gold); opacity:.9; }
.sprig.sm{ width:40px; margin-bottom:1rem; }
.sprig svg{ width:100%; height:auto; display:block; }

/* ------------------------- BOTONES ------------------------- */
.btn{
  --bh:#8A6742;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-label);
  text-transform:uppercase; letter-spacing:.2em;
  font-size:.72rem; padding:.95em 1.8em;
  border-radius:2px; transition:all .5s var(--ease);
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn__icon{ width:1.15em; height:1.15em; flex:none; }
.btn--outline{ border:1px solid var(--line-2); color:var(--espresso); background:transparent; }
.btn--outline:hover{ background:var(--espresso); color:var(--on-dark); border-color:var(--espresso); }
.btn--ghost{ border:1px solid var(--line-2); color:var(--gold-deep); }
.btn--ghost:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }
.btn--solid{ background:var(--espresso); color:var(--on-dark); }
.btn--solid:hover{ background:var(--gold-deep); }
.btn:active{ transform:scale(.97); }

/* ------------------------- INTRO · SOBRE QUE SE ABRE ------------------------- */
html.is-intro, html.is-intro body{ overflow:hidden; height:100%; }
.intro-env{
  position:fixed; inset:0; z-index:3000; display:grid; place-items:center; padding:2rem;
  background:radial-gradient(1100px 760px at 50% 32%, #fbf4e7, var(--bg-panel) 80%);
  transition:opacity .8s var(--ease), visibility 0s .9s;
}
.intro-env.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-env__scene{ position:relative; display:grid; place-items:center; width:100%; max-width:560px; perspective:1500px; animation:introIn 1s var(--ease) both; }
@keyframes introIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* --- Sobre (con la carta adentro) --- */
.env{
  position:relative; width:clamp(300px,84vw,352px); aspect-ratio:7/5; cursor:pointer;
  transform-style:preserve-3d;
}
.env:focus-visible{ outline:none; }
.env:focus-visible .env__back{ outline:2px solid var(--gold); outline-offset:12px; }

/* Respaldo (detrás de la carta) */
.env__back{
  position:absolute; inset:0; z-index:1; border-radius:11px;
  background:linear-gradient(160deg,#eaddC4 0%,#dcc8a6 100%);
  box-shadow:0 28px 50px rgba(56,44,32,.26), inset 0 0 0 1px rgba(122,92,62,.14), inset 0 2px 10px rgba(255,255,255,.3);
  transition:opacity .55s ease .6s;
}
/* Frente del sobre: cubre todo MENOS el triángulo de la solapa (encaje perfecto) */
.env__pocket{
  position:absolute; inset:0; z-index:3; border-radius:11px;
  clip-path:polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
  background:linear-gradient(168deg,#ecdfc4 0%,#e0cca7 100%);
  box-shadow:inset 0 -16px 30px rgba(122,92,62,.12);
  transition:opacity .55s ease .6s;
}
/* Costuras de las solapas laterales (de las esquinas de arriba al centro) */
.env__pocket::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom right, transparent calc(50% - .5px), rgba(122,92,62,.12) 50%, transparent calc(50% + .5px)) top left / 50% 58% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - .5px), rgba(122,92,62,.12) 50%, transparent calc(50% + .5px)) top right / 50% 58% no-repeat;
}
/* Solapa superior (se abre) — encaja justo en el hueco del frente */
.env__flap{
  position:absolute; left:0; right:0; top:0; height:58%; z-index:4;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:linear-gradient(168deg,#f1e5cb,#e3d0ab);
  transform-origin:top center; transform:rotateX(1deg);
  transition:transform .8s cubic-bezier(.42,0,.2,1) .05s, opacity .4s ease .72s;
  filter:drop-shadow(0 3px 5px rgba(122,92,62,.16));
}
/* Sello de cera */
.env__seal{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); z-index:6;
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 36% 28%, #cfa877, #9a763f 52%, #6a4a29);
  box-shadow:0 7px 16px rgba(56,44,32,.36), inset 0 2px 5px rgba(255,255,255,.34), inset 0 -5px 9px rgba(0,0,0,.30);
  transition:transform .4s var(--ease), opacity .35s ease;
}
.env__seal::before{ content:""; position:absolute; inset:6px; border:1px solid rgba(247,239,226,.42); border-radius:50%; }
.env__seal::after{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 34% 26%, rgba(255,255,255,.35), transparent 42%); }
.env__seal span{ position:relative; z-index:2; font-family:var(--f-serif); color:#f6ead5; font-size:1.12rem; display:flex; align-items:baseline; gap:.03em; }
.env__seal em{ font-family:var(--f-script); font-style:normal; }

/* Pista */
.intro-env__hint{
  position:absolute; bottom:-70px; left:0; right:0; text-align:center;
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.26em; font-size:.68rem; color:var(--gold-deep);
  animation:hintPulse 2.4s ease-in-out infinite; transition:opacity .4s ease, transform .4s ease;
}
@keyframes hintPulse{ 0%,100%{ opacity:.45; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-4px); } }

/* --- Carta: vive DENTRO del sobre (entre respaldo y frente) y crece hacia afuera --- */
.ie-card{
  position:absolute; left:50%; top:50%; z-index:2;
  width:min(90vw,480px); max-height:92vh; overflow-y:auto;
  transform:translate(-50%,-50%) scale(.46);
  transform-origin:center center;
  background:linear-gradient(180deg,var(--paper),#fbf4e7); border:1px solid var(--line); border-radius:3px;
  box-shadow:0 34px 80px rgba(56,44,32,.24);
  text-align:center;
}
@keyframes cardGrow{ from{ transform:translate(-50%,-50%) scale(.46); } to{ transform:translate(-50%,-50%) scale(1); } }
.ie-card::before{ content:""; position:absolute; inset:10px; border:1px solid var(--line); border-radius:2px; pointer-events:none; z-index:1; }
.ie-card__inner{
  position:relative; z-index:2;
  padding:clamp(1.9rem,6vw,3rem) clamp(1.4rem,6vw,2.6rem) clamp(1.6rem,5vw,2.2rem);
  opacity:0; transition:opacity .55s ease 1.05s;
}

/* Estado abriendo: sello se rompe → solapa se abre → sobre se funde → la carta crece y aparece el texto */
.intro-env.is-opening .env__seal{ opacity:0; transform:translate(-50%,calc(-50% + 8px)) scale(.4) rotate(-14deg); }
.intro-env.is-opening .env__flap{ transform:rotateX(-162deg); opacity:0; }
.intro-env.is-opening .env__back,
.intro-env.is-opening .env__pocket{ opacity:0; }
.intro-env.is-opening .env__flap,
.intro-env.is-opening .env__pocket,
.intro-env.is-opening .env__back,
.intro-env.is-opening .env__seal{ pointer-events:none; }
.intro-env.is-opening .ie-card{ z-index:10; animation:cardGrow .9s var(--ease) .45s forwards; }
.intro-env.is-opening .ie-card__inner{ opacity:1; }
.intro-env.is-opening .intro-env__hint{ animation:none; opacity:0; transform:translateY(6px); transition-delay:0s; }
/* Compacto para que el botón "Ver invitación" siempre sea visible, incluso en teléfonos cortos */
.ie-card .letter__seal{ width:58px; height:58px; margin:0 auto .9rem; }
.ie-card .letter__seal span{ font-size:1.1rem; }
.ie-card .label{ margin-bottom:.7rem; }
.ie-card .letter__intro{ font-size:clamp(.98rem,2.4vw,1.12rem); }
.ie-card .letter__name{ font-size:clamp(2rem,7.5vw,2.8rem); margin:.15rem 0 .35rem; }
.ie-card .letter__rule{ margin:.2rem auto .9rem; }
/* Novios + fecha */
.ie-card__to{ font-family:var(--f-serif); font-style:italic; font-size:1rem; color:var(--ink-soft); margin-bottom:.1rem; }
.ie-card__couple{ font-family:var(--f-serif); font-weight:500; font-size:clamp(1.5rem,5.5vw,2.05rem); color:var(--espresso); letter-spacing:.015em; line-height:1.15; }
.ie-card__couple em{ font-family:var(--f-script); font-style:normal; color:var(--gold); font-size:1.15em; }
.ie-card__date{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.2em; font-size:.66rem; color:var(--gold-deep); margin-top:.5rem; }
/* Lugares reservados (compacto) */
.ie-card__passes{ margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.ie-card__passes .label{ margin-bottom:0; }
.ie-card__passes-val{ font-family:var(--f-serif); font-size:1.05rem; color:var(--ink); display:inline-flex; align-items:baseline; }
.ie-card__passes-val b{ font-family:var(--f-serif); font-size:1.9em; font-weight:600; color:var(--gold-deep); line-height:1; }
.ie-card__enter{ margin-top:1.3rem; justify-content:center; }

/* ------------------------- SCROLL PROGRESS ------------------------- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:1200; background:transparent; }
.scroll-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-deep)); }

/* ------------------------- TOPBAR / NAV ------------------------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:1100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad); pointer-events:none;
  transition:background .5s ease, padding .5s ease, box-shadow .5s ease;
}
.topbar.is-solid{ background:rgba(250,245,236,.9); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); padding-top:.75rem; padding-bottom:.75rem; }
.topbar__brand{
  pointer-events:auto; font-family:var(--f-serif); font-size:1.5rem; color:var(--espresso);
  display:flex; gap:.2em; align-items:baseline; letter-spacing:.05em;
  opacity:0; transform:translateY(-8px); transition:opacity .6s ease, transform .6s ease, color .4s ease;
}
.topbar__brand .amp{ font-family:var(--f-script); color:var(--gold); font-size:.85em; }
.is-ready .topbar__brand{ opacity:1; transform:none; }
.hero-dark .topbar:not(.is-solid) .topbar__brand{ color:var(--on-dark); }
.hero-dark .topbar:not(.is-solid) .nav-toggle span{ background:var(--on-dark); }

.nav-toggle{
  pointer-events:auto; width:44px; height:44px; display:grid; gap:5px; place-content:center;
  opacity:0; transition:opacity .6s ease .1s;
}
.is-ready .nav-toggle{ opacity:1; }
.nav-toggle span{ display:block; width:26px; height:1.5px; background:var(--espresso); transition:transform .4s var(--ease), opacity .3s ease, background .4s ease; }
body.nav-open .nav-toggle span{ background:var(--on-dark); }
body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.nav-overlay{
  position:fixed; inset:0; z-index:1050; background:var(--espresso);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem;
  clip-path:circle(0% at calc(100% - 2.4rem) 2.4rem);
  transition:clip-path .7s var(--ease); pointer-events:none;
}
body.nav-open .nav-overlay{ clip-path:circle(150% at calc(100% - 2.4rem) 2.4rem); pointer-events:auto; }
.nav-overlay__list{ list-style:none; text-align:center; display:grid; gap:.35rem; }
.nav-overlay__list a{
  font-family:var(--f-serif); font-size:clamp(1.6rem,5vw,2.3rem); color:var(--on-dark);
  display:inline-block; padding:.15em .3em; position:relative;
  opacity:0; transform:translateY(18px); transition:color .35s ease;
}
.nav-overlay__list a::after{ content:""; position:absolute; left:50%; bottom:.1em; width:0; height:1px; background:var(--gold); transform:translateX(-50%); transition:width .4s var(--ease); }
.nav-overlay__list a:hover{ color:var(--gold); }
.nav-overlay__list a:hover::after{ width:60%; }
body.nav-open .nav-overlay__list a{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.nav-overlay__list li{ --i:0; }
body.nav-open .nav-overlay__list li:nth-child(1) a{ transition-delay:.15s; }
body.nav-open .nav-overlay__list li:nth-child(2) a{ transition-delay:.2s; }
body.nav-open .nav-overlay__list li:nth-child(3) a{ transition-delay:.25s; }
body.nav-open .nav-overlay__list li:nth-child(4) a{ transition-delay:.3s; }
body.nav-open .nav-overlay__list li:nth-child(5) a{ transition-delay:.35s; }
body.nav-open .nav-overlay__list li:nth-child(6) a{ transition-delay:.4s; }
body.nav-open .nav-overlay__list li:nth-child(7) a{ transition-delay:.45s; }
body.nav-open .nav-overlay__list li:nth-child(8) a{ transition-delay:.5s; }
body.nav-open .nav-overlay__list li:nth-child(9) a{ transition-delay:.55s; }
.nav-overlay__foot{ text-align:center; opacity:0; transition:opacity .6s ease .5s; }
body.nav-open .nav-overlay__foot{ opacity:1; }
.nav-overlay__foot .script{ color:var(--on-dark); }
.nav-overlay__foot .label{ color:rgba(247,239,226,.6); margin-top:.4rem; }

/* ------------------------- MÚSICA ------------------------- */
.music-toggle{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:1100;
  width:52px; height:52px; border-radius:50%; background:rgba(250,245,236,.92);
  box-shadow:0 6px 24px rgba(56,44,32,.18); display:grid; place-items:center;
  border:1px solid var(--line); backdrop-filter:blur(8px);
  transition:transform .4s var(--ease), box-shadow .4s ease;
}
.music-toggle:hover{ transform:scale(1.08); }
.music-toggle__icon{ width:20px; height:20px; color:var(--gold-deep); }
.music-toggle__bars{ display:none; gap:2px; align-items:flex-end; height:18px; }
.music-toggle__bars i{ width:3px; background:var(--gold-deep); height:6px; border-radius:2px; animation:bars 1s ease-in-out infinite; }
.music-toggle__bars i:nth-child(2){ animation-delay:.2s; }
.music-toggle__bars i:nth-child(3){ animation-delay:.4s; }
.music-toggle__bars i:nth-child(4){ animation-delay:.6s; }
.music-toggle.is-playing .music-toggle__icon{ display:none; }
.music-toggle.is-playing .music-toggle__bars{ display:flex; }
@keyframes bars{ 0%,100%{ height:5px; } 50%{ height:16px; } }

/* ------------------------- PÉTALOS ------------------------- */
.petals{ position:fixed; inset:0; z-index:900; pointer-events:none; overflow:hidden; }
.petal{ position:absolute; top:-8%; will-change:transform; color:var(--taupe,#c9ae8c); opacity:.55; }
.petal svg{ width:100%; height:auto; display:block; }

/* ------------------------- HERO ------------------------- */
.hero{ position:relative; min-height:100svh; display:grid; place-items:center; text-align:center; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__img{
  width:100%; height:100%; object-fit:cover; object-position:center 32%;
  transform:scale(1.14); animation:kenburns 16s ease-out forwards;
}
@keyframes kenburns{ to{ transform:scale(1.0); } }
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(40,30,20,.42) 0%, rgba(40,30,20,.12) 32%, rgba(40,30,20,.30) 68%, rgba(40,30,20,.62) 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(40,30,20,.35) 100%);
}
.hero__content{ position:relative; z-index:2; padding:2rem var(--pad); color:var(--on-dark); max-width:820px; }
.hero__eyebrow{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.4em;
  font-size:clamp(.62rem,2vw,.78rem); color:var(--on-dark-soft); margin-bottom:1.6rem;
}
.hero__eyebrow.light{ color:var(--on-dark-soft); }
.hero__monogram{
  display:flex; align-items:center; justify-content:center; gap:.4em;
  font-family:var(--f-serif); font-size:clamp(1.4rem,4vw,2rem); letter-spacing:.1em;
  color:var(--on-dark); margin-bottom:.4rem;
}
.hero__monogram em{ font-family:var(--f-script); color:#F0D9B8; font-style:normal; font-size:1.2em; }
.hero__names{ display:flex; flex-direction:column; align-items:center; gap:.1rem; margin:.4rem 0 .8rem; font-weight:400; }
.hero__name{ font-family:var(--f-script); font-size:clamp(3.6rem,17vw,8rem); line-height:.95; color:var(--on-dark); text-shadow:0 4px 40px rgba(30,20,12,.4); }
.hero__and{ font-family:var(--f-serif); font-style:italic; font-size:clamp(1.1rem,3vw,1.5rem); color:#F0D9B8; letter-spacing:.05em; margin:-.2em 0; }
.hero__tagline{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.5em; font-size:clamp(.7rem,2.2vw,.95rem); color:var(--on-dark); margin-bottom:1.8rem; }
.hero__date{
  display:inline-flex; align-items:center; gap:1rem; color:var(--on-dark);
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.25em; font-size:.78rem;
}
.hero__date b{ font-family:var(--f-serif); font-size:2.4em; font-weight:500; letter-spacing:0; line-height:1; }
.hero__date span{ position:relative; }
.hero__date span:first-child::after{ content:""; }
.hero__date{ padding-top:1.2rem; }
.hero__date::before,.hero__date::after{ content:none; }
.hero__scroll{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--on-dark-soft); }
.hero__scroll-text{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.3em; font-size:.6rem; }
.hero__scroll-line{ width:1px; height:46px; background:linear-gradient(var(--on-dark-soft),transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; top:0; left:0; width:100%; height:40%; background:var(--on-dark); animation:scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(260%); } }

/* Reveal del hero */
.reveal-hero{ opacity:0; transform:translateY(26px); filter:blur(6px); }
.hero-in .reveal-hero{ opacity:1; transform:none; filter:blur(0); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
.hero-in .reveal-hero[data-d="1"]{ transition-delay:.1s; }
.hero-in .reveal-hero[data-d="2"]{ transition-delay:.28s; }
.hero-in .reveal-hero[data-d="3"]{ transition-delay:.46s; }
.hero-in .reveal-hero[data-d="4"]{ transition-delay:.62s; }
.hero-in .reveal-hero[data-d="5"]{ transition-delay:.74s; }
.hero-in .reveal-hero[data-d="6"]{ transition-delay:.95s; }
.hero-in .reveal-hero[data-d="7"]{ transition-delay:1.12s; }

/* ------------------------- CARTA DE INVITACIÓN ------------------------- */
.letter{ display:grid; place-items:center; }
.letter__card{
  position:relative; max-width:580px; width:100%; text-align:center;
  background:linear-gradient(180deg,var(--paper),#fbf4e7);
  border:1px solid var(--line); border-radius:3px;
  padding:clamp(3rem,8vw,4.6rem) clamp(1.6rem,6vw,3.6rem) clamp(2.6rem,6vw,3.4rem);
  box-shadow:0 30px 72px rgba(56,44,32,.13);
}
.letter__card::before{ content:""; position:absolute; inset:11px; border:1px solid var(--line); border-radius:2px; pointer-events:none; }
.letter__seal{
  width:80px; height:80px; border-radius:50%; margin:0 auto 1.8rem; display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 38% 30%, #c69c6b, #96733f 55%, #6d4d2c);
  box-shadow:0 8px 18px rgba(56,44,32,.3), inset 0 2px 6px rgba(255,255,255,.32), inset 0 -5px 10px rgba(0,0,0,.28);
}
.letter__seal::before{ content:""; position:absolute; inset:8px; border:1px solid rgba(247,239,226,.42); border-radius:50%; }
.letter__seal span{ font-family:var(--f-serif); color:#f4e6cf; font-size:1.55rem; display:flex; align-items:baseline; gap:.04em; letter-spacing:.02em; }
.letter__seal em{ font-family:var(--f-script); font-style:normal; font-size:.92em; }
.letter__card .label{ margin-bottom:1.4rem; }
.letter__intro{ font-family:var(--f-serif); font-style:italic; font-size:clamp(1.05rem,2.6vw,1.3rem); color:var(--ink-soft); }
.letter__name{ font-family:var(--f-script); font-size:clamp(2.4rem,9vw,3.9rem); color:var(--gold-deep); line-height:1.12; margin:.3rem 0 .5rem; }
.letter__rule{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin:.4rem auto 1.5rem; }
.letter__rule::before,.letter__rule::after{ content:""; width:52px; height:1px; background:var(--line-2); }
.letter__rule span{ width:6px; height:6px; border:1px solid var(--gold); transform:rotate(45deg); display:block; }
.letter__body{ font-size:clamp(.95rem,2.2vw,1.05rem); color:var(--ink); font-weight:300; max-width:42ch; margin:0 auto; line-height:1.85; }
.letter__passes{ margin-top:2rem; padding-top:1.7rem; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:center; }
.letter__passes .label{ margin-bottom:.6rem; }
.letter__passes-num{ font-family:var(--f-serif); font-size:clamp(2.6rem,8vw,3.4rem); color:var(--espresso); line-height:1; font-weight:500; }
.letter__passes-txt{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.28em; font-size:.66rem; color:var(--ink-soft); margin-top:.5rem; }

/* ------------------------- INTRO ------------------------- */
.intro__wrap{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.intro__text{ text-align:left; }
.intro__text .sprig{ margin-left:0; }
.intro__text .label{ margin-bottom:1.1rem; }
.intro__text .display{ margin-bottom:1.4rem; }
.intro__text .lead{ margin-bottom:1.3rem; }
.intro__signature{ margin-top:2rem; display:flex; flex-direction:column; gap:.2rem; }
.intro__signature .script{ font-size:2.4rem; line-height:1; }
.intro__signature .label{ color:var(--ink-soft); }

.frame{ position:relative; aspect-ratio:3/4; }
.frame img{ width:100%; height:100%; object-fit:cover; border-radius:2px; }
.frame::before{ content:""; position:absolute; inset:14px; border:1px solid rgba(255,255,255,.55); z-index:2; pointer-events:none; }
.frame__corner{ position:absolute; width:26px; height:26px; border:1px solid var(--gold); z-index:3; }
.frame__corner.tl{ top:-8px; left:-8px; border-right:0; border-bottom:0; }
.frame__corner.tr{ top:-8px; right:-8px; border-left:0; border-bottom:0; }
.frame__corner.bl{ bottom:-8px; left:-8px; border-right:0; border-top:0; }
.frame__corner.br{ bottom:-8px; right:-8px; border-left:0; border-top:0; }
.intro__figure{ position:relative; }
.intro__badge{ position:absolute; right:-26px; bottom:-26px; width:104px; height:104px; background:var(--paper); border-radius:50%; display:grid; place-items:center; box-shadow:0 10px 30px rgba(56,44,32,.16); }
.intro__badge svg{ position:absolute; inset:0; width:100%; height:100%; animation:spin 26s linear infinite; }
.intro__badge text{ font-family:var(--f-label); font-size:6.6px; letter-spacing:1.4px; fill:var(--gold-deep); text-transform:uppercase; }
.intro__badge em{ font-family:var(--f-script); font-style:normal; color:var(--gold); font-size:2.2rem; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ------------------------- COUNTDOWN ------------------------- */
.countdown{ position:relative; min-height:78vh; display:grid; place-items:center; text-align:center; overflow:hidden; padding:clamp(4rem,10vw,7rem) var(--pad); }
.countdown__media{ position:absolute; inset:-12% 0; }
.countdown__media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.countdown__overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(46,34,22,.55),rgba(46,34,22,.42) 40%,rgba(46,34,22,.6)); }
.countdown__content{ position:relative; z-index:2; color:var(--on-dark); width:100%; }
.countdown__content .label{ margin-bottom:1rem; }
.countdown__content .display{ margin-bottom:2.4rem; }
.countdown__timer{ display:inline-flex; align-items:flex-start; justify-content:center; gap:clamp(.4rem,2vw,1.4rem); }
.cd-unit{ display:flex; flex-direction:column; align-items:center; min-width:clamp(58px,15vw,96px); }
.cd-num{
  font-family:var(--f-serif); font-weight:400; font-size:clamp(2.4rem,10vw,4.6rem); line-height:1;
  color:var(--on-dark); font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.cd-num.tick{ animation:tick .5s var(--ease); }
@keyframes tick{ 0%{ transform:translateY(-6px); opacity:.4; } 100%{ transform:none; opacity:1; } }
.cd-label{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.28em; font-size:clamp(.55rem,1.6vw,.7rem); color:var(--on-dark-soft); margin-top:.8rem; }
.cd-sep{ font-family:var(--f-serif); font-size:clamp(1.6rem,7vw,3.2rem); color:rgba(247,239,226,.5); line-height:1; padding-top:.1em; }

/* ------------------------- LA FECHA / CALENDARIO ------------------------- */
.date__inner{ max-width:640px; margin:0 auto; text-align:center; }
.date__inner .label{ margin-bottom:1.6rem; }
.date__big{ margin-bottom:2.6rem; }
.date__dow{ display:block; font-family:var(--f-script); color:var(--gold-deep); font-size:2.2rem; }
.date__row{ display:flex; align-items:center; justify-content:center; gap:clamp(.8rem,3vw,1.6rem); margin:.2rem 0; }
.date__row::before,.date__row::after{ content:""; height:1px; flex:1; max-width:70px; background:var(--line-2); }
.date__mon,.date__yr{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.28em; font-size:clamp(.72rem,2vw,.9rem); color:var(--espresso); }
.date__day{ font-family:var(--f-serif); font-size:clamp(3.4rem,13vw,5.6rem); line-height:.9; color:var(--espresso); font-weight:500; }
.date__time{ display:block; font-family:var(--f-serif); font-style:italic; font-size:1.1rem; color:var(--ink-soft); margin-top:.4rem; }

.calendar{ max-width:340px; margin:0 auto 2.4rem; padding:1.4rem 1.2rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 34px rgba(56,44,32,.08); }
.cal__title{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.24em; font-size:.72rem; color:var(--gold-deep); text-align:center; margin-bottom:1rem; }
.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.2rem; }
.cal__dow{ font-family:var(--f-body); font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); text-align:center; padding-bottom:.5rem; font-weight:500; }
.cal__day{ aspect-ratio:1; display:grid; place-items:center; font-size:.82rem; color:var(--ink); border-radius:50%; position:relative; }
.cal__day.empty{ color:transparent; }
.cal__day.is-wed{ color:#fff; font-weight:600; background:var(--gold); border-radius:50%; box-shadow:0 3px 10px rgba(166,128,90,.45); }
.cal__day.is-wed::after{ content:"♥"; position:absolute; top:-7px; right:-3px; font-size:.62rem; color:var(--gold-deep); }
@keyframes pop{ to{ transform:scale(1); } }

/* ------------------------- PROGRAMA / TIMELINE ------------------------- */
.program__head, .venue__head, .gallery__head{ text-align:center; max-width:640px; margin:0 auto clamp(3rem,7vw,4.5rem); }
.program__head .label,.venue__head .label,.gallery__head .label{ margin-bottom:1rem; }
.timeline{ list-style:none; max-width:620px; margin:0 auto; position:relative; }
.timeline::before{ content:""; position:absolute; left:27px; top:8px; bottom:8px; width:1px; background:linear-gradient(var(--line-2),var(--line-2)); }
.tl-item{ display:grid; grid-template-columns:56px 1fr; gap:1.4rem; padding:0 0 2.4rem; position:relative; }
.tl-item:last-child{ padding-bottom:0; }
.tl-icon{ width:56px; height:56px; border-radius:50%; background:var(--paper); border:1px solid var(--line-2); display:grid; place-items:center; color:var(--gold-deep); position:relative; z-index:2; }
.tl-icon svg{ width:26px; height:26px; }
.tl-body{ padding-top:.3rem; }
.tl-time{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.22em; font-size:.68rem; color:var(--gold-deep); }
.tl-title{ font-family:var(--f-serif); font-size:clamp(1.3rem,3.5vw,1.7rem); color:var(--espresso); font-weight:500; margin:.15rem 0 .3rem; }
.tl-desc{ font-size:.92rem; color:var(--ink-soft); font-weight:300; }

/* ------------------------- VESTIMENTA ------------------------- */
.dress__inner{ max-width:660px; margin:0 auto; text-align:center; }
.dress__inner .label{ margin-bottom:1rem; }
.dress__code{ font-family:var(--f-serif); font-style:italic; font-size:clamp(1.2rem,3vw,1.5rem); color:var(--gold-deep); margin:.4rem 0 1.2rem; }
.dress__grid{ display:flex; gap:clamp(1.2rem,4vw,2.6rem); justify-content:center; margin:2.6rem 0; flex-wrap:wrap; }
.dress__card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.6rem; width:min(230px,42vw); box-shadow:0 10px 28px rgba(56,44,32,.06); }
.dress__ico{ width:56px; height:56px; margin:0 auto 1rem; color:var(--gold-deep); }
.dress__card .label{ display:block; margin-bottom:.6rem; }
.dress__card .body{ font-size:.86rem; }
.palette{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.4rem; }
.swatch{ width:38px; height:38px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(74,59,46,.12), 0 4px 12px rgba(56,44,32,.1); position:relative; cursor:default; transition:transform .35s var(--ease); }
.swatch:hover{ transform:translateY(-5px) scale(1.08); }
.swatch::after{ content:attr(data-name); position:absolute; bottom:-30px; left:50%; transform:translateX(-50%) translateY(4px); font-family:var(--f-label); font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; opacity:0; transition:opacity .3s ease, transform .3s ease; pointer-events:none; }
.swatch:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }
.dress__hint{ font-family:var(--f-serif); font-style:italic; font-size:.9rem; color:var(--ink-soft); margin-top:2.4rem; }

/* ------------------------- LUGAR ------------------------- */
.venue__grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(1rem,3vw,2rem); align-items:stretch; max-width:920px; margin:0 auto; }
.venue__card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.8rem,4vw,2.8rem) 1.6rem; text-align:center; display:flex; flex-direction:column; align-items:center; box-shadow:0 12px 34px rgba(56,44,32,.07); }
.venue__pin{ width:52px; height:52px; color:var(--gold-deep); margin-bottom:1rem; }
.venue__card .label{ margin-bottom:.7rem; }
.venue__name{ font-family:var(--f-serif); font-size:clamp(1.35rem,3.4vw,1.75rem); color:var(--espresso); font-weight:500; margin-bottom:.7rem; line-height:1.2; }
.venue__card .body{ margin-bottom:1.6rem; font-size:.9rem; }
.venue__card .btn{ margin-top:auto; }
.venue__amp{ display:grid; place-items:center; font-family:var(--f-script); font-size:clamp(2.4rem,6vw,3.6rem); color:var(--gold); }

/* ------------------------- GALERÍA ------------------------- */
.gallery__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:.7rem; }
.g-item{ position:relative; overflow:hidden; border-radius:2px; cursor:pointer; background:var(--bg-deep); }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.g-item::after{ content:""; position:absolute; inset:0; background:rgba(46,34,22,0); transition:background .5s ease; }
.g-item::before{ content:"+"; position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%) scale(.6); width:40px; height:40px; display:grid; place-items:center; color:#fff; font-size:1.6rem; font-weight:200; border:1px solid rgba(255,255,255,.7); border-radius:50%; opacity:0; transition:opacity .5s ease, transform .5s var(--ease); }
.g-item:hover img{ transform:scale(1.08); }
.g-item:hover::after{ background:rgba(46,34,22,.25); }
.g-item:hover::before{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.g-tall{ grid-row:span 2; }
.g-wide{ grid-column:span 2; }
.gallery__hint{ text-align:center; font-family:var(--f-serif); font-style:italic; color:var(--ink-soft); margin-top:2rem; font-size:.95rem; }

/* ------------------------- QUOTE ------------------------- */
.quote{ position:relative; min-height:70vh; display:grid; place-items:center; text-align:center; overflow:hidden; padding:clamp(4rem,10vw,8rem) var(--pad); }
.quote__media{ position:absolute; inset:-12% 0; }
.quote__media img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:grayscale(.2); }
.quote__overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(38,28,18,.66),rgba(38,28,18,.5) 50%,rgba(38,28,18,.7)); }
.quote__content{ position:relative; z-index:2; color:var(--on-dark); max-width:720px; }
.quote__mark{ font-family:var(--f-serif); font-size:6rem; line-height:.4; color:var(--gold); display:block; margin-bottom:1rem; opacity:.85; }
.quote__text{ font-family:var(--f-serif); font-style:italic; font-weight:300; font-size:clamp(1.4rem,4.2vw,2.3rem); line-height:1.4; }
.quote__cite{ display:block; margin-top:1.8rem; font-family:var(--f-label); text-transform:uppercase; letter-spacing:.32em; font-size:.72rem; color:var(--on-dark-soft); font-style:normal; }

/* ------------------------- RSVP ------------------------- */
.rsvp__inner{ max-width:560px; margin:0 auto; text-align:center; }
.rsvp__inner .label{ margin-bottom:1rem; }
.rsvp__inner .body.center{ margin-bottom:2.6rem; }
.rsvp__form{ text-align:left; display:grid; gap:1.5rem; }
.field{ display:grid; gap:.5rem; }
.field label,.field__legend{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.18em; font-size:.66rem; color:var(--gold-deep); }
.field label em{ text-transform:none; letter-spacing:0; font-family:var(--f-serif); font-style:italic; color:var(--ink-soft); }
.field input,.field textarea,.field select{
  font-family:var(--f-serif); font-size:1.05rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line-2); border-radius:2px; padding:.85rem 1rem; width:100%;
  transition:border-color .3s ease, box-shadow .3s ease; resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:#b3a591; font-style:italic; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(166,128,90,.14); }
.field input.invalid,.choice.invalid{ border-color:#b56a4f; }
.choice{ display:flex; gap:.8rem; flex-wrap:wrap; }
.choice__opt{ flex:1; min-width:140px; position:relative; }
.choice__opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.choice__opt span{ display:block; text-align:center; font-family:var(--f-serif); font-size:1rem; padding:.8rem 1rem; border:1px solid var(--line-2); border-radius:2px; background:var(--paper); color:var(--ink-soft); transition:all .3s ease; }
.choice__opt input:checked + span{ background:var(--espresso); color:var(--on-dark); border-color:var(--espresso); }
.choice__opt input:focus-visible + span{ box-shadow:0 0 0 3px rgba(166,128,90,.2); }
.select-wrap{ position:relative; }
.select-wrap::after{ content:""; position:absolute; right:1rem; top:50%; width:8px; height:8px; border-right:1.5px solid var(--gold-deep); border-bottom:1.5px solid var(--gold-deep); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer; }
.rsvp__submit{ justify-content:center; margin-top:.4rem; }
.rsvp__note{ text-align:center; font-size:.76rem; color:var(--ink-soft); font-style:italic; font-family:var(--f-serif); }
#guestsField{ transition:opacity .4s ease, max-height .5s ease; overflow:hidden; max-height:140px; }
#guestsField.hidden{ opacity:0; max-height:0; margin:0; pointer-events:none; }

/* ------------------------- LLUVIA DE SOBRES ------------------------- */
.gift{ text-align:center; }
.gift__inner{ max-width:520px; margin:0 auto; }
.gift__ico{ width:64px; height:64px; margin:0 auto 1.4rem; color:var(--gold-deep); }
.gift__inner .label{ margin-bottom:.8rem; }
.gift__inner .display{ margin-bottom:1.4rem; }

/* ------------------------- NOTA (BANDA) ------------------------- */
.note-band{ background:var(--espresso); color:var(--on-dark); text-align:center; padding:clamp(3rem,8vw,4.5rem) var(--pad); }
.note-band__inner{ max-width:520px; margin:0 auto; }
.note-band .sprig{ color:var(--gold); }
.note-band .script{ color:var(--on-dark); margin-bottom:.8rem; }
.note-band .body{ color:var(--on-dark-soft); }

/* ------------------------- CIERRE ------------------------- */
.closing{ position:relative; min-height:100svh; display:grid; place-items:center; text-align:center; overflow:hidden; padding:clamp(4rem,10vw,7rem) var(--pad); }
.closing__media{ position:absolute; inset:-12% 0; }
.closing__media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.closing__overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(40,29,18,.5),rgba(40,29,18,.4) 45%,rgba(40,29,18,.72)); }
.closing__content{ position:relative; z-index:2; color:var(--on-dark); }
.closing__monogram{ display:flex; align-items:center; justify-content:center; gap:.35em; font-family:var(--f-serif); font-size:clamp(1.8rem,6vw,2.8rem); letter-spacing:.08em; margin:1rem 0; }
.closing__monogram em{ font-family:var(--f-script); color:#F0D9B8; font-style:normal; }
.closing__script{ font-family:var(--f-script); font-size:clamp(2.4rem,8vw,4rem); line-height:1.1; margin:.6rem 0 1.6rem; color:var(--on-dark); }
.closing__hash{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.3em; font-size:.74rem; color:#F0D9B8; margin-top:2rem; }

/* ------------------------- FOOTER ------------------------- */
.footer{ text-align:center; padding:clamp(3rem,7vw,4.5rem) var(--pad) 3rem; background:var(--bg-deep); }
.footer__monogram{ display:flex; align-items:center; justify-content:center; gap:.3em; font-family:var(--f-serif); font-size:1.8rem; color:var(--espresso); }
.footer__monogram em{ font-family:var(--f-script); color:var(--gold); font-style:normal; }
.footer__names{ margin:.6rem 0 .2rem; }
.footer__date{ color:var(--ink-soft); }
.footer__credit{ margin-top:1.4rem; font-size:.72rem; color:var(--ink-soft); font-style:italic; font-family:var(--f-serif); }
.footer .heart{ color:var(--gold); }

/* ------------------------- LIGHTBOX ------------------------- */
.lightbox{ position:fixed; inset:0; z-index:1500; background:rgba(30,22,14,.94); display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s .4s; backdrop-filter:blur(6px); }
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .4s ease; }
.lightbox__stage{ max-width:90vw; max-height:82vh; }
.lightbox__stage img{ max-width:90vw; max-height:82vh; object-fit:contain; border-radius:2px; box-shadow:0 20px 70px rgba(0,0,0,.5); opacity:0; transform:scale(.96); transition:opacity .4s ease, transform .4s var(--ease); }
.lightbox.is-open .lightbox__stage img{ opacity:1; transform:none; }
.lightbox__close{ position:absolute; top:1.2rem; right:1.5rem; font-size:2.4rem; color:var(--on-dark); line-height:1; width:44px; height:44px; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:2.6rem; color:var(--on-dark); width:56px; height:56px; opacity:.7; transition:opacity .3s ease, transform .3s ease; }
.lightbox__nav:hover{ opacity:1; }
.lightbox__prev{ left:.5rem; }
.lightbox__next{ right:.5rem; }
.lightbox__count{ position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); font-family:var(--f-label); letter-spacing:.25em; font-size:.72rem; color:var(--on-dark-soft); }

/* ------------------------- TOAST ------------------------- */
.toast{ position:fixed; left:50%; bottom:2rem; transform:translate(-50%,120%); z-index:1600; background:var(--espresso); color:var(--on-dark); padding:.9rem 1.6rem; border-radius:2px; font-family:var(--f-serif); font-size:1rem; box-shadow:0 14px 40px rgba(0,0,0,.3); max-width:90vw; text-align:center; opacity:0; visibility:hidden; transition:transform .5s var(--ease), opacity .4s ease, visibility 0s .5s; }
.toast.show{ transform:translate(-50%,0); opacity:1; visibility:visible; transition:transform .5s var(--ease), opacity .4s ease; }

/* ------------------------- REVEAL ------------------------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-img{ opacity:0; clip-path:inset(0 0 100% 0); transform:scale(1.06); transition:opacity 1.1s var(--ease), clip-path 1.2s var(--ease), transform 1.4s var(--ease); }
.reveal-img.in{ opacity:1; clip-path:inset(0 0 0 0); transform:none; }
/* Stagger para hijos con .reveal dentro de grids */
.reveal[data-delay="1"]{ transition-delay:.1s; }
.reveal[data-delay="2"]{ transition-delay:.2s; }
.reveal[data-delay="3"]{ transition-delay:.3s; }

/* ------------------------- NUESTRA HISTORIA (TIMELINE) ------------------------- */
.story-tl__head{ text-align:center; max-width:640px; margin:0 auto clamp(3rem,7vw,4.5rem); }
.story-tl__head .label{ margin-bottom:1rem; }
.story-tl__line{ max-width:960px; margin:0 auto; position:relative; }
.story-tl__line::before{ content:""; position:absolute; left:50%; top:12px; bottom:12px; width:1px; background:linear-gradient(var(--line-2),var(--taupe),var(--line-2)); transform:translateX(-50%); }
.st-item{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,5vw,4rem); align-items:center; margin-bottom:clamp(3rem,7vw,5rem); position:relative; }
.st-item:last-child{ margin-bottom:0; }
.st-item::before{ content:""; position:absolute; left:50%; top:50%; width:14px; height:14px; border-radius:50%; background:var(--bg); border:1px solid var(--gold); transform:translate(-50%,-50%); z-index:2; }
.st-item::after{ content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%; background:var(--gold); transform:translate(-50%,-50%); z-index:3; transition:transform .4s var(--ease); }
.st-item.in::after{ animation:pop .6s var(--ease) .3s both; }
.st-figure{ position:relative; }
.st-figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center; border-radius:2px; box-shadow:0 16px 42px rgba(56,44,32,.16); display:block; }
.st-figure .frame__corner{ width:22px; height:22px; }
.st-card{ padding:0 clamp(.5rem,2vw,1.6rem); }
.st-year{ font-family:var(--f-serif); font-size:clamp(2.4rem,6vw,3.6rem); color:var(--taupe); line-height:1; display:block; font-weight:500; }
.st-title{ font-family:var(--f-serif); font-size:clamp(1.4rem,3.6vw,1.95rem); color:var(--espresso); font-weight:500; margin:.15rem 0 .6rem; }
.st-card .body{ font-size:.94rem; }
.st-item:nth-child(even) .st-figure{ order:2; }
.st-item:nth-child(even) .st-card{ order:1; text-align:right; }
.st-item:nth-child(odd) .st-card{ text-align:left; }

/* ------------------------- INFORMACIÓN / FAQ ------------------------- */
.faq__head{ text-align:center; max-width:640px; margin:0 auto clamp(2.5rem,6vw,3.5rem); }
.faq__head .label{ margin-bottom:1rem; }
.faq__list{ max-width:660px; margin:0 auto; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item:first-child{ border-top:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; padding:1.35rem .4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-family:var(--f-serif); font-size:clamp(1.05rem,2.6vw,1.28rem); color:var(--espresso); transition:color .3s ease; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--gold-deep); }
.faq__mark{ position:relative; width:15px; height:15px; flex:none; }
.faq__mark::before,.faq__mark::after{ content:""; position:absolute; background:var(--gold-deep); transition:transform .35s var(--ease); }
.faq__mark::before{ top:50%; left:0; width:15px; height:1.5px; transform:translateY(-50%); }
.faq__mark::after{ left:50%; top:0; width:1.5px; height:15px; transform:translateX(-50%); }
.faq__item[open] .faq__mark::after{ transform:translateX(-50%) scaleY(0); }
.faq__ans{ overflow:hidden; padding:0 .4rem; }
.faq__item[open] .faq__ans{ padding-bottom:1.35rem; animation:faqIn .45s var(--ease); }
.faq__ans p{ color:var(--ink-soft); font-size:.95rem; font-weight:300; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.link-underline{ color:var(--gold-deep); border-bottom:1px solid var(--gold); padding-bottom:1px; transition:color .3s ease; }
.link-underline:hover{ color:var(--espresso); }

/* ------------------------- BOTÓN COMPARTIR ------------------------- */
.btn--share{ margin-top:2.2rem; border:1px solid rgba(240,217,184,.55); color:#F0D9B8; background:rgba(255,255,255,.04); backdrop-filter:blur(2px); }
.btn--share:hover{ background:rgba(240,217,184,.16); border-color:#F0D9B8; }

/* ------------------------- RESPONSIVE ------------------------- */
@media (max-width:900px){
  .intro__wrap{ grid-template-columns:1fr; }
  .intro__text{ text-align:center; }
  .intro__text .sprig{ margin-inline:auto; }
  .intro__signature{ align-items:center; }
  .intro__figure{ max-width:400px; margin:0 auto; order:-1; }
  .gallery__grid{ grid-auto-rows:150px; gap:.5rem; }
}
@media (max-width:760px){
  .story-tl__line::before{ left:19px; }
  .st-item{ grid-template-columns:1fr; gap:1.1rem; padding-left:52px; margin-bottom:2.8rem; }
  .st-item::before{ left:19px; top:20px; }
  .st-item::after{ left:19px; top:20px; }
  .st-item:nth-child(even) .st-figure,.st-item:nth-child(odd) .st-figure{ order:0; }
  .st-item:nth-child(even) .st-card,.st-item:nth-child(odd) .st-card{ order:0; text-align:left; padding:0; }
  .st-year{ font-size:2.4rem; }
}
@media (max-width:640px){
  .venue__grid{ grid-template-columns:1fr; }
  .venue__amp{ padding:.4rem 0; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:44vw; }
  .g-wide{ grid-column:span 2; }
  .g-tall{ grid-row:span 1; }
  .cd-unit{ min-width:0; }
  .cd-sep{ display:none; }
  .countdown__timer{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem 1rem; max-width:320px; }
  .hero__date{ flex-direction:row; gap:.7rem; font-size:.68rem; }
  .dress__grid{ gap:1rem; }
  .dress__card{ width:min(240px,80vw); }
  .intro__badge{ width:84px; height:84px; right:-10px; bottom:-16px; }
  .toast{ bottom:5.2rem; }
}
@media (max-width:400px){
  .hero__name{ font-size:22vw; }
}

/* ------------------------- ACCESIBILIDAD / REDUCED MOTION ------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal,.reveal-img,.reveal-hero{ opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important; }
  .hero__img{ transform:none; }
  .petals{ display:none; }
  .env__lilies{ display:none; }
}

/* =====================================================================
   MEJORAS · sobre realista, alcatraces, vestimenta (no usar),
   lugar dinámico (mapas), sección de canción
   ===================================================================== */

/* ---------- Intro: ambiente más cálido ---------- */
.intro-env{
  background:
    radial-gradient(1200px 820px at 50% 28%, #fdf7ec 0%, #f3e9d7 62%, #ebddc6 100%);
}
.intro-env__scene{ max-width:600px; overflow:visible; }

/* ---------- Sobre más realista ---------- */
.env{ width:clamp(316px,88vw,392px); }

/* Respaldo con más profundidad */
.env__back{
  background:linear-gradient(158deg,#efe3c9 0%,#e3d0ac 55%,#d7c098 100%);
  box-shadow:
    0 44px 70px -20px rgba(56,44,32,.45),
    0 16px 30px rgba(56,44,32,.2),
    inset 0 0 0 1px rgba(122,92,62,.2),
    inset 0 2px 14px rgba(255,255,255,.38);
}
/* Forro interior (se ve al abrirse la solapa) */
.env__back::after{
  content:""; position:absolute; left:0; right:0; top:0; height:58%; z-index:1;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:linear-gradient(168deg,#7c6349,#5c4835);
  background-image:radial-gradient(circle, rgba(247,239,226,.09) 1px, transparent 1.5px);
  background-size:9px 9px;
  border-radius:11px 11px 0 0;
}

/* Frente con textura de papel */
.env__pocket{
  background:linear-gradient(168deg,#f1e6cc 0%,#e5d2ad 100%);
  box-shadow:inset 0 -24px 44px rgba(122,92,62,.16), inset 0 1px 0 rgba(255,255,255,.45);
}
.env__pocket::before{
  content:""; position:absolute; inset:0; z-index:0; border-radius:11px;
  clip-path:polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
  background-image:
    repeating-linear-gradient(94deg, rgba(122,92,62,.035) 0 1px, transparent 1px 5px),
    radial-gradient(60% 50% at 50% 120%, rgba(122,92,62,.12), transparent 70%);
  mix-blend-mode:multiply; pointer-events:none;
}

/* Solapa superior */
.env__flap{
  background:linear-gradient(161deg, #f8eeda 0%, #eee0bf 48%, #dfca9e 100%);
  filter:drop-shadow(0 11px 12px rgba(92,68,44,.34)) drop-shadow(0 3px 4px rgba(92,68,44,.26));
}
/* Doblez: brillo arriba, sombra en la punta y sombreado hacia los bordes */
.env__flap::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,251,240,.6) 0, rgba(255,251,240,0) 8%),
    linear-gradient(180deg, transparent 70%, rgba(98,73,46,.18) 100%),
    radial-gradient(135% 95% at 50% -6%, transparent 46%, rgba(96,72,46,.34) 100%);
}
/* Grano de papel sutil en la solapa */
.env__flap::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px; opacity:.07; mix-blend-mode:multiply;
}

/* Sello de cera más logrado */
.env__seal{
  width:78px; height:78px; top:57%;
  transform:translate(-50%,-50%) translateZ(34px);
  border-radius:49% 51% 52% 48% / 50% 49% 51% 50%;
  background:
    radial-gradient(70% 62% at 40% 32%, rgba(255,246,230,.24), transparent 62%),
    radial-gradient(circle at 46% 42%, #c0924f 0%, #a2763f 45%, #79542f 74%, #5b3d23 100%);
  box-shadow:
    0 16px 26px -5px rgba(46,34,22,.55),
    0 5px 10px rgba(46,34,22,.32),
    inset 0 2px 6px rgba(255,255,255,.3),
    inset 0 -9px 16px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(60,40,20,.34);
}
.env__seal span{ font-size:1.32rem; text-shadow:0 1px 1px rgba(0,0,0,.3); }

/* Nombre del invitado escrito en el sobre */
.env__addr{
  position:absolute; left:8%; right:8%; bottom:15%; z-index:5; text-align:center;
  pointer-events:none; transition:opacity .4s ease;
}
.env__addr-lbl{
  display:block; font-family:var(--f-label); text-transform:uppercase;
  letter-spacing:.34em; font-size:.56rem; color:rgba(74,59,46,.5); margin-bottom:.1rem;
}
.env__addr-name{
  font-family:var(--f-script); font-weight:400; color:#6a523b;
  font-size:clamp(1.25rem,5.2vw,1.65rem); line-height:1.1; display:block;
}
.env__addr::after{
  content:""; display:block; width:44%; max-width:120px; height:1px; margin:.35rem auto 0;
  background:linear-gradient(90deg, transparent, rgba(106,82,59,.5), transparent);
}
.intro-env.is-opening .env__addr{ opacity:0; }

/* Alcatraces detrás del sobre */
.env__lilies{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
.env__lilies .lily{
  position:absolute; width:auto; filter:drop-shadow(0 12px 16px rgba(56,44,32,.22));
}
.lily--a{ height:158%; right:-3%; bottom:3%; transform:rotate(13deg); transform-origin:bottom center; }
.lily--b{ height:120%; right:19%; bottom:7%; transform:scaleX(-1) rotate(13deg); transform-origin:bottom center; }
@media (max-width:520px){
  .lily--a{ height:138%; right:-7%; }
  .lily--b{ height:104%; right:14%; }
}

/* ---------- Vestimenta · colores a evitar ---------- */
.dress__no{ margin-top:3rem; }
.dress__no-title{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.24em;
  font-size:.7rem; color:var(--ink-soft); margin-bottom:1.4rem;
}
.dress__no-row{ display:flex; gap:clamp(1.4rem,6vw,2.6rem); justify-content:center; margin-bottom:2.4rem; }
.no-swatch{
  width:56px; height:56px; border-radius:50%; background:var(--c); position:relative;
  box-shadow:inset 0 0 0 1px rgba(74,59,46,.2), 0 6px 16px rgba(56,44,32,.12);
}
.no-swatch::before{
  content:attr(data-name); position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%); font-family:var(--f-label); text-transform:uppercase;
  letter-spacing:.16em; font-size:.58rem; color:var(--ink-soft); white-space:nowrap;
}
.no-swatch::after{
  content:""; position:absolute; left:50%; top:50%; width:74px; height:2.5px; border-radius:3px;
  background:#b5462f; transform:translate(-50%,-50%) rotate(-45deg);
  box-shadow:0 0 0 2.5px rgba(250,245,236,.85);
}
.dress__no-note{
  font-family:var(--f-serif); font-style:italic; font-size:1.02rem; color:var(--ink-soft);
  max-width:42ch; margin:0 auto; line-height:1.6;
}
.dress__no-note b{ color:var(--espresso); font-style:normal; font-weight:500; }

/* ---------- Lugar dinámico (mapas embebidos) ---------- */
.venue__card{ transition:transform .5s var(--ease), box-shadow .5s ease; }
.venue__card:hover{ transform:translateY(-6px); box-shadow:0 24px 54px rgba(56,44,32,.15); }
.venue__time{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.2em;
  font-size:.66rem; color:var(--gold-deep); margin:-.2rem 0 1.3rem;
}
.venue__map{
  width:100%; border-radius:4px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(56,44,32,.1); margin-bottom:1.5rem; background:var(--bg-deep);
}
.venue__map iframe{ display:block; width:100%; height:200px; border:0; filter:saturate(.9) contrast(.98); }
.venue__amp{ position:relative; }

/* ---------- Sección de canción ---------- */
.song{ text-align:center; }
.song__inner{ max-width:560px; margin:0 auto; }
.song__inner .label{ margin-bottom:1rem; }
.song__inner .display{ margin-bottom:1.1rem; }
.song__inner .body.center{ margin-bottom:2.2rem; }
.song__player{ border-radius:16px; overflow:hidden; box-shadow:0 18px 44px rgba(56,44,32,.18); background:var(--bg-deep); min-height:152px; }
.song__player iframe{ display:block; width:100%; height:152px; border:0; }

/* ---------- RSVP · cierre ---------- */
.rsvp__after{ text-align:center; margin-top:2.4rem; color:var(--gold-deep); font-size:clamp(2.2rem,7vw,3.1rem); line-height:1; }

/* ---------- Botón de música: icono ---------- */
.music-toggle__icon svg{ width:100%; height:100%; display:block; }

/* ---------- Vestimenta: ilustraciones (vestido / traje) ---------- */
.dress__ico-img{ height:96px; width:auto; margin:0 auto 1.1rem; display:block; object-fit:contain; mix-blend-mode:multiply; }

/* ---------- Mesa de regalos ---------- */
.gift__links{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.gift__hint{ margin-top:1.6rem; font-family:var(--f-serif); font-style:italic; color:var(--ink-soft); font-size:.95rem; }

/* ---------- Sello de cera: imagen real (lacre) ---------- */
.env__seal, .letter__seal{ overflow:hidden; background:none; }
.env__seal::before, .env__seal::after,
.letter__seal::before, .letter__seal::after{ display:none; }
.env__seal img, .letter__seal img{
  width:100%; height:100%; object-fit:cover; object-position:center 48%; display:block;
}
.env__seal{ box-shadow:0 13px 22px -5px rgba(46,34,22,.55), 0 4px 9px rgba(46,34,22,.32); }
.letter__seal{ box-shadow:0 9px 18px rgba(56,44,32,.3); }
.ie-card .letter__seal{ box-shadow:0 7px 14px rgba(56,44,32,.28); }

/* =====================================================================
   Hero floral (sin foto), padres/padrinos y rosas decorativas
   ===================================================================== */

/* ---------- Hero floral ---------- */
.hero--floral{
  background:radial-gradient(125% 95% at 50% 22%, #fdf8ef 0%, #f3e9d6 52%, #ead9bf 100%);
  color:var(--espresso);
}
.hero--floral .hero__eyebrow{ color:var(--gold-deep); }
.hero--floral .hero__name{ color:var(--espresso); text-shadow:none; }
.hero--floral .hero__and{ color:var(--gold); }
.hero--floral .hero__tagline{ color:var(--gold-deep); }
.hero--floral .hero__date{ color:var(--ink); }
.hero--floral .hero__date b{ color:var(--espresso); }
.hero--floral .hero__scroll{ color:var(--ink-soft); }
.hero--floral .hero__scroll-line{ background:linear-gradient(var(--ink-soft),transparent); }
.hero--floral .hero__scroll-line::after{ background:var(--gold-deep); }
.hero__flower{
  position:absolute; z-index:1; width:clamp(150px,30vw,320px); height:auto;
  mix-blend-mode:multiply; opacity:.95; pointer-events:none; user-select:none;
}
.hero__flower--tl{ top:-3%; left:-5%; transform:rotate(-10deg); }
.hero__flower--br{ bottom:-3%; right:-5%; transform:rotate(168deg); }
.hero--floral .hero__content{ position:relative; z-index:2; }

/* ---------- Padres y padrinos ---------- */
.parents{ text-align:center; position:relative; overflow:hidden; }
.parents__inner{ max-width:720px; margin:0 auto; position:relative; z-index:2; }
.parents .sprig{ color:var(--gold); }
.parents .label{ margin-bottom:.7rem; }
.parents .display{ margin-bottom:2.8rem; }
.parents__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,6vw,4rem); margin-bottom:2.8rem; }
.parents__col{ display:flex; flex-direction:column; align-items:center; }
.parents__role{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.26em;
  font-size:.66rem; color:var(--gold-deep); margin-bottom:1rem;
}
.parents__name{ font-family:var(--f-serif); font-size:clamp(1.15rem,3vw,1.45rem); color:var(--espresso); font-weight:500; line-height:1.35; }
.parents__amp{ font-family:var(--f-script); color:var(--gold); font-size:1.5rem; line-height:1.1; margin:.05rem 0; }
.parents__padrinos{ padding-top:2.2rem; border-top:1px solid var(--line); max-width:480px; margin:0 auto; }
.parents__padrinos .parents__role{ margin-bottom:.7rem; }
.parents__padrinos .parents__name em{ font-family:var(--f-script); font-style:normal; color:var(--gold); font-size:1.15em; }
.parents__flower{ position:absolute; z-index:1; width:clamp(110px,18vw,190px); opacity:.5; mix-blend-mode:multiply; pointer-events:none; }
.parents__flower--l{ top:5%; left:-3%; transform:rotate(-16deg); }
.parents__flower--r{ bottom:5%; right:-3%; transform:rotate(164deg); }

@media (max-width:620px){
  .parents__grid{ grid-template-columns:1fr; gap:2rem; }
  .parents__flower{ opacity:.33; }
}