/* ==========================================================================
   FEMUR 2027 . sistema de design
   Campo escuro por padrao. [data-campo="creme"] troca a secao para papel.
   ========================================================================== */

:root{
  /* As quatro cores do arquivo oficial da marca, lidas do PDF do logotipo.
     Nada aqui é escolha de gosto: são os valores que o arquivo carrega. */
  --marca-verde:#07240B;
  --marca-bronze:#645827;
  --marca-creme:#F7DCCC;
  --marca-preto:#090D0F;
  --kit-creme:#F7DCCC;

  /* A escala do campo escuro sai do verde da marca clareado mantendo a
     proporção entre os canais — ou seja, mantendo o matiz. Cada tom foi
     medido: o número ao lado é o contraste do creme sobre ele. */
  --menu-fundo:#07240B;          /* o mais fundo: menu e rodapé      13,8:1 */
  --canvas:#0B3A12;              /* o chão das páginas                9,9:1 */
  --canvas-fundo:#09310F;        /* um degrau abaixo do chão         11,0:1 */
  --panel:#0F4F18;               /* cartão e painel                   7,5:1 */
  --panel-alto:#125E1D;          /* painel em destaque                6,1:1 */
  --panel-elevado:#14691F;

  /* O bronze puro dá 1,8:1 sobre o verde: não serve para texto ali. Para o
     campo escuro ele é misturado com o creme da marca até passar de 4,5:1,
     sem sair do matiz. No campo creme o bronze puro volta, e passa. */
  --accent:#B09D7D;              /* bronze 48% + creme                4,9:1 */
  --accent-hover:#CDBFAB;
  --accent-muted:#B09D7D;
  --accent-fraco:rgba(100,88,39,.16);

  --text-primary:#F7DCCC;        /* o creme da marca                  9,9:1 */
  --text-secondary:#CDBFAB;      /*                                   7,2:1 */
  --text-terciario:#B0AB94;      /*                                   5,6:1 */
  --text-sobre-accent:#07240B;

  --linha:#645827;
  --linha-fina:rgba(100,88,39,.30);
  --foco:#CDBFAB;

  /* sombra so para descolar a letra do fundo. A camada larga de 44px que
     havia aqui somava com a elipse e virava borrao. */
  --tshadow:0 1px 2px rgba(7,13,15,.92),0 2px 10px rgba(7,13,15,.62);

  --e-saida:cubic-bezier(.16,1,.3,1);
  --e-suave:cubic-bezier(.4,0,.2,1);
  --t-rapido:220ms;
  --t-medio:420ms;
  --t-lento:760ms;

  --larg:1280px;
  --gut:clamp(20px,4vw,56px);

  --fd:Outfit,"Avenir Next","Century Gothic",system-ui,sans-serif;
  --ft:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* O campo creme: o papel é o creme do arquivo, e a tinta é o verde da marca.
   Aqui o bronze puro funciona (5,4:1) e volta a ser ele mesmo. */
[data-campo="creme"]{
  --canvas:#F7DCCC;
  --canvas-fundo:#FBEADF;
  --panel:#F2D2BF;
  --panel-alto:#EDC9B3;
  --panel-elevado:#FDF3EC;
  --accent:#645827;
  --accent-hover:#463D1B;
  --accent-muted:#645827;        /* bronze puro sobre o creme         5,4:1 */
  --accent-fraco:rgba(100,88,39,.12);
  --text-primary:#07240B;        /* verde da marca sobre o creme     12,7:1 */
  --text-secondary:#3A4A36;      /*                                   7,6:1 */
  --text-terciario:#5C5A3B;      /*                                   5,6:1 */
  --text-sobre-accent:#F7DCCC;
  --linha:#645827;
  --linha-fina:rgba(7,36,11,.20);
  --foco:#463D1B;
}

/* --- base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  overflow-x:hidden;overflow-x:clip;margin:0;
  background:var(--canvas-fundo);color:var(--text-primary);
  font-family:var(--ft);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none;transition:color var(--t-rapido) var(--e-suave)}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:2px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--text-sobre-accent)}

.pular{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--text-sobre-accent);
  padding:12px 18px;z-index:200;font-family:var(--fm);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.pular:focus{left:12px;top:12px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- tipografia ---------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--fd);font-weight:500;
  line-height:1.06;letter-spacing:-.022em;margin:0;text-wrap:balance;color:var(--text-primary)}
h1{font-size:clamp(2.6rem,6.4vw,5.1rem)}
h2{font-size:clamp(2rem,4.2vw,3.4rem)}
h3{font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.014em}
h4{font-size:1.12rem;letter-spacing:-.01em;font-weight:600}
p{margin:0 0 1.1em;max-width:68ch;text-wrap:pretty}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.55;color:var(--text-secondary);max-width:56ch}
.rotulo{font-family:var(--fm);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-muted);font-weight:500;display:inline-block}
.num{font-family:var(--fd);font-size:clamp(2.4rem,4.6vw,3.9rem);line-height:.95;font-weight:500;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text-primary)}
.mono{font-family:var(--fm);font-size:.8rem;letter-spacing:.06em}
em{font-style:italic}
strong{font-weight:600}

/* --- layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--larg);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;background:var(--canvas);color:var(--text-primary);
  padding-block:clamp(64px,9vw,132px);isolation:isolate}
.sec + .sec{border-top:1px solid var(--linha-fina)}
.sec-cabeca{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(30px,4vw,52px);max-width:62ch}
.grade{display:grid;gap:clamp(20px,2.6vw,34px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pilha{display:flex;flex-direction:column;gap:clamp(14px,2vw,24px)}
.fileira{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline}

/* --- botoes -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--accent);color:var(--text-sobre-accent);
  font-family:var(--fm);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:15px 26px;border-radius:2px;text-shadow:none;
  transition:background var(--t-rapido) var(--e-suave),transform 260ms var(--e-saida)}
.btn:hover{background:var(--accent-hover);color:var(--text-sobre-accent);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-vazado{background:transparent;color:var(--accent);border:1px solid var(--accent-muted)}
.btn-vazado:hover{background:var(--accent-fraco);color:var(--accent-hover);border-color:var(--accent)}
.btn-texto{display:inline-flex;align-items:center;gap:9px;font-family:var(--fm);font-size:.76rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--linha-fina);padding-bottom:4px}
.btn-texto:hover{border-color:var(--accent)}
.btn-texto .seta{transition:transform var(--t-rapido) var(--e-saida)}
.btn-texto:hover .seta{transform:translateX(4px)}
@media (pointer:coarse){.btn{min-height:44px}}

/* --- cabecalho ----------------------------------------------------------- */
.topo{position:fixed;inset:0 0 auto 0;z-index:90;
  background:linear-gradient(180deg,rgba(0,13,6,.88) 0%,rgba(0,13,6,0) 100%);
  transition:background var(--t-medio) var(--e-suave),backdrop-filter var(--t-medio) var(--e-suave)}
.topo.solido{background:rgba(0,13,6,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--linha-fina)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:81px}
.marca{display:flex;align-items:center;gap:12px;flex-shrink:0}
.marca img{height:41px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,26px)}
.nav > li{list-style:none;position:relative}
.nav-item{display:inline-flex;align-items:center;gap:6px;font-family:var(--ft);font-size:.87rem;
  letter-spacing:.02em;color:var(--text-primary);padding:10px 2px;position:relative;background:none}
