/* ==========================================================================
   Bora! IA · sistema web compartilhado · v4 · 23/10/2026
   v4: sai o CSS do menu (.nav__links, .nav__burger, .nav--aberta); link solto do FAQ e hover do rodapé deixam de ser dourados;
   foco de .btn e .fab-wpp em verde; .fab-wpp com aro escuro e respiro da barra do iPhone.
   v3: botões TODOS verdes (decisão do Bruno, 23/10: .btn--ouro, .btn--linha e .btn--fantasma mantêm o nome, mas viram verde), cabeçalho só com o logo
   (sem menu), .fab-wpp verde, .arco com véu no topo para esconder o letreiro do fundo das fotos novas.
   v2: select mantém a seta no foco e no erro (background-color), .vidro--fio, .fab-wpp--oculto, respiro do rodapé no celular;
   .sl recorta com overflow:clip (a .luz de 120% deixava cada seção com rolagem lateral de 25 px e anulava position:sticky
   dentro dela); links do rodapé com área de toque de 44 px (pseudo-elemento, nada visual muda).
   Origem: deck comercial do Bora Hub (preto e dourado) + guia oficial da marca.
   Receitas em interno/bora/funis-out26/02-sistema-visual.md.
   Documentação de uso: interno/bora/funis-out26/05-sistema-web.md.
   Regra de cache: as páginas importam com ?v=N. Mudou este arquivo, sobe o N.
   ========================================================================== */

