/* Simulacro de Bomberos — base: colores, tipografía (Bungee para letreros, Figtree para leer), marco de teléfono en
   computadora, placas metálicas con remaches, botones de placa con foquito, tablero del camión ("Dianas 2/5"), placa
   de la alarma, película (letrero y "Saltar"), juego (mira, manita, pista, chorro automático), "¡SPLASH!", tarjeta de
   cada diana, "¡cumple!", final y vitrina. Todo cuelga de html.sb (la página del prototipo). Por dentro todo se mide
   contra el marco (.app es un contenedor de tamaño: cqw/cqh), nunca contra la ventana. */
.sb {
  --rojo: #C8102E; --rojo-o: #8E0B20; --rojo-c: #E8303F; --amarillo: #FFD200; --ambar: #FFB21A;
  --carbon: #1C1F24; --carbon-2: #2E333B; --tinta: #1C1F24; --tinta-2: #454B55; --papel: #F7F5F0; --hueso: #ECE7DC;
  --acero-1: #F1F3F5; --acero-2: #C3C8CF; --acero-3: #8E959F; --verde: #13804A; --wa: #25D366;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --f-letrero: "Bungee", "Figtree", system-ui, sans-serif; --f-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --placa-roja: linear-gradient(160deg, #E23246 0%, var(--rojo) 38%, #A80D26 100%);
  --brillo-metal: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .22) 44%, rgba(255, 255, 255, 0) 58%);
  --franja: repeating-linear-gradient(-45deg, var(--rojo) 0 12px, #FFFFFF 12px 24px);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.sb *, .sb *::before, .sb *::after { box-sizing: border-box; }
.sb body { margin: 0; font-family: var(--f-texto); color: var(--tinta); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.sb button { font: inherit; color: inherit; }
.sb :focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; box-shadow: 0 0 0 6px var(--carbon); }
.sb .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; }
.sb .noscript { margin: 24px; font: 700 18px/1.5 var(--f-texto); color: var(--tinta); background: var(--papel); padding: 16px; border-radius: 12px; }