.nav-item::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:var(--accent);
  transition:right var(--t-medio) var(--e-saida)}
.nav-item:hover::after,.nav li[data-aberto="1"] .nav-item::after{right:0}
.nav-item .chev{width:9px;height:9px;transition:transform var(--t-rapido) var(--e-suave)}
.nav li[data-aberto="1"] .chev{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 10px);left:-18px;min-width:270px;
  background:#031A0E;border:1px solid var(--linha-fina);border-radius:3px;padding:10px;
  display:grid;gap:1px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t-rapido) var(--e-suave),transform var(--t-rapido) var(--e-saida),visibility var(--t-rapido);
  box-shadow:0 22px 60px rgba(0,8,4,.5)}
.nav li[data-aberto="1"] .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega a{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:2px;color:var(--text-primary);
  transition:background var(--t-rapido) var(--e-suave)}
.mega a:hover{background:var(--accent-fraco);color:var(--text-primary)}
.mega a .m-t{font-size:.92rem}
.mega a .m-s{font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-terciario)}
.hamb{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.hamb span{display:block;width:22px;height:1px;background:var(--text-primary);position:relative;transition:all var(--t-rapido) var(--e-suave)}
.hamb span::before,.hamb span::after{content:"";position:absolute;left:0;width:22px;height:1px;background:var(--text-primary);transition:all var(--t-rapido) var(--e-suave)}
.hamb span::before{top:-7px}.hamb span::after{top:7px}
body.menu-aberto .hamb span{background:transparent}
body.menu-aberto .hamb span::before{top:0;transform:rotate(45deg)}
body.menu-aberto .hamb span::after{top:0;transform:rotate(-45deg)}

/* --- barra de fatos ------------------------------------------------------ */
.fatos{position:relative;z-index:1;background:var(--panel);border-block:1px solid var(--linha-fina)}
.fatos-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.fato{padding:16px 22px;border-left:1px solid var(--linha-fina);display:flex;flex-direction:column;gap:5px}
.fato:first-child{border-left:0}
.fato dt{font-family:var(--fm);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-muted);margin:0}
.fato dd{margin:0;font-size:.9rem;line-height:1.35;color:var(--text-primary)}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;height:700vh}
.hero-palco{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas)}
.hero-palco .fundo,.hero-palco video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-palco .fundo{background-size:cover;background-position:center;opacity:1;transition:opacity 600ms var(--e-suave)}
.hero-palco video{opacity:0;transition:opacity 600ms var(--e-suave);will-change:transform;transform:translateZ(0)}
.hero-palco.video-pronto video{opacity:1}
.hero-palco.video-pronto .fundo{opacity:0}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 92% at 50% 46%,rgba(0,10,5,0) 34%,rgba(0,10,5,.66) 100%)}
.hero-faixas{position:absolute;inset:0;pointer-events:none}
.faixa{position:absolute;pointer-events:none;opacity:0;text-shadow:var(--tshadow);max-width:min(46ch,52vw)}
/* a faixa não recebe clique para não roubar a rolagem do hero, mas o que
   é clicável dentro dela precisa receber — sem isto o botão da última
   faixa era decoração: elementFromPoint devolvia "nada" nele. */
.faixa a,.faixa button,.faixa .btn{pointer-events:auto}
/* Aqui havia uma elipse escura atras de cada faixa, para garantir a leitura
   sobre o filme. Ela aparecia como uma nuvem preta no meio da imagem.
   Medi quadro a quadro antes de tirar: no trecho escuro do filme a tinta
   creme ja da 13,4:1 a 13,8:1 sem nenhum reforco, e no trecho claro quem
   resolve e o `hero-claro`, que troca a tinta para o verde da marca.
   A elipse so era necessaria numa janela estreita — e essa janela existia
   porque o `hero-claro` ligava tarde demais. Corrigido no engine.js: o
   filme cruza para claro em p=0.53, nao em 0.76. */
.faixa .btn{text-shadow:none}
.faixa-bl{left:var(--gut);bottom:16vh}
.faixa-b{left:var(--gut);bottom:14vh}
.faixa-tr{right:var(--gut);top:20vh;text-align:right;margin-left:auto}
/* a faixa final mora a direita, ao lado do simbolo que se desenha a esquerda */
.faixa-fim{right:calc(var(--gut) + 6vw);top:50%;transform:translateY(-50%);max-width:min(38ch,42vw)}
@media (max-width:900px){.faixa-fim{right:var(--gut);left:var(--gut);top:auto;bottom:12vh;transform:none;max-width:none}}
.faixa h1,.faixa h2{margin-bottom:14px}
.faixa .sub{font-family:var(--fm);font-size:.8rem;letter-spacing:.1em;color:var(--text-primary);opacity:.9;line-height:1.7}
.faixa .cta{margin-top:22px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.faixa .cta .obs{font-family:var(--fm);font-size:.68rem;letter-spacing:.08em;color:var(--text-secondary);text-transform:uppercase}

/* coreografia por palavra e caractere */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}
.ef-queda .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -22px))}
.ef-brasa .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:calc(.16 + .84*var(--kc));
  filter:brightness(calc(.55 + .45*var(--kc)))}
.ef-assento .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 12px))}
.ef-traco .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 10px))}
.faixa .sub,.faixa .cta{opacity:var(--ks,1);transform:translateY(calc((1 - var(--ks,1)) * 8px))}

