*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

img,
picture,
svg {
    max-width: 100%;
    display: block;
}

html {
    scroll-behavior: smooth;
}

/* Visível apenas para leitores de tela. */
.apenas-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* O atributo hidden do HTML precisa vencer qualquer display definido depois. */
[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 3px solid var(--cor-identidade);
    outline-offset: 3px;
    border-radius: 4px;
}

a:focus-visible,
button:focus-visible {
    box-shadow: 0 0 0 6px rgba(29, 78, 155, 0.15);
}

:root {
    /* Cores — estrutura do Design System gov.br, com o azul da logo do Conselho */
    --cor-fundo: #ffffff;
    --cor-superficie: #f8f8f8;
    --cor-borda: #e6e9ec;
    --cor-texto: #333333;
    --cor-texto-secundario: #5c6670;
    --cor-identidade: #1D4E9B;
    --cor-identidade-escura: #0b2c5e;
    --cor-identidade-clara: #2670e8;
    --cor-acao: #d8a73d;
    --cor-alerta: #c0392b;
    /* Cinza da instrucao dentro do campo de busca: bem mais claro que o texto
       digitado, mas ainda legivel para quem enxerga pouco. */
    --cor-texto-placeholder: #6b7480;

    /* Altura reservada para a faixa de prototipo, que fica fixa no topo.
       Este valor e o ponto de partida; o app.js mede a faixa de verdade e
       corrige, porque em tela estreita o texto quebra em duas linhas. */
    --altura-prototipo: 0px;

    /* Tipografia — Sora nos titulos, Inter no texto corrido.
       A Inter foi desenhada para ser lida em tela pequena; a Sora tem a forma
       geometrica que da personalidade aos titulos sem atrapalhar a leitura. */
    --fonte-titulo: 'Sora', 'Segoe UI', Arial, sans-serif;
    --fonte-texto: 'Inter', 'Segoe UI', Arial, sans-serif;

    --texto-corpo: clamp(0.95rem, 0.92rem + 0.18vw, 1rem);
    --texto-pequeno: clamp(0.82rem, 0.8rem + 0.1vw, 0.875rem);
    --texto-chamada: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
    --titulo-1: clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem);
    --titulo-2: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
    --titulo-3: clamp(1.05rem, 1rem + 0.28vw, 1.2rem);
    --titulo-4: clamp(0.95rem, 0.92rem + 0.15vw, 1rem);

    --altura-texto: 1.6;
    --altura-titulo: 1.25;

    /* Espaçamento — escala de 8px do gov.br */
    --espaco-1: 0.5rem;
    --espaco-2: 1rem;
    --espaco-3: 1.5rem;
    --espaco-4: 2rem;
    --espaco-5: 3rem;
    --espaco-6: 4rem;

    --raio-1: 4px;
    --raio-2: 8px;
    --raio-3: 16px;
    --sombra-1: 0 1px 3px rgba(0, 0, 0, 0.10);
    --sombra-2: 0 3px 6px rgba(0, 0, 0, 0.16);
    --sombra-3: 0 6px 12px rgba(0, 0, 0, 0.16);
    --borda-sutil: 1px solid var(--cor-borda);
    --transicao: 0.18s cubic-bezier(0.4, 0, 0.2, 1);

    --largura-maxima: 1200px;
    --largura-leitura: 68ch;
}

body {
    margin: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte-texto);
    font-size: var(--texto-corpo);
    line-height: var(--altura-texto);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    font-family: var(--fonte-titulo);
    line-height: var(--altura-titulo);
    text-wrap: balance;
}

h1 {
    font-size: var(--titulo-1);
    font-weight: 800;
    letter-spacing: -0.022em;
}

h2 {
    font-size: var(--titulo-2);
    font-weight: 700;
    letter-spacing: -0.012em;
}

h3 {
    font-size: var(--titulo-3);
    font-weight: 600;
    line-height: 1.25;
}

/* Titulo da pagina e o paragrafo de abertura logo abaixo dele. */
.container > h1 {
    margin-bottom: var(--espaco-2);
}

h1 + .texto-corrido {
    font-size: var(--texto-chamada);
    line-height: 1.5;
    color: var(--cor-texto-secundario);
}

.cartao {
    background: var(--cor-fundo);
    border: var(--borda-sutil);
    border-radius: var(--raio-2);
    padding: var(--espaco-3);
    box-shadow: var(--sombra-1);
}

.aviso {
    background: #fffaf0;
    border: 1px solid rgba(216, 167, 61, 0.35);
    border-left: 4px solid var(--cor-acao);
    border-radius: var(--raio-1);
    padding: var(--espaco-3);
}

.destaque {
    background: linear-gradient(135deg, var(--cor-identidade), #16407f);
    color: #ffffff;
    border-radius: var(--raio-2);
    padding: var(--espaco-4);
    box-shadow: var(--sombra-2);
}

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0.75rem 1.5rem;
    border-radius: var(--raio-1);
    font-family: var(--fonte-texto);
    font-weight: 600;
    font-size: var(--texto-corpo);
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: var(--sombra-1);
    transition: transform var(--transicao), box-shadow var(--transicao),
                background-color var(--transicao), color var(--transicao);
}

.botao:hover {
    transform: translateY(-1px);
    box-shadow: var(--sombra-2);
}

.botao:active {
    transform: translateY(0);
    box-shadow: var(--sombra-1);
}

.botao--principal {
    background: var(--cor-acao);
    color: var(--cor-texto);
}

.botao--principal:hover {
    background: #c9982f;
}

.botao--contorno {
    background: transparent;
    border-color: var(--cor-identidade);
    color: var(--cor-identidade);
}

.botao--contorno:hover {
    background: var(--cor-identidade);
    color: #ffffff;
}

.telefone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
    font-weight: 600;
    color: var(--cor-identidade);
    text-decoration: none;
}

.telefone:hover {
    text-decoration: underline;
}

.container {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: 0 var(--espaco-3);
}

@media (min-width: 900px) {
    .container {
        padding: 0 var(--espaco-4);
    }
}

main {
    padding-bottom: var(--espaco-6);
}

.pagina-topo {
    padding-top: var(--espaco-4);
    padding-bottom: var(--espaco-3);
}

