/* ========================================
   VALTECH DESIGN SYSTEM
   CSS global para Kava Child / style.css
   Mantiene compatibilidad con clases existentes
   y añade utilidades visuales reutilizables.
======================================== */


/* ========================================
   VARIABLES GLOBALES
======================================== */

:root{
	--vt-bg:#07080d;
	--vt-bg2:#0b0d14;
	--vt-panel:#10131c;
	--vt-card:#121620;
	--vt-text:#f7f8fb;
	--vt-muted:#a8afbd;
	--vt-line:rgba(255,255,255,.11);
	--vt-accent:#86a8ff;
	--vt-accent2:#91f3d1;
	--vt-white:#fff;
	--vt-dark:#090b10;
}


/* ========================================
   FONDOS
   Compatibilidad:
   vt-section / vt-section--*
   Utilidades nuevas:
   vt-bg-*
======================================== */

.vt-section,
.vt-bg-dark{
	background:var(--vt-bg);
}

.vt-section--alt,
.vt-bg-dark-alt{
	background:var(--vt-bg2);
}

.vt-section--light,
.vt-bg-light{
	background:#f3f5f9;
}

.vt-section--cta,
.vt-bg-cta{
	background:
		linear-gradient(
			135deg,
			#101523 0%,
			#080a10 55%,
			#101726 100%
		);
}


/* ========================================
   HERO / FONDO CON CUADRÍCULA
   Compatibilidad:
   vt-hero
   Utilidad nueva:
   vt-hero-bg
======================================== */

.vt-hero,
.vt-hero-bg{
	position:relative;
	isolation:isolate;
	overflow:hidden;
	background:
		radial-gradient(
			circle at 75% 25%,
			rgba(100,137,255,.22),
			transparent 28%
		),
		radial-gradient(
			circle at 22% 88%,
			rgba(83,226,186,.12),
			transparent 24%
		),
		#07080d;
}

.vt-hero:before,
.vt-hero-bg:before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	pointer-events:none;
	opacity:.32;
	background-image:
		linear-gradient(
			rgba(255,255,255,.035) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255,255,255,.035) 1px,
			transparent 1px
		);
	background-size:48px 48px;
	mask-image:linear-gradient(to bottom,black,transparent 88%);
	-webkit-mask-image:linear-gradient(to bottom,black,transparent 88%);
}


/* ========================================
   GLASS / BLUR
======================================== */

.vt-blur{
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.12);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
}

.vt-glass{
	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,.08),
			rgba(255,255,255,.035)
		);
	border:1px solid rgba(255,255,255,.12);
	box-shadow:0 20px 60px rgba(0,0,0,.18);
	backdrop-filter:blur(20px) saturate(140%);
	-webkit-backdrop-filter:blur(20px) saturate(140%);
}

.vt-blur-bg{
	position:relative;
	isolation:isolate;
	overflow:hidden;
}

.vt-blur-bg:before{
	content:"";
	position:absolute;
	inset:-40px;
	z-index:0;
	pointer-events:none;
	background:
		radial-gradient(
			circle at 25% 30%,
			rgba(90,120,255,.35),
			transparent 35%
		),
		radial-gradient(
			circle at 75% 70%,
			rgba(70,220,180,.25),
			transparent 35%
		);
	filter:blur(55px);
	transform:scale(1.1);
}

.vt-blur-bg > *{
	position:relative;
	z-index:1;
}



/* Fondo borroso azul */
.vt-blur-bg-blue{
	position:relative;
	isolation:isolate;
	overflow:hidden;
}
.vt-blur-bg-blue:before{
	content:"";
	position:absolute;
	inset:-50px;
	z-index:0;
	pointer-events:none;
	background:
		radial-gradient(circle at 28% 32%,rgba(86,118,255,.45),transparent 34%),
		radial-gradient(circle at 78% 68%,rgba(116,150,255,.20),transparent 38%);
	filter:blur(60px);
	transform:scale(1.12);
}
.vt-blur-bg-blue > *{
	position:relative;
	z-index:1;
}

/* Fondo borroso verde */
.vt-blur-bg-green{
	position:relative;
	isolation:isolate;
	overflow:hidden;
}
.vt-blur-bg-green:before{
	content:"";
	position:absolute;
	inset:-50px;
	z-index:0;
	pointer-events:none;
	background:
		radial-gradient(circle at 25% 35%,rgba(70,220,180,.38),transparent 34%),
		radial-gradient(circle at 78% 68%,rgba(108,255,211,.18),transparent 38%);
	filter:blur(60px);
	transform:scale(1.12);
}
.vt-blur-bg-green > *{
	position:relative;
	z-index:1;
}

