/**
 * /transporte/ v2 — EL PLANO DE LÍNEAS + EL LOCALIZADOR BATONROUTE.
 *
 * Sobre el CSS compartido page-servicios.css. Lenguaje "plano de metro": líneas gruesas
 * redondeadas de colores, esquinas a 45° (polilíneas + stroke-linejoin:round), estaciones
 * como círculos blancos con anillo del color de su línea, y San Felix como estación central
 * con el isotipo de los tejados. Interacción (resaltar línea, pulso del hub) y buses vivos los
 * mueve page-transporte.js. El teléfono BatOnRoute pinta la captura real si existe (assets/img/
 * transporte/batonroute.jpg); si no, la demo simulada de fallback (CSS puro + clase inview).
 *
 * NUEVA REGLA DE LA CASA: aire pre-CTA generoso (clamp(8rem,16vh,13rem) mínimo) — ver abajo.
 */

.sf-transporte {
	--sf-tr-ambar: #e0912b;                        /* la tercera línea (Meatzaldea). */
	--sf-tr-crema: var(--wp--preset--color--crema, #f7f5ef);
	--sf-tr-tinta: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

/* ---------------------------------------------------------------------------
 * Leyenda de líneas (pastillas nombre + color).
 * ------------------------------------------------------------------------- */
.sf-tr-leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	list-style: none;
	margin: clamp(1rem, 3vh, 1.75rem) 0 0;
	padding: 0;
}
.sf-tr-leyenda__item {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.35rem 0.85rem 0.35rem 0.6rem;
	border-radius: 999px;
	background: color-mix( in srgb, var(--sf-tr-crema) 70%, transparent );
	border: 1px solid color-mix( in srgb, var(--ln) 45%, transparent );
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	color: var(--sf-tr-tinta);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.sf-tr-leyenda__dot {
	width: 0.85em;
	height: 0.85em;
	border-radius: 50%;
	background: var(--ln);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--ln) 22%, transparent );
}
.sf-tr-leyenda__item.is-hl {
	transform: translateY( -1px );
	background: color-mix( in srgb, var(--ln) 12%, var(--sf-tr-crema) );
	box-shadow: 0 3px 12px color-mix( in srgb, var(--ln) 26%, transparent );
}

/* ---------------------------------------------------------------------------
 * El plano.
 * ------------------------------------------------------------------------- */
.sf-tr-plano {
	position: relative;
	margin: clamp(1.25rem, 3.5vh, 2.5rem) auto 0;
	max-width: 64rem;
}
.sf-tr-plano__orient--v { display: none; }
.sf-tr-plano__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	touch-action: manipulation;
}

/* --- Trazos de las líneas --- */
.sf-tr-line {
	fill: none;
	stroke: var(--ln);
	stroke-width: 9;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: opacity 0.35s ease, stroke-width 0.35s ease;
}
.sf-js .sf-tr-line {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}
.sf-js .sf-tr-plano.is-inview .sf-tr-line {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, stroke-width 0.35s ease;
}
/* Resaltado / atenuado (JS). */
.sf-tr-line.is-dim { opacity: 0.32; }
.sf-tr-line.is-hl { stroke-width: 11; }
/* Pulso del hub: todas las líneas laten a la vez. */
.sf-tr-line.is-pulse { animation: sf-tr-linepulse 0.9s ease; }
@keyframes sf-tr-linepulse {
	0%, 100% { stroke-width: 9; }
	45% { stroke-width: 13; }
}