/* ------------------------------------------------------------------ 0. Tokens */
:root{
  color-scheme:dark;

  /* cores */
  --fundo:#0B0D10; --preto-centro:#15181D; --preto-borda:#07090B;
  --tinta:#16191E; --carvao:#1F2329; --azul:#0E2A44;
  --off:#F7F7F5; --stone:#DBD6D1; --cinza:#8C8F94;
  --apoio-esc:#C9CBCE; --mut-esc:#A0A4AA; --apoio:#454A52; --mut:#62676F;
  --ouro:#C4A878; --ouro-claro:#DCC6A2; --ouro-texto:#7E6346;
  --ouro-1:#E0C7A4; --ouro-2:#B8976F; --ouro-3:#8A6E50; --ouro-aceso:#E6D0AC;
  --ouro-tinta:#F3ECDF; --ouro-tinta-txt:#5E4A33;
  --branco:#FFFFFF; --borda:#E7E3DE; --borda-esc:rgba(247,247,245,.12);
  /* verde dos botões (texto escuro por cima: contraste acima de 7:1) */
  --verde:#2FD27A; --verde-claro:#8CF2BA; --verde-2:#1FBF69; --verde-3:#149A52; --verde-texto:#04140A;
  --grad-verde:linear-gradient(180deg,#4BE08E 0%,#27C66F 55%,#19A85B 100%);

  /* fundos e degradês */
  --bg-esc:linear-gradient(160deg,#15191E 0%,#0E2A44 140%);
  --bg-preto:radial-gradient(ellipse 70% 60% at 50% 42%,#15181D 0%,#0B0D10 72%,#07090B 100%);
  --grad-ouro:linear-gradient(135deg,#E0C7A4 0%,#B8976F 45%,#8A6E50 100%);
  --grad-regua:linear-gradient(90deg,#E0C7A4,#B8976F);
  --grad-botao:linear-gradient(90deg,#E0C7A4,#C4A878);
  --grad-avatar:linear-gradient(135deg,#DCC6A2,#8A6E50);
  --luz-topo:radial-gradient(ellipse 72% 56% at 50% 0%,rgba(220,198,162,.22) 0%,rgba(220,198,162,.07) 42%,transparent 70%);
  --halo:radial-gradient(ellipse,rgba(220,198,162,.12) 0%,rgba(220,198,162,.04) 42%,rgba(220,198,162,0) 68%);
  --halo-logo:radial-gradient(circle,rgba(220,198,162,.16) 0%,rgba(220,198,162,.06) 34%,rgba(220,198,162,0) 64%);
  --veu-lateral:linear-gradient(90deg,#14181D 0%,rgba(20,24,29,.93) 36%,rgba(14,42,68,.35) 100%);
  --veu-base:linear-gradient(0deg,#0B0D10 0%,rgba(11,13,16,.88) 24%,rgba(11,13,16,.5) 55%,rgba(11,13,16,.22) 100%);
  --veu-centro:radial-gradient(ellipse 58% 52% at 50% 50%,rgba(9,11,14,.78) 0%,rgba(9,11,14,.45) 55%,rgba(9,11,14,.1) 100%),linear-gradient(180deg,rgba(9,11,14,.35),rgba(9,11,14,.15) 50%,rgba(9,11,14,.5));

  /* brilhos e sombras */
  --glow-texto:0 0 44px rgba(220,198,162,.28);
  --glow-numero:0 0 70px rgba(220,198,162,.4),0 0 18px rgba(220,198,162,.2);
  --glow-ast:0 0 18px rgba(220,198,162,.55);
  --sombra-vidro:0 40px 90px -40px rgba(0,0,0,.85),0 0 70px -34px rgba(220,198,162,.35),inset 0 1px 0 rgba(255,255,255,.07);
  --sombra-print:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 8px rgba(247,247,245,.03);
  --anel-ouro:0 0 0 4px rgba(196,168,120,.22);

  /* tipografia */
  --display:'Sora','Helvetica Neue',Arial,sans-serif;
  --texto:'Inter','Helvetica Neue',Arial,sans-serif;
  --fs-eyebrow:clamp(12px,1.1vw,15px);
  --fs-rot:clamp(11px,1vw,13px);
  --fs-corpo:clamp(16px,1.3vw,19px);
  --fs-peq:clamp(14px,1.1vw,16px);
  --fs-h3:clamp(20px,1.9vw,27px);
  --fs-tt2:clamp(26px,3vw,42px);
  --fs-tt:clamp(31px,3.8vw,56px);
  --fs-capa:clamp(38px,5vw,72px);
  --fs-gde:clamp(34px,4.8vw,66px);
  --fs-num:clamp(44px,5vw,72px);
  --trk-rotulo:.22em; --trk-titulo:-.02em;

  /* layout */
  --gutter:clamp(20px,7.5vw,150px);
  --max:1280px;
  --pad-secao:clamp(72px,10vw,150px);
  --r-cartao:20px; --r-vidro:26px; --r-vidro-g:30px; --r-print:34px; --r-pilula:999px;
  --nav-h:72px;

  /* movimento */
  --mola:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-fio:cubic-bezier(.4,0,.2,1);
  --dur-base:240ms;
}

/* ------------------------------------------------------------------ 1. Base */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--fundo);color:var(--off);font-family:var(--texto);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;min-width:320px;overflow-x:hidden;background:var(--fundo);font-size:var(--fs-corpo);line-height:1.5}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
strong,b{font-weight:600}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:4px}
::selection{background:rgba(196,168,120,.35);color:var(--off)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.oculto{display:none!important}

/* ------------------------------------------------------------------ 2. Seção */
/* overflow:clip recorta sem virar contêiner de rolagem (a .luz rotacionada passa 25 px da borda e um scrollIntoView horizontal deslocava a seção); hidden fica como reserva para navegador antigo */
.sl{position:relative;padding:var(--pad-secao) var(--gutter);overflow:hidden;overflow:clip;background:var(--bg-esc);color:var(--off);isolation:isolate}
.sl.preto{background:var(--bg-preto)}
.sl.plano{background:var(--fundo)}
.sl.luz-topo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--luz-topo)}
.sl.compacta{padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(44px,5vw,72px)}
.sl>.in{position:relative;max-width:var(--max);margin:0 auto}
.in--media{max-width:1080px}
.in--estreito{max-width:860px}
.abs{position:absolute}
.centro{text-align:center}

/* fundo com foto de cinema (capa, fecho) */
.foto-fundo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.foto-fundo img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,60% 50%);opacity:var(--op,.55)}
.cur .foto-fundo img{animation:kb 10s ease-out both}
.veu{position:absolute;inset:0;z-index:-1;pointer-events:none}
.veu--lateral{background:var(--veu-lateral)}
.veu--base{background:var(--veu-base)}
.veu--centro{background:var(--veu-centro)}
@media (max-width:900px){
  .veu--lateral{background:linear-gradient(180deg,rgba(11,13,16,.8) 0%,rgba(11,13,16,.9) 55%,#0B0D10 100%)}
}

/* cabeçalho de seção: eyebrow + régua + título + texto */
.cab{max-width:860px;margin-bottom:clamp(36px,5vw,64px)}
.cab.centro{margin-left:auto;margin-right:auto}
.cab.centro .regua{margin-left:auto;margin-right:auto}
.cab .regua{margin:18px 0 22px}
.cab .txt{margin-top:18px}

/* grades */
.grade-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.grade-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.grade-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,2vw,24px)}
@media (max-width:960px){.grade-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grade-2,.grade-3{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ 3. Tipografia */
.eb{font:600 var(--fs-eyebrow)/1.2 var(--texto);letter-spacing:var(--trk-rotulo);text-transform:uppercase;color:var(--ouro-claro)}
.rot{font:600 var(--fs-rot)/1.3 var(--texto);letter-spacing:.18em;text-transform:uppercase;color:var(--mut-esc)}
.tt{font:400 var(--fs-tt)/1.08 var(--display);letter-spacing:var(--trk-titulo);text-wrap:balance;color:var(--off)}
.tt2{font:400 var(--fs-tt2)/1.12 var(--display);letter-spacing:var(--trk-titulo);text-wrap:balance;color:var(--off)}
.tt--capa{font-size:var(--fs-capa);font-weight:300;line-height:1.04;letter-spacing:-.03em}
.gde{font:300 var(--fs-gde)/1.1 var(--display);letter-spacing:-.025em;text-wrap:balance;color:var(--off)}
.h3{font:500 var(--fs-h3)/1.22 var(--display);color:var(--off)}
.txt{font:400 var(--fs-corpo)/1.5 var(--texto);color:var(--apoio-esc)}
.txt b{color:var(--off);font-weight:600}
.txt+.txt{margin-top:1em}
.peq{font:400 var(--fs-peq)/1.5 var(--texto);color:var(--mut-esc)}
.ouro,.tt b,.tt2 b,.gde b{font-weight:inherit;color:var(--ouro-claro);text-shadow:var(--glow-texto)}
.cinza{color:var(--mut-esc)}
.custa{color:var(--stone);opacity:.72}
.pergunta{font:400 clamp(20px,2.2vw,30px)/1.3 var(--display);color:var(--ouro)}
.regua{width:92px;height:4px;border-radius:2px;background:var(--grad-regua)}
.cur .regua{animation:regua 1s var(--mola) var(--d,.25s) both}
.num-tab{font-variant-numeric:tabular-nums}
.idx{font:200 clamp(22px,2.6vw,36px)/1 var(--display);letter-spacing:.14em;color:rgba(220,198,162,.45);font-variant-numeric:tabular-nums;transition:color .6s ease}
.cur .idx,.vis .idx,.vis.idx{color:var(--ouro)}

/* lista com asterisco dourado */
.lista{display:grid;gap:4px}
.lista li{position:relative;padding:10px 0 10px 1.7em;font:400 var(--fs-corpo)/1.45 var(--texto);color:var(--apoio-esc)}
.lista li::before{content:"✻";position:absolute;left:0;top:10px;color:var(--ouro);text-shadow:var(--glow-ast)}
.lista li b{color:var(--off);font-weight:600}
.lista--check li::before{content:"✓";font-weight:700;text-shadow:none}
.lista--fios li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(220,198,162,.16) 18%,rgba(220,198,162,.16) 82%,transparent)}
.lista--fios li:last-child::after{display:none}
.lista--peq li{font-size:var(--fs-peq);padding:8px 0 8px 1.6em}
.lista--peq li::before{top:8px}

/* ------------------------------------------------------------------ 4. Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:14px;border:1px solid transparent;font:600 16px/1.2 var(--texto);letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) ease,background var(--dur-base) ease,border-color var(--dur-base) ease,color var(--dur-base) ease}
/* v3: os três estilos são verdes. O nome da classe ficou (.btn--ouro = botão principal) para não mexer no HTML de todas as páginas */
.btn--ouro{color:var(--verde-texto);background:var(--grad-verde);box-shadow:0 14px 30px -14px rgba(47,210,122,.75),inset 0 1px 0 rgba(255,255,255,.28)}
.btn--ouro:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(47,210,122,.95),inset 0 1px 0 rgba(255,255,255,.34)}
.btn--linha{color:var(--verde-claro);background:rgba(47,210,122,.06);border-color:rgba(47,210,122,.65)}
.btn--linha:hover{transform:translateY(-2px);border-color:var(--verde);background:rgba(47,210,122,.14)}
.btn--fantasma{color:var(--verde-claro);border-color:rgba(47,210,122,.4)}
.btn--fantasma:hover{border-color:var(--verde);background:rgba(47,210,122,.1)}
.btn--bloco{width:100%}
.btn--peq{min-height:44px;padding:10px 18px;font-size:15px;border-radius:12px}
.btn--g{min-height:56px;padding:16px 32px;font-size:17px;border-radius:16px}
.btn svg{width:18px;height:18px;flex:none}
.btn[disabled],.btn[aria-busy="true"]{opacity:.7;cursor:progress;transform:none}
.cta-linha{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cta-linha.centro{justify-content:center}
.cta-meio{margin-top:clamp(32px,4vw,56px);display:flex;justify-content:center}
@media (max-width:520px){.cta-linha .btn{width:100%}}

/* ------------------------------------------------------------------ 5. Rótulos, pílulas, selos */
.pil{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font:600 12px/1 var(--texto);letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-claro);background:rgba(220,198,162,.07);border:1px solid rgba(220,198,162,.32);border-radius:var(--r-pilula);padding:10px 16px;box-shadow:0 0 30px -10px rgba(220,198,162,.35)}
.pil--ouro{background:rgba(196,168,120,.14);border-color:rgba(196,168,120,.55)}
.chip{display:inline-block;font:600 11px/1.2 var(--texto);letter-spacing:.18em;text-transform:uppercase;padding:7px 14px;border-radius:var(--r-pilula);border:1px solid rgba(196,168,120,.5);color:var(--ouro-claro);white-space:normal}
.selo{display:inline-block;font:600 11px/1.2 var(--texto);letter-spacing:.12em;text-transform:uppercase;background:var(--ouro);color:var(--carvao);padding:7px 14px;border-radius:var(--r-pilula)}

/* ------------------------------------------------------------------ 6. Cartão de vidro */
.vidro{position:relative;isolation:isolate;border-radius:var(--r-vidro);border:1px solid rgba(220,198,162,.24);background:linear-gradient(180deg,rgba(247,247,245,.07) 0%,rgba(247,247,245,.025) 100%);box-shadow:var(--sombra-vidro);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.vidro::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 80% at 50% -20%,rgba(220,198,162,.12),transparent 70%)}
.vidro::after{content:"";position:absolute;left:14%;right:14%;top:-1px;height:1px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(220,198,162,.9),transparent);box-shadow:0 0 16px rgba(220,198,162,.55)}
.vidro--leve{border-radius:var(--r-cartao);border-color:rgba(247,247,245,.1);background:rgba(247,247,245,.03);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.vidro--leve::before,.vidro--leve::after{display:none}
/* grau leve com o fio de luz na aresta (sem blur): grades com muitos cartões na mesma tela */
.vidro--leve.vidro--fio::after{display:block;opacity:.55}
.vidro--ligado{border-color:rgba(196,168,120,.65);background:linear-gradient(180deg,rgba(196,168,120,.16),rgba(196,168,120,.03));box-shadow:0 40px 80px -50px rgba(196,168,120,.7),0 0 0 1px rgba(196,168,120,.15)}
.vidro--oferta{border-radius:var(--r-vidro-g);border-color:rgba(220,198,162,.26)}
.vidro--oferta::after{left:12%;right:12%;opacity:.95}
.vidro--hover{transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) ease}
.vidro--hover:hover{transform:translateY(-2px);border-color:rgba(196,168,120,.5)}
.cartao{padding:clamp(22px,2.8vw,36px)}
/* ficha: ícone em anel + título + texto (cenário, áreas, pilares) */
.ficha{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(22px,2.6vw,32px)}
.ficha .ico-anel,.ficha .med{margin-bottom:6px}
.ficha h3{font:500 clamp(17px,1.5vw,21px)/1.25 var(--display);color:var(--off);text-wrap:balance}
.ficha p{font:400 clamp(15px,1.2vw,17px)/1.5 var(--texto);color:var(--apoio-esc)}
@media (max-width:700px){
  .vidro:not(.vidro--leve):not(.vidro--modal){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,24,29,.82)}
}

