/* Anexado ao style.css — responsividade 320→2560 e motion discreto. */

/* Tipografia fluida: nenhum salto entre breakpoints. */
html{font-size:100%}
body{font-size:clamp(15.5px,.6vw + 14px,17px)}

/* Contêineres por faixa. */
@media (min-width:1700px){ :root{--wrap:1480px} }
@media (min-width:2200px){ :root{--wrap:1680px} body{font-size:18px} }
@media (max-width:640px){ .wrap,.narrow{padding:0 18px} section{padding:56px 0} }
@media (max-width:400px){ .wrap,.narrow{padding:0 14px} }

/* Hero: altura por viewport, nunca por px fixo em telas baixas. */
.hero{min-height:min(640px,86svh)}
@media (max-width:640px){ .hero .wrap{padding:88px 18px 44px} .hero-selos{gap:20px} }

/* Alvos de toque: 44x44 mínimo em qualquer controle. */
a.btn,button,summary,label.setor-aba,input,select,textarea{min-height:44px}
summary{padding:6px 0}

/* Blocos de duas colunas viram uma coluna sem media query (auto-fit),
   mas cases alternam o lado só a partir de 900px. */
.case-bloco{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:48px;align-items:center;padding:40px 0;border-top:1px solid var(--borda,#D8DADE)}
.case-foto{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--borda,#D8DADE)}
@media (min-width:900px){ .case-bloco:nth-child(even) .case-foto{order:2} }

.processo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:24px}

/* Seletor de setores em CSS puro. */
.setores{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));border:1px solid var(--borda,#D8DADE)}
.setor-radio{position:absolute;opacity:0;pointer-events:none}
.setor-abas{border-right:1px solid var(--borda,#D8DADE)}
.setor-abas li{border-bottom:1px solid var(--borda,#D8DADE)}
.setor-abas li:last-child{border-bottom:none}
.setor-aba{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 26px;font-weight:600;color:var(--texto,#4B5563);cursor:pointer}
.setor-aba:hover{background:var(--base,#F4F5F7)}
/* Painel acompanha a altura da coluna de abas: travado em 380px sobrava faixa
   vazia abaixo dele, porque a lista de 11 setores passa de 700px. */
.setor-paineis{position:relative;background:var(--base,#F4F5F7);min-height:380px;height:100%}
.setor-paineis>.setor-painel{height:100%}
.setor-painel{display:none;height:100%}
.setor-radio:focus-visible + .setor-abas .setor-aba{outline:2px solid var(--vermelho,#C42B2B);outline-offset:-2px}
/* 11 segmentos — os mesmos da copy aprovada da home. */
#setor-0:checked ~ .setor-abas label[for="setor-0"],
#setor-1:checked ~ .setor-abas label[for="setor-1"],
#setor-2:checked ~ .setor-abas label[for="setor-2"],
#setor-3:checked ~ .setor-abas label[for="setor-3"],
#setor-4:checked ~ .setor-abas label[for="setor-4"],
#setor-5:checked ~ .setor-abas label[for="setor-5"],
#setor-6:checked ~ .setor-abas label[for="setor-6"],
#setor-7:checked ~ .setor-abas label[for="setor-7"],
#setor-8:checked ~ .setor-abas label[for="setor-8"],
#setor-9:checked ~ .setor-abas label[for="setor-9"],
#setor-10:checked ~ .setor-abas label[for="setor-10"]{background:var(--base,#F4F5F7);color:var(--marinho,#0B1B33);box-shadow:inset 3px 0 0 var(--azul,#1D4F8C)}
#setor-0:checked ~ .setor-paineis #painel-0,
#setor-1:checked ~ .setor-paineis #painel-1,
#setor-2:checked ~ .setor-paineis #painel-2,
#setor-3:checked ~ .setor-paineis #painel-3,
#setor-4:checked ~ .setor-paineis #painel-4,
#setor-5:checked ~ .setor-paineis #painel-5,
#setor-6:checked ~ .setor-paineis #painel-6,
#setor-7:checked ~ .setor-paineis #painel-7,
#setor-8:checked ~ .setor-paineis #painel-8,
#setor-9:checked ~ .setor-paineis #painel-9,
#setor-10:checked ~ .setor-paineis #painel-10{display:block}
@media (max-width:700px){
  .setor-abas{border-right:none;border-bottom:1px solid var(--borda,#D8DADE);display:flex;overflow-x:auto}
  .setor-abas li{border-bottom:none;border-right:1px solid var(--borda,#D8DADE);flex:0 0 auto}
  .setor-paineis,.setor-painel{min-height:auto}
  .setor-painel{padding:28px 22px}
}

/* Tabelas: rolagem no próprio contêiner, nunca empurrando a página. */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll-x table{min-width:420px}
.entry table{display:block;overflow-x:auto}

/* MOVIMENTO — mesmo vocabulário do arquivo de design: revelação com stagger,
   marquee de clientes, contador nos números, seta que desliza, elevação mínima
   no card. Curva única expo-out, que começa rápido e assenta — nunca bounce.
   Sem JS nada disso é necessário: a classe .js-motion só entra pelo enhance.js,
   então o conteúdo nasce visível para robô e para quem está sem script. */
:root{--curva:cubic-bezier(.16,1,.3,1)}
/* A revelação só transladava 14px, sem opacity — o efeito era quase invisível.
   Fade + deslocamento maior tornam a entrada perceptível sem virar decoração. */
.js-motion .reveal{opacity:0;transform:translateY(22px)}
.js-motion .reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--curva),transform .6s var(--curva)}
a,button,label.setor-aba,.card-servico,.lista-plana>*{transition:background-color .2s var(--curva),color .2s var(--curva),border-color .2s var(--curva),transform .32s var(--curva)}
.card-servico:hover,.lista-plana>*:hover{background:var(--base,#F4F5F7)}
.card-servico:hover,.clientes a:hover{transform:translateY(-3px)}
.seta{display:inline-block;transition:transform .32s var(--curva)}
a:hover .seta,.card-servico:hover .seta,button:hover .seta{transform:translateX(6px)}
.hero>img{will-change:auto}

/* Marquee de clientes: trilho duplicado, translada 50% e reinicia sem emenda.
   Sem JS ele roda igual (é animação de CSS) e pausa no hover/foco. */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee .trilho{display:flex;width:max-content;animation:desliza 46s linear infinite;margin:0;padding:0;list-style:none}
.marquee:hover .trilho,.marquee:focus-within .trilho{animation-play-state:paused}
/* Caixa de altura fixa: o item mede o mesmo com nome ou com logo, então trocar
   texto por imagem não reflui a faixa nem muda a duração percebida do loop. */
.marquee .trilho>li{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:150px;height:96px;padding:20px 30px;border-right:1px solid var(--borda,#D8DADE)}
.marquee .trilho .cliente-nome{font-family:var(--display,'Archivo',sans-serif);font-weight:800;font-size:clamp(17px,2vw,21px);letter-spacing:.4px;color:var(--marinho,#0B1B33);white-space:nowrap}
/* Sem max-height aqui: o arquivo já vem na altura compensada e os atributos
   width/height reservam o espaço. Forçar altura no CSS desfaria a normalização. */
.marquee .trilho img{display:block;max-width:100%;height:auto}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Barra de avanço automático da lista de setores. Só corre com JS ligado,
   porque sem JS a lista não gira — e barra que não corresponde a nada mente. */
.avanco{display:block;height:2px;background:var(--azul,#1D4F8C);width:0}
.js-motion .setor-radio:checked ~ .setor-abas .aba-ativa .avanco{animation:avanca 7s linear forwards}
.setores.travado .avanco{animation:none!important;width:0}
@keyframes avanca{from{width:0}to{width:100%}}
.setor-painel{animation:entra .42s var(--curva)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* GRADES QUE NUNCA DEIXAM VÃO. auto-fit resolvia 4 colunas e a última linha
   ficava com 1 item e 3 buracos. Aqui a contagem de colunas é fixa por faixa e
   o número de itens é sempre múltiplo dela: 8 (4·2·1), 6 (3·2·1), 2. */
.g8,.g6,.g4,.g2{display:grid;grid-template-columns:1fr;gap:1px;background:var(--borda,#D8DADE)}
@media (min-width:640px){.g8,.g6,.g4,.g2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.g6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.g8,.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.g8>*,.g6>*,.g4>*,.g2>*{background:#fff;min-width:0}
/* SEGURO CONTRA SOBRA. Hoje as contagens são múltiplas das colunas, mas isso
   depende do conteúdo: publicar um 7º treinamento ou um 12º serviço reabriria
   o vão. O último item estica para fechar a linha; com contagem exata nenhuma
   regra casa e nada muda. */
@media (min-width:1100px){
  .g8>*:last-child:nth-child(4n+1),.g4>*:last-child:nth-child(4n+1){grid-column:span 4}
  .g8>*:last-child:nth-child(4n+2),.g4>*:last-child:nth-child(4n+2){grid-column:span 3}
  .g8>*:last-child:nth-child(4n+3),.g4>*:last-child:nth-child(4n+3){grid-column:span 2}
}
@media (min-width:1000px){
  .g6>*:last-child:nth-child(3n+1){grid-column:span 3}
  .g6>*:last-child:nth-child(3n+2){grid-column:span 2}
}
@media (min-width:640px) and (max-width:1099px){
  .g8>*:last-child:nth-child(2n+1),.g4>*:last-child:nth-child(2n+1){grid-column:span 2}
}
@media (min-width:640px) and (max-width:999px){
  .g6>*:last-child:nth-child(2n+1){grid-column:span 2}
}

@media (prefers-reduced-motion:reduce){
  .js-motion .reveal{opacity:1!important;transform:none!important}
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .marquee .trilho{flex-wrap:wrap;width:100%;justify-content:center}
  .card-servico:hover{transform:none}
}

/* Fonte do sistema em 200%: nada estoura, tudo quebra. */
h1,h2,h3,.hero h1{overflow-wrap:break-word;text-wrap:pretty}

/* Impressão de laudo/artigo. */
@media print{
  .topbar,.site-header,.wa,.site-footer .cols{display:none}
  body{background:#fff;font-size:11pt}
  .dark{background:#fff!important;color:#000!important}
  .dark h1,.dark h2,.dark h3{color:#000!important}
  a{text-decoration:underline}
}

/* Dropdown de Soluções — abre em hover e em foco por teclado, sem JS. */
.nav-solucoes{position:relative}
.nav-solucoes>a,.nav-solucoes>button{display:flex;align-items:center;gap:7px;background:none;border:none;font-family:var(--body,'IBM Plex Sans',sans-serif);font-size:14.5px;font-weight:600;color:var(--marinho,#0B1B33);cursor:pointer;min-height:44px;padding:8px 0}
.nav-solucoes>button span[aria-hidden]{font-size:11px;color:var(--azul,#1D4F8C);transition:transform .18s cubic-bezier(.4,0,.2,1)}
/* Sem vão entre botão e painel (top:100%, não calc(100% + 10px)): o vão fazia o
   ponteiro sair do wrapper no caminho e o menu fechava antes do clique.
   Visibilidade só por display — opacity/visibility já produziram o painel
   "aberto mas invisível". */
.nav-drop{position:absolute;top:100%;left:-22px;width:340px;background:#fff;border:1px solid var(--borda,#D8DADE);border-top:3px solid var(--azul,#1D4F8C);z-index:120;max-height:min(560px,72vh);overflow-y:auto;display:none}
.nav-solucoes:hover .nav-drop,.nav-solucoes:focus-within .nav-drop{display:block}
.nav-solucoes:hover>button span[aria-hidden],.nav-solucoes:focus-within>button span[aria-hidden]{transform:rotate(180deg)}
.nav-drop .drop-todas{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px;background:var(--marinho,#0B1B33);color:#fff;font-family:var(--display,'Archivo',sans-serif);font-weight:700;font-size:14.5px}
.nav-drop .drop-todas:hover{background:var(--azul,#1D4F8C);color:#fff}
.nav-drop .drop-grupo{border-bottom:1px solid var(--borda,#D8DADE)}
.nav-drop .drop-rotulo{display:block;padding:14px 22px 6px;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:#6B7280}
.nav-drop .drop-item{display:block;padding:9px 22px 12px;border-left:3px solid transparent}
.nav-drop .drop-item:hover{background:var(--base,#F4F5F7);border-left-color:var(--azul,#1D4F8C)}
.nav-drop .drop-item[aria-current="page"]{border-left-color:var(--azul,#1D4F8C)}
.nav-drop .drop-item b{display:block;font-family:var(--display,'Archivo',sans-serif);font-weight:700;font-size:14.5px;color:var(--marinho,#0B1B33)}
.nav-drop .drop-item span{display:block;font-size:12.5px;color:var(--texto,#4B5563);line-height:1.5;margin-top:3px}
@media (max-width:1219px){
  .nav-solucoes{position:static;width:100%}
  .nav-solucoes>button{width:100%;justify-content:space-between;font-size:16px;min-height:48px;border-bottom:1px solid var(--base,#F4F5F7)}
  .nav-drop{position:static;width:100%;left:0;opacity:1;visibility:visible;transform:none;max-height:none;border:1px solid var(--borda,#D8DADE);background:var(--base,#F4F5F7);margin:6px 0 10px;display:none}
  .nav-solucoes:focus-within .nav-drop,.nav-solucoes:hover .nav-drop{display:block}
}
/* O botão flutuante ocupa a faixa inferior direita do viewport, onde nenhum
   controle pode ficar. Em página com formulário de conversão ele é redundante
   (todas têm contato inline) — a classe vem do body_class em functions.php. */
.tem-formulario .wa,body.blog .wa,body.category .wa{display:none}

.portal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));min-height:70vh}
.portal-info{background:var(--marinho,#0B1B33);color:var(--texto-dark,#B8C2CE);padding:64px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.portal-form{background:#fff;padding:64px 48px;display:flex;align-items:center;justify-content:center}
.portal-form>div{width:100%;max-width:420px}
.portal-form input[type="email"],.portal-form input[type="password"]{border:1px solid var(--borda,#D8DADE);padding:14px;font-size:16px;font-family:var(--body,'IBM Plex Sans',sans-serif);background:var(--base,#F4F5F7);min-height:48px;width:100%}
.portal-form input:focus{border-color:var(--azul,#1D4F8C)}
.portal-form label.campo{display:grid;gap:8px;font-size:13px;font-family:var(--mono,'IBM Plex Mono',monospace);letter-spacing:1.4px;text-transform:uppercase;color:#6B7280}
@media (max-width:640px){ .portal-info,.portal-form{padding:44px 20px} }

/* Marca sobre fundo escuro: o símbolo nunca recebe filtro nem recolorização. */
.site-footer .marca-simbolo{width:52px;height:52px;object-fit:contain;filter:none}

/* Material de treinamento */
/* Material: corpo em 16,5px — 65–75 caracteres são 536–619px. */
.material-corpo{display:grid;grid-template-columns:100%;gap:64px;align-items:start}
.material-corpo .entry{max-width:600px}
@media (min-width:1000px){ .material-corpo{grid-template-columns:minmax(0,1fr) 340px} }
.material-aside{display:grid;gap:24px;align-content:start;max-width:340px}
@media (min-width:1000px){ .material-aside{position:sticky;top:100px} }
.material-aside .campo{display:grid;gap:7px;font-size:12.5px;font-family:var(--mono,'IBM Plex Mono',monospace);letter-spacing:1.4px;text-transform:uppercase;color:#6B7280}
.material-aside input[type="text"],.material-aside input[type="email"]{border:1px solid var(--borda,#D8DADE);padding:13px;font-size:16px;font-family:var(--body,'IBM Plex Sans',sans-serif);background:#fff;min-height:48px;width:100%}
.material-aside input:focus{border-color:var(--azul,#1D4F8C)}

/* Alvo de toque no nav desktop: link de texto também recebe 44px de altura. */
.nav>a,.nav-portal{min-height:44px;display:flex;align-items:center}

/* Menu compacto aberto: nunca passa da altura da tela — rola por dentro. */
@media (max-width:1219px){
  .nav.is-open{max-height:calc(100svh - 124px);overflow-y:auto;overscroll-behavior:contain}
}

/* Blog — listagem */
.blog-cat{border:1px solid var(--borda,#D8DADE);padding:9px 16px;font-size:13.5px;background:var(--base,#F4F5F7);color:var(--marinho,#0B1B33);min-height:44px;display:inline-flex;align-items:center}
.blog-cat:hover{border-color:var(--azul,#1D4F8C);color:var(--azul,#1D4F8C)}
.blog-cat.is-ativa{border-color:var(--azul,#1D4F8C);background:var(--apoio,#DCE6F2)}
.blog-destaque{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:44px;align-items:center;background:#fff;border:1px solid var(--borda,#D8DADE)}
.blog-destaque-foto{position:relative;min-height:320px;background:var(--apoio,#DCE6F2);align-self:stretch}
.blog-destaque-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-destaque-texto{padding:40px}
@media (min-width:900px){ .blog-destaque-texto{padding:40px 40px 40px 0} }
.blog-grade{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.blog-card{display:flex;flex-direction:column;min-height:320px;padding:0}
.blog-card:hover{background:var(--base,#F4F5F7)}
.blog-card-foto{width:100%;aspect-ratio:16/9;object-fit:cover}
.blog-card-meta{padding:22px 24px 0;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:#6B7280}
.blog-card-titulo{padding:10px 24px 0;font-size:18px;line-height:1.28}
.blog-card-resumo{padding:10px 24px 0;font-size:14.5px;line-height:1.6}
.blog-card-link{margin-top:auto;padding:18px 24px 24px;font-family:var(--display,'Archivo',sans-serif);font-weight:700;font-size:14px;color:var(--azul,#1D4F8C)}

/* Blog — artigo */
.artigo-capa{width:100%;aspect-ratio:16/9;object-fit:cover}
/* Seção 4 do brief: 65 a 75 caracteres por linha. Com corpo em 17,5px isso são
   570–655px, daí o teto de 620px (≈71 caracteres). Duas colunas IGUAIS davam
   403px (46 caracteres) — por isso a lateral tem largura fixa, não 1fr. */
.artigo-corpo{display:grid;grid-template-columns:100%;gap:56px;align-items:start}
.artigo-corpo .entry{max-width:620px}
@media (min-width:1000px){ .artigo-corpo{grid-template-columns:minmax(0,1fr) 320px} }
.artigo-aside{display:grid;gap:24px;align-content:start}
@media (min-width:1000px){ .artigo-aside{position:sticky;top:120px} }
.nav-links{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--display,'Archivo',sans-serif);font-weight:700}
.page-numbers{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--borda,#D8DADE);margin-right:6px;color:var(--marinho,#0B1B33)}
.page-numbers.current{border-color:var(--azul,#1D4F8C);background:var(--apoio,#DCE6F2)}

/* .duas continua para blocos de igual peso (dois textos lado a lado). Onde há
   texto corrido longo + lateral, use .artigo-corpo ou .material-corpo, que dão
   dominância explícita à coluna de leitura. */
.duas>.entry{max-width:620px}

/* Itens de grid que contêm tabela ou texto longo precisam poder encolher:
   sem min-width:0 o contêrainer com overflow-x:auto empurra a página. */
.wrap .dark,.artigo-corpo>*,.material-corpo>*,.duas>*{min-width:0}
.scroll-x{min-width:0;max-width:100%}
.scroll-x table{min-width:min(420px,100%)}
/* Resposta direta: rótulo de 200px só onde couber. */
.resposta-direta{display:grid;grid-template-columns:100%;gap:14px}
@media (min-width:1000px){ .resposta-direta{grid-template-columns:200px minmax(0,1fr);gap:40px} }
/* Compartilhamento: alvo de 44px. */
.compartilhar a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
/* Prova de autoridade — clientes. */
.clientes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:1px;background:var(--borda,#D8DADE);border:1px solid var(--borda,#D8DADE)}
.clientes>*{background:#fff;min-height:96px;display:flex;align-items:center;justify-content:center;padding:20px 16px;font-family:var(--display,'Archivo',sans-serif);font-weight:800;font-size:16px;letter-spacing:.5px;color:var(--marinho,#0B1B33);text-align:center}
.clientes img{max-height:56px;width:auto;object-fit:contain}

/* li ativo (para a barra de avanço) sem depender de :has. */
#setor-0:checked ~ .setor-abas li:nth-child(1) .avanco,
#setor-1:checked ~ .setor-abas li:nth-child(2) .avanco,
#setor-2:checked ~ .setor-abas li:nth-child(3) .avanco,
#setor-3:checked ~ .setor-abas li:nth-child(4) .avanco,
#setor-4:checked ~ .setor-abas li:nth-child(5) .avanco,
#setor-5:checked ~ .setor-abas li:nth-child(6) .avanco,
#setor-6:checked ~ .setor-abas li:nth-child(7) .avanco,
#setor-7:checked ~ .setor-abas li:nth-child(8) .avanco,
#setor-8:checked ~ .setor-abas li:nth-child(9) .avanco,
#setor-9:checked ~ .setor-abas li:nth-child(10) .avanco,
#setor-10:checked ~ .setor-abas li:nth-child(11) .avanco{animation:avanca 7s linear forwards}

/* Redes sociais: alvo de 48px (acima do mínimo de 44), raio zero como todo
   controle da marca — a pílula é exceção exclusiva do WhatsApp. */
.redes{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
/* Ícones oficiais coloridos, sem moldura — como no design. A borda existia para
   contornar ícones monocromáticos; com a marca colorida ela só engaiola o
   logotipo. Alvo de 44px, o mínimo de toque. */
.redes a{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.redes a:hover{opacity:.85}
.redes svg{display:block}

/* Grade de 4 com contagem fixa (mesma regra das demais: nunca auto-fit). */
.grade-4{display:grid;grid-template-columns:1fr;gap:1px;background:var(--borda,#D8DADE)}
@media (min-width:640px){.grade-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.grade-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Cartão de case compacto (home enxuta). */
.card-case{background:#fff;padding:28px 24px 22px;display:flex;flex-direction:column;gap:10px;min-height:196px;color:var(--marinho,#0B1B33)}
.card-case:hover{background:var(--base,#F4F5F7)}
.card-case .ver{margin-top:auto;font-family:var(--display,'Archivo',sans-serif);font-weight:700;font-size:13.5px;color:var(--azul,#1D4F8C)}

/* Lista do bloco de consequência (página NR-12). */
.lista-urgencia{display:grid;gap:0;border-top:1px solid #22334D}
.lista-urgencia li{display:flex;gap:14px;align-items:baseline;color:#fff;font-size:15.5px;line-height:1.7;padding:18px 0;border-bottom:1px solid #22334D}
.lista-urgencia .marcador{width:7px;height:7px;background:var(--bordo,#8B2222);flex:0 0 auto;margin-top:8px}

/* ---- Página de setores: 21 grupos, filtro por serviço ---- */
/* Grade de contagem fixa 3·2·1 (nunca auto-fit). 21 grupos + 1 cartão de
   encaminhamento = 22; a última linha fecha em 3 e em 2 colunas. */
.grade-6{display:grid;grid-template-columns:1fr;gap:1px;background:var(--borda,#D8DADE)}
@media (min-width:640px){.grade-6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.grade-6{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ÚLTIMA LINHA SEM VÃO, qualquer que seja a contagem. Contagem fixa evita o
   auto-fit, mas não resolve sobra: 5 itens em 3 colunas deixam um buraco na
   segunda linha (é o caso dos níveis 2 e 3 em /solucoes/). Aqui o último card
   estica para ocupar as trilhas que sobraram — a linha fecha e o vão não
   existe. Com contagem múltipla de 3 ou de 2 nenhuma regra casa, e nada muda. */
@media (min-width:1000px){
  .grade-6>*:last-child:nth-child(3n+1){grid-column:span 3}
  .grade-6>*:last-child:nth-child(3n+2){grid-column:span 2}
}
@media (min-width:640px) and (max-width:999px){
  .grade-6>*:last-child:nth-child(2n+1){grid-column:span 2}
}
.filtros-setor{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.filtros-setor .chip{border:1px solid var(--borda,#D8DADE);background:#fff;color:var(--marinho,#0B1B33);font-family:var(--corpo);font-weight:600;font-size:13.5px;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.filtros-setor .chip.is-ativo{border-color:var(--azul,#1D4F8C);background:var(--apoio,#DCE6F2)}
.filtros-setor .num{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;color:var(--texto,#4B5563)}
.card-setor{background:#fff;padding:30px 26px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card-setor-cta{background:var(--marinho,#0B1B33);justify-content:center;color:var(--texto-dark,#B8C2CE)}
.card-setor .lista-sub{display:grid;gap:7px}
.card-setor .lista-sub li{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:1.55;color:var(--texto,#4B5563)}
.card-setor .lista-sub .marcador{width:5px;height:5px;background:var(--bordo,#8B2222);flex:0 0 auto;margin-top:7px}
.card-setor .prova-setor{font-size:13px;line-height:1.6;background:var(--apoio,#DCE6F2);padding:12px 14px;color:var(--marinho,#0B1B33)}
.card-setor .prova-setor .rotulo{display:block;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--texto,#4B5563)}
.card-setor .tags-servico{margin-top:auto;padding-top:14px;border-top:1px solid var(--borda,#D8DADE);display:flex;gap:8px;flex-wrap:wrap}
.card-setor .tags-servico a{border:1px solid var(--borda,#D8DADE);padding:0 12px;min-height:44px;display:inline-flex;align-items:center;font-size:12.5px;font-family:var(--corpo);font-weight:600;color:var(--azul,#1D4F8C)}
.card-setor .tags-servico a:hover{border-color:var(--azul,#1D4F8C);background:var(--base,#F4F5F7)}
.card-setor .marcador{width:8px;height:8px;background:var(--bordo,#8B2222);display:block}
/* Hero com foto de fundo + gradiente de proteção marinho (nunca preto puro). */
.hero-foto{position:relative;overflow:hidden}
.hero-foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.hero-foto .protecao{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,27,51,.62) 0%,rgba(11,27,51,.94) 100%)}

/* Formulário de /contato/: mesmo padrão visual de .portal-form / .material-aside
   (rótulo mono maiúsculo + campo com fundo base), estendido para select e
   textarea, que essas duas telas não precisavam. */
.contato-form label.campo{display:grid;gap:8px;font-size:13px;font-family:var(--mono,'IBM Plex Mono',monospace);letter-spacing:1.4px;text-transform:uppercase;color:#6B7280}
.contato-form input,.contato-form select,.contato-form textarea{border:1px solid var(--borda,#D8DADE);padding:14px;font-size:16px;font-family:var(--body,'IBM Plex Sans',sans-serif);background:var(--base,#F4F5F7);min-height:48px;width:100%;min-width:0}
.contato-form textarea{resize:vertical;min-height:140px}
.contato-form input:focus,.contato-form select:focus,.contato-form textarea:focus{border-color:var(--azul,#1D4F8C)}

/* Cartões de /solucoes/ (Níveis 2 e 3) reaproveitam .card-case, mas com mais
   texto (carimbo + h3 + resumo + "ver") do que o cartão de case compacto — a
   classe extra sobe o min-height só aqui, sem alterar .card-case nas demais
   telas que já a usam. */
.card-servico{min-height:232px;padding:30px 26px 24px}

/* CARROSSEL (fotos de serviço). Sem JS todos os slides ficam visíveis
   empilhados: o conteúdo nunca depende de script (requisito nº1 do brief).
   Com JS, .js-carrossel entra e a troca passa a ser crossfade. */
.carrossel{position:relative;border:1px solid var(--borda,#D8DADE);background:var(--apoio,#DCE6F2);overflow:hidden;margin-top:22px}
.carrossel-palco{display:grid;gap:2px}
.carrossel-slide{margin:0;position:relative}
.carrossel-slide img{display:block;width:100%;height:auto;object-fit:cover}
.carrossel-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 12px;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,rgba(11,27,51,0) 0%,rgba(11,27,51,.82) 100%)}
/* Modo com JS: um slide por vez, altura fixa, crossfade. */
.js-carrossel{min-height:var(--carrossel-altura,420px)}
.js-carrossel .carrossel-palco{display:block;position:absolute;inset:0}
.js-carrossel .carrossel-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1)}
.js-carrossel .carrossel-slide.ativo{opacity:1}
.js-carrossel .carrossel-slide img{width:100%;height:100%}
.carrossel-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(255,255,255,.5);background:rgba(11,27,51,.55);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .22s ease}
.carrossel-nav:hover{background:rgba(11,27,51,.85)}
.carrossel-nav.anterior{left:10px}
.carrossel-nav.proximo{right:10px}
.carrossel-contador{position:absolute;left:12px;bottom:12px;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:10.5px;letter-spacing:1.4px;color:#fff;background:rgba(11,27,51,.55);padding:4px 9px;z-index:2}
@media (prefers-reduced-motion:reduce){
  .js-carrossel .carrossel-slide{transition:none}
}

/* Grade de 3 que nunca deixa vão (1 · 2 · 3 colunas). */
.g3{display:grid;grid-template-columns:1fr;gap:1px;background:var(--borda,#D8DADE)}
@media (min-width:640px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.g3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Foto com legenda sobre gradiente de proteção marinho (nunca preto puro). */
.foto-legenda{margin:0;border:1px solid var(--borda,#D8DADE);position:relative;overflow:hidden}
.foto-legenda img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.foto-legenda figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;font-family:var(--mono,'IBM Plex Mono',monospace);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,rgba(11,27,51,0) 0%,rgba(11,27,51,.78) 100%)}
/* Os 3 carrosséis de "Estrutura e capacidade", idênticos ao design: 1 · 2 · 3
   colunas, proporção 4:3 e grid-auto-rows:1fr para as três linhas medirem igual.
   Antes eu pulava a faixa de 2 colunas alegando que o terceiro card dobraria de
   largura — errado: dobrar exigiria uma regra de esticamento do último filho, e
   ela não existe aqui. Em 2 colunas o terceiro mantém a largura de uma coluna e
   apenas deixa a célula vizinha livre, que é o comportamento do design. */
.cards-capacidade{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:16px;margin-top:28px}
@media (min-width:640px){.cards-capacidade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.cards-capacidade{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cards-capacidade .carrossel{margin-top:0;aspect-ratio:4/3}
.cards-capacidade .js-carrossel{min-height:0}

/* ---------- MOVIMENTO COMPLEMENTAR ----------
   Tudo em transform/opacity (não custa layout), tudo com a mesma curva, e nada
   que se mova sozinho fora dos carrosséis já existentes. */

/* Zoom discreto na foto do card, com o recorte preso pelo overflow do pai. */
.blog-card,.card-setor,.grid-1px>a{overflow:hidden}
.blog-card-foto,.card-setor img,.material-card img{transition:transform .5s var(--curva)}
.blog-card:hover .blog-card-foto,.card-setor:hover img,.material-card:hover img{transform:scale(1.03)}

/* Cards que já sobem no hover ganham borda ativa, para o estado ficar claro
   sem depender só do movimento (requisito de acessibilidade: nunca só cor). */
.blog-card:hover,.material-card:hover,.card-setor:hover{border-color:var(--azul,#1D4F8C)}

/* FAQ: o sinal +/− gira, e a resposta entra com fade. */
summary::after{transition:transform .24s var(--curva)}
details[open] summary::after{transform:rotate(180deg)}
details[open] > :not(summary){animation:bwAbre .34s var(--curva)}
@keyframes bwAbre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Link de texto corrido: sublinhado que cresce, em vez de trocar de cor seco. */
.entry a:not(.btn){background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s var(--curva),color .2s var(--curva)}
.entry a:not(.btn):hover{background-size:100% 1px}

/* Botão: leve recuo no clique — a única resposta de "press" do sistema. */
.btn:active{transform:translateY(1px)}

/* Foco visível com transição, para teclado não receber um salto abrupto. */
a,button,summary,input,select,textarea{transition-property:background-color,color,border-color,transform,outline-color,background-size}

/* Mapa sob demanda: a fachada escurece no hover, sinalizando que é clicável. */
.mapa-fachada{transition:filter .3s var(--curva)}
.mapa-abrir:hover .mapa-fachada{filter:brightness(.82)}

@media (prefers-reduced-motion:reduce){
  .blog-card:hover .blog-card-foto,.card-setor:hover img,.material-card:hover img{transform:none}
  details[open] > :not(summary){animation:none}
  .entry a:not(.btn){background-size:100% 1px}
}

/* ---------- MAPA (unidades) ----------
   Fachada local + iframe só no clique: mantém o requisito de zero requisição
   externa no carregamento e ainda entrega o mapa a quem quiser ver. */
.unidades{display:grid;grid-template-columns:1fr;gap:1px;background:var(--borda,#D8DADE);border:1px solid var(--borda,#D8DADE)}
@media (min-width:760px){.unidades{grid-template-columns:repeat(3,minmax(0,1fr))}}
.unidades>*{background:#fff;padding:26px 24px}
.unidade-rotulo{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--texto,#4B5563)}
.mapa-abrir{display:block;position:relative;width:100%;padding:0;border:1px solid var(--borda,#D8DADE);background:var(--apoio,#DCE6F2);cursor:pointer;overflow:hidden}
.mapa-fachada{display:block;width:100%;aspect-ratio:16/7;object-fit:cover}
.mapa-selo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(11,27,51,.88);color:#fff;font-family:var(--display,'Archivo',sans-serif);font-weight:700;font-size:15px;padding:14px 24px;display:flex;align-items:center;gap:10px;min-height:48px}
.mapa-frame{width:100%;aspect-ratio:16/7;border:1px solid var(--borda,#D8DADE);display:block}

/* ---------- TRANSIÇÃO ENTRE PÁGINAS (View Transitions API) ----------
   Cross-fade curto ao navegar, em CSS puro. Onde o navegador não suporta, a
   regra é simplesmente ignorada e a navegação segue normal — nada de biblioteca
   de SPA, que violaria o requisito de renderização no servidor. 180ms: o
   suficiente para o olho perceber continuidade, curto o bastante para não
   parecer que a página demorou. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:bwSaiPagina .18s var(--curva) both}
::view-transition-new(root){animation:bwEntraPagina .22s var(--curva) both}
@keyframes bwSaiPagina{to{opacity:0}}
@keyframes bwEntraPagina{from{opacity:0}}

/* ---------- ROLAGEM SUAVE EM ÂNCORA ----------
   O sumário do artigo é a razão de existir: salto seco de âncora tira a
   referência de onde o leitor estava no texto. scroll-padding compensa o
   cabeçalho fixo, senão o título de destino fica escondido atrás dele. */
html{scroll-behavior:smooth;scroll-padding-top:120px}

/* ---------- BARRA DE PROGRESSO DE LEITURA ----------
   Só no artigo, onde há rolagem longa o suficiente para a informação ser útil.
   Feita com animation-timeline (sem JS, sem listener de scroll). Onde não há
   suporte, a barra simplesmente não aparece — não sobra faixa vazia, porque a
   escala inicial é zero. */
.progresso-leitura{position:fixed;top:0;left:0;right:0;height:3px;z-index:130;background:var(--vermelho,#C42B2B);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){
  .progresso-leitura{animation:bwProgresso linear both;animation-timeline:scroll(root block)}
}
@keyframes bwProgresso{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  @view-transition{navigation:none}
  .progresso-leitura{display:none}
}

/* Carrossel dentro do cartão de nível 1 em /solucoes/: ocupa a célula inteira
   do grid, sem margem (a margem padrão do carrossel existe para quando ele fica
   solto no fluxo, não encaixado como metade de um cartão). */
.n1-foto{display:flex;min-width:0}
.n1-foto .carrossel{margin-top:0;border:0;width:100%;height:100%}
.n1-foto .js-carrossel{min-height:300px}

/* Par de serviços que fecha a grade da home. GRID DE UMA COLUNA, não flex com
   flex-basis: com "flex:1 1 220px" o resumo encolhia até recortar no meio de
   uma palavra e, quando o cartão esticava para fechar a linha, sobrava um vão
   alto embaixo. Em grid o nome ocupa a primeira linha, resumo e "ver serviço"
   a segunda, e nada recorta porque nenhuma faixa depende de base em px. */
.card-par{background:#fff;padding:26px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:baseline;color:var(--marinho,#0B1B33)}
.card-par:hover{background:var(--base,#F4F5F7)}
.card-par-nome{grid-column:1 / -1;font-family:var(--display,'Archivo',sans-serif);font-weight:800;font-size:17px;color:var(--marinho,#0B1B33)}
.card-par-resumo{font-size:14.5px;line-height:1.6;color:var(--texto,#4B5563);min-width:0}
.card-par-ver{font-family:var(--display,'Archivo',sans-serif);font-weight:700;font-size:13.5px;color:var(--azul,#1D4F8C);white-space:nowrap}
@media (max-width:639px){
  .card-par{grid-template-columns:minmax(0,1fr)}
  .card-par-ver{white-space:normal}
}

/* ---------- Painel de setor: foto + gradiente de proteção (igual ao design) ----------
   A caixa cinza chapada era divergência: o design usa foto do setor em
   full-bleed com o gradiente marinho entrando pela direita, e o texto sobre a
   faixa escura. Sem a foto o painel esticava cinza até a altura da coluna de 11
   abas e deixava um vão enorme. O texto fica em 54% para não invadir a zona
   clara do gradiente, onde perderia contraste. */
.setor-painel{position:relative;overflow:hidden;padding:0;min-height:380px}
.setor-foto{position:absolute;inset:0;background:var(--apoio,#DCE6F2) center/cover no-repeat}
.setor-protecao{position:absolute;inset:0;background:linear-gradient(270deg,rgba(11,27,51,.95) 0%,rgba(11,27,51,.95) 54%,rgba(11,27,51,.6) 68%,rgba(11,27,51,0) 82%)}
.setor-texto{position:relative;min-height:380px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;text-align:right;padding:44px 40px;min-width:0;max-width:54%;margin-left:auto;color:#fff}
.setor-texto h3{color:#fff}
.setor-texto p{color:var(--texto-dark,#B8C2CE);max-width:46ch}
.setor-texto strong{color:#fff}
.setor-texto .eyebrow{color:var(--texto-dark-fraco,#8FA0B5)}
.setor-link{display:inline-block;margin-top:20px;font-family:var(--display,'Archivo',sans-serif);font-weight:700;font-size:14.5px;color:#fff}
.setor-link:hover{color:var(--texto-dark,#B8C2CE)}
/* Abaixo de 1000px o painel vira coluna cheia: 54% deixaria a linha com ~24
   caracteres, e o gradiente lateral não faz sentido sem largura. */
@media (max-width:999px){
  .setor-texto{max-width:100%;align-items:flex-start;text-align:left;min-height:300px}
  .setor-protecao{background:linear-gradient(180deg,rgba(11,27,51,.55) 0%,rgba(11,27,51,.95) 60%)}
}

/* Contêiner na proporção real das fotos — nada recortado. Com altura fixa e
   largura livre o contêiner ficava em ~2.9:1 contra fotos 4:3, descartando mais
   de metade da altura de cada uma. A proporção é medida do primeiro arquivo em
   bikows_carrossel e chega aqui como --carrossel-prop. O min-height continua
   como piso, para o bloco não colapsar antes das imagens carregarem. */
.carrossel[style*="--carrossel-prop"]{aspect-ratio:var(--carrossel-prop)}
.carrossel[style*="--carrossel-prop"] .carrossel-slide img{width:100%;height:100%;object-fit:cover}
/* O contador saía sobre a legenda: agora fica no canto oposto. */
.carrossel-contador{left:auto;right:12px;bottom:12px}