/*
  TEMA.CSS — Hospital do Cerrado (WordPress)
  Componentes que só existem no tema: busca no cabeçalho, agendar por
  largura de tela, atalhos da home, "Como chegar", páginas de serviço,
  busca, rodapé com LGPD, cookies e acessibilidade.
  Carregar depois de layout.css. Só tokens (PROJETO.md, Regra 2).
*/

/* ==========================================================================
   Briefing, seção 9 — "texto com pelo menos 16 px no corpo".
   Todo texto de leitura sobe para 16px; ficam menores só rótulos curtos
   (etiquetas, metadados, barra final do rodapé).
   ========================================================================== */
.card__text,
.passo__texto,
.aviso,
.nota,
.opcao,
.form-card__rodape p,
.prosa .artigo-aviso,
.prosa--documento table {
  font-size: var(--texto-corpo);
}

.site-footer { font-size: var(--texto-corpo); }

.site-footer__bottom { font-size: var(--texto-pequeno); }

/* ==========================================================================
   Barra superior: texto em 14px (era 12px) e horário só em telas largas
   ========================================================================== */
.topbar { font-size: var(--texto-pequeno); }

/* Com o texto ampliado (botão A+), a barra e a trilha quebram linha em vez de estourar a tela */
.topbar__inner,
.topbar__grupo {
  flex-wrap: wrap;
  row-gap: var(--espaco-1);
}

.topbar__inner { padding-block: var(--espaco-1); }

.breadcrumb ol { flex-wrap: wrap; }

.breadcrumb li { min-width: 0; overflow-wrap: anywhere; }

/* Botão nunca passa da largura disponível: com texto grande, quebra a linha */
.btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.page-hero__grid { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 992px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* Texto ampliado (html[data-texto="ampliado"], botão A+): o cabeçalho usa a
   forma compacta (menu no ícone + "Agendar"), que cabe em qualquer tela. */
html[data-texto="ampliado"] .site-nav,
html[data-texto="ampliado"] .site-header__agendar-largo { display: none; }

html[data-texto="ampliado"] .site-header__menu-btn,
html[data-texto="ampliado"] .site-header__agendar { display: inline-flex; }

/* Rodapé: colunas nunca mais largas que a tela; links longos quebram */
@media (max-width: 991px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.site-footer__links a { overflow-wrap: anywhere; }

/* Celular pequeno com texto ampliado: logo menor, margens menores e rodapé em uma coluna */
@media (max-width: 399px) {
  html[data-texto="ampliado"] .container { padding-inline: var(--espaco-4); }
  html[data-texto="ampliado"] .site-header__logo img { height: 32px; }
  html[data-texto="ampliado"] .site-header__agendar { padding-inline: var(--espaco-3); }
  html[data-texto="ampliado"] .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* O menu lateral (normalmente só abaixo de 1200px) passa a valer em toda tela */
html[data-texto="ampliado"] .mobile-nav { display: flex; }

html[data-texto="ampliado"] .mobile-nav-overlay { display: block; }

/* ==========================================================================
   Acessibilidade: A−, A+ e alto contraste (header.php + assets/js/tema.js)
   ========================================================================== */
.acessibilidade {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
}

.acessibilidade__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-1);
  min-width: 32px;
  height: 32px;
  padding: 0 var(--espaco-2);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--raio-sm);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-bold);
  color: var(--cor-branco);
}

.acessibilidade__botao:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.12); }

.acessibilidade__botao:disabled { opacity: 0.45; cursor: default; }

.acessibilidade__botao .icon { width: 16px; height: 16px; }

.acessibilidade__contraste[aria-pressed="true"] {
  background-color: var(--cor-branco);
  color: var(--cor-neutro-900);
}

