/* ===================================================================
   APAS Baixada Santista — design system
   Uma folha única, em camadas, nesta ordem:
     1. fontes   2. tokens   3. base   4. layout   5. primitivos
     6. componentes   7. utilitários   8. impressão
   Referência viva de tudo isto: /_ds
   Orçamento: ≤ 40 KB sem compressão (ver CHECKLIST.md).
   =================================================================== */


/* --- 1. FONTES ------------------------------------------------------
   Duas famílias, hospedadas aqui, subset latin (cobre todo o português).
   Atkinson Hyperlegible Next: desenhada pelo Braille Institute para
   leitores com baixa visão — escolha deliberada para um público com
   muitos associados inativos e idosos.
   Archivo: grotesca de peso firme, conversa com o itálico pesado do logo.
   Ambas OFL-1.1 (licenças em assets/fonts/LICENCAS.txt). */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --- 2. TOKENS ------------------------------------------------------
   Duas camadas. Primitivos: os valores. Semânticos: o PAPEL de cada cor.
   Componentes usam só os semânticos — é o que permite o alto contraste
   trocar o site inteiro redefinindo meia dúzia de variáveis.

   Regra da marca: o ciano do logo (#34B4EB) tem contraste de 2,37:1
   sobre branco. Ele NUNCA é cor de texto, de link ou o único sinal de
   um controle. Só aparece como preenchimento decorativo. */

:root {
  /* primitivos — extraídos do logo */
  --azul-950: #002A52;
  --azul-800: #003B70;
  --azul-700: #005198;   /* azul APAS */
  --ciano-500: #34B4EB;  /* ciano APAS — só decorativo */
  --ciano-100: #CDEBFA;
  --ciano-50:  #EAF6FD;

  /* neutros com viés azul (nunca cinza puro) */
  --neutro-950: #0E1B27;
  --neutro-700: #34485A;
  --neutro-600: #56697A;
  --neutro-500: #6B7F90;
  --neutro-400: #8397A8;
  --neutro-300: #C7D3DC;
  --neutro-200: #DCE5EB;
  --neutro-100: #EDF2F5;
  --neutro-50:  #F3F7FA;
  --branco:     #FFFFFF;

  /* status — separados do azul da marca */
  --verde-700: #16603F;  --verde-50: #E4F2EA;
  --ambar-700: #8A4B00;  --ambar-50: #FDF1DD;  --ambar-400: #D99A3A;
  --vermelho-700: #A3161A; --vermelho-50: #FBE9E8;

  /* semânticos */
  --cor-texto:        var(--neutro-950);  /* 17,4:1 */
  --cor-texto-suave:  var(--neutro-700);  /*  9,5:1 */
  --cor-texto-fraco:  var(--neutro-600);  /*  5,7:1 — mínimo para texto */
  --cor-titulo:       var(--azul-700);
  --cor-fundo:        var(--branco);
  --cor-fundo-alt:    var(--neutro-50);
  --cor-superficie:   var(--branco);
  --cor-destaque:     var(--ciano-50);
  --cor-linha:        var(--neutro-200);
  --cor-linha-forte:  var(--neutro-400);  /* 3,0:1 — bordas que importam */
  --cor-borda-campo:  var(--neutro-500);  /* 4,2:1 */
  --cor-acao:         var(--azul-700);    /*  8,0:1 */
  --cor-acao-hover:   var(--azul-800);    /* 11,3:1 */
  --cor-acao-texto:   var(--branco);
  --cor-foco:         var(--azul-700);
  --cor-marca-apoio:  var(--ciano-500);
  --cor-sucesso: var(--verde-700);    --cor-sucesso-fundo: var(--verde-50);
  --cor-atencao: var(--ambar-700);    --cor-atencao-fundo: var(--ambar-50);
  --cor-critico: var(--vermelho-700); --cor-critico-fundo: var(--vermelho-50);
  --cor-info:    var(--azul-700);     --cor-info-fundo:    var(--ciano-50);

  /* tipografia — escala FIXA: nada fora dela */
  --fonte-texto: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-titulo: "Archivo", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --t-xs:  0.875rem;  /* 14 */
  --t-sm:  1rem;      /* 16 */
  --t-md:  1.125rem;  /* 18 — corpo */
  --t-lg:  1.375rem;  /* 22 */
  --t-xl:  1.75rem;   /* 28 */
  --t-2xl: 2.25rem;   /* 36 */
  --t-3xl: 3rem;      /* 48 */

  /* espaço — múltiplos de 8 */
  --e-1: 0.5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2rem; --e-5: 3rem; --e-6: 4rem;

  /* forma */
  --raio: 6px;
  --raio-sm: 4px;
  --borda: 1px;
  --sombra: 0 1px 2px rgba(0, 42, 82, .06), 0 8px 24px -16px rgba(0, 42, 82, .35);
  /* A sombra deslocada do logo: ciano atrás do azul. Assinatura da marca,
     usada só no botão primário. */
  --sombra-marca: 3px 3px 0 var(--ciano-500);

  --largura-max: 76rem;
  --medida: 68ch;
  --alvo: 44px;        /* área mínima de toque */
  --transicao: 120ms ease-out;
}

/* Tamanho de fonte ampliado — controle no header (Sprint 2).
   Tudo é rem: aumentar a raiz escala o site inteiro. */
:root[data-fonte="grande"] { font-size: 112.5%; }
:root[data-fonte="maior"]  { font-size: 125%; }

/* Alto contraste — mesmo layout, papéis reforçados. */
:root[data-contraste="alto"] {
  --cor-texto: #000;
  --cor-texto-suave: #000;
  --cor-texto-fraco: #1A1A1A;
  --cor-titulo: #000;
  --cor-fundo-alt: #FFF;
  --cor-destaque: #FFF;
  --cor-linha: #000;
  --cor-linha-forte: #000;
  --cor-borda-campo: #000;
  --cor-acao: var(--azul-950);
  --cor-acao-hover: #000;
  --cor-foco: #000;
  --cor-info-fundo: #FFF;
  --cor-sucesso-fundo: #FFF;
  --cor-atencao-fundo: #FFF;
  --cor-critico-fundo: #FFF;
  --sombra: none;
  --sombra-marca: none;
  --borda: 2px;
}


/* --- 3. BASE -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

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

h1, h2, h3, h4 {
  margin: 0 0 var(--e-2);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--cor-titulo);
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); font-weight: 800; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
@media (min-width: 48rem) { h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); } }

p, ul, ol, dl { margin: 0 0 var(--e-2); max-width: var(--medida); }
li + li { margin-top: 0.25em; }
strong, b { font-weight: 700; }
small { font-size: var(--t-xs); }

a { color: var(--cor-acao); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cor-acao-hover); text-decoration-thickness: 2px; }
:root[data-contraste="alto"] a { text-decoration-thickness: 2px; }

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
hr { border: 0; border-top: var(--borda) solid var(--cor-linha); margin: var(--e-4) 0; }

code, kbd {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.88em;
  background: var(--cor-fundo-alt);
  padding: 0.1em 0.35em;
  border-radius: var(--raio-sm);
}

/* Foco visível — requisito WCAG 2.4.7. Nunca remover sem substituir. */
:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

.skip-link {
  position: absolute;
  left: var(--e-2);
  top: -100px;
  z-index: 100;
  padding: var(--e-1) var(--e-2);
  background: var(--cor-acao);
  color: var(--cor-acao-texto);
  font-weight: 700;
  border-radius: 0 0 var(--raio) var(--raio);
}
.skip-link:focus { top: 0; color: var(--cor-acao-texto); }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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


/* --- 4. LAYOUT ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--e-2);
}
@media (min-width: 48rem) { .container { padding-inline: var(--e-4); } }

.pilha > * + * { margin-top: var(--e-3); }
.grade { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.grade--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.linha { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.linha--fixa { flex-wrap: nowrap; align-items: baseline; gap: var(--e-1); }

.secao { padding-block: var(--e-5); }
.secao--alt { background: var(--cor-fundo-alt); }
.secao__titulo { margin-bottom: var(--e-3); }

.eyebrow {
  margin: 0 0 var(--e-1);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-acao);
}
.lead { font-size: var(--t-lg); line-height: 1.5; color: var(--cor-texto-suave); }
.nota { font-size: var(--t-sm); color: var(--cor-texto-fraco); }


/* --- 5. PRIMITIVOS -------------------------------------------------- */

/* Ícone — <svg class="icone"><use href="icones.svg#i-phone"></use></svg> */
.icone { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
.icone--lg { width: 2rem; height: 2rem; }
.icone--xl { width: 3rem; height: 3rem; }

/* Botão — 4 variantes × estados (padrão, hover, foco, ativo, desabilitado, carregando) */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: var(--alvo);
  padding: 0.625rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--raio);
  font: 700 var(--t-sm)/1.2 var(--fonte-texto);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.botao:hover { text-decoration: none; }
.botao--primario {
  background: var(--cor-acao);
  color: var(--cor-acao-texto);
  box-shadow: var(--sombra-marca);
}
.botao--primario:hover, .botao--primario.is-hover { background: var(--cor-acao-hover); color: var(--cor-acao-texto); }
.botao--primario:active { transform: translate(3px, 3px); box-shadow: none; }
.botao--secundario {
  background: var(--cor-superficie);
  color: var(--cor-acao);
  border-color: var(--cor-acao);
}
.botao--secundario:hover, .botao--secundario.is-hover { background: var(--cor-destaque); color: var(--cor-acao-hover); border-color: var(--cor-acao-hover); }
.botao--fantasma { background: transparent; color: var(--cor-acao); text-decoration: underline; text-underline-offset: 3px; }
.botao--fantasma:hover, .botao--fantasma.is-hover { background: var(--cor-destaque); color: var(--cor-acao-hover); }
.botao--perigo { background: var(--cor-superficie); color: var(--cor-critico); border-color: var(--cor-critico); }
.botao--perigo:hover, .botao--perigo.is-hover { background: var(--cor-critico); color: var(--branco); }
.botao.is-foco { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.botao--sm { min-height: 36px; padding: 0.375rem 0.875rem; font-size: var(--t-xs); }
.botao--bloco { width: 100%; }

/* desabilitado: nunca só pela cor — cursor, opacidade e aria-disabled */
.botao:disabled, .botao[aria-disabled="true"] {
  background: var(--neutro-100);
  color: var(--neutro-500);
  border-color: var(--neutro-200);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
/* carregando: o texto continua lá (leitor de tela) e o spinner aparece */
.botao[aria-busy="true"] { cursor: progress; }
.botao[aria-busy="true"] .icone { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Selo (badge) — sempre com texto; cor é reforço, não significado */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.125rem 0.625rem;
  border: var(--borda) solid currentColor;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--cor-texto-suave);
  background: var(--cor-superficie);
}
.selo--info    { color: var(--cor-info);    background: var(--cor-info-fundo); }
.selo--sucesso { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
.selo--atencao { color: var(--cor-atencao); background: var(--cor-atencao-fundo); }
.selo--critico { color: var(--cor-critico); background: var(--cor-critico-fundo); }
.selo--plano   { color: var(--azul-950); background: var(--ciano-100); border-color: transparent; }
:root[data-contraste="alto"] .selo--plano { background: #FFF; border-color: #000; color: #000; }

/* Alerta */
.alerta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-1) var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: var(--borda) solid currentColor;
  border-left-width: 6px;
  border-radius: var(--raio);
  color: var(--cor-info);
  background: var(--cor-info-fundo);
}
.alerta > .icone { width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; }
.alerta__titulo { margin: 0; font: 700 var(--t-md)/1.4 var(--fonte-texto); color: inherit; }
.alerta__corpo { grid-column: 2; color: var(--cor-texto); }
.alerta__corpo > :last-child { margin-bottom: 0; }
.alerta--sucesso { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
.alerta--atencao { color: var(--cor-atencao); background: var(--cor-atencao-fundo); }
.alerta--critico { color: var(--cor-critico); background: var(--cor-critico-fundo); }

/* Campos de formulário — rótulo sempre visível, nunca só placeholder */
.campo { display: grid; gap: 0.375rem; margin-bottom: var(--e-3); max-width: 36rem; }
.campo__rotulo { font-weight: 700; color: var(--cor-texto); }
.campo__obrigatorio { color: var(--cor-critico); font-weight: 700; }
.campo__dica { font-size: var(--t-sm); color: var(--cor-texto-fraco); margin: 0; }
.campo__erro {
  display: flex; gap: 0.4em; align-items: flex-start;
  margin: 0; font-size: var(--t-sm); font-weight: 700; color: var(--cor-critico);
}
.campo__controle {
  width: 100%;
  min-height: var(--alvo);
  padding: 0.625rem 0.75rem;
  border: var(--borda) solid var(--cor-borda-campo);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  font-size: var(--t-md);
}
.campo__controle:hover { border-color: var(--cor-texto-suave); }
.campo__controle:focus-visible, .campo__controle.is-foco { outline: 3px solid var(--cor-foco); outline-offset: 1px; border-color: var(--cor-foco); }
.campo__controle[aria-invalid="true"] { border: 2px solid var(--cor-critico); }
.campo__controle:disabled { background: var(--neutro-100); color: var(--neutro-500); border-color: var(--neutro-200); cursor: not-allowed; }
textarea.campo__controle { min-height: 8rem; resize: vertical; }
select.campo__controle {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--cor-texto-suave) 50%), linear-gradient(135deg, var(--cor-texto-suave) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.opcoes { border: 0; padding: 0; margin: 0 0 var(--e-3); }
.opcoes legend { font-weight: 700; margin-bottom: var(--e-1); padding: 0; }
.opcao { display: flex; gap: 0.75rem; align-items: flex-start; min-height: var(--alvo); padding-block: 0.5rem; cursor: pointer; }
.opcao input { width: 1.375rem; height: 1.375rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--cor-acao); }

/* Tabela — contêiner rola sozinho; a página nunca.
   Marcação: <div class="tabela-rolagem" tabindex="0" role="region" aria-label="…"> */
.tabela-rolagem:focus-visible { outline-offset: 0; }
.tabela-rolagem { overflow-x: auto; border: var(--borda) solid var(--cor-linha); border-radius: var(--raio); background: var(--cor-superficie); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabela caption { caption-side: top; text-align: left; padding: var(--e-2); font-weight: 700; color: var(--cor-texto); }
.tabela th, .tabela td { padding: 0.75rem var(--e-2); text-align: left; vertical-align: top; border-top: var(--borda) solid var(--cor-linha); }
.tabela thead th { background: var(--cor-fundo-alt); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-texto-suave); white-space: nowrap; }
.tabela tbody th { font-weight: 700; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td.sim { color: var(--cor-sucesso); font-weight: 700; }
.tabela td.nao { color: var(--cor-texto-fraco); }


/* --- 6. COMPONENTES ------------------------------------------------- */

/* Cabeçalho */
.cabecalho { background: var(--cor-superficie); border-bottom: var(--borda) solid var(--cor-linha); }
.cabecalho__faixa { background: var(--azul-950); color: var(--branco); font-size: var(--t-xs); }
.cabecalho__faixa .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1) var(--e-3); padding-block: 0.375rem; }
.cabecalho__faixa a { color: var(--branco); font-weight: 700; text-decoration: none; display: inline-flex; gap: 0.4em; align-items: center; min-height: 32px; }
.cabecalho__faixa a:hover { text-decoration: underline; color: var(--branco); }
.cabecalho__faixa :focus-visible { outline-color: var(--branco); }
.cabecalho__faixa .botao { color: var(--branco); text-decoration: none; min-height: 32px; }
.cabecalho__faixa .botao:hover { background: rgba(255, 255, 255, .14); color: var(--branco); }
.cabecalho__faixa .botao[aria-pressed="true"] { background: var(--branco); color: var(--azul-950); }
.cabecalho__contatos { display: flex; flex-wrap: wrap; gap: 0 var(--e-3); list-style: none; margin: 0; padding: 0; max-width: none; }
.cabecalho__contatos li + li { margin-top: 0; }
.cabecalho__contatos a { font-variant-numeric: tabular-nums; }
@media (max-width: 47.99rem) { .cabecalho__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.cabecalho__principal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); padding-block: var(--e-2); }
.cabecalho__logo { display: block; flex: none; margin-right: auto; color: var(--cor-acao); line-height: 0; text-decoration: none; }
.cabecalho__logo svg, .cabecalho__logo img { width: auto; height: 44px; }
@media (min-width: 48rem) { .cabecalho__logo svg, .cabecalho__logo img { height: 52px; } }
.cabecalho__logo-texto { font: 800 var(--t-lg)/1 var(--fonte-titulo); letter-spacing: -0.02em; }
.cabecalho__logo-texto span { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cor-texto-fraco); margin-top: 0.25rem; }

