/* ============================================================
   MAXI LEAD — ASSESSORIA COMERCIAL
   HTML/CSS/JS puro. Padrão da casa: site-institucional-html.

   IDENTIDADE: Direção de Identidade Visual (21/08/2026), com o
   escuro fechado para #101A26 em 04/09/2026, por decisão do Daniel.
   Regra soberana: CLARO DOMINA · ESCURO ESTRUTURA · ACENTO PONTUA.
   ============================================================ */

/* ============================================================
   1. TOKENS — tudo que muda vive aqui
   ============================================================ */
:root{
  --fonte-titulo:'Archivo','Helvetica Neue',Arial,sans-serif;
  --fonte-texto:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fonte-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --escuro:#101a26;          /* header, rodapé, seções institucionais */
  --escuro-2:#1d2b3a;        /* card dentro do escuro */
  --escuro-3:#2a3a4a;        /* borda dentro do escuro */
  --claro:#e8e2d5;           /* fundo principal */
  --superficie:#f0ebdf;      /* fundo alternado, quase imperceptível */
  --off-white:#f5f1e8;

  --texto:#101a26;
  --texto-sec:#5f5647;
  --texto-esc:#a9b4c0;       /* texto secundário sobre o escuro */

  --acento:#8a5c26;          /* botão e destaque */
  --acento-esc:#7d5423;      /* hover e link em texto */
  --acento-claro:#c89a5a;    /* acento sobre o escuro */
  --borda:#bcb098;
  --borda-esc:rgba(245,241,232,.13);
  --whatsapp:#137a41;

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:100px;
  --sombra-sm:0 1px 3px rgba(16,26,38,.07);
  --sombra-md:0 6px 22px rgba(16,26,38,.10);
  --sombra-lg:0 18px 48px rgba(16,26,38,.16);

  --container:1200px;
  --header-h:74px;
  --altura-aviso:0px;

  /* Textura da marca: camadas deslocadas. Linguagem de forma aprovada
     na Direção ("Camadas — blocos empilhados de espessuras diferentes"). */
  --trama:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cg fill='%23101A26'%3E%3Crect x='0' y='10' width='58' height='3'/%3E%3Crect x='68' y='10' width='72' height='3'/%3E%3Crect x='14' y='31' width='86' height='3'/%3E%3Crect x='110' y='31' width='30' height='3'/%3E%3Crect x='0' y='52' width='40' height='3'/%3E%3Crect x='50' y='52' width='90' height='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;background:var(--claro);color:var(--texto);
  font-family:var(--fonte-texto);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:2px}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
section{padding:clamp(56px,7.5vw,104px) 0;position:relative}

/* ---- LARGURA: o texto nunca tem 1200px (skill, seção 0) ---- */
.cabecalho-secao{max-width:720px;margin-bottom:clamp(36px,4.5vw,56px)}
.cabecalho-secao--largo{max-width:900px}
.hero-texto{max-width:620px}
.hero-texto p{max-width:520px}
.faq{max-width:820px}
.legal-corpo .container{max-width:760px}

h1,h2,h3,h4{margin:0;font-family:var(--fonte-titulo);font-weight:600;text-wrap:balance}
h1{font-size:clamp(2.05rem,4.4vw,3.2rem);line-height:1.07;letter-spacing:-.028em}
/* A quebra do H1 é decidida, não sorteada. Sem ela, o balanceamento automático
   termina uma linha em "e o", que é órfã, e faz isso tanto no desktop quanto no
   celular. Vale em toda largura: no desktop dá duas linhas, no celular dá três,
   e nas duas a frase quebra na vírgula, que é onde ela respira. */
.quebra-titulo{display:inline}
h2{font-size:clamp(1.55rem,3.2vw,2.35rem);line-height:1.14;letter-spacing:-.022em}
h3{font-size:1.08rem;line-height:1.32;letter-spacing:-.01em}
p{margin:0}

.etiqueta{
  display:inline-block;font-family:var(--fonte-mono);
  font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--texto-sec);margin-bottom:16px;
}
.secao-escura .etiqueta{color:var(--acento-claro)}
.lead{font-size:clamp(1rem,1.6vw,1.13rem);line-height:1.6;color:var(--texto-sec);margin-top:14px}
.secao-escura .lead{color:var(--texto-esc)}