main > .container > h1:first-child {
    padding-top: var(--espaco-5);
}

/* Faixa de largura total, como as seções do gov.br */
.faixa {
    width: 100%;
    padding: var(--espaco-5) 0;
}

.faixa--busca {
    background: var(--cor-fundo);
    border: none;
}

.faixa--titulo {
    background: var(--cor-superficie);
    border-bottom: var(--borda-sutil);
    padding: var(--espaco-5) 0;
    margin-bottom: var(--espaco-2);
}

.faixa--titulo h1 {
    color: var(--cor-identidade);
}

.faixa--titulo .texto-corrido {
    margin-top: var(--espaco-2);
    font-size: var(--texto-chamada);
    color: var(--cor-texto-secundario);
}

.texto-corrido {
    max-width: var(--largura-leitura);
}

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

@media (prefers-contrast: more) {
  :root {
    --cor-texto: #000000;
    --cor-texto-secundario: #1a1a1a;
  }

  .botao--contorno {
    border-width: 3px;
  }
}

.acoes {
  margin-top: 1.5rem;
}

.intro {
  margin-top: 0;
}

.intro__resumo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  cursor: pointer;
  list-style: none;
}

.intro__resumo::-webkit-details-marker {
  display: none;
}

.intro__titulo {
  margin: 0;
}

/* O "+" fica ao lado do titulo e vira "-" quando o texto esta aberto. */
.intro__mais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  color: var(--cor-identidade);
  background: var(--cor-fundo);
  transition: background-color var(--transicao), border-color var(--transicao), transform var(--transicao);
}

.intro__mais svg {
  width: 20px;
  height: 20px;
}

.intro__resumo:hover .intro__mais {
  background: var(--cor-identidade);
  border-color: var(--cor-identidade);
  color: #ffffff;
}

.intro__resumo:focus-visible {
  outline: 3px solid var(--cor-identidade);
  outline-offset: 4px;
  border-radius: var(--raio-2);
}

.intro[open] .intro__mais {
  transform: rotate(45deg);
  background: var(--cor-identidade);
  border-color: var(--cor-identidade);
  color: #ffffff;
}

.intro__texto {
  margin-top: var(--espaco-3);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-chamada);
}

.contato {
  margin-top: 1rem;
}

.pular-link {
  position: fixed;
  top: -100%;
  left: var(--espaco-2);
  background: var(--cor-acao);
  color: var(--cor-texto);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 6px 6px;
  font-weight: 600;
  text-decoration: none;
  z-index: 1100;
  transition: top 0.15s ease;
}

.pular-link:focus {
  top: 0;
}

/* A faixa de prototipo fica FIXA no topo, acima de tudo menos da saida rapida.
   Ela precisa aparecer em qualquer print, em qualquer pagina e em qualquer
   ponto da rolagem: e o aviso de que os dados ainda nao valem como oficiais. */
.faixa-prototipo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1250;
  margin: 0;
  padding: 0.6rem var(--espaco-3);
  background: repeating-linear-gradient(
    135deg,
    #f6e2b3,
    #f6e2b3 12px,
    #f0d79a 12px,
    #f0d79a 24px
  );
  border-bottom: 2px solid var(--cor-acao);
  color: var(--cor-texto);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
}

/* O corpo desce o tanto que a faixa ocupa, senao ela cobriria o cabecalho. */
.com-prototipo {
  padding-top: var(--altura-prototipo);
}

/* E o cabecalho, que tambem e fixo, cola logo abaixo dela. */
.com-prototipo .cabecalho {
  top: var(--altura-prototipo);
}

/* Onde ha saida rapida, a faixa nao pode passar por baixo do botao: sobra
   espaco a direita para o texto nao ficar escondido atras dele. */
.com-prototipo.com-saida-rapida .faixa-prototipo {
  padding-right: 11rem;
}

@media (max-width: 620px) {
  .com-prototipo.com-saida-rapida .faixa-prototipo {
    padding-right: var(--espaco-3);
    padding-top: 3.2rem;
  }
}

.saida-rapida__aviso {
  margin: 0;
  padding: 0.75rem var(--espaco-3) 0.75rem calc(var(--espaco-3) + 160px);
  background: #fff7e6;
  border-bottom: 2px solid var(--cor-alerta);
  color: var(--cor-texto);
  font-size: var(--texto-pequeno);
}

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--cor-fundo);
  transition: box-shadow var(--transicao);
}

/* Depois que a pessoa rola, o cabecalho encolhe e ganha sombra, para ficar
   claro que ele esta flutuando por cima do conteudo. */
.cabecalho--compacto {
  box-shadow: var(--sombra-2);
}

.cabecalho__topo-interno {
  transition: padding var(--transicao);
}

.cabecalho--compacto .cabecalho__topo-interno {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.cabecalho__logo,
.cabecalho__nome {
  transition: width var(--transicao), height var(--transicao), font-size var(--transicao);
}

.cabecalho--compacto .cabecalho__logo {
  width: 30px;
  height: 30px;
}

.cabecalho--compacto .cabecalho__nome {
  font-size: var(--texto-corpo);
}

.cabecalho__topo {
  border-bottom: var(--borda-sutil);
}

.cabecalho__topo-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
  padding-top: var(--espaco-2);
  padding-bottom: var(--espaco-2);
}

.com-js .cabecalho__nav {
  border-bottom: none;
}

.cabecalho__marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1 1 auto;
  text-decoration: none;
  color: var(--cor-texto);
}

.cabecalho__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.cabecalho__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--titulo-3);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cabecalho__lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--espaco-3);
  row-gap: 0;
  margin: 0;
  padding: 0;
}

.cabecalho__link {
  display: inline-block;
  color: var(--cor-texto);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--texto-pequeno);
  padding: 0.9rem 0;
  border-bottom: 3px solid transparent;
}

.cabecalho__link:hover,
.cabecalho__link:focus-visible {
  color: var(--cor-identidade);
}

.cabecalho__link--ativo {
  color: var(--cor-identidade);
  border-bottom-color: var(--cor-identidade);
  font-weight: 700;
}

.cabecalho__acoes {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
}

