/* =============================================================
   ANDREA & HUGO · BODA — rediseño depurado
   Blanco · negro · dorado tenue
   1. Tokens            9. Lugares
   2. Base              10. Carruseles
   3. Utilidades        11. Collages
   4. Portal / Telón    12. Vestimenta Total Black
   5. Portada           13. Regalos
   6. Cuenta (flip)     14. Pase · Formulario
   7. Familias·Padrinos 15. Cierre · Flotantes · Visor
   8. Frase·Itinerario  16. Responsive · Accesibilidad
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --negro:#0B0B0B;
  --carbon:#141414;
  --tinta:#1A1A1A;
  --blanco:#FBFAF8;
  --hueso:#F3F1EC;
  --gris:#8C8B87;
  --gris-suave:#B8B6B1;

  --oro:#B9975B;
  --oro-claro:#DFC996;
  --oro-linea:rgba(185,151,91,.5);

  --linea:rgba(11,11,11,.12);
  --linea-inv:rgba(251,250,248,.14);

  --display:"Cormorant Garamond",Georgia,serif;
  --cuerpo:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;

  --kick:clamp(.58rem,.52rem + .3vw,.68rem);
  --esc-titulo:clamp(2.3rem,1.3rem + 4vw,4.4rem);
  --esc-nombre:clamp(3rem,1.2rem + 9vw,7.6rem);

  --aire:clamp(5rem,3.5rem + 9vw,10rem);
  --ancho:min(100% - 2.6rem,1120px);
  --curva:cubic-bezier(.16,1,.3,1);
  --curva-suave:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;overflow-x:hidden}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* ---------- 2. BASE ---------- */
body{
  background:var(--blanco);color:var(--negro);
  font-family:var(--cuerpo);font-size:clamp(.94rem,.9rem + .28vw,1.02rem);
  font-weight:300;line-height:1.75;letter-spacing:.005em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
/* Bloqueo de scroll sin forzar altura (evita reflows/zoom en móvil) */
body.is-locked{overflow:hidden}

img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--oro);color:var(--negro)}

.seccion{width:var(--ancho);margin-inline:auto;padding-block:var(--aire);position:relative}
.seccion--centro{text-align:center}
.banda{position:relative;padding-block:var(--aire)}
.banda--oscuro{background:var(--negro);color:var(--blanco)}
.banda--oscuro .kicker{color:var(--oro)}
.banda--oscuro .titulo{color:var(--blanco)}
.banda__cuerpo{width:var(--ancho);margin-inline:auto}

/* ---------- 3. UTILIDADES ---------- */
.kicker{font-size:var(--kick);letter-spacing:.5em;text-transform:uppercase;color:var(--oro);font-weight:400;text-indent:.5em}
.titulo{font-family:var(--display);font-size:var(--esc-titulo);font-weight:300;line-height:1.04;letter-spacing:.01em;margin-top:.7rem}
.cabecera{margin-bottom:clamp(2.6rem,1.8rem + 3vw,4rem);max-width:38ch}
.cabecera--centro{margin-inline:auto;text-align:center}
.cabecera--centro .titulo::after{content:"";display:block;width:40px;height:1px;background:var(--oro-linea);margin:1.3rem auto 0}
.parrafo{color:var(--gris);margin-top:1.1rem;max-width:52ch;font-weight:300}
.parrafo--centro{margin-inline:auto;text-align:center}
.banda--oscuro .parrafo{color:var(--gris-suave)}
.nota{font-size:.8rem;color:var(--gris);margin-top:1.6rem;letter-spacing:.02em}
.cruz{color:var(--oro);font-size:.82em;margin-left:.15em}

/* enlaces con subrayado que crece — más fino que un botón */
.link{
  position:relative;display:inline-block;cursor:pointer;background:none;border:0;
  font-family:var(--cuerpo);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:inherit;font-weight:400;
  padding-bottom:.4rem;
}
.link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(.001);transform-origin:left;transition:transform .55s var(--curva)}
.link:hover::after{transform:scaleX(1)}
.banda--oscuro .link,.portal .link{color:var(--oro-claro)}
.link--sub{font-size:.66rem;color:var(--oro)}
.link--caja,.link--enviar{border:1px solid currentColor;padding:.9rem 2rem;color:var(--negro)}
.link--caja::after,.link--enviar::after{height:100%;bottom:0;background:var(--negro);opacity:.06}
.banda--oscuro .link--enviar{color:var(--oro-claro);border-color:var(--oro-linea)}
.banda--oscuro .link--enviar::after{background:var(--oro)}

