/* La puerta: lo primero que se ve. Ver js/puerta.js para el porqué.
   Paleta y tipos, los de la web — no se inventa nada. */

#puerta {
	background: #e3e0d7;
	inset: 0;
	overflow-y: auto;
	position: fixed;
	z-index: 60;
}

.pt-caja {
	margin: 0 auto;
	max-width: 560px;
	padding: 34px 18px 40px;
}

.pt-saludo {
	color: #252525;
	font-size: 32px;
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1;
	margin: 0 0 8px;
}

.pt-saludo em {
	color: #5b630c;
	font-style: normal;
}

.pt-sub {
	color: #6f6b60;
	font-size: 14.5px;
	margin: 0 0 22px;
}

.pt-puertas {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.pt-pu {
	align-items: center;
	background: none;
	border: 1.5px solid rgb(37 37 37 / 16%);
	border-radius: 14px;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 12px;
	min-height: 60px;
	padding: 14px 15px;
	text-align: left;
	width: 100%;
}

.pt-pu:hover { border-color: #5b630c; }
.pt-pu:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

.pt-ic { flex: none; font-size: 22px; line-height: 1; }
.pt-tx { flex: 1; }
.pt-tx b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.15; }
.pt-tx span { color: #6f6b60; display: block; font-size: 12.5px; margin-top: 2px; }
.pt-fl { color: #9d9d9d; flex: none; font-size: 20px; }

.pt-atras {
	background: none;
	border: 0;
	color: #6f6b60;
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	margin: 0 0 14px;
	padding: 6px 0;
}

.pt-atras:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

/* El vídeo es HORIZONTAL. 16:9 y de borde a borde de la caja. */
.pt-video {
	aspect-ratio: 16 / 9;
	background: #252525;
	border-radius: 13px;
	margin: 0 0 16px;
	overflow: hidden;
	position: relative;
}

.pt-video iframe { border: 0; height: 100%; width: 100%; }

.pt-video--vacio {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
}

.pt-play {
	align-items: center;
	background: #b9c91c;
	border-radius: 50%;
	color: #2e3300;
	display: flex;
	font-size: 18px;
	height: 52px;
	justify-content: center;
	width: 52px;
}

.pt-vtit {
	color: #e3e0d7;
	font-size: 13px;
	padding: 0 20px;
	text-align: center;
}

.pt-dur {
	background: rgb(0 0 0 / 45%);
	border-radius: 5px;
	bottom: 8px;
	color: #e3e0d7;
	font-size: 10px;
	letter-spacing: 0.06em;
	padding: 2px 6px;
	position: absolute;
	right: 9px;
}

.pt-frase {
	color: #252525;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.16;
	margin: 0 0 10px;
}

.pt-linea {
	color: #252525;
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 22px;
}

.pt-cta { display: flex; flex-direction: column; gap: 9px; }

.pt-btn {
	background: #b9c91c;
	border: 0;
	border-radius: 999px;
	color: #2e3300;
	cursor: pointer;
	display: block;
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	min-height: 52px;
	padding: 15px;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

.pt-btn--sec {
	background: none;
	border: 1.5px solid rgb(37 37 37 / 16%);
	color: #252525;
	font-size: 14px;
	font-weight: 500;
	min-height: 46px;
	padding: 12px;
}

.pt-btn:focus-visible { outline: 3px solid #252525; outline-offset: 2px; }

@media (min-width: 600px) {
	.pt-caja { padding-top: 56px; }
	.pt-saludo { font-size: 40px; }

	/* El segundo titular acompaña al primero cuando éste crece. */
	.pt-saludo--otro {
		font-size: 28px;
	}
}

/* ── EL PANEL — hecho para que le hagan una foto ──────────────────────────
   Ver js/panel.js. Cabe en una pantalla, sin scroll interno y sin menús. */

#panel[hidden] { display: none; }

/* Va detrás de #app, y ahí el fondo de la estación final lo tapaba. Con su
   propia capa y su fondo se ve siempre, esté donde esté en la página. */
#panel {
	background: #f1f1f1;
	padding: 26px 0 34px;
	position: relative;
	z-index: 3;
}

.pn {
	background: #e3e0d7;
	border: 2px solid #252525;
	margin: 0 16px 26px;
	padding: 15px 15px 17px;
}

.pn-cab {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
}

.pn-cab b {
	color: #6f6b60;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pn-gordo {
	color: #252525;
	font-size: 42px;
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 0.9;
	margin: 0 0 4px;
}

.pn-gordo small {
	color: #6f6b60;
	display: block;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.13em;
	margin-top: 7px;
	text-transform: uppercase;
}

.pn-rot {
	color: #5b630c;
	font-size: 10px;
	letter-spacing: 0.14em;
	margin: 15px 0 8px;
	text-transform: uppercase;
}

.pn-fila {
	align-items: center;
	display: grid;
	gap: 8px;
	grid-template-columns: 82px 1fr 28px 12px;
	margin: 0 0 5px;
}

.pn-fila i { color: #6f6b60; font-size: 11.5px; font-style: normal; text-align: right; }
.pn-fila u { background: #b9c91c; border-radius: 2px; display: block; height: 15px; min-width: 3px; text-decoration: none; }
.pn-fila s { font-size: 13px; font-weight: 800; text-align: right; text-decoration: none; }
.pn-fila--mia i { color: #252525; font-weight: 700; }
.pn-fila--mia u { box-shadow: 0 0 0 2px #252525; }

.pn-casi { color: #6f6b60; font-size: 12px; line-height: 1.55; margin: 0; }

.pn-remate {
	border-top: 1px solid rgb(37 37 37 / 16%);
	font-size: 13.5px;
	line-height: 1.45;
	margin-top: 13px;
	padding-top: 12px;
}

.pn-remate b { color: #5b630c; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  LAS DOS PESTAÑAS DE RESULTADOS                            ║
   ╚══════════════════════════════════════════════════════════╝

   Lo que hay ahora (abierta por defecto) y lo que se vivió. Las filas del
   panel reusan los estilos .pn-* de aquí arriba tal cual: es el mismo objeto,
   sólo que ahora vive dentro de la página en vez de al final del todo. */

.res-tabs {
	display: flex;
	gap: 6px;
	margin: 0 0 16px;
	padding: 4px;
	background: rgb(47 36 24 / 6%);
	border-radius: 14px;
}

.res-tabs button {
	align-items: center;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	flex: 1;
	font-family: inherit;
	font-size: 13.5px;
	gap: 7px;
	justify-content: center;
	letter-spacing: -0.02em;
	min-height: 44px;
	padding: 8px 10px;
	transition: background .18s ease, color .18s ease;
}

.res-tabs button:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

/* El «recién abierto» se queda puesto también en la pestaña activa: como
   entra abierta por defecto, esconderlo ahí era no enseñarlo nunca — y es
   justo el aviso de que esto se acaba de desbloquear. En la otra se apaga. */
.res-nuevo {
	background: #b9c91c;
	border-radius: 999px;
	color: #2e3300;
	font-size: 8px;
	font-weight: 900;
	letter-spacing: 0.06em;
	padding: 3px 6px;
	text-transform: uppercase;
	white-space: nowrap;
}

.res-tabs button[aria-selected="false"] .res-nuevo { opacity: .5; }

/* Tuad explicando cómo se lee el panel. Habla y se calla. */
.res-tuad {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	margin-top: 14px;
	padding: 0 2px;
}

.res-tuad img { flex: none; width: 46px; height: auto; }
.res-tuad p { color: #5c5c5c; font-size: 13px; line-height: 1.5; margin: 0 0 6px; }
.res-tuad p:last-child { margin-bottom: 0; }
.res-tuad b { color: #252525; font-weight: 900; }
.res-mia b { color: #dc00d3; }

/* Ni el candado ni el aviso son un error: son dos formas de decir la verdad. */
.res-candado,
.res-aviso {
	background: rgb(47 36 24 / 5%);
	border: 1px dashed rgb(47 36 24 / 22%);
	border-radius: 16px;
	padding: 26px 20px;
	text-align: center;
}

.res-candado__e { font-size: 34px; margin: 0 0 10px; }

.res-candado__t {
	font-family: 'Poppins', sans-serif;
	font-size: 21px;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1.1;
	margin: 0 0 8px;
}

.res-candado__x,
.res-aviso p {
	color: #5c5c5c;
	font-size: 13.5px;
	line-height: 1.55;
	margin: 0 auto;
	max-width: 34ch;
}

.res-aviso p { margin-bottom: 8px; }
.res-aviso p:last-child { margin-bottom: 0; }
.res-aviso b { color: #252525; }

/* La única cosa que queda donde estaban las diez preguntas. */
.res-otra-vez {
	align-items: center;
	background: none;
	border: 1.5px solid rgb(47 36 24 / 18%);
	border-radius: 4px;
	color: #5c5c5c;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	letter-spacing: -0.02em;
	margin: 0 auto;
	min-height: 48px;
	padding: 0 20px;
}

.res-otra-vez:hover { border-color: #5b630c; color: #252525; }
.res-otra-vez:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

/* Cinturón y tirantes: si aún así entra un nombre larguísimo, que no parta la
   fila en dos. El nombre entero sigue estando en el title. */
.pn-fila i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La cabecera pegajosa mide unos 40px. Sin este margen, el botón «ya puedes
   ver el resultado» deja las pestañas medio tapadas justo al llegar. */
[data-screen-label="resultados"] { scroll-margin-top: 64px; }

/* 11,5px era el tamaño de cuando el panel vivía al final y nadie lo miraba.
   Ahora es lo primero que se ve y lo que se fotografía: sube a 12,5. */
.pn-fila i { font-size: 12.5px; }

/* ── LA PUERTA DEL QUE NO TIENE CUENTA ──────────────────────────────────────
   Ocupa el sitio del vídeo. No es un hueco esperando material: es el encargo,
   y por eso tiene el mismo peso visual que tendría el vídeo. */
.pt-cuenta {
	background: rgb(185 201 28 / 12%);
	border: 1.5px solid rgb(185 201 28 / 45%);
	border-radius: 14px;
	margin-bottom: 14px;
	padding: 22px 18px;
	text-align: center;
}

.pt-cuenta__e { display: block; font-size: 32px; margin-bottom: 10px; }

.pt-cuenta__t {
	font-family: 'Poppins', sans-serif;
	font-size: 19px;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1.1;
	margin: 0 0 9px;
}

.pt-cuenta__x {
	color: #5c5c5c;
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0 auto 6px;
	max-width: 32ch;
}

.pt-cuenta__x:last-child { margin-bottom: 0; }
.pt-cuenta__x b { color: #252525; font-weight: 900; }

/* ── EL PANEL, POR PROVINCIAS ───────────────────────────────────────────────
   La fila es la provincia; los pueblos viven dentro y sólo salen si los pides.
   Antes Madrid ocupaba diecinueve filas y ninguna decía que son 153 personas. */
.pn-grupo { margin-bottom: 5px; }

.pn-ver {
	background: none;
	border: 0;
	color: #5b630c;
	cursor: pointer;
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 1px 0 0 86px;
	min-height: 28px;
	padding: 0;
	text-decoration: underline;
}

.pn-ver:hover { color: #252525; }
.pn-ver:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

.pn-dentro {
	border-left: 2px solid rgb(37 37 37 / 14%);
	margin: 4px 0 10px 86px;
	padding-left: 10px;
}

.pn-sitio {
	align-items: baseline;
	display: grid;
	font-size: 12px;
	gap: 7px;
	grid-template-columns: 9px 1fr auto;
	margin-bottom: 3px;
}

.pn-sitio__m { font-size: 9px; line-height: 1.4; }
.pn-sitio__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-sitio b { font-variant-numeric: tabular-nums; font-weight: 800; }

.pn-nota {
	color: #9d9d9d;
	font-size: 10px;
	line-height: 1.4;
	margin: 7px 0 0;
}


/* La fila que se abre. Es un <button>, así que hay que quitarle lo de botón:
   lo único que la delata es el chevrón y que el cursor cambia. */
.pn-fila--abrible {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	min-height: 26px;
	padding: 2px 0;
	text-align: inherit;
	width: 100%;
}

.pn-fila--abrible:hover i { color: #252525; }
.pn-fila--abrible:hover .pn-chev { color: #5b630c; }
.pn-fila--abrible:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

.pn-chev {
	color: #9d9d9d;
	font-size: 12px;
	line-height: 1;
	text-align: center;
}

/* El desplegable ya no necesita el margen del botón viejo. */
.pn-dentro { margin-left: 90px; }

/* ── EL BILLETE DE LA ENTRADA ───────────────────────────────────────────────
   Lo primero que se ve. Quien ya votó pone su correo y entra directo a los
   resultados; sólo quien no consta tiene que decir quién es.

   La lámina va ENTERA y no sólo en una banda: la regla del 29/8 dice que la
   holográfica completa es para cuando el billete es el protagonista, y aquí lo
   es — es la primera y casi la única acción de la pantalla. */
.pt-tk {
	background: #e3e0d7;
	border: 1.5px solid #252525;
	border-radius: 15px;
	box-shadow: 0 4px 0 rgb(47 36 24 / 16%);
	margin: 18px 0 0;
	overflow: hidden;
	position: relative;
}

.pt-tk::after {
	animation: pt-lamina 5.2s cubic-bezier(.4, 0, .2, 1) 1s infinite;
	background: linear-gradient(104deg, transparent 30%, rgb(255 255 255 / 34%) 42%,
		rgb(220 0 211 / 16%) 50%, rgb(255 255 255 / 34%) 58%, transparent 70%);
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(-105%);
}

@keyframes pt-lamina { 0% { transform: translateX(-105%); } 52%, 100% { transform: translateX(115%); } }
@media (prefers-reduced-motion: reduce) { .pt-tk::after { animation: none; opacity: .25; transform: none; } }

.pt-tk__ala {
	align-items: center;
	background: #252525;
	color: #e3e0d7;
	display: flex;
	font-family: 'Press Start 2P', monospace;
	font-size: 7px;
	gap: 10px;
	justify-content: space-between;
	letter-spacing: 0.1em;
	padding: 9px 12px;
	text-transform: uppercase;
}

.pt-tk__ala span:last-child { color: #b9c91c; }

.pt-tk__ruta {
	align-items: center;
	display: grid;
	gap: 9px;
	grid-template-columns: auto 1fr auto;
	padding: 13px 14px 0;
}

.pt-tk__p {
	color: #6f6b60;
	display: block;
	font-family: 'Press Start 2P', monospace;
	font-size: 6.5px;
	letter-spacing: 0.1em;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.pt-tk__ruta b {
	font-family: 'Poppins', sans-serif;
	font-size: 17px;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
}

.pt-tk__via { border-top: 1.5px dashed rgb(47 36 24 / 22%); height: 1px; position: relative; }

.pt-tk__via i {
	background: #e3e0d7;
	font-size: 14px;
	font-style: normal;
	left: 50%;
	padding: 0 4px;
	position: absolute;
	top: -10px;
	transform: translateX(-50%) scaleX(-1);
}

.pt-tk__cuerpo { padding: 14px; }
.pt-tk__cuerpo p { color: #5c5c5c; font-size: 13px; line-height: 1.45; margin: 0 0 11px; }
.pt-tk__cuerpo p b { color: #252525; font-weight: 900; }
.pt-tk__fila { display: flex; gap: 6px; }

.pt-tk__fila input {
	background: rgb(47 36 24 / 5%);
	border: 1.5px solid rgb(47 36 24 / 18%);
	border-radius: 4px;
	color: #252525;
	flex: 1;
	font: inherit;
	font-size: 15px;
	min-height: 46px;
	min-width: 0;
	padding: 0 12px;
}

.pt-tk__fila input:focus-visible { border-color: #5b630c; outline: 3px solid rgb(185 201 28 / 45%); outline-offset: 0; }

.pt-tk__btn {
	background: #252525;
	border: 0;
	border-radius: 4px;
	color: #e3e0d7;
	cursor: pointer;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: -0.02em;
	min-height: 46px;
	padding: 0 18px;
	white-space: nowrap;
}

.pt-tk__btn:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

/* El aviso NUNCA en rojo de error: casi siempre es un dedo que ha bailado. */
.pt-tk__aviso { color: #5b630c; font-size: 12.5px; line-height: 1.45; margin: 10px 0 0; }

.pt-tk__corte {
	background: radial-gradient(circle at 6px 50%, #d5d0c1 3px, transparent 3.2px) 0 0 / 12px 12px repeat-x;
	border-bottom: 1px solid rgb(47 36 24 / 16%);
	border-top: 1px solid rgb(47 36 24 / 16%);
	height: 11px;
}

.pt-tk__talon {
	align-items: center;
	background: rgb(47 36 24 / 5%);
	color: #6f6b60;
	display: flex;
	font-family: 'Press Start 2P', monospace;
	font-size: 6.5px;
	gap: 10px;
	justify-content: space-between;
	letter-spacing: 0.08em;
	padding: 10px 13px;
	text-transform: uppercase;
}

.pt-tk__talon b { color: #5b630c; }

.pt-link {
	background: none;
	border: 0;
	color: #5c5c5c;
	cursor: pointer;
	display: block;
	font: inherit;
	font-size: 13.5px;
	margin: 16px auto 0;
	min-height: 44px;
	padding: 0 12px;
	text-decoration: underline;
}

.pt-link:hover { color: #252525; }
.pt-link:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

.pt-uy { font-size: 30px; line-height: 1; margin: 0 0 8px; }

/* ── LAS TRES PREGUNTAS, BAJO EL VÍDEO ──────────────────────────────────────
   Cerradas y en gris: no compiten con el botón, que es lo que hay que tocar.
   Son tres como mucho, y cada puerta enseña sólo las suyas. */
.pt-preg { border-top: 1px solid rgb(47 36 24 / 12%); margin-top: 20px; }
.pt-preg__x { border-bottom: 1px solid rgb(47 36 24 / 12%); }

.pt-preg__q {
	align-items: center;
	background: none;
	border: 0;
	color: #5c5c5c;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 13.5px;
	gap: 12px;
	justify-content: space-between;
	line-height: 1.4;
	min-height: 48px;
	padding: 10px 2px;
	text-align: left;
	width: 100%;
}

.pt-preg__q:hover { color: #252525; }
.pt-preg__q:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }
.pt-preg__q[aria-expanded="true"] { color: #252525; font-weight: 700; }

.pt-preg__q i {
	color: #5b630c;
	flex: none;
	font-size: 17px;
	font-style: normal;
	line-height: 1;
}

.pt-preg__a {
	color: #5c5c5c;
	font-size: 13.5px;
	line-height: 1.6;
	margin: 0 0 14px;
	padding-right: 22px;
}

.pt-preg__a b { color: #252525; font-weight: 900; }

.pt-remate {
	color: #5c5c5c;
	font-size: 13px;
	line-height: 1.55;
	margin: 18px 0 0;
	text-align: center;
}

.pt-remate b { color: #252525; font-weight: 900; }

/* ── LA BARRA DE ARRIBA DE LA PUERTA ────────────────────────────────────────
   Sale en todas las pantallas. Es el único número que se ve sin haber hecho
   nada: dice que hay gente, no dice dónde. Lo de dónde se paga contestando. */
.pt-barra {
	align-items: center;
	background: #2f2418;
	color: rgb(255 253 247 / 72%);
	display: flex;
	font-family: 'Press Start 2P', monospace;
	font-size: 7px;
	gap: 12px;
	justify-content: space-between;
	letter-spacing: 0.06em;
	line-height: 1.6;
	padding: 11px 16px calc(11px + env(safe-area-inset-top));
	position: sticky;
	text-transform: uppercase;
	top: 0;
	z-index: 2;
}

.pt-barra b { color: #b9c91c; }

/* ── LOS GOLPES DE DATO ─────────────────────────────────────────────────────
   Debajo del botón, no encima: quien ya lo tiene claro no baja hasta aquí.
   Aparecen al entrar en pantalla, uno detrás de otro. */
.pt-datos { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }

.pt-dato {
	border: 1.5px solid rgb(47 36 24 / 14%);
	border-radius: 16px;
	padding: 22px 20px;
	text-align: center;
}

/* ⚠️ Al revés de como se hace normalmente: el bloque nace VISIBLE y sólo se
   esconde si la animación está montada de verdad (`--anim` lo pone el JS
   después de crear el observador). Si el observador no existe, si el
   navegador es raro o si el script se cae, se ven los tres — en vez de
   quedarse tres huecos en blanco ocupando sitio, que es lo que pasaba. */
.pt-datos--anim .pt-dato {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.pt-datos--anim .pt-dato--visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.pt-datos--anim .pt-dato { opacity: 1; transform: none; transition: none; }
}

.pt-dato--lima { background: rgb(185 201 28 / 12%); border-color: rgb(185 201 28 / 40%); }
.pt-dato--ritual { background: rgb(220 0 211 / 8%); border-color: rgb(220 0 211 / 30%); }

.pt-dato__s {
	color: #5b630c;
	font-family: 'Press Start 2P', monospace;
	font-size: 7.5px;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.pt-dato--ritual .pt-dato__s { color: #a3009c; }

.pt-dato__g {
	color: #252525;
	font-family: 'Poppins', sans-serif;
	font-size: 52px;
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	letter-spacing: -0.055em;
	line-height: .88;
	margin: 0;
}

.pt-dato--ritual .pt-dato__g { color: #dc00d3; }

.pt-dato__p {
	color: #5c5c5c;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 10px 0 0;
}

.pt-dato__t {
	color: #252525;
	font-family: 'Poppins', sans-serif;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 1.08;
	margin: 0;
	text-wrap: balance;
}

.pt-dato__n {
	color: #5c5c5c;
	font-size: 13px;
	line-height: 1.55;
	margin: 12px auto 0;
	max-width: 32ch;
}

.pt-dato__n b { color: #252525; font-weight: 900; }

/* Reenviárselo a alguien: lo único que se puede hacer después de votar. */
.pn-compartir {
	align-items: center;
	background: #b9c91c;
	border: 0;
	border-radius: 4px;
	color: #2e3300;
	cursor: pointer;
	display: flex;
	font-family: 'Poppins', sans-serif;
	font-size: 14.5px;
	font-weight: 900;
	justify-content: center;
	letter-spacing: -0.03em;
	line-height: 1.3;
	margin: 14px 0 0;
	min-height: 54px;
	padding: 10px 18px;
	text-align: center;
	width: 100%;
}

.pn-compartir:focus-visible { outline: 3px solid #2f2418; outline-offset: 2px; }

/* El atajo a las preguntas. Va justo debajo del botón grande y en pequeño:
   quien llega decidido no lo mira, y quien llega con una duda lo agradece. */
.pt-atajo {
	background: none;
	border: 0;
	color: #5c5c5c;
	cursor: pointer;
	display: block;
	font: inherit;
	font-size: 13px;
	margin: 12px auto 0;
	min-height: 44px;
	padding: 0 10px;
}

.pt-atajo b { color: #5b630c; font-weight: 900; }
.pt-atajo:hover { color: #252525; }
.pt-atajo:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

/* Un pelín de vida en la tarjeta: la línea de arriba entra un poco antes que
   el resto. Es lo único que se mueve además del número. */
.pt-datos--anim .pt-dato__s { opacity: 0; transition: opacity .45s ease .12s; }
.pt-datos--anim .pt-dato--visto .pt-dato__s { opacity: 1; }

/* ── EL CALENDARIO ──────────────────────────────────────────────────────────
   «Que lo pueda entender una madre y una abuela». Así que no es una tabla ni
   una gráfica: es una frase con un número grande en medio, centrada, con aire.
   Nada de rejillas, nada de leyendas, nada que se parezca a un informe. */
.cal {
	background: rgb(185 201 28 / 12%);
	border: 1.5px solid rgb(185 201 28 / 40%);
	border-radius: 20px;
	margin: 0 0 20px;
	padding: 28px 22px 24px;
	text-align: center;
}

.cal__s {
	color: #5b630c;
	font-family: 'Press Start 2P', monospace;
	font-size: 7.5px;
	letter-spacing: 0.08em;
	line-height: 1.8;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.cal__l {
	color: #5c5c5c;
	font-size: 15px;
	line-height: 1.55;
	margin: 0 auto 4px;
	max-width: 28ch;
}

.cal__l b { color: #252525; font-weight: 900; }

.cal__g {
	color: #252525;
	font-family: 'Poppins', sans-serif;
	font-size: 76px;
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	letter-spacing: -0.06em;
	line-height: .85;
	margin: 12px 0 0;
}

.cal__p {
	color: #252525;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.3;
	margin: 10px 0 20px;
}

.cal__falta {
	color: #5c5c5c;
	font-size: 14.5px;
	line-height: 1.5;
	margin: 20px auto 14px;
	max-width: 26ch;
}

.cal__cta {
	background: #2f2418;
	border: 0;
	border-radius: 4px;
	color: #fffdf7;
	cursor: pointer;
	font-family: 'Poppins', sans-serif;
	font-size: 14.5px;
	font-weight: 900;
	letter-spacing: -0.03em;
	min-height: 52px;
	padding: 10px 20px;
	width: 100%;
}

.cal__cta:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

/* El lema. Es lo único de toda la página en cursiva, y por eso se lee. */
.cal__lema {
	border-top: 1px solid rgb(47 36 24 / 14%);
	color: #5b630c;
	font-size: 14.5px;
	font-style: italic;
	line-height: 1.5;
	margin: 22px 0 0;
	padding-top: 18px;
}

/* De dónde sale el número. En pequeño, pero está: una cifra que se enseña sin
   decir de dónde viene deja de creerse a la segunda vez. */
.cal__como {
	color: #9d9d9d;
	font-size: 11.5px;
	line-height: 1.55;
	margin: 14px auto 0;
	max-width: 40ch;
	text-align: left;
}

/* ── LOS DE 35 PARA ARRIBA ──────────────────────────────────────────────────
   Suelto y grande, no dentro de la rejilla de ocho tramos: allí un 9 no se ve
   al lado de un 193, y este es justo el número que hay que ver.

   En magenta ritual y no en lima: no es un logro, es una falta. */
.may {
	background: rgb(220 0 211 / 6%);
	border: 1.5px solid rgb(220 0 211 / 28%);
	border-radius: 18px;
	margin: 16px 0 0;
	padding: 24px 20px 20px;
	text-align: center;
}

.may__s {
	color: #a3009c;
	font-family: 'Press Start 2P', monospace;
	font-size: 7.5px;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.may__g {
	color: #dc00d3;
	font-family: 'Poppins', sans-serif;
	font-size: 60px;
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	letter-spacing: -0.06em;
	line-height: .85;
	margin: 0;
}

.may__g small {
	color: #5c5c5c;
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-top: 10px;
}

.may__l {
	color: #5c5c5c;
	font-size: 14px;
	line-height: 1.55;
	margin: 16px auto 0;
	max-width: 30ch;
}

.may__aviso {
	border-top: 1px solid rgb(220 0 211 / 20%);
	margin-top: 20px;
	padding-top: 18px;
	text-align: left;
}

.may__aviso p { color: #5c5c5c; font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.may__aviso p b { color: #252525; font-weight: 900; }

.may__cta {
	background: #dc00d3;
	border: 0;
	border-radius: 4px;
	color: #fffdf7;
	cursor: pointer;
	font-family: 'Poppins', sans-serif;
	font-size: 14.5px;
	font-weight: 900;
	letter-spacing: -0.03em;
	margin-top: 6px;
	min-height: 52px;
	padding: 10px 20px;
	width: 100%;
}

.may__cta:focus-visible { outline: 3px solid #2f2418; outline-offset: 2px; }

/* ── LOS RESULTADOS, PASE A PASE ────────────────────────────────────────────
   Un dato por pantalla. Cada diapositiva tiene que poder fotografiarse sola:
   por eso todas caben sin scroll y todas llevan su propio pie explicando de
   dónde sale el número. */
.sl {
	background: #e3e0d7;
	border: 2px solid #252525;
	border-radius: 18px;
	overflow: hidden;
}

.sl__cab {
	align-items: center;
	background: #2f2418;
	color: rgb(255 253 247 / 70%);
	display: flex;
	font-family: 'Press Start 2P', monospace;
	font-size: 7px;
	gap: 10px;
	justify-content: space-between;
	letter-spacing: 0.06em;
	padding: 11px 14px;
	text-transform: uppercase;
}

.sl__lienzo { display: flex; min-height: 340px; padding: 26px 20px 20px; }

.sl__p {
	animation: sl-entra .38s cubic-bezier(.22, 1, .36, 1);
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	width: 100%;
}

@keyframes sl-entra { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sl__p { animation: none; } }

.sl__s {
	color: #5b630c;
	font-family: 'Press Start 2P', monospace;
	font-size: 7.5px;
	letter-spacing: 0.08em;
	line-height: 1.8;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.sl__g {
	color: #252525;
	font-family: 'Poppins', sans-serif;
	font-size: 84px;
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	letter-spacing: -0.065em;
	line-height: .84;
	margin: 0;
}

.sl__pie {
	color: #252525;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.3;
	margin: 12px 0 0;
}

.sl__t, .sl__t2 {
	color: #5c5c5c;
	font-size: 14px;
	line-height: 1.55;
	margin: 16px auto 0;
	max-width: 30ch;
}

.sl__t b, .sl__t2 b { color: #252525; font-weight: 900; }
.sl__t em { color: #5b630c; font-style: italic; }
.sl__t2 { margin-top: 0; }

/* las barras del paso «dónde» */
.sl__barras { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 0; }

.sl__b {
	align-items: center;
	display: grid;
	gap: 9px;
	grid-template-columns: 88px 1fr 30px;
}

.sl__b i { color: #6f6b60; font-size: 12.5px; font-style: normal; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.sl__b u { background: #b9c91c; border-radius: 3px; display: block; height: 17px; min-width: 4px; text-decoration: none; }
.sl__b s { font-size: 13.5px; font-weight: 900; text-align: right; text-decoration: none; font-variant-numeric: tabular-nums; }

/* los chips del paso «qué queréis» */
.sl__chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }

.sl__chip {
	background: rgb(185 201 28 / 22%);
	border-radius: 999px;
	color: #2e3300;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.02em;
	padding: 8px 13px;
}

.sl__chip b { font-weight: 900; }

.sl__mapa { font-size: 62px; line-height: 1; margin: 4px 0 0; }

/* las dos fechas reservadas */
.sl__fechas { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 0; }

.sl__fecha {
	align-items: center;
	background: rgb(220 0 211 / 8%);
	border: 1.5px solid rgb(220 0 211 / 28%);
	border-radius: 12px;
	display: flex;
	gap: 11px;
	justify-content: center;
	padding: 13px 14px;
}

.sl__fecha span { font-size: 20px; }
.sl__fecha b { font-size: 15.5px; font-weight: 900; letter-spacing: -0.03em; }

.sl__cta {
	background: #2f2418;
	border: 0;
	border-radius: 4px;
	color: #fffdf7;
	cursor: pointer;
	font-family: 'Poppins', sans-serif;
	font-size: 14.5px;
	font-weight: 900;
	letter-spacing: -0.03em;
	margin-top: 18px;
	min-height: 52px;
	padding: 10px 18px;
	width: 100%;
}

.sl__cta:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

.sl__lema {
	border-top: 1px solid rgb(47 36 24 / 14%);
	color: #5b630c;
	font-size: 13.5px;
	font-style: italic;
	line-height: 1.5;
	margin: 18px 0 0;
	padding-top: 16px;
}

/* el mando */
.sl__mando {
	align-items: center;
	border-top: 1px solid rgb(47 36 24 / 14%);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 10px 12px;
}

.sl__fl {
	background: none;
	border: 1.5px solid rgb(47 36 24 / 18%);
	border-radius: 999px;
	color: #252525;
	cursor: pointer;
	flex: none;
	font-size: 19px;
	height: 44px;
	line-height: 1;
	width: 44px;
}

.sl__fl[disabled] { cursor: default; opacity: .3; }
.sl__fl:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

.sl__dots { align-items: center; display: flex; gap: 6px; justify-content: center; }

.sl__dot {
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	height: 7px;
	padding: 0;
	transition: width .25s ease, background .25s ease;
}

.sl__dot:focus-visible { outline: 3px solid #b9c91c; outline-offset: 3px; }

.sl__cuenta {
	color: #9d9d9d;
	font-family: 'Press Start 2P', monospace;
	font-size: 7px;
	letter-spacing: 0.1em;
	margin: 0;
	padding: 0 0 12px;
	text-align: center;
}

/* ── LA VISITA GUIADA ───────────────────────────────────────────────────────
   Un agujero en la sombra sobre el elemento de verdad, y Tuad al lado
   contando qué es. No se dibuja una web de mentira: se señala la que hay. */
#visita { inset: 0; position: fixed; z-index: 80; }

.vi { inset: 0; position: absolute; }

/* El foco. La sombra gigante hace de velo y el hueco queda limpio. */
.vi__foco {
	border: 2px solid #b9c91c;
	border-radius: 14px;
	box-shadow: 0 0 0 9999px rgb(47 36 24 / 72%);
	pointer-events: none;
	position: absolute;
	transition: all .35s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) { .vi__foco { transition: none; } }

.vi__globo {
	background: #e3e0d7;
	border-radius: 18px;
	box-shadow: 0 10px 40px rgb(0 0 0 / 35%);
	display: flex;
	gap: 12px;
	left: 50%;
	max-width: 460px;
	padding: 18px 18px 16px;
	position: absolute;
	transform: translateX(-50%);
	width: calc(100% - 28px);
}

.vi__globo--arriba { top: calc(18px + env(safe-area-inset-top)); }
.vi__globo--abajo { bottom: calc(18px + env(safe-area-inset-bottom)); }

.vi__tuad { flex: none; height: auto; width: 52px; }
.vi__dice { flex: 1; min-width: 0; }
.vi__dice p { color: #252525; font-size: 14.5px; line-height: 1.5; margin: 0 0 14px; }
.vi__dice p b { font-weight: 900; }

.vi__pie { align-items: center; display: flex; gap: 12px; justify-content: space-between; }

.vi__n {
	color: #9d9d9d;
	font-family: 'Press Start 2P', monospace;
	font-size: 7px;
	letter-spacing: 0.08em;
}

.vi__btn {
	background: #b9c91c;
	border: 0;
	border-radius: 4px;
	color: #2e3300;
	cursor: pointer;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: -0.02em;
	min-height: 44px;
	padding: 0 18px;
}

.vi__btn:focus-visible { outline: 3px solid #fffdf7; outline-offset: 2px; }

.vi__x {
	background: rgb(255 253 247 / 18%);
	border: 0;
	border-radius: 999px;
	color: #fffdf7;
	cursor: pointer;
	font-size: 15px;
	height: 44px;
	position: absolute;
	right: 14px;
	top: calc(14px + env(safe-area-inset-top));
	width: 44px;
}

.vi__x:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

/* Los dos «otra vez» donde estaban las diez preguntas. */
.res-otravez { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }


/* ── LOS BOTONES, CUADRADOS ─────────────────────────────────────────────────
   Andoni (6/9): *«me encantará que los botones en general fueran más cuadrados
   como en la app real, si te vas a la vista del colaborador el botón de Mis
   productos»*. Esa tarjeta usa `border-radius: 3px`.

   Aquí van a 4: en un botón de 54 px de alto, 3 px se lee como un fallo de
   render y 4 se lee como una decisión. Si lo quieres clavado, es este número.

   Los puntos del pase y los chips se quedan redondos: no son botones de
   acción, son marcas. */
.pt-btn, .pt-tk__btn, .pt-tk__fila input, .sl__cta, .cal__cta, .may__cta,
.pn-compartir, .res-otra-vez, .vi__btn, .res-tabs button { border-radius: 4px; }
/* ── ¿TENGO EL BILLETE VALIDADO? ────────────────────────────────────────────
   Siempre visible, lo primero de la parada. Tres cosas de un vistazo: si me
   consta, con qué correo, y qué te falta. */
.bil {
	align-items: center;
	border: 1.5px solid;
	border-radius: 4px;
	display: flex;
	gap: 12px;
	margin: 0 0 16px;
	padding: 12px 14px;
}

.bil--ok { background: rgb(185 201 28 / 14%); border-color: rgb(185 201 28 / 45%); }
.bil--no { background: rgb(47 36 24 / 5%); border-color: rgb(47 36 24 / 20%); }

.bil__e { flex: none; font-size: 22px; line-height: 1; }
.bil__t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.bil__t b { font-size: 14px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; }

/* El correo entero, no cortado: la pregunta de verdad es «¿es el mío o el de
   otro?», y con «pep…@gm…» no se contesta. Si no cabe, se parte. */
.bil__c {
	color: #5b630c;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.bil__q { color: #5c5c5c; font-size: 12px; line-height: 1.35; }

.bil__x {
	background: none;
	border: 1.5px solid rgb(47 36 24 / 20%);
	border-radius: 4px;
	color: #5c5c5c;
	cursor: pointer;
	flex: none;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	min-height: 40px;
	padding: 0 12px;
}

.bil__x--ir { background: #b9c91c; border-color: #b9c91c; color: #2e3300; font-weight: 900; }
.bil__x:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

/* ── EL AVISO URGENTE, BAJO EL BILLETE ──────────────────────────────────────
   Andoni: «si eres de la comunidad ES URGENTE que lo hagas para que no se te
   quede inactiva tu cuenta». Es la razón por la que alguien deja lo que está
   haciendo y contesta ahora, así que se resalta. */
.pt-urge {
	background: rgb(220 0 211 / 8%);
	border: 1.5px solid rgb(220 0 211 / 32%);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 16px 0 0;
	padding: 14px 15px;
}

.pt-urge > b { color: #a3009c; font-size: 14.5px; font-weight: 900; letter-spacing: -0.02em; }
.pt-urge span { color: #5c5c5c; font-size: 13.5px; line-height: 1.5; }
.pt-urge span b { color: #252525; font-weight: 900; }

/* La línea que presenta las tres puertas cuando aún no ha pasado nada. */
.pt-osi {
	color: #9d9d9d;
	font-size: 13px;
	margin: 26px 0 12px;
	text-align: center;
}

/* Y lo que sale en su sitio cuando el correo no consta. */
.pt-nada {
	align-items: flex-start;
	background: rgb(47 36 24 / 6%);
	border: 1.5px solid rgb(47 36 24 / 18%);
	border-radius: 4px;
	display: flex;
	gap: 11px;
	margin: 26px 0 12px;
	padding: 13px 14px;
}

.pt-nada > span { flex: none; font-size: 20px; line-height: 1.2; }
.pt-nada div { display: flex; flex-direction: column; gap: 3px; }
.pt-nada b { font-size: 14px; font-weight: 900; letter-spacing: -0.02em; }
.pt-nada span span, .pt-nada div span { color: #5c5c5c; font-size: 13px; line-height: 1.45; }

/* ⚠️ TUAD SE VEÍA ESTIRADO. `.vi__globo` es flex sin `align-items`, así que el
   valor por defecto —stretch— le daba a la imagen toda la altura del globo.
   Se ve raro y encima cambia según lo largo que sea el texto. */
.vi__globo { align-items: flex-start; }
.vi__tuad { align-self: flex-start; height: auto; object-fit: contain; width: 56px; }

/* La tarjeta de cierre de la visita, la que no señala a nada. */
.vi__globo--centro {
	bottom: auto;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* Cuando se baja al aviso de «no ha cogido ticket», que no quede pegado al
   borde ni debajo de la barra de arriba. */
#pt-nada { scroll-margin-top: 58px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CUANDO HAY PARADA NUEVA — 17/09/2026

   El billete es el mismo; lo que cambia es el discurso (ver js/puerta.js). Estas
   dos piezas sólo existen mientras la parada 02 esté abierta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La banda de «hay algo nuevo». Va ENCIMA del saludo y es lo único de la
   pantalla que parpadea: es el anuncio, y sin él la persona lee la misma página
   de ayer y se va. */
.pt-nuevo {
	background: #b9c91c;
	border-radius: 4px;
	color: #2e3300;
	display: inline-block;
	font-size: 10.5px;
	font-weight: 900;
	letter-spacing: 0.12em;
	margin: 0 0 10px;
	padding: 5px 9px;
	position: relative;
}

/* El brillo que cruza la banda, como el de la lámina del billete. Una vez cada
   cuatro segundos: lo justo para que el ojo lo pille sin que moleste leyendo. */
.pt-nuevo::after {
	animation: ptBrillo 4s ease-in-out infinite;
	background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 75%) 50%, transparent 80%);
	border-radius: inherit;
	content: '';
	inset: 0;
	position: absolute;
}

@keyframes ptBrillo {
	0%, 62% { opacity: 0; transform: translateX(-60%); }
	72% { opacity: 1; }
	100% { opacity: 0; transform: translateX(60%); }
}

@media (prefers-reduced-motion: reduce) {
	.pt-nuevo::after { animation: none; opacity: 0; }
}

/* ── «YO TODAVÍA NO HE HECHO NADA» ─────────────────────────────────────────
   En voz baja y al final: quien sabe a qué viene no tiene que leerla. */

.pt-nohice {
	background: rgb(255 255 255 / 55%);
	border: 1.5px dashed rgb(37 37 37 / 22%);
	border-radius: 4px;
	margin-top: 18px;
	padding: 14px 15px;
}

.pt-nohice b { display: block; font-size: 15px; line-height: 1.2; }
.pt-nohice > span { color: #6f6b60; display: block; font-size: 13px; margin-top: 4px; }

.pt-nohice ol {
	color: #3a352c;
	font-size: 13.5px;
	line-height: 1.45;
	margin: 10px 0 0;
	padding-left: 20px;
}

.pt-nohice__cta {
	background: #252525;
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 14.5px;
	font-weight: 900;
	margin-top: 12px;
	min-height: 46px;
	padding: 12px 16px;
	width: 100%;
}

.pt-nohice__cta:hover { background: #3a352c; }
.pt-nohice__cta:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

/* ── «¿PRIMERA VEZ POR AQUÍ?», SUBRAYADO Y CLICABLE ────────────────────────
   Con el mismo rotulador que el resto de la campaña. Era una frase suelta que
   pedía bajar a ciegas; ahora lleva. */

.pt-sub__ir {
	color: inherit;
	font-weight: 800;
	text-decoration: none;
}

.pt-sub__ir mark {
	background: linear-gradient(180deg, transparent 60%, rgb(185 201 28 / 65%) 60%, rgb(185 201 28 / 65%) 95%, transparent 95%);
	color: inherit;
	padding: 0 2px;
}

.pt-sub__ir:hover mark { background: linear-gradient(180deg, transparent 55%, rgb(185 201 28 / 85%) 55%, rgb(185 201 28 / 85%) 97%, transparent 97%); }

/* Al llegar, las tres puertas dan un respingo: sin esto, el scroll te deja
   delante de ellas y no queda claro que la respuesta era eso. */
.pt-puertas--mira {
	animation: ptMira 1.6s ease-in-out;
}

@keyframes ptMira {
	0%, 100% { transform: none; }
	12% { transform: translateY(-4px); }
	24% { transform: none; }
	36% { transform: translateY(-2px); }
	48% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pt-puertas--mira { animation: none; outline: 3px solid #b9c91c; outline-offset: 6px; }
}

/* ── EL AVISO, EN GRANDE Y CON LA CIFRA REAL ───────────────────────────────
   Andoni (18/9): *«en grande y muy destacado»*. Va DEBAJO del billete y no
   arriba: arriba es una amenaza a alguien que aún no sabe de qué va esto;
   debajo, después de haberle enseñado lo que gana, es un motivo.

   El número sale del motor. Si no ha contestado no se pinta ninguno — la regla
   de la casa es que aquí no se escribe una cifra que no venga de la base. */

.pt-urge--grande {
	padding: 16px 17px 15px;
}

.pt-urge--grande > b {
	font-size: 16.5px;
	line-height: 1.2;
}

.pt-urge__cifra {
	align-items: baseline;
	border-top: 1px solid rgb(220 0 211 / 22%);
	display: flex;
	gap: 9px;
	justify-content: center;
	margin-top: 13px;
	padding-top: 13px;
}

.pt-urge__cifra > b {
	color: #dc00d3;
	font-family: 'Poppins', sans-serif;
	font-size: 40px;
	font-weight: 900;
	letter-spacing: -0.05em;
	line-height: 1;
}

.pt-urge__cifra > span {
	color: #8a2b86;
	font-size: 13px;
	font-weight: 700;
}

.pt-urge__sindato {
	color: #8a2b86;
	font-size: 14px;
	font-weight: 800;
}

.pt-urge__remate {
	display: block;
	font-size: 14px;
	margin-top: 11px;
	text-align: center;
}

/* ── EL SEGUNDO TITULAR: «no sé ni qué es esto» ────────────────────────────
   Al mismo tamaño que «¿tú has participado?», y no en letra pequeña debajo.
   Quien llega perdido es justo el que no va a leer la letra pequeña — y esta
   página la tiene que entender alguien muy mayor que se ha metido sin saber
   dónde. Dos titulares, dos caminos, el mismo peso. */

.pt-saludo--otro {
	background: none;
	border: 0;
	cursor: pointer;
	display: block;
	margin-top: 2px;
	padding: 0;
	text-align: left;
	width: 100%;
	/* ⚠️ Sin `font: inherit` a propósito: eso heredaba del contenedor y pisaba
	   el tamaño de `.pt-saludo`, así que el segundo titular salía pequeño — y
	   volvía a ser el camino de segunda que veníamos a quitar. Sólo se hereda
	   el color; el tamaño y el peso los pone `.pt-saludo`. */
	color: inherit;
}

.pt-saludo--otro mark {
	background: linear-gradient(180deg, transparent 62%, rgb(185 201 28 / 70%) 62%, rgb(185 201 28 / 70%) 95%, transparent 95%);
	color: inherit;
	padding: 0 2px;
}

.pt-saludo--otro:hover mark { background: linear-gradient(180deg, transparent 56%, rgb(185 201 28 / 90%) 56%, rgb(185 201 28 / 90%) 97%, transparent 97%); }
.pt-saludo--otro:focus-visible { outline: 3px solid #b9c91c; outline-offset: 4px; }

/* Al llegar guiado, el rótulo deja de preguntar y pasa a decir qué hacer. */
.pt-osi--guia {
	color: #5b630c;
	font-size: 15px;
	font-weight: 800;
}

/* ── EL SEGUNDO TÍTULO, UN ESCALÓN POR DEBAJO ──────────────────────────────
   Es un título, no una nota al pie: quien llega perdido no lee notas al pie.
   Pero tampoco pesa igual que la pregunta principal, o compiten y no gana
   ninguna. Un escalón menos de tamaño y algo apagado. */
.pt-saludo--otro {
	/* ⚠️ En px y no en em: `em` se mide contra el font-size del CONTENEDOR (16px),
	   no contra el del titular (40px), así que 0.62em dejaba esto en diez píxeles
	   — ilegible, y otra vez la nota al pie que veníamos a quitar. */
	font-size: 24px;
	opacity: 0.5;
}

.pt-saludo--otro:hover { opacity: 0.8; }

/* ── TUAD, AL LADO DEL CAMPO DEL CORREO ────────────────────────────────────
   Pequeño y dentro del billete, que es donde sirve: señalando qué escribir.
   Estuvo un rato como un bloque grande entre el titular y el billete y era
   peor — repetía lo que ya decían el titular y el propio billete. */

.pt-tk__tuad {
	align-items: center;
	display: flex;
	gap: 9px;
}

.pt-tk__tuad img {
	flex: none;
	width: 34px;
}

.pt-tk__tuad p {
	margin: 0;
}

/* ── EL ÚNICO SUBRAYADO ROJO DE LA WEB ─────────────────────────────────────
   Lo de que la cuenta se queda inactiva. En rojo y no en el lima de la casa,
   porque es la única frase de toda la página que avisa de algo que se pierde.

   Y es el único: si mañana se subraya en rojo una segunda cosa, deja de haber
   una urgente y pasa a haber dos importantes, que no es lo mismo. */
.pt-urge u {
	background: linear-gradient(180deg, transparent 58%, rgb(214 32 32 / 32%) 58%, rgb(214 32 32 / 32%) 96%, transparent 96%);
	font-weight: 800;
	text-decoration: none;
	text-decoration-color: #d62020;
}

/* ── LAS TAREAS DE «¿QUÉ TENGO QUE HACER?» ─────────────────────────────────
   Se ve que se pueden tocar, y se ve cuál falta. Antes eran texto plano con
   una flechita gris al lado: nadie toca un texto plano, y la que faltaba
   pesaba lo mismo que las hechas. */

.ac-tarea {
	align-items: flex-start;
	background: #fff;
	border: 1.5px solid rgb(37 37 37 / 12%);
	border-radius: 10px;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 11px;
	padding: 11px 12px;
	text-align: left;
	transition: border-color 0.15s ease, transform 0.15s ease;
	width: 100%;
}

.ac-tarea:hover { border-color: #5b630c; transform: translateX(2px); }
.ac-tarea:focus-visible { outline: 3px solid #b9c91c; outline-offset: 2px; }

/* La que falta, resaltada: es a la que hay que ir. */
.ac-tarea[data-estado='falta'] {
	background: #fffdf7;
	border-color: rgb(185 201 28 / 70%);
	box-shadow: 0 2px 0 rgb(185 201 28 / 35%);
}

/* Las hechas se apagan: ya no piden nada. */
.ac-tarea[data-estado='hecho'] { opacity: 0.62; }

.ac-tarea__ir {
	align-self: center;
	color: #5b630c;
	flex: none;
	font-size: 12px;
	font-weight: 900;
	white-space: nowrap;
}

.ac-tarea[data-estado='hecho'] .ac-tarea__ir { color: #9d9d9d; }