/* =========================================================
   SELLO · MOTOR DE INVITACIONES
   ---------------------------------------------------------
   COMÚN a todas las invitaciones. Cada invitación sobreescribe
   las variables de :root en su propio <style>.
   NO editar este archivo por cliente.
   ========================================================= */

:root{
  --bg:#F7F2E9;
  --bg-2:#F1EADC;
  --ink:#2B261E;
  --ink-soft:#8B8069;
  --accent:#B89B6E;
  --accent-soft:#D9C39B;
  --line:#DCCFB6;
  --card:#FFFDF9;

  --serif:'Cormorant Garamond', Georgia, serif;
  --body:'EB Garamond', Georgia, serif;
  --script:'Pinyon Script', cursive;

  --ease:cubic-bezier(.22,.8,.28,1);
  --pad:clamp(20px,6vw,40px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
/* Las animaciones de entrada laterales (.izq/.der) arrancan corridas
   30px, y en pantallas angostas eso generaba scroll horizontal.
   clip corta sin crear un contenedor de scroll; hidden es el respaldo. */
html,body{overflow-x:hidden;}
@supports (overflow:clip){ html,body{overflow-x:clip;} }
body.locked{overflow:hidden;height:100vh;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--accent-soft);color:var(--ink);}

.i-wrap{max-width:640px;margin:0 auto;padding-inline:var(--pad);position:relative;z-index:3;}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.1;}
p{margin:0 0 1em;}

/* =========================================================
   FONDOS QUE CAMBIAN
   ---------------------------------------------------------
   Varias capas de degradé apiladas. Al entrar en una sección
   con data-tono="2", se enciende .tono-2 y se apagan las otras.
   Las gradientes no se pueden animar en CSS, así que el truco
   es cruzar opacidades.
   ========================================================= */
#atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
#atmos .tono{
  position:absolute;inset:-10%;opacity:0;
  transition:opacity 1.6s var(--ease);
}
#atmos .tono.on{opacity:1;}
/* Si el JS no llegó a correr, el primer fondo se muestra igual.
   Apenas arranca el JS le pone la clase js y manda .on al que toca. */
#atmos:not(.js) .tono-1{opacity:1;}

/* aurora: mancha de luz que respira, siempre activa */
#atmos .aurora{
  position:absolute;width:75vmax;height:75vmax;top:-25%;left:-20%;
  background:radial-gradient(circle, var(--aurora, rgba(255,255,255,.5)), transparent 62%);
  filter:blur(30px);opacity:.55;
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%  {transform:translate3d(0,0,0) scale(1);}
  50% {transform:translate3d(28vw,14vh,0) scale(1.28);}
  100%{transform:translate3d(6vw,32vh,0) scale(.92);}
}
#atmos .grain{
  position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ---------- partículas que caen ---------- */
#parts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1;}
.part{position:absolute;top:-8%;opacity:0;color:var(--accent-soft);will-change:transform,opacity;}
@keyframes fall{
  0%{transform:translate3d(0,-10vh,0) rotate(0);opacity:0;}
  8%{opacity:var(--o,.5);}
  92%{opacity:var(--o,.5);}
  100%{transform:translate3d(var(--drift,20px),110vh,0) rotate(var(--spin,300deg));opacity:0;}
}

/* ---------- efecto al tocar la pantalla ---------- */
#toques{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden;}
.toque{
  position:absolute;color:var(--accent);will-change:transform,opacity;
  animation:subir 1.5s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes subir{
  0%  {transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:0;}
  18% {transform:translate(-50%,-60%) scale(1.15) rotate(8deg);opacity:.95;}
  100%{transform:translate(-50%,-230%) scale(.55) rotate(-14deg);opacity:0;}
}

/* ---------- barra de progreso de lectura ---------- */
#progreso{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:45;
  background:linear-gradient(90deg, transparent, var(--accent));
  transition:width .1s linear;
}

/* =========================================================
   INTRO · el sobre que se abre
   ========================================================= */
#intro{
  position:fixed;inset:0;z-index:50;background:var(--bg-2);
  display:grid;place-items:center;text-align:center;padding:30px;
  transition:opacity 1s var(--ease), visibility 1s;
  perspective:1400px;
}
#intro.gone{opacity:0;visibility:hidden;pointer-events:none;}

