/* HTF Assessoria Pericial · estilos
   Manual de Marca v2: Poppins nos títulos, Inter no texto; petróleo, verde, areia, papel e terra.
   Regras do manual respeitadas aqui: terra nunca sobre o petróleo, verde nunca sobre o petróleo, areia só sobre o petróleo. */

:root {
  --petroleo: #123933;
  --petroleo-2: #0E2E29;
  --verde: #2E625A;
  --areia: #BEB6A4;
  --papel: #F6F3ED;
  --papel-2: #EDE9E0;
  --terra: #9C6F3C;
  --wa: #25D366;
  --wa-claro: #4BE384;
  --linha-c: rgba(18, 57, 51, .16);
  --linha-e: rgba(246, 243, 237, .15);
  --d: 'Poppins', system-ui, sans-serif;
  --b: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --mola: cubic-bezier(.16, 1, .3, 1);
  --lado: clamp(20px, 5vw, 68px);
  --max: 1240px;
  --topo: 68px;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo) + 16px) }
html.menu-aberto { overflow: hidden }
body { margin: 0; background: var(--papel); color: var(--petroleo); font: 400 16px/1.65 var(--b); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0 }
ol, ul { list-style: none }
img, svg { display: block; max-width: 100% }
a { color: inherit }
button { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--areia); outline-offset: 3px }
.papel :focus-visible, .papel-2 :focus-visible, .legal :focus-visible { outline-color: var(--verde) }
h1, h2, h3 { font-family: var(--d); font-weight: 600; letter-spacing: -.03em }

.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--papel); color: var(--petroleo); padding: 10px 16px; font-weight: 500; text-decoration: none }
.pular:focus { top: 12px }

/* ---------- base das seções ---------- */
.conteudo { width: min(100% - 2 * var(--lado), var(--max)); margin-inline: auto }
.secao { position: relative; padding: clamp(76px, 10vw, 140px) 0 }
.papel { background: var(--papel); color: var(--petroleo) }
.papel-2 { background: var(--papel-2); color: var(--petroleo) }
.escuro { background: var(--petroleo); color: var(--papel) }
.escuro-2 { background: var(--petroleo-2); color: var(--papel) }

.rotulo { font: 500 11.5px/1.45 var(--b); letter-spacing: .14em; text-transform: uppercase }
.papel .rotulo, .papel-2 .rotulo { color: var(--verde) }
.escuro .rotulo, .escuro-2 .rotulo, .hero .rotulo, .rodape .rotulo { color: var(--areia) }
.indice { display: block; font: 500 11.5px/1 var(--b); letter-spacing: .14em; font-variant-numeric: tabular-nums; margin-bottom: 18px }
.papel .indice, .papel-2 .indice { color: var(--verde) }
.escuro .indice, .escuro-2 .indice { color: var(--areia) }

h2 { margin-top: 16px; font-size: clamp(1.95rem, 1.2rem + 2.4vw, 3.1rem); line-height: 1.04; max-width: 22ch }
h3 { font-size: clamp(1.12rem, 1.02rem + .35vw, 1.3rem); line-height: 1.22; letter-spacing: -.02em }
.filete { display: block; width: 48px; height: 2px; margin-top: 24px; background: var(--terra) }
.escuro .filete, .escuro-2 .filete { background: var(--areia) }
.olho { font-weight: 300; font-size: clamp(1.05rem, .97rem + .35vw, 1.26rem); line-height: 1.6; max-width: 58ch }
.papel .olho, .papel-2 .olho { color: var(--verde) }
.escuro .olho, .escuro-2 .olho { color: var(--areia) }
.cabeca { display: grid; gap: 26px; margin-bottom: clamp(40px, 5vw, 64px) }
.cabeca .olho { max-width: 60ch }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px;
  border: 1px solid transparent; border-radius: 2px; font: 500 15px/1.25 var(--b); text-align: center; text-decoration: none; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, box-shadow .4s var(--ease), transform .4s var(--mola)
}
.botao svg { width: 19px; height: 19px; flex-shrink: 0 }
.botao-wa { background: var(--wa); color: var(--petroleo) }
.botao-wa:hover { background: var(--wa-claro); box-shadow: 0 14px 34px -14px rgba(37, 211, 102, .7); transform: translateY(-2px) }
.botao-linha { color: var(--papel); border-color: rgba(190, 182, 164, .55) }
.botao-linha:hover { border-color: var(--papel); background: rgba(246, 243, 237, .06) }
.botao-solido { background: var(--petroleo); color: var(--papel) }
.botao-solido:hover { background: var(--petroleo-2) }
.botao-contorno { color: var(--petroleo); border-color: var(--petroleo) }
.botao-contorno:hover { background: var(--petroleo); color: var(--papel) }
.botao-p { min-height: 42px; padding: 8px 12px; font-size: 14px }
@media (min-width: 600px) { .botao { white-space: nowrap } }