/* moldura de foto/print */
.moldura{border-radius:var(--r-print);overflow:hidden;background:#0F1215;border:1px solid rgba(247,247,245,.14);box-shadow:var(--sombra-print)}
.moldura img{width:100%;height:100%;object-fit:cover}
.arco{border-radius:200px 200px 22px 22px;overflow:hidden;aspect-ratio:4/5;background:#15181D;border:1px solid rgba(220,198,162,.2)}
.arco img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.arco{position:relative}
.arco::after{content:"";position:absolute;left:0;right:0;top:0;height:15%;background:linear-gradient(180deg,rgba(11,13,16,.9),rgba(11,13,16,0));pointer-events:none}

/* ------------------------------------------------------------------ 7. Ícones de traço fino */
.ico{width:24px;height:24px;fill:none;stroke:var(--ouro-claro);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico-anel{width:60px;height:60px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(220,198,162,.38);background:radial-gradient(circle at 50% 30%,rgba(220,198,162,.1),rgba(220,198,162,0) 70%);box-shadow:0 0 24px -6px rgba(220,198,162,.35)}
.ico-anel .ico{width:28px;height:28px}
.med{position:relative;width:88px;height:88px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(220,198,162,.42);background:radial-gradient(circle at 50% 30%,rgba(220,198,162,.16),rgba(220,198,162,.02) 70%);box-shadow:0 0 34px -8px rgba(220,198,162,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.med::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(220,198,162,.12)}
.med .ico{width:40px;height:40px;stroke-width:1.4}

/* ------------------------------------------------------------------ 8. Números grandes (KPI) */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(20px,3vw,40px)}
.kpi{position:relative;padding-top:22px;border-top:1px solid var(--borda-esc);display:flex;flex-direction:column;gap:10px}
.kpi .traco{position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--grad-regua);transform-origin:0 50%}
.js .kpi .traco{transform:scaleX(0)}
.cur .kpi .traco{animation:estica 1.1s var(--mola) calc(var(--d,0s) + .2s) both}
.kn{font:200 var(--fs-num)/1.05 var(--display);color:var(--ouro);letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:var(--glow-numero);white-space:nowrap}
.kn small{font-size:.46em;letter-spacing:0;color:var(--ouro-claro);font-weight:300;margin:0 .1em}
.kpi .rot{color:var(--mut-esc);letter-spacing:.12em;text-transform:none;font-weight:500;font-size:var(--fs-peq);line-height:1.4}

/* ------------------------------------------------------------------ 9. Divisores e luz */
.fio-h{height:1px;background:linear-gradient(90deg,transparent,rgba(220,198,162,.35) 20%,rgba(220,198,162,.35) 80%,transparent)}
.fio-h--forte{background:linear-gradient(90deg,transparent,rgba(220,198,162,.6),transparent)}
.luz{position:absolute;left:-10%;width:120%;height:2px;top:var(--y,60%);transform:rotate(-20deg);transform-origin:50% 50%;pointer-events:none;z-index:0;background:linear-gradient(90deg,rgba(224,199,164,0) 0%,rgba(224,199,164,0) 30%,rgba(224,199,164,.95) 50%,rgba(224,199,164,0) 70%,rgba(224,199,164,0) 100%);background-size:220% 100%;background-position:0 0;opacity:.42;filter:drop-shadow(0 0 10px rgba(196,168,120,.55))}
.cur .luz{animation:varre 3.4s cubic-bezier(.3,.6,.2,1) var(--d,.25s) both}
.pulso{position:absolute;top:0;bottom:0;width:180px;left:-200px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(196,168,120,.35),transparent)}
.cur .pulso{animation:corre 1.6s ease-in-out var(--d,1.4s) both}
.fio-luz{position:relative;width:2px;height:var(--h,120px);margin:0 auto;transform-origin:50% 0;background:linear-gradient(180deg,rgba(220,198,162,0),rgba(220,198,162,.85))}
.fio-luz::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;border-radius:50%;background:var(--ouro-claro);transform:translateX(-50%);box-shadow:0 0 16px rgba(220,198,162,.9)}
.cur .fio-luz{animation:cresce 1s var(--mola) var(--d,.9s) both}
.halo-bg{position:absolute;left:50%;top:50%;width:min(1000px,140vw);height:520px;transform:translate(-50%,-50%);background:var(--halo);pointer-events:none;z-index:-1}

