/* EngProcess — sistema visual do site (prévia)
   Baseado no Manual da Marca EngProcess, Edição 2 · 2026.
   Design definitivo escolhido em 19/09/2026: herói dividido, nav e conteúdo claros
   ("versão B" da rodada de comparação). Usado por todas as páginas do site.

   Regra de contraste que governa este arquivo inteiro (manual pág. 13):
   - Ciano (#00A3E0) sobre branco mede 2,9:1 — abaixo do mínimo de 4,5:1 para texto.
     Por isso ciano NUNCA é cor de texto sobre fundo claro. Só aparece como fundo de
     botão/chip (com texto azul por cima, 5,2:1, ok), borda decorativa, ícone, ou
     texto sobre fundo azul institucional (5,2:1, ok).
   - Grafite sobre azul institucional mede 1,8:1 — proibido (manual pág. 13/16).
     Em qualquer bloco de fundo escuro, texto secundário usa cinza claro, nunca grafite. */

@import url('tokens.css');

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--branco);color:var(--grafite);font-family:var(--fonte);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* só H1/H2 carregam a cor da marca — H3/H4 em grafite escuro (8,5:1 sobre branco, manual
   pág. 13). É o principal freio para o "muito azul": título de cada scope-item, segmento e
   etapa aparece dezenas de vezes por página, e repetir a cor de marca em cada um pesa a
   página inteira sem ganhar hierarquia. */
h1,h2,h3,h4{font-weight:700;line-height:1.15;margin:0;color:var(--grafite)}
h1,h2{color:var(--azul)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:88px 0}
@media (max-width:720px){section{padding:56px 0}}

/* respeita quem pediu menos movimento na tela */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;scroll-behavior:auto !important}
}

/* ---------- tipografia ---------- */
h1{font-weight:800;letter-spacing:-0.01em;font-size:clamp(32px,4.4vw,50px)}
h2{font-weight:700;font-size:clamp(25px,3.1vw,34px);letter-spacing:-0.005em}
h3{font-weight:700;font-size:19px}
.lead{color:var(--grafite);font-size:18px;max-width:58ch;line-height:1.55}
/* utilitário para blocos ocasionais em fundo escuro (ex.: bandas de destaque) */
.on-dark, .on-dark p, .on-dark .lead{color:var(--cinza-claro)}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4{color:var(--branco)}

/* ---------- botões ----------
   CTA é o elemento que mais precisa se destacar na página — por isso é o ÚNICO lugar do site
   com fundo cheio de ciano: como o resto da página usa muito mais azul e neutro do que ciano,
   um botão ciano é o elemento mais "diferente" na tela, e é isso que chama o clique. Texto do
   botão em azul (nunca branco: ciano+branco mede 2,9:1, abaixo do mínimo — manual pág. 13).
   Formato pill (cantos totalmente arredondados) reforça "isto é uma ação", distinto do
   arredondamento mais discreto dos cards e fotos. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 30px;border-radius:var(--radius-pill);font-weight:800;font-size:15.5px;
  border:1.5px solid transparent;cursor:pointer;line-height:1.2;white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ciano);color:var(--texto-sobre-ciano);box-shadow:0 10px 24px -8px rgba(11,36,91,.45)}
.btn-primary:hover{background:var(--ciano-600);transform:translateY(-1px);box-shadow:0 14px 28px -8px rgba(11,36,91,.5)}
.btn-secondary{background:var(--branco);color:var(--azul);border-color:var(--azul)}
.btn-secondary:hover{background:var(--azul);color:var(--branco)}
/* fundo transparente é o que falta pro botão funcionar: sem isto, herdava o branco do
   .btn-secondary padrão e virava texto branco sobre fundo branco — invisível (achado ao testar
   o aviso de cookies, único lugar do site que combina .on-dark com .btn-secondary até agora). */