/* revelado profesional: sube + aclara desenfoque, escalonado por --i */
.reveal{opacity:0;transform:translateY(38px);filter:blur(8px);transition:opacity 1.2s var(--curva),transform 1.2s var(--curva),filter 1.2s var(--curva);transition-delay:calc(var(--i,0) * 120ms)}
.reveal.visible{opacity:1;transform:none;filter:none}
.reveal-now{opacity:0;animation:emerge 1.2s var(--curva) forwards;animation-delay:calc(.3s + var(--i,0) * 150ms)}
@keyframes emerge{from{opacity:0;transform:translateY(26px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* ---------- 4. PORTAL / TELÓN ---------- */
.entrar{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.progreso{position:fixed;top:0;left:0;width:100%;height:1px;z-index:60;background:rgba(11,11,11,.07)}
.progreso span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--oro),var(--oro-claro))}

.portal{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;text-align:center;
  overflow-y:auto;overscroll-behavior:contain;padding:2rem 1.25rem;box-sizing:border-box;left:0;right:0;width:100%;
  background:var(--negro);color:var(--blanco);cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:opacity 1.2s var(--curva),visibility 1.2s;
}

/* Foto de fondo del portal — misma imagen que la portada: al abrir, el telón
   descubre esta escena y da paso a la portada en color pleno */
.portal__foto{position:absolute;inset:0;z-index:0;overflow:hidden}
.portal__foto img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.7);
  transform:scale(1.14);animation:portalZoom 9s var(--curva) forwards;
}
@keyframes portalZoom{to{transform:scale(1.02)}}

/* Velo que asegura contraste del texto sobre la foto */
.portal__velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%,rgba(6,6,6,.15),rgba(6,6,6,.72) 78%),
    linear-gradient(180deg,rgba(6,6,6,.58),rgba(6,6,6,.28) 42%,rgba(6,6,6,.78));
}

/* Lienzo de lluvia de arroz (lo pinta script.js) */
.lluvia{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}

/* Telón translúcido: deja entrever la foto y aporta la ceremonia de apertura */
.telon__hoja{position:absolute;top:0;bottom:0;width:50.5%;z-index:2;transition:transform 1.4s var(--curva)}
.telon__hoja--izq{left:0;background:linear-gradient(90deg,rgba(6,6,6,.34),rgba(6,6,6,.6));border-right:1px solid var(--oro-linea)}
.telon__hoja--der{right:0;background:linear-gradient(270deg,rgba(6,6,6,.34),rgba(6,6,6,.6))}
.entrar:checked ~ .portal .telon__hoja--izq{transform:translateX(-101%)}
.entrar:checked ~ .portal .telon__hoja--der{transform:translateX(101%)}
.entrar:checked ~ .portal{opacity:0;visibility:hidden;pointer-events:none;transition-delay:.6s}
body:has(.entrar:checked){overflow:auto;height:auto}

.portal__inner{position:relative;z-index:4;display:grid;gap:1.5rem;justify-items:center;max-width:100%;text-shadow:0 2px 34px rgba(0,0,0,.5)}
.mono{width:clamp(58px,12vw,80px);color:var(--oro)}
/* Bandas y gema para el anillo */
.mono .band{stroke-width:2.2}
.mono .gem{fill:var(--oro-claro);stroke:currentColor;stroke-width:.6;stroke-linejoin:round}
.mono .traza{stroke-dasharray:360;stroke-dashoffset:360;animation:trazar 2.2s var(--curva) forwards}
.mono .traza.no-anim{animation:none;stroke-dashoffset:0}
.mono .traza:nth-child(2){animation-delay:.5s}
/* Letras dentro del monograma */
.mono-letters{font-family:'Cormorant Garamond', serif;fill:currentColor;font-size:18px;font-weight:400}
.mono--pie .mono-letters{font-size:14px}
@keyframes trazar{to{stroke-dashoffset:0}}
.portal__nombre{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,1.6rem + 5.5vw,5rem);line-height:1.06;letter-spacing:.01em}
.portal__nombre span{font-style:italic;color:var(--oro)}
.portal__sub{letter-spacing:.34em;text-transform:uppercase;font-size:.7rem;color:rgba(251,250,248,.72)}
.portal__nota{position:absolute;bottom:1.6rem;left:0;right:0;text-align:center;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(251,250,248,.5);z-index:4}
#btn-abrir{margin-top:.4rem}