/* anéis concêntricos (SVG viewBox 0 0 700 700) */
.aneis{width:100%;height:100%}
.aneis circle{fill:none;stroke:rgba(220,198,162,.22);stroke-width:1;transform-box:fill-box;transform-origin:center}
.aneis .a1{stroke-dasharray:1;stroke-dashoffset:0}
.js .sl:not(.cur) .aneis .a1{stroke-dashoffset:1}
.cur .aneis .a1{animation:traca 1.8s cubic-bezier(.6,0,.2,1) .3s both}
.aneis .a2{stroke:rgba(220,198,162,.12);stroke-dasharray:2 10}
.cur .aneis .a2{animation:aparece 1.4s ease .9s both}
.aneis .halo{stroke:rgba(220,198,162,.35);opacity:0}
.cur .aneis .halo{animation:of-halo 3.6s ease-out 1.4s infinite}

/* bloco de marca (hero): anéis + logo + fio de luz */
.marca{position:relative;width:100%;max-width:520px;aspect-ratio:1;margin:0 auto;display:flex;align-items:center;justify-content:center}
.marca::before{content:"";position:absolute;inset:8%;border-radius:50%;background:var(--halo-logo);pointer-events:none}
.marca .aneis{position:absolute;inset:0}
.marca__logo{position:relative;width:56%;height:auto;filter:drop-shadow(0 0 34px rgba(220,198,162,.38))}
.marca .fio-luz{position:absolute;left:calc(50% - 1px);top:62%;--h:16%}

