/*
Theme Name: Reformas Beltra
Description: Tema hijo de LGD2 Theme para Reformas y Desarrollos Beltra.
Template: lgd2-theme
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: reformasbeltra
*/

/*
 * Colores del logo: marino (fondo), crema, dorado y coral. Sin colores añadidos: el resto son tintes de esos cuatro.
 * Ángulos rectos en todo el diseño.
 *
 * El CSS del padre va en @layer lgd2 y el de los plugins con :where() o en capas, así que estas reglas
 * tienen prioridad sin !important.
 */

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
	--c-marino: #04021a;
	--c-marino-2: #0f0d2e;
	--c-crema: #fbeba9;
	--c-crema-fondo: #fcf8ea;
	--c-oro: #edb957;
	--c-coral: #ef735a;
	--c-texto: #04021a;
	--c-texto-suave: #45435c;
	--c-texto-claro: #f3efe2;
	--c-texto-claro-suave: rgb(243 239 226 / 0.78);
	--c-linea: #e6e1cf;
	--c-linea-oscura: rgb(251 235 169 / 0.14);

	--f-titulos: "Montserrat", "Segoe UI", system-ui, sans-serif;
	--f-texto: "Inter", "Segoe UI", system-ui, sans-serif;

	--ancho: 78rem;
	--margen: clamp(1rem, 4vw, 2rem);
	--espacio-seccion: clamp(4rem, 9vw, 7.5rem);
	--altura-cabecera: 5.5rem;

	/* Cuadrículas de los plugins */
	--servicios-grid-radio: 0;
	--trabajos-radio: 0;
	--trabajos-ancho: calc(var(--ancho) - 2 * var(--margen));
	--trabajos-margen: var(--margen);
	--trabajos-hueco: 1rem;
	--trabajos-hueco-movil: 0.75rem;
	--trabajos-fondo-video: var(--c-marino);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--altura-cabecera) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: #fff;
	color: var(--c-texto);
	font-family: var(--f-texto);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

img {
	height: auto;
}

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

p {
	margin: 0 0 1em;
}

a {
	color: inherit;
}

strong {
	font-weight: 600;
}

::selection {
	background: var(--c-crema);
	color: var(--c-marino);
}

.icono {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
}

.contenedor {
	width: 100%;
	max-width: var(--ancho);
	margin-inline: auto;
	padding-inline: var(--margen);
}

.contenedor--estrecho {
	max-width: 52rem;
}

.lgd2-main {
	display: block;
}

/* ==========================================================================
   Secciones y titulares
   ========================================================================== */

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

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

.seccion--oscura {
	position: relative;
	background: var(--c-marino);
	color: var(--c-texto-claro);
}

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

