/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxfont */
/*
  As 3 variantes ficam sob o MESMO font-family, diferenciadas por font-weight/font-style.
  Antes cada peso tinha um font-family próprio (AcuminPro / AcuminProBold / AcuminProItalic),
  mas só "AcuminPro" (Light) era referenciado no resto do CSS — então nenhum negrito real
  chegava a ser aplicado, mesmo onde font-weight:bold já estava declarado (h1, menu, etc.):
  o navegador só desenhava um negrito sintético em cima da variante Light.
*/
@font-face {
  font-family: AcuminPro;
  src: url("./font/AcuminProLight.otf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: AcuminPro;
  src: url("./font/AcuminProBold.otf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: AcuminPro;
  src: url("./font/AcuminProBookItalic.otf");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*xxxxxxxxxxxxxxxxxxxxx cores */
/*
  Paleta realinhada à nova marca (ago/2026) — as 3 cores de referência foram extraídas
  por amostragem de pixel direto da arte da logo (logo-crefito21-transparente.png):
    verde do wordmark "CREFITO"   ~ #0A5A31  -> família primary  (era azul-marinho)
    dourado do "21"/linha divisória ~ #B5841C -> família secondary (era amarelo-ouro vivo)
    azul do brasão (escudo)       ~ #254697  -> família tertiary / --color-link (era ciano)
  O azul do brasão foi mantido como 3ª cor (em vez de eliminado) porque é o elo visual
  com o brasão da República presente na própria logo — CREFITO é autarquia federal.
  Todos os pares texto/fundo abaixo foram checados para >= 4.5:1 (WCAG AA, texto normal)
  nos locais reais onde cada var já é usada (ver grep de "var(--nome)" antes de alterar
  qualquer valor aqui).
*/
:root {

  --geral-fundo: #f7f7f7;

  --color-font: #333;
  --color-link: #2A5C97;
  /* --color-link2: cor de link específica para fundos escuros (rodapé). O antigo --color-link
     (#29A1BA) tinha só 3:1 de contraste em fundo claro (abaixo do AA) — em vez de repetir esse
     problema, agora #color-link é otimizado para fundo claro (>=6:1) e o rodapé (fundo quase
     preto) usa este dourado dedicado, que também reforça a identidade da marca no rodapé. */
  --color-link2: #E3C070;
  --color-contrast: #bbb;
  --color-link-disabled: #bbb;


  --primary-color1: #EAF3EE;
  --primary-color2: #0E6B3B;
  --primary-color3: #0B3D24;
  --primary-font-color: #EAF3EE;

  --secondary-color1: #F0DBA6;
  --secondary-color2: #C9962B;
  --secondary-color3: #7D5812;
  --secondary-font-color: #0B3D24;

  --tertiary-color1: #2A5C97;
  --tertiary-color2: #1F4A78;
  --tertiary-color3: #17395C;
  --tertiary-color4: #1B3D66;
  --tertiary-font-color: #0B3D24;
  --tertiary-font-color2: #fff;

  --neutro-color1: #bbbbbb;
  --neutro-color2: #333333;
  --neutro-color3: #777777;
  /* neutro-color4 (fundo do rodapé, uso único) ganhou um leve subtom verde — mesma
     "força" visual do cinza-quase-preto anterior, só que conversando com a marca */
  --neutro-color4: #10160F;
  --neutro-color5: #000000;
  --color-white: #ffffff;


  --btn-primario: #0E6B3B;
  --btn-hover-fundo: #0B3D24;
  --btn-font: #EAF3EE;
  --btn-disabled: #EDF1F6;
  --btn-font-disabled: #bbbbbb;

  --btn-cta: #C9962B;
  --btn-cta-hover: #DCAF3E;
  --btn-cta-font: #0B3D24;

  --ligth: #EDF1F6;
  --danger: #F1C2C2;
  --sucess: #CBEEC2;

  /* escala tipográfica — base 16px, aplicada aos elementos padrão (h1-h5, body, p).
     Componentes que já sobrescrevem font-size localmente (cards de notícia, #maisNoticia,
     etc.) não são afetados por esta escala. */
  --fs-h1: 2rem;       /* 32px */
  --fs-h2: 1.5rem;     /* 24px */
  --fs-h3: 1.25rem;    /* 20px */
  --fs-h4: 1.125rem;   /* 18px */
  --fs-body: 1rem;     /* 16px */
  --fs-small: 0.875rem;/* 14px */
  --lh-heading: 1.25;
  --lh-body: 1.5;

  /* escala de espaçamento — para uso gradual em novos componentes e ajustes pontuais */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* escala de raio — os cards do site usam 15px em quase todo lugar como valor mágico;
     nomeando-o dá um único lugar para ajustar essa "assinatura visual" no futuro. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-btn: 8px;
  --radius-lg: 15px;
  --radius-pill: 50%;
}

html {
  font-family: AcuminPro;
}

body {
  color: var(--color-font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}


h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  font-weight: bold;

}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);

}

h4,
h5 {
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);

}

