/* ==========================================================================
   FAU — Site institucional
   Depende de marca.css (tokens, botões, formulários).

   Regra do briefing que manda neste arquivo: "menos informação por tela,
   mais clareza por interação". Fundo claro por padrão, muito espaço em
   branco, linha fina no lugar de sombra, azul institucional como assinatura.
   Sem degradê pesado, sem carrossel, sem sombra dura.
   ========================================================================== */

body { background: var(--branco); }
.site body { line-height: 1.55; }

.site h1 { font-size: clamp(30px, 4.4vw, 50px); }
.site h2 { font-size: clamp(24px, 2.8vw, 34px); }
.site h3 { font-size: clamp(17px, 1.4vw, 19px); }

.lead {
  font-size: clamp(15.5px, 1.3vw, 17px);
  color: var(--texto-suave);
  max-width: 62ch;
  line-height: 1.6;
}

/* Largura de leitura: texto corrido não passa disso em tela nenhuma. */
.medida { max-width: 66ch; }

/* --------------------------------------------------------------- Cabeçalho */
.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
  transition: box-shadow var(--transicao);
}
.topo.rolado { box-shadow: var(--sombra-sm); }

.topo-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 74px;
}

.marca { display: flex; align-items: center; flex: 0 0 auto; }
.marca img { height: 40px; width: auto; display: block; }

.painel-topo { display: contents; }

.menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.menu > a,
.menu-pai > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transicao), background var(--transicao);
}
.menu > a:hover,
.menu-pai > button:hover { color: var(--azul-700); background: var(--azul-50); }
.menu > a.ativo,
.menu-pai.ativo > button { color: var(--azul-700); }

/* sublinha fina só no item da página atual — assinatura, não enfeite */
.menu > a.ativo::after,
.menu-pai.ativo > button::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: var(--petroleo-600);
}
.menu > a, .menu-pai > button { position: relative; }

/* ---- dropdown de Soluções ---- */
.menu-pai { position: relative; }
.menu-pai > button .seta-baixo { transition: transform var(--transicao); }
.menu-pai[aria-expanded='true'] > button .seta-baixo { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 268px;
  padding: 8px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.menu-pai[aria-expanded='true'] .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--texto);
  font-size: 14.5px;
  font-weight: 600;
}
.submenu a small {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--texto-fraco);
  margin-top: 2px;
}
.submenu a:hover { background: var(--azul-50); color: var(--azul-700); }

/* ---- ações do cabeçalho: Área do Cliente + CTA fixo ---- */
.acoes-topo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}
.topo .btn-cta { flex: 0 0 auto; white-space: nowrap; }
.topo .btn-cta.btn-secundario { padding-inline: 16px; }

/* São duas portas — cliente e médico — e por isso os dois botões andam
   apertados no topo largo: ali vale só "Cliente" e "Médico", que o cadeado e
   o estetoscópio já qualificam (e o title diz por extenso). O nome inteiro
   volta no menu recolhido, onde cada botão ocupa a linha toda.

   São dois rótulos inteiros, e não um "Área do " que aparece e some: o botão
   é flex, cada pedaço de texto viraria um item, e o gap de 8px abriria um vão
   no meio do nome. */
.topo .btn-cta.acesso { padding-inline: 13px; }
.rotulo-longo { display: none; }

/* Com o Espaço do Colaborador são TRÊS portas, e marca + seis itens de menu +
   três botões + CTA pedem ~1400px num container de 1180 (medido em
   28/10/2026). No topo largo as portas viram um só "Acessar"; os três botões
   só aparecem no menu recolhido. */
.topo .acoes-topo > .acesso { display: none; }
.acessos { position: relative; }
.acessos[aria-expanded='true'] .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu-direita { left: auto; right: 0; }

/* atalho que só existe no painel compacto */
.so-mobile { display: none; }

.menu-btn {
  display: none;
  margin-left: auto;
  padding: 9px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-sm);
  background: var(--branco);
  color: var(--azul-900);
  cursor: pointer;
}