/* pilha de rostos */
.rostos{display:flex;align-items:center;gap:14px}
.rostos__pilha{display:flex;flex:none}
.rostos__pilha img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid #14171C;margin-left:-12px;background:#15181D}
.rostos__pilha img:first-child{margin-left:0}
.rostos p{font:400 14px/1.4 var(--texto);color:var(--mut-esc)}
.rostos p b{color:var(--off);font-weight:500}

/* ------------------------------------------------------------------ 10. Faixa de logos */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(22px,4vw,56px) clamp(28px,4.5vw,64px)}
.logos img{height:clamp(24px,2.6vw,36px);width:auto;opacity:.62;filter:grayscale(1) brightness(0) invert(1);transition:opacity .3s ease}
.logos img:hover{opacity:1}
.logos img.alto{height:clamp(44px,5vw,64px)}
.logos img.cor{filter:none;opacity:.9}
.logos--esq{justify-content:flex-start}

/* ------------------------------------------------------------------ 11. Navegação */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;padding:16px var(--gutter);transition:background .4s ease,box-shadow .4s ease,padding .4s ease}
.nav--solida{background:rgba(11,13,16,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(247,247,245,.06);padding-top:10px;padding-bottom:10px}
.nav__in{position:relative;max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:20px;min-height:44px} /* v3: sem menu, só o logo no centro */
.nav__logo{display:block;height:26px;flex:none}
.nav__logo img{height:100%;width:auto}

/* barra de progresso dourada no topo */
#barra{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--grad-regua);z-index:41;pointer-events:none}

/* ------------------------------------------------------------------ 12. Rota (linha do tempo com farol) */
.rota{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px);padding-top:46px}
.rota::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:linear-gradient(90deg,rgba(247,247,245,.06),rgba(247,247,245,.18) 10%,rgba(247,247,245,.18) 90%,rgba(247,247,245,.06))}
.rota__passo{position:relative;display:flex;flex-direction:column;gap:12px}
.rota__passo::before{content:"";position:absolute;left:0;top:-46px;width:18px;height:18px;border-radius:50%;background:#0B0D10;border:1px solid rgba(247,247,245,.28);transform:scale(.6);transition:transform .6s var(--mola) .35s,background .4s ease .35s,box-shadow .4s ease .35s,border-color .4s ease .35s}
.rota__passo::after{content:"";position:absolute;left:0;right:calc(-1 * clamp(18px,3vw,40px));top:-38px;height:3px;border-radius:2px;background:linear-gradient(90deg,#B8976F,#E6D0AC);box-shadow:0 0 22px rgba(224,199,164,.7),0 0 56px rgba(224,199,164,.28);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-fio)}
.rota__passo:last-child::after{right:0}
.rota__passo.vis::before,html:not(.js) .rota__passo::before{transform:none;background:#E6D0AC;border-color:#E6D0AC;box-shadow:0 0 0 7px rgba(224,199,164,.12),0 0 24px rgba(224,199,164,.75)}
.rota__passo.vis::after,html:not(.js) .rota__passo::after{transform:scaleX(1)}
.rota__passo .h3{font-size:clamp(18px,1.6vw,23px)}
@media (max-width:760px){
  .rota{grid-template-columns:1fr;gap:28px;padding-top:0;padding-left:40px}
  .rota::before{left:9px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,rgba(247,247,245,.06),rgba(247,247,245,.18) 10%,rgba(247,247,245,.18) 90%,rgba(247,247,245,.06))}
  .rota__passo::before{left:-40px;top:4px}
  .rota__passo::after{left:-32px;right:auto;top:26px;bottom:-28px;width:3px;height:auto;transform:scaleY(0);transform-origin:50% 0}
  .rota__passo.vis::after,html:not(.js) .rota__passo::after{transform:scaleY(1)}
  .rota__passo:last-child::after{display:none}
}

/* ------------------------------------------------------------------ 13. Depoimento */
.dep{display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2.8vw,34px);height:100%}
.dep__aspas{font:300 76px/.5 var(--display);color:var(--ouro);opacity:.55;height:30px;margin-top:4px}
.dep__frase{font:300 clamp(17px,1.55vw,22px)/1.42 var(--display);color:var(--off);border-left:3px solid var(--ouro);padding-left:18px}
.dep__frase b{font-weight:400;color:var(--ouro-claro);text-shadow:var(--glow-texto)}
.dep__quem{display:flex;align-items:center;gap:12px;margin-top:auto}
.dep__ini{width:40px;height:40px;border-radius:50%;flex:none;background:var(--grad-avatar);color:var(--tinta);font:600 15px var(--texto);display:inline-flex;align-items:center;justify-content:center}
.dep__nome{font:500 15px/1.3 var(--display);color:var(--off)}
.dep__ctx{font:400 13px/1.4 var(--texto);color:var(--mut-esc)}

/* ------------------------------------------------------------------ 14. FAQ */
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--borda-esc);border-radius:16px;background:rgba(247,247,245,.025);transition:border-color .3s ease,background .3s ease}
.faq details[open]{border-color:rgba(220,198,162,.4);background:rgba(220,198,162,.05)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;min-height:56px;font:500 clamp(16px,1.4vw,19px)/1.35 var(--display);color:var(--off);border-radius:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:none;margin:0 6px 6px 0;border-right:1px solid var(--ouro);border-bottom:1px solid var(--ouro);transform:rotate(45deg);transition:transform .35s var(--mola)}
.faq details[open] summary::after{transform:rotate(225deg);margin-bottom:-4px}
.faq__resp{padding:0 22px 22px;font:400 var(--fs-corpo)/1.55 var(--texto);color:var(--apoio-esc)}
.faq__resp p+p{margin-top:.8em}
.faq__resp a:not(.btn){color:var(--verde-claro);text-decoration-color:rgba(140,242,186,.5);text-underline-offset:3px}

