/*
Theme Name: Mudanzas Orlando
Description: Tema hijo de LGD2 Theme para Mudanzas Orlando: plantillas de la home, Sobre nosotros, Contacto, servicios, ciudades y zonas y rutas nacionales e internacionales.
Template: lgd2-theme
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: mudanzas-orlando
*/

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

:root {
	--tinta: #1b1814;
	--texto: #4a433b;
	--texto-suave: #5e554b;
	--acento: #b3321f;
	--acento-oscuro: #8f2716;
	--crema: #f6f1e7;
	--beige: #f4eadb;
	--arena: #e9dcc8;
	--tostado: #d2a877;
	--piedra: #c9c3ba;
	--linea: #e6dccb;
	--linea-suave: #efe6d8;
	--linea-oscura: #3a342d;
	--fondo-suave: var(--crema);

	--fuente-titulos: "Big Shoulders", "Arial Narrow", sans-serif;
	--fuente-texto: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--fuente-logo: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

	--ancho: 78rem;
	--margen: clamp(1.25rem, 4vw, 2rem);
	--seccion: clamp(4rem, 8vw, 6.5rem);
	--radio: 12px;
	--sombra: 0 1px 2px rgb(27 24 20 / 0.04), 0 6px 18px rgb(27 24 20 / 0.05);
	--sombra-l: 0 2px 6px rgb(27 24 20 / 0.05), 0 18px 40px rgb(27 24 20 / 0.08);
}

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

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: #fff;
	color: var(--texto);
	font-family: var(--fuente-texto);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

img {
	height: auto;
}

/*
 * Estilos de elementos solo dentro del <main>: el CSS del hijo no tiene capa y, fuera de él,
 * pisaría el de la cabecera y el footer del padre (que está en @layer lgd2). Con :where()
 * no suman especificidad, así que cualquier clase de un componente manda sobre ellos.
 */
:where(.lgd2-main) :is(h1, h2, h3, h4) {
	margin: 0 0 0.6em;
	color: var(--tinta);
	font-family: var(--fuente-titulos);
	font-weight: 800;
	line-height: 1.02;
	text-transform: uppercase;
	text-wrap: balance;
}

:where(.lgd2-main) h1 {
	font-weight: 900;
}

/* Los H3 y H4, como en el diseño: en la letra del texto y sin mayúsculas. */
:where(.lgd2-main) :is(h3, h4) {
	font-family: var(--fuente-texto);
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
}

:where(.lgd2-main) p {
	margin: 0 0 1.1em;
}

:where(.lgd2-main) a {
	color: var(--acento);
	text-underline-offset: 3px;
	transition: color 0.2s;
}

:where(.lgd2-main) a:hover {
	color: var(--acento-oscuro);
}

:where(.lgd2-main) strong {
	color: var(--tinta);
	font-weight: 600;
}

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

[id] {
	scroll-margin-top: 6.5rem;
}

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

/* ==========================================================================
   Estructura
   ========================================================================== */

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

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

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

.seccion--oscura {
	position: relative;
	overflow: hidden;
	background: var(--tinta);
	color: var(--piedra);
}

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

/* Antetítulo en mayúsculas, en el color de acento. */
.etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	color: var(--acento);
	font-family: var(--fuente-texto);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.etiqueta .icono {
	width: 1.05rem;
	height: 1.05rem;
}

/* Sobre fondo oscuro. */
.etiqueta--clara {
	color: var(--tostado);
}

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

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

.cabecera-seccion__titulo {
	margin-bottom: 0.4em;
	font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
}

.cabecera-seccion__texto {
	margin: 0;
	color: var(--texto);
	font-size: 1.125rem;
}

.seccion--oscura .cabecera-seccion__texto {
	color: var(--piedra);
}

/* ==========================================================================
   Botones y enlaces
   ========================================================================== */

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

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 3.5rem;
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: 8px;
	font-family: var(--fuente-texto);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.boton .icono {
	width: 1.125rem;
	height: 1.125rem;
	stroke-width: 2.25;
	transition: transform 0.2s;
}

.boton:hover .icono--flecha {
	transform: translateX(3px);
}

.boton--principal {
	background: var(--acento);
	color: #fff;
}

.boton--principal:hover {
	background: var(--acento-oscuro);
	color: #fff;
}

.boton--secundario {
	background: #fff;
	color: var(--tinta);
	box-shadow: inset 0 0 0 1.5px var(--tinta);
}

.boton--secundario:hover {
	background: var(--tinta);
	color: #fff;
}

/* Sobre un fondo de color (la llamada a la acción del final). */
.botones--oscuro .boton--principal {
	background: #fff;
	color: var(--tinta);
}

.botones--oscuro .boton--principal:hover {
	background: var(--crema);
	color: var(--tinta);
}

.botones--oscuro .boton--secundario {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 2px #fff;
}

