/* ==========================================================================
   sa26 — Sistema visual 2026 para serviciosalicante.net
   ==========================================================================

   Cada decisión de este fichero tiene un motivo declarado. Nada es decorativo.

   JERARQUÍA INVERTIDA (el encargo central)
   El H1 lleva la keyword y existe para el algoritmo, pero visualmente actúa
   como antetítulo pequeño. Quien manda en la mirada es la frase gancho, que es
   un <p>. Es el mismo recurso del titular de prensa seria: el epígrafe orienta,
   la entradilla convence. Google lee la jerarquía correcta; la persona recibe
   primero el argumento.

   COLOR CON ESCASEZ DELIBERADA
   El rojo de marca (#cf1020) aparece en menos del 3 % de la superficie: solo
   en la etiqueta del H1, en el CTA y en el subrayado del gancho. Un color que
   aparece en todas partes deja de significar nada; restringido, cada aparición
   ordena una acción. Efecto von Restorff aplicado al color.

   MOVIMIENTO CON PROPÓSITO
   Nada se mueve por moverse. El movimiento aquí hace tres cosas: confirmar que
   el sistema responde (reduce ansiedad), marcar progreso de lectura (efecto
   Zeigarnik: una tarea empezada tira de uno hasta acabarla) y dirigir la mirada
   al siguiente punto de decisión. Todo respeta prefers-reduced-motion.

   RENDIMIENTO
   Animaciones de scroll nativas (animation-timeline), sin JavaScript ni
   librerías. Solo se animan transform y opacity, que van al compositor y no
   provocan recálculo de diseño.
   ========================================================================== */

/* Las variables van en :root porque los elementos del hero (etiqueta, H1 y
   frase gancho) viven en el contenedor del tema, FUERA de .sa26. Si se
   definieran solo en .sa26, en el hero resolverían a vacío y el tema los
   pisaría. En :root están disponibles en toda la página. */
:root {
	--sa-marca: #cf1020;          /* acción: solo CTA y acentos de mando */
	--sa-marca-suave: #ff4e64;
	--sa-tinta: #16181d;          /* autoridad: máximo contraste para leer */
	--sa-tinta-media: #4a4f5a;
	--sa-tinta-suave: #6b7280;
	--sa-papel: #ffffff;
	--sa-papel-calido: #fbfaf8;   /* calidez: reduce la fatiga frente al blanco puro */
	--sa-linea: #e8e6e2;
	--sa-confianza: #0e7490;      /* dato verificable, nunca venta */
	--sa-ancho: 760px;            /* ~75 caracteres por línea: el óptimo de lectura */
	--sa-curva: cubic-bezier(.22,.61,.36,1);
}

.sa26 {
	display: block;
	max-width: var(--sa-ancho);
	margin-inline: auto;
	padding: 0 20px 64px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	font-size: 18px;              /* cuerpo generoso: la lectura larga lo exige */
	line-height: 1.72;
	color: var(--sa-tinta);
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   0. HERO — jerarquía invertida SOBRE EL FONDO OSCURO DEL TEMA
   Los tres elementos de entrada viven en .title-content, el contenedor del
   tema, que tiene fondo con imagen y superposición oscura: el texto va en
   claro. La jerarquía invertida (H1 pequeño, gancho enorme) se impone aquí con
   selectores lo bastante específicos para ganar al tema, que da a todos sus H1
   un cuerpo grande. Se usa !important solo donde el tema lo obliga.
   -------------------------------------------------------------------------- */

.title-content .sa26-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 7px 15px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--sa-marca);
	border-radius: 999px;
	box-shadow: 0 6px 18px -4px rgba(207,16,32,.6);
}
.title-content .sa26-etiqueta::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #fff;
	animation: sa-latido 3.6s ease-in-out infinite;
}

/* EL H1: lleva la keyword y pesa poco. Pequeño y algo atenuado, pero legible
   sobre el fondo oscuro. Es el antetítulo, no el titular. */
.title-content h1.sa26-h1 {
	margin: 0 0 14px !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: .01em;
	color: rgba(255,255,255,.82) !important;
	text-transform: none !important;
}

/* LA FRASE GANCHO: el titular real. Enorme, blanca, con el acento rojo debajo.
   Es un <p>, así que la jerarquía SEO (un solo H1) queda intacta. */
.title-content .sa26-hook {
	position: relative;
	display: inline-block;
	margin: 0 0 26px;
	max-width: 660px;                                  /* ancho amplio: pocas líneas */
	font-size: clamp(27px, 3.2vw, 43px) !important;    /* escala con la longitud */
	font-weight: 800 !important;
	line-height: 1.14 !important;
	letter-spacing: -.02em;
	color: #fff !important;
	text-shadow: 0 2px 24px rgba(0,0,0,.35);
	text-wrap: balance;
}
.title-content .sa26-hook::after {
	content: "";
	position: absolute;
	left: 50%; bottom: -14px;
	transform: translateX(-50%);
	width: 0; height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--sa-marca), var(--sa-marca-suave));
	animation: sa-trazo-hero 1s var(--sa-curva) .6s 1 both;
}
@keyframes sa-trazo-hero { to { width: 96px; } }

@media (max-width: 640px) {
	/* Tope fijo en móvil: no se confía en vw, que en algunos motores se calcula
	   contra un viewport de maquetación mayor y deja el gancho gigante. */
	.title-content .sa26-hook { max-width: none; font-size: 31px !important; line-height: 1.16 !important; }
	.title-content h1.sa26-h1 { font-size: 16px !important; }
}

/* --------------------------------------------------------------------------
   1. ENTRADA — los primeros tres segundos deciden si se queda
   -------------------------------------------------------------------------- */

.sa26-entrada {
	padding: 40px 0 28px;
	border-bottom: 1px solid var(--sa-linea);
	margin-bottom: 36px;
}

/* Antetítulo: ubica en una ojeada. Responde "¿esto es de lo mío y de aquí?" */
.sa26-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 6px 13px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sa-marca);
	background: rgba(207,16,32,.06);
	border: 1px solid rgba(207,16,32,.18);
	border-radius: 999px;
}
.sa26-etiqueta::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--sa-marca);
	/* Latido lentísimo: señal de "esto está vivo y actualizado", por debajo
	   del umbral de molestia. */
	animation: sa-latido 3.6s ease-in-out infinite;
}
@keyframes sa-latido {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .45; transform: scale(.82); }
}

/* EL H1: lleva la keyword, pesa poco visualmente. Deliberado. */
.sa26 h1.sa26-h1 {
	margin: 0 0 18px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.005em;
	color: var(--sa-tinta-media);
}

/* LA FRASE GANCHO: aquí va la persuasión. Es un <p>, no un encabezado. */
.sa26-hook {
	position: relative;
	margin: 0 0 26px;
	font-size: clamp(30px, 5.2vw, 46px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.03em;
	text-wrap: balance;
	/* Degradado de tinta a tinta: legibilidad intacta, cuerpo tipográfico con
	   volumen. El brillo lo aporta el barrido, no el color del texto. */
	background: linear-gradient(180deg, var(--sa-tinta) 0%, #2f3440 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* Barrido especular: recorre la frase una sola vez al aparecer. Un destello
   que se repitiera sería ruido; uno que ocurre una vez es un acento. */
.sa26-hook::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
	background-size: 220% 100%;
	mix-blend-mode: overlay;
	pointer-events: none;
	animation: sa-barrido 2.1s var(--sa-curva) .5s 1 both;
}
@keyframes sa-barrido {
	from { background-position: 180% 0; }
	to   { background-position: -60% 0; }
}
/* Subrayado que se dibuja solo: cierra la frase y empuja al siguiente bloque. */
.sa26-hook::before {
	content: "";
	position: absolute;
	left: 0; bottom: -10px;
	height: 4px; width: 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--sa-marca), var(--sa-marca-suave));
	animation: sa-trazo 1.1s var(--sa-curva) 1.2s 1 both;
}
@keyframes sa-trazo { to { width: 88px; } }

.sa26-resumen {
	margin: 0 0 26px;
	font-size: 19px;
	line-height: 1.68;
	color: var(--sa-tinta-media);
}

/* --------------------------------------------------------------------------
   2. CTA — borde electrificado, según encargo
   -------------------------------------------------------------------------- */

