/* =========================================================
   DYNVITIA · Plantilla "Toscana" — motor 100% configurable
   Todos los colores viven en variables CSS; app.js las
   sobrescribe en tiempo real desde config.json (theme.palette)
   ========================================================= */

:root{
  --bg:#f6f1e8;
  --bg-alt:#ede2d0;
  --ink:#332f28;
  --ink-soft:#726a5b;
  --primary:#7c8663;
  --primary-dark:#5b6446;
  --primary-dark-2:#4a5138;
  --gold:#ac8a4e;
  --gold-soft:#cbb083;
  --line:#d8ccb4;
  --white:#fffdf8;
  --error:#b0553f;

  --font-display:'Great Vibes', cursive;
  --font-body:'Cormorant Garamond', Georgia, serif;
  --font-label:'Montserrat', sans-serif;
  --font-form:'Montserrat', sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font-family:inherit}
svg.ico{flex-shrink:0}

/* --- utilidades --- */
.eyebrow{font-family:var(--font-label);font-size:12px;letter-spacing:5px;text-transform:uppercase;color:var(--gold)}
.eyebrow.on-dark{color:var(--gold-soft)}
.script-title{font-family:var(--font-display);font-weight:400;color:var(--primary-dark)}
.script-title.on-dark{color:var(--white)}
.divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto}
.divider span.line{flex:1;max-width:56px;height:1px;background:var(--line)}
.divider span.diamond{width:8px;height:8px;background:var(--gold);transform:rotate(45deg);flex-shrink:0}

