/**
 * Hubler Elements — estilos compartidos.
 *
 * Portado desde el proyecto Astro. Todas las clases y variables van con el
 * prefijo `hb-` para no colisionar con el tema, Elementor u otros plugins.
 *
 * Unidades en rem: 1rem = 16px (medida de Figma ÷ 16). Solo quedan en px las
 * líneas de 1px y los puntos de corte de las @media.
 */

/* ==========================================================================
   Fuentes — PP Formula (ancho vía font-stretch + peso)
   ========================================================================== */
@font-face {
	font-family: "PP Formula";
	src: url("../fonts/PPFormula-Light.otf") format("opentype");
	font-weight: 300;
	font-stretch: 100%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PP Formula";
	src: url("../fonts/PPFormula-Medium.otf") format("opentype");
	font-weight: 500;
	font-stretch: 100%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PP Formula";
	src: url("../fonts/PPFormula-Extrabold.otf") format("opentype");
	font-weight: 800;
	font-stretch: 100%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PP Formula";
	src: url("../fonts/PPFormula-ExtendedMedium.otf") format("opentype");
	font-weight: 500;
	font-stretch: 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PP Formula";
	src: url("../fonts/PPFormula-ExtendedBold.otf") format("opentype");
	font-weight: 700;
	font-stretch: 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PP Formula";
	src: url("../fonts/PPFormula-SemiExtendedBold.otf") format("opentype");
	font-weight: 700;
	font-stretch: 112%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PP Formula";
	src: url("../fonts/PPFormula-NarrowRegular.otf") format("opentype");
	font-weight: 400;
	font-stretch: 85%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PP Formula";
	src: url("../fonts/PPFormula-NarrowSemibold.otf") format("opentype");
	font-weight: 600;
	font-stretch: 85%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PP Formula";
	src: url("../fonts/PPFormula-SemiCondensedThin.otf") format("opentype");
	font-weight: 100;
	font-stretch: 88%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PP Formula";
	src: url("../fonts/PPFormula-SemiCondensedExtralight.otf") format("opentype");
	font-weight: 200;
	font-stretch: 88%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PP Formula";
	src: url("../fonts/PPFormula-SemiCondensedMedium.otf") format("opentype");
	font-weight: 500;
	font-stretch: 88%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PP Formula";
	src: url("../fonts/PPFormula-CondensedExtralight.otf") format("opentype");
	font-weight: 200;
	font-stretch: 75%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "PP Formula";
	src: url("../fonts/PPFormula-CondensedBlack.otf") format("opentype");
	font-weight: 900;
	font-stretch: 75%;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--hb-bg: #242140;
	--hb-bg-deep: #161330;
	--hb-lavender: #afaee7;
	--hb-lavender-dim: rgba(175, 174, 231, 0.6);
	--hb-orange: #ffb663;
	--hb-white: #ffffff;

	--hb-font-display: "PP Formula", "Archivo", "Inter", system-ui, sans-serif;
	--hb-font-body: "Inter", system-ui, sans-serif;

	--hb-container: 90rem;
	--hb-gutter: clamp(1.25rem, 5vw, 6.25rem);

	--hb-grad: linear-gradient(190deg, #ffb663 0%, #afaee7 100%);
	--hb-grad-btn: linear-gradient(212deg, #ffb663 0%, #afaee7 99.79%);

	/* --- Blog: tema CLARO (Figma nodos 7725:1374 listado / 7725:1573 post) --- */
	--blog-bg: #fafaff;        /* fondo off-white */
	--blog-text: #373e5f;      /* texto principal (navy) */
	--blog-muted: #737373;     /* texto secundario */
	--blog-faint: #a4acaf;     /* meta/fechas */
	--blog-accent: #4946f1;    /* enlaces, botones, activo */
	--blog-accent-dk: #5351a8; /* acento oscuro */
	--blog-lavender: #afaee7;  /* lavanda de marca */
	--blog-soft: #f6f6ff;      /* fondos suaves (tags, newsletter, hover) */
	--blog-line: #e9e9ff;      /* separadores */
}

@media (max-width: 720px) {
	:root {
		--hb-gutter: 1.25rem;
	}
}

/* ==========================================================================
   Base
   ========================================================================== */
/* Recorta el desbordamiento horizontal en el borde real del viewport (p. ej. el
   carrusel de Historias que sangra a la derecha). `clip` — no `hidden` — no crea
   contenedor de scroll, así que NO rompe el `position: sticky` del pin. Es lo
   mismo que hace el Astro original. */
html,
body {
	overflow-x: clip;
}

.hb-section,
.hb-section * {
	box-sizing: border-box;
}

.hb-section {
	position: relative;
	z-index: 1;
	color: var(--hb-lavender);
	font-family: var(--hb-font-body);
	-webkit-font-smoothing: antialiased;
	/* El reset de Elementor pone `body { line-height: 1.5 }` y el diseño de
	   Astro va con el interlineado natural de la fuente. Se restaura aquí; los
	   line-height concretos de cada bloque siguen mandando sobre este. */
	line-height: normal;
}

.hb-section img,
.hb-section svg {
	display: block;
	max-width: 100%;
}

.hb-section a {
	color: inherit;
	text-decoration: none;
}

.hb-section button {
	font-family: inherit;
	cursor: pointer;
}

.hb-container {
	width: min(100% - var(--hb-gutter) * 2, var(--hb-container));
	margin-inline: auto;
}

.hb-font-display {
	font-family: var(--hb-font-display);
}

/* Texto con degradado recortado */
.hb-grad-text {
	background: var(--hb-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* No basta con `color: transparent`: en un enlace, `.hb-section a { color:
	   inherit }` (0,1,1) le gana a esta clase (0,1,0) y el texto se volvía
	   lavanda opaco, tapando el degradado. El relleno no lo toca nadie más. */
	-webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Botón (borde degradado con pseudo-elemento enmascarado)
   ========================================================================== */
.hb-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.125rem;
	border: 1px solid transparent;
	border-radius: 0.125rem;
	background: var(--hb-grad-btn);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5rem;
	letter-spacing: 0.02rem;
	text-transform: uppercase;
	transition: box-shadow 0.2s ease;
}

.hb-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--hb-grad-btn);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.hb-btn:hover {
	background: #4f52a3;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: var(--hb-white);
	color: var(--hb-white);
	box-shadow: 0 0 1.125rem rgba(255, 182, 99, 0.18);
}

.hb-btn:hover::before {
	background: #4f52a3;
}

.hb-btn--ghost {
	border: 1px solid var(--hb-lavender);
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: var(--hb-lavender);
	color: var(--hb-lavender);
}

.hb-btn--ghost::before {
	display: none;
}

.hb-btn--ghost:hover {
	box-shadow: 0 0 1.125rem rgba(175, 174, 231, 0.25);
}

/* Enlace subrayado con degradado */
.hb-link-grad {
	display: inline-block;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: normal;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--hb-orange);
	width: max-content;
}

/* Dentro de un Editor de texto nativo, el kit pone Roboto sobre el enlace; este
   selector (0,2,1) lo devuelve a PP Formula. */
.elementor-widget-text-editor .hb-link-grad {
	font-family: var(--hb-font-display);
	font-weight: 300;
}

.hb-eyebrow {
	font-family: var(--hb-font-display);
	text-transform: uppercase;
	letter-spacing: 0.09375rem;
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--hb-lavender);
	margin: 0;
}

/* ==========================================================================
   Header + mega menú
   ========================================================================== */
/* Cabecera SIEMPRE fija. El sticky se aplica al contenedor de la ubicación
   (hijo directo del <body>, que abarca toda la altura de la página); ponerlo en
   .hb-header no funcionaba porque su sección padre solo mide lo del header y el
   sticky se "despegaba" enseguida. */
.elementor-location-header {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 999;
}

.hb-header {
	position: relative;
	width: 100%;
	background: rgba(36, 33, 64, 0.72);
	backdrop-filter: blur(0.75rem);
	border-top: 1px solid var(--hb-lavender);
	border-bottom: 1px solid var(--hb-lavender);
}

.hb-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4.3125rem;
	padding-inline: clamp(1.25rem, 4vw, 3.8125rem);
}

.hb-header__logo img {
	height: 2.0625rem;
	width: auto;
}

.hb-nav {
	display: flex;
	align-items: center;
	height: 100%;
}

.hb-nav__item--mega {
	display: flex;
	align-items: center;
	height: 100%;
}

.hb-nav__link {
	display: inline-flex;
	align-items: center;
	height: 100%;
	padding-inline: clamp(1rem, 2.6vw, 3.1875rem);
	border-left: 1px solid rgba(175, 174, 231, 0.45);
	font-family: var(--hb-font-display);
	font-stretch: 85%;
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.5rem;
	letter-spacing: 0.0225rem;
	text-transform: uppercase;
	color: var(--hb-lavender);
	transition:
		color 0.2s ease,
		background-color 0.2s ease;
}

.hb-nav__link:last-child {
	padding-right: 0;
}

.hb-nav__link:hover {
	color: var(--hb-orange);
}

.hb-nav__item--mega:hover .hb-nav__link--mega,
.hb-nav__item--mega.is-open .hb-nav__link--mega {
	background: #383776;
	color: #e9e9ef;
}

.hb-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(0.5rem);
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.22s ease,
		transform 0.22s ease,
		visibility 0.22s;
}

/* Disparador sin página propia (p. ej. Sectores): texto, no enlace */
span.hb-nav__link--mega {
	cursor: default;
}

.hb-nav__item--mega:hover .hb-mega,
.hb-nav__item--mega:focus-within .hb-mega,
.hb-nav__item--mega.is-open .hb-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.hb-mega__inner {
	display: flex;
	gap: 0.625rem;
	align-items: stretch;
	padding: 1.875rem 3.125rem 2.625rem;
	background: #26254f;
	border-radius: 0 0 0.25rem 0.25rem;
	box-shadow: 0 0.25rem 1.76563rem rgba(14, 3, 57, 0.8);
}

.hb-mega__cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	width: 17.75rem;
}

/* --- Enlaces del mega menú (Figma) -------------------------------------------
   Principales (categorías de Servicios y sectores): PP Formula 1rem, mayúsculas,
   lavanda 500; al pasar o activos, blanco 800. Submenú (servicios de cada
   categoría): PP Formula 1rem, lavanda 500, sin mayúsculas.
   `.hb-section` delante sube la especificidad para ganar a
   `.hb-section button { font-family: inherit }`, `.hb-section a { color:
   inherit }` y al rosa (#c36) que el reset del tema Hello pone a todo
   `button:hover/:focus`. */
.hb-section .hb-mega__cat {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.4375rem 0.375rem 0.4375rem 0;
	border: 0;
	border-radius: 0.25rem;
	background: transparent;
	font-family: "PP Formula", var(--hb-font-display);
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	text-transform: uppercase;
	color: var(--hb-lavender);
	transition: color 0.2s ease;
}

/* Sin fondo rosa del tema al enfocar con clic; el blanco solo con hover,
   activo o foco de teclado (si no, la categoría clicada seguiría blanca). */
.hb-section .hb-mega__cat:focus {
	background: transparent;
}

.hb-section .hb-mega__cat:hover,
.hb-section .hb-mega__cat:focus-visible,
.hb-section .hb-mega__cat[aria-current="true"],
.hb-section .hb-mega__cat[aria-current="page"] {
	background: transparent;
	font-weight: 800;
	color: var(--hb-white);
}

.hb-section .hb-mega__cat:focus-visible {
	outline: 1px solid var(--hb-lavender);
	outline-offset: 0.125rem;
}

/* El panel de Sectores es estrecho: se centra bajo su propio botón (el de
   Servicios, más ancho, sigue centrado en la cabecera). */
.hb-nav__item--mega:has(> .hb-mega--sectores) {
	position: relative;
}

/* Desplegable sencillo (Recursos): mismo fondo y sombra que los mega menús,
   pero compacto, con una sola columna de enlaces y centrado bajo su botón. */
.hb-nav__item--mega:has(> .hb-mega--mini) {
	position: relative;
}

.hb-mega--mini .hb-mega__inner {
	padding: 1.25rem 2rem 1.5rem;
}

.hb-mega--mini .hb-mega__cats {
	width: auto;
	min-width: 9rem;
	gap: 0.375rem;
}

.hb-section .hb-mega--mini .hb-mega__cat {
	white-space: nowrap;
}

/* Sectores: las categorías son enlaces directos (sin columna de servicios);
   la columna lleva el mismo separador y aire que la de servicios. */
.hb-mega--sectores .hb-mega__cats {
	padding-right: 3.5625rem;
	margin-right: 3.5625rem;
	border-right: 1px solid var(--hb-lavender);
}

/* Las listas de todas las categorías se apilan en la misma celda: la columna
   mide siempre lo que la más ancha/alta y el desplegable no cambia de tamaño
   al pasar de una categoría a otra. Las inactivas se ocultan con visibility
   (siguen ocupando sitio) en vez de display:none. */
.hb-mega__items {
	display: grid;
	padding-left: 3.5625rem;
	padding-right: 4.8125rem;
	border-left: 1px solid var(--hb-lavender);
}

.hb-mega__list {
	grid-area: 1 / 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.hb-mega__list[hidden] {
	display: flex;
	visibility: hidden;
}

.hb-section .hb-mega__list a {
	display: block;
	padding: 0.4375rem 0.375rem 0.4375rem 0;
	font-family: "PP Formula", var(--hb-font-display);
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	color: var(--hb-lavender);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.hb-section .hb-mega__list a:hover {
	color: var(--hb-orange);
}

.hb-mega__card {
	position: relative;
	width: 25.5625rem;
	overflow: hidden;
	border-radius: 0.1875rem;
	padding: 5.9375rem 2.4375rem 2.5625rem;
	display: flex;
	flex-direction: column;
	gap: 0.5625rem;
	align-items: flex-start;
	background: url("../img/imgMenuCard.png") center / cover no-repeat;
}

.hb-mega__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(175, 174, 231, 0.86);
	border-radius: inherit;
}

.hb-mega__card > * {
	position: relative;
	z-index: 1;
}

.hb-mega__card-title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.3;
	color: #373e5f;
}

.hb-mega__card-text {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #373e5f;
}

.hb-mega__card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.25rem;
	padding: 0.375rem 1.125rem;
	border: 1px solid var(--hb-white);
	border-radius: 0.125rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5rem;
	letter-spacing: 0.02rem;
	text-transform: uppercase;
	color: var(--hb-white);
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.hb-mega__card-btn:hover {
	background: var(--hb-white);
	color: #373e5f;
}

/* Burger */
.hb-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 0.3125rem;
	width: 2.5rem;
	height: 2.5rem;
	background: none;
	border: 0;
	padding: 0.375rem;
}

/* Mismo rosa del reset de Hello en `button:hover/focus` */
.hb-burger:hover,
.hb-burger:focus {
	background: none;
}

.hb-burger span {
	display: block;
	width: 1.625rem;
	height: 0.125rem;
	background: var(--hb-lavender);
	transition:
		transform 0.25s ease,
		opacity 0.25s ease;
}

.hb-header.is-menu-open .hb-burger span:nth-child(1) {
	transform: translateY(0.4375rem) rotate(45deg);
}
.hb-header.is-menu-open .hb-burger span:nth-child(2) {
	opacity: 0;
}
.hb-header.is-menu-open .hb-burger span:nth-child(3) {
	transform: translateY(-0.4375rem) rotate(-45deg);
}

/* Menú móvil */
.hb-mobile-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100vh - 4.3125rem);
	overflow-y: auto;
	background: #26254f;
	border-bottom: 1px solid var(--hb-lavender);
	box-shadow: 0 0.75rem 1.75rem rgba(14, 3, 57, 0.6);
	transform: translateY(-0.5rem);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}

