body{

font-family:Inter, sans-serif;
margin:0;
background:#05070d;
color:#e6f0ff;

background-image:

radial-gradient(circle at 20% 20%, rgba(10,132,255,0.08), transparent 40%),
radial-gradient(circle at 80% 60%, rgba(0,198,255,0.05), transparent 40%),

linear-gradient(rgba(10,132,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(10,132,255,0.03) 1px, transparent 1px);

background-size:60px 60px;

}

.container{

width:90%;
max-width:1150px;
margin:auto;

}



header{

position:sticky;
top:0;
z-index:999;

background:rgba(5,7,13,0.8);

backdrop-filter:blur(8px);

border-bottom:1px solid rgba(10,132,255,0.15);

}

/* HEADER PREMIUM */

.nav{

display:flex;

align-items:center;

justify-content:space-between;

height:120px;

padding:0 30px;

}
/* LOGO GRANDE PROPORCIONADO */

/* LOGO ULTRA PREMIUM */

.logo{

display:flex;
align-items:center;

}

.logo img{

height:105px;

width:auto;

transition:.35s ease;

filter:

drop-shadow(0 0 8px rgba(10,132,255,.35))
drop-shadow(0 0 18px rgba(10,132,255,.18));

animation:logoFloat 6s ease-in-out infinite;

}


/* efecto hover elegante */

.logo img:hover{

transform:scale(1.04);

filter:

drop-shadow(0 0 12px rgba(10,132,255,.55))
drop-shadow(0 0 30px rgba(10,132,255,.25));

}


/* animación muy suave */

@keyframes logoFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-3px);

}

100%{

transform:translateY(0px);

}

}

/* desktop grande */

@media(min-width:1200px){

.logo img{

height:110px;

}

}


/* mobile */

@media(max-width:768px){

.logo img{

height:65px;

}

}


/* menu */

nav{

display:flex;
gap:28px;

}

nav a{

color:#cfe6ff;
text-decoration:none;

font-weight:500;

transition:.25s;

}

nav a:hover{

color:#0A84FF;

}



/* botones */

.btn{

background:linear-gradient(135deg,#0A84FF,#00c6ff);

padding:13px 24px;

border-radius:12px;

font-weight:600;

color:white;

text-decoration:none;

box-shadow:0 0 20px rgba(10,132,255,.25);

transition:.3s;

}

.btn:hover{

transform:translateY(-3px);

box-shadow:0 0 35px rgba(10,132,255,.45);

}



/* hero */

.hero{

padding:150px 0 120px;

}

.hero-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;

}

.hero h1{

font-size:52px;

background:linear-gradient(90deg,#fff,#9ecbff);

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

}

.hero p{

font-size:18px;
color:#a9c7ff;

}



.hero-image{

height:380px;

background:
linear-gradient(rgba(5,7,13,.4), rgba(5,7,13,.6)),
url("chip.jpg");

background-size:cover;
background-position:center;

border-radius:18px;

box-shadow:

0 0 40px rgba(10,132,255,.25),
0 0 80px rgba(10,132,255,.15);

}

/* badges */

.badges{

margin-top:25px;
display:flex;
gap:15px;
flex-wrap:wrap;

}

.badges span{

background:#0a0f1f;

padding:10px 16px;

border-radius:30px;

border:1px solid rgba(10,132,255,.2);

font-size:13px;

}



/* cards */

.grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:22px;

}

.card{

background:#0a0f1f;

padding:28px;

border-radius:16px;

border:1px solid rgba(10,132,255,.12);

transition:.3s;

text-align:center;

}

.card:hover{

transform:translateY(-8px);

border:1px solid rgba(10,132,255,.4);

box-shadow:0 0 30px rgba(10,132,255,.25);

}



section{

padding:110px 0;

}



.dark{

background:#04060c;

}



/* formulario */

.form-pro{

max-width:420px;

}

.form-pro input,
.form-pro textarea,
.form-pro select{

width:100%;

margin:10px 0;

padding:14px;

border-radius:8px;

border:1px solid rgba(10,132,255,.2);

background:#050914;

color:white;

}