.on-dark .btn-secondary{background:transparent;color:var(--branco);border-color:var(--branco)}
.on-dark .btn-secondary:hover{background:var(--branco);color:var(--azul)}
.btn svg{flex:0 0 auto}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.micro{font-size:13px;color:var(--grafite);margin-top:14px}
.on-dark .micro{color:var(--cinza-claro)}

/* ---------- barra de contato (rola com a página, não é sticky — só o header abaixo é) ---------- */
.utility-bar{background:var(--azul);padding:9px 0}
.utility-bar .wrap{display:flex;gap:26px;justify-content:flex-end;align-items:center}
.utility-bar a{font-size:12.5px;font-weight:600;color:var(--cinza-claro);display:inline-flex;align-items:center;gap:6px}
.utility-bar a:hover{color:var(--branco)}
@media (max-width:640px){.utility-bar{display:none}}

/* ---------- header ----------
   Fundo levemente cinza (não branco puro) pra ler como uma faixa só, junto com a barra de
   contato acima — o topo inteiro (menu + contato) fica visualmente separado do conteúdo
   branco da página, sem acrescentar mais azul escuro à tela. */
header.site{position:sticky;top:0;z-index:40;background:var(--superficie);
  border-bottom:1px solid var(--linha)}
/* position+z-index aqui garante que a barra do cabeçalho sempre pinte por cima da gaveta
   mobile, que é filha do próprio <header> (senão o z-index do <header> não vale nada:
   dentro do seu próprio contexto de empilhamento, ganha quem tem z-index, não o pai). */
header.site .wrap{position:relative;z-index:2;display:flex;align-items:center;gap:24px;height:84px;max-width:var(--maxw)}
.logo-link{display:flex;align-items:center;height:48px;flex-shrink:0}
.logo-link img{height:100%;width:auto;flex-shrink:0;object-fit:contain}
@media (max-width:480px){header.site .wrap{height:72px}.logo-link{height:40px}}

/* ---------- navegação desktop ---------- */
.nav-main{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav-main a.nav-link{font-size:14.5px;font-weight:600;color:var(--azul)}
.nav-main a.nav-link:hover{color:var(--azul-600)}
@media (max-width:860px){.nav-main{display:none}}

.nav-dropdown{position:relative}
.nav-trigger{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;
  cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--azul)}
.nav-trigger:hover{color:var(--azul-600)}
.nav-trigger .chevron{font-size:10px;transition:transform .15s ease;display:inline-block}
.nav-trigger[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.dropdown-panel{position:absolute;top:calc(100% + 18px);left:50%;min-width:340px;
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--radius-md);
  box-shadow:0 20px 36px -16px rgba(11,36,91,.28);padding:10px;display:grid;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,4px);transition:opacity .15s ease, transform .15s ease, visibility .15s}
.nav-dropdown.open .dropdown-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.dropdown-panel a{padding:11px 14px;border-radius:3px;font-size:14.5px;font-weight:600;color:var(--azul)}
.dropdown-panel a:hover{background:var(--superficie)}
/* abre ao passar o mouse (sem clique); o ::before cobre o vão de 18px entre o botão e o painel */
@media (hover:hover) and (pointer:fine){
  .nav-dropdown:hover .dropdown-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
  .nav-dropdown:hover .nav-trigger .chevron{transform:rotate(180deg)}
  .dropdown-panel::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
}

/* ---------- hambúrguer + menu mobile ---------- */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;
  background:none;border:none;padding:0;margin-left:auto;cursor:pointer}
.hamburger span{display:block;width:100%;height:2px;background:var(--azul);border-radius:1px;
  transition:transform .2s ease, opacity .2s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:860px){.hamburger{display:flex}}

/* "top" é definido em JS a partir da altura real do cabeçalho (varia com o aviso de prévia
   e com o quanto o texto do menu quebra linha) — o valor abaixo é só o estado inicial. */
.mobile-menu{position:fixed;top:84px;left:0;right:0;bottom:0;z-index:39;background:var(--branco);
  padding:8px 24px 32px;overflow-y:auto;transform:translateX(100%);transition:transform .22s ease;
  display:none}