.hb-header.is-menu-open .hb-mobile-menu {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.hb-mobile-menu__nav {
	display: flex;
	flex-direction: column;
	padding: 0.5rem 1.25rem 1.5rem;
}

.hb-m-link {
	display: block;
	padding: 1rem 0.25rem;
	border-bottom: 1px solid rgba(175, 174, 231, 0.2);
	font-family: var(--hb-font-display);
	font-stretch: 85%;
	font-size: 1.25rem;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	color: var(--hb-lavender);
	list-style: none;
	cursor: pointer;
}

.hb-m-acc {
	border-bottom: 1px solid rgba(175, 174, 231, 0.2);
}
.hb-m-acc > .hb-m-link {
	border-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.hb-m-acc > .hb-m-link::after {
	content: "+";
	font-size: 1.5rem;
	line-height: 1;
	color: var(--hb-lavender);
}
.hb-m-acc[open] > .hb-m-link::after {
	content: "–";
}
.hb-m-acc > .hb-m-link::-webkit-details-marker {
	display: none;
}

.hb-m-acc__body {
	padding: 0 0 0.75rem 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.hb-m-sub__title {
	padding: 0.625rem 0.25rem;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1rem;
	text-transform: uppercase;
	color: var(--hb-white);
	cursor: pointer;
	list-style: none;
}
.hb-m-sub__title::-webkit-details-marker {
	display: none;
}

/* Sectores: la categoría es directamente el enlace (sin sublista).
   `.hb-section a { color: inherit }` (0,1,1) la dejaba lavanda. */
.hb-mobile-menu a.hb-m-sub__title {
	display: block;
	color: var(--hb-white);
}

.hb-m-sub__list {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0 0 0 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.hb-m-sub__list a {
	display: block;
	padding: 0.375rem 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 0.9375rem;
	color: var(--hb-lavender);
}

@media (max-width: 900px) {
	.hb-nav {
		display: none;
	}
	.hb-burger {
		display: flex;
	}
	.hb-mobile-menu {
		display: block;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hb-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(27.5rem, 46vw, 47.5rem);
	padding-block: clamp(2.5rem, 6vw, 5.625rem);
	overflow: hidden;
}

.hb-hero__horse {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hb-hero__horse-media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	mix-blend-mode: plus-lighter;
	opacity: 0.4;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		#000 16%,
		#000 70%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		#000 16%,
		#000 70%,
		transparent 100%
	);
}

.hb-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.4375rem;
	text-align: center;
}

.hb-hero__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-stretch: 125%;
	font-weight: 500;
	font-size: clamp(2.125rem, 5.4vw, 4rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--hb-lavender);
	text-shadow: 0 0.125rem 1.5rem rgba(8, 6, 28, 0.85);
}

.hb-hero__subtitle {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: clamp(1.125rem, 2.2vw, 1.75rem);
	color: var(--hb-lavender);
	max-width: 38ch;
	text-shadow: 0 1px 1rem rgba(8, 6, 28, 0.8);
}

@media (max-width: 720px) {
	.hb-hero {
		align-items: center;
		padding-top: 2.5rem;
	}
	.hb-hero__horse-media {
		opacity: 0.28;
	}
}

/* ==========================================================================
   Logos de clientes
   ========================================================================== */
.hb-clients {
	padding-block: 2.1875rem;
}

.hb-clients__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2.5rem 4.0625rem;
	opacity: 0.4;
}

.hb-clients__logo {
	height: auto;
	max-height: 1.625rem;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

@media (max-width: 720px) {
	.hb-clients__row {
		gap: 1.625rem 2.25rem;
	}
	.hb-clients__logo {
		max-height: 1.25rem;
	}
}

/* ==========================================================================
   Una mirada distinta
   ========================================================================== */
.hb-mirada {
	padding-block: clamp(3rem, 6vw, 4rem);
}

.hb-mirada__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 6vw, 7.5rem);
	align-items: center;
}

.hb-mirada__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: clamp(1.875rem, 3.6vw, 3rem);
	line-height: 1.15;
	white-space: nowrap;
}

.hb-mirada__body {
	display: flex;
	flex-direction: column;
	gap: 1.6875rem;
	align-items: flex-start;
}

.hb-mirada__copy {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
}

.hb-mirada__lead {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	color: var(--hb-lavender);
}

.hb-mirada__text {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--hb-lavender);
	max-width: 41.25rem;
}

@media (max-width: 860px) {
	.hb-mirada__grid {
		grid-template-columns: 1fr;
	}
	.hb-mirada__title {
		white-space: normal;
	}
	.hb-mirada__text {
		max-width: 100%;
	}
}

/* ==========================================================================
   Servicios (marco con rejilla + tarjetas)
   ========================================================================== */
.hb-servicios {
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.hb-frame {
	position: relative;
	border: 1px solid rgba(175, 174, 231, 0.5);
	background: rgba(36, 33, 64, 0.62);
}

/* La rejilla vive solo en el rectángulo superior (zona del título) */
.hb-frame__top {
	position: relative;
	padding-top: clamp(2.25rem, 4vw, 3.5rem);
	background-image:
		repeating-linear-gradient(
			to right,
			transparent,
			transparent 3.3125rem,
			rgba(175, 174, 231, 0.07) 3.3125rem,
			rgba(175, 174, 231, 0.07) 3.375rem
		),
		repeating-linear-gradient(
			to bottom,
			transparent,
			transparent 3.3125rem,
			rgba(175, 174, 231, 0.07) 3.3125rem,
			rgba(175, 174, 231, 0.07) 3.375rem
		);
}

.hb-frame__corner {
	position: absolute;
	width: 1rem;
	height: 1rem;
	border: 0.125rem solid var(--hb-lavender);
}
.hb-frame__corner--tl {
	top: -1px;
	left: -1px;
	border-right: 0;
	border-bottom: 0;
}
.hb-frame__corner--tr {
	top: -1px;
	right: -1px;
	border-left: 0;
	border-bottom: 0;
}
.hb-frame__corner--bl {
	bottom: -1px;
	left: -1px;
	border-right: 0;
	border-top: 0;
}
.hb-frame__corner--br {
	bottom: -1px;
	right: -1px;
	border-left: 0;
	border-top: 0;
}

.hb-frame__head {
	position: relative;
	z-index: 1;
	max-width: 56.25rem;
	margin-inline: auto;
	padding: 0.625rem clamp(1.25rem, 4vw, 3.75rem) clamp(1.75rem, 3vw, 2.5rem);
	text-align: center;
	background: var(--hb-bg);
}

.hb-frame__title {
	margin: 0 0 0.5625rem;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	line-height: 1.2;
}

.hb-frame__intro {
	margin: 0 auto;
	max-width: 46.25rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--hb-lavender);
}

.hb-cards {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid rgba(175, 174, 231, 0.5);
}

.hb-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	min-height: 30.9375rem;
	padding: clamp(2.25rem, 3vw, 4.375rem) clamp(1.5rem, 2.4vw, 2.5rem) 3.5rem;
	border-left: 1px solid rgba(175, 174, 231, 0.5);
}

.hb-card:first-child {
	border-left: 0;
}

.hb-card__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 1.5rem;
	text-transform: capitalize;
	color: var(--hb-lavender);
}

.hb-card__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--hb-lavender);
}

@media (max-width: 1000px) {
	.hb-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.hb-card:nth-child(2) {
		border-left: 0;
	}
	.hb-card {
		min-height: 0;
		border-top: 1px solid rgba(175, 174, 231, 0.3);
	}
	.hb-card:nth-child(1),
	.hb-card:nth-child(2) {
		border-top: 0;
	}
}

@media (max-width: 560px) {
	.hb-cards {
		grid-template-columns: 1fr;
	}
	.hb-card {
		border-left: 0;
		border-top: 1px solid rgba(175, 174, 231, 0.3);
	}
	.hb-card:nth-child(1) {
		border-top: 0;
	}
}

/* ==========================================================================
   Impulsamos + Data Solutions
   ========================================================================== */
.hb-impulsamos {
	padding-block: clamp(3.75rem, 7vw, 6.25rem);
}

.hb-impulsamos__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 8vw, 9.9375rem);
	align-items: center;
}

.hb-impulsamos__text {
	display: flex;
	flex-direction: column;
	gap: 1.1875rem;
	align-items: flex-start;
}

.hb-impulsamos__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.875rem, 3.6vw, 3rem);
	line-height: 1.15;
	color: var(--hb-lavender);
	max-width: 14ch;
}

.hb-impulsamos__body {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--hb-lavender);
	max-width: 39.3125rem;
}

.hb-impulsamos__text .hb-link-grad {
	font-size: 1.25rem;
}

.hb-data-solutions {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 22.5rem;
}

.hb-data-solutions__orbit {
	position: absolute;
	width: min(120%, 35rem);
	max-width: none;
	opacity: 0.9;
	mix-blend-mode: plus-lighter;
	pointer-events: none;
}

.hb-data-solutions__box {
	position: relative;
	z-index: 1;
	width: min(100%, 35.1875rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5625rem;
	padding: 3.375rem 2.75rem;
	border: 1px solid var(--hb-orange);
	border-radius: 0.25rem;
	background: linear-gradient(
		200deg,
		rgba(175, 174, 231, 0.14) 0%,
		rgba(41, 39, 112, 0.14) 100%
	);
	backdrop-filter: blur(0.25rem);
}

.hb-data-solutions__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	text-align: center;
}

.hb-data-solutions__sectors {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	max-width: 23.5rem;
}

.hb-sector-btn {
	padding: 0.625rem 1.125rem;
	border: 1px solid var(--hb-lavender);
	border-radius: 0.125rem;
	background: transparent;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.5rem;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	color: var(--hb-lavender);
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.hb-sector-btn:hover {
	background: var(--hb-lavender);
	color: var(--hb-bg-deep);
}

@media (max-width: 860px) {
	.hb-impulsamos__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Toma decisiones (sección fijada + slider vertical)
   ========================================================================== */
.hb-toma {
	position: relative;
	height: calc(100vh + (var(--hb-slides, 3) - 1) * 60vh);
	/* El toro se sale a propósito por la derecha; en Astro lo recorta .page y
	   aquí no existe ese envoltorio. `clip` (no `hidden`) para no crear
	   contenedor de scroll y no romper el sticky de .hb-toma__sticky. */
	overflow-x: clip;
}

.hb-toma__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hb-toma__grid {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}

.hb-toma__text {
	flex: 0 1 43.0625rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
}

.hb-toma__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	line-height: 1.2;
}

.hb-toma__text .hb-link-grad {
	font-size: 1.25rem;
}

.hb-toma__stage {
	width: 100%;
	height: 10.625rem;
	overflow: hidden;
}

.hb-toma__slides {
	display: flex;
	flex-direction: column;
	transition: transform 0.5s ease;
}

.hb-toma__slide {
	margin: 0;
	height: 10.625rem;
	display: flex;
	align-items: center;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--hb-lavender);
	max-width: 43.0625rem;
}

.hb-toma__media-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 4rem);
}

.hb-toma__media-bg {
	width: 31.125rem;
	height: 25.1875rem;
	max-width: 100%;
	flex-shrink: 0;
	aspect-ratio: 152 / 123;
	border-radius: 0.5rem;
	background:
		radial-gradient(
			57.84% 57.83% at 50% 43.92%,
			rgba(65, 59, 122, 0) 0%,
			#242140 100%
		),
		url("../img/imgFae17E5D0Bb64B326998585B3F5Ae2Ba1.gif") #242140 50% / cover
			no-repeat;
	background-blend-mode: normal, soft-light;
}

/* Indicador vertical: activo = píldora, inactivos = círculos */
.hb-toma__progress {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.375rem;
}

.hb-toma__dot {
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 1.25rem;
	border: 1px solid var(--hb-lavender);
	background: transparent;
	transition:
		height 0.3s ease,
		background 0.3s ease,
		border-color 0.3s ease;
}

.hb-toma__dot.is-active {
	height: 3rem;
	border-color: transparent;
	background: var(--hb-grad-btn);
}

@media (max-width: 860px) {
	.hb-toma {
		height: auto;
	}
	.hb-toma__sticky {
		position: static;
		height: auto;
		overflow: visible;
		padding-block: clamp(3rem, 6vw, 5rem);
	}
	.hb-toma__grid {
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
	}
	.hb-toma__stage {
		height: auto;
	}
	.hb-toma__slides {
		transform: none !important;
	}
	.hb-toma__slide {
		height: auto;
		margin-bottom: 1rem;
	}
	.hb-toma__progress {
		flex-direction: row;
	}
}

/* ==========================================================================
   Partners y herramientas
   ========================================================================== */
.hb-partners {
	padding-block: clamp(3.75rem, 8vw, 7.5rem);
}

.hb-partners__eyebrow {
	text-align: center;
	font-size: 1.25rem;
	margin: 0 0 clamp(2rem, 4vw, 2.5625rem);
}

.hb-partners__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem 3.5625rem;
	justify-items: center;
	max-width: 77.5rem;
	margin-inline: auto;
}

.hb-partners__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3.9375rem;
	width: 10.125rem;
	max-width: 100%;
}

.hb-partners__cell img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.hb-partners__cell:hover img {
	opacity: 1;
}

@media (max-width: 900px) {
	.hb-partners__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.75rem;
	}
}

@media (max-width: 540px) {
	.hb-partners__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
	.hb-partners__cell {
		width: 100%;
	}
}

/* ==========================================================================
   Historias de clientes
   ========================================================================== */
.hb-stories {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
	/* El carrusel sangra a la derecha con margin-right (ver .hb-stories__carousel)
	   y sale del container. Aquí NO se usa 100vw ni overflow (100vw incluía el
	   ancho de la barra de scroll y provocaba scroll lateral). El desbordamiento
	   lo recorta `html { overflow-x: clip }` en el borde real del viewport. */
}

.hb-stories__glows {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Los resplandores sobresalen a propósito. En Astro los recorta .page; aquí
	   no hay ese envoltorio, así que se recortan en la propia sección. `clip` (no
	   `hidden`) para no crear contenedor de scroll y no romper el sticky del pin. */
	overflow: clip;
}

.hb-stories__glow {
	position: absolute;
	max-width: none;
}

.hb-stories__glow--orange {
	left: 48%;
	top: 72%;
	width: clamp(35rem, 60vw, 65rem);
	transform: translate(-50%, -50%);
}

.hb-stories__glow--blue {
	left: 86%;
	top: 44%;
	width: clamp(28.75rem, 50vw, 57.8125rem);
	transform: translate(-50%, -50%);
}

.hb-stories__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 19.3125rem minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 5.75rem);
	align-items: center;
}

.hb-stories__head {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	align-items: flex-start;
}

.hb-stories__copy {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
}

.hb-stories__eyebrow {
	font-size: 1.75rem;
	font-stretch: 88%;
	letter-spacing: 0;
	white-space: nowrap;
	margin: 0;
}

.hb-stories__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 700;
	font-stretch: 110%;
	font-size: clamp(1.875rem, 3.2vw, 2.625rem);
	line-height: 1.2;
	color: var(--hb-white);
}

.hb-stories__text {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--hb-lavender);
}

.hb-stories__carousel {
	min-width: 0;
	/* Full-bleed a la derecha: el carrusel sale del container (1440) hasta el
	   borde del viewport, así se ven ~2,5 tarjetas (498px) como en el diseño de
	   Figma (lienzo 1900). En pantallas anchas asoman más; el track ya recorta
	   con overflow-x, así que no genera scroll de página. */
	margin-right: calc(50% - 50vw);
}

.hb-track {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0.5rem;
	scrollbar-width: none;
}
.hb-track::-webkit-scrollbar {
	display: none;
}

.hb-story-card {
	position: relative;
	flex: 0 0 auto;
	width: 31.125rem;
	max-width: 86vw;
	height: 24.3125rem;
	border-radius: 1.25rem;
	overflow: hidden;
	scroll-snap-align: start;
}

.hb-story-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hb-story-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		262deg,
		rgba(61, 81, 173, 0.2) 4%,
		rgba(25, 33, 71, 0.85) 87%
	);
	backdrop-filter: blur(0.125rem);
	transition:
		backdrop-filter 0.35s ease,
		background 0.35s ease;
}

.hb-story-card:hover .hb-story-card__overlay {
	background: linear-gradient(
		262deg,
		rgba(61, 81, 173, 0.25) 4%,
		rgba(25, 33, 71, 0.92) 87%
	);
	backdrop-filter: blur(0.75rem);
}

.hb-story-card__content {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1.375rem;
	padding: 1.625rem 1.1875rem;
	transition: opacity 0.35s ease;
}

.hb-story-card__content--detail {
	opacity: 0;
	pointer-events: none;
}

.hb-story-card:hover .hb-story-card__content--stat {
	opacity: 0;
	pointer-events: none;
}

.hb-story-card:hover .hb-story-card__content--detail {
	opacity: 1;
	pointer-events: auto;
}


.hb-story-card__statblock {
	display: flex;
	flex-direction: column;
	padding: 0 1.1875rem 2.8125rem;
}

.hb-story-card__pill {
	position: relative;
	align-self: flex-start;
	padding: 0.375rem 1rem;
	border-radius: 3.25rem;
	background: rgba(175, 174, 231, 0.1);
	-webkit-backdrop-filter: blur(0.5rem);
	backdrop-filter: blur(0.5rem);
	font-size: 1rem;
	text-transform: uppercase;
	color: var(--hb-lavender);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.18),
		0 0.125rem 0.875rem rgba(0, 0, 0, 0.12);
}

