/**
 * Pit stop — minijuego de cambio de rueda en la portada.
 * Marcado: parts/pitstop.php (se inyecta en el bloque «Pit stop» de Elementor, clase nl-pitstop-hueco).
 * Lógica: assets/js/pitstop.js.
 */
/* ───────────────────────── Pit stop ───────────────────────── */
.nl-pitstop {
	position: relative; background: var(--nl-c-grafito); padding: 120px 24px 140px;
	/* Sin corte arriba: sigue al bloque «Así funciona el 24h» como un mismo tramo de carretera */
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), 0 100%);
}
.nl-ps-int { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.nl-ps-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--nl-f); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.nl-ps-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--nl-c-rojo); }
.nl-ps-titulo { margin: 18px 0 20px; color: #fff; font: 900 clamp(34px, 4.6vw, 60px)/.95 var(--nl-f); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; }
.nl-ps-titulo em { font-style: normal; display: inline-block; background: var(--nl-c-rojo); padding: 0 .12em; transform: skewX(-8deg); }
.nl-ps-texto { max-width: 46ch; margin: 0 0 28px; }
.nl-ps-pasos { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 10px; counter-reset: p; }
.nl-ps-pasos li { counter-increment: p; display: flex; gap: 14px; align-items: baseline; color: #fff; font-size: 15px; }
.nl-ps-pasos li::before { content: "0" counter(p); font: 800 13px/1 var(--nl-f); font-stretch: 125%; color: var(--nl-c-rojo); }
.nl-ps-pasos small { color: var(--nl-c-texto); }
.nl-ps-record { display: flex; gap: 32px; padding-top: 24px; border-top: 1px solid var(--nl-c-linea); }
.nl-ps-record div { font: 600 11px/1.4 var(--nl-f); letter-spacing: .12em; text-transform: uppercase; }
.nl-ps-record b { display: block; white-space: nowrap; text-transform: none; margin-top: 6px; color: #fff; font: 800 28px/1 var(--nl-f); font-stretch: 125%; letter-spacing: 0; }

/* Línea de carril entre el 24h y el Pit stop: discontinua y desplazada con el scroll (--carril, pitstop.js) */
.nl-pitstop .nl-ps-carril {
	position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 6px; pointer-events: none;
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .32) 0 64px, transparent 64px 128px);
	background-position-x: calc(var(--carril, 0) * 1px);
	-webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	        mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
@media (max-width: 900px) { .nl-pitstop .nl-ps-carril { height: 4px; background-size: 96px 100%; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .32) 0 48px, transparent 48px 96px); } }