/* ---------- 5. PORTADA ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center}
.hero__foto{position:absolute;inset:0}
.hero__foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transform:scale(1.12);transition:transform 2.4s var(--curva)}
body:has(.entrar:checked) .hero__foto img{transform:scale(1)}
.hero__velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.5),rgba(11,11,11,.32) 42%,rgba(11,11,11,.66))}

.hero__inner{position:relative;z-index:2;color:var(--blanco);padding:2rem;display:grid;justify-items:center;gap:.3rem}
.hero__inner .kicker{color:var(--oro-claro)}
.hero__nombres{font-family:var(--display);font-weight:300;line-height:1;margin:1rem 0 .3rem;display:grid;justify-items:center;gap:.05rem}
.linea-nombre{font-size:var(--esc-nombre);display:block;letter-spacing:.01em}
.amp{font-style:italic;font-size:clamp(1.6rem,1rem + 2.6vw,2.8rem);color:var(--oro);margin:.15rem 0;opacity:0;transition:opacity 1s var(--curva) .9s}
body:has(.entrar:checked) .amp{opacity:1}
.letra{display:inline-block;opacity:0;transform:translateY(.7em)}
body:has(.entrar:checked) .letra{animation:letra 1.1s var(--curva) forwards;animation-delay:calc(.7s + var(--l) * 50ms)}
@keyframes letra{to{opacity:1;transform:none}}
.hero__regla{width:0;height:1px;background:var(--oro-linea);margin:1.2rem auto .9rem;overflow:hidden;transition:width 1.4s var(--curva) 1s}
body:has(.entrar:checked) .hero__regla{width:min(60vw,220px)}
.hero__apellidos{letter-spacing:.42em;text-transform:uppercase;font-size:.68rem;color:rgba(251,250,248,.82)}

.scroll-cue{position:absolute;bottom:1.9rem;left:50%;z-index:3;transform:translateX(-50%);width:1px;height:54px;background:linear-gradient(var(--oro-linea),transparent)}
.scroll-cue span{position:absolute;top:0;left:-2px;width:5px;height:5px;border-radius:50%;background:var(--oro);animation:caer 2.8s var(--curva) infinite}
@keyframes caer{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(50px);opacity:0}}

/* ---------- 6. CUENTA (flip) ---------- */
.cuenta-bloque{text-align:center}

/* ---------- 07. MARQUESINA ---------- */
.marquee{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);overflow:hidden;padding-block:1.6rem}
.marquee__track{display:flex;width:max-content;animation:slide 32s linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse;animation-duration:38s}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:var(--display);font-style:italic;font-size:clamp(1.6rem,4vw,2.6rem);padding:0 1.6rem;white-space:nowrap;color:var(--gris)}
.marquee__track span::after{content:"·";margin-left:3.2rem;color:var(--gris-suave)}
@keyframes slide{to{transform:translateX(-50%)}}