.botones--oscuro .boton--secundario:hover {
	background: #fff;
	color: var(--tinta);
}

.enlace-flecha {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2rem;
	padding-bottom: 0.3rem;
	border-bottom: 2px solid var(--acento);
	color: var(--tinta);
	font-family: var(--fuente-texto);
	font-weight: 600;
	text-decoration: none;
}

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

.enlace-flecha:hover {
	color: var(--acento);
}

.enlace-flecha:hover .icono {
	transform: translateX(3px);
}

/* Nota debajo de las imágenes hechas con IA (mo_nota_ia()). */
.nota-ia {
	margin-top: 0.75rem;
	color: var(--texto-suave);
	font-size: 0.75rem;
	line-height: 1.4;
}

.nota-ia--clara {
	color: rgb(255 255 255 / 0.6);
}

/* ==========================================================================
   Listas
   ========================================================================== */

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

.lista-check li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
}

.lista-check .icono {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.2rem;
	color: var(--acento);
	stroke-width: 3;
}

.lista-check--hero {
	margin-top: 2.25rem;
	color: var(--tinta);
	font-size: 0.95rem;
	font-weight: 500;
}

/* Sin una palabra sola en la última línea (el texto del seguro es largo). */
.lista-check--hero span {
	text-wrap: pretty;
}

/*
 * Dos columnas de dos (los dos primeros a la izquierda). La derecha es algo más ancha para que el texto
 * del seguro no pase de dos líneas. En móviles, una sola columna.
 */
@media (min-width: 36em) {
	.lista-check--columnas {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		grid-template-rows: repeat(2, auto);
		grid-auto-flow: column;
		gap: 0.75rem 1.25rem;
		font-size: 0.9rem;
	}
}

.lista-check--ficha {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linea-suave);
	color: var(--tinta);
	font-weight: 500;
}

.lista-enlaces {
	display: grid;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lista-enlaces a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.375rem 0;
	color: var(--tinta);
	font-weight: 500;
	text-decoration: none;
}

.lista-enlaces .icono {
	width: 0.875rem;
	height: 0.875rem;
	color: var(--acento);
	stroke-width: 2.5;
	transition: transform 0.2s;
}

.lista-enlaces a:hover {
	color: var(--acento);
}

.lista-enlaces a:hover .icono {
	transform: translateX(3px);
}

.lista-enlaces--clara a {
	color: rgb(255 255 255 / 0.86);
}

.lista-enlaces--clara a:hover {
	color: #fff;
}

.lista-enlaces--clara .icono {
	color: var(--tostado);
}

.lista-enlaces--dos {
	display: block;
	columns: 2 11rem;
	column-gap: 1.5rem;
}

.lista-enlaces--dos li {
	break-inside: avoid;
}

.lista-enlaces--columnas {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0.75rem;
}

