/* =============================================================================
   LifeVet Diagnósticos: estilos complementares ao Tailwind.

   Só entra aqui o que o Tailwind não resolve bem em utilitário: cabeçalho,
   menus, gaveta do celular, barra de atalhos, cartão de unidade, acordeão e
   formulários.

   As cores vêm das variáveis CSS definidas em includes/site-header.php, que
   por sua vez saem das configurações do painel. Nada de hex solto aqui: cor
   escrita no CSS é cor que o cliente não consegue trocar.
   ========================================================================== */

:root {
  --raio:      12px;
  --raio-sm:   9px;
  --raio-lg:   16px;
  --sombra:    0 1px 2px rgb(var(--cor-tinta-rgb) / .06), 0 8px 24px -14px rgb(var(--cor-tinta-rgb) / .22);
  --sombra-lg: 0 18px 44px -22px rgb(var(--cor-tinta-rgb) / .42);
  --ok:        #12684F;
  --ok-fundo:  #DCF2E9;
  --alerta:    #8A5D06;
  --alerta-fundo: #FDF0DA;
}

html { scroll-behavior: smooth; }

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main { flex: 1 0 auto; }

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

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ acesso */
.pular-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cor-teal); color: var(--cor-navy);
  padding: 10px 18px; font-weight: 700; border-radius: 0 0 var(--raio-sm) 0;
}
.pular-conteudo:focus { left: 0; }

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

/* ==========================================================================
   O EIXO DO SITE

   Uma medida so e um respiro so, guardados em variavel. TUDO que aparece na
   tela nasce dentro de `.eixo`: a barra do topo, o alternador de publico,
   o carrossel, os atalhos, os numeros, cada secao e o rodape. Assim a borda
   esquerda do logotipo, do titulo do hero e do primeiro cartao cai no mesmo
   pixel, em qualquer largura de tela.

   Faixa de fundo cheio usa `.faixa` POR FORA e `.eixo` POR DENTRO: o
   fundo vai de ponta a ponta e o conteudo continua no eixo. Foi o que estava
   errado antes: os atalhos e os numeros eram grade de tela cheia, e comecavam
   colados na borda enquanto o menu comecava a 350px dela.
   ========================================================================== */
:root { --eixo: 1200px; --respiro: 16px; }
@media (min-width: 768px)  { :root { --respiro: 20px; } }
@media (min-width: 1024px) { :root { --respiro: 24px; } }

.eixo { width: 100%; max-width: var(--eixo); margin: 0 auto; padding: 0 var(--respiro); }
.eixo-estreito { max-width: 880px; }
.faixa { width: 100%; }

