/* ==========================================================================
   Invitación digital de boda — hoja de estilos
   Paleta tomada del referente del cliente (olivo #153817, kraft, lacre)
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Verde bosque — base #153817 elegida por el cliente.
     Toda la escala comparte tono (123°) y solo cambia la luminosidad. */
  --verde-950:#071708;
  --verde-900:#0d260e;
  --verde-800:#153817;   /* base exacta del cliente */
  --verde-700:#1e4820;
  --verde-600:#295b2c;
  --verde-500:#3a733d;
  --verde-400:#519054;
  --verde-300:#85b788;
  --verde-200:#bedabf;
  --verde-100:#ddeede;
  --verde-050:#f2f8f2;

  /* Oro — el galón bordado del traje de charro */
  --oro-200:#eee1bf;
  --oro-300:#e0ce9e;
  --oro-400:#cfb577;
  --oro-500:#be9b50;
  --oro-600:#9f7b32;
  --oro-700:#775922;

  /* Papel kraft del sobre */
  --kraft-100:#f2e3cb;
  --kraft-200:#e6cda7;
  --kraft-300:#e0c099;
  --kraft-400:#cfa87c;
  --kraft-500:#b98c60;
  --kraft-600:#966c46;

  /* Lacre */
  --wax-400:#b3252f;
  --wax-500:#9a0d18;
  --wax-600:#85040f;
  --wax-700:#6f0a12;
  --wax-900:#4a060b;

  --cream:#faf7ee;
  --ink:#16220f;
  --ink-soft:#4a5442;

  /* Tipografía */
  --font-display:'Cormorant Garamond',"Times New Roman",serif;
  --font-script:'Parisienne',"Snell Roundhand",cursive;
  --font-sans:'Jost',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Curvas — las nativas de CSS son demasiado suaves */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* Ritmo */
  --dur-press:150ms;
  --dur-ui:200ms;
  --dur-panel:280ms;
  --dur-reveal:700ms;

  --shell:min(560px,100%);
  --gutter:clamp(20px,5.5vw,34px);
  --radius:14px;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--cream);
  background:var(--verde-800);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
[hidden]{display:none !important}   /* el atributo debe ganarle a display:flex */
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:4px}

/* Bloquea el scroll mientras el sobre está cerrado */
body[data-locked="true"]{overflow:hidden;height:100dvh}

/* ---------- 3. Fondo de papel -------------------------------------------- */
.paper-grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.2;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
}

/* ==========================================================================
   4. ESCENA 1 — El sobre
   ========================================================================== */
.stage{
  position:relative;z-index:1;
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,2.2vh,20px);
  padding:clamp(22px,5vh,44px) var(--gutter);
  text-align:center;
  background:
    radial-gradient(115% 75% at 50% 2%,var(--verde-700) 0%,transparent 62%),
    radial-gradient(130% 90% at 50% 100%,var(--verde-950) 0%,transparent 58%),
    var(--verde-800);
  transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out),filter 620ms var(--ease-out);
}
.stage.is-gone{opacity:0;transform:scale(1.06);filter:blur(6px);pointer-events:none}

/* Filete decorativo ♡ */
.rule{display:flex;align-items:center;gap:12px;width:min(300px,68%);color:var(--oro-500);opacity:.9}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:currentColor;opacity:.55}
.rule svg{width:15px;height:15px;flex:none}

.stage__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:min(4.1rem,9.4vw);
  line-height:1;letter-spacing:.005em;
  white-space:nowrap;
}
.stage__names{
  font-family:var(--font-script);
  font-size:min(2.9rem,7.6vw);
  line-height:1.3;
  margin-top:-.1em;
  padding:0 .2em;
}
.stage__invite{
  font-family:var(--font-script);
  font-size:min(1.9rem,5.5vw);
  line-height:1.35;
  white-space:nowrap;
}
.stage__date{
  font-family:var(--font-display);
  font-size:clamp(1.55rem,7vw,2.1rem);
  letter-spacing:.06em;
}
.stage__guest{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.5rem,6.6vw,2rem);
  line-height:1.15;
}
.stage__seats{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,5vw,1.45rem);
  opacity:.92;
}

