/* ===========================================================
   INPEMAC — folha de estilo única
   Conceito: documento pericial. Ver DIRECAO-VISUAL.md.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --azul-escuro: #023165;
  --azul-escuro-hover: #03407f;
  --azul-claro: #14AAF5;
  --tinta: #14181F;
  --papel: #FFFFFF;
  --linha: #DDE3EA;
  --linha-forte: #C3CCD6;
  --cinza-medio: #6B7280;
  --carimbo: #A3392A;
  --papel-secao: #FAFBFC;

  --serif: 'Newsreader', 'Georgia', serif;
  --sans: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Consolas', monospace;

  --largura-max: 1120px;
  --margem: clamp(20px, 5vw, 64px);
  --raio: 3px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: var(--azul-escuro); }
a:not([class]){ text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
a:not([class]):hover{ color: var(--azul-escuro-hover); }

/* foco de teclado sempre visível — cor escolhida para 3:1 de contraste
   contra fundo branco; em seções de fundo azul-escuro, vira branco (ver
   regras específicas mais abaixo), também com contraste adequado. */
:focus-visible{
  outline: 2.5px solid var(--azul-escuro-hover);
  outline-offset: 3px;
}
.autoridade :focus-visible,
.divisao.corporativos :focus-visible,
footer :focus-visible{
  outline-color: #ffffff;
}

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 600;
  color: var(--azul-escuro);
  line-height: 1.18;
  margin: 0 0 .5em;
}
h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 500; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3{ font-size: 1.2rem; }
p{ margin: 0 0 1em; max-width: 68ch; }
.centro p{ margin-left:auto; margin-right:auto; }

.mono{ font-family: var(--mono); }
.eyebrow{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cinza-medio);
  display: flex;
  align-items: center;
  gap: .75em;
  margin-bottom: .9em;
}
.eyebrow::after{
  content:"";
  flex: 1 1 auto;
  height: 1px;
  background: var(--linha);
}
.eyebrow .num{ color: var(--azul-escuro-hover); font-weight: 500; }

.wrap{
  max-width: var(--largura-max);
  margin: 0 auto;
  padding-left: var(--margem);
  padding-right: var(--margem);
}

/* ---------- cabeçalho: faixa única, branca ----------
   Mesma régua de espaçamento do rodapé, de propósito:
   - gap entre blocos: 2rem (perto do 2.4rem do .rodape-grade, ajustado
     um pouco pra caber logo + menu + 2 botões numa linha só)
   - logo: mesma técnica do rodapé (só altura fixa + width:auto, nunca esticar)
   Endereço e horário saíram daqui — continuam no rodapé e em Contato.
*/
.cabecalho{
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  position: sticky; top:0; z-index:40;
  transition: box-shadow .15s;
}
/* sombra só depois de rolar (classe ligada por JS — ver site.js) */
.cabecalho.rolou{ box-shadow: 0 10px 24px rgba(2,49,101,.10); }
/* o cabeçalho precisa de mais largura que o resto do site (logo + 8 itens
   de menu + 2 botões de ação com texto não cabem na coluna de 1120px) —
   e, com o e-mail por extenso, precisa também de uma margem lateral mais
   enxuta que o --margem padrão do site (só aqui, o resto do site continua
   com a margem normal). */
.cabecalho .wrap{ max-width: 1560px; padding-left:32px; padding-right:32px; }