/* No celular, "Alto contraste" vira só o ícone (o texto segue para o leitor de tela) */
@media (max-width: 767px) {
  .acessibilidade__rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Alto contraste (html.alto-contraste): texto preto, sem fundos em tom claro,
   bordas e links visíveis, seções escuras em preto puro com texto branco.
   Feito pelos tokens do Mídia Kit, então vale para o site inteiro.
   -------------------------------------------------------------------------- */
html.alto-contraste {
  --cor-texto-principal: #000;
  --cor-texto-secundario: #000;
  --cor-texto-terciario: #000;
  --cor-neutro-50: #fff;
  --cor-neutro-100: #fff;
  --cor-neutro-200: #000;
  --cor-neutro-600: #000;
  --cor-neutro-700: #000;
  --cor-neutro-900: #000;
  --cor-cinza-grafite: #000;
  --cor-laranja: #7a3800;
  --cor-laranja-texto: #6b3000;
  --cor-laranja-logo-texto: #6b3000;
  --cor-laranja-botao: #7a3800;
  --cor-laranja-hover: #5c2a00;
  --cor-laranja-50: #fff;
  --cor-laranja-100: #000;
  --cor-whatsapp-escuro: #05602f;
  --sombra-sm: none;
  --sombra-md: none;
  --sombra-lg: none;
}

html.alto-contraste a:not(.btn):not(.acesso-rapido__item):not(.convenio) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.alto-contraste .card,
html.alto-contraste .form-card,
html.alto-contraste .input,
html.alto-contraste .select,
html.alto-contraste .textarea,
html.alto-contraste .acesso-rapido,
html.alto-contraste .convenio,
html.alto-contraste .mapa {
  border: 2px solid #000;
}

html.alto-contraste .eyebrow {
  background: #fff;
  border-color: #000;
}

/* Seções escuras: preto puro e texto branco cheio (sem transparência) */
html.alto-contraste .topbar,
html.alto-contraste .site-footer,
html.alto-contraste .page-hero,
html.alto-contraste .secao-escura,
html.alto-contraste .card-cta,
html.alto-contraste .site-footer a,
html.alto-contraste .topbar__item,
html.alto-contraste .page-hero .text-lead,
html.alto-contraste .secao-escura .text-lead,
html.alto-contraste .breadcrumb,
html.alto-contraste .breadcrumb a,
html.alto-contraste .artigo-info,
html.alto-contraste .card-cta .card__text {
  color: #fff;
}

html.alto-contraste .page-hero .eyebrow,
html.alto-contraste .secao-escura .eyebrow,
html.alto-contraste .card-cta .card__icon {
  background: #000;
  border-color: #fff;
  color: #fff;
}

html.alto-contraste .media-foto--overlay::after { background: rgba(0, 0, 0, 0.82); }

html.alto-contraste :focus-visible { outline: 3px solid #000; outline-offset: 3px; }

html.alto-contraste .topbar :focus-visible,
html.alto-contraste .site-footer :focus-visible,
html.alto-contraste .page-hero :focus-visible,
html.alto-contraste .secao-escura :focus-visible { outline-color: #ffd400; }

/* ==========================================================================
   Barra superior: horário (só em telas largas)
   ========================================================================== */
.topbar__horario { display: none; }

@media (min-width: 992px) {
  .topbar__horario { display: inline-flex; }
}

/* ==========================================================================
   Cabeçalho — busca e "Agendar"
   O "Agendar" fica sempre visível (briefing, seção 6). Abaixo de 1360px é
   um botão só (leva ao Agende Fácil, com consulta e exame); acima, as duas
   ações direto no WhatsApp.
   ========================================================================== */
.site-header__busca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-sm);
  color: var(--cor-neutro-900);
}

.site-header__busca-btn:hover,
.site-header__busca-btn[aria-expanded="true"] {
  background-color: var(--cor-neutro-50);
}

.site-header__agendar-largo { display: none; }

@media (min-width: 1360px) {
  .site-header__agendar { display: none; }
  .site-header__agendar-largo { display: inline-flex; }
}

/* 6 itens no menu + busca + 2 botões: espaço menor entre os itens */
@media (min-width: 1200px) {
  .site-nav { gap: var(--espaco-4); }
}

@media (min-width: 1360px) {
  .site-nav { gap: var(--espaco-5); }
}

/* Celular: logo + "Agendar" + menu. A busca fica dentro do menu. */
@media (max-width: 575px) {
  .site-header__inner { gap: var(--espaco-3); }
  .site-header__busca-btn { display: none; }
}

/* Celulares pequenos (320–399px): logo menor e "Agendar" sem ícone */
@media (max-width: 399px) {
  .site-header__logo img { height: 38px; }
  .site-header__agendar .icon { display: none; }
}

.mobile-nav__busca .form-busca { flex-wrap: nowrap; }

.mobile-nav__busca .btn { padding-inline: var(--espaco-4); }

/* Atalhos: mais específico que o repeat(4) de home.css (carregado depois) */
@media (min-width: 1200px) {
  .acesso-rapido.acesso-rapido--5 { grid-template-columns: repeat(5, 1fr); }
  .acesso-rapido.acesso-rapido--6 { grid-template-columns: repeat(3, 1fr); }
}

.busca-painel {
  border-top: 1px solid var(--cor-neutro-200);
  padding-block: var(--espaco-4);
  background-color: var(--cor-branco);
}

.mobile-nav__telefone { border: 1px solid var(--cor-neutro-200); }

/* ==========================================================================
   Formulário de busca (cabeçalho, seções, busca e 404)
   ========================================================================== */
.form-busca {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  width: 100%;
  max-width: 640px;
}

.form-busca .campo-busca {
  flex: 1 1 220px;
  min-width: 0;
}

.busca-painel .form-busca { margin-inline: auto; }

/* Sugestões enquanto digita (assets/js/sugestoes.js) */
.form-busca { position: relative; }

.sugestoes {
  position: absolute;
  z-index: 40;
  top: calc(100% + var(--espaco-2));
  left: 0;
  right: 0;
  min-width: min(100%, 280px);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  margin: 0;
  padding: var(--espaco-2);
  list-style: none;
  text-align: left;
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-neutro-200);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
}