/* ---------- 4.1 Sobre ---------------------------------------------------- */
.envelope-wrap{
  position:relative;
  width:min(390px,84vw);
  perspective:1400px;
  margin:clamp(4px,1vh,14px) 0;
}
.envelope{
  position:relative;
  width:100%;
  aspect-ratio:1.42/1;
  transform-style:preserve-3d;
  animation:float 7s var(--ease-soft) infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.envelope.is-opening{animation:none}

/* sombra proyectada */
.envelope::after{
  content:"";position:absolute;left:6%;right:6%;bottom:-7%;height:14%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(20,26,8,.42),transparent 70%);
  filter:blur(7px);z-index:0;
  transition:opacity 620ms var(--ease-out);
}
.envelope.is-opening::after{opacity:.25}

.env__back{
  position:absolute;inset:0;z-index:1;border-radius:4px;
  background:linear-gradient(168deg,var(--kraft-200),var(--kraft-400));
}
/* Tarjeta que sale del sobre */
.env__card{
  position:absolute;left:5%;right:5%;top:6%;bottom:6%;
  z-index:2;border-radius:3px;
  background:linear-gradient(170deg,#fffdf7,var(--cream) 55%,#f2ecdd);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 24px rgba(20,26,8,.22);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;
  color:var(--verde-800);
  transform:translateY(2%);
  transition:transform 1150ms 380ms var(--ease-out),box-shadow 1150ms 380ms var(--ease-out);
}
.envelope.is-opening .env__card{
  transform:translateY(-56%);
  box-shadow:0 22px 40px rgba(20,26,8,.3);
}
.env__mono{
  width:52%;height:auto;
  color:var(--oro-700);          /* la herradura */
  --mono-tinta:var(--verde-800); /* las iniciales sobre la tarjeta crema */
}
.env__card .sub{
  font-family:var(--font-script);font-size:clamp(1rem,4.2vw,1.25rem);
  color:var(--verde-700);opacity:.85;margin-top:-.2em;
}

/* Cuerpo frontal: triángulos laterales + base */
.env__front{
  position:absolute;inset:0;z-index:3;border-radius:4px;
  background:linear-gradient(200deg,var(--kraft-300),var(--kraft-400) 62%,var(--kraft-500));
  clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%);
}
.env__front::after{ /* sombra que proyecta la solapa cerrada */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(90,62,34,.22),transparent 62%);
  clip-path:polygon(0 0,50% 46%,100% 0,100% 8%,50% 54%,0 8%);
}
.env__front::before{ /* pliegue central sutil */
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom right,transparent calc(50% - .5px),rgba(150,108,70,.28) 50%,transparent calc(50% + .5px)),
    linear-gradient(to bottom left, transparent calc(50% - .5px),rgba(150,108,70,.28) 50%,transparent calc(50% + .5px));
}
/* Solapa superior */
.env__flap{
  position:absolute;top:0;left:0;right:0;height:56%;
  z-index:5;transform-origin:top center;
  background:linear-gradient(178deg,var(--kraft-100),var(--kraft-300) 70%,var(--kraft-400));
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform:rotateX(0deg);
  transition:transform 980ms var(--ease-in-out);
  backface-visibility:hidden;
}
.env__flap::after{ /* luz arriba, sombra en la punta */
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.4),transparent 26%),
    linear-gradient(180deg,transparent 62%,rgba(120,84,48,.2));
}
.envelope.is-opening .env__flap{transform:rotateX(178deg)}
.envelope.flap-behind .env__flap{z-index:1}