.cabecalho__acao {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: var(--texto-pequeno);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: filter var(--transicao);
}

.cabecalho__acao svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.cabecalho__acao:hover {
  filter: brightness(0.94);
}

.cabecalho__acao--um {
  background: var(--cor-fundo);
  border-color: var(--cor-identidade);
  color: var(--cor-identidade);
}

.cabecalho__acao--dois {
  background: var(--cor-identidade);
  color: #ffffff;
}

.cabecalho__botao-menu {
  display: none;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  margin-left: var(--espaco-1);
  padding: 0.4rem 0.9rem;
  background: none;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--texto-pequeno);
  color: var(--cor-texto);
}

.cabecalho__botao-menu:hover {
  border-color: var(--cor-identidade);
  color: var(--cor-identidade);
}

.cabecalho__botao-menu svg {
  width: 20px;
  height: 20px;
  display: block;
}

@media (max-width: 620px) {
  .cabecalho__acao {
    padding: 0.4rem;
  }

  .cabecalho__acao-texto {
    display: none;
  }

  .cabecalho__acao svg {
    width: 20px;
    height: 20px;
    flex: none;
  }

  .cabecalho__botao-menu-texto {
    display: none;
  }
}

.cabecalho__botao-fechar {
  display: none;
}

.cabecalho__fundo {
  display: none;
}

.cabecalho__fundo--aberto {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

body.menu-aberto {
  overflow: hidden;
}

/* A gaveta existe em qualquer largura, como no gov.br. Sem JavaScript o menu
   vira uma lista normal e o botao hamburguer nao aparece. */
@media (min-width: 0px) {
  .com-js .cabecalho__botao-menu {
    display: inline-flex;
  }

  .com-js .cabecalho__nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(380px, 90vw);
    background: var(--cor-fundo);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1000;
    padding: 4rem 1.5rem 1.5rem;
    overflow-y: auto;
  }

  .com-js .cabecalho__nav--aberto {
    transform: translateX(0);
  }

  .com-js .cabecalho__lista {
    flex-direction: column;
    gap: 0;
  }

  .com-js .cabecalho__nav .container {
    padding: 0 var(--espaco-3);
  }

  .com-js .cabecalho__link {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--cor-borda);
    border-left: 4px solid transparent;
    padding-left: var(--espaco-2);
    font-size: var(--texto-corpo);
  }

  .com-js .cabecalho__link--ativo {
    border-bottom-color: var(--cor-borda);
    border-left-color: var(--cor-identidade);
    background: var(--cor-superficie);
  }

  .com-js .cabecalho__botao-fechar {
    display: block;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--cor-texto);
  }

  .cabecalho__lista {
    flex-direction: column;
    gap: 0.25rem;
  }

  .cabecalho__link {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--cor-superficie);
  }
}

@media (max-width: 760px) {
  /* Sem JavaScript o menu ocupa a largura toda, abaixo da marca. */
  html:not(.com-js) .cabecalho__interno {
    flex-wrap: wrap;
  }

  html:not(.com-js) .cabecalho__nav {
    width: 100%;
  }

  .cabecalho__interno {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .cabecalho__marca {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cabecalho__nome {
    font-size: 1rem;
  }

  .cabecalho__botao-menu {
    flex-shrink: 0;
  }
}

.faixa-identidade {
  height: 4px;
  background: linear-gradient(90deg, #298E4A, #F09F10, #E32429);
}

.rodape {
  background: var(--cor-identidade-escura);
  color: #ffffff;
  margin-top: 0;
}

.rodape__interno {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--espaco-5);
  padding-top: var(--espaco-5);
  padding-bottom: var(--espaco-5);
}

.rodape__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--titulo-4);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: var(--espaco-2);
  color: #ffffff;
}

.rodape__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* O componente de telefone nasceu no rodape, que tem fundo escuro, e por isso
   ficava branco por padrao — em qualquer outro lugar da pagina ele sumia no
   fundo claro. Agora o padrao e a cor de identidade, e o branco vale so dentro
   do rodape. Assim nao e preciso lembrar de corrigir a cor a cada lugar novo
   onde o telefone for usado. */
.rodape__link {
  color: var(--cor-identidade);
  text-decoration: none;
  font-size: 0.9rem;
}

.rodape .rodape__link {
  color: #ffffff;
  opacity: 0.92;
}

.rodape__link:hover,
.rodape__link:focus-visible {
  text-decoration: underline;
  opacity: 1;
}

.rodape__link--icone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.rodape__link--icone svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.rodape__mapa {
  padding-bottom: var(--espaco-5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--espaco-4);
}

.rodape__mapa-lista {
  list-style: none;
  margin: var(--espaco-2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--espaco-1);
}

.rodape__mapa-link {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--raio-1);
  color: #ffffff;
  text-decoration: none;
  transition: background-color var(--transicao);
}

.rodape__mapa-link:hover,
.rodape__mapa-link:focus-visible {
  background: rgba(255, 255, 255, 0.10);
}

.rodape__mapa-rotulo {
  display: block;
  font-weight: 600;
  font-size: var(--texto-pequeno);
}

.rodape__mapa-resumo {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: var(--texto-pequeno);
  color: rgba(255, 255, 255, 0.75);
  transition: max-height var(--transicao), opacity var(--transicao);
}

.rodape__mapa-link:hover .rodape__mapa-resumo,
.rodape__mapa-link:focus-visible .rodape__mapa-resumo {
  max-height: 4rem;
  opacity: 1;
  margin-top: 0.15rem;
}

.rodape__creditos {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--espaco-2) 0;
  text-align: center;
  font-size: var(--texto-pequeno);
  opacity: 0.85;
}

.rodape__creditos p {
  margin: 0;
}

.rodape__creditos a {
  color: #ffffff;
  text-decoration: underline;
}

.erro-404 {
  padding-top: var(--espaco-5);
  padding-bottom: var(--espaco-5);
  max-width: var(--largura-leitura);
}

.erro-404__titulo {
  color: var(--cor-identidade);
}

.erro-404__texto {
  margin-top: var(--espaco-2);
  margin-bottom: var(--espaco-3);
  color: var(--cor-texto-secundario);
}

.secao {
  margin-top: var(--espaco-5);
}