/* Tarjeta del juego */
.nl-ps-juego { position: relative; background: var(--nl-c-negro); border: 1px solid var(--nl-c-linea); aspect-ratio: 1 / 1.08; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.nl-ps-hud { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 22px; z-index: 2; pointer-events: none; }
.nl-ps-paso { font: 600 11px/1.5 var(--nl-f); letter-spacing: .14em; text-transform: uppercase; }
.nl-ps-paso b { display: block; color: #fff; font: 800 18px/1.1 var(--nl-f); font-stretch: 125%; letter-spacing: .02em; }
.nl-ps-crono { text-align: right; font: 600 11px/1.5 var(--nl-f); letter-spacing: .14em; text-transform: uppercase; }
.nl-ps-crono b { display: block; color: #fff; font: 800 34px/1 var(--nl-f); font-stretch: 125%; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.nl-ps-barra { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--nl-c-grafito2); z-index: 3; }
.nl-ps-barra i { display: block; height: 100%; width: 0; background: var(--nl-c-rojo); transition: width .3s cubic-bezier(.2, .8, .2, 1); }
.nl-ps-pista { position: absolute; inset: auto 0 0; z-index: 2; padding: 16px 22px; display: flex; align-items: center; gap: 12px; color: #fff; font: 600 14px/1.3 var(--nl-f); background: linear-gradient(transparent, rgba(11, 11, 12, .9) 40%); min-height: 64px; }
.nl-ps-pista::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--nl-c-rojo); transform: rotate(45deg); }
.nl-ps-pista.nl-ps-aviso { color: #ff5a63; }

/* Escena SVG */
.nl-ps-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nl-ps-rueda { transform-box: view-box; transform-origin: 200px 215px; }
.nl-ps-tuerca { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center; }
.nl-ps-tuerca .t-cuerpo { fill: #D9DCE2; stroke: #8B8F97; stroke-width: 1.5; transition: fill .2s; }
.nl-ps-tuerca .t-centro { fill: #A5A9B1; }
.nl-ps-tuerca .t-aro { fill: none; stroke: var(--nl-c-rojo); stroke-width: 3; opacity: 0; }
.nl-ps-tuerca .t-toque { fill: transparent; }
.nl-ps-tuerca:focus-visible .t-aro { opacity: 1; stroke: #fff; }
.nl-ps-tuerca.floja .t-cuerpo { fill: #8B8F97; stroke: #5d6068; }
.nl-ps-tuerca.fuera { visibility: hidden; }
.nl-ps-tuerca.pista .t-aro { animation: nl-ps-pulso 0.9s ease-in-out infinite; }
.nl-ps-tuerca.ok .t-aro { opacity: 1; stroke: var(--nl-c-verde); stroke-width: 2; }
.nl-ps-tuerca.mal { animation: nl-ps-temblor .35s; }
.nl-ps-tuerca.mal .t-cuerpo { fill: var(--nl-c-rojo); }
.nl-ps-esparrago { fill: #4a4d55; }
.nl-ps-fuga { transform-box: fill-box; transform-origin: center; animation: nl-ps-fuga 1.2s ease-out infinite; }
@keyframes nl-ps-fuga { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes nl-ps-pulso { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes nl-ps-temblor { 20%, 60% { translate: -4px 0; } 40%, 80% { translate: 4px 0; } }
.nl-ps-flotante { fill: #ff5a63; font: 800 20px var(--nl-f); font-stretch: 125%; pointer-events: none; }
.nl-ps-flotante.bien { fill: var(--nl-c-verde); }
.nl-ps-rueda.cambiable { cursor: pointer; }
.nl-ps-goma-vieja, .nl-ps-goma-nueva { transition: opacity .2s; }
.nl-ps-rueda:not(.vieja) .nl-ps-goma-vieja, .nl-ps-rueda.vieja .nl-ps-goma-nueva { display: none; }

/* Pantallas (inicio, cuenta atrás, resultado) */
.nl-ps-capa { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; padding: 28px; background: rgba(11, 11, 12, .82); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: opacity .3s; }
.nl-ps-capa[hidden] { display: none; }
.nl-ps-capa h3 { margin: 0 0 8px; color: #fff; font: 900 clamp(26px, 3vw, 36px)/1 var(--nl-f); font-stretch: 125%; text-transform: uppercase; }
.nl-ps-capa p { margin: 0 auto 22px; max-width: 32ch; font-size: 15px; }
.nl-ps-cuenta { color: #fff; font: 900 120px/1 var(--nl-f); font-stretch: 125%; }
.nl-ps-cuenta.ya { color: var(--nl-c-rojo); }
.nl-ps-tiempo { color: #fff; font: 900 clamp(56px, 8vw, 84px)/1 var(--nl-f); font-stretch: 125%; font-variant-numeric: tabular-nums; }
.nl-ps-tiempo small { font-size: .4em; margin-left: 4px; }
.nl-ps-rango { display: inline-block; margin: 14px 0 6px; padding: 6px 12px; background: var(--nl-c-rojo); color: #fff; font: 800 13px/1 var(--nl-f); font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; transform: skewX(-8deg); }
.nl-ps-detalle { font-size: 13px !important; margin-bottom: 18px !important; }
.nl-ps-nuevo { color: var(--nl-c-verde); font-weight: 700; }
.nl-ps-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Botones (mismo lenguaje que .nl-btn de la web) */
.nl-ps-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; padding: 15px 22px; background: var(--nl-c-rojo); color: #fff; font: 700 13px/1 var(--nl-f); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.nl-ps-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nl-c-rojo-osc); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.7, 0, .2, 1); }
.nl-ps-btn:hover::before, .nl-ps-btn:focus-visible::before { transform: scaleX(1); }
.nl-ps-btn.sec { background: transparent; box-shadow: inset 0 0 0 1px var(--nl-c-linea); }
.nl-ps-btn.sec::before { background: rgba(255, 255, 255, .08); }
.nl-ps-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 900px) {
	.nl-pitstop { padding: 88px 16px 110px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%); }
	.nl-ps-int { grid-template-columns: 1fr; gap: 36px; }
	.nl-ps-pasos { display: none; }
	.nl-ps-texto { margin-bottom: 0; }
	.nl-ps-record { order: 3; gap: 24px; }
	.nl-ps-record b { font-size: 21px; }
	.nl-ps-hud { padding: 16px; }
	.nl-ps-crono b { font-size: 28px; }
	.nl-ps-pista { padding: 14px 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.nl-ps-tuerca.pista .t-aro, .nl-ps-tuerca.mal, .nl-ps-fuga { animation: none; }
	.nl-ps-tuerca.pista .t-aro { opacity: 1; }
}

/* Blindaje frente a los estilos base de Hello Elementor (button, h2, h3, p) */
.nl-pitstop .nl-ps-btn, .nl-pitstop .nl-ps-btn:hover, .nl-pitstop .nl-ps-btn:focus { background-color: var(--nl-c-rojo); color: #fff; border: 0; border-radius: 0; text-decoration: none; }
.nl-pitstop .nl-ps-btn.sec, .nl-pitstop .nl-ps-btn.sec:hover, .nl-pitstop .nl-ps-btn.sec:focus { background-color: transparent; }
.nl-pitstop h2, .nl-pitstop h3 { font-family: var(--nl-f); }
.nl-pitstop .nl-ps-svg text { font-family: var(--nl-f); }