/* ============================================================
   FAHMA CONSULTORIA — FOLHA DE ESTILO
   ------------------------------------------------------------
   Para trocar QUALQUER cor do site, altere apenas o bloco
   :root logo abaixo. Nada de cor está escrito fora daqui.
   ============================================================ */

:root{
  /* ---- CORES PRINCIPAIS (manual de marca) ---- */
  --preto:          #1b1c1d;
  --azul-profundo:  #114788;
  --azul-vibrante:  #005ba5;

  /* ---- CORES DE APOIO (manual de marca) ---- */
  --cinza-azulado:  #d3d7e6;
  --bege:           #d0cab5;

  /* ---- NEUTROS DE INTERFACE ---- */
  --claro:          #f5f6f8;
  --branco:         #ffffff;
  --texto-claro:    #c9ccd4;
  --texto-escuro:   #4a4f58;
  --borda-clara:    rgba(211,215,230,.14);
  --borda-escura:   #d9dde4;

  /* ---- TIPOGRAFIA ----
     Techna Sans e Good Times são licenciadas e não têm versão
     web gratuita. As substitutas abaixo têm o mesmo caráter
     geométrico. Tendo os arquivos oficiais, troque só estas
     duas linhas.                                             */
  --fonte-titulo: 'Poppins', system-ui, -apple-system, sans-serif;
  --fonte-texto:  'Inter', system-ui, -apple-system, sans-serif;

  /* ---- EFEITOS DE FUNDO ----
     Controlam a intensidade das manchas de luz e da textura.
     Coloque 0 em qualquer uma para desligar o efeito.        */
  --brilho-forte: .42;   /* núcleo da mancha de luz          */
  --brilho-suave: .16;   /* halo externo da mancha           */
  --grao: .035;          /* textura granulada sobre o site   */
  --respiro: 24s;        /* tempo do ciclo de luz (maior = mais lento) */

  /* ---- VÉU SOBRE O VÍDEO DO TOPO ----
     Escurece o vídeo para o título continuar legível.
     Menor = vídeo mais visível. Maior = texto mais seguro.
     Use os dois juntos: o primeiro controla a faixa da esquerda
     (onde fica o texto), o segundo o restante da cena.        */
  --veu-texto: .82;
  --veu-cena:  .18;

  /* ---- CARROSSEL DE CLIENTES ----
     Largura máxima de cada logo na tela. Aumente para logos
     maiores (ex.: 320px); diminua para caberem mais por vez.  */
  --logo-largura: 230px;

  /* ---- MEDIDAS ---- */
  --largura-max: 1180px;
  --margem-lateral: clamp(20px, 5vw, 48px);
  --raio: 12px;
}

/* ======================= BASE ======================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--fonte-texto);
  background:var(--preto);
  color:var(--branco);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--largura-max);margin:0 auto;padding-inline:var(--margem-lateral)}

/* ================== TIPOGRAFIA ==================== */
h1,h2,h3{font-family:var(--fonte-titulo);font-weight:600;line-height:1.14;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5.2vw,4rem)}
h2{font-size:clamp(1.7rem,3.5vw,2.65rem)}
h3{font-size:1.18rem}
p{color:var(--texto-claro);font-size:1.02rem}

/* Rótulo de seção — herda o tracking largo de "CONSULTORIA" no logo */
.rotulo{
  font-family:var(--fonte-titulo);
  font-size:.68rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--bege);margin-bottom:22px;
}

/* ==================== ÍCONES ====================== */
/* Todos os ícones do site usam traço, nunca preenchimento.
   Para mudar a cor, altere a variável ou estas duas regras.  */