p {
  line-height: var(--lh-body);
  margin-top: 1em;
}



a:link,
a:visited {
  text-decoration: none;
  color: var(--color-link);
}

a:active {
  color: var(--color-link);

}

a:hover {
  font-weight: bold;
  border-bottom: 1px solid var(--color-link);
  cursor: pointer;
}

a.disabled {
  color: var(--color-link-disabled);
}

/* anel de foco consistente para navegação por teclado (>=3:1 de contraste, WCAG 1.4.11).
   --primary-color3 (verde escuro) é o padrão porque a maior parte do site tem fundo claro;
   nos trechos com fundo escuro (menu/dropdown/drawer/rodapé) o mesmo verde desapareceria,
   então esses contextos são sobrescritos abaixo para o dourado --color-link2, que também
   já é o usado nos links dessas mesmas áreas. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primary-color3);
  outline-offset: 2px;
}

#menu-principal a:focus-visible,
#container-menu a:focus-visible,
#content-rodape a:focus-visible,
#content-rodape button:focus-visible {
  outline-color: var(--color-link2);
}

ul {
  list-style-position: inside;
  list-style-type: none;
}



hr {
  margin: 10px 15px;
  border-color: var(--neutro-color3);
}

address {
  font-style: normal;
}

img {
  max-width: 100%;
  height: auto;
}

/* texto visível apenas para leitores de tela (labels ocultos, skip link antes do foco) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link:focus {
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--primary-color3);
  color: var(--color-white);
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

table {
  margin: 10px 0;
  width: 100%;
  display: table;
  border-spacing: 0;
  border: 0;
}

table tbody tr:nth-child(odd) {
  background: #f2f2f2;
}

table tr {
  border: 1px solid #d0d0d0;
  display: table-row;
}

table td,
th {
  padding: 8px 10px;
  display: table-cell;
  font-size: var(--fs-small);
  border: 1px solid #d0d0d0;
}

#content-rodape-contato table td,
th,
table tr {
  border: none;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx container-bar*/
#container-bar {
  padding: 3px;
  background: var(--primary-color3);
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx container-topo*/

#container-topo {
  height: 120px;
  background: var(--primary-color1);
  position: sticky;
  top: 0;
  z-index: 4000;
  transition: height .25s ease, box-shadow .25s ease;
}

header[data-scrolled="active"] #container-topo {
  height: 68px;
}

/* no mobile não há barra de navegação própria abaixo da logo, então a sombra de "rolou a
   página" fica na própria faixa da logo; no desktop ela passa para #nav-desktop-bar (§ mais abaixo) */
@media screen and (max-width: 1023px) {
  header[data-scrolled="active"] #container-topo {
    box-shadow: 0 2px 12px rgba(11, 61, 36, 0.12);
  }
}

#content-topo {
  max-width: 1250px;
  height: 120px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  transition: height .25s ease;
}

header[data-scrolled="active"] #content-topo {
  height: 68px;
}

#content-topo-logo {
  /* border: 1px solid red; */
  display: flex;
  align-items: center;
  flex-grow: 1;
}

#content-topo-logo div {
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-left: 1px solid var(--neutro-color2);
  font-family: 'AcuminPro';
  font-weight: bold;
  font-size: 20px;
  margin: 0 20px;
  letter-spacing: 0.025rem;
  height: 50px;
}