.sa26-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;              /* área táctil holgada: 54 > 44 px exigidos */
	padding: 15px 34px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(135deg, var(--sa-marca) 0%, #a60d1a 100%);
	border-radius: 999px;
	isolation: isolate;
	box-shadow: 0 1px 2px rgba(207,16,32,.2), 0 10px 26px -8px rgba(207,16,32,.5);
	transition: transform .28s var(--sa-curva), box-shadow .28s var(--sa-curva);
}
/* El halo gira alrededor del botón a velocidad variable. La irregularidad es
   intencionada: un movimiento perfectamente regular se vuelve invisible al
   cerebro en segundos; uno que cambia de ritmo mantiene la atención periférica. */
.sa26-cta::before {
	content: "";
	position: absolute;
	inset: -3px;
	z-index: -1;
	border-radius: inherit;
	background: conic-gradient(from 0deg,
		transparent 0deg, transparent 200deg,
		var(--sa-marca-suave) 275deg, #ffd0d6 305deg,
		var(--sa-marca-suave) 335deg, transparent 360deg);
	filter: blur(5px);
	opacity: .95;
	animation: sa-orbita 4.4s linear infinite;
}
@keyframes sa-orbita {
	0%   { transform: rotate(0deg);   animation-timing-function: cubic-bezier(.5,0,.9,.5); }
	45%  { transform: rotate(200deg); animation-timing-function: cubic-bezier(.1,.6,.5,1); }
	100% { transform: rotate(360deg); }
}
.sa26-cta:hover, .sa26-cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(207,16,32,.24), 0 16px 34px -8px rgba(207,16,32,.6);
}
.sa26-cta:focus-visible { outline: 3px solid var(--sa-confianza); outline-offset: 3px; }
.sa26-cta:active { transform: translateY(0) scale(.985); }
.sa26-cta__nota {
	display: block;
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--sa-tinta-suave);
}

/* --------------------------------------------------------------------------
   3. PROGRESO DE LECTURA — efecto Zeigarnik
   Una barra que avanza convierte la lectura en una tarea empezada, y una tarea
   empezada pesa más en la cabeza que una sin empezar. Sube la permanencia.
   -------------------------------------------------------------------------- */

.sa26-progreso {
	position: fixed;
	top: 0; left: 0;
	height: 3px; width: 100%;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--sa-marca), var(--sa-marca-suave));
	z-index: 9999;
	animation: sa-progreso linear;
	animation-timeline: scroll(root block);
}
@keyframes sa-progreso { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   4. ÍNDICE — divulgación progresiva
   Enseñar el mapa antes del viaje reduce la incertidumbre y el abandono.
   -------------------------------------------------------------------------- */

.sa26-indice {
	margin: 0 0 40px;
	padding: 20px 22px;
	background: var(--sa-papel-calido);
	border: 1px solid var(--sa-linea);
	border-left: 3px solid var(--sa-marca);
	border-radius: 4px 12px 12px 4px;
}
.sa26-indice__titulo {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--sa-tinta-suave);
}
.sa26-indice ol { margin: 0; padding: 0; list-style: none; counter-reset: sa-i; }
.sa26-indice li { counter-increment: sa-i; margin: 0 0 7px; }
.sa26-indice a {
	display: flex;
	gap: 11px;
	font-size: 16.5px;
	color: var(--sa-tinta-media);
	text-decoration: none;
	transition: color .2s, transform .2s var(--sa-curva);
}
.sa26-indice a::before {
	content: counter(sa-i);
	flex: 0 0 22px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sa-marca);
	font-variant-numeric: tabular-nums;
}
.sa26-indice a:hover { color: var(--sa-tinta); transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. CUERPO — jerarquía y ritmo de lectura
   -------------------------------------------------------------------------- */

.sa26-cuerpo > * {
	/* Aparición al entrar en pantalla, nativa y sin JavaScript. El contenido
	   que se revela al llegar se percibe como respuesta a tu avance. */
	animation: sa-entra .7s var(--sa-curva) both;
	animation-timeline: view();
	animation-range: entry 0% cover 22%;
}
@keyframes sa-entra {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

.sa26-cuerpo h2 {
	margin: 52px 0 18px;
	font-size: clamp(23px, 3vw, 28px);
	font-weight: 750;
	line-height: 1.26;
	letter-spacing: -.02em;
	color: var(--sa-tinta);
	scroll-margin-top: 24px;
}
/* Marca de sección: ancla la mirada en el inicio del bloque (patrón F). */
.sa26-cuerpo h2::before {
	content: "";
	display: block;
	width: 34px; height: 3px;
	margin-bottom: 15px;
	border-radius: 3px;
	background: var(--sa-marca);
	opacity: .85;
}

.sa26-cuerpo h3 {
	margin: 34px 0 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.34;
	color: var(--sa-tinta);
}

.sa26-cuerpo p { margin: 0 0 20px; }
.sa26-cuerpo strong { font-weight: 700; color: var(--sa-tinta); }

.sa26-cuerpo ul, .sa26-cuerpo ol { margin: 0 0 22px; padding-left: 4px; list-style: none; }
.sa26-cuerpo ul li, .sa26-cuerpo ol li { position: relative; margin: 0 0 11px; padding-left: 26px; }
.sa26-cuerpo ul li::before {
	content: "";
	position: absolute; left: 4px; top: 12px;
	width: 7px; height: 7px;
	border-radius: 2px;
	background: var(--sa-marca);
	opacity: .55;
	transform: rotate(45deg);
}
.sa26-cuerpo ol { counter-reset: sa-p; }
.sa26-cuerpo ol li { counter-increment: sa-p; }
.sa26-cuerpo ol li::before {
	content: counter(sa-p);
	position: absolute; left: 0; top: 2px;
	width: 20px; height: 20px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--sa-marca);
	color: #fff;
	font-size: 11.5px; font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Dato objetivo destacado: prueba verificable, no venta. Por eso va en el
   color de confianza y nunca en el rojo de acción. */
.sa26-dato {
	margin: 26px 0;
	padding: 18px 20px;
	background: rgba(14,116,144,.05);
	border-left: 3px solid var(--sa-confianza);
	border-radius: 3px 10px 10px 3px;
	font-size: 17px;
	color: var(--sa-tinta-media);
}
.sa26-dato strong { color: var(--sa-confianza); }

/* Aviso honesto: decir lo que puede salir mal genera más confianza que
   prometer. Es la palanca de credibilidad más infravalorada que existe. */
.sa26-aviso {
	margin: 26px 0;
	padding: 18px 20px;
	background: #fffaf0;
	border: 1px solid #f0d9a8;
	border-radius: 10px;
	font-size: 17px;
	color: #6b5424;
}

/* --------------------------------------------------------------------------
   6. CIERRE
   -------------------------------------------------------------------------- */

.sa26-cierre {
	margin-top: 52px;
	padding: 30px 26px;
	text-align: center;
	background: var(--sa-papel-calido);
	border: 1px solid var(--sa-linea);
	border-radius: 16px;
}
.sa26-cierre__frase {
	margin: 0 0 20px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--sa-tinta);
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   7. ACCESIBILIDAD Y RESPETO
   Sin esto, todo lo anterior es un problema, no un diseño.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sa26 *,
	.sa26 *::before,
	.sa26 *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
	.sa26-hook::before { width: 88px; }   /* el subrayado se muestra ya dibujado */
	.sa26-cuerpo > *   { opacity: 1; transform: none; }
	.sa26-progreso     { display: none; }
}

@media (max-width: 640px) {
	.sa26 { font-size: 17px; padding: 0 16px 48px; }
	.sa26-entrada { padding-top: 28px; }
	.sa26-cta { width: 100%; }
	.sa26-cuerpo h2 { margin-top: 42px; }
}

/* SIN modo oscuro a propósito: el tema de la web tiene fondo blanco fijo que NO
   cambia con la preferencia del sistema. Una versión anterior volteaba la tinta
   a clara en dark mode y el contenido quedaba gris-casi-blanco SOBRE BLANCO =
   invisible. La tinta (--sa-tinta) se define oscura en :root y no se toca nunca,
   así que el texto es legible con cualquier preferencia del navegador. */

@media print {
	.sa26-progreso, .sa26-cta, .sa26-indice { display: none; }
	.sa26 { max-width: none; font-size: 12pt; }
}

/* ==========================================================================
   sa26 · CAPA COGNITIVA v4 — landings servicio+municipio (silo 2º nivel)
   ==========================================================================

   Once sesgos cognitivos, éticos y verificables, aplicados con intención. Cada
   uno anotado con su nombre y su función. Ninguno engaña: amplifican la señal
   de lo que ya es cierto y útil.

   1. VON RESTORFF (aislamiento): un único color saturado hace que el CTA sea lo
      primero que ve el ojo.
   2. CONTRASTE APOSEMÁTICO (avispa: negro+ámbar): el CTA principal usa el patrón
      que el cerebro reconoce como alerta ancestral. Solo en "Llamar", la acción
      que el usuario quiere tomar.
   3. ZEIGARNIK: la barra de progreso abre un bucle que empuja a terminar.
   4. FLUIDEZ: tipografía limpia, una idea por bloque. Lo que se lee sin esfuerzo
      se percibe como más verdadero.
   5. POSICIÓN SERIAL: el gancho abre, el CTA cierra.
   6. PRUEBA SOCIAL: recuento de negocios y "colaboramos con los mejores".
   7. AUTORIDAD (E-E-A-T): "Guía local" + datos verificables del municipio.
   8. AVERSIÓN A LA PÉRDIDA: los avisos honestos generan más confianza que las
      promesas.
   9. FOCO ÚNICO: un solo punto de atención por pantalla.
  10. SEÑALIZACIÓN DE MIRADA: subrayados que se dibujan solos dirigen la vista.
  11. ANCLAJE + CURIOSIDAD: el gancho ancla una idea y abre una pregunta.
   ========================================================================== */

:root {
	--sa-noche: #0f1216;
	--sa-noche-2: #171b21;
	--sa-ambar: #f5b301;
	--sa-ambar-luz: #ffd34d;
	--sa-oro: #d4a94e;
}

/* FIX CRÍTICO: el tema hace p{text-transform:capitalize} y convierte TODO mi
   contenido en Mayúsculas Iniciales ("Zapatos Que Resisten El Paso..."), que
   grita "generado por IA". Se restituye la caja natural. */
.sa26, .sa26 *,
.title-content .sa26-hook,
.title-content .sa26-h1,
.title-content .sa26-etiqueta,
.list-detail p, .list-detail h1, .list-detail h2, .list-detail h3, .list-detail h4, .list-detail li,
.detail-wrapper p, .detail-wrapper h1, .detail-wrapper h2, .detail-wrapper h3, .detail-wrapper h4, .detail-wrapper li,
.sec-bt p, .sec-bt h2, .sec-bt h3 {
	text-transform: none !important;
}

/* Menú: fuera subrayados rojos sueltos. El activo se marca en color, no línea. */
nav .nav > li > a::after,
nav .nav > li.active > a::after,
.navbar .nav > li > a::before { display: none !important; }
nav .nav > li.active > a,
nav .nav > li > a:hover { color: var(--sa-marca) !important; border-bottom: 0 !important; }

/* CTA APOSEMÁTICO — "Llamar" con el binomio avispa (negro + ámbar). Late suave
   (urgencia biológica ética) y un halo estelar lo orbita. Foco único. */
.sa26-cta,
.detail-section a.call_btn, a.call_btn, #call_now {
	position: relative;
	isolation: isolate;
	background: linear-gradient(135deg, #17130a 0%, #241c08 100%) !important;
	color: var(--sa-ambar-luz) !important;
	border: 1.5px solid var(--sa-ambar) !important;
	font-weight: 800 !important;
	letter-spacing: .01em;
	box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 12px 30px -8px rgba(245,179,1,.45) !important;
	animation: sa-late 2.4s ease-in-out infinite;
}
@keyframes sa-late {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.035); }
}
.sa26-cta::before, a.call_btn::before {
	content: "";
	position: absolute; inset: -3px; z-index: -1;
	border-radius: inherit;
	background: conic-gradient(from 0deg, transparent 0deg 190deg, var(--sa-ambar) 265deg, #fff2c2 300deg, var(--sa-ambar) 330deg, transparent 360deg);
	filter: blur(6px); opacity: .9;
	animation: sa-orbita 4.6s linear infinite;
}
.sa26-cta:hover, a.call_btn:hover, #call_now:hover { transform: translateY(-2px) scale(1.02) !important; color: #fff !important; }

/* WhatsApp: verde de plataforma con brillo que barre, diferenciado del CTA
   principal sin robarle el foco (jerarquía de acciones). */
a.whatsapp_now, .whatsapp_now {
	position: relative; overflow: hidden;
	font-weight: 700 !important;
	box-shadow: 0 10px 26px -10px rgba(37,211,102,.6) !important;
}
a.whatsapp_now::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
	background-size: 250% 100%;
	animation: sa-barrido 3.4s ease-in-out infinite;
	pointer-events: none;
}