button{

background:linear-gradient(135deg,#0A84FF,#00c6ff);

padding:14px;

border:none;

border-radius:10px;

color:white;

font-weight:600;

cursor:pointer;

}



/* whatsapp */

.whatsapp{

position:fixed;

bottom:20px;
right:20px;

background:#25D366;

padding:15px 18px;

border-radius:40px;

color:white;

text-decoration:none;

}



/* chat */

.chat-widget{

position:fixed;

bottom:90px;
right:20px;

background:#020817;

padding:18px;

border-radius:12px;

width:220px;

border:1px solid rgba(10,132,255,.2);

}



/* animaciones */

.fade-in{

opacity:0;

transform:translateY(25px);

transition:.6s;

}

.fade-in.visible{

opacity:1;

transform:translateY(0);

}



/* responsive */

@media(max-width:900px){

.hero-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:34px;

}

nav{

display:none;

}

}
/* comparativa premium */

.compare-sub{

text-align:center;
max-width:600px;
margin:auto;
color:#9fbbe0;

margin-bottom:50px;

}

.compare-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:35px;

margin-top:40px;

}

.compare-card{

padding:35px;

border-radius:18px;

position:relative;

transition:.3s;

}

.compare-card ul{

margin-top:20px;

line-height:1.8;

}

.compare-card.good{

background:linear-gradient(180deg,#081726,#050914);

border:1px solid rgba(0,255,170,0.25);

box-shadow:

0 0 30px rgba(0,255,170,0.08);

}

.compare-card.bad{

background:linear-gradient(180deg,#0b0b14,#06060c);

border:1px solid rgba(255,80,80,0.25);

opacity:.8;

}

.compare-card.good:hover{

transform:translateY(-6px);

box-shadow:

0 0 40px rgba(0,255,170,0.15);

}

.compare-badge{

position:absolute;

top:-12px;
right:20px;

background:#00ffa6;

color:black;

padding:6px 12px;

font-size:12px;

border-radius:20px;

font-weight:600;

}

.compare-highlight{

margin-top:40px;

text-align:center;

font-size:18px;

color:#9ecbff;

}


/* responsive */

@media(max-width:900px){

.compare-grid{

grid-template-columns:1fr;

}

}
/* STATS */

.stats{

display:flex;

justify-content:center;

gap:50px;

margin:50px 0;

flex-wrap:wrap;

}

.stat{

text-align:center;

}

.stat-number{

font-size:42px;

font-weight:700;

color:#0A84FF;

text-shadow:

0 0 15px rgba(10,132,255,0.4);

}

.stat-text{

color:#9fbbe0;

font-size:14px;

}



/* icono tipo chip */

.chip-icon{

font-size:26px;

margin-bottom:15px;

color:#0A84FF;

filter:drop-shadow(0 0 8px rgba(10,132,255,0.4));

}



/* barra visual */

.progress{

height:8px;

border-radius:20px;

background:#111;

margin-top:20px;

overflow:hidden;

}

.progress-bar{

height:100%;

border-radius:20px;

animation:progressAnim 2s ease forwards;

}

.good-bar{

width:70%;

background:linear-gradient(90deg,#00ffa6,#00c6ff);

box-shadow:0 0 15px rgba(0,255,170,0.5);

}

.bad-bar{

width:35%;

background:linear-gradient(90deg,#ff4d4d,#ff8a8a);

opacity:.7;

}

@keyframes progressAnim{

from{

width:0;

}

}



/* mejora comparativa */

.compare-card{

padding:40px;

border-radius:20px;

}

.compare-card h3{

margin-bottom:15px;

}



/* highlight */

.compare-highlight{

margin-top:40px;

text-align:center;

font-size:18px;

color:#9ecbff;

}


/* responsive */

@media(max-width:900px){

.logo img{

height:75px;

}

.nav{

height:95px;

}

}


@media(max-width:500px){

.logo img{

height:60px;

}

.nav{

height:80px;

padding:0 18px;

}

}
/* mapa premium */

.map-sub{

text-align:center;

color:#9fbbe0;

margin-bottom:35px;

}


.map-box{

border-radius:18px;

overflow:hidden;

border:1px solid rgba(10,132,255,0.2);

box-shadow:

0 0 40px rgba(10,132,255,0.15);

}


.map-box iframe{

width:100%;

height:380px;

border:0;

}