#content-topo-logo a,
#content-topo-logo a:hover {
  display: flex;
  align-items: center;
  text-decoration: none;
  border-bottom: none;
  width: 150px;
  height: 100px;
  /* sem isso, o flexbox encolhe a LARGURA deste link quando falta espaço no mobile (texto
     longo ao lado + ícones de busca/menu) mas não mexe na altura — como a imagem dentro
     escala pela altura (regra abaixo), o resultado era a logo esticando/distorcendo.
     #content-topo-acoes, ao lado, já usa a mesma proteção. */
  flex-shrink: 0;
  transition: height .25s ease;
}

header[data-scrolled="active"] #content-topo-logo a,
header[data-scrolled="active"] #content-topo-logo a:hover {
  height: 68px;
}

.content-topo-logo-link img {
  /* a nova marca é ~1.3:1 (mais "quadrada" que a anterior, que era bem larga);
     escalar pela altura do link (que já anima com o header) evita que a logo
     estoure a faixa do topo ao trocar o arquivo de imagem */
  height: 100%;
  width: auto;
  max-width: 100%;
}

#content-topo-acessibilidade {
  /* border: 1px solid red; */
  margin: 0;
}

#content-topo-acessibilidade ul {

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 180px;
  height: 30px;
  align-items: center;


}

#content-topo-acessibilidade ul li {
  padding: 5px;
  font-size: 12px;
  cursor: pointer;

}

#content-topo-acessibilidade ul li a {
  padding: 2px;
}

#content-topo-acessibilidade ul li:nth-last-child(1),
#content-topo-acessibilidade ul li:nth-last-child(2) {
  background: var(--color-white);
  color: var(--neutro-color3);
  border: 1px solid var(--neutro-color3);
  border-radius: var(--radius-sm);
}

#content-topo-acessibilidade ul li:nth-last-child(3) {
  background: var(--neutro-color5);
  color: var(--neutro-color3);
  border: 1px solid var(--neutro-color3);
  border-radius: var(--radius-sm);

}


/*xxxxxx ações do topo (busca, CTA, hambúrguer)*/
#content-topo-acoes {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--primary-color3);
  cursor: pointer;
  border-radius: var(--radius-pill);
  font-size: 1.05em;
  flex-shrink: 0;
}

.btn-icone:hover,
.btn-icone:focus-visible {
  background: rgba(11, 61, 36, 0.08);
}

/* :link/:visited explícitos na própria regra (bug pré-existente, não introduzido agora):
   .btn-cta é aplicado em <a href="...">, e "a:link{color:...}" logo acima do arquivo tem
   especificidade (0,0,1,1) contra (0,0,1,0) de ".btn-cta" sozinho — ou seja, o texto do
   botão estava sempre herdando a cor de link genérica em vez de --btn-cta-font. Repetir
   os pseudo-seletores aqui iguala a especificidade a (0,0,2,0), que já vence. */
.btn-cta,
.btn-cta:link,
.btn-cta:visited {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  background: var(--btn-cta);
  color: var(--btn-cta-font);
  font-weight: bold;
  border-radius: var(--radius-btn);
  border: none;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.btn-cta:hover,
.btn-cta:focus {
  background: var(--btn-cta-hover);
  color: var(--btn-cta-font);
  border-bottom: none;
  font-weight: bold;
  /* leve elevação no hover/focus — discreta, só para reforçar que é clicável */
  box-shadow: 0 4px 10px rgba(11, 61, 36, 0.22);
}

/*xxxxxx btn menu (hambúrguer, mobile)*/
#btn-menu-principal {
  width: 30px;
  height: 4px;
  border: none;
  background-color: #666;
  cursor: pointer;
  content: "";
  position: relative;
  flex-shrink: 0;
  padding: 0;
  transition: background ease .3s, transform ease .3s;
}

#btn-menu-principal::before {
  width: 30px;
  height: 4px;
  border: none;
  background-color: #666;
  cursor: pointer;
  content: "";
  position: absolute;
  transition: background-color 1s;
  transition: background ease .3s, top ease .3s .3s, transform ease .3s;
  top: 6px;
  left: 0;
}