/* ------------------------------------------------- Escolha rápida (CTA) --- */
.escolha[hidden] { display: none; }
.escolha {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 29, 61, .45);
  animation: aparecer .18s ease both;
}
.escolha-caixa {
  width: min(520px, 100%);
  background: var(--branco);
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: var(--sombra-lg);
  animation: subir .22s cubic-bezier(.2, .8, .3, 1) both;
}
.escolha-caixa h2 { font-size: 24px; margin-bottom: 4px; }
.escolha-caixa > p { color: var(--texto-suave); font-size: 15px; }
.escolha-opcoes { display: grid; gap: 10px; margin-top: 20px; }
.escolha-op {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  color: var(--texto);
  transition: border-color var(--transicao), background var(--transicao), transform var(--transicao);
}
.escolha-op:hover {
  border-color: var(--azul-400);
  background: var(--azul-50);
  color: var(--texto);
  transform: translateX(3px);
}
.escolha-op .bolha {
  flex: 0 0 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--azul-100);
  color: var(--azul-700);
}
.escolha-op b { display: block; font-size: 15.5px; }
.escolha-op span { font-size: 13px; color: var(--texto-suave); }
.escolha-op .seta-fim { margin-left: auto; color: var(--texto-fraco); }
.escolha-fechar {
  margin-top: 18px;
  width: 100%;
  border: 0; background: none;
  font: inherit; font-size: 14px;
  color: var(--texto-fraco);
  cursor: pointer;
}

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- Mensagens - */
.flashes-site {
  position: fixed;
  top: 88px; right: 20px;
  z-index: 80;
  width: min(400px, calc(100vw - 40px));
}

/* ------------------------------------------------------------------ Seções */
.secao { padding: clamp(30px, 3.6vw, 50px) 0; }
.secao-alt { background: var(--fundo); }
.secao-escura { background: var(--azul-900); color: #D9E2F0; }
.secao-escura h2, .secao-escura h3, .secao-escura h4 { color: #fff; }
.secao-escura .lead, .secao-escura p { color: #B9C7DD; }
.secao-topo { padding-top: clamp(20px, 2.2vw, 32px); }

.cabeca { max-width: 720px; margin-bottom: clamp(16px, 1.8vw, 24px); }
.cabeca.centro-bloco { margin-inline: auto; text-align: center; }
.cabeca.centro-bloco .risco { margin-inline: auto; }
.cabeca p { color: var(--texto-suave); font-size: 15.5px; }
.secao-escura .cabeca p { color: #A9BAD4; }
.secao-escura .sobrelinha { color: var(--petroleo-300); }
.secao-escura .risco { background: var(--petroleo-300); }

/* ------------------------------------------------------------------- Hero - */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3vw, 42px) 0 clamp(30px, 3.4vw, 48px);
  background: var(--branco);
}
/* Grid de pontos do manual, canto superior direito, bem discreto. */
.hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -60px;
  width: 420px; height: 320px;
  color: var(--azul-300);
  background-image: radial-gradient(currentColor 1.4px, transparent 1.4px);
  background-size: 18px 18px;
  opacity: .35;
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(20px, 2.6vw, 38px);
  align-items: center;
  position: relative;
}
.hero h1 { margin-bottom: 10px; }
.hero h1 span { display: block; color: var(--petroleo-700); }
.hero-botoes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

.hero-apoio {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}
.hero-apoio div {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--texto-suave);
}
.hero-apoio svg { color: var(--petroleo-600); flex: 0 0 auto; }

/* Arte do hero: enquanto não houver foto real, a própria marca sustenta o
   bloco. Basta salvar static/img/hero.jpg para a foto entrar no lugar. */
.hero-arte {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--azul-900);
  display: grid;
  place-items: center;
}
.hero-arte img.foto { width: 100%; height: 100%; object-fit: cover; }
.hero-arte .marca-arte { width: 62%; opacity: .95; }
.hero-arte .curva {
  position: absolute;
  inset: auto -20% -30% -20%;
  height: 70%;
  border-top: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}
.hero-arte .curva.c2 { inset: auto -35% -46% -35%; height: 86%; }

.hero-selo {
  position: absolute;
  left: 22px; bottom: 22px;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  background: rgba(255, 255, 255, .96);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-md);
}
.hero-selo b { display: block; font-size: 14px; color: var(--azul-900); }
.hero-selo span { font-size: 12.5px; color: var(--texto-suave); }
.hero-selo svg { color: var(--petroleo-600); }

/* ------------------------------------------------------------- Cards base - */
.grade { display: grid; gap: 11px; }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }

.card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: 16px 17px;
  transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.card:hover { border-color: var(--azul-200); transform: translateY(-3px); box-shadow: var(--sombra-sm); }