/* ---------- topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--topo); display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-inline: var(--lado); color: var(--papel); border-bottom: 1px solid transparent; transition: background .35s, border-color .35s
}
.topo.rolado, .topo.fixo { background: var(--petroleo-2); border-bottom-color: var(--linha-e) }
.marca { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 9px; color: var(--papel); text-decoration: none; white-space: nowrap }
.marca-m { font: 700 24px/.9 var(--d); letter-spacing: -.045em }
.marca-n { font: 500 13px/1 var(--d); letter-spacing: -.02em }
.topo-acoes { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px }
.topo-acoes .botao-p span { display: none }
.topo-acoes .botao-p { width: 44px; height: 44px; padding: 0 }
.menu-botao { position: relative; width: 44px; height: 44px; border: 1px solid rgba(190, 182, 164, .45); background: none; cursor: pointer }
.menu-botao i { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--papel); transition: transform .35s var(--mola) }
.menu-botao i:first-child { top: 17px }
.menu-botao i:last-child { top: 25px }
.menu-botao[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg) }
.menu-botao[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg) }
.menu {
  position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: calc(var(--topo) + 24px) var(--lado) 40px; background: var(--petroleo-2); opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s .35s
}
.menu.aberto { opacity: 1; visibility: visible; transition: opacity .35s var(--ease) }
.menu > a:not(.botao) { padding: 14px 0; border-bottom: 1px solid var(--linha-e); font: 600 clamp(24px, 7vw, 32px)/1.15 var(--d); letter-spacing: -.03em; color: var(--papel); text-decoration: none }
.menu .menu-wa { margin-top: 28px; align-self: flex-start }
@media (min-width: 600px) {
  .marca-m { font-size: 26px }
  .marca-n { font-size: 14px }
  .topo-acoes .botao-p { width: auto; padding: 8px 16px }
  .topo-acoes .botao-p span { display: inline }
}
@media (min-width: 1100px) {
  :root { --topo: 80px }
  .menu { position: static; flex-direction: row; align-items: center; gap: 30px; padding: 0; background: none; opacity: 1; visibility: visible; margin-left: auto }
  .menu > a:not(.botao) { position: relative; padding: 6px 0; border: 0; font: 400 14.5px/1 var(--b); letter-spacing: 0; color: var(--areia); transition: color .25s }
  .menu > a:not(.botao)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--papel); transition: right .35s var(--ease) }
  .menu > a:not(.botao):hover { color: var(--papel) }
  .menu > a:not(.botao):hover::after { right: 0 }
  .menu .menu-wa, .menu-botao { display: none }
  .topo-acoes { margin-left: 12px }
}

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-top: calc(var(--topo) + 36px); background: var(--petroleo); color: var(--papel) }
.hero-fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 48% at 76% 36%, rgba(190, 182, 164, .11), transparent 72%),
    radial-gradient(70% 55% at 8% 100%, rgba(10, 34, 30, .85), transparent 70%),
    linear-gradient(180deg, #133B35 0%, var(--petroleo) 42%, var(--petroleo-2) 100%) }
.hero-fundo::after { content: ""; position: absolute; inset: 0; opacity: .7;
  background: repeating-linear-gradient(0deg, rgba(246, 243, 237, .018) 0 1px, transparent 1px 6px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent) }
.hero-arte { position: absolute; inset: 0 0 auto auto; z-index: -1; width: 100%; height: 100%; overflow: hidden }
.hero-arte img { width: 100%; height: 100%; object-fit: cover; object-position: 76% 42%;
  -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000 46%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 12%, #000 46%, #000 84%, transparent 100%); opacity: .4 }
.hero-arte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 57, 51, .82) 0%, rgba(18, 57, 51, .5) 38%, rgba(14, 46, 41, .72) 100%) }
.hero-in { position: relative; flex: 1; display: grid; align-content: center; gap: 40px; width: min(100% - 2 * var(--lado), var(--max)); margin-inline: auto }
.hero-tags { position: relative; display: flex; flex-wrap: wrap; gap: 8px 20px; width: min(100% - 2 * var(--lado), var(--max));
  margin: 0 auto; padding: 18px 0 clamp(22px, 3vh, 36px); border-top: 1px solid var(--linha-e) }
.hero-tags li { font: 500 11.5px/1.5 var(--b); letter-spacing: .12em; text-transform: uppercase; color: var(--areia) }
.hero-tags li + li::before { content: "·"; margin-right: 20px; color: rgba(190, 182, 164, .45) }
.hero-texto .rotulo { margin-bottom: 20px; max-width: 46ch }
.hero h1 { font-size: clamp(2.05rem, 1.1rem + 3vw, 3.65rem); line-height: 1.04; max-width: 19ch }
.hero h1 span { color: var(--areia) }
.hero-sub { margin-top: 22px; font-weight: 300; font-size: clamp(1rem, .96rem + .22vw, 1.1rem); line-height: 1.6; color: var(--areia); max-width: 58ch }
.assinatura { margin-top: 22px; padding-left: 14px; border-left: 2px solid var(--areia); font: 400 14.5px/1.5 var(--b); color: var(--papel) }
.assinatura span { display: block }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px }
@media (max-width: 599px) { .hero-cta .botao { width: 100% } }
@media (min-width: 600px) {
  .assinatura span { display: inline }
  .assinatura span + span::before { content: " · " }
}

/* faixa da fase: retângulo largo embaixo da tarja */
.fase-cartao { position: relative; margin-top: 26px; border: 1px solid rgba(190, 182, 164, .24);
  background: linear-gradient(115deg, rgba(246, 243, 237, .075), rgba(246, 243, 237, .012) 62%); box-shadow: 0 40px 70px -55px rgba(0, 0, 0, .6) }