.secao { padding: 44px 0; }
@media (min-width: 1024px) { .secao { padding: 60px 0; } }
.secao-branca { background: #fff; }
.secao-navy   { background: var(--cor-navy); color: #fff; }

.secao-cabeca {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px;
  margin-bottom: 26px;
}
.secao-cabeca > div:first-child { min-width: 0; }
.secao-cabeca .link-seta { margin-left: auto; }
.secao-cabeca-solo { justify-content: center; text-align: center; }

.chapeu {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .24em;
  text-transform: uppercase; color: var(--cor-teal-ink); margin-bottom: 7px;
}
.secao-navy .chapeu { color: var(--cor-teal); }

/*
 * ⚠️ **A COR DO TÍTULO É UM PADRÃO, E NÃO UMA REGRA QUE BRIGA.**
 *
 * Era `.secao h2 { color: navy }` mais uma LISTA de exceções para cada faixa
 * escura. **A lista era o defeito**: mesma especificidade (0,1,1), então quem
 * ganhava era quem estava mais embaixo no arquivo, e todo componente escuro
 * novo precisava lembrar de entrar nela. `.chamada-volante` não entrou, e o
 * título "Agendar o Raio-X Volante" saía **navy sobre navy** na Qualidade.
 * É a mesma lição do sublinhado do painel, que também era uma lista.
 *
 * Com `:where()` a cor padrão cai para (0,0,1) e QUALQUER componente que
 * escureça o próprio chão ganha dizendo a tinta, sem depender de ordem de
 * arquivo nem de entrar em lista nenhuma. A tela nova nasce certa.
 *
 * ⚠️ **Só a COR virou padrão.** O tamanho e a margem continuam onde estavam:
 * baixar a especificidade deles junto mudaria a tipografia de faixas que hoje
 * são sobrescritas de propósito, e isso é mexer no desenho sem ninguém pedir.
 */
.secao h2, .titulo-secao {
  font-size: clamp(21px, 3.4vw, 27px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.18; text-wrap: balance;
  margin: 0;
}
:where(.secao, .faixa) h2, .titulo-secao { color: var(--cor-navy); }
.secao-navy h2 { color: #fff; }

.secao .apoio {
  margin-top: 9px; font-size: 14.5px; line-height: 1.65;
  color: var(--cor-suave); max-width: 66ch;
}
.secao-navy .apoio { color: rgb(255 255 255 / .8); }

.link-seta {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: var(--cor-teal-ink);
  transition: gap .18s;
}
.link-seta:hover { gap: 12px; }

/* ---------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 700; line-height: 1;
  padding: 12px 18px; border-radius: var(--raio-sm);
  border: 1.5px solid transparent; cursor: pointer;
  transition: filter .18s, background .18s, color .18s;
  /* 44px de alvo mínimo: é dedo, não mouse. */
  min-height: 44px;
}
.btn:hover { filter: brightness(.94); }
.btn-navy    { background: var(--cor-navy);    color: #fff; }
.btn-amarelo { background: var(--cor-amarelo); color: var(--cor-navy); font-weight: 800; }
.btn-teal    { background: var(--cor-teal-ink); color: #fff; }
.btn-linha   { border-color: var(--cor-linha); color: var(--cor-teal-ink); background: #fff; }
.btn-linha:hover { background: var(--cor-fundo); filter: none; }
.btn-claro   { border-color: rgb(255 255 255 / .55); color: #fff; background: transparent; }
.btn-claro:hover { background: rgb(255 255 255 / .12); filter: none; }
.btn-contorno-navy { border-color: var(--cor-navy); color: var(--cor-navy); background: transparent; }
.btn-contorno-navy:hover { background: var(--cor-navy); color: #fff; filter: none; }
.btn-bloco   { width: 100%; }

/* ------------------------------------------------------------ faixa aviso */
.faixa-aviso { background: var(--cor-amarelo); color: var(--cor-navy); }
.faixa-aviso.faixa-urgente { background: #C42B2B; color: #fff; }
.faixa-aviso.faixa-novidade { background: var(--cor-teal); color: var(--cor-navy); }
.faixa-in {
  /* mesmo eixo do resto do site, e nao uma medida propria */
  max-width: var(--eixo); margin: 0 auto; padding: 9px var(--respiro);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 11px;
  font-size: 12.5px; line-height: 1.45;
}
.faixa-in strong { font-weight: 700; }
.faixa-in a {
  margin-left: auto; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap;
}

/* ---------------------------------------------------------------- marca */
.marca-link { display: inline-flex; align-items: center; gap: 10px; }
.marca-simbolo {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: linear-gradient(140deg, var(--cor-teal), var(--cor-teal-luz));
  color: var(--cor-navy);
}
.marca-nome { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }
.marca-nome strong { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.marca-nome small {
  font-size: 8.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
}
.marca-nome-claro strong { color: #fff; }
.marca-nome-claro small  { color: var(--cor-teal); }
.marca-nome-escuro strong { color: var(--cor-navy); }
.marca-nome-escuro small  { color: var(--cor-teal-ink); }

/* ------------------------------------------------------------- menu (desktop) */
.menu-item {
  color: rgb(255 255 255 / .78); font-size: 13.5px; font-weight: 500; line-height: 1;
  padding: 7px 0; border-bottom: 2px solid transparent; white-space: nowrap;
  background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer;
  transition: color .18s;
}
.menu-item:hover { color: #fff; }
.menu-item.is-ativo {
  color: var(--cor-teal); font-weight: 700; border-bottom-color: var(--cor-teal);
}

.menu-drop { position: relative; }
.menu-drop-lista {
  position: absolute; left: -14px; top: calc(100% + 12px); z-index: 50;
  min-width: 210px; padding: 7px; border-radius: var(--raio);
  background: #fff; box-shadow: var(--sombra-lg);
  border: 1px solid var(--cor-linha);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.menu-drop.is-aberto .menu-drop-lista,
.menu-drop:hover .menu-drop-lista,
.menu-drop:focus-within .menu-drop-lista {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.menu-drop-lista a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--raio-sm);
  font-size: 13px; font-weight: 600; color: var(--cor-navy);
}
.menu-drop-lista a i { width: 15px; color: var(--cor-teal-ink); }
.menu-drop-lista a:hover { background: var(--cor-fundo); }
.menu-drop-lista a.is-ativo { background: var(--cor-fundo); color: var(--cor-teal-ink); }

/*
 * ⚠️ A ponte invisível entre o botão e a lista.
 * Sem ela o menu fecha no meio do caminho: o cursor sai do botão, atravessa
 * os 12px de vão e o :hover se perde antes de chegar na lista.
 */
.menu-drop::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
}

.btn-resultados {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--cor-teal);
  border: 1.5px solid var(--cor-teal); padding: 9px 14px; border-radius: var(--raio-sm);
  white-space: nowrap; transition: background .18s, color .18s;
}
.btn-resultados:hover { background: var(--cor-teal); color: var(--cor-navy); }

.btn-destaque {
  /* ⚠️ O `gap` faltava, e o ícone ficava encostado na primeira letra. */
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; color: var(--cor-navy);
  background: var(--cor-amarelo); padding: 10px 16px; border-radius: var(--raio-sm);
  white-space: nowrap; transition: filter .18s;
}
.btn-destaque:hover { filter: brightness(.94); }

/* --------------------------------------------------------- hambúrguer */
.botao-hamburguer {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; width: 42px; height: 38px; flex: none;
  border: 1px solid var(--cor-teal); border-radius: var(--raio-sm); background: none;
}
.botao-hamburguer span {
  display: block; width: 17px; height: 2px; background: var(--cor-teal);
  transition: transform .2s, opacity .2s;
}

/* -------------------------------------------------------------- gaveta */
.gaveta { position: fixed; inset: 0; z-index: 90; }
.gaveta[hidden] { display: none; }
.gaveta-fundo {
  position: absolute; inset: 0; background: rgb(var(--cor-tinta-rgb) / .55);
  opacity: 0; transition: opacity .22s;
}
.gaveta.is-aberta .gaveta-fundo { opacity: 1; }

/*
 * ⚠️ A gaveta entra pela ESQUERDA, e não pela direita.
 * O logotipo, a trilha e o começo de toda linha de texto ficam na esquerda:
 * um menu que entra pelo outro lado empurra a leitura para o canto onde não
 * há nada, e é o contrário do que os outros projetos fazem.
 */
.gaveta-painel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(340px, 88vw);
  display: flex; flex-direction: column;
  background: #fff; box-shadow: var(--sombra-lg);
  transform: translateX(-100%); transition: transform .24s ease;
  overflow-y: auto; overscroll-behavior: contain;
}
.gaveta.is-aberta .gaveta-painel { transform: translateX(0); }

/*
 * ⚠️ O topo da gaveta é NAVY, e não branco.
 * As duas artes de logotipo do acervo são para fundo escuro: texto quase
 * branco com detalhe amarelo e turquesa. Sobre o branco da gaveta, a palavra
 * "LifeVet" praticamente sumia. É a mesma razão de o cabeçalho e o rodapé
 * serem navy, e não uma escolha de estética.
 */
.gaveta-topo {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; background: var(--cor-navy);
  border-bottom: 1px solid rgb(255 255 255 / .1);
}
.gaveta-topo .marca-nome-claro strong { color: #fff; }
.gaveta-topo .marca-nome-claro small  { color: var(--cor-teal); }
.gaveta-fechar {
  margin-left: auto; width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; border-radius: var(--raio-sm);
  background: rgb(255 255 255 / .12); color: #fff;
  border: 1px solid rgb(255 255 255 / .2); font-size: 16px;
}
.gaveta-fechar:hover { background: rgb(255 255 255 / .22); }


.gaveta-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.gaveta-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 12px; border-radius: var(--raio-sm);
  font-size: 14px; font-weight: 600; color: var(--cor-navy);
  background: none; border: 0; text-align: left; cursor: pointer;
}
.gaveta-item i:first-child { width: 18px; color: var(--cor-teal-ink); font-size: 14px; }
.gaveta-item span { flex: 1; }
.gaveta-seta { font-size: 11px; color: var(--cor-suave); transition: transform .2s; }
.gaveta-item:hover { background: var(--cor-fundo); }
.gaveta-item.is-ativo { background: var(--cor-fundo); color: var(--cor-teal-ink); }
.gaveta-abre-sub[aria-expanded="true"] .gaveta-seta { transform: rotate(180deg); }

.gaveta-sub { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px 20px; }
.gaveta-sub a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: var(--raio-sm);
  font-size: 13px; font-weight: 500; color: var(--cor-suave);
}
.gaveta-sub a i { width: 16px; color: var(--cor-teal-ink); }
.gaveta-sub a.is-ativo { background: var(--cor-fundo); color: var(--cor-teal-ink); font-weight: 700; }

.gaveta-pe {
  margin-top: auto; padding: 16px; border-top: 1px solid var(--cor-linha);
  display: flex; flex-direction: column; gap: 10px;
}
.gaveta-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px; border-radius: var(--raio-sm); min-height: 44px;
  background: var(--cor-amarelo); color: var(--cor-navy);
  font-size: 13px; font-weight: 800;
}
.gaveta-cta-2 { background: var(--cor-navy); color: #fff; }

.gaveta-unidade {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: var(--raio-sm); background: var(--cor-fundo);
}
.gaveta-unidade span:last-child { display: flex; flex-direction: column; gap: 2px; }
.gaveta-unidade strong { font-size: 12.5px; font-weight: 700; color: var(--cor-navy); }
.gaveta-unidade small  { font-size: 11px; color: var(--cor-suave); }

.gaveta-social { display: flex; gap: 8px; padding-top: 4px; }
.gaveta-social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--raio-sm); background: var(--cor-fundo);
  color: var(--cor-navy); font-size: 15px;
}
.gaveta-social a:hover { background: var(--cor-navy); color: #fff; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(116deg, var(--cor-navy) 0%,
              color-mix(in srgb, var(--cor-navy) 62%, var(--cor-teal-ink)) 48%,
              var(--cor-teal-ink) 100%);
}
.hero::after {
  content: ''; position: absolute; right: -90px; top: -80px;
  width: 460px; height: 460px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 42% 42%, rgb(var(--cor-teal-rgb) / .40), rgb(var(--cor-teal-rgb) / 0) 64%);
}
.hero-in { position: relative; z-index: 2; padding: 38px 0 34px; max-width: 660px; }
@media (min-width: 1024px) { .hero-in { padding: 52px 0 46px; } }

.hero h1 {
  font-size: clamp(28px, 5.4vw, 46px); font-weight: 800;
  line-height: 1.04; letter-spacing: -.028em; text-wrap: balance; margin: 0;
}
.hero h1 .destaque { color: var(--cor-teal-luz); }
.hero .apoio { margin-top: 13px; font-size: 14px; line-height: 1.65; color: rgb(255 255 255 / .84); max-width: 54ch; }
.hero-chapeu {
  display: flex; align-items: center; gap: 9px; margin-bottom: 15px;
  font-size: 10px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase;
  color: var(--cor-teal-luz);
}
/* ⚠️ O traço decorativo depois do chapéu SAIU. Ele media 34x1,5px em
   turquesa-luz e, colado no texto, era lido como travessão: o mesmo
   caractere que este projeto proibiu em todo lugar. Regra de escrita que
   vale para o texto vale para o desenho que imita o texto. */
.hero-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* hero menor, para páginas internas */
.hero-interno .hero-in { padding: 30px 0 28px; max-width: 780px; }
@media (min-width: 1024px) { .hero-interno .hero-in { padding: 40px 0 36px; } }
.hero-interno h1 { font-size: clamp(24px, 4.2vw, 34px); }

.trilha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 11.5px; color: rgb(255 255 255 / .62); margin-bottom: 12px;
}
.trilha a { color: rgb(255 255 255 / .62); }
.trilha a:hover { color: #fff; }
.trilha i { font-size: 9px; }
.trilha [aria-current] { color: #fff; font-weight: 600; }

/* ------------------------------------------------------- busca do hero */
.busca-hero {
  display: flex; align-items: center; gap: 10px; margin-top: 22px;
  padding: 8px 8px 8px 16px; background: #fff; border-radius: var(--raio);
  box-shadow: var(--sombra-lg); max-width: 620px;
}
.busca-hero i { color: var(--cor-suave); }
.busca-hero input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 14px; color: var(--cor-navy); padding: 8px 0;
}
.busca-hero input::placeholder { color: var(--cor-suave); opacity: .75; }
.busca-hero button { flex: none; }

.busca-sugestoes {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px;
  position: relative; z-index: 2;
}
.busca-sugestoes a {
  font-size: 11px; color: rgb(255 255 255 / .84);
  border: 1px solid rgb(255 255 255 / .26); padding: 5px 11px; border-radius: 999px;
}
.busca-sugestoes a:hover { background: rgb(255 255 255 / .12); color: #fff; }

/* -------------------------------------------------------------- atalhos */
.faixa-atalhos { background: #fff; border-bottom: 1px solid var(--cor-linha); }
/*
 * ⚠️ As colunas seguem a QUANTIDADE de atalhos, e não um número fixo.
 * Com `gap: 1px` sobre fundo cinza, a célula vazia não fica vazia: ela vira
 * um retângulo sólido de `--linha`. Medido em /seja-um-conveniado/, que tem
 * 2 atalhos em 5 colunas: um bloco cinza de ~690px logo abaixo do botão
 * "Continuar", numa página onde a clínica decide se confia o laudo à gente.
 * Lê-se como conteúdo que não carregou.
 *
 * É o mesmo defeito que a `.faixa-numeros` já tinha, e o mesmo conserto.
 */
.grade-atalhos {
  display: grid; gap: 1px; background: var(--cor-linha);
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}
.card-atalho {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 14px; background: #fff; transition: background .18s;
}
@media (min-width: 1024px) { .card-atalho { padding: 18px 16px; } }
.card-atalho:hover { background: var(--cor-fundo); }
.card-atalho i { font-size: 19px; color: var(--cor-teal-ink); }
.card-atalho strong { font-size: 13px; font-weight: 800; color: var(--cor-navy); }
.card-atalho span { font-size: 11.5px; line-height: 1.5; color: var(--cor-suave); }

/* -------------------------------------------------------------- números */
.faixa-numeros-fundo { background: #F7FCFD; border-bottom: 1px solid var(--cor-linha); }
.faixa-numeros {
  /* ⚠️ `auto-fit` também no celular. Com `repeat(2, ...)` fixo, uma faixa de
     3 números deixava a quarta célula vazia, e `gap: 1px` sobre fundo cinza
     transforma célula vazia em bloco sólido: o mesmo defeito da grade de
     atalhos, na mesma página. */
  display: grid; gap: 1px; background: var(--cor-linha);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
/*
 * ⚠️ As colunas seguem QUANTOS números existem, e não um 4 fixo.
 * A faixa nasceu com quatro na Sobre; a de Trabalhe conosco tem três, e o
 * `repeat(4, ...)` deixava uma célula vazia grudada na direita, que na tela
 * parece um número que faltou carregar.
 */
@media (min-width: 700px) {
  .faixa-numeros { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
}
.faixa-numeros > div {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 18px 12px; background: #F7FCFD; text-align: center;
}
@media (min-width: 1024px) { .faixa-numeros > div { padding: 20px 16px; } }
.faixa-numeros .n {
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 3.6vw, 29px); font-weight: 600; line-height: 1;
  color: var(--cor-navy);
}
.faixa-numeros .l {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cor-suave);
}

/* -------------------------------------------------------- cartão genérico */
/*
 * ⚠️ `minmax(min(Xpx, 100%), 1fr)` e nao `minmax(Xpx, 1fr)`.
 * Sem o min(), uma coluna de 320px continua pedindo 320px mesmo quando a
 * caixa tem 308, e a pagina inteira ganha barra de rolagem horizontal. Foi
 * o que acontecia em 320px de largura, medido no navegador.
 */
.grade-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grade-cards-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 20px; background: #fff;
  border: 1px solid var(--cor-linha); border-radius: var(--raio);
}
.card .ic {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--raio-sm); background: #E3F5F9;
  color: var(--cor-teal-ink); font-size: 17px; margin-bottom: 3px;
}
.card h3, .card h4 { font-size: 15px; font-weight: 800; color: var(--cor-navy); margin: 0; }
.card p { font-size: 12.5px; line-height: 1.62; color: var(--cor-suave); margin: 0; }
.card .etiqueta {
  align-self: flex-start; margin-top: 3px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500;
  color: var(--cor-teal-ink); background: #E3F5F9; padding: 3px 9px; border-radius: 999px;
}
.card-navy { background: var(--cor-navy); border-color: var(--cor-navy); }
.card-navy h3, .card-navy h4 { color: #fff; }
.card-navy p { color: rgb(255 255 255 / .72); }
.card-navy .ic { background: rgb(var(--cor-teal-rgb) / .18); color: var(--cor-teal-luz); }
.card-amarelo { background: #FFFDF4; border-color: var(--cor-amarelo); }
.card-amarelo .ic { background: #FFF1BF; color: #8A6800; }
.card-link:hover { border-color: var(--cor-teal); }

/* --------------------------------------------------------- card serviço */
.card-servico {
  display: flex; flex-direction: column; gap: 9px; height: 100%;
  padding: 20px; background: #fff;
  border: 1px solid var(--cor-linha); border-radius: var(--raio);
  transition: border-color .18s, transform .18s;
}
.card-servico:hover { border-color: var(--cor-teal); transform: translateY(-2px); }
.card-servico .cat {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cor-teal-ink);
}
.card-servico h3 { font-size: 15.5px; font-weight: 800; color: var(--cor-navy); margin: 0; }
.card-servico p {
  font-size: 12.5px; line-height: 1.62; color: var(--cor-suave); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.card-servico .mais {
  margin-top: auto; padding-top: 8px;
  font-size: 12px; font-weight: 700; color: var(--cor-teal-ink);
  display: inline-flex; align-items: center; gap: 7px;
}

/* filtro de categoria */
.filtros-categoria { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filtros-categoria button {
  font-size: 12.5px; font-weight: 700; padding: 10px 16px; min-height: 42px;
  border-radius: 999px; border: 1.5px solid var(--cor-linha);
  background: #fff; color: var(--cor-suave); cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.filtros-categoria button:hover { border-color: var(--cor-teal); }
.filtros-categoria button.is-ativo {
  background: var(--cor-navy); border-color: var(--cor-navy); color: #fff;
}
.filtros-categoria .conta { opacity: .6; font-weight: 500; }

/* ------------------------------------------------------------- unidades */
.grade-unidades { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.card-unidade {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px; background: #fff;
  border: 1px solid var(--cor-linha); border-radius: var(--raio-lg);
}
.card-unidade-topo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; }
.card-unidade-topo > div { min-width: 0; flex: 1; }
.card-unidade h3 { font-size: 17px; font-weight: 800; color: var(--cor-navy); margin: 0 0 5px; }
.card-unidade .endereco {
  display: flex; align-items: flex-start; gap: 7px; margin: 0;
  font-size: 12.5px; line-height: 1.5; color: var(--cor-suave);
}
.card-unidade .endereco i { margin-top: 3px; color: var(--cor-suave); }

.pilula-situacao {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  padding: 6px 11px; border-radius: 999px;
}
/* ⚠️ 9px, e não 7. A 7 a bolinha era um pingo ao lado de um texto de 12px,
   e o pulso em volta dela mal tinha de onde sair. */
.pilula-situacao .ponto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.esta-aberta  { color: var(--ok);     background: var(--ok-fundo); }
.esta-fechada { color: var(--cor-suave); background: var(--cor-fundo); }

.ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ponto-aberto  { background: var(--ok); }
.ponto-fechado { background: #9AAFBC; }

.card-unidade-aviso {
  display: flex; align-items: flex-start; gap: 9px; margin: 0;
  padding: 10px 13px; border-radius: var(--raio-sm);
  background: var(--alerta-fundo); color: var(--alerta);
  font-size: 12px; line-height: 1.5; font-weight: 600;
}

.card-unidade-contatos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 10px;
  padding: 13px 15px; border-radius: var(--raio-sm); background: #F2FAFC;
}
.card-unidade-contatos .rotulo {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cor-suave); margin-bottom: 3px;
}
.card-unidade-contatos a { font-size: 12.5px; font-weight: 500; color: var(--cor-navy); }
.card-unidade-contatos a:hover { color: var(--cor-teal-ink); }

.card-unidade-horarios { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.card-unidade-horarios > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 10px; margin: 0 -10px; border-radius: var(--raio-sm);
}
.card-unidade-horarios dt { font-size: 12.5px; color: var(--cor-suave); margin: 0; }
.card-unidade-horarios dd { font-size: 12.5px; color: var(--cor-navy); margin: 0; }
.card-unidade-horarios .fechado { color: #9AAFBC; }
.card-unidade-horarios .linha-hoje { background: var(--cor-fundo); }
.card-unidade-horarios .linha-hoje dt,
.card-unidade-horarios .linha-hoje dd { font-weight: 700; color: var(--cor-navy); }
/* O domingo aberto é diferencial que nenhum concorrente tem: ele se destaca. */
.card-unidade-horarios .linha-domingo { background: #FFF6D9; }
.card-unidade-horarios .linha-domingo dt,
.card-unidade-horarios .linha-domingo dd { font-weight: 700; color: var(--cor-navy); }
.marca-hoje {
  margin-left: 7px; font-size: 8.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cor-teal-ink);
  background: #E3F5F9; padding: 2px 6px; border-radius: 999px;
}

.card-unidade-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.card-unidade-acoes .btn { flex: 1 1 auto; padding: 10px 14px; font-size: 12px; }

.nota-crescimento {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  padding: 12px 16px; border: 1px dashed var(--cor-teal); border-radius: var(--raio-sm);
  background: #F7FCFD; font-size: 12px; line-height: 1.55; color: var(--cor-suave);
}
.nota-crescimento i { margin-top: 2px; color: var(--cor-teal-ink); }

/* --------------------------------------------------------------- equipe */
.grade-equipe { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.card-pessoa {
  display: flex; flex-direction: column; overflow: hidden; height: 100%;
  background: #fff; border: 1px solid var(--cor-linha); border-radius: var(--raio);
  transition: border-color .18s, transform .18s;
}
.card-pessoa:hover { border-color: var(--cor-teal); transform: translateY(-2px); }
.card-pessoa .foto {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: linear-gradient(150deg, #D6EFF5, #9CCEDC);
  color: #3E6B7C; font-size: 9px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.card-pessoa .foto img { width: 100%; height: 100%; object-fit: cover; }
.card-pessoa .dados { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.card-pessoa h3 { font-size: 14px; font-weight: 800; color: var(--cor-navy); margin: 0; }
.card-pessoa .cargo { font-size: 12px; color: var(--cor-suave); }
.card-pessoa .crmv { font-size: 10.5px; color: #9AAFBC; }

/* ------------------------------------------------------------ convênios */
.grade-convenios { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.card-convenio {
  display: grid; place-items: center; min-height: 84px; padding: 14px;
  background: #fff; border: 1px solid var(--cor-linha); border-radius: var(--raio);
  font-size: 13px; font-weight: 700; color: var(--cor-suave);
  transition: border-color .18s;
}
.card-convenio:hover { border-color: var(--cor-teal); }
.card-convenio img { max-width: 100%; max-height: 46px; width: auto; height: auto; }

/* ------------------------------------------------------------------ FAQ */
.faq-lista { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: #fff; border: 1px solid var(--cor-linha); border-radius: var(--raio);
  overflow: hidden;
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 700; color: var(--cor-navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { flex: none; color: var(--cor-teal-ink); font-size: 12px; transition: transform .2s; }
.faq-item[open] summary i { transform: rotate(180deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--cor-linha); }
.faq-resposta { padding: 15px 18px 18px; font-size: 13.5px; line-height: 1.7; color: var(--cor-suave); }
.faq-resposta p { margin: 0 0 10px; }
.faq-resposta p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- texto rico */
.prosa { font-size: 15px; line-height: 1.78; color: var(--cor-suave); }
.prosa p { margin: 0 0 16px; }
.prosa p:last-child { margin-bottom: 0; }
.prosa strong { color: var(--cor-navy); font-weight: 700; }
.prosa h3 { font-size: 18px; font-weight: 800; color: var(--cor-navy); margin: 26px 0 10px; }
.prosa ul, .prosa ol { margin: 0 0 16px; padding-left: 22px; }
.prosa li { margin-bottom: 7px; }
.prosa a { color: var(--cor-teal-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- chamada */
.chamada {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px;
  padding: 30px 24px; border-radius: var(--raio-lg); background: var(--cor-navy); color: #fff;
}
@media (min-width: 1024px) { .chamada { padding: 34px 36px; } }
.chamada h2 { font-size: clamp(19px, 3vw, 24px); font-weight: 800; letter-spacing: -.018em; margin: 0; color: #fff; }
.chamada p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: rgb(255 255 255 / .76); max-width: 58ch; }
.chamada .acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }

/* ------------------------------------------------------------ formulário */
.secao-form {
  display: block; margin: 24px 0 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cor-teal-ink);
  padding-bottom: 8px; border-bottom: 1px solid var(--cor-linha);
}
.secao-form:first-child { margin-top: 0; }

.campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-largo { grid-column: 1 / -1; }
.campo label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--cor-navy);
}
.campo label i { color: var(--cor-teal-ink); font-size: 12px; }
.campo label .obrig { color: #C42B2B; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 14px; min-height: 46px;
  border: 1.5px solid var(--cor-linha); border-radius: var(--raio-sm);
  background: #fff; font: inherit; font-size: 14px; color: var(--cor-navy);
  transition: border-color .18s;
}
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 0; border-color: var(--cor-teal);
}
.campo .dica { font-size: 11.5px; color: var(--cor-suave); }
.campo.tem-erro input, .campo.tem-erro select, .campo.tem-erro textarea { border-color: #C42B2B; }
.campo .erro { font-size: 11.5px; font-weight: 600; color: #C42B2B; }

/* --------------------------------------------------- o combobox de busca */
/* Campo de texto comum + lista suspensa própria, no lugar do <datalist> do
   navegador: aqui o destaque do trecho digitado, a cor e a borda seguem o
   resto do site, e a lista abre ABAIXO do campo sem tampar a dica. */
.campo-combobox { position: relative; }
.combobox-lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  max-height: 264px; overflow-y: auto;
  background: #fff; border: 1px solid var(--cor-linha); border-radius: var(--raio-sm);
  box-shadow: var(--sombra-lg);
}
.combobox-lista li {
  padding: 10px 12px; border-radius: 7px;
  font-size: 13.5px; color: var(--cor-tinta); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combobox-lista li:hover,
.combobox-lista li.is-ativa { background: var(--cor-fundo); color: var(--cor-navy); }
.combobox-lista li mark { background: none; color: var(--cor-teal-ink); font-weight: 800; }
.combobox-lista .combobox-vazio,
.combobox-lista .combobox-mais {
  padding: 9px 12px; font-size: 12px; color: var(--cor-suave); cursor: default;
}
.combobox-lista .combobox-mais { border-top: 1px solid var(--cor-linha); margin-top: 4px; }

.aceite { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.55; color: var(--cor-suave); }
.aceite input { width: 18px; height: 18px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--cor-teal-ink); }
.aceite a { color: var(--cor-teal-ink); text-decoration: underline; text-underline-offset: 3px; }

.aviso-form {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px; border-radius: var(--raio-sm);
  background: var(--alerta-fundo); color: #5C4A0E;
  font-size: 12.5px; line-height: 1.6;
}
.aviso-form i { margin-top: 2px; color: var(--alerta); }

/* ------------------------------------------------------------- resultados */
.grade-portas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.porta {
  display: flex; align-items: center; gap: 16px; padding: 22px;
  background: #fff; border: 1px solid var(--cor-linha); border-radius: var(--raio-lg);
  transition: border-color .18s, transform .18s;
}
.porta:hover { border-color: var(--cor-teal); transform: translateY(-2px); }
.porta .ic {
  width: 50px; height: 50px; flex: none; display: grid; place-items: center;
  border-radius: var(--raio); background: #E3F5F9; color: var(--cor-teal-ink); font-size: 21px;
}
.porta strong { display: block; font-size: 15.5px; font-weight: 800; color: var(--cor-navy); }
.porta span { display: block; font-size: 12px; line-height: 1.5; color: var(--cor-suave); margin-top: 3px; }
.porta .seta { margin-left: auto; color: var(--cor-teal-ink); }

/* ---------------------------------------------------------------- rodapé */
.rodape { margin-top: auto; }
.rodape-corpo { background: var(--cor-navy); color: rgb(255 255 255 / .72); padding: 40px 0 34px; }
.rodape-grade {
  display: grid; gap: 30px 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.rodape-marca p { margin: 14px 0 0; font-size: 13px; line-height: 1.6; max-width: 34ch; }
.rodape-social { display: flex; gap: 8px; margin-top: 16px; }
.rodape-social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--raio-sm); background: rgb(255 255 255 / .1); color: #fff; font-size: 15px;
  transition: background .18s;
}
.rodape-social a:hover { background: var(--cor-teal); color: var(--cor-navy); }

.rodape h3 {
  font-size: 13.5px; font-weight: 800; color: #fff; margin: 0 0 12px;
}
.rodape-endereco { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; }
.rodape-situacao {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: 12px; font-weight: 700; color: #fff;
}
.rodape-contatos { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rodape-contatos li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.rodape-contatos i { width: 14px; color: var(--cor-teal); }
.rodape-contatos a { color: rgb(255 255 255 / .85); }
.rodape-contatos a:hover { color: var(--cor-teal); }
.rodape-link-unidade {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--cor-teal);
}

.rodape-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rodape-links a { font-size: 12.5px; color: rgb(255 255 255 / .75); }
.rodape-links a:hover { color: var(--cor-teal); }

.rodape-barra {
  background: color-mix(in srgb, var(--cor-navy) 82%, #000);
  color: rgb(255 255 255 / .58); padding: 14px 0;
}
.rodape-barra-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 20px; text-align: center;
}
.rodape-barra p { margin: 0; font-size: 11.5px; }
.rodape-barra-links { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
.rodape-barra-links a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: rgb(255 255 255 / .7);
}
.rodape-barra-links a:hover { color: var(--cor-teal); }
.rodape-assinatura { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.rodape-assinatura span { text-transform: uppercase; letter-spacing: .1em; font-size: 9px; }
.rodape-assinatura strong { color: rgb(255 255 255 / .8); font-weight: 700; }
.rodape-assinatura:hover strong { color: var(--cor-teal); }

/* ------------------------------------------------------- barra do celular */
.nav-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  background: var(--cor-navy); border-radius: var(--raio-lg) var(--raio-lg) 0 0;
  box-shadow: 0 -6px 24px -12px rgb(0 0 0 / .5);
}
.nav-mobile a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 2px; min-height: 46px;
  font-size: 8.5px; font-weight: 600; color: rgb(255 255 255 / .68); text-align: center;
}
.nav-mobile a i { font-size: 16px; }
.nav-mobile a.is-ativo { color: var(--cor-teal); font-weight: 700; }
.nav-mobile a.is-destaque i { color: var(--cor-amarelo); }
.nav-mobile a.is-destaque.is-ativo i { color: var(--cor-teal); }

/*
 * ⚠️ Sem este respiro a barra fixa cobre o fim do rodapé, e o último link do
 * site fica inalcançável no celular. A classe entra no <body> pelo cabeçalho.
 */
@media (max-width: 1023px) {
  .com-nav-mobile { padding-bottom: 74px; }
}

/* ------------------------------------------------------------- utilidades */
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.vazio {
  padding: 34px 24px; text-align: center; border-radius: var(--raio);
  border: 1px dashed var(--cor-linha); background: #fff;
  font-size: 13.5px; color: var(--cor-suave);
}

/* ==========================================================================
   CARROSSEL DE BANNERS

   Desktop e celular tem estrutura diferente, e nao por capricho: na arte
   deitada (1920x652) sobra o terco esquerdo e o texto cabe sobreposto; na arte
   em pe (480x491) o animal ocupa o centro e nao existe area limpa, entao o
   texto sobe para um bloco navy ACIMA da imagem.
   ========================================================================== */
.carrossel { position: relative; overflow: hidden; background: var(--cor-navy); }

.carrossel-trilho { display: flex; transition: transform .45s ease; }
.carrossel-item   { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; }

/* celular: texto em cima, arte embaixo */
.carrossel-texto { order: 1; background: var(--cor-navy); padding: 26px 0 24px; }
.carrossel-arte  { order: 2; }
/*
 * ⚠️ O RECORTE VERTICAL DA ARTE E POR FAIXA DE LARGURA, e nao um valor fixo.
 *
 * A arte tem 1920x652. O `cover` escala pela largura, entao numa tela de 2545
 * ela fica com 864px de altura para uma faixa de 620: sobram 244px para
 * cortar. Com o padrao (50%) metade disso sai de cima, bem na cabeca do
 * animal, que foi o que o Paulo viu em 1920x1080.
 *
 * Quanto mais larga a tela, mais o corte precisa vir de baixo, onde esta a
 * onda, que se repete e nao faz falta. Dai a escala de 22% ate 8%.
 */
.carrossel-arte img {
  display: block; width: 100%; height: 200px; object-fit: cover; background: #F2F4F5;
  object-position: var(--foco-x, center) 50%;
}
.carrossel-caixa { max-width: 42ch; }
.carrossel-chapeu {
  margin: 0 0 10px; font-size: 10px; font-weight: 800; letter-spacing: .24em;
  text-transform: uppercase; color: var(--cor-teal);
}
.carrossel-caixa h2 {
  margin: 0; font-size: clamp(23px, 5.6vw, 34px); font-weight: 800;
  line-height: 1.08; letter-spacing: -.026em; color: #fff; text-wrap: balance;
}
.carrossel-apoio {
  margin: 12px 0 0; font-size: 13.5px; line-height: 1.62; color: rgb(255 255 255 / .8);
}
.carrossel-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.carrossel-acoes .btn-contorno-navy { border-color: rgb(255 255 255 / .55); color: #fff; }
.carrossel-acoes .btn-contorno-navy:hover { background: rgb(255 255 255 / .14); color: #fff; }

/* desktop: texto sobreposto na area limpa da arte */
@media (min-width: 768px) {
  .carrossel-item { position: relative; display: block; min-height: 340px; }
  .carrossel-arte { position: absolute; inset: 0; order: 0; }
  .carrossel-arte img { height: 100%; object-position: var(--foco-x, center) 22%; }

  .carrossel-texto {
    position: relative; z-index: 2; order: 0; background: none;
    display: flex; align-items: center; min-height: 340px; padding: 34px 0;
  }
  .carrossel-texto .eixo { width: 100%; }

  /*
   * A arte tem FUNDO CLARO, entao o texto sobreposto e navy e ganha um veu
   * claro atras para garantir contraste. Sem o veu, um banner novo com foto
   * escura a esquerda deixaria o titulo ilegivel, e o defeito so apareceria
   * depois que o cliente trocasse a arte pelo painel.
   */
  /*
   * ⚠️ O véu acaba ONDE O TEXTO ACABA, e não em 72% da tela.
   * A primeira versão levava branco a 35% até a metade da arte e só zerava em
   * 72%: o animal, que fica à direita, ficava lavado, e a arte no site parecia
   * desbotada perto do arquivo original. Medido em 1280: a caixa de texto
   * termina em 501px, e o véu ainda estava clareando até 922px.
   *
   * As paradas usam `min(%, px)` para o véu não crescer junto com a tela: em
   * 1920 a porcentagem sozinha empurraria o branco por mais 300px de arte,
   * bem em cima do animal.
   */
  .carrossel-item::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg,
      rgb(255 255 255 / .92) 0,
      rgb(255 255 255 / .84) min(32%, 430px),
      rgb(255 255 255 / .30) min(44%, 600px),
      rgb(255 255 255 / 0)   min(56%, 780px));
  }
  .carrossel-caixa h2 { color: var(--cor-navy); }
  .carrossel-chapeu   { color: var(--cor-teal-ink); }
  .carrossel-apoio    { color: var(--cor-suave); }
  .carrossel-acoes .btn-contorno-navy { border-color: var(--cor-navy); color: var(--cor-navy); }
  .carrossel-acoes .btn-contorno-navy:hover { background: var(--cor-navy); color: #fff; }
}

@media (min-width: 1024px) { .carrossel-item, .carrossel-texto { min-height: 400px; } }
@media (min-width: 1366px) {
  .carrossel-item, .carrossel-texto { min-height: 440px; }
  .carrossel-arte img { object-position: var(--foco-x, center) 18%; }
}

.carrossel-controles {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; pointer-events: none;
}
.carrossel-controles-in { display: flex; align-items: center; gap: 10px; pointer-events: none; }
.carrossel-seta {
  pointer-events: auto; width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; border: 0; cursor: pointer;
  border-radius: 50%; background: rgb(255 255 255 / .9); color: var(--cor-navy);
  box-shadow: var(--sombra);
}
.carrossel-seta:hover { background: #fff; }
.carrossel-pontos { pointer-events: auto; display: flex; gap: 7px; margin: 0 auto; }
.carrossel-pontos button {
  width: 9px; height: 9px; padding: 0; border: 0; cursor: pointer;
  border-radius: 999px; background: rgb(255 255 255 / .55);
  transition: width .2s, background .2s;
}
.carrossel-pontos button.is-ativo { width: 24px; background: var(--cor-amarelo); }

@media (max-width: 767px) {
  .carrossel-controles { bottom: 8px; }
  .carrossel-pontos button { background: rgb(25 43 91 / .35); }
  .carrossel-pontos button.is-ativo { background: var(--cor-navy); }
}

/* ==========================================================================
   FAIXA DE SELOS
   ========================================================================== */
.faixa-selos { background: var(--cor-navy); border-bottom: 1px solid rgb(255 255 255 / .08); }
.grade-selos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: rgb(255 255 255 / .1);
}
@media (min-width: 900px) { .grade-selos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grade-selos li { background: var(--cor-navy); }
.selo {
  display: flex; align-items: center; gap: 11px; height: 100%;
  padding: 14px 12px; transition: background .18s;
}
@media (min-width: 1024px) { .selo { padding: 16px 14px; gap: 13px; } }
a.selo:hover { background: rgb(255 255 255 / .06); }
.selo-ic {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: var(--raio-sm); background: rgb(var(--cor-teal-rgb) / .16);
  color: var(--cor-teal-luz); font-size: 16px;
}
.selo-ic img { width: 26px; height: 26px; object-fit: contain; }
.selo-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.selo-texto strong {
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #fff;
}
.selo-texto small { font-size: 11px; line-height: 1.4; color: rgb(255 255 255 / .62); }

/* ==========================================================================
   RESOLUCOES CONFERIDAS

   320x568 (iPhone 5) · 375x667 (iPhone 6) · 768 (tablet) · 1280x672 (Note TPV)
   1366x768 (Note Empresa 01) · 1440x900 (Note Empresa 02)

   O eixo de 1200px so encosta nas bordas a partir de 1248 (1200 mais 2x24).
   Em 1280, 1366 e 1440 o conteudo fica centralizado com folga; abaixo disso o
   respiro segura a margem.
   ========================================================================== */

/* 320px e o piso real: abaixo disso nao existe telefone em uso. */
@media (max-width: 359px) {
  :root { --respiro: 12px; }
  .hero h1 { font-size: 25px; }
  .carrossel-caixa h2 { font-size: 21px; }
  .btn { padding: 11px 14px; font-size: 12.5px; }
  .card-atalho { padding: 13px 11px; }
  .card-atalho strong { font-size: 12px; }
  .card-atalho span { font-size: 10.5px; }
  .faixa-numeros .n { font-size: 20px; }
  .nav-mobile a { font-size: 8px; }
  .nav-mobile a i { font-size: 15px; }
  .card-unidade-acoes .btn { flex: 1 1 100%; }
}

/* Tablet: o rodape ainda nao tem largura para quatro colunas. */
@media (min-width: 768px) and (max-width: 1023px) {
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Notebook de 1024 a 1365: o logotipo, o menu e os dois botoes disputam a
   mesma linha. Tudo encolhe um pouco em vez de quebrar. */
@media (min-width: 1024px) and (max-width: 1365px) {
  .menu-item { font-size: 12.5px; }
  .btn-resultados, .btn-destaque { font-size: 11.5px; padding: 9px 12px; }
}

/* ==========================================================================
   FAIXA DE APRESENTACAO (home)

   Substitui o hero grande da home: o carrossel ja e o topo visual, e dois
   blocos gigantes empilhados cansam antes de dizer qualquer coisa. Aqui fica
   o <h1> da pagina, que muda com o publico escolhido, e a busca de exames
   quando quem esta lendo e clinica.
   ========================================================================== */
.apresentacao { background: var(--cor-fundo); border-bottom: 1px solid var(--cor-linha); }
.apresentacao-in { padding: 30px 0 28px; max-width: 700px; }
@media (min-width: 1024px) { .apresentacao-in { padding: 38px 0 34px; } }

.apresentacao h1 {
  margin: 0; font-size: clamp(24px, 4.4vw, 36px); font-weight: 800;
  line-height: 1.08; letter-spacing: -.026em; color: var(--cor-navy); text-wrap: balance;
}
.apresentacao .chapeu { margin-bottom: 9px; }
.apresentacao .apoio {
  margin-top: 11px; font-size: 14.5px; line-height: 1.65;
  color: var(--cor-suave); max-width: 62ch;
}
.apresentacao .apoio p { margin: 0; }
.apresentacao-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* A busca sobre fundo claro precisa de contorno, nao de sombra: sombra sobre
   claro some, e a caixa fica boiando sem limite. */
.apresentacao .busca-hero {
  box-shadow: none; border: 1.5px solid var(--cor-teal); max-width: 620px; margin-top: 20px;
}
.busca-sugestoes-claro a {
  color: var(--cor-teal-ink); border-color: var(--cor-linha); background: #fff;
}
.busca-sugestoes-claro a:hover { background: var(--cor-fundo); color: var(--cor-navy); }

/* ==========================================================================
   ALVO DE TOQUE

   No celular a mira e o dedo, nao o cursor: 44px e o minimo confortavel.
   Medido no navegador a 320px, estes eram os que ficavam abaixo disso.
   ========================================================================== */
@media (pointer: coarse), (max-width: 1023px) {
  .botao-hamburguer     { width: 44px; height: 44px; }
  .carrossel-seta       { width: 44px; height: 44px; }
  .busca-sugestoes a    { padding: 10px 14px; }
  .faq-item summary     { padding: 18px; }

  /* Link de texto com seta: a area clicavel cresce sem o texto crescer. */
  .link-seta, .rodape-link-unidade, .rodape-barra-links a, .rodape-links a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .rodape-contatos li a { min-height: 40px; display: inline-flex; align-items: center; }
  .card-unidade-contatos a { min-height: 40px; display: inline-flex; align-items: center; }
  .rodape-social a { width: 44px; height: 44px; }
  .rodape-assinatura { min-height: 44px; }
  .gaveta-social a { width: 44px; height: 44px; }
}

/* ==========================================================================
   CONVITE DE INSTALACAO DO APLICATIVO
   ========================================================================== */
/*
 * ⚠️ **O CONVITE NÃO DIVIDE O CANTO COM O BOTÃO FLUTUANTE.**
 *
 * Ele morava em `right: 24px; bottom: 24px` com `z-index: 70`, e o botão do
 * Lifynho mora em `right: 16px; bottom: 20px` com `z-index: 75`: mesmo canto,
 * e o botão por cima. O que sumia embaixo dele era justamente o **Instalar**,
 * que é a única coisa que o convite existe para oferecer.
 *
 * ⚠️ No celular era pior, e não melhor: o cartão ocupa a largura toda em
 * `bottom: 86px`, e o botão, que ali sobe para `bottom: 82px` por causa da
 * barra de atalhos, ficava em cima da metade direita do cartão.
 *
 * Agora ele é **centralizado embaixo**, que é onde ninguém mais mora, e no
 * celular sobe para acima do botão. Um convite que aparece uma vez por dia não
 * pode disputar espaço com um controle que fica na tela o tempo todo.
 */
.convite-app {
  position: fixed; z-index: 70;
  left: 50%; transform: translateX(-50%);
  /* Acima do botão flutuante (82 de base + 64 de botão + respiro), e não ao
     lado dele: no telefone não sobra largura para os dois na mesma linha. */
  bottom: 158px;
  width: min(460px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--raio-lg);
  background: #fff; border: 1px solid var(--cor-linha); box-shadow: var(--sombra-lg);
}
.convite-app[hidden] { display: none; }
.convite-app img { border-radius: 11px; flex: none; }
.convite-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.convite-texto strong { font-size: 13px; font-weight: 800; color: var(--cor-navy); }
.convite-texto span { font-size: 11.5px; line-height: 1.45; color: var(--cor-suave); }
.convite-app .btn { flex: none; padding: 10px 16px; min-height: 40px; font-size: 12.5px; }
.convite-fechar {
  position: absolute; top: -10px; right: -6px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--cor-linha); border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--cor-suave); font-size: 13px;
}

@media (min-width: 1024px) {
  /* Sem barra de atalhos no rodapé, o convite desce para junto da borda:
     centralizado, ele passa longe do botão do canto. */
  .convite-app { bottom: 24px; }
}

/* ==========================================================================
   TELA GRANDE: 1600, 1920 e 2560

   Um eixo fixo de 1200px numa tela de 2560 deixa 680px de margem vazia de
   cada lado, e o site parece um cartao perdido no meio do monitor. Aqui o
   eixo cresce por faixa, sem nunca passar do ponto em que a linha de texto
   fica larga demais para ler.

   O limite nao e estetico: acima de ~90 caracteres por linha o olho perde o
   comeco da linha seguinte. Por isso o eixo cresce e o TEXTO CORRIDO nao,
   ele continua preso ao proprio `max-width` em ch.
   ========================================================================== */
@media (min-width: 1600px) { :root { --eixo: 1320px; --respiro: 32px; } }
@media (min-width: 1920px) { :root { --eixo: 1440px; --respiro: 40px; } }
@media (min-width: 2400px) { :root { --eixo: 1560px; } }

/* O carrossel e faixa cheia, entao numa tela de 2560 ele viraria uma tarja de
   altura enorme. A altura para de crescer e a arte se ajusta por cover. */
/*
 * ⚠️ A ALTURA DA FAIXA DECIDE O QUANTO A ARTE E CORTADA, e o efeito e o
 * contrario do que parece: como o `cover` escala pela LARGURA (1905/1920 =
 * 0,99), a arte fica com ~647px de altura. Faixa de 500px corta 147px; faixa
 * de 580 corta 67. Faixa mais BAIXA corta MAIS.
 *
 * O `object-position` de cada banner (coluna `focus`, "right 18%") decide de
 * onde sai esse corte: 18% em cima e 82% embaixo, para a cabeca do animal
 * ficar inteira. O que sai embaixo e a onda, que se repete.
 */
@media (min-width: 1600px) {
  .carrossel-item, .carrossel-texto { min-height: 540px; }
  .carrossel-caixa { max-width: 46ch; }
  .carrossel-arte img { object-position: var(--foco-x, center) 14%; }
}
@media (min-width: 1920px) {
  .carrossel-item, .carrossel-texto { min-height: 580px; }
  .carrossel-arte img { object-position: var(--foco-x, center) 12%; }
}
@media (min-width: 2400px) {
  .carrossel-item, .carrossel-texto { min-height: 660px; }
  .carrossel-arte img { object-position: var(--foco-x, center) 6%; }
  /*
   * A arte de origem tem 1920px de largura. Acima disso ela e ampliada e
   * perde nitidez. O `image-rendering` nao resolve ampliacao de foto, entao
   * o que se faz e reduzir o peso visual: a arte fica mais para o lado e o
   * veu branco cobre mais, porque o texto e que precisa estar nitido.
   */
  .carrossel-item::before {
    background: linear-gradient(90deg,
      rgb(255 255 255 / .95) 0%, rgb(255 255 255 / .9) 40%,
      rgb(255 255 255 / .4) 62%, rgb(255 255 255 / 0) 78%);
  }
}

/* Em tela larga o rodape tem espaco para as quatro colunas ficarem soltas
   demais; um limite proprio segura a leitura. */
@media (min-width: 1920px) {
  .rodape-marca p { max-width: 40ch; }
  .grade-selos    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*
 * O texto corrido NAO acompanha o eixo. Numa tela de 2560 com eixo de 1560,
 * um paragrafo de largura cheia passaria de 150 caracteres por linha, e acima
 * de ~75 o olho ja perde o comeco da linha seguinte.
 *
 * ⚠️ `ch` mede a largura do algarismo zero, que em Montserrat e bem mais largo
 * que a letra media: 74ch renderizou 97 caracteres reais, medido no navegador.
 * Por isso o numero aqui e MENOR do que a conta ingenua sugere.
 */
@media (min-width: 1600px) {
  .secao .apoio, .apresentacao .apoio, .carrossel-apoio { max-width: 52ch; }
  .prosa { max-width: 56ch; }
}

/* ==========================================================================
   FAIXA "PARA CLINICAS"

   Substitui o alternador "Sou tutor / Sou veterinario", que trocava a home
   inteira em silencio. Uma porta que se ve e melhor que um modo que se
   descobre: quem e clinica acha, e quem e tutor nao perde nada.

   Fica discreta de proposito. Ela nao disputa atencao com o conteudo do
   tutor, que e o dono da pagina.
   ========================================================================== */
.faixa-clinicas {
  background: color-mix(in srgb, var(--cor-navy) 88%, #000);
  border-bottom: 1px solid rgb(255 255 255 / .07);
}
.faixa-clinicas-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding-top: 9px; padding-bottom: 9px;
}
.faixa-clinicas-texto {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgb(255 255 255 / .66);
}
.faixa-clinicas-texto i { color: var(--cor-teal); }
.faixa-clinicas-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--cor-teal);
  transition: gap .18s, color .18s;
}
.faixa-clinicas-link:hover { gap: 12px; color: var(--cor-teal-luz); }

@media (max-width: 560px) {
  .faixa-clinicas-in { justify-content: center; text-align: center; }
}
@media (pointer: coarse), (max-width: 1023px) {
  .faixa-clinicas-link { min-height: 40px; }
}

/* ==========================================================================
   ESPECIES ATENDIDAS

   A pergunta numero um de quem chega ao site e "voces atendem o meu bicho?".
   O site atual nao responde isso em lugar nenhum: so diz "animais de
   estimacao".
   ========================================================================== */
.grade-especies {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.especie {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; background: #fff;
  border: 1px solid var(--cor-linha); border-radius: var(--raio);
}
.especie-ic {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 14px; background: #E3F5F9;
  color: var(--cor-teal-ink); font-size: 21px;
}
.especie strong {
  display: block; font-size: 15px; font-weight: 800; color: var(--cor-navy);
}
/*
 * ⚠️ O seletor é `.especie > div span` e NÃO `.especie span`.
 * A caixa do ícone também é um `<span>`, e `.especie span` (classe + tipo)
 * tem mais peso que `.especie-ic` (só classe): ela vencia, e o ícone perdia
 * a caixa centralizada de 46px, virava texto de 12px colado no canto de cima
 * e ficava com a cor do texto de apoio. É o defeito clássico de especificidade
 * e não aparece como erro nenhum, só como um ícone torto.
 */
.especie > div span {
  display: block; margin-top: 3px;
  font-size: 12px; line-height: 1.5; color: var(--cor-suave);
}

/* ==========================================================================
   COMO FUNCIONA (passos numerados)

   ⚠️ A numeracao aqui nao e enfeite: e uma SEQUENCIA de verdade, e a ordem
   muda o sentido. Numero em lista que nao tem ordem e ruido.
   ========================================================================== */
.passos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  counter-reset: passo;
}
.passos li {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 20px 20px;
  border: 1px solid var(--cor-linha); border-radius: var(--raio);
  background: var(--cor-fundo);
}
.passo-num {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  color: var(--cor-teal-ink);
}
.passo-ic {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--raio-sm); background: #fff;
  border: 1px solid var(--cor-linha);
  color: var(--cor-teal-ink); font-size: 17px;
}
.passos strong {
  display: block; font-size: 14.5px; font-weight: 800; color: var(--cor-navy);
}
.passos p {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.62; color: var(--cor-suave);
}

/*
 * A partir de 900px os quatro passos ficam em linha e ganham a seta que
 * mostra que um leva ao outro. Abaixo disso a seta some: em coluna, a
 * proximidade ja diz a ordem.
 */
@media (min-width: 900px) {
  .passos li:not(:last-child)::after {
    content: ''; position: absolute; right: -9px; top: 42px; z-index: 1;
    width: 12px; height: 12px; rotate: 45deg;
    border-top: 1px solid var(--cor-linha); border-right: 1px solid var(--cor-linha);
    background: var(--cor-fundo);
  }
}

/* A chamada final ganha o chapeu, para dizer de cara de quem ela e. */
.chamada .chapeu { color: var(--cor-teal); margin-bottom: 8px; }

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.formulario { display: flex; flex-direction: column; gap: 4px; }

.rotulo-grupo {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--cor-navy);
}
.rotulo-grupo i { color: var(--cor-teal-ink); font-size: 12px; }

.campo-com-botao { display: flex; gap: 8px; align-items: stretch; }
.campo-com-botao input { flex: 1; min-width: 0; }
.campo-com-botao .btn { flex: none; padding: 12px 14px; }
@media (max-width: 480px) {
  .campo-com-botao { flex-wrap: wrap; }
  .campo-com-botao .btn { width: 100%; }
}

/* O erro que veio do servidor, ao lado do campo que ele critica. Lista de
   erros no topo obriga a pessoa a procurar qual e qual. */
.campo .erro {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: #C42B2B;
}
.campo .erro::before { content: '\26A0'; font-size: 11px; }
.campo .erro.erro-aviso { color: var(--alerta); }

.acoes-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cor-linha);
}
.dica-envio {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 11.5px; line-height: 1.5; color: var(--cor-suave);
}
.dica-envio i { color: var(--cor-teal-ink); }

.btn-enviar.enviando { opacity: .7; cursor: progress; }
.btn-ok { border-color: var(--ok); color: var(--ok); }

.resposta-form {
  padding: 14px 16px; border-radius: var(--raio-sm);
  font-size: 13px; line-height: 1.6; margin-top: 14px;
}
.resposta-erro { background: #FBE9E9; color: #8E2020; }

/* ==========================================================================
   ESCOLHA DO ASSUNTO

   O assunto decide os campos seguintes, entao ele nao pode ser uma lista
   suspensa escondida no meio do formulario: e a primeira decisao da pessoa.
   ========================================================================== */
.escolha-assunto {
  display: grid; gap: 10px; margin-bottom: 6px;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.assunto { display: block; cursor: pointer; }
.assunto input { position: absolute; opacity: 0; width: 0; height: 0; }

.assunto-caixa {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  padding: 15px 16px; border-radius: var(--raio);
  border: 1.5px solid var(--cor-linha); background: #fff;
  transition: border-color .18s, background .18s;
}
.assunto-caixa i { font-size: 17px; color: var(--cor-teal-ink); margin-bottom: 4px; }
.assunto-caixa strong { font-size: 13.5px; font-weight: 800; color: var(--cor-navy); }
.assunto-caixa small { font-size: 11.5px; line-height: 1.45; color: var(--cor-suave); }

.assunto:hover .assunto-caixa { border-color: var(--cor-teal); }

/*
 * ⚠️ O item escolhido muda o FUNDO e a espessura, nao ganha borda colorida
 * grossa. Borda de cor em cartao ativo briga com o resto da tela e faz o
 * bloco parecer um alerta.
 */
.assunto input:checked + .assunto-caixa {
  background: var(--cor-navy); border-color: var(--cor-navy);
}
.assunto input:checked + .assunto-caixa i { color: var(--cor-teal); }
.assunto input:checked + .assunto-caixa strong { color: #fff; }
.assunto input:checked + .assunto-caixa small { color: rgb(255 255 255 / .7); }
.assunto input:focus-visible + .assunto-caixa { outline: 2px solid var(--cor-teal-ink); outline-offset: 2px; }

.grupo-condicional { display: block; }
.grupo-condicional[hidden] { display: none; }

/* ==========================================================================
   SELETOR DE EXAMES

   O contato deixa de ser "tenho uma duvida" e vira um pedido com a lista do
   que o veterinario pediu.
   ========================================================================== */
.seletor-exames {
  border: 1px solid var(--cor-linha); border-radius: var(--raio);
  background: #fff; overflow: hidden;
}
.seletor-busca {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--cor-linha);
}
.seletor-busca i { color: var(--cor-suave); }
.seletor-busca input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 14px; color: var(--cor-navy); padding: 4px 0;
}

.seletor-lista {
  list-style: none; margin: 0; padding: 6px;
  max-height: 268px; overflow-y: auto; overscroll-behavior: contain;
}
.seletor-lista li[hidden] { display: none; }
.seletor-lista label {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 11px; border-radius: var(--raio-sm); cursor: pointer;
  min-height: 44px;
}
.seletor-lista label:hover { background: var(--cor-fundo); }
.seletor-lista input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--cor-teal-ink); }
.seletor-lista strong { display: block; font-size: 13px; font-weight: 600; color: var(--cor-navy); }
.seletor-lista small { display: block; font-size: 11px; color: var(--cor-suave); margin-top: 1px; }

.seletor-vazio {
  margin: 0; padding: 14px 16px; border-top: 1px solid var(--cor-linha);
  background: var(--alerta-fundo); color: #5C4A0E; font-size: 12.5px; line-height: 1.6;
}

.seletor-escolhidos {
  padding: 13px 16px; border-top: 1px solid var(--cor-linha); background: var(--cor-fundo);
  display: flex; flex-direction: column; gap: 9px;
}
.seletor-escolhidos > div { display: flex; flex-wrap: wrap; gap: 7px; }
.escolhido {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 8px 12px; border-radius: 999px; min-height: 36px;
  background: var(--cor-navy); color: #fff; border: 0;
}
.escolhido i { font-size: 11px; opacity: .7; }
.escolhido:hover i { opacity: 1; }

/* ==========================================================================
   PILULAS DE SELECAO MULTIPLA
   ========================================================================== */
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilula { cursor: pointer; }
.pilula input { position: absolute; opacity: 0; width: 0; height: 0; }
.pilula span {
  display: inline-flex; align-items: center; min-height: 42px;
  padding: 10px 16px; border-radius: 999px;
  border: 1.5px solid var(--cor-linha); background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--cor-suave);
  transition: background .18s, color .18s, border-color .18s;
}
.pilula:hover span { border-color: var(--cor-teal); }
.pilula input:checked + span {
  background: var(--cor-navy); border-color: var(--cor-navy); color: #fff;
}
.pilula input:focus-visible + span { outline: 2px solid var(--cor-teal-ink); outline-offset: 2px; }

/* ==========================================================================
   FORMULARIO EM ETAPAS

   Trinta e poucos campos numa pagina so viram um paredao que ninguem termina.
   ========================================================================== */
.passos-form {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.passos-form button {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 100%; padding: 4px 2px 0; border: 0; background: none;
  cursor: pointer; font: inherit;
}
.passos-form button:disabled { cursor: default; }

.passo-bolha {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; font-size: 12px; font-weight: 600;
  background: var(--cor-linha); color: var(--cor-suave);
  transition: background .2s, color .2s;
}
.passo-rotulo {
  font-size: 11px; font-weight: 600; line-height: 1.3; text-align: center;
  color: var(--cor-suave);
}

/* A trilha desenha a linha entre os passos, e nao um traco embaixo do atual. */
.passos-form li { position: relative; }
/* ⚠️ O conector começa DEPOIS da bolha anterior e termina ANTES da própria.
   Com `left: -52%` e `width: 100%` ele entrava 16px dentro do círculo do
   passo anterior e cortava o número no meio. A bolha tem 32px, então o recuo
   é de 16px de cada lado, medido a partir do centro de cada item. */
.passos-form li:not(:first-child)::before {
  content: ''; position: absolute; top: 20px; height: 2px;
  left: calc(-50% + 20px); width: calc(100% - 40px);
  background: var(--cor-linha);
}
.passos-form li.feito:not(:first-child)::before,
.passos-form li.atual:not(:first-child)::before { background: var(--cor-teal); }

.passos-form li.atual .passo-bolha { background: var(--cor-navy); color: #fff; }
.passos-form li.atual .passo-rotulo { color: var(--cor-navy); font-weight: 800; }
.passos-form li.feito .passo-bolha { background: var(--cor-teal); color: var(--cor-navy); }
.passos-form li.feito .passo-rotulo { color: var(--cor-teal-ink); }

@media (max-width: 560px) {
  .passo-rotulo { display: none; }
  .passos-form li:not(:first-child)::before { top: 16px; }
  .passos-form { gap: 0; }
}

.etapa { border: 0; margin: 0; padding: 0; min-width: 0; }
.etapa[hidden] { display: none; }

.acoes-etapa {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cor-linha);
}
.acoes-etapa [data-anterior] { margin-right: auto; }
@media (max-width: 480px) {
  .acoes-etapa { flex-direction: column-reverse; }
  .acoes-etapa .btn { width: 100%; }
  .acoes-etapa [data-anterior] { margin-right: 0; }
}

.escolha-tipo { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.tipo { cursor: pointer; flex: 1 1 200px; }
.tipo input { position: absolute; opacity: 0; width: 0; height: 0; }
.tipo span {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 16px; border-radius: var(--raio);
  border: 1.5px solid var(--cor-linha); background: #fff;
  font-size: 13px; font-weight: 700; color: var(--cor-suave);
}
.tipo input:checked + span {
  background: var(--cor-navy); border-color: var(--cor-navy); color: #fff;
}
.tipo input:checked + span i { color: var(--cor-teal); }
.tipo input:focus-visible + span { outline: 2px solid var(--cor-teal-ink); outline-offset: 2px; }

.localizacao {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 14px; padding: 14px 16px;
  border: 1px dashed var(--cor-teal); border-radius: var(--raio-sm); background: #F7FCFD;
}
.localizacao .dica { margin: 0; }

/* ==========================================================================
   CANAL DE ATENDIMENTO AGORA

   Unidade aberta leva para o WhatsApp, que responde na hora. Unidade fechada
   leva para o formulario, que nao some. Mandar alguem para o WhatsApp as 22h
   e prometer uma resposta que nao vem.
   ========================================================================== */
.canal-agora {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 16px 20px; border-radius: var(--raio-lg);
}
.canal-agora > div { flex: 1; min-width: 210px; display: flex; flex-direction: column; gap: 3px; }
.canal-agora strong { font-size: 14.5px; font-weight: 800; color: var(--cor-navy); }
.canal-agora span { font-size: 12.5px; line-height: 1.55; color: var(--cor-suave); }
.canal-aberto  { background: var(--ok-fundo); }
.canal-fechado { background: var(--cor-fundo); border: 1px solid var(--cor-linha); }

/* ==========================================================================
   SUCESSO DO ENVIO

   Substitui o formulario inteiro. Deixar o formulario preenchido na tela
   depois do envio faz gente clicar de novo achando que nao foi.
   ========================================================================== */
.form-sucesso {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 40px 28px; text-align: center;
  background: #fff; border: 1px solid var(--cor-linha); border-radius: var(--raio-lg);
}
.sucesso-ic {
  width: 58px; height: 58px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ok-fundo); color: var(--ok); font-size: 24px;
}
.form-sucesso h3 {
  margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--cor-navy);
}
.sucesso-apoio { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--cor-suave); max-width: 46ch; }

.sucesso-protocolo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 18px; border-radius: var(--raio); background: var(--cor-fundo);
}
.sucesso-protocolo .mono {
  font-size: 20px; font-weight: 600; letter-spacing: 2px; color: var(--cor-navy);
}

/* ==========================================================================
   ACOMPANHAMENTO DO PROTOCOLO
   ========================================================================== */
.cartao-protocolo {
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px; background: #fff;
  border: 1px solid var(--cor-linha); border-radius: var(--raio-lg);
}
.cartao-protocolo-topo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.cartao-protocolo-topo > div { flex: 1; min-width: 0; }
.protocolo-codigo {
  margin: 4px 0 2px; font-size: 24px; font-weight: 600; letter-spacing: 2px; color: var(--cor-navy);
}
.protocolo-data { margin: 0; font-size: 12px; color: var(--cor-suave); }

.trilha-protocolo {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  border-top: 2px solid var(--cor-linha);
}
.trilha-protocolo li { position: relative; padding: 18px 12px 0 0; }
.trilha-protocolo li::before {
  content: ''; position: absolute; left: 0; top: -8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cor-linha); border: 3px solid #fff;
}
.trilha-protocolo li.feito::before { background: var(--cor-teal-ink); }
.trilha-protocolo li.agora::before { background: var(--cor-amarelo); }
.trilha-protocolo strong { display: block; font-size: 12.5px; font-weight: 800; color: #97AAB9; }
.trilha-protocolo li.feito strong,
.trilha-protocolo li.agora strong { color: var(--cor-navy); }
.trilha-protocolo span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--cor-suave); }

.protocolo-eventos { display: flex; flex-direction: column; gap: 9px; }
.protocolo-eventos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.protocolo-eventos li { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--cor-suave); }
.protocolo-eventos .mono { color: var(--cor-navy); font-size: 11.5px; min-width: 118px; }

.protocolo-acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   JANELA DOS TERMOS

   Cabecalho e rodape parados, corpo rolando sozinho: texto legal e longo e nao
   pode empurrar a pagina inteira.
   ========================================================================== */
.modal-termos { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; }
.modal-termos[hidden] { display: none; }
.modal-fundo {
  position: absolute; inset: 0; background: rgb(var(--cor-tinta-rgb) / .6);
  opacity: 0; transition: opacity .22s;
}
.modal-termos.is-aberto .modal-fundo { opacity: 1; }

.modal-caixa {
  position: relative; z-index: 1;
  width: 100%; max-width: 680px; max-height: min(82vh, 760px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--raio-lg); box-shadow: var(--sombra-lg);
  transform: translateY(14px); opacity: 0;
  transition: transform .22s, opacity .22s;
}
.modal-termos.is-aberto .modal-caixa { transform: translateY(0); opacity: 1; }

.modal-topo {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px; border-bottom: 1px solid var(--cor-linha);
}
.modal-topo h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--cor-navy); }
.modal-data { margin: 3px 0 0; font-size: 11.5px; color: var(--cor-suave); }
.modal-fechar {
  margin-left: auto; width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; border: 0; cursor: pointer;
  border-radius: var(--raio-sm); background: var(--cor-fundo); color: var(--cor-navy); font-size: 16px;
}

.modal-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 22px; }
.modal-rascunho {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px;
  padding: 12px 14px; border-radius: var(--raio-sm);
  background: var(--alerta-fundo); color: #5C4A0E; font-size: 12.5px; line-height: 1.55;
}