.card h3 { margin-bottom: 5px; }
.card p { color: var(--texto-suave); font-size: 14.5px; line-height: 1.55; margin-bottom: 0; }
.card .icone {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--azul-50);
  color: var(--azul-700);
  margin-bottom: 9px;
}
.card .icone.petroleo { background: var(--petroleo-100); color: var(--petroleo-700); }
.secao-alt .card { background: var(--branco); }
.secao-escura .card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
}
.secao-escura .card:hover { border-color: rgba(255, 255, 255, .28); box-shadow: none; }
.secao-escura .card p { color: #A9BAD4; }
.secao-escura .card .icone { background: rgba(255, 255, 255, .08); color: var(--petroleo-300); }

/* Card de solução, com link no rodapé */
.card-solucao { display: flex; flex-direction: column; }
.card-solucao ul {
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.card-solucao li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 14.5px; color: var(--texto-suave);
}
.card-solucao li svg { flex: 0 0 auto; margin-top: 3px; color: var(--petroleo-600); }
.card-solucao .link-card {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 14.5px;
  color: var(--azul-700);
}
.card-solucao .link-card svg { transition: transform var(--transicao); }
.card-solucao:hover .link-card svg { transform: translateX(4px); }

/* --------------------------------------------------------------- Destaque - */
.destaque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 34px);
  align-items: center;
}
.destaque.invertido .destaque-arte { order: -1; }
.destaque-arte {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--azul-900);
  display: grid; place-items: center;
  position: relative;
}
.destaque-arte img.foto { width: 100%; height: 100%; object-fit: cover; }
.destaque-arte .marca-arte { width: 55%; opacity: .9; }

/* --------------------------------------------------------------- Processo - */
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
  gap: 14px;
  counter-reset: passo;
}
.passo { position: relative; padding-top: 14px; border-top: 2px solid var(--linha); }
.passo .num {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 13px; font-weight: 800; letter-spacing: .1em;
  color: var(--petroleo-600);
  margin-bottom: 10px;
}
.passo h3 { margin-bottom: 4px; }
.passo p { font-size: 14px; line-height: 1.55; color: var(--texto-suave); margin: 0; }
/* a linha do passo se preenche quando ele entra na tela — "fluxo" do briefing */
.passo::after {
  content: '';
  position: absolute; top: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--petroleo-600);
  transition: width .7s cubic-bezier(.4, 0, .2, 1);
}
.passo.visivel::after { width: 46px; }

/* ---------------------------------------------------------------- Números - */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 16px;
}
.numero b {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(34px, 3.8vw, 48px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
}
.numero span { display: block; margin-top: 6px; font-size: 14px; color: #A9BAD4; }

/* ----------------------------------------------------------------- Valores */
.valores { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.valor { padding-left: 18px; border-left: 2px solid var(--petroleo-300); }
.valor h4 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--petroleo-700); margin-bottom: 5px;
}
.valor p { font-size: 14px; line-height: 1.55; color: var(--texto-suave); margin: 0; }

/* ------------------------------------------------------------------ Âncora */
.ancoras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ancora {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-full);
  font-size: 14.5px; font-weight: 700;
  color: var(--azul-800);
  background: var(--branco);
  transition: all var(--transicao);
}
.ancora:hover { border-color: var(--azul-700); background: var(--azul-700); color: #fff; }

/* -------------------------------------------------------------- Faixa CTA - */
.faixa-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: var(--r-lg);
  background: var(--azul-900);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.faixa-cta::after {
  content: '';
  position: absolute;
  right: -80px; bottom: -120px;
  width: 340px; height: 340px;
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  pointer-events: none;
}
.faixa-cta h2 { color: #fff; margin-bottom: 5px; position: relative; }
.faixa-cta p { color: #B9C7DD; margin: 0; max-width: 54ch; position: relative; }
.faixa-cta .acoes { display: flex; flex-wrap: wrap; gap: 12px; position: relative; }

/* ------------------------------------------------------------------ Vagas - */
.vagas { display: grid; gap: 8px; }
.vaga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 14px 16px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.vaga:hover { border-color: var(--azul-200); box-shadow: var(--sombra-sm); }
.vaga-info { flex: 1 1 300px; }
.vaga-info h3 { margin-bottom: 6px; }
.vaga-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.vaga-meta .selo { background: var(--fundo); color: var(--texto-suave); text-transform: none; letter-spacing: 0; font-weight: 600; }
.vaga p { font-size: 14px; color: var(--texto-suave); margin: 7px 0 0; }

.vaga-detalhe { max-width: 760px; }
.vaga-detalhe .bloco-texto { white-space: pre-line; color: var(--texto-suave); font-size: 15px; line-height: 1.65; }
.vaga-detalhe h3 { margin-top: 24px; }

.sem-vagas {
  padding: 26px 20px;
  text-align: center;
  border: 1.5px dashed var(--linha-forte);
  border-radius: var(--r-lg);
  background: var(--branco);
}
.sem-vagas h3 { margin-bottom: 8px; }
.sem-vagas p { color: var(--texto-suave); max-width: 52ch; margin: 0 auto 20px; }

/* --------------------------------------------------------------- Contato -- */
.contato { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(20px, 2.4vw, 34px); align-items: start; }

.canal {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
}
.canal:last-of-type { border-bottom: 0; }
.canal .bolha {
  flex: 0 0 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--azul-50);
  color: var(--azul-700);
}
.canal h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-fraco); margin-bottom: 3px; font-weight: 700; }
.canal a, .canal p { font-size: 16px; font-weight: 600; color: var(--azul-900); margin: 0; }
.canal a:hover { color: var(--azul-600); }

