/*
Theme Name: Pilca Reformas
Description: Tema hijo de LGD2 Theme para Pilca Reformas Integrales SL.
Template: lgd2-theme
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: pilcareformas
*/

/*
 * Colores sacados del logo y de la furgoneta: azul del tejado, antracita de la franja y de las letras,
 * pizarra del segundo tejado y el marrón teja de la ventana, que hace de acento cálido.
 * Ángulos rectos en todo el diseño: ningún elemento lleva esquinas redondeadas.
 *
 * El CSS del padre va en @layer lgd2 y el de los plugins con :where() o en capas, así que estas reglas,
 * escritas fuera de capas, tienen prioridad sin !important.
 */

/* ==========================================================================
   1. Variables
   ========================================================================== */

:root {
	--c-azul: #1d6a9c;
	--c-azul-oscuro: #15527a;
	--c-azul-claro: #6aa3c4;
	--c-azul-niebla: #e9f1f6;
	--c-antracita: #222a35;
	--c-antracita-2: #2b3441;
	--c-antracita-3: #364150;
	--c-pizarra: #4e626d;
	--c-teja: #9b6a54;
	--c-teja-claro: #d0a28b;
	--c-texto: #28313c;
	--c-texto-suave: #56636e;
	--c-linea: #d9e1e7;
	--c-linea-oscura: rgb(255 255 255 / 0.14);
	--c-fondo: #ffffff;
	--c-fondo-gris: #f2f5f8;
	--c-whatsapp: #1fa855;

	--fuente-titulos: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
	--fuente-logo: "Merriweather", Georgia, "Times New Roman", serif;
	--fuente-texto: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

	--ancho: 76rem;
	--ancho-texto: 46rem;
	--margen: clamp(1rem, 4vw, 2rem);
	--espacio-seccion: clamp(4rem, 8vw, 6.5rem);
	--sombra: 0 1.25rem 2.5rem -1.25rem rgb(18 28 40 / 0.28);

	/* Servicios Grid: colores de los iconos y medidas de las tarjetas. */
	--servicios-grid-color-a: var(--c-azul);
	--servicios-grid-color-b: var(--c-teja);
	--servicios-grid-hueco: 1.25rem;
	--servicios-grid-min: 16.5rem;
	--servicios-grid-relleno: 1.75rem 1.6rem 1.6rem;
	--servicios-grid-borde: 1px solid var(--c-linea);
	--servicios-grid-radio: 0;
	--servicios-grid-icono-caja: 3.25rem;
	--servicios-grid-icono-tamano: 1.6rem;
	--servicios-grid-espacio-marca: 1.4rem;
	--servicios-grid-espacio-pestanas: 2.5rem;
	--servicios-grid-pestanas-hueco: 0;

	/* Cabecera del tema padre. */
	--lgd2-header-bg: #ffffff;
	--lgd2-submenu-offset: 1.15rem;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--c-fondo);
	color: var(--c-texto);
	font-family: var(--fuente-texto);
	font-size: 1.0625rem;
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	color: var(--c-antracita);
	font-family: var(--fuente-titulos);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.2rem, 1.5rem + 3vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.025em;
}

h2 {
	font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.45rem);
	font-weight: 800;
}

h3 {
	font-size: 1.2rem;
}

p,
ul,
ol {
	margin: 0 0 1.1em;
}

a {
	color: var(--c-azul);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--c-azul-oscuro);
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
	vertical-align: middle;
}

::selection {
	background: var(--c-azul);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--c-azul);
	outline-offset: 3px;
}

strong {
	font-weight: 700;
}

.icono {
	display: inline-block;
	flex: none;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.2em;
}

/* ==========================================================================
   3. Maquetación
   ========================================================================== */

.contenedor {
	width: min(100% - 2 * var(--margen), var(--ancho));
	margin-inline: auto;
}

.contenedor--texto {
	max-width: var(--ancho-texto);
}

.seccion {
	padding-block: var(--espacio-seccion);
}

.seccion--estrecha {
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.seccion--gris {
	background: var(--c-fondo-gris);
}

.seccion--oscura {
	background: var(--c-antracita);
	color: #d5dde4;
}

.seccion--oscura h2,
.seccion--oscura h3 {
	color: #fff;
}

.cabecera-seccion {
	max-width: 44rem;
	margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.cabecera-seccion > :last-child {
	margin-bottom: 0;
}

.cabecera-seccion--centrada {
	margin-inline: auto;
	text-align: center;
}

.cabecera-seccion--centrada .etiqueta {
	justify-content: center;
}

.titulo-seccion {
	margin-bottom: 0.55em;
}

/* Etiqueta encima de los títulos: barra cuadrada azul y texto en versalitas color teja. */
.etiqueta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	color: var(--c-teja);
	font-family: var(--fuente-titulos);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.etiqueta::before {
	content: "";
	flex: none;
	width: 1.75rem;
	height: 3px;
	background: var(--c-azul);
}

.etiqueta--clara {
	color: var(--c-teja-claro);
}

.etiqueta--clara::before {
	background: var(--c-azul-claro);
}

.dos-columnas {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

@media (min-width: 60em) {
	.dos-columnas {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	}
}

/* Imágenes con un marco desplazado: un rectángulo azul detrás, a la derecha y abajo. */
.marco {
	position: relative;
	margin: 0 1rem 1rem 0;
}

.marco::before {
	content: "";
	position: absolute;
	inset: 1rem -1rem -1rem 1rem;
	z-index: 0;
	background: var(--c-azul);
}

.marco > *,
.marco img {
	position: relative;
	z-index: 1;
}

.marco img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.marco--claro::before {
	background: var(--c-azul-claro);
}

.placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #dfe6ec;
}

.lista-check {
	display: grid;
	gap: 0.65rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.lista-check li {
	position: relative;
	padding-left: 1.85rem;
}

.lista-check li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 0.7rem;
	height: 0.7rem;
	background: var(--c-azul);
}

@media (min-width: 40em) {
	.lista-check {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2rem;
	}
}

/* ==========================================================================
   4. Botones y enlaces
   ========================================================================== */

.botones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 2rem;
}

.boton,
.ps-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	min-height: 3.25rem;
	padding: 0.8rem 1.6rem;
	border: 2px solid var(--c-azul);
	border-radius: 0;
	background: var(--c-azul);
	color: #fff;
	font-family: var(--fuente-titulos);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.boton:hover,
.ps-boton:hover {
	border-color: var(--c-azul-oscuro);
	background: var(--c-azul-oscuro);
	color: #fff;
}

.boton .icono {
	width: 1.15rem;
	height: 1.15rem;
}

.boton .icono--flecha {
	transition: transform 0.2s;
}

.boton:hover .icono--flecha {
	transform: translateX(0.2rem);
}

.boton--secundario,
.ps-boton--secundario {
	background: transparent;
	color: var(--c-azul);
}

.boton--secundario:hover,
.ps-boton--secundario:hover {
	border-color: var(--c-azul);
	background: var(--c-azul);
	color: #fff;
}

/* Sobre fondos oscuros, el secundario va en blanco. */
.botones--claro .boton--secundario {
	border-color: rgb(255 255 255 / 0.55);
	color: #fff;
}

.botones--claro .boton--secundario:hover {
	border-color: #fff;
	background: #fff;
	color: var(--c-antracita);
}

/* Botón de WhatsApp: verde oscuro, para que el texto blanco tenga contraste suficiente. */
.boton--whatsapp {
	border-color: #168043;
	background: #168043;
}

.boton--whatsapp:hover {
	border-color: #106433;
	background: #106433;
}

@media (max-width: 39.99em) {
	.botones .boton {
		width: 100%;
	}
}

.enlace-flecha {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--fuente-titulos);
	font-weight: 700;
	text-decoration: none;
}