#btn-menu-principal::after {
  width: 30px;
  height: 4px;
  border: none;
  background-color: #666;
  cursor: pointer;
  content: "";
  position: absolute;
  transition: background-color 1s;
  transition: background ease .3s, top ease .3s .3s, transform ease .3s;
  top: -6px;
  left: 0;
}

#btn-menu-principal[data-active="active"] {
  transform: rotate(90deg);
}

#btn-menu-principal[data-active="active"]:before {
  top: -6px;
  /* left: 20px; */
  left: 16px;
  width: 20px;
  transform: rotate(45deg);
  transition: top ease .3s, left ease .3s;
}

#btn-menu-principal[data-active="active"]::after {
  top: 6px;
  /* left: 18px; */
  left: 16px;
  width: 20px;
  transform: rotate(-45deg);
  transition: top ease .3s, left ease .3s;
}

input#s:focus,
input#s:focus-visible {
  border: 1px solid var(--btn-cta);
  outline: none;
  /* substitui o outline por um anel via box-shadow — mais visível que só a borda mudar de
     cor, e não empurra o layout ao redor (box-shadow não ocupa espaço, ao contrário de
     aumentar a borda) */
  box-shadow: 0 0 0 3px rgba(201, 150, 43, 0.35);
}

/*xxxxxxxxxxxxx container menu (painel mobile) */
#nav-mobile {
  position: relative;
}

#menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 5900;
}

#menu-overlay[data-active="active"] {
  opacity: 1;
  visibility: visible;
}

#container-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(360px, 88vw);
  background-color: var(--primary-color3);
  color: var(--geral-fundo);
  z-index: 6000;
  overflow-y: auto;
  padding: 0;
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
}

#container-menu[data-active="active"] {
  transform: translateX(0);
}

#content-menu {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

#content-busca-flyout {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--color-white);
  box-shadow: 0 12px 24px rgba(11, 61, 36, 0.18);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 4600;
}

#content-busca-flyout[data-active="active"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#content-busca-flyout #busca {
  display: flex;
  flex-direction: row;
}

#content-busca-flyout #s {
  border: 1px solid var(--neutro-color1);
  color: var(--color-font);
}

/* #menu-principal dentro do drawer mobile (mesmo <ul>, apresentação em lista/acordeão) */
#menu-slot-mobile {
  width: 100%;
}

#container-menu #menu-principal {
  display: flex;
  flex-direction: column;
  height: auto;
  margin: 0;
  list-style: none;
}

#container-menu #menu-principal > li {
  position: static;
  height: auto;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

#container-menu #menu-principal > li > a {
  height: auto;
  padding: 14px 4px;
  display: block;
}

#container-menu #menu-principal > li > a::after {
  display: none;
}

#container-menu #menu-principal > li.menu-item-has-children > a::before {
  float: right;
  margin-left: 0;
  margin-top: 6px;
}

#container-menu #menu-principal .sub-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  background: transparent;
  color: inherit;
  padding: 0 0 0 14px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

#container-menu #menu-principal > li.menu-item-has-children > .sub-menu[data-active="active"] {
  max-height: 1000px;
  padding-top: 4px;
  padding-bottom: 10px;
}

#container-menu #menu-principal .sub-menu a {
  padding: 8px 4px;
}

#busca input {
  padding: 8px 10px;
  /* era 1px solid var(--color-white) — borda branca sobre o fundo branco do flyout de
     busca (#content-busca-flyout), praticamente invisível; usa o mesmo cinza neutro que
     o campo de busca do drawer mobile (#content-busca-flyout #s) já usa corretamente */
  border: 1px solid var(--neutro-color1);
  border-radius: var(--radius-sm);
}

#busca label {
  display: none;
}

#busca #searchsubmit {
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  background-color: var(--btn-cta);
  color: var(--btn-cta-font);
}

.content-btn-fechar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 16px;
  flex-shrink: 0;
}

.btn-fecha-menu {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 10px 0 10px 20px;
  font-weight: bold;
}