.fase-cartao::before, .fase-cartao::after { content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--areia); pointer-events: none }
.fase-cartao::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px }
.fase-cartao::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px }
.fase-palco { display: grid; padding: 20px }
.fase { grid-area: 1 / 1; display: grid; gap: 16px; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .6s var(--mola), visibility 0s .45s }
.fase.ativa { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease) .08s, transform .7s var(--mola) .08s, visibility 0s }
.fase-marca { display: flex; align-items: baseline; gap: 12px }
.fase-numero { font: 700 clamp(34px, 3.4vw, 46px)/.82 var(--d); letter-spacing: -.055em; color: rgba(190, 182, 164, .34); font-variant-numeric: tabular-nums }
.fase-nome { font: 500 11px/1.3 var(--b); letter-spacing: .14em; text-transform: uppercase; color: var(--areia) }
.fase-servico { font: 600 clamp(1.12rem, 1rem + .4vw, 1.32rem)/1.22 var(--d); letter-spacing: -.024em; color: var(--papel) }
.fase-desc { margin-top: 8px; font-weight: 300; font-size: 15px; line-height: 1.58; color: var(--areia); max-width: 64ch }
.fase-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px }
.fase-tags span { padding: 6px 9px; border: 1px solid rgba(190, 182, 164, .3); font: 500 11.5px/1 var(--b); color: var(--areia) }
.fase-link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--areia); font: 500 14px/1 var(--b); color: var(--papel); text-decoration: none; justify-self: start }
.fase-link::after { content: "→"; transition: transform .35s var(--mola) }
.fase-link:hover::after { transform: translateX(4px) }
.fase-barra { height: 2px; background: rgba(190, 182, 164, .16); overflow: hidden }
.fase-barra i { display: block; height: 100%; background: var(--areia); transform: scaleX(0); transform-origin: left }
.fase-cartao.tocando .fase-barra i { animation: enche var(--dur, 6s) linear forwards }
@keyframes enche { to { transform: scaleX(1) } }
@media (min-width: 900px) {
  .fase-palco { padding: clamp(20px, 2vw, 28px) }
  .fase { grid-template-columns: 188px minmax(0, 1fr) 156px; column-gap: clamp(20px, 2.4vw, 40px); row-gap: 0; align-items: center }
  .fase-marca { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; align-self: stretch;
    padding-right: clamp(20px, 2.4vw, 40px); border-right: 1px solid var(--linha-e) }
  .fase-link { justify-self: end }
}

/* linha do processo */
.linha { position: relative; width: 100%; margin: 0 auto; --p: 0 }
.linha-legenda { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 20px; padding-top: 13px; border-top: 1px solid var(--linha-e) }
.linha-legenda .rotulo { font-size: 10.5px }
.fase-contagem { color: var(--areia); font-variant-numeric: tabular-nums; white-space: nowrap }
.fase-contagem b { font-weight: 500; color: var(--papel) }
.linha-dica { opacity: .7 }
.marcos { position: relative; display: grid; grid-template-columns: repeat(5, 1fr) }
.linha-trilho { position: absolute; left: 10%; right: 10%; bottom: auto; height: 1px; background: rgba(190, 182, 164, .34); margin-top: 7px }
.linha-trilho::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 5px; background: repeating-linear-gradient(90deg, rgba(190, 182, 164, .22) 0 1px, transparent 1px 12px) }
.linha-janela { position: absolute; left: 0; top: -1px; height: 3px; width: calc(var(--p) * 25%); background: linear-gradient(90deg, rgba(190, 182, 164, .3), var(--papel)); transition: width .8s var(--mola) }
.marco { display: grid; justify-items: center; gap: 10px; width: 100%; padding: 0 4px 6px; border: 0; background: none; cursor: pointer; text-align: center; color: var(--areia); -webkit-tap-highlight-color: transparent }
.marco-ponto { position: relative; width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(190, 182, 164, .75); background: var(--petroleo); transition: background .4s, border-color .4s, transform .6s var(--mola) }
.marco-ponto::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(246, 243, 237, .55); opacity: 0 }
.marco.passou .marco-ponto { background: var(--areia); border-color: var(--areia) }
.marco.ativo .marco-ponto { background: var(--papel); border-color: var(--papel); transform: scale(1.18) }
.marco.ativo .marco-ponto::after { animation: pulsa 2.6s ease-out infinite }
@keyframes pulsa { 0% { opacity: .9; transform: scale(.55) } 100% { opacity: 0; transform: scale(1.9) } }
.marco-num { font: 500 11px/1 var(--b); letter-spacing: .14em; color: rgba(190, 182, 164, .8); font-variant-numeric: tabular-nums; transition: color .3s }
.marco-nome { display: none; max-width: 15ch; font: 400 13.5px/1.3 var(--b); color: var(--areia); transition: color .3s }
.marco.ativo .marco-num, .marco.ativo .marco-nome, .marco:hover .marco-nome { color: var(--papel) }
.marco:hover .marco-ponto { border-color: var(--papel) }
.marcador { display: none }
@media (min-width: 760px) { .marco-nome { display: block } }

