/* ============================================================
   DESIGN SYSTEM — GESTÃO SITE
   Dark Premium · Minimalismo · Conversão
   Tokens idênticos ao da landing original. Nada aqui muda a identidade;
   os componentes novos (breadcrumb, artigo, tabela) apenas a estendem.
   ============================================================ */
:root{
  --preto-absoluto:#050505;
  --preto-grafite:#0E0E10;
  --cinza-escuro:#1A1A1D;
  --branco:#FFFFFF;

  --laranja:#FF5A1F;
  --laranja-2:#FF7A1A;
  --laranja-3:#FF9348;
  --gradiente:linear-gradient(135deg,#FF5A1F 0%,#FF7A1A 55%,#FF9348 100%);

  --cinza-claro:#BDBDBD;
  --cinza-medio:#969696;
  --cinza-borda:#343434;
  --verde:#22C55E;
  --vermelho:#EF4444;

  --bg:#050505;
  --bg-2:#0D0D0D;
  --card:#111111;
  --premium:radial-gradient(circle at 50% 0%,#4A1807 0%,#170D09 45%,#050505 78%);

  /* Texto sobre laranja: quase-preto garante 6,5:1 (WCAG AA). Branco daria 3,1:1 e reprovaria. */
  --sobre-laranja:#0A0503;

  --s-8:8px; --s-16:16px; --s-24:24px; --s-32:32px; --s-48:48px;
  --s-64:64px; --s-96:96px; --s-128:128px; --s-160:160px;
  /* 160px entre seções deixava buracos pretos enormes em telas largas.
     128px continua dentro da faixa 120~160 do design system. */
  --secao:clamp(64px,8vw,128px);

  --r-btn:18px; --r-card:28px; --r-input:16px; --r-img:24px; --r-badge:999px;

  --sombra:0 10px 30px rgba(0,0,0,.35);
  --glow:0 0 50px rgba(255,90,31,.30);

  --borda:1px solid rgba(255,255,255,.06);
  --borda-card:1px solid rgba(255,255,255,.05);

  --container:1280px;
  --gap:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--branco);
  font-family:'General Sans','Satoshi','Neue Montreal','Manrope','Plus Jakarta Sans',
              system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:18px;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;border-radius:var(--r-img)}
svg{display:block}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

h1,h2,h3,h4,h5,h6{margin:0;font-weight:700}
/* Escala reduzida em relação ao topo do design system (72/56): a 72px o H1 quebrava
   em 4 linhas e dominava a dobra. Mesma hierarquia, mesmos pesos e tracking. */
h1{font-size:clamp(34px,5.2vw,56px);line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:clamp(26px,3.8vw,42px);line-height:1.14;letter-spacing:-.03em}
h3{font-size:clamp(26px,3.4vw,40px);font-weight:600;line-height:1.1;letter-spacing:-.025em}
h4{font-size:clamp(22px,2.6vw,30px);font-weight:600;line-height:1.2;letter-spacing:-.02em}
h5{font-size:24px;font-weight:600;line-height:1.3}
h6{font-size:20px;font-weight:600;line-height:1.4}

.corpo-grande{font-size:20px;line-height:1.6}
.legenda{font-size:14px;color:var(--cinza-claro)}
.secundario{color:var(--cinza-claro)}

.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--s-24)}

/* Coluna de leitura alinhada à ESQUERDA, na mesma sarjeta do hero e do menu.
   Centralizar só o texto (max-width + margin auto) fazia o corpo do artigo flutuar
   no meio da tela enquanto o hero ficava à esquerda — parecem duas páginas coladas. */
.container-texto{max-width:var(--container)}
.container-texto > *{max-width:78ch}
.container-texto > .tabela-wrap,
.container-texto > .cta-inline{max-width:900px}

section{padding-block:var(--secao)}
.secao-compacta{padding-block:clamp(48px,6vw,80px)}

/* O limite de medida vai em cada elemento, nunca no contêiner:
   'ch' é relativo à fonte do PRÓPRIO elemento. Um max-width em ch na div
   (fonte 18px) limitaria o h2 (fonte 56px) a ~230px — uma palavra por linha. */
.section-head{max-width:100%}
.section-head h2{max-width:20ch;text-wrap:balance}
.section-head.centro{margin-inline:auto;text-align:center}
.section-head.centro h2{margin-inline:auto}
.section-head p{margin-top:var(--s-24);color:var(--cinza-claro);max-width:58ch}
.section-head.centro p{margin-inline:auto}