/* anel de carregamento */
.anel{position:absolute;left:50%;bottom:5.5vh;transform:translateX(-50%);width:34px;height:34px;color:var(--accent);opacity:.75}
.anel circle{transition:stroke-dashoffset 140ms linear;transform:rotate(-90deg);transform-origin:50% 50%}
.cue{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:8px;font-family:var(--fm);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-secondary);opacity:.8}
.cue .haste{width:1px;height:32px;background:linear-gradient(180deg,var(--accent),transparent);animation:desce 2.6s var(--e-suave) infinite}
@keyframes desce{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
@media (max-height:560px){.cue,.anel{display:none}}

/* quando o filme inunda de creme, a pagina inteira vira tinta sobre papel */
body.hero-claro .faixa{color:var(--marca-verde);text-shadow:none}
body.hero-claro .faixa h1,body.hero-claro .faixa h2,body.hero-claro .faixa h3,
body.hero-claro .faixa h1 span,body.hero-claro .faixa h2 span,body.hero-claro .faixa p{color:var(--marca-verde)}
body.hero-claro .faixa .sub{color:#5C4E2E;opacity:1}
body.hero-claro .faixa .btn{background:var(--marca-verde);color:#FBF3E8}
body.hero-claro .faixa .cta .obs{color:#5C4E2E}
body.hero-claro .topo{background:linear-gradient(180deg,rgba(251,243,232,.88) 0%,rgba(251,243,232,0) 100%)}
body.hero-claro .topo .nav-item{color:var(--marca-verde)}
body.hero-claro .topo .mega .m-t{color:var(--text-primary)}
body.hero-claro .topo .mega .m-s{color:var(--text-terciario)}
body.hero-claro .hamb span,body.hero-claro .hamb span::before,body.hero-claro .hamb span::after{background:var(--marca-verde)}

body.hero-claro .cue{color:var(--marca-bronze)}

/* hero estatico */
.hero-estatico{display:none;position:relative;min-height:100svh;background:var(--canvas);overflow:hidden}
.hero-estatico .fundo{position:absolute;inset:0;background-size:cover;background-position:52% 60%}
.hero-estatico .scrim{background:linear-gradient(180deg,rgba(0,10,5,.62) 0%,rgba(0,10,5,.30) 42%,rgba(0,10,5,.92) 100%)}
.hero-estatico .conteudo{position:relative;padding:120px var(--gut) 64px;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:100svh;gap:16px;text-shadow:var(--tshadow)}
body.estatico .hero{display:none}
body.estatico .hero-estatico{display:block}

/* --- ambiente ------------------------------------------------------------ */
.ambiente{position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--canvas-fundo)}
.ambiente .brilho{position:absolute;inset:-20%;
  background:radial-gradient(ellipse 46% 40% at 28% 18%,rgba(184,154,98,.13),transparent 62%),
             radial-gradient(ellipse 40% 44% at 78% 74%,rgba(0,13,6,.42),transparent 66%);
  animation:deriva 78s ease-in-out infinite alternate;animation-delay:-24s}
@keyframes deriva{from{transform:translate3d(-1.5%,-1%,0) scale(1)}to{transform:translate3d(2%,2.5%,0) scale(1.06)}}
.ambiente .grao{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- movimento ----------------------------------------------------------- */
/* Sem JS o conteúdo NÃO se esconde. A classe js-liga é posta no <html>
   pelo próprio motor; se ele não rodar, tudo fica visível. Antes disto
   uma falha de JS deixava a página inteira em branco. */
.js-liga .rev{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-lento) var(--e-saida),transform var(--t-lento) var(--e-saida)}
.js-liga .rev.in{opacity:1;transform:none}
.js-liga .rev-f > *{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-lento) var(--e-saida),transform var(--t-lento) var(--e-saida)}
.js-liga .rev-f.in > *{opacity:1;transform:none}
.js-liga .rev-f.in > *:nth-child(1){transition-delay:0ms}
.js-liga .rev-f.in > *:nth-child(2){transition-delay:70ms}
.js-liga .rev-f.in > *:nth-child(3){transition-delay:140ms}
.js-liga .rev-f.in > *:nth-child(4){transition-delay:210ms}
.js-liga .rev-f.in > *:nth-child(5){transition-delay:280ms}
.js-liga .rev-f.in > *:nth-child(6){transition-delay:350ms}
.rev-f.pronto > *,.rev-f.pronto > *:nth-child(n){transition-delay:0ms}

/* risco separador que se traca */
.risco{width:100%;height:1px;border:0;margin:0;background:var(--linha-fina);position:relative;overflow:visible}
.risco::after{content:"";position:absolute;inset:0 100% 0 0;background:var(--linha);
  transition:right 1400ms var(--e-saida)}
.risco.in::after{right:0}

/* --- componentes --------------------------------------------------------- */
.cartao{background:var(--panel);border:1px solid var(--linha-fina);border-radius:3px;
  padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:12px;
  transform-origin:center;
  transition:border-color var(--t-medio) var(--e-suave),transform 240ms var(--e-saida)}
.cartao:hover{border-color:var(--accent-muted);transform:translateY(-2px)}
.cartao h3{margin:0}
.cartao p{color:var(--text-secondary);font-size:.95rem}

.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--linha-fina)}
.numeros > div{padding:26px 22px;border-left:1px solid var(--linha-fina);border-bottom:1px solid var(--linha-fina)}
/* Com 4 números a grade de 3 colunas deixa um sozinho na última linha.
   Duas colunas fecham 2 e 2; acima de 1080px os quatro cabem numa fileira.
   Cada largura declara os próprios fios do zero, em vez de ir empilhando
   exceção: foi assim que o quarto item ficou sem fio e o terceiro ganhou
   um que não devia. */
.numeros-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.numeros-4 > div{border-left:1px solid var(--linha-fina)}
.numeros-4 > div:nth-child(2n+1){border-left:0}          /* 1º de cada par */

@media (min-width:1080px){
  .numeros-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .numeros-4 > div:nth-child(2n+1){border-left:1px solid var(--linha-fina)}
  .numeros-4 > div:first-child{border-left:0}
  /* Um quarto da largura é metade do que a grade de 3 colunas oferece, e o
     tamanho de lá não cabe: "R$ 450 M" e "desde 1996" quebravam no meio.
     Menor aqui, e sem quebra — número partido em duas linhas não é número. */
  .numeros-4 .num{font-size:clamp(1.75rem,2.5vw,2.7rem);white-space:nowrap}
}
/* so na grade de 3: em .numeros-4 o 3n+1 pegaria os itens 1 e 4, e o
   quarto perdia o fio da esquerda — era o fio que faltava no print. */