/* marcador que segue o mouse (só tela grande com mouse) */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .linha { padding-top: 36px }
  .marcador { position: absolute; top: 0; left: 0; height: 104px; display: block; width: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease) }
  .linha.pronta .marcador { opacity: 1 }
  .marcador::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(246, 243, 237, .9) 0%, rgba(246, 243, 237, .5) 40%, rgba(246, 243, 237, 0)) }
  .marcador-rotulo { position: absolute; top: 0; left: 10px; font: 500 10.5px/1 var(--b); letter-spacing: .14em; text-transform: uppercase; color: var(--papel); white-space: nowrap; font-variant-numeric: tabular-nums }
  .marcador.vira .marcador-rotulo { left: auto; right: 10px }
}

@media (min-width: 1100px) {
  .hero { padding-top: calc(var(--topo) + 40px) }
  .hero-texto { max-width: 660px }
  .hero-arte { width: min(64%, 1180px) }
  .hero-arte img { object-position: center right; opacity: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 44%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 44%) }
  .hero-arte::after { background: linear-gradient(90deg, rgba(18, 57, 51, .9) 0%, rgba(18, 57, 51, .1) 45%, transparent 70%),
    linear-gradient(180deg, rgba(14, 46, 41, .92) 0%, rgba(18, 57, 51, .45) 12%, transparent 34%, rgba(14, 46, 41, .85)) }
}
/* seção do processo, fora do hero */
.processo-grade { display: block }
.processo-grade .linha { width: 100%; margin: 0 auto }
/* notebook de tela baixa: título, botões e tópicos acima da dobra */
@media (min-width: 1100px) and (max-height: 860px) {
  .hero { padding-top: calc(var(--topo) + 24px) }
  .hero h1 { font-size: clamp(2.2rem, 1.3rem + 2.2vw, 3.1rem) }
  .hero-sub { margin-top: 16px; font-size: .98rem; line-height: 1.55 }
  .hero-texto .rotulo { margin-bottom: 14px }
  .assinatura { margin-top: 16px }
  .hero-cta { margin-top: 20px }
  .hero-tags { padding-top: 14px }
}

/* entrada do hero */
.js .hero .entra { opacity: 0; transform: translateY(22px) }
.js .hero.pronto .entra { opacity: 1; transform: none; transition: opacity .9s var(--ease) var(--atraso, 0s), transform 1.1s var(--mola) var(--atraso, 0s) }
.js .linha .marco { opacity: 0; transform: translateY(12px) }
.js .linha.pronta .marco { opacity: 1; transform: none; transition: opacity .6s var(--ease) calc(var(--i) * .09s), transform .8s var(--mola) calc(var(--i) * .09s) }
.js .linha-trilho { opacity: 0 }
.js .linha.pronta .linha-trilho { opacity: 1; transition: opacity 1.1s var(--ease) }

/* ---------- para quem ---------- */
@media (min-width: 900px) { .cabeca-2col { grid-template-columns: 1fr 1fr; align-items: end; gap: 64px } }
.abas { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 18px; border-bottom: 1.5px solid var(--petroleo) }
.aba { position: relative; z-index: 1; min-height: 48px; padding: 10px 12px; border: 1px solid var(--linha-c); border-radius: 2px; background: transparent; font: 500 14px/1.25 var(--b); color: var(--petroleo); cursor: pointer; transition: background .3s, color .3s, border-color .3s }
.aba:hover { border-color: var(--petroleo) }
.aba.ativa { background: var(--petroleo); color: var(--papel); border-color: var(--petroleo) }
.abas-indicador { display: none }
@media (min-width: 1100px) {
  .abas { display: flex; flex-wrap: nowrap; gap: 6px }
  .aba { padding: 12px 18px }
  .abas-indicador { position: absolute; top: 0; left: 0; z-index: 0; display: block; background: var(--petroleo); border-radius: 2px; transition: transform .6s var(--mola), width .6s var(--mola) }
  .abas.com-indicador .aba.ativa { background: transparent; border-color: transparent }
}
.painel { display: grid; gap: 34px; padding-top: 40px }
.painel[hidden] { display: none }
.painel.entrando { animation: painel .7s var(--mola) both }
@keyframes painel { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@media (min-width: 900px) { .painel { grid-template-columns: 1.15fr .85fr; gap: 64px } }
.painel-texto h3 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.75rem); line-height: 1.16; max-width: 26ch }
.painel-texto p { margin-top: 16px; color: var(--verde); max-width: 60ch }
.painel-texto p.painel-nota { margin: 22px 0 28px; padding-left: 16px; border-left: 2px solid var(--terra); font-weight: 500; color: var(--petroleo); max-width: 52ch }
.painel-servicos { align-self: start; padding: 22px 24px 10px; background: var(--papel-2); border-top: 1.5px solid var(--petroleo) }
.painel-servicos .rotulo { margin-bottom: 6px }
.painel-servicos a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--linha-c); font-weight: 500; font-size: 15px; line-height: 1.35; text-decoration: none; transition: color .25s }
.painel-servicos a:last-child { border-bottom: 0 }
.painel-servicos a::after { content: "→"; color: var(--terra); transition: transform .35s var(--mola) }
.painel-servicos a:hover { color: var(--verde) }
.painel-servicos a:hover::after { transform: translateX(4px) }

