/* ======================================================================
   Sitio del invitado — splash interactivo + flujo de confirmación
   ====================================================================== */

/* ---------------------------------------------------------------------
   SPLASH
--------------------------------------------------------------------- */
.splash{
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  background: var(--bg-gradient);
  cursor: pointer;
  transition: opacity .9s var(--ease-soft), filter .9s var(--ease-soft);
}
.splash.opening{
  animation: splashOpen 1.1s var(--ease-soft) forwards;
}
@keyframes splashOpen{
  0%{ opacity: 1; filter: blur(0); transform: scale(1); }
  60%{ opacity: 1; filter: blur(2px); transform: scale(1.06); }
  100%{ opacity: 0; filter: blur(10px); transform: scale(1.22); }
}
.splash.done{ display: none; }

.splash-frame{
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,248,240,.35);
  border-radius: 34px;
  pointer-events: none;
}
.splash-frame::before,.splash-frame::after{
  content: '';
  position: absolute;
  width: 34px; height: 34px;
  border: 1px solid var(--gold);
  opacity: .8;
}
.splash-frame::before{ top: -1px; left: -1px; border-right: none; border-bottom: none; }
.splash-frame::after{ bottom: -1px; right: -1px; border-left: none; border-top: none; }

.flower-stage{
  position: relative;
  width: min(62vw, 340px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flower-glow{
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,212,59,.35) 0%, rgba(255,212,59,0) 70%);
  opacity: 0;
  transition: opacity .8s var(--ease-soft);
  pointer-events: none;
}
.flower-stage.bloomed .flower-glow{ opacity: 1; animation: breathe 4.5s ease-in-out infinite; }

.flower-img{
  position: absolute;
  width: 100%;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
  transition: opacity .7s var(--ease-bloom), transform 1.1s var(--ease-bloom), filter .7s;
}
.flower-img.bud{
  width: 30%;
  opacity: 1;
  transform: scale(1) rotate(0deg);
  animation: sway 5s ease-in-out infinite;
  transform-origin: 50% 85%;
}
.flower-img.bloom{
  opacity: 0;
  transform: scale(.25) rotate(-35deg);
  pointer-events: none;
}
.flower-stage.bloomed .flower-img.bud{ opacity: 0; transform: scale(.5) rotate(10deg); }
.flower-stage.bloomed .flower-img.bloom{
  opacity: 1;
  transform: scale(1) rotate(0deg);
  pointer-events: auto;
  animation: breathe 6s ease-in-out infinite;
}
.flower-stage.ready-tap .flower-img.bloom{ cursor: pointer; }

.bloom-burst{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.spark{
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--golden-yellow);
  box-shadow: 0 0 10px 2px rgba(255,212,59,.8);
  opacity: 0;
}
.spark.fire{
  animation: sparkFly .95s var(--ease-soft) forwards;
}
@keyframes sparkFly{
  0%{ opacity: 1; transform: translate(-50%,-50%) scale(1) translate(0,0); }
  100%{ opacity: 0; transform: translate(-50%,-50%) scale(.3) translate(var(--dx), var(--dy)); }
}

.splash-hint{
  font-family: var(--font-body);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--ivory);
  opacity: .8;
  text-align: center;
  animation: pulseHint 2.4s ease-in-out infinite;
}
@keyframes pulseHint{
  0%,100%{ opacity: .55; letter-spacing: .3em; }
  50%{ opacity: .95; letter-spacing: .36em; }
}
.splash-monogram{
  position: absolute;
  top: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(72vw, 280px);
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
}

/* ---------------------------------------------------------------------
   MAIN SITE
   (La bienvenida ahora vive dentro de .hero, en la misma pantalla que
   el buscador de mesa — ver más abajo. Ya no hay una pantalla "welcome"
   ni un botón "Continuar" por separado.)
--------------------------------------------------------------------- */
main{ position: relative; z-index: 1; }

.hero{
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.4rem 1.2rem 1.6rem;
}
.hero .arch-card{ max-width: 460px; width: 100%; }
.hero-sub{ margin-top: 1.6rem; color: rgba(255,248,240,.85); max-width: 420px; }

section{ padding: 5rem 1.2rem; position: relative; }
section#mesa{ padding-top: 1.6rem; }
.section-inner{ max-width: 640px; margin: 0 auto; text-align: center; }

