/* =====================================================================
   FUNIL ANIMADO — componente reutilizável
   Baseado no funil do hero de grapemidia.com.br/inicial (.mock__body.funil)

   Tudo fica escopado em .funil-animado, então não briga com o CSS do site.
   Cores: troque as variáveis --funil-* (no próprio elemento ou num pai).
   Tema: data-tema="claro" (padrão) | "escuro" | "auto" (segue o sistema).
   ===================================================================== */

.funil-animado{
  /* cor principal (faixas 1 e 2, pessoas entrando) */
  --funil-cor-1:#A78BFA;
  --funil-cor-2:#7C3AED;
  --funil-brilho:rgba(167,139,250,.9);
  /* cor do fim (faixa 3 e cifras) */
  --funil-fim-1:#4ADE80;
  --funil-fim-2:#15803D;
  --funil-fim-brilho:rgba(74,222,128,.9);

  /* estado apagado e chips */
  --funil-apagado:#EDECE8;
  --funil-texto:#78757F;
  --funil-texto-aceso:#FFFFFF;
  --funil-linha:#E4E3DF;
  --funil-chip-fundo:#F1F1EE;
  --funil-chip-borda:#EDECE8;
  --funil-destaque:#7C3AED;
  --funil-destaque-forte:#5B21B6;
  --funil-destaque-fundo:#F3EEFF;
  --funil-destaque-borda:#DDD0FB;
  --funil-ok:#15803D;
  --funil-ok-fundo:#EAF6EE;
  --funil-descarte:#78757F;

  --funil-fonte-titulo:"Instrument Sans",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --funil-fonte-texto:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --funil-largura:580px;

  display:block;position:relative;box-sizing:border-box;
  width:100%;max-width:var(--funil-largura);margin-inline:auto;
  font-family:var(--funil-fonte-texto);line-height:1.5;
}
.funil-animado *,.funil-animado *::before,.funil-animado *::after{box-sizing:border-box}

.funil-animado[data-tema="escuro"]{
  --funil-apagado:#232128;
  --funil-texto:#8F8B99;
  --funil-linha:#2C2A31;
  --funil-chip-fundo:#0F0E11;
  --funil-chip-borda:#232128;
  --funil-destaque:#A78BFA;
  --funil-destaque-forte:#8B5CF6;
  --funil-destaque-fundo:#221B36;
  --funil-destaque-borda:#3B2E5E;
  --funil-ok:#6EE7A8;
  --funil-ok-fundo:#152A20;
  --funil-descarte:#8F8B99;
}
@media (prefers-color-scheme: dark){
  .funil-animado[data-tema="auto"]{
    --funil-apagado:#232128;
    --funil-texto:#8F8B99;
    --funil-linha:#2C2A31;
    --funil-chip-fundo:#0F0E11;
    --funil-chip-borda:#232128;
    --funil-destaque:#A78BFA;
    --funil-destaque-forte:#8B5CF6;
    --funil-destaque-fundo:#221B36;
    --funil-destaque-borda:#3B2E5E;
    --funil-ok:#6EE7A8;
    --funil-ok-fundo:#152A20;
    --funil-descarte:#8F8B99;
  }
}

.funil-animado__palco{position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}
.funil-animado__svg{width:100%;height:auto;display:block;overflow:visible}

/* ---------- faixas ---------- */
.funil-et__base,
.funil-et__cor{stroke-width:14;stroke-linejoin:round;paint-order:stroke fill;transform-origin:173px 213px}
.funil-et__base{fill:var(--funil-apagado);stroke:var(--funil-apagado);transition:fill .26s ease,stroke .26s ease}
/* a faixa colorida fica por cima da cinza e só aparece quando a etapa acende */
.funil-et__cor{opacity:0;transition:opacity .26s ease}

.funil-et__rot{fill:var(--funil-texto);font-family:var(--funil-fonte-titulo);font-size:22px;
  font-weight:700;letter-spacing:-.02em;text-anchor:middle;transition:fill .5s ease}
