/* =========================================================================
   MOC Advogados — folha de estilo unica
   Paleta e tipografia derivadas da identidade (logotipo + protecoes de tela).
   Mobile-first: o que vem primeiro e o celular; media queries so ampliam.
   ========================================================================= */

:root{
  /* --- cor: azul-petroleo do logotipo + dourado champanhe das protecoes --- */
  --petroleo-900:#162026;
  --petroleo-800:#1D2C33;
  --petroleo-700:#2B3A42;   /* cor exata do logotipo */
  --petroleo-500:#47585F;
  --petroleo-300:#8C9BA1;

  --ouro:#B08D4F;
  --ouro-claro:#D8C79C;
  --ouro-fraco:#EFE7D6;

  /* neutro puxado pro frio de proposito: creme quente + dourado e o
     lugar-comum de site de advocacia. */
  --papel:#F4F6F6;
  --papel-2:#FFFFFF;
  --papel-3:#E8ECEC;

  --tinta:#162026;
  --tinta-2:#4A5860;
  --tinta-3:#77848A;
  --fio:#D7DEDE;

  --largura:1200px;
  --gutter:24px;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --t-rapida:.2s cubic-bezier(.4,0,.2,1);
  --t-media:.45s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--sans); font-weight:300;
  font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* NAO usar overflow-x:hidden no body: com um eixo hidden e o outro visible o
   body vira o container de rolagem e a pagina inteira para de rolar. O
   vazamento horizontal ja e contido na origem (.hero e .capa tem overflow
   hidden), entao nao ha nada pra esconder aqui. */

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}

:focus-visible{outline:2px solid var(--ouro); outline-offset:3px; border-radius:2px}

/* ---------------------------------------------------------------- tipografia */
h1,h2,h3,h4{
  font-family:var(--serif); font-weight:500;
  line-height:1.12; letter-spacing:-.005em;
  text-wrap:balance; margin:0;
}
h1{font-size:clamp(2.4rem,7vw,4.6rem)}
h2{font-size:clamp(1.9rem,4.6vw,3.1rem)}
h3{font-size:clamp(1.3rem,2.6vw,1.65rem)}
p{margin:0}

.olho{
  font-family:var(--sans); font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ouro);
  display:flex; align-items:center; gap:14px;
}
.olho::after{content:""; height:1px; width:44px; background:var(--ouro); opacity:.5}
.olho.centro{justify-content:center}
.olho.centro::before{content:""; height:1px; width:44px;
  background:var(--ouro); opacity:.5}

.lead{font-size:clamp(1.05rem,2vw,1.22rem); color:var(--tinta-2); line-height:1.75}
.texto{color:var(--tinta-2); max-width:68ch}

/* ------------------------------------------------------------------- layout */
.wrap{width:100%; max-width:var(--largura); margin:0 auto; padding:0 var(--gutter)}
.secao{padding:clamp(64px,10vw,120px) 0}
.secao--escura{background:var(--petroleo-800); color:var(--papel)}
.secao--escura .texto,.secao--escura .lead{color:#B9C6CB}
.secao--papel{background:var(--papel-2)}

.grid{display:grid; gap:clamp(28px,4vw,56px)}
@media (min-width:860px){
  .grid--2{grid-template-columns:1fr 1fr; align-items:start}
  .grid--2-a{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}

/* ------------------------------------------------------------------ cabecalho */
.topo{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0; transition:background var(--t-media),
    padding var(--t-media), box-shadow var(--t-media);
}
.topo__interno{display:flex; align-items:center; justify-content:space-between; gap:20px}
.topo__marca img{width:clamp(126px,17vw,168px)}
.topo__marca .neg{display:block}
.topo__marca .pos{display:none}

/* o cabecalho comeca transparente sobre o hero escuro e vira solido na rolagem */
.topo.solido{
  background:rgba(244,246,246,.94); backdrop-filter:blur(10px);
  padding:12px 0; box-shadow:0 1px 0 var(--fio);
}
.topo.solido .neg{display:none}
.topo.solido .pos{display:block}
.topo.solido .nav__link{color:var(--tinta-2)}
.topo.solido .hamburguer span{background:var(--tinta)}
/* paginas internas ja nascem com fundo claro */
.topo.interna{background:rgba(244,246,246,.94); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--fio)}
.topo.interna .neg{display:none}
.topo.interna .pos{display:block}
.topo.interna .nav__link{color:var(--tinta-2)}
.topo.interna .hamburguer span{background:var(--tinta)}

.nav{display:none}
.nav__link{
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:400; color:rgba(255,255,255,.82); position:relative;
  padding:6px 0; transition:color var(--t-rapida);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--ouro); transition:right var(--t-media);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{right:0}
.nav__link:hover{color:var(--ouro-claro)}
.topo.solido .nav__link:hover,.topo.interna .nav__link:hover{color:var(--ouro)}

@media (min-width:960px){
  .nav{display:flex; align-items:center; gap:34px}
  .hamburguer{display:none}
}

/* ------------------------------------------------------- menu mobile (gaveta) */
.hamburguer{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer;
}
.hamburguer span{
  display:block; height:1.5px; width:24px; background:#fff; margin-left:auto;
  transition:transform var(--t-rapida), opacity var(--t-rapida), width var(--t-rapida);
}
.hamburguer span:nth-child(2){width:17px}
.hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg); width:24px}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg); width:24px}