/* Borde "liquid glass" */
.hb-story-card__pill::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.65) 0%,
		rgba(255, 255, 255, 0.1) 38%,
		rgba(255, 255, 255, 0.05) 62%,
		rgba(255, 255, 255, 0.45) 100%
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.hb-story-card__stat {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 5.875rem;
	line-height: 1.2;
	color: var(--hb-white);
}

.hb-story-card__caption {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.4;
	color: var(--hb-white);
}

.hb-story-card__detailtext {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0 1.1875rem;
}

.hb-story-card__desc {
	margin: 0;
	font-family: var(--hb-font-body);
	font-size: 0.875rem;
	font-weight: 400;
	font-style: normal;
	line-height: 150%;
	color: var(--hb-white);
}

.hb-story-card__more {
	width: max-content;
	font-weight: 500;
	font-size: 1rem;
	color: var(--hb-white);
	text-decoration: underline;
	text-underline-offset: 0.125rem;
}

.hb-stories__pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.125rem;
	margin-top: 2rem;
}

.hb-pager-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 6.5625rem;
	border: 1px solid rgba(175, 174, 231, 0.5);
	background: rgba(255, 255, 255, 0.06);
	color: var(--hb-lavender);
	font-size: 1.125rem;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.hb-pager-btn:hover {
	background: var(--hb-lavender);
	color: var(--hb-bg-deep);
}

.hb-pager-line {
	width: 12.5rem;
	max-width: 40vw;
	height: 1px;
	background: rgba(175, 174, 231, 0.4);
}

@media (max-width: 900px) {
	.hb-stories__inner {
		grid-template-columns: 1fr;
	}
	/* En móvil el carrusel ya es full-width; sin full-bleed. */
	.hb-stories__carousel {
		margin-right: 0;
	}
}

/* ==========================================================================
   Recursos (slider de tarjetas)
   ========================================================================== */
.hb-recursos {
	padding-block: clamp(3.75rem, 7vw, 6.25rem);
}

.hb-recursos__grid {
	display: grid;
	grid-template-columns: 29.0625rem minmax(0, 1fr);
	gap: clamp(2.5rem, 4vw, 3.1875rem);
	align-items: start;
}

.hb-recursos__intro {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.hb-recursos__title {
	margin: 0 0 1.5rem;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(2.125rem, 3.4vw, 2.75rem);
	/* El tema le pone 1.2 a los <h2>; en el diseño va con el natural. */
	line-height: normal;
}

.hb-recursos__list {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

.hb-recursos__item a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1.4375rem 0.875rem;
	border-bottom: 1px solid rgba(175, 174, 231, 0.5);
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.25rem;
	text-transform: capitalize;
	color: var(--hb-lavender);
	transition: color 0.2s ease;
}

.hb-recursos__item a:hover {
	color: var(--hb-orange);
}

.hb-recursos__slider {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	min-width: 0;
}

.hb-recursos__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - clamp(1.5rem, 3vw, 3.1875rem)) / 2);
	gap: clamp(1.5rem, 3vw, 3.1875rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 0.25rem;
}

.hb-recursos__track::-webkit-scrollbar {
	display: none;
}

.hb-recursos__dots {
	display: flex;
	justify-content: center;
	gap: 0.875rem;
}

.hb-recursos__dot {
	width: 0.75rem;
	height: 0.75rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--hb-lavender);
	background: transparent;
	transition:
		background 0.3s ease,
		border-color 0.3s ease;
}

.hb-recursos__dot[aria-current="true"] {
	border-color: transparent;
	background: var(--hb-lavender);
}

.hb-feature {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2.0625rem;
	min-height: 30.9375rem;
	padding: 3.5625rem 2.125rem 3.5rem;
	border-radius: 0.875rem;
	background: linear-gradient(
		218deg,
		rgba(175, 174, 231, 0.34) 0%,
		rgba(41, 39, 112, 0.34) 100%
	);
	border: 1px solid rgba(175, 174, 231, 0.45);
}

.hb-feature__icon {
	width: 4.4375rem;
	height: 4.4375rem;
}

.hb-feature__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.hb-feature__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.2;
	text-transform: capitalize;
	color: var(--hb-lavender);
}

.hb-feature__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--hb-lavender);
}

.hb-feature__btn {
	align-self: flex-start;
}

@media (max-width: 980px) {
	.hb-recursos__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.hb-recursos__track {
		grid-auto-columns: 100%;
	}
	.hb-feature {
		min-height: 26.25rem;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.hb-footer {
	padding-block: clamp(3rem, 5vw, 4.375rem) 1.5rem;
	margin-top: clamp(2.5rem, 5vw, 3.75rem);
}

.hb-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 2.625rem;
}

.hb-footer__top {
	display: flex;
	justify-content: space-between;
	gap: clamp(2.5rem, 6vw, 5rem);
	flex-wrap: wrap;
}

.hb-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	max-width: 15rem;
}

.hb-footer__logo {
	width: 14.1875rem;
	height: auto;
	mix-blend-mode: lighten;
}

.hb-footer__tagline {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	color: var(--hb-lavender);
}

.hb-footer__socials {
	display: flex;
	gap: 0.5rem;
}

.hb-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.375rem;
	height: 3.375rem;
	padding: 1rem;
	border-radius: 1px;
	border: 1px solid var(--hb-lavender);
	background: transparent;
	transition: background-color 0.2s ease;
}

.hb-social:hover {
	background: rgba(175, 174, 231, 0.15);
}

.hb-social img {
	width: 1.375rem;
	height: 1.375rem;
	filter: brightness(0) invert(1);
	opacity: 0.85;
}

.hb-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	flex: 1;
	justify-content: flex-end;
}

.hb-footer__col {
	min-width: 8.75rem;
}

.hb-footer__col-title {
	margin: 0 0 1.5rem;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.125rem;
	text-transform: uppercase;
	color: var(--hb-lavender);
}

.hb-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
}

.hb-footer__col a {
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	color: var(--hb-lavender);
	transition: color 0.2s ease;
}

.hb-footer__col a:hover {
	color: var(--hb-orange);
}

.hb-footer__contact li {
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	color: var(--hb-lavender);
}

.hb-footer__contact-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.375rem;
	padding: 0.4375rem 1.9375rem;
	border: 1px solid var(--hb-lavender);
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	color: var(--hb-lavender);
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.hb-footer__contact-btn:hover {
	background: var(--hb-lavender);
	color: var(--hb-bg-deep);
}

.hb-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	padding-top: 1.5rem;
	border-top: 1px dashed rgba(175, 174, 231, 0.5);
}

.hb-footer__member {
	margin: 0;
	font-family: var(--hb-font-display);
	font-size: 0.875rem;
	color: var(--hb-lavender-dim);
}

.hb-footer__legal {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hb-footer__legal li {
	padding-inline: 0.5625rem;
	border-right: 1px solid rgba(175, 174, 231, 0.4);
}

.hb-footer__legal li:last-child {
	border-right: 0;
	padding-right: 0;
}

.hb-footer__legal a {
	font-size: 0.875rem;
	color: var(--hb-lavender-dim);
}

.hb-footer__legal a:hover {
	color: var(--hb-lavender);
}

@media (max-width: 760px) {
	.hb-footer__cols {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Helpers para widgets NATIVOS de Elementor
   --------------------------------------------------------------------------
   Estas clases se ponen en el campo "Clases CSS" del widget (pestaña Avanzado).
   Así las secciones sencillas se montan con widgets nativos (editables) pero
   mantienen el diseño de Hubler.
   ========================================================================== */

/* --- Botón con borde degradado sobre el botón nativo --- */
.elementor-widget.hb-e-btn .elementor-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1.125rem;
	border: 1px solid transparent;
	border-radius: 0.125rem;
	background: var(--hb-grad-btn);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5rem;
	letter-spacing: 0.02rem;
	text-transform: uppercase;
	transition: box-shadow 0.2s ease;
}

.elementor-widget.hb-e-btn .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--hb-grad-btn);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.elementor-widget.hb-e-btn .elementor-button:hover,
.elementor-widget.hb-e-btn .elementor-button:focus {
	background: #4f52a3;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: var(--hb-white);
	box-shadow: 0 0 1.125rem rgba(255, 182, 99, 0.18);
}

.elementor-widget.hb-e-btn .elementor-button:hover::before {
	background: #4f52a3;
}

/* --- Titular con degradado sobre el widget Título nativo --- */
/* `_css_classes` pone la clase en el WRAPPER del widget, no en el <h1>/<p>. Por
   eso todo lo de aquí abajo baja el estilo del wrapper al elemento interno.
   El `.elementor-widget` de más sube la especificidad a 0,3,0 para ganarle al
   CSS del kit de Elementor (0,2,0), que se encola después que este fichero. */
.elementor-widget.hb-e-grad .elementor-heading-title {
	font-family: var(--hb-font-display);
	background: var(--hb-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --- Tipografías de display sobre widgets nativos --- */
.elementor-widget.hb-e-display .elementor-heading-title {
	font-family: var(--hb-font-display);
	color: var(--hb-lavender);
}

/* --- Puentes wrapper -> elemento interno, sección a sección --- */
/* Las clases de Astro (.hb-hero__subtitle, .hb-mirada__text...) fueron pensadas
   para el <p>/<h*> directamente. Al caer en el wrapper, sus `max-width` recortan
   la caja del widget y descolocan el texto. Se anulan aquí y se reponen dentro. */
.elementor-widget.hb-hero__subtitle,
.elementor-widget.hb-hero__title,
.elementor-widget.hb-mirada__text,
.elementor-widget.hb-mirada__title,
.elementor-widget.hb-impulsamos__title,
.elementor-widget.hb-impulsamos__body,
.elementor-widget.hb-frame__intro {
	max-width: none;
}

/* `.hb-e-body p` reparte `line-height: 1.5` a todos los cuerpos de texto y se
   declara más abajo, así que empataba en especificidad y ganaba. El subtítulo
   del hero y el claim del footer van con el interlineado natural, y por eso
   estos dos llevan `.elementor-widget` delante: para ganar sin depender del
   orden del fichero. */
.elementor-widget.hb-hero__subtitle p {
	max-width: 38ch;
	margin-inline: auto;
	font-size: clamp(1.125rem, 2.2vw, 1.75rem);
	line-height: normal;
	text-shadow: 0 1px 1rem rgba(8, 6, 28, 0.8);
}

.hb-mirada__text p {
	max-width: 41.25rem;
}

.hb-frame__intro p {
	max-width: 46.25rem;
	margin-inline: auto;
}

.elementor-widget.hb-hero__title .elementor-heading-title {
	font-stretch: 125%;
	font-weight: 500;
	font-size: clamp(2.125rem, 5.4vw, 4rem);
	line-height: 1.05;
	text-transform: uppercase;
	text-shadow: 0 0.125rem 1.5rem rgba(8, 6, 28, 0.85);
}

.elementor-widget.hb-mirada__title .elementor-heading-title {
	font-weight: 300;
	font-size: clamp(1.875rem, 3.6vw, 3rem);
	line-height: 1.15;
}

/* `line-height: normal` en varios sitios no es un descuido: el tema/kit se lo
   impone a los <h*> (1 o 1.2 según el nivel) y en el diseño de Astro estos
   textos van con el interlineado natural de la fuente. */
.elementor-widget.hb-mirada__lead .elementor-heading-title {
	font-weight: 500;
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	line-height: normal;
}

.hb-mirada__text p {
	font-size: 1.25rem;
}

.elementor-widget.hb-card__title .elementor-heading-title {
	font-weight: 800;
	font-size: 1.5rem;
	line-height: normal;
	text-transform: capitalize;
}

/* El texto de las tarjetas va en Inter (font-body), como en Astro. Se fuerza
   con `.elementor-widget.` para ganar a la fuente Roboto del kit. */
.elementor-widget.hb-card__text,
.elementor-widget.hb-card__text p {
	font-family: var(--hb-font-body);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--hb-lavender);
}

.elementor-widget.hb-frame__title .elementor-heading-title {
	font-weight: 500;
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	line-height: 1.2;
}

.hb-frame__intro p {
	font-size: 1.125rem;
}

.elementor-widget.hb-impulsamos__title .elementor-heading-title {
	font-weight: 500;
	font-size: clamp(1.875rem, 3.6vw, 3rem);
	line-height: 1.15;
	max-width: 14ch;
}

.hb-impulsamos__body p {
	font-size: 1.25rem;
	max-width: 39.3125rem;
}

.elementor-widget.hb-data-solutions__title .elementor-heading-title {
	font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: normal;
	text-align: center;
}

/* El antetítulo puede montarse con Editor de texto (<p>) o con Título (<h*>).
   Si solo se cubre el <p>, la versión Título se queda con la tipografía por
   defecto de Elementor (Roboto y el azul del kit). Se cubren las dos. */
.hb-eyebrow p,
.elementor-widget.hb-eyebrow .elementor-heading-title {
	font-family: var(--hb-font-display);
	text-transform: uppercase;
	letter-spacing: 0.09375rem;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: normal;
	color: var(--hb-lavender);
}

/* "Partners y herramientas" va a 20px (.partners__eyebrow en Astro) */
.elementor-widget.hb-partners__eyebrow .elementor-heading-title {
	font-size: 1.25rem;
}

.elementor-widget.hb-footer__col-title .elementor-heading-title {
	font-weight: 500;
	font-size: 1.125rem;
	text-transform: uppercase;
}

.elementor-widget.hb-footer__tagline p {
	font-size: 1.125rem;
	line-height: normal;
}

.hb-e-body,
.hb-e-body p {
	font-family: var(--hb-font-display);
	font-weight: 300;
	line-height: 1.5;
	color: var(--hb-lavender);
}

/* --- Hero nativo: mismo alto que en Astro (.hb-hero) --- */
.hb-e-hero {
	min-height: clamp(27.5rem, 46vw, 47.5rem);
	overflow: hidden;
}

/* El bloque de texto va centrado en vertical, como en Astro (.hero es un flex
   con align-items: center). El contenedor de Elementor ya es flex, pero se
   queda a la altura de su contenido: sin heredar el min-height no hay espacio
   que repartir y el texto se pega arriba. */
.hb-e-hero > .elementor-container {
	min-height: inherit;
	align-items: center;
	justify-content: center;
}

/* --- Hero nativo: vídeo de fondo fundido con la página --- */
.hb-e-hero .elementor-background-video-container {
	opacity: 0.4;
	mix-blend-mode: plus-lighter;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		#000 16%,
		#000 70%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		#000 16%,
		#000 70%,
		transparent 100%
	);
}

/* --- Filas/rejillas de logos con widgets Imagen nativos --------------------
   Se pone la clase en la COLUMNA; maquetamos su contenedor de widgets. */

/* Fila de logos de clientes */
.hb-e-logorow .elementor-widget-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2.5rem 4.0625rem;
	opacity: 0.4;
}

.hb-e-logorow .elementor-widget-image {
	width: auto !important;
}

/* El ancho de cada logo lo pone el control nativo `width` del widget Imagen:
   estos SVG no tienen proporción propia (preserveAspectRatio="none"), así que
   aquí no se toca el width para no pisar lo que se configure desde el panel. */
.hb-e-logorow img {
	filter: brightness(0) invert(1);
	object-fit: contain;
	max-height: 1.625rem;
}

/* Rejilla de partners (5 columnas).
   El `.elementor-column` de más hace falta: Elementor declara
   `.elementor-widget-wrap { display: flex }` y sin esa especificidad el grid
   no gana y los logos caen uno por fila. */
.elementor-column.hb-e-logogrid > .elementor-widget-wrap {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem 3.5625rem;
	justify-items: center;
	align-items: center;
	max-width: 77.5rem;
	margin-inline: auto;
}

/* Cada widget Imagen hace de celda fija, como .partners__cell en Astro: estos
   SVG no tienen proporción propia, así que la caja la pone la celda. */
