/**
 * Datanex Widgets — Hero.
 */
.dnx-hero {
	--dnx-hero-bg: transparent;
	/* La capa del fondo oscuro sigue al color de fondo (también si se cambia en el panel). */
	--dnx-hero-overlay: var(--dnx-hero-bg);
	--dnx-hero-gap: 64px;
	--dnx-hero-radius: 24px;
	--dnx-hero-ratio: 16/8;
	--dnx-hero-align: center;
	--dnx-hero-justify: center;
	--dnx-hero-mx: auto;
	--dnx-hero-pt: 72px;
	--dnx-hero-pb: 0px;
	--dnx-hero-px: 32px;
	--dnx-hero-bg-size: cover;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	/*
	 * --dnxt-overlay-offset lo define Datanex Theme cuando el header se superpone al
	 * contenido: el fondo sube por detrás del menú y el texto baja lo mismo.
	 * Con cualquier otro theme vale 0.
	 */
	padding: calc(var(--dnx-hero-pt) + var(--dnxt-overlay-offset, 0px)) 0 var(--dnx-hero-pb);
	background: var(--dnx-hero-bg);
}

.dnx-hero--full {
	width: 100vw;
	max-width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

.dnx-hero--sin-compensar {
	--dnxt-overlay-offset: 0px;
}

.dnx-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: var(--dnx-hero-bg-size);
	pointer-events: none;
}

.dnx-hero__wrap {
	position: relative;
	/* Como .wrap del diseño: 1140 px de ancho total, con el margen lateral incluido. */
	max-width: var(--dnx-wrap);
	margin: 0 auto;
	padding-inline: var(--dnx-hero-px);
}

/* ---------- Tipografía ---------- */
.dnx-hero__title {
	margin: 26px var(--dnx-hero-mx) 0;
	max-width: 900px;
	color: var(--dnx-primary);
	font-family: var(--dnx-font-display);
	font-size: clamp(44px, 6vw, 76px);
	font-weight: 400;
	letter-spacing: .5px;
	line-height: .95;
}

.dnx-hero__mark {
	color: var(--dnx-accent);
}

.dnx-hero__desc {
	margin: 22px var(--dnx-hero-mx) 0;
	max-width: 680px;
	color: var(--dnx-ink-muted);
	font-size: 17px;
	line-height: 1.55;
}

.dnx-hero__actions {
	margin-top: 32px;
	justify-content: var(--dnx-hero-justify);
}

/* ---------- Centrado ---------- */
.dnx-hero--centrado {
	background:
		radial-gradient(ellipse 60% 50% at 50% 0%, var(--dnx-primary-soft) 0%, transparent 70%),
		var(--dnx-hero-bg);
}

.dnx-hero--centrado .dnx-hero__text {
	text-align: var(--dnx-hero-align);
}

.dnx-hero__metrics {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--dnx-hero-justify);
	gap: 28px 56px;
	margin: 44px 0 52px;
}

.dnx-hero__metric-value {
	display: block;
	color: var(--dnx-primary);
	font-family: var(--dnx-font-display);
	font-size: 48px;
	line-height: 1;
}

.dnx-hero__metric-label {
	color: var(--dnx-ink-muted);
	font-size: 13px;
	font-weight: 500;
}

.dnx-hero__visual {
	position: relative;
	max-width: 1040px;
	margin: 0 auto;
	aspect-ratio: var(--dnx-hero-ratio);
	overflow: hidden;
	border-radius: var(--dnx-hero-radius);
	box-shadow: var(--dnx-shadow-lg);
}

.dnx-hero__visual .dnx-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.dnx-hero__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(13, 29, 48, .85));
}

.dnx-hero__visual figcaption {
	position: absolute;
	left: 32px;
	bottom: 28px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
}

/* Panel ilustrativo */
.dnx-mockup {
	max-width: 980px;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid var(--dnx-line);
	border-radius: 18px 18px 0 0;
	background: #fff;
	box-shadow: var(--dnx-shadow-lg);
}

.dnx-mockup__chrome {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border-bottom: 1px solid var(--dnx-line);
	background: var(--dnx-primary-soft);
}

.dnx-mockup__chrome i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--dnx-primary-tint);
}

.dnx-mockup__chrome span {
	flex: 1;
	height: 22px;
	margin-left: 12px;
	border: 1px solid var(--dnx-line);
	border-radius: 6px;
	background: #fff;
}

.dnx-mockup__screen {
	display: grid;
	grid-template-columns: 200px 1fr;
	min-height: 420px;
	background: linear-gradient(180deg, #fff, var(--dnx-surface-alt));
}

.dnx-mockup__side {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 20px 16px;
	background: var(--dnx-primary);
}

.dnx-mockup__side i {
	display: block;
	height: 12px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .14);
}

