h1,h2,h3,h4{
	color: #1d273b; 
	font-weight: 300;
}
body {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
  line-height: 1.6;
  animation: moverFondo 10s ease infinite;

  background: #076aa8;
background: radial-gradient(circle,rgba(7, 106, 168, 1) 0%, rgba(175, 186, 181, 1) 100%, rgba(39, 172, 196, 0.9) 100%);

}

@keyframes moverFondo {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}


.contenedor{
	width: 90%;
	max-width: 1350px;
	margin: auto;
	overflow: hidden;
    display: flex;
}
.contenedor1{
	width: 90%;
	max-width: 1350px;
	margin: auto;
	overflow: hidden;
	padding: 60px 0;
}
h1{
	font-size: 50px;
	color: #195182;
}


/*header*/
header::before{
	content: "";
	display: block;
	margin-bottom: 80px;

}
/*-------------------------menu.----------------------------
.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  height: 100vh;
  list-style: none;
}

menu li {
  width: 125px;
  height: 50px;
  transition: background-position-x 0.9s linear;
  text-align: center;

  a {
    font-size: 22px;
    color: #777;
    text-decoration: none;
    transition: all 0.45s;
  }

}
  &:hover {
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEi%0D%0AIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs%0D%0AaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0%0D%0AaD0iMzkwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDM5MCA1MCIgZW5hYmxlLWJhY2tn%0D%0Acm91bmQ9Im5ldyAwIDAgMzkwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0i%0D%0Abm9uZSIgc3Ryb2tlPSIjZDk0ZjVjIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGlt%0D%0AaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMAoJYzEzLjc1LDAsMjguNzQtMzgu%0D%0ANzc4LDQ2LjE2OC0xOS40MTZDMTkyLjY2OSw0Ni41LDI0My42MDMsNDcuNTg1LDI2MCw0Ny41ODVj%0D%0AMzEuODIxLDAsMTMwLDAsMTMwLDAiLz4KPC9zdmc+Cg==");
    animation: line 1s;
  }

  &:hover a {
    color: #d94f5c;
  }

  &:not(:last-child) {
    margin-right: 30px;
  }
}

@keyframes line {
  0% {
    background-position-x: 390px;
  }
}
  ------------------------------------------fin menu*/
nav{
	width: 100%;
	height: 80px;
	background: #076aa8;
    background: radial-gradient(circle,rgba(7, 106, 168, 1) 0%, rgba(175, 186, 181, 1) 100%, rgba(39, 172, 196, 0.9) 100%);
	border-bottom: 1px solid transparent;
	box-shadow: 1px 1px 10px 0 rgb(0, 0, 0, .2);
	position: fixed;
	top: 0;
	z-index: 100;
    
	transition: ease-in-out	0.5s;
	

}
.nav{
	display: flex;
	justify-content: space-between;
	height: 80px;
	width: 100%;
	align-items: center;
	padding: 0 40px;
}

.nav .logo{
	height: 80px;
    padding-top: 5px;
    border-radius: 50px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

}
.logo:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 25px rgba(0,0,0,0.4);
}

.logo {
  filter: brightness(1.2) contrast(1.1);
  
}
.nav .logo img{
	margin-top: 10px;
	height: 70%;
	vertical-weight: 300;
    

}

.enlaces-header{
	font-weight: bold;
	transition: ease-in-out	0.5s;
}

 .enlaces-header a{
	color: #fff;
	text-decoration: none;
	margin-left: 20px;
	font-size: 20px;
    transition: color 0.3s;
    position: relative;

     


}




 .enlaces-header a::after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 2px;
    left: 0;
    bottom: -4px;
    background:#ffcc00;
    transition: width 0.3s ease;
}
.enlaces-header a:hover{
    color:#ffcc00;
}
.enlaces-header a:hover::after{
    width: 100%;
}
.menu{
	width: 80px;
	height: 80px;
	display: none;
	text-align: center;
	z-index: 100;
	cursor: pointer;
	transition: color 0.5s ease-in;

}
.menu > i{
	font-size: 25px;
	line-height: 80px;
}
.contenido-header{
	width: 100%;
	height: 600px;
	display: flex;
	justify-content: space-between;
	align-items: center;

}
.contenido-header{
    text-align: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.textos-header h1{
	margin: 0 0 0 20px;
    color: #fff;
    
}

.contenido-header p{
	font-weight: 100;
	margin-top: 14px;
	color: #f2f2f2;
	padding-right: 10px;
	font-size: 20px;
    margin: 0 0 0 20px;
    margin-bottom: 20px;
}

.video-container{
    max-width: 800px;
      width: 90%;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.6);
      background: #000;
      position: relative;
      
}
  video {
      width: 100%;
      display: flex;
      outline: none;
     justify-content: center;
    margin-left: 50px;
      
    }
.video-container::before {
      content: "Reproductor de Video";
      position: absolute;
      top: 10px;
      left: 20px;
      color: #ffffffcc;
      font-size: 18px;
      font-weight: bold;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 5px 10px;
      border-radius: 8px;
    }
