/* Venetti - Menú hamburguesa. Solo actúa en pantallas angostas. */

.hb-barra { display: none; }

@media (max-width: 900px) {
  nav.tabs { display: none !important; }
  .hb-barra { display: flex; align-items: center; width: 100%; }
}

.hb-boton {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .8rem; border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.10);
  color: #fff; font: inherit; font-size: 1rem; cursor: pointer;
}
.hb-rayas { display: flex; flex-direction: column; gap: 4px; }
.hb-rayas span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.hb-donde { font-weight: 600; letter-spacing: .01em; }

/* capa y panel */
.hb-capa {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.45);
  display: flex; justify-content: flex-start;
}
.hb-panel {
  width: min(310px, 86vw); height: 100%; overflow-y: auto;
  background: var(--sup); border-right: 1px solid var(--bor);
  padding: .8rem .7rem 2rem; box-sizing: border-box;
  animation: hb-entra .16s ease-out;
}
@keyframes hb-entra { from { transform: translateX(-14px); opacity: .6; } to { transform: none; opacity: 1; } }

.hb-enc { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.hb-titulo {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--txt2);
  padding-left: .35rem;
}
.hb-cerrar {
  border: 0; background: none; color: var(--txt2);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .4rem;
}

.hb-grupo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--txt2); margin: 1rem 0 .3rem; padding-left: .35rem;
}
.hb-grupo:first-of-type { margin-top: .2rem; }

.hb-item {
  display: block; width: 100%; text-align: left;
  padding: .7rem .75rem; margin-bottom: .15rem;
  border: 0; border-radius: var(--r); background: none;
  color: var(--txt); font: inherit; font-size: 1rem; cursor: pointer;
}
.hb-item:hover { background: var(--sup2); }
.hb-item-on { background: var(--verde); color: #fff; font-weight: 600; }

html.hb-quieto, html.hb-quieto body { overflow: hidden; }