/* Version: 3.2.0 | Updated: 2026-09-28
   Changelog: Visible Maps/WhatsApp calls to action and prominent audio notice.
   Previous: 3.1.0 — full viewport, preserved artwork and link alignment.
   Previous: 3.0.0 — centered card and separate playback controls. */
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#050914;color:#fff}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
.invitation{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;height:100vh;height:100dvh;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#050914}
/* Fill extra space on taller/wider phones without cropping faces, text or buttons. */
.invitation::before{content:"";position:absolute;inset:-30px;z-index:-1;background:linear-gradient(#05091466,#05091499),url('assets/portada.jpg') center/cover;filter:blur(22px);pointer-events:none}
.stage{position:relative;width:min(100%,calc((100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*9/16));width:min(100%,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*9/16));aspect-ratio:9/16}
video{display:block;width:100%;height:100%;object-fit:contain;cursor:pointer}
.hotspot{position:absolute;top:90.1%;transform:translateY(-50%);height:max(6.2%,46px);width:43%;border:2px solid var(--accent);border-radius:14px;z-index:2;touch-action:manipulation;display:flex;align-items:center;justify-content:center;gap:7px;color:#fff;text-decoration:none;background:var(--button-bg);box-shadow:0 3px 12px #0009,0 0 12px var(--glow);animation:attention 3s ease-in-out infinite}
.location{left:6%;--accent:#68e2ff;--glow:#2dceff77;--button-bg:linear-gradient(135deg,#084c91,#063364)}
.rsvp{left:51%;--accent:#81ffb0;--glow:#35ee8977;--button-bg:linear-gradient(135deg,#087941,#05552f);animation-delay:1.5s}
.hotspot svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hotspot span{display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.hotspot strong{font-size:clamp(12px,3.5vw,16px);line-height:1}
.hotspot small{font-size:clamp(10px,2.8vw,12px);line-height:1;font-weight:500}
.hotspot:focus-visible,video:focus-visible{outline:3px solid #ffe361;outline-offset:3px}
@keyframes attention{0%,65%,100%{box-shadow:0 3px 12px #0009,0 0 10px var(--glow)}32%{box-shadow:0 3px 12px #0009,0 0 22px var(--glow),0 0 0 3px var(--glow)}}
@media(hover:hover){.hotspot:hover{filter:brightness(1.2)}}
@media(orientation:landscape) and (max-height:500px){.hotspot{gap:3px;border-radius:10px}.hotspot svg{width:16px;height:16px}.hotspot strong{font-size:9px}.hotspot small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.hotspot{animation:none}}
.notice,.error{position:absolute;z-index:3;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);margin:0;padding:9px 14px;border-radius:20px;background:#050914df;color:#fff;font-size:14px;line-height:1.35;text-align:center;pointer-events:none;box-shadow:0 2px 14px #0005}
.error{color:#ffe2b8}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Place the sound prompt over clothing, below faces and above event details. */
#playback-notice{top:59%;max-width:min(88%,360px);padding:14px 20px;border:2px solid #ffe361;border-radius:18px;background:#071226f2;color:#fff;font-size:clamp(16px,4.4vw,20px);font-weight:700;line-height:1.35;box-shadow:0 5px 30px #0009,0 0 22px #ffe36144}

@media(orientation:landscape) and (max-height:500px){#playback-notice{font-size:12px;padding:8px 10px;border-radius:12px}}