.numeros:not(.numeros-4) > div:nth-child(3n+1){border-left:0}
.numeros .rot{display:block;margin-top:10px;font-family:var(--fm);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-terciario);line-height:1.5}

.lista-linhas{display:flex;flex-direction:column;border-top:1px solid var(--linha-fina)}
.lista-linhas > *{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:17px 0;border-bottom:1px solid var(--linha-fina);color:var(--text-primary);
  transition:padding-left var(--t-medio) var(--e-saida),color var(--t-rapido) var(--e-suave)}
.lista-linhas > a:hover{padding-left:10px;color:var(--accent-hover)}
.lista-linhas .esq{font-family:var(--fd);font-size:1.24rem;font-weight:500;letter-spacing:-.015em}
.lista-linhas .dir{font-family:var(--fm);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-muted);white-space:nowrap}

.tabela{width:100%;border-collapse:collapse;font-size:.94rem}
.tabela th,.tabela td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--linha-fina);vertical-align:top}
.tabela th{font-family:var(--fm);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-muted);font-weight:500;white-space:nowrap}
.tabela td .n{font-family:var(--fm);color:var(--text-secondary);white-space:nowrap}

.aviso{border-left:2px solid var(--accent);padding:14px 0 14px 20px;color:var(--text-secondary);font-size:.95rem}

/* --- rodape -------------------------------------------------------------- */
.rodape{background:var(--menu-fundo);color:var(--text-primary);padding-block:clamp(48px,6vw,84px) 32px;
  border-top:1px solid var(--linha-fina)}
.rodape a{color:var(--text-secondary)}
.rodape a:hover{color:var(--accent)}
.rodape-grade{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px)}
.rodape h4{font-family:var(--fm);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-muted);font-weight:500;margin:0 0 14px}
.rodape ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.92rem}
.rodape .fim{margin-top:clamp(36px,5vw,64px);padding-top:22px;border-top:1px solid var(--linha-fina);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  font-family:var(--fm);font-size:.68rem;letter-spacing:.06em;color:var(--text-terciario)}
.rodape-marca img{height:52px;width:auto;margin-bottom:16px}
.redes{display:flex;gap:10px;margin-top:16px}
.redes a{width:38px;height:38px;border:1px solid var(--linha-fina);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:border-color var(--t-rapido) var(--e-suave)}
.redes a:hover{border-color:var(--accent)}
.redes svg{width:16px;height:16px}

/* barra fixa de credenciamento no celular */
.cta-fixo{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(0,13,6,.94);backdrop-filter:blur(12px);border-top:1px solid var(--linha-fina)}
.cta-fixo .btn{width:100%}

/* --- interacoes ----------------------------------------------------------
   Cinco pecas que quebram a parede de texto. Todas degradam para conteudo
   legivel sem JS: o filtro so aparece se o JS montar, o acordeao e <details>,
   que abre no proprio navegador, e o indice e uma lista de links comum.
   ------------------------------------------------------------------------- */

/* o fundo segue o ponteiro. --mx/--my sao escritos pelo interacoes.js em % */
.sec{--mx:50%;--my:50%}
.sec::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;
  transition:opacity 520ms var(--e-suave);
  background:radial-gradient(560px circle at var(--mx) var(--my),rgba(184,154,98,.10),transparent 62%)}
.sec.perto::after{opacity:1}
.sec[data-campo="creme"]::after{
  background:radial-gradient(560px circle at var(--mx) var(--my),rgba(31,49,34,.07),transparent 62%)}
.sec > *{position:relative;z-index:1}

/* o cartao acende por dentro, no ponto onde o mouse esta */
.cartao{--mx:50%;--my:50%;position:relative;overflow:hidden}
.cartao::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity 380ms var(--e-suave);
  background:radial-gradient(240px circle at var(--mx) var(--my),rgba(184,154,98,.16),transparent 68%)}
.cartao:hover::before{opacity:1}
.cartao > *{position:relative}

/* a capa dentro do cartao: sangra ate a borda, porque o cartao ja tem
   o padding e uma imagem com margem parece descolada dele */
.cartao-capa{display:block;position:relative;overflow:hidden;border-radius:2px;
  margin:calc(-1 * clamp(20px,2.4vw,30px)) calc(-1 * clamp(20px,2.4vw,30px)) 4px;
  aspect-ratio:16/9;background:var(--panel-alto)}
.cartao-capa img{display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 760ms var(--e-suave),filter 420ms var(--e-suave)}
.cartao:hover .cartao-capa img{transform:scale(1.07);filter:saturate(1.05)}

/* --- filtro ao vivo --- */
.filtro{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px}
.filtro-busca{flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--linha-fina);border-radius:3px;padding:11px 14px;
  transition:border-color var(--t-medio) var(--e-suave)}
.filtro-busca:focus-within{border-color:var(--accent-muted)}
.filtro-busca svg{flex:none;width:14px;height:14px;color:var(--text-terciario)}
.filtro-busca input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text-primary);
  font-family:var(--fm);font-size:.82rem;letter-spacing:.02em}
.filtro-busca input::placeholder{color:var(--text-terciario)}
.chip{font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 15px;border-radius:999px;border:1px solid var(--linha-fina);background:none;
  color:var(--text-secondary);cursor:pointer;white-space:nowrap;
  transition:border-color var(--t-rapido) var(--e-suave),color var(--t-rapido) var(--e-suave),
             background-color var(--t-rapido) var(--e-suave)}
.chip:hover{border-color:var(--accent-muted);color:var(--text-primary)}
.chip[aria-pressed="true"]{background:var(--accent-muted);border-color:var(--accent-muted);color:#0A1F10}
.filtro-conta{width:100%;font-family:var(--fm);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-terciario)}
.tabela tr[hidden]{display:none}
.filtro-vazio{padding:26px 0;color:var(--text-secondary);font-size:.95rem}

