/**
 * Datanex Widgets — Soluciones (encabezado + tarjetas con icono).
 */
.dnx-solutions {
	--dnx-solutions-px: 32px;
	--dnx-solutions-py: 0px;
	--dnx-head-gap: 48px;
	--dnx-card-gap: 14px;
	--dnx-card-bg: var(--dnx-surface);
	--dnx-card-border: var(--dnx-line);
	--dnx-card-radius: var(--dnx-radius-card);

	--dnx-icon-box: 52px;
	--dnx-icon-size: 24px;
	--dnx-icon-radius: 12px;
	--dnx-icon-bg: var(--dnx-primary-tint);
	--dnx-icon-color: var(--dnx-primary);
	--dnx-icon-bg-hover: var(--dnx-accent);
	--dnx-icon-color-hover: #fff;
}

/* Sección con fondo propio (tema oscuro). */
.dnx-solutions {
	position: relative;
	isolation: isolate;
	padding-block: var(--dnx-solutions-py);
}

.dnx-solutions--oscuro {
	--dnx-solutions-py: 80px;
	background: var(--dnx-solutions-bg, var(--dnx-primary));
	color: #fff;
}

.dnx-solutions__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	mix-blend-mode: screen;
	opacity: .35;
	pointer-events: none;
}

/* Fondo de borde a borde aunque el contenedor de Elementor esté en caja. */
.dnx-solutions--full {
	width: 100vw;
	max-width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

/* Contenedor interno: el fondo puede ir de borde a borde y el contenido queda
   centrado y con margen, como el .wrap del diseño. */
.dnx-solutions__wrap {
	width: 100%;
	max-width: var(--dnx-wrap);
	margin-inline: auto;
	padding-inline: var(--dnx-solutions-px);
}

/* ---------- Encabezado ---------- */
.dnx-solutions__head {
	margin-bottom: var(--dnx-head-gap);
}

.dnx-solutions__head--dividido {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: end;
	gap: 48px;
}

.dnx-solutions__head--dividido .dnx-solutions__head-right {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.dnx-solutions__head--centrado {
	text-align: center;
}

.dnx-solutions__head--apilado .dnx-solutions__desc {
	margin-top: 18px;
}

.dnx-solutions__head--centrado .dnx-solutions__desc {
	margin-inline: auto;
}

.dnx-solutions__head--centrado .dnx-solutions__actions {
	justify-content: center;
}

.dnx-solutions__title {
	margin: 0;
	color: var(--dnx-primary);
	font-family: var(--dnx-font-display);
	font-size: clamp(40px, 5vw, 62px);
	font-weight: 400;
	letter-spacing: .5px;
	line-height: .95;
}

.dnx-solutions__desc {
	max-width: 620px;
	margin: 0 0 6px;
	color: var(--dnx-ink-muted);
	font-size: 17px;
	line-height: 1.55;
}

.dnx-solutions__head--centrado .dnx-solutions__desc {
	margin-top: 22px;
}

.dnx-solutions__actions {
	margin-top: 12px;
}

/* ---------- Rejilla ----------
 * Automática: tantas columnas como tarjetas (hasta el máximo). Con más tarjetas
 * que el máximo, las siguientes pasan a otra fila conservando el mismo ancho.
 */
.dnx-cards {
	--dnx-cols: repeat(var(--dnx-cols-count, 4), minmax(0, 1fr));
	display: grid;
	grid-template-columns: var(--dnx-cols);
	gap: 24px;
}

/* Botón bajo la rejilla */
.dnx-solutions__foot {
	display: flex;
	margin-top: 40px;
}

/* ---------- Tarjeta ---------- */
.dnx-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--dnx-card-gap);
	padding: 28px;
	border: 1px solid var(--dnx-card-border);
	border-radius: var(--dnx-card-radius);
	background: var(--dnx-card-bg);
	transition: transform .25s, box-shadow .25s, border-color .25s;
}

.dnx-cards--equal .dnx-card {
	height: 100%;
}

.dnx-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--dnx-shadow-lg);
}

/* Esquina decorativa */
.dnx-card--corner {
	overflow: hidden;
}