.elementor-column.hb-e-logogrid .elementor-widget-image {
	width: 10.125rem !important;
	max-width: 100%;
	height: 3.9375rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hb-e-logogrid img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.hb-e-logogrid img:hover {
	opacity: 1;
}

@media (max-width: 900px) {
	.elementor-column.hb-e-logogrid > .elementor-widget-wrap {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.75rem;
	}
}

@media (max-width: 720px) {
	.hb-e-logorow .elementor-widget-wrap {
		gap: 1.625rem 2.25rem;
	}
	.hb-e-logorow img {
		max-height: 1.25rem;
	}
}

@media (max-width: 540px) {
	.elementor-column.hb-e-logogrid > .elementor-widget-wrap {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
	.elementor-column.hb-e-logogrid .elementor-widget-image {
		width: 100% !important;
	}
}

/* --- Marco de Servicios sobre una sección nativa --- */
.hb-e-frame {
	border: 1px solid rgba(175, 174, 231, 0.5);
	background-color: rgba(36, 33, 64, 0.62);
	/* Esquinas en L dibujadas con degradados (evita 4 elementos extra) */
	background-image:
		linear-gradient(var(--hb-lavender), var(--hb-lavender)),
		linear-gradient(var(--hb-lavender), var(--hb-lavender)),
		linear-gradient(var(--hb-lavender), var(--hb-lavender)),
		linear-gradient(var(--hb-lavender), var(--hb-lavender)),
		linear-gradient(var(--hb-lavender), var(--hb-lavender)),
		linear-gradient(var(--hb-lavender), var(--hb-lavender)),
		linear-gradient(var(--hb-lavender), var(--hb-lavender)),
		linear-gradient(var(--hb-lavender), var(--hb-lavender));
	background-repeat: no-repeat;
	background-size:
		1rem 0.125rem, 0.125rem 1rem,
		1rem 0.125rem, 0.125rem 1rem,
		1rem 0.125rem, 0.125rem 1rem,
		1rem 0.125rem, 0.125rem 1rem;
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
}

/* Rejilla del rectángulo superior */
.hb-e-frame-grid {
	background-image:
		repeating-linear-gradient(
			to right,
			transparent,
			transparent 3.3125rem,
			rgba(175, 174, 231, 0.07) 3.3125rem,
			rgba(175, 174, 231, 0.07) 3.375rem
		),
		repeating-linear-gradient(
			to bottom,
			transparent,
			transparent 3.3125rem,
			rgba(175, 174, 231, 0.07) 3.3125rem,
			rgba(175, 174, 231, 0.07) 3.375rem
		);
}

/* Caja del título que "tapa" la rejilla */
.hb-e-frame-title {
	background: var(--hb-bg);
}

/* Tarjetas de servicio: mismo alto y centrado vertical que .hb-card en Astro */
.hb-e-card {
	border-left: 1px solid rgba(175, 174, 231, 0.5);
}
.hb-e-card:first-child {
	border-left: 0;
}

.hb-e-card > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	min-height: 30.9375rem;
	padding: clamp(2.25rem, 3vw, 4.375rem) clamp(1.5rem, 2.4vw, 2.5rem) 3.5rem;
	align-content: center;
}

/* --- Caja Data Solutions --- */
.hb-e-box {
	border: 1px solid var(--hb-orange);
	border-radius: 0.25rem;
	background: linear-gradient(
		200deg,
		rgba(175, 174, 231, 0.14) 0%,
		rgba(41, 39, 112, 0.14) 100%
	);
	backdrop-filter: blur(0.25rem);
}

/* Botones de sector (botones nativos dentro de la caja).
   `.elementor-widget` de más para ganar al color de acento del kit. */
.elementor-widget.hb-e-sector .elementor-button {
	padding: 0.625rem 1.125rem;
	border: 1px solid var(--hb-lavender);
	border-radius: 0.125rem;
	background-color: transparent;
	background-image: none;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.5rem;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	color: var(--hb-lavender);
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.elementor-widget.hb-e-sector .elementor-button:hover {
	background-color: var(--hb-lavender);
	color: var(--hb-bg-deep);
}

/* --- Footer nativo --- */
/* Botón "Contacto" del footer (más sobrio que .hb-btn: sin degradado).
   `.elementor-widget` de más para ganar al color de acento del kit. */
.elementor-widget.hb-e-footer-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.375rem;
	padding: 0.4375rem 1.9375rem;
	border: 1px solid var(--hb-lavender);
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	color: var(--hb-lavender);
	fill: var(--hb-lavender);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.elementor-widget.hb-e-footer-btn .elementor-button:hover,
.elementor-widget.hb-e-footer-btn .elementor-button:focus {
	background: var(--hb-lavender);
	color: var(--hb-bg-deep, #1b1834);
}

/* Redes del footer: cuadrado con borde lavanda, no los colores de cada marca */
.hb-e-socials .elementor-social-icons-wrapper {
	display: flex;
	gap: 0.5rem;
}

.elementor-widget.hb-e-socials .elementor-social-icon {
	width: 3.375rem;
	height: 3.375rem;
	padding: 1rem;
	border-radius: 1px;
	border: 1px solid var(--hb-lavender);
	background-color: transparent;
	transition: background-color 0.2s ease;
}

.elementor-widget.hb-e-socials .elementor-social-icon:hover {
	background-color: rgba(175, 174, 231, 0.15);
}

.elementor-widget.hb-e-socials .elementor-social-icon i,
.elementor-widget.hb-e-socials .elementor-social-icon svg {
	width: 1.375rem;
	height: 1.375rem;
	font-size: 1.25rem;
	color: var(--hb-lavender);
	fill: var(--hb-lavender);
}

/* Barra legal */
.hb-e-footer-bottom {
	border-top: 1px dashed rgba(175, 174, 231, 0.5);
}

.hb-e-member p,
.hb-e-legal p {
	margin: 0;
	font-family: var(--hb-font-display);
	font-size: 0.875rem;
	line-height: normal;
	color: var(--hb-lavender-dim, rgba(175, 174, 231, 0.7));
}

.hb-e-legal a {
	padding-inline: 0.5625rem;
	border-right: 1px solid rgba(175, 174, 231, 0.4);
	color: inherit;
}

.hb-e-legal a:last-child {
	border-right: 0;
	padding-right: 0;
}

.hb-e-footer-logo img {
	mix-blend-mode: lighten;
	width: 12.5rem;
	height: auto;
}

/* Enlaces del footer. El kit los pinta en Roboto gris (#54595F) con una regla
   de la misma especificidad que esta, así que hace falta el `.elementor-widget`
   de más para que gane el diseño. */
.elementor-widget.hb-e-footer-col .elementor-icon-list-item a,
.elementor-widget.hb-e-footer-col .elementor-icon-list-text {
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	line-height: normal;
	color: var(--hb-lavender);
}

.elementor-widget.hb-e-footer-col .elementor-icon-list-item a:hover {
	color: var(--hb-orange);
}

/* ==========================================================================
   PÁGINA DE SERVICIOS
   ========================================================================== */

/* --- Resplandores de fondo (2 imágenes decorativas) --- */
.hb-svc-glows {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: clip;
	pointer-events: none;
}

.hb-svc-glow {
	position: absolute;
	max-width: none;
}

.hb-svc-glow--1 {
	top: -7.5rem;
	right: -16.25rem;
	width: 56.25rem;
	opacity: 0.7;
}

.hb-svc-glow--2 {
	top: 87.5rem;
	left: -21.25rem;
	width: 56.25rem;
	opacity: 0.6;
}

/* --- Breadcrumb --- */
.hb-breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.1875rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 0.875rem;
	line-height: 1.3;
	letter-spacing: 0.00875rem;
	color: var(--hb-lavender);
}

.hb-breadcrumb a,
.hb-breadcrumb span {
	padding: 0.1875rem 0 1px;
	color: var(--hb-lavender);
}

.hb-breadcrumb .hb-breadcrumb__div {
	padding-left: 0.375rem;
	border-left: 1px solid var(--hb-lavender);
}

.hb-breadcrumb a:hover {
	color: var(--hb-orange);
}

.hb-breadcrumb .hb-breadcrumb__current {
	color: #deddff;
}

/* --- Hero de servicio --- */
.hb-hero-svc {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(23.75rem, 40vw, 31.25rem);
	padding-block: clamp(2.25rem, 4vw, 3.5rem);
	overflow: clip;
}

.hb-hero-svc__particles {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: min(76%, 73.75rem);
	opacity: 0.9;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);
}

.hb-hero-svc__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}

.hb-hero-svc__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: normal;
}

.hb-hero-svc__text {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.6;
	color: var(--hb-lavender);
	max-width: 43.75rem;
}

/* --- Lista de servicios --- */
.hb-svc-list {
	padding-block: clamp(2.5rem, 5vw, 4.375rem);
}

.hb-svc-list__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr);
	gap: clamp(2.5rem, 6vw, 7.5rem);
	align-items: start;
}

.hb-svc-list__title {
	margin: 0 0 1.125rem;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.15;
}

.hb-svc-list__text {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--hb-lavender);
	max-width: 26.25rem;
}

.hb-svc-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hb-svc-list__items a {
	display: block;
	padding: 1.375rem 0.375rem;
	background-image: linear-gradient(
		222deg,
		rgba(255, 190, 133, 0.9) 0.7%,
		rgba(31, 7, 126, 0.9) 105.87%
	);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100% 1px;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	color: var(--hb-lavender);
	transition: color 0.2s ease;
}

.hb-svc-list__items a:hover {
	color: var(--hb-orange);
}

/* --- ¿Cómo aplicamos Big Data? --- */
.hb-apply {
	padding-block: clamp(3rem, 6vw, 5.625rem);
}

.hb-apply__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 6.25rem);
	align-items: center;
}

.hb-apply__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.375rem;
}

.hb-apply__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.2;
	max-width: 14ch;
}

.hb-apply__copy {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--hb-lavender);
	max-width: 35rem;
}

/* Vídeo de "¿Cómo aplicamos?": widget hubler-video (.hb-video__el) dentro de
   una columna. La clase .hb-apply__media va en el wrapper del widget y le da el
   alto; el vídeo lo llena con máscara radial y mezcla. */
.elementor-widget.hb-apply__media {
	height: clamp(20rem, 36vw, 35rem);
}

.elementor-widget.hb-apply__media .elementor-widget-container {
	height: 100%;
}

.hb-apply__media .hb-video__el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	mix-blend-mode: lighten;
	-webkit-mask-image: radial-gradient(ellipse 70% 64% at 50% 48%, #000 18%, transparent 92%);
	mask-image: radial-gradient(ellipse 70% 64% at 50% 48%, #000 18%, transparent 92%);
}

/* --- Metodología --- */
.hb-method {
	position: relative;
	padding-block: clamp(3.75rem, 7vw, 6.875rem);
}

.hb-method__inner {
	position: relative;
	z-index: 1;
}

.hb-method__mesh {
	position: relative;
	z-index: 0;
	display: block;
	width: 100vw;
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
	margin-top: -13.125rem;
	opacity: 0.5;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}

.hb-method__bg {
	display: block;
	width: 98vw;
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.hb-method__diagram {
	position: relative;
	padding-top: 9.375rem;
}

.hb-method__logo {
	position: absolute;
	top: 0.375rem;
	left: 50%;
	transform: translateX(-50%);
	width: 3rem;
	background: var(--hb-bg);
}

.hb-method__logo img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: lighten;
}

.hb-method__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.hb-method__wire-base {
	display: none;
}

.hb-method__wire-live {
	stroke: var(--hb-orange);
	stroke-width: 1.6;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	filter: drop-shadow(0 0 0.3125rem rgba(255, 182, 99, 0.55));
}

.hb-method__steps {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	min-height: 20rem;
}

.hb-method__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.125rem;
}

.hb-method__hex {
	position: relative;
	display: grid;
	place-items: center;
	width: 4.4375rem;
	height: 4.4375rem;
	z-index: 1;
}

.hb-method__hex img {
	position: relative;
	z-index: 1;
	width: 4.4375rem;
	height: 4.4375rem;
}

.hb-method__hex::before {
	content: "";
	position: absolute;
	inset: 0.375rem;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	background: var(--hb-grad-btn);
	opacity: 0;
	transform: scale(0.55);
	transition:
		opacity 0.3s ease,
		transform 0.4s cubic-bezier(0.34, 1.55, 0.5, 1);
}

.hb-method__step.is-active .hb-method__hex::before {
	opacity: 1;
	transform: scale(1);
}

.hb-method__step.is-active .hb-method__hex {
	filter: drop-shadow(0 0 1.125rem rgba(255, 182, 99, 0.45));
}

.hb-method__label {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	color: var(--hb-lavender);
	transition: opacity 0.25s ease;
}

.hb-method__step.is-active .hb-method__label {
	opacity: 0;
}

.hb-method__card {
	position: absolute;
	top: 7.25rem;
	left: 50%;
	width: min(20rem, 88%);
	padding: 1.625rem 1.5rem 1.875rem;
	border-radius: 0.875rem;
	text-align: left;
	background: linear-gradient(
		210deg,
		rgba(175, 174, 231, 0.16) 0%,
		rgba(41, 39, 112, 0.24) 100%
	);
	border: 1px solid rgba(175, 174, 231, 0.22);
	backdrop-filter: blur(0.375rem);
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(1.375rem) scale(0.95);
	transform-origin: top center;
	transition:
		opacity 0.35s ease,
		transform 0.5s cubic-bezier(0.22, 1.4, 0.4, 1);
}

.hb-method__card::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -2.75rem;
	width: 1px;
	height: 2.75rem;
	background: var(--hb-orange);
	opacity: 0;
	transform: scaleY(0);
	transform-origin: top;
	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
}

.hb-method__step.is-active .hb-method__card {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0) scale(1);
}

.hb-method__step.is-active .hb-method__card::before {
	opacity: 0.8;
	transform: scaleY(1);
}

.hb-method__card-title,
.hb-method__card-text {
	opacity: 0;
	transform: translateY(0.625rem);
	transition:
		opacity 0.4s ease,
		transform 0.4s ease;
}

.hb-method__step.is-active .hb-method__card-title {
	opacity: 1;
	transform: none;
	transition-delay: 0.12s;
}

.hb-method__step.is-active .hb-method__card-text {
	opacity: 1;
	transform: none;
	transition-delay: 0.2s;
}

.hb-method__card-title {
	margin: 0 0 0.625rem;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--hb-white);
}

.hb-method__card-text {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--hb-lavender-dim);
}

/* --- Beneficios --- */
.hb-benefits {
	padding-block: clamp(3rem, 6vw, 5.625rem);
}

.hb-benefits__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 5.625rem);
	align-items: center;
}

.hb-benefits__text {
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
	align-items: flex-start;
}

.hb-benefits__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	color: var(--hb-white);
}

.hb-benefits__copy {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--hb-lavender);
	max-width: 32.5rem;
}

.hb-benefits__cardwrap {
	position: relative;
}

.hb-benefits__glow {
	position: absolute;
	top: -4.375rem;
	right: 1.875rem;
	width: 15.9375rem;
	height: 15.9375rem;
	border-radius: 50%;
	background: conic-gradient(
		from 180deg at 50% 50%,
		rgba(245, 159, 83, 1) 0%,
		rgba(242, 212, 185, 1) 100%
	);
	filter: blur(4.7125rem);
	pointer-events: none;
	z-index: 0;
}

.hb-benefits__list {
	position: relative;
	z-index: 1;
	list-style: disc;
	margin: 0;
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem)
		clamp(2.75rem, 5vw, 3.625rem);
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	border-radius: 1.125rem;
	background: linear-gradient(
		88deg,
		rgba(136, 134, 210, 0.2) 0%,
		rgba(15, 3, 53, 0.2) 100%
	);
	border: 1px solid rgba(175, 174, 231, 0.18);
	backdrop-filter: blur(0.25rem);
}

.hb-benefits__list li {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.7;
	letter-spacing: -0.01875rem;
	color: #d4d3f5;
}

.hb-benefits__list li::marker {
	color: var(--hb-lavender);
}

/* --- CTA de servicio --- */
.hb-cta-svc {
	padding-block: clamp(3.75rem, 8vw, 7.5rem);
}

.hb-cta-svc__inner {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.375rem;
	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.75rem);
	border-radius: 1.25rem;
	border: 1px solid rgba(175, 174, 231, 0.3);
	background:
		radial-gradient(
			60% 80% at 50% 0%,
			rgba(255, 182, 99, 0.12) 0%,
			rgba(36, 33, 64, 0) 70%
		),
		linear-gradient(
			200deg,
			rgba(175, 174, 231, 0.12) 0%,
			rgba(41, 39, 112, 0.18) 100%
		);
}

.hb-cta-svc__grid {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	opacity: 0.3;
	pointer-events: none;
	z-index: 0;
}

.hb-cta-svc__inner > :not(.hb-cta-svc__grid) {
	position: relative;
	z-index: 1;
}

.hb-cta-svc__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.15;
	max-width: 16ch;
}

.hb-cta-svc__text {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	color: var(--hb-lavender);
	max-width: 48ch;
}

/* --- FAQs --- */
.hb-faqs {
	padding-block: clamp(2.5rem, 5vw, 5rem);
}

.hb-faqs__inner {
	max-width: 51.25rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.75rem;
}

.hb-faqs__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--hb-lavender);
	text-align: center;
}

.hb-faqs__foot {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6875rem;
	padding: 1.25rem 0;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: normal;
	letter-spacing: -0.03125rem;
	color: var(--hb-lavender);
}

.hb-faqs__foot a {
	font-weight: 700;
	text-decoration: underline;
}

