/* ===========================================================================
   RSVP público — la pantalla donde el invitado confirma.
   Usa los mismos colores y tipografías del panel (assets/estilo.css).
   Una pregunta por pantalla, cómodo con el pulgar.
   =========================================================================== */

.rsvp-body{
  background:
    radial-gradient(120% 90% at 50% 0%, #fdf7ea 0%, #f7edd9 42%, #f1e4cb 100%);
  min-height:100vh;
}
.rsvp-marco{min-height:100vh;display:flex;flex-direction:column}
.rsvp-caja{
  flex:1;width:100%;max-width:600px;margin:0 auto;
  padding:26px 18px calc(40px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:center;
}

/* ------------------------------------------------------------- Cabecera */
.rsvp-cab{text-align:center;margin-bottom:20px}
.rsvp-cab h1{
  font-size:clamp(2rem,8vw,2.9rem);font-style:italic;margin:8px 0 6px;
  background:var(--oro-degradado);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.08em;
}
.rsvp-titulo{
  font-family:'Playfair Display',Georgia,serif;font-size:1.05rem;color:var(--tinta-suave);
}

/* -------------------------------------------------------------- Tarjeta */
.rsvp-tarjeta{
  position:relative;overflow:hidden;background:#fff;border-radius:24px;
  border:1px solid var(--linea-suave);box-shadow:0 20px 50px rgba(58,46,31,.10);
  padding:26px 22px 24px;
}
.rsvp-barra{
  position:absolute;top:0;left:0;right:0;height:4px;background:var(--arena);
}
.rsvp-barra span{
  display:block;height:100%;width:0;background:var(--oro-degradado);
  transition:width .35s cubic-bezier(.2,.7,.3,1);
}
.rsvp-paso{animation:rsvpEntra .3s ease}
@keyframes rsvpEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.rsvp-pregunta{
  font-family:'Playfair Display',Georgia,serif;font-size:1.45rem;font-weight:600;
  text-align:center;color:var(--tinta-fuerte);line-height:1.25;margin-bottom:6px;
}
.rsvp-ayuda{text-align:center;color:var(--tinta-suave);font-size:.92rem;margin:0 auto 18px;max-width:420px}
.rsvp-intro{color:var(--tinta-suave);text-align:center;margin-bottom:18px}
.rsvp-obligatoria{color:var(--no);font-weight:700}

/* --------------------------------------------------------- Opciones */
.rsvp-opciones{display:grid;gap:10px;margin-bottom:6px}
@media(min-width:520px){ .rsvp-opciones.dos{grid-template-columns:1fr 1fr} }

.rsvp-op{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  min-height:60px;padding:14px 18px;border-radius:16px;
  border:1.5px solid var(--linea);background:var(--marfil);
  font-size:1rem;font-weight:600;color:var(--tinta);transition:.16s ease;
}
.rsvp-op:hover{border-color:var(--oro);background:#fff}
.rsvp-op .marca{
  width:24px;height:24px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--warm-300,#c3b59a);display:flex;align-items:center;justify-content:center;
  color:transparent;background:#fff;transition:.16s ease;
}
.rsvp-op.on{
  border-color:var(--oro-hondo);background:var(--oro-lavado);color:var(--oro-texto);
  box-shadow:0 8px 20px rgba(187,131,44,.16);
}
.rsvp-op.on .marca{background:var(--oro-degradado);border-color:transparent;color:#fff}

/* --------------------------------------------------------- Personas */
.rsvp-personas{display:grid;gap:10px;margin-bottom:8px}
.rsvp-persona{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  min-height:64px;padding:12px 16px;border-radius:16px;
  border:1.5px solid var(--linea);background:var(--marfil);transition:.16s ease;
}
.rsvp-persona .ini{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;background:#fff;
  border:1px solid var(--linea);color:var(--oro-texto);
  font-family:'Playfair Display',serif;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
}
.rsvp-persona .nom{flex:1;min-width:0;font-weight:700;color:var(--tinta-fuerte);overflow-wrap:anywhere}
.rsvp-persona .est{font-size:.8rem;color:var(--tinta-tenue);font-weight:600}
.rsvp-persona.on{border-color:var(--si-linea);background:var(--si-fondo)}
.rsvp-persona.on .ini{background:#fff;border-color:var(--si-linea);color:var(--si)}
.rsvp-persona.on .est{color:var(--si)}
.rsvp-persona .marca{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;border:1.5px solid #c3b59a;
  display:flex;align-items:center;justify-content:center;color:transparent;background:#fff;
}
.rsvp-persona.on .marca{background:var(--si);border-color:var(--si);color:#fff}

.rsvp-etapa{
  text-align:center;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--oro-texto);margin-bottom:6px;
}
.rsvp-familia{
  text-align:center;font-size:.82rem;color:var(--tinta-tenue);
  border-bottom:1px solid var(--linea);padding-bottom:12px;margin-bottom:16px;
}
.rsvp-familia strong{color:var(--oro-texto)}
.rsvp-respondiendo{
  text-align:center;font-size:.85rem;color:var(--si);background:var(--si-fondo);
  border-radius:12px;padding:8px 12px;margin-bottom:14px;font-weight:600;
}
.rsvp-tope{
  text-align:center;font-size:.84rem;color:var(--oro-texto);background:var(--oro-lavado);
  border-radius:12px;padding:9px 12px;margin-top:10px;font-weight:600;
}
.rsvp-cuantos{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.rsvp-num{
  min-width:56px;min-height:56px;padding:0 14px;border-radius:16px;border:1.5px solid var(--linea);
  background:var(--marfil);font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--tinta);
}
.rsvp-num.on{background:var(--oro-lavado);border-color:var(--oro-hondo);color:var(--oro-texto)}

/* --------------------------------------------------------- Buscador */
.rsvp-resultados{display:grid;gap:8px;margin-top:12px}
.rsvp-resultado{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  min-height:56px;padding:12px 16px;border-radius:14px;border:1px solid var(--linea);
  background:var(--marfil);font-weight:700;color:var(--tinta);text-align:left;
}
.rsvp-resultado:hover{border-color:var(--oro);background:#fff;color:var(--oro-texto)}
.rsvp-nada{text-align:center;color:var(--tinta-suave);font-size:.9rem;padding:14px 0}

/* --------------------------------------------------------- Navegación */
.rsvp-nav{display:flex;gap:10px;align-items:center;margin-top:20px}
.rsvp-nav .crece{flex:1}
.rsvp-nav .btn{min-height:52px}
.rsvp-saltar{
  background:none;border:0;color:var(--tinta-tenue);font-size:.86rem;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;padding:8px;
}
.rsvp-saltar:hover{color:var(--oro-texto)}
.rsvp-cuenta{text-align:center;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-tenue);font-weight:700;margin-bottom:14px}

/* --------------------------------------------------------- Gracias */
.rsvp-gracias{text-align:center;padding:8px 0 4px}
.rsvp-gracias .sello{
  width:74px;height:74px;border-radius:50%;margin:0 auto 16px;
  background:var(--oro-lavado);color:var(--oro-hondo);
  display:flex;align-items:center;justify-content:center;
}
.rsvp-gracias h2{font-size:2rem;font-style:italic;margin-bottom:8px}
.rsvp-gracias p{color:var(--tinta-suave)}
.rsvp-resumen{
  background:var(--marfil);border:1px solid var(--linea);border-radius:16px;
  padding:14px 16px;margin:18px 0 6px;text-align:left;
}
.rsvp-resumen li{list-style:none;display:flex;gap:10px;align-items:center;padding:5px 0;font-size:.92rem}
.rsvp-resumen ul{margin:0;padding:0}
.rsvp-resumen .si{color:var(--si)} .rsvp-resumen .no{color:var(--tinta-tenue)}

.rsvp-pie{text-align:center;margin-top:22px;font-size:.82rem;color:var(--tinta-tenue)}
.rsvp-pie a{color:var(--oro-texto);font-weight:700;text-decoration:none}

.rsvp-yarespondio{
  background:var(--oro-lavado);border:1px solid #ecd9a8;color:var(--oro-texto);
  border-radius:14px;padding:10px 14px;font-size:.86rem;font-weight:600;
  text-align:center;margin-bottom:16px;
}

/* =============================== «Que me recuerden por correo»
   Después de confirmar se le ofrece dejar el correo para que le lleguen
   los avisos de los días previos. Es opcional y se puede quitar. */
.rsvp-recuerdo{
  margin:18px 0 0;padding:16px 18px;text-align:left;
  background:var(--marfil);border:1px solid var(--linea);border-radius:16px;
}
.rec-invita{margin:0;font-weight:700;font-size:.98rem}
.rec-ayuda{margin:6px 0 14px;font-size:.86rem;color:var(--tinta-suave);line-height:1.5}
.rec-listo{margin:0;display:flex;gap:9px;align-items:center;font-size:.92rem}
.rec-chulo{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:24px;height:24px;border-radius:50%;background:var(--si);color:#fff;
}
.rec-cambiar{
  margin-top:10px;background:none;border:0;padding:0;
  color:var(--oro-texto);font-weight:700;font-size:.85rem;
  text-decoration:underline;cursor:pointer;
}

/* --------------------------------------------- El cuadro que pide el correo */
.capa{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(32,28,24,.55);padding:18px;
  animation:capaEntra .18s ease;
}
@keyframes capaEntra{from{opacity:0}to{opacity:1}}
.capa-caja{
  position:relative;width:100%;max-width:410px;background:#fff;
  border-radius:20px;padding:26px 24px 22px;box-shadow:0 24px 60px rgba(0,0,0,.28);
  animation:capaSube .22s ease;
}
@keyframes capaSube{from{transform:translateY(14px)}to{transform:none}}
.capa-x{
  position:absolute;top:10px;right:12px;background:none;border:0;cursor:pointer;
  font-size:1.7rem;line-height:1;color:var(--tinta-tenue);padding:4px 8px;
}
.capa-caja h3{margin:0 24px 10px 0;font-size:1.25rem;font-style:italic}
.capa-ayuda{margin:0 0 16px;font-size:.87rem;color:var(--tinta-suave);line-height:1.55}
.capa-et{display:block;font-size:.78rem;font-weight:700;color:var(--tinta-suave);margin-bottom:6px}
.capa-mal{margin:8px 0 0;font-size:.84rem;color:var(--no);font-weight:600}
.capa-pie{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.capa-pie .btn{flex:1 1 auto;justify-content:center}