/* ═══════════════════════════════════════════════════════════════════════════
   WEB DE LOS INVITADOS
   Producto independiente. Comparte con el panel la familia de color de la boda
   —es la misma boda— y nada más: ni una clase, ni un componente, ni un control.
   Aquí no hay tablas, ni botones de guardar, ni cifras. Solo lo que se cuenta.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --papel:#FCFAF6; --tinta:#33302B; --gris:#736C61; --gris2:#A79E90; --linea:#E8E1D5;
  --malva:#B98BA8; --salvia:#93AE93; --miel:#DDB26B; --cielo:#93B6C9;
  --malva-t:#7E4E6D; --salvia-t:#44603F;
  --serif:"Iowan Old Style",Charter,Georgia,"Times New Roman",serif;
  --sans:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  --aire:clamp(56px,9vw,124px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font:400 17px/1.75 var(--serif); -webkit-text-size-adjust:100%;
}
img{max-width:100%}
a{color:var(--malva-t); text-underline-offset:3px}

.et{font:400 10px/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--gris2)}
h1,h2,h3{margin:0; font-weight:400}

/* ── portada ───────────────────────────────────────────────────────────── */
.portada{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:60px 24px; position:relative; overflow:hidden;
}
.acuarela{position:absolute; inset:-10%; z-index:0; pointer-events:none; filter:blur(10px); opacity:.85}
/* el :not(svg) es obligatorio: sin él esta regla le quita el position:absolute
   a la mancha de acuarela, que entra en el flujo y dispara la altura de la portada */
.portada > *:not(svg){position:relative; z-index:1}
.nombres{
  font-size:clamp(58px,13vw,164px); line-height:.92; letter-spacing:-.03em; margin:22px 0 0;
}
.nombres .y{display:block; font-size:.38em; font-style:italic; color:var(--malva-t); margin:.12em 0; letter-spacing:0}
.portada .fecha{margin-top:30px; font-size:clamp(15px,2.2vw,20px); font-style:italic; color:var(--gris)}
.portada .lema{margin-top:16px; max-width:32ch; font-style:italic; color:var(--gris)}

/* ── el versículo: va en la portada, en la página y en lo que se comparte ── */
.versiculo{
  margin:26px auto 0; max-width:36ch; font-style:italic;
  font-size:clamp(17px,2.4vw,22px); line-height:1.55; color:var(--tinta);
}
.versiculo span{
  display:block; margin-top:10px; font-style:normal;
  font:400 10px/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--malva-t);
}
.texto-fe{
  margin:22px auto 0; max-width:52ch; font-size:clamp(15px,1.9vw,17.5px);
  line-height:1.75; color:var(--gris);
}
.portada .versiculo{margin-top:34px}
.portada-inicial{font-size:clamp(40px,9vw,96px)}
.bloque.fe{text-align:center}
.bloque.fe .versiculo{margin-top:0}
.bloque.fe .texto-fe{color:var(--tinta)}
.bajar{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;
  text-decoration:none; display:grid; gap:9px; justify-items:center;
}
.bajar i{display:block; width:1px; height:34px; background:var(--gris2)}

/* ── secciones ─────────────────────────────────────────────────────────── */
main{max-width:1000px; margin:0 auto; padding:0 24px}
section.bloque{padding:var(--aire) 0; border-top:1px solid var(--linea)}
section.bloque:first-child{border-top:0}
.bloque > .et{display:block; text-align:center}
.bloque h2{
  font-size:clamp(30px,5.4vw,50px); line-height:1.08; letter-spacing:-.02em;
  text-align:center; margin:14px 0 30px;
}
.texto{max-width:60ch; margin:0 auto; font-size:clamp(17px,2vw,19px)}
.texto p{margin:0 0 1em}
.centro{text-align:center}

/* tarjetas del día */
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:34px}
.tarjeta{
  border-radius:26px; padding:30px 26px; text-align:center;
  background:rgba(255,255,255,.62); border:1px solid var(--linea);
}
.tarjeta .et{display:block; margin-bottom:14px}
.tarjeta .grande{font-size:clamp(21px,3vw,27px); line-height:1.25; display:block}
.tarjeta small{display:block; margin-top:9px; font-size:14px; color:var(--gris); font-style:italic}
.tarjeta.acento{background:linear-gradient(165deg,rgba(185,139,168,.20),rgba(255,255,255,.66))}