.dnx-card--corner::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 90px;
	height: 90px;
	background: linear-gradient(225deg, color-mix(in srgb, var(--dnx-accent) 12%, #fff) 50%, transparent 50%);
	transition: transform .3s;
	pointer-events: none;
}

.dnx-card--corner:hover::after {
	transform: scale(1.3);
}

.dnx-card__badge {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--dnx-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.dnx-card__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--dnx-icon-box);
	height: var(--dnx-icon-box);
	border-radius: var(--dnx-icon-radius);
	background: var(--dnx-icon-bg);
	color: var(--dnx-icon-color);
	font-size: var(--dnx-icon-size);
	transition: background .25s, color .25s;
}

.dnx-card:hover .dnx-card__icon {
	background: var(--dnx-icon-bg-hover);
	color: var(--dnx-icon-color-hover);
}

.dnx-card__icon svg {
	width: var(--dnx-icon-size);
	height: var(--dnx-icon-size);
	fill: currentColor;
}

/* Iconos SVG de trazo (los de Elementor y los subidos suelen serlo). */
.dnx-card__icon svg[stroke]:not([stroke="none"]) {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dnx-card__icon i {
	line-height: 1;
}

.dnx-card__title {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--dnx-primary);
	font-family: var(--dnx-font-body);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.dnx-card__text {
	flex: 1;
	margin: 0;
	color: var(--dnx-ink-muted);
	font-size: 15px;
	line-height: 1.55;
}

.dnx-card__link {
	align-self: flex-start;
}

/* Variante con pie: enlace abajo, separado por una línea y alineado entre tarjetas. */
.dnx-solutions--pie .dnx-card {
	--dnx-card-gap: 12px;
}

.dnx-card__foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--dnx-line);
}

.dnx-card--destacada-fondo .dnx-card__foot {
	border-top-color: rgba(255, 255, 255, .18);
}

/* ---------- Tarjeta con imagen (texto + foto) ---------- */
.dnx-card--imagen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 28px;
	padding: 32px;
}

.dnx-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--dnx-card-gap);
	min-width: 0;
}

.dnx-card--imagen .dnx-card__link {
	margin-top: auto;
}

.dnx-card__media {
	position: relative;
	min-height: 230px;
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
}

/* Mayor especificidad que ".dnx-w img { height: auto }" del núcleo. */
.dnx-card__media .dnx-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.dnx-card--imagen:hover .dnx-card__media .dnx-card__img {
	transform: scale(1.04);
}

.dnx-card--imagen-izquierda .dnx-card__media {
	order: -1;
}

/* Tarjeta destacada: fondo en color primario */
.dnx-card--destacada-fondo {
	--dnx-card-bg: var(--dnx-primary);
	--dnx-card-border: var(--dnx-primary);
	--dnx-icon-bg: var(--dnx-accent);
	--dnx-icon-color: #fff;
}

.dnx-card--destacada-fondo .dnx-card__title,
.dnx-card--destacada-fondo .dnx-card__title a,
.dnx-card--destacada-fondo .dnx-card__text,
.dnx-card--destacada-fondo .dnx-card__link {
	color: #fff;
}

.dnx-card--destacada-fondo .dnx-card__link {
	--dnx-btn-color: #fff;
}

.dnx-card--destacada-fondo.dnx-card--corner::after {
	background: linear-gradient(225deg, rgba(255, 255, 255, .1) 50%, transparent 50%);
}

/* Tarjeta destacada: solo borde y sombra */
.dnx-card--destacada-borde {
	--dnx-card-border: var(--dnx-primary);
	box-shadow: var(--dnx-shadow-lg);
}

.dnx-card--destacada-borde .dnx-card__title,
.dnx-card--destacada-borde .dnx-card__title a {
	color: var(--dnx-accent);
}

/* Título enlazado */
.dnx-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color .25s;
}

.dnx-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Refuerzo: el botón siempre por encima de cualquier capa del título,
   para que su clic (y su etiqueta GTM) llegue al propio botón. */
.dnx-card__link,
.dnx-card__foot {
	position: relative;
	z-index: 3;
}

/* Como en el diseño: el título cambia de color solo con el cursor sobre él. */
.dnx-card__title a:hover,
.dnx-card__title a:focus-visible {
	color: var(--dnx-accent);
}

.dnx-card--destacada-fondo .dnx-card__title a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ---------- Tema oscuro ---------- */
.dnx-solutions--oscuro .dnx-solutions__title {
	color: #fff;
}

