/**
 * Malu Pops — lo común de las secciones de la ficha de producto bajo la
 * compra (tabla nutricional, ingredientes, descripción y valoraciones), según
 * el concepto single-product-section2.
 *
 * Se carga con la clase .mp-ficha-seccion, que va primera en cada sección:
 * así la hoja de cada una se imprime después y puede ajustar lo de aquí.
 * También la llevan las secciones de la página de beneficios (razones,
 * sabores y ciencia), con los mismos titulares grandes.
 *
 * - Titular grande en Coolvetica (la palabra destacada, en morado con el
 *   color del editor) con las rayas amarillas del cliente arriba a la
 *   derecha: el titular va al ancho de su texto para que caigan junto a la
 *   última palabra.
 * - En la ficha de producto y beneficios, los personajes sustituyen las rayas;
 *   cada sección reserva su espacio para mantener el título legible.
 * - Entradilla en morado noche aclarado y, si la lleva, antetítulo entre dos
 *   filetes.
 */

.mp-ficha-seccion {
	text-align: center;
}

/* Antetítulo: «MALU POPS» entre dos filetes. */
.mp-ficha-seccion .mp-ficha-seccion__antetitulo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.85rem, 0.5rem + 1.2vw, 1.4rem);
	margin-block: 0 clamp(0.85rem, 0.5rem + 1vw, 1.5rem);
	color: var(--wp--preset--color--morado);
	font-family: var(--wp--preset--font-family--coolvetica);
	font-size: clamp(1.0625rem, 0.9rem + 0.55vw, 1.375rem);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	&::before,
	&::after {
		content: "";
		inline-size: clamp(2.5rem, 0.5rem + 6vw, 6rem);
		block-size: 2px;
		border-radius: 1px;
		background-color: currentColor;
		opacity: 0.5;
	}
}

.mp-ficha-seccion .mp-ficha-seccion__titulo {
	position: relative;
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-block: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--coolvetica);
	font-size: clamp(2.75rem, 1rem + 6.2vw, 7rem);
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: none;

	&::after {
		content: "";
		position: absolute;
		inset-block-start: -0.3em;
		inset-inline-start: calc(100% - 0.02em);
		inline-size: 0.46em;
		aspect-ratio: 180 / 170;
		background: url("../../img/esencia/rayas.webp") center / contain no-repeat;
		pointer-events: none;
	}
}

/* Los títulos de las secciones de marca comparten Poppins con la portada. */
.mp-pagina-beneficios .mp-ficha-seccion__titulo {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	letter-spacing: -0.025em;
	text-transform: none;
	font-size: clamp(2rem, 1.35rem + 2.3vw, 3.5rem);
	line-height: 1.18;
}

.mp-ficha-seccion .mp-ficha-seccion__entradilla {
	margin-block: clamp(0.5rem, 0.3rem + 0.5vw, 0.85rem) 0;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, var(--wp--preset--color--base));
	font-size: clamp(1.125rem, 0.8rem + 1.1vw, 1.625rem);
	line-height: 1.35;
}

/* Variantes de los títulos principales de la ficha de producto. */
.mp-ficha :is(.mp-ingredientes, .mp-descripcion, .mp-valoraciones) .mp-ficha-seccion__titulo {
	--mp-personaje-ancho: clamp(2rem, 0.72em, 5rem);
	--mp-personaje-separacion: 0.2em;
	box-sizing: border-box;
	padding-inline-end: calc(var(--mp-personaje-ancho) + var(--mp-personaje-separacion));

	&::after {
		inset: auto;
		inset-inline-end: 0;
		inset-block-end: 0;
		inline-size: var(--mp-personaje-ancho);
		aspect-ratio: var(--mp-personaje-proporcion);
		background: var(--mp-personaje) center / contain no-repeat;
	}
}

/* El personaje lima saluda desde la izquierda, orientado hacia «Ingredientes». */
.mp-ficha .mp-ingredientes .mp-ficha-seccion__titulo {
	--mp-personaje: url("../../svg/personaje-lima-saludando.svg");
	--mp-personaje-proporcion: 656.49 / 1027.74;
	padding-inline: calc(var(--mp-personaje-ancho) + var(--mp-personaje-separacion)) 0;

	&::after {
		inset-inline: 0 auto;
		inset-block-end: -0.03em;
	}
}

/* El sentado acompaña la última palabra, también cuando el título se parte. */
.mp-ficha .mp-descripcion .mp-ficha-seccion__titulo {
	--mp-personaje: url("../../svg/personaje-azul-sentado.svg");
	--mp-personaje-proporcion: 1003.52 / 1058.57;
	--mp-personaje-ancho: clamp(3rem, 0.95em, 6.75rem);

	&::after {
		content: none;
	}

	& mark {
		position: relative;
		display: inline-block;

		&::after {
			content: "";
			position: absolute;
			inset-inline-start: calc(100% + var(--mp-personaje-separacion));
			inset-block-end: 0.04em;
			inline-size: var(--mp-personaje-ancho);
			aspect-ratio: var(--mp-personaje-proporcion);
			background: var(--mp-personaje) center / contain no-repeat;
			pointer-events: none;
		}
	}
}