/* ---- fundos e textura ---- */
.secao-clara{background:var(--claro)}
.secao-superficie{background:var(--superficie);border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
.secao-escura{background:var(--escuro);color:var(--off-white)}
.secao-escura h1,.secao-escura h2,.secao-escura h3{color:var(--off-white)}

.com-trama{overflow:hidden}
.com-trama::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--trama);background-size:140px 70px;opacity:.022;
}
.secao-escura.com-trama::before{opacity:.05;filter:invert(1)}
.com-trama > *{position:relative;z-index:1}

/* ============================================================
   3. BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:var(--r-pill);border:1px solid transparent;
  font-family:var(--fonte-texto);font-size:.97rem;font-weight:600;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none;fill:currentColor}

.btn--acento{background:var(--acento);color:var(--off-white);box-shadow:var(--sombra-sm)}
.btn--acento:hover{background:var(--acento-esc);box-shadow:var(--sombra-md)}
.btn--wa{background:var(--whatsapp);color:#fff;box-shadow:var(--sombra-sm)}
.btn--wa:hover{background:#0f6636;box-shadow:var(--sombra-md)}
.btn--fantasma{background:transparent;color:var(--off-white);border-color:var(--borda-esc)}
.btn--fantasma:hover{border-color:var(--off-white)}
.btn--linha{background:transparent;color:var(--texto);border-color:var(--borda)}
.btn--linha:hover{border-color:var(--texto)}

/* link de texto com seta que anda */
.link-seta{
  display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;
  color:var(--acento-esc);transition:gap .2s ease,color .2s ease;
}
.link-seta:hover{gap:13px}
.secao-escura .link-seta{color:var(--acento-claro)}

/* ============================================================
   4. CABEÇALHO
   ============================================================ */
.cabecalho-site{
  position:sticky;top:0;z-index:100;
  background:rgba(16,26,38,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.cabecalho-site.rolado{
  border-bottom-color:var(--borda-esc);
  box-shadow:0 2px 20px rgba(16,26,38,.3);
}
.cabecalho-site .container{
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:22px;
}
.marca{display:flex;align-items:center;gap:14px;flex:none}
.marca img{height:32px;width:auto}
.marca span{
  font-family:var(--fonte-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texto-esc);white-space:nowrap;
}
.menu{display:flex;align-items:center;gap:32px}
.menu a{
  position:relative;font-size:.94rem;font-weight:500;color:var(--texto-esc);
  padding-bottom:4px;transition:color .2s ease;
}
.menu a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;
  background:var(--acento-claro);transition:width .25s ease;
}
.menu a:hover{color:var(--off-white)}
.menu a:hover::after{width:100%}
.cabecalho-site .btn{padding:12px 22px;font-size:.88rem}

.menu-btn{
  display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--off-white);
}
.menu-btn svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
.menu-painel{
  display:none;position:fixed;inset:var(--header-h) 0 0;z-index:99;
  background:var(--escuro);padding:34px clamp(20px,5vw,40px);
  flex-direction:column;gap:4px;overflow-y:auto;
}
.menu-painel.aberto{display:flex}
.menu-painel a:not(.btn){
  padding:18px 0;font-size:1.15rem;font-weight:500;color:var(--off-white);
  border-bottom:1px solid var(--borda-esc);
}
.menu-painel .btn{margin-top:26px;width:100%}
@media (max-width:1024px){
  .menu,.cabecalho-site > .container > .btn{display:none}
  .menu-btn{display:block}
  .marca span{display:none}
}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(52px,6.5vw,92px)}
.hero .container{
  display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,5vw,72px);align-items:center;
}
.hero-texto p{font-size:clamp(1rem,1.65vw,1.16rem);color:var(--texto-sec);margin-top:20px}
.hero .btn{margin-top:32px}

