/*
Theme Name: Leo Haring
Theme URI: https://leoharing.com
Author: Leo Haring
Author URI: https://leoharing.com
Description: Tema de bloques de leoharing.com. Core-first: theme.json + bloques nativos, cero page builders, cero JS propio, fuentes autoalojadas.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: leoharing
Tags: block-theme, full-site-editing, portfolio, one-column, accessibility-ready
*/

/* -----------------------------------------------------------------------------
 * CSS del tema. El criterio de diseño está escrito en DISENO.md — concepto
 * "sala de máquinas": todo rotulado, la grilla se ve, el neón es información.
 *
 * Todo va prefijado `lh-` y con especificidad defensiva: este sitio tiene que
 * convivir con cualquier plugin que se instale mañana sin que le pisen los
 * estilos, y sin usar !important para lograrlo.
 *
 * Los valores salen de theme.json (custom properties). Nada de hex sueltos.
 *
 * ÍNDICE
 *   1. Accesibilidad
 *   2. Atmósfera de fondo
 *   3. Navegación
 *   4. Componentes  (rótulo · panel · número · media · badge)
 *   5. Secciones
 *   6. Footer
 *   7. Legibilidad
 *   8. Movimiento
 * -------------------------------------------------------------------------- */

/* =============================================================================
 * 1. Accesibilidad
 * ========================================================================== */

/* Foco visible en todo lo interactivo. No se quita nunca. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Salto al contenido: visible solo cuando recibe foco por teclado. */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--mono);
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	z-index: 100000;
}

/* =============================================================================
 * 2. Atmósfera de fondo
 *
 * Tres capas, todas CSS, cero imágenes y cero peso: grilla técnica, halos de
 * color y viñeta. Ninguna pasa del 6% de opacidad — se ven al mirar, no al
 * pasar, y nunca comprometen la legibilidad.
 * ========================================================================== */

body::before {
	background-image:
		repeating-linear-gradient(to right, rgba(148, 163, 184, 0.05) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(to bottom, rgba(148, 163, 184, 0.05) 0 1px, transparent 1px 64px);
	content: "";
	inset: 0;
	pointer-events: none;
	position: fixed;
	z-index: 0;
}

body::after {
	background-image:
		radial-gradient(60rem 40rem at 12% -5%, rgba(0, 240, 255, 0.06), transparent 70%),
		radial-gradient(50rem 40rem at 95% 105%, rgba(255, 0, 127, 0.05), transparent 70%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: fixed;
	z-index: 0;
}

/* El contenido vive por encima de las capas de atmósfera. */
.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* =============================================================================
 * 3. Navegación
 *
 * El core aplica `color: inherit` con la clase duplicada a propósito
 * (`.wp-block-navigation-item__content.wp-block-navigation-item__content`, 0-3-0).
 * Un selector de dos clases pierde aunque cargue después: hay que igualar
 * especificidad, nunca subir a !important.
 * ========================================================================== */

.lh-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color 120ms linear;
}

.lh-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.lh-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary);
}

.lh-nav .current-menu-item .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.4em;
}

/* El header queda pegado arriba: es la barra de instrumentos del sitio.
 *
 * El `sticky` va en el <header> del template part, NO en el grupo de adentro:
 * un elemento sticky solo se despega dentro de su propio contenedor, y ese
 * contenedor mide exactamente lo mismo que el header — así que no se movía. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* El desenfoque va en un pseudo-elemento detrás, NO en el header.
 *
 * `backdrop-filter` convierte al elemento en containing block de todos sus
 * descendientes `position: fixed`. Con el filtro en `.lh-header`, el overlay
 * del menú mobile se renderizaba DENTRO del header (146,9px de alto en vez de
 * la pantalla completa) y solo entraban dos de los cuatro links. */
.lh-header {
	background-color: rgba(5, 5, 7, 0.85);
	position: relative;
}

.lh-header::before {
	backdrop-filter: blur(10px);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* =============================================================================
 * 4. Componentes
 * ========================================================================== */

/* --- Rótulo de sección --------------------------------------------------- */
/* La etiqueta en mono precedida de una línea corta en cyan. Es la pieza que le
   da a toda la página el aire de plano técnico. */
.wp-block-paragraph.is-style-lh-etiqueta {
	align-items: center;
	color: var(--wp--preset--color--primary);
	display: flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	gap: 0.75em;
	letter-spacing: 0.12em;
	margin-bottom: var(--wp--preset--spacing--30);
	text-transform: uppercase;
}

.wp-block-paragraph.is-style-lh-etiqueta::before {
	background-color: currentColor;
	content: "";
	display: block;
	flex: 0 0 2.5rem;
	height: 1px;
}

/* --- Panel (tarjeta con marcadores de esquina) ---------------------------- */
/* Reemplaza a la tarjeta genérica: cuatro marcas de esquina dibujadas con
   gradientes, y al hover el borde se enciende y el panel sube 2px. */
.wp-block-group.is-style-lh-card,
.wp-block-group.is-style-lh-card-destacada {
	border-radius: var(--wp--custom--radius--sharp);
	padding: var(--wp--preset--spacing--40);
	position: relative;
	transition: border-color 160ms ease, transform 160ms ease;
}

.wp-block-group.is-style-lh-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
}

.wp-block-group.is-style-lh-card-destacada {
	background-color: var(--wp--preset--color--accent-soft);
	border: 1px solid var(--wp--preset--color--accent);
}