.event-details{
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  margin-top: 2.4rem;
  text-align: left;
}
.detail-card{
  background: rgba(255,248,240,.07);
  border: 1px solid rgba(255,248,240,.22);
  border-radius: 22px;
  padding: 1.6rem 1.4rem;
  backdrop-filter: blur(6px);
}
.detail-card .eyebrow{ display:block; margin-bottom:.5em; }
.detail-card h3{ font-size: 1.15rem; margin-bottom:.3em; }
.detail-card p{ margin:0; color: rgba(255,248,240,.85); font-size: .98rem; }

/* RSVP form */
.rsvp-card{
  background: rgba(255,248,240,.08);
  border: 1px solid rgba(255,248,240,.28);
  border-radius: 32px;
  padding: 2.6rem 2rem;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
}
.field{
  text-align: left;
  margin-bottom: 1.2rem;
}
.field label{
  display: block;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--butter-yellow);
  margin-bottom: .5em;
}
.field input, .field select, .field textarea{
  width: 100%;
  padding: .85em 1em;
  border-radius: 14px;
  border: 1px solid rgba(255,248,240,.35);
  background: rgba(255,248,240,.08);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 1.05rem;
  outline: none;
  transition: border-color .3s, background .3s;
}
.field input::placeholder{ color: rgba(255,248,240,.5); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--golden-yellow);
  background: rgba(255,248,240,.14);
}
.field-hint{
  display: flex;
  align-items: center;
  gap: .5em;
  margin-top: .6em;
  padding: .5em .8em;
  border-radius: 10px;
  background: rgba(255,212,59,.12);
  border: 1px solid rgba(255,212,59,.3);
  color: var(--butter-yellow);
  font-size: .82rem;
  line-height: 1.35;
}
.field-hint .icon{ flex: none; font-size: 1rem; }
.rsvp-actions{ display:flex; justify-content:center; margin-top: 1.6rem; }

/* Desambiguación de nombres repetidos (ej. dos "Jorge Vega" en mesas
   distintas) — se muestra en vez de la confirmación cuando la búsqueda
   encuentra más de una persona con el mismo nombre. */
.disambig-title{
  margin: 0 0 1.2rem;
  color: rgba(255,248,240,.9);
  font-size: 1rem;
}
.disambig-list{
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.disambig-option{
  display: block;
  width: 100%;
  text-align: left;
  padding: 1em 1.2em;
  border-radius: 16px;
  border: 1px solid rgba(255,248,240,.3);
  background: rgba(255,248,240,.06);
  color: var(--ivory);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .25s;
}
.disambig-option:hover{
  border-color: var(--golden-yellow);
  background: rgba(255,248,240,.14);
  transform: translateY(-1px);
}
.disambig-option .dname{
  display:block;
  font-family: var(--font-headline);
  font-size: 1.15rem;
  letter-spacing: .02em;
}
.disambig-option .dmeta{
  display:block;
  margin-top: .3em;
  font-size: .88rem;
  color: rgba(255,248,240,.7);
}

.confirmation{
  text-align: center;
  animation: fadeUp .8s var(--ease-soft) both;
}
.confirmation .badge-check{
  width: 64px; height: 64px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle, var(--golden-yellow), var(--tropical-orange));
  box-shadow: 0 10px 30px rgba(255,140,66,.5);
  font-size: 1.6rem;
}
.confirmation .table-num{
  font-family: var(--font-headline);
  font-size: 2.6rem;
  color: var(--gold);
}

footer{
  text-align: center;
  padding: 3rem 1.2rem 4rem;
  color: rgba(255,248,240,.55);
  font-size: .82rem;
}
.admin-link{
  display: inline-block;
  margin-top: 1.4rem;
  padding: .7em 1.8em;
  border-radius: 999px;
  border: 1.5px solid rgba(255,248,240,.55);
  color: var(--ivory);
  opacity: 1;
  font-family: var(--font-headline);
  font-size: 1.05rem;
  letter-spacing: .1em;
  text-decoration: none;
  transition: background .3s, transform .3s;
}
.admin-link:hover{ background: rgba(255,248,240,.14); transform: translateY(-1px); }

/* ---------------------------------------------------------------------
   Orientación / plano real del salón (resultado del buscador de mesa)
   El plano en sí (imagen + marcadores) vive en css/photoplan.css, para
   ser el mismo en el sitio del invitado y en el panel privado.
--------------------------------------------------------------------- */
.wayfinding-box{
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,248,240,.25);
}
.wayfinding-text{
  font-size: 1.05rem;
  color: var(--ivory);
  margin-bottom: 1rem;
}
.wayfinding-text strong{ color: var(--gold); }

@media (max-width: 640px){
  section{ padding: 4rem 1rem; }
}