/**
 * Malu Pops — pie de página.
 *
 * Se carga en todas las páginas (el pie lleva la clase .mp-pie).
 *
 * - Fondo: el del cliente, morado con su textura y la ola arriba, al 100 %
 *   del ancho y anclado arriba. Por encima de la ola asoma el color de lo que
 *   va antes (--mp-pie-arriba): el de la página o, si la página acaba con el
 *   newsletter, su verde lima. Por debajo de la imagen (en móvil el pie es más
 *   alto que ella) sigue el morado en el que se funde su borde inferior.
 * - Cabecera con logo, presentación y redes. Debajo, cuatro columnas de
 *   navegación y la franja de derechos. En móvil, los menús van en dos filas.
 * - Enlaces por block bindings (malupops/enlace): los que no tienen destino
 *   no se pintan. Las redes sin URL conservan su icono, sin enlace.
 * - El logo es el SVG de la marca en su amarillo (Pantone 616 C).
 * - Los grupos del editor traen márgenes de flujo entre hermanos: cada
 *   rejilla o fila de aquí los pone a cero en sus hijos.
 *
 */

.mp-pie {
	/* Morado en el que se funde el borde inferior del fondo (recursos/img/pie/fondo.webp). */
	--mp-pie-color: #372ded;
	--mp-pie-arriba: var(--wp--preset--color--base);

	/* Alto de la ola del fondo (1419 × 927): su punto más bajo está a 137 px del borde de arriba. */
	--mp-pie-ola: calc(100vw * 145 / 1419);

	position: relative;
	padding-block: calc(var(--mp-pie-ola) + clamp(3.5rem, 5vw, 5rem)) clamp(3rem, 4.5vw, 4.5rem);
	background:
		url("../../img/pie/fondo.webp") center top / 100% auto no-repeat,
		linear-gradient(var(--mp-pie-arriba) 0 var(--mp-pie-ola), var(--mp-pie-color) 0);
	color: var(--wp--preset--color--blanco);

	& a:where(:not(.wp-element-button)) {
		color: inherit;
	}

	& .mp-pie__rejilla {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "marca" "stock" "menus";
		gap: clamp(2rem, 3vw, 3rem);

		& > * {
			margin: 0;
		}
	}

	/* --- Cabecera: la marca y su presentación comparten una misma fila ----- */

	& .mp-pie__marca {
		grid-area: marca;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 1.5rem;

		& > * {
			margin: 0;
		}
	}

	& :is(.mp-pie__presentacion, .mp-pie__comunidad) > * { margin: 0; }
	& .mp-pie__presentacion { min-width: 0; }
	& .mp-pie__comunidad { align-self: center; }

	/* El SVG del tema toma el color del texto: aquí, el amarillo de la marca (el de «Recurso 2176.svg»). */
	& .mp-pie__logo {
		inline-size: clamp(9rem, 12vw, 11rem);
		color: var(--wp--preset--color--lima);
		line-height: 0;

		& :is(svg, img) {
			display: block;
			inline-size: 100%;
			block-size: auto;
		}
	}

	& .mp-pie__lema {
		max-inline-size: 25em;
		margin-block-start: 0;
		font-family: var(--wp--preset--font-family--coolvetica);
		font-size: clamp(1.625rem, 2.3vw, 2.125rem);
		line-height: 1.1;
		text-wrap: pretty;
	}

	& .mp-pie__texto {
		max-inline-size: 42rem;
		margin-block-start: .875rem;
		color: color-mix(in srgb, currentColor 90%, transparent);
		font-size: 1rem;
		line-height: 1.55;
	}

	/* Círculos de 48px; los iconos sin URL mantienen la misma composición. */
	& .mp-pie__redes {
		gap: .75rem;
		margin-block-start: 1rem;
		font-size: 1.5rem;

		& .wp-social-link {
			border: 1px solid rgb(255 255 255 / .3);
			border-radius: 50%;
			background: rgb(255 255 255 / .12);
			color: #fff;
		}

		& :is(.wp-block-social-link-anchor, .mp-pie__red-icono) {
			display: flex;
			align-items: center;
			justify-content: center;
			inline-size: 46px;
			block-size: 46px;
			margin: 0;
			padding: 0;
			border-radius: inherit;
		}

		& svg { inline-size: 22px; block-size: 22px; fill: currentColor; }
		& .wp-social-link.mp-pie__red > .mp-pie__red-icono { margin: 0; }
		& .wp-social-link:has(.mp-pie__red-icono):hover { transform: none; }
		& a:focus-visible { outline: 2px solid #d0d480; outline-offset: 4px; }
	}

	/* --- Menús ---------------------------------------------------------------- */

	& .mp-pie__menus {
		grid-area: menus;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40) 1.5rem;
		padding-block-start: clamp(1.75rem, 2.5vw, 2.5rem);
		border-block-start: 1px solid rgb(255 255 255 / .2);

		& > * {
			margin: 0;
		}
	}

	& .mp-pie__columna {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.1rem;

		& > * {
			margin: 0;
		}
	}

	& .mp-pie__titulo {
		color: inherit;
		font-family: var(--wp--preset--font-family--coolvetica);
		font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
		line-height: 1.1;
		letter-spacing: 0;
		text-transform: none;
	}

	& :is(.mp-pie__menu, .mp-pie__legal) {
		font-family: var(--wp--preset--font-family--poppins);
		font-size: clamp(1rem, 0.95rem + 0.15vw, 1.0625rem);
		font-weight: 400;

		& .wp-block-navigation-item__content {
			color: color-mix(in srgb, currentColor 90%, transparent);
			text-decoration: none;
			text-underline-offset: 0.3em;
			transition: color var(--mp-transicion);

			&:hover,
			&:focus-visible {
				color: var(--wp--preset--color--blanco);
				text-decoration: underline;
			}
		}
	}

	& .mp-pie__menu {
		gap: 0.85rem;
	}

	/* --- Franja de derechos ------------------------------------------------- */

	& .mp-pie__base {
		--mp-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0ZM12 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
		--mp-corazon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5Z'/%3E%3C/svg%3E");
		--mp-colombia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Cpath fill='%23fcd116' d='M0 0h6v2H0z'/%3E%3Cpath fill='%23003893' d='M0 2h6v1H0z'/%3E%3Cpath fill='%23ce1126' d='M0 3h6v1H0z'/%3E%3C/svg%3E");

		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.85rem;
		margin-block-start: var(--wp--preset--spacing--40);
		padding-block-start: var(--wp--preset--spacing--40);
		border-block-start: 1px solid color-mix(in srgb, currentColor 60%, transparent);
		font-size: var(--wp--preset--font-size--small);

		& > * {
			margin: 0;
		}
	}

	/* Pin, texto y bandera de Colombia (la bandera es decorativa: el texto ya lo dice). */
	& .mp-pie__pais {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;

		&::before {
			content: "";
			flex: none;
			inline-size: 1.35rem;
			block-size: 1.35rem;
			background-color: currentColor;
			-webkit-mask: var(--mp-pin) center / contain no-repeat;
			mask: var(--mp-pin) center / contain no-repeat;
		}

		&::after {
			content: "";
			flex: none;
			inline-size: 1.65rem;
			block-size: 1.1rem;
			margin-inline-start: 0.35rem;
			border-radius: 0.2rem;
			background: var(--mp-colombia) center / cover no-repeat;
		}
	}

	& .mp-pie__eslogan {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;

		&::before {
			content: "";
			flex: none;
			inline-size: 1.35rem;
			block-size: 1.35rem;
			background-color: currentColor;
			-webkit-mask: var(--mp-corazon) center / contain no-repeat;
			mask: var(--mp-corazon) center / contain no-repeat;
		}
	}
}

