/* ===========================================================
   FB CONSULT — LPs de SETOR (15 verticais) + hub /setores
   Carregado só pelas 16 páginas novas. Não toca no site.css.
   Todas as páginas usam data-page="setores" => tema LIGHT.

   Revisão de 26/08/2026 (pedido do Isaque: "muita informação junta",
   "títulos muito gigantes", "FAQ poluído", "mais clean"):
     - seção respira 140px e nunca cola na anterior
     - título de seção caiu de 56px pra no máximo 36px
     - texto corrido virou infográfico com ícone
     - FAQ virou acordeão em box, 1 resposta por vez
     - faixa de fundo alternada separa assunto de assunto
   =========================================================== */

/* ---------- 0. RITMO ---------- */
.lp-sec{padding:140px 0;position:relative}
.lp-sec.tight{padding:104px 0}
.lp-band{background:#f5f5f2}
.lp-band-dark{background:#0e0e11}
.lp-band-dark h2,.lp-band-dark h2 b,.lp-band-dark h3,.lp-band-dark h4{color:#fff !important;-webkit-text-fill-color:#fff}
.lp-band-dark p,.lp-band-dark li{color:#b9b9c2 !important;-webkit-text-fill-color:#b9b9c2}
.lp-band-dark .sec-no{color:#8a8a92}
.lp-band-dark .sec-no b{color:#fff}

/* cabeçalho de seção: menor, mais curto, com ar embaixo */
.lp-head{max-width:680px;margin:0 0 60px}
.lp-head .sec-no{margin-bottom:18px}
.lp-head h2{font-size:clamp(25px,2.9vw,36px);font-weight:400;letter-spacing:-.8px;line-height:1.24}
.lp-head h2 b{font-weight:800}
.lp-head p{margin-top:18px;font-size:16px;line-height:1.75;font-weight:400;max-width:58ch}

/* ---------- 1. DESTAQUE DO SETOR (bold + cor atrás) ---------- */
.hl{
  font-weight:800;color:inherit;
  background:rgba(22,179,100,.20);
  padding:.02em .22em;margin:0 -.04em;border-radius:5px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone
}
.lp-band-dark .hl,.subhero .hl{background:rgba(22,179,100,.34);color:#fff;-webkit-text-fill-color:#fff}

/* ---------- 2. ÍCONES ----------
   Regra guarda-chuva: qualquer SVG dos blocos novos nasce em traço e com
   tamanho definido. Sem isso, um ícone esquecido vira um bloco preto gigante. */
.lp-hero svg,.lp-sec svg,.lp-form-sec svg,.set-card svg,.set-strip svg{
  fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round
}
.lp-hero svg:not([class]),.lp-sec svg:not([class]),.lp-form-sec svg:not([class]),
.set-card svg:not([class]){width:16px;height:16px;stroke-width:2.2;flex:0 0 auto}

.ic-round{
  width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(22,179,100,.10);color:#0e9354;margin-bottom:24px
}
.ic-round svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lp-band-dark .ic-round{background:rgba(22,179,100,.16);color:#3ddc8a}

/* O texto do hero NÃO pode depender do JS. O reveal `.rv` do site marca os
   elementos dentro de um requestAnimationFrame, e rAF é estrangulado quando a
   aba não está pintando: o H1 da página de conversão ficava invisível. Aqui a
   entrada é animação de CSS, que roda sozinha e termina sempre em opacidade 1. */
.lp-hero .rv,.lp-hero .rv-l,.lp-hero .rv-r{
  opacity:0;transform:translateY(20px);
  animation:lpEntra .85s cubic-bezier(.16,.84,.3,1) forwards
}
.lp-hero .rv.d1{animation-delay:.09s}
.lp-hero .rv.d2{animation-delay:.18s}
.lp-hero .rv.d3{animation-delay:.27s}
.lp-hero .rv.d4{animation-delay:.36s}
@keyframes lpEntra{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .lp-hero .rv,.lp-hero .rv-l,.lp-hero .rv-r{opacity:1;transform:none;animation:none}
}

/* ---------- 3. HERO ----------
   O `.subhero .bg` do site aplica grayscale(1) + brightness(.7) e um gradiente
   quase opaco: boa para foto de palco, péssima para foto de segmento, que
   sumia. Aqui a imagem fica colorida e o escurecimento vira um degradê que
   pesa só na ESQUERDA, onde mora o texto. */
.lp-hero .bg{filter:contrast(1.04) saturate(1.04) brightness(.92)}
.lp-hero .grad{
  background:
    linear-gradient(90deg,rgba(8,8,10,.9) 0%,rgba(8,8,10,.78) 34%,rgba(8,8,10,.34) 66%,rgba(8,8,10,.12) 100%),
    linear-gradient(0deg,rgba(8,8,10,.72),rgba(8,8,10,0) 55%)
}
@media(max-width:900px){
  /* no celular o texto ocupa a largura toda, então o véu volta a ser parelho */
  .lp-hero .grad{background:linear-gradient(0deg,rgba(8,8,10,.9),rgba(8,8,10,.6) 60%,rgba(8,8,10,.5))}
}

.lp-hero{padding-top:150px;padding-bottom:100px;min-height:auto}
.lp-hero .tagline{
  display:inline-flex;align-items:center;gap:10px;padding:9px 17px;border-radius:30px;
  border:1px solid rgba(255,255,255,.26);background:rgba(0,0,0,.34);backdrop-filter:blur(5px);
  font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase;font-weight:800;color:#fff;margin-bottom:28px
}
.lp-hero .tagline svg{width:15px;height:15px;fill:none;stroke:#3ddc8a;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lp-hero h1{font-size:clamp(31px,3.9vw,50px);line-height:1.14;letter-spacing:-1.2px;font-weight:300;max-width:19ch}
.lp-hero h1 b{font-weight:800}
.lp-hero p.sub{margin-top:24px;max-width:52ch;font-size:17.5px;line-height:1.7}
.lp-cta-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:40px;align-items:center}
.lp-cta-row .note{font-size:13px;color:#c8c8d0;font-weight:500;max-width:24ch;line-height:1.5}

/* chips: o parágrafo de segmentos virou lista visual */
.seg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px;max-width:800px}
.seg-chips .sc-lbl{
  width:100%;margin-bottom:6px;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
  font-weight:800;color:#3ddc8a
}
.seg-chips .sc{
  font-size:12.5px;font-weight:600;color:#e2e2e9;padding:8px 15px;border-radius:30px;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.28);line-height:1.3
}
.fleet-line{
  margin-top:22px;display:inline-flex;align-items:center;gap:11px;padding:11px 18px;border-radius:12px;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.3);
  font-size:13px;color:#e2e2e9;font-weight:600;line-height:1.4
}
.fleet-line svg{width:19px;height:19px;fill:none;stroke:#3ddc8a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.fleet-line b{color:#fff}

/* ---------- 4. ABERTURA ---------- */
.lp-quote{max-width:840px}
.lp-quote .ic-round{margin-bottom:30px}
.lp-quote p{font-size:clamp(18px,1.9vw,22px);line-height:1.72;font-weight:400;letter-spacing:-.2px}

/* ---------- 5. DORES ---------- */
.dores{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dor{
  padding:38px 32px;border-radius:18px;background:#fff;
  border:1px solid var(--line-soft);position:relative;
  transition:transform .35s cubic-bezier(.16,.84,.3,1),box-shadow .35s,border-color .35s
}
.dor:hover{transform:translateY(-5px);border-color:rgba(22,179,100,.4);box-shadow:0 20px 44px rgba(0,0,0,.07)}
.dor .n{
  position:absolute;top:26px;right:28px;font-size:44px;font-weight:800;line-height:1;
  color:rgba(22,179,100,.12);letter-spacing:-2px
}
/* padding-right reserva o canto do numero-fantasma: sem ele o titulo passava por baixo */
.dor h4{font-size:18px;font-weight:800;line-height:1.32;letter-spacing:-.2px;margin:0 0 14px;padding-right:52px;min-height:48px}
.dor p{font-size:14.5px;line-height:1.72;font-weight:400}
@media(max-width:980px){.dores{grid-template-columns:1fr;gap:16px}}

/* ---------- 6. FRAMEWORK: trilha com traço que se desenha ---------- */
.tr-wrap{position:relative}
.tr-line{position:absolute;top:24px;left:7%;right:7%;height:2px;background:var(--line-soft);overflow:hidden}
.tr-line i{
  position:absolute;inset:0;background:linear-gradient(90deg,#16b364,#5ee39c);
  transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.16,.84,.3,1) .15s
}
.tr-wrap.in .tr-line i{transform:scaleX(1)}
.trilha{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;position:relative;align-items:stretch}
.tr-step{display:flex;flex-direction:column}
.tr-step .bolha{
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;margin-bottom:26px;
  background:#fff;border:2px solid var(--line-soft);color:#a2a2aa;position:relative;z-index:2;
  transition:border-color .5s,color .5s,background .5s
}
.tr-wrap.in .tr-step:nth-child(1) .bolha{transition-delay:.3s}
.tr-wrap.in .tr-step:nth-child(2) .bolha{transition-delay:.65s}
.tr-wrap.in .tr-step:nth-child(3) .bolha{transition-delay:1s}
.tr-wrap.in .tr-step:nth-child(4) .bolha{transition-delay:1.35s}
.tr-wrap.in .tr-step .bolha{border-color:#16b364;color:#0e9354;background:#eafaf1}
.tr-step .bolha svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tr-step .n{font-size:11px;letter-spacing:2.6px;font-weight:800;color:#16b364;text-transform:uppercase}
.tr-step h4{font-size:17.5px;font-weight:800;letter-spacing:-.2px;margin:11px 0 12px;line-height:1.32}
.tr-step p{font-size:14.2px;line-height:1.7;font-weight:400;margin-bottom:20px}
.tr-step .out{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line-soft);
  display:flex;align-items:flex-start;gap:9px;font-size:12.5px;font-weight:700;line-height:1.45
}
.tr-step .out svg{width:15px;height:15px;fill:none;stroke:#16b364;stroke-width:2.4;flex:0 0 auto;margin-top:1px}
@media(max-width:1000px){.trilha{grid-template-columns:1fr 1fr;gap:40px 28px}.tr-line{display:none}}
@media(max-width:620px){.trilha{grid-template-columns:1fr}}

/* ---------- 7. AS 5 FRENTES ---------- */
.frentes5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.f5{
  padding:34px 24px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:#16161b;
  display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.16,.84,.3,1),border-color .35s
}
.f5:hover{transform:translateY(-6px);border-color:rgba(22,179,100,.45)}
.f5 .ic-round{width:44px;height:44px;margin-bottom:22px}
.f5 .ic-round svg{width:22px;height:22px}
.f5 h4{font-size:17px;font-weight:800;margin-bottom:12px;letter-spacing:-.2px}
.f5 p{font-size:13.8px;line-height:1.68;font-weight:400}
.f5 .gain{
  margin-top:auto;padding-top:22px;font-size:12.5px;font-weight:800;line-height:1.45;color:#3ddc8a;
  display:flex;align-items:flex-start;gap:8px
}
.f5 .gain svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;flex:0 0 auto;margin-top:2px}
@media(max-width:1150px){.frentes5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.frentes5{grid-template-columns:1fr}}

/* ---------- 8. INDICADORES ---------- */
.inds{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ind{
  display:flex;gap:24px;align-items:flex-start;padding:34px 30px;border-radius:18px;
  background:#fff;border:1px solid var(--line-soft);
  transition:transform .35s cubic-bezier(.16,.84,.3,1),border-color .35s,box-shadow .35s
}
.ind:hover{transform:translateY(-4px);border-color:rgba(22,179,100,.4);box-shadow:0 18px 42px rgba(0,0,0,.06)}
.ind .ic-round{margin-bottom:0;width:44px;height:44px}
.ind .ic-round svg{width:22px;height:22px}
.ind .tx{flex:1;min-width:0}
.ind .sig{
  display:inline-block;font-size:10.5px;letter-spacing:2.2px;font-weight:800;text-transform:uppercase;
  color:#0e9354;background:rgba(22,179,100,.1);padding:5px 11px;border-radius:6px;margin-bottom:13px
}
.ind h4{font-size:17px;font-weight:800;line-height:1.32;margin-bottom:10px;letter-spacing:-.2px}
.ind p{font-size:14.2px;line-height:1.72;font-weight:400}
@media(max-width:760px){.inds{grid-template-columns:1fr}.ind{padding:28px 22px;gap:18px}}

/* ---------- 9. PROVA ---------- */
.provas{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.prova{padding-top:24px;border-top:2px solid rgba(255,255,255,.13)}
.prova:first-child{border-top-color:#16b364}
.prova .n{font-size:clamp(32px,3.8vw,46px);font-weight:800;letter-spacing:-1.6px;line-height:1;color:#fff}
.prova .l{margin-top:14px;font-size:13.5px;line-height:1.6;font-weight:400;max-width:21ch;color:#b9b9c2}
@media(max-width:900px){.provas{grid-template-columns:1fr 1fr;gap:24px}}

/* ---------- 10. FAQ: acordeão EM BOX, 1 resposta por vez ---------- */
.faq-acc{max-width:860px;display:grid;gap:12px}
.faq-acc details{
  background:#fff;border:1px solid var(--line-soft);border-radius:14px;
  transition:border-color .25s,box-shadow .25s
}
.faq-acc details:hover{border-color:rgba(22,179,100,.4)}
.faq-acc details[open]{border-color:rgba(22,179,100,.5);box-shadow:0 14px 34px rgba(0,0,0,.06)}
.faq-acc summary{
  list-style:none;cursor:pointer;padding:24px 60px 24px 26px;position:relative;
  font-size:16px;font-weight:700;line-height:1.45;letter-spacing:-.1px;transition:color .2s
}
.faq-acc summary::-webkit-details-marker{display:none}
.faq-acc summary:hover{color:#0e9354}
.faq-acc details[open] summary{color:#0e9354;padding-bottom:14px}
.faq-acc summary::after{
  content:"";position:absolute;right:26px;top:29px;width:10px;height:10px;
  border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;
  transform:rotate(45deg);transition:transform .25s;opacity:.45
}
.faq-acc details[open] summary::after{transform:rotate(-135deg);opacity:1}
.faq-acc .resp{padding:0 40px 26px 26px;font-size:15px;line-height:1.8;font-weight:400;max-width:66ch}
.faq-acc .resp p{margin:0}

/* ---------- 11. OUTROS SETORES ---------- */
.set-strip{display:flex;flex-wrap:wrap;gap:9px}
.set-strip a{
  font-size:13px;font-weight:600;padding:10px 17px;border-radius:30px;border:1px solid var(--line);
  transition:border-color .2s,background .2s,color .2s,transform .2s
}
.set-strip a:hover{border-color:#16b364;color:#0e9354;transform:translateY(-2px)}
.set-strip a.on{background:#16b364;border-color:#16b364;color:#06281a;font-weight:800}

/* Com o formulário na tela a tarja fixa de baixo sai: ela repete o mesmo
   convite e ainda tampa o pé do formulário, que é a conversão da página. */
body.form-a-vista .cta-bar{transform:translateY(100%) !important}

/* ---------- 12. FORMULÁRIO -> WHATSAPP ---------- */
.lp-form-sec{position:relative;overflow:hidden;padding:130px 0}
.lp-form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:start}
.lp-form-wrap .lead-txt h2{font-size:clamp(25px,2.9vw,36px);font-weight:400;letter-spacing:-.8px;line-height:1.24}
.lp-form-wrap .lead-txt h2 b{font-weight:800}
.lp-form-wrap .lead-txt p{margin-top:20px;font-size:16px;line-height:1.75;font-weight:400;max-width:44ch}
.lp-form-wrap .lead-txt ul{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:17px}
.lp-form-wrap .lead-txt ul li{display:flex;align-items:flex-start;gap:13px;font-size:15px;line-height:1.6;font-weight:500}
.lp-form-wrap .lead-txt ul li svg{width:20px;height:20px;fill:none;stroke:#16b364;stroke-width:2;flex:0 0 auto;margin-top:1px}
.lpform{
  padding:42px;border:1px solid var(--line);border-radius:20px;background:#fff;
  box-shadow:0 28px 66px rgba(0,0,0,.09)
}
.lpform .ft{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:2.2px;
  text-transform:uppercase;font-weight:800;color:#0e9354
}
.lpform .ft svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.lpform h3{font-size:23px;font-weight:800;letter-spacing:-.5px;margin:13px 0 8px;line-height:1.28}
.lpform .fs{font-size:14px;line-height:1.6;font-weight:400;margin-bottom:28px}
.lpform .row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.lpf{margin-bottom:15px}
.lpf label{display:block;font-size:12.5px;font-weight:700;margin-bottom:8px;letter-spacing:.02em}
.lpf input,.lpf select{
  width:100%;padding:15px 16px;font-family:inherit;font-size:15px;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:11px;transition:border-color .2s,box-shadow .2s
}
.lpf select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}
.lpf input:focus,.lpf select:focus{outline:none;border-color:#16b364;box-shadow:0 0 0 3px rgba(22,179,100,.16)}
.lpform .btn{width:100%;justify-content:center;margin-top:12px;padding:18px 30px}
.lpform .priv{font-size:11.5px;line-height:1.55;margin-top:18px;text-align:center;opacity:.7}
.lpform .msg{
  margin-top:14px;font-size:13.5px;font-weight:700;padding:13px 15px;border-radius:10px;line-height:1.5;
  background:rgba(22,179,100,.1);color:#0e9354;border:1px solid rgba(22,179,100,.3)
}
.lpform .msg.err{background:rgba(220,60,60,.09);color:#c0392b;border-color:rgba(220,60,60,.3)}
@media(max-width:960px){
  .lp-form-wrap{grid-template-columns:1fr;gap:46px}
  .lp-form-sec{padding:100px 0}
  .lpform{padding:28px}
  .lpform .row{grid-template-columns:1fr}
}

/* ---------- 13. HUB /setores ---------- */
.set-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.set-card{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:36px 28px;border:1px solid var(--line-soft);border-radius:18px;background:#fff;
  transition:transform .35s cubic-bezier(.16,.84,.3,1),border-color .35s,box-shadow .35s
}
.set-card:hover{transform:translateY(-6px);border-color:rgba(22,179,100,.5);box-shadow:0 22px 50px rgba(0,0,0,.08)}
.set-card .ic-round{width:44px;height:44px;margin-bottom:20px}
.set-card .ic-round svg{width:22px;height:22px}
.set-card .num{font-size:11px;letter-spacing:2.4px;font-weight:800;color:#16b364}
.set-card h3{font-size:18.5px;font-weight:800;letter-spacing:-.3px;margin:9px 0 12px;line-height:1.3}
.set-card p{font-size:13.8px;line-height:1.68;font-weight:400;padding-bottom:22px}
.set-card .fleet{
  margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;
  border:1px solid var(--line);padding:8px 14px;border-radius:30px;line-height:1.3
}
.set-card .fleet svg{width:15px;height:15px;fill:none;stroke:#16b364;stroke-width:1.8;flex:0 0 auto}
.set-card .go{
  margin-top:20px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:13px;font-weight:800;color:#0e9354;transition:gap .25s
}
/* sem esta regra o SVG sai no tamanho cheio e preenchido de preto */
.set-card .go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.set-card:hover .go{gap:14px}
@media(max-width:1050px){.set-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.set-grid{grid-template-columns:1fr}}

/* ---------- 14. tema light ---------- */
html[data-theme="light"] .dor p,html[data-theme="light"] .tr-step p,
html[data-theme="light"] .ind p,html[data-theme="light"] .set-card p,
html[data-theme="light"] .lpform .fs,html[data-theme="light"] .lp-form-wrap .lead-txt p,
html[data-theme="light"] .faq-acc .resp,html[data-theme="light"] .lp-head p,
html[data-theme="light"] .lp-quote p{color:#4c4c54}
html[data-theme="light"] .lp-band-dark p,html[data-theme="light"] .lp-band-dark .f5 p{color:#b9b9c2 !important}
html[data-theme="light"] .lp-band-dark .prova .l{color:#b9b9c2 !important;-webkit-text-fill-color:#b9b9c2}
html[data-theme="light"] .lp-band-dark .prova .n{color:#fff !important;-webkit-text-fill-color:#fff}

/* ---------- 15. motion respeitando quem pediu pra parar ---------- */
@media(prefers-reduced-motion:reduce){
  .tr-line i{transform:scaleX(1) !important;transition:none}
  .tr-step .bolha,.dor,.f5,.ind,.set-card{transition:none}
}