.enlace-flecha .icono {
	width: 1.05rem;
	height: 1.05rem;
	transition: transform 0.2s;
}

.enlace-flecha:hover .icono {
	transform: translateX(0.2rem);
}

.telefono-grande {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: inherit;
	font-family: var(--fuente-titulos);
	font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.telefono-grande .icono {
	width: 1.1em;
	height: 1.1em;
	padding: 0.25em;
	background: var(--c-azul);
	color: #fff;
}

.telefono-grande:hover {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.enlace-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--fuente-titulos);
	font-weight: 700;
	text-decoration: none;
}

.enlace-whatsapp .icono {
	width: 1.3rem;
	height: 1.3rem;
	color: var(--c-whatsapp);
}

/* ==========================================================================
   5. Cabecera (tema padre)
   ========================================================================== */

/*
 * El CSS del padre va en una capa, así que las reglas generales de este tema (márgenes de listas y párrafos,
 * color de los enlaces) le ganan siempre. Aquí se devuelven a sus componentes los valores que necesitan.
 */
.lgd2-header a {
	color: inherit;
	text-decoration: none;
}

.lgd2-nav__list,
.lgd2-nav .sub-menu,
.lgd2-datos,
.lgd2-redes,
.lgd2-footer__menu,
.lgd2-footer__legal-menu,
.lgd2-footer__copyright {
	margin: 0;
}

.lgd2-footer a {
	text-decoration: none;
}

.lgd2-header {
	color: var(--c-antracita);
	border-bottom: 1px solid var(--c-linea);
	font-family: var(--fuente-titulos);
}

.lgd2-header--sticky {
	box-shadow: 0 1px 0 rgb(0 0 0 / 0.02);
}

.lgd2-header__inner {
	max-width: calc(var(--ancho) + 2 * var(--margen));
	min-height: 5rem;
	padding: 0.75rem var(--margen);
}

/*
 * Logo mientras no se suba uno en Identidad del sitio: los tejados y la ventana del logo del cliente en SVG,
 * con el nombre del negocio en un serif grueso como el suyo. En la cabecera, la marca a la izquierda y el
 * nombre a la derecha; en el footer, apilado como en la tarjeta del cliente.
 */
.lgd2-header__site-title {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	column-gap: 0.8rem;
	row-gap: 0.2rem;
	color: var(--c-antracita);
	font-family: var(--fuente-logo);
	font-size: 1.24rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}

.lgd2-header__site-title::before {
	content: "";
	grid-row: 1 / span 2;
	width: 5.6rem;
	aspect-ratio: 1570 / 606;
	background: url(assets/img/marca.svg) no-repeat center / contain;
}

.lgd2-header__site-title::after {
	content: "Integrales SL";
	grid-column: 2;
	color: var(--c-pizarra);
	font-size: 0.5em;
	font-weight: 700;
	letter-spacing: 0.42em;
}

.lgd2-footer__site-title {
	display: inline-block;
	width: 20rem;
	max-width: 100%;
	color: #fff;
	font-family: var(--fuente-logo);
	font-size: 0.84rem;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.lgd2-footer__site-title::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 1570 / 606;
	margin-bottom: 0.85rem;
	background: url(assets/img/marca-clara.svg) no-repeat center / contain;
}

.lgd2-footer__site-title::after {
	content: " Integrales SL";
}

.lgd2-header__brand img {
	max-height: 3.25rem;
}

.lgd2-nav__list {
	gap: 0.25rem 1.6rem;
}

.lgd2-nav__list a {
	font-size: 0.975rem;
	font-weight: 600;
	transition: color 0.2s;
}

.lgd2-nav__list a:hover {
	opacity: 1;
	color: var(--c-azul);
}

.lgd2-nav__list > li > a {
	position: relative;
}

.lgd2-nav__list [aria-current="page"],
.lgd2-nav__list > .current-menu-ancestor > a {
	color: var(--c-azul);
	font-weight: 700;
}

/* En la home, «Reformas integrales» y «Toda Terrassa» enlazan a la propia home: sus menús no se marcan. */
.home .lgd2-nav__list > .current-menu-ancestor > a {
	color: inherit;
	font-weight: 600;
}

.home .lgd2-nav .sub-menu [aria-current="page"] {
	font-weight: 500;
}

.lgd2-nav__submenu-toggle {
	color: var(--c-pizarra);
}

.lgd2-header .lgd2-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.8rem 1.25rem;
	border-radius: 0;
	background: var(--c-azul);
	color: #fff;
	font-weight: 700;
	transition: background-color 0.2s;
}

.lgd2-header .lgd2-header__cta:hover {
	opacity: 1;
	background: var(--c-azul-oscuro);
	color: #fff;
}