/* ---------- risco ---------- */
.riscos { display: grid; border-top: 1px solid rgba(190, 182, 164, .45) }
.risco { padding: 28px 0 30px; border-bottom: 1px solid var(--linha-e) }
.risco h3 { margin-bottom: 12px }
.risco p { color: var(--areia); font-size: 15.5px }
@media (min-width: 900px) {
  .cabeca:not(.cabeca-2col) { grid-template-columns: 1fr 1fr; align-items: end; gap: 64px }
  .riscos { grid-template-columns: repeat(3, 1fr) }
  .risco { padding: 36px 34px 10px 0; border-bottom: 0; border-right: 1px solid var(--linha-e) }
  .risco + .risco { padding-left: 34px }
  .risco:last-child { padding-right: 0; border-right: 0 }
}

/* ---------- faixa com paralaxe ---------- */
.faixa { position: relative; overflow: hidden; padding: clamp(96px, 13vw, 180px) 0; background: var(--petroleo); color: var(--papel); border-top: 1px solid var(--linha-e) }
.faixa-fundo { position: absolute; inset: 0; display: grid; align-content: center; gap: clamp(6px, 1.2vw, 16px); pointer-events: none }
.faixa-linha { margin-left: -30%; white-space: nowrap; font: 600 clamp(42px, 7.4vw, 110px)/1 var(--d); letter-spacing: -.045em; color: rgba(190, 182, 164, .06); will-change: transform }
.faixa-frase { position: relative; max-width: 21ch; font: 600 clamp(1.9rem, 1rem + 3.2vw, 3.9rem)/1.08 var(--d); letter-spacing: -.032em }
.faixa-frase span { color: var(--areia) }

/* ---------- faixas de foto ---------- */
.faixa-foto { position: relative; margin: 0; overflow: hidden; height: clamp(280px, 42vw, 520px); background: var(--petroleo) }
.faixa-foto img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform }
.faixa-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 57, 51, .3), rgba(14, 46, 41, .18) 45%, rgba(14, 46, 41, .9)) }
.faixa-foto figcaption { position: absolute; left: var(--lado); right: var(--lado); bottom: clamp(20px, 3vw, 34px); z-index: 2; color: var(--papel);
  font: 600 clamp(1.1rem, 1rem + .5vw, 1.45rem)/1.2 var(--d); letter-spacing: -.025em }
.faixa-foto figcaption .rotulo { display: block; margin-bottom: 8px; color: var(--areia) }
.faixa.com-foto .faixa-fundo { display: none }
.faixa-img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; will-change: transform }
.faixa.com-foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 46, 41, .96) 0%, rgba(14, 46, 41, .9) 42%, rgba(14, 46, 41, .42) 100%) }
.faixa.com-foto .conteudo { position: relative; z-index: 2 }
@media (max-width: 760px) {
  .faixa.com-foto::after { background: linear-gradient(180deg, rgba(14, 46, 41, .72) 0%, rgba(14, 46, 41, .88) 55%, rgba(14, 46, 41, .95) 100%) }
}

/* ---------- serviços ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px }
.chips span { padding: 8px 12px; border: 1px solid var(--linha-c); background: var(--papel); font: 500 12.5px/1 var(--b); color: var(--petroleo) }
.servicos { display: grid; gap: 16px }
@media (min-width: 700px) { .servicos { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1100px) { .servicos { grid-template-columns: repeat(3, 1fr); gap: 20px } }
.servico { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 26px; background: var(--papel); border: 1px solid var(--linha-c); scroll-margin-top: calc(var(--topo) + 24px); transition: transform .6s var(--mola), box-shadow .6s var(--ease) }
.servico::before { content: ""; position: absolute; top: -1px; left: -1px; width: 40px; height: 2px; background: var(--terra); transition: width .8s var(--mola) }
.servico:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(18, 57, 51, .5) }
.servico:hover::before, .servico:focus-within::before { width: calc(100% + 2px) }
.servico:target { animation: destaque 2.2s var(--ease) }
@keyframes destaque { 0%, 45% { box-shadow: 0 0 0 2px var(--terra) } 100% { box-shadow: 0 0 0 2px transparent } }
.servico-fase { font: 500 11px/1.45 var(--b); letter-spacing: .14em; text-transform: uppercase; color: var(--verde) }
.servico > p:not([class]) { flex: 1; color: var(--verde); font-size: 15.5px }
.servico-tags { display: flex; flex-wrap: wrap; gap: 6px }
.servico-tags span { padding: 6px 9px; background: var(--papel-2); border: 1px solid var(--linha-c); font: 500 11.5px/1 var(--b) }
.servico-link { align-self: flex-start; margin-top: 6px; padding-bottom: 3px; border-bottom: 1px solid var(--terra); font: 500 14.5px/1.3 var(--b); text-decoration: none; transition: color .25s }
.servico-link:hover { color: var(--verde) }

/* ---------- como funciona ---------- */
.como { display: grid; gap: 36px }
.como-contador, .como-trilho { display: none }
.como .olho { margin-top: 24px }
.etapa { padding: 26px 0; border-top: 1px solid var(--linha-e) }
.etapa-num { display: block; margin-bottom: 12px; font: 700 34px/1 var(--d); letter-spacing: -.045em; color: var(--areia); font-variant-numeric: tabular-nums }
.etapa h3 { margin-bottom: 8px }
.etapa p { max-width: 46ch; color: var(--areia); font-size: 15.5px }
.fluxo-nota { display: flex; align-items: center; gap: 14px; margin-top: 34px; font-size: 14.5px; line-height: 1.5; color: var(--areia) }
.fluxo-nota::before { content: ""; width: 32px; height: 2px; flex-shrink: 0; background: var(--areia) }
@media (min-width: 1100px) {
  .como { grid-template-columns: .92fr 1.08fr; gap: clamp(64px, 7vw, 110px); align-items: start }
  .como-fixo { position: sticky; top: calc(var(--topo) + 48px) }
  .como-contador { display: flex; align-items: flex-end; gap: 14px; margin-top: 52px }
  .como-num { font: 700 clamp(118px, 11vw, 170px)/.78 var(--d); letter-spacing: -.065em; color: var(--papel); font-variant-numeric: tabular-nums }
  .como-total { padding-bottom: 8px; font: 500 13px/1 var(--b); letter-spacing: .14em; color: var(--areia) }
  .como-trilho { display: block; max-width: 330px; height: 2px; margin-top: 30px; background: rgba(190, 182, 164, .2); overflow: hidden }
  .como-trilho i { display: block; height: 100%; background: var(--areia); transform: scaleX(0); transform-origin: left; transition: transform .25s linear }
  .etapas { border-bottom: 1px solid var(--linha-e) }
  .etapa { padding: 66px 0 70px }
  .js .etapa { opacity: .3; transition: opacity .6s var(--ease) }
  .js .etapa.ativa { opacity: 1 }
  .etapa-num { display: none }
  .etapa h3 { margin-bottom: 14px; font-size: clamp(1.55rem, 1.1rem + 1vw, 2.15rem); line-height: 1.12 }
  .etapa p { font-size: 17px }
}

