/*
Theme Name: Hormex
Theme URI: https://hormex.es
Description: Tema hijo de Astra para Hormex — pavimentos de hormigón. Toda la personalización vive aquí para sobrevivir a las actualizaciones de Astra. Sin Elementor.
Author: Hormex
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hormex
*/

/* ==================================================================
 * ÍNDICE
 * 1. Tokens de diseño (paleta, tipografía, espacios)
 * 2. Base
 * 3. Cabecera y navegación
 * 4. Botones
 * 5. Hero (v1)
 * 5b. Hero v3
 * 6. Contenido de artículos y páginas
 * 6b. Páginas de producto
 * 6c. Secciones de portada
 * 6d. Páginas de precio
 * 6e. Comparativas
 * 6f. Zonas
 * 7. Listado del blog
 * 8. Banda de presupuesto y relacionados
 * 9. Pie de página
 * 10. Barra de contacto flotante (dock)
 * 10b. Página de contacto
 * 10c. Visor de imágenes
 * 10d. Calculadoras (Calculated Fields Form)
 * 11. Accesibilidad y preferencias del sistema
 * Contrastes medidos: design/design-system.md
 * ================================================================== */

/* ------------------------------------------------------------------
 * 1. TOKENS
 * ---------------------------------------------------------------- */
:root {
	/* Marca */
	--hx-ink: #0d1321;      /* Ink Black */
	--hx-deep: #1d2d44;     /* Deep Space Blue */
	--hx-slate: #3e5c76;    /* Blue Slate */
	--hx-denim: #748cab;    /* Dusty Denim */
	--hx-egg: #f0ebd8;      /* Eggshell */

	/* Escala (mezcla hacia blanco / negro) */
	--hx-paper: #faf8f1;     /* fondo de página: 17,4:1 con ink */
	--hx-egg-600: #e2dcc4;   /* bordes sobre paper */
	--hx-deep-50: #f1f3f6;
	--hx-deep-100: #e8eaec;  /* bordes sobre blanco */
	--hx-denim-200: #b9c6d6; /* texto secundario sobre oscuro: 10,7:1 con ink */
	--hx-slate-700: #2b4053; /* hover de enlaces */
	--hx-muted: #4f6178;
	--hx-error: #a3301f;   /* errores de formulario: 6,9:1 sobre blanco */     /* texto secundario sobre claro: 6,3:1 blanco */

	/* Roles */
	--hx-bg: var(--hx-paper);
	--hx-surface: #ffffff;
	--hx-text: var(--hx-ink);
	--hx-text-invert: var(--hx-egg);
	--hx-link: var(--hx-slate);
	--hx-dark: var(--hx-ink);
	--hx-border: var(--hx-deep-100);

	/* Tipografía */
	--hx-font-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
	--hx-font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	--hx-fs-xs: 0.8125rem;
	--hx-fs-sm: 0.9375rem;
	--hx-fs-base: 1.0625rem;
	--hx-fs-lg: 1.25rem;
	--hx-fs-xl: 1.5rem;
	--hx-fs-2xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
	--hx-fs-hero: clamp(2.1rem, 1.4rem + 2.4vw, 3.25rem);

	/* Espacios */
	--hx-space-2xs: 0.25rem;
	--hx-space-xs: 0.5rem;
	--hx-space-sm: 0.75rem;
	--hx-space-md: 1.25rem;
	--hx-space-lg: 2rem;
	--hx-space-xl: 3rem;
	--hx-space-2xl: clamp(3.5rem, 2rem + 5vw, 6rem);

	--hx-container: 1200px;
	--hx-measure: 740px;
	--hx-gutter: clamp(16px, 4vw, 32px);
	--hx-radius: 8px;
	--hx-radius-lg: 16px;
	--hx-shadow-sm: 0 1px 2px rgba(13, 19, 33, 0.06), 0 2px 8px rgba(13, 19, 33, 0.05);
	--hx-shadow-md: 0 6px 16px rgba(13, 19, 33, 0.08), 0 16px 40px rgba(13, 19, 33, 0.1);
	--hx-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.35);
	--hx-ease: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------------
 * 2. BASE
 * ---------------------------------------------------------------- */
body,
.ast-separate-container,
.ast-plain-container {
	background: var(--hx-bg);
	color: var(--hx-text);
	font-family: var(--hx-font-body);
	font-size: var(--hx-fs-base);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-content :is(h1, h2, h3, h4, h5, h6),
.entry-title {
	font-family: var(--hx-font-display);
	color: var(--hx-ink);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

a {
	color: var(--hx-link);
	transition: color var(--hx-ease);
}
a:hover,
a:focus {
	color: var(--hx-slate-700);
}

::selection {
	background: var(--hx-egg);
	color: var(--hx-ink);
}

.hx-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 var(--hx-space-md);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hx-slate);
}
.hx-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
}
.hx-eyebrow a {
	color: inherit;
	text-decoration: none;
}
.hx-eyebrow a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
 * 3. CABECERA
 * ---------------------------------------------------------------- */
.site-header .main-header-bar,
.site-header .ast-primary-header-bar,
.ast-primary-header-bar {
	background: var(--hx-paper);
	border-bottom: 1px solid var(--hx-egg-600);
}

.main-header-menu .menu-link,
.ast-builder-menu .main-header-menu > .menu-item > .menu-link {
	font-family: var(--hx-font-display);
	font-weight: 600;
	font-size: var(--hx-fs-sm);
	color: var(--hx-deep);
}
.main-header-menu > .menu-item:hover > .menu-link,
.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current-menu-ancestor > .menu-link {
	color: var(--hx-slate);
}

/* Último elemento del menú (Contacto) como botón: la única llamada fija. */
@media (min-width: 922px) {
	.main-header-menu > .menu-item:last-child {
		display: flex;
		align-items: center;
	}
	.main-header-menu > .menu-item:last-child > .menu-link {
		height: auto;
		margin-left: 0.5rem;
		padding: 0.55rem 1.1rem;
		line-height: 1.2;
		border-radius: 999px;
		background: var(--hx-deep);
		color: var(--hx-egg);
		transition: background var(--hx-ease);
	}
	.main-header-menu > .menu-item:last-child > .menu-link:hover,
	.main-header-menu > .menu-item.current-menu-item:last-child > .menu-link {
		background: var(--hx-slate);
		color: #fff;
	}
}

.main-header-menu .sub-menu {
	background: #fff;
	border: 1px solid var(--hx-border) !important;
	border-radius: var(--hx-radius);
	box-shadow: var(--hx-shadow-md);
	padding: 0.4rem;
}
.main-header-menu .sub-menu .menu-link {
	border-radius: 6px;
	font-weight: 500;
	padding: 0.55rem 0.8rem;
}
.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .sub-menu .current-menu-item > .menu-link {
	background: var(--hx-deep-50);
	color: var(--hx-ink);
}

/* ------------------------------------------------------------------
 * 4. BOTONES
 * Sobre oscuro: Eggshell con texto Ink (15,5:1). Sobre claro: Deep Space
 * con texto Eggshell (11,6:1). Dusty Denim nunca es fondo de botón.
 * ---------------------------------------------------------------- */
.hx-btn,
.wp-block-button__link,
.entry-content .wp-block-button__link,
button.ff-btn-submit,
.ff-btn-submit,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.8rem 1.5rem;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-family: var(--hx-font-display);
	font-weight: 700;
	font-size: var(--hx-fs-sm);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--hx-ease), color var(--hx-ease), border-color var(--hx-ease), transform var(--hx-ease);
}
.hx-btn:active {
	transform: translateY(1px);
}

.wp-block-button__link,
.entry-content .wp-block-button__link,
button.ff-btn-submit,
.ff-btn-submit,
input[type="submit"] {
	background: var(--hx-deep) !important;
	color: var(--hx-egg) !important;
}
.wp-block-button__link:hover,
button.ff-btn-submit:hover,
input[type="submit"]:hover {
	background: var(--hx-slate) !important;
	color: #fff !important;
}

.hx-btn--light {
	background: var(--hx-egg);
	color: var(--hx-ink);
}
.hx-btn--light::after {
	content: "→";
	transition: transform var(--hx-ease);
}
.hx-btn--light:hover,
.hx-btn--light:focus {
	background: #fff;
	color: var(--hx-ink);
}
.hx-btn--light:hover::after {
	transform: translateX(3px);
}

.hx-btn--ghost {
	background: transparent;
	color: var(--hx-egg);
	border-color: rgba(240, 235, 216, 0.4);
}
.hx-btn--ghost:hover,
.hx-btn--ghost:focus {
	border-color: var(--hx-egg);
	color: var(--hx-egg);
	background: rgba(240, 235, 216, 0.08);
}

/* ------------------------------------------------------------------
 * 5. HERO
 * Fondo Ink con dos halos (Deep Space, Blue Slate) y una retícula muy
 * tenue que evoca el despiece de una solera. Título Eggshell (15,5:1),
 * entradilla denim-200 (10,7:1), sobretítulo Dusty Denim (5,4:1).
 * ---------------------------------------------------------------- */
.hx-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(60rem 30rem at 85% -10%, rgba(62, 92, 118, 0.55), transparent 60%),
		radial-gradient(50rem 30rem at -10% 110%, rgba(29, 45, 68, 0.9), transparent 60%),
		var(--hx-ink);
	color: var(--hx-egg);
	padding: var(--hx-space-2xl) var(--hx-gutter);
}
/* Textura: grano de hormigón (ruido SVG) y, a la derecha, las marcas
 * circulares que deja la fratasadora. Ambas por debajo del 10 %: se
 * notan de cerca, no compiten con el texto. */
.hx-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .92 0 0 0 0 .85 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.07;
	mix-blend-mode: screen;
}
.hx-hero__inner::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: -18rem;
	width: 62rem;
	aspect-ratio: 1;
	transform: translateY(-50%);
	border-radius: 50%;
	background: repeating-radial-gradient(circle at center, transparent 0 46px, rgba(116, 140, 171, 0.16) 46px 47px);
	mask-image: radial-gradient(circle at center, #000 25%, transparent 70%);
	-webkit-mask-image: radial-gradient(circle at center, #000 25%, transparent 70%);
	pointer-events: none;
}
.hx-hero--center .hx-hero__inner::before {
	right: 50%;
	transform: translate(50%, -50%);
	width: 56rem;
}
/* Filo inferior Eggshell: separa el hero del contenido sin una línea dura. */
.hx-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--hx-slate), var(--hx-denim), var(--hx-egg));
}

.hx-hero__inner {
	position: relative;
	max-width: var(--hx-container);
	margin: 0 auto;
}
.hx-hero--split .hx-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.hx-hero--center .hx-hero__inner {
	text-align: center;
	max-width: 820px;
}
.hx-hero--center .hx-eyebrow::after {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
}

.hx-hero .hx-eyebrow {
	color: var(--hx-denim);
}

.hx-hero__title {
	margin: 0 0 var(--hx-space-md);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-hero);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--hx-egg);
	text-wrap: balance;
}
.hx-hero--post .hx-hero__title {
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
}
.hx-accent {
	font-style: normal;
	color: #fff;
	background: linear-gradient(transparent 68%, rgba(116, 140, 171, 0.55) 68%, rgba(116, 140, 171, 0.55) 92%, transparent 92%);
	padding: 0 0.08em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.hx-hero__lead {
	max-width: 58ch;
	margin: 0 0 var(--hx-space-lg);
	font-size: var(--hx-fs-lg);
	line-height: 1.6;
	color: var(--hx-denim-200);
	text-wrap: pretty;
}
.hx-hero--center .hx-hero__lead {
	margin-inline: auto;
}

.hx-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 var(--hx-space-lg);
	padding: 0;
	list-style: none;
}
.hx-hero--center .hx-badges {
	justify-content: center;
}
.hx-badges li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.45rem 0.9rem 0.45rem 0.65rem;
	border: 1px solid rgba(116, 140, 171, 0.35);
	border-radius: 999px;
	background: rgba(29, 45, 68, 0.6);
	font-size: var(--hx-fs-sm);
	font-weight: 600;
	color: var(--hx-egg);
}
.hx-badges li::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	border-radius: 50%;
	background: var(--hx-denim)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D1321' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
		center / 11px no-repeat;
}

/* El hueco sobre los botones vive en el margen de las pastillas: si los
 * botones se apilan, no aparece un agujero entre ellos. */
.hx-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.hx-hero--center .hx-hero__ctas {
	justify-content: center;
}

.hx-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--hx-space-lg) 0 0;
	font-size: var(--hx-fs-sm);
	color: var(--hx-denim-200);
}
.hx-hero--center .hx-hero__meta {
	justify-content: center;
}
.hx-hero--index .hx-hero__meta {
	margin-top: 0;
}

/* Imagen: dos planos, la foto y un marco Blue Slate desplazado. */
.hx-hero__media {
	position: relative;
}
.hx-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translate(18px, -18px);
	border: 1.5px solid rgba(116, 140, 171, 0.5);
	border-radius: var(--hx-radius-lg);
}
.hx-hero__img {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	border-radius: var(--hx-radius-lg);
	box-shadow: var(--hx-shadow-lg);
}
.hx-hero--post .hx-hero__img {
	aspect-ratio: 16 / 11;
}

.hx-stat {
	position: absolute;
	left: -2rem;
	bottom: -1.75rem;
	display: grid;
	gap: 0.1rem;
	max-width: 15rem;
	padding: 1rem 1.25rem;
	border-radius: var(--hx-radius);
	background: var(--hx-egg);
	color: var(--hx-ink);
	box-shadow: var(--hx-shadow-md);
}
.hx-stat strong {
	font-family: var(--hx-font-display);
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}
.hx-stat span {
	font-weight: 700;
}
.hx-stat small {
	font-size: var(--hx-fs-xs);
	line-height: 1.4;
	color: var(--hx-muted);
}

@media (max-width: 1023px) {
	.hx-hero--split .hx-hero__inner {
		grid-template-columns: 1fr;
	}
	.hx-hero__media::before {
		display: none;
	}
	.hx-stat {
		position: static;
		margin-top: -2.5rem;
		margin-left: 1rem;
		max-width: none;
		width: fit-content;
		position: relative;
	}
}
@media (max-width: 600px) {
	.hx-hero__ctas .hx-btn {
		flex: 1 1 100%;
	}
	.hx-hero__lead {
		font-size: var(--hx-fs-base);
	}
}

/* Astra ya no imprime título ni imagen, pero sí el contenedor vacío. */
.hx-has-hero.single .site-main > article .entry-header,
.hx-has-hero.page .site-main > article .entry-header,
.hx-has-hero .ast-archive-description,
.hx-has-hero .page-header {
	display: none;
}

/* ------------------------------------------------------------------
 * 5b. HERO v3 (inc/hero.php · hormex_hero_v3)
 * Claro y editorial: fondo Paper/Eggshell, título Ink grande, foto
 * enmarcada a la derecha con un bloque Slate desplazado detrás y una
 * etiqueta de precio clavada en la esquina. Sin foto: la misma
 * composición, centrada.
 * El v1 (§ 5) sigue intacto: wp option update hormex_hero v1.
 * ---------------------------------------------------------------- */