.secao__titulo {
  position: relative;
  margin-bottom: var(--espaco-2);
  padding-left: 0.85rem;
}

.secao__titulo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: 2px;
  background: var(--cor-identidade);
}

.aviso .secao__titulo::before,
.destaque .secao__titulo::before {
  display: none;
}

.aviso .secao__titulo,
.destaque .secao__titulo {
  padding-left: 0;
}

.secao > p,
.secao li {
  max-width: var(--largura-leitura);
}

.secao p + p {
  margin-top: var(--espaco-2);
}

.secao__lista,
.secao__passos {
  margin: 0;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
}

.secao__lista {
  list-style: disc;
}

.secao__passos {
  list-style: decimal;
  gap: var(--espaco-2);
}

.secao__passos li::marker {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  color: var(--cor-identidade);
}

.secao__passo-titulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
}

.aviso.secao .secao__titulo,
.destaque.secao .secao__titulo {
  font-size: var(--titulo-3);
}

.destaque.secao .secao__titulo {
  color: #ffffff;
}

.pergunta {
  border-bottom: 1px solid var(--cor-superficie);
  padding: var(--espaco-2) 0;
}

.pergunta__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--titulo-3);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
}

.pergunta__titulo:hover {
  color: var(--cor-identidade);
}

.pergunta__resposta {
  margin-top: var(--espaco-1);
  color: var(--cor-texto-secundario);
}

.busca-bairro {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.topo-linha__busca .busca-bairro {
  max-width: none;
  margin: 0;
}

.busca-bairro__titulo {
  font-size: var(--titulo-2);
  color: var(--cor-identidade);
  margin-bottom: var(--espaco-1);
}

.busca-bairro__rotulo {
  display: block;
  color: var(--cor-texto-secundario);
  margin-bottom: var(--espaco-2);
}

.busca-bairro__linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  flex-wrap: wrap;
  justify-content: center;
}

.busca-bairro__campo {
  flex: 1 1 320px;
  width: 100%;
  min-height: 56px;
  padding: 1rem 1.25rem;
  font-family: var(--fonte-texto);
  font-size: var(--texto-chamada);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-1);
  text-align: left;
}

/* A instrucao dentro do campo fica bem mais clara que o texto digitado, mas
   nao tao clara a ponto de sumir para quem enxerga pouco. */
.busca-bairro__campo::placeholder {
  color: var(--cor-texto-placeholder);
  opacity: 1;
}

.busca-bairro__campo:focus,
.busca-bairro__campo:focus-visible {
  background: var(--cor-fundo);
  border-color: var(--cor-identidade);
  box-shadow: none;
  outline: 2px solid var(--cor-identidade);
  outline-offset: 1px;
}

.busca-bairro__ajuda,
.busca-bairro__aviso {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-pequeno);
  margin-top: var(--espaco-2);
}

.busca-bairro__contador {
  margin-top: var(--espaco-1);
  font-size: var(--texto-pequeno);
  font-weight: 600;
  color: var(--cor-identidade);
}

.busca-bairro__alternar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  color: var(--cor-identidade);
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--texto-pequeno);
  cursor: pointer;
}

.busca-bairro__alternar:hover .busca-bairro__alternar-texto {
  text-decoration: underline;
}

.busca-bairro__seta {
  width: 18px;
  height: 18px;
  transition: transform var(--transicao);
}

.busca-bairro__alternar[aria-expanded="true"] .busca-bairro__seta {
  transform: rotate(180deg);
}

.busca-bairro__lista {
  list-style: none;
  margin: var(--espaco-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-1);
  max-height: 16rem;
  overflow-y: auto;
}

.busca-bairro__botao {
  min-height: 44px;
  padding: 0.5rem 1rem;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  border: 1px solid var(--cor-texto-secundario);
  border-radius: 999px;
  font-family: var(--fonte-texto);
  font-size: var(--texto-pequeno);
  cursor: pointer;
}

.busca-bairro__botao:hover {
  border-color: var(--cor-identidade);
  color: var(--cor-identidade);
}

.busca-bairro__sem-js {
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-secundario);
}

.com-js .busca-bairro__sem-js {
  display: none;
}

.busca-bairro__resultado,
.busca-bairro__vazio {
  margin-top: var(--espaco-3);
  text-align: left;
  background: var(--cor-fundo);
  border: var(--borda-sutil);
  border-top: 4px solid var(--cor-identidade);
  border-radius: var(--raio-2);
  padding: var(--espaco-4);
  box-shadow: var(--sombra-1);
}

.busca-bairro__vazio {
  border-left-color: var(--cor-alerta);
}

.busca-bairro__resultado-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--titulo-3);
  margin-bottom: var(--espaco-2);
}

.busca-bairro__resultado .rodape__link,
.busca-bairro__resultado .rodape__link--icone {
  color: var(--cor-identidade);
  opacity: 1;
  font-size: var(--texto-corpo);
}

.busca-bairro__vazio p + p,
.busca-bairro__ficha p + p {
  margin-top: var(--espaco-2);
}

.secao-rede__grupo {
  margin-top: var(--espaco-4);
}

.secao-rede__grupo-titulo {
  padding-bottom: var(--espaco-1);
  border-bottom: 2px solid var(--cor-identidade);
}

.secao-rede__grupo-texto {
  margin-top: var(--espaco-1);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-pequeno);
}

.secao-rede__lista {
  list-style: none;
  margin: var(--espaco-2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--espaco-2);
}

.secao-rede__item {
  background: var(--cor-fundo);
  border: var(--borda-sutil);
  border-radius: var(--raio-2);
  padding: var(--espaco-3);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao), transform var(--transicao);
}

.secao-rede__item:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}

.secao-rede__nome {
  font-family: var(--fonte-titulo);
  font-size: var(--titulo-4);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

.secao-rede__descricao {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-pequeno);
  margin-bottom: var(--espaco-1);
}

.secao-rede__linha {
  font-size: var(--texto-pequeno);
  margin-top: 0.25rem;
}