.cuenta{display:flex;align-items:flex-start;justify-content:center;gap:clamp(.9rem,3vw,2.2rem);margin-top:clamp(2rem,4vw,3rem);flex-wrap:wrap}
.flip{display:grid;gap:.9rem;justify-items:center;min-width:clamp(3.8rem,13vw,5rem)}
.flip__num{position:relative;height:1em;line-height:1;font-family:var(--display);font-size:clamp(2.6rem,1.6rem + 4vw,4.4rem);font-weight:300;font-variant-numeric:tabular-nums;color:var(--blanco);overflow:hidden}
.flip__cara{display:block}
.flip__cara.entra{animation:flipIn .6s var(--curva-suave)}
.flip__cara.sale{position:absolute;inset:0;animation:flipOut .6s var(--curva-suave) forwards}
@keyframes flipIn{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes flipOut{from{transform:none;opacity:1}to{transform:translateY(100%);opacity:0}}
.flip__etq{font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gris)}
.flip__dot{width:3px;height:3px;border-radius:50%;background:var(--oro);margin-top:1.4em;opacity:.7}

/* ---------- 7. FAMILIAS · PADRINOS ---------- */
.familias{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(1.5rem,5vw,4rem);text-align:center}
.familia__de{font-size:var(--kick);letter-spacing:.3em;text-transform:uppercase;color:var(--oro);margin-bottom:1rem}
.familia__n{font-family:var(--display);font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);line-height:1.5;font-weight:300}
.familia__linea{width:1px;height:clamp(64px,10vw,120px);background:linear-gradient(transparent,var(--oro-linea),transparent);justify-self:center}

.padrinos-solo{text-align:center;display:grid;gap:.7rem;justify-items:center}
.padrinos-solo .padrino__n{font-family:var(--display);font-size:clamp(1.4rem,1rem + 1.8vw,2.4rem);font-weight:300;line-height:1.35;color:var(--blanco)}
.padrino__amp{font-family:var(--display);font-style:italic;font-size:1.6rem;color:var(--oro)}

/* ---------- 8. FRASE · ITINERARIO ---------- */
.frase-bloque{max-width:820px;text-align:center}
.masc{font-family:var(--display);font-size:clamp(1.4rem,1rem + 2vw,2.4rem);line-height:1.45;font-weight:300;font-style:italic}
.masc__i{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(var(--negro),var(--negro)) no-repeat;background-size:0% 100%;color:transparent;-webkit-background-clip:text;background-clip:text;transition:background-size 2s var(--curva-suave)}
.masc__i.pintada{background-size:100% 100%}

/* Timeline con iconos: línea vertical dorada + iconos que se dibujan */
.timeline{list-style:none;position:relative;max-width:620px;margin-inline:auto;padding-left:clamp(3.4rem,10vw,4.5rem)}
.timeline::before{content:"";position:absolute;left:clamp(1.4rem,4.5vw,1.9rem);top:.5rem;bottom:.5rem;width:1px;background:var(--linea-inv);overflow:hidden}
.timeline::after{content:"";position:absolute;left:clamp(1.4rem,4.5vw,1.9rem);top:.5rem;width:1px;height:0;background:linear-gradient(var(--oro),var(--oro-claro));transition:height 1.4s var(--curva-suave)}
.timeline.trazada::after{height:calc(100% - 1rem)}
.hito{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:clamp(1rem,3vw,1.6rem);align-items:baseline;padding-block:clamp(1.3rem,2.4vw,2rem)}
.hito__icono{
  position:absolute;left:calc(clamp(1.4rem,4.5vw,1.9rem) - clamp(3.4rem,10vw,4.5rem) + .5px);
  top:.1rem;transform:translateX(-50%);
  width:clamp(40px,9vw,50px);height:clamp(40px,9vw,50px);display:grid;place-items:center;border-radius:50%;
  background:var(--negro);border:1px solid var(--oro-linea);color:var(--oro);
}
.hito__icono svg{width:64%;height:64%}
.hito__icono .dibujo{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.1s var(--curva-suave)}
.hito.visible .hito__icono .dibujo{stroke-dashoffset:0}
.hito__h{font-family:var(--display);font-size:clamp(1.3rem,1rem + 1vw,1.7rem);color:var(--oro-claro);grid-column:2;line-height:1}
.hito__cuerpo{grid-column:2;margin-top:.2rem}
.hito__cuerpo h3{font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,.95rem + .9vw,1.55rem);line-height:1.25;color:var(--blanco)}
.hito__cuerpo p{color:var(--gris-suave);font-size:.9rem;margin-top:.15rem}