.lista-enlaces--columnas a {
	height: 100%;
	padding: 0.875rem 1.125rem;
	border: 1px solid var(--linea);
	border-radius: 10px;
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.lista-enlaces--columnas a:hover {
	border-color: var(--acento);
	box-shadow: var(--sombra);
}

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

.lgd2-header {
	--lgd2-header-bg: #fff;
	--lgd2-submenu-offset: 1.35rem;

	border-bottom: 1px solid var(--linea);
	color: var(--tinta);
	font-family: var(--fuente-texto);
	font-size: 0.94rem;
	font-weight: 500;
}

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

/*
 * Sin logo subido, el nombre de la web hace de logotipo, con la marca del tema delante.
 * Conserva su letra (Manrope); solo cambian sus colores.
 */
.lgd2-header__site-title,
.lgd2-footer__site-title {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--fuente-logo);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.lgd2-header__site-title::before,
.lgd2-footer__site-title::before {
	content: "";
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	background: url("assets/img/logo-marca.svg") center / contain no-repeat;
}

.lgd2-header .lgd2-header__site-title {
	color: var(--tinta);
}

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

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

.lgd2-nav__list a {
	transition: color 0.2s;
}

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

.lgd2-nav__list > li > a[href="#"] {
	cursor: default;
}

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

.lgd2-nav__submenu-toggle {
	width: 1.5rem;
	color: var(--texto-suave);
}

.lgd2-nav .sub-menu a {
	color: var(--texto);
	font-family: var(--fuente-texto);
	font-weight: 500;
}

.lgd2-nav .sub-menu a:hover {
	color: var(--tinta);
}

.lgd2-nav .sub-menu .menu-destacado > a {
	color: var(--acento);
	font-weight: 600;
}

/*
 * En la home, los elementos del menú que enlazan a ella ("Toda España"…) son "actuales":
 * sin esto, su desplegable se marcaría como sección activa y ellos saldrían resaltados.
 */
.home .lgd2-nav__list > .current-menu-ancestor > a {
	color: inherit;
	font-weight: inherit;
}

.home .lgd2-nav__list > .current-menu-ancestor > a:hover {
	color: var(--acento);
}

.home .lgd2-nav .sub-menu .menu-item-home:not(.menu-destacado) > a {
	color: var(--texto);
	font-weight: 500;
}

.home .lgd2-nav .sub-menu .menu-item-home:not(.menu-destacado) > a:hover {
	color: var(--tinta);
}

.lgd2-header .lgd2-header__cta {
	padding: 0.8rem 1.25rem;
	border-radius: 8px;
	background: var(--acento);
	font-weight: 600;
	transition: background-color 0.2s;
}

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

@media (min-width: 60em) {
	.lgd2-nav .sub-menu {
		min-width: 15rem;
		padding: 0.5rem;
		border: 1px solid var(--linea);
		border-radius: var(--radio);
		box-shadow: 0 22px 48px rgb(27 24 20 / 0.12);
	}

	.lgd2-nav .sub-menu a {
		padding: 0.5rem 0.75rem;
		border-radius: 6px;
		font-size: 0.9rem;
		line-height: 1.4;
	}

	.lgd2-nav .sub-menu a:hover {
		background: var(--crema);
	}

	.lgd2-nav .sub-menu .menu-destacado {
		margin-top: 0.25rem;
		padding-top: 0.25rem;
		border-top: 1px solid var(--linea-suave);
	}

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

/*
 * Hasta 80em no cabe el menú centrado en la pantalla (con las dos columnas laterales iguales):
 * se centra en el espacio que dejan el logo y el CTA, en una sola línea.
 */
@media (min-width: 60em) and (max-width: 79.99em) {
	.lgd2-header--menu-centrado .lgd2-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.lgd2-header--menu-centrado .lgd2-nav {
		justify-self: center;
	}

	.lgd2-header {
		font-size: 0.9rem;
	}

	.lgd2-nav__list {
		flex-wrap: nowrap;
		column-gap: 1.1rem;
		white-space: nowrap;
	}

	.lgd2-nav__list > .menu-item-has-children {
		flex-wrap: nowrap;
	}

	.lgd2-nav__list > li > .lgd2-nav__submenu-toggle {
		width: 1.35rem;
	}

	.lgd2-header .lgd2-header__cta {
		padding-inline: 1.1rem;
	}
}

/* Portátiles pequeños: el menú completo no deja sitio al CTA, que vuelve a partir de 75em. */
@media (min-width: 60em) and (max-width: 74.99em) {
	.lgd2-header {
		font-size: 0.86rem;
	}

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

	.lgd2-header__site-title {
		gap: 0.6rem;
		font-size: 1.1rem;
	}

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

	.lgd2-header__ctas {
		display: none;
	}
}

@media (max-width: 59.99em) {
	.lgd2-header__menu {
		padding-bottom: 2rem;
		box-shadow: 0 30px 40px rgb(27 24 20 / 0.1);
	}

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

	.lgd2-nav .sub-menu a {
		font-size: 0.95rem;
	}

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

	.lgd2-header .lgd2-header__cta {
		flex: 1;
		padding-block: 0.95rem;
		text-align: center;
	}
}

@media (max-width: 30em) {
	.lgd2-header__site-title {
		gap: 0.6rem;
		font-size: 1.1rem;
	}

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

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

.lgd2-footer {
	background: var(--tinta);
	color: var(--piedra);
	font-size: 0.94rem;
}

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

.lgd2-footer__columnas {
	gap: 2.5rem 3rem;
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

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

.lgd2-footer__site-title::before {
	background-image: url("assets/img/logo-marca-clara.svg");
}

.lgd2-footer__texto {
	max-width: 21rem;
	margin-top: 1.5rem;
	color: var(--piedra);
	line-height: 1.6;
	opacity: 1;
}

.lgd2-footer__titulo {
	margin-bottom: 1.25rem;
	color: var(--tostado);
	font-family: var(--fuente-texto);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	opacity: 1;
}

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

.lgd2-footer__menu {
	gap: 0.55rem;
}

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

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

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

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

.lgd2-footer .lgd2-datos__valor a:hover {
	color: var(--tostado);
}

.lgd2-footer .lgd2-datos__etiqueta {
	color: var(--piedra);
	opacity: 1;
}

.lgd2-footer .lgd2-redes__link {
	width: 2.5rem;
	height: 2.5rem;
	border-color: rgb(255 255 255 / 0.22);
	color: #fff;
}

.lgd2-footer .lgd2-redes__link:hover {
	border-color: var(--tostado);
	background: var(--tostado);
	color: var(--tinta);
}

.lgd2-footer__legal {
	border-top-color: var(--linea-oscura);
	font-size: 0.84rem;
}

.lgd2-footer__copyright {
	color: var(--piedra);
	opacity: 1;
}

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

/* La columna de zonas es larga: a dos columnas. */
@media (min-width: 30em) {
	.lgd2-footer__col--ubicaciones .lgd2-footer__menu {
		display: block;
		columns: 2;
		column-gap: 1.5rem;
	}

	.lgd2-footer__col--ubicaciones .lgd2-footer__menu li {
		margin-bottom: 0.55rem;
		break-inside: avoid;
	}
}

/* ==========================================================================
   Hero de la home
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(7rem, 11vw, 9rem);
	background: var(--crema);
	color: var(--texto);
}

.hero__rejilla {
	display: grid;
	align-items: center;
	gap: 3.5rem;
}

/* El tamaño del H1 va en proporción al ancho de su columna, para que ocupe pocas líneas y la llene. */
.hero__texto {
	container-type: inline-size;
}

.hero__titulo {
	margin-bottom: 0.35em;
	font-size: clamp(2.75rem, 9.8cqi, 4.75rem);
	line-height: 1;
}

.hero__entradilla {
	max-width: 36rem;
	margin: 0;
	color: var(--texto);
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.1875rem);
	line-height: 1.6;
}

.hero__figura {
	width: min(100%, 29rem);
	margin: 0 auto;
}

.hero__media {
	position: relative;
}

/* Debajo del marco, que sobresale 1.5rem por abajo. */
.hero__figura .nota-ia {
	margin-top: 2.25rem;
}

.hero__media::before,
.hero-interior__foto::before {
	content: "";
	position: absolute;
	inset: 1.5rem -1.5rem -1.5rem 1.5rem;
	border: 1.5px solid var(--tostado);
	border-radius: var(--radio);
}

.hero__foto {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radio);
}

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

/* La columna de la foto mide lo que la foto y su marco (29rem + 1.5rem); el resto, para el texto. */
@media (min-width: 60em) {
	.hero__rejilla {
		grid-template-columns: minmax(0, 1fr) min(30.5rem, 42%);
		gap: 3rem;
	}

	.hero__figura {
		width: min(100% - 1.5rem, 29rem);
		margin-right: 1.5rem;
	}

	/*
	 * Debajo de la foto quedan el marco y la nota de IA: centrado con todo eso, el texto se ve bajo.
	 * Con este margen queda centrado con la foto.
	 */
	.hero__texto {
		margin-bottom: 3.5rem;
	}
}

/* Franja de confianza, montada sobre el final del hero. */
.confianza {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * clamp(4rem, 7vw, 5rem));
}

/*
 * Las líneas entre elementos son sombras de 1px a la derecha y abajo de cada uno: las del borde las recorta
 * la lista, y si la última fila queda incompleta, el hueco sigue siendo blanco.
 */
.confianza__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	background: #fff;
	list-style: none;
}