/* En la portada el pie sigue al newsletter: por encima de la ola asoma su verde. */
.wp-site-blocks:has(> main > .mp-newsletter:last-child) > footer .mp-pie {
	--mp-pie-arriba: var(--wp--preset--color--lima);
}

/* Tableta: el logo acompaña al texto y las redes quedan bajo la presentación. */
@media (width >= 48em) {
	.mp-pie .mp-pie__marca {
		grid-template-columns: 10rem minmax(0, 1fr);
		column-gap: 2.5rem;
		row-gap: 1.5rem;
	}
	.mp-pie .mp-pie__logo { grid-row: 1 / 3; }
	.mp-pie .mp-pie__comunidad { grid-column: 2; }
}

/* Los cuatro menús forman una fila, sin una columna de marca más alta. */
@media (width >= 64em) {
	.mp-pie .mp-pie__menus {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: clamp(1.5rem, 3vw, 3rem);
	}
}

/* Desde 64em, la franja de derechos en una fila: derechos, país y eslogan. */
@media (width >= 64em) {
	.mp-pie .mp-pie__base {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		column-gap: 1rem;
	}
}

/* Con sitio de sobra, el país queda centrado en la página. */
@media (width >= 80em) {
	.mp-pie .mp-pie__base {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

		& .mp-pie__eslogan {
			justify-self: end;
		}
	}
}

/* Escritorio: logo, mensaje de marca y redes equilibran la cabecera. */
@media (width >= 80em) {
	.mp-pie .mp-pie__marca {
		grid-template-columns: 11rem minmax(0, 1fr) auto;
		align-items: center;
		gap: clamp(2.5rem, 4vw, 4rem);
	}
	.mp-pie .mp-pie__logo { grid-row: auto; }
	.mp-pie .mp-pie__comunidad { grid-column: auto; }
}

@media (forced-colors: active) {
	.mp-pie :is(.mp-pie__pais, .mp-pie__eslogan)::before {
		background-color: CanvasText;
	}
}