.modal-pe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; border-top: 1px solid var(--cor-linha); background: var(--cor-fundo);
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
}

@media (max-width: 520px) {
  .modal-termos { padding: 0; }
  .modal-caixa { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; }
  .modal-pe { border-radius: 0; }
  .modal-pe .btn { width: 100%; }
}

/* =============================================================================
   MANUAL DE EXAMES  ·  Fase 4
   ========================================================================== */

/* --------------------------------------------------------------- BUSCA */
.secao-busca-exames { padding-bottom: 0; }

.manual-busca { max-width: 720px; margin: 0 auto; }

.manual-campo {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid var(--linha);
  border-radius: 999px; padding: 6px 6px 6px 20px;
  box-shadow: 0 4px 20px rgba(25, 43, 91, .07);
  transition: border-color .15s, box-shadow .15s;
}
.manual-campo:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(58, 194, 214, .18);
}
.manual-campo > i { color: var(--teal-ink); font-size: 17px; flex: none; }

.manual-campo input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 17px; padding: 12px 0; color: var(--tinta);
}
.manual-campo input::-webkit-search-cancel-button { display: none; }

.manual-limpar {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; color: var(--suave); text-decoration: none; flex: none;
}
.manual-limpar:hover { background: var(--fundo); color: var(--tinta); }
.manual-campo .btn { flex: none; border-radius: 999px; }

.dica-busca {
  margin: 12px 0 0; text-align: center;
  font-size: 14px; color: var(--suave);
}
.dica-busca strong { color: var(--teal-ink); font-weight: 600; }

/* --------------------------------------------------------------- ESPECIE */
.filtro-especie {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-top: 22px;
}

.pastilha-esp {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--linha); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--tinta); text-decoration: none;
  transition: all .14s;
}
.pastilha-esp:hover { border-color: var(--teal); }
.pastilha-esp.ativa { background: var(--navy); border-color: var(--navy); color: #fff; }
.pastilha-esp.ativa i { color: var(--teal-glow); }

/* --------------------------------------------------------------- GRADE */
.manual-grade {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 32px; align-items: start;
}

@media (max-width: 900px) {
  .manual-grade { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

.manual-lado { display: flex; flex-direction: column; gap: 10px; }

.filtro-caixa {
  background: #fff; border: 1px solid var(--linha); border-radius: 12px;
  overflow: hidden;
}
.filtro-caixa > summary {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 700; color: var(--navy);
}
.filtro-caixa > summary::-webkit-details-marker { display: none; }
.filtro-caixa > summary::after {
  content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  margin-left: auto; font-size: 11px; color: var(--suave);
  transition: transform .16s;
}
.filtro-caixa[open] > summary::after { transform: rotate(180deg); }
.filtro-caixa > summary > i { color: var(--teal-ink); font-size: 13px; }

.filtro-lista { list-style: none; margin: 0; padding: 0 8px 10px; }
.filtro-lista a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 14px; color: var(--tinta); text-decoration: none;
}
.filtro-lista a:hover { background: var(--fundo); }
.filtro-lista a.ativo { background: var(--navy); color: #fff; font-weight: 600; }
.filtro-lista a b {
  font-size: 11px; font-weight: 700; color: var(--suave);
  background: var(--fundo); padding: 2px 7px; border-radius: 999px;
}
.filtro-lista a.ativo b { background: rgba(255,255,255,.2); color: #fff; }

.filtro-chave {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--linha); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--tinta); text-decoration: none;
}
.filtro-chave:hover { border-color: var(--teal); }
.filtro-chave.ativo { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }

/* --------------------------------------------------------------- RESULTADO */
.manual-conta { margin-bottom: 16px; }
.manual-conta p { margin: 0; font-size: 15px; color: var(--suave); }
.manual-conta strong { color: var(--navy); font-weight: 700; }

.lista-exames {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* min() por dentro: sem ele uma coluna de 300px continua pedindo 300 numa
     caixa de 290, e a pagina inteira ganha rolagem lateral. */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 14px;
}

.cartao-exame {
  display: flex; flex-direction: column; gap: 9px; height: 100%;
  padding: 18px 20px;
  background: #fff; border: 1px solid var(--linha); border-radius: 14px;
  text-decoration: none; color: var(--tinta);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.cartao-exame:hover {
  transform: translateY(-2px); border-color: var(--teal);
  box-shadow: 0 8px 26px rgba(25, 43, 91, .1);
}

.ce-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ce-topo h2, .ce-topo h3 {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--navy);
  line-height: 1.32; text-wrap: balance;
}
.ce-sigla {
  flex: none; font-family: "IBM Plex Mono", monospace; font-size: 11px;
  background: var(--fundo); color: var(--teal-ink);
  padding: 3px 8px; border-radius: 6px; font-weight: 500;
}

.ce-resumo { margin: 0; font-size: 14px; color: var(--suave); line-height: 1.5; }

.ce-dados {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: 6px;
  font-size: 12.5px; color: var(--suave);
}
.ce-grupo { font-weight: 600; color: var(--teal-ink); }
.ce-tubo { display: inline-flex; align-items: center; gap: 6px; }
.ce-tampa {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  border: 1px solid rgba(0,0,0,.12);
}
.ce-prazo { display: inline-flex; align-items: center; gap: 5px; }

.ce-selos { display: flex; gap: 6px; flex-wrap: wrap; }
.selo-mini {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  background: var(--fundo); color: var(--teal-ink);
  padding: 3px 9px; border-radius: 999px;
}

.cartao-exame mark {
  background: rgba(255, 204, 18, .45); color: inherit;
  padding: 0 2px; border-radius: 3px;
}

/* --------------------------------------------------------------- VAZIO */
.manual-vazio {
  text-align: center; padding: 48px 24px;
  background: #fff; border: 1px dashed var(--linha); border-radius: 16px;
}
.manual-vazio > i { font-size: 40px; color: var(--linha); }
.manual-vazio h2 { margin: 16px 0 8px; font-size: 20px; color: var(--navy); }
.manual-vazio p { margin: 0 auto; max-width: 52ch; color: var(--suave); }
.manual-vazio-acoes {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 22px;
}
.manual-talvez { margin-top: 20px !important; font-size: 14px; }
.manual-talvez a {
  display: inline-block; margin: 0 4px; font-weight: 600;
}

/* --------------------------------------------------------------- PAGINACAO */
.paginacao-site { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.pag-site {
  min-width: 42px; height: 42px; padding: 0 12px;
  display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--linha); background: #fff;
  text-decoration: none; color: var(--tinta); font-weight: 600;
}
.pag-site:hover { border-color: var(--teal); }
.pag-site.atual { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ⚠️ O aviso de rotina é definido UMA vez, lá embaixo, junto do resto do
   acabamento. Aqui ele tinha uma primeira definição com `max-width: 78ch` e
   `margin: 0 auto`, e a de baixo trocou a margem por `30px 0 0` sem restaurar a
   largura: o aviso ficava estreito E encostado à esquerda, embaixo de uma
   grade de três colunas que ocupa a faixa inteira. Mesmo defeito do hover do
   chip de exame, com outra roupa. */

/* =============================================================================
   FICHA DO EXAME
   ========================================================================== */
.fe-topo { background: var(--navy); color: #fff; padding: 28px 0 34px; }

.migalhas { font-size: 13px; color: rgba(255,255,255,.62); margin-bottom: 14px; }
.migalhas a { color: rgba(255,255,255,.82); text-decoration: none; }
.migalhas a:hover { color: var(--teal-glow); }

.fe-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.fe-titulo h1 {
  margin: 0; font-size: clamp(24px, 4vw, 34px); font-weight: 800;
  letter-spacing: -.02em; text-wrap: balance;
}
.fe-resumo { margin: 8px 0 0; font-size: 16px; color: rgba(255,255,255,.8); max-width: 62ch; }

.fe-sigla {
  flex: none; font-family: "IBM Plex Mono", monospace; font-size: 14px;
  background: rgba(255,255,255,.12); color: var(--teal-glow);
  padding: 7px 13px; border-radius: 8px;
}

.fe-especies { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.fe-especie {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.12); color: #fff;
  padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
}

/* --------------------------------------------------------------- CARTOES */
.fe-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}
.fe-cartao-largo { grid-column: 1 / -1; }

.fe-cartao {
  background: #fff; border: 1px solid var(--linha); border-radius: 14px;
  padding: 18px 20px;
}
.fe-cartao h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--suave);
}
.fe-cartao h2 i { color: var(--teal-ink); font-size: 13px; }
.fe-cartao p { margin: 0; }

/* ⚠️ **A borda amarela de 4px saiu, e a REGRA saiu junto.** Ela vinha sendo
   apenas sobrescrita mais abaixo, e regra morta que contradiz uma decisão
   registrada é o que faz o próximo leitor achar que a decisão não foi tomada.
   Filete colorido grosso em cartão é o atalho barato para dar destaque, e
   gastava o amarelo fora da Now-and-Act Rule. */
.fe-preparo p { font-size: 16px; line-height: 1.55; }

.fe-destaque { font-size: 18px; font-weight: 700; color: var(--navy); }
.fe-preco { color: var(--teal-ink); }
.fe-nota { display: block; margin-top: 5px; font-size: 12.5px; color: var(--suave); }
.fe-tubo { display: flex; align-items: center; gap: 7px; }
.fe-tampa { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); flex: none; }
.fe-nota-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--teal-ink);
}
.fe-nota-link:hover { text-decoration: underline; }

.fe-alerta {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px !important;
  padding: 12px 15px; background: #FFF4E2; border-radius: 10px;
  font-size: 14px; color: #A65A05;
}

.fe-acoes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.fe-selo-grande {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--fundo); color: var(--teal-ink);
  font-size: 14px; font-weight: 600;
}

/* --------------------------------------------------------------- TECNICO */
.fe-duas {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px; align-items: start;
}
@media (max-width: 900px) { .fe-duas { grid-template-columns: minmax(0, 1fr); } }

.fe-tecnico h2 { margin: 0 0 18px; font-size: 21px; color: var(--navy); }

.fe-lista { margin: 0; display: flex; flex-direction: column; gap: 0; }
.fe-lista > div {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--linha);
}
.fe-lista > div:last-child { border-bottom: 0; }
.fe-lista dt { font-size: 13px; font-weight: 700; color: var(--suave); }
.fe-lista dd { margin: 0; font-size: 15px; }

@media (max-width: 560px) {
  .fe-lista > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

.fe-obs { margin-top: 22px; padding: 16px 18px; background: var(--fundo); border-radius: 12px; }
.fe-obs h3 { margin: 0 0 6px; font-size: 14px; color: var(--navy); }
.fe-obs p { margin: 0; font-size: 14px; color: var(--suave); }

.fe-lado { display: flex; flex-direction: column; gap: 14px; }

.fe-caixa { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 18px 20px; }
.fe-caixa h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px; font-size: 15px; color: var(--navy);
}
.fe-caixa h3 i { color: var(--teal-ink); font-size: 14px; }
.fe-caixa-nota { margin: 0 0 12px; font-size: 13px; color: var(--suave); line-height: 1.45; }

.fe-sinonimos { display: flex; flex-wrap: wrap; gap: 6px; }
.fe-sin {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--fundo); color: var(--tinta);
  font-size: 13px; text-decoration: none;
}
.fe-sin:hover { background: var(--teal-ink); color: #fff; }
.fe-sin-sigla { font-family: "IBM Plex Mono", monospace; font-size: 12px; }

.fe-perfis, .fe-unidades { list-style: none; margin: 0; padding: 0; }
.fe-perfis a, .fe-unidades a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid var(--linha);
  text-decoration: none; color: var(--tinta);
}
.fe-perfis li:last-child a, .fe-unidades li:last-child a { border-bottom: 0; }
.fe-perfis a:hover strong, .fe-unidades a:hover strong { color: var(--teal-ink); }
.fe-perfis i { color: var(--teal-ink); width: 20px; text-align: center; flex: none; }
.fe-perfis strong, .fe-unidades strong { display: block; font-size: 14px; font-weight: 700; }
.fe-perfis small { display: block; font-size: 12px; color: var(--suave); }
.fe-unidades span { display: block; font-size: 12.5px; }
.fe-aberta { color: #128C5A; font-weight: 600; }
.fe-fechada { color: var(--suave); }

/* =============================================================================
   PERFIS DE EXAME
   ========================================================================== */
.grade-perfis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
}

.cartao-perfil {
  display: flex; flex-direction: column; gap: 7px;
  padding: 22px; background: #fff;
  border: 1px solid var(--linha); border-radius: 14px;
  text-decoration: none; color: var(--tinta);
  transition: transform .14s, box-shadow .14s;
}
.cartao-perfil:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(25,43,91,.1); }
.cartao-perfil > i { font-size: 22px; color: var(--teal-ink); }
.cartao-perfil h3 { margin: 4px 0 0; font-size: 17px; color: var(--navy); }
.cartao-perfil p { margin: 0; font-size: 14px; color: var(--suave); line-height: 1.5; }
.cp-conta {
  margin-top: auto; padding-top: 8px;
  font-size: 12px; font-weight: 700; color: var(--teal-ink);
}

.perfis-lista { display: flex; flex-direction: column; gap: 18px; }

.perfil-bloco {
  background: #fff; border: 1px solid var(--linha); border-radius: 16px;
  padding: 24px; scroll-margin-top: 90px;
}
.perfil-bloco:target { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(58,194,214,.15); }

.pb-topo { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pb-icone {
  width: 52px; height: 52px; flex: none; border-radius: 14px;
  background: var(--fundo); color: var(--teal-ink);
  display: grid; place-items: center; font-size: 21px;
}
.pb-texto { flex: 1; min-width: min(240px, 100%); }
.pb-texto h2 { margin: 0; font-size: 21px; color: var(--navy); text-wrap: balance; }
.pb-texto p { margin: 5px 0 0; font-size: 15px; color: var(--suave); }

.pb-numeros { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; flex: none; }
.pb-conta { font-size: 13px; font-weight: 700; color: var(--teal-ink); }
.pb-prazo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); }

.pb-quando {
  margin: 18px 0 0; padding: 13px 16px;
  background: var(--fundo); border-radius: 10px;
  font-size: 14.5px; line-height: 1.5;
}
.pb-quando > i { color: var(--teal-ink); margin-right: 6px; }

.pb-exames { margin-top: 18px; }
.pb-rotulo {
  margin: 0 0 10px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--suave);
}
.pb-exames ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 6px;
}
/*
 * ⚠️ **O HOVER É DECLARADO UMA VEZ, AQUI.**
 *
 * Ele morava em dois lugares: este bloco pintava `background: var(--navy)` com
 * `color: #fff`, e o bloco do respiro, 2.280 linhas abaixo, trocou o fundo por
 * branco com borda turquesa **sem tocar na cor do texto**. Mesma
 * especificidade, e a de baixo ganha só o que ela declara: sobrou branco sobre
 * branco, e o nome do exame **sumia** ao passar o mouse nos 62 chips da página.
 * Medido: 1,00:1.
 *
 * ⚠️ **Nenhum erro aparece quando isso acontece.** As duas regras são
 * válidas, e o navegador faz exatamente o que foi escrito. O que quebra é a
 * combinação, e ela só existe porque o mesmo estado estava dito em dois
 * lugares. Por isso o conserto não é acrescentar uma terceira regra com a cor
 * certa: é o estado inteiro morar num lugar só.
 */
.pb-exames a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 15px; border-radius: 9px;
  background: var(--cor-fundo); border: 1px solid transparent;
  font-size: 14px; color: var(--tinta); text-decoration: none;
  transition: border-color .16s, background .16s, color .16s;
}
.pb-exames a:hover {
  background: #fff; border-color: var(--cor-teal-ink); color: var(--cor-navy);
}
.pb-exames code {
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  color: var(--suave); flex: none;
}
/* A sigla acompanha: turquesa-escrito dá 5,5:1 sobre o branco, e é ela que
   marca qual chip está sob o dedo. O turquesa-luz que estava aqui dá 1,41:1. */
.pb-exames a:hover code { color: var(--cor-teal-ink); }

.pb-pe {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linha);
}
.pb-especies { display: flex; gap: 8px; color: var(--suave); font-size: 15px; }
.pb-preco { font-size: 15px; font-weight: 700; color: var(--teal-ink); margin-right: auto; }

.centro { text-align: center; margin-top: 24px; }
.btn-bloco { width: 100%; justify-content: center; }

/* Alvo de toque nunca abaixo de 42px em telas de dedo. */
@media (pointer: coarse), (max-width: 1023px) {
  .pastilha-esp, .filtro-lista a, .filtro-chave, .fe-sin, .pb-exames a, .pag-site {
    min-height: 42px;
  }
  .filtro-lista a, .pb-exames a { align-items: center; }
}

/* =============================================================================
   COMUNICADOS EM JANELA  ·  cinco modelos, uma estrutura
   =============================================================================

   Os cinco modelos compartilham a mesma marcacao (.cmk-titulo, .cmk-dia,
   .cmk-data, .cmk-badge...). O modelo so troca a roupa: fundo, cor do selo,
   posicao da marca. E o que garante que um comunicado criado em setembro saia
   igual ao de agosto, em vez de cada um com uma cara.
   ========================================================================== */

.cmk {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  padding: 16px;
}
.cmk[hidden] { display: none; }

.cmk-fundo {
  position: absolute; inset: 0;
  /* Escuridao e desfoque vem do painel, por comunicado ou pelo padrao global,
     como variavel no proprio elemento. A reserva e o valor de fabrica. */
  background: rgba(14, 27, 51, var(--cmk-escuro, .72));
  backdrop-filter: blur(var(--cmk-desfoque, 3px));
  -webkit-backdrop-filter: blur(var(--cmk-desfoque, 3px));
  opacity: 0; transition: opacity .25s;
}

/* Cartao com cor propria escolhida no painel: vence o modelo visual. */
.cmk-cartao-proprio .cmk-caixa { background: var(--cmk-cartao) !important; }

/* Opacidade sem cor propria: uma camada por cima do fundo do modelo, com a
   cor da pagina atras aparecendo na medida. O texto continua inteiro. */
.cmk-cartao-translucido .cmk-caixa { position: relative; }
.cmk-cartao-translucido .cmk-caixa::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: rgba(14, 27, 51, calc(1 - var(--cmk-cartao-opacidade, 1)));
  mix-blend-mode: normal; pointer-events: none;
}
.cmk.is-aberto .cmk-fundo { opacity: 1; }

.cmk-caixa {
  position: relative; z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto; overflow-x: hidden;
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  transform: translateY(22px) scale(.97); opacity: 0;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .28s;
}
.cmk.is-aberto .cmk-caixa { transform: none; opacity: 1; }

.cmk-fechar {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .14); color: var(--amarelo, #FFCC12);
  font-size: 20px; cursor: pointer; display: grid; place-items: center;
  transition: background .15s, transform .15s;
}
.cmk-fechar:hover { background: rgba(255, 255, 255, .26); transform: rotate(90deg); }