.confianza__item {
	padding: 1.875rem 1.75rem;
	box-shadow: 1px 0 0 var(--linea), 0 1px 0 var(--linea);
}

.confianza__icono {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 10px;
	background: var(--beige);
	color: var(--tinta);
}

.confianza__icono .icono {
	width: 1.625rem;
	height: 1.625rem;
}

.confianza__titulo {
	margin: 1.125rem 0 0.375rem;
	font-size: 1.125rem;
}

.confianza__texto {
	margin: 0;
	color: var(--texto);
	font-size: 0.94rem;
	line-height: 1.6;
}

/* ==========================================================================
   Tarjetas de servicios
   ========================================================================== */

.tarjetas-servicio {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tarjeta-servicio__enlace {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
	height: 100%;
	padding: 1.75rem 1.5rem;
	overflow: hidden;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	background: #fff;
	color: var(--texto);
	text-decoration: none;
	transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.tarjeta-servicio__enlace::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: var(--acento);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s;
}

.tarjeta-servicio__enlace:hover {
	box-shadow: var(--sombra-l);
	color: var(--texto);
	transform: translateY(-4px);
}

.tarjeta-servicio__enlace:hover::after {
	transform: scaleX(1);
}

.tarjeta-servicio__icono {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	flex: none;
	border-radius: 10px;
	background: var(--beige);
	color: var(--tinta);
	transition: background-color 0.25s, color 0.25s;
}

.tarjeta-servicio__icono .icono {
	width: 1.625rem;
	height: 1.625rem;
}

.tarjeta-servicio__enlace:hover .tarjeta-servicio__icono {
	background: var(--acento);
	color: #fff;
}

.tarjeta-servicio__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.tarjeta-servicio__titulo {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.tarjeta-servicio__texto {
	margin-bottom: 1.5rem;
	color: var(--texto);
	font-size: 0.97rem;
	line-height: 1.6;
}

.tarjeta-servicio__mas {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	color: var(--acento);
	font-family: var(--fuente-texto);
	font-size: 0.9rem;
	font-weight: 600;
}

.tarjeta-servicio__mas .icono {
	width: 1rem;
	height: 1rem;
	stroke-width: 2.25;
	transition: transform 0.2s;
}

.tarjeta-servicio__enlace:hover .tarjeta-servicio__mas .icono {
	transform: translateX(3px);
}

.tarjetas-servicio--compacta {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 0.875rem;
}

.tarjetas-servicio--compacta .tarjeta-servicio__enlace {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	padding: 1.125rem 1.25rem;
	border-radius: var(--radio);
}

.tarjetas-servicio--compacta .tarjeta-servicio__enlace:hover {
	transform: none;
}

.tarjetas-servicio--compacta .tarjeta-servicio__icono {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 10px;
}

.tarjetas-servicio--compacta .tarjeta-servicio__icono .icono {
	width: 1.3rem;
	height: 1.3rem;
}

.tarjetas-servicio--compacta .tarjeta-servicio__titulo {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
}

.tarjetas-servicio--compacta .tarjeta-servicio__mas {
	display: none;
}

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

.servicios-home {
	padding-top: clamp(4.5rem, 8vw, 6rem);
}

.presentacion__rejilla,
.historia__rejilla {
	display: grid;
	align-items: center;
	gap: 3.5rem;
}

.presentacion__foto {
	width: min(100%, 29rem);
	margin: 0 auto;
}

.presentacion__marco {
	position: relative;
	isolation: isolate;
}

.presentacion__marco::before {
	content: "";
	position: absolute;
	inset: -1.5rem 1.5rem 1.5rem -1.5rem;
	z-index: -1;
	border-radius: var(--radio);
	background: var(--arena);
}

.presentacion__marco img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radio);
}

