:root {
      --color-primary: #D39C3E;
      --color-secondary: #DEB197;
      --font-primary: 'Roboto', sans-serif;
      --font-title: 'Bebas Neue';
    }
body {
    font-family: Roboto, sans-serif;
    margin: 0;
    padding: 10px;
    /*background: var(--color-secondary); */
  }

  header {
      top: 0;
      width: 100%;
      /*margin: 0 auto;*/
      position: fixed;
      display: flex;
      flex-direction: column;
  }

  .buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.buttons a {
  flex: 1;
  text-align: center;
}

header .buttons a {
    color: var(--color-primary);
    text-decoration: none;    
    font-family: var(--font-title);
    font-size: 3vw;
}

.buttons img {
  width: 100%;
  height: auto;
  display: block;
}

.header-message {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  padding: 10px 0 0px 0;
  font-size: 24px;
  
}


.buttons a.active {
    border-bottom: 5px solid #D39C3E;
  }
  

  .container {
    max-width: 100%;
    margin: 0 auto;
   margin-top: 335px;
  }

  .scroll-area {
      padding-right: 10px;
      /* background: rgba(255,255,255,0.6); */
      border: 1px solid white;
  }


  h1 {
    font-family: bebasneue, sans-serif;
    text-align: center;
    color: #F15A24;
    margin-top: 0;
  }

  h2 {
    margin: 0 auto;
    padding: 0;
    color: black;
    border-bottom: 2px solid #DEB197;
    padding-bottom: 4px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 48px;
  }

  .product-box {
    padding: 10px;
    
    /*margin: 10px 0;*/
    /*border-radius: 5px;*/
    /* background: #fff; */
  }

 .item {
display: flex;
justify-content: space-between;
align-items: flex-start; /* clave para alinear arriba */
gap: 10px;
flex-wrap: nowrap;
}

.item-left {
flex-basis: 85%;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}

.item-right {
flex-basis: 15%;
text-align: right;
white-space: nowrap;
}

.description {
  margin: 0 !important;
  padding: 0 !important;
}

.mini-list {
  list-style: none;    /* quita los puntos */
  padding-left: 0;     /* quita la sangría */
  margin: 0;
}

.mini-list li {
  font-size: 11px;
  line-height: 1.4;
  margin-bottom: 4px;
  color: #555;
}



  /* MEDIA QUERY para pantallas ≤ 768px */
@media (max-width: 768px) {

.buttons a {
  font-size: 10px;
}

.container {
   margin-top: 130px;
  }
}