/* ==========================================================================
   Omnimagem 2026 — camada de design nova
   Carregada DEPOIS de app.min.css (ver omnimagem_2020/lib/assets.php).
   app.min.css foi truncado para conter só o bundle vendor original —
   este arquivo é a fonte única de verdade para toda customização.
   ========================================================================== */

:root {
  /* Cor — extraída por amostra de pixel do logo oficial
     (referencias/Camada-1-2.png), idêntica ao laranja que o tema já usa. */
  --color-brand: #F4772D;
  --color-brand-rgb: 244, 119, 45;
  --color-brand-light: #FAAF67;
  --color-brand-dark: #C85A1B;
  --color-signal: #1878A6;
  --color-signal-dark: #125E82;
  --color-whatsapp: #25D064;
  --color-ink: #26292B;
  --color-muted: #7C8081;
  --color-mist: #FBF4EC;
  --color-fog: #E7DED3;
  --color-error: #D64545;

  /* Tipografia — Montserrat em tudo, sem exceção (pedido do usuário).
     Os 3 nomes de variável continuam existindo (evita reescrever toda
     regra que já usa var(--font-display)/var(--font-mono) pelo arquivo
     inteiro) — só que agora as 3 resolvem pra a mesma fonte. --font-mono
     virar Montserrat é intencional: os eyebrows pequenos que antes eram
     mono-spaced (IBM Plex Mono) também viram Montserrat. */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --font-mono: 'Montserrat', sans-serif;

  /* Escala de espaçamento (8px) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;

  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(38, 41, 43, .06);
  --shadow-sm: 0 1px 2px rgba(38, 41, 43, .04), 0 4px 12px rgba(38, 41, 43, .08);
  --shadow-md: 0 2px 4px rgba(38, 41, 43, .05), 0 12px 32px rgba(38, 41, 43, .12);
  --shadow-lg: 0 4px 8px rgba(38, 41, 43, .06), 0 24px 48px rgba(38, 41, 43, .16);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

/* Rede de segurança pro "Montserrat em tudo, sem exceção": o CSS legado
   (app.min.css) ainda tem font-family hardcoded em alguns pontos que os
   tokens acima não cobrem (body{font-family:optima}, h1-h6{font-family:
   Open Sans}, .pagination/.post-content do blog, .ff-body/.ff-heading) —
   nenhuma dessas regras usa !important, então essa aqui (carregada por
   último) vence todas de uma vez. Precisa excluir os ícones (Font
   Awesome) explicitamente, senão os glifos quebram — eles dependem da
   própria font-family da fonte de ícone pra desenhar o símbolo certo. */
*:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad) {
  font-family: var(--font-body) !important;
}

body {
  font-family: var(--font-body) !important;
  color: var(--color-ink);
}

.green-title,
.our-exams .title,
.our-unities .title,
.section-title {
  font-family: var(--font-display) !important;
  font-weight: 600;
}

.eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Foco visível para navegação por teclado (acessibilidade) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Botões / links de ação — padroniza os primitivos já usados no site
   -------------------------------------------------------------------------- */

.green-button,
.black-button,
.agendar,
.research-call,
.link-gaspar {
  font-family: var(--font-body) !important;
  transition: transform .15s ease, opacity .15s ease, background-color .2s ease;
}

.green-button:hover,
.black-button:hover,
.agendar:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.green-button {
  background-color: var(--color-brand);
}

.black-button {
  background-color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   Header — fixo, sempre acompanha a página ao rolar (.main-header-bundle).
   Nada some/colapsa ao rolar: faixa de contato, logo, pills e menu ficam
   sempre visíveis. "js-is-scroll" só adiciona a sombra abaixo e neutraliza
   um colapso legado do vendor (ver comentário mais abaixo).
   -------------------------------------------------------------------------- */

.main-header {
  transition: box-shadow .3s ease;
}

.desktop-menu.js-is-scroll .main-header {
  box-shadow: var(--shadow-md);
}

/* O vendor tem um hook genérico ".js-is-scroll > .container{max-height:0}"
   que colapsaria a linha de logo/pills (filha direta de .header-top) quando
   rolado — herdado de um layout antigo com barra utilitária substituta.
   Sem essa barra, precisamos neutralizar o colapso aqui para o header
   continuar mostrando logo + ações ao rolar, em vez de sumir. */
.header-top.js-is-scroll > .container {
  max-height: none;
  overflow: visible;
}

.utility-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  transition: transform .15s ease, opacity .15s ease;
}

.utility-pill i {
  font-size: 16px;
}

.utility-pill:hover {
  opacity: .88;
  transform: translateY(-1px);
  color: #fff;
}

.utility-pill--whatsapp {
  background-color: var(--color-brand-dark);
}

.utility-pill--signal {
  background-color: var(--color-brand-light);
  color: var(--color-ink);
}

.utility-pill--signal:hover {
  color: var(--color-ink);
}

.utility-pill--brand {
  background-color: var(--color-brand);
}

/* Menu mobile — o vendor ainda usa o verde antigo (#048745) no fundo do
   painel e nas 3 barras do ícone hambúrguer (a do meio é .burger-icon
   mesmo, as outras duas são ::before/::after); a paleta 2026 não tem
   mais verde. Logo mobile também aumenta ~30% (70px → 91px). */
.main-menu-mobile {
  background-color: var(--color-brand) !important;
}

.mobile-menu .burger-icon,
.mobile-menu .burger-icon::before,
.mobile-menu .burger-icon::after {
  background-color: var(--color-brand) !important;
}

.mobile-menu .mobile-logo {
  width: calc(70px * 1.3) !important;
}

/* --------------------------------------------------------------------------
   Elemento-assinatura: arco aberto no canto da imagem,
   ecoa a espiral aberta do logo (referencias/Camada-1-2.png)
   -------------------------------------------------------------------------- */

.ring-frame {
  position: relative;
}

