/* La Caja Musical — interfaz sobre la escena: título caligráfico, "Levanta la tapa" (flecha y manita), enlace "Ver
   solo la información", botones redondos (Detalles y sonido), pista de cajones y de manivela, botón "Confirmar
   asistencia" y las tarjetas de los cajones (papel con filigrana que sube desde abajo). Nada tapa la caja: el título
   va arriba y los botones abajo, sobre la madera del tocador; los textos llevan un halo oscuro detrás para leerse. */
/* (Detalles a la izquierda y sonido a la derecha: el título caligráfico va en medio, en una sola línea) */
.cm2 .det-btn { position: absolute; z-index: 40; left: 12px; top: calc(12px + var(--safe-t)); }
.cm2 .sound-btn { position: absolute; z-index: 40; right: 12px; top: calc(12px + var(--safe-t)); }
.cm2 .glowtext { text-shadow: 0 2px 10px rgba(20, 10, 14, .75), 0 0 24px rgba(20, 10, 14, .5); }

/* ---------- título (tras abrir la caja) ---------- */
.cm2 .title { position: absolute; z-index: 32; left: 16px; right: 16px; top: calc(14px + var(--safe-t)); text-align: center; pointer-events: none; opacity: 0; transform: translateY(-8px); transition: opacity .8s ease, transform .8s var(--ease-soft); }
.cm2 .app.is-open .title { opacity: 1; transform: none; }
.cm2 .app.in-drawer .title { opacity: 0; }
.cm2 .t-script { margin: 0 56px; white-space: nowrap; font: 400 clamp(34px, 10vw, 46px)/1.1 var(--font-script); background: linear-gradient(180deg, #FFF3D0, #E9C77A 55%, #C99A48); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(20, 10, 14, .8)); }
.cm2 .t-main { margin: 2px 0 6px; font: 700 clamp(22px, 6.6vw, 28px)/1.15 var(--font-head); color: var(--rz-ivory); text-shadow: 0 2px 10px rgba(20, 10, 14, .8); }
.cm2 .t-count { display: inline-block; margin: 0; padding: 5px 14px; border-radius: 999px; background: rgba(30, 18, 22, .55); border: 1px solid rgba(var(--rz-gold-rgb), .6); font: 700 16px/1.2 var(--font-text); color: #F4DE9E; }

/* ---------- "Levanta la tapa" ---------- */
.cm2 .lift { position: absolute; z-index: 33; left: 50%; bottom: calc(24% + var(--safe-b)); transform: translate(-50%, 10px); display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; padding: 8px 18px; border: 0; background: none; color: #FFF3D6; font: 700 22px/1.2 var(--font-head); text-shadow: 0 2px 12px rgba(20, 10, 14, .9); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .6s, transform .6s var(--ease-soft); }
.cm2 .app.is-closed .lift { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.cm2 .lift-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(var(--rz-gold-rgb), .8); background: rgba(30, 18, 22, .45); color: #F4DE9E; animation: lift-bob 1.8s ease-in-out infinite; }
@keyframes lift-bob { 50% { transform: translateY(-6px); } }
.cm2 .hand { position: absolute; z-index: 34; left: 50%; top: 50%; margin: -28px 0 0 -10px; pointer-events: none; opacity: 0; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.cm2 .app.show-hand .hand { animation: hand-lift 2.4s ease-in-out infinite; }
@keyframes hand-lift { 0% { opacity: 0; transform: translate(0, 40px) scale(1.05); } 15% { opacity: 1; transform: translate(0, 40px) scale(.95); } 70% { opacity: 1; transform: translate(0, -60px) scale(.95); } 100% { opacity: 0; transform: translate(0, -70px) scale(1); } }
.cm2 .info-link { position: absolute; z-index: 33; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); min-height: 44px; padding: 0 14px; border: 0; background: none; white-space: nowrap; color: #FFF3D6; font: 600 16px/1 var(--font-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(var(--rz-gold-rgb), .8); text-shadow: 0 2px 8px rgba(20, 10, 14, .9); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .6s; }
.cm2 .app.is-closed .info-link { opacity: 1; visibility: visible; }

/* ---------- caja abierta: pista, confirmar, manivela ---------- */
.cm2 .cta { position: absolute; z-index: 33; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translate(-50%, 16px); width: min(320px, calc(100% - 40px)); opacity: 0; visibility: hidden; transition: opacity .6s, transform .6s var(--ease-soft), visibility 0s .6s; }
.cm2 .app.is-open:not(.in-drawer) .cta { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .6s .4s, transform .6s .4s var(--ease-soft); }
.cm2 .drawer-hint { position: absolute; z-index: 33; left: 0; right: 0; bottom: calc(86px + var(--safe-b)); margin: 0; text-align: center; font: 700 16px/1.2 var(--font-text); color: #FFF3D6; text-shadow: 0 2px 8px rgba(20, 10, 14, .95); pointer-events: none; opacity: 0; transition: opacity .6s; }
.cm2 .app.is-open:not(.in-drawer) .drawer-hint { opacity: 1; transition-delay: 1.2s; }
.cm2 .crank-hint { position: absolute; z-index: 33; left: 0; top: 0; margin: 0; pointer-events: none; opacity: 0; transition: opacity .5s; }
.cm2 .crank-hint span { position: absolute; right: 18px; bottom: 10px; white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: rgba(255, 248, 240, .95); color: var(--rz-ink); font: 700 16px/1 var(--font-text); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.cm2 .crank-hint span::after { content: ""; position: absolute; right: -6px; bottom: 8px; border: 7px solid transparent; border-left-color: rgba(255, 248, 240, .95); }
.cm2 .app.show-crank:not(.in-drawer) .crank-hint { opacity: 1; }
/* cajones accesibles con teclado (invisibles hasta recibir foco) */
.cm2 .drawer-nav { position: absolute; z-index: 45; left: 12px; right: 12px; bottom: calc(80px + var(--safe-b)); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; opacity: 0; pointer-events: none; }
.cm2 .drawer-nav:focus-within { opacity: 1; pointer-events: auto; }
.cm2 .dn-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(var(--rz-gold-rgb), .8); border-radius: 999px; background: var(--rz-ivory); color: var(--rz-ink); font: 700 15px/1 var(--font-text); }

/* ---------- tarjeta de cajón (papel que sube desde abajo) ---------- */
.cm2 .card-wrap { position: absolute; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; padding: 0 10px calc(10px + var(--safe-b)); pointer-events: none; }
.cm2 .card { width: min(410px, 100%); max-height: min(60%, 520px); display: flex; flex-direction: column; pointer-events: auto; transform: translateY(calc(110% + var(--drag, 0px))); transition: transform .5s var(--ease-soft); }
.cm2 .card-wrap.is-on .card { transform: translateY(var(--drag, 0px)); }
.cm2 .c-grip { display: block; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: rgba(var(--rz-gold-rgb), .7); touch-action: none; }
.cm2 .c-close { position: absolute; right: 14px; top: 14px; z-index: 2; background: rgba(255, 248, 240, .9); color: var(--rz-ink); }
/* (arriba deja libre la voluta de la esquina izquierda) */
.cm2 .c-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 8px 28px; }
.cm2 .c-foot { flex: none; display: flex; justify-content: center; padding: 6px 12px 14px; }
.cm2.rm .card, .cm2.rm .card-wrap.is-on .card { transition: opacity .3s; transform: none; opacity: 0; }
.cm2.rm .card-wrap.is-on .card { opacity: 1; }

/* ---------- tipografía y bloques de contenido (tarjetas, detalles, versión sin WebGL) ---------- */
.cm2 .kick { margin: 8px 44px 2px 0; font: 800 13px/1.2 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: #9C7430; }
.cm2 .ct { margin: 2px 0 6px; font: 700 26px/1.15 var(--font-head); color: var(--rz-ink); }
.cm2 .ch { margin: 16px 0 8px; font: 700 20px/1.2 var(--font-head); color: var(--rz-ink); }
.cm2 .script { margin: 0; font: 400 40px/1.05 var(--font-script); color: #B8903E; }
.cm2 .big { margin: 0 0 4px; font: 700 20px/1.3 var(--font-text); color: var(--rz-ink); }
.cm2 .c-body p, .cm2 .sh-body p { font-size: 16px; line-height: 1.5; }
.cm2 .center { text-align: center; }
.cm2 .hosts { margin: 4px 0; font: 700 17px/1.4 var(--font-text); }
.cm2 .welcome { margin: 10px 0 4px; padding: 12px 14px; border-left: 3px solid var(--rz-gold); background: rgba(var(--rz-primary-rgb), .16); border-radius: 0 12px 12px 0; font: 600 17px/1.5 var(--font-text); font-style: italic; }
.cm2 .btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
/* (si la etiqueta no cabe en una línea, el botón baja a su propio renglón en vez de partir el texto) */
.cm2 .btns .gbtn { flex: 1 1 auto; white-space: nowrap; }
.cm2 .btns.center { justify-content: center; }
.cm2 .btns.center .gbtn { flex: 0 1 auto; }
.cm2 .countdown { margin: 12px 0 6px; padding: 12px 10px; border-radius: 14px; background: linear-gradient(180deg, rgba(var(--rz-primary-rgb), .22), rgba(var(--rz-primary-rgb), .08)); border: 1px solid rgba(var(--rz-gold-rgb), .55); text-align: center; }
.cm2 .cd-label { margin: 0 0 6px !important; font: 400 26px/1 var(--font-script) !important; color: #9C7430; }
.cm2 .cd-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cm2 .cd-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cm2 .cd-cell b { font: 700 30px/1 var(--font-head); color: var(--rz-ink); font-variant-numeric: lining-nums tabular-nums; }
.cm2 .cd-cell span { font: 700 13px/1 var(--font-text); letter-spacing: .08em; color: #7A5A48; text-transform: uppercase; }
.cm2 .countdown.is-done .cd-row { display: none; }
.cm2 .venue .big { color: var(--rz-ink); }
.cm2 .venue .addr { margin: 0; font: 600 16px/1.45 var(--font-text); }
.cm2 .pmap { margin: 12px 0 4px; border-radius: 14px; overflow: hidden; line-height: 0; border: 1px solid rgba(var(--rz-gold-rgb), .6); box-shadow: inset 0 0 0 3px rgba(255, 248, 240, .6); }
.cm2 .pmap svg { width: 100%; height: auto; aspect-ratio: 320 / 170; }
.cm2 .note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0 !important; color: #6A4A58; }
.cm2 .note span:first-child { color: #B8903E; display: grid; margin-top: 2px; }
.cm2 .itin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cm2 .itin li { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: baseline; padding: 8px 4px; border-bottom: 1px dashed rgba(var(--rz-gold-rgb), .6); }
.cm2 .itin .time { font: 700 16px/1.2 var(--font-head); color: #9C7430; font-variant-numeric: lining-nums; }
.cm2 .itin .what { font: 600 16px/1.35 var(--font-text); }
.cm2 .gifts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cm2 .gifts li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(var(--rz-gold-rgb), .4); }
.cm2 .gifts li.is-top { background: linear-gradient(180deg, rgba(var(--rz-primary-rgb), .35), rgba(var(--rz-primary-rgb), .15)); border-color: rgba(var(--rz-gold-rgb), .9); box-shadow: 0 0 0 2px rgba(var(--rz-gold-rgb), .25); }
.cm2 .gi { display: grid; color: #B8903E; flex: none; }
.cm2 .gt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm2 .gn { font: 700 16px/1.25 var(--font-text); }
.cm2 .gifts li.is-top .gn { font: 700 19px/1.2 var(--font-head); }
.cm2 .gnote { font: 400 15px/1.35 var(--font-text); color: #6A4A58; }
.cm2 .gifts .ver { flex: 0 0 auto; min-width: 64px; }
.cm2 .check { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cm2 .check li { display: flex; gap: 8px; align-items: flex-start; font: 600 16px/1.4 var(--font-text); }
.cm2 .check li span:first-child { color: #B8903E; display: grid; margin-top: 2px; }
.cm2 .faq details { border-bottom: 1px dashed rgba(var(--rz-gold-rgb), .6); }
.cm2 .faq summary { min-height: 44px; display: flex; align-items: center; padding: 6px 0; font: 700 16px/1.3 var(--font-text); cursor: pointer; list-style: none; }
.cm2 .faq summary::-webkit-details-marker { display: none; }
.cm2 .faq summary::before { content: "✦"; flex: none; width: 22px; color: #B8903E; }
.cm2 .faq p { margin: 0 0 10px 22px !important; color: #5A3E4A; }
/* relicario en HTML */
.cm2 .locket { position: relative; width: 150px; height: 184px; margin: 8px auto 6px; }
.cm2 .lk-frame { position: absolute; inset: 0; border-radius: 50%; padding: 9px; background: var(--gold-grad); box-shadow: 0 6px 18px rgba(0, 0, 0, .25), inset 0 0 0 2px rgba(255, 255, 255, .5); }
.cm2 .lk-frame img, .cm2 .lk-frame canvas { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; box-shadow: inset 0 0 0 2px rgba(120, 80, 20, .5); }
.cm2 .lk-lid { position: absolute; left: -46%; top: 0; width: 100%; height: 100%; border-radius: 50%; background: var(--gold-grad); transform-origin: right center; transform: perspective(400px) rotateY(-68deg); opacity: .9; box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .25); }
.cm2 .lk-lid::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 26px; margin: -13px 0 0 -11px; background: var(--rz-primary); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
/* carrusel de recuerdos */
.cm2 .carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 2px 6px; margin: 6px -4px 0; }
.cm2 .carousel[hidden] { display: none; }
.cm2 .frame { flex: 0 0 138px; scroll-snap-align: center; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; }
.cm2 .carousel.n1 .frame { flex-basis: 100%; }
.cm2 .fr-in { display: block; padding: 7px; border-radius: 10px; background: var(--gold-grad); box-shadow: 0 4px 12px rgba(0, 0, 0, .22); }
.cm2 .fr-in img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(120, 80, 20, .4); }
.cm2 .fcap { display: block; margin-top: 6px; font: 700 15px/1.2 var(--font-text); color: var(--rz-ink); }