.env{
  width:min(320px,84vw);aspect-ratio:1/.66;position:relative;margin:0 auto 36px;
  transform-style:preserve-3d;
  animation:envFloat 5s ease-in-out infinite;
}
@keyframes envFloat{0%,100%{transform:translateY(0) rotateX(4deg);}50%{transform:translateY(-12px) rotateX(0deg);}}

.env .cuerpo{
  position:absolute;inset:0;background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 34px 60px -30px rgba(0,0,0,.4);
}
/* la tarjeta que asoma y sale */
.env .tarjeta{
  position:absolute;left:8%;right:8%;top:10%;bottom:16%;
  background:var(--bg);border:1px solid var(--line);
  display:grid;place-items:center;
  transform:translateY(0);transition:transform 1s var(--ease) .35s;
}
.env .tarjeta span{
  font-family:var(--script);font-size:1.8rem;color:var(--accent);line-height:1;
}
/* la solapa: se abre hacia arriba en 3D */
.env .solapa{
  position:absolute;top:0;left:0;right:0;height:64%;
  background:var(--bg-2);border-bottom:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;
  transition:transform 1s var(--ease);
  z-index:3;backface-visibility:hidden;
}
/* el lacre */
.env .seal{
  position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--card);
  display:grid;place-items:center;font-family:var(--serif);font-size:1.35rem;
  box-shadow:0 6px 18px -4px rgba(0,0,0,.4), inset 0 -2px 6px rgba(0,0,0,.18);
  z-index:4;transition:transform .5s var(--ease), opacity .5s;
}
/* --- estado abierto --- */
#intro.abriendo .env .seal{transform:translate(-50%,-50%) scale(1.5) rotate(20deg);opacity:0;}
#intro.abriendo .env .solapa{transform:rotateX(-172deg);}
#intro.abriendo .env .tarjeta{transform:translateY(-42%);}
#intro.abriendo .env{animation:none;}

#intro .i-kick{
  font-family:var(--body);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:14px;
}
#intro h2{font-size:clamp(1.9rem,7vw,2.6rem);margin-bottom:26px;}
#openBtn{
  background:var(--ink);color:var(--bg);border:0;border-radius:999px;
  padding:16px 40px;font-family:var(--body);font-size:.75rem;
  letter-spacing:.22em;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .35s var(--ease), background .35s var(--ease);
}
#openBtn:hover{transform:translateY(-2px);background:var(--accent);}
#openBtn::after{ /* destello que cruza el botón */
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  animation:destello 3.4s ease-in-out infinite;
}
@keyframes destello{0%{left:-120%;}55%,100%{left:130%;}}

/* =========================================================
   REVEAL
   ========================================================= */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease), transform 1s var(--ease);}
.rv.in{opacity:1;transform:none;}
.rv[data-d="1"]{transition-delay:.1s;}
.rv[data-d="2"]{transition-delay:.2s;}
.rv[data-d="3"]{transition-delay:.3s;}
.rv.izq{transform:translateX(-30px);}
.rv.der{transform:translateX(30px);}
.rv.zoom{transform:scale(.92);}
.rv.izq.in,.rv.der.in,.rv.zoom.in{transform:none;}

/* letra por letra */
.letras span{
  display:inline-block;opacity:0;transform:translateY(28px) rotate(4deg);
  animation:letra .8s var(--ease) forwards;
}
@keyframes letra{to{opacity:1;transform:none;}}

/* nombres que se escriben solos, como a mano (para tipografías cursivas,
   donde animar letra por letra rompe los trazos).
   Sin la clase .pre (o sin JS) el nombre se ve completo.
   El margen extra del clip deja respirar los trazos largos de la firma. */
.escribir{
  display:inline-block;
  clip-path:inset(-70% -30% -70% -30%);
  transition:clip-path 2.8s cubic-bezier(.45,0,.25,1) var(--d,0s);
}
.escribir.pre{clip-path:inset(-70% 100% -70% -30%);}