.secao-rede__linha--icone {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.secao-rede__linha--icone svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.secao-rede__linha .rodape__link,
.secao-rede__linha .rodape__link--icone {
  color: var(--cor-identidade);
  opacity: 1;
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

.secao-rede__horario,
.secao-rede__atende {
  color: var(--cor-texto-secundario);
}

.secao-rede__fonte {
  margin-top: var(--espaco-4);
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-secundario);
}

.secao-contatos__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--espaco-3);
}

.secao-contatos__item {
  background: var(--cor-fundo);
  border: var(--borda-sutil);
  border-radius: var(--raio-2);
  padding: var(--espaco-3);
  box-shadow: var(--sombra-1);
}

.secao-contatos__nome {
  margin-bottom: var(--espaco-2);
}

.secao-contatos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.secao-contatos .rodape__link,
.secao-contatos .rodape__link--icone {
  color: var(--cor-identidade);
  opacity: 1;
  font-size: var(--texto-corpo);
}

.grade-atalhos {
  margin-top: var(--espaco-6);
  text-align: center;
}

.grade-atalhos__titulo {
  color: var(--cor-identidade);
  margin-bottom: var(--espaco-1);
}

.grade-atalhos__subtitulo {
  color: var(--cor-texto-secundario);
  margin-bottom: var(--espaco-4);
}

.grade-atalhos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--espaco-3);
}

.atalho {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-1);
  height: 100%;
  padding: var(--espaco-3);
  background: var(--cor-fundo);
  border: var(--borda-sutil);
  border-radius: var(--raio-2);
  text-decoration: none;
  color: var(--cor-identidade);
  text-align: center;
  transition: background-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.atalho:hover {
  background: var(--cor-identidade);
  color: #ffffff;
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}

.atalho__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--espaco-1);
  color: inherit;
}

.atalho__icone svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.5;
}

.atalho__rotulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--texto-corpo);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.atalho__descricao {
  color: var(--cor-texto-secundario);
  font-size: var(--texto-pequeno);
}

.atalho:hover .atalho__descricao {
  color: rgba(255, 255, 255, 0.92);
}

.atalho__seta {
  margin-top: auto;
  padding-top: var(--espaco-1);
  color: var(--cor-identidade);
  font-weight: 600;
}

.bloco-emergencia {
  margin-top: var(--espaco-5);
  margin-bottom: var(--espaco-5);
  background: linear-gradient(135deg, #fff6ee, #ffeee6);
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-left: 6px solid var(--cor-alerta);
  border-radius: var(--raio-2);
  padding: var(--espaco-4);
  box-shadow: var(--sombra-2);
}

.bloco-emergencia__titulo {
  color: var(--cor-alerta);
}

.bloco-emergencia__titulo {
  font-size: var(--titulo-3);
  margin-bottom: var(--espaco-1);
}

.bloco-emergencia__texto {
  color: var(--cor-texto-secundario);
  margin-bottom: var(--espaco-2);
}

.bloco-emergencia__acoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bloco-emergencia__acoes .rodape__link--icone {
  color: var(--cor-identidade);
  opacity: 1;
  font-size: var(--texto-corpo);
}

@media print {
  .faixa-prototipo {
    border: 1px solid #000;
    background: none;
  }

  @page {
    margin: 2cm;
  }

  body {
    background: #fff;
    color: #000;
  }

  .botao,
  .botao--principal,
  .botao--contorno {
    display: none;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href^="tel:"]::after {
    content: " (" attr(href) ")";
    font-weight: normal;
  }

  .cartao,
  .aviso,
  .destaque,
  .atalho,
  .bloco-emergencia {
    background: none;
    border: 1px solid #000;
    box-shadow: none;
  }

  .atalho__seta {
    display: none;
  }

  .busca-bairro__campo,
  .busca-bairro__ajuda,
  .busca-bairro__contador,
  .busca-bairro__alternar {
    display: none;
  }

  .busca-bairro__lista[hidden],
  .busca-bairro__item[hidden] {
    display: flex !important;
  }

  .busca-bairro__lista {
    max-height: none;
    overflow: visible;
  }

  .busca-bairro__sem-js {
    display: inline !important;
  }

  .pergunta[open] .pergunta__resposta,
  .pergunta .pergunta__resposta {
    display: block;
    color: #000;
  }

  .container {
    max-width: 100%;
  }

  .telefone,
  .destaque,
  .destaque h3,
  .destaque p {
    color: #000;
  }

  .cabecalho__nav,
  .cabecalho__botao-menu,
  .cabecalho__fundo {
    display: none;
  }

  .pular-link {
    display: none;
  }

  .faixa-identidade {
    display: none;
  }

  .rodape {
    background: none;
    color: #000;
  }
}

/* ---------- Saida rapida (site VD) ---------- */
/* z-index acima da faixa de prototipo: a saida rapida tem precedencia sobre
   qualquer outro elemento de interface. */
.saida-rapida {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1400;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  background: var(--cor-alerta);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 0 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.saida-rapida svg {
  width: 20px;
  height: 20px;
}

.saida-rapida:hover,
.saida-rapida:focus-visible {
  filter: brightness(1.08);
}

/* ---------- Orientacao guiada ---------- */
/* O botao fica acima do VLibras, que ocupa o canto inferior direito. */
.orientacao__abrir {
  position: fixed;
  right: var(--espaco-3);
  bottom: calc(var(--espaco-3) + 76px);
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0.9rem 1.5rem;
  background: var(--cor-acao);
  color: var(--cor-texto);
  border: none;
  border-radius: 999px;
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: var(--texto-corpo);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.orientacao__abrir svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.orientacao__abrir:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.orientacao__abrir[aria-expanded="true"] {
  visibility: hidden;
}

/* Anel que pulsa uma vez ao carregar, para o botao ser notado. */
.orientacao__abrir::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 3px solid var(--cor-acao);
  opacity: 0;
  animation: orientacao-chamar 2.4s ease-out 1.2s 3;
  pointer-events: none;
}

@keyframes orientacao-chamar {
  0% { transform: scale(0.96); opacity: 0.7; }
  70% { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}

.orientacao__painel {
  position: fixed;
  right: var(--espaco-3);
  bottom: var(--espaco-3);
  z-index: 1150;
  width: min(400px, calc(100vw - 2 * var(--espaco-3)));
  max-height: min(72vh, 620px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cor-fundo);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  animation: orientacao-subir 0.18s ease-out;
}

@keyframes orientacao-subir {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.orientacao__topo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-3);
  background: var(--cor-identidade);
  color: #ffffff;
}

.orientacao__marca {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
}

.orientacao__marca svg {
  width: 22px;
  height: 22px;
}

.orientacao__titulo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--titulo-3);
  color: #ffffff;
  outline-offset: 4px;
}