/* Menu: sem JS a lista aparece inteira; com JS vira um botão no celular */
.menu { flex-basis: 100%; }
.menu__botao { display: none; }
.menu__lista { display: flex; flex-wrap: wrap; gap: 0 var(--e-3); list-style: none; margin: 0; padding: 0; max-width: none; }
.menu__lista li + li { margin-top: 0; }
.menu__lista a {
  display: inline-flex; align-items: center; min-height: var(--alvo);
  font-weight: 700; color: var(--cor-texto); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.menu__lista a:hover { color: var(--cor-acao); border-bottom-color: var(--cor-marca-apoio); }
.menu__lista a[aria-current="page"] { color: var(--cor-acao); border-bottom-color: var(--cor-acao); }
.js .menu { flex-basis: auto; }
.js .menu__botao { display: inline-flex; }
.js .menu__lista { display: none; }
.js .menu.is-aberto { flex-basis: 100%; order: 3; }
.js .menu.is-aberto .menu__lista { display: flex; flex-direction: column; padding-block: var(--e-1); border-top: var(--borda) solid var(--cor-linha); }
@media (min-width: 60rem) {
  .menu, .js .menu { flex-basis: auto; order: 0; }
  .js .menu__botao { display: none; }
  .js .menu__lista, .js .menu.is-aberto .menu__lista { display: flex; flex-direction: row; border: 0; padding: 0; }
}
.cabecalho__acoes { display: flex; gap: var(--e-1); align-items: center; order: 2; }
.menu { order: 3; }
/* celular: o botão da Área do Beneficiário vira só ícone (o nome continua para leitor de tela) */
@media (max-width: 35.99rem) {
  .cabecalho__acoes .botao { padding-inline: 0.7rem; }
  .cabecalho__acoes .botao > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 60rem) { .cabecalho__acoes { order: 0; } }

/* Barra de serviços — as cinco tarefas mais buscadas */
.servicos { background: var(--cor-destaque); border-bottom: var(--borda) solid var(--cor-linha); }
.servicos__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); list-style: none; margin: 0; padding: 0; max-width: none; }
.servicos__lista li + li { margin-top: 0; }
.servicos__lista a {
  display: flex; gap: 0.6rem; align-items: center;
  min-height: 56px; padding: 0.5rem var(--e-2);
  font-size: var(--t-sm); font-weight: 700; line-height: 1.25;
  color: var(--azul-950); text-decoration: none;
}
.servicos__lista a:hover { background: var(--ciano-100); color: var(--azul-950); }
.servicos__lista .icone { width: 1.5rem; height: 1.5rem; color: var(--cor-acao); }
.servicos__lista .servicos__externo { width: 1rem; height: 1rem; margin-left: auto; color: var(--cor-texto-fraco); }
.servicos__lista a[aria-current="page"] { background: var(--ciano-100); box-shadow: inset 0 -3px 0 var(--cor-acao); }
/* celular: 2 colunas compactas; o ícone de "externo" some (o aviso continua para leitor de tela) */
@media (max-width: 35.99rem) {
  .servicos__lista { grid-template-columns: 1fr 1fr; }
  .servicos__lista a { min-height: var(--alvo); padding: 0.375rem var(--e-1); gap: 0.4rem; }
  .servicos__lista .servicos__externo { display: none; }
}

