/*Menu Superior*/

/* Evitar scroll horizontal */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  }



h2 {
  color: rgb(75, 0, 53);
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Open Sans';
}

nav{
  display: flex;
  position: absolute;
  flex-direction: row;
	width: 100%;
	margin: auto;
	background-color: #ffffff;
	font-size: 18px;
	margin-top: 0px;
  justify-content: center;
  align-items: center;

  
  
}

.menu-block {
  display: flex;
  width: auto;
  align-items: center;
  position: fixed;
  margin-top: 80px;
  z-index: 1;
  
  background-color: #ffffff;




}

.menu-horizontal{
  display: flex;
	list-style: none;
  margin-left: 100px;
	justify-content: space-around;
  z-index: 1;

}
.menu-horizontal > li > a{
	display: block;
	padding: 15px 20px;
	color: rgb(0, 0, 0);
	text-decoration: none;
}

.menu-horizontal > li > a:hover{
	display: block;
	padding: 15px 20px;
	color: rgb(255, 255, 255);
	text-decoration: none;
}


.menu-horizontal > li:hover{
	background-color: rgba(75, 0, 53, 0.8);
  
 
 
}
.menu-vertical{
	position: absolute;
	display: none;
	list-style: none;
	width: 270px;
	background-color: rgba(0, 0, 0, .5);
  z-index: 1;

}
.menu-horizontal li:hover .menu-vertical{
	display: block;
}
.menu-vertical li:hover{
	background-color: rgba(75, 0, 53, 0.8);
}

.menu-vertical li a{
	display: block;
	color: white;
	text-decoration: none;
	padding: 15px 15px 15px 20px;
}

/* Fin Menu superior */
  



/* iconos en el texto del video */

.item {
  display: flex;
  align-items: center;
  margin-top: 10px;

}

.item i {
  margin-right: 10px;
}
 

.item-banner {
  display: flex;
  align-items: center;
  margin: 5px 0px 5px 0px;
  font-size: 1.5rem;
  
}
/* Fin de iconos texto video */ 
 
 /* Botón */

  .btn {
    border: none; 
    color: rgb(0, 0, 0); 
    padding: 5px 10px 5px 10px; 
    cursor: pointer; 
    border-radius: 25px;
    font-size: 15px;
    margin-top: 15px;
  }

  a {
    text-decoration: none;
    color: rgba(0, 0, 0, 1);
  }

/* Estilo para enlaces visitados */

a:visited {

  color: rgb(0, 0, 0);
}
  
  .boton {background: rgba(255, 255, 255, 1) ; border: 2px solid rgba(55,37,128, 0.8); } 
  .boton:hover {background:  rgb(70, 160, 73); color: white; border: 2px solid rgba(139, 36, 116, 1);}

  .boton:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 30px -15px rgba(0,0,0,0.5);
    background: rgb(70, 160, 73);
    z-index: 1;
    transition: 500ms;
}

/* Estilos generales */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

span {
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  margin: 5px 0px 5px 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
}

p {
  line-height: 1.8;
}

.p-home {
  line-height: 1.5;
  font-size: 1.2rem;
  margin: 20px 0px;
}

.p-home-menu {
    line-height: 1.5;
    font-size: 1.2rem;
    color:#000000
    
}

.container-bienvenida {
  display: flex;
  flex-direction: column;
  width: 80%;
  background-color: rgb(255, 255, 255);
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  margin-top: 40px;
    
}

.presentacion {
  display: flex;
  width: auto;
  height: auto;
  background-color: rgb(255, 255, 255);
  justify-content: center;

  
    
    
}

  
  /* Estilos del body */

.overflow-home {
  display: flex;
  width: auto;
  height: 600px;
  max-height: 500px; /* si quieres que ocupe la mitad de la pantalla, sino coloca px. */
  overflow: hidden; /* escondes lo que queda de video despues del porcentaje especificado */
  justify-content: center;
}

.pesos_chilenos{
  font-size: 0.9rem;
  font-style: italic;
  font-family:Arial, Helvetica, sans-serif;
  color: rgba(55, 37, 128, 0.8);
  margin-top: 10px;
}


.titulo-home-video{
  font-size: 5rem;
  font-style: italic;
  font-family:Arial, Helvetica, sans-serif;
  color: rgba(55, 37, 128, 0.8);
  animation: velocidad 0.8s 1;
}