.mobile-menu.open{transform:translateX(0)}
@media (max-width:860px){.mobile-menu{display:block}}
.mobile-menu a.nav-link, .mobile-group-trigger{display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:18px 0;border-bottom:1px solid var(--linha);border-left:none;border-right:none;border-top:none;
  font-size:17px;font-weight:600;color:var(--azul);background:none;text-align:left;cursor:pointer;font-family:inherit}
.mobile-group-trigger .chevron{font-size:12px;transition:transform .15s ease}
.mobile-group.open .mobile-group-trigger .chevron{transform:rotate(180deg)}
.mobile-group-panel{display:none;padding:2px 0 12px 8px}
.mobile-group.open .mobile-group-panel{display:block}
.mobile-group-panel a{display:block;padding:11px 0;font-size:15px;font-weight:500;color:var(--grafite)}
.mobile-menu .cta-block{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.mobile-menu .btn{width:100%}

/* ---------- placeholders de imagem (sem foto real ainda) ---------- */
.placeholder{position:relative;border-radius:var(--radius-md);overflow:hidden;
  background:linear-gradient(135deg, var(--superficie) 0%, #EAEDEE 100%);
  border:1px solid var(--linha);display:flex;align-items:center;justify-content:center}
.placeholder .tag{background:var(--branco);border:1px solid var(--linha);border-radius:2px;
  padding:10px 14px;font-size:12px;color:var(--grafite);text-align:center;line-height:1.5;max-width:80%}
.on-dark .placeholder{background:linear-gradient(135deg, #123471 0%, #0B245B 60%, #081A42 100%);
  border-color:rgba(255,255,255,.18)}
.on-dark .placeholder .tag{background:rgba(11,36,91,.55);border-color:rgba(255,255,255,.25);color:var(--cinza-claro)}

/* ---------- foto real (substitui .placeholder quando a imagem existe) ---------- */
.photo{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--radius-md)}

/* símbolo gráfico decorativo (barras) usado como motivo visual, não como logotipo */
.bars-motif{position:absolute;display:flex;align-items:flex-end;gap:10%;opacity:.85}
.bars-motif i{display:block;border-radius:2px;background:var(--ciano)}
.bars-motif i:nth-child(1),.bars-motif i:nth-child(2){background:rgba(255,255,255,.28)}
/* decorativo: fora do caminho de leitura só a partir de tablet; no celular colidiria com o texto */
@media (max-width:760px){.bars-motif{display:none}}

/* ---------- 01 · hero — herói dividido ---------- */
.hero{padding:64px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:32px}}
.hero h1{margin-bottom:16px}
.hero-visual{aspect-ratio:4/5;position:relative}
.hero-visual .bars-motif{right:14%;bottom:14%;height:38%;width:40%}
.hero-visual .bars-motif i:nth-child(1){width:26%;height:55%}
.hero-visual .bars-motif i:nth-child(2){width:26%;height:55%}
.hero-visual .bars-motif i:nth-child(3){width:26%;height:100%;background:var(--azul)}

/* ---------- 02 · faixa de plataformas / componentes ---------- */
.platforms{background:var(--superficie);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
  padding:36px 0}
.platform-row{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin-bottom:14px}
.platform-row:last-child{margin-bottom:0}
.platform-row .k{flex:0 0 132px;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--azul)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--ciano-tint);border-radius:var(--radius-pill);padding:7px 15px;
  font-size:13.5px;font-weight:700;color:var(--azul)}
@media (max-width:640px){.platform-row{flex-direction:column;gap:6px}.platform-row .k{flex:none}}

/* ---------- 03 · situações ---------- */
.situations .lead{margin-bottom:32px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-4{grid-template-columns:1fr}}
.card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--radius-md);
  padding:22px;display:flex;flex-direction:column;gap:8px;border-top:3px solid var(--azul);
  transition:border-color .15s, transform .15s, box-shadow .15s}