.btn-fecha-menu::after {
  content: "X";
  border: 2px solid #999;
  border-radius: var(--radius-lg);
  padding: 5px 8px;
  margin: 0 0 0 10px;
  font-weight: bold;
}

.content-mobile-cta {
  padding: 16px;
  flex-shrink: 0;
}

.btn-cta-block {
  display: flex;
  width: 100%;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx nav-desktop-bar (faixa de navegação, >=1024px)*/
/* #menu-principal é o único <ul> gerado pelo wp_nav_menu (Walker_Nav_Menu padrão) e é movido
   por JS entre este local (desktop) e #menu-slot-mobile (drawer). As regras abaixo usam só
   classes nativas do WordPress (.menu-item-has-children, .sub-menu, .current-menu-item). */
#nav-desktop-bar {
  display: none;
  background: var(--primary-color3);
  position: sticky;
  top: 100px;
  z-index: 3900;
  transition: top .25s ease, box-shadow .25s ease;
}

header[data-scrolled="active"] #nav-desktop-bar {
  top: 68px;
}

@media screen and (min-width: 1024px) {
  header[data-scrolled="active"] #nav-desktop-bar {
    box-shadow: 0 2px 12px rgba(11, 61, 36, 0.12);
  }
}

#nav-desktop {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 16px;
}

#menu-principal {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  list-style: none;
  margin: 0;
}

#menu-principal > li {
  position: relative;
  display: flex;
  align-items: stretch;
}

#menu-principal > li > a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  color: var(--primary-color1);
  font-weight: bold;
  font-size: .92em;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

#menu-principal > li > a:hover,
#menu-principal > li > a:focus-visible {
  border-bottom: none;
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.1);
}

#menu-principal > li > a::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 8px;
  height: 3px;
  background: var(--secondary-color2);
  transform: scaleX(0);
  transition: transform .2s ease;
}

#menu-principal > li > a:hover::after,
#menu-principal > li > a:focus-visible::after,
#menu-principal > li.current-menu-item > a::after,
#menu-principal > li.current_page_item > a::after,
#menu-principal > li.current-menu-ancestor > a::after,
#menu-principal > li.current-menu-parent > a::after {
  transform: scaleX(1);
}

/* ::before (não ::after) porque ::after já é usado pelo indicador de sublinhado abaixo;
   "order" reposiciona visualmente a seta para depois do texto sem mudar de pseudo-elemento */
#menu-principal > li.menu-item-has-children > a::before {
  content: "";
  display: inline-block;
  order: 2;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}

#menu-principal > li.menu-item-has-children:hover > a::before,
#menu-principal > li.menu-item-has-children:focus-within > a::before {
  transform: rotate(225deg) translateY(2px);
}

/* dropdown (flyout) do 1º nível de submenu, sob qualquer item de topo */
#menu-principal .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--primary-color3);
  color: var(--primary-color1);
  padding: 10px 0;
  list-style: none;
  box-shadow: 0 12px 24px rgba(11, 61, 36, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 4500;
}

#menu-principal > li.menu-item-has-children:hover > .sub-menu,
#menu-principal > li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#menu-principal .sub-menu a {
  display: block;
  padding: 8px 20px;
  color: var(--primary-color1);
  border-bottom: none;
  white-space: nowrap;
  font-weight: normal;
}

#menu-principal .sub-menu a:hover {
  font-weight: bold;
  border-bottom: none;
  color: var(--secondary-color2);
}

/* níveis mais profundos (netos) ficam recolhidos como lista indentada, dentro do mesmo painel,
   em vez de abrir um novo flyout — mantém a navegação simples mesmo com estrutura mais funda */
#menu-principal .sub-menu .sub-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  background: transparent;
  padding: 0 0 0 14px;
  transition: none;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx breakpoint dedicado à navegação*/
@media screen and (min-width: 1024px) {
  #nav-desktop-bar {
    display: block;
  }

  #content-topo-acoes .btn-cta {
    display: inline-flex;
  }

  #btn-menu-principal {
    display: none;
  }

  #nav-mobile {
    display: none;
  }
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx container-acessibilidade*/
#container-acessibilidade {
  margin-top: 2px;
  background: var(--geral-fundo);

}


