/* La Imprenta (hijo) — correcciones y componentes propios. Tokens: spec §6. */
body {
	/* Paleta verde (D40): tinta verde en vez de negro y verdes en vez de azules */
	--li-tinta: var(--e-global-color-primary, #12402d);
	--li-texto: var(--e-global-color-text, #16161a);
	--li-gris: var(--e-global-color-secondary, #5f6863);
	--li-verde: var(--e-global-color-accent, #108244); /* marca: fondos, iconos, texto grande; texto normal solo sobre blanco */
	--li-papel: var(--e-global-color-papel, #f5f2ec);
	--li-gris-pie: var(--e-global-color-grispie, #b3c6ba);
	--li-linea: var(--e-global-color-linea, #e6e2d9);
	--li-verde-suave: var(--e-global-color-verdesuave, #e3f1e8);
	--li-blanco: var(--e-global-color-blanco, #fff);
	--li-verde-claro: var(--e-global-color-verdeclaro, #8edbae); /* acento sobre oscuro */
	--li-verde-oscuro: var(--e-global-color-verdeoscuro, #0b6535); /* texto verde y hover sobre claro */
	--li-gris-claro: var(--e-global-color-grisclaro, #edf0ee); /* cabecera y menú */
	--li-campo: var(--e-global-color-campo, #f7f5f0);
	--li-error: var(--e-global-color-error, #c62828);
	--li-tinta-2: var(--e-global-color-tinta2, #164a35);
	--li-tinta-3: var(--e-global-color-tinta3, #1d5640);
	--li-linea-osc: var(--e-global-color-lineaosc, #2d6650);
	/* Azules del main.css del padre, que sigue cargando (su ::selection pintaba de azul el texto seleccionado): a los
	   verdes (D40). Blanco sobre verde, 4,9:1 */
	--blue: var(--li-verde);
	--blue-600: var(--li-verde-oscuro);
	--blue-soft: var(--li-verde-suave);
}

/* Texto solo para lectores de pantalla */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Saltar al contenido */
.li-saltar {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100000;
	background: var(--li-tinta);
	color: #fff;
	padding: 12px 20px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}
.li-saltar:focus { top: 16px; }
/* Gana a «.elementor-kit-5 a» (verde oscuro, que no se lee sobre tinta); blanco sobre tinta 11,7:1 y anillo verde claro (D40) */
body a.li-saltar,
body a.li-saltar:hover,
body a.li-saltar:focus { color: var(--li-blanco); }
a.li-saltar:focus-visible { outline-color: var(--li-verde-claro) !important; }
#contenido:focus { outline: none; }

/* Foco visible (el padre lo elimina en formularios) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--li-verde-oscuro) !important;
	outline-offset: 2px !important;
}
/* Sobre fondo oscuro, anillo verde claro (7,2:1 sobre tinta; el verde de marca solo da 2,4:1, D40): contenedores de
   Elementor con fondo tinta (clase li-oscuro, tools/elementor/secciones.py) y cabeceras oscuras de los archivos */
.li-oscuro :focus-visible,
.li-archivo__hero :focus-visible { outline-color: var(--li-verde-claro) !important; }

/* Enlaces dentro de un texto: subrayados, no solo de color (WCAG 1.4.1): párrafos de Elementor, listas de iconos
   (r2-g4-02) y aviso del mapa */
.elementor .elementor-widget-text-editor p a:not(.li-boton),
.elementor-widget-icon-list .elementor-icon-list-text a,
.li-mapa__aviso a { text-decoration: underline; text-underline-offset: 3px; }

/* En móvil el botón flotante no tapa el elemento enfocado (WCAG 2.4.11): el navegador desplaza la página para que
   quede por encima (48 px del botón + 16 de margen + aire) */
@media (max-width: 767px) {
	html { scroll-padding-bottom: 88px; }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Pie de reserva del padre: gris-pie, 6,5:1 sobre tinta (D40) */
.li-footer h4,
.li-footer__bottom span,
.li-footer__bottom a { color: var(--li-gris-pie); }

/* [li_faq] */
/* [li_faq] (componentes.md «Acordeón FAQ»): <details> nativos con separadores de 1 px, pregunta con estilo H4
   (Hanken 600, 18 px), chevron SVG que gira al abrir y respuesta de hasta 760 px */
.li-faq { max-width: 880px; border-top: 1px solid var(--li-linea); }
.li-faq__item { border-bottom: 1px solid var(--li-linea); }
.li-faq__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 48px;
	padding: 16px 0;
	color: var(--li-texto);
	font-family: var(--e-global-typography-secondary-font-family, "Hanken Grotesk"), sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}
.li-faq__pregunta::-webkit-details-marker { display: none; }
.li-faq__pregunta:hover .li-faq__texto { color: var(--li-verde-oscuro); }
.li-faq__icono { flex: none; color: var(--li-verde); }
.li-faq__item[open] .li-faq__icono { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
	.li-faq__icono { transition: transform .2s ease; }
}
.li-faq__respuesta { max-width: 760px; padding-bottom: 16px; color: var(--li-gris); line-height: 1.65; }
.li-faq__respuesta > :first-child { margin-top: 0; }
.li-faq__respuesta > :last-child { margin-bottom: 0; }
.li-faq__respuesta a { text-decoration: underline; text-underline-offset: 3px; }

/* Tablas dentro de un texto (p. ej. «Formatos habituales» de las categorías): como [li_opciones] */
.li-prosa table { width: 100%; margin: 24px 0; border-collapse: separate; border-spacing: 0; background: var(--li-blanco); border: 1px solid var(--li-linea); border-radius: 18px; }
.li-prosa caption { padding-bottom: 12px; color: var(--li-texto); font-weight: 600; text-align: left; }
.li-prosa th,
.li-prosa td { padding: 12px 16px; border-bottom: 1px solid var(--li-linea); font-size: 15px; text-align: left; vertical-align: top; }
.li-prosa tbody tr:last-child > th,
.li-prosa tbody tr:last-child > td { border-bottom: 0; }
.li-prosa th { color: var(--li-texto); font-weight: 600; background: var(--li-campo); }
/* Esquinas en las celdas: con overflow: hidden en la tabla, el redondeo recortaba el título (r2-g2-01) */
.li-prosa thead tr:first-child > :first-child,
.li-prosa table:not(:has(thead)) tbody tr:first-child > :first-child { border-top-left-radius: 17px; }
.li-prosa thead tr:first-child > :last-child,
.li-prosa table:not(:has(thead)) tbody tr:first-child > :last-child { border-top-right-radius: 17px; }
.li-prosa tbody tr:last-child > :first-child { border-bottom-left-radius: 17px; }
.li-prosa tbody tr:last-child > :last-child { border-bottom-right-radius: 17px; }

/* Tablas anchas de los textos legales (lista de cookies): se desplazan dentro de su caja si no caben (móvil; WCAG 1.4.10
   lo admite en tablas). La región es enfocable para moverla con el teclado y lleva el nombre de su sección. */
.li-prosa .li-tabla { margin: 24px 0; overflow-x: auto; border-radius: 18px; }
.li-prosa .li-tabla > table { min-width: 560px; margin: 0; }
.li-prosa .li-tabla:focus-visible { outline: 2px solid var(--li-verde-oscuro); outline-offset: 3px; }

/* [li_opciones] */
.li-opciones { width: 100%; border-collapse: collapse; background: var(--li-blanco); border: 1px solid var(--li-linea); border-radius: 18px; overflow: hidden; }
.li-opciones th,
.li-opciones td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--li-linea); font-size: 15px; }
.li-opciones th { width: 34%; font-weight: 600; color: var(--li-texto); background: var(--li-campo); }
.li-opciones tr:last-child th,
.li-opciones tr:last-child td { border-bottom: 0; }
.li-opciones ul { margin: 0; padding-left: 18px; }
@media (max-width: 767px) {
	.li-opciones th,
	.li-opciones td { display: block; width: auto; }
	.li-opciones th { border-bottom: 0; padding-bottom: 4px; }
}

/* [li_ventajas] */
/* Componente «Banda de ventajas» (componentes.md), como en la portada (r2-g2-04): icono de 24 px en un círculo
   verde-suave de 48 px, 16 px hasta el título (estilo H4: Hanken 600, 18 px; sigue siendo h3) y 8 px hasta el texto;
   3 → 2 → 1 columnas, la última sola a lo ancho en tableta si queda impar (g2-12) */
.li-ventajas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.li-ventajas__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 999px;
	background: var(--li-verde-suave);
	color: var(--li-verde);
}
.li-ventajas__icono svg { display: block; width: 24px; height: 24px; }
.li-ventajas .li-ventajas__titulo { /* gana al H3 del kit */
	margin: 0 0 8px;
	font-family: var(--e-global-typography-secondary-font-family, "Hanken Grotesk"), sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
}
.li-ventajas .li-ventajas__texto { margin: 0; color: var(--li-gris); line-height: 1.6; }
@media (max-width: 1024px) {
	.li-ventajas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.li-ventajas__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.li-ventajas { grid-template-columns: minmax(0, 1fr); gap: 24px 16px; }
}

/* [li_mapa] */
.li-mapa { background: var(--li-blanco); border: 1px solid var(--li-linea); border-radius: 22px; padding: 24px; display: grid; gap: 16px; justify-items: start; }
.li-mapa__aviso { color: var(--li-gris); font-size: 14px; margin: 0; }
.li-mapa__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.li-mapa__boton { background: var(--li-verde); color: var(--li-blanco); border: 0; border-radius: 999px; padding: 12px 24px; min-height: 44px; font-weight: 600; line-height: 1; cursor: pointer; }
/* «Cómo llegar» dentro del panel: botón de contorno (D21.3) */
.li-mapa__acciones a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 15px 26px;
	border: 1px solid var(--li-gris);
	border-radius: 999px;
	color: var(--li-tinta);
	font-family: var(--e-global-typography-accent-font-family, "Hanken Grotesk"), sans-serif; /* tipografía Botón (r2-g6-02) */
	font-size: var(--e-global-typography-accent-font-size, 15px);
	font-weight: var(--e-global-typography-accent-font-weight, 600);
	line-height: 1;
	text-decoration: none;
}
.li-mapa__acciones a:hover { border-color: var(--li-tinta); color: var(--li-tinta); }
.li-mapa__iframe { width: 100%; height: 380px; border: 0; border-radius: 18px; }

/* [li_logo] */
.li-logo { display: inline-flex; max-width: 100%; line-height: 0; }
.li-logo__svg { width: var(--li-logo-ancho, 168px); max-width: 100%; height: auto; }
.li-logo--blanco { color: #fff; }
.li-logo--verde { color: var(--li-verde); } /* cabecera (D40): verde corporativo */
.li-logo--tinta { color: var(--li-tinta); }
.li-logo__enlace { display: inline-flex; align-items: center; min-height: 44px; }

/* ── Plantillas PHP (D22): contenedor, secciones, rejilla, tarjeta y migas ── */
.li-contenedor {
	box-sizing: border-box;
	max-width: calc(1240px + 48px);
	margin-inline: auto;
	padding-inline: 24px;
}
.li-seccion { padding-block: 110px; }
.li-seccion--compacta { padding-block: 72px; }
.li-seccion--papel { background: var(--li-papel); }
.li-seccion__titulo { margin: 0 0 48px; max-width: 680px; }
.li-antetitulo {
	margin: 0 0 16px;
	color: var(--li-verde-oscuro);
	font-family: var(--e-global-typography-eyebrow-font-family, "Hanken Grotesk"), sans-serif;
	font-size: var(--e-global-typography-eyebrow-font-size, 12px);
	font-weight: var(--e-global-typography-eyebrow-font-weight, 700);
	letter-spacing: var(--e-global-typography-eyebrow-letter-spacing, .22em);
	line-height: var(--e-global-typography-eyebrow-line-height, 1.2);
	text-transform: uppercase;
}

/* Rejilla: 4 → 2 → 1 columnas; hueco 24 px (16 en móvil) */
.li-rejilla {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.li-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.li-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.li-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.li-rejilla > li { margin: 0; padding: 0; }

/* Tarjeta clara «imagen + título + flecha»: un único enlace; el foco rodea toda la tarjeta */
.li-tarjeta { height: 100%; }
.li-tarjeta .li-tarjeta__enlace {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--li-blanco);
	border: 1px solid var(--li-linea);
	border-radius: 18px;
	color: var(--li-tinta);
	text-decoration: none;
}
.li-tarjeta__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--li-papel);
}
/* .li-tarjeta delante: gana a «.elementor img { height: auto }» cuando la tarjeta va dentro de un widget de
   Elementor (portada); sin ello la foto no llenaba el marco 4:3 (Tarea 7.1, g1-01) */
.li-tarjeta .li-tarjeta__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.li-tarjeta__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}
.li-tarjeta .li-tarjeta__titulo {
	margin: 0;
	color: var(--li-tinta);
	font-family: var(--e-global-typography-primary-font-family, "Fraunces"), serif;
	font-size: 24px;
	font-weight: var(--e-global-typography-primary-font-weight, 500);
	letter-spacing: 0;
	line-height: 1.2;
	overflow-wrap: anywhere;
}
.li-tarjeta__texto {
	color: var(--li-gris);
	font-size: var(--e-global-typography-pequeno-font-size, 14px);
	line-height: var(--e-global-typography-pequeno-line-height, 1.5);
}
.li-tarjeta__flecha {
	display: block;
	width: 20px;
	height: 20px;
	margin-top: auto;
	color: var(--li-verde);
}
.li-tarjeta .li-tarjeta__enlace:hover { color: var(--li-tinta); }
.li-tarjeta__enlace:hover .li-tarjeta__titulo {
	text-decoration: underline;
	text-underline-offset: 4px;
}
@media (prefers-reduced-motion: no-preference) {
	.li-tarjeta__img,
	.li-tarjeta__flecha { transition: transform .3s ease; }
	.li-tarjeta__enlace:hover .li-tarjeta__img { transform: scale(1.05); }
	.li-tarjeta__enlace:hover .li-tarjeta__flecha { transform: translateX(4px); }
}

/* Migas de pan: Pequeño; separador dibujado (sin texto que lea el lector de pantalla) */
.li-migas {
	color: var(--li-gris);
	font-family: var(--e-global-typography-pequeno-font-family, "Hanken Grotesk"), sans-serif;
	font-size: var(--e-global-typography-pequeno-font-size, 14px);
	line-height: var(--e-global-typography-pequeno-line-height, 1.5);
}
.li-migas ol {
	display: flex;
	flex-wrap: wrap;
	row-gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.li-migas li { display: inline-flex; align-items: center; }
.li-migas li + li::before {
	content: "";
	width: 6px;
	height: 6px;
	margin-inline: 8px 12px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.li-migas a { color: var(--li-gris); text-decoration: none; }
.li-migas a:hover { color: var(--li-texto); text-decoration: underline; }
.li-migas__actual { color: var(--li-texto); }

@media (max-width: 1024px) {
	.li-seccion { padding-block: 80px; }
	.li-seccion--compacta { padding-block: 56px; }
	.li-rejilla,
	.li-rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.li-seccion { padding-block: 64px; }
	.li-seccion--compacta { padding-block: 48px; }
	.li-rejilla,
	.li-rejilla--3,
	.li-rejilla--2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ── Botones (componentes.md: primario, contorno, claro; D21) ──
   Los globales del kit pintan todo «button» y todo «a» (.elementor-kit-5 button|a, 0,1,1, y :hover/:focus,
   0,2,1): las reglas de los componentes llevan ámbito o doble clase para ganarles. */
a.li-boton,
button.li-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 15px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--e-global-typography-accent-font-family, "Hanken Grotesk"), sans-serif;
	font-size: var(--e-global-typography-accent-font-size, 15px);
	font-weight: var(--e-global-typography-accent-font-weight, 600);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
.li-boton.li-boton--primario,
.li-boton.li-boton--primario:focus { background: var(--li-verde); color: var(--li-blanco); }
.li-boton.li-boton--primario:hover { background: var(--li-verde-oscuro); color: var(--li-blanco); }
.li-boton.li-boton--contorno,
.li-boton.li-boton--contorno:focus { background: transparent; border-color: var(--li-gris); color: var(--li-tinta); }
.li-boton.li-boton--contorno:hover { background: transparent; border-color: var(--li-tinta); color: var(--li-tinta); }
.li-boton.li-boton--claro,
.li-boton.li-boton--claro:focus { background: var(--li-tinta-3); border-color: var(--li-gris-pie); color: var(--li-blanco); }
.li-boton.li-boton--claro:hover { background: var(--li-linea-osc); color: var(--li-blanco); }
@media (prefers-reduced-motion: no-preference) {
	.li-boton { transition: background-color .2s, border-color .2s, color .2s, transform .2s; }
	.li-boton:hover { transform: translateY(-2px); }
}

/* ── Cabecera (D22): barra superior, barra principal fija y mega menú con panel redondeado (D32); barra y paneles en gris claro (D40) ── */
html { scroll-padding-top: 108px; } /* anclas y foco no quedan bajo la barra fija */
.li-cabecera {
	--li-logo-ancho: 198px; /* D35: logo puro (654,875 × 159,125) a 48 px de alto, como «Pide presupuesto» */
	--li-barra-alto: 88px;
	position: sticky;
	top: -40px; /* la barra superior se va con el scroll; la principal queda fija */
	z-index: 100;
}
.admin-bar .li-cabecera { top: -8px; }
.li-barra {
	height: 40px;
	overflow: hidden;
	background: var(--li-tinta-2);
	color: var(--li-gris-pie);
	font-size: var(--e-global-typography-pequeno-font-size, 14px);
	line-height: 1.5;
}
.li-barra__dentro {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 100%;
	white-space: nowrap;
}
.li-barra a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--li-blanco);
	text-decoration: none;
}
.li-barra a:hover { color: var(--li-blanco); text-decoration: underline; }
.li-barra .li-barra__archivo,
.li-barra .li-barra__archivo:hover { color: var(--li-verde-claro); font-weight: 600; }
.li-barra__enlaces {
	display: flex;
	gap: 24px;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}
/* Selector de idioma (D43): el último de la barra, con el nombre del otro idioma en su lengua y un globo decorativo;
   en móvil, su código («EN»), con el nombre completo para los lectores de pantalla. */
.li-barra .li-barra__idioma { gap: 6px; font-weight: 600; }
.li-barra__idioma svg { flex: none; }
.li-barra__idioma-codigo { display: none; }
.li-cabecera__principal {
	position: relative; /* referencia de los paneles */
	background: var(--li-gris-claro);
	color: var(--li-texto);
}
.li-cabecera__dentro {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--li-barra-alto);
}
/* El logo cede espacio antes que el menú o el botón (nunca desborda la barra) */
.li-cabecera .li-logo__enlace { flex: 0 1 var(--li-logo-ancho); min-width: 0; }
.li-cabecera .li-logo { width: 100%; }
.li-cabecera__cta { flex: none; }

/* Menú: escritorio. Cada panel es una tarjeta redondeada bajo la barra (D32, como el menú del tema padre), gris claro (D40):
   con borde, no se confunde con las secciones blancas ni papel; listas compactas en columnas que no se estiran a todo el ancho */
.li-menu { flex: 1; }
.li-menu .li-menu__abrir { display: none; }
.li-menu__lista {
	display: flex;
	justify-content: center;
	gap: 2px; /* D41: siete entradas */
	margin: 0;
	padding: 0;
	list-style: none;
}
.li-menu .li-menu__boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 10px; /* D41: siete entradas desde 1280 px */
	background: none;
	border: 0;
	border-radius: 999px;
	color: var(--li-texto);
	font-family: var(--e-global-typography-secondary-font-family, "Hanken Grotesk"), sans-serif;
	font-size: 15px;
	font-weight: var(--e-global-typography-secondary-font-weight, 600);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}
.li-menu__boton::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.li-menu__boton[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.li-menu .li-menu__boton:focus { background: none; color: var(--li-texto); }
/* Encima o abierto: píldora blanca con el texto en verde oscuro (7,2:1) */
.li-menu .li-menu__boton:hover,
.li-menu .li-menu__boton[aria-expanded="true"] { background: var(--li-blanco); color: var(--li-verde-oscuro); }
/* El panel ocupa lo que su contenido, centrado bajo la barra; los 8 px de separación son suyos (relleno), así el
   ratón no sale del elemento al bajar del botón a la tarjeta (menu.js lo cerraría) */
.li-menu__panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	width: fit-content;
	max-width: calc(100% - 48px);
	margin-inline: auto;
	padding-top: 8px;
}
.li-menu__panel[hidden] { display: none; }
.li-menu__panel .li-menu__columnas {
	display: flex;
	gap: 32px;
	max-width: none;
	max-height: calc(100vh - var(--li-barra-alto) - 80px);
	overflow-y: auto;
	padding: 32px;
	background: var(--li-gris-claro);
	border: 1px solid var(--li-linea);
	border-radius: 22px;
	color: var(--li-texto);
}
@media (prefers-reduced-motion: no-preference) {
	.li-menu__panel:not([hidden]) .li-menu__columnas { animation: li-menu-entrar .16s ease-out; }
}
@keyframes li-menu-entrar {
	from { opacity: 0; transform: translateY(-4px); }
}
/* Familias en dos columnas que se llenan de arriba abajo (sin filas alineadas que dejen huecos) */
.li-menu__familias {
	flex: none;
	width: max-content;
	max-width: 472px;
	columns: 2;
	column-gap: 32px;
}
.li-menu__familia { break-inside: avoid; padding-bottom: 12px; }
.li-menu__grupo { flex: none; min-width: 200px; }
/* Imagen representativa del panel (D25): cambia al pasar por cada enlace (menu.js) */
.li-menu__visual {
	flex: none;
	align-self: flex-start;
	width: 240px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
	background: var(--li-blanco);
}
.li-menu__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.li-menu__descubre {
	flex: none;
	box-sizing: border-box;
	width: 200px;
	padding-left: 32px;
	border-left: 1px solid var(--li-linea);
}
/* Eyebrow: verde oscuro (6,2:1 sobre gris claro) */
.li-menu__titulo {
	margin: 0 0 8px;
	color: var(--li-verde-oscuro);
	font-size: var(--e-global-typography-eyebrow-font-size, 12px);
	font-weight: var(--e-global-typography-eyebrow-font-weight, 700);
	letter-spacing: var(--e-global-typography-eyebrow-letter-spacing, .22em);
	line-height: 1.2;
	text-transform: uppercase;
}
.li-menu__variantes,
.li-menu__enlaces {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.li-menu__enlaces { gap: 4px; }
/* Enlaces como elementos flex: sin la caja de línea del bloque, que sumaba ~4 px a cada fila */
.li-menu__familia,
.li-menu__variantes li,
.li-menu__enlaces li { display: flex; flex-direction: column; align-items: flex-start; }
/* Enlaces de 24 px de alto (WCAG 2.5.8) con píldora al pasar por encima; el texto queda alineado con la columna */
.li-menu .li-menu__familia-enlace,
.li-menu__variantes a,
.li-menu__enlaces a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	margin-inline: -10px;
	padding: 2px 10px;
	border-radius: 999px;
	color: var(--li-texto);
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
}
.li-menu .li-menu__familia-enlace { font-weight: 600; }
.li-menu__variantes a { color: var(--li-gris); font-size: 14px; } /* 5,0:1 sobre gris claro */
.li-menu__panel a:hover { background: var(--li-blanco); color: var(--li-verde-oscuro); text-decoration: none; }
.li-menu__panel a[aria-current="page"] { color: var(--li-verde-oscuro); text-decoration: underline; text-underline-offset: 3px; }
/* Merchandising (D41): entrada destacada. Píldora verde suave con borde verde y el texto en verde oscuro (6,2:1);
   encima o abierta, el verde de marca con el texto blanco (4,9:1). El borde es una línea interior, sin desenfoque */
.li-menu .li-menu__item--destacado .li-menu__boton,
.li-menu .li-menu__item--destacado .li-menu__boton:focus { background: var(--li-verde-suave); box-shadow: inset 0 0 0 1px var(--li-verde); color: var(--li-verde-oscuro); }
.li-menu .li-menu__item--destacado .li-menu__boton:hover,
.li-menu .li-menu__item--destacado .li-menu__boton[aria-expanded="true"] { background: var(--li-verde); box-shadow: none; color: var(--li-blanco); }
/* Su panel: la tarjeta de descarga del catálogo (inc/descargas.php) */
.li-menu__descarga { flex: none; width: 420px; }

/* Foco: verde oscuro en la barra y los paneles claros; verde claro en la barra superior, oscura (componentes.md) */
.li-cabecera :focus-visible { outline-color: var(--li-verde-oscuro) !important; }
.li-cabecera .li-barra :focus-visible { outline-color: var(--li-verde-claro) !important; }

/* Menú plegado hasta 1279 px (D27, D41: con Merchandising, el menú de escritorio, el logo y el botón necesitan ≈ 1230 px):
   tarjeta gris claro redondeada con acordeón (D40), alineada a la derecha bajo la barra (D32); «Pide presupuesto» fuera */
@media (max-width: 1279px) {
	.li-cabecera__dentro { gap: 12px; }
	.li-cabecera .li-logo__enlace { margin-right: auto; }
	.li-menu { flex: none; }
	.li-menu .li-menu__abrir {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-width: 44px;
		min-height: 44px;
		padding: 0 16px;
		background: none;
		border: 1px solid var(--li-gris);
		border-radius: 999px;
		color: var(--li-texto);
		font-family: var(--e-global-typography-secondary-font-family, "Hanken Grotesk"), sans-serif;
		font-size: 15px;
		font-weight: 600;
		line-height: 1;
		cursor: pointer;
	}
	.li-menu__abrir::before {
		content: "";
		width: 18px;
		height: 2px;
		background: currentColor;
		box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
	}
	.li-menu .li-menu__abrir:hover,
	.li-menu .li-menu__abrir:focus { background: none; color: var(--li-texto); }
	.li-menu .li-menu__abrir[aria-expanded="true"] { background: none; border-color: var(--li-verde-oscuro); color: var(--li-verde-oscuro); }
	.li-menu__lista {
		display: none;
		position: absolute;
		top: calc(100% + 8px);
		right: 16px;
		width: min(400px, calc(100% - 32px));
		max-height: calc(100vh - var(--li-barra-alto) - 80px);
		overflow-y: auto;
		padding: 8px 0;
		background: var(--li-gris-claro);
		border: 1px solid var(--li-linea);
		border-radius: 22px;
	}
	.li-menu--abierto .li-menu__lista { display: block; }
	.li-menu__item + .li-menu__item { border-top: 1px solid var(--li-linea); }
	.li-menu .li-menu__boton {
		justify-content: space-between;
		width: 100%;
		min-height: 48px;
		padding: 0 24px;
		border-radius: 0;
		color: var(--li-texto);
		font-size: 16px;
	}
	.li-menu .li-menu__boton:focus { color: var(--li-texto); }
	.li-menu .li-menu__boton:hover,
	.li-menu .li-menu__boton[aria-expanded="true"] { background: none; color: var(--li-verde-oscuro); }
	.li-menu__panel {
		position: static;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
	}
	.li-menu__panel .li-menu__columnas {
		flex-direction: column;
		gap: 16px;
		max-height: none;
		overflow: visible;
		padding: 0 24px 16px;
		background: none;
		border: 0;
		border-radius: 0;
		animation: none;
	}
	.li-menu__familias { width: auto; columns: auto; }
	.li-menu__familia { padding-bottom: 0; }
	.li-menu__enlaces { gap: 0; }
	/* Filas de 32 px: cómodas al tacto y juntas (D32) */
	.li-menu .li-menu__familia-enlace,
	.li-menu__variantes a,
	.li-menu__enlaces a { min-height: 32px; }
	.li-menu__descubre { width: auto; padding-left: 0; border-left: 0; }
	.li-menu__visual { display: none; }
	.li-menu__lista :focus-visible { outline-offset: -3px !important; } /* la lista recorta lo que sale */
	/* Merchandising: fila verde suave a lo ancho, también encima o abierta */
	.li-menu .li-menu__item--destacado .li-menu__boton,
	.li-menu .li-menu__item--destacado .li-menu__boton:focus,
	.li-menu .li-menu__item--destacado .li-menu__boton:hover,
	.li-menu .li-menu__item--destacado .li-menu__boton[aria-expanded="true"] { background: var(--li-verde-suave); box-shadow: none; color: var(--li-verde-oscuro); }
	.li-menu__descarga { width: auto; }
}
@media (max-width: 1024px) {
	.li-barra__dato + .li-barra__dato { display: none; } /* horario: también en el pie */
}
@media (max-width: 782px) {
	.admin-bar .li-cabecera { top: 6px; }
}
@media (max-width: 767px) {
	.li-cabecera { --li-logo-ancho: 148px; --li-barra-alto: 64px; } /* logo hasta 36 px de alto; si no cabe, menos */
	.li-cabecera__dentro { gap: 8px; }
	.li-barra__enlaces { display: none; } /* páginas: también en el pie */
	.li-barra .li-barra__idioma { margin-left: auto; } /* sin las páginas, el selector se queda a la derecha */
	.li-menu .li-menu__abrir { gap: 0; width: 44px; padding: 0; font-size: 0; } /* solo icono; el nombre accesible sigue siendo «Menú» */
	.li-cabecera .li-cabecera__cta { padding: 10px 16px; font-size: 14px; }
}
@media (max-width: 479px) {
	/* Selector de idioma: «EN» a la vista y «English» para los lectores de pantalla (el nombre contiene lo visible). */
	.li-barra__idioma-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; }
	.li-barra__idioma-codigo { display: inline; }
}
@media (max-width: 600px) {
	.admin-bar .li-cabecera { top: -40px; }
}

/* ── Pie (spec §4.4, componentes.md): fondo tinta; 4 columnas → 2 → 1; títulos h2 con estilo Eyebrow ── */
.li-pie {
	background: var(--li-tinta);
	border-top: 1px solid var(--li-linea-osc); /* separa la banda CTA (también tinta) */
	color: var(--li-gris-pie);
	font-size: 15px;
	line-height: 1.6;
}
.li-pie__columnas {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
	padding-block: 72px 48px;
}
.li-pie__marca { --li-logo-ancho: 264px; }
.li-pie__frase { max-width: 320px; margin: 16px 0 0; }
.li-pie__datos,
.li-pie__enlaces,
.li-pie__legales {
	margin: 0;
	padding: 0;
	list-style: none;
}
.li-pie__datos { display: grid; gap: 8px; margin-top: 24px; }
.li-pie__enlaces { display: grid; gap: 12px; }
.li-pie .li-pie__titulo { /* gana al h2 del kit (.elementor-kit-5 h2: Fraunces 56 px en tinta) */
	margin: 0 0 16px;
	color: var(--li-gris-pie);
	font-family: var(--e-global-typography-eyebrow-font-family, "Hanken Grotesk"), sans-serif;
	font-size: var(--e-global-typography-eyebrow-font-size, 12px);
	font-weight: var(--e-global-typography-eyebrow-font-weight, 700);
	letter-spacing: var(--e-global-typography-eyebrow-letter-spacing, .22em);
	line-height: 1.2;
	text-transform: uppercase;
}
.li-pie a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--li-blanco);
	text-decoration: none;
}
.li-pie a:hover { color: var(--li-blanco); text-decoration: underline; }
.li-pie__inferior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	padding-block: 24px;
	border-top: 1px solid var(--li-linea-osc);
	font-size: var(--e-global-typography-pequeno-font-size, 14px);
}
.li-pie__copy { margin: 0; }
.li-pie__legales { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.li-pie .li-pie__legales a { color: var(--li-gris-pie); }
.li-pie .li-pie__legales a:hover { color: var(--li-blanco); }
.li-pie :focus-visible { outline-color: var(--li-verde-claro) !important; }
/* Página actual (aria-current): marca que no es solo de color */
.li-barra [aria-current="page"],
.li-pie [aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

/* ── Botón flotante: WhatsApp en todas las pantallas; «Pide presupuesto» solo en móvil ── */
a.li-flotante {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	border-radius: 999px;
	color: var(--li-blanco);
	font-family: var(--e-global-typography-accent-font-family, "Hanken Grotesk"), sans-serif;
	font-size: var(--e-global-typography-accent-font-size, 15px);
	font-weight: var(--e-global-typography-accent-font-weight, 600);
	line-height: 1;
	text-decoration: none;
}
a.li-flotante:hover { color: var(--li-blanco); }
a.li-flotante--whatsapp { width: 56px; height: 56px; background: var(--e-global-color-exito, #1b7f3b); }
a.li-flotante--presupuesto { display: none; padding: 0 22px; background: var(--li-verde); }
a.li-flotante--presupuesto:hover { background: var(--li-verde-oscuro); }
/* D37: en espera (oculto y fuera del orden de tabulación) en la primera pantalla, donde ya están los botones del hero
   y el «Pide presupuesto» de la barra fija; flotante.js lo muestra al dejarla atrás. Sin JavaScript, siempre visible. */
a.li-flotante.li-flotante--espera { visibility: hidden; opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: no-preference) {
	a.li-flotante { transition: opacity .2s, transform .2s, visibility 0s; }
	a.li-flotante.li-flotante--espera { transition: opacity .2s, transform .2s, visibility 0s .2s; }
}

@media (max-width: 1024px) {
	.li-pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding-block: 64px 40px; }
}
@media (max-width: 767px) {
	.li-pie__columnas { grid-template-columns: minmax(0, 1fr); }
	.li-pie__inferior { padding-bottom: 96px; } /* el botón flotante no tapa la última línea */
	a.li-flotante--presupuesto { display: inline-flex; }
}

/* ── Ficha de producto (spec §4.7, D22) ── */
.li-ficha__hero {
	padding-block: 32px 80px;
	background: var(--li-papel);
}
.li-ficha__hero .li-migas { margin-bottom: 48px; }
.li-ficha__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	gap: 48px;
	align-items: center;
}
.li-ficha__rejilla--sin-imagen { grid-template-columns: minmax(0, 1fr); }
.li-ficha__texto {
	display: grid;
	gap: 16px;
	justify-items: start;
	max-width: 680px;
}
.li-ficha__texto > * { margin: 0; }
.li-ficha__texto .li-antetitulo { margin: 0; }
.li-ficha .li-ficha__titulo,
.li-ficha__texto .li-ficha__titulo { overflow-wrap: break-word; hyphens: auto; }
.li-campo--subtitulo {
	color: var(--li-verde-oscuro);
	font-family: var(--e-global-typography-primary-font-family, "Fraunces"), serif;
	font-size: 24px;
	font-style: italic;
	line-height: 1.3;
}
.li-ficha__intro {
	color: var(--li-texto);
	font-size: var(--e-global-typography-entradilla-font-size, 18px);
	line-height: var(--e-global-typography-entradilla-line-height, 1.65);
}
.li-ficha__contenido { color: var(--li-texto); }
.li-ficha__contenido > * { margin: 0 0 12px; }
.li-ficha__contenido > :last-child { margin-bottom: 0; }
.li-ficha__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.li-ficha__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 20px;
}
.li-ficha__secciones > .li-seccion:nth-child(odd) { background: var(--li-blanco); }
.li-ficha__guia { margin: 24px 0 0; }

/* [li_lista]: chips no interactivos (componentes.md) */
.li-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.li-chips li {
	padding: 6px 12px;
	background: var(--li-blanco);
	border: 1px solid var(--li-linea);
	border-radius: 999px;
	color: var(--li-texto);
	font-size: var(--e-global-typography-pequeno-font-size, 14px);
	line-height: 1.4;
}

/* [li_plantilla] */
a.li-plantilla {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--li-verde-oscuro);
	font-weight: 600;
}
.li-plantilla__meta { color: var(--li-gris); font-weight: 400; }

/* [li_descarga] (inc/descargas.php, D41): tarjeta blanca con portada opcional y decorativa, título, tipo y tamaño y
   botón; sin el PDF, su marcador. En el panel del menú, sobre gris claro, ocupa su columna */
.li-descarga { display: flex; align-items: center; gap: 24px; box-sizing: border-box; width: 100%; max-width: 680px; padding: 24px; background: var(--li-blanco); border: 1px solid var(--li-linea); border-radius: 18px; }
.li-descarga .li-descarga__portada { flex: 0 0 auto; width: 120px; height: auto; border: 1px solid var(--li-linea); border-radius: 12px; } /* doble clase: gana a .elementor img */
.li-descarga__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.li-descarga p { margin: 0; }
.li-descarga__titulo { color: var(--li-tinta); font-family: var(--e-global-typography-primary-font-family, "Fraunces"), serif; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.li-descarga__meta { color: var(--li-gris); font-size: var(--e-global-typography-pequeno-font-size, 14px); line-height: 1.5; }
.li-descarga .li-descarga__boton { margin-top: 8px; }
.li-descarga__pendiente { color: var(--li-texto); font-size: var(--e-global-typography-pequeno-font-size, 14px); line-height: 1.5; }
.li-menu__descarga .li-descarga { max-width: none; }
.li-menu__descarga .li-descarga .li-descarga__portada { width: 80px; } /* en el menú, miniatura */
/* Grande (página de la descarga): la portada protagonista junto al texto */
.li-descarga--grande { max-width: 880px; gap: 32px; padding: 32px; }
.li-descarga.li-descarga--grande .li-descarga__portada { width: 320px; }
@media (max-width: 1024px) {
	.li-descarga__titulo { font-size: 23px; } /* H3 en tableta (D21) */
	.li-descarga.li-descarga--grande .li-descarga__portada { width: 240px; }
}
@media (max-width: 767px) {
	.li-descarga { flex-direction: column; align-items: flex-start; gap: 16px; }
	.li-descarga .li-descarga__portada { width: 96px; }
	.li-descarga__titulo { font-size: 22px; }
	.li-descarga--grande { padding: 24px; }
	.li-descarga.li-descarga--grande .li-descarga__portada { width: 100%; max-width: 360px; }
}

/* Galería del producto */
.li-galeria {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.li-galeria img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
}

@media (max-width: 1024px) {
	.li-ficha__hero { padding-block: 24px 64px; }
	.li-ficha__rejilla { gap: 32px; }
	.li-ficha__rejilla:not(.li-ficha__rejilla--sin-imagen) { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); } /* dos columnas en tableta; sin imagen, una (r2-g6-01) */
	.li-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.li-ficha__rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.li-ficha__hero { padding-block: 16px 48px; }
	.li-ficha__hero .li-migas { margin-bottom: 24px; }
	.li-campo--subtitulo { font-size: 20px; }
}

/* ── Archivos: catálogo, categoría y sector (spec §4.8, D22) ── */
.li-archivo__hero {
	padding-block: 32px 80px;
	background: var(--li-tinta);
	color: var(--li-gris-pie);
}
.li-archivo__hero a:not(.li-boton) { color: var(--li-verde-claro); }
.li-archivo__hero .li-migas { margin-bottom: 48px; color: var(--li-gris-pie); }
.li-archivo__hero .li-migas a { color: var(--li-gris-pie); } /* 6,5:1; como las migas sobre claro (gris), no verde-claro (g6-09) */
.li-archivo__hero .li-migas a:hover,
.li-archivo__hero .li-migas__actual { color: var(--li-blanco); }
.li-archivo__hero .li-antetitulo { color: var(--li-verde-claro); }
.li-archivo__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	gap: 48px;
	align-items: center;
}
.li-archivo__rejilla--sin-imagen { grid-template-columns: minmax(0, 1fr); }
.li-archivo__texto {
	display: grid;
	gap: 16px;
	justify-items: start;
	max-width: 760px;
}
.li-archivo__texto > * { margin: 0; }
.li-archivo__hero .li-archivo__titulo {
	margin: 0;
	color: var(--li-blanco);
	overflow-wrap: break-word;
	hyphens: auto;
}
.li-archivo__hero .li-campo {
	color: var(--li-gris-pie);
	font-size: var(--e-global-typography-entradilla-font-size, 18px);
	line-height: var(--e-global-typography-entradilla-line-height, 1.65);
}
.li-archivo__hero .li-campo > * { margin: 0 0 12px; }
.li-archivo__hero .li-campo > :last-child { margin-bottom: 0; }
.li-archivo__botones { margin-top: 8px; }
.li-archivo__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 20px;
}
.li-archivo__secciones > .li-seccion:nth-child(even) { background: var(--li-blanco); }
.li-seccion__mas { margin: 32px 0 0; font-weight: 600; }
.li-prosa > * { max-width: 760px; margin: 0 0 16px; } /* alineada con el H1, no centrada */
.li-prosa > :last-child { margin-bottom: 0; }

/* Enlaces en forma de chip (franja «Por sectores») */
.li-enlaces-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.li-enlaces-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	background: var(--li-blanco);
	border: 1px solid var(--li-linea);
	border-radius: 999px;
	color: var(--li-texto);
	font-weight: 600;
	text-decoration: none;
}
.li-enlaces-chips a:hover { border-color: var(--li-verde-oscuro); color: var(--li-verde-oscuro); }

/* Paginación de los archivos */
.li-seccion .pagination { margin-top: 32px; }
.li-seccion .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.li-seccion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--li-linea);
	border-radius: 999px;
}
.li-seccion .page-numbers.current { background: var(--li-tinta); border-color: var(--li-tinta); color: var(--li-blanco); }