.icone{
  width:34px;height:34px;flex:none;
  fill:none;stroke:var(--azul-vibrante);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.icone-bege{stroke:var(--bege)}
.icone-mini{width:18px;height:18px;stroke-width:2}

/* ==================== BOTÕES ====================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fonte-titulo);font-size:.9rem;font-weight:500;
  padding:15px 30px;border-radius:6px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s,background .25s,border-color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primario{background:var(--azul-vibrante);color:var(--branco)}
.btn-primario:hover{background:#0069bd}
.btn-linha{border-color:rgba(211,215,230,.34);color:var(--cinza-azulado)}
.btn-linha:hover{border-color:var(--cinza-azulado)}
:focus-visible{outline:2px solid var(--bege);outline-offset:3px}

/* ============================================================
   EFEITOS DE FUNDO
   Tudo é CSS: nenhuma imagem extra, nenhum JavaScript.
   As intensidades saem das variáveis --brilho-* e --grao.
   ============================================================ */

/* textura granulada sobre o site inteiro — tira o aspecto
   "chapado" dos degradês e evita faixas de cor na tela      */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:var(--grao);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* toda seção vira palco: o conteúdo fica na frente da luz */
.secao{position:relative;isolation:isolate;overflow:hidden}
.secao > .wrap{position:relative;z-index:2}

/* mancha de luz que respira devagar */
.brilho-dir::before,
.brilho-esq::before,
.brilho-centro::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(900px,92vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,
    rgba(0,91,165,var(--brilho-forte)) 0%,
    rgba(17,71,136,var(--brilho-suave)) 40%,
    transparent 68%);
  animation:respira var(--respiro) ease-in-out infinite;
}
.brilho-dir::before{right:-16%;top:-24%}
.brilho-esq::before{left:-18%;bottom:-28%;animation-duration:31s;animation-direction:reverse}
/* centralizada sem usar transform, que já é usado pela animação */
.brilho-centro::before{left:50%;margin-left:calc(-1 * min(900px,92vw) / 2);top:-34%;animation-duration:28s}

@keyframes respira{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(-3%,4%,0) scale(1.13)}
}

/* seções claras: degradê suave + leve reflexo azul no topo */
.secao-clara{background:linear-gradient(180deg,#fff 0%,var(--claro) 42%)}
.secao-branca{background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%)}
.secao-clara::before,
.secao-branca::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 46% at 88% 0%, rgba(0,91,165,.075), transparent 70%);
}

/* seções azuis: malha de degradês em vez de cor chapada */
.secao-azul{
  background:
    radial-gradient(115% 85% at 8% 0%,    rgba(0,91,165,.62) 0%, transparent 56%),
    radial-gradient(95% 80% at 100% 100%, rgba(27,28,29,.58) 0%, transparent 62%),
    var(--azul-profundo);
}

/* profundidade nos blocos que ficam sobre fundo escuro */
.card{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 20px 44px -24px rgba(0,91,165,.85)}
.socio{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

/* ==================== CABEÇALHO =================== */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(27,28,29,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(211,215,230,.09);
}
.topo-interno{display:flex;align-items:center;justify-content:space-between;height:76px}
.marca{display:flex;align-items:center;gap:12px}
/* logo oficial. Altura no topo: 34px. No rodapé: 40px. */
.marca-logo{height:44px;width:auto}
.rodape .marca-logo{height:50px}
.marca-glifo{width:38px;height:38px;flex:none}
.marca-txt{display:flex;flex-direction:column;line-height:1}
.marca-nome{font-family:var(--fonte-titulo);font-size:1.32rem;font-weight:600;letter-spacing:-.02em}
.marca-sub{font-family:var(--fonte-titulo);font-size:.5rem;font-weight:500;letter-spacing:.42em;color:var(--azul-vibrante);margin-top:4px}
.menu{display:flex;align-items:center;gap:28px}
.menu a{font-size:.89rem;color:var(--cinza-azulado);transition:color .2s;white-space:nowrap}
.menu a:hover{color:var(--branco)}
.menu .btn{padding:11px 22px}
.menu-abrir{display:none;background:none;border:0;color:var(--branco);font-size:1.5rem;cursor:pointer;padding:6px;line-height:1}

/* ====================== HERO ====================== */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:150px 0 110px;overflow:hidden;
}
/* o vídeo cobre a área toda, como uma foto de fundo */
.hero-fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hero-veu{
  position:absolute;inset:0;z-index:1;
  background:
    /* 1. sombra concentrada atrás do texto, some antes da metade */
    linear-gradient(100deg,
      rgba(12,14,17,var(--veu-texto)) 0%,
      rgba(12,14,17,calc(var(--veu-texto) * .74)) 26%,
      rgba(12,14,17,calc(var(--veu-texto) * .32)) 46%,
      transparent 62%),
    /* 2. véu leve na cena inteira, só para firmar o contraste */
    linear-gradient(180deg,
      rgba(12,14,17,calc(var(--veu-cena) + .12)) 0%,
      rgba(12,14,17,var(--veu-cena)) 45%,
      rgba(12,14,17,calc(var(--veu-cena) + .1)) 100%),
    /* 3. emenda com a seção seguinte */
    linear-gradient(0deg, var(--preto) 0%, transparent 26%);
}
/* sombra no próprio texto: permite clarear o véu sem perder leitura */
.hero h1{text-shadow:0 2px 28px rgba(8,10,13,.72)}
.hero-texto,.hero .rotulo{text-shadow:0 1px 16px rgba(8,10,13,.8)}
.hero::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  right:-12%;top:-14%;width:min(920px,88vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,
    rgba(0,91,165,.48) 0%, rgba(17,71,136,.15) 42%, transparent 68%);
  animation:respira 27s ease-in-out infinite;
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{max-width:16ch}
.hero h1 em{font-style:normal;color:var(--cinza-azulado)}
.hero-texto{max-width:52ch;margin:30px 0 42px;font-size:1.1rem}
.hero-acoes{display:flex;flex-wrap:wrap;gap:14px}