.presentacion__titulo,
.historia__titulo,
.intro__titulo,
.zona__titulo,
.recorrido__titulo {
	font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
}

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

	.presentacion__foto {
		margin-left: 1.5rem;
	}
}

/* Cita de Orlando: centrada y sin adornos. La línea de abajo la separa del paso a paso, que también es blanco. */
.cita {
	border-bottom: 1px solid var(--linea);
}

.cita__figura {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
}

/* Girado: el icono son unas comillas de cierre y aquí abren la cita. */
.cita__icono {
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 auto 1.5rem;
	transform: rotate(180deg);
	color: var(--acento);
	fill: var(--acento);
	stroke-width: 1.25;
}

.cita__texto {
	margin: 0;
}

.cita__texto p {
	margin: 0;
	color: var(--tinta);
	font-family: var(--fuente-texto);
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
	font-weight: 500;
	line-height: 1.5;
	text-wrap: pretty;
}

.cita__autor {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	margin-top: 2rem;
}

.cita__autor::before {
	content: "";
	width: 2.5rem;
	height: 2px;
	margin-bottom: 1rem;
	background: var(--acento);
}

.cita__nombre {
	color: var(--tinta);
	font-family: var(--fuente-texto);
	font-weight: 600;
}

.cita__cargo {
	color: var(--texto-suave);
	font-size: 0.9rem;
}

/* Pasos numerados. */
.pasos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.paso {
	position: relative;
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	background: #fff;
	counter-increment: paso;
}

.paso::before {
	content: counter(paso, decimal-leading-zero);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1.25rem;
	border-radius: 50%;
	background: var(--acento);
	color: #fff;
	font-family: var(--fuente-titulos);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1;
}

.paso__titulo {
	margin-bottom: 0.5rem;
	font-size: 1.1875rem;
}

.paso__texto {
	margin: 0;
	color: var(--texto);
	font-size: 0.97rem;
}

/* Carrusel de trabajos (plugin Trabajos Realizados). */
.trabajos-home {
	--trabajos-radio: var(--radio);
	--trabajos-hueco: 1.25rem;
}

.trabajos-home .trabajos-carrusel__boton {
	width: 3rem;
	height: 3rem;
	background: var(--acento);
	box-shadow: 0 8px 20px rgb(27 24 20 / 0.2);
}

.trabajos-home .trabajos-carrusel__boton:hover,
.trabajos-home .trabajos-carrusel__boton:focus-visible {
	background: var(--acento-oscuro);
}

.trabajos-home .trabajos-galeria__pista {
	scrollbar-color: var(--acento) transparent;
}

/* Cobertura. */
.cobertura__columnas {
	display: grid;
	gap: 1.5rem;
}

.cobertura__columna {
	padding: 1.875rem;
	border: 1px solid rgb(255 255 255 / 0.12);
	border-radius: var(--radio);
	background: rgb(255 255 255 / 0.03);
}

.cobertura__titulo {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1.125rem;
	border-bottom: 1px solid rgb(255 255 255 / 0.12);
	font-size: 1.125rem;
}

.cobertura__titulo .icono {
	color: var(--tostado);
}