.ring-frame::after {
  content: "";
  position: absolute;
  top: -14px;
  left: -14px;
  width: 56px;
  height: 56px;
  border: 3px solid var(--color-brand-light);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Home — "Marque agora seu exame" + "Resultados de exames" em duas trilhas
   Substitui a antiga faixa de CTA solta (main-banner .green-box) + o bloco
   de resultados com 2 fotos desencontradas por um único componente:
   metade esquerda = agendar, metade direita = ver resultado.
   -------------------------------------------------------------------------- */

.exam-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--space-8) 0;
}

.exam-split__panel {
  display: flex;
  align-items: center;
  padding: var(--space-6);
}

.exam-split__panel--book {
  background-color: var(--color-brand);
  color: #fff;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
}

.exam-split__title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  margin: 0;
}

.exam-split__lead {
  font-family: var(--font-body) !important;
  font-size: 16px;
  opacity: .92;
  margin: 0;
}

.exam-split__panel--results {
  background-color: var(--color-mist);
  gap: var(--space-4);
}

.exam-split__panel--results .image-container {
  flex: 0 0 auto;
  width: 42%;
}

.exam-split__panel--results .image-container img {
  display: block;
  width: 100%;
}

.exam-split__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.exam-split .call {
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
}

.exam-split__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: transform .15s ease, opacity .15s ease;
}

.exam-split__cta:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.exam-split__cta--light {
  background-color: #fff;
  color: var(--color-brand);
}

.exam-split__cta--light:hover {
  color: var(--color-brand);
}

.exam-split__cta--brand {
  background-color: var(--color-brand);
  color: #fff;
}

.exam-split__cta--brand:hover {
  color: #fff;
}

@media (max-width: 900px) {
  .exam-split {
    grid-template-columns: 1fr;
  }

  .exam-split__panel--results {
    flex-direction: column;
    align-items: flex-start;
  }

  .exam-split__panel--results .image-container {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Tipografia fluida — substitui os saltos de breakpoint único do vendor
   -------------------------------------------------------------------------- */

.our-exams .title,
.our-unities .title-bar .title,
.section-title {
  font-size: clamp(28px, 4vw, 46px);
}

.gaspar-advertising-container .right-content .title {
  font-size: clamp(32px, 4.5vw, 46px);
}

/* --------------------------------------------------------------------------
   Cards e imagens — radius/sombra soft-UI
   -------------------------------------------------------------------------- */

.our-exams .exams-listing .exam-item {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}

.our-exams .exams-listing .exam-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Radius/sombra vão na <img>, nunca no wrapper .ring-frame: o ::after do
   arco-assinatura é posicionado fora da caixa (top/left negativos) —
   overflow/radius no wrapper cortaria o próprio arco. */
.exam-split .image-container img,
.gaspar-advertising-container .left-image img,
.research-call .right-content img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.research-call .left-content .subtitle {
  width:100%;
}

.research-call .right-content {
  max-height: 510px;
    overflow: hidden;
}

.research-call {
  background-color: var(--color-mist);
      padding-top: 40px;
}
.gaspar-advertising-container {
  background-color: var(--color-mist);
  padding-bottom: 40px;
}

/* Imagem preenche a altura toda da faixa (igual ao left-image do gaspar) —
   height fixa no mobile (empilhado) porque object-fit:cover precisa de uma
   altura definida pra funcionar; em telas largas o container estica junto
   com o flex (align-items:stretch em .research-call, abaixo). */
.research-call .right-content {
  height: 200px;
}

.research-call .right-content img {
  height: 100%;
}

@media (min-width: 1200px) {
  .research-call .right-content {
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   Seções da home — fundos e cores tokenizados
   -------------------------------------------------------------------------- */

.exam-split .call {
  color: var(--color-brand);
}

.orange {
  color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   Migrado do bloco customizado de app.min.css (linhas 6-318, removidas)
   Fonte única de verdade agora é este arquivo. Hex trocado por tokens;
   !important preservado como estava (remoção fica para uma fase futura).
   -------------------------------------------------------------------------- */

/* Header / topo */
.green-bar {
  background-color: var(--color-brand) !important;
}

.title a {
  color: var(--color-ink);
  font-size: 16px;
}

.desktop-menu .sac-container .phones-row .phone-item .text {
  color: var(--color-ink);
}

.desktop-menu .social-container .title {
  color: var(--color-ink);
  font-size: 16px;
}

.desktop-menu .social-container .social-listing {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.desktop-menu .green-button.outline {
  color: var(--color-ink) !important;
}

.desktop-menu .green-button.outline::placeholder {
  color: var(--color-ink) !important;
}

.desktop-menu .green-button {
  border-color: var(--color-brand) !important;
}

.desktop-menu .main-header__logo-container {
  width: 250px;
  flex-shrink: 0;
  /* Neutraliza margin-top:15px/margin-bottom:-6px do vendor (app.min.css),
     que empurrava a logo pra baixo e a desalinhava da linha dos pills —
     .header-top > .container já centraliza via align-items:center, então
     aqui só precisa ficar com margin zerada pra herdar essa centralização. */
  height: auto;
  margin: 0;
  display: flex;
  align-items: center;
}

.desktop-menu .main-header__logo-container .main-header__logo {
  display: block;
}

/* O vendor tem uma regra genérica ".container{flex-wrap:wrap}" que, sem
   isso, derruba o .header-actions inteiro pra uma linha embaixo do logo
   em vez de deixar só os pills internos quebrarem — força nowrap aqui pra
   logo + ações sempre ficarem na mesma linha. */
.header-top > .container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.header-info-bar {
  background-color: var(--color-mist);
  border-bottom: 1px solid var(--color-fog);
}

.header-info-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
}

.contact__item {
  display: flex;
  align-items: center;
  column-gap: 10px;
  font-size: 14px;
}

.contact__item i {
  color: var(--color-brand);
}

.contact__header {
  display: flex;
  align-items: center;
  column-gap: var(--space-4);
}

.share__header {
  display: flex;
  align-items: center;
  column-gap: 8px;
}

.share__header a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-brand);
  color: white;
  font-size: 14px;
  transition: 200ms;
}

.share__header a:hover {
  background-color: rgba(var(--color-brand-rgb), .6);
}

#search-form {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

#search-form i {
  position: absolute;
  left: 20px;
  color: var(--color-brand);
  font-size: 16px;
  pointer-events: none;
}

#search-form input {
  width: 100%;
  padding: 14px 20px 14px 48px;
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-pill);
  font-family: var(--font-body) !important;
  font-size: 16px;
  color: var(--color-ink);
}

