/*
 * Componentes que o tema WordPress ainda não tinha: página do guia,
 * hub de destino, arquivos, trilha de navegação, índice, FAQ, blocos.
 * Usa exclusivamente os tokens definidos em theme.css.
 */

/* ==========================================================================
   TRILHA DE NAVEGAÇÃO (BreadcrumbList)
   ========================================================================== */
.breadcrumb {
  padding: var(--space-4) 0 0;
  font-size: var(--font-body-small);
  color: var(--text-muted);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--brand-primary); text-decoration: underline; }
.breadcrumb .icon { width: 14px; height: 14px; color: var(--neutral-400); }
.breadcrumb [aria-current="page"] { color: var(--text-primary); font-weight: 500; }

/* ==========================================================================
   CABEÇALHO DE PÁGINA / ARQUIVO
   ========================================================================== */
.page-hero {
  padding: var(--space-10) 0 var(--space-8);
  border-bottom: 1px solid var(--border-default, var(--neutral-200));
  background: var(--background-subtle);
}
.page-hero__title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display-family);
  font-size: var(--font-h1);
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
  font-weight: 800;
}
.page-hero__lead {
  margin: var(--space-4) 0 0;
  max-width: 68ch;
  font-size: var(--font-body-large);
  color: var(--text-secondary);
}
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--font-body-small);
  color: var(--text-muted);
}
.page-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.page-hero__meta .icon { width: 16px; height: 16px; }

/* ==========================================================================
   ARTIGO (guia individual)
   ========================================================================== */
.guia { padding-bottom: var(--space-16); }

.guia__layout {
  display: grid;
  gap: var(--space-10);
  align-items: start;
}
@media (min-width: 1024px) {
  .guia__layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-16);
  }
}

.guia__figura {
  margin: var(--space-8) 0 0;
  border-radius: var(--radius-large);
  overflow: hidden;
  background: var(--surface-subtle);
}
.guia__figura img { display: block; width: 100%; height: auto; }
.guia__figura figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-body-small);
  color: var(--text-muted);
}

/* Etiquetas do topo do post: categoria (destino) + assunto. */
.post-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.post-etiquetas .category-chip { position: static; }

.guia__autores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.guia__autor-foto {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}
.guia__autor-nome { font-weight: 600; }
.guia__autor-nome a { color: var(--text-primary); text-decoration: none; }
.guia__autor-nome a:hover { text-decoration: underline; }
.guia__autor-cargo { font-size: var(--font-body-small); color: var(--text-muted); }

/* Índice lateral ------------------------------------------------------- */
.toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  padding: var(--space-5);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-large);
  background: var(--surface-default);
}
.toc__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display-family);
  font-size: var(--font-body-small);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li + li { margin-top: var(--space-2); }
.toc li.is-sub { padding-left: var(--space-4); }
.toc a {
  display: block;
  font-size: var(--font-body-small);
  line-height: var(--line-height-small);
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: var(--space-3);
}
.toc a:hover { color: var(--brand-primary); border-left-color: var(--brand-primary); }

/* Corpo do texto ------------------------------------------------------- */
.prose {
  max-width: var(--container-article);
  font-size: var(--font-body-large);
  line-height: var(--line-height-body);
  color: var(--text-primary);
}
.prose > * + * { margin-top: var(--space-6); }

/*
 * O respiro entre parágrafos precisa ser maior que o espaço entre linhas, que
 * aqui é 1.7em. Com 20px fixos ele ficava menor, e a quebra de parágrafo lia
 * como uma quebra de linha qualquer — o texto virava um bloco indistinto.
 *
 * Em em, e não px, para acompanhar o tamanho da fonte em cada contexto.
 */
.prose p + p { margin-top: 1.7em; }

/*
 * O editor fecha vários blocos com um <br> antes do fim, o que acrescenta uma
 * linha vazia e torna o espaçamento irregular de um parágrafo para outro.
 */
.prose br:last-child { display: none; }
.prose h2 {
  margin-top: var(--space-16);
  margin-bottom: var(--space-4);
  font-family: var(--font-display-family);
  font-size: var(--font-h2);
  line-height: var(--line-height-heading);
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
}
.prose h3 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-3);
  font-family: var(--font-display-family);
  font-size: var(--font-h3);
  line-height: var(--line-height-heading);
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
}
.prose h4 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-2);
  font-family: var(--font-display-family);
  font-size: var(--font-h4);
}
.prose p { margin: 0; }
.prose a { color: var(--brand-primary); text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-primary-hover); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-3); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-medium); }
.prose blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--brand-primary);
  background: var(--surface-hover);
  border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
  font-size: var(--font-body-large);
  color: var(--text-secondary);
}
.prose hr {
  margin: var(--space-12) 0;
  border: 0;
  border-top: 1px solid var(--neutral-200);
}
.prose code {
  padding: 2px 6px;
  border-radius: var(--radius-small);
  background: var(--surface-subtle);
  font-size: 0.9em;
}