/* ==================== SEÇÕES ====================== */
.secao{padding:110px 0}
.secao-clara{background:var(--claro)}
.secao-branca{background:var(--branco)}
.secao-clara,.secao-branca{color:var(--preto)}
.secao-clara h2,.secao-clara h3,
.secao-branca h2,.secao-branca h3{color:var(--preto)}
.secao-clara p,.secao-branca p{color:var(--texto-escuro)}
.secao-clara .rotulo,.secao-branca .rotulo{color:var(--azul-vibrante)}
.secao-azul{background:var(--azul-profundo)}

.cabecalho{max-width:64ch;margin-bottom:60px}
.cabecalho p{margin-top:22px;font-size:1.05rem}
.cabecalho p + p{margin-top:16px}

/* --------- bloco texto + imagem (Quem somos) --------- */
.duplo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.duplo-figura{position:relative;border-radius:var(--raio);overflow:hidden}
.duplo-figura img{width:100%;height:auto;object-fit:contain;aspect-ratio:10/9}
.duplo-texto p + p{margin-top:16px}

/* pilares de crença */
.pilares{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--borda-escura);margin-top:56px}
.pilar{background:var(--claro);padding:32px 26px}
.pilar-icone{width:46px;height:46px;object-fit:contain;margin-bottom:20px}
.pilar strong{display:block;font-family:var(--fonte-titulo);font-size:1rem;font-weight:600;margin-bottom:10px;color:var(--azul-profundo)}
.pilar span{font-size:.93rem;color:#5a5f68;line-height:1.55}

/* ------- Propósito / Missão / Visão ------- */
.pmv{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pmv-item{border-top:2px solid var(--bege);padding-top:26px}
.pmv-item .icone{margin-bottom:20px}
.pmv-item h3{
  font-size:.72rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--bege);margin-bottom:16px;
}
.pmv-item p{
  font-family:var(--fonte-titulo);font-weight:500;font-size:1.12rem;
  line-height:1.42;letter-spacing:-.01em;color:var(--branco);
}

/* ---- seção O QUE RESOLVEMOS: arte da marca ao fundo ---- */
.resolvemos{background:var(--preto)}
.resolvemos-fundo{
  position:absolute;right:0;bottom:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:right center;
  pointer-events:none;
}
.resolvemos::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    var(--preto) 0%, rgba(27,28,29,.92) 34%, rgba(27,28,29,.55) 62%, transparent 100%);
}
.resolvemos > .wrap{z-index:3}