@media (max-width: 1024px) {
	.li-archivo__hero { padding-block: 24px 64px; }
	.li-archivo__rejilla { gap: 32px; }
	.li-archivo__rejilla:not(.li-archivo__rejilla--sin-imagen) { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); } /* dos columnas en tableta; sin imagen, una (r2-g6-01) */
}
@media (max-width: 767px) {
	.li-archivo__rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.li-archivo__hero { padding-block: 16px 48px; }
	.li-archivo__hero .li-migas { margin-bottom: 24px; }
}

/* ── Páginas sin Elementor (legales), 404 y búsqueda (D22) ── */
.li-pagina__hero {
	padding-block: 32px 48px;
	background: var(--li-papel);
}
.li-pagina__hero .li-migas { margin-bottom: 24px; }
.li-pagina__hero .li-pagina__titulo { margin: 0; overflow-wrap: break-word; hyphens: auto; }
.li-pagina__cuerpo {
	padding-block: 72px 110px;
	background: var(--li-blanco);
}
.li-prosa h2 { margin: 48px 0 16px; font-size: 34px; line-height: 1.15; }
.li-prosa h3 { margin: 32px 0 12px; font-size: 22px; line-height: 1.2; }
.li-prosa > :first-child { margin-top: 0; } /* del héroe al primer bloque, solo el relleno del cuerpo (g6-08) */
.li-prosa a:not(.li-boton) { text-decoration: underline; text-underline-offset: 3px; }
.li-prosa ul,
.li-prosa ol { padding-left: 24px; }
.li-vacio { margin: 0; color: var(--li-gris); font-size: var(--e-global-typography-entradilla-font-size, 18px); }
/* Páginas entre los resultados de búsqueda: lista con título enlazado y descripción, sin tarjetas vacías (r2-g1-02) */
.li-resultados { display: grid; gap: 24px; max-width: 760px; margin: 0 0 48px; padding: 0; list-style: none; }
.li-resultados .li-resultados__titulo { margin: 0 0 8px; } /* tamaño H3 del kit */
.li-resultados__titulo a { color: var(--li-texto); text-decoration: underline; text-decoration-color: var(--li-linea); text-underline-offset: 4px; }
.li-resultados__titulo a:hover { color: var(--li-verde-oscuro); text-decoration-color: currentColor; }
.li-resultados__texto { margin: 0; color: var(--li-gris); }
h2.li-busqueda__total { /* H2 con aspecto de texto (gana al h2 del kit) */
	margin: 0 0 24px;
	color: var(--li-gris);
	font-family: var(--e-global-typography-text-font-family, "Hanken Grotesk"), sans-serif;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
}
.li-pagina__cuerpo .li-buscador { margin-bottom: 48px; }
.li-pagina__cuerpo .li-enlaces-chips { margin-bottom: 8px; }