/* Responsive de servicios */
@media (max-width: 900px) {
	.hb-svc-list__grid,
	.hb-apply__grid,
	.hb-benefits__grid {
		grid-template-columns: 1fr;
	}

	.hb-method__diagram {
		padding-top: 1.5rem;
	}

	.hb-method__logo,
	.hb-method__wires {
		display: none;
	}

	.hb-method__steps {
		display: flex;
		flex-direction: column;
		gap: 1.75rem;
		min-height: 0;
	}

	.hb-method__step {
		flex-direction: row;
		align-items: flex-start;
		gap: 1.125rem;
		text-align: left;
	}

	.hb-method__hex {
		flex-shrink: 0;
	}

	.hb-method__step.is-active .hb-method__hex {
		filter: none;
	}

	.hb-method__label {
		display: none;
	}

	.hb-method__card,
	.hb-method__step.is-active .hb-method__card {
		position: static;
		width: auto;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		padding: 0;
		border: 0;
		background: none;
		backdrop-filter: none;
	}

	.hb-method__card::before {
		display: none;
	}
}

/* ==========================================================================
   SERVICIOS — puentes a widgets nativos (misma técnica que la home:
   `.elementor-widget` de más para ganar al kit, y bajar el estilo del
   wrapper al <h*>/<p> interno).
   ========================================================================== */

/* Titulares (font-size / peso / interlineado sobre el <h*> nativo).
   Valores tomados del export de Figma (design/servicio/style.css): los
   titulares de sección van en PP Formula Medium (500), no en pesos altos. */
.elementor-widget.hb-hero-svc__title .elementor-heading-title {
	/* Figma: PpFormula-Medium 48px / peso 500 / line-height 100% */
	font-weight: 500;
	font-size: clamp(2.125rem, 4vw, 3rem);
	line-height: 1;
}

.elementor-widget.hb-svc-list__title .elementor-heading-title {
	/* Figma: 42px / peso 500 / line-height 130% */
	font-weight: 500;
	font-size: clamp(1.875rem, 3.2vw, 2.625rem);
	line-height: 1.3;
}

.elementor-widget.hb-apply__title .elementor-heading-title {
	/* Figma: 42px / peso 500 / line-height 130% */
	font-weight: 500;
	font-size: clamp(1.875rem, 3.2vw, 2.625rem);
	line-height: 1.3;
	max-width: 14ch;
}

.elementor-widget.hb-benefits__title .elementor-heading-title {
	/* Figma: 48px / peso 500 / DEGRADADO (no blanco sólido) / line-height 100% */
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.875rem, 3.4vw, 3rem);
	line-height: 1;
	background: var(--hb-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.elementor-widget.hb-cta-svc__title .elementor-heading-title {
	font-weight: 500;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.15;
	max-width: 16ch;
	margin-inline: auto;
}

.elementor-widget.hb-faqs__title .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: normal;
	color: var(--hb-lavender);
	text-align: center;
}

/* Cuerpos de texto (font-display 300 lavanda; medidas por bloque) */
.hb-hero-svc__text p,
.hb-svc-list__text p,
.hb-apply__copy p,
.hb-benefits__copy p,
.hb-cta-svc__text p {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	color: var(--hb-lavender);
}

.hb-hero-svc__text p {
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.6;
	max-width: 43.75rem;
}

.hb-svc-list__text p {
	font-size: 1.125rem;
	line-height: 1.5;
	max-width: 26.25rem;
}

.hb-apply__copy p {
	font-size: 1.125rem;
	line-height: 1.6;
	max-width: 35rem;
}

.hb-benefits__copy p {
	font-size: 1.125rem;
	line-height: 1.6;
	max-width: 32.5rem;
}

.hb-cta-svc__text p {
	font-size: 1.125rem;
	line-height: normal;
	max-width: 48ch;
	margin-inline: auto;
}

/* --- Hero de servicio (sección + columna nativas) --- */
.elementor-section.hb-e-hero-svc {
	position: relative;
	min-height: clamp(23.75rem, 40vw, 31.25rem);
	overflow: clip;
	padding-block: clamp(2.25rem, 4vw, 3.5rem);
}

.elementor-section.hb-e-hero-svc > .elementor-container {
	position: relative;
	z-index: 1;
	/* Sin heredar el min-height, el contenedor colapsa a la altura del contenido
	   y `align-items: center` no centra nada: el título quedaba pegado arriba,
	   pisando el breadcrumb, y las partículas (centradas sobre la columna) subían
	   por encima. Con el alto heredado, todo se centra dentro del hero. */
	min-height: inherit;
	align-items: center;
}

/* La columna apila título/texto/botón a la izquierda con hueco (hero-svc__inner) */
.hb-e-hero-svc-col > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}

/* La imagen de partículas sale del flujo, como en Astro */
.elementor-widget.hb-hero-svc__particles {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: min(76%, 73.75rem);
	z-index: 0;
	pointer-events: none;
}

.hb-hero-svc__particles img {
	opacity: 0.9;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);
}

/* --- Lista de servicios (icon-list nativo con subrayado degradado) --- */
.hb-e-svclist .elementor-icon-list-items {
	display: block;
}

.hb-e-svclist .elementor-icon-list-item {
	display: block;
	margin: 0;
	padding: 0;
}

.hb-e-svclist .elementor-icon-list-icon {
	display: none;
}

.hb-e-svclist .elementor-icon-list-item > a {
	display: block;
	padding: 1.375rem 0.375rem;
	background-image: linear-gradient(
		222deg,
		rgba(255, 190, 133, 0.9) 0.7%,
		rgba(31, 7, 126, 0.9) 105.87%
	);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100% 1px;
}

/* 0,4,0 para ganar al color/fuente del kit (que se aplica con la plantilla
   Full Width y pinta el texto en gris Roboto). */
.elementor-widget.hb-e-svclist .elementor-icon-list-item .elementor-icon-list-text {
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	color: var(--hb-lavender);
	transition: color 0.2s ease;
}

.hb-e-svclist .elementor-icon-list-item > a:hover .elementor-icon-list-text {
	color: var(--hb-orange);
}

/* --- Columna de texto de "¿Cómo aplicamos?" y beneficios (gap + align) --- */
.hb-e-stack > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.375rem;
}

/* Enlace "Habla con un experto" del bloque apply: Figma lo pone a 20px.
   Acotado a .hb-e-stack (solo existe en servicios) para no tocar la home,
   donde .hb-link-grad se usa a otros tamaños. */
.hb-e-stack .hb-link-grad {
	font-size: 1.25rem;
}

/* --- Caja CTA (borde + degradado sobre la columna nativa) --- */
.hb-e-cta-col > .elementor-widget-wrap {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.375rem;
	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.75rem);
	border-radius: 1.25rem;
	border: 1px solid rgba(175, 174, 231, 0.3);
	background:
		radial-gradient(60% 80% at 50% 0%, rgba(255, 182, 99, 0.12) 0%, rgba(36, 33, 64, 0) 70%),
		linear-gradient(200deg, rgba(175, 174, 231, 0.12) 0%, rgba(41, 39, 112, 0.18) 100%);
}

/* La rejilla del CTA se pega al fondo de la caja */
.elementor-widget.hb-cta-svc__grid {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 0;
	pointer-events: none;
}

.hb-cta-svc__grid img {
	width: 100%;
	opacity: 0.3;
}

.hb-e-cta-col > .elementor-widget-wrap > .elementor-element:not(.hb-cta-svc__grid) {
	position: relative;
	z-index: 1;
}

/* --- FAQs (widget HTML con <details>) --- */
/* El acordeón va en su propio widget HTML dentro de una columna full-width.
   Sin `margin-inline: auto` el bloque de 746px se quedaba pegado a la izquierda,
   desalineado con el título (que sí va centrado). Se centra para que coincidan
   entre sí y con el diseño de Figma. */
.hb-faqs__list {
	width: 100%;
	max-width: 46.625rem;
	margin-inline: auto;
}

.hb-faq {
	border-bottom: 1px solid #e9e9ff;
}

.hb-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.3125rem 0.25rem 1.8125rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.125rem, 2vw, 1.5625rem);
	line-height: normal;
	letter-spacing: -0.03125rem;
	color: var(--hb-lavender);
}

.hb-faq__q::-webkit-details-marker {
	display: none;
}

.hb-faq__icon {
	position: relative;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
}

.hb-faq__icon::before,
.hb-faq__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0.125rem auto 0.125rem;
	height: 0.125rem;
	background: var(--hb-lavender);
	transition: transform 0.25s ease;
}

.hb-faq__icon::after {
	transform: rotate(90deg);
}

.hb-faq[open] .hb-faq__icon::after {
	transform: rotate(0deg);
}

.hb-faq__a {
	margin: 0;
	padding: 0 0.25rem 1.625rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--hb-lavender-dim);
	max-width: 40rem;
}

/* ==========================================================================
   SERVICIOS — puentes para widgets NATIVOS (sustituyen a los antiguos HTML)
   ========================================================================== */

/* --- Tarjeta de Beneficios: columna estilada + resplandor cónico --- */
.elementor-column.hb-e-benefits-card {
	position: relative;
}

/* El resplandor va detrás de la tarjeta (translúcida), asomando arriba-derecha */
.elementor-column.hb-e-benefits-card::before {
	content: "";
	position: absolute;
	top: -4.375rem;
	right: 1.875rem;
	width: 15.9375rem;
	height: 15.9375rem;
	border-radius: 50%;
	background: conic-gradient(
		from 180deg at 50% 50%,
		rgba(245, 159, 83, 1) 0%,
		rgba(242, 212, 185, 1) 100%
	);
	filter: blur(4.7125rem);
	pointer-events: none;
	z-index: 0;
}

.elementor-column.hb-e-benefits-card > .elementor-widget-wrap {
	position: relative;
	z-index: 1;
	/* Figma (frame-1984078095): alto fijo 290px, contenido centrado, padding
	   31/27 simétrico. */
	min-height: 18.125rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 1.125rem;
	background: linear-gradient(
		89deg,
		rgba(136, 134, 210, 0.2) 0%,
		rgba(15, 3, 53, 0.2) 100%
	);
	border: 1px solid rgba(175, 174, 231, 0.18);
	backdrop-filter: blur(0.25rem);
	padding: 1.9375rem 1.6875rem;
}

/* Lista de beneficios: viñetas tipo disco sobre la Lista de iconos nativa.
   `.elementor-widget.` de más para ganar a la tipografía global del kit (que
   con la plantilla "Full Width" sí se aplica y pinta el texto en Roboto gris). */
.elementor-widget.hb-e-benefits-list .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	/* Sin gap extra: el diseño separa los items solo con el line-height 170%. */
	gap: 0;
}

.elementor-widget.hb-e-benefits-list .elementor-icon-list-icon {
	display: none;
}

.elementor-widget.hb-e-benefits-list .elementor-icon-list-item {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	margin: 0;
	padding: 0;
}

.elementor-widget.hb-e-benefits-list .elementor-icon-list-item::before {
	content: "\2022";
	flex-shrink: 0;
	color: var(--hb-lavender);
	line-height: 1;
}

/* 0,4,0 (con .elementor-icon-list-item) para ganar a la regla de fuente del kit,
   que es 0,3,0 y se encola después. */
.elementor-widget.hb-e-benefits-list .elementor-icon-list-item .elementor-icon-list-text {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.7;
	letter-spacing: -0.01875rem;
	color: #d4d3f5;
}

/* --- FAQs: widget Toggle nativo re-estilado como el diseño ---
   Se usa Toggle (no Acordeón) porque empieza todo cerrado, como el diseño.
   El `.elementor-widget.hb-e-faq` de más sube la especificidad para ganar al
   CSS del kit (bordes de caja y colores de acento verde/cian). */
.elementor-widget.hb-e-faq {
	width: 100%;
	max-width: 46.625rem;
	margin-inline: auto;
}

/* Solo línea inferior por item, sin marco de tarjeta */
.elementor-widget.hb-e-faq .elementor-toggle-item {
	border: 0;
	border-bottom: 1px solid #e9e9ff;
	background: transparent;
}

.elementor-widget.hb-e-faq .elementor-tab-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.3125rem 0.25rem 1.8125rem;
	border: 0;
	background: transparent;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.125rem, 2vw, 1.5625rem);
	line-height: normal;
	letter-spacing: -0.03125rem;
	color: var(--hb-lavender);
}

/* Título del toggle a la izquierda, icono +/− a la derecha, ambos lavanda.
   La fuente/peso van aquí (no solo en .elementor-tab-title) porque el kit pone
   Roboto directamente sobre .elementor-toggle-title. */
.elementor-widget.hb-e-faq .elementor-toggle-title {
	order: 1;
	font-family: var(--hb-font-display);
	font-weight: 500;
	color: var(--hb-lavender);
}

/* Al abrir, el kit pone el título en verde de acento: se fuerza lavanda */
.elementor-widget.hb-e-faq .elementor-tab-title.elementor-active,
.elementor-widget.hb-e-faq .elementor-tab-title.elementor-active .elementor-toggle-title {
	color: var(--hb-lavender);
}

.elementor-widget.hb-e-faq .elementor-tab-title .elementor-toggle-icon {
	order: 2;
	margin: 0;
	padding: 0;
	width: auto;
	flex-shrink: 0;
	color: var(--hb-lavender);
}

.elementor-widget.hb-e-faq .elementor-toggle-icon svg,
.elementor-widget.hb-e-faq .elementor-toggle-icon i {
	color: var(--hb-lavender);
	fill: var(--hb-lavender);
	font-size: 1rem;
	width: 1rem;
	height: 1rem;
}

.elementor-widget.hb-e-faq .elementor-tab-content {
	padding: 0 0.25rem 1.625rem;
	border: 0;
	background: transparent;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--hb-lavender-dim);
}

.elementor-widget.hb-e-faq .elementor-tab-content p {
	margin: 0;
	max-width: 40rem;
	color: var(--hb-lavender-dim);
}

/* ==========================================================================
   BLOG — tema CLARO (Figma 7725:1374 listado / 7725:1573 post)
   Ámbito: páginas de blog (body.blog / .archive / .category / .single-post /
   .search). El header y el footer son compartidos (oscuros); aquí se "voltean"
   a claro solo en estas páginas.
   ========================================================================== */

/* --- Fondo de página claro --- */
body.blog,
body.archive,
body.single-post,
body.search {
	background: var(--blog-bg) !important;
}

/* --- Patrón "cabecera" del Figma: malla de puntos + glows en la parte
   superior de las páginas de listado (detrás de breadcrumb + hero). El header
   claro cubre los primeros 69px, así que el patrón se ve en el hero. --- */
body.blog,
body.archive,
body.search {
	background-image:
		radial-gradient(38.75rem 21.25rem at 50% 2.5rem, rgba(255, 182, 99, 0.22), transparent 68%),
		url(../images/blog-hero-mesh.png),
		url(../images/blog-hero-mesh-right.png) !important;
	background-repeat: no-repeat, no-repeat, no-repeat !important;
	background-position: center 1.875rem, left 6.5rem, right 6.5rem !important;
	background-size: auto, 52% auto, 52% auto !important;
	background-color: var(--blog-bg) !important;
}

/* Contenedores de Elementor transparentes para que se vea el fondo claro */
body.blog .elementor-section,
body.archive .elementor-section,
body.single-post .elementor-section {
	color: var(--blog-text);
}

/* --- Header/footer en versión CLARA solo en el blog --- */
body.blog .hb-header,
body.archive .hb-header,
body.single-post .hb-header,
body.search .hb-header,
body.blog .hb-e-footer-bottom,
body.archive .hb-e-footer-bottom,
body.single-post .hb-e-footer-bottom {
	background: var(--blog-bg);
}

/* Logo oscuro sobre fondo claro (el SVG es blanco → se oscurece) */
body.blog .hb-header__logo img,
body.archive .hb-header__logo img,
body.single-post .hb-header__logo img,
body.search .hb-header__logo img {
	filter: brightness(0.15);
}

/* Enlaces de navegación en oscuro */
body.blog .hb-nav__link,
body.archive .hb-nav__link,
body.single-post .hb-nav__link,
body.search .hb-nav__link,
body.blog .hb-header,
body.archive .hb-header,
body.single-post .hb-header {
	color: var(--blog-text);
}

body.blog .hb-nav__link,
body.archive .hb-nav__link,
body.single-post .hb-nav__link {
	color: var(--blog-text);
}

/* Borde inferior del header (línea clara) */
body.blog .hb-header__bar,
body.archive .hb-header__bar,
body.single-post .hb-header__bar {
	border-bottom-color: var(--blog-line);
}

