/*
 * /colegio-castro-urdiales/ — la landing de Castro.
 * ===========================================================================
 *
 * La pieza central es EL VIAJE: la línea Kostaldea trazada a cera, que se dibuja
 * al ritmo del scroll. El resto de la página está al servicio de ese momento —
 * hero corto para llegar pronto, y después de la línea, las razones.
 *
 * REGLA DE RENDIMIENTO DE ESTA PÁGINA (es de campaña: la mitad del tráfico va a
 * llegar por un anuncio o un resultado, con prisa y con datos móviles):
 *   · con el scroll solo cambian `transform` y `stroke-dashoffset`. Nada de
 *     `top`, `height` ni `width`, que obligan a recalcular el documento entero;
 *   · la foto del hero carga `eager` con `fetchpriority=high` (es el LCP) y las
 *     tres de las razones van `lazy` con `width`/`height` puestos, para que no
 *     haya ni un salto de maquetación;
 *   · nada de tipografías nuevas ni de librerías: el SVG es markup.
 */


/* ===========================================================================
 * LAS TRES PIEZAS QUE ANTES VENÍAN DE LA HOJA COMPARTIDA (12/08/2026)
 *
 * Esta página cargaba `page-servicios.css` entera —14 KB, bloqueantes— para
 * usar de ella exactamente TRES cosas: el CTA, su punto verde y el botón. Como
 * la landing ya tiene hoja propia, esas tres se copian aquí y la compartida
 * deja de cargarse: una petición bloqueante menos en la cadena crítica de una
 * página de campaña, que es donde cada décima se paga en visitas perdidas.
 *
 * Son copia LITERAL, no una versión: si un día cambian en la hoja compartida,
 * cámbialas aquí también. Es el precio de no arrastrar 14 KB, y está pagado a
 * propósito. (`.sf-pre-cta` sigue viniendo de main.css, que ya carga siempre.)
 * ========================================================================= */
