/**
 * Ajustes finos a bloques core y estilos de bloque del tema.
 */

/* ---------- Botones ---------- */

.wp-element-button {
	transition: filter var(--wp--custom--transicion);
}

.wp-element-button:not(.wp-block-button__link):hover,
.wp-element-button:not(.wp-block-button__link):focus-visible {
	filter: brightness(0.9);
}

/*
 * «Nivel de aceite»: al pasar el mouse el color sube desde abajo como líquido,
 * con la superficie ondulada (un cuadrado redondeado enorme que gira).
 * --liquido es el color que sube y --liquido-texto el del texto al llenarse.
 */
@keyframes liquimoly-ola {
	to {
		transform: rotate(360deg);
	}
}

.wp-block-button__link {
	--liquido: var(--wp--preset--color--rojo);
	--liquido-texto: var(--wp--preset--color--blanco);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: color 300ms ease 120ms;
}

.wp-block-button__link::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 115%;
	left: 50%;
	width: 260%;
	aspect-ratio: 1;
	border-radius: 43%;
	background-color: var(--liquido);
	translate: -50% 0;
	visibility: hidden;
	animation: liquimoly-ola 2.6s linear infinite paused;
	/* Al soltar el mouse se oculta cuando termina de bajar: girado, el borde
	   del líquido puede quedar asomando unos píxeles en botones anchos. */
	transition: top 520ms cubic-bezier(0.3, 0.6, 0.3, 1), visibility 0s linear 520ms;
	pointer-events: none;
}

.wp-block-button__link:hover::before,
.wp-block-button__link:focus-visible::before {
	top: -190%;
	visibility: visible;
	animation-play-state: running;
	transition-delay: 0s;
}

.wp-block-button.is-style-rojo .wp-block-button__link,
.wp-block-button.is-style-contorno-azul .wp-block-button__link {
	--liquido: var(--wp--preset--color--azul);
}

/* Sobre fondo azul (pie) el líquido es blanco para que el botón no se pierda. */
.has-azul-background-color .wp-block-button .wp-block-button__link {
	--liquido: var(--wp--preset--color--blanco);
	--liquido-texto: var(--wp--preset--color--azul);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link::before {
		animation: none;
	}
}

.wp-block-button.is-style-rojo .wp-block-button__link {
	background-color: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
}

.wp-block-button.is-style-contorno-azul .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--azul);
	background-color: transparent;
	color: var(--wp--preset--color--azul);
	padding: calc(0.6em - 2px) calc(1.4em - 2px);
}

/* Va después de los estilos rojo y contorno para ganarles en el color del texto. */
.wp-block-button > .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--liquido-texto);
}

/* ---------- Cabecera y navegación ---------- */

/*
 * El logo sale del contenedor hacia la izquierda (alineado a un ancho de 1600 px) y
 * las dos franjas azul y roja llenan el espacio hasta el borde de la pantalla.
 * El menú sí queda alineado al contenedor de contenido.
 */
.cabecera {
	--cabecera-logo: var(--wp--custom--cabecera--logo);
	--cabecera-logo-izq: max(1.5rem, (100% - 1600px) / 2);
	position: relative;
	min-height: var(--wp--custom--cabecera--alto);
	padding-right: max(var(--wp--style--root--padding-right), (100% - var(--wp--style--global--content-size)) / 2) !important;
	padding-left: var(--cabecera-logo-izq) !important;
}

/* Proporciones tomadas del diseño: cada franja mide 28 % del alto del logo. */
.cabecera::before {
	content: "";
	position: absolute;
	top: calc(50% - var(--cabecera-logo) * 0.32);
	left: 0;
	width: var(--cabecera-logo-izq);
	height: calc(var(--cabecera-logo) * 0.63);
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--azul) 0 44%,
		var(--wp--preset--color--blanco) 44% 56%,
		var(--wp--preset--color--rojo) 56% 100%
	);
	pointer-events: none;
}

.cabecera .logo,
.cabecera .logo a {
	display: block;
	margin: 0;
	line-height: 0;
}

.cabecera .logo img {
	width: auto;
	height: var(--cabecera-logo);
}

.cabecera .wp-block-navigation {
	gap: clamp(1.5rem, 5.5vw, 4.75rem);
	font-size: 0.875rem;
}

.cabecera .wp-block-navigation__container {
	gap: inherit;
}

/* «Nivel de aceite» en el menú de escritorio: el texto se llena de azul desde abajo. */
.cabecera .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	background-image: linear-gradient(to top, var(--wp--preset--color--azul) 50%, var(--wp--preset--color--negro) 50%);
	background-position: 0 0;
	background-size: 100% 200%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: background-position 320ms ease;
}

.cabecera .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover,
.cabecera .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:focus-visible,
.cabecera .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content,
.cabecera .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[aria-current="page"] {
	background-position: 0 100%;
}

/* Ícono de enlace externo en azul (#00519E) y más grande, como en el diseño. */
.cabecera .icono-externo .wp-block-navigation-item__content::after {
	width: 3em;
	height: 3em;
	margin-block: -0.75em;
	background-color: var(--wp--preset--color--azul);
}

.cabecera .is-menu-open .icono-externo .wp-block-navigation-item__content::after {
	background-color: currentColor;
}

@media (max-width: 959px) {
	.cabecera {
		--cabecera-logo: var(--wp--custom--cabecera--logo-movil);
		--cabecera-logo-izq: 2.5rem;
		min-height: var(--wp--custom--cabecera--alto-movil);
	}
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--azul);
}

/* Menú hamburguesa por debajo de 960 px (el bloque lo trae a 600 px). */
@media (min-width: 600px) and (max-width: 959px) {
	.cabecera .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.cabecera .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Botón hamburguesa: ícono del diseño, cuadro azul con líneas blancas. */
.cabecera .wp-block-navigation__responsive-container-open {
	padding: 0;
	color: var(--wp--preset--color--azul);
	transition: filter var(--wp--custom--transicion);
}

.cabecera .wp-block-navigation__responsive-container-open .icono-menu {
	width: 2.75rem;
	height: 2.75rem;
}

.cabecera .wp-block-navigation__responsive-container-open:hover,
.cabecera .wp-block-navigation__responsive-container-open:focus-visible {
	filter: brightness(0.85);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--blanco);
	text-decoration: underline;
}

/* ---------- Imágenes ---------- */

/* Los logos no llevan esquinas redondeadas. */
.wp-block-image.logo img,
.wp-block-image.logo {
	border-radius: 0;
}

/* ---------- Grupos ---------- */

.is-style-tarjeta {
	overflow: hidden;
	border-radius: var(--wp--custom--radio--tarjeta);
}

/* ---------- Pie de página ---------- */

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

.pie .logo {
	margin: 0;
}

.pie .logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

.pie .pie__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--espaciado-letras);
	line-height: 1.25;
	text-transform: uppercase;
}

.pie .pie__titulo--grande {
	font-size: 1.125rem;
}

.pie .pie__datos {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
}

/* Barra legal: año, copyright, políticas y desarrollador. */
.pie .pie__legal {
	margin-top: 3.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgb(255 255 255 / 0.25);
	font-size: 0.8125rem;
	row-gap: 0.4rem;
}

.pie .pie__legal p {
	margin: 0;
	opacity: 0.85;
}

.pie .pie__legal a {
	font-weight: 600;
	text-decoration: none;
	transition: opacity var(--wp--custom--transicion);
}

.pie .pie__legal p:first-child a {
	margin-left: 0.75rem;
	padding-left: 0.75rem;
	border-left: 1px solid rgb(255 255 255 / 0.4);
}

.pie .pie__legal a:hover,
.pie .pie__legal a:focus-visible {
	text-decoration: underline;
}

/* En móvil: el enlace en su renglón y aire para el WhatsApp flotante. */
@media (max-width: 781px) {
	.pie .pie__legal {
		padding-bottom: 4.5rem;
	}

	.pie .pie__legal p:first-child a {
		display: block;
		width: fit-content;
		margin: 0.4rem 0 0;
		padding: 0;
		border: 0;
	}
}

/* Botones del pie: píldora más baja, sin mayúsculas, como en el diseño. */
.pie__botones .wp-block-button__link {
	padding: 0.35em 0.9em;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- Ícono Liqui Moly ---------- */

.wp-block-liquimoly-icono {
	color: var(--wp--preset--color--azul);
	line-height: 0;
}

.wp-block-liquimoly-icono a {
	display: inline-block;
	color: inherit;
	transition: filter var(--wp--custom--transicion);
}

.wp-block-liquimoly-icono a:hover,
.wp-block-liquimoly-icono a:focus-visible {
	filter: brightness(0.85);
}

.bloque-icono__vista {
	display: inline-block;
}

/* ---------- Listas ---------- */

.wp-block-list li::marker {
	color: var(--wp--preset--color--azul);
}

/* ---------- Hero de inicio (dis-web/home/01-home-hero.png, medido a 1366px) ---------- */

.hero-inicio {
	--hero-franja-grueso: var(--franja-gruesa-grueso);
	overflow: hidden;
}

.hero-inicio__columnas {
	min-height: clamp(420px, 38vw, 520px);
}

.hero-inicio__titulo {
	font-size: clamp(2.5rem, 6.3vw, 5.35rem);
	line-height: 1.04;
	letter-spacing: 0.01em;
}

.hero-inicio__titulo mark {
	padding: 0;
}

.hero-inicio .hero-inicio__bajada {
	margin-top: 0.7em;
	font-size: clamp(1.25rem, 2.9vw, 2.5rem);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--wp--custom--espaciado-letras);
	text-transform: uppercase;
}

/* En escritorio cada línea del título va entera, como en el diseño (puede rozar al piloto). */
@media (min-width: 782px) {
	.hero-inicio__titulo {
		white-space: nowrap;
	}
}

/* El piloto se apoya sobre la franja; la parte de abajo queda cortada por ella. */
.hero-inicio__imagen {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	align-self: stretch !important;
}