/* Footer claro: textos y enlaces oscuros */
body.blog .hb-e-footer-bottom p,
body.archive .hb-e-footer-bottom p,
body.single-post .hb-e-footer-bottom p,
body.blog .hb-e-footer-col .elementor-icon-list-text,
body.archive .hb-e-footer-col .elementor-icon-list-text,
body.single-post .hb-e-footer-col .elementor-icon-list-text {
	color: var(--blog-text);
}

/* Logo animado "Hubler" del footer: el GIF es un efecto de partículas CLARO
   sobre fondo OSCURO (pensado para la home oscura). En el tema claro del blog lo
   invertimos: las partículas pasan a oscuras (visibles) y el fondo oscuro se
   aclara y se funde con el footer claro. hue-rotate recupera el tono azulado. */
body.blog img[src*="imgFrame1984078016"],
body.archive img[src*="imgFrame1984078016"],
body.single-post img[src*="imgFrame1984078016"],
body.search img[src*="imgFrame1984078016"] {
	filter: invert(1) hue-rotate(180deg);
	/* En claro NO usamos "lighten" (ocultaría el logo invertido sobre fondo
	   claro): con "normal" las partículas oscuras del logo invertido se ven. */
	mix-blend-mode: normal;
}

/* --- Utilidades de tipografía del blog --- */
.hb-blog {
	font-family: var(--hb-font-display);
	color: var(--blog-text);
}

/* ==========================================================================
   BLOG — Tarjetas de artículo (widget hubler-blog-cards)
   ========================================================================== */
.hb-bcards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem 1.5rem;
}

.hb-bcards[data-cols="2"] {
	grid-template-columns: repeat(2, 1fr);
}

.hb-bcards[data-cols="4"] {
	grid-template-columns: repeat(4, 1fr);
}

.hb-bcard {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.hb-bcard__imgwrap {
	display: block;
	border-radius: 0.125rem;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	background: var(--blog-soft);
}

.hb-bcard__imgwrap .hb-bcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.hb-bcard:hover .hb-bcard__img {
	transform: scale(1.04);
}

.hb-bcard__title {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--blog-text);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}

.hb-bcard__title:hover {
	color: var(--blog-accent);
}

.hb-bcard__author {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--blog-muted);
}

.hb-bcard__meta {
	display: flex;
	gap: 2.4375rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	color: var(--blog-muted);
}

.hb-bcard__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.hb-bcard__meta i {
	font-size: 0.9375rem;
	color: var(--blog-muted);
}

@media (max-width: 900px) {
	.hb-bcards,
	.hb-bcards[data-cols="4"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.hb-bcards,
	.hb-bcards[data-cols="2"],
	.hb-bcards[data-cols="4"] {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   BLOG — Hero, breadcrumb y fondo mesh
   ========================================================================== */
.hb-blog-hero {
	position: relative;
}

.elementor-widget.hb-blog-hero__title .elementor-heading-title,
.hb-blog-hero__title .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 3.25rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--blog-text);
	text-align: center;
}

.hb-blog-hero__sub {
	max-width: 35rem;
	margin: 0.5rem auto 0;
	text-align: center;
}

.hb-blog-hero__sub p {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--blog-text);
}

/* Breadcrumb del blog (Inicio | Blog) sobre fondo claro */
body.archive .hb-breadcrumb,
body.single-post .hb-breadcrumb,
body.blog .hb-breadcrumb {
	color: var(--blog-faint);
}

body.archive .hb-breadcrumb a,
body.single-post .hb-breadcrumb a,
body.blog .hb-breadcrumb a {
	color: var(--blog-faint);
}

/* ==========================================================================
   BLOG — Filtros de categoría (widget hubler-blog-tabs)
   ========================================================================== */
.hb-btabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	align-items: center;
}

.hb-btab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4375rem 0.6875rem 0.3125rem;
	border: 1px solid var(--blog-accent);
	border-radius: 0.125rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.33;
	letter-spacing: 0.02em;
	color: var(--blog-accent);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}

.hb-btab:hover {
	background: var(--blog-soft);
}

.hb-btab.is-active {
	background: var(--blog-text);
	border-color: var(--blog-text);
	color: #f6f6ff;
}

/* --- Taxonomy Filter nativo de Elementor con estética de pills Hubler --- */
.hb-blog-filter {
	--e-filter-space-between: 0.5rem;
}

.hb-blog-filter .e-filter-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4375rem 0.6875rem 0.3125rem;
	border: 1px solid var(--blog-accent);
	border-radius: 0.125rem;
	background: transparent;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.33;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--blog-accent);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hb-blog-filter .e-filter-item:hover {
	background: var(--blog-soft);
}

.hb-blog-filter .e-filter-item[aria-pressed="true"] {
	background: var(--blog-text);
	border-color: var(--blog-text);
	color: #f6f6ff;
}

/* --- Rejilla del Loop Grid nativo con la separación del diseño Hubler --- */
.hb-blog-loop .elementor-grid {
	grid-gap: 2.5rem 1.5rem;
	gap: 2.5rem 1.5rem;
}

.hb-blog-loop .e-loop-item {
	display: flex;
}

.hb-blog-loop .e-loop-item > .elementor,
.hb-blog-loop .e-loop-item > .elementor > .elementor-section,
.hb-blog-loop .e-loop-item .elementor-widget-hubler-bcard-item,
.hb-blog-loop .e-loop-item .hb-bcard {
	width: 100%;
}

/* ==========================================================================
   BLOG — Layout listado (rejilla + sidebar)
   ========================================================================== */
.hb-blog-body .elementor-container {
	align-items: flex-start;
}

/* ==========================================================================
   BLOG — Sidebar (widget hubler-blog-sidebar)
   ========================================================================== */
.hb-bside {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.hb-bside__block {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--blog-line);
}

.hb-bside__block:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.hb-bside__title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--blog-text);
}

/* Buscar */
.hb-bside__search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	border-bottom: 1px solid var(--blog-accent);
	padding: 0 0.25rem 0.375rem 0.125rem;
}

.hb-bside__search input {
	flex: 1;
	border: 0;
	background: transparent;
	outline: none;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1rem;
	color: var(--blog-accent);
}

.hb-bside__search input::placeholder {
	color: var(--blog-accent);
	opacity: 0.9;
}

.hb-bside__search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2.125rem;
	border: 0;
	border-radius: 0.375rem;
	background: var(--blog-accent);
	color: #fff;
	cursor: pointer;
	font-size: 0.9375rem;
}

/* Lo más leído */
.hb-bside__pop {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.hb-bside__popitem {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.hb-bside__poptitle {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--blog-text);
	text-decoration: none;
}

.hb-bside__poptitle:hover {
	color: var(--blog-accent);
}

.hb-bside__popdate {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--blog-muted);
}

.hb-bside__popdate i {
	font-size: 0.875rem;
}

/* Síguenos */
.hb-bside__social {
	display: flex;
	gap: 0.375rem;
}

.hb-bside__soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.375rem;
	height: 3.375rem;
	border: 1px solid var(--blog-accent);
	border-radius: 1px;
	color: var(--blog-accent);
	font-size: 1.25rem;
	transition: background 0.2s ease, color 0.2s ease;
}

.hb-bside__soc:hover {
	background: var(--blog-accent);
	color: #fff;
}

/* ==========================================================================
   BLOG — Secciones inferiores (Noticias, Apariciones, Sala de prensa)
   ========================================================================== */
.elementor-widget.hb-blog-h2 .elementor-heading-title,
.hb-blog-h2 .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 2.375rem;
	line-height: 1.2;
	color: var(--blog-text);
}

.elementor-widget.hb-blog-h3 .elementor-heading-title,
.hb-blog-h3 .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--blog-text);
}

/* Bloque de prensa (widget hubler-blog-press) */
.hb-press {
	display: flex;
	flex-direction: column;
	gap: 3.5rem;
}

.hb-press__news {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.hb-press__media {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.hb-blog-h2__t {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 2.375rem;
	line-height: 1.2;
	color: var(--blog-text);
}

.hb-blog-h3__t {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--blog-text);
}

.hb-press__cta {
	display: flex;
	justify-content: center;
}

.hb-press__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.625rem;
	border: 1px solid var(--blog-line);
	border-radius: 0.125rem;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1rem;
	color: var(--blog-text);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.hb-press__btn:hover {
	background: var(--blog-text);
	color: #fff;
}

.hb-news__cap {
	text-decoration: none;
}

a.hb-news__cap:hover {
	color: var(--blog-accent);
}

.hb-news__img--ph {
	background: var(--blog-soft);
}

/* Tarjetas "Noticias sobre Hubler" (imagen + pie) */
.hb-news {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.hb-news__item {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.hb-news__img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0.25rem;
	display: block;
}

.hb-news__cap {
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.4;
	color: var(--blog-text);
}

/* "Apariciones en medios" (3 columnas con borde izquierdo) */
.hb-media {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}

.hb-media__item {
	padding-left: 1.375rem;
	border-left: 1px solid var(--blog-line);
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.hb-media__src {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--blog-muted);
}

.hb-media__text {
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--blog-text);
	margin: 0;
}

.hb-media__link {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1rem;
	color: var(--blog-accent);
	text-decoration: none;
}

.hb-media__link:hover {
	text-decoration: underline;
}

/* Botón "Sala de prensa" (outline) */
.elementor-widget.hb-press-btn .elementor-button,
.hb-press-btn .elementor-button {
	background: transparent;
	border: 1px solid var(--blog-line);
	border-radius: 0.125rem;
	color: var(--blog-text);
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1rem;
	padding: 0.75rem 1.625rem;
}

.elementor-widget.hb-press-btn .elementor-button:hover,
.hb-press-btn .elementor-button:hover {
	background: var(--blog-text);
	color: #fff;
}

/* ==========================================================================
   BLOG — Newsletter (caja degradada)
   ========================================================================== */
/* Sección de la newsletter: "bola" de ASCII-art real del Figma (nodo Vector),
   una sola vez y centrada tras la caja (no a todo el ancho). La caja es
   semi-transparente con desenfoque, así la textura se transparenta detrás. */
.hb-blog-nlrow {
	position: relative;
	background-image: url(../img/blog-nl-blob.png);
	background-repeat: no-repeat;
	background-size: 51.25rem auto;
	background-position: 30% 34%;
}

.hb-blog-nlrow > .elementor-container {
	position: relative;
	z-index: 1;
}

.hb-nl {
	position: relative;
	background: linear-gradient(90deg, rgba(214, 213, 246, 0.52) 0%, rgba(180, 178, 233, 0.46) 100%);
	-webkit-backdrop-filter: blur(0.09375rem);
	backdrop-filter: blur(0.09375rem);
	border-radius: 1.125rem;
	padding: 2.625rem 4.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5rem;
	flex-wrap: wrap;
}

.hb-nl__left {
	max-width: 33.25rem;
}

.hb-nl__title {
	margin: 0 0 0.375rem;
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 2rem;
	line-height: 1.4;
	color: var(--blog-text);
}

.hb-nl__text {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.375rem;
	line-height: 1.4;
	color: var(--blog-text);
}

.hb-nl__right {
	flex: 0 1 27.6875rem;
}

.hb-nl__label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--blog-text);
}

.hb-nl__form {
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: 0.25rem;
	overflow: hidden;
}

.hb-nl__form input {
	flex: 1;
	border: 0;
	outline: none;
	padding: 0.75rem 1rem;
	font-family: var(--hb-font-display);
	font-size: 0.9375rem;
	color: var(--blog-text);
}

.hb-nl__form button {
	border: 0;
	background: var(--blog-text);
	color: #fff;
	padding: 0.75rem 1.625rem;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 0.9375rem;
	cursor: pointer;
}

.hb-nl__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 0.625rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--blog-text);
}

.hb-nl__consent a {
	color: var(--blog-accent);
	text-decoration: underline;
}

/* Variante simple de tarjetas ("Otros artículos": solo imagen + título) */
.hb-bcards--simple .hb-bcard__title {
	font-weight: 300;
	font-size: 1.125rem;
	-webkit-line-clamp: 3;
}

/* ==========================================================================
   BLOG — Single (entrada)
   ========================================================================== */
.hb-single-body .elementor-container {
	align-items: flex-start;
}

/* Barra lateral pegajosa del post */
.hb-single-aside {
	position: sticky;
	top: 6rem;
}

/* Título del post */
.elementor-widget.hb-post-title .elementor-heading-title,
.hb-post-title .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 1.875rem;
	line-height: 1.3;
	color: var(--blog-text);
}

/* Imagen destacada */
.hb-post-featured img {
	width: 100%;
	border-radius: 0.25rem;
	display: block;
}

/* Fecha del post */
.hb-post-date {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	color: var(--blog-muted);
}

.hb-post-date i {
	font-size: 0.9375rem;
}

/* ---- Tipografía del contenido del post ---- */
.hb-post-content {
	font-family: var(--hb-font-display);
	color: var(--blog-text);
}

.hb-post-content p {
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 1.125rem;
	color: var(--blog-text);
}

.hb-post-content h2 {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.4;
	color: var(--blog-text);
	margin: 2.125rem 0 0.875rem;
}

.hb-post-content h3 {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--blog-text);
	margin: 1.625rem 0 0.75rem;
}

.hb-post-content h4 {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.125rem;
	color: var(--blog-text);
	margin: 1.375rem 0 0.625rem;
}

.hb-post-content a {
	color: var(--blog-accent);
	text-decoration: underline;
}

.hb-post-content ul,
.hb-post-content ol {
	margin: 0 0 1.125rem;
	padding-left: 1.375rem;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.7;
}

.hb-post-content li {
	margin-bottom: 0.5rem;
}

.hb-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 0.25rem;
	display: block;
	margin: 0.5rem 0;
}

.hb-post-content figure {
	margin: 1.5rem 0;
}

.hb-post-content figcaption {
	margin-top: 0.5rem;
	font-weight: 300;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--blog-muted);
}

/* Cita destacada (borde izquierdo morado) */
.hb-post-content blockquote {
	margin: 1.75rem 0;
	padding: 0.25rem 0 0.25rem 1.375rem;
	border-left: 0.125rem solid var(--blog-accent);
}

.hb-post-content blockquote p {
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.55;
	color: var(--blog-text);
}

.hb-post-content blockquote cite,
.hb-post-content blockquote footer {
	display: block;
	margin-top: 0.625rem;
	font-weight: 700;
	font-style: normal;
	font-size: 1rem;
	color: var(--blog-accent);
}

/* ---- Compartir este artículo (widget nativo share-buttons) ---- */
.hb-share-label {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1rem;
	color: var(--blog-text);
}

/* ---- Caja de autor (widget hubler-author-box) ---- */
.hb-author {
	display: flex;
	align-items: flex-start;
	gap: 1.375rem;
	padding: 0.5rem 0;
}

.hb-author__avatar {
	flex: 0 0 6rem;
	width: 6rem;
	height: 6.75rem;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	background: var(--blog-soft);
	overflow: hidden;
}

.hb-author__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hb-author__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--blog-lavender);
	font-size: 2.125rem;
}

.hb-author__label {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.125rem;
	color: var(--blog-text);
}

.hb-author__name {
	margin: 0.125rem 0 0.5rem;
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 1.375rem;
	line-height: 1.3;
	color: var(--blog-text);
}

.hb-author__bio {
	margin: 0 0 0.625rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--blog-muted);
	max-width: 35rem;
}

.hb-author__link {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--blog-text);
	text-decoration: underline;
}

.hb-author__link:hover {
	color: var(--blog-accent);
}

/* ---- Sidebar: Contenido (TOC nativo) ---- */
.hb-toc__title,
.hb-single-aside .hb-bside__title {
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 1.375rem;
	color: var(--blog-text);
	margin: 0 0 0.75rem;
}

.hb-toc .elementor-toc__header-title {
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 1.375rem;
	color: var(--blog-text);
}

.hb-toc .elementor-toc__list-item-text {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1rem;
	color: var(--blog-text);
}

.hb-toc .elementor-toc__list-item-text:hover {
	color: var(--blog-accent);
}

/* ---- "Otros artículos" ---- */
.elementor-widget.hb-otros-title .elementor-heading-title,
.hb-otros-title .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 2.375rem;
	color: var(--blog-text);
}

/* ==========================================================================
   BLOG — Responsive del listado y del single
   ========================================================================== */
@media (max-width: 1024px) {
	.hb-media,
	.hb-news {
		grid-template-columns: 1fr;
	}
	.hb-nl {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding: 2rem 1.75rem;
	}
	/* En columna, el flex-basis de 443px se convertiría en ALTURA y crea un
	   hueco enorme; lo dejamos que se ajuste al contenido. */
	.hb-nl__right {
		flex: 0 0 auto;
	}
	.hb-nl__left {
		max-width: none;
	}
	.hb-single-aside {
		position: static;
	}
	.hb-author {
		flex-direction: column;
	}
}