.orientacao__subtitulo {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: var(--texto-pequeno);
  color: #ffffff;
  opacity: 0.9;
}

.orientacao__fechar {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.orientacao__fechar:hover {
  background: rgba(255, 255, 255, 0.3);
}

.orientacao__corpo {
  padding: var(--espaco-3);
  overflow-y: auto;
  flex: 1 1 auto;
  background: var(--cor-superficie);
}

.orientacao__instrucao {
  font-weight: 600;
  margin-bottom: var(--espaco-2);
}

.orientacao__opcoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.orientacao__opcao {
  position: relative;
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 2.25rem 0.85rem 1rem;
  text-align: left;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-family: var(--fonte-texto);
  font-size: var(--texto-corpo);
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.orientacao__opcao::after {
  content: "\2192";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cor-identidade);
  font-weight: 700;
}

.orientacao__opcao:hover {
  border-color: var(--cor-identidade);
  transform: translateX(2px);
}

.orientacao__opcao--escape {
  background: transparent;
  border-style: dashed;
  border-color: var(--cor-texto-secundario);
  box-shadow: none;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-pequeno);
}

.orientacao__opcao--escape::after {
  color: var(--cor-texto-secundario);
}

.orientacao__opcao--risco {
  background: var(--cor-alerta);
  color: #ffffff;
  font-weight: 700;
  border-color: var(--cor-alerta);
}

.orientacao__opcao--risco::after {
  color: #ffffff;
}

.orientacao__opcao--risco:hover {
  filter: brightness(1.08);
}

.orientacao__resposta {
  background: var(--cor-fundo);
  border-radius: 14px;
  padding: var(--espaco-3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.orientacao__resposta p + p {
  margin-top: var(--espaco-2);
}

.orientacao__resposta--risco {
  border-left: 4px solid var(--cor-alerta);
}

.orientacao__canais {
  list-style: none;
  margin: var(--espaco-3) 0 0;
  padding: var(--espaco-2);
  background: var(--cor-superficie);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.orientacao__canais .rodape__link,
.orientacao__canais .rodape__link--icone {
  color: var(--cor-identidade);
  opacity: 1;
  font-size: var(--texto-corpo);
  font-weight: 600;
}

.orientacao__resposta .botao {
  margin-top: var(--espaco-3);
}

.orientacao__rodape {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-2) var(--espaco-3);
  border-top: 1px solid var(--cor-superficie);
  background: var(--cor-fundo);
}

.orientacao__navegar {
  min-height: 44px;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 2px solid var(--cor-identidade);
  border-radius: 8px;
  color: var(--cor-identidade);
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--texto-pequeno);
  cursor: pointer;
}

.orientacao__navegar:hover {
  background: var(--cor-identidade);
  color: #ffffff;
}

.orientacao__nota {
  margin-left: auto;
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-secundario);
  text-align: right;
}

@media (max-width: 560px) {
  .orientacao__painel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
  }

  .orientacao__abrir {
    right: var(--espaco-2);
    bottom: calc(var(--espaco-2) + 72px);
    font-size: var(--texto-pequeno);
    padding: 0.8rem 1.2rem;
  }

  .orientacao__nota {
    display: none;
  }
}

@media print {
  .saida-rapida,
  .orientacao__abrir,
  .orientacao__painel {
    display: none !important;
  }
}

/* Em telas estreitas, a instrucao dentro do campo precisa caber. */
@media (max-width: 560px) {
  .busca-bairro__campo {
    font-size: 1rem;
  }

  .busca-bairro__campo::placeholder {
    font-size: 0.95rem;
  }
}

@media (max-width: 560px) {
  .cabecalho__nome {
    font-size: 1rem;
  }

  .cabecalho__logo {
    width: 32px;
    height: 32px;
  }
}

/* ---------- Grade de paginas ---------- */

/* A descricao fica sempre visivel, e nao escondida atras do hover. Tentamos
   a faixa que subia no hover e ela cria um dilema sem saida: ou o cartao
   reserva o espaco dela e fica com metade vazio parado, ou a faixa sobe e
   cobre o titulo. Alem disso, no celular hover nao existe — entao metade dos
   visitantes nunca veria a descricao. Mostrar sempre resolve os tres. */
.atalho__descricao {
  margin-top: var(--espaco-1);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-pequeno);
  line-height: 1.45;
}

/* No hover o cartao inteiro fica azul, entao a descricao precisa clarear
   junto — com a cor de texto normal ela sumiria no fundo. */