/* Buscador (searchform.php) */
.li-buscador {
	display: grid;
	gap: 8px;
	max-width: 560px;
	margin-top: 0; /* el relleno del cuerpo ya separa del héroe (g1-10) */
}
.li-enlaces-chips + .li-buscador { margin-top: 48px; } /* 404 */
.li-vacio + .li-enlaces-chips { margin-top: 16px; } /* el anillo de foco no toca el mensaje (r2-g1-03) */
.li-buscador .li-buscador__etiqueta { color: var(--li-texto); font-size: 15px; font-weight: 600; } /* gana a la etiqueta del kit */
.li-buscador__fila { display: flex; gap: 8px; }
.li-buscador input[type="search"] { flex: 1; min-width: 0; min-height: 48px; } /* aspecto: campo global del kit */

/* ── Inspiración (D9): rejilla 4:5, filtro por tipo y «Pide algo parecido» ── */
.li-archivo__hero .li-archivo__nota { margin: 0; color: var(--li-gris-pie); font-size: var(--e-global-typography-pequeno-font-size, 14px); }
.li-nota { margin: 0; color: var(--li-gris); font-size: var(--e-global-typography-pequeno-font-size, 14px); }
.li-filtro { margin-bottom: 32px; }
.li-enlaces-chips a[aria-current="page"] { background: var(--li-tinta); border-color: var(--li-tinta); color: var(--li-blanco); }
.li-rejilla--retrato > li { display: flex; flex-direction: column; gap: 8px; }
.li-rejilla--retrato .li-tarjeta { flex: 1; height: auto; }
.li-rejilla--retrato .li-tarjeta__media { aspect-ratio: 4 / 5; }
a.li-tarjeta__accion {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	font-weight: 600;
}
.li-ficha__hero--retrato .li-ficha__media img { aspect-ratio: 4 / 5; }

