/**
 * Componentes de interfaz: botones, navegación, buscador, cesta lateral,
 * distintivos y formularios.
 */

/* --------------------------------------------------------------- Botones */

.boton {
	--fondo-boton: var(--marca);
	--texto-boton: var(--blanco);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-3);
	padding: 1rem 2rem;
	background: var(--fondo-boton);
	color: var(--texto-boton);
	font-family: var(--fuente-texto);
	font-size: var(--t-s);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--fondo-boton);
	border-radius: var(--radio);
	line-height: 1.2;
	text-align: center;
	transition: background var(--transicion), border-color var(--transicion),
		color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}

.boton:hover {
	--fondo-boton: var(--marca-oscura);

	color: var(--blanco);
	transform: translateY(-2px);
	box-shadow: var(--sombra-m);
}

.boton:active {
	transform: translateY(0);
	box-shadow: none;
}

.boton[disabled],
.boton.esta-desactivado {
	opacity: 0.5;
	pointer-events: none;
}

.boton--grande {
	padding: 1.25rem 2.5rem;
	font-size: var(--t-base);
}

.boton--bloque {
	width: 100%;
}

.boton--fantasma {
	--fondo-boton: transparent;
	--texto-boton: var(--tinta);

	border-color: var(--borde-fuerte);
}

.boton--fantasma:hover {
	--fondo-boton: var(--tinta);
	--texto-boton: var(--blanco);

	border-color: var(--tinta);
}

.boton--tinta {
	--fondo-boton: var(--tinta);
}

.boton--tinta:hover {
	--fondo-boton: #000;
}

.boton--claro {
	--fondo-boton: var(--blanco);
	--texto-boton: var(--tinta);

	border-color: var(--blanco);
}

.boton--claro:hover {
	--fondo-boton: var(--oro);
	--texto-boton: var(--tinta);

	border-color: var(--oro);
	color: var(--tinta);
}

/* Enlace con subrayado que crece: se usa en «ver todo». */
.enlace-flecha {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-s);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tinta);
	padding-bottom: 3px;
	border-bottom: 1px solid var(--borde-fuerte);
	transition: border-color var(--transicion), gap var(--transicion);
}

.enlace-flecha:hover {
	border-bottom-color: var(--marca);
	gap: var(--e-3);
}

.enlace-flecha svg {
	width: 1em;
	height: 1em;
}

/* ------------------------------------------------------------ Navegación */

.nav {
	display: flex;
}

.nav ul {
	display: flex;
	align-items: center;
	gap: var(--e-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav li {
	margin: 0;
	position: relative;
}

.nav a {
	display: block;
	padding: var(--e-2) 0;
	font-size: var(--t-s);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--tinta);
	text-decoration: none;
	position: relative;
}

/* Subrayado que crece desde el centro */
.nav a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--marca);
	transform: translateX(-50%);
	transition: width var(--transicion);
}

.nav a:hover::after,
.nav .current-menu-item > a::after,
.nav .current_page_item > a::after {
	width: 100%;
}

/* Submenús */
.nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 230px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	background: var(--blanco);
	border: 1px solid var(--borde);
	border-radius: var(--radio-m);
	box-shadow: var(--sombra-m);
	padding: var(--e-2);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
	z-index: 20;
}

.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.nav .sub-menu a {
	padding: var(--e-3) var(--e-4);
	border-radius: var(--radio);
	font-weight: 500;
	white-space: nowrap;
}

.nav .sub-menu a::after {
	display: none;
}

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

@media (max-width: 1024px) {
	.cabecera__nav {
		display: none;
	}
}

/* Botones circulares de la cabecera */
.icono-boton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	color: var(--tinta);
	background: transparent;
	transition: background var(--transicion), color var(--transicion);
}

.icono-boton:hover {
	background: var(--crema);
	color: var(--marca-oscura);
}

.icono-boton svg {
	width: 22px;
	height: 22px;
	stroke-width: 1.6;
}

/* En móvil la barra se aprieta: iconos algo menores, y la cuenta se consulta
   desde el menú lateral (que ya lleva su botón «Mi cuenta»). */