/* selos de prova, dentro da primeira dobra */
.selos{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;list-style:none;padding:0}
.selos li{
  display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
  background:var(--superficie);border:1px solid var(--borda);
  font-size:.8rem;font-weight:500;color:var(--texto-sec);
}
.selos svg{width:14px;height:14px;flex:none;stroke:var(--acento);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- Painel Comercial: o funil que enche ---- */
.painel{
  /* bloco escuro dentro de seção clara: declara a própria cor de texto,
     senão os títulos herdam --texto e somem no fundo escuro */
  color:var(--off-white);
  background:var(--escuro);border-radius:var(--r-lg);padding:clamp(24px,2.8vw,34px);
  box-shadow:var(--sombra-lg);position:relative;overflow:hidden;
}
.painel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--trama);background-size:140px 70px;opacity:.05;filter:invert(1);
}
.painel > *{position:relative;z-index:1}
.painel-topo{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--escuro-3);
}
.painel-topo h2{font-size:1.16rem;letter-spacing:-.01em;color:var(--off-white)}
.painel-topo p{
  font-family:var(--fonte-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-esc);margin-top:7px;
}
.painel-ativo{
  display:flex;align-items:center;gap:8px;flex:none;
  font-family:var(--fonte-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-esc);
}
.painel-ativo i{width:7px;height:7px;border-radius:50%;background:var(--acento-claro);flex:none}
.js .painel-ativo i{animation:pulsar 2.4s ease-in-out infinite}
@keyframes pulsar{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

.funil{display:flex;flex-direction:column;gap:17px}
.etapa-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.etapa-topo span{font-size:.87rem;color:var(--off-white)}
.etapa-topo b{
  font-family:var(--fonte-mono);font-size:.95rem;font-weight:500;color:var(--off-white);
  font-variant-numeric:tabular-nums;
}
.trilho{height:6px;border-radius:3px;background:rgba(245,241,232,.11);overflow:hidden}
.trilho i{
  display:block;height:100%;border-radius:3px;background:var(--texto-esc);
  width:var(--w,0%);
}
.js .trilho i{width:0}
.js .painel.animado .trilho i{
  width:var(--w);
  transition:width 1.1s cubic-bezier(.22,.75,.3,1);
  transition-delay:var(--d,0s);
}
/* a saída do sistema é o único acento da dobra */
.etapa--saida .trilho i{background:var(--acento-claro)}

.painel-pe{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  padding-top:22px;margin-top:22px;border-top:1px solid var(--escuro-3);
}
.painel-pe .rot{
  display:block;font-family:var(--fonte-mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texto-esc);margin-bottom:8px;
}
.painel-pe .val{
  font-family:var(--fonte-mono);font-size:1.6rem;font-weight:500;color:var(--off-white);
  font-variant-numeric:tabular-nums;line-height:1;
}
.painel-pe .dir{text-align:right}
.painel-pe .dir .val{font-family:var(--fonte-texto);font-size:.95rem;font-weight:600}

@media (max-width:940px){
  .hero .container{grid-template-columns:1fr}
  .hero-texto,.hero-texto p{max-width:none}
}

/* ============================================================
   6. FAIXA DE PROVA
   ============================================================ */
.prova{padding:clamp(30px,3.6vw,46px) 0}
.prova .etiqueta{display:block;text-align:center;margin-bottom:24px}
.prova ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:16px clamp(22px,4vw,52px);
}
/* container de altura fixa: recebe PNG/SVG depois sem mexer no layout */
.prova li{height:32px;display:flex;align-items:center;justify-content:center}
.prova li span{
  font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-sec);text-align:center;line-height:1.2;
}
.prova li img{max-height:32px;width:auto;opacity:.72;transition:opacity .2s ease}
.prova li img:hover{opacity:1}

/* ============================================================
   7. GRADES DE CONTEÚDO
   ============================================================ */
.grade-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grade-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}

.card{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-md);
  padding:28px 26px 30px;display:flex;flex-direction:column;gap:11px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--sombra-md);border-color:var(--acento)}
