/* El Tapete de la Ciudad — interfaz propia de cuaderno y juguete: hojas de cuaderno con renglones y la orilla recortada a
   mano (clip-path que arma ui/papel.js), etiquetas de cinta adhesiva, subrayados y flechas de crayón, contador de
   calcomanías y botones como fichas de cartón (con su canto y el corrugado). Todo medido contra el marco (.app es
   contenedor de tamaño: cqw/cqh), nunca contra la ventana. Contraste de textos ≥ 4.5:1. */
.tc {
  --tinta: #2B2340; --tinta-2: #554A6E; --papel: #FFFBF1; --papel-2: #FFF3DA; --renglon: #CFE0F5; --margen: #F2A3A3;
  --carton: #E7BC84; --carton-2: #C9965A; --carton-3: #8F6232; --carton-texto: #3B2410;
  --amarillo: #FFD44D; --amarillo-2: #F2B21B; --rojo: #C93A26; --azul: #2F6FD6; --verde: #2E7D4F; --rosa: #E2508C; --wa: #25D366;
  --cinta: rgba(255, 231, 160, .82); --sombra: 0 10px 24px rgba(59, 36, 16, .22);
  --f-titulo: "Sniglet", "Nunito", system-ui, sans-serif; --f-mano: "Patrick Hand", "Nunito", system-ui, sans-serif; --f-texto: "Nunito", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  -webkit-text-size-adjust: 100%;
}
.tc, .tc body { margin: 0; height: 100%; background: #8A6A4A; color: var(--tinta); font-family: var(--f-texto); }
.tc *, .tc *::before, .tc *::after { box-sizing: border-box; }
.tc button { font: inherit; color: inherit; }
.tc .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; }

/* ---------- marco: en celular, toda la pantalla; en computadora y tableta, el marco de teléfono ---------- */
.tc .fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 50% at 30% 20%, #F5D7A1 0%, rgba(245, 215, 161, 0) 70%), repeating-linear-gradient(90deg, #B98552 0 90px, #A9773F 90px 92px, #C08D5A 92px 180px, #A9773F 180px 182px); }
.tc .fondo::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(560px, 80vw); height: min(980px, 92vh); transform: translate(-50%, -50%) rotate(-4deg); background: #EFE2C4; border: 18px solid #2F5EA8; border-radius: 10px; filter: blur(10px); opacity: .55; }
.tc .app { position: fixed; inset: 0; z-index: 1; overflow: hidden; isolation: isolate; container-type: size; container-name: marco; background: #B98552; transition: opacity .5s ease; }
@media (min-width: 560px) and (min-height: 560px) {
  .tc .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 4px #FFFBF1, 0 0 0 9px var(--carton-3), 0 30px 90px rgba(40, 20, 5, .5); }
}
.tc.is-showcase .fondo { display: none; }
.tc.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.tc .stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair; }
.tc .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s ease; }
.tc .gl.is-on { opacity: 1; }
.tc .ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.tc .ui > * { pointer-events: auto; }
.tc .sin-gl .stage { background: #EFE2C4 url("../assets/poster/fondo-tapete.webp") center / cover no-repeat; }

/* ---------- fichas de cartón (botones) ---------- */
.tc .ficha { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 18px; border: 0; border-radius: 16px 13px 15px 12px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .0) 0 5px, rgba(143, 98, 50, .1) 5px 6px), linear-gradient(180deg, #F0CB97, var(--carton));
  color: var(--carton-texto); font: 800 17px/1.15 var(--f-texto); text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(143, 98, 50, .35), 0 3px 0 var(--carton-2), 0 6px 0 var(--carton-3), 0 9px 14px rgba(59, 36, 16, .25);
  transition: transform .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent; }