/* ==========================================================================
   BLOCOS DE CONTEÚDO
   ========================================================================== */
.bloco { margin: var(--space-8) 0; }

.callout {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-large);
  border: 1px solid var(--neutral-200);
  background: var(--surface-subtle);
  font-size: var(--font-body);
}
.callout__icone { flex: 0 0 auto; color: var(--brand-primary); }
.callout__titulo {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display-family);
  font-size: var(--font-h5);
  font-weight: 700;
}
.callout p { margin: 0; color: var(--text-secondary); }
.callout--dica { border-color: var(--primary-200); background: var(--surface-hover); }
.callout--dica .callout__icone { color: var(--primary-600); }
.callout--atencao { border-color: var(--accent-200); background: var(--surface-highlight); }
.callout--atencao .callout__icone { color: var(--accent-600); }
.callout--info { border-color: #CBDCEF; background: #F1F6FB; }
.callout--info .callout__icone { color: var(--information); }

.resumo-rapido {
  padding: var(--space-6);
  border-radius: var(--radius-large);
  border: 1px solid var(--primary-200);
  background: var(--surface-hover);
}
.resumo-rapido__titulo {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display-family);
  font-size: var(--font-h4);
  font-weight: 700;
}
.resumo-rapido ul { margin: 0; padding: 0; list-style: none; }
.resumo-rapido li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-body);
  color: var(--text-secondary);
}
.resumo-rapido li + li { margin-top: var(--space-3); }
.resumo-rapido .icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--primary-600); }

.tabela-wrap { overflow-x: auto; }
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-body);
}
.tabela caption {
  margin-bottom: var(--space-3);
  text-align: left;
  font-family: var(--font-display-family);
  font-weight: 700;
}
.tabela th, .tabela td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--neutral-200);
  text-align: left;
  vertical-align: top;
}
.tabela thead th {
  background: var(--surface-subtle);
  font-family: var(--font-display-family);
  font-size: var(--font-body-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.tabela tbody tr:hover { background: var(--surface-subtle); }

.passos { counter-reset: passo; margin: 0; padding: 0; list-style: none; }
.passos li {
  position: relative;
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px dashed var(--neutral-200);
}
.passos li:last-child { border-bottom: 0; }
.passos__num {
  counter-increment: passo;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--font-display-family);
  font-weight: 700;
  font-size: var(--font-body-small);
}
.passos__num::before { content: counter(passo); }
.passos__titulo { margin: 0; font-family: var(--font-display-family); font-size: var(--font-h5); }
.passos p { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--font-body); }

.link-guia {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--primary-200);
  border-left: 3px solid var(--brand-primary);
  border-radius: var(--radius-medium);
  background: var(--surface-hover);
  text-decoration: none;
}
.link-guia__rotulo {
  display: block;
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--primary-600);
  font-weight: 700;
}
.link-guia__titulo { color: var(--text-primary); font-weight: 600; }
.link-guia:hover .link-guia__titulo { color: var(--brand-primary); }
.link-guia .icon { margin-left: auto; color: var(--brand-primary); }

/* ==========================================================================
   FAQ (schema FAQPage)
   ========================================================================== */
.faq { margin-top: var(--space-16); }
.faq__titulo {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display-family);
  font-size: var(--font-h2);
}
.faq__item {
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-large);
  background: var(--surface-default);
}
.faq__item + .faq__item { margin-top: var(--space-3); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  cursor: pointer;
  font-family: var(--font-display-family);
  font-size: var(--font-h5);
  font-weight: 700;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { flex: 0 0 auto; transition: transform var(--transition-fast); }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__item p {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-secondary);
}

/* ==========================================================================
   CAIXA DE AUTOR (E-E-A-T)
   ========================================================================== */
.autor-box {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-12);
  padding: var(--space-6);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-large);
  background: var(--background-subtle);
}
.autor-box img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex: 0 0 auto;
}
.autor-box__nome { margin: 0; font-family: var(--font-display-family); font-size: var(--font-h5); }
.autor-box__cargo { margin: 2px 0 var(--space-2); font-size: var(--font-body-small); color: var(--text-muted); }
.autor-box p { margin: 0; color: var(--text-secondary); font-size: var(--font-body); }

/* ==========================================================================
   PÁGINA DE CATEGORIA (destino)
   ========================================================================== */
.cat-hero {
  padding: var(--space-8) 0 var(--space-10);
  background: var(--background-subtle);
  border-bottom: 1px solid var(--neutral-200);
}
.cat-hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .cat-hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-12); }
}