.hx-hero3 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(36rem 20rem at 0% 0%, rgba(240, 235, 216, 0.9), transparent 70%),
		linear-gradient(180deg, var(--hx-egg) 0%, var(--hx-paper) 78%);
	color: var(--hx-ink);
}
.hx-hero3__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	max-width: var(--hx-container);
	margin: 0 auto;
	padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--hx-gutter) clamp(3rem, 2.5rem + 3vw, 5rem);
}
.hx-hero3--texto .hx-hero3__inner {
	grid-template-columns: minmax(0, 1fr);
	max-width: 900px;
	text-align: center;
}

.hx-hero3 .hx-migas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.4rem;
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hx-slate);
}
.hx-hero3--texto .hx-migas {
	justify-content: center;
}
.hx-hero3 .hx-migas a {
	color: var(--hx-slate);
	text-decoration: none;
}
.hx-hero3 .hx-migas a:hover {
	color: var(--hx-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hx-hero3__title {
	margin: 0 0 var(--hx-space-md);
	font-family: var(--hx-font-display);
	font-size: clamp(2.2rem, 1.3rem + 3vw, 3.7rem);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.035em;
	color: var(--hx-ink);
	text-wrap: balance;
}
.hx-hero3--post .hx-hero3__title {
	font-size: clamp(2rem, 1.3rem + 2.3vw, 3.1rem);
}
.hx-hero3 .hx-accent {
	color: var(--hx-ink);
	background: linear-gradient(transparent 66%, rgba(116, 140, 171, 0.4) 66%, rgba(116, 140, 171, 0.4) 90%, transparent 90%);
}
.hx-hero3__lead {
	max-width: 54ch;
	margin: 0 0 var(--hx-space-lg);
	font-size: var(--hx-fs-lg);
	line-height: 1.6;
	color: var(--hx-muted);
	text-wrap: pretty;
}
.hx-hero3--texto .hx-hero3__lead {
	margin-inline: auto;
}
.hx-hero3__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.hx-hero3--texto .hx-hero3__ctas {
	justify-content: center;
}
.hx-hero3__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--hx-space-md) 0 0;
	font-size: var(--hx-fs-sm);
	color: var(--hx-muted);
}
.hx-hero3--texto .hx-hero3__meta {
	justify-content: center;
}

/* Foto enmarcada: bloque Slate desplazado detrás, esquina recortada. */
.hx-hero3__media {
	position: relative;
	margin: 0 1.25rem 1.25rem 0;
}
.hx-hero3__media::before {
	content: "";
	position: absolute;
	inset: 1.25rem -1.25rem -1.25rem 1.25rem;
	z-index: -1;
	border-radius: 28px 8px 28px 8px;
	background: var(--hx-slate);
}
.hx-hero3__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 28px 8px 28px 8px;
	box-shadow: var(--hx-shadow-md);
}
.hx-hero3--post .hx-hero3__img {
	aspect-ratio: 4 / 3;
}
/* Etiqueta de precio clavada en la esquina superior. */
.hx-hero3__tag {
	position: absolute;
	top: -1rem;
	left: -1.25rem;
	display: grid;
	justify-items: start;
	padding: 0.8rem 1.1rem 0.85rem;
	border-radius: 14px 14px 14px 4px;
	background: var(--hx-ink);
	color: var(--hx-egg);
	box-shadow: var(--hx-shadow-md);
	transform: rotate(-3deg);
}
.hx-hero3__tag strong {
	font-family: var(--hx-font-display);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.hx-hero3__tag span {
	font-size: var(--hx-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hx-denim-200);
}

/* Línea de confianza bajo los botones: discreta, sin franja. */
.hx-hero3__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}
.hx-hero3--texto .hx-hero3__trust {
	justify-content: center;
}
.hx-hero3__trust li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: var(--hx-fs-sm);
	font-weight: 600;
	color: var(--hx-deep);
}
.hx-hero3__trust li::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	border-radius: 50%;
	background: rgba(62, 92, 118, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E5C76' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Filo inferior fino y menos hueco hasta el contenido. */
.hx-hero3 {
	border-bottom: 1px solid var(--hx-egg-600);
}
body.hx-hero-v3.hx-has-hero.ast-plain-container.ast-no-sidebar #primary:not(.hx-listado) {
	margin-top: var(--hx-space-xl);
}
body.hx-page-contacto.hx-hero-v3.hx-has-hero.ast-plain-container.ast-no-sidebar #primary {
	margin-top: -5rem;
}

/* Entrada suave (desactivada con «reducir movimiento», § 11). */
@keyframes hx-sube {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.hx-hero3__text > * {
	animation: hx-sube 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hx-hero3__text > :nth-child(2) { animation-delay: 0.05s; }
.hx-hero3__text > :nth-child(3) { animation-delay: 0.1s; }
.hx-hero3__text > :nth-child(4) { animation-delay: 0.15s; }
.hx-hero3__text > :nth-child(5) { animation-delay: 0.2s; }
.hx-hero3__media {
	animation: hx-sube 0.7s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Botones para fondo claro */
.hx-btn--dark {
	background: var(--hx-deep);
	color: var(--hx-egg);
}
.hx-btn--dark::after {
	content: "→";
	transition: transform var(--hx-ease);
}
.hx-btn--dark:hover,
.hx-btn--dark:focus {
	background: var(--hx-slate);
	color: #fff;
}
.hx-btn--dark:hover::after {
	transform: translateX(3px);
}
.hx-btn--outline {
	border-color: var(--hx-deep);
	background: transparent;
	color: var(--hx-deep);
}
.hx-btn--outline:hover,
.hx-btn--outline:focus {
	background: var(--hx-deep);
	color: var(--hx-egg);
}

/* Contacto: el formulario monta sobre el hero; la franja va abajo del todo. */
.hx-page-contacto .hx-hero3 .hx-hero3__inner {
	padding-bottom: calc(clamp(3rem, 2.5rem + 3vw, 5rem) + 5rem);
}

@media (max-width: 960px) {
	.hx-hero3__inner {
		grid-template-columns: 1fr;
	}
	.hx-hero3__media {
		max-width: 560px;
		margin-top: 1rem;
	}
}
@media (max-width: 600px) {
	.hx-hero3__lead {
		font-size: var(--hx-fs-base);
	}
	.hx-hero3__ctas .hx-btn {
		flex: 1 1 100%;
	}
	.hx-hero3__tag {
		left: 0.5rem;
	}
}

/* --- Imagen grande a sangre (sustituye al marco con bloque desplazado) ---
 * La foto ocupa algo menos de la mitad derecha, dentro del contenedor,
 * con esquinas redondeadas. La etiqueta de precio queda en
 * la esquina inferior izquierda, montando sobre la columna de texto. */
.hx-hero3--foto .hx-hero3__inner {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 4vw, 4rem);
	padding-top: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	padding-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}
.hx-hero3--foto .hx-hero3__media {
	align-self: stretch;
	margin: 0;
	min-height: clamp(340px, 28vw, 460px);
}
.hx-hero3--foto .hx-hero3__media::before {
	display: none;
}
.hx-hero3--foto .hx-hero3__img,
.hx-hero3--post .hx-hero3__img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 28px;
	box-shadow: var(--hx-shadow-md);
}
.hx-hero3--foto .hx-hero3__tag {
	top: auto;
	bottom: 1.75rem;
	left: -1.75rem;
	padding: 0.9rem 1.25rem 1rem;
	border: 4px solid var(--hx-paper);
	border-radius: 18px;
	transform: none;
}
.hx-hero3--foto .hx-hero3__tag strong {
	font-size: 1.75rem;
}

@media (max-width: 960px) {
	.hx-hero3--foto .hx-hero3__inner {
		grid-template-columns: 1fr;
		padding-bottom: 0;
	}
	.hx-hero3--foto .hx-hero3__media {
		max-width: none;
		margin: 0.5rem calc(-1 * var(--hx-gutter)) 0;
		min-height: 0;
		height: clamp(240px, 55vw, 420px);
	}
	.hx-hero3--foto .hx-hero3__img,
	.hx-hero3--post .hx-hero3__img {
		border-radius: 0;
	}
	.hx-hero3--foto .hx-hero3__tag {
		left: var(--hx-gutter);
		bottom: 1rem;
	}
}

/* --- Portada: mosaico de acabados ---------------------------------
 * Cuatro fotos escalonadas en dos columnas (la grande arriba a la
 * izquierda es el LCP). Cada foto enlaza a su acabado y lleva el nombre
 * en una pastilla. La cifra de guías monta sobre la esquina superior. */
.hx-hero3--mosaico .hx-hero3__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.hx-hero3--mosaico .hx-mosaico {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	grid-template-rows: repeat(6, minmax(0, 1fr));
	gap: 12px;
	min-height: 0;
	height: clamp(420px, 36vw, 540px);
}
.hx-mosaico__foto {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 20px;
	background: var(--hx-egg-600);
	box-shadow: var(--hx-shadow-md);
	color: var(--hx-ink);
	text-decoration: none;
}
.hx-mosaico__foto--1 { grid-column: 1; grid-row: 1 / 5; border-top-left-radius: 32px; }
.hx-mosaico__foto--2 { grid-column: 2; grid-row: 1 / 4; border-top-right-radius: 32px; }
.hx-mosaico__foto--3 { grid-column: 2; grid-row: 4 / 7; border-bottom-right-radius: 32px; }
.hx-mosaico__foto--4 { grid-column: 1; grid-row: 5 / 7; border-bottom-left-radius: 32px; }
.hx-hero3--mosaico .hx-mosaico .hx-hero3__img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hx-mosaico__foto:hover .hx-hero3__img,
.hx-mosaico__foto:focus-visible .hx-hero3__img {
	transform: scale(1.05);
}
.hx-mosaico__nombre {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	background: rgba(240, 235, 216, 0.94);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-sm);
	font-weight: 700;
	line-height: 1.1;
	color: var(--hx-ink);
	box-shadow: 0 4px 14px rgba(13, 19, 33, 0.18);
}
.hx-mosaico__nombre::after {
	content: "→";
	transition: transform var(--hx-ease);
}
.hx-mosaico__foto:hover .hx-mosaico__nombre,
.hx-mosaico__foto:focus-visible .hx-mosaico__nombre {
	background: var(--hx-ink);
	color: var(--hx-egg);
}
.hx-mosaico__foto:hover .hx-mosaico__nombre::after {
	transform: translateX(3px);
}
.hx-hero3--mosaico .hx-hero3__tag {
	top: 1.5rem;
	bottom: auto;
	left: -1.75rem;
	z-index: 2;
	margin: 0;
}

@media (max-width: 960px) {
	.hx-hero3--mosaico .hx-hero3__inner {
		grid-template-columns: 1fr;
		padding-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	}
	.hx-hero3--mosaico .hx-mosaico {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: clamp(220px, 52vw, 400px) clamp(96px, 24vw, 190px);
		gap: 8px;
		height: auto;
		margin: 0.5rem 0 0;
	}
	.hx-mosaico__foto { border-radius: 14px; }
	.hx-mosaico__foto--1 { grid-column: 1 / -1; grid-row: 1; border-radius: 22px 22px 14px 14px; }
	.hx-mosaico__foto--2 { grid-column: 1; grid-row: 2; border-radius: 14px 14px 14px 22px; }
	.hx-mosaico__foto--3 { grid-column: 2; grid-row: 2; border-radius: 14px; }
	.hx-mosaico__foto--4 { grid-column: 3; grid-row: 2; border-radius: 14px 14px 22px 14px; }
	.hx-mosaico__nombre {
		left: 0.45rem;
		bottom: 0.45rem;
		padding: 0.3rem 0.6rem;
		font-size: var(--hx-fs-xs);
	}
	.hx-mosaico__foto--1 .hx-mosaico__nombre {
		left: 0.75rem;
		bottom: 0.75rem;
		font-size: var(--hx-fs-sm);
	}
	.hx-hero3--mosaico .hx-hero3__tag {
		top: 0.75rem;
		left: 0.75rem;
		padding: 0.6rem 0.9rem 0.7rem;
		border-width: 3px;
	}
	.hx-hero3--mosaico .hx-hero3__tag strong {
		font-size: 1.35rem;
	}
}
@media (max-width: 420px) {
	.hx-mosaico__foto:not(.hx-mosaico__foto--1) .hx-mosaico__nombre::after {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * 6. CONTENIDO
 * Una columna de lectura de 740 px. Sin barra lateral.
 * ---------------------------------------------------------------- */
.hx-has-hero .site-content > .ast-container {
	max-width: calc(var(--hx-measure) + 2 * var(--hx-gutter));
	padding-inline: var(--hx-gutter);
}
.hx-has-hero.home .site-content > .ast-container {
	max-width: calc(860px + 2 * var(--hx-gutter));
}
/* Astra anula los márgenes con .ast-plain-container.ast-no-sidebar #primary:
 * hace falta más especificidad. */
body.hx-has-hero.ast-plain-container.ast-no-sidebar #primary {
	margin: var(--hx-space-2xl) 0;
	padding: 0;
	width: 100%;
}
.ast-plain-container .site-main > article {
	margin: 0;
	padding: 0;
}

.entry-content {
	font-size: 1.09rem;
	line-height: 1.8;
}
.entry-content > * + * {
	margin-top: 1.1em;
}
.entry-content p {
	margin-bottom: 0;
}
.entry-content > p:first-child {
	font-size: 1.2rem;
	line-height: 1.7;
	color: var(--hx-deep);
}
.entry-content h2 {
	margin-top: 2.4em;
	margin-bottom: 0.2em;
	font-size: var(--hx-fs-2xl);
	scroll-margin-top: 1.5rem;
}
.entry-content h2::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: 0.9rem;
	border-radius: 2px;
	background: var(--hx-denim);
}
.entry-content h3 {
	margin-top: 1.8em;
	font-size: var(--hx-fs-xl);
	color: var(--hx-deep);
}
.entry-content h4 {
	margin-top: 1.5em;
	font-size: var(--hx-fs-lg);
}
.entry-content strong {
	color: var(--hx-ink);
	font-weight: 700;
}
.entry-content a {
	color: var(--hx-slate);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(62, 92, 118, 0.35);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.entry-content a:hover {
	text-decoration-color: currentColor;
}

.entry-content ul,
.entry-content ol {
	margin-left: 0;
	padding-left: 0;
}
.entry-content ul > li {
	position: relative;
	list-style: none;
	padding-left: 1.75rem;
}
.entry-content ul > li + li,
.entry-content ol > li + li {
	margin-top: 0.5rem;
}
.entry-content ul > li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 0.72em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--hx-denim);
	transform: rotate(45deg);
}
.entry-content ol {
	counter-reset: hx;
}
.entry-content ol > li {
	position: relative;
	list-style: none;
	padding-left: 2.4rem;
	counter-increment: hx;
}
.entry-content ol > li::before {
	content: counter(hx);
	position: absolute;
	left: 0;
	top: 0.15em;
	display: grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--hx-deep);
	color: var(--hx-egg);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-xs);
	font-weight: 700;
}

