@font-face {
  font-family: 'Pally-blod';
  src: url('/fonts/Pally-Bold.woff2') format('woff2');
  font-weight: 700; /* Valores válidos: normal (400), bold (700), etc. */
  font-style: normal; /* Usa valores válidos: normal, italic */
}

@font-face {
  font-family: 'Pally-medium';
  src: url('/fonts/Pally-Medium.woff2') format('woff2');
  font-weight: regular;
  font-style: regular; 
}

@font-face {
  font-family: 'Pally-regular';
  src: url('/fonts/Pally-Regular.woff2') format('woff2');
  font-weight: light;
  font-style: light; 
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Asegura que el cuerpo ocupe toda la altura de la ventana */

}
.todos-elementos-header{
  display: flex;
    margin: 0 auto; /* Centra el div horizontalmente */
  width:105rem;
  margin-top:1.7rem;
  gap: 17.5vw; /* Espacio entre los botones */

  
}
@media(max-width: 1980px){
  .todos-elementos-header{
    width: 85%;
  }
}
.header-container {

  /* Fija el header */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 105px; /* Ajusta la altura del header */
  background-color: white;
  z-index: 50; /* Asegúrate de que el z-index sea más bajo que el del loading-screen */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);

}
.cointanier-logo{
  width: 100%;

}
.logo {
  width:248.58px;
  height: 47.96px; /* Ajusta la altura del contenedor del logo */
}	

.butons29{
  width: 170px; /* Ajusta el ancho de los botones */
  background-color: #E73246;
  width: 90%; /* Ajusta el ancho de los botones */
}

.buttons-container1 {
  width: 60%;
  display: flex;
  gap: 3.5%; /* Espacio entre los botones */
  align-items: center;
  justify-content: flex-end;
  font-size: 1.4rem; /* Ajusta el tamaño del texto de los botones */

  margin-left: auto;
}

.butons, .butons1, .butons2, .butons3, .butonsSocio, .butons29,.button-video, .butons4{
  font-family: 'Pally-regular', sans-serif; /* Aplica la fuente Pally al texto */
  height: 40px; /* Ajusta la altura de los botones */
  font-size: 1.4rem; /* Ajusta el tamaño del texto de los botones */
  border-radius: 2.7vw;
  color: white;
  border: none;
  cursor: pointer; /* Cambia el cursor al pasar el mouse sobre los botones */
}	
.butons11, .butons22, .butons33, .butons44 {
  font-family: 'Pally-regular', sans-serif; /* Aplica la fuente Pally al texto */
  height: 40px; /* Ajusta la altura de los botones */
  font-size: 1.4rem; /* Ajusta el tamaño del texto de los botones */
  border-radius: 2.7vw;
  color: white;
  border: none;
  cursor: pointer;
  margin-top: 10%;
}

.butons1 {
  background-color: #0AA6E0 ; /* Cambia el color de fondo del botón */
  padding-left: 2%;
  padding-right: 2%;
}

.butons11{
  background-color: #0AA6E0 ; /* Cambia el color de fondo del botón */
  width: 100%; /* Ajusta el ancho de los botones */
}

.butons2 {
  background-color: #E73246; /* Cambia el color de fondo del botón */
  padding-left: 3%;
  padding-right: 3%;
}
.butons22 {
  background-color: #E73246; /* Cambia el color de fondo del botón */
  width: 100%; /* Ajusta el ancho de los botones */
}

.butons3 {
  background-color: #FBBB17; /* Cambia el color de fondo del botón */
  padding-left: 2%;
  padding-right: 2%;
}
.butons33 {
  background-color: #FBBB17; /* Cambia el color de fondo del botón */
  width: 100%; /* Ajusta el ancho de los botones */
}
.butons4 {
  background-color: #272727;
  padding-left: 2%;
  padding-right: 2%;
}
.butons44 {
  background-color: #272727;
  width: 100%; /* Ajusta el ancho de los botones */

}
.butons5{
  font-family: 'Pally-medium', sans-serif; /* Aplica la fuente Pally al texto */
  height: 40px; /* Ajusta la altura de los botones */
  font-size: 1.4rem; /* Ajusta el tamaño del texto de los botones */
  border-radius: 2.7vw;
  cursor: pointer; /* Cambia el cursor al pasar el mouse sobre los botones */

  color:#272727 ;
  background-color: white;
  padding-left: 2%;
  padding-right: 2%;
}