.reveal{opacity:0;transform:translateY(30px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

section{max-width:960px;margin:0 auto;padding:90px 24px;text-align:center}
section.narrow{max-width:720px}

/* --- alternancia dinámica de fondo entre secciones (modo normal, sin sticky) --- */
.tone-wrap{width:100%}
/* Igual que en modo sticky: en vez de estirar la imagen a todo el ancho
   (lo que en pantallas grandes la vuelve gigante y tapa contenido), el
   divisor es una fila flex que repite la imagen a su tamaño natural, con
   un techo de alto fijo — formando un "camino" de flores en vez de una
   flor deforme. En móvil, con poco ancho, basta con una. */
.section-divider{width:100%;line-height:0;position:relative;margin:-34px 0;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;overflow:hidden}
.section-divider img{width:auto;height:auto;max-height:120px;display:block;flex-shrink:0;opacity:1.0}
/* los divisores generados (línea/patrón/etc.) son mucho más delgados que
   una imagen tipo flor — si tienen esa clase, el margen negativo grande
   (pensado para compensar los 120px de una flor) sobra y se ve raro, así
   que aquí usamos un margen propio, mucho más discreto. */
.section-divider:has(.divider-wide,.divider-arch){margin:0;padding:26px 0}
@media (max-width:600px){
  .section-divider{margin:-18px 0}
  /* en pantallas angostas no queremos un "camino" de varias flores (se
     ven amontonadas y chiquitas) — mostramos solo la primera copia, a
     todo el ancho disponible, y ocultamos el resto. */
  .section-divider img{max-height:none;width:100%;height:auto;max-width:none}
  .section-divider img:not(:first-child){display:none}
  .section-divider:has(.divider-wide,.divider-arch){margin:0;padding:18px 0}
}

/* --- divisores generados en SVG (line, double-line, diamond, pattern) ---
   a diferencia de la imagen subida, estos son UN solo trazo ancho, no un
   "camino" repetido — se ven mejor como una única cenefa continua. */
.section-divider .divider-wide,.card-band-divider .divider-wide{width:100%;max-width:640px;height:26px;flex:1 1 auto;opacity:.9}
@media (max-width:600px){
  .section-divider .divider-wide,.card-band-divider .divider-wide{max-width:88%}
}
/* --- divisor tipo "arch": sí se repite en fila, como un festón de arcos --- */
.section-divider .divider-arch,.card-band-divider .divider-arch{width:70px;height:20px;flex-shrink:0;opacity:.9}
@media (max-width:600px){
  .section-divider .divider-arch:nth-child(n+4),.card-band-divider .divider-arch:nth-child(n+4){display:none}
}
.tone-light-a{background:var(--bg)}
.tone-light-b{background:var(--bg-alt)}
.tone-dark-a{background:var(--primary-dark);color:var(--white)}
.tone-dark-b{background:var(--primary-dark-2);color:var(--white)}

/* --- fondo de sección configurable en modo NORMAL (no-sticky) ---
   config.sectionBackground: "tone" (default, franjas de ancho completo
   de siempre) | "solid" | "image". Con "solid"/"image" cada sección se
   vuelve una tarjeta CONTENIDA, separada del borde de la pantalla con
   aire alrededor y un marco dorado — se lee más elegante y enmarcado
   que una franja a todo lo ancho, con espacio de sobra al final para
   que no se sienta apretada contra el borde. */
.section-card-plain{
  position:relative;
  max-width:880px;
  margin:34px auto;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 46px rgba(20,16,10,.18);
  border:1px solid var(--gold-soft);
}
.section-card-plain>section{padding:60px 30px;position:relative;z-index:1}
.section-card-plain.section-bg-solid{background:var(--white)}
.section-card-plain.section-bg-image{background:var(--section-bg-image, var(--white)) center/cover}
.section-card-plain:first-of-type{margin-top:44px}
@media (max-width:640px){
  .section-card-plain{margin:20px 14px;border-radius:12px}
  .section-card-plain>section{padding:44px 22px}
}

/* --- modo fondo fijo (sticky) de página completa --- */
.sticky-bg-fixed{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.sticky-bg-scrim{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,18,14,.22),rgba(20,18,14,.4) 60%,rgba(20,18,14,.55))}
body.sticky-mode{background:transparent}

/* Tres variantes de tarjeta para que el scroll en modo sticky tenga ritmo
   en vez de ser la misma caja blanca repetida. appendSection() en app.js
   les asigna la clase card-float / card-band / card-accent alternándolas
   según el tipo de sección. */
.section-card{margin:30px auto}
.section-card>section{padding:60px 30px;position:relative;z-index:1}
.section-card:first-of-type{margin-top:44px}

/* Tipo float: la tarjeta "de siempre" — flotante, centrada, esquinas
   redondeadas y sombra pronunciada. Para secciones íntimas. */
.section-card.card-float{max-width:880px;background:var(--white);border-radius:16px;box-shadow:0 26px 60px rgba(20,16,10,.3);margin-top:30px;margin-bottom:30px}

/* Tipo band: ocupa todo el ancho del viewport, sin sombra ni radio —
   se siente como una franja que corta la página. Si sectionDivider está
   activo en config.json, la misma franja floral que se usa en modo
   normal aparece aquí también, a caballo entre la card y el fondo
   sticky: mitad adentro, mitad afuera, arriba y abajo. Sin imagen,
   cae en una línea dorada simple como remate. */
.section-card.card-band{max-width:none;width:100%;margin:0 auto;background:var(--white);border-radius:0;box-shadow:0 18px 46px rgba(20,16,10,.22);position:relative}
.section-card.card-band::before,.section-card.card-band::after{content:'';display:block;height:1px;max-width:880px;margin:0 auto;background:linear-gradient(90deg,transparent,var(--gold-soft) 18%,var(--gold) 50%,var(--gold-soft) 82%,transparent)}
.section-card.card-band::before{position:absolute;top:0;left:0;right:0}
.section-card.card-band::after{position:absolute;bottom:0;left:0;right:0}
.section-card.card-band>section{padding-top:64px;padding-bottom:64px}
/* cuando hay imagen floral, ocultamos la línea dorada y usamos la franja
   real. La flor sube/baja translateY(50%): mitad queda pegada adentro
   del borde de ESTA card, mitad flota afuera sobre el fondo sticky. Esa
   mitad de afuera es más alta que el margen genérico, así que esta card
   necesita su propio margen extra para no tocar a sus vecinas (float,
   accent u otra band). Si la flor que subas es mucho más alta/baja que
   el default, ajusta este margen a mano. */
.section-card.card-band.has-divider-img{margin-top:110px;margin-bottom:110px}
.section-card.card-band.has-divider-img>section{padding-top:120px;padding-bottom:120px}
/* los divisores generados (línea, patrón, etc.) son mucho más delgados
   que una imagen tipo flor, así que necesitan bastante menos margen
   extra para no dejar un hueco vacío exagerado arriba/abajo. */
.section-card.card-band.has-divider-generated{margin-top:36px;margin-bottom:36px}
.section-card.card-band.has-divider-generated>section{padding-top:40px;padding-bottom:40px}
/* En vez de una sola imagen estirada a todo el ancho (que en pantallas
   grandes se vuelve gigante y tapa el título), el divisor es una fila
   flex que repite la misma imagen a su tamaño natural (con un techo de
   alto fijo) las veces que quepan — formando un "camino" de flores en
   vez de una flor deforme. En móvil, con poco ancho, basta una sola. */
.card-band-divider{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;overflow:hidden;z-index:2;pointer-events:none}
.card-band-divider img{width:auto;height:auto;max-height:120px;display:block;flex-shrink:0}
.card-band-divider.top{top:0;transform:translateY(-50%)}
.card-band-divider.bottom{bottom:0;transform:translateY(50%)}
@media (max-width:640px){
  /* en móvil, una sola flor a todo el ancho disponible en vez de un
     camino de varias amontonadas y chiquitas */
  .card-band-divider img{max-height:none;width:100%;height:auto;max-width:none}
  .card-band-divider img:not(:first-child){display:none}
}

/* Tipo accent: tarjeta flotante más angosta, con más aire alrededor y un
   marco delgado dorado en vez de sombra fuerte — para secciones breves
   que funcionan como una pausa (save the date, RSVP). */
.section-card.card-accent{max-width:620px;background:var(--white);border-radius:22px;box-shadow:0 16px 40px rgba(20,16,10,.2);border:1px solid var(--gold-soft);margin-top:30px;margin-bottom:30px}

/* En modo sticky, el estilo de las tarjetas es configurable
   (hero.stickyCardStyle: "blur" | "solid" | "image") — por default usan
   un desenfoque de cristal esmerilado para que el fondo fijo se siga
   viendo A TRAVÉS de cada sección en vez de quedar tapado por completo. */
body.sticky-card-blur .section-card.card-float,
body.sticky-card-blur .section-card.card-band,
body.sticky-card-blur .section-card.card-accent{
  background:rgba(255,253,248,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
}
body.sticky-card-blur .section-card.card-band::before,
body.sticky-card-blur .section-card.card-band::after{
  opacity:.85;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  /* respaldo para navegadores sin soporte de backdrop-filter: un poco
     más opaco para que el texto no pierda contraste sin el desenfoque */
  body.sticky-card-blur .section-card.card-float,
  body.sticky-card-blur .section-card.card-band,
  body.sticky-card-blur .section-card.card-accent{
    background:rgba(255,253,248,.9);
  }
}

/* "solid": color sólido de la paleta (sin transparencia) con un marco
   dorado más marcado — se lee como una tarjeta de papel clásica flotando
   sobre la foto, en vez de dejar ver el fondo a través. */
body.sticky-card-solid .section-card.card-float,
body.sticky-card-solid .section-card.card-band,
body.sticky-card-solid .section-card.card-accent{
  background:var(--white);
  border:1px solid var(--gold-soft);
}

/* "image": una textura o imagen propia (papel, tela, patrón) como fondo
   de cada tarjeta, en vez de un color plano — se repite (tile) o cubre
   según el tamaño de la imagen que suban. Se pone semitransparente por
   encima un velo claro para que el texto siga siendo legible sobre
   cualquier textura, por oscura o cargada que sea.
   Nota: usamos un <div class="card-texture-veil"> insertado por JS en
   vez de ::before/::after porque card-band ya usa esos dos pseudo-
   elementos para su línea dorada superior/inferior. */
body.sticky-card-image .section-card.card-float,
body.sticky-card-image .section-card.card-band,
body.sticky-card-image .section-card.card-accent{
  position:relative;
  background:var(--sticky-card-image, var(--white)) center/cover;
}
.card-texture-veil{position:absolute;inset:0;background:rgba(255,253,248,.82);z-index:0;border-radius:inherit;pointer-events:none}
.section-card.card-float>.card-texture-veil,.section-card.card-accent>.card-texture-veil{border-radius:inherit}



@media (max-width:640px){
  .section-card{margin:18px 14px}
  .section-card.card-float,.section-card.card-accent{margin-left:14px;margin-right:14px;margin-top:22px;margin-bottom:22px;border-radius:12px}
  .section-card.card-band{margin-left:0;margin-right:0}
  .section-card>section{padding:46px 22px}
  .section-card.card-band>section{padding-top:40px;padding-bottom:40px}
  .section-card.card-band.has-divider-img{margin-top:80px;margin-bottom:80px}
  .section-card.card-band.has-divider-img>section{padding-top:92px;padding-bottom:92px}
  .section-card.card-band.has-divider-generated{margin-top:28px;margin-bottom:28px}
  .section-card.card-band.has-divider-generated>section{padding-top:32px;padding-bottom:32px}
}
/* legibilidad de secciones que originalmente eran oscuras, ahora dentro de una tarjeta blanca
   (aplica tanto a las tarjetas del modo sticky como a las de sectionBackground:"solid"/"image") */
.section-card .eyebrow.on-dark,.section-card-plain .eyebrow.on-dark{color:var(--gold)}
.section-card .script-title.on-dark,.section-card-plain .script-title.on-dark{color:var(--primary-dark)}
.section-card #countdown .num,.section-card-plain #countdown .num{color:var(--gold)}
.section-card #countdown .num.secs,.section-card-plain #countdown .num.secs{color:var(--primary-dark)}
.section-card #countdown .colon,.section-card-plain #countdown .colon{color:var(--line)}
.section-card #details .icon,.section-card #details .label,.section-card-plain #details .icon,.section-card-plain #details .label{color:var(--gold)}
.section-card #banquet-menu .course-name,.section-card-plain #banquet-menu .course-name{color:var(--gold)}
.section-card #banquet-menu .course-item,.section-card-plain #banquet-menu .course-item{color:var(--ink);opacity:1}


/* --- overlay de apertura (4 modos: color / image / envelope / customImage) --- */
#opening-overlay{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--white);padding:32px;transition:opacity .9s ease,visibility .9s ease;overflow:hidden}
#opening-overlay.is-open{opacity:0;visibility:hidden;pointer-events:none}
#opening-overlay .overlay-particle-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}

/* modo color (default) y modo image comparten el bloque de texto */
#opening-overlay.mode-color,#opening-overlay.mode-image{background:var(--primary-dark)}
#opening-overlay .overlay-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#opening-overlay .overlay-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,14,.45),rgba(20,18,14,.65));z-index:1}
#opening-overlay .overlay-text{position:relative;z-index:2}
#opening-overlay .kicker{font-family:var(--font-label);font-size:12px;letter-spacing:5px;text-transform:uppercase;opacity:.8}
#opening-overlay .names{font-family:var(--font-display);font-size:58px;line-height:1;margin:20px 0 6px;color:var(--gold-soft)}
#opening-overlay .names .amp{font-size:34px;opacity:.85}
#opening-overlay .rule{width:70px;height:1px;background:rgba(255,255,255,.4);margin:16px auto}
#opening-overlay .date{font-family:var(--font-label);font-size:13px;letter-spacing:4px;opacity:.85}
#opening-overlay .open-btn{margin-top:38px;font-family:var(--font-label);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--primary-dark);background:var(--gold-soft);border:none;padding:15px 34px;border-radius:2px;cursor:pointer}

/* modo customImage: la imagen ocupa toda la pantalla y es clicable */
#opening-overlay.mode-customImage{background:var(--bg);padding:0}
#opening-overlay .custom-open-btn{position:absolute;inset:0;width:100%;height:100%;border:none;padding:0;cursor:pointer;background:none}
#opening-overlay .custom-open-btn img{width:100%;height:100%;object-fit:cover;display:block}

/* modo envelope: sobre ilustrado con animación de apertura + carta que sale */
#opening-overlay.mode-envelope{background:radial-gradient(ellipse at 50% 30%, var(--primary) 0%, var(--primary-dark) 72%)}
.envelope-scene{position:relative;width:min(84vw,300px);height:min(60vw,215px);z-index:2;margin-top:38px}
.envelope-shadow{position:absolute;left:8%;right:8%;bottom:-16px;height:22px;background:radial-gradient(ellipse at center, rgba(0,0,0,.4), transparent 72%);filter:blur(1px)}
.envelope{position:relative;width:100%;height:100%;cursor:pointer}
.envelope .pocket{position:absolute;inset:0;border-radius:5px;background:linear-gradient(155deg,var(--white) 0%,#faf5ea 100%);box-shadow:0 22px 46px rgba(15,12,8,.4),inset 0 0 0 1px rgba(0,0,0,.05);overflow:hidden}
.envelope .pocket-shade{position:absolute;inset:0;clip-path:polygon(0 100%,50% 40%,100% 100%);background:linear-gradient(180deg,rgba(30,24,14,.02),rgba(30,24,14,.05))}
.envelope .pocket-edge-l{position:absolute;inset:0;clip-path:polygon(0 0,50% 40%,0 100%);background:linear-gradient(115deg,rgba(30,24,14,.07),transparent 60%)}
.envelope .pocket-edge-r{position:absolute;inset:0;clip-path:polygon(100% 0,50% 40%,100% 100%);background:linear-gradient(245deg,rgba(30,24,14,.07),transparent 60%)}
.envelope-letter{position:absolute;left:50%;bottom:10%;width:72%;height:64%;transform:translate(-50%,6%) scale(.82);opacity:0;background:linear-gradient(165deg,var(--white),#fbf6ec);border-radius:3px;box-shadow:0 4px 18px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .55s ease .05s}
.envelope-letter .monogram{font-family:var(--font-display);font-size:26px;color:var(--primary-dark);line-height:1}
.envelope-letter .letter-rule{width:34px;height:1px;background:var(--gold-soft)}
.envelope-letter .letter-date{font-family:var(--font-label);font-size:8px;letter-spacing:2.5px;color:var(--ink-soft);text-transform:uppercase}
.envelope.opened .envelope-letter{transform:translate(-50%,-86%) scale(1);opacity:1;z-index:5}
.envelope .flap{position:absolute;top:0;left:0;width:100%;height:54%;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(165deg,#ece0c5 0%,#d9c79c 100%);transform-origin:top center;transition:transform .85s cubic-bezier(.45,0,.2,1);z-index:4;box-shadow:0 8px 16px rgba(0,0,0,.12)}
.envelope.opened .flap{transform:rotateX(180deg)}
.envelope .seal{position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 34% 30%,var(--gold-soft) 0%,var(--gold) 55%,#8a6a30 100%);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:17px;color:var(--white);box-shadow:0 5px 14px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,255,255,.4);z-index:6;transition:opacity .35s ease,transform .35s ease}
.envelope.opened .seal{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(25deg)}
#opening-overlay .envelope-hint{margin-top:24px;font-family:var(--font-body);font-style:italic;font-size:15px;opacity:.75;transition:opacity .4s ease}
#opening-overlay .envelope-hint.hidden{opacity:0}

/* --- botón de música --- */
#music-player{position:fixed;bottom:22px;right:22px;z-index:80;display:flex;align-items:center;overflow:hidden;background:rgba(255,253,248,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:30px;box-shadow:0 8px 28px rgba(40,30,15,.2);max-width:52px;transition:max-width .5s cubic-bezier(.25,.46,.45,.94)}
#music-player.expanded,#music-player:hover{max-width:280px}
.music-btn{width:52px;height:52px;min-width:52px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;color:var(--primary-dark)}
.music-info{padding:0 8px 0 2px;white-space:nowrap;overflow:hidden;flex:1}
.music-next-btn{width:36px;height:52px;min-width:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:none;color:var(--ink-soft);margin-right:4px}
.music-next-btn:hover{color:var(--gold)}
.music-now{font-family:var(--font-label);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.music-title{font-family:var(--font-body);font-style:italic;font-size:14px;color:var(--ink);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion: reduce){ #music-player{transition:none} }

/* --- hero --- */
#hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#hero .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* En modo sticky, el fondo real ya vive en .sticky-bg-fixed (una sola
   capa fija detrás de TODA la página). Sin esto, el propio hero
   dibujaba una segunda copia idéntica de esa misma foto/video encima,
   lo que se veía como una imagen "sobrepuesta" o duplicada. Aquí el
   hero se vuelve transparente y deja ver solo la capa fija de atrás. */
body.sticky-mode #hero .hero-photo{opacity:0}
#hero .hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,36,28,.42),rgba(40,36,28,.28) 45%,rgba(40,36,28,.6))}
#hero .petal-field{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.particle{position:absolute;top:-12vh;background:var(--gold-soft);animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite;opacity:.5}
.particle.leaf{border-radius:50% 0 50% 50%}
.particle.dot{border-radius:50%}
.particle.emoji{background:none;line-height:1;opacity:.85}
@keyframes fall{0%{transform:translateY(-12vh) rotate(0);opacity:0}12%{opacity:.65}100%{transform:translateY(118vh) rotate(320deg);opacity:.2}}
#hero .hero-content{position:relative;text-align:center;color:var(--white);padding:28px}
#hero h1{margin:22px 0 6px;font-family:var(--font-display);font-weight:400;font-size:76px;line-height:.95;text-shadow:0 4px 24px rgba(0,0,0,.35)}
#hero .amp-row{display:flex;align-items:center;justify-content:center;gap:18px;margin:2px 0}
#hero .amp-row span.line{width:52px;height:1px;background:rgba(255,255,255,.55)}
#hero .amp-row span.amp{font-family:var(--font-body);font-style:italic;font-size:26px;opacity:.9}
#hero .hero-date{font-family:var(--font-label);font-size:13px;letter-spacing:5px;text-transform:uppercase}
#hero .hero-place{font-family:var(--font-body);font-style:italic;font-size:19px;opacity:.85;margin-top:8px}
#hero .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--white);animation:bob 2s ease-in-out infinite;font-size:26px;opacity:.85}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@media (prefers-reduced-motion: reduce){ .particle, .scroll-hint{animation:none} }

/* --- guardar la fecha --- */
#save-the-date{padding:64px 28px}
#save-the-date .icon-wrap{display:flex;justify-content:center;margin:14px 0 18px}
#save-the-date .std-text{font-family:var(--font-body);font-size:19px;color:var(--ink-soft);max-width:440px;margin:0 auto 26px;line-height:1.6}
.save-the-date-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-form);font-weight:500;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--white);background:var(--gold);border:none;padding:15px 30px;border-radius:6px;text-decoration:none;cursor:pointer;box-shadow:0 10px 26px rgba(172,138,78,.35)}
.save-the-date-btn:hover{background:var(--primary-dark)}
.save-date-wrap{position:relative;display:inline-block}
.save-date-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px);background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 40px rgba(40,30,15,.18);padding:6px;min-width:200px;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;z-index:20}
.save-date-menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.save-date-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;padding:11px 12px;border-radius:6px;font-family:var(--font-form);font-size:13px;color:var(--ink);cursor:pointer}
.save-date-menu button:hover{background:var(--bg-alt);color:var(--gold)}

/* --- cuenta regresiva --- */
#countdown .grid{display:flex;justify-content:center;align-items:flex-start;gap:10px;margin-top:34px}
#countdown .unit{width:64px;flex-shrink:0}
#countdown .num{font-family:var(--font-form);font-weight:300;font-variant-numeric:tabular-nums;font-size:30px;line-height:1;color:var(--gold-soft);letter-spacing:1px}
#countdown .num.secs{color:var(--white)}
#countdown .lbl{font-family:var(--font-label);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;margin-top:8px;opacity:.85}
#countdown .colon{font-family:var(--font-form);font-weight:300;font-size:30px;color:rgba(255,255,255,.35);line-height:1.35;flex-shrink:0}
@keyframes tickpulse{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
#countdown .unit.secs.tick{animation:tickpulse .9s ease}
@media (min-width:480px){
  #countdown .grid{gap:14px}
  #countdown .unit{width:82px}
  #countdown .num{font-size:30px}
  #countdown .colon{font-size:42px}
  #countdown .lbl{font-size:11px;letter-spacing:3px}
}

/* --- bienvenida --- */
#welcome .mark{font-family:var(--font-body);font-size:34px;color:var(--gold);line-height:1}
#welcome .quote{font-family:var(--font-body);font-style:italic;font-weight:300;font-size:29px;line-height:1.55;color:var(--ink);margin:24px 0 30px}
#welcome .message{font-family:var(--font-body);font-size:21px;line-height:1.75;color:var(--ink-soft);margin:0}
#welcome .divider{margin-bottom:30px}

/* --- familia --- */
#family .subtitle{font-family:var(--font-body);font-style:italic;font-size:20px;color:var(--ink-soft);margin:0 auto 46px;max-width:520px}
#family .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:44px 34px;text-align:center;margin-bottom:20px}
#family .col-label{font-family:var(--font-label);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
#family .name-line{font-family:var(--font-body);font-size:24px;color:var(--ink)}
#family .godparents{margin-top:10px}
#family .divider{margin:48px auto 40px;max-width:340px}

/* --- itinerario --- */
#itinerary .itinerary-list{display:flex;flex-direction:column;margin-top:38px;text-align:left;max-width:520px;margin-left:auto;margin-right:auto}
.itinerary-item{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.itinerary-item:last-child{border-bottom:none}
.itinerary-icon{width:52px;height:52px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.itinerary-icon img{width:100%;height:100%;object-fit:contain}
.itinerary-info{padding-left:18px;border-left:2px solid var(--gold-soft)}
.itinerary-time{font-family:var(--font-label);font-size:11px;letter-spacing:2.5px;color:var(--gold);text-transform:uppercase}
.itinerary-title{font-family:var(--font-label);font-size:17px;font-weight:600;letter-spacing:1.5px;color:var(--ink);text-transform:uppercase;margin-top:4px}

/* --- eventos --- */
#events .cards, #accommodation .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;text-align:left;margin-top:20px}
#events .card, #accommodation .card{background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden}
#events .card-body, #accommodation .card-body{padding:32px 28px 24px;text-align:center}
#events .card-icon, #accommodation .card-icon{display:flex;justify-content:center;color:var(--gold)}
#events .card-label{font-family:var(--font-label);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-top:14px}
#events .card-time{font-family:var(--font-body);font-size:27px;color:var(--ink);margin-top:8px}
#events .card-venue, #accommodation .card-venue{font-family:var(--font-body);font-size:20px;color:var(--ink);margin-top:14px;font-weight:500}
#events .card-address, #accommodation .card-address{font-family:var(--font-body);font-size:18px;color:var(--ink-soft);margin-top:4px;line-height:1.5}
#events iframe{width:100%;height:210px;border:0;display:block}
#events .card-link, #accommodation .card-link{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px;font-family:var(--font-label);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--primary-dark);text-decoration:none;border-top:1px solid var(--line)}
#events .card-link-standalone{border-top:none;margin:24px 26px 26px;padding:14px 20px;border-radius:999px;background:var(--bg-alt);color:var(--primary-dark);font-weight:600;transition:background .25s ease,transform .25s ease}
#events .card-link-standalone:hover{background:var(--gold-soft);transform:translateY(-1px)}
#accommodation .intro{font-family:var(--font-body);font-size:19px;color:var(--ink-soft);margin:12px auto 0;max-width:480px}

/* --- detalles --- */
#details .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px 30px;margin-top:20px}
#details .icon{display:flex;justify-content:center;color:var(--gold-soft)}
#details .label{font-family:var(--font-label);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-soft);margin:14px 0 8px}
#details .value{font-family:var(--font-body);font-size:23px}
#details .note{font-family:var(--font-body);font-style:italic;font-size:17px;opacity:.8;margin-top:6px}
#details .swatches{display:flex;gap:8px;justify-content:center;margin-top:10px}
#details .swatch{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.3)}

/* --- mesa de regalos (sección propia + modal cardview) --- */
#gift-table .intro{font-family:var(--font-body);font-size:19px;color:var(--ink-soft);margin:12px auto 30px;max-width:480px}
#gift-table .open-modal-btn{font-family:var(--font-form);font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--white);background:var(--gold);border:none;padding:15px 34px;border-radius:6px;cursor:pointer}
.gift-modal-card{background:var(--white);max-width:440px;width:100%;border-radius:10px;padding:36px 32px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.3);max-height:88vh;overflow-y:auto;animation:modalPop .38s cubic-bezier(.2,.9,.3,1.2)}
@keyframes modalPop{0%{opacity:0;transform:scale(.92) translateY(14px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes backdropFade{0%{opacity:0}100%{opacity:1}}
.gift-modal-card .mark{font-family:var(--font-body);font-size:28px;color:var(--gold)}
.gift-modal-card h3{font-family:var(--font-display);font-weight:400;font-size:34px;color:var(--primary-dark);margin:8px 0 20px}
.gift-option{border:1px solid var(--line);border-radius:8px;padding:18px 20px;text-align:left;margin-bottom:14px}
.gift-option .go-label{font-family:var(--font-label);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.gift-option .go-value{font-family:var(--font-form);font-size:15px;color:var(--ink);line-height:1.6}
.gift-option .go-value b{color:var(--ink)}
.gift-option a.go-link{color:var(--primary-dark);text-decoration:underline;text-underline-offset:3px}
.go-copy-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0}
.go-copy-btn{flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}
.go-copy-btn:hover{border-color:var(--gold);color:var(--gold)}
.go-copy-btn.copied{background:var(--primary);border-color:var(--primary);color:var(--white)}
.bank-value{display:flex;flex-direction:column;gap:2px}
.go-copy-all-btn{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-label);font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600;padding:11px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--primary-dark);cursor:pointer;transition:all .2s ease}
.go-copy-all-btn:hover{border-color:var(--gold);color:var(--gold)}
.go-copy-all-btn.copied{background:var(--primary);border-color:var(--primary);color:var(--white)}
.gift-close-btn{margin-top:18px;font-family:var(--font-form);font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--white);background:var(--gold);border:none;padding:14px 30px;border-radius:6px;cursor:pointer;box-shadow:0 10px 24px rgba(172,138,78,.35);transition:transform .15s ease,box-shadow .15s ease}
.gift-close-btn:hover{background:var(--primary-dark);box-shadow:0 12px 28px rgba(91,100,70,.4);transform:translateY(-1px)}

/* --- overlay de modal genérico (regalos, etc.) --- */
.modal-backdrop{position:fixed;inset:0;z-index:150;background:rgba(30,26,20,.55);display:flex;align-items:center;justify-content:center;padding:22px;animation:backdropFade .25s ease}

/* --- padrinos por rubro --- */
#godparents-category .groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px 34px;margin-top:36px;text-align:center}
#godparents-category .rubro{font-family:var(--font-label);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
#godparents-category .gp-name{font-family:var(--font-body);font-size:21px;color:var(--ink)}

/* --- galería: modo Mosaico Clásico --- */
#gallery .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:34px}
#gallery img{width:100%;height:220px;object-fit:cover;border-radius:4px;cursor:pointer;transition:transform .4s ease}
#gallery img:hover{transform:scale(1.03)}
#lightbox{position:fixed;inset:0;background:rgba(20,18,14,.9);z-index:140;display:none;align-items:center;justify-content:center;padding:24px}
#lightbox.open{display:flex}
#lightbox img{max-width:100%;max-height:88vh;border-radius:4px}
#lightbox .close{position:absolute;top:22px;right:26px;color:var(--white);font-size:30px;background:none;border:none;cursor:pointer}
#lightbox .lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:var(--white);font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s ease}
#lightbox .lightbox-arrow:hover{background:rgba(255,255,255,.25)}
#lightbox .lightbox-arrow.prev{left:16px}
#lightbox .lightbox-arrow.next{right:16px}
#lightbox .lightbox-counter{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-family:var(--font-label);font-size:12px;letter-spacing:2px}
@media (max-width:640px){
  #lightbox .lightbox-arrow{width:42px;height:42px;font-size:24px}
  #lightbox .lightbox-arrow.prev{left:8px}
  #lightbox .lightbox-arrow.next{right:8px}
}

/* --- galería: modo Polaroid Deluxe --- */
#gallery .polaroid-stage{position:relative;height:420px;max-width:340px;margin:40px auto 26px;perspective:1200px}
#gallery .polaroid-card{position:absolute;inset:0;margin:auto;width:280px;height:340px;background:var(--white);padding:16px 16px 46px;box-shadow:0 18px 40px rgba(40,30,15,.25);border-radius:2px;transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .7s ease;cursor:grab}
#gallery .polaroid-card img{width:100%;height:100%;object-fit:cover}
#gallery .polaroid-card .caption{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:var(--font-display);font-size:20px;color:var(--ink)}
#gallery .polaroid-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
#gallery .polaroid-dots span{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s ease}
#gallery .polaroid-dots span.active{background:var(--gold)}
#gallery .polaroid-hint{font-family:var(--font-body);font-style:italic;font-size:14px;color:var(--ink-soft);opacity:.7;margin-top:4px}

/* --- galería: modo Carrusel --- */
#gallery .carrusel-wrap{position:relative;max-width:640px;margin:34px auto 0;border-radius:10px;overflow:hidden;box-shadow:0 20px 46px rgba(40,30,15,.22)}
#gallery .carrusel-track{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1);touch-action:pan-y}
#gallery .carrusel-slide{flex:0 0 100%;width:100%;aspect-ratio:4/3;cursor:grab}
#gallery .carrusel-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}
#gallery .carrusel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,253,248,.88);border:1px solid var(--gold-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s ease,transform .25s ease}
#gallery .carrusel-arrow:hover{background:var(--white);transform:translateY(-50%) scale(1.06)}
#gallery .carrusel-arrow.prev{left:14px}
#gallery .carrusel-arrow.next{right:14px}
#gallery .carrusel-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
#gallery .carrusel-dots span{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:background .3s ease,transform .3s ease}
#gallery .carrusel-dots span.active{background:var(--gold);transform:scale(1.25)}
@media (max-width:640px){
  #gallery .carrusel-arrow{width:36px;height:36px}
  #gallery .carrusel-wrap{margin-left:14px;margin-right:14px}
}

/* --- galería: modo Cine (cinta de película desplazándose sola) --- */
#gallery .cine-reel{position:relative;max-width:100%;margin:34px auto 0;overflow:hidden;background:#15130f;border-radius:6px;box-shadow:0 20px 46px rgba(40,30,15,.28);padding:14px 0}
#gallery .cine-track{display:flex;width:max-content;will-change:transform}
#gallery .cine-track.cine-playing{animation:cine-scroll var(--cine-duration,20s) linear infinite}
#gallery .cine-track.cine-paused{animation-play-state:paused}
@keyframes cine-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(var(--cine-distance,-50%))}
}
#gallery .cine-frame{flex:0 0 auto;width:180px;margin:0 3px;display:flex;flex-direction:column;cursor:pointer}
#gallery .cine-frame img{width:100%;height:320px;object-fit:contain;background:#000;display:block;border-top:2px solid #000;border-bottom:2px solid #000}
#gallery .cine-sprocket{height:12px;background-image:repeating-linear-gradient(90deg,#000 0 10px,transparent 10px 22px);background-position:center;opacity:.9}
@media (max-width:640px){
  #gallery .cine-frame{width:140px}
  #gallery .cine-frame img{height:250px}
  #gallery .cine-sprocket{height:9px;background-image:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 16px)}
}
@media (prefers-reduced-motion:reduce){
  #gallery .cine-track.cine-playing{animation:none}
}

/* --- historia --- */
#story .timeline{text-align:left;margin-top:40px;display:flex;flex-direction:column;gap:44px}
#story .item{padding-left:26px;border-left:2px solid var(--line);position:relative}
#story .item::before{content:'';position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--gold)}
#story .item .year{font-family:var(--font-label);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
#story .item .title{font-family:var(--font-display);font-size:32px;color:var(--primary-dark);margin:6px 0 8px}
#story .item .text{font-family:var(--font-body);font-size:19px;line-height:1.6;color:var(--ink-soft)}

/* --- video de los novios --- */
#couple-video .video-wrap{position:relative;max-width:720px;margin:34px auto 0;border-radius:8px;overflow:hidden;box-shadow:0 20px 50px rgba(40,30,15,.2);aspect-ratio:16/9;background:#000}
#couple-video iframe,#couple-video video{width:100%;height:100%;border:0;display:block}

/* --- menú del banquete --- */
#banquet-menu .courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:36px;margin-top:34px;text-align:center}
#banquet-menu .course-name{font-family:var(--font-display);font-size:30px;color:var(--gold-soft);margin-bottom:12px}
#banquet-menu .course-item{font-family:var(--font-body);font-size:19px;color:var(--white);opacity:.92;line-height:1.7}
#banquet-menu .note{font-family:var(--font-body);font-style:italic;font-size:15px;opacity:.7;margin-top:34px;max-width:520px;margin-left:auto;margin-right:auto}

/* --- compartir fotos (QR) --- */
#photo-share .qr-frame{background:var(--white);display:inline-block;padding:16px;border-radius:8px;box-shadow:0 14px 34px rgba(40,30,15,.15);margin:26px auto 10px}
#photo-share .qr-frame img{width:180px;height:180px;object-fit:contain}
#photo-share .text{font-family:var(--font-body);font-size:18px;color:var(--ink-soft);max-width:440px;margin:0 auto 22px;line-height:1.6}
#photo-share .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-form);font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--white);background:var(--primary);padding:15px 32px;border-radius:6px;text-decoration:none}

/* --- hashtag --- */
.hashtag-card{display:inline-flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:50px;padding:16px 28px;box-shadow:0 14px 34px rgba(40,30,15,.12);color:var(--gold);max-width:100%;box-sizing:border-box}
.hashtag-tag{font-family:var(--font-display);font-size:30px;color:var(--primary-dark);overflow-wrap:anywhere;min-width:0}
.hashtag-copy-btn{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}
.hashtag-copy-btn:hover{border-color:var(--gold);color:var(--gold)}
.hashtag-copy-btn.copied{background:var(--primary);border-color:var(--primary);color:var(--white)}
.hashtag-note{font-family:var(--font-body);font-style:italic;font-size:17px;color:var(--ink-soft);margin:20px auto 0;max-width:420px}
@media (max-width:480px){
  .hashtag-card{padding:14px 18px;gap:8px;border-radius:28px}
  .hashtag-tag{font-size:22px}
}

/* --- RSVP (cardview, con estado confirmado) --- */
#rsvp .intro{font-family:var(--font-body);font-size:20px;color:var(--ink-soft);margin:0 auto 6px;max-width:440px}
#rsvp .deadline{font-family:var(--font-body);font-weight:500;font-size:22px;color:var(--gold);margin:0 0 34px}
#rsvp .card{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:36px 30px;text-align:left;box-shadow:0 18px 46px rgba(60,50,30,.1);position:relative}
#rsvp .attend-toggle{display:flex;gap:10px;margin-bottom:22px}
#rsvp .attend-btn{flex:1;font-family:var(--font-form);font-size:13px;letter-spacing:.5px;padding:13px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);cursor:pointer;transition:all .25s ease}
#rsvp .attend-btn.selected{background:var(--primary);border-color:var(--primary);color:var(--white)}
#rsvp .attend-btn.decline.selected{background:var(--ink-soft);border-color:var(--ink-soft)}
#rsvp label{display:block;font-family:var(--font-label);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 7px}
#rsvp label:first-of-type{margin-top:0}
#rsvp input,#rsvp select,#rsvp textarea{width:100%;font-family:var(--font-form);font-size:16px;font-weight:400;color:var(--ink);padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--bg);outline:none}
#rsvp input::placeholder,#rsvp textarea::placeholder{font-family:var(--font-form);color:var(--ink-soft);opacity:.7}
#rsvp textarea{resize:vertical}
#rsvp .error{font-family:var(--font-form);font-size:13px;color:var(--error);min-height:18px;margin-top:4px}
#rsvp .guests-field{display:none}
.ticket-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.ticket-pill{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--bg-alt);color:var(--gold);border:1px solid var(--line)}
.attend-stepper{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:6px}
.stepper-btn{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:var(--white);color:var(--primary);font-size:22px;font-weight:600;line-height:1;cursor:pointer;transition:all .2s ease}
.stepper-btn:hover{background:var(--primary);border-color:var(--primary);color:var(--white)}
.stepper-btn:disabled{opacity:.4;cursor:default;background:var(--white);border-color:var(--line);color:var(--ink-soft)}
.stepper-value{text-align:center;min-width:90px}
.stepper-value span{font-family:var(--font-form);font-weight:700;font-size:38px;color:var(--primary);line-height:1;display:inline-block;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.stepper-value.bump span{transform:scale(1.25)}
.stepper-value small{display:block;font-family:var(--font-form);font-size:12px;color:var(--ink-soft);margin-top:2px}
.guests-count-input{width:90px;text-align:center;font-family:var(--font-form);font-weight:700;font-size:32px;color:var(--primary);border:2px solid var(--line);border-radius:10px;background:var(--white);padding:6px 4px;-moz-appearance:textfield}
.guests-count-input:focus{outline:none;border-color:var(--primary)}
.guests-count-input::-webkit-outer-spin-button,.guests-count-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.guests-count-hint{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:10px}
.attend-bar{display:flex;gap:5px;margin-top:14px}
.bar-seg{flex:1;height:7px;border-radius:4px;background:var(--bg-alt);transition:background .35s ease,transform .35s ease}
.bar-seg.filled{background:var(--primary)}
.bar-seg.pending{background:var(--gold)}
#rsvp.attending .guests-field{display:block}
#rsvp .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
#rsvp .btn{flex:1;min-width:140px;font-family:var(--font-form);font-weight:500;font-size:13px;letter-spacing:1px;text-transform:uppercase;padding:15px;border-radius:6px;cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
#rsvp .btn-wa{color:var(--white);background:var(--primary);border:none}
#rsvp .btn-mail{color:var(--primary-dark);background:transparent;border:1px solid var(--primary)}
#rsvp .card.is-confirmed .rsvp-form-wrap{display:none}
#rsvp .rsvp-confirmed{display:none;text-align:center;padding:12px 4px}
#rsvp .card.is-confirmed .rsvp-confirmed{display:block}
#rsvp .rsvp-closed{display:none;text-align:center;padding:12px 4px}
#rsvp .rsvp-closed .confirmed-icon{display:flex;justify-content:center;color:var(--ink-soft);margin-bottom:14px}
#rsvp .rsvp-closed h3{font-family:var(--font-display);font-size:26px;color:var(--ink);margin:0 0 10px}
#rsvp .rsvp-closed p{font-family:var(--font-body);font-size:15px;color:var(--ink-soft);max-width:360px;margin:0 auto;line-height:1.6}
#rsvp .rsvp-confirmed .confirmed-icon{display:flex;justify-content:center;color:var(--primary);margin-bottom:14px}
#rsvp .rsvp-confirmed h3{font-family:var(--font-display);font-weight:400;font-size:36px;color:var(--primary-dark);margin:0 0 10px}
#rsvp .rsvp-confirmed p{font-family:var(--font-form);font-size:15px;color:var(--ink-soft);line-height:1.6;max-width:340px;margin:0 auto 22px}
#rsvp .rsvp-confirmed-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px}
#rsvp .edit-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-form);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--primary-dark);background:transparent;border:1px solid var(--line);padding:12px 22px;border-radius:6px;cursor:pointer}
#rsvp .edit-btn:hover{border-color:var(--gold);color:var(--gold)}

/* --- confeti de festejo --- */
.confetti-burst{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:visible}
.confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;transform:translate(-50%,-50%);animation:confettiPop .95s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes confettiPop{
  0%{transform:translate(-50%,-50%) translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(-50%,-50%) translate(var(--dx),calc(var(--dy) + 90px)) rotate(var(--rot));opacity:0}
}

/* --- cierre --- */
#closing{padding:88px 28px;text-align:center;background:var(--primary-dark);color:var(--white)}
#closing .closing-inner{max-width:960px;margin:0 auto}
#closing .mark{font-family:var(--font-body);font-size:30px;color:var(--gold-soft)}
#closing .thanks{font-family:var(--font-body);font-style:italic;font-size:22px;opacity:.9;margin:20px 0 26px}
#closing .names{font-family:var(--font-display);font-size:58px;line-height:1.05;color:var(--white)}
#closing .date{font-family:var(--font-label);font-size:12px;letter-spacing:5px;text-transform:uppercase;margin-top:20px;opacity:.75}

/* --- footer de marca (DYNVITIA) --- */
#brand-footer{text-align:center;padding:34px 24px 46px;background:var(--primary-dark)}
#brand-footer .wrap{margin-top:16px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);display:inline-block}
#brand-footer .brand-kicker{font-family:var(--font-label);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:10px}
#brand-footer .brand-logo-link{display:inline-block;opacity:.55;transition:opacity .3s ease}
#brand-footer .brand-logo-link:hover{opacity:.9}
#brand-footer .brand-logo{max-width:140px;max-height:32px;width:auto;height:auto;display:block;margin:0 auto}
#brand-footer .brand-social{display:flex;justify-content:center;gap:12px;margin-top:14px}
#brand-footer .brand-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.4);transition:all .3s ease}
#brand-footer .brand-social a:hover{border-color:var(--gold-soft);color:var(--gold-soft)}

/* --- pantalla de acceso (Firebase, guestAccessMethod: password) --- */
#auth-gate{position:fixed;inset:0;z-index:125;background:var(--primary-dark);display:flex;align-items:center;justify-content:center;padding:24px;transition:opacity .5s ease,visibility .5s ease}
#auth-gate.is-closing{opacity:0;visibility:hidden}
.auth-card{background:var(--white);max-width:380px;width:100%;border-radius:12px;padding:40px 32px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.auth-kicker{font-family:var(--font-label);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
.auth-title{font-family:var(--font-display);font-size:38px;color:var(--primary-dark);margin:10px 0 14px}
.auth-copy{font-family:var(--font-form);font-size:14px;color:var(--ink-soft);line-height:1.6;margin:0 0 24px}
#auth-form{text-align:left}
#auth-form label{display:block;font-family:var(--font-label);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 7px}
#auth-form label:first-of-type{margin-top:0}
#auth-form input{width:100%;font-family:var(--font-form);font-size:16px;color:var(--ink);padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--bg);outline:none}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:42px}
.pw-wrap .pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:auto;margin-top:0;padding:6px;background:none;color:var(--ink-soft);border:none;box-shadow:none;text-transform:none;letter-spacing:normal;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pw-wrap .pw-eye:hover{color:var(--gold);background:none}
.auth-error{font-family:var(--font-form);font-size:13px;color:var(--error);min-height:18px;margin-top:10px}
#auth-submit{width:100%;margin-top:8px;font-family:var(--font-form);font-weight:500;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--white);background:var(--primary);border:none;padding:14px;border-radius:6px;cursor:pointer}
#auth-submit:disabled{opacity:.6;cursor:default}

@media (max-width:520px){
  #hero h1{font-size:56px}
  #opening-overlay .names{font-size:44px}
  #closing .names{font-size:44px}
}