/* Otro saludo, esta vez a la derecha y mirando al título de las opiniones. */
.mp-ficha .mp-valoraciones .mp-ficha-seccion__titulo {
	--mp-personaje: url("../../svg/personaje-azul-saludando.svg");
	--mp-personaje-proporcion: 656.49 / 1027.74;
	/* El personaje ocupa su propia columna: nunca puede quedar sobre «Va». */
	display: flex;
	align-items: center;
	gap: var(--mp-personaje-separacion);
	padding-inline: 0;

	&::after {
		position: static;
		flex: none;
		scale: -1 1;
	}
}

/* Las palabras largas siguen enteras en los móviles más estrechos. */
@media (width < 24em) {
	.mp-ficha :is(.mp-ingredientes, .mp-valoraciones) .mp-ficha-seccion__titulo {
		font-size: 2.5rem;
	}
}

/* Beneficios: solo los encabezados de sección, con un hueco propio por personaje. */
.mp-pagina-beneficios :is(.mp-razones, .mp-sabores, .mp-ciencia) .mp-ficha-seccion__titulo {
	--mp-personaje-ancho: clamp(3rem, 0.9em, 6.25rem);
	--mp-personaje-separacion: 0.22em;
	box-sizing: border-box;
	padding-inline-end: calc(var(--mp-personaje-ancho) + var(--mp-personaje-separacion));

	&::after {
		inset: auto;
		inset-inline-end: 0;
		inset-block-start: 50%;
		inline-size: var(--mp-personaje-ancho);
		aspect-ratio: var(--mp-personaje-proporcion);
		background: var(--mp-personaje) center / contain no-repeat;
		translate: 0 -50%;
	}
}

/* Presentando a la izquierda de la pregunta, incluso cuando ocupa varias líneas. */
.mp-pagina-beneficios .mp-razones .mp-ficha-seccion__titulo {
	--mp-personaje: url("../../svg/personaje-azul-presentando.svg");
	--mp-personaje-proporcion: 894.37 / 1054.66;
	max-inline-size: min(100%, 8.3em);
	padding-inline: calc(var(--mp-personaje-ancho) + var(--mp-personaje-separacion)) 0;

	&::after {
		inset-inline: 0 auto;
	}
}

/* Saltando a la derecha de «Dos sabores», un poco por encima de su base. */
.mp-pagina-beneficios .mp-sabores .mp-ficha-seccion__titulo {
	--mp-personaje: url("../../svg/personaje-azul-saltando.svg");
	--mp-personaje-proporcion: 1018.89 / 924.24;
	--mp-personaje-ancho: clamp(3.25rem, 1.05em, 7.25rem);

	&::after {
		inset-block-start: 42%;
		scale: -1 1;
	}
}

/* El pensativo acompaña a «Hecho con ciencia» desde la izquierda. */
.mp-pagina-beneficios .mp-ciencia .mp-ficha-seccion__titulo {
	--mp-personaje: url("../../svg/personaje-azul-pensando.svg");
	--mp-personaje-proporcion: 789.8 / 995.33;
	--mp-personaje-ancho: clamp(2.75rem, 0.75em, 5.25rem);
	padding-inline: calc(var(--mp-personaje-ancho) + var(--mp-personaje-separacion)) 0;

	&::after {
		inset-inline: 0 auto;
		inset-block-start: 54%;
		scale: -1 1;
	}
}

/* Escala de titulares de producto aplicada a toda la página de beneficios. */
.mp-pagina-beneficios :is(.mp-sabores, .mp-ciencia) .mp-ficha-seccion__titulo {
 font-size: clamp(3rem, 1rem + 6.2vw, 7.5rem);
}

/* Titulares limpios en beneficios y en las secciones del producto. */
:is(.mp-pagina-beneficios, .mp-ficha) .mp-ficha-seccion .mp-ficha-seccion__titulo.wp-block-heading {
 padding-inline: 0;
}
:is(.mp-pagina-beneficios, .mp-ficha) .mp-ficha-seccion .mp-ficha-seccion__titulo.wp-block-heading::before,
:is(.mp-pagina-beneficios, .mp-ficha) .mp-ficha-seccion .mp-ficha-seccion__titulo.wp-block-heading::after,
:is(.mp-pagina-beneficios, .mp-ficha) .mp-ficha-seccion .mp-ficha-seccion__titulo.wp-block-heading mark::after {
 content: none;
}