/* Las iniciales dentro del SVG toman la tipografía del sitio */
.mono-script{
  font-family:var(--font-script);
  /* El color llega por variable desde el contenedor: un selector descendiente
     no cruzaría la frontera del <use>. */
  fill:var(--mono-tinta,var(--cream));
  stroke:var(--mono-borde,none);
  stroke-width:var(--mono-borde-ancho,0);
  paint-order:stroke fill;
}

/* ---------- 4.2 Lacre ---------------------------------------------------- */
.seal{
  position:absolute;left:50%;top:54%;z-index:6;
  width:23%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  border-radius:48% 52% 45% 55%/52% 45% 55% 48%;
  background:radial-gradient(60% 60% at 38% 32%,var(--wax-400),var(--wax-600) 52%,var(--wax-700) 78%,var(--wax-900));
  box-shadow:0 3px 9px rgba(50,4,8,.45),0 1px 0 rgba(255,255,255,.22) inset;
  color:#f3d9d9;
  transition:transform 180ms var(--ease-out),opacity 420ms var(--ease-out),filter 420ms var(--ease-out);
}
.seal__mono{
  width:80%;height:auto;color:#f4dcdc;
  filter:drop-shadow(0 1px 1px rgba(60,4,8,.65));
  --mono-tinta:#fdf1f1;
  --mono-borde:#fdf1f1;      /* la cursiva es muy fina a 70 px */
  --mono-borde-ancho:1.1;
}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.seal::before{ /* aro interior grabado */
  content:"";position:absolute;inset:14%;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 1px 2px rgba(0,0,0,.3) inset;
}
@media (hover:hover) and (pointer:fine){
  .seal:hover{transform:translate(-50%,-50%) scale(1.045)}
}
.seal:active{transform:translate(-50%,-50%) scale(.94)}
.envelope.is-opening .seal{
  opacity:0;transform:translate(-50%,-50%) scale(.72) rotate(-14deg);filter:blur(3px);
  pointer-events:none;
}
/* halo que invita al clic (se ve una sola vez) */
.seal__halo{
  position:absolute;left:50%;top:54%;z-index:5;
  width:23%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(250,247,238,.5);
  animation:halo 2.6s var(--ease-out) infinite;
}
@keyframes halo{
  0%{box-shadow:0 0 0 0 rgba(250,247,238,.42);opacity:1}
  70%{box-shadow:0 0 0 26px rgba(250,247,238,0);opacity:.4}
  100%{box-shadow:0 0 0 0 rgba(250,247,238,0);opacity:0}
}
.envelope.is-opening .seal__halo{display:none}

.stage__open{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,4.4vw,1.3rem);
  letter-spacing:.02em;opacity:.95;
  display:flex;align-items:center;gap:.45em;justify-content:center;
}
.stage__open svg{width:16px;height:16px}

/* ---------- 4.3 Flores decorativas --------------------------------------- */
.deco{
  position:absolute;z-index:7;pointer-events:none;
  width:50%;
  filter:drop-shadow(0 7px 16px rgba(28,34,12,.3));
  transition:transform 900ms var(--ease-out),opacity 900ms var(--ease-out);
}
.deco--tl{top:-34%;left:-21%;transform:rotate(-7deg)}
.deco--br{bottom:-38%;right:-21%;transform:scaleX(-1) rotate(-5deg)}
@media (max-width:400px){
  .deco{width:54%}
  .deco--tl{top:-30%;left:-22%}
  .deco--br{bottom:-34%;right:-22%}
}
/* Al abrirse el sobre, las flores se apartan con él */
.envelope-wrap.is-opening .deco{opacity:.85}
.envelope-wrap.is-opening .deco--tl{transform:rotate(-13deg) translate(-9%,3%)}
.envelope-wrap.is-opening .deco--br{transform:scaleX(-1) rotate(-11deg) translate(-9%,3%)}

/* ==========================================================================
   5. ESCENA 2 — La invitación
   ========================================================================== */