a.card:hover{transform:translateY(-3px);box-shadow:0 12px 24px -12px rgba(11,36,91,.28)}
.card h3{font-size:16.5px}
.card p{color:var(--grafite);font-size:14.5px}
.card .lk{margin-top:auto;color:var(--azul);font-weight:700;font-size:14px}

/* ---------- 04 · escopo ---------- */
.scope .subhead{margin-bottom:36px}
.scope-row{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start;margin-bottom:8px}
@media (max-width:900px){.scope-row{grid-template-columns:1fr}}
.scope-item{margin-bottom:28px}
.scope-item:last-child{margin-bottom:0}
.scope-item h3{margin-bottom:8px}
.scope-item p{color:var(--grafite)}
.scope-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:40px 0}
@media (max-width:900px){.scope-grid3{grid-template-columns:1fr;gap:26px}}
.scope-highlight{background:var(--superficie);border-left:3px solid var(--ciano);
  border-radius:0 var(--radius-md) var(--radius-md) 0;padding:26px 28px}
.scope-highlight h3{margin-bottom:8px}
.scope-highlight p{color:var(--grafite)}

/* ---------- 05 · dados / bloco de apoio com card lateral ---------- */
.data-row{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start;margin-top:24px}
@media (max-width:900px){.data-row{grid-template-columns:1fr}}
.note{color:var(--grafite);font-size:15px;margin-top:16px;padding-left:16px;border-left:3px solid var(--linha)}
.side-card{background:var(--azul-tint);border-left:3px solid var(--azul);
  border-radius:0 var(--radius-md) var(--radius-md) 0;padding:22px;margin-top:24px}
.side-card h4{font-size:15px;margin-bottom:8px}
.side-card p{color:var(--grafite);font-size:14px;margin-bottom:12px}
.side-card .lk{color:var(--azul);font-weight:700;font-size:14px}

/* ---------- 06 · como trabalhamos ---------- */
.steps{margin-top:32px;border-top:1px solid var(--linha)}
.step{display:grid;grid-template-columns:44px 1.3fr 1fr;gap:16px;padding:20px 0;
  border-bottom:1px solid var(--linha);align-items:baseline}
@media (max-width:720px){.step{grid-template-columns:32px 1fr}}
.step .n{font-weight:800;color:var(--azul);font-size:20px}
.step h4{font-size:15.5px;margin-bottom:4px}
.step p{color:var(--grafite);font-size:14.5px}
.step .deliverable{font-size:13px;font-weight:600;color:var(--azul-600);padding-top:3px}
@media (max-width:720px){.step .deliverable{grid-column:2}}

/* bloco de destaque cheio (referência Creaform: bloco de citação em cor sólida) */
.band{background:var(--superficie);border-left:4px solid var(--ciano);
  border-radius:0 var(--radius-md) var(--radius-md) 0;padding:26px 30px;margin-top:32px}
.band p{color:var(--grafite);font-size:18px;line-height:1.5;font-weight:700;max-width:70ch}

/* ---------- 07 · segmentos ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-3{grid-template-columns:1fr}}
.segment-card{background:var(--superficie);border-radius:var(--radius-md);padding:20px;border-top:3px solid var(--linha)}
.segment-card h3{font-size:15.5px;margin-bottom:6px}
.segment-card p{color:var(--grafite);font-size:14px}

/* ---------- 08 · case ----------
   Estrutura: título > situação > números em destaque (prova rápida, de relance) > escopo,
   em prosa ou em etapas numeradas quando o projeto tiver uma sequência de execução clara. */
.case-card{padding:32px 0}
.case-card + .case-card{border-top:1px solid var(--linha)}
.case-card h3{font-size:18px;margin-bottom:4px}
.case-row{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start;margin-top:20px}
@media (max-width:900px){.case-row{grid-template-columns:1fr}}
.case-row .photo{align-self:start}

