/**
 * Malu Pops — newsletter juvenil de la portada.
 * Coolvetica en titulares y Poppins en textos, como productos y esencia.
 * Verde lima plano, tarjetas originales y fotografías en cápsulas de marca.
 * El formulario mantiene sus estilos autónomos al final de este archivo.
 * Los tamaños de la composición se coordinan con inc/Imagen.php.
 */
.mp-newsletter {
	--mp-fondo: var(--wp--preset--color--lima);
	--mp-foco: var(--wp--preset--color--morado-hondo);
	--mp-union: #f6f0e5;
	--mp-onda-alto: clamp(1.5rem, 3.4vw, 3rem);
	position: relative;
	overflow: clip;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	padding-block-start: calc(var(--wp--preset--spacing--60) + var(--mp-onda-alto) / 2);
	background: var(--mp-fondo);
	color: var(--wp--preset--color--cacao);
	font-family: var(--wp--preset--font-family--poppins);
	scroll-margin-top: 6rem;
}
.mp-newsletter.wp-block-group { margin-block-start: 0; }
/* El color de esencia cubre el borde superior con una onda de poca altura. */
.mp-esencia + .mp-newsletter::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline: 0;
	block-size: var(--mp-onda-alto);
	background: var(--mp-union);
	-webkit-mask: url("../../img/newsletter/onda-suave.svg") center / 100% 100% no-repeat;
	mask: url("../../img/newsletter/onda-suave.svg") center / 100% 100% no-repeat;
	pointer-events: none;
}
.mp-newsletter__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "texto" "ventajas" "imagen";
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}
.mp-newsletter__rejilla > *,
.mp-newsletter__texto > *,
.mp-newsletter .mp-ventajas > *,
.mp-newsletter .mp-ventaja > * { margin: 0; }
.mp-newsletter__texto { grid-area: texto; min-inline-size: 0; }
.mp-newsletter__antetitulo {
	color: #3b4421;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.mp-newsletter .mp-newsletter__titulo {
	max-inline-size: 11.5em;
	margin-block-start: 1.25rem;
	color: inherit;
	font-family: var(--wp--preset--font-family--coolvetica);
	font-size: clamp(3rem, 5.3vw, 5.25rem);
	font-weight: 400;
	line-height: .98;
	letter-spacing: -.025em;
	text-transform: none;
	text-wrap: balance;
}
.mp-newsletter__titulo span { display: block; color: var(--wp--preset--color--morado-hondo); }
.mp-newsletter .mp-newsletter__entradilla {
	max-inline-size: 34rem;
	margin-block-start: 1.6rem;
	font-size: clamp(1rem, 1.15vw, 1.125rem);
	line-height: 1.65;
}
.mp-newsletter .mp-suscripcion {
	--mp-linea: rgb(43 21 16 / .25);
	margin-block-start: 1.75rem;
}
.mp-newsletter .mp-suscripcion .mp-suscripcion__boton {
	border-color: var(--mp-campo);
	background-color: var(--wp--preset--color--morado-hondo);
	color: #fffaf2;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}
.mp-newsletter .mp-suscripcion .mp-suscripcion__boton:hover,
.mp-newsletter .mp-suscripcion .mp-suscripcion__boton:focus-visible {
	background-color: #29175d;
	color: #fffaf2;
}
.mp-newsletter .mp-suscripcion .mp-suscripcion__nota { font-size: .75rem; line-height: 1.5; }
.mp-newsletter .mp-suscripcion .mp-suscripcion__nota::before { inline-size: 1.1rem; block-size: 1.1rem; }
.mp-newsletter {
	/* --- Tarjetas ----------------------------------------------------------- */

	& .mp-ventajas {
		grid-area: ventajas;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
		max-inline-size: 43.5rem;

		& > * {
			margin: 0;
		}
	}

	/*
	 * En móvil, la ilustración a la izquierda y el texto a su lado; desde 40em,
	 * en columna. --mp-borde es a la vez el relleno de abajo y de la derecha y
	 * la distancia de la flecha a esos bordes: así el hueco que le guarda el
	 * texto cae justo debajo de ella.
	 */
	& .mp-ventaja {
		--mp-circulo: clamp(2rem, 1.75rem + 0.5vw, 2.35rem);
		--mp-borde: clamp(0.75rem, 0.6rem + 0.3vw, 0.95rem);

		position: relative;
		display: grid;
		grid-template-columns: clamp(4.75rem, 3.5rem + 5vw, 6.5rem) minmax(0, 1fr);
		grid-template-areas: "icono titulo" "icono texto";
		align-items: center;
		column-gap: 0.9rem;
		padding: 0.85rem var(--mp-borde) var(--mp-borde) 0.75rem;
		border: 1px solid rgb(255 255 255 / 0.75);
		border-radius: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
		background: linear-gradient(var(--mp-tarjeta-arriba), var(--mp-tarjeta-abajo));
		box-shadow: 0 1rem 1.75rem -1.25rem rgb(150 90 0 / 0.5);

		& > * {
			margin: 0;
		}

		/* Flecha decorativa: el círculo (::before) y la flecha del tema encima (::after). */
		&::before,
		&::after {
			content: "";
			position: absolute;
			inset-block-end: var(--mp-borde);
			inset-inline-end: var(--mp-borde);
			inline-size: var(--mp-circulo);
			block-size: var(--mp-circulo);
		}

		&::before {
			border-radius: 50%;
			background-color: var(--mp-tono);
		}

		&::after {
			background-color: var(--mp-tono-flecha);
			-webkit-mask: var(--mp-flecha) center / 48% no-repeat;
			mask: var(--mp-flecha) center / 48% no-repeat;
		}
	}

	/* Colores de cada tarjeta, del concepto: fondo en degradado, círculo y flecha. */
	& .mp-ventaja--recetas {
		--mp-tarjeta-arriba: #fdf8f3;
		--mp-tarjeta-abajo: #fef0de;
		--mp-tono: #f698ae;
		--mp-tono-flecha: #a3123a;
	}

	& .mp-ventaja--novedades {
		--mp-tarjeta-arriba: #f6fafc;
		--mp-tarjeta-abajo: #eef4f3;
		--mp-tono: #a8defe;
		--mp-tono-flecha: #1c2c91;
	}

	& .mp-ventaja--promociones {
		--mp-tarjeta-arriba: #fdfbf1;
		--mp-tarjeta-abajo: #fdf5da;
		--mp-tono: #bce8a1;
		--mp-tono-flecha: #1d3a12;
	}

	/* Ilustración del cliente: decorativa (el título ya lo dice). */
	& .mp-ventaja__icono {
		grid-area: icono;

		& img {
			display: block;
			inline-size: 100%;
			block-size: auto;
			aspect-ratio: auto 320 / 222;
		}
	}

	& .mp-ventaja__titulo {
		grid-area: titulo;
		align-self: end;
		color: inherit;
		font-family: var(--wp--preset--font-family--coolvetica);
		font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
		line-height: 1.05;
	}

	& .mp-ventaja__texto {
		grid-area: texto;
		align-self: start;
		display: flow-root;
		margin-block-start: 0.3em;
		color: color-mix(in srgb, currentColor 88%, transparent);
		font-size: clamp(0.8125rem, 0.75rem + 0.15vw, 0.9375rem);
		line-height: 1.35;

		/* Hueco de la flecha al final de la última línea. */
		&::after {
			content: "";
			float: inline-end;
			inline-size: calc(var(--mp-circulo) + 0.4rem);
			block-size: var(--mp-circulo);
		}
	}

	/* --- Imagen ------------------------------------------------------------- */

	& .mp-newsletter__imagen {
		grid-area: imagen;
		position: relative;
		isolation: isolate;
		align-self: center;
		justify-self: center;
		inline-size: min(100%, 36rem);
		aspect-ratio: 1 / 1.55;
		container-type: inline-size;
		margin: 0;

		& > * { margin: 0; }

		/* Cápsulas rectas: silueta rosa y un contorno fino de la paleta. */
		&::before,
		&::after {
			content: "";
			position: absolute;
			z-index: -1;
			border-radius: 999px;
			pointer-events: none;
		}

		&::before {
			inset-block-start: 4%;
			inset-inline-start: 23%;
			inline-size: 70%;
			block-size: 96%;
			background: var(--wp--preset--color--rosa);
		}

		&::after {
			inset-block-start: 0;
			inset-inline-start: 8%;
			inline-size: 70%;
			block-size: 96%;
			border: 1px solid var(--wp--preset--color--morado);
		}
	}

	& .mp-newsletter__foto {
		position: absolute;
		overflow: hidden;
		box-sizing: border-box;
		border: 0;
		border-radius: 999px;

		& picture { display: block; block-size: 100%; }

		& img {
			display: block;
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}
	}

	& .mp-newsletter__foto--principal {
		inset-block-start: 1.5%;
		inset-inline-start: 14%;
		inline-size: 70%;
		block-size: 96%;
		& img { object-position: 51% center; }
	}

	& .mp-newsletter__foto--snack {
		z-index: 1;
		inset-block-end: 0;
		inset-inline-end: 0;
		inline-size: 29%;
		block-size: 34%;
		border: 6px solid var(--mp-fondo);
		& img {
			object-position: center center;
		}
	}

	& .mp-newsletter__flotante {
		position: absolute;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: .4em;
		color: var(--wp--preset--color--morado-hondo);
		font-family: var(--wp--preset--font-family--poppins);
		font-size: clamp(.875rem, 3.6cqi, 1.25rem);
		font-weight: 400;
		line-height: 1.25;
		letter-spacing: -.015em;
		white-space: nowrap;
	}

	& .mp-newsletter__etiqueta {
		display: grid;
		place-items: center;
		min-inline-size: 7.1em;
		min-block-size: 2.85em;
		padding-inline: 1.4em;
		box-sizing: border-box;
		border-radius: 999px;
		background: var(--wp--preset--color--morado);
		color: white;
	}

	& .mp-newsletter__simbolo {
		position: relative;
		box-sizing: border-box;
		inline-size: 2.85em;
		block-size: 2.85em;
		border: 1px solid currentColor;
		border-radius: 50%;
		background: var(--mp-fondo);

		&::before {
			content: "";
			position: absolute;
			inset: 24%;
			background: currentColor;
			-webkit-mask: var(--mp-flotante-icono) center / contain no-repeat;
			mask: var(--mp-flotante-icono) center / contain no-repeat;
		}
	}

	& .mp-newsletter__flotante--crunch {
		--mp-flotante-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.6 6.4L21 12l-6.4 2.6L12 21l-2.6-6.4L3 12l6.4-2.6L12 3Z'/%3E%3C/svg%3E");
		inset-block-start: 45%;
		inset-inline-end: 0;
	}

	& .mp-newsletter__flotante--disfruta {
		--mp-flotante-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11h16a8 8 0 0 1-16 0Zm4 8h8M8 7V4m4 3V3m4 4V4'/%3E%3C/svg%3E");
		inset-block-end: 15%;
		inset-inline-start: 0;
		flex-direction: row-reverse;
		& .mp-newsletter__etiqueta {
			background: var(--wp--preset--color--rosa);
			color: var(--wp--preset--color--morado-hondo);
		}
	}
}

/* Tableta y escritorio: las tres tarjetas en fila, con la ilustración arriba. */
@media (width >= 40em) {
	.mp-newsletter {
		& .mp-ventajas {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		& .mp-ventaja {
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: auto auto 1fr;
			grid-template-areas: "icono" "titulo" "texto";
			align-items: start;
			padding-block-start: 0.6rem;
			padding-inline-start: clamp(1rem, 0.75rem + 0.5vw, 1.4rem);
		}

		& .mp-ventaja__icono {
			justify-self: center;
			inline-size: min(100%, 9rem);
			margin-block-end: 0.4rem;
		}
	}
}

/*
 * Escritorio: texto y tarjetas a la izquierda; el collage ocupa las dos filas
 * de la derecha, dentro del contenedor para conservar los encuadres.
 */
@media (width >= 64em) {
	.mp-newsletter {
		& .mp-newsletter__rejilla {
			grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
			grid-template-rows: auto 1fr;
			grid-template-areas: "texto imagen" "ventajas imagen";
			column-gap: var(--wp--preset--spacing--50);
		}

		& .mp-ventajas {
			align-self: start;
		}

		& .mp-newsletter__imagen {
			/* Sigue la altura real del texto, el formulario y las tarjetas. */
			align-self: stretch;
			justify-self: end;
			inline-size: min(100%, 36rem);
			aspect-ratio: auto;
			min-block-size: 0;
		}
	}
}

@media (width < 40em) {
	.mp-newsletter .mp-newsletter__titulo { font-size: clamp(2.65rem, 11.2vw, 4.5rem); }
	.mp-newsletter .mp-newsletter__foto--snack { border-width: 4px; }
}

/* --- Formulario (bloque malupops/suscripcion) ------------------------------ */

/*
 * Iconos de Lucide (ISC) como máscara, para que tomen el color del texto: el
 * sobre del campo y el escudo de la nota. La flecha del botón es la del tema
 * (--mp-flecha, base.css).
 */
.mp-suscripcion {
	--mp-alto: 3.5rem;
	--mp-campo: #fef8ee;
	--mp-linea: color-mix(in srgb, currentColor 70%, transparent);
	--mp-sobre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3C/svg%3E");
	--mp-escudo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");

	container-type: inline-size;
	display: grid;
	gap: 0.75rem;
	inline-size: 100%;
	max-inline-size: 43.5rem;
	color: var(--wp--preset--color--cacao);

	& > * {
		margin: 0;
	}

	/* En pantallas estrechas: el campo y, debajo, el botón, los dos en píldora. */
	& .mp-suscripcion__campo {
		position: relative;
		display: grid;
		gap: 0.75rem;

		/* El sobre, dentro del campo. */
		&::before {
			content: "";
			position: absolute;
			z-index: 1;
			inset-block-start: calc(var(--mp-alto) / 2);
			inset-inline-start: 1.35rem;
			inline-size: 1.6rem;
			block-size: 1.6rem;
			translate: 0 -50%;
			background-color: color-mix(in srgb, currentColor 85%, transparent);
			-webkit-mask: var(--mp-sobre) center / contain no-repeat;
			mask: var(--mp-sobre) center / contain no-repeat;
			pointer-events: none;
		}
	}

	& .mp-suscripcion__correo {
		box-sizing: border-box;
		inline-size: 100%;
		min-inline-size: 0;
		min-block-size: var(--mp-alto);
		margin: 0;
		padding: 0 1rem 0 3.6rem;
		border: 1.5px solid var(--mp-linea);
		border-radius: 999px;
		background-color: var(--mp-campo);
		color: inherit;
		font-family: var(--wp--preset--font-family--poppins);

		/* 16 px como mínimo: con menos, iOS Safari amplía la página al tocarlo. */
		font-size: max(1rem, var(--wp--preset--font-size--small));
		line-height: 1.2;

		&::placeholder {
			color: color-mix(in srgb, currentColor 72%, transparent);
			opacity: 1;
		}
	}

	/* Color y tipografía, los de todos los botones (theme.json); sin mayúsculas, como en el concepto. */
	& .mp-suscripcion__boton {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.6em;
		min-block-size: var(--mp-alto);
		margin: 0;
		padding: 0.4em 1.5em;
		border-radius: 999px;
		font-size: var(--wp--preset--font-size--large);
		letter-spacing: 0;
		text-transform: none;
		cursor: pointer;
		transition: background-color var(--mp-transicion), transform var(--mp-transicion);

		&::after {
			content: "";
			flex: none;
			inline-size: 1.05em;
			block-size: 1.05em;
			background-color: currentColor;
			-webkit-mask: var(--mp-flecha) center / contain no-repeat;
			mask: var(--mp-flecha) center / contain no-repeat;
			transition: translate var(--mp-transicion);
		}

		&:hover::after,
		&:focus-visible::after {
			translate: 0.2em 0;
		}

		&:active {
			transform: scale(0.98);
		}
	}

	& .mp-suscripcion__nota {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding-inline-start: 0.5rem;
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.35;

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

	/* Resultado del envío, encima del campo: la vuelta del formulario baja hasta aquí. */
	& .mp-suscripcion__aviso {
		padding: 0.7rem 1.1rem;
		border-radius: 1rem;
		background-color: rgb(255 255 255 / 0.72);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		line-height: 1.4;
	}

	& .mp-suscripcion__aviso--error {
		border-inline-start: 0.3rem solid var(--wp--preset--color--naranja-hondo);
	}

	/* Trampa para robots: fuera de la vista (y aria-hidden en el marcado). */
	& .mp-suscripcion__trampa {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Con sitio: una sola píldora con el botón encajado en su extremo. */
@container (width >= 31.5rem) {
	.mp-suscripcion {
		& .mp-suscripcion__campo {
			--mp-alto: 3.75rem;

			box-sizing: border-box;
			display: flex;
			gap: 0;
			min-block-size: var(--mp-alto);
			border: 1.5px solid var(--mp-linea);
			border-radius: 999px;
			background-color: var(--mp-campo);

			&::before {
				inset-block-start: 50%;
			}

			/* El anillo de foco rodea la píldora entera, no solo el campo. */
			&:has(.mp-suscripcion__correo:focus-visible) {
				outline: 3px solid var(--mp-foco);
				outline-offset: 3px;
			}
		}

		& .mp-suscripcion__correo {
			flex: 1 1 auto;
			inline-size: auto;
			min-block-size: 0;
			border: 0;
			background: none;

			&:focus-visible {
				outline: none;
			}
		}

		/* Encajado: tapa el borde de la píldora por la derecha, con su aro crema. */
		& .mp-suscripcion__boton {
			flex: none;
			min-block-size: 0;
			margin: -1.5px -1.5px -1.5px 0;
			border: 3px solid var(--mp-campo);
		}
	}
}

@media (forced-colors: active) {
	.mp-suscripcion :is(.mp-suscripcion__campo, .mp-suscripcion__nota)::before,
	.mp-newsletter .mp-ventaja::after {
		background-color: CanvasText;
	}
}