/* =========================================================================
   Segovia · Formulario de Consulta — Frontend

   ESCALA TIPOGRÁFICA (una sola, para todo el bloque)
     Título principal ... clamp(34px, 4vw, 50px)  DM Serif · marrón
     Título de columna .. clamp(22px, 2.4vw, 28px) DM Serif · marrón
     Cuerpo / datos ..... 16px  · texto
     Campos (input) ..... 16px  · texto      (16px evita el zoom de iOS)
     Etiquetas .......... 14px  · texto
     Ayudas / hints ..... 13px  · gris
     Botones ............ 16px

   JERARQUÍA DE COLOR
     texto (#252525) .... todo el contenido principal
     gris  (#7a7a7a) .... sólo subtítulo y textos de ayuda
     ámbar (#e6a12b) .... sólo acentos: iconos, asteriscos, enlaces, botón

   NOTA SOBRE !important
     El tema (Salient) pisa color, letter-spacing y text-decoration de
     los elementos genéricos (label, a, p). Se fuerzan sólo las
     propiedades tipográficas y sólo dentro de .sfc-contacto.
   ========================================================================= */

.sfc-contacto {
	--sfc-ambar: #e6a12b;
	--sfc-marron: #5c3c09;
	--sfc-fondo: #fffbeb;
	--sfc-texto: #252525;
	--sfc-gris: #7a7a7a;
	--sfc-borde: #e0d8c4;
	--sfc-input-bg: #ffffff;
	--sfc-radio: 6px;

	/* Escala tipográfica */
	--sfc-fs-cuerpo: 16px;
	--sfc-fs-label: 14px;
	--sfc-fs-hint: 13px;
	--sfc-fs-boton: 16px;

	background: var(--sfc-fondo);
	color: var(--sfc-texto);
	padding: clamp(32px, 6vw, 80px) clamp(18px, 5vw, 60px);
	box-sizing: border-box;
}

.sfc-contacto *,
.sfc-contacto *::before,
.sfc-contacto *::after {
	box-sizing: border-box;
}

/* --- Normalización contra el tema ---------------------------------------
   Salient aplica letter-spacing negativo y text-transform a labels y
   enlaces. Se neutraliza en todo el bloque y después se define lo propio. */
.sfc-contacto p,
.sfc-contacto a,
.sfc-contacto li,
.sfc-contacto span,
.sfc-contacto label,
.sfc-contacto input,
.sfc-contacto textarea,
.sfc-contacto button {
	letter-spacing: normal !important;
	text-transform: none !important;
}

.sfc-contacto a {
	text-decoration: none !important;
	box-shadow: none !important;
}

/* El tema fuerza display en los <label> y border-radius tipo píldora en
   los botones. Se recuperan los valores propios. */
.sfc-contacto .sfc-btn,
.sfc-contacto .sfc-btn-wa,
.sfc-contacto .sfc-form input[type="text"],
.sfc-contacto .sfc-form input[type="tel"],
.sfc-contacto .sfc-form input[type="email"],
.sfc-contacto .sfc-form textarea,
.sfc-contacto .sfc-dropzone {
	border-radius: var(--sfc-radio) !important;
}

.sfc-wrap {
	max-width: 1180px;
	margin: 0 auto;
}

/* El formulario ES la grilla. Así el botón puede quedar en una fila propia
   debajo, y la columna derecha se estira hasta el fondo de la primera fila,
   que es exactamente donde termina la caja de adjuntos. */
.sfc-contacto .sfc-form {
	display: grid !important;
	grid-template-columns: 1.15fr 0.85fr;
	/* OJO: `gap` a secas aplica entre columnas Y entre filas. Como el pie
	   (captcha + botón) está en una fila propia, ese mismo valor de hasta
	   64px se sumaba al margen del pie y alejaba el botón del formulario.
	   Por eso se declaran por separado. */
	column-gap: clamp(28px, 5vw, 64px);
	row-gap: 0;
	align-items: stretch;
	margin: 0;
	padding: 0;
}