@media (max-width: 767px) {
	.li-pagina__hero { padding-block: 16px 32px; }
	.li-pagina__cuerpo { padding-block: 48px 72px; }
	.li-buscador__fila { flex-direction: column; }
}

/* ── Secciones guardadas de Elementor (D18): variantes que los globales no expresan ── */
/* Botón contorno (D21.3): transparente, borde gris, texto tinta; hover borde tinta. Gana al botón global del kit. */
.li-boton-contorno .elementor-button,
.li-boton-contorno .elementor-button:focus {
	background: transparent;
	border: 1px solid var(--li-gris);
	color: var(--li-tinta);
}
.li-boton-contorno .elementor-button:hover {
	background: transparent;
	border-color: var(--li-tinta);
	color: var(--li-tinta);
}

/* ── Compatibilidad con plantillas del padre aún en uso (portada demo hasta la Fase 6) ──
   Los globales del kit (títulos en tinta, enlaces en verde oscuro; 0,1,1) pisan los colores del padre
   sobre fondo oscuro: «Imprimimos» del hero quedaba tinta sobre tinta (1:1). */
.li-hero .li-container h1,
.li-dark .li-container h1,
.li-dark .li-container h2,
.li-dark .li-container h3,
.li-dark .li-container h4 { color: var(--li-blanco); }
.li-btn.li-btn--primary,
.li-btn.li-btn--primary:hover,
.li-btn.li-btn--primary:focus { color: var(--li-blanco); }
.li-btn.li-btn--light,
.li-btn.li-btn--light:hover,
.li-btn.li-btn--light:focus { color: var(--li-blanco); }
.li-btn.li-btn--outline,
.li-btn.li-btn--outline:hover,
.li-btn.li-btn--outline:focus { color: var(--li-tinta); }
.li-hero .li-hero__spec a,
.li-hero .li-hero__spec a:hover { color: var(--li-blanco); }