.funil-et__rot--fim{font-size:17px}

.funil-et__linha{stroke:var(--funil-linha);stroke-width:1.5;fill:none;stroke-dasharray:1 200;transition:stroke .5s ease}

.funil-et__chip{opacity:0;transform:translateX(-10px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.3,1)}
.funil-et__chip-fundo{fill:var(--funil-chip-fundo);stroke:var(--funil-chip-borda);stroke-width:1;transition:.5s ease}
.funil-et__n{fill:var(--funil-texto);font-family:var(--funil-fonte-titulo);font-size:26px;font-weight:700;
  letter-spacing:-.03em;transition:fill .5s ease}
.funil-et__leg{fill:var(--funil-texto);font-size:12px;font-family:var(--funil-fonte-texto)}

/* ---------- etapa acesa ---------- */
.funil-et.is-on .funil-et__cor{opacity:1;animation:funil-salto .34s cubic-bezier(.2,1.8,.4,1)}
.funil-et.is-on .funil-et__rot{fill:var(--funil-texto-aceso)}
.funil-et.is-on .funil-et__linha{stroke:var(--funil-destaque);animation:funil-tracar .45s ease forwards}
.funil-et.is-on .funil-et__chip{opacity:1;transform:translateX(0)}
.funil-et.is-on .funil-et__chip-fundo{fill:var(--funil-destaque-fundo);stroke:var(--funil-destaque-borda)}
.funil-et.is-on .funil-et__n{fill:var(--funil-destaque-forte)}

/* a última etapa é a "verde": resultado não tem a cor de "lead entrou" */
.funil-et--fim.is-on .funil-et__linha{stroke:var(--funil-ok)}
.funil-et--fim.is-on .funil-et__chip-fundo{fill:var(--funil-ok-fundo);stroke:var(--funil-ok)}
.funil-et--fim.is-on .funil-et__n{fill:var(--funil-ok)}

@keyframes funil-salto{0%{transform:scale(1)}40%{transform:scale(1.055)}100%{transform:scale(1)}}
@keyframes funil-tracar{to{stroke-dasharray:200 200}}

/* ---------- partículas ---------- */
.funil-pessoa{filter:drop-shadow(0 0 5px var(--funil-brilho));opacity:0;
  animation:funil-entrar 1s cubic-bezier(.35,0,.65,1) forwards}
@keyframes funil-entrar{
  0%{opacity:0;transform:translateY(-38px) scale(.7)}
  22%{opacity:1;transform:translateY(-14px) scale(1)}
  62%{opacity:1}
  100%{opacity:0;transform:translateY(46px) scale(.82)}
}

.funil-descarte{fill:var(--funil-descarte);opacity:0;animation:funil-sair .72s ease-out forwards}
@keyframes funil-sair{
  0%{opacity:.75;transform:translate(0,0) scale(.9)}
  100%{opacity:0;transform:translate(var(--dx),26px) scale(.5)}
}

.funil-cifra{filter:drop-shadow(0 0 8px var(--funil-fim-brilho));opacity:0;
  font-family:var(--funil-fonte-titulo);font-weight:700;text-anchor:middle;
  animation:funil-cifra 1.7s cubic-bezier(.3,1.35,.4,1) forwards}
@keyframes funil-cifra{
  0%{opacity:0;transform:translateY(-8px) scale(.4)}
  12%{opacity:1;transform:translateY(2px) scale(1.14)}
  22%{transform:translateY(0) scale(1)}
  72%{opacity:1;transform:translate(calc(var(--dx) * .45),22px) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),58px) scale(.9)}
}

/* ---------- rodapé opcional ---------- */
.funil-animado .funil-animado__rodape{padding:40px 6px 0;margin:0;max-width:none;font-family:var(--funil-fonte-texto);
  font-size:12.8px;font-weight:400;line-height:1.45;color:var(--funil-texto);text-transform:none;
  display:block;text-align:center;text-wrap:balance;
  opacity:0;transition:opacity .45s ease}