.invite{
  position:relative;z-index:1;
  opacity:0;transform:translateY(18px);
  transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);
}
.invite.is-in{opacity:1;transform:none}
.invite[hidden]{display:none}

.section{
  padding:clamp(56px,11vh,96px) var(--gutter);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.section__inner{width:var(--shell)}
.section--light{background:var(--cream);color:var(--ink)}
.section--sage{background:var(--verde-100);color:var(--verde-900)}
.section--verde{
  background:
    radial-gradient(120% 70% at 50% 0%,var(--verde-700),transparent 66%),
    var(--verde-800);
  color:var(--cream);
}
.section--deep{background:var(--verde-950);color:var(--verde-100)}

/* El oro del galón charro marca los rótulos y los filetes */
.section--verde .eyebrow,
.section--deep .eyebrow{color:var(--oro-400);opacity:1}
.section--verde .divider,
.section--deep .divider,
.section--verde .rule,
.section--deep .rule{color:var(--oro-500)}
.section--light .eyebrow,
.section--sage .eyebrow{color:var(--verde-600);opacity:.9}

.eyebrow{
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  font-weight:500;opacity:.68;margin-bottom:1.1em;
}
.h2{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.8rem,7.4vw,2.6rem);line-height:1.12;
}
.script{font-family:var(--font-script);font-size:clamp(2.2rem,10vw,3.4rem);line-height:1.2}
.lede{
  font-size:clamp(.98rem,4vw,1.08rem);line-height:1.7;opacity:.82;
  max-width:44ch;margin-inline:auto;
}
.divider{
  width:56px;height:1px;margin:1.6em auto;
  background:currentColor;opacity:.3;
}

/* ---------- 5.1 Hero ----------------------------------------------------- */
.hero{min-height:88dvh;justify-content:center;gap:0}
.hero__mono{
  width:clamp(118px,34vw,150px);height:auto;aspect-ratio:1;
  margin:0 auto 1.1em;
  color:var(--oro-400);
  --mono-tinta:var(--cream);
}
.hero__mono svg{width:100%;height:100%}
.hero__kicker{
  font-family:var(--font-display);font-size:clamp(1rem,4.4vw,1.2rem);
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--oro-400);
}
.hero__names{
  font-family:var(--font-script);
  font-size:clamp(2.9rem,14vw,4.6rem);line-height:1.08;margin:.22em 0;
}
.hero__amp{display:block;font-size:.5em;color:var(--oro-400);margin:.05em 0}
.hero__date{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,5vw,1.5rem);letter-spacing:.16em;
  padding-top:.9em;margin-top:.6em;
  border-top:1px solid var(--oro-500);
  display:inline-block;opacity:.95;
}
.scroll-cue{
  margin-top:clamp(28px,6vh,52px);
  display:flex;flex-direction:column;align-items:center;gap:.5em;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;opacity:.6;
}
.scroll-cue i{
  width:1px;height:38px;background:currentColor;transform-origin:top;
  animation:cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue{0%{transform:scaleY(0);opacity:0}45%{transform:scaleY(1);opacity:.9}100%{transform:scaleY(1) translateY(38px);opacity:0}}

/* ---------- 5.2 Cuenta regresiva ----------------------------------------- */
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2.4vw,16px);margin-top:1.8em}
.count__cell{
  padding:clamp(12px,3.4vw,20px) 4px;border-radius:var(--radius);
  background:rgba(250,247,238,.06);
  border:1px solid rgba(190,155,80,.35);
}
.section--light .count__cell,.section--sage .count__cell{
  background:rgba(41,91,44,.07);border-color:rgba(41,91,44,.18);
}
.count__num{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.6rem,7.4vw,2.4rem);line-height:1;
  font-variant-numeric:tabular-nums;
}
.count__lbl{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:.65;margin-top:.7em;
}