@media (max-width: 1024px) {
	/* La navegación central se oculta en móvil; sin ella hay que empujar los
	   iconos hasta el borde derecho. */
	.cabecera__acciones {
		margin-left: auto;
	}
}

@media (max-width: 560px) {
	.icono-boton {
		width: 40px;
		height: 40px;
	}

	.cabecera__acciones {
		gap: 0;
	}

	.cabecera__acciones .icono-boton[href*="my-account"],
	.cabecera__acciones .icono-boton[href*="mi-cuenta"] {
		display: none;
	}
}

.icono-boton__contador {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--marca);
	color: var(--blanco);
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.icono-boton__contador:empty,
.icono-boton__contador[data-cantidad="0"] {
	display: none;
}

/* Botón hamburguesa, solo en móvil */
.abrir-menu {
	display: none;
}

@media (max-width: 1024px) {
	.abrir-menu {
		display: inline-flex;
	}
}

/* ------------------------------------------------- Menú lateral en móvil */

.panel {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	pointer-events: none;
}

.panel.esta-abierto {
	visibility: visible;
	pointer-events: auto;
}

.panel__velo {
	position: absolute;
	inset: 0;
	background: rgb(29 23 16 / 45%);
	opacity: 0;
	transition: opacity var(--transicion);
	backdrop-filter: blur(2px);
}

.panel.esta-abierto .panel__velo {
	opacity: 1;
}

.panel__caja {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(440px, 100%);
	background: var(--blanco);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--transicion);
	border-left: 1px solid var(--borde);
}

.panel--izquierda .panel__caja {
	right: auto;
	left: 0;
	transform: translateX(-100%);
}

.panel.esta-abierto .panel__caja {
	transform: translateX(0);
}

.panel__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	padding: var(--e-5) var(--e-5) var(--e-4);
	border-bottom: 1px solid var(--borde);
}

.panel__titulo {
	font-family: var(--fuente-titulo);
	font-size: var(--t-l);
	margin: 0;
}

.panel__cuerpo {
	flex: 1;
	overflow-y: auto;
	padding: var(--e-5);
}

.panel__pie {
	border-top: 1px solid var(--borde);
	padding: var(--e-5);
	background: var(--crema);
}

/* Menú vertical del panel */
.menu-movil {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-movil li {
	margin: 0;
	border-bottom: 1px solid var(--borde);
}

.menu-movil a {
	display: block;
	padding: var(--e-4) 0;
	font-family: var(--fuente-titulo);
	font-size: var(--t-l);
	color: var(--tinta);
	text-decoration: none;
}

.menu-movil .sub-menu {
	list-style: none;
	padding: 0 0 var(--e-3) var(--e-4);
	margin: 0;
}

.menu-movil .sub-menu li {
	border: 0;
}

.menu-movil .sub-menu a {
	font-family: var(--fuente-texto);
	font-size: var(--t-base);
	padding: var(--e-2) 0;
	color: var(--tinta-media);
}

/* ------------------------------------------------------ Buscador visual */

.buscador {
	position: fixed;
	inset: 0;
	z-index: 300;
	visibility: hidden;
	pointer-events: none;
}

.buscador.esta-abierto {
	visibility: visible;
	pointer-events: auto;
}

.buscador__velo {
	position: absolute;
	inset: 0;
	background: rgb(29 23 16 / 55%);
	opacity: 0;
	transition: opacity var(--transicion);
	backdrop-filter: blur(4px);
}

.buscador.esta-abierto .buscador__velo {
	opacity: 1;
}

.buscador__caja {
	position: relative;
	background: var(--blanco);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	transform: translateY(-24px);
	opacity: 0;
	transition: transform var(--transicion), opacity var(--transicion);
	border-bottom: 1px solid var(--borde);
}

.buscador.esta-abierto .buscador__caja {
	transform: translateY(0);
	opacity: 1;
}

.buscador__campo {
	display: flex;
	align-items: center;
	gap: var(--e-4);
	padding: var(--e-5) var(--marco);
	border-bottom: 1px solid var(--borde);
}

.buscador__campo svg {
	width: 28px;
	height: 28px;
	color: var(--marca);
	flex-shrink: 0;
}

.buscador__campo input {
	flex: 1;
	border: 0;
	background: none;
	font-family: var(--fuente-titulo);
	font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	line-height: 1.2;
	padding: var(--e-2) 0;
	min-width: 0;
}

.buscador__campo input::placeholder {
	color: #c3b9ab;
}

.buscador__campo input:focus {
	outline: none;
}

.buscador__cuerpo {
	overflow-y: auto;
	padding: var(--e-5) var(--marco) var(--e-7);
}

.buscador__seccion + .buscador__seccion {
	margin-top: var(--e-6);
}

/* Atajos por categoría, con miniatura: la parte «visual» del buscador */
.buscador__atajos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.buscador__atajo {
	display: inline-flex;
	align-items: center;
	gap: var(--e-3);
	padding: var(--e-2) var(--e-4) var(--e-2) var(--e-2);
	border: 1px solid var(--borde);
	border-radius: 999px;
	text-decoration: none;
	color: var(--tinta);
	font-size: var(--t-s);
	font-weight: 600;
	transition: border-color var(--transicion), background var(--transicion);
}

.buscador__atajo:hover {
	border-color: var(--marca);
	background: var(--crema);
}

.buscador__atajo img,
.buscador__atajo span.sin-foto {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--crema-honda);
	flex-shrink: 0;
}