/* Fondo borroso violeta */
.vt-blur-bg-purple{
	position:relative;
	isolation:isolate;
	overflow:hidden;
}
.vt-blur-bg-purple:before{
	content:"";
	position:absolute;
	inset:-50px;
	z-index:0;
	pointer-events:none;
	background:
		radial-gradient(circle at 27% 30%,rgba(150,105,255,.40),transparent 34%),
		radial-gradient(circle at 78% 72%,rgba(105,120,255,.20),transparent 38%);
	filter:blur(60px);
	transform:scale(1.12);
}
.vt-blur-bg-purple > *{
	position:relative;
	z-index:1;
}

/* Fondo borroso mixto azul + verde */
.vt-blur-bg-mixed{
	position:relative;
	isolation:isolate;
	overflow:hidden;
}
.vt-blur-bg-mixed:before{
	content:"";
	position:absolute;
	inset:-55px;
	z-index:0;
	pointer-events:none;
	background:
		radial-gradient(circle at 22% 28%,rgba(90,120,255,.42),transparent 34%),
		radial-gradient(circle at 78% 70%,rgba(70,220,180,.30),transparent 36%),
		radial-gradient(circle at 58% 18%,rgba(150,105,255,.16),transparent 30%);
	filter:blur(65px);
	transform:scale(1.12);
}
.vt-blur-bg-mixed > *{
	position:relative;
	z-index:1;
}

/* Fondo borroso suave */
.vt-blur-bg-soft{
	position:relative;
	isolation:isolate;
	overflow:hidden;
}
.vt-blur-bg-soft:before{
	content:"";
	position:absolute;
	inset:-45px;
	z-index:0;
	pointer-events:none;
	background:
		radial-gradient(circle at 30% 35%,rgba(100,137,255,.20),transparent 36%),
		radial-gradient(circle at 72% 68%,rgba(83,226,186,.14),transparent 38%);
	filter:blur(70px);
	transform:scale(1.12);
}
.vt-blur-bg-soft > *{
	position:relative;
	z-index:1;
}

/* Fondo borroso intenso */
.vt-blur-bg-strong{
	position:relative;
	isolation:isolate;
	overflow:hidden;
}
.vt-blur-bg-strong:before{
	content:"";
	position:absolute;
	inset:-60px;
	z-index:0;
	pointer-events:none;
	background:
		radial-gradient(circle at 22% 30%,rgba(86,118,255,.58),transparent 32%),
		radial-gradient(circle at 80% 72%,rgba(70,220,180,.40),transparent 34%);
	filter:blur(72px);
	transform:scale(1.18);
}
.vt-blur-bg-strong > *{
	position:relative;
	z-index:1;
}

/* ========================================
   TARJETAS
======================================== */

.vt-card{
	position:relative;
	isolation:isolate;
	border:1px solid var(--vt-line);
	border-radius:1.45rem;
	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,.055),
			rgba(255,255,255,.025)
		);
	overflow:hidden;
	transition:
		transform .28s ease,
		border-color .28s ease,
		background .28s ease;
}

.vt-card:after{
	content:"";
	position:absolute;
	width:180px;
	height:180px;
	right:-80px;
	bottom:-90px;
	z-index:-1;
	border-radius:50%;
	pointer-events:none;
	background:
		radial-gradient(
			circle,
			rgba(121,153,255,.24),
			transparent 68%
		);
	transition:transform .35s ease;
}

.vt-card:hover{
	transform:translateY(-6px);
	border-color:rgba(255,255,255,.23);
	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,.075),
			rgba(255,255,255,.035)
		);
}

.vt-card:hover:after{
	transform:scale(1.2);
}

.vt-card-light,
.vt-section--light .vt-solution,
.vt-bg-light .vt-solution{
	background:#fff;
	border:1px solid rgba(10,12,17,.08);
	box-shadow:0 18px 55px rgba(18,30,62,.06);
	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}

.vt-card-light:hover,
.vt-section--light .vt-solution:hover,
.vt-bg-light .vt-solution:hover{
	transform:translateY(-6px);
	border-color:rgba(28,61,146,.2);
	box-shadow:0 22px 65px rgba(18,30,62,.1);
}