/* ==========================================================================
   GLOSARIO (CPT glosario) — tema claro, cabeceras como el blog
   ========================================================================== */
/* El archivo del glosario es un "archive": hereda el tema claro del blog y la
   misma malla de puntos del hero (heredada de la regla body.archive). */

/* Hero del glosario (título + intro) */
.elementor-widget.hb-glo-title .elementor-heading-title,
.hb-glo-title .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 3.25rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--blog-text);
	text-align: center;
}

.hb-glo-intro {
	max-width: 45rem;
	margin: 0.625rem auto 0;
	text-align: center;
}

.hb-glo-intro p {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--blog-muted);
}

/* --- Widget glosario --- */
.hb-glo {
	font-family: var(--hb-font-display);
	color: var(--blog-text);
}

/* Buscador */
.hb-glo__searchwrap {
	position: relative;
	max-width: 43.75rem;
	margin: 0 auto 2.125rem;
}

.hb-glo__searchicon {
	position: absolute;
	left: 1.125rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--blog-faint);
	font-size: 0.9375rem;
	pointer-events: none;
}

/* La especificidad extra (.hb-glo__searchwrap) gana a la regla de inputs del
   kit de Elementor; si no, el padding izquierdo se pierde y el placeholder se
   pisa con la lupa. */
.hb-glo__searchwrap .hb-glo__search {
	width: 100%;
	border: 1px solid var(--blog-line);
	border-radius: 0.25rem;
	background: #fff;
	padding: 0.875rem 1.125rem 0.875rem 3rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	color: var(--blog-text);
	outline: none;
	transition: border-color 0.2s ease;
}

.hb-glo__search:focus {
	border-color: var(--blog-accent);
}

.hb-glo__search::placeholder {
	color: var(--blog-faint);
}

/* Índice alfabético A-Z */
.hb-glo__alpha {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem 0.875rem;
	margin-bottom: 3rem;
}

.hb-glo__alphaitem {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--blog-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

a.hb-glo__alphaitem:hover {
	color: var(--blog-accent);
}

.hb-glo__alphaitem.is-empty {
	color: var(--blog-faint);
	opacity: 0.55;
	cursor: default;
}

/* Cuerpo: índice lateral + contenido */
.hb-glo__body {
	display: grid;
	grid-template-columns: 13.125rem 1fr;
	gap: 3.5rem;
	align-items: start;
}

/* Índice lateral (sticky) */
.hb-glo__index {
	position: sticky;
	top: 6rem;
	max-height: calc(100vh - 7.5rem);
	overflow-y: auto;
	padding-right: 0.5rem;
}

.hb-glo__idxgroup {
	margin-bottom: 1.125rem;
}

.hb-glo__idxletter {
	display: block;
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 1rem;
	color: var(--blog-text);
	text-decoration: none;
	margin-bottom: 0.375rem;
}

.hb-glo__idxletter:hover {
	color: var(--blog-accent);
}

.hb-glo__idxlist {
	list-style: disc;
	margin: 0;
	padding-left: 1.125rem;
}

.hb-glo__idxlist li {
	margin-bottom: 0.25rem;
}

.hb-glo__idxlink {
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--blog-muted);
	text-decoration: none;
}

.hb-glo__idxlink:hover {
	color: var(--blog-accent);
}

/* Contenido principal */
.hb-glo__section {
	scroll-margin-top: 6rem;
	margin-bottom: 2.5rem;
}

.hb-glo__letter {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--blog-text);
	margin: 0 0 1.25rem;
}

.hb-glo__term {
	scroll-margin-top: 6rem;
	margin-bottom: 2.125rem;
}

.hb-glo__term-title {
	font-family: var(--hb-font-display);
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.3;
	color: var(--blog-text);
	margin: 0 0 0.75rem;
}

.hb-glo__term-body {
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--blog-text);
}

.hb-glo__term-body p {
	margin: 0 0 0.875rem;
}

.hb-glo__term-body ul,
.hb-glo__term-body ol {
	margin: 0 0 0.875rem;
	padding-left: 1.375rem;
}

.hb-glo__term-body li {
	margin-bottom: 0.375rem;
}

.hb-glo__term-body a {
	color: var(--blog-accent);
	text-decoration: underline;
}

.hb-glo__empty {
	text-align: center;
	color: var(--blog-muted);
	font-family: var(--hb-font-display);
	font-weight: 300;
}

@media (max-width: 900px) {
	.hb-glo__body {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.hb-glo__index {
		position: static;
		max-height: none;
		display: none; /* en móvil basta con la barra A-Z superior */
	}
	.elementor-widget.hb-glo-title .elementor-heading-title,
	.hb-glo-title .elementor-heading-title {
		font-size: 2.375rem;
	}
}

/* ==========================================================================
   FICHA DE AUTOR (archivo /author/…/) — tema claro, estructura del blog
   ========================================================================== */
/* El archivo de autor es un "archive": hereda el tema claro y el header/footer
   claros. No queremos la malla de puntos del hero del blog aquí. */
body.author {
	background-image: none !important;
	background: var(--blog-bg) !important;
}

.hb-author-page {
	font-family: var(--hb-font-display);
	color: var(--blog-text);
}

/* --- Cabecera --- */
.hb-author-page__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2.5rem;
	margin-bottom: 2.125rem;
}

.hb-author-page__info {
	max-width: 38.75rem;
}

.hb-author-page__name {
	margin: 0 0 0.25rem;
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 1.875rem;
	line-height: 1.2;
	color: var(--blog-text);
}

.hb-author-page__role {
	margin: 0 0 1.125rem;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.125rem;
	color: var(--blog-text);
}

.hb-author-page__bio {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--blog-muted);
}

.hb-author-page__aside {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.hb-author-page__avatar {
	width: 9.375rem;
	height: 9.375rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--blog-soft);
}

.hb-author-page__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hb-author-page__linkedin {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 0.875rem;
	color: var(--blog-muted);
	text-decoration: none;
}

.hb-author-page__linkedin i {
	color: var(--blog-accent);
	font-size: 0.9375rem;
}

.hb-author-page__linkedin:hover {
	color: var(--blog-accent);
}

/* --- CTA --- */
.hb-author-page__cta {
	border: 1px solid var(--blog-line);
	border-radius: 0.375rem;
	padding: 1.875rem 2.5rem;
	text-align: center;
	margin-bottom: 3.75rem;
}

.hb-author-page__cta-text {
	margin: 0 auto 1.25rem;
	max-width: 40rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--blog-text);
}

.hb-author-page__cta-text strong {
	font-weight: 700;
}

.hb-author-page__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6875rem 1.5rem;
	border: 1px solid var(--blog-line);
	border-radius: 0.125rem;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--blog-text);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

a.hb-author-page__cta-btn:hover {
	background: var(--blog-text);
	color: #fff;
}

/* --- Encabezados de sección --- */
.hb-author-page__h2 {
	margin: 0 0 1.5rem;
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: 1.375rem;
	color: var(--blog-text);
}

.hb-author-page__featured {
	margin-bottom: 3.5rem;
}

/* --- Carrusel de destacados --- */
.hb-authfeat__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hb-authfeat__track::-webkit-scrollbar {
	display: none;
}

.hb-authfeat__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: 18.75rem 1fr;
	gap: 1.875rem;
	align-items: center;
}

.hb-authfeat__img {
	display: block;
	border-radius: 0.125rem;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	background: var(--blog-soft);
}

.hb-authfeat__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hb-authfeat__ph {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--blog-soft);
}

.hb-authfeat__title {
	display: block;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--blog-text);
	text-decoration: none;
	margin-bottom: 0.625rem;
}

.hb-authfeat__title:hover {
	color: var(--blog-accent);
}

.hb-authfeat__excerpt {
	margin: 0 0 0.875rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--blog-muted);
}

.hb-authfeat__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.hb-authfeat__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: var(--blog-line);
	cursor: pointer;
	transition: background 0.2s ease;
}

.hb-authfeat__dot.is-active {
	background: var(--blog-accent);
}

.hb-author-page__empty {
	text-align: center;
	color: var(--blog-muted);
}

@media (max-width: 780px) {
	.hb-author-page__head {
		flex-direction: column-reverse;
		align-items: center;
		text-align: center;
	}
	.hb-authfeat__slide {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.hb-author-page__cta {
		padding: 1.5rem 1.25rem;
	}
}

/* ==========================================================================
   Firma del post enlazable a la ficha de autor
   ========================================================================== */
/* Byline de las tarjetas: hereda el gris, resalta al pasar. */
.hb-bcard__author a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.hb-bcard__author a:hover {
	color: var(--blog-accent);
}

/* Nombre en la caja "Escrito por…" de la entrada. */
.hb-author__namelink {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.hb-author__namelink:hover {
	color: var(--blog-accent);
}

/* ==========================================================================
   FOOTER MÓVIL (claro y oscuro) — Figma blog móvil (7920:3084)
   Centrado, una columna: logo → "Building with data" → redes + botón Contacto
   → datos de contacto → divisor → legal. Se ocultan las columnas de nav.
   ========================================================================== */
@media (max-width: 880px) {

	/* --- Sección 1: apilar y centrar --- */
	.elementor-location-footer > .elementor-top-section:first-of-type > .elementor-container {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.elementor-location-footer > .elementor-top-section:first-of-type > .elementor-container > .elementor-column {
		width: 100% !important;
		max-width: 26.25rem;
	}

	/* Ocultar las 4 columnas de enlaces (Servicios, Sectores, Hubler, Recursos) */
	.elementor-location-footer > .elementor-top-section:first-of-type > .elementor-container > .elementor-column:nth-child(n+2):nth-child(-n+5) {
		display: none;
	}

	/* Columna 1 (logo + tagline + redes): centrar su contenido */
	.elementor-location-footer .hb-e-footer-logo {
		text-align: center;
	}
	.elementor-location-footer .hb-e-footer-logo img {
		width: 11.875rem;
	}
	.elementor-location-footer .elementor-widget-social-icons .elementor-social-icons-wrapper {
		justify-content: center;
	}

	/* Columna Contacto (la 6ª): ocultar su título "Contacto", centrar y subir el
	   botón para que quede junto a las redes, como en el diseño. */
	.elementor-location-footer > .elementor-top-section:first-of-type > .elementor-container > .elementor-column:nth-child(6) .elementor-widget-heading {
		display: none;
	}
	.elementor-location-footer > .elementor-top-section:first-of-type > .elementor-container > .elementor-column:nth-child(6) > .elementor-widget-wrap {
		align-content: center;
		justify-content: center;
	}
	.elementor-location-footer > .elementor-top-section:first-of-type > .elementor-container > .elementor-column:nth-child(6) .elementor-widget-button {
		order: -1;
		text-align: center;
		width: 100%;
		margin-bottom: 1.125rem;
	}
	.elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-items {
		align-items: center;
		text-align: center;
	}
	.elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-item,
	.elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-item > a {
		justify-content: center !important;
		width: 100%;
	}
	.elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-text {
		text-align: center;
	}

	/* --- Sección 2 (legal): apilar y centrar --- */
	.elementor-location-footer > .elementor-top-section:last-of-type > .elementor-container {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.625rem;
	}
	.elementor-location-footer > .elementor-top-section:last-of-type > .elementor-container > .elementor-column {
		width: 100% !important;
	}
	.hb-e-footer-bottom p,
	.hb-e-legal {
		text-align: center;
		justify-content: center;
	}

	/* --- Newsletter: formulario apilado (input arriba, Enviar abajo) --- */
	.hb-nl__form {
		flex-direction: column;
	}
	.hb-nl__form input,
	.hb-nl__form button {
		width: 100%;
	}
	.hb-nl__form button {
		padding: 0.875rem 1.625rem;
	}
}

/* ==========================================================================
   ENTRADA (single) RESPONSIVE — Figma post móvil (7916:8961)
   Una columna: se oculta el sidebar (Contenido/Lo más leído/Síguenos), el
   breadcrumb va en una línea (título truncado) y la caja de autor se centra.
   ========================================================================== */
@media (max-width: 900px) {

	/* Breadcrumb: una sola línea; el título actual se trunca con "…" */
	.hb-blog-crumbs .hb-breadcrumb {
		flex-wrap: nowrap;
		max-width: 100%;
	}
	.hb-blog-crumbs .hb-breadcrumb a,
	.hb-blog-crumbs .hb-breadcrumb > span {
		white-space: nowrap;
	}
	.hb-blog-crumbs .hb-breadcrumb .hb-breadcrumb__current {
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
		flex-shrink: 1;
	}

	/* Cuerpo del post a una columna: ocultar el sidebar y estirar el contenido */
	.hb-single-body > .elementor-container > .elementor-column:first-child {
		width: 100% !important;
	}
	.hb-single-body > .elementor-container > .elementor-column:last-child {
		display: none;
	}

	/* Caja de autor centrada */
	.hb-author {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.875rem;
	}
	.hb-author__bio {
		max-width: none;
	}

	/* "Comparte este artículo" e iconos alineados a la izquierda (como el resto) */
	.hb-share-label {
		display: block;
	}
}

/* ==========================================================================
   PÁGINAS DE SECTOR (boceto wordpress/bocetos/sectores — Figma 8140:10495)
   Unidades en rem: 1rem = 16px (medida de Figma ÷ 16). Solo quedan en px las
   líneas de 1px y los puntos de corte de las @media.
   Mismo método que servicios: secciones/columnas/widgets nativos con clases
   `hb-e-sec-*` (en la sección o columna) y `hb-sec-*` (en el widget). El
   `.elementor-widget` de más sube la especificidad para ganar al kit.
   ========================================================================== */

/* --- Hero: antetítulo + titular, con la trama de puntos sangrando a la derecha --- */
.elementor-section.hb-e-sec-hero {
	position: relative;
	/* Sin recorte vertical: la trama baja por debajo del titular, como en Figma.
	   El desborde lateral ya lo recorta `html, body { overflow-x: clip }`. */
	overflow: visible;
}

/* El hero va en un contenedor más ancho que el resto (1568px de Figma → 98rem):
   su texto arranca a la izquierda del contenido, como en el diseño. */
.elementor-section.hb-e-sec-hero > .elementor-container {
	max-width: 98rem;
}

/* La trama se ancla a la sección (no a la columna) para llegar al borde real
   de la ventana, como en el diseño. */
.elementor-section.hb-e-sec-hero > .elementor-container,
.elementor-section.hb-e-sec-hero .elementor-column,
.elementor-section.hb-e-sec-hero .elementor-widget-wrap {
	position: static;
}

.elementor-widget.hb-sec-hero__dots {
	position: absolute;
	/* Cabecera de 1900x253 con fondo transparente (una por sector, en Medios):
	   a sangre, pegada a la derecha y justo bajo la barra de navegación. */
	top: 0.5625rem;
	right: 0;
	width: 100%;
	max-width: 118.75rem;
	z-index: 0;
	pointer-events: none;
}

.hb-sec-hero__dots img {
	display: block;
	width: 100%;
	height: auto;
}

.elementor-section.hb-e-sec-hero .elementor-widget:not(.hb-sec-hero__dots) {
	position: relative;
	z-index: 1;
}

.elementor-widget.hb-sec-hero__eyebrow .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.25rem;
	line-height: normal;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	background: var(--hb-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	width: max-content;
}

.elementor-widget.hb-sec-hero__title .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	line-height: 1.1;
	color: var(--hb-lavender);
}

/* --- Titulares y cuerpos comunes de sector --- */
.elementor-widget.hb-sec-title .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	line-height: 1.2;
	color: var(--hb-lavender);
}

.elementor-widget.hb-sec-lead,
.elementor-widget.hb-sec-lead p {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	line-height: 1.36;
	color: var(--hb-lavender);
}

.elementor-widget.hb-sec-body,
.elementor-widget.hb-sec-body p {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	line-height: 1.35;
	color: var(--hb-lavender);
}

/* Retos: el cuerpo va más suelto (30/20 en Figma) */
.elementor-widget.hb-sec-body--loose p {
	line-height: 1.5;
}

/* Enlace "Habla con un experto" a 20px, como en servicios */
.elementor-widget.hb-sec-link .hb-link-grad {
	font-size: 1.25rem;
}

.elementor-widget.hb-sec-body--sm,
.elementor-widget.hb-sec-body--sm p {
	font-size: 1.125rem;
}

/* Columna de texto apilada con hueco (19px en Figma) */
.elementor-column.hb-e-sec-stack > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1875rem;
}

/* Elementor añade 20px bajo cada widget (`.elementor-widget:not(:last-child)`);
   en los bloques de sector el hueco lo pone el `gap` de cada caja, así que se
   anula para que las medidas coincidan con Figma. */