.lgd2-header .lgd2-header__cta--telefono {
	background: var(--c-azul);
	color: #fff;
	box-shadow: none;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* Escritorio estrecho: la cabecera se compacta para que el menú y el teléfono quepan en una línea. */
@media (min-width: 60em) and (max-width: 74.99em) {
	.lgd2-header__inner {
		gap: 1rem;
	}

	.lgd2-header__menu {
		gap: 1.1rem;
	}

	.lgd2-nav__list {
		gap: 0.25rem 1rem;
	}

	.lgd2-nav__list a {
		font-size: 0.93rem;
	}

	.lgd2-nav__submenu-toggle {
		width: 1.4rem;
	}

	.lgd2-header__site-title {
		column-gap: 0.65rem;
		font-size: 1.04rem;
	}

	.lgd2-header__site-title::before {
		width: 4.6rem;
	}

	.lgd2-header .lgd2-header__cta {
		padding: 0.7rem 0.95rem;
		font-size: 0.93rem;
	}
}

.lgd2-header__cta--telefono .lgd2-icon {
	width: 1.05rem;
	height: 1.05rem;
}

.lgd2-header__toggle {
	color: var(--c-antracita);
}

@media (max-width: 59.99em) {
	.lgd2-header__inner {
		min-height: 4.25rem;
	}

	.lgd2-header__site-title {
		column-gap: 0.65rem;
		font-size: 1.02rem;
	}

	.lgd2-header__site-title::before {
		width: 4.5rem;
	}

	.lgd2-header__menu {
		padding-top: 0.25rem;
		border-top: 1px solid var(--c-linea);
		box-shadow: 0 1.5rem 2rem -1rem rgb(18 28 40 / 0.25);
	}

	.lgd2-nav__list > li {
		border-bottom-color: var(--c-linea);
	}

	.lgd2-nav__list > li > a {
		font-size: 1.05rem;
	}

	.lgd2-nav .sub-menu {
		border-left: 3px solid var(--c-azul);
		margin-bottom: 0.75rem;
		padding-left: 1rem;
	}

	.lgd2-nav .sub-menu a {
		font-weight: 500;
	}

	/* Menú multinivel: el tercer nivel desplegado dentro del menú móvil. */
	.nav-lgd.mobile-lgd .sub-menu .sub-menu {
		margin: 0 0 0.5rem;
		padding-left: 0.85rem;
		border-left: 1px solid var(--c-linea);
	}

	.nav-lgd.mobile-lgd .sub-menu > li > a[href="#"],
	.nav-lgd.mobile-lgd .sub-menu > .menu-item-has-children > a {
		color: var(--c-teja);
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.lgd2-header .lgd2-header__ctas {
		align-self: stretch;
	}

	.lgd2-header .lgd2-header__cta {
		width: 100%;
		justify-content: center;
		padding-block: 0.95rem;
	}
}

@media (min-width: 60em) {
	.lgd2-nav .sub-menu {
		padding: 0.6rem 0;
		border-top: 3px solid var(--c-azul);
		border-radius: 0;
		box-shadow: 0 1.25rem 2.5rem -0.75rem rgb(18 28 40 / 0.3);
	}

	.lgd2-nav .sub-menu a {
		padding: 0.5rem 1.25rem;
		font-size: 0.94rem;
		font-weight: 500;
		line-height: 1.35;
	}

	.lgd2-nav .sub-menu a:hover {
		background: var(--c-azul-niebla);
		color: var(--c-azul);
	}

	.lgd2-header--submenu-dos .lgd2-nav .sub-menu {
		grid-auto-columns: minmax(13.5rem, max-content);
		column-gap: 0;
	}
}

/*
 * Desplegable de Zonas (clases menu-zonas y menu-zonas-todas, en Apariencia → Menús): «Toda Terrassa» arriba,
 * a todo el ancho, y los municipios en dos columnas del mismo ancho, cada uno en una sola línea. Las columnas
 * se reparten solas aunque cambie el número de zonas, sin depender del corte del personalizador.
 */
.lgd2-nav .menu-zonas > .sub-menu > .menu-zonas-todas > a {
	color: var(--c-azul);
	font-weight: 700;
}

.lgd2-nav .menu-zonas > .sub-menu > .menu-zonas-todas > a::after {
	content: "→";
	margin-left: 0.45em;
}

@media (min-width: 60em) {
	.lgd2-nav .menu-zonas.is-open > .sub-menu {
		display: block;
		width: 30rem;
		padding: 0 0 0.6rem;
		columns: 2;
		column-gap: 0;
	}

	.lgd2-nav .menu-zonas > .sub-menu > li {
		break-inside: avoid;
	}

	.lgd2-nav .menu-zonas > .sub-menu a {
		overflow: hidden;
		padding-block: 0.45rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.lgd2-nav .menu-zonas > .sub-menu > .menu-zonas-todas {
		column-span: all;
		margin-bottom: 0.5rem;
		border-bottom: 1px solid var(--c-linea);
	}

	.lgd2-nav .menu-zonas > .sub-menu > .menu-zonas-todas > a {
		padding-block: 0.85rem 0.8rem;
	}
}

/* Menú multinivel LGD (Servicios, a tres niveles): panel con las categorías y sus enlaces. */
.drill-panel-lgd {
	border-top: 3px solid var(--c-azul) !important;
	border-radius: 0 !important;
	box-shadow: 0 1.25rem 2.5rem -0.75rem rgb(18 28 40 / 0.3) !important;
	font-family: var(--fuente-titulos);
}

.drill-panel-lgd a {
	border-radius: 0 !important;
}

.drill-panel-lgd input {
	border-radius: 0 !important;
	font-family: var(--fuente-texto);
}

/* ==========================================================================
   6. Footer (tema padre)
   ========================================================================== */

.lgd2-footer {
	background: var(--c-antracita);
	color: #c6d0d8;
	font-size: 0.97rem;
	border-top: 4px solid var(--c-azul);
}

.lgd2-footer__inner {
	max-width: calc(var(--ancho) + 2 * var(--margen));
	padding: clamp(3.5rem, 6vw, 4.75rem) var(--margen) 1.75rem;
}

.lgd2-footer__columnas {
	gap: 2.75rem;
	padding-bottom: 3rem;
}

.lgd2-footer__site-title {
	color: #fff;
}

.lgd2-footer__texto {
	max-width: 21rem;
	margin-top: 1.25rem;
	opacity: 1;
	color: #aebac4;
	line-height: 1.6;
}

.lgd2-footer__titulo {
	margin-bottom: 1.2rem;
	color: var(--c-azul-claro);
	font-family: var(--fuente-titulos);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	opacity: 1;
}

.lgd2-footer__menu {
	gap: 0.5rem;
}

.lgd2-footer a {
	color: #e3e9ee;
}

.lgd2-footer a:hover {
	color: #fff;
}

.lgd2-footer__menu a {
	color: #c6d0d8;
}

.lgd2-footer .lgd2-datos {
	gap: 1rem;
}

.lgd2-footer .lgd2-datos__item .lgd2-icon {
	color: var(--c-azul-claro);
}

.lgd2-footer .lgd2-datos__etiqueta {
	color: #93a1ad;
	font-size: 0.8rem;
	opacity: 1;
}

.lgd2-footer .lgd2-datos__valor a {
	font-weight: 600;
}

/* El reset de márgenes de arriba le quita a las redes su separación del padre: se le devuelve en el footer. */
.lgd2-footer__col--contacto .lgd2-redes {
	margin-top: 1.75rem;
}

.lgd2-footer .lgd2-redes__link {
	border-color: var(--c-linea-oscura);
	border-radius: 0;
}

.lgd2-footer .lgd2-redes__link:hover {
	border-color: var(--c-azul);
	background: var(--c-azul);
	color: #fff;
}

.lgd2-footer__legal {
	border-top-color: var(--c-linea-oscura);
	color: #93a1ad;
	font-size: 0.875rem;
}

.lgd2-footer__copyright {
	opacity: 1;
}

.lgd2-footer__legal-menu a {
	color: #aebac4;
}

@media (min-width: 60em) {
	.lgd2-footer--columnas-servicios .lgd2-footer__columnas {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
	}
}

/* ==========================================================================
   7. Home
   ========================================================================== */

/* Hero: imagen de fondo con un degradado oscuro a la izquierda, donde va el texto. */
.hero-inicio {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(46rem, calc(100svh - 5rem));
	overflow: hidden;
	background: var(--c-antracita);
	color: #e4eaef;
	isolation: isolate;
}

.hero-inicio__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center;
}

.hero-inicio::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgb(24 31 41 / 0.94) 0%, rgb(24 31 41 / 0.86) 38%, rgb(24 31 41 / 0.45) 70%, rgb(24 31 41 / 0.2) 100%),
		linear-gradient(0deg, rgb(24 31 41 / 0.55) 0%, transparent 35%);
}