/* Trilha (breadcrumb) */
.trilha ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0; padding: var(--e-2) 0; font-size: var(--t-sm); max-width: none; }
.trilha li + li { margin-top: 0; }
.trilha li + li::before { content: "/"; margin-right: 0.5rem; color: var(--cor-texto-fraco); }
.trilha [aria-current="page"] { color: var(--cor-texto-suave); }

/* Card de plano */
.card-plano {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-3);
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-linha);
  border-top: 6px solid var(--cor-acao);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.card-plano__nome { margin: 0; font-size: var(--t-xl); }
.card-plano__registro { margin: 0; font-size: var(--t-xs); color: var(--cor-texto-fraco); }
.card-plano__publico { margin: 0; color: var(--cor-texto-suave); }
.card-plano__destaques, .lista-cruz { list-style: none; padding: 0; margin: 0; }
.card-plano__destaques li, .lista-cruz li { position: relative; padding-left: 1.5rem; }
/* a cruz do logo como marcador — decorativa, a semântica de lista fica */
.card-plano__destaques li::before, .lista-cruz li::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 0.8em; height: 0.8em;
  background:
    linear-gradient(var(--cor-marca-apoio), var(--cor-marca-apoio)) center / 100% 34% no-repeat,
    linear-gradient(var(--cor-marca-apoio), var(--cor-marca-apoio)) center / 34% 100% no-repeat;
}
.painel { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3); background: var(--cor-superficie); border: var(--borda) solid var(--cor-linha); border-radius: var(--raio); }
.painel > h2 { margin: 0; font-size: var(--t-xl); }
.painel > p, .painel > ul { margin: 0; }
.painel > .linha { margin-top: auto; }
.documento-link { display: flex; gap: var(--e-2); align-items: center; padding: var(--e-2); border: var(--borda) solid var(--cor-linha); border-radius: var(--raio); text-decoration: none; color: var(--cor-texto); max-width: 36rem; }
.documento-link .icone { color: var(--cor-acao); }
.documento-link:hover { border-color: var(--cor-acao); background: var(--cor-destaque); color: var(--cor-texto); }
.card-plano__acoes { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--e-1); }