.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:var(--r-badge);
  border:1px solid rgba(255,90,31,.28);background:rgba(255,90,31,.07);
  color:var(--laranja-3);
  font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:var(--s-24);
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--laranja);flex:none}
.hero .badge{margin-bottom:clamp(12px,2vh,20px)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:60px;padding:0 36px;
  border:none;border-radius:var(--r-btn);
  font:inherit;font-size:17px;font-weight:600;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,border-color .25s ease;
}
.btn-primario{background:var(--gradiente);color:var(--sobre-laranja)}
.btn-primario:hover,.btn-primario:focus-visible{transform:scale(1.03);box-shadow:var(--glow)}
.btn-secundario{background:transparent;color:var(--branco);border:1px solid #3A3A3A}
.btn-secundario:hover,.btn-secundario:focus-visible{background:#141414;border-color:var(--cinza-claro);transform:scale(1.03)}
.btn-icone{
  width:28px;height:28px;flex:none;border-radius:50%;
  background:var(--branco);color:var(--sobre-laranja);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .25s ease;
}
.btn-icone svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn:hover .btn-icone{transform:translateX(4px)}
.btn-secundario .btn-icone{background:var(--branco);color:var(--preto-absoluto)}

.acoes{display:flex;flex-wrap:wrap;gap:var(--s-16);margin-top:var(--s-48)}
.acoes.centro{justify-content:center}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--laranja-3);outline-offset:3px;border-radius:6px;
}
.skip{
  position:absolute;left:var(--s-16);top:-100px;z-index:200;
  background:var(--laranja);color:var(--sobre-laranja);
  padding:14px 22px;border-radius:var(--r-btn);font-weight:600;text-decoration:none;
  transition:top .2s ease;
}
.skip:focus{top:var(--s-16)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(5,5,5,.78);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:var(--borda);
}
.nav{
  max-width:var(--container);margin:0 auto;padding:16px var(--s-24);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-24);
}
.marca{display:inline-flex;align-items:center;gap:12px;color:var(--branco);text-decoration:none;font-size:20px;font-weight:700;letter-spacing:-.02em}
.marca-logo{width:204px;height:40px;border-radius:0}
.marca-simbolo{
  width:38px;height:38px;flex:none;border-radius:11px;background:var(--gradiente);
  display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(255,90,31,.35);
}
.marca-simbolo svg{width:20px;height:20px;stroke:var(--sobre-laranja);stroke-width:2.4;fill:none;stroke-linecap:round}

.nav-links{display:flex;align-items:center;gap:var(--s-24)}
/* :not(.btn) — sem isso estas regras vencem .btn-primario por especificidade e destroem o botão */
.nav-links a:not(.btn){
  position:relative;color:var(--cinza-claro);text-decoration:none;
  font-size:15px;font-weight:500;padding:12px 2px;
  transition:color .2s ease;
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn):focus-visible,
.nav-links a:not(.btn)[aria-current="page"]{color:var(--branco)}
.nav-links a:not(.btn)::after{
  content:'';position:absolute;left:0;bottom:6px;width:100%;height:1.5px;
  background:var(--laranja);transform:scaleX(0);transform-origin:right;
  transition:transform .3s ease;
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn):focus-visible::after,
.nav-links a:not(.btn)[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* Submenu de serviços */
.tem-submenu{position:relative}
.submenu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:280px;padding:12px;
  background:var(--preto-grafite);border:var(--borda);border-radius:20px;
  box-shadow:var(--sombra);
  display:grid;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.tem-submenu:hover .submenu,
.tem-submenu:focus-within .submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.submenu a{
  padding:12px 16px !important;border-radius:12px;
  font-size:15px !important;color:var(--cinza-claro) !important;
  transition:background-color .2s ease,color .2s ease;
}
.submenu a::after{display:none !important}
.submenu a:hover{background:var(--cinza-escuro);color:var(--branco) !important}

.nav-cta{display:none}
.nav-cta.btn-primario{animation:none;box-shadow:0 6px 18px rgba(255,90,31,.20)}
.nav-cta.btn-primario:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 10px 28px rgba(255,90,31,.40)}

