/* =========================================================
   VANTHEX SYSTEM — HERO 2.1
   Sección independiente. Se carga después de frontend.css.
   ========================================================= */

.tdb-hero {
	display: flex;
	align-items: center;
	height: calc(100svh - 78px);
	min-height: 640px;
	padding: clamp(22px, 4vh, 44px) 0;
	overflow: clip;
}

body.admin-bar .tdb-hero {
	height: calc(100svh - 110px);
	min-height: 610px;
}

.tdb-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
	align-items: center;
	gap: clamp(38px, 5vw, 78px);
	height: 100%;
	min-height: 0;
}

/* Copy */
.tdb-hero-copy {
	position: relative;
	z-index: 2;
	align-self: center;
	min-width: 0;
	max-width: 680px;
}

.tdb-hero .tdb-kicker {
	gap: 10px;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: .2em;
}

.tdb-hero-copy .tdb-hero-title {
	display: grid;
	gap: 0;
	max-width: 650px;
	margin: 17px 0 0;
	font-size: clamp(52px, 4.25vw, 76px);
	font-weight: 440;
	line-height: .94;
	letter-spacing: -.062em;
	background: linear-gradient(105deg, #fff 0%, #fff 60%, #b8c3d9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tdb-hero-copy .tdb-hero-title span {
	display: block;
	white-space: nowrap;
}

.tdb-hero .tdb-lead {
	max-width: 590px;
	margin: 22px 0 0;
	color: #a5adbd;
	font-size: clamp(16px, 1.1vw, 18px);
	line-height: 1.62;
}

/* CTAs alineados */
.tdb-hero .tdb-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 210px));
	align-items: stretch;
	gap: 12px;
	margin-top: 27px;
}

.tdb-hero .tdb-actions .tdb-button {
	width: 100%;
	min-width: 0;
	min-height: 52px;
	padding: 0 20px;
	justify-content: center;
	text-align: center;
}

.tdb-hero .tdb-actions .tdb-button > span,
.tdb-hero .tdb-actions .tdb-button > b {
	position: relative;
	z-index: 1;
}

.tdb-hero .tdb-actions .tdb-button > b {
	font-size: 14px;
	font-weight: 700;
}

/* Microbeneficios */
.tdb-hero .tdb-trust-row {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 9px 18px;
	margin-top: 23px;
}

.tdb-hero .tdb-trust-row span:last-child {
	grid-column: 1 / -1;
}

.tdb-hero .tdb-trust-row span {
	font-size: 11px;
	line-height: 1.3;
}

/* Panel visual */
.tdb-system-visual {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	min-width: 0;
	justify-self: end;
	perspective: 1200px;
}

.tdb-terminal-glow {
	inset: 12% 8%;
	filter: blur(64px);
	opacity: .55;
}

.tdb-terminal {
	border-radius: 22px;
	transform: rotateY(-2deg) rotateX(.6deg);
}

.tdb-terminal-head,
.tdb-terminal-foot {
	padding: 13px 16px;
	font-size: 9px;
}

.tdb-terminal-core {
	gap: 16px;
	padding: 18px 18px 5px;
}

.tdb-core-ring {
	width: 68px;
	height: 68px;
	flex-basis: 68px;
}

.tdb-core-ring b { inset: 6px; }
.tdb-core-ring em { inset: -5px; }

.tdb-core-v i {
	top: 18px;
	width: 6px;
	height: 29px;
}

.tdb-core-v i:first-child { left: 24px; }
.tdb-core-v i:last-child { right: 24px; }
.tdb-core-copy strong { font-size: 15px; }

.tdb-chart {
	height: 160px;
	margin: 5px 16px 0;
	border-radius: 14px;
}

.tdb-chart-grid { background-size: 38px 38px; }

.tdb-terminal-stats { margin-top: 12px; }

.tdb-terminal-stats div {
	gap: 5px;
	padding: 12px 14px;
}

.tdb-terminal-stats span { font-size: 8px; }
.tdb-terminal-stats strong { font-size: 13px; }

