/* -----------------------------------------
   Soulmix - Pie de página
   ----------------------------------------- */

.site-footer {
	/* El espacio inferior iguala el lateral del `.container` (48px), para que
	   el pie respire lo mismo por abajo que por los lados. */
	padding: clamp(80px, calc(80 / 1920 * 100vw), 112px) 0 var(--container-padding);
}

.page-template-page-bases-naturales-php .site-footer,
.page-template-page-producto-php .site-footer,
.page-template-page-fruta-deshidratada-php .site-footer,
.page-template-page-espumante-php .site-footer {
	padding-top: clamp(190px, calc(190 / 1920 * 100vw), 266px);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: clamp(64px, calc(64 / 1920 * 100vw), 90px);
	align-items: start;
}

/* Sólo la separación entre la columna de páginas y la de datos: el `gap` del
   grid afectaría también al logo de la derecha. */
.footer-nav {
	margin-right: clamp(96px, calc(96 / 1920 * 100vw), 134px);
}

/* Enlaces principales de páginas (columna izquierda). */
.footer-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-nav__list a {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(40px, calc(40 / 1920 * 100vw), 56px);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--color-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-nav__list a:hover {
	color: var(--color-btn-primary);
}

/* Bloques secundarios: contacto, redes y legal. */
.footer-meta {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, calc(24 / 1920 * 100vw), 34px);
}

.footer-meta__group {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-meta__group a,
.footer-meta__group span {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--color-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-meta__group a:hover {
	color: var(--color-btn-primary);
}

/* `stretch` para que la celda tome toda la altura de la fila (la marca la
   columna de enlaces, que es la más alta) y el logo se escale a ella. */
.footer-logo {
	justify-self: end;
	align-self: stretch;
	display: flex;
	justify-content: flex-end;
	/* Anclado abajo: el excedente del 115% crece hacia arriba, donde hay aire,
	   y la base del logo queda a la altura del contenido de la izquierda,
	   respetando el padding inferior del pie. */
	align-items: flex-end;
}

.footer-logo img {
	width: auto;
	/* Algo mayor que la altura de la fila: sobresale un poco por arriba, que
	   es donde hay aire. */
	height: 115%;
	display: block;
}