.gaveta{
  position:fixed; inset:0; z-index:99; background:var(--petroleo-900);
  display:flex; flex-direction:column; justify-content:center;
  padding:96px var(--gutter) 40px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity var(--t-media), transform var(--t-media), visibility var(--t-media);
}
.gaveta.aberta{opacity:1; visibility:visible; transform:none}
.gaveta a{
  font-family:var(--serif); font-size:clamp(1.8rem,7vw,2.6rem); color:#fff;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.09);
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
}
.gaveta a span{font-family:var(--sans); font-size:.66rem; letter-spacing:.2em;
  color:var(--ouro); opacity:.75}
body.travado{overflow:hidden}

/* --------------------------------------------------------------------- hero */
.hero{
  position:relative; min-height:min(94svh,860px); display:flex; align-items:center;
  background:var(--petroleo-800); color:#fff; overflow:hidden;
  padding:140px 0 72px;
}
/* gradiente diagonal petroleo -> dourado, igual a protecao de tela da marca */
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(176,141,79,.30) 0%, transparent 55%),
    radial-gradient(90% 80% at 8% 92%, rgba(176,141,79,.16) 0%, transparent 52%),
    linear-gradient(152deg, var(--petroleo-900) 0%, var(--petroleo-700) 46%, #33454D 100%);
}
/* monograma gigante como marca d'agua — recurso da propria identidade */
.hero__marca{
  position:absolute; right:-14%; top:50%; transform:translateY(-50%);
  width:min(760px,88vw); opacity:.05; pointer-events:none; user-select:none;
}
.hero__interno{position:relative; z-index:2; max-width:940px}
.hero h1{color:#fff; margin:22px 0 0}
.hero h1 em{
  font-style:italic; color:var(--ouro-claro);
  /* o italico da Cormorant e o unico floreio da pagina; fica so aqui */
}
.hero__sub{
  margin-top:26px; font-size:clamp(1rem,1.9vw,1.16rem);
  color:#C2CDD2; max-width:56ch; font-weight:300;
}
.hero__acoes{display:flex; flex-wrap:wrap; gap:14px; margin-top:40px}

.hero__rodape{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  border-top:1px solid rgba(255,255,255,.1);
}
.hero__rodape ul{
  list-style:none; margin:0; padding:18px 0; display:flex; flex-wrap:wrap;
  gap:8px 28px; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.hero__rodape li{display:flex; align-items:center; gap:10px}
.hero__rodape li::before{content:""; width:3px; height:3px; border-radius:50%;
  background:var(--ouro)}
@media (max-width:640px){ .hero__rodape{display:none} }

/* ------------------------------------------------------------------- botoes */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:.78rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  padding:16px 30px; border:1px solid transparent; cursor:pointer;
  transition:background var(--t-rapida), color var(--t-rapida),
    border-color var(--t-rapida), transform var(--t-rapida);
}
.btn svg{transition:transform var(--t-rapida)}
.btn:hover svg{transform:translateX(4px)}
.btn--ouro{background:var(--ouro); color:#fff; border-color:var(--ouro)}
.btn--ouro:hover{background:#9C7B42; border-color:#9C7B42}
.btn--linha{border-color:rgba(255,255,255,.35); color:#fff}
.btn--linha:hover{border-color:var(--ouro-claro); color:var(--ouro-claro)}
.btn--escuro{border-color:var(--petroleo-700); color:var(--petroleo-700)}
.btn--escuro:hover{background:var(--petroleo-700); color:#fff}

/* ------------------------------------------------------------------ pilares */
.pilares{display:grid; gap:1px; background:var(--fio); margin-top:56px}
@media (min-width:820px){ .pilares{grid-template-columns:repeat(3,1fr)} }
.pilar{background:var(--papel); padding:36px 30px}
.secao--papel .pilar{background:var(--papel-2)}
.pilar h3{margin-bottom:12px; font-size:1.35rem}
.pilar p{font-size:.95rem; color:var(--tinta-2)}
.pilar__n{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.2em;
  color:var(--ouro); display:block; margin-bottom:18px;
}

/* -------------------------------------------------------------------- areas */
.areas{display:grid; gap:1px; background:var(--fio); margin-top:56px}
@media (min-width:680px){ .areas{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .areas{grid-template-columns:repeat(3,1fr)} }

.area{
  background:var(--papel-2); padding:34px 30px 30px;
  display:flex; flex-direction:column; gap:12px; min-height:230px;
  position:relative; transition:background var(--t-media), color var(--t-media);
}
.area::after{
  content:""; position:absolute; left:30px; bottom:0; height:2px; width:0;
  background:var(--ouro); transition:width var(--t-media);
}
.area:hover{background:var(--petroleo-800); color:#fff}
.area:hover::after{width:calc(100% - 60px)}
.area:hover .area__resumo{color:#AFBDC3}
.area:hover .area__mais{color:var(--ouro-claro); opacity:1}
.area h3{font-size:1.45rem; transition:color var(--t-media)}
.area__resumo{font-size:.93rem; color:var(--tinta-2); flex:1;
  transition:color var(--t-media)}
.area__mais{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ouro); display:flex; align-items:center; gap:9px;
  opacity:.85; transition:color var(--t-media), opacity var(--t-media);
}

/* ------------------------------------------------- faixa de ambiente (home)
   Corta o bloco de texto no meio da pagina e mostra o escritorio de verdade.
   Full-bleed: sai do container pra ocupar a largura toda da tela. */
.faixa{position:relative; overflow:hidden; background:var(--petroleo-900)}
.faixa img{
  width:100%; object-fit:cover; display:block; opacity:.62;
  /* A altura acompanha a largura (36vw) em vez de travar num valor fixo.
     Travada em 520px, uma tela de 1830px virava uma janela de 3,5:1 e cortava
     a cabeca de quem esta sentado. Com 36vw a janela fica em ~2,78:1 em
     qualquer desktop, coladinho na proporcao 2,67:1 da foto, entao o recorte
     vertical e quase nulo. O teto de 700px so age em telas muito largas. */
  /* 38.5vw da uma janela de ~2.58:1, a MESMA proporcao do arquivo, entao o
     cover nao recorta nada na vertical em nenhuma largura de desktop. */
  height:clamp(300px,38.5vw,720px);
  object-position:50% 50%;
}
/* O texto fica a DIREITA porque a pessoa da foto esta no centro-esquerda.
   Com o texto a esquerda ele cobria o rosto. */
.faixa__texto{
  position:absolute; inset:0; display:flex; align-items:center;
  background:linear-gradient(270deg, rgba(22,32,38,.88) 0%,
    rgba(22,32,38,.6) 42%, rgba(22,32,38,.12) 100%);
}
/* container mais largo que o padrao (1200px) so aqui: com 1200 o texto parava
   em cima do ombro/rosto de quem esta na foto.
   O bloco interno existe porque, com o flex direto no .wrap, a frase e a
   assinatura viravam dois itens do flex e ficavam LADO A LADO. */
.faixa__texto .wrap{display:flex; justify-content:flex-end; max-width:1560px}
.faixa__bloco{max-width:24ch}
.faixa__texto blockquote{
  margin:0; font-family:var(--serif); font-size:clamp(1.4rem,3.4vw,2.4rem);
  line-height:1.32; color:#fff; max-width:19ch;
}
.faixa__texto cite{
  display:block; margin-top:20px; font-family:var(--sans); font-style:normal;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ouro-claro);
}
@media (max-width:640px){
  /* na tela estreita o recorte e horizontal e a pessoa fica centralizada,
     entao o texto volta pra esquerda e o escurecimento vem de baixo */
  .faixa__texto{background:linear-gradient(180deg, rgba(22,32,38,.35) 0%,
    rgba(22,32,38,.9) 100%); align-items:flex-end; padding-bottom:26px}
  .faixa__texto .wrap{justify-content:flex-start}
  .faixa__texto blockquote{max-width:100%; font-size:1.5rem}
}

/* ------------------------------------- figura ao lado do conteudo (areas) */
.figura-area{margin:0; position:relative}
.figura-area img{
  width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
}
/* leve tratamento pra foto nao competir com o texto ao lado */
.figura-area::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(43,58,66,.18), rgba(43,58,66,0) 60%);
  pointer-events:none;
}
@media (min-width:860px){
  /* acompanha o topo do texto, sem esticar junto com a lista de servicos */
  .figura-area{position:sticky; top:110px}
}

/* ---------------------------------------------------- par editorial (sobre) */
.par{display:grid; gap:clamp(16px,2.4vw,26px); margin-top:52px;
  grid-template-columns:1fr}
@media (min-width:720px){
  .par{grid-template-columns:1fr 1fr; align-items:start}
  /* a segunda desce um pouco: alinhamento perfeito deixa a dupla estatica */
  .par figure:last-child{margin-top:clamp(28px,5vw,64px)}
}
.par figure{margin:0}
.par img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block}
.par figcaption{
  margin-top:12px; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-3);
}

/* ------------------------------------------------- carrossel de depoimentos
   Marquee continuo em vez de carrossel de slides: nao precisa de setas nem de
   pontinhos, nao trava numa altura fixa por causa do depoimento mais longo, e
   comunica "tem mais" sem exigir clique. Pausa no hover e no foco pra dar
   tempo de ler. */
.trilho{
  position:relative; margin-top:52px;
  /* a fita passa de 6000px: sem conter aqui, a pagina inteira ganha rolagem
     lateral. Contem na origem em vez de esconder no body — esconder no body
     transforma o body em container de rolagem e quebra a rolagem vertical. */
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.trilho__fita{
  display:flex; gap:24px; width:max-content;
  animation:desliza 64s linear infinite;
}
.trilho:hover .trilho__fita,
.trilho:focus-within .trilho__fita{animation-play-state:paused}
@keyframes desliza{
  from{transform:translateX(0)}
  /* -50% porque a fita e duplicada: ao chegar na metade, o conteudo
     visivel e identico ao inicio, entao o salto e imperceptivel */
  to{transform:translateX(-50%)}
}

.depo-card{
  flex:0 0 auto; width:min(420px,80vw);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
  padding:34px 32px; display:flex; flex-direction:column; gap:18px;
  position:relative;
}
.depo-card__aspas{
  font-family:var(--serif); font-size:3.4rem; line-height:.6; color:var(--ouro);
  opacity:.5; height:26px;
}
.depo-card p{
  font-family:var(--serif); font-style:italic; font-size:1.16rem;
  line-height:1.5; color:#E4EBEE; flex:1;
}
.depo-card footer{display:flex; flex-direction:column; gap:3px}
.depo-card__autor{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#fff;
}
.depo-card__contexto{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ouro-claro); opacity:.8;
}
/* os depoimentos ilustrativos ficam visualmente iguais aos reais, a pedido do
   cliente. A distincao permanece so no codigo (real=False em conteudo.py). */

@media (prefers-reduced-motion:reduce){
  .trilho__fita{animation:none; width:auto; overflow-x:auto;
    scroll-snap-type:x mandatory; padding-bottom:14px}
  .depo-card{scroll-snap-align:start}
  .trilho{-webkit-mask-image:none; mask-image:none}
}

/* --------------------------------------------------------------- depoimento */
.depo{text-align:center; max-width:900px; margin:0 auto}
.depo blockquote{
  margin:26px 0 0; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.35rem,3.4vw,2.05rem); line-height:1.38; color:#fff;
}
.depo figcaption{
  margin-top:26px; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ouro-claro);
}