/* ---------- quem assina ---------- */
.perfil { display: grid; gap: 48px }
.retrato { position: relative; aspect-ratio: 4 / 5; max-width: 480px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(22px, 3vw, 34px); background: var(--petroleo); color: var(--papel) }
.retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top }
.retrato::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 70% 30%, rgba(190, 182, 164, .12), transparent 70%) }
.retrato-mono { position: relative; display: grid; place-items: center; width: 76px; height: 76px; background: var(--terra); font: 700 26px/1 var(--d); letter-spacing: -.045em; color: var(--papel) }
.retrato-marca { position: relative; display: grid; gap: 6px }
.retrato-marca .m { font: 700 clamp(64px, 9vw, 104px)/.86 var(--d); letter-spacing: -.05em }
.retrato-marca .n { font: 500 clamp(18px, 2vw, 23px)/1.1 var(--d); letter-spacing: -.025em }
.retrato-marca .dsc { font: 400 13px/1.4 var(--b); letter-spacing: .02em; color: var(--areia) }
.retrato-legenda { position: relative; padding-top: 16px; border-top: 1px solid var(--linha-e); font-size: 13.5px; line-height: 1.55; color: var(--areia) }
.retrato-legenda b { display: block; margin-bottom: 4px; font: 600 15px/1.3 var(--d); letter-spacing: -.02em; color: var(--papel) }
/* com o retrato: véu petróleo no pé para a legenda ler sobre a foto clara */
.retrato.com-foto::before { background: linear-gradient(180deg, rgba(18, 57, 51, 0) 52%, rgba(18, 57, 51, .78) 76%, rgba(18, 57, 51, .96) 100%); z-index: 1 }
.retrato.com-foto .retrato-mono, .retrato.com-foto .retrato-legenda { z-index: 2 }
.perfil-texto .citacao { margin: 30px 0 26px; padding-left: 20px; border-left: 2px solid var(--terra); max-width: 46ch; font: 300 clamp(1.16rem, 1.02rem + .5vw, 1.36rem)/1.55 var(--b); color: var(--petroleo) }
.perfil-texto .tx { margin-top: 14px; max-width: 60ch; color: var(--verde) }
.fichas { display: grid; gap: 16px; margin-top: 40px }
@media (min-width: 700px) { .fichas { grid-template-columns: 1fr 1fr } }
.ficha { padding: 24px 24px 18px; background: var(--papel-2); border-top: 1.5px solid var(--petroleo) }
.ficha h3 { padding-bottom: 12px; border-bottom: 1px solid var(--linha-c) }
.ficha li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha-c); font-size: 15px; line-height: 1.45 }
.ficha li:last-child { border-bottom: 0 }
.ficha li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: .5em; background: var(--terra) }
.ficha li small { display: block; margin-top: 2px; font-size: 13px; color: var(--verde) }
.ficha-assinatura { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--linha-c); font-size: 14px; line-height: 1.5 }
.ficha-assinatura span { display: block }
@media (min-width: 1000px) {
  .perfil { grid-template-columns: .82fr 1.18fr; gap: clamp(56px, 7vw, 100px); align-items: start }
  .retrato { position: sticky; top: calc(var(--topo) + 40px) }
}