#content-acessibilidade {
  max-width: 1250px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 20px 5px 0 5px;
  height: auto;
  /* era 10px — abaixo do mínimo confortável de leitura; breadcrumb é texto real, não um
     rótulo decorativo, então precisa acompanhar --fs-small como o resto do site */
  font-size: var(--fs-small) !important;
}

#content-bread {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;


}

#bread-crumb {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  flex-grow: 1;
  align-content: center;
}

#bread-crumb img {
  width: 25px;
}

#bread-crumb a,
#bread-crumb span {
  margin: 0 5px 0 0;
  display: inline-block;
}


#bread-crumb i {
  padding: 5px;
  font-size: 2em;
  color: var(--neutro-color3);
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx container-noticias-destaque*/


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx container-breadcrump-destaque-fita*/
#campanha-fita {
  position: absolute;
  z-index: 4;
  top: 61px;
  rotate: -30deg;
}

#campanha-fita img {
  width: 120px !important;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

#container-noticias-destaque {
  background: var(--geral-fundo);
}

#content-noticias-destaque {
  max-width: 1250px;
  margin: 0 auto;
  padding: 5px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.box-notdestaque {
  border-radius: var(--radius-lg);
  height: 470px;
  display: flex;
  flex-direction: column;
  width: 65%;
  /* sombra sutil e tingida de verde-marca em vez de cinza puro — dá um pouco mais de
     profundidade ao card sem pesar; a cor de fundo do card continua vindo do nth-of-type */
  box-shadow: 0 4px 16px rgba(11, 61, 36, 0.12);
}

.container-img-noticia {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

.container-img-noticia img {
  object-fit: cover;
  width: 100% !important;
  height: 100%;
  max-width: 100%;
}

.rodape-notdestaque {
  width: 100%;
  height: 60px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex;
  justify-content: flex-start;
  padding: 10px;
}

.rodape-notdestaque h1 {
  font-size: 1.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--primary-color1);
}

.rodape-notdestaque a,
.rodape-notdestaque-d2 a {
  color: var(--primary-color1);
}

.rodape-notdestaque a:hover,
.rodape-notdestaque-d2 a:hover {
  color: var(--color-white);
  border-bottom: none;
}

div.box-notdestaque:nth-of-type(1) {
  background: var(--tertiary-color4);
}

div.box-notdestaque:nth-of-type(2) {
  background: var(--secondary-color3);
}

div.box-notdestaque:nth-of-type(3) {
  background: var(--primary-color2);
}


/*xxxxx noticias destaque coluna 2*/

#content-noticias-d2 {
  padding-left: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 39%;
}

.box-notdestaque-d2 {
  border-radius: var(--radius-lg);
  height: 232px;
  display: flex;
  flex-direction: row-reverse;
  box-shadow: 0 4px 16px rgba(11, 61, 36, 0.12);
}

.container-img-noticia-d2 {
  width: 50%;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  overflow: hidden;
}

.container-img-noticia-d2 img {
  object-fit: cover;
  max-width: 101% !important;
  height: 100%;
}

.rodape-notdestaque-d2 {
  width: 50%;
  height: auto;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex;
  justify-content: flex-start;
  padding: 10px;
  align-items: center;
  overflow: hidden;

}

.rodape-notdestaque-d2 h1 {
  font-size: 1.1em;
  /* white-space: nowrap; */
  /* text-overflow: ellipsis; */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  color: var(--primary-color1);
}

div.box-notdestaque-d2:nth-of-type(1) {
  background: var(--secondary-color3);
}

div.box-notdestaque-d2:nth-of-type(2) {
  background: var(--primary-color2);
}

.item-align-end {
  align-self: flex-end;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx container-modal*/
#modal {
  position: fixed;
  /* Sit on top of the page content */
  display: flex;
  /* Hidden by default */
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Full width (cover the whole page) */
  height: 100%;
  /* Full height (cover the whole page) */
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  /* Black background with opacity */
  z-index: 50000;
  /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer;
  /* Add a pointer on hover */
}

#content-modal {
  max-width: 648px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  position: absolute;
}