.entry-content figure,
.entry-content .wp-block-image {
	margin-block: 2rem;
}
.entry-content img {
	border-radius: var(--hx-radius);
}
.entry-content figcaption {
	margin-top: 0.6rem;
	font-size: var(--hx-fs-sm);
	color: var(--hx-muted);
	text-align: center;
}

.entry-content blockquote,
.entry-content .wp-block-quote {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	border: 0;
	border-left: 4px solid var(--hx-slate);
	border-radius: 0 var(--hx-radius) var(--hx-radius) 0;
	background: var(--hx-egg);
	color: var(--hx-deep);
	font-style: normal;
}

.entry-content table,
.entry-content .wp-block-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius);
	background: #fff;
	font-size: var(--hx-fs-sm);
}
.entry-content th {
	background: var(--hx-deep);
	color: var(--hx-egg);
	font-family: var(--hx-font-display);
	text-align: left;
}
.entry-content :is(th, td) {
	padding: 0.75rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--hx-border);
}
.entry-content tr:nth-child(even) td {
	background: var(--hx-deep-50);
}
.entry-content .wp-block-table {
	overflow-x: auto;
}

/* Formularios (Fluent Forms en /contacto/) */
.entry-content :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1.5px solid var(--hx-border);
	border-radius: var(--hx-radius);
	background: #fff;
	color: var(--hx-ink);
	font: inherit;
	transition: border-color var(--hx-ease), box-shadow var(--hx-ease);
}
.entry-content :is(input, textarea, select):focus {
	outline: none;
	border-color: var(--hx-slate);
	box-shadow: 0 0 0 4px rgba(62, 92, 118, 0.18);
}

/* Navegación entre entradas y relacionados de Astra: los sustituyen los nuestros. */
.single .post-navigation,
.ast-single-related-posts-container {
	display: none;
}

/* ------------------------------------------------------------------
 * 6b. PÁGINAS DE PRODUCTO (inc/producto.php)
 * Impreso, pulido, fratasado, desactivado. Columna de lectura más ancha
 * (860 px) para que ficha, tablas y tarjetas respiren.
 * ---------------------------------------------------------------- */
.hx-producto.hx-has-hero .site-content > .ast-container {
	max-width: calc(860px + 2 * var(--hx-gutter));
}

/* Índice «En esta página» */
.hx-toc {
	margin: 2rem 0 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-lg);
	background: #fff;
}
.entry-content .hx-toc__title {
	margin: 0 0 0.6rem;
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hx-slate);
}
.entry-content .hx-toc ol {
	columns: 2 240px;
	column-gap: 2rem;
	margin: 0;
	font-size: var(--hx-fs-sm);
	line-height: 1.45;
}
.entry-content .hx-toc ol > li {
	break-inside: avoid;
	margin: 0 0 0.45rem;
	padding-left: 2rem;
}
.entry-content .hx-toc ol > li::before {
	top: 0;
	width: 1.45rem;
	height: 1.45rem;
	background: var(--hx-deep-50);
	color: var(--hx-slate);
	font-size: 0.7rem;
}
.entry-content .hx-toc a {
	color: var(--hx-deep);
	font-weight: 500;
	text-decoration: none;
}
.entry-content .hx-toc a:hover {
	color: var(--hx-slate);
	text-decoration: underline;
}

/* Ficha técnica: pares dato / valor */
.hx-ficha {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 2rem 0;
	overflow: hidden;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-lg);
	background: var(--hx-border);
}
.entry-content .hx-ficha > div {
	margin: 0;
	padding: 1rem 1.2rem;
	background: #fff;
}
.hx-ficha dt {
	margin: 0 0 0.2rem;
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hx-muted);
}
.hx-ficha dd {
	margin: 0;
	font-family: var(--hx-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--hx-ink);
}

@media (max-width: 640px) {
	.hx-ficha {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tarjetas de ventajas / usos */
.entry-content .hx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding: 0;
}
.entry-content .hx-grid > li {
	margin: 0;
	padding: 1.2rem 1.25rem 1.3rem;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-lg);
	background: #fff;
	box-shadow: var(--hx-shadow-sm);
	font-size: var(--hx-fs-sm);
	line-height: 1.6;
	color: var(--hx-muted);
}
.entry-content .hx-grid > li::before {
	display: none;
}
.entry-content .hx-grid strong {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--hx-font-display);
	font-size: 1.05rem;
	color: var(--hx-ink);
}
.entry-content .hx-grid--contras > li {
	border-left: 3px solid var(--hx-denim);
	box-shadow: none;
	background: var(--hx-paper);
}

/* Proceso en pasos (lista ordenada con clase hx-proceso) */
.entry-content ol.hx-proceso {
	margin: 1.5rem 0 0;
	counter-reset: hxp;
}
.entry-content ol.hx-proceso > li {
	counter-increment: hxp;
	position: relative;
	margin: 0;
	padding: 0 0 1.4rem 3.4rem;
}
.entry-content ol.hx-proceso > li + li {
	margin-top: 0;
}
.entry-content ol.hx-proceso > li::before {
	content: counter(hxp, decimal-leading-zero);
	top: 0;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 10px;
	background: var(--hx-ink);
	color: var(--hx-egg);
	font-size: 0.8rem;
}
/* Línea vertical que une los pasos */
.entry-content ol.hx-proceso > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(1.15rem - 1px);
	top: 2.6rem;
	bottom: 0.3rem;
	width: 2px;
	background: var(--hx-deep-100);
}
.entry-content ol.hx-proceso strong {
	display: block;
	font-family: var(--hx-font-display);
	font-size: 1.08rem;
	color: var(--hx-ink);
}

/* Tablas de precio y comparativa: clase en el bloque Tabla */
.entry-content .hx-tabla table {
	font-size: var(--hx-fs-sm);
}
.entry-content th a,
.entry-content th a:hover {
	color: var(--hx-egg);
	text-decoration-color: rgba(240, 235, 216, 0.45);
}
.entry-content .hx-tabla td:first-child {
	font-weight: 600;
	color: var(--hx-ink);
}
.entry-content .hx-tabla figcaption,
.entry-content .hx-nota {
	margin-top: 0.6rem;
	font-size: var(--hx-fs-xs);
	line-height: 1.5;
	color: var(--hx-muted);
	text-align: left;
}

/* Recuadro destacado (veredicto, consejo) */
.entry-content .hx-destacado {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem 1.35rem;
	border-radius: var(--hx-radius-lg);
	background: var(--hx-deep);
	color: var(--hx-denim-200);
}
.entry-content .hx-destacado p {
	margin: 0;
}
.entry-content .hx-destacado strong {
	color: var(--hx-egg);
}
.entry-content .hx-destacado a {
	color: var(--hx-egg);
}

/* Preguntas frecuentes: Grupo .hx-faq con bloques Detalles */
.entry-content .hx-faq .wp-block-group__inner-container > * + *,
.entry-content .hx-faq > * + * {
	margin-top: 0.6rem;
}
.entry-content .hx-faq details {
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius);
	background: #fff;
	transition: border-color var(--hx-ease);
}
.entry-content .hx-faq details[open] {
	border-color: var(--hx-denim);
}
.entry-content .hx-faq summary {
	position: relative;
	padding: 1rem 3rem 1rem 1.2rem;
	font-family: var(--hx-font-display);
	font-weight: 700;
	line-height: 1.4;
	color: var(--hx-ink);
	cursor: pointer;
	list-style: none;
}
.entry-content .hx-faq summary::-webkit-details-marker {
	display: none;
}
.entry-content .hx-faq summary::after {
	content: "+";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--hx-slate);
	transition: transform var(--hx-ease);
}
.entry-content .hx-faq details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}
.entry-content .hx-faq details > :not(summary) {
	margin: 0;
	padding: 0 1.2rem 1.1rem;
	font-size: var(--hx-fs-sm);
	line-height: 1.7;
	color: var(--hx-deep);
}

/* Guías relacionadas: lista de enlaces en tarjetas finas */
.entry-content ul.hx-guias {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0.6rem;
	margin: 1.25rem 0 0;
}
.entry-content ul.hx-guias > li {
	margin: 0;
	padding: 0;
}
.entry-content ul.hx-guias > li::before {
	display: none;
}
.entry-content ul.hx-guias a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	height: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius);
	background: #fff;
	color: var(--hx-ink);
	font-weight: 600;
	font-size: var(--hx-fs-sm);
	text-decoration: none;
	transition: border-color var(--hx-ease);
}
.entry-content ul.hx-guias a::after {
	content: "→";
	color: var(--hx-slate);
}
.entry-content ul.hx-guias a:hover {
	border-color: var(--hx-slate);
}