.tdb-floating-chip {
	padding: 9px 11px;
	font-size: 7px;
}

.tdb-floating-chip--one {
	left: -24px;
	bottom: 23%;
}

.tdb-floating-chip--two {
	right: -20px;
	top: 24%;
}

/* Portátiles con poca altura */
@media (min-width: 901px) and (max-height: 820px) {
	.tdb-hero {
		min-height: 580px;
		padding: 16px 0 20px;
	}

	body.admin-bar .tdb-hero { min-height: 560px; }
	.tdb-hero-grid { gap: 36px; }

	.tdb-hero-copy .tdb-hero-title {
		margin-top: 13px;
		font-size: clamp(48px, 4.1vw, 64px);
	}

	.tdb-hero .tdb-lead {
		margin-top: 16px;
		font-size: 16px;
		line-height: 1.5;
	}

	.tdb-hero .tdb-actions { margin-top: 19px; }
	.tdb-hero .tdb-trust-row { margin-top: 16px; }
	.tdb-system-visual { max-width: 500px; }

	.tdb-core-ring {
		width: 60px;
		height: 60px;
		flex-basis: 60px;
	}

	.tdb-core-v i {
		top: 15px;
		height: 27px;
	}

	.tdb-core-v i:first-child { left: 21px; }
	.tdb-core-v i:last-child { right: 21px; }
	.tdb-chart { height: 132px; }

	.tdb-terminal-stats div {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* Desktop pequeño / tablet horizontal */
@media (min-width: 901px) and (max-width: 1180px) {
	.tdb-hero-grid {
		grid-template-columns: minmax(0, 1fr) minmax(370px, .92fr);
		gap: 30px;
	}

	.tdb-hero-copy .tdb-hero-title {
		font-size: clamp(47px, 5.25vw, 62px);
	}

	.tdb-system-visual { max-width: 500px; }
}

/* Tablet */
@media (max-width: 900px) {
	.tdb-hero,
	body.admin-bar .tdb-hero {
		height: auto;
		min-height: 0;
		padding: 88px 0 72px;
		overflow: hidden;
	}

	.tdb-hero-grid {
		grid-template-columns: 1fr;
		height: auto;
		gap: 52px;
	}

	.tdb-hero-copy { max-width: 700px; }

	.tdb-hero-copy .tdb-hero-title {
		max-width: 680px;
		font-size: clamp(48px, 8.4vw, 68px);
	}

	.tdb-system-visual {
		justify-self: start;
		max-width: 680px;
	}

	.tdb-terminal { transform: none; }
}

/* Móvil */
@media (max-width: 640px) {
	.tdb-hero,
	body.admin-bar .tdb-hero { padding: 68px 0 58px; }
	.tdb-hero-grid { gap: 42px; }

	.tdb-hero .tdb-kicker {
		font-size: 9px;
		letter-spacing: .16em;
	}

	.tdb-hero-copy .tdb-hero-title {
		margin-top: 14px;
		font-size: clamp(36px, 10.5vw, 44px);
		line-height: .97;
		letter-spacing: -.055em;
	}

	.tdb-hero-copy .tdb-hero-title span {
		white-space: normal;
	}

	.tdb-hero .tdb-lead {
		margin-top: 19px;
		font-size: 16px;
		line-height: 1.55;
	}

	.tdb-hero .tdb-actions {
		grid-template-columns: 1fr;
		margin-top: 24px;
	}

	.tdb-hero .tdb-actions .tdb-button { min-height: 51px; }

	.tdb-hero .tdb-trust-row {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-top: 21px;
	}

	.tdb-hero .tdb-trust-row span:last-child { grid-column: auto; }

	.tdb-terminal-head,
	.tdb-terminal-foot {
		padding-left: 13px;
		padding-right: 13px;
	}

	.tdb-terminal-head { align-items: flex-start; }

	.tdb-terminal-core {
		padding-left: 14px;
		padding-right: 14px;
	}

	.tdb-chart {
		height: 150px;
		margin-left: 10px;
		margin-right: 10px;
	}
}

@media (max-width: 380px) {
	.tdb-hero-copy .tdb-hero-title { font-size: 34px; }
}
/* =========================================================
   VANTHEX SYSTEM — CORRECCIÓN DEL TÍTULO DEL HERO
   Evita cortes y mantiene un máximo de tres renglones
   ========================================================= */

.tdb-hero-copy {
	overflow: visible !important;
}

.tdb-hero-copy .tdb-hero-title {
	width: 100%;
	max-width: 660px;
	overflow: visible !important;

	font-size: clamp(48px, 4vw, 68px);
	line-height: 0.96;
	letter-spacing: -0.065em;
}

.tdb-hero-copy .tdb-hero-title span {
	display: block;
	width: 100%;
	max-width: 100%;
	white-space: nowrap;
	overflow: visible;
}

/*
 * Pantallas de escritorio medianas:
 * reduce ligeramente el título antes de que pueda tocar
 * el panel visual de la derecha.
 */
@media
	(min-width: 1181px)
	and (max-width: 1500px) {

	.tdb-hero-copy .tdb-hero-title {
		max-width: 620px;
		font-size: clamp(50px, 3.85vw, 62px);
	}
}

/*
 * Portátiles y escritorios pequeños.
 */
@media
	(min-width: 901px)
	and (max-width: 1180px) {

	.tdb-hero-copy .tdb-hero-title {
		max-width: 100%;
		font-size: clamp(45px, 5vw, 57px);
		letter-spacing: -0.06em;
	}
}

/*
 * En tablet permitimos que el título aproveche todo
 * el ancho disponible.
 */
@media (max-width: 900px) {

	.tdb-hero-copy .tdb-hero-title {
		max-width: 700px;
		font-size: clamp(46px, 8.2vw, 66px);
	}
}

/*
 * Ajuste móvil.
 */
@media (max-width: 640px) {

	.tdb-hero-copy .tdb-hero-title {
		max-width: 100%;
		font-size: clamp(35px, 10vw, 43px);
		line-height: 0.98;
		letter-spacing: -0.055em;
	}

	.tdb-hero-copy .tdb-hero-title span {
		white-space: normal;
	}
}


/* =========================================================
   VANTHEX SYSTEM — HERO MOBILE STABILITY 2.3.1
   Evita pantalla inicial vacía por cálculo de alto en navegador móvil.
   ========================================================= */

@media (max-width: 900px) {
	.tdb-hero,
	body.admin-bar .tdb-hero {
		display: block !important;
		height: auto !important;
		min-height: 0 !important;
		padding-top: clamp(136px, 17svh, 168px) !important;
		padding-bottom: clamp(56px, 8vh, 78px) !important;
		overflow: visible !important;
	}

	.tdb-hero-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		height: auto !important;
		min-height: 0 !important;
		align-items: start !important;
		gap: clamp(42px, 7vw, 58px) !important;
	}

	.tdb-hero-copy {
		align-self: start !important;
		max-width: 100% !important;
	}

	.tdb-hero-copy .tdb-hero-title {
		font-size: clamp(43px, 12.2vw, 58px) !important;
		line-height: .96 !important;
		letter-spacing: -.058em !important;
	}

	.tdb-hero .tdb-lead {
		max-width: 33ch !important;
		font-size: clamp(17px, 4.7vw, 21px) !important;
		line-height: 1.52 !important;
	}
}

@media (max-width: 480px) {
	.tdb-hero,
	body.admin-bar .tdb-hero {
		padding-top: clamp(126px, 15svh, 154px) !important;
		padding-bottom: 56px !important;
	}

	.tdb-hero-copy .tdb-hero-title {
		font-size: clamp(40px, 11.8vw, 52px) !important;
	}
}

@media (max-width: 360px) {
	.tdb-hero-copy .tdb-hero-title {
		font-size: 37px !important;
	}
}

/* =========================================================
   VANTHEX SYSTEM — HERO MOBILE TOP LOCK 2.3.2
   Este archivo carga después de frontend.css, por eso repetimos
   el ajuste crítico aquí para evitar espacio vacío inicial.
   ========================================================= */

@media (max-width: 900px) {
	.tdb-landing #inicio.tdb-hero,
	.tdb-landing .tdb-hero#inicio,
	body.admin-bar .tdb-landing #inicio.tdb-hero {
		display: block !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin-top: 0 !important;
		padding-top: calc(env(safe-area-inset-top, 0px) + 94px) !important;
		padding-bottom: 54px !important;
		overflow: visible !important;
		contain: none !important;
	}

	.tdb-landing #inicio .tdb-hero-grid {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		gap: 38px !important;
	}

	.tdb-landing #inicio .tdb-hero-copy {
		order: 1 !important;
		display: block !important;
		align-self: stretch !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	.tdb-landing #inicio .tdb-system-visual {
		order: 2 !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	.tdb-landing #inicio [data-tdb-reveal] {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		transition-delay: 0ms !important;
	}
}