/* Marcadores de esquina: dos pseudo-elementos, cuatro esquinas. */
.wp-block-group.is-style-lh-card::before,
.wp-block-group.is-style-lh-card::after {
	content: "";
	height: 10px;
	pointer-events: none;
	position: absolute;
	transition: border-color 160ms ease;
	width: 10px;
}

.wp-block-group.is-style-lh-card::before {
	border-left: 1px solid var(--wp--preset--color--primary-soft);
	border-top: 1px solid var(--wp--preset--color--primary-soft);
	left: -1px;
	top: -1px;
}

.wp-block-group.is-style-lh-card::after {
	border-bottom: 1px solid var(--wp--preset--color--primary-soft);
	border-right: 1px solid var(--wp--preset--color--primary-soft);
	bottom: -1px;
	right: -1px;
}

.wp-block-group.is-style-lh-card:hover,
.wp-block-group.is-style-lh-card:focus-within {
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
}

.wp-block-group.is-style-lh-card:hover::before,
.wp-block-group.is-style-lh-card:hover::after,
.wp-block-group.is-style-lh-card:focus-within::before,
.wp-block-group.is-style-lh-card:focus-within::after {
	border-color: var(--wp--preset--color--primary);
}

/* Orbitron en mayúsculas es MUY ancha: un título largo dentro de una columna
   angosta se parte al medio de la palabra ("COMERCIA L NORTE"). En cualquier
   columna los títulos cortan con guión, nunca a lo bruto. */
.wp-block-column :where(h2, h3, h4) {
	hyphens: auto;
	letter-spacing: 0;
	overflow-wrap: normal;
	text-wrap: balance;
	word-break: normal;
}

.wp-block-group.is-style-lh-card :where(h2, h3, h4),
.wp-block-group.is-style-lh-card-destacada :where(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--large);
	hyphens: auto;
	letter-spacing: 0;
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* --- Numeración de paso -------------------------------------------------- */
/* Cifra grande en Orbitron con relleno transparente y contorno: da jerarquía
   sin agregar una palabra. */