.sugestoes[hidden] { display: none; }

.sugestoes__opcao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--espaco-3);
  padding: var(--espaco-3);
  border-radius: var(--raio-md);
  color: var(--cor-texto-principal);
  cursor: pointer;
}

.sugestoes__opcao[aria-selected="true"] {
  background-color: var(--cor-laranja-50);
  outline: 2px solid var(--cor-laranja-texto);
  outline-offset: -2px;
}

.sugestoes__titulo { min-width: 0; overflow-wrap: break-word; }

.sugestoes__titulo mark {
  background: none;
  color: inherit;
  font-weight: var(--peso-bold);
}

.sugestoes__tipo {
  flex-shrink: 0;
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-secundario);
}

.form-busca--secao { max-width: 460px; }

.busca-pagina {
  margin-bottom: var(--espaco-8);
}

.pagina-404 .busca-pagina {
  display: flex;
  justify-content: center;
  margin-block: var(--espaco-6);
}

/* ==========================================================================
   Seções
   ========================================================================== */
.secao-rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-3);
  margin-top: var(--espaco-8);
}

.secao-servicos .secao-cabecalho-linha { margin-bottom: var(--espaco-8); }

/* ==========================================================================
   Atalhos da home: 5 ou 6 itens (o de "Resultado de exames" é opcional)
   ========================================================================== */
@media (min-width: 992px) {
  .acesso-rapido--6 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .acesso-rapido--5 { grid-template-columns: repeat(5, 1fr); }
  .acesso-rapido--6 { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Cards: título com link e ações (Saiba mais + Agendar)
   ========================================================================== */
.card__title-link { color: inherit; }

.card__title-link:hover {
  color: var(--cor-laranja-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.card__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  margin-top: auto;
  padding-top: var(--espaco-4);
}

.card__acoes .card__link { margin-top: 0; }

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

/* Categoria e tempo de leitura na mesma linha: sem a margem de baixo que
   .card__corpo .badge dá à etiqueta quando ela fica sozinha (components.css) */
.card__meta .badge { margin-bottom: 0; }

.grid-cards--2 {
  display: grid;
  gap: var(--gutter-grid);
}

@media (min-width: 768px) {
  .grid-cards--2 { grid-template-columns: repeat(2, 1fr); }
}

.grid-cards + .grid-cards,
.valores-titulo + .grid-cards { margin-top: var(--gutter-grid); }

.valores-titulo {
  margin-top: var(--espaco-9);
  margin-bottom: var(--espaco-5);
  text-align: center;
}

/* Convênios: lista com links (a home mostra só os destaques) */
ul.grid-convenios { padding: 0; }

a.convenio { color: inherit; }

a.convenio:hover .convenio__nome { color: var(--cor-laranja-texto); }

/* ==========================================================================
   Quem somos — missão, visão e valores resumidos (home)
   ========================================================================== */
.mvv {
  display: grid;
  gap: var(--espaco-4);
  margin-bottom: var(--espaco-6);
}

.mvv__item {
  padding-left: var(--espaco-4);
  border-left: 3px solid var(--cor-laranja);
}

.mvv dt {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-bold);
  color: var(--cor-neutro-900);
}

.mvv dd {
  margin: 0;
  color: var(--cor-texto-secundario);
}

/* Selos em fundo claro (os da home ficam sobre a seção escura) */
/* Selos (home e Quem somos). Ficava só em pages/home.css, que não carrega
   em Quem somos: lá os selos grudavam uns nos outros e no texto. */
.institucional__selos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-3);
  margin-block: var(--espaco-6);
  padding: 0;
  list-style: none;
}

@media (min-width: 576px) {
  .institucional__selos { grid-template-columns: repeat(2, 1fr); }
}

.institucional__selos--claro .selo {
  background-color: var(--cor-neutro-50);
  color: var(--cor-texto-principal);
}

/* ==========================================================================
   Como chegar + mapa (o mapa só carrega no clique)
   ========================================================================== */