/* [hx_acabados]: tarjetas de producto (portada y donde se inserte) */
.entry-content ul.hx-acabados {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.75rem 0 0;
	padding: 0;
}
.entry-content ul.hx-acabados > li {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-lg);
	background: #fff;
	box-shadow: var(--hx-shadow-sm);
	transition: transform var(--hx-ease), box-shadow var(--hx-ease);
}
.entry-content ul.hx-acabados > li::before {
	display: none;
}
.entry-content ul.hx-acabados > li:hover,
.entry-content ul.hx-acabados > li:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--hx-shadow-md);
}
.entry-content .hx-acabado__img {
	width: 100%;
	aspect-ratio: 16 / 10;
	height: auto;
	object-fit: cover;
	border-radius: 0;
}
.hx-acabado__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1rem 1.1rem 1.15rem;
}
.hx-acabado__precio {
	align-self: flex-start;
	margin-bottom: 0.55rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--hx-egg);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	color: var(--hx-deep);
}
.entry-content h3.hx-acabado__title {
	margin: 0 0 0.35rem;
	font-size: 1.12rem;
}
.entry-content .hx-acabado__title a {
	color: var(--hx-ink);
	font-weight: 700;
	text-decoration: none;
}
.hx-acabado__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.entry-content .hx-acabado__uso {
	margin: 0 0 0.9rem;
	font-size: var(--hx-fs-sm);
	line-height: 1.5;
	color: var(--hx-muted);
}
.hx-acabado__more {
	margin-top: auto;
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-sm);
	font-weight: 700;
	color: var(--hx-slate);
}
.hx-acabado__more::after {
	content: " →";
}
@media (max-width: 760px) {
	.entry-content ul.hx-acabados {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 480px) {
	.entry-content ul.hx-acabados {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
 * 6c. SECCIONES DE PORTADA (inc/portada.php)
 * ---------------------------------------------------------------- */

/* Capas: sección esquemática a la izquierda, explicación a la derecha. */
.hx-capas {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: center;
	margin: 2rem 0 0;
}
.entry-content ol.hx-capas__stack {
	display: grid;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--hx-radius-lg);
	box-shadow: var(--hx-shadow-md);
	counter-reset: none;
}
.entry-content ol.hx-capas__stack > li {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 1rem;
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.entry-content ol.hx-capas__stack > li::before {
	display: none;
}
.entry-content ol.hx-capas__stack > li + li {
	margin-top: 0;
}
.hx-capa--acabado {
	height: 38px;
	background: linear-gradient(180deg, #d8d2bd, #c4bda5);
	color: var(--hx-ink);
}
.hx-capa--losa {
	height: 104px;
	background:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px) 0 0 / 22px 22px,
		radial-gradient(circle at 70% 60%, rgba(13, 19, 33, 0.18) 0 2px, transparent 3px) 0 0 / 28px 28px,
		#9aa3ad;
	color: var(--hx-ink);
}
/* El mallazo, dibujado como una línea de puntos dentro de la losa. */
.hx-capa--armado {
	height: 0;
	padding: 0 !important;
	overflow: visible;
}
.hx-capa--armado span {
	position: absolute;
	left: 1rem;
	right: 1rem;
	top: -40px;
	padding-top: 6px;
	border-top: 2px dashed var(--hx-deep);
	font-size: 0.65rem;
	color: var(--hx-deep);
}
.hx-capa--base {
	height: 80px;
	background:
		radial-gradient(circle at 30% 40%, #b59f7f 0 4px, transparent 5px) 0 0 / 18px 18px,
		radial-gradient(circle at 70% 70%, #8e7a5e 0 3px, transparent 4px) 0 0 / 14px 14px,
		#a8916f;
	color: #fff;
}
.hx-capa--terreno {
	height: 56px;
	background: linear-gradient(180deg, #6b5641, #54432f);
	color: var(--hx-egg);
}
/* Capas propias de cada acabado ([hx_capas acabado="…"]) */
.hx-capa--sellado {
	height: 22px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(214, 222, 232, 0.9));
	color: var(--hx-slate);
	font-size: 0.62rem !important;
}
.hx-capa--color {
	height: 40px;
	background:
		repeating-linear-gradient(90deg, transparent 0 46px, rgba(13, 19, 33, 0.28) 46px 49px),
		linear-gradient(180deg, #b86b4b, #9c5a3f);
	color: #fff;
}
.hx-capa--rodadura {
	height: 34px;
	background: linear-gradient(180deg, #eef1f4 0%, #c9d1d9 55%, #b3bcc6 100%);
	color: var(--hx-deep);
}
.hx-capa--arido {
	height: 44px;
	background:
		radial-gradient(circle at 25% 45%, #d9cfbd 0 5px, transparent 6px) 0 0 / 20px 20px,
		radial-gradient(circle at 70% 60%, #8f8474 0 4px, transparent 5px) 0 0 / 16px 16px,
		radial-gradient(circle at 50% 30%, #bfb29c 0 3px, transparent 4px) 0 0 / 12px 12px,
		#a39a8c;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.hx-capa--rayado {
	height: 36px;
	background:
		repeating-linear-gradient(90deg, #b9c0c8 0 7px, #8e979f 7px 9px);
	color: var(--hx-ink);
}
.hx-capa--rayado span {
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.8);
}
.hx-capa--drenante {
	height: 96px;
	background:
		radial-gradient(circle at 30% 35%, #aab2bb 0 7px, transparent 8px) 0 0 / 22px 22px,
		radial-gradient(circle at 75% 70%, #9aa3ad 0 7px, transparent 8px) 0 0 / 22px 22px,
		#2f3a47;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.hx-capa--grava {
	height: 92px;
	background:
		radial-gradient(circle at 30% 40%, #c7c1b4 0 9px, transparent 10px) 0 0 / 28px 28px,
		radial-gradient(circle at 75% 75%, #a9a293 0 8px, transparent 9px) 0 0 / 26px 26px,
		#6f695e;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.hx-capa--geotextil,
.hx-capa--lamina {
	height: 20px;
	font-size: 0.62rem !important;
}
.hx-capa--geotextil {
	background: repeating-linear-gradient(45deg, #e6e1d3 0 4px, #cfc8b6 4px 8px);
	color: var(--hx-ink);
}
.hx-capa--lamina {
	background: linear-gradient(180deg, #5b7a96, #45627d);
	color: #fff;
}

.hx-capas__list {
	display: grid;
	gap: 0.9rem;
	margin: 0;
}
.entry-content .hx-capas__list > div {
	margin: 0;
}
.hx-capas__list dt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.6rem;
	font-family: var(--hx-font-display);
	font-weight: 700;
	color: var(--hx-ink);
}
.hx-capas__list dt span {
	display: inline-grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--hx-deep);
	color: var(--hx-egg);
	font-size: 0.72rem;
}
.hx-capas__list dt small {
	font-family: var(--hx-font-body);
	font-size: var(--hx-fs-xs);
	font-weight: 600;
	color: var(--hx-slate);
}
.hx-capas__list dd {
	margin: 0.2rem 0 0 2.1rem;
	font-size: var(--hx-fs-sm);
	line-height: 1.55;
	color: var(--hx-muted);
}
@media (max-width: 760px) {
	.hx-capas {
		grid-template-columns: 1fr;
	}
}

/* Guías recientes */
.entry-content .hx-cards--home {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 1.5rem;
}
.entry-content .hx-cards--home a.hx-card {
	font-weight: 400;
	text-decoration: none;
}
.entry-content .hx-cards--home .hx-card__img {
	border-radius: 0;
}
@media (max-width: 760px) {
	.entry-content .hx-cards--home {
		grid-template-columns: 1fr;
	}
}
.entry-content .hx-more-link {
	margin-top: 1.25rem;
	text-align: right;
}
.entry-content .hx-more-link a::after {
	content: " →";
}

/* ------------------------------------------------------------------
 * 6d. PÁGINAS DE PRECIO (inc/precios.php)
 * ---------------------------------------------------------------- */

/* Tramos: tres tarjetas, la de mejor precio resaltada. */
.entry-content ol.hx-tramos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0.9rem;
	margin: 1.5rem 0 0;
	padding: 0;
}
.entry-content ol.hx-tramos > li {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	padding: 1.2rem 1.25rem 1.3rem;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-lg);
	background: #fff;
	box-shadow: var(--hx-shadow-sm);
}
.entry-content ol.hx-tramos > li::before {
	display: none;
}
.entry-content ol.hx-tramos > li + li {
	margin-top: 0;
}
.hx-tramo__rango {
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hx-slate);
}
.hx-tramo__precio {
	font-family: var(--hx-font-display);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--hx-ink);
	font-variant-numeric: tabular-nums;
}
.hx-tramo__precio small {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--hx-muted);
}
.hx-tramo__nota {
	font-size: var(--hx-fs-sm);
	color: var(--hx-muted);
}
.entry-content ol.hx-tramos > li.hx-tramo--mejor {
	border-color: var(--hx-deep);
	background: var(--hx-deep);
}
.hx-tramo--mejor .hx-tramo__rango {
	color: var(--hx-denim);
}
.hx-tramo--mejor .hx-tramo__precio {
	color: var(--hx-egg);
}
.hx-tramo--mejor :is(.hx-tramo__precio small, .hx-tramo__nota) {
	color: var(--hx-denim-200);
}
@media (max-width: 640px) {
	.entry-content ol.hx-tramos {
		grid-template-columns: 1fr;
	}
}

/* Presupuestos de ejemplo */
.hx-ejemplos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0.9rem;
	margin: 1.5rem 0 0;
}
.hx-ejemplo {
	padding: 1.2rem 1.25rem;
	border: 1px solid var(--hx-egg-600);
	border-radius: var(--hx-radius-lg);
	background: var(--hx-egg);
}
.entry-content .hx-ejemplo p {
	margin: 0;
}
.entry-content .hx-ejemplo__caso {
	font-family: var(--hx-font-display);
	font-weight: 700;
	color: var(--hx-ink);
}
.entry-content .hx-ejemplo__m2 {
	font-size: var(--hx-fs-xs);
	color: var(--hx-muted);
}
.entry-content .hx-ejemplo__total {
	margin-top: 0.6rem;
	font-family: var(--hx-font-display);
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--hx-deep);
	font-variant-numeric: tabular-nums;
}
.entry-content .hx-ejemplo__rango {
	font-size: var(--hx-fs-sm);
	color: var(--hx-deep);
}
.entry-content .hx-ejemplo__nota {
	margin-top: 0.5rem;
	font-size: var(--hx-fs-xs);
	line-height: 1.5;
	color: var(--hx-muted);
}

/* Reparto del precio: barra apilada y leyenda */
.hx-desglose {
	margin: 1.5rem 0 0;
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-lg);
	background: #fff;
}
.hx-desglose__bar {
	display: flex;
	height: 22px;
	overflow: hidden;
	border-radius: 999px;
}
.hx-desglose__seg--1 { background: var(--hx-ink); }
.hx-desglose__seg--2 { background: var(--hx-deep); }
.hx-desglose__seg--3 { background: var(--hx-slate); }
.hx-desglose__seg--4 { background: var(--hx-denim); }
.hx-desglose__seg--5 { background: #b9c6d6; }
.hx-desglose__seg--6 { background: var(--hx-egg-600); }
.hx-desglose__bar > span + span {
	border-left: 2px solid #fff;
}
.entry-content ul.hx-desglose__leg {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.8rem 1.5rem;
	margin: 1.2rem 0 0;
	padding: 0;
}
.entry-content ul.hx-desglose__leg > li {
	position: relative;
	margin: 0;
	padding-left: 1.4rem;
	font-size: var(--hx-fs-sm);
	line-height: 1.45;
}
.entry-content ul.hx-desglose__leg > li::before {
	display: none;
}
.hx-desglose__dot {
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 12px;
	height: 12px;
	border-radius: 3px;
}
.hx-desglose__leg strong {
	color: var(--hx-ink);
}
.hx-desglose__leg em {
	font-style: normal;
	font-weight: 700;
	color: var(--hx-slate);
}
.hx-desglose__leg small {
	display: block;
	color: var(--hx-muted);
	font-size: var(--hx-fs-xs);
}
@media (max-width: 640px) {
	.entry-content ul.hx-desglose__leg {
		grid-template-columns: 1fr;
	}
}

/* Índice de precios: mismas tarjetas que [hx_acabados] */
.entry-content ul.hx-acabados--precios .hx-acabado__precio {
	background: var(--hx-deep);
	color: var(--hx-egg);
}

/* ------------------------------------------------------------------
 * 6e. COMPARATIVAS (inc/comparativas.php)
 * «Hormigón X o Y»: tabla de dos columnas, ejemplos de precio, tarjetas
 * de las demás comparativas y tabla de los seis acabados (índice).
 * ---------------------------------------------------------------- */

/* Tabla X o Y: columnas iguales, celda ganadora resaltada. */
.entry-content .hx-cmp table {
	table-layout: fixed;
}
.entry-content .hx-cmp th:first-child,
.entry-content .hx-cmp td:first-child {
	width: 26%;
}
.entry-content .hx-cmp td.hx-cmp__mejor {
	background: var(--hx-deep-50);
	font-weight: 600;
	color: var(--hx-ink);
}
.entry-content .hx-cmp td.hx-cmp__mejor::before {
	content: "✓ ";
	color: var(--hx-slate);
	font-weight: 700;
}
.entry-content .hx-cmp--ejemplos td {
	font-variant-numeric: tabular-nums;
}
.entry-content .hx-cmp td small {
	color: var(--hx-muted);
	font-weight: 500;
}

/* Seis acabados: la tabla se desplaza dentro de su marco en móvil. */
.entry-content .hx-matriz table {
	table-layout: auto;
	min-width: 860px;
}
.entry-content .hx-matriz th:first-child,
.entry-content .hx-matriz td:first-child {
	width: auto;
	position: sticky;
	left: 0;
	z-index: 1;
}
.entry-content .hx-matriz td:first-child {
	background: #fff;
}
.hx-matriz__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.hx-matriz__scroll:focus-visible {
	outline: 2px solid var(--hx-slate);
	outline-offset: 2px;
}

/* Hero «cara a cara» (hormex_hero_cmp): banda oscura, título centrado y
   los dos acabados enfrentados, unidos por la «o» de la pregunta. Distinto
   a propósito del hero claro de las fichas: aquí la página es la duda. */
.hx-herocmp {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(40rem 22rem at 50% -10%, rgba(116, 140, 171, 0.35), transparent 70%),
		linear-gradient(180deg, var(--hx-ink) 0%, var(--hx-deep) 100%);
	color: var(--hx-egg);
}
.hx-herocmp__inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: clamp(2.25rem, 2rem + 2.5vw, 4rem) var(--hx-gutter) clamp(2.5rem, 2rem + 3vw, 4.5rem);
	text-align: center;
}
.hx-herocmp .hx-herocmp__migas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hx-denim-200);
}
.hx-herocmp .hx-herocmp__migas a {
	color: var(--hx-denim-200);
	text-decoration: none;
}
.hx-herocmp .hx-herocmp__migas a:hover {
	color: var(--hx-egg);
}
.hx-herocmp__title {
	max-width: 22ch;
	margin: 0.9rem auto 0;
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-hero);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--hx-egg);
}
.hx-herocmp__lead {
	max-width: 62ch;
	margin: 1rem auto 0;
	font-size: var(--hx-fs-lg);
	line-height: 1.55;
	color: var(--hx-denim-200);
}

/* Los dos lados */
.hx-herocmp__duelo {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2rem);
	margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
	text-align: left;
}
.hx-herocmp__lado {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(240, 235, 216, 0.14);
	border-radius: var(--hx-radius-lg);
	background: rgba(240, 235, 216, 0.05);
	box-shadow: var(--hx-shadow-lg);
}
.hx-herocmp__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.hx-herocmp__body {
	display: grid;
	gap: 0.35rem;
	padding: 1.1rem 1.35rem 1.35rem;
}
.hx-herocmp__precio {
	margin: 0;
	font-size: var(--hx-fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hx-denim-200);
}
.hx-herocmp__precio strong {
	font-family: var(--hx-font-display);
	font-size: 1.05rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hx-egg);
}
.hx-herocmp__precio span {
	letter-spacing: 0;
	text-transform: none;
	font-weight: 500;
}
.hx-herocmp .hx-herocmp__nombre {
	margin: 0;
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-xl);
	font-weight: 800;
	line-height: 1.15;
	color: var(--hx-egg);
}
.hx-herocmp__uso {
	margin: 0;
	font-size: var(--hx-fs-sm);
	line-height: 1.5;
	color: var(--hx-denim-200);
}
.hx-herocmp__link {
	margin-top: 0.35rem;
	font-weight: 700;
	font-size: var(--hx-fs-sm);
	color: var(--hx-egg);
	text-decoration: underline;
	text-decoration-color: rgba(240, 235, 216, 0.35);
	text-underline-offset: 3px;
}
.hx-herocmp__link:hover,
.hx-herocmp__link:focus {
	color: #fff;
	text-decoration-color: currentColor;
}
.hx-herocmp__link::after {
	content: " →";
}

/* La «o» entre los dos lados, a la altura de las fotos */
.hx-herocmp__o {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: calc((100% - 9rem) / 2);
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	transform: translate(-50%, -50%);
	border: 4px solid var(--hx-ink);
	border-radius: 50%;
	background: var(--hx-egg);
	color: var(--hx-ink);
	font-family: var(--hx-font-display);
	font-size: 1.6rem;
	font-weight: 800;
	font-style: italic;
	line-height: 1;
	box-shadow: var(--hx-shadow-md);
}

.hx-herocmp__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
}

@media (max-width: 720px) {
	.hx-herocmp__duelo {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
	.hx-herocmp__o {
		top: 50%;
		width: 52px;
		height: 52px;
		font-size: 1.3rem;
	}
	.hx-herocmp__lead {
		font-size: var(--hx-fs-base);
	}
}

/* Tarjetas «X o Y» */
.entry-content ul.hx-cmp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
}
.entry-content ul.hx-cmp-cards > li {
	margin: 0;
	padding: 0;
}
.entry-content ul.hx-cmp-cards > li::before {
	display: none;
}
.entry-content .hx-cmp-card a {
	display: grid;
	gap: 0.3rem;
	height: 100%;
	padding: 1rem 1.1rem 1.1rem;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-lg);
	background: #fff;
	box-shadow: var(--hx-shadow-sm);
	color: var(--hx-ink);
	text-decoration: none;
	transition: border-color var(--hx-ease), transform var(--hx-ease);
}
.entry-content .hx-cmp-card a:hover {
	border-color: var(--hx-slate);
	transform: translateY(-2px);
}
.hx-cmp-card__vs {
	font-family: var(--hx-font-display);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.hx-cmp-card__vs::first-letter {
	text-transform: uppercase;
}
.hx-cmp-card__vs em {
	font-style: normal;
	font-weight: 600;
	color: var(--hx-slate);
}
.hx-cmp-card__txt {
	font-size: var(--hx-fs-sm);
	color: var(--hx-muted);
}
.hx-cmp-card__txt::after {
	content: " →";
	color: var(--hx-slate);
}

@media (max-width: 640px) {
	.entry-content .hx-cmp:not(.hx-matriz) th:first-child,
	.entry-content .hx-cmp:not(.hx-matriz) td:first-child {
		width: 30%;
	}
	.entry-content .hx-cmp:not(.hx-matriz) table {
		font-size: var(--hx-fs-xs);
	}
}

/* ------------------------------------------------------------------
 * 6f. ZONAS (inc/zonas.php)
 * Tarjetas [hx_zonas]: nombre de la zona grande, municipios debajo.
 * ---------------------------------------------------------------- */
.entry-content ul.hx-zonas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 0.7rem;
	margin: 1.5rem 0 0;
	padding: 0;
}
.entry-content ul.hx-zonas > li {
	margin: 0;
	padding: 0;
}
.entry-content ul.hx-zonas > li::before {
	display: none;
}
.entry-content .hx-zona-card a {
	display: grid;
	gap: 0.25rem;
	height: 100%;
	padding: 0.95rem 1.05rem 1rem;
	border: 1px solid var(--hx-border);
	border-left: 4px solid var(--hx-slate);
	border-radius: var(--hx-radius);
	background: #fff;
	color: var(--hx-ink);
	text-decoration: none;
	transition: border-color var(--hx-ease), transform var(--hx-ease);
}
.entry-content .hx-zona-card a:hover {
	border-color: var(--hx-slate);
	transform: translateY(-2px);
}
.hx-zona-card__nombre {
	font-family: var(--hx-font-display);
	font-size: 1.1rem;
	font-weight: 800;
}
.hx-zona-card__nombre::after {
	content: " →";
	color: var(--hx-slate);
}
.hx-zona-card__txt {
	font-size: var(--hx-fs-xs);
	line-height: 1.45;
	color: var(--hx-muted);
}

/* Hero «local» de las zonas (hormex_hero_zona): claro como el de las fichas,
   pero con curvas de nivel de mapa, chincheta y una ficha de precio por m²
   en lugar de la foto con etiqueta. */