.contenido-header a{
	margin: 28px 0 0 0;
	width: 130px;
	display: inline-block;
	padding: 12px 0;
	text-decoration: none;
	text-align: center;
	font-weight: 400;
	text-transform: uppercase;
	font-size:14px ;
	border-radius: 5px;
	box-shadow: 0 8px 32px rgb(31, 222, 130, .46) ;


}
.titulo{
	font-size: 50px;
	color: #fff;
	text-align: center;
}

/*about-us*/
about-us{
	position: relative;
	justify-content: center;
	background: #f2f2f2;

}
.contenedor-articulo{
	display: flex;
    flex-wrap: wrap;
	margin-top: 50px;
	justify-content: space-around;
    flex-direction: row-reverse;

}
.articulo{
	width: 90%%;
	height: 580px;
	background: #1FAEF5;
	margin-bottom: 30px;
	border-radius: 10px;
	
	transition: 0.5s;


}
.articulo:hover{
	box-shadow: 0 4px 10px rgb(17, 29, 48, .26);
}
.articulo i{
	font-size: 15px;
    border-radius: 50%;
	color: #fff ;
	background: #000;
	width: 25px;
	height: 25px;
	text-align: center;
    padding-top: 5px;
	
}
.articulo h2 {
	color: #fff;
	font-size: 50px;
	text-align: center;
    
}
.nada{
    color: #195182; 
    background: #195182;
    border-radius: 10px 10px 0 0;
}
.promocion{
    color: #fff;
    text-align: center;
}

.plan-mbps{
    border-top-left-radius 10px;
    padding: 20px 30px 10px 30px;
    background: #195182;   
    text-align: center;
}
.plan-mbps p{
   
    color: #fff;
}
.precio-plan{
    display: flex;
    align-items: center;
    justify-content: center;  
   padding: 11px 30px 5px 30px;
    align-items: center; 
    font-size: 40px;
    color: #104d7c;
}

/*-------------------------------*/

.plan {
  
  color: white;
  padding: 5px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
  max-width: 200px;
  margin: auto;
  font-family: 'Segoe UI', sans-serif;
}

.plan:hover {
  transform: scale(1.05);
}