/* En escritorio el piloto es más ancho que su columna y se monta un poco sobre el texto. */
.hero-inicio__imagen .wp-block-image {
	flex-shrink: 0;
	margin: 0;
	padding-top: 1rem;
}

.hero-inicio__imagen img {
	display: block;
	width: auto;
	max-width: 100%;
	/* Solo un poco de la parte de abajo queda escondida detrás de la franja. */
	--hero-piloto-oculto: calc(var(--hero-franja-grueso) * 0.3);
	height: calc(clamp(380px, 39vw, 530px) + var(--hero-franja-grueso));
	margin-bottom: calc(-1 * var(--hero-piloto-oculto));
	border-radius: 0;
	object-fit: contain;
}

/* La franja se pinta por encima del piloto. */
.hero-inicio__franja {
	position: relative;
	z-index: 1;
}

/* Entrada: el texto sube y aparece; el piloto sale desde detrás de la franja. Solo en la web, no en el editor. */
@keyframes liquimoly-hero-texto {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
}

@keyframes liquimoly-hero-piloto {
	from {
		opacity: 0;
		transform: translateY(22%);
	}
}

body:not(.editor-styles-wrapper) .hero-inicio__titulo,
body:not(.editor-styles-wrapper) .hero-inicio__bajada {
	animation: liquimoly-hero-texto 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

body:not(.editor-styles-wrapper) .hero-inicio__bajada {
	animation-delay: 0.4s;
}

body:not(.editor-styles-wrapper) .hero-inicio__imagen img {
	animation: liquimoly-hero-piloto 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/*
 * Palabra por palabra (assets/js/letras.js): cada palabra sube desde una ranura
 * (su caja recorta lo que queda abajo). Solo se anima transform, que el navegador
 * resuelve sin repintar: liviano también en celulares. Mientras el JS parte el texto,
 * este queda oculto; si el JS no llega, a los 2 s aparece igual.
 */
@keyframes liquimoly-palabra {
	from {
		transform: translate3d(0, 110%, 0);
	}
}

@keyframes liquimoly-aparecer {
	to {
		opacity: 1;
	}
}

.liquimoly-js:not(.liquimoly-letras) body:not(.editor-styles-wrapper) .letras-animadas {
	opacity: 0;
	animation: liquimoly-aparecer 0.4s 2s forwards;
}

.liquimoly-letras body:not(.editor-styles-wrapper) .letras {
	animation: none;
}

/* La ranura deja aire arriba y abajo para tildes y descendentes sin mover el renglón. */
.letras__palabra {
	display: inline-block;
	overflow: hidden;
	margin: -0.18em 0 -0.12em;
	padding: 0.18em 0 0.12em;
	vertical-align: bottom;
	white-space: nowrap;
}

.letras__letra {
	display: inline-block;
	animation: liquimoly-palabra 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(0.1s + var(--i) * 80ms);
}

.hero-inicio__bajada .letras__letra {
	animation-duration: 0.6s;
	animation-delay: calc(0.55s + var(--i) * 50ms);
}

/* Títulos largos: palabras más seguidas para que la entrada no pase de ~1,2 s. */
.hero-marca__titulo .letras__letra {
	animation-delay: calc(0.1s + var(--i) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
	.letras__letra {
		animation: none;
	}

	body:not(.editor-styles-wrapper) .hero-inicio__titulo,
	body:not(.editor-styles-wrapper) .hero-inicio__bajada,
	body:not(.editor-styles-wrapper) .hero-inicio__imagen img {
		animation: none;
	}
}

@media (max-width: 781px) {
	.hero-inicio__columnas {
		min-height: 0;
		padding-top: var(--wp--preset--spacing--40);
	}

	.hero-inicio__imagen {
		justify-content: center;
	}

	.hero-inicio__imagen .wp-block-image {
		flex-shrink: 1;
	}

	.hero-inicio__imagen img {
		height: auto;
		max-height: calc(min(62vw, 440px) + var(--hero-franja-grueso));
	}
}

/* ---------- Tarjetas de líneas (dis-web/home/02-home-lo-que-necesita.png) ---------- */

.lineas .lineas__bajada {
	max-width: none;
	margin-top: 0.75rem;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.lineas__tarjetas {
	max-width: 990px;
	margin-top: 3rem !important;
	margin-right: auto;
	margin-left: auto;
}

/*
 * Tarjeta blanca con borde azul; al pasar el mouse se llena de azul desde abajo
 * (mismo «nivel de aceite» de los botones) y el texto pasa a blanco.
 * Toda la tarjeta es clicable: el enlace del nombre se estira con ::after.
 */
.tarjeta-linea {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 1.5rem 1.5rem 1.75rem;
	border: 1px solid var(--wp--preset--color--azul);
	border-radius: var(--wp--custom--radio--imagen);
	background: linear-gradient(var(--wp--preset--color--azul), var(--wp--preset--color--azul)) no-repeat bottom / 100% 0%;
	transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-linea .wp-block-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radio--tarjeta);
}

.tarjeta-linea .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 427 / 176;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.tarjeta-linea .tarjeta-linea__nombre {
	margin-top: 1.5rem;
	font-size: clamp(1.125rem, 1.5vw, 1.3rem);
	line-height: 1.2;
	letter-spacing: var(--wp--custom--espaciado-letras);
	text-transform: uppercase;
}

.tarjeta-linea__nombre a {
	color: var(--wp--preset--color--azul);
	text-decoration: none;
	transition: color 0.3s ease;
}

.tarjeta-linea__nombre a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.tarjeta-linea:hover,
.tarjeta-linea:focus-within {
	background-size: 100% 100%;
	box-shadow: 0 12px 28px rgb(0 81 158 / 0.22);
	transform: translateY(-4px);
}

.tarjeta-linea:hover .tarjeta-linea__nombre a,
.tarjeta-linea:focus-within .tarjeta-linea__nombre a {
	color: var(--wp--preset--color--blanco);
}

.tarjeta-linea:hover .wp-block-image img,
.tarjeta-linea:focus-within .wp-block-image img {
	transform: scale(1.05);
}

.tarjeta-linea__nombre a:focus-visible {
	outline: none;
}

.tarjeta-linea:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--rojo);
	outline-offset: 3px;
}

/* Apiladas (tablet y celular) no pasan del ancho que tienen en escritorio. */
@media (max-width: 781px) {
	.lineas__tarjetas {
		max-width: 475px;
	}
}

.lineas__boton {
	margin-top: var(--wp--preset--spacing--50) !important;
	margin-bottom: var(--wp--preset--spacing--50);
}

.boton-grande .wp-block-button__link {
	padding: 0.85em 1.6em;
	font-size: var(--wp--preset--font-size--medium);
}

/*
 * Entrada «barrido tricolor» (assets/js/entradas.js): una franja vertical azul, blanca y roja
 * cruza cada tarjeta de izquierda a derecha y la va descubriendo; la segunda entra después.
 * El borde derecho de la franja coincide con el borde visible (misma duración y curva).
 */
.tarjeta-linea {
	--barrido-ancho: 34px;
}

.tarjeta-linea::before {
	content: "";
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: calc(-1 * var(--barrido-ancho));
	z-index: 2;
	width: var(--barrido-ancho);
	background: linear-gradient(
		to right,
		var(--wp--preset--color--azul) 0 14px,
		var(--wp--preset--color--blanco) 14px 20px,
		var(--wp--preset--color--rojo) 20px 100%
	);
	opacity: 0;
	pointer-events: none;
}

@keyframes liquimoly-barrido-tarjeta {
	0% {
		clip-path: inset(-1px 100% -1px -1px round var(--barrido-radio, var(--wp--custom--radio--imagen)));
	}

	80%,
	100% {
		clip-path: inset(-1px -1px -1px -1px round var(--barrido-radio, var(--wp--custom--radio--imagen)));
	}
}

@keyframes liquimoly-barrido-franja {
	0% {
		left: calc(-1 * var(--barrido-ancho));
		opacity: 1;
	}

	80% {
		left: calc(100% - var(--barrido-ancho));
		opacity: 1;
	}

	100% {
		left: calc(100% - var(--barrido-ancho));
		opacity: 0;
	}
}

@keyframes liquimoly-barrido-foto {
	from {
		transform: scale(1.12);
	}
}

.liquimoly-entradas .lineas__tarjetas:not(.en-vista) .tarjeta-linea {
	clip-path: inset(0 100% 0 0);
}

.lineas__tarjetas.en-vista .tarjeta-linea {
	animation: liquimoly-barrido-tarjeta 1.2s cubic-bezier(0.65, 0, 0.35, 1) backwards;
}

.lineas__tarjetas.en-vista .tarjeta-linea::before {
	animation: liquimoly-barrido-franja 1.2s cubic-bezier(0.65, 0, 0.35, 1) backwards;
}

.lineas__tarjetas.en-vista .tarjeta-linea .wp-block-image img {
	animation: liquimoly-barrido-foto 1.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.lineas__tarjetas.en-vista .tarjeta-linea:nth-child(2),
.lineas__tarjetas.en-vista .tarjeta-linea:nth-child(2)::before,
.lineas__tarjetas.en-vista .tarjeta-linea:nth-child(2) .wp-block-image img {
	animation-delay: 0.25s;
}

/*
 * El mismo barrido para fotos: clase .barrido-foto en el bloque de imagen, dentro de un .entrada.
 * La foto se recorta (clip-path) y la franja vertical (::after) va en su borde visible.
 */
.barrido-foto {
	--barrido-ancho: 34px;
	position: relative;
}

.barrido-foto::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--barrido-ancho));
	z-index: 2;
	width: var(--barrido-ancho);
	background: linear-gradient(
		to right,
		var(--wp--preset--color--azul) 0 14px,
		var(--wp--preset--color--blanco) 14px 20px,
		var(--wp--preset--color--rojo) 20px 100%
	);
	opacity: 0;
	pointer-events: none;
}

.liquimoly-entradas .entrada:not(.en-vista) .barrido-foto img {
	clip-path: inset(0 100% 0 0);
}

.entrada.en-vista .barrido-foto img {
	animation: liquimoly-barrido-tarjeta 1.3s cubic-bezier(0.65, 0, 0.35, 1) var(--barrido-retraso, 0s) backwards;
}