.tc .ficha:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px rgba(143, 98, 50, .35), 0 1px 0 var(--carton-2), 0 2px 0 var(--carton-3), 0 3px 6px rgba(59, 36, 16, .2); }
.tc .ficha:focus-visible, .tc .tc-foco:focus-visible, .tc input:focus-visible, .tc textarea:focus-visible, .tc summary:focus-visible { outline: 4px solid var(--azul); outline-offset: 3px; }
.tc .ficha .bi { display: inline-flex; flex: none; }
.tc .ficha.is-primary { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 5px, rgba(160, 110, 0, .1) 5px 6px), linear-gradient(180deg, #FFE27A, var(--amarillo)); color: var(--tinta);
  box-shadow: inset 0 0 0 2px rgba(160, 110, 0, .35), 0 3px 0 #D9A21A, 0 6px 0 #A8770C, 0 9px 16px rgba(59, 36, 16, .3); }
.tc .ficha.is-primary:active { box-shadow: inset 0 0 0 2px rgba(160, 110, 0, .35), 0 1px 0 #D9A21A, 0 2px 0 #A8770C, 0 3px 6px rgba(59, 36, 16, .2); }
.tc .ficha.is-wa { background: linear-gradient(180deg, #5BE38E, var(--wa)); color: #0E2E1A; box-shadow: inset 0 0 0 2px rgba(0, 80, 30, .25), 0 3px 0 #1CA552, 0 6px 0 #117238, 0 9px 14px rgba(0, 40, 10, .25); }
.tc .ficha.is-big { min-height: 60px; padding: 10px 22px; font: 400 23px/1.05 var(--f-titulo); border-radius: 20px 16px 19px 15px; }
.tc .ficha.is-block { width: 100%; }
.tc .ficha.is-small { min-height: 44px; padding: 6px 14px; font-size: 15px; }
.tc .ficha.is-redonda { width: 52px; height: 52px; min-height: 52px; padding: 0; border-radius: 50%; }
.tc .enlace { min-height: 44px; padding: 8px 10px; border: 0; background: none; font: 800 16px var(--f-texto); color: var(--tinta); text-decoration: underline; text-decoration-color: var(--rosa); text-decoration-thickness: 3px; text-underline-offset: 4px; cursor: pointer; }

/* ---------- papel de cuaderno, cinta y crayón ---------- */
.tc .papel { position: relative; background: linear-gradient(90deg, transparent 0 30px, var(--margen) 30px 32px, transparent 32px), repeating-linear-gradient(180deg, var(--papel) 0 29px, var(--renglon) 29px 31px); background-color: var(--papel); color: var(--tinta); }
.tc .papel-liso { background: var(--papel); }
.tc .cinta { position: absolute; left: 50%; top: 2px; z-index: 2; width: 110px; height: 20px; transform: translateX(-50%) rotate(-2deg); background: var(--cinta);
  clip-path: polygon(0 8%, 6% 0, 10% 12%, 15% 2%, 85% 4%, 90% 0, 95% 10%, 100% 4%, 98% 90%, 92% 100%, 88% 88%, 82% 98%, 12% 96%, 8% 100%, 3% 90%, 0 100%); opacity: .95; }
.tc .etiqueta-cinta { display: inline-block; padding: 4px 14px 5px; background: var(--cinta); font: 700 15px/1.1 var(--f-mano); letter-spacing: .02em; color: var(--tinta); transform: rotate(-2deg);
  clip-path: polygon(0 10%, 4% 0, 96% 6%, 100% 0, 98% 92%, 100% 100%, 3% 96%, 0 100%); }
.tc .subrayado { position: relative; display: inline-block; z-index: 0; }
.tc .subrayado::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -6px; height: 12px; z-index: -1; opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7c30-4 60-3 92-2s70 2 104-3' stroke='%23FFD44D' stroke-width='6' fill='none' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M6 9c40-2 80-3 120-1s50 1 70-2' stroke='%23F2B21B' stroke-width='3' fill='none' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.tc .subrayado.is-rosa::after { filter: hue-rotate(-60deg) saturate(1.4); }

/* ---------- interfaz fija (arriba) ---------- */
.tc .hud { position: absolute; left: 0; right: 0; top: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: calc(var(--safe-t) + 12px) 12px 0; pointer-events: none !important; }
.tc .hud > * { pointer-events: auto; }
.tc .hud .ficha.is-redonda { color: var(--carton-texto); }
.tc .hud.is-intro .calcomanias { visibility: hidden; }
.tc .calcomanias { display: flex; align-items: center; gap: 2px; padding: 5px 8px 5px 6px; border-radius: 30px; background: var(--papel); box-shadow: 0 3px 0 rgba(143, 98, 50, .5), 0 8px 16px rgba(59, 36, 16, .25); }
.tc .calco { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 2px dashed #C9B48F; display: grid; place-items: center; }
.tc .calco svg { width: 30px; height: 30px; opacity: 0; transform: scale(.4) rotate(-30deg); }
.tc .calco.is-pegada { border: 3px solid #fff; background: var(--c); box-shadow: 0 2px 4px rgba(59, 36, 16, .35); }
.tc .calco.is-pegada svg { opacity: 1; transform: none; animation: tc-calco .55s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes tc-calco { from { opacity: 0; transform: scale(1.8) rotate(25deg); } }
.tc .calco-n { margin-left: 4px; font: 400 17px var(--f-titulo); color: var(--tinta); white-space: nowrap; }

/* ---------- portada ---------- */
.tc .portada { position: absolute; left: 14px; right: 14px; top: calc(var(--safe-t) + 13cqh); z-index: 15; padding: 30px 18px 18px 44px; border-radius: 6px; box-shadow: var(--sombra);
  transform: rotate(-1.2deg); animation: tc-hoja .7s cubic-bezier(.2, 1.3, .4, 1) both; text-align: left; }
@keyframes tc-hoja { from { opacity: 0; transform: translateY(-30px) rotate(-6deg) scale(.9); } }
.tc .portada.is-out { animation: tc-hoja-sale .45s ease-in both; pointer-events: none !important; }
@keyframes tc-hoja-sale { to { opacity: 0; transform: translateY(-40px) rotate(4deg) scale(.92); } }
.tc .portada-k { margin: 0 0 4px; font: 700 18px/1.2 var(--f-mano); color: var(--tinta-2); }
.tc .portada-t { margin: 0; font: 800 clamp(30px, 9.6cqw, 40px)/1.08 var(--f-titulo); color: var(--tinta); text-wrap: balance; }
.tc .portada-s { margin: 12px 0 18px; font: 700 17px/1.35 var(--f-texto); color: var(--tinta-2); }
.tc .portada-acciones { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.tc .portada-acciones .enlace { align-self: center; }
.tc .portada-coche { position: absolute; right: 10px; top: -22px; width: 92px; transform: rotate(8deg); filter: drop-shadow(0 6px 6px rgba(59, 36, 16, .3)); }

/* ---------- nota de la misión (abajo) ---------- */
.tc .nota { position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 12px); z-index: 14; padding: 28px 16px 12px 46px; border-radius: 4px; box-shadow: var(--sombra); transform: rotate(.6deg);
  animation: tc-nota .5s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes tc-nota { from { opacity: 0; transform: translateY(30px) rotate(3deg); } }
.tc .nota-t { margin: 0; font: 400 clamp(20px, 6.2cqw, 24px)/1.15 var(--f-titulo); color: var(--tinta); text-wrap: balance; }
.tc .nota-s { margin: 4px 0 0; font: 700 18px/1.25 var(--f-mano); color: var(--tinta-2); }
.tc .nota-acciones { display: flex; justify-content: flex-end; margin-top: 4px; }
.tc .nota-ic { position: absolute; left: 8px; top: 26px; width: 30px; height: 30px; }
.tc .nota.is-casi { background-color: #FFF3DA; }

/* ---------- etiquetas sobre el tapete (vehículo y destino) ---------- */
.tc .etq { position: absolute; left: 0; top: 0; z-index: 10; pointer-events: none !important; will-change: transform; transition: opacity .3s; }
.tc .etq.is-off { opacity: 0; }
.tc .etq > span { position: absolute; left: 0; bottom: 10px; transform: translate(-50%, 0); white-space: nowrap; }
.tc .etq-veh > span { padding: 4px 12px 5px; border-radius: 999px; background: #fff; border: 3px solid var(--c); font: 400 16px/1 var(--f-titulo); color: var(--tinta); box-shadow: 0 3px 6px rgba(59, 36, 16, .3); animation: tc-flota 1.6s ease-in-out infinite; }
.tc .etq-dest > span { padding: 5px 14px 6px; background: var(--cinta); font: 700 17px/1 var(--f-mano); color: var(--tinta); transform: translate(-50%, 0) rotate(-3deg);
  clip-path: polygon(0 10%, 4% 0, 96% 6%, 100% 0, 98% 92%, 100% 100%, 3% 96%, 0 100%); }
.tc .etq-dest > span::before { content: "★ "; color: var(--rojo); }
@keyframes tc-flota { 50% { transform: translate(-50%, -5px); } }

/* calcomanía "¡Llegó!" sobre el destino */
.tc .llego { position: absolute; left: 0; top: 0; z-index: 24; pointer-events: none !important; }
.tc .llego > span { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 8px 16px 8px 10px; border-radius: 999px; background: #fff; border: 4px solid var(--c);
  font: 800 25px/1 var(--f-titulo); color: var(--tinta); white-space: nowrap; box-shadow: 0 6px 14px rgba(59, 36, 16, .3); animation: tc-llego 1.9s cubic-bezier(.2, 1, .3, 1) both; }
.tc .llego i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--c); }
.tc .llego i svg { width: 32px; height: 26px; }
@keyframes tc-llego { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-22deg); } 16% { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(5deg); } 26% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); } 82% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); } 100% { opacity: 0; transform: translate(-50%, -90%) scale(.92) rotate(-4deg); } }
.tc.rm .llego > span { animation: none; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) { .tc .llego > span { animation: none; transform: translate(-50%, -50%); } }

/* flechita de crayón ("¡ya casi!") */
.tc .flecha { position: absolute; left: 0; top: 0; z-index: 11; width: 86px; height: 86px; margin: -43px 0 0 -43px; pointer-events: none !important; will-change: transform; }
.tc .flecha svg { width: 100%; height: 100%; animation: tc-empuja .9s ease-in-out infinite; }
@keyframes tc-empuja { 50% { transform: translateX(10px); } }

/* manita de ayuda que dibuja el camino */
.tc .ayuda { position: absolute; inset: 0; z-index: 12; pointer-events: none !important; }
.tc .ayuda svg.ayuda-linea { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tc .ayuda-mano { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -6px 0 0 -10px; offset-rotate: 0deg; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); }
.tc .lapiz { position: absolute; left: 0; top: 0; z-index: 13; width: 54px; height: 54px; margin: -50px 0 0 -6px; pointer-events: none !important; will-change: transform; opacity: 0; transition: opacity .15s; }
.tc .lapiz.is-on { opacity: 1; }

/* ---------- tarjeta de cada destino ---------- */
.tc .tarjeta { position: absolute; left: 10px; right: 10px; bottom: calc(var(--safe-b) + 10px); z-index: 30; max-height: 74cqh; overflow: auto; overscroll-behavior: contain; padding: 30px 18px 16px 46px; box-shadow: var(--sombra);
  transform: translateY(120%) rotate(2deg); transition: transform .55s cubic-bezier(.2, 1.15, .4, 1); }
.tc .tarjeta.is-in { transform: translateY(0) rotate(-.6deg); }
.tc .tarjeta.is-out { transform: translateY(120%) rotate(-3deg); transition-duration: .35s; transition-timing-function: ease-in; pointer-events: none !important; }
.tc .tj-k { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.tc .tj-calco { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 3px solid #fff; background: var(--c); display: grid; place-items: center; box-shadow: 0 2px 4px rgba(59, 36, 16, .35); transform: rotate(-8deg); }
.tc .tj-calco svg { width: 30px; height: 30px; }
.tc .tj-t { margin: 2px 0 12px; font: 800 clamp(25px, 7.6cqw, 31px)/1.1 var(--f-titulo); letter-spacing: .01em; color: var(--tinta); }
.tc .tj-t:focus { outline: none; }
.tc .tj-cuerpo { display: flex; flex-direction: column; gap: 12px; }
.tc .tj-seguir { margin-top: 14px; }
.tc .dato-grande { position: relative; padding: 12px 14px 14px; border-radius: 8px; background: #fff; border: 2px solid #E9D9B8; text-align: center; transform: rotate(-.8deg); box-shadow: 0 3px 0 #E9D9B8; }
.tc .dg-k { margin: 0; font: 700 20px/1.1 var(--f-mano); color: var(--tinta-2); }
.tc .dg-v { margin: 2px 0; font: 800 clamp(30px, 10cqw, 40px)/1.05 var(--f-titulo); color: var(--tinta); }
.tc .dg-s { margin: 0; font: 800 16px/1.2 var(--f-texto); color: var(--tinta-2); }
.tc .chip { align-self: center; margin: 0; padding: 6px 14px; border-radius: 999px; background: #B8336A; color: #fff; font: 800 16px/1.2 var(--f-texto); transform: rotate(-2deg); box-shadow: 0 3px 0 #A8305F; }
.tc .chip.is-azul { background: var(--azul); box-shadow: 0 3px 0 #1D4E9E; }
.tc .acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.tc .acciones > * { flex: 1 1 140px; }
.tc .itinerario { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tc .itinerario li { display: flex; gap: 10px; align-items: baseline; font: 800 16px/1.3 var(--f-texto); }
.tc .it-hora { flex: none; min-width: 74px; font: 700 19px/1.1 var(--f-mano); color: var(--rojo); }
.tc .mensaje { margin: 0; padding: 14px 16px; border-radius: 4px; background: #FFF7CF; font: 400 23px/1.3 var(--f-mano); color: var(--tinta); transform: rotate(-1deg); box-shadow: 0 6px 12px rgba(59, 36, 16, .18); }
.tc .mensaje footer { margin-top: 6px; font: 700 18px var(--f-mano); color: var(--tinta-2); text-align: right; }
.tc .mapa { border-radius: 10px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(59, 36, 16, .25); transform: rotate(.8deg); }
.tc .mapa svg { display: block; width: 100%; height: auto; }
.tc .lugar-nombre { margin: 0; font: 800 22px/1.15 var(--f-titulo); }
.tc .lugar-dir { margin: -6px 0 0; font: 700 16px/1.35 var(--f-texto); color: var(--tinta-2); }
.tc .anfitriones { margin: 0; font: 800 clamp(26px, 8cqw, 32px)/1.15 var(--f-titulo); color: var(--tinta); text-align: center; }
.tc .anfitriones-k { margin: 0; font: 700 20px/1.2 var(--f-mano); color: var(--tinta-2); text-align: center; }

/* ---------- ¡cumple! y final ---------- */
.tc .cumple { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 7cqh); z-index: 16; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 18px; text-align: center; pointer-events: none !important; animation: tc-cumple .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes tc-cumple { from { opacity: 0; transform: scale(.6) rotate(-6deg); } }
.tc .cumple-t { margin: 0; padding: 10px 22px 14px; background: var(--papel); border-radius: 6px; font: 800 clamp(36px, 12cqw, 52px)/1.02 var(--f-titulo); color: var(--tinta); box-shadow: var(--sombra); transform: rotate(-2deg); text-wrap: balance; }
.tc .cumple-s { margin: 0; padding: 6px 16px; background: var(--cinta); font: 700 20px/1.25 var(--f-mano); color: var(--tinta); transform: rotate(1.5deg); text-wrap: balance; }
.tc .fin { position: absolute; left: 10px; right: 10px; bottom: calc(var(--safe-b) + 10px); z-index: 18; max-height: 58cqh; overflow: auto; overscroll-behavior: contain; padding: 26px 16px 12px 44px; box-shadow: var(--sombra); transform: rotate(-.5deg); animation: tc-nota .6s .1s cubic-bezier(.2, 1.2, .4, 1) both; }
.tc .fin-t { margin: 0; font: 800 clamp(26px, 8.4cqw, 32px)/1.05 var(--f-titulo); text-wrap: balance; }
.tc .fin-linea { display: flex; flex-wrap: wrap; column-gap: 12px; margin: 6px 0 8px; font: 800 17px/1.3 var(--f-texto); color: var(--tinta-2); }
.tc .fin-lugar { margin: 0 0 12px; }
.tc .fin-lugar summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font: 800 18px/1.2 var(--f-texto); list-style: none; }
.tc .fin-lugar summary::-webkit-details-marker { display: none; }
.tc .fin-lugar summary small { margin-left: auto; font: 700 17px var(--f-mano); color: var(--azul); text-decoration: underline; }
.tc .fin-lugar[open] summary small { visibility: hidden; }
.tc .fin-lugar > :not(summary) { margin-top: 10px; }
.tc .fin-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; margin-top: 8px; }

/* ---------- avisos ---------- */
.tc .toast { position: absolute; left: 50%; top: calc(var(--safe-t) + 78px); transform: translateX(-50%) rotate(-1deg); z-index: 60; max-width: 88cqw; padding: 10px 18px; background: var(--cinta); color: var(--tinta); font: 700 19px/1.25 var(--f-mano); text-align: center; box-shadow: 0 6px 12px rgba(59, 36, 16, .2); }
.tc .toast.is-out { opacity: 0; transition: opacity .3s; }
.tc .noscript { position: fixed; inset: auto 16px 16px; z-index: 99; padding: 14px; background: var(--papel); border-radius: 8px; font: 700 16px/1.4 var(--f-texto); }
.tc .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, .55); color: #fff; font: 12px ui-monospace, monospace; z-index: 80; pointer-events: none; }
.tc .vitrina-t { position: absolute; left: 50%; top: 6%; transform: translateX(-50%) rotate(-2deg); margin: 0; padding: 10px 24px 12px; background: var(--papel); border-radius: 6px; box-shadow: var(--sombra); font: 800 clamp(26px, 5vw, 46px)/1 var(--f-titulo); text-align: center; white-space: nowrap; }
.tc .vitrina-t small { display: block; margin-top: 4px; font: 700 .55em var(--f-mano); color: var(--tinta-2); }

/* ---------- movimiento reducido ---------- */
.tc.rm .etq-veh > span, .tc.rm .flecha svg, .tc.rm .portada, .tc.rm .nota, .tc.rm .cumple, .tc.rm .fin, .tc.rm .calco.is-pegada svg { animation: none !important; }
.tc.rm .tarjeta { transition-duration: .01s; }
@media (prefers-reduced-motion: reduce) {
  .tc .etq-veh > span, .tc .flecha svg, .tc .portada, .tc .nota, .tc .cumple, .tc .fin, .tc .calco.is-pegada svg { animation: none !important; }
  .tc .tarjeta { transition-duration: .01s; }
}