.cmk-corpo {
  position: relative; z-index: 2;
  padding: 44px 36px 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.cmk-titulo {
  margin: 0; font-size: clamp(34px, 7vw, 52px); font-weight: 900;
  letter-spacing: -.02em; line-height: 1; text-transform: uppercase;
  text-wrap: balance;
}
.cmk-eyebrow {
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .02em;
}
.cmk-subtitulo { margin: 4px 0 0; font-size: 15px; opacity: .85; max-width: 44ch; }

.cmk-quando { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cmk-dia {
  font-size: 19px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.cmk-data {
  font-family: 'IBM Plex Mono', 'Montserrat', monospace;
  font-size: clamp(36px, 8vw, 48px); font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

.cmk-badge {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 10px; padding: 12px 24px; border-radius: 999px;
  font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  max-width: 100%;
}
.cmk-badge i { font-size: 17px; flex: none; }

.cmk-texto {
  margin-top: 16px; font-size: 14.5px; line-height: 1.55; max-width: 46ch;
}
.cmk-texto p { margin: 0 0 8px; }
.cmk-texto p:last-child { margin-bottom: 0; }

.cmk-unidade {
  margin: 4px 0 0; font-size: 14px; font-weight: 600; opacity: .9;
  display: flex; align-items: center; gap: 7px;
}

.cmk-botao {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 14px 26px; border-radius: 12px;
  font-size: 15px; font-weight: 800; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.cmk-botao:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }

.cmk-marca { margin-top: 22px; opacity: .95; }
.cmk-marca img { height: 34px; width: auto; }

.cmk-arte {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .18;
}

/* --------------------------------------------------------------- ALERTA
   O da primeira captura: cartao escuro com o selo amarelo flutuando no topo. */
.cmk-alerta .cmk-caixa {
  background: linear-gradient(170deg, #2A2E6E 0%, var(--navy, #192B5B) 45%, #1A2452 100%);
  color: #fff; overflow: visible; margin-top: 44px;
}
.cmk-alerta .cmk-selo {
  position: absolute; top: -46px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--amarelo, #FFCC12); color: var(--navy, #192B5B);
  display: grid; place-items: center; font-size: 40px;
  box-shadow: 0 0 0 7px #fff, 0 12px 30px rgba(0, 0, 0, .35);
}
.cmk-alerta .cmk-corpo { padding-top: 60px; }
.cmk-alerta .cmk-titulo { color: var(--amarelo, #FFCC12); }
.cmk-alerta .cmk-dia { color: var(--amarelo, #FFCC12); }
.cmk-alerta .cmk-badge { background: var(--amarelo, #FFCC12); color: var(--navy, #192B5B); }
.cmk-alerta .cmk-botao { background: var(--amarelo, #FFCC12); color: var(--navy, #192B5B); }
.cmk-alerta .cmk-texto { text-transform: uppercase; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; }

/* --------------------------------------------------------------- MEGAFONE
   O da ultima captura: cartao azul, texto a esquerda, megafone saindo do canto. */
.cmk-megafone .cmk-caixa {
  background: linear-gradient(160deg, #23367A 0%, var(--navy, #192B5B) 60%, #0F1A3D 100%);
  color: #fff; overflow: visible;
}
.cmk-megafone .cmk-corpo { text-align: left; align-items: flex-start; padding-right: 150px; }
.cmk-megafone .cmk-titulo { color: var(--amarelo, #FFCC12); font-size: clamp(30px, 6vw, 44px); }
.cmk-megafone .cmk-eyebrow { margin-top: -6px; }
.cmk-megafone .cmk-quando { align-items: flex-start; margin-top: 26px; }
.cmk-megafone .cmk-dia { color: var(--amarelo, #FFCC12); }
.cmk-megafone .cmk-badge { background: var(--amarelo, #FFCC12); color: var(--navy, #192B5B); }
.cmk-megafone .cmk-botao { background: var(--amarelo, #FFCC12); color: var(--navy, #192B5B); }
.cmk-megafone .cmk-marca { align-self: center; margin-right: -150px; }
.cmk-megafone .cmk-megafone {
  position: absolute; right: -28px; bottom: -34px; z-index: 3;
  font-size: 150px; color: #D9E2F0;
  transform: rotate(-18deg);
  text-shadow: 12px 18px 30px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.cmk-megafone .cmk-megafone::after {
  content: ''; position: absolute; inset: 28% 34% 30% 18%;
  background: var(--amarelo, #FFCC12); border-radius: 50%; z-index: -1;
  filter: blur(6px);
}

@media (max-width: 560px) {
  .cmk-megafone .cmk-corpo { padding-right: 36px; }
  .cmk-megafone .cmk-marca { margin-right: 0; }
  .cmk-megafone .cmk-megafone { font-size: 90px; right: -16px; bottom: -14px; opacity: .55; }
}

/* --------------------------------------------------------------- FESTIVO
   Claro, turquesa: fim de ano, boas noticias. */
.cmk-festivo .cmk-caixa {
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(58, 194, 214, .28), transparent 70%),
    radial-gradient(500px 260px at 0% 100%, rgba(255, 204, 18, .22), transparent 70%),
    #fff;
  color: var(--navy, #192B5B);
}
.cmk-festivo .cmk-fechar { background: var(--fundo, #EFF8FA); color: var(--navy, #192B5B); }
.cmk-festivo .cmk-titulo { color: var(--navy, #192B5B); }
.cmk-festivo .cmk-eyebrow { color: var(--teal-ink, #0F7386); }
.cmk-festivo .cmk-dia { color: var(--teal-ink, #0F7386); }
.cmk-festivo .cmk-badge { background: var(--teal-ink, #0F7386); color: #fff; }
.cmk-festivo .cmk-botao { background: var(--navy, #192B5B); color: #fff; }
.cmk-festivo .cmk-texto { color: var(--suave, #4A5F7E); }
.cmk-festivo .cmk-marca { background: var(--navy, #192B5B); padding: 10px 18px; border-radius: 12px; }

/* --------------------------------------------------------------- SIMPLES
   Branco com cabecalho azul: novidade sem alarde. */
.cmk-simples .cmk-caixa { background: #fff; color: var(--tinta, #0E1B33); }
.cmk-simples .cmk-corpo { padding: 0 0 28px; gap: 8px; }
.cmk-simples .cmk-cabeca {
  width: 100%; background: var(--navy, #192B5B); padding: 20px 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 20px;
}
.cmk-simples .cmk-cabeca img { height: 30px; }
.cmk-simples .cmk-cabeca .cmk-eyebrow {
  color: var(--teal-glow, #7FE0EE); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.cmk-simples .cmk-fechar { background: rgba(255, 255, 255, .16); color: #fff; }
.cmk-simples .cmk-titulo { color: var(--navy, #192B5B); font-size: clamp(26px, 5vw, 34px); text-transform: none; padding: 0 36px; }
.cmk-simples .cmk-subtitulo, .cmk-simples .cmk-texto { padding: 0 36px; color: var(--suave, #4A5F7E); }
.cmk-simples .cmk-badge { background: var(--fundo, #EFF8FA); color: var(--teal-ink, #0F7386); }
.cmk-simples .cmk-dia { color: var(--teal-ink, #0F7386); }
.cmk-simples .cmk-data { color: var(--navy, #192B5B); }
.cmk-simples .cmk-botao { background: var(--amarelo, #FFCC12); color: var(--navy, #192B5B); }

/* --------------------------------------------------------------- URGENTE
   So para o que nao pode esperar. */
.cmk-urgente .cmk-caixa {
  background: linear-gradient(170deg, #3B1D26 0%, #1F1330 55%, var(--navy, #192B5B) 100%);
  color: #fff; overflow: visible; margin-top: 44px;
  border: 3px solid #E0484F;
}
.cmk-urgente .cmk-selo {
  position: absolute; top: -46px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 92px; height: 92px; border-radius: 50%;
  background: #E0484F; color: #fff;
  display: grid; place-items: center; font-size: 40px;
  box-shadow: 0 0 0 7px #fff, 0 12px 30px rgba(0, 0, 0, .4);
  animation: cmk-pulso 1.6s ease-in-out infinite;
}
@keyframes cmk-pulso {
  0%, 100% { box-shadow: 0 0 0 7px #fff, 0 12px 30px rgba(0, 0, 0, .4); }
  50%      { box-shadow: 0 0 0 7px #fff, 0 0 0 18px rgba(224, 72, 79, .25), 0 12px 30px rgba(0, 0, 0, .4); }
}
.cmk-urgente .cmk-corpo { padding-top: 60px; }
.cmk-urgente .cmk-titulo { color: #FF8A90; }
.cmk-urgente .cmk-dia { color: #FF8A90; }
.cmk-urgente .cmk-badge { background: #E0484F; color: #fff; }
.cmk-urgente .cmk-botao { background: var(--amarelo, #FFCC12); color: var(--navy, #192B5B); }

/* --------------------------------------------------------------- CELULAR */
@media (max-width: 560px) {
  .cmk { padding: 12px; align-items: end; }
  .cmk-caixa { border-radius: 22px; }
  .cmk-corpo { padding: 40px 22px 26px; }
  .cmk-alerta .cmk-corpo, .cmk-urgente .cmk-corpo { padding-top: 56px; }
  .cmk-simples .cmk-cabeca { padding: 16px 22px; }
  .cmk-simples .cmk-titulo, .cmk-simples .cmk-subtitulo, .cmk-simples .cmk-texto { padding: 0 22px; }
  .cmk-fechar { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmk-fundo, .cmk-caixa, .cmk-fechar { transition: none; }
  .cmk-urgente .cmk-selo { animation: none; }
}

/* =============================================================================
   FASE 5b  ·  Volante, Estrutura, Qualidade, LifeVet Explica, Vagas
   ========================================================================== */

/* ------------------------------------------------ blocos comuns */
.grade-3 {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.cartao-info {
  background: #fff; border: 1px solid var(--cor-linha); border-radius: 14px; padding: 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.cartao-info > i { font-size: 22px; color: var(--cor-teal-ink); }
.cartao-info h3 { margin: 4px 0 0; font-size: 17px; color: var(--cor-navy); }
.cartao-info p { margin: 0; font-size: 14.5px; color: var(--cor-suave); line-height: 1.55; }

.chamada-volante {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  background: var(--cor-navy); color: #fff; border-radius: 18px; padding: 28px 30px;
}
/*
 * ⚠️ **O título saía NAVY SOBRE NAVY, e a faixa parecia não ter título.**
 * `.secao h2` pinta de navy, que é o certo para seção de fundo claro, e esta
 * faixa é escura por dentro de uma. Como `.chamada-volante h2` não dizia cor
 * nenhuma, a regra geral valia: mesma especificidade, e quem não fala perde.
 *
 * A cor do texto não se herda de graça quando o componente troca o próprio chão:
 * quem escurece o fundo diz a tinta junto.
 */
.chamada-volante h2 { margin: 0; font-size: 22px; color: #fff; }
.chamada-volante p { margin: 6px 0 0; color: rgba(255,255,255,.8); max-width: 48ch; }
.chamada-volante-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
/*
 * ⚠️ **Quem muda a tinta responde pelo chão.** Esta regra dizia a borda e a
 * cor do texto para a faixa navy, e deixava de pé o `background: #fff` de
 * `.btn-linha`, que foi escrito para fundo claro: o botão "Pelo formulário"
 * saía **branco sobre branco**, um retângulo vazio ao lado dos dois WhatsApp.
 *
 * É o mesmo defeito do hover do chip de exame e do aviso de rotina, na terceira
 * roupa: lá a regra de baixo repintou o chão e deixou a tinta; aqui ela repintou
 * a tinta e deixou o chão.
 */
.chamada-volante .btn-linha {
  background: transparent; border-color: rgba(255,255,255,.4); color: #fff;
}
.chamada-volante .btn-linha:hover { background: rgb(255 255 255 / .14); }

/*
 * ⚠️ **Rede de segurança: botão navy nesta faixa é botão invisível.**
 * `.btn-navy` foi desenhado para chão claro, e aqui o chão é o mesmo navy dele.
 * A convenção do projeto já é usar `btn-amarelo` em faixa escura, e as telas
 * foram corrigidas; esta regra existe para o dia em que alguém copiar um botão
 * de uma seção clara e colar aqui sem reparar no chão.
 */
.chamada-volante .btn-navy {
  background: var(--cor-amarelo); color: var(--cor-navy);
}

.galeria {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.galeria-foto { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--cor-linha); }
.galeria-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galeria-foto figcaption { padding: 10px 14px; font-size: 13px; color: var(--cor-suave); }

.etiqueta-site {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--cor-fundo); color: var(--cor-teal-ink); padding: 3px 10px; border-radius: 999px;
}

/* ------------------------------------------------ raio-x volante */
.cobertura {
  display: grid; gap: 28px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  background: #fff; border: 1px solid var(--cor-linha); border-radius: 18px; padding: 30px;
}
.cobertura-texto h2 { margin: 6px 0 10px; font-size: 24px; color: var(--cor-navy); text-wrap: balance; }
.cobertura-texto p { margin: 0; color: var(--cor-suave); line-height: 1.55; }
.cobertura-raio { margin-top: 12px !important; font-size: 13.5px; }
.cobertura-raio i { color: var(--cor-teal-ink); margin-right: 6px; }

.cobertura-form label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-suave); margin-bottom: 8px; }
.cobertura-campo {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--cor-linha); border-radius: 999px; padding: 6px 6px 6px 18px; background: #fff;
}
.cobertura-campo:focus-within { border-color: var(--cor-teal); box-shadow: 0 0 0 4px rgba(58,194,214,.18); }
.cobertura-campo > i { color: var(--cor-teal-ink); }
.cobertura-campo input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 18px; font-family: "IBM Plex Mono", monospace; padding: 10px 0; }
.cobertura-campo .btn { border-radius: 999px; flex: none; }

.cobertura-resposta { margin-top: 14px; padding: 16px 18px; border-radius: 14px; display: flex; gap: 12px; align-items: flex-start; }
.cobertura-resposta > i { font-size: 22px; flex: none; margin-top: 2px; }
.cobertura-resposta strong { display: block; font-size: 16px; margin-bottom: 4px; }
.cobertura-resposta p { margin: 0; font-size: 14px; line-height: 1.5; }
.cobertura-resposta .btn { margin-top: 12px; }
.cobertura-dentro { background: var(--ok-fundo); color: var(--ok); }
.cobertura-fora   { background: var(--alerta-fundo); color: var(--alerta); }
.cobertura-indefinido { background: var(--cor-fundo); color: var(--cor-navy); }
.cobertura-erro   { background: #FDECEC; color: #B42318; }

.passos-volante {
  list-style: none; margin: 0; padding: 0; counter-reset: passo;
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.passos-volante li { position: relative; background: #fff; border: 1px solid var(--cor-linha); border-radius: 14px; padding: 22px 20px 20px; }
.pv-num {
  position: absolute; top: -12px; left: 18px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cor-amarelo); color: var(--cor-navy); display: grid; place-items: center; font-weight: 800; font-size: 13px;
}
.passos-volante li > i { font-size: 22px; color: var(--cor-teal-ink); }
.passos-volante h3 { margin: 10px 0 6px; font-size: 16px; color: var(--cor-navy); }
.passos-volante p { margin: 0; font-size: 14px; color: var(--cor-suave); line-height: 1.5; }

/* ------------------------------------------------ estrutura */
.area-titulo { margin: 26px 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-teal-ink); }
.area-titulo:first-of-type { margin-top: 0; }
.grade-equipamentos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.cartao-equipamento { display: flex; gap: 14px; background: #fff; border: 1px solid var(--cor-linha); border-radius: 14px; padding: 14px; }
.cartao-equipamento img, .ce-sem-foto { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; flex: none; }
.ce-sem-foto { background: var(--cor-fundo); color: var(--cor-teal-ink); display: grid; place-items: center; font-size: 26px; }
.ce-corpo { min-width: 0; }
.ce-corpo h4 { margin: 0; font-size: 15px; color: var(--cor-navy); }
.ce-modelo { margin: 2px 0 6px; font-size: 12px; color: var(--cor-suave); font-family: "IBM Plex Mono", monospace; }
.ce-corpo p { margin: 0; font-size: 13.5px; color: var(--cor-suave); line-height: 1.5; }
.ce-unidade { display: inline-flex; gap: 5px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--cor-teal-ink); font-weight: 600; }

/* ------------------------------------------------ qualidade */
.grade-certificados { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.cartao-certificado { background: #fff; border: 1px solid var(--cor-linha); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.cartao-certificado > i { font-size: 26px; color: var(--cor-amarelo); }
.cartao-certificado h3 { margin: 4px 0 0; font-size: 16px; color: var(--cor-navy); }
.cc-emissor { margin: 0; font-size: 13px; font-weight: 600; color: var(--cor-teal-ink); }
.cartao-certificado p { margin: 0; font-size: 14px; color: var(--cor-suave); }
.cc-dados { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 0; }
.cc-dados dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--cor-suave); }
.cc-dados dd { margin: 0; font-size: 13px; }
.cc-arquivo { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 700; color: var(--cor-teal-ink); text-decoration: none; }
.grade-selos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.selo-item { text-align: center; padding: 18px 12px; background: #fff; border: 1px solid var(--cor-linha); border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.selo-item img { height: 56px; width: auto; }
.selo-item > i { font-size: 30px; color: var(--cor-teal-ink); }
.selo-item strong { font-size: 13.5px; color: var(--cor-navy); }
.selo-item small { font-size: 12px; color: var(--cor-suave); }

/* ------------------------------------------------ blog */
.trilhas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.temas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.tema { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--cor-suave); background: #fff; border: 1px solid var(--cor-linha); }
.tema.ativo, .tema:hover { color: var(--cor-navy); border-color: var(--cor-teal); }
.grade-artigos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.cartao-artigo { background: #fff; border: 1px solid var(--cor-linha); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .14s, box-shadow .14s; }
.cartao-artigo:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(25,43,91,.1); }
.ca-capa { display: block; aspect-ratio: 16 / 9; background: var(--cor-fundo); }
.ca-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-sem-capa { display: grid; place-items: center; height: 100%; font-size: 34px; color: var(--cor-teal); }
.ca-corpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ca-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ca-trilha { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.ca-tutor { background: #FFF4D6; color: #7A5A00; }
.ca-veterinario { background: #E3F4F7; color: var(--cor-teal-ink); }
.ca-ambos { background: var(--cor-fundo); color: var(--cor-navy); }
.cartao-artigo h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.cartao-artigo h2 a { color: var(--cor-navy); text-decoration: none; }
.cartao-artigo h2 a:hover { color: var(--cor-teal-ink); }
.cartao-artigo p { margin: 0; font-size: 14px; color: var(--cor-suave); line-height: 1.55; }
.ca-pe { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--cor-suave); }

.artigo-topo { padding: 28px 0 20px; }
.artigo-topo h1 { margin: 12px 0 0; font-size: clamp(26px, 4vw, 38px); line-height: 1.15; color: var(--cor-navy); text-wrap: balance; max-width: 26ch; }
.artigo-resumo { margin: 12px 0 0; font-size: 17px; color: var(--cor-suave); max-width: 60ch; line-height: 1.55; }
.artigo-autor { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 14px; }
.artigo-autor img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.artigo-autor strong a { color: var(--cor-navy); text-decoration: none; }
.artigo-autor small { display: block; font-size: 12px; color: var(--cor-suave); }
.artigo-autor time { margin-left: auto; color: var(--cor-suave); font-size: 13px; }
.artigo-capa { width: 100%; max-height: 460px; object-fit: cover; border-radius: 18px; margin-bottom: 26px; }
.artigo-corpo { max-width: 62ch; font-size: 17px; line-height: 1.7; margin-bottom: 26px; }
.artigo-corpo h2 { font-size: 22px; margin: 30px 0 10px; color: var(--cor-navy); }
.artigo-corpo h3 { font-size: 18px; margin: 24px 0 8px; color: var(--cor-navy); }
.artigo-corpo p { margin: 0 0 16px; }
.artigo-corpo ul, .artigo-corpo ol { padding-left: 24px; margin: 0 0 16px; }
.artigo-corpo li { margin-bottom: 6px; }
.artigo-corpo a { color: var(--cor-teal-ink); font-weight: 600; }

/* ------------------------------------------------ vagas */
.grade-vagas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.cartao-vaga { background: #fff; border: 1px solid var(--cor-linha); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.cv-topo h3 { margin: 0 0 8px; font-size: 20px; color: var(--cor-navy); }
.cv-etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.cv-texto { font-size: 14.5px; color: var(--cor-suave); line-height: 1.55; }
.cv-texto p { margin: 0 0 8px; }
.cartao-vaga h4 { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cor-teal-ink); }
.cv-beneficios { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cv-beneficios li { font-size: 13px; background: var(--cor-fundo); padding: 5px 11px; border-radius: 999px; }
.cv-beneficios i { color: var(--cor-teal-ink); margin-right: 5px; }
.cv-pe { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-prazo { font-size: 13px; color: var(--cor-suave); }
.cartao-form input[type="file"] { display: block; width: 100%; padding: 12px; border: 1.5px dashed var(--cor-linha); border-radius: 10px; background: var(--cor-fundo); font: inherit; }

@media (pointer: coarse), (max-width: 1023px) {
  .tema, .cc-arquivo, .cobertura-campo .btn { min-height: 42px; display: inline-flex; align-items: center; }
}


/* =============================================================================
   TRABALHE CONOSCO  ·  cartão curto, janela da vaga, área de soltar
   =============================================================================
   Padrão da Gelo Drink adaptado: o cartão responde o quê, onde, que jornada e
   quanto; a vaga inteira mora na janela. Três descrições abertas na página
   viram rolagem infinita, e a terceira vaga nunca é lida.
   ========================================================================== */

.cartao-vaga { transition: transform .16s, box-shadow .16s; }
.cartao-vaga:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgb(25 43 91 / .55); }
.cartao-vaga h3 { margin: 0; font-size: 19px; line-height: 1.25; color: var(--cor-navy); }
.cv-resumo { margin: 0; font-size: 14px; line-height: 1.55; color: var(--cor-suave); }

.etiqueta-nova { background: var(--cor-amarelo); color: var(--cor-navy); font-weight: 800; }

.cv-dados { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cv-dados li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--cor-suave);
  background: var(--cor-fundo); border-radius: 999px; padding: 5px 11px;
}
.cv-dados li i { color: var(--cor-teal-ink); font-size: 11px; }
.cv-dados li.cv-forte { background: var(--cor-navy); color: #fff; font-weight: 700; }
.cv-dados li.cv-forte i { color: var(--cor-amarelo); }

.cv-beneficios-linha { margin: 0; font-size: 12.5px; color: var(--cor-suave); }
.cv-beneficios-linha i { color: var(--cor-teal-ink); margin-right: 5px; }

.vaga-vazia {
  border: 2px dashed var(--cor-linha); border-radius: 18px;
  padding: 38px 22px; text-align: center; background: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.vaga-vazia > i { font-size: 30px; color: var(--cor-teal-ink); opacity: .55; }
.vaga-vazia h3 { margin: 0; font-size: 19px; color: var(--cor-navy); }
.vaga-vazia p  { margin: 0; max-width: 56ch; font-size: 14.5px; color: var(--cor-suave); line-height: 1.6; }
.vaga-vazia .btn { margin-top: 6px; }

/* ------------------------------------------------------------- cultura */
.faixa-cultura { background: var(--cor-navy); color: #fff; padding: 46px 0; }
.faixa-cultura .cabeca-secao h2 { color: #fff; }
.faixa-cultura .cabeca-secao p:not(.chapeu) { color: rgb(255 255 255 / .78); }
.cabeca-clara .chapeu { color: var(--cor-teal-luz, #7FE0EE); }

.grade-atributos {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.grade-atributos li {
  display: flex; flex-direction: column; gap: 6px;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12);
  border-radius: 14px; padding: 18px;
}
.grade-atributos i { font-size: 20px; color: var(--cor-amarelo); }
.grade-atributos strong { font-size: 15.5px; }
.grade-atributos span { font-size: 13.5px; line-height: 1.55; color: rgb(255 255 255 / .8); }

.beneficios-rotulo {
  margin: 30px 0 10px; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cor-teal-luz, #7FE0EE);
}
.beneficios-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.beneficios-lista li {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16);
  border-radius: 999px; padding: 7px 14px; font-size: 13px;
}
.beneficios-lista i { color: var(--cor-amarelo); font-size: 12px; }
.beneficios-nota { margin: 12px 0 0; font-size: 12.5px; color: rgb(255 255 255 / .62); }

/* ------------------------------------------------- passos da seleção */
.passos-selecao {
  list-style: none; margin: 0 0 34px; padding: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
}
.passos-selecao li {
  background: #fff; border: 1px solid var(--cor-linha); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 6px;
}
.passo-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--cor-navy); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.passos-selecao strong { font-size: 15.5px; color: var(--cor-navy); }
.passos-selecao span:not(.passo-num) { font-size: 13.5px; line-height: 1.55; color: var(--cor-suave); }

.cabeca-form { margin-top: 6px; }
.form-nota { margin: 10px 0 0; font-size: 12.5px; color: var(--cor-suave); }

/* --------------------------------------------- barra da vaga escolhida */
.vaga-escolhida {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--cor-fundo); border: 1px solid var(--cor-linha);
  border-radius: 10px; padding: 11px 14px; font-size: 13.5px;
}
.vaga-escolhida > i { color: var(--cor-teal-ink); }
.vaga-escolhida span { flex: 1; min-width: 0; }
.vaga-escolhida button {
  border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--cor-teal-ink); text-decoration: underline; cursor: pointer; padding: 4px;
}

/* ------------------------------------------------------ área de soltar */
.solta {
  position: relative; border: 2px dashed var(--cor-linha); border-radius: 12px;
  background: var(--cor-fundo); padding: 20px 16px; text-align: center;
  transition: border-color .15s, background .15s;
}
.solta input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0;
}
.solta:hover, .solta:focus-within { border-color: var(--cor-teal-ink); background: #fff; }
.solta.arrastando { border-color: var(--cor-teal-ink); background: #EAF8FB; }
.solta.com-erro   { border-color: #C2333B; background: #FDECED; }

.solta-convite { display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; }
.solta-icone { font-size: 24px; color: var(--cor-teal-ink); }
.solta-titulo { font-size: 14px; color: var(--cor-navy); }
.solta-titulo b { color: var(--cor-teal-ink); text-decoration: underline; }
.solta-dica { font-size: 12px; color: var(--cor-suave); }

.solta.tem-arquivo .solta-convite { display: none; }
.solta-previa { display: flex; align-items: center; gap: 12px; text-align: left; }
.solta-doc {
  flex: none; width: 42px; height: 42px; border-radius: 9px;
  background: var(--cor-navy); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.solta-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.solta-info b { font-size: 13.5px; color: var(--cor-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solta-info small { font-size: 12px; color: var(--cor-suave); font-variant-numeric: tabular-nums; }
.solta-trocar {
  position: relative; z-index: 2;
  border: 1px solid var(--cor-linha); background: #fff; border-radius: 8px;
  padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--cor-teal-ink); cursor: pointer;
}
.solta-erro { margin: 7px 0 0; font-size: 12.5px; color: #C2333B; font-weight: 600; }

/* --------------------------------------------------- janela da vaga */
.modal-vaga { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; }
.modal-vaga[hidden] { display: none; }
.modal-vaga-fundo { position: absolute; inset: 0; background: rgb(14 27 51 / .62); }
.modal-vaga-cartao {
  position: relative; z-index: 2; width: min(680px, 100%); max-height: 88vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px -20px rgb(14 27 51 / .5);
}
.modal-vaga-topo {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px; background: var(--cor-navy); color: #fff;
}
.modal-vaga-topo h2 { margin: 2px 0 0; font-size: 21px; line-height: 1.2; color: #fff; }
.modal-vaga-topo .chapeu { margin: 0; color: var(--cor-teal-luz, #7FE0EE); }
.modal-vaga-fechar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .28); background: rgb(255 255 255 / .1);
  color: #fff; cursor: pointer; font-size: 15px;
}
.modal-vaga-fechar:hover { background: rgb(255 255 255 / .2); }
.modal-vaga-corpo { padding: 20px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-vaga-corpo h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cor-teal-ink); }
.modal-vaga-corpo .beneficios-lista li { background: var(--cor-fundo); border-color: var(--cor-linha); color: var(--cor-navy); }
.modal-vaga-corpo .beneficios-lista i { color: var(--cor-teal-ink); }
.modal-vaga-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 15px 22px; border-top: 1px solid var(--cor-linha); background: var(--cor-fundo);
}

@media (max-width: 640px) {
  .modal-vaga { padding: 0; }
  .modal-vaga-cartao { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cartao-vaga:hover { transform: none; }
}


/* =============================================================================
   SOBRE  ·  a página institucional reconstruída
   =============================================================================
   Ordem tirada de um benchmark de 13 laboratórios veterinários brasileiros:
   promessa, números com data, rostos com CRMV, o caminho da amostra, estrutura
   e qualidade, volante, unidades, história e duas portas no fim.
   ========================================================================== */

.n-medido {
  display: block; margin-top: 3px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--cor-suave); opacity: .85;
}

/* -------------------------------------------------------- propósito */
.sobre-duas {
  display: grid; gap: 30px;
  grid-template-columns: minmax(min(420px, 100%), 1.35fr) minmax(min(280px, 100%), 1fr);
  align-items: start;
}
.sobre-texto h2 { margin: 4px 0 14px; font-size: clamp(22px, 2.6vw, 30px); color: var(--cor-navy); line-height: 1.2; }
.sobre-texto .prosa { max-width: 68ch; }
.sobre-texto .prosa p { margin: 0 0 14px; }

.promessas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.promessas li {
  display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 2px; align-items: start;
  background: var(--cor-fundo); border: 1px solid var(--cor-linha);
  border-radius: 14px; padding: 16px 18px;
}
.promessas i {
  grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 10px;
  background: var(--cor-navy); color: var(--cor-amarelo);
  display: grid; place-items: center; font-size: 15px;
}
.promessas strong { font-size: 14.5px; color: var(--cor-navy); }
.promessas span { font-size: 13px; line-height: 1.5; color: var(--cor-suave); }

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

/* ------------------------------------------------------ três frentes */
.card-frente {
  text-decoration: none; display: flex; flex-direction: column; gap: 6px;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.card-frente:hover { transform: translateY(-3px); border-color: var(--cor-teal-ink); box-shadow: 0 16px 32px -24px rgb(25 43 91 / .55); }
.card-frente > i { font-size: 24px; color: var(--cor-teal-ink); }
.card-frente h3 { margin: 4px 0 0; font-size: 18px; color: var(--cor-navy); }
.card-frente p  { margin: 0; font-size: 13px; color: var(--cor-suave); }
.card-seta { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 700; color: var(--cor-teal-ink); }

/* --------------------------------------------------------- equipe */
/* ⚠️ O CRMV ganhou pílula em vez de cinza claro de 10px. A regra antiga o
   pintava de #9AAFBC, que é quase invisível: é o dado que a Resolução CFMV
   1374/2020 torna obrigatório no laudo, e o sinal de confiança mais forte
   que a página dá. Esconder é desperdiçá-lo. */
.card-pessoa .crmv {
  display: inline-block; align-self: flex-start; margin-top: 4px;
  font-size: 11px; font-weight: 600; color: var(--cor-teal-ink);
  background: var(--cor-fundo); border: 1px solid var(--cor-linha);
  border-radius: 999px; padding: 3px 9px; letter-spacing: .02em;
}
.secao-mais { margin: 20px 0 0; text-align: center; }

/* ------------------------------------------- o caminho da amostra */
.faixa-caminho { background: var(--cor-navy); color: #fff; padding: 48px 0; }
.faixa-caminho .cabeca-secao h2 { color: #fff; }

.trilha-amostra {
  list-style: none; margin: 26px 0 0; padding: 0; counter-reset: etapa;
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.trilha-amostra li {
  position: relative;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .13);
  border-radius: 14px; padding: 20px 18px 18px;
  display: flex; flex-direction: column; gap: 7px;
}
.ta-num {
  position: absolute; top: -11px; left: 18px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cor-amarelo); color: var(--cor-navy);
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.trilha-amostra i { font-size: 19px; color: var(--cor-teal-luz, #7FE0EE); }
.trilha-amostra strong { font-size: 15.5px; line-height: 1.25; }
.ta-texto { font-size: 13.5px; line-height: 1.55; color: rgb(255 255 255 / .8); }

.caminho-nota {
  margin: 22px auto 0; max-width: 74ch; text-align: center;
  font-size: 14px; line-height: 1.65; color: rgb(255 255 255 / .78);
}
.caminho-nota p { margin: 0; }

/* --------------------------------------- estrutura e qualidade */
.grade-2-portas {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.porta-grande {
  background: #fff; border: 1px solid var(--cor-linha); border-radius: 18px;
  padding: 26px; display: flex; flex-direction: column; gap: 10px;
}
.porta-grande h2 { margin: 2px 0 4px; font-size: 21px; line-height: 1.25; color: var(--cor-navy); }
.porta-grande .prosa { flex: 1; font-size: 14.5px; }
.porta-grande .prosa p { margin: 0 0 10px; }
.porta-grande .btn { align-self: flex-start; margin-top: 4px; }

/* --------------------------------------------------------- mosaico */
.mosaico {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.mosaico figure { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--cor-linha); }
.mosaico img { display: block; width: 100%; height: 220px; object-fit: cover; }
.mosaico figcaption { padding: 10px 14px; font-size: 12.5px; color: var(--cor-suave); }

/* -------------------------------------------------- faixa do volante */
.faixa-volante {
  background: linear-gradient(135deg, var(--cor-navy) 0%, var(--cor-teal-ink) 100%);
  color: #fff; padding: 40px 0;
}
.faixa-volante-in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.faixa-volante h2 { margin: 4px 0 8px; font-size: clamp(21px, 2.4vw, 27px); color: #fff; }
.faixa-volante p  { margin: 0; max-width: 62ch; font-size: 14.5px; line-height: 1.6; color: rgb(255 255 255 / .84); }
.faixa-volante .chapeu { color: var(--cor-amarelo); margin: 0; }
.faixa-volante-acoes { display: flex; flex-direction: column; gap: 9px; }

/* ------------------------------------------------- linha do tempo */
.linha-tempo { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.linha-tempo li {
  display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start;
  padding: 20px 0; border-left: 2px solid var(--cor-linha); padding-left: 24px; margin-left: 8px;
  position: relative;
}
.linha-tempo li::before {
  content: ''; position: absolute; left: -7px; top: 26px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cor-teal-ink); border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--cor-linha);
}
.lt-ano { font-size: 15px; font-weight: 700; color: var(--cor-teal-ink); padding-top: 2px; }
.linha-tempo h3 { margin: 0 0 4px; font-size: 17px; color: var(--cor-navy); }
.linha-tempo p  { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cor-suave); max-width: 74ch; }

@media (max-width: 700px) {
  .linha-tempo li { grid-template-columns: 1fr; gap: 4px; }
}

/* --------------------------------------------------- fecho em duas portas */
.faixa-fecho { background: var(--cor-navy); color: #fff; padding: 46px 0; }
.faixa-fecho .cabeca-secao h2 { color: #fff; }
.faixa-fecho .cabeca-secao p { color: rgb(255 255 255 / .8); }
.porta-fecho {
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14);
  border-radius: 18px; padding: 26px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.porta-fecho > i { font-size: 23px; color: var(--cor-amarelo); }
.porta-fecho h3 { margin: 2px 0 0; font-size: 19px; color: #fff; }
.porta-fecho p  { margin: 0; font-size: 14px; line-height: 1.55; color: rgb(255 255 255 / .8); }
.porta-fecho .btn { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .card-frente:hover { transform: none; }
}

.prosa-centrada { max-width: 74ch; margin: 0 auto 22px; text-align: center; }
.prosa-centrada p { margin: 0; }


/* =============================================================================
   RITMO VERTICAL  ·  o que faltava nas páginas das fases 5b e 5c
   =============================================================================
   ⚠️ **Três classes usadas em oito páginas não existiam neste arquivo.**
   `.cabeca-secao` (que é o cabeçalho de bloco: chapéu, título e apoio),
   `.faixa-clara` (a faixa de fundo claro) e o `h2` dentro de `.faixa`, porque
   a regra de título estava presa a `.secao h2`.

   O sintoma não era erro nenhum: era a página inteira com o título colado no
   conteúdo, faixa sem fundo e sem respiro, e h2 no tamanho padrão do
   navegador. CSS que não casa não avisa, só entrega uma página pobre.

   ⚠️ `.cabeca-secao` e `.secao-cabeca` são coisas DIFERENTES e as duas ficam.
   `.secao-cabeca` é a linha de "título à esquerda, link à direita" da home.
   `.cabeca-secao` é o bloco de abertura de seção, empilhado. Renomear uma
   para a outra quebraria as quatro páginas que já usam a primeira.
   ========================================================================== */

/* ------------------------------------------------- cabeçalho de seção */
.cabeca-secao {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 0 30px;
  max-width: 74ch;
}
.cabeca-secao > * { margin: 0; }
.cabeca-secao .chapeu { margin: 0; }
.cabeca-secao h2 {
  font-size: clamp(22px, 3.4vw, 30px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.18; text-wrap: balance;
  color: var(--cor-navy);
}
.cabeca-secao p {
  font-size: 15px; line-height: 1.65; color: var(--cor-suave); max-width: 68ch;
}
.cabeca-secao a { color: var(--cor-teal-ink); font-weight: 600; }

@media (min-width: 1024px) { .cabeca-secao { margin-bottom: 36px; } }

/* Cabeçalho centrado, para as faixas que não têm nada ao lado. */
.cabeca-centro { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }

/* Sobre fundo escuro o apoio precisa clarear junto com o título. */
.faixa-caminho .cabeca-secao p, .faixa-fecho .cabeca-secao p,
.faixa-cultura .cabeca-secao p { color: rgb(255 255 255 / .8); }

/* ------------------------------------------------------ faixa de fundo */
/* ⚠️ A faixa tem o padding, e não a `.secao` de dentro: faixa que depende de
   uma `.secao` interna para respirar fica colada quando o conteúdo é uma
   grade direta, que é o caso das páginas novas. */
.faixa-clara {
  background: var(--cor-fundo);
  padding: 44px 0;
  border-top: 1px solid var(--cor-linha);
  border-bottom: 1px solid var(--cor-linha);
}
@media (min-width: 1024px) { .faixa-clara { padding: 60px 0; } }

/* Faixa clara logo depois de outra faixa clara não repete a borda. */
.faixa-clara + .faixa-clara { border-top: 0; }

/* O título das faixas seguia o tamanho padrão do navegador, porque a regra
   antiga só alcançava `.secao h2`. */
/* A cor sai daqui: ela é padrão, e mora no `:where()` lá em cima. */
.faixa h2 {
  font-size: clamp(21px, 3.4vw, 28px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.18; text-wrap: balance;
  margin: 0;
}
.faixa-caminho h2, .faixa-fecho h2, .faixa-cultura h2, .faixa-volante h2 { color: #fff; }

/* --------------------------------------------- respiro entre seções */
/* Duas seções brancas seguidas viram um bloco só de 1200px de altura sem
   nenhuma pista de onde uma acaba. A linha é de 1px e resolve. */
.secao-branca + .secao-branca { border-top: 1px solid var(--cor-linha); }

/* A grade que vem logo depois de um cabeçalho já tem a margem dele; a que vem
   solta dentro da seção precisa da própria. */
.secao > .eixo > .grade-cards,
.faixa > .eixo > .grade-cards { margin-top: 4px; }

/* ------------------------------------------- ajustes finos da Sobre */
.sobre-duas { gap: 34px 44px; }
@media (min-width: 1200px) { .sobre-duas { gap: 40px 56px; } }

.faixa-numeros-fundo + .secao { padding-top: 52px; }
@media (min-width: 1024px) { .faixa-numeros-fundo + .secao { padding-top: 68px; } }

.trilha-amostra { margin-top: 30px; gap: 16px; }
.grade-atributos { margin-top: 30px; }
.grade-2-portas  { gap: 20px; }
.passos-selecao  { margin-bottom: 40px; }
.grade-equipe    { margin-bottom: 4px; }
.linha-tempo     { margin-top: 26px; }

.faixa-caminho { padding: 52px 0; }
.faixa-cultura { padding: 52px 0; }
.faixa-fecho   { padding: 52px 0 56px; }
@media (min-width: 1024px) {
  .faixa-caminho { padding: 68px 0; }
  .faixa-cultura { padding: 68px 0; }
  .faixa-fecho   { padding: 64px 0 70px; }
}

/* O fecho tem cabeçalho centrado e as duas portas embaixo. */
.faixa-fecho .cabeca-secao { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.faixa-fecho .cabeca-secao .prosa,
.faixa-fecho .cabeca-secao p { color: rgb(255 255 255 / .8); }


/* =============================================================================
   ACABAMENTO  ·  profundidade, e o ícone com caixa
   =============================================================================
   ⚠️ Os cartões estavam todos chapados: borda cinza de 1px e nada mais. Num
   fundo branco isso lê como tabela, não como cartão. A sombra é BAIXA e
   larga de propósito: sombra forte em cartão de conteúdo vira caixa flutuando
   e cansa numa página com trinta deles.
   ========================================================================== */

.card-frente, .porta-grande, .porta-fecho, .promessas li,
.passos-selecao li, .cartao-vaga, .card-pessoa {
  box-shadow: 0 1px 2px rgb(25 43 91 / .04), 0 8px 20px -16px rgb(25 43 91 / .28);
}
.porta-fecho { box-shadow: none; }

.card-frente:hover, .porta-grande:hover, .card-pessoa:hover {
  box-shadow: 0 2px 4px rgb(25 43 91 / .06), 0 18px 34px -20px rgb(25 43 91 / .38);
}

/* O ícone ganha caixa: solto, ele fica do tamanho de uma bala de menta no
   meio de um cartão de 375px e some. */
.card-frente > i {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--cor-fundo); color: var(--cor-teal-ink);
  display: grid; place-items: center; font-size: 17px;
  transition: background .18s, color .18s;
}
.card-frente:hover > i { background: var(--cor-navy); color: var(--cor-amarelo); }
.card-frente { padding: 24px; gap: 8px; }
.card-frente h3 { margin-top: 8px; }

.porta-fecho > i {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16);
  display: grid; place-items: center; font-size: 18px;
}

/* Retrato com proporção fixa: sem isto, uma foto vertical e uma horizontal no
   mesmo grid deixam os quatro cartões com alturas diferentes. */
.grade-equipe { gap: 16px; }
.card-pessoa .foto { aspect-ratio: 4 / 4.4; }
.card-pessoa .dados { padding: 16px 16px 18px; gap: 3px; }
.card-pessoa h3 { font-size: 15px; line-height: 1.25; }
.card-pessoa .cargo { font-size: 12.5px; }

/* A porta grande separa o texto do botão com uma linha, e não com espaço
   solto: com dois blocos de tamanhos diferentes lado a lado, os dois botões
   ficavam em alturas diferentes e a seção parecia torta. */
.porta-grande { padding: 28px; }
.porta-grande .btn { margin-top: 14px; padding-top: 12px; }

/* Faixa do volante: o bloco de ações não pode encolher a ponto de o botão
   quebrar em duas linhas. */
/* Os dois botões da faixa do volante esticam para a mesma largura: com
   rótulos de tamanhos diferentes, um ficava visivelmente mais curto que o
   outro e a faixa parecia montada às pressas. */
.faixa-volante-acoes { flex: none; min-width: 264px; align-items: stretch; }
.faixa-volante-acoes .btn { justify-content: center; width: 100%; }


/* =============================================================================
   ESTÁ ABERTO AGORA  ·  o ponto que pulsa
   =============================================================================
   ⚠️ O ponto verde parado não dizia nada: parado, ele lê como enfeite da
   pílula, e o verde ainda some contra o texto verde do rótulo. Amarelo é a
   cor da marca que mais salta sobre o navy e sobre o branco, e o pulso é o
   que diz "isto é agora", que é exatamente a informação.

   ⚠️ O pulso é DISCRETO: dois segundos, opacidade e escala pequenas, sem
   piscar. Anúncio pulsando rápido vira anúncio, e a pessoa aprende a ignorar.

   ⚠️ Quem pede menos animação não vê pulso nenhum, e o ponto continua
   colorido: a informação não depende do movimento.
   ========================================================================== */

/*
 * ⚠️ **O PULSO É A PRÓPRIA COR DA BOLINHA**, e não uma segunda cor.
 *
 * Ele já foi amarelo, com a bolinha amarela junto, e depois amarelo com a
 * bolinha azul. O amarelo caiu por medida: sobre a pílula clara do cartão
 * (verde-claro) ele dá **1,29:1**, que é halo nenhum. Um sinal que aparece numa
 * faixa e some na outra não é sinal, é sorte.
 *
 * ⚠️ **O halo usa `currentColor`, e não um valor repetido.** Escrito como cor
 * fixa, ele teria que ser trocado junto toda vez que a bolinha mudasse de tom,
 * e um dos dois seria esquecido: é o mesmo defeito que apagou o nome do exame
 * no hover e encolheu o aviso de rotina, dito em duas cores em vez de duas
 * regras. Assim a bolinha e o pulso são a MESMA declaração.
 *
 * ⚠️ **São dois azuis, porque são dois chãos.** Na pílula clara o navy dá
 * 11,65:1; na faixa navy e no rodapé um ponto navy some dentro do próprio
 * fundo, e o azul de lá é o turquesa-luz (8,97:1 sobre o navy).
 */
/*
 * ⚠️ **OS TRÊS QUADROS PRECISAM SER A MESMA FORMA DE COR**, senão o halo não
 * interpola e o anel cresce INVISÍVEL.
 *
 * A versão anterior ia de `color-mix(in srgb, currentColor 50%, transparent)`
 * para a palavra `transparent`, e o navegador não interpola entre as duas: ele
 * salta para o fim. Medido no navegador: o único quadro com cor era o de 0%,
 * que tem espalhamento ZERO, e todo quadro com espalhamento vinha
 * `rgba(0, 0, 0, 0)`. A animação rodava, o `animation-name` estava certo, e
 * **nada piscava na tela**. É o mesmo tipo de armadilha do gradiente com
 * `var()` indefinida da Fase 5a: a regra é aceita e o efeito não acontece.
 *
 * ⚠️ **Por isso a cor sai de um TRIPLO (`--pulso`), e não de `currentColor`.**
 * `rgb(var(--pulso) / .5)` e `rgb(var(--pulso) / 0)` são a mesma função com
 * alfas diferentes, que é o que o navegador sabe interpolar. E continua sendo
 * UMA declaração por chão: a bolinha também sai de `rgb(var(--pulso))`, então
 * ela e o halo não têm como divergir.
 */
@keyframes lv-pulso {
  0%   { box-shadow: 0 0 0 0   rgb(var(--pulso) / .5); }
  70%  { box-shadow: 0 0 0 9px rgb(var(--pulso) / 0); }
  100% { box-shadow: 0 0 0 0   rgb(var(--pulso) / 0); }
}

/* A pílula do cartão de unidade, sobre chão claro. */
.pilula-situacao.esta-aberta .ponto,
.ponto-aberto {
  --pulso: var(--cor-navy-rgb);
  background: rgb(var(--pulso));
  animation: lv-pulso 2.2s ease-out infinite;
}

/* Sobre fundo escuro (faixa de plantão, rodapé e gaveta) o navy seria um ponto
   invisível: o azul de lá é o turquesa-luz. Trocar o triplo troca a bolinha E o
   halo, porque os dois saem dele. */
.rodape-situacao .ponto-aberto,
.gaveta-unidade .ponto-aberto {
  --pulso: var(--cor-teal-luz-rgb);
  background: rgb(var(--pulso));
}

/* O ponto fechado fica cinza e parado: sem atendimento, nada pulsa. */
.rodape-situacao .ponto-fechado,
.ponto-fechado { background: #9AAFBC; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .ponto-aberto, .pilula-situacao.esta-aberta .ponto { animation: none; }
}


/* =============================================================================
   RODAPÉ EM GRUPOS  ·  acordeão no celular, colunas no desktop
   =============================================================================
   ⚠️ Os quatorze links em coluna única ocupavam uma tela inteira de rolagem no
   telefone, e empurravam a política de privacidade e a assinatura para fora
   da vista. Agora são três grupos, fechados no celular e sempre abertos no
   desktop, onde sobra largura e esconder link só cria trabalho.
   ========================================================================== */

.rodape-links { display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rodape-grupo h3 { margin: 0 0 12px; }
.rodape-grupo h3 button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0; border: 0; background: none; cursor: default;
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; text-align: left;
}
.rodape-grupo h3 button i { font-size: 11px; color: rgb(255 255 255 / .55); transition: transform .2s; }

@media (max-width: 767px) {
  /* No celular a coluna de links vira uma pilha de acordeões, cada um com a
     linha divisória que separa um grupo do outro. */
  .rodape-links { grid-template-columns: 1fr; gap: 0; }
  .rodape-grupo { border-top: 1px solid rgb(255 255 255 / .12); }
  .rodape-grupo:last-child { border-bottom: 1px solid rgb(255 255 255 / .12); }
  .rodape-grupo h3 { margin: 0; }
  .rodape-grupo h3 button { padding: 15px 2px; cursor: pointer; min-height: 46px; }
  .rodape-grupo h3 button[aria-expanded="true"] i { transform: rotate(180deg); }
  .rodape-grupo ul[hidden] { display: none; }
  .rodape-grupo ul { padding-bottom: 14px; }
  .rodape-links a { display: block; padding: 7px 2px; }
}

/* ⚠️ No desktop a lista NUNCA fica escondida, nem se o JS marcou hidden ao
   fechar o acordeão no celular e a pessoa girou o aparelho. */
@media (min-width: 768px) {
  .rodape-grupo ul[hidden] { display: flex !important; }
  .rodape-grupo h3 button { pointer-events: none; }
  .rodape-grupo h3 button i { display: none; }
}

/* A coluna de links ocupa a largura inteira embaixo da marca e das unidades,
   porque três grupos lado a lado numa coluna de 230px ficariam ilegíveis. */
@media (min-width: 768px) {
  .rodape-grade > .rodape-links { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .rodape-grade { grid-template-columns: 1.15fr 1fr 1fr; }
  .rodape-grade > .rodape-links { grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid rgb(255 255 255 / .1); }
}

/* -------------------------------------------- rodapé compacto no celular
   ⚠️ Depois do acordeão, o peso do rodapé no telefone passou a ser as duas
   unidades: 255px cada, e o endereço em duas linhas com os contatos
   empilhados. Aqui o endereço vira uma linha e os contatos ficam lado a
   lado, o que devolve cerca de 200px de rolagem sem tirar informação. */
@media (max-width: 767px) {
  .rodape-corpo { padding-bottom: 6px; }
  .rodape-unidade { border-top: 1px solid rgb(255 255 255 / .12); padding-top: 16px; }
  .rodape-endereco { font-size: 12.5px; line-height: 1.5; }
  .rodape-endereco br { display: none; }
  .rodape-endereco::after { content: ''; }

  .rodape-contatos { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
  .rodape-contatos li { min-height: 40px; display: flex; align-items: center; }
  .rodape-contatos a { min-height: 40px; display: inline-flex; align-items: center; }

  .rodape-link-unidade { min-height: 42px; display: inline-flex; align-items: center; }
  .rodape-grade { gap: 18px; }
  .rodape-social a { width: 42px; height: 42px; }
}

/* ------------------------------------------ cartão de unidade no celular
   ⚠️ No telefone o título e a pílula disputavam a mesma linha: "Unidade
   Jardim Penha" quebrava em duas linhas de três palavras e o endereço em
   quatro. A pílula desce para uma linha própria, que é onde ela cabe. */
@media (max-width: 480px) {
  .card-unidade-topo { flex-direction: column; gap: 8px; }
  .card-unidade-topo > div { width: 100%; }
  .card-unidade h3 { font-size: 16.5px; }
  .card-unidade .endereco { font-size: 12.5px; }
  .pilula-situacao { align-self: flex-start; white-space: normal; }
}


/* =============================================================================
   FAIXA DE PLANTÃO  ·  a resposta que a North Star promete, na primeira tela
   =============================================================================
   Vem colada no h1 e antes do carrossel. Cada unidade diz a situação de AGORA,
   calculada por situacaoUnidade(), com o ponto amarelo pulsando quando aberta.
   ========================================================================== */

.faixa-plantao {
  background: var(--cor-navy);
  border-bottom: 1px solid rgb(255 255 255 / .1);
  padding: 14px 0;
}
.faixa-plantao .eixo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 24px; flex-wrap: wrap;
}

.plantao-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 28px; flex: 1; min-width: 0;
}
.plantao-lista li { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* ⚠️ Turquesa-luz, e não navy: a faixa É navy, e ponto da cor do chão é
   ponto nenhum. O halo amarelo é o mesmo das outras. */
.plantao-ponto {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  --pulso: var(--cor-teal-luz-rgb);
  background: rgb(var(--pulso));
  animation: lv-pulso 2.2s ease-out infinite;
}
.plantao-fechada .plantao-ponto { background: #7E93B8; animation: none; }

/* ⚠️ A situação sai em 13px e peso 700, e não nos 10,5px do degrau Label.
   Ela era a menor tipografia do cartão que deveria comandar. */
.plantao-texto { display: flex; flex-direction: column; min-width: 0; }
.plantao-texto strong { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.25; }
.plantao-texto span   { font-size: 13px; font-weight: 700; color: var(--cor-amarelo); line-height: 1.35; }
.plantao-fechada .plantao-texto span { color: rgb(255 255 255 / .72); font-weight: 600; }

.plantao-zap {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  padding: 0 13px; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .24); background: rgb(255 255 255 / .08);
  font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap;
  transition: background .18s;
}
.plantao-zap:hover { background: rgb(255 255 255 / .18); }
.plantao-zap i { color: var(--cor-teal); font-size: 14px; }

.plantao-todas {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 12.5px; font-weight: 700; color: var(--cor-teal);
  white-space: nowrap; transition: gap .18s;
}
.plantao-todas:hover { gap: 12px; }

@media (max-width: 767px) {
  .faixa-plantao { padding: 12px 0; }
  .faixa-plantao .eixo { flex-direction: column; align-items: stretch; gap: 10px; }
  /*
   * ⚠️ **No celular a LINHA INTEIRA da unidade leva ao WhatsApp dela.**
   * Medido em 375px: o botão flutuante do Lifynho ocupa x 294 a 361, e o
   * `.plantao-zap` do Itaim Paulista fica em x 319 a 359. O botão cobre o
   * WhatsApp da segunda unidade INTEIRO, e o tutor do Itaim que tocasse ali
   * abriria a conversa em vez do WhatsApp da unidade dele. É justamente o
   * atrito que a faixa de plantão existe para remover.
   *
   * ⚠️ **Não dá para mover o botão flutuante**: ele é fixo, e a faixa rola por
   * baixo dele. O que dá é aumentar o alvo, e a linha inteira é o alvo certo:
   * quem lê "Itaim Paulista, aberto agora até 18h" e toca está pedindo aquela
   * unidade. O ícone continua lá dizendo para onde o toque leva.
   *
   * O pseudo-elemento esticado é o mesmo gesto dos pontos do carrossel e do X
   * da janela: área de toque maior que o desenho, sem mexer no HTML.
   */
  .plantao-lista li { position: relative; }
  .plantao-zap::after { content: ''; position: absolute; inset: 0; }

  .plantao-lista { flex-direction: column; gap: 10px; }
  .plantao-lista li {
    justify-content: space-between;
    padding-bottom: 10px; border-bottom: 1px solid rgb(255 255 255 / .1);
  }
  .plantao-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
  .plantao-zap { margin-left: auto; }
  .plantao-todas { justify-content: center; }
}

/* =============================================================================
   UM AMARELO POR VISTA  ·  a Now-and-Act Rule aplicada
   =============================================================================
   O amarelo marca ação principal e estado ao vivo. Usado como bolinha de
   carrossel e como numeração de passo, ele vira enfeite e deixa de avisar,
   e aí a faixa de plantão perde o instrumento que o sistema reservou para ela.
   ========================================================================== */

.carrossel-pontos button { background: rgb(255 255 255 / .5); }
.carrossel-pontos button.is-ativo { width: 24px; background: #fff; }
@media (max-width: 767px) {
  .carrossel-pontos button { background: rgb(25 43 91 / .3); }
  .carrossel-pontos button.is-ativo { background: var(--cor-navy); }
}

/* Os seis selos numerados do caminho da amostra: turquesa-luz sobre navy dá
   8,97:1 e já está previsto no contrato para destaque sobre fundo escuro. */
.trilha-amostra .ta-num { background: var(--cor-teal-luz, #7FE0EE); color: var(--cor-navy); }

/* ⚠️ O título do carrossel deixa de disputar com o h1, que agora vem antes.
   Ele passa a ser subtítulo de conteúdo, não segundo Display da página. */
@media (min-width: 768px) {
  .carrossel-caixa h2 { font-size: clamp(19px, 2.2vw, 26px); letter-spacing: -.018em; }
}

/* A pílula de situação do cartão de unidade sai do degrau Label. */
.pilula-situacao { font-size: 12px; letter-spacing: .02em; }
.pilula-situacao.esta-aberta { font-weight: 800; }

/* =============================================================================
   [hidden] VOLTA A ESCONDER
   =============================================================================
   ⚠️ `.campo .erro { display: flex }` vencia o atributo `[hidden]`, que só
   carrega `display: none` da folha do agente de usuário. Resultado medido:
   5 triângulos vermelhos no formulário EM BRANCO de /contato/, 8 depois de
   escolher "Dúvida sobre resultado" e 7 no de currículo, todos visíveis antes
   de a pessoa digitar.

   É o oposto de prevenção de erro: o estado de repouso ficava indistinguível
   do estado de falha, e o erro de verdade deixava de chamar atenção.
   ========================================================================== */
[hidden] { display: none !important; }

/* =============================================================================
   O PISO DE TOQUE E O RAMO TIPOGRÁFICO
   =============================================================================
   A Thumb Rule (44px) e o degrau Label (10,5px) estão escritos no DESIGN.md e
   eram descumpridos em toda página. Medido em 390px: 20 alvos abaixo de 44px
   na home, o menor com 9,0px.
   ========================================================================== */

/* ⚠️ O ponto do carrossel continua com 9px de DESENHO e ganha 44px de ÁREA
   por pseudo-elemento. Aumentar o ponto em si estragaria o indicador; o que
   faltava era alvo, não tamanho. */
.carrossel-pontos button { position: relative; }
.carrossel-pontos button::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}

/* O campo de busca da home: 46px é o token `input`, e o foco visível é o que
   o contrato já especifica. Sem ele, a falha era de WCAG 2.4.7 no campo
   principal da página. */
.busca-hero input { min-height: 46px; }

/*
 * ⚠️ **UM ANEL DE FOCO, E ELE É DA CAIXA INTEIRA.**
 *
 * Eram dois, empilhados: a borda do contêiner escurecia E o `input` desenhava
 * um `outline` de 2px por dentro. O anel de dentro não contorna o controle que
 * a pessoa vê, contorna só o campo entre a lupa e o botão: dava um retângulo
 * atravessado dentro de uma caixa que já tinha borda própria.
 *
 * Os dois nasceram certos e em momentos diferentes: o `outline` veio para
 * cumprir foco visível (WCAG 2.4.7) e a borda veio depois, para o mesmo fim.
 * **Ninguém viu que agora eram dois**, que é o que acontece quando o mesmo
 * estado é resolvido em dois lugares.
 *
 * ⚠️ **O anel é `outline`, e não `box-shadow`, de propósito.** Dois lugares
 * zeram o `box-shadow` desta caixa (`.apresentacao` e `.cartao-protocolo`) com
 * a mesma especificidade daqui: usar sombra abriria uma briga de ordem de
 * arquivo, e o anel sumiria numa das duas telas sem ninguém entender por quê.
 *
 * ⚠️ **`:has()` em vez de `:focus-within`** para o anel só aparecer quando o
 * foco está no CAMPO. Com `:focus-within`, tabular até o botão acenderia o anel
 * da caixa junto com o do próprio botão, e voltaria a ser dois. A troca de cor
 * da borda fica no `:focus-within` como reserva para quem não tem `:has()`.
 */
.busca-hero:focus-within { border-color: var(--cor-teal-ink); }

.busca-hero:has(input:focus-visible) {
  border-color: var(--cor-teal-ink);
  outline: 3px solid rgb(15 115 134 / .3);
  outline-offset: 1px;
}

/* O CTA do topo estava com 39px. */
.btn-destaque { min-height: 44px; }

/* Alvo de toque nos links que eram só texto: o clicável cresce, o texto não. */
.abrir-termos, .rodape-assinatura, .faixa-clinicas-link,
.trilha a, .card-unidade-contatos a, .rodape-contatos a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.trilha { row-gap: 0; }

/* A caixa de aceite: o alvo é o rótulo inteiro, e não o quadradinho de 18px. */
.aceite { min-height: 44px; align-items: center; }
.aceite input[type="checkbox"] { width: 20px; height: 20px; flex: none; }

/* ⚠️ 8,5px na barra fixa do celular era o menor tipo do site inteiro, no
   componente que o polegar mais usa. Sobe para o piso do próprio ramo. */
.nav-mobile a { font-size: 10.5px; }
.marca-nome small { font-size: 9.5px; }

/* O acordeão do rodapé sai da ordem de foco onde ele é decorativo. */
/* `pointer-events: none` tira o clique e não tira o foco: eram 3 paradas de
   Tab inúteis por página, em botões de 20px que não fazem nada no desktop.
   O `tabindex` sai no JS, que é onde o estado já é decidido. */

/* =============================================================================
   LEGIBILIDADE ENTRE 768 E 999px
   =============================================================================
   ⚠️ **O texto do carrossel ficava sobre a parte cheia da arte, sem tapume.**
   Medido por amostragem de pixel da arte real, remapeando `object-fit: cover`:
   em 768px, 47% da área do parágrafo do slide 1 ficava abaixo de 4,5:1, com
   pior par em 1,00:1. Em 1000px e acima: 0% de falha. Abaixo de 700px o texto
   vai para o bloco navy e está limpo.

   Existia, portanto, uma janela de ~230px de largura em que a promessa
   principal do site ficava sobre um fundo que a apagava. O iPad em retrato é
   768px exatos.

   O layout de texto sobreposto passa a começar em 1000px, e não em 768: até
   lá, o texto continua no bloco navy que já funcionava no celular.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 999px) {
  .carrossel-item { display: flex; flex-direction: column; min-height: 0; }
  .carrossel-arte { position: static; order: 2; }
  .carrossel-arte img { height: auto; aspect-ratio: 16 / 7; object-position: var(--foco-x, center) 30%; }

  .carrossel-texto {
    position: static; order: 1; min-height: 0; padding: 26px 0 24px;
    background: var(--cor-navy);
  }
  .carrossel-item::before { content: none; }

  .carrossel-caixa { max-width: 60ch; }
  .carrossel-caixa h2 { color: #fff; font-size: clamp(22px, 3.2vw, 28px); }
  .carrossel-chapeu   { color: var(--cor-teal); }
  .carrossel-apoio    { color: rgb(255 255 255 / .82); }
  .carrossel-acoes .btn-contorno-navy { border-color: rgb(255 255 255 / .55); color: #fff; background: transparent; }
  .carrossel-acoes .btn-contorno-navy:hover { background: #fff; color: var(--cor-navy); }

  .carrossel-controles { bottom: 10px; }
  .carrossel-pontos button { background: rgb(255 255 255 / .5); }
  .carrossel-pontos button.is-ativo { background: #fff; }
}

/* ⚠️ O chapéu do hero interno media 4,38:1 em 390px, 4,35:1 em /exames/ e
   3,86:1 em 768px: quanto mais estreito o hero, mais o texto avança sobre a
   ponta turquesa do gradiente de 116°. No desktop passa (5,28 a 8,52:1)
   porque o hero largo mantém o chapéu sobre a metade navy.

   Abaixo de 1024px o gradiente fica quase todo navy, e o chapéu volta a ter
   fundo escuro atrás de si em qualquer largura de tela. */
@media (max-width: 1023px) {
  .hero {
    background: linear-gradient(116deg, var(--cor-navy) 0%,
                var(--cor-navy) 62%,
                color-mix(in srgb, var(--cor-navy) 55%, var(--cor-teal-ink)) 100%);
  }
}

/* Os últimos alvos abaixo do piso: chips de sugestão de busca (39px),
   logotipo (42px) e pastilhas de espécie (42px). O texto não muda, a área
   de toque sim. */
.busca-sugestoes a, .marca-link, .pastilha-esp, .aba, .etiqueta-site[href] {
  min-height: 44px; display: inline-flex; align-items: center;
}
.busca-sugestoes { row-gap: 0; }

/* =============================================================================
   O RESTO DOS DEFEITOS DA CRÍTICA
   ========================================================================== */

/* ⚠️ Frase inteira não usa o degrau Label. O rótulo de 10,5px em caixa alta
   com 0,16em de tracking existe para chapéu curto ("Endereços", "Vagas"); em
   "Quais exames o veterinário pediu?" ele vira uma faixa de 33 caracteres
   espaçados que se lê letra a letra. A frase volta a ser frase. */
.secao-form-frase {
  font-size: 14px; font-weight: 700; letter-spacing: normal;
  text-transform: none; color: var(--cor-navy);
}

.titulo-canais {
  margin: 26px 0 0; font-size: clamp(19px, 2.6vw, 23px); font-weight: 800;
  letter-spacing: -.02em; color: var(--cor-navy);
}

/* O parágrafo que dava 159 caracteres por linha em 1280px. */
.texto-medido { max-width: 74ch; }

/* O selo sem endereço não finge ser clicável. */
.selo-parado { cursor: default; }
.selo-parado:hover { background: none; }

/* ------------------------------------------- protocolo na página de resultado */
.cartao-protocolo {
  background: var(--cor-navy); color: #fff;
  border-radius: var(--raio); padding: 26px 24px 24px; margin-bottom: 26px;
}
.cartao-protocolo .chapeu { color: var(--cor-teal-luz, #7FE0EE); }
.cartao-protocolo h2 { margin: 0 0 8px; font-size: clamp(20px, 3vw, 26px); font-weight: 800; color: #fff; letter-spacing: -.02em; }
.cartao-protocolo > p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: rgb(255 255 255 / .82); max-width: 62ch; }
.cartao-protocolo .mono { color: var(--cor-amarelo); font-size: 13.5px; }
.cartao-protocolo .busca-hero { margin-top: 0; box-shadow: none; }

.protocolo-nota { margin: 14px 0 0; font-size: 12.5px; color: rgb(255 255 255 / .72); }
.protocolo-nota a { color: var(--cor-teal); font-weight: 700; }

.chapeu-portas { margin: 0 0 12px; }
.porta-prazo {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--cor-teal-ink);
}
@media (max-width: 560px) {
  .cartao-protocolo { padding: 22px 18px 20px; }
}


/* =============================================================================
   FORMULÁRIO EM CARTÃO  ·  duas colunas, grupos com ícone
   =============================================================================
   ⚠️ **O formulário se dissolvia no fundo da página.** `.cartao-form` não
   tinha fundo, borda nem sombra, e a faixa em volta é `--fundo`: a peça mais
   importante da tela era a única sem superfície própria.

   ⚠️ **E `.formulario` era `flex-direction: column`**, então `.campo-largo`
   (que é `grid-column: 1 / -1`) não fazia nada e TODO campo saía com a
   largura inteira. Medido: dez campos de 1.152px, um deles para digitar um
   telefone.
   ========================================================================== */

.cartao-form {
  background: #fff;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
  padding: 26px 24px 24px;
  box-shadow: 0 1px 2px rgb(25 43 91 / .04), 0 12px 28px -20px rgb(25 43 91 / .32);
}
@media (min-width: 900px) { .cartao-form { padding: 32px 34px 30px; } }

/* O cabeçalho do cartão diz o que acontece ao enviar, e não só "formulário". */
.cf-topo {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid var(--cor-linha);
}
.cf-ic {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--cor-navy); color: var(--cor-amarelo);
  display: grid; place-items: center; font-size: 17px;
}
.cf-topo h3 { margin: 0; font-size: 19px; font-weight: 800; color: var(--cor-navy); letter-spacing: -.02em; }
.cf-topo p  { margin: 3px 0 0; font-size: 13.5px; color: var(--cor-suave); }
.cf-topo .obrig { color: #C42B2B; font-weight: 800; }

/* ------------------------------------------------------- as duas colunas */
.formulario {
  display: grid; gap: 16px 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/*
 * ⚠️ **No formulário, a linha inteira é o PADRÃO, e a meia coluna é a
 * exceção.** A regra antiga listava quem ocupa a linha toda, e quem não
 * estivesse na lista caía em meia coluna sem ninguém decidir isso: foi o que
 * espremeu os nove assuntos de /contato/ numa coluna de 406px, virando uma
 * escada de nove cartões. Só `.campo` (que é campo curto) divide a linha.
 */
.formulario > * { grid-column: 1 / -1; }
.formulario > .campo { grid-column: auto; }
.formulario > .campo-largo { grid-column: 1 / -1; }
.campos > .campo-largo { grid-column: 1 / -1; }

/* O rótulo de grupo separa "A vaga", "Seus dados" e "Currículo" sem
   transformar o formulário em três caixas dentro de uma caixa. */
.grupo-campos {
  display: flex; align-items: center; gap: 9px;
  margin: 10px 0 0; padding-bottom: 9px;
  border-bottom: 1px solid var(--cor-linha);
  font-size: 13px; font-weight: 800; color: var(--cor-navy);
}
.grupo-campos:first-of-type { margin-top: 0; }
.grupo-campos i {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: var(--cor-fundo); color: var(--cor-teal-ink);
  display: grid; place-items: center; font-size: 11.5px;
}

/* ------------------------------------------------------ ações do formulário */
.form-acoes {
  /* ⚠️ `flex-direction: row` explícito: `.form-acoes` também é `.campo`, que
     é `column`, e sem isto o botão caía embaixo da nota, centralizado. */
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 14px 20px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--cor-linha);
}
.form-acoes .btn { min-height: 48px; padding: 14px 26px; font-size: 14px; order: 2; }
.form-nota {
  order: 1; flex: 1; min-width: 220px; margin: 0;
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--cor-suave);
}
.form-nota i { color: var(--cor-teal-ink); margin-top: 2px; }
.form-nota a { color: var(--cor-teal-ink); font-weight: 700; }

@media (max-width: 560px) {
  .cartao-form { padding: 20px 16px 18px; }
  .form-acoes { flex-direction: column; align-items: stretch; }
  .form-acoes .btn { justify-content: center; }
  .form-acoes .btn { order: 1; width: 100%; }
  .form-nota { order: 2; }
}

/* =============================================================================
   ÍCONES QUE ILUSTRAM O DADO
   ========================================================================== */

/* ⚠️ Três algarismos iguais em três células iguais obrigam a ler o rótulo de
   9,5px para saber qual é qual. O ícone responde antes da leitura. */
.faixa-numeros-ic > div { padding-top: 22px; }
.fn-ic {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 4px;
  background: var(--cor-fundo); color: var(--cor-teal-ink);
  display: grid; place-items: center; font-size: 14px;
}

/* O passo do processo seletivo: número e ícone na mesma linha, o número
   dizendo a ordem e o ícone dizendo o quê. */
.passo-topo { display: flex; align-items: center; gap: 10px; }
.passo-topo i { font-size: 16px; color: var(--cor-teal-ink); }

/* ⚠️ "Arraste o arquivo aqui ou escolha do computador" é a instrução certa
   para a pessoa errada quando quem está lendo veio pelo telefone. No toque,
   a caixa fala a língua do aparelho. */
@media (pointer: coarse) {
  .solta-titulo { visibility: hidden; position: relative; }
  .solta-titulo::after {
    content: 'Toque para escolher o arquivo'; visibility: visible;
    position: absolute; left: 0; right: 0; top: 0; text-align: center;
    color: var(--cor-teal-ink); font-weight: 700; text-decoration: underline;
  }
}

/* =============================================================================
   DIVISÓRIA POR BORDA, E NÃO POR FUNDO
   =============================================================================
   ⚠️ **`gap: 1px` sobre fundo cinza pinta a célula que não existe.** A grade
   desenha as divisórias deixando o fundo do contêiner aparecer pelas frestas;
   onde falta uma célula, a "fresta" tem o tamanho de uma célula inteira e
   vira um bloco sólido de `--linha`. Foi assim em /seja-um-conveniado/ (2
   atalhos em 5 colunas) e de novo em /trabalhe-conosco/ no celular (3 números
   em 2 colunas).

   `auto-fit` resolve quando a contagem cabe; não resolve quando ela não cabe.
   A divisória passa a ser BORDA da própria célula: sem célula, sem borda.
   ========================================================================== */

.faixa-numeros, .grade-atalhos { background: transparent; gap: 0; }

.faixa-numeros > div, .grade-atalhos > * {
  border-right: 1px solid var(--cor-linha);
  border-bottom: 1px solid var(--cor-linha);
}
.faixa-numeros { border-bottom: 0; }
.faixa-numeros > div:last-child, .grade-atalhos > *:last-child { border-right: 0; }

/* A última célula ímpar ocupa a linha inteira, em vez de deixar metade vazia. */
@media (max-width: 699px) {
  .faixa-numeros > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
}

/* =============================================================================
   OS DOIS BOTÕES DO SLIDE, LADO A LADO NO CELULAR
   =============================================================================
   ⚠️ Empilhados, os dois CTAs tinham larguras diferentes (cada um do tamanho
   do próprio rótulo) e ocupavam duas linhas de altura no bloco navy, que já é
   a parte mais alta do slide no telefone. Em duas colunas iguais eles viram
   um par, a arte sobe, e o slide inteiro cabe melhor na tela.
   ========================================================================== */
@media (max-width: 767px) {
  .carrossel-acoes {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; margin-top: 18px;
  }
  .carrossel-acoes .btn {
    width: 100%; justify-content: center; text-align: center;
    /* A fonte cede 1px para o rótulo mais longo não quebrar em duas linhas. */
    font-size: 12px; padding: 12px 10px; line-height: 1.2;
  }
  /* Um botão sozinho não vira meia largura solta. */
  .carrossel-acoes .btn:only-child { grid-column: 1 / -1; }

  /* O bloco de texto do slide ganha o mesmo respiro dos dois lados. */
  .carrossel-texto { padding: 24px 0 22px; }
  .carrossel-caixa { max-width: none; }
}

/* Em telas bem estreitas, rótulo longo ainda cabe: a fonte desce mais um
   degrau em vez de o botão quebrar. */
@media (max-width: 359px) {
  .carrossel-acoes .btn { font-size: 11.5px; padding: 11px 8px; }
}

/* =============================================================================
   A FAIXA DO VETERINÁRIO EM UMA LINHA SÓ NO CELULAR
   =============================================================================
   ⚠️ `so-desktop` e `so-celular` existiam no CSS do painel e NÃO existiam
   aqui. Sem elas, os dois rótulos apareceriam juntos, que é pior que o
   problema original.
   ========================================================================== */
.so-desktop { display: none; }
@media (min-width: 768px) {
  .so-desktop { display: inline-flex; }
  .so-celular { display: none !important; }
}

/* A faixa inteira virou link: o alvo passa de um texto de 18px de altura para
   a linha toda, que é o que o dedo acerta. */
a.faixa-clinicas-in { text-decoration: none; }
a.faixa-clinicas-in:hover .faixa-clinicas-link { gap: 12px; color: #fff; }
a.faixa-clinicas-in:focus-visible { outline: 2px solid var(--cor-teal); outline-offset: -2px; }

@media (max-width: 767px) {
  .faixa-clinicas-in {
    justify-content: center; gap: 8px; min-height: 44px;
    padding-top: 6px; padding-bottom: 6px;
  }
  .faixa-clinicas-link { font-size: 12.5px; }
  .faixa-clinicas-link > i:first-child { color: var(--cor-teal); }
}


/* =============================================================================
   A PRIMEIRA DOBRA, EM TRÊS AJUSTES
   ========================================================================== */

/* ------------------------------------------- 1. a faixa de plantão respira
   ⚠️ As duas unidades ficavam encostadas uma na outra, e o botão de WhatsApp
   no meio da frase da primeira parecia pertencer à segunda. Cada unidade
   passa a ser um bloco com divisória, e o botão volta ao raio dos botões do
   site (9px) em vez da pílula, que aqui lia como etiqueta e não como ação. */
.faixa-plantao { padding: 0; }
.faixa-plantao .eixo { gap: 0; }

.plantao-lista { gap: 0; flex: 1; }
.plantao-lista li {
  gap: 14px; padding: 14px 26px 14px 0;
  border-right: 1px solid rgb(255 255 255 / .14);
}
.plantao-lista li + li { padding-left: 26px; }
.plantao-lista li:last-child { border-right: 0; }

.plantao-zap {
  margin-left: auto;
  border-radius: var(--raio-sm);
  padding: 0 15px; min-height: 40px;
  background: rgb(255 255 255 / .1);
  border-color: rgb(255 255 255 / .2);
}

.plantao-todas {
  padding-left: 26px; margin-left: 4px;
  border-left: 1px solid rgb(255 255 255 / .14);
  min-height: 52px;
}

@media (max-width: 1023px) {
  .plantao-lista li { padding-right: 18px; }
  .plantao-lista li + li { padding-left: 18px; }
  .plantao-todas { padding-left: 18px; }
}

@media (max-width: 767px) {
  .faixa-plantao { padding: 4px 0; }
  .plantao-lista li {
    border-right: 0; padding: 12px 0;
    border-bottom: 1px solid rgb(255 255 255 / .12);
  }
  .plantao-lista li + li { padding-left: 0; }
  .plantao-todas {
    border-left: 0; padding-left: 0; margin-left: 0;
    justify-content: center; min-height: 44px;
  }
}

/* --------------------------------- 2. o texto de um lado, a busca do outro
   ⚠️ Empilhados, o chapéu, o título, o apoio, a busca e os cinco chips
   ocupavam cinco blocos numa coluna só, e a dobra virava uma escada. Em
   telas largas o par vira duas colunas: quem lê fica à esquerda, quem age
   fica à direita, e a altura cai pela metade. */
@media (min-width: 1024px) {
  .apresentacao-in {
    max-width: none;
    display: grid; align-items: center; gap: 20px 48px;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  }
  .apresentacao-in > .chapeu { grid-column: 1; grid-row: 1; align-self: end; margin: 0; }
  .apresentacao-in > h1      { grid-column: 1; grid-row: 2; }
  .apresentacao-in > .apoio  { grid-column: 1; grid-row: 3; align-self: start; margin-top: 4px; }

  .apresentacao-in > .busca-hero      { grid-column: 2; grid-row: 1 / 3; margin-top: 0; align-self: end; }
  .apresentacao-in > .busca-sugestoes { grid-column: 2; grid-row: 3; align-self: start; margin-top: 4px; }

  .apresentacao .busca-hero { max-width: none; }
}

/* ------------------------------------------- 3. os atalhos deixam de colar
   ⚠️ A faixa de selos (navy) terminava e a grade de atalhos começava no
   pixel seguinte: dois blocos de conteúdo diferente sem nenhuma separação,
   e a leitura somava os dois num bloco só. */
.faixa-atalhos { padding: 20px 0 22px; border-top: 1px solid var(--cor-linha); }
.faixa-atalhos .grade-atalhos {
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgb(25 43 91 / .04), 0 10px 24px -20px rgb(25 43 91 / .3);
}
.faixa-atalhos .grade-atalhos > *:last-child { border-right: 0; }
.card-atalho { border-bottom: 0; }

@media (max-width: 899px) {
  .faixa-atalhos .grade-atalhos > * { border-bottom: 1px solid var(--cor-linha); }
  .faixa-atalhos .grade-atalhos > *:last-child { border-bottom: 0; }
}

/* No telefone, "Fechado. Abre amanhã às 8h30" quebrava em duas linhas e
   empurrava o bloco. O nome fica em cima, a situação embaixo, e as duas
   cabem em uma linha cada. */
@media (max-width: 767px) {
  .plantao-texto { flex: 1; min-width: 0; }
  .plantao-texto strong { font-size: 12.5px; }
  .plantao-texto span   { font-size: 12.5px; line-height: 1.3; }
  .plantao-zap { padding: 0 12px; font-size: 12px; }
}
@media (max-width: 400px) {
  .plantao-texto span { font-size: 12px; }
  .plantao-zap span { display: none; }
  .plantao-zap { padding: 0; width: 40px; justify-content: center; }
  .plantao-zap i { font-size: 16px; }
}


/* =============================================================================
   SEJA CONVENIADO  ·  a ficha vira a página
   =============================================================================
   ⚠️ A ficha é a razão de a página existir e vivia numa coluna de 880px
   centralizada, sem superfície própria: campos soltos sobre o branco da
   seção, com a tela vazia dos dois lados. Agora é um cartão com coluna de
   apoio, que é o padrão de página de conversão B2B e resolve o vazio.
   ========================================================================== */

.ficha-duas {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .ficha-duas { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: 30px; }
}

.ficha-principal {
  background: #fff;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
  padding: 26px 22px 24px;
  box-shadow: 0 1px 2px rgb(25 43 91 / .04), 0 14px 32px -22px rgb(25 43 91 / .34);
}
@media (min-width: 900px) { .ficha-principal { padding: 32px 34px 30px; } }

.ficha-principal .cf-topo h2 {
  margin: 0; font-size: clamp(20px, 2.6vw, 25px); font-weight: 800;
  letter-spacing: -.02em; color: var(--cor-navy);
}

/* ------------------------------------------------------ a coluna de apoio */
.ficha-apoio { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) { .ficha-apoio { position: sticky; top: 88px; } }

.apoio-bloco {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
  padding: 20px 18px;
}
.apoio-bloco h3 {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-size: 14px; font-weight: 800; color: var(--cor-navy);
}
.apoio-bloco h3 i { color: var(--cor-teal-ink); font-size: 13px; }
.apoio-bloco > p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--cor-suave); }

.apoio-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.apoio-passos li {
  display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start;
  font-size: 13px; line-height: 1.5; color: var(--cor-suave);
}
.apoio-passos span {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cor-navy); color: #fff;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* O bloco escuro é o canal humano, e o contraste marca isso. */
.apoio-bloco-escuro { background: var(--cor-navy); border-color: var(--cor-navy); }
.apoio-bloco-escuro h3 { color: #fff; }
.apoio-bloco-escuro h3 i { color: var(--cor-teal); }
.apoio-bloco-escuro > p { color: rgb(255 255 255 / .78); }

.apoio-zap {
  display: flex; align-items: center; gap: 11px; min-height: 52px;
  padding: 9px 13px; margin-top: 8px;
  border-radius: var(--raio-sm);
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .16);
  transition: background .18s;
}
.apoio-zap:hover { background: rgb(255 255 255 / .18); }
.apoio-zap i { color: var(--cor-teal); font-size: 17px; }
/* ⚠️ A cor precisa estar AQUI, e não só no `strong` de dentro. Na tela de
   credenciamento o span sempre embrulha `<strong>` e `<small>`, que trazem a
   própria cor; na de agendamento ele carrega texto solto, e sem esta linha o
   nome da unidade herdava a tinta escura do corpo e sumia dentro do navy. */
.apoio-zap span {
  display: flex; flex-direction: column; min-width: 0;
  font-size: 13.5px; font-weight: 700; color: #fff;
}
.apoio-zap strong { font-size: 13px; color: #fff; }
.apoio-zap small  { font-size: 12px; color: var(--cor-teal); }

.apoio-nota {
  display: flex; align-items: flex-start; gap: 9px; margin: 0;
  font-size: 12px; line-height: 1.5; color: var(--cor-suave);
}
.apoio-nota i { color: var(--cor-teal-ink); margin-top: 2px; }

/* ------------------------------------------------ os campos em duas colunas */
.formulario-etapas .campos {
  display: grid; gap: 14px 18px; grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .formulario-etapas .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------- a trilha de passos */
/* ⚠️ **A linha de progresso JÁ EXISTIA** em `.passos-form li::before`, ligando
   cada bolha à anterior e parando antes dela. Eu acrescentei uma segunda,
   esticada de ponta a ponta, e ela passava por cima dos números 2, 3 e 4: as
   bolhas inativas têm fundo claro e não cobriam o traço.

   A regra nova saiu. A lição é a de sempre neste arquivo: procurar o que já
   existe antes de desenhar de novo. */

/* As bolhas ficam acima de qualquer conector, e com fundo opaco. */
.passo-bolha { position: relative; z-index: 2; }

/* -------------------------------------------------- as vantagens em lista */
.lista-vantagens {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px 34px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.lista-vantagens li {
  display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px;
  align-items: start;
}
.lv-ic {
  grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px;
  background: var(--cor-fundo); color: var(--cor-teal-ink);
  display: grid; place-items: center; font-size: 17px;
}
.lista-vantagens h3 { margin: 3px 0 0; font-size: 15.5px; font-weight: 800; color: var(--cor-navy); }
.lista-vantagens p  { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--cor-suave); }

@media (max-width: 1023px) {
  .ficha-apoio { order: 2; }
}

/* ⚠️ O formulário de ETAPAS não é grid de duas colunas: quem é grid é o
   `.campos` de dentro de cada etapa. Sem esta regra, a trilha de passos e o
   primeiro fieldset viravam duas colunas irmãs, e a escolha CNPJ/CPF subia
   para o lado da trilha. */
.formulario-etapas { display: flex; flex-direction: column; gap: 0; }
.formulario-etapas > * { grid-column: auto; }
.formulario-etapas .etapa { width: 100%; }

/* =============================================================================
   FICHA DE EXAME  ·  acabamento
   ========================================================================== */

/* ⚠️ A borda amarela de 4px à esquerda do preparo saiu: filete colorido
   grosso em cartão é o atalho barato para dar destaque, e gastava o amarelo
   fora da Now-and-Act Rule. O destaque agora vem do que importa: ícone em
   caixa, tipografia maior e a superfície um degrau acima. */
.fe-preparo {
  border-left: 1px solid var(--linha);
  background: linear-gradient(180deg, #fff, var(--fundo));
}
.fe-preparo h2 i { color: var(--navy); }
.fe-preparo p { font-size: 17px; line-height: 1.5; color: var(--navy); font-weight: 600; }

/* Sombra e ícone em caixa, no mesmo vocabulário do resto do site. */
.fe-cartao {
  box-shadow: 0 1px 2px rgb(25 43 91 / .04), 0 10px 24px -20px rgb(25 43 91 / .3);
}
.fe-cartao h2 i {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: var(--fundo); display: grid; place-items: center; font-size: 12px;
}
.fe-preparo h2 i { background: var(--amarelo); }

/* O cartão de valor sem preço cadastrado: mesma informação, menos peso. */
.fe-cartao-vazio { background: var(--fundo); box-shadow: none; }
.fe-cartao-vazio .fe-preco { font-size: 14px; font-weight: 600; color: var(--suave); line-height: 1.5; }
.fe-cartao-vazio h2 i { background: #fff; }

/* A ficha ganha uma ação no fim, e não só no topo: quem rolou até os exames
   parecidos já decidiu, e voltar ao topo para agir é atrito. */
.fe-fecho {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px; margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--linha);
}
.fe-fecho p { margin: 0; font-size: 13.5px; color: var(--suave); max-width: 52ch; }
.fe-fecho-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) {
  .fe-fecho { flex-direction: column; align-items: stretch; }
  .fe-fecho-acoes .btn { width: 100%; justify-content: center; }
}


/* =============================================================================
   LIFEVET EXPLICA  ·  a listagem
   =============================================================================
   Modo Read: o visitante veio entender uma coisa. A hierarquia entrega o mais
   recente primeiro e o resto em lista, e o título ocupa o lugar que a capa
   vazia ocupava.
   ========================================================================== */

/* ------------------------------------------------------------- o destaque */
.artigo-destaque { margin: 0 0 24px; }
.ad-link {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  background: var(--cor-navy); color: #fff;
  border-radius: var(--raio); overflow: hidden;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(25 43 91 / .06), 0 18px 40px -28px rgb(25 43 91 / .5);
  transition: transform .18s, box-shadow .18s;
}
.ad-link:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(25 43 91 / .08), 0 26px 50px -30px rgb(25 43 91 / .6); }
.ad-link:focus-visible { outline: 2px solid var(--cor-teal); outline-offset: 3px; }

@media (min-width: 900px) {
  .ad-link:has(.ad-capa) { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
}

.ad-capa { display: block; overflow: hidden; }
.ad-capa img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }

.ad-corpo { display: flex; flex-direction: column; gap: 12px; padding: 30px 26px 28px; }
@media (min-width: 900px) { .ad-corpo { padding: 40px 38px 36px; } }

.ad-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ad-meta .etiqueta-site { background: rgb(255 255 255 / .12); color: #fff; border: 1px solid rgb(255 255 255 / .18); }
.ad-novo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cor-navy); background: var(--cor-amarelo);
  border-radius: 999px; padding: 4px 10px;
}

.ad-titulo {
  display: block; font-size: clamp(23px, 3.4vw, 33px); font-weight: 800;
  line-height: 1.14; letter-spacing: -.024em; text-wrap: balance; color: #fff;
  max-width: 22ch;
}
.ad-resumo {
  display: block; font-size: 15px; line-height: 1.65;
  color: rgb(255 255 255 / .82); max-width: 56ch;
}
.ad-pe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-top: 2px; font-size: 12.5px; color: rgb(255 255 255 / .66);
}
.ad-pe i { color: var(--cor-teal); margin-right: 5px; }
.ad-pe time { font-variant-numeric: tabular-nums; }
.ad-seta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--cor-amarelo);
  transition: gap .18s;
}
.ad-link:hover .ad-seta { gap: 13px; }

/* --------------------------------------------------------- os demais */
/* ⚠️ Sem capa cadastrada, o cartão não desenha caixa nenhuma: o título sobe
   e ocupa o lugar. A patinha num retângulo de 130px era espaço morto no
   ponto mais caro do cartão. */
.cartao-artigo .ca-corpo { padding: 22px 20px 20px; }
.cartao-artigo h2 { font-size: 18px; line-height: 1.26; letter-spacing: -.018em; }
.cartao-artigo h2 a { color: var(--cor-navy); }
.cartao-artigo:hover h2 a { color: var(--cor-teal-ink); }
.cartao-artigo p { font-size: 14px; line-height: 1.6; color: var(--cor-suave); }

.ca-pe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--cor-linha);
  font-size: 12px; color: var(--cor-suave);
}
.ca-pe i { color: var(--cor-teal-ink); margin-right: 5px; }
.ca-pe time { font-variant-numeric: tabular-nums; margin-left: auto; }

/* ------------------------------------------------------------ o fecho */
.blog-fecho {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 26px; margin-top: 30px; padding: 26px 24px;
  background: var(--cor-fundo); border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
}
.blog-fecho h2 { margin: 4px 0 6px; font-size: clamp(19px, 2.4vw, 24px); font-weight: 800; color: var(--cor-navy); letter-spacing: -.02em; }
.blog-fecho p  { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cor-suave); max-width: 58ch; }
.blog-fecho .chapeu { margin: 0; }

@media (max-width: 640px) {
  .blog-fecho { flex-direction: column; align-items: stretch; }
  .blog-fecho .btn { justify-content: center; }
}

/* Com um ou dois artigos além do destaque, eles dividem a largura em vez de
   deixarem uma coluna vazia à direita. */
@media (min-width: 760px) {
  .grade-artigos-1 { grid-template-columns: minmax(0, 1fr); }
  .grade-artigos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =============================================================================
   A FICHA DO ARTIGO  ·  modo leitura
   =============================================================================
   ⚠️ Os subtítulos do artigo eram `<h2>`, e `htmlRico()` não tinha `<h2>` na
   lista de tags permitidas: o strip_tags devolvia a frase como texto solto e
   o artigo virava um bloco corrido, sem nenhum erro na tela para denunciar.
   Com o h2 de volta, ele precisa de estilo à altura.
   ========================================================================== */

.artigo-corpo h2 {
  font-size: clamp(19px, 2.4vw, 23px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.25;
  margin: 34px 0 12px; padding-top: 6px; color: var(--cor-navy);
  text-wrap: balance;
}
.artigo-corpo h2:first-child { margin-top: 0; }
.artigo-corpo h3 { font-size: 17.5px; font-weight: 800; margin: 26px 0 8px; color: var(--cor-navy); }

/* ⚠️ As listas apareciam indentadas e sem marcador: um reset global tira o
   `list-style` e o artigo é justamente onde a lista precisa contar. */
.artigo-corpo ul { list-style: disc; padding-left: 22px; }
.artigo-corpo ol { list-style: decimal; padding-left: 24px; }
.artigo-corpo li { margin-bottom: 8px; padding-left: 4px; }
.artigo-corpo li::marker { color: var(--cor-teal-ink); font-weight: 700; }

.artigo-corpo strong { color: var(--cor-navy); font-weight: 700; }
.artigo-corpo p { margin: 0 0 18px; }
.artigo-corpo > p:first-of-type {
  font-size: 18.5px; line-height: 1.62; color: var(--cor-navy);
}

/* ------------------------------------------------------- meta do artigo */
/* A data flutuava sozinha do outro lado da linha do autor. Autor, tempo de
   leitura e data viram uma linha só, com o mesmo peso. */
.artigo-autor {
  flex-wrap: wrap; gap: 10px 18px;
  padding-bottom: 20px; border-bottom: 1px solid var(--cor-linha);
}
.artigo-autor time { margin-left: 0; font-variant-numeric: tabular-nums; }
.artigo-meta-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--cor-suave);
}
.artigo-meta-item i { color: var(--cor-teal-ink); font-size: 12px; }

/* --------------------------------------------- barra de progresso da leitura */
/* ⚠️ Um artigo é o único lugar do site onde a pessoa quer saber quanto falta
   enquanto rola. A barra tem 3px e não ocupa espaço nenhum do conteúdo. */
.barra-leitura {
  position: fixed; left: 0; top: 0; height: 3px; z-index: 60;
  width: 100%; background: var(--cor-amarelo);
  /* ⚠️ **Anima `transform`, e não `width`.** Largura animada refaz o layout a
     cada evento de rolagem, e o evento de rolagem é justamente o que dispara
     essa animação: era a única peça do site que pedia recálculo em cada
     quadro enquanto a pessoa lê. `scaleX` roda no compositor. */
  transform: scaleX(var(--lido, 0)); transform-origin: 0 50%;
  transition: transform .1s linear; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .barra-leitura { transition: none; } }


/* ------------------------------------------------------- o aviso do fim */
/*
 * ⚠️ **Ele acompanha a largura do bloco a que pertence, e não uma medida
 * própria.** O aviso comenta o que está logo acima dele: numa grade de três
 * cartões que ocupa a faixa inteira, uma caixa de 78ch encostada à esquerda lê
 * como pedaço solto, e não como nota de rodapé daquela grade.
 *
 * ⚠️ **`margin-inline: 0` e `max-width: none` estão ditos de propósito**, e
 * não omitidos: era a omissão que deixava a medida velha de pé.
 */
.aviso-rotina {
  display: flex; align-items: flex-start; gap: 11px;
  max-width: none; margin: 30px 0 0; padding: 16px 18px;
  background: var(--cor-fundo); border: 1px solid var(--cor-linha);
  border-radius: var(--raio-sm);
  font-size: 13.5px; line-height: 1.6; color: var(--cor-suave);
}
.aviso-rotina i { color: var(--cor-teal-ink); margin-top: 2px; }

/* ⚠️ **A trilha do artigo estava invisível.** A classe `.migalhas` nasceu no
   topo NAVY da ficha de exame, onde o branco a 62% funciona; o artigo usa a
   mesma classe sobre fundo claro, e o contraste medido caiu para **1,08:1**.
   Sobre claro, ela usa as cores de texto sobre claro. */
.artigo-topo .migalhas { color: var(--cor-suave); }
.artigo-topo .migalhas a { color: var(--cor-teal-ink); font-weight: 600; }
.artigo-topo .migalhas a:hover { color: var(--cor-navy); }


/* =============================================================================
   CONVÊNIOS  ·  o cartão que responde
   =============================================================================
   Antes eram oito logotipos de 150px numa grade, sem nome, sem o que cobre e
   sem o que levar. Agora cada convênio é um cartão de verdade, três por linha,
   que abre a janela do plano.
   ========================================================================== */

.conv-topo { margin-bottom: 22px; }

.conv-busca {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--cor-linha); border-radius: var(--raio);
  padding: 6px 8px 6px 16px; max-width: 560px;
  transition: border-color .18s, box-shadow .18s;
}
.conv-busca:focus-within {
  border-color: var(--cor-teal-ink);
  box-shadow: 0 0 0 4px rgb(15 115 134 / .1);
}
.conv-busca > i { color: var(--cor-teal-ink); font-size: 15px; }
.conv-busca input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 15px; color: var(--cor-navy); min-height: 46px;
}
.conv-busca input::placeholder { color: var(--cor-suave); }

.conv-dica { margin: 10px 0 0; font-size: 12.5px; color: var(--cor-suave); }
.conv-dica b { color: var(--cor-navy); font-weight: 700; }

/* ------------------------------------------------------------ a resposta */
.conv-resposta { margin-bottom: 20px; }
.conv-aviso {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px; border-radius: var(--raio-sm);
  font-size: 14px; line-height: 1.55;
}
.conv-sim { background: var(--ok-fundo); color: var(--ok); }
.conv-sim strong { color: var(--ok); }
.conv-nao { background: var(--alerta-fundo); color: var(--alerta); }
.conv-nao a { color: var(--cor-teal-ink); font-weight: 700; }
.conv-aviso i { margin-top: 2px; }

/* -------------------------------------------------------------- a grade */
.grade-convenios-ricos {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
@media (min-width: 1024px) {
  /* Três por linha: o logo respira e o nome cabe sem quebrar. */
  .grade-convenios-ricos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.conv-cartao[hidden] { display: none; }

.conv-botao {
  display: flex; flex-direction: column; gap: 0; width: 100%; height: 100%;
  padding: 0; border: 1px solid var(--cor-linha); border-radius: var(--raio);
  background: #fff; cursor: pointer; text-align: left; overflow: hidden;
  box-shadow: 0 1px 2px rgb(25 43 91 / .04), 0 10px 24px -20px rgb(25 43 91 / .3);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.conv-botao:hover {
  transform: translateY(-3px); border-color: var(--cor-teal-ink);
  box-shadow: 0 2px 4px rgb(25 43 91 / .06), 0 18px 34px -20px rgb(25 43 91 / .38);
}
.conv-botao:focus-visible { outline: 2px solid var(--cor-teal-ink); outline-offset: 3px; }

/* O logo ganha uma faixa própria, com altura fixa: oito marcas de proporções
   diferentes precisam de um palco igual para não parecerem desalinhadas. */
.conv-marca {
  display: grid; place-items: center;
  height: 108px; padding: 18px 22px;
  background: var(--cor-fundo); border-bottom: 1px solid var(--cor-linha);
}
.conv-marca img { max-width: 100%; max-height: 62px; object-fit: contain; }
.conv-sem-logo { font-size: 17px; font-weight: 800; color: var(--cor-navy); text-align: center; }

.conv-corpo { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px 12px; flex: 1; }
.conv-nome { font-size: 16px; font-weight: 800; color: var(--cor-navy); line-height: 1.25; }
.conv-resumo { font-size: 13px; line-height: 1.5; color: var(--cor-suave); }

.conv-pe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0 18px 16px; margin-top: auto;
}
.conv-selo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 10px;
}
.conv-selo-auth { background: var(--alerta-fundo); color: var(--alerta); }
.conv-selo-destaque { background: var(--cor-amarelo); color: var(--cor-navy); font-weight: 800; }
.conv-ver {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--cor-teal-ink);
  transition: gap .18s;
}
.conv-botao:hover .conv-ver { gap: 11px; }

.conv-destacado .conv-botao { border-color: var(--cor-amarelo); }

/* ------------------------------------------------------------- o vazio */
.conv-vazio {
  border: 2px dashed var(--cor-linha); border-radius: 18px;
  padding: 36px 22px; text-align: center; background: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.conv-vazio > i { font-size: 26px; color: var(--cor-teal-ink); opacity: .5; }
.conv-vazio h2 { margin: 0; font-size: 19px; color: var(--cor-navy); }
.conv-vazio p  { margin: 0; max-width: 54ch; font-size: 14px; line-height: 1.6; color: var(--cor-suave); }

/* -------------------------------------------------------- a janela do plano */
.modal-conv .modal-vaga-topo { align-items: center; }
.mc-marca {
  flex: none; width: 62px; height: 46px; border-radius: 9px;
  background: #fff; display: grid; place-items: center; padding: 6px;
}
.mc-marca img { max-width: 100%; max-height: 34px; object-fit: contain; }
.mc-marca i { color: var(--cor-navy); font-size: 18px; }

.mc-resumo { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cor-suave); }

.mc-bloco { padding-top: 4px; }
.mc-bloco h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cor-teal-ink);
}
.mc-bloco .prosa { font-size: 14.5px; line-height: 1.65; }
.mc-bloco .prosa p { margin: 0 0 10px; }
.mc-bloco .prosa p:last-child { margin-bottom: 0; }

[data-mc-auth-bloco] {
  background: var(--alerta-fundo); border-radius: var(--raio-sm);
  padding: 14px 16px;
}
[data-mc-auth-bloco] h3 { color: var(--alerta); margin-bottom: 6px; }
[data-mc-auth-bloco] p  { margin: 0; font-size: 14px; line-height: 1.55; color: var(--alerta); }

.conv-site {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 13px; font-weight: 700; color: var(--cor-teal-ink);
}

/* Enquanto a busca do manual vai ao servidor, o resultado esmaece em vez de
   piscar em branco: a pessoa continua vendo o que estava lendo. */
.manual-resultado { transition: opacity .14s; }
.manual-resultado.esta-buscando { opacity: .45; pointer-events: none; }

/* De onde a pessoa veio, dito na tela do contato. */
.veio-da-ficha {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 11px;
  margin: 0 0 4px; padding: 13px 15px;
  background: var(--cor-fundo); border: 1px solid var(--cor-linha);
  border-radius: var(--raio-sm);
  font-size: 13.5px; line-height: 1.55; color: var(--cor-suave);
}
.veio-da-ficha i { color: var(--cor-teal-ink); margin-top: 2px; }
.veio-da-ficha strong { color: var(--cor-navy); }

/* =============================================================================
   PERFIS E FICHA DE EXAME  ·  o respiro que faltava
   =============================================================================
   ⚠️ "Muito colado" tinha medida: o cartão de perfil usava 24px de padding
   com 6px entre os exames, e as três camadas (topo, quando pedir, lista de
   exames) ficavam a 18px uma da outra. Numa lista com seis exames em cinco
   colunas, isso vira um bloco cinza contínuo sem hierarquia.
   ========================================================================== */

.perfil-bloco { padding: 28px 26px 24px; }
@media (min-width: 900px) { .perfil-bloco { padding: 32px 30px 26px; } }
.perfis-lista { gap: 20px; }

.pb-topo { gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--cor-linha); }
.pb-quando { margin-top: 22px; padding: 15px 18px; }
.pb-exames { margin-top: 26px; }
.pb-rotulo { margin-bottom: 13px; }

/* Os exames do perfil ganham ar entre si. ⚠️ O RECHEIO E O HOVER saíram
   daqui: este bloco é de espaço, e o estado visual mora na definição do
   componente. Foi a divisão entre os dois que apagou o nome no hover. */
.pb-exames ul { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }

.pb-pe { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--cor-linha); }

/* ------------------------------------------------------- a ficha do exame */
/* O bloco técnico e a coluna lateral encostavam um no outro e no cabeçalho. */
.fe-cartoes { gap: 16px; margin-bottom: 26px; }
.fe-cartao { padding: 20px 22px; }
.fe-preparo { padding: 24px 24px 22px; }
.fe-acoes { gap: 12px 16px; margin-top: 4px; padding-top: 22px; border-top: 1px solid var(--cor-linha); }
.fe-tecnico { padding-top: 4px; }
.fe-lista > div { padding: 13px 0; }
.fe-lado { gap: 18px; }

/* =============================================================================
   O SELETOR DE EXAMES VIRA CAMPO
   =============================================================================
   ⚠️ Ele nascia aberto, empurrando 268px de lista com barra de rolagem para
   dentro do formulário. A pessoa via uma caixa de opções antes de saber que
   precisava escolher alguma, e a borda interna da lista aparecia no meio do
   cartão como se fosse um erro de layout.
   ========================================================================== */

.seletor-exames { border: 0; background: none; overflow: visible; position: relative; }

.seletor-gatilho {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 46px; padding: 9px 14px;
  border: 1.5px solid var(--cor-linha); border-radius: var(--raio-sm);
  background: #fff; cursor: pointer; text-align: left;
  font: inherit; color: var(--cor-navy);
  transition: border-color .18s;
}
.seletor-gatilho:hover { border-color: var(--cor-teal-ink); }
.seletor-exames.esta-aberto .seletor-gatilho { border-color: var(--cor-teal); }
.seletor-gatilho:focus-visible { outline: 2px solid var(--cor-teal-ink); outline-offset: 2px; }
.seletor-gatilho > i { margin-left: auto; flex: none; font-size: 12px; color: var(--cor-suave); transition: transform .2s; }
.seletor-exames.esta-aberto .seletor-gatilho > i { transform: rotate(180deg); }

.seletor-fichas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.seletor-rotulo-vazio { font-size: 14px; color: var(--cor-suave); }

.seletor-ficha {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--cor-fundo); border: 1px solid var(--cor-linha);
  font-size: 12.5px; font-weight: 600; color: var(--cor-navy); cursor: pointer;
}
.seletor-ficha:hover { background: #FDECED; border-color: #C42B2B; color: #C42B2B; }
.seletor-ficha i { font-size: 10px; opacity: .7; }

/* O painel flutua sobre o formulário em vez de empurrar o resto para baixo. */
.seletor-painel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: #fff; border: 1px solid var(--cor-linha); border-radius: var(--raio);
  box-shadow: 0 18px 40px -22px rgb(14 27 51 / .42);
  overflow: hidden;
}
.seletor-painel[hidden] { display: none; }

@media (max-width: 640px) {
  /* Em tela pequena o painel volta a empurrar: flutuando, ele cairia fora
     da vista com o teclado aberto. */
  .seletor-painel { position: static; box-shadow: none; margin-top: 8px; }
}

/* =============================================================================
   AS DIVISÓRIAS DOS SELOS
   =============================================================================
   ⚠️ `gap: 1px` com fundo branco a 10% sobre navy desenha uma linha clara e
   grossa: no celular, com quatro selos em duas colunas, viram uma cruz no
   meio da faixa. A divisória passa a ser borda da célula, a 6%.
   ========================================================================== */
.grade-selos { gap: 0; background: transparent; }
.grade-selos li { border-right: 1px solid rgb(255 255 255 / .06); border-bottom: 1px solid rgb(255 255 255 / .06); }
@media (min-width: 900px) {
  .grade-selos li { border-bottom: 0; }
  .grade-selos li:last-child { border-right: 0; }
}
@media (max-width: 899px) {
  .grade-selos li:nth-child(2n) { border-right: 0; }
  .grade-selos li:nth-last-child(-n+2) { border-bottom: 0; }
}

/* =============================================================================
   O AVISO DE UNIDADE FECHADA
   =============================================================================
   ⚠️ Ele encostava no "Falar agora, sem formulário" logo abaixo, e o fundo
   `--fundo` era o mesmo da seção: um aviso sem superfície própria colado num
   título vira parte do título. Agora é cartão branco com sombra, respiro
   embaixo e o ponto marcando o estado.
   ========================================================================== */
.canal-agora {
  background: #fff;
  border: 1px solid var(--cor-linha);
  box-shadow: 0 1px 2px rgb(25 43 91 / .04), 0 10px 24px -20px rgb(25 43 91 / .3);
  padding: 18px 22px;
  margin-bottom: 30px;
}
.canal-aberto  { border-color: rgb(18 104 79 / .3); }
.canal-fechado { border-color: rgb(138 93 6 / .28); }

/* O ponto do aviso repete a linguagem da faixa de plantão: azul pulsando
   quando aberto, cinza parado quando fechado. */
.canal-agora .ponto { width: 12px; height: 12px; flex: none; }
/* Chão claro: navy, e o halo sai do mesmo triplo. */
.canal-aberto .ponto { --pulso: var(--cor-navy-rgb); background: rgb(var(--pulso)); animation: lv-pulso 2.2s ease-out infinite; }
.canal-fechado .ponto { background: var(--alerta); animation: none; }

/* ⚠️ O aviso de fechado ganha um selo, porque "fechado agora" é o dado que
   muda o que a pessoa vai fazer em seguida, e ele estava em 12,5px cinza. */
.canal-fechado strong::after {
  content: 'agora';
  display: inline-block; margin-left: 8px; padding: 3px 9px;
  border-radius: 999px; background: var(--alerta-fundo); color: var(--alerta);
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  vertical-align: middle;
}
.canal-fechado strong { font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .canal-aberto .ponto { animation: none; }
}

/* Os campos do formulário dividem a linha de verdade: `.campos` herdava a
   largura do grid do formulário e ficava mais estreito que o cartão. */
.formulario > .campos, .formulario .grupo-condicional > .campos { width: 100%; }

/* ⚠️ `auto-fit` com mínimo de 220px cria TRÊS colunas numa largura de 740px,
   e "Seu nome" e "WhatsApp" saíam com 232px cada, sobrando um vão à direita.
   Campo de formulário quer metade da linha, não o que couber: duas colunas
   fixas a partir de 700px, uma abaixo disso. */
.campos { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
}


/* =============================================================================
   A FAIXA DE PLANTÃO OCUPA A LARGURA QUE TEM
   =============================================================================
   ⚠️ **Duas unidades encostadas à esquerda e um vão morto no meio.** Medido em
   1440: os dois blocos somavam 640px e sobravam ~380px de navy vazio antes do
   "Horários da semana". O `flex: 1` na lista dava a ela a largura, mas os dois
   `li` continuavam do tamanho do próprio conteúdo e se amontoavam no começo.

   Agora as unidades são DUAS COLUNAS IGUAIS que dividem o espaço sobrando: o
   nome respira, o WhatsApp encosta à direita da própria coluna e a divisória
   separa uma da outra. O link da direita não sai do lugar.
   ========================================================================== */

@media (min-width: 768px) {
  .faixa-plantao { padding: 15px 0; }

  .faixa-plantao .eixo { gap: 14px 28px; flex-wrap: nowrap; }

  .plantao-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    flex: 1; min-width: 0;
  }

  /* Cada unidade é uma linha completa: identidade à esquerda, ação à direita. */
  .plantao-lista li {
    justify-content: space-between;
    gap: 14px;
    padding: 0 26px 0 0;
  }
  .plantao-lista li + li {
    padding: 0 0 0 26px;
    border-left: 1px solid rgb(255 255 255 / .14);
  }

  /* Com espaço de verdade, o nome pode ser lido de longe. */
  .plantao-texto strong { font-size: 14.5px; }
  .plantao-texto span   { font-size: 13.5px; }

  .plantao-zap { padding: 0 16px; font-size: 13px; }
  .plantao-zap i { font-size: 15px; }

  /* A separação da lista para o link da direita, que continua onde estava. */
  .plantao-todas {
    padding-left: 28px;
    border-left: 1px solid rgb(255 255 255 / .14);
    font-size: 13px;
  }
}

/* Quando o eixo aperta, três colunas no navy viram texto espremido. */
@media (min-width: 768px) and (max-width: 1099px) {
  .faixa-plantao .eixo { flex-wrap: wrap; }
  .plantao-todas { padding-left: 0; border-left: 0; margin-left: auto; }
}

/* -------------------------------------------------- o motivo do fechamento */
.plantao-motivo {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: 4px; padding: 2px 9px; border-radius: 999px;
  background: rgb(255 204 18 / .16);
  font-size: 11.5px; font-weight: 700; line-height: 1.5;
  color: var(--cor-amarelo, #FFCC12);
}
/* ⚠️ A regra genérica de `.plantao-texto span` pinta e dimensiona todo span
   filho. O motivo precisa vencer as duas, e por isso repete o que quer. */
.plantao-fechada .plantao-texto .plantao-motivo {
  color: var(--cor-amarelo, #FFCC12); font-weight: 700; font-size: 11.5px;
}
.plantao-motivo i { font-size: 10.5px; }

/* O motivo do fechamento na lista de unidades da ficha de exame. */
.fe-motivo {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 700; line-height: 1.45;
  color: var(--alerta, #8A5D06);
}


/* =============================================================================
   O LOGO DO CONVÊNIO OCUPA O CARTÃO
   =============================================================================
   ⚠️ **Os arquivos JÁ são cartões brancos com margem embutida.** Os oito são
   JPG de 300x200 com o logotipo centralizado e uma faixa branca larga em
   volta. A regra anterior punha essa imagem numa faixa de 108px com 18px de
   respiro e ainda limitava a 62px de altura: sobrava um selo de menos de 40px
   de marca útil dentro de um cartão de 380px de largura. Não era o logo que
   era pequeno, era a margem dele que estava sendo paginada duas vezes.

   Agora a imagem preenche a largura do cartão e o `cover` corta o EXCESSO DE
   BRANCO de cima e de baixo. A proporção de 2,2:1 contra os 1,5:1 do arquivo
   tira cerca de 16% de cada borda, que é margem em todos os oito.

   ⚠️ **`cover` e não `contain`.** Com `contain` a imagem inteira caberia na
   faixa, margem inclusive, e o logo voltaria ao tamanho de antes: a faixa
   ficaria maior e a marca igual.
   ========================================================================== */

.conv-marca {
  display: block; height: auto; padding: 0;
  aspect-ratio: 2.2 / 1;
  background: #fff;
  border-bottom: 1px solid var(--cor-linha);
  overflow: hidden;
}
.conv-marca img {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover; object-position: center;
  transition: transform .3s ease;
}
.conv-botao:hover .conv-marca img { transform: scale(1.03); }

/* Sem arquivo, o nome ocupa a mesma faixa e o cartão não muda de altura. */
.conv-sem-logo {
  display: grid; place-items: center; width: 100%; height: 100%;
  padding: 16px; background: var(--cor-fundo);
  font-size: clamp(17px, 2.4vw, 22px); font-weight: 800;
  color: var(--cor-navy); text-align: center; line-height: 1.2;
}

/* -------------------------------------------- o mesmo palco dentro da janela */
/* ⚠️ 62x46 com teto de 34px de altura fazia o logo da janela ser MENOR que o
   do cartão que a abriu. Quem clica para ver de perto espera o contrário. */
.modal-conv .modal-vaga-topo { align-items: center; gap: 14px; }

.mc-marca {
  flex: none; width: 132px; height: 60px; padding: 0;
  border-radius: 10px; overflow: hidden;
  background: #fff; border: 1px solid var(--cor-linha);
  display: block;
}
.mc-marca img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; object-position: center;
}
.mc-marca i { display: grid; place-items: center; height: 100%; color: var(--cor-navy); font-size: 22px; }

@media (max-width: 600px) {
  .modal-conv .modal-vaga-topo { flex-wrap: wrap; }
  .mc-marca { width: 108px; height: 50px; }
}


/* =============================================================================
   A FICHA DE EXAME  ·  o bloco técnico vira peça, e não sobra de página
   =============================================================================
   Duas correções, e a segunda é a que muda a tela.

   ⚠️ **`.fe-unidades span` vencia `.fe-motivo`.** Classe + tipo (0,1,1) contra
   classe sozinha (0,1,0): o motivo do feriado saía nos 12,5px da regra
   genérica, e não nos 11,5px que a regra dele pedia. É EXATAMENTE o defeito
   de `.especie span` contra `.especie-ic` já registrado no projeto, e ele não
   aparece como erro nenhum: aparece como um tamanho quase certo.

   ⚠️ **A coluna técnica não tinha superfície e a lateral tinha.** À esquerda,
   uma lista solta sobre o fundo claro da faixa; à direita, três cartões
   brancos com borda. Para o ALT a lista tem 5 linhas e a coluna lateral tem
   3 caixas: a esquerda acabava na metade e sobrava um vão claro do tamanho
   de meia tela ao lado do conteúdo. O bloco técnico agora é cartão, no mesmo
   vocabulário da lateral, e as duas colunas leem como um sistema só.
   ========================================================================== */

.fe-tecnico {
  background: #fff;
  border: 1px solid var(--cor-linha);
  border-radius: 14px;
  padding: 24px 26px 8px;
  box-shadow: 0 1px 2px rgb(25 43 91 / .04), 0 10px 24px -20px rgb(25 43 91 / .3);
}
@media (max-width: 560px) { .fe-tecnico { padding: 20px 20px 6px; } }

.fe-tecnico h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 4px; font-size: 18px;
}
.fe-tecnico h2::before {
  content: ""; width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: var(--cor-fundo);
  /* O mesmo frasco dos cartões, desenhado em vez de carregado: a caixa do
     ícone é a assinatura da ficha, e o h2 não tem <i> para receber. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%230F7386'%3E%3Cpath d='M342.6 9.4c12.5 12.5 12.5 32.8 0 45.3l-9.4 9.4 96 96 9.4-9.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-256 256c-37.5 37.5-98.3 37.5-135.8 0s-37.5-98.3 0-135.8l256-256c12.5-12.5 32.8-12.5 45.3 0zM224 219.3L119.4 323.9c-2.5 2.5-4.7 5.2-6.4 8.1H243.9l96-96-96-96-19.9 19.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 13px;
}

/* A lista perde a última borda de baixo dentro do cartão. */
.fe-tecnico .fe-lista { margin-top: 12px; }
.fe-lista > div:last-child { border-bottom: 0; padding-bottom: 18px; }

/* O recipiente com a bolinha da tampa, agora dentro do <dd>. */
.fe-lista dd.fe-tubo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fe-volume {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--cor-fundo); color: var(--cor-teal-ink);
}

.fe-obs { margin: 4px 0 20px; }

/* -------------------------------------------------- a caixa "onde fazer" */
/* ⚠️ Especificidade repetida de propósito: `.fe-unidades span` é (0,1,1) e
   precisa ser vencida por algo com pelo menos o mesmo peso. */
.fe-unidades .fe-bairro {
  font-size: 12.5px; color: var(--cor-suave); margin-top: 1px;
}
.fe-unidades .fe-motivo {
  font-size: 11.5px; font-weight: 700; line-height: 1.45;
  color: var(--alerta, #8A5D06); margin-top: 3px;
}
.fe-unidades a { align-items: flex-start; padding: 13px 0; }
.fe-unidades strong { margin-bottom: 2px; }


/* =============================================================================
   O CARTÃO DO MANUAL  ·  o que decide sobe, e o cartão vira cartão
   =============================================================================
   ⚠️ **`.cartao-exame` era o último cartão do site sem sombra.** A ficha, os
   perfis, os convênios e as vagas já tinham recebido a sombra baixa e larga
   na Fase 5b, com o motivo escrito: borda cinza de 1px sobre branco lê como
   TABELA, não como cartão. A grade de 24 exames continuava lendo como tabela.

   ⚠️ **Grupo, amostra e prazo dividiam o mesmo cinza de 12,5px**, e o prazo é
   o único dos três que decide alguma coisa. Ele virou o pé do cartão, com
   linha própria e peso, e os outros dois continuam sendo o que são: contexto.
   ========================================================================== */

.lista-exames { gap: 16px; }

.cartao-exame {
  padding: 20px 22px 16px;
  gap: 10px;
  box-shadow: 0 1px 2px rgb(25 43 91 / .04), 0 10px 24px -20px rgb(25 43 91 / .3);
}
.cartao-exame:hover {
  box-shadow: 0 2px 4px rgb(25 43 91 / .06), 0 18px 34px -20px rgb(25 43 91 / .38);
}

/* Os selos sobem para logo abaixo do resumo: o jejum é o que a pessoa
   procura, e no pé do cartão ele ficava depois do dado técnico. */
.ce-selos { margin-top: 2px; }

/* ⚠️ Dois estados, e não um. Marcar só quem PEDE jejum deixa o silêncio
   ambíguo: "não tem pílula" pode ser "não pede" ou "ninguém preencheu".
   Com os dois, a lista responde sempre. */
.selo-jejum { background: rgb(255 204 18 / .2); color: #7A5C00; }
.selo-livre { background: var(--ok-fundo); color: var(--ok); }

.ce-dados {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--cor-linha);
  align-items: center; gap: 6px 12px;
}
.ce-prazo {
  margin-left: auto; font-weight: 700; color: var(--cor-navy);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ce-prazo i { color: var(--cor-teal-ink); }

/* Numa coluna estreita o prazo desce em vez de espremer o grupo. */
@media (max-width: 380px) {
  .ce-prazo { margin-left: 0; }
}

/* A barra lateral de filtros no mesmo vocabulário dos resultados. */
.filtro-caixa {
  box-shadow: 0 1px 2px rgb(25 43 91 / .04), 0 10px 24px -20px rgb(25 43 91 / .3);
}


/* =============================================================================
   OS CARTÕES PRINCIPAIS DA FICHA
   =============================================================================
   ⚠️ **`auto-fit` deixava 500px de vazio à direita, e não é bug de gap.**
   `.fe-cartoes` era `repeat(auto-fit, minmax(220px, 1fr))`, e o cartão de
   preparo tem `grid-column: 1 / -1`. Num eixo de 1.360px isso cria CINCO
   trilhas; os três cartões de dado ocupam as três primeiras e as duas
   últimas ficam vazias. O `auto-fit` colapsaria trilha vazia, mas a trilha
   NÃO está vazia: o cartão largo atravessa todas as cinco. Medido na tela:
   prazo, amostra e valor terminavam em 860px e sobravam 500px de fundo claro
   ao lado do cartão de valor.

   São três cartões, sempre. Então são três colunas, ditas assim.
   ========================================================================== */

@media (min-width: 860px) {
  .fe-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 859px) and (min-width: 560px) {
  .fe-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .fe-cartoes { grid-template-columns: minmax(0, 1fr); }
}

/* Com um terço da largura de verdade, o dado pode ser lido de longe. */
.fe-destaque { font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.fe-cartao { display: flex; flex-direction: column; }
.fe-cartao .fe-nota { margin-top: auto; padding-top: 8px; }

/* -------------------------------------------------- a faixa de preparo */
/* Ela deixa de ser um cartão vertical quase vazio e vira uma linha: ícone,
   resposta e selo. A altura passa a ser a do conteúdo, e não a do gesto. */
.fe-preparo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
}

.fe-preparo-icone {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-size: 18px;
}
.fe-preparo-jejum .fe-preparo-icone { background: var(--cor-amarelo); color: var(--cor-navy); }
.fe-preparo-livre .fe-preparo-icone { background: var(--ok-fundo); color: var(--ok); }

.fe-preparo-texto { min-width: 0; }
.fe-preparo-texto h2 {
  margin: 0 0 3px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--cor-suave);
}
.fe-preparo-texto p {
  margin: 0; font-size: 17px; line-height: 1.45;
  font-weight: 600; color: var(--cor-navy); max-width: 74ch;
}

.fe-preparo-selo {
  flex: none; white-space: nowrap;
  padding: 7px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 800; letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
}
.fe-preparo-jejum .fe-preparo-selo { background: rgb(255 204 18 / .22); color: #7A5C00; }
.fe-preparo-livre .fe-preparo-selo { background: var(--ok-fundo); color: var(--ok); }

/* O aviso de agendamento quebra a linha e ocupa a faixa inteira embaixo. */
.fe-preparo .fe-alerta { grid-column: 1 / -1; margin-top: 2px !important; }

@media (max-width: 640px) {
  .fe-preparo { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px 18px; }
  /* No telefone o selo desce para a linha do texto: espremido na terceira
     coluna, "jejum 12h" quebraria em duas linhas dentro da pílula. */
  .fe-preparo-selo { grid-column: 2; justify-self: start; }
  .fe-preparo-texto p { font-size: 16px; }
}

/* O rodapé dos três cartões alinha entre si, e não com a altura do texto de
   cada um: sem isso o link do WhatsApp sobe e a nota do prazo desce, e a
   linha de base da grade some. */
.fe-cartao .fe-nota-link { margin-top: auto; padding-top: 10px; }


/* =============================================================================
   DOIS ELEMENTOS PINTADOS COM A COR DO CHÃO EM QUE ESTÃO
   =============================================================================
   ⚠️ **`.fe-selo-grande` e `.fe-cartao-vazio` usavam `var(--fundo)`, e o
   `<body>` do site tem `bg-fundo`.** Fundo igual ao fundo é fundo nenhum: o
   selo "Este exame aceita coleta em casa" aparecia como texto turquesa solto
   ao lado do botão amarelo, e o cartão de VALOR aparecia como um buraco entre
   dois cartões brancos.

   Nenhum dos dois dá erro, e nenhum dos dois é óbvio no CSS: `var(--fundo)`
   está certo DENTRO de um cartão branco, que é onde `.selo-mini`, `.fe-sin` e
   `.ce-sigla` vivem. Errado é usá-lo em cima do próprio fundo.

   ⚠️ **Menos peso não é peso zero.** O cartão de valor sem preço continua
   sendo o mais discreto dos três, mas por sombra e cor de texto, e não por
   desaparecer: numa fileira de três, superfície faltando lê como falha de
   renderização, e não como decisão.
   ========================================================================== */

.fe-selo-grande {
  background: #fff;
  border: 1px solid var(--cor-linha);
  font-weight: 700;
}
.fe-selo-grande i { color: var(--cor-teal-ink); }

.fe-cartao-vazio {
  background: #fff;
  border-style: dashed;
  border-color: #C9DDE3;
  box-shadow: none;
}
.fe-cartao-vazio h2 i { background: var(--cor-fundo); }


/* =============================================================================
   O BOTÃO DE FECHAR DA JANELA
   =============================================================================
   ⚠️ **Ele não estava no canto: estava colado no título.** `.modal-vaga-topo`
   é `display: flex` com `gap: 12px`, e nada empurrava o botão para a ponta. O
   miolo (chapéu + nome) tem a largura do próprio texto, então em "Petlove" o
   X parava a 645px e sobravam 300px de navy vazio à direita dele. Na janela
   da vaga o defeito passava despercebido só porque o título é longo.

   Vale para as DUAS janelas: o conserto é no botão, e não numa delas.

   ⚠️ **36px é menos que o piso de toque de 44px** escrito no contrato. O
   desenho fica em 40px e a ÁREA vai a 44px por pseudo-elemento, que é o mesmo
   gesto já usado nos pontos do carrossel: o que faltava era alvo, não tamanho.
   ========================================================================== */

.modal-vaga-fechar {
  margin-left: auto;
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  transition: background .16s, border-color .16s, transform .16s;
}
.modal-vaga-fechar::after {
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}
.modal-vaga-fechar:hover { border-color: rgb(255 255 255 / .5); transform: rotate(90deg); }
.modal-vaga-fechar:focus-visible {
  outline: 2px solid var(--cor-teal-luz, #7FE0EE); outline-offset: 3px;
}

/* O miolo do cabeçalho fica com a largura que sobra, para o nome longo
   quebrar em vez de empurrar o botão para fora da janela. */
.modal-vaga-topo > div { min-width: 0; flex: 1; }


/* =============================================================================
   O ARTIGO GANHA UMA MEDIDA DE LEITURA
   =============================================================================
   ⚠️ **O texto era uma coluna de 62ch colada na esquerda de um eixo de
   1.200px.** Medido: em Montserrat 17px, 62ch dá cerca de 630px, então
   sobravam quase 580px de página vazia à direita de TODO parágrafo, em toda
   rolagem. O cabeçalho, o corpo e o aviso do fim tinham cada um a sua largura
   (26ch, 60ch, 62ch e 78ch), e nenhuma delas coincidia: a margem direita
   mudava de lugar quatro vezes descendo a página.

   Modo Read: o eixo do artigo passa a ser a própria medida de leitura, e
   tudo dentro dele compartilha as duas bordas. A faixa de "Continue lendo"
   continua no eixo largo, e o contraste entre as duas larguras é o que marca
   onde o texto acaba.

   ⚠️ **A largura não vem de `ch`.** O projeto já mediu que `74ch` renderiza
   97 caracteres reais em Montserrat, porque `ch` é a largura do zero e o zero
   é bem mais largo que a letra média. 720px aqui dá por volta de 82
   caracteres, que é o teto do confortável.
   ========================================================================== */

.eixo-leitura { max-width: 720px; }

/* Com o eixo já na medida certa, os limites individuais viram ruído: eles
   só conseguem encolher mais, e cada um encolhe um tanto diferente. */
.artigo .artigo-resumo { max-width: none; }
.artigo .artigo-corpo  { max-width: none; }
/* ⚠️ O remendo do aviso saiu daqui: ele existia só para desfazer o
   `max-width: 78ch` de uma segunda definição que não existe mais. */

/* O título continua quebrando antes do fim da linha, e isso é editorial:
   manchete em linha cheia lê mais devagar que manchete em duas linhas curtas. */
.artigo-topo h1 { max-width: 20ch; }

.artigo-topo { padding-top: 34px; }

/* --------------------------------------------------- as portas do fim */
/* ⚠️ O artigo terminava numa ressalva e em nenhuma porta. Quem acabou de
   descobrir que precisa de 8 horas de jejum quer conferir o exame que o
   veterinário pediu, e o texto mandava procurar sozinho. */
.artigo-portas {
  margin-top: 34px; padding: 22px 24px;
  background: #fff; border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
  box-shadow: 0 1px 2px rgb(25 43 91 / .04), 0 10px 24px -20px rgb(25 43 91 / .3);
}
.artigo-portas-titulo {
  margin: 0 0 14px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--cor-suave);
}
.artigo-portas-acoes { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 560px) {
  .artigo-portas { padding: 20px; }
  .artigo-portas-acoes .btn { width: 100%; justify-content: center; }
}

/* ⚠️ **A etiqueta da categoria também sumia no cabeçalho do artigo.**
   `.etiqueta-site` usa `var(--cor-fundo)`, que está certo dentro do cartão
   branco da listagem e da vaga, e é exatamente a cor do `<body>` aqui: no
   topo do artigo ela virava um texto turquesa em caixa alta, sem pílula.
   Terceira vez hoje que a mesma cor some por estar em cima dela mesma. */
.artigo-topo .etiqueta-site {
  background: #fff;
  border: 1px solid var(--cor-linha);
}
.artigo-topo .ca-ambos {
  background: #fff;
  border: 1px solid var(--cor-linha);
}

/* O cabeçalho respira antes do texto começar. */
.artigo-topo .ca-meta { margin-bottom: 2px; }


/* =============================================================================
   AS SUPERFÍCIES QUE O NAVEGADOR DESENHA
   =============================================================================
   Seleção de texto, cursor de digitação e barra de rolagem saem do navegador
   com a cor de fábrica dele, que não pertence a sistema visual nenhum. Enquanto
   o site inteiro é navy e turquesa, arrastar o mouse sobre um parágrafo pintava
   azul do Windows.

   ⚠️ **A seleção é turquesa-luz com texto navy: 8,97:1.** O turquesa da marca
   (#3AC2D6) daria 2,13:1 e reprovaria, que é a mesma Two Teals Rule de sempre.
   ========================================================================== */

::selection { background: var(--cor-teal-luz, #7FE0EE); color: var(--cor-navy); }

/* Sobre navy o mesmo par se inverte, senão a seleção some dentro da faixa. */
.faixa-navy ::selection, .secao-navy ::selection, .fe-topo ::selection,
.rodape ::selection, .modal-vaga-topo ::selection {
  background: var(--cor-amarelo); color: var(--cor-navy);
}

input, textarea, [contenteditable] { caret-color: var(--cor-teal-ink); }

/* Firefox entende as duas cores direto; o WebKit precisa das peças. */
html { scrollbar-color: #B7D2DB var(--cor-fundo); scrollbar-width: thin; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cor-fundo); }
::-webkit-scrollbar-thumb {
  background: #B7D2DB; border-radius: 999px;
  border: 3px solid var(--cor-fundo);
}
::-webkit-scrollbar-thumb:hover { background: var(--cor-teal-ink); }
::-webkit-scrollbar-corner { background: var(--cor-fundo); }


/* =============================================================================
   O ARTIGO EM MODO LEITURA
   =============================================================================
   ⚠️ **Um artigo do LifeVet Explica quase nunca é lido do começo ao fim.**
   "Precisa de jejum para exame de sangue?" tem quatro respostas, e quem chega
   tem o pedido do veterinário na mão: já sabe qual das quatro quer. Servido
   como prosa corrida, ele rola procurando; com índice, ele clica.
   ========================================================================== */

/* 690px menos os 24px de respiro de cada lado dá 642px de texto, que em
   Montserrat 17px são cerca de 72 caracteres: dentro da faixa de leitura
   confortável. Medir em `ch` aqui erraria para mais, porque `ch` é a largura
   do zero e o zero é bem mais largo que a letra média nesta família. */
.eixo-leitura { max-width: 690px; }

/* ------------------------------------------------------------- o índice */
.artigo-indice {
  margin: 0 0 30px; padding: 18px 22px 20px;
  background: #fff; border: 1px solid var(--cor-linha);
  border-radius: var(--raio-sm);
}
.artigo-indice-titulo {
  margin: 0 0 10px; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .24em; color: var(--cor-suave);
}
.artigo-indice ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.artigo-indice li { counter-increment: secao; }
.artigo-indice ol { counter-reset: secao; }

.artigo-indice a {
  display: flex; align-items: baseline; gap: 12px;
  min-height: 40px; padding: 8px 0;
  font-size: 15px; font-weight: 600; line-height: 1.4;
  color: var(--cor-navy); text-decoration: none;
  border-bottom: 1px solid var(--cor-linha);
  transition: color .16s, transform .16s;
}
.artigo-indice li:last-child a { border-bottom: 0; padding-bottom: 0; }
.artigo-indice a::before {
  content: counter(secao); flex: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; font-weight: 600; color: var(--cor-teal-ink);
  font-variant-numeric: tabular-nums;
}
.artigo-indice a:hover { color: var(--cor-teal-ink); transform: translateX(4px); }

/* --------------------------------------------------- a âncora da seção */
/* Ela existe para copiar o endereço de uma seção, e some do fluxo normal:
   um `#` visível ao lado de todo título vira sujeira tipográfica. */
.secao-ancora {
  margin-left: 10px; font-weight: 700; text-decoration: none;
  color: var(--cor-teal-ink); opacity: 0;
  transition: opacity .16s;
}
.artigo-corpo h2:hover .secao-ancora { opacity: .5; }
.secao-ancora:hover { opacity: 1 !important; }

/* O alvo da âncora não pode parar colado no topo da janela. */
.artigo-corpo h2 { scroll-margin-top: 24px; }

/* -------------------------------------------------- o texto do artigo */
/* `pretty` evita a última linha do parágrafo com uma palavra só. Onde o
   navegador não entende, ele ignora e nada muda. */
.artigo-corpo p, .artigo-resumo { text-wrap: pretty; }

/* Sublinhado de link em texto corrido: fino, afastado da linha de base e sem
   cortar as descidentes do "g" e do "p". O padrão do navegador faz as três
   coisas erradas. */
.artigo-corpo a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(15 115 134 / .4);
  transition: text-decoration-color .16s;
}
.artigo-corpo a:hover { text-decoration-color: var(--cor-teal-ink); }

/* O motivo do fechamento no rodapé, que aparece em toda página. */
.rodape-motivo {
  display: flex; align-items: center; gap: 7px;
  margin: 5px 0 0; padding: 3px 10px; width: fit-content;
  border-radius: 999px; background: rgb(255 204 18 / .16);
  font-size: 11.5px; font-weight: 700; line-height: 1.5;
  color: var(--cor-amarelo, #FFCC12);
}
.rodape-motivo i { font-size: 10.5px; }


/* =============================================================================
   AGENDAR EXAME
   =============================================================================
   Modo Operate: a pessoa veio completar uma tarefa. A tela não tenta convencer
   ninguém de nada, ela tira atrito de cinco passos.
   ========================================================================== */

/* ⚠️ A coluna de apoio fica ABAIXO do formulário, e não ao lado. Com ela ao
   lado, o calendário do passo 4 (`.ag-calendario`) divide a largura já
   reduzida do `.ag-grade` com mais 320px fixos da coluna, e é justamente ali
   que a tela mais precisa de espaço: dias da semana, horários e a nota de
   observação espremidos numa faixa estreita. Empilhada, ela some da vista até
   a pessoa rolar, e é troca boa: o formulário é a tarefa, a coluna é apoio. */
.ag-grade { display: flex; flex-direction: column; gap: 24px; }

/* ------------------------------------------------------------- os passos */
.ag-passos {
  list-style: none; margin: 0 0 22px; padding: 0 0 18px;
  display: flex; flex-wrap: wrap; gap: 6px 4px;
  border-bottom: 1px solid var(--cor-linha);
}
.ag-passos li {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
  font-size: 11.5px; font-weight: 700; color: var(--cor-suave);
}
.ag-passo-num {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--cor-fundo); color: var(--cor-suave);
  font-size: 11.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: background .18s, color .18s;
}
.ag-passos .is-atual { color: var(--cor-navy); }
.ag-passos .is-atual .ag-passo-num { background: var(--cor-amarelo); color: var(--cor-navy); }
.ag-passos .is-feito .ag-passo-num { background: var(--ok-fundo); color: var(--ok); }
.ag-passo-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  /* No celular o rótulo de cinco passos não cabe: fica o número, que já diz
     onde a pessoa está e quanto falta. */
  .ag-passo-rot { display: none; }
  .ag-passos li { flex: none; }
  .ag-passos { justify-content: center; gap: 10px; }
}

/* ------------------------------------------------------------- as etapas */
.ag-etapa { border: 0; margin: 0; padding: 0; min-width: 0; }
.ag-etapa-titulo {
  padding: 0; margin: 0 0 16px;
  font-size: 18px; font-weight: 800; color: var(--cor-navy);
  letter-spacing: -.015em;
}
.ag-acoes {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--cor-linha);
}
.ag-acoes .btn-amarelo { margin-left: auto; }
@media (max-width: 560px) {
  .ag-acoes { flex-direction: column-reverse; }
  .ag-acoes .btn { width: 100%; justify-content: center; margin-left: 0; }
}

/* ------------------------------------------------------- o tipo de exame */
.ag-tipos {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  margin-bottom: 18px;
}
.ag-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.ag-tipo-caixa {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px;
  align-items: center; height: 100%;
  padding: 15px 16px; border-radius: var(--raio-sm);
  border: 1.5px solid var(--cor-linha); background: #fff;
  cursor: pointer; transition: border-color .16s, background .16s;
}
.ag-tipo-caixa i {
  grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--cor-fundo); color: var(--cor-teal-ink); font-size: 16px;
}
.ag-tipo-caixa strong { font-size: 14.5px; font-weight: 800; color: var(--cor-navy); }
.ag-tipo-caixa small { font-size: 12px; line-height: 1.45; color: var(--cor-suave); }
.ag-tipo-caixa:hover { border-color: var(--cor-teal); }
.ag-tipo input:checked + .ag-tipo-caixa {
  border-color: var(--cor-teal-ink); background: var(--cor-fundo);
}
.ag-tipo input:checked + .ag-tipo-caixa i { background: var(--cor-teal-ink); color: #fff; }
.ag-tipo input:focus-visible + .ag-tipo-caixa { outline: 2px solid var(--cor-teal-ink); outline-offset: 2px; }

/* -------------------------------------------- quem não precisa de agenda */
/* ⚠️ Resposta, e não aviso: quem escolheu coleta de sangue já terminou aqui,
   e a tela entrega a situação de agora e o WhatsApp em vez de mais um passo. */
.ag-sem-agenda {
  border: 1px solid #BFE5D4; border-radius: var(--raio);
  background: var(--ok-fundo); padding: 18px 20px; margin-bottom: 4px;
}
.ag-sem-agenda-topo { display: flex; gap: 12px; align-items: flex-start; }
.ag-sem-agenda-topo > i { color: var(--ok); font-size: 18px; margin-top: 2px; }
.ag-sem-agenda-topo strong { display: block; font-size: 15px; color: var(--ok); margin-bottom: 3px; }
.ag-sem-agenda-topo span { font-size: 14px; line-height: 1.55; color: var(--cor-tinta); }

.ag-sem-agenda-unidades {
  display: grid; gap: 10px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.ag-un {
  background: #fff; border-radius: var(--raio-sm); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
}
.ag-un strong { font-size: 14px; color: var(--cor-navy); }
.ag-un span { font-size: 12.5px; }
.ag-un-motivo { color: var(--alerta); font-weight: 700; font-size: 11.5px; }
.ag-un .btn-mini { margin-top: 9px; padding: 7px 13px; font-size: 12.5px; min-height: 40px; }

/* --------------------------------------------------------- as unidades */
.ag-unidades {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.ag-unidade input { position: absolute; opacity: 0; pointer-events: none; }
.ag-unidade-caixa {
  display: block; padding: 13px 16px; border-radius: var(--raio-sm);
  border: 1.5px solid var(--cor-linha); background: #fff; cursor: pointer;
  transition: border-color .16s, background .16s;
}
.ag-unidade-caixa strong { display: block; font-size: 14px; color: var(--cor-navy); }
.ag-unidade-caixa small { font-size: 12px; color: var(--cor-suave); }
.ag-unidade-caixa:hover { border-color: var(--cor-teal); }
.ag-unidade input:checked + .ag-unidade-caixa {
  border-color: var(--cor-teal-ink); background: var(--cor-fundo);
}
.ag-unidade input:focus-visible + .ag-unidade-caixa { outline: 2px solid var(--cor-teal-ink); outline-offset: 2px; }

/* -------------------------------------------------------- o calendário */
.ag-calendario { display: grid; gap: 18px; }
@media (min-width: 760px) {
  .ag-calendario { grid-template-columns: minmax(0, 1fr) minmax(0, 250px); gap: 22px; }
}

.ag-dias {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  max-height: 330px; overflow-y: auto;
  padding: 4px 6px 4px 4px;
  transition: opacity .18s;
}
.ag-dias.is-carregando { opacity: .45; pointer-events: none; }

.ag-mes {
  grid-column: 1 / -1; margin: 6px 0 2px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cor-suave);
}
.ag-mes:first-child { margin-top: 0; }

.ag-dia {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-height: 62px; padding: 8px 4px 7px;
  border: 1.5px solid var(--cor-linha); border-radius: var(--raio-sm);
  background: #fff; cursor: pointer; font: inherit;
  transition: border-color .14s, background .14s, transform .14s;
}
.ag-dia:hover { border-color: var(--cor-teal); transform: translateY(-1px); }
.ag-dia:focus-visible { outline: 2px solid var(--cor-teal-ink); outline-offset: 2px; }
.ag-dia-semana { font-size: 10px; font-weight: 700; color: var(--cor-suave); text-transform: lowercase; }
.ag-dia-num {
  font-size: 17px; font-weight: 800; color: var(--cor-navy); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* A marca do dia: turquesa quando tem vaga, nada quando não tem. Ela é o que
   deixa a grade ser lida de relance, sem contar número. */
.ag-dia-marca {
  width: 5px; height: 5px; border-radius: 50%; margin-top: 2px;
  background: var(--cor-teal-ink);
}

/* ⚠️ O dia fechado CONTINUA na grade, apagado. Sumir com ele faria a
   sequência de datas pular sem explicação, e a pessoa contaria os dias na mão
   para achar o que procurava. O motivo vai no `title`. */
.ag-dia-sem {
  opacity: .38; cursor: not-allowed;
  background: var(--cor-fundo); border-style: dashed;
}
.ag-dia-sem:hover { transform: none; border-color: var(--cor-linha); }
.ag-dia-sem .ag-dia-marca { background: transparent; }

.ag-dia.is-escolhido {
  border-color: var(--cor-navy); background: var(--cor-navy);
}
.ag-dia.is-escolhido .ag-dia-num    { color: #fff; }
.ag-dia.is-escolhido .ag-dia-semana { color: rgb(255 255 255 / .72); }
.ag-dia.is-escolhido .ag-dia-marca  { background: var(--cor-amarelo); }

/* ------------------------------------------------------------ as horas */
.ag-horas-titulo {
  margin: 0 0 10px; font-size: 11px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cor-suave);
}
.ag-horas {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}
.ag-hora {
  min-height: 44px; padding: 0 6px;
  border: 1.5px solid var(--cor-linha); border-radius: var(--raio-sm);
  background: #fff; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--cor-navy);
  font-variant-numeric: tabular-nums;
  transition: border-color .14s, background .14s, color .14s;
}
.ag-hora:hover { border-color: var(--cor-teal); }
.ag-hora:focus-visible { outline: 2px solid var(--cor-teal-ink); outline-offset: 2px; }
.ag-hora-ocupada { opacity: .35; cursor: not-allowed; background: var(--cor-fundo); }
.ag-hora.is-escolhida {
  background: var(--cor-navy); border-color: var(--cor-navy); color: #fff;
}

.ag-aviso-dia {
  display: flex; gap: 8px; margin: 12px 0 0; padding: 10px 12px;
  border-radius: var(--raio-sm); background: var(--alerta-fundo);
  font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--alerta);
}

/* --------------------------------------------------------- a revisão */
.ag-revisao {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: 0; margin: 0 0 20px;
  border: 1px solid var(--cor-linha); border-radius: var(--raio);
  overflow: hidden;
}
.ag-revisao dt, .ag-revisao dd {
  margin: 0; padding: 12px 16px;
  border-bottom: 1px solid var(--cor-linha);
}
.ag-revisao dt { font-size: 12px; font-weight: 800; color: var(--cor-suave); background: var(--cor-fundo); }
.ag-revisao dd { font-size: 14.5px; color: var(--cor-navy); font-weight: 600; }
.ag-revisao dt:last-of-type, .ag-revisao dd:last-of-type { border-bottom: 0; }

@media (max-width: 480px) {
  .ag-revisao { grid-template-columns: minmax(0, 1fr); }
  .ag-revisao dt { border-bottom: 0; padding-bottom: 4px; }
}

/* ------------------------------------------------------ a requisição */
.ag-requisicao {
  border: 1px solid var(--cor-linha); border-radius: var(--raio);
  padding: 18px 20px; margin-bottom: 20px; background: #fff;
}
.ag-requisicao h3 {
  display: flex; align-items: center; gap: 9px; margin: 0 0 6px;
  font-size: 15px; font-weight: 800; color: var(--cor-navy);
}
.ag-requisicao h3 i { color: var(--cor-teal-ink); font-size: 14px; }
.ag-requisicao > p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--cor-suave); }
.ag-requisicao-depois {
  margin: 12px 0 0 !important; font-size: 12.5px; color: var(--cor-suave);
  padding-top: 12px; border-top: 1px solid var(--cor-linha);
}

/* --------------------------------------------------------- o sucesso */
.ag-sucesso {
  max-width: 560px; margin: 0 auto; text-align: center;
  background: #fff; border: 1px solid var(--cor-linha); border-radius: var(--raio-lg);
  padding: 40px 28px 32px;
  box-shadow: 0 1px 2px rgb(25 43 91 / .04), 0 18px 40px -28px rgb(25 43 91 / .4);
}
.ag-sucesso-ic {
  display: grid; place-items: center; width: 62px; height: 62px;
  margin: 0 auto 18px; border-radius: 50%;
  background: var(--ok-fundo); color: var(--ok); font-size: 26px;
}
.ag-sucesso h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: var(--cor-navy); }
.ag-sucesso-quando { margin: 0 0 24px; font-size: 15px; font-weight: 600; color: var(--cor-tinta); }

.ag-sucesso-rotulo {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase; color: var(--cor-suave);
}
.ag-sucesso-protocolo {
  margin: 0 0 18px; font-size: clamp(24px, 5vw, 32px); font-weight: 600;
  letter-spacing: .04em; color: var(--cor-navy);
}
.ag-sucesso-nota {
  margin: 0 auto 22px; max-width: 46ch;
  font-size: 13.5px; line-height: 1.6; color: var(--cor-suave);
}
.ag-sucesso-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.ag-sucesso-pendente {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  margin: 24px 0 0; padding: 14px 16px;
  border-radius: var(--raio-sm); background: var(--alerta-fundo);
  font-size: 13px; line-height: 1.55; color: var(--alerta); font-weight: 600;
}

/* --------------------------------------------------------- a pausa */
.ag-pausado {
  display: flex; gap: 14px; align-items: flex-start;
  max-width: 640px; margin: 0 auto; padding: 26px 28px;
  background: #fff; border: 1px solid var(--cor-linha); border-radius: var(--raio);
}
.ag-pausado > i { color: var(--cor-teal-ink); font-size: 20px; margin-top: 3px; }
.ag-pausado h2 { margin: 0 0 6px; font-size: 19px; color: var(--cor-navy); }
.ag-pausado p  { margin: 0 0 16px; font-size: 14px; color: var(--cor-suave); }
.ag-pausado .btn { margin-right: 8px; }

/* ------------------------------------------------------- a coluna de apoio */
/* Full width, embaixo do cartão. Em telas largas os três blocos ficam lado a
   lado numa fileira: é a mesma largura que sobrou do formulário, e uma
   coluna única aqui só alongaria a rolagem à toa. */
.ag-apoio { display: grid; gap: 14px; }
@media (min-width: 760px) {
  .ag-apoio { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

.apoio-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.apoio-passos li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.5; color: var(--cor-tinta);
}
.apoio-passos span {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cor-navy); color: #fff;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}


/* =============================================================================
   O LIFYNHO  ·  o botão e a conversa
   =============================================================================
   ⚠️ Um botão flutuante por vez. O do WhatsApp e o do assistente ocupam o
   mesmo canto, e a escolha entre eles é do servidor: com os dois na tela eles
   se empilham no celular e ensinam a pessoa a ignorar os dois.

   ⚠️ Os dois sobem acima da barra de atalhos do celular, que é fixa no rodapé.
   Sem isso o botão fica atrás dela e não dá para tocar.
   ========================================================================== */

.lif, .zap-flutuante {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 75;
}
@media (max-width: 1023px) {
  .lif, .zap-flutuante { bottom: 82px; }
}

/* --------------------------------------------------------- o do WhatsApp */
.zap-flutuante {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff; font-size: 27px;
  box-shadow: 0 6px 18px rgb(37 211 102 / .38), 0 2px 6px rgb(0 0 0 / .18);
  transition: transform .18s, box-shadow .18s;
}
.zap-flutuante:hover { transform: translateY(-2px) scale(1.04); }
.zap-flutuante:focus-visible { outline: 3px solid var(--cor-navy); outline-offset: 3px; }

/* ------------------------------------------------------------- o do Lifynho */
.lif-botao {
  position: relative;
  display: grid; place-items: center;
  width: 64px; height: 64px; padding: 0;
  border: 3px solid #fff; border-radius: 50%;
  background: var(--cor-navy); color: var(--cor-amarelo);
  font-size: 26px; cursor: pointer; overflow: hidden;
  box-shadow: 0 8px 22px rgb(25 43 91 / .34), 0 2px 6px rgb(0 0 0 / .16);
  transition: transform .18s, box-shadow .18s;
}
.lif-botao img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.lif-botao:hover { transform: translateY(-2px) scale(1.04); }
.lif-botao:focus-visible { outline: 3px solid var(--cor-teal-ink); outline-offset: 3px; }

/* ⚠️ O pulso é a ÚNICA animação autônoma do site fora do ponto de "aberto
   agora", e some em prefers-reduced-motion: a informação nunca depende do
   movimento. Ele existe porque um botão parado no canto some da vista. */
.lif-pulso {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid var(--cor-teal);
  animation: lif-pulso 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lif-pulso {
  0%   { transform: scale(1);    opacity: .45; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lif-pulso { animation: none; opacity: .5; }
}

.lif-aberto .lif-botao { transform: scale(.9); opacity: .5; }
.lif-aberto .lif-pulso { animation: none; opacity: 0; }

/* --------------------------------------------------------------- o balão */
/*
 * ⚠️ **`width: max-content` é o que impede a frase de quebrar palavra a
 * palavra.** O balão é absoluto dentro de `.lif`, que é fixo sem largura: ele
 * encolhe aos 64px do botão. Com `right: 74px` contra um bloco de 64px, a
 * largura disponível fica NEGATIVA, e o navegador entrega a menor possível, que
 * é a palavra mais longa. A frase saía empilhada, uma palavra por linha, e
 * nenhum erro aparecia em lugar nenhum.
 *
 * `max-content` mede o texto, e não o espaço que sobrou; o `max-width` continua
 * sendo quem decide onde a frase quebra de verdade.
 */
.lif-balao {
  position: absolute; right: 74px; bottom: 12px;
  width: max-content; max-width: 220px; padding: 11px 15px;
  border: 1px solid var(--cor-linha); border-radius: 16px 16px 4px 16px;
  background: #fff; cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--cor-navy);
  box-shadow: 0 10px 26px rgb(25 43 91 / .18);
  animation: lif-entra .3s ease-out;
}
@keyframes lif-entra {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 420px) { .lif-balao { display: none; } }

/* --------------------------------------------------------------- a janela */
.lif-janela {
  position: absolute; right: 0; bottom: 78px;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 180px));
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--cor-linha); border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px -20px rgb(14 27 51 / .5), 0 2px 8px rgb(0 0 0 / .1);
  animation: lif-sobe .22s ease-out;
}
@keyframes lif-sobe {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lif-janela, .lif-balao { animation: none; }
}

/* No celular ela ocupa a tela: uma janelinha de 380px num aparelho de 375
   deixa uma moldura inútil e o teclado cobre metade dela. */
@media (max-width: 560px) {
  .lif-janela {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    border-radius: 0; border: 0;
  }
}

.lif-topo {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 14px 16px;
  background: var(--cor-navy); color: #fff;
}
.lif-retrato {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: rgb(255 255 255 / .14); color: var(--cor-amarelo); font-size: 18px;
}
.lif-retrato img { width: 100%; height: 100%; object-fit: cover; }
.lif-quem { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lif-quem strong { font-size: 15px; font-weight: 800; }
.lif-quem small  { font-size: 11.5px; color: var(--cor-teal); font-weight: 600; }

.lif-fechar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgb(255 255 255 / .24); background: rgb(255 255 255 / .1);
  color: #fff; font-size: 15px; cursor: pointer;
  transition: background .16s, transform .16s;
}
.lif-fechar:hover { background: rgb(255 255 255 / .2); transform: rotate(90deg); }
.lif-fechar:focus-visible { outline: 2px solid var(--cor-teal-luz, #7FE0EE); outline-offset: 2px; }

/* ---------------------------------------------------------------- as falas */
.lif-falas {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  background: var(--cor-fundo);
  overscroll-behavior: contain;
}

.lif-fala { display: flex; }
.lif-fala p {
  margin: 0; max-width: 84%;
  padding: 10px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.lif-fala-assistente p {
  background: #fff; color: var(--cor-tinta);
  border: 1px solid var(--cor-linha);
  border-bottom-left-radius: 5px;
}
.lif-fala-pessoa { justify-content: flex-end; }
.lif-fala-pessoa p {
  background: var(--cor-navy); color: #fff;
  border-bottom-right-radius: 5px;
}

/*
 * A fala da EQUIPE.
 *
 * ⚠️ **Ela não pode parecer a fala do assistente.** Fica do mesmo lado, porque
 * as duas são "a casa" falando, mas a pessoa precisa saber quando passou a
 * conversar com gente: o que ela escreve muda. Para o robô ela dá uma palavra;
 * para uma pessoa ela conta o caso.
 *
 * ⚠️ **A diferença não é só a cor**, porque cor sozinha não chega a quem não
 * distingue as duas nem a quem está no sol. O rótulo diz por escrito.
 */
/* ⚠️ `flex-direction: column`: `.lif-fala` é flex em linha, e sem isto o
   rótulo vira um item AO LADO do balão em vez de ficar acima dele. É o mesmo
   defeito do `.ajuda-tela` do painel, onde o negrito e o link viraram colunas. */
.lif-fala-equipe { flex-direction: column; align-items: flex-end; }
.lif-fala-equipe p {
  background: var(--cor-teal-ink); color: #fff;
  border-bottom-right-radius: 5px;
}
.lif-fala-equipe::before {
  content: "Equipe LifeVet";
  margin: 0 8px 3px 0;
  font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--cor-teal-ink);
}

/*
 * O recado de espera longa.
 *
 * ⚠️ **Não é uma fala.** Ele não veio de ninguém: é a própria tela dizendo
 * que a espera passou do combinado. Desenhado como balão, a pessoa responderia
 * a ele.
 */
.lif-demorou {
  align-self: center; text-align: center;
  max-width: 88%; margin: 4px 0;
  padding: 9px 14px; border-radius: 12px;
  background: #FFF4E2; border: 1px solid #F2DCB6;
  font-size: 12.5px; line-height: 1.5; color: #7A4204;
}

/*
 * OS BOTÕES DE ANEXO E DE ÁUDIO
 *
 * ⚠️ **O clipe e o microfone ficam ANTES do campo de texto, e o avião depois.**
 * A ordem é a de qualquer aplicativo de conversa, e é a que o dedo já conhece:
 * o que se faz com o texto fica do lado do texto, e o que se anexa fica do lado
 * de fora dele.
 */
.lif-icone {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--cor-apoio); font-size: 15px;
  transition: background .16s, color .16s;
}
.lif-icone:hover { background: var(--cor-fundo); color: var(--cor-teal-ink); }

/* ⚠️ A área de toque vai a 44px por pseudo-elemento, e o desenho fica em 40:
   é o mesmo gesto dos pontos do carrossel e do X da janela. */
.lif-icone { position: relative; }
.lif-icone::after { content: ''; position: absolute; inset: -2px; }

/*
 * ⚠️ **O microfone gravando PRECISA parecer gravando.** Sem sinal, a pessoa não
 * sabe se começou, fala para o nada e depois manda um áudio mudo. O vermelho e
 * o pulso dizem "estou ouvindo", e o segundo toque encerra.
 */
.lif-icone.is-gravando {
  background: #FDECED; color: var(--cor-vermelho, #C2333B);
  animation: lif-grava 1.4s ease-in-out infinite;
}
@keyframes lif-grava {
  0%, 100% { box-shadow: 0 0 0 0 rgb(194 51 59 / .45); }
  70%      { box-shadow: 0 0 0 9px rgb(194 51 59 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lif-icone.is-gravando { animation: none; }
}

/*
 * A BARRA DE GRAVAÇÃO
 *
 * ⚠️ **Um microfone mudo é um microfone quebrado.** Sem sinal na tela, a pessoa
 * toca, fala, e não sabe se está sendo ouvida: manda um áudio de trinta segundos
 * para descobrir que não gravou, ou desiste no meio achando que o botão não
 * funciona.
 *
 * ⚠️ **A onda vem do MICROFONE, e não de uma animação.** Uma barrinha que
 * balança sozinha mostra movimento mesmo com o microfone mudo, que é exatamente
 * o caso em que a pessoa precisa saber. Sem voz, a linha fica reta.
 */
.lif-gravando-barra {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin: 0 12px 8px;
  background: #FDECED; border: 1px solid #F3C2C5;
  border-radius: var(--raio);
}

.lif-onda { flex: 1; min-width: 0; height: 34px; display: block; }

/* ⚠️ O relógio usa `tabular-nums`: sem isso o "1" é mais estreito que o "8" e o
   número dança a cada segundo, do lado de uma onda que já se move. */
.lif-grava-tempo {
  flex: none; font-size: 12.5px; font-weight: 700;
  color: #7A1F25; font-variant-numeric: tabular-nums;
}

.lif-grava-parar,
.lif-grava-cancelar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; font-size: 13px;
  position: relative;
}
/* Área de toque de 44px sobre um desenho de 36, o gesto de sempre. */
.lif-grava-parar::after,
.lif-grava-cancelar::after { content: ''; position: absolute; inset: -4px; }

/*
 * ⚠️ **Parar é o botão CHEIO; cancelar é o vazado.** Quem toca no microfone
 * quer mandar o áudio: a ação provável fica com o peso, e a de desistir fica
 * disponível sem convidar. Trocados, um toque errado joga fora o recado.
 */
.lif-grava-parar {
  background: var(--cor-vermelho, #C2333B); color: #fff;
}
.lif-grava-parar:hover { background: #A32A31; }

.lif-grava-cancelar { background: none; color: #7A1F25; }
.lif-grava-cancelar:hover { background: rgb(194 51 59 / .12); }

/* Enquanto grava, a caixa de texto sai de cena: escrever e falar ao mesmo tempo
   produz duas mensagens que se atropelam. */
.lif.lif-gravando .lif-campo textarea { opacity: .35; pointer-events: none; }

/* E o clipe também: dois envios ao mesmo tempo é um deles se perdendo. */
.lif.lif-gravando [data-lif-anexar] { opacity: .35; pointer-events: none; }

/*
 * A LINHA DO ANEXO
 *
 * ⚠️ **Ela aparece assim que o envio começa, e não quando termina.** Sem isso a
 * janela fica em branco enquanto o arquivo sobe, e a pessoa manda de novo
 * achando que não foi.
 */
.lif-fala-anexo p {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.lif-fala-anexo i { font-size: 14px; opacity: .85; }

.lif-fala-anexo.is-subindo p { opacity: .6; }
.lif-fala-anexo.is-falhou p {
  background: #FDECED; color: #7A1F25; border: 1px solid #F3C2C5;
}

/*
 * O CARTÃO DA RESERVA
 *
 * ⚠️ **O protocolo é a única coisa da conversa que a pessoa vai DIGITAR ou LER
 * EM VOZ ALTA no balcão.** No meio de um parágrafo ele vira uma sequência que
 * ninguém acha: o alfabeto do gerador já foi escolhido para ser ditado (sem 0,
 * O, 1, I e L), e faltava o desenho estar à altura.
 *
 * ⚠️ **Ele NÃO é um balão de fala**, porque não é uma fala: é um documento que
 * a conversa entregou. Por isso tem superfície própria, ocupa a largura inteira
 * e não tem o bico do balão.
 */
.lif-reserva {
  align-self: stretch; margin: 8px 0 4px;
  padding: 16px 18px; border-radius: var(--raio);
  background: var(--cor-navy); color: #fff;
  box-shadow: 0 6px 20px rgb(14 27 51 / .22);
}

.lif-reserva-rotulo {
  display: block; font-size: 9.5px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cor-teal-luz); margin-bottom: 5px;
}

/*
 * ⚠️ Fonte de máquina e `tabular-nums`: o código mistura letra e número, e numa
 * fonte proporcional o 8 e o B ficam com larguras diferentes bem na hora em que
 * a pessoa está comparando caractere por caractere com o que digitou.
 */
.lif-reserva-codigo {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 700; letter-spacing: .06em;
  line-height: 1.2; color: #fff;
  word-break: break-all;
}

.lif-reserva-dados {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
  margin: 14px 0 0; padding: 14px 0 0;
  border-top: 1px solid rgb(255 255 255 / .16);
  font-size: 12.5px;
}
.lif-reserva-dados dt { color: rgb(255 255 255 / .62); }
.lif-reserva-dados dd { margin: 0; font-weight: 700; }

/*
 * ⚠️ **Um embaixo do outro, e cada um com a largura inteira.** Lado a lado eles
 * ficam com cerca de 130px cada dentro da janela de 340px, e "Receber por
 * e-mail" quebra em duas linhas: o botão fica mais alto que o vizinho e o par
 * perde o alinhamento. Empilhados, os dois têm a mesma medida e o rótulo cabe.
 *
 * ⚠️ **O arredondamento é o `--raio-sm` do projeto, e não uma pílula.** Os
 * botões do site inteiro usam essa medida; 999px aqui faria o cartão parecer
 * de outro lugar. Raio é decisão de sistema, e não de componente.
 */
.lif-reserva-acoes {
  display: flex; flex-direction: column; gap: 8px; margin-top: 15px;
}
.lif-reserva-acoes button {
  width: 100%; min-height: 44px;
  padding: 0 14px; border-radius: var(--raio-sm); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700;
  background: rgb(255 255 255 / .12); color: #fff;
  border: 1px solid rgb(255 255 255 / .26);
  transition: background .16s, border-color .16s;
}
.lif-reserva-acoes button:hover {
  background: var(--cor-amarelo); border-color: var(--cor-amarelo); color: var(--cor-navy);
}

/*
 * "Ainda está por aí?"
 *
 * ⚠️ **Não é uma fala, e por isso não é um balão.** Ela não veio de ninguém: é
 * a própria tela dizendo que o tempo passou. Desenhada como balão, a pessoa
 * responderia a ela. Mesma regra do recado de espera longa.
 */
.lif-ainda {
  align-self: center; text-align: center;
  max-width: 88%; margin: 4px 0;
  padding: 9px 14px; border-radius: 12px;
  background: #fff; border: 1px dashed var(--cor-linha);
  font-size: 12.5px; line-height: 1.5; color: var(--cor-apoio);
}
.lif-ainda p { margin: 0; }

/*
 * A avaliação do atendimento.
 *
 * ⚠️ **Duas opções, e não cinco estrelas.** A pessoa já está de saída, e uma
 * escala vira uma decisão a mais: "ajudou / não ajudou" tem taxa de resposta
 * muito maior. E a pergunta que importa para a gestão não é "quantas estrelas",
 * é "de cada dez conversas, quantas resolveram".
 */
.lif-nota {
  align-self: stretch; margin: 6px 0 2px;
  padding: 13px 15px; border-radius: 14px;
  background: #fff; border: 1px solid var(--cor-linha);
  box-shadow: 0 1px 2px rgb(14 27 51 / .05);
}
.lif-nota p {
  margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--cor-tinta);
}
.lif-nota-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
/* ⚠️ Mesma régua do cartão da reserva: raio do sistema, e não pílula. */
.lif-nota-botoes button {
  flex: 1; min-width: 120px; min-height: 44px;
  padding: 0 14px; border-radius: var(--raio-sm); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700;
  background: var(--cor-fundo); border: 1px solid var(--cor-linha);
  color: var(--cor-tinta);
  transition: border-color .16s, background .16s;
}
.lif-nota-botoes button:hover {
  border-color: var(--cor-teal); background: #fff; color: var(--cor-teal-ink);
}

/* Quem disse que não resolveu recebe a porta, e não só o agradecimento: é o
   único momento em que a pessoa já disse, com todas as letras, que precisa de
   mais. */
.lif-nota-humano {
  display: block; width: 100%; min-height: 44px; margin-top: 10px;
  padding: 0 14px; border-radius: var(--raio-sm); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700;
  background: var(--cor-navy); border: 0; color: #fff;
}
.lif-nota-humano:hover { background: #22376E; }

/* Os três pontinhos enquanto o modelo pensa. Sem eles a pessoa acha que a
   mensagem não foi e manda de novo, o que custa duas voltas. */
.lif-pensando p { display: flex; gap: 5px; padding: 14px; }
.lif-pensando span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cor-teal-ink);
  animation: lif-ponto 1.2s ease-in-out infinite;
}
.lif-pensando span:nth-child(2) { animation-delay: .18s; }
.lif-pensando span:nth-child(3) { animation-delay: .36s; }
@keyframes lif-ponto {
  0%, 60%, 100% { transform: translateY(0);   opacity: .35; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lif-pensando span { animation: none; opacity: .6; }
}

/* -------------------------------------------------------------- os canais */
.lif-canais { display: flex; flex-direction: column; gap: 8px; }
.lif-canal {
  display: flex; align-items: center; gap: 11px; min-height: 52px;
  padding: 9px 14px; border-radius: 14px;
  background: #fff; border: 1px solid var(--cor-linha);
  transition: border-color .16s, transform .16s;
}
.lif-canal:hover { border-color: #25D366; transform: translateY(-1px); }
.lif-canal i { color: #25D366; font-size: 20px; flex: none; }
.lif-canal span { display: flex; flex-direction: column; min-width: 0; }
.lif-canal strong { font-size: 13.5px; font-weight: 800; color: var(--cor-navy); }
.lif-canal small  { font-size: 11.5px; color: var(--cor-suave); }
.lif-canal-aberta small { color: var(--ok); font-weight: 700; }

/* ------------------------------------------------------------- os atalhos */
/*
 * ⚠️ **Eles rolam COM a conversa, e não numa faixa fixa em cima do campo.** Na
 * faixa fixa, cinco atalhos ocupavam quase metade da janela e a pessoa deixava
 * de ver as próprias mensagens acontecendo atrás deles. Dentro do corpo eles são
 * o que sempre foram: uma sugestão de primeiro passo, que sai de cena sozinha
 * quando a conversa começa.
 *
 * ⚠️ Alinhados à ESQUERDA, como a fala do assistente: eles respondem à saudação
 * dele, e não à pessoa. Do lado direito pareceriam coisa que ela já disse.
 */
.lif-atalhos {
  display: flex; flex-wrap: wrap; gap: 7px;
  align-self: flex-start; max-width: 92%;
  margin: 2px 0 4px;
}
.lif-atalho {
  min-height: 36px; padding: 7px 13px;
  border: 1px solid var(--cor-linha); border-radius: 999px;
  background: var(--cor-fundo); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--cor-teal-ink);
  transition: background .16s, border-color .16s, color .16s;
}
.lif-atalho:hover { background: var(--cor-teal-ink); border-color: var(--cor-teal-ink); color: #fff; }
.lif-atalho:focus-visible { outline: 2px solid var(--cor-teal-ink); outline-offset: 2px; }

/* --------------------------------------------------------------- o campo */
.lif-campo {
  flex: none; display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 16px; background: #fff;
}
.lif-campo textarea {
  flex: 1; min-width: 0; resize: none;
  min-height: 44px; max-height: 120px; padding: 11px 14px;
  border: 1.5px solid var(--cor-linha); border-radius: 22px;
  font: inherit; font-size: 14px; line-height: 1.45; color: var(--cor-tinta);
  transition: border-color .16s;
}
.lif-campo textarea:focus { outline: 0; border-color: var(--cor-teal); }

.lif-enviar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 0;
  background: var(--cor-amarelo); color: var(--cor-navy);
  font-size: 15px; cursor: pointer;
  transition: filter .16s, transform .16s;
}
.lif-enviar:hover { filter: brightness(.94); transform: scale(1.05); }
.lif-enviar:focus-visible { outline: 2px solid var(--cor-navy); outline-offset: 2px; }

.lif-rodape {
  flex: none; margin: 0; padding: 0 16px 12px;
  font-size: 10.5px; line-height: 1.45; color: var(--cor-suave); text-align: center;
  background: #fff;
}

/* =============================================================================
   AS PÁGINAS QUE CASAM COM A BUSCA DO MANUAL
   =============================================================================
   ⚠️ Nem tudo que o site responde é exame. Quem procura "volante" quer a
   página do Raio-X Volante, e a busca do Manual só olhava o catálogo de exames:
   a resposta era "Não achamos", com a página publicada e no menu.

   ⚠️ A faixa é visivelmente OUTRA COISA que o cartão de exame: fundo próprio e
   rótulo em cima. Desenhada igual, ela leria como "o primeiro resultado", e a
   pessoa clicaria achando que abre uma ficha.
   ========================================================================== */

.manual-paginas {
  margin: 0 0 18px; padding: 14px 16px 6px;
  background: var(--cor-fundo); border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
}

.manual-paginas-rotulo {
  display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--cor-suave);
}
.manual-paginas-rotulo i { color: var(--cor-teal-ink); }

.manual-paginas ul { list-style: none; margin: 0; padding: 0; }

.manual-paginas a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; margin-bottom: 8px;
  background: #fff; border: 1px solid transparent; border-radius: var(--raio-sm);
  color: var(--cor-navy); text-decoration: none;
  transition: border-color .16s, transform .16s;
}
/* ⚠️ O hover diz o chão E a tinta na MESMA regra: foi a separação dos dois
   que apagou o nome do exame no chip de perfil. */
.manual-paginas a:hover {
  background: #fff; border-color: var(--cor-teal-ink); color: var(--cor-navy);
  transform: translateX(2px);
}

.manual-paginas a > i:first-child {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cor-fundo); color: var(--cor-teal-ink); font-size: 14px;
}
.manual-paginas a span { flex: 1; min-width: 0; display: block; }
.manual-paginas a strong { display: block; font-size: 14.5px; font-weight: 700; }
.manual-paginas a small {
  display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45;
  color: var(--cor-suave);
  /* Duas linhas bastam: a descrição de SEO é longa e a faixa é um atalho. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.manual-paginas a > i:last-child { flex: none; color: var(--cor-teal-ink); font-size: 12px; }

/* =============================================================================
   A BUSCA DE LISTA E O SEU VAZIO
   =============================================================================
   ⚠️ **Sétima vez no projeto que uma classe usada não existe no CSS.** As
   páginas de especialidades e de perfis foram escritas com `.busca-lista` e
   `.lista-vazia`, e o arquivo só tinha `.conv-busca` e `.conv-vazio`, com nome
   preso a uma tela. O sintoma nunca é erro: é o ícone caindo em cima da
   primeira letra e o campo com a cara padrão do navegador.

   Antes vieram as 46 variáveis de cor da Fase 5a, as três classes de seção da
   5c, `so-desktop`/`so-celular`, `.marca-simbolo` no painel e `.aviso-rotina`.
   **CSS que não casa não avisa: só entrega uma página pobre.**

   `.conv-busca` fica onde está: ela tem a largura e o botão daquela tela. O que
   nasce aqui é a busca de lista, que serve qualquer lista do site.
   ========================================================================== */

.busca-lista {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px; padding: 6px 14px; max-width: 560px;
  background: #fff; border: 1.5px solid var(--cor-linha); border-radius: var(--raio);
  transition: border-color .18s, box-shadow .18s;
}

/* ⚠️ UM anel de foco, e ele é da caixa inteira: o campo por dentro não desenha
   o dele. Foi a soma dos dois que deu a borda dupla na busca da home. */
.busca-lista:focus-within {
  border-color: var(--cor-teal-ink);
  box-shadow: 0 0 0 4px rgb(15 115 134 / .1);
}

.busca-lista > i { flex: none; color: var(--cor-teal-ink); font-size: 15px; }

.busca-lista input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 15px; color: var(--cor-navy); min-height: 46px;
}
.busca-lista input::placeholder { color: var(--cor-suave); opacity: .8; }

/*
 * ⚠️ **O vazio oferece saída.** "Nada encontrado" e ponto final devolve a
 * pessoa para o WhatsApp, que é o atrito que estas páginas existem para tirar.
 */
.lista-vazia {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 36px 22px; text-align: center;
  background: #fff; border: 2px dashed var(--cor-linha); border-radius: 18px;
}
.lista-vazia > i { font-size: 26px; color: var(--cor-teal-ink); opacity: .5; }
.lista-vazia p {
  margin: 0; max-width: 54ch; font-size: 14.5px; line-height: 1.6;
  color: var(--cor-suave);
}
.lista-vazia p strong { color: var(--cor-navy); }

/* =============================================================================
   OS CARTÕES DE UNIDADE NA CONVERSA
   =============================================================================
   ⚠️ Pedidas pelo atalho "Horários e endereços", as unidades saíam como uma
   parede de texto: duas fichas empilhadas com endereço, telefone e a frase
   "WhatsApp: Falar com a unidade" ESCRITA, que não é clicável. A janela desenha
   com `textContent` por segurança, então link escrito pelo modelo nunca vira
   botão, e a resposta mais pedida da conversa terminava sem a única ação que ela
   precisa ter.

   ⚠️ O cartão é mais alto que o de `.lif-canais` porque responde outra coisa. O
   de canais é "com quem você quer falar"; este é "onde fica, está aberto agora,
   e como chegar até lá". Reaproveitar um para o outro faria os dois responderem
   mal.
   ========================================================================== */

.lif-unidades { display: flex; flex-direction: column; gap: 8px; }

.lif-unidade {
  padding: 12px 14px; border-radius: 14px;
  background: #fff; border: 1px solid var(--cor-linha);
}

.lif-unidade-nome {
  display: block; font-size: 14px; font-weight: 800; color: var(--cor-navy);
}

/* A situação de AGORA vem antes do endereço: quem pergunta horário quer saber
   se dá para ir hoje, e não em que rua fica. */
.lif-unidade-agora {
  display: flex; align-items: center; gap: 7px; margin: 5px 0 0;
  font-size: 12.5px; font-weight: 700; color: var(--cor-suave);
}
.lif-unidade-aberta .lif-unidade-agora { color: var(--ok); }

.lif-unidade-motivo {
  margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--cor-suave);
}

.lif-unidade-end {
  display: flex; align-items: flex-start; gap: 7px; margin: 7px 0 0;
  font-size: 12.5px; line-height: 1.45; color: var(--cor-suave);
}
.lif-unidade-end i { color: var(--cor-teal-ink); margin-top: 3px; flex: none; }

.lif-unidade-acoes { display: flex; gap: 8px; margin-top: 11px; }

/* ⚠️ O WhatsApp é o botão CHEIO e o telefone o vazado: quem está numa conversa
   de texto vai continuar por texto. Trocados, o cartão empurra para a ligação
   quem escolheu justamente não ligar. */
.lif-unidade-zap,
.lif-unidade-fone {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  flex: 1; min-height: 40px; padding: 0 12px;
  border-radius: var(--raio-sm); border: 1px solid transparent;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  transition: filter .16s, border-color .16s;
}

.lif-unidade-zap { background: #25D366; color: #fff; }
.lif-unidade-zap:hover { filter: brightness(.94); }

.lif-unidade-fone {
  background: #fff; border-color: var(--cor-linha); color: var(--cor-navy);
}
.lif-unidade-fone:hover { border-color: var(--cor-teal-ink); }
.lif-unidade-fone i { color: var(--cor-teal-ink); }