/* FOTO DEL HERO — se mantiene, con profundidad de estudio: degradado que
   oscurece la base para contraste AAA del texto claro y hace que una foto de
   baja calidad se lea como fondo intencional. */
.detail-section.bg-image::after {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background:
		radial-gradient(120% 90% at 20% 15%, rgba(207,16,32,.16) 0%, transparent 55%),
		linear-gradient(180deg, rgba(10,12,15,.5) 0%, rgba(10,12,15,.78) 100%);
	pointer-events: none;
}
.detail-section.bg-image .profile-cover-content { position: relative; z-index: 1; }

/* "EXPLORE MÁS SERVICIOS" — ahora bajo el contenido, con jerarquía de sección
   y barra de acento (gaze cueing). */
.sec-bt .heading h2 {
	position: relative; text-align: center;
	font-size: clamp(24px, 2vw + 16px, 32px); font-weight: 800;
	letter-spacing: -.02em; color: var(--sa-tinta);
	margin: 8px 0 28px; padding-bottom: 16px;
}
.sec-bt .heading h2 span { color: var(--sa-marca); }
.sec-bt .heading h2::after {
	content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 60px; height: 4px; border-radius: 3px;
	background: linear-gradient(90deg, var(--sa-marca), var(--sa-marca-suave));
}

/* Tarjetas de servicios relacionados: profundidad física y elevación al pasar
   el cursor (microfeedback de recompensa). */
.service_html .listing-item, .service_html .item {
	transition: transform .3s var(--sa-curva), box-shadow .3s var(--sa-curva);
}
.service_html .listing-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(15,18,22,.06), 0 18px 40px -12px rgba(15,18,22,.28);
}

.list-detail h3 span[style*="cf1020"] { color: var(--sa-marca) !important; font-weight: 800; }

@media (max-width: 640px) {
	.sec-bt .heading h2 { font-size: 22px; }
}

/* HERO FLEXIBLE: el tema fija .detail-section a 510px de alto y un gancho largo
   se desborda sobre el contenido. Se deja crecer con el contenido, con un
   mínimo generoso para que los ganchos cortos no queden apretados. */
.detail-section.bg-image {
	height: auto !important;
	min-height: 540px;
	padding-top: 34px;
	padding-bottom: 46px;
}
.detail-section .profile-cover-content { padding-top: 10px; }
@media (max-width: 640px) {
	.detail-section.bg-image { min-height: 440px; }
}

/* ==========================================================================
   sa-neg · DIRECTORIO DE NEGOCIOS REALES  (servicio y servicio+municipio)
   ==========================================================================

   Este bloque existe para que la página sirva ANTES de convencer: primero el
   dato útil, después el texto. Va justo debajo del anunciante, que conserva su
   posición destacada, y su misión es que el visitante encuentre a quién llamar
   sin salir de aquí.

   Decisiones cognitivas, todas verificables y sin engaño:
   1. PRUEBA SOCIAL REAL — nombres, direcciones y teléfonos que existen. El
      recuento va en el título porque un número concreto ancla la percepción de
      abundancia mejor que cualquier adjetivo.
   2. AUTORIDAD (E-E-A-T) — la cifra del INE y la fuente citada al pie. La
      tipografía del dato es sobria a propósito: el alarde resta credibilidad.
   3. HONESTIDAD COMO PALANCA — cuando los negocios son de otro municipio se
      dice en la cabecera, en ámbar (aviso), nunca en rojo (alarma). Admitir el
      límite aumenta la confianza en todo lo demás; esconderlo la destruye.
   4. LEY DE FITTS — el teléfono es el objetivo principal: 48 px de alto real en
      móvil, ancho completo, el primero de la fila de acciones.
   5. FLUIDEZ — una ficha, una decisión. Nombre, oficio, dirección y acción.
   6. AGRUPACIÓN (Gestalt) — tarjeta con borde suave y separación generosa: el
      ojo cuenta las opciones de un vistazo en lugar de leerlas.
   7. ORDEN SERIAL — se numeran del 1 al 8; los extremos se recuerdan mejor y el
      número convierte una lista en un ranking legible.
   ========================================================================== */