.card p{font-size:.94rem;color:var(--texto-sec);max-width:38ch}
.card .n{
  font-family:var(--fonte-mono);font-size:.75rem;color:var(--texto-sec);
  font-variant-numeric:tabular-nums;
}
.card-icone{
  width:38px;height:38px;border-radius:var(--r-sm);background:rgba(138,92,38,.09);
  display:flex;align-items:center;justify-content:center;margin-bottom:5px;
}
.card-icone svg{width:19px;height:19px;stroke:var(--acento);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* card sobre o escuro */
.card-esc{
  background:var(--escuro-2);border:1px solid var(--escuro-3);border-radius:var(--r-md);
  padding:26px 24px;display:flex;flex-direction:column;gap:10px;
  transition:transform .25s ease,border-color .25s ease,background-color .25s ease;
}
.card-esc:hover{transform:translateY(-3px);border-color:var(--acento-claro)}
.card-esc p{font-size:.92rem;color:var(--texto-esc);max-width:38ch}

.nivel .sub{
  font-family:var(--fonte-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acento-esc);
}
.nivel .entrega{
  font-size:.9rem;color:var(--texto);padding-top:14px;margin-top:auto;
  border-top:1px solid var(--borda);
}
.nota{font-size:.9rem;color:var(--texto-sec);margin-top:26px;max-width:70ch}

@media (max-width:1000px){.grade-4{grid-template-columns:1fr 1fr}.grade-3{grid-template-columns:1fr}}
@media (max-width:620px){.grade-4,.grade-2{grid-template-columns:1fr}}

/* ============================================================
   8. DIAGRAMA DE CAMADAS
   ============================================================ */
/* O diagrama tem 900px num container de 1200: sem o auto ele encosta à
   esquerda e deixa 260px mortos à direita. O cabeçalho desta seção acompanha,
   para os dois ficarem alinhados entre si e centrados na página.
   O texto continua alinhado à esquerda dentro dos blocos. */
.camadas{display:grid;grid-template-columns:80px 1fr;gap:0;max-width:900px;margin-inline:auto}
#posicionamento .cabecalho-secao{margin-inline:auto}
.eixo{display:flex;flex-direction:column;justify-content:space-between;padding:8px 0 40px}
.eixo span{
  font-family:var(--fonte-mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--texto-esc);
}
.degraus{display:flex;flex-direction:column;gap:11px}
.degrau{
  display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:baseline;
  padding:20px 24px;border-radius:var(--r-md);
  background:var(--escuro-2);border:1px solid var(--escuro-3);
  transition:border-color .25s ease,transform .25s ease;
}
.degrau:hover{transform:translateX(4px)}
.degrau .n{
  font-family:var(--fonte-mono);font-size:.75rem;color:var(--texto-esc);
  font-variant-numeric:tabular-nums;
}
.degrau h3{font-size:1.02rem}
.degrau p{font-size:.88rem;color:var(--texto-esc);margin-top:5px}
.degrau--contexto{opacity:.5}
.degrau--atuamos{border-left:3px solid var(--acento-claro)}
.rotulo-atuamos{
  display:block;font-family:var(--fonte-mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acento-claro);margin:24px 0 9px;
}
.degrau--saida{
  margin-top:24px;grid-template-columns:1fr;background:transparent;
  border:1px solid var(--off-white);
}
.degrau--saida .marca-saida{
  display:block;font-family:var(--fonte-mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--texto-esc);margin-bottom:8px;
}
.legenda-camadas{margin-top:32px;font-size:.95rem;color:var(--texto-esc);max-width:70ch}
@media (max-width:720px){
  .camadas{grid-template-columns:1fr}
  .eixo{flex-direction:row;gap:22px;padding:0 0 18px}
}

/* ============================================================
   9. PARA QUEM É
   ============================================================ */
.publico{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,48px)}
.publico h3{
  font-size:.95rem;padding-bottom:16px;margin-bottom:4px;
  border-bottom:1px solid var(--escuro-3);
}
.publico ul{list-style:none;margin:0;padding:0}
.publico li{
  display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;
  padding:15px 0;border-bottom:1px solid var(--escuro-3);font-size:.97rem;
}
.publico li:last-child{border-bottom:0}
.publico li svg{width:17px;height:17px;margin-top:3px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.publico .sim li{color:var(--off-white)}
.publico .sim li svg{stroke:var(--acento-claro)}
.publico .nao li{color:var(--texto-esc)}
.publico .nao li svg{stroke:var(--escuro-3)}
@media (max-width:720px){.publico{grid-template-columns:1fr}}

/* ============================================================
   10. FAQ — altura animada, não <details>
   ============================================================ */
.faq-item{border-bottom:1px solid var(--borda)}
.faq-item:first-child{border-top:1px solid var(--borda)}
.faq-pergunta{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 0;font-family:var(--fonte-titulo);font-size:clamp(1rem,1.7vw,1.15rem);
  font-weight:600;letter-spacing:-.012em;color:var(--texto);transition:color .2s ease;
}
.faq-pergunta:hover{color:var(--acento-esc)}
.faq-sinal{
  position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--borda);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease,background-color .2s ease,border-color .2s ease;
}
.faq-sinal::before,.faq-sinal::after{
  content:'';position:absolute;background:var(--texto);border-radius:1px;
}
.faq-sinal::before{width:11px;height:1.6px}
.faq-sinal::after{width:1.6px;height:11px}
.faq-item.aberto .faq-sinal{
  transform:rotate(45deg);background:rgba(138,92,38,.1);border-color:var(--acento);
}
.faq-resposta{overflow:hidden;height:0;transition:height .32s ease}
.faq-resposta p{padding:0 54px 28px 0;font-size:1rem;color:var(--texto-sec);max-width:66ch}