/* Columna izquierda: encabezado + campos. */
.sfc-col-form {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sfc-campos {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* El pie ocupa sólo la columna izquierda, en su propia fila. */
/* El pie va pegado al formulario: sólo el aire necesario para separarlo
   de la caja de adjuntos, sin que parezca un bloque aparte. */
.sfc-pie {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	/* Única separación entre la caja de adjuntos y el captcha. */
	margin-top: 24px;
}

/* =========================================================================
   Encabezados

   PROBLEMA QUE RESUELVE ESTE BLOQUE
   El subtítulo se montaba encima del título. Forzar propiedades sueltas
   (position, float, margin) no alcanzó, porque el tema puede pisar
   cualquiera de ellas de maneras difíciles de anticipar.

   SOLUCIÓN ESTRUCTURAL
   Título y subtítulo van dentro de un contenedor flex en columna. Dos
   elementos flex hermanos NO pueden ocupar el mismo espacio: el navegador
   les asigna su lugar sin importar qué márgenes o alineaciones intente
   aplicar el tema. La separación la da el gap, que tampoco depende de los
   márgenes de los hijos.
   ========================================================================= */
.sfc-contacto .sfc-encabezado {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 14px !important;
	position: relative !important;
	width: 100%;
	margin: 0 0 44px !important;
	padding: 0 !important;
}

/* Los hijos no pueden salirse del flujo del contenedor. */
.sfc-contacto .sfc-encabezado > * {
	display: block !important;
	position: static !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	inset: auto !important;
	transform: none !important;
}

.sfc-contacto .sfc-titulo {
	color: var(--sfc-marron) !important;
	font-size: clamp(34px, 4vw, 50px) !important;
	line-height: 1.1 !important;
	font-weight: 400 !important;
}

.sfc-contacto .sfc-subtitulo {
	color: var(--sfc-gris) !important;
	font-size: var(--sfc-fs-cuerpo) !important;
	line-height: 1.6 !important;
	font-weight: 400 !important;
	max-width: 48ch;
}

/* Variante centrada, para la página de gracias. */
.sfc-contacto .sfc-encabezado-centro {
	align-items: center !important;
	text-align: center;
}

.sfc-contacto .sfc-encabezado-centro .sfc-subtitulo {
	max-width: 42ch;
}

/* El título de la columna derecha no tiene subtítulo al lado, pero se
   blinda igual por las mismas razones. */
.sfc-contacto .sfc-info-titulo {
	display: block !important;
	position: static !important;
	float: none !important;
	clear: both !important;
	width: auto !important;
	height: auto !important;
	color: var(--sfc-marron) !important;
	font-size: clamp(22px, 2.4vw, 28px) !important;
	line-height: 1.2 !important;
	font-weight: 400 !important;
	margin: 0 0 28px !important;
	padding: 0 !important;
	inset: auto !important;
}

/* =========================================================================
   Formulario
   ========================================================================= */
.sfc-fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

.sfc-campo {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sfc-contacto .sfc-campo > label {
	display: block;
	font-size: var(--sfc-fs-label) !important;
	line-height: 1.3 !important;
	color: var(--sfc-texto) !important;
	margin: 0 !important;
	padding: 0;
}

.sfc-contacto .sfc-campo > label span {
	color: var(--sfc-ambar) !important;
}

.sfc-contacto .sfc-form input[type="text"],
.sfc-contacto .sfc-form input[type="tel"],
.sfc-contacto .sfc-form input[type="email"],
.sfc-contacto .sfc-form textarea {
	width: 100%;
	background: var(--sfc-input-bg);
	border: 1px solid var(--sfc-borde);
	border-radius: var(--sfc-radio);
	padding: 13px 15px;
	font-size: var(--sfc-fs-cuerpo) !important;
	line-height: 1.45 !important;
	font-family: inherit;
	color: var(--sfc-texto) !important;
	margin: 0;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.sfc-contacto .sfc-form textarea {
	resize: vertical;
	min-height: 140px;
}

.sfc-contacto .sfc-form input:focus,
.sfc-contacto .sfc-form textarea:focus {
	outline: none;
	border-color: var(--sfc-ambar);
	box-shadow: 0 0 0 3px rgba(230, 161, 43, 0.18);
}

.sfc-contacto .sfc-form input::placeholder,
.sfc-contacto .sfc-form textarea::placeholder {
	color: #b9b2a0 !important;
}

/* =========================================================================
   Adjuntos

   El tema pisa el display de los <label>, y por eso el icono, el texto y
   la ayuda terminaban en una sola línea. Se fuerza la estructura vertical
   y el color de cada parte.
   ========================================================================= */
.sfc-contacto .sfc-opcional {
	color: var(--sfc-gris) !important;
	font-style: normal !important;
	font-size: var(--sfc-fs-hint) !important;
}

/* Caja de adjuntos, versión compacta.

   Antes era un bloque centrado de ~185px de alto que competía con los
   campos del formulario. Ahora es una barra horizontal de ~72px: el icono
   a la izquierda y dos renglones de texto al lado. Sigue siendo zona de
   arrastre, pero ya no es el elemento más grande de la pantalla. */
.sfc-contacto .sfc-campo-archivo .sfc-dropzone {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: left !important;
	gap: 14px !important;
	width: 100%;
	background: var(--sfc-input-bg);
	border: 1px dashed var(--sfc-borde);
	padding: 16px 18px !important;
	margin: 0 !important;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.sfc-contacto .sfc-campo-archivo .sfc-dropzone:hover,
.sfc-contacto .sfc-campo-archivo .sfc-dropzone.sfc-drag {
	border-color: var(--sfc-ambar);
	background: #fffdf5;
}

.sfc-contacto .sfc-campo-archivo .sfc-dropzone-icono {
	display: block !important;
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	margin: 0 !important;
	color: var(--sfc-ambar) !important;
}

.sfc-contacto .sfc-campo-archivo .sfc-dropzone-icono svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sfc-contacto .sfc-campo-archivo .sfc-dropzone-cuerpo {
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
	min-width: 0;
}

.sfc-contacto .sfc-campo-archivo .sfc-dropzone-texto {
	display: block !important;
	font-size: var(--sfc-fs-label) !important;
	line-height: 1.35 !important;
	color: var(--sfc-texto) !important;
	margin: 0 !important;
}

.sfc-contacto .sfc-campo-archivo .sfc-dropzone-hint {
	display: block !important;
	font-size: 12px !important;
	line-height: 1.35 !important;
	color: var(--sfc-gris) !important;
	margin: 0 !important;
}

.sfc-contacto .sfc-campo-archivo .sfc-dropzone input[type="file"] {
	display: none !important;
}

.sfc-lista-archivos {
	list-style: none;
	margin: 10px 0 0 !important;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sfc-contacto .sfc-lista-archivos li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--sfc-borde);
	border-radius: var(--sfc-radio);
	padding: 11px 14px;
	margin: 0;
	font-size: var(--sfc-fs-hint) !important;
	line-height: 1.4 !important;
	color: var(--sfc-texto) !important;
	text-align: left;
}

.sfc-contacto .sfc-lista-archivos .sfc-archivo-nombre {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--sfc-texto) !important;
}

.sfc-contacto .sfc-lista-archivos .sfc-archivo-peso {
	color: var(--sfc-gris) !important;
	white-space: nowrap;
}

.sfc-contacto .sfc-lista-archivos .sfc-quitar {
	flex: 0 0 auto;
	border: none;
	background: none;
	color: var(--sfc-gris) !important;
	cursor: pointer;
	font-size: 20px !important;
	line-height: 1 !important;
	padding: 0 2px;
}

.sfc-contacto .sfc-lista-archivos .sfc-quitar:hover {
	color: #c0392b !important;
}

/* --- Honeypot --- */
.sfc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =========================================================================
   Captcha propio · "No soy un robot"
   ========================================================================= */
.sfc-contacto .sfc-captcha {
	display: block;
	margin: 0;
}

.sfc-contacto .sfc-captcha-caja {
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
	background: var(--sfc-input-bg);
	border: 1px solid var(--sfc-borde);
	border-radius: var(--sfc-radio);
	padding: 14px 20px 14px 16px !important;
	margin: 0 !important;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.sfc-contacto .sfc-captcha-caja:hover {
	border-color: var(--sfc-ambar);
}

/* La casilla real queda oculta pero accesible por teclado. */
.sfc-contacto .sfc-captcha-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

/* Cuadro dibujado a mano, para poder darle el color de la marca. */
.sfc-contacto .sfc-captcha-marca {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--sfc-gris);
	border-radius: 4px;
	background: #fff;
	color: transparent;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.sfc-contacto .sfc-captcha-marca svg {
	width: 15px;
	height: 15px;
	display: block;
}

.sfc-contacto .sfc-captcha-input:checked + .sfc-captcha-marca {
	background: var(--sfc-ambar);
	border-color: var(--sfc-ambar);
	color: #ffffff;
}

/* Foco visible para quien navega con teclado. */
.sfc-contacto .sfc-captcha-input:focus-visible + .sfc-captcha-marca {
	box-shadow: 0 0 0 3px rgba(230, 161, 43, 0.35);
}

.sfc-contacto .sfc-captcha-texto {
	font-size: var(--sfc-fs-cuerpo) !important;
	line-height: 1.3 !important;
	color: var(--sfc-texto) !important;
	user-select: none;
}

/* Estado de error, cuando se intenta enviar sin marcarla. */
.sfc-contacto .sfc-captcha.sfc-captcha-error .sfc-captcha-caja {
	border-color: #c0392b;
	background: #fdf6f5;
}

.sfc-contacto .sfc-captcha.sfc-captcha-error .sfc-captcha-marca {
	border-color: #c0392b;
}

/* Sin alto reservado: antes tenía min-height de 65px para evitar que el
   layout saltara al cargar el widget, pero si el captcha no llega a
   mostrarse ese espacio queda como un hueco muerto que aleja al botón.
   El widget de Turnstile carga rápido y trae su propio alto. */
.sfc-turnstile-wrap {
	min-height: 0;
}

/* No se le pone display:none al contenedor vacío: Turnstile necesita que su
   div esté visible para poder dibujarse adentro. Al no tener alto reservado,
   un contenedor vacío ya ocupa cero. */

/* =========================================================================
   Botones
   ========================================================================= */
.sfc-acciones {
	margin-top: 4px;
}

.sfc-contacto .sfc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sfc-ambar);
	color: #ffffff !important;
	border: none;
	border-radius: var(--sfc-radio);
	padding: 15px 40px;
	font-size: var(--sfc-fs-boton) !important;
	line-height: 1.2 !important;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.08s ease;
}

.sfc-contacto .sfc-btn:hover {
	background: var(--sfc-marron);
	color: #ffffff !important;
}

.sfc-contacto .sfc-btn:active {
	transform: translateY(1px);
}

.sfc-contacto .sfc-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* =========================================================================
   Mensajes
   ========================================================================= */
.sfc-mensaje {
	display: none;
	border-radius: var(--sfc-radio);
	padding: 14px 16px;
	font-size: var(--sfc-fs-label) !important;
	line-height: 1.5 !important;
}

.sfc-mensaje.sfc-ok {
	display: block;
	background: #eef7ec;
	border: 1px solid #cfe6c8;
	color: #2f6b2a !important;
}

.sfc-mensaje.sfc-error {
	display: block;
	background: #fdeeee;
	border: 1px solid #f3cccc;
	color: #a13030 !important;
}

/* =========================================================================
   Columna de contacto
   ========================================================================= */
.sfc-col-info {
	/* Sin sticky: al scrollear se despegaba de la columna izquierda.
	   Se estira a lo alto de la fila para que el mapa pueda crecer. */
	position: static;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	height: 100%;
	/* El título de la izquierda es grande y su interlineado deja aire por
	   encima del texto. Sin esto, la primera línea de la derecha se ve más
	   alta que "Contacto" aunque ambas columnas empiecen en el mismo punto. */
	padding-top: 8px;
}

.sfc-datos {
	list-style: none;
	margin: 0 0 28px !important;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sfc-contacto .sfc-dato {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	font-size: var(--sfc-fs-cuerpo) !important;
	line-height: 1.45 !important;
	color: var(--sfc-texto) !important;
}

.sfc-icono {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--sfc-ambar);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sfc-icono svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sfc-contacto .sfc-dato-texto,
.sfc-contacto .sfc-dato-texto a {
	font-size: var(--sfc-fs-cuerpo) !important;
	line-height: 1.45 !important;
	color: var(--sfc-texto) !important;
	border-bottom: 1px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.sfc-contacto .sfc-dato-texto a:hover {
	color: var(--sfc-ambar) !important;
	border-bottom-color: var(--sfc-ambar);
}

/* --- Botón de WhatsApp --- */
.sfc-contacto .sfc-btn-wa {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	color: var(--sfc-marron) !important;
	border: 1.5px solid var(--sfc-ambar);
	border-radius: var(--sfc-radio);
	padding: 13px 24px;
	font-size: var(--sfc-fs-boton) !important;
	line-height: 1.2 !important;
	margin: 0 0 24px;
	transition: background 0.2s ease, color 0.2s ease;
}

.sfc-btn-wa-icono {
	width: 19px;
	height: 19px;
	color: var(--sfc-ambar);
	display: inline-flex;
	transition: color 0.2s ease;
}

.sfc-btn-wa-icono svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sfc-contacto .sfc-btn-wa:hover {
	background: var(--sfc-ambar);
	color: #ffffff !important;
}

.sfc-contacto .sfc-btn-wa:hover .sfc-btn-wa-icono {
	color: #ffffff;
}

/* --- Cómo llegar --- */
.sfc-contacto .sfc-como-llegar {
	display: block;
	color: var(--sfc-ambar) !important;
	font-size: var(--sfc-fs-label) !important;
	line-height: 1.4 !important;
	margin: 0 0 24px;
	transition: color 0.18s ease;
}

.sfc-contacto .sfc-como-llegar:hover {
	color: var(--sfc-marron) !important;
}

/* --- Mapa --- */
/* El mapa absorbe el alto sobrante de la columna, y su base queda alineada
   con la base de la caja de adjuntos.

   La clave está en `flex: 1 1 0` combinado con `min-height: 0`: así el mapa
   NO aporta alto propio al calcular la altura de la columna. Si aportara
   (por ejemplo con min-height: 300px), la columna derecha podría resultar
   más alta que la izquierda y el mapa sobresaldría por abajo.

   El alto del renglón lo define entonces la columna izquierda, y el mapa
   se queda con lo que sobra. */
.sfc-map {
	width: 100%;
	flex: 1 1 0;
	min-height: 200px;
	border-radius: var(--sfc-radio);
	overflow: hidden;
	z-index: 0;
}

/* =========================================================================
   Integración del mapa con el fondo

   Un rectángulo macizo con borde duro sobre un fondo plano se lee como un
   parche pegado. Estas tres variantes atacan eso: no es un problema de
   color del mapa sino de cómo termina su borde.
   ========================================================================= */

/* --- Difuminado: los bordes se funden con el crema de la sección ---------
   El mask hace que el mapa se desvanezca hacia los cuatro lados, así que no
   hay un límite duro contra el fondo. Es la variante que mejor integra. */
.sfc-contacto.sfc-integra-difuminado .sfc-map {
	border: none;
	-webkit-mask-image:
		linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
		linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-composite: intersect;
}

/* Los controles se corren hacia adentro para no caer en la zona difuminada. */
.sfc-contacto.sfc-integra-difuminado .sfc-map .leaflet-top,
.sfc-contacto.sfc-integra-difuminado .sfc-map .leaflet-left {
	margin: 10px 0 0 10px;
}

/* Respaldo: si el navegador no soporta mask-image, el mapa quedaría sin
   ningún borde. Se le da uno suave para que no flote sin definición. */
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
	.sfc-contacto.sfc-integra-difuminado .sfc-map {
		border: 1px solid var(--sfc-borde);
	}
}

/* --- Tarjeta: se asume como bloque, con sombra suave e intencional ------- */
.sfc-contacto.sfc-integra-tarjeta .sfc-map {
	border: 1px solid var(--sfc-borde);
	box-shadow: 0 6px 22px rgba(92, 60, 9, 0.1);
}

/* --- Simple: borde fino, como venía --- */
.sfc-contacto.sfc-integra-simple .sfc-map {
	border: 1px solid var(--sfc-borde);
}

/* Modo de alto fijo: el mapa toma el valor configurado en el panel y deja
   de estirarse. Se pierde la alineación automática con los adjuntos, que es
   el precio de poder elegir el alto a mano. */
.sfc-contacto.sfc-mapa-fijo .sfc-map {
	flex: 0 0 auto;
	height: var(--sfc-map-alto, 380px);
	min-height: 0;
}

.sfc-map .leaflet-container {
	background: #f3efe2;
	font: inherit;
}

/* =========================================================================
   Estilo visual del mapa

   Los mapas base traen sus propios colores (verdes de parques, amarillos de
   avenidas) que no tienen nada que ver con la paleta del estudio. En vez de
   pagar un servicio de mapas a medida, se tiñen los tiles con un filtro CSS.

   El filtro va sobre el contenedor de tiles y NO sobre el mapa entero, para
   que el marcador y los controles conserven sus colores propios.
   ========================================================================= */

/* --- Cómo se tiñe el mapa ------------------------------------------------

   El teñido NO se hace desde acá: lo dibuja Leaflet como una capa propia
   (ver initMapa en sfc-frontend.js).

   Historial, para no repetir los intentos que fallaron:

   1. filter: sepia() sobre los tiles.
      En este mapa las calles son BLANCAS sobre tierra gris claro, o sea que
      se distinguen por luminancia. El sepia lleva ambos al mismo rango
      tierra y los empasta; el contrast() que se sumaba para compensar
      resaltaba las costuras entre tiles como una cuadrícula.

   2. Capa ::after con z-index 250.
      Leaflet envuelve todos sus paneles en .leaflet-map-pane (z-index 400),
      así que una capa en 250 queda por debajo de los tiles y no se ve.

   3. mix-blend-mode: multiply en los tiles.
      Tampoco se aplicó de forma confiable: los paneles de Leaflet y los
      filtros crean contextos de apilado que aíslan el blend.

   La conclusión es que intercalar algo entre los tiles y el marcador desde
   CSS no es confiable, porque el orden lo gobierna Leaflet. Por eso el
   teñido pasó a ser una capa de Leaflet, en un panel propio con z-index
   350: entre los tiles (200) y el marcador (600).
   ---------------------------------------------------------------------- */

/* Tono marca: el mapa base (Voyager) ya trae la tierra en crema y las
   etiquetas oscuras, así que el filtro es MÍNIMO. Sólo se baja un poco la
   saturación para atenuar los verdes de las plazas, sin tocar el contraste
   de los nombres de calles.

   Nada de teñir por CSS acá: eso fue lo que arruinaba la legibilidad en las
   versiones anteriores. */
.sfc-contacto.sfc-mapa-marca .sfc-map .leaflet-tile-pane {
	filter: saturate(0.68) brightness(1.05);
}

.sfc-contacto.sfc-mapa-marca.sfc-contraste-suave .sfc-map .leaflet-tile-pane {
	filter: saturate(0.6) brightness(1.08) contrast(0.96);
}

.sfc-contacto.sfc-mapa-marca.sfc-contraste-medio .sfc-map .leaflet-tile-pane {
	filter: saturate(0.68) brightness(1.05);
}

.sfc-contacto.sfc-mapa-marca.sfc-contraste-fuerte .sfc-map .leaflet-tile-pane {
	filter: saturate(0.75) brightness(1.02) contrast(1.1);
}

/* --- Claro --- */
.sfc-contacto.sfc-mapa-claro .sfc-map .leaflet-tile-pane {
	filter: saturate(0.7) contrast(1.35) brightness(0.95);
}

.sfc-contacto.sfc-mapa-claro.sfc-contraste-suave .sfc-map .leaflet-tile-pane {
	filter: saturate(0.7);
}

.sfc-contacto.sfc-mapa-claro.sfc-contraste-medio .sfc-map .leaflet-tile-pane {
	filter: saturate(0.7) contrast(1.18);
}

.sfc-contacto.sfc-mapa-claro.sfc-contraste-fuerte .sfc-map .leaflet-tile-pane {
	filter: saturate(0.7) contrast(1.5) brightness(0.92);
}

/* --- Gris --- */
.sfc-contacto.sfc-mapa-gris .sfc-map .leaflet-tile-pane {
	filter: grayscale(1) contrast(1.35) brightness(0.95);
}

.sfc-contacto.sfc-mapa-gris.sfc-contraste-suave .sfc-map .leaflet-tile-pane {
	filter: grayscale(1);
}

.sfc-contacto.sfc-mapa-gris.sfc-contraste-medio .sfc-map .leaflet-tile-pane {
	filter: grayscale(1) contrast(1.18);
}

.sfc-contacto.sfc-mapa-gris.sfc-contraste-fuerte .sfc-map .leaflet-tile-pane {
	filter: grayscale(1) contrast(1.5) brightness(0.92);
}

/* --- OSM estándar: se deja tal cual --- */

/* --- Marcador propio --- */
.sfc-map .sfc-pin {
	background: none;
	border: 0;
	filter: drop-shadow(0 3px 5px rgba(92, 60, 9, 0.35));
}

.sfc-map .sfc-pin svg {
	width: 34px;
	height: 46px;
	display: block;
}

/* --- Controles de zoom con el estilo del sitio --- */
.sfc-map .leaflet-control-zoom {
	border: none !important;
	box-shadow: 0 1px 4px rgba(92, 60, 9, 0.18) !important;
	border-radius: var(--sfc-radio) !important;
	overflow: hidden;
}

.sfc-map .leaflet-control-zoom a {
	background-color: #ffffff !important;
	color: var(--sfc-marron) !important;
	border-bottom-color: var(--sfc-borde) !important;
	width: 30px !important;
	height: 30px !important;
	line-height: 30px !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sfc-map .leaflet-control-zoom a:hover {
	background-color: var(--sfc-ambar) !important;
	color: #ffffff !important;
}

/* --- Atribución ---
   OpenStreetMap y Carto la exigen por licencia, así que la opción por
   defecto la deja visible pero muy discreta. */
.sfc-map .leaflet-control-attribution {
	background: rgba(255, 255, 255, 0.7) !important;
	font-size: 10px !important;
	color: var(--sfc-gris) !important;
	padding: 1px 6px !important;
}

.sfc-map .leaflet-control-attribution a {
	color: var(--sfc-gris) !important;
}

/* Discreta: apenas perceptible, se aclara al pasar el mouse. */
.sfc-contacto.sfc-atrib-discreta .sfc-map .leaflet-control-attribution {
	background: rgba(255, 255, 255, 0.35) !important;
	font-size: 9px !important;
	padding: 0 4px !important;
	opacity: 0.45;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.sfc-contacto.sfc-atrib-discreta .sfc-map:hover .leaflet-control-attribution {
	opacity: 1;
	background: rgba(255, 255, 255, 0.85) !important;
}

/* --- Globo del marcador con la tipografía y colores del sitio --- */
.sfc-map .leaflet-popup-content-wrapper {
	border-radius: var(--sfc-radio) !important;
	box-shadow: 0 3px 12px rgba(92, 60, 9, 0.2) !important;
}

.sfc-map .leaflet-popup-content {
	margin: 12px 16px !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: var(--sfc-texto) !important;
}

/* =========================================================================
   Animaciones de entrada

   PRINCIPIO DE SEGURIDAD: los elementos NO se ocultan por defecto. Sólo se
   ocultan cuando el JS agrega .sfc-anim al contenedor. Si el JS falla o no
   llega a ejecutarse, todo se ve normalmente. Nunca puede pasar que el
   formulario quede invisible por culpa de una animación.

   DOS INTENSIDADES
     sutil    12px · 0,70s · apenas perceptible
     marcada  30px · 0,95s · se nota la entrada, sin llegar a ser un efecto

   Se anima sólo opacity y transform: son las dos propiedades que el
   navegador resuelve en la GPU. Animar altura, margen o filtros obliga a
   recalcular el layout en cada cuadro y se entrecorta en celulares.
   ========================================================================= */
.sfc-contacto.sfc-anim .sfc-reveal {
	opacity: 0;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.16, 0.84, 0.34, 1);
	will-change: opacity, transform;
}

.sfc-contacto.sfc-anim .sfc-reveal.sfc-visible {
	opacity: 1;
	transform: none;
}

/* --- Intensidad sutil --- */
.sfc-contacto.sfc-anim-sutil .sfc-reveal {
	transform: translateY(10px);
	transition-duration: 0.8s;
}

/* --- Intensidad marcada --- */
.sfc-contacto.sfc-anim-marcada .sfc-reveal {
	transform: translateY(16px);
	transition-duration: 1.15s;
}

/* Los títulos entran un poco más lejos: son el ancla visual del bloque y
   el recorrido extra se lee como intencional, no como exceso. */
.sfc-contacto.sfc-anim-marcada .sfc-encabezado.sfc-reveal,
.sfc-contacto.sfc-anim-marcada .sfc-info-titulo.sfc-reveal {
	transform: translateY(22px);
	transition-duration: 1.25s;
}

/* El mapa es un bloque grande: desplazarlo tanto como al texto resulta
   pesado. Entra con menos recorrido y sólo con opacidad protagonista. */
/* Los datos van más juntos entre sí, así que recorren menos. */
.sfc-contacto.sfc-anim-marcada .sfc-dato.sfc-reveal {
	transform: translateY(12px);
	transition-duration: 1.05s;
}

.sfc-contacto.sfc-anim-marcada .sfc-map.sfc-reveal {
	transform: translateY(14px);
	transition-duration: 1.35s;
}

/* Una vez terminada la entrada se libera will-change: mantenerlo activo
   consume memoria de GPU sin necesidad. */
.sfc-contacto.sfc-anim .sfc-reveal.sfc-listo {
	will-change: auto;
}

/* Accesibilidad: si el sistema pide menos movimiento, se muestra todo sin
   animar. Es un ajuste que la gente activa por mareos o migrañas. */
@media (prefers-reduced-motion: reduce) {
	.sfc-contacto.sfc-anim .sfc-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* En pantallas chicas se reduce el recorrido: el mismo desplazamiento que
   en desktop, sobre una pantalla angosta, se siente exagerado. */
@media (max-width: 560px) {
	.sfc-contacto.sfc-anim-marcada .sfc-reveal,
	.sfc-contacto.sfc-anim-marcada .sfc-encabezado.sfc-reveal,
	.sfc-contacto.sfc-anim-marcada .sfc-info-titulo.sfc-reveal {
		transform: translateY(12px);
	}
}

/* =========================================================================
   Página de gracias
   ========================================================================= */
.sfc-gracias-wrap {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
}

.sfc-gracias-check {
	display: inline-flex;
	width: 52px;
	height: 52px;
	color: var(--sfc-ambar);
	margin-bottom: 18px;
}

.sfc-gracias-check svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sfc-gracias-acciones {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.sfc-contacto .sfc-gracias-volver {
	color: var(--sfc-gris) !important;
	font-size: var(--sfc-fs-label) !important;
	line-height: 1.4 !important;
	transition: color 0.18s ease;
}

.sfc-contacto .sfc-gracias-volver:hover {
	color: var(--sfc-ambar) !important;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
	.sfc-contacto .sfc-form {
		grid-template-columns: 1fr;
	}

	.sfc-col-info {
		height: auto;
		padding-top: 0;
	}

	/* En una sola columna el mapa no tiene de qué estirarse: toma el alto
	   configurado para móvil, en cualquiera de los dos modos. */
	.sfc-map,
	.sfc-contacto.sfc-mapa-fijo .sfc-map {
		flex: 0 0 auto;
		height: var(--sfc-map-alto-movil, 300px);
		min-height: 0;
	}

	/* En una sola columna el botón tiene que ir pegado a los campos, no
	   después del mapa. Se reordena: campos, botón, datos de contacto. */
	.sfc-col-form {
		order: 1;
	}

	/* Sin row-gap, la separación entre bloques la dan estos márgenes. */
	.sfc-pie {
		order: 2;
		margin-top: 24px;
	}

	.sfc-col-info {
		order: 3;
		margin-top: 48px;
	}
}

@media (max-width: 560px) {
	.sfc-fila {
		grid-template-columns: 1fr;
	}

	.sfc-contacto .sfc-btn,
	.sfc-contacto .sfc-btn-wa {
		width: 100%;
		justify-content: center;
	}

}