.sa-neg {
	padding: 34px 0 30px;
	background: var(--sa-papel-calido);
	border-top: 1px solid var(--sa-linea);
	border-bottom: 1px solid var(--sa-linea);
}
.sa-neg * { text-transform: none !important; }

.sa-neg__cabecera { max-width: var(--sa-ancho); margin: 0 auto 18px; }

.sa-neg__kicker {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: .10em;
	text-transform: uppercase !important;
	color: var(--sa-confianza);
	font-weight: 700;
}
.sa-neg__titulo {
	margin: 0 0 10px;
	font-size: clamp(21px, 2.4vw, 29px);
	line-height: 1.22;
	font-weight: 800;
	color: var(--sa-tinta);
	letter-spacing: -.01em;
}
.sa-neg__sub {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sa-tinta-media);
}

/* El aviso de procedencia. Ámbar: avisa sin alarmar. */
.sa-neg__aviso {
	margin: 0;
	padding: 13px 16px;
	font-size: 15.5px;
	line-height: 1.62;
	color: #5a4708;
	background: #fff9e8;
	border: 1px solid #f0d9a8;
	border-left: 4px solid var(--sa-ambar);
	border-radius: 10px;
}
.sa-neg__aviso strong { color: #3f3205; font-weight: 750; }
.sa-neg__aviso-plus { color: #7a6412; }

/* Cifra oficial: autoridad discreta. */
.sa-neg__dato {
	max-width: var(--sa-ancho);
	margin: 0 auto 20px;
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--sa-tinta-media);
	background: var(--sa-papel);
	border: 1px solid var(--sa-linea);
	border-radius: 10px;
}
.sa-neg__dato-cifra {
	font-size: 19px;
	font-weight: 800;
	color: var(--sa-confianza);
	font-variant-numeric: tabular-nums;
}
.sa-neg__fuente { display: block; margin-top: 3px; font-size: 12.5px; color: var(--sa-tinta-suave); }

/* Rejilla de fichas: 1 columna en móvil, 2 en tablet, 3 en escritorio. */
.sa-neg__lista {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}
.sa-neg__item { margin: 0; }

.sa-neg__ficha {
	position: relative;
	height: 100%;
	padding: 16px 16px 14px 46px;
	background: var(--sa-papel);
	border: 1px solid var(--sa-linea);
	border-radius: 12px;
	transition: border-color .25s var(--sa-curva), box-shadow .25s var(--sa-curva), transform .25s var(--sa-curva);
}
.sa-neg__ficha:hover {
	border-color: #d8d4cd;
	box-shadow: 0 6px 20px rgba(22, 24, 29, .07);
	transform: translateY(-2px);
}
.sa-neg__num {
	position: absolute;
	top: 16px;
	left: 14px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	color: var(--sa-papel);
	background: var(--sa-tinta);
	border-radius: 50%;
	font-variant-numeric: tabular-nums;
}
.sa-neg__nombre {
	margin: 0 0 4px;
	font-size: 17px;
	line-height: 1.32;
	font-weight: 750;
	color: var(--sa-tinta);
}
.sa-neg__cat {
	margin: 0 0 6px;
	font-size: 12.5px;
	letter-spacing: .04em;
	text-transform: uppercase !important;
	color: var(--sa-tinta-suave);
	font-weight: 650;
}
.sa-neg__dir {
	margin: 0 0 12px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--sa-tinta-media);
}

.sa-neg__acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* El teléfono manda: es la acción que resuelve el problema del visitante. */
.sa-neg__tel {
	flex: 1 1 100%;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 14px;
	font-size: 16px;
	font-weight: 750;
	color: var(--sa-papel) !important;
	background: var(--sa-tinta);
	border-radius: 9px;
	text-decoration: none !important;
	font-variant-numeric: tabular-nums;
	transition: background .2s var(--sa-curva);
}
.sa-neg__tel::before { content: "\260E"; font-size: 15px; opacity: .9; }
.sa-neg__tel:hover, .sa-neg__tel:focus { background: var(--sa-marca); color: var(--sa-papel) !important; }