.titulo-home-video_texto{
  font-size: 4rem;
  font-style: italic;
  font-family:Arial, Helvetica, sans-serif;
  color: rgba(55,37,128, 0.8);
  animation: velocidad 0.8s 1;
}

.titulo-home-texto{
  font-size: 3rem;
  font-style: italic;
  font-family:Arial, Helvetica, sans-serif;
  color: rgba(55,37,128, 0.8);
  animation: velocidad 0.8s 1;
  margin: 10px;
  padding: 10px;
}



@keyframes velocidad {
  0% {
    transform: translateX(-600px)
  }

}

.titulo-caja {
  display: flex;
  align-items: center;
  justify-content: center;
}

.titulo-precio-home {
  font-size: 3rem;
  font-style: italic;
  font-family:Arial, Helvetica, sans-serif;
  color: rgba(55,37,128, 0.8);
  margin: 0;
}

.titulo-bienvenida-home {
  font-size: 2rem;
  font-style: italic;
  font-family:Arial, Helvetica, sans-serif;
  color: rgba(55,37,128, 0.8);
  margin: 0px 0px 20px 0px;
}


  main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }


  
  .full-width-container {
    display: flex;
    width: auto;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 10px 0px 10px 0px;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    z-index: 0;

    
    
  }


  .full-width-container-dos {
    display: flex;
    width: 100%;
    background-color: rgba(55,37,128, 0.8);
    padding: 10px;
    justify-content: center;
    align-items: center;
    
    
  }

  .full-width-container-tres {
    display: flex;
    width: 100%;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 50px 0px;
    
    
    
  }

  .full-width-container-premium {
    display: flex;
    flex-direction: column;
    width: auto;
    height: 300px;
    background-color: rgb(255, 255, 255);
    padding: 0px, 0px, 0px, 0px;
    justify-content: center;
    align-items: center;
    margin-top: 180px;

    
  }

  .full-width-container-vps {
    display: flex;
    flex-direction: column;
    width: auto;
    background-color: rgb(255, 255, 255);
    padding: 0px, 0px, 0px, 0px;
    justify-content: center;
    align-items: center;

    
  }

  .full-width-container-premium-wp {
    display: flex;
    flex-direction: column;
    
    background-color: rgb(255, 255, 255);
    padding: 0px, 0px, 0px, 0px;
    justify-content: center;
    align-items: center;

    
  }

  .full-width-container-premium2 {
    display: flex;
    flex-direction: column;
    width: auto;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    justify-content: center;
    align-items: center;
    
    
    
  }

  /* Reseller*/
.p-reseller {
  width: 1200px;
  margin: 40px 0px 40px 0px;


}


  /*Fin Reseller*/


  /* Banner linux con hosting compartido */
  
  .container_ancho {
    display: flex;
    width: auto;
    background-color: rgba(255, 255, 255, 1);
    padding: 50px;
    justify-content: center;
    align-items: center;

  }

  .container_ancho_linux {
    display: flex;
    width: 100%;
    background-color: rgba(139, 36, 116, 0.1);
    padding: 50px;
    justify-content: center;
    align-items: center;
    margin: 10px 0px 10px 0px;

  }


.color_texto_1 {
  color:#4b0035;
  font-size: 3rem;
}

.container-linux {
  display: flex;
  flex-direction: row;

  width: 560px;
  height: 400px;
  margin: 20px;
  padding: 20px;
  justify-content: center;
  border-radius: 25px;
}

.container-texto-shared {
  display: flex;
  flex-direction: column;

  width: 600px;
  height: 400px;
  margin: 20px;
  padding: 20px;
  border-radius: 25px;
  
}

.p-home2 {
  line-height: 1.2;
  font-size: 4rem;
  color: rgb(75, 0, 53);
}

.p-home3 {
  line-height: 1.2;
  font-size: 1.6rem;
  
}

.p-home4 {
  width: 1200px;
  line-height: 1.5;
  font-size: 1.2rem;
  
}