.butons55{
  font-family: 'Pally-regular', sans-serif; /* Aplica la fuente Pally al texto */
  height: 40px; /* Ajusta la altura de los botones */
  font-size: 1.4rem; /* Ajusta el tamaño del texto de los botones */
  border-radius: 2.7vw;
  color:#272727 ;
  background-color: white;  cursor: pointer;
  margin-top: 10%;

  width: 100%;

}

.butonsSocio {
  z-index: 20; /* Asegura que el botón esté por encima de las imágenes */
  position: absolute; /* Asegura que el botón esté en la posición deseada */
  top: 10%; /* Ajusta la posición del texto */
  left: 7.5%; /* Ajusta la posición del texto */
  font-family: 'Pally-blod', sans-serif; /* Aplica la fuente Pally al texto */
  font-size: 2vw; /* Ajusta el tamaño del texto de los botones */
  height: 3vw; /*Ajusta la altura de los botones */
  width: 15vw; /* Ajusta el ancho de los botones */
  background-color: #FBBB17 ; /* Cambia el color de fondo del botón */

}
.button-video{
  background-color: #E73246 ; /* Cambia el color de fondo del botón */
  display: inline-block;
  font-family: 'Pally-blod', sans-serif; /* Aplica la fuente Pally al texto */
  font-size: 1.5rem; /* Ajusta el tamaño del texto de los botones */
  padding-inline: 3rem; /* Añade espacio en blanco alrededor del texto  x y */
}

.contact-item-header {
  display: flex;
  align-items: center; /* Centra verticalmente el ícono y el texto */
  gap: 10px; /* Espacio entre el ícono y el texto */
  font-size: 20px; /* Tamaño del texto */
  margin-left: -2.3vw;
}
.menu-icon {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  color: #333;
  width: 50px;
  padding-top: 3%;
}

.sidebar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  background-color: white;
  box-shadow: 2px 0 5px rgba(0,0,0,0.5);
  padding: 10px;
  z-index: 1001;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.sidebar.active {
  transform: translateX(0);
}

/*-------header--*/
@media(max-width: 1680px){

.butons1, .butons2, .butons3, .butons4, .butons5{
  font-size: 1.2vw; /* Ajusta el tamaño del texto de los botones */

  }
}
@media(max-width: 1130px){
  .todos-elementos-header {
    display: block; /* Los div hijos se apilan verticalmente por defecto */
    width: 100%;
  }
  .header-container {
    height: auto; /* Ajusta la altura del contenedor */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);

  }
  .container {
    margin-top: 13%; /* Ajusta el margen superior */
  }
  
  .cointanier-logo {
    margin-left: 0;
    margin-top: 1.2%;
    margin-bottom: 2%;
    width: 100%;

    justify-content: center;
    margin: 0, auto; /* Centra el div horizontalmente */
    text-align: center;
    align-items: center;
    align-content: center;
  }
  .butons1, .butons2, .butons3,.butons4, .butons5{
    font-size: 1.2rem; /* Ajusta el tamaño del texto de los botones */
  }
  .buttons-container1{
    width: 100%;
    justify-content: center;
    margin: 0 auto; /* Centra el div horizontalmente */
    margin-bottom: 1.2%;
  }
  .contact-item-header {
    display: none;
  }
}
@media(max-width: 1094px){
  .buttons-container1{
    margin-bottom: 12px;
  }
}
@media(max-width: 834px){
  .buttons-container1{
    width: 95%;
  }
}
@media(max-width: 800px){
  .buttons-container1{
    width: 97%;
  }
}
@media(max-width: 765px){
  .butons1, .butons2{
    font-size: 2.2vw; /* Ajusta el tamaño del texto de los botones */
  }
}
@media(max-width: 620px){
.todos-elementos-header{
  width: 100%;
  margin-top: 1%;
  text-align: center;
}

.buttons-container1 {
  display: none;
}	

.buttons-container {
  width: 100%;
  margin-top: 10%;
  justify-content: flex-start; /* Alinea los elementos a la izquierda */
  align-items: center; /* Centra verticalmente los elementos */
}

.butons11, .butons22, .butons33 {
  font-size: 1.3rem; /* Ajusta el tamaño del texto de los botones */
  margin-bottom: 4%;
  
}

.logo {
  background-color: #fff;
  margin-top: 1%;
}
.menu-icon {
  display: block;
}
.cointanier-logo{
  width:80%;
}
.menuicon-logo{
  display: flex;
}
.header-container{
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  height: 70px;
}
.sidebar, .contact-item-header1 {
  display: flex; /* Muestra el contacto en la barra lateral */
}
}