/* ---------- marco ---------- */
.sb .fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background:
  radial-gradient(60% 40% at 50% 92%, rgba(232, 48, 63, .35), transparent 70%),
  linear-gradient(180deg, #0B1530 0%, #24305E 42%, #E79A8C 74%, #3B4049 74.3%, #2B2F36 100%); }
.sb .fondo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 25.7%; height: 30%; background:
  linear-gradient(#1D2442, #1D2442) 8% 100% / 7% 70% no-repeat, linear-gradient(#26305A, #26305A) 17% 100% / 6% 100% no-repeat,
  linear-gradient(#8E0B20, #8E0B20) 30% 100% / 9% 45% no-repeat, linear-gradient(#26305A, #26305A) 76% 100% / 7% 85% no-repeat,
  linear-gradient(#1D2442, #1D2442) 88% 100% / 6% 60% no-repeat; filter: blur(12px); opacity: .9; }
.sb .app { position: fixed; inset: 0; z-index: 1; overflow: hidden; isolation: isolate; container-type: size; container-name: marco; background: #0B1530; 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) {
  .sb .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 #B8BEC6, 0 0 0 7px var(--carbon), 0 0 0 9px var(--rojo), 0 30px 90px rgba(5, 8, 20, .55); }
}
.sb:not(.is-showcase) .fondo { filter: blur(5px); }
.sb.is-showcase .fondo { display: none; }
.sb.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.sb .stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sb .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.sb .gl.is-on { opacity: 1; }
.sb .sin-gl .stage { background: url("../assets/poster/fondo-plaza.webp") center / cover no-repeat, linear-gradient(180deg, #24305E, #E79A8C 70%, #3B4049 70.3%); }
.sb .ui { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.sb .ui > * { pointer-events: auto; }

/* ---------- placas: metal rojo con remaches y brillo ---------- */
.sb .remaches { position: absolute; inset: 7px; pointer-events: none; background:
  radial-gradient(circle at 50% 40%, #FFFFFF 0 1.2px, #D7DBE0 1.6px 3px, #6C727B 3.6px 4.2px, transparent 4.6px) 0 0 / 10px 10px no-repeat,
  radial-gradient(circle at 50% 40%, #FFFFFF 0 1.2px, #D7DBE0 1.6px 3px, #6C727B 3.6px 4.2px, transparent 4.6px) 100% 0 / 10px 10px no-repeat,
  radial-gradient(circle at 50% 40%, #FFFFFF 0 1.2px, #D7DBE0 1.6px 3px, #6C727B 3.6px 4.2px, transparent 4.6px) 0 100% / 10px 10px no-repeat,
  radial-gradient(circle at 50% 40%, #FFFFFF 0 1.2px, #D7DBE0 1.6px 3px, #6C727B 3.6px 4.2px, transparent 4.6px) 100% 100% / 10px 10px no-repeat; }
.sb .tj-franja { height: 12px; margin: -2px -2px 10px; border-radius: 6px; background: var(--franja); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }

/* ---------- botones de placa (con su foquito que parpadea suave) ---------- */
.sb .pb {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px 0 16px;
  border: 2px solid var(--carbon); border-radius: 12px; color: var(--tinta); text-decoration: none; cursor: pointer;
  background: var(--brillo-metal), linear-gradient(180deg, var(--acero-1), var(--acero-2));
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -3px 0 rgba(0, 0, 0, .14), 0 4px 0 var(--carbon);
  font: 400 15px/1.1 var(--f-letrero); letter-spacing: .01em; text-transform: none;
  transition: transform .12s ease, box-shadow .12s ease; touch-action: manipulation; user-select: none;
}
.sb .pb:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(0, 0, 0, .14), 0 1px 0 var(--carbon); }
.sb .pb .bi { display: inline-flex; flex: none; }
.sb .pb .bt { min-width: 0; }
.sb .pb-led { position: absolute; left: 8px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #FFB21A; box-shadow: 0 0 6px 2px rgba(255, 178, 26, .7); animation: sb-led 1.8s ease-in-out infinite; }
@keyframes sb-led { 50% { opacity: .35; box-shadow: 0 0 2px 0 rgba(255, 178, 26, .5); } }
.sb .pb.is-rojo { color: #FFFFFF; background: var(--brillo-metal), var(--placa-roja); border-color: #5E0716; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 4px 0 #5E0716; text-shadow: 0 2px 0 rgba(94, 7, 22, .55); }
.sb .pb.is-rojo:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 0 #5E0716; }
.sb .pb.is-rojo .pb-led { background: #FFE7A3; box-shadow: 0 0 8px 3px rgba(255, 220, 120, .85); }
.sb .pb.is-amarillo { background: var(--brillo-metal), linear-gradient(180deg, #FFE45C, var(--amarillo) 55%, #E6B800); border-color: var(--carbon); }
.sb .pb.is-amarillo .pb-led { background: #FF3B2F; box-shadow: 0 0 7px 2px rgba(255, 59, 47, .7); }
.sb .pb.is-wa { background: linear-gradient(180deg, #4BE38A, var(--wa)); color: #06301A; }
.sb .pb.is-wa .pb-led, .sb a.pb .pb-led { display: none; }
.sb .pb.is-chico { min-height: 44px; padding: 0 14px; font-size: 13px; border-radius: 10px; box-shadow: inset 0 1px 0 #FFFFFF, 0 3px 0 var(--carbon); }
.sb .pb.is-grande { min-height: 58px; font-size: 18px; border-radius: 14px; }
.sb .pb.is-bloque { width: 100%; }
/* auto-avance de la tarjeta (sólo si nadie ha tocado nada): barra que se llena en el botón */
.sb .pb.is-cuenta::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .85); transform-origin: left; animation: sb-cuenta var(--dur, 11s) linear both; }
@keyframes sb-cuenta { from { transform: scaleX(0); } }
.sb .icono-btn { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid var(--carbon); border-radius: 14px; cursor: pointer; color: var(--tinta);
  background: var(--brillo-metal), linear-gradient(180deg, var(--acero-1), var(--acero-2)); box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -3px 0 rgba(0, 0, 0, .14), 0 3px 0 var(--carbon); }
.sb .icono-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 0 var(--carbon); }
.sb .enlace { border: 0; background: none; padding: 10px 6px; min-height: 44px; font: 800 15px var(--f-texto); color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- HUD: tablero del camión ---------- */
.sb .hud { position: absolute; left: 10px; right: 10px; top: calc(var(--safe-t) + 10px); display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; pointer-events: none; }
.sb .hud > * { pointer-events: auto; }
.sb .contador { position: relative; margin: 0; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 4px; padding: 7px 14px 8px; border-radius: 14px;
  background: radial-gradient(120% 140% at 50% 0%, #3A414B, #16191E 70%); border: 2px solid #0B0D10; box-shadow: inset 0 0 0 2px #59616C, inset 0 2px 8px rgba(0, 0, 0, .6), 0 3px 0 #0B0D10; color: #FFFFFF; }
.sb .ct-k { font: 400 12px/1 var(--f-letrero); letter-spacing: .08em; color: #FFD7A0; }
.sb .ct-n { grid-row: span 2; font: 400 26px/1 var(--f-letrero); color: #FFE7A3; text-shadow: 0 0 10px rgba(255, 178, 26, .55); }
.sb .tb-focos { display: flex; gap: 4px; }
.sb .tb-focos i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #59616C, #2A2F36); box-shadow: inset 0 0 0 1px #0B0D10; }
.sb .tb-focos i.is-on { background: radial-gradient(circle at 35% 35%, #B8FFD0, #2FD27A 55%, #13804A); box-shadow: 0 0 8px 2px rgba(47, 210, 122, .7); }
.sb .contador.is-pop { animation: sb-pop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sb-pop { 40% { transform: scale(1.14); } }
.sb .hud.is-intro .contador, .sb [data-fase="pelicula"] .contador, .sb [data-fase="cumple"] .contador { visibility: hidden; }
.sb [data-fase="pelicula"] .hud-datos, .sb [data-fase="cumple"] .hud-datos, .sb [data-fase="arcoiris"] .hud-datos { visibility: hidden; }

/* ---------- avisos ---------- */
.sb .aviso { position: absolute; left: 50%; top: calc(var(--safe-t) + 78px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: 88cqw; padding: 10px 16px; border-radius: 12px; border: 2px solid var(--carbon); background: var(--amarillo); color: var(--tinta); font: 800 16px/1.3 var(--f-texto); box-shadow: 0 4px 0 var(--carbon); z-index: 60; }
.sb .aviso.is-out { opacity: 0; transition: opacity .3s; }
.sb .aviso-luz { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 8px 2px rgba(200, 16, 46, .7); }
.sb .dbg-fps { position: absolute; left: 8px; bottom: calc(var(--safe-b) + 6px); margin: 0; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff; font: 12px ui-monospace, monospace; z-index: 80; pointer-events: none !important; }

/* ---------- ESTACIÓN: placa de la alarma ---------- */
.sb .intro { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--safe-t) + 72px) 14px calc(var(--safe-b) + 16px); pointer-events: none; transition: opacity .45s ease; }
.sb .intro > * { pointer-events: auto; }
.sb .intro.is-out { opacity: 0; pointer-events: none; }
.sb .alarma-placa { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 14px 8px; border-radius: 20px; text-align: center; color: #FFFFFF;
  background: var(--brillo-metal), var(--placa-roja); border: 3px solid #5E0716; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 6px 0 #5E0716, 0 24px 50px rgba(5, 8, 20, .55);
  animation: sb-entra .6s .2s cubic-bezier(.25, 1.4, .5, 1) both; }
@keyframes sb-entra { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.sb .alarma-k { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 5px 12px; border-radius: 8px; background: #FFFFFF; color: var(--rojo-o); font: 400 13px/1 var(--f-letrero); letter-spacing: .06em; }
.sb .foco-rojo { width: 12px; height: 12px; border-radius: 50%; background: var(--rojo-c); box-shadow: 0 0 10px 3px rgba(232, 48, 63, .8); animation: sb-foco 1.1s steps(1) infinite; }
.sb .foco-rojo + span + .foco-rojo { animation-delay: -.55s; }
@keyframes sb-foco { 50% { background: #5E0716; box-shadow: none; } }
.sb .alarma-t { margin: 0; font: 400 clamp(19px, 6cqw, 24px)/1.08 var(--f-letrero); text-wrap: balance; text-shadow: 0 3px 0 rgba(94, 7, 22, .65); }
.sb .alarma-msg { margin: 0; font: 700 15.5px/1.32 var(--f-texto); text-wrap: pretty; }
.sb .alarma-sub { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 2px; padding: 3px 12px; border-radius: 999px; background: rgba(0, 0, 0, .22); font: 700 13px/1.3 var(--f-texto); color: #FFF3D6; }
.sb .alarma-sub .bi { display: inline-flex; color: #9FD8FF; }
.sb .pb.is-alarma { min-height: 58px; font-size: 19px; background: var(--brillo-metal), linear-gradient(180deg, #FFE45C, var(--amarillo) 55%, #E6B800); color: var(--tinta); text-shadow: none; border-color: var(--carbon); box-shadow: inset 0 2px 0 #FFF6C2, 0 5px 0 var(--carbon); animation: sb-boton 1.8s ease-in-out infinite; }
.sb .pb.is-alarma .pb-led { background: var(--rojo-c); box-shadow: 0 0 8px 3px rgba(232, 48, 63, .85); }
@keyframes sb-boton { 50% { transform: scale(1.025); } }
.sb .intro-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; margin-top: -4px; color: #FFFFFF; }

/* ---------- película: letrero y "Saltar" ---------- */
.sb .letrero-peli { position: absolute; left: 50%; top: calc(var(--safe-t) + 18px); transform: translateX(-50%); margin: 0; padding: 8px 18px 9px; border-radius: 10px; white-space: nowrap; pointer-events: none !important;
  background: var(--brillo-metal), var(--placa-roja); color: #FFFFFF; border: 2px solid #5E0716; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--rojo-o), 0 10px 24px rgba(5, 8, 20, .45);
  font: 400 clamp(15px, 4.8cqw, 19px)/1 var(--f-letrero); letter-spacing: .03em; opacity: 0; }
.sb .letrero-peli.is-on { animation: sb-letrero 2.8s ease both; }
@keyframes sb-letrero { 0% { opacity: 0; transform: translate(-50%, -14px); } 12% { opacity: 1; transform: translate(-50%, 0); } 82% { opacity: 1; } 100% { opacity: 0; } }
.sb .saltar-btn { position: absolute; right: 12px; bottom: calc(var(--safe-b) + 16px); }

/* ---------- juego ---------- */
.sb .pista { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 70px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: 92cqw; margin: 0; padding: 10px 16px 10px 12px; border-radius: 12px;
  background: rgba(28, 31, 36, .9); color: #FFFFFF; border: 2px solid #59616C; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); font: 700 15px/1.3 var(--f-texto); opacity: 0; transition: opacity .35s; pointer-events: none !important; }
.sb .pista.is-on { opacity: 1; }
.sb .pista-ic { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--rojo); }
.sb .ctl-juego { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 14px); transform: translateX(-50%); }
.sb .con-tarjeta .ctl-juego, .sb .con-tarjeta .pista { visibility: hidden; }
.sb .dianas-a11y { position: absolute; left: 0; top: 0; }
.sb .sr-foco { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.sb .sr-foco:focus { position: fixed; left: 50%; top: calc(var(--safe-t) + 86px); transform: translateX(-50%); width: auto; height: auto; clip: auto; padding: 10px 16px; border-radius: 12px; background: var(--amarillo); color: var(--tinta); font: 800 16px var(--f-texto); border: 2px solid var(--carbon); z-index: 70; }
/* mira: aro de boquilla que sigue el punto del chorro */
.sb .mira { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none !important; opacity: 0; transition: opacity .2s; will-change: transform; }
.sb .mira.is-on { opacity: 1; }
.sb .mira-aro { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #FFFFFF; box-shadow: 0 0 0 2px rgba(28, 31, 36, .55), inset 0 0 0 2px rgba(28, 31, 36, .35); }
.sb .mira-cruz { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; background: linear-gradient(#FFFFFF, #FFFFFF) 50% 0 / 3px 100% no-repeat, linear-gradient(#FFFFFF, #FFFFFF) 0 50% / 100% 3px no-repeat; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
.sb .mira.is-agua .mira-aro { border-color: #9FD8FF; animation: sb-mira .5s ease-in-out infinite alternate; }
@keyframes sb-mira { to { transform: scale(1.12); } }
/* manita: muestra el gesto (tocar, mantener y llevar a la diana) */
.sb .mano { position: absolute; left: 0; top: 0; pointer-events: none !important; opacity: 0; transition: opacity .3s; }
.sb .mano.is-on { opacity: 1; }
.sb .mano-ic { position: absolute; left: 0; top: 0; color: #FFFFFF; filter: drop-shadow(0 3px 0 rgba(28, 31, 36, .8)) drop-shadow(0 0 8px rgba(0, 0, 0, .4)); transform: translate(calc(var(--x) - 12px), calc(var(--y) + 120px)); }
.sb .mano.is-on .mano-ic { animation: sb-mano 2.6s ease-in-out infinite; }
@keyframes sb-mano { 0% { transform: translate(calc(var(--x) - 12px), calc(var(--y) + 120px)) scale(1); } 18% { transform: translate(calc(var(--x) - 12px), calc(var(--y) + 120px)) scale(.86); } 70%, 85% { transform: translate(calc(var(--x) - 12px), calc(var(--y) + 4px)) scale(.86); } 100% { transform: translate(calc(var(--x) - 12px), calc(var(--y) + 4px)) scale(1); opacity: 0; } }
.sb .mano-onda { position: absolute; left: 0; top: 0; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 3px solid rgba(159, 216, 255, .9); transform: translate(var(--x), var(--y)); opacity: 0; }
.sb .mano.is-on .mano-onda { animation: sb-onda 2.6s ease-out infinite; }
@keyframes sb-onda { 0%, 62% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.4); } }
/* ¡SPLASH! */
.sb .splash { position: absolute; left: 0; top: 0; margin: 0; pointer-events: none !important; transform: translate(var(--x), var(--y)); }
.sb .splash span { display: block; transform: translate(-50%, -50%); padding: 8px 16px 9px; border-radius: 40% 46% 42% 50% / 55% 50% 58% 46%; background: radial-gradient(circle at 35% 30%, #E9F7FF, #6CC4FF 60%, #2B8BE0); color: #FFFFFF; border: 3px solid #0E4F8C;
  font: 400 clamp(22px, 8cqw, 32px)/1 var(--f-letrero); letter-spacing: .02em; text-shadow: 0 2px 0 #0E4F8C, 0 0 2px #0E4F8C; box-shadow: 0 6px 0 #0E4F8C; animation: sb-splash 1.25s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes sb-splash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(3deg); } 35% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%) scale(1); } }

/* ---------- ¡cumple! ---------- */
.sb .cumple { position: absolute; left: 0; right: 0; top: 14cqh; display: flex; justify-content: center; padding: 0 14px; pointer-events: none !important; animation: sb-entra .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.sb .cumple-placa { position: relative; width: min(100%, 380px); padding: 14px 16px 14px; border-radius: 18px; text-align: center; color: #FFFFFF; background: var(--brillo-metal), var(--placa-roja); border: 3px solid #5E0716; box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 7px var(--rojo-o), 0 20px 50px rgba(5, 8, 20, .5); }
.sb .cumple-t { margin: 0; text-wrap: balance; font: 400 clamp(28px, 10cqw, 42px)/1.04 var(--f-letrero); text-shadow: 0 3px 0 rgba(94, 7, 22, .7); }
.sb .cumple-s { margin: 6px 0 0; font: 800 17px/1.3 var(--f-texto); color: #FFF3D6; }

/* ---------- final: resumen, lugar y confirmación ---------- */
.sb .fin { position: absolute; left: 10px; right: 10px; bottom: calc(var(--safe-b) + 10px); max-height: 60cqh; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 14px 6px; border-radius: 20px; text-align: center;
  background: var(--brillo-metal), linear-gradient(180deg, #FFFFFF, var(--papel)); border: 3px solid var(--carbon); box-shadow: inset 0 0 0 3px #E2DDD2, 0 6px 0 var(--carbon), 0 18px 40px rgba(5, 8, 20, .4); animation: sb-sube .6s .1s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes sb-sube { from { opacity: 0; transform: translateY(40px); } }
.sb .fin-k { margin: 0; align-self: center; padding: 4px 12px; border-radius: 8px; background: var(--rojo); color: #FFFFFF; font: 400 12px/1.2 var(--f-letrero); letter-spacing: .05em; }
.sb .fin-t { margin: 0; font: 400 clamp(24px, 8cqw, 32px)/1.05 var(--f-letrero); color: var(--rojo); text-wrap: balance; }
.sb .fin-linea { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 12px; margin: -2px 0 0; font: 800 16px/1.3 var(--f-texto); color: var(--tinta-2); }
.sb .fin-lugar { border: 2px solid #DAD3C5; border-radius: 14px; padding: 2px 10px; background: #FFFFFF; text-align: left; }
.sb .fin-lugar[open] { padding-bottom: 10px; }
.sb .fin-lugar summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font: 800 16px var(--f-texto); cursor: pointer; list-style: none; }
.sb .fin-lugar summary::-webkit-details-marker { display: none; }
.sb .fin-vermapa { margin-left: auto; padding: 3px 10px; border-radius: 8px; background: var(--carbon); color: #FFFFFF; font: 800 13px var(--f-texto); }
.sb .fin-lugar[open] .fin-vermapa { display: none; }
.sb .fin-salon { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb .fin-lugar .lugar-dir { margin: 6px 0; }
.sb .fin-links { display: flex; justify-content: center; gap: 16px; margin-top: -4px; }
.sb .fin-links .enlace { color: var(--rojo-o); }

/* ---------- vitrina ---------- */
.sb .is-vitrina .ui > :not(.vitrina-t) { display: none; }
.sb .vitrina-t { position: absolute; left: 0; right: 0; top: 6%; margin: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.sb .vitrina-t span { padding: 8px 22px 10px; border-radius: 14px; background: var(--brillo-metal), var(--placa-roja); border: 3px solid #5E0716; box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 7px var(--rojo-o); font: 400 clamp(26px, 5.5cqw, 64px)/1 var(--f-letrero); color: #FFFFFF; }
.sb .vitrina-t small { padding: 5px 16px; border-radius: 10px; background: var(--amarillo); border: 2px solid var(--carbon); font: 400 clamp(15px, 2.4cqw, 28px)/1.2 var(--f-letrero); }

@media (prefers-reduced-motion: reduce) {
  .sb *, .sb *::before, .sb *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
  .sb .pb.is-cuenta::after { animation-duration: var(--dur, 11s) !important; }
}
.sb.rm *, .sb.rm *::before, .sb.rm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
.sb.rm .pb.is-cuenta::after { animation-duration: var(--dur, 11s) !important; }