/* ---------- 5.3 Tarjetas de lugar ---------------------------------------- */
.places{display:grid;gap:clamp(16px,4vw,22px);margin-top:2em}
.place{
  padding:clamp(24px,6vw,34px) clamp(20px,5vw,28px);
  border-radius:var(--radius);
  background:var(--cream);
  border:1px solid var(--verde-200);
  color:var(--ink);
  box-shadow:0 1px 2px rgba(42,47,28,.05),0 12px 28px -18px rgba(42,47,28,.3);
}
.section--light .place{background:var(--verde-050)}
.place__icon{
  width:44px;height:44px;margin:0 auto 1em;
  color:var(--oro-600);
}
.place__type{
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--oro-700);
}
.place__name{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.35rem,5.6vw,1.7rem);line-height:1.2;margin:.45em 0 .25em;
}
.place__time{
  font-family:var(--font-display);font-size:1.12rem;letter-spacing:.1em;
  color:var(--verde-600);
}
.place__addr{font-size:.92rem;line-height:1.6;opacity:.72;margin-top:.7em}

/* ---------- 5.4 Itinerario ----------------------------------------------- */
.timeline{margin-top:2.2em;display:grid;gap:0;position:relative;text-align:left}
.timeline::before{
  content:"";position:absolute;left:21px;top:14px;bottom:14px;width:1px;
  background:currentColor;opacity:.22;
}
.tl{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:center;padding:14px 0}
.tl__dot{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--verde-900);color:var(--oro-400);
  border:1px solid var(--oro-600);position:relative;z-index:1;
}
.section--light .tl__dot{background:var(--verde-050)}
.tl__dot svg{width:20px;height:20px}
.tl__time{
  font-family:var(--font-display);font-size:1.1rem;letter-spacing:.08em;line-height:1.2;
}
.tl__name{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;opacity:.66;margin-top:.25em}

/* ---------- 5.5 Botones -------------------------------------------------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:15px 30px;border-radius:999px;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  transition:transform var(--dur-press) var(--ease-out),
             background-color var(--dur-ui) ease,
             color var(--dur-ui) ease,
             border-color var(--dur-ui) ease,
             opacity var(--dur-ui) ease;
  will-change:transform;
}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px;flex:none}
.btn--solid{background:var(--verde-700);color:var(--oro-200);border-color:var(--oro-600)}
.btn--ghost{border:1px solid currentColor;color:inherit}
.btn--cream{background:var(--oro-400);color:var(--verde-900)}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .btn--solid:hover{background:var(--verde-600)}
  .btn--ghost:hover{background:rgba(190,155,80,.16)}
  .btn--cream:hover{background:#fff}
}

/* ---------- 5.6 Formulario RSVP ------------------------------------------ */
.rsvp{
  margin-top:2em;text-align:left;
  background:var(--cream);color:var(--ink);
  border-radius:calc(var(--radius) + 4px);
  padding:clamp(24px,6vw,36px);
  box-shadow:0 18px 40px -24px rgba(35,42,16,.55);
}
.rsvp__guest{
  padding:16px 18px;border-radius:var(--radius);margin-bottom:1.6em;
  background:var(--verde-050);border:1px solid var(--verde-200);text-align:center;
}
.rsvp__guest b{
  display:block;font-family:var(--font-display);font-weight:500;
  font-size:1.3rem;line-height:1.2;margin-bottom:.2em;
}
.rsvp__guest small{font-size:.8rem;opacity:.7;letter-spacing:.02em}

.field{margin-bottom:1.25em}
.field > label,.field__legend{
  display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;opacity:.62;margin-bottom:.65em;
}
.input,.textarea,.select{
  width:100%;padding:13px 15px;border-radius:10px;
  background:#fff;border:1px solid var(--verde-200);
  color:var(--ink);
  transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease;
}
.input:focus,.textarea:focus,.select:focus{
  outline:none;border-color:var(--verde-500);
  box-shadow:0 0 0 3px rgba(41,91,44,.16);
}
.textarea{min-height:92px;resize:vertical;line-height:1.6}
.hint{font-size:.78rem;opacity:.6;margin-top:.55em;line-height:1.5}
.error{
  font-size:.8rem;color:var(--wax-600);margin-top:.5em;
  opacity:0;transform:translateY(-3px);
  transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out);
}
.error.is-on{opacity:1;transform:none}