.funil-animado .funil-animado__rodape.is-on{opacity:1}
.funil-animado .funil-animado__rodape svg{display:inline-block;vertical-align:-2px;margin-right:6px}

@media (max-width:760px){
  .funil-et__n{font-size:25px}
  .funil-et__leg{font-size:11.8px}
  /* as cifras caem abaixo da ponta: o respiro de cima não pode encolher */
  .funil-animado .funil-animado__rodape{font-size:11.6px;padding:52px 13px 0}
}

@media (prefers-reduced-motion: reduce){
  .funil-pessoa,.funil-descarte,.funil-cifra{display:none}
  .funil-et__cor{animation:none!important}
  .funil-et__linha{stroke-dasharray:none}
  .funil-animado .funil-animado__rodape{opacity:1}
}
/* =====================================================================
   SEÇÃO GRIDBG — componente reutilizável
   Baseado na seção "Entregáveis" de grapemidia.com.br/inicial (section.gridbg)

   Duas peças que funcionam juntas ou separadas:
     1) .sg-gridbg  → fundo quadriculado que desbota para baixo. Serve em
                      QUALQUER elemento (hero, seção, card).
     2) .sg-secao   → a seção completa: cabeçalho + grade de cards + faixa.

   Tudo escopado com prefixo sg-, e os textos têm margem/fonte/cor explícitas
   porque tema de WordPress costuma estilizar h2/h3/p/ul globalmente.
   Tema: data-tema="claro" (padrão) | "escuro" | "auto".
   ===================================================================== */

/* ---------- tokens ---------- */
.sg-secao,.sg-gridbg{
  --sg-fundo:#F7F7F5;
  --sg-card:#FFFFFF;
  --sg-afundado:#F1F1EE;
  --sg-texto:#17161A;
  --sg-texto-2:#3F3D45;
  --sg-texto-3:#78757F;
  --sg-linha:#E4E3DF;
  --sg-linha-suave:#EDECE8;
  --sg-destaque:#7C3AED;
  --sg-destaque-fundo:#F3EEFF;
  --sg-destaque-borda:#DDD0FB;
  --sg-grade:rgba(23,22,26,.045);
  --sg-sombra:0 1px 2px rgba(23,22,26,.05),0 8px 24px -12px rgba(23,22,26,.12);
  --sg-sombra-forte:0 1px 2px rgba(23,22,26,.06),0 24px 60px -24px rgba(23,22,26,.22);

  --sg-raio:14px;
  --sg-raio-lg:20px;
  --sg-largura:1120px;
  --sg-grade-tamanho:64px;
  --sg-grade-fade:55%;          /* até onde a grade fica 100% visível */
  --sg-fonte-titulo:"Instrument Sans",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --sg-fonte-texto:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
:is(.sg-secao,.sg-gridbg)[data-tema="escuro"]{
  --sg-fundo:#131215; --sg-card:#1B1A1F; --sg-afundado:#0F0E11;
  --sg-texto:#F5F4F7; --sg-texto-2:#C4C1CB; --sg-texto-3:#8F8B99;
  --sg-linha:#2C2A31; --sg-linha-suave:#232128;
  --sg-destaque:#A78BFA; --sg-destaque-fundo:#221B36; --sg-destaque-borda:#3B2E5E;
  --sg-grade:rgba(245,244,247,.05);
  --sg-sombra:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
  --sg-sombra-forte:0 1px 2px rgba(0,0,0,.5),0 24px 60px -24px rgba(0,0,0,.8);
}
@media (prefers-color-scheme: dark){
  :is(.sg-secao,.sg-gridbg)[data-tema="auto"]{
    --sg-fundo:#131215; --sg-card:#1B1A1F; --sg-afundado:#0F0E11;
    --sg-texto:#F5F4F7; --sg-texto-2:#C4C1CB; --sg-texto-3:#8F8B99;
    --sg-linha:#2C2A31; --sg-linha-suave:#232128;
    --sg-destaque:#A78BFA; --sg-destaque-fundo:#221B36; --sg-destaque-borda:#3B2E5E;
    --sg-grade:rgba(245,244,247,.05);
    --sg-sombra:0 1px 2px rgba(0,0,0,.5),0 8px 24px -12px rgba(0,0,0,.7);
    --sg-sombra-forte:0 1px 2px rgba(0,0,0,.5),0 24px 60px -24px rgba(0,0,0,.8);
  }
}

/* ---------- 1) fundo quadriculado ---------- */
.sg-gridbg{position:relative;isolation:isolate}
.sg-gridbg::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--sg-grade) 1px,transparent 1px),
                   linear-gradient(90deg,var(--sg-grade) 1px,transparent 1px);
  background-size:var(--sg-grade-tamanho) var(--sg-grade-tamanho);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 var(--sg-grade-fade),transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 var(--sg-grade-fade),transparent 100%);
}
.sg-gridbg > *{position:relative;z-index:1}
/* variações */
.sg-gridbg--sem-fade::before{-webkit-mask-image:none;mask-image:none}
.sg-gridbg--radial::before{
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 0%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse at 50% 30%,#000 0%,#000 30%,transparent 75%);
}
.sg-gridbg--fundo{background:var(--sg-fundo)}

