/* =========================================================================
   LUVAL — Footer

   Franja oscura con los cuatro argumentos de venta + cuerpo blanco en cinco
   columnas (Páginas · Categoría · marca · Contacto · Redes Sociales).

   El pie va al final del documento, en el flujo normal: no se fija ni se
   revela con el scroll. La paleta y los tokens vienen de pz-header.css.
   ========================================================================= */

:root {
	--lv-usp-pad: clamp(16px, 2vw, 28px);
	--lv-foot-pad-y: clamp(30px, 3.8vw, 68px);
	--lv-foot-gap: clamp(24px, 2.6vw, 50px);
	/* El pie respira más que el resto del sitio: canalón propio, más ancho
	   que --pz-gutter, para que las columnas no toquen los bordes. */
	--lv-foot-gutter: clamp(20px, 5.5vw, 110px);
}

/* =========================================================================
   1. Contenido
   ========================================================================= */

.pz-page {
	position: relative;
	box-sizing: border-box;
	/* Hueco de la cabecera fija: va aquí (clase) y no en `body`, porque los
	   estilos globales de WordPress resetean el padding del body. */
	padding-top: var(--pz-header-h, 0px);
	background: var(--pz-page-bg, #fff);
	/* En páginas cortas evita que el pie suba a media pantalla. */
	min-height: 100vh;
	min-height: 100svh;
}

.lv-footer {
	background: var(--lv-surface, #fff);
	color: var(--lv-ink, #1a1a1a);
}

/* =========================================================================
   2. Franja de argumentos de venta
   ========================================================================= */

.lv-usp {
	background: var(--lv-strip, #222);
	color: #fff;
}

.lv-usp__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: center;
	gap: clamp(14px, 2vw, 30px);
	margin: 0;
	padding: var(--lv-usp-pad) var(--lv-foot-gutter);
	list-style: none;
}

.lv-usp__item {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.2vw, 20px);
	margin: 0;
	min-width: 0;
}

.lv-usp__ico {
	flex: 0 0 auto;
	width: clamp(36px, 3.2vw, 52px);
	height: auto;
}

.lv-usp__text {
	margin: 0;
	min-width: 0;
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
}

.lv-usp__text span { display: block; }

/* =========================================================================
   3. Cuerpo
   ========================================================================= */

.lv-footer__body {
	padding: var(--lv-foot-pad-y) var(--lv-foot-gutter) clamp(18px, 2vw, 28px);
}

.lv-footer__grid {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, 1.5fr)
		minmax(0, 2.05fr)
		minmax(0, 1.45fr)
		minmax(0, 1.35fr);
	grid-template-areas: "pages cats brand contact social";
	align-items: start;
	column-gap: var(--lv-foot-gap);
	row-gap: clamp(28px, 3.4vw, 48px);
}

.lv-fcol { min-width: 0; }

.lv-fcol--pages   { grid-area: pages; }
.lv-fcol--cats    { grid-area: cats; }
.lv-fcol--brand   { grid-area: brand; }
.lv-fcol--contact { grid-area: contact; }
.lv-fcol--social  { grid-area: social; }

/* Las columnas de texto arrancan algo por debajo del logo, como en el diseño. */
.lv-fcol--pages,
.lv-fcol--cats,
.lv-fcol--contact,
.lv-fcol--social { padding-top: clamp(0px, 1.6vw, 30px); }

/* — Títulos con el filete rojo —
   Van en la fuente base: la de encabezados del tema (Bebas Neue) sale
   condensada, en versalitas y con demasiado peso para este bloque. */
.lv-footer .lv-fcol__title {
	position: relative;
	margin: 0 0 clamp(18px, 1.8vw, 28px);
	padding-bottom: 10px;
	color: var(--lv-ink, #1a1a1a);
	font-family: var(--OZ-Font-Base, inherit);
	font-size: clamp(17px, 1.15vw, 21px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

.lv-footer .lv-fcol__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: var(--lv-red, #e30613);
}

.lv-fcol__empty {
	margin: 0;
	color: var(--lv-muted, #5c5c5c);
	font-size: 14px;
	line-height: 1.5;
}

/* =========================================================================
   4. Listas con viñeta de flecha (Páginas y Categoría)
   ========================================================================= */

.lv-flinks {
	display: flex;
	flex-direction: column;
	gap: clamp(11px, 1.1vw, 17px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lv-flinks li { margin: 0; min-width: 0; }

.lv-flinks a {
	display: grid;
	grid-template-columns: 13px minmax(0, 1fr);
	align-items: start;
	gap: 10px;
	color: #333333;
	font-size: clamp(14px, 1vw, 16px);
	font-weight: 400;
	line-height: 1.35;
	text-decoration: none;
	transition: color .2s var(--pz-ease, ease);
}

.lv-flinks a::before {
	content: "";
	width: 12px;
	height: 12px;
	margin-top: .16em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 1 9.6 6 2.4 11 4.3 6Z' fill='%23e30613'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lv-flinks a:hover,
.lv-flinks a:focus-visible { color: var(--lv-red, #e30613); text-decoration: none; }

/* La página actual no se resalta: en el diseño todos los enlaces pesan igual. */
.lv-flinks .current-menu-item > a,
.lv-flinks .current_page_item > a { color: #333333; font-weight: 400; }

/* La lista de categorías crece con el catálogo: se limita el alto y el resto
   se ve con la barra de scroll, para que las columnas queden parejas. */
.lv-flinks--scroll {
	max-height: var(--lv-cats-max, clamp(150px, 20vh, 200px));
	padding-right: 14px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #1a1a1a #e6e6e6;
}

.lv-flinks--scroll::-webkit-scrollbar { width: 4px; }
.lv-flinks--scroll::-webkit-scrollbar-track { background: #e6e6e6; border-radius: 999px; }
.lv-flinks--scroll::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 999px; }

/* =========================================================================
   5. Marca (logo + texto)
   ========================================================================= */

.lv-fcol--brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 1.6vw, 22px);
	text-align: center;
}

.lv-fbrand__logo { line-height: 0; }

.lv-logo--footer img { height: clamp(58px, 5.4vw, 88px); }

.lv-fbrand__text {
	max-width: 36ch;
	margin: 0;
	color: #444444;
	font-size: clamp(13px, .98vw, 15px);
	line-height: 1.55;
}

/* =========================================================================
   6. Contacto
   ========================================================================= */

.lv-fcontact {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.4vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lv-fcontact__item {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	align-items: start;
	gap: 12px;
	margin: 0;
	color: #333333;
	font-size: clamp(13px, 1vw, 15px);
	line-height: 1.5;
}

.lv-fcontact__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: .12em;
	color: var(--lv-ink, #1a1a1a);
}

.lv-fcontact__ico svg { display: block; }

.lv-fcontact__body { min-width: 0; }

/* Los teléfonos van uno debajo de otro dentro del mismo bloque. */
.lv-fcontact__body a,
.lv-fcontact__body span { display: block; }

.lv-fcontact a {
	color: inherit;
	text-decoration: none;
	transition: color .2s var(--pz-ease, ease);
}

.lv-fcontact a:hover,
.lv-fcontact a:focus-visible { color: var(--lv-red, #e30613); text-decoration: none; }

/* =========================================================================
   7. Redes sociales
   ========================================================================= */

.lv-fsocial {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lv-fsocial li { margin: 0; }

.lv-fsocial__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 1px solid var(--lv-line, #dcdcdc);
	border-radius: 6px;
	background: #fff;
	color: var(--lv-ink, #1a1a1a);
	text-decoration: none;
	transition: border-color .2s var(--pz-ease, ease), color .2s var(--pz-ease, ease), background-color .2s var(--pz-ease, ease);
}

.lv-fsocial__link svg { width: 22px; height: 22px; }

a.lv-fsocial__link:hover,
a.lv-fsocial__link:focus-visible {
	border-color: var(--lv-red, #e30613);
	color: var(--lv-red, #e30613);
	text-decoration: none;
}

/* =========================================================================
   8. Legal
   ========================================================================= */

.lv-footer__legal {
	margin-top: clamp(26px, 3vw, 46px);
	padding-top: clamp(14px, 1.4vw, 20px);
	border-top: 1px solid var(--lv-line, #dcdcdc);
	color: #8a8a8a;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

.lv-footer__legal a {
	color: inherit;
	text-decoration: none;
	transition: color .2s var(--pz-ease, ease);
}

.lv-footer__legal a:hover,
.lv-footer__legal a:focus-visible { color: var(--lv-red, #e30613); text-decoration: underline; }

/* =========================================================================
   9. Responsive
   ========================================================================= */

/* Portátil pequeño: la marca sube a su propia fila y el resto va en 2×2.
   Ya no hay logo al lado, así que se quita el desnivel de las columnas. */
@media (max-width: 1180px) {
	:root { --lv-foot-pad-y: clamp(28px, 3.4vw, 52px); }

	.lv-footer__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"brand   brand"
			"pages   cats"
			"contact social";
	}

	.lv-fcol--pages,
	.lv-fcol--cats,
	.lv-fcol--contact,
	.lv-fcol--social { padding-top: 0; }
}

/* Tablet: los argumentos de venta pasan a dos columnas. */
@media (max-width: 900px) {
	.lv-usp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
}

/* Móvil: todo en una columna. */
@media (max-width: 640px) {
	.lv-usp__list { grid-template-columns: minmax(0, 1fr); }

	.lv-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"brand"
			"pages"
			"cats"
			"contact"
			"social";
	}

	.lv-flinks--scroll { max-height: none; overflow: visible; padding-right: 0; }
	.lv-fbrand__text { max-width: 42ch; }
}