.hero-inicio__inner {
	padding-block: clamp(2.25rem, 4vw, 3.25rem) clamp(3.25rem, 6vw, 4.75rem);
}

.hero-inicio__texto {
	max-width: 44rem;
}

.hero-inicio__titulo {
	margin-bottom: 0.45em;
	color: #fff;
	font-size: clamp(2.4rem, 1.5rem + 3vw, 3.6rem);
	line-height: 1.04;
}

.hero-inicio__intro {
	max-width: 42rem;
	color: #d3dce3;
	font-size: clamp(1.06rem, 1rem + 0.25vw, 1.16rem);
	line-height: 1.6;
}

.hero-inicio__puntos {
	display: grid;
	gap: 0.5rem;
	margin: 1.75rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--c-linea-oscura);
	list-style: none;
	color: #e9eef2;
	font-weight: 600;
}

.hero-inicio__puntos li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
}

.hero-inicio__puntos .icono {
	margin-top: 0.15em;
	color: var(--c-azul-claro);
}

@media (max-width: 59.99em) {
	.hero-inicio::before {
		background: linear-gradient(180deg, rgb(24 31 41 / 0.88) 0%, rgb(24 31 41 / 0.8) 100%);
	}
}

/* Presentación con la foto de la furgoneta de la empresa. */
.presentacion__inner {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

@media (min-width: 60em) {
	.presentacion__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	}
}

.presentacion__texto p {
	color: var(--c-texto-suave);
}

.presentacion__imagen img {
	aspect-ratio: 4 / 3;
}

/* Reformas integrales. */
.integral__inner {
	display: grid;
	gap: clamp(3rem, 6vw, 5rem);
	align-items: center;
}

@media (min-width: 60em) {
	.integral__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	}
}

.integral__texto > p {
	color: var(--c-texto-suave);
}

.integral__subtitulo {
	margin: 2rem 0 1.1rem;
	font-size: 1.15rem;
}

.integral__texto .botones {
	margin-top: 0;
}

/* Tarjetas (Por qué elegirnos, Sobre nosotros). */
.tarjetas {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.tarjetas--3,
	.tarjetas--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 60em) {
	.tarjetas--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tarjetas--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.tarjeta {
	position: relative;
	padding: 2rem 1.75rem 1.85rem;
	border: 1px solid var(--c-linea-oscura);
	background: var(--c-antracita-2);
}

.tarjeta::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 3.25rem;
	height: 3px;
	background: var(--c-teja-claro);
}

.tarjeta .icono {
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 1.4rem;
	color: var(--c-azul-claro);
}

.tarjeta__titulo {
	margin-bottom: 0.6rem;
	font-size: 1.15rem;
}

.tarjeta p {
	margin: 0;
	color: #b8c4ce;
	font-size: 0.98rem;
	line-height: 1.6;
}

.tarjeta--clara {
	border-color: var(--c-linea);
	background: #fff;
}

.tarjeta--clara::before {
	background: var(--c-teja);
}

.tarjeta--clara .icono {
	color: var(--c-azul);
}

.tarjeta--clara p {
	color: var(--c-texto-suave);
}