#search-form input:focus {
  outline: none;
  border-color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   Header — ações ao lado da busca (pills + gatilho de busca) e o dropdown
   de busca que desliza por baixo do header fixo. Como a altura do header
   fixo só é remedida por FixedElementClearance no evento "resize" (ver
   app.bundle.js), o dropdown precisa ficar em position:absolute — nunca em
   fluxo normal — senão o .main-header-clearance do resto da página fica
   desatualizado enquanto o dropdown está aberto.

   .header-top envolve só a faixa de contato + a linha do logo/busca (não o
   menu de navegação nem a barra utilitária de scroll) e é o contexto de
   posicionamento do dropdown — por isso ele abre colado ao header, por
   cima do menu, em vez de aparecer embaixo do .green-bar.
   -------------------------------------------------------------------------- */

.header-top {
  position: relative;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-fog);
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-brand);
  font-size: 16px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.search-trigger:hover,
.search-trigger[aria-expanded="true"] {
  background-color: var(--color-brand);
  color: #fff;
}

.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1px solid var(--color-fog);
  box-shadow: var(--shadow-lg);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .25s ease, opacity .2s ease;
}

.search-dropdown.is-open {
  max-height: 140px;
  opacity: 1;
  z-index:999999;
}

.search-dropdown .container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.search-dropdown__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background-color: transparent;
  color: var(--color-muted);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.search-dropdown__close:hover {
  color: var(--color-ink);
}

.main-menu .main-menu__item,
.main-menu .menu-item {
  font-weight: normal;
}

/* Home — resultados / exames / unidades */
.green {
  color: var(--color-brand);
}

.our-exams .exams-listing .exam-item .exam-title {
  background-color: var(--color-brand) !important;
}

.our-exams .exams-listing .exam-item .overlay {
  /* alpha só no fundo (equivalente ao #F4772D99 original) — opacity no
     elemento deixaria o texto branco filho também transparente */
  background-color: rgba(var(--color-brand-rgb), .6) !important;
}

.our-unities .title-bar {
  background-color: var(--color-brand) !important;
}

.our-unities .title-bar .arrow-icon {
  color: var(--color-brand);
}

/* Home — research-call / gaspar-advertising
   research-call espelha o tratamento visual do gaspar-advertising (full-bleed,
   split 50/50, caixa de texto --color-mist, título itálico/900) só que
   invertido: texto na esquerda, imagem na direita (gaspar é o contrário).
   Por isso o respiro grande de padding vai no lado DIREITO da caixa de
   texto aqui (lado que encosta na imagem) — no gaspar é o padding-left que
   faz esse papel, porque lá a imagem fica à esquerda. */
.research-call {
  margin-bottom: 0;
  align-items: stretch;
}

@media (min-width: 1200px) {
  .research-call .right-content,
  .research-call .left-content {
    width: 50%;
  }
}

.research-call .left-content {
  background-color: var(--color-mist);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

@media (min-width: 1200px) {
  .research-call .left-content {
    padding-right: 120px;
  }
}

.research-call .left-content .title {
  font-style: italic;
  font-weight: 900;
  font-size: clamp(32px, 4.5vw, 46px);
  margin-bottom: 30px;
}

@media (min-width: 1200px) {
  .research-call .left-content .title {
    max-width: 500px;
  }
}

.research-call .left-content .subtitle {
  color: var(--color-muted);
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 20px;
}

.research-call .left-content .research-call {
  background-color: var(--color-brand) !important;
}

.gaspar-advertising-container .right-content {
  background-color: var(--color-mist) !important;
}

.gaspar-advertising-container .right-content .title {
  color: var(--color-ink) !important;
}

.gaspar-advertising-container .right-content .subtitle {
  color: var(--color-muted) !important;
  font-weight: 400 !important;
}

/* Rodapé / diversos */
.copyright-bar {
  background-color: var(--color-brand) !important;
  font-family: var(--font-body) !important;
}

/* --------------------------------------------------------------------------
   Rodapé — 4 colunas (Logo | Institucional | Serviços | Contato) na linha 1,
   faixa de Horário de Funcionamento (linha 2), faixa de parceiros/
   certificação/convênios (linha 3) e barra de copyright (linha 4).
   Mobile-first: empilhado por padrão, grid 2x2 pareado a partir de 700px
   (Logo+Institucional numa coluna, Serviços+Contato na outra — pedido
   explícito do cliente), 4 colunas lado a lado a partir de 1200px.
   -------------------------------------------------------------------------- */

.footer-columns-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-6);
  padding-bottom: var(--space-2);
}

.footer-columns-container .column-item {
  width: auto;
}

.footer-col-title {
  font-family: var(--font-mono) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}

.footer-slogan {
  font-size: 14px;
  color: var(--color-muted);
  margin: var(--space-1) 0 0;
}

.footer-col--logo .social-listing {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
}

.footer-col--logo .social-item {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s ease;
}

.footer-col--logo .social-item:hover {
  opacity: .75;
}

.footer-col--logo .social-item img {
  width: 32px;
  height: 32px;
}