/* =========================================================
   SOBRE v2 · con carta que sale de verdad
   ---------------------------------------------------------
   Capas (de atrás hacia adelante):
     s-back   el fondo del sobre (forro)
     s-carta  la carta, que sube por la abertura
     s-front  el bolsillo frontal, con el corte en V
     s-flap   la solapa, que gira hacia arriba
     s-sello  el lacre, que se rompe primero
   Se activa con  <div id="intro" data-sobre>
   Se colorea con variables --s-*  en el CSS de cada invitación.
   Para el movimiento usa las propiedades individuales translate/scale
   y deja transform para las animaciones de apertura, así no se pisan.
   ========================================================= */
.sobre{
  --s-back:#C9DDE9; --s-front:#F1E2D0; --s-flap:#EBD6BF; --s-flap-in:#BBD3E2;
  --s-paper:#FFFDF8; --s-ink:#4A3428; --s-line:#E6D2C0;
  --s-seal:#C4694A; --s-seal-2:#9E4C35;
  position:relative;width:min(330px,84vw);aspect-ratio:1.5/1;margin:0 auto 44px;
  animation:sobreFlota 5.5s ease-in-out infinite;
}
@keyframes sobreFlota{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

.sobre > *{position:absolute;}
.sobre .s-back{
  inset:0;background:var(--s-back);border-radius:3px;
  box-shadow:0 34px 60px -26px rgba(60,40,20,.42);z-index:0;
}
.sobre .s-carta{
  left:6%;right:6%;top:7%;height:88%;z-index:2;
  background:
    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='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    var(--s-paper);
  box-shadow:0 1px 4px rgba(60,40,20,.16);
  border-radius:1px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:9% 6% 0;color:var(--s-ink);
}
.sobre .s-carta .c-top{font-size:.46rem;letter-spacing:.34em;text-transform:uppercase;color:var(--s-seal);margin-bottom:.5em;}
.sobre .s-carta .c-nom{font-family:var(--script);font-size:2.35rem;line-height:.95;}
.sobre .s-carta .c-nom em{font-style:normal;color:var(--s-seal);font-size:.7em;padding:0 .12em;}
.sobre .s-carta .c-linea{width:38%;height:1px;background:var(--s-line);margin:.85em 0 .6em;}
.sobre .s-carta .c-fecha{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;}

/* el bolsillo: todo menos el triángulo de arriba, donde está la solapa.
   El drop-shadow va en un envoltorio porque clip-path recortaría la sombra. */
.sobre .s-frontw{inset:0;z-index:3;filter:drop-shadow(0 -2px 2px rgba(60,40,20,.14));}
.sobre .s-front{
  position:absolute;inset:0;border-radius:3px;
  clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);
  background:linear-gradient(to top, rgba(60,40,20,.07), transparent 55%), var(--s-front);
}
.sobre .s-flapw{
  left:0;right:0;top:0;height:58%;z-index:4;transform-origin:50% 0;
  filter:drop-shadow(0 3px 3px rgba(60,40,20,.18));
}
.sobre .s-flap{
  position:absolute;inset:0;background:var(--s-flap);
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.sobre .s-sello{
  left:50%;top:58%;width:17%;aspect-ratio:1;z-index:6;translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #DE8A6C, var(--s-seal) 55%, var(--s-seal-2));
  box-shadow:0 5px 12px -3px rgba(60,40,20,.5), inset 0 -2px 5px rgba(0,0,0,.2), inset 0 0 0 3px rgba(255,255,255,.12);
  display:grid;place-items:center;color:#FFF3EA;
  font-family:var(--script);font-size:1.25rem;line-height:1;
}

/* --- apertura, en orden --- */
#intro.abriendo .sobre .s-sello{animation:selloRompe .55s ease-in forwards;}
#intro.abriendo .sobre .s-flapw{animation:flapAbre 1s cubic-bezier(.5,0,.3,1) .35s forwards;}
#intro.abriendo .sobre .s-flap {animation:flapColor 1s linear .35s forwards;}
#intro.abriendo .sobre .s-carta{animation:cartaSube 1.3s cubic-bezier(.3,.6,.25,1) 1.1s forwards;}
#intro.abriendo .sobre{animation:none;}

@keyframes selloRompe{
  0%  {transform:scale(1) rotate(0);opacity:1;}
  60% {transform:scale(1.28) rotate(14deg);opacity:1;}
  100%{transform:scale(1.5) rotate(24deg);opacity:0;}
}
@keyframes flapAbre{
  0%  {transform:rotateX(0);z-index:4;}
  50% {transform:rotateX(90deg);z-index:4;}
  51% {z-index:1;}
  100%{transform:rotateX(180deg);z-index:1;}
}
@keyframes flapColor{ /* al darse vuelta se ve el forro */
  0%,49%{background:var(--s-flap);}
  50%,100%{background:var(--s-flap-in);}
}
@keyframes cartaSube{
  from{transform:translateY(0);}
  to  {transform:translateY(-46%);}
}

/* el texto de abajo se retira para que mire la carta */
#intro .i-kick,#intro h2,#openBtn{transition:opacity .5s ease;}
#intro.abriendo .i-kick,#intro.abriendo h2,#intro.abriendo #openBtn{opacity:0;}

/* --- final: el sobre cae y la carta crece hasta ser la invitación --- */
#intro.fin .sobre .s-back,
#intro.fin .sobre .s-frontw,
#intro.fin .sobre .s-flapw,
#intro.fin .sobre .s-sello{
  translate:0 80vh;opacity:0;
  transition:translate 1s cubic-bezier(.6,0,.9,.5), opacity .9s ease .1s;
}
/* --k es cuánto crece la carta. --dy lo calcula el JS en el momento, para que
   termine justo en el centro de la pantalla sin importar el tamaño. */