.como-chegar {
  display: grid;
  gap: var(--espaco-8);
  align-items: center;
}

@media (min-width: 992px) {
  .como-chegar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--espaco-10);
  }
}

.como-chegar h2 { margin-top: var(--espaco-3); }

.como-chegar__lista { margin-block: var(--espaco-6); }

.como-chegar__lista strong { color: var(--cor-neutro-900); }

.como-chegar__lista a {
  color: var(--cor-laranja-texto);
  font-weight: var(--peso-semibold);
}

.como-chegar__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
}

.mapa { position: relative; }

.mapa__capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-3);
  padding: var(--espaco-6);
  text-align: center;
  background:
    linear-gradient(rgba(43, 42, 40, 0.72), rgba(43, 42, 40, 0.72)),
    repeating-linear-gradient(45deg, var(--cor-neutro-200) 0 2px, var(--cor-neutro-100) 2px 18px);
  color: var(--cor-branco);
}

.mapa__capa > .icon {
  width: 40px;
  height: 40px;
  color: var(--cor-laranja);
}

.mapa__texto { font-size: var(--texto-pequeno); }

.mapa.is-carregado .mapa__capa { display: none; }

/* ==========================================================================
   Páginas de serviço (especialidade, exame, procedimento, convênio)
   ========================================================================== */
.servico {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco-8);
  align-items: start;
}

@media (min-width: 992px) {
  .servico {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--espaco-10);
  }
  .servico__lateral {
    position: sticky;
    top: 110px;
  }
}

.servico__lateral > * + * { margin-top: var(--espaco-5); }

.servico__lateral .card-cta .btn { width: 100%; justify-content: center; }

.servico__lateral .card-cta .btn + .btn { margin-top: var(--espaco-3); }

.servico__texto > * + * { margin-top: var(--espaco-6); }

.servico__texto > h2 { font-size: var(--texto-h3); }

.servico__preparo {
  padding: var(--espaco-card);
  border: 1px solid var(--cor-laranja-100);
  border-radius: var(--raio-lg);
  background-color: var(--cor-laranja-50);
}

.servico__preparo h2 {
  margin-bottom: var(--espaco-4);
  font-size: var(--texto-h3);
}

.servico__preparo .lista-check { margin-bottom: var(--espaco-4); }

.servico__revisao {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-secundario);
}

.servico__revisao .icon { color: var(--cor-sucesso); }

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  margin-block: var(--espaco-5);
  padding: var(--espaco-4) var(--espaco-5);
  border-radius: var(--raio-md);
  background-color: var(--cor-branco);
  border: 1px solid var(--cor-neutro-200);
}

.aviso .icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cor-laranja);
}

.aviso strong { color: var(--cor-neutro-900); }

/* Título da caixa em linha própria, acima do texto */
.aviso__titulo { display: block; margin-bottom: var(--espaco-1); }

.nota--centro {
  justify-content: center;
  margin-top: var(--espaco-8);
  text-align: center;
}

/* Topo da página de um convênio: texto + logotipo */
.convenio-topo {
  display: grid;
  gap: var(--espaco-6);
  align-items: center;
}

@media (min-width: 768px) {
  .convenio-topo { grid-template-columns: minmax(0, 1fr) 240px; }
}

.convenio-topo__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-6);
  border-radius: var(--raio-lg);
  background-color: var(--cor-branco);
}

.convenio-topo__logo img { max-height: 120px; width: auto; }

/* Faixa de chamada clara (atendimento particular) */
.faixa-cta--clara {
  background: var(--cor-neutro-50);
  color: var(--cor-texto-principal);
}

.faixa-cta--clara h2 { color: var(--cor-neutro-900); }

/* O texto da faixa escura é branco translúcido; na versão clara, cinza de leitura */
.faixa-cta--clara p { color: var(--cor-texto-secundario); }

/* Profissionais numa especialidade */
.grid-profissionais {
  display: grid;
  gap: var(--gutter-grid);
}