.dnx-solutions--oscuro .dnx-eyebrow {
	color: color-mix(in srgb, var(--dnx-accent) 62%, #fff);
}

.dnx-solutions--oscuro .dnx-solutions__desc {
	color: rgba(255, 255, 255, .72);
}

.dnx-solutions--oscuro .dnx-solutions__actions .dnx-btn--texto,
.dnx-solutions--oscuro .dnx-solutions__foot .dnx-btn--texto {
	--dnx-btn-color: #fff;
}

.dnx-solutions--oscuro .dnx-btn--secundario {
	--dnx-btn-color: #fff;
	--dnx-btn-border: rgba(255, 255, 255, .5);
	--dnx-btn-hover: #fff;
	--dnx-btn-hover-color: var(--dnx-primary);
}

/* Tarjeta translúcida que se vuelve blanca al pasar el cursor. */
.dnx-solutions--oscuro .dnx-card:not(.dnx-card--destacada-fondo) {
	--dnx-card-bg: color-mix(in srgb, var(--dnx-deep) 75%, transparent);
	--dnx-card-border: rgba(255, 255, 255, .12);
	--dnx-icon-bg: rgba(255, 255, 255, .12);
	--dnx-icon-color: #fff;
	backdrop-filter: blur(6px);
	transition: transform .25s, box-shadow .25s, border-color .25s, background-color .25s;
}

.dnx-solutions--oscuro .dnx-card:not(.dnx-card--destacada-fondo) .dnx-card__title,
.dnx-solutions--oscuro .dnx-card:not(.dnx-card--destacada-fondo) .dnx-card__title a {
	color: #fff;
}

.dnx-solutions--oscuro .dnx-card:not(.dnx-card--destacada-fondo) .dnx-card__text {
	color: rgba(255, 255, 255, .72);
}

.dnx-solutions--oscuro .dnx-card:not(.dnx-card--destacada-fondo) .dnx-card__link {
	--dnx-btn-color: #fff;
	color: #fff;
}

.dnx-solutions--oscuro .dnx-card__foot {
	border-top-color: rgba(255, 255, 255, .14);
}

.dnx-solutions--oscuro .dnx-card:not(.dnx-card--destacada-fondo):hover {
	--dnx-card-bg: #fff;
	--dnx-card-border: #fff;
}

.dnx-solutions--oscuro .dnx-card:not(.dnx-card--destacada-fondo):hover .dnx-card__title,
.dnx-solutions--oscuro .dnx-card:not(.dnx-card--destacada-fondo):hover .dnx-card__title a {
	color: var(--dnx-primary);
}

.dnx-solutions--oscuro .dnx-card:not(.dnx-card--destacada-fondo):hover .dnx-card__text {
	color: var(--dnx-ink-muted);
}

.dnx-solutions--oscuro .dnx-card:not(.dnx-card--destacada-fondo):hover .dnx-card__link {
	--dnx-btn-color: var(--dnx-primary);
	color: var(--dnx-primary);
}

.dnx-solutions--oscuro .dnx-card:not(.dnx-card--destacada-fondo):hover .dnx-card__foot {
	border-top-color: var(--dnx-line);
}

.dnx-solutions--oscuro .dnx-card--corner::after {
	background: linear-gradient(225deg, rgba(255, 255, 255, .08) 50%, transparent 50%);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.dnx-cards--auto {
		--dnx-cols: repeat(auto-fit, minmax(240px, 1fr));
	}

	.dnx-solutions--imagen .dnx-cards--auto {
		--dnx-cols: repeat(auto-fit, minmax(420px, 1fr));
	}

	.dnx-solutions__head--dividido {
		gap: 32px;
	}
}

@media (max-width: 900px) {
	.dnx-solutions {
		--dnx-head-gap: 32px;
	}

	.dnx-solutions--oscuro {
		--dnx-solutions-py: 56px;
	}

	/* En una columna, el hueco lo da el propio grid: sin margen extra. */
	.dnx-solutions__head--dividido {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 20px;
	}

	.dnx-solutions__head--centrado .dnx-solutions__desc {
		margin-top: 16px;
	}

	.dnx-cards--auto {
		--dnx-cols: repeat(auto-fit, minmax(230px, 1fr));
	}

	.dnx-solutions--imagen .dnx-cards--auto {
		--dnx-cols: 1fr;
	}

	.dnx-card--imagen {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 24px;
	}

	.dnx-card--imagen-izquierda .dnx-card__media {
		order: 0;
	}
}

@media (max-width: 640px) {
	.dnx-cards--auto {
		--dnx-cols: 1fr;
	}

	.dnx-card {
		padding: 24px;
	}

	.dnx-solutions__title {
		font-size: clamp(32px, 9vw, 44px);
	}
}