.dnx-mockup__side i:first-child {
	height: 32px;
	border-radius: 8px;
	background: var(--dnx-accent);
}

.dnx-mockup__main {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-content: start;
	gap: 16px;
	padding: 24px;
	text-align: left;
}

.dnx-mockup__kpi {
	padding: 14px;
	border: 1px solid var(--dnx-line);
	border-radius: 10px;
	background: #fff;
}

.dnx-mockup__kpi small {
	display: block;
	color: var(--dnx-ink-muted);
	font-size: 11px;
}

.dnx-mockup__kpi b {
	color: var(--dnx-primary);
	font-family: var(--dnx-font-display);
	font-size: 26px;
	font-weight: 400;
}

.dnx-mockup__kpi em {
	margin-left: 6px;
	color: #1f9d55;
	font-size: 11px;
	font-style: normal;
}

.dnx-mockup__chart {
	grid-column: 1 / -1;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	height: 170px;
	padding: 16px;
	border: 1px solid var(--dnx-line);
	border-radius: 10px;
	background: #fff;
}

.dnx-mockup__chart i {
	flex: 1;
	border-radius: 4px 4px 0 0;
	background: var(--dnx-primary-tint);
}

.dnx-mockup__chart i.is-hi {
	background: var(--dnx-accent);
}

/* Logos */
.dnx-hero__trust {
	padding: 48px 0 0;
	text-align: center;
}

.dnx-hero__trust-title {
	margin: 0 0 22px;
	color: var(--dnx-ink-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.dnx-hero__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 24px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dnx-hero__logos span {
	color: var(--dnx-primary-tint);
	font-family: var(--dnx-font-display);
	font-size: 22px;
	letter-spacing: 2px;
}

.dnx-hero__logos img {
	max-height: 40px;
	width: auto;
	opacity: .6;
	filter: grayscale(1);
	transition: opacity .2s, filter .2s;
}

.dnx-hero__logos img:hover {
	opacity: 1;
	filter: none;
}

/* ---------- Dividido ---------- */
.dnx-hero--dividido {
	--dnx-hero-align: left;
	--dnx-hero-justify: flex-start;
	--dnx-hero-mx: 0;
	--dnx-hero-ratio: 4/5;
	--dnx-hero-pt: 80px;
	--dnx-hero-pb: 88px;
	background: linear-gradient(180deg, var(--dnx-surface-alt), #fff);
}

.dnx-hero--dividido .dnx-hero__wrap {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: var(--dnx-hero-gap);
}

.dnx-hero--dividido .dnx-hero__text {
	text-align: var(--dnx-hero-align);
}

.dnx-hero--dividido .dnx-hero__title {
	margin-top: 20px;
}

.dnx-hero--dividido .dnx-hero__actions {
	margin-top: 30px;
}

.dnx-hero__proof {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--dnx-line);
	justify-content: var(--dnx-hero-justify);
	color: var(--dnx-ink-muted);
	font-size: 14px;
	line-height: 1.55;
}

.dnx-hero__proof-item {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	min-width: 0;
	color: var(--dnx-ink-muted);
}

.dnx-hero__proof .dnx-stars {
	font-size: 16px;
}

.dnx-hero__proof-item strong {
	color: var(--dnx-primary);
}

.dnx-hero__media {
	position: relative;
}

.dnx-hero__photo {
	aspect-ratio: var(--dnx-hero-ratio);
	overflow: hidden;
	box-shadow: var(--dnx-shadow-lg);
}

.dnx-hero__photo--asimetrica {
	border-radius: 28px 28px 28px 120px;
}

.dnx-hero__photo--redondeada {
	border-radius: var(--dnx-hero-radius);
}

.dnx-hero__photo .dnx-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dnx-hero--dividido .dnx-float {
	position: absolute;
	left: -28px;
	bottom: 56px;
}

/* ---------- Fondos ---------- */
.dnx-hero--claro {
	--dnx-hero-bg-size: 1400px auto;
}

.dnx-hero--claro .dnx-hero__bg {
	mix-blend-mode: multiply;
	opacity: .9;
}

/* Claro con imagen (hero-test-2): fondo gris azulado y más aire arriba. */
.dnx-hero--claro.dnx-hero--has-bg {
	--dnx-hero-pt: 96px;
	background: var(--dnx-surface-alt);
}

.dnx-hero--claro.dnx-hero--has-bg .dnx-hero__trust {
	padding-bottom: 64px;
}

.dnx-hero--oscuro,
.dnx-hero--halos {
	--dnx-hero-bg: var(--dnx-deep);
	color: #fff;
}

.dnx-hero--oscuro {
	--dnx-hero-pt: 96px;
}

.dnx-hero--oscuro .dnx-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--dnx-hero-overlay) 55%, transparent),
		color-mix(in srgb, var(--dnx-hero-overlay) 25%, transparent) 60%,
		color-mix(in srgb, var(--dnx-hero-overlay) 90%, transparent)
	);
}

