/**
 * Estructura: contenedores, cabecera, pie y rejillas generales.
 */

/* ----------------------------------------------------------- Contenedores */

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

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

.contenedor--ancho {
	max-width: 1680px;
}

/* Separación vertical de secciones. Generosa a propósito: el encargo pedía
   que el contenido respire y ocupe más espacio. */
.seccion {
	padding-block: clamp(3.5rem, 2rem + 6vw, 8rem);
}

.seccion--compacta {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

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

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

.seccion--tinta {
	background: var(--tinta);
	color: var(--crema);
}

.seccion--tinta h1,
.seccion--tinta h2,
.seccion--tinta h3 {
	color: var(--blanco);
}

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

/* Cabecera de sección reutilizable */
.seccion__cabecera {
	margin-bottom: clamp(2rem, 1rem + 3vw, 4rem);
	max-width: 46ch;
}

.seccion__cabecera--centrada {
	margin-inline: auto;
	text-align: center;
	max-width: 58ch;
}

.seccion__cabecera--fila {
	max-width: none;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--e-5);
	flex-wrap: wrap;
}

.seccion__cabecera--fila > div {
	max-width: 46ch;
}

/* --------------------------------------------------------------- Cabecera */

.cabecera {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--blanco);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--transicion), border-color var(--transicion);
}

.cabecera.esta-fija {
	border-bottom-color: var(--borde);
	box-shadow: var(--sombra-s);
}

.cabecera__barra {
	display: flex;
	align-items: center;
	gap: var(--e-5);
	min-height: 84px;
	padding-block: var(--e-3);
}

@media (max-width: 1024px) {
	/* Sin la navegación central, el logo va a la izquierda y los iconos al
	   borde derecho. space-between es a prueba de desbordes. */
	.cabecera__barra {
		justify-content: space-between;
	}
}

@media (max-width: 560px) {
	.cabecera__barra {
		gap: var(--e-3);
		min-height: 64px;
	}
}

.cabecera__marca {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	text-decoration: none;
}

.cabecera__marca img {
	max-height: 46px;
	width: auto;
	max-width: 260px;
	object-fit: contain;
}

@media (max-width: 560px) {
	.cabecera__marca img {
		max-height: 34px;
		max-width: 170px;
	}
}

.cabecera__marca-texto {
	font-family: var(--fuente-titulo);
	font-size: 1.4rem;
	line-height: 1.1;
	color: var(--tinta);
}

/* La navegación se centra y empuja las acciones al extremo */
.cabecera__nav {
	margin-inline: auto;
}

.cabecera__acciones {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	flex-shrink: 0;
}

/* Aviso superior de envío gratuito */
.cinta-aviso {
	background: var(--tinta);
	color: var(--crema);
	text-align: center;
	font-size: var(--t-s);
	letter-spacing: 0.04em;
	padding: var(--e-2) var(--marco);
}

@media (max-width: 560px) {
	.cinta-aviso {
		font-size: 0.72rem;
		letter-spacing: 0;
		line-height: 1.4;
	}
}

.cinta-aviso strong {
	color: var(--oro);
	font-weight: 600;
}

/* --------------------------------------------------------------------- Pie */

.pie {
	background: var(--pie-fondo);
	color: var(--pie-texto);
	padding-top: clamp(3rem, 2rem + 4vw, 6rem);
	font-size: var(--t-s);
	position: relative;
	overflow: hidden;
}

.pie a {
	color: var(--pie-texto);
	text-decoration: none;
	transition: color var(--transicion);
}

.pie a:hover {
	color: var(--oro);
}

/* Marca + tres bloques. La última columna (contacto) va algo más ancha para
   que el correo quepa sin partirse. */
.pie__rejilla {
	display: grid;
	grid-template-columns: 1.5fr 0.9fr 0.9fr 1.25fr;
	gap: clamp(1.75rem, 1.25rem + 2vw, 3.5rem);
	padding-bottom: var(--e-7);
}

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

	.pie__marca {
		grid-column: 1 / -1;
	}
}

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

/* Las columnas deben poder encoger dentro de la rejilla, o el email y la
   dirección largos las desbordan (min-width de grid es «auto» por defecto). */
.pie__marca,
.pie__columna {
	min-width: 0;
}