.entrada.en-vista .barrido-foto::after {
	animation: liquimoly-barrido-franja 1.3s cubic-bezier(0.65, 0, 0.35, 1) var(--barrido-retraso, 0s) backwards;
}

@media (prefers-reduced-motion: reduce) {
	.tarjeta-linea,
	.tarjeta-linea .wp-block-image img {
		transition: none;
	}

	.tarjeta-linea:hover,
	.tarjeta-linea:focus-within {
		transform: none;
	}
}

/* ---------- Calidad y confianza (dis-web/home/03-home-calidad-confianza.png) ---------- */

.calidad .calidad__titulo {
	margin: 0;
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: 2.5rem;
}

.calidad__fondo {
	margin-top: 0 !important;
	/* Los SVG traen margen interno (~20px a 110px), por eso el relleno superior es menor. */
	padding-top: 3rem;
	padding-bottom: 4.25rem;
}

.calidad__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.calidad__item > * {
	margin-top: 0 !important;
	margin-bottom: 0;
}

.calidad .calidad__nombre {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Dos renglones siempre: «Experiencia» queda centrada a la altura de los demás. */
	min-height: 2.1em;
	margin-top: 0.4rem !important;
	color: var(--wp--preset--color--azul);
	font-size: clamp(1.25rem, 1.75vw, 1.45rem);
	line-height: 1.05;
}

.calidad .calidad__texto {
	margin-top: 1.4rem !important;
	font-size: clamp(1rem, 1.35vw, 1.125rem);
	line-height: 1.3;
}

.calidad__boton {
	margin-top: 4.25rem !important;
}

/* Celular y tablet: dos por fila. */
@media (max-width: 781px) {
	.calidad__grilla {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 1rem;
	}

	.calidad .calidad__texto br {
		display: none;
	}

	.calidad__item .wp-block-liquimoly-icono svg {
		width: 92px;
		height: 92px;
	}
}

/* Entrada: cada columna sube y aparece, una tras otra; el ícono llega con un pequeño rebote. */
@keyframes liquimoly-sube {
	from {
		opacity: 0;
		transform: translateY(32px);
	}
}

@keyframes liquimoly-icono-rebote {
	0% {
		opacity: 0;
		transform: scale(0.4) rotate(-12deg);
	}

	60% {
		opacity: 1;
		transform: scale(1.12) rotate(3deg);
	}
}

.liquimoly-entradas .calidad__grilla:not(.en-vista) .calidad__item {
	opacity: 0;
}

.calidad__grilla.en-vista .calidad__item {
	animation: liquimoly-sube 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--orden, 0) * 0.15s) backwards;
}

.calidad__grilla.en-vista .calidad__item .wp-block-liquimoly-icono {
	animation: liquimoly-icono-rebote 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--orden, 0) * 0.15s + 0.15s) backwards;
}

.calidad__item:nth-child(2) {
	--orden: 1;
}

.calidad__item:nth-child(3) {
	--orden: 2;
}

.calidad__item:nth-child(4) {
	--orden: 3;
}

/* ---------- Descubre el mundo Liqui Moly (dis-web/home/04-home-descrubre.png) ---------- */

.mundo__texto > * {
	margin-top: 0 !important;
	margin-bottom: 0;
}

.mundo .mundo__titulo {
	margin-top: 1.9rem !important;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.12;
	text-transform: uppercase;
}

.mundo .mundo__parrafo {
	margin-top: 0.6rem !important;
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	line-height: 1.35;
	text-align: justify;
}

@media (max-width: 781px) {
	.mundo .mundo__parrafo {
		text-align: left;
	}
}

.mundo .mundo__logo-imfrisa {
	margin-top: 3.5rem !important;
}

.mundo .mundo__destacado {
	margin-top: 1.4rem !important;
	color: #3c3c3c;
}

.mundo .mundo__destacado + .mundo__parrafo {
	margin-top: 1.6rem !important;
}

/*
 * El mapa trae fondo casi blanco (#FAFAFA–#FDFDFD): un brillo mínimo lo lleva a blanco puro
 * y multiply lo funde con la sección, sin que se note el rectángulo de la foto.
 */
.mundo__mapa .wp-block-image {
	margin: 0;
}

.mundo__mapa img {
	display: block;
	width: 100%;
	max-width: 604px;
	height: auto;
	margin-left: auto;
	border-radius: 0;
	filter: brightness(1.035);
	mix-blend-mode: multiply;
}

@media (max-width: 781px) {
	.mundo__mapa img {
		max-width: 480px;
		margin-right: auto;
	}
}

/* Entrada: el texto sube por partes; el mapa entra con el barrido tricolor (.barrido-foto). */
.liquimoly-entradas .mundo__columnas:not(.en-vista) .mundo__texto > * {
	opacity: 0;
}

.mundo__columnas.en-vista .mundo__texto > * {
	animation: liquimoly-sube 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.mundo__columnas.en-vista .mundo__texto > :nth-child(2) {
	animation-delay: 0.1s;
}

.mundo__columnas.en-vista .mundo__texto > :nth-child(3) {
	animation-delay: 0.2s;
}

.mundo__columnas.en-vista .mundo__texto > :nth-child(4) {
	animation-delay: 0.35s;
}

.mundo__columnas.en-vista .mundo__texto > :nth-child(5) {
	animation-delay: 0.45s;
}

.mundo__columnas.en-vista .mundo__texto > :nth-child(6) {
	animation-delay: 0.55s;
}

.mundo__mapa img {
	--barrido-radio: 0px;
}

/* ---------- Encuentra la solución (dis-web/home/05-home-encuenta-solucion.png) ---------- */

.solucion {
	overflow: hidden;
}

.solucion__columnas {
	max-width: 1070px;
	margin: 0 auto !important;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: 5.25rem;
	column-gap: 7rem !important;
}

/* Foto con esquinas de 33px y la franja tricolor que sale de su borde izquierdo hasta la orilla. */
.solucion__foto {
	position: relative;
	z-index: 1;
	flex: 0 0 405px !important;
}

.solucion__foto .wp-block-image {
	position: relative;
	margin: 0;
}

.solucion__foto .wp-block-image::before {
	content: "";
	position: absolute;
	top: 38.4%;
	right: 100%;
	width: 100vw;
	height: calc(var(--franja-gruesa-grueso) * 2 + var(--franja-gruesa-fino));
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--azul) 0 var(--franja-gruesa-grueso),
		var(--wp--preset--color--blanco) var(--franja-gruesa-grueso) calc(var(--franja-gruesa-grueso) + var(--franja-gruesa-fino)),
		var(--wp--preset--color--rojo) calc(var(--franja-gruesa-grueso) + var(--franja-gruesa-fino)) 100%
	);
	transform-origin: right center;
}

.solucion__foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 33px;
}

.solucion__contenido {
	display: flex;
	flex-direction: column;
}

.solucion__contenido > * {
	margin-top: 0 !important;
}

.solucion__intro {
	padding-top: 2.3rem;
}

.solucion__intro > * {
	margin-top: 0 !important;
	margin-bottom: 0;
}

.solucion .solucion__titulo {
	font-size: clamp(2rem, 3.45vw, 2.95rem);
	line-height: 1.08;
}

.solucion .solucion__texto {
	margin-top: 1.4rem !important;
	font-size: clamp(1rem, 1.45vw, 1.25rem);
	line-height: 1.2;
}

/* Banda gris a todo el ancho desde los accesos hasta el final de la sección (pasa detrás de la foto). */
.solucion__accesos {
	display: grid;
	grid-template-columns: repeat(2, 179px);
	column-gap: 7.5rem;
	margin-top: auto !important;
	padding-top: 1.4rem;
	background: var(--wp--preset--color--gris-claro);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--gris-claro);
	clip-path: inset(0 -100vmax -100vmax -100vmax);
}

.solucion__accesos > *,
.acceso > * {
	margin-top: 0 !important;
	margin-bottom: 0;
}

.solucion .acceso__pregunta {
	min-height: 2.5em;
	margin-bottom: 1.75rem;
	color: var(--wp--preset--color--azul);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
}

/* Tarjeta de acceso: blanca en reposo, se llena de azul desde abajo al pasar el mouse. */
.acceso__tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	aspect-ratio: 179 / 163;
	padding: 0 0.5rem 1.15rem;
	border: 1px solid var(--wp--preset--color--azul);
	border-radius: 14px;
	background: var(--wp--preset--color--blanco) linear-gradient(var(--wp--preset--color--azul), var(--wp--preset--color--azul)) no-repeat bottom / 100% 0%;
	color: var(--wp--preset--color--azul);
	text-decoration: none;
	transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.acceso__externo {
	position: absolute;
	top: 9px;
	right: 10px;
	display: flex;
}

.acceso__externo svg {
	width: 22px;
	height: 22px;
}