.esconder-modal {
  display: none !important;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx container-noticias*/
#container-noticias {
  background: var(--geral-fundo);
  padding: 20px 20px 10px;
}

#content-noticias {
  max-width: 1250px;
  margin: 0 auto;
  padding: 5px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  justify-content: space-between;
}

.box-noticia-comum {
  border-radius: var(--radius-lg);
  /*height: 250px;*/
  height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24%;
  box-shadow: 0 4px 14px rgba(11, 61, 36, 0.10);
}

.container-img-noticia-comum {
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* height: 210px; */
  height: 300px;
}

.container-img-noticia-comum img {
  object-fit: cover;
  object-position: 0px 15%;
  width: 100%;
  height: 100%;
  max-width: 100%;


}

.rodape-noticia-comum {
  padding: 10px;
}

.rodape-noticia-comum h1 {
  font-size: 1em;
  /* white-space: nowrap; */
  /* text-overflow: ellipsis; */
  overflow: hidden;
  color: var(--primary-color1);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rodape-noticia-comum a:hover {
  color: var(--neutro-color3);
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx container-serviços*/
#container-servicos {
  margin-top: 2px;
  background: var(--primary-font-color)
}

#titulo-servico h2 {
  color: var(--primary-color2);
}

#titulo-servico {
  max-width: 1250px;
  margin: 0 auto;
  padding: 30px 10px;
}

#content-servicos {
  max-width: 1250px;
  margin: 0 auto;
  padding: 5px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  justify-content: space-around;
  min-height: 200px;
}

.content-item-servico {
  width: 150px;
  height: 150px;
  border-radius: var(--radius-pill);
  background: var(--geral-fundo);
  overflow: hidden;
  border: 4px solid var(--color-white);
  box-shadow: 4px 4px 15px -4px #5e5e5e;
}

.content-item-servico:hover {
  border: 3px solid var(--color-white);
}

.content-item-servico img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.content-item-servico a {
  border-bottom: none;
}

.content-item-servico a:hover {
  border-bottom: none;
}

#maisNoticia {
  margin: 20px auto 0;
  max-width: 1250px;
  /* border:1px solid red; */
  display: flex;
  justify-content: center;
  font-size: 1.2em;
  height: 30px;

}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx container-rodape*/

#container-rodape {
  margin-top: 2px;
  padding: 10px 40px;
  background: var(--neutro-color4);

}




#container-rodape ul {
  list-style-type: none;
}

#content-rodape {
  max-width: 1250px;
  margin: 0 auto;
  color: var(--primary-color1);
  display: flex;
  flex-direction: column;
  position: relative;
  bottom: 0;
  min-height: 500px;
}

/* bug de contraste pré-existente: a regra genérica "h2,h3,h4,h5{color:#666}" do
   interno.css (carregado depois) tem especificidade maior que a herança de
   color:var(--primary-color1) acima, então os h3 "Sede João Pessoa"/"Sub-sede Campina
   Grande" renderizavam cinza-escuro (~3.2:1) sobre o fundo escuro do rodapé — abaixo do
   mínimo de 4.5:1. Reforça explicitamente a cor clara aqui. */
#content-rodape h3 {
  color: var(--primary-color1);
}

.btn-rodape {
  align-self: center;
  height: 60px;
  margin: 10px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* --color-link2 (dourado) em vez de --color-link (azul): este texto fica sobre o
     fundo escuro do rodapé, onde o azul de link não rende contraste suficiente */
  color: var(--color-link2);
}

.btn-rodape a {
  padding: 10px;
  display: inline-block;
  width: 35px;
  height: 35px;
  background: url("../img/setaTop.png");
  background-repeat: none;
  background-size: cover;
}

.btn-rodape img {
  width: 35px;
}

#content-rodape-ms {
  display: flex;
  justify-content: flex-end;
  height: 3em;
  margin-bottom: 10px;

}

#content-rodape-ms i {
  padding: 5px;
  font-size: 2em;
}

#content-rodape-ms i:hover {
  /* antes repetia --primary-color1, a mesma cor herdada do estado normal — o hover
     não mudava nada visualmente; agora usa o dourado de destaque do rodapé */
  color: var(--color-link2);
}