.sobre .s-carta{--k:1.5;}
@media (max-width:600px){ .sobre .s-carta{--k:1.22;} }
#intro.fin .sobre .s-carta{
  translate:0 var(--dy,0px);scale:var(--k);
  transition:translate 1.3s cubic-bezier(.3,.6,.25,1), scale 1.3s cubic-bezier(.3,.6,.25,1);
}

/* polvo de luz que titila */
#brillos{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1;}
.chispa{
  position:absolute;width:var(--z,3px);height:var(--z,3px);border-radius:50%;
  background:var(--accent);box-shadow:0 0 9px 2px var(--accent-soft);
  opacity:0;animation:titila var(--t,4s) ease-in-out var(--d,0s) infinite;
}
@keyframes titila{0%,100%{opacity:0;transform:scale(.4);}50%{opacity:.85;transform:scale(1);}}

/* =========================================================
   ACCESIBILIDAD · animaciones desactivadas
   Todo tiene que verse igual, sin movimiento.
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  /* sin desplazamientos, pero con un fundido suave: los fundidos no marean
     y la página no se siente "muerta" */
  .rv{transform:none !important;transition:opacity .9s ease !important;}
  .letras span{opacity:1 !important;transform:none !important;animation:none !important;}
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
  #atmos .tono{transition:none;}
  .env{animation:none;}
  .escribir{transition:none;}
  .chispa{opacity:.5;animation:none;}
}

/* =========================================================
   HERO
   ========================================================= */
.i-hero{
  min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:90px 0 80px;position:relative;
}
.i-hero .kick{
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-bottom:26px;
}
.i-hero .names{
  font-family:var(--serif);font-size:clamp(3.2rem,15vw,6rem);line-height:.95;margin-bottom:10px;
}
.i-hero .names .amp{
  display:block;font-family:var(--script);font-size:.52em;color:var(--accent);
  margin:6px 0;line-height:1;
}
.i-hero .sub{
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line);display:inline-block;
}
/* saludo personalizado (plan Firma) */
.saludo{
  display:none;margin-bottom:22px;padding:14px 22px;border:1px solid var(--line);
  background:var(--card);border-radius:999px;font-size:.92rem;
}
.saludo.on{display:inline-block;animation:cardIn .8s var(--ease) both;}
.saludo b{font-family:var(--serif);font-size:1.15rem;color:var(--accent);font-weight:400;}

.scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);
}
.scroll-hint::after{
  content:'';display:block;width:1px;height:34px;background:var(--line);margin:12px auto 0;
  animation:hint 2.4s ease-in-out infinite;transform-origin:top;
}
@keyframes hint{0%,100%{transform:scaleY(.35);opacity:.4;}50%{transform:scaleY(1);opacity:1;}}