/* ---------- 9. LUGARES ---------- */
.lugares{display:grid;gap:clamp(1.4rem,3vw,2.4rem);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.lugar{overflow:hidden}
.lugar__foto{aspect-ratio:4/3;overflow:hidden;background:var(--hueso)}
.lugar__foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);transition:transform 1.8s var(--curva)}
.lugar:hover .lugar__foto img{transform:scale(1.06)}
.lugar__cuerpo{padding-top:clamp(1.4rem,2.5vw,2rem);display:grid;gap:.55rem;justify-items:start}
.lugar__icono{width:34px;height:34px;color:var(--oro)}
.lugar__cuerpo h3{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,1rem + 1.4vw,2rem);line-height:1.15}
.dir{color:var(--gris);font-size:.9rem;line-height:1.65}
.lugar .link{margin-top:.6rem}

/* ---------- 10. CARRUSELES ---------- */
.carrusel-bloque{padding-block:clamp(2.5rem,5vw,4rem)}
.carrusel-etq{width:var(--ancho);margin-inline:auto;font-size:var(--kick);letter-spacing:.5em;text-transform:uppercase;color:var(--oro);margin-bottom:1.4rem;display:flex;align-items:center;gap:1.2rem}
.carrusel-etq::after{content:"";flex:1;height:1px;background:var(--linea)}
.carrusel{display:flex;gap:clamp(.7rem,1.5vw,1.1rem);overflow-x:auto;scroll-snap-type:x mandatory;padding:.3rem clamp(1.3rem,4vw,3rem) 1.4rem;scrollbar-width:thin;scrollbar-color:var(--oro) transparent;cursor:grab}
.carrusel.arrastrando{cursor:grabbing;scroll-snap-type:none}
.carrusel::-webkit-scrollbar{height:3px}
.carrusel::-webkit-scrollbar-thumb{background:var(--oro-linea);border-radius:99px}
.tira{flex:0 0 min(66vw,280px);scroll-snap-align:center;overflow:hidden;background:var(--hueso)}
.tira--ancha{flex-basis:min(84vw,440px)}
.tira__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.tira img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.03);transition:transform 1.4s var(--curva),filter 1.4s var(--curva)}
.tira--ancha img{aspect-ratio:13/9}
.tira:hover img{transform:scale(1.05);filter:grayscale(1) contrast(1.1)}

/* ---------- 11. COLLAGES ---------- */
.collage--uno{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.6rem);align-items:stretch;align-content:start}
.collage__f{overflow:hidden;background:var(--hueso)}
.collage__f img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03)}
.collage__f--1,.collage__f--2,.collage__f--3,.collage__f--4{aspect-ratio:3/4}
.collage__f--2{aspect-ratio:1}
.collage__f--4{aspect-ratio:4/3}
.collage__texto{grid-column:1/-1;margin-top:1.2rem}
.collage__texto p{font-family:var(--display);font-size:clamp(1.1rem,.9rem + 1vw,1.5rem);line-height:1.5;margin-bottom:.9rem;font-weight:300}
.collage__texto em{font-style:italic;color:var(--oro)}

.collage2{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,1.5vw,1rem);padding:clamp(2.5rem,5vw,4.5rem) clamp(1.3rem,4vw,3rem);background:var(--negro)}
.collage2__f{overflow:hidden;background:var(--carbon)}
.collage2__f img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.9}
.collage2__f--1{aspect-ratio:3/4}
.collage2__f--2{aspect-ratio:1;margin-top:clamp(1.5rem,5vw,4rem)}
.collage2__f--3{aspect-ratio:3/4;margin-top:clamp(-1rem,-3vw,-.5rem)}
.collage2__f--4{aspect-ratio:1;margin-top:clamp(2rem,7vw,5rem)}
.collage2__cita{grid-column:1/-1;text-align:center;padding-top:clamp(1.8rem,4vw,3rem)}
.collage2__cita p{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.4rem,1rem + 2.4vw,2.6rem);color:var(--blanco)}