/* -------------------------------------------------------------------- equipe */
.equipe{display:grid; gap:1px; background:var(--fio); margin-top:48px}
@media (min-width:600px){ .equipe{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .equipe{grid-template-columns:repeat(3,1fr)} }
.membro{
  background:var(--papel-2); padding:30px; display:flex;
  align-items:baseline; gap:16px;
}
.membro__ini{
  font-family:var(--serif); font-size:1.5rem; color:var(--ouro);
  line-height:1; min-width:2ch;
}
.membro__nome{font-family:var(--serif); font-size:1.3rem; color:var(--tinta)}

/* ---------------------------------------------------- cabecalho de pagina */
.capa{
  background:var(--petroleo-800); color:#fff; position:relative; overflow:hidden;
  padding:clamp(132px,17vw,190px) 0 clamp(52px,7vw,78px);
}
.capa::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(100% 100% at 85% 0%, rgba(176,141,79,.24) 0%, transparent 58%),
    linear-gradient(155deg, var(--petroleo-900) 0%, var(--petroleo-700) 100%);
}
/* capa com a foto propria da area ao fundo. A imagem ja vem desfocada e
   escura da origem (era fundo de hero la), entao o gradiente por cima so
   precisa garantir contraste do texto. */
.capa--foto{background-size:cover; background-position:center}
.capa--foto::before{
  background:linear-gradient(155deg, rgba(22,32,38,.93) 0%,
    rgba(27,38,44,.82) 45%, rgba(43,58,66,.74) 100%);
}
.capa--foto::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(90% 100% at 88% 10%, rgba(176,141,79,.22) 0%,
    transparent 58%);
}
.capa__interno{position:relative; z-index:2}
.capa h1{color:#fff; margin-top:20px; font-size:clamp(2.1rem,5.6vw,3.6rem)}
.capa__sub{margin-top:20px; color:#B9C6CB; max-width:60ch; font-size:1.05rem}
.migalha{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:6px;
}
.migalha a:hover{color:var(--ouro-claro)}

/* ------------------------------------------------------------ lista servicos */
.servicos{list-style:none; margin:36px 0 0; padding:0; display:grid; gap:1px;
  background:var(--fio)}
.servicos li{
  background:var(--papel-2); padding:20px 24px; display:flex; gap:16px;
  align-items:flex-start; font-size:.98rem; color:var(--tinta-2);
}
.servicos li::before{
  content:""; flex:0 0 auto; width:5px; height:5px; margin-top:11px;
  background:var(--ouro); transform:rotate(45deg);
}

/* ------------------------------------------------------- navegacao entre areas */
.vizinhas{display:grid; gap:1px; background:var(--fio); margin-top:8px}
@media (min-width:700px){ .vizinhas{grid-template-columns:1fr 1fr} }
.vizinha{background:var(--papel-2); padding:28px 30px; transition:background var(--t-rapida)}
.vizinha:hover{background:var(--papel-3)}
.vizinha span{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ouro); display:block; margin-bottom:8px}
.vizinha strong{font-family:var(--serif); font-weight:500; font-size:1.2rem}
.vizinha--fim{text-align:right}
/* lado sem vizinho (primeira/ultima area): celula oca some no fundo da
   pagina, sem bloco cinza, e o link nao troca de coluna */
.vizinha--oca{background:var(--papel); pointer-events:none}
@media (max-width:699px){ .vizinha--oca{display:none} }

/* ------------------------------------------------------------------ contato */
.contato{display:grid; gap:1px; background:var(--fio); margin-top:48px}
@media (min-width:760px){ .contato{grid-template-columns:repeat(3,1fr)} }
.contato__item{background:var(--papel-2); padding:32px 30px}
.contato__item span{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ouro); display:block; margin-bottom:12px}
.contato__item a,.contato__item p{font-size:1.05rem; color:var(--tinta);
  transition:color var(--t-rapida)}