/* Sí / No */
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  padding:15px 10px;border-radius:12px;cursor:pointer;
  border:1px solid var(--verde-200);background:#fff;
  font-size:.82rem;letter-spacing:.08em;
  transition:transform var(--dur-press) var(--ease-out),
             border-color var(--dur-ui) ease,background-color var(--dur-ui) ease;
}
.choice label:active{transform:scale(.97)}
.choice input:checked + label{
  border-color:var(--verde-600);background:var(--verde-050);
  box-shadow:0 0 0 1px var(--verde-600) inset;
}
.choice svg{width:17px;height:17px;opacity:.55;transition:opacity var(--dur-ui) ease}
.choice input:checked + label svg{opacity:1;color:var(--verde-700)}

/* Stepper de cupos */
.stepper{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px;border-radius:12px;
  background:#fff;border:1px solid var(--verde-200);
}
.stepper__btn{
  width:44px;height:44px;border-radius:9px;display:grid;place-items:center;
  background:var(--verde-050);color:var(--verde-800);
  transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-ui) ease,opacity var(--dur-ui) ease;
}
.stepper__btn:active{transform:scale(.93)}
.stepper__btn[disabled]{opacity:.32;pointer-events:none}
.stepper__btn svg{width:17px;height:17px}
.stepper__val{
  font-family:var(--font-display);font-weight:500;
  font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums;
  min-width:2.2ch;text-align:center;
}
.stepper__max{font-size:.78rem;opacity:.6;letter-spacing:.02em}

.names-list{display:grid;gap:9px}
.names-list .input{padding:11px 14px}

