/* ==========================================================
   Base compartida por todas las invitaciones demo.
   Cada temática define su paleta y fuentes en su propio style.css
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}main{overflow-x:clip}}
body{margin:0;min-height:100vh;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.center{text-align:center}

/* Bloqueo de scroll mientras la intro está cerrada */
html.locked,html.locked body{overflow:hidden;height:100%}

/* ---------- Revelado al hacer scroll ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s;transition-delay:calc(var(--i,0) * 110ms)}
.rv[data-rv="zoom"]{transform:scale(.86)}
.rv[data-rv="left"]{transform:translateX(-50px)}
.rv[data-rv="right"]{transform:translateX(50px)}
.rv[data-rv="blur"]{transform:none;filter:blur(14px)}
.rv[data-rv="flip"]{transform:perspective(800px) rotateX(-70deg);transform-origin:50% 0}
.rv[data-rv="drop"]{transform:translateY(-60px) rotate(-6deg)}
.rv.in{opacity:1;transform:none;filter:none}

/* ---------- Imágenes con respaldo (placeholder) ---------- */
.pic{position:relative;overflow:hidden;margin:0;background:var(--ph-bg,linear-gradient(135deg,#ddd,#bbb))}
.pic>img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}
.pic.loaded>img{opacity:1}
.pic.ph{display:grid;place-items:center}
.pic.ph::after{content:"IMAGEN PENDIENTE\A" attr(data-ph);white-space:pre-wrap;overflow-wrap:anywhere;max-width:calc(100% - 24px);text-align:center;font:600 11px/1.6 system-ui,sans-serif;letter-spacing:.12em;color:var(--ph-ink,rgba(0,0,0,.45));border:1.5px dashed currentColor;padding:10px 14px;border-radius:10px;margin:12px}
.pic.ph.quiet::after{display:none}

/* ---------- Botón de música ---------- */
.music-btn{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;width:50px;height:50px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--music-bg,#000);color:var(--music-ink,#fff);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.music-btn[hidden]{display:none}
.music-btn .bars{display:flex;gap:3px;align-items:flex-end;height:18px}
.music-btn .bars i{width:3px;height:30%;background:currentColor;border-radius:2px}
.music-btn.playing .bars i{animation:mbar .9s ease-in-out infinite alternate}
.music-btn.playing .bars i:nth-child(2){animation-delay:-.3s}
.music-btn.playing .bars i:nth-child(3){animation-delay:-.6s}
.music-btn.playing .bars i:nth-child(4){animation-delay:-.15s}
@keyframes mbar{to{height:100%}}

/* ---------- Tarjeta de invitado ---------- */
[data-guest][hidden]{display:none}

/* ---------- Formularios RSVP (estructura; cada tema da estilo) ---------- */
.rsvp-form{display:grid;gap:14px;text-align:left}
.rsvp-form label{display:grid;gap:6px;font-size:.9rem}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{width:100%;padding:12px 14px;border-radius:12px;font-size:16px}
.rsvp-form textarea{min-height:84px;resize:vertical}
.rsvp-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rsvp-choice input{position:absolute;opacity:0;pointer-events:none}
.rsvp-choice label{display:block;text-align:center;padding:12px;border-radius:12px;cursor:pointer;transition:transform .2s,background .2s,color .2s}
.rsvp-choice label:active{transform:scale(.96)}
.rsvp-ok{text-align:center}
.rsvp-ok[hidden]{display:none}
.rsvp-note{font-size:.78rem;opacity:.7;text-align:center;margin-top:10px}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* ---------- Botón de efectos de sonido ---------- */
.sfx-btn{position:fixed;right:12px;top:calc(10px + env(safe-area-inset-top));z-index:110;width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;font-size:17px;line-height:1;background:rgba(0,0,0,.45);color:#fff;backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.2);transition:transform .15s}
.sfx-btn:active{transform:scale(.9)}

/* ---------- Etiqueta DEMO ---------- */
.demo-tag{position:fixed;left:12px;top:calc(12px + env(safe-area-inset-top));z-index:70;font:700 10px/1 system-ui,sans-serif;letter-spacing:.16em;padding:7px 10px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;text-decoration:none;backdrop-filter:blur(6px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.3s!important;scroll-behavior:auto!important}
  .rv{transform:none!important;filter:none!important}
}