/* ========================================
   CTA GLASS
   Compatibilidad:
   vt-cta-box
======================================== */

.vt-cta-box{
	border:1px solid rgba(255,255,255,.12);
	border-radius:2rem;
	background:rgba(255,255,255,.045);
	box-shadow:0 20px 70px rgba(0,0,0,.12);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
}


/* ========================================
   BORDES
======================================== */

.vt-border{
	border:1px solid var(--vt-line);
}

.vt-border-top,
.vt-pillar,
.vt-process,
.vt-footer-mini{
	border-top:1px solid var(--vt-line);
}

.vt-border-bottom{
	border-bottom:1px solid var(--vt-line);
}

.vt-border-soft{
	border:1px solid rgba(255,255,255,.07);
}

.vt-border-strong{
	border:1px solid rgba(255,255,255,.20);
}

.vt-gradient-border{
	border:1px solid transparent;
	background:
		linear-gradient(var(--vt-bg),var(--vt-bg)) padding-box,
		linear-gradient(
			135deg,
			rgba(134,168,255,.65),
			rgba(145,243,209,.35),
			rgba(255,255,255,.08)
		) border-box;
}


/* ========================================
   GLOWS
======================================== */

.vt-glow{
	box-shadow:
		0 0 40px rgba(100,137,255,.10),
		0 20px 60px rgba(0,0,0,.16);
}

.vt-glow-blue{
	box-shadow:
		0 0 60px rgba(100,137,255,.18),
		0 20px 60px rgba(0,0,0,.18);
}

.vt-glow-green{
	box-shadow:
		0 0 60px rgba(83,226,186,.14),
		0 20px 60px rgba(0,0,0,.18);
}


/* ========================================
   HOVER EFFECTS
======================================== */

.vt-hover-lift{
	transition:transform .25s ease;
}

.vt-hover-lift:hover{
	transform:translateY(-6px);
}

.vt-hover-scale{
	transition:transform .25s ease;
}

.vt-hover-scale:hover{
	transform:scale(1.025);
}

.vt-hover-border{
	transition:border-color .25s ease;
}

.vt-hover-border:hover{
	border-color:rgba(255,255,255,.25);
}

.vt-hover-bright{
	transition:filter .25s ease;
}

.vt-hover-bright:hover{
	filter:brightness(1.08);
}


/* ========================================
   BOTONES ELEMENTOR
======================================== */

.vt-btn-primary .elementor-button{
	background:#fff;
	color:#090b10;
	border-radius:999px;
	transition:
		transform .22s ease,
		background .22s ease;
}

.vt-btn-primary .elementor-button:hover{
	transform:translateY(-2px);
	background:#dfe6ff;
}

.vt-btn-secondary .elementor-button{
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.14);
	color:#fff;
	border-radius:999px;
	transition:
		transform .22s ease,
		background .22s ease,
		border-color .22s ease;
}

.vt-btn-secondary .elementor-button:hover{
	transform:translateY(-2px);
	background:rgba(255,255,255,.10);
	border-color:rgba(255,255,255,.28);
}


/* ========================================
   EFECTOS ESPECIALES
======================================== */

.vt-soft-overlay{
	position:relative;
	isolation:isolate;
	overflow:hidden;
}

.vt-soft-overlay:before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	pointer-events:none;
	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,.04),
			transparent 45%,
			rgba(0,0,0,.08)
		);
}

.vt-noise{
	position:relative;
	isolation:isolate;
	overflow:hidden;
}

.vt-noise:after{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	pointer-events:none;
	opacity:.035;
	background-image:
		url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}


/* ========================================
   CLASE DE PRUEBA
   Úsala temporalmente para confirmar que
   Elementor está leyendo el style.css.
======================================== */

.vt-test{
	background:#d40000!important;
	border:5px solid #ffd400!important;
}
/* ========================================
   LIQUID GLASS
======================================== */