/* O vendor tem ".footer-menu{margin-top:50px}", que empurra os links de
   Institucional/Serviços bem abaixo do título da coluna — a lista de
   Contato não tem essa margem, então as colunas ficam desalinhadas.
   Zera aqui pra alinhar com o espaçamento de .footer-col-title (mesmo
   margin-bottom das três colunas). */
.footer-menu {
  margin-top: 0 !important;
}

.footer-menu-item {
  margin-bottom: var(--space-2);
}

.footer-menu-item a {
  font-size: 14px;
  color: var(--color-ink);
  text-decoration: none;
}

.footer-menu-item a:hover {
  color: var(--color-brand);
}

.footer-contact-list li {
  margin-bottom: var(--space-2);
  font-size: 14px;
  color: var(--color-ink);
}

.footer-contact-list a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-ink);
  text-decoration: none;
}

.footer-contact-list a:hover {
  color: var(--color-brand);
}

.footer-contact-list li > i {
  color: var(--color-brand);
  margin-right: 8px;
}

.footer-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-fog);
}

.footer-partners__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 300px;
}

.footer-partners__label {
  font-size: 13px;
  color: var(--color-muted);
  white-space: nowrap;
}

.footer-partners__logo {
  max-height: 80px;
  width: auto;
  object-fit: contain;
}

.footer-partners__note {
  font-size: 13px;
  line-height: 2;
  color: var(--color-muted);
  text-align: center;
  margin: 0;
}

.copyright-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}

.copyright-bar__inner a {
  color: #fff;
  text-decoration: underline;
}

.copyright-bar__divider {
  width: 1px;
  height: 12px;
  background-color: rgba(255, 255, 255, .4);
}

@media (min-width: 700px) {
  .footer-columns-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "logo institucional"
      "servicos contato";
    gap: var(--space-6);
  }

  .footer-col--logo { grid-area: logo; }
  .footer-col--institucional { grid-area: institucional; }
  .footer-col--servicos { grid-area: servicos; }
  .footer-col--contato { grid-area: contato; }
}

@media (min-width: 1200px) {
  .footer-columns-container {
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    grid-template-areas: "logo institucional servicos contato";
  }
}

/* --------------------------------------------------------------------------
   Página Quem Somos — nunca passou pelo redesign 2026 (só tinha as duas
   regras de cor abaixo); resto do layout ainda era só o app.min.css legado
   (breakpoint único 1200px, sem tokens). Reaproveita aqui as mesmas
   receitas já usadas na home: faixa full-bleed --color-mist (abertura),
   split full-bleed brand/imagem (história do prédio, no estilo
   gaspar/research-call), card de vídeo com radius/shadow, e grid de cards
   (missão/valores/pilares) no estilo .our-exams .exam-item.
   -------------------------------------------------------------------------- */

/* Abertura — vira uma faixa full-bleed --color-mist, título fluido */
.top-title-container {
  background-color: var(--color-mist);
}

.top-title-container .title {
  font-family: var(--font-mono) !important;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-brand);
}

.top-title-container .line {
  background-color: var(--color-brand) !important;
  border-radius: var(--radius-pill);
}

.top-title-container .highlight-title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: clamp(32px, 5vw, 56px) !important;
  line-height: 1.1 !important;
}

.top-title-container .highlight-title .green {
  color: var(--color-brand);
}

.top-title-container .description {
  color: var(--color-muted);
  font-size: clamp(14px, 1.44vw, 18px) !important;
  line-height: 1.6;
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: var(--space-6) !important;
}

/* História do prédio — texto de um lado, imagem do outro, contido (sem
   full-bleed nem painel de cor sólida — versão mais simples depois do
   feedback sobre a primeira tentativa). O vendor já entrega o flex 50/50
   em telas largas (.building-history{display:flex} +
   .left-side/.right-side{width:50%} em app.min.css); aqui só neutraliza
   o fundo cinza legado e ajusta tipografia + o tratamento soft-UI da
   imagem. */
.building-history .left-side {
  background-color: transparent !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  color: var(--color-ink);
  padding: 0 !important;
}

.building-history .left-side .text {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--color-ink);
}

.building-history .left-side .title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--color-ink);
  font-size: clamp(22px, 2.2vw, 28px);
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}

.building-history .left-side .description {
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.6;
}

.building-history .right-side {
  display: flex;
  align-items: center;
}

.building-history__image {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Vídeo institucional — o vídeo ganha o mesmo card soft-UI usado nas
   imagens do resto do site (radius + sombra), em vez de ficar cru. */
.video-content-container .left-side .text {
  color: var(--color-ink);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
}

.video-content-container .right-side {
  display: flex;
}

.video-card {
  width: 100%;
  height: 100%;
  min-height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.video-card iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Missão/Valores/Pilares — grid de cards, mesma receita de
   .our-exams .exams-listing .exam-item (radius + shadow + hover lift),
   substituindo o bloco único centralizado do vendor. Os "pilares" usavam
   o MESMO formato de repeater (titulo+descricao) que missão/valores mas
   renderizavam como texto corrido <b>/<br> — agora usam o mesmo
   componente .value-item pros dois. */
.values-section {
  text-align: left;
  padding: var(--space-8) 0;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.values-grid .value-item {
  background-color: #fff;
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  margin-bottom: 0 !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

.values-grid .value-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.values-grid .value-item .title {
  font-family: var(--font-display) !important;
  font-size: clamp(20px, 2vw, 24px) !important;
}

.values-grid .value-item .line {
  background-color: var(--color-brand) !important;
  border-radius: var(--radius-pill);
  margin: var(--space-2) 0 !important;
}

.values-grid .value-item .description {
  width: auto !important;
  margin: 0 !important;
  color: var(--color-muted);
  font-size: 16px !important;
}

.values-section__pillars {
  margin-top: var(--space-8);
}

.values-section__pillars .section-title {
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Página Certificação — hero (.top-title-container) já herda o 2026 por
   ser compartilhado com home/about. Aqui só o corpo da página: bloco
   texto+certificado e os 2 blocos informativos, que ainda eram puro CSS
   legado (painel cinza sólido, margin-top:150px fora de escala, larguras
   fixas em px, texto informativo centralizado sem cartão). Mesma lição
   aprendida no building-history do Quem Somos: nada de painel de cor
   sólida atrás do texto — texto limpo + imagem com radius/sombra.
   -------------------------------------------------------------------------- */

.certification-section {
  position: relative;
  margin-top: var(--space-8) !important;
  overflow: hidden;
}

/* Pontilhado decorativo no canto inferior esquerdo da seção — puro CSS,
   sem asset novo, eco sutil da referência enviada pelo usuário. */
.certification-section::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  width: 90px;
  height: 70px;
  background-image: radial-gradient(var(--color-brand) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: .25;
  pointer-events: none;
}

.certification-section .left-content {
  background-color: transparent !important;
  padding: 0 !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: var(--space-4);
}

.certification-section .left-content .text .title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--color-ink);
  text-align: left !important;
  font-size: clamp(24px, 3vw, 42px) !important;
  width: auto !important;
}

.certification-section .left-content .text .description {
  color: var(--color-muted);
  text-align: left !important;
  font-size: clamp(15px, 1.4vw, 16px) !important;
  line-height: 1.6;
  width: auto !important;
  max-width: 480px;
}

/* Selos de confiança — conteúdo institucional fixo (sem campo ACF),
   ícone circular + label em duas linhas. */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 180px;
}

.trust-badge i {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-brand);
  color: #fff;
  font-size: 16px;
}

.trust-badge span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}