/* Estado del botón de envío */
.submit{position:relative}
.submit__label{
  display:inline-flex;align-items:center;gap:.6em;
  transition:filter 220ms ease,opacity 220ms ease;
}
.submit.is-busy .submit__label{filter:blur(2.5px);opacity:.55}
.spinner{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transition:opacity 200ms ease;
}
.submit.is-busy .spinner{opacity:1}
.spinner i{
  width:17px;height:17px;border-radius:50%;
  border:2px solid rgba(250,247,238,.3);border-top-color:var(--cream);
  animation:spin .62s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Confirmación enviada */
.done{
  text-align:center;padding:clamp(28px,7vw,44px) clamp(18px,5vw,26px);
}
.done__mark{
  width:62px;height:62px;margin:0 auto 1.2em;border-radius:50%;
  display:grid;place-items:center;
  background:var(--verde-050);color:var(--verde-700);
  border:1px solid var(--verde-300);
}
.done__mark svg{width:26px;height:26px}
.done__mark path{
  stroke-dasharray:30;stroke-dashoffset:30;
  animation:draw 480ms 140ms var(--ease-out) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.done h3{font-family:var(--font-display);font-weight:500;font-size:1.55rem;margin-bottom:.4em}
.done p{font-size:.95rem;line-height:1.65;opacity:.75}

/* Transición entre formulario y confirmación */
.swap{transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out),filter 280ms var(--ease-out)}
.swap.is-out{opacity:0;transform:scale(.985);filter:blur(3px);pointer-events:none}

/* ---------- 5.7 Reproductor de música ------------------------------------ */
.music{
  position:fixed;right:16px;bottom:16px;z-index:40;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(35,42,16,.6);color:var(--cream);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(250,247,238,.2);
  transition:transform var(--dur-press) var(--ease-out),opacity var(--dur-ui) ease;
}
.music:active{transform:scale(.93)}
.music[hidden]{display:none}
.music svg{width:19px;height:19px}
.music .bars i{animation:bar .9s var(--ease-soft) infinite}
.music[data-playing="false"] .bars i{animation-play-state:paused;opacity:.45}
@keyframes bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ---------- 5.8 Footer --------------------------------------------------- */
.footer{padding:clamp(44px,9vh,72px) var(--gutter) clamp(72px,10vh,88px);text-align:center}
.footer__names{font-family:var(--font-script);font-size:clamp(2rem,9vw,2.8rem);line-height:1.2}
.footer__date{font-family:var(--font-display);letter-spacing:.2em;font-size:.9rem;color:var(--oro-400);margin-top:.8em}
.footer__mono{
  width:84px;margin:2.2em auto 0;
  color:var(--oro-500);
  --mono-tinta:var(--verde-100);
}
.footer__sign{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.4;margin-top:2.6em}

/* ---------- 5.9 Marcadores de contenido pendiente ------------------------- */
.pending{
  display:inline-block;padding:.24em .7em;border-radius:6px;
  background:repeating-linear-gradient(-45deg,rgba(179,37,47,.1) 0 6px,rgba(179,37,47,.18) 6px 12px);
  border:1px dashed rgba(154,13,24,.5);
  color:var(--wax-600);font-family:var(--font-sans);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
.section--verde .pending,.section--deep .pending{
  color:#f6d9d9;border-color:rgba(246,217,217,.55);
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 6px,rgba(255,255,255,.16) 6px 12px);
}

/* ==========================================================================
   6. Revelado al hacer scroll
   ========================================================================== */
.reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);
}
.reveal.is-in{opacity:1;transform:none}
.reveal-group > *{
  opacity:0;transform:translateY(12px);
  transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out);
}
.reveal-group.is-in > *{opacity:1;transform:none}
.reveal-group.is-in > *:nth-child(1){transition-delay:0ms}
.reveal-group.is-in > *:nth-child(2){transition-delay:60ms}
.reveal-group.is-in > *:nth-child(3){transition-delay:120ms}
.reveal-group.is-in > *:nth-child(4){transition-delay:180ms}
.reveal-group.is-in > *:nth-child(5){transition-delay:240ms}
.reveal-group.is-in > *:nth-child(6){transition-delay:300ms}

/* Entrada escalonada del sobre (una sola vez) */
.stage [data-enter]{
  opacity:0;transform:translateY(10px);
  transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out);
}
.stage.is-ready [data-enter]{opacity:1;transform:none}
.stage.is-ready [data-enter="1"]{transition-delay:60ms}
.stage.is-ready [data-enter="2"]{transition-delay:120ms}
.stage.is-ready [data-enter="3"]{transition-delay:200ms}
.stage.is-ready [data-enter="4"]{transition-delay:300ms}
.stage.is-ready [data-enter="5"]{transition-delay:360ms}
.stage.is-ready [data-enter="6"]{transition-delay:420ms}
.stage.is-ready [data-enter="7"]{transition-delay:470ms}

/* ==========================================================================
   7. Responsive
   ========================================================================== */
@media (min-width:640px){
  .places{grid-template-columns:1fr 1fr}
  .places.is-single{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
}

/* ==========================================================================
   8. Accesibilidad — movimiento reducido
   Se conservan opacidad y color; se elimina el desplazamiento.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .envelope{animation:none}
  .seal__halo,.scroll-cue i,.music .bars i{animation:none}
  .reveal,.reveal-group > *,.stage [data-enter]{transform:none !important}
  .env__card,.env__flap{transition-duration:1ms !important}
  .stage.is-gone{transform:none;filter:none}
  .invite{transform:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .spinner i{animation-duration:.62s !important;animation-iteration-count:infinite !important}
}

/* ---------- Impresión ---------------------------------------------------- */
@media print{
  .stage,.music,.scroll-cue{display:none !important}
  .invite{opacity:1 !important;transform:none !important}
  .reveal,.reveal-group > *{opacity:1 !important;transform:none !important}
}