/* FIN banner linux compartido*/


  .four-boxes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 30px 20px 10px 20px;
  }
  
  .box {
    width: 380px;
    background-color: #fff;
    background-position: 100% 100% #385cff;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 20px;
    margin: 10px;
    box-sizing: border-box;
    align-items: center;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  }

  .box-inicio {
    display: flex;
    flex-direction: column;
    width: 280px;
    height: 100px;
    background-color: rgba(56, 108, 255,0.3);
    background-position: 100% 100% #386cff;
    background-image: linear-gradient(25deg,rgba(56, 108, 255,0.4), rgba(139, 36, 116,0.4));
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 20px;
    margin: 30px;
    box-sizing: border-box;
    align-items: center;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  }

  .box-premium {
    width: 280px;
    height: 480px;
    background-color: #fff;
    background-position: 100% 100% #385cff;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 20px;
    margin: 30px;
    box-sizing: border-box;
    align-items: center;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  }

  .box-gold {
    width: 280px;
    height: 480px;
    background-color: rgba(240, 184, 41, 0.3);
    background-position: 100% 100% #385cff;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 20px;
    margin: 30px;
    box-sizing: border-box;
    align-items: center;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  }

  .box-gold:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 30px -15px rgba(0,0,0,0.5);
    background: rgba(240, 184, 41, 0.3);
    z-index: 1;
    transition: 500ms;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

  .box:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 30px -15px rgba(0,0,0,0.5);
    background: #ffffff;
    z-index: 1;
    transition: 500ms;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.box-premium:hover{
  transform: scale(1.05);
  box-shadow: 0px 0px 30px -15px rgba(0,0,0,0.5);
  background: #ffffff;
  z-index: 1;
  transition: 500ms;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.box-inicio:hover{
  transform: scale(1.05);
  box-shadow: 0px 0px 30px -15px rgba(0,0,0,0.5);
  background: #ffffff;
  z-index: 1;
  transition: 500ms;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}


  .box1 {
    width: 400px;
    background-color: #ffffff ;
    align-items: center;
    justify-content: center;
    border: 2px solid #ccc;
    border-radius: 20px;
    padding: 20px;
    margin: 10px;
    box-sizing: border-box;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  }

  .box1:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 30px -15px rgba(0,0,0,0.5);
    background: #ffffff;
    z-index: 1;
    transition: 500ms;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

  .box2 {
    display: flex;
    height: 60px;
    background-color: rgb(255, 255, 255) ;
    border: 0px solid #ccc;
    border-radius: 10px;
    padding: 0px;
    justify-content: center;
    align-items: center;
    margin: 0px;
   
    
  }

  .box-anos {
    display: flex;
    height: 40px;
    background-color: #ffffff ;
    border: 0px solid #ccc;
    border-radius: 10px;
    padding: 0px;
    justify-content: center;
    align-items: center;
    margin: 0px;
   
    
  }

  .box3 {
    display: flex;
    width: auto;
    color: rgb(172, 114, 5);
    
    border: 0px solid #ccc;
    border-radius: 20px;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    justify-content: center;
    font-size: 4rem;
    
    
  }

  .box4 {
    display: flex;
    width: auto;
    flex-direction: column;
    color: #8b2474;
    justify-content: center;
    font-size: 4rem;
    border-radius: 20px;
    padding: 0px;
    margin: 0px;
    justify-content: center;
    align-items: center;
    
  }

  .box1-porque {   
    border: 0px solid #ccc;
    padding: 20px;
    margin: 20px;

    width: 450px;
   
  }

  .box1-garantia {
    display: flex;
    width: auto;
    background-color: #fff;
    border: 0px solid #ccc;
    border-radius: 20px;
    padding: 20px;
    margin: 10px;
    box-sizing: border-box;
    justify-content: center;
  }




  /* Estilos del pie de página */
  
  footer {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
  }


  /****** video con texto ******/

 .container_video {
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 450px;
  margin-top: 50px;
  /*max-height: 40vh; /* si quieres que ocupe la mitad de la pantalla, sino coloca px. */ 
  overflow: hidden; /* escondes lo que queda de video despues del porcentaje especificado */
 }
 
  .absolute {
    width: auto;
    height: auto;
    top: 160px;
    right: auto;
    position:absolute;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items:baseline;
    color: #000000;

    
 }

 .absolute2 {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  top: 280px;
  right: auto;
  position: absolute;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items:baseline;
  color: rgba(55,37,128,1);
  
}

.absolute3 {
  width: auto;
  height: auto;
  top: 550px;
  right: auto;
  position: absolute;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items:baseline;
  color: #000000;
  
}

.absolute4 {
  width: auto;
  height: auto;
  top: 290px;
  right: auto;
  position: absolute;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items:baseline;
  color: #000000;
  
}

.absolute5 {
  width: auto;
  height: auto;
  top: 100px;
  right: auto;
  position: absolute;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items:baseline;
  color: #000000;
  
}

.absolute5 {
  width: auto;
  height: auto;
  top: 400px;
  right: auto;
  position: absolute;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items:baseline;
  color: #000000;
  
}

/******  FIN video con texto ******/

@media screen and (max-width: 800px) {
    h1{
        font-size: 30px;
        margin-bottom: 0;
    }
}
 
@media screen and (max-width: 500px) {
    h1{
        font-size: 50px;
    }
}

/* SOPORTE */

.container-soporte {
  display: flex;
  flex-direction: column;
  width: auto;
  background-color: rgba(255, 255, 255, 0);
  padding: 10px;
  margin: 100px 100px 20px 100px;
  align-items: center;
  justify-content: center;
  border: 0px solid rgb(255, 255, 255);
  border-radius: 20px
  ;
    
    
}

.container-soporte2 {
  display: flex;
  flex-direction: column;
  width: auto;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10px;
  margin: 10px 0px 20px 0px;
  align-items: center;
  justify-content: center;
  border: 0px solid rgb(139, 36, 116);
  border-radius: 20px
  ;
    
    
}

.full-width-container-soporte {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10px;
  justify-content: center;
  align-items: center;
}
titulo_soporte

.box1-soporte {
  width: 1200px;
  height: auto;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 20px;
  padding: 20px;
  margin: 10px;
  
}

.box2-soporte {
  width: 600px;
  height: auto;
  background-color: #fff;
  border: 0px solid #ccc;
  border-radius: 20px;
  padding: 20px;
  margin: 10px;
  box-sizing: border-box;
}

.box1-soporte-conocimiento {
  width: 1200px;
  height: auto;
  background-color: #fff;
  border: 0px solid #ccc;
  border-radius: 20px;
  padding: 20px;
  margin: 10px;
  justify-items: center;

}

.titulo_soporte > {
  dispaly: flex
  margin-top: 150px 0px 20px 0px;
 
  

  
}

/* Medalla */

.container_medalla {
  display: flex;
  width: 180px;
  height: 180px;
  background-color: rgba(139, 36, 116,1);
  font-family: 'Alfa Slab One', cursive;
  position: relative;

  align-items: center;


  
  
}

#circle {
  width: 90%;
  height: 90%;
  shape-outside: circle();
  clip-path: circle();
  background-image: linear-gradient(320deg, rgb(238, 228, 137) 60%, white);
  /*background: rgb(229, 236, 126);*/
  position:absolute;
      top: 50%;
      left: 50%;
      height: 90%;
      width: 90%;
      margin: -45% 0 0 -45%;   
  
  border-radius: 50%;                 /* Aquí se especifica el borde externo del circulo*/
  border:3px solid rgb(241, 199, 58);          /* Aquí se especifica el grosor del borde tipo y color*/
  
}

