/* PISTAS DEL PRIMER CONTACTO (2026-11-05): cartelito de tiza chico al lado de lo que importa. No tapa clics salvo su botón. */
.tg-pista {
    position: fixed; z-index: 1000040; width: min(300px, calc(100cqw - 32px)); box-sizing: border-box; pointer-events: none;
    padding: 9px 12px 8px; border-radius: 9px;
    background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 60%), linear-gradient(160deg, #24302a, #141b17);
    border: 4px solid #6b4423; box-shadow: inset 0 0 0 2px #3a2412, inset 0 0 18px rgba(0, 0, 0, .6), 0 8px 22px rgba(0, 0, 0, .65);
    color: #f1eee3; opacity: 0; transform: translateY(6px) rotate(-1deg) scale(.96);
    transition: opacity .3s ease, transform .3s ease, left .25s ease, top .25s ease;
}
.tg-pista.visible { opacity: 1; transform: none; }
.tg-pista-quien { font-family: 'Lilita One', 'Arial Black', sans-serif; font-size: 12px; letter-spacing: 1.4px; color: #ffcf6e; text-shadow: 0 0 6px rgba(255, 180, 60, .5); }
.tg-pista-texto { margin: 4px 0 6px; font-family: 'Permanent Marker', 'Comic Sans MS', cursive; font-size: 14.5px; line-height: 1.3; text-shadow: 0 0 2px rgba(255, 255, 255, .45); }
.tg-pista-ya {
    pointer-events: auto; float: right; cursor: pointer; font-family: 'Lilita One', 'Arial Black', sans-serif; font-size: 11px; letter-spacing: 1px;
    color: rgba(241, 238, 227, .7); background: transparent; border: 1px solid rgba(241, 238, 227, .3); border-radius: 5px; padding: 2px 7px;
}
.tg-pista-ya:hover { color: #fff; border-color: #ffcf6e; }
.tg-pista::after { /* flechita del mismo marco de madera */
    content: ''; position: absolute; width: 14px; height: 14px; background: #6b4423; transform: rotate(45deg);
}
.tg-pista[data-flecha="abajo"]::after { left: calc(var(--fx, 50%) - 7px); bottom: -9px; }
.tg-pista[data-flecha="arriba"]::after { left: calc(var(--fx, 50%) - 7px); top: -9px; }
.tg-pista[data-flecha="derecha"]::after { top: calc(var(--fy, 50%) - 7px); right: -9px; }
.tg-pista[data-flecha="izquierda"]::after { top: calc(var(--fy, 50%) - 7px); left: -9px; }
.tg-pista[data-flecha="ninguna"]::after { display: none; }

/* lo que señala la pista late con un brillo cálido */
.tg-pista-brillo { animation: tgPistaBrillo 1.2s ease-in-out infinite; }
@keyframes tgPistaBrillo { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 207, 110, 0)); } 50% { filter: drop-shadow(0 0 10px rgba(255, 207, 110, .9)); } }

@media (max-width: 600px) { .tg-pista-texto { font-size: 13px; } }