/* ---------- 2) seção ---------- */
.sg-secao{
  box-sizing:border-box;padding:88px 0;background:var(--sg-fundo);color:var(--sg-texto);
  font-family:var(--sg-fonte-texto);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.sg-secao--transparente{background:transparent}
.sg-secao *,.sg-secao *::before,.sg-secao *::after{box-sizing:border-box}
.sg-wrap{max-width:var(--sg-largura);margin:0 auto;padding:0 24px}

/* cabeçalho */
.sg-secao .sg-head{margin:0 0 44px}
.sg-secao .sg-eyebrow{margin:0 0 14px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sg-destaque);font-family:var(--sg-fonte-texto);line-height:1.4}
.sg-secao .sg-titulo{margin:0;max-width:20ch;font-family:var(--sg-fonte-titulo);font-size:clamp(28px,4vw,42px);
  font-weight:700;letter-spacing:-.028em;line-height:1.08;color:var(--sg-texto);text-transform:none}
.sg-secao .sg-lede{margin:16px 0 0;max-width:60ch;font-size:17px;line-height:1.6;color:var(--sg-texto-2)}
.sg-head--centro{text-align:center}
.sg-head--centro .sg-titulo,.sg-head--centro .sg-lede{margin-left:auto;margin-right:auto}

/* grade de cards: 6 colunas, 3 cards por linha. A última linha se ajusta sozinha:
   sobrando 2 cards, cada um ocupa metade; sobrando 1, ocupa a linha inteira.
   (5 cards = 3 + 2, exatamente como no original) */
.sg-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin:0;padding:0;list-style:none}
.sg-cards > *{grid-column:span 2}
.sg-cards > :where(:nth-last-child(2):nth-child(3n+1),
                   :nth-last-child(2):nth-child(3n+1) ~ *){grid-column:span 3}
.sg-cards > :where(:last-child:nth-child(3n+1)){grid-column:span 6}
/* 2 ou 4 cards: duas colunas */
.sg-cards--2col{grid-template-columns:repeat(2,1fr)}
.sg-cards--2col > *{grid-column:auto!important}

/* card */
.sg-secao .sg-card{margin:0;background:var(--sg-card);border:1px solid var(--sg-linha);border-radius:var(--sg-raio);
  padding:28px 26px;box-shadow:var(--sg-sombra);display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .25s ease,border-color .2s}
