/* ===== Marcadores de rastreo ================================================
   Marcadores discretos repartidos por varias páginas del sitio. Se dibuja en
   CSS puro, sin imágenes, para que no dependa de assets nuevos: un cuadrado
   con una cifra dentro, que en el código clásico de señales de pista indica
   "hay algo escondido a tantos pasos". Aquí la cifra es 0 porque lo escondido
   está justo en ese punto.

   El marcador se pinta SIEMPRE igual (trazo y cifra negros sobre un fondo
   claro propio), sin heredar el color del texto. Así se reconoce como el mismo
   símbolo en todas las secciones y no se confunde con el texto ni parece un
   glitch. Al llevar su propio fondo tampoco se pierde sobre los fondos oscuros
   (el marrón del Calendario o el footer). Pasa desapercibido por su tamaño, no
   por transparencia.

   El contenido revelado se inyecta desde assets/js/pistas.js en el atributo
   `data-pista-letra`; en el HTML servido ese atributo no existe.
   ========================================================================== */

.pista-oculta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	vertical-align: middle;
	margin: 0 0.25em;
	border-radius: 2px;
	border: 2px solid #111111;
	background: #fbf8f3;
	color: #111111;
	opacity: 1;
	cursor: pointer;
	padding: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: bold;
	font-size: 13px;
	line-height: 1;
	transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

/* La cifra dentro del cuadro: 0 pasos, o sea, aquí mismo. Se centra con flex
   (no con translate) para que no la desalinee la métrica de la serif. */
.pista-oculta::before {
	content: "0";
	display: block;
	color: inherit;
	font: inherit;
}

/* En hover se mantiene el trazo negro (es el mismo símbolo en todos lados):
   solo crece un poco y se insinúa un relleno cálido. */
.pista-oculta:hover,
.pista-oculta:focus-visible {
	background-color: #f0d68a;
	transform: scale(1.15);
	outline: none;
}

/* --- Estado revelado --------------------------------------------------- */

/* Al revelarse se pinta como un cuadro dorado sólido con la letra negra
   encima, conservando el trazo y el color de la cifra. */
.pista-oculta.revelada {
	color: #111111;
	background: #b8860b;
	border-color: #111111;
	transform: scale(1.1);
}

.pista-oculta.revelada::before { display: none; }

.pista-oculta.revelada::after {
	content: attr(data-pista-letra);
	display: block;
	font: inherit;
	font-size: 14px;
	color: inherit;
}

/* Nota con el contador. También hereda el color del texto de la sección para
   que se lea igual de bien sobre fondo claro que sobre fondo oscuro. */
.pista-oculta-nota {
	display: inline-block;
	margin-left: 0.4em;
	font-size: 0.8em;
	font-style: italic;
	font-weight: bold;
	color: inherit;
	vertical-align: middle;
	animation: pista-aparece 0.4s ease;
}

@keyframes pista-aparece {
	from { opacity: 0; transform: translateX(-6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pista-oculta,
	.pista-oculta-nota { transition: none; animation: none; }
}

/* En móvil el objetivo táctil debe ser cómodo sin agrandar el dibujo. */
@media screen and (max-width: 736px) {
	.pista-oculta { margin: 0 0.5em; }
}