/* =========================================================
   BLOQUES
   ========================================================= */
.i-sec{padding:clamp(60px,13vw,100px) 0;text-align:center;position:relative;}
.i-sec .kick{
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;
}
.i-sec h2{font-size:clamp(1.9rem,6vw,2.7rem);margin-bottom:20px;position:relative;display:inline-block;}
.i-sec .txt{color:var(--ink-soft);max-width:44ch;margin:0 auto;}

/* brillo que cruza los títulos al aparecer */
.i-sec h2.brillo{
  background:linear-gradient(100deg, currentColor 30%, var(--accent) 50%, currentColor 70%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.rv.in h2.brillo{animation:barrido 2.4s var(--ease) .3s;}
@keyframes barrido{0%{background-position:130% 0;}100%{background-position:-30% 0;}}

.orn{display:flex;align-items:center;gap:14px;justify-content:center;color:var(--accent);padding:6px 0;position:relative;z-index:3;}
.orn::before,.orn::after{content:'';height:1px;width:56px;background:var(--line);}
.orn span{font-size:.7rem;animation:latir 3.5s ease-in-out infinite;}
@keyframes latir{0%,100%{transform:scale(1);opacity:.75;}50%{transform:scale(1.35);opacity:1;}}

/* frase */
.quote{text-align:center;padding:clamp(50px,10vw,80px) 0;position:relative;z-index:3;}
.quote p{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,4.6vw,2rem);
  line-height:1.5;color:var(--ink);max-width:22ch;margin:0 auto 16px;
}
.quote cite{font-style:normal;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);}

/* ---------- cuenta regresiva ---------- */
.count{display:flex;justify-content:center;gap:clamp(14px,5vw,34px);margin-top:34px;}
.count div{min-width:64px;position:relative;}
.count b{
  display:block;font-family:var(--serif);font-size:clamp(2.2rem,8vw,3.2rem);
  line-height:1;color:var(--accent);font-weight:400;
}
.count b.tic{animation:tic .45s var(--ease);}
@keyframes tic{0%{transform:translateY(-8px);opacity:.3;}100%{transform:none;opacity:1;}}
.count span{
  display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:10px;
}

/* ---------- tarjetas de evento ---------- */
.ev{
  background:var(--card);border:1px solid var(--line);padding:38px 28px 34px;
  margin-bottom:20px;position:relative;overflow:hidden;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.ev:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(0,0,0,.35);}
.ev .ic{
  width:48px;height:48px;border:1px solid var(--accent-soft);border-radius:50%;
  display:grid;place-items:center;color:var(--accent);margin:0 auto 20px;
}
.ev .ic svg{width:21px;height:21px;}
.ev h3{font-size:1.6rem;margin-bottom:6px;}
.ev .when{
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;
}
.ev .where{color:var(--ink-soft);font-size:.96rem;margin-bottom:22px;}
.ev .where strong{color:var(--ink);font-weight:400;display:block;font-size:1.05rem;}
.ev .botones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* botón */
.i-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 28px;border-radius:999px;border:1px solid var(--ink);
  background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.i-btn:hover{background:var(--ink);color:var(--bg);transform:translateY(-2px);}
.i-btn.solid{background:var(--accent);border-color:var(--accent);color:var(--card);}
.i-btn.solid:hover{background:var(--ink);border-color:var(--ink);}
.i-btn svg{width:15px;height:15px;}

/* ---------- dress code ---------- */
.dress{display:flex;gap:16px;justify-content:center;margin:28px 0 24px;flex-wrap:wrap;}
.swatch{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line);position:relative;
  transition:transform .4s var(--ease);
}
.swatch:hover{transform:scale(1.15);}
.swatch::after{
  content:attr(data-n);position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;
}
.dress-note{margin-top:34px;}

/* ---------- itinerario ---------- */
.time{list-style:none;padding:0;margin:34px auto 0;max-width:400px;text-align:left;}
.time li{
  display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline;
  position:relative;
}
.time li:last-child{border-bottom:0;}
.time b{
  font-family:var(--serif);font-size:1.25rem;color:var(--accent);min-width:64px;font-weight:400;
}
.time span{font-size:.98rem;}