@media (min-width: 768px) {
  .grid-profissionais { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .grid-profissionais { grid-template-columns: repeat(3, 1fr); }
}

.avatar--foto {
  object-fit: cover;
  padding: 0;
}

/* ==========================================================================
   Blog — artigo
   ========================================================================== */
/* Layout do artigo: components.css (.page-hero--artigo, .artigo-layout, .sumario…) */

/* Sem coluna definida, a grade do celular cresce até a largura natural
   da maior imagem do texto (1920px) e estoura a tela. */
.artigo-layout { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 992px) {
  .artigo-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* Cabeçalho do artigo centralizado sobre a capa (que ocupa a largura toda):
   preso à esquerda, sobrava um vazio grande à direita. No celular continua
   alinhado à esquerda, mais fácil de ler em tela estreita. */
.artigo-cabecalho h1 { text-wrap: balance; }

/* Palavra longa ("Otorrinolaringologia") em título não cabe em 320px com o
   texto ampliado: quebra só quando não couber, em vez de rolar a página. */
h1, h2, h3, h4 { overflow-wrap: break-word; }

@media (min-width: 768px) {
  .page-hero--artigo .artigo-cabecalho {
    max-width: 920px;
    margin-inline: auto;
    text-align: center;
  }
  .page-hero--artigo .breadcrumb ol,
  .page-hero--artigo .artigo-info { justify-content: center; }
  .page-hero--artigo .text-lead {
    max-width: 760px;
    margin-inline: auto;
    text-wrap: pretty;
  }
  /* Marca d'água da árvore e brilho laranja passam para a esquerda: à
     direita, ficavam colados no fim das linhas centralizadas */
  .page-hero--artigo .page-hero__marca { right: auto; left: -80px; bottom: -80px; }
  .page-hero--artigo::before { right: auto; left: -260px; }
}

/* Tablet: o padding do .page-hero (layout.css, carregado depois) anulava o
   espaço extra do artigo, e a capa encostava na linha de autor e data. */
@media (min-width: 768px) and (max-width: 991px) {
  .page-hero--artigo { padding-bottom: calc(var(--espaco-9) + var(--espaco-7)); }
}

/* Imagens, legendas e vídeos dentro do texto nunca passam da coluna.
   O WordPress grava a largura da imagem no [caption] (style="width: 1930px"),
   por isso o !important no max-width. */
.prosa img,
.prosa video,
.prosa iframe,
.prosa figure,
.prosa .wp-caption {
  max-width: 100% !important;
  height: auto;
}

.prosa iframe { aspect-ratio: 16 / 9; width: 100%; }

.prosa img { border-radius: var(--raio-md); }

.prosa figure,
.prosa .wp-caption { margin-inline: 0; }

.prosa figcaption,
.prosa .wp-caption-text {
  margin-top: var(--espaco-2);
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-secundario);
}

.prosa .aligncenter {
  display: block;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .prosa .alignleft { float: left; margin: var(--espaco-2) var(--espaco-5) var(--espaco-4) 0; max-width: 50% !important; }
  .prosa .alignright { float: right; margin: var(--espaco-2) 0 var(--espaco-4) var(--espaco-5); max-width: 50% !important; }
}

.prosa::after { content: ""; display: table; clear: both; }
.prosa .artigo-aviso {
  line-height: 1.6;
  color: var(--cor-texto-secundario);
}

.prosa .servico__revisao { line-height: 1.6; }

/* Botões do card de agendar da lateral ocupam a largura toda */
.artigo-lateral .card-cta .btn {
  width: 100%;
  justify-content: center;
}

.artigo-lateral .card-cta .btn + .btn { margin-top: var(--espaco-3); }

/* Documentos legais: texto mais compacto que o do blog, títulos numerados à vista */
.prosa--documento { font-size: var(--texto-corpo); }

.prosa--documento h2 { font-size: var(--texto-h4); margin-top: var(--espaco-8); }

.prosa--documento h3 { font-size: var(--texto-corpo); margin-top: var(--espaco-6); }

.prosa--documento table {
  width: 100%;
  border: 1px solid var(--cor-neutro-200);
}

.prosa--documento th,
.prosa--documento td {
  padding: var(--espaco-3);
  border-bottom: 1px solid var(--cor-neutro-200);
  text-align: left;
  vertical-align: top;
}

.prosa--documento th {
  background-color: var(--cor-neutro-50);
  color: var(--cor-neutro-900);
}

.documentos__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin-top: var(--espaco-3);
}

.documentos__lista a,
.documentos__lista span,
.documentos__cookies {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: 0;
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-principal);
}

.documentos__lista a:hover,
.documentos__cookies:hover {
  color: var(--cor-laranja-texto);
  text-decoration: underline;
}

.documentos__lista [aria-current="page"] {
  font-weight: var(--peso-semibold);
  color: var(--cor-laranja-texto);
}

.documentos__lista .icon { color: var(--cor-laranja); }

/* Badge da categoria é link no topo do artigo */
a.badge:hover { text-decoration: underline; }

/* Categorias do blog como links */
.chips--links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-6);
}

.chips--links .chip[aria-current="page"] {
  background-color: var(--cor-neutro-900);
  border-color: var(--cor-neutro-900);
  color: var(--cor-branco);
}