/* ------------------------------------------------------------------ 15. Modal acessível */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(7,9,11,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal__panel{position:relative;width:100%;max-width:640px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;padding:clamp(24px,4vw,44px)}
.modal .vidro--modal{background:linear-gradient(180deg,rgba(24,27,32,.97),rgba(14,16,20,.98));border-color:rgba(220,198,162,.3)}
.modal__close{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--borda-esc);background:rgba(247,247,245,.04);display:inline-flex;align-items:center;justify-content:center;color:var(--apoio-esc);transition:border-color .2s,color .2s}
.modal__close:hover{border-color:var(--ouro);color:var(--ouro-claro)}
.modal__close svg{width:18px;height:18px}
.modal__cab{margin-bottom:24px;padding-right:48px}
.modal__cab .tt2{margin-top:10px;font-size:clamp(24px,2.6vw,34px)}
.modal__cab .txt{margin-top:10px}
body.modal-aberto{overflow:hidden}
.js .modal__panel{animation:pop .5s var(--mola) both}
.js .modal__backdrop{animation:aparece .4s ease both}

/* ------------------------------------------------------------------ 16. Formulário escuro */
.form{display:grid;gap:16px}
.form__linha{display:grid;gap:16px}
.form__linha--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.form__linha--2{grid-template-columns:1fr}}
.campo{display:block;position:relative}
.campo__rotulo{display:block;font:600 12px/1.2 var(--texto);letter-spacing:.14em;text-transform:uppercase;color:var(--mut-esc);margin-bottom:8px}
.campo input,.campo select,.campo textarea{width:100%;min-height:50px;padding:13px 16px;border-radius:12px;border:1px solid rgba(247,247,245,.14);background:rgba(247,247,245,.04);color:var(--off);font:400 16px/1.4 var(--texto);-webkit-appearance:none;appearance:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(160,164,170,.65)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:rgba(196,168,120,.8);box-shadow:0 0 0 3px rgba(196,168,120,.18);background-color:rgba(247,247,245,.06)}
.campo select{padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCC6A2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
.campo select option{background:#15181D;color:var(--off)}
.campo select:invalid,.campo select.vazio{color:rgba(160,164,170,.8)}
.campo textarea{min-height:120px;resize:vertical}
.campo--erro input,.campo--erro select,.campo--erro textarea{border-color:rgba(224,199,164,.85);background-color:rgba(220,198,162,.06)}
.campo--erro .campo__rotulo{color:var(--ouro-claro)}
.campo__erro{display:block;margin-top:7px;font:500 13px/1.4 var(--texto);color:var(--ouro-claro)}
.campo__erro::before{content:"✻ ";color:var(--ouro)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.form__nota{font:400 13px/1.55 var(--texto);color:var(--mut-esc)}
.form__ok,.form__falha{padding:14px 16px;border-radius:12px;border:1px solid rgba(220,198,162,.45);background:rgba(220,198,162,.08);color:var(--off);font:400 15px/1.5 var(--texto)}
.form__falha{border-color:rgba(247,247,245,.2);background:rgba(247,247,245,.05)}

/* ------------------------------------------------------------------ 17. Rodapé e botão flutuante */
.rodape{padding:clamp(40px,5vw,64px) var(--gutter) 40px;background:#07090B;border-top:1px solid rgba(247,247,245,.06)}
.rodape__in{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 32px}
.rodape__logo{height:22px;width:auto}
.rodape__ass{font:600 11px/1.4 var(--texto);letter-spacing:.22em;text-transform:uppercase;color:var(--mut-esc);opacity:.85}
.rodape p{font:400 13px/1.7 var(--texto);color:var(--mut-esc)}
.rodape a{position:relative;color:var(--apoio-esc);text-decoration:none;border-bottom:1px solid rgba(247,247,245,.2);transition:color .2s,border-color .2s}
.rodape a::after{content:"";position:absolute;left:-6px;right:-6px;top:-12px;bottom:-12px} /* área de toque de 44 px sem mudar o visual do link */
.rodape a:hover{color:var(--off);border-color:rgba(247,247,245,.5)}
.fab-wpp{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--grad-verde);border:2px solid #0B0D10;color:var(--verde-texto);box-shadow:0 0 0 1px rgba(47,210,122,.7),0 18px 40px -16px rgba(0,0,0,.9),0 0 30px -8px rgba(47,210,122,.6);transition:transform .25s var(--ease-out),border-color .25s,opacity .3s ease}
.fab-wpp:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--verde-claro),0 18px 40px -16px rgba(0,0,0,.9),0 0 30px -8px rgba(47,210,122,.6)}
.btn:focus-visible,.fab-wpp:focus-visible{outline-color:var(--verde-claro)}
.fab-wpp svg{width:26px;height:26px}
/* some enquanto um CTA marcado com data-fab-esconde está na tela, ou com o modal aberto (o JS liga a classe) */
.fab-wpp--oculto,body.modal-aberto .fab-wpp{opacity:0;pointer-events:none;transform:translateY(14px)}
/* respiro no fim da página para o botão flutuante não cobrir os links do rodapé no celular */
@media (max-width:600px){.rodape{padding-bottom:100px}}

/* ------------------------------------------------------------------ 18. Fotos de evento (só aparecem quando houver foto) */
.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.galeria:has(figure:not([hidden])){margin-bottom:clamp(32px,4vw,48px)}
.galeria figure{position:relative;border-radius:var(--r-cartao);overflow:hidden;aspect-ratio:4/3;background:#15181D;border:1px solid rgba(247,247,245,.1)}
.galeria figure img{width:100%;height:100%;object-fit:cover}
.galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;font:500 13px/1.3 var(--texto);color:var(--off);background:linear-gradient(0deg,rgba(11,13,16,.9),rgba(11,13,16,0))}

/* ------------------------------------------------------------------ 19. Movimento */
@keyframes sobe{from{opacity:0;transform:translateY(30px)}}
@keyframes aparece{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.93)}}
@keyframes daDireita{from{opacity:0;transform:translateX(70px) perspective(1400px) rotateY(-9deg)}}
@keyframes daEsquerda{from{opacity:0;transform:translateX(-40px)}}
@keyframes palavra{from{opacity:0;transform:translateY(.35em);filter:blur(6px)}}
@keyframes regua{from{width:0;opacity:.2}}
@keyframes estica{from{transform:scaleX(0)}}
@keyframes cresce{from{transform:scaleY(0);opacity:0}}
@keyframes traca{from{stroke-dashoffset:1}}
@keyframes revela{from{clip-path:inset(100% 0 0 0 round 24px)}to{clip-path:inset(0 0 0 0 round 24px)}}
@keyframes kb{from{transform:scale(1.09)}}
@keyframes varre{from{background-position:100% 0;opacity:0}25%{opacity:.95}to{background-position:0 0;opacity:.42}}
@keyframes corre{to{left:calc(100% + 20px)}}
@keyframes halo{from{transform:scale(1);opacity:.8}to{transform:scale(1.45);opacity:0}}
@keyframes of-halo{from{transform:scale(1);opacity:.7}to{transform:scale(1.18);opacity:0}}
@keyframes lateja{50%{opacity:.35}}
@keyframes pisca{50%{opacity:0}}
@keyframes respira{50%{box-shadow:0 0 0 6px rgba(220,198,162,.08),0 0 36px -6px rgba(220,198,162,.55);border-color:rgba(220,198,162,.9)}}
@keyframes acende{0%{border-color:var(--borda-esc)}35%{border-color:var(--ouro);box-shadow:0 0 0 4px rgba(196,168,120,.22)}100%{border-color:rgba(196,168,120,.6);box-shadow:0 0 0 0 rgba(196,168,120,0)}}
@keyframes shim{from{background-position:100% 0}to{background-position:0 0}}