.hx-herozona {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		repeating-radial-gradient(ellipse at 88% 18%, transparent 0 26px, rgba(62, 92, 118, 0.07) 26px 27px),
		repeating-radial-gradient(ellipse at 8% 110%, transparent 0 34px, rgba(62, 92, 118, 0.05) 34px 35px),
		linear-gradient(180deg, var(--hx-egg) 0%, var(--hx-paper) 85%);
	color: var(--hx-ink);
}
.hx-herozona__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	max-width: var(--hx-container);
	margin: 0 auto;
	padding: clamp(2.25rem, 2rem + 2.5vw, 4rem) var(--hx-gutter) clamp(2.75rem, 2.5rem + 3vw, 4.75rem);
}
.hx-herozona .hx-herozona__migas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.1rem;
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hx-slate);
}
.hx-herozona .hx-herozona__migas a {
	color: var(--hx-slate);
	text-decoration: none;
}
.hx-herozona .hx-herozona__migas a:hover {
	color: var(--hx-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hx-herozona__pin {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.9rem;
	padding: 0.35rem 0.85rem 0.35rem 0.6rem;
	border-radius: 999px;
	background: var(--hx-deep);
	color: var(--hx-egg);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-sm);
	font-weight: 700;
}
.hx-herozona__pin svg {
	color: var(--hx-denim-200);
}
.hx-herozona__title {
	margin: 0 0 var(--hx-space-md);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-hero);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.025em;
	color: var(--hx-ink);
}
.hx-herozona__lead {
	max-width: 56ch;
	margin: 0;
	font-size: var(--hx-fs-lg);
	line-height: 1.55;
	color: var(--hx-deep);
}
.hx-herozona__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.6rem;
}

/* Municipios en pastillas */
.hx-herozona__pueblos {
	margin-top: 1.6rem;
}
.hx-herozona__pueblos-label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hx-slate);
}
.hx-herozona__pueblos ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hx-herozona__pueblos li {
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--hx-egg-600);
	border-radius: 999px;
	background: #fff;
	font-size: var(--hx-fs-sm);
	font-weight: 600;
	color: var(--hx-deep);
}
.hx-herozona__pueblos li.hx-herozona__mas {
	border-style: dashed;
	background: transparent;
	color: var(--hx-muted);
	font-weight: 500;
}

/* Ficha: foto con el nombre de la zona y precio por m² */
.hx-herozona__ficha {
	overflow: hidden;
	border-radius: var(--hx-radius-lg);
	background: #fff;
	box-shadow: var(--hx-shadow-md);
	border: 1px solid var(--hx-border);
}
.hx-herozona__foto {
	position: relative;
}
.hx-herozona__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.hx-herozona__foto::after {
	content: "";
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(180deg, transparent, rgba(13, 19, 33, 0.72));
}
.hx-herozona__zona {
	position: absolute;
	z-index: 1;
	left: 1.25rem;
	bottom: 0.9rem;
	font-family: var(--hx-font-display);
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.hx-herozona__precio {
	padding: 1.2rem 1.35rem 1.35rem;
}
.hx-herozona__label {
	margin: 0;
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hx-slate);
}
.hx-herozona__cifra {
	margin: 0.15rem 0 0;
	font-family: var(--hx-font-display);
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--hx-ink);
	font-variant-numeric: tabular-nums;
}
.hx-herozona__cifra small {
	font-size: 1rem;
	font-weight: 700;
	color: var(--hx-muted);
}
.hx-herozona__iva {
	margin: 0.35rem 0 0;
	font-size: var(--hx-fs-xs);
	color: var(--hx-muted);
}
.hx-herozona__tramos {
	display: grid;
	gap: 0;
	margin: 0.9rem 0 0;
	border-top: 1px solid var(--hx-border);
}
.hx-herozona__tramos > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--hx-border);
	font-size: var(--hx-fs-sm);
}
.hx-herozona__tramos dt {
	color: var(--hx-muted);
}
.hx-herozona__tramos dd {
	margin: 0;
	font-weight: 700;
	color: var(--hx-ink);
	font-variant-numeric: tabular-nums;
}
.hx-herozona__trust {
	display: grid;
	gap: 0.3rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--hx-fs-sm);
	color: var(--hx-deep);
}
.hx-herozona__trust li::before {
	content: "✓ ";
	color: var(--hx-slate);
	font-weight: 700;
}

@media (max-width: 921px) {
	.hx-herozona__inner {
		grid-template-columns: 1fr;
	}
	.hx-herozona__lead {
		font-size: var(--hx-fs-base);
	}
}

/* ------------------------------------------------------------------
 * 7. LISTADO DEL BLOG (Noticias, categorías, búsqueda)
 * Marcado: inc/listado.php. Filtros en píldoras, un artículo destacado
 * y una rejilla de tarjetas con la categoría sobre la imagen.
 * ---------------------------------------------------------------- */
:is(.blog, .archive, .search).hx-has-hero .site-content > .ast-container {
	max-width: calc(var(--hx-container) + 2 * var(--hx-gutter));
}
body.hx-has-hero.ast-plain-container.ast-no-sidebar #primary.hx-listado {
	width: 100%;
	margin: 0 0 var(--hx-space-2xl);
}

/* Filtros: píldoras sueltas, centradas; en móvil, una fila deslizable. */
.hx-filtros {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: var(--hx-space-xl) 0;
}
.hx-filtro {
	border: 1px solid var(--hx-border);
	background: #fff;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.95rem;
	border-radius: 999px;
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-sm);
	font-weight: 600;
	color: var(--hx-deep);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--hx-ease), color var(--hx-ease);
}
.hx-filtro span {
	display: inline-grid;
	place-items: center;
	min-width: 1.6rem;
	height: 1.35rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--hx-deep-50);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--hx-muted);
}
.hx-filtro:hover {
	background: var(--hx-deep-50);
	color: var(--hx-ink);
}
.hx-filtro.is-active {
	border-color: var(--hx-deep);
	background: var(--hx-deep);
	color: var(--hx-egg);
}
.hx-filtro.is-active span {
	background: rgba(240, 235, 216, 0.16);
	color: var(--hx-egg);
}
@media (max-width: 760px) {
	/* En móvil: una fila que se desliza, sin romper el ancho. */
	.hx-filtros {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		margin-inline: calc(-1 * var(--hx-gutter));
		padding: 0.25rem var(--hx-gutter);
		scrollbar-width: none;
	}
	.hx-filtros::-webkit-scrollbar {
		display: none;
	}
}

/* Tarjeta */
.hx-post {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-lg);
	background: #fff;
	box-shadow: var(--hx-shadow-sm);
	transition: transform var(--hx-ease), box-shadow var(--hx-ease), border-color var(--hx-ease);
}
.hx-post:hover,
.hx-post:focus-within {
	transform: translateY(-4px);
	border-color: var(--hx-deep-100);
	box-shadow: var(--hx-shadow-md);
}
.hx-post__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--hx-deep-50);
}
.hx-post__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hx-post:hover .hx-post__img {
	transform: scale(1.04);
}
.hx-post__cat {
	position: absolute;
	left: 0.9rem;
	top: 0.9rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: rgba(13, 19, 33, 0.78);
	backdrop-filter: blur(6px);
	color: var(--hx-egg);
	font-family: var(--hx-font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.hx-post__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.3rem 1.4rem 1.4rem;
}
.hx-post__title {
	margin: 0 0 0.6rem;
	font-size: 1.2rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.hx-post__title a {
	color: var(--hx-ink);
	text-decoration: none;
}
/* Toda la tarjeta es clicable a través del enlace del título. */
.hx-post__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.hx-post__title a:focus-visible {
	outline: none;
}
.hx-post:has(.hx-post__title a:focus-visible) {
	outline: 3px solid var(--hx-slate);
	outline-offset: 3px;
}
.hx-post__excerpt {
	display: -webkit-box;
	margin: 0 0 1.1rem;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: var(--hx-fs-sm);
	line-height: 1.6;
	color: var(--hx-muted);
}
.hx-post__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-sm);
	font-weight: 700;
	color: var(--hx-slate);
}
.hx-post__more::after {
	content: "→";
	transition: transform var(--hx-ease);
}
.hx-post:hover .hx-post__more::after {
	transform: translateX(4px);
}

/* Destacado: imagen y texto lado a lado. */
.hx-listado .site-main > .hx-post--featured {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	margin-bottom: 1.5rem;
}
.hx-post--featured .hx-post__media {
	aspect-ratio: auto;
	min-height: 340px;
}
.hx-post--featured .hx-post__body {
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 3rem);
}
.hx-post--featured .hx-eyebrow {
	margin-bottom: 0.9rem;
}
.hx-post--featured .hx-post__title {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
}
.hx-post--featured .hx-post__excerpt {
	-webkit-line-clamp: 4;
	font-size: var(--hx-fs-base);
}
.hx-post--featured .hx-post__more {
	margin-top: 0.5rem;
	align-self: flex-start;
	padding: 0.75rem 1.3rem;
	border-radius: 999px;
	background: var(--hx-deep);
	color: var(--hx-egg);
}
@media (max-width: 860px) {
	.hx-listado .site-main > .hx-post--featured {
		grid-template-columns: 1fr;
	}
	.hx-post--featured .hx-post__media {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}
}

.hx-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}
@media (max-width: 1023px) {
	.hx-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.hx-posts {
		grid-template-columns: 1fr;
	}
}

/* Paginación */
.hx-pagination {
	margin-top: var(--hx-space-xl);
}
.hx-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
}
.hx-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding: 0 0.6rem;
	border: 1px solid var(--hx-border);
	border-radius: 999px;
	background: #fff;
	color: var(--hx-deep);
	font-family: var(--hx-font-display);
	font-weight: 700;
	text-decoration: none;
	transition: background var(--hx-ease), color var(--hx-ease), border-color var(--hx-ease);
}
.hx-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}
.hx-pagination a.page-numbers:hover,
.hx-pagination .page-numbers.current {
	border-color: var(--hx-deep);
	background: var(--hx-deep);
	color: var(--hx-egg);
}

.hx-vacio {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--hx-space-xl) 0;
	text-align: center;
}
.hx-vacio p {
	color: var(--hx-muted);
}

/* ------------------------------------------------------------------
 * 8. BANDA DE PRESUPUESTO Y RELACIONADOS
 * ---------------------------------------------------------------- */
.hx-related {
	padding: var(--hx-space-2xl) var(--hx-gutter);
	border-top: 1px solid var(--hx-egg-600);
	background: var(--hx-egg);
}
.hx-related__inner {
	max-width: var(--hx-container);
	margin: 0 auto;
}
.hx-related__title {
	margin: 0 0 var(--hx-space-lg);
	font-size: var(--hx-fs-2xl);
}
.hx-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
}
.hx-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--hx-radius-lg);
	background: #fff;
	box-shadow: var(--hx-shadow-sm);
	color: var(--hx-ink);
	text-decoration: none;
	transition: transform var(--hx-ease), box-shadow var(--hx-ease);
}
.hx-card:hover,
.hx-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--hx-shadow-md);
	color: var(--hx-ink);
}
.hx-card__img {
	width: 100%;
	aspect-ratio: 16 / 10;
	height: auto;
	object-fit: cover;
}
.hx-card__body {
	display: grid;
	gap: 0.35rem;
	padding: 1.1rem 1.25rem 1.4rem;
}
.hx-card__meta {
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hx-muted);
}
.hx-card__title {
	font-family: var(--hx-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.hx-cta {
	padding: var(--hx-space-2xl) var(--hx-gutter);
	background:
		radial-gradient(40rem 20rem at 100% 0%, rgba(62, 92, 118, 0.6), transparent 60%),
		var(--hx-deep);
	color: var(--hx-egg);
}
.hx-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hx-space-lg);
	max-width: var(--hx-container);
	margin: 0 auto;
}
.hx-cta .hx-eyebrow {
	color: var(--hx-denim-200);
}
.hx-cta__title {
	margin: 0 0 0.5rem;
	font-size: var(--hx-fs-2xl);
	color: var(--hx-egg);
}
.hx-cta__lead {
	max-width: 52ch;
	margin: 0;
	color: var(--hx-denim-200);
}
.hx-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
/* Dentro del contenido ([hx_cta]) la banda se convierte en tarjeta. */
.entry-content .hx-cta {
	margin-block: 2.5rem;
	padding: 2rem;
	border-radius: var(--hx-radius-lg);
}
.entry-content .hx-cta a {
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * 9. PIE DE PÁGINA
 * Marcado: inc/footer.php. Fondo Ink, como el hero: la página abre y
 * cierra con la misma superficie. Columnas de acabados leídas del menú.
 * ---------------------------------------------------------------- */
.hx-footer {
	position: relative;
	background:
		radial-gradient(50rem 24rem at 100% 0%, rgba(62, 92, 118, 0.35), transparent 60%),
		var(--hx-ink);
	color: var(--hx-denim-200);
	padding: var(--hx-space-2xl) var(--hx-gutter) 0;
	font-size: var(--hx-fs-sm);
}
.hx-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--hx-slate), var(--hx-denim), var(--hx-egg));
}
.hx-footer__inner {
	max-width: var(--hx-container);
	margin: 0 auto;
}
.hx-footer a {
	color: var(--hx-denim-200);
	text-decoration: none;
	transition: color var(--hx-ease);
}
.hx-footer a:hover,
.hx-footer a:focus-visible {
	color: var(--hx-egg);
}
.hx-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hx-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 3fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-bottom: var(--hx-space-xl);
}
.hx-footer__logo img {
	display: block;
	width: 150px;
	height: auto;
	/* Logotipo oscuro sobre transparente: se aclara sobre Ink. */
	filter: brightness(0) invert(0.93) sepia(0.15);
}
.hx-footer__pitch {
	max-width: 34ch;
	margin: var(--hx-space-md) 0;
	line-height: 1.65;
}
.hx-footer .hx-footer__contact {
	display: grid;
	gap: 0.5rem;
	margin-bottom: var(--hx-space-lg);
}
.hx-footer__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--hx-egg);
	font-family: var(--hx-font-display);
	font-weight: 700;
	font-size: var(--hx-fs-base);
}
.hx-footer__contact svg {
	color: var(--hx-denim);
}
.hx-footer a.hx-btn--light,
.hx-footer a.hx-btn--light:hover {
	color: var(--hx-ink);
}

.hx-footer__nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--hx-space-lg);
}
.hx-footer__title {
	margin: 0 0 var(--hx-space-md);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hx-denim);
}
.hx-footer__col li + li {
	margin-top: 0.55rem;
}
.hx-footer__col a {
	line-height: 1.4;
}
/* «Todos los precios →», «Ver las 8 comparativas →»: el paso al índice. */
.hx-footer .hx-footer__more a {
	color: var(--hx-egg);
	font-weight: 600;
}
.hx-footer .hx-footer__more a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hx-footer__col .hx-footer__more {
	margin-top: 0.85rem;
}