.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;flex:none;
  background:transparent;border:1px solid var(--cinza-borda);border-radius:14px;
  color:var(--branco);cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
}
.menu-btn:hover{background:#141414;border-color:var(--cinza-claro)}
.menu-btn svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.menu-btn .icone-fechar{display:none}
.menu-btn[aria-expanded="true"] .icone-abrir{display:none}
.menu-btn[aria-expanded="true"] .icone-fechar{display:block}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb{padding-top:var(--s-32);padding-bottom:0}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;list-style:none}
.breadcrumb a{color:var(--cinza-medio);text-decoration:none;transition:color .2s ease}
.breadcrumb a:hover{color:var(--laranja)}
.breadcrumb li[aria-current]{color:var(--cinza-claro)}
.breadcrumb .sep{color:var(--cinza-borda)}

/* ============================================================
   HERO
   ============================================================ */
/* Hero cabe na primeira dobra: ocupa a altura da janela menos o header.
   min-height (não height) — se o conteúdo crescer, ele rola em vez de ser cortado. */
.hero{
  position:relative;overflow:hidden;background:var(--premium);
  min-height:calc(100dvh - 71px);
  display:flex;align-items:center;
  padding-block:clamp(32px,5vh,64px);
}
.hero > .container{width:100%}
.hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;border-radius:0;pointer-events:none;opacity:.01;transition:opacity .35s ease}
.hero-video.pronto{opacity:1}
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 0%,rgba(255,90,31,.12),transparent 70%),
    linear-gradient(180deg,rgba(5,5,5,.74) 0%,rgba(5,5,5,.80) 55%,rgba(5,5,5,.95) 100%);
}
.hero .container{position:relative;z-index:2}
/* Coluna única: a segunda coluna do grid estava vazia (o vídeo é o fundo, não um mockup
   lateral) e espremia o texto pela metade — o H1 quebrava em 3 linhas e os botões empilhavam. */
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,var(--s-48))}
.hero h1{max-width:24ch}   /* ch no próprio h1 — a unidade acompanha a fonte certa */
.hero h1 .destaque{
  background:var(--gradiente);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--laranja-3);
}
.hero-lead{margin-top:clamp(16px,2.4vh,24px);font-size:clamp(18px,2.2vw,20px);max-width:52ch}
.hero-texto{margin-top:clamp(12px,1.8vh,20px);color:var(--cinza-claro);max-width:62ch}

/* Hero interno (páginas de serviço) — mesma linguagem, mais compacto */
.hero-interno{background:var(--premium);padding-block:var(--s-48) clamp(40px,5vw,64px);position:relative;overflow:hidden}
.hero-interno::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,rgba(255,90,31,.10),transparent 70%);
}
.hero-interno .container{position:relative;z-index:1}
.hero-interno h1{max-width:20ch;font-size:clamp(30px,4.4vw,48px)}