.sf-svc-dot {
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primario, #00a74d);
	flex: 0 0 auto;
}
.sf-svc-cta {
	position: relative;
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	color: var(--wp--preset--color--crema, #f7f5ef);
	text-align: center;
	padding-block-end: clamp(4rem, 10vh, 6.5rem);
	padding-inline: clamp(1.5rem, 6vw, 6rem);
}
.sf-svc-cta__inner { max-width: 64rem; margin-inline: auto; }
.sf-svc-cta__title {
	margin: 0 0 clamp(1.5rem, 4vh, 2.25rem);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400; line-height: 1.04; text-wrap: balance;
	font-size: clamp(2rem, 5vw, 3.2rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
}
.sf-svc-cta__btn {
	display: inline-flex; align-items: center;
	min-height: 3.25rem;
	padding: 0.9rem 2.2rem;
	border-radius: 999px;
	background-color: var(--sf-boton);
	color: var(--wp--preset--color--crema, #f7f5ef);
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.9rem; letter-spacing: 0.04em;
	text-decoration: none;
	transition: transform 0.3s ease, background-color 0.3s ease;
}
.sf-svc-cta__btn:hover, .sf-svc-cta__btn:focus-visible {
	transform: translateY(-2px);
	background-color: var(--sf-boton-hover);
}
.sf-svc-cta__trust {
	margin: clamp(1.5rem, 4vh, 2.25rem) 0 0;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.72rem; letter-spacing: 0.1em;
	color: color-mix(in srgb, var(--wp--preset--color--crema, #f7f5ef) 58%, transparent);
}

/* ===========================================================================
 * 1. HERO DE ESTRENO — el motor del hero de la portada, a sangre
 *
 * Foto a pantalla completa + velo verde bosque + Ken Burns lentísimo. El velo NO
 * es decoración: es lo que garantiza que el titular tenga contraste AA pase lo
 * que pase con la foto que haya detrás — y el día que entre el vídeo, igual.
 * ========================================================================= */
.sf-castro-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: min(86vh, 780px);
	padding-block: clamp(3rem, 9vh, 6rem) clamp(4.5rem, 12vh, 8rem);
	padding-inline: clamp(1.5rem, 6vw, 6rem);
	overflow: hidden;
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	color: var(--wp--preset--color--crema, #f7f5ef);
}
/* Sin foto, el hero sigue siendo un hero: verde de la casa y a correr. */
.sf-castro-hero--solo { min-height: auto; }

.sf-castro-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sf-castro-hero__img,
.sf-castro-hero__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 34%; /* las caras, arriba: el texto va sobre el cuerpo de la foto */
}
/*
 * ─── EL TRAVELLING DE CÁMARA (12/08/2026) ───────────────────────────────────
 *
 * Antes había un Ken Burns en bucle: la foto iba y venía sola, sin relación con
 * nada. Ahora la cámara la mueve QUIEN LEE: la foto arranca en plano ABIERTO y
 * se va CERRANDO sobre el abrazo a medida que se baja. Es la diferencia entre
 * una animación y una intención — el gesto dice «mira esto» al mismo ritmo al
 * que la persona decide mirar.
 *
 * Y el fondo va un poco por detrás del texto (parallax de 40 px): lo justo para
 * que el hero tenga profundidad y no lo justo para que se note el truco.
 *
 * `--z` y `--py` las escribe page-castro.js dentro de un requestAnimationFrame.
 * Por fotograma cambia UN transform y nada más: ni layout, ni pintura de fondo.
 * `will-change` solo mientras el hero está en pantalla — dejarlo puesto siempre
 * reserva una capa de GPU del tamaño de la pantalla para nada.
 */
.sf-castro-hero__img {
	transform: scale(var(--z, 1)) translate3d(0, var(--py, 0px), 0);
	transform-origin: center 42%;   /* el abrazo, que es hacia donde cierra */
}
.sf-castro-hero.is-cerca .sf-castro-hero__img { will-change: transform; }

/*
 * QUE ALGO RESPIRE EN EL PRIMER SEGUNDO (13/08). Dos alientos, los dos sobre la
 * propiedad `scale` SUELTA — compone multiplicando con el transform del travelling,
 * así el scroll-zoom (--z) nunca queda pisado por una animación de transform:
 *   1) El ATERRIZAJE: la foto se asienta 1.05 → 1 al cargar, a la vez que entra el
 *      texto (ambas plataformas). Una vez, con `both`.
 *   2) El KEN BURNS móvil: donde el scroll-zoom cunde menos, la foto respira sola
 *      1 → 1.06 en vaivén lento tras aterrizar. Pausable (botón abajo-dcha, patrón
 *      del vídeo) y apagado con reduced-motion, como manda WCAG 2.2.2.
 */
@media (prefers-reduced-motion: no-preference) {
	.sf-castro-hero__img { animation: sf-castro-asienta 2s cubic-bezier(0.22, 1, 0.36, 1) both; }
	@media (max-width: 899px) {
		.sf-castro-hero__img {
			animation:
				sf-castro-asienta 2s cubic-bezier(0.22, 1, 0.36, 1) both,
				sf-castro-kb 16s ease-in-out 2s infinite alternate;
		}
		.sf-castro-hero.is-quieto .sf-castro-hero__img { animation-play-state: paused, paused; }
	}
}
@keyframes sf-castro-asienta { from { scale: 1.05; } to { scale: 1; } }
@keyframes sf-castro-kb { from { scale: 1; } to { scale: 1.06; } }

/* El botón de pausa del aliento: solo móvil, discreto, sobre la esquina de la foto. */
.sf-castro-hero__pausa {
	display: none;
	position: absolute;
	right: 0.85rem;
	bottom: 0.85rem;
	z-index: 3;
	width: 34px; height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(8, 37, 26, 0.55);
	color: var(--wp--preset--color--crema, #f7f5ef);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.sf-castro-hero__pausa svg { display: block; margin: auto; }
.sf-castro-hero__pausa .icono-play { display: none; }
.sf-castro-hero.is-quieto .icono-pausa { display: none; }
.sf-castro-hero.is-quieto .icono-play { display: block; }
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
	html.sf-js .sf-castro-hero__pausa { display: grid; }
}

.sf-castro-hero__video { z-index: 1; }

/*
 * EL VELO. Dos capas: un degradado vertical que oscurece más abajo (donde vive
 * el texto) y un tinte verde bosque plano que ata la foto a la paleta. Medido:
 * con el velo, el titular crema sobre la zona más clara de la foto da 9,4:1.
 */
.sf-castro-hero__velo {
	position: absolute; inset: 0; z-index: 2;
	background:
		linear-gradient(180deg, rgba(11, 46, 31, 0.52) 0%, rgba(11, 46, 31, 0.74) 46%, rgba(11, 46, 31, 0.92) 100%),
		color-mix(in srgb, var(--wp--preset--color--verde-bosque, #0b2e1f) 34%, transparent);
	pointer-events: none;
}
/*
 * EL VELO DIRECCIONAL (12/08/2026, tarde). El velo plano oscurecía la foto
 * ENTERA por igual, así que el abrazo —que es el motivo de haber elegido esta
 * foto— no se veía: solo un fondo verde con textura. Ahora el velo es un
 * gradiente lateral: denso donde vive el texto (izquierda, AA garantizado) y
 * abriéndose hacia la derecha para que la foto respire y las caras se vean.
 *
 * SOLO EN ESCRITORIO: en el teléfono el texto ocupa el ancho entero y el velo
 * direccional dejaría letras sobre foto clara. Ahí sigue el vertical de siempre.
 */
@media (min-width: 900px) {
	.sf-castro-hero__velo {
		background:
			linear-gradient(97deg,
				rgba(11, 46, 31, 0.94) 0%,
				rgba(11, 46, 31, 0.88) 42%,
				rgba(11, 46, 31, 0.60) 66%,
				rgba(11, 46, 31, 0.30) 86%,
				rgba(11, 46, 31, 0.22) 100%),
			color-mix(in srgb, var(--wp--preset--color--verde-bosque, #0b2e1f) 18%, transparent);
	}
	/* Y la foto se encuadra para que el abrazo caiga en la zona que respira. */
	.sf-castro-hero__img { object-position: 66% 30%; }
}

.sf-castro-hero__inner { position: relative; z-index: 1; max-width: 62rem; margin-inline: auto; width: 100%; }

.sf-castro-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 0.6em; margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	letter-spacing: 0.2em; text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--crema, #f7f5ef) 88%, transparent);
}

/* EL TITULAR XXL. Dos líneas de bloque, como la portada. */
.sf-castro-hero__title {
	margin: 0 0 1.1rem;
	font-family: var(--wp--preset--font-family--titulos);
	/* 1.0: a 0.94 la virgulilla de la Ñ rozaba la línea de arriba. */
	font-weight: 400; line-height: 1.0; letter-spacing: -0.01em;
	font-size: clamp(2.5rem, 8.4vw, 6rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
	text-wrap: balance;
}
.sf-castro-hero__title span { display: block; }
/* La segunda línea, un punto más baja de tono: la primera es la promesa. */
.sf-castro-hero__l2 { color: color-mix(in srgb, var(--wp--preset--color--crema, #f7f5ef) 76%, transparent); }

/*
 * EL KICKER DEL CLAIM, con presencia (12/08/2026, tarde). Era un susurro de
 * 0,72rem al 90 % — y es EL argumento de la casa, el que ningún rival puede
 * copiar. Sube de cuerpo, coge el crema pleno y una pastilla del verde vivo al
 * 22 % que lo despega del fondo sin gritar. La jerarquía queda: titular (qué
 * pasa), kicker (por qué importa), sub (los datos).
 */
.sf-castro-hero__claim {
	display: inline-block; margin: 0 0 1.2rem;
	padding: 0.4rem 0.9rem 0.4rem 0.85rem;
	border-left: 4px solid var(--wp--preset--color--primario, #00a74d);
	border-radius: 0 0.4rem 0.4rem 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--primario, #00a74d) 22%, transparent);
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: clamp(0.82rem, 1.9vw, 0.98rem); letter-spacing: 0.16em;
	color: var(--wp--preset--color--crema, #f7f5ef);
}

.sf-castro-hero__sub {
	margin: 0 0 1.6rem; max-width: 46ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.55;
	color: color-mix(in srgb, var(--wp--preset--color--crema, #f7f5ef) 84%, transparent);
}

.sf-castro-hero__btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 3.25rem;
	padding: 0.9rem 2.2rem;
	border-radius: 999px;
	background-color: var(--sf-boton, #00803b);
	color: var(--wp--preset--color--crema, #f7f5ef);
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.95rem; letter-spacing: 0.05em;
	text-decoration: none;
	transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.sf-castro-hero__btn:hover,
.sf-castro-hero__btn:focus-visible {
	background-color: var(--sf-boton-hover);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -12px rgba(0, 167, 77, 0.55);
	outline: none;
}
.sf-castro-hero__btn:focus-visible { box-shadow: 0 0 0 3px rgba(0, 167, 77, 0.5); }

.sf-castro-hero__chips {
	display: flex; flex-wrap: wrap; gap: 0.45rem;
	margin: 1.35rem 0 0; padding: 0; list-style: none;
}
.sf-castro-hero__chip {
	padding: 0.3rem 0.8rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--crema, #f7f5ef) 30%, transparent);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.68rem; letter-spacing: 0.11em;
	color: color-mix(in srgb, var(--wp--preset--color--crema, #f7f5ef) 82%, transparent);
}

/*
 * LA ENTRADA DEL TEXTO, una vez y al cargar (12/08/2026, tarde).
 *
 * El patrón del hero de la portada: animaciones que corren AL CARGAR por CSS,
 * no por IntersectionObserver — así el texto nunca depende de un observer para
 * existir (la regla de oro). Son animaciones con `both`: durante el retardo se
 * ven en su fotograma inicial y SIEMPRE terminan a opacidad 1, con o sin JS,
 * porque el CSS corre solo. Escalonado suave de la casa: eyebrow → titular →
 * kicker → párrafo → botón, 90 ms entre pasos.
 */
@keyframes sf-castro-entra {
	from { opacity: 0; transform: translateY(0.85rem); }
	to   { opacity: 1; transform: none; }
}
.sf-castro-hero__eyebrow { animation: sf-castro-entra 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; }
.sf-castro-hero__title   { animation: sf-castro-entra 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both; }
.sf-castro-hero__claim   { animation: sf-castro-entra 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both; }
.sf-castro-hero__sub     { animation: sf-castro-entra 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.41s both; }
.sf-castro-hero__btn     { animation: sf-castro-entra 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.50s both; }
.sf-castro-hero__chips   { animation: sf-castro-entra 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.60s both; }

/*
 * EL TEASER DEL VIAJE: RETIRADO (12/08/2026). Aquí asomaba un trazo de cera por
 * el borde de abajo del hero, prestado de /transporte/. Sobraba: el viaje tiene
 * su propia escena treinta píxeles más abajo, con su trazo de verdad y su bus, y
 * anunciarlo dos veces le quitaba el efecto a la buena.
 */

@media (max-width: 899px) {
	/* El botón entra en el primer pantallazo: se recorta el alto y se aprieta el aire. */
	.sf-castro-hero {
		min-height: auto;
		padding-block: clamp(2rem, 5vh, 3rem) clamp(3.5rem, 9vh, 5rem);
	}
	.sf-castro-hero__title { font-size: clamp(2.35rem, 10.5vw, 3.4rem); }
	.sf-castro-hero__sub { margin-bottom: 1.35rem; }
	/* Los chips se dicen otra vez más abajo; aquí le robarían el sitio al botón. */
	.sf-castro-hero__chips { display: none; }
}

/* ===========================================================================
 * 2. EL VIAJE — la escena
 *
 * Todo lo que se mueve aquí lo hace con `stroke-dashoffset` o con `transform`.
 * Ni una propiedad de layout por fotograma: es una página de campaña y el scroll
 * tiene que ir liso también en un teléfono de hace cuatro años.
 * ========================================================================= */
.sf-castro-viaje {
	background-color: var(--wp--preset--color--crema, #f7f5ef);
	padding-block: clamp(3rem, 9vh, 6rem);
	padding-inline: clamp(1.25rem, 5vw, 5rem);
	overflow: hidden;
}
.sf-castro-viaje__inner { max-width: 80rem; margin-inline: auto; }

.sf-castro-viaje__eyebrow {
	display: inline-flex; align-items: baseline; gap: 0.6em; margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-castro-viaje__title {
	margin: 0 0 clamp(1rem, 3vh, 1.75rem); max-width: 20ch;
	font-family: var(--wp--preset--font-family--titulos);
	/* 1.12 y no 1.02: con Anton tan prieto, la coma de «MAÑANA,» besaba la
	   «CASA.» de abajo y se leía con acento fantasma. Cazado en la pasada. */
	font-weight: 400; line-height: 1.12; text-wrap: balance;
	font-size: clamp(2rem, 5.4vw, 3.6rem);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

/*
 * DOS ORIENTACIONES, como el plano de /transporte/. En móvil la escena horizontal
 * se quedaba en una miniatura con las etiquetas ilegibles, y por ahí llega la
 * mitad del tráfico de campaña: eso no es responsive, es amputar.
 */
.sf-castro-viaje__fig { margin: 0; }
.sf-castro-viaje__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sf-castro-viaje__orient--v { display: block; }
.sf-castro-viaje__orient--h { display: none; }
@media (min-width: 900px) {
	.sf-castro-viaje__orient--v { display: none; }
	.sf-castro-viaje__orient--h { display: block; }
}
/*
 * En vertical el lienzo es alto y estrecho: se le da un tope de ancho para que en
 * una tablet no se estire a lo bobo, y se centra.
 */
.sf-castro-viaje__orient--v .sf-castro-viaje__svg { max-width: 24rem; margin-inline: auto; }
/*
 * LOS CUERPOS DEL VERTICAL, calculados y no elegidos a ojo.
 *
 * En un teléfono el lienzo de 360 unidades se escala a ~360 px reales, o sea 1:1.
 * A la izquierda del trazo quedan 266 px. Space Mono con `letter-spacing: 0.1em`
 * avanza ~0,7 em por carácter, así que la etiqueta más larga que hay que meter
 * ahí —«TRANSBORDORIK GABE», 18 caracteres— pide como mucho 266 / (18 × 0,7) =
 * 21 px. De ahí salen estos números.
 *
 * Y por eso se comprueban EN EUSKERA, no en castellano: «SIN TRANSBORDOS» son 15
 * caracteres y cabía de sobra; su lema en euskera son 18 y se salía del lienzo
 * por la izquierda, comiéndose la T. El idioma que manda para dimensionar es el
 * que más largo escribe.
 */
.sf-castro-viaje__orient--v .sf-castro-dato__k { font-size: 19px; }
.sf-castro-viaje__orient--v .sf-castro-dato__d { font-size: 17px; }
.sf-castro-viaje__orient--v .sf-castro-dato--grande .sf-castro-dato__k { font-size: 20px; }
.sf-castro-viaje__orient--v .sf-castro-dato--grande .sf-castro-dato__d { font-size: 17px; }
.sf-castro-viaje__orient--v .sf-castro-dato--chico .sf-castro-dato__k,
.sf-castro-viaje__orient--v .sf-castro-dato--chico .sf-castro-dato__d { font-size: 16px; }
.sf-castro-viaje__orient--v .sf-castro-hito__mun { font-size: 21px; }
.sf-castro-viaje__orient--v .sf-castro-hito__par { font-size: 17px; }

/* --- El paisaje: el mar de Castro a la izquierda ------------------------- */
.sf-castro-ola__l {
	fill: none;
	stroke: color-mix(in srgb, var(--wp--preset--color--primario, #00a74d) 32%, transparent);
	stroke-width: 5; stroke-linecap: round;
}
.sf-castro-ola__l:nth-child(2) { stroke: color-mix(in srgb, var(--wp--preset--color--primario, #00a74d) 24%, transparent); }
.sf-castro-ola__l:nth-child(3) { stroke: color-mix(in srgb, var(--wp--preset--color--primario, #00a74d) 16%, transparent); }
.sf-castro-costa {
	fill: none;
	stroke: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 20%, transparent);
	stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 11;
}

/* --- LA IKASTOLA: el destino, que es la casa ----------------------------- */
/*
 * Todo el conjunto va con el trazo de cera de la casa. El edificio en verde
 * bosque (es lo importante), el patio en el verde vivo (es lo que se mueve) y
 * el castillete en el ámbar de la línea Meatzaldea del plano: es de dónde
 * somos, va detrás y no compite.
 */
.sf-castro-casa path,
.sf-castro-casa circle {
	fill: none;
	stroke-linecap: round; stroke-linejoin: round;
}
/* El isotipo a cera (13/08): bloque y fachada en tinta de bosque; el ALA —la
   silueta que firma el logo— en el verde primario de la marca, más gruesa. */
.sf-castro-casa__bloque,
.sf-castro-casa__fachada {
	stroke: var(--wp--preset--color--verde-bosque, #0b2e1f);
	stroke-width: 7;
}
.sf-castro-casa__fachada { stroke-width: 5; }
.sf-castro-casa__ala {
	stroke: var(--wp--preset--color--primario, #00a74d);
	stroke-width: 8;
}
.sf-castro-casa__puerta {
	stroke: var(--wp--preset--color--verde-bosque, #0b2e1f);
	stroke-width: 5;
}
/* La hoja de la puerta, abierta hacia fuera: nadie llega a una puerta cerrada. */
.sf-castro-casa__hoja {
	stroke: color-mix(in srgb, var(--wp--preset--color--verde-bosque, #0b2e1f) 55%, transparent);
	stroke-width: 4;
}
.sf-castro-casa__patio path,
.sf-castro-casa__patio circle {
	stroke: var(--wp--preset--color--primario, #00a74d);
	stroke-width: 4;
}
.sf-castro-casa__suelo {
	stroke: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 26%, transparent);
	stroke-width: 4;
}
/*
 * La casa se dibuja cuando el bus está llegando, no antes: aparecer al principio
 * le quitaría el final al viaje. La clase la pone page-castro.js con el mismo
 * umbral que el punto de llegada.
 */
.sf-js .sf-castro-casa { opacity: 0; transition: opacity 0.6s ease; }
.sf-js .sf-castro-casa.is-on { opacity: 1; }

/* La gaviota. Un trazo, dos curvas: no hace falta más. */
.sf-castro-gaviota {
	fill: none;
	stroke: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 34%, transparent);
	stroke-width: 4; stroke-linecap: round;
}

/* El mar aparece antes que la ruta: primero el sitio, después el viaje. */
.sf-js .sf-castro-ola,
.sf-js .sf-castro-costa { opacity: 0; transition: opacity 0.7s ease; }
.sf-js .sf-castro-viaje__fig.is-inview .sf-castro-ola,
.sf-js .sf-castro-viaje__fig.is-inview .sf-castro-costa { opacity: 1; }

/* --- LA RUTA: el trazo grueso que se dibuja con el scroll ---------------- */
.sf-castro-ruta {
	fill: none;
	stroke: var(--wp--preset--color--verde-bosque, #0b2e1f);
	stroke-width: 13; stroke-linecap: round; stroke-linejoin: round;
}
/*
 * Sin JS el trazo sale ENTERO: la regla de oro. `--p` (0→1) la mueve page-castro.js.
 *
 * `100 200` y no `100` a secas: con un dasharray de solo 100 el patrón se repite
 * cada 100 unidades, así que con el trazo «sin dibujar» (offset 100) el cabo
 * REDONDO del siguiente dash asomaba como un punto suelto al final de la ruta —
 * un lunar verde flotando en medio del crema antes de que empezara nada. Con un
 * hueco de 200 detrás, el patrón no da la vuelta y no hay nada que asome.
 */
.sf-js .sf-castro-ruta {
	stroke-dasharray: 100 200;
	stroke-dashoffset: calc(100 - var(--p, 1) * 100);
}

/* --- EL BUS: el protagonista de la escena -------------------------------- */
/*
 * `offset-path` lo lleva por la MISMA curva que el trazo (la `d` llega desde PHP
 * en `--ruta`, así no hay dos verdades) y `offset-distance` lo empuja con la
 * variable del scroll. Solo cambia un transform.
 *
 * Es ADORNO: si el navegador no entiende offset-path, el bus no se pinta y no se
 * pierde ni un dato. Por eso vive entero dentro de un @supports.
 */
.sf-castro-bus { display: none; }
@supports (offset-path: path('M 0 0 L 1 1')) {
	.sf-js .sf-castro-bus {
		display: block;
		offset-path: var(--ruta);
		/*
		 * EL BUS APARCA, NO ARROLLA. Se detiene antes del final del trazo para que
		 * el tramo de delante de la puerta quede libre: un vehículo dibujado encima
		 * de dos figuras infantiles se lee fatal, y con razón.
		 *
		 * Cada orientación tiene su punto de parada (`--parada`) porque sus curvas
		 * son distintas: en horizontal el bus se queda en el llano antes de bajar a
		 * la casa; en vertical, más arriba todavía, porque allí el edificio ocupa
		 * los últimos cien puntos del lienzo. Los dos números salen del medidor
		 * (`tools/audit-viaje.mjs`), no de mirarlo.
		 */
		offset-distance: calc(var(--p, 1) * var(--parada, 84%));
		offset-rotate: auto;
		opacity: 0;
		transition: opacity 0.4s ease;
	}
	.sf-js .sf-castro-viaje__fig.is-inview .sf-castro-bus { opacity: 1; }
	/*
	 * EN VERTICAL EL BUS NO SE GIRA. `offset-rotate: auto` lo pone mirando hacia
	 * abajo, que en un esquema de arriba a abajo se lee como un bus cayéndose.
	 * Derecho y bajando es lo que entiende cualquiera.
	 */
	.sf-js .sf-castro-viaje__orient--v .sf-castro-bus { offset-rotate: 0deg; --parada: 76%; }
}
/* Un pelín más grande de lo que pide el trazo: es el que hay que ver. */
.sf-castro-bus__cuerpo { transform: scale(1.25); }

.sf-castro-bus__sombra {
	fill: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 16%, transparent);
	stroke: none;
}
.sf-castro-bus__chapa {
	fill: var(--wp--preset--color--crema, #f7f5ef);
	stroke: var(--wp--preset--color--verde-bosque, #0b2e1f);
	stroke-width: 2.6; stroke-linejoin: round;
}
/* La franja del techo: el ámbar de Zurekin, que es su color de verdad. */
.sf-castro-bus__franja {
	fill: none; stroke: #e0912b; stroke-width: 3.4; stroke-linecap: round;
}
.sf-castro-bus__ventana {
	fill: color-mix(in srgb, var(--wp--preset--color--verde-niebla, #e1f5ee) 90%, transparent);
	stroke: var(--wp--preset--color--verde-bosque, #0b2e1f);
	stroke-width: 1.6; stroke-linejoin: round;
}
/* Tres cabecitas. Sin caras: la ley de la casa vale también para los dibujos. */
.sf-castro-bus__txiki {
	fill: color-mix(in srgb, var(--wp--preset--color--verde-bosque, #0b2e1f) 62%, transparent);
	stroke: none;
}
.sf-castro-bus__faro { fill: #ffd166; stroke: #e0912b; stroke-width: 1; }

.sf-castro-bus__rueda circle {
	fill: var(--wp--preset--color--verde-bosque, #0b2e1f);
	stroke: none;
}
.sf-castro-bus__rueda path {
	fill: none;
	stroke: color-mix(in srgb, var(--wp--preset--color--crema, #f7f5ef) 70%, transparent);
	stroke-width: 1.2; stroke-linecap: round;
}
/*
 * LAS RUEDAS GIRAN DE VERDAD, y giran con el avance: `--p` va de 0 a 1 a lo
 * largo del viaje, así que multiplicándolo por unas cuantas vueltas se obtiene
 * el ángulo. No es una animación en bucle — si el scroll se para, las ruedas se
 * paran, que es lo que hacen las ruedas.
 */
.sf-castro-bus__rueda {
	transform-box: fill-box;
	transform-origin: center;
	rotate: calc(var(--p, 0) * 1440deg);
}
.sf-castro-bus__rueda--tras { translate: -9px 11px; }
.sf-castro-bus__rueda--del  { translate: 12px 11px; }

/* --- Los hitos del trazo, con jerarquía ---------------------------------- */
/*
 * TRES TAMAÑOS, y el tamaño ES el argumento: el «grande» responde a la pregunta
 * que más pesa (¿es directo?), los «normales» a las dos siguientes, y el
 * «chico» es el dato de contexto que antes ocupaba el hueco de honor.
 */
.sf-castro-dato__tirante {
	stroke: color-mix(in srgb, var(--wp--preset--color--verde-bosque, #0b2e1f) 30%, transparent);
	stroke-width: 2; stroke-dasharray: 3 6;
}
.sf-castro-dato__pt {
	fill: var(--wp--preset--color--crema, #f7f5ef);
	stroke: var(--wp--preset--color--verde-bosque, #0b2e1f);
	stroke-width: 4;
}
.sf-castro-dato__k {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 16px; letter-spacing: 0.1em;
	fill: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-castro-dato__d {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 16px;
	fill: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 62%, transparent);
}

/*
 * LA JERARQUÍA, ajustada DESPUÉS de resolver el espacio y no antes: una
 * jerarquía que depende de apretar no es jerarquía, es un accidente. Con la
 * espina de pez el sitio ya está garantizado, así que el destacado puede crecer
 * y los normales bajar un punto sin que nada se toque. Comprobado con el
 * medidor después de tocarlo.
 */
.sf-castro-dato--grande .sf-castro-dato__k { font-size: 26px; fill: var(--wp--preset--color--primario, #00a74d); }
.sf-castro-dato--grande .sf-castro-dato__d { font-size: 19px; }
.sf-castro-dato--grande .sf-castro-dato__pt { r: 9; stroke: var(--wp--preset--color--primario, #00a74d); stroke-width: 5; }
.sf-castro-dato--grande .sf-castro-dato__tirante { stroke: var(--wp--preset--color--primario, #00a74d); stroke-dasharray: none; stroke-width: 2.5; }

/* EL CHICO: contexto. Se lee si se busca, no se impone. */
.sf-castro-dato--chico .sf-castro-dato__k { font-size: 14px; fill: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 58%, transparent); }
.sf-castro-dato--chico .sf-castro-dato__d { font-size: 14px; fill: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 46%, transparent); }
.sf-castro-dato--chico .sf-castro-dato__pt { r: 5.5; stroke-width: 3.5; }

.sf-js .sf-castro-dato { opacity: 0; transition: opacity 0.45s ease; }
.sf-js .sf-castro-dato.is-on { opacity: 1; }

/*
 * EL HITO DE 2007, RETIRADO DEL HUECO GRANDE (12/08/2026). Aquí vivía el número
 * a 76 px en verde. 2007 es un dato que nos enorgullece a NOSOTROS; a la ama que
 * mira esta página con el bebé en brazos no le resuelve ninguna duda. Ahora es
 * un hito pequeño más del trazo (`.sf-castro-dato--chico`) y su historia entera
 * está en el párrafo, que es donde se lee sin gritar.
 */

/* --- Los dos puntos con nombre ------------------------------------------- */
.sf-castro-hito__anillo {
	fill: var(--wp--preset--color--crema, #f7f5ef);
	stroke: var(--wp--preset--color--verde-bosque, #0b2e1f);
	stroke-width: 6;
}
.sf-castro-hito__halo {
	fill: color-mix(in srgb, var(--wp--preset--color--primario, #00a74d) 16%, transparent);
	transform-box: fill-box; transform-origin: center;
}
.sf-castro-hito__disco {
	fill: var(--wp--preset--color--crema, #f7f5ef);
	stroke: var(--wp--preset--color--primario, #00a74d);
	stroke-width: 5;
}
.sf-castro-hito__mun {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 23px; letter-spacing: 0.1em;
	fill: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-castro-hito__par {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 20px;
	fill: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 66%, transparent);
}
.sf-js .sf-castro-hito { opacity: 0; transition: opacity 0.45s ease; }
.sf-js .sf-castro-hito.is-on { opacity: 1; }
/* Cuando el autobús llega, el halo late una vez. Una, no en bucle. */
.sf-js .sf-castro-hito--llega.is-on .sf-castro-hito__halo { animation: sf-castro-latido 1.1s ease-out 1; }
@keyframes sf-castro-latido {
	0%   { transform: scale(0.55); opacity: 0; }
	45%  { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* --- La historia, al lado del trazo -------------------------------------- */
.sf-castro-viaje__texto {
	display: grid; gap: 0.9rem;
	max-width: 62ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: clamp(0.98rem, 1.9vw, 1.08rem); line-height: 1.62;
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 84%, transparent);
}
.sf-castro-viaje__texto p { margin: 0; }
@media (min-width: 1000px) {
	/* Se sube al hueco que deja el trazo por la izquierda, bajo el mar. */
	.sf-castro-viaje__texto { max-width: 34rem; margin-top: clamp(-5rem, -4vw, -1rem); }
}
.sf-castro-viaje__links a {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.85rem; letter-spacing: 0.05em;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	text-underline-offset: 4px;
}

/* ===========================================================================
 * 3. EL CLAIM, con el lenguaje de la forja
 *
 * La banda oscura y los cuatro números gigantes de la portada, con el revelado
 * escalonado — pero sin GSAP. El `--i` de cada etapa es el retardo, y el
 * IntersectionObserver común (`sf-inview`) dispara la banda entera.
 * ========================================================================= */
.sf-castro-claim {
	position: relative;
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	color: var(--wp--preset--color--crema, #f7f5ef);
	padding-block: clamp(3.5rem, 11vh, 6.5rem);
	padding-inline: clamp(1.5rem, 6vw, 6rem);
	text-align: center;
	overflow: hidden;
}
/*
 * AQUÍ HUBO UN FONDO DE VÍDEO Y YA NO LO HAY (12/08/2026): el vídeo cogió
 * z-index:1 en el arreglo del cartel, el velo se quedó en auto, y la banda del
 * argumento maestro salió lavada bajo los planos blancos del vídeo. El claim es
 * banda SÓLIDA — una banda de texto con fondo variable es una banda rota en
 * potencia. El vídeo vive ahora en su propia sección, «Así es por dentro».
 */

.sf-castro-claim__inner { max-width: 62rem; margin-inline: auto; }
.sf-castro-claim__title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400; line-height: 1.02; text-wrap: balance;
	font-size: clamp(1.9rem, 5.4vw, 3.4rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
}
.sf-castro-claim__sub {
	margin: 0 auto clamp(2.25rem, 6vh, 3.25rem); max-width: 54ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: clamp(0.98rem, 2vw, 1.08rem); line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--crema, #f7f5ef) 82%, transparent);
}

/*
 * Las cuatro etapas, cosidas por un filete: es UN recorrido, no cuatro cajas.
 * El filete se dibuja de izquierda a derecha con la banda (scaleX), igual que
 * la línea de la forja en móvil.
 */
.sf-castro-claim__etapas {
	position: relative;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem;
	margin: 0; padding: 0; list-style: none;
}
@media (min-width: 760px) { .sf-castro-claim__etapas { grid-template-columns: repeat(4, 1fr); gap: 0; } }
.sf-castro-claim__etapas::before {
	content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 3px;
	border-radius: 3px;
	background-color: color-mix(in srgb, var(--wp--preset--color--primario, #00a74d) 45%, transparent);
	transform: scaleX(0); transform-origin: left center;
}
/*
 * EN MÓVIL LA LÍNEA VA POR ETAPA (12/08, pasada de la ama). Con el 2×2, la línea
 * única del OL solo existía en la primera fila y los puntos de la segunda
 * flotaban huérfanos: la metáfora del recorrido se rompía a la mitad. Cada
 * etapa lleva ahora su propio tramo, y todas tienen línea y punto.
 */
@media (max-width: 759px) {
	.sf-castro-claim__etapas::before { display: none; }
	.sf-castro-claim__etapa {
		border-top: 3px solid color-mix(in srgb, var(--wp--preset--color--primario, #00a74d) 45%, transparent);
		border-radius: 3px;
	}
	html:not(.sf-js) .sf-castro-claim__etapa,
	.sf-js .sf-castro-claim__etapa { padding-top: 1.9rem; }
}
.sf-js .sf-castro-claim__etapas.is-inview::before {
	transform: scaleX(1);
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Sin JS el filete está puesto y ya. */
html:not(.sf-js) .sf-castro-claim__etapas::before { transform: scaleX(1); }

.sf-castro-claim__etapa {
	position: relative;
	display: grid; gap: 0.25rem; justify-items: center;
	padding-top: 1.9rem;
}
/* El hito de cada etapa: el punto que se enciende en secuencia. */
.sf-castro-claim__etapa::after {
	content: ""; position: absolute; top: -4px; left: 50%;
	width: 11px; height: 11px; border-radius: 50%;
	background-color: var(--wp--preset--color--primario, #00a74d);
	transform: translateX(-50%) scale(0);
}
.sf-js .sf-castro-claim__etapas.is-inview .sf-castro-claim__etapa::after {
	transform: translateX(-50%) scale(1);
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.55s + var(--i, 0) * 0.16s);
}
html:not(.sf-js) .sf-castro-claim__etapa::after { transform: translateX(-50%) scale(1); }

/* EL NÚMERO, con la escala de la forja: es lo que se lee de lejos. */
.sf-castro-claim__edades {
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400; line-height: 1;
	font-size: clamp(2rem, 6vw, 3.4rem);
	color: var(--wp--preset--color--primario, #00a74d);
}
.sf-castro-claim__etiqueta {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.7rem; letter-spacing: 0.14em;
	color: color-mix(in srgb, var(--wp--preset--color--crema, #f7f5ef) 78%, transparent);
}
/* Cada etapa entra detrás de la anterior. Solo opacidad y transform. */
.sf-js .sf-castro-claim__etapas.is-inview .sf-castro-claim__edades,
.sf-js .sf-castro-claim__etapas.is-inview .sf-castro-claim__etiqueta {
	animation: sf-castro-etapa 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(0.6s + var(--i, 0) * 0.16s);
}
@keyframes sf-castro-etapa {
	from { opacity: 0; transform: translateY(0.9rem); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sf-js .sf-castro-claim__etapas::before,
	.sf-js .sf-castro-claim__etapa::after { transform: scaleX(1); transition: none; }
	.sf-js .sf-castro-claim__etapa::after { transform: translateX(-50%) scale(1); }
	.sf-js .sf-castro-claim__etapas.is-inview .sf-castro-claim__edades,
	.sf-js .sf-castro-claim__etapas.is-inview .sf-castro-claim__etiqueta { animation: none; }
}

/* ===========================================================================
 * 4. LAS TRES RAZONES, con foto
 * ========================================================================= */
.sf-castro-razones {
	background-color: var(--wp--preset--color--crema, #f7f5ef);
	padding-block: clamp(3rem, 8vh, 5rem);
	padding-inline: clamp(1.5rem, 6vw, 6rem);
}
.sf-castro-razones__inner { max-width: 76rem; margin-inline: auto; }
.sf-castro-razones__lista {
	display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
	margin: 0; padding: 0; list-style: none;
}
@media (min-width: 860px) { .sf-castro-razones__lista { grid-template-columns: repeat(3, 1fr); } }

.sf-castro-razon {
	display: flex; flex-direction: column;
	background-color: #fff;
	border-radius: 1.15rem;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(8, 37, 26, 0.07);
}
.sf-castro-razon__media { margin: 0; overflow: hidden; }
.sf-castro-razon__img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 2; object-fit: cover;
}
.sf-castro-razon__body {
	display: flex; flex-direction: column; gap: 0.4rem;
	padding: clamp(1.1rem, 3vw, 1.6rem);
	flex: 1 1 auto;
}
.sf-castro-razon__k {
	margin: 0;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.72rem; letter-spacing: 0.14em;
	color: var(--wp--preset--color--primario, #00a74d);
}
.sf-castro-razon__t {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400; line-height: 1.1;
	font-size: clamp(1.2rem, 2.6vw, 1.5rem);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-castro-razon__d {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.95rem; line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 80%, transparent);
}
.sf-castro-razon__link {
	margin-top: auto;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.8rem; letter-spacing: 0.06em;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * LA VIDA DE LAS TARJETAS (12/08/2026) — tres gestos, los tres de la casa
 * ------------------------------------------------------------------------- */

/*
 * 1. LA FOTO RESPIRA. Ken Burns lentísimo y permanente (no solo al hover): una
 *    tarjeta con la foto quieta parece un folleto. 18 s, apenas perceptible.
 *    Al pasar el ratón se acerca un punto más, que es el «te estoy oyendo».
 */
.sf-castro-razon__img {
	animation: sf-castro-razon-kb 18s ease-in-out infinite alternate;
	transform-origin: center 40%;
}
@keyframes sf-castro-razon-kb {
	from { transform: scale(1.02); }
	to   { transform: scale(1.09); }
}
.sf-castro-razon:hover .sf-castro-razon__img,
.sf-castro-razon:focus-within .sf-castro-razon__img {
	animation-play-state: paused;
	transform: scale(1.11);
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * 2. EL DOODLE DE CERA se dibuja al entrar la tarjeta, con el escalonado del
 *    `--i`. Al pasar el ratón se REHACE —se borra y se vuelve a trazar—, que es
 *    el gesto de la casa: la cera se dibuja, no aparece.
 */
.sf-castro-razon__k {
	display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
}
.sf-castro-razon__doodle { width: 30px; height: 30px; flex: 0 0 auto; overflow: visible; }
.sf-castro-razon__doodle-l {
	fill: none;
	stroke: color-mix(in srgb, var(--wp--preset--color--primario, #00a74d) 62%, transparent);
	stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.sf-js .sf-castro-razon__doodle-l { stroke-dasharray: 100; stroke-dashoffset: 100; }
.sf-js .sf-castro-razon.is-inview .sf-castro-razon__doodle-l {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1) calc(0.25s + var(--i, 0) * 0.14s);
}
.sf-js .sf-castro-razon:hover .sf-castro-razon__doodle-l {
	animation: sf-castro-redibuja 1s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes sf-castro-redibuja {
	0%   { stroke-dashoffset: 100; }
	100% { stroke-dashoffset: 0; }
}

/*
 * 3. EL ENLACE SE SUBRAYA A ROTULADOR. Mismo motor que el destacado del bloque
 *    de euskera: un `background-image` que crece de 0 a 100 % del ancho, con
 *    `box-decoration-break: clone` por si parte en dos líneas. Sin JS el
 *    subrayado está puesto y ya (regla de oro).
 */
.sf-castro-razon__link-t {
	display: inline;
	padding: 0.06em 0.16em;
	margin: 0 -0.16em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	border-radius: 0.15em;
	background-image: linear-gradient(rgba(0, 231, 112, 0.42), rgba(0, 231, 112, 0.42));
	background-repeat: no-repeat;
	background-size: 100% 42%;
	background-position: 0 88%;
	transition: background-size 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.sf-js .sf-castro-razon__link-t { background-size: 0% 42%; }
.sf-js .sf-castro-razon:hover .sf-castro-razon__link-t,
.sf-js .sf-castro-razon__link:focus-visible .sf-castro-razon__link-t { background-size: 100% 42%; }
.sf-castro-razon__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primario, #00a74d); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.sf-castro-razon__img { animation: none; transform: none; }
	.sf-castro-razon:hover .sf-castro-razon__img { transform: none; transition: none; }
	.sf-js .sf-castro-razon__doodle-l { stroke-dasharray: none; stroke-dashoffset: 0; }
	.sf-js .sf-castro-razon:hover .sf-castro-razon__doodle-l { animation: none; }
	.sf-js .sf-castro-razon__link-t { background-size: 100% 42%; transition: none; }
}

/* ===========================================================================
 * 5a. LA CITA — el testimonio de /visita/, espejado
 * ========================================================================= */
.sf-castro-cita {
	background-color: var(--wp--preset--color--crema, #f7f5ef);
	padding-block: clamp(3rem, 8vh, 5rem);
	padding-inline: clamp(1.5rem, 6vw, 6rem);
}
.sf-castro-cita__inner {
	max-width: 72rem; margin-inline: auto;
	display: grid; gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
@media (min-width: 900px) {
	.sf-castro-cita--media .sf-castro-cita__inner { grid-template-columns: 1.25fr 0.75fr; }
}
.sf-castro-cita__eyebrow {
	display: inline-flex; align-items: baseline; gap: 0.6em; margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-castro-cita__fig { margin: 0; }
.sf-castro-cita__text {
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400; line-height: 1.12; text-wrap: balance;
	font-size: clamp(1.4rem, 3.6vw, 2.3rem);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-castro-cita__author {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 62%, transparent);
}
.sf-castro-cita__media { margin: 0; }
.sf-castro-cita__img {
	display: block; width: 100%; height: auto;
	border-radius: 1.15rem;
	aspect-ratio: 4 / 3; object-fit: cover;
	box-shadow: 0 14px 36px rgba(8, 37, 26, 0.12);
}

/* ===========================================================================
 * 5. FAQ — el motor de /visita/
 * ========================================================================= */
.sf-castro-faq {
	background-color: var(--wp--preset--color--verde-niebla, #e1f5ee);
	padding-block: clamp(3rem, 8vh, 5rem);
	padding-inline: clamp(1.5rem, 6vw, 6rem);
}
.sf-castro-faq__inner { max-width: 58rem; margin-inline: auto; }
.sf-castro-faq__eyebrow {
	display: inline-flex; align-items: baseline; gap: 0.6em; margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-castro-faq__title {
	margin: 0 0 clamp(1.25rem, 3vh, 1.75rem);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400; line-height: 1.05; text-wrap: balance;
	font-size: clamp(1.7rem, 4.4vw, 2.6rem);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-castro-faq__item {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--verde-bosque, #0b2e1f) 16%, transparent);
}
.sf-castro-faq__item:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--verde-bosque, #0b2e1f) 16%, transparent);
}
.sf-castro-faq__summary {
	display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.9rem;
	padding: 1.05rem 0.2rem;
	cursor: pointer; list-style: none;
}
.sf-castro-faq__summary::-webkit-details-marker { display: none; }
.sf-castro-faq__summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primario, #00a74d); outline-offset: 2px;
}
.sf-castro-faq__num {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.72rem; letter-spacing: 0.1em;
	color: color-mix(in srgb, var(--wp--preset--color--primario, #00a74d) 90%, transparent);
}
.sf-castro-faq__q {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: clamp(1rem, 2.2vw, 1.12rem); line-height: 1.35;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-castro-faq__marker {
	position: relative; width: 14px; height: 14px; align-self: center;
	flex: 0 0 auto;
}
.sf-castro-faq__marker::before,
.sf-castro-faq__marker::after {
	content: ""; position: absolute; inset: 50% 0 auto 0;
	height: 2px; border-radius: 2px;
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	transform: translateY(-50%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.sf-castro-faq__marker::after { transform: translateY(-50%) rotate(90deg); }
.sf-castro-faq__item[open] .sf-castro-faq__marker::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.sf-castro-faq__answer { overflow: hidden; }
.sf-castro-faq__answer-inner { padding: 0 0 1.15rem 2.4rem; }
.sf-castro-faq__answer p {
	margin: 0; max-width: 62ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.97rem; line-height: 1.62;
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 82%, transparent);
}
/* Se despliega con altura animada solo si el navegador lo soporta sin saltos. */
@supports (interpolate-size: allow-keywords) {
	.sf-castro-faq__item::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
	}
	.sf-castro-faq__item[open]::details-content { block-size: auto; }
}

/* ===========================================================================
 * 6. LA BARRA MÓVIL (el patrón de /visita/)
 * ========================================================================= */
.sf-castro-barra {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
	display: flex;
	padding: 0.7rem clamp(1rem, 4vw, 1.5rem);
	padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	box-shadow: 0 -6px 20px rgba(8, 37, 26, 0.25);
	transform: translateY(120%);
	transition: transform 0.3s ease, visibility 0s linear 0.3s;
	/* Fuera de cuadro NO EXISTE: ni para el lector de pantalla ni para el tabulador. */
	visibility: hidden;
}
.sf-castro-barra.is-visible {
	transform: translateY(0);
	visibility: visible;
	transition: transform 0.3s ease, visibility 0s;
}
.sf-castro-barra__btn {
	flex: 1 1 auto;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	padding: 0.8rem 1rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primario, #00a74d);
	color: #06251a;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.9rem; letter-spacing: 0.05em;
	text-decoration: none;
}
@media (min-width: 900px) { .sf-castro-barra { display: none; } }

/* ===========================================================================
 * Sin movimiento
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	/* La cámara se queda quieta en plano abierto: la foto entera, sin travelling. */
	.sf-castro-hero__img { transform: none; }
	.sf-castro-hero__eyebrow, .sf-castro-hero__title, .sf-castro-hero__claim,
	.sf-castro-hero__sub, .sf-castro-hero__btn, .sf-castro-hero__chips { animation: none; }
	.sf-js .sf-castro-ruta { stroke-dasharray: none; stroke-dashoffset: 0; }
	.sf-js .sf-castro-hito,
	.sf-js .sf-castro-casa { opacity: 1; transition: none; }
	.sf-castro-bus__rueda { rotate: none; }
	.sf-js .sf-castro-hito--llega.is-on .sf-castro-hito__halo { animation: none; }
	.sf-castro-razon__img,
	.sf-castro-hero__btn,
	.sf-castro-barra { transition: none; }
	.sf-castro-razon:hover .sf-castro-razon__img { transform: none; }
}

/* ===========================================================================
 * 6. LA CAPA DE DELEITE (12/08/2026)
 *
 * Lo que separa «correcto» de «memorable» son tres o cuatro cosas que nadie
 * pide y que se notan sin saber por qué. Ninguna es información: si se quitan
 * todas, la página sigue diciendo exactamente lo mismo.
 * ========================================================================= */

/* La gaviota sobre el mar. Un trazo de cera, dos curvas: no hace falta más. */
.sf-castro-gaviota {
	fill: none;
	stroke: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 34%, transparent);
	stroke-width: 4; stroke-linecap: round;
}

/*
 * EL ROTULADOR FLUOR de la casa, el mismo motor del bloque de euskera: un
 * `background-image` que crece de 0 al 100 % del ancho cuando el párrafo entra.
 * `box-decoration-break: clone` para que el trazo siga bien si parte en dos
 * líneas — que en euskera pasa siempre.
 *
 * Sobre la banda oscura el verde fluor al 38 % no llega a leerse, así que ahí
 * sube al 55 %: el subrayado tiene que verse, no adivinarse.
 */
.sf-castro-mark {
	display: inline;
	padding: 0.04em 0.14em;
	margin: 0 -0.14em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	border-radius: 0.15em;
	background-color: transparent;
	color: inherit;
	background-image: linear-gradient(rgba(0, 231, 112, 0.38), rgba(0, 231, 112, 0.38));
	background-repeat: no-repeat;
	background-size: 100% 92%;
	background-position: 0 58%;
	transition: background-size 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) 0.25s;
}
.sf-castro-claim__sub .sf-castro-mark {
	background-image: linear-gradient(rgba(0, 231, 112, 0.55), rgba(0, 231, 112, 0.55));
}
.sf-js .sf-castro-mark { background-size: 0% 92%; }
.sf-js .sf-inview.is-inview .sf-castro-mark { background-size: 100% 92%; }

/*
 * EL LAUBURU, marca de agua. Grandísimo, casi invisible y cortado por la
 * esquina: es una textura, no un logotipo. Va detrás de todo y sin eventos.
 */
.sf-castro-claim__lauburu {
	position: absolute;
	right: -6%; bottom: -34%;
	width: clamp(200px, 34vw, 460px);
	height: auto;
	fill: color-mix(in srgb, var(--wp--preset--color--crema, #f7f5ef) 5%, transparent);
	pointer-events: none;
	z-index: 0;
}
.sf-castro-claim__inner { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.sf-js .sf-castro-mark { background-size: 100% 92%; transition: none; }
}

/* ===========================================================================
 * 5b. ASÍ ES POR DENTRO (12/08/2026, tarde)
 *
 * El vídeo es VERTICAL (720×1280) y se presenta como lo que es: un story, el
 * formato en el que una ama ve vídeos de sus hijos a diario. Nada de meterlo
 * en un 16:9 y amputarlo. A su lado, la tira de tres fotos reales: cada una
 * mide en columna lo que el story, y juntas responden dónde estará, qué
 * comerá y quién le sabrá el nombre.
 * ========================================================================= */
.sf-castro-dentro {
	background-color: var(--wp--preset--color--verde-niebla, #e1f5ee);
	padding-block: clamp(3rem, 8vh, 5rem);
	padding-inline: clamp(1.5rem, 6vw, 6rem);
}
.sf-castro-dentro__inner { max-width: 72rem; margin-inline: auto; }

.sf-castro-dentro__eyebrow {
	display: inline-flex; align-items: baseline; gap: 0.6em; margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-castro-dentro__title {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400; line-height: 1.04; text-wrap: balance;
	font-size: clamp(1.9rem, 5vw, 3.1rem);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}
.sf-castro-dentro__lead {
	margin: 0 0 clamp(1.5rem, 4vh, 2.25rem); max-width: 58ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: clamp(0.98rem, 2vw, 1.08rem); line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 82%, transparent);
}

.sf-castro-dentro__cuerpo { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 900px) {
	/* El story a la izquierda; la tira, en columna a su altura. */
	.sf-castro-dentro__cuerpo { grid-template-columns: minmax(0, 20rem) 1fr; align-items: stretch; }
}

/* --- El story ------------------------------------------------------------ */
.sf-castro-dentro__tele {
	position: relative; margin: 0;
	border-radius: 1.25rem; overflow: hidden;
	aspect-ratio: 9 / 16;
	max-width: 20rem;
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	box-shadow: 0 18px 44px rgba(8, 37, 26, 0.18);
}
.sf-castro-dentro__cartel,
.sf-castro-dentro__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.sf-castro-dentro__video { z-index: 1; }
.sf-castro-dentro__chip {
	position: absolute; left: 0.9rem; bottom: 0.9rem; right: 0.9rem; z-index: 2;
	display: inline-block;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: rgba(11, 46, 31, 0.78);
	backdrop-filter: blur(5px);
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.68rem; letter-spacing: 0.1em;
	color: var(--wp--preset--color--crema, #f7f5ef);
	width: fit-content;
}

/* --- La tira ------------------------------------------------------------- */
.sf-castro-dentro__tira {
	display: grid; gap: clamp(0.9rem, 2vh, 1.25rem);
	margin: 0; padding: 0; list-style: none;
}
@media (min-width: 640px) and (max-width: 899px) {
	.sf-castro-dentro__tira { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
	/*
	 * MOSAICO, no columna (12/08/2026, tarde — segunda pasada). El primer intento
	 * apilaba las tres con filas 1fr, y en un contenedor de alto AUTO las pistas
	 * fr se miden por su contenido: cada foto crecía a su alto intrínseco y la
	 * tira medía tres pantallas. En vez de pelear con el grid, cada hueco declara
	 * su proporción: dos tarjetas 3/2 arriba y el claustro PANORÁMICO a todo el
	 * ancho debajo — que además es como luce una foto de grupo de 55 personas,
	 * a lo ancho y con todas las caras.
	 */
	.sf-castro-dentro__tira { grid-template-columns: repeat(2, 1fr); }
	.sf-castro-dentro__foto:last-child { grid-column: 1 / -1; }
	/* Sin ratio fija en el mosaico: la columna del story es más alta y estira las
	   tarjetas; con aspect-ratio la foto no absorbía ese extra y quedaba un hueco
	   blanco bajo cada una (lo cazó audit-fill en la revisión final). height:100% +
	   object-fit:cover (regla base) llenan exactamente la fila que toque; el
	   min-height pone suelo por si el story fuese alguna vez más bajo que la tira. */
	.sf-castro-dentro__media { height: 100%; min-height: 12rem; }
	.sf-castro-dentro__foto:last-child .sf-castro-dentro__media { min-height: 9rem; }
	.sf-castro-dentro__foto:last-child .sf-castro-dentro__img { object-position: center 38%; }
	.sf-castro-dentro__cuerpo { align-items: start; }
}
.sf-castro-dentro__foto {
	position: relative;
	display: grid; grid-template-rows: 1fr auto;
	background-color: #fff;
	border-radius: 1rem; overflow: hidden;
	box-shadow: 0 10px 26px rgba(8, 37, 26, 0.08);
}
.sf-castro-dentro__media {
	display: block;
	min-height: 0;
	overflow: hidden; /* el marco que recorta: la foto lo llena SIEMPRE (regla del relleno) */
}
.sf-castro-dentro__img {
	width: 100%; height: 100%;
	min-height: 0;
	object-fit: cover; display: block;
}
.sf-castro-dentro__pie {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem;
	margin: 0; padding: 0.6rem 0.9rem 0.65rem;
}
.sf-castro-dentro__pie strong {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.7rem; letter-spacing: 0.13em;
	color: var(--wp--preset--color--primario, #00a74d);
}
.sf-castro-dentro__pie span {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.85rem;
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 74%, transparent);
}
@media (max-width: 899px) {
	/* En móvil el story se centra y no ocupa la pantalla entera de alto. */
	.sf-castro-dentro__tele { margin-inline: auto; max-width: 17rem; }
	.sf-castro-dentro__img { aspect-ratio: 3 / 2; }
}

/*
 * El tramo plano del XL, un punto más largo SOLO aquí: el listón de esta página
 * es ≥300 px de respiro real hasta el primer píxel que cambia de color (el de
 * Mikel, por encima del ≥260 general de la casa). Con el clamp general se
 * quedaba en ~288 en pantallas bajas.
 */
.sf-castro ~ .sf-pre-cta--xl,
.sf-castro .sf-pre-cta--xl {
	--sf-pre-cta-plano: clamp(16rem, 25vh, 19rem);
}