/* Heuristic — recursos decorativos del rediseño.
   Vocabulario permitido: retícula, filetes, corchetes de esquina, trama de puntos.
   Prohibido: degradados desenfocados, glows, píldoras pastel, radios de 16px, chips flotantes. */

:root {
	--hx-forest: #137a3a;
	--hx-lime: #a8ce3a;
	--hx-ink: #2b2b2b;
	--hx-ink-muted: #5a605a;
	--hx-paper: #f7f9f7;
	--hx-dark: #10130f;
	--hx-line: #e4e8e4;
	--hx-grid-step: 80px;
}

/* --- Retícula de 80px, desvanecida hacia abajo y hacia los lados ---------- */

.hx-grid {
	position: relative;
	isolation: isolate;
}

/* Elementor define `.e-con::before { content: var(--background-overlay) }`, que sin
   overlay resuelve a `none` y mata el pseudo. Hay que ganarle en especificidad. */
.hx-grid::before,
.hx-grid.e-con::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(19, 122, 58, 0.15) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(19, 122, 58, 0.15) 1px, transparent 1px);
	background-size: var(--hx-grid-step) var(--hx-grid-step);
	background-position: 0 0;
	/* Se desvanece hacia abajo y hacia la izquierda, como los Fade B / Fade L del comp. */
	-webkit-mask-image:
		linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 96%),
		linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 96%),
		linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
	mask-composite: intersect;
}

/* Variante sobre fondo oscuro: en el comp solo hay líneas verticales, y se ven
   claramente. A 0.05 sobre #10130F eran invisibles. */
.hx-grid--dark::before,
.hx-grid--dark.e-con::before {
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
	background-size: 80px 100%;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

/* En la tarjeta de Compañía la retícula del comp es mucho más tenue que en Cifras:
   se adivina, no se lee. Con 0.09 quedaba demasiado marcada (Juano, 2026-07-28). */
.hx-grid--dark-soft::before,
.hx-grid--dark-soft.e-con::before {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 80px 80px;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}

/* --- Trama de puntos ------------------------------------------------------ */

.hx-dots {
	position: relative;
}

.hx-dots::after,
.hx-dots.e-con::after {
	content: '';
	position: absolute;
	top: 28px;
	right: 80px;
	width: 126px;
	height: 31px;
	pointer-events: none;
	background-image: radial-gradient(rgba(19, 122, 58, 0.35) 1.5px, transparent 1.6px);
	background-size: 14px 14px;
}

/* En móvil la trama se solaparía con el texto de la sección. */
@media (max-width: 767px) {
	.hx-dots::after,
	.hx-dots.e-con::after {
		display: none;
	}
}

/* --- Corchetes de esquina ------------------------------------------------- */

.hx-brackets::before,
.hx-brackets::after,
.hx-brackets.e-con::before,
.hx-brackets.e-con::after {
	content: '';
	position: absolute;
	width: 26px;
	height: 26px;
	border-color: rgba(19, 122, 58, 0.45);
	pointer-events: none;
}

.hx-brackets::before {
	top: 36px;
	left: 40px;
	border-top: 1px solid;
	border-left: 1px solid;
}

.hx-brackets::after {
	bottom: 36px;
	right: 40px;
	border-bottom: 1px solid;
	border-right: 1px solid;
}

.hx-brackets--dark::before,
.hx-brackets--dark::after {
	border-color: rgba(168, 206, 58, 0.5);
}

/* --- Etiqueta con filete (eyebrow) --------------------------------------- */

.hx-eyebrow .elementor-heading-title,
.hx-eyebrow p {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hx-eyebrow .elementor-heading-title::before,
.hx-eyebrow p::before {
	content: '';
	flex: 0 0 auto;
	width: 22px;
	height: 1px;
	background: rgba(19, 122, 58, 0.55);
}

.hx-eyebrow--lime .elementor-heading-title::before,
.hx-eyebrow--lime p::before {
	background: rgba(168, 206, 58, 0.9);
}

.hx-eyebrow--muted .elementor-heading-title::before,
.hx-eyebrow--muted p::before {
	background: rgba(19, 122, 58, 0.55);
}

/* --- Sombra de panel (única sombra permitida) ---------------------------- */

.hx-panel {
	box-shadow: 0 12px 28px rgba(0, 26, 13, 0.07);
}

/* --- Filas de estado del mock ------------------------------------------- */

.hx-row-label .elementor-heading-title {
	white-space: nowrap;
}

/* --- Etiqueta centrada entre dos filetes --------------------------------- */

.hx-rule-both {
	width: 100%;
}

.hx-rule-both .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 20px;
	white-space: nowrap;
}

.hx-rule-both .elementor-heading-title::before,
.hx-rule-both .elementor-heading-title::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--hx-line);
}