.case-field .k{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--azul);margin-bottom:6px}
.case-field{margin-bottom:20px}
.case-field p{color:var(--grafite)}
.case-field ul{margin-top:4px}
.case-field li{color:var(--grafite);padding-left:16px;position:relative;margin-bottom:6px}
.case-field li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;
  border-radius:50%;background:var(--ciano)}

/* números em destaque: única cor de leitura desviante é o próprio azul do H1/H2 — o ganho de
   "número grande" já vem do tamanho e do peso, não precisa de outra cor pra chamar atenção. */
.case-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:22px 0 26px;
  padding:22px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
@media (max-width:640px){.case-stats{grid-template-columns:1fr;gap:16px;text-align:left}}
.case-stat strong{display:block;font-size:30px;font-weight:800;color:var(--azul);line-height:1.05;
  letter-spacing:-0.01em}
.case-stat span{display:block;font-size:13px;color:var(--grafite);margin-top:5px;line-height:1.4}

.case-steps{margin-top:6px;counter-reset:case-step}
.case-steps li{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--linha)}
.case-steps li:last-child{border-bottom:none;padding-bottom:0}
.case-steps .n{counter-increment:case-step;font-weight:800;color:var(--branco);background:var(--azul);
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;margin-top:1px}
.case-steps strong{display:block;font-size:14.5px;color:var(--grafite);margin-bottom:2px}
.case-steps p{font-size:14px;color:var(--grafite)}

.pendente{border:1px dashed #B08A2A;background:#FBF6E4;color:#5c4a05;
  border-radius:2px;padding:10px 12px;font-size:14px}
.case-nota{font-size:12.5px;color:var(--grafite);margin-top:16px;padding-top:12px;
  border-top:1px dashed var(--linha)}

/* ---------- 09 · FAQ ---------- */
.faq{border-top:1px solid var(--linha)}
.faq-item{border-bottom:1px solid var(--linha)}
.faq-item summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:700;font-size:16px;color:var(--grafite);
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--ciano);font-size:26px;font-weight:700;flex:0 0 auto}
.faq-item[open] summary::after{content:"\2212"}
.faq-item .a{color:var(--grafite);padding:0 0 22px;max-width:72ch}
.faq-flag{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:#5c4a05;background:#FBF6E4;border-radius:2px;padding:3px 7px;vertical-align:middle}

/* ---------- 10 · conversão + formulário ---------- */
.convert{background:var(--superficie)}
.convert .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
@media (max-width:900px){.convert .wrap{grid-template-columns:1fr}}
.convert-panel{background:var(--branco);border:1px solid var(--linha);border-radius:var(--radius-md);padding:28px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--azul)}
.field input,.field select,.field textarea{width:100%;padding:12px 13px;border:1px solid var(--linha);
  border-radius:2px;font-family:var(--fonte);font-size:15px;background:var(--branco);color:var(--grafite)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--azul);outline-offset:1px}
.field textarea{resize:vertical;min-height:84px}
.field-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--grafite);margin:18px 0}
.field-check input{margin-top:3px}
.field-check a{color:var(--azul);text-decoration:underline}
.form-msg{margin-top:12px;font-size:14px}
.form-msg.ok{color:var(--azul)}
/* botão de envio: estado "Enviando…" com indicador girando enquanto o servidor responde */
.btn.enviando{cursor:progress;opacity:.85;transform:none}
.btn.enviando::before{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.enviando::before{animation:none}}

/* ---------- 11 · relacionados ---------- */
.related h2{margin-bottom:24px}

/* ---------- home · grid de 6 cards de serviço ----------
   Cabeçalho de cada card usa o mesmo componente .placeholder do resto do site (mesma trama
   de "foto pendente"), pra ficar consistente e pronto pra receber a foto real do mesmo jeito
   que qualquer outra imagem do site — sem inventar um tratamento exclusivo da home. */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
