/* Aurora Momentos · piezas compartidas: teléfono, cristal líquido y visor */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
@supports (overflow:clip){html{overflow-x:clip}}
body{overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
body{margin:0;font-family:Montserrat,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
button{font-family:inherit}
.cap{font-size:10px;font-weight:500;letter-spacing:.32em;text-transform:uppercase}
.script{font-family:'Pinyon Script',cursive;font-weight:400}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* Teléfono: proporción real 390 × 844 */
.phone{--w:300px;position:relative;width:var(--w);aspect-ratio:390/844;border-radius:calc(var(--w)*.15);background:linear-gradient(150deg,#3a3a3e,#111113 40%,#1c1c1f);padding:calc(var(--w)*.013);
  box-shadow:0 0 0 .5px #4a4a4f,inset 0 0 0 1px rgba(255,255,255,.1),0 2px 3px rgba(0,0,0,.18),0 30px 60px -10px rgba(20,16,12,.35),0 60px 120px -30px rgba(20,16,12,.35)}
.phone::before{display:none}
.phone .scr{position:relative;width:100%;height:100%;border-radius:calc(var(--w)*.138);overflow:hidden;background:#faf9f5}
.phone .scr img{width:100%;height:auto;will-change:transform}
.phone .scr .top{height:100%;object-fit:cover;object-position:top}
.phone.live .scr img.full{animation:recorrer var(--dur,26s) cubic-bezier(.45,.05,.55,.95) 1.2s infinite alternate}
@keyframes recorrer{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(var(--dist,-70%))}}

/* Cristal líquido */
.glass{position:relative;background:linear-gradient(140deg,rgba(255,255,255,.62),rgba(255,255,255,.26));-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.2),0 18px 50px -12px rgba(30,25,20,.18)}
.glass.dark{background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 50px -12px rgba(0,0,0,.5);color:#f4f2ee}

/* Visor a pantalla completa (ver una invitación) */
.viewer{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:48px;padding:24px;background:rgba(14,14,16,.55);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.viewer.on{opacity:1;visibility:visible}
.viewer .phone{--w:min(360px,78vw,calc((100dvh - 120px) * .462))}
.viewer .scr{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.viewer .scr::-webkit-scrollbar{display:none}
.viewer .side{color:#f4f2ee;max-width:320px;display:flex;flex-direction:column;gap:14px}
.viewer .side h3{margin:0;font-weight:200;font-size:40px;letter-spacing:.04em;line-height:1.1}
.viewer .side p{margin:0;font-weight:300;font-size:14px;line-height:1.7;color:rgba(244,242,238,.75)}
.viewer .x{background:rgba(255,255,255,.14);position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;color:#f4f2ee;display:flex;align-items:center;justify-content:center}
.btnv{min-height:50px;padding:0 26px;display:inline-flex;align-items:center;justify-content:center;border-radius:99px;font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid currentColor;background:transparent;color:inherit}
.btnv.solid{background:#f4f2ee;color:#131313;border-color:#f4f2ee}
@media (max-width:720px){.viewer{flex-direction:column;gap:18px;padding:70px 16px 20px}.viewer .side{align-items:center;text-align:center}.viewer .side h3{font-size:28px}.viewer .side p{display:none}}
@media (prefers-reduced-motion:reduce){.phone.live .scr img.full{animation:none}.viewer{transition:none}}