/* ===== Invitación DeliriumX — mobile-first ===== */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--fondo); color:var(--tinta);
  font-family:var(--font-cuerpo); font-weight:300;
  line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.cerrada { overflow:hidden; height:100svh; }
img { max-width:100%; display:block; }
a { color:var(--acento-fuerte, #8A6640); }

.seccion { max-width:44rem; margin:0 auto; padding:4.5rem 1.4rem; text-align:center; }
.titulo-seccion {
  font-family:var(--font-titulos); font-weight:600;
  font-size:clamp(1.9rem, 7vw, 2.6rem); letter-spacing:.02em;
  margin-bottom:2rem; color:var(--tinta);
}
.titulo-seccion::before {
  content:""; display:block; width:8px; height:8px; margin:0 auto 1.1rem;
  background:var(--acento); transform:rotate(45deg);
}
.titulo-seccion::after {
  content:""; display:block; width:56px; height:1px;
  background:var(--acento); margin:.9rem auto 0;
}
.btn {
  display:inline-block; padding:.85rem 1.7rem; border-radius:999px;
  background:var(--acento-fuerte, #8A6640); color:#fff; text-decoration:none;
  font-weight:500; letter-spacing:.05em; font-size:.95rem;
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.btn:active { transform:scale(.97); }

/* ===== Sobre ===== */
#sobre {
  position:fixed; inset:0; z-index:60;
  background:radial-gradient(120% 120% at 50% 0%, #57493a 0%, #2c241c 70%);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
}
.sobre-carta {
  position:relative; width:min(88vw, 400px); aspect-ratio:1.42;
  background:linear-gradient(160deg, #fffdf8, #f3ead9);
  border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.5);
  overflow:hidden;
}
.sobre-solapa {
  position:absolute; inset:0 0 auto 0; height:52%;
  background:linear-gradient(180deg, var(--acento-suave), #dcc7a6);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center; z-index:3;
}
.sobre-cuerpo {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; padding:1.4rem 1.2rem 1.6rem;
  text-align:center;
}
.sobre-para { font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:var(--secundario-fuerte, #5C6650); font-weight:500; }
.sobre-nombres { font-family:var(--font-manuscrita); font-size:2.4rem; color:var(--acento); line-height:1.15; margin-top:.2rem; }
.sobre-fecha { font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; margin-top:.3rem; }
#sello {
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:92px; height:92px; border-radius:50%; border:0; cursor:pointer; z-index:4;
  background:radial-gradient(circle at 35% 30%, #c69a68, var(--acento) 60%, #8a6640);
  color:#fff8ee; box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,248,238,.35), inset 0 0 0 7px rgba(0,0,0,.08);
  animation:selloPulso 2.4s ease-in-out infinite;
}
.sello-iniciales { font-family:var(--font-manuscrita); font-size:1.7rem; }
.sobre-cta { font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta); animation:selloPulso 2.4s ease-in-out infinite; }
@keyframes selloPulso { 0%,100%{ transform:translate(-50%,-50%) scale(1);} 50%{ transform:translate(-50%,-50%) scale(1.05);} }
#sello { animation-name:selloPulso; }
.sobre-cta { animation-name:ctaPulso; }
@keyframes ctaPulso { 0%,100%{opacity:.75;} 50%{opacity:1;} }

/* ===== Hero ===== */
.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media { position:absolute; inset:0; }
.hero-img { width:100%; height:112%; object-fit:cover; will-change:transform; filter:saturate(1.03); }
.hero-velo {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(251,247,241,.12) 0%, rgba(251,247,241,.38) 38%, rgba(251,247,241,.88) 66%, var(--fondo) 86%);
}
.hero::after {
  content:""; position:absolute; inset:14px; border:1px solid rgba(251,247,241,.55);
  outline:1px solid rgba(67,57,46,.18); outline-offset:5px; pointer-events:none; z-index:2;
}
.hero-contenido { position:relative; z-index:3; width:100%; text-align:center; padding:0 1.4rem 4.2rem; }
.hero-pre { font-family:var(--font-manuscrita); font-size:clamp(2.4rem, 10vw, 3.4rem); color:var(--acento-fuerte, #8A6640); line-height:1; text-shadow:0 1px 12px rgba(251,247,241,.9); }
.hero-nombres { font-family:var(--font-titulos); font-weight:600; line-height:1.08; margin:.6rem 0 .4rem; text-shadow:0 1px 14px rgba(251,247,241,.85); }
.hero-nombres .nombre { display:block; font-size:clamp(2rem, 9.5vw, 3.4rem); letter-spacing:.01em; }
.hero-nombres .letra { display:inline-block; will-change:transform,opacity; }
.hero-amp { display:block; font-family:var(--font-manuscrita); font-size:2rem; color:var(--acento-fuerte, #8A6640); line-height:1.1; text-shadow:0 1px 12px rgba(251,247,241,.9); }
.hero-fecha { letter-spacing:.3em; text-transform:uppercase; font-size:.85rem; margin-top:.9rem; font-weight:500; text-shadow:0 1px 10px rgba(251,247,241,.9); }
.hero-scroll { display:block; width:26px; height:44px; margin:2rem auto 0; border:1.5px solid var(--tinta); border-radius:999px; opacity:.65; }
.hero-scroll span { display:block; width:5px; height:9px; border-radius:99px; background:var(--tinta); margin:8px auto 0; animation:scrollBaja 1.8s ease-in-out infinite; }
@keyframes scrollBaja { 0%{ transform:translateY(0); opacity:1;} 70%{ transform:translateY(14px); opacity:0;} 100%{ opacity:0;} }

/* ===== Bienvenida y cuenta ===== */
.frase { font-family:var(--font-titulos); font-size:clamp(1.3rem, 5.4vw, 1.7rem); line-height:1.55; font-style:italic; }
.padres { margin-top:2.5rem; font-size:.95rem; }
.padres > p:first-child { letter-spacing:.22em; text-transform:uppercase; font-size:.78rem; color:var(--secundario-fuerte, #5C6650); font-weight:500; margin-bottom:.6rem; }
.padres-nombres { font-family:var(--font-titulos); font-size:1.12rem; }
.cuenta-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:.6rem; }
.cuenta-caja {
  border:1px solid var(--acento-suave); border-radius:16px; padding:1rem .2rem .8rem;
  background:rgba(255,255,255,.65); box-shadow:0 10px 24px rgba(67,57,46,.08);
}
.cuenta-caja span { display:block; font-family:var(--font-titulos); font-weight:600; font-size:clamp(1.7rem, 8vw, 2.5rem); line-height:1; color:var(--acento); font-variant-numeric:tabular-nums; }
.cuenta-caja small { letter-spacing:.18em; text-transform:uppercase; font-size:.65rem; font-weight:500; color:var(--secundario-fuerte, #5C6650); }
.cuenta-llego { font-family:var(--font-manuscrita); font-size:2.4rem; color:var(--acento); }

/* ===== Historia ===== */
.historia-item { margin-bottom:3rem; text-align:left; }
.historia-foto img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:20px; box-shadow:0 18px 40px rgba(67,57,46,.16); }
.historia-texto { padding:1.4rem .4rem 0; }
.historia-texto h3 { font-family:var(--font-titulos); font-weight:600; font-size:1.55rem; margin-bottom:.5rem; }
.historia-texto p { line-height:1.75; }
@media (min-width:640px) {
  .historia-item { display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; align-items:center; }
  .historia-item:nth-child(odd) .historia-foto { order:2; }
  .historia-texto { padding:0; }
}

/* ===== Lugares ===== */
.lugar-grid { display:grid; gap:1.1rem; margin-bottom:1.4rem; }
@media (min-width:700px) { .lugar-grid { grid-template-columns:1fr 1fr; } }
.lugar-card {
  background:rgba(255,255,255,.65); border:1px solid var(--acento-suave);
  border-radius:22px; padding:1.8rem 1.4rem; text-align:center;
}
.lugar-tipo { letter-spacing:.26em; text-transform:uppercase; font-size:.72rem; font-weight:500; color:var(--secundario-fuerte, #5C6650); }
.lugar-card h3 { font-family:var(--font-titulos); font-weight:600; font-size:1.45rem; line-height:1.25; margin:.55rem 0 .2rem; }
.lugar-hora { font-family:var(--font-manuscrita); font-size:1.9rem; color:var(--acento); line-height:1.2; }
.lugar-dir { margin-top:.4rem; }
.lugar-nota { font-size:.9rem; opacity:.88; margin-top:.6rem; line-height:1.6; }
.lugar-botones { display:flex; gap:.6rem; justify-content:center; margin-top:1.2rem; flex-wrap:wrap; }
.btn-ruta { padding:.65rem 1.2rem; font-size:.88rem; }
.btn-waze { background:var(--secundario-fuerte, #5C6650); }
#mapa { height:340px; border-radius:22px; overflow:hidden; border:1px solid var(--acento-suave); z-index:0; }

/* ===== Itinerario ===== */
.it-wrap { position:relative; max-width:30rem; margin:0 auto; text-align:left; }
.it-linea { position:absolute; left:calc(5.4rem + 5px); top:6px; bottom:6px; width:2px; background:var(--acento-suave); border-radius:2px; overflow:hidden; }
.it-progreso { width:100%; height:100%; background:var(--acento); transform-origin:top; transform:scaleY(0); }
.it-lista { list-style:none; }
.it-item { display:grid; grid-template-columns:5.4rem 12px 1fr; gap:.7rem; align-items:start; padding:.85rem 0; }
.it-hora { font-family:var(--font-titulos); font-weight:600; font-size:1.02rem; text-align:right; padding-top:.1rem; font-variant-numeric:tabular-nums; }
.it-punto { width:12px; height:12px; border-radius:50%; background:var(--fondo); border:2.5px solid var(--acento); margin-top:.35rem; position:relative; z-index:1; }
.it-info h4 { font-family:var(--font-titulos); font-weight:600; font-size:1.18rem; line-height:1.3; }
.it-info p { font-size:.92rem; opacity:.88; }

/* ===== Galería ===== */
.gal-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.gal-item { border:0; padding:0; background:none; cursor:pointer; border-radius:16px; overflow:hidden; }
.gal-item img { width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .5s ease; }
.gal-item:active img { transform:scale(1.04); }
.gal-item:nth-child(3n) { grid-column:span 2; }
.gal-item:nth-child(3n) img { aspect-ratio:16/10; }
@media (hover:hover) { .gal-item:hover img { transform:scale(1.045); } }

/* ===== Detalles ===== */
.detalle-card {
  background:rgba(255,255,255,.65); border:1px solid var(--acento-suave);
  border-radius:22px; padding:2.2rem 1.5rem; margin-bottom:1.4rem;
}
.vestimenta-codigo { font-family:var(--font-manuscrita); font-size:2.6rem; color:var(--acento); line-height:1.1; margin-bottom:.6rem; }
.detalle-nota { font-size:.92rem; opacity:.88; margin-top:.9rem; }
.mesas { display:grid; gap:.8rem; margin:1.4rem 0; }
@media (min-width:640px) { .mesas { grid-template-columns:1fr 1fr; } }
.mesa-card {
  display:flex; flex-direction:column; gap:.2rem; text-align:left;
  border:1px solid var(--acento-suave); border-radius:16px; padding:1.1rem 1.2rem;
  text-decoration:none; color:var(--tinta); background:var(--fondo);
}
.mesa-tienda { font-family:var(--font-titulos); font-weight:600; font-size:1.3rem; }
.mesa-detalle { font-size:.88rem; opacity:.85; }
.mesa-cta { color:var(--acento-fuerte, #8A6640); font-weight:500; font-size:.9rem; margin-top:.3rem; }
.transferencia { text-align:left; border-top:1px dashed var(--acento-suave); padding-top:1.4rem; }
.transferencia h3 { font-family:var(--font-titulos); font-weight:600; font-size:1.3rem; margin-bottom:.8rem; text-align:center; }
.transferencia p { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.3rem 0; }
.transferencia p span { min-width:4.6rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.mono { font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.btn-copiar {
  margin-left:auto; border:1px solid var(--acento-fuerte, #8A6640); color:var(--acento-fuerte, #8A6640); background:transparent;
  border-radius:999px; padding:.25rem .8rem; font:inherit; font-size:.8rem; font-weight:500; cursor:pointer;
}
.btn-copiar.copiado { background:var(--acento-fuerte, #8A6640); color:#fff; }

/* ===== RSVP ===== */
#rsvp-form {
  text-align:left; display:flex; flex-direction:column; gap:1.05rem; max-width:30rem; margin:0 auto;
  background:rgba(255,255,255,.68); border:1px solid var(--acento-suave); border-radius:22px;
  padding:1.7rem 1.35rem; box-shadow:0 16px 36px rgba(67,57,46,.09);
}
.rsvp-intro { max-width:30rem; margin:-.8rem auto 1.8rem; }
.campo { display:flex; flex-direction:column; gap:.45rem; border:0; }
.campo > span, .campo legend { font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; }
.campo input[type="text"], .campo input[type="tel"], .campo select, .campo textarea {
  padding:.9rem 1rem; border:1px solid #d8c9b4; border-radius:12px; background:#fff;
  font:inherit; font-weight:300; color:var(--tinta); width:100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline:2px solid var(--acento); outline-offset:1px; }
.segmentado { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.segmentado label { cursor:pointer; }
.segmentado input { position:absolute; opacity:0; pointer-events:none; }
.segmentado span {
  display:block; text-align:center; padding:.85rem .5rem; border-radius:12px;
  border:1px solid #d8c9b4; background:#fff; font-size:.95rem; transition:all .2s ease;
}
.segmentado label:has(input:checked) span { background:var(--acento-fuerte, #8A6640); border-color:var(--acento-fuerte, #8A6640); color:#fff; font-weight:500; }
.campo-trampa { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.rsvp-error { color:#a33b3b; font-size:.95rem; text-align:center; }
.btn-enviar { border:0; cursor:pointer; font:inherit; font-weight:500; padding:1rem; }
.btn-enviar:disabled { opacity:.6; }
.rsvp-gracias { max-width:30rem; margin:0 auto; padding:2.4rem 1.5rem; border:1px solid var(--acento-suave); border-radius:22px; background:rgba(255,255,255,.65); }
.gracias-titulo { font-family:var(--font-manuscrita); font-size:2.6rem; color:var(--acento); line-height:1.15; margin-bottom:.5rem; }

/* ===== Cierre ===== */
.cierre { position:relative; min-height:78svh; display:flex; align-items:flex-end; overflow:hidden; }
.cierre img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cierre-velo { position:absolute; inset:0; background:linear-gradient(180deg, var(--fondo) 0%, rgba(35,28,20,.18) 26%, rgba(35,28,20,.48) 68%, rgba(35,28,20,.78) 100%); }
.cierre-texto { position:relative; width:100%; text-align:center; color:#fff; padding:0 1.4rem 3.4rem; text-shadow:0 2px 18px rgba(0,0,0,.45); }
.cierre-texto p:first-child { font-family:var(--font-titulos); font-size:clamp(1.25rem, 5vw, 1.6rem); font-style:italic; max-width:34rem; margin:0 auto; line-height:1.6; }
.cierre-hashtag { font-family:var(--font-titulos); font-weight:600; font-size:1.4rem; margin-top:1.1rem; letter-spacing:.04em; }
.cierre-credito { font-size:.72rem; opacity:.85; margin-top:2rem; letter-spacing:.06em; }

/* ===== Música, pétalos, lightbox ===== */
#btn-musica {
  position:fixed; right:1rem; bottom:1rem; z-index:55; width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5); background:rgba(43,36,28,.72); color:#fff;
  font-size:1.15rem; cursor:pointer; backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
}
#btn-musica .musica-off { display:none; }
#btn-musica.silenciado .musica-on { display:none; }
#btn-musica.silenciado .musica-off { display:block; }
#petalos { position:fixed; inset:0; z-index:40; pointer-events:none; }
#confeti { position:fixed; inset:0; z-index:90; pointer-events:none; }
#lightbox {
  position:fixed; inset:0; z-index:80; background:rgba(20,16,13,.95);
  display:flex; align-items:center; justify-content:center;
}
#lightbox[hidden] { display:none; }
#lightbox img { max-width:94vw; max-height:86svh; border-radius:10px; object-fit:contain; }
.lb-cerrar, .lb-ant, .lb-sig {
  position:absolute; background:rgba(255,255,255,.12); color:#fff; border:0; cursor:pointer;
  width:46px; height:46px; border-radius:50%; font-size:1.3rem; display:flex; align-items:center; justify-content:center;
}
.lb-cerrar { top:1rem; right:1rem; }
.lb-ant { left:.6rem; top:50%; transform:translateY(-50%); }
.lb-sig { right:.6rem; top:50%; transform:translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  #sello, .sobre-cta, .hero-scroll span { animation:none; }
  .gal-item img { transition:none; }
}