/* Zonas: una franja en línea en lugar de una columna de doce enlaces. */
.hx-footer__zonas {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	padding: var(--hx-space-md) 0;
	border-top: 1px solid rgba(116, 140, 171, 0.18);
}
.hx-footer__zonas .hx-footer__title {
	margin: 0;
	white-space: nowrap;
}
.hx-footer .hx-footer__zonas ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0;
}
.hx-footer__zonas li:not(:last-child)::after {
	content: "·";
	margin: 0 0.6rem;
	color: rgba(116, 140, 171, 0.6);
}

.hx-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding: var(--hx-space-md) 0 calc(var(--hx-space-md) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid rgba(116, 140, 171, 0.18);
	font-size: var(--hx-fs-xs);
}
.hx-footer__legal p {
	margin: 0;
}
.hx-footer__legal {
	align-items: center;
}
/* Socios: una etiqueta y los nombres, nada más. */
.hx-footer__socios {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.9rem;
}
.hx-footer__socios span {
	font-family: var(--hx-font-display);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hx-denim);
}
.hx-footer .hx-footer__socios a {
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--hx-egg);
	text-decoration: underline;
	text-decoration-color: rgba(116, 140, 171, 0.5);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}
.hx-footer .hx-footer__socios a:hover {
	text-decoration-color: var(--hx-egg);
}

@media (max-width: 1100px) {
	.hx-footer__top {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 760px) {
	.hx-footer__nav {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 640px) {
	/* Hueco para la barra de contacto fija en móvil. */
	.hx-footer__legal {
		padding-bottom: 4.5rem;
	}
}

/* ------------------------------------------------------------------
 * 10. BARRA DE CONTACTO FLOTANTE (dock)
 * Marcado: inc/dock.php. Portada de beton-expert-fr § 8e.
 * Escritorio: cápsula Ink, un solo botón lleno (Eggshell), el teléfono
 * como enlace de texto, WhatsApp reducido a su pastilla verde.
 * Móvil: barra clara pegada al borde, botón Deep Space.
 * ---------------------------------------------------------------- */
.hx-dock {
	position: fixed;
	left: 50%;
	bottom: 22px;
	z-index: 9990;
	transform: translate(-50%, 140%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}
.hx-dock.is-on {
	transform: translate(-50%, 0);
	opacity: 1;
	pointer-events: auto;
}
.hx-dock__box {
	display: flex;
	align-items: center;
	gap: var(--hx-space-md);
	padding: 0.5rem 0.6rem 0.5rem 0.75rem;
	border: 1px solid rgba(116, 140, 171, 0.3);
	border-radius: 20px;
	background: rgba(13, 19, 33, 0.94);
	backdrop-filter: blur(10px);
	box-shadow: var(--hx-shadow-lg);
}
.hx-dock__intro {
	display: flex;
	align-items: center;
	gap: var(--hx-space-sm);
}
.hx-dock__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 10px;
	background: var(--hx-deep);
	color: var(--hx-denim-200);
}
.hx-dock__ico svg {
	width: 19px;
	height: 19px;
}
.hx-dock__txt {
	margin: 0;
	white-space: nowrap;
}
.hx-dock__txt b {
	display: block;
	color: var(--hx-egg);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-sm);
	font-weight: 700;
	line-height: 1.25;
}
.hx-dock__txt small {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--hx-denim-200);
	font-size: var(--hx-fs-xs);
	line-height: 1.3;
}
/* Punto «en línea». */
.hx-dock__txt small i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	animation: hx-dock-dot 2s infinite;
}
@keyframes hx-dock-dot {
	0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
	70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
	100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.hx-dock__acts {
	display: flex;
	align-items: center;
	gap: var(--hx-space-xs);
}
@media (min-width: 981px) {
	.hx-dock__acts {
		position: relative;
		padding-left: var(--hx-space-md);
	}
	.hx-dock__acts::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 1px;
		height: 30px;
		transform: translateY(-50%);
		background: rgba(116, 140, 171, 0.3);
	}
}
.hx-dock__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.65rem;
	border-radius: 10px;
	color: var(--hx-egg);
	font-size: var(--hx-fs-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--hx-ease), color var(--hx-ease);
}
.hx-dock__tel svg {
	width: 17px;
	height: 17px;
	flex: none;
	color: var(--hx-denim);
}
.hx-dock__tel:hover,
.hx-dock__tel:focus-visible {
	background: var(--hx-deep);
	color: #fff;
}
.hx-dock__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 10px;
	background: #25d366;
	color: #0a2e18;
	transition: background var(--hx-ease);
}
.hx-dock__wa svg {
	width: 21px;
	height: 21px;
}
.hx-dock__wa:hover,
.hx-dock__wa:focus-visible {
	background: #3ee87d;
	color: #0a2e18;
}
.hx-dock__go {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	height: 40px;
	padding: 0 1.2rem;
	border-radius: 10px;
	background: var(--hx-egg);
	color: var(--hx-ink);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-sm);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--hx-ease);
}
.hx-dock__go::after {
	content: "\2192";
	transition: transform var(--hx-ease);
}
.hx-dock__go:hover,
.hx-dock__go:focus-visible {
	background: #fff;
	color: var(--hx-ink);
}
.hx-dock__go:hover::after {
	transform: translateX(3px);
}
.hx-dock__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: none;
	margin-left: 0.15rem;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--hx-denim);
	cursor: pointer;
	transition: background var(--hx-ease), color var(--hx-ease);
}
.hx-dock__close svg {
	width: 15px;
	height: 15px;
}
.hx-dock__close:hover,
.hx-dock__close:focus-visible {
	background: var(--hx-deep);
	color: #fff;
}
@media (max-width: 980px) {
	.hx-dock__intro {
		display: none;
	}
	.hx-dock__box {
		gap: 0;
		padding-inline: 0.5rem;
	}
}
@media (max-width: 640px) {
	.hx-dock {
		left: 0;
		right: 0;
		bottom: 0;
		transform: translateY(120%);
	}
	.hx-dock.is-on {
		transform: translateY(0);
	}
	.hx-dock__box {
		gap: 0.35rem;
		padding: 0.3rem 0.45rem calc(0.3rem + env(safe-area-inset-bottom, 0px));
		border: 0;
		border-top: 1px solid var(--hx-egg-600);
		border-radius: 0;
		background: var(--hx-paper);
		box-shadow: 0 -10px 30px rgba(13, 19, 33, 0.12);
	}
	.hx-dock__acts {
		width: 100%;
		gap: 0.5rem;
	}
	.hx-dock__tel,
	.hx-dock__wa {
		width: 40px;
		height: 40px;
		justify-content: center;
		padding: 0;
		border: 1px solid var(--hx-egg-600);
		border-radius: var(--hx-radius);
		background: var(--hx-egg);
		color: var(--hx-deep);
	}
	.hx-dock__tel span {
		display: none;
	}
	.hx-dock__tel svg,
	.hx-dock__wa svg {
		width: 18px;
		height: 18px;
		color: inherit;
	}
	.hx-dock__wa {
		border-color: #1fa855;
		background: #25d366;
		color: #07321a;
	}
	.hx-dock__go {
		flex: 1 1 auto;
		justify-content: center;
		height: 40px;
		border-radius: var(--hx-radius);
		background: var(--hx-deep);
		color: var(--hx-egg);
	}
	.hx-dock__go:hover,
	.hx-dock__go:focus-visible {
		background: var(--hx-slate);
		color: #fff;
	}
	.hx-dock__close {
		width: 32px;
		height: 40px;
		margin-left: 0;
		color: var(--hx-muted);
	}
	.hx-dock__close:hover,
	.hx-dock__close:focus-visible {
		background: var(--hx-egg);
		color: var(--hx-ink);
	}
}

/* ------------------------------------------------------------------
 * 10b. PÁGINA DE CONTACTO
 * Modelo beton-expert-fr § 8c y durasol.es/contacto: el formulario es el
 * objeto principal, en una tarjeta blanca que monta sobre el hero; el
 * contacto directo va en un panel oscuro a la derecha, fijo al
 * desplazarse. Debajo: el proceso en tres pasos y los tipos de espacio.
 * ---------------------------------------------------------------- */
.hx-page-contacto.hx-has-hero .site-content > .ast-container {
	max-width: calc(var(--hx-container) + 2 * var(--hx-gutter));
}
body.hx-page-contacto.hx-has-hero.ast-plain-container.ast-no-sidebar #primary {
	position: relative;
	z-index: 2;
	margin-top: -5rem;
}
.hx-page-contacto .hx-hero {
	padding-bottom: calc(var(--hx-space-2xl) + 5rem);
}
.hx-page-contacto .entry-content > * + * {
	margin-top: var(--hx-space-2xl);
}

/* Con un tema clásico, cada Grupo lleva un div interior: se aplana para
 * que sus hijos entren en la rejilla. */
.hx-contact .wp-block-group__inner-container {
	display: contents;
}
/* Astra limita todo Grupo de primer nivel a 58em con márgenes automáticos. */
.hx-has-hero .entry-content > .wp-block-group {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding: 0;
}
.hx-contact,
.hx-contact * {
	box-sizing: border-box;
}
.hx-contact > *,
.hx-contact .wp-block-group__inner-container > * {
	min-width: 0;
}
@media (max-width: 480px) {
	.entry-content .hx-contact__form {
		padding: 1.25rem 1rem;
	}
}
.hx-contact {
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: var(--hx-space-lg);
	align-items: start;
}
.entry-content .hx-contact > * + * {
	margin-top: 0;
}

/* Formulario */
.entry-content .hx-contact__form {
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-lg);
	background: #fff;
	box-shadow: var(--hx-shadow-lg);
}
.entry-content .hx-contact__form > * + * {
	margin-top: 0;
}
.entry-content .hx-contact__form > p.hx-eyebrow {
	margin-bottom: 0.75rem;
	color: var(--hx-slate);
}
.entry-content .hx-contact__form h2 {
	margin: 0;
	font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.2rem);
}
.entry-content .hx-contact__form h2::before {
	display: none;
}
.entry-content .hx-contact__intro {
	margin: 0.6rem 0 2rem;
	font-size: var(--hx-fs-base);
	color: var(--hx-muted);
}

/* Fluent Forms: dos columnas para los campos cortos. */
.hx-contact .ff-el-group {
	margin-bottom: 1.1rem;
}
.hx-contact .ff-el-input--label label {
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-sm);
	font-weight: 600;
	color: var(--hx-deep);
}
.hx-contact .ff-el-form-control {
	min-height: 52px;
	border-color: var(--hx-deep-100) !important;
	background: var(--hx-paper) !important;
}
.hx-contact .ff-el-form-control:focus {
	background: #fff !important;
}
.hx-contact textarea.ff-el-form-control {
	min-height: 140px;
}
.hx-contact .ff-btn-submit {
	width: 100%;
	min-height: 56px;
	font-size: var(--hx-fs-base) !important;
}
@media (min-width: 700px) {
	.hx-contact form.frm-fluent-form fieldset {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1rem;
	}
	.hx-contact form.frm-fluent-form fieldset > * {
		grid-column: 1 / -1;
	}
	.hx-contact form.frm-fluent-form fieldset > .ff-el-group:nth-of-type(-n+4) {
		grid-column: auto;
	}
}

/* Columna lateral: dos tarjetas claras, como el formulario. Una
 * oscura se fundía con el hero, que también es oscuro, justo donde
 * ambos se tocan. */
.hx-side {
	position: sticky;
	top: 1.5rem;
	display: grid;
	gap: 1rem;
}
.entry-content .hx-side > * + *,
.entry-content .hx-side__card > * + * {
	margin-top: 0;
}
.hx-side__card {
	padding: 1.5rem;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-lg);
	background: #fff;
	box-shadow: var(--hx-shadow-lg);
}
.hx-side__card--egg {
	border-color: var(--hx-egg-600);
	background: var(--hx-egg);
	box-shadow: none;
}
.entry-content .hx-side__title {
	margin: 0;
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-lg);
	font-weight: 700;
	line-height: 1.25;
	color: var(--hx-ink);
}
.entry-content .hx-side__sub {
	margin: 0.3rem 0 1.1rem;
	font-size: var(--hx-fs-sm);
	color: var(--hx-muted);
}

/* Canal: icono, texto, flecha. Toda la fila es el enlace. */
.entry-content a.hx-chan {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--hx-border);
	border-radius: 12px;
	background: var(--hx-paper);
	color: var(--hx-ink);
	font-weight: 400;
	text-decoration: none;
	transition: border-color var(--hx-ease), background var(--hx-ease), transform var(--hx-ease);
}
.entry-content a.hx-chan + a.hx-chan {
	margin-top: 0.6rem;
}
.entry-content a.hx-chan:hover,
.entry-content a.hx-chan:focus-visible {
	border-color: var(--hx-slate);
	background: #fff;
	color: var(--hx-ink);
	transform: translateY(-1px);
}
.hx-chan__ico {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 10px;
	background: var(--hx-deep);
	color: var(--hx-egg);
}
.hx-chan__ico svg {
	width: 20px;
	height: 20px;
}
.hx-chan--wa .hx-chan__ico {
	background: #25d366;
	color: #07321a;
}
.hx-chan--wa .hx-chan__ico svg {
	width: 22px;
	height: 22px;
}
.hx-chan__txt {
	display: grid;
	flex: 1;
	line-height: 1.25;
}
.hx-chan__txt small {
	font-size: var(--hx-fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hx-muted);
}
.hx-chan__txt strong {
	font-family: var(--hx-font-display);
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--hx-ink);
}
.hx-chan__go {
	font-size: 1.1rem;
	color: var(--hx-slate);
	transition: transform var(--hx-ease);
}
.hx-chan:hover .hx-chan__go {
	transform: translateX(3px);
}

.entry-content ul.hx-side__checks {
	display: grid;
	gap: 0.75rem;
	margin: 1rem 0 0;
	font-size: var(--hx-fs-sm);
	line-height: 1.5;
	color: var(--hx-deep);
}
.entry-content ul.hx-side__checks > li {
	margin: 0;
	padding-left: 1.85rem;
}
.entry-content ul.hx-side__checks > li::before {
	left: 0;
	top: 0.1em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	transform: none;
	background: var(--hx-deep)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0EBD8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
		center / 11px no-repeat;
}
@media (max-width: 921px) {
	.hx-side {
		position: static;
	}
}
@media (max-width: 480px) {
	.hx-side__card {
		padding: 1.25rem 1rem;
	}
}