.acceso__icono {
	display: flex;
	margin-bottom: auto;
	padding-top: 13%;
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.acceso__icono svg {
	width: 56px;
	height: 56px;
}

.acceso__nombre {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.acceso__tarjeta:hover,
.acceso__tarjeta:focus-visible {
	background-size: 100% 100%;
	color: var(--wp--preset--color--blanco);
	box-shadow: 0 12px 26px rgb(0 81 158 / 0.25);
	transform: translateY(-4px);
}

.acceso__tarjeta:hover .acceso__icono,
.acceso__tarjeta:focus-visible .acceso__icono {
	transform: translateY(-3px) scale(1.08);
}

.acceso__tarjeta:focus-visible {
	outline: 3px solid var(--wp--preset--color--rojo);
	outline-offset: 3px;
}

@media (max-width: 781px) {
	.solucion__columnas {
		padding-top: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--40);
		row-gap: 2rem;
	}

	.solucion__foto {
		width: 100%;
		max-width: 405px;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	.solucion__intro {
		padding-top: 0;
	}

	.solucion__accesos {
		grid-template-columns: repeat(2, minmax(0, 220px));
		column-gap: 1rem;
		margin-top: 2rem !important;
		padding-top: 2rem;
	}
}

/* Entrada: la foto con el barrido tricolor (.barrido-foto) y la franja que crece; luego el texto y los accesos. */
@keyframes liquimoly-franja-crece {
	from {
		transform: scaleX(0);
	}
}

@keyframes liquimoly-acceso {
	from {
		opacity: 0;
		transform: translateY(24px) scale(0.92);
	}
}

.liquimoly-entradas .solucion__columnas:not(.en-vista) .solucion__intro > *,
.liquimoly-entradas .solucion__columnas:not(.en-vista) .acceso {
	opacity: 0;
}

.liquimoly-entradas .solucion__columnas:not(.en-vista) .solucion__foto .wp-block-image::before {
	transform: scaleX(0);
}

.solucion__foto img {
	--barrido-radio: 33px;
}

/* La franja crece hacia la orilla mientras el barrido descubre la foto. */
.solucion__columnas.en-vista .solucion__foto .wp-block-image::before {
	animation: liquimoly-franja-crece 1s cubic-bezier(0.65, 0, 0.35, 1) 0.1s backwards;
}

.solucion__columnas.en-vista .solucion__intro > * {
	animation: liquimoly-sube 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s backwards;
}

.solucion__columnas.en-vista .solucion__intro > :nth-child(2) {
	animation-delay: 0.4s;
}

.solucion__columnas.en-vista .acceso {
	animation: liquimoly-acceso 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards;
}

.solucion__columnas.en-vista .acceso:nth-child(2) {
	animation-delay: 0.75s;
}

@media (prefers-reduced-motion: reduce) {
	.acceso__tarjeta,
	.acceso__icono {
		transition: none;
	}
}

/* ---------- Hero de La Marca (dis-web/la-marca/01-Hero-desde-1957.png, medido a 1366px) ---------- */

.hero-marca {
	overflow: hidden;
}

.hero-marca__columnas {
	min-height: clamp(560px, 60.6vw, 828px);
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.hero-marca .hero-marca__titulo {
	margin: 0;
	font-size: clamp(2.25rem, 4.8vw, 4.1rem);
	line-height: 1;
	text-transform: none;
}

/* Escritorio: los cuatro renglones del diseño, sin cortes extra (puede rozar al auto). */
@media (min-width: 782px) {
	.hero-marca__titulo {
		white-space: nowrap;
	}
}

@media (max-width: 781px) {
	.hero-marca__titulo br {
		display: none;
	}
}

.hero-marca .hero-marca__logo {
	margin-top: clamp(2.5rem, 5.6vw, 4.75rem);
	margin-bottom: 0;
}

.hero-marca__logo img {
	width: clamp(170px, 19.8vw, 270px) !important;
}

/* Lado derecho: franja vertical tricolor de arriba abajo; el auto y los productos encima. */
.hero-marca__visual {
	position: relative;
	align-self: stretch !important;
}

.hero-marca__visual::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 61.8%;
	width: calc(var(--franja-gruesa-grueso) * 2 + var(--franja-gruesa-fino));
	background: linear-gradient(
		to right,
		var(--wp--preset--color--azul) 0 var(--franja-gruesa-grueso),
		var(--wp--preset--color--blanco) var(--franja-gruesa-grueso) calc(var(--franja-gruesa-grueso) + var(--franja-gruesa-fino)),
		var(--wp--preset--color--rojo) calc(var(--franja-gruesa-grueso) + var(--franja-gruesa-fino)) 100%
	);
	transform-origin: top center;
}

.hero-marca__escena {
	position: absolute;
	inset: 0;
}

.hero-marca__escena img {
	position: absolute;
	max-width: none;
	height: auto;
	border-radius: 0;
}

.hero-marca__auto {
	top: 18.1%;
	left: 10.7%;
	width: 97.5%;
}

.hero-marca__productos {
	top: 49%;
	left: -9%;
	width: 133.5%;
}

@media (max-width: 781px) {
	.hero-marca__columnas {
		min-height: 0;
		padding-top: var(--wp--preset--spacing--50);
	}

	.hero-marca__visual {
		width: 100%;
		max-width: 520px;
		margin: 0 auto !important;
		aspect-ratio: 570 / 700;
	}

	.hero-marca__auto {
		top: 4%;
	}

	.hero-marca__productos {
		top: 38%;
		left: -16%;
		width: 132%;
	}
}

/* Entrada: la franja baja desde arriba, el auto llega acercándose y los productos suben. */
@keyframes liquimoly-franja-baja {
	from {
		transform: scaleY(0);
	}
}

@keyframes liquimoly-auto-llega {
	from {
		opacity: 0;
		transform: translateY(-6%) scale(0.72);
	}
}

@keyframes liquimoly-productos-suben {
	from {
		opacity: 0;
		transform: translateY(18%);
	}
}

/*
 * La franja baja como una sola pieza con la de «Nosotros»: este tramo arranca suave y
 * termina a velocidad constante (pendiente final 1), y el de Nosotros sigue a esa misma
 * velocidad (pendiente inicial 1) justo cuando este acaba. Velocidad ≈ alto / duración.
 */
body:not(.editor-styles-wrapper) .hero-marca__visual::before {
	animation: liquimoly-franja-baja 0.8s cubic-bezier(0.4, 0, 0.6, 0.6) both;
}

body:not(.editor-styles-wrapper) .hero-marca__auto {
	animation: liquimoly-auto-llega 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

body:not(.editor-styles-wrapper) .hero-marca__productos {
	animation: liquimoly-productos-suben 1s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
}

body:not(.editor-styles-wrapper) .hero-marca__logo {
	animation: liquimoly-sube 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both;
}

@media (prefers-reduced-motion: reduce) {
	body:not(.editor-styles-wrapper) .hero-marca__visual::before,
	body:not(.editor-styles-wrapper) .hero-marca__auto,
	body:not(.editor-styles-wrapper) .hero-marca__productos,
	body:not(.editor-styles-wrapper) .hero-marca__logo {
		animation: none;
	}
}

/* ---------- Nosotros (dis-web/la-marca/02-nosotros.png, medido a 1366px) ---------- */

.nosotros {
	--nosotros-arriba: 6.25rem;
	overflow-x: clip;
	padding-top: var(--nosotros-arriba);
	padding-bottom: var(--wp--preset--spacing--60);
}

/*
 * La franja vertical continúa la del hero de La Marca: allí está al 61,8 % de la columna
 * derecha (la mitad del contenedor), o sea al 80,9 % del contenedor. Baja desde el borde
 * superior de la sección y termina escondida detrás de la foto.
 */
.nosotros__marco {
	position: relative;
}

.nosotros__marco::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--nosotros-arriba));
	transform-origin: top center;
	bottom: 0;
	left: 80.9%;
	width: calc(var(--franja-gruesa-grueso) * 2 + var(--franja-gruesa-fino));
	background: linear-gradient(
		to right,
		var(--wp--preset--color--azul) 0 var(--franja-gruesa-grueso),
		var(--wp--preset--color--blanco) var(--franja-gruesa-grueso) calc(var(--franja-gruesa-grueso) + var(--franja-gruesa-fino)),
		var(--wp--preset--color--rojo) calc(var(--franja-gruesa-grueso) + var(--franja-gruesa-fino)) 100%
	);
}

.nosotros__marco > *,
.nosotros__intro > *,
.nosotros__historia-texto > * {
	margin-top: 0 !important;
	margin-bottom: 0;
}

.nosotros__intro {
	position: relative;
	max-width: 771px;
}

.nosotros .nosotros__titulo {
	font-size: clamp(2.75rem, 5.2vw, 4.4rem);
	line-height: 1;
}

.nosotros .nosotros__texto {
	font-size: clamp(1rem, 1.45vw, 1.2rem);
	line-height: 1.55;
}

.nosotros .nosotros__titulo + .nosotros__texto {
	margin-top: 1.9rem !important;
}

.nosotros .nosotros__texto + .nosotros__texto {
	margin-top: 1.55em !important;
}

.nosotros__texto--justificado {
	text-align: justify;
}

.nosotros__texto sub {
	font-size: 0.65em;
}

.nosotros__historia {
	position: relative;
	z-index: 1;
	margin-top: 5.5rem !important;
	margin-bottom: 0 !important;
	column-gap: 4.25rem !important;
}

.nosotros__historia-texto {
	flex: 0 0 488px !important;
}

.nosotros .nosotros__subtitulo {
	margin-left: -0.3rem !important;
	font-size: clamp(1.85rem, 2.75vw, 2.4rem);
	line-height: 1.15;
}

.nosotros__anio {
	display: block;
	margin-top: 0.1em;
	margin-left: 0.1em;
	font-size: 1.9em;
	letter-spacing: 0.06em;
	line-height: 0.95;
}

.nosotros .nosotros__subtitulo + .nosotros__texto {
	margin-top: 2.5rem !important;
}

.nosotros__foto .wp-block-image {
	margin: 0;
}

.nosotros__foto img {
	--barrido-radio: 33px;
	display: block;
	width: 100%;
	aspect-ratio: 647 / 457;
	object-fit: cover;
	border-radius: 33px;
}

/* En pantallas anchas la foto sobresale del contenedor hacia la derecha, como en el diseño. */
@media (min-width: 1300px) {
	.nosotros .nosotros__historia {
		margin-right: -63px !important;
	}
}

@media (max-width: 781px) {
	.nosotros {
		--nosotros-arriba: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--50);
	}

	/* En celular el hero apila sus columnas y su franja termina con él. */
	.nosotros__marco::before {
		display: none;
	}

	.nosotros__historia {
		margin-top: 3.5rem !important;
	}

	.nosotros__historia-texto {
		flex-basis: auto !important;
	}

	.nosotros__texto--justificado {
		text-align: left;
	}
}

/* Continuación de la franja del hero (ver .hero-marca__visual::before). */
body:not(.editor-styles-wrapper) .nosotros__marco::before {
	animation: liquimoly-franja-baja 0.55s cubic-bezier(0.33, 0.33, 0.6, 1) 0.8s both;
}

