/* Barra de navegación y background de la página */
* {
    margin: 10;
    padding: 10;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    
}
body {
    background: #fff;
}
header {
    background: #858849;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;
}
header .logo {
    font-size: 20px;
    text-transform: uppercase;
}
header nav ul {
    display: flex;
}
header nav ul li a {
    display: inline-block;
    color: #fff;
    padding: 5px 0;
    margin: 0 10px;
    border: 3px solid transparent;
    text-transform: uppercase;
    transition: 0.2s;
}
header nav ul li a:hover,
header nav ul li a.active {
    border-bottom-color: #fff;
}
.hamburger {
    cursor: pointer;
    display: none;
}
.hamburger div {
    width: 30px;
    height: 5px;
    margin: 5px 0;
    background: #000;
}
@media only screen and (max-width: 900px) {
    header {
        padding: 0 30px;
    }
}
@media only screen and (max-width: 700px) {
    .hamburger {
        display: block;
    }
    header nav {
        position: absolute;
        width: 100%;
        left: -100%;
        top: 70px;
        width: 100%;
        background: #fff;
        padding: 30px;
        transition: 0.3s;
    }
    header #nav_check:checked ~ nav {
        left: 0;
    }
    header nav ul {
        display: block;
    }
    header nav ul li a {
        margin: 5px 0;
    }
}
/* Importación de la letra fuente */
.kanit-thin {
    font-family: "Kanit", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .kanit-extralight {
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .kanit-light {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .kanit-regular {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .kanit-medium {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .kanit-semibold {
    font-family: "Kanit", sans-serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .kanit-bold {
    font-family: "Kanit", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .kanit-extrabold {
    font-family: "Kanit", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .kanit-black {
    font-family: "Kanit", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .kanit-thin-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .kanit-extralight-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .kanit-light-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .kanit-regular-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .kanit-medium-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .kanit-semibold-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .kanit-bold-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .kanit-extrabold-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 800;
    font-style: italic;
  }
  
  .kanit-black-italic {
    font-family: "Kanit", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  

/* Clase del footer  */
.footer {
    background-color: #3a2c1a;
    padding: 20px;
    text-align: center; /* Optional: Center content horizontally */
    position: relative;
  }
  
  .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Wrap content on smaller screens */
  }
  
  .footer-container p {
    flex: 1; /* Allow text to grow */
    color: #fff;
  }
  
  .footer-container nav {
    flex: 1;
    text-align: right; /* Align navigation to the right */
  }
  
  @media (max-width: 768px) {
    .footer-container p,
    .footer-container nav {
      text-align: center; /* Center content on small screens */
    }
  }

  /*
  Ajustes del contenedor principal
  */
  .contenedor {

    width: 5%; /* Ancho del contenedor */
    margin: 50 px; /* Margen automático para centrar horizontalmente */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 10vh; /* Altura del viewport */
}
  