/*xxxxxxxxxxxxx contato*/

#btn-contato {
  margin-top: 20px;
}

#btn-contato::after {
  content: "[+]";
  padding: 5px;
}

#btn-contato[data-active="active"]::after {
  content: "[-]";
  padding: 5px;
}

#btn-contato[data-active="active"]+div {
  width: 100%;
  height: 112vh;
}

#btn-contato,
.listaEndereco a {
  cursor: pointer;
  /* mesmo motivo do .btn-rodape acima: fundo escuro do rodapé pede o dourado, não o azul */
  color: var(--color-link2);
}

#btn-contato:hover,
.listaEndereco a:hover {
  cursor: pointer;
  text-decoration: underline;
  color: var(--primary-color1);
}


#content-rodape-contato {
  height: 1px;
  width: 1px;
  overflow: hidden;
  transition: width 1s, height 1.5s;
}


#content-rodape-contato table {
  width: 100%;
  border-collapse: collapse;
  color: var(--primary-color1);
}

#content-rodape-contato td a {
  color: var(--primary-color1);
}

#content-rodape-contato td a:hover {
  color: var(--color-link2);
}

#content-rodape-contato td,
th {
  text-align: left;
  padding: 8px;
  white-space: normal;
}

#content-rodape-contato th {
  border-bottom: 1px solid var(--neutro-color3);
}

#content-rodape-contato table tbody tr:nth-child(odd) {
  background-color: var(--neutro-color2);
  color: var(--primary-color1);
}


#content-rodape-contato table tbody tr:hover {
  background-color: var(--neutro-color5);
  color: var(--primary-color1);
}

/**** googleForms*****/
iframe#forms {
  max-width: 100%;
  width: 100vw;
  height: 100vh;
}

/**** googleForms*****/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx responsive*/



@media screen and (max-width:768px) {

  /**** googleForms*****/
  iframe#forms {
    width: 99% !important;
  }


  /**** googleForms*****/

  #content-rodape-contato table {
    width: 768px;
  }

  #content-topo {
    padding: 0 12px;
  }

  #content-topo-logo div {
    /* era 9px, no limite do ilegível; o container tem overflow visível então o pequeno
       ganho de largura do texto em 10px não quebra o layout do header no mobile */
    font-size: 10px;
  }

  /* min-width removido: a partir da troca de logo (ago/2026) o tamanho já é
     controlado pela altura do link em .content-topo-logo-link img (regra base) */

  #content-bread {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #content-acessibilidade {
    justify-content: flex-end;
  }

  #content-rodape-contato {
    overflow-x: scroll;
  }


  /*xxxxxxxx container-notdestaque*/
  #content-noticias-destaque {
    flex-direction: column;
  }

  .box-notdestaque {
    width: 100%;
    height: 250px;
  }

  #content-noticias-d2 {
    padding-top: 5px;
    width: 100%;
  }

  .box-notdestaque-d2 {
    margin-bottom: 5px;
    width: 100%;
    height: 250px;
  }

  #content-noticias-d2 div:nth-child(2) {
    flex-direction: row;
  }

  #content-noticias-d2 div:nth-child(2) .container-img-noticia-d2 {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }

  /*xxxxxxxx container-noticia-comum*/

  #content-noticias {
    flex-wrap: wrap;
  }

  .box-noticia-comum {
    width: 48%;
    height: 180px;
    margin-bottom: 15px;
  }

  /*xxxxxx container-servico*/

  .content-item-servico {
    width: 20%;
    height: 70px;
    border-radius: var(--radius-pill);

  }

  #content-servicos {
    min-height: 130px;
  }

  /*xxxxxx container-interno-*/

  .content-interno article {
    padding: 0 30px !important;
  }

  div#container-category div.divs-interno:nth-child(odd) article {
    /* margin: 0 20px; */
  }

}

/* Input forms das páginas de legislação */
#buscaPortarias input {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
}

#buscaPortarias input:focus-visible {
  border-color: var(--btn-cta);
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 150, 43, 0.35);
}

#buscaPortarias #searchsubmit {
  background-color: var(--primary-color1);
}