/* Pasos numerados (Cómo trabajamos). */
.pasos {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.pasos__paso {
	position: relative;
	padding: 1.75rem 0 1.75rem 4.5rem;
	border-top: 1px solid var(--c-linea);
	counter-increment: paso;
}

.pasos__paso::before {
	content: counter(paso, decimal-leading-zero);
	position: absolute;
	top: 1.6rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	background: var(--c-antracita);
	color: #fff;
	font-family: var(--fuente-titulos);
	font-size: 1rem;
	font-weight: 800;
}

.pasos__titulo {
	margin-bottom: 0.4rem;
	font-size: 1.15rem;
}

.pasos__paso p {
	margin: 0;
	color: var(--c-texto-suave);
}

@media (min-width: 60em) {
	.pasos {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1.5rem;
	}

	.pasos__paso {
		padding: 4.75rem 0 0;
		border-top: 0;
	}

	.pasos__paso::before {
		top: 0;
	}

	/* Línea que une los números. */
	.pasos__paso::after {
		content: "";
		position: absolute;
		top: 1.5rem;
		left: 3.75rem;
		right: -0.75rem;
		height: 1px;
		background: var(--c-linea);
	}

	.pasos__paso:last-child::after {
		display: none;
	}
}

/* ==========================================================================
   8. Servicios Grid (cuadrícula de servicios)
   ========================================================================== */

.servicios-grid__pestanas {
	display: flex;
	justify-content: center;
	margin-inline: auto;
	border: 1px solid var(--c-linea);
	width: fit-content;
	max-width: 100%;
	background: #fff;
}

.servicios-grid__pestana {
	padding: 0.85rem 1.6rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--c-antracita);
	font-family: var(--fuente-titulos);
	font-size: 0.98rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.servicios-grid__pestana + .servicios-grid__pestana {
	border-left: 1px solid var(--c-linea);
}

.servicios-grid__pestana:hover {
	color: var(--c-azul);
}

.servicios-grid__pestana[aria-selected="true"] {
	background: var(--c-antracita);
	color: #fff;
}

.servicios-grid__item {
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.servicios-grid__item:hover {
	border-color: #b9c8d3;
	box-shadow: var(--sombra);
}

.servicios-grid__icono {
	background: var(--c-azul-niebla);
	color: var(--c-azul);
}

.servicios-grid__icono--b {
	background: #f5ece7;
}

.servicios-grid__svg {
	stroke-width: 1.75;
}

.servicios-grid__titulo {
	margin: 0 0 0.55rem;
	font-size: 1.15rem;
	line-height: 1.25;
}

.servicios-grid__texto {
	margin: 0;
	color: var(--c-texto-suave);
	font-size: 0.98rem;
	line-height: 1.55;
}

.servicios-grid__enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--fuente-titulos);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
}

.servicios-grid__enlace::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: url(assets/icons/flecha.svg) no-repeat center / contain;
	mask: url(assets/icons/flecha.svg) no-repeat center / contain;
	transition: transform 0.2s;
}

.servicios-grid__item:hover .servicios-grid__enlace::after {
	transform: translateX(0.2rem);
}

.servicios-grid__item--extra {
	border-color: var(--c-antracita);
	background: var(--c-antracita);
	color: #c6d0d8;
}

.servicios-grid__item--extra .servicios-grid__titulo {
	color: #fff;
}

.servicios-grid__item--extra .servicios-grid__texto {
	color: #b8c4ce;
}

.servicios-grid__item--extra .servicios-grid__enlace {
	color: var(--c-azul-claro);
}

/* ==========================================================================
   9. Dónde trabajamos (buscador de zonas)
   Banda oscura compacta: título y nota en una fila, entradilla, buscador con botón, línea de estado,
   municipios en fichas y, al final, el teléfono y el WhatsApp para quien no encuentre el suyo.
   ========================================================================== */

.zonas {
	padding-block: clamp(3rem, 6vw, 4.25rem);
	background: var(--c-antracita);
	color: #c4cfd8;
}

.zonas__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
}

.zonas__titulo {
	margin: 0;
	color: #fff;
	font-size: clamp(1.65rem, 1.3rem + 1.1vw, 2.15rem);
}

