/* =========================================================================
   ELEVARTE — Footer

   Tres bloques sobre el crema de la marca:
     1. .pz-footer__cta   → «Síguenos en redes» (rojo) + «Únete a nuestra
                             comunidad» (amarillo, con los iconos de redes)
     2. .pz-footer__mark  → wordmark ELEVARTE sobre cuadrícula con cuadrados
     3. .pz-footer__legal → copyright + páginas legales en píldoras

   El pie va al final del documento, en el flujo normal: no se fija, no se
   revela ni sube por encima del contenido.

   Nota: las reglas de .pz-page viven aquí desde la versión anterior del tema
   (reservan el hueco de la barra fija). Se conservan tal cual: pz-header.css y
   pz-sidebar.css dependen de ellas.
   ========================================================================= */

:root {
	--pz-footer-inset: clamp(12px, 1.4vw, 24px);
	/* Aire entre el final del contenido y el pie. */
	--pz-footer-gap: clamp(24px, 3vw, 56px);
	--pz-footer-radius: clamp(18px, 2vw, 30px);
	--pz-footer-pad-x: clamp(12px, 1.4vw, 26px);

	/* Mismo crema que el resto del sitio; el valor vive en --pz-cream
	   (assets/css/pz-header.css). */
	--pz-f-cream: var(--pz-cream, #f4e9e1);
	--pz-f-ink: #111111;
	--pz-f-red: #ef3f39;
	--pz-f-yellow: #fdb913;
	--pz-f-blue: #0a61f0;
	--pz-f-orange: #f2561b;
	--pz-f-green: #14a75a;
	--pz-f-purple: #a259ff;

	/* Cuadrícula del wordmark. --pz-tile es el lado de cada celda. */
	--pz-tile: clamp(26px, 2.6vw, 46px);
	--pz-grid-line: rgba(17, 17, 17, .13);
}

/* =========================================================================
   1. Contenido y pie
   ========================================================================= */

.pz-page {
	position: relative;
	box-sizing: border-box;
	/* Hueco de la barra 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;
}

.pz-footer {
	padding-top: var(--pz-footer-gap);
	padding-bottom: 0;
	background: var(--pz-f-cream);
	color: var(--pz-f-ink);
}

/* A ancho completo, igual que el cuerpo de la portada: el pie alinea con las
   secciones del maquetador en vez de quedarse en el contenedor del tema. */
.pz-footer__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding-inline: var(--pz-footer-pad-x);
}

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

/* =========================================================================
   2. Llamadas a la acción
   ========================================================================= */

.pz-footer__cta {
	display: grid;
	/* Dos píldoras a todo el ancho: la amarilla ~1,4 veces la roja. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(10px, 1vw, 16px);
	align-items: stretch;
}

.pz-fbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(52px, 4.6vw, 74px);
	padding: 14px 22px;
	border-radius: var(--pz-footer-radius);
	font-size: clamp(15px, 1.3vw, 22px);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
}

.pz-fbtn--red {
	background: var(--pz-f-red);
	color: #fff;
}

.pz-fbtn--yellow {
	background: var(--pz-f-yellow);
	color: var(--pz-f-ink);
}

/* Píldora «Escríbenos por WhatsApp»: icono y texto como un solo grupo. */
.pz-fbtn--wa {
	gap: clamp(10px, 1vw, 16px);
}

.pz-fbtn__ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pz-fbtn__ico svg {
	display: block;
	width: clamp(20px, 1.8vw, 30px);
	height: auto;
}

/* Píldora «Únete a nuestra comunidad»: no es un enlace, es una caja con el
   texto y los iconos de redes formando un único grupo centrado. */
.pz-fbtn--community {
	gap: clamp(14px, 2vw, 34px);
}

.pz-fbtn__label {
	/* Que el texto no empuje a los iconos fuera de la píldora en anchos justos. */
	min-width: 0;
}

.pz-fbtn__social {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.5vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pz-fbtn__snet {
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.pz-fbtn__snet svg {
	display: block;
	width: clamp(20px, 1.8vw, 30px);
	height: auto;
}

/* El salto al pasar el ratón solo en lo que de verdad es enlace: la píldora
   amarilla ya no lo es, y levantarla entera engañaría al puntero. */
a.pz-fbtn:hover,
a.pz-fbtn:focus-visible,
a.pz-fbtn__snet:hover,
a.pz-fbtn__snet:focus-visible {
	transform: translateY(-2px);
	color: inherit;
}

/* =========================================================================
   3. Wordmark sobre cuadrícula
   ========================================================================= */

.pz-footer__mark {
	position: relative;
	margin-top: clamp(24px, 3vw, 52px);
	padding: clamp(28px, 4vw, 72px) 0 clamp(20px, 2.6vw, 44px);
	overflow: hidden;

	/* La cuadrícula se dibuja con dos degradados repetidos: no hay imágenes ni
	   marcado extra, y el paso lo controla --pz-tile. */
	background-image:
		linear-gradient(to right, var(--pz-grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--pz-grid-line) 1px, transparent 1px);
	background-size: var(--pz-tile) var(--pz-tile);
	background-position: 0 0;

	/* Sin máscara de desvanecido. La que había (linear-gradient a transparente
	   arriba y abajo) no solo difuminaba las líneas: al aplicarse al elemento
	   entero se llevaba también el wordmark y los cuadros, y eso es el
	   «degradado» que no debía estar. La cuadrícula corta a hueso. */
}

/* Capa de cuadros. Recibe el puntero: assets/js/pz-footer-tiles.js la rellena
   con una celda por hueco de la cuadrícula y cada clic va pintando. Sin JS se
   quedan solo los seis cuadros que imprime footer.php, que es como se veía
   antes: la decoración no depende del script. */
.pz-footer__tiles {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.pz-tile {
	position: absolute;
	top: calc(var(--pz-tile-y, 0) * var(--pz-tile) + 1px);
	left: calc(var(--pz-tile-x, 0) * var(--pz-tile) + 1px);
	width: calc(var(--pz-tile) - 1px);
	height: calc(var(--pz-tile) - 1px);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	transition: background-color .12s var(--pz-ease, ease);
}

/* Solo las celdas que crea el JS son pulsables. */
.pz-tile[data-pz-cell] { cursor: pointer; }

/* Realce al pasar por encima, únicamente en las que están sin pintar. */
.pz-tile[data-pz-cell]:not([data-color]):hover {
	background-color: rgba(17, 17, 17, .07);
}

.pz-tile[data-color="orange"] { background-color: var(--pz-f-orange); }
.pz-tile[data-color="red"]    { background-color: var(--pz-f-red); }
.pz-tile[data-color="green"]  { background-color: var(--pz-f-green); }
.pz-tile[data-color="purple"] { background-color: var(--pz-f-purple); }
.pz-tile[data-color="blue"]   { background-color: var(--pz-f-blue); }
.pz-tile[data-color="yellow"] { background-color: var(--pz-f-yellow); }

.pz-footer__wordmark {
	position: relative;
	z-index: 1;
	line-height: 0;
	/* El bloque ocupa todo el ancho y taparía las celdas de debajo. Se deja
	   pasar el puntero y solo el logo en sí vuelve a capturarlo. */
	pointer-events: none;
}

.pz-footer__wordmark .pz-logo--footer { pointer-events: auto; }

.pz-logo--footer {
	display: block;
	line-height: 0;
}

.pz-logo--footer img {
	display: block;
	width: min(680px, 58%);
	height: auto;
}

/* Sin logo en el Personalizador: el nombre del sitio hace de wordmark. */
.pz-logo--footer.pz-logo--text {
	color: var(--pz-f-ink);
	font-size: clamp(48px, 12vw, 170px);
	font-weight: 800;
	line-height: .9;
	letter-spacing: -.03em;
	text-transform: uppercase;
}

/* =========================================================================
   4. Barra legal
   ========================================================================= */

.pz-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px clamp(16px, 2vw, 32px);
	padding: clamp(14px, 1.6vw, 24px) 0 clamp(18px, 2vw, 30px);
	border-top: 1px solid rgba(17, 17, 17, .12);
}

.pz-footer__legal-txt {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	color: rgba(17, 17, 17, .78);
	font-size: clamp(11px, .85vw, 13px);
	line-height: 1.45;
}

.pz-footer__copy {
	font-weight: 600;
	color: var(--pz-f-ink);
}

.pz-footer__legal-txt a:hover,
.pz-footer__legal-txt a:focus-visible {
	color: var(--pz-f-blue);
	text-decoration: underline;
}

.pz-footer__legal-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pz-fpill {
	display: inline-block;
	padding: 7px 15px;
	border: 1px solid rgba(17, 17, 17, .22);
	border-radius: 999px;
	color: rgba(17, 17, 17, .82);
	font-size: clamp(10px, .78vw, 12px);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

a.pz-fpill:hover,
a.pz-fpill:focus-visible {
	background: var(--pz-f-ink);
	border-color: var(--pz-f-ink);
	color: #fff;
}

.pz-fpill--plain {
	opacity: .55;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.pz-tile { transition-duration: .01ms; }
}

/* =========================================================================
   5. Responsive
   ========================================================================= */

@media (max-width: 1024px) {
	.pz-logo--footer img { width: min(560px, 74%); }
}

@media (max-width: 767px) {
	/* Las dos píldoras, una debajo de otra a todo el ancho. */
	.pz-footer__cta {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En móvil el texto y los iconos ya no caben en una línea. */
	.pz-fbtn--community {
		flex-wrap: wrap;
		gap: 10px 18px;
	}

	.pz-logo--footer img { width: 96%; }

	.pz-footer__mark {
		padding-top: clamp(22px, 7vw, 44px);
	}
}

@media (max-width: 480px) {
	.pz-footer__legal {
		flex-direction: column;
		align-items: flex-start;
	}

	.pz-footer__legal-nav {
		width: 100%;
	}

	.pz-fpill {
		white-space: normal;
	}
}