/* Pasos */
.hx-steps {
	text-align: center;
}
.entry-content .hx-steps h2,
.entry-content .hx-usos h2 {
	margin: 0 auto;
	max-width: 22ch;
	font-size: var(--hx-fs-2xl);
	text-wrap: balance;
}
.entry-content .hx-steps h2::before,
.entry-content .hx-usos h2::before {
	display: none;
}
.hx-steps .hx-eyebrow::after {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
}
.entry-content ol.hx-steps__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin: var(--hx-space-xl) 0 0;
	text-align: left;
	counter-reset: none;
}
/* Línea que une los tres pasos. */
.entry-content ol.hx-steps__list::before {
	content: "";
	position: absolute;
	top: 2.4rem;
	left: 12%;
	right: 12%;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--hx-denim) 0 8px, transparent 8px 16px);
	opacity: 0.5;
}
.entry-content ol.hx-steps__list > li {
	position: relative;
	margin: 0;
	padding: 1.5rem 1.5rem 1.75rem;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-lg);
	background: #fff;
	box-shadow: var(--hx-shadow-sm);
}
.entry-content ol.hx-steps__list > li::before {
	display: none;
}
.hx-steps__n {
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	margin-bottom: 1.1rem;
	border-radius: 14px;
	background: var(--hx-ink);
	color: var(--hx-egg);
	font-family: var(--hx-font-display);
	font-size: 1.1rem;
	font-weight: 800;
}
.entry-content .hx-steps__list h3 {
	margin: 0 0 0.4rem;
	font-size: var(--hx-fs-lg);
	color: var(--hx-ink);
}
.entry-content .hx-steps__list p {
	margin: 0;
	font-size: var(--hx-fs-sm);
	line-height: 1.6;
	color: var(--hx-muted);
}

/* Tipos de espacio */
.hx-usos {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: var(--hx-space-xl);
	align-items: center;
	padding: clamp(1.75rem, 4vw, 3.25rem);
	border: 1px solid var(--hx-egg-600);
	border-radius: var(--hx-radius-lg);
	background: var(--hx-egg);
}
.entry-content .hx-usos h2 {
	margin: 0;
	text-align: left;
}
.entry-content .hx-usos__head p:last-child {
	margin: 0.75rem 0 0;
	color: var(--hx-muted);
	font-size: var(--hx-fs-base);
}
.entry-content ul.hx-usos__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0.75rem;
	margin: 0;
}
.entry-content ul.hx-usos__list > li {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 1rem 1.1rem 1rem 1.1rem;
	border-left: 3px solid var(--hx-slate);
	border-radius: 0 var(--hx-radius) var(--hx-radius) 0;
	background: #fff;
	box-shadow: var(--hx-shadow-sm);
}
.entry-content ul.hx-usos__list > li::before {
	display: none;
}
.hx-usos__list strong {
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-base);
}
.hx-usos__list span {
	font-size: var(--hx-fs-sm);
	line-height: 1.45;
	color: var(--hx-muted);
}

@media (max-width: 921px) {
	.hx-contact,
	.hx-usos {
		grid-template-columns: 1fr;
	}
	.entry-content ol.hx-steps__list {
		grid-template-columns: 1fr;
	}
	.entry-content ol.hx-steps__list::before {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * 10c. VISOR DE IMÁGENES (assets/lightbox.js)
 * ---------------------------------------------------------------- */
.hx-zoomable {
	cursor: zoom-in;
}
.hx-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-rows: auto 1fr auto;
	background: rgba(13, 19, 33, 0.97);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.hx-lb.is-open {
	opacity: 1;
}
.hx-lb[hidden] {
	display: none;
}
.hx-lb__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	color: var(--hx-denim-200);
	font-size: var(--hx-fs-sm);
	font-variant-numeric: tabular-nums;
}
.hx-lb__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 0;
	padding: 0 clamp(0.5rem, 6vw, 5rem);
}
.hx-lb__img {
	max-width: 100%;
	max-height: calc(100vh - 9rem);
	width: auto;
	height: auto;
	border-radius: var(--hx-radius);
	box-shadow: var(--hx-shadow-lg);
	user-select: none;
}
.hx-lb__cap {
	margin: 0;
	padding: 0.75rem 1rem 1.25rem;
	text-align: center;
	color: var(--hx-egg);
	font-size: var(--hx-fs-sm);
	min-height: 1.5em;
}
.hx-lb button {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(116, 140, 171, 0.35);
	border-radius: 50%;
	background: rgba(29, 45, 68, 0.8);
	color: var(--hx-egg);
	cursor: pointer;
	transition: background var(--hx-ease), border-color var(--hx-ease);
}
.hx-lb button:hover,
.hx-lb button:focus-visible {
	background: var(--hx-slate);
	border-color: var(--hx-denim);
}
.hx-lb button svg {
	width: 20px;
	height: 20px;
}
.hx-lb__prev,
.hx-lb__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.hx-lb__prev {
	left: clamp(0.5rem, 2vw, 1.5rem);
}
.hx-lb__next {
	right: clamp(0.5rem, 2vw, 1.5rem);
}
.hx-lb--single .hx-lb__prev,
.hx-lb--single .hx-lb__next,
.hx-lb--single .hx-lb__count {
	visibility: hidden;
}
@media (max-width: 640px) {
	.hx-lb button {
		width: 40px;
		height: 40px;
	}
}

/* ------------------------------------------------------------------
 * 10d. CALCULADORAS (Calculated Fields Form)
 * Portado de beton-expert-fr § 8i. Masters: scripts/calculators/ · tema: inc/calculadora.php.
 * Comentarios originales en francés conservados.
 * Masters : scripts/calculators/ · insertion : inc/prix.php.
 * Architecture : docs/calculators.md.
 *
 * Les formulaires sont produits par Calculated Fields Form. Leur
 * balisage est construit en JavaScript et n'est donc pas modifiable :
 *
 *   form.cff-form.cp_cff_18
 *     #fbuilder > #fbuilder_N > #fieldlist_N.top_aligned > div.pbreak.pb0
 *       div.fields.<nos classes>.<fieldnameN>.cff-<type>-field
 *         label + div.dfield > (input|select) + span.uh
 *
 * Quatre conséquences, qui expliquent tout ce qui suit :
 *
 *   1. La liste de champs est plate : aucun conteneur n'entoure les
 *      résultats, donc pas de « panneau » possible. Chaque résultat
 *      porte lui-même sa mise en forme, et une grille à six colonnes
 *      recompose la page à partir des seules classes que nous posons
 *      sur les champs (calc-input, calc-result--tile, calc-result--line…).
 *   2. Un résultat est un <input readonly>. On lui retire donc tout
 *      l'habillage du champ de saisie pour qu'il se lise comme un
 *      chiffre et non comme quelque chose à remplir.
 *   3. Les feuilles du plugin ciblent « #fbuilder … », donc avec un
 *      identifiant. Nos règles doivent le reprendre, sinon elles
 *      perdent la cascade malgré deux classes. D'où le préfixe
 *      « .hx-calc .cp_cff_18 #fbuilder » répété partout : il n'est pas
 *      décoratif, c'est la condition pour que la règle s'applique.
 *   4. Le calcul se déclenche au clic (evalequations = 0, voir
 *      scripts/calculators/lib.php). Tant que la saisie n'a pas été
 *      validée, la classe « hx-calc--done » est absente du formulaire
 *      et toute la partie résultats reste masquée : le bloc s'ouvre
 *      en formulaire court, et le budget est une réponse, pas un
 *      compteur qui défile pendant la frappe.
 *
 * Le gabarit visuel du plugin (« Template 18 ») est repris plutôt que
 * combattu : il déclare ses couleurs en variables CSS, qu'il suffit de
 * redéfinir sur le formulaire pour qu'il adopte la palette maison.
 * Seules les valeurs qu'il écrit en dur — la police, les bordures des
 * champs — demandent une surcharge.
 * ---------------------------------------------------------------- */

.hx-calc {
	margin-block: var(--hx-space-lg);
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-lg);
	background-color: var(--hx-surface);
	box-shadow: var(--hx-shadow-sm);
	overflow: hidden;
}

/* --- L'en-tête ---
 * Un formulaire qui s'ouvre sur « Votre projet » ne dit pas ce qu'il fait.
 * Cette bande l'annonce avant la première question : de quoi il s'agit,
 * sur quelle finition, et ce qu'on obtient en échange de deux réponses.
 * Structure : inc/prix.php, beton_expert_calculateur_entete().
 */
.hx-calc__head {
	padding: clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.25rem, 3vw, 2rem);
	background-color: var(--hx-deep);
	color: var(--hx-egg);
}

.hx-calc__eyebrow {
	margin: 0;
	color: var(--hx-egg-600);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.entry-content .hx-calc__title,
.hx-calc__title {
	margin: var(--hx-space-2xs) 0 0;
	color: #fff;
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.entry-content .hx-calc__lead,
.hx-calc__lead {
	margin: var(--hx-space-xs) 0 0;
	color: rgba(247, 244, 241, 0.82);
	font-size: var(--hx-fs-sm);
	line-height: 1.6;
	max-width: 62ch;
}


/* --- Le cadre --- */

.hx-calc form.cff-form {
	/* Marque et action */
	--cff-18-color-brand-500: var(--hx-slate);
	--cff-18-color-brand-600: var(--hx-slate-700);
	--cff-18-color-brand-700: var(--hx-slate-700);
	--cff-18-shadow-focus: 0 0 0 4px rgba(62, 92, 118, 0.18);

	/* Surfaces et texte */
	--cff-18-color-surface-base: var(--hx-surface);
	--cff-18-color-surface-sunken: var(--hx-paper);
	--cff-18-color-text-primary: var(--hx-ink);
	--cff-18-color-text-secondary: var(--hx-muted);
	--cff-18-color-text-tertiary: var(--hx-muted);
	--cff-18-color-border-default: var(--hx-border);
	--cff-18-color-border-strong: var(--hx-egg-600);
	--cff-18-color-border-focus: var(--hx-slate);

	/* Formes */
	--cff-18-radius-sm: var(--hx-radius);
	--cff-18-radius-md: var(--hx-radius);
	--cff-18-radius-lg: var(--hx-radius-lg);
	--cff-18-font-family: var(--hx-font-body);

	/* Rouge des erreurs : celui de la page contact (section 8c). */
	--hx-error: #a3301f;

	position: relative;
	margin: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 0;
	background-color: var(--hx-surface);
}

/* Le gabarit impose sa pile de polices système en dur, sans passer par
 * sa propre variable : sans cette reprise, le calculateur serait le
 * seul bloc de la page à ne pas être en Plus Jakarta Sans. */
.hx-calc .cp_cff_18 #fbuilder * {
	font-family: inherit;
}

/* Éléments de service : ils occupent une cellule de la grille sans
 * rien afficher. Le « clearer » du plugin est déclaré en display:block
 * derrière un identifiant, d'où la reprise complète du sélecteur. */
.hx-calc .cp_cff_18 #fbuilder .cpefb_error,
.hx-calc .cp_cff_18 #fbuilder .clearer,
.hx-calc .cp_cff_18 #fbuilder .cpcaptchalayer,
.hx-calc .cp_cff_18 #fbuilder [id^="formheader_"]:empty {
	display: none;
}

/* --- La grille ---
 * Six colonnes : un champ de saisie en occupe trois (deux par ligne),
 * une tuile de résultat deux (trois par ligne), une ligne de détail
 * trois, un titre de section les six. Une seule grille sert ainsi
 * trois rythmes sans conteneur intermédiaire.
 */
.hx-calc .cp_cff_18 #fbuilder .pbreak.pb0 {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--hx-space-md);
	align-items: start;
}

.hx-calc .cp_cff_18 #fbuilder .fields {
	grid-column: span 6;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.hx-calc .cp_cff_18 #fbuilder .fields.calc-input {
	grid-column: span 3;
}

.hx-calc .cp_cff_18 #fbuilder .fields.calc-result--tile {
	grid-column: span 3;
}

.hx-calc .cp_cff_18 #fbuilder .fields.calc-result--key {
	grid-column: span 6;
}

.hx-calc .cp_cff_18 #fbuilder .fields.calc-result--line {
	grid-column: span 2;
}

.hx-calc .cp_cff_18 #fbuilder .dfield {
	padding-top: 0;
}

/* --- Titres de section --- */

.hx-calc .cp_cff_18 #fbuilder .section_break {
	display: none;
}

.hx-calc .cp_cff_18 #fbuilder .calc-section > label {
	display: block;
	margin: 0;
	color: var(--hx-deep);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Le titre des résultats ouvre la seconde moitié du bloc : il porte
 * donc le filet, là où celui de la saisie n'en a pas besoin. */
.hx-calc .cp_cff_18 #fbuilder .calc-section--result {
	margin-top: var(--hx-space-sm);
	padding-top: var(--hx-space-lg);
	border-top: 1px solid var(--hx-border);
}

/* La mention finale n'est pas un titre de section mais une réserve :
 * elle en prend l'apparence, en bas et en petit. */
.hx-calc .cp_cff_18 #fbuilder .calc-section--note > label {
	color: var(--hx-muted);
	font-family: var(--hx-font-body);
	font-size: var(--hx-fs-xs);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* --- Champs de saisie --- */

.hx-calc .cp_cff_18 #fbuilder .fields > label {
	display: block;
	margin-bottom: var(--hx-space-2xs);
	color: var(--hx-ink);
	font-size: var(--hx-fs-sm);
	font-weight: 600;
	line-height: 1.4;
}

/* Les champs sont tous indispensables et le formulaire ne s'envoie
 * jamais : l'astérisque n'apprend rien et alourdit le libellé. */
.hx-calc .cp_cff_18 #fbuilder .fields > label .r {
	display: none;
}

.hx-calc .cp_cff_18 #fbuilder .calc-input input,
.hx-calc .cp_cff_18 #fbuilder .calc-input select {
	width: 100%;
	max-width: 100%;
	min-height: 52px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius);
	background-color: var(--hx-surface);
	color: var(--hx-ink);
	font-size: var(--hx-fs-base);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	transition: border-color var(--hx-ease), box-shadow var(--hx-ease);
}

/* La flèche de la liste déroulante est une image de fond posée à
 * droite par le gabarit : on lui laisse sa place. */
.hx-calc .cp_cff_18 #fbuilder .calc-input select {
	padding-right: 2.25rem;
}

.hx-calc .cp_cff_18 #fbuilder .calc-input input:hover,
.hx-calc .cp_cff_18 #fbuilder .calc-input select:hover {
	border-color: var(--hx-egg-600);
}

.hx-calc .cp_cff_18 #fbuilder .calc-input input:focus,
.hx-calc .cp_cff_18 #fbuilder .calc-input select:focus {
	outline: none;
	border-color: var(--hx-slate);
	box-shadow: 0 0 0 4px rgba(62, 92, 118, 0.18);
}

/* Aide sous le champ : elle porte la précision qui évite un appel —
 * elle reste donc lisible, et non en gris clair et en italique comme
 * le gabarit la pose. */
.hx-calc .cp_cff_18 #fbuilder span.uh {
	display: block;
	margin-top: var(--hx-space-2xs);
	color: var(--hx-muted);
	font-size: var(--hx-fs-xs);
	font-style: normal;
	line-height: 1.5;
}

.hx-calc .cp_cff_18 #fbuilder span.uh:empty {
	display: none;
}

/* --- Saisie refusée ---
 * La validation tourne au clic (lib.php, BE_CALC_VALIDATION) : c'est
 * le seul moment où le visiteur attend un verdict.
 */
.hx-calc .cp_cff_18 #fbuilder .hx-invalid input {
	border-color: var(--hx-error);
	background-color: #fdf5f3;
}

