/* =========================================================================
   XTRALIFE — Pie de página
   Panel verde a todo el ancho con la hoja de la marca como marca de agua:
   tarjetas de contacto, logotipo + presentación y columnas de enlaces.

   Los tokens (--xl-*) los define assets/css/pz-header.css.
   ========================================================================= */

/* =========================================================================
   1. Capa de la página (envuelve todo el 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;
}

/* =========================================================================
   2. Panel verde
   ========================================================================= */

.pz-footer {
	position: relative;
	background: var(--xl-leaf, #006837);
	color: #fff;
	overflow: hidden;
}

.pz-footer__panel {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin-inline: auto;
	padding: clamp(28px, 3.4vw, 52px) var(--pz-gutter) clamp(22px, 2.4vw, 34px);
}

/* Isotipo de la marca al fondo. Es el SVG verde de la biblioteca, así que se
   pasa a blanco con un filtro y se baja la opacidad: sobre el verde del panel
   queda como la marca de agua del diseño. */
.pz-footer__watermark {
	position: absolute;
	right: 0;
	bottom: 6%;
	left: 0;
	z-index: 0;
	display: block;
	width: min(880px, 68%);
	height: auto;
	margin-inline: auto;
	filter: brightness(0) invert(1);
	opacity: .12;
	pointer-events: none;
	user-select: none;
}

/* =========================================================================
   3. Tarjetas de contacto
   ========================================================================= */

.pz-fcontact {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 22px);
	max-width: 1120px;
	margin: 0 auto clamp(34px, 4vw, 62px);
}

.pz-fcard {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 74px;
	padding: 12px 18px;
	border: 1.5px solid rgba(255, 255, 255, .5);
	border-radius: 8px;
	color: #fff;
	text-decoration: none;
	transition: background-color .2s var(--pz-ease), border-color .2s var(--pz-ease);
}

a.pz-fcard:hover,
a.pz-fcard:focus-visible {
	background: rgba(255, 255, 255, .1);
	border-color: #fff;
	color: #fff;
	text-decoration: none;
}

.pz-fcard__ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1.5px solid rgba(255, 255, 255, .55);
	border-radius: 8px;
	color: #fff;
}

.pz-fcard__text {
	min-width: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

/* =========================================================================
   4. Marca + columnas de enlaces
   ========================================================================= */

.pz-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: clamp(28px, 5vw, 90px);
}

.pz-footer__logo { margin-bottom: 18px; }

.pz-logo--footer img {
	height: clamp(64px, 6vw, 96px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Sin logo claro específico, el del sitio se pasa a blanco. */
.pz-logo--invert img { filter: brightness(0) invert(1); }

.pz-logo--footer.pz-logo--text { color: #fff; }

.pz-footer__about {
	max-width: 46ch;
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .92);
}

.pz-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: clamp(30px, 5vw, 96px);
	padding-top: clamp(8px, 2vw, 34px);
}

.pz-flinks,
.pz-flinks ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pz-flinks li { margin: 0; }

.pz-flinks a {
	display: inline-block;
	padding: 4px 0;
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	transition: color .2s var(--pz-ease), transform .2s var(--pz-ease);
}

.pz-flinks a:hover,
.pz-flinks a:focus-visible {
	color: #ffd9c4;
	text-decoration: none;
	transform: translateX(2px);
}

/* Las submenús del menú principal no se listan en el pie. */
.pz-flinks .sub-menu { display: none; }

/* =========================================================================
   5. Páginas legales
   ========================================================================= */

.pz-flegal {
	margin-top: clamp(26px, 3vw, 42px);
}

.pz-flegal__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px clamp(24px, 6vw, 96px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pz-flegal__list li { margin: 0; }

.pz-flegal__list a {
	display: inline-block;
	color: #fff;
	font-size: 18px;
	line-height: 1.4;
	text-decoration: none;
	transition: color .2s var(--pz-ease);
}

.pz-flegal__list a:hover,
.pz-flegal__list a:focus-visible {
	color: #ffd9c4;
	text-decoration: none;
}

/* =========================================================================
   6. Legal + redes
   ========================================================================= */

.pz-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: clamp(28px, 3.4vw, 48px);
	padding-top: 18px;
	/* Filete en verde claro sobre el verde del panel: se intuye, no corta. */
	border-top: 1px solid var(--xl-leaf-soft, #0a8047);
	/* Más pequeña que el resto del pie a propósito: es la línea que pediste que
	   pasara desapercibida. */
	font-size: 14px;
	/* Letra en el mismo verde claro del filete: se lee de cerca pero no compite
	   con los enlaces del pie. */
	color: var(--xl-leaf-soft, #0a8047);
}

/* Con la fila de páginas legales justo encima, el aire ya lo pone ella. */
.pz-flegal + .pz-footer__legal { margin-top: clamp(18px, 2vw, 26px); }

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

.pz-footer__author { font-weight: 600; }

.pz-footer__author:hover,
.pz-footer__author:focus-visible { color: #14a85c; }

.pz-fsocial {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pz-fsocial__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	transition: background-color .2s var(--pz-ease), color .2s var(--pz-ease);
}

.pz-fsocial__link:hover,
.pz-fsocial__link:focus-visible {
	background: #fff;
	color: var(--xl-leaf, #006837);
	text-decoration: none;
}

/* =========================================================================
   7. Responsive
   ========================================================================= */

@media (max-width: 900px) {
	.pz-footer__grid { grid-template-columns: minmax(0, 1fr); }
	.pz-footer__cols { padding-top: 0; }
	.pz-footer__about { max-width: none; }
}

@media (max-width: 720px) {
	.pz-fcontact { grid-template-columns: minmax(0, 1fr); }
	.pz-fcard { min-height: 66px; }
	.pz-fcard__ico { width: 42px; height: 42px; }
	.pz-footer__watermark { width: 96%; opacity: .1; }
	.pz-footer__legal { justify-content: center; text-align: center; }
}

@media (max-width: 420px) {
	.pz-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.pz-flinks a,
	.pz-fcard,
	.pz-fsocial__link { transition-duration: .01ms !important; }
	.pz-flinks a:hover { transform: none; }
}