.certification-section .right-content {
  position: relative;
}

/* Forma suave atrás do canto superior direito da imagem — eco do "blob"
   da referência, sem precisar de imagem nova. */
.certification-section .right-content::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 55%;
  height: 55%;
  background-color: var(--color-brand-light);
  opacity: .35;
  border-radius: 50%;
  z-index: -1;
}

.certification-section .right-content img {
  position: relative;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* Blocos informativos — vira grid de cards (mesma receita do
   .values-grid/.value-item do Quem Somos), 2 colunas em telas largas via
   auto-fit, sem precisar de media query manual. */
.certification-info-section {
  text-align: left !important;
}

.certification-info-section .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}

.certification-info-section .info-item {
  background-color: #fff;
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  margin-bottom: 0 !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

.certification-info-section .info-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.certification-info-section .info-item .title {
  font-family: var(--font-display) !important;
  color: var(--color-ink);
}

.certification-info-section .info-item .description {
  color: var(--color-muted);
  width: auto !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Página Unidades — cards de verdade (radius+sombra, hoje era só texto
   empilhado sem elevação), lista de exames em colunas via CSS multi-column
   (substitui o hack de float que estava num <style> inline no template),
   e verde legado (#048745) trocado por --color-brand — só o ícone do
   WhatsApp mantém --color-whatsapp, mesma convenção do resto do site.
   -------------------------------------------------------------------------- */

.page-unity-item {
  background-color: #fff;
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-6) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

.page-unity-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.page-unity-item .unity-info .photo {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-unity-item .unity-info .photo img {
  border-radius: var(--radius-md);
}

@media (min-width: 1200px) {
  .page-unity-item .unity-info .text-container {
    padding-left: var(--space-5) !important;
  }
}

.unity-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.unity-name__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background-color: var(--color-brand);
  color: #fff;
  font-size: 16px;
}

.page-unity-item .unity-info .text-container .big-text {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--color-ink);
  font-size: clamp(20px, 2.4vw, 28px) !important;
  margin-bottom: 0;
}

.page-unity-item .unity-info .text-container .address {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-muted);
}

.page-unity-item .unity-info .text-container .address i {
  color: var(--color-brand);
}

.page-unity-item .unity-info .text-container .how-arrive {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-mist) !important;
  color: var(--color-brand);
  font-weight: 600;
}

.page-unity-item .unity-info .text-container .how-arrive:hover {
  background-color: var(--color-brand) !important;
  color: #fff !important;
  opacity: 1;
}

.working-time {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 700px) {
  .working-time {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4);
  }
}

.working-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.working-item i {
  margin-top: 3px;
  color: var(--color-brand);
  font-size: 14px;
}

.working-item i.working-item__icon--whatsapp {
  color: var(--color-whatsapp);
}

.page-unity-item .unity-info .text-container .working-time .working-item .title {
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0;
}

.page-unity-item .unity-info .text-container .working-time .working-item .content {
  color: var(--color-muted);
}

/* Caixa "Exames realizados nesta unidade" — ganha o fundo cinza-claro que
   faltava, ícone + heading à esquerda, lista em colunas à direita. */
.page-unity-item .unity-exams {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  background-color: var(--color-mist);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-4);
  text-align: left !important;
}

.unity-exams__heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 700px) {
  .unity-exams__heading {
    width: 200px;
  }
}

.unity-exams__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background-color: var(--color-brand);
  color: #fff;
  font-size: 15px;
}

.page-unity-item .unity-exams .unity-exams__label .title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--color-ink);
  text-align: left;
  margin-bottom: var(--space-1);
}

.page-unity-item .unity-exams .line {
  background-color: var(--color-brand);
  width: 45px;
  height: 3px;
  border-radius: var(--radius-pill);
  margin: 0;
}

.page-unity-item .unity-exams .exams-text-listing {
  width: auto !important;
  margin: 0 !important;
  flex: 1 1 260px;
}

.lista-container {
  columns: 3 160px;
  column-gap: var(--space-4);
}

.lista-itens {
  break-inside: avoid;
  font-size: 14px;
  color: var(--color-ink);
  margin-bottom: 8px;
  list-style: disc;
  margin-left: 18px;
}