@media (max-width:980px){.service-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.service-grid{grid-template-columns:1fr}}
.service-card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--radius-md);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
a.service-card:hover{transform:translateY(-4px);box-shadow:0 20px 34px -16px rgba(11,36,91,.32);border-color:var(--azul)}
/* min-height:0 desfaz o mínimo automático do flex item: sem isto, uma imagem de origem mais
   "quadrada" que a proporção alvo empurra a caixa mais alta que as vizinhas na mesma fileira —
   proporção do card variava por post mesmo com aspect-ratio fixo (confirmado com Playwright). */
.service-card-head{position:relative;aspect-ratio:4/3;border-radius:0;min-height:0}
.service-card-head .num{position:absolute;top:14px;left:14px;z-index:1;background:var(--branco);
  border:1px solid var(--linha);border-radius:2px;padding:3px 9px;
  font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--azul)}
.service-card-body{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
/* seção "posts mais recentes" (home + páginas de serviço, ver src/build-blog-recentes.js): capa
   real de cada post, proporções variadas — recorte uniforme 16:10 igual ao usado no blog em si
   (blog.css .blog-lista), que essas páginas não carregam. */
.blog-recentes .service-card-head{aspect-ratio:16/10}
.blog-recentes .service-card-head img{width:100%;height:100%;object-fit:cover;border-radius:0}
.service-card h3{font-size:18.5px;line-height:1.25}
.service-card p{color:var(--grafite);font-size:14.5px}
.service-card .lk{margin-top:auto;color:var(--azul);font-weight:700;font-size:14px}

/* ---------- 12 · páginas legais (política de privacidade, política de cookies) ----------
   Sem hero nem CTA de conversão — é texto de referência, não página de venda. Largura de
   leitura restrita (68ch) em vez do .wrap cheio de 1200px, texto corrido fica ilegível
   nessa largura. Hierarquia h2/h3 simples, sem repetir os componentes de venda do resto do site. */
.legal{max-width:68ch}
.legal h2{font-size:22px;margin-top:44px}
.legal h2:first-of-type{margin-top:28px}
.legal h3{font-size:16.5px;margin-top:26px}
.legal p{color:var(--grafite);line-height:1.7;margin-top:14px}
.legal ul,.legal ol{margin-top:14px;padding-left:22px}
.legal ul{list-style:disc}
.legal ol{list-style:decimal}
.legal li{color:var(--grafite);line-height:1.7;margin-bottom:8px;padding-left:4px}
.legal a{color:var(--azul);text-decoration:underline}
.legal-updated{font-size:13.5px;color:var(--grafite);margin-top:48px;padding-top:20px;border-top:1px solid var(--linha)}

/* ---------- 13 · aviso de cookies ----------
   Barra fixa no rodapé da viewport, mostrada uma vez (localStorage) até o visitante decidir.
   z-index acima da .mobile-bar (50) pra nunca ficar por baixo dela. A variável
   --cookie-banner-h é escrita por cookie-consent.js e lida pela .mobile-bar, pra a barra do
   WhatsApp nunca desenhar por cima do aviso de cookies em telas pequenas. */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--azul);
  padding:20px 0;box-shadow:0 -4px 24px rgba(0,0,0,.18);
  transform:translateY(100%);visibility:hidden;
  transition:transform .3s ease, visibility 0s linear .3s}
.cookie-banner.show{transform:translateY(0);visibility:visible;transition:transform .3s ease}
.cookie-banner-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.cookie-banner p{color:var(--cinza-claro);font-size:13.5px;line-height:1.6;margin:0;flex:1 1 420px}
.cookie-banner a{color:var(--branco);text-decoration:underline}
.cookie-banner-actions{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}
.cookie-banner-actions .btn{padding:11px 20px;font-size:13.5px}
@media (max-width:640px){.cookie-banner-inner{flex-direction:column;align-items:stretch}
  .cookie-banner p{flex:none}
  .cookie-banner-actions{flex-direction:column}}