/* --- acordeao --- */
.acordeao{border-top:1px solid var(--linha-fina)}
.acordeao details{border-bottom:1px solid var(--linha-fina)}
.acordeao summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:18px;
  padding:19px 0;font-family:var(--fd);font-weight:500;letter-spacing:-.012em;
  font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--text-primary);
  transition:color var(--t-rapido) var(--e-suave),padding-left var(--t-medio) var(--e-saida)}
.acordeao summary::-webkit-details-marker{display:none}
.acordeao summary:hover{color:var(--accent-hover);padding-left:8px}
.acordeao summary:focus-visible{outline:2px solid var(--accent-muted);outline-offset:3px}
.acordeao .mais{flex:none;width:13px;height:13px;margin-top:.42em;position:relative;color:var(--accent-muted)}
.acordeao .mais::before,.acordeao .mais::after{content:"";position:absolute;background:currentColor;
  transition:transform var(--t-medio) var(--e-suave),opacity var(--t-medio) var(--e-suave)}
.acordeao .mais::before{left:0;top:6px;width:13px;height:1px}
.acordeao .mais::after{left:6px;top:0;width:1px;height:13px}
.acordeao details[open] .mais::after{transform:rotate(90deg);opacity:0}
.acordeao .corpo{overflow:hidden}
.acordeao .corpo > div{padding:0 0 24px;color:var(--text-secondary);font-size:.96rem;line-height:1.75;max-width:72ch}
.acordeao .corpo > div > * + *{margin-top:12px}
.acordeao-topo{display:flex;justify-content:flex-end;margin-bottom:10px}

/* --- indice que acompanha a rolagem --- */
.com-indice{display:grid;grid-template-columns:minmax(0,1fr) 224px;gap:clamp(28px,4vw,64px);align-items:start}
.indice{position:sticky;top:112px;font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;
  border-left:1px solid var(--linha-fina);padding-left:18px;display:flex;flex-direction:column;gap:13px}
.indice a{position:relative;color:var(--text-terciario);text-transform:uppercase;line-height:1.5;
  transition:color var(--t-rapido) var(--e-suave)}
.indice a:hover{color:var(--text-secondary)}
.indice a[aria-current="true"]{color:var(--accent-muted)}
.indice a[aria-current="true"]::before{content:"";position:absolute;left:-19px;width:1px;height:1.2em;
  background:var(--accent-muted)}
@media (max-width:900px){.com-indice{grid-template-columns:minmax(0,1fr)}.indice{display:none}}

/* --- figura: o transform da imagem pertence a paralaxe, entao o hover
       responde com brilho e borda, que nao brigam com ele --- */
figure.fig{margin:0;display:flex;flex-direction:column;gap:11px}
figure.fig .moldura{position:relative;overflow:hidden;border-radius:3px;background:var(--panel);
  border:1px solid var(--linha-fina);transition:border-color var(--t-medio) var(--e-suave)}
figure.fig img{display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.16);transition:filter 700ms var(--e-suave)}
figure.fig .moldura::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(251,243,232,.09),transparent 60%);
  opacity:0;transition:opacity 420ms var(--e-suave)}
figure.fig .moldura:hover{border-color:var(--accent-muted)}
figure.fig .moldura:hover::after{opacity:1}
figure.fig .moldura:hover img{filter:saturate(1.06) brightness(1.03)}
figure.fig figcaption{font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-terciario);line-height:1.6}
figure.fig .ref{color:var(--linha);letter-spacing:.14em}
.fig-larga .moldura{aspect-ratio:16/7}
/* Um retrato 4:5 na largura cheia do container vira uma imagem de 1200 por
   1500: ocupa duas telas de altura e empurra o conteudo para baixo. A moldura
   ganha a proporcao, e a figura ganha um teto de largura. */
figure.fig-alta{max-width:420px}
.fig-alta .moldura{aspect-ratio:4/5}
.fig-quadro .moldura{aspect-ratio:1/1}
/* faixa: para foto solta que so precisa dar o tom sem comer meia tela */
.fig-faixa .moldura{aspect-ratio:3/1}
.grade-fig{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* --- imagem presa que troca na rolagem ----------------------------------
   Sem JS: as tres figuras ficam empilhadas na vertical, como qualquer
   pagina. Quando o JS monta, ele poe a classe .montado e so ai a pilha
   passa a sobrepor as figuras e a coluna gruda. Movimento reduzido nao
   monta: fica a versao empilhada, que ja e legivel e completa.
   ------------------------------------------------------------------------- */
.troca{display:grid;gap:clamp(24px,3.5vw,56px);grid-template-columns:minmax(0,1fr)}
.troca-passos{display:flex;flex-direction:column;gap:clamp(30px,5vw,60px)}
.troca-passo{max-width:56ch}
.troca-pilha{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px);min-width:0}

/* --- montado: duas colunas, a direita presa --- */
@media (min-width:901px){
  .troca.montado{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
    align-items:start;gap:clamp(34px,4.5vw,72px)}
  .troca.montado .troca-passos{gap:0}
  .troca.montado .troca-passo{min-height:78vh;display:flex;flex-direction:column;
    justify-content:center;padding:6vh 0}
  .troca.montado .troca-pilha{position:sticky;top:15vh;height:70vh;display:block}
  .troca.montado .troca-fig{position:absolute;inset:0;margin:0;display:flex;
    flex-direction:column;gap:11px;opacity:0;pointer-events:none;
    transition:opacity 620ms var(--e-suave),transform 900ms var(--e-suave);
    transform:scale(1.015)}
  .troca.montado .troca-fig.ativa{opacity:1;pointer-events:auto;transform:none}
  .troca.montado .troca-fig .moldura{flex:1;min-height:0}
  .troca.montado .troca-fig img{height:100%}
}

.troca-fig{margin:0;display:flex;flex-direction:column;gap:11px}
.troca-fig .moldura{position:relative;overflow:hidden;border-radius:3px;
  background:var(--panel);border:1px solid var(--linha-fina);aspect-ratio:4/3}
.troca-fig img{display:block;width:100%;height:100%;object-fit:cover}
.troca-fig figcaption{font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-terciario);line-height:1.6}
.troca-fig .ref{color:var(--linha);letter-spacing:.14em}

/* o fio que mostra em qual dos tres tempos o leitor esta */
.troca-marca{display:none}
@media (min-width:901px){
  .troca.montado .troca-marca{display:flex;gap:6px;position:absolute;left:0;bottom:-26px}
  .troca.montado .troca-marca span{width:26px;height:2px;background:var(--linha-fina);
    transition:background var(--t-medio) var(--e-suave)}
  .troca.montado .troca-marca span.ativa{background:var(--accent-muted)}
}