/* ---------- 12. VESTIMENTA · TOTAL BLACK ---------- */
.tb{background:#060606;overflow:hidden}
.tb__cuerpo{text-align:center;max-width:720px;margin-inline:auto;position:relative}
.tb__cuerpo::before{content:"";position:absolute;top:-14%;left:50%;transform:translateX(-50%);width:min(90vw,460px);aspect-ratio:1;background:radial-gradient(circle,rgba(185,151,91,.13),transparent 68%);pointer-events:none}
.tb__titulo{position:relative;font-family:var(--display);font-weight:300;font-size:clamp(2.8rem,1.4rem + 6vw,5.4rem);line-height:1;color:var(--blanco);letter-spacing:.02em}
.tb__titulo::after{content:"";display:block;width:52px;height:1px;background:var(--oro);margin:1.4rem auto 0}
.tb__lead{position:relative;color:var(--gris-suave);margin-top:1.5rem;max-width:44ch;margin-inline:auto}
.tb__lead b{color:var(--oro-claro);font-weight:400}
.tb__cols{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(2.6rem,5vw,4rem);text-align:center}
.tb__ic{display:block;width:40px;height:44px;margin:0 auto .9rem;color:var(--oro)}
.tb__col .familia__de{color:var(--oro)}
.tb__t{color:var(--gris-suave);font-size:.94rem;margin-top:.4rem;line-height:1.55}
.tb__punto{width:5px;height:5px;border-radius:50%;background:var(--oro);justify-self:center;margin-top:2.6rem}
.tb__nota{position:relative;margin-top:clamp(2.2rem,4vw,3rem);font-style:italic;font-family:var(--display);font-size:clamp(1.05rem,.9rem + .8vw,1.4rem);color:var(--gris-suave)}

/* ---------- 13. REGALOS ---------- */
.acciones{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:2.2rem}

/* ---------- 14. PASE · FORMULARIO ---------- */
.pase{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;max-width:620px;margin-inline:auto;border:1px solid var(--oro-linea)}
.pase__lado{padding:clamp(1.4rem,1rem + 2vw,2.2rem) clamp(1.2rem,3vw,2.4rem);display:grid;gap:.6rem;align-content:center;text-align:center}
.pase__lado--num{background:var(--oro);color:var(--negro)}
.pase__etq{font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:var(--oro)}
.pase__lado--num .pase__etq{color:rgba(11,11,11,.6)}
.pase__nombre{font-family:var(--display);font-size:clamp(1.3rem,1rem + 1.4vw,2rem);line-height:1.15;color:var(--blanco)}
.pase__num{font-family:var(--display);font-size:clamp(2.4rem,1.5rem + 3vw,3.6rem);line-height:1}
.pase__corte{width:1px;background:repeating-linear-gradient(var(--oro-linea) 0 6px,transparent 6px 12px)}

.form{display:grid;gap:1.5rem;max-width:540px;margin-inline:auto}
.campo{display:grid;gap:.5rem}
.campo label,.campo legend{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--oro)}
.campo .opc{letter-spacing:.06em;text-transform:none;color:var(--gris)}
.campo input,.campo textarea{width:100%;padding:.85rem 0;background:transparent;border:0;border-bottom:1px solid var(--linea-inv);color:var(--blanco);transition:border-color .5s var(--curva)}
.campo input:focus,.campo textarea:focus{outline:none;border-bottom-color:var(--oro)}
.campo textarea{resize:vertical}