.hero .acoes{margin-top:clamp(20px,3vh,32px)}
.hero-indicadores{
  display:flex;flex-wrap:wrap;gap:var(--s-16) var(--s-32);
  margin-top:clamp(20px,3vh,32px);padding-top:clamp(16px,2.4vh,24px);
  border-top:var(--borda);
}
.home-confianca{padding-block:0;background:var(--preto)}
.home-confianca-grid{
  display:grid;grid-template-columns:repeat(3,1fr);border:var(--borda);
  border-radius:0 0 var(--r-card) var(--r-card);overflow:hidden;background:var(--card)
}
.home-confianca-grid > div{padding:24px clamp(20px,3vw,36px)}
.home-confianca-grid > div + div{border-left:var(--borda)}
.home-confianca-grid strong{display:block;color:var(--branco);font-size:17px}
.home-confianca-grid span{display:block;margin-top:5px;color:var(--cinza-claro);font-size:14px;line-height:1.45}
.escolha-servico{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:clamp(36px,5vw,56px)}
.escolha-item{display:flex;flex-direction:column;min-height:220px;padding:clamp(24px,3vw,34px);border:var(--borda-card);border-radius:var(--r-card);background:var(--card);color:var(--branco);transition:border-color .25s,transform .25s,box-shadow .25s}
.escolha-item:hover{transform:translateY(-5px);border-color:rgba(255,90,31,.32);box-shadow:var(--sombra)}
.escolha-item > span{color:var(--laranja-3);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.escolha-item strong{margin-top:10px;font-size:clamp(20px,2.2vw,26px);line-height:1.2}
.escolha-item p{margin-top:12px;color:var(--cinza-claro);font-size:16px}
.escolha-item small{margin-top:auto;padding-top:20px;color:var(--laranja-3);font-weight:700}
.rota-projeto{padding-block:0;background:var(--preto)}
.rota-projeto ol{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;border:var(--borda);border-radius:var(--r-card);overflow:hidden;background:var(--card);list-style:none}
.rota-projeto li{display:flex;gap:14px;padding:22px clamp(18px,2.6vw,30px)}
.rota-projeto li + li{border-left:var(--borda)}
.rota-projeto li > span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:var(--gradiente);color:var(--sobre-laranja);font-weight:800}
.rota-projeto strong,.rota-projeto small{display:block}
.rota-projeto small{margin-top:4px;color:var(--cinza-claro);font-size:13px;line-height:1.4}
.institucional-faixa{padding-block:0;background:var(--preto)}
.institucional-faixa dl{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border:var(--borda);border-radius:var(--r-card);overflow:hidden;background:var(--card)}
.institucional-faixa dl > div{padding:22px clamp(18px,2.5vw,30px)}
.institucional-faixa dl > div + div{border-left:var(--borda)}
.institucional-faixa dt{color:var(--cinza-medio);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.institucional-faixa dd{margin:6px 0 0;color:var(--branco);font-size:16px;font-weight:700}
.indicador{display:flex;align-items:center;gap:10px;color:var(--cinza-medio);font-size:14px}
.indicador svg{width:18px;height:18px;flex:none;stroke:var(--laranja);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   RESUMO EXECUTIVO — bloco pensado para extração por IA
   ============================================================ */
.resumo-executivo{
  background:var(--card);border:1px solid rgba(255,90,31,.22);border-radius:var(--r-card);
  padding:clamp(24px,3vw,36px);margin-top:var(--s-48);
}
.resumo-executivo h2{
  font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--laranja-3);margin-bottom:14px;
}
.resumo-executivo p{font-size:clamp(17px,2vw,19px);line-height:1.6;color:var(--branco)}

/* ============================================================
   CARDS
   ============================================================ */
.grid{display:grid;gap:var(--gap);margin-top:clamp(48px,6vw,var(--s-64))}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:var(--borda-card);border-radius:var(--r-card);
  padding:clamp(28px,3.2vw,40px);
  text-decoration:none;color:inherit;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.card:hover,.card:focus-within{
  transform:translateY(-8px);border-color:rgba(255,90,31,.35);
  box-shadow:var(--sombra),0 0 40px rgba(255,90,31,.16);
}
.card-icone{
  width:56px;height:56px;border-radius:16px;
  border:1px solid rgba(255,255,255,.10);background:var(--cinza-escuro);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-32);
  transition:border-color .3s ease,background-color .3s ease;
}
.card-icone svg{width:26px;height:26px;stroke:var(--branco);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease}
.card:hover .card-icone{border-color:rgba(255,90,31,.4);background:rgba(255,90,31,.08)}
.card:hover .card-icone svg{stroke:var(--laranja)}
.card h3{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.card p{margin-top:14px;color:var(--cinza-claro);font-size:17px;line-height:1.6}
.card-seta{margin-top:auto;padding-top:var(--s-24);display:inline-flex;align-items:center;gap:8px;color:var(--cinza-medio);font-size:15px;font-weight:600;transition:color .3s ease,transform .3s ease}
.card-seta svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card:hover .card-seta{color:var(--laranja);transform:translateX(6px)}

.portfolio-card{padding:0;overflow:hidden}
.portfolio-capa{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--cinza-escuro);border-bottom:var(--borda)}
.portfolio-capa img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.portfolio-card:hover .portfolio-capa img{transform:scale(1.035)}
.portfolio-conteudo{display:flex;flex:1;flex-direction:column;padding:clamp(24px,3vw,34px)}
.portfolio-tipo{display:block;margin-top:16px;color:var(--laranja-3);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.portfolio-aviso{margin-bottom:var(--s-32);padding:20px 24px;border:1px solid rgba(255,90,31,.3);border-radius:var(--r-input);background:rgba(255,90,31,.07)}
.portfolio-aviso strong{color:var(--laranja-3)}
.portfolio-aviso p{margin-top:6px;color:var(--cinza-claro);line-height:1.6}
.portfolio-orientacao{margin-bottom:var(--s-32);padding:22px 26px;border:var(--borda);border-radius:var(--r-input);background:var(--card)}
.portfolio-orientacao strong{color:var(--branco)}
.portfolio-orientacao p{margin-top:6px;color:var(--cinza-claro);font-size:16px}
.referencia-selecionada{margin-bottom:24px;padding:18px 20px;border:1px solid rgba(255,90,31,.3);border-radius:var(--r-input);background:rgba(255,90,31,.07)}
.referencia-selecionada span,.referencia-selecionada strong,.referencia-selecionada small{display:block}
.referencia-selecionada span{color:var(--laranja-3);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.referencia-selecionada strong{margin-top:5px;color:var(--branco)}
.referencia-selecionada small{margin-top:4px;color:var(--cinza-claro)}
.portfolio-destaque{margin-block:var(--s-32);overflow:hidden;border:var(--borda-card);border-radius:var(--r-card);box-shadow:var(--sombra)}
.portfolio-destaque img{display:block;width:100%;height:auto}

.fundo-2{background:var(--bg-2);border-block:var(--borda)}

/* Quem somos — título à esquerda, argumento à direita.
   Duas colunas eliminam o vazio que sobrava embaixo de um título curto. */
.quem-grid{display:grid;grid-template-columns:1fr;gap:var(--s-32)}
.quem-grid h2{max-width:14ch;margin-top:0}
.quem-texto{color:var(--cinza-claro);font-size:clamp(17px,2vw,19px);line-height:1.65;max-width:52ch}
.quem-texto + .quem-texto{margin-top:var(--s-24)}
.quem-texto.forte{color:var(--branco)}
@media (min-width:900px){
  .quem-grid{grid-template-columns:1fr 1.1fr;gap:var(--s-64);align-items:start}
}

/* ============================================================
   ARTIGO / CONTEÚDO LONGO
   ============================================================ */
.artigo-corpo{margin-top:var(--s-48)}
.artigo-corpo h2{
  font-size:clamp(24px,3.2vw,34px);font-weight:700;letter-spacing:-.025em;line-height:1.2;
  margin-top:var(--s-64);margin-bottom:var(--s-24);
  scroll-margin-top:110px;
}
.artigo-corpo h2:first-child{margin-top:0}
.artigo-corpo h3{font-size:clamp(20px,2.4vw,26px);margin-top:var(--s-48);margin-bottom:var(--s-16)}
.artigo-corpo p{margin-bottom:var(--s-24);color:var(--cinza-claro);font-size:18px;line-height:1.75}
.artigo-corpo p strong{color:var(--branco);font-weight:600}
.artigo-corpo > ul{margin-bottom:var(--s-32);display:grid;gap:12px}
.artigo-corpo > ul li{
  position:relative;padding-left:32px;color:var(--cinza-claro);font-size:18px;line-height:1.65;
}
.artigo-corpo > ul li::before{
  content:'';position:absolute;left:0;top:11px;
  width:8px;height:8px;border-radius:50%;background:var(--gradiente);
  box-shadow:0 0 12px rgba(255,90,31,.6);
}

/* Tabela — formato que a IA generativa extrai com facilidade */
.tabela-wrap{overflow-x:auto;margin-bottom:var(--s-32);border-radius:var(--r-input);border:var(--borda-card)}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:520px}
thead th{
  text-align:left;padding:16px 20px;
  background:var(--cinza-escuro);color:var(--branco);
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
}
tbody td{padding:16px 20px;border-top:var(--borda);color:var(--cinza-claro)}
tbody tr:hover td{background:rgba(255,255,255,.02)}
tbody td:first-child{color:var(--branco);font-weight:600}

/* Índice do artigo */
.indice{
  background:var(--card);border:var(--borda-card);border-radius:var(--r-card);
  padding:28px 32px;margin-top:var(--s-48);
}
.indice h2{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza-medio);margin-bottom:16px}
.indice ol{list-style:none;display:grid;gap:10px;counter-reset:i}
.indice li{counter-increment:i}
.indice a{
  display:flex;gap:12px;color:var(--cinza-claro);text-decoration:none;font-size:16px;
  transition:color .2s ease;
}
.indice a::before{content:counter(i,decimal-leading-zero);color:var(--laranja);font-weight:600;flex:none}
.indice a:hover{color:var(--branco)}