.pie__lema,
.pie__contacto a,
.pie__contacto span,
.pie__lista a {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Marca */
.pie__marca img {
	height: auto;
	width: auto;
	max-height: 60px;
	max-width: 220px;
	object-fit: contain;
	margin-bottom: var(--e-4);
}

.pie__filete {
	display: block;
	width: 46px;
	height: 2px;
	background: var(--oro);
	margin-bottom: var(--e-4);
}

.pie__lema {
	max-width: 32ch;
	line-height: 1.7;
	margin-bottom: var(--e-5);
}

.pie__redes {
	display: flex;
	gap: var(--e-3);
}

.pie__redes a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgb(201 162 74 / 45%);
	color: var(--oro);
	transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}

.pie__redes a:hover {
	background: var(--oro);
	color: var(--pie-fondo);
	border-color: var(--oro);
}

/* Encabezado de columna con icono */
.pie__titulo {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	font-family: var(--fuente-texto);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blanco);
	margin-bottom: var(--e-5);
}

.pie__titulo svg {
	color: var(--oro);
	flex-shrink: 0;
}

.pie__lista {
	list-style: none;
	margin: 0 0 var(--e-4);
	padding: 0;
}

.pie__lista li {
	margin-bottom: var(--e-3);
}

/* Enlace de cierre con flecha bajo cada columna */
.pie__enlace-flecha {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--oro);
}

.pie__enlace-flecha:hover {
	gap: var(--e-3);
}

/* Lista de contacto con icono */
.pie__contacto li {
	display: flex;
	align-items: flex-start;
	gap: var(--e-3);
	line-height: 1.5;
}

.pie__contacto svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--oro);
}

/* Divisor con la abeja en el centro */
.pie__divisor {
	position: relative;
	display: flex;
	justify-content: center;
	margin-block: var(--e-4) var(--e-5);
}

.pie__divisor::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: rgb(201 162 74 / 25%);
}

.pie__sello {
	position: relative;
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--pie-fondo);
	border: 1px solid rgb(201 162 74 / 35%);
}

.pie__sello img {
	width: 46px;
	height: auto;
}

/* Paisaje decorativo a lo ancho */
.pie__inferior {
	padding-bottom: var(--e-6);
}

.pie__paisaje img {
	width: 100%;
	max-width: 760px;
	height: auto;
	margin-inline: auto;
	opacity: 0.7;
}

@media (max-width: 620px) {
	.pie__paisaje {
		display: none;
	}
}

.pie__newsletter-titulo {
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blanco);
	margin-bottom: var(--e-2);
}

.pie__newsletter-texto {
	color: var(--pie-texto);
	max-width: 40ch;
	margin-bottom: var(--e-4);
	line-height: 1.6;
}

.pie__newsletter-campo {
	display: flex;
	gap: var(--e-3);
	flex-wrap: wrap;
}

.pie__newsletter-campo input {
	flex: 1;
	min-width: 180px;
	background: rgb(255 255 255 / 6%);
	border-color: rgb(201 162 74 / 30%);
	color: var(--blanco);
}

.pie__newsletter-campo input::placeholder {
	color: rgb(255 255 255 / 45%);
}

.pie__newsletter-campo input:focus {
	border-color: var(--oro);
	box-shadow: 0 0 0 3px rgb(201 162 74 / 20%);
}

.pie__newsletter-campo .boton {
	flex-shrink: 0;
}

.pie__newsletter-aviso {
	margin-top: var(--e-3);
	font-size: var(--t-s);
	color: var(--oro);
}

/* Barra legal: centrada, sin línea propia (el divisor ya separa). */
.pie__legal {
	padding-bottom: var(--e-6);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--e-3);
	font-size: var(--t-xs);
	text-align: center;
	color: rgb(255 255 255 / 65%);
}

.pie__legal-menu {
	display: flex;
	gap: var(--e-5);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.pie__legal-menu li {
	margin: 0;
}

/* --------------------------------------------------------- Rejillas útiles */

.rejilla {
	display: grid;
	gap: var(--e-5);
}

.rejilla--2 {
	grid-template-columns: repeat(2, 1fr);
}

.rejilla--3 {
	grid-template-columns: repeat(3, 1fr);
}

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

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

@media (max-width: 560px) {
	.rejilla--2,
	.rejilla--3,
	.rejilla--4 {
		grid-template-columns: 1fr;
	}
}

/* Contenido principal: reserva sitio para que la cabecera fija no tape los
   anclajes internos. */
.contenido-principal {
	scroll-margin-top: calc(var(--cabecera) + 1rem);
	min-height: 40vh;
}

/* Cabecera de página interior */
.portadilla {
	background: var(--crema);
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	border-bottom: 1px solid var(--borde);
}

.portadilla h1 {
	margin-bottom: var(--e-3);
}

.portadilla__texto {
	max-width: 62ch;
	font-size: var(--t-m);
	color: var(--tinta-media);
}