/* El Mundo en una Burbuja — base: colores de nácar, tipografía (Sour Gummy para títulos, redonda y burbujeante;
   Quicksand para leer), marco de teléfono en computadora, CONCHAS (tarjetas con brillo iridiscente y orilla de concha
   ondulada), botones de PERLA y de BURBUJA, HUD con el contador en forma de collar, el titular "El mundo de… le invita",
   ayudas (manita, globo de pista, "Buscar una perla"), tarjeta de cada perla, "¡cumple!", final y vitrina. Todo cuelga
   de html.mb. Por dentro todo se mide contra el marco (.app es un contenedor de tamaño: cqw/cqh), nunca contra la
   ventana. Contraste de textos ≥ 4.5:1 (tinta ciruela sobre nácar claro). */
.mb {
  --perla: #fff8fb; --nacar: #fbecf4; --nacar-2: #f1e8fb; --nacar-3: #e5f6f5;
  --rosa: #f6b9cf; --lila: #cdb6f3; --aqua: #a8e5e1; --aqua-2: #7fd0cf; --oro: #e6c07a; --oro-o: #b88c3f;
  --tinta: #3b2a4f; --tinta-2: #5a4470; --tinta-3: #6b5584; --wa: #1d8f4e;
  --sombra: rgba(90, 50, 120, .22); --sombra-2: rgba(90, 50, 120, .12);
  --f-titulo: "Sour Gummy", "Quicksand", ui-rounded, system-ui, sans-serif; --f-texto: "Quicksand", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* nácar: base pastel + velo iridiscente + costillas de concha (desde arriba al centro) */
  --nacar-fondo:
    repeating-conic-gradient(from 180deg at 50% -30%, rgba(255, 255, 255, .0) 0deg 4deg, rgba(255, 255, 255, .22) 4deg 5deg),
    conic-gradient(from 210deg at 30% 0%, rgba(255, 200, 225, .35), rgba(200, 220, 255, .3), rgba(200, 245, 235, .32), rgba(255, 236, 200, .3), rgba(255, 200, 225, .35)),
    linear-gradient(165deg, #fffafd 0%, #fbedf5 48%, #eff2fb 100%);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.mb *, .mb *::before, .mb *::after { box-sizing: border-box; }
.mb body { margin: 0; font-family: var(--f-texto); font-weight: 600; color: var(--tinta); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.mb button { font: inherit; color: inherit; }
.mb :focus-visible { outline: 3px solid #7a4fc7; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
.mb .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; }
.mb .noscript { margin: 24px; font: 700 18px/1.5 var(--f-texto); color: var(--tinta); background: var(--perla); padding: 16px; border-radius: 18px; }

/* ---------- marco ---------- */
.mb .fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background:
  radial-gradient(40% 30% at 12% 18%, rgba(255, 246, 230, .95), transparent 70%),
  radial-gradient(50% 40% at 85% 30%, rgba(206, 236, 220, .55), transparent 70%),
  linear-gradient(180deg, #efc3d3 0%, #f2cfdc 38%, #e4ccec 62%, #ecd8c8 63%, #f2e3d3 100%); }
.mb .app { position: fixed; inset: 0; z-index: 1; overflow: hidden; isolation: isolate; container-type: size; container-name: marco; background: #f2dce8; transition: opacity .5s ease; }
/* computadora y tableta: el mismo marco de teléfono que los demás diseños, con la escena difuminada alrededor */
@media (min-width: 560px) and (min-height: 560px) {
  .mb .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 3px #fff, 0 0 0 7px #e9d6f2, 0 0 0 9px var(--lila), 0 30px 90px rgba(80, 50, 110, .35); }
}
.mb:not(.is-showcase) .fondo { filter: blur(8px); }
.mb.is-showcase .fondo { display: none; }
.mb.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.mb .stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.mb .stage:active { cursor: grabbing; }
.mb .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.mb .gl.is-on { opacity: 1; }
.mb .sin-gl .stage { background: url("../assets/poster/fondo.webp") center / cover no-repeat, linear-gradient(180deg, #f2cfdc, #e4ccec 60%, #f2e3d3); }
.mb .ui { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.mb .ui > * { pointer-events: auto; }

/* ---------- CONCHA: tarjeta de nácar con orilla ondulada arriba ---------- */
.mb .concha { position: relative; color: var(--tinta); background: var(--nacar-fondo); border-radius: 30px 30px 26px 26px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95), inset 0 -10px 24px rgba(205, 182, 243, .22), 0 14px 34px var(--sombra), 0 2px 0 rgba(255, 255, 255, .6); }
/* la orilla de concha: festón de semicírculos del mismo nácar */
.mb .concha::before { content: ""; position: absolute; left: 16px; right: 16px; top: -11px; height: 13px; pointer-events: none;
  background: radial-gradient(circle at 50% 100%, #fffafd 0 10.5px, rgba(255, 255, 255, 0) 11px) 0 0 / 23px 13px repeat-x;
  filter: drop-shadow(0 -1px 0 rgba(205, 182, 243, .45)); }
/* brillo que recorre la concha despacio */
.mb .concha::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light; opacity: .55;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .9) 45%, transparent 60%) -150% 0 / 250% 100% no-repeat; animation: mb-brillo 7s ease-in-out infinite; }
@keyframes mb-brillo { 0%, 55% { background-position: -150% 0; } 85%, 100% { background-position: 150% 0; } }

/* ---------- botones: PERLA (nácar) y BURBUJA (la acción principal) ---------- */
.mb .bp {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; color: var(--tinta); text-decoration: none; cursor: pointer; isolation: isolate; touch-action: manipulation; user-select: none;
  background: radial-gradient(120% 140% at 28% 18%, #ffffff 0 14%, #fff2f8 30%, #f7dfec 64%, #ecccdf 100%);
  box-shadow: inset 0 0 0 2px #fff, inset 0 -4px 8px rgba(170, 110, 160, .22), 0 6px 14px var(--sombra);
  font: 800 18px/1.05 var(--f-titulo); letter-spacing: .01em; text-align: center;
  transition: transform .14s ease, box-shadow .14s ease;
}
/* el reflejo de la perla */
.mb .bp::before { content: ""; position: absolute; left: 14%; top: 9%; width: 30%; height: 30%; max-width: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); pointer-events: none; z-index: -1; }
.mb .bp:active { transform: translateY(2px) scale(.98); box-shadow: inset 0 0 0 2px #fff, inset 0 -2px 5px rgba(170, 110, 160, .22), 0 2px 6px var(--sombra); }
.mb .bp .bi { display: inline-flex; flex: none; color: #7a4fc7; }
.mb .bp .bt { min-width: 0; }
.mb .bp.is-burbuja {
  background: radial-gradient(120% 140% at 28% 18%, #ffffff 0 12%, #e9fbf9 28%, #b5ebe6 58%, #9ad8e3 82%, #b9a9ef 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95), inset 0 0 14px rgba(255, 190, 230, .45), inset 0 -4px 10px rgba(80, 140, 170, .25), 0 8px 18px rgba(70, 120, 150, .28);
}
.mb .bp.is-burbuja .bi { color: #3b2a4f; }
.mb .bp.is-wa { background: radial-gradient(120% 140% at 28% 18%, #ffffff 0 12%, #eafbef 34%, #c7efd5 100%); }
.mb .bp.is-wa .bi { color: var(--wa); }
.mb .bp.is-chico { min-height: 44px; padding: 0 16px; font-size: 16px; }
.mb .bp.is-grande { min-height: 58px; font-size: 21px; padding: 0 26px; }
.mb .bp.is-bloque { display: flex; width: 100%; }
.mb .bp[hidden] { display: none; }
/* cuenta regresiva visible cuando la tarjeta seguirá sola */
.mb .bp.is-cuenta::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 6px; height: 4px; border-radius: 4px; background: rgba(59, 42, 79, .35); transform-origin: left; animation: mb-cuenta var(--dur, 11s) linear forwards; }
@keyframes mb-cuenta { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.mb .enlace { min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer; font: 700 16px/1.2 var(--f-texto); color: var(--tinta); text-decoration: underline; text-decoration-color: rgba(122, 79, 199, .55); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- botones redondos: burbujas de cristal ---------- */
.mb .icono-btn { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer; color: var(--tinta);
  background: radial-gradient(circle at 32% 26%, #ffffff 0 14%, rgba(255, 255, 255, .78) 30%, rgba(236, 222, 248, .78) 70%, rgba(214, 238, 246, .82) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95), inset -3px -5px 10px rgba(170, 130, 210, .28), 0 6px 16px var(--sombra); transition: transform .14s ease; }
.mb .icono-btn:active { transform: scale(.93); }

/* ---------- HUD: sonido, el collar contador y "Todos los datos" ---------- */
.mb .hud { position: absolute; left: 0; right: 0; top: calc(10px + var(--safe-t)); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; pointer-events: none; transition: opacity .4s; }
.mb .hud > * { pointer-events: auto; }
.mb .contador { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; min-height: 48px; padding: 6px 16px 6px 14px; border-radius: 999px; background: var(--nacar-fondo);
  box-shadow: inset 0 0 0 2px #fff, 0 6px 16px var(--sombra); font: 800 16px/1 var(--f-titulo); color: var(--tinta); }
.mb .ct-k { font-size: 15px; }
.mb .ct-perlas { position: relative; display: flex; gap: 3px; padding-top: 4px; }
.mb .ct-perlas::before { content: ""; position: absolute; left: -2px; right: -2px; top: 2px; height: 9px; border-bottom: 1.6px solid var(--oro-o); border-radius: 0 0 50% 50%; opacity: .8; }
.mb .ct-perlas i { position: relative; width: 16px; height: 16px; border-radius: 50%; transform: translateY(calc(sin(var(--i) * 45deg) * 3px));
  background: radial-gradient(circle at 50% 50%, transparent 0 4.5px, rgba(184, 140, 63, .55) 5px 6px, transparent 6.5px); transition: transform .3s; }
.mb .ct-perlas i.is-on { background: radial-gradient(circle at 34% 30%, #ffffff 0 18%, #fff2f6 34%, #f3d0e1 74%, #d7a9c4 100%); box-shadow: 0 0 8px rgba(255, 230, 200, .9), 0 1px 2px rgba(90, 50, 120, .35); animation: mb-perla-llega .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mb-perla-llega { from { transform: scale(.2); } }
.mb .ct-n b { font-size: 20px; }
.mb .ct-n small { font: 700 13px/1 var(--f-texto); color: var(--tinta-2); }
.mb .contador.is-pop { animation: mb-pop .5s ease; }
@keyframes mb-pop { 40% { transform: scale(1.08); } }
.mb .hud.is-intro .contador { opacity: 0; }

/* ---------- titular: "El mundo de Sarah · le invita" (aparece con el destello) ---------- */
.mb .titular { position: absolute; left: 0; right: 0; top: calc(70px + var(--safe-t)); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; padding: 0 16px; }
.mb .titular span { display: block; opacity: 0; transform: translateY(14px) scale(.92); transition: opacity .7s ease, transform .9s cubic-bezier(.2, 1.4, .4, 1); }
.mb .titular.is-on span { opacity: 1; transform: none; }
.mb .titular .tt-a { font: 800 clamp(26px, 8.6cqw, 38px)/1.02 var(--f-titulo); text-wrap: balance; color: var(--tinta); text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255, 255, 255, .95), 0 0 34px rgba(255, 240, 250, .8); }
.mb .titular .tt-b { margin-top: 2px; font: 800 clamp(18px, 5.4cqw, 24px)/1 var(--f-titulo); color: #7a4fc7; text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255, 255, 255, .95); transition-delay: .35s; }

/* ---------- intro ---------- */
.mb .intro { position: absolute; left: 14px; right: 14px; bottom: calc(14px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; transition: opacity .4s, transform .4s; animation: mb-sube-burbuja .7s cubic-bezier(.2, 1.3, .4, 1) .2s both; }
.mb .intro.is-out { opacity: 0; transform: translateY(20px); pointer-events: none; }
@keyframes mb-sube-burbuja { from { opacity: 0; transform: translateY(40px) scale(.94); } }
.mb .intro-panel { padding: 16px 18px 14px; text-align: center; }
.mb .intro-msg { margin: 0; font: 700 17px/1.4 var(--f-texto); color: var(--tinta); }
.mb .intro-sub { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; font: 700 15px/1.3 var(--f-texto); color: var(--tinta-2); }
.mb .intro-sub .bi { color: #c08a2b; display: inline-flex; }
.mb .intro-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; }
@container marco (max-height: 640px) { .mb .intro-panel { padding: 12px 14px; } .mb .intro-msg { font-size: 15px; } .mb .intro-sub { display: none; } .mb .titular { top: calc(66px + var(--safe-t)); } }

/* ---------- juego: globo de pista, manita y "Buscar una perla" ---------- */
.mb .ctl-juego { position: absolute; left: 0; right: 0; bottom: calc(14px + var(--safe-b)); display: flex; justify-content: center; pointer-events: none; }
.mb .ctl-juego > * { pointer-events: auto; }
.mb .pista { position: absolute; left: 50%; bottom: calc(76px + var(--safe-b)); display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 10px 16px 10px 12px;
  border-radius: 24px; background: rgba(255, 250, 253, .96); box-shadow: inset 0 0 0 2px #fff, 0 8px 20px var(--sombra); font: 700 16px/1.3 var(--f-texto); color: var(--tinta);
  opacity: 0; transform: translate(-50%, 10px) scale(.96); transition: opacity .3s, transform .35s cubic-bezier(.2, 1.4, .4, 1); pointer-events: none; }
.mb .pista.is-on { opacity: 1; transform: translate(-50%, 0); }
/* la colita del globo: dos burbujitas */
.mb .pista::before, .mb .pista::after { content: ""; position: absolute; left: 50%; border-radius: 50%; background: rgba(255, 250, 253, .96); box-shadow: 0 3px 8px var(--sombra-2); }
.mb .pista::before { width: 12px; height: 12px; bottom: -14px; margin-left: 6px; }
.mb .pista::after { width: 7px; height: 7px; bottom: -24px; margin-left: 14px; }
.mb .pista-ic { display: inline-flex; color: #3a9ea0; flex: none; }
.mb .mano { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.mb .mano.is-on { opacity: 1; }
.mb .mano-ic { position: absolute; left: 0; top: 0; color: var(--tinta); filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 0 6px rgba(255, 255, 255, .95)); transform: translate(var(--x0), var(--y0)) translate(-14px, -4px); }
.mb .mano.is-girar .mano-ic { animation: mb-mano-girar 2.2s ease-in-out infinite; }
.mb .mano.is-tocar .mano-ic { animation: mb-mano-tocar 1.4s ease-in-out infinite; }
.mb .mano-estela { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .95); box-shadow: 0 0 14px rgba(255, 240, 200, .9), inset 0 0 10px rgba(255, 240, 200, .7); transform: translate(var(--x0), var(--y0)) scale(.4); opacity: 0; }
.mb .mano.is-tocar .mano-estela { animation: mb-mano-onda 1.4s ease-out infinite; }
@keyframes mb-mano-girar { 0% { transform: translate(var(--x0), var(--y0)) translate(-14px, -4px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(var(--x1), var(--y1)) translate(-14px, -4px); opacity: 1; } 100% { transform: translate(var(--x1), var(--y1)) translate(-14px, -4px); opacity: 0; } }
@keyframes mb-mano-tocar { 0%, 100% { transform: translate(var(--x0), var(--y0)) translate(-14px, 6px); } 40% { transform: translate(var(--x0), var(--y0)) translate(-14px, -4px) scale(.92); } }
@keyframes mb-mano-onda { 0%, 35% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(.4); } 45% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(1.3); } }
.mb .buscar-btn .bi { color: #c08a2b; }
.mb .saltar-btn { position: absolute; right: 14px; bottom: calc(16px + var(--safe-b)); }

/* ---------- la tarjeta de cada perla (concha que sube como burbuja) ---------- */
.mb .tarjeta { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); max-height: min(60cqh, 540px); display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 14px;
  opacity: 0; transform: translateY(44px) scale(.92); transform-origin: 50% 100%; transition: opacity .35s ease, transform .5s cubic-bezier(.2, 1.35, .4, 1); overflow: auto; scrollbar-width: none; }
.mb .tarjeta::-webkit-scrollbar { display: none; }
.mb .tarjeta.is-in { opacity: 1; transform: none; }
.mb .tarjeta.is-out { opacity: 0; transform: translateY(26px) scale(.96); transition-duration: .28s; }
.mb .tj-cabeza { display: flex; align-items: center; gap: 8px; }
.mb .tj-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; color: var(--tinta); background: radial-gradient(circle at 32% 28%, #fff 0 16%, #fbeef5 40%, #ead6f4 100%); box-shadow: inset 0 0 0 2px #fff, 0 3px 8px var(--sombra-2); }
.mb .tj-k { flex: 1; min-width: 0; font: 700 14px/1.2 var(--f-texto); color: var(--tinta-2); }
.mb .tj-perla { display: inline-flex; flex: none; animation: mb-flota 2.4s ease-in-out infinite; }
@keyframes mb-flota { 50% { transform: translateY(-3px); } }
.mb .tj-t { margin: 0; font: 800 clamp(26px, 8cqw, 32px)/1.05 var(--f-titulo); color: var(--tinta); }
.mb .tj-t:focus { outline: none; box-shadow: none; }
.mb .tj-cuerpo { display: flex; flex-direction: column; gap: 10px; }
.mb .tj-seguir { margin-top: 4px; flex: none; }
.mb .con-tarjeta .hud .contador { box-shadow: inset 0 0 0 2px #fff, 0 0 0 4px rgba(255, 236, 200, .7), 0 6px 16px var(--sombra); }

/* el dato: una placa de nácar con el valor grande */
.mb .concha-dato { padding: 10px 14px; border-radius: 22px; text-align: center; background: radial-gradient(120% 120% at 30% 0%, #ffffff 0 30%, #f6e9f6 70%, #e9f2f8 100%); box-shadow: inset 0 0 0 2px #fff, inset 0 -6px 14px rgba(205, 182, 243, .25); }
.mb .cd-k { margin: 0; font: 700 15px/1.2 var(--f-texto); color: var(--tinta-2); text-transform: capitalize; }
.mb .cd-v { margin: 2px 0 0; font: 800 clamp(26px, 8.4cqw, 34px)/1.05 var(--f-titulo); color: var(--tinta); }
.mb .cd-v.is-texto { font-size: clamp(22px, 7cqw, 28px); line-height: 1.15; }
.mb .cd-s { margin: 4px 0 0; font: 700 15px/1.3 var(--f-texto); color: var(--tinta-2); }
.mb .burbujita { align-self: center; margin: 0; padding: 6px 14px; border-radius: 999px; font: 800 16px/1.2 var(--f-titulo); color: var(--tinta);
  background: radial-gradient(120% 160% at 30% 20%, #fff 0 12%, #e6faf8 40%, #bfeee9 100%); box-shadow: inset 0 0 0 2px #fff, 0 3px 8px var(--sombra-2); }
.mb .acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mb .acciones .bp { flex: 1 1 130px; font-size: 15px; padding: 0 12px; }
/* la marea del itinerario: burbujas en fila */
.mb .marea { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mb .marea li { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1.5px #fff; }
.mb .mr-hora { flex: none; min-width: 74px; padding: 4px 10px; border-radius: 999px; text-align: center; font: 800 14px/1.2 var(--f-titulo); color: var(--tinta); background: radial-gradient(circle at 30% 25%, #fff, #e6faf8 50%, #c3ece7); }
.mb .mr-que { font: 700 15px/1.25 var(--f-texto); color: var(--tinta); }
.mb .mapa { border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 2px #fff, 0 3px 10px var(--sombra-2); }
.mb .mapa svg { display: block; width: 100%; height: auto; max-height: 150px; }
.mb .lugar-nombre { margin: 0; font: 800 22px/1.1 var(--f-titulo); color: var(--tinta); text-align: center; }
.mb .lugar-dir { margin: 0; font: 600 15px/1.4 var(--f-texto); color: var(--tinta-2); text-align: center; }
/* el mensaje: una conchita con el texto del festejado */
.mb .pergamino { margin: 0; padding: 16px 18px 12px; border-radius: 24px 24px 24px 8px; background: radial-gradient(120% 120% at 20% 0%, #fff 0 35%, #fdeef4 75%, #f6e2f0 100%); box-shadow: inset 0 0 0 2px #fff, 0 3px 10px var(--sombra-2); }
.mb .pergamino p { margin: 0; font: 700 clamp(18px, 5.6cqw, 22px)/1.35 var(--f-titulo); color: var(--tinta); }
.mb .pergamino footer { margin-top: 8px; font: 700 15px/1.2 var(--f-texto); color: var(--tinta-2); text-align: right; }
.mb .nota-vestir, .mb .nota-cumple { margin: 0; font: 600 15px/1.4 var(--f-texto); color: var(--tinta); text-align: center; }
.mb .nota-cumple { font: 800 17px/1.3 var(--f-titulo); color: #6a3fb0; }

/* ---------- ¡cumple! ---------- */
.mb .cumple { position: absolute; left: 14px; right: 14px; bottom: calc(18px + var(--safe-b)); display: flex; justify-content: center; animation: mb-sube-burbuja .8s cubic-bezier(.2, 1.4, .4, 1) both; }
.mb .cumple-panel { width: 100%; padding: 20px 18px 18px; text-align: center; }
.mb .cumple-k { margin: 0; font: 700 15px/1.2 var(--f-texto); color: var(--tinta-2); }
.mb .cumple-t { margin: 4px 0 0; font: 800 clamp(38px, 13cqw, 54px)/1 var(--f-titulo); color: var(--tinta); text-shadow: 0 3px 0 #fff; }
.mb .cumple-t.is-largo { font-size: clamp(30px, 10cqw, 42px); }
.mb .cumple-s { margin: 8px 0 0; font: 700 18px/1.3 var(--f-texto); color: #6a3fb0; }

/* ---------- final ---------- */
.mb .fin { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 10px; max-height: 56cqh; overflow: auto; scrollbar-width: none; animation: mb-sube-burbuja .7s cubic-bezier(.2, 1.3, .4, 1) both; }
.mb .fin::-webkit-scrollbar { display: none; }
.mb .fin-k { margin: 0; text-align: center; font: 700 14px/1.2 var(--f-texto); color: var(--tinta-2); }
.mb .fin-t { margin: 0; text-align: center; font: 800 clamp(30px, 10cqw, 40px)/1 var(--f-titulo); color: var(--tinta); }
.mb .fin-t.is-largo { font-size: clamp(24px, 8cqw, 32px); }
.mb .fin-linea { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; font: 700 16px/1.3 var(--f-texto); color: var(--tinta); }
.mb .fin-lugar { border-radius: 20px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.5px #fff; padding: 0 10px; }
.mb .fin-lugar[open] { padding-bottom: 10px; }
.mb .fin-lugar summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none; font: 800 16px/1.2 var(--f-titulo); color: var(--tinta); }
.mb .fin-lugar summary::-webkit-details-marker { display: none; }
.mb .fin-salon { flex: 1; min-width: 0; }
.mb .fin-vermapa { font: 700 14px/1 var(--f-texto); color: #6a3fb0; text-decoration: underline; text-underline-offset: 3px; }
.mb .fin-lugar .mapa { margin-bottom: 8px; }
.mb .fin-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 6px; }
.mb .perla-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; color: var(--tinta); background: radial-gradient(circle at 32% 28%, #fff 0 16%, #fbeef5 40%, #ead6f4 100%); box-shadow: inset 0 0 0 1.5px #fff, 0 2px 5px var(--sombra-2); }

/* ---------- avisos ---------- */
.mb .aviso { position: absolute; left: 50%; top: calc(76px + var(--safe-t)); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; transform: translateX(-50%);
  background: rgba(255, 250, 253, .97); box-shadow: inset 0 0 0 2px #fff, 0 8px 20px var(--sombra); font: 700 15px/1.3 var(--f-texto); color: var(--tinta); animation: mb-sube-burbuja .4s ease both; }
.mb .aviso.is-out { opacity: 0; transition: opacity .3s; }
.mb .aviso-burbuja { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #7fd0cf; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .9); }

/* ---------- vitrina y pruebas ---------- */
.mb .is-vitrina .ui > :not(.vitrina-t):not(.dbg-fps) { display: none; }
.mb .is-vitrina .stage { cursor: default; }
.mb .vitrina-t { position: absolute; left: 0; right: 0; top: 5%; margin: 0; text-align: center; pointer-events: none; }
.mb .vitrina-t span { display: block; font: 800 clamp(34px, 6cqw, 64px)/1 var(--f-titulo); color: var(--tinta); text-shadow: 0 3px 0 #fff, 0 0 26px rgba(255, 255, 255, .95); }
.mb .vitrina-t small { display: block; margin-top: 6px; font: 800 clamp(20px, 3cqw, 32px)/1 var(--f-titulo); color: #7a4fc7; text-shadow: 0 2px 0 #fff; }
.mb .dbg-fps { position: absolute; left: 8px; bottom: 8px; margin: 0; padding: 3px 8px; border-radius: 8px; background: rgba(59, 42, 79, .82); color: #fff; font: 600 11px/1.3 ui-monospace, monospace; pointer-events: none; z-index: 50; }

/* ---------- movimiento reducido ---------- */
.mb.rm *, .mb.rm *::before, .mb.rm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .mb *, .mb *::before, .mb *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .mb .mano.is-on { opacity: 1; }
  .mb .mano-ic { transform: translate(var(--x0), var(--y0)) translate(-14px, -4px) !important; }
}