.meta-artigo{display:flex;flex-wrap:wrap;gap:var(--s-16);align-items:center;margin-top:var(--s-24);color:var(--cinza-medio);font-size:14px}
.meta-artigo .ponto{width:4px;height:4px;border-radius:50%;background:var(--cinza-borda)}

/* ============================================================
   LISTAS DE CHECK / PILARES
   ============================================================ */
.lista-check{display:grid;grid-template-columns:1fr;gap:12px;margin-top:var(--s-32)}
.lista-check li{
  display:flex;align-items:center;gap:14px;padding:16px 20px;
  background:rgba(17,17,17,.72);border:var(--borda-card);border-radius:var(--r-input);
  font-size:17px;
  transition:border-color .3s ease,transform .3s ease;
}
.lista-check li:hover{border-color:rgba(255,90,31,.3);transform:translateX(4px)}
.check{
  width:24px;height:24px;flex:none;border-radius:50%;
  background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);
  display:inline-flex;align-items:center;justify-content:center;
}
.check svg{width:13px;height:13px;stroke:var(--verde);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-32)}
.tags li,.tag{
  padding:12px 20px;min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--cinza-borda);border-radius:var(--r-badge);
  background:var(--preto-grafite);color:var(--cinza-claro);
  font-size:15px;font-weight:500;text-decoration:none;
  transition:border-color .3s ease,color .3s ease,transform .3s ease;
}
.tags li:hover,.tag:hover{border-color:var(--laranja);color:var(--branco);transform:translateY(-3px)}