/* ---------- diferenciais e áreas ---------- */
.difs-grade { display: grid; gap: 28px }
.dif-foto { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; max-width: 460px; background: var(--petroleo) }
.dif-foto img { width: 100%; height: 100%; object-fit: cover }
.dif-foto::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(180deg, transparent, rgba(14, 46, 41, .82)) }
.dif-foto figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; color: var(--papel); font: 600 1.1rem/1.2 var(--d); letter-spacing: -.02em }
.dif-foto figcaption .rotulo { display: block; margin-bottom: 6px; color: var(--areia) }
.difs { display: grid; gap: 1px; background: var(--linha-c); border-top: 1.5px solid var(--petroleo) }
.dif { padding: 30px 26px 30px 0; background: var(--papel-2) }
.dif p { margin-top: 10px; color: var(--verde); font-size: 15.5px }
@media (min-width: 700px) { .difs { grid-template-columns: 1fr 1fr } .dif { padding: 32px 28px } }
@media (min-width: 1100px) {
  .difs-grade { grid-template-columns: .82fr 1.18fr; gap: clamp(40px, 5vw, 76px); align-items: start }
  .dif-foto { position: sticky; top: calc(var(--topo) + 44px) }
  .difs { grid-template-columns: 1fr 1fr }
  .dif { padding: 34px 28px 38px }
}
.areas { display: grid; gap: 1px; background: var(--linha-e); border: 1px solid var(--linha-e) }
@media (min-width: 800px) { .areas { grid-template-columns: 1fr 1fr } }
.area { padding: clamp(26px, 3vw, 40px); background: var(--petroleo-2); transition: background .4s var(--ease) }
.area:hover { background: #10332D }
.area p { margin-top: 10px; color: var(--areia); font-size: 15.5px; max-width: 52ch }

/* ---------- dúvidas ---------- */
.faq { max-width: 880px; border-top: 1.5px solid var(--petroleo) }
.faq details { border-bottom: 1px solid var(--linha-c) }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; font: 600 clamp(1.04rem, .98rem + .3vw, 1.2rem)/1.3 var(--d); letter-spacing: -.02em }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: ""; flex-shrink: 0; width: 14px; height: 14px;
  background: linear-gradient(var(--terra), var(--terra)) center / 100% 1.5px no-repeat, linear-gradient(var(--terra), var(--terra)) center / 1.5px 100% no-repeat;
  transition: transform .45s var(--mola) }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq summary:hover { color: var(--verde) }
.resposta { overflow: hidden }
.resposta p { padding-bottom: 24px; max-width: 64ch; color: var(--verde) }

/* ---------- contato ---------- */
.contato { display: grid; gap: 48px }
@media (min-width: 1000px) { .contato { grid-template-columns: .95fr 1.05fr; gap: clamp(56px, 7vw, 100px); align-items: start } }
.contato .olho { margin-top: 24px }
.canais { display: grid; gap: 10px; margin-top: 34px }
.canal { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid var(--linha-e); font-size: 15px; line-height: 1.4; color: var(--papel); text-decoration: none; transition: border-color .3s, background .3s }
.canal svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--areia) }
a.canal:hover { border-color: var(--areia); background: rgba(246, 243, 237, .03) }
.canal-wa { border-color: rgba(37, 211, 102, .5) }
.canal-wa svg { color: var(--wa) }
.formulario { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--linha-e); background: rgba(246, 243, 237, .025) }
.formulario h3 { font-size: clamp(1.35rem, 1.2rem + .5vw, 1.6rem) }
.formulario > p { margin-top: 8px; font-size: 14.5px; color: var(--areia) }
.campos { display: grid; gap: 16px; margin-top: 26px }
.campo-duplo { display: grid; gap: 16px }
@media (min-width: 600px) { .campo-duplo { grid-template-columns: 1fr 1fr } }
.campo label { display: block; margin-bottom: 8px; font: 500 11px/1.3 var(--b); letter-spacing: .14em; text-transform: uppercase; color: var(--areia) }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid rgba(246, 243, 237, .22); border-radius: 0; outline: none;
  background: rgba(246, 243, 237, .05); color: var(--papel); font: 400 16px/1.4 var(--b); -webkit-appearance: none; appearance: none; transition: border-color .3s, background .3s
}
.campo textarea { resize: vertical; min-height: 96px }
.campo select { padding-right: 40px; cursor: pointer;
  background: rgba(246, 243, 237, .05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23BEB6A4' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 15px center }
.campo select option { background: var(--petroleo); color: var(--papel) }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(190, 182, 164, .6) }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--areia); background-color: rgba(246, 243, 237, .08) }
.campo.erro input, .campo.erro select { border-color: var(--papel); box-shadow: inset 0 0 0 1px var(--papel) }
.consentimento { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; font-size: 13.5px; line-height: 1.5; color: var(--areia); cursor: pointer }
.consentimento input { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--areia) }
.consentimento a { color: var(--papel) }
.formulario .botao { width: 100%; margin-top: 22px }
.form-msg { min-height: 1.4em; margin-top: 12px; font-size: 14px; color: var(--papel) }

