*{
    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:110px;

}



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;

}



/* BOTON */


.boton{

    display:inline-block;

    background:#0066cc;

    color:white;

    padding:15px 35px;

    border-radius:40px;

    text-decoration:none;

    font-weight:bold;


    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;

}


}





/* 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);

}


}





/* ================= SERVICIOS ================= */


.servicios{


background:

linear-gradient(

135deg,

#0066cc,

#003b73

);


padding:90px 0;

color:white;


}



.servicios h2{


color:white;

text-align:center;

font-size:40px;

margin-bottom:50px;


}



.servicios-grid{


display:flex;

gap:30px;


}



.servicio{


flex:1;


padding:35px;


text-align:center;


background:

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



border:

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



border-radius:20px;



backdrop-filter:blur(10px);



transition:.4s;


}



.servicio:hover{


transform:translateY(-12px);


background:

rgba(255,255,255,.25);


}



.servicio h3{

font-size:25px;

margin-bottom:15px;

}



.servicio p{

color:#dbeafe;

}






/* ================= COBERTURA ================= */


.cobertura{


background:#eaf4ff;

padding:70px 0;

text-align:center;


}




/* ================= CONTACTO ================= */


.contacto{


text-align:center;

padding:70px 0;


}



.whatsapp{


background:#00c853;

color:white;

padding:15px 40px;

border-radius:30px;

text-decoration:none;


}




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


footer{


background:#003b73;

color:white;

text-align:center;

padding:25px;


}







/* ================= MOVIL ================= */


@media(max-width:768px){


.nav,
.hero-flex,
.servicios-grid{


    flex-direction:column;

}



nav{

    margin-top:20px;

}



nav a{

    margin:10px;

}



.hero-text h1{

    font-size:38px;

}



.hero-img img{

    width:300px;

    margin-top:40px;

}


}




/* ================= 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;

}




/* HERO */


body.oscuro .hero{


    background:

    linear-gradient(

    120deg,

    #07111f,

    #003b73

    );


}



body.oscuro .hero-text h1{

    color:white;

}



body.oscuro .hero-text p{

    color:#dbeafe;

}



/* BOTON */

body.oscuro .boton{

    background:#00aaff;

    color:#001933;

}



body.oscuro .boton:hover{

    background:white;

}



/* IMAGEN */


body.oscuro .hero-img img{

    box-shadow:

    0 0 30px #00aaff;

}






/* SERVICIOS */


body.oscuro .servicios{

    background:

    linear-gradient(

    135deg,

    #001933,

    #07111f

    );

}






/* COBERTURA */


body.oscuro .cobertura{

    background:#10243d;

    color:white;

}




/* CONTACTO */


body.oscuro .contacto{

    background:#07111f;

}




/* 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;

}


}



.btn-cobertura{

    display:inline-block;

    padding:16px 35px;

    background:#007bff;

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    border-radius:50px;

    transition:.3s ease;

    animation:pulse 2s infinite;

    box-shadow:0 10px 25px rgba(0,123,255,.35);

}

.btn-cobertura:hover{

    transform:scale(1.08);

    background:#005ecb;

    box-shadow:0 15px 35px rgba(0,123,255,.5);

}

@keyframes pulse{

    0%{

        transform:scale(1);

        box-shadow:0 0 0 0 rgba(0,123,255,.5);

    }

    70%{

        transform:scale(1.04);

        box-shadow:0 0 0 20px rgba(0,123,255,0);

    }

    100%{

        transform:scale(1);

        box-shadow:0 0 0 0 rgba(0,123,255,0);

    }

}


.whatsapp{

    display:inline-block;

    margin-top:20px;

    padding:16px 35px;

    background:#25D366;

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    border-radius:50px;

    transition:.3s;

    box-shadow:0 10px 25px rgba(37,211,102,.35);

}

.whatsapp:hover{

    transform:scale(1.08);

    background:#1ebe5d;

    box-shadow:0 15px 35px rgba(37,211,102,.45);

}




/* ================= ANIMACION DE ENTRADA ================= */


body{

    animation:entradaPagina .6s ease;

}



@keyframes entradaPagina{


from{

    opacity:0;

    transform:translateY(10px);

}



to{

    opacity:1;

    transform:translateY(0);

}


}




/* ================= OPTIMIZACION ANIMACIONES ================= */


.fibra{


    will-change:transform, opacity;


}



.particulas span{


    will-change:transform, opacity;


}




/* ================= PARTICULAS MAS FLUIDAS ================= */


.particulas span:nth-child(2){

    animation-delay:.1s;

}



.particulas span:nth-child(3){

    animation-delay:.4s;

}



.particulas span:nth-child(4){

    animation-delay:.7s;

}



.particulas span:nth-child(5){

    animation-delay:1.2s;

}



.particulas span:nth-child(6){

    animation-delay:1.5s;

}