/* entradas: .a (sobe) .a.fade .a.pop .a.dir .a.esq, com atraso --d; só escondem com JS ligado */
.js .sl:not(.cur) .a{opacity:0}
.cur .a{animation:sobe .9s var(--mola) var(--d,0s) both}
.cur .a.fade{animation-name:aparece}
.cur .a.pop{animation-name:pop}
.cur .a.dir{animation-name:daDireita;animation-duration:1.1s}
.cur .a.esq{animation-name:daEsquerda}

/* título palavra por palavra (.palavras; o JS embrulha cada palavra em .w com o atraso inline) */
.w{display:inline-block;white-space:pre}
.js .sl:not(.cur) .palavras .w{opacity:0}
.cur .palavras .w{animation:palavra .7s var(--mola) both}

/* revelação em passos: contêiner [data-steps], itens [data-s="1…N"]; ganham .vis em ordem */
.js [data-s]{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .75s var(--mola)}
.js [data-s].vis{opacity:1;transform:none}

/* linha SVG que se desenha: <path pathLength="1" class="traco-svg"> dentro de um [data-r] ou de uma .sl */
.traco-svg{stroke-dasharray:1;stroke-dashoffset:0}
.js .sl:not(.cur) .traco-svg{stroke-dashoffset:1}
.cur .traco-svg{animation:traca 1.4s cubic-bezier(.6,0,.2,1) calc(.2s + var(--k,0) * .12s) both}
.no-svg{transform-box:fill-box;transform-origin:center}
.js .sl:not(.cur) .no-svg{opacity:0}
.cur .no-svg{animation:pop .6s var(--mola) calc(.9s + var(--k,0) * .12s) both}

