/*
 * Landing /visita/ (page-visita.php). Encolada solo en esta plantilla.
 *
 * Reutiliza los tokens del tema (colores/fuentes de theme.json) y patrones ya
 * usados (eyebrow, puntos con línea superior de euskera, píldora del CTA).
 */

/* Como solo se carga en esta página, el fondo verde del body hace que la franja
   de clareo del header fijo (padding del contenido interior) y el hero lean como
   una misma noche, sin corte. */
body {
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}


/* ------------------------------------------------------------------------- *
 * a) HERO compacto
 * ------------------------------------------------------------------------- */
.sf-visita-page__hero {
	position: relative;
	overflow: hidden;
	min-height: 55vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* El padding-top incluye el hueco del header fijo (~76px). */
	padding: calc(76px + clamp(2rem, 5vh, 3.5rem)) clamp(1.5rem, 6vw, 4rem) clamp(3rem, 7vh, 4.5rem);
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	color: var(--wp--preset--color--crema, #f7f5ef);
	text-align: center;
}

/* Foto de fondo del hero (si existe) + overlay para el contraste. */
.sf-visita-page__hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sf-visita-page__hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.12); /* base; el parallax (page-visita.js) le suma translateY */
	transform-origin: center;
	will-change: transform;
}

.sf-visita-page__hero-overlay {
	position: absolute;
	inset: 0;
	/* Vídeo más claro (pasada 3): el <video> lleva filter brightness/contrast/saturate
	 * que aclara el METRAJE; el velo aligera superior/inferior otra muesca. La central
	 * (55%, H1 centrado sobre frames claros ya aclarados por el filter) SUBE a .68 para
	 * mantener AAA (texto grande, 4,8:1 sobre el peor frame). */
	background: linear-gradient(rgba(11, 46, 31, 0.66), rgba(11, 46, 31, 0.68) 55%, rgba(11, 46, 31, 0.69));
}

/* Vídeo de fondo (solo escritorio; lo activa page-visita.js). La foto queda
   debajo como poster/primer frame y el vídeo funde al empezar a reproducirse.
   Va entre la foto y el overlay (orden del DOM), así que el overlay lo tiñe. Con
   vídeo activo NO hay parallax ni motas (page-visita.js no los arranca). */
.sf-visita-page__hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
	filter: brightness(1.18) contrast(1.05) saturate(1.05); /* aclara el metraje */
}

.sf-visita-page__hero-media.is-video-on .sf-visita-page__hero-video {
	opacity: 1;
}

/* Motas de mañana (canvas): entre la foto/overlay (z0) y el contenido (z2). En
   TODAS las resoluciones (ley móvil 1): en el teléfono el hero no tiene vídeo, así
   que estas 18 motas son todo su movimiento. El rAF lo gestiona page-visita.js, y
   solo corre con el hero en pantalla y la pestaña visible. */
.sf-visita-page__motes {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

/* La pegatina "ongi etorri!" ya no vive en el hero: se movió al abanico de la
   banda 0 (ver .sf-visita-page__banda0-sticker). */

.sf-visita-page__hero-inner {
	position: relative;
	z-index: 2; /* sobre la foto, el overlay y las motas */
	max-width: 52rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Título revelado palabra a palabra (page-visita.js parte el H1). Cuando está
   partido, el contenedor NO hace su propio fade-up (.sf-inview): animan solo las
   palabras. El .sf-inview extra sube la especificidad por encima del fade-up
   común (.sf-js .sf-visita-page .sf-inview) para neutralizarlo. */
.sf-js .sf-visita-page__title.sf-inview.is-split {
	opacity: 1;
	transform: none;
	transition: none;
}

.sf-js .sf-visita-page__title.is-split .w {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.4em);
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: calc(var(--i) * 70ms);
}

.sf-js .sf-visita-page__title.is-split.is-inview .w {
	opacity: 1;
	transform: none;
}

.sf-visita-page__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-niebla, #e1f5ee);
}

.sf-visita-page__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primario, #00a74d);
}

.sf-visita-page__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.03;
	font-size: clamp(2.6rem, 6vw, 4.4rem);
	color: var(--wp--preset--color--crema, #f7f5ef);
}

.sf-visita-page__sub {
	max-width: 46ch;
	margin: 1.5rem 0 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.6;
	color: rgba(247, 245, 239, 0.85);
}

/* Línea ámbar de puertas abiertas (patrón sf/visita). */
.sf-visita-page__jornada {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 1.75rem 0 0;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ef9f27;
}

.sf-visita-page__pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #ef9f27;
	animation: sf-visita-page-pulse 2s ease-in-out infinite;
}

@keyframes sf-visita-page-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(239, 159, 39, 0.5);
	}
	50% {
		box-shadow: 0 0 0 7px rgba(239, 159, 39, 0);
	}
}