/* ============================================================
   11. CTA FINAL + CONTATO
   ============================================================ */
.cta-meio{
  margin-top:clamp(40px,5vw,64px);display:flex;flex-direction:column;
  align-items:center;gap:22px;text-align:center;
}
.cta-meio p{font-size:clamp(1.05rem,2vw,1.3rem);font-weight:500;max-width:44ch}

.contato .container{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:start}
/* O contato fecha a página em fundo claro: o rodapé é o único escuro
   do pé, e a regra da casa não admite duas seções escuras seguidas. */
.contato-canais{
  display:flex;flex-direction:column;gap:2px;margin-top:30px;
  padding-top:26px;border-top:1px solid var(--borda);
}
.contato-canais a{
  display:flex;align-items:center;gap:12px;padding:13px 0;font-size:1rem;
  color:var(--texto);font-weight:500;transition:color .2s ease,gap .2s ease;
}
.contato-canais a:hover{color:var(--acento-esc);gap:16px}
.contato-canais svg{width:18px;height:18px;fill:var(--acento);flex:none}
.form-caixa{background:#fff;border:1px solid var(--borda);border-radius:var(--r-md);padding:8px;box-shadow:var(--sombra-md)}
.form-caixa iframe{width:100%;border:0;display:block;min-height:620px;border-radius:var(--r-sm)}
@media (max-width:860px){.contato .container{grid-template-columns:1fr}}

/* ============================================================
   12. RODAPÉ — padrão da casa: 3 blocos e 2 linhas
   ============================================================ */
.rodape{background:var(--escuro);color:var(--texto-esc);padding-top:clamp(48px,5.5vw,72px);position:relative;overflow:hidden}
.rodape::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--trama);background-size:140px 70px;opacity:.045;filter:invert(1);
}
.rodape .container{position:relative}
.rodape-topo{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-bottom:36px;border-bottom:1px solid var(--borda-esc);
}
.rodape-marca img{height:34px;width:auto;margin-bottom:20px}
.rodape-marca p{font-size:.92rem;line-height:1.7;max-width:340px}
.rodape h4{
  color:var(--off-white);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:20px;font-family:var(--fonte-mono);
}
.rodape-lista{display:flex;flex-direction:column;gap:12px}
.rodape-lista a{font-size:.93rem;transition:color .2s ease}
.rodape-lista a:hover{color:var(--off-white)}
.rodape-contato a{display:flex;align-items:center;gap:10px}
.rodape-contato svg{width:16px;height:16px;color:var(--acento-claro);fill:currentColor;flex:none}
.rodape-base{
  padding-block:26px 14px;display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;font-size:.82rem;color:rgba(245,241,232,.45);
}
.rodape-legal{font-size:.8rem;color:rgba(245,241,232,.38);text-align:center}
.rodape-base a:hover{color:var(--off-white)}
/* a folga de baixo é para o botão flutuante do WhatsApp */
.rodape-fim{
  padding-block:14px 88px;text-align:center;border-top:1px solid rgba(245,241,232,.07);
  font-size:.78rem;color:rgba(245,241,232,.34);
}
@media (max-width:820px){.rodape-topo{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   13. WHATSAPP FLUTUANTE + AVISO DE COOKIES
   ============================================================ */
.wpp-flutuante{
  position:fixed;right:20px;bottom:calc(20px + var(--altura-aviso));z-index:90;
  width:56px;height:56px;border-radius:50%;background:var(--whatsapp);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(19,122,65,.4);
  transition:transform .22s ease,box-shadow .22s ease,bottom .32s ease;
}
.wpp-flutuante:hover{transform:scale(1.07);box-shadow:0 10px 28px rgba(19,122,65,.5)}
.wpp-flutuante svg{width:29px;height:29px;fill:#fff}

.aviso-cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  padding:15px 22px;background:rgba(16,26,38,.97);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--borda-esc);
  transform:translateY(100%);transition:transform .32s ease;
}
.aviso-cookies.visivel{transform:none}
.aviso-cookies p{font-size:.85rem;color:var(--texto-esc);max-width:66ch}
.aviso-cookies a{color:var(--acento-claro);text-decoration:underline;text-underline-offset:3px}
.aviso-cookies-btn{
  background:var(--acento);color:var(--off-white);border:0;border-radius:var(--r-pill);
  padding:11px 26px;font-size:.88rem;font-weight:600;cursor:pointer;flex:none;
  transition:background .2s ease,transform .2s ease;
}
.aviso-cookies-btn:hover{background:var(--acento-esc);transform:translateY(-1px)}

/* ============================================================
   14. REVELAÇÃO AO ROLAR
   Só com JS ativo: sem JS, tudo nasce visível.

   ⛔ A PRIMEIRA DOBRA NÃO LEVA .revelar. O herói tem que estar legível
   no primeiro quadro: é o que a prévia do link, a captura de tela e o
   visitante apressado veem. Só o que está abaixo da dobra entra rolando.
   ============================================================ */
.js .revelar{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .revelar.visivel{opacity:1;transform:none}

/* ============================================================
   15. PÁGINAS LEGAIS
   ============================================================ */
.legal-topo{background:var(--escuro);color:var(--texto-esc);padding-block:clamp(40px,5vw,68px) clamp(32px,4vw,48px);position:relative;overflow:hidden}
.legal-topo::before{content:'';position:absolute;inset:0;background-image:var(--trama);background-size:140px 70px;opacity:.05;filter:invert(1);pointer-events:none}
.legal-topo .container{position:relative}
.legal-topo h1{color:var(--off-white);font-size:clamp(1.7rem,3.4vw,2.6rem)}
.legal-data{
  display:inline-block;margin-top:18px;padding:7px 16px;border-radius:var(--r-pill);
  border:1px solid rgba(200,154,90,.35);color:var(--acento-claro);
  font-family:var(--fonte-mono);font-size:.68rem;letter-spacing:.06em;
}
.legal-voltar{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;font-size:.86rem;font-weight:500;color:var(--texto-esc);transition:color .2s ease}
.legal-voltar:hover{color:var(--off-white)}
.legal-corpo{padding-block:clamp(44px,5.5vw,76px)}
.legal-intro{font-size:1.03rem;line-height:1.75;padding-bottom:32px;margin-bottom:12px;border-bottom:1px solid var(--borda)}
.legal-secao{padding-block:24px;border-bottom:1px solid var(--borda)}
.legal-secao:last-of-type{border-bottom:0}
.legal-secao h2{font-size:1.1rem;font-weight:600;margin-bottom:14px;display:flex;gap:12px;align-items:baseline}
.legal-num{flex:none;color:var(--acento-esc);font-family:var(--fonte-mono);font-size:.8rem;font-variant-numeric:tabular-nums}
.legal-secao p{color:var(--texto-sec);line-height:1.75;margin-bottom:12px}
.legal-secao p:last-child{margin-bottom:0}
.legal-secao a{color:var(--acento-esc);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.legal-secao ul{margin:12px 0;padding:0;list-style:none;display:grid;gap:9px}
.legal-secao li{position:relative;padding-left:20px;color:var(--texto-sec);line-height:1.65}
.legal-secao li::before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--acento);opacity:.55}
@media (max-width:640px){.legal-secao h2{flex-direction:column;gap:4px}}

/* ============================================================
   16. ACESSIBILIDADE
   ============================================================ */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js .revelar{opacity:1;transform:none}
  .js .trilho i{width:var(--w)}
}