/* línea de tiempo */
.tiempo{max-width:640px; margin:0 auto; position:relative}
.tiempo:before{content:""; position:absolute; left:82px; top:8px; bottom:8px; width:1px; background:var(--linea)}
.momento{display:grid; grid-template-columns:82px 1fr; gap:26px; padding:16px 0; position:relative}
.momento .h{font:400 14px/1.6 var(--sans); letter-spacing:.06em; color:var(--malva-t); text-align:right}
.momento:after{
  content:""; position:absolute; left:79px; top:25px; width:7px; height:7px; border-radius:50%;
  background:var(--salvia);
}
.momento b{font-weight:400; font-size:19px}
.momento i{display:block; font-style:italic; color:var(--gris); font-size:15.5px; margin-top:3px}

/* lista de partes de la ceremonia */
.partes{max-width:620px; margin:0 auto; list-style:none; padding:0; counter-reset:p}
.partes li{padding:16px 0 16px 46px; border-bottom:1px solid var(--linea); position:relative}
.partes li:before{
  counter-increment:p; content:counter(p, decimal-leading-zero);
  position:absolute; left:0; top:20px; font:400 11px var(--sans); letter-spacing:.14em; color:var(--gris2);
}
.partes i{display:block; font-style:italic; color:var(--gris); font-size:15.5px}

/* fichas sueltas (alojamiento, práctica, contacto) */
.fichas{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-top:10px}
.ficha{border-top:1px solid var(--linea); padding-top:18px}
.ficha b{display:block; font-weight:400; font-size:20px; margin-bottom:6px}
.ficha p{margin:0; color:var(--gris); font-size:16px}

/* ── confirmación ──────────────────────────────────────────────────────── */
.rsvp{
  border-radius:32px; padding:clamp(34px,6vw,62px) clamp(24px,5vw,54px); text-align:center;
  background:linear-gradient(168deg,rgba(147,174,147,.22),rgba(185,139,168,.16),rgba(255,255,255,.6));
  border:1px solid var(--linea); margin:var(--aire) 0;
}
.rsvp h2{margin-top:10px}
.rsvp .texto{margin-bottom:26px}
.buscador{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px}
.buscador input{
  flex:1 1 340px; max-width:440px; border:1px solid var(--linea); border-radius:100px;
  padding:14px 20px; background:rgba(255,255,255,.8); font:400 16px var(--serif); color:var(--tinta);
}
.buscador input:focus{outline:0; border-color:var(--malva)}
.boton{
  font:400 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  padding:15px 28px; border-radius:100px; border:1px solid var(--tinta); background:var(--tinta); color:var(--papel);
}
.boton.suave{background:rgba(255,255,255,.72); color:var(--tinta); border-color:var(--linea)}
.boton.suave:hover{border-color:var(--gris2)}
.boton:disabled{opacity:.5; cursor:default}
.saludo{font-size:clamp(24px,4vw,34px); margin:6px 0 4px}
.quienes{color:var(--gris); font-style:italic}
.respuestas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:26px 0 6px}
.respuestas .boton.si[aria-pressed="true"]{background:var(--salvia); border-color:var(--salvia); color:#fff}
.respuestas .boton.no[aria-pressed="true"]{background:var(--malva); border-color:var(--malva); color:#fff}
.mensaje{
  width:100%; max-width:520px; margin:18px auto 0; display:block; border:1px solid var(--linea); border-radius:20px;
  background:rgba(255,255,255,.8); padding:14px 18px; font:400 16px/1.6 var(--serif); color:var(--tinta); resize:vertical;
}
.mensaje:focus{outline:0; border-color:var(--malva)}
.gracias{margin-top:20px; font-style:italic; color:var(--salvia-t); min-height:26px}
.gracias.mal{color:#A4514C}

/* ── pie y estados ─────────────────────────────────────────────────────── */
footer{text-align:center; padding:var(--aire) 24px 70px; border-top:1px solid var(--linea); margin-top:var(--aire)}
footer .firma{font-size:clamp(22px,3.4vw,30px); font-style:italic}
.cerrada{min-height:100svh; display:grid; place-content:center; text-align:center; padding:40px 24px; gap:14px;
  position:relative; overflow:hidden}
.cerrada > *:not(svg){position:relative; z-index:1}
.cargando{text-align:center; padding:120px 24px; color:var(--gris2); font-style:italic}
.oculto{display:none !important}

/* aparición al bajar: el contenido es visible si el JS no llega a arrancar */
html.js .rv{opacity:0; transform:translateY(16px)}
html.js .rv.dentro{opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1; transform:none}
}
@media(max-width:620px){
  .tiempo:before{left:62px}
  .momento{grid-template-columns:62px 1fr; gap:16px}
  .momento:after{left:59px}
}