@media (prefers-reduced-motion: reduce) {
	body:not(.editor-styles-wrapper) .nosotros__marco::before {
		animation: none;
	}
}

/* Entrada: los textos suben; la foto con el barrido tricolor. */
.liquimoly-entradas .nosotros__intro:not(.en-vista) > *,
.liquimoly-entradas .nosotros__historia:not(.en-vista) .nosotros__historia-texto > * {
	opacity: 0;
}

.nosotros__intro.en-vista > *,
.nosotros__historia.en-vista .nosotros__historia-texto > * {
	animation: liquimoly-sube 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.nosotros__intro.en-vista > :nth-child(2),
.nosotros__historia.en-vista .nosotros__historia-texto > :nth-child(2) {
	animation-delay: 0.12s;
}

.nosotros__intro.en-vista > :nth-child(3),
.nosotros__historia.en-vista .nosotros__historia-texto > :nth-child(3) {
	animation-delay: 0.24s;
}

.nosotros__historia.en-vista .nosotros__foto {
	--barrido-retraso: 0.15s;
}

/* ---------- Roadmap (dis-web/la-marca/03-road-map.png, medido a 1366px) ---------- */

.roadmap {
	--roadmap-arriba: 10.75rem;
	--roadmap-foto-ancho: 191px;
	--roadmap-foto-alto: 347px;
	--roadmap-franja-grueso: 22px;
	--roadmap-franja-fino: 6px;
	--roadmap-franja: calc(var(--roadmap-franja-grueso) * 2 + var(--roadmap-franja-fino));
	--roadmap-inclinacion: -5deg;
	position: relative;
	overflow: hidden;
	padding-top: var(--roadmap-arriba);
	padding-bottom: 7rem;
}

/* La franja (la «ruta») cruza la sección a la altura media de las fotos. */
.roadmap::before {
	content: "";
	position: absolute;
	top: calc(var(--roadmap-arriba) + var(--roadmap-foto-alto) * 0.465);
	right: 0;
	left: 0;
	height: var(--roadmap-franja);
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--azul) 0 var(--roadmap-franja-grueso),
		var(--wp--preset--color--blanco) var(--roadmap-franja-grueso) calc(var(--roadmap-franja-grueso) + var(--roadmap-franja-fino)),
		var(--wp--preset--color--rojo) calc(var(--roadmap-franja-grueso) + var(--roadmap-franja-fino)) 100%
	);
	transform-origin: left center;
}

.roadmap__hitos {
	position: relative;
	max-width: 1180px;
	margin: 0 auto !important;
}

.roadmap__hito > *,
.roadmap__info > * {
	margin-top: 0 !important;
	margin-bottom: 0;
}

/* Foto inclinada con esquinas redondeadas; la imagen se endereza por dentro para no deformarse. */
.roadmap .roadmap__foto {
	width: var(--roadmap-foto-ancho);
	height: var(--roadmap-foto-alto);
	margin: 0 auto;
	overflow: hidden;
	border-radius: 33px;
	box-shadow: -7px 9px 14px rgb(0 0 0 / 0.28);
	transform: skewX(var(--roadmap-inclinacion));
}

.roadmap__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transform: skewX(calc(-1 * var(--roadmap-inclinacion))) scale(1.12);
}

.roadmap__info {
	max-width: 245px;
	margin: 3.1rem auto 0 !important;
	text-align: center;
}

.roadmap .roadmap__anio {
	font-size: 1.5rem;
	font-style: italic;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.roadmap .roadmap__texto {
	margin-top: 2.2rem !important;
	font-size: 1.1rem;
	line-height: 1.4;
}

/* Celular y tablet: ruta vertical a la izquierda, cada hito con su foto y su texto al lado. */
@media (max-width: 781px) {
	.roadmap {
		--roadmap-arriba: var(--wp--preset--spacing--50);
		--roadmap-foto-ancho: 118px;
		--roadmap-foto-alto: 214px;
		--roadmap-franja-grueso: 16px;
		--roadmap-franja-fino: 5px;
		--roadmap-inclinacion: -4deg;
		padding-bottom: var(--wp--preset--spacing--50);
	}

	.roadmap::before {
		top: var(--roadmap-arriba);
		right: auto;
		bottom: var(--wp--preset--spacing--50);
		left: calc(var(--wp--style--root--padding-left, 24px) + var(--roadmap-foto-ancho) / 2 - var(--roadmap-franja) / 2);
		width: var(--roadmap-franja);
		height: auto;
		background: linear-gradient(
			to right,
			var(--wp--preset--color--azul) 0 var(--roadmap-franja-grueso),
			var(--wp--preset--color--blanco) var(--roadmap-franja-grueso) calc(var(--roadmap-franja-grueso) + var(--roadmap-franja-fino)),
			var(--wp--preset--color--rojo) calc(var(--roadmap-franja-grueso) + var(--roadmap-franja-fino)) 100%
		);
		transform-origin: center top;
	}

	.roadmap__hito {
		display: grid;
		grid-template-columns: var(--roadmap-foto-ancho) 1fr;
		column-gap: 1.25rem;
		align-items: center;
	}

	.roadmap .roadmap__foto {
		margin: 0;
	}

	.roadmap__info {
		max-width: none;
		margin: 0 !important;
		text-align: left;
	}

	.roadmap .roadmap__texto {
		margin-top: 0.6rem !important;
		font-size: 1rem;
	}
}

/*
 * Entrada «roadmap»: la franja se dibuja como una ruta (de izquierda a derecha; en celular
 * de arriba abajo) y cada hito aparece cuando la ruta llega a él: la foto sube a su lugar,
 * luego el año y el texto. La franja avanza a velocidad constante para que coincida.
 */
@keyframes liquimoly-ruta-x {
	from {
		transform: scaleX(0);
	}
}

@keyframes liquimoly-ruta-y {
	from {
		transform: scaleY(0);
	}
}

@keyframes liquimoly-hito-foto {
	from {
		opacity: 0;
		transform: translateY(46px) skewX(var(--roadmap-inclinacion)) scale(0.86);
	}

	70% {
		opacity: 1;
		transform: translateY(-6px) skewX(var(--roadmap-inclinacion)) scale(1.02);
	}
}

.liquimoly-entradas .roadmap:not(.en-vista)::before {
	transform: scaleX(0);
}

.liquimoly-entradas .roadmap:not(.en-vista) .roadmap__foto,
.liquimoly-entradas .roadmap:not(.en-vista) .roadmap__info > * {
	opacity: 0;
}

.roadmap.en-vista::before {
	animation: liquimoly-ruta-x 2s linear both;
}

.roadmap.en-vista .roadmap__foto {
	animation: liquimoly-hito-foto 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--hito-retraso) backwards;
}

.roadmap.en-vista .roadmap__info > * {
	animation: liquimoly-sube 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--hito-retraso) + 0.25s) backwards;
}

.roadmap.en-vista .roadmap__info > :nth-child(2) {
	animation-delay: calc(var(--hito-retraso) + 0.4s);
}

/* Momento en que la ruta (2 s) pasa por el centro de cada foto: 18 %, 40 %, 61 % y 83 % del ancho. */
.roadmap__hito:nth-child(1) {
	--hito-retraso: 0.2s;
}

.roadmap__hito:nth-child(2) {
	--hito-retraso: 0.65s;
}

.roadmap__hito:nth-child(3) {
	--hito-retraso: 1.1s;
}

.roadmap__hito:nth-child(4) {
	--hito-retraso: 1.55s;
}

@media (max-width: 781px) {
	.liquimoly-entradas .roadmap:not(.en-vista)::before {
		transform: scaleY(0);
	}

	.roadmap.en-vista::before {
		animation-name: liquimoly-ruta-y;
	}
}

/* ---------- Pilares (dis-web/la-marca/05-tecnologia.png, medido a 1366px) ---------- */

.pilares {
	padding-top: 7.25rem;
	padding-bottom: 6.1rem;
}

.pilares__columnas {
	max-width: 1162px;
	margin: 0 auto !important;
}

.pilares__foto {
	flex: 0 0 459px !important;
}

.pilares__foto .wp-block-image {
	margin: 0;
}

.pilares__foto img {
	--barrido-radio: 33px;
	display: block;
	width: 100%;
	aspect-ratio: 459 / 618;
	object-fit: cover;
	border-radius: 33px;
}

.pilares__lista {
	display: flex;
	flex-direction: column;
	gap: 1.95rem;
}

.pilares__lista > *,
.pilar__texto > * {
	margin-top: 0 !important;
	margin-bottom: 0;
}

/* Cada pilar: caja con el ícono (blanca con borde azul; azul al pasar el mouse) y texto. */
.pilar {
	display: flex;
	align-items: center;
	gap: 2.55rem;
}