.dnx-hero--halos {
	--dnx-hero-pt: 96px;
	--dnx-hero-bg-size: 1500px auto;
}

.dnx-hero--halos.dnx-hero--centrado,
.dnx-hero--halos.dnx-hero--dividido {
	background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--dnx-primary) 0%, var(--dnx-hero-bg) 70%);
}

.dnx-hero--oscuro.dnx-hero--centrado,
.dnx-hero--oscuro.dnx-hero--dividido {
	background: var(--dnx-hero-bg);
}

.dnx-hero--halos .dnx-hero__bg {
	inset: -10% -5%;
	mix-blend-mode: screen;
	opacity: .55;
	filter: blur(6px) saturate(1.4);
}

.dnx-hero--oscuro .dnx-hero__title,
.dnx-hero--halos .dnx-hero__title,
.dnx-hero--oscuro .dnx-hero__metric-value,
.dnx-hero--halos .dnx-hero__metric-value,
.dnx-hero--oscuro .dnx-hero__proof-item strong,
.dnx-hero--halos .dnx-hero__proof-item strong {
	color: #fff;
}

.dnx-hero--oscuro .dnx-hero__desc,
.dnx-hero--halos .dnx-hero__desc {
	color: rgba(255, 255, 255, .78);
}

.dnx-hero--oscuro .dnx-hero__metric-label,
.dnx-hero--halos .dnx-hero__metric-label,
.dnx-hero--oscuro .dnx-hero__trust-title,
.dnx-hero--halos .dnx-hero__trust-title,
.dnx-hero--oscuro .dnx-hero__proof-item,
.dnx-hero--halos .dnx-hero__proof-item {
	color: rgba(255, 255, 255, .6);
}

.dnx-hero--oscuro .dnx-hero__logos span,
.dnx-hero--halos .dnx-hero__logos span {
	color: rgba(255, 255, 255, .25);
}

.dnx-hero--oscuro .dnx-hero__proof,
.dnx-hero--halos .dnx-hero__proof {
	border-color: rgba(255, 255, 255, .15);
}

.dnx-hero--oscuro .dnx-hero__trust,
.dnx-hero--halos .dnx-hero__trust {
	padding-bottom: 64px;
}

.dnx-hero--oscuro .dnx-chip,
.dnx-hero--halos .dnx-chip {
	border-color: rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .08);
	box-shadow: none;
	color: #fff;
}

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

.dnx-hero--oscuro .dnx-btn--texto,
.dnx-hero--halos .dnx-btn--texto {
	--dnx-btn-color: #fff;
}

.dnx-hero--oscuro .dnx-hero__visual,
.dnx-hero--halos .dnx-hero__visual,
.dnx-hero--oscuro .dnx-hero__photo,
.dnx-hero--halos .dnx-hero__photo {
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.dnx-hero--dividido .dnx-hero__wrap {
		grid-template-columns: 1fr;
	}

	.dnx-hero--dividido {
		--dnx-hero-ratio: 1/1;
		--dnx-hero-gap: 40px;
	}

	.dnx-hero__photo--asimetrica {
		border-radius: 20px;
	}

	.dnx-hero--dividido .dnx-float {
		position: static;
		width: max-content;
		margin-top: 16px;
	}
}

@media (max-width: 900px) {
	.dnx-hero {
		--dnx-hero-pt: 56px;
	}

	.dnx-hero--oscuro,
	.dnx-hero--halos,
	.dnx-hero--claro.dnx-hero--has-bg {
		--dnx-hero-pt: 64px;
	}

	/* B-1 conserva 80/88 px en móvil. */
	.dnx-hero--dividido {
		--dnx-hero-pt: 80px;
	}

	.dnx-hero--claro {
		--dnx-hero-bg-size: 900px auto;
	}

	.dnx-hero__metrics {
		gap: 20px 28px;
	}

	.dnx-mockup__screen {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.dnx-mockup__side {
		display: none;
	}

	.dnx-mockup__main {
		grid-template-columns: repeat(2, 1fr);
	}

	.dnx-hero--halos {
		--dnx-hero-bg-size: 900px auto;
	}
}