.zonas__nota {
	margin: 0;
	color: var(--c-azul-claro);
	font-family: var(--fuente-titulos);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.zonas__texto {
	max-width: 42rem;
	margin: 0.85rem 0 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.zonas__buscador {
	display: flex;
	max-width: 36rem;
	margin-top: 1.25rem;
	border: 2px solid var(--c-azul-claro);
	background: var(--c-antracita-2);
}

.zonas__buscador:focus-within {
	border-color: #fff;
}

.zonas__input {
	flex: 1;
	min-width: 0;
	padding: 0.85rem 1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 1.02rem;
	font-weight: 600;
	-webkit-appearance: none;
	appearance: none;
}

.zonas__input::placeholder {
	color: #8e9ba7;
	opacity: 1;
}

.zonas__input:focus {
	outline: none;
}

.zonas__boton {
	flex: none;
	padding: 0.85rem 1.6rem;
	border: 0;
	border-radius: 0;
	background: var(--c-azul);
	color: #fff;
	font-family: var(--fuente-titulos);
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s;
}

.zonas__boton:hover {
	background: var(--c-azul-oscuro);
}

.zonas__boton:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -5px;
}

.zonas__estado {
	margin: 1.4rem 0 0.8rem;
	color: var(--c-azul-claro);
	font-family: var(--fuente-titulos);
	font-size: 0.95rem;
	font-weight: 700;
}

.zonas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zonas__item {
	margin: 0;
}

.zonas__item[hidden],
.zonas--sin-resultados .zonas__lista {
	display: none;
}

.zonas__ficha {
	display: block;
	padding: 0.45rem 0.8rem;
	border: 1px solid rgb(255 255 255 / 0.16);
	color: #dbe2e8;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}

/* Los municipios con página propia enlazan a ella. */
.zonas__ficha--enlace {
	border-color: rgb(106 163 196 / 0.6);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s;
}

.zonas__ficha--enlace:hover {
	border-color: var(--c-azul);
	background: var(--c-azul);
	color: #fff;
}

.zonas__pie {
	margin: 1.4rem 0 0;
	font-weight: 600;
}

.zonas__pie a {
	color: var(--c-azul-claro);
	font-weight: 700;
	text-decoration: none;
}

.zonas__pie a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Botón para desplegar la lista: solo en el móvil (ver abajo). */
.zonas__ver-todos {
	display: none;
}

@media (max-width: 39.99em) {
	.zonas__buscador {
		flex-direction: column;
	}

	.zonas__ficha {
		padding: 0.4rem 0.65rem;
		font-size: 0.8125rem;
	}

	/* La lista se pliega a unas filas: se despliega con el botón o al buscar (assets/js/tema.js). */
	.zonas--plegable:not(.zonas--abierta, .zonas--buscando) .zonas__lista {
		max-height: 12.75rem;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(#000 60%, transparent);
		mask-image: linear-gradient(#000 60%, transparent);
	}

	.zonas--plegable:not(.zonas--buscando) .zonas__ver-todos {
		display: inline-flex;
		margin-top: 0.9rem;
		padding: 0.6rem 1.1rem;
		border: 1px solid var(--c-azul-claro);
		border-radius: 0;
		background: transparent;
		color: #fff;
		font-family: var(--fuente-titulos);
		font-size: 0.9rem;
		font-weight: 700;
		cursor: pointer;
	}
}

/* ==========================================================================
   10. Preguntas frecuentes (páginas de servicio y de zona)
   ========================================================================== */

.ps-faq__lista {
	border-top: 1px solid var(--c-linea);
}

.ps-faq__item {
	border-bottom: 1px solid var(--c-linea);
}

.ps-faq__pregunta {
	position: relative;
	display: block;
	padding: 1.35rem 3.5rem 1.35rem 0;
	color: var(--c-antracita);
	font-family: var(--fuente-titulos);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
	transition: color 0.2s;
}

.ps-faq__pregunta::-webkit-details-marker {
	display: none;
}

.ps-faq__pregunta::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 2.25rem;
	height: 2.25rem;
	background:
		linear-gradient(currentColor, currentColor) center / 0.85rem 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 0.85rem no-repeat,
		var(--c-azul-niebla);
	color: var(--c-azul);
	transform: translateY(-50%);
	transition: background-color 0.2s;
}

.ps-faq__item[open] .ps-faq__pregunta::after {
	background:
		linear-gradient(currentColor, currentColor) center / 0.85rem 2px no-repeat,
		var(--c-azul);
	color: #fff;
}

.ps-faq__pregunta:hover {
	color: var(--c-azul);
}

.ps-faq__respuesta {
	padding: 0 3.5rem 1.4rem 0;
	color: var(--c-texto-suave);
}

.ps-faq__respuesta > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   11. Llamada a la acción final
   ========================================================================== */

.cta-final {
	position: relative;
	overflow: hidden;
	background: var(--c-azul);
	color: #e2edf4;
}

.cta-final::before {
	content: "";
	position: absolute;
	top: 0;
	right: -4rem;
	bottom: 0;
	width: min(42%, 30rem);
	background: var(--c-azul-oscuro);
	transform: skewX(-18deg);
	transform-origin: top;
}

.cta-final__inner {
	position: relative;
	display: grid;
	gap: 2.5rem;
	align-items: center;
	padding-block: clamp(3.5rem, 7vw, 5rem);
}

@media (min-width: 60em) {
	.cta-final__inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
	}
}

.cta-final__titulo {
	margin-bottom: 0.5rem;
	color: #fff;
}

.cta-final__texto p {
	max-width: 38rem;
	color: #d6e5ef;
	font-size: 1.1rem;
}

.cta-final .botones {
	margin-top: 1.75rem;
}

.cta-final .boton:not(.boton--secundario) {
	border-color: #fff;
	background: #fff;
	color: var(--c-azul);
}

.cta-final .boton:not(.boton--secundario):hover {
	border-color: var(--c-antracita);
	background: var(--c-antracita);
	color: #fff;
}

.cta-final__contacto {
	padding-left: clamp(0rem, 3vw, 2.5rem);
	color: #fff;
}

.cta-final__rotulo {
	margin: 0 0 0.35rem;
	color: #b8d3e5;
	font-family: var(--fuente-titulos);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cta-final__rotulo:not(:first-child) {
	margin-top: 1.5rem;
}

.cta-final .telefono-grande .icono {
	background: #fff;
	color: var(--c-azul);
}

.cta-final__horario {
	display: block;
	font-weight: 600;
}

/* ==========================================================================
   12. Cabecera de las páginas interiores y migas de pan
   ========================================================================== */

.cabecera-interior {
	position: relative;
	overflow: hidden;
	background: var(--c-antracita);
	color: #cfd8e0;
}

.cabecera-interior::after {
	content: "";
	position: absolute;
	right: max(var(--margen), calc((100% - var(--ancho)) / 2));
	bottom: 0;
	width: 9rem;
	height: 0.45rem;
	background: var(--c-azul);
}

.cabecera-interior__inner {
	padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(3rem, 6vw, 4.5rem);
}

.cabecera-interior__titulo {
	max-width: 52rem;
	margin-bottom: 0.4em;
	color: #fff;
}

.cabecera-interior__texto {
	max-width: 44rem;
	margin: 0;
	color: #c4cfd8;
	font-size: 1.12rem;
}

.migas ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
	color: #93a1ad;
	font-size: 0.88rem;
}

.migas li + li::before {
	content: "/";
	margin-right: 0.35rem;
	color: #6b7b88;
}

.migas a {
	color: #c4cfd8;
	text-decoration: none;
}

.migas a:hover {
	color: #fff;
	text-decoration: underline;
}

.migas [aria-current] {
	color: #93a1ad;
}

.entrada__fecha {
	margin: 0;
	color: #aebac4;
}

/* ==========================================================================
   13. Páginas de servicio y de zona (plugin Páginas de servicio)
   ========================================================================== */

.ps-seccion {
	padding-block: var(--espacio-seccion);
}

.ps-contenedor {
	width: min(100% - 2 * var(--margen), var(--ancho));
	margin-inline: auto;
}

.ps-cabecera {
	max-width: 44rem;
	margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.ps-etiqueta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	color: var(--c-teja);
	font-family: var(--fuente-titulos);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ps-etiqueta::before {
	content: "";
	flex: none;
	width: 1.75rem;
	height: 3px;
	background: var(--c-azul);
}

.ps-titulo {
	margin-bottom: 0.55em;
}

.ps-cabecera__texto {
	margin: 0;
	color: var(--c-texto-suave);
	font-size: 1.08rem;
}

/* Hero de los servicios y las zonas. */
.hero-servicio {
	padding: 0;
	background: var(--c-antracita);
	color: #cfd8e0;
}

.hero-servicio__inner {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
	padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(3.5rem, 7vw, 5.5rem);
}

@media (min-width: 60em) {
	.hero-servicio__inner {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	}

	.hero-servicio__inner--sin-imagen {
		grid-template-columns: minmax(0, 48rem);
	}
}

.hero-servicio__titulo {
	margin-bottom: 0.45em;
	color: #fff;
	font-size: clamp(2.15rem, 1.4rem + 3vw, 3.5rem);
	line-height: 1.07;
}

.hero-servicio__intro {
	max-width: 40rem;
	color: #c9d3db;
	font-size: 1.12rem;
}

.hero-servicio .botones {
	margin-top: 1.75rem;
}

.hero-servicio__puntos {
	display: grid;
	gap: 0.55rem;
	margin: 2rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--c-linea-oscura);
	list-style: none;
	color: #e9eef2;
	font-weight: 600;
}

.hero-servicio__puntos li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.hero-servicio__puntos .icono {
	margin-top: 0.15em;
	color: var(--c-azul-claro);
}

.hero-servicio__imagen {
	margin-bottom: 1rem;
}

.hero-servicio__imagen img {
	aspect-ratio: 4 / 3;
}

/*
 * Ritmo de fondos de los servicios y las zonas: hero oscuro y, después, blanco y gris alternos
 * (por qué elegirnos en blanco, cómo trabajamos en gris, texto en blanco, preguntas en gris).
 */
.ps-como-trabajamos {
	background: var(--c-fondo-gris);
}

/* Por qué confiar en nosotros: tarjetas claras con el filete teja. */
.ps-lista {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.ps-por-que__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 60em) {
	.ps-por-que__lista {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ps-por-que .ps-lista__elemento {
	position: relative;
	padding: 2rem 1.75rem 1.85rem;
	border: 1px solid var(--c-linea);
	background: #fff;
}

.ps-por-que .ps-lista__elemento::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 3.25rem;
	height: 3px;
	background: var(--c-teja);
}

.ps-lista__icono {
	margin: 0 0 1.4rem;
	line-height: 0;
}

.ps-lista__icono .icono,
.ps-lista__icono img {
	width: 2.25rem;
	height: 2.25rem;
	color: var(--c-azul);
}

.ps-lista__destacado {
	margin: 0 0 0.75rem;
	color: var(--c-azul);
	font-family: var(--fuente-titulos);
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
}

.ps-lista__titulo {
	margin-bottom: 0.6rem;
	font-size: 1.15rem;
}

.ps-lista__texto {
	margin: 0;
	color: var(--c-texto-suave);
	font-size: 0.98rem;
	line-height: 1.6;
}

/* Cómo trabajamos: pasos numerados. */
.ps-pasos {
	gap: 0;
}

.ps-pasos__paso {
	position: relative;
	padding: 1.75rem 0 1.75rem 4.5rem;
	border-top: 1px solid var(--c-linea);
}

.ps-pasos__numero {
	position: absolute;
	top: 1.6rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	background: var(--c-antracita);
	color: #fff;
	font-family: var(--fuente-titulos);
	font-size: 1rem;
	font-weight: 800;
}

.ps-pasos .ps-lista__icono {
	display: none;
}

.ps-pasos .ps-lista__titulo {
	margin-bottom: 0.4rem;
}

.ps-pasos .ps-lista__texto {
	color: var(--c-texto-suave);
	font-size: 1rem;
}

@media (min-width: 60em) {
	.ps-pasos {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		gap: 1.5rem;
	}

	.ps-pasos__paso {
		padding: 4.75rem 0 0;
		border-top: 0;
	}

	.ps-pasos__numero {
		top: 0;
	}

	.ps-pasos__paso::after {
		content: "";
		position: absolute;
		top: 1.5rem;
		left: 3.75rem;
		right: -0.75rem;
		height: 1px;
		background: var(--c-linea);
	}

	.ps-pasos__paso:last-child::after {
		display: none;
	}
}

/* Servicios (cuadrícula) dentro de las zonas. */
.ps-servicios {
	background: var(--c-fondo-gris);
}

/* Texto SEO: columna de lectura y recuadro de contacto fijo. */
.texto-seo__inner {
	display: grid;
	gap: 3rem;
	align-items: start;
}

@media (min-width: 60em) {
	.texto-seo__inner {
		grid-template-columns: minmax(0, var(--ancho-texto)) minmax(16rem, 21rem);
		justify-content: space-between;
	}

	.texto-seo__lateral {
		position: sticky;
		top: 7rem;
	}
}

.texto-seo__aviso {
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--c-teja);
	background: var(--c-fondo-gris);
	color: var(--c-texto-suave);
	font-size: 0.9rem;
}

.lateral-contacto {
	display: grid;
	gap: 0.85rem;
	padding: 2rem 1.75rem;
	border-top: 4px solid var(--c-azul);
	background: var(--c-fondo-gris);
}

.lateral-contacto__titulo {
	margin: 0;
	color: var(--c-antracita);
	font-family: var(--fuente-titulos);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.2;
}

.lateral-contacto__texto {
	margin: 0 0 0.5rem;
	color: var(--c-texto-suave);
	font-size: 0.98rem;
}

.lateral-contacto__telefono {
	color: var(--c-antracita);
	font-size: 1.45rem;
}

.lateral-contacto__whatsapp {
	color: var(--c-antracita);
}

.lateral-contacto__horario {
	display: block;
	padding-top: 0.85rem;
	border-top: 1px solid var(--c-linea);
	color: var(--c-texto-suave);
	font-size: 0.92rem;
}

/* Preguntas frecuentes de los servicios. */
.ps-faq {
	background: var(--c-fondo-gris);
}

.ps-faq .ps-contenedor {
	max-width: 56rem;
}

.ps-faq .ps-cabecera {
	margin-inline: auto;
	text-align: center;
}

.ps-faq .ps-etiqueta {
	justify-content: center;
}

.ps-faq__lista {
	background: #fff;
	border: 1px solid var(--c-linea);
	border-bottom: 0;
	padding: 0 1.75rem;
}

.ps-faq__item:last-child {
	border-bottom: 0;
}

.ps-faq .ps-faq__lista {
	border-bottom: 1px solid var(--c-linea);
}

/* Sobre nosotros dentro de los servicios (si alguna página lo activa). */
.ps-dos-columnas {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

@media (min-width: 60em) {
	.ps-dos-columnas {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.ps-puntos {
	display: grid;
	gap: 0.6rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.ps-puntos li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-weight: 600;
}

.ps-puntos .icono {
	color: var(--c-azul);
}

.ps-equipo__imagen,
.ps-hero__imagen {
	margin: 0;
}

.ps-equipo__imagen img {
	display: block;
	width: 100%;
	height: auto;
}

.ps-media__play {
	border-radius: 0;
	background: var(--c-azul);
}

/* ==========================================================================
   14. Texto con formato (texto SEO, páginas legales, entradas)
   ========================================================================== */

.contenido-editor {
	font-size: 1.075rem;
	line-height: 1.75;
}

.contenido-editor > :first-child {
	margin-top: 0;
}

.contenido-editor h2 {
	margin: 2.2em 0 0.65em;
	font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem);
}

.contenido-editor h3 {
	margin: 1.8em 0 0.55em;
	font-size: 1.25rem;
}

.contenido-editor h4 {
	margin: 1.6em 0 0.5em;
	font-size: 1.08rem;
}

.contenido-editor p,
.contenido-editor ul,
.contenido-editor ol {
	margin-bottom: 1.25em;
}

.contenido-editor ul,
.contenido-editor ol {
	padding-left: 1.4em;
}

.contenido-editor li {
	margin-bottom: 0.45em;
	padding-left: 0.2em;
}

.contenido-editor ul li::marker {
	color: var(--c-azul);
}

.contenido-editor ol li::marker {
	color: var(--c-azul);
	font-family: var(--fuente-titulos);
	font-weight: 700;
}

.contenido-editor strong {
	color: var(--c-antracita);
}

.contenido-editor blockquote {
	margin: 2em 0;
	padding: 0.5em 0 0.5em 1.5em;
	border-left: 4px solid var(--c-azul);
	color: var(--c-antracita);
	font-size: 1.15em;
}

.contenido-editor table {
	width: 100%;
	margin: 1.5em 0;
	border-collapse: collapse;
	font-size: 0.95em;
}

.contenido-editor th,
.contenido-editor td {
	padding: 0.65em 0.8em;
	border: 1px solid var(--c-linea);
	text-align: left;
	vertical-align: top;
}

.contenido-editor th {
	background: var(--c-fondo-gris);
	color: var(--c-antracita);
	font-family: var(--fuente-titulos);
}

.contenido-editor .wp-block-table {
	overflow-x: auto;
}

.contenido-editor img {
	display: block;
	margin-block: 1.5em;
}

.contenido-editor .lgd2-email--imagen {
	vertical-align: -0.2em;
}

/* ==========================================================================
   15. Contacto
   A la izquierda, el recuadro para pedir presupuesto por WhatsApp; a la derecha, los datos de contacto
   en filas iguales: icono, rótulo y valor.
   ========================================================================== */

.contacto__inner {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 60em) {
	.contacto__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.contacto__titulo {
	margin-bottom: 0.6em;
	font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.85rem);
}

.contacto__presupuesto {
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border-top: 4px solid var(--c-azul);
	background: var(--c-fondo-gris);
}

.contacto__texto {
	margin: 0;
	color: var(--c-texto-suave);
}

.contacto__presupuesto .botones {
	margin-top: 1.75rem;
}

.contacto__nota {
	margin: 1.1rem 0 0;
	color: var(--c-texto-suave);
	font-size: 0.95rem;
}

.contacto__lista {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--c-linea);
	list-style: none;
}

.contacto__item {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 1.1rem;
	align-items: center;
	margin: 0;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--c-linea);
}

.contacto__icono {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--c-azul-niebla);
	color: var(--c-azul);
}

.contacto__icono .icono {
	width: 1.3rem;
	height: 1.3rem;
}

.contacto__rotulo {
	margin: 0 0 0.3rem;
	color: var(--c-teja);
	font-family: var(--fuente-titulos);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.contacto__valor {
	color: var(--c-antracita);
	font-family: var(--fuente-titulos);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

a.contacto__valor:hover {
	color: var(--c-azul);
	text-decoration: underline;
}

.contacto__valor--texto {
	font-family: var(--fuente-texto);
	font-size: 1.05rem;
	font-weight: 600;
}

.contacto__email.lgd2-email--imagen {
	display: block;
	height: 1.15rem;
	color: var(--c-antracita);
}

/* ==========================================================================
   16. Blog
   ========================================================================== */

.entradas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 2rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.entrada-tarjeta {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-linea);
	background: #fff;
	transition: box-shadow 0.2s;
}

.entrada-tarjeta:hover {
	box-shadow: var(--sombra);
}

.entrada-tarjeta__imagen {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--c-fondo-gris);
}

.entrada-tarjeta__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: auto;
}