.pilar .pilar__icono {
	display: flex;
	flex: 0 0 140px;
	align-items: center;
	justify-content: center;
	height: 128px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--azul);
	border-radius: 14px;
	background: var(--wp--preset--color--blanco) linear-gradient(var(--wp--preset--color--azul), var(--wp--preset--color--azul)) no-repeat bottom / 100% 0%;
	color: var(--wp--preset--color--azul);
	transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.pilar__icono svg {
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pilar:hover .pilar__icono {
	background-size: 100% 100%;
	color: var(--wp--preset--color--blanco);
	box-shadow: 0 10px 22px rgb(0 81 158 / 0.22);
	transform: translateY(-3px);
}

.pilar:hover .pilar__icono svg {
	transform: scale(1.08);
}

.pilares .pilar__titulo {
	font-size: 1.05rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.pilares .pilar__descripcion {
	max-width: 380px;
	margin-top: 0.5rem !important;
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: 0.01em;
}

@media (max-width: 781px) {
	.pilares {
		padding-top: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--50);
	}

	.pilares__foto {
		flex-basis: auto !important;
		width: 100%;
		max-width: 459px;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	.pilares__foto img {
		aspect-ratio: 4 / 5;
	}

	.pilar {
		gap: 1.25rem;
	}

	.pilar .pilar__icono {
		flex-basis: 96px;
		height: 88px;
	}

	.pilar__icono svg {
		width: 56px;
		height: 56px;
	}

	.pilares .pilar__descripcion {
		font-size: 1.05rem;
	}
}

/* Entrada: la foto con el barrido tricolor; los pilares llegan uno tras otro desde la derecha. */
@keyframes liquimoly-desde-derecha {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
}

.liquimoly-entradas .pilares__columnas:not(.en-vista) .pilar {
	opacity: 0;
}

.pilares__columnas.en-vista .pilar {
	animation: liquimoly-desde-derecha 0.75s cubic-bezier(0.22, 1, 0.36, 1) calc(0.35s + var(--orden, 0) * 0.15s) backwards;
}

.pilares__columnas.en-vista .pilar .pilar__icono {
	animation: liquimoly-icono-rebote 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.45s + var(--orden, 0) * 0.15s) backwards;
}

.pilar:nth-child(2) {
	--orden: 1;
}

.pilar:nth-child(3) {
	--orden: 2;
}

.pilar:nth-child(4) {
	--orden: 3;
}

@media (prefers-reduced-motion: reduce) {
	.pilar .pilar__icono,
	.pilar__icono svg {
		transition: none;
	}
}

/* ---------- Hero de Productos (dis-web/productos/01-hero.png, medido a 1366px) ---------- */

.hero-productos {
	--hero-productos-foto: clamp(300px, 34.4vw, 470px);
	--hero-productos-pie: 48px;
	position: relative;
	overflow: hidden;
	min-height: calc(var(--hero-productos-foto) + var(--hero-productos-pie));
}

/* Foto anclada arriba a la derecha; su borde izquierdo ya viene fundido a blanco. */
.hero-productos__foto {
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	max-width: none;
	height: var(--hero-productos-foto);
	border-radius: 0;
}

/* Franja vertical tricolor en la banda blanca bajo la foto (88 % del contenedor, igual que el diseño). */
.hero-productos::after {
	content: "";
	position: absolute;
	top: var(--hero-productos-foto);
	bottom: 0;
	left: calc(max(var(--wp--style--root--padding-left), (100% - var(--wp--style--global--content-size)) / 2) + min(100% - 2 * var(--wp--style--root--padding-left), var(--wp--style--global--content-size)) * 0.88);
	width: calc(var(--franja-gruesa-grueso) * 2 + var(--franja-gruesa-fino));
	background: linear-gradient(
		to right,
		var(--wp--preset--color--azul) 0 var(--franja-gruesa-grueso),
		var(--wp--preset--color--blanco) var(--franja-gruesa-grueso) calc(var(--franja-gruesa-grueso) + var(--franja-gruesa-fino)),
		var(--wp--preset--color--rojo) calc(var(--franja-gruesa-grueso) + var(--franja-gruesa-fino)) 100%
	);
	transform-origin: top center;
}

.hero-productos__texto {
	position: relative;
	z-index: 1;
	max-width: 415px;
	/* Alineado al borde izquierdo del contenedor, no centrado. */
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
	padding-top: clamp(4rem, 8vw, 6.8rem);
	padding-bottom: 2rem;
}

.hero-productos__texto > * {
	margin-top: 0 !important;
	margin-bottom: 0;
}

.hero-productos .hero-productos__titulo {
	font-size: clamp(2.25rem, 3.75vw, 3.2rem);
	line-height: 1.04;
	white-space: nowrap;
	text-transform: none;
}

.hero-productos .hero-productos__parrafo {
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	line-height: 1.3;
	text-align: justify;
}

.hero-productos .hero-productos__titulo + .hero-productos__parrafo {
	margin-top: 2.3rem !important;
}

.hero-productos .hero-productos__parrafo + .hero-productos__parrafo {
	margin-top: 1.3em !important;
}

/* Tablet y celular: texto arriba, foto a todo el ancho debajo y la franja bajo la foto. */
@media (max-width: 781px) {
	.hero-productos {
		--hero-productos-pie: 40px;
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding-bottom: var(--hero-productos-pie) !important;
	}

	.hero-productos__texto {
		order: 1;
		max-width: none;
		padding-top: var(--wp--preset--spacing--50);
	}

	.hero-productos .hero-productos__titulo {
		white-space: normal;
	}

	.hero-productos .hero-productos__parrafo {
		text-align: left;
	}

	.hero-productos__foto {
		position: static;
		order: 2;
		width: calc(100% + 2 * var(--wp--style--root--padding-left));
		height: auto;
		margin-right: calc(-1 * var(--wp--style--root--padding-right)) !important;
		margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important;
	}

	.hero-productos::after {
		top: auto;
		height: var(--hero-productos-pie);
		left: 70%;
	}
}

/* Entrada: título por palabras (letras-animadas), textos suben, la foto entra desde la derecha y la franja baja. */
@keyframes liquimoly-foto-derecha {
	from {
		opacity: 0;
		transform: translateX(8%);
	}
}

body:not(.editor-styles-wrapper) .hero-productos__foto {
	animation: liquimoly-foto-derecha 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

body:not(.editor-styles-wrapper) .hero-productos__parrafo {
	animation: liquimoly-sube 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

body:not(.editor-styles-wrapper) .hero-productos__parrafo + .hero-productos__parrafo {
	animation-delay: 0.62s;
}

body:not(.editor-styles-wrapper) .hero-productos::after {
	/* Tramo corto que acelera y sigue en el catálogo (.catalogo::before) sin pausa. */
	animation: liquimoly-franja-baja 0.3s cubic-bezier(0.4, 0, 1, 1) 0.9s both;
}

@media (prefers-reduced-motion: reduce) {
	body:not(.editor-styles-wrapper) .hero-productos__foto,
	body:not(.editor-styles-wrapper) .hero-productos__parrafo,
	body:not(.editor-styles-wrapper) .hero-productos::after {
		animation: none;
	}
}

/* ---------- Catálogo de productos (dis-web/productos/custom-post-productos.png, medido a 1366px) ---------- */

.catalogo {
	--catalogo-franja-x: calc(max(var(--wp--style--root--padding-left), (100% - var(--wp--style--global--content-size)) / 2) + min(100% - 2 * var(--wp--style--root--padding-left), var(--wp--style--global--content-size)) * 0.88);
	position: relative;
	margin-top: 0 !important;
	padding: 0 var(--wp--style--root--padding-right) var(--wp--preset--spacing--60) var(--wp--style--root--padding-left);
	overflow-x: clip;
}

/* La franja vertical sigue la del hero de Productos (misma x) hasta el final del catálogo. */
.catalogo::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--catalogo-franja-x);
	width: calc(var(--franja-gruesa-grueso) * 2 + var(--franja-gruesa-fino));
	background: linear-gradient(
		to right,
		var(--wp--preset--color--azul) 0 var(--franja-gruesa-grueso),
		var(--wp--preset--color--blanco) var(--franja-gruesa-grueso) calc(var(--franja-gruesa-grueso) + var(--franja-gruesa-fino)),
		var(--wp--preset--color--rojo) calc(var(--franja-gruesa-grueso) + var(--franja-gruesa-fino)) 100%
	);
	transform-origin: top center;
}

.catalogo__marco {
	box-sizing: border-box;
	max-width: var(--wp--style--global--content-size);
	margin-right: auto !important;
	margin-left: auto !important;
	/* El texto no llega a la franja (que está al 88 % del contenedor). */
	padding-right: calc(min(100%, var(--wp--style--global--content-size)) * 0.12 + 2.5rem);
}

.catalogo__linea {
	padding-top: 2.6rem;
	scroll-margin-top: calc(var(--wp--custom--cabecera--alto) + 1rem);
}

.catalogo__linea + .catalogo__linea {
	padding-top: 6rem;
}

.catalogo .catalogo__linea-titulo {
	margin: 0;
	font-size: clamp(2rem, 3.3vw, 2.85rem);
	line-height: 1.1;
	text-transform: none;
}

.catalogo .catalogo__linea-texto {
	max-width: 840px;
	margin: 1.6rem 0 0;
	color: var(--wp--preset--color--gris);
	font-size: clamp(1rem, 1.45vw, 1.2rem);
	line-height: 1.2;
}

.catalogo__categoria {
	margin-top: 4.3rem;
}

.catalogo__linea-titulo + .catalogo__categoria {
	margin-top: 3rem;
}

.catalogo .catalogo__categoria-titulo {
	margin: 0;
	color: var(--wp--preset--color--azul);
	font-size: clamp(2rem, 3.3vw, 2.85rem);
	line-height: 1.1;
	text-transform: none;
}

/* Ficha: foto a la izquierda; texto y «Compra aquí» a la derecha. */
.ficha {
	display: grid;
	grid-template-columns: 239px minmax(0, 1fr);
	column-gap: 4.25rem;
	margin-top: 2.7rem;
}

.ficha + .ficha {
	margin-top: 3.5rem;
}

.ficha__media {
	align-self: start;
}

.ficha__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 239 / 231;
	object-fit: cover;
	border-radius: 33px;
	--barrido-radio: 33px;
}

.ficha__foto--vacia {
	background: var(--wp--preset--color--gris-claro);
}

.ficha__cuerpo {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding-top: 0.3rem;
}

.ficha__contenido > * {
	margin-top: 0;
	margin-bottom: 0;
}

.ficha__contenido > * + * {
	margin-top: 1.4rem;
}

.ficha__contenido > ul + p,
.ficha__contenido > ul + h3,
.ficha__contenido > p + h3 {
	margin-top: 1.9rem;
}

.ficha__contenido > p + ul {
	margin-top: 1rem;
}

.ficha__contenido h3 {
	color: var(--wp--preset--color--negro);
	font-size: 1.15rem;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
}

.ficha__contenido p {
	max-width: 600px;
	color: #4a4a4a;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
}

.ficha__contenido ul {
	padding: 0;
	color: var(--wp--preset--color--gris);
	font-size: 1.2rem;
	line-height: 1.5;
	list-style: none;
}

.ficha__contenido li::before {
	content: "• ";
}

.ficha__contenido li::marker {
	content: none;
}

