/* =====================================================================
   Páginas de conteúdo: /blog, /blog/<artigo> e /area-tecnica (Fase 11, 2026-10-06)
   ---------------------------------------------------------------------
   Classes copiadas das referências Manuais/Analysis-v29/blog.html,
   blog-artigo-exemplo.html e area-tecnica.html (bloco "Páginas novas" do <style>
   principal, o <style> extra do artigo e o de área técnica). Mudanças em relação às
   referências:
   - @media (min-width/max-width: N) virou @container page (...), como no resto do site: o A+
     é zoom e só a container query o enxerga (Arquitetura_Frontend_Astro.md, seção 13);
   - estilos inline das referências viraram classes (final do arquivo);
   - .pac-callout segue o artigo (borda fina), não o blog.html (borda grossa à esquerda);
   - .pac-table segue a área técnica (listra também na 1ª coluna em destaque);
   - os cards de exame do artigo usam colunas de 200px só onde cabem (na referência, 3 fixas,
     que estouravam a tela no celular).
   Carregado pelo BaseLayout com page="content" (junto com exam.css e patient.css).
   ===================================================================== */

/* ---------- Artigo do blog ---------- */
.pac-post-head { max-width: 820px; }
.pac-post-head .exam-category-badge { margin-top: 16px; }
.pac-post-head .pac-lead { margin-bottom: 20px; }
.pac-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: var(--text-storm); margin-bottom: 28px; }
.pac-post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pac-cover { aspect-ratio: 16 / 7; height: auto; border-radius: 24px; }
.pac-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.pac-prose { max-width: 740px; }
.pac-prose h2 { font-size: 28px; font-weight: 400; line-height: 1.3; margin: 48px 0 16px; scroll-margin-top: 120px; }
.pac-prose p { font-size: 18px; line-height: 1.75; color: var(--text-ink); margin: 0 0 20px; }
.pac-prose ul { margin: 0 0 24px; padding: 0; list-style: none; }
.pac-prose li { position: relative; padding-left: 28px; margin-bottom: 12px; font-size: 18px; line-height: 1.65; color: var(--text-ink); }
.pac-prose li::before { content: ""; position: absolute; left: 6px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); }
.pac-lead { font-size: 18px; line-height: 1.7; color: var(--text-gray); }
.pac-table-wrap { overflow-x: auto; margin: 8px 0 20px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.pac-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.pac-table th { background: var(--brand); color: #ffffff; text-align: left; padding: 14px 16px; font-weight: 600; }
.pac-table td { padding: 14px 16px; border-top: 1px solid var(--border); color: var(--text-ink); vertical-align: top; }
.pac-table tbody tr:nth-child(even) > th, .pac-table tbody tr:nth-child(even) > td { background: var(--bg-light); }
.pac-callout { display: flex; gap: 14px; padding: 20px 22px; margin: 8px 0 24px; border-radius: var(--radius-md);
  background: var(--bg-highlight); border: 1px solid var(--border); color: var(--text-ink); line-height: 1.6; }
.pac-callout svg { flex-shrink: 0; margin-top: 2px; color: var(--brand); }
.pac-inline-cta { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; margin: 40px 0;
  padding: 28px; border-radius: 20px; background: var(--bg-white); border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.pac-inline-cta div > strong { display: block; font-size: 20px; font-weight: 600; color: var(--text-navy); margin-bottom: 4px; }
.pac-inline-cta div > span { color: var(--text-gray); }
.pac-disclaimer { font-size: 15px; color: var(--text-storm); font-style: italic; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 32px; }
.pac-aside { display: flex; flex-direction: column; gap: 20px; }
.pac-toc { background: var(--bg-white); border: 1px solid var(--border); border-radius: 20px; padding: 24px; }
.pac-toc-title { font-weight: 700; color: var(--text-navy); margin-bottom: 12px; }
.pac-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.pac-toc li { counter-increment: toc; margin-bottom: 4px; }
.pac-toc a { display: flex; gap: 10px; padding: 6px 0; color: var(--text-gray); text-decoration: none; line-height: 1.4; }
.pac-toc a::before { content: counter(toc) "."; color: var(--brand); font-weight: 700; min-width: 18px; }
.pac-toc a:hover, .pac-toc a.is-active { color: var(--brand); }
/* Sumário no celular e no tablet (14/10/2026, revisão do celular aprovada pelo usuário; na Política
   e nos artigos do blog): uma caixa recolhida "Nesta página · N seções" logo antes do texto, que
   abre com um toque (<details>, do próprio navegador: teclado e leitor de tela já funcionam). Antes
   o sumário só aparecia no fim, depois de todo o texto, onde não ajuda a navegar (igual às
   referências). Com duas colunas (computador) a caixa some e o sumário da coluna lateral fica como
   era; a 1440 px com A+ 150% a página já está em uma coluna e ganha a caixa, como o tablet. */
.pac-toc-celular { background: var(--bg-white); border: 1px solid var(--border); border-radius: 20px; padding: 0 24px; margin: 0 0 32px; }
.pac-toc-celular > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-weight: 700; color: var(--text-navy); }
.pac-toc-celular > summary::-webkit-details-marker { display: none; }
.pac-toc-celular-n { margin-left: auto; margin-right: 12px; font-weight: 400; color: var(--text-storm); }
.pac-toc-celular-sinal::after { content: "+"; color: var(--brand); font-size: 24px; font-weight: 400; }
.pac-toc-celular[open] .pac-toc-celular-sinal::after { content: "−"; }
.pac-toc-celular .pac-toc { border: 0; padding: 0; }
.pac-toc-celular ol { margin: 0 0 16px; }
.pac-aside .pac-toc { display: none; }
.pac-mt-sm { margin-top: 10px; }

/* Blocos do texto que a referência não tem (2026-10-06; visual aprovado pelo usuário nos
   prints, Arquitetura_Frontend_Astro.md seção 42). Só tokens e medidas que o site já usa. */
/* Lista numerada: número na cor da marca, como o sumário "Neste artigo". Antes saía o número
   do navegador e a bolinha das listas ("1. • texto"). */
.pac-prose ol { margin: 0 0 24px; padding: 0; list-style: none; counter-reset: pac-ol; }
.pac-prose ol > li { counter-increment: pac-ol; }
.pac-prose ol > li::before { content: counter(pac-ol) "."; left: 0; top: 0; width: auto; height: auto; border-radius: 0;
  background: none; color: var(--brand); font-weight: 700; }
/* "Em resumo": card como a chamada para exame; rótulo como o do quadro de autoria */
.pac-summary { margin: 0 0 32px; padding: 28px; border-radius: 20px; background: var(--bg-white); border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.pac-summary-title { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.pac-prose .pac-summary p { color: var(--text-navy); margin: 0 0 16px; }
.pac-prose .pac-summary p:last-child, .pac-prose .pac-summary ul { margin-bottom: 0; }
.pac-prose .pac-summary li:last-child { margin-bottom: 0; }
/* Imagem com legenda */
.pac-figure { margin: 32px 0; }
.pac-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.pac-figure figcaption { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--text-gray); }
.pac-figure-credit { color: var(--text-storm); }
/* Citação */
.pac-quote { margin: 36px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--brand-accent); }
.pac-quote blockquote { margin: 0; }
.pac-prose .pac-quote p { font-size: 22px; line-height: 1.5; color: var(--text-navy); margin: 0; }
.pac-quote figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--text-gray); }
.pac-quote figcaption a { color: var(--brand); }
/* Vídeo: o quadro de vídeo das páginas do paciente (patient.css), com a capa e o play;
   o YouTube só carrega no clique (script no artigo) */
.pac-video-block { margin: 32px 0; }
.pac-video-thumb { text-decoration: none; overflow: hidden; }
.pac-video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pac-video-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.3); transition: background .2s; }
.pac-video-thumb:hover::after { background: rgba(0,0,0,0.15); }
.pac-video-thumb .pac-video-play { position: relative; z-index: 1; }
.pac-video-block iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Fontes e referências (antes do aviso do fim do texto) */
.pac-sources { margin-top: 40px; }
.pac-prose .pac-sources-title { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--text-navy); margin: 0 0 12px; }
.pac-prose .pac-sources ol { margin: 0; padding-left: 22px; list-style: decimal; }
.pac-prose .pac-sources li { padding-left: 4px; font-size: 15px; line-height: 1.6; color: var(--text-gray); margin-bottom: 8px; }
.pac-prose .pac-sources li::before { content: none; }
.pac-prose .pac-sources li::marker { color: var(--brand); font-weight: 700; }
.pac-prose .pac-sources a { color: var(--brand); }

/* <style> extra do artigo: botões do card ao lado do texto */
.pac-article-actions { display: flex; flex-direction: column; gap: 16px; width: 100%; margin-top: 20px; }
.pac-article-actions .btn { width: 100%; margin: 0 !important; white-space: normal; min-height: 48px; height: auto; text-align: center; }

/* ---------- Lista do blog ---------- */
.pac-blog-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.pac-blog-grid .blog-tag { position: absolute; top: 16px; left: 16px; max-width: calc(100% - 32px); padding: 4px 16px; margin: 0 !important; }
.pac-blog-grid .blog-card { text-decoration: none; }
.pac-blog-grid .blog-card { display: flex; flex-direction: column; }
.pac-blog-grid .blog-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 24px; }
.pac-blog-grid .pac-card-meta { font-size: 14px; line-height: 1.5; margin-bottom: 0; }
.pac-blog-grid .blog-title { font-size: 18px; font-weight: 600; line-height: 1.3; margin-bottom: 0; }
.pac-blog-grid .blog-excerpt { font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.pac-blog-grid .blog-read-more { font-size: 14px; font-weight: 600; margin-top: auto; }
.pac-card-meta { color: var(--text-storm); margin-bottom: 10px; }
/* (27/10/2026) Com os 67 artigos (6 páginas), a linha passava da tela no celular: na página 1 a 375 px com o A+ em
   150%, e nas páginas 2 a 5 (mais números) já a 375 px com o texto normal (o número da página atual ou "Anterior"
   saía pela esquerda e "Próxima" pela direita); a referência também não quebra. Agora a linha pode ocupar a
   largura da página inteira (margem negativa igual dos dois lados: o centro não muda) e só quebra (flex-wrap)
   quando nem assim cabe. Assim, onde ela cabia na tela, nada muda, nem quando passava um pouco da coluna do
   texto. 100cqi = a largura do .page-root (o contêiner "page"), que já conta o zoom do A+. Arquitetura §55.28. */
.pac-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 64px; margin-bottom: 32px;
  margin-left: calc(50% - 50cqi); margin-right: calc(50% - 50cqi); }