/* botão de rede social: o ícone entra antes do texto, no mesmo peso
   do botão comum — dois botões iguais em vez de um botão e um link */
.btn-rede{gap:11px}
.btn-rede svg{flex:none;width:17px;height:17px}

/* --- carrossel de video -------------------------------------------------
   Fachada: a pagina carrega so a capa em webp (16 a 33 KB). O iframe do
   YouTube nasce no clique, no dominio sem cookie. Assim a home nao paga
   meio megabyte de player que quase ninguem aciona, e ninguem e rastreado
   por abrir a pagina. A trilha rola de verdade (scroll-snap), entao funciona
   com dedo, com roda, com Tab e sem JS nenhum.
   ------------------------------------------------------------------------- */
.v-bloco{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
  gap:clamp(28px,4vw,60px);align-items:center}
.v-texto .v-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:26px}

.v-carrossel{position:relative;min-width:0}
.v-trilha{display:flex;gap:clamp(12px,1.6vw,20px);margin:0;padding:4px;list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.v-trilha::-webkit-scrollbar{display:none}
.v-trilha:focus-visible{outline:2px solid var(--accent-muted);outline-offset:4px;border-radius:4px}
.v-item{flex:0 0 clamp(230px,46%,330px);scroll-snap-align:start}

.v-cartao{display:flex;flex-direction:column;gap:11px;width:100%;padding:0;text-align:left;
  background:none;border:0;cursor:pointer;color:inherit;font:inherit}
.v-capa{position:relative;display:block;overflow:hidden;border-radius:4px;
  border:1px solid var(--linha-fina);background:var(--panel);aspect-ratio:9/16;
  transition:border-color var(--t-medio) var(--e-suave)}
.v-capa img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 760ms var(--e-suave),filter 460ms var(--e-suave)}
.v-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;background:rgba(0,13,6,.58);
  backdrop-filter:blur(3px);border:1px solid rgba(251,243,232,.42);
  transition:background var(--t-medio) var(--e-suave),transform var(--t-medio) var(--e-saida)}
.v-play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #FBF3E8}
.v-cartao:hover .v-capa,.v-cartao:focus-visible .v-capa{border-color:var(--accent-muted)}
.v-cartao:hover .v-capa img{transform:scale(1.05)}
.v-cartao:hover .v-play{background:var(--accent);transform:translate(-50%,-50%) scale(1.08)}
.v-cartao:hover .v-play::after{border-left-color:#0A1F10}
.v-cartao:focus-visible{outline:2px solid var(--accent-muted);outline-offset:4px;border-radius:4px}
.v-nome{font-family:var(--fd);font-weight:500;letter-spacing:-.012em;font-size:1rem;
  line-height:1.28;color:var(--text-primary)}
.v-desc{font-family:var(--fm);font-size:.68rem;letter-spacing:.05em;line-height:1.6;
  color:var(--text-terciario)}

/* o player entra no lugar da capa, no clique */
.v-capa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:4px}
.v-item.tocando .v-cartao{cursor:default}
.v-item.tocando .v-nome{color:var(--accent-muted)}

.v-seta{position:absolute;top:calc((100% - 4.4rem) / 2);transform:translateY(-50%);
  width:42px;height:42px;display:none;align-items:center;justify-content:center;
  background:var(--canvas);border:1px solid var(--linha-fina);border-radius:50%;
  color:var(--text-secondary);cursor:pointer;z-index:2;
  transition:border-color var(--t-rapido) var(--e-suave),color var(--t-rapido) var(--e-suave),
             opacity var(--t-rapido) var(--e-suave)}