.sf-visita-page__hero-cta {
	display: inline-block;
	margin-top: clamp(2rem, 4vh, 2.75rem);
	padding: 16px 34px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--crema, #f7f5ef);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 600;
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.sf-visita-page__hero-cta:hover {
	background-color: var(--sf-boton-hover);
	color: var(--wp--preset--color--blanco, #ffffff);
	transform: translateY(-2px);
}

.sf-visita-page__hero-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--primario, #00a74d);
	outline-offset: 3px;
}

/* Chips de respuesta inmediata (bajo el sub del hero). Móvil: envuelven. */
.sf-visita-page__chips {
	list-style: none;
	margin: clamp(1.5rem, 3vh, 2rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	max-width: 34rem;
}

.sf-visita-page__chip-item {
	padding: 8px 14px;
	border: 1px solid rgba(247, 245, 239, 0.35);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--crema, #f7f5ef);
	white-space: nowrap;
}

/* Fade-up escalonado tras el título (animación de carga; el hero está arriba).
   Con reduced-motion los chips salen fijos (sin animación). */
@media (prefers-reduced-motion: no-preference) {
	.sf-visita-page__chip-item {
		opacity: 0;
		animation: sf-chip-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
		animation-delay: calc(0.85s + var(--ci) * 0.12s);
	}
}

@keyframes sf-chip-in {
	from {
		opacity: 0;
		transform: translateY(0.6rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------------- *
 * Contenedor común de secciones
 * ------------------------------------------------------------------------- */
.sf-visita-page__inner {
	max-width: 68rem;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 6vw, 4rem);
}

/* ------------------------------------------------------------------------- *
 * b) QUÉ VERÁS: lista (líneas que se dibujan) + panel sticky (motor servicios)
 * ------------------------------------------------------------------------- */
.sf-visita-page__que {
	position: relative;
	background-color: var(--wp--preset--color--crema, #f7f5ef);
	padding-block: clamp(3rem, 7vh, 5rem);
}

/* Ya no hay degradado de transición aquí: entre el hero oscuro y esta crema va
   ahora la banda verde del bloque sf/sellos (como en la home). */

.sf-visita-page__que-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 64rem) {
	.sf-visita-page__que-grid:not(.sf-visita-page__que-grid--nopanel) {
		grid-template-columns: 1.15fr 0.85fr;
		align-items: start;
	}
}

.sf-visita-page__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 4.5vh, 2.75rem);
}

.sf-visita-page__point {
	position: relative;
	padding-top: 1.5rem;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 1rem;
	align-items: start;
}

/* Línea superior que se dibuja al entrar (base sin JS: fija). */
.sf-visita-page__point::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: rgba(23, 52, 4, 0.18);
	transform: scaleX(1);
	transform-origin: left;
}

.sf-js .sf-visita-page__point::before {
	transform: scaleX(0);
	transition: transform 0.8s ease;
}

.sf-js .sf-visita-page__point.is-inview::before {
	transform: scaleX(1);
}

.sf-visita-page__point-num {
	grid-row: 1 / span 2;
	padding-top: 0.2rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--primario, #00a74d);
}

.sf-visita-page__point-title {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

.sf-visita-page__point-text {
	margin: 0;
	max-width: 42ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.6;
	color: var(--wp--preset--color--tinta, #173404);
}

/* Panel sticky (crossfade + Ken Burns) — copia del bloque sf/servicios. */
.sf-visita-page__panel {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 20px 44px -20px rgba(11, 46, 31, 0.28);
}

@media (min-width: 64rem) {
	.sf-visita-page__panel {
		position: sticky;
		inset-block-start: clamp(5rem, 12vh, 8rem);
	}
}

@media (max-width: 63.999rem) {
	.sf-visita-page__panel {
		display: none;
	}
}

.sf-visita-page__panel-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.02);
	transition: opacity 0.6s ease;
	will-change: opacity;
}

.sf-visita-page__panel-img.is-active {
	opacity: 1;
	animation: sf-visita-page-kenburns 14s ease-in-out infinite alternate;
}

@keyframes sf-visita-page-kenburns {
	from {
		transform: scale(1.02);
	}
	to {
		transform: scale(1.1);
	}
}

.sf-visita-page__panel-label {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: clamp(2rem, 6vw, 3.5rem) clamp(1rem, 3vw, 1.5rem) clamp(0.9rem, 2.5vw, 1.25rem);
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blanco, #ffffff);
	background: linear-gradient(to top, rgba(11, 46, 31, 0.72), rgba(11, 46, 31, 0));
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.sf-visita-page__panel-label.is-active {
	opacity: 1;
}

.sf-visita-page__panel-dot {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primario, #00a74d);
}

/* Fade-up con la utilidad común. */
.sf-js .sf-visita-page .sf-inview {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-js .sf-visita-page .sf-inview.is-inview {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------------------- *
 * c) SOLICITUD (fondo niebla, grid formulario + panel)
 * ------------------------------------------------------------------------- */
.sf-visita-page__solicitud {
	position: relative;
	background-color: var(--wp--preset--color--verde-niebla, #e1f5ee);
	padding-top: clamp(3rem, 7vh, 5rem);
	/* Padding inferior = espacio normal + zona del fundido, para que el formulario
	   no pise el anochecer. */
	padding-bottom: calc(clamp(3rem, 7vh, 5rem) + clamp(10rem, 18vh, 14rem));
	scroll-margin-top: 90px; /* el ancla no queda bajo el header */
}

/* Última sección antes del footer: aquí cierra la página (niebla→noche) con la
   rampa suavizada validada. El grid va con z-index 1, así que el contenido queda
   por encima de este ::after. */
.sf-visita-page__solicitud::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px; /* rebasa el borde sub-pixel; el rebase cae en el footer (#0B2E1F) */
	height: calc(clamp(10rem, 18vh, 14rem) + 1px);
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(225, 245, 238, 0) 0%,
		rgba(11, 46, 31, 0.35) 40%,
		rgba(11, 46, 31, 0.75) 70%,
		var(--wp--preset--color--verde-bosque, #0b2e1f) 92%,
		var(--wp--preset--color--verde-bosque, #0b2e1f) 100%
	);
}

.sf-visita-page__solicitud-grid {
	position: relative;
	z-index: 1; /* el contenido, sobre el degradado de transición */
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}

@media (min-width: 64rem) {
	.sf-visita-page__solicitud-grid {
		grid-template-columns: 0.6fr 0.4fr;
	}
}

.sf-visita-page__form-title,
.sf-visita-page__aside-title {
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

/* Zona de mensajes (aria-live). */
.sf-visita-page__messages:empty {
	display: none;
}

.sf-visita-page__alert {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border-radius: 6px;
	border: 1px solid #c0392b;
	background-color: #fbeae7;
	color: #7f2318;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.95rem;
	line-height: 1.45;
}

/* Formulario. */
.sf-visita-page__field {
	margin-bottom: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.sf-visita-page__field label,
.sf-visita-page__check label {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta, #173404);
}

.sf-visita-page__opt {
	text-transform: none;
	letter-spacing: 0.02em;
	opacity: 0.7;
}

.sf-visita-page__req {
	color: var(--wp--preset--color--primario, #00a74d);
}

.sf-visita-page__field input,
.sf-visita-page__field select,
.sf-visita-page__field textarea {
	width: 100%;
	padding: 14px;
	border: 1px solid rgba(23, 52, 4, 0.25);
	border-radius: 6px;
	background-color: var(--wp--preset--color--blanco, #ffffff);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1rem;
	color: var(--wp--preset--color--tinta, #173404);
	box-sizing: border-box;
}

.sf-visita-page__field textarea {
	resize: vertical;
}

.sf-visita-page__field input:focus-visible,
.sf-visita-page__field select:focus-visible,
.sf-visita-page__field textarea:focus-visible,
.sf-visita-page__check input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--primario, #00a74d);
	box-shadow: 0 0 0 2px rgba(0, 167, 77, 0.25);
}

/* Consentimiento. */
.sf-visita-page__check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 1.75rem;
}

.sf-visita-page__check input {
	margin-top: 0.15rem;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	accent-color: var(--wp--preset--color--primario, #00a74d);
}

.sf-visita-page__check label {
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 0.9rem;
	line-height: 1.45;
}

.sf-visita-page__check a {
	color: var(--wp--preset--color--primario, #00a74d);
}

/* Honeypot: fuera de pantalla pero presente. */
.sf-visita-page__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Botón de envío (píldora + swap ES/EU + imán). */
.sf-visita-page__submit {
	position: relative; /* el imán (page-visita.js) le pone el transform */
	display: inline-flex;
	align-items: center;
	padding: 15px 40px;
	border: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	color: var(--wp--preset--color--crema, #f7f5ef);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 600;
	font-size: 1.05rem;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.sf-visita-page__submit:hover {
	background-color: var(--sf-boton-hover);
}

.sf-visita-page__submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--primario, #00a74d);
	outline-offset: 3px;
}

/* Dos capas superpuestas: ES visible, EU oculto (crossfade al hover). */
.sf-visita-page__submit-labels {
	display: grid;
}

.sf-visita-page__submit-es,
.sf-visita-page__submit-eu {
	grid-area: 1 / 1;
}

.sf-visita-page__submit-eu {
	opacity: 0;
}

@media (min-width: 64rem) and (hover: hover) {
	.sf-visita-page__submit-es,
	.sf-visita-page__submit-eu {
		transition: opacity 0.3s ease;
	}

	.sf-visita-page__submit:hover .sf-visita-page__submit-es {
		opacity: 0;
	}

	.sf-visita-page__submit:hover .sf-visita-page__submit-eu {
		opacity: 1;
	}
}

/* Mini-fila de confianza bajo el submit (dentro de la tarjeta): separador + logos
   oficiales en gris + texto. Sin enlaces. */
.sf-visita-page__trust {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(23, 52, 4, 0.12);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.sf-visita-page__trust-logos {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.sf-visita-page__trust-logo {
	height: 24px;
	width: auto;
	display: block;
	filter: grayscale(1);
	opacity: 0.6;
}

.sf-visita-page__trust-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 10px;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 55%, transparent);
}

/* Mensaje de éxito. */
.sf-visita-page__success {
	padding: clamp(1.75rem, 4vw, 2.5rem);
	border: 1px solid var(--wp--preset--color--primario, #00a74d);
	border-radius: 10px;
	background-color: var(--wp--preset--color--blanco, #ffffff);
}

.sf-visita-page__success-title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	font-size: clamp(1.8rem, 3.5vw, 2.4rem);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

.sf-visita-page__success p {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--wp--preset--color--tinta, #173404);
}

.sf-visita-page__success-link {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 600;
	color: var(--wp--preset--color--primario, #00a74d);
	text-decoration: none;
}

.sf-visita-page__success-link:hover {
	text-decoration: underline;
}

/* Panel de contacto directo (tarjeta blanca). */
.sf-visita-page__aside {
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border-radius: 10px;
	background-color: var(--wp--preset--color--blanco, #ffffff);
	box-shadow: 0 20px 44px -30px rgba(11, 46, 31, 0.35);
}

.sf-visita-page__aside-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.sf-visita-page__aside-label {
	display: block;
	margin-bottom: 0.2rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primario, #00a74d);
}

.sf-visita-page__aside-link {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--wp--preset--color--tinta, #173404);
	text-decoration: none;
	transition: color 0.2s ease;
}

.sf-visita-page__aside-link:hover {
	color: var(--wp--preset--color--primario, #00a74d);
}

.sf-visita-page__aside-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primario, #00a74d);
	outline-offset: 3px;
}

/* WhatsApp: CTA primaria del panel, a todo su ancho, verde WhatsApp. */
.sf-visita-page__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	width: 100%;
	margin-bottom: 1.5rem;
	padding: 15px 20px;
	border-radius: 10px;
	background-color: #25d366;
	color: var(--wp--preset--color--blanco, #ffffff);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	box-shadow: 0 12px 26px -12px rgba(37, 211, 102, 0.7);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sf-visita-page__wa:hover {
	transform: scale(1.02);
	box-shadow: 0 16px 34px -12px rgba(37, 211, 102, 0.85);
}

.sf-visita-page__wa:focus-visible {
	outline: 2px solid var(--wp--preset--color--verde-bosque, #0b2e1f);
	outline-offset: 3px;
}

.sf-visita-page__wa-icon {
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------------- *
 * Pasos del proceso: tira compacta en la cabecera de "solicitud", a todo el
 * ancho del grid. Líneas superiores que se dibujan escalonadas.
 * ------------------------------------------------------------------------- */
.sf-visita-page__pasos-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.75rem, 3vw, 2rem);
}

/* A todo el ancho del grid de solicitud (encima del formulario y el panel). */
@media (min-width: 64rem) {
	.sf-visita-page__solicitud-grid > .sf-visita-page__pasos-list,
	.sf-visita-page__solicitud-grid > .sf-visita-page__perfil-link {
		grid-column: 1 / -1;
	}
}

/* Descarga del perfil de salida (PDF), bajo los pasos. */
.sf-visita-page__perfil-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	justify-self: start;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	transition: color 0.25s ease;
}

.sf-visita-page__perfil-link:hover,
.sf-visita-page__perfil-link:focus-visible {
	color: var(--wp--preset--color--primario, #00a74d);
	outline: none;
}

.sf-visita-page__perfil-icon {
	flex: 0 0 auto;
	transition: transform 0.25s ease;
}

.sf-visita-page__perfil-link:hover .sf-visita-page__perfil-icon,
.sf-visita-page__perfil-link:focus-visible .sf-visita-page__perfil-icon {
	transform: translateY(2px);
}

.sf-visita-page__paso {
	position: relative;
	padding-top: 0.85rem;
}

.sf-visita-page__paso::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: rgba(23, 52, 4, 0.2);
	transform: scaleX(1);
	transform-origin: left;
}

.sf-js .sf-visita-page__paso::before {
	transform: scaleX(0);
	transition: transform 0.7s ease;
	transition-delay: calc(var(--i) * 140ms);
}

.sf-js .sf-visita-page__paso.is-inview::before {
	transform: scaleX(1);
}

.sf-visita-page__paso-num {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--primario, #00a74d);
}

.sf-visita-page__paso-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.25;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

.sf-visita-page__paso-sub {
	margin: 0.3rem 0 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.82rem;
	line-height: 1.45;
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 78%, transparent);
}

/* Móvil: 3 columnas compactas (num + título); el sub secundario se oculta para
   no amontonar. Los 3 pasos quedan a la vista → se dibujan sus líneas. */
@media (max-width: 47.999rem) {
	.sf-visita-page__paso-title {
		font-size: 14px;
	}

	.sf-visita-page__paso-sub {
		display: none;
	}
}

/* ------------------------------------------------------------------------- *
 * Tarjeta del formulario: chip, rotulador, focus-dots, fecha destacada
 * ------------------------------------------------------------------------- */
.sf-visita-page__card {
	padding: clamp(1.75rem, 3.5vw, 3rem);
	border-radius: 10px;
	background-color: var(--wp--preset--color--blanco, #ffffff);
	box-shadow: 0 20px 44px -30px rgba(11, 46, 31, 0.35);
}

.sf-visita-page__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 1.25rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primario, #00a74d);
}

.sf-visita-page__chip-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primario, #00a74d);
}

/* Rotulador fluor sobre "tu visita" (patrón sf/euskera). */
.sf-visita-page__hl {
	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-image: linear-gradient(rgba(0, 231, 112, 0.38), rgba(0, 231, 112, 0.38));
	background-repeat: no-repeat;
	background-size: 100% 94%;
	background-position: 0 58%;
	transition: background-size 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s;
}

.sf-js .sf-visita-page__hl {
	background-size: 0% 94%;
}

.sf-js .sf-visita-page__form-title.is-inview .sf-visita-page__hl {
	background-size: 100% 94%;
}

/* Punto verde delante del label al enfocar el campo (patrón hover de enlaces). */
.sf-visita-page__field label {
	display: inline-flex;
	align-items: center;
	width: fit-content;
}

.sf-visita-page__field label::before {
	content: "";
	width: 0;
	height: 5px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primario, #00a74d);
	opacity: 0;
	transition: width 0.2s ease, opacity 0.2s ease, margin-right 0.2s ease;
}

.sf-visita-page__field:focus-within label::before {
	width: 5px;
	opacity: 1;
	margin-right: 0.5em;
}

/* Fecha de puertas abiertas destacada, dentro de la tarjeta. */
.sf-visita-page__fecha-card {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 1.5rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid #ef9f27;
	border-radius: 8px;
	background-color: rgba(239, 159, 39, 0.07);
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #8a5410;
}

/* ------------------------------------------------------------------------- *
 * f) Barra móvil sticky
 * ------------------------------------------------------------------------- */
.sf-visita-page__mobilebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: flex;
	gap: 0.6rem;
	padding: 0.75rem clamp(1rem, 4vw, 1.5rem);
	padding-bottom: calc(0.75rem + 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;
	/* Mientras está fuera de cuadro NO EXISTE: ni para el lector de pantalla ni para el
	   tabulador. Sustituye al aria-hidden del markup, que dejaba el enlace enfocable. */
	visibility: hidden;
}

.sf-visita-page__mobilebar.is-visible {
	transform: translateY(0);
	visibility: visible;
	transition: transform 0.3s ease, visibility 0s;
}

@media (min-width: 1024px) {
	.sf-visita-page__mobilebar {
		display: none;
	}
}

/* Doble CTA a partes iguales: WhatsApp (verde WA) + reservar (píldora crema). */
.sf-visita-page__mobilebar-wa,
.sf-visita-page__mobilebar-btn {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 13px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
	text-decoration: none;
}

.sf-visita-page__mobilebar-wa {
	background-color: #25d366;
	color: var(--wp--preset--color--blanco, #ffffff);
}

.sf-visita-page__mobilebar-btn {
	background-color: var(--wp--preset--color--crema, #f7f5ef);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

/* ========================================================================= *
 * Cabeceras compartidas de las secciones nuevas (sobre fondo claro)
 * ========================================================================= */
.sf-visita-page__lead-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

.sf-visita-page__section-title {
	margin: 0 0 clamp(1.75rem, 4vh, 2.75rem);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 1.05;
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

/* ========================================================================= *
 * ESPACIOS: acordeón de láminas (crema)
 * ========================================================================= */
.sf-visita-page__espacios {
	background-color: var(--wp--preset--color--crema, #f7f5ef);
	padding-block: clamp(3rem, 7vh, 5rem);
}

.sf-visita-page__espacios-head {
	margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.sf-visita-page__espacios-head .sf-visita-page__section-title {
	margin-bottom: 0;
}

.sf-visita-page__laminas {
	list-style: none;
	margin: 0;
	padding-inline: clamp(1.5rem, 6vw, 4rem);
	display: flex;
	flex-direction: column; /* móvil: acordeón vertical */
	gap: 0.5rem;
}

.sf-visita-page__lamina-item {
	position: relative; /* ancla del enlace absoluto «Conocer este rincón» */
	display: flex;
}

.sf-visita-page__lamina {
	position: relative;
	display: block;
	width: 100%;
	height: 64px; /* móvil: colapsada */
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	transition: height 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
	-webkit-tap-highlight-color: transparent;
}

.sf-visita-page__lamina.is-open {
	height: 300px; /* móvil: expandida */
}

.sf-visita-page__lamina:focus-visible {
	outline: 3px solid var(--wp--preset--color--primario, #00a74d);
	outline-offset: 3px;
}

.sf-visita-page__lamina-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.6);
	transition: filter 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sf-visita-page__lamina:hover .sf-visita-page__lamina-img,
.sf-visita-page__lamina.is-open .sf-visita-page__lamina-img {
	filter: saturate(1);
}

.sf-visita-page__lamina-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 37, 26, 0.75), rgba(8, 37, 26, 0.15) 45%, rgba(8, 37, 26, 0));
	pointer-events: none;
}

.sf-visita-page__lamina-num {
	position: absolute;
	top: 0.9rem;
	left: 1.1rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: rgba(247, 245, 239, 0.85);
}

.sf-visita-page__lamina-label {
	position: absolute;
	inset: 0;
	pointer-events: none;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--wp--preset--color--crema, #f7f5ef);
	line-height: 1;
}

/* Móvil: solo etiqueta horizontal (no hay columnas verticales). */
.sf-visita-page__lamina-label-v {
	display: none;
}

.sf-visita-page__lamina-label-h {
	position: absolute;
	left: 1.1rem;
	right: 1.1rem;
	bottom: 0.9rem;
	font-size: clamp(1.1rem, 4vw, 1.5rem);
}

/* Cada espacio enlaza a SU página (13/08). Hermano del botón: aparece con la lámina
   abierta, arriba a la derecha (la etiqueta del nombre vive abajo), discreto — es una
   salida de la landing y el CTA de reservar sigue mandando. */
.sf-visita-page__lamina-link {
	position: absolute;
	top: 0.72rem;
	right: 1.1rem;
	z-index: 2;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--crema, #f7f5ef);
	background: rgba(8, 37, 26, 0.55);
	padding: 6px 12px;
	border-radius: 999px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease 0.25s;
}
.sf-visita-page__lamina-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sf-visita-page__lamina-item:has(.sf-visita-page__lamina.is-open) .sf-visita-page__lamina-link,
.sf-visita-page__lamina-link:focus-visible {
	opacity: 1;
	pointer-events: auto;
}
.sf-visita-page__lamina-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primario, #00a74d);
	outline-offset: 2px;
}
/* Sin JS no hay acordeón que abrir: el enlace de cada lámina queda visible (regla de oro). */
html:not(.sf-js) .sf-visita-page__lamina-link { opacity: 1; pointer-events: auto; }

/* Entrada clip-path escalonada (solo con movimiento permitido). */
@media (prefers-reduced-motion: no-preference) {
	.sf-js .sf-visita-page__lamina-item {
		clip-path: inset(0 0 100% 0);
	}

	.sf-js .sf-visita-page__espacios.is-visible .sf-visita-page__lamina-item {
		animation: sf-lamina-in 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) both;
		animation-delay: calc(var(--li) * 0.09s);
	}
}

@keyframes sf-lamina-in {
	from {
		clip-path: inset(0 0 100% 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

/* Escritorio: fila de columnas que se expanden (flex-grow 1 -> 4.2). */
@media (min-width: 64rem) {
	.sf-visita-page__laminas {
		flex-direction: row;
		height: clamp(24rem, 52vh, 32rem);
		gap: 0.6rem;
	}

	.sf-visita-page__lamina-item {
		flex: 1 1 0;
		min-width: 0;
		transition: flex-grow 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	.sf-visita-page__lamina-item:hover,
	.sf-visita-page__lamina-item:focus-within,
	.sf-visita-page__lamina-item:has(.sf-visita-page__lamina.is-open) {
		flex-grow: 4.2;
	}

	.sf-visita-page__lamina {
		height: 100%;
	}

	.sf-visita-page__lamina.is-open {
		height: 100%; /* en escritorio la altura no cambia; manda el flex-grow */
	}

	/* Etiqueta vertical (colapsada) -> horizontal (expandida) por crossfade. */
	.sf-visita-page__lamina-label-v {
		display: block;
		position: absolute;
		left: 1.1rem;
		bottom: 1.1rem;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font-size: clamp(1rem, 1.5vw, 1.3rem);
		letter-spacing: 0.03em;
		white-space: nowrap;
		opacity: 1;
		transition: opacity 0.4s ease;
	}

	.sf-visita-page__lamina-label-h {
		left: 1.35rem;
		right: 1.35rem;
		bottom: 1.1rem;
		font-size: clamp(1.3rem, 2vw, 1.9rem);
		opacity: 0;
		transition: opacity 0.4s ease 0.08s;
		white-space: nowrap;
	}

	.sf-visita-page__lamina-item:hover .sf-visita-page__lamina-label-v,
	.sf-visita-page__lamina-item:focus-within .sf-visita-page__lamina-label-v,
	.sf-visita-page__lamina-item:has(.sf-visita-page__lamina.is-open) .sf-visita-page__lamina-label-v {
		opacity: 0;
	}

	.sf-visita-page__lamina-item:hover .sf-visita-page__lamina-label-h,
	.sf-visita-page__lamina-item:focus-within .sf-visita-page__lamina-label-h,
	.sf-visita-page__lamina-item:has(.sf-visita-page__lamina.is-open) .sf-visita-page__lamina-label-h {
		opacity: 1;
	}
}

/* ========================================================================= *
 * BANDA "DESDE LOS 0 AÑOS" (niebla). Aquí la página pasa de crema a niebla.
 * ========================================================================= */
.sf-visita-page__banda0 {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--verde-niebla, #e1f5ee);
	padding-block: clamp(3.5rem, 9vh, 6rem);
}

/* Fundido desde la crema de "espacios" (patrón validado). */
.sf-visita-page__banda0::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: clamp(4rem, 9vh, 6.5rem);
	background: linear-gradient(var(--wp--preset--color--crema, #f7f5ef), rgba(247, 245, 239, 0));
	pointer-events: none;
	z-index: 1;
}

/* Watermark "0" gigante, medio sangrado a la izquierda, detrás del contenido.
   Sin foto va a nivel de sección; con foto vive en la columna visual (más abajo). */
.sf-visita-page__banda0-wm {
	position: absolute;
	left: -0.1em;
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 400;
	line-height: 0.8;
	font-size: clamp(14rem, 34vw, 26rem);
	color: rgba(0, 167, 77, 0.08); /* fallback sin text-stroke */
	pointer-events: none;
	user-select: none;
}

@supports (-webkit-text-stroke: 1px red) {
	.sf-visita-page__banda0-wm {
		color: transparent;
		-webkit-text-stroke: 1.5px rgba(0, 167, 77, 0.25);
	}
}

.sf-visita-page__banda0-inner {
	position: relative;
	z-index: 2;
	max-width: 68rem;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 6vw, 4rem);
}

@media (min-width: 64rem) {
	.sf-visita-page__banda0-inner {
		display: grid;
		grid-template-columns: 0.82fr 1fr;
		column-gap: clamp(2rem, 4vw, 3.5rem);
		align-items: center;
	}

	/* Sin foto: contenido a la derecha (col 2); el "0" de sección queda a la izq. */
	.sf-visita-page__banda0:not(.sf-visita-page__banda0--photo) .sf-visita-page__banda0-content {
		grid-column: 2;
	}

	/* Con foto: composición visual (col 1, ~45%) + contenido (col 2). */
	.sf-visita-page__banda0--photo .sf-visita-page__banda0-visual {
		grid-column: 1;
	}

	.sf-visita-page__banda0--photo .sf-visita-page__banda0-content {
		grid-column: 2;
	}
}

/* -------- Composición visual: "0" detrás + tarjeta de foto solapándolo -------- */
.sf-visita-page__banda0-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Con foto el "0" se centra en la columna visual, medio sangrado a la izquierda,
   por detrás de la tarjeta. */
.sf-visita-page__banda0-visual .sf-visita-page__banda0-wm {
	top: 50%;
	left: -0.3em;
	transform: translateY(-50%);
	font-size: clamp(15rem, 24vw, 24rem);
	z-index: 0;
}

/* Pila/abanico: contenedor con tamaño base (aspect 4/5); las cartas van absolutas. */
.sf-visita-page__banda0-fan {
	position: relative;
	z-index: 1;
	width: min(100%, 18rem);
	aspect-ratio: 4 / 5;
	margin: 0;
}

.sf-visita-page__banda0-card {
	position: absolute;
	inset: 0;
	transform-origin: center;
}

.sf-visita-page__banda0-card:nth-child(1) {
	z-index: 1;
}
.sf-visita-page__banda0-card:nth-child(2) {
	z-index: 2;
}
.sf-visita-page__banda0-card:nth-child(3) {
	z-index: 3;
}

/* La carta (outer) hace el abanico; la cara (inner) el levantamiento del hover:
   transforms anidados que se componen sin pisarse. */
.sf-visita-page__banda0-face {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	border: 6px solid var(--wp--preset--color--blanco, #ffffff); /* polaroid sutil */
	background-color: var(--wp--preset--color--blanco, #ffffff);
	box-shadow: 0 24px 50px -24px rgba(11, 46, 31, 0.5);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.sf-visita-page__banda0-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sf-visita-page__banda0-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.75rem 0.7rem 0.55rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--blanco, #ffffff);
	text-align: left;
	background: linear-gradient(to top, rgba(8, 37, 26, 0.8), rgba(8, 37, 26, 0));
	pointer-events: none;
}

/* Pegatina "ongi etorri!" (patrón tuatu) mordiendo la esquina sup-dcha de la foto
   frontal. Va en la carta (fuera de la face con overflow) para poder asomar; la
   caption está abajo-izq, así que no se tapan. */
.sf-visita-page__banda0-sticker {
	position: absolute;
	top: -0.7rem;
	right: -0.7rem;
	z-index: 4;
	padding: 6px 11px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primario, #00a74d);
	color: var(--wp--preset--color--crema, #f7f5ef);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-style: italic;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 10px 22px rgba(8, 37, 26, 0.28);
	transform: rotate(5deg);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-visita-page__banda0-sticker:hover {
	transform: rotate(0deg);
}

/* Móvil: escala con la composición (fan reducido). */
@media (max-width: 47.999rem) {
	.sf-visita-page__banda0-sticker {
		padding: 5px 9px;
		font-size: 12px;
		top: -0.55rem;
		right: -0.55rem;
	}
}

/* -------- Abanico (varias fotos) --------
   Base SIN JS / reduced-motion: YA desplegado y estático (regla de oro: si no hay
   JS o el observer no llega, las fotos se ven, no ocultas). */
.sf-visita-page__banda0-fan--multi .sf-visita-page__banda0-card:nth-child(1) {
	transform: rotate(-8deg) translate(-14%, 4%);
}
.sf-visita-page__banda0-fan--multi .sf-visita-page__banda0-card:nth-child(2) {
	transform: rotate(-1deg);
}
.sf-visita-page__banda0-fan--multi .sf-visita-page__banda0-card:nth-child(3) {
	transform: rotate(6deg) translate(12%, -3%);
}

/* Con JS: arranca apilado (casi alineado) y despliega al entrar (.is-inview),
   con transición escalonada por carta. */
.sf-js .sf-visita-page__banda0-card {
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--fi) * 80ms);
}

.sf-js .sf-visita-page__banda0-fan--multi .sf-visita-page__banda0-card:nth-child(1) {
	transform: rotate(-2deg);
}
.sf-js .sf-visita-page__banda0-fan--multi .sf-visita-page__banda0-card:nth-child(2) {
	transform: rotate(-1deg);
}
.sf-js .sf-visita-page__banda0-fan--multi .sf-visita-page__banda0-card:nth-child(3) {
	transform: rotate(0deg);
}

.sf-js .sf-visita-page__banda0-fan--multi.is-inview .sf-visita-page__banda0-card:nth-child(1) {
	transform: rotate(-8deg) translate(-14%, 4%);
}
.sf-js .sf-visita-page__banda0-fan--multi.is-inview .sf-visita-page__banda0-card:nth-child(2) {
	transform: rotate(-1deg);
}
.sf-js .sf-visita-page__banda0-fan--multi.is-inview .sf-visita-page__banda0-card:nth-child(3) {
	transform: rotate(6deg) translate(12%, -3%);
}

/* Neutraliza el fade-up genérico de la pila (.sf-inview): se ve apilada, no fundida. */
.sf-js .sf-visita-page__banda0-visual .sf-visita-page__banda0-fan.sf-inview {
	opacity: 1;
}

/* Foto única (sin abanico): tarjeta centrada, ligeramente rotada. */
.sf-visita-page__banda0-fan:not(.sf-visita-page__banda0-fan--multi) .sf-visita-page__banda0-card {
	transform: rotate(-1.5deg);
}

/* Barajado: la foto se levanta y pasa al frente (hover en escritorio, tap táctil). */
@media (hover: hover) {
	.sf-visita-page__banda0-card:hover {
		z-index: 10;
	}
	.sf-visita-page__banda0-card:hover .sf-visita-page__banda0-face {
		transform: translateY(-8px) scale(1.02);
		box-shadow: 0 34px 60px -22px rgba(11, 46, 31, 0.55);
	}
}

.sf-visita-page__banda0-card.is-front {
	z-index: 10;
}
.sf-visita-page__banda0-card.is-front .sf-visita-page__banda0-face {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 34px 60px -22px rgba(11, 46, 31, 0.55);
}

.sf-visita-page__b0-points {
	list-style: none;
	margin: clamp(1.5rem, 3vh, 2rem) 0 clamp(2rem, 4vh, 2.75rem);
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3.5vh, 2.25rem);
}

@media (min-width: 40rem) {
	.sf-visita-page__b0-points {
		grid-template-columns: 1fr 1fr;
		column-gap: clamp(1.5rem, 3vw, 2.5rem);
	}
}

.sf-visita-page__b0-point {
	position: relative;
	padding-top: 1.1rem;
}

/* Línea superior que se dibuja (patrón de líneas dibujadas). */
.sf-visita-page__b0-point::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: rgba(11, 46, 31, 0.2);
	transform: scaleX(1);
	transform-origin: left;
}

.sf-js .sf-visita-page__b0-point::before {
	transform: scaleX(0);
	transition: transform 0.7s ease;
	transition-delay: calc(var(--i) * 120ms);
}

.sf-js .sf-visita-page__b0-point.is-inview::before {
	transform: scaleX(1);
}

.sf-visita-page__b0-point-title {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.25;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

.sf-visita-page__b0-point-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--wp--preset--color--tinta, #173404);
}

/* CTA de la banda (píldora verde bosque). */
.sf-visita-page__b0-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 14px 28px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	color: var(--wp--preset--color--crema, #f7f5ef);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.sf-visita-page__b0-cta:hover {
	background-color: var(--sf-boton-hover);
	transform: translateY(-2px);
}

.sf-visita-page__b0-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--verde-bosque, #0b2e1f);
	outline-offset: 3px;
}

.sf-visita-page__b0-cta span {
	transition: transform 0.25s ease;
}

.sf-visita-page__b0-cta:hover span {
	transform: translateX(3px);
}

/* Móvil sin foto: watermark de sección más pequeño y arriba (no estorba). */
@media (max-width: 47.999rem) {
	.sf-visita-page__banda0:not(.sf-visita-page__banda0--photo) .sf-visita-page__banda0-wm {
		font-size: clamp(10rem, 46vw, 15rem);
		top: 2.25rem;
		transform: none;
		opacity: 0.7;
	}
}

/* Móvil con fotos: la composición visual va ARRIBA, centrada y a escala reducida;
   el "0" de la columna se oculta (evita clash; decisión reportada — no verificable
   a 1920px). El abanico sigue funcionando, algo más pequeño. */
@media (max-width: 63.999rem) {
	.sf-visita-page__banda0--photo .sf-visita-page__banda0-visual {
		margin: 0 auto clamp(2.5rem, 6vh, 3.5rem);
	}

	.sf-visita-page__banda0-fan {
		width: min(70%, 14rem);
	}

	.sf-visita-page__banda0-visual .sf-visita-page__banda0-wm {
		display: none;
	}
}

/* ========================================================================= *
 * TESTIMONIO: cita anclada a la izquierda + foto a la derecha (euskera espejado)
 * ========================================================================= */
.sf-visita-page__cita {
	background-color: var(--wp--preset--color--verde-niebla, #e1f5ee);
	padding-block: clamp(4rem, 9vh, 6rem);
}

/* Con foto: grid espejado (texto izq 0.62fr, foto dcha 0.38fr) en escritorio.
   Sin foto (:not(--media)) el texto va a ancho de contenido, como antes. */
@media (min-width: 64rem) {
	.sf-visita-page__cita--media .sf-visita-page__cita-grid {
		display: grid;
		grid-template-columns: 0.62fr 0.38fr;
		column-gap: clamp(2rem, 4vw, 3.5rem);
		align-items: center;
	}
}

.sf-visita-page__cita-media {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 26px 54px -26px rgba(11, 46, 31, 0.5);
}

/* Reveal por barrido de clip-path (gateado a sf-js: sin JS la foto se ve fija). */
.sf-js .sf-visita-page__cita-media {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-js .sf-visita-page__cita.is-visible .sf-visita-page__cita-media {
	clip-path: inset(0 0 0 0);
}

.sf-visita-page__cita-media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sf-js .sf-visita-page__cita-media-img {
	transform: scale(1.06);
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-js .sf-visita-page__cita.is-visible .sf-visita-page__cita-media-img {
	transform: scale(1);
}

@media (max-width: 63.999rem) {
	.sf-visita-page__cita-media {
		margin-top: clamp(2rem, 5vh, 3rem);
		max-width: 460px;
		aspect-ratio: 4 / 3;
	}
}

.sf-visita-page__cita-fig {
	position: relative;
	max-width: 34rem;
	margin: clamp(1rem, 2.5vh, 1.5rem) 0 0;
	padding-left: clamp(1.25rem, 3vw, 2rem);
}

/* Barra IZQUIERDA 3px verde que se dibuja (scaleY, origen arriba). */
.sf-visita-page__cita-fig::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 100%;
	background-color: var(--wp--preset--color--primario, #00a74d);
	transform: scaleY(1);
	transform-origin: top;
}

.sf-js .sf-visita-page__cita-fig::before {
	transform: scaleY(0);
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-js .sf-visita-page__cita.is-visible .sf-visita-page__cita-fig::before {
	transform: scaleY(1);
}

.sf-visita-page__cita-text {
	margin: 0;
	max-width: 30ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-style: italic;
	font-weight: 500;
	line-height: 1.35;
	font-size: clamp(1.5rem, 3vw, 2.4rem);
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
	text-wrap: balance;
}

/* Wordsplit (page-visita.js). */
.sf-js .sf-visita-page__cita-text.is-split .w {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.35em);
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: calc(var(--i) * 45ms);
}

.sf-js .sf-visita-page__cita.is-visible .sf-visita-page__cita-text.is-split .w {
	opacity: 1;
	transform: none;
}

.sf-visita-page__cita-author {
	display: block;
	margin-top: 1.5rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* 62% daba 3,98:1 sobre la niebla a 12px — por debajo del 4,5 de AA, y lo cantaba
	   Lighthouse. A 72% son 5,3:1 y el gris sigue siendo gris. (11/08/2026) */
	color: color-mix(in srgb, var(--wp--preset--color--tinta, #173404) 72%, transparent);
}

/* ========================================================================= *
 * FAQ (niebla)
 * ========================================================================= */
.sf-visita-page__faq {
	background-color: var(--wp--preset--color--verde-niebla, #e1f5ee);
	padding-block: clamp(3rem, 7vh, 5rem);
}

.sf-visita-page__faq-title {
	max-width: 24ch;
}

.sf-visita-page__faq-list {
	max-width: 52rem;
}

.sf-visita-page__faq-item {
	position: relative;
	padding-top: 1.1rem;
}

/* Línea superior dibujada por item. */
.sf-visita-page__faq-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: rgba(11, 46, 31, 0.18);
	transform: scaleX(1);
	transform-origin: left;
}

.sf-js .sf-visita-page__faq-item::before {
	transform: scaleX(0);
	transition: transform 0.7s ease;
	transition-delay: calc(var(--i) * 90ms);
}

.sf-js .sf-visita-page__faq-item.is-inview::before {
	transform: scaleX(1);
}

.sf-visita-page__faq-summary {
	list-style: none;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 0;
	cursor: pointer;
}

.sf-visita-page__faq-summary::-webkit-details-marker {
	display: none;
}

.sf-visita-page__faq-summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primario, #00a74d);
	outline-offset: 3px;
	border-radius: 4px;
}

.sf-visita-page__faq-num {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--primario, #00a74d);
}

.sf-visita-page__faq-q {
	font-family: var(--wp--preset--font-family--cuerpo);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	line-height: 1.3;
	color: var(--wp--preset--color--verde-bosque, #0b2e1f);
}

/* Marcador +/× (dos barras; rota a × al abrir). */
.sf-visita-page__faq-marker {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sf-visita-page__faq-marker::before,
.sf-visita-page__faq-marker::after {
	content: "";
	position: absolute;
	background-color: var(--wp--preset--color--primario, #00a74d);
	border-radius: 2px;
}

.sf-visita-page__faq-marker::before {
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	transform: translateY(-50%);
}

.sf-visita-page__faq-marker::after {
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	transform: translateX(-50%);
}

.sf-visita-page__faq-item[open] .sf-visita-page__faq-marker {
	transform: rotate(135deg);
}

/* Respuesta: grid-rows 0fr -> 1fr. is-closing mantiene [open] durante el cierre. */
.sf-visita-page__faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sf-visita-page__faq-item[open] .sf-visita-page__faq-answer {
	grid-template-rows: 1fr;
}

.sf-visita-page__faq-item.is-closing .sf-visita-page__faq-answer {
	grid-template-rows: 0fr;
}

.sf-visita-page__faq-answer-inner {
	overflow: hidden;
}

.sf-visita-page__faq-answer-inner p {
	margin: 0;
	padding: 0 0 1.1rem clamp(1.5rem, 3vw, 2.75rem);
	max-width: 62ch;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--tinta, #173404);
}

/* Rotulador fluor estático (FAQ). */
.sf-visita-page__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;
	background-image: linear-gradient(rgba(0, 231, 112, 0.38), rgba(0, 231, 112, 0.38));
	background-repeat: no-repeat;
	background-size: 100% 94%;
	background-position: 0 58%;
	color: inherit;
}

/* Flash del campo de etapa al pulsar un [data-etapa]. */
.sf-visita-page__field.is-flash select {
	animation: sf-field-flash 0.6s ease;
}

@keyframes sf-field-flash {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 167, 77, 0.5);
	}
	30% {
		box-shadow: 0 0 0 3px rgba(0, 167, 77, 0.35);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0, 167, 77, 0);
	}
}

/* ========================================================================= *
 * RECONOCIDOS en la landing: niebla + SIN cierre. Va entre FAQ y el formulario,
 * así que su ::after (el anochecer) se anula; el fundido a noche pasa al final de
 * solicitud. Padding inferior normal (ya no reserva zona de fundido).
 * ========================================================================= */
.sf-visita-page .sf-reconocidos {
	background-color: var(--wp--preset--color--verde-niebla, #e1f5ee);
	padding-bottom: clamp(3rem, 7vh, 5rem);
}

.sf-visita-page .sf-reconocidos::after {
	content: none;
}

@media (prefers-reduced-motion: reduce) {
	.sf-visita-page__pulse {
		animation: none;
	}

	.sf-js .sf-visita-page__point::before,
	.sf-js .sf-visita-page__paso::before {
		transition: none;
	}

	.sf-js .sf-visita-page__hl {
		background-size: 100% 94%;
		transition: none;
	}

	.sf-visita-page__panel-img,
	.sf-visita-page__panel-img.is-active {
		animation: none;
	}

	.sf-visita-page__mobilebar {
		transition: none;
	}

	.sf-visita-page__wa {
		transition: none;
	}

	.sf-visita-page__wa:hover {
		transform: none;
	}

	/* Sin motas, sin parallax; pegatina y palabras estáticas en su estado normal. */
	.sf-visita-page__motes {
		display: none;
	}

	.sf-visita-page__banda0-sticker {
		transition: none;
	}

	.sf-js .sf-visita-page__title.is-split .w {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.sf-js .sf-visita-page .sf-inview {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Secciones nuevas: dibujos, expansiones y wordsplit estáticos. */
	.sf-js .sf-visita-page__b0-point::before,
	.sf-js .sf-visita-page__faq-item::before {
		transition: none;
	}

	.sf-visita-page__lamina,
	.sf-visita-page__lamina-img,
	.sf-visita-page__lamina-item,
	.sf-visita-page__faq-answer,
	.sf-visita-page__faq-marker,
	.sf-visita-page__lamina-label-v,
	.sf-visita-page__lamina-label-h {
		transition: none;
	}

	.sf-js .sf-visita-page__cita-text.is-split .w {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.sf-js .sf-visita-page__cita-fig::before {
		transform: scaleY(1);
		transition: none;
	}

	.sf-visita-page__b0-cta:hover {
		transform: none;
	}

	.sf-visita-page__b0-cta,
	.sf-visita-page__b0-cta span {
		transition: none;
	}

	.sf-visita-page__b0-cta:hover span {
		transform: none;
	}

	/* Abanico de la banda 0: ya desplegado y estático (sin apilar ni barajar). */
	.sf-js .sf-visita-page__banda0-fan--multi .sf-visita-page__banda0-card:nth-child(1) {
		transform: rotate(-8deg) translate(-14%, 4%);
	}
	.sf-js .sf-visita-page__banda0-fan--multi .sf-visita-page__banda0-card:nth-child(2) {
		transform: rotate(-1deg);
	}
	.sf-js .sf-visita-page__banda0-fan--multi .sf-visita-page__banda0-card:nth-child(3) {
		transform: rotate(6deg) translate(12%, -3%);
	}

	.sf-js .sf-visita-page__banda0-card,
	.sf-visita-page__banda0-face {
		transition: none;
	}

	/* Foto del testimonio: visible fija, sin barrido ni zoom. */
	.sf-js .sf-visita-page__cita-media {
		clip-path: none;
		transition: none;
	}

	.sf-js .sf-visita-page__cita-media-img {
		transform: none;
		transition: none;
	}
}

/* =========================================================================
 * PASADA CRO (11/08/2026)
 * ========================================================================= */

/* WhatsApp APAGADO: mismo trato que en /familias/. No es un enlace y no lo aparenta —
   gris, sin sombra, cursor de «aquí no» y su chip a la vista. El aria-disabled y el
   title de tooltip los pone el PHP. */
.sf-visita-page__wa--off {
	/* Atenuada SÍ, ilegible NO. La primera versión (52% de tinta sobre 12%, y encima
	   opacity .75 encima de todo) daba 2,13:1 de contraste — la ley de la casa es AA.
	   Medido de nuevo con estos valores: 4,6:1. Sigue leyéndose apagada a la primera
	   (borde plano, icono desvaído, chip y cursor de «aquí no») y ya se lee. */
	background: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 10%, transparent );
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 68%, transparent );
	box-shadow: none;
	cursor: not-allowed;
	flex-wrap: wrap;
}
.sf-visita-page__wa--off .sf-visita-page__wa-icon { opacity: 0.55; }
.sf-visita-page__wa-chip {
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 10px;
	letter-spacing: 0.12em;
	padding: 0.15rem 0.5rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	opacity: 0.85;
}

/* La barra móvil, con un solo CTA: a todo el ancho. */
.sf-visita-page__mobilebar--solo .sf-visita-page__mobilebar-btn { flex: 1 1 100%; }

/* MICRO-PRUEBA SOCIAL junto al formulario: una línea, discreta, con la barra de cera
   a la izquierda. No compite con el titular; acompaña a la decisión. */
.sf-visita-page__form-quote {
	margin: 0 0 1.35rem;
	padding-inline-start: 0.85rem;
	border-inline-start: 3px solid var(--wp--preset--color--primario, #00a74d);
}
.sf-visita-page__form-quote blockquote {
	margin: 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-style: italic;
	font-size: 0.98rem;
	line-height: 1.45;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 88%, transparent );
}
.sf-visita-page__form-quote figcaption {
	margin-top: 0.3rem;
	font-family: var(--wp--preset--font-family--etiquetas);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix( in srgb, var(--wp--preset--color--tinta, #173404) 58%, transparent );
}