@media (min-width: 48em) {
	.cobertura__columnas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cobertura__columna--ancha {
		grid-column: 1 / -1;
	}
}

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

	.cobertura__columna--ancha {
		grid-column: auto;
	}
}

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

.hero-interior {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2rem, 4.5vw, 3rem) clamp(3.5rem, 7vw, 5.5rem);
	background: var(--crema);
	color: var(--texto);
}

.hero-interior__rejilla {
	display: grid;
	align-items: center;
	gap: 3rem;
}

.hero-interior__titulo {
	margin-bottom: 0.4em;
	font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4rem);
	line-height: 1;
}

.hero-interior__entradilla {
	max-width: 40rem;
	margin: 0;
	color: var(--texto);
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.6;
}

.hero-interior--compacto .hero-interior__titulo {
	max-width: 50rem;
}

.hero-interior__foto {
	position: relative;
	width: min(100%, 34rem);
	margin: 0 auto 1.5rem;
}

.hero-interior__foto img {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radio);
}

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

	.hero-interior__foto {
		margin-right: 1.5rem;
	}
}

.migas {
	margin-bottom: 2rem;
	font-size: 0.84rem;
}

.migas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	color: var(--texto-suave);
	list-style: none;
}

.migas__elemento:not(:last-child)::after {
	content: "/";
	margin-left: 0.5rem;
	color: var(--tostado);
}

.migas a {
	color: var(--texto);
	text-decoration: none;
}

.migas a:hover {
	color: var(--acento);
}

.migas [aria-current] {
	color: var(--tinta);
	font-weight: 500;
}

/* Tarjeta blanca de la cabecera de ciudades y rutas. */
.ficha {
	position: relative;
	width: min(100%, 27rem);
	padding: clamp(1.75rem, 4vw, 2.25rem);
	overflow: hidden;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	background: #fff;
	color: var(--texto);
}

.ficha::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 4px;
	background: var(--acento);
}

.ficha__marca {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 1.25rem;
	border-radius: 10px;
	background: var(--beige);
	color: var(--tinta);
}

.ficha__marca .icono {
	width: 1.625rem;
	height: 1.625rem;
}

.ficha__antetitulo {
	margin: 0;
	color: var(--acento);
	font-family: var(--fuente-texto);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ficha__titulo {
	margin: 0.35rem 0 0;
	color: var(--tinta);
	font-family: var(--fuente-titulos);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

@media (min-width: 60em) {
	.ficha {
		justify-self: end;
	}
}

/* Ruta de ida y vuelta. */
.trayecto {
	display: grid;
	grid-template-columns: auto minmax(3rem, 1fr) auto;
	align-items: start;
	gap: 0.75rem;
}

.trayecto__punto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	min-width: 5.5rem;
	text-align: center;
}

.trayecto__marca {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--acento);
	color: #fff;
}

.trayecto__ciudad {
	color: var(--tinta);
	font-family: var(--fuente-titulos);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.trayecto__linea {
	position: relative;
	height: 2px;
	margin-top: calc(1.5rem - 1px);
	background-image: linear-gradient(90deg, var(--tostado) 55%, transparent 0);
	background-size: 10px 2px;
}

.trayecto__camion {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1.5px solid var(--linea);
	border-radius: 50%;
	background: #fff;
	color: var(--acento);
	transform: translate(-50%, -50%);
}

.trayecto__camion .icono {
	width: 1.1rem;
	height: 1.1rem;
	stroke-width: 2.25;
}

/* ==========================================================================
   Secciones de servicios, ciudades y rutas
   ========================================================================== */

.intro__rejilla,
.zona__rejilla {
	display: grid;
	align-items: start;
	gap: 2.5rem;
}

.intro__rejilla--una,
.zona__rejilla--una {
	max-width: 52rem;
}

.intro__foto {
	margin: 0;
}

.intro__foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radio);
}

@media (min-width: 60em) {
	.intro__rejilla:not(.intro__rejilla--una),
	.zona__rejilla:not(.zona__rejilla--una) {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: 5rem;
	}

	.caja-lista {
		position: sticky;
		top: 7rem;
	}
}

.caja-lista {
	padding: clamp(1.75rem, 4vw, 2.25rem);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	background: var(--crema);
}

.caja-lista__icono {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 1.25rem;
	border: 1px solid var(--linea);
	border-radius: 10px;
	background: #fff;
	color: var(--tinta);
}

.caja-lista__icono .icono {
	width: 1.625rem;
	height: 1.625rem;
}

.caja-lista__titulo {
	margin: 0;
	font-size: 1.25rem;
}

.caja-lista .lista-check {
	margin-top: 1.375rem;
	color: var(--tinta);
	font-weight: 500;
}

.caja-lista--oscura {
	border-color: transparent;
	background: var(--tinta);
	color: rgb(255 255 255 / 0.82);
}