@media (max-width: 480px) {
	.tdb-landing #inicio.tdb-hero,
	.tdb-landing .tdb-hero#inicio,
	body.admin-bar .tdb-landing #inicio.tdb-hero {
		padding-top: calc(env(safe-area-inset-top, 0px) + 88px) !important;
		padding-bottom: 50px !important;
	}

	.tdb-landing #inicio .tdb-hero-grid {
		gap: 34px !important;
	}
}



/* =========================================================
   VANTHEX SYSTEM — MOBILE HERO STRUCTURAL FIX 2.3.5
   Corrección definitiva sin posicionamiento absoluto:
   - El copy móvil se renderiza fuera del grid principal.
   - En móvil se muestra primero el texto y luego el panel visual.
   - Se elimina el espacio vacío inicial y se evita superposición.
   ========================================================= */

.tdb-hero-mobile-copy {
	display: none;
}

@media (max-width: 900px) {
	.tdb-landing #inicio.tdb-hero,
	.tdb-landing .tdb-hero#inicio,
	.tdb-hero#inicio {
		display: block !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		padding-top: calc(env(safe-area-inset-top, 0px) + 92px) !important;
		padding-bottom: 62px !important;
		overflow: visible !important;
		contain: none !important;
	}

	body.admin-bar .tdb-landing #inicio.tdb-hero,
	body.admin-bar .tdb-hero#inicio {
		padding-top: calc(env(safe-area-inset-top, 0px) + 92px) !important;
	}

	.tdb-hero-mobile-copy {
		position: relative !important;
		z-index: 5 !important;
		display: block !important;
		width: min(calc(100% - 36px), var(--tdb-container)) !important;
		max-width: var(--tdb-container) !important;
		margin: 0 auto !important;
		padding: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	.tdb-hero-mobile-copy *,
	.tdb-landing #inicio .tdb-hero-mobile-copy * {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		transition: none !important;
	}

	.tdb-landing #inicio .tdb-hero-grid,
	.tdb-hero#inicio .tdb-hero-grid {
		position: relative !important;
		z-index: 3 !important;
		display: block !important;
		width: min(calc(100% - 36px), var(--tdb-container)) !important;
		max-width: var(--tdb-container) !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 38px auto 0 !important;
		padding: 0 !important;
		transform: none !important;
		translate: none !important;
	}

	/* Oculta solo el copy original del grid en móvil para evitar duplicados. */
	.tdb-landing #inicio .tdb-hero-grid > .tdb-hero-copy,
	.tdb-hero#inicio .tdb-hero-grid > .tdb-hero-copy {
		display: none !important;
	}

	.tdb-landing #inicio .tdb-system-visual,
	.tdb-hero#inicio .tdb-system-visual {
		position: relative !important;
		inset: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		z-index: 3 !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		translate: none !important;
		transition: none !important;
	}

	.tdb-hero-mobile-copy .tdb-kicker {
		margin: 0 !important;
		gap: 10px !important;
		font-size: 10px !important;
		line-height: 1.22 !important;
		letter-spacing: .18em !important;
		color: color-mix(in srgb, var(--tdb-accent-2) 78%, #ffffff) !important;
	}

	.tdb-hero-mobile-copy .tdb-hero-title {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 18px 0 0 !important;
		font-size: clamp(50px, 13.1vw, 64px) !important;
		line-height: .94 !important;
		letter-spacing: -.07em !important;
		overflow: visible !important;
		background: linear-gradient(105deg, #fff 0%, #fff 60%, #b8c3d9 100%) !important;
		-webkit-background-clip: text !important;
		background-clip: text !important;
		color: transparent !important;
	}

	.tdb-hero-mobile-copy .tdb-hero-title span {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		white-space: normal !important;
		overflow: visible !important;
	}

	.tdb-hero-mobile-copy .tdb-lead {
		max-width: 34ch !important;
		margin: 22px 0 0 !important;
		color: rgba(213, 220, 238, .74) !important;
		font-size: clamp(18px, 5vw, 22px) !important;
		line-height: 1.44 !important;
	}

	.tdb-hero-mobile-copy .tdb-actions {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 14px !important;
		width: 100% !important;
		margin: 30px 0 0 !important;
	}

	.tdb-hero-mobile-copy .tdb-actions .tdb-button {
		width: 100% !important;
		min-height: 58px !important;
		justify-content: center !important;
		border-radius: 16px !important;
		text-align: center !important;
	}

	.tdb-hero-mobile-copy .tdb-trust-row {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 11px !important;
		margin: 24px 0 0 !important;
	}

	.tdb-hero-mobile-copy .tdb-trust-row span,
	.tdb-hero-mobile-copy .tdb-trust-row span:last-child {
		grid-column: auto !important;
		font-size: 13px !important;
		line-height: 1.35 !important;
	}

	.tdb-terminal {
		transform: none !important;
	}

	.tdb-floating-chip {
		display: none !important;
	}
}

@media (max-width: 480px) {
	.tdb-landing #inicio.tdb-hero,
	.tdb-landing .tdb-hero#inicio,
	.tdb-hero#inicio {
		padding-top: calc(env(safe-area-inset-top, 0px) + 84px) !important;
		padding-bottom: 54px !important;
	}

	.tdb-hero-mobile-copy,
	.tdb-landing #inicio .tdb-hero-grid,
	.tdb-hero#inicio .tdb-hero-grid {
		width: calc(100% - 32px) !important;
	}

	.tdb-landing #inicio .tdb-hero-grid,
	.tdb-hero#inicio .tdb-hero-grid {
		margin-top: 34px !important;
	}

	.tdb-hero-mobile-copy .tdb-hero-title {
		font-size: clamp(46px, 12.4vw, 58px) !important;
		line-height: .95 !important;
	}

	.tdb-hero-mobile-copy .tdb-lead {
		font-size: clamp(17px, 4.75vw, 20px) !important;
	}
}

@media (max-width: 380px) {
	.tdb-landing #inicio.tdb-hero,
	.tdb-landing .tdb-hero#inicio,
	.tdb-hero#inicio {
		padding-top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
	}

	.tdb-hero-mobile-copy .tdb-hero-title {
		font-size: 41px !important;
		letter-spacing: -.064em !important;
	}

	.tdb-hero-mobile-copy .tdb-lead {
		font-size: 16px !important;
	}
}



/* =========================================================
   VANTHEX SYSTEM — WOO COMING SOON BYPASS 2.3.7
   El diagnóstico móvil mostró que WooCommerce Coming Soon
   estaba inyectando .wp-site-blocks de 798px antes del Hero.
   Esta regla elimina ese bloque únicamente en la plantilla
   standalone del plugin.
   ========================================================= */

body.tdb-standalone-page > .wp-site-blocks,
body.tdb-standalone-page .wp-block-woocommerce-coming-soon,
body.tdb-standalone-page .woocommerce-coming-soon-default,
body.tdb-standalone-page .coming-soon-cover,
body.tdb-standalone-page .woocommerce-coming-soon-banner-container {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}