/* EL BILLETE CON TU ESTADO (28/09/2026) — la tarjeta que pinta js/estado.js debajo del
   billete. Paleta de la puerta de vota.; el magenta de miembro solo en la old school; el
   rojo, solo para la cuenta que se queda inactiva (lo único que se pierde de verdad). */

.ts { margin: 14px 0 0; background: #fff; border: 1.5px solid rgb(47 36 24 / 16%); border-radius: 6px; overflow: hidden; animation: ts-entra .35s ease-out both; }
@keyframes ts-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ts { animation: none; } }

.ts__arriba { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1.5px dashed rgb(47 36 24 / 18%); }
.ts__si { color: #1f7a43; }
.ts__no { color: #bd3227; }
.ts__arriba b { display: block; font: 900 20px/1.15 'Poppins', sans-serif; letter-spacing: -.02em; }
.ts__arriba > div > span { display: block; color: #3d3d3d; font-size: 15px; line-height: 1.4; margin-top: 3px; }
.ts__marca { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font: 900 17px/1 Roboto, sans-serif; color: #fff; }
.ts__marca svg { width: 18px; height: 18px; }
.ts__si .ts__marca { background: #1f7a43; }
.ts__no .ts__marca { background: #bd3227; }

.ts__quien { display: flex; align-items: center; gap: 14px; padding: 16px 14px 18px; }
.ts__quien p { margin: 0; color: #3d3d3d; font-size: 15px; }
.ts__quien .ts__ayuda { margin: 0 0 10px; font-size: 13px; color: #5b574d; line-height: 1.4; }
.ts__quien .u { display: block; margin: 2px 0 4px; color: #252525; font: 900 20px/1.1 'Poppins', sans-serif; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ts__ava { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; font: 900 24px 'Poppins', sans-serif; color: #fff; background: #5b630c; }
.ts__sn { display: flex; gap: 6px; flex-wrap: wrap; }
.ts__sn button { min-height: 44px; padding: 0 14px; font: 700 13px 'Poppins', sans-serif; border-radius: 4px; cursor: pointer; }
.ts__sn .si { background: #252525; color: #e3e0d7; border: 0; }
.ts__sn .no { background: none; color: #252525; border: 1.5px solid rgb(37 37 37 / 30%); }
.ts__sn button:focus-visible, .ts__cta:focus-visible, .ts__ruta .cta:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

.ts__estado { margin: 0 14px 14px; padding: 12px 13px; border-radius: 4px; background: #eef4e6; border-left: 4px solid #1f7a43; }
.ts__estado.renovar { background: #fdf1fc; border-left-color: #dc00d3; }
.ts__estado.inactiva { background: #fbe9e7; border-left-color: #bd3227; }
.ts__estado b { display: block; font: 900 17px/1.25 'Poppins', sans-serif; letter-spacing: -.02em; }
.ts__estado.inactiva b { color: #bd3227; }
.ts__estado p { margin: 6px 0 0; color: #2f2f2f; font-size: 15px; line-height: 1.5; }
.ts__oldschool { display: inline-block; margin: 0 0 6px; padding: 3px 9px 2px; font: 700 11px/1.1 'Courier New', ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: #a3009c; border: 2px solid currentColor; border-radius: 3px; transform: rotate(-3deg); }
.ts__lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; font-size: 15px; }
.ts__lista li { display: flex; gap: 7px; }
.ts__lista .si { color: #1f7a43; }
.ts__lista .no { color: #bd3227; }
.ts__lista .toca { color: #dc00d3; }

.ts__cta { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin-top: 11px; padding: 0 14px; font: 900 14px 'Poppins', sans-serif; letter-spacing: -.02em; color: #e3e0d7; background: #252525; border: 0; border-radius: 4px; text-decoration: none; cursor: pointer; }
.ts__cta.lima { background: #b9c91c; color: #2e3300; }
.ts__cta:disabled { opacity: .5; cursor: wait; }
.ts__estado.renovar .ts__cta, .ts__cta--dinero { background: #a8009f; color: #fff; }
.ts__cta--fuera { width: calc(100% - 28px); margin: 0 14px 14px; background: none; color: #252525; border: 1.5px solid rgb(37 37 37 / 30%); }

.ts__titulo-ruta { margin: 0 14px 8px; font: 900 14px 'Poppins', sans-serif; letter-spacing: -.02em; }
.ts__ruta { margin: 0 14px 14px; padding: 0; list-style: none; display: grid; gap: 6px; }
.ts__ruta li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 11px 12px; border-radius: 4px; background: rgb(47 36 24 / 4%); font-size: 15px; line-height: 1.45; color: #2f2f2f; }
.ts__ruta li b { display: block; color: #252525; font: 900 15px/1.25 'Poppins', sans-serif; letter-spacing: -.02em; }
.ts__texto { display: block; margin-top: 4px; }
.ts__etiqueta { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; color: #5b574d; }
.ts__etiqueta--obligatoria { display: inline-block; padding: 1px 8px; font-weight: 700; color: #2e3300; background: #e6ed9c; border-radius: 3px; }
.ts__regalo { margin: 0 14px 12px; padding: 10px 12px; font-size: 15px; line-height: 1.45; color: #2f2f2f; background: #fff7e0; border-radius: 4px; }
.ts__regalo--si { background: #eef4e6; font-weight: 700; }
.ts__ruta .n { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font: 900 12px 'Poppins', sans-serif; background: #e3e0d7; color: #6f6b60; }
.ts__ruta li.hecha b { color: #5b574d; }
.ts__ruta li.hecha .n { background: #1f7a43; color: #fff; }
.ts__ruta li.toca { background: #f3f6d9; outline: 2px solid #b9c91c; }
.ts__ruta li.toca .n { background: #b9c91c; color: #2e3300; }
.ts__ruta .cta { display: inline-flex; margin-top: 10px; min-height: 44px; align-items: center; padding: 0 12px; font: 900 13px 'Poppins', sans-serif; color: #2e3300; background: #b9c91c; border: 0; border-radius: 4px; cursor: pointer; }
.ts__ruta .cta--suave { min-height: 44px; margin-top: 8px; font-weight: 700; color: #2f3300; background: #fff; border: 1.5px solid #8a9420; }

.ts__dos { margin: 0 14px 14px; display: grid; gap: 8px; }
.ts__dos > div { padding: 11px 12px; border: 1.5px solid rgb(47 36 24 / 16%); border-radius: 4px; }
.ts__dos b { display: block; font: 900 14px/1.25 'Poppins', sans-serif; letter-spacing: -.02em; margin-bottom: 4px; }
.ts__dos p { margin: 0 0 8px; font-size: 15px; color: #2f2f2f; }
.ts__dos input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 10px; font: 16px Roboto, sans-serif; border: 1.5px solid rgb(47 36 24 / 22%); border-radius: 4px; background: #fff; }
.ts__dos .ok { margin: 8px 0 0; padding: 9px 10px; background: #eef4e6; border-radius: 4px; font-size: 13px; }
.ts__nosoy { margin: 0; padding: 14px; font-size: 15px; color: #2f2f2f; }
.ts__pie { margin: 0; padding: 10px 14px; font-size: 13px; color: #5b574d; background: rgb(47 36 24 / 4%); }

/* SU puerta, encendida; las otras, apagadas (cuando sabemos quién es) */
.pt-pu.es-la-tuya { border-color: #5b630c; box-shadow: inset 4px 0 0 #b9c91c; background: #f3f6d9; }
.pt-pu[aria-disabled="true"] { opacity: .38; cursor: not-allowed; }
.pt-pu .pt-tuya { margin-left: auto; padding: 2px 8px; font: 700 11px Roboto, sans-serif; color: #2e3300; background: #b9c91c; border-radius: 99px; white-space: nowrap; }

/* ── AJUSTES DE LECTURA (28/09/2026) ─────────────────────────────────────────
   Andoni: «ponte en los pies de una madre que quiere comprobar si su correo tiene todo en orden…
   máxima facilidad y accesibilidad». Aquí, y solo aquí, para poder revisarlos y quitarlos juntos:
   · el gris de los textos pasaba justo por debajo del contraste mínimo (4,1:1 sobre el beige): a 5,3:1;
   · la barra de arriba estaba a 7 px: a 9 px, y sus botones con sitio para el dedo;
   · el correo a 16 px (con menos, el iPhone hace zoom solo al tocarlo);
   · lo que dice Tuad en el billete y los textos pequeños, un punto más grandes. */
.pt-sub, .pt-tx span, .pt-atras, .pt-tk__p, .pt-tk__talon, .pt-nohice > span, .pt-osi { color: #5b574d; }
.pt-tx span { font-size: 13.5px; }
.pt-nohice > span { font-size: 14px; }
.pt-barra { font-size: 9px; }
.pt-barra__porque { min-height: 40px; margin: -10px 0; padding: 0 4px; }
.pt-saludo--otro { min-height: 44px; }
.pt-tk__fila input { font-size: 16px; }
.pt-tk__cuerpo p { font-size: 14.5px; color: #3d3d3d; }
.pt-nada b { font-size: 15.5px; }
.pt-nada span span, .pt-nada div span { font-size: 14.5px; color: #3d3d3d; }
.pt-sub { font-size: 15.5px; }


/* ── Revisión del 28/09 («los ojos de una madre», revisor aparte) ─────────────── */
/* votó con un correo sin cuenta: ni verde ni rojo */
.ts__casi { color: #7a4f00; }
.ts__casi .ts__marca { background: #b7791f; }
.ts__fuerte { font-weight: 700; }
/* «¿no eres tú o te equivocaste de correo? mira otro»: un enlace, con sitio para el dedo */
.ts__otro { display: block; width: 100%; min-height: 44px; padding: 10px 14px; font: 500 14px Roboto, sans-serif; color: #3d3d3d; text-decoration: underline; text-underline-offset: 3px; background: rgb(47 36 24 / 4%); border: 0; cursor: pointer; }
.ts__otro:focus-visible { outline: 3px solid #b9c91c; outline-offset: -3px; }
/* la errata, pegada al billete */
.ts--errata .ts__errata { padding: 16px 14px 6px; }
.ts--errata b { display: block; font: 900 19px/1.2 'Poppins', sans-serif; letter-spacing: -.02em; color: #252525; }
.ts--errata p { margin: 6px 0 0; font-size: 15px; color: #3d3d3d; overflow-wrap: anywhere; }
.ts--errata .ts__otro { margin: 6px -14px 0; width: calc(100% + 28px); background: none; }
/* el subrayado rojo de la caja parecía un tachado: debajo de la letra */
.pt-urge u { background: none; text-decoration: underline; text-decoration-color: #d62020; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* «no sé ni qué es esto»: parecía apagado (opacidad .5) */
.pt-saludo--otro { opacity: .85; }
/* «¿por qué?» de la barra, en letra normal y con sitio para el dedo */
.pt-barra__porque { font: 700 12px Roboto, sans-serif; letter-spacing: 0; text-transform: none; }
.ts__hueco { height: 14px; }

/* ── LA PANTALLA ÚNICA (28/09, noche; 2ª vuelta) ─────────────────────────────
   Andoni: «el "déjame ver si tienes el billete" es tan pequeñito… eso es la acción principal»; «el
   cartel negro, demasiado grande»; «lo de que se han unido ya, en morado, estaba muy bien». Así que:
   el billete manda (pregunta grande, campo grande, «Mirar» en lima), y los números van en una línea,
   en la caja rosa de antes. */
.pt-somos { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px; background: rgb(220 0 211 / 7%); border: 1.5px solid rgb(220 0 211 / 30%); border-radius: 6px; }
.pt-somos > b { flex: none; font: 900 36px/1 'Poppins', sans-serif; letter-spacing: -.035em; color: #a3009c; }
.pt-somos > span { font-size: 14.5px; line-height: 1.35; color: #3d3d3d; }
.pt-somos > span b { color: #252525; font-weight: 900; }

/* el billete, protagonista. Y el brillo de la lámina pasa POR DEBAJO de la letra: por encima, la
   pregunta grande se leía teñida de rosa */
.pt-tk__cuerpo { position: relative; z-index: 1; }
.pt-tk__tuad--grande { align-items: flex-start; gap: 10px; margin: 0 0 12px; }
.pt-tk__tuad--grande img { width: 40px; margin-top: 2px; }
.pt-tk__kicker { display: block; margin: 0 0 3px; font: 700 13px Roboto, sans-serif; color: #5b574d; }
.pt-tk__pide { display: block; font: 900 21px/1.15 'Poppins', sans-serif; letter-spacing: -.03em; color: #252525; cursor: text; }
.pt-tk__pide em { font-style: normal; color: #5b630c; }
.pt-tk__fila--grande { gap: 8px; }
.pt-tk__fila--grande input { min-height: 56px; font-size: 17px; background: #fff; border: 2px solid #252525; }
.pt-tk__fila--grande .pt-tk__btn { min-height: 56px; padding: 0 20px; font-size: 16px; background: #b9c91c; color: #2e3300; }
/* «¿no tienes cuenta? empieza aquí», dentro del billete, justo debajo del campo */
.pt-tk__sincuenta { display: block; width: 100%; min-height: 46px; margin: 10px 0 0; padding: 12px 12px; line-height: 1.35; font: 500 15px Roboto, sans-serif; color: #252525; text-align: left; background: rgb(255 255 255 / 70%); border: 1.5px solid rgb(37 37 37 / 22%); border-radius: 4px; cursor: pointer; }
.pt-tk__sincuenta b { font-weight: 900; }
.pt-tk__sincuenta:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }
.pt-tk__ayuda { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 -6px; padding: 0; font: 500 14.5px Roboto, sans-serif; color: #3d3d3d; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pt-tk__ayuda:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }
.pt-tk__ayudatx { margin: 10px 0 0; padding: 10px 12px; background: #fff; border-radius: 4px; border: 1.5px solid rgb(47 36 24 / 14%); }
.pt-tk__cuerpo .pt-tk__ayudatx p { margin: 0 0 6px; font-size: 14.5px; color: #3d3d3d; }
.pt-tk__ayudatx a { display: inline-flex; min-height: 44px; align-items: center; font: 700 14.5px Roboto, sans-serif; color: #252525; text-underline-offset: 3px; }

/* «mira, así de fácil»: el ejemplo animado (js/demo-billete.js) */
.pt-demo { margin: 14px 0 0; }
.pt-demo:empty { min-height: 419px; } /* su sitio, guardado antes de que llegue: que no empuje lo de debajo */
.pt-demo__marco { position: relative; overflow: hidden; padding: 12px 12px 14px; background: rgb(255 255 255 / 55%); border: 1.5px dashed rgb(47 36 24 / 22%); border-radius: 8px; }
.pt-demo__t { margin: 0 0 2px; font: 900 16px 'Poppins', sans-serif; letter-spacing: -.02em; color: #252525; }
.pt-demo__paso { height: 22px; line-height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0 0 10px; font: 700 14.5px Roboto, sans-serif; color: #5b630c; }
.pt-demo__billete { position: relative; display: flex; gap: 6px; }
.pt-demo__campo { flex: 1; display: flex; align-items: center; min-height: 42px; padding: 0 10px; font-size: 15px; color: #252525; background: #fff; border: 2px solid #252525; border-radius: 4px; overflow: hidden; white-space: nowrap; }
.pt-demo__cursor { display: inline-block; width: 2px; height: 18px; margin-left: 1px; background: #252525; animation: pt-demo-cursor 1s steps(1) infinite; }
.pt-demo__btn { display: flex; align-items: center; padding: 0 14px; font: 900 14px 'Poppins', sans-serif; color: #2e3300; background: #b9c91c; border-radius: 4px; transition: transform .12s; }
.pt-demo__dedo { position: absolute; right: 14px; bottom: -34px; font-size: 26px; opacity: 0; transition: opacity .2s, transform .25s; pointer-events: none; }
.pt-demo--pulsa .pt-demo__dedo { opacity: 1; transform: translateY(-22px); }
.pt-demo--pulsa .pt-demo__btn { transform: scale(.94); }
/* el escenario tiene SIEMPRE el mismo alto: si creciera con cada caso, lo de debajo bailaría
   mientras alguien va a pulsarlo. El final (el mapa) lo tapa entero. */
.pt-demo__escena { position: relative; height: 330px; }
.pt-demo__res { position: absolute; inset: 52px 0 auto; }
.pt-demo__res .ts { margin-top: 0; box-shadow: 0 6px 18px rgb(47 36 24 / 12%); }
.pt-demo--res .pt-demo__res > * { animation: ts-entra .35s ease-out both; }
.pt-demo__res .ts__arriba b { font-size: 17px; }
.pt-demo__res .ts__quien { padding: 10px 14px 12px; }
.pt-demo__res .ts__quien .u { font-size: 17px; }
.pt-demo__res .ts__estado { margin: 0 12px 12px; }
.pt-demo__res .pt-nada { margin: 0; }
.pt-demo__res .pt-puertas { margin-top: 8px; }
.pt-demo__fin { position: absolute; inset: 0; display: none; flex-direction: column; gap: 6px; background: #f6f4ee; border-radius: 6px; }
.pt-demo--fin .pt-demo__fin { display: flex; animation: ts-entra .35s ease-out both; }
.pt-demo__cifra { margin: 0; font-size: 14.5px; font-weight: 700; color: #3d3d3d; }
.pt-demo__n { font: 900 30px/1 'Poppins', sans-serif; letter-spacing: -.03em; color: #a3009c; font-variant-numeric: tabular-nums; }
.pt-demo__mapa { flex: 1; min-height: 0; display: flex; justify-content: center; }
.pt-demo__mapa svg { height: 100%; width: auto; max-width: 100%; }
.pt-demo__mapa path { fill: var(--heat-0); stroke: var(--heat-linea); stroke-width: 1.1; stroke-linejoin: round; }
.pt-demo--mapa .pt-demo__mapa path { fill: var(--c); transition: fill .45s ease-out var(--d); }
.pt-demo--mapa .pt-demo__mapa path.is-top { stroke: #252525; stroke-width: 2.4; animation: pt-demo-late 1.2s ease-in-out 1.6s 2; transform-box: fill-box; transform-origin: center; }
@keyframes pt-demo-late { 50% { transform: scale(1.08); } }
.pt-demo__final { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 10px 12px; text-align: center; background: #f3f6d9; border: 2px solid #b9c91c; border-radius: 6px; }
.pt-demo__final b { font: 900 17px/1.2 'Poppins', sans-serif; letter-spacing: -.02em; color: #2e3300; }
.pt-demo__final small { font: 700 14px/1.3 Roboto, sans-serif; color: #3d3d3d; }
/* sin movimiento: el primer caso y el final, quietos y uno debajo de otro */
.pt-demo--quieto .pt-demo__escena { height: auto; }
.pt-demo--quieto .pt-demo__res { position: static; margin-top: 10px; }
.pt-demo--quieto .pt-demo__fin { position: static; display: flex; height: 300px; margin-top: 12px; }
.pt-demo--quieto .pt-demo__cursor { display: none; }
@keyframes pt-demo-cursor { 50% { opacity: 0; } }

/* las dos fechas: el 23 manda */
.pt-fechas { display: grid; gap: 8px; margin: 22px 0 0; }
.pt-fecha { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: start; padding: 12px; background: rgb(255 255 255 / 60%); border: 1.5px solid rgb(47 36 24 / 14%); border-radius: 6px; }
.pt-fecha__dia { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 56px; border-radius: 4px; background: #e3e0d7; color: #252525; }
.pt-fecha__dia b { font: 900 24px/1 'Poppins', sans-serif; letter-spacing: -.02em; }
.pt-fecha__dia small { margin-top: 3px; font: 400 8px 'Press Start 2P', monospace; letter-spacing: .06em; }
.pt-fecha > div > b { display: block; font: 900 16px/1.2 'Poppins', sans-serif; letter-spacing: -.02em; color: #252525; }
.pt-fecha p { margin: 3px 0 0; font-size: 15px; line-height: 1.4; color: #3d3d3d; }
.pt-fecha--grande { background: #fff; border-color: #252525; }
.pt-fecha--grande .pt-fecha__dia { background: #252525; color: #fff; }
.pt-fecha--grande .pt-fecha__dia small { color: #e2dccf; }
.pt-fecha .sus { grid-column: 1 / -1; margin: 2px 0 0; }

/* los números de la casa dentro del texto: en morado, como los subidos */
.ts .num { display: inline; font: inherit; font-weight: 900; letter-spacing: 0; color: #a3009c; }

/* «mientras llega el 23, ya puedes»: adónde ir, a quien su cuenta pasa */
.ts__ya { margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed rgb(47 36 24 / 18%); display: grid; gap: 8px; }
.ts__estado .ts__ya p { margin: 0; font-weight: 700; }
.ts__ir { display: flex; align-items: center; min-height: 46px; padding: 0 14px; font: 700 14.5px Roboto, sans-serif; color: #252525; background: #fff; border: 1.5px solid rgb(37 37 37 / 28%); border-radius: 4px; text-decoration: none; }
.ts__ir:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

/* ── Las fechas, la última vuelta (Andoni: «cosita parpadeante brillante en el directo y
   lanzamiento… entre paréntesis "nuevo"… del 23 al 31, que se vea como última etapa») ── */
.pt-fecha__nuevo { position: relative; display: inline-block; overflow: hidden; margin-left: 2px; padding: 1px 7px; font: 900 12px/1.5 'Poppins', sans-serif; letter-spacing: 0; color: #2e3300; background: #b9c91c; border-radius: 99px; vertical-align: 2px; }
.pt-fecha__nuevo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 85%) 50%, transparent 80%); transform: translateX(-120%); }
.pt-fecha--grande { position: relative; }
.pt-fecha--grande .pt-fecha__dia { position: relative; }
.pt-fecha--grande .pt-fecha__dia::after { content: '✦'; position: absolute; top: -9px; right: -9px; font-size: 16px; color: #b9c91c; text-shadow: 0 0 6px rgb(185 201 28 / 80%); }
@media (prefers-reduced-motion: no-preference) {
	.pt-fecha__nuevo::after { animation: pt-brilla 2.6s ease-in-out infinite; }
	.pt-fecha--grande { animation: pt-late-borde 2.6s ease-in-out infinite; }
	.pt-fecha--grande .pt-fecha__dia::after { animation: pt-chispa 1.3s ease-in-out infinite alternate; }
}
@keyframes pt-brilla { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@keyframes pt-late-borde { 0%, 100% { box-shadow: 0 0 0 0 rgb(185 201 28 / 0%); } 50% { box-shadow: 0 0 0 4px rgb(185 201 28 / 45%); } }
@keyframes pt-chispa { from { opacity: .35; transform: scale(.7) rotate(0deg); } to { opacity: 1; transform: scale(1.15) rotate(45deg); } }
/* del 23 al 31: el último tramo */
.pt-fecha--tramo .pt-fecha__dia { background: #fbe9e7; color: #bd3227; }
.pt-fecha--tramo .pt-fecha__dia b { font-size: 15px; letter-spacing: -.03em; }
.pt-fecha--tramo .pt-fecha__dia small { color: #bd3227; }
.pt-fecha .num { font-weight: 900; color: #a3009c; }

/* ── «Sí, me subo al tren», desde la tarjeta (28/09) ──────────────────────────
   Andoni: «con el mismo correo que acabas de poner: sí, me subo al tren… ya desde ahí». */
.ts__subir { margin-top: 10px; display: grid; gap: 8px; }
.ts__estado .ts__subir-antes { margin: 0; font-size: 14.5px; color: #3d3d3d; }
.ts__estado .ts__correo { margin: 0; padding: 12px; font: 700 16px Roboto, sans-serif; color: #252525; background: #fff; border: 2px solid #252525; border-radius: 4px; overflow-wrap: anywhere; }
.ts__cta--subir { margin-top: 0; min-height: 56px; font-size: 17px; }
.ts__ver-antes { justify-self: start; min-height: 44px; padding: 0; font: 500 14.5px Roboto, sans-serif; color: #3d3d3d; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ts__ver-antes:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }
.ts__subir--hecho { padding: 12px; background: #eef4e6; border-radius: 4px; }
.ts__estado .ts__dentro { color: #1f7a43; font-size: 22px; }
.ts__estado .ts__subir--hecho p { margin: 2px 0 0; }
/* «ver toda la página: te la enseño», el primero de «ya puedes» */
.ts__ir--pagina { width: 100%; font-weight: 900; text-align: left; background: #f3f6d9; border-color: #8a9420; cursor: pointer; }

/* el 23: al calendario y mándaselo a alguien */
.pt-fecha__acc { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 2px; }
.pt-fecha__acc button { min-height: 46px; padding: 0 12px; white-space: nowrap; font: 700 14px Roboto, sans-serif; color: #252525; background: #fff; border: 1.5px solid rgb(37 37 37 / 30%); border-radius: 4px; cursor: pointer; }
.pt-fecha__acc button:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

/* «¿no sabes cuál es tu correo?»: los enlaces de dentro, a la vista */
.pt-tk__ayudatx p a { display: inline; min-height: 0; color: #252525; text-decoration: underline; text-underline-offset: 3px; }

/* ── EL BILLETE DE TREN (28/09) ───────────────────────────────────────────────
   Andoni: «que parezca un billete de tren… y el motion como si se lo tiqueteara». La
   silueta la dibuja js/billete-forma.js (dientes arriba y abajo, muescas en el talón, trazo
   lima gastado); aquí solo se viste lo de dentro, en claro sobre oscuro. */
.pt-tk--forma { position: relative; margin: 18px 0 0; padding: 14px 8px 12px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.pt-tk--forma::after { display: none; }
.pt-tk--forma > svg.billete-forma { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.pt-tk--forma > :not(svg) { position: relative; z-index: 1; }
.pt-tk--forma .pt-tk__ala { padding: 10px 12px 6px; background: none; color: #e3e0d7; font-size: 8px; }
.pt-tk--forma .pt-tk__ala span:last-child { color: #b9c91c; }
.pt-tk--forma .pt-tk__p { color: #b3ad9f; }
.pt-tk--forma .pt-tk__ruta { padding: 8px 12px 0; }
.pt-tk--forma .pt-tk__ruta b { color: #fff; }
.pt-tk--forma .pt-tk__via { border-top-color: rgb(233 228 216 / 30%); }
.pt-tk--forma .pt-tk__via i { background: #1d1c18; }
.pt-tk--forma .pt-tk__cuerpo { padding: 14px 12px 12px; }
.pt-tk--forma .pt-tk__kicker { color: #cfc9bb; }
.pt-tk--forma .pt-tk__pide { color: #fff; }
.pt-tk--forma .pt-tk__pide em { color: #cfdb3a; }
.pt-tk--forma .pt-tk__tuad p { color: #e3e0d7; }
.pt-tk--forma .pt-tk__tuad p b { color: #fff; }
.pt-tk--forma .pt-tk__fila--grande input { border-color: #fff; }
.pt-tk--forma .pt-tk__fila input:focus-visible { border-color: #b9c91c; outline-color: rgb(185 201 28 / 60%); }
.pt-tk--forma .pt-tk__aviso { color: #dfe98a; }
.pt-tk--forma .pt-tk__sincuenta { color: #fff; background: rgb(255 255 255 / 8%); border-color: rgb(233 228 216 / 35%); }
.pt-tk--forma .pt-tk__ayuda { color: #e3e0d7; }
.pt-tk--forma .pt-tk__corte { height: 18px; background: none; border: 0; }
.pt-tk--forma .pt-tk__talon { padding: 10px 14px 14px; background: none; color: #b3ad9f; font-size: 7px; }
.pt-tk--forma .pt-tk__talon b { color: #b9c91c; }

/* el revisor pica el billete: el agujero, y el trocito de papel que cae */
.billete-agujero--anima { animation: bf-pica .32s cubic-bezier(.2, 1.8, .4, 1) .15s both; }
.billete-confeti { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
	.billete-confeti { animation: bf-cae 1.1s cubic-bezier(.4, 0, .9, .6) .25s both; transform-box: fill-box; transform-origin: center; }
}
@keyframes bf-pica { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes bf-cae { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(14px, 90px) rotate(160deg) scale(.8); } }

/* ya tiqueteado: «¡tiqueteado!» y, al lado, los sellos (tinta lima de tampón, torcidos, borde doble) */
.pt-tk__sellada { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 0 0 12px; }
.pt-tk__sellada img { width: 40px; }
.pt-tk__sellada b { display: block; font: 900 24px/1.05 'Poppins', sans-serif; letter-spacing: -.03em; color: #fff; }
.pt-tk__sellos { display: flex; flex-direction: column; align-items: center; gap: 0; padding-right: 2px; }
.pt-tk__sellos .pt-sello--ficha { margin: -6px 0 -4px 26px; }
.pt-sello { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 9px 5px; font: 400 10px/1 'Press Start 2P', monospace; letter-spacing: .04em; text-transform: uppercase; color: #cfdb3a; border: 3px double #cfdb3a; border-radius: 6px; pointer-events: none; white-space: nowrap; }
.pt-sello small { margin-top: 5px; font-size: 7px; letter-spacing: .08em; opacity: .9; }
.pt-sello--subido { transform: rotate(-10deg); }
.pt-sello--ficha { width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 7px; transform: rotate(10deg); background: #1d1c18; }
/* el agujero del revisor va donde ponía «parada 2» */
.pt-tk--picado .pt-tk__talon b { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.pt-sello--anima { animation: bf-sello .42s cubic-bezier(.2, 1.5, .35, 1) .55s both; }
	.pt-sello--ficha.pt-sello--anima { animation-delay: .95s; }
}
@keyframes bf-sello { 0% { opacity: 0; transform: scale(2.4) rotate(-24deg); } 70% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bf-golpe { 30% { transform: translateY(2px); } }

/* el directo en YouTube (28/09: ya tiene hora, 23/10 a las 19:00) */
.pt-fecha__yt { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 12px; font: 700 14px Roboto, sans-serif; color: #fff; background: #252525; border-radius: 4px; text-decoration: none; }
.pt-fecha__yt:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }
.ts__ruta .cta--cal { margin-left: 6px; }

/* ── LA FICHA, EN LA TARJETA (28/09) ──────────────────────────────────────────
   Andoni: «que contesten las preguntas súper ágiles, ahí ya directamente… para hacer
   calendario». Una pregunta por pantalla, botones grandes, un toque por respuesta. */
.ts__ficha { margin-top: 12px; padding: 14px 12px; background: #fff; border: 2px solid #b9c91c; border-radius: 6px; }
.ts__ficha--guardando { opacity: .6; pointer-events: none; }
.ts__ficha-paso { display: block; margin-bottom: 6px; font: 400 8px 'Press Start 2P', monospace; letter-spacing: .06em; text-transform: uppercase; color: #5b630c; }
.ts__estado .ts__ficha-q { display: block; font: 900 20px/1.2 'Poppins', sans-serif; letter-spacing: -.02em; color: #252525; }
.ts__estado .ts__ficha-ayuda { margin: 4px 0 10px; font-size: 14.5px; color: #5b574d; }
.ts__ficha-campo { box-sizing: border-box; width: 100%; min-height: 50px; padding: 0 12px; font: 16px Roboto, sans-serif; color: #252525; background: #fff; border: 2px solid #252525; border-radius: 4px; }
.ts__ficha-campo:focus-visible { outline: 3px solid rgb(185 201 28 / 60%); outline-offset: 0; }
.ts__ficha-campo--largo { min-height: 96px; padding: 10px 12px; resize: vertical; }
.ts__ficha-ops { display: grid; gap: 8px; margin-top: 10px; }
.ts__ficha-ops--dos { grid-template-columns: 1fr 1fr; }
.ts__ficha-op { min-height: 50px; padding: 8px 10px; font: 700 15px Roboto, sans-serif; color: #252525; text-align: left; background: #f6f4ee; border: 1.5px solid rgb(37 37 37 / 22%); border-radius: 6px; cursor: pointer; }
.ts__ficha-ops--dos .ts__ficha-op { text-align: center; }
.ts__ficha-op:hover { background: #f3f6d9; }
.ts__ficha-op:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }
.ts__ficha-op.es-elegida { background: #b9c91c; color: #2e3300; border-color: #8a9420; }
.ts__ficha-op--libre { background: none; border-style: dashed; font-weight: 500; }
.ts__ficha-extra:not(:empty) { margin-top: 10px; }
.ts__ficha .ts__cta { margin-top: 12px; }
.ts__ficha-vale p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; color: #2f2f2f; }
.ts__ficha-vale p b { color: #1f7a43; }
.ts__estado .ts__ficha-falla { color: #7a4f00; font-size: 13.5px; }
.ts__ficha-vale .ts__ver-antes { display: block; margin: 6px auto 0; }
.ts__ficha-fin { display: grid; gap: 6px; }
.ts__ficha-fin p { margin: 0 0 4px; }
.ts__ficha-fin .ts__ir { width: 100%; text-align: left; cursor: pointer; }