/* --- Muro de logos con filetes ------------------------------------------ */

.hx-wall-row {
	width: 100%;
}

.hx-wall-cell {
	min-width: 0;
	border-right: 1px solid var(--hx-line);
	border-bottom: 1px solid var(--hx-line);
}

/* Sin filete en la última columna ni en la última fila */
.hx-wall-cell:nth-child(6n) {
	border-right: 0;
}

.hx-wall-row:last-child > .hx-wall-cell {
	border-bottom: 0;
}

.hx-wall-logo img {
	height: 28px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

@media (max-width: 1024px) {
	.hx-wall-cell:nth-child(6n) {
		border-right: 1px solid var(--hx-line);
	}

	.hx-wall-cell:nth-child(3n) {
		border-right: 0;
	}

	.hx-wall-row:last-child > .hx-wall-cell:nth-last-child(-n+3) {
		border-bottom: 0;
	}
}

@media (max-width: 767px) {
	.hx-wall-cell:nth-child(3n) {
		border-right: 1px solid var(--hx-line);
	}

	.hx-wall-cell:nth-child(2n) {
		border-right: 0;
	}

	.hx-wall-row:last-child > .hx-wall-cell:nth-last-child(-n+2) {
		border-bottom: 0;
	}

	.hx-wall-logo img {
		height: 24px;
	}
}

/* --- Columnas separadas por filete -------------------------------------- */

.hx-cols > .hx-col {
	border-right: 1px solid var(--hx-line);
}

.hx-cols > .hx-col:last-child {
	border-right: 0;
}

@media (max-width: 767px) {
	.hx-cols > .hx-col {
		border-right: 0;
		border-bottom: 1px solid var(--hx-line);
	}

	.hx-cols > .hx-col:last-child {
		border-bottom: 0;
	}
}

/* --- Ilustraciones de credencial ---------------------------------------- */

.hx-illus {
	position: relative;
	overflow: hidden;
}

/* Trama de puntos de fondo, en lugar de los anillos concéntricos del comp */
.hx-illus::before,
.hx-illus.e-con::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(19, 122, 58, 0.16) 1.5px, transparent 1.6px);
	background-size: 14px 14px;
	-webkit-mask-image: linear-gradient(to top left, #000 0%, transparent 70%);
	mask-image: linear-gradient(to top left, #000 0%, transparent 70%);
}

.hx-illus-card {
	box-shadow: 0 8px 20px rgba(0, 26, 13, 0.1);
	position: relative;
}

/* Variante oscura de las columnas con filete */
.hx-cols--dark > .hx-col {
	border-right-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 767px) {
	.hx-cols--dark > .hx-col {
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}
}

/* --- Tarjetas y bento ---------------------------------------------------- */

.hx-card {
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.hx-card:hover {
	border-color: rgba(19, 122, 58, 0.45);
}

/* Botón cuadrado de flecha */
.hx-arrowbtn {
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.hx-arrowbtn:hover {
	border-color: #137a3a;
	background-color: #e4f2e6;
}

/* Línea discontinua que une los dos paneles del visual de migración */
.hx-dash {
	flex: 1 1 auto;
	min-width: 24px;
	height: 0;
	border-top: 2px dashed rgba(19, 122, 58, 0.3);
}

/* Las dos tarjetas de la columna reparten la altura de la tarjeta grande */
.hx-stretch {
	align-self: stretch;
}

.hx-stretch > .e-con {
	flex: 1 1 0;
}

@media (max-width: 767px) {
	.hx-migration {
		flex-direction: column !important;
	}

	.hx-dash {
		width: 0;
		min-height: 34px;
		border-top: 0;
		border-left: 2px dashed rgba(19, 122, 58, 0.3);
		margin-inline: auto;
	}

	.hx-migration {
		gap: 20px !important;
	}
}

/* --- Retícula vertical de los visuales de Proceso ------------------------ */

.hx-vgrid {
	position: relative;
	overflow: hidden;
}

.hx-vgrid::before,
.hx-vgrid.e-con::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(to right, rgba(19, 122, 58, 0.06) 1px, transparent 1px);
	background-size: 32px 100%;
}

/* Etiqueta de fase */
.hx-tag .elementor-heading-title {
	display: inline-block;
	padding: 5px 9px;
	background: #ffffff;
	border: 1px solid var(--hx-line);
	border-radius: 4px;
	white-space: nowrap;
}

.hx-nowrap .elementor-heading-title {
	white-space: nowrap;
}

.hx-node,
.e-con.hx-node {
	position: relative;
	z-index: 1;
	/* Ancho al contenido: Elementor da width:100% a los contenedores hijos. */
	width: auto;
}

/* --- Utilidades de la sección de cierre ---------------------------------- */

.hx-center .elementor-heading-title {
	text-align: center;
}

.hx-measure {
	max-width: 620px;
	margin-inline: auto;
}

/* La etiqueta con filete se centra cuando la sección va centrada */
.hx-center-eyebrow .hx-eyebrow .elementor-heading-title,
.hx-grid .hx-eyebrow.hx-eyebrow--center .elementor-heading-title {
	justify-content: center;
}

/* --- Diagrama de red del paso «Diseño e implantación» -------------------- */

/* Mismo marco que los otros dos visuales del paso: en el comp los tres son
   idénticos (fondo verde muy claro, retícula y 183px de alto). Sin él, el paso 02
   parecía flotar y desalineaba los cuerpos de las tres tarjetas. */
.hx-net {
	position: relative;
	width: 100%;
	height: 200px;
	background: #f2f6f2;
}

.hx-net-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hx-net-node {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 11px;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(0, 26, 13, 0.1);
	font-family: 'Aeonik', sans-serif;
	font-size: 11px;
	font-weight: 500;
	color: #2b2b2b;
	white-space: nowrap;
}

/* El padding del marco no desplaza a los hijos absolutos (se posicionan sobre el
   borde interior), así que los márgenes van en los propios nodos. */
.hx-net-node.is-tl { top: 30px; left: 20px; }
.hx-net-node.is-tr { top: 30px; right: 20px; }
.hx-net-node.is-bl { bottom: 30px; left: 20px; }
.hx-net-node.is-br { bottom: 30px; right: 20px; }

.hx-net-node.is-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #137a3a;
	color: #ffffff;
}

@media (max-width: 767px) {
	.hx-net {
		height: 200px;
	}

	.hx-net-node {
		font-size: 10px;
		padding: 8px 10px;
	}
}

/* En móvil los corchetes quedan sueltos junto al borde: se ocultan. */
@media (max-width: 767px) {
	.hx-brackets::before,
	.hx-brackets::after,
	.hx-brackets.e-con::before,
	.hx-brackets.e-con::after {
		display: none;
	}
}

/* --- Cierre sobre forest ------------------------------------------------- */

.hx-cta {
	position: relative;
	overflow: hidden;
}

.hx-cta::before,
.hx-cta.e-con::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 80px 80px;
	-webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 40%, transparent 100%);
	mask-image: radial-gradient(120% 100% at 50% 50%, #000 40%, transparent 100%);
}

/* Arcos concéntricos del comp: aros de 1px, no manchas. El veto del cliente es a
   los degradados desenfocados y a los glows, no al trazo fino. */
.hx-cta::after,
.hx-cta.e-con::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1700px;
	height: 1700px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background-image: repeating-radial-gradient(
		circle at 50% 50%,
		rgba(255, 255, 255, 0.06) 0 1px,
		transparent 1px 220px
	);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
	mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
}

.hx-center-eyebrow .hx-eyebrow .elementor-heading-title {
	justify-content: center;
}