.ficha__botones {
	margin-top: auto !important;
	padding-top: 1.6rem;
}

.ficha__botones .wp-block-button__link {
	padding: 0.4em 1.1em;
	font-size: 1.1rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
}

@media (max-width: 781px) {
	.catalogo::before {
		display: none;
	}

	.catalogo__marco {
		padding-right: 0;
	}

	.ficha {
		grid-template-columns: 1fr;
		row-gap: 1.5rem;
	}

	.ficha__media {
		max-width: 320px;
	}

	.ficha__foto {
		aspect-ratio: 4 / 3;
	}

	.ficha__contenido p,
	.ficha__contenido ul {
		font-size: 1.05rem;
	}
}

/* Editor: el bloque solo muestra un aviso. */
.catalogo-editor {
	padding: 1.5rem;
	border: 1px dashed var(--wp--preset--color--azul);
	border-radius: var(--wp--custom--radio--tarjeta);
	color: var(--wp--preset--color--azul);
}

/* Entrada: la franja sigue bajando cuando termina la del hero; cada ficha con barrido en la foto y el texto que sube. */
body:not(.editor-styles-wrapper) .catalogo::before {
	animation: liquimoly-franja-baja 1.6s cubic-bezier(0.3, 0.6, 0.6, 1) 1.2s both;
}

.liquimoly-entradas .ficha:not(.en-vista) .ficha__cuerpo {
	opacity: 0;
}

.ficha.en-vista .ficha__cuerpo {
	animation: liquimoly-sube 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s backwards;
}

@media (prefers-reduced-motion: reduce) {
	body:not(.editor-styles-wrapper) .catalogo::before {
		animation: none;
	}
}

/* ---------- Banner tienda online (dis-web/productos/03-CTA-banner.png, medido a 1366px) ---------- */

/*
 * Capas: rampa gris-negro-gris (fondo) → foto del motor a la derecha, oscurecida por la rampa →
 * productos a la izquierda (PNG con bordes transparentes que se funden con la rampa) → logos y texto.
 */
.cta-tienda {
	--cta-alto: clamp(300px, 28.4vw, 388px);
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--cta-alto);
	margin-top: 0 !important;
	overflow: hidden;
	background: linear-gradient(to right, #333 0%, #2b2b2c 30%, #1a1a1b 70%, #2c2c2d 100%);
	isolation: isolate;
}

.cta-tienda__fondo {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -2;
	width: 62%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 20%;
	border-radius: 0;
	opacity: 0.42;
	/* Más gris y apagada que la foto original, como en el diseño (filtro fijo, no se anima). */
	filter: grayscale(0.55) brightness(0.85);
}

/* Rampa encima de la foto: la funde hacia la izquierda y la oscurece detrás del texto. */
.cta-tienda::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 62%;
	background:
		linear-gradient(to right, #2b2b2c 0%, rgb(26 26 27 / 0.75) 30%, rgb(26 26 27 / 0.55) 65%, rgb(40 40 41 / 0.35) 100%),
		linear-gradient(to bottom, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.35) 100%);
}

.cta-tienda__productos {
	position: absolute;
	bottom: 0;
	left: max(-31px, 50% - 714px);
	width: auto;
	max-width: none;
	height: calc(var(--cta-alto) * 1.035);
	border-radius: 0;
}

.cta-tienda__contenido {
	position: relative;
	margin-left: max(58%, 50% + 111px);
	padding: 2rem var(--wp--style--root--padding-right) 2rem 0;
}

.cta-tienda__logos {
	display: flex;
	align-items: center;
	gap: 3.4rem;
	margin-left: 2.75rem;
}

.cta-tienda__logos img {
	display: block;
	width: auto;
	height: clamp(48px, 4.7vw, 64px);
	border-radius: 0;
}

.cta-tienda .cta-tienda__texto {
	margin: clamp(1.75rem, 3.6vw, 3.1rem) 0 0;
	color: var(--wp--preset--color--blanco);
	font-size: clamp(1.4rem, 2.2vw, 1.95rem);
	line-height: 1.18;
	text-transform: none;
}

.cta-tienda__texto a {
	color: inherit;
	text-decoration: none;
}

/* Todo el banner es clicable. */
.cta-tienda__texto a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.cta-tienda:has(a:hover) .cta-tienda__productos {
	transform: scale(1.02);
}

.cta-tienda__productos {
	transform-origin: 40% 100%;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-tienda__texto a:focus-visible {
	outline: none;
}

.cta-tienda:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--rojo);
	outline-offset: -3px;
}

/* Tablet y celular: productos arriba sobre la rampa, foto del motor detrás del texto abajo. */
@media (max-width: 900px) {
	.cta-tienda {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.cta-tienda__productos {
		position: relative;
		left: 50%;
		width: 125%;
		height: auto;
		margin-top: -4%;
		transform: translateX(-50%);
	}

	.cta-tienda:has(a:hover) .cta-tienda__productos {
		transform: translateX(-50%);
	}

	.cta-tienda__fondo,
	.cta-tienda::before {
		top: auto;
		width: 100%;
		height: 60%;
	}

	.cta-tienda::before {
		background: linear-gradient(to bottom, #2b2b2c 0%, rgb(26 26 27 / 0.7) 45%, rgb(26 26 27 / 0.6) 100%);
	}

	.cta-tienda__contenido {
		margin-left: 0;
		padding: 0 var(--wp--style--root--padding-right) var(--wp--preset--spacing--50) var(--wp--style--root--padding-left);
	}

	.cta-tienda__logos {
		gap: 2rem;
		margin-left: 0;
	}

	.cta-tienda__texto br {
		display: none;
	}
}

/* Entrada: los productos suben desde el mesón, la foto de fondo se acerca y luego llegan logos y texto. */
@keyframes liquimoly-cta-fondo {
	from {
		opacity: 0;
		transform: scale(1.12);
	}
}

.liquimoly-entradas .cta-tienda:not(.en-vista) .cta-tienda__productos,
.liquimoly-entradas .cta-tienda:not(.en-vista) .cta-tienda__fondo,
.liquimoly-entradas .cta-tienda:not(.en-vista) .cta-tienda__contenido > * {
	opacity: 0;
}

.cta-tienda.en-vista .cta-tienda__fondo {
	animation: liquimoly-cta-fondo 1.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.cta-tienda.en-vista .cta-tienda__productos {
	animation: liquimoly-productos-suben 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

.cta-tienda.en-vista .cta-tienda__contenido > * {
	animation: liquimoly-sube 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s backwards;
}

.cta-tienda.en-vista .cta-tienda__contenido > :nth-child(2) {
	animation-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
	.cta-tienda__productos {
		transition: none;
	}
}

/* ---------- Página 404: piloto delante de la franja tricolor vertical ---------- */

.p404 {
	--p404-grueso: var(--franja-gruesa-grueso);
	--p404-fino: var(--franja-gruesa-fino);
	overflow: hidden;
}

.p404__columnas {
	min-height: clamp(520px, 46vw, 640px);
}

.p404__texto {
	padding-block: var(--wp--preset--spacing--60);
}

.p404 .p404__codigo {
	margin: 0;
	font-size: clamp(5.5rem, 13vw, 11rem);
	font-weight: 700;
	line-height: 0.85;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--azul);
}

.p404__codigo span {
	color: var(--wp--preset--color--rojo);
}

.p404 .p404__titulo {
	margin-top: 0.35em;
	font-size: clamp(2rem, 4.4vw, 3.75rem);
	line-height: 1.04;
}

.p404__titulo mark {
	padding: 0;
}

.p404 .p404__bajada {
	max-width: 32em;
	font-size: var(--wp--preset--font-size--large);
}

.p404 .buscador {
	max-width: 34rem;
	margin-top: var(--wp--preset--spacing--40);
}

/* La franja (azul, blanco, rojo) corre de arriba abajo detrás del piloto. */
.p404__imagen {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	align-self: stretch !important;
}

.p404__imagen::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: calc(var(--p404-grueso) * 2 + var(--p404-fino));
	margin-left: calc((var(--p404-grueso) * 2 + var(--p404-fino)) / -2);
	background: linear-gradient(
		to right,
		var(--wp--preset--color--azul) 0 var(--p404-grueso),
		var(--wp--preset--color--blanco) var(--p404-grueso) calc(var(--p404-grueso) + var(--p404-fino)),
		var(--wp--preset--color--rojo) calc(var(--p404-grueso) + var(--p404-fino)) 100%
	);
	transform-origin: top;
}

.p404__imagen .wp-block-image {
	position: relative;
	z-index: 1;
	margin: 0;
	padding-top: 2rem;
}

.p404__imagen img {
	display: block;
	width: auto;
	max-width: none;
	height: clamp(380px, 40vw, 560px);
	border-radius: 0;
	object-fit: contain;
}

/* Entrada: la franja baja desde arriba y el piloto sube por delante. */
@keyframes liquimoly-p404-franja {
	from {
		transform: scaleY(0);
	}
}

body:not(.editor-styles-wrapper) .p404__imagen::before {
	animation: liquimoly-p404-franja 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body:not(.editor-styles-wrapper) .p404__imagen img {
	animation: liquimoly-hero-piloto 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

body:not(.editor-styles-wrapper) .p404__codigo,
body:not(.editor-styles-wrapper) .p404__bajada,
body:not(.editor-styles-wrapper) .p404 .buscador,
body:not(.editor-styles-wrapper) .p404__botones {
	animation: liquimoly-hero-texto 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

body:not(.editor-styles-wrapper) .p404__bajada {
	animation-delay: 0.5s;
}

body:not(.editor-styles-wrapper) .p404 .buscador {
	animation-delay: 0.6s;
}

body:not(.editor-styles-wrapper) .p404__botones {
	animation-delay: 0.7s;
}

@media (max-width: 781px) {
	.p404__texto {
		padding-bottom: 0;
	}

	.p404__imagen img {
		height: 340px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body:not(.editor-styles-wrapper) .p404 *,
	body:not(.editor-styles-wrapper) .p404__imagen::before {
		animation: none;
	}
}

/* ---------- Buscador (404 y página de búsqueda) ---------- */

.buscador .wp-block-search__inside-wrapper {
	padding: 4px;
	border: 1px solid var(--wp--preset--color--azul);
	border-radius: var(--wp--custom--radio--boton);
	background: var(--wp--preset--color--blanco);
	transition: box-shadow var(--wp--custom--transicion);
}

.buscador .wp-block-search__inside-wrapper:focus-within {
	box-shadow: 0 2px 14px rgb(0 81 158 / 0.22);
}

.buscador .wp-block-search__input {
	min-width: 0;
	padding: 0.65em 1.1em;
	border: 0;
	background: transparent;
	font-size: 1rem;
	outline: 0;
}

.buscador .wp-block-search__button {
	margin: 0;
	padding: 0.6em 1.5em;
	border: 0;
	border-radius: var(--wp--custom--radio--boton);
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--blanco);
	font-weight: 700;
	letter-spacing: var(--wp--custom--espaciado-letras);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--wp--custom--transicion);
}

.buscador .wp-block-search__button:hover,
.buscador .wp-block-search__button:focus-visible {
	background: var(--wp--preset--color--rojo);
}

/* ---------- Resultados de búsqueda (estilo Google) ---------- */

.busqueda__resumen {
	margin: 1.25rem 0 1.75rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--gris);
}

.busqueda__lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.busqueda__resultado {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.busqueda__cuerpo {
	flex: 1;
	min-width: 0;
}

.busqueda__enlace {
	display: block;
	color: inherit;
	text-decoration: none;
}

.busqueda__sitio {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 0.35rem;
}

.busqueda__favicon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	padding: 3px;
	border: 1px solid #e3e3e3;
	border-radius: 50%;
	background: var(--wp--preset--color--gris-claro);
}

.busqueda__sitio > span {
	flex: 1;
	min-width: 0;
	line-height: 1.25;
}

.busqueda__nombre {
	display: block;
	font-size: 0.875rem;
	color: var(--wp--preset--color--negro);
}

.busqueda__ruta {
	display: block;
	overflow: hidden;
	font-size: 0.8rem;
	font-style: normal;
	color: var(--wp--preset--color--gris);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.busqueda .busqueda__titulo {
	margin: 0;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--azul);
}

.busqueda__enlace:hover .busqueda__titulo,
.busqueda__enlace:focus-visible .busqueda__titulo {
	text-decoration: underline;
}

.busqueda__fragmento {
	margin: 0.3rem 0 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: #4d5156;
}

.busqueda__titulo strong,
.busqueda__fragmento strong {
	font-weight: 700;
	color: var(--wp--preset--color--negro);
}

.busqueda__titulo strong {
	color: inherit;
}

.busqueda__media {
	flex-shrink: 0;
	margin-top: 1.9rem;
}

.busqueda__foto {
	display: block;
	width: 92px;
	height: 92px;
	border: 1px solid #ececec;
	border-radius: 12px;
	background: var(--wp--preset--color--blanco);
	object-fit: contain;
}

.busqueda__paginas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 3rem;
}

.busqueda__paginas .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	height: 2.5em;
	padding: 0 0.8em;
	border-radius: var(--wp--custom--radio--boton);
	color: var(--wp--preset--color--azul);
	text-decoration: none;
	transition: background-color var(--wp--custom--transicion);
}

.busqueda__paginas a.page-numbers:hover {
	background: var(--wp--preset--color--gris-claro);
}

.busqueda__paginas .current {
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--blanco);
}