/* ── Formularios de Forminator con estilo «ninguno» (D23) ──
   hijo.css va en <head> y las hojas de Forminator llegan al final del <body>: aquí va lo esencial
   (honeypot oculto, filas y columnas) para que no haya parpadeo. Campos y botón toman los globales del kit. */
.forminator-ui .forminator-hidden { display: none !important; }
.li-formulario { max-width: 880px; }
/* Panel del formulario en las plantillas PHP (ficha), como el de las páginas de Elementor: blanco, borde y radio 22 */
.li-panel {
	box-sizing: border-box;
	max-width: 880px;
	padding: 32px;
	border: 1px solid var(--li-linea);
	border-radius: 22px;
	background: var(--li-blanco);
}
@media (max-width: 767px) {
	.li-panel { padding: 24px; }
}
.li-formulario__leyenda { margin: 0 0 24px; color: var(--li-gris); font-size: var(--e-global-typography-pequeno-font-size, 14px); line-height: 1.5; }
.li-formulario form .forminator-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
}
/* Filas y columnas en la escala (24 px; 16 en móvil): especificidad 0,6,1, mayor que la de Forminator (0,6,0), que
   pone 30/20 px entre filas y 15 px de relleno en cada columna (g3-17, g5-14) */
.li-formulario form.forminator-ui.forminator-custom-form[data-grid] .forminator-row { margin-left: 0; margin-right: 0; gap: 0 24px; }
.li-formulario form.forminator-ui.forminator-custom-form[data-grid] .forminator-row:not(:last-child) { margin-bottom: 24px; }
.li-formulario form.forminator-ui.forminator-custom-form[data-grid] .forminator-col { padding: 0; }
.li-formulario form.forminator-ui.forminator-custom-form[data-grid] .forminator-col:not(:last-child) { margin-bottom: 0; }
/* Campo con error: borde en color error (el foco manda) e icono antes del mensaje, que ya dice qué pasó (r2-g5-03) */
.li-formulario .forminator-has_error [aria-invalid="true"]:not(:focus) { border-color: var(--li-error); }
.li-formulario .forminator-error-message { display: flex; align-items: flex-start; gap: 8px; }
.li-formulario .forminator-error-message::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.25'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.25'/%3E%3C/svg%3E") no-repeat center / contain;
}
.li-formulario .forminator-col { flex: 1 1 0; min-width: 0; }
.li-formulario .forminator-col-12 { flex-basis: 100%; }
.li-formulario .forminator-col-6 { flex: 1 1 calc(50% - 12px); }
/* Columna limitada: el <input type="file"> nativo mide ~420 px y ensanchaba la página en móvil (WCAG 1.4.10) */
.li-formulario .forminator-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.li-formulario .forminator-label {
	display: block;
	color: var(--li-texto);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}