.cat-hero__nivel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--primary-100);
  color: var(--primary-700);
  font-family: var(--font-display-family);
  font-size: var(--font-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.cat-hero__nivel .icon { width: 14px; height: 14px; }

.cat-hero__title {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display-family);
  font-size: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.cat-hero__lead {
  margin: var(--space-4) 0 0;
  max-width: 60ch;
  font-size: var(--font-body-large);
  color: var(--text-secondary);
}
.cat-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--font-body-small);
  color: var(--text-muted);
}
.cat-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.cat-hero__meta .icon { width: 16px; height: 16px; }

/* O placeholder .map-fill é absolute: precisa deste position:relative. */
.cat-hero__media {
  position: relative;
  border-radius: var(--radius-extra-large);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-subtle);
  border: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-medium);
}
.cat-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Crédito do fotógrafo — a licença do Unsplash exige atribuição com link. */
.foto-credito {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(28, 25, 23, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: var(--font-caption);
  line-height: 1.4;
}
.foto-credito a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.foto-credito a:hover { color: var(--primary-200); }

/* Fatos do destino: faixa horizontal compacta. */
.cat-fatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-5);
  margin: var(--space-8) 0 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-large);
  background: var(--surface-default);
  box-shadow: var(--shadow-small);
}
.cat-fatos__item { display: flex; gap: var(--space-3); align-items: flex-start; }
.cat-fatos__icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-medium);
  background: var(--surface-hover);
  color: var(--primary-600);
}
.cat-fatos__icone .icon { width: 18px; height: 18px; }
.cat-fatos__item dt {
  font-size: var(--font-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.cat-fatos__item dd {
  margin: 2px 0 0;
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--font-body-small);
  line-height: var(--line-height-small);
}

/* Subcategorias como atalhos rápidos no topo. */
.cat-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.cat-atalho {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-pill);
  background: var(--surface-default);
  color: var(--text-secondary);
  font-size: var(--font-body-small);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.cat-atalho:hover {
  border-color: var(--primary-300);
  background: var(--surface-hover);
  color: var(--brand-primary);
}
.cat-atalho__count {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  font-size: var(--font-caption);
  font-weight: 700;
  color: var(--text-muted);
}

/* Contador dentro dos chips de filtro por assunto. */
.filtro-chip__count {
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  font-size: var(--font-caption);
  font-weight: 700;
  color: var(--text-muted);
}
.filtro-chip.is-active .filtro-chip__count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Barra de filtros fica grudada no topo ao rolar a lista. */
.cat-filtros {
  position: sticky;
  top: var(--header-height);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  padding: var(--space-3) 0;
  background: var(--background-page);
  border-bottom: 1px solid var(--neutral-200);
}
.section--subtle .cat-filtros { background: var(--background-subtle); }

/* Chamada final para explorar categorias vizinhas. */
.cat-vizinhas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ==========================================================================
   ARQUIVOS E BUSCA
   ========================================================================== */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-pill);
  background: var(--surface-default);
  font-size: var(--font-body-small);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-fast);
}
.filtro-chip:hover { border-color: var(--primary-300); color: var(--brand-primary); }
.filtro-chip.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.filtro-chip .icon { width: 16px; height: 16px; }

.resultado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-16) var(--space-6);
  border: 1px dashed var(--neutral-300);
  border-radius: var(--radius-large);
  background: var(--background-subtle);
  text-align: center;
  color: var(--text-secondary);
}
.resultado-vazio p { margin: 0; max-width: 48ch; }

.paginacao {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
}
.paginacao a, .paginacao span {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-medium);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-body-small);
}
.paginacao a:hover { border-color: var(--primary-300); color: var(--brand-primary); }
.paginacao [aria-current="page"] {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  font-weight: 600;
}

/* ==========================================================================
   ESTADOS E UTILITÁRIOS
   ========================================================================== */
.erro-404 { padding: var(--space-24) 0; text-align: center; }
.erro-404 h1 { font-family: var(--font-display-family); font-size: var(--font-display); margin: 0; }
.erro-404 p { max-width: 52ch; margin: var(--space-4) auto var(--space-8); color: var(--text-secondary); }

.form-status { margin-top: var(--space-3); font-size: var(--font-body-small); }
.form-status--ok { color: var(--primary-600); }
.form-status--erro { color: var(--danger); }

/* ==========================================================================
   CARD DE POST CLICÁVEL POR INTEIRO
   O link do título tem só ~27px de altura. Esticá-lo sobre todo o card dá um
   alvo de toque real sem duplicar links no HTML (o leitor de tela continua
   anunciando um único link, com o texto do título).
   ========================================================================== */
.artigo-card { position: relative; }
.artigo-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* A etiqueta de assunto é um link próprio: fica acima da área esticada. */
.artigo-card .category-chip { z-index: 1; }