.hx-calc .cp_cff_18 #fbuilder .hx-calc__error {
	display: block;
	margin-top: var(--hx-space-2xs);
	color: var(--hx-error);
	font-size: var(--hx-fs-xs);
	font-weight: 600;
	line-height: 1.5;
}

/* --- Le bouton --- */

.hx-calc .cp_cff_18 #fbuilder .fields.calc-action {
	grid-column: span 3;
	align-self: start;
	margin-top: 1.6rem;
}

.hx-calc .cp_cff_18 #fbuilder .calc-action input,
.hx-calc .cp_cff_18 #fbuilder .calc-devis input {
	display: inline-flex;
	width: auto;
	min-height: 52px;
	padding: 0.85rem 1.75rem;
	border: 1px solid var(--hx-deep);
	border-radius: var(--hx-radius);
	background-color: var(--hx-deep);
	color: #fff;
	font-family: var(--hx-font-body);
	font-size: var(--hx-fs-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color var(--hx-ease), border-color var(--hx-ease),
		transform var(--hx-ease), box-shadow var(--hx-ease);
}

.hx-calc .cp_cff_18 #fbuilder .calc-action input:hover,
.hx-calc .cp_cff_18 #fbuilder .calc-action input:focus,
.hx-calc .cp_cff_18 #fbuilder .calc-devis input:hover,
.hx-calc .cp_cff_18 #fbuilder .calc-devis input:focus {
	background-color: var(--hx-slate);
	border-color: var(--hx-slate);
	transform: translateY(-1px);
	box-shadow: var(--hx-shadow-sm);
}

.hx-calc .cp_cff_18 #fbuilder .calc-action input:active,
.hx-calc .cp_cff_18 #fbuilder .calc-devis input:active {
	transform: translateY(0);
	box-shadow: none;
}

/* --- Résultats ---
 * Masqués tant que le calcul n'a pas été demandé : le bloc s'ouvre en
 * formulaire court, et ce qui apparaît après le clic est une réponse.
 */
.hx-calc form.cff-form:not(.hx-calc--done) #fbuilder .fields.calc-section--result,
.hx-calc form.cff-form:not(.hx-calc--done) #fbuilder .fields.calc-section--note,
.hx-calc form.cff-form:not(.hx-calc--done) #fbuilder .fields.calc-section--avertissement,
.hx-calc form.cff-form:not(.hx-calc--done) #fbuilder .fields.calc-result,
.hx-calc form.cff-form:not(.hx-calc--done) #fbuilder .fields.calc-devis {
	display: none;
}

.hx-calc .cff-form.hx-calc--done .calc-section--result,
.hx-calc .cff-form.hx-calc--done .calc-result,
.hx-calc .cff-form.hx-calc--done .calc-section--avertissement,
.hx-calc .cff-form.hx-calc--done .calc-devis {
	animation: hx-calc-apparition 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes hx-calc-apparition {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

/* --- Le montant ---
 * Trois boîtes de même taille ne disent pas laquelle compte. Ici la carte
 * du montant moyen prend toute la largeur, et les deux bornes se partagent
 * la ligne du dessous : le lecteur voit un chiffre, puis sa fourchette.
 *
 * La tranche retenue est collée au-dessus de la carte, comme son bandeau
 * de titre — la marge négative annule la gouttière de la grille. Elle dit
 * d'où vient le montant, et reste la seule sortie qui parle encore au-delà
 * de la surface de métré.
 */
.hx-calc .cp_cff_18 #fbuilder .fields.calc-result--chip {
	display: flex;
	align-items: baseline;
	gap: var(--hx-space-2xs) var(--hx-space-sm);
	padding: var(--hx-space-xs) var(--hx-space-md);
	border-radius: var(--hx-radius);
	background-color: var(--hx-paper);
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--chip > label,
.hx-calc .cp_cff_18 #fbuilder .calc-result--key > label,
.hx-calc .cp_cff_18 #fbuilder .calc-result--borne > label,
.hx-calc .cp_cff_18 #fbuilder .calc-result--line > label {
	flex: 0 1 auto;
	width: auto;
	min-width: 0;
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--chip > label {
	margin: 0;
	color: var(--hx-muted);
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--chip .dfield {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--chip input {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hx-deep);
	font-size: var(--hx-fs-sm);
	font-weight: 700;
	text-overflow: ellipsis;
}

/* La carte du montant : libellé à gauche, chiffre à droite, sur la ligne
 * de base — c'est la lecture d'un total. */
.hx-calc .cp_cff_18 #fbuilder .calc-result--key {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hx-space-xs) var(--hx-space-md);
	padding: var(--hx-space-md) var(--hx-space-lg);
	border: 1px solid var(--hx-deep);
	border-radius: var(--hx-radius-lg);
	background-color: var(--hx-deep);
	box-shadow: var(--hx-shadow-sm);
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--key > label {
	margin: 0;
	color: rgba(247, 244, 241, 0.8);
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--key .dfield {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	text-align: right;
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--key input {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-2xl);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Les deux bornes : même forme, moitié moins de poids. */
.hx-calc .cp_cff_18 #fbuilder .calc-result--borne {
	display: block;
	padding: var(--hx-space-sm) var(--hx-space-md);
	border-radius: var(--hx-radius);
	background-color: var(--hx-paper);
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--borne > label {
	margin: 0;
	color: var(--hx-muted);
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--borne > label {
	display: block;
	margin-bottom: 0.1rem;
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--borne .dfield {
	width: 100%;
	text-align: left;
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--borne input {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hx-deep);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: left;
	font-variant-numeric: tabular-nums;
}

/* Au-delà de la surface que nous chiffrons, les montants sont vides : on
 * ne montre pas des cartes sans chiffre. Restent la phrase de métré, la
 * réserve et le bouton de devis — ce qui est exactement la réponse. */
.hx-calc form.cff-form.hx-calc--medir #fbuilder .fields.calc-result--tile,
.hx-calc form.cff-form.hx-calc--medir #fbuilder .fields.calc-result--line {
	display: none;
}

/* --- Le détail --- */

.hx-calc .cp_cff_18 #fbuilder .calc-result--line {
	display: block;
	padding: var(--hx-space-xs) 0 0;
	border-top: 1px solid var(--hx-border);
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--line > label {
	margin: 0;
	color: var(--hx-muted);
	font-size: var(--hx-fs-sm);
	font-weight: 500;
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--line .dfield {
	width: 100%;
	text-align: left;
}

.hx-calc .cp_cff_18 #fbuilder .calc-result--line input {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hx-ink);
	font-size: var(--hx-fs-lg);
	font-weight: 700;
	text-align: left;
	font-variant-numeric: tabular-nums;
}

/* --- L'avertissement ---
 * Ce n'est pas une mention légale en bas de page : c'est la phrase qui
 * empêche un visiteur de prendre ces chiffres pour un engagement. Elle est
 * traitée comme un encadré, juste avant le bouton de devis, dont elle est
 * la raison d'être.
 */
.hx-calc .cp_cff_18 #fbuilder .fields.calc-section--avertissement {
	margin-top: var(--hx-space-xs);
	padding: var(--hx-space-md);
	border-left: 3px solid var(--hx-egg-600);
	border-radius: 0 var(--hx-radius) var(--hx-radius) 0;
	background-color: var(--hx-paper);
}

.hx-calc .cp_cff_18 #fbuilder .calc-section--avertissement > label {
	margin-bottom: var(--hx-space-2xs);
	color: var(--hx-ink);
	font-family: var(--hx-font-body);
	font-size: var(--hx-fs-sm);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.hx-calc .cp_cff_18 #fbuilder .calc-section--avertissement span.uh {
	margin-top: 0;
	color: var(--hx-text);
	font-size: var(--hx-fs-sm);
	line-height: 1.6;
}

/* --- Le départ vers le devis ---
 * N'apparaît qu'une fois le calcul fait : c'est à ce moment que le
 * visiteur sait ce qu'il demande, et le bouton emporte ses chiffres vers
 * le formulaire de contact (inc/devis.php).
 */
.hx-calc .cp_cff_18 #fbuilder .fields.calc-devis {
	margin-top: var(--hx-space-2xs);
}

.hx-calc .cp_cff_18 #fbuilder .calc-devis input {
	font-size: var(--hx-fs-base);
}

.hx-calc .cp_cff_18 #fbuilder .calc-devis span.uh {
	margin-top: var(--hx-space-xs);
}

/* Le calcul redevient l'action secondaire une fois qu'il a servi : c'est le
 * devis qui compte. Baltic Blue reste la seule couleur d'action
 * (design/color-palette.md), la différence se fait sur le remplissage. */
.hx-calc .cp_cff_18 .cff-form.hx-calc--done .calc-action input {
	background-color: transparent;
	color: var(--hx-slate-700);
}

.hx-calc .cp_cff_18 .cff-form.hx-calc--done .calc-action input:hover,
.hx-calc .cp_cff_18 .cff-form.hx-calc--done .calc-action input:focus {
	background-color: var(--hx-deep);
	color: #fff;
}

/* --- Écrans étroits ---
 * Deux colonnes : tout s'empile, y compris les estimations — un
 * montant à cinq chiffres ne tient pas dans une demi-colonne de
 * téléphone.
 */
@media (max-width: 767px) {

	.hx-calc .cp_cff_18 #fbuilder .pbreak.pb0 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--hx-space-sm);
	}

	.hx-calc .cp_cff_18 #fbuilder .fields,
	.hx-calc .cp_cff_18 #fbuilder .fields.calc-action,
	.hx-calc .cp_cff_18 #fbuilder .fields.calc-input,
	.hx-calc .cp_cff_18 #fbuilder .fields.calc-result--tile,
	.hx-calc .cp_cff_18 #fbuilder .fields.calc-result--line,
	.hx-calc .cp_cff_18 #fbuilder .fields.calc-result--chip {
		grid-column: span 2;
	}

	.hx-calc .cp_cff_18 #fbuilder .fields.calc-action {
		margin-top: 0;
	}

	.hx-calc .cp_cff_18 #fbuilder .calc-action input,
	.hx-calc .cp_cff_18 #fbuilder .calc-devis input {
		width: 100%;
	}

	/* Les bornes basse et haute deviennent deux lignes de détail : la
	 * carte centrale reste le seul grand chiffre. */
	.hx-calc .cp_cff_18 #fbuilder .calc-result--chip input {
		font-size: var(--hx-fs-xs);
	}

	.hx-calc .cp_cff_18 #fbuilder .calc-result--key {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--hx-space-2xs);
	}

	.hx-calc .cp_cff_18 #fbuilder .calc-result--key .dfield {
		text-align: left;
	}

	.hx-calc .cp_cff_18 #fbuilder .calc-result--key input {
		font-size: var(--hx-fs-2xl);
		text-align: left;
	}


}


/* --- Rappel de l'estimation, sur la page de contact ---
 * Rendu par inc/devis.php quand le visiteur arrive du calculateur. Il n'a
 * pas à se demander si ses chiffres ont suivi : ils sont là, au-dessus du
 * formulaire, et déjà recopiés dans les champs.
 */
.hx-calc-recap {
	margin-bottom: var(--hx-space-lg);
	padding: var(--hx-space-md) var(--hx-space-lg);
	border: 1px solid var(--hx-border);
	border-left: 3px solid var(--hx-deep);
	border-radius: 0 var(--hx-radius-lg) var(--hx-radius-lg) 0;
	background-color: var(--hx-paper);
}

.hx-calc-recap__title {
	margin: 0;
	color: var(--hx-deep);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hx-calc-recap__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hx-space-2xs) var(--hx-space-sm);
	margin: var(--hx-space-xs) 0 0;
	padding: 0;
	list-style: none;
}

.hx-calc-recap__meta li {
	margin: 0;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background-color: var(--hx-surface);
	color: var(--hx-text);
	font-size: var(--hx-fs-xs);
	font-weight: 600;
}

.hx-calc-recap__value {
	margin: var(--hx-space-sm) 0 0;
	color: var(--hx-deep);
	font-family: var(--hx-font-display);
	font-size: var(--hx-fs-2xl);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.hx-calc-recap__value span {
	font-size: var(--hx-fs-sm);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--hx-muted);
}

.hx-calc-recap__detail {
	margin: var(--hx-space-2xs) 0 0;
	color: var(--hx-text);
	font-size: var(--hx-fs-sm);
	font-weight: 600;
}

.hx-calc-recap__note {
	margin: var(--hx-space-sm) 0 0;
	color: var(--hx-muted);
	font-size: var(--hx-fs-xs);
	line-height: 1.6;
}



/* ------------------------------------------------------------------
 * 11. ACCESIBILIDAD
 * ---------------------------------------------------------------- */
:focus-visible {
	outline: 3px solid var(--hx-slate);
	outline-offset: 2px;
}
:is(.hx-hero, .hx-cta, .site-footer) :focus-visible {
	outline-color: var(--hx-egg);
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Resumen de la calculadora en /contacto/: sin la viñeta de rombo del contenido. */
.entry-content ul.hx-calc-recap__meta > li {
	padding-left: 0.6rem;
}
.entry-content ul.hx-calc-recap__meta > li::before {
	display: none;
}

/* Capas con textura: la etiqueta sobre un fondo propio para leerse bien. */
:is(.hx-capa--drenante, .hx-capa--grava, .hx-capa--arido) span {
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	background: rgba(13, 19, 33, 0.72);
	text-shadow: none;
}

/* [hx_comparador]: tabla de puntos de la portada */
.hx-comparador {
	margin: 1.5rem 0 0;
	overflow-x: auto;
	border: 1px solid var(--hx-border);
	border-radius: var(--hx-radius-lg);
	background: #fff;
	box-shadow: var(--hx-shadow-sm);
}
.entry-content .hx-comparador table {
	min-width: 640px;
	border: 0;
	border-radius: 0;
	font-size: var(--hx-fs-sm);
}
.entry-content .hx-comparador thead th {
	padding: 0.9rem 0.75rem;
	background: var(--hx-ink);
	color: var(--hx-egg);
	font-size: var(--hx-fs-xs);
	line-height: 1.3;
	text-align: center;
	vertical-align: bottom;
}
.entry-content .hx-comparador thead th:first-child {
	text-align: left;
}
.entry-content .hx-comparador tbody th {
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--hx-border);
	background: #fff;
	color: var(--hx-ink);
	font-family: var(--hx-font-display);
	text-align: left;
	white-space: nowrap;
}
.entry-content .hx-comparador tbody th a {
	color: var(--hx-ink);
	font-weight: 700;
	text-decoration: none;
}
.entry-content .hx-comparador tbody th a:hover {
	color: var(--hx-slate);
	text-decoration: underline;
}
.hx-comparador tbody th small {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--hx-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	white-space: normal;
	color: var(--hx-muted);
}
.entry-content .hx-comparador td {
	text-align: center;
	vertical-align: middle;
}
.entry-content .hx-comparador tbody tr:hover :is(th, td) {
	background: var(--hx-deep-50);
}
.hx-puntos {
	display: inline-flex;
	gap: 4px;
}
.hx-puntos i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--hx-deep-100);
}
.hx-puntos i.on {
	background: var(--hx-slate);
}