/* --- Estaciones --- */
.sf-tr-st { cursor: pointer; }
.sf-tr-st__hit { fill: transparent; }
.sf-tr-st__ring {
	fill: var(--sf-tr-crema);
	stroke: var(--ln);
	stroke-width: 5;
	transform-box: fill-box;
	transform-origin: center;
	transition: stroke-width 0.25s ease, filter 0.25s ease;
}
.sf-tr-st__mun {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 16px;
	letter-spacing: 0.02em;
	fill: var(--sf-tr-tinta);
}
.sf-tr-st__par {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 14px;
	fill: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 90%, transparent ); /* AAA sobre niebla (9.2:1). */
}
/* Pop de la estación al pasar el trazo (secuencia por --si). */
.sf-js .sf-tr-st { opacity: 0; }
.sf-js .sf-tr-plano.is-inview .sf-tr-st {
	animation: sf-tr-stpop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
	animation-delay: calc( 0.25s + var(--si, 1) * 0.4s );
	opacity: 1;
}
@keyframes sf-tr-stpop {
	0% { opacity: 0; }
	40% { opacity: 1; }
	100% { opacity: 1; }
}
.sf-js .sf-tr-plano.is-inview .sf-tr-st__ring {
	animation: sf-tr-ringpop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
	animation-delay: calc( 0.25s + var(--si, 1) * 0.4s );
}
@keyframes sf-tr-ringpop {
	0% { transform: scale(0.1); }
	100% { transform: scale(1); }
}
/* Estados de interacción. */
.sf-tr-st.is-dim { opacity: 0.34; }
.sf-tr-st.is-hl .sf-tr-st__ring {
	stroke-width: 7;
	filter: drop-shadow( 0 0 6px color-mix( in srgb, var(--ln) 60%, transparent ) );
}
.sf-tr-st:focus { outline: none; }
.sf-tr-st:focus-visible .sf-tr-st__ring {
	stroke-width: 7;
	filter: drop-shadow( 0 0 0 2px var(--wp--preset--color--primario, #00a74d) );
}

/* --- La estación central: San Felix --- */
.sf-tr-hub { cursor: pointer; }
.sf-tr-hub__hit { fill: transparent; }
.sf-tr-hub__ring { fill: none; stroke: var(--wp--preset--color--verde-bosque, #0b2e1f); stroke-width: 6; }
.sf-tr-hub__disc { fill: var(--sf-tr-crema); }
.sf-tr-hub__pulse {
	fill: none;
	stroke: var(--wp--preset--color--primario, #00a74d);
	stroke-width: 3;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
.sf-tr-hub__label {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 19px;
	letter-spacing: 0.06em;
	fill: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-tr-hub__label2 { font-size: 15px; letter-spacing: 0.14em; }
/* La central se enciende la última, con un pulso. */
.sf-js .sf-tr-plano.is-inview .sf-tr-hub {
	animation: sf-tr-stpop 0.6s ease backwards;
	animation-delay: 1.5s;
}
.sf-js .sf-tr-plano.is-inview .sf-tr-hub__pulse {
	animation: sf-tr-hubpulse 1.4s ease-out 1.5s 1 backwards;
}
@keyframes sf-tr-hubpulse {
	0% { opacity: 0.7; transform: scale(0.8); }
	100% { opacity: 0; transform: scale(1.7); }
}
/* Pulso al hover del hub (JS añade is-pulse-hub). */
.sf-tr-hub.is-pulse-hub .sf-tr-hub__pulse { animation: sf-tr-hubpulse 0.9s ease-out; }

/* --- Los buses --- */
.sf-tr-bus { opacity: 0; }
.sf-js .sf-tr-plano.is-inview .sf-tr-bus { opacity: 1; transition: opacity 0.5s ease 1.6s; }
.sf-tr-bus__body { fill: var(--ln); }
.sf-tr-bus__win { fill: color-mix( in srgb, var(--sf-tr-crema) 92%, white ); opacity: 0.92; }
.sf-tr-bus__wheel { fill: var(--wp--preset--color--verde-bosque, #0b2e1f); }
.sf-tr-bus__lamp { fill: #fff6d8; }

/* --- Tooltip --- */
.sf-tr-tooltip {
	position: absolute;
	z-index: 5;
	transform: translate( -50%, -115% );
	padding: 0.4rem 0.7rem;
	border-radius: 8px;
	background: var(--wp--preset--color--verde-bosque, #0b2e1f);
	color: var(--sf-tr-crema);
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.74rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.sf-tr-tooltip::after {
	content: "";
	position: absolute;
	left: 50%; bottom: -5px;
	width: 10px; height: 10px;
	transform: translateX( -50% ) rotate( 45deg );
	background: inherit;
}
.sf-tr-tooltip[hidden] { display: none; }

/* --- Nota "esquema orientativo" --- */
.sf-tr-nota {
	margin: clamp(1rem, 2.5vh, 1.6rem) 0 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.92rem;
	font-style: italic;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 85%, transparent ); /* honestidad legible: AAA sobre niebla. */
}

/* ===========================================================================
 * EL LOCALIZADOR BATONROUTE — el teléfono con la captura real (o la demo de fallback).
 * ========================================================================= */
.sf-tr-batonroute {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(1.5rem, 5vw, 4rem);
	align-items: center;
}
.sf-tr-batonroute__text { min-width: 0; }

.sf-tr-phone {
	justify-self: center;
	margin: 0;
	perspective: 900px;
}
.sf-tr-phone__frame {
	position: relative;
	width: clamp(200px, 24vw, 260px);
	aspect-ratio: 260 / 520;
	border-radius: 34px;
	background: linear-gradient( 155deg, #1c1c22, #303039 );
	padding: 12px;
	box-shadow: 0 26px 50px -18px rgba(11, 46, 31, 0.45), 0 4px 14px rgba(0, 0, 0, 0.2);
	transform: rotate( -3deg );
}
.sf-tr-phone__notch {
	position: absolute;
	top: 12px; left: 50%;
	transform: translateX( -50% );
	width: 42%; height: 18px;
	border-radius: 0 0 12px 12px;
	background: #16161b;
	z-index: 3;
}
.sf-tr-phone__screen {
	position: relative;
	width: 100%; height: 100%;
	border-radius: 24px;
	overflow: hidden;
	background: var(--sf-tr-crema);
}
/* La captura real de BatOnRoute: llena la pantalla; el __screen (overflow:hidden, radius 24px) le
   hereda las esquinas. */
.sf-tr-phone__shot { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--sf-tr-crema); }
.sf-tr-demo { display: block; width: 100%; height: 100%; }
.sf-tr-demo__block { fill: color-mix( in srgb, var(--wp--preset--color--primario, #00a74d) 9%, var(--sf-tr-crema) ); }
.sf-tr-demo__st {
	fill: none;
	stroke: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 16%, transparent );
	stroke-width: 8;
	stroke-linecap: round;
}
.sf-tr-demo__route {
	fill: none;
	stroke: color-mix( in srgb, var(--wp--preset--color--primario, #00a74d) 30%, transparent );
	stroke-width: 3;
	stroke-dasharray: 4 6;
	stroke-linecap: round;
}
.sf-tr-demo__home path {
	fill: none;
	stroke: var(--wp--preset--color--verde-bosque, #0b2e1f);
	stroke-width: 2.4;
	stroke-linejoin: round;
}
.sf-tr-demo__bus-halo { fill: color-mix( in srgb, var(--wp--preset--color--primario, #00a74d) 34%, transparent ); }
.sf-tr-demo__bus-dot { fill: var(--wp--preset--color--primario, #00a74d); }
.sf-tr-demo__bus-glyph { fill: #fff; }
.sf-tr-demo__bus {
	transform: translate( 40px, 200px );
}
/* Las animaciones del bucle arrancan en PAUSA; el JS las corre (is-play) solo cuando el
   teléfono está en viewport y las pausa fuera. */
.sf-js .sf-tr-phone .sf-tr-demo__bus { animation: sf-tr-demorun 9s linear infinite; animation-play-state: paused; }
.sf-js .sf-tr-phone .sf-tr-demo__bus-halo { animation: sf-tr-demohalo 1.6s ease-in-out infinite; animation-play-state: paused; }
.sf-js .sf-tr-phone.is-play .sf-tr-demo__bus,
.sf-js .sf-tr-phone.is-play .sf-tr-demo__bus-halo { animation-play-state: running; }
@keyframes sf-tr-demorun {
	0%   { transform: translate( 40px, 200px ); }
	25%  { transform: translate( 220px, 200px ); }
	50%  { transform: translate( 220px, 360px ); }
	75%  { transform: translate( 40px, 360px ); }
	100% { transform: translate( 40px, 200px ); }
}
@keyframes sf-tr-demohalo {
	0%, 100% { transform: scale(0.7); opacity: 0.7; }
	50% { transform: scale(1.15); opacity: 0.25; }
}
.sf-tr-phone__bubble {
	position: absolute;
	top: 12%; left: 50%;
	transform: translateX( -50% );
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.78rem;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgba(11, 46, 31, 0.22);
}
.sf-tr-phone__bubble strong { font-weight: 700; }
.sf-tr-phone__bubble-dot {
	width: 0.6em; height: 0.6em;
	border-radius: 50%;
	background: var(--wp--preset--color--primario, #00a74d);
}
.sf-js .sf-tr-phone .sf-tr-phone__bubble-dot { animation: sf-tr-blink 1.4s ease-in-out infinite; animation-play-state: paused; }
.sf-js .sf-tr-phone.is-play .sf-tr-phone__bubble-dot { animation-play-state: running; }
@keyframes sf-tr-blink {
	0%, 100% { box-shadow: 0 0 0 0 color-mix( in srgb, var(--wp--preset--color--primario, #00a74d) 55%, transparent ); }
	60% { box-shadow: 0 0 0 6px transparent; }
}
.sf-tr-phone__sim {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 0.5rem;
	text-align: center;
	background: color-mix( in srgb, var(--wp--preset--color--verde-bosque, #0b2e1f) 82%, transparent );
	color: var(--sf-tr-crema);
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
}
/* Etiqueta cuando el teléfono muestra la captura REAL (no simulación): tono marca. */
.sf-tr-phone__sim--real { background: color-mix( in srgb, var(--wp--preset--color--primario, #00a74d) 84%, var(--wp--preset--color--verde-bosque, #0b2e1f) ); }
/* Entrada del teléfono (se posa). */
.sf-js .sf-tr-phone.sf-inview { opacity: 0; transform: translateY( 1.75rem ); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.sf-js .sf-tr-phone.sf-inview.is-inview { opacity: 1; transform: none; }

/* ===========================================================================
 * AIRE pre-CTA: unificado en la utilidad compartida .sf-pre-cta (main.css), aplicada en el markup
 * del CTA. Parches locales retirados (no se suman al aire común).
 * ========================================================================= */

/* ===========================================================================
 * MÓVIL — el plano rota a vertical; el teléfono baja bajo el texto.
 * ========================================================================= */
@media (max-width: 860px) {
	.sf-tr-batonroute { grid-template-columns: 1fr; }
	.sf-tr-phone { margin-top: clamp(1.5rem, 5vh, 2.5rem); }
}
@media (max-width: 720px) {
	.sf-tr-plano__orient--h { display: none; }
	.sf-tr-plano__orient--v { display: block; }
	.sf-tr-plano { max-width: 26rem; }
	.sf-tr-st__mun { font-size: 20px; }
	.sf-tr-st__par { font-size: 17px; }
	.sf-tr-hub__label { font-size: 22px; }
	.sf-tr-hub__label2 { font-size: 17px; }
}

/* ===========================================================================
 * REDUCED-MOTION — plano dibujado y quieto; buses estacionados en San Felix.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.sf-js .sf-tr-line { stroke-dashoffset: 0; }
	.sf-js .sf-tr-plano.is-inview .sf-tr-line,
	.sf-js .sf-tr-plano.is-inview .sf-tr-st,
	.sf-js .sf-tr-plano.is-inview .sf-tr-hub,
	.sf-js .sf-tr-plano.is-inview .sf-tr-hub__pulse {
		animation: none;
		opacity: 1;
		transform: none;
		transition: none;
	}
	.sf-js .sf-tr-plano.is-inview .sf-tr-st__ring { animation: none; transform: scale(1); }
	/* Los buses: visibles y estacionados donde los deja el JS (transform por atributo). */
	.sf-js .sf-tr-plano.is-inview .sf-tr-bus { animation: none; opacity: 1; transition: none; }
	.sf-js .sf-tr-phone .sf-tr-demo__bus,
	.sf-js .sf-tr-phone .sf-tr-demo__bus-halo,
	.sf-js .sf-tr-phone .sf-tr-phone__bubble-dot { animation: none !important; }
	.sf-js .sf-tr-phone.sf-inview,
	.sf-js .sf-tr-phone.sf-inview.is-inview { opacity: 1; transform: rotate(0); transition: none; }
}

/* ===========================================================================
 * HERO v3 — EL PLANO ASOMANDO (11/08/2026)
 *
 * El hero era la foto del bus y punto: plano, y sin relación con la pieza que
 * manda en esta página. Ahora la foto es el ORIGEN del plano — de debajo de la
 * tarjeta salen las tres líneas, con el mismo lenguaje que el plano de abajo, y
 * se van desvaneciendo por el borde inferior sin llegar a cerrar. El hub queda
 * fuera de cuadro a propósito: eso es lo que invita a bajar.
 *
 * OJO: .sf-svc-hero__media es COMPARTIDA (comedor, acogida, extraescolares…) y
 * trae overflow:hidden, sombra y rotación. Aquí NO se toca: se neutraliza solo en
 * esta página con el modificador, y la sombra y el giro pasan a la tarjeta de la
 * foto, que es a quien le corresponden.
 * ========================================================================= */
.sf-tr-hero {
	overflow: visible;
	box-shadow: none;
	border-radius: 0;
	transform: none;
	/*
	 * La figura vuelve a medir lo que mide la foto. Antes era más alta (4/4.35) para
	 * dejar por debajo la banda del plano asomando; retirado el plano, esa banda era
	 * un hueco vacío que descolgaba la columna derecha del hero.
	 */
	aspect-ratio: 4 / 3;
}

/* La tarjeta de la foto: se queda con la sombra y el giro que antes tenía la figura. */
.sf-tr-hero__card {
	position: absolute;
	inset: 0 0 auto 0;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 64px -34px rgba(11, 46, 31, 0.55);
	transform: rotate(-1deg);
	z-index: 2;
}

/*
 * EL PLANO ASOMANDO: RETIRADO (12/08/2026). Aquí vivían las tres líneas de cera
 * que caían bajo la foto del bus, sus paradas, el bus pequeño que bajaba por la
 * del medio y el rótulo «El plano completo, más abajo». Dos versiones y las dos
 * se leían como tres ganchos colgando; el porqué está en page-transporte.php.
 *
 * (`sf-tr-bus__*` NO se toca: esas reglas las sigue usando el bus del plano de
 * verdad, que es otro y ese sí funciona.)
 */

/* En móvil la tarjeta se endereza. */
@media (max-width: 60rem) {
	.sf-tr-hero__card { transform: none; }
}