/* ==========================================================================
   RESPONSIVIDADE
   ========================================================================== */

/* --------------------------------------------------------------------------
   Alvos de toque
   Em tela sensível ao toque, links de 17-30px de altura são difíceis de
   acertar. A referência das diretrizes de acessibilidade é ~44px.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .breadcrumb ol { gap: var(--space-1) var(--space-2); }
  .breadcrumb a,
  .breadcrumb [aria-current] {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  .footer-legal { gap: var(--space-2) var(--space-5); }
  .footer-legal a,
  .footer-col a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .footer-social a { width: 44px; height: 44px; }

  .section-head__link,
  .link-arrow {
    min-height: 44px;
    align-items: center;
  }

  .tag-chip,
  .filtro-chip,
  .cat-atalho {
    min-height: 44px;
  }

  .category-chip { padding: 8px 12px; }

  .toc a { padding-block: 8px; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Entre 600 e 899px o hero ainda é de uma coluna: em 4:3 a imagem virava um
   bloco de ~520px de altura, empurrando o conteúdo para fora da primeira tela. */
@media (min-width: 600px) and (max-width: 899px) {
  .hero__media,
  .cat-hero__media {
    aspect-ratio: 16 / 9;
  }
}

/* Em telas estreitas o campo de busca do hero fica melhor empilhado que
   espremido em linha. */
@media (max-width: 479px) {
  .hero__search .search-field {
    flex-wrap: wrap;
  }
  .hero__search .search-field .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Página de categoria
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .cat-hero { padding-block: var(--space-6) var(--space-8); }
  .cat-fatos {
    padding: var(--space-4);
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
  /* Barra fixa de filtros em duas linhas ocupa metade da tela do celular. */
  .cat-filtros {
    position: static;
    border-bottom: 0;
    padding-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Post
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Sem coluna lateral, o índice vira um bloco antes do texto. */
  .toc {
    position: static;
    margin-bottom: var(--space-8);
  }
}

@media (max-width: 599px) {
  .callout { flex-direction: column; gap: var(--space-3); }
  .autor-box { flex-direction: column; }
  .passos li { gap: var(--space-3); }
  .guia__figura { border-radius: var(--radius-medium); }
}

/* --------------------------------------------------------------------------
   Painel mobile (gaveta de navegação)
   -------------------------------------------------------------------------- */

/* `position: fixed` se apoia no viewport de layout: no celular, a barra do
   navegador cobre a base do painel. `dvh` acompanha a barra ao aparecer/sumir,
   e o padding respeita a área segura (notch / barra de gestos). */
.mobile-panel {
  height: auto;
  max-height: calc(100dvh - var(--header-height));
  padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Fundo escuro só onde o painel não cobre a tela inteira. */
.mobile-backdrop {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: 89;
  background: rgba(28, 25, 23, 0.45);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
}
.mobile-backdrop.is-open { opacity: 1; visibility: visible; }
@media (min-width: 1024px) {
  .mobile-backdrop { display: none; }
}
@media (max-width: 599px) {
  /* Ocupando a tela inteira, o escurecimento não aparece e só custaria pintura. */
  .mobile-backdrop { display: none; }
}

/* A partir do tablet vira gaveta lateral: uma folha branca de tela cheia para
   meia dúzia de links desorienta e esconde o conteúdo à toa. */
@media (min-width: 600px) {
  .mobile-panel {
    left: auto;
    width: min(420px, 85vw);
    border-left: 1px solid var(--neutral-200);
    box-shadow: var(--shadow-large);
  }
}

/* Alvos de toque e ritmo da lista. */
.mobile-nav a,
.mobile-nav details summary {
  min-height: 52px;
  align-items: center;
}
.mobile-nav details ul a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding-block: var(--space-2);
}

/* Atalho para o índice de destinos, acima dos acordeões. */
.mobile-nav__destaque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--brand-primary) !important;
}
.mobile-nav__destaque .icon { width: 20px; height: 20px; }

.mobile-panel .search-field { position: sticky; top: 0; z-index: 1; }

/* Celular deitado: sobra pouca altura, então o painel precisa de menos respiro. */
@media (max-height: 480px) and (orientation: landscape) {
  .mobile-panel { padding-block: var(--space-4) var(--space-8); }
  .mobile-nav a,
  .mobile-nav details summary {
    min-height: 44px;
    padding-block: var(--space-2);
    font-size: var(--font-body);
  }
  .mobile-panel .search-field { margin-bottom: var(--space-4); }
}

/* --------------------------------------------------------------------------
   Larguras extremas
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
  :root { --gutter: 16px; }
  .site-brand__name small { display: none; }
  .artigo-card__meta { flex-wrap: wrap; gap: var(--space-2); }
}