.lista-itens::marker {
  color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   Página Convênios — grid de logos. Era largura fixa (800px, tiles
   170x170px, borda cinza hardcoded + hack nth-child(4n) simulando 4
   colunas); vira grid responsivo com cards no mesmo padrão já usado em
   .values-grid/.page-unity-item/.certification-info-section .info-item.
   -------------------------------------------------------------------------- */

.partners-listing {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: var(--space-4) !important;
  width: auto !important;
  margin: 0 !important;
}

.partners-listing .partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto;
  aspect-ratio: 1;
  background-color: #fff;
  border: 1px solid var(--color-fog);
  border-right: 0 !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  margin: 0 !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

.partners-listing .partner-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.partners-listing .partner-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Página Contato — form (Contact Form 7, plugin externo, sem markup no
   tema) estilizado pela estrutura padrão que o CF7 sempre gera
   (.wpcf7-form-control), não por nome de campo (que não temos como saber
   sem acesso ao admin). Coluna direita reaproveita o campo ACF
   "informacoes" existente, tratado como cards de unidade.
   -------------------------------------------------------------------------- */

/* .left-side-content vira flex-column com gap — a distância entre
   heading/form/aviso de segurança passa a ser controlada só por aqui,
   em vez de depender de margens internas do CF7 (que carrega CSS próprio,
   fora deste tema, e a gente não tem como inspecionar/garantir). O
   .modal de feedback é position:fixed, então não participa do fluxo
   flex nem do gap, mesmo sendo filho direto. */
.contact-page-container .left-side-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 1200px) {
  .contact-page-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .contact-page-container .left-side-content {
    width: auto !important;
    padding-right: var(--space-6) !important;
  }

  /* Altura fixa nos dois lados — form e lista de unidades — com rolagem
     interna quando o conteúdo passar disso. Escopado em
     .contact-page-container (só existe em page-contact.php) pra não
     afetar nenhum outro uso de .wpcf7/.right-side-container no site. */
  .contact-page-container .wpcf7,
  .contact-page-container .wpcf7 form {
    max-height: 390px;
    overflow-y: hidden;
  }

  .contact-page-container .right-side-container {
    width: auto !important;
    max-height: 620px;
    overflow-y: auto;
    padding: 0px 20px;
  }
}

.contact-form-heading .title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--color-ink);
  font-size: clamp(28px, 3vw, 38px);
  margin-bottom: var(--space-1);
}

.contact-form-heading .lead {
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}

/* .form-row/.input-item são classes do vendor (app.min.css), reaproveitadas
   no HTML do form configurado no admin do CF7 (é assim que Nome/Telefone e
   Assunto/E-mail ficam pareados lado a lado) — o vendor dá a cada
   .input-item um margin-bottom:50px OWN e ainda uma variante width:230px
   que não fazem sentido aqui; a régua de espaçamento entre linhas passa a
   ser só o gap do .form-row, pra não somar margem de vários lugares ao
   mesmo tempo (era a causa dos espaços gigantes entre os campos). */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
  margin-bottom: var(--space-2);
}

.input-item {
  flex: 1 1 220px;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

.wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 0;
}

.wpcf7-form p {
  margin: 0 0 var(--space-2);
}

.wpcf7-form input.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control,
.wpcf7-form select.wpcf7-form-control {
  width: 100%;
  border: 1px solid var(--color-fog) !important;
  border-radius: var(--radius-md) !important;
  padding: 14px 18px !important;
  margin-bottom: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 15px;
  color: var(--color-ink);
  background-color: #fff;
  transition: border-color .2s ease;
}

.wpcf7-form input.wpcf7-form-control:focus,
.wpcf7-form textarea.wpcf7-form-control:focus,
.wpcf7-form select.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--color-brand) !important;
}

.wpcf7-form input.wpcf7-form-control::placeholder,
.wpcf7-form textarea.wpcf7-form-control::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

.wpcf7-form textarea.wpcf7-form-control {
  min-height: 140px;
  resize: vertical;
}

/* O retorno de campo obrigatório/inválido agora é só no modal (ver
   wpcf7invalid em js_2026.js) — some a dica de texto que o CF7 mostra
   embaixo de cada campo, pra não duplicar a mensagem em dois lugares. */
.wpcf7-not-valid-tip {
  display: none !important;
}

/* Precisa da mesma especificidade de .wpcf7-form-control (input.wpcf7-form-control
   é mais específico que só .wpcf7-submit) — sem isso o botão herdava o
   visual de campo de texto (fundo branco) em vez do botão cheio. */
.wpcf7-form input.wpcf7-form-control.wpcf7-submit,
.wpcf7-form .wpcf7-submit {
  width: 100%;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  background-color: var(--color-brand) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 24px !important;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}

.wpcf7-form .wpcf7-submit:hover {
  opacity: .88;
  transform: translateY(-1px);
}

/* Spinner do CF7 — troca o gif cinza padrão do plugin por um anel girando
   na cor da marca. O show/hide continua sendo o próprio CF7 (classe
   .submitting no form), só a aparência do elemento muda. */
.wpcf7-spinner {
  background-image: none !important;
  width: 20px;
  height: 20px;
  border: 3px solid var(--color-mist);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: cf7-spin .6s linear infinite;
  vertical-align: middle;
  margin: 0 0 0 10px;
}

@keyframes cf7-spin {
  to { transform: rotate(360deg); }
}

/* Reset defensivo: o CSS do próprio plugin CF7 (carregado à parte, fora
   deste tema) pode aplicar margens/paddings no wrapper .wpcf7 ou no
   <form> que não temos como inspecionar aqui. O espaçamento real até o
   aviso de segurança é controlado pelo gap do .left-side-content (acima),
   não por margem aqui — só zera o que sobrar de dentro do CF7. */
.contact-page-container .wpcf7,
.contact-page-container .wpcf7 form {
  margin: 0 !important;
  padding: 0 !important;
}

.contact-form-security {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  color: var(--color-muted);
  font-size: 13px;
}

.contact-form-security i {
  color: var(--color-muted);
}