/* ============================================================
   PROCESSO / TIMELINE
   ============================================================ */
.timeline{margin-top:clamp(48px,6vw,var(--s-64));display:grid;gap:var(--s-16)}
.etapa{display:grid;grid-template-columns:auto 1fr;gap:var(--s-24);padding:var(--s-24) 0;border-bottom:var(--borda)}
.etapa:last-child{border-bottom:none}
.etapa-num{
  width:56px;height:56px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;
  background:var(--cinza-escuro);color:var(--cinza-claro);border:1px solid rgba(255,255,255,.08);
  transition:background .35s ease,color .35s ease,box-shadow .35s ease,transform .35s ease;
}
.etapa:hover .etapa-num{background:var(--gradiente);color:var(--sobre-laranja);box-shadow:var(--glow);transform:scale(1.05)}
.etapa h3{font-size:clamp(20px,2.2vw,26px);font-weight:600}
.etapa p{margin-top:10px;color:var(--cinza-claro);max-width:60ch}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.depoimentos-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:clamp(48px,6vw,var(--s-64))}
.depoimento{
  background:var(--card);border:var(--borda-card);border-radius:var(--r-card);
  padding:clamp(28px,3.2vw,40px);display:flex;flex-direction:column;gap:var(--s-24);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease;
}
.depoimento:hover{transform:translateY(-8px);border-color:rgba(255,90,31,.3);box-shadow:var(--sombra),0 0 40px rgba(255,90,31,.14)}
.depoimento blockquote{margin:0;font-size:19px;line-height:1.6}
.estrelas{color:var(--laranja);font-size:20px;letter-spacing:4px;line-height:1}
.aspas{width:32px;height:32px;fill:rgba(255,90,31,.35)}

/* ============================================================
   FAQ
   ============================================================ */
.faq-lista{margin-top:var(--s-48);display:grid;gap:12px}
.faq-item{background:var(--card);border:var(--borda-card);border-radius:var(--r-input);overflow:hidden;transition:border-color .3s ease}
.faq-item[open]{border-color:rgba(255,90,31,.28)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-24);
  padding:24px clamp(20px,2.4vw,32px);min-height:64px;
  font-size:clamp(17px,1.9vw,19px);font-weight:600;letter-spacing:-.01em;
  cursor:pointer;list-style:none;transition:color .25s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--laranja-3)}
.faq-sinal{
  width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--cinza-borda);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .3s ease,border-color .3s ease,background-color .3s ease;
}
.faq-sinal svg{width:14px;height:14px;stroke:var(--branco);stroke-width:2.2;fill:none;stroke-linecap:round}
.faq-item[open] .faq-sinal{transform:rotate(45deg);border-color:var(--laranja);background:rgba(255,90,31,.12)}
.faq-resposta{padding:0 clamp(20px,2.4vw,32px) 28px;color:var(--cinza-claro);font-size:17px;line-height:1.7;max-width:72ch}
.faq-grupo{margin-top:var(--s-64)}
.faq-grupo > h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:var(--s-24)}

/* ============================================================
   CTA
   ============================================================ */
