/* Barra lateral que abre e fecha. No celular vira gaveta por cima da página. */

.nav-baixo { display: none !important; }
.principal { padding-bottom: 0; }
.toast { bottom: 1rem; }

.topo-esquerda { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.botao-menu {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; background: none; color: var(--tinta); margin-left: -.5rem;
}
.botao-menu svg { width: 26px; height: 26px; }
.botao-menu:hover { color: var(--vermelho-texto); }

/* itens do menu sem número */
.lateral nav a { grid-template-columns: 22px 1fr; }

/* ---------------------------------------------------------- computador: fechar recolhe a barra */
@media (min-width: 960px) {
  .lateral { transition: none; }
  .topo .marca-mini { display: none; }            /* com a barra aberta, a marca já está nela */
  body.lateral-fechada .casca { grid-template-columns: 1fr; }
  body.lateral-fechada .lateral { display: none; }
  body.lateral-fechada .topo .marca-mini { visibility: visible; display: flex; }
}

/* ---------------------------------------------------------- celular: gaveta */
@media (max-width: 959px) {
  .lateral {
    display: flex; flex-direction: column; gap: 1.5rem;
    position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(84vw, 310px);
    padding: 1.25rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    border-right: 3px solid var(--brasa); overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-104%); visibility: hidden;
    transition: transform var(--medio) var(--sai), visibility 0s linear var(--medio);
    box-shadow: 20px 0 50px -20px rgba(0, 0, 0, .6);
  }
  body.menu-aberto .lateral { transform: none; visibility: visible; transition: transform var(--medio) var(--sai), visibility 0s; }
  body.menu-aberto { overflow: hidden; }
  .veu { position: fixed; inset: 0; z-index: 45; background: rgba(23, 23, 21, .55); }

  .lateral .marca { display: flex; gap: .75rem; align-items: center; text-decoration: none; }
  .lateral .marca img { width: 46px; }
  .lateral .marca b { display: block; font: 700 1.6rem/1 var(--voz); text-transform: uppercase; letter-spacing: .02em; }
  .lateral .marca small { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); margin-top: .25rem; }
  .lateral nav { display: grid; gap: .2rem; }
  .lateral nav a {
    display: grid; align-items: center; gap: .85rem; min-height: 48px;
    padding: .7rem .75rem; text-decoration: none; color: var(--tinta-2); font-weight: 600; font-size: 1.05rem;
  }
  .lateral nav a svg { width: 22px; height: 22px; }
  .lateral nav a[aria-current="page"] { color: var(--carvao); background: var(--chama); clip-path: polygon(0 0, 100% 0, calc(100% - var(--corte)) 100%, 0 100%); }
  .lateral .rodape-lateral { margin-top: auto; display: grid; gap: .6rem; }
  .lateral .mote-lateral { font: 400 1.1rem/1.3 var(--leitura); }
  .lateral .mote-lateral::before { content: ""; display: block; width: 28px; height: 3px; background: var(--brasa); margin-bottom: .6rem; }
  .topo .marca-mini span { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lateral { transition: none !important; }
}

/* rótulo dos livros na fonte de rótulo (o p.livro herdava a de leitura) */
.livro p.rotulo { font: 600 var(--t-mini)/1.3 var(--rotulo); color: var(--vermelho-texto); margin-top: 0; }
.topo-esquerda .titulo-topo { padding-left: .25rem; }