/* Resultados en rejilla, con foto grande */
.buscador__resultados {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--e-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.buscador__resultado {
	margin: 0;
}

.buscador__resultado a {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Los tres son <span> dentro del enlace: sin display:block el nombre y el
   precio salen pegados en la misma línea. */
.buscador__resultado-nombre,
.buscador__resultado-precio {
	display: block;
}

.buscador__resultado-foto {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radio-m);
	background: var(--crema);
	margin-bottom: var(--e-3);
}

.buscador__resultado-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.buscador__resultado a:hover .buscador__resultado-foto img {
	transform: scale(1.06);
}

.buscador__resultado-nombre {
	font-family: var(--fuente-titulo);
	font-size: var(--t-m);
	line-height: 1.25;
	margin-bottom: var(--e-1);
}

.buscador__resultado-precio {
	font-size: var(--t-s);
	color: var(--marca-oscura);
	font-weight: 600;
}

.buscador__estado {
	color: var(--tinta-suave);
	font-size: var(--t-s);
}

/* ------------------------------------------------------------ Distintivos */

.distintivo {
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
	padding: 0.3em 0.75em;
	border-radius: 999px;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
	background: var(--crema-honda);
	color: var(--marca-oscura);
}

.distintivo--oferta {
	background: var(--marca);
	color: var(--blanco);
}

.distintivo--agotado {
	background: #ede9e3;
	color: var(--tinta-suave);
}

.distintivo--nuevo {
	background: var(--tinta);
	color: var(--blanco);
}

.distintivo--ultimas {
	background: var(--rojo);
	color: var(--blanco);
}

/* --------------------------------------------------------- Formularios */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--radio);
	background: var(--blanco);
	font-size: var(--t-base);
	transition: border-color var(--transicion), box-shadow var(--transicion);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--marca);
	box-shadow: 0 0 0 3px rgb(145 114 71 / 15%);
}

label {
	display: block;
	font-size: var(--t-s);
	font-weight: 600;
	margin-bottom: var(--e-2);
}

/* ------------------------------------------------------------- Migas */

.migas {
	font-size: var(--t-s);
	color: var(--tinta-suave);
	padding-block: var(--e-4);
}

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

.migas a:hover {
	color: var(--marca);
	text-decoration: underline;
}

.migas__separador {
	margin-inline: var(--e-2);
	opacity: 0.5;
}

/* --------------------------------------------------------------- Avisos */