.contato__item a:hover{color:var(--ouro)}

/* ---------------------------------------------------------------------- cta */
.cta{background:var(--petroleo-800); color:#fff; text-align:center;
  position:relative; overflow:hidden}
.cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 120% at 50% 0%, rgba(176,141,79,.22) 0%, transparent 60%);
}
.cta__interno{position:relative; z-index:2}
.cta h2{color:#fff}
.cta p{margin:20px auto 0; color:#B9C6CB; max-width:52ch}
.cta .btn{margin-top:38px}

/* ------------------------------------------------------------------- rodape */
.rodape{background:var(--petroleo-900); color:#94A3A9; padding:72px 0 32px;
  font-size:.9rem}
.rodape__grid{display:grid; gap:44px}
@media (min-width:820px){
  .rodape__grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
}
.rodape img{width:150px; margin-bottom:22px}
.rodape h4{font-family:var(--sans); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ouro); margin-bottom:18px; font-weight:500}
.rodape ul{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:11px}
.rodape a:hover{color:var(--ouro-claro)}
.rodape__base{
  margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:.78rem; color:#6B7A80;
}

/* ------------------------------------------------------- time / especialistas */
/* MOBILE: carrossel deslizavel em vez de grade de 2 colunas.
   Na grade, cada foto ficava com ~150px e o nome quebrava em duas linhas.
   Aqui cada cartao ocupa 66% da tela, a foto fica grande e o corte na borda
   mostra que ha mais gente pro lado, sem exigir seta nem ponto. */
.time{
  display:flex; gap:16px; margin-top:44px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 var(--gutter) 12px; margin-left:calc(var(--gutter) * -1);
  margin-right:calc(var(--gutter) * -1);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.time::-webkit-scrollbar{display:none}
.pessoa{
  display:flex; flex-direction:column;
  flex:0 0 66%; scroll-snap-align:center;
}
@media (min-width:760px){
  .time{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:clamp(20px,3vw,32px); margin:56px 0 0; padding:0; overflow:visible;
  }
  .pessoa{flex:initial}
}
.pessoa__foto{
  position:relative; overflow:hidden; background:var(--papel-3);
  aspect-ratio:4/5;
}
.pessoa__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.02);
  transition:filter var(--t-media), transform var(--t-media);
}
/* preto e branco no repouso, cor no hover: unifica fotos tiradas com
   iluminacoes diferentes e evita o mosaico de tons de pele desencontrados.
   So em aparelho com mouse: no toque o :hover GRUDA depois do tap, e era por
   isso que uma foto aparecia colorida e as outras nao. */