.cta-bloco{background:var(--premium);text-align:center;position:relative;overflow:hidden}
.cta-bloco h2{max-width:18ch;margin-inline:auto}
.cta-bloco p{margin-top:var(--s-24);color:var(--cinza-claro);max-width:56ch;margin-inline:auto;font-size:clamp(17px,2vw,19px)}

/* CTA intermediário — dentro do conteúdo */
.cta-inline{
  margin-block:var(--s-64);padding:clamp(28px,3.4vw,40px);
  background:var(--card);border:1px solid rgba(255,90,31,.22);border-radius:var(--r-card);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-24);
}
.cta-inline h2{font-size:clamp(20px,2.4vw,26px);max-width:24ch;letter-spacing:-.02em;line-height:1.25}
.cta-inline p{margin-top:8px;color:var(--cinza-claro);font-size:16px;max-width:44ch}
.cta-inline .btn{min-height:56px}

/* ============================================================
   ESTADO VAZIO (portfólio/cases sem conteúdo real ainda)
   ============================================================ */
.vazio{
  margin-top:var(--s-48);padding:clamp(40px,5vw,64px);
  border:1px dashed var(--cinza-borda);border-radius:var(--r-card);
  text-align:center;color:var(--cinza-medio);
}
.vazio h2{font-size:24px;color:var(--branco);margin-bottom:12px}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--preto-absoluto);border-top:var(--borda);padding-block:clamp(56px,7vw,var(--s-96)) var(--s-48)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--s-48)}
.footer-sobre{max-width:40ch}
.footer-sobre h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
.footer-tag{margin-top:var(--s-16);color:var(--laranja-3);font-size:15px;font-weight:500}
.footer-sobre p{margin-top:var(--s-16);color:var(--cinza-claro);font-size:16px;line-height:1.6}
.footer-col h3{font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--branco)}
.footer-col ul{margin-top:var(--s-24);display:grid;gap:2px}
.footer-col a{
  position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;
  color:var(--cinza-claro);text-decoration:none;font-size:16px;transition:color .25s ease;
}
.footer-col a:hover,.footer-col a:focus-visible{color:var(--branco)}
.footer-col a::after{
  content:'';position:absolute;left:0;bottom:10px;width:100%;height:1px;background:var(--laranja);
  transform:scaleX(0);transform-origin:right;transition:transform .3s ease;
}
.footer-col a:hover::after{transform:scaleX(1);transform-origin:left}
.footer-col svg{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.footer-base{
  margin-top:clamp(48px,6vw,var(--s-64));padding-top:var(--s-32);border-top:var(--borda);
  display:flex;flex-wrap:wrap;gap:var(--s-16);align-items:center;justify-content:space-between;
}
.footer-base strong{font-size:16px;font-weight:600;color:var(--branco)}
.footer-base .legenda{color:var(--cinza-medio)}
.footer-nap{margin-top:var(--s-16);color:var(--cinza-medio);font-size:13px;line-height:1.6}
.empresa-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,147,72,.55);text-underline-offset:3px}
.empresa-link:hover,.empresa-link:focus-visible{color:var(--branco);text-decoration-color:var(--laranja-3)}

/* ============================================================
   WHATSAPP FLUTUANTE
   ============================================================ */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:60px;height:60px;border-radius:50%;background:var(--gradiente);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sombra),0 0 30px rgba(255,90,31,.35);
  transition:transform .25s ease,box-shadow .25s ease;
}
.wa:hover,.wa:focus-visible{transform:scale(1.06);box-shadow:var(--glow)}
.wa svg{width:30px;height:30px;fill:var(--sobre-laranja)}

/* ============================================================
   FORMULÁRIO
   ============================================================ */