/* --------------- cards de problema --------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.card{
  background:linear-gradient(160deg,rgba(17,71,136,.3),rgba(20,21,23,.82));
  backdrop-filter:blur(3px);
  border:1px solid var(--borda-clara);border-radius:var(--raio);padding:38px 32px;
  transition:border-color .3s,transform .3s;
}
.card:hover{border-color:rgba(0,91,165,.75);transform:translateY(-5px)}
.card .icone{margin-bottom:24px}
.card h3{margin-bottom:14px}
.card p{font-size:.97rem}

/* ============ POR QUE A FAHMA (diferencial) ============ */
.contraste{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-bottom:64px}
.contraste-titulo{
  font-family:var(--fonte-titulo);font-size:.72rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;margin-bottom:26px;
}
.contraste-nao .contraste-titulo{color:#9aa0aa}
.contraste-sim .contraste-titulo{color:var(--azul-vibrante)}
.contraste ul{list-style:none;display:grid;gap:16px}
.contraste li{display:flex;gap:14px;align-items:flex-start;font-size:1rem;line-height:1.5}
.contraste-nao li{color:#8a9099}
.contraste-nao .icone-mini{stroke:#b6bcc5}
.contraste-sim li{color:var(--preto);font-weight:500}
.contraste li svg{margin-top:3px}

.competencias-titulo{
  font-family:var(--fonte-titulo);font-size:.72rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--azul-vibrante);
  margin-bottom:22px;
}
.competencias{display:flex;flex-wrap:wrap;gap:12px}
.competencias span{
  font-family:var(--fonte-titulo);font-size:.88rem;font-weight:500;
  color:var(--azul-profundo);background:var(--claro);
  border:1px solid var(--borda-escura);border-radius:100px;padding:11px 22px;
}
.fecho{
  margin-top:56px;padding-top:34px;border-top:1px solid var(--borda-escura);
  font-family:var(--fonte-titulo);font-size:clamp(1.15rem,2vw,1.5rem);
  font-weight:500;line-height:1.4;letter-spacing:-.01em;
  color:var(--azul-profundo);max-width:34ch;
}

/* ============ FAIXA DE CLIENTES (carrossel) ============
   O trilho contém a lista de logos DUAS VEZES. A animação
   desloca -50%, o que faz a emenda ficar invisível e o giro
   parecer infinito. Ao adicionar ou remover um logo, faça a
   mesma alteração nas duas listas do index.html.          */
.clientes{padding:76px 0;background:var(--branco);border-top:1px solid var(--borda-escura);border-bottom:1px solid var(--borda-escura)}
.clientes-titulo{
  font-family:var(--fonte-titulo);font-size:.68rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:#8a9099;
  text-align:center;margin-bottom:38px;
}
.carrossel{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.carrossel-trilho{display:flex;width:max-content;animation:desliza 95s linear infinite}
.carrossel:hover .carrossel-trilho,
.carrossel:focus-within .carrossel-trilho{animation-play-state:paused}
/* A largura do item já inclui o respiro lateral (box-sizing: border-box).
   Item 420px - 2x30px de padding = logo exibido com até 360px de largura. */
.carrossel-item{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:calc(var(--logo-largura) + 60px);padding-inline:30px;
}
.carrossel-item img{
  width:100%;height:auto;max-height:96px;object-fit:contain;
  opacity:.9;transition:opacity .3s,transform .3s;
}
.carrossel-item img:hover{opacity:1;transform:scale(1.06)}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:820px){
  .clientes{padding:48px 0}
  .carrossel-item{width:calc(var(--logo-largura) * .8 + 40px);padding-inline:20px}
  .carrossel-item img{max-height:72px}
}

/* ------------- método: 4 etapas em degrau -------------
   O marcador (ponto + régua) fica SEMPRE acima do texto de
   cada etapa. Nada cruza a leitura.                        */
.metodo-figura{border-radius:var(--raio);overflow:hidden;margin-bottom:70px}
.metodo-figura img{width:100%;aspect-ratio:2/1;object-fit:cover}
.etapas{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.etapa:nth-child(1){padding-top:120px}
.etapa:nth-child(2){padding-top:80px}
.etapa:nth-child(3){padding-top:40px}
.etapa:nth-child(4){padding-top:0}
.etapa-marcador{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.etapa-ponto{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:var(--azul-vibrante);box-shadow:0 0 0 5px rgba(0,91,165,.13);
}
.etapa-regua{flex:1;height:2px;background:linear-gradient(90deg,rgba(0,91,165,.5),rgba(0,91,165,.06))}
.etapa-n{font-family:var(--fonte-titulo);font-size:.72rem;font-weight:600;letter-spacing:.3em;color:var(--azul-vibrante);display:block;margin-bottom:10px}
.etapa h3{margin-bottom:10px}
.etapa p{font-size:.93rem}

/* -------------------- sócios -------------------- */
.socios{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.socio{border:1px solid var(--borda-clara);border-radius:var(--raio);overflow:hidden;background:rgba(255,255,255,.02)}
.socio-foto{width:100%;aspect-ratio:4/5;object-fit:cover}
.socio-corpo{padding:34px}
.socio-nome{font-family:var(--fonte-titulo);font-size:1.42rem;font-weight:600;margin-bottom:6px}
.socio-papel{font-family:var(--fonte-titulo);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bege);margin-bottom:22px}
.socio p{font-size:.96rem}

/* ------------------ manifesto -------------------
   A arte ocupa a faixa inteira (sócios à direita) e o texto
   fica sobre a área livre da esquerda, como na referência.   */
.manifesto{background:var(--preto);min-height:560px;display:flex;align-items:center}
.manifesto-fundo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:right center;
}
.manifesto-veu{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(9,20,38,.94) 0%, rgba(9,20,38,.86) 30%,
      rgba(9,20,38,.42) 52%, transparent 68%),
    linear-gradient(0deg, rgba(9,20,38,.55) 0%, transparent 30%);
}
.manifesto .wrap{position:relative;z-index:2;width:100%}
.manifesto-texto{max-width:56ch}
.manifesto blockquote{
  font-family:var(--fonte-titulo);font-size:clamp(1.08rem,1.75vw,1.42rem);
  font-weight:500;line-height:1.5;letter-spacing:-.01em;text-align:left;
  text-shadow:0 2px 22px rgba(5,10,20,.7);
}
.manifesto-assinatura{margin-top:26px;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cinza-azulado)}

/* ================= DEPOIMENTOS =================
   Carrossel de leitura: um depoimento por vez, com avanço
   automático, setas e pontos. Pausa sozinho quando o mouse
   está em cima ou quando algo dentro recebe foco.          */
.dep-carrossel{position:relative}
.dep-palco{overflow:hidden;max-width:900px;margin:0 auto}
.dep-trilho{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.dep-slide{flex:0 0 100%;padding:0 6px;display:flex;flex-direction:column;justify-content:center}
.dep-aspas{width:44px;height:44px;fill:var(--bege);stroke:none;opacity:.5;margin-bottom:26px}
.dep-texto{
  font-family:var(--fonte-titulo);font-weight:500;
  font-size:clamp(1.02rem,1.65vw,1.32rem);line-height:1.5;
  letter-spacing:-.01em;color:var(--branco);
}
.dep-texto + .dep-texto{margin-top:16px;font-weight:400;color:#dcdfe6}
.dep-palco{max-width:820px}
.dep-autor{display:flex;align-items:center;gap:16px;margin-top:34px}
.dep-inicial{
  width:52px;height:52px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fonte-titulo);font-size:.98rem;font-weight:600;
  color:var(--branco);background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
}
.dep-nome{font-family:var(--fonte-titulo);font-size:1rem;font-weight:600;color:var(--branco);line-height:1.3}
.dep-cargo{font-size:.88rem;color:var(--cinza-azulado);line-height:1.3}
.dep-controles{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:48px}
.dep-seta{
  width:46px;height:46px;flex:none;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.28);
  color:var(--branco);display:flex;align-items:center;justify-content:center;
  transition:background .25s,border-color .25s;
}
.dep-seta:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
.dep-seta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dep-pontos{display:flex;gap:9px}
.dep-ponto{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.3);transition:background .25s,width .25s;
}
.dep-ponto[aria-current="true"]{background:var(--branco);width:24px;border-radius:100px}
@media(max-width:820px){
  .dep-controles{gap:18px;margin-top:36px}
  .dep-autor{margin-top:28px}
}
@media (prefers-reduced-motion: reduce){
  .dep-trilho{transition:none}
}