.li-formulario .forminator-required { color: var(--e-global-color-error, #c62828); }
.li-formulario .forminator-input,
.li-formulario .forminator-textarea { box-sizing: border-box; width: 100%; min-height: 48px; }
.li-formulario .forminator-textarea { min-height: 140px; }
/* Texto de ejemplo en gris (4,8:1 sobre Campo, sistema-diseno §1); el del navegador se queda en 4,2:1 */
.li-formulario ::placeholder { color: var(--li-gris); opacity: 1; }
.li-formulario .forminator-description { display: block; color: var(--li-gris); font-size: var(--e-global-typography-pequeno-font-size, 14px); line-height: 1.5; }
.li-formulario .forminator-radio-bullet,
.li-formulario .forminator-checkbox-box { display: none; }
.li-formulario .forminator-radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	margin-right: 24px;
	color: var(--li-texto);
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
}
.li-formulario input[type="radio"],
.li-formulario input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--li-verde);
}
/* Casilla de privacidad: 24 px y la frase es su etiqueta (inc/formularios.php), así que toda la línea es clicable */
.li-formulario .forminator-checkbox__wrapper { display: flex; align-items: flex-start; gap: 12px; }
.li-formulario .forminator-consent { display: inline-flex; padding-top: 1px; }
.li-formulario .forminator-consent input[type="checkbox"] { width: 24px; height: 24px; }
.li-formulario .forminator-consent__label { color: var(--li-texto); font-size: 15px; font-weight: 400; line-height: 1.6; cursor: pointer; }
.li-formulario .forminator-consent__label a { text-decoration: underline; }
.li-formulario .forminator-file-upload,
.li-formulario .forminator-multi-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.li-formulario input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	color: var(--li-texto);
	font: inherit;
	font-size: 15px;
}
/* Botón «Elegir archivo» = botón de contorno (D21.3) */
.li-formulario input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 16px;
	border: 1px solid var(--li-gris);
	border-radius: 999px;
	background: transparent;
	color: var(--li-tinta);
	font-family: var(--e-global-typography-secondary-font-family, "Hanken Grotesk"), sans-serif;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.li-formulario input[type="file"]::file-selector-button:hover { border-color: var(--li-tinta); }
.li-formulario .forminator-uploaded-files:not(:has(li)) { display: none; }
/* Campo de archivo con estado propio (assets/js/archivos.js marca el campo con .li-adjunto; r2-g5-02, r2-g3-03,
   r2-g4-05): la caja de campo pasa del <input type="file"> a su contenedor, que lleva el botón y la línea de estado, y
   el texto nativo («No se ha seleccionado ningún archivo», recortado en el móvil) se oculta. Sin JS no cambia nada.
   El input, a 0,4,1 para ganar a la regla del kit (.elementor-kit-5 input:not([type=button]):not([type=submit]), 0,3,1). */