/* Paginação (the_posts_pagination) */
.paginacao { margin-top: var(--espaco-8); }

.paginacao .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-2);
}

.paginacao .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--espaco-3);
  border: 1px solid var(--cor-neutro-200);
  border-radius: var(--raio-full);
  background-color: var(--cor-branco);
  font-weight: var(--peso-semibold);
}

.paginacao .page-numbers.current {
  background-color: var(--cor-neutro-900);
  border-color: var(--cor-neutro-900);
  color: var(--cor-branco);
}

/* ==========================================================================
   Formulários (inc/formularios.php + assets/js/formularios.js)
   ========================================================================== */

/* Campo-isca contra robôs: fora da tela, sem sumir para os robôs */
.form-isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-card { position: relative; }

.form-card .field__erro {
  display: block;
  margin-top: var(--espaco-1);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-medium);
}

.form-card .opcao a {
  color: var(--cor-laranja-texto);
  font-weight: var(--peso-semibold);
  text-decoration: underline;
}

.form-captcha { margin-top: var(--espaco-5); min-height: 65px; } /* altura do widget: a página não "pula" quando ele aparece */

.form-captcha__aviso { margin-top: var(--espaco-2); }

.form-card__rodape .btn[disabled] { opacity: 0.7; cursor: progress; }

/* Aviso de resultado do envio (sucesso ou erro), acima do formulário */
.aviso--sucesso,
.aviso--erro {
  margin-top: 0;
  margin-bottom: var(--espaco-6);
  font-size: var(--texto-corpo);
}

.aviso--sucesso {
  border-color: var(--cor-sucesso);
  background-color: var(--cor-sucesso-50);
}

.aviso--sucesso .icon { color: var(--cor-sucesso); }

.aviso--erro {
  border-color: var(--cor-erro);
  background-color: var(--cor-erro-50);
}

.aviso--erro .icon { color: var(--cor-erro); }

.aviso--sucesso:focus,
.aviso--erro:focus { outline: 2px solid var(--cor-laranja); outline-offset: 2px; }

/* Passos dentro do cartão lateral (Agende fácil, Ouvidoria) */
.passos--compacto {
  margin-top: var(--espaco-4);
  padding: 0;
  border: 0;
  background: none;
}

.passos--compacto .passo { padding-bottom: var(--espaco-4); }

/* Na lateral, o texto do passo fica solto (sem a caixa dos passos da home) */
.passos--compacto .passo__conteudo {
  padding: var(--espaco-1) 0 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.passos--compacto .passo__numero {
  width: 32px;
  height: 32px;
  font-size: var(--texto-pequeno);
}

.grid-form__lateral .card__title { font-size: var(--texto-h4); }

.grid-form__lateral .card-cta .btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--espaco-3);
}

/* ==========================================================================
   Perguntas frequentes (page-faq.php): a pergunta fica dentro de um <h3>
   (leitores de tela navegam por títulos); o painel é irmão do <h3>.
   ========================================================================== */
.accordion__titulo {
  margin: 0;
  font: inherit;
  color: inherit;
}

.accordion__titulo:has(> [aria-expanded="true"]) + .accordion__panel { visibility: visible; }

/* Busca no topo (assets/js/faq.js) */
.faq-busca {
  max-width: 520px;
  margin-top: var(--espaco-6);
}

.faq-busca .campo-busca { max-width: none; }

.faq-busca .input { min-height: 52px; }

/* Lateral (temas + ajuda) e perguntas */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco-6);
}

.faq-layout__ajuda { display: grid; gap: var(--espaco-4); align-content: start; }

.faq-layout__ajuda--lateral { display: none; }

@media (min-width: 992px) {
  .faq-layout {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--espaco-8);
    align-items: start;
  }
  .faq-layout__lateral { display: grid; gap: var(--espaco-4); }
  .faq-layout__ajuda--lateral { display: grid; }
  .faq-layout__ajuda--fim { display: none; }
}

/* Lateral fixa só quando cabe inteira na tela */
@media (min-width: 992px) and (min-height: 760px) {
  .faq-layout__lateral {
    position: sticky;
    top: 112px;
  }
  html[data-texto="ampliado"] .faq-layout__lateral { position: static; }
}

.faq-temas__titulo {
  margin-bottom: var(--espaco-3);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-semibold);
  color: var(--cor-texto-secundario);
}