.caixa-form {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: clamp(16px, 1.8vw, 22px);
}
/* formulários do site mais densos que os do portal */
.site .campo { margin-bottom: 11px; }
.site .linha-campos { gap: 11px; }
.caixa-form h3 { margin-bottom: 4px; }
.caixa-form > p.sub { color: var(--texto-suave); font-size: 14px; margin-bottom: 16px; }

/* rótulo que separa blocos dentro de um formulário longo */
.rotulo-bloco {
  display: block;
  margin: 18px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--petroleo-700);
}
.caixa-form > .rotulo-bloco:first-of-type { border-top: 0; padding-top: 0; margin-top: 14px; }

/* seletor de interesse em forma de chips (nada de select escondido) */
.interesses { display: flex; flex-wrap: wrap; gap: 9px; }
.interesses input { position: absolute; opacity: 0; pointer-events: none; }
.interesses label {
  display: inline-flex; align-items: center;
  padding: 9px 17px;
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--r-full);
  font-size: 14px; font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  text-transform: none; letter-spacing: 0;
  transition: all var(--transicao);
}
.interesses label:hover { border-color: var(--azul-400); color: var(--azul-700); }
.interesses input:checked + label {
  border-color: var(--azul-700);
  background: var(--azul-700);
  color: #fff;
}
.interesses input:focus-visible + label { outline: 3px solid var(--azul-300); outline-offset: 2px; }

.consentimento {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; color: var(--texto-suave);
  line-height: 1.6;
}
.consentimento input { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--azul-700); }