/* Coluna direita — "Nossas unidades" (escopado em .contact-page-container
   pra não vazar pra nenhum outro uso futuro de .right-side-container). */
.contact-page-container .right-side-container {
  background-color: transparent !important;
  text-align: left !important;
}

.contact-page-container .right-side-container .small-title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--color-ink) !important;
  text-align: left !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  margin-bottom: var(--space-1) !important;
}

.contact-page-container .right-side-container .line {
  background-color: var(--color-brand);
  width: 45px;
  height: 3px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-2);
}

.contact-page-container .right-side-container .lead {
  color: var(--color-muted);
  font-size: 16px;
  margin: 0 0 var(--space-4);
}

.address-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  background-color: #fff;
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) !important;
  margin-bottom: var(--space-3) !important;
  font-size: 16px !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

.address-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.address-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-mist);
  color: var(--color-brand);
  font-size: 18px;
}

.address-block {
  flex: 1 1 180px;
}

.address-block div:first-child {
  font-weight: 700 !important;
  color: var(--color-ink);
  margin-bottom: 2px;
}

.address-block div:not(:first-child) {
  color: var(--color-muted);
  font-size: 14px;
}

.address-item .green-button {
  width: auto !important;
  margin: 0 !important;
  flex-shrink: 0;
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
}

/* Faixa "Atendimento imediato / Horário" — conteúdo fixo, sem campo ACF
   próprio (ver page-contact.php). */
.contact-help-strip {
  margin: var(--space-6) 0;
}

.contact-help-strip__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background-color: var(--color-mist);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

@media (min-width: 700px) {
  .contact-help-strip__inner {
    flex-direction: row;
    align-items: center;
  }
}

.contact-help-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}

.contact-help-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #fff;
  color: var(--color-brand);
  font-size: 20px;
  box-shadow: var(--shadow-xs);
}

.contact-help-strip__text .title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--color-ink);
  font-size: 18px;
  margin-bottom: 4px;
}

.contact-help-strip__text p {
  color: var(--color-muted);
  font-size: 14px;
  margin: 0 0 var(--space-2);
  line-height: 1.5;
}

.contact-help-strip__divider {
  display: none;
}

@media (min-width: 700px) {
  .contact-help-strip__divider {
    display: block;
    align-self: stretch;
    width: 1px;
    background-color: var(--color-fog);
  }
}

/* --------------------------------------------------------------------------
   Página Exames — cabeçalho agora usa o mesmo .top-title-container
   compartilhado da página de Contato (eyebrow + linha, sem título grande),
   pra ficar visualmente idêntico — nenhum CSS extra necessário aqui pra
   isso. O card em si (.exam-item, hover revelando a descrição num
   overlay) foi mantido no formato original do vendor a pedido do usuário.
   Só sobram os círculos decorativos de canto e a faixa "Agende seu
   exame" (reaproveita .contact-help-strip, já estilizado pro Contato).
   -------------------------------------------------------------------------- */

.page-exams-container {
  position: relative;
  overflow: hidden;
}

/* Círculos concêntricos decorativos no canto — elemento novo, puro CSS,
   sem imagem nova (diferente do .ring-frame, que é um arco pequeno preso
   a canto de imagem). */
.page-exams-container__rings {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 40px solid var(--color-brand-light);
  opacity: .12;
  pointer-events: none;
}

.page-exams-container__rings::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-brand);
  opacity: .5;
}

.page-exams-container .container {
  position: relative;
}

/* --------------------------------------------------------------------------
   Interna do exame — hero (.top-title-container) já herda o 2026 por ser
   compartilhado. Aqui: texto de descrição (largura de leitura confortável
   em vez do 50% forçado com justify-content:center legado) e a lista de
   "unidades que realizam o exame", que vira grid de cards. Tudo escopado
   em .exam-detail-page (só existe nesta página) pra não afetar o
   carrossel .our-unities da home, que reaproveita os mesmos nomes de
   classe (.unities-listing/.unity-item) num contexto de pai diferente.
   -------------------------------------------------------------------------- */

.exam-detail-page .exam-description {
  display: block;
}

.exam-detail-page .exam-description .text-container {
  width: auto;
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  color: var(--color-ink);
  font-size: inherit;
  line-height: 1.7;
}

.exam-detail-page .exam-description .text-container p {
  margin-bottom: var(--space-2);
}

.exam-detail-page .exam-description .text-container p:last-child {
  margin-bottom: 0;
}

.exam-unities-heading {
  text-align: center;
  margin-bottom: var(--space-4);
}

.exam-detail-page .title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--color-ink);
  font-size: clamp(24px, 2.8vw, 32px) !important;
  margin-bottom: var(--space-2) !important;
}

.exam-detail-page .line {
  background-color: var(--color-brand) !important;
  border-radius: var(--radius-pill);
  width: 45px !important;
  height: 3px !important;
  margin-bottom: 0 !important;
}

.exam-detail-page .our-unities {
  max-width: 900px;
  margin: 0 auto;
}

.exam-detail-page .our-unities .unities-listing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4) !important;
  padding-top: 0 !important;
}

.exam-detail-page .our-unities .unities-listing .unity-item {
  width: auto !important;
  background-color: #fff;
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  margin-bottom: 0 !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

.exam-detail-page .our-unities .unities-listing .unity-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.exam-detail-page .our-unities .unities-listing .unity-item .tag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-bottom: var(--space-2) !important;
}

.exam-detail-page .our-unities .unities-listing .unity-item .tag img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.exam-detail-page .our-unities .unities-listing .unity-item .small-title,
.exam-detail-page .our-unities .unities-listing .unity-item:hover .small-title {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: 15px;
}

.exam-unities-cta {
  text-align: center;
  color: var(--color-brand);
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 var(--space-4);
}