/* Card de prestador (resultado do guia médico) */
.card-prestador {
  display: grid; gap: var(--e-1);
  padding: var(--e-3);
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-linha);
  border-radius: var(--raio);
}
.card-prestador__topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1); align-items: flex-start; }
.card-prestador__nome { margin: 0; font-size: var(--t-lg); }
.card-prestador__tipo { margin: 0; font-size: var(--t-sm); color: var(--cor-texto-fraco); }
.card-prestador__dados { display: grid; gap: 0.35rem; margin: var(--e-1) 0 0; font-size: var(--t-sm); }
.card-prestador__dados div { display: flex; gap: 0.5rem; align-items: flex-start; }
.card-prestador__dados dt .icone { color: var(--cor-texto-fraco); }
.card-prestador__dados dd { margin: 0; }
.card-prestador__acoes { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-1); }
.card-prestador--descredenciado { background: var(--cor-fundo-alt); }

/* Documento / edital */
.documento {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-1) var(--e-2);
  padding: var(--e-2) 0;
  border-bottom: var(--borda) solid var(--cor-linha);
}
.documento > .icone { width: 2rem; height: 2rem; color: var(--cor-acao); margin-top: 0.2rem; }
.documento__meta { display: flex; flex-wrap: wrap; gap: 0.25rem var(--e-2); margin: 0 0 0.25rem; font-size: var(--t-xs); color: var(--cor-texto-fraco); }
.documento__titulo { margin: 0 0 0.25rem; font-size: var(--t-lg); }
.documento__titulo a { text-decoration: none; }
.documento__titulo a:hover { text-decoration: underline; }
.documento__resumo { margin: 0 0 var(--e-1); color: var(--cor-texto-suave); }
.documento__acoes { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); font-size: var(--t-sm); font-weight: 700; }
.documento__acoes a { display: inline-flex; gap: 0.4em; align-items: center; min-height: var(--alvo); }