.entrada-tarjeta__texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.5rem 1.5rem 1.6rem;
}

.entrada-tarjeta__fecha {
	margin: 0 0 0.5rem;
	color: var(--c-teja);
	font-family: var(--fuente-titulos);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.entrada-tarjeta__titulo {
	margin-bottom: 0.6rem;
	font-size: 1.25rem;
	line-height: 1.25;
}

.entrada-tarjeta__titulo a {
	color: inherit;
	text-decoration: none;
}

.entrada-tarjeta__titulo a:hover {
	color: var(--c-azul);
}

.entrada-tarjeta__texto p {
	color: var(--c-texto-suave);
	font-size: 0.98rem;
}

.entrada-tarjeta .enlace-flecha {
	margin-top: auto;
}

.paginacion {
	margin-top: 3rem;
}

.paginacion ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.paginacion .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.85rem;
	border: 1px solid var(--c-linea);
	color: var(--c-antracita);
	font-family: var(--fuente-titulos);
	font-weight: 700;
	text-decoration: none;
}

.paginacion a.page-numbers:hover {
	border-color: var(--c-azul);
	color: var(--c-azul);
}

.paginacion .page-numbers.current {
	border-color: var(--c-antracita);
	background: var(--c-antracita);
	color: #fff;
}

.sin-entradas {
	color: var(--c-texto-suave);
	font-size: 1.1rem;
}