/* Celular e tablet: temas numa linha que rola para o lado */
.faq-temas__lista {
  display: flex;
  gap: var(--espaco-2);
  margin: 0;
  padding: 0 0 var(--espaco-2);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.faq-temas__lista li { flex-shrink: 0; }

.faq-temas__link {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: 44px;
  padding: var(--espaco-2) var(--espaco-4);
  border: 1.5px solid var(--cor-neutro-200);
  border-radius: var(--raio-full);
  background-color: var(--cor-branco);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-semibold);
  color: var(--cor-texto-principal);
  text-decoration: none;
  white-space: nowrap;
}

.faq-temas__link:hover { border-color: var(--cor-laranja); color: var(--cor-laranja-texto); }

.faq-temas__link[aria-current="true"] {
  border-color: var(--cor-neutro-900);
  background-color: var(--cor-neutro-900);
  color: var(--cor-branco);
}

.faq-temas__link[aria-current="true"] .chip__qtd { background-color: rgba(255, 255, 255, 0.16); color: var(--cor-branco); }

/* Desktop: lista vertical num cartão */
@media (min-width: 992px) {
  .faq-temas {
    padding: var(--espaco-5);
    border: 1px solid var(--cor-neutro-200);
    border-radius: var(--raio-lg);
    background-color: var(--cor-branco);
  }
  .faq-temas__lista {
    flex-direction: column;
    gap: var(--espaco-1);
    padding: 0;
    overflow: visible;
  }
  .faq-temas__link {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-color: transparent;
    border-radius: var(--raio-md);
    white-space: normal;
  }
  .faq-temas__link:hover { border-color: transparent; background-color: var(--cor-neutro-50); }
  .faq-temas__link[aria-current="true"] {
    border-color: transparent;
    background-color: var(--cor-laranja-50);
    color: var(--cor-laranja-texto);
  }
  .faq-temas__link[aria-current="true"] .chip__qtd { background-color: var(--cor-branco); color: var(--cor-laranja-texto); }
}

.faq__canais .card__title { margin-bottom: var(--espaco-3); }

/* Grupos e perguntas */
.faq__grupo { scroll-margin-top: 112px; }

.faq__grupo + .faq__grupo { margin-top: var(--espaco-9); }

.faq__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-1) var(--espaco-4);
  margin-bottom: var(--espaco-4);
}

.faq__tema {
  margin: 0;
  font-size: var(--texto-h3);
}

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

.faq__lista {
  display: grid;
  gap: var(--espaco-3);
}

.faq .accordion__item.faq__item {
  scroll-margin-top: 112px;
  border: 1px solid var(--cor-neutro-200);
  border-radius: var(--raio-lg);
  background-color: var(--cor-branco);
  transition: border-color var(--transicao-padrao), box-shadow var(--transicao-padrao);
}

.faq .faq__item:hover { border-color: var(--cor-neutro-400); }

.faq .faq__item:has(.accordion__trigger[aria-expanded="true"]) {
  border-color: var(--cor-laranja);
  box-shadow: var(--sombra-sm);
}

.faq .accordion__trigger {
  padding: var(--espaco-5);
  font-size: var(--texto-corpo);
  line-height: 1.45;
}

.faq__seta {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--raio-full);
  background-color: var(--cor-laranja-50);
}

.faq .accordion__trigger[aria-expanded="true"] .faq__seta { background-color: var(--cor-laranja); }
.faq .accordion__trigger[aria-expanded="true"] .faq__seta .icon { color: var(--cor-branco); }

.faq .accordion__panel__inner.prosa {
  max-width: none;
  padding: 0 var(--espaco-5) var(--espaco-5);
  font-size: var(--texto-corpo);
}

.faq__vazio {
  padding: var(--espaco-6);
  border: 1px dashed var(--cor-neutro-400);
  border-radius: var(--raio-lg);
  background-color: var(--cor-branco);
}

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

/* ==========================================================================
   Pacientes e visitantes (page-pacientes-e-visitantes.php)
   ========================================================================== */
.indice-pagina {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-8);
}

.secao-ancora { scroll-margin-top: 120px; }

.grid-cards--2 .card .lista-check { margin-top: var(--espaco-4); }

.direitos {
  display: grid;
  gap: var(--gutter-grid);
}

@media (min-width: 992px) {
  .direitos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.direitos .lista-check { margin-top: var(--espaco-4); }

/* ==========================================================================
   Busca
   ========================================================================== */
.resultados {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

.resultado {
  padding: var(--espaco-5);
  border: 1px solid var(--cor-neutro-200);
  border-radius: var(--raio-lg);
}

.resultado__titulo {
  margin-top: var(--espaco-2);
  font-size: var(--texto-h4);
}

.resultado__titulo a:hover {
  color: var(--cor-laranja-texto);
  text-decoration: underline;
}

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

.lista-vazia__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-h3);
  font-weight: var(--peso-bold);
  color: var(--cor-neutro-900);
}