.guest-row{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.guest-row .campo{flex:1}
.guest-row label{display:block;margin-bottom:.35rem;color:var(--oro);font-size:.75rem}
.guest-nombre{padding:.85rem 0;background:transparent;border:0;border-bottom:1px solid var(--linea-inv);color:var(--blanco)}
.guest-tipo{padding:.85rem .6rem;background:transparent;border:0;border-bottom:1px solid var(--linea-inv);color:var(--blanco);appearance:none;-webkit-appearance:none;font:inherit;min-width:120px;text-align:left}
.guest-tipo:focus{outline:none;border-bottom-color:var(--oro)}
.guest-tipo option{color:var(--negro)}
.ayuda{font-size:.75rem;color:var(--gris)}

.guest-row > div { display:flex; gap:1.2rem !important; align-items:flex-start !important; }
.guest-nombre, .guest-tipo { padding:1rem; }
.guest-row .campo { margin-bottom:.35rem; }
.guest-row .guest-nombre-display { padding:1rem 0; }
.guest-row .campo label { margin-bottom:.5rem; }
.guest-row { gap:1.2rem !important; }

/* Make name field expand and tipo select a fixed narrow column */
.guest-row > div > .campo:first-child { flex: 1 1 auto; }
.guest-row > div > .campo:last-child { flex: 0 0 180px; }
.guest-row .guest-nombre { width:100%; box-sizing:border-box; }
.guest-row .guest-tipo { width:100%; box-sizing:border-box; }

@media (max-width:640px){
  .guest-row > div > .campo:last-child { flex: 0 0 140px; }
}

/* If still forced inline styles present, add higher-specificity rule */
.guest-row div[style] > .campo:last-child { flex: 0 0 180px !important; }

@media (max-width:640px){
  .guest-row{flex-direction:column;align-items:stretch;gap:.6rem}
  .guest-tipo{min-width:100%;}
}
.campo--opciones{border:0}
.opciones{display:flex;gap:.7rem;flex-wrap:wrap}
.opcion input{position:absolute;opacity:0;width:0;height:0}
.opcion span{display:inline-block;padding:.7rem 1.5rem;border:1px solid var(--linea-inv);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:all .45s var(--curva);color:var(--blanco)}
.opcion input:checked + span{background:var(--oro);color:var(--negro);border-color:var(--oro)}
.opcion input:focus-visible + span{outline:2px solid var(--oro);outline-offset:3px}
.error{font-size:.75rem;color:#E0A79E;min-height:1em}
.form .link--enviar{justify-self:start;margin-top:.5rem}
.form__estado{font-size:.8rem;color:var(--oro-claro)}

/* Mensaje de confirmación RSVP — estilizado y centrado */
#rsvp .rsvp-confirmado{
  max-width:640px;margin-inline:auto;padding:2rem;border-radius:12px;
  background:linear-gradient(180deg, rgba(11,11,11,.08), rgba(11,11,11,.02));
  border:1px solid var(--oro-linea);box-shadow:0 8px 24px rgba(10,10,10,.18);
}
#rsvp .rsvp-confirmado .kicker{color:var(--oro);letter-spacing:.36em}
#rsvp .rsvp-confirmado .titulo{color:var(--oro-claro);font-size:clamp(1.4rem,1rem + 2vw,2.6rem);margin-top:.4rem}
#rsvp .rsvp-confirmado .parrafo{color:var(--gris-suave);margin-top:.8rem;font-size:1rem}
#rsvp .rsvp-confirmado .parrafo strong{color:var(--oro-claro)}

@media (max-width:640px){
  #rsvp .rsvp-confirmado{padding:1.2rem;border-radius:10px}
  #rsvp .rsvp-confirmado .titulo{font-size:1.4rem}
}

/* ---------- 15. CIERRE · FLOTANTES · VISOR ---------- */
.cierre{background:var(--negro);color:var(--blanco);text-align:center;padding:clamp(5.5rem,11vw,9rem) 1.25rem clamp(6rem,11vw,9rem);display:grid;gap:.9rem;justify-items:center}
.mono--pie{color:var(--oro);width:64px;margin-bottom:1rem}
.mono--pie .traza{animation:none;stroke-dashoffset:0}
.cierre__nombre{font-family:var(--display);font-weight:300;font-size:clamp(2.4rem,1.4rem + 5.5vw,4.8rem);line-height:1}
.cierre__nota{letter-spacing:.32em;text-transform:uppercase;font-size:.66rem;color:var(--oro)}

.flotantes{position:fixed;right:clamp(.9rem,2.5vw,1.6rem);bottom:clamp(.9rem,2.5vw,1.6rem);z-index:50;display:grid;gap:.6rem;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity 1s var(--curva),transform 1s var(--curva)}
body:has(.entrar:checked) .flotantes{opacity:1;transform:none;pointer-events:auto}
.fab{position:relative;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--oro-linea);border-radius:50%;cursor:pointer;background:var(--blanco);color:var(--negro);transition:color .45s var(--curva),background-color .45s var(--curva),transform .45s var(--curva)}
.fab:hover{background:var(--negro);color:var(--oro);transform:translateY(-2px)}
.fab svg{width:18px;height:18px}
.fab__ondas{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.fab__ondas i{position:absolute;inset:0;border:1px solid var(--oro);border-radius:50%;opacity:0}
#btn-musica[aria-pressed="true"] .fab__ondas i{animation:pulso 2.8s var(--curva) infinite}
#btn-musica[aria-pressed="true"] .fab__ondas i:nth-child(2){animation-delay:1.4s}
@keyframes pulso{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.85)}}