.form-card{background:var(--card);border:var(--borda-card);border-radius:var(--r-card);padding:clamp(28px,3.4vw,40px)}
.campo + .campo{margin-top:20px}
.form-grid .campo + .campo{margin-top:0}
label{display:block;font-size:14px;font-weight:600;color:var(--cinza-claro);margin-bottom:8px}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],textarea,select{
  width:100%;background:var(--preto-grafite);color:var(--branco);
  border:1px solid var(--cinza-borda);border-radius:var(--r-input);
  padding:18px;font:inherit;font-size:16px;min-height:56px;
  transition:border-color .2s ease;
}
input::placeholder,textarea::placeholder{color:#8A8A8A}
input:focus,textarea:focus,select:focus{border-color:var(--laranja)}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--laranja-3);outline-offset:2px;
}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--vermelho)}
textarea{min-height:130px;resize:vertical}
.campo-ajuda{display:block;margin-top:8px;color:var(--cinza-medio);font-size:13px;line-height:1.45}
.form-alerta{padding:16px 20px;border-radius:14px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#FECACA;margin-bottom:24px}
.termos-caixa{margin-top:24px;padding:18px 20px;border:1px solid var(--cinza-borda);border-radius:16px;background:var(--preto-grafite)}
.termos-caixa summary{cursor:pointer;font-weight:700;color:var(--laranja-3)}
.termos-caixa div{display:grid;gap:12px;margin-top:16px;color:var(--cinza-claro);font-size:15px}
.aceite-check{display:flex;align-items:flex-start;gap:12px;margin-top:20px;color:var(--cinza-claro);line-height:1.5}
.aceite-check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--laranja)}

/* ============================================================
   REVEAL
   ============================================================ */
/* A animação de entrada só existe se o JS estiver ativo.
   Sem o seletor .js, um JS bloqueado ou quebrado deixaria .reveal em opacity:0 —
   e o site inteiro ficaria invisível, não só sem animação. */
.js .reveal{opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity .6s ease,transform .6s ease,filter .6s ease}
.js .reveal.visivel{opacity:1;transform:none;filter:none}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .lista-check{grid-template-columns:repeat(2,1fr)}
  .depoimentos-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s-64)}
}

@media (min-width:1024px){
  .nav-cta{display:inline-flex;min-height:46px;padding:0 7px 0 20px;gap:12px;font-size:15px;border-radius:14px}
  .nav-cta .btn-icone{width:32px;height:32px}
  .menu-btn{display:none}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .depoimentos-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
}

@media (max-width:767px){
  .home-confianca-grid{grid-template-columns:1fr}
  .home-confianca-grid > div + div{border-left:0;border-top:var(--borda)}
  .escolha-servico{grid-template-columns:1fr}
  .rota-projeto ol{grid-template-columns:1fr}
  .rota-projeto li + li{border-left:0;border-top:var(--borda)}
  .institucional-faixa dl{grid-template-columns:1fr 1fr}
  .institucional-faixa dl > div + div{border-left:0}
  .institucional-faixa dl > div:nth-child(even){border-left:var(--borda)}
  .institucional-faixa dl > div:nth-child(n+3){border-top:var(--borda)}
  body{font-size:17px}
  .marca-logo{width:172px;height:auto}
  .container{padding-inline:18px}
  .hero{min-height:calc(100svh - 71px);padding-block:32px}
  .hero-video{display:none}
  .btn{width:100%;min-height:56px;padding:0 24px}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:var(--s-16) var(--s-24) var(--s-32);
    background:var(--preto-absoluto);border-bottom:var(--borda);box-shadow:var(--sombra);
    max-height:calc(100dvh - 80px);overflow-y:auto;
  }
  .nav-links.aberto{display:flex}
  .nav-links a:not(.btn){min-height:52px;display:flex;align-items:center;font-size:17px;color:var(--branco);border-bottom:var(--borda)}
  .nav-links a:not(.btn)::after{display:none}
  .nav-links .btn{margin-top:var(--s-16);width:100%}
  .nav-links .nav-cta{display:inline-flex;min-height:56px;font-size:16px}
  /* Submenu vira lista aberta no mobile — hover não existe no toque */
  .submenu{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;padding:0 0 0 16px;background:transparent;border:none;box-shadow:none;
    border-left:2px solid var(--cinza-borda);border-radius:0;margin-bottom:8px;
  }
  .submenu a{padding:10px 0 !important;font-size:15px !important}
  .submenu a:hover{background:transparent}

  .section-head,.section-head.centro{max-width:none;text-align:left}
  .section-head.centro p{margin-inline:0}
  .acoes.centro{justify-content:flex-start}
  .cta-bloco{text-align:left}
  .cta-bloco h2,.cta-bloco p{margin-inline:0}
  .etapa{grid-template-columns:1fr;gap:var(--s-16)}
  .cta-inline{flex-direction:column;align-items:flex-start}
  .cta-inline .btn{width:100%}
  .footer-base{flex-direction:column;align-items:flex-start}
  .wa{right:16px;bottom:16px}
  table{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none;filter:none}
}