.vt-liquid-glass{
	--vt-glass-tint:rgba(255,255,255,.10);
	--vt-glass-border:rgba(255,255,255,.22);
	--vt-glass-shine:rgba(255,255,255,.38);

	position:relative;
	isolation:isolate;
	overflow:hidden;

	background:var(--vt-glass-tint);

	border:1px solid var(--vt-glass-border);

	box-shadow:
		0 10px 35px rgba(0,0,0,.18),
		inset 1px 1px 0 rgba(255,255,255,.28),
		inset -1px -1px 0 rgba(255,255,255,.08);

	backdrop-filter:
		blur(18px)
		saturate(150%);

	-webkit-backdrop-filter:
		blur(18px)
		saturate(150%);

	transition:
		transform .35s cubic-bezier(.175,.885,.32,1.275),
		border-color .3s ease,
		background .3s ease,
		box-shadow .3s ease;
}


/* Distorsión */
.vt-liquid-glass:before{
	content:"";
	position:absolute;
	inset:-8px;
	z-index:0;
	pointer-events:none;

	background:rgba(255,255,255,.025);

	backdrop-filter:
		blur(4px)
		saturate(160%);

	-webkit-backdrop-filter:
		blur(4px)
		saturate(160%);

	filter:url("#vt-glass-distortion");

	opacity:.75;
}


/* Shine / reflejo */
.vt-liquid-glass:after{
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
	pointer-events:none;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.28) 0%,
			rgba(255,255,255,.08) 18%,
			transparent 42%
		);

	box-shadow:
		inset 2px 2px 1px rgba(255,255,255,.32),
		inset -1px -1px 1px rgba(255,255,255,.12);
}


/* Contenido de Elementor sobre el vidrio */
.vt-liquid-glass > *{
	position:relative;
	z-index:2;
}


/* Hover */
.vt-liquid-glass:hover{
	transform:translateY(-3px);

	background:rgba(255,255,255,.13);

	border-color:rgba(255,255,255,.30);

	box-shadow:
		0 16px 45px rgba(0,0,0,.23),
		inset 1px 1px 0 rgba(255,255,255,.38),
		inset -1px -1px 0 rgba(255,255,255,.10);
}
/* ========================================
   LIQUID GLASS NAV — JETMENU SAFE
======================================== */

.vt-liquid-glass-nav{
	position:relative;
	isolation:auto;
	overflow:visible!important;

	background:transparent!important;

	border:1px solid rgba(255,255,255,.18);

	box-shadow:
		0 14px 40px rgba(0,0,0,.24),
		inset 0 1px 0 rgba(255,255,255,.18);
}


/* Capa visual del vidrio */
.vt-liquid-glass-nav:before{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	pointer-events:none;
	border-radius:inherit;

	background:
		linear-gradient(
			180deg,
			rgba(42,45,53,.62) 0%,
			rgba(22,24,30,.54) 100%
		);

	backdrop-filter:
		blur(22px)
		saturate(145%);

	-webkit-backdrop-filter:
		blur(22px)
		saturate(145%);
}


/* Reflejo superior */
.vt-liquid-glass-nav:after{
	content:"";
	position:absolute;
	left:3%;
	right:3%;
	top:0;
	height:1px;
	z-index:1;
	pointer-events:none;

	background:linear-gradient(
		90deg,
		transparent,
		rgba(255,255,255,.55) 20%,
		rgba(255,255,255,.25) 70%,
		transparent
	);
}


/* Contenido del header */
.vt-liquid-glass-nav > *{
	position:relative;
	z-index:2;
}

/* ========================================
   MOBILE HEADING OVERFLOW FIX
======================================== */

@media (max-width:767px){

	.valtech-v2 .elementor-widget-heading,
	.valtech-v2 .elementor-widget-heading .elementor-widget-container{
		min-width:0;
		max-width:100%;
	}

	.valtech-v2 .elementor-heading-title{
		max-width:100%;
		white-space:normal!important;
		overflow-wrap:break-word;
		word-break:normal;
	}

	.valtech-v2 .elementor-widget__width-initial.elementor-widget-heading{
		width:100%!important;
		max-width:100%!important;
	}
}
/* ========================================
   BUTTON — ICON ONLY ON MOBILE
======================================== */

@media (max-width:767px){

	.vt-btn-icon-mobile .elementor-button-text{
		position:absolute!important;
		width:1px!important;
		height:1px!important;
		padding:0!important;
		margin:-1px!important;
		overflow:hidden!important;
		clip:rect(0,0,0,0)!important;
		white-space:nowrap!important;
		border:0!important;
	}

	.vt-btn-icon-mobile .elementor-button-content-wrapper{
		gap:0!important;
	}

	.vt-btn-icon-mobile .elementor-button-icon{
		margin:0!important;
	}
}