.atalho:hover .atalho__descricao,
.atalho:focus-visible .atalho__descricao {
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- Endereco que abre o Google Maps ---------- */

.endereco {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.endereco svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
}

.endereco:hover span:first-of-type,
.endereco:focus-visible span:first-of-type {
  text-decoration: underline;
}

/* ---------- Topo da home ---------- */

/* O titulo fica em cima e a busca logo abaixo, os dois no mesmo fundo branco:
   nao existe mais a faixa cinza em volta do campo. */
.faixa--topo {
  padding: 0;
  background: var(--cor-fundo);
  border-bottom: var(--borda-sutil);
}

.topo-linha {
  padding-top: var(--espaco-4);
  padding-bottom: var(--espaco-4);
}

/* Na home o titulo e menor que nas paginas internas, para o campo de busca
   aparecer sem precisar rolar a tela. */
.topo-linha .intro__titulo {
  font-size: var(--titulo-2);
  line-height: 1.2;
}

.topo-linha .intro__mais {
  width: 40px;
  height: 40px;
}

.topo-linha .intro__mais svg {
  width: 18px;
  height: 18px;
}

.topo-linha__busca {
  margin-top: var(--espaco-3);
}

/* A busca ocupa a mesma coluna do resto da home. Antes ela parava 300px
   antes da borda direita e nada alinhava com nada. */
.topo-linha__busca .busca-bairro {
  max-width: none;
  margin: 0;
}

.topo-linha__busca .busca-bairro__linha {
  justify-content: flex-start;
}

/* Botao dentro do bloco de destaque, que tem fundo azul. */
.secao__acao {
  margin-top: var(--espaco-2);
  margin-bottom: 0;
}

.destaque .botao--contorno {
  border-color: #ffffff;
  color: #ffffff;
}

.destaque .botao--contorno:hover,
.destaque .botao--contorno:focus-visible {
  background: #ffffff;
  color: var(--cor-identidade);
}

/* O contador so ocupa espaco quando tem texto. */
.busca-bairro__contador:empty {
  display: none;
}

/* ---------- Movimento ---------- */

/* Cada bloco entra com um fade curto e um deslocamento pequeno quando chega na
   tela. A classe so e aplicada pelo JavaScript: sem JS, tudo ja nasce visivel. */
.com-js .revela {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.com-js .revela--visivel {
  opacity: 1;
  transform: none;
}

/* Na grade, os cartoes entram em sequencia: 60ms de diferenca entre um e outro,
   menos de meio segundo do primeiro ao ultimo. */
.com-js .grade-atalhos__lista li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 460ms ease, transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.com-js .grade-atalhos--visivel .grade-atalhos__lista li {
  opacity: 1;
  transform: none;
}

.com-js .grade-atalhos__lista li:nth-child(1) { transition-delay: 0ms; }
.com-js .grade-atalhos__lista li:nth-child(2) { transition-delay: 60ms; }
.com-js .grade-atalhos__lista li:nth-child(3) { transition-delay: 120ms; }
.com-js .grade-atalhos__lista li:nth-child(4) { transition-delay: 180ms; }
.com-js .grade-atalhos__lista li:nth-child(5) { transition-delay: 240ms; }
.com-js .grade-atalhos__lista li:nth-child(6) { transition-delay: 300ms; }
.com-js .grade-atalhos__lista li:nth-child(7) { transition-delay: 360ms; }
.com-js .grade-atalhos__lista li:nth-child(8) { transition-delay: 420ms; }
.com-js .grade-atalhos__lista li:nth-child(9) { transition-delay: 480ms; }

/* Quem pediu menos movimento no proprio aparelho ve tudo parado e ja visivel. */
@media (prefers-reduced-motion: reduce) {
  .com-js .revela,
  .com-js .grade-atalhos__lista li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Microinteracoes ---------- */

.atalho:active {
  transform: translateY(0);
}

.botao,
.cabecalho__acao,
.busca-bairro__alternar,
.intro__mais {
  transition: background-color var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}

.botao:active,
.cabecalho__acao:active,
.busca-bairro__alternar:active {
  transform: translateY(1px);
}

.rodape__link,
.endereco,
.rodape__mapa-link {
  transition: color var(--transicao), background-color var(--transicao);
}

.secao-rede__item {
  transition: box-shadow var(--transicao), transform var(--transicao);
}

.secao-rede__item:hover {
  box-shadow: var(--sombra-1);
}

/* O foco pelo teclado tem que ser visivel em qualquer fundo. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--cor-acao);
  outline-offset: 2px;
}

/* ---------- Ajustes de tipografia para a Sora e a Inter ---------- */

/* A Sora e mais larga que a Raleway: apertar levemente o espacamento deixa os
   titulos com o desenho que o tipografo desenhou, e nao esparramados. */
h1, h2, h3,
.intro__titulo,
.grade-atalhos__titulo,
.secao__titulo {
  letter-spacing: -0.02em;
}

/* Maiuscula com fonte larga precisa de menos espacamento entre letras, nao de
   mais, senao o rotulo do cartao quebra em linhas demais. */
.atalho__rotulo {
  letter-spacing: 0.005em;
}

/* A Inter tem numeros de largura variavel por padrao. Em telefone e endereco
   isso desalinha; a variante tabular resolve. */
.rodape__link,
.endereco,
.secao-contatos__lista,
.secao-rede__linha,
.bloco-emergencia a {
  font-variant-numeric: tabular-nums;
}

/* ---------- Lupa dentro do campo de busca ---------- */

/* O campo precisa se anunciar como campo antes de qualquer clique: fundo
   branco, borda visivel e uma lupa. Sem isso ele some no fundo da pagina. */
.busca-bairro__caixa {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
}

.busca-bairro__lupa {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--cor-texto-placeholder);
  pointer-events: none;
}

.busca-bairro__caixa .busca-bairro__campo {
  flex: 1 1 auto;
  padding-left: 3.1rem;
  padding-right: 3.4rem;
}

/* O X so existe quando ha algo escrito. Alvo de 44px, que e o minimo para
   dedo, mesmo com o desenho do X sendo menor que isso. */
.busca-bairro__limpar {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--cor-texto-secundario);
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao);
}

.busca-bairro__limpar svg {
  width: 18px;
  height: 18px;
}

.busca-bairro__limpar:hover,
.busca-bairro__limpar:focus-visible {
  background: var(--cor-superficie);
  color: var(--cor-identidade);
}

/* Na pagina estatica da orientacao, a lista de canais fica logo depois de um
   paragrafo. Sem respiro entre os dois, o telefone parece continuacao do texto. */