/* ==========================================================================
   Rodapé — faixa de agendamento, responsável técnico e barra final
   (base em layout.css)
   ========================================================================== */
.site-footer { padding-top: var(--espaco-9); }

.site-footer__agendar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-5);
  margin-bottom: var(--espaco-9);
  padding: var(--espaco-6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--raio-xl);
  background-color: rgba(255, 255, 255, 0.04);
  font-size: var(--texto-corpo);
}

.site-footer__agendar-titulo {
  margin-bottom: var(--espaco-1);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-h3);
  font-weight: var(--peso-bold);
  line-height: 1.3;
  color: var(--cor-branco);
}

.site-footer__agendar a.sem-quebra {
  color: var(--cor-branco);
  font-weight: var(--peso-semibold);
}

.site-footer__agendar-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
}

.site-footer__rt {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  max-width: 340px;
  margin-top: var(--espaco-5);
  padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--raio-md);
  line-height: 1.5;
}

.site-footer__rt .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cor-amarelo);
}

.site-footer__rt strong {
  display: block;
  color: var(--cor-branco);
  font-weight: var(--peso-semibold);
}

.site-footer__mapa { display: block; }

/* Barra final numa linha: créditos à esquerda, links legais à direita */
.site-footer__bottom { margin-top: 0; }

.site-footer__creditos { display: block; }

.site-footer__legal { align-items: center; }

.site-footer__legal a,
.site-footer__cookies {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
}

.site-footer__legal a:hover,
.site-footer__cookies:hover {
  color: var(--cor-branco);
  text-decoration-color: currentColor;
}

.site-footer__cookies {
  padding: 0;
  font-size: inherit;
}

/* ==========================================================================
   Aviso de privacidade e cookies (LGPD) — template-parts/cookies.php
   Canto inferior esquerdo, sem bloquear o site; no celular, ocupa a largura.
   ========================================================================== */
.cookies {
  position: fixed;
  left: var(--espaco-4);
  right: var(--espaco-4);
  bottom: calc(var(--espaco-4) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  max-height: calc(100vh - var(--espaco-8));
  overflow-y: auto;
  padding: var(--espaco-5);
  border: 1px solid var(--cor-neutro-200);
  border-radius: var(--raio-xl);
  background-color: var(--cor-branco);
  box-shadow: var(--sombra-lg);
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-principal);
}

@media (min-width: 768px) {
  .cookies {
    left: var(--espaco-5);
    right: auto;
    bottom: var(--espaco-5);
    width: 460px;
    padding: var(--espaco-6);
  }
}

.cookies__topo {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-3);
}

.cookies__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--raio-full);
  background-color: var(--cor-laranja-50);
  color: var(--cor-laranja);
}

.cookies__titulo {
  font-size: var(--texto-h4);
}

.cookies__titulo:focus { outline: none; }

.cookies__titulo:focus-visible { outline: 2px solid var(--cor-laranja); }

.cookies__texto a,
.cookies__dpo a {
  color: var(--cor-laranja-texto);
  font-weight: var(--peso-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.cookies__opcoes {
  display: grid;
  gap: var(--espaco-3);
  margin: var(--espaco-4) 0 0;
  padding: 0;
  border: 0;
}

.cookies__opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-3);
  border-radius: var(--raio-md);
  background-color: var(--cor-neutro-50);
  cursor: pointer;
}

.cookies__opcao input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--cor-laranja-botao);
}

.cookies__opcao strong {
  display: block;
  color: var(--cor-neutro-900);
}

.cookies__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-3);
  margin-top: var(--espaco-5);
}

.cookies__acoes .btn { flex: 1 1 auto; justify-content: center; }

.cookies__personalizar {
  padding: var(--espaco-2) 0;
  font-weight: var(--peso-semibold);
  color: var(--cor-laranja-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Cartões de serviço e grade de 4 (Contato, Quem somos, Genoma+, 404)
   ========================================================================== */
/* Link longo ("Serviço de atendimento ao paciente") quebra em duas linhas:
   a seta acompanha o fim do texto em vez de ficar solta no canto. */
.card--servico > .card__link { display: block; }
.card--servico > .card__link .icon {
  display: inline-block;
  margin-left: var(--espaco-2);
  vertical-align: -3px;
}

/* Número de telefone em destaque dentro do texto do cartão */
.card__text strong { color: var(--cor-neutro-900); }

/* Entre o celular e o desktop largo, 4 cartões ficam 2 + 2 (em 3 colunas
   sobrava um cartão sozinho na segunda linha). */
@media (min-width: 640px) and (max-width: 1199px) {
  .grid-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}