/* La Caja Musical — base: tokens del tema (_shared/realeza/js/themes.js → applyThemeCss: --rz-*), marco de teléfono
   (≤ 430 px) con el tocador de noche alrededor en escritorio, botones dorados, avisos y botones de sonido/detalles.
   Todo vive bajo .cm2 (clase de <html> de esta invitación): nada global que afecte a otras páginas.
   Fuentes: Great Vibes (sólo el nombre caligráfico), Playfair Display 600/700 (títulos), Mulish 400/600/800 (textos).
   Textos de datos ≥ 16 px con buen contraste. */
.cm2 {
  --rz-enamel: #F6EDEA; --rz-pearl: #FFE9F0; --rz-primary: #E8B4BC; --rz-primary-rgb: 232, 180, 188; --rz-primary-hi: #F2D0D6; --rz-primary-lo: #AE8189;
  --rz-secondary: #B98AA6; --rz-velvet: #8E4E6A; --rz-ivory: #FFF8F0; --rz-ink: #4A2E3C; --rz-on-primary: #3A2230; --rz-gold: #D9B35C; --rz-gold-rgb: 217, 179, 92; --rz-night: #1E1216;
  --gold-grad: linear-gradient(180deg, #FBE9B4 0%, #E2BE6A 48%, #C99A48 100%);
  --font-script: "Great Vibes", "Playfair Display", cursive;
  --font-head: "Playfair Display", Georgia, serif;
  --font-text: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-soft: cubic-bezier(.3, .7, .2, 1);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
.cm2 *, .cm2 *::before, .cm2 *::after { box-sizing: border-box; }
.cm2, .cm2 body { margin: 0; height: 100%; overflow: hidden; background: var(--rz-night); color: var(--rz-ivory); font-family: var(--font-text); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
:where(.cm2) button { font: inherit; color: inherit; }
.cm2, .cm2 * { scrollbar-width: none; }
.cm2 ::-webkit-scrollbar { display: none; }
.cm2 .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cm2 .noscript { position: fixed; inset: auto 16px 16px; padding: 16px; border-radius: 16px; background: #3A2230; font-size: 16px; }
.cm2 :focus-visible { outline: 3px solid #F4DE9E; outline-offset: 3px; }

/* ---------- Escritorio: el tocador de noche alrededor del teléfono ---------- */
.cm2 .room { position: fixed; inset: 0; z-index: 0; overflow: hidden; background:
  radial-gradient(40% 30% at 50% 22%, rgba(255, 200, 150, .18), transparent 70%),
  linear-gradient(180deg, #1A0F12 0%, #2E1C20 58%, #6B4E3A 58.2%, #B99772 62%, #8A6A4E 100%); }
.cm2 .room::before { /* guirnalda desenfocada */
  content: ""; position: absolute; left: -5%; right: -5%; top: 6%; height: 30%;
  background-image: radial-gradient(circle at 5% 40%, rgba(255, 214, 160, .5) 0 18px, transparent 40px), radial-gradient(circle at 15% 60%, rgba(255, 214, 160, .4) 0 24px, transparent 50px), radial-gradient(circle at 27% 70%, rgba(255, 200, 150, .45) 0 20px, transparent 44px), radial-gradient(circle at 39% 62%, rgba(255, 214, 160, .35) 0 28px, transparent 56px), radial-gradient(circle at 61% 62%, rgba(255, 214, 160, .35) 0 28px, transparent 56px), radial-gradient(circle at 73% 70%, rgba(255, 200, 150, .45) 0 20px, transparent 44px), radial-gradient(circle at 85% 60%, rgba(255, 214, 160, .4) 0 24px, transparent 50px), radial-gradient(circle at 95% 40%, rgba(255, 214, 160, .5) 0 18px, transparent 40px);
  filter: blur(4px); }
.cm2 .app { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: var(--rz-night); isolation: isolate; }
@media (min-width: 560px) and (min-height: 560px) {
  .cm2 .app { inset: auto; left: 50%; top: 50%; width: min(430px, 100vw - 32px); height: min(932px, 100dvh - 40px); transform: translate(-50%, -50%);
    border-radius: 36px; box-shadow: 0 0 0 10px #2E1C20, 0 0 0 12px rgba(var(--rz-gold-rgb), .45), 0 30px 80px rgba(0, 0, 0, .6), 0 0 90px rgba(255, 190, 140, .16); }
}
.cm2.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.cm2.is-showcase .ui { display: none !important; }
.cm2 .stage { position: absolute; inset: 0; overflow: hidden; }
/* velo del fundido (movimiento reducido): cubre sólo la escena, nunca la interfaz */
.cm2 .veil { position: absolute; inset: 0; z-index: 1; background: #1E1216; opacity: 0; pointer-events: none; transition: opacity .23s ease; }
.cm2 .veil.is-on { opacity: 1; }
.cm2 .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.cm2 .ui { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.cm2 .ui > * { pointer-events: auto; }

/* ---------- Botones ---------- */
.cm2 .gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid rgba(255, 244, 214, .7); border-radius: 999px;
  background: var(--gold-grad); color: #3A2618; font: 700 17px/1.1 var(--font-head); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -2px 0 rgba(120, 80, 20, .25) inset, 0 6px 18px rgba(0, 0, 0, .35); transition: transform .12s ease, filter .15s; }
.cm2 .gbtn:active { transform: translateY(1px) scale(.98); }
.cm2 .gbtn.is-soft { background: rgba(255, 248, 240, .94); color: var(--rz-ink); border-color: rgba(var(--rz-gold-rgb), .7); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.cm2 .gbtn.is-primary { background: linear-gradient(180deg, var(--rz-primary-hi), var(--rz-primary)); color: var(--rz-on-primary); border-color: rgba(var(--rz-gold-rgb), .9); box-shadow: 0 0 0 2px rgba(var(--rz-gold-rgb), .55), 0 8px 22px rgba(0, 0, 0, .35); }
.cm2 .gbtn.is-small { min-height: 44px; padding: 0 16px; font: 700 16px/1 var(--font-text); }
.cm2 .gbtn.is-big { min-height: 56px; padding: 0 28px; font-size: 19px; }
.cm2 .gbtn svg { flex: none; }
/* (fondo casi opaco, sin backdrop-filter: sobre la escena 3D el desenfoque se recalculaba en cada cuadro) */
.cm2 .round-btn { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(var(--rz-gold-rgb), .7); border-radius: 50%; background: rgba(30, 18, 22, .78); color: #F4DE9E; cursor: pointer; }
.cm2 .round-btn[hidden] { display: none; }

/* ---------- Avisos ---------- */
.cm2 .toast { position: absolute; z-index: 70; left: 50%; top: calc(142px + var(--safe-t)); width: max-content; max-width: calc(100% - 32px); padding: 12px 20px; border: 1px solid rgba(var(--rz-gold-rgb), .8); border-radius: 999px; background: rgba(255, 248, 240, .96); color: var(--rz-ink); font: 700 17px/1.25 var(--font-head); text-align: center; transform: translate(-50%, -10px); opacity: 0; transition: opacity .35s, transform .35s var(--ease-soft); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.cm2 .toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cm2 .notice { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(20, 10, 14, .62); opacity: 0; transition: opacity .3s; }
.cm2 .notice.is-on { opacity: 1; }
.cm2 .notice-card { width: min(360px, 100%); padding: 24px 20px 20px; border-radius: 22px; text-align: center; color: var(--rz-ink); }
.cm2 .notice-card h2 { margin: 8px 0 6px; font: 700 22px/1.2 var(--font-head); }
.cm2 .notice-card p { margin: 0 0 10px; font-size: 16px; line-height: 1.45; }
.cm2 .notice-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #25D366; color: #0B2E17; }
.cm2 .notice-msg { margin: 0 0 14px; padding: 12px; max-height: 38vh; overflow: auto; border-radius: 12px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(var(--rz-gold-rgb), .5); color: var(--rz-ink); font: 600 16px/1.45 var(--font-text); text-align: left; white-space: pre-wrap; word-break: break-word; }
.cm2 .notice-card .gbtn { width: 100%; }

/* ---------- Papel grueso con borde de filigrana dorada (tarjetas, hojas, carnet) ---------- */
.cm2 .paper { position: relative; color: var(--rz-ink); background:
  radial-gradient(120% 80% at 30% 0%, #FFFDF8 0%, var(--rz-ivory) 55%, #F6EAD8 100%);
  border-radius: 18px; box-shadow: 0 0 0 1px rgba(var(--rz-gold-rgb), .9), 0 0 0 5px var(--rz-ivory), 0 0 0 6px rgba(var(--rz-gold-rgb), .55), 0 12px 28px rgba(0, 0, 0, .4); }
.cm2 .paper::before { /* esquinas de filigrana */
  content: ""; position: absolute; inset: 8px; pointer-events: none; border-radius: 12px;
  /* (la misma voluta, espejada para cada esquina) */
  --tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23C99A48'%3E%3Cpath d='M2 38V14C2 7 7 2 14 2h24' stroke-width='2'/%3E%3Cpath d='M8 32c0-10 6-18 18-22-6 5-8 10-6 16 1 3-3 6-6 4-2-1-3-4-1-6' stroke-width='1.6'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='2.4' fill='%23C99A48'/%3E%3C/svg%3E");
  --tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(40 0) scale(-1 1)'%3E%3Cg fill='none' stroke='%23C99A48'%3E%3Cpath d='M2 38V14C2 7 7 2 14 2h24' stroke-width='2'/%3E%3Cpath d='M8 32c0-10 6-18 18-22-6 5-8 10-6 16 1 3-3 6-6 4-2-1-3-4-1-6' stroke-width='1.6'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='2.4' fill='%23C99A48'/%3E%3C/g%3E%3C/svg%3E");
  --bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(0 40) scale(1 -1)'%3E%3Cg fill='none' stroke='%23C99A48'%3E%3Cpath d='M2 38V14C2 7 7 2 14 2h24' stroke-width='2'/%3E%3Cpath d='M8 32c0-10 6-18 18-22-6 5-8 10-6 16 1 3-3 6-6 4-2-1-3-4-1-6' stroke-width='1.6'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='2.4' fill='%23C99A48'/%3E%3C/g%3E%3C/svg%3E");
  --br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='translate(40 40) scale(-1 -1)'%3E%3Cg fill='none' stroke='%23C99A48'%3E%3Cpath d='M2 38V14C2 7 7 2 14 2h24' stroke-width='2'/%3E%3Cpath d='M8 32c0-10 6-18 18-22-6 5-8 10-6 16 1 3-3 6-6 4-2-1-3-4-1-6' stroke-width='1.6'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='2.4' fill='%23C99A48'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--tl) top left / 38px no-repeat, var(--tr) top right / 38px no-repeat, var(--bl) bottom left / 38px no-repeat, var(--br) bottom right / 38px no-repeat; }
/* (donde va el botón de cerrar no se dibuja la voluta de esa esquina: se encimaban) */
.cm2 .paper:has(.c-close)::before { background: var(--tl) top left / 38px no-repeat, var(--bl) bottom left / 38px no-repeat, var(--br) bottom right / 38px no-repeat; }
.cm2 .paper > * { position: relative; }