/* ==========================================================================
   HEADER LICONIC — CSS autossuficiente e ESCOPADO em .cab
   Pode colar em qualquer página sem quebrar o layout existente: as variáveis
   ficam em .cab (não em :root) e não há reset global.
   Requer as fontes Archivo e IBM Plex Mono (ver o <link> no LEIA-ME.txt).
   Responsivo por LARGURA (vira menu hambúrguer abaixo de 900px).
   ========================================================================== */
.cab {
  --tinta:#0A0A0A; --papel:#FFFFFF; --cinza-95:#F4F4F4; --cinza-80:#CCCCCC;
  --cinza-45:#737373; --verde-texto:#3D860E;
  --sans:'Archivo', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --alt-cab:72px; --e1:8px; --e2:16px; --e3:24px; --e4:40px; --e5:64px;

  position: sticky; top: 0; z-index: 50;
  height: var(--alt-cab);
  background: var(--papel);
  border-bottom: 1px solid var(--cinza-80);
  font-family: var(--sans);
}
.cab *, .cab *::before, .cab *::after { box-sizing: border-box; }
.cab a { text-decoration: none; color: inherit; }

.cab__interno {
  max-width: 1280px; margin: 0 auto; height: 100%;
  padding: 0 var(--e3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
}
@media (min-width: 900px) { .cab__interno { padding: 0 var(--e5); } }

.cab__logo { display: flex; align-items: center; }
.cab__logo img { height: 40px; width: auto; display: block; }

.cab__nav { display: flex; align-items: center; gap: var(--e4); }
.cab__nav > a {
  font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: .01em;
  color: var(--tinta); padding: var(--e1) 0; position: relative; transition: color .2s ease;
}
.cab__nav > a:hover { color: var(--verde-texto); }
.cab__nav > a[aria-current="page"] { color: var(--verde-texto); }
.cab__nav > a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -22px;
  height: 2px; background: var(--verde-texto);
}

.cab__lang {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--cinza-45); padding-left: var(--e2); border-left: 1px solid var(--cinza-80);
}
.cab__lang a { color: var(--cinza-45); transition: color .2s ease; }
.cab__lang a:hover, .cab__lang a[aria-current="true"] { color: var(--tinta); }

.cab__menu {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 8px;
  flex-direction: column; justify-content: center; gap: 5px;
}
.cab__menu span { display: block; height: 2px; width: 100%; background: var(--tinta);
  border-radius: 1px; transition: transform .3s ease, opacity .2s ease; }
.cab__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cab__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cab__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- mobile (< 900px): dropdown + hambúrguer ---- */
@media (max-width: 899px) {
  .cab__nav {
    display: none; position: absolute; top: var(--alt-cab); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papel); border-bottom: 1px solid var(--cinza-80);
  }
  .cab__nav.cab__nav--aberto { display: flex; }
  .cab__nav > a {
    padding: var(--e2) var(--e3); min-height: 44px; display: flex; align-items: center;
    border-top: 1px solid var(--cinza-95);
  }
  .cab__nav > a[aria-current="page"]::after { display: none; }
  .cab__lang {
    border-left: 0; border-top: 1px solid var(--cinza-80);
    padding: var(--e2) var(--e3); min-height: 44px; font-size: 15px;
  }
  .cab__menu { display: flex; }
}