.sg-secao .sg-card:hover{transform:translateY(-2px);box-shadow:var(--sg-sombra-forte);border-color:var(--sg-destaque-borda)}
.sg-card__topo{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sg-card__ico,.sg-faixa__ico{display:grid;place-items:center;flex:none;
  background:var(--sg-destaque-fundo);color:var(--sg-destaque);border:1px solid var(--sg-destaque-borda)}
.sg-card__ico{width:40px;height:40px;border-radius:11px}
.sg-card__ico svg,.sg-faixa__ico svg{display:block}
.sg-card__n{margin-left:auto;font-family:var(--sg-fonte-titulo);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--sg-texto-3)}
.sg-secao .sg-card__titulo{margin:0 0 10px;font-family:var(--sg-fonte-titulo);font-size:19px;font-weight:700;
  letter-spacing:-.022em;line-height:1.2;color:var(--sg-texto);text-transform:none}
.sg-secao .sg-card__texto{margin:0 0 18px;font-size:15px;line-height:1.55;color:var(--sg-texto-2)}
.sg-secao .sg-card__texto:last-child{margin-bottom:0}

/* lista com check: é só escrever <li>texto</li>, o ícone vem do CSS */
.sg-secao .sg-lista{list-style:none;margin:auto 0 0;padding:16px 0 0;border-top:1px solid var(--sg-linha-suave);
  display:flex;flex-direction:column;gap:10px}
.sg-secao .sg-lista li{position:relative;margin:0;padding:0 0 0 25px;font-size:14.2px;line-height:1.5;color:var(--sg-texto-2);list-style:none}
.sg-secao .sg-lista li::before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;background:var(--sg-destaque);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sg-secao .sg-lista strong{color:var(--sg-texto);font-weight:600}

/* faixa de destaque (ícone + título + texto) */
.sg-secao .sg-faixa{margin:18px 0 0;background:var(--sg-card);border:1px solid var(--sg-linha);border-radius:var(--sg-raio-lg);
  padding:28px 30px;display:flex;gap:22px;align-items:flex-start;box-shadow:var(--sg-sombra)}
.sg-faixa__ico{width:44px;height:44px;border-radius:12px}
.sg-secao .sg-faixa__titulo{margin:0 0 9px;font-family:var(--sg-fonte-titulo);font-size:19px;font-weight:700;
  letter-spacing:-.022em;line-height:1.2;color:var(--sg-texto);text-transform:none}
.sg-secao .sg-faixa__texto{margin:0;max-width:78ch;font-size:15px;line-height:1.6;color:var(--sg-texto-2)}

/* entrada suave (só quando o JS está ativo; sem JS tudo aparece normal) */
.sg-js .sg-revelar{opacity:0;transform:translateY(14px)}
.sg-js .sg-revelar.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .sg-cards{grid-template-columns:repeat(2,1fr)}
  .sg-cards > *{grid-column:auto}
  .sg-cards > :where(:last-child:nth-child(odd)){grid-column:1 / -1}
}
@media (max-width:760px){
  .sg-secao{padding:56px 0}
  .sg-wrap{padding:0 20px}
  .sg-gridbg{--sg-grade-tamanho:40px}
  .sg-secao .sg-head{margin-bottom:28px}
  .sg-secao .sg-eyebrow{font-size:11px;margin-bottom:11px}
  .sg-secao .sg-titulo{font-size:clamp(23px,6.4vw,30px);max-width:100%;line-height:1.14}
  .sg-secao .sg-lede{font-size:15.5px;margin-top:14px}
  .sg-cards{gap:14px}
  .sg-secao .sg-card{padding:22px 20px}
  .sg-secao .sg-card__titulo{font-size:18px}
  .sg-secao .sg-card__texto{font-size:14.4px;margin-bottom:14px}
  .sg-secao .sg-lista{padding-top:14px;gap:9px}
  .sg-secao .sg-lista li{font-size:13.8px}
  .sg-card__ico{width:36px;height:36px}
  .sg-secao .sg-faixa__titulo{font-size:17.5px}
  .sg-secao .sg-faixa__texto{font-size:14.4px}
}
@media (max-width:640px){
  .sg-cards{grid-template-columns:1fr}
  .sg-cards > *{grid-column:auto!important}
  .sg-secao .sg-faixa{flex-direction:column;gap:16px;padding:24px 22px}
}
@media (max-width:400px){
  .sg-wrap{padding:0 16px}
}
@media (prefers-reduced-motion: reduce){
  .sg-js .sg-revelar{opacity:1;transform:none}
  .sg-secao .sg-card{transition:none}
}
/* =====================================================================
   FAQ — componente reutilizável
   Baseado na seção "Dúvidas frequentes" de grapemidia.com.br/inicial

   Feito com <details>/<summary> nativos: abre e fecha SEM JavaScript,
   funciona com teclado e leitor de tela, e o Google lê as respostas.
   O faq.js é opcional: anima a abertura, "uma aberta por vez" e schema FAQPage.

   Tudo escopado com prefixo fq-, com margem/fonte/cor explícitas para não
   herdar o estilo do tema do WordPress.
   Tema: data-tema="claro" (padrão) | "escuro" | "auto".
   ===================================================================== */

