:root{

--bg:#05060b;
--bg2:#090d18;

--card:rgba(255,255,255,.06);
--stroke:rgba(255,255,255,.14);

--text:#ffffff;
--muted:#aab2c5;

--blue:#58afff;
--cyan:#78ffd2;
--orange:#ff9a54;
--pink:#ff6ec7;

--radius:24px;

}


*{
box-sizing:border-box;
margin:0;
padding:0;
}


html{
scroll-behavior:smooth;
}


body{

font-family:'Inter',sans-serif;

background:
radial-gradient(circle at 20% 10%,rgba(88,175,255,.18),transparent 35%),
radial-gradient(circle at 80% 20%,rgba(255,110,199,.15),transparent 35%),
linear-gradient(180deg,var(--bg),var(--bg2));

color:var(--text);

min-height:100vh;

overflow-x:hidden;

}



body::before{

content:"";

position:fixed;

inset:0;

background-image:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

background-size:50px 50px;

mask-image:linear-gradient(to bottom,black,transparent);

pointer-events:none;

z-index:-1;

}




#particles{

position:fixed;

inset:0;

width:100%;

height:100%;

pointer-events:none;

z-index:-2;

}





.aurora{

position:fixed;

width:600px;

height:600px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(88,175,255,.22),
transparent 70%);


filter:blur(80px);

top:-200px;

left:-200px;

animation:

moveAurora 12s infinite alternate;

z-index:-3;

}



@keyframes moveAurora{

from{

transform:translate(0,0);

}


to{

transform:translate(300px,200px);

}

}






header{

width:min(1200px,92%);

margin:auto;

padding:30px 0;

display:flex;

justify-content:space-between;

align-items:center;

}



.logo{

display:flex;

gap:15px;

align-items:center;

}



.logoIcon{

width:48px;

height:48px;

display:grid;

place-items:center;

border-radius:18px;

font-size:25px;

background:

linear-gradient(135deg,var(--blue),var(--pink));

box-shadow:

0 0 40px rgba(88,175,255,.5);

}



.logo b{

display:block;

font-size:18px;

}


.logo small{

color:var(--muted);

}



nav{

display:flex;

gap:28px;

align-items:center;

}


nav a{

color:white;

text-decoration:none;

opacity:.8;

transition:.3s;

}



nav a:hover{

opacity:1;

}



.navBtn{

padding:12px 22px;

border-radius:999px;

background:white;

color:#05060b!important;

font-weight:700;

}







main{

width:min(1200px,92%);

margin:auto;

}




.hero{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

padding:70px 0 120px;

}



.badge{

display:inline-flex;

padding:10px 18px;

border-radius:999px;

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

border:1px solid var(--stroke);

margin-bottom:30px;

font-size:14px;

}



.hero h1{

font-size:clamp(45px,6vw,78px);

line-height:1;

letter-spacing:-3px;

}



.hero h1 span{

background:linear-gradient(
90deg,
var(--blue),
var(--cyan)
);

-webkit-background-clip:text;
background-clip:text;

-webkit-text-fill-color:transparent;
color:transparent;

}


.hero p{

margin-top:30px;

font-size:20px;

line-height:1.7;

color:var(--muted);

max-width:560px;

}




.heroButtons{

display:flex;

gap:15px;

margin-top:40px;

flex-wrap:wrap;

}



.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 28px;

border-radius:999px;

border:1px solid var(--stroke);

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

color:white;

text-decoration:none;

cursor:pointer;

font-weight:700;

transition:.3s;

}



.btn:hover{

transform:translateY(-3px);

}



.primary{

background:

linear-gradient(135deg,var(--blue),var(--pink));

border:none;

box-shadow:

0 20px 50px rgba(88,175,255,.35);

}



.stats{

display:flex;

gap:15px;

margin-top:60px;

}



.stats div{

padding:20px;

border:1px solid var(--stroke);

background:var(--card);

border-radius:20px;

}



.stats b{

font-size:28px;

display:block;

}



.stats small{

color:var(--muted);

}








.aiBox{

position:relative;

}



.orb{

width:260px;

height:260px;

margin:auto;

border-radius:50%;

background:

radial-gradient(circle at 35% 30%,
white,
var(--blue),
transparent 60%);


box-shadow:

0 0 80px rgba(88,175,255,.7);

animation:

float 5s infinite ease-in-out;

display:grid;

place-items:center;

}



.orbCore{

width:130px;

height:130px;

border-radius:50%;

background:#05060b;

display:grid;

place-items:center;

font-size:45px;

font-weight:900;

}



@keyframes float{

50%{

transform:translateY(-25px);

}

}





.chat{

margin-top:-20px;

padding:25px;

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

backdrop-filter:blur(20px);

border:1px solid var(--stroke);

border-radius:25px;

}



.message{

padding:16px;

border-radius:18px;

margin-bottom:15px;

line-height:1.5;

}



.user{

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

}



