/**
 * Malu Pops — «Pequeños pops, grandes beneficios» (patrón beneficios-elige).
 *
 * Solo se carga en las páginas que pintan un bloque con la clase .mp-elige.
 *
 * El banner lavanda que cierra la página comparte la distribución de
 * banner-accion.css: texto a la izquierda y botones a la derecha; en móvil,
 * una columna. Aquí se conservan la tipografía y los colores de la sección,
 * y los estilos de las ilustraciones para bloques guardados anteriormente.
 */

.mp-elige {
	padding-block: var(--wp--preset--spacing--70);

	& .mp-elige__banner {
		position: relative;
		isolation: isolate;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		overflow: hidden;
		border-radius: clamp(1.25rem, 0.9rem + 1vw, 1.875rem);
		background:
			radial-gradient(ellipse 40% 70% at 88% 18%, rgb(253 224 239 / 0.9), transparent 70%),
			#e8e5fd;

		& > * {
			margin: 0;
		}
	}

	& .mp-elige__texto {
		align-self: center;
		padding: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(1.5rem, 0.6rem + 3vw, 3rem) 0;

		& > * {
			margin: 0;
		}
	}

	& .mp-elige__titulo {
		color: var(--wp--preset--color--contrast);
		font-family: var(--wp--preset--font-family--poppins);
		font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem);
		font-weight: 600;
		line-height: 1.18;
		letter-spacing: -0.025em;
		text-transform: none;
	}

	& .mp-elige__entradilla {
		max-inline-size: 26rem;
		margin-block-start: clamp(0.75rem, 0.5rem + 0.6vw, 1.1rem);
		color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, var(--wp--preset--color--base));
		font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3125rem);
		line-height: 1.45;
	}

	& .mp-elige__botones {
		gap: 0.75rem 1rem;
		margin-block-start: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
	}

	& .mp-elige__botones .wp-block-button__link {
		justify-content: center;
		min-block-size: 3.5rem;
		padding: 0.8em 1.75em;
		border: 2px solid var(--wp--preset--color--morado);
		border-radius: 1.125rem;
		font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
		letter-spacing: 0;
		text-transform: none;
		transition: background-color var(--mp-transicion), color var(--mp-transicion), transform var(--mp-transicion);

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

	& .mp-elige__comprar .wp-block-button__link {
		background-color: var(--wp--preset--color--morado);
		color: var(--wp--preset--color--blanco);
		box-shadow: 0 1rem 2rem -1.25rem rgb(83 42 209 / 0.7);

		&:hover,
		&:focus-visible {
			border-color: var(--wp--preset--color--morado-hondo);
			background-color: var(--wp--preset--color--morado-hondo);
			color: var(--wp--preset--color--blanco);
		}
	}

	& .mp-elige__ver .wp-block-button__link {
		display: inline-flex;
		align-items: center;
		background-color: transparent;
		color: var(--wp--preset--color--morado);

		&:hover,
		&:focus-visible {
			background-color: var(--wp--preset--color--morado);
			color: var(--wp--preset--color--blanco);
		}
	}

	/*
	 * El personaje apoyado en el borde de abajo y el rótulo a su derecha,
	 * algo más arriba, como en el concepto. Sus «sizes», en inc/Imagen.php.
	 */
	& .mp-elige__ilustracion {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: end;
		gap: clamp(0.5rem, 0.2rem + 1vw, 1.5rem);
		margin-block-start: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
		padding-inline: clamp(1rem, 0.5rem + 2vw, 2.5rem);

		& > * {
			margin: 0;
		}
	}

	& .mp-elige__personaje {
		line-height: 0;

		& img {
			display: block;
			inline-size: 100%;
			block-size: auto;
		}
	}

	& .mp-elige__rotulo {
		align-self: center;
		max-inline-size: 18rem;
		font-family: var(--wp--preset--font-family--poppins);
		font-size: clamp(.9375rem, .8rem + .5vw, 1.25rem);
		font-weight: 600;
		line-height: 1.35;
		letter-spacing: -0.025em;
		text-transform: none;
		text-wrap: balance;
	}
}

@media (width >= 48em) {
	.mp-elige {
		& .mp-elige__banner {
			grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
			column-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
		}

		& .mp-elige__texto {
			padding: clamp(2.25rem, 1rem + 3vw, 4rem) 0 clamp(2.25rem, 1rem + 3vw, 4rem) clamp(1.75rem, 0.75rem + 2.6vw, 3.5rem);
		}

		& .mp-elige__ilustracion {
			align-self: end;
			margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.mp-elige .mp-elige__botones .wp-block-button__link {
		transition: none;
	}
}

@media (forced-colors: active) {
	.mp-elige .mp-elige__banner {
		border: 1px solid CanvasText;
	}
}