/* Notícia */
.noticia { display: flex; flex-direction: column; background: var(--cor-superficie); border: var(--borda) solid var(--cor-linha); border-radius: var(--raio); overflow: hidden; }
.noticia__imagem { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--cor-destaque); }
.noticia__imagem--vazia { display: grid; place-items: center; color: var(--cor-acao); background:
  linear-gradient(135deg, transparent 62%, var(--ciano-100) 62%), var(--cor-destaque); }
.noticia__corpo { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--e-3); flex: 1; }
.noticia__meta { display: flex; flex-wrap: wrap; gap: var(--e-1); align-items: center; font-size: var(--t-xs); color: var(--cor-texto-fraco); margin: 0; }
.noticia__titulo { margin: 0; font-size: var(--t-lg); }
.noticia__titulo a { color: var(--cor-titulo); text-decoration: none; }
.noticia__titulo a:hover { text-decoration: underline; }
/* o card inteiro é clicável, mas só o título é link (um alvo, um anúncio no leitor de tela) */
.noticia { position: relative; }
.noticia__titulo a::after { content: ""; position: absolute; inset: 0; }
.noticia:focus-within { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.noticia__titulo a:focus-visible { outline: none; }
.noticia__resumo { margin: 0; color: var(--cor-texto-suave); font-size: var(--t-sm); }

/* Bloco de contato (lê de canais_atendimento) */
.contatos { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); list-style: none; padding: 0; margin: 0; max-width: none; }
.contatos li + li { margin-top: 0; }
.contato { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem var(--e-2); padding: var(--e-2); background: var(--cor-superficie); border: var(--borda) solid var(--cor-linha); border-radius: var(--raio); height: 100%; }
.contato > .icone { width: 1.75rem; height: 1.75rem; color: var(--cor-acao); grid-row: span 3; }
.contato__rotulo { margin: 0; font-size: var(--t-sm); color: var(--cor-texto-suave); }
.contato__valor { font-size: var(--t-lg); font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.contato__horario { margin: 0; font-size: var(--t-xs); color: var(--cor-texto-fraco); }

/* Especialidades */
.especialidades { display: grid; gap: var(--e-1); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); list-style: none; padding: 0; margin: 0; max-width: none; }
.especialidades li + li { margin-top: 0; }
.especialidade {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  height: 100%; min-height: 7rem; padding: var(--e-2);
  background: var(--cor-superficie); border: var(--borda) solid var(--cor-linha); border-radius: var(--raio);
  color: var(--cor-texto); text-decoration: none; font-weight: 700; line-height: 1.25;
}
.especialidade .icone { width: 2.5rem; height: 2.5rem; color: var(--cor-acao); }
a.especialidade:hover { border-color: var(--cor-acao); background: var(--cor-destaque); color: var(--cor-texto); }