.pac-pagination > a, .pac-pagination > span { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; min-width: 44px; height: 44px;
  padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-gray); text-decoration: none; background: var(--bg-white); }
.pac-pagination .is-current { background: var(--brand); border-color: var(--brand); color: #ffffff; }
.pac-pagination .pac-arrow { flex-shrink: 0; }

@container page (min-width: 768px) {
  .pac-lead { font-size: 20px; }
  .pac-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .pac-inline-cta { grid-template-columns: 1fr auto; padding: 32px; }
}
@container page (min-width: 1024px) {
  .pac-article { grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; }
  .pac-aside { position: sticky; top: 120px; align-self: start; }
  .pac-toc-celular { display: none; }
  .pac-aside .pac-toc { display: block; }
  .pac-blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Pílulas de tema e busca (fim do <style> de blog.html; #artigos = a seção da lista) */
.pac-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.pac-filter-center { justify-content: center; }
#artigos .pac-filter .city-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; background: #ffffff; border: 1px solid #D0DEEB; border-radius: 9999px; color: #475569; font-size: 14px; font-weight: 600; white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 2px 8px rgba(95,109,179,0.05); }
#artigos .pac-filter .city-pill svg { width: 16px; height: 16px; stroke: var(--brand); flex-shrink: 0; }
#artigos .pac-filter .city-pill:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(95,109,179,0.1); opacity: 1; }
#artigos .pac-filter .city-pill.active { background: var(--bg-highlight); border-color: var(--brand); color: var(--brand); }
@container page (min-width: 769px) and (max-width: 1024px) { #artigos .pac-filter .city-pill { font-size: 16px; height: auto; padding: 8px 18px; } }
@container page (max-width: 768px) { #artigos .pac-filter .city-pill { font-size: 12px; padding: 0 10px; height: 30px; gap: 4px; } #artigos .pac-filter .city-pill svg { width: 14px; height: 14px; } }
@container page (max-width: 480px) { #artigos .pac-filter .city-pill { font-size: 13px; padding: 0 12px; height: 36px; } }
#artigos .pac-blog-controls { padding: 24px; margin-bottom: 48px; background: #ffffff; border: none; border-radius: 16px; box-shadow: 0 4px 16px rgba(95, 109, 179, 0.16); }
#artigos .pac-filter { flex-direction: column; gap: 12px; margin-bottom: 64px; max-width: 100%; padding: 6px 4px; }
#artigos .pac-filter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#artigos .pac-filter .city-pill { flex: 0 0 auto; }
.pac-blog-search { display: flex; align-items: center; height: 52px; padding: 4px; margin-bottom: 0; background: #ffffff; border: 1px solid rgba(33, 63, 102, 0.25); border-radius: 9999px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.pac-blog-search:focus-within { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 3px; }
.pac-blog-search-input { display: flex; flex: 1; min-width: 0; height: 100%; position: relative; }
.pac-blog-search-input svg { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: var(--text-storm); pointer-events: none; }
#blogSearch { min-width: 0; width: 100%; height: 100%; padding: 0 24px 0 64px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: #242A33; }
#blogSearch::placeholder { color: var(--text-gray); opacity: 1; }
.pac-blog-search-submit { height: 100%; padding: 0 24px; flex-shrink: 0; border: 0; border-radius: 9999px; background: var(--brand); color: #ffffff; font-size: 16px; font-weight: 600; }
.pac-blog-search-submit:hover { background: var(--brand-dark); opacity: 1; }
@container page (max-width: 480px) { #artigos .pac-blog-controls { padding: 20px 16px; } .pac-blog-search-input svg { left: 12px; width: 20px; height: 20px; } #blogSearch { padding-left: 40px; padding-right: 8px; } .pac-blog-search-submit { padding: 0 14px; font-size: 14px; } }
#cta .pac-cta-box { margin-top: 0; }

/* ---------- Área técnica: conteúdo com coluna lateral ---------- */
.pac-profile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.pac-profile-main { min-width: 0; }
.pac-profile-main > section + section { margin-top: 64px; }
.pac-side { display: flex; flex-direction: column; gap: 16px; }
.pac-side .pac-card > .btn + .btn { margin-top: 10px; }
.pac-side .pac-mini { padding: 16px 18px; }
/* Tabela comparativa: rótulos de linha legíveis */
.pac-vs tbody th { background: var(--bg-white); color: var(--text-navy); font-weight: 600; text-align: left;
  padding: 14px 16px; border-top: 1px solid var(--border); vertical-align: top; }
/* A tabela com a 1ª coluna em destaque (a da Área Técnica) cabe na largura da tela e o texto quebra
   linha (14/10/2026, revisão do celular aprovada pelo usuário): com os 560 px mínimos do .pac-table
   ela era cortada no meio da palavra no celular e só rolava de lado, sem nenhum sinal. A 1024 px ou
   mais nada muda (a tabela já era mais larga que 560 px). A tabela comum (a do artigo do blog)
   continua com os 560 px e a rolagem. */
.pac-vs { min-width: 0; }
.pac-stack { display: flex; flex-direction: column; gap: 12px; }
@container page (min-width: 1024px) {
  .pac-profile { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; }
  .pac-profile-main { order: 1; }
  .pac-side { position: sticky; top: 110px; order: 2; }
}

/* =====================================================================
   Estilos inline das referências, viraram classes (mesmos valores)
   ===================================================================== */

/* Lista: topo (style="padding-bottom: 8px; text-align: left;"), seção dos artigos e do quadro final */
.pac-blog-hero { padding-bottom: 8px; text-align: left; }
.pac-blog-list { padding-top: 16px; padding-bottom: 32px; background: #ffffff; }
/* (2026-10-09, pedido do usuário) Tema, página e busca do blog levam a #artigos: a página nova
   abre direto na lista, sem a descida animada do exam.css (o mesmo "pulo" do /busca; ver
   catalog.css). Clique num link da mesma página continua suave (:focus-within); com "reduzir
   movimento", sem animação. Navegador sem :has() ignora a regra e fica como antes. A margem
   deixa a caixa de busca abaixo do topo, que é fixo (.header sticky): sem ela, a caixa ficava
   metade escondida. Com 94 px (+16 do padding), a caixa para a 110 px do alto da tela, como a
   primeira caixa da busca (.catalog-results, catalog.css), no celular e no computador. */
.pac-blog-list { scroll-margin-top: 94px; }
html:has(#artigos) { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
  html:has(#artigos):focus-within { scroll-behavior: smooth; }
}
.pac-blog-cta { padding-top: 16px; }
/* Card sem capa: o desenho da referência é o fundo colorido com o livro; com capa, a foto */
.pac-blog-grid .blog-img-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.pac-blog-grid .blog-img-pattern svg { width: 40px; height: 40px; }
.pac-blog-grid .blog-tag svg { flex-shrink: 0; }

/* Artigo: capa de verdade (na referência, só o quadro de marcação .pac-step-media.pac-cover) */
.pac-cover-img { display: block; width: 100%; object-fit: cover; margin-bottom: 0; }
/* Capa inteira (a "E", escolhida pelo usuário em 16/10 entre 5 páginas de teste; regra de quando
   vale em lib/blogCover.ts, 19/10): abaixo de 1024 px, a imagem inteira, até 560 px de altura,
   centralizada; a partir de 1024 px (as 2 colunas do artigo), faixa 16:7 com a imagem inteira no
   meio e o fundo desfocado da própria imagem (o mesmo arquivo, sem pedido a mais). Só cores da
   paleta. Sem a classe .pac-capa-inteira vale a regra acima (faixa 16:7 recortada, a "A"). */
.pac-cover-img.pac-capa-inteira { aspect-ratio: auto; width: auto; max-width: 100%; height: auto; max-height: 560px; margin-left: auto; margin-right: auto; object-fit: contain; }
@container page (min-width: 1024px) {
  .pac-capa-faixa { position: relative; overflow: hidden; aspect-ratio: 16 / 7; border-radius: 24px; background: var(--bg-light); }
  .pac-capa-faixa::before { content: ''; position: absolute; inset: -60px; background: var(--pac-capa) center / cover no-repeat; filter: blur(36px); transform: scale(1.15); opacity: 0.85; }
  .pac-capa-faixa > .pac-cover-img.pac-capa-inteira { position: relative; width: auto; height: 100%; max-height: none; border-radius: 0; box-shadow: var(--shadow-hover); }
}
/* Artigo: bloco "Cards de exames" (style inline da referência) */
.pac-exam-block { margin: 48px 0; padding: 32px; background: #f8fafd; border: 1px solid var(--border); border-radius: 20px; }
.pac-exam-block .section-eyebrow { font-size: 13px; margin-bottom: 4px; }
.pac-exam-block .section-title { margin-bottom: 24px; font-size: 24px; }
.pac-exam-block-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 12px; }
.pac-exam-block .exam-badge-pill { background: var(--bg-highlight); color: var(--brand); }
/* 200px por card como na referência, quantos couberem (3 no computador); abaixo de 768px, um por linha */
@container page (min-width: 768px) { .pac-exam-block-grid { grid-template-columns: repeat(auto-fill, 200px); } }
/* Artigo: quadro de autoria (section com style inline na referência) */
.pac-author-box { margin-top: 32px; margin-bottom: 0; display: flex; flex-direction: row; align-items: center; gap: 20px;
  background: var(--bg-white); padding: 32px; border-radius: 20px; border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.pac-author-ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px;
  background: #f0f4f8; color: var(--brand); flex-shrink: 0; }
.pac-author-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; }
.pac-prose .pac-author-name { font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--text-navy); margin: 0 0 4px; }
.pac-prose .pac-author-rt { font-size: 15px; color: var(--text-gray); margin: 0; }
.pac-author-box > div:last-child { min-width: 0; }
/* Tela estreita com A+ (ex.: 320px a 150%): ao lado do ícone sobravam ~30px para o texto, que
   estourava a tela (na referência também). O ícone passa para cima; a 375px sem A+, igual. */
@container page (max-width: 300px) { .pac-author-box { flex-direction: column; align-items: flex-start; padding: 24px; } }

/* Área técnica: faixa clara do topo e seção do conteúdo */
.pac-band-light { background: #f8fafd; display: flow-root; }
.pac-tecnica { background: #ffffff; }

/* "×" da busca do blog (Fase 15, 2026-10-08, decisão do usuário: o mesmo do catálogo;
   components/SearchClear.astro, botão em exam.css). O do navegador sai; o nosso aparece só com
   foco ou mouse e com texto, e o campo só reserva o espaço dele nessa hora. Com menos de 150 px
   de campo, não aparece. */
#blogSearch::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.pac-blog-search-input { container-type: inline-size; }
@container (min-width: 150px) {
  .pac-blog-search-input:is(:hover, :focus-within) #blogSearch:not(:placeholder-shown) { padding-right: 48px; }
  .pac-blog-search-input:is(:hover, :focus-within) #blogSearch:not(:placeholder-shown) ~ .search-clear { display: flex; }
}

/* =====================================================================
   Fase 16 (2026-10-13): hub de unidades (/unidades), Contato, Convênios e Política de
   Privacidade. Classes que as referências Manuais/Analysis-v29/{unidades,contato,convenios,
   politica-de-privacidade}.html têm e o site ainda não tinha (o resto já estava aqui e no
   patient.css). Mesmos valores; @media → @container page, como no resto do arquivo.
   ===================================================================== */
.pac-white { background: #ffffff; }

/* Link no meio do texto corrido (hoje só o e-mail do encarregado, na política): cor da marca e
   sublinhado, para ser reconhecido como link sem depender só da cor (WCAG 1.4.1). O CSS base tira
   os dois de todo link, e as referências não tinham link no texto. Um e-mail é uma "palavra" longa:
   no celular com A+ ele passava da tela, por isso pode quebrar em qualquer ponto. */
.pac-prose > p a, .pac-prose > ul > li a, .pac-prose > ol > li a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Duas colunas (topo da política, passos dos convênios) */
.pac-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.pac-two-center { align-items: center; }
@container page (min-width: 1024px) {
  .pac-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .pac-two-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .pac-article.pac-toc-left { grid-template-columns: 300px minmax(0, 1fr); }
  .pac-article.pac-toc-left .pac-aside { order: -1; }
}

/* Hub de unidades: lista com o mapa ao lado (no computador o mapa fica à direita e acompanha a
   rolagem; no celular e no tablet, acima da lista) */
.pac-locator { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pac-locator .units-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pac-map-box { position: relative; height: 300px; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: rgba(95,109,179,0.16) 0px 2px 12px 0px; }
.pac-map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pac-group-label { margin: 8px 0 4px; }
.pac-group-label.is-hidden { display: none; }
.pac-unit { display: flex; flex-direction: column; }
.pac-unit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 16px; }
.pac-unit-actions .btn { flex: 1 1 auto; justify-content: center; }
.pac-unit-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.unit-card.is-hidden { display: none; }
.unit-card.is-active { box-shadow: rgba(95,109,179,0.24) 0px 8px 24px 0px; }
.unit-name a { color: inherit; text-decoration: none; }
.unit-name a:hover { color: var(--brand); }
.pac-hub-before { padding-top: 16px; }
@container page (min-width: 1024px) {
  .pac-locator { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
  /* --pac-map-h: a mesma conta, feita pelo unidades.js descontando o zoom do A+ */
  .pac-map-box { position: sticky; top: 110px; height: var(--pac-map-h, calc(100vh - 150px)); min-height: 480px; order: 2; }
}

/* Mapa (nosso; na referência era o iframe do Google): quadro de espera até a pessoa mexer na
   página, o mapa em si, os pinos, o círculo dos pinos juntos e o balão. */
.pac-map-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--bg-light); color: var(--text-gray); font-size: 15px; font-weight: 600; }
.pac-map-ph-ico { display: flex; color: var(--brand); }
/* Duas classes: o CSS do MapLibre (que chega depois) põe position: relative em .maplibregl-map, e o
   quadro ficava com 0 px de altura. */
.pac-map-box .pac-map-canvas { position: absolute; inset: 0; }
.pac-pin { display: block; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.pac-pin[hidden] { display: none; }
.pac-pin svg { filter: drop-shadow(0 2px 3px rgba(24,43,56,.25)); }
.pac-pin:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 50%; }
.pac-pin-grupo { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 2px solid #ffffff;
  border-radius: 50%; background: var(--brand); color: #ffffff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 6px rgba(24,43,56,.3); }
.pac-pin-grupo:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
/* O balão fica acima dos pinos (ao fim do voo do "Ver no mapa" os pinos são refeitos e entravam por
   cima do texto do balão) e abaixo dos botões de aproximar (z-index 2 no CSS do MapLibre). */
.pac-map-box .maplibregl-popup { z-index: 1; }
.pac-map-box .maplibregl-popup-content { padding: 12px 32px 12px 14px; border-radius: 12px; box-shadow: 0 4px 16px rgba(24,43,56,.18); font-family: inherit; }
.pac-map-box .maplibregl-popup-close-button { width: 32px; height: 32px; font-size: 20px; color: var(--text-storm); }
.pac-map-pop { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.pac-map-pop strong { color: var(--text-navy); font-size: 15px; }
.pac-map-pop span { color: var(--text-storm); font-size: 13px; margin-bottom: 6px; }
.pac-map-pop a { color: var(--brand); font-weight: 600; font-size: 13px; text-decoration: none; padding: 2px 0; }
.pac-map-pop a:hover { text-decoration: underline; }
.pac-map-box .maplibregl-ctrl-attrib { font-size: 11px; }
/* Botões "+" e "−" com 44 × 44 px em tela de toque (14/10/2026, revisão do celular aprovada pelo
   usuário): os 29 px do MapLibre ficam abaixo do tamanho recomendado para o dedo. Com mouse, como
   antes. O balão desvia deles (unidades.js, encaixar). */
@media (pointer: coarse) { .pac-map-box .maplibregl-ctrl-group button { width: 44px; height: 44px; } }

/* Contato (/contato): estilos inline da referência contato.html viraram classes. Os cartões da
   coluna de canais somam a margem da referência ao gap do .pac-side (32 px entre eles, como lá). */
.pac-contact-band { padding-bottom: 24px; }
.pac-contact-band .pac-hero { padding-bottom: 0; }
.section-pad.pac-contact-topics { padding-top: 48px; padding-bottom: 64px; }
.pac-contact-topics .pac-side .section-header { margin-bottom: 0; }
.pac-contact-topics .pac-side .pac-card:not(:last-child) { margin-bottom: 16px; }
.pac-btn-block { width: 100%; justify-content: center; }
.pac-card-title.pac-card-title-sm { font-size: 15px; overflow-wrap: anywhere; }
.units-section.pac-units-contact { padding: 0 0 80px; background: #ffffff; }
.section-pad.pac-contact-faq { background: #f8fafd; padding-bottom: 80px; }
.pac-contact-faq .container { max-width: 800px; margin: 0 auto; }
.pac-contact-faq .section-header { text-align: center; }
/* Só a referência do Contato tem as perguntas menores (17 px, 20 px acima e abaixo); no celular
   vale a regra do exam.css (18 px, com !important), como lá. */
.pac-contact-faq .faq-btn { padding: 20px 0; font-size: 17px; }

/* Convênios (/convenios): estilos inline da referência convenios.html viraram classes. A foto ao
   lado dos passos desce 170 px e acompanha a rolagem, como lá. Os 170 px valem só com as duas
   colunas (a partir de 1024 px): no celular e no tablet a foto fica embaixo dos passos, e na
   referência os 170 px viravam um vão vazio de 202 px antes dela (desvio aprovado em 14/10). */
.pac-conv-sub { margin-bottom: 64px; }
.pac-conv-intro { margin-top: 12px; }
.section-pad.pac-conv-steps { background: #f8fafd; }
.pac-conv-photo { position: sticky; top: 100px; align-self: flex-start; }
@container page (min-width: 1024px) { .pac-conv-photo { margin-top: 170px; } }
.pac-conv-photo img { width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow); display: block; }
.pac-who-btn { margin-top: 16px; }
/* Cards "Sem convênio?": o desenho da referência (ícone de 48 px num quadro azul-claro, título de
   20 px). O .who-card do exam.css é o da página de exame (ícone de 40 px, título em negrito). */
.pac-conv-who .who-icon { width: 48px; height: 48px; background: #e8eefa; border-radius: 12px; margin-bottom: 20px; }
.pac-conv-who .who-title { font-size: 20px; font-weight: 400; line-height: 1.5; margin-bottom: 10px; }

/* Convênios: grade de logos. Sem o arquivo do logo, o nome do convênio no quadro de marcação
   (240 × 100, o mesmo da referência, que buscava a imagem num serviço de terceiros). Aqui é uma
   lista (<ul>), por isso sem marcador e sem recuo. */
.logos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0 0 48px; padding: 0; list-style: none; }
.logo-ph { background: #ffffff; border: 1px solid var(--border); border-radius: 12px; padding: 20px; display: flex; align-items: center; justify-content: center;
  box-shadow: rgba(29, 42, 52, 0.05) 0px 4px 16px 0px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; container-type: inline-size; }
.logo-ph:hover { transform: translateY(-4px); box-shadow: rgba(29, 42, 52, 0.10) 0px 8px 32px 0px; border-color: var(--brand); }
.logo-ph img { max-width: 100%; height: auto; opacity: 0.8; transition: opacity 0.2s; mix-blend-mode: multiply; }
/* Logos de proporções diferentes (20/10/2026, os convênios ganharam logo): todos no mesmo quadro de
   240 × 100 do nome, inteiros (contain), e os cards da grade ficam da mesma altura. Sem isto, com a
   altura automática, um logo quase quadrado (Cassi) ficava com ~120 px e um largo (GKN) com 50. */
.logo-ph img { width: 240px; aspect-ratio: 240 / 100; object-fit: contain; }
.logo-ph:hover img { opacity: 1; }
/* Legenda sob o logo (03/11/2026; ex.: SUS "Porto Alegre/São Leopoldo", "IPAG/ISSEG"): na faixa de 20 px de baixo do card (o padding), sem aumentar a altura dele. */
.logo-ph { position: relative; }
.logo-caption { position: absolute; left: 4px; right: 4px; bottom: 2px; font-size: clamp(9.5px, calc((100cqw - 8px) / 13.5), 12px); line-height: 16px; font-weight: 600; text-align: center; color: #445973; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
/* O texto imita a imagem de marcação da referência (placehold.co, 240 × 100, fundo #f8fafd, texto
   #445973 em negrito): a letra cresce até ~22% da largura do quadro e encolhe para o nome ocupar no
   máximo ~60% dela. --n = número de caracteres do nome (posto pela página); 105 / n ≈ 60 / (n ×
   0,57 em por letra maiúscula da Source Sans 3 em negrito). cqw = 1% da largura do .logo-ph.
   Diferenças de propósito: nunca abaixo de 12 px (no celular a imagem da referência deixava os
   nomes longos com ~8 px), e, se não couber, quebra a linha; sem a transparência de 80% que a
   referência põe na imagem (com ela o texto ficava com 4,25:1, abaixo dos 4,5:1 da WCAG AA nos nomes
   pequenos; sem ela, 6,9:1, a cor que a referência mostra ao passar o mouse). */
.logo-ph-name { display: flex; align-items: center; justify-content: center; width: 240px; max-width: 100%; aspect-ratio: 240 / 100;
  background: #f8fafd; color: #445973; font-size: max(12px, min(22cqw, calc(105cqw / var(--n, 8)))); font-weight: 600; line-height: 1.1;
  text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }
@container page (max-width: 1024px) { .logos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@container page (max-width: 768px) { .logos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { .logo-ph, .logo-ph img, .logo-ph-name { transition: none; } .logo-ph:hover { transform: none; } }
/* (21/10/2026) quadro que leva à página do convênio (desligado até o "sim"): o link é o próprio quadro */
.logos-grid > li:not(.logo-ph) { display: flex; }
.logos-grid > li > a.logo-ph { flex: 1; color: inherit; text-decoration: none; }

/* =====================================================================
   Fase 17 (2026-10-15): Área Técnica revisada (/area-tecnica), Gestão da Qualidade
   (/gestao-da-qualidade), Pesquisa de Satisfação (/pesquisa) e Doar Sangue (/doador-de-sangue).
   Referências: Manuais/Analysis-v29/area-tecnica-revisada.html, gestao-da-qualidade.html,
   pesquisa-de-satisfacao.html e doar-sangue.html. O CSS base delas é o mesmo das anteriores; daqui
   são só as 4 classes base que faltavam e o bloco próprio de cada página (o style com id
   "technical-page-layout", "quality-layout-adjustments", "satisfaction-layout-adjustments" e
   "donation-layout-adjustments"). Mesmos valores; @media virou @container page, como no resto do
   arquivo. A classe do main da referência (quality-page, satisfaction-page, donation-page) fica num
   div em volta do conteúdo.
   ===================================================================== */

/* ---------- Classes base que faltavam (CSS principal das referências) ---------- */
.pac-step-info .pac-card-ico { margin-bottom: 16px; }
/* .pac-media: o quadro de imagem das seções (O Laboratório, "Nossa história"; Fase 20, 19/10). */
.pac-media { height: 320px; }
/* .pac-narrow: coluna estreita centralizada (as perguntas da página de autor, 19/10). */
.pac-narrow { max-width: 820px; margin-left: auto; margin-right: auto; }
.pac-narrow .section-header { text-align: center; }
/* Topo sem a imagem (domínio real ainda sem foto/vídeo): uma coluna só, em vez da coluna da imagem vazia.
   Classe nossa (não das referências). Até 19/10 a regra só existia para Gestão e Doar Sangue (abaixo);
   Descontos, O Laboratório e Trabalhe Conosco (Fase 20) e a página de autor usam a classe e ficariam
   com a coluna vazia no domínio real (no de teste aparece a marcação, então lá nada muda). */
.hero-grid.pac-hero-single { grid-template-columns: minmax(0, 1fr); }
.pac-media-hero { height: 340px; }
.pac-rel { display: grid; grid-template-columns: 1fr; gap: 12px; }
@container page (min-width: 768px) { .pac-rel { grid-template-columns: repeat(2, 1fr); } }
@container page (min-width: 1024px) { .pac-rel { grid-template-columns: repeat(4, 1fr); } }
.who-grid.pac-who-2 { grid-template-columns: minmax(0, 1fr); }
@container page (min-width: 768px) { .who-grid.pac-who-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Foto de verdade no lugar do quadro de marcação (quando o Studio tiver uma). */
.pac-media-hero-img { display: block; width: 100%; height: 340px; object-fit: cover; border-radius: var(--radius-md); }
/* Imagem inteira em fundo branco (selo da Gestão da Qualidade, fotos dos equipamentos): a caixa fica
   do mesmo tamanho; a imagem não é cortada nem esticada. */
.pac-media-hero-img.pac-img-inteira, .pac-step-img.pac-img-inteira { object-fit: contain; background: var(--bg-white); }

/* ---------- Área Técnica revisada ---------- */
.technical-hero .hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; }
.technical-hero .pac-card { width: 100%; max-width: 380px; justify-self: end; }
.technical-hero .pac-card > .btn + .btn { margin-top: 10px; }
.technical-facts { padding: 48px 0; }
.technical-facts .quick-facts { margin: 0; }
.technical-equipment .pac-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.technical-equipment .pac-step { display: flex; flex-direction: column; align-items: stretch; padding: 32px 28px; gap: 24px; margin: 0; background: var(--bg-white); border: none; border-radius: 16px; box-shadow: rgba(95,109,179,0.16) 0px 2px 12px 0px; }
.technical-equipment .pac-step-media,
.technical-equipment .pac-step-img { order: -1; height: 180px; }
/* Fotos dos equipamentos com uma linha na cor da marca (03/11/2026, pedido do usuário): o mesmo espaço de 180 px de antes (os textos
   começam na mesma altura nos 3 cards); a foto opaca fica com a linha justa nela, a com transparência ganha uma moldura com 12 px de
   respiro. No modo noturno a --brand vira o ciano do alto contraste (high-contrast.css). */
.technical-equipment .equip-foto { order: -1; height: 180px; display: flex; align-items: center; justify-content: center; }
.technical-equipment .equip-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border: 2px solid var(--brand); border-radius: 12px; }
.technical-equipment .equip-img-moldura { padding: 12px; }
.technical-equipment .pac-step-title { font-size: 20px; font-weight: 400; }
.technical-equipment .pac-card-ico { display: none; }
.technical-equipment .pac-step-desc { line-height: 1.6; }
.technical-equipment { padding-bottom: 32px; }
.technical-equipment .section-header .sec-h2 { margin-bottom: 8px; }
.technical-equipment .section-header .body-text { margin-top: 0; margin-bottom: 0; }
.technical-contact { padding-top: 48px; }
.technical-contact .pac-cta-box { margin-top: 0; }
@container page (max-width: 1000px) {
  .technical-equipment .pac-steps { grid-template-columns: 1fr; }
  .technical-equipment .pac-step { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
}
@container page (max-width: 767px) {
  .technical-hero .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .technical-hero .pac-card { max-width: none; }
  .technical-equipment .pac-step { display: flex; }
}

/* ---------- Gestão da Qualidade ---------- */
.quality-hero .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.quality-hero .hero-grid > :last-child { width: 100%; max-width: 420px; justify-self: end; }
.quality-hero .quick-facts { margin-top: 48px; margin-bottom: 0; }
.quality-hero { padding-bottom: 80px; }
.quality-page .quality-seals, .quality-page .quality-journey { padding-bottom: 80px; }
.quality-journey .section-header { margin-bottom: 24px; }
.quality-more .pac-rel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
@container page (min-width: 900px) { .quality-more .pac-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quality-page .section-header .sec-h2 { margin-bottom: 8px; }
.quality-page .section-header .body-text { margin-top: 0; margin-bottom: 0; }
.quality-more { background: var(--bg-white); }
.quality-more .pac-mini { background: #f8fafd; }
.quality-page #certificados .pac-table tbody tr:nth-child(even) > th { background: var(--bg-light); }
.quality-more .pac-mini-ico { background: var(--bg-white); }
/* Etapas ("Qualidade em cada etapa"): título e texto numa caixa (.pac-step-text). No celular o .step
   é uma linha (exam.css): a caixa ocupa o resto e quebra o texto, sem passar da tela. */
.quality-journey .pac-step-text { min-width: 0; }
@container page (max-width: 767px) {
  .quality-journey .steps-grid { grid-template-columns: minmax(0, 1fr); }
  .quality-journey .pac-step-text { flex: 1 1 auto; overflow-wrap: anywhere; }
}
@container page (max-width: 900px) {
  .quality-hero .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .quality-hero .hero-grid > :last-child { max-width: 100%; justify-self: center; }
}

/* Cards (.who-card) da Pesquisa e de Doar Sangue: o desenho da referência (ícone de 48 px num quadro
   azul-claro, título de 20 px), os mesmos valores dos Convênios (.pac-conv-who, Fase 16). O .who-card
   do exam.css é o da página de exame (ícone de 40 px, título em negrito). Antes do bloco da Pesquisa,
   que troca o fundo do ícone dela (var(--border)). */
.satisfaction-page .who-icon, .donation-page .who-icon { width: 48px; height: 48px; background: #e8eefa; border-radius: 12px; margin-bottom: 20px; }
.satisfaction-page .who-title, .donation-page .who-title { font-size: 20px; font-weight: 400; line-height: 1.5; margin-bottom: 10px; }

/* ---------- Pesquisa de Satisfação ---------- */
.satisfaction-hero { text-align: left; padding-bottom: 72px; }
.satisfaction-hero .exam-sub { max-width: 720px; margin-left: 0; margin-right: 0; }
.satisfaction-hero .pac-ctas { justify-content: flex-start; }
.satisfaction-hero .pac-note { display: flex; align-items: center; gap: 8px; }
.satisfaction-hero .pac-note svg { flex-shrink: 0; }
.satisfaction-page .pac-tight { padding-top: 32px; padding-bottom: 32px; }
.satisfaction-page .pac-tight .quick-facts { margin-top: 0; margin-bottom: 0; }
.satisfaction-page .highlight-box { padding: 12px 16px !important; gap: 12px !important; align-items: center; justify-content: center; text-align: center; }
.satisfaction-page .highlight-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; margin: 0 !important; }
.satisfaction-page .highlight-box > div:last-child { line-height: 1.5; }
.satisfaction-page #google { background: var(--bg-white); }
.satisfaction-page #google .city-selector { margin-bottom: 0; }
.satisfaction-page .who-icon { background: var(--border); }
.satisfaction-page .satisfaction-feedback { padding-bottom: 112px; }
.satisfaction-page .satisfaction-feedback .highlight-box { margin-bottom: 0; }
.satisfaction-page #google .pac-card-title { margin-bottom: 24px; }
.satisfaction-page #google .city-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.satisfaction-page #google .city-pill { display: inline-flex; flex: 0 0 auto; width: auto; align-items: center; justify-content: center; gap: 8px; padding: 8px 20px; font-size: 14px; line-height: 20px; text-decoration: none; }
.satisfaction-page #google .city-pill svg { display: block; flex: 0 0 14px; width: 14px; height: 14px; margin: 0; }
.satisfaction-page #google .city-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@container page (min-width: 1024px) {
  .satisfaction-page .pac-two:has(#google) { align-items: stretch; }
  .satisfaction-page .pac-two > div:has(> #google) { display: flex; flex-direction: column; }
  .satisfaction-page #google { margin-top: 32px; flex: 1; padding-bottom: 40px; }
}

/* ---------- Doar Sangue ---------- */
.donation-page #onde-doar .unit-card { padding: 24px; gap: 8px; }
.donation-page #onde-doar .pac-unit-head { margin-bottom: 4px; }
.donation-page #onde-doar .unit-name { font-size: 18px; line-height: 1.35; margin: 0; }
.donation-page #onde-doar .pac-unit-addr { color: var(--text-storm); margin-bottom: 8px; }
.donation-page #onde-doar .unit-hours { line-height: 1.5; }
.donation-page #onde-doar .pac-unit-actions { padding-top: 16px; margin-top: auto; gap: 10px; }
.donation-page #onde-doar .pac-unit-actions .btn { flex: 1 1 auto; justify-content: center; }
.donation-table-label { display: inline-flex; align-items: center; gap: 8px; }
.donation-table-label svg { flex-shrink: 0; }
.donation-page .donation-stages-heading { margin-bottom: 24px; }
.donation-page .donation-stages .steps-col, .donation-page .donation-stages .prep-box { margin-top: 16px; }
.donation-page .section-header .donation-intro-title { margin-bottom: 20px; }
.donation-page .donation-box-title { font-size: 20px; font-weight: 400; line-height: 1.3; margin-bottom: 24px; }
.donation-page .pac-table tbody tr:nth-child(even) > th { background: var(--bg-light); }
.donation-page .donation-source { margin: 24px 0 0; font-size: 14px; color: var(--text-storm); }
.donation-page #onde-doar { padding-bottom: 32px; }
.donation-page .donation-final { padding-top: 32px; background: var(--bg-white); }
.donation-hero { padding-bottom: 80px; }
.donation-hero .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.donation-hero .hero-grid > :last-child { width: 100%; max-width: 420px; justify-self: end; }
.donation-hero .quick-facts { margin-top: 48px; margin-bottom: 0; }
.donation-page .section-header .sec-h2 { margin-bottom: 8px; }
.donation-page .section-header .body-text { margin-top: 0; margin-bottom: 0; }
.donation-page .pac-cta-box { margin-top: 0; }
.donation-page #onde-doar .units-grid { gap: 24px; margin-bottom: 0; }
@container page (min-width: 1024px) { .donation-page #onde-doar .units-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (max-width: 900px) {
  .donation-hero .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .donation-hero .hero-grid > :last-child { max-width: 100%; justify-self: center; }
}

/* Sem imagem no topo (domínio real, sem foto no Studio): uma coluna, sem a regra de "última coluna". */
.quality-hero .hero-grid.pac-hero-single, .donation-hero .hero-grid.pac-hero-single { grid-template-columns: minmax(0, 1fr); }
.quality-hero .hero-grid.pac-hero-single > :last-child, .donation-hero .hero-grid.pac-hero-single > :last-child { max-width: none; justify-self: stretch; }

/* Convênios, referência revisada (convenios-revisado.html, 15/10/2026): "Descontos e parcerias".
   Regras do <style id="convenios-beneficios-layout"> da referência, com a classe da seção no lugar do
   #id e o @media como @container (A+). O .service-block/.service-title/.service-tag/.service-desc
   base são os do exam.css (iguais aos da referência). Na referência, a foto de baixo usava
   "object-position: center 40%" por classe; aqui o ponto de foco vem do Studio (imageFocus). */
.pac-conv-benefits { background: var(--bg-white); padding-bottom: 96px; }
.pac-conv-benefits .section-header .sec-h2 { margin-bottom: 8px; }
.pac-conv-benefits .section-header .body-text { margin-bottom: 0; }
.pac-conv-benefits .pac-two { align-items: stretch; gap: 24px; }
.pac-conv-benefits .service-block { padding: 32px 28px; gap: 20px; }
.pac-conv-benefits .benefit-photo { width: 100%; height: 160px; border-radius: 16px; overflow: hidden; margin-bottom: 4px; }
.pac-conv-benefits .benefit-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pac-conv-benefits .service-title { margin: 0; line-height: 1.35; }
.pac-conv-benefits .benefit-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pac-conv-benefits .service-desc { margin: 0; flex: 1; }
.pac-conv-benefits .benefit-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: auto; }
.pac-conv-benefits .benefit-footer .body-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-storm); }
.pac-conv-benefits .benefit-footer .btn { margin: 0; }
@container page (max-width: 767px) {
  .pac-conv-benefits .benefit-footer .btn { width: 100%; }
}

/* Vídeo guardado na Sanity, sem YouTube (Fase 18, 15/10/2026): o mesmo quadro do vídeo do YouTube
   (.pac-video-frame 16:9); outro formato ajusta a altura pelo style do quadro. Vídeo em pé (ex.:
   Tricomoníase, 320 × 400) fica estreito e centralizado, para não ocupar duas telas no computador. */
.pac-video-block video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.pac-video-block.pac-video-portrait { max-width: 420px; margin-left: auto; margin-right: auto; }


/* ===== Fase 20 (19/10/2026): Coleta Domiciliar (/coletadomiciliar), Trabalhe Conosco
   (/trabalhe-conosco2), Sindicatos (/sindicato), Descontos (/descontos), O Laboratório
   (/o-laboratorio) e a Ouvidoria nova (/ouvidoria). Copiado dos blocos próprios de cada referência
   (coleta-domiciliar-revisado.html "collection-layout"; trabalhe-conosco-revisado.html
   "trabalhe-layout"; sindicatos.html "sindicatos-*"; descontos-e-parcerias.html "partner-card-logos" e
   "discounts-section-refinements"; quem-somos.html "about-*"; ouvidoria.html "ouvidoria-layout") e das
   regras-base que o site não tinha (.pac-form, .pac-input, .pac-security, .pac-price-row).
   - TODA regra começa pela classe da página (.collection-page, .careers-page...). Cada referência traz o
     CSS dela num <style> só dela, com seletores soltos como #faq e .pac-hero.pac-hero-top; aqui, num
     arquivo de todas as páginas, eles valeriam no site inteiro. Foi o erro do bloco provisório da
     Fase 19 (16/10, feito em 15 min): regras como #faq { padding-top: 32px } e
     .pac-cards .pac-card-title { font-weight: 400 } mudaram outras páginas até 19/10. Este bloco o
     substitui (Arquitetura §49).
   - Como no resto do site, @media virou @container page (o A+ é zoom).
   - Estilos inline das referências viraram classes (marcados "inline na referência").
   - Regras de elementos que não usamos ficaram de fora (marcado em cada página). ===== */

/* ---- Regras-base das referências (formulário, faixa de golpe, linha do desconto) ---- */
.careers-page .pac-input { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid #d0deeb; border-radius: var(--radius-sm); background: #f8fafd; color: var(--text-navy); font: inherit; font-size: 17px; }
.careers-page .pac-input:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; border-color: var(--brand); }
.careers-page .pac-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.careers-page .pac-form label { display: block; font-weight: 600; color: var(--text-navy); margin-bottom: 6px; }
.careers-page .pac-form .pac-input { width: 100%; }
.careers-page .pac-form .pac-full { grid-column: 1 / -1; }
.careers-page .pac-form .btn { justify-self: start; }
@container page (min-width: 768px) { .careers-page .pac-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.careers-page .security-warning.pac-security { margin-top: 0; }
.careers-page .security-warning.pac-security .security-text { flex: 1 1 auto; min-width: 0; white-space: normal; }
:is(.unions-page, .discounts-page) .pac-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 6px; }
/* Etapas com o título e o texto numa caixa (.pac-step-text; desvio, como na Gestão da Qualidade,
   .quality-journey, acima): no celular a caixa ocupa o resto da linha e quebra o texto. Sem isto, a
   320 px com A+ 150% as etapas da Coleta e dos Sindicatos passavam da tela (verify-layout, 19/10). */
:is(.collection-page, .unions-page, .ombudsman-page) .pac-step-text { min-width: 0; }
@container page (max-width: 767px) {
  :is(.collection-page, .unions-page, .ombudsman-page) .steps-grid { grid-template-columns: minmax(0, 1fr); }
  :is(.collection-page, .unions-page, .ombudsman-page) .pac-step-text { flex: 1 1 auto; overflow-wrap: anywhere; }
}

/* ---- Coleta Domiciliar (collection-layout) ---- */
.collection-page .collection-booking .sec-label { margin-bottom: 0; }
.collection-page .collection-booking .pac-ol { margin-bottom: 0; }
.collection-page .collection-booking .pac-ctas { margin-top: 12px; }
.collection-page .pac-hero-top .quick-facts { margin-bottom: 24px; }
.collection-page #como-funciona { padding-bottom: 112px; }
.collection-page #como-funciona .steps-grid { align-items: stretch; }
.collection-page #como-funciona .step-arrow { align-self: center; }
.collection-page #faq { padding-top: 32px; padding-bottom: 96px; }
.collection-page .pac-cards .pac-card-title { font-weight: 400; }
.collection-page .pac-hero.pac-hero-top { padding-top: 28px; }
.collection-page .collection-booking { gap: 16px; }
.collection-page .collection-booking .pac-ol { margin: 8px 0; gap: 20px; }
.collection-page .collection-booking .pac-ol li { align-items: center; }
.collection-page .collection-booking > .btn { margin-top: 8px; }
.collection-page #cobertura .section-header { margin-bottom: 24px; }
.collection-page #cobertura .pac-table { min-width: 0; table-layout: fixed; }
.collection-page #cobertura .pac-table th, .collection-page #cobertura .pac-table td { overflow-wrap: anywhere; }
.collection-page #cobertura .pac-table th:first-child { width: 35%; }
.collection-page .collection-exam-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0; list-style: none; }
.collection-page .collection-exam-grid .service-block { padding: 20px; gap: 12px; }
.collection-page .collection-exam-grid .service-icon-wrap { margin-bottom: 0; }
@container page (max-width: 480px) { .collection-page .collection-exam-grid { grid-template-columns: 1fr; } }
.collection-page #cobertura .pac-table tbody th, .collection-page #cobertura .pac-table tbody td { background: #ffffff; }
.collection-page #exames-domiciliares .collection-exam-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.collection-page #exames-domiciliares .collection-exam-grid .service-block { padding: 28px 24px; gap: 16px; }
.collection-page #exames-domiciliares .collection-exam-grid .service-title { line-height: 1.3; }
.collection-page #exames-domiciliares .highlight-box { margin-top: 64px; margin-bottom: 32px !important; align-items: flex-start; }
.collection-page #exames-domiciliares .highlight-icon { display: flex; }
.collection-page #atendimento-especializado { padding-top: 96px; padding-bottom: 112px; }
@container page (max-width: 1023px) { .collection-page #exames-domiciliares .collection-exam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (max-width: 480px) { .collection-page #exames-domiciliares .collection-exam-grid { grid-template-columns: 1fr; } }
.collection-page #cobertura .collection-cities { display: flex; flex-wrap: wrap; gap: 8px; }
.collection-page #cobertura .collection-cities .service-tag { padding: 8px 20px; border-radius: 9999px; font-size: 14px; font-weight: 600; border: 1.5px solid #D0DEEB; background: #ffffff; color: var(--text-storm); }
.collection-page #cobertura { padding-top: 96px; padding-bottom: 96px; }
/* fora: "#cobertura .city-selector" e ".city-pill" (a referência não usa esses botões na página) */

/* ---- Trabalhe Conosco (trabalhe-layout) ---- */
.careers-page #cadastro .careers-button-band { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; text-align: left; }
.careers-page #cadastro .careers-button-band .pac-caption { flex: 1; min-width: 0; white-space: normal; text-align: left; }
@container page (max-width: 767px) { .careers-page #cadastro .careers-button-band { flex-direction: column; align-items: stretch; gap: 16px; } }
/* Desvio (19/10): no celular a referência quer o botão esticado na faixa (coluna acima), mas o
   min-width: 280px (abaixo) vence; o botão saía da faixa cinza a 375 px e da tela a 320 px (a referência
   também). Sem o mínimo, ele ocupa a faixa, como a referência pretende. */
@container page (max-width: 767px) { .careers-page #cadastro .careers-button-band .btn { min-width: 0; } }
@container page (min-width: 768px) {
  .careers-page #cadastro .careers-submit { flex-direction: row; align-items: center; gap: 24px; text-align: left; }
  .careers-page #cadastro .careers-submit .pac-caption { flex: 1; min-width: 0; white-space: normal; font-size: 13px; }
  .careers-page #cadastro .careers-button-band { flex: 1; }
}
.careers-page section[aria-labelledby="t-proc"] { padding-bottom: 96px; }
.careers-page #cadastro .careers-form-card .section-header { margin-bottom: 8px; }
.careers-page .careers-advice { margin-top: 64px; margin-bottom: 0; }
/* E-mail do RH no lugar do formulário enquanto o envio pelo site não existe (03/11/2026) */
.careers-page .careers-nowrap { white-space: nowrap; }
.careers-page .careers-email > p { margin: 0 0 12px; color: var(--text-gray); line-height: 1.6; }
.careers-page .careers-email-list { list-style: disc; margin: 0 0 24px; padding-left: 20px; color: var(--text-navy); font-weight: 600; line-height: 1.8; }
@container page (min-width: 1024px) { .careers-page .careers-submit .pac-caption { white-space: nowrap; font-size: 12px; } }
.careers-page .careers-submit { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 16px; padding-bottom: 24px; text-align: center; }
.careers-page .careers-button-band { width: 100%; background: #f8fafd; border-radius: 8px; padding: 24px; display: flex; justify-content: center; }
.careers-page .careers-submit .pac-caption { margin: 0; max-width: 100%; line-height: 1.6; font-size: 13px; }
.careers-page .careers-submit .btn { flex-shrink: 0; min-width: 280px; max-width: 100%; }
.careers-page .careers-advice .highlight-icon { display: flex; padding-top: 2px; }
.careers-page .careers-advice .service-title { margin: 0 0 8px; }
.careers-page .careers-advice p { margin: 0; line-height: 1.6; }
.careers-page .careers-advice p + p { margin-top: 8px; }
.careers-page .careers-advice a { overflow-wrap: anywhere; }
.careers-page .careers-advice + section { margin-top: 64px; }
@container page (max-width: 767px) { .careers-page .careers-submit { flex-direction: column; align-items: stretch; gap: 16px; } }
.careers-page .careers-hero { display: flow-root; }
.careers-page .careers-registration { max-width: 900px; margin: 0 auto; }
.careers-page .careers-form-card .section-header { margin-bottom: 20px; }
.careers-page .careers-form-card .pac-form { width: 100%; }
.careers-page .pac-hero .pac-media-hero { width: 100%; max-width: 420px; justify-self: end; text-align: center; }
.careers-page #cadastro { padding-bottom: 64px; }
.careers-page #cadastro .section-header { margin-bottom: 32px; }
.careers-page #cadastro .pac-form input[type="file"] { padding: 12px 16px; height: auto; }
@container page (max-width: 767px) { .careers-page .pac-hero .pac-media-hero { max-width: none; } }
@container page (min-width: 768px) {
  .careers-page #cadastro .careers-button-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; padding: 24px 0; }
  .careers-page #cadastro .careers-button-band .pac-caption { width: 100%; max-width: none; box-sizing: border-box; padding-left: 24px; }
  .careers-page #cadastro .careers-button-band .btn { justify-self: end; margin-right: 24px; width: 300px; max-width: calc(100% - 24px); min-width: 0; }
}
/* Nosso (a referência não tem): o aviso de que o envio ainda não está ativo (formulário sem destino). */
.careers-page .careers-notice-msg { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-navy); }
/* fora: ".careers-notice", "#cadastro .pac-side" e ".pac-hero-top .quick-facts" (sem esses elementos na página) */

/* ---- Sindicatos (sindicatos-table-layout, sindicatos-steps-layout, sindicatos-partners-spacing) ---- */
.unions-page #lista .pac-table th:last-child, .unions-page #lista .pac-table td:last-child { width: 200px; min-width: 200px; white-space: nowrap; }
.unions-page #pacSindLista tr:nth-child(odd) > th, .unions-page #pacSindLista tr:nth-child(odd) > td { background: var(--bg-white); }
.unions-page #pacSindLista tr:nth-child(even) > th, .unions-page #pacSindLista tr:nth-child(even) > td { background: var(--bg-light); }
.unions-page #como-usar { padding-bottom: 96px; }
.unions-page #como-usar .steps-grid { align-items: stretch; }
.unions-page #como-usar .step-arrow { align-self: center; }
@container page (max-width: 767px) { .unions-page #como-usar .steps-grid { grid-auto-rows: 1fr; } }
.unions-page #outras-parcerias { padding-top: 96px; padding-bottom: 96px; }
.unions-page #outras-parcerias .service-title { margin-bottom: 12px; }
.unions-page #outras-parcerias .pac-stack > div + div { padding-top: 16px; }
.unions-page #lista { padding-bottom: 96px; }

/* ---- Descontos (partner-card-logos, discounts-section-refinements) ---- */
.discounts-page [data-parcerias] .service-title { font-size: 26px; }
.discounts-page [data-parcerias] .pac-ol .partner-no-request { font-size: 13px; align-items: center; gap: 8px; }
.discounts-page [data-parcerias] .pac-ol .partner-no-request .pac-li-ico { width: 22px; height: 22px; }
.discounts-page [data-parcerias] .partner-no-request .pac-li-ico svg { width: 12px; height: 12px; }
.discounts-page [data-parcerias] .service-block { padding: 28px; gap: 8px; }
.discounts-page [data-parcerias] .sec-label { margin-bottom: 6px; }
.discounts-page [data-parcerias] .pac-price-row { margin: 4px 0 0; align-items: center; }
.discounts-page [data-parcerias] .buy-price { margin-bottom: 0; }
.discounts-page [data-parcerias] .body-text { margin-bottom: 0; }
.discounts-page [data-parcerias] .pac-ol { margin: 4px 0 0; gap: 8px; }
.discounts-page [data-parcerias] .partner-card-heading { display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: start; gap: 12px; }
.discounts-page [data-parcerias] .partner-logo-placeholder { display: flex; align-items: center; justify-content: center; width: 72px; height: 52px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-light); color: var(--text-gray); font-size: 12px; font-weight: 400; }
.discounts-page #outras-opcoes { padding-top: 32px; padding-bottom: 96px; }
.discounts-page .discounts-hero { display: flow-root; }
.discounts-page #outras-opcoes .pac-card .sec-label { margin-bottom: 12px; }
.discounts-page #outras-opcoes .pac-card .pac-ctas { margin-top: auto; }
/* inline na referência: o quadro da imagem do topo e o espaçamento das perguntas */
.discounts-page .discounts-hero-ph { width: 100%; aspect-ratio: 1000 / 747; border-radius: 16px; background: var(--border); color: var(--text-gray); display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-size: 14px; }
.discounts-page .section-pad.discounts-faq { padding-top: 32px; padding-bottom: 96px; }
/* nossos: a imagem do topo, o logo de verdade no quadro do logo e o card sem logo (endereço oficial) */
.discounts-page .discounts-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 747; object-fit: cover; border-radius: 16px; }
.discounts-page [data-parcerias] .partner-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.discounts-page [data-parcerias] .partner-card-heading-solo { grid-template-columns: minmax(0, 1fr); }
/* (21/10/2026) card que leva à página do parceiro (desligado até o "sim"): o mesmo desenho do card */
.discounts-page [data-parcerias] a.partner-card-link { color: inherit; text-decoration: none; }

/* ---- O Laboratório (about-layout, about-added-sections, about-quality-summary) ---- */
.about-page .about-hero { padding-top: 28px; }
.about-page #proposito, .about-page #tecnologia { padding-bottom: 96px; }
.about-page #proposito .pac-card-title, .about-page #tecnologia .pac-card-title { font-weight: 400; }
.about-page #proposito .pac-card-desc, .about-page #tecnologia .pac-card-desc { font-size: 16px; line-height: 1.6; margin-bottom: 0; }
@container page (min-width: 1024px) {
  .about-page .about-hero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .about-page .about-hero .hero-grid > div:first-child { padding-right: 28px; }
}
.about-page #na-midia { padding-bottom: 96px; }
:is(.about-page, .author-page) .about-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
:is(.about-page, .author-page) .about-media-card { min-height: 112px; align-items: center; justify-content: center; text-align: center; }
@container page (max-width: 767px) { :is(.about-page, .author-page) .about-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@container page (max-width: 480px) { :is(.about-page, .author-page) .about-media-grid { grid-template-columns: 1fr; } }
:is(.about-page, .author-page) .about-media-logo { width: 100%; max-width: 200px; height: 80px; display: flex; align-items: center; justify-content: center; background: #f8fafd; border: 1px solid var(--border); border-radius: 8px; color: var(--text-storm); font-size: 14px; }
.about-page #historia, .about-page #diferenciais { padding-bottom: 96px; }
.about-page #historia .two-col { align-items: center; }
.about-page #historia .section-title { margin-bottom: 24px; }
.about-page #historia .pac-step-media { text-align: center; }
.about-page #diferenciais .pac-card-title { font-weight: 400; }
.about-page #diferenciais .pac-card-desc { font-size: 16px; line-height: 1.6; }
.about-page #historia .about-purpose { margin-top: 24px; padding-bottom: 0; }
.about-page #historia .about-purpose .section-title { margin-bottom: 8px; }
.about-page .about-hero { padding-bottom: 120px; }
.about-page #historia { padding-top: 80px; }
.about-page #historia, .about-page #onde-estamos { scroll-margin-top: 140px; }
.about-page #qualidade-tecnologia { padding-top: 80px; padding-bottom: 112px; }
.about-page #qualidade-tecnologia .pac-card { padding: 32px; }
.about-page #qualidade-tecnologia .pac-card-title { font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0 0 6px; }
.about-page #qualidade-tecnologia .pac-card-desc { font-size: 15px; margin: 0 0 20px; }
.about-page #qualidade-tecnologia .service-tags { margin-bottom: 20px; }
.about-page #qualidade-tecnologia .pac-ctas { margin-top: auto; }
/* inline na referência: o quadro do vídeo e o espaçamento das perguntas */
.about-page .about-video-ph { background: var(--border); color: var(--brand); flex-direction: column; gap: 12px; padding: 24px; text-align: center; }
.about-page .section-pad.about-faq { padding-top: 32px; padding-bottom: 96px; }
/* nossos: "Onde estamos" é a seção de unidades da Home (components/UnitsSection.astro), num fundo
   branco como na referência; a imagem da história e os logos de verdade da mídia */
.about-page .units-section.about-units { background: #ffffff; padding-bottom: 80px; }
.about-page .about-history-img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
/* (26/10) Sem a imagem da história (no domínio real, até a foto de verdade chegar), o texto ficava
   sozinho no .two-col e ocupava a largura toda (~170 caracteres por linha a 1440 px). Fica na largura
   do texto dos artigos (.pac-prose). Com a imagem, nada muda. */
.about-page .about-history-text:only-child { max-width: 740px; }
:is(.about-page, .author-page) .about-media-img { display: block; max-width: 200px; max-height: 80px; width: auto; height: auto; object-fit: contain; }
/* fora: ".about-hero-image", ".about-hero .quick-facts", "#tecnologia .pac-cta-row" e
   ".about-equipment-photo" (sem esses elementos), e o desenho dos cards de "#onde-estamos" e o
   ".pac-unit-status" (a seção usa os cards da Home; a regra "#onde-estamos .unit-card { display: flex }"
   mostraria as unidades da Região Metropolitana junto com as de Porto Alegre, desfazendo as abas). */

/* ---- Ouvidoria (ouvidoria-layout) ---- */
.ombudsman-page .ouvidoria-privacy { padding: 14px 24px; display: flex; justify-content: center; align-items: center; gap: 12px; text-align: center; }
.ombudsman-page .ouvidoria-privacy .highlight-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ombudsman-page .ouvidoria-contact-heading { margin-bottom: 12px; }
.ombudsman-page .ouvidoria-hero { display: flow-root; background: var(--bg-white); }
.ombudsman-page .ouvidoria-contact { min-width: 0; }
.ombudsman-page .ouvidoria-contact > .pac-link { overflow-wrap: anywhere; font-size: 16px; }
.ombudsman-page .ouvidoria-contact-heading { text-align: left; }
.ombudsman-page .ouvidoria-contact-heading .sec-label { margin-bottom: 8px; }
.ombudsman-page .ouvidoria-contact-heading .service-title { margin: 0; line-height: 1.3; }
.ombudsman-page .ouvidoria-contact .pac-ol { margin-bottom: 0; }
.ombudsman-page #como-funciona { padding-bottom: 96px; }
.ombudsman-page #como-funciona .steps-grid { align-items: stretch; }
.ombudsman-page #como-funciona .step-arrow { align-self: center; }
.ombudsman-page #como-funciona .step-desc { overflow-wrap: anywhere; }
.ombudsman-page #faq { padding-bottom: 96px; }
/* inline na referência: o e-mail que quebra em qualquer ponto */
.ombudsman-page .ouvidoria-email { min-width: 0; overflow-wrap: anywhere; }
/* fora: ".prep-box > .service-title" (sem esse elemento) */

/* ===== Página de autor do blog (/blog/autor/<endereço>, 19/10/2026). Referência:
   Manuais/Analysis-v29/autor-blog-v2.html, blocos "author-layout", "author-media-layout",
   "author-biography-layout", "author-education-layout" e "author-v2-layout". Toda regra presa à classe
   da página (.author-page), a lição da Fase 19 (Arquitetura §49). Só ficou a regra que vale no fim: a
   referência repete propriedades (ex.: três regras para as competências; a última, mais específica,
   é a que aparece). Fora: #artigos, #politica-editorial, #resumo-autor, #credenciais e .author-credentials
   (apontam para seções que não estão no HTML da própria referência). Os cards dos artigos usam as
   regras do blog (.pac-blog-grid, acima), iguais às do bloco "author-v2-layout"; "Na mídia" usa as de
   O Laboratório (:is(.about-page, .author-page), acima). ===== */
.author-page .author-hero-band { display: flow-root; } /* inline na referência */
.author-page .author-hero { padding-top: 28px; padding-bottom: 96px; }
.author-page .author-hero .service-tags { margin-top: 16px; margin-bottom: 24px; }
.author-page .author-photo { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; justify-self: center; text-align: center; border-radius: 50%; overflow: hidden; padding: 32px; }
/* nossa: a foto de verdade (quando o Studio tiver uma), no mesmo círculo da marcação */
.author-page .author-photo-img { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; justify-self: center; border-radius: 50%; object-fit: cover; }
.author-page #sobre-autor { padding-top: 96px; padding-bottom: 96px; }
.author-page #sobre-autor .section-header { margin-bottom: 24px; }
.author-page .author-credentials-card .pac-card-title { font-weight: 400; margin-bottom: 20px; }
.author-page .author-credentials-card .pac-ol { margin: 0; gap: 20px; }
.author-page .author-credentials-card .pac-ol li { align-items: flex-start; }
.author-page .author-credentials-card .author-education { margin-top: 24px; margin-bottom: 24px; gap: 24px; }
.author-page .author-education strong { font-size: 16px; font-weight: 600; color: var(--text-navy); }
.author-page .author-education p { margin-top: 4px; margin-bottom: 4px; }
.author-page .author-registration { margin-top: 16px; margin-bottom: 0; }
.author-page .author-expertise { margin-top: 48px; }
.author-page .author-expertise .author-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.author-page .author-expertise .author-topics .service-tag { padding: 8px 20px; border-radius: 9999px; font-size: 14px; font-weight: 600; border: 1.5px solid #D0DEEB; background: #ffffff; color: var(--text-storm); }
.author-page #na-midia { padding-bottom: 96px; scroll-margin-top: 140px; }
.author-page #conteudos { padding-bottom: 96px; }
.author-page .author-articles-ctas { justify-content: center; margin-top: 40px; } /* inline na referência */
.author-page #faq { padding-bottom: 96px; }

/* ===== Convênio ou parceiro (2026-10-21): /convenios/<endereço> e /descontos/<endereço>
   (components/PartnerPage.astro). Referência: Manuais/Analysis-v29/convenio-interna-unimed.html, blocos
   "unimed-layout-review", "unimed-content-layout", "unimed-design-system-review",
   "unimed-requested-layout", "unimed-catalogue-refinement" e "unimed-section-spacing" + os estilos inline
   dos cards de categoria. Ficou só a regra que vale no fim (a referência repete propriedades: o
   padding-bottom do topo é 48, depois 80; o fundo do ícone dos check-ups é #e8f5ee, depois #f8fafd).
   .unimed-page → .partner-page; "main > .section-pad" → ".partner-page > .section-pad" (as seções são
   filhas do invólucro); #unimed-hero → #partner-hero; .unimed-logo → .partner-logo-ph (quadro de
   marcação); .unimed-unit-* → .partner-unit-*; .unimed-*-photo → .partner-*-photo. Fora: as regras sem
   elemento no HTML da referência (.quick-facts, .pac-caption, .city-selector, .unimed-glossary,
   .pac-link, .pac-mt-lg, "#como-usar .pac-two/.prep-box/.highlight-box"). Nossas (sem par na
   referência, que só tem a marcação): .partner-logo (o logo de verdade, no mesmo quadro, inteiro) e o
   ponto do "Aberto/Fechado" como ::before (o unit-status.js troca o texto do elemento inteiro).
   O #d1fae5 do "Aberto" é da referência (só nesta página). ===== */
.partner-page #partner-hero { padding-top: 32px; padding-bottom: 80px; }
.partner-page #partner-hero .hero-grid { align-items: center; }
.partner-page #partner-hero .pac-ctas { margin-top: 32px; }
.partner-page #partner-hero .partner-logo-ph { width: 100%; max-width: 360px; height: 220px; justify-self: center; }
.partner-page #partner-hero .partner-logo { width: 100%; max-width: 360px; height: 220px; justify-self: center; display: flex; align-items: center; justify-content: center; padding: 32px; background: #fff; border-radius: 16px; box-shadow: rgba(95,109,179,.16) 0 2px 12px; }
.partner-page #partner-hero .partner-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-page > .section-pad { padding-top: 72px; padding-bottom: 80px; scroll-margin-top: 120px; }
.partner-page > #diferenca, .partner-page > #exames, .partner-page > #antes-da-visita, .partner-page > #unidades, .partner-page > #faq { padding-bottom: 104px; }
.partner-page > #check-up, .partner-page > #como-usar, .partner-page > #coleta-domiciliar, .partner-page > #outras-parcerias { padding-top: 96px; padding-bottom: 104px; }
.partner-page .section-header .body-text { max-width: 820px; margin-top: 16px; }
.partner-page #diferenca .pac-two { gap: 32px; align-items: stretch; }
.partner-page #diferenca .service-block { height: 100%; }
.partner-page #diferenca .pac-table-wrap { margin: 0; }
.partner-page #diferenca .pac-table tbody th, .partner-page #diferenca .pac-table tbody td { background: #fff; }
.partner-page #exames .exam-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.partner-page #exames .exam-cat-card { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; background: rgba(255, 255, 255, 1); border: none; border-radius: 16px; box-shadow: rgba(95,109,179,0.16) 0px 2px 12px 0px; text-decoration: none; color: var(--text-ink); transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; }
.partner-page #exames .exam-cat-card:hover { transform: translateY(-4px); box-shadow: rgba(95,109,179,0.24) 0px 8px 24px 0px; }
.partner-page #exames .exam-cat-img { height: 130px; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.partner-page #exames .exam-cat-img > img { width: 100%; height: auto; display: block; transform: translateZ(0); backface-visibility: hidden; }
.partner-page #exames .exam-cat-img--icon { background: var(--bg-highlight); color: var(--brand); } /* categoria sem imagem (CategoryCard), como na Home */
.partner-page #exames .exam-cat-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.partner-page #exames .exam-cat-name { font-size: 16px; font-weight: 600; color: var(--text-navy); line-height: 1.2; }
.partner-page #exames .exam-cat-count { font-size: 14px; color: var(--text-storm); font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; margin: 4px 0; }
.partner-page #exames .exam-cat-arrow { margin-top: auto; color: var(--brand); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.partner-page #check-up .pac-two { align-items: center; }
.partner-page #check-up .pac-stack { gap: 16px; }
.partner-page #check-up .pac-mini { background: #fff; }
.partner-page #check-up .pac-mini-ico { background: #f8fafd; }
.partner-page #como-usar .section-header { text-align: center; }
.partner-page #como-usar .steps-grid { align-items: stretch; }
.partner-page #como-usar .step { height: 100%; }
.partner-page #antes-da-visita .pac-two { align-items: stretch; }
.partner-page #antes-da-visita .prep-box, .partner-page #antes-da-visita .highlight-box { margin: 0; }
.partner-page #antes-da-visita .who-title { font-size: 20px; font-weight: 400; margin-bottom: 16px; }
.partner-page #antes-da-visita .prep-box .pac-ctas { margin-top: 28px; }
.partner-page .partner-prep-photo { width: 100%; height: 100%; max-height: 340px; object-fit: cover; border-radius: 24px; }
.partner-page #antes-da-visita > .container > .highlight-box { margin-top: 48px; width: 100%; align-items: center; padding: 16px 24px; gap: 16px; }
.partner-page #unidades .units-grid { margin-bottom: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.partner-page #unidades .unit-card { padding: 24px; gap: 8px; border: none; border-radius: 16px; background: #fff; box-shadow: rgba(95,109,179,.16) 0 2px 12px; }
.partner-page #unidades .partner-unit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.partner-page #unidades .unit-name { font-size: 18px; font-weight: 600; line-height: 1.5; margin: 0; }
.partner-page #unidades .unit-address { color: var(--text-storm); font-size: 14px; font-weight: 400; margin-bottom: 8px; }
.partner-page #unidades .unit-hours { font-size: 14px; font-weight: 600; }
.partner-page .partner-unit-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-storm); font-weight: 600; white-space: nowrap; }
.partner-page .partner-unit-status:empty { display: none; }
.partner-page .partner-unit-status::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--text-storm); border-radius: 50%; flex-shrink: 0; }
.partner-page .partner-unit-status.is-open { color: var(--brand-green); }
.partner-page .partner-unit-status.is-open::before { background: var(--brand-green); box-shadow: 0 0 0 3px #d1fae5; }
.partner-page .partner-home-photo { width: 100%; max-height: 360px; object-fit: cover; border-radius: 24px; }
.partner-page #coleta-domiciliar .section-header { margin-bottom: 24px; }
.partner-page #coleta-domiciliar .pac-ctas { margin-top: 32px; }
.partner-page #outras-parcerias .pac-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.partner-page #outras-parcerias .service-block { text-decoration: none; height: 100%; }
.partner-page #outras-parcerias .service-title { margin-bottom: 8px; }
.partner-page #faq .section-header { text-align: center; }
@container page (max-width: 1023px) {
  .partner-page #exames .exam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-page #unidades .units-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container page (max-width: 767px) {
  .partner-page #partner-hero { padding-top: 24px; padding-bottom: 56px; }
  .partner-page #partner-hero .partner-logo-ph, .partner-page #partner-hero .partner-logo { max-width: 300px; height: 180px; }
  .partner-page > .section-pad { padding-top: 48px; padding-bottom: 56px; }
  .partner-page > #diferenca, .partner-page > #exames, .partner-page > #antes-da-visita, .partner-page > #unidades, .partner-page > #faq { padding-bottom: 72px; }
  .partner-page > #check-up, .partner-page > #como-usar, .partner-page > #coleta-domiciliar, .partner-page > #outras-parcerias { padding-top: 64px; padding-bottom: 72px; }
  .partner-page #como-usar .step { flex-direction: column; align-items: center; text-align: center; gap: 0; }
  .partner-page #como-usar .step-number { margin-bottom: 16px; }
  .partner-page #outras-parcerias .pac-rel { grid-template-columns: minmax(0, 1fr); }
  .partner-page #unidades .units-grid { grid-template-columns: minmax(0, 1fr); }
  .partner-page .partner-prep-photo { height: 240px; }
  .partner-page .partner-home-photo { max-height: 280px; }
  .partner-page #antes-da-visita > .container > .highlight-box { margin-top: 40px; padding: 16px 20px !important; } /* vence o "padding … !important" do celular no exam.css, como na referência */
}