/* ---------- rodapé ---------- */
.rodape { padding: 76px 0 30px; background: var(--petroleo-2); color: var(--areia); font-size: 14px; line-height: 1.6; border-top: 1px solid var(--linha-e) }
.rodape-grade { display: grid; gap: 44px }
@media (min-width: 1000px) { .rodape-grade { grid-template-columns: .9fr 1.3fr .9fr; gap: 56px } }
.rodape p + p { margin-top: 12px }
.rodape a { color: var(--papel) }
.rodape .rotulo { margin-bottom: 12px }
.rodape-marca { display: inline-grid; gap: 8px; color: var(--papel); text-decoration: none }
.rodape-marca .m { font: 700 46px/.88 var(--d); letter-spacing: -.045em }
.rodape-marca .n { font: 500 19px/1.1 var(--d); letter-spacing: -.025em }
.rodape .dsc { margin-top: 6px; font-size: 12.5px; letter-spacing: .02em }
.rodape .crm { margin-top: 16px; color: var(--papel) }
.rodape .crm span { display: block }
.rodape-links { margin-top: 16px }
.rodape-links li { padding: 9px 0; border-bottom: 1px solid var(--linha-e) }
.rodape-links li:last-child { border-bottom: 0 }
.rodape-links a { text-decoration: none }
.rodape-links a:hover { text-decoration: underline }
.rodape-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; margin-top: 52px; padding-top: 20px; border-top: 1px solid var(--linha-e); font-size: 12.5px }
.rodape-base p + p { margin-top: 0 }

/* ---------- aviso de cookies ---------- */
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; visibility: hidden; transform: translateY(105%); background: var(--papel); color: var(--petroleo); border-top: 2px solid var(--petroleo);
  box-shadow: 0 -18px 40px -22px rgba(7, 26, 22, .55); transition: transform .6s var(--mola), visibility 0s .6s }
.cookie.mostra { visibility: visible; transform: none; transition: transform .7s var(--mola), visibility 0s }
.cookie-in { display: grid; gap: 12px; width: min(100% - 2 * var(--lado), var(--max)); margin-inline: auto; padding: 14px 0 16px }
.cookie p { max-width: 82ch; font-size: 13.5px; line-height: 1.5 }
.cookie a { color: var(--verde) }
.cookie-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.cookie .botao { min-height: 44px; padding: 8px 14px; font-size: 14px; white-space: normal }
@media (min-width: 900px) { .cookie-in { grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding: 16px 0 } .cookie .botao { white-space: nowrap } }

/* ---------- WhatsApp flutuante ---------- */
.wa-flutuante { position: fixed; right: 18px; bottom: calc(18px + var(--cookie-h, 0px)); z-index: 60; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color: var(--petroleo); box-shadow: 0 16px 34px -12px rgba(7, 26, 22, .65); opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity .35s var(--ease), transform .55s var(--mola), bottom .6s var(--mola) }
.wa-flutuante.mostra { opacity: 1; transform: none; pointer-events: auto }
html.menu-aberto .wa-flutuante { opacity: 0; pointer-events: none }
.wa-flutuante:hover { background: var(--wa-claro) }
.wa-flutuante svg { width: 28px; height: 28px }

/* ---------- revelação ---------- */
.js .revela { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) var(--rd, 0s), transform 1.1s var(--mola) var(--rd, 0s) }
.js .revela.visivel { opacity: 1; transform: none }

/* ---------- páginas legais ---------- */
.legal { background: var(--papel) }
.legal-cabeca { padding: calc(var(--topo) + clamp(56px, 8vw, 96px)) 0 clamp(40px, 5vw, 56px); background: var(--petroleo); color: var(--papel) }
.legal-cabeca h1 { margin-top: 16px; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1.03 }
.legal-cabeca .olho { margin-top: 20px; color: var(--areia) }
.legal-cabeca .atualizacao { margin-top: 14px; font-size: 14px; color: var(--areia) }
.legal-cabeca .filete { background: var(--areia) }
.legal-corpo { padding: clamp(48px, 6vw, 80px) 0 clamp(72px, 9vw, 120px) }
.legal-corpo .conteudo { max-width: 880px }
.legal-corpo h2 { max-width: none; margin: 48px 0 14px; padding-top: 32px; border-top: 1px solid var(--linha-c); font-size: clamp(1.28rem, 1.14rem + .5vw, 1.52rem); line-height: 1.2; letter-spacing: -.025em }
.legal-corpo h2:first-child { margin-top: 0; padding-top: 0; border-top: 0 }
.legal-corpo p, .legal-corpo ul { max-width: 72ch; margin-bottom: 14px }
.legal-corpo ul { padding-left: 20px; list-style: disc }
.legal-corpo li { margin-bottom: 8px }
.legal-corpo li::marker { color: var(--terra) }
.tabela { margin: 14px 0 24px; overflow-x: auto; -webkit-overflow-scrolling: touch }
.tabela table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5 }
.tabela th { padding: 0 14px 8px 0; border-bottom: 1.5px solid var(--petroleo); text-align: left; font: 500 11px/1.4 var(--b); letter-spacing: .12em; text-transform: uppercase; color: var(--verde) }
.tabela td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linha-c); vertical-align: top }
.legal-corpo .nota { max-width: 72ch; margin-top: 32px; padding: 16px 18px; border-left: 2px solid var(--terra); background: var(--papel-2); font-size: 14.5px }
.voltar { display: inline-flex; align-items: center; gap: 8px; color: var(--areia); font-size: 14.5px; text-decoration: none; transition: color .25s }
.voltar::before { content: "←" }
.voltar:hover { color: var(--papel) }

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important }
  .js .revela, .js .hero .entra, .js .linha .marco, .js .linha-trilho { opacity: 1 !important; transform: none !important }
  .faixa-linha { transform: none !important }
  .marco.ativo .marco-ponto::after { animation: none }
}