.aviso .secao-contatos__lista,
.destaque .secao-contatos__lista {
  margin-top: var(--espaco-2);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.aviso .rodape__link,
.destaque .rodape__link {
  font-size: var(--texto-corpo);
  font-weight: 600;
}

.destaque .rodape__link {
  color: #ffffff;
}

/* Na impressao a faixa volta a ser um elemento normal, no topo do papel. */
@media print {
  .faixa-prototipo {
    position: static;
  }

  .com-prototipo {
    padding-top: 0;
  }
}

/* Telefone ainda nao confirmado pela instituicao: aparece, mas nao liga. */
/* Especificidade dobrada de proposito: as secoes (contatos, rede, busca)
   pintam o telefone de azul, e o pendente precisa vencer essas regras para
   nao parecer um link que funciona. */
.rodape__link.rodape__link--pendente {
  color: var(--cor-texto-secundario);
  cursor: default;
  text-decoration: none;
}

.rodape .rodape__link--pendente {
  color: rgba(255, 255, 255, 0.75);
}

.rodape__pendente-marca {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

/* Nota curta ao lado de links de WhatsApp: nem todo mundo sabe que, se o
   WhatsApp nao responder, o mesmo numero funciona por ligacao normal. */
.rodape__link-nota {
  font-size: 0.82em;
  font-weight: 400;
  opacity: 0.75;
}

/* ---------- Bairro dentro do guia de orientacao ---------- */

.orientacao__bairro {
  margin-top: var(--espaco-2);
  padding: var(--espaco-2);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
}

.orientacao__bairro-rotulo {
  display: block;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.orientacao__bairro-campo {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  font-family: var(--fonte-texto);
  font-size: var(--texto-corpo);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-1);
}

.orientacao__bairro-ajuda {
  margin: 0.5rem 0 0;
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-secundario);
}

.orientacao__bairro-saida {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: var(--borda-sutil);
  font-size: var(--texto-pequeno);
}

.orientacao__bairro-link {
  font-weight: 700;
  color: var(--cor-identidade);
}

/* ---------- "É com o Conselho Tutelar?" ---------- */

/* Sao 14 situacoes. Em cartao, isso vira um muro de caixas e domina a home.
   Em linha, vira uma lista calma que a pessoa varre com o olho. E na home a
   lista inteira fica dentro de uma barra que abre — ocupa uma faixa, nao
   meia tela. Tudo com <details>: nenhuma linha de JavaScript. */

.situacoes {
  margin-top: var(--espaco-5);
}

.situacoes__titulo {
  color: var(--cor-identidade);
  text-align: center;
  margin-bottom: var(--espaco-1);
}

.situacoes__instrucao {
  text-align: center;
  color: var(--cor-texto-secundario);
  margin: 0 auto var(--espaco-3);
  max-width: 58ch;
}

/* ----- a barra que abre (usada na home) ----- */

.situacoes__caixa {
  max-width: none;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-fundo);
  overflow: hidden;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}

.situacoes__caixa[open] {
  border-color: var(--cor-identidade);
  box-shadow: var(--sombra-1);
}

.situacoes__barra {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  background: var(--cor-superficie);
  cursor: pointer;
  list-style: none;
}

.situacoes__barra::-webkit-details-marker {
  display: none;
}

.situacoes__barra:hover {
  background: #e9edf4;
}

.situacoes__barra-icone {
  display: inline-flex;
  flex: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cor-fundo);
  color: var(--cor-identidade);
}

.situacoes__barra-icone svg {
  width: 22px;
  height: 22px;
}

.situacoes__barra-texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.situacoes__barra-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--titulo-3);
  color: var(--cor-identidade);
  letter-spacing: -0.01em;
}

.situacoes__barra-ajuda {
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-secundario);
}

.situacoes__barra-seta {
  display: inline-flex;
  flex: none;
  color: var(--cor-identidade);
  transition: transform var(--transicao);
}

.situacoes__barra-seta svg {
  width: 20px;
  height: 20px;
}

.situacoes__caixa[open] .situacoes__barra-seta {
  transform: rotate(180deg);
}

/* ----- a lista de situacoes ----- */

.situacoes__lista {
  max-width: none;
}

.situacoes__caixa .situacoes__lista {
  max-width: none;
}

.situacao {
  border-top: var(--borda-sutil);
}

.situacoes__lista > .situacao:first-child {
  border-top: none;
}

.situacoes__caixa .situacao:first-child {
  border-top: var(--borda-sutil);
}

.situacao__linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: 56px;
  padding: 0.7rem var(--espaco-3);
  cursor: pointer;
  list-style: none;
}

.situacao__linha::-webkit-details-marker {
  display: none;
}

.situacao__linha:hover {
  background: var(--cor-superficie);
}

.situacao__icone {
  display: inline-flex;
  flex: none;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: var(--cor-identidade);
}

.situacao__icone svg {
  width: 20px;
  height: 20px;
}

.situacao--nao .situacao__icone {
  color: #8a6a1c;
}

.situacao__rotulo {
  flex: 1 1 auto;
  line-height: 1.35;
}

.situacao[open] .situacao__rotulo {
  font-weight: 700;
  color: var(--cor-identidade);
}

.situacao__marca {
  display: inline-flex;
  flex: none;
  color: var(--cor-texto-secundario);
  transition: transform var(--transicao);
}

.situacao__marca svg {
  width: 16px;
  height: 16px;
}

.situacao[open] .situacao__marca {
  transform: rotate(90deg);
  color: var(--cor-identidade);
}

/* ----- a resposta ----- */

.situacao__resposta {
  padding: 0 var(--espaco-3) var(--espaco-3) calc(var(--espaco-3) + 22px + var(--espaco-2));
  max-width: var(--largura-leitura);
}

.situacao__selo {
  display: inline-block;
  margin: 0 0 var(--espaco-2);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.situacao--sim .situacao__selo {
  background: var(--cor-identidade);
  color: #ffffff;
}

.situacao--nao .situacao__selo {
  background: var(--cor-acao);
  color: var(--cor-texto);
}

.situacao__texto {
  margin: 0 0 var(--espaco-2);
}

.situacao__aviso {
  margin: 0 0 var(--espaco-2);
  padding: var(--espaco-2);
  background: #fdeceb;
  border-left: 4px solid var(--cor-alerta);
  border-radius: var(--raio-1);
  font-weight: 600;
}

.situacao__canais,
.situacao__enderecos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.situacao__enderecos {
  margin-top: var(--espaco-2);
  padding-top: var(--espaco-2);
  border-top: var(--borda-sutil);
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-secundario);
}

@media (max-width: 560px) {
  .situacao__linha,
  .situacoes__barra {
    padding-left: var(--espaco-2);
    padding-right: var(--espaco-2);
  }

  .situacao__resposta {
    padding-left: calc(var(--espaco-2) + 22px + var(--espaco-2));
    padding-right: var(--espaco-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .situacoes__caixa,
  .situacoes__barra-seta,
  .situacao__marca {
    transition: none;
  }
}