/* ---------- rodapé ----------
   Fundo escuro (pedido de 20/09/2026). Sem a versão negativa (branca) da logomarca, que não
   foi anexada ainda, o rodapé usa o símbolo isolado + nome em texto — o manual permite símbolo
   isolado (pág. 7) desde que a assinatura completa apareça em outro ponto da mesma peça, e ela
   aparece no cabeçalho, sempre claro. NAP (nome, endereço, telefone) fica num bloco só. */
footer.site{background:var(--azul);color:var(--cinza-claro);padding:52px 0 0}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.footer-brand img{height:44px;width:auto}
.footer-brand strong{color:var(--branco);font-size:18px;font-weight:800}
footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;padding-bottom:32px}
@media (max-width:760px){footer.site .wrap{grid-template-columns:1fr;gap:28px}}
footer.site h4{color:var(--branco);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px}
footer.site p, footer.site a{font-size:14px;color:var(--cinza-claro);line-height:1.8}
footer.site a:hover{color:var(--branco)}
.footer-nap p{margin-bottom:2px}
.footer-bottom{max-width:var(--maxw);margin:0 auto;padding:20px 24px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;color:rgba(188,190,192,.85);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.footer-legal-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-cookie-btn{background:none;border:none;padding:0;margin:0;font:inherit;
  font-size:12.5px;color:rgba(188,190,192,.85);cursor:pointer}
.footer-cookie-btn:hover{color:var(--branco)}

/* ---------- barra fixa mobile ----------
   bottom usa a variável escrita por cookie-consent.js: 0 por padrão, altura do aviso de
   cookies enquanto ele estiver visível (ver seção 13, acima). */
.mobile-bar{position:fixed;left:0;right:0;bottom:var(--cookie-banner-h,0px);z-index:50;background:var(--azul);
  display:none;align-items:center;justify-content:center;gap:9px;padding:15px 16px;
  color:var(--branco);font-weight:700;font-size:15px;
  transform:translateY(100%);transition:transform .2s ease, bottom .2s ease}
.mobile-bar.show{transform:translateY(0)}
@media (max-width:760px){.mobile-bar{display:flex}}

/* Link dentro do texto das páginas de serviço (relatório nº 5, 25/10/2026). O reset geral deixa
   todo <a> com a cor do texto e sem sublinhado; link no meio de parágrafo precisa aparecer. Azul
   institucional sobre branco mede 15:1. */
.link-texto{color:var(--azul);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.link-texto:hover{color:var(--azul-600)}

/* CTA de WhatsApp em verde (Hélio, 25/10/2026). Vale para todo link com data-whatsapp que é botão
   (topo, menu, herói, fechamento, blog, contato) e para a barra fixa do celular. Vem depois das regras
   de .btn-primary, .btn-secondary e .on-dark para ganhar delas sem !important. O número de telefone
   da página de contato é link de texto e fica como está: verde sobre branco mede 2,0:1.
   Os valores repetidos como reserva em var() cobrem o tokens.css antigo no cache do Cloudflare. */
.btn[data-whatsapp],.on-dark .btn[data-whatsapp],.mobile-bar[data-whatsapp]{
  background:var(--whatsapp,#25D366);color:var(--texto-sobre-whatsapp,#111B21);border-color:var(--whatsapp,#25D366);
  box-shadow:0 10px 24px -8px rgba(17,27,33,.35)}
.btn[data-whatsapp]:hover,.on-dark .btn[data-whatsapp]:hover{
  background:var(--whatsapp-600,#1EBE5A);border-color:var(--whatsapp-600,#1EBE5A);color:var(--texto-sobre-whatsapp,#111B21)}

/* ---------- utilitário: nota de preview ---------- */
.preview-flag{background:#5c4a05;color:#fff;text-align:center;font-size:12.5px;
  letter-spacing:.02em;padding:8px 12px}
.preview-flag a{color:#fff;text-decoration:underline}