.wp-block-paragraph.is-style-lh-numero {
	-webkit-text-stroke: 1px var(--wp--preset--color--primary);
	color: transparent;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 700;
	line-height: 1;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* --- Badge de estado ----------------------------------------------------- */
.wp-block-paragraph.is-style-lh-badge.lh-badge--magenta {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.wp-block-paragraph.is-style-lh-badge {
	border: 1px solid var(--wp--preset--color--primary-soft);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--primary);
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	padding: 0.35em 0.9em;
	text-transform: uppercase;
}

/* --- Media con marco técnico --------------------------------------------- */
/* La imagen nunca va suelta: va en un marco con la esquina superior derecha
   recortada y una línea de acento. */
.wp-block-image.is-style-lh-media {
	position: relative;
}

.wp-block-image.is-style-lh-media img {
	border: 1px solid var(--wp--preset--color--border);
	clip-path: polygon(0 0, calc(100% - 1.25rem) 0, 100% 1.25rem, 100% 100%, 0 100%);
	display: block;
	transition: border-color 160ms ease, transform 200ms ease;
	width: 100%;
}

.wp-block-image.is-style-lh-media:hover img {
	border-color: var(--wp--preset--color--primary);
	transform: scale(1.01);
}

/* =============================================================================
 * 4b. Sistema de sección — barra lateral numerada
 *
 * Cada sección del sitio lleva a la izquierda una columna angosta con su número
 * correlativo, como una pieza en un plano. El número sale de un contador CSS:
 * no hay que escribirlo en el markup ni renumerar nada si se reordenan las
 * secciones. En mobile la columna desaparece.
 * ========================================================================== */

.wp-block-post-content {
	counter-reset: lh-seccion;
}

/* Contenedor interno de sección.
 *
 * Las secciones NO usan el layout "constrained" de WordPress: ese layout le
 * mete `margin-inline: auto !important` a cada hijo, así que todo queda
 * centrado y no hay forma de alinear a la izquierda sin pelearle al core con
 * !important. Con layout "default" + este contenedor, el ancho y el padding
 * son nuestros y cada bloque fluye donde corresponde. */
.lh-sec__inner {
	margin-inline: auto;
	max-width: 1400px;
	padding-inline: clamp(20px, 5vw, 96px);
	position: relative;
	width: 100%;
}

/* Medida de lectura para el texto corrido dentro de una sección ancha. */
.lh-sec__inner > p {
	max-width: 68ch;
}

.lh-sec {
	border-bottom: 1px solid var(--wp--preset--color--border);
	counter-increment: lh-seccion;
	overflow: clip;
	position: relative;
}

@media (min-width: 782px) {
	.lh-sec {
		padding-left: var(--wp--custom--sidebar);
	}

	.lh-sec::before {
		border-right: 1px solid var(--wp--preset--color--border);
		bottom: 0;
		content: "";
		left: 0;
		position: absolute;
		top: 0;
		width: var(--wp--custom--sidebar);
	}

	.lh-sec::after {
		color: var(--wp--preset--color--text-muted);
		content: counter(lh-seccion, decimal-leading-zero);
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.75rem;
		left: 0;
		letter-spacing: 0.18em;
		position: absolute;
		text-align: center;
		top: var(--wp--preset--spacing--40);
		width: var(--wp--custom--sidebar);
	}

	/* La primera sección marca su número en cyan: es donde arranca la lectura. */
	.lh-sec.lh-hero::after {
		color: var(--wp--preset--color--primary);
	}
}

/* Fondo de grilla técnica por sección, desvanecido con una máscara radial para
   que no compita con el texto. */
.lh-sec--grilla > :first-child::before {
	background-image:
		linear-gradient(rgba(148, 163, 184, 0.09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, 0.09) 1px, transparent 1px);
	background-size: 80px 80px;
	content: "";
	inset: 0;
	mask-image: radial-gradient(120% 90% at 15% 0%, #000 20%, transparent 78%);
	pointer-events: none;
	position: absolute;
}

/* --- Rótulo con número y regla ------------------------------------------- */
.wp-block-paragraph.is-style-lh-etiqueta,
.wp-block-heading.is-style-lh-etiqueta {
	align-items: center;
	color: var(--wp--preset--color--text-muted);
	display: flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 400;
	gap: 1em;
	letter-spacing: 0.24em;
	margin-bottom: var(--wp--preset--spacing--40);
	text-transform: uppercase;
}

.wp-block-paragraph.is-style-lh-etiqueta::after,
.wp-block-heading.is-style-lh-etiqueta::after {
	background-color: var(--wp--preset--color--border);
	content: "";
	flex: 1 1 40px;
	height: 1px;
	min-width: 30px;
}

/* --- Dato duro ----------------------------------------------------------- */
/* Cifra en mono, grande, con su etiqueta abajo. El color lo pone una clase
   modificadora, porque cada dato tiene su jerarquía. */
.lh-dato {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(1.8rem, 3.4vw, 3.2rem);
	line-height: 1;
	margin: 0;
}

.lh-dato--cyan {
	color: var(--wp--preset--color--primary);
}

.lh-dato--magenta {
	color: var(--wp--preset--color--accent);
}

.lh-dato__label {
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	margin: 0.5rem 0 0;
	text-transform: uppercase;
}

/* --- Botón con sombra sólida --------------------------------------------- */
/* El CTA principal se apoya sobre una sombra magenta sin desenfoque: la sombra
   es una forma, no un efecto de profundidad. Al hover invierte los colores. */
.wp-block-button.lh-cta-solido .wp-block-button__link {
	box-shadow: 6px 6px 0 rgba(255, 0, 127, 0.85);
	transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.wp-block-button.lh-cta-solido .wp-block-button__link:hover,
.wp-block-button.lh-cta-solido .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent);
	box-shadow: 6px 6px 0 rgba(0, 240, 255, 0.85);
	color: var(--wp--preset--color--contrast);
	transform: translate(-2px, -2px);
}

/* Los títulos mega llevan el interletrado cerrado del diseño y una altura de
   línea comprimida: son bloques gráficos, no párrafos. */
.lh-titulo-mega {
	letter-spacing: -0.035em;
	line-height: var(--wp--custom--line-height--tight);
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* La bajada del hero no se estira: se lee en medida corta aunque la sección
   sea ancha. Y arranca a la izquierda, no centrada: el layout constrained de
   WordPress centra todo lo que tiene max-width propio. */
.lh-hero > p,
.lh-hero > .is-style-lh-etiqueta {
	margin-inline: 0 auto;
	max-width: 62ch;
}

/* --- Título con segunda línea en contorno -------------------------------- */
.lh-contorno {
	-webkit-text-stroke: 1px var(--wp--preset--color--primary);
	color: transparent;
}

.lh-contorno--magenta {
	-webkit-text-stroke: 1px var(--wp--preset--color--accent);
	color: transparent;
}

/* --- Acento cyan con resplandor y subrayado magenta ---------------------- */
.lh-acento {
	color: var(--wp--preset--color--primary);
	position: relative;
	text-shadow: 0 0 40px rgba(0, 240, 255, 0.35);
}

.lh-acento::after {
	background-color: var(--wp--preset--color--accent);
	bottom: -0.06em;
	content: "";
	height: 6px;
	left: 0;
	position: absolute;
	width: 100%;
}

/* --- Letra de fondo en las tarjetas grandes ------------------------------ */
/* Una inicial gigante en contorno, anclada arriba a la derecha. Da escala sin
   ocupar espacio de contenido. La letra va por clase y no por atributo: los
   atributos sueltos no sobreviven a una edición en el editor de bloques. */
.lh-inicial {
	overflow: clip;
	position: relative;
}

.lh-inicial::before {
	-webkit-text-stroke: 1px rgba(0, 240, 255, 0.16);
	color: transparent;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(5rem, 12vw, 12rem);
	font-weight: 900;
	line-height: 0.8;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}

.lh-inicial--a::before {
	content: "A";
}

.lh-inicial--b::before {
	-webkit-text-stroke: 1px rgba(255, 0, 127, 0.2);
	content: "B";
}

/* --- Pie de tarjeta con dato duro ---------------------------------------- */
.lh-tarjeta-pie {
	align-items: baseline;
	border-top: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
}

.lh-tarjeta-pie__cifra {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(1.6rem, 2.6vw, 2.4rem);
	line-height: 1;
}

.lh-tarjeta-pie__cifra--magenta {
	color: var(--wp--preset--color--accent);
}

.lh-tarjeta-pie__texto {
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* --- Link con subrayado de acento ---------------------------------------- */
/* Los links de acción llegan a 44px de alto en mobile: por debajo de eso, en
   una pantalla táctil se falla el toque. */
.lh-link-acento a {
	border-bottom: 1px solid var(--wp--preset--color--primary);
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	padding-bottom: 8px;
	padding-top: 1.1rem;
	text-transform: uppercase;
}

/* Chips de filtro y etiquetas de tipo: mismo criterio. */
.lh-filtros a {
	min-height: 44px;
	padding-block: 0.85em;
}

.lh-caso__tipos a {
	display: inline-block;
	padding-block: 0.85rem;
}

/* Los botones de abrir y cerrar el menú los dibuja el core a 24x24. En una
   pantalla táctil eso se falla: se agranda el área sin agrandar el ícono. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-height: 44px;
	min-width: 44px;
}

/* El título del sitio en el header también es un link. */
.lh-header .wp-block-site-title a {
	display: inline-block;
	padding-block: 0.5rem;
}

.lh-link-acento--magenta a {
	border-bottom-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* --- El porqué: dos columnas asimétricas --------------------------------- */
/* La barra magenta debajo del título ancla la columna izquierda; la derecha
   se separa con una línea vertical, como dos páginas de un cuaderno. */
.lh-porque__titulo::after {
	background-color: var(--wp--preset--color--accent);
	content: "";
	display: block;
	height: 3px;
	margin-top: var(--wp--preset--spacing--40);
	width: 68px;
}

.lh-porque__cierre {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

@media (min-width: 782px) {
	.lh-porque__texto {
		border-left: 1px solid var(--wp--preset--color--border);
		padding-left: clamp(18px, 3vw, 48px);
	}
}

/* --- Encabezado de sección con meta a la derecha ------------------------- */
/* En mobile va apilado: en fila, el título en Orbitron mayúsculas no entra y se
   sale del viewport (medido: 1,2px afuera a 375px, con la S final cortada). */
.lh-encabezado {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--50);
}

.lh-encabezado > * {
	min-width: 0;
}

@media (min-width: 782px) {
	.lh-encabezado {
		align-items: flex-end;
		flex-direction: row;
		flex-wrap: wrap;
	}
}

.lh-encabezado__meta {
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	margin: 0;
	text-align: right;
	text-transform: uppercase;
}

.lh-encabezado__meta strong {
	color: var(--wp--preset--color--accent);
	font-weight: 400;
}

/* --- Cierre de sección: la frase con rombo ------------------------------- */
.lh-confluencia {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.125rem;
	margin-top: var(--wp--preset--spacing--50);
}

.lh-confluencia p {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(0.95rem, 1.7vw, 1.5rem);
	letter-spacing: -0.02em;
	margin: 0;
	text-transform: uppercase;
}

.lh-confluencia::after {
	background: linear-gradient(90deg, var(--wp--preset--color--accent), transparent);
	content: "";
	flex: 1 1 40px;
	height: 1px;
	min-width: 40px;
}

/* --- Paso numerado ------------------------------------------------------- */
/* La cifra en contorno hace de viñeta gigante. El último paso va en magenta:
   es el que cierra la promesa (te lo dejo andando). */
.lh-paso__num {
	-webkit-text-stroke: 1px var(--wp--preset--color--primary);
	color: transparent;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.6rem, 5vw, 4.2rem);
	font-weight: 900;
	line-height: 1;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.lh-paso__num--magenta {
	-webkit-text-stroke: 1px var(--wp--preset--color--accent);
}

.lh-paso h3 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* --- Lista con viñeta de rombo ------------------------------------------- */
.wp-block-list.lh-lista {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.lh-lista li {
	margin-bottom: var(--wp--preset--spacing--30);
	padding-left: 1.75rem;
	position: relative;
}

.wp-block-list.lh-lista li::before {
	background-color: var(--wp--preset--color--primary);
	content: "";
	height: 8px;
	left: 0;
	position: absolute;
	top: 0.6em;
	transform: rotate(45deg);
	width: 8px;
}

/* --- Panel de muestra tipo consola --------------------------------------- */
/* Simula el panel de personalización de BrandTienda: filas de propiedad y
   valor, como una ficha técnica. */
.lh-consola {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sharp);
	padding: var(--wp--preset--spacing--40);
}

.lh-consola__fila {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	justify-content: space-between;
	letter-spacing: 0.1em;
	margin: 0;
	padding-block: 0.9rem;
	text-transform: uppercase;
}

.lh-consola__fila:last-child {
	border-bottom: 0;
}

.lh-consola__fila span:first-child {
	color: var(--wp--preset--color--text-muted);
}

.lh-consola__fila span:last-child {
	color: var(--wp--preset--color--primary);
}

.lh-muestra {
	display: inline-block;
	height: 14px;
	margin-left: 6px;
	vertical-align: middle;
	width: 14px;
}

.lh-muestra--cyan {
	background-color: var(--wp--preset--color--primary);
}

.lh-muestra--magenta {
	background-color: var(--wp--preset--color--accent);
}

.lh-muestra--blanco {
	background-color: var(--wp--preset--color--contrast);
}

/* --- Video autoalojado ---------------------------------------------------- */
/* Marco técnico con la esquina superior derecha recortada, igual que el resto
   de la media del sitio. */
.lh-video {
	margin: 0;
}

.lh-video__player {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
	display: block;
	height: auto;
	transition: border-color 160ms ease;
	width: 100%;
}

.lh-video__player:hover,
.lh-video__player:focus-visible {
	border-color: var(--wp--preset--color--primary);
}

.lh-video__pie,
.lh-captura figcaption {
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	margin-top: 0.75rem;
	text-transform: uppercase;
}

/* --- Captura de producto -------------------------------------------------- */
.lh-captura {
	margin: 0;
}

/* Las capturas vienen de pantallas de distinta proporción: sin una altura común
   la fila queda escalonada. Se recortan desde arriba, que es la parte que
   muestra de qué se trata cada pantalla. */
/* Altura fija en lugar de aspect-ratio: la columna es un flex item que estira a
   sus hijos, y la proporción sola no alcanza para frenar eso. Se recorta desde
   arriba, que es la parte que muestra de qué se trata cada pantalla. */
.lh-captura img {
	border: 1px solid var(--wp--preset--color--border);
	clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 0 100%);
	display: block;
	height: clamp(180px, 17vw, 250px);
	object-fit: cover;
	object-position: top center;
	transition: border-color 160ms ease, transform 200ms ease;
	width: 100%;
}

.lh-captura:hover img {
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-3px);
}

/* --- Chips de la sección de corte ---------------------------------------- */
.lh-chips {
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: var(--wp--preset--spacing--50);
}

.lh-chips p {
	border-right: 1px solid rgba(255, 255, 255, 0.35);
	flex: 1 1 180px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	line-height: 1.7;
	margin: 0;
	padding-block: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--40);
	text-transform: uppercase;
}

/* Los chips a partir del segundo llevan aire a la izquierda: si no, el texto
   queda pegado a la línea divisoria del anterior. */
.lh-chips p + p {
	padding-left: var(--wp--preset--spacing--40);
}

.lh-chips p:last-child {
	border-right: 0;
	padding-right: 0;
}

/* --- Línea de tiempo ------------------------------------------------------ */
.lh-hito {
	border-top: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr;
	padding-block: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	.lh-hito {
		grid-template-columns: minmax(0, 18rem) 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

.lh-hito__anios {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.3rem, 2.4vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

.lh-hito__anios--cyan {
	color: var(--wp--preset--color--primary);
}

.lh-hito__anios--magenta {
	color: var(--wp--preset--color--accent);
}

.lh-hito p:last-child {
	margin: 0;
}

/* --- Migas de pan --------------------------------------------------------- */
/* Dicen dónde está parado el visitante y salen como ruta en los resultados de
   búsqueda. El separador se dibuja con CSS: no se lee en voz alta. */
.lh-migas ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
}

.lh-migas li {
	align-items: center;
	color: var(--wp--preset--color--text-muted);
	display: flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	gap: 0.75em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lh-migas li + li::before {
	color: var(--wp--preset--color--accent);
	content: "/";
}

.lh-migas a {
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.lh-migas a:hover,
.lh-migas a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.lh-migas [aria-current="page"] {
	color: var(--wp--preset--color--text);
}

/* --- Filtros del archive de casos ---------------------------------------- */
/* Son links reales al archive de cada término: andan sin JavaScript, se pueden
   compartir y Google los indexa. */
.lh-filtros {
	border-top: 1px solid var(--wp--preset--color--border);
	gap: 0;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
}

.lh-filtros p {
	margin: 0;
}

.lh-filtros a {
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text-muted);
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	margin: 0 0.5rem 0.5rem 0;
	padding: 0.5em 1.1em;
	text-transform: uppercase;
	transition: border-color 160ms ease, color 160ms ease;
}

.lh-filtros a:hover,
.lh-filtros a:focus-visible {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* --- Tarjeta de caso en la grilla ---------------------------------------- */
.lh-grilla-casos {
	gap: var(--wp--preset--spacing--30);
}

.lh-caso {
	display: flex;
	flex-direction: column;
	padding: 0;
}

.lh-caso > * {
	margin-block: 0;
	padding-inline: var(--wp--preset--spacing--40);
}

.lh-caso__img {
	padding-inline: 0;
}

.lh-caso__img img {
	display: block;
	width: 100%;
}

/* Sin captura, la tarjeta arranca con aire arriba en vez de pegada al borde. */
.lh-caso > .lh-caso__tipos:first-child {
	margin-top: var(--wp--preset--spacing--40);
}

.lh-caso .lh-caso__tipos {
	margin-top: var(--wp--preset--spacing--30);
}

.lh-caso h2 {
	margin-top: var(--wp--preset--spacing--20);
}

/* El título de la tarjeta también es un link: necesita área de toque. */
.lh-caso h2 a {
	display: inline-block;
	padding-block: 0.55rem;
}

.lh-caso .wp-block-post-excerpt {
	color: var(--wp--preset--color--text-muted);
}

/* El contenido de la tarjeta se apoya arriba: las que no tienen captura no
   quedan con un hueco del alto de la fila. */
.lh-caso {
	justify-content: flex-start;
}

.lh-caso .lh-link-acento {
	margin-bottom: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--30);
}

/* Las etiquetas de tipo, en mono y separadas por un punto medio. */
.lh-caso__tipos {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.lh-caso__tipos a {
	color: inherit;
	text-decoration: none;
}

.lh-caso__tipos a:hover {
	color: var(--wp--preset--color--accent);
}

/* --- Ficha de caso -------------------------------------------------------- */
.lh-caso__resumen {
	color: var(--wp--preset--color--text);
	max-width: 62ch;
}

.lh-caso__portada img {
	border: 1px solid var(--wp--preset--color--border);
	width: 100%;
}

/* Todos los párrafos de la ficha comparten la misma medida de línea, sin
   importar su tamaño de fuente: si cada uno usa 68ch propios, los bloques
   quedan de anchos distintos y la columna se ve rota. */
.lh-caso__cuerpo p {
	max-width: 46rem;
}

.lh-caso__cuerpo .lh-consola p {
	max-width: none;
}

/* La etiqueta de la fila no se parte en dos líneas. */
.lh-consola__fila > span:first-child {
	flex: none;
	white-space: nowrap;
}

.lh-consola__fila > span:last-child {
	text-align: right;
}

.lh-caso__cuerpo .lh-consola {
	margin-top: var(--wp--preset--spacing--50);
	max-width: 46rem;
}

/* --- Grilla vertical de fondo (sección casos) ---------------------------- */
.lh-sec--rayas > :first-child::before {
	background-image: linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
	background-size: 120px 100%;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* --- Tarjetas escalonadas ------------------------------------------------ */
/* La asimetría no es decorativa: rompe la lectura en bloque y obliga al ojo a
   recorrer. Solo en desktop; apiladas en mobile no tendría sentido. */
@media (min-width: 782px) {
	.lh-escalonado > .wp-block-column:nth-child(2) {
		margin-top: clamp(0px, 2.4vw, 40px);
	}

	.lh-escalonado > .wp-block-column:nth-child(3) {
		margin-top: clamp(0px, 4.8vw, 80px);
	}
}

/* --- Tarjeta con borde superior de acento -------------------------------- */
/* La barra de color arriba clasifica de un vistazo: cyan es WordPress y el
   oficio, magenta es IA y lo que cambia de contexto. */
.lh-tarjeta {
	background-color: rgba(5, 5, 7, 0.7);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sharp);
	border-top-width: 2px;
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	transition: border-color 250ms ease, transform 250ms ease;
}

.lh-tarjeta--cyan {
	border-top-color: var(--wp--preset--color--primary);
}

.lh-tarjeta--magenta {
	border-top-color: var(--wp--preset--color--accent);
}

.lh-tarjeta:hover,
.lh-tarjeta:focus-within {
	transform: translateY(-6px);
}

.lh-tarjeta--cyan:hover,
.lh-tarjeta--cyan:focus-within {
	border-color: var(--wp--preset--color--primary);
}

.lh-tarjeta--magenta:hover,
.lh-tarjeta--magenta:focus-within {
	border-color: var(--wp--preset--color--accent);
}

.lh-tarjeta__id {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	margin: 0 0 0.75rem;
}

.lh-tarjeta__id--magenta {
	color: var(--wp--preset--color--accent);
}

.lh-tarjeta p:last-child {
	margin-bottom: 0;
}

/* El pie del hero separa el CTA de los datos y los alinea abajo. */
.lh-hero__pie {
	align-items: flex-end;
	gap: clamp(20px, 4vw, 64px);
}

.lh-datos {
	gap: clamp(18px, 3vw, 56px);
}

.lh-datos p {
	margin-block: 0;
}

/* --- Panel con gradiente direccional ------------------------------------- */
.lh-panel-cyan {
	background-image: linear-gradient(160deg, rgba(0, 240, 255, 0.07), rgba(5, 5, 7, 0) 58%);
}

.lh-panel-magenta {
	background-image: linear-gradient(200deg, rgba(255, 0, 127, 0.09), rgba(5, 5, 7, 0) 58%);
}

/* --- Rombo marcador ------------------------------------------------------ */
.lh-rombo::before {
	background-color: var(--wp--preset--color--primary);
	content: "";
	display: inline-block;
	height: 10px;
	margin-right: 1em;
	transform: rotate(45deg);
	vertical-align: middle;
	width: 10px;
}

/* --- Sección de corte: magenta pleno ------------------------------------- */
/* WP Factory le habla a otro público. El cambio se anuncia con el color, que
   es el gesto más fuerte disponible: nadie puede pasarlo por alto. */
.lh-corte {
	background-image: linear-gradient(135deg, var(--wp--preset--color--accent) 0%, #b3005a 55%, #4a0026 100%);
	color: var(--wp--preset--color--contrast);
}

.lh-corte :where(h2, h3, p, li) {
	color: var(--wp--preset--color--contrast);
}

.lh-corte .is-style-lh-etiqueta {
	color: rgba(255, 255, 255, 0.75);
}

.lh-corte .is-style-lh-etiqueta::after {
	background-color: rgba(255, 255, 255, 0.35);
}

/* Magenta oscuro sobre blanco, no el magenta puro: #FF007F sobre blanco da
   3.77:1 y no llega a AA. Con #8F0047 el botón se lee y sigue siendo magenta. */
.lh-corte .wp-block-button__link {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--accent-dark);
}

.lh-corte .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

/* =============================================================================
 * 5. Secciones
 * ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.lh-hero {
	overflow: clip;
	position: relative;
}

/* Marca de agua tipográfica: la palabra que define el sitio, gigante y apenas
   perceptible, rompiendo el borde derecho. Da escala y profundidad sin imagen. */
.lh-hero::before {
	-webkit-text-stroke: 1px rgba(0, 240, 255, 0.13);
	color: transparent;
	content: "CONSTRUIR";
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(8rem, 22vw, 20rem);
	font-weight: 900;
	line-height: 0.8;
	pointer-events: none;
	position: absolute;
	right: -0.1em;
	top: 45%;
	user-select: none;
	z-index: -1;
}

/* Segunda línea del título en cyan: el contraste hace la jerarquía. */
.lh-hero__titulo .lh-acento {
	color: var(--wp--preset--color--primary);
}

/* El título rompe hacia la izquierda del contenedor en desktop. */
@media (min-width: 1024px) {
	.lh-hero__titulo,
	.lh-hero__rotulo {
		margin-left: calc(-1 * var(--wp--preset--spacing--50));
	}
}

/* --- HUD: la columna de datos duros -------------------------------------- */
/* Panel de instrumentos: números grandes en mono con etiqueta chica, sobre una
   línea vertical de acento. */
.lh-hud {
	border-left: 2px solid var(--wp--preset--color--accent);
	padding-left: var(--wp--preset--spacing--40);
}

.lh-hud__linea {
	align-items: baseline;
	display: flex;
	gap: 0.6em;
	margin-block: 0 var(--wp--preset--spacing--30);
}

.lh-hud__dato {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1;
}

.lh-hud__label {
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lh-hud__pie {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	padding-top: var(--wp--preset--spacing--30);
	text-transform: uppercase;
}

/* --- Marquesina de stack -------------------------------------------------- */
/* Franja de tecnologías en movimiento continuo. Es decorativa y no lleva
   información única: si no se anima, se lee igual. */
.lh-marquesina {
	border-block: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface);
	overflow: clip;
	padding-block: var(--wp--preset--spacing--30);
}

.lh-marquesina__pista {
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.18em;
	margin: 0;
	text-transform: uppercase;
	white-space: nowrap;
	width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes lh-desliza {
		from {
			transform: translateX(0);
		}

		to {
			transform: translateX(-50%);
		}
	}

	.lh-marquesina__pista {
		animation: lh-desliza 60s linear infinite;
	}

	.lh-marquesina:hover .lh-marquesina__pista {
		animation-play-state: paused;
	}
}

/* El porqué es un bloque de lectura: tipografía grande y medida angosta. */
.lh-porque p {
	max-width: 60ch;
}

/* Cómo trabajo: línea que conecta los cuatro pasos en desktop. */
@media (min-width: 782px) {
	.lh-metodo .wp-block-columns {
		position: relative;
	}

	.lh-metodo .wp-block-columns::before {
		background: linear-gradient(
			90deg,
			var(--wp--preset--color--primary-soft),
			var(--wp--preset--color--border)
		);
		content: "";
		height: 1px;
		left: 0;
		position: absolute;
		right: 0;
		top: 2.5rem;
	}
}

/* WP Factory: corte de contexto. La regla magenta ya está en el markup; acá
   se refuerza con un rótulo lateral que anuncia el cambio de público. */
.lh-factory {
	position: relative;
}

/* Trayectoria: marcas sobre una línea de tiempo. */
.lh-trayectoria .wp-block-column {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--30);
	position: relative;
}

.lh-trayectoria .wp-block-column::before {
	background-color: var(--wp--preset--color--primary);
	content: "";
	height: 5px;
	left: 0;
	position: absolute;
	top: -3px;
	width: 5px;
}

/* El cierre es la sección con más aire de la página. */
.lh-cierre h2 {
	max-width: 20ch;
}

.lh-cierre__pie {
	align-items: center;
	gap: clamp(20px, 4vw, 56px);
}

.lh-cierre__nota {
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	line-height: 2;
	margin: 0;
	text-transform: uppercase;
}

/* En BrandTienda el nombre parte en dos tonos, sin el subrayado del hero. */
.lh-acento-plano {
	color: var(--wp--preset--color--primary);
}

/* Un nombre propio no se parte al medio aunque no entre: antes se achica. */
.lh-titulo-entero {
	overflow-wrap: normal;
	text-wrap: nowrap;
	word-break: keep-all;
}

/* =============================================================================
 * 6. Footer
 * ========================================================================== */

/* La medida de lectura del contenedor no aplica a la nota centrada del pie:
   con 68ch queda alineada a la izquierda y parece descolgada. */
.lh-footer .lh-sec__inner > p {
	max-width: none;
}

/* En columnas angostas la línea del rótulo le come el ancho al texto y lo parte
   letra por letra. Dentro del footer el rótulo va sin línea. */
.lh-footer .is-style-lh-etiqueta::after {
	content: none;
}

.lh-footer .is-style-lh-etiqueta {
	display: block;
}

/* Los links del footer son una lista semántica, pero no se leen como lista. */
.wp-block-list.lh-footer-links {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.lh-footer-links a {
	color: var(--wp--preset--color--text);
	display: inline-block;
	min-height: 44px;
	padding-block: 0.6rem;
	text-decoration: none;
}

.wp-block-list.lh-footer-links a:hover,
.wp-block-list.lh-footer-links a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* =============================================================================
 * 7. Legibilidad
 * ========================================================================== */

/* theme.json fuerza Orbitron + mayúsculas en headings: con interletrado 0 se
   apelmaza en tamaños chicos. */
:where(h4, h5, h6) {
	letter-spacing: 0.04em;
}

/* Los títulos largos no se estiran a todo el ancho: se leen mejor cortados. */
.lh-hero h1,
.lh-cierre h2 {
	text-wrap: balance;
}

/* Las imágenes nunca desbordan ni deforman el layout. */
.wp-block-image img {
	height: auto;
	max-width: 100%;
}

/* =============================================================================
 * 8. Movimiento
 *
 * Todo con timelines de scroll nativos de CSS: cero JavaScript, cero librerías.
 *
 * REGLA DE SEGURIDAD: ningún efecto puede dejar contenido ilegible si el
 * timeline no corre. Por eso los reveals arrancan en opacity 0.55 y no en 0
 * —el texto se lee igual en el peor caso—, terminan apenas el bloque asoma, y
 * nunca se aplican al hero ni al header. Ya nos pasó una vez de dejar la
 * página entera en blanco por animar desde opacity 0 con fill-mode both.
 * ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* --- Barra de progreso de lectura ------------------------------------ */
	/* Vive en el borde inferior del header. No oculta nada: si el timeline no
	   corre, simplemente no se ve una barra. */
	@supports (animation-timeline: scroll()) {
		@keyframes lh-progreso {
			from {
				transform: scaleX(0);
			}

			to {
				transform: scaleX(1);
			}
		}

		header.wp-block-template-part::after {
			animation: lh-progreso linear;
			animation-timeline: scroll(root block);
			background: linear-gradient(
				90deg,
				var(--wp--preset--color--primary),
				var(--wp--preset--color--accent)
			);
			bottom: -1px;
			content: "";
			height: 2px;
			left: 0;
			position: absolute;
			transform-origin: 0 50%;
			width: 100%;
		}
	}

	/* --- Aparición de bloques al entrar en pantalla ----------------------- */
	@supports (animation-timeline: view()) {
		/* El desenfoque es lo que hace visible el movimiento: sobre fondo oscuro,
		   24px de desplazamiento y un cambio de opacidad de 0.55 a 1 no se
		   perciben. Con blur + recorrido largo el bloque se "arma" a la vista.
		   La opacidad de arranque no baja de 0.2: si el timeline no corriera, el
		   texto se sigue leyendo. */
		@keyframes lh-revela {
			from {
				filter: blur(4px);
				opacity: 0.25;
				transform: translateY(64px) scale(0.99);
			}

			to {
				filter: blur(0);
				opacity: 1;
				transform: none;
			}
		}

		/* Los bloques de contenido de cada sección, nunca la sección entera:
		   así el fondo y la numeración lateral no parpadean.
		 *
		 * El rango es la parte delicada. Con `entry 10% entry 90%` la animación
		 * termina mientras el bloque todavía está pegado al borde inferior de la
		 * pantalla: cuando el ojo llega, ya pasó, y se lee como que "sube todo
		 * junto y después queda fijo". Cerrando en `cover 30%` la animación
		 * ocurre mientras el bloque sube hacia la zona de lectura, que es donde
		 * el movimiento se ve. */
		.lh-sec:not(.lh-hero) .lh-sec__inner > *,
		.lh-sec:not(.lh-hero) .wp-block-columns > .wp-block-column {
			animation: lh-revela linear both;
			animation-range: entry 20% cover 22%;
			animation-timeline: view();
		}

		/* El escalonado se hace corriendo el ARRANQUE, nunca el final.
		 *
		 * Si se corre el final, las últimas columnas terminan de aparecer recién
		 * después de media pantalla: quien se detiene a leer antes se queda con
		 * el texto borroso, y el efecto decorativo pasa a tapar el contenido.
		 * Todas cierran antes de `cover 34%`, o sea bastante arriba, mucho antes
		 * de la zona de lectura. */
		.lh-sec .wp-block-columns > .wp-block-column:nth-child(2) {
			animation-range: entry 40% cover 26%;
		}

		.lh-sec .wp-block-columns > .wp-block-column:nth-child(3) {
			animation-range: entry 60% cover 30%;
		}

		.lh-sec .wp-block-columns > .wp-block-column:nth-child(4) {
			animation-range: entry 80% cover 34%;
		}

		/* Los títulos grandes llegan desde más abajo: son la entrada de cada
		   sección y se ven antes que el contenido. */
		.lh-sec:not(.lh-hero) .lh-titulo-mega {
			animation: lh-revela-titulo linear both;
			animation-range: entry 20% cover 40%;
			animation-timeline: view();
		}

		@keyframes lh-revela-titulo {
			from {
				filter: blur(10px);
				opacity: 0.15;
				transform: translateY(110px);
			}

			to {
				filter: blur(0);
				opacity: 1;
				transform: none;
			}
		}
	}

	/* --- Números de sección: se encienden al pasar ------------------------ */
	@supports (animation-timeline: view()) {
		@keyframes lh-enciende {
			from {
				color: var(--wp--preset--color--text-muted);
			}

			to {
				color: var(--wp--preset--color--primary);
			}
		}

		@media (min-width: 782px) {
			.lh-sec::after {
				animation: lh-enciende linear both;
				animation-range: cover 0% cover 30%;
				animation-timeline: view();
			}
		}
	}

	/* --- Título del hero: se aleja apenas al scrollear -------------------- */
	/* Parallax mínimo. Solo transform y opacidad parcial: el hero ya está
	   visible al cargar y nunca se oculta. */
	@supports (animation-timeline: view()) {
		@keyframes lh-aleja {
			to {
				opacity: 0.65;
				transform: translateY(-28px);
			}
		}

		.lh-hero__titulo,
		.lh-titulo-mega:first-of-type {
			animation: lh-aleja linear both;
			animation-range: exit 0% exit 100%;
			animation-timeline: view();
		}
	}
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes lh-entrada {
		from {
			opacity: 0;
			transform: translateY(14px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	/* Entrada escalonada del hero, al cargar. El resto de la página nunca
	   arranca oculta. */
	.lh-hero > * {
		animation: lh-entrada 520ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
	}

	.lh-hero > :nth-child(1) {
		animation-delay: 60ms;
	}

	.lh-hero > :nth-child(2) {
		animation-delay: 140ms;
	}

	.lh-hero > :nth-child(3) {
		animation-delay: 220ms;
	}

	.lh-hero > :nth-child(4) {
		animation-delay: 300ms;
	}

	.lh-hero > :nth-child(5) {
		animation-delay: 380ms;
	}
}

/* Respeta a quien pidió menos movimiento. El !important es el patrón canónico
   para esta media query: tiene que ganarle a cualquier animación declarada. */
@media (prefers-reduced-motion: reduce) {
	*,
	::before,
	::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}