.entrada__imagen {
	margin: 0 1rem 3rem 0;
}

.entrada__nav {
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--c-linea);
}

.entrada__nav .nav-links {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 40em) {
	.entrada__nav .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.entrada__nav .nav-next {
		grid-column: 2;
		text-align: right;
	}
}

.entrada__nav a {
	display: block;
	text-decoration: none;
}

.entrada__nav-rotulo {
	display: block;
	color: var(--c-teja);
	font-family: var(--fuente-titulos);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.entrada__nav-titulo {
	display: block;
	margin-top: 0.25rem;
	color: var(--c-antracita);
	font-family: var(--fuente-titulos);
	font-weight: 700;
	line-height: 1.3;
}

/* ==========================================================================
   17. Página 404
   ========================================================================== */

.error-404__inner {
	max-width: 42rem;
	text-align: center;
}

.error-404__codigo {
	margin: 0 0 1rem;
	color: var(--c-azul-niebla);
	font-family: var(--fuente-titulos);
	font-size: clamp(6rem, 4rem + 10vw, 11rem);
	font-weight: 800;
	line-height: 0.9;
	-webkit-text-stroke: 2px var(--c-azul);
}

.error-404 .botones {
	justify-content: center;
}

/* ==========================================================================
   18. Botón flotante de WhatsApp (plugin WhatsApp flotante)
   ========================================================================== */

a.whatsapp-flotante {
	border-radius: 0;
	background: var(--c-whatsapp);
	box-shadow: 0 0.75rem 1.5rem -0.5rem rgb(18 28 40 / 0.45);
}

/* ==========================================================================
   19. Accesibilidad y preferencias
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}