/* Retícula isométrica, como el cubo del logo, en los fondos oscuros grandes. */
.hero::before,
.cabecera-interior::before,
.cta-final::before,
.trabajos-pagina__hero::before,
.trabajos-pagina__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(30deg, rgb(251 235 169 / 0.05) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(150deg, rgb(251 235 169 / 0.05) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(90deg, rgb(251 235 169 / 0.035) 0 1px, transparent 1px 111px);
	-webkit-mask-image: linear-gradient(100deg, transparent 15%, #000 75%);
	mask-image: linear-gradient(100deg, transparent 15%, #000 75%);
	pointer-events: none;
}

.etiqueta,
.trabajos-pagina__etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 1.1rem;
	color: var(--c-marino);
	font-family: var(--f-titulos);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.etiqueta::before,
.trabajos-pagina__etiqueta::before {
	content: "";
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	background: var(--c-coral);
}

.etiqueta--clara,
.seccion--oscura .etiqueta,
.trabajos-pagina__etiqueta {
	color: var(--c-crema);
}

.titulo-seccion {
	max-width: 26ch;
	font-size: clamp(1.75rem, 3.2vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.cabecera-seccion {
	max-width: 46rem;
	margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.cabecera-seccion > p:not(.etiqueta) {
	color: var(--c-texto-suave);
	font-size: 1.1rem;
}

.seccion--oscura .cabecera-seccion > p:not(.etiqueta) {
	color: var(--c-texto-claro-suave);
}

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

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

.cabecera-seccion--centrada .titulo-seccion {
	margin-inline: auto;
}

/* ==========================================================================
   Botones
   ========================================================================== */

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

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.95rem 1.5rem;
	border: 2px solid transparent;
	font-family: var(--f-titulos);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

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

.boton--principal {
	border-color: var(--c-coral);
	background: var(--c-coral);
	color: var(--c-marino);
}

.boton--principal:hover {
	border-color: var(--c-crema);
	background: var(--c-crema);
}

.boton--secundario {
	background: transparent;
}

.boton--claro {
	border-color: var(--c-marino);
	color: var(--c-marino);
}

.boton--claro:hover {
	background: var(--c-marino);
	color: var(--c-crema);
}

.boton--oscuro {
	border-color: rgb(251 235 169 / 0.55);
	color: var(--c-crema);
}

.boton--oscuro:hover {
	border-color: var(--c-crema);
	background: var(--c-crema);
	color: var(--c-marino);
}

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

.enlace-flecha .icono {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--c-coral);
	transition: transform 0.2s;
}

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

/* ==========================================================================
   Cabecera (maqueta del tema padre)
   ========================================================================== */

.lgd2-header {
	--lgd2-header-bg: var(--c-marino);
	--lgd2-submenu-offset: 1.6rem;

	border-bottom: 1px solid var(--c-linea-oscura);
	color: var(--c-texto-claro);
	font-family: var(--f-titulos);
}

.lgd2-header__inner {
	max-width: var(--ancho);
	padding-block: 0.85rem;
}

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

.lgd2-nav__list a {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: color 0.2s;
}

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

/* En la home no se marcan Servicios ni Zonas, aunque contengan enlaces a la home. */
.lgd2-nav__list > li > [aria-current="page"],
body:not(.home) .lgd2-nav__list > .current-menu-ancestor > a {
	color: var(--c-crema);
	text-decoration: underline;
	text-decoration-color: var(--c-coral);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.5em;
}

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

.lgd2-header .lgd2-header__cta,
.lgd2-header .lgd2-header__cta--telefono {
	padding: 0.8rem 1.15rem;
	border-radius: 0;
	background: var(--c-coral);
	box-shadow: none;
	color: var(--c-marino);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: background-color 0.2s;
}

.lgd2-header .lgd2-header__cta:hover {
	background: var(--c-crema);
	opacity: 1;
}

@media (min-width: 60em) {
	.lgd2-nav .sub-menu {
		min-width: 16rem;
		padding: 0.5rem 0;
		border-top: 3px solid var(--c-coral);
		border-radius: 0;
		box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 0.35);
	}

	.lgd2-nav .sub-menu a {
		padding: 0.55rem 1.25rem;
		font-size: 0.88rem;
		font-weight: 500;
	}
}

/* En una fila solo caben el logo, los seis elementos del menú y el teléfono a partir de 80em. */
@media (min-width: 80em) {
	.lgd2-header__brand img {
		max-height: 3rem;
	}

	.lgd2-nav__list {
		column-gap: 1.25rem;
	}

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

/*
 * Entre el menú móvil (60em, lo fija el tema padre) y 80em, la cabecera va en dos filas: logo y teléfono
 * arriba y el menú debajo, a todo el ancho. El contenedor del menú se "deshace" (display: contents)
 * para colocar la navegación y el teléfono en la rejilla de la cabecera.
 */
@media (min-width: 60em) and (max-width: 79.99em) {
	:root {
		--altura-cabecera: 8rem;
	}

	.lgd2-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		row-gap: 0;
		padding-bottom: 0;
	}

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

	.lgd2-header__menu {
		display: contents;
	}

	.lgd2-header__ctas {
		grid-column: 2;
		grid-row: 1;
	}

	.lgd2-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 0.85rem;
		border-top: 1px solid var(--c-linea-oscura);
	}

	/* Los elementos llegan hasta el borde inferior de la cabecera: los submenús salen justo debajo. */
	.lgd2-header {
		--lgd2-submenu-offset: 1px;
	}

	.lgd2-nav__list {
		column-gap: 1.75rem;
		padding-top: 0.35rem;
	}
}

@media (max-width: 59.99em) {
	:root {
		--altura-cabecera: 4.5rem;
	}

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

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

	.lgd2-header__menu {
		border-bottom-color: var(--c-linea-oscura);
	}

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

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

	.lgd2-nav .sub-menu a {
		color: var(--c-texto-claro-suave);
		font-weight: 500;
	}

	/*
	 * Tercer nivel (servicios por categoría): el plugin Menú multinivel LGD lo despliega en el menú móvil
	 * (clase mobile-lgd); aquí solo va su aspecto: cada categoría como título y sus servicios debajo.
	 */
	.nav-lgd.mobile-lgd .sub-menu .sub-menu {
		margin: 0 0 0.5rem 0.15rem;
		padding: 0 0 0 1rem;
		border-left: 2px solid var(--c-coral);
	}

	.nav-lgd.mobile-lgd .sub-menu > .menu-item-has-children > a[href="#"] {
		padding-top: 0.9rem;
		color: var(--c-crema);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}
}

@media (max-width: 22.5em) {
	.lgd2-header__brand img {
		max-height: 2.2rem;
	}
}

/* ==========================================================================
   Footer (maqueta del tema padre)
   ========================================================================== */

.lgd2-footer {
	border-top: 4px solid var(--c-coral);
	background: var(--c-marino);
	color: var(--c-texto-claro-suave);
	font-size: 0.95rem;
}

.lgd2-footer__inner {
	max-width: var(--ancho);
	padding-top: clamp(3.5rem, 7vw, 5rem);
}

.lgd2-footer__brand img {
	width: 12.5rem;
	max-height: none;
}

.lgd2-footer__texto {
	max-width: 24rem;
	margin-top: 1.5rem;
	opacity: 1;
}

.lgd2-footer__titulo {
	margin-bottom: 1.25rem;
	color: var(--c-crema);
	font-family: var(--f-titulos);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	opacity: 1;
}

.lgd2-footer__menu {
	gap: 0.55rem;
}

.lgd2-footer a:hover {
	color: var(--c-coral);
	text-decoration: none;
}

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

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

.lgd2-footer .lgd2-datos__etiqueta {
	color: var(--c-crema);
	opacity: 0.7;
}

.lgd2-footer .lgd2-telefono {
	color: #fff;
	font-family: var(--f-titulos);
	font-size: 1.15rem;
	font-weight: 700;
}

.lgd2-redes__link {
	border: 1px solid rgb(251 235 169 / 0.35);
	border-radius: 0;
	color: var(--c-crema);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.lgd2-footer .lgd2-redes__link {
	border-radius: 0;
}

.lgd2-redes__link:hover,
.lgd2-footer .lgd2-redes__link:hover {
	border-color: var(--c-coral);
	background: var(--c-coral);
	color: var(--c-marino);
}

/* Hueco a la derecha para que el botón flotante de WhatsApp no tape el menú legal. */
.lgd2-footer__legal {
	padding-right: 4.5rem;
	border-top-color: var(--c-linea-oscura);
	font-size: 0.85rem;
}

.lgd2-footer__copyright {
	opacity: 1;
}

/* ==========================================================================
   Hero (home, servicios y zonas)
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	background: var(--c-marino);
	color: var(--c-texto-claro);
}

.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.hero__inner--sin-imagen {
	grid-template-columns: minmax(0, 54rem);
}

.hero__titulo {
	max-width: 16ch;
	margin-bottom: 1.5rem;
	color: #fff;
	font-size: clamp(2.3rem, 5vw, 3.9rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.hero--interior .hero__titulo {
	max-width: 24ch;
	font-size: clamp(2rem, 4vw, 3.05rem);
}

.hero__intro {
	max-width: 38rem;
	color: var(--c-texto-claro-suave);
	font-size: 1.15rem;
}

.hero .botones {
	margin-top: 2.25rem;
}

.puntos {
	display: grid;
	gap: 0.65rem;
	margin: 2.25rem 0 0;
	padding: 0;
	list-style: none;
}

.puntos li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-weight: 500;
	line-height: 1.45;
}

.puntos .icono {
	width: 1.2rem;
	height: 1.2rem;
	margin-top: 0.1em;
	color: var(--c-coral);
	stroke-width: 2.5;
}

/* Marco desplazado detrás de las imágenes. */
.marco {
	position: relative;
	margin: 0 1.25rem 1.25rem 0;
}

.marco::before {
	content: "";
	position: absolute;
	inset: 1.25rem -1.25rem -1.25rem 1.25rem;
	border: 2px solid var(--c-coral);
}

.marco--oro::before {
	border-color: var(--c-oro);
}

.marco > * {
	position: relative;
	z-index: 1;
	width: 100%;
}

.marco img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.marco figcaption {
	margin-top: 0.75rem;
	color: var(--c-texto-suave);
	font-size: 0.85rem;
}

/* Miga de pan */
.miga ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0 0 1.75rem;
	padding: 0;
	color: var(--c-texto-claro-suave);
	font-size: 0.85rem;
	list-style: none;
}

.miga li + li::before {
	content: "/";
	margin-right: 0.45rem;
	color: var(--c-coral);
}

.miga a {
	text-decoration: none;
}

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

/* Franja de datos de la home */
.datos {
	background: var(--c-crema);
	color: var(--c-marino);
}

.datos__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.datos__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.6rem 1.5rem;
	border-left: 1px solid rgb(4 2 26 / 0.15);
}

.datos__item:first-child {
	border-left: 0;
}

.datos__item .icono {
	width: 2.1rem;
	height: 2.1rem;
}

.datos__item p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.4;
}

.datos__item strong {
	display: block;
	font-family: var(--f-titulos);
	font-size: 1.1rem;
	font-weight: 800;
}

/* ==========================================================================
   Cabecera de páginas interiores
   ========================================================================== */

.cabecera-interior {
	position: relative;
	overflow: hidden;
	background: var(--c-marino);
	color: var(--c-texto-claro);
}

.cabecera-interior__inner {
	position: relative;
	padding-block: clamp(3rem, 6vw, 5rem);
}

.cabecera-interior__titulo {
	max-width: 24ch;
	margin-bottom: 1.25rem;
	color: #fff;
	font-size: clamp(2.1rem, 4.5vw, 3.3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.cabecera-interior__texto {
	max-width: 44rem;
	margin: 0;
	color: var(--c-texto-claro-suave);
	font-size: 1.15rem;
}

/* ==========================================================================
   Dos columnas (texto + imagen)
   ========================================================================== */

.dos-columnas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}

.dos-columnas__texto > p:not(.etiqueta) {
	color: var(--c-texto-suave);
}

.dos-columnas__texto .botones {
	margin-top: 2.25rem;
}

.dos-columnas__imagen {
	margin-top: 0;
}

.lista-check {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem 1.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.lista-check li {
	position: relative;
	padding-left: 1.5rem;
	font-weight: 500;
	line-height: 1.45;
}

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

.lista-check--grande {
	grid-template-columns: minmax(0, 1fr);
	gap: 1.1rem;
	margin: 0;
}

.lista-check--grande li {
	font-weight: 400;
}

.lista-check--grande strong {
	font-weight: 700;
}

.puntos-icono {
	display: grid;
	gap: 0.85rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.puntos-icono li {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-weight: 500;
}

.puntos-icono .icono,
.puntos-icono img {
	width: 1.6rem;
	height: 1.6rem;
	color: var(--c-coral);
}

/* ==========================================================================
   Motivos (por qué elegirnos)
   ========================================================================== */

/* Cuatro motivos y cuatro pasos: 4 columnas, 2 o 1, sin dejar uno suelto en la última fila. */
.motivos__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--c-linea-oscura);
	border-left: 1px solid var(--c-linea-oscura);
	list-style: none;
}

.motivos__item {
	padding: 2.25rem 2rem;
	border-right: 1px solid var(--c-linea-oscura);
	border-bottom: 1px solid var(--c-linea-oscura);
}

.motivos__destacado {
	margin-bottom: 1.25rem;
	color: var(--c-oro);
	font-family: var(--f-titulos);
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.motivos__icono {
	margin-bottom: 1.4rem;
	color: var(--c-coral);
}

.motivos__icono .icono,
.motivos__icono img {
	width: 2.75rem;
	height: 2.75rem;
}

.motivos__titulo {
	font-size: 1.2rem;
}

.motivos__item p:last-child {
	margin: 0;
	color: var(--c-texto-claro-suave);
	font-size: 0.98rem;
}

/* ==========================================================================
   Pasos (cómo trabajamos)
   ========================================================================== */

.pasos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.25rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pasos__paso {
	padding-top: 1.5rem;
	border-top: 3px solid var(--c-marino);
}

.pasos__numero {
	display: block;
	margin-bottom: 1rem;
	color: var(--c-coral);
	font-family: var(--f-titulos);
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.pasos__titulo {
	font-size: 1.15rem;
}

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

/* ==========================================================================
   Cuadrícula de servicios (plugin Servicios Grid)
   ========================================================================== */

.servicios-grid {
	--servicios-grid-hueco: 1rem;
	--servicios-grid-relleno: 1.9rem 1.75rem;
	--servicios-grid-borde: 1px solid var(--c-linea);
	--servicios-grid-icono-caja: 3.25rem;
	--servicios-grid-icono-tamano: 1.55rem;
	--servicios-grid-espacio-marca: 1.4rem;
	--servicios-grid-espacio-titulo: 0.6rem;
	--servicios-grid-espacio-enlace: 1.4rem;
	--servicios-grid-pestanas-hueco: 0.5rem;
	--servicios-grid-espacio-pestanas: 2.5rem;
}

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

.servicios-grid__item:hover {
	border-color: var(--c-marino);
	box-shadow: 0.5rem 0.5rem 0 var(--c-crema);
}

.servicios-grid__icono {
	background: var(--c-marino);
	color: var(--c-crema);
}

.servicios-grid__icono--b {
	color: var(--c-coral);
}

.servicios-grid__titulo {
	margin: 0 0 var(--servicios-grid-espacio-titulo);
	font-size: 1.12rem;
	line-height: 1.3;
}

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

.servicios-grid__enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding-bottom: 0.15rem;
	border-bottom: 2px solid var(--c-coral);
	font-family: var(--f-titulos);
	font-size: 0.86rem;
	font-weight: 700;
	text-decoration: none;
}

/* Toda la tarjeta es clicable. */
.servicios-grid__enlace::before {
	content: "";
	position: absolute;
	inset: 0;
}

.servicios-grid__enlace::after {
	content: "→";
	transition: transform 0.2s;
}

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

.servicios-grid__item--extra {
	border-color: var(--c-marino);
	background: var(--c-marino);
	color: var(--c-texto-claro);
}

.servicios-grid__item--extra:hover {
	box-shadow: 0.5rem 0.5rem 0 var(--c-coral);
}

/* El elemento final «¿No ves lo que buscas?», como franja a todo el ancho al final de la cuadrícula. */
@media (min-width: 40em) {
	.servicios-grid__item--extra {
		--servicios-grid-espacio-marca: 0;

		display: grid;
		grid-column: 1 / -1;
		grid-template-areas:
			"icono titulo pie"
			"icono texto pie";
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.25rem 1.75rem;
	}

	.servicios-grid__item--extra .servicios-grid__icono {
		grid-area: icono;
		margin: 0;
	}

	.servicios-grid__item--extra .servicios-grid__titulo {
		grid-area: titulo;
		margin: 0;
	}

	.servicios-grid__item--extra .servicios-grid__texto {
		grid-area: texto;
	}

	.servicios-grid__item--extra .servicios-grid__pie {
		grid-area: pie;
		margin: 0;
	}
}

.servicios-grid__item--extra .servicios-grid__titulo {
	color: var(--c-crema);
}

.servicios-grid__item--extra .servicios-grid__texto {
	color: var(--c-texto-claro-suave);
}

.servicios-grid__pestana {
	padding: 0.7rem 1.15rem;
	border: 1px solid rgb(4 2 26 / 0.25);
	border-radius: 0;
	background: transparent;
	color: var(--c-marino);
	font-family: var(--f-titulos);
	font-size: 0.86rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

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

.servicios-grid__pestana[aria-selected="true"] {
	border-color: var(--c-marino);
	background: var(--c-marino);
	color: var(--c-crema);
}

.servicios-grid-aviso {
	padding: 1rem;
	border: 2px dashed var(--c-coral);
}

/* ==========================================================================
   Zonas de trabajo (con buscador)
   ========================================================================== */

.zonas__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.zonas__texto {
	color: var(--c-texto-suave);
	font-size: 1.05rem;
}

.zonas__buscador {
	margin-top: 2rem;
}

.zonas__label {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 0.95rem;
	font-weight: 600;
}

.zonas__campo {
	position: relative;
}

.zonas__campo .icono {
	position: absolute;
	top: 50%;
	left: 1rem;
	width: 1.2rem;
	height: 1.2rem;
	color: var(--c-texto-suave);
	transform: translateY(-50%);
	pointer-events: none;
}

.zonas__input {
	width: 100%;
	padding: 1rem 1rem 1rem 3rem;
	border: 2px solid var(--c-marino);
	border-radius: 0;
	background: #fff;
	color: var(--c-marino);
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.zonas__input::placeholder {
	color: #8a889b;
}

.zonas__input:focus {
	border-color: var(--c-coral);
	outline: 3px solid rgb(239 115 90 / 0.3);
	outline-offset: 0;
}

.zonas__resultado {
	margin: 0.75rem 0 0;
	font-weight: 600;
}

.zonas__resultado:empty {
	display: none;
}

.zonas__nota {
	margin: 0.85rem 0 0;
	color: var(--c-texto-suave);
	font-size: 0.92rem;
	line-height: 1.5;
}

.zonas__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zonas__lista[hidden],
.zonas__item[hidden] {
	display: none;
}

.zonas__item a,
.zonas__item span {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--c-linea);
	background: #fff;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}

.zonas--blanco .zonas__item a,
.zonas--blanco .zonas__item span {
	background: var(--c-crema-fondo);
}

.zonas__item a {
	border-left: 3px solid var(--c-coral);
	font-weight: 600;
	transition: border-color 0.2s, background-color 0.2s;
}

.zonas__item a:hover {
	border-color: var(--c-marino);
	border-left-color: var(--c-coral);
	background: var(--c-crema);
}

.zonas__sin-resultados {
	padding: 2rem;
	background: var(--c-marino);
	color: var(--c-texto-claro-suave);
}

.zonas__sin-resultados[hidden] {
	display: none;
}

.zonas__sin-resultados-titulo {
	color: var(--c-crema);
	font-family: var(--f-titulos);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
}

.zonas__sin-resultados .botones {
	margin-top: 1.5rem;
}

/* ==========================================================================
   Textos informativos
   ========================================================================== */

.prosa {
	font-size: 1.0625rem;
}

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

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

.prosa h2 {
	margin-top: 2.4em;
	font-size: clamp(1.45rem, 2.4vw, 1.85rem);
	font-weight: 800;
}

.prosa h2::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-bottom: 1rem;
	background: var(--c-coral);
}

.prosa h3 {
	margin-top: 1.9em;
	font-size: 1.2rem;
}

.prosa h4 {
	margin-top: 1.6em;
	font-size: 1.05rem;
}

.prosa p,
.prosa li {
	color: #26243d;
}

.prosa ul,
.prosa ol {
	margin: 0 0 1.25em;
	padding-left: 1.3rem;
}

.prosa li {
	margin-bottom: 0.45em;
	padding-left: 0.25rem;
}

.prosa li::marker {
	color: var(--c-coral);
	font-weight: 700;
}

.prosa a {
	color: var(--c-marino);
	font-weight: 500;
	text-decoration-color: var(--c-coral);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.prosa a:hover {
	text-decoration-color: var(--c-marino);
}

.prosa blockquote {
	margin: 1.75em 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 4px solid var(--c-oro);
	font-size: 1.1rem;
}

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

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

.prosa th {
	background: var(--c-crema-fondo);
	font-weight: 600;
}

.prosa .wp-block-table {
	margin: 1.5em 0;
	overflow-x: auto;
}

.prosa img {
	margin-block: 1.5em;
}

/* Texto SEO de servicios y zonas, con la caja de contacto al lado */
.texto-seo__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.texto-seo__contenido {
	max-width: 46rem;
}

.texto-seo__lateral {
	position: sticky;
	top: calc(var(--altura-cabecera) + 2rem);
}

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

/* Caja de contacto */
.caja-cta {
	margin-top: 3.5rem;
	padding: 2rem;
	border: 2px solid var(--c-marino);
}

.caja-cta__titulo {
	margin-bottom: 0.5rem;
	font-family: var(--f-titulos);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.25;
}

.caja-cta .botones {
	margin-top: 1.5rem;
}

.caja-cta--oscura {
	margin-top: 0;
	border: 0;
	border-top: 4px solid var(--c-coral);
	background: var(--c-marino);
	color: var(--c-texto-claro-suave);
}

.caja-cta--oscura .caja-cta__titulo {
	color: var(--c-crema);
}

.texto-seo__lateral .botones {
	flex-direction: column;
}

/* ==========================================================================
   Preguntas frecuentes
   ========================================================================== */

.faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.faq__cabecera {
	position: sticky;
	top: calc(var(--altura-cabecera) + 2rem);
}

.faq__lista {
	border-top: 1px solid rgb(4 2 26 / 0.18);
}

.faq__item {
	border-bottom: 1px solid rgb(4 2 26 / 0.18);
}

.faq__pregunta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.4rem 0;
	font-family: var(--f-titulos);
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

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

.faq__pregunta .icono {
	width: 1.4rem;
	height: 1.4rem;
	margin-top: 0.05em;
	color: var(--c-coral);
	stroke-width: 2.25;
	transition: transform 0.25s;
}

.faq__pregunta:hover .icono {
	transform: rotate(90deg);
}

.faq__item[open] .faq__pregunta .icono {
	transform: rotate(45deg);
}

.faq__respuesta {
	padding: 0 3rem 1.5rem 0;
	color: var(--c-texto-suave);
}

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

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

/* Marino con dos resplandores suaves: coral arriba a la derecha y dorado abajo a la izquierda. */
.cta-final {
	overflow: hidden;
	background:
		radial-gradient(ellipse 60% 90% at 92% 0%, rgb(239 115 90 / 0.45), transparent 70%),
		radial-gradient(ellipse 45% 80% at 0% 100%, rgb(237 185 87 / 0.22), transparent 70%),
		var(--c-marino);
}

.cta-final__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem 4rem;
}

/* Texto más estrecho para que, en escritorio, los botones quepan a su lado. */
.cta-final__texto {
	max-width: 34rem;
}

.cta-final__texto p {
	margin: 0;
	color: var(--c-texto-claro-suave);
	font-size: 1.1rem;
}

.cta-final .botones {
	margin-top: 0;
}

/* ==========================================================================
   Galería profesional y página "Trabajos realizados" (plugin Trabajos Realizados)
   El plugin solo maqueta. Su CSS puede cargarse después de este archivo (en el footer, si la
   galería sale de un sitio que no detecta al cargar la cabecera), así que las reglas que
   coinciden con las suyas van con un nivel más de especificidad (.trabajos …).
   ========================================================================== */

/* Mientras cargan, las fotos dejan un hueco crema; los vídeos llevan franjas marino (--trabajos-fondo-video). */
.trabajos .trabajos-medio--imagen {
	background: var(--c-crema-fondo);
}

.trabajos .trabajos-medio__ampliar {
	background: rgb(4 2 26 / 0.45);
	color: var(--c-crema);
}

/* Play y ampliar de los vídeos, y flechas del carrusel: cuadrados, con los colores del logo. */
.trabajos .trabajos-video__play {
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 0;
	background: var(--c-coral);
	box-shadow: none;
	color: var(--c-marino);
}

.trabajos .trabajos-video__boton:hover .trabajos-video__play,
.trabajos .trabajos-video__boton:focus-visible .trabajos-video__play {
	background: var(--c-crema);
}

.trabajos .trabajos-medio__ampliar-video {
	border-radius: 0;
	background: rgb(4 2 26 / 0.7);
	color: var(--c-crema);
}

.trabajos .trabajos-medio__ampliar-video:hover,
.trabajos .trabajos-medio__ampliar-video:focus-visible {
	background: var(--c-marino);
}

.trabajos .trabajos-carrusel__boton {
	width: 3rem;
	height: 3rem;
	border-radius: 0;
	background: var(--c-marino);
	color: var(--c-crema);
}

.trabajos .trabajos-carrusel__boton:hover,
.trabajos .trabajos-carrusel__boton:focus-visible {
	background: var(--c-coral);
	color: var(--c-marino);
}

.trabajos .trabajos-galeria__pista {
	scrollbar-color: var(--c-coral) var(--c-linea);
}

/* Visor a pantalla completa */
.trabajos-lightbox {
	background: rgb(4 2 26 / 0.95);
}

.trabajos-lightbox .trabajos-lightbox__boton {
	border-radius: 0;
	background: rgb(251 235 169 / 0.12);
	color: var(--c-crema);
}

.trabajos-lightbox .trabajos-lightbox__boton:hover,
.trabajos-lightbox .trabajos-lightbox__boton:focus-visible {
	background: var(--c-coral);
	color: var(--c-marino);
}

.galeria__mas {
	margin: clamp(2rem, 4vw, 2.75rem) 0 0;
	text-align: center;
}

/* Antes vs después: tirador y etiquetas cuadrados con los colores del logo. Van con .trabajos-ad__marco
   delante para que también se apliquen a la copia que abre el visor a pantalla completa. */
.trabajos-ad__marco .trabajos-ad__linea {
	width: 2px;
	margin-left: -1px;
}

.trabajos-ad__marco .trabajos-ad__tirador {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0;
	background: var(--c-coral);
	box-shadow: 0 2px 10px rgb(4 2 26 / 0.35);
	color: var(--c-marino);
}

.trabajos-ad__marco .trabajos-ad__etiqueta {
	border-radius: 0;
	background: var(--c-marino);
	color: var(--c-crema);
	font-family: var(--f-titulos);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
}

.trabajos-ad__marco .trabajos-ad__etiqueta--despues {
	background: var(--c-coral);
	color: var(--c-marino);
}

.trabajos .trabajos-ad__ampliar {
	border-radius: 0;
	background: rgb(4 2 26 / 0.7);
	color: var(--c-crema);
}

.trabajos .trabajos-ad__ampliar:hover,
.trabajos .trabajos-ad__ampliar:focus-visible {
	background: var(--c-marino);
}

/* Más aire entre filas: debajo de cada comparación va su título. */
.antes-despues .trabajos-ad {
	row-gap: clamp(2rem, 4vw, 2.75rem);
}

.trabajos .trabajos-ad__titulo {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.seccion--oscura .trabajos-ad__titulo {
	color: #fff;
}

/* Página "Trabajos realizados": cabecera oscura, trabajos con fondos alternos, cierre y llamada a la acción. */
.trabajos-pagina .trabajos-pagina__hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
	background: var(--c-marino);
	color: var(--c-texto-claro);
}

.trabajos-pagina__hero .trabajos-contenedor,
.trabajos-pagina__cta .trabajos-contenedor {
	position: relative;
}

.trabajos-pagina .trabajos-pagina__titulo {
	max-width: 22ch;
	margin-inline: auto;
	color: #fff;
	font-size: clamp(2.1rem, 4.5vw, 3.3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.trabajos-pagina .trabajos-pagina__subtitulo {
	color: var(--c-texto-claro-suave);
	font-size: 1.15rem;
}

.trabajos-pagina .trabajos-pagina__bajar {
	color: var(--c-coral);
}

.trabajos-pagina__bajar svg {
	width: 1.75rem;
	height: 1.75rem;
}

/* Lo escrito en el editor de la página (el antes vs después): sección crema entre la cabecera y la lista,
   con la etiqueta, el título y el texto centrados como en las demás secciones. */
.trabajos-pagina .trabajos-pagina__contenido {
	padding-block: var(--espacio-seccion);
	background: var(--c-crema-fondo);
}

.trabajos-pagina__contenido .trabajos-contenedor > :not(.trabajos) {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.trabajos-pagina__contenido .etiqueta {
	display: flex;
	justify-content: center;
}

.trabajos-pagina__contenido .titulo-seccion {
	max-width: 26ch;
}

.trabajos-pagina__contenido .trabajos-contenedor > p:not(.etiqueta) {
	color: var(--c-texto-suave);
	font-size: 1.1rem;
}

.trabajos-pagina__contenido .trabajos {
	margin-top: clamp(2.5rem, 5vw, 3.75rem);
}

.trabajos-pagina .trabajos-lista__trabajo--par {
	background: var(--c-crema-fondo);
}

.trabajos-lista .trabajos-lista__cabecera {
	border-bottom-color: var(--c-linea);
}

/* Número y textos en fila, centrados en vertical (en el móvil el plugin los pone uno debajo del otro). */
@media (min-width: 48em) {
	.trabajos-lista .trabajos-lista__cabecera {
		align-items: center;
	}
}

.trabajos-lista__numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(3.5rem, 7vw, 4.75rem);
	aspect-ratio: 1;
	background: var(--c-marino);
	color: var(--c-crema);
	font-family: var(--f-titulos);
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	opacity: 1;
}

.trabajos-lista .trabajos-lista__titulo {
	margin-bottom: 0.4rem;
	font-size: clamp(1.35rem, 2.4vw, 1.8rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.trabajos-lista .trabajos-lista__descripcion {
	color: var(--c-texto-suave);
}

@media (min-width: 64.0625em) {
	.trabajos-pagina .trabajos-lista__medios {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Cierre ("…Y muchos más"): la franja coral y dorada de la home. */
.trabajos-pagina .trabajos-pagina__cierre {
	background: linear-gradient(115deg, var(--c-coral), var(--c-oro));
	color: var(--c-marino);
}

.trabajos-pagina__cierre-titulo,
.trabajos-pagina__cta-titulo {
	font-size: clamp(1.75rem, 3.2vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.trabajos-pagina .trabajos-pagina__cierre-texto {
	font-size: 1.1rem;
}

/* Llamada a la acción: como la del final de las demás páginas. */
.trabajos-pagina .trabajos-pagina__cta {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 60% 90% at 92% 0%, rgb(239 115 90 / 0.45), transparent 70%),
		radial-gradient(ellipse 45% 80% at 0% 100%, rgb(237 185 87 / 0.22), transparent 70%),
		var(--c-marino);
	color: var(--c-texto-claro);
}

.trabajos-pagina__cta-titulo {
	color: #fff;
}

.trabajos-pagina .trabajos-pagina__cta-texto {
	color: var(--c-texto-claro-suave);
	font-size: 1.1rem;
}

.trabajos-pagina .trabajos-pagina__botones {
	gap: 0.75rem;
}

.trabajos-pagina__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95rem 1.5rem;
	border: 2px solid var(--c-coral);
	background: var(--c-coral);
	color: var(--c-marino);
	font-family: var(--f-titulos);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.trabajos-pagina__boton:hover {
	border-color: var(--c-crema);
	background: var(--c-crema);
}

.trabajos-pagina__boton--secundario {
	border-color: rgb(251 235 169 / 0.55);
	background: transparent;
	color: var(--c-crema);
}

.trabajos-pagina__boton--secundario:hover {
	color: var(--c-marino);
}

/* ==========================================================================
   Sobre nosotros, contacto
   ========================================================================== */

.tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tarjeta {
	padding: 2rem 1.75rem;
	border-top: 4px solid var(--c-coral);
	background: #fff;
}

.tarjeta > .icono {
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 1.25rem;
}

.tarjeta__titulo {
	font-size: 1.15rem;
}

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

.contacto__tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contacto__tarjeta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	padding: 2rem;
	border: 1px solid var(--c-linea);
	border-top: 4px solid var(--c-marino);
}

.contacto__tarjeta > .icono {
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 0.9rem;
	color: var(--c-coral);
}

.contacto__titulo {
	margin: 0;
	color: var(--c-texto-suave);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.contacto__dato {
	color: var(--c-marino);
	font-family: var(--f-titulos);
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.35;
	text-decoration: none;
}

a.contacto__dato {
	text-decoration: underline;
	text-decoration-color: var(--c-coral);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

a.contacto__dato:hover {
	text-decoration-color: var(--c-marino);
}

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

/* ==========================================================================
   Blog
   ========================================================================== */

.blog__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 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);
	transition: border-color 0.2s;
}

.entrada-tarjeta:hover {
	border-color: var(--c-marino);
}

.entrada-tarjeta__imagen img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.entrada-tarjeta__texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.5rem 1.5rem 1.75rem;
}

.entrada-tarjeta__fecha {
	margin-bottom: 0.6rem;
	color: var(--c-texto-suave);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.entrada-tarjeta__titulo {
	font-size: 1.2rem;
	line-height: 1.3;
}

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

.entrada-tarjeta__titulo a:hover {
	text-decoration: underline;
	text-decoration-color: var(--c-coral);
	text-decoration-thickness: 2px;
}

.entrada-tarjeta__extracto {
	color: var(--c-texto-suave);
	font-size: 0.96rem;
}

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

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

.paginacion {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 3rem;
}

.paginacion .page-numbers,
.paginacion > a,
.paginacion > span {
	padding: 0.6rem 1rem;
	border: 1px solid var(--c-linea);
	font-family: var(--f-titulos);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.paginacion .current {
	border-color: var(--c-marino);
	background: var(--c-marino);
	color: var(--c-crema);
}

.paginacion a:hover {
	border-color: var(--c-marino);
}

.articulo__imagen {
	margin: 0 0 2.75rem;
}

.articulo__imagen img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ==========================================================================
   Menú multinivel (plugin Menú multinivel LGD): aspecto del panel de Servicios
   Categorías (2º nivel) en una columna oscura; servicios (3er nivel) en una zona
   clara. La categoría abierta toma el fondo de la zona clara, como una pestaña
   unida a ella. El plugin impone su maqueta y sus colores con !important, así que
   algunas reglas lo necesitan para ganarle. Anchos de columna y colores base:
   ajustes del plugin (Personalizar → Menús → Menú multinivel LGD).
   ========================================================================== */

.lgd2-header .nav-lgd.desktop-lgd li.has-drilldown-lgd > .drill-panel-lgd {
	border: 0 !important;
	border-top: 3px solid var(--c-coral) !important;
	border-radius: 0 !important;
	box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.4) !important;
	font-family: var(--f-titulos);
}

/* Columna de categorías. Sin relleno a la derecha: la categoría abierta llega hasta la zona clara. */
.lgd2-header .nav-lgd .drill-rail-lgd {
	padding: 1.25rem 0 1.25rem 1rem !important;
	border-right: 0 !important;
	background: var(--c-marino) !important;
}

.lgd2-header .nav-lgd .drill-search-lgd {
	margin: 0 1rem 0.85rem 0 !important;
	padding: 0 !important;
	background: var(--c-marino);
}

.lgd2-header .nav-lgd .drill-search-input-lgd {
	padding: 0.65rem 0.8rem !important;
	border: 1px solid rgb(251 235 169 / 0.25) !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-family: var(--f-texto);
	font-size: 0.85rem;
}

.lgd2-header .nav-lgd .drill-search-input-lgd:focus {
	border-color: var(--c-coral) !important;
}

.lgd2-header .nav-lgd .drill-rail-list-lgd {
	gap: 0.15rem;
}

.lgd2-header .nav-lgd .drill-rail-list-lgd > li > a {
	padding: 0.65rem 1.25rem 0.65rem 1rem !important;
	border-radius: 0;
	box-shadow: inset 3px 0 0 transparent;
	font-size: 0.92rem;
	font-weight: 600;
	white-space: normal;
	transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.lgd2-header .nav-lgd .drill-rail-list-lgd > li > a:hover,
.lgd2-header .nav-lgd .drill-rail-list-lgd > li > a:focus {
	background: rgb(251 235 169 / 0.08) !important;
	color: var(--c-crema) !important;
}

.lgd2-header .nav-lgd .drill-rail-list-lgd > li.drill-active-lgd > a {
	background: var(--c-crema-fondo) !important;
	box-shadow: inset 3px 0 0 var(--c-coral);
	color: var(--c-marino) !important;
}

/*
 * Zona de servicios: los colores del plugin se cambian con sus variables. En columna, para que el pie
 * con el CTA quede siempre al fondo del panel.
 */
.lgd2-header .nav-lgd .drill-stage-lgd {
	--lgdmm-ink: var(--c-marino);
	--lgdmm-accent: var(--c-marino);

	display: flex !important;
	flex-direction: column;
	padding: 1.25rem 1.5rem !important;
	background: var(--c-crema-fondo);
}

/* Título con la categoría abierta (lo añade assets/js/tema.js). */
.lgd2-header .nav-lgd .drill-titulo-beltra {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 0.85rem;
	padding: 0.35rem 0.85rem 1rem;
	border-bottom: 1px solid var(--c-linea);
	color: var(--c-marino);
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.lgd2-header .nav-lgd .drill-titulo-beltra::before {
	content: "";
	flex: none;
	width: 0.65rem;
	height: 0.65rem;
	background: var(--c-coral);
}

/*
 * Servicios siempre en dos columnas, por filas, para que todas las categorías ocupen el mismo ancho.
 * Sin altura máxima: los nombres largos ocupan dos líneas en lugar de cortarse.
 */
.lgd2-header .nav-lgd .drill-sub-lgd {
	max-height: none !important;
	grid-template-rows: none !important;
	grid-template-columns: repeat(2, var(--lgdmm-col-w, 280px));
	grid-auto-flow: row;
	gap: 0.15rem 1.5rem;
}

.lgd2-header .nav-lgd .drill-stage-lgd > .drill-sub-lgd > li > a {
	overflow: visible;
	padding: 0.65rem 0.85rem !important;
	border-radius: 0;
	box-shadow: inset 3px 0 0 transparent;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.35;
	white-space: normal;
	transition: background-color 0.15s, box-shadow 0.15s;
}

.lgd2-header .nav-lgd .drill-stage-lgd > .drill-sub-lgd > li > a:hover,
.lgd2-header .nav-lgd .drill-stage-lgd > .drill-sub-lgd > li > a:focus {
	background: var(--c-crema) !important;
	box-shadow: inset 3px 0 0 var(--c-coral);
}

/* Pie del panel con el CTA primario (lo añade assets/js/tema.js). */
.lgd2-header .nav-lgd .drill-pie-beltra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-top: auto;
	padding: 1.1rem 0.85rem 0.25rem;
	border-top: 1px solid var(--c-linea);
}

/* Separación mínima entre la lista y el pie cuando la lista es la más larga. */
.lgd2-header .nav-lgd .drill-sub-lgd.drill-active-lgd {
	margin-bottom: 1.25rem !important;
}

.lgd2-header .nav-lgd .drill-pie-beltra p {
	margin: 0;
	color: var(--c-marino);
	font-size: 0.92rem;
	font-weight: 700;
}

.lgd2-header .nav-lgd .drill-pie-beltra .boton {
	padding: 0.65rem 1.1rem;
	font-size: 0.82rem;
	font-weight: 700;
}

.lgd2-header .nav-lgd .drill-pie-beltra .boton:hover {
	color: var(--c-marino);
}

/* ==========================================================================
   Home
   ========================================================================== */

/* Portada: la foto ocupa todo el fondo y una capa marina, más densa a la izquierda, deja leer el texto. */
.portada {
	position: relative;
	display: flex;
	overflow: hidden;
	min-height: min(calc(100vh - var(--altura-cabecera)), 48rem);
	background: var(--c-marino);
	color: var(--c-texto-claro);
}

.portada__fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
}

.portada::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgb(4 2 26 / 0.94) 0%, rgb(4 2 26 / 0.82) 35%, rgb(4 2 26 / 0.4) 68%, rgb(4 2 26 / 0.2) 100%),
		linear-gradient(0deg, rgb(4 2 26 / 0.55) 0%, rgb(4 2 26 / 0) 35%);
}

.portada__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.5rem;
	padding-block: clamp(4rem, 9vw, 7rem);
}

.portada__texto {
	max-width: 40rem;
	align-self: center;
}

.portada__titulo {
	max-width: 17ch;
	margin-bottom: 1.5rem;
	color: #fff;
	font-size: clamp(2rem, 4.2vw, 3.5rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
}

/* El nombre de la empresa, en su propia línea. */
.portada__titulo span {
	display: block;
	color: var(--c-crema);
}

.portada__intro {
	max-width: 30rem;
	color: var(--c-texto-claro-suave);
	font-size: 1.2rem;
}

.portada .botones {
	margin-top: 2.25rem;
}

.portada__sello {
	display: flex;
	flex: none;
	align-items: center;
	gap: 1rem;
	max-width: 19rem;
	margin: 0;
	padding: 1.1rem 1.4rem;
	border-left: 6px solid var(--c-coral);
	background: var(--c-crema);
	color: var(--c-marino);
}

.portada__sello strong {
	font-family: var(--f-titulos);
	font-size: 2.8rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
}

.portada__sello span {
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Reformas integrales: dos imágenes superpuestas y las fases de la obra. */
.integrales__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(3rem, 7vw, 7rem);
	align-items: center;
}

.integrales__imagenes {
	position: relative;
	isolation: isolate;
	padding: 0 3rem 4rem 0;
}

.integrales__imagenes::before {
	content: "";
	position: absolute;
	top: -1.5rem;
	left: -1.5rem;
	z-index: -1;
	width: 45%;
	height: 55%;
	background: var(--c-crema);
}

.integrales__img {
	margin: 0;
}

.integrales__img img {
	width: 100%;
	object-fit: cover;
}

.integrales__img--grande img {
	aspect-ratio: 5 / 4;
}

.integrales__img--pequena {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40%;
	border: 8px solid #fff;
}

.integrales__img--pequena img {
	aspect-ratio: 4 / 5;
}

.integrales__intro {
	max-width: 30rem;
	color: var(--c-texto-suave);
	font-size: 1.15rem;
}

.fases {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.fases li {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.95rem 1rem;
	border-left: 3px solid var(--c-coral);
	background: var(--c-crema-fondo);
	font-family: var(--f-titulos);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
}

.fases .icono {
	width: 1.6rem;
	height: 1.6rem;
}

/* Banda en degradado del coral al dorado, los colores cálidos del cubo del logo. */
.banda {
	position: relative;
	overflow: hidden;
	background: linear-gradient(115deg, var(--c-coral) 0%, var(--c-oro) 100%);
	color: var(--c-marino);
}

/* La misma retícula isométrica de las zonas oscuras, aquí en marino muy suave. */
.banda::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(30deg, rgb(4 2 26 / 0.07) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(150deg, rgb(4 2 26 / 0.07) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(90deg, rgb(4 2 26 / 0.05) 0 1px, transparent 1px 111px);
	-webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 80%);
	mask-image: linear-gradient(100deg, transparent 20%, #000 80%);
	pointer-events: none;
}

.banda__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	padding-block: clamp(4.5rem, 9vw, 7rem);
}

.banda__texto {
	max-width: 18ch;
	margin: 0;
	color: var(--c-marino);
	font-family: var(--f-titulos);
	font-size: clamp(2rem, 4.5vw, 3.6rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

/* Subrayado ancho en crema, como un trazo de rotulador. */
.banda__texto span {
	background: linear-gradient(transparent 62%, rgb(251 235 169 / 0.75) 62%);
}

/* Botón marino, para fondos de color. */
.boton--marino {
	border-color: var(--c-marino);
	background: var(--c-marino);
	color: var(--c-crema);
}

.boton--marino:hover {
	border-color: var(--c-crema);
	background: var(--c-crema);
	color: var(--c-marino);
}

/* Por qué elegirnos: imagen y cuatro motivos. */
.motivos-home__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(3rem, 7vw, 6rem);
	align-items: center;
}

.motivos-home__imagen img {
	aspect-ratio: 4 / 5;
}

.motivos-home__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.25rem 2rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.motivos-home__lista li {
	padding-top: 1.25rem;
	border-top: 1px solid var(--c-linea-oscura);
}

.motivos-home__lista h3 {
	margin-bottom: 0.35rem;
	font-size: 1.1rem;
}

.motivos-home__lista p:last-child {
	margin: 0;
	color: var(--c-texto-claro-suave);
	font-size: 0.95rem;
}

.motivos-home__cifra {
	margin-bottom: 0.9rem;
	color: var(--c-oro);
	font-family: var(--f-titulos);
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.motivos-home__icono {
	margin-bottom: 0.9rem;
	color: var(--c-coral);
}

.motivos-home__icono .icono {
	width: 2.3rem;
	height: 2.3rem;
}

/* Cuatro pasos unidos por una línea. */
.pasos-home {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pasos-home li {
	position: relative;
	text-align: center;
}

/*
 * Línea discontinua de cada número al siguiente: del borde derecho del número (centro + 2.25rem) al
 * borde izquierdo del número siguiente (una columna y un hueco de 2rem más allá, menos 2.25rem).
 */
.pasos-home li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 2.25rem;
	right: calc(-50% + 0.25rem);
	left: calc(50% + 2.25rem);
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--c-coral) 0 10px, transparent 10px 18px);
}

.pasos-home__numero {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 auto 1.5rem;
	background: var(--c-marino);
	color: var(--c-crema);
	font-family: var(--f-titulos);
	font-size: 1.4rem;
	font-weight: 800;
}

.pasos-home li:nth-child(even) .pasos-home__numero {
	background: var(--c-coral);
	color: var(--c-marino);
}

.pasos-home h3 {
	margin-bottom: 0.35rem;
	font-size: 1.12rem;
}

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

/* ==========================================================================
   Pantallas medianas y móviles
   ========================================================================== */

@media (max-width: 74.99em) {
	.motivos__lista,
	.pasos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 61.99em) {
	.hero__inner,
	.dos-columnas,
	.zonas__inner,
	.texto-seo__inner,
	.faq__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero__imagen {
		max-width: 40rem;
	}

	.faq__cabecera,
	.texto-seo__lateral {
		position: static;
	}

	.texto-seo__lateral {
		max-width: 32rem;
	}

	.texto-seo__lateral .botones {
		flex-direction: row;
	}

	.dos-columnas--imagen-derecha .dos-columnas__imagen,
	.dos-columnas--imagen-izquierda .dos-columnas__imagen {
		order: 2;
	}

	.integrales__inner,
	.motivos-home__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En pantallas estrechas el texto ocupa casi todo el ancho: capa marina más uniforme. */
	.portada::after {
		background: linear-gradient(180deg, rgb(4 2 26 / 0.8) 0%, rgb(4 2 26 / 0.72) 55%, rgb(4 2 26 / 0.92) 100%);
	}

	.portada__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.portada__texto {
		align-self: auto;
	}

	.motivos-home__imagen {
		max-width: 28rem;
	}

	.pasos-home {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pasos-home li::after {
		display: none;
	}
}

@media (max-width: 40em) {
	body {
		font-size: 1rem;
	}

	.botones .boton {
		flex: 1 1 100%;
	}

	.lista-check,
	.motivos__lista,
	.pasos,
	.fases,
	.motivos-home__lista,
	.pasos-home {
		grid-template-columns: minmax(0, 1fr);
	}

	.integrales__imagenes {
		padding: 0 1.5rem 3rem 0;
	}

	.portada__sello strong {
		font-size: 2.2rem;
	}

	.marco {
		margin: 0 0.75rem 0.75rem 0;
	}

	.marco::before {
		inset: 0.75rem -0.75rem -0.75rem 0.75rem;
	}

	.datos__item {
		padding-inline: 0;
		border-top: 1px solid rgb(4 2 26 / 0.15);
		border-left: 0;
	}

	.datos__item:first-child {
		border-top: 0;
	}

	.motivos__item {
		padding: 1.75rem 1.5rem;
	}

	.faq__respuesta {
		padding-right: 0;
	}

	.caja-cta {
		padding: 1.5rem;
	}

	.texto-seo__lateral .botones {
		flex-direction: column;
	}
}