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


body{

    font-family:Arial, sans-serif;
    color:#333;

}


.contenedor{

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

}



/* ================= HEADER ================= */


header{

    background:#fff;
    padding:15px 0;
    box-shadow:0 5px 20px rgba(0,0,0,.15);

}


.nav{

    display:flex;
    justify-content:space-between;
    align-items:center;

}



.logo img{

    width:130px;

}



nav a{

    text-decoration:none;
    margin-left:25px;
    color:#003b73;
    font-weight:bold;

}


nav a:hover{

    color:#00aaff;

}



/* ================= HERO ================= */


.hero{

    position:relative;
    overflow:hidden;

    padding:100px 0;

    background:

    linear-gradient(
        120deg,
        #ffffff,
        #eaf4ff
    );

}



/* contenido arriba */

.hero-flex{

    display:flex;
    align-items:center;
    justify-content:space-between;

    position:relative;

    z-index:5;

}



.hero-text{

    max-width:750px;

}



.hero-text h1{

    font-size:60px;
    color:#003b73;

}



.hero-text p{

    font-size:22px;
    margin:25px 0;
    color:#444;

}




/* IMAGEN */


.hero-img img{

    width:450px;

    border-radius:25px;

    position:relative;

    z-index:5;

}



/* brillo alrededor */

.brillo{

    position:relative;

}



.brillo::before{

    content:"";

    position:absolute;

    inset:-20px;

    background:

    linear-gradient(
        45deg,
        #0066cc,
        #00aaff,
        transparent
    );


    filter:blur(25px);

    border-radius:30px;

    opacity:.5;


    animation:brillar 3s infinite;

}



@keyframes brillar{

50%{

    opacity:1;

}

}



/* ================= FIBRAS OPTICAS ================= */


.fibra{

    position:absolute;

    width:900px;

    height:5px;

  


    background:

    linear-gradient(

        90deg,

        transparent,

        #00aaff,

        white,

        #0066cc,

        transparent

    );


    filter:blur(2px);


    opacity:.9;


    z-index:2;


    box-shadow:

    0 0 15px #00aaff,

    0 0 35px #0066cc;


    animation:

    fibraMovimiento 7s infinite linear;


}





.fibra1{

    top:20%;

    left:-900px;

}



.fibra2{

    top:50%;

    left:-900px;

    animation-delay:2s;

}



.fibra3{

    bottom:20%;

    left:-900px;

    animation-delay:4s;

}





@keyframes fibraMovimiento{


0%{

    transform:translateX(-200px) rotate(25deg);

    opacity:0;

}



30%{

    opacity:1;

}



100%{

    transform:translateX(1800px) rotate(25deg);

    opacity:0;

}


}


/* ================= PARTICULAS ================= */


.particulas span{


    position:absolute;


    width:10px;

    height:10px;


    background:#00aaff;


    border-radius:50%;


    z-index:3;


    box-shadow:

    0 0 15px #00aaff,

    0 0 40px #0066cc;


    opacity:0;


    animation:

    datos 7s infinite linear;


}





.particulas span:nth-child(1){

left:10%;

top:60%;

animation-delay:0s;

}



.particulas span:nth-child(2){

left:25%;

top:40%;

animation-delay:1.2s;

}



.particulas span:nth-child(3){

left:45%;

top:70%;

animation-delay:2.4s;

}



.particulas span:nth-child(4){

left:65%;

top:30%;

animation-delay:3.6s;

}



.particulas span:nth-child(5){

left:80%;

top:60%;

animation-delay:4.8s;

}



.particulas span:nth-child(6){

left:90%;

top:25%;

animation-delay:6s;

}





@keyframes datos{


0%{

    opacity:0;

    transform:translateY(0) scale(.5);

}



15%{

    opacity:1;

}



60%{

    opacity:1;

    transform:translateY(-80px) scale(1);

}



100%{

    opacity:0;

    transform:translateY(-160px) scale(.8);

}


}


/* ================= BOTON MODO OSCURO ================= */


#modoOscuro{

    background:#003b73;

    color:white;

    border:none;

    width:42px;

    height:42px;

    border-radius:50%;

    cursor:pointer;

    font-size:20px;

    margin-left:20px;

    transition:.3s;

}


#modoOscuro:hover{

    transform:scale(1.15);

    background:#0066cc;

}






/* ================= MODO OSCURO ================= */



body.oscuro{

    background:#07111f;

    color:white;

}



/* HEADER */

body.oscuro header{

    background:#081a30;

    box-shadow:
    0 5px 20px rgba(0,0,0,.5);

}



body.oscuro nav a{

    color:#9edfff;

}





/* FOOTER */


body.oscuro footer{

    background:#000b18;

}