#circle2 {
  width: 80%;
  height: 80%;
  shape-outside: circle();
  clip-path: circle();
  background-image: linear-gradient(320deg, rgb(240, 199, 16) 60%, white);
  /*background: rgb(240, 199, 16);*/
  position:absolute;
      top: 49%;
      left: 49%;
      height: 80%;
      width: 80%;
      margin: -40% 0 0 -40%;   
      
  border-radius: 50%;                 /* Aquí se especifica el borde externo del circulo*/
  border: 5px solid #8b2474;          /* Aquí se especifica el grosor del borde tipo y color*/
}

#circle3 {
  width: 70%;
  height: 70%;
  shape-outside: circle();
  clip-path: circle();
  /*background-image: linear-gradient(320deg, rgb(240, 227, 116) 60%, white);*/
  /*background: rgb(240, 227, 116);*/
  position:absolute;
      top: 50%;
      left: 50%;
      height: 72%;
      width: 72%;
      margin: -36% 0 0 -36%;   
      border-radius: 50%;                 /* Aquí se especifica el borde externo del circulo*/
      border:3px solid rgb(255,251,0);    /* Aquí se especifica el grosor del borde tipo y color*/
      
}

#circle4 {
  display: flex;
  width: 70%;
  height: 70%;
  shape-outside: circle();
  clip-path: circle();
  background-image: linear-gradient(320deg, rgb(241, 201, 91) 45%, white);
  /*background: rgb(241, 201, 91);*/
  position:absolute;
      top: 50%;
      left: 50%;
      height: 60%;
      width: 60%;
      margin: -30% 0 0 -30%;   
  border-radius: 50%;                 /* Aquí se especifica el borde externo del circulo*/
  border: 2px solid rgb(147, 77, 5, 0.3);          /* Aquí se especifica el grosor del borde tipo y color*/
  
  
}