/* ---------- datos bancarios ---------- */
.bank{
  background:var(--card);border:1px solid var(--line);padding:26px 24px;margin-top:26px;text-align:left;
}
.bank div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem;}
.bank div:last-child{border-bottom:0;}
.bank span:first-child{color:var(--ink-soft);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;}
.bank span:last-child{font-family:var(--serif);font-size:1.05rem;}
.copy{cursor:pointer;transition:color .3s;}
.copy:hover{color:var(--accent);}

/* =========================================================
   TRIVIA · juego para los invitados (plan Firma)
   ========================================================= */
.trivia{background:var(--card);border:1px solid var(--line);padding:clamp(26px,6vw,38px);text-align:left;}
.t-preg{display:none;}
.t-preg.on{display:block;animation:cardIn .5s var(--ease) both;}
.t-preg p.q{
  font-family:var(--serif);font-size:1.35rem;line-height:1.35;margin-bottom:20px;text-align:center;
}
.t-op{
  display:block;width:100%;text-align:left;margin-bottom:10px;padding:14px 18px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:1rem;cursor:pointer;border-radius:4px;
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.t-op:hover:not(:disabled){border-color:var(--accent);transform:translateX(4px);}
.t-op:disabled{cursor:default;}
.t-op.bien{border-color:#4E7A52;background:rgba(78,122,82,.12);}
.t-op.mal{border-color:#A85A4A;background:rgba(168,90,74,.1);opacity:.75;}
.t-marcador{
  text-align:center;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:20px;
}
.t-final{display:none;text-align:center;}
.t-final.on{display:block;animation:cardIn .6s var(--ease) both;}
.t-final b{display:block;font-family:var(--serif);font-size:3rem;color:var(--accent);line-height:1;margin-bottom:10px;}

/* ---------- RSVP ---------- */
.rsvp{
  background:var(--card);border:1px solid var(--line);padding:clamp(30px,7vw,44px) clamp(22px,5vw,34px);
  text-align:center;
}
.field{margin-bottom:16px;text-align:left;}
.field label{
  display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);background:var(--bg);
  font-family:var(--body);font-size:1rem;color:var(--ink);border-radius:2px;
  transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--accent);}
.field textarea{resize:vertical;min-height:76px;}
.rsvp .i-btn{width:100%;margin-top:10px;}
.rsvp-ok{
  display:none;padding:22px;background:var(--bg-2);border:1px solid var(--accent-soft);margin-top:18px;
  font-family:var(--serif);font-size:1.2rem;
}
.rsvp-ok.show{display:block;animation:cardIn .6s var(--ease) both;}
@keyframes cardIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ---------- footer ---------- */
.i-foot{text-align:center;padding:70px 0 50px;border-top:1px solid var(--line);margin-top:40px;position:relative;z-index:3;}
.i-foot .names-sm{font-family:var(--script);font-size:2.4rem;color:var(--accent);line-height:1;margin-bottom:14px;}
.i-foot p{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin:0;}
.i-foot .by{margin-top:26px;font-size:.6rem;opacity:.7;letter-spacing:.2em;}

/* ---------- control de música ---------- */
.music{
  position:fixed;right:16px;bottom:16px;z-index:41;width:50px;height:50px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);display:grid;place-items:center;
  cursor:pointer;color:var(--accent);box-shadow:0 8px 24px -8px rgba(0,0,0,.3);
  transition:transform .3s var(--ease);
}
.music:hover{transform:scale(1.08);}
.music::before{ /* aro que late cuando suena */
  content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent-soft);
  opacity:0;animation:pulso 2.2s ease-out infinite;
}
.music.paused::before{animation:none;}
@keyframes pulso{0%{transform:scale(.9);opacity:.7;}100%{transform:scale(1.35);opacity:0;}}
.music .bars{display:flex;gap:3px;align-items:flex-end;height:16px;}
.music .bars i{width:2.5px;background:currentColor;height:100%;animation:eq .9s ease-in-out infinite;}
.music .bars i:nth-child(2){animation-delay:.15s;}
.music .bars i:nth-child(3){animation-delay:.3s;}
.music.paused .bars i{animation-play-state:paused;height:35%;}
@keyframes eq{0%,100%{height:35%;}50%{height:100%;}}