.v-seta svg{width:11px;height:18px}
.v-seta:hover{border-color:var(--accent-muted);color:var(--text-primary)}
.v-seta:focus-visible{outline:2px solid var(--accent-muted);outline-offset:2px}
.v-seta[disabled]{opacity:.28;cursor:default}
.v-ant{left:-21px} .v-prox{right:-21px}
[data-campo="creme"] .v-seta{background:var(--kit-creme,#FBF3E8)}
.v-carrossel.com-setas .v-seta{display:flex}

.v-pontos{display:flex;justify-content:center;gap:7px;margin-top:20px}
.v-pontos button{width:22px;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:var(--linha-fina);transition:background var(--t-rapido) var(--e-suave)}
.v-pontos button[aria-selected="true"]{background:var(--accent-muted)}
.v-pontos button:focus-visible{outline:2px solid var(--accent-muted);outline-offset:3px}

@media (max-width:900px){
  .v-bloco{grid-template-columns:minmax(0,1fr);gap:30px}
  .v-item{flex:0 0 min(64%,280px)}
  .v-ant,.v-prox{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .v-trilha{scroll-behavior:auto}
  .v-cartao:hover .v-capa img{transform:none}
}

/* fio de progresso da leitura, colado no alto */
.progresso{position:fixed;top:0;left:0;right:0;height:2px;z-index:95;
  background:var(--accent-muted);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none}
body.hero-claro .progresso{background:var(--marca-bronze)}

.fim-dir{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.fim-dir .credito{color:var(--text-terciario);transition:color var(--t-rapido) var(--e-suave)}
.fim-dir .credito:hover{color:var(--accent-muted)}
@media (max-width:640px){.fim-dir{justify-content:flex-start}}

/* --- responsivo ---------------------------------------------------------- */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rodape-grade{grid-template-columns:1fr 1fr}
  .fatos-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fato:nth-child(3){border-left:0}
  .fato{border-top:1px solid var(--linha-fina)}
  .fato:nth-child(-n+2){border-top:0}
}
@media (max-width:860px){
  body{font-size:16px}
  .hamb{display:flex}
  .nav{position:fixed;inset:81px 0 0 0;background:var(--canvas);flex-direction:column;align-items:stretch;
    gap:0;padding:14px var(--gut) 40px;overflow-y:auto;transform:translateX(100%);
    transition:transform var(--t-medio) var(--e-saida);margin:0;list-style:none}
  body.menu-aberto .nav{transform:none}
  body.menu-aberto{overflow:hidden}
  .nav > li{border-bottom:1px solid var(--linha-fina)}
  .nav-item{width:100%;justify-content:space-between;padding:18px 0;font-size:1.05rem}
  .nav-item::after{display:none}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;
    padding:0 0 14px;display:none}
  .nav li[data-aberto="1"] .mega{display:grid}
  .g2,.g3,.numeros{grid-template-columns:1fr}
  .numeros > div{border-left:0}
  .rodape-grade{grid-template-columns:1fr}
  .cta-fixo{display:block}
  body{padding-bottom:70px}
}
@media (max-width:520px){
  .fatos-in{grid-template-columns:1fr}
  .fato{border-left:0;border-top:1px solid var(--linha-fina)}
  .fato:first-child{border-top:0}
}

/* --- movimento reduzido -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important}
  .rev,.rev-f > *{opacity:1!important;transform:none!important}
  .risco::after{right:0!important}
  .faixa{opacity:1!important}
  .w,.c{opacity:1!important;transform:none!important}
}
body.pausado *,body.pausado *::before,body.pausado *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  figure.fig img{transform:none!important}
  .cartao{transform:none!important}
  .progresso{display:none}
}

/* --- aviso de cookies -----------------------------------------------------
   O banner vem do plugin valente-core, que fala as classes e os tokens do
   blueprint (.vl-btn, --vl-*). Este tema não tem nenhum dos dois, então o
   plugin caía nos valores de reserva: caixa branca e link vinho. Aqui ele
   ganha a língua da FEMUR. O plugin fica intacto — a frota não muda.
   ------------------------------------------------------------------------- */
.vl-consent{left:var(--gut);right:var(--gut);bottom:clamp(16px,3vh,28px)}
.vl-consent-caixa{
  max-width:600px;
  background:var(--kit-creme);
  color:var(--marca-verde);
  border:1px solid rgba(7,36,11,.14);
  border-radius:4px;
  box-shadow:0 20px 60px rgba(7,13,15,.45);
  padding:clamp(22px,3vw,30px);
  font-family:var(--ft);font-size:.94rem;line-height:1.6}
.vl-consent-titulo{
  font-family:var(--fd);font-weight:600;letter-spacing:-.015em;
  font-size:1.16rem;color:var(--marca-verde);margin:0 0 10px}
.vl-consent-txt{margin:0 0 18px;color:#3A4A36}          /* 7,3:1 sobre o creme */
.vl-consent-txt a{color:var(--marca-bronze);text-decoration-thickness:1px;text-underline-offset:3px}
.vl-consent-txt a:hover{color:var(--marca-verde)}

/* os botões: o plugin escreve .vl-btn, que aqui não existia */
.vl-consent-acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.vl-consent-caixa .vl-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--fm);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  padding:13px 22px;border-radius:2px;border:1px solid var(--marca-verde);
  background:var(--marca-verde);color:var(--kit-creme);cursor:pointer;
  transition:background var(--t-rapido) var(--e-suave),color var(--t-rapido) var(--e-suave)}
.vl-consent-caixa .vl-btn:hover{background:#0E3A15;color:var(--kit-creme);text-decoration:none}
/* o segundo é vazado: aceitar e rejeitar não devem ter o mesmo peso visual,
   mas os dois precisam ser botões de verdade */
.vl-consent-caixa .vl-btn + .vl-btn,
.vl-consent-caixa .vl-btn-secundario{background:transparent;color:var(--marca-verde)}
.vl-consent-caixa .vl-btn + .vl-btn:hover{background:var(--marca-verde);color:var(--kit-creme)}
.vl-consent-link{
  background:none;border:0;padding:13px 4px;cursor:pointer;
  font-family:var(--fm);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  color:var(--marca-bronze);text-decoration:underline;text-underline-offset:4px}
.vl-consent-link:hover{color:var(--marca-verde)}

/* o painel de categorias */
.vl-consent-cat{
  display:flex;gap:14px;align-items:flex-start;padding:15px 0;
  border-top:1px solid rgba(7,36,11,.16);cursor:pointer}
.vl-consent-cat strong{font-family:var(--fd);font-weight:600;color:var(--marca-verde)}
.vl-consent-cat input{margin:3px 0 0;width:17px;height:17px;flex:0 0 17px;accent-color:var(--marca-verde)}
.vl-consent-cat small,.vl-consent-cat em{
  display:block;margin-top:4px;font-size:.85rem;line-height:1.55;
  color:#5C5A3B;font-style:normal}                       /* 5,4:1 sobre o creme */
.vl-consent-nota{margin:14px 0 18px;font-size:.85rem;line-height:1.6;color:#5C5A3B}

/* o botão flutuante que reabre o aviso */
.vl-consent-flutuante{
  left:var(--gut);bottom:clamp(16px,3vh,28px);width:42px;height:42px;
  background:var(--panel);border:1px solid var(--linha-fina);color:var(--accent-muted);
  box-shadow:0 8px 26px rgba(7,13,15,.4)}
.vl-consent-flutuante:hover{color:var(--text-primary);border-color:var(--accent-muted)}

@media (max-width:600px){
  .vl-consent-caixa .vl-btn{flex:1 1 100%}
  .vl-consent-link{width:100%;text-align:center}
}

/* --- degrau de fundo entre seções do mesmo campo ------------------------
   Duas seções do mesmo campo encostadas leem como um bloco só: a fronteira
   desaparece. Trocar o campo de uma delas não resolve aqui — na home os
   pares ficam entre vizinhos do campo oposto, então qualquer troca simples
   cria uma colisão nova. A saída é um terceiro tom.

   No campo escuro o degrau vai para BAIXO, não para cima. Clarear era o
   caminho óbvio e reprovou na medição: com --panel-alto o texto secundário
   caía para 4,40:1 e o acento para 3,01:1. Descendo para o quase preto do
   arquivo da marca, o degrau fica em 1,51:1 (o mais forte dos candidatos) e
   TODA tinta melhora — o acento sai de 4,89 para 7,40:1.

   No campo creme sobra pouco espaço tonal: o melhor degrau dá 1,18:1, que
   quase não se vê. Então ali entra também um fio no alto — o site já usa
   fio como recurso de separação.
   ------------------------------------------------------------------------- */
.sec-degrau{background:var(--marca-preto)}
[data-campo="creme"].sec-degrau{background:var(--panel-alto);
  border-top:1px solid var(--linha-fina)}

/* --- parede de logos dos expositores ------------------------------------
   Parede de logo de feira funciona por repetição: mesma altura de célula,
   mesma linha de base, marca no mesmo lugar em todas. Aqui as marcas são
   compostas em tipo, não em imagem — quando as logos reais chegarem, cada
   célula recebe um <img> no lugar do <svg> + texto, sem mexer na grade.
   Rebaixadas em opacidade para a parede não competir com o título; ao
   passar o mouse a marca sobe para o tom cheio.
   ------------------------------------------------------------------------- */
.logo-parede{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  background:var(--linha-fina);border:1px solid var(--linha-fina)}
.lw-item{
  background:var(--canvas);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:clamp(26px,3vw,38px) 18px;min-height:132px;
  color:var(--text-primary);opacity:.62;
  transition:opacity var(--t-medio) var(--e-suave),background-color var(--t-medio) var(--e-suave)}
.lw-item:hover{opacity:1;background:var(--panel)}
.lw-marca{width:26px;height:26px;flex:none;color:var(--accent-muted)}
.lw-nome{
  font-family:var(--fd);font-weight:600;letter-spacing:-.015em;
  font-size:1.06rem;line-height:1.1;text-align:center}
.lw-ramo{
  font-family:var(--fm);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-terciario);text-align:center}
.lw-nota{
  margin-top:clamp(18px,2.2vw,26px);font-family:var(--fm);font-size:.7rem;
  line-height:1.7;letter-spacing:.02em;color:var(--text-terciario);max-width:72ch}
.lw-nota .ref{color:var(--linha);letter-spacing:.14em;text-transform:uppercase}

/* quando as logos reais chegarem: <img> no lugar do svg + texto */
.lw-item img{max-width:100%;max-height:46px;width:auto;height:auto;
  filter:grayscale(1);opacity:.9}
.lw-item:hover img{filter:none;opacity:1}

@media (max-width:520px){
  .logo-parede{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lw-item{min-height:112px;padding:22px 12px}
}

/* --- carrossel ----------------------------------------------------------
   Sem JS ele já é uma peça inteira: uma trilha que rola de lado com encaixe,
   que se arrasta no celular e no trackpad e para cada quadro no lugar. O JS
   só acrescenta botões, pontos e teclado. Foi a mesma regra do filtro e do
   acordeão — se o script cair, a página não perde conteúdo.
   As legendas moram DENTRO de cada quadro, e não numa <figcaption> única
   trocada por JS: assim cada imagem carrega a própria descrição mesmo com o
   script fora do ar. */
.carrossel{margin:0}
.car-palco{position:relative;border-radius:3px;overflow:hidden;background:var(--panel)}
.car-trilho{list-style:none;margin:0;padding:0;display:flex;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.car-trilho::-webkit-scrollbar{display:none}
.car-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start}
/* sem `scroll-snap-stop:always`: ele cancelava o scrollTo do botao no meio
   do caminho e o quadro voltava para o lugar — o carrossel parecia morto.
   E o encaixe e `start`, nao `center`: com quadro de 100% o ponto de
   encaixe passa a ser exatamente o offsetLeft do quadro, que e o mesmo
   numero que o JS usa para navegar. */
.car-slide img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

.car-barra{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.car-legenda{flex:1 1 14ch;min-width:0;font-family:var(--fm);font-size:.78rem;
  letter-spacing:.02em;color:var(--text-terciario);margin:0}
.car-pontos{display:flex;gap:7px;margin-left:auto}
.car-ponto{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--linha-fina);transition:background .2s ease,transform .2s ease}
.car-ponto[aria-current="true"]{background:var(--accent);transform:scale(1.35)}
.car-setas{display:flex;gap:8px}
.car-seta{width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--linha-fina);border-radius:50%;background:transparent;
  color:var(--text-secondary);transition:background .2s ease,color .2s ease,border-color .2s ease}
.car-seta:hover:not(:disabled){background:var(--panel);color:var(--text-primary);border-color:var(--accent)}
.car-seta:disabled{opacity:.3;cursor:default}
/* sem JS não existem setas nem pontos: o JS é quem os injeta */
.car-barra .car-setas:empty,.car-barra .car-pontos:empty{display:none}

@media (prefers-reduced-motion:reduce){
  .car-trilho{scroll-behavior:auto}
  .car-ponto{transition:none}
}

/* Vaga de logo: a moldura tracejada diz "a logo entra aqui" sem fingir uma
   marca que eu nao tenho. Estas empresas sao reais — desenhar um simbolo
   generico no lugar delas seria inventar identidade de terceiro. Quando o
   arquivo chegar, troca-se a vaga por <img> e o CSS de .lw-item img ja
   cuida do resto. */
.lw-vaga{
  width:100%;max-width:118px;height:42px;flex:none;
  border:1px dashed var(--linha-fina);border-radius:2px;
  display:grid;place-items:center;
  font-family:var(--fm);font-size:.54rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-terciario)}
.lw-item:hover .lw-vaga{border-color:var(--accent-muted)}

/* --- grade de marcas ----------------------------------------------------
   A lista de quem expoe: cento e tantos nomes. Celula menor que a da parede
   de logos porque aqui o conteudo e so nome e segmento — a parede de logos
   precisa de area para a arte da marca, esta nao.
   Mesma linguagem de hover das outras grades: a celula nasce rebaixada e
   sobe ao tom cheio quando o mouse chega. */
.marcas-grade{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  background:var(--linha-fina);border:1px solid var(--linha-fina)}
.mg-item{
  background:var(--canvas);padding:16px 14px;min-height:74px;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  color:var(--text-primary);opacity:.7;
  transition:opacity var(--t-medio) var(--e-suave),background-color var(--t-medio) var(--e-suave)}
.mg-item:hover{opacity:1;background:var(--panel)}
.mg-nome{font-family:var(--fd);font-weight:600;letter-spacing:-.012em;
  font-size:.98rem;line-height:1.15}
.mg-seg{font-family:var(--fm);font-size:.58rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-terciario)}
@media (max-width:520px){
  .marcas-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg-item{min-height:64px;padding:13px 11px}
}

/* A celula da parede de logos vira link quando o expositor informa o site.
   O <a> ocupa a celula inteira para o alvo de toque ser a celula, nao a
   logo — logo de marca vem em tamanhos imprevisiveis. */
.lw-link{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;width:100%;height:100%;color:inherit;text-decoration:none}
.lw-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}