/* Paginação */
.paginacao ul { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; padding: 0; margin: var(--e-3) 0 0; max-width: none; }
.paginacao li + li { margin-top: 0; }
.paginacao a, .paginacao span {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
  min-width: var(--alvo); min-height: var(--alvo); padding: 0 0.75rem;
  border: var(--borda) solid var(--cor-linha); border-radius: var(--raio);
  font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums;
}
.paginacao a:hover { border-color: var(--cor-acao); background: var(--cor-destaque); }
.paginacao [aria-current="page"] { background: var(--cor-acao); border-color: var(--cor-acao); color: var(--cor-acao-texto); }
.paginacao .is-inativo { color: var(--neutro-500); border-color: var(--neutro-200); }

/* Estado vazio / carregando */
.estado { display: grid; justify-items: start; gap: var(--e-1); padding: var(--e-4); border: 2px dashed var(--cor-linha-forte); border-radius: var(--raio); background: var(--cor-fundo-alt); }
.estado > .icone { width: 2.5rem; height: 2.5rem; color: var(--cor-texto-fraco); }
.estado__titulo { margin: 0; font-size: var(--t-lg); color: var(--cor-texto); }
.estado > p { margin: 0; color: var(--cor-texto-suave); }
.esqueleto { display: grid; gap: 0.6rem; width: 100%; }
.esqueleto span { display: block; height: 1rem; border-radius: var(--raio-sm); background: linear-gradient(90deg, var(--neutro-100), var(--neutro-200), var(--neutro-100)); background-size: 200% 100%; animation: brilho 1.4s ease-in-out infinite; }
.esqueleto span:nth-child(1) { width: 60%; height: 1.4rem; }
.esqueleto span:nth-child(3) { width: 80%; }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Banner de consentimento (LGPD) — as três ações no MESMO peso visual */
.consentimento {
  position: fixed; inset: auto var(--e-2) var(--e-2) var(--e-2); z-index: 50;
  max-width: 44rem; margin-inline: auto;
  padding: var(--e-3);
  background: var(--cor-superficie); color: var(--cor-texto);
  border: 2px solid var(--cor-acao); border-radius: var(--raio);
  box-shadow: 0 12px 40px -12px rgba(0, 42, 82, .45);
}
.consentimento--estatico { position: static; }
.consentimento__titulo { margin: 0 0 var(--e-1); font-size: var(--t-lg); }
.consentimento p { font-size: var(--t-sm); }
.consentimento__acoes { display: grid; gap: var(--e-1); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.consentimento__acoes .botao { box-shadow: none; }

/* Rodapé */
.rodape { margin-top: var(--e-6); background: var(--azul-950); color: #DCE8F3; font-size: var(--t-sm); }
.rodape a { color: var(--branco); }
.rodape a:hover { color: var(--ciano-100); }
.rodape :focus-visible { outline-color: var(--branco); }
.rodape__grade { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); padding-block: var(--e-5) var(--e-4); }
.rodape h2 { font-size: var(--t-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--branco); margin-bottom: var(--e-2); }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li + li { margin-top: 0.375rem; }
.rodape__destaque { font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.rodape__nota { font-size: var(--t-xs); color: #B9CCDD; }
.rodape__base { border-top: 1px solid rgba(255, 255, 255, .2); padding-block: var(--e-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); }
.rodape__base p { margin: 0; }
:root[data-contraste="alto"] .rodape, :root[data-contraste="alto"] .cabecalho__faixa { background: #000; color: #FFF; }


/* --- 7. UTILITÁRIOS ------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.texto-centro { text-align: center; }
.sem-quebra { white-space: nowrap; }
.sem-lista { list-style: none; padding: 0; }

/* Catálogo /_ds (só em local/homologação) */
.ds-bloco { padding-block: var(--e-4); border-top: var(--borda) solid var(--cor-linha); }
.ds-bloco > h2 { margin-bottom: var(--e-1); }
.ds-bloco > .nota { margin-bottom: var(--e-3); }
.ds-rotulo { display: block; margin-bottom: var(--e-1); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-texto-fraco); }
.ds-cores { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); list-style: none; padding: 0; margin: 0; max-width: none; }
.ds-cores li + li { margin-top: 0; }
.ds-cor { border: var(--borda) solid var(--cor-linha); border-radius: var(--raio); overflow: hidden; background: var(--cor-superficie); }
.ds-cor__amostra { height: 4rem; display: flex; align-items: flex-end; padding: 0.5rem; font-weight: 700; font-size: var(--t-lg); line-height: 1.2; }
.ds-cor__dados { padding: 0.625rem; font-size: var(--t-xs); line-height: 1.5; }
.ds-cor__dados code { background: none; padding: 0; }
.ds-escala { display: grid; gap: var(--e-1); }
.ds-escala div { display: grid; grid-template-columns: 5rem 1fr; gap: var(--e-2); align-items: baseline; }
.ds-matriz { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); align-items: start; }
.ds-controles { position: sticky; top: 0; z-index: 20; background: var(--cor-fundo); border-bottom: var(--borda) solid var(--cor-linha); padding-block: var(--e-1); }


/* --- 8. IMPRESSÃO --------------------------------------------------- */
@media print {
  .cabecalho__faixa, .menu, .servicos, .rodape, .skip-link, .consentimento, .cabecalho__acoes, .ds-controles { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .card-plano, .card-prestador, .noticia, .contato { box-shadow: none; break-inside: avoid; }
}

/* Modo de cores forçadas do Windows: bordas no lugar de fundos */
@media (forced-colors: active) {
  .botao, .selo, .alerta, .card-plano, .card-prestador, .contato, .especialidade { border: 2px solid CanvasText; }
  .botao--primario { box-shadow: none; }
}