/* ---- botão flutuante de WhatsApp ---- */
.zap{
  position:fixed;right:22px;bottom:22px;z-index:120;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25d366;box-shadow:0 10px 30px -8px rgba(0,0,0,.55);
  transition:transform .25s,box-shadow .25s;
}
.zap:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 34px -8px rgba(0,0,0,.6)}
.zap svg{width:32px;height:32px;fill:#fff}
@media(max-width:820px){
  .zap{right:16px;bottom:16px;width:54px;height:54px}
  .zap svg{width:29px;height:29px}
}

/* ------------------- contato -------------------- */
.contato-grade{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.contato-lista{list-style:none;display:grid;gap:20px;margin-top:32px}
.contato-lista li{display:flex;gap:14px;font-size:.97rem;color:var(--texto-escuro)}
.contato-lista b{font-family:var(--fonte-titulo);font-weight:600;color:var(--azul-profundo);min-width:92px;flex:none}
.contato-lista a{color:var(--texto-escuro);border-bottom:1px solid rgba(0,91,165,.28);transition:color .2s,border-color .2s}
.contato-lista a:hover{color:var(--azul-vibrante);border-color:var(--azul-vibrante)}
.form{display:grid;gap:18px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo label{font-family:var(--fonte-titulo);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6b707a}
.campo input,.campo select,.campo textarea{
  font-family:var(--fonte-texto);font-size:.98rem;color:var(--preto);
  padding:14px 16px;border:1px solid var(--borda-escura);border-radius:6px;background:var(--branco);
}
.campo textarea{resize:vertical;min-height:110px}
.mel{position:absolute;left:-9999px}
.form-aviso{font-size:.94rem;padding:14px 16px;border-radius:6px;display:none}
.form-aviso.ok{display:block;background:#e8f1f9;color:#114788;border:1px solid #b9d3e9}
.form-aviso.erro{display:block;background:#fdecec;color:#8c2b2b;border:1px solid #f0c4c4}

/* -------------------- rodapé -------------------- */
.rodape{background:var(--preto);border-top:1px solid rgba(211,215,230,.1);padding:70px 0 32px}
.rodape-grade{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;margin-bottom:50px}
.rodape p{font-size:.94rem;max-width:42ch;margin-top:22px}
.rodape h4{font-family:var(--fonte-titulo);font-size:.7rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--bege);margin-bottom:20px}
.rodape ul{list-style:none;display:grid;gap:12px}
.rodape ul a{font-size:.93rem;color:var(--cinza-azulado)}
.rodape ul a:hover{color:var(--branco)}
.rodape-base{border-top:1px solid rgba(211,215,230,.1);padding-top:26px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;font-size:.84rem;color:#7d828c}

/* ---- ícones de redes sociais no rodapé ---- */
.sociais{display:flex;align-items:center;gap:12px;order:0}
.sociais a{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(211,215,230,.2);
  transition:border-color .25s,background .25s,transform .25s;
}
.sociais a:hover{
  border-color:var(--azul-vibrante);
  background:rgba(0,91,165,.16);
  transform:translateY(-2px);
}
.sociais svg{width:17px;height:17px;fill:var(--cinza-azulado);transition:fill .25s}
.sociais a:hover svg{fill:var(--branco)}
@media(max-width:640px){
  .rodape-base{justify-content:center;text-align:center;gap:20px}
  .sociais{order:-1;width:100%;justify-content:center}
}

/* ---------------- revelação em scroll ------------- */
.rev{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rev.visivel{opacity:1;transform:none}

/* ==================================================
   RESPONSIVO
   ================================================== */
@media(max-width:1080px){
  .menu{gap:20px}
  .menu a{font-size:.84rem}
}
@media(max-width:980px){
  .duplo{grid-template-columns:1fr;gap:44px}
  .contato-grade{grid-template-columns:1fr;gap:46px}
  .pmv{grid-template-columns:1fr;gap:34px}
  .contraste{grid-template-columns:1fr;gap:40px;margin-bottom:48px}
}
@media(max-width:900px){
  .menu{
    position:fixed;top:76px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--preto);padding:8px var(--margem-lateral) 26px;
    border-bottom:1px solid rgba(211,215,230,.12);display:none;
  }
  .menu.aberto{display:flex}
  .menu a{width:100%;padding:15px 0;border-bottom:1px solid rgba(211,215,230,.08);font-size:.95rem}
  .menu .btn{margin-top:18px;width:100%;border-bottom:0}
  .menu-abrir{display:block}
}
@media(max-width:820px){
  .secao{padding:80px 0}
  /* no celular o texto passa por cima dos sócios: véu vertical */
  .manifesto{min-height:auto}
  .manifesto-fundo{object-position:72% top;opacity:.42}
  .manifesto-veu{
    background:linear-gradient(180deg,rgba(9,20,38,.6) 0%,rgba(9,20,38,.9) 45%,rgba(9,20,38,.96) 100%);
  }
  /* no celular a arte lateral fica atrás dos cards: escurece mais */
  .resolvemos-fundo{object-position:75% center;opacity:.5}
  .resolvemos::after{
    background:linear-gradient(180deg,rgba(27,28,29,.72) 0%,rgba(27,28,29,.88) 55%,var(--preto) 100%);
  }
  .etapas{grid-template-columns:1fr;gap:0}
  .etapa:nth-child(1),.etapa:nth-child(2),.etapa:nth-child(3),.etapa:nth-child(4){
    padding:28px 0 28px 24px;border-left:2px solid rgba(0,91,165,.3);
  }
  .etapa-marcador{margin-left:-30px;margin-bottom:16px}
  .etapa-regua{display:none}
  .socios{grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:1fr;gap:34px}
  .hero{min-height:auto;padding:130px 0 80px}
  .hero-veu{
    background:
      linear-gradient(180deg,
        rgba(12,14,17,.42) 0%,
        rgba(12,14,17,.72) 38%,
        rgba(12,14,17,.9) 72%,
        var(--preto) 100%);
  }
}

/* ---------- acessibilidade: movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover{transform:none}
  .carrossel-trilho{animation:none}
  .brilho-dir::before,.brilho-esq::before,.brilho-centro::before,.hero::after{animation:none}
  .carrossel{overflow-x:auto}
}