/* ======= Responsive base ======= */
:root{ --wrap-max: 1200px; --gutter: 16px; }
.wrapper{ max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--gutter); }

/* Header (logo centralizada) */
.header{ display:flex; align-items:center; justify-content:center; padding:18px 12px; }
.header img,.header .logo{ height:clamp(48px,8vw,72px); max-width:100%; object-fit:contain; }

/* Título abaixo do topo */
.page-title{ text-align:center; margin:16px auto 8px; padding:0 var(--gutter); max-width:var(--wrap-max); }
.page-title h1{ margin:0; font-weight:800; line-height:1.2; font-size:clamp(22px,3.2vw,36px); letter-spacing:.2px; }

/* Grid das categorias (index) */
.categories,.cards,.card-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:640px){ .categories,.cards,.card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .categories,.cards,.card-grid{ grid-template-columns:repeat(4,1fr); } }
.category,.category-card,.card{ border-radius:16px; padding:16px; }

/* Tabelas responsivas */
.table-wrap{ overflow-x:auto; }
table{ border-collapse:collapse; width:100%; min-width:680px; }
th,td{ padding:10px 12px; white-space:nowrap; }
thead th{ position:sticky; top:0; z-index:1; }
@media (max-width:480px){ body{font-size:15px;} th,td{ padding:8px 10px; } }

/* ======= Resultados (duas colunas responsivas) ======= */
.thead, .row-main{ display:grid; grid-template-columns:96px 1fr; }
@media (min-width:640px){ .thead, .row-main{ grid-template-columns:120px 1fr; } }
.row-main > div:first-child{ white-space:nowrap; width:96px; }
.row-main > div:last-child{ white-space:normal !important; overflow-wrap:anywhere; word-break:break-word; line-height:1.35; }
.row-main > div, .thead div{ padding:10px 12px; }
@media (max-width:400px){ .row-main > div, .thead div{ padding:8px 10px; } }

/* ======= NAV - Abas roláveis / Desktop ======= */
/* Base (mobile-first) fica rolável, com setas; no desktop vamos centralizar sem rolagem */
.topnav{
  position: sticky; top:0; z-index:50;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:8px;
  padding:8px 12px;
}
.nav-arrow{
  appearance:none; border:0; outline:0;
  width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.08); color:#fff; cursor:pointer;
}
.nav-arrow:disabled{ opacity:.35; cursor:default; }
.nav-track{
  display:flex; align-items:center; gap:10px;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.nav-track::-webkit-scrollbar{ display:none; }
.topnav a.pill{ scroll-snap-align:center; white-space:nowrap; text-decoration:none; }
.topnav a.pill.active{ outline:2px solid rgba(255,255,255,.25); }

/* >>> Desktop: CENTRALIZAR o menu e remover a lógica de “trilho rolável” */
@media (min-width: 1024px){
  /* transforma a barra em flex e centraliza tudo */
  .topnav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 12px;
  }
  /* esconde setas e desativa rolagem do trilho */
  .nav-arrow{ display:none; }
  .nav-track{
    overflow:visible;              /* não rola no desktop */
    justify-content:center;        /* centraliza os pills */
    width:100%;
  }
}

/* ======= HAMBURGUER / OFF-CANVAS (Mobile) ======= */
@media (min-width: 769px){
  .navbar { display:none; } /* esconder hambúrguer no desktop */
}
@media (max-width: 768px){
  .topnav { display:none; } /* esconder abas e usar hambúrguer no mobile */
}

.navbar{
  position: sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
}
.hb-btn{
  appearance:none; border:0; outline:0;
  width:42px; height:42px; border-radius:10px;
  background: rgba(255,255,255,.08); color:#fff;
  display:grid; place-items:center; cursor:pointer;
}
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.drawer{
  position:fixed; top:0; left:0; bottom:0; width:84vw; max-width:360px;
  transform:translateX(-100%); transition:transform .25s ease;
  background:#0c1d2a; box-shadow:0 6px 30px rgba(0,0,0,.35); z-index:70;
  display:flex; flex-direction:column; padding:16px;
}
.drawer.open{ transform:translateX(0); }
.drawer-overlay.open{ opacity:1; pointer-events:all; }
.drawer .brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.drawer .brand img{ height:36px; object-fit:contain; }
.menu-list{ display:flex; flex-direction:column; gap:10px; }
.menu-list a{ display:block; padding:12px 14px; border-radius:12px; text-decoration:none; color:#fff; background:rgba(255,255,255,.06); }
.menu-list a.active{ outline:2px solid rgba(255,255,255,.25); }

/* INDEX — links dos cards sempre brancos */
.card-grid .card a,
.card-grid .card a:visited {
  color: #fff !important;
  text-decoration: none;
}
.card-grid .card a:hover,
.card-grid .card a:focus {
  color: #fff !important;
  text-decoration: underline; /* acessibilidade */
}