.logo-img{

   width:95px;
    height:95px;

    object-fit:cover;

    border-radius:45%;

   




    color:white;

    box-shadow:

    0 0 0 0 #00aaff;


    /* animation:pulso 2s infinite; */

}



.boton:hover{

    background:#003b73;

}





@keyframes pulso{


70%{

    box-shadow:
    0 0 0 20px transparent;

}


100%{

    box-shadow:
    0 0 0 0 transparent;

}


}






/* ================= FOOTER ================= */


footer{


background:#003b73;

color:white;

text-align:center;

padding:25px;


}

/* ================= PLANES ================= */


.planes{

position:relative;
z-index:5;
padding:80px 0;
text-align:center;

}



.planes h1{

font-size:45px;
color:#003b73;

}



.subtitulo{

font-size:20px;
margin:20px 0 50px;
color:#555;

}



.planes-grid{

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

}



/* TARJETAS */


.plan{

background:white;

padding:35px 25px;

border-radius:25px;

box-shadow:
0 10px 30px rgba(0,0,0,.15);

transition:.3s;

position:relative;

overflow:hidden;

}



.plan:hover{

transform:translateY(-12px);

}



/* TITULO PLAN */


.plan h2{

color:#003b73;

font-size:30px;

}



/* VELOCIDAD */


.velocidad{

font-size:32px;

font-weight:bold;

color:#00aaff;

margin:20px 0;

}



/* PRECIO */


.precio{

font-size:40px;

font-weight:bold;

color:#0066cc;

margin:25px 0;

}



.precio span{

font-size:18px;

color:#555;

}



/* BOTON */


.boton-plan{

display:inline-block;

padding:14px 35px;

background:#0066cc;

color:white;

border-radius:40px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}



.boton-plan:hover{

background:#003b73;

transform:scale(1.05);

}



/* PLAN DESTACADO */


.destacado{

border:3px solid #00aaff;

transform:scale(1.05);

}



/* ETIQUETA */


.etiqueta{

position:absolute;

top:-15px;

left:80%;

transform:translateX(-50%);

background:#00aaff;

color:white;

padding:15px 25px;

border-radius:20px;

font-weight:bold;

}



/* PLAN NEGOCIO */


.negocio{

background:

linear-gradient(
135deg,
#003b73,
#0066cc
);

color:white;

}


.negocio h2{

color:white;

}


.negocio .velocidad{

color:white;

}


.negocio .precio{

color:white;

}




/* ================= FONDO PLANES ================= */


.fondo-planes{

position:relative;

overflow:hidden;

min-height:750px;

background:

linear-gradient(
120deg,
#ffffff,
#eaf4ff
);

}



/* FIBRAS */


.fibra{

z-index:1;

}



/* PARTICULAS */


.particulas span{

z-index:2;

}



/* ================================================= */
/* ================= MODO OSCURO =================== */
/* ================================================= */



body.oscuro .fondo-planes{

background:

linear-gradient(
120deg,
#050b18,
#071d36
);

}



/* TITULO */


body.oscuro .planes h1{

color:white;

}



body.oscuro .subtitulo{

color:#b8c7d9;

}



/* TARJETAS */


body.oscuro .plan{

background:#0d1726;

border:

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

box-shadow:

0 15px 40px rgba(0,170,255,.20);

}



body.oscuro .plan:hover{

box-shadow:

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

}



/* TITULO PLAN */


body.oscuro .plan h2{

color:#00aaff;

}



/* VELOCIDAD */


body.oscuro .velocidad{

color:#00d9ff;

}



/* PRECIO */


body.oscuro .precio{

color:white;

}



body.oscuro .precio span{

color:#9fb3c8;

}



/* BOTONES */


body.oscuro .boton-plan{

background:#00aaff;

color:#001525;

}



body.oscuro .boton-plan:hover{

background:white;

color:#003b73;

}



/* DESTACADO */


body.oscuro .destacado{

border:

3px solid #00d9ff;


box-shadow:

0 0 30px rgba(0,217,255,.4);

}



/* ETIQUETA */


body.oscuro .etiqueta{

background:#00d9ff;

color:#001525;

}



/* NEGOCIO */


body.oscuro .negocio{

background:

linear-gradient(
135deg,
#003b73,
#00aaff
);

}


body.oscuro .negocio h2,
body.oscuro .negocio .velocidad,
body.oscuro .negocio .precio{

color:white;

}



/* EFECTO LUZ */


body.oscuro .plan::before{

content:"";

position:absolute;

inset:0;

border-radius:25px;

background:

linear-gradient(
120deg,
transparent,
rgba(0,170,255,.15),
transparent
);

opacity:0;

transition:.4s;

}



body.oscuro .plan:hover::before{

opacity:1;

}