.fq-secao{
  --fq-fundo:#F7F7F5;
  --fq-texto:#17161A;
  --fq-texto-2:#3F3D45;
  --fq-texto-3:#78757F;
  --fq-linha:#EDECE8;
  --fq-destaque:#7C3AED;
  --fq-hover:rgba(23,22,26,.025);

  --fq-largura:840px;
  --fq-fonte-titulo:"Instrument Sans",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fq-fonte-texto:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;

  box-sizing:border-box;padding:88px 0;background:var(--fq-fundo);color:var(--fq-texto);
  font-family:var(--fq-fonte-texto);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.fq-secao[data-tema="escuro"]{
  --fq-fundo:#131215; --fq-texto:#F5F4F7; --fq-texto-2:#C4C1CB; --fq-texto-3:#8F8B99;
  --fq-linha:#232128; --fq-destaque:#A78BFA; --fq-hover:rgba(245,244,247,.03);
}
@media (prefers-color-scheme: dark){
  .fq-secao[data-tema="auto"]{
    --fq-fundo:#131215; --fq-texto:#F5F4F7; --fq-texto-2:#C4C1CB; --fq-texto-3:#8F8B99;
    --fq-linha:#232128; --fq-destaque:#A78BFA; --fq-hover:rgba(245,244,247,.03);
  }
}
.fq-secao--transparente{background:transparent}
.fq-secao *,.fq-secao *::before,.fq-secao *::after{box-sizing:border-box}
.fq-wrap{max-width:var(--fq-largura);margin:0 auto;padding:0 24px}

/* ---------- cabeçalho ---------- */
.fq-secao .fq-head{margin:0 0 44px}
.fq-secao .fq-eyebrow{margin:0 0 14px;font-family:var(--fq-fonte-texto);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--fq-destaque)}
.fq-secao .fq-titulo{margin:0;max-width:20ch;font-family:var(--fq-fonte-titulo);font-size:clamp(28px,4vw,42px);
  font-weight:700;letter-spacing:-.028em;line-height:1.08;color:var(--fq-texto);text-transform:none}
.fq-secao .fq-lede{margin:16px 0 0;max-width:60ch;font-size:17px;line-height:1.6;color:var(--fq-texto-2)}
.fq-head--centro{text-align:center}
.fq-head--centro .fq-titulo,.fq-head--centro .fq-lede{margin-left:auto;margin-right:auto}

/* ---------- lista de perguntas ---------- */
.fq-secao .fq-lista{margin:0;padding:0;border-top:1px solid var(--fq-linha)}
.fq-secao .fq-item{margin:0;padding:0;border:0;border-bottom:1px solid var(--fq-linha);background:none}