.caja-lista--oscura .caja-lista__icono {
	border-color: transparent;
	background: rgb(255 255 255 / 0.08);
	color: var(--tostado);
}

.caja-lista--oscura .caja-lista__titulo {
	color: #fff;
}

.caja-lista--oscura .lista-check {
	color: rgb(255 255 255 / 0.88);
}

.caja-lista--oscura .lista-check .icono {
	color: var(--tostado);
}

/* Ventajas y valores. */
.ventajas__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ventaja {
	padding: clamp(1.75rem, 3vw, 2.25rem);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	background: #fff;
}

.ventaja__icono {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 1.5rem;
	border-radius: 10px;
	background: var(--beige);
	color: var(--tinta);
}

.ventaja__icono .icono {
	width: 1.625rem;
	height: 1.625rem;
}

.ventaja__titulo {
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
}

.ventaja__texto {
	margin: 0;
	color: var(--texto);
	font-size: 0.97rem;
}

/* Recorrido de las rutas. */
.recorrido__rejilla {
	display: grid;
	gap: 2.5rem;
}

.recorrido__texto {
	margin: 0;
	color: var(--texto);
	font-size: 1.125rem;
}

@media (min-width: 60em) {
	.recorrido__rejilla {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		align-items: start;
		gap: 5rem;
	}

	.recorrido__cabecera {
		position: sticky;
		top: 7rem;
	}
}

.linea-tiempo {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.linea-tiempo__paso {
	position: relative;
	padding: 0 0 2.25rem 4.25rem;
	counter-increment: paso;
}

.linea-tiempo__paso::before {
	content: counter(paso);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--acento);
	box-shadow: 0 0 0 6px var(--fondo-suave);
	color: #fff;
	font-family: var(--fuente-titulos);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1;
}

.linea-tiempo__paso::after {
	content: "";
	position: absolute;
	top: 2.75rem;
	bottom: 0;
	left: calc(1.375rem - 1px);
	width: 2px;
	background: repeating-linear-gradient(to bottom, var(--tostado) 0 6px, transparent 6px 12px);
}

.linea-tiempo__paso:last-child {
	padding-bottom: 0;
}

.linea-tiempo__paso:last-child::after {
	display: none;
}

.linea-tiempo__titulo {
	margin: 0.5rem 0 0.375rem;
	font-size: 1.1875rem;
}

.linea-tiempo__texto {
	margin: 0;
	color: var(--texto);
}

/* ==========================================================================
   Texto largo (texto SEO, introducciones y páginas genéricas)
   ========================================================================== */

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

.prosa h2 {
	margin: 2.75rem 0 1rem;
	font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
}

.prosa h3 {
	margin: 2rem 0 0.625rem;
	color: var(--tinta);
	font-size: 1.25rem;
}

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

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

.prosa li {
	margin-bottom: 0.4em;
}

.prosa li::marker {
	color: var(--acento);
}

.texto-seo__contenido {
	max-width: 50rem;
	margin-inline: auto;
}

.texto-seo h2::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin-bottom: 1.25rem;
	background: var(--acento);
}

.prosa--pagina {
	max-width: 50rem;
}

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

.cta-final {
	padding-top: clamp(3rem, 6vw, 5rem);
	background: linear-gradient(to bottom, transparent 55%, var(--tinta) 55%);
}

.cta-final__caja {
	position: relative;
	display: grid;
	align-items: center;
	gap: 2rem;
	padding: clamp(2.25rem, 5vw, 3.5rem);
	overflow: hidden;
	border-radius: var(--radio);
	background: var(--acento);
	color: #fff;
}

.cta-final__titulo {
	margin-bottom: 0.4rem;
	color: #fff;
	font-size: clamp(2rem, 1.3rem + 1.8vw, 3rem);
	font-weight: 900;
}

.cta-final__parrafo {
	max-width: 38rem;
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.6;
}

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

@media (min-width: 60em) {
	.cta-final__caja {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 3rem;
	}
}

/* ==========================================================================
   Sobre nosotros
   ========================================================================== */

.historia__fotos {
	position: relative;
	width: min(100%, 32rem);
	margin-inline: auto;
	padding: 0 3rem 3rem 0;
}

.historia__foto {
	margin: 0;
}

.historia__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radio);
}

.historia__foto--principal {
	position: relative;
}

/*
 * La nota va en el hueco de 3rem que queda debajo de la foto principal, a la izquierda de la secundaria
 * (que ocupa el 46% de la derecha): así no mueve la composición ni queda tapada.
 */
.historia__foto--principal .nota-ia {
	position: absolute;
	top: 100%;
	left: 0;
	max-width: calc(54% + 0.75rem);
}

.historia__foto--secundaria {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 46%;
	padding: 6px;
	border: 1px solid var(--linea);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--sombra);
}