.li-formulario .li-adjunto .forminator-file-upload,
.li-formulario .li-adjunto .forminator-multi-upload {
	box-sizing: border-box;
	min-height: 48px;
	padding: 8px 15px;
	border: 1px solid var(--li-gris);
	border-radius: 12px;
	background: var(--li-campo);
}
.li-formulario .li-adjunto.forminator-has_error .forminator-file-upload:not(:focus-within),
.li-formulario .li-adjunto.forminator-has_error .forminator-multi-upload:not(:focus-within) { border-color: var(--li-error); }
@supports selector(::file-selector-button) {
	.li-formulario .forminator-field.li-adjunto input[type="file"] { width: auto; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; font-size: 0; }
	.li-formulario .li-adjunto input[type="file"]::file-selector-button { margin-right: 0; }
}
/* Junto al botón si cabe; si no, debajo, y el nombre se parte donde haga falta (nunca recortado) */
/* Aviso de subida atascada (archivos.js): texto que dice qué hacer, no solo color */
.li-formulario .li-adjunto__aviso { margin: 8px 0 0; color: var(--li-error); font-size: 15px; line-height: 1.5; }
.li-formulario .li-adjunto__estado { flex: 1 1 14em; min-width: 0; margin: 0; color: var(--li-texto); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
/* Lista de archivos subidos (subida múltiple; con el estilo «ninguno», Forminator no la pinta) */
.li-formulario .forminator-uploaded-files { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.li-formulario .forminator-uploaded-file--content {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 16px;
	border: 1px solid var(--li-linea);
	border-radius: 12px;
	background: var(--li-blanco);
}
.li-formulario .forminator-uploaded-file.forminator-has_error .forminator-uploaded-file--content { border-color: var(--li-error); }
.li-formulario .forminator-uploaded-file--preview,
.li-formulario .forminator-uploaded-file--image { flex: none; display: flex; color: var(--li-gris); }
.li-formulario .forminator-img-preview { width: 32px; height: 32px; border-radius: 4px; background-position: center; background-size: cover; }
.li-formulario .forminator-uploaded-file--text { flex: 1; min-width: 0; }
.li-formulario .forminator-uploaded-file--title,
.li-formulario .forminator-uploaded-file--size { margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.li-formulario .forminator-uploaded-file--title { color: var(--li-texto); font-size: 15px; }
.li-formulario .forminator-uploaded-file--size { color: var(--li-gris); font-size: 14px; }
.li-formulario .forminator-uploaded-file .forminator-error-message { margin: 4px 0 0 16px; }
/* «Quitar …» (nombre de archivos.js): contorno redondo de 36 px, no la píldora verde de los globales del kit, que
   pintan todo button (0,1,1; hover y foco 0,2,1) */
.li-formulario button.forminator-uploaded-file--delete,
.li-formulario button.forminator-uploaded-file--delete:hover,
.li-formulario button.forminator-uploaded-file--delete:focus {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--li-gris);
	border-radius: 999px;
	background: transparent;
	color: var(--li-tinta);
}
.li-formulario button.forminator-uploaded-file--delete:hover { border-color: var(--li-tinta); }
/* Sin el borde en relieve del navegador; el resto (píldora, verde, hover) viene de los globales del kit */
.li-formulario .forminator-button-submit { min-height: 48px; border: 0; cursor: pointer; }
.li-formulario .forminator-error-message {
	display: block;
	margin-top: 4px;
	color: var(--e-global-color-error, #c62828);
	font-size: 14px;
}
.li-formulario .forminator-response-message:empty,
.li-formulario .forminator-response-message[aria-hidden="true"] { display: none; }
.li-formulario .forminator-response-message {
	margin-bottom: 24px;
	padding: 16px 20px;
	border-left: 4px solid var(--li-verde);
	border-radius: 12px;
	background: var(--li-blanco);
	color: var(--li-texto);
}
.li-formulario .forminator-response-message.forminator-error { border-left-color: var(--e-global-color-error, #c62828); }

/* Calendario de «Fecha en que lo necesitas» (jQuery UI de Forminator, sin tema) con los tokens */
#ui-datepicker-div {
	z-index: 1000 !important;
	box-sizing: border-box;
	width: 300px;
	padding: 16px;
	border: 1px solid var(--li-linea);
	border-radius: 12px;
	background: var(--li-blanco);
	color: var(--li-texto);
	font-family: var(--e-global-typography-text-font-family, "Hanken Grotesk"), sans-serif;
	font-size: 15px;
}
#ui-datepicker-div .ui-datepicker-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
#ui-datepicker-div .ui-datepicker-title { display: flex; flex: 1; gap: 8px; order: 2; }
#ui-datepicker-div .ui-datepicker-title select {
	flex: 1;
	min-width: 0;
	min-height: 36px;
	padding: 4px 8px;
	border: 1px solid var(--li-gris);
	border-radius: 12px;
	background: var(--e-global-color-campo, #f7f5f0);
	color: var(--li-texto);
	font: inherit;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--li-gris);
	border-radius: 999px;
	color: var(--li-tinta);
	font-size: 0; /* el texto («Anterior», «Siguiente») queda como title */
	text-decoration: none;
	cursor: pointer;
}
#ui-datepicker-div .ui-datepicker-prev { order: 1; }
#ui-datepicker-div .ui-datepicker-next { order: 3; }
#ui-datepicker-div .ui-datepicker-prev::before,
#ui-datepicker-div .ui-datepicker-next::before {
	content: "";
	width: 8px;
	height: 8px;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: translateX(2px) rotate(45deg);
}
#ui-datepicker-div .ui-datepicker-next::before { transform: translateX(-2px) rotate(-135deg); }
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover { border-color: var(--li-tinta); }
#ui-datepicker-div .ui-state-disabled { opacity: .4; cursor: default; }
#ui-datepicker-div table { width: 100%; border-collapse: collapse; }
#ui-datepicker-div th { padding: 4px 0; color: var(--li-gris); font-size: 14px; font-weight: 600; }
#ui-datepicker-div td { padding: 2px; text-align: center; }
#ui-datepicker-div td a,
#ui-datepicker-div td span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--li-texto);
	text-decoration: none;
}
#ui-datepicker-div td a:hover { border-color: var(--li-gris); }
#ui-datepicker-div td.ui-datepicker-today a { border-color: var(--li-verde); }
#ui-datepicker-div td a.ui-state-active { background: var(--li-verde); color: var(--li-blanco); }
/* Sin los grises ni el amarillo de jQuery UI (g3-12): cabecera blanca y hoy en verde-suave */
#ui-datepicker-div .ui-datepicker-header { padding: 0 0 12px; background: var(--li-blanco); border: 0; border-bottom: 1px solid var(--li-linea); border-radius: 0; color: var(--li-texto); }
#ui-datepicker-div td a.ui-state-default,
#ui-datepicker-div td span.ui-state-default { background: transparent; } /* también los días desactivados (span) */
#ui-datepicker-div td a.ui-state-default.ui-state-hover { background: var(--li-verde-suave); }
#ui-datepicker-div td.ui-datepicker-today a.ui-state-highlight { background: var(--li-verde-suave); }
#ui-datepicker-div td a.ui-state-default.ui-state-active { background: var(--li-verde); border-color: var(--li-verde); color: var(--li-blanco); }

/* Capa básica de información sobre protección de datos */
.li-rgpd {
	margin-top: 24px;
	padding: 24px;
	border: 1px solid var(--li-linea);
	border-radius: 18px;
	background: var(--li-blanco);
	color: var(--li-gris);
	font-size: var(--e-global-typography-pequeno-font-size, 14px);
	line-height: 1.5;
}
.li-rgpd__titulo { margin: 0 0 8px; color: var(--li-texto); font-weight: 700; }
.li-rgpd__lista { display: grid; gap: 4px; margin: 0; }
.li-rgpd__fila { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
.li-rgpd dt { color: var(--li-texto); font-weight: 600; }
.li-rgpd dd { margin: 0; }
.li-rgpd a { text-decoration: underline; }

@media (max-width: 767px) {
	.li-formulario .forminator-col-6 { flex-basis: 100%; }
	.li-formulario form.forminator-ui.forminator-custom-form[data-grid] .forminator-row { row-gap: 16px; }
	.li-formulario form.forminator-ui.forminator-custom-form[data-grid] .forminator-row:not(:last-child) { margin-bottom: 16px; }
	.li-rgpd { padding: 16px; }
	.li-rgpd__fila { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ── Páginas de Elementor (Tarea 6.4): clases de las secciones generadas por tools/elementor/paginas.py ── */
/* Acento en cursiva del H1 de la portada: verde de marca sobre el hero claro (D31, D40; 4,9:1 sobre blanco, texto grande) */
.li-acento { color: var(--li-verde); font-style: italic; }
/* H1 de portada (global Display, 104 px): de 1025 a 1365 px la columna del hero es más estrecha que «Imprimimos»;
   el tamaño escala con la ventana y empalma con los 104 px a 1366 px (D27) */
@media (min-width: 1025px) and (max-width: 1365px) {
	.li-display { --e-global-typography-display-font-size: 7.6vw; }
}
/* Hero de la portada sobre blanco, como «Todo lo que imprimimos» (D31), con la foto bajo el texto (D28, como el hero
   del tema padre): el <img> (LCP) ocupa la sección y un velo blanco de 0,94 la cubre hasta el borde de la columna de
   texto (el gris da 4,5:1 aunque la foto fuera negra) y se abre a la derecha (0,35) para dejarla ver, con el encuadre
   arriba (la pila de libros contra la pared). En tableta y móvil el
   texto ocupa todo el ancho: la foto es una banda arriba que se funde en blanco antes del texto. Filete de línea abajo
   para separarlo de la sección siguiente. Contraste medido sobre la captura en tools/revision/teclado.mjs */
.li-hero--con-fondo { overflow: hidden; border-bottom: 1px solid var(--li-linea); }
.li-hero--con-fondo .li-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
}
.li-hero__fondo .elementor-widget-container,
.li-hero__fondo img { width: 100%; height: 100%; }
.li-hero__fondo img { display: block; object-fit: cover; object-position: 50% 12%; }
.li-hero__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0, rgba(255, 255, 255, .94) calc(max(24px, 50% - 620px) + 776px), rgba(255, 255, 255, .35) 100%); /* blanco */
}
.li-hero--con-fondo .li-hero__contenido { position: relative; z-index: 1; }
@media (max-width: 1024px) {
	.li-hero--con-fondo { --li-hero-banda: 180px; }
	.li-hero--con-fondo .li-hero__fondo { bottom: auto; height: calc(56px + var(--li-hero-banda)); } /* fundido 24 px antes del texto */
	.li-hero__fondo img { object-position: 50% 40%; }
	.li-hero__fondo::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 45%, var(--li-blanco) 100%); }
	.li-hero--con-fondo .li-hero__contenido { margin-top: var(--li-hero-banda); }
}
@media (max-width: 767px) {
	.li-hero--con-fondo { --li-hero-banda: 140px; }
	.li-hero--con-fondo .li-hero__fondo { height: calc(40px + var(--li-hero-banda)); }
}