.box1-medalla {
  display: flex;
  flex-direction: column;
  width: 250px;
  background-color: rgba(139, 36, 116,1) ;
  align-items: center;
  justify-content: center;
  border: 2px solid #ccc;
  border-radius: 20px;
  padding: 10px;
  margin: 10px;
  box-sizing: border-box;
  font-size: 2.5rem;
  font-family: 'Bungee+Spice';
  box-shadow: 2px 2px 2px 1px rgba(139, 36, 116, 1);
}

.container_medalla:hover{
  transform: scale(1.1);

  background: rgba(139, 36, 116, 1);
  z-index: 1;
  transition: 800ms;
}

.box2-medalla {
  display: flex;
  height: 40px;
  background-color: rgba(139, 36, 116,1) ;
  border: 0px solid #ccc;
  border-radius: 10px;
  padding: 0px;
  justify-content: center;
  align-items: center;
  margin: 10px 0px 0px 0px;
 
  
}


.titulo-anos{
  font-size: 3rem;
  font-style: italic;
  font-family:Arial, Helvetica, sans-serif;
  color: rgba(255, 255, 255, 1);
  animation: velocidad 0.8s 1;
  margin: 0px;
  padding: 0px;
  font-weight: bold;
}


.texto-borde {
  -webkit-text-stroke: 3px #8b2474;
  color: goldenrod;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
}

.achurado {
  width: 100vw;
  height: 100vh;
  background-image:
    repeating-linear-gradient(
      320deg,
      transparent 1px 5px,
       gold 10px 20px
    );
}

/*  FIN MEDALLA */

/* Texto Planes Premium*/

.detalles-premium {
  line-height: 1.6rem;
  font-size: 1rem;

}

.detalles-gold {
  line-height: 1.6rem;
  font-size: 1rem;
  color: #386cff;

}



/* Fin texto Planes Premium */

/* Footer*/

.container_marcas {
  display: flex;
  background-color: rgba(255, 255, 255, 1);
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  margin-top: 40px;

}

.container-footer {
  display: flex;
  width: 1000px;
  flex-direction: row;
  width: auto;
  margin-top: 20px;
 
  justify-content: center;

}

.box1-footer {
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 200px;
  margin-bottom: 0px;
  font-size: 1rem;
  justify-content:baseline;
  align-items: start;
  line-height: 1.8rem;
}

.texto-footer {
  font-size: 1rem;
  color:#ffffff;

}

.titulo-footer {

  font-size: 1.2rem;
  margin-bottom: 10px;

}

.texto-footer a {

  color:#ffffff
}

.texto-footer a:visited {
  color:#ffffff
}

/*  FIN FOOTER*/

/* COMIENZA LINEAS DIVISORIAS PLANES */

.barra {
  display: flex;
  width: 240px;
  height: 1px;
  background-color: #ddd;
  border: 0px solid #ccc;
  margin: 10px 0px 10px 0px;
}

.segmento {
  flex: 1;
  border-right: 1px solid #fff;
  background-color: #87ceeb; /* Azul claro */
}

.segmento:last-child {
  border-right: none;
}

/* TERMINA LINEAS DIVISORIAS PLANES */


/* COMIENZA LINEAS DIVISORIAS PLANES */

.barra_cuadros {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
}

.cuadro {
  width: 20px;
  height: 20px;
  background-color: lightgray;
  border: 1px solid #ccc;
  transition: background-color 0.3s ease;
}

.cuadrov {
  width: 20px;
  height: 20px;
  background-color: green;
  border: 1px solid #ccc;
  transition: background-color 0.3s ease;
}





/* TERMINA LINEAS DIVISORIAS PLANES */