.historia__foto--secundaria img {
	border-radius: 10px;
}

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

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

.alcance__item {
	padding: 2rem;
	border: 1px solid rgb(255 255 255 / 0.12);
	border-radius: var(--radio);
	background: rgb(255 255 255 / 0.03);
}

.alcance__icono {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 10px;
	background: rgb(255 255 255 / 0.08);
	color: var(--tostado);
}

.alcance__icono .icono {
	width: 1.625rem;
	height: 1.625rem;
}

.alcance__titulo {
	margin: 1.375rem 0 0.5rem;
	font-size: 1.25rem;
}

.alcance__texto {
	margin: 0;
}

/* ==========================================================================
   Contacto
   ========================================================================== */

.contacto__rejilla {
	display: grid;
	align-items: start;
	gap: 2rem;
}

@media (min-width: 60em) {
	.contacto__rejilla:not(.contacto__rejilla--una) {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		gap: 3rem;
	}

	.contacto__datos {
		position: sticky;
		top: 7rem;
	}
}

.contacto__formulario {
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	background: #fff;
}

.contacto__titulo {
	margin-bottom: 0.4rem;
	font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
}

.contacto__texto {
	margin-bottom: 2rem;
	color: var(--texto);
}

.contacto__datos {
	padding: clamp(1.75rem, 4vw, 2.5rem);
	border-radius: var(--radio);
	background: var(--tinta);
	color: var(--piedra);
}

/* Pantallas medianas: la caja de datos se ensancha un poco para que Google Maps y WhatsApp quepan en una fila. */
@media (min-width: 60em) and (max-width: 74.99em) {
	.contacto__rejilla:not(.contacto__rejilla--una) {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}

	.contacto__datos {
		padding-inline: 1.75rem;
	}
}

.contacto__datos-titulo {
	margin-bottom: 1.75rem;
	color: #fff;
	font-size: 2rem;
}

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

.datos__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.datos__icono {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border-radius: 10px;
	background: rgb(255 255 255 / 0.08);
	color: var(--tostado);
}

.datos__cuerpo {
	min-width: 0;
}

.datos__etiqueta {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--tostado);
	font-family: var(--fuente-texto);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.datos__valor {
	display: block;
	color: #fff;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.datos__valor a {
	color: #fff;
	text-decoration: none;
}

.datos__valor a:hover {
	color: var(--tostado);
}

/* Google Maps y WhatsApp: en la misma fila; uno debajo del otro solo si no caben. */
.contacto__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 2rem;
}

.contacto__boton {
	flex: 1 1 0;
	min-width: max-content;
	gap: 0.5rem;
	padding-inline: 0.75rem;
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.35);
	color: #fff;
	white-space: nowrap;
}

.contacto__boton:hover {
	background: #fff;
	box-shadow: inset 0 0 0 1.5px #fff;
	color: var(--tinta);
}

.contacto-mapa {
	padding-bottom: var(--seccion);
}

.contacto-mapa .lgd2-mapa {
	aspect-ratio: 16 / 7;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
}

@media (max-width: 47.99em) {
	.contacto-mapa .lgd2-mapa {
		aspect-ratio: 4 / 3;
	}
}

/* Formulario de Fluent Forms. */
.contacto__formulario .fluentform .ff-el-group {
	margin-bottom: 1.25rem;
}

.contacto__formulario .fluentform .ff-el-input--label {
	margin-bottom: 0.4rem;
}

.contacto__formulario .fluentform .ff-el-input--label label {
	color: var(--tinta);
	font-family: var(--fuente-texto);
	font-size: 0.9375rem;
	font-weight: 600;
}

.contacto__formulario .fluentform .ff-el-form-control {
	min-height: 3.25rem;
	padding: 0.8rem 1rem;
	border: 1px solid #d6c9b4;
	border-radius: 8px;
	background: #fff;
	color: var(--tinta);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.contacto__formulario .fluentform .ff-el-form-control:focus {
	border-color: var(--acento);
	background: #fff;
	box-shadow: 0 0 0 4px rgb(179 50 31 / 0.12);
	outline: none;
}

.contacto__formulario .fluentform textarea.ff-el-form-control {
	min-height: 9.5rem;
}

.contacto__formulario .fluentform .ff-btn-submit,
.contacto__formulario .fluentform .ff-btn-submit:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.5rem;
	padding: 0.875rem 2rem;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--acento) !important;
	box-shadow: none;
	color: #fff !important;
	font-family: var(--fuente-texto);
	font-size: 1rem;
	font-weight: 600;
	opacity: 1;
	transition: background-color 0.2s;
}

.contacto__formulario .fluentform .ff-btn-submit:hover {
	background: var(--acento-oscuro) !important;
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

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

	*,
	*::before,
	*::after {
		transition: none !important;
	}
}