.sa-neg__mapa, .sa-neg__web {
	/* 44 px en todas partes: en tablet se tocan con el dedo y en escritorio la
	   fila de acciones queda a la misma altura que el teléfono. */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 650;
	color: var(--sa-confianza) !important;
	background: transparent;
	border: 1px solid #cfe3e8;
	border-radius: 8px;
	text-decoration: none !important;
	transition: background .2s var(--sa-curva), border-color .2s var(--sa-curva);
}
.sa-neg__mapa:hover, .sa-neg__web:hover { background: #f0f8fa; border-color: var(--sa-confianza); }

.sa-neg__pie {
	max-width: var(--sa-ancho);
	margin: 0 auto;
	font-size: 13px;
	line-height: 1.6;
	color: var(--sa-tinta-suave);
}
.sa-neg__pie a { color: var(--sa-tinta-media); text-decoration: underline; text-underline-offset: 2px; }

/* --- tablet ------------------------------------------------------------- */
@media (max-width: 699px) {
	/* Objetivo táctil: 44 px es el mínimo con el que un dedo acierta sin fallar. */
	.sa-neg__mapa, .sa-neg__web { min-height: 44px; flex: 1 1 calc(50% - 4px); justify-content: center; }
}

@media (min-width: 700px) {
	.sa-neg { padding: 42px 0 38px; }
	.sa-neg__lista { grid-template-columns: repeat(var(--sa-c2, 2), 1fr); gap: 16px; }
	/* Con una o dos fichas la rejilla se estrecha y se centra: mejor una fila
	   corta y compacta que tres huecos con uno vacío, que se lee como fallo. */
	.sa-neg__lista--n1,
	.sa-neg__lista--n2 { max-width: var(--sa-ancho); margin-left: auto; margin-right: auto; }
	.sa-neg__tel { flex: 0 1 auto; min-height: 44px; }
}

/* --- escritorio --------------------------------------------------------- */
@media (min-width: 1000px) {
	.sa-neg { padding: 52px 0 46px; }
	.sa-neg__lista { grid-template-columns: repeat(var(--sa-c3, 3), 1fr); gap: 18px; }
	.sa-neg__ficha { padding: 18px 18px 16px 48px; }
}

/* Quien pide menos movimiento, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
	.sa-neg__ficha, .sa-neg__tel, .sa-neg__mapa, .sa-neg__web { transition: none; }
	.sa-neg__ficha:hover { transform: none; }
}

/* El bloque va dentro de un .container del tema: se anula el segundo margen
   interior para que no quede un doblez de aire a los lados. */
.list-detail .sa-neg > .container,
.sec-bt .sa-neg > .container {
	width: auto;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
/* Al ir embebido, el bloque necesita respirar arriba y abajo por sí mismo. */
.list-detail .sa-neg { margin: 6px 0 26px; border-radius: 14px; }

/* Cuando la ficha destacada se ha llevado el único negocio, el bloque no
   desaparece —siguen haciendo falta la cifra oficial, la fuente y el dato
   estructurado— pero se encoge: ya no encabeza nada. */
.sa-neg--contexto {
	padding: 4px 0 26px;
	background: transparent;
	border-top: 0;
	border-bottom: 0;
}
.sa-neg--contexto .sa-neg__dato { margin: 0 auto 12px; }
.sa-neg--contexto .sa-neg__pie { text-align: center; }
.list-detail .sa-neg--contexto,
.sec-bt .sa-neg--contexto { margin: 0 0 10px; }

/* Sello de doble fuente: prueba de verificación, no adorno. Verde sobrio, nunca
   el rojo de marca (que se reserva a la acción) ni el ámbar (que avisa). */
.sa-neg__sello {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none !important;
	color: #14663f;
	background: #e8f6ee;
	border: 1px solid #b9e0cb;
	border-radius: 999px;
	vertical-align: middle;
}

/* ==========================================================================
   sa-hero · PRIMER PANTALLAZO de la landing servicio + municipio
   ==========================================================================

   El visitante llega con un problema y poca paciencia. En los tres primeros
   segundos tiene que responderse una sola pregunta: "¿hay aquí alguien que me
   resuelva esto, y cómo le llamo?". Todo lo demás sobra.

   Lo que se corrige respecto al diseño anterior:

   · EL VELO PLANO. Había un azul liso al 60% sobre toda la foto. Aplanaba la
     imagen sin dirigir la mirada a ninguna parte. Se sustituye por un DEGRADADO
     DIRECCIONAL: opaco donde va el texto, transparente donde vive la foto. El
     ojo humano busca profundidad y un punto focal (preferencia de paisaje
     abierto); una mancha uniforme no la ofrece, un degradado sí.

   · LAS CARAS. El cerebro detecta un rostro en unos 100 ms, antes de leer una
     sola palabra. La foto conserva su lado despejado en lugar de quedar tapada,
     y el texto se aparta a un eje propio para no competir con ella.

   · EL VACÍO. Sobraban 327 px de héroe sin nada (el 60% de su altura). Ahora la
     altura la marca el contenido, con un mínimo por dispositivo.

   · LA LEGIBILIDAD. El H1 no tenía sombra y dependía por completo del velo.
     Ahora lleva su propio respaldo, así que se lee aunque la foto sea clara.

   · EL ORDEN. Migas (dónde estoy) → título (qué es) → promesa (qué gano) →
     acción (qué hago). Se recuerdan los extremos: se abre ubicando y se cierra
     actuando.
   ========================================================================== */

.sa-hero {
	position: relative;
	background-size: cover !important;
	background-position: 50% 35% !important;   /* 35%: en fotos de personas el interés vive por encima del centro */
	background-repeat: no-repeat !important;
	height: auto !important;
	display: flex;
	align-items: center;
	overflow: hidden;
}
/* El velo liso del tema se anula: molesta más de lo que ayuda. */
.sa-hero::before {
	background: none !important;
	opacity: 1 !important;
	background-image: linear-gradient(
		100deg,
		rgba(9, 11, 15, .94) 0%,
		rgba(9, 11, 15, .88) 26%,
		rgba(9, 11, 15, .62) 48%,
		rgba(9, 11, 15, .22) 72%,
		rgba(9, 11, 15, .04) 100%
	) !important;
}
.sa-hero .profile-cover-content { position: relative; z-index: 2; width: 100%; }
.sa-hero * { text-transform: none !important; }

.sa-hero__caja {
	max-width: 620px;               /* medida de lectura cómoda, no ancho completo */
	margin: 0;                       /* eje a la izquierda: crea estructura y deja respirar la foto */
	text-align: left;
	padding: 0;
}

.sa-hero__miga {
	margin: 0 0 14px;
	font-size: 12.5px;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .72);
}
.sa-hero__miga a { color: rgba(255, 255, 255, .82) !important; text-decoration: none; }
.sa-hero__miga a:hover { color: #fff !important; text-decoration: underline; }
.sa-hero__miga .current { color: rgba(255, 255, 255, .95); font-weight: 600; }
.sa-hero__miga .gt3_breadcrumb_divider { margin: 0 7px; opacity: .5; }

.sa-hero__h1 {
	margin: 0 0 12px;
	font-size: clamp(28px, 3.5vw, 46px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .55);   /* red de seguridad: legible aunque la foto sea clara */
}
.sa-hero__promesa {
	margin: 0 0 24px;
	max-width: 30em;
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.55;
	font-weight: 400;
	color: rgba(255, 255, 255, .93);
	text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

.sa-hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sa-hero__cta, .sa-hero__wa {
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 0 26px;
	font-size: 16px;
	font-weight: 750;
	border-radius: 10px;
	margin: 0 !important;
}
/* WhatsApp es la alternativa, no el protagonista: presente pero sin gritar. */
.sa-hero__wa {
	background: rgba(255, 255, 255, .10) !important;
	border: 1.5px solid rgba(255, 255, 255, .45) !important;
	color: #fff !important;
	backdrop-filter: blur(4px);
}
.sa-hero__wa:hover { background: #25d366 !important; border-color: #25d366 !important; }

/* --- móvil: diseño propio, no una reducción del de escritorio ------------
   En la mano, el texto se lee mejor abajo y el pulgar solo alcanza el tercio
   inferior. Por eso aquí el degradado es vertical (la foto se ve arriba, el
   texto descansa sobre la zona opaca) y el botón ocupa todo el ancho. */
@media (max-width: 699px) {
	.sa-hero {
		align-items: flex-end;
		min-height: 76vh;
		background-position: 50% 28% !important;
	}
	.sa-hero::before {
		background-image: linear-gradient(
			180deg,
			rgba(9, 11, 15, .35) 0%,
			rgba(9, 11, 15, .55) 38%,
			rgba(9, 11, 15, .86) 68%,
			rgba(9, 11, 15, .96) 100%
		) !important;
	}
	.sa-hero .profile-cover-content { padding: 0 0 26px; }
	.sa-hero__caja { max-width: none; }
	.sa-hero__miga { margin-bottom: 10px; font-size: 12px; }
	.sa-hero__h1 { font-size: clamp(26px, 7.4vw, 34px); margin-bottom: 10px; }
	.sa-hero__promesa { font-size: 15.5px; margin-bottom: 20px; }
	.sa-hero__acciones { flex-direction: column; align-items: stretch; gap: 10px; }
	.sa-hero__cta, .sa-hero__wa { width: 100%; min-height: 54px; font-size: 17px; }
}

/* --- tablet: el pulgar sigue mandando, pero cabe el eje lateral --------- */
@media (min-width: 700px) and (max-width: 999px) {
	.sa-hero { min-height: 460px; align-items: center; }
	.sa-hero::before {
		background-image: linear-gradient(
			115deg,
			rgba(9, 11, 15, .93) 0%,
			rgba(9, 11, 15, .80) 42%,
			rgba(9, 11, 15, .38) 74%,
			rgba(9, 11, 15, .10) 100%
		) !important;
	}
	.sa-hero .profile-cover-content { padding: 44px 0; }
	.sa-hero__caja { max-width: 78%; }
	.sa-hero__h1 { font-size: clamp(30px, 4.4vw, 38px); }
	.sa-hero__cta, .sa-hero__wa { flex: 1 1 auto; }
}

/* --- escritorio -------------------------------------------------------- */
@media (min-width: 1000px) {
	.sa-hero { min-height: 480px; }
	.sa-hero .profile-cover-content { padding: 56px 0; }
}

/* ==========================================================================
   sa-dst · FICHA DESTACADA  (colaborador nuestro, o primer dato abierto)
   ==========================================================================

   Sustituye a sa-cliente. Antes había dos cosas distintas resolviéndose de dos
   maneras distintas: la ficha del anunciante, con su filete rojo, y el listado
   de datos abiertos, que cuando traía un solo negocio dejaba una tarjeta
   pequeña sola en una rejilla de tres huecos. Se veía como un error de montaje,
   y un error de montaje se transfiere al juicio sobre los datos.

   Ahora hay UNA forma. El primer hueco de la página siempre lo ocupa la misma
   tarjeta: si hay colaborador, es suya; si no, sube a ella el primer negocio
   real. Cambian el color del filete y el sello —lo único que debe cambiar,
   porque la naturaleza del dato es distinta y ocultarlo sería engañar—, no la
   arquitectura.

   Tres diseños de verdad, uno por dispositivo, no uno escalado:

     MÓVIL      una columna. Sello, nombre, y de inmediato el panel de acción:
                el pulgar llega al teléfono sin atravesar el párrafo. El texto
                descriptivo va después, para quien quiera leerlo.
     TABLET     el panel se convierte en banda horizontal bajo el título. Hay
                ancho de sobra para poner la imagen (o el teléfono) al lado de
                los botones sin estrangular la columna de lectura.
     ESCRITORIO dos columnas. Identidad y texto a la izquierda, panel de acción
                fijo a la derecha, siempre en el mismo sitio de la pantalla.

   La imagen: los originales miden entre 329 y 580 px de ancho. La columna se
   topa en 286 px útiles para que SIEMPRE se reduzcan y nunca se amplíen. Esa
   ampliación era la causa real de que la zona pareciera descuidada.
   ========================================================================== */

/* En el hub de primer nivel la tarjeta va pegada al héroe y necesita aire
   propio. Dentro del detalle ya se lo da la sección que la envuelve. */
.sa-dst { padding: 26px 0 8px; }
.list-detail .sa-dst,
.sec-bt .sa-dst { padding-top: 0; }
.sa-dst * { text-transform: none !important; }

.sa-dst__tarjeta {
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
	background: linear-gradient(180deg, #ffffff 0%, var(--sa-papel-calido) 100%);
	border: 1px solid var(--sa-linea);
	border-radius: 16px;
	box-shadow: 0 14px 40px rgba(22, 24, 29, .07);
	overflow: hidden;
}
/* El filete dice de qué va la tarjeta antes de que se lea una sola palabra. */
.sa-dst__tarjeta::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
}
.sa-dst--socio   .sa-dst__tarjeta::before { background: linear-gradient(90deg, var(--sa-marca) 0%, var(--sa-marca-suave) 100%); }
.sa-dst--abierto .sa-dst__tarjeta::before { background: linear-gradient(90deg, var(--sa-confianza) 0%, #3aa7c0 100%); }
.sa-dst--abierto .sa-dst__tarjeta { background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%); }

/* --- cinta: sello a la izquierda, apunte a la derecha -------------------- */
.sa-dst__cinta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 16px 18px 0;
}
.sa-dst__sello {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .10em;
	text-transform: uppercase !important;
}
.sa-dst--socio   .sa-dst__sello { color: var(--sa-marca); }
.sa-dst--abierto .sa-dst__sello { color: var(--sa-confianza); }
.sa-dst__punto { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.sa-dst__apunte { margin: 0; font-size: 12.5px; color: var(--sa-tinta-suave); font-variant-numeric: tabular-nums; }
.sa-dst__apunte--ok { color: #14663f; font-weight: 700; }

/* --- cuerpo: tres zonas nombradas, un orden por dispositivo -------------- */
.sa-dst__cuerpo {
	display: grid;
	gap: 14px;
	padding: 10px 18px 20px;
	grid-template-columns: 1fr;
	grid-template-areas: "cabeza" "panel" "zona";
}
.sa-dst__cabeza { grid-area: cabeza; min-width: 0; }
.sa-dst__panel  { grid-area: panel;  min-width: 0; }
.sa-dst__zona   { grid-area: zona;   min-width: 0; }

.sa-dst__nombre {
	margin: 0;
	font-size: clamp(21px, 2.6vw, 30px);
	line-height: 1.16;
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--sa-tinta);
}
/* Algunos anunciantes tienen el nombre escrito entero en mayúsculas. A tamaño
   de titular eso grita y se lee peor: las versales pierden la silueta de las
   palabras, que es de lo que vive la lectura rápida. Se compensa bajando el
   cuerpo y abriendo el interletraje, para que funcione como logotipo. */
.sa-dst__nombre--caps {
	font-size: clamp(18px, 1.9vw, 23px);
	line-height: 1.28;
	letter-spacing: .01em;
	font-weight: 800;
}

.sa-dst__oficio {
	margin: 7px 0 0;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase !important;
	color: var(--sa-tinta-suave);
}

/* --- panel de acción: todo lo pulsable dentro de un mismo marco ---------- */
.sa-dst__panel {
	padding: 14px;
	background: var(--sa-papel);
	border: 1px solid var(--sa-linea);
	border-radius: 14px;
}
.sa-dst__media {
	margin: 0 0 12px;
	border-radius: 10px;
	overflow: hidden;
	background: #f1eee8;
	aspect-ratio: 16 / 10;
}
.sa-dst__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;   /* los rostros suelen quedar por encima del centro */
}
@supports not (aspect-ratio: 1 / 1) {
	.sa-dst__media { height: 190px; }
}
.sa-dst__panel-lbl {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase !important;
	color: var(--sa-tinta-suave);
}
.sa-dst__acciones { display: flex; flex-wrap: wrap; gap: 9px; }

.sa-dst__principal {
	flex: 1 1 100%;
	min-height: 56px;
	margin: 0 0 9px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 2px 10px;
	padding: 8px 18px;
	font-size: 16px;
	font-weight: 750;
	line-height: 1.2;
	border-radius: 11px;
	text-align: center;
	text-decoration: none !important;
	overflow: hidden;                        /* contiene el orbe del tema */
	transition: transform .2s var(--sa-curva), box-shadow .2s var(--sa-curva), background .2s var(--sa-curva);
}
.sa-dst--socio .sa-dst__principal {
	color: var(--sa-ambar-luz) !important;
	background: linear-gradient(135deg, #17130a 0%, #241c08 100%);
	border: 1.5px solid var(--sa-ambar);
}
.sa-dst--socio .sa-dst__principal:hover,
.sa-dst--socio .sa-dst__principal:focus {
	background: #241c08;
	box-shadow: 0 0 0 3px rgba(245, 179, 1, .24);
	color: var(--sa-ambar-luz) !important;
}
.sa-dst__principal--tel {
	color: var(--sa-papel) !important;
	background: var(--sa-tinta);
	border: 1.5px solid var(--sa-tinta);
	font-variant-numeric: tabular-nums;
}
.sa-dst__principal--tel:hover,
.sa-dst__principal--tel:focus {
	background: var(--sa-marca);
	border-color: var(--sa-marca);
	color: var(--sa-papel) !important;
}
.sa-dst__cifra { font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.sa-dst__host {
	display: block;
	width: 100%;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	opacity: .8;
}

.sa-dst__secundaria {
	flex: 1 1 100%;
	min-height: 46px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 14px !important;
	font-size: 14.5px;
	font-weight: 650;
	color: var(--sa-confianza) !important;
	background: transparent !important;
	border: 1px solid #cfe3e8 !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	transition: background .2s var(--sa-curva), border-color .2s var(--sa-curva);
}
.sa-dst__secundaria:hover,
.sa-dst__secundaria:focus { background: #f0f8fa !important; border-color: var(--sa-confianza) !important; }
.sa-dst__secundaria .sa-dst__host { display: inline; width: auto; font-size: 12.5px; }

/* La declaración de qué es esta tarjeta. Discreta pero siempre presente: es lo
   que sostiene la credibilidad de todo lo que hay encima. */
.sa-dst__aclara {
	margin: 11px 0 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--sa-tinta-suave);
}

/* --- zona de lectura ----------------------------------------------------- */
.sa-dst__texto {
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.65;
	color: var(--sa-tinta-media);
}
.sa-dst__texto p { margin: 0 0 10px; }
.sa-dst__texto p:last-child { margin-bottom: 0; }
.sa-dst__texto center { display: block; }
.sa-dst__texto b, .sa-dst__texto strong { color: var(--sa-tinta); font-weight: 750; }
.sa-dst__texto a {
	color: var(--sa-marca);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.sa-dst__texto a:hover { color: #a80d1a; }

.sa-dst__datos { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.sa-dst__datos li { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--sa-tinta-media); display: flex; align-items: flex-start; gap: 7px; }
.sa-dst__datos i { color: var(--sa-confianza); position: relative; top: 3px; }

/* El aviso de procedencia. Ámbar: avisa sin alarmar. */
.sa-dst__nota {
	margin: 12px 0 0;
	padding: 12px 14px;
	font-size: 14.5px;
	line-height: 1.58;
	color: #5a4708;
	background: #fff9e8;
	border: 1px solid #f0d9a8;
	border-left: 4px solid var(--sa-ambar);
	border-radius: 10px;
}
.sa-dst__nota strong { color: #3f3205; font-weight: 750; }

/* --- DE TABLET EN ADELANTE: el panel es una banda horizontal -------------
   Hay ancho de sobra para poner la imagen (o el teléfono) al lado de los
   botones sin estrangular la columna de lectura, y la tarjeta queda densa.
   Esta es también la forma que usa el escritorio cuando la descripción es
   corta: con tres líneas de texto, dos columnas dejarían un hueco blanco que
   el ojo lee como "falta algo". */
@media (min-width: 700px) {
	.sa-dst__tarjeta { border-radius: 18px; }
	.sa-dst__cinta { padding: 18px 24px 0; }
	.sa-dst__cuerpo { padding: 12px 24px 24px; gap: 16px; }

	.sa-dst__panel { display: grid; gap: 8px 20px; align-items: center; padding: 16px; }
	.sa-dst__aclara { margin: 0; }
	.sa-dst__acciones { gap: 10px; }
	.sa-dst__secundaria { flex: 1 1 auto; }
	.sa-dst__principal { margin: 0; }

	.sa-dst--socio .sa-dst__panel { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
	.sa-dst--socio .sa-dst__media { grid-column: 1; grid-row: 1 / span 2; margin: 0; aspect-ratio: 4 / 3; }
	.sa-dst--socio .sa-dst__acciones { grid-column: 2; grid-row: 1; align-self: end; }
	.sa-dst--socio .sa-dst__aclara { grid-column: 2; grid-row: 2; align-self: start; }

	.sa-dst--abierto .sa-dst__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.sa-dst--abierto .sa-dst__panel-lbl { grid-column: 1; grid-row: 1; margin: 0; align-self: end; }
	.sa-dst--abierto .sa-dst__principal { grid-column: 1; grid-row: 2; align-self: start; }
	.sa-dst--abierto .sa-dst__acciones { grid-column: 2; grid-row: 1 / span 2; align-content: center; }
	.sa-dst--abierto .sa-dst__aclara { grid-column: 1 / -1; grid-row: 3; margin: 4px 0 0; }
}

/* --- ESCRITORIO con texto largo: dos columnas ----------------------------
   Solo aquí compensa la columna lateral: hay párrafo suficiente para que el
   panel tenga con qué emparejarse y el bloque de acción queda fijo, siempre
   en el mismo sitio de la pantalla, a la altura de los ojos. */
@media (min-width: 960px) {
	.sa-dst { padding: 32px 0 12px; }
	.list-detail .sa-dst,
	.sec-bt .sa-dst { padding-top: 0; }
	.sa-dst__cinta { padding: 20px 28px 0; }
	.sa-dst__cuerpo { padding: 12px 28px 26px; }
	.sa-dst__nombre { margin-top: 2px; }
	.sa-dst__texto { max-width: 78ch; }

	.sa-dst:not(.sa-dst--compacta) .sa-dst__cuerpo {
		grid-template-columns: minmax(0, 1fr) 320px;
		grid-template-areas:
			"cabeza panel"
			"zona   panel";
		grid-template-rows: auto 1fr;
		gap: 16px 32px;
		align-items: start;
	}
	.sa-dst:not(.sa-dst--compacta) .sa-dst__panel {
		display: block;
		align-self: start;
	}
	.sa-dst:not(.sa-dst--compacta) .sa-dst__media { margin: 0 0 12px; aspect-ratio: 4 / 3; }
	.sa-dst:not(.sa-dst--compacta) .sa-dst__principal { margin: 0 0 9px; }
	.sa-dst:not(.sa-dst--compacta) .sa-dst__aclara { margin: 11px 0 0; }
	.sa-dst:not(.sa-dst--compacta) .sa-dst__texto { max-width: 62ch; }
	.sa-dst--abierto:not(.sa-dst--compacta) .sa-dst__panel-lbl { margin: 0 0 8px; }
	.sa-dst--abierto:not(.sa-dst--compacta) .sa-dst__acciones { margin: 0; }
}

/* El orbe animado del tema se cuela también por los botones secundarios. */
.sa-dst__secundaria { overflow: hidden; }

/* Quien pide menos movimiento, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
	.sa-dst__principal, .sa-dst__secundaria { transition: none; }
}

/* Embebido dentro de un .container del tema: se anula el segundo margen
   interior para que no quede un doblez de aire a los lados. */
.list-detail .sa-dst > .container,
.sec-bt .sa-dst > .container {
	width: auto;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* ==========================================================================
   sa-suma · "¿FALTA TU EMPRESA?"  (va DESPUÉS del listado, nunca antes)
   ==========================================================================

   Antes esto era un h3 suelto, en rojo, colocado por delante de los negocios.
   Pedía antes de haber dado nada. Movido detrás del listado, la propuesta llega
   cuando el visitante ya ha recibido algo útil: la reciprocidad hace el resto.

   El tono evita la urgencia inventada. La pérdida que se nombra es real y
   comprobable —esta página la ve gente buscando ese servicio en ese pueblo— y
   por eso convence sin necesidad de exagerar. El aire alrededor y el gris
   sobrio lo separan del listado: es una invitación, no otro resultado más.
   ========================================================================== */

.sa-suma { padding: 8px 0 34px; }
.sa-suma * { text-transform: none !important; }
.sa-suma__tarjeta {
	max-width: 700px;
	margin: 0 auto;
	padding: 26px 24px;
	text-align: center;
	background: var(--sa-papel);
	border: 1px dashed #d5d1ca;      /* discontinuo: se lee como "hueco por ocupar" */
	border-radius: 14px;
}
.sa-suma__titulo {
	margin: 0 0 10px;
	font-size: clamp(19px, 2vw, 23px);
	line-height: 1.25;
	font-weight: 800;
	color: var(--sa-tinta);
}
.sa-suma__texto {
	margin: 0 auto 20px;
	max-width: 46em;
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--sa-tinta-media);
}
.sa-suma__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 28px;
	font-size: 16px;
	font-weight: 750;
	color: #fff !important;
	background: var(--sa-marca);
	border-radius: 10px;
	text-decoration: none !important;
	transition: background .2s var(--sa-curva), transform .2s var(--sa-curva);
}
.sa-suma__boton:hover { background: #a80d1a; transform: translateY(-1px); color: #fff !important; }
.sa-suma__nota { margin: 12px 0 0; font-size: 13px; color: var(--sa-tinta-suave); }

@media (max-width: 699px) {
	.sa-suma { padding: 4px 0 26px; }
	.sa-suma__tarjeta { padding: 22px 16px; }
	.sa-suma__boton { width: 100%; min-height: 52px; }
}

/* El tema fija min-height:540px al héroe y sobra aire por debajo de la acción.
   Se ajusta por dispositivo para que la altura la marque el contenido y el
   botón quede siempre por encima del pliegue. */
@media (max-width: 699px) {
	.sa-hero { min-height: 74vh !important; }
}
@media (min-width: 700px) and (max-width: 999px) {
	.sa-hero { min-height: 430px !important; }
}
@media (min-width: 1000px) {
	.sa-hero { min-height: 460px !important; }
	.sa-hero .profile-cover-content { padding: 44px 0; }
}

/* La cabecera del sitio es fija y mide 62 px: el contenido del héroe arranca por
   debajo con aire suficiente, en lugar de meterse bajo el menú. El reparto ya no
   depende de centrar en un alto arbitrario, sino de un margen superior que
   respeta la cabecera y uno inferior más corto: así el botón cae más cerca del
   centro óptico, que es donde el ojo descansa. */
@media (min-width: 1000px) {
	.sa-hero .profile-cover-content { padding: 104px 0 58px; }
}
@media (min-width: 700px) and (max-width: 999px) {
	.sa-hero .profile-cover-content { padding: 96px 0 48px; }
}
@media (max-width: 699px) {
	.sa-hero .profile-cover-content { padding: 88px 0 30px; }
}

/* Cierre inferior: una caída suave hacia el fondo del contenido evita el corte
   seco entre la foto y la sección siguiente. */
.sa-hero::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 88px;
	background: linear-gradient(180deg, rgba(9,11,15,0) 0%, rgba(9,11,15,.35) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Ajuste fino: el aire bajo la acción se reduce para que el héroe termine poco
   después del botón. Un remate corto se lee como una composición cerrada; uno
   largo, como una caja a medio llenar. */
@media (min-width: 1000px) {
	.sa-hero .profile-cover-content { padding: 104px 0 22px; }
	.sa-hero { min-height: 420px !important; }
}
@media (min-width: 700px) and (max-width: 999px) {
	.sa-hero .profile-cover-content { padding: 96px 0 20px; }
	.sa-hero { min-height: 400px !important; }
}
.sa-hero::after { height: 56px; background: linear-gradient(180deg, rgba(9,11,15,0) 0%, rgba(9,11,15,.22) 100%); }

/* En móvil el bloque de texto debe descansar sobre el borde inferior: ahí llega
   el pulgar sin recolocar la mano. `margin-top:auto` lo empuja de forma fiable
   aunque el tema añada otros hijos al héroe. */
@media (max-width: 699px) {
	.sa-hero { min-height: 70vh !important; }
	.sa-hero .profile-cover-content { margin-top: auto; padding: 70px 0 26px; }
}

/* El tema mete un margen superior propio (unos 100 px) al contenido del héroe.
   Descuadra el reparto en los tres tamaños y deja aire muerto abajo. Se anula:
   el espaciado lo gobiernan los paddings definidos para cada dispositivo. */
.sa-hero .profile-cover-content { margin: 0 !important; }
@media (max-width: 699px) {
	.sa-hero .profile-cover-content { padding: 24px 0 28px; }
}

/* El destello del CTA es un orbe animado más grande que el propio botón: al
   salirse parecía un fallo de render, un haz amarillo cruzando la foto. Se
   contiene dentro del botón, donde funciona como un brillo que recorre el borde
   en lugar de invadir la composición. */
.sa-hero__cta, .sa-dst__principal, a.call_btn { overflow: hidden; }

/* Móvil: la altura la marca el contenido. Con `min-height` sobraba aire bajo el
   botón porque el reparto flexible del tema no lo consumía. Se reserva arriba el
   espacio de foto que se quiere ver y se cierra justo debajo de la acción. */
@media (max-width: 699px) {
	.sa-hero { display: block !important; min-height: 0 !important; }
	.sa-hero .profile-cover-content { padding: 190px 0 30px; }
}

/* Último resto del tema: el propio héroe traía relleno arriba y abajo que se
   sumaba al del contenido. Se anula para que el espaciado quede en un solo
   sitio y sea el mismo que se ve al medir. */
.sa-hero { padding: 0 !important; }

/* En tablet el contenedor del tema deja el texto casi tocando el borde. Un
   margen lateral propio le da aire sin robar ancho de lectura. */
@media (min-width: 700px) and (max-width: 999px) {
	.sa-hero .container { padding-left: 30px; padding-right: 30px; }
}
/* En móvil basta con un poco más que el mínimo del tema. */
@media (max-width: 699px) {
	.sa-hero .container { padding-left: 20px; padding-right: 20px; }
}

/* ==========================================================================
   sa-hero · TRATAMIENTO DE LA IMAGEN SEGÚN SU TAMAÑO REAL
   ==========================================================================

   Las portadas de servicio miden unos 580 px de ancho, y unas cuantas son
   cuadrados de 250 px con un rótulo dentro. Estirarlas a lo ancho de una
   pantalla de escritorio las ampliaba dos veces y media: de ahí la sensación de
   imagen sucia y de página descuidada. En lugar de pedir imágenes nuevas, el
   diseño se adapta al material que hay.

   ESCRITORIO — la imagen NO se estira. Se coloca a la derecha con su altura
   natural (≈630 px de ancho para una portada de 580), es decir, casi a tamaño
   real y por tanto nítida. La mitad izquierda es campo sólido de marca: el
   texto descansa sobre color plano, que es donde mejor se lee. La foto deja de
   ser un fondo maltratado y pasa a ser un panel lateral con intención.

   TABLET — la imagen sí cubre, porque 768 px sobre 580 apenas la amplía un 32 %,
   y el degradado diagonal reserva la zona del texto.

   MÓVIL — 375 px de ancho sobre una imagen de 580 significa REDUCIRLA: se ve
   más nítida que en ningún otro sitio. Cubre toda la parte superior y el texto
   descansa abajo, sobre la zona ya opaca del degradado.
   ========================================================================== */

.sa-hero { background-color: #0d1016; }

@media (min-width: 1000px) {
	.sa-hero {
		background-size: auto 100% !important;
		background-position: right center !important;
	}
	.sa-hero::before {
		background-image: linear-gradient(
			90deg,
			#0d1016 0%,
			#0d1016 34%,
			rgba(13, 16, 22, .96) 46%,
			rgba(13, 16, 22, .70) 58%,
			rgba(13, 16, 22, .30) 72%,
			rgba(13, 16, 22, .10) 100%
		) !important;
	}
}

@media (min-width: 700px) and (max-width: 999px) {
	.sa-hero {
		background-size: cover !important;
		background-position: 72% center !important;
	}
	.sa-hero::before {
		background-image: linear-gradient(
			104deg,
			#0d1016 0%,
			rgba(13, 16, 22, .95) 34%,
			rgba(13, 16, 22, .72) 56%,
			rgba(13, 16, 22, .30) 82%,
			rgba(13, 16, 22, .12) 100%
		) !important;
	}
}

@media (max-width: 699px) {
	.sa-hero {
		background-size: cover !important;
		background-position: 50% 22% !important;
	}
	.sa-hero::before {
		background-image: linear-gradient(
			180deg,
			rgba(13, 16, 22, .30) 0%,
			rgba(13, 16, 22, .52) 34%,
			rgba(13, 16, 22, .88) 62%,
			rgba(13, 16, 22, .97) 100%
		) !important;
	}
}

/* La imagen se ancla a la derecha con su altura natural, así que el punto donde
   empieza cambia según el recorte de cada portada: una apaisada entra muy a la
   izquierda, una casi cuadrada entra muy a la derecha. Por eso la rampa del
   degradado es larga y progresiva en vez de tener un corte definido: así no se
   ve costura con ninguna de las 479 imágenes. */
@media (min-width: 1000px) {
	.sa-hero::before {
		background-image: linear-gradient(
			90deg,
			#0d1016 0%,
			rgba(13, 16, 22, .995) 40%,
			rgba(13, 16, 22, .94) 54%,
			rgba(13, 16, 22, .74) 66%,
			rgba(13, 16, 22, .42) 80%,
			rgba(13, 16, 22, .14) 92%,
			rgba(13, 16, 22, .06) 100%
		) !important;
	}
}

/* ==========================================================================
   sa-busca · SELECTOR DE MUNICIPIO del primer nivel
   ==========================================================================

   El buscador venía dentro de una caja blanca superpuesta al héroe, compitiendo
   con la decisión principal. Baja de posición y se queda con lo justo: un
   título que dice para qué sirve y tres campos alineados. Las columnas del tema
   se neutralizan porque flotaban sin fila que las cerrara.
   ========================================================================== */

.sa-busca { padding: 4px 0 34px; }
.sa-busca * { text-transform: none !important; }
.sa-busca__caja {
	max-width: 860px;
	margin: 0 auto;
	padding: 22px 22px 24px;
	background: var(--sa-papel);
	border: 1px solid var(--sa-linea);
	border-radius: 14px;
}
.sa-busca__titulo {
	margin: 0 0 14px;
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.25;
	font-weight: 800;
	color: var(--sa-tinta);
	text-align: center;
}
.sa-busca form { margin: 0; }
/* Bootstrap le cuelga a .row un ::before y un ::after de clearfix. En una
   rejilla CSS esos pseudoelementos cuentan como celdas y empujan a los campos
   una posición: el desplegable de municipio se quedaba en 89 px y el botón
   saltaba al primer hueco. Se anulan. */
.sa-busca .row::before,
.sa-busca .row::after { display: none !important; content: none !important; }
.sa-busca .row { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
.sa-busca .row > div { width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; }
.sa-busca .form-control,
.sa-busca select { min-height: 48px; border-radius: 10px; }
.sa-busca .chosen-container { width: 100% !important; }
.sa-busca .chosen-container-single .chosen-single { height: 48px; line-height: 46px; border-radius: 10px; }
.sa-busca .btn { width: 100%; min-height: 48px; border-radius: 10px !important; }

@media (min-width: 700px) {
	.sa-busca .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
	.sa-busca .btn { width: auto; padding: 0 30px; }
}