.cabecalho-conteudo{
  display:grid; grid-template-columns: auto 1fr auto;
  align-items:center; gap:1.6rem; padding:1.1rem 0;
}
.marca{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.marca-img{ height: 46px; width:auto; display:block; }
footer .marca-img{ height: 38px; }
.marca-texto{ font-family: var(--serif); font-weight:600; color: var(--azul-escuro); font-size:1.05rem; letter-spacing:.01em; }

/* SEM overflow:hidden aqui de propósito: isso cortava (escondia) os
   submenus/dropdowns, que são posicionados absolutos e "vazam" pra fora
   da caixa do nav.principal por baixo dele. O ajuste de largura do menu
   já foi testado e medido pra caber sem isso (ver breakpoint de 1200px
   abaixo) — se algum item de menu for alongado no futuro, teste de novo
   antes de mexer aqui. */
nav.principal{ display:flex; align-items:center; justify-content:center; min-width:0; }
/* gap e fonte bem enxutos por padrão: logo a partir de 1201px (borda do
   celular) o espaço é o mais apertado que existe, com o e-mail por extenso
   nos botões de ação. A partir de 1320px (medido) sobra espaço de verdade,
   aí a regra abaixo devolve um espaçamento mais confortável. */
nav.principal > ul{ display:flex; align-items:center; gap:.05rem; list-style:none; margin:0; padding:0; }
nav.principal a{
  font-size:.68rem; text-decoration:none; color: var(--tinta); font-weight:500;
  padding: 10px 1px; border-bottom: 2px solid transparent;
  white-space: nowrap; display:inline-flex; align-items:center;
}
@media (min-width:1400px){
  nav.principal > ul{ gap:.35rem; }
  nav.principal a{ font-size:.73rem; }
}
@media (min-width:1560px){
  nav.principal > ul{ gap:.7rem; }
  nav.principal a{ font-size:.8rem; }
}
nav.principal a:hover, nav.principal a[aria-current="page"]{ color: var(--azul-escuro); border-bottom-color: var(--azul-escuro-hover); }
.seta{ font-size:.7em; margin-left:.35em; color: var(--cinza-medio); }

/* ----- botões de ação: telefone (preenchido) + e-mail (contorno) -----
   Alvo de toque grande de propósito (instrução do usuário): altura mínima
   60px, fonte mínima 17px, folga generosa. */
.cabecalho-acoes{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.botao-cabecalho{
  display:inline-flex; align-items:center; gap:.5em;
  min-height:60px; padding:14px 20px; border-radius:999px; border:1.5px solid transparent;
  font-family:var(--sans); font-weight:600; font-size:17px;
  text-decoration:none; white-space:nowrap;
}
.botao-cabecalho svg{ width:22px; height:22px; flex-shrink:0; }
.botao-tel{ background: var(--azul-escuro); color:#fff; }
.botao-tel:hover{ background: var(--azul-escuro-hover); }
.cabecalho-acoes .botao-email{ background:transparent; color: var(--azul-escuro); border-color: var(--azul-escuro); }
.cabecalho-acoes .botao-email:hover{ background: var(--azul-escuro); color:#fff; }
/* o endereço de e-mail por extenso (institutointernacionalinpemac@gmail.com)
   não cabe numa linha só ao lado de logo + 8 itens de menu + botão de
   telefone, mesmo reduzindo a fonte ao mínimo legível — por isso, só este
   botão quebra em até 2 linhas (texto sempre inteiro, nunca cortado; medido
   com Playwright em várias larguras, ver DIARIO.md). */
.cabecalho-acoes .botao-email{
  font-size:13px; white-space:normal; text-align:left; line-height:1.3;
  max-width:190px; padding:12px 16px; overflow-wrap:anywhere;
}
/* telas mais largas sobram espaço: endereço quebra em só 2 linhas em vez
   de 3, bem mais fácil de ler. */
@media (min-width:1400px){
  .cabecalho-acoes .botao-email{ max-width:230px; font-size:13.5px; }
}
@media (min-width:1560px){
  .cabecalho-acoes .botao-email{ max-width:280px; font-size:14px; }
}
/* sem min-width:0 aqui, o texto (item flex) não aceita encolher abaixo do
   próprio tamanho e vaza pra fora do botão e da tela, mesmo com
   white-space:normal + max-width no botão (bug real, visto no print). */
.cabecalho-acoes .botao-email span{ min-width:0; }
.item-email-mobile{ display:none; }

.tem-submenu{ position:relative; }
.submenu{
  display:none;
  position:absolute; left:0; top:100%;
  background:var(--papel); border:1px solid var(--linha); border-top:2px solid var(--azul-claro);
  min-width: 300px; padding: 10px; margin:0; list-style:none;
  box-shadow: 0 12px 28px rgba(2,49,101,.18);
}
.tem-submenu:hover .submenu,
.tem-submenu:focus-within .submenu,
.tem-submenu.aberto .submenu{ display:block; }
.tem-submenu.fechado-pelo-esc .submenu{ display:none !important; }
.submenu li a{
  display:block; color: var(--tinta); padding:12px 20px; margin:0;
  border-radius: var(--raio); border-bottom:none; font-size:.88rem; white-space:normal;
}
.submenu li a:hover{ background: var(--papel-secao); border-bottom:none; color: var(--azul-escuro); }

/* ---------- mega-menu "Perícia Técnica" ---------- */
.tem-mega{ position:static; }
.mega-painel{
  display:none;
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  width:min(1080px, calc(100vw - 32px));
  background: var(--papel); border:1px solid var(--linha); border-top:3px solid var(--azul-claro);
  box-shadow: 0 20px 40px rgba(2,49,101,.22);
  padding: 1.8rem 2rem 1.2rem;
  max-height: calc(100vh - 120px); overflow-y:auto;
}
.tem-mega:hover .mega-painel,
.tem-mega:focus-within .mega-painel,
.tem-mega.aberto .mega-painel{ display:block; }
.tem-mega.fechado-pelo-esc .mega-painel{ display:none !important; }
.mega-colunas{ display:grid; grid-template-columns: repeat(4, 1fr); gap:2rem; align-items:start; }
.mega-coluna{ min-width:0; }
.mega-grupo{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--azul-escuro); font-weight:600; margin:0 0 1rem; padding-bottom:.7rem;
  border-bottom:2px solid var(--azul-escuro);
}
.mega-bloco{ margin-bottom:1.3rem; }
.mega-subgrupo{
  font-family:var(--sans); font-size:.78rem; font-weight:700; color: var(--cinza-medio);
  text-transform:uppercase; letter-spacing:.03em; margin:0 0 .5rem;
}
.mega-bloco ul{ list-style:none; margin:0; padding:0; }
.mega-bloco li{ margin-bottom:.1rem; }
.mega-bloco li a{
  display:block; padding:6px 4px; margin:0 -4px; border-radius: var(--raio);
  color: var(--tinta); text-decoration:none; font-size:.86rem; line-height:1.3;
  /* "nav.principal a" (mais acima) trava white-space:nowrap pros itens do
     menu de cima — sem isso aqui, nome de especialidade comprido não
     quebra linha e vaza por cima da coluna vizinha (visto de verdade no
     print, não só medindo). */
  white-space: normal;
}
.mega-bloco li a:hover{ background: var(--papel-secao); color: var(--azul-escuro); }
.mega-rodape{ margin-top:.6rem; padding-top:1.1rem; border-top:1px solid var(--linha); text-align:center; }
.mega-rodape a{ font-weight:700; font-size:.9rem; text-decoration:none; color: var(--azul-escuro); padding:8px 12px; }
.mega-rodape a:hover{ color: var(--azul-escuro-hover); text-decoration:underline; }

/* painel mobile: escondido no computador, o painel "desktop" acima é que escondemos no celular (ver @media 760px) */
.mega-painel-mobile{ display:none; }

.menu-toggle{
  display:none; background:none; border:1.5px solid var(--linha-forte); border-radius: var(--raio);
  width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; flex-shrink:0;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:""; display:block; width:20px; height:2px; background: var(--azul-escuro); position:relative;
}
.menu-toggle span::before{ position:absolute; top:-6px; }
.menu-toggle span::after{ position:absolute; top:6px; }

/* ---------- carimbo / marca d'água ---------- */
.carimbo{
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono); text-align:center;
  flex-shrink:0;
}
.carimbo svg{ display:block; }
.carimbo-marca-dagua{
  position:absolute; z-index:0; opacity:.055; pointer-events:none;
  right: -60px; top: -40px; width: min(560px, 60vw);
}

/* ---------- botões de contato grandes (rodapé) ---------- */
.rodape-contato{ padding-bottom: 2.2rem; margin-bottom: 2.2rem; border-bottom:1px solid rgba(255,255,255,.18); }

.botoes-contato{ display:flex; gap: 18px; }
.botao-grande{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height: 60px; padding: 16px 28px; border-radius: var(--raio);
  font-family: var(--sans); font-weight:600; font-size:17px; text-decoration:none;
  border: 1.5px solid transparent; flex: 1 1 0;
}
.botao-grande svg{ width:26px; height:26px; flex-shrink:0; }
.botao-whats{ background: var(--azul-escuro); color:#fff; }
.botao-whats:hover{ background: var(--azul-escuro-hover); }
.botao-email{ background: transparent; color: var(--azul-escuro); border-color: var(--azul-escuro); }
.botao-email:hover{ background: var(--azul-escuro); color:#fff; }
/* dentro do rodapé (fundo azul-escuro), o botão de e-mail vira contorno branco */
.rodape-contato .botao-email{ color:#fff; border-color: rgba(255,255,255,.55); }
.rodape-contato .botao-email:hover{ background:#fff; color: var(--azul-escuro); }
.rodape-contato .botao-whats{ background:#fff; color: var(--azul-escuro); }
.rodape-contato .botao-whats:hover{ background: var(--azul-claro); color: var(--azul-escuro); }

/* ---------- par flutuante (whatsapp + e-mail) ---------- */
.flutuantes{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:16px;
}
.flutuante-btn{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  background: var(--azul-escuro); color:#fff;
  padding:16px 28px; border-radius: 999px; font-weight:600; font-size:17px;
  box-shadow: 0 10px 24px rgba(2,49,101,.28);
  min-height: 60px;
}
.flutuante-btn:hover{ background: var(--azul-escuro-hover); }
.flutuante-btn svg{ width:24px; height:24px; flex-shrink:0; }
.flutuante-email{ background:#fff; color: var(--azul-escuro); border:1.5px solid var(--azul-escuro); }
.flutuante-email:hover{ background: var(--papel-secao); }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--linha); background: var(--papel); }
.hero .wrap{ position:relative; z-index:1; padding-top: clamp(32px,4.5vw,48px); padding-bottom: clamp(28px,3.5vw,40px); }
.hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items:start; }
.hero-lead{ font-family: var(--serif); font-style:italic; font-size:1.2rem; color: var(--tinta); border-left:2px solid var(--azul-claro); padding-left:1.1rem; }
.hero-acoes{ display:flex; gap:.9rem; margin-top:2rem; flex-wrap:wrap; }
.hero-meta{ display:grid; gap: 1.4rem; padding-top: .4rem; }
.hero-meta .item .valor{ font-family: var(--serif); font-style:italic; color: var(--azul-escuro); font-size:1.7rem; display:block; }
.hero-meta .item .rotulo{ font-family: var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--cinza-medio); }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--sans); font-weight:600; font-size:.92rem;
  padding: 12px 22px; border-radius: var(--raio); text-decoration:none;
  border: 1px solid transparent; cursor:pointer;
}
.btn-primario{ background: var(--azul-escuro); color:#fff; }
.btn-primario:hover{ background: var(--azul-escuro-hover); color:#fff; }
.btn-secundario{ background:transparent; color: var(--azul-escuro); border-color: var(--linha-forte); }
.btn-secundario:hover{ border-color: var(--azul-escuro); }

/* ---------- seções genéricas ---------- */
section{ padding: clamp(44px,5.5vw,80px) 0; position:relative; }
section + section{ border-top:1px solid var(--linha); }
section.secao-clara{ background: var(--papel-secao); }
.cabecalho-secao{ margin-bottom: 2.2rem; max-width: 760px; }
.cabecalho-secao h2{ margin-bottom:.4rem; }

/* ---------- grade de cartões ---------- */
.grade{ display:grid; gap: 1.1rem; }
.grade-3{ grid-template-columns: repeat(3, 1fr); }
.grade-2{ grid-template-columns: repeat(2, 1fr); }
.grade-4{ grid-template-columns: repeat(4, 1fr); }
/* min-width:0 nos filhos: sem isso, item de grid não encolhe abaixo do
   próprio conteúdo (o form, com padding fixo, vazava da coluna no celular
   - mesma causa do bug do e-mail no cabeçalho, achado testando essa mudança). */
.grade-contato{ grid-template-columns: 1.3fr .7fr; align-items:start; }
.grade-contato > *{ min-width:0; }

.cartao{
  border:1px solid var(--linha); background: var(--papel); padding: 1.6rem 1.5rem;
  position:relative; border-radius: var(--raio); overflow-wrap:anywhere;
}
.cartao .arquivo{ font-family: var(--mono); font-size:.72rem; color: var(--cinza-medio); position:absolute; top:1.1rem; right:1.2rem; }
.cartao h3{ margin-bottom:.5rem; padding-right:2.4rem; }
.cartao p{ color: var(--cinza-medio); font-size: .94rem; margin-bottom:.8rem; }
.cartao ul{ margin:0; padding-left:1.1rem; color: var(--tinta); font-size:.92rem; }
.cartao ul li{ margin-bottom:.35rem; }
.cartao .saiba-mais{ display:inline-block; margin-top:1rem; font-size:.86rem; font-weight:600; text-decoration:none; }
a.cartao{ text-decoration:none; color:inherit; transition: border-color .15s; }
a.cartao:hover{ border-color: var(--azul-claro); }
a.cartao:hover h3{ color: var(--azul-escuro-hover); }

/* ---------- autoridade ---------- */
.autoridade{ background: var(--azul-escuro); color: #eaf2fb; }
.autoridade h2{ color:#fff; }
.autoridade .citacao{ font-family: var(--serif); font-style:italic; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.55; max-width:820px; color:#fff; }
.autoridade .citacao p{ max-width:none; }
.destaques{ display:flex; gap: 2.6rem; flex-wrap:wrap; margin-top:2.6rem; padding-top:2.2rem; border-top:1px solid rgba(255,255,255,.22); }
.destaques .item .valor{ font-family:var(--mono); font-size:1.3rem; color:#fff; display:block; }
.destaques .item .rotulo{ font-size:.82rem; color:#b9cfe8; margin-top:.2rem; }

/* ---------- faixa de universidades (marquee) ---------- */
.faixa-universidades{ background: var(--papel); border-top:1px solid var(--linha); border-bottom:1px solid var(--linha); padding: 26px 0; overflow:hidden; }
.faixa-universidades.oculta{ display:none; }
.faixa-universidades .legenda{ text-align:center; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cinza-medio); margin-bottom:16px; }
.marquee{ position:relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-trilha{ display:flex; width:max-content; animation: rolar 46s linear infinite; }
.marquee-trilha.reversa{ animation-name: rolar-reverso; }
.marquee:hover .marquee-trilha{ animation-play-state: paused; }
.marquee-trilha span{ font-family: var(--serif); font-style:italic; color: var(--cinza-medio); font-size:1.25rem; white-space:nowrap; padding: 0 2.2rem; border-right:1px solid var(--linha); }
@keyframes rolar{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes rolar-reverso{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }
@media (prefers-reduced-motion: reduce){ .marquee-trilha{ animation:none; overflow-x:auto; } }

/* ---------- busca geral do site (home, logo abaixo da faixa de universidades) ---------- */
.busca-site{ background: var(--papel-secao); padding: 30px 0; }
.busca-site-caixa{ max-width:640px; margin:0 auto; }
.busca-site-caixa input{
  width:100%; border:none; border-bottom:1.5px solid var(--linha-forte); background:transparent;
  font-family: var(--serif); font-style:italic; font-size:1.25rem; padding:.5rem .1rem; color: var(--azul-escuro);
}
.busca-site-caixa input:focus{ border-bottom-color: var(--azul-claro); outline:none; }
.busca-site-caixa input::placeholder{ color: var(--cinza-medio); opacity:.7; font-style:italic; }
.busca-site-resultados{ max-width:640px; margin:0 auto; }
.busca-site-resultados.tem-resultado{ margin-top:1rem; border-top:1px solid var(--linha); }
.busca-site-item{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem .2rem; border-bottom:1px solid var(--linha); text-decoration:none; color: var(--tinta);
}
.busca-site-item:hover{ background:#fff; color: var(--azul-escuro); }
.busca-site-titulo{ font-size:.95rem; }
.busca-site-categoria{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--cinza-medio); flex-shrink:0; }
.busca-site-vazio{ padding:.7rem .2rem; color: var(--cinza-medio); font-size:.9rem; margin:0; }

/* ---------- divisões (treinamentos) ---------- */
.divisoes{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--linha); }
.divisao{ padding: 2.6rem 2.4rem; position:relative; }
.divisao:first-child{ border-right:1px solid var(--linha); }
.divisao .eyebrow::after{ display:none; }
.divisao h3{ font-size:1.5rem; }
.divisao.tecnicos{ background: var(--papel); }
.divisao.corporativos{ background: var(--azul-escuro); color:#eaf2fb; }
.divisao.corporativos h3, .divisao.corporativos .eyebrow{ color:#fff; }
.divisao.corporativos .eyebrow .num{ color: var(--azul-claro); }
.lista-nrs{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem .8rem; margin:1.4rem 0; padding:0; list-style:none; font-size:.9rem; }
.lista-nrs li::before{ content:"·"; color: var(--azul-claro); margin-right:.5em; }

/* ---------- passos / como funciona ---------- */
.passos{ counter-reset:passo; display:grid; gap:0; border-top:1px solid var(--linha); }
.passo{
  counter-increment:passo; display:grid;
  grid-template-columns: 72px minmax(170px, 300px) minmax(280px, 1fr);
  align-items:baseline; column-gap:2rem; padding:1.9rem 0; border-bottom:1px solid var(--linha);
}
.passo::before{ content: counter(passo, decimal-leading-zero); font-family:var(--mono); font-size:1.6rem; color: var(--azul-escuro-hover); align-self:start; }
.passo h3{ margin:0; }
.passo p{ margin:0; max-width:60ch; color: var(--cinza-medio); }

/* ---------- FAQ ---------- */
details.faq-item{ border-bottom:1px solid var(--linha); padding: 1.1rem 0; }
details.faq-item summary{ cursor:pointer; font-weight:600; color: var(--azul-escuro); list-style:none; display:flex; justify-content:space-between; gap:1rem; font-family: var(--sans); }
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary::after{ content:"+"; font-family:var(--mono); color: var(--azul-claro); font-size:1.3rem; }
details.faq-item[open] summary::after{ content:"–"; }
details.faq-item p{ margin-top:.9rem; color: var(--cinza-medio); }

/* ---------- formulário ---------- */
.form-caso{ border:1px solid var(--linha); padding: 2.2rem; background: var(--papel); }
.campo{ margin-bottom:1.5rem; }
.campo label{ display:block; font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color: var(--cinza-medio); margin-bottom:.5rem; }
.campo input, .campo select, .campo textarea{
  width:100%; border:none; border-bottom:1.5px solid var(--linha-forte); background:transparent;
  font-family: var(--sans); font-size:1rem; padding:.55rem .1rem; color: var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{ border-bottom-color: var(--azul-escuro-hover); }
.campo textarea{ resize:vertical; min-height:110px; }
.linha-dupla{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.campo.erro input, .campo.erro select, .campo.erro textarea{ border-bottom-color: var(--carimbo); }
.msg-erro{ color: var(--carimbo); font-size:.82rem; margin-top:.35rem; display:none; }
.campo.erro .msg-erro{ display:block; }
.msg-envio{ padding:1rem 1.2rem; border:1px solid var(--linha); margin-top:1rem; font-size:.92rem; display:none; }
.msg-envio.mostrar{ display:block; }
.msg-envio.sucesso{ border-color:#1e7a3e; color:#1e7a3e; }

/* ---------- rodapé ---------- */
footer{ background: var(--azul-escuro); color:#cfe1f5; padding-top: 60px; }
footer .wrap{ padding-bottom: 30px; }
.rodape-grade{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:2.4rem; padding-bottom: 2.6rem; border-bottom:1px solid rgba(255,255,255,.18); }
footer h4{ color:#fff; font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; }
footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
footer a{ color:#cfe1f5; text-decoration:none; font-size:.9rem; }
footer a:hover{ color:#fff; }
footer .marca-texto{ color:#fff; }
.rodape-base{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.6rem 0; font-size:.78rem; color:#8fb0d1; }

/* ---------- migalhas / faixa de página interna ---------- */
.faixa-pagina{ background: var(--papel-secao); border-bottom:1px solid var(--linha); padding: 20px 0; }
.migalhas{ font-family: var(--mono); font-size:.76rem; color: var(--cinza-medio); }
.migalhas a{ color: var(--cinza-medio); text-decoration:none; }
.migalhas a:hover{ color: var(--azul-escuro); }
.migalhas .atual{ color: var(--azul-escuro); }

.cabecalho-interno{ padding: 40px 0 36px; border-bottom:1px solid var(--linha); }
.cabecalho-interno .lead{ font-size:1.05rem; color: var(--cinza-medio); max-width:70ch; }

.lista-servicos{ columns: 2; column-gap: 2.6rem; margin: 0; padding:0; list-style:none; }
.lista-servicos li{ break-inside: avoid; padding: .55rem 0; border-bottom:1px dashed var(--linha); font-size:.96rem; }
.lista-servicos li::before{ content:"—"; color: var(--azul-claro); margin-right:.6em; }

/* ---------- lista de cursos (treinamentos corporativos) ---------- */
.lista-cursos{ border-top:1px solid var(--linha); }
.curso-item{ padding:1.3rem 0; border-bottom:1px solid var(--linha); }
.curso-item h3{ font-size:1.05rem; margin-bottom:.3rem; }
.curso-item p{ color: var(--cinza-medio); font-size:.92rem; margin-bottom:.5rem; max-width:65ch; }

.bloco-cta{ border:1px solid var(--linha); background: var(--papel-secao); padding: 2.4rem; display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap; }

table.tabela-tecnica{ width:100%; border-collapse:collapse; font-size:.92rem; }
table.tabela-tecnica th, table.tabela-tecnica td{ text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--linha); }
table.tabela-tecnica th{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color: var(--cinza-medio); font-weight:500; }

/* ---------- quadro de especialidades (dossiê) ---------- */
.dossie{ display:grid; grid-template-columns: repeat(3, 1fr); border-top:1px solid var(--linha); border-left:1px solid var(--linha); }
.dossie-item.dossie-link{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding: 12px 16px; border-right:1px solid var(--linha); border-bottom:1px solid var(--linha);
  text-decoration:none; color: var(--tinta); font-size:.92rem;
}
.dossie-link .dossie-nome{ font-family:var(--sans); font-size:.92rem; color:inherit; }
.dossie-link .dossie-ir{ color: var(--azul-claro); opacity:0; transition:opacity .12s; flex-shrink:0; }
.dossie-link:hover{ background: var(--papel-secao); color: var(--azul-escuro); }
.dossie-link:hover .dossie-ir{ opacity:1; }
.quadro-subgrupo{ margin-bottom:1.6rem; }
.quadro-subgrupo:first-of-type{ margin-top:1.1rem; }
.quadro-subgrupo.busca-oculto, .quadro-grupo.busca-oculto{ display:none; }
.dossie-link.busca-oculto{ display:none; }

.busca-quadro{ max-width:520px; margin-bottom:1rem; }
.busca-quadro input{
  width:100%; border:none; border-bottom:2px solid var(--linha-forte); background:transparent;
  font-family: var(--serif); font-style:italic; font-size:1.2rem; padding:.5rem .1rem; color: var(--azul-escuro);
}
.busca-quadro input:focus{ border-bottom-color: var(--azul-claro); }
.busca-quadro input::placeholder{ color: var(--cinza-medio); opacity:.7; font-style:italic; }

@media (max-width:900px){ .dossie{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:600px){ .dossie{ grid-template-columns: 1fr; } .dossie-link .dossie-nome{ font-size:.9rem; } }

.mapa-atuacao{ border:1px solid var(--linha); padding:2rem; }
.tags{ display:flex; flex-wrap:wrap; gap:.6rem; }
.tags span{ border:1px solid var(--linha-forte); border-radius:999px; padding:.35rem .9rem; font-size:.82rem; font-family:var(--mono); color: var(--azul-escuro); }

/* ---------- responsivo ---------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .grade-3, .grade-4{ grid-template-columns: repeat(2,1fr); }
  .divisoes{ grid-template-columns:1fr; }
  .divisao:first-child{ border-right:none; border-bottom:1px solid var(--linha); }
  .rodape-grade{ grid-template-columns: 1fr 1fr; }
  .lista-servicos{ columns:1; }
}
/* Cabeçalho: 8 itens de menu + 2 botões de ação não cabem numa linha só
   abaixo de ~1180px (medido) — vira celular (ícone de 3 linhas) um pouco
   antes dos outros blocos do site, que já se adaptam a partir de 980px. */
@media (max-width: 1200px){
  /* uma faixa só: logo à esquerda, botão de telefone, três linhas — sem endereço/horário */
  .cabecalho-conteudo{ grid-template-columns: auto auto auto; justify-content:space-between; column-gap:.6rem; padding:.85rem 0; }
  .marca-img{ height:38px; }
  .cabecalho-acoes .botao-email{ display:none; }
  .botao-tel{ min-height:68px; padding:14px 22px; font-size:16px; }
  .botao-tel svg{ width:22px; height:22px; }

  nav.principal{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--papel); border-bottom:1px solid var(--linha); flex-direction:column; align-items:stretch; padding:.5rem var(--margem) 1.6rem; gap:0; box-shadow: 0 16px 28px rgba(2,49,101,.16); }
  nav.principal.aberto{ display:flex; }
  nav.principal > ul{ flex-direction:column; align-items:stretch; gap:0; }
  nav.principal > ul > li{ border-bottom:1px solid var(--linha); }
  nav.principal > ul > li:last-child{ border-bottom:none; }
  nav.principal a{ padding:14px 4px; margin:0; display:block; color: var(--tinta); }
  nav.principal a:hover, nav.principal a[aria-current="page"]{ color: var(--azul-escuro); border-bottom-color: var(--azul-escuro-hover); }
  .submenu{ position:static; border:none; box-shadow:none; padding-left:1rem; display:block; }
  .tem-submenu .submenu{ display:none; }
  .tem-submenu.aberto .submenu{ display:block; }
  .submenu li a{ padding:12px 4px; }
  .menu-toggle{ display:flex; }

  /* mega-menu "Perícia Técnica" no celular: acordeão recolhido (grupo > subgrupo) */
  .mega-painel{ display:none !important; }
  .tem-mega .mega-painel-mobile{ display:none; }
  .tem-mega.aberto .mega-painel-mobile{ display:block; padding:.3rem 0 1.2rem 1rem; }
  .mega-mobile-grupo{ border-top:1px solid var(--linha); }
  .mega-mobile-grupo summary{
    cursor:pointer; list-style:none; padding:12px 4px; font-weight:700; font-size:.85rem;
    text-transform:uppercase; letter-spacing:.05em; color: var(--azul-escuro);
    display:flex; justify-content:space-between; align-items:center;
  }
  .mega-mobile-grupo summary::-webkit-details-marker{ display:none; }
  .mega-mobile-grupo summary::after{ content:"+"; font-family:var(--mono); color: var(--azul-escuro-hover); }
  .mega-mobile-grupo[open] summary::after{ content:"–"; }
  .mega-mobile-subgrupo{ margin-left:.8rem; border-top:1px dashed var(--linha); }
  .mega-mobile-subgrupo summary{
    cursor:pointer; list-style:none; padding:10px 4px; font-size:.82rem; font-weight:600; color: var(--cinza-medio);
    display:flex; justify-content:space-between; align-items:center;
  }
  .mega-mobile-subgrupo summary::-webkit-details-marker{ display:none; }
  .mega-mobile-subgrupo summary .qtd{ font-family:var(--mono); font-weight:400; }
  .mega-mobile-subgrupo ul, .mega-mobile-lista-solta{ list-style:none; margin:0 0 .4rem; padding-left:.8rem; }
  .mega-mobile-subgrupo li a, .mega-mobile-lista-solta li a{ display:block; padding:9px 4px; font-size:.86rem; color: var(--tinta); white-space:normal; }
  .mega-mobile-lista-solta{ margin-left:.8rem; padding-top:.3rem; }
  .mega-mobile-quadro{ display:block; margin:.8rem 1rem 0; padding:12px; text-align:center; font-weight:700; font-size:.86rem; color: var(--azul-escuro); border:1.5px solid var(--azul-escuro); border-radius: var(--raio); }
  .item-email-mobile{ display:block; border-bottom:none !important; padding:14px 4px 0; }
  .item-email-mobile .botao-cabecalho{
    display:flex; width:100%; justify-content:center; text-align:center;
    min-height:68px; padding:16px 20px; font-size:17px; white-space:normal; max-width:none;
    background: var(--azul-escuro); color:#fff; border-color: var(--azul-escuro);
  }
  .item-email-mobile .botao-cabecalho span{ min-width:0; overflow-wrap:anywhere; }
  .item-email-mobile .botao-cabecalho:hover{ background: var(--azul-escuro-hover); }
}
@media (max-width: 760px){
  .grade-3, .grade-4, .grade-2, .grade-contato{ grid-template-columns: 1fr; }
  .passo{ grid-template-columns: 1fr; row-gap:.4rem; }
  .passo::before{ align-self:auto; }
  .destaques{ gap:1.4rem; }
  .rodape-grade{ grid-template-columns: 1fr; }
  .linha-dupla{ grid-template-columns:1fr; }
  .bloco-cta{ flex-direction:column; align-items:flex-start; }
  .botoes-contato{ flex-direction:column; gap:16px; }
  .botao-grande{ width:100%; min-height:68px; font-size:17px; }
  .flutuantes{ right:14px; bottom:14px; gap:16px; }
  .flutuante-btn span{ display:none; }
  .flutuante-btn{ width:68px; height:68px; padding:0; justify-content:center; border-radius:50%; }
  .flutuante-btn svg{ width:26px; height:26px; }
}