@media (hover:hover){
  .pessoa:hover .pessoa__foto img{filter:grayscale(0); transform:scale(1.03)}
}
/* no celular, a foto centralizada no snap ganha cor: mesma leitura visual,
   sem depender de hover */
@media (hover:none){
  .pessoa__foto img{filter:grayscale(.35) contrast(1.02)}
}
.pessoa__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(22,32,38,.45) 0%, transparent 46%);
  opacity:.85; transition:opacity var(--t-media);
}
.pessoa:hover .pessoa__foto::after{opacity:.4}
.pessoa__nome{
  font-family:var(--serif); font-size:clamp(1.15rem,2.4vw,1.35rem);
  margin-top:14px; color:var(--tinta); line-height:1.2;
  text-wrap:balance;
}
.pessoa__cargo{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ouro); margin-top:5px;
}
/* dica de que da pra arrastar, some no desktop */
.time__dica{
  display:flex; align-items:center; gap:9px; margin-top:14px;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-3);
}
.time__dica::after{content:""; flex:1; height:1px; background:var(--fio)}
@media (min-width:760px){ .time__dica{display:none} }

/* ------------------------------------------------------------- escritorios */
.enderecos{display:grid; gap:1px; background:var(--fio); margin-top:48px}
@media (min-width:800px){ .enderecos{grid-template-columns:repeat(3,1fr)} }
.endereco{background:var(--papel-2); padding:32px 30px}
.endereco h3{font-size:1.3rem; margin-bottom:14px}
.endereco p{font-size:.95rem; color:var(--tinta-2); line-height:1.65}
.endereco__cidade{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ouro); display:block; margin-bottom:10px;
}