.aviso-flotante {
	position: fixed;
	right: var(--e-5);
	bottom: var(--e-5);
	z-index: 400;
	display: flex;
	align-items: center;
	gap: var(--e-3);
	max-width: min(420px, calc(100vw - 2rem));
	padding: var(--e-4) var(--e-5);
	background: var(--tinta);
	color: var(--blanco);
	border-radius: var(--radio-m);
	box-shadow: var(--sombra-g);
	transform: translateY(120%);
	opacity: 0;
	transition: transform var(--transicion), opacity var(--transicion);
	font-size: var(--t-s);
}

.aviso-flotante.esta-visible {
	transform: translateY(0);
	opacity: 1;
}

.aviso-flotante svg {
	width: 22px;
	height: 22px;
	color: var(--oro);
	flex-shrink: 0;
}

.aviso-flotante a {
	color: var(--oro);
	font-weight: 600;
	margin-left: auto;
	white-space: nowrap;
}

/* --------------------------------------------------- Selector de cantidad */

.cantidad {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--radio);
	overflow: hidden;
	background: var(--blanco);
}

.cantidad button {
	width: 46px;
	height: 54px;
	display: grid;
	place-items: center;
	font-size: 1.3rem;
	color: var(--tinta-media);
	transition: background var(--transicion), color var(--transicion);
}

.cantidad button:hover {
	background: var(--crema);
	color: var(--marca-oscura);
}

.cantidad input {
	width: 56px;
	height: 54px;
	border: 0;
	border-inline: 1px solid var(--borde);
	border-radius: 0;
	text-align: center;
	font-weight: 700;
	font-size: var(--t-base);
	padding: 0;
	appearance: textfield;
	-moz-appearance: textfield;
}

.cantidad input::-webkit-outer-spin-button,
.cantidad input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.cantidad input:focus {
	box-shadow: none;
}

/* ------------------------------------------------------------ Paginación */

.paginacion {
	display: flex;
	justify-content: center;
	gap: var(--e-2);
	margin-top: var(--e-8);
}

.paginacion .page-numbers {
	display: grid;
	place-items: center;
	min-width: 48px;
	height: 48px;
	padding: 0 var(--e-3);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	text-decoration: none;
	color: var(--tinta);
	font-weight: 600;
	transition: all var(--transicion);
}

.paginacion .page-numbers:hover,
.paginacion .page-numbers.current {
	background: var(--marca);
	border-color: var(--marca);
	color: var(--blanco);
}

/* -------------------------------------------------------------- Familias */

.familias-portada {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--e-4);
}

@media (max-width: 1000px) {
	.familias-portada {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 780px) {
	.familias-portada {
		grid-template-columns: 1fr;
		gap: var(--e-6);
	}
}

/* Tarjeta limpia: la fotografía se ve entera, sin velo oscuro encima, y el
   rótulo va debajo. La clienta pidió expresamente ver la imagen original. */
.familia-tarjeta {
	display: block;
	text-decoration: none;
	color: inherit;
}

.familia-tarjeta__foto {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radio-g);
	background: var(--crema-honda);
}

.familia-tarjeta__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px rgb(201 162 74 / 20%);
	border-radius: inherit;
	pointer-events: none;
}

.familia-tarjeta img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.familia-tarjeta:hover img {
	transform: scale(1.06);
}

.familia-tarjeta__pie {
	display: block;
	padding-top: var(--e-4);
}

.familia-tarjeta__nombre {
	display: block;
	font-family: var(--fuente-titulo);
	font-size: var(--t-l);
	line-height: 1.15;
	color: var(--marca-oscura);
}

.familia-tarjeta:hover .familia-tarjeta__nombre {
	color: var(--marca);
}

.familia-tarjeta__cuenta {
	display: block;
	font-family: var(--fuente-texto);
	font-size: var(--t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tinta-suave);
	margin-top: var(--e-2);
}

/* ==========================================================================
   Páginas interiores con más presencia: Nosotros y Contacto
   ========================================================================== */

/* ------------------------------- Portada de página, con fotografía a sangre */

.portada-pagina {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(52vh, 460px);
	overflow: hidden;
	background: var(--tinta);
	isolation: isolate;
}