.hb-e-sec-stack > .elementor-widget-wrap > .elementor-widget,
.hb-e-sec-stat > .elementor-widget-wrap > .elementor-widget,
.hb-e-sec-testi-card > .elementor-widget-wrap > .elementor-widget,
.hb-e-sec-cta-col > .elementor-widget-wrap > .elementor-widget {
	margin-bottom: 0;
}

/* En secciones con "Posición del contenido: centro" la columna de texto se
   centra respecto a la foto (el flex en columna anulaba el centrado nativo). */
.elementor-section-content-middle .hb-e-sec-stack > .elementor-widget-wrap {
	justify-content: center;
}

/* Hero: el titular va pegado al antetítulo (4px en Figma) */
.elementor-section.hb-e-sec-hero .hb-e-sec-stack > .elementor-widget-wrap {
	gap: 0.25rem;
}

/* Fotos de sector: esquinas de 7px y recorte a la caja */
.elementor-widget.hb-sec-photo img {
	width: 100%;
	aspect-ratio: 656 / 452;
	object-fit: cover;
	border-radius: 0.4375rem;
}

.elementor-widget.hb-sec-photo--wide img {
	aspect-ratio: 656 / 390;
}

/* --- Cifras (4 celdas con borde fino) --- */
/* `nowrap` sin alto fijo: con el `wrap` de Elementor y height:100%, en móvil la
   etiqueta saltaba a una segunda columna al lado del número. La columna ya
   estira la celda a la altura de la fila. */
.elementor-column.hb-e-sec-stat > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 1.75rem;
	padding: 2.75rem 2.5rem 1.3125rem;
	border: 1px solid rgba(175, 174, 231, 0.22);
	background: linear-gradient(180deg, rgba(175, 174, 231, 0.04) 0%, rgba(175, 174, 231, 0) 100%);
}

/* Las celdas comparten borde: se solapan 1px */
.elementor-column.hb-e-sec-stat + .elementor-column.hb-e-sec-stat > .elementor-widget-wrap {
	margin-left: -1px;
}

.elementor-widget.hb-sec-stat__num .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 800;
	font-size: clamp(2.375rem, 2.9vw, 3.3125rem);
	line-height: 1;
	color: #c9c8f3;
}

.elementor-widget.hb-sec-stat__label,
.elementor-widget.hb-sec-stat__label p {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--hb-lavender);
}

/* --- Frase destacada con barra vertical + botón --- */
.elementor-column.hb-e-sec-quote > .elementor-widget-wrap {
	position: relative;
	padding: 0 1.25rem 0 clamp(1.75rem, 4.5vw, 4.5rem);
}

.elementor-column.hb-e-sec-quote > .elementor-widget-wrap::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0.125rem;
	background: linear-gradient(180deg, #ffb663 0%, #afaee7 100%);
}

.elementor-widget.hb-sec-quote__text .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: clamp(1.625rem, 2.8vw, 2.5rem);
	line-height: 1.2;
	background: var(--hb-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* --- Logos de clientes en cinta continua --- */
.elementor-widget.hb-sec-eyebrow .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.25rem;
	line-height: normal;
	letter-spacing: 0.14375rem;
	color: var(--hb-lavender);
	text-align: center;
}

.elementor-column.hb-e-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* La lista va duplicada en el editor (dos tandas iguales): desplazar el -50%
   deja la segunda tanda justo donde empezaba la primera y el bucle no salta. */
.elementor-column.hb-e-marquee > .elementor-widget-wrap {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	animation: hb-marquee 40s linear infinite;
}

.elementor-column.hb-e-marquee .elementor-widget-image {
	width: auto !important;
	flex-shrink: 0;
	margin-right: clamp(2.5rem, 3.4vw, 4.0625rem);
}

.hb-e-marquee img {
	filter: brightness(0) invert(1);
	opacity: 0.5;
	object-fit: contain;
	max-height: 1.875rem;
}

.elementor-column.hb-e-marquee:hover > .elementor-widget-wrap {
	animation-play-state: paused;
}

@keyframes hb-marquee {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-column.hb-e-marquee > .elementor-widget-wrap {
		animation: none;
	}
}

/* --- Retos: tarjeta de lista sin resplandor y a 16px --- */
.elementor-column.hb-e-benefits-card.hb-e-sec-card--plain::before {
	display: none;
}

.elementor-column.hb-e-benefits-card.hb-e-sec-card--plain > .elementor-widget-wrap {
	align-self: flex-start;
	margin-top: 3.125rem;
	min-height: 0;
	max-width: 38.75rem;
	padding: 2.75rem 2.5rem 2.75rem 2.875rem;
	border-radius: 1rem;
	box-shadow: 0 0 3.125rem -0.625rem rgba(17, 24, 39, 0.35);
}

.elementor-widget.hb-e-benefits-list.hb-sec-list--sm .elementor-icon-list-item .elementor-icon-list-text {
	font-size: 1.0625rem;
	line-height: 2.24;
}

/* --- Servicios del sector: marco de líneas + rejilla de 6 ---
   Medidas del boceto (1900 de lienzo, contenedor 1440):
   · Las verticales del marco (bordes del contenedor) NO son continuas: se cortan
     ~20px antes y ~35px después de cada horizontal.
   · Las horizontales van a sangre con un hueco en cada esquina (~30px por fuera
     y ~32px por dentro de la vertical izquierda; ~20/42 en la derecha).
   · Separadores de fila metidos hacia dentro (20px en la columna izquierda,
     44px en la derecha, que además asoma 6px por fuera del marco).
   · Entre columnas, un tramo vertical corto (75px) centrado en cada fila.
   · La última fila no lleva separador: la cierra la horizontal inferior. */
.elementor-section.hb-e-sec-frame > .elementor-container {
	position: relative;
}

/* Verticales del marco (izquierda ::before del contenedor, derecha en la
   columna/widget, ver abajo). Se dibujan con un solo pseudo de 1px por lado. */
.elementor-section.hb-e-sec-frame > .elementor-container::before,
.elementor-section.hb-e-sec-frame > .elementor-container::after {
	content: "";
	position: absolute;
	width: 1px;
	background: rgba(175, 174, 231, 0.55);
	pointer-events: none;
}

.elementor-section.hb-e-sec-frame > .elementor-container::before {
	left: 0;
}

.elementor-section.hb-e-sec-frame > .elementor-container::after {
	right: 0;
}

/* Cabecera: verticales desde 30px abajo de su arranque hasta 20px antes de la
   horizontal inferior */
.elementor-section.hb-e-sec-frame--head > .elementor-container::before,
.elementor-section.hb-e-sec-frame--head > .elementor-container::after {
	top: 0;
	bottom: 1.25rem;
}

/* Rejilla: arrancan 36px bajo la horizontal y acaban ~24px antes de la de abajo */
/* La sección lleva 36px de padding inferior (hueco hasta la horizontal): por
   eso los finales son negativos respecto al contenedor. */
.elementor-section.hb-e-sec-frame--grid > .elementor-container::before {
	top: 2.25rem;
	bottom: -0.75rem;
}

.elementor-section.hb-e-sec-frame--grid > .elementor-container::after {
	top: 3rem;
	bottom: -0.375rem;
}

/* Horizontal a sangre con huecos en las esquinas. El pseudo va en la sección y
   ocupa toda la ventana; los huecos se recortan con máscara respecto al
   contenedor (--hb-fw = ancho del contenedor). */
.elementor-section.hb-e-sec-frame {
	--hb-fw: min(100vw - 2.5rem, 90rem);
	position: relative;
}

.elementor-section.hb-e-sec-frame::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: rgba(175, 174, 231, 0.55);
	--hb-l: calc((100% - var(--hb-fw)) / 2);
	--hb-r: calc(100% - (100% - var(--hb-fw)) / 2);
	-webkit-mask-image: linear-gradient(
		to right,
		#000 calc(var(--hb-l) - 1.875rem),
		transparent calc(var(--hb-l) - 1.875rem),
		transparent calc(var(--hb-l) + 2rem),
		#000 calc(var(--hb-l) + 2rem),
		#000 calc(var(--hb-r) - 1.25rem),
		transparent calc(var(--hb-r) - 1.25rem),
		transparent calc(var(--hb-r) + 2.625rem),
		#000 calc(var(--hb-r) + 2.625rem)
	);
	mask-image: linear-gradient(
		to right,
		#000 calc(var(--hb-l) - 1.875rem),
		transparent calc(var(--hb-l) - 1.875rem),
		transparent calc(var(--hb-l) + 2rem),
		#000 calc(var(--hb-l) + 2rem),
		#000 calc(var(--hb-r) - 1.25rem),
		transparent calc(var(--hb-r) - 1.25rem),
		transparent calc(var(--hb-r) + 2.625rem),
		#000 calc(var(--hb-r) + 2.625rem)
	);
	pointer-events: none;
}

/* Título: barra degradada de 3px encima de la vertical del marco, texto a 68px */
.elementor-column.hb-e-sec-frame-title > .elementor-widget-wrap {
	position: relative;
	padding: 0 5rem 0 clamp(1.75rem, 4.7vw, 4.25rem);
}

.elementor-column.hb-e-sec-frame-title > .elementor-widget-wrap::before {
	content: "";
	position: absolute;
	left: -1px;
	top: -0.5rem;
	bottom: -0.5rem;
	width: 0.1875rem;
	background: linear-gradient(180deg, #ffb663 0%, #afaee7 100%);
	z-index: 1;
}

.elementor-widget.hb-sec-svc__title .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	line-height: 1.2;
	color: var(--hb-lavender);
}

.elementor-widget.hb-sec-svc__intro,
.elementor-widget.hb-sec-svc__intro p {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	line-height: 1.35;
	color: var(--hb-lavender);
}

/* Rejilla: icon-list nativo en 2 columnas */
.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-icon {
	display: none;
}

.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item {
	position: relative;
	display: block;
	margin: 0;
	min-height: 7.5rem;
	padding: 1.875rem 2.5rem 1.875rem 4.625rem;
	background: none;
}

/* Columna derecha: el texto arranca más adentro (818px del lienzo → 98px) */
.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item:nth-child(even) {
	padding-left: 6.125rem;
	/* Tramo vertical corto entre columnas, centrado en la fila */
	background: linear-gradient(rgba(175, 174, 231, 0.55), rgba(175, 174, 231, 0.55)) no-repeat 1.125rem 50% / 1px 4.6875rem;
}

/* Viñeta hexagonal */
.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item::before {
	content: "";
	position: absolute;
	left: 2.4375rem;
	top: 2.4375rem;
	width: 0.6875rem;
	height: 0.75rem;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	background: #f3c7a0;
}

.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item:nth-child(even)::before {
	left: 3.9375rem;
}

/* Separador de fila, metido hacia dentro. Elementor ya usa este ::after para
   sus divisores con `width: 100%`, que anula el `right`: se fuerza `auto`. */
.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 1.25rem;
	right: 1.125rem;
	width: auto;
	height: 1px;
	border: 0;
	background: rgba(175, 174, 231, 0.55);
}

.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item:nth-child(even)::after {
	left: 2.75rem;
	right: -0.375rem;
}

/* La última fila no lleva separador */
.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item:nth-last-child(-n + 2)::after {
	display: none;
}

.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item .elementor-icon-list-text {
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: clamp(1.125rem, 1.55vw, 1.375rem);
	line-height: 1.36;
	color: var(--hb-lavender);
}

/* --- Testimonios --- */
.elementor-section.hb-e-sec-testi {
	position: relative;
}

/* Resplandor naranja detrás de las tarjetas */
.elementor-section.hb-e-sec-testi::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(56.25rem, 90vw);
	height: 38.75rem;
	transform: translate(-50%, -55%);
	background: radial-gradient(closest-side, rgba(255, 182, 99, 0.28) 0%, rgba(255, 182, 99, 0.08) 55%, rgba(36, 33, 64, 0) 100%);
	pointer-events: none;
	z-index: 0;
}

.elementor-section.hb-e-sec-testi > .elementor-container {
	position: relative;
	z-index: 1;
	gap: 1.5625rem;
}

/* Cada tarjeta a la altura de su contenido (la central, con enlace, es más alta) */
.elementor-column.hb-e-sec-testi-card > .elementor-widget-wrap {
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-content: flex-start;
	gap: 1.3125rem;
	padding: 1.9375rem 1.875rem 2.1875rem 2.375rem;
	border-radius: 0.5rem;
	border: 1px solid rgba(175, 174, 231, 0.2);
	background: linear-gradient(200deg, rgba(175, 174, 231, 0.09) 0%, rgba(41, 39, 112, 0.14) 100%);
	backdrop-filter: blur(0.375rem);
}

/* Logo redondo + empresa/persona (Caja de imagen nativa, imagen a la izquierda) */
.elementor-widget.hb-sec-testi__who .elementor-image-box-wrapper {
	display: flex;
	align-items: center;
	gap: 0.5625rem;
	text-align: left;
}

.elementor-widget.hb-sec-testi__who .elementor-image-box-img {
	flex-shrink: 0;
	width: 5.625rem !important;
	margin: 0 !important;
}

.elementor-widget.hb-sec-testi__who .elementor-image-box-img img {
	width: 5.625rem;
	height: 5.625rem;
	border-radius: 50%;
	object-fit: cover;
}

.elementor-widget.hb-sec-testi__who .elementor-image-box-title {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--hb-lavender);
}

.elementor-widget.hb-sec-testi__who .elementor-image-box-description {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--hb-lavender);
}

.elementor-widget.hb-sec-testi__text,
.elementor-widget.hb-sec-testi__text p {
	margin: 0;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.31;
	color: var(--hb-lavender);
}

.elementor-widget.hb-sec-testi__link p {
	margin: 0;
}

.elementor-widget.hb-sec-testi__link .hb-link-grad {
	font-size: 1.125rem;
}

/* --- CTA final con suelo de rejilla en perspectiva --- */
.elementor-section.hb-e-sec-cta {
	position: relative;
	overflow: clip;
}

.elementor-section.hb-e-sec-cta::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 72%;
	background: url("../img/svc-mesh.png") center top / 100% auto no-repeat;
	opacity: 0.85;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}

.elementor-section.hb-e-sec-cta > .elementor-container {
	position: relative;
	z-index: 1;
}

.elementor-column.hb-e-sec-cta-col > .elementor-widget-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
}

.elementor-widget.hb-sec-cta__title .elementor-heading-title {
	font-family: var(--hb-font-display);
	font-stretch: 112%;
	font-weight: 700;
	font-size: clamp(1.75rem, 2.6vw, 2.375rem);
	line-height: 1.2;
	color: var(--hb-lavender);
}

.elementor-widget.hb-sec-cta__text,
.elementor-widget.hb-sec-cta__text p {
	margin: 0 auto;
	max-width: 65rem;
	font-family: var(--hb-font-display);
	font-weight: 300;
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	line-height: 1.4;
	color: var(--hb-lavender);
}

.elementor-column.hb-e-sec-cta-col .hb-e-btn {
	margin-top: 1.6875rem;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.elementor-column.hb-e-sec-stat > .elementor-widget-wrap {
		padding: 1.625rem 1.25rem 1.75rem;
	}
}

@media (max-width: 767px) {
	/* Cifras en 2x2 */
	.elementor-section.hb-e-sec-stats > .elementor-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elementor-column.hb-e-sec-stat + .elementor-column.hb-e-sec-stat > .elementor-widget-wrap {
		margin-left: 0;
	}

	.elementor-column.hb-e-sec-stat > .elementor-widget-wrap {
		margin: 0 -1px -1px 0;
	}

	/* Rejilla de servicios en una columna: sin tramos entre columnas y con
	   separador en todas las filas menos la última */
	.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-items {
		grid-template-columns: 1fr;
	}

	.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item,
	.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item:nth-child(even) {
		min-height: 0;
		padding: 1.375rem 1rem 1.375rem 3.125rem;
		background: none;
	}

	.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item::before,
	.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item:nth-child(even)::before {
		left: 1.375rem;
		top: 1.875rem;
	}

	.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item::after,
	.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item:nth-child(even)::after,
	.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item:nth-last-child(-n + 2)::after {
		display: block;
		left: 0.75rem;
		right: 0.75rem;
	}

	.elementor-widget.hb-e-sec-svcgrid .elementor-icon-list-item:last-child::after {
		display: none;
	}

	.elementor-column.hb-e-sec-frame-title > .elementor-widget-wrap {
		padding-right: 1rem;
	}

	.elementor-column.hb-e-sec-testi-card + .elementor-column.hb-e-sec-testi-card {
		margin-top: 1rem;
	}

	/* En móvil solo se ve la parte con trama (la derecha de la cabecera) */
	.elementor-widget.hb-sec-hero__dots {
		width: 200vw;
		max-width: none;
		opacity: 0.6;
	}
}