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


}



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


.fondo-cobertura{

position:relative;

overflow:hidden;

min-height:100vh;

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

}

/* FIBRAS */


.fibra{

z-index:1;

}

.mapa{

position:relative;

z-index:5;

max-width:1100px;

margin:50px auto;

border-radius:25px;

overflow:hidden;

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

}


/* PARTICULAS */


.particulas span{

z-index:2;

}



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



body.oscuro .fondo-cobertura{

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

}

body.oscuro .mapa{

box-shadow:

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

}

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

}



/* =====================================================
   CABECERA / TÍTULO COBERTURA
===================================================== */

.titulo-cobertura{

    text-align:center;

    margin:0 auto 35px;

    padding-top:100px;

    position:relative;

    z-index:5;

}

.titulo-cobertura h1{

    font-size:58px;

    color:#003b73;

    font-weight:800;

    margin:0;

    line-height:1.2;

}

.titulo-cobertura span{

    margin-right:10px;

}


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

.contenido-cobertura {
    display: grid !important;
    grid-template-columns: 0.85fr 1.5fr !important;
    gap: 50px !important;

    align-items: start !important;

    margin: 0 auto !important;
    padding: 0 50px 80px !important;
}


/* TEXTO ARRIBA */

.info-cobertura {
    display: flex !important;
    flex-direction: column !important;

    justify-content: flex-start !important;
    align-items: stretch !important;

    height: auto !important;

    padding: 0 !important;
    margin: 0 !important;

    position: relative !important;
    top: 0 !important;

    transform: translateY(0) !important;
}


/* PÁRRAFO */

.info-cobertura p {
    margin-top: 0 !important;
    padding-top: 0 !important;

    font-size: 22px;
    line-height: 1.8;

    color: #555;

    text-align: justify;
}


/* =====================================================
   BOTÓN
===================================================== */

.boton-cobertura{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 40px;

    background:linear-gradient(
        135deg,
        #00aaff,
        #0066cc
    );

    color:white;

    font-size:18px;

    font-weight:bold;

    text-decoration:none;

    border-radius:50px;

    transition:.35s;

    box-shadow:
    0 12px 25px rgba(0,102,204,.30);

}

.boton-cobertura:hover{

    transform:translateY(-5px);

    box-shadow:
    0 18px 35px rgba(0,170,255,.45);

    background:linear-gradient(
        135deg,
        #0095ff,
        #003b73
    );

}


/* =====================================================
   MAPA
===================================================== */
/* MAPA */

.mapa {
    width: 100% !important;

    height: 650px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 25px;

    overflow: hidden;
}


/* IFRAME */

.mapa iframe {
    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0;
    display: block;
}

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

body.oscuro .titulo-cobertura h1{

    color:#ffffff;

}

body.oscuro .info-cobertura p{

    color:#d5e9f7;

}

body.oscuro .mapa{

    box-shadow:
    0 15px 45px rgba(0,0,0,.60);

}


/* =====================================================
   MÓVIL / TABLET
===================================================== */

@media(max-width:900px){

    .titulo-cobertura{

        padding-top:70px;

        margin-bottom:30px;

    }

    .titulo-cobertura h1{

        font-size:42px;

    }

    .contenido-cobertura{

        grid-template-columns:1fr;

        gap:35px;

        padding:0 25px 60px;

    }

    .info-cobertura{

        text-align:center;

    }

    .mapa{

        height:500px;

    }

}


/* =====================================================
   CELULARES PEQUEÑOS
===================================================== */

@media(max-width:500px){

    .titulo-cobertura h1{

        font-size:34px;

    }

    .info-cobertura p{

        font-size:18px;

    }

    .mapa{

        height:450px;

        border-radius:18px;

    }

    .boton-cobertura{

        width:100%;

    }

}