.portada-pagina__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.portada-pagina__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo doble: uno inferior para el texto y un matiz miel de marca. */
.portada-pagina::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgb(24 18 12 / 45%) 0%, rgb(24 18 12 / 20%) 35%, rgb(24 18 12 / 82%) 100%),
		linear-gradient(120deg, rgb(145 114 71 / 20%), transparent 70%);
}

.portada-pagina__interior {
	position: relative;
	width: 100%;
	padding-block: clamp(2rem, 1.5rem + 4vw, 4.5rem);
	color: var(--blanco);
}

.portada-pagina__rotulo {
	display: inline-flex;
	align-items: center;
	gap: var(--e-3);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--oro);
	margin-bottom: var(--e-3);
}

.portada-pagina__rotulo::before {
	content: "";
	width: 40px;
	height: 1px;
	background: var(--oro);
}

.portada-pagina h1 {
	color: var(--blanco);
	margin: 0 0 var(--e-4);
	text-shadow: 0 2px 26px rgb(0 0 0 / 35%);
}

.portada-pagina__entradilla {
	max-width: 46ch;
	margin: 0;
	font-size: var(--t-m);
	line-height: 1.6;
	color: rgb(255 255 255 / 88%);
}

/* Las migas sobre fotografía necesitan el color invertido. */
.portada-pagina .migas,
.portada-pagina .migas a,
.portada-pagina .migas span {
	color: rgb(255 255 255 / 78%);
}

.portada-pagina .migas a:hover {
	color: var(--oro);
}

/* ------------------------------------------------ Cifras de confianza */

.cifras {
	background: var(--crema);
	border-bottom: 1px solid var(--borde);
	padding-block: var(--e-6);
}

.cifras__lista {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--e-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 780px) {
	.cifras__lista {
		grid-template-columns: repeat(2, 1fr);
	}
}

.cifras__lista li {
	margin: 0;
	text-align: center;
}

.cifras__lista strong {
	display: block;
	font-family: var(--fuente-titulo);
	font-weight: 400;
	font-size: var(--t-xl);
	line-height: 1.1;
	color: var(--marca);
	margin-bottom: var(--e-1);
}

.cifras__lista span {
	font-size: var(--t-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tinta-suave);
}

/* ------------------------------------------------------- Texto de página

   El contenido lo edita la clienta desde el escritorio, así que el estilo se
   cuelga de las etiquetas y no de clases: sirva lo que sirva que escriba. */

.prosa {
	max-width: 68ch;
	color: var(--tinta-media);
	font-size: var(--t-base);
	line-height: 1.8;
}

/* El primer párrafo hace de entradilla. */
.prosa > p:first-of-type {
	font-size: var(--t-m);
	line-height: 1.65;
	color: var(--tinta);
}

.prosa p {
	margin: 0 0 var(--e-5);
}

.prosa h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
	line-height: 1.2;
	color: var(--marca-oscura);
	margin: var(--e-8) 0 var(--e-4);
}

/* Filete dorado corto sobre cada titular, como en la portada. */
.prosa h2::before {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	background: var(--oro);
	margin-bottom: var(--e-4);
}

.prosa h3 {
	font-size: var(--t-l);
	color: var(--tinta);
	margin: var(--e-6) 0 var(--e-3);
}

.prosa a {
	color: var(--marca-oscura);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.prosa a:hover {
	color: var(--tinta);
}

.prosa ul,
.prosa ol {
	margin: 0 0 var(--e-5);
	padding-left: var(--e-6);
}

.prosa li {
	margin-bottom: var(--e-2);
}

.prosa ul {
	list-style: none;
	padding-left: 0;
}

.prosa ul li {
	position: relative;
	padding-left: var(--e-6);
}

.prosa ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 18px;
	height: 2px;
	background: var(--oro);
}

.prosa__accion {
	margin-top: var(--e-7);
}

/* -------------------------------------------------------------- Contacto */

.contacto__reja {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}

@media (max-width: 900px) {
	.contacto__reja {
		grid-template-columns: 1fr;
	}
}

.contacto__accion {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
	margin-top: var(--e-6);
}