.fq-secao .fq-pergunta{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin:0;padding:22px 0;list-style:none;cursor:pointer;background:none;
  font-family:var(--fq-fonte-texto);font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.015em;
  color:var(--fq-texto);text-transform:none;transition:color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.fq-secao .fq-pergunta::-webkit-details-marker{display:none}
.fq-secao .fq-pergunta::marker{content:""}
/* seta: gira de "para baixo" para "para cima" ao abrir */
.fq-secao .fq-pergunta::after{
  content:"";flex:none;width:11px;height:11px;margin-top:-4px;margin-right:2px;
  border-right:2px solid var(--fq-texto-3);border-bottom:2px solid var(--fq-texto-3);
  transform:rotate(45deg);transition:transform .2s ease,margin .2s ease,border-color .15s ease;
}
.fq-secao .fq-item[open] > .fq-pergunta::after{transform:rotate(-135deg);margin-top:2px}
/* durante a animação de fechar o [open] ainda está lá: a seta já volta */
.fq-secao .fq-item.is-fechando > .fq-pergunta::after{transform:rotate(45deg);margin-top:-4px}
.fq-secao .fq-pergunta:hover{color:var(--fq-destaque)}
.fq-secao .fq-pergunta:hover::after{border-color:var(--fq-destaque)}
.fq-secao .fq-pergunta:focus{outline:none}
.fq-secao .fq-pergunta:focus-visible{outline:2px solid var(--fq-destaque);outline-offset:4px;border-radius:4px}

/* resposta: aceita <p>, listas, links, o que for */
.fq-secao .fq-resposta{overflow:hidden}
.fq-secao .fq-resposta > :first-child{margin-top:0}
.fq-secao .fq-resposta p,
.fq-secao .fq-resposta ul,
.fq-secao .fq-resposta ol{margin:0 0 14px;max-width:72ch;font-size:15.4px;line-height:1.65;color:var(--fq-texto-2)}
.fq-secao .fq-resposta ul,.fq-secao .fq-resposta ol{padding-left:1.2em}
.fq-secao .fq-resposta li{margin:0 0 6px}
.fq-secao .fq-resposta > :last-child{margin-bottom:0}
.fq-secao .fq-resposta{padding:0 0 24px}
.fq-secao .fq-resposta strong{color:var(--fq-texto);font-weight:600}
.fq-secao .fq-resposta a{color:var(--fq-destaque);text-decoration:underline;text-underline-offset:3px}

/* estilo alternativo em cartões */
.fq-secao .fq-lista--cartoes{border:0;display:flex;flex-direction:column;gap:10px}
.fq-secao .fq-lista--cartoes .fq-item{border:1px solid var(--fq-linha);border-radius:14px;padding:0 22px;
  transition:background .15s ease,border-color .15s ease}
.fq-secao .fq-lista--cartoes .fq-item:hover,
.fq-secao .fq-lista--cartoes .fq-item[open]{background:var(--fq-hover)}
.fq-secao .fq-lista--cartoes .fq-item[open]{border-color:color-mix(in srgb,var(--fq-destaque) 35%,var(--fq-linha))}
.fq-secao .fq-lista--cartoes .fq-pergunta{padding:20px 0}
.fq-secao .fq-lista--cartoes .fq-resposta{padding-bottom:20px}

/* entrada suave (só quando o JS está ativo) */
.fq-js .fq-revelar{opacity:0;transform:translateY(14px)}
.fq-js .fq-revelar.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}