.nombre-plan {
  font-size: 1.5rem;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.precio {
  font-size: 3.5rem;
  font-weight: bold;
  margin: 10px 0;
}

.moneda {
  font-size: 1.5rem;
  vertical-align: super;
}

.mes {
  font-size: 1rem;
  color: #e0e0e0;
}


/*----------------------------------------------*/


.gratis {
    padding: 7px;
    border-radius: 8px;
    margin: 12px 16px 0 !important;
    background-color: #0082c8;
    display: flex;
   justify-content: center;  
   align-items: center;     
   height:40px;
}
.tv{
    padding: 7px;
    border-radius: 8px;
    margin: 20px 16px 0 !important;
    background-color: #0082c8;
    display: flex;
   justify-content: center;  
   align-items: center;     
   height:60px;
   text-align: center;
    
}

.instal-rapida{
    display: flex;
    align-items: center;
    padding: 7px;
    margin: 0 16px 0;
    justify-content: center;
    text-align: center;
}
.instal-rapida img{
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border-radius: 10px;
    align-items: center;
    transition: transform 0.3s ease;
}
.gif-hover:hover{
    transform: scale(1.2); /* Hace zoom al 120% */

}
.boton-whats{
   display: flex;
  justify-content: center; 
  align-items: center;     
  height:80px;
    
	/*margin: 0 0 0 0;
	width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
	display: inline-block;
	background: #6BC3F2 ;
	color: #fff;
	padding: 12px 0;
	justify-content: space-evenly;
	text-decoration: none;
	text-align: center;
	font-weight: 400;
	text-transform: uppercase;
	font-size:14px ;
	border-radius: 5px;
	/*box-shadow: 0 8px 32px rgb(31, 222, 130, .46) ;*/
}	
.boton{
    background-color: #195182; /* color verde WhatsApp */
    color: white;
    padding: 14px 28px;
    font-size: 16px;
    font-family: 'Segoe UI', sans-serif;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none; /* quitar subrayado */
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.boton:hover {
  background-color: #45a049;
  transform: scale(1.05);
}
.articulo>a:hover{
	color: #FFC300 ;
	transition: color .5s;
}

/* question*/


.questions{
	height: 600px;
	display: flex;
	justify-content: space-between;
	align-items: center;

}
.questions>img{
	width: 550px;
}


.textos-questions{
	margin: 0 0 0 20px;
}
.textos-questions p{
	font-weight: 100;
	margin-top: 14px;
	color: #5d6678;
}

.textos-questions a{
	margin: 28px 0 0 0;
	width: 130px;
	display: inline-block;
	background: #1fde82;
	color: #fff;
	padding: 12px 0;
	text-decoration: none;
	text-align: center;
	font-weight: 400;
	text-transform: uppercase;
	font-size:14px ;
	border-radius: 5px;
	box-shadow: 0 8px 32px rgb(31, 222, 130, .46) ;


}

/*results*/
.results{
	background: #2570ff;
	padding-top: 30px;

}
.conten-results{
	display: flex;
	justify-content: space-evenly;
}
 .numbers{
 	width: 60%;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-evenly;
 }
.numbers .number {
	width: 45%;
	background: rgba(255, 255, 255, .2);
    color: #fff;
    border-radius: 10px;
    padding: 40px 35px;
    margin-bottom: 20px;
}
.numbers .number h4 {
    color: #fff;
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 20px;
}

.numbers .number p {
    color: #f2f5fc;
    font-weight: 300;
}

.results-text {
    width: 37%;
}

.results-text h4 {
    color: #fff;
    font-size: 50px;
}

.results-text p {
    color: #fff;
    font-weight: 300;
    margin: 20px 0;
}
 .results-text>a {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    border: 1px solid #fff;
    padding: 10px 0;
    width: 120px;
    text-align: center;
    border-radius: 5px;
}

/* Services */

.services {
    display: flex;
    justify-content: space-between;
}

.services>img {
    width: 500px;
}

.box-skills {
    margin: 30px 30px 0 0;
    
}
.box-skills h1{
    color: #fff;
}
.box-skills h4 {
    font-size: 24px;
    background: #f2f2f2;
    width: 350px;
    border-radius: 6px;
    padding: 10px 0 10px 15px;
    margin-bottom: 10px;
}

.box-skills i {
    color: #1FAEF5;
    font-size: 20px;
}
.box-skills a{
	font-size: 28px;
    background: #f2f2f2;
    
    border-radius: 6px;
    padding: 10px 0 10px 15px;
    margin-bottom: 10px;
    color: #1FAEF5;

}


/* footer */

footer {
    background: #f2f2f2;
    padding: 60px 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: auto;
}

.partFooter {
    width: 20%;
    text-align: center;
}

.partFooter h4 {
    color: #1d273b;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 30px;
}

.partFooter a {
    display: block;
    text-decoration: none;
    color: #5D6678;
    font-weight: 300;
    transition: color .3s ease-in-out;
    margin-bottom: 10px;
}


.partFooter a:hover {
    color: #1FDE82;
}

.partFooter img {
    width: 70%;
}

.social-media a {
    font-size: 20px;
    display: inline-block;
    color: #adb6c7;
    border: 1px solid #adb6c7;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    line-height: 36px;
    cursor: pointer;
    margin-top: 20px;
    text-align: center;
    transition: all ease-in-out .3s;
    margin-right: 5px;
}

.social-media i:hover {
    color: #fff;
    background-color: #1FDE82;
    border-color: #1FDE82;
}




/* Breakpoints responsive */

@media screen and (max-width:800px) {
    .titulo {
        font-size: 45px;
    }
    .cel_contrataciones a{
        display: none;
    }
    .cel_contrataciones p{
        display: none;
    }
    .contenido-header {
        flex-direction: column;
        justify-content: space-evenly;
        height: 720px;
    }
    .textos-header h1{
    	font-size: 40px;
    }

    .contenido-header>img {
        width: 500px;
    }
    
    .textos-header {
        margin: 0;
    }

    /* About us */

    .articulo {
        width: 60%;
    }

    /* Questions */

    .questions {
        height: 720px;
        justify-content: space-evenly;
        flex-direction: column;
    }

    .questions>img {
        width: 500px;
    }

    /* results */

    .conten-results {
        flex-direction: column-reverse;
    }

    .results-text>a {
        margin-bottom: 60px;
    }

    .numbers {
        width: 100%;
        /* justify-content: space-between; */
    }

    .results-text {
        width: 100%;
    }

    /* Services */

    .services {
        flex-direction: column-reverse;
        align-items: center;
    }

    .box-skills {
        margin: 0 0 30px 0;

    }

    .box-skills h4 {
        width: 500px;
    }

    .services>img {
        width: 500px;
    }

    /* Footer */

    footer {
        justify-content: space-evenly;
    }

    .partFooter {
        width: 40%;
        margin-bottom: 40px;
    }
}


@media screen and (max-width:600px) {
    .titulo {
        font-size: 35px;
    }
 
    h1 {
        font-size: 40px;
    }

    .contenido-header {
        height: 650px;
    }

    .nav {
        padding: 0 10px;
    }

    .contenido-header>img {
        width: 400px;
    }

    .enlaces-header {  /* menu*/
        position: fixed;
        background: #667db6;
        /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
        /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
        clip-path: circle(0.0% at 100% 0);
    }

    .nav .menudos {

        -webkit-clip-path: circle(150% at 100% 0);
        clip-path: circle(150% at 100% 0);

    }

    .nav .enlaces-header a {
        color: #fff;
    }

    .menu {
        display: block;
    }

    /* About us */

    .articulo {
        width: 95%;
    }

    /* Questions */

    .questions>img {
        width: 200px;
    }

    /* results */

    .numbers .number {
        width: 95%;
    }

    .results-text h4 {
        font-size: 35px;
    }

    /* Services */

    .services>img {
        width: 200px;
    }

    .box-skills h4 {
        width: 100%;
    }

    /* Footer */
    .partFooter {
        width: 95%;
        margin-bottom: 40px;
    }
}