.aviso{position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,170%);z-index:130;padding:.75rem 1.4rem;background:var(--negro);color:var(--blanco);border:1px solid var(--oro-linea);font-size:.74rem;letter-spacing:.12em;transition:transform .7s var(--curva)}
.aviso.se-ve{transform:translate(-50%,0)}

.visor{position:fixed;inset:0;z-index:120;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;padding:clamp(1rem,4vw,3rem);background:rgba(6,6,6,.97);opacity:0;transition:opacity .5s var(--curva)}
.visor.se-ve{opacity:1}
.visor[hidden]{pointer-events:none;visibility:hidden}
.visor__marco{display:grid;place-items:center;height:100%;overflow:hidden}
.visor__marco img{max-width:100%;max-height:84svh;width:auto;filter:grayscale(1) contrast(1.03);animation:aparecer .6s var(--curva)}
@keyframes aparecer{from{opacity:0;transform:scale(.95)}}
.visor__cerrar,.visor__nav{background:transparent;border:1px solid var(--oro-linea);color:var(--oro);cursor:pointer;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;font-size:1.6rem;line-height:1;transition:background-color .4s var(--curva),color .4s var(--curva)}
.visor__cerrar:hover,.visor__nav:hover{background:var(--oro);color:var(--negro)}
.visor__cerrar{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);z-index:2}

/* ---------- 16. RESPONSIVE ---------- */
@media (max-width:900px){
  .collage--uno{grid-template-columns:repeat(2,1fr);gap:1rem}
  .collage__f--1,.collage__f--2,.collage__f--3,.collage__f--4{grid-column:auto;margin-top:0}
  .collage__texto{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--ancho:min(100% - 2rem,1120px)}
  .linea-nombre{font-size:clamp(3rem,14vw,4.5rem)}
  .familias{grid-template-columns:1fr;gap:1.8rem}
  .familia__linea{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--oro-linea),transparent)}
  .cuenta{gap:.7rem}
  .flip__dot{display:none}
  .tb__cols{grid-template-columns:1fr;gap:2rem}
  .tb__punto{display:none}
  .collage2{grid-template-columns:repeat(2,1fr)}
  .pase{grid-template-columns:1fr;max-width:320px}
  .pase__corte{width:100%;height:1px;background:repeating-linear-gradient(90deg,var(--oro-linea) 0 6px,transparent 6px 12px)}
  .flotantes{grid-auto-flow:column;right:50%;transform:translate(50%,14px)}
  body:has(.entrar:checked) .flotantes{transform:translate(50%,0)}
  .visor{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .visor__marco{grid-row:1}
  #visor-prev{justify-self:start}
  #visor-next{justify-self:end;margin-top:-46px}

  /* Evitar zoom de iOS al enfocar inputs: asegurar tamaño de fuente mínimo */
  input, textarea, select { font-size:16px }
}
@media (min-width:1600px){:root{--ancho:min(100% - 4rem,1240px)}}

/* ---------- ACCESIBILIDAD ---------- */
:focus-visible{outline:2px solid var(--oro);outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal,.reveal-now,.letra,.amp{opacity:1;transform:none;filter:none}
  .masc__i{background-size:100% 100%}
  .telon__hoja{display:none}
  .portal__foto img{transform:none;animation:none}
  .lluvia{display:none}
  .hero__foto img{transform:none}
  .hero__regla{width:min(60vw,220px)}
  .timeline.trazada::after{height:calc(100% - 1rem)}
  .hito__icono .dibujo{stroke-dashoffset:0}
}