/* brilho que corre no dourado (opcional, um por tela) */
.ouro-brilho{background:linear-gradient(100deg,#8A6E50 0%,#E0C7A4 35%,#F3E3C3 50%,#E0C7A4 65%,#8A6E50 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;animation:shim 4.5s ease-in-out infinite}

/* cursor de digitação */
.digitando::after{content:"";display:inline-block;width:3px;height:1em;background:var(--ouro);margin-left:4px;vertical-align:-3px;animation:pisca .8s steps(1) infinite}

/* movimento reduzido: tudo visível, nada anima */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .sl:not(.cur) .a,.js .sl:not(.cur) .palavras .w,.js .sl:not(.cur) .no-svg{opacity:1}
  .js .sl:not(.cur) .aneis .a1,.js .sl:not(.cur) .traco-svg{stroke-dashoffset:0}
  .js [data-s]{opacity:1;transform:none}
  .js .kpi .traco{transform:none}
  .rota__passo::before{transform:none;background:#E6D0AC;border-color:#E6D0AC}
  .rota__passo::after{transform:none}
  .aneis .halo{opacity:.4}
  .w{filter:none;transform:none}
  .sl,.sl *,.sl::before,.sl::after,.modal *,.nav *,.btn,.fab-wpp{animation:none!important;transition:none!important}
}