.ai{

background:

linear-gradient(135deg,
rgba(88,175,255,.25),
rgba(120,255,210,.15));

}






.section{

padding:100px 0;

}



h2{

font-size:clamp(32px,4vw,52px);

margin-bottom:15px;

}



.subtitle{

color:var(--muted);

font-size:18px;

margin-bottom:50px;

}




.cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}



.card{

padding:30px;

background:var(--card);

border:1px solid var(--stroke);

border-radius:var(--radius);

backdrop-filter:blur(20px);

transition:.4s;

}



.card:hover{

transform:translateY(-10px);

box-shadow:0 30px 80px rgba(0,0,0,.35);

}



.card div{

font-size:35px;

margin-bottom:20px;

}


.card p{

color:var(--muted);

line-height:1.6;

margin-top:15px;

}





.demo{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

padding:100px 0;

align-items:center;

}



.demo p{

color:var(--muted);

font-size:18px;

line-height:1.7;

margin-top:20px;

}




.terminal{

background:#03040a;

border:1px solid var(--stroke);

border-radius:25px;

overflow:hidden;

}



.terminalTop{

padding:18px;

border-bottom:1px solid var(--stroke);

}



.terminalBody{

padding:30px;

line-height:1.8;

}



.gray{

color:#aaa;

}



.green{

color:var(--cyan);

}







.plans{

padding:100px 0;

text-align:center;

}



.planCard{

max-width:500px;

margin:40px auto;

padding:50px;

background:var(--card);

border:1px solid var(--stroke);

border-radius:30px;

}



.planCard span{

color:var(--cyan);

font-weight:800;

}



.price{

font-size:70px;

font-weight:900;

margin:30px 0;

}



.ars{

margin:25px 0;

color:var(--muted);

line-height:1.7;

}



.alias{

width:100%;

margin-top:15px;

}



.cta{

padding:100px 0;

text-align:center;

}



.cta p{

color:var(--muted);

margin:20px;

}



.faq{

padding:100px 0;

}



.faq div{

margin:20px 0;

padding:25px;

background:var(--card);

border:1px solid var(--stroke);

border-radius:20px;

}



.faq p{

color:var(--muted);

margin-top:10px;

}



footer{

padding:50px;

text-align:center;

color:var(--muted);

}





@media(max-width:900px){


nav{

display:none;

}


.hero,
.demo{

grid-template-columns:1fr;

}


.cards{

grid-template-columns:1fr;

}


.stats{

flex-direction:column;

}


.hero{

padding-top:30px;

}

}

.hidden{

opacity:0;

transform:translateY(40px);

transition:1s ease;

}


.visible{

opacity:1;

transform:none;

}

/* BOTON VOLVER PERFIL */

.profileBtn{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 16px;

border-radius:14px;

text-decoration:none;

font-size:14px;

font-weight:700;

color:rgba(255,255,255,.8);

background:

rgba(255,255,255,.05);


border:

1px solid rgba(255,255,255,.15);


transition:.3s;

}


.profileBtn:hover{

background:

rgba(255,255,255,.12);


color:white;


transform:translateX(-3px);

}

/* =====================================
   EMPLEADO IA
   RESPONSIVE SYSTEM
===================================== */


/* RESET */

*,
*::before,
*::after{

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

overflow-x:hidden;

}



/* CONTENEDORES */

.container{

width:min(1200px,92%);

margin:auto;

}




/* IMAGENES */

img{

max-width:100%;

height:auto;

}





/* BOTONES */

button,
a{

-webkit-tap-highlight-color:transparent;

}



.btn,
.navBtn,
button{

min-height:48px;

}





/* CARDS */

.card,
.planCard{

width:100%;

}





/* FLEX RESPONSIVE */

.row{

display:flex;

gap:25px;

flex-wrap:wrap;

}





/* TABLET */

@media(max-width:900px){


h1{

font-size:clamp(
32px,
7vw,
48px
);

}



h2{

font-size:clamp(
26px,
5vw,
36px
);

}




header{

padding:20px;

}




}





/* MOBILE */

@media(max-width:600px){



body{

font-size:15px;

}




.container{

width:94%;

}





header{


flex-direction:column;

height:auto;

gap:20px;

padding:25px 15px;


}




nav{


width:100%;

justify-content:center;

flex-wrap:wrap;


}




nav a{

font-size:14px;

}




.logo{

font-size:18px;

}




.hero,
.demo,
.plans{


padding-left:10px;

padding-right:10px;


}




.heroText{

text-align:center;

}




.heroButtons{

flex-direction:column;

width:100%;


}




.heroButtons a{

width:100%;

}




.stats{


grid-template-columns:1fr!important;


}




.chat{

width:100%;

}




}





/* CELULARES PEQUEÑOS */

@media(max-width:380px){



h1{

font-size:28px;

}


h2{

font-size:24px;

}


.logo span{

width:40px;

height:40px;

}


input,
button{

font-size:15px;

}



}