/* Tanda de Penales — base: colores, tipografía (Doto para el marcador de LED, Barlow Condensed para letreros y
   Barlow para leer), marco de teléfono en computadora, paneles de LED (fondo de puntos de luz), botones como placas de
   cancha (pasto rayado con línea de gis blanco), HUD con el marcador de goles, pantalla del silbato, recorrido
   ("Saltar"), juego (guía de la trayectoria, manita, esquinas, avisos de LED), barrido entre penales, "¡cumple!",
   final y vitrina. Todo cuelga de html.tp (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. */
.tp {
  --led-fondo: #070b14; --led-fondo-2: #0e1626; --led-borde: #26344d; --led-ambar: #ffc93c; --led-ambar-2: #ffe08a; --led-blanco: #f4f7ff; --led-cian: #8fe8ff;
  --pasto-1: #1c7a3c; --pasto-2: #238a47; --pasto-o: #0d4a22; --gis: #ffffff;
  --amarilla: #ffd21f; --amarilla-o: #c79a00; --verde: #0f7a3a; --verde-o: #07471f;
  --tinta: #121722; --tinta-2: #3c4556; --papel: #f6f4ee; --pizarra: #1b3a2d; --pizarra-2: #24493a; --wa: #25d366;
  --equipo: #6a3fb5; --equipo-2: #1cc3b2;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --f-led: "Doto", "Barlow Condensed", ui-monospace, monospace; --f-letrero: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --f-texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --puntos: radial-gradient(circle at 50% 50%, rgba(160, 190, 240, .09) 0 1.1px, transparent 1.6px) 0 0 / 5px 5px;
  --rayas: repeating-linear-gradient(90deg, var(--pasto-1) 0 22px, var(--pasto-2) 22px 44px);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.tp *, .tp *::before, .tp *::after { box-sizing: border-box; }
.tp body { margin: 0; font-family: var(--f-texto); color: var(--tinta); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.tp button { font: inherit; color: inherit; }
.tp :focus-visible { outline: 3px solid var(--led-ambar); outline-offset: 3px; box-shadow: 0 0 0 6px var(--led-fondo); }
.tp .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; }
.tp .noscript { margin: 24px; font: 700 18px/1.5 var(--f-texto); color: var(--tinta); background: var(--papel); padding: 16px; border-radius: 12px; }

/* ---------- marco ---------- */
.tp .fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background:
  radial-gradient(50% 30% at 50% 100%, rgba(255, 240, 200, .25), transparent 70%),
  linear-gradient(180deg, #3c86d6 0%, #9cc8ef 36%, #dcebf6 47%, #8b97ab 47.5%, #5b4f8f 60%, #3f3a73 70%, #2a7d3e 70.4%, #3e9a4c 86%, #2f8a41 100%); }
.tp .fondo::before { content: ""; position: absolute; left: 0; right: 0; top: 48%; height: 21%; background: radial-gradient(circle, rgba(255, 255, 255, .5) 0 1.5px, transparent 2px) 0 0 / 9px 7px, radial-gradient(circle, rgba(255, 210, 63, .45) 0 1.5px, transparent 2px) 4px 3px / 11px 9px; opacity: .8; }
.tp .app { position: fixed; inset: 0; z-index: 1; overflow: hidden; isolation: isolate; container-type: size; container-name: marco; background: #3c86d6; 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) {
  .tp .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 #e9edf3, 0 0 0 7px var(--led-fondo), 0 0 0 9px var(--equipo), 0 30px 90px rgba(5, 10, 25, .5); }
}
.tp:not(.is-showcase) .fondo { filter: blur(6px); }
.tp.is-showcase .fondo { display: none; }
.tp.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.tp .stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tp .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.tp .gl.is-on { opacity: 1; }
.tp .sin-gl .stage { background: url("../assets/poster/fondo-estadio.webp") center / cover no-repeat, linear-gradient(180deg, #3c86d6, #dcebf6 45%, #2f8a41 46%); }
.tp .ui { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.tp .ui > * { pointer-events: auto; }

/* ---------- panel de LED (fondo de puntos de luz) ---------- */
.tp .led-panel { position: relative; border-radius: 16px; color: var(--led-blanco); background: var(--puntos), linear-gradient(180deg, var(--led-fondo-2), var(--led-fondo)); border: 3px solid #05070c;
  box-shadow: inset 0 0 0 2px var(--led-borde), inset 0 0 22px rgba(0, 0, 0, .65), 0 8px 0 rgba(5, 7, 12, .55), 0 18px 40px rgba(5, 10, 25, .45); }
.tp .led-panel::after { content: ""; position: absolute; inset: 0; border-radius: 13px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 40%); }
.tp .led-k { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font: 900 15px/1 var(--f-led); letter-spacing: .02em; color: var(--led-ambar); text-shadow: 0 0 8px rgba(255, 201, 60, .7); text-transform: uppercase; }
.tp .led-punto { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--equipo-2); box-shadow: 0 0 10px 2px var(--equipo-2); animation: tp-parpadea 1.2s steps(1) infinite; }
.tp .led-punto + span + .led-punto { animation-delay: -.6s; background: var(--equipo); box-shadow: 0 0 10px 2px var(--equipo); }
@keyframes tp-parpadea { 50% { opacity: .25; } }

/* ---------- botones: placas de cancha (pasto rayado con su línea de gis) ---------- */
.tp .pc {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border: 0; border-radius: 12px; color: #ffffff; text-decoration: none; cursor: pointer; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .1)), var(--rayas);
  box-shadow: inset 0 0 0 2px var(--pasto-o), 0 4px 0 var(--pasto-o), 0 8px 16px rgba(5, 25, 12, .3);
  font: 800 17px/1.05 var(--f-letrero); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(5, 40, 18, .8);
  transition: transform .12s ease, box-shadow .12s ease; touch-action: manipulation; user-select: none;
}
/* la línea de gis: blanca, un poco irregular */
.tp .pc::before { content: ""; position: absolute; inset: 5px; z-index: -1; border-radius: 8px; border: 2px solid rgba(255, 255, 255, .92); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .35), inset 0 0 0 .5px rgba(255, 255, 255, .3); pointer-events: none;
  -webkit-mask: radial-gradient(circle at 20% 30%, #000 0 60%, rgba(0, 0, 0, .75) 61%) 0 0 / 7px 5px; mask: radial-gradient(circle at 20% 30%, #000 0 60%, rgba(0, 0, 0, .75) 61%) 0 0 / 7px 5px; }
.tp .pc:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--pasto-o), 0 1px 0 var(--pasto-o); }
.tp .pc .bi { display: inline-flex; flex: none; filter: drop-shadow(0 2px 0 rgba(5, 40, 18, .7)); }
.tp .pc .bt { min-width: 0; }
.tp .pc.is-blanco { color: var(--tinta); text-shadow: none; background: linear-gradient(180deg, #ffffff, #e8ece6); box-shadow: inset 0 0 0 2px #b9c4b5, 0 4px 0 #8e9a8a, 0 8px 16px rgba(5, 25, 12, .2); }
.tp .pc.is-blanco::before { border-color: rgba(28, 122, 60, .85); }
.tp .pc.is-blanco .bi { filter: none; color: var(--pasto-1); }
.tp .pc.is-amarilla { color: var(--tinta); text-shadow: none; background: linear-gradient(180deg, #ffe45a, var(--amarilla)); box-shadow: inset 0 0 0 2px var(--amarilla-o), 0 4px 0 var(--amarilla-o); }
.tp .pc.is-amarilla::before { border-color: rgba(18, 23, 34, .7); }
.tp .pc.is-amarilla .bi { filter: none; }
.tp .pc.is-wa { color: #06301a; text-shadow: none; background: linear-gradient(180deg, #4be38a, var(--wa)); box-shadow: inset 0 0 0 2px #138a44, 0 4px 0 #138a44; }
.tp .pc.is-wa::before { border-color: rgba(6, 48, 26, .55); }
.tp .pc.is-wa .bi { filter: none; }
.tp .pc.is-chico { min-height: 44px; padding: 0 14px; font-size: 15px; border-radius: 10px; }
.tp .pc.is-chico::before { inset: 4px; border-radius: 7px; }
.tp .pc.is-grande { min-height: 60px; font-size: 21px; border-radius: 14px; }
.tp .pc.is-grande::before { inset: 6px; border-radius: 9px; }
.tp .pc.is-bloque { width: 100%; }
/* auto-avance de la tarjeta (sólo si nadie ha tocado nada): barra de gis que se llena */
.tp .pc.is-cuenta::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 9px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .9); transform-origin: left; animation: tp-cuenta var(--dur, 11s) linear both; }
@keyframes tp-cuenta { from { transform: scaleX(0); } }
.tp .icono-btn { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 3px solid #05070c; border-radius: 14px; cursor: pointer; color: var(--led-ambar);
  background: var(--puntos), linear-gradient(180deg, var(--led-fondo-2), var(--led-fondo)); box-shadow: inset 0 0 0 2px var(--led-borde), 0 4px 0 rgba(5, 7, 12, .6); filter: drop-shadow(0 0 0 transparent); }
.tp .icono-btn svg { filter: drop-shadow(0 0 4px rgba(255, 201, 60, .65)); }
.tp .icono-btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--led-borde), 0 1px 0 rgba(5, 7, 12, .6); }
.tp .enlace { border: 0; background: none; padding: 10px 6px; min-height: 44px; font: 700 16px var(--f-texto); color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- HUD: el marcador de goles ---------- */
.tp .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; }
.tp .hud > * { pointer-events: auto; }
.tp .marcador { position: relative; margin: 0; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 3px; padding: 6px 14px 7px; border-radius: 14px;
  background: var(--puntos), linear-gradient(180deg, var(--led-fondo-2), var(--led-fondo)); border: 3px solid #05070c; box-shadow: inset 0 0 0 2px var(--led-borde), 0 4px 0 rgba(5, 7, 12, .6); color: var(--led-blanco); }
.tp .mc-k { font: 900 13px/1 var(--f-led); letter-spacing: .04em; color: var(--led-cian); text-shadow: 0 0 6px rgba(143, 232, 255, .7); text-transform: uppercase; }
.tp .mc-n { grid-row: span 2; display: flex; align-items: baseline; gap: 1px; }
.tp .mc-n b { font: 900 34px/1 var(--f-led); color: var(--led-ambar); text-shadow: 0 0 10px rgba(255, 201, 60, .75); }
.tp .mc-n small { font: 900 18px/1 var(--f-led); color: var(--led-ambar-2); opacity: .8; }
.tp .mc-balones { display: flex; gap: 3px; }
.tp .mc-balones i { display: inline-grid; color: #3a4762; }
.tp .mc-balones i.is-on { color: var(--led-ambar); filter: drop-shadow(0 0 4px rgba(255, 201, 60, .9)); }
.tp .marcador.is-pop { animation: tp-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tp-pop { 40% { transform: scale(1.16); } }
.tp .hud.is-intro .marcador, .tp [data-fase="recorrido"] .marcador, .tp [data-fase="cumple"] .marcador { visibility: hidden; }
.tp [data-fase="recorrido"] .hud-datos, .tp [data-fase="cumple"] .hud-datos, .tp [data-fase="final-pelicula"] .hud-datos { visibility: hidden; }

/* ---------- avisos ---------- */
.tp .aviso { position: absolute; left: 50%; top: calc(var(--safe-t) + 80px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: 88cqw; padding: 10px 16px; border-radius: 12px; background: var(--amarilla); color: var(--tinta); font: 700 16px/1.3 var(--f-texto); box-shadow: 0 4px 0 var(--amarilla-o); z-index: 60; }
.tp .aviso.is-out { opacity: 0; transition: opacity .3s; }
.tp .aviso-luz { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--verde); }
.tp .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; }

/* ---------- ESTADIO: la pantalla del silbato ---------- */
.tp .intro { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: calc(var(--safe-t) + 74px) 14px calc(var(--safe-b) + 14px); pointer-events: none; transition: opacity .45s ease;
  background: linear-gradient(180deg, transparent 40%, rgba(7, 11, 20, .35) 100%); }
.tp .intro > * { pointer-events: auto; }
.tp .intro.is-out { opacity: 0; pointer-events: none; }
.tp .intro-panel { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 16px 14px; text-align: center; animation: tp-entra .6s .2s cubic-bezier(.25, 1.4, .5, 1) both; }
@keyframes tp-entra { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.tp .intro-t { margin: 0; font: 800 clamp(26px, 8.6cqw, 34px)/1.02 var(--f-letrero); text-transform: uppercase; letter-spacing: .01em; color: var(--led-ambar); text-wrap: balance; text-shadow: 0 0 14px rgba(255, 201, 60, .55); }
.tp .intro-msg { margin: 0; font: 600 16px/1.38 var(--f-texto); color: var(--led-blanco); text-wrap: pretty; }
.tp .intro-sub { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(143, 232, 255, .12); font: 700 14px/1.3 var(--f-texto); color: var(--led-cian); }
.tp .pc.is-inicio { min-height: 64px; font-size: 24px; animation: tp-respira 1.8s ease-in-out infinite; }
.tp .pc.is-inicio .bi { animation: tp-silba 1.8s ease-in-out infinite; transform-origin: 30% 60%; }
@keyframes tp-respira { 50% { transform: scale(1.025); } }
@keyframes tp-silba { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(10deg); } }
.tp .intro-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; margin-top: -4px; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }

/* ---------- recorrido: "Saltar" ---------- */
.tp .saltar-btn { position: absolute; right: 12px; bottom: calc(var(--safe-b) + 16px); }

/* ---------- aviso grande de LED (misión, ¡gol!, ¡casi!) ---------- */
.tp .banner-led { position: absolute; left: 50%; top: calc(var(--safe-t) + 78px); z-index: 25; width: max-content; max-width: calc(100cqw - 28px); margin: 0; padding: 10px 18px 11px; border-radius: 12px; pointer-events: none !important; text-align: center;
  background: var(--puntos), linear-gradient(180deg, var(--led-fondo-2), var(--led-fondo)); border: 3px solid #05070c; box-shadow: inset 0 0 0 2px var(--led-borde), 0 10px 26px rgba(5, 10, 25, .45);
  font: 800 clamp(20px, 6.4cqw, 26px)/1.08 var(--f-letrero); text-transform: uppercase; letter-spacing: .02em; color: var(--led-ambar); text-shadow: 0 0 12px rgba(255, 201, 60, .7); text-wrap: balance;
  opacity: 0; transform: translate(-50%, -14px); transition: opacity .3s, transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.tp .banner-led.is-on { opacity: 1; transform: translate(-50%, 0); }
.tp .banner-led.is-mision { top: calc(var(--safe-t) + 22cqh); font-size: clamp(24px, 8cqw, 32px); padding: 14px 18px; }
.tp .banner-led.is-gol { font: 900 clamp(30px, 11cqw, 46px)/1 var(--f-led); color: var(--led-ambar); animation: tp-led-gol .3s steps(1) 5; }
.tp .banner-led.is-casi { color: var(--led-cian); text-shadow: 0 0 12px rgba(143, 232, 255, .7); }
@keyframes tp-led-gol { 50% { color: var(--led-blanco); } }

/* ---------- juego ---------- */
.tp .guia { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none !important; transition: opacity .5s; }
.tp .guia.is-sale { opacity: 0; }
.tp .pista { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 72px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: 92cqw; margin: 0; padding: 9px 16px 9px 10px; border-radius: 12px;
  background: var(--puntos), linear-gradient(180deg, var(--led-fondo-2), var(--led-fondo)); border: 2px solid #05070c; box-shadow: inset 0 0 0 2px var(--led-borde); color: var(--led-blanco); font: 700 16px/1.3 var(--f-texto); opacity: 0; transition: opacity .35s; pointer-events: none !important; }
.tp .pista.is-on { opacity: 1; }
.tp .pista-ic { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; color: var(--led-ambar); background: rgba(255, 201, 60, .12); }
.tp .ctl-juego { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 14px); transform: translateX(-50%); }
.tp .con-tarjeta .ctl-juego, .tp .con-tarjeta .pista { visibility: hidden; }
/* esquinas de la portería (alternativa accesible): botones sobre la boca de la portería */
.tp .zonas { position: absolute; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; padding: 0; opacity: 0; pointer-events: none !important; transition: opacity .25s; }
.tp .zonas.is-on, .tp .zonas:focus-within { opacity: 1; pointer-events: auto !important; }
.tp .zona { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 2.5px dashed rgba(255, 255, 255, .95); border-radius: 10px; background: rgba(7, 11, 20, .38); color: #ffffff; cursor: pointer; }
.tp .zona span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 201, 60, .95); color: var(--tinta); box-shadow: 0 0 12px rgba(255, 201, 60, .7); }
.tp .zona:hover, .tp .zona:focus-visible { background: rgba(255, 201, 60, .3); }
/* manita: muestra el gesto (desde el balón hacia la portería), dejando una línea de gis */
.tp .mano { position: absolute; inset: 0; pointer-events: none !important; opacity: 0; transition: opacity .3s; }
.tp .mano.is-on { opacity: 1; }
.tp .mano-ic { position: absolute; left: 0; top: 0; color: #ffffff; filter: drop-shadow(0 3px 0 rgba(7, 11, 20, .8)) drop-shadow(0 0 8px rgba(0, 0, 0, .4)); transform: translate(calc(var(--x0) - 14px), calc(var(--y0) + 6px)); }
.tp .mano.is-on .mano-ic { animation: tp-mano 2.4s ease-in-out infinite; }
@keyframes tp-mano { 0%, 12% { transform: translate(calc(var(--x0) - 14px), calc(var(--y0) + 6px)) scale(1); } 20% { transform: translate(calc(var(--x0) - 14px), calc(var(--y0) + 6px)) scale(.86); } 62%, 72% { transform: translate(calc(var(--x1) - 14px), calc(var(--y1) + 6px)) scale(.86); opacity: 1; } 90%, 100% { transform: translate(calc(var(--x1) - 14px), calc(var(--y1) + 6px)) scale(1); opacity: 0; } }
.tp .mano-gis { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px rgba(7, 11, 20, .5); transform: translate(var(--x0), var(--y0)); opacity: 0; }
.tp .mano.is-on .mano-gis { animation: tp-gis 2.4s ease-in-out infinite; }
@keyframes tp-gis { 0%, 18% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(.6); } 25% { opacity: 1; } 62% { opacity: 1; transform: translate(var(--x1), var(--y1)) scale(1.2); } 80%, 100% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(1.8); } }

/* ---------- barrido de LED entre penales (oculta el corte de cámara) ---------- */
.tp .barrido { position: absolute; inset: 0; z-index: 40; display: flex; pointer-events: none !important; visibility: hidden; }
.tp .barrido span { flex: 1; transform: translateX(-102%); }
.tp .barrido span:nth-child(1) { background: var(--puntos), var(--equipo); }
.tp .barrido span:nth-child(2) { background: var(--puntos), linear-gradient(180deg, var(--led-fondo-2), var(--led-fondo)); }
.tp .barrido span:nth-child(3) { background: var(--puntos), var(--equipo-2); }
.tp .barrido.is-on { visibility: visible; }
.tp .barrido.is-on span { animation: tp-barre .76s cubic-bezier(.65, 0, .35, 1) both; }
.tp .barrido.is-on span:nth-child(2) { animation-delay: .04s; } .tp .barrido.is-on span:nth-child(3) { animation-delay: .08s; }
@keyframes tp-barre { 0% { transform: translateX(-104%); } 42%, 52% { transform: translateX(0); } 100% { transform: translateX(104%); } }

/* ---------- ¡cumple! ---------- */
.tp .cumple { position: absolute; left: 0; right: 0; top: 50cqh; display: flex; justify-content: center; padding: 0 14px; pointer-events: none !important; animation: tp-entra .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.tp .cumple-panel { width: min(100%, 390px); padding: 14px 16px 16px; text-align: center; }
.tp .cumple-t { margin: 6px 0 0; text-wrap: balance; font: 900 clamp(38px, 13cqw, 54px)/.98 var(--f-led); color: var(--led-ambar); text-shadow: 0 0 16px rgba(255, 201, 60, .8); }
/* (nombres largos, p. ej. "¡Maximiliano cumple 7!": la letra de LED es ancha y se salía del panel) */
.tp .cumple-t.is-largo { font-size: clamp(28px, 9cqw, 40px); }
.tp .fin-t.is-largo { font-size: clamp(24px, 7cqw, 30px); }
.tp .cumple-s { margin: 8px 0 0; font: 700 18px/1.3 var(--f-texto); color: var(--led-blanco); }

/* ---------- final: resumen, lugar y confirmación ---------- */
.tp .fin { position: absolute; left: 10px; right: 10px; bottom: calc(var(--safe-b) + 10px); max-height: 52cqh; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: stretch; gap: 9px; padding: 14px 14px 6px; border-radius: 20px; text-align: center;
  color: var(--led-blanco); background: var(--puntos), linear-gradient(180deg, var(--led-fondo-2), var(--led-fondo)); border: 3px solid #05070c; box-shadow: inset 0 0 0 2px var(--led-borde), 0 8px 0 rgba(5, 7, 12, .55), 0 18px 40px rgba(5, 10, 25, .45); animation: tp-sube .6s .1s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes tp-sube { from { opacity: 0; transform: translateY(40px); } }
.tp .fin-k { margin: 0; font: 900 14px/1.2 var(--f-led); color: var(--led-cian); text-transform: uppercase; text-shadow: 0 0 6px rgba(143, 232, 255, .6); }
.tp .fin-t { margin: 0; font: 900 clamp(28px, 8.6cqw, 36px)/1 var(--f-led); color: var(--led-ambar); text-shadow: 0 0 12px rgba(255, 201, 60, .7); text-wrap: balance; }
.tp .fin-linea { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 8px; margin: -2px 0 0; font: 700 17px/1.3 var(--f-texto); }
.tp .fin-sep { color: var(--led-ambar); }
.tp .fin-lugar { border-radius: 14px; padding: 2px 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 2px var(--led-borde); text-align: left; }
.tp .fin-lugar[open] { padding-bottom: 10px; }
.tp .fin-lugar summary { display: flex; align-items: center; gap: 8px; min-height: 46px; font: 700 17px var(--f-texto); cursor: pointer; list-style: none; }
.tp .fin-lugar summary::-webkit-details-marker { display: none; }
.tp .fin-vermapa { margin-left: auto; padding: 4px 10px; border-radius: 8px; background: var(--led-ambar); color: var(--tinta); font: 800 14px var(--f-letrero); text-transform: uppercase; }
.tp .fin-lugar[open] .fin-vermapa { display: none; }
.tp .fin-salon { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp .fin-lugar .lugar-dir { margin: 6px 0; color: #d7deec; }
.tp .fin-lugar .lugar-nombre { color: var(--led-blanco); }
.tp .fin-links { display: flex; justify-content: center; gap: 14px; margin-top: -4px; }
.tp .fin-links .enlace { color: var(--led-ambar-2); }

/* ---------- vitrina ---------- */
.tp .is-vitrina .ui > :not(.vitrina-t) { display: none; }
.tp .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; }
.tp .vitrina-t span { padding: 8px 22px 10px; border-radius: 14px; background: var(--puntos), linear-gradient(180deg, var(--led-fondo-2), var(--led-fondo)); border: 3px solid #05070c; box-shadow: inset 0 0 0 2px var(--led-borde); font: 800 clamp(26px, 5.5cqw, 64px)/1 var(--f-letrero); text-transform: uppercase; color: var(--led-ambar); text-shadow: 0 0 14px rgba(255, 201, 60, .7); }
.tp .vitrina-t small { padding: 5px 16px; border-radius: 10px; background: var(--amarilla); font: 800 clamp(15px, 2.4cqw, 28px)/1.2 var(--f-letrero); text-transform: uppercase; color: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  .tp *, .tp *::before, .tp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
  .tp .pc.is-cuenta::after { animation-duration: var(--dur, 11s) !important; }
  .tp .mano.is-on .mano-ic, .tp .mano.is-on .mano-gis { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
}
.tp.rm *, .tp.rm *::before, .tp.rm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
.tp.rm .pc.is-cuenta::after { animation-duration: var(--dur, 11s) !important; }