/* ------------------------------------------------------------------ Rodapé */
.rodape { background: var(--azul-950); color: #94A6C2; padding: 32px 0 0; }
.rodape-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 22px;
  padding-bottom: 24px;
}
.rodape .logo-rodape { height: 34px; width: auto; margin-bottom: 11px; }
.rodape p { font-size: 14px; line-height: 1.6; max-width: 34ch; }
.rodape h4 {
  color: #fff; font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 9px; font-weight: 700;
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rodape ul a, .rodape ul li { color: #94A6C2; font-size: 14.5px; }
.rodape ul a:hover { color: #fff; }
.redes { display: flex; gap: 10px; }
.redes a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm);
  color: #C6D3E6;
  transition: all var(--transicao);
}
.redes a:hover { background: #fff; color: var(--azul-900); border-color: #fff; }

.rodape-baixo {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between;
  padding: 13px 0 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
}

/* --------------------------------------------------------- WhatsApp fixo -- */
.zap-fixo {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 70;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #05341A;
  box-shadow: var(--sombra-md);
  transition: transform var(--transicao);
}
.zap-fixo:hover { transform: scale(1.06); color: #05341A; }

/* Balão do canal de médicos, ancorado no botão do WhatsApp. Fica acima e não
   ao lado porque no celular não sobra largura para os dois na mesma linha. */
.zap-balao {
  position: fixed;
  right: 20px; bottom: 86px;
  z-index: 69;
  width: min(300px, calc(100vw - 40px));
  display: flex;
  border-radius: 16px 16px 4px 16px;
  background: var(--branco);
  box-shadow: 0 10px 30px rgba(8, 29, 61, .16);
  border: 1px solid var(--linha);
  overflow: hidden;
  /* Escondido pela visibilidade, e não pelo atributo `hidden`: assim o balão
     entra e sai com transição, e continua fora da árvore de acessibilidade e
     do alcance do clique enquanto não aparece. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(.97);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .3, 1),
              visibility .4s;
}
.zap-balao.visivel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
.zap-balao-corpo {
  flex: 1;
  border: 0; background: none; cursor: pointer; font: inherit;
  text-align: left;
  padding: 14px 34px 14px 16px;
  display: grid; gap: 3px;
}
.zap-balao-corpo b { font-size: 14.5px; color: var(--azul-800); }
.zap-balao-corpo span { font-size: 13px; line-height: 1.45; color: var(--texto-suave); }
.zap-balao-corpo:hover b { color: var(--petroleo-700); }
.zap-balao-fechar {
  position: absolute; top: 7px; right: 7px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none;
  color: var(--texto-fraco); cursor: pointer;
}
.zap-balao-fechar:hover { background: var(--fundo-alt); color: var(--texto); }

@media (prefers-reduced-motion: reduce) {
  .zap-balao { transition: none; }
}

/* ------------------------------------------------ Texto corrido (política) */
.texto-longo { max-width: 820px; }
.texto-longo h2 { font-size: 21px; margin: 30px 0 10px; }
.texto-longo h2:first-child { margin-top: 0; }
.texto-longo p, .texto-longo li { font-size: 15.5px; line-height: 1.65; color: var(--texto-suave); }
.texto-longo ul { padding-left: 20px; margin: 8px 0 14px; }
.texto-longo li { margin-bottom: 6px; }
.texto-longo b { color: var(--texto); }
.tabela-simples { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.2px; }
.tabela-simples th, .tabela-simples td {
  text-align: left; vertical-align: top; padding: 11px 13px;
  border-bottom: 1px solid var(--linha); line-height: 1.5;
}
.tabela-simples th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-fraco); background: var(--fundo-alt); }
.tabela-simples td { color: var(--texto-suave); }
.tabela-simples tr:last-child td { border-bottom: 0; }
.texto-longo .tabela-wrap { margin: 14px 0 6px; }

/* ------------------------------------------------- Microinterações (scroll) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .3, 1); }
.reveal.visivel { opacity: 1; transform: none; }
.js .reveal { will-change: opacity, transform; }
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .passo::after { transition: none; }
  html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------- Responsivo */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-arte { max-width: 520px; aspect-ratio: 16 / 10; }
  .destaque { grid-template-columns: 1fr; }
  .destaque.invertido .destaque-arte { order: 0; }
  .contato { grid-template-columns: 1fr; }
  .rodape-grid { grid-template-columns: 1fr 1fr; }
}

/* O topo recolhe mais cedo do que os 1040px de antes: com a Área do Médico
   ao lado da Área do Cliente, marca + menu + três botões pedem 1137px, e
   entre 1041 e 1150 os botões passavam por cima do menu. */
@media (max-width: 1150px) {
  .menu-btn { display: inline-flex; }

  .painel-topo {
    display: block;
    position: fixed;
    top: 74px; left: 0; right: 0;
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
    padding: 18px 20px 26px;
    background: var(--branco);
    border-bottom: 1px solid var(--linha);
    box-shadow: var(--sombra-md);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  }
  .painel-topo.aberto { opacity: 1; visibility: visible; transform: none; }

  .menu { flex-direction: column; align-items: stretch; gap: 2px; margin: 0; }
  .menu > a, .menu-pai > button { width: 100%; padding: 13px 12px; font-size: 16px; }
  .menu > a.ativo::after, .menu-pai.ativo > button::after { display: none; }
  .menu-pai > button { justify-content: space-between; }

  .submenu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--linha);
    border-radius: 0;
    margin: 2px 0 6px 12px;
    padding: 0 0 0 8px;
    display: none;
  }
  .menu-pai[aria-expanded='true'] .submenu { display: block; }

  .acoes-topo {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 14px;
    gap: 8px;
  }
  .topo .btn-cta { width: 100%; }
  .topo .btn-cta.acesso { padding-inline: 16px; }
  .topo .acoes-topo > .acesso { display: inline-flex; }
  .acessos { display: none; }
  .rotulo-curto { display: none; }
  .rotulo-longo { display: inline; }
  .so-mobile { display: inline-flex; }
  .topo-inner { min-height: 68px; }
  .painel-topo { top: 68px; max-height: calc(100dvh - 68px); }
  .marca img { height: 34px; }
}

@media (max-width: 640px) {
  .rodape-grid { grid-template-columns: 1fr; gap: 32px; }
  .faixa-cta { flex-direction: column; align-items: flex-start; }
  .flashes-site { top: 78px; right: 12px; left: 12px; width: auto; }
  .card { padding: 15px; }
  .hero::before { display: none; }
  .zap-fixo { width: 50px; height: 50px; right: 14px; bottom: 14px; }
}