.busqueda__vacio ul {
	margin-bottom: 2rem;
	color: var(--wp--preset--color--gris);
}

@media (max-width: 600px) {
	.busqueda__foto {
		width: 72px;
		height: 72px;
	}
}

/* Los resultados enlazan a cada ficha en /productos/: que no quede bajo la cabecera. */
.ficha {
	scroll-margin-top: calc(var(--wp--custom--cabecera--alto) + 1.5rem);
}

/* ---------- Encabezado de páginas internas simples (políticas, guía de aceites) ---------- */

.pagina-hero .pagina-hero__antetitulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--espaciado-letras);
	text-transform: uppercase;
	color: var(--wp--preset--color--rojo);
}

.pagina-hero .pagina-hero__titulo {
	margin-top: 0.3em;
	font-size: clamp(2.4rem, 6vw, 4.75rem);
	line-height: 1.02;
}

.pagina-hero__titulo mark {
	padding: 0;
}

/* El diseño restringido centra lo angosto: la bajada va alineada a la izquierda. */
.pagina-hero .pagina-hero__bajada {
	max-width: 40em;
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
	font-size: var(--wp--preset--font-size--large);
}

/* ---------- Políticas de privacidad: índice lateral + texto legal ---------- */

.legal {
	display: grid;
	margin-top: 0;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	padding-block: var(--wp--preset--spacing--60);
}

/* Índice fijo mientras se lee. */
.legal__indice {
	position: sticky;
	top: calc(var(--wp--custom--cabecera--alto) + 1.5rem);
	align-self: start;
	max-height: calc(100vh - var(--wp--custom--cabecera--alto) - 3rem);
	overflow-y: auto;
	padding: 1.5rem 1.25rem;
	border-radius: var(--wp--custom--radio--tarjeta);
	background: var(--wp--preset--color--gris-claro);
}

.legal__indice .legal__indice-titulo {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--espaciado-letras);
	text-transform: uppercase;
}

.legal__indice ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.legal__indice a {
	display: flex;
	gap: 0.6rem;
	padding: 0.35rem 0.5rem;
	border-radius: 8px;
	font-size: 0.9rem;
	line-height: 1.3;
	color: var(--wp--preset--color--negro);
	text-decoration: none;
	transition: background-color var(--wp--custom--transicion), color var(--wp--custom--transicion);
}

.legal__indice a span {
	flex: 0 0 1.4em;
	font-weight: 700;
	color: var(--wp--preset--color--azul);
}

.legal__indice a:hover,
.legal__indice a:focus-visible {
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--blanco);
}

.legal__indice a:hover span,
.legal__indice a:focus-visible span {
	color: inherit;
}

.legal__contenido {
	max-width: 760px;
	color: #333;
}

.legal .legal__titulo-seccion {
	margin: 0 0 1.5rem;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	text-transform: uppercase;
}

.legal__seccion {
	scroll-margin-top: calc(var(--wp--custom--cabecera--alto) + 1.5rem);
}

.legal__seccion + .legal__seccion {
	margin-top: 2.75rem;
	padding-top: 2.75rem;
	border-top: 1px solid #e3e3e3;
}

.legal__seccion h2 {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0 0 1rem;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	line-height: 1.2;
}

.legal__num {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	border-radius: 50%;
	background: var(--wp--preset--color--azul);
	font-size: 0.75em;
	color: var(--wp--preset--color--blanco);
	transform: translateY(-0.1em);
}

.legal__seccion h3 {
	margin: 2rem 0 0.75rem;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--azul);
}

.legal__seccion p,
.legal__seccion li {
	line-height: 1.7;
	text-align: justify;
	hyphens: auto;
}

.legal__seccion ul,
.legal__seccion ol {
	padding-left: 1.25rem;
}

.legal__seccion li + li {
	margin-top: 0.4rem;
}

/* Documentos: tarjetas blancas que se llenan de azul («nivel de aceite»). */
.legal__docs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}

.legal__doc {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.25rem 3rem 1.25rem 1.25rem;
	border: 1px solid var(--wp--preset--color--azul);
	border-radius: var(--wp--custom--radio--tarjeta);
	background: linear-gradient(to top, var(--wp--preset--color--azul) 50%, var(--wp--preset--color--blanco) 50%) 0 0 / 100% 200%;
	color: var(--wp--preset--color--negro);
	text-decoration: none;
	transition: background-position 320ms ease, color 320ms ease;
}

.legal__doc::after {
	content: "";
	position: absolute;
	top: 1.1rem;
	right: 1rem;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--wp--preset--color--azul);
	-webkit-mask: url("../icons/icono-link-externo.svg") center / contain no-repeat;
	mask: url("../icons/icono-link-externo.svg") center / contain no-repeat;
	transition: background-color 320ms ease;
}

.legal__doc-tipo {
	align-self: flex-start;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--rojo);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--wp--custom--espaciado-letras);
	text-transform: uppercase;
	color: var(--wp--preset--color--blanco);
}

.legal__doc-nombre {
	font-weight: 600;
	line-height: 1.3;
}

.legal__doc:hover,
.legal__doc:focus-visible {
	background-position: 0 100%;
	color: var(--wp--preset--color--blanco);
}

.legal__doc:hover::after,
.legal__doc:focus-visible::after {
	background-color: var(--wp--preset--color--blanco);
}

@media (max-width: 900px) {
	.legal {
		grid-template-columns: minmax(0, 1fr);
	}

	.legal__indice {
		position: static;
		max-height: none;
	}

	.legal__seccion p,
	.legal__seccion li {
		text-align: left;
	}
}

/* ---------- Guía de aceites: la de liqui-moly.com embebida ---------- */

.guia {
	margin-top: 0;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.guia__pasos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
	font-weight: 600;
}

.guia__pasos li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.guia__pasos span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--azul);
	font-size: 0.9rem;
	color: var(--wp--preset--color--blanco);
}

.guia__marco {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--azul);
	border-radius: 33px;
	background: var(--wp--preset--color--gris-claro);
}

/* Queda detrás del iframe: se ve solo mientras carga. */
.guia__cargando {
	position: absolute;
	top: 6rem;
	right: 0;
	left: 0;
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--gris);
}

.guia__iframe {
	position: relative;
	display: block;
	width: 100%;
	height: clamp(820px, 115vh, 1250px);
	border: 0;
}

.guia__ayuda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-top: 1.5rem;
}

.guia__ayuda p {
	flex: 1 1 22rem;
	margin: 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--gris);
}

@media (max-width: 781px) {
	.guia__marco {
		border-radius: 18px;
	}

	.guia__iframe {
		height: 85vh;
		min-height: 640px;
	}
}