.fichas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--e-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 520px) {
	.fichas {
		grid-template-columns: 1fr;
	}
}

.ficha {
	margin: 0;
	padding: var(--e-5);
	background: var(--crema);
	border: 1px solid var(--arena);
	border-radius: var(--radio-m);
}

.ficha__icono {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--blanco);
	border: 1px solid var(--arena);
	color: var(--marca);
	margin-bottom: var(--e-4);
}

.ficha__titulo {
	font-family: var(--fuente-titulo);
	font-size: var(--t-base);
	color: var(--marca-oscura);
	margin: 0 0 var(--e-2);
}

.ficha__texto {
	margin: 0;
	font-size: var(--t-s);
	line-height: 1.6;
	color: var(--tinta-media);
	overflow-wrap: break-word;
}

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

.ficha__texto a:hover {
	color: var(--marca);
}

/* --------------------------------------------------------- Cita / cierre */

/* Menos aire arriba y abajo que una sección normal. */
.seccion--cita {
	padding-block: clamp(2rem, 1.25rem + 3vw, 4rem);
}


/* Cita flanqueada por dos ilustraciones. Sus fondos son casi idénticos al de
   la sección oscura, así que se funden sin necesidad de recorte. */
.cita-fila {
	display: grid;
	grid-template-columns: 1.2fr auto 1.2fr;
	align-items: center;
	gap: clamp(1rem, 0.5rem + 1.5vw, 3rem);
}

.cita-fila__ilustra {
	display: flex;
}

.cita-fila__ilustra--izq {
	justify-content: flex-start;
}

.cita-fila__ilustra--der {
	justify-content: flex-end;
}

.cita-fila__ilustra img {
	width: 100%;
	max-width: clamp(240px, 32vw, 460px);
	height: auto;
	/* Trazo claro sobre fondo casi negro: lighten deja pasar el fondo de la
	   sección donde la imagen es más oscura, así no queda recuadro. */
	mix-blend-mode: lighten;
}

@media (max-width: 820px) {
	.cita-fila {
		grid-template-columns: 1fr 1fr;
		gap: var(--e-5);
	}

	/* En móvil la cita ocupa toda la fila y las ilustraciones se reparten debajo. */
	.cita {
		grid-column: 1 / -1;
		order: -1;
	}

	.cita-fila__ilustra img {
		max-width: 220px;
	}
}

.cita {
	text-align: center;
	margin-inline: auto;
}

.cita blockquote {
	max-width: 18ch;
	margin-inline: auto;
}

.cita blockquote {
	border: 0;
	padding: 0;
	margin: 0 0 var(--e-5);
	font-size: var(--t-2xl);
	line-height: 1.25;
	color: var(--blanco);
	font-family: var(--fuente-titulo);
}

.cita cite {
	font-style: normal;
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oro);
	/* En una sola línea: la cita es estrecha y «Zamora» se caía. */
	display: block;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.cita cite {
		white-space: normal;
	}
}

/* ------------------------------------------- Cinta de garantías (confianza) */

.garantias {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--e-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 900px) {
	.garantias {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.garantias {
		grid-template-columns: 1fr;
	}
}

/* Con ilustración: centradas y en columna, la imagen como protagonista. */
.garantia {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--e-2);
	margin: 0;
}

.garantia__ilustra {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 96px;
	margin-bottom: var(--e-2);
}

.garantia__ilustra img {
	width: auto;
	max-height: 100%;
	max-width: 120px;
}

.garantia__titulo {
	font-family: var(--fuente-titulo);
	font-weight: 400;
	font-size: var(--t-m);
	margin-bottom: var(--e-1);
}

.garantia__texto {
	font-size: var(--t-xs);
	color: var(--tinta-suave);
	line-height: 1.5;
	margin: 0;
	max-width: 26ch;
}

.garantia svg {
	width: 30px;
	height: 30px;
	color: var(--marca);
	flex-shrink: 0;
	stroke-width: 1.4;
}

.seccion--tinta .garantia svg {
	color: var(--oro);
}

.seccion--tinta .garantia__texto {
	color: #b3a899;
}