/* --------------------------------------------------------------------------
   Motion — scroll-reveal (ligado via js_2026.js, ver initScrollReveal)
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1),
              transform .45s cubic-bezier(.16, 1, .3, 1);
}

.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger leve nos cards de exame — até o 7º item; do 8º em diante usa o
   mesmo delay do 7º, para não atrasar grids grandes vindos do ACF. */
.our-exams .exams-listing .exam-item.reveal:nth-child(1) { transition-delay: 0ms; }
.our-exams .exams-listing .exam-item.reveal:nth-child(2) { transition-delay: 70ms; }
.our-exams .exams-listing .exam-item.reveal:nth-child(3) { transition-delay: 140ms; }
.our-exams .exams-listing .exam-item.reveal:nth-child(4) { transition-delay: 210ms; }
.our-exams .exams-listing .exam-item.reveal:nth-child(5) { transition-delay: 280ms; }
.our-exams .exams-listing .exam-item.reveal:nth-child(6) { transition-delay: 350ms; }
.our-exams .exams-listing .exam-item.reveal:nth-child(n+7) { transition-delay: 420ms; }

/* Mesmo stagger nos cards de missão/valores/pilares da página Quem Somos */
.values-grid .value-item.reveal:nth-child(1) { transition-delay: 0ms; }
.values-grid .value-item.reveal:nth-child(2) { transition-delay: 70ms; }
.values-grid .value-item.reveal:nth-child(3) { transition-delay: 140ms; }
.values-grid .value-item.reveal:nth-child(4) { transition-delay: 210ms; }
.values-grid .value-item.reveal:nth-child(5) { transition-delay: 280ms; }
.values-grid .value-item.reveal:nth-child(6) { transition-delay: 350ms; }
.values-grid .value-item.reveal:nth-child(n+7) { transition-delay: 420ms; }

/* Mesmo stagger nos 2 cards informativos da página Certificação */
.certification-info-section .info-item.reveal:nth-child(1) { transition-delay: 0ms; }
.certification-info-section .info-item.reveal:nth-child(2) { transition-delay: 70ms; }

/* Mesmo stagger nos cards de unidade da página Unidades */
.page-unity-item.reveal:nth-child(1) { transition-delay: 0ms; }
.page-unity-item.reveal:nth-child(2) { transition-delay: 70ms; }
.page-unity-item.reveal:nth-child(3) { transition-delay: 140ms; }
.page-unity-item.reveal:nth-child(4) { transition-delay: 210ms; }
.page-unity-item.reveal:nth-child(n+5) { transition-delay: 280ms; }

/* Mesmo stagger nos logos da página Convênios — pode ter bastante itens,
   usa os 7 níveis (igual .our-exams .exams-listing .exam-item) em vez dos
   2-5 níveis das páginas com poucos cards. */
.partner-item.reveal:nth-child(1) { transition-delay: 0ms; }
.partner-item.reveal:nth-child(2) { transition-delay: 70ms; }
.partner-item.reveal:nth-child(3) { transition-delay: 140ms; }
.partner-item.reveal:nth-child(4) { transition-delay: 210ms; }
.partner-item.reveal:nth-child(5) { transition-delay: 280ms; }
.partner-item.reveal:nth-child(6) { transition-delay: 350ms; }
.partner-item.reveal:nth-child(n+7) { transition-delay: 420ms; }

/* Página Exames reaproveita o mesmo DOM (.our-exams .exams-listing
   .exam-item) do carrossel da home — o stagger de
   ".our-exams .exams-listing .exam-item.reveal" logo acima já cobre os
   cards daqui também, sem precisar de regra nova. */

/* --------------------------------------------------------------------------
   Modal — componente global (.modal/.modal__*, ver DragonModal em
   app.bundle.js). Só existia estilo legado (app.min.css), sem nenhum
   token do redesign — afeta todo uso de .modal no site, incluindo o
   "Receber uma ligação" do rodapé (mesmo componente compartilhado).
   -------------------------------------------------------------------------- */

.modal {
  padding: var(--space-3);
  transition: opacity .25s ease, visibility .25s ease;
}

.modal__bg {
  background-color: rgba(38, 41, 43, .55);
}

.modal__box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 46rem;
  transform: scale(.96) translateY(8px);
  transition: transform .25s ease;
}

.modal.is-visible .modal__box {
  transform: scale(1) translateY(0);
}

.modal__header {
  padding: var(--space-3) var(--space-3) 0;
  border-bottom: 0;
}

.modal__title {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--color-ink);
  font-size: 20px;
}

.modal__close {
  width: 16px;
  color: var(--color-muted);
  cursor: pointer;
}

.modal__close svg path {
  fill: currentColor;
}

.modal__close:hover {
  color: var(--color-ink);
}

.modal__body {
  padding: var(--space-2) var(--space-3) var(--space-4);
  font-size: 16px;
}

/* Modal de feedback do formulário de contato — ícone + mensagem trocam
   de sucesso/erro via classes .is-success/.is-error (ver
   initContactFeedbackModal em js_2026.js). */
.contact-feedback-modal .modal__content {
  text-align: center;
}

.contact-feedback-modal__icon {
  font-size: 48px;
  margin-bottom: var(--space-2);
  color: var(--color-muted);
}

.contact-feedback-modal.is-success .contact-feedback-modal__icon {
  color: var(--color-brand);
}

.contact-feedback-modal.is-error .contact-feedback-modal__icon {
  color: var(--color-error);
}

.contact-feedback-modal__message {
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* A mensagem de retorno do CF7 passa a aparecer só no modal acima. */
.wpcf7-response-output {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Acessibilidade de movimento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .utility-pill,
  .header-top > .container,
  .header-info-bar,
  .header-info-bar .container,
  .search-dropdown,
  .main-header,
  .green-button,
  .black-button,
  .agendar,
  .reveal,
  .modal,
  .modal__box,
  .our-exams .exams-listing .exam-item,
  .values-grid .value-item,
  .certification-info-section .info-item,
  .page-unity-item,
  .partner-item {
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
}