/* ---------- responsivo ---------- */
@media (max-width:760px){
  .fq-secao{padding:56px 0}
  .fq-wrap{padding:0 20px}
  .fq-secao .fq-head{margin-bottom:28px}
  .fq-secao .fq-eyebrow{font-size:11px;margin-bottom:11px}
  .fq-secao .fq-titulo{font-size:clamp(23px,6.4vw,30px);max-width:100%;line-height:1.14}
  .fq-secao .fq-lede{font-size:15.5px;margin-top:14px}
  .fq-secao .fq-pergunta{font-size:15.6px;padding:18px 0;gap:14px}
  .fq-secao .fq-resposta p,.fq-secao .fq-resposta ul,.fq-secao .fq-resposta ol{font-size:14.6px}
  .fq-secao .fq-resposta{padding-bottom:20px}
  .fq-secao .fq-lista--cartoes .fq-item{padding:0 16px}
}
@media (max-width:400px){
  .fq-wrap{padding:0 16px}
}
@media (prefers-reduced-motion: reduce){
  .fq-js .fq-revelar{opacity:1;transform:none}
  .fq-secao .fq-pergunta::after{transition:none}
}

/* =====================================================================
   OVERRIDES — Identidade Maycon Amaro (dark): troca o roxo padrão dos
   componentes pelo azul (--accent #bedcff) e verde (--accent-green #58e560)
   do site, e casa fundos/linhas com a paleta do tema (style.css).
   Carregado DEPOIS dos componentes: mesma especificidade, vence por ordem.
   ===================================================================== */

/* ---- Funil animado ---- */
.funil-animado[data-tema="escuro"],
[data-funil-animado][data-tema="escuro"]{
  --funil-cor-1:#5896e5; --funil-cor-2:#3a6db0; --funil-brilho:rgba(88,150,229,.9);
  --funil-fim-1:#58e560; --funil-fim-2:#2f9e43; --funil-fim-brilho:rgba(88,229,96,.9);
  --funil-apagado:#1a1f27; --funil-texto:#949aa5; --funil-texto-aceso:#ffffff;
  --funil-linha:rgba(255,255,255,.10);
  --funil-chip-fundo:#0d1014; --funil-chip-borda:rgba(255,255,255,.09);
  --funil-destaque:#bedcff; --funil-destaque-forte:#bedcff;
  --funil-destaque-fundo:rgba(190,220,255,.10); --funil-destaque-borda:rgba(190,220,255,.28);
  --funil-ok:#58e560; --funil-ok-fundo:rgba(88,229,96,.10); --funil-descarte:#949aa5;
  --funil-fonte-titulo:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --funil-fonte-texto:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ---- Seção gridbg (5 entregas) ---- */
:is(.sg-secao,.sg-gridbg)[data-tema="escuro"]{
  --sg-fundo:#050607; --sg-card:#0d1014; --sg-afundado:#090b0e;
  --sg-texto:#f5f7fa; --sg-texto-2:#c3c8d0; --sg-texto-3:#949aa5;
  --sg-linha:rgba(255,255,255,.09); --sg-linha-suave:rgba(255,255,255,.06);
  --sg-destaque:#bedcff; --sg-destaque-fundo:rgba(190,220,255,.08); --sg-destaque-borda:rgba(190,220,255,.22);
  --sg-grade:rgba(190,220,255,.05);
  --sg-fonte-titulo:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sg-fonte-texto:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
/* faixa OAB: usa o verde de "conformidade/ok" do site */
.sg-secao[data-tema="escuro"] .sg-faixa{
  --sg-destaque:#58e560; --sg-destaque-fundo:rgba(88,229,96,.06); --sg-destaque-borda:rgba(88,229,96,.22);
}

/* ---- FAQ ---- */
.fq-secao[data-tema="escuro"]{
  --fq-fundo:#050607; --fq-texto:#f5f7fa; --fq-texto-2:#c3c8d0; --fq-texto-3:#949aa5;
  --fq-linha:rgba(255,255,255,.09); --fq-destaque:#bedcff; --fq-hover:rgba(255,255,255,.03);
  --fq-fonte-titulo:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fq-fonte-texto:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* A LP controla o espaçamento externo das seções de componente via wrappers .lp-* */
.lp-comp{padding:0}