/* ------------------------------------------------------------- formulario */
.form{display:grid; gap:20px; margin-top:8px}
@media (min-width:700px){ .form__duplo{display:grid; grid-template-columns:1fr 1fr; gap:20px} }
.campo{display:flex; flex-direction:column; gap:8px}
.campo label{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-3); font-weight:500;
}
.campo input,.campo textarea,.campo select{
  font-family:var(--sans); font-size:1rem; font-weight:300; color:var(--tinta);
  background:var(--papel-2); border:1px solid var(--fio); border-radius:0;
  padding:14px 16px; width:100%; transition:border-color var(--t-rapida),
    box-shadow var(--t-rapida); -webkit-appearance:none; appearance:none;
}
.campo select{background-image:linear-gradient(45deg,transparent 50%,var(--tinta-3) 50%),
  linear-gradient(135deg,var(--tinta-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
.campo textarea{min-height:150px; resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none; border-color:var(--ouro); box-shadow:0 0 0 3px rgba(176,141,79,.13);
}
.campo--erro input,.campo--erro textarea{border-color:#B4443B}
.campo__erro{font-size:.8rem; color:#B4443B; display:none}
.campo--erro .campo__erro{display:block}
.form__aviso{font-size:.82rem; color:var(--tinta-3); line-height:1.6}
.form__estado{padding:16px 20px; font-size:.94rem; display:none}
.form__estado.ok{display:block; background:#E5F0E9; color:#1F6B45;
  border-left:3px solid #1F6B45}
.form__estado.erro{display:block; background:#F8E5E3; color:#96382F;
  border-left:3px solid #96382F}
/* honeypot: invisivel pra gente, irresistivel pra robo */
.form__mel{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ------------------------------------------------------- numeros (bancarios) */
.numeros{display:grid; gap:1px; background:rgba(255,255,255,.12); margin-top:48px}
@media (min-width:640px){ .numeros{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .numeros{grid-template-columns:repeat(4,1fr)} }
.numero{background:var(--petroleo-800); padding:34px 28px}
.numero__valor{
  font-family:var(--serif); font-size:clamp(2.2rem,5vw,3rem); line-height:1;
  color:var(--ouro-claro); font-variant-numeric:tabular-nums;
}
.numero__texto{margin-top:14px; font-size:.9rem; color:#AFBDC3; line-height:1.6}
.numeros__fonte{
  margin-top:24px; font-size:.76rem; color:#7E8D9C; line-height:1.6;
  max-width:80ch;
}

/* ------------------------------------------------------------- recolocacao */
.recoloca{
  background:var(--papel-2); border-left:3px solid var(--ouro);
  padding:clamp(32px,4.5vw,48px); margin-top:8px;
}
.recoloca h3{font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:16px}
.recoloca p{color:var(--tinta-2); max-width:70ch}

/* --------------------------------------------------------- selo de gratuito */
.selo-gratis{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:22px;
  padding:8px 16px; border:1px solid rgba(216,199,156,.45);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ouro-claro); background:rgba(176,141,79,.12);
}
.selo-gratis::before{content:""; width:6px; height:6px; border-radius:50%;
  background:var(--ouro-claro)}

/* ------------------------------------------------------ endereco clicavel */
.endereco a.rota{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ouro); padding-bottom:3px;
  border-bottom:1px solid rgba(176,141,79,.35);
  transition:border-color var(--t-rapida), color var(--t-rapida);
}
.endereco a.rota:hover{border-color:var(--ouro); color:var(--petroleo-700)}
.rodape .unidade{display:block; margin-bottom:14px; line-height:1.5}
.rodape .unidade strong{display:block; color:#C9D4D9; font-weight:500;
  font-size:.86rem; margin-bottom:2px}
.rodape .unidade span{font-size:.8rem; color:#7E8D9C}

/* ---------------------------------------------------------------- bancarios */
.banc-lista{display:grid; gap:1px; background:var(--fio); margin-top:48px}
@media (min-width:700px){ .banc-lista{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .banc-lista{grid-template-columns:repeat(3,1fr)} }
.banc-item{background:var(--papel-2); padding:32px 28px}
.banc-item h3{font-size:1.2rem; margin-bottom:12px}
.banc-item p{font-size:.94rem; color:var(--tinta-2)}

.passos{counter-reset:passo; display:grid; gap:1px; background:var(--fio); margin-top:48px}
@media (min-width:820px){ .passos{grid-template-columns:repeat(3,1fr)} }
.passo{background:var(--papel-2); padding:34px 30px; counter-increment:passo}
.passo::before{
  content:counter(passo,decimal-leading-zero);
  font-family:var(--sans); font-size:.72rem; letter-spacing:.2em;
  color:var(--ouro); display:block; margin-bottom:18px;
}
.passo h3{font-size:1.22rem; margin-bottom:10px}
.passo p{font-size:.94rem; color:var(--tinta-2)}

.prazo{
  background:var(--petroleo-800); color:#fff; padding:clamp(36px,5vw,54px);
  margin-top:8px; border-left:3px solid var(--ouro);
}
.prazo h3{font-size:clamp(1.5rem,3vw,2rem); color:#fff; margin-bottom:16px}
.prazo p{color:#B9C6CB; max-width:62ch}

.aviso-legal{
  margin-top:48px; padding-top:22px; border-top:1px solid var(--fio);
  font-size:.8rem; color:var(--tinta-3); line-height:1.65; max-width:78ch;
}

/* ---------------------------------------------------------- redes no rodape */
.redes{display:flex; gap:18px; margin-top:22px; flex-wrap:wrap}
.redes a{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.18);
  transition:border-color var(--t-rapida), color var(--t-rapida);
}
.redes a:hover{border-color:var(--ouro); color:var(--ouro-claro)}

/* ---------------------------------------------- entrada suave ao rolar
   So esconde se o JS estiver vivo (a classe .js e posta no <head>). Sem isso,
   qualquer falha de script — ou um leitor sem JS, ou o Googlebot — veria a
   pagina inteira em branco. Conteudo institucional nao pode depender de JS. */
.js .revela{opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1)}
.js .revela.visivel{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .revela{opacity:1; transform:none}
}

/* ------------------------------------------------------------------ impressao */
@media print{
  .topo,.gaveta,.cta,.hero__marca{display:none}
  body{background:#fff; color:#000}
  .hero,.capa,.secao--escura,.rodape{background:#fff!important; color:#000!important}
}

/* ==========================================================================
   DEVOLUTIVA DO ESCRITORIO — 22/09/2026
   Cada bloco novo tem classe propria (.dado, .guia, .insight):
   nada de reaproveitar nome que ja existe em outra pagina — .numero, por
   exemplo, pertence a pagina de bancarios.
   ========================================================================== */

/* item 1: a marca d'agua era right:-14% e cortava o monograma no "MO".
   Agora cabe inteira em qualquer largura. */
.hero__marca{
  right:clamp(12px,3vw,60px);
  width:min(520px,56vw);
  opacity:.06;
}

/* item 4: home com 4 pessoas em 4 colunas */
@media (min-width:760px){
  .time--4{grid-template-columns:repeat(4,1fr)}
}
/* pagina NOSSO TIME: grade, sem carrossel */
.time--grade{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  overflow:visible; padding:0; margin:44px 0 0;
  scroll-snap-type:none;
}
.time--grade .pessoa{flex:initial; scroll-snap-align:none}
@media (min-width:760px){
  .time--grade{grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,32px)}
}
/* quem ainda nao mandou retrato: monograma nas mesmas proporcoes da foto */
.pessoa__mono{
  aspect-ratio:4/5; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(176,141,79,.22) 0%, transparent 55%),
    linear-gradient(152deg, var(--petroleo-800) 0%, var(--petroleo-700) 100%);
  color:var(--ouro-claro); font-family:var(--serif); line-height:1;
  font-size:clamp(2.1rem,5vw,2.9rem); letter-spacing:.08em;
}
/* botao "Conheca nosso time", deslocado para a direita como na devolutiva */
.time__acao{display:flex; justify-content:flex-end; margin-top:30px}
@media (max-width:620px){
  .time__acao .btn{width:100%; justify-content:center}
}

/* icones de linha (sobre) */
.icone{display:block}

/* sobre: dados do escritorio (classe propria, .numero e da pag. de bancarios) */
.dados{display:grid; gap:1px; background:var(--fio); margin-top:52px}
@media (min-width:760px){ .dados{grid-template-columns:repeat(3,1fr)} }
.dado{
  background:var(--papel-2); padding:34px 30px;
  display:grid; gap:4px; justify-items:start; align-content:start;
}
.dado .icone{color:var(--ouro); margin-bottom:14px}
.dado strong{
  font-family:var(--serif); font-weight:500; line-height:1;
  font-size:clamp(2.6rem,5vw,3.3rem); color:var(--petroleo-700);
}
.dado span{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ouro); margin-top:8px;
}
.dado p{font-size:.92rem; color:var(--tinta-2); margin-top:6px}

/* sobre: missao, visao e valores com icone */
.guias{display:grid; gap:1px; background:var(--fio); margin-top:56px}
@media (min-width:820px){ .guias{grid-template-columns:repeat(3,1fr)} }
.guia{
  background:var(--papel-2); padding:36px 30px;
  display:grid; gap:14px; align-content:start;
}
.guia .icone{color:var(--ouro)}
.guia__rotulo{
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-3);
}
.guia__texto{
  font-family:var(--serif); font-size:1.2rem; line-height:1.5; color:var(--tinta);
}

/* bancarios: a foto agora estica junto com o quadro de texto (estava
   "desenquadrada do frame", como o escritorio apontou) */
@media (min-width:900px){
  .grid--alinha{align-items:stretch}
  .grid--alinha .figura-area{height:100%; margin:0}
  .grid--alinha .figura-area img{height:100%; width:100%; object-fit:cover; display:block}
  .grid--alinha .recoloca{margin-top:0}
}

/* nossos insights — mosaico (24/09): 1 destaque + 2 medios + 6 na grade.
   Imagens EM COR: o preto e branco tirava a vida dos cartoes (feedback do
   cliente). O p&b segue so nas fotos do time, onde unifica retratos. */
.insights{display:grid; gap:1px; background:var(--fio); margin-top:56px}
.insight{
  background:var(--papel-2); display:flex; flex-direction:column; color:inherit;
}
.insight__foto{aspect-ratio:3/2; overflow:hidden; background:var(--papel-3)}
.insight__foto img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--t-media);
}
@media (hover:hover){
  a.insight:hover .insight__foto img{transform:scale(1.05)}
  a.insight:hover h3{color:var(--ouro)}
}
.insight__miolo{
  padding:26px 28px 28px; display:flex; flex-direction:column; gap:10px; flex:1;
}
.insight__area{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ouro);
}
.insight h3{font-size:1.22rem; line-height:1.25; text-wrap:balance;
  transition:color var(--t-media)}
.insight p{font-size:.92rem; color:var(--tinta-2); flex:1}
.insight__mais{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ouro); display:flex; align-items:center; gap:9px;
}
/* o mosaico: base de 6 colunas no desktop */
@media (min-width:700px){
  .insights{grid-template-columns:repeat(6,1fr)}
  .insight{grid-column:span 3}
}
@media (min-width:1040px){
  .insight{grid-column:span 2}
  .insight--meio{grid-column:span 3}
  .insight--meio h3{font-size:1.42rem}
}
.insight--capa{grid-column:1/-1}
@media (min-width:900px){
  .insight--capa{flex-direction:row; align-items:stretch}
  .insight--capa .insight__foto{flex:0 0 56%; aspect-ratio:auto; min-height:360px}
  .insight--capa .insight__miolo{padding:44px 48px; justify-content:center; gap:14px}
  .insight--capa h3{font-size:clamp(1.6rem,2.6vw,2.1rem)}
  .insight--capa p{flex:0 1 auto; font-size:1rem}
}
/* "leia tambem" dos artigos: sempre em par */
@media (min-width:700px){
  .insights--par{grid-template-columns:repeat(2,1fr)}
  .insights--par .insight{grid-column:auto}
}

/* ==========================================================================
   AJUSTES DE 24/09 — Sobre repaginada + paginas de artigo
   ========================================================================== */

/* pagina de artigo (insights/) */
.capa--artigo{background-size:cover; background-position:center}
.artigo__titulo{max-width:24ch}
.artigo{max-width:820px}
.artigo__abertura{font-size:1.15rem}
.artigo__corpo{margin-top:34px}
.artigo__corpo h2{
  font-size:clamp(1.3rem,2.4vw,1.65rem); margin:40px 0 14px; max-width:30ch;
}
.artigo__p{margin-bottom:16px; max-width:70ch}
.artigo__cta{
  margin-top:48px; padding:30px clamp(22px,4vw,38px);
  background:var(--papel-2); border-left:3px solid var(--ouro);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
}
.artigo__cta p{font-family:var(--serif); font-size:1.25rem; color:var(--tinta); flex:1;
  min-width:200px}

/* banda de apresentacao (sobre) — "muito prazer", dados e redes */
.apresenta{
  background:
    radial-gradient(120% 90% at 80% 6%, rgba(176,141,79,.28) 0%, transparent 55%),
    linear-gradient(152deg, var(--petroleo-900) 0%, var(--petroleo-700) 60%, #33454D 100%);
  padding:clamp(64px,8vw,104px) 0;
}
.apresenta__grid{display:grid; gap:44px; align-items:center}
@media (min-width:900px){
  .apresenta__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}
.apresenta h2{
  color:#fff; font-size:clamp(1.7rem,3.4vw,2.5rem); margin-top:18px; max-width:20ch;
}
.apresenta h2 em{font-style:italic; color:var(--ouro-claro)}
.apresenta p{color:#C2CDD2; margin-top:18px; max-width:52ch; font-weight:300}
.apresenta__redes{display:flex; gap:12px; margin-top:26px}
.apresenta__redes a{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid rgba(216,199,156,.4); border-radius:50%;
  color:var(--ouro-claro); transition:background var(--t-rapida),
    color var(--t-rapida), border-color var(--t-rapida);
}
.apresenta__redes a:hover{background:var(--ouro); border-color:var(--ouro); color:#fff}
.apresenta__tiles{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:rgba(255,255,255,.14);
}
.apresenta__tile{
  background:var(--petroleo-800); padding:28px 26px; display:grid; gap:6px;
}
.apresenta__tile strong{
  font-family:var(--serif); font-weight:500; line-height:1;
  font-size:clamp(2.3rem,4.6vw,3.1rem); color:var(--ouro-claro);
}
.apresenta__tile span{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#AFBDC3;
}

/* letreiro-banner das areas (sobre) */
.letreiro{
  background:var(--petroleo-900); overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:22px 0;
}
.letreiro__pista{display:flex; width:max-content}
.letreiro__fita{
  display:flex; align-items:center; gap:34px; padding-right:34px;
  animation:letreiro 46s linear infinite;
}
.letreiro__fita a{
  font-family:var(--serif); font-size:clamp(1.2rem,2.2vw,1.6rem);
  color:#DCE4E6; white-space:nowrap; transition:color var(--t-rapida);
}
.letreiro__fita a:hover{color:var(--ouro-claro)}
.letreiro__fita span{color:var(--ouro); font-size:.6rem}
.letreiro:hover .letreiro__fita{animation-play-state:paused}
@keyframes letreiro{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .letreiro__fita{animation:none; flex-wrap:wrap; padding:0 var(--gutter)}
  .letreiro__pista{width:auto}
  .letreiro__fita[aria-hidden]{display:none}
}

/* unidades (sobre) */
.unidades-sobre{display:grid; gap:1px; background:var(--fio); margin-top:48px}
@media (min-width:800px){ .unidades-sobre{grid-template-columns:repeat(3,1fr)} }
.unidade-sobre{
  background:var(--papel-2); padding:34px 30px; display:grid; gap:12px;
  align-content:start; color:inherit;
  transition:background var(--t-media);
}
.unidade-sobre h3{font-size:1.5rem}
.unidade-sobre p{font-size:.92rem; color:var(--tinta-2); line-height:1.7}
.unidade-sobre:hover{background:var(--ouro-fraco)}

/* fita de logos dos clientes (25/09, substitui o mural): faixa fina com
   4-5 marcas na tela, deslizando sozinhas -- mesmo truque de fita dupla do
   letreiro de areas. As marcas ja saem dos arquivos em tinta uniforme sobre
   branco puro, entao a fita nao tem moldura nem fundo nenhum. */
.clientes-fita{overflow:hidden; margin-top:40px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.clientes__pista{display:flex; width:max-content}
.clientes__grupo{display:flex; align-items:center;
  gap:clamp(30px,5vw,96px); padding-right:clamp(30px,5vw,96px);
  animation:clientes-fita 70s linear infinite}
/* tile + vao somam ~21vw: da 4-5 logos na tela em qualquer desktop */
.cliente{flex:0 0 auto; width:clamp(116px,16vw,290px)}
.cliente img{display:block; width:100%; height:auto; opacity:.9}
.clientes-fita:hover .clientes__grupo{animation-play-state:paused}
@keyframes clientes-fita{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .clientes__grupo{animation:none; flex-wrap:wrap; padding:0 var(--gutter)}
  .clientes__pista{width:auto}
  .clientes__grupo[aria-hidden]{display:none}
}

/* ======================== 24/09, 2a rodada: compromisso (sobre) ============ */
.compromisso{margin-top:48px; border-top:1px solid var(--fio)}
.compro{
  display:grid; grid-template-columns:64px minmax(0,1fr) 46px;
  gap:20px 26px; align-items:center; padding:26px 6px;
  border-bottom:1px solid var(--fio); color:inherit;
  transition:background var(--t-media), padding var(--t-media);
}
.compro:hover{background:var(--ouro-fraco); padding-left:18px}
.compro__icone{
  width:64px; height:64px; display:grid; place-items:center;
  border:1px solid var(--fio); border-radius:50%; color:var(--ouro);
  background:var(--papel-2);
  transition:border-color var(--t-media), transform var(--t-media);
}
.compro:hover .compro__icone{border-color:var(--ouro); transform:scale(1.06)}
.compro__texto h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
.compro__texto p{font-size:.93rem; color:var(--tinta-2); margin-top:6px; max-width:62ch}
.compro__seta{
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--fio); border-radius:50%; color:var(--tinta-2);
  transition:background var(--t-rapida), color var(--t-rapida),
    border-color var(--t-rapida), transform var(--t-media);
}
.compro:hover .compro__seta{
  background:var(--petroleo-700); border-color:var(--petroleo-700);
  color:#fff; transform:translateX(6px);
}
/* o traco dos icones se desenha quando a linha entra na tela */
.compro .icone *{stroke-dasharray:1; stroke-dashoffset:1}
.compro.visivel .icone *{animation:desenha 1.1s ease forwards}
.compro.visivel .icone *:nth-child(2){animation-delay:.25s}
.compro.visivel .icone *:nth-child(3){animation-delay:.5s}
@keyframes desenha{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .compro .icone *{stroke-dasharray:none; stroke-dashoffset:0; animation:none}
}
@media (max-width:640px){
  .compro{grid-template-columns:52px minmax(0,1fr)}
  .compro__icone{width:52px; height:52px}
  .compro__seta{display:none}
}

/* 24/09, 3a rodada: respiro entre os cartoes do mosaico (estavam colados
   na grade de fio de 1px). Cartao ganha moldura propria. */
.insights{gap:clamp(18px,2.4vw,30px); background:transparent}
.insight{border:1px solid var(--fio)}