/* Ventajas y cajas de icono (componentes.md): icono de 24 px en un círculo verde-suave de 48 px, 16 px hasta el título,
   título con estilo H4 (Hanken 600, 18 px; sigue siendo un h3) y 8 px hasta el texto (g1-05, g4-10) */
.elementor-widget-icon-box.li-ventaja { --icon-box-icon-margin: 16px; }
.li-ventaja .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--li-verde-suave);
	font-size: 24px;
}
.li-ventaja .elementor-icon svg { width: 24px; height: 24px; }
.li-ventaja .elementor-icon-box-title {
	margin: 0 0 8px;
	font-family: var(--e-global-typography-secondary-font-family, "Hanken Grotesk"), sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
}
/* Cajas enlazadas («Qué imprimimos en digital»…): el título parece un enlace (g4-09) */
.li-caja-enlace .elementor-icon-box-title a { color: var(--li-texto); text-decoration: underline; text-decoration-color: var(--li-linea); text-underline-offset: 4px; }
.li-caja-enlace .elementor-icon-box-title a:hover { color: var(--li-verde-oscuro); text-decoration-color: currentColor; }
/* Lista con check: check de 14 px centrado en un círculo verde-suave de 26 px, alineado con la primera línea, con 12 px
   hasta el texto y entre puntos (g4-05, g4-10, r2-g4-01). Las variables de Elementor quitan el margen del icono y fijan
   la alineación sin depender del orden de carga de widget-icon-list.min.css */
.li-lista-check { --icon-vertical-align: flex-start; --e-icon-list-icon-margin: 0; }
.li-lista-check .elementor-icon-list-item { align-items: flex-start; }
.li-lista-check .elementor-icon-list-item:not(:first-child) { margin-top: 12px; }
.li-lista-check .elementor-icon-list-icon {
	flex: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border-radius: 999px;
	background: var(--li-verde-suave);
}
.li-lista-check .elementor-icon-list-icon i,
.li-lista-check .elementor-icon-list-icon svg { width: 14px; height: 14px; font-size: 14px; }
.elementor-widget.li-lista-check .elementor-icon-list-icon + .elementor-icon-list-text { padding-inline-start: 12px; }
.elementor-widget .elementor-icon-list-item .elementor-icon-list-text a { display: inline; }
/* Párrafos de los textos de Elementor sin márgenes sobrantes arriba y abajo (huecos de la escala; g5-12, g6-07) */
.elementor-widget-text-editor > :first-child { margin-top: 0; }
.elementor-widget-text-editor > :last-child { margin-bottom: 0; }
/* Un shortcode que no pinta nada no deja hueco en su contenedor (p. ej. [li_whatsapp] sin número) */
.elementor-widget-shortcode:has(> .elementor-shortcode:empty) { display: none; }

/* H1 de los héroes con imagen (estilo H1 del tema, 80 px): de 1025 a 1279 px no caben palabras largas
   («encuadernación», «maquetación») en media columna; escala con la ventana y empalma con 80 px a 1280 px (D27) */
@media (min-width: 1025px) and (max-width: 1279px) {
	.li-titulo-hero .elementor-heading-title { font-size: 6.25vw; }
}

/* Botón claro sobre fondo oscuro (D21.3): fondo tinta-3, borde gris-pie, texto blanco; hover línea oscura */
.li-boton-claro-el .elementor-button,
.li-boton-claro-el .elementor-button:focus {
	background: var(--li-tinta-3);
	border: 1px solid var(--li-gris-pie);
	color: var(--li-blanco);
}
.li-boton-claro-el .elementor-button:hover {
	background: var(--li-linea-osc);
	border-color: var(--li-gris-pie);
	color: var(--li-blanco);
}

/* Pasos del proceso (D21.6): <ol> con el número en verde de marca (texto grande, D40), una tarjeta por paso */
.li-pasos {
	display: grid;
	grid-auto-columns: minmax(0, 1fr); /* tantas columnas como pasos (3, 4 o 5) en escritorio (g5-13) */
	grid-auto-flow: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: li-paso;
}
.li-pasos > li {
	display: grid;
	align-content: start;
	gap: 8px;
	padding: 24px;
	background: var(--li-blanco);
	border: 1px solid var(--li-linea);
	border-radius: 18px;
	counter-increment: li-paso;
}
.li-pasos > li::before {
	content: counter(li-paso);
	color: var(--li-verde);
	font-family: var(--e-global-typography-primary-font-family, "Fraunces"), serif;
	font-size: 40px;
	line-height: 1;
}
.li-pasos h3 { margin: 0; } /* tamaño H3 del kit (g1-05) */
.li-pasos p { margin: 0; color: var(--li-gris); font-size: var(--e-global-typography-pequeno-font-size, 14px); line-height: var(--e-global-typography-pequeno-line-height, 1.5); }

/* Tarjeta de Elementor cuyo contenedor entero es el enlace (un solo enlace; foco del sitio) */
a.li-tarjeta-el,
a.li-tarjeta-el:hover { color: var(--li-texto); text-decoration: none; }
a.li-tarjeta-el:hover .elementor-heading-title { text-decoration: underline; text-underline-offset: 4px; }
/* Flecha de la tarjeta única (componentes.md), como en las tarjetas PHP: abajo a la izquierda (r2-g4-04) */
a.li-tarjeta-el::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin: auto 24px 24px;
	background: var(--li-verde);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Imágenes de tarjeta con la misma proporción (recortadas), para que las tarjetas alineen */
/* Imágenes de las páginas de Elementor con proporción fija (sistema-diseno §6; Tarea 7.1, g1-07/08, g4-06): la caja
   del widget fija la proporción, así que no se aplasta mientras carga la imagen, y la imagen la llena recortada */
.elementor-widget-image.li-img { width: 100%; overflow: hidden; }
.elementor-widget-image.li-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.li-img--4-3 { aspect-ratio: 4 / 3; }
.li-img--4-5 { aspect-ratio: 4 / 5; }
.li-img--16-9 { aspect-ratio: 16 / 9; }
.li-img--1-1 { aspect-ratio: 1; }
@media (prefers-reduced-motion: no-preference) {
	a.li-tarjeta-el img,
	a.li-tarjeta-el::after { transition: transform .3s ease; }
	a.li-tarjeta-el:hover img { transform: scale(1.05); }
	a.li-tarjeta-el:hover::after { transform: translateX(4px); }
}

@media (max-width: 1024px) {
	.li-pasos { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.li-pasos { grid-template-columns: minmax(0, 1fr); }
}