/* Projeto Golgota | site institucional
   Paleta da identidade: #b22314 (vermelho), #000000 (preto), #565656 (cinza).
   Titulos e botoes: Archivo (Google Fonts). Corpo: Barlow (Google Fonts).
   Tusker Grotesk (arquivo do cliente) so nos numeros de destaque. */

@font-face{
  font-family:"Tusker Grotesk";
  src:url("../fonts/TuskerGrotesk-4800Super.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
}

:root{
  --red:#b22314;
  --red-deep:#8c1a0e;
  --red-text:#e5432f;          /* tom do vermelho da marca para texto pequeno (contraste 4,8:1 no preto) */
  --gray:#565656;
  --bg:#000;
  --bg-2:#080808;
  --bg-3:#0f0f0f;
  --line:#262626;
  --line-2:#363636;
  --text:#fff;
  --muted:#adadad;
  --f-title:"Archivo","Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-num:"Tusker Grotesk","Archivo","Impact",sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* escala de titulos: celular -> desktop */
  --fs-h1:clamp(1.75rem,1.4rem + 1.1vw,2.125rem);   /* 28px -> 34px */
  --fs-h2:clamp(1.625rem,1.35rem + .85vw,2rem);     /* 26px -> 32px */
  --fs-h3:clamp(1.25rem,1.15rem + .35vw,1.5rem);    /* 20px -> 24px */
  --ease:cubic-bezier(.22,1,.36,1);
  --gap:clamp(64px,8vw,120px);
  --gut:clamp(20px,5vw,48px);
  --max:1240px;
  --hdr:92px;
  --hdr-top:var(--hdr);
}
@media (max-width:1039px){:root{--hdr:76px}}
.hdr-off{--hdr-top:0px}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px);-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font:400 1.0625rem/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--red);color:#fff}

/* ---------- barra de rolagem personalizada ---------- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#050505}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--red),var(--red-deep));border:3px solid #050505;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--red-text);border-width:2px}
::-webkit-scrollbar-corner{background:#050505}
@supports (-moz-appearance:none){html{scrollbar-color:var(--red) #050505;scrollbar-width:thin}}

:focus-visible{outline:2px solid #fff;outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.wrap{width:100%;max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.section{position:relative;padding:var(--gap) 0;overflow:clip}
.section--alt{background:rgba(255,255,255,.018)}

/* fundo animado em WebGL (assets/js/shader-bg.js): fixo atras de tudo, bem sutil */
.shader-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.32}
/* a abertura da Inicio, da Sobre e do Como funciona cobre o fundo animado (preto chapado que se desfaz na base) */
.hx,.about-hero,.cfx{background:linear-gradient(to bottom,var(--bg) calc(100% - 200px),rgba(0,0,0,0))}
.section>.wrap{position:relative;z-index:1}

/* ---------- elementos de fundo ---------- */
.fx{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fx-bolt{
  position:absolute;width:var(--s,60px);color:var(--red);opacity:var(--o,.18);pointer-events:none;z-index:0;
  transform:translate3d(0,var(--py,0px),0) rotate(var(--r,0deg));
}

/* ---------- tipografia ---------- */
.h-display{
  font-family:var(--f-title);font-weight:800;
  line-height:1.15;letter-spacing:-.015em;text-wrap:balance;
}
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3);line-height:1.2}
.lead{font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}

.tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--red);color:#fff;
  font:700 .75rem/1.2 var(--f-title);
  letter-spacing:.08em;text-transform:uppercase;
  padding:7px 11px;border-radius:4px;max-width:100%;
}
.sec-head{position:relative;z-index:1;display:grid;gap:16px;max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head--c{text-align:center;justify-items:center;margin-inline:auto}
.sec-head--c .lead{margin-inline:auto}

.todo{
  display:inline;font-style:normal;
  background:rgba(255,255,255,.08);outline:1px dashed #8a8a8a;outline-offset:1px;
  padding:0 .3em;border-radius:3px;
}
.on-red .todo{outline-color:#fff;background:rgba(0,0,0,.28)}

/* ---------- botao: placa vermelha com cantoneiras de mira, linhas de varredura e brilho que atravessa no hover ----------
   --b-bg: fundo | --b-frame: cor das cantoneiras | --b-ink: texto
   ::after = 4 cantoneiras (abrem no hover) | ::before = faixa de brilho | .btn__label::before = linhas de varredura */
.btn{
  --b-h:56px;--b-px:30px;--b-r:8px;
  --b-bg:var(--red);--b-bg-h:#c42816;--b-frame:rgba(255,255,255,.55);--b-ink:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:var(--b-h);max-width:100%;padding:0 var(--b-px);
  border-radius:var(--b-r);background:var(--b-bg);color:var(--b-ink);text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08);
  font:700 .875rem/1 var(--f-title);letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .35s var(--ease),transform .3s;
  isolation:isolate;
}
.btn::after{
  --k:12px;--t:2px;
  content:"";position:absolute;inset:-7px;pointer-events:none;opacity:.7;
  background:
    linear-gradient(var(--b-frame),var(--b-frame)) left top/var(--k) var(--t),
    linear-gradient(var(--b-frame),var(--b-frame)) left top/var(--t) var(--k),
    linear-gradient(var(--b-frame),var(--b-frame)) right top/var(--k) var(--t),
    linear-gradient(var(--b-frame),var(--b-frame)) right top/var(--t) var(--k),
    linear-gradient(var(--b-frame),var(--b-frame)) left bottom/var(--k) var(--t),
    linear-gradient(var(--b-frame),var(--b-frame)) left bottom/var(--t) var(--k),
    linear-gradient(var(--b-frame),var(--b-frame)) right bottom/var(--k) var(--t),
    linear-gradient(var(--b-frame),var(--b-frame)) right bottom/var(--t) var(--k);
  background-repeat:no-repeat;
  transition:inset .45s var(--ease),opacity .3s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.3) 50%,transparent 62%) 160% 0/260% 100% no-repeat;
  transition:background-position 0s;
}
.btn__label{white-space:nowrap}
.btn__label::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--b-r);pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px);
  -webkit-mask-image:radial-gradient(ellipse at center,transparent 40%,#000 100%);mask-image:radial-gradient(ellipse at center,transparent 40%,#000 100%);
}
.btn__ico{display:grid;place-items:center;flex:none;width:16px;height:16px}
.btn__ico svg{width:100%;height:100%;transition:transform .4s var(--ease)}
.btn:hover,.btn:focus-visible{background-color:var(--b-bg-h)}
.btn:hover::after,.btn:focus-visible::after{inset:-11px;opacity:1}
.btn:hover::before,.btn:focus-visible::before{background-position:-60% 0;transition:background-position .9s var(--ease)}
.btn:hover .btn__ico svg,.btn:focus-visible .btn__ico svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn--sm{--b-h:46px;--b-px:22px;font-size:.75rem}
.btn--sm::after{--k:9px}
.btn--lg{--b-h:64px;--b-px:40px;font-size:.9375rem}
.btn--lg::after{--k:15px}
/* sobre o fundo vermelho da garantia: placa preta */
.btn--dark{--b-bg:#000;--b-bg-h:#141414;--b-frame:rgba(0,0,0,.6)}
.btn--block{width:100%}
.btn--off{--b-bg:#141414;--b-bg-h:#141414;--b-frame:rgba(255,255,255,.18);--b-ink:var(--muted);cursor:default}
.btn--off::before{display:none}
.btn[disabled],.btn.is-loading{opacity:.65;pointer-events:none}
.btn.is-loading .btn__ico svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:420px){
  .btn{--b-px:20px;font-size:.8125rem;letter-spacing:.1em}
  .btn--sm{font-size:.75rem}
  .btn--lg{--b-h:60px;--b-px:22px;font-size:.875rem}
  /* rotulo longo quebra em duas linhas em vez de vazar da tela */
  .btn{height:auto;min-height:var(--b-h);padding-block:12px}
  .btn__label{white-space:normal;line-height:1.3;text-align:center}
}
@media (max-width:360px){
  .btn{--b-px:16px;letter-spacing:.06em}
}

/* ---------- header (acompanha a rolagem, com blur; altura fixa para nao tremer) ---------- */
/* o fundo do header ja aparece desde o topo da pagina, sem esperar a rolagem.
   Rolando para baixo ele sobe e se desfaz em desfoque (html.hdr-off, header() no main.js); rolando para cima volta. */
.hdr{
  position:sticky;top:0;z-index:40;height:var(--hdr);
  background:rgba(0,0,0,.62);border-bottom:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  transition:transform .55s var(--ease),opacity .45s ease,filter .5s ease;
}
.hdr-off .hdr{transform:translateY(-105%);opacity:0;filter:blur(10px);pointer-events:none}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hdr{background:rgba(0,0,0,.94)}
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:28px;height:100%}
.hdr__logo{display:block;flex:none}
.hdr__logo img{height:62px;width:auto}
.nav{display:none;align-items:center;gap:clamp(20px,2.2vw,32px)}
.nav a{
  position:relative;text-decoration:none;
  font:600 .8125rem/1 var(--f-title);letter-spacing:.07em;text-transform:uppercase;
  padding:14px 0;color:#cfcfcf;transition:color .3s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:5px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr__cta{display:none}
.burger{
  width:46px;height:46px;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-content:center;gap:5px;flex:none;background:rgba(0,0,0,.4);
}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .4s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:1040px){
  .nav,.hdr__cta{display:flex}
  .burger{display:none}
}
@media (max-width:1039px){.hdr__logo img{height:52px}}

.menu{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  display:flex;flex-direction:column;padding:0 var(--gut) 32px;
  visibility:hidden;opacity:0;transform:translateY(-12px);
  transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s .5s;
  overflow-y:auto;
}
.menu.is-open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.menu__top{display:flex;align-items:center;justify-content:space-between;min-height:var(--hdr);border-bottom:1px solid var(--line)}
.menu__top img{height:52px;width:auto}
.menu__close{width:46px;height:46px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center}
.menu__close svg{width:20px;height:20px}
.menu__nav{display:grid;margin:24px 0}
.menu__nav a{
  font:800 clamp(1.5rem,6vw,2rem)/1.1 var(--f-title);text-decoration:none;
  padding:16px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease),color .3s;
}
.menu__nav a[aria-current="page"]{color:var(--red-text)}
.menu.is-open .menu__nav a{opacity:1;transform:none;transition-delay:calc(.05s * var(--i,0) + .12s)}
.menu .btn{margin-top:auto;align-self:flex-start}
body.menu-open{overflow:hidden}

/* ---------- elementos de marca ---------- */
.bolt{color:var(--red);fill:currentColor}
.num{
  font:800 clamp(3rem,5.5vw,4.4rem)/1 var(--f-num);color:#2e2e2e;
  transition:color .4s;
}

/* ---------- hero da inicio: so texto e botao, centralizados ---------- */
/* abertura em tunel (tunnel.js): a secao tem a altura da tela + um trecho de rolagem; o palco fica preso no topo
   enquanto os cards atravessam o tunel. overflow:clip (e nao hidden) para nao quebrar o sticky. */
.hx{position:relative;overflow:clip;height:calc(100svh - var(--hdr) + 90vh)}
.hx__stage{
  position:sticky;top:var(--hdr-top);height:calc(100svh - var(--hdr-top));overflow:hidden;
  display:grid;align-items:center;padding:clamp(24px,4vw,56px) 0;transition:top .55s var(--ease),height .55s var(--ease);
}
.tun{position:absolute;inset:0;z-index:3;display:grid;place-items:center;perspective:1200px;transform-style:preserve-3d;pointer-events:none}
.hx .dotfield{opacity:.22;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.tun__ring{position:absolute;width:48vmin;height:48vmin;border-radius:50%;border:1px solid rgba(178,35,20,.22)}
.tun__ring--dash{width:76vmin;height:76vmin;border:1px dashed rgba(255,255,255,.09)}
.tun__c{
  position:absolute;left:50%;top:50%;aspect-ratio:4/5;will-change:transform,opacity;pointer-events:none;
  border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(160deg,#1c1c1c,#0b0b0b 70%);transition:border-color .5s;
}
.tun__c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tun__ph{position:absolute;inset:0;display:grid;place-items:center;color:#3c3c3c;transition:color .5s,scale .7s var(--ease)}
.tun__ph svg{width:30%;height:auto}
.tun__lbl{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font:500 .6875rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);background:linear-gradient(transparent,rgba(0,0,0,.7))}
@media (max-width:767px){.tun{perspective:900px}}
/* campo de pontos (assets/js/dot-field.js): some nas bordas e fica mais quieto no meio, atras do texto */
.dotfield{position:absolute;inset:0;pointer-events:none;opacity:.45}
.dotfield canvas{
  display:block;width:100%;height:100%;color:#d9d9d9;opacity:0;transition:opacity .5s ease-out;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 40%,transparent 100%),radial-gradient(ellipse 34% 22% at 50% 50%,rgb(0 0 0 / .35),#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 40%,transparent 100%),radial-gradient(ellipse 34% 22% at 50% 50%,rgb(0 0 0 / .35),#000 100%);
  mask-composite:intersect;
}
.hx__copy{position:relative;z-index:2;transform-origin:50% 50%}
.hx__copy{display:grid;justify-items:center;gap:clamp(18px,2vw,24px);max-width:900px;text-align:center}
.hx .h1{font-size:clamp(2rem,1.55rem + 1.4vw,2.5rem);line-height:1.12}
/* titulo da Inicio desenhado em canvas (assets/js/tech-text.js): a letra sob o mouse vira contorno com moldura de mira */
[data-techtext]{--tt-accent:var(--red-text)}
[data-techtext].is-tt{position:relative;justify-self:stretch;width:100%;touch-action:pan-y;user-select:none}
.tt__canvas{position:absolute;left:-30px;top:-30px;display:block}
.tt__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hx .lead{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);max-width:62ch}
.hx .btn{margin-top:clamp(6px,1vw,12px)}
.float{animation:float 7s ease-in-out infinite alternate}
.float--2{animation-duration:8.5s;animation-delay:-3s}
@keyframes float{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
.shield-float{animation:shield 9s ease-in-out infinite alternate}
@keyframes shield{from{transform:translateY(-8px) rotate(-1.5deg)}to{transform:translateY(8px) rotate(1.5deg)}}
.is-off .float,.is-off .shield-float,.is-off .core__ring,.is-off .wire::before{animation-play-state:paused}
.tab-hidden .float,.tab-hidden .shield-float,.tab-hidden .core__ring,.tab-hidden .wire::before{animation-play-state:paused}

/* ---------- mockups (decorativos) ---------- */
.mock{background:#0b0b0b;border:1px solid var(--line-2);border-radius:16px;padding:16px;display:grid;gap:12px;align-content:start}
.mock__tag{
  justify-self:start;background:var(--red);color:#fff;border-radius:4px;
  font:700 .6875rem/1 var(--f-title);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;
}
.sk{display:block;height:8px;border-radius:99px;background:#2a2a2a;width:var(--w,100%)}
.sk--hl{background:var(--red)}
.sk--w{background:#e9e9e9}
.sk--lg{height:12px}
.pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pr-box{border:1px solid var(--line-2);border-radius:10px;padding:10px;display:grid;gap:8px;align-content:start}
.pr-box--hl{border-color:var(--red)}
.fc{perspective:900px}
.fc__in{position:relative;aspect-ratio:1.55/1;transition:transform .9s var(--ease);transform-style:preserve-3d}
.fc.is-flipped .fc__in{transform:rotateY(180deg)}
.fc__face{
  position:absolute;inset:0;border-radius:12px;padding:14px;display:grid;gap:10px;align-content:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.fc__front{border:1px solid var(--line-2);background:#0b0b0b}
.fc__back{background:var(--red);transform:rotateY(180deg);justify-items:start;align-content:center}
.fc__back svg{width:30px;height:30px;color:#fff}
.fc__back .sk{background:rgba(255,255,255,.7)}
.q-opt{display:grid;grid-template-columns:30px minmax(0,1fr) 22px;gap:10px;align-items:center;border:1px solid var(--line-2);border-radius:10px;padding:8px 10px}
.q-opt i{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font:700 .85rem/1 var(--f-body);font-style:normal;color:var(--muted)}
.q-opt--ok{border-color:var(--red);background:rgba(178,35,20,.14)}
.q-opt--ok i{background:var(--red);border-color:var(--red);color:#fff}
.q-opt svg{width:18px;height:18px;color:var(--red-text)}
.q-note{border-left:3px solid var(--red);padding:2px 0 2px 12px;display:grid;gap:8px}
.sim-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.sim-grid i{aspect-ratio:1;border-radius:4px;background:#1f1f1f}
.sim-grid i.d{background:var(--red)}
.sim-grid i.c{background:none;border:2px solid #fff}
.sim-bar{height:8px;border-radius:99px;background:#222;overflow:hidden}
.sim-bar b{display:block;height:100%;width:var(--p,55%);background:var(--red);border-radius:99px}

/* ---------- problema: quatro blocos com cenas ligadas a rolagem (--p de 0 a 1 em cada bloco) ---------- */
.pbx{padding-top:clamp(90px,12vw,190px)}
.pbx__head{max-width:720px;margin:0 auto clamp(44px,5.5vw,80px);text-align:center}
.pbx__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.pb{
  --p:0;position:relative;grid-column:span 6;display:grid;gap:clamp(26px,2.6vw,36px);align-content:start;overflow:hidden;
  padding:clamp(26px,3.4vw,52px);border:1px solid #1c1c1c;border-radius:24px;background:#070707;transition:border-color .4s;
}
.pb:hover{border-color:#2e2e2e}
.pb--ed{grid-column:span 7}
.pb--tm{grid-column:span 5}
.pb--qz{grid-column:span 8;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.4vw,72px);align-items:center}
.pb--end{grid-column:span 4;background:var(--red);border-color:var(--red);align-content:start}
.pb__k{display:flex;align-items:center;gap:12px;font:700 .75rem/1 var(--f-title);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pb__k b{font:800 1.75rem/.8 var(--f-num);letter-spacing:0;color:var(--red-text)}
.pb p{color:#bdbdbd;font-size:1.0625rem;line-height:1.7;max-width:54ch}
.pb__txt{display:grid;gap:24px}
.pb__hl{color:#fff;font-weight:600;background:linear-gradient(var(--red),var(--red)) 0 100%/100% 2px no-repeat}
.pb--end .pb__k{color:rgba(255,255,255,.8)}
.pb--end .pb__k b{color:#000}
.pb__end{position:relative;color:#fff!important;font:700 clamp(1.25rem,1.05rem + .7vw,1.625rem)/1.35 var(--f-title)!important;text-wrap:pretty}
.pb__bolt{position:absolute;right:-26px;bottom:-56px;width:120px;color:rgba(0,0,0,.28);transform:rotate(14deg) translateY(calc((1 - var(--p,1)) * 20px))}

/* 01 edital: a lista passa sob a linha de leitura; o que passou se apaga */
.ed{position:relative;height:220px;border-radius:14px;background:#f2efe8;overflow:hidden}
.ed::before,.ed::after{content:"";position:absolute;left:0;right:0;height:46px;z-index:2;pointer-events:none}
.ed::before{top:0;background:linear-gradient(#f2efe8,rgba(242,239,232,0))}
.ed::after{bottom:0;background:linear-gradient(rgba(242,239,232,0),#f2efe8)}
.ed__list{padding:0 20px;transform:translateY(calc(96px - var(--p) * 420px))}
.ed__list li{
  display:grid;grid-template-columns:80px minmax(0,1fr);gap:14px;align-items:center;height:40px;border-bottom:1px solid #e2dccf;
  opacity:clamp(.16, calc(1 - (var(--p) * 10.5 - var(--i)) * .45), 1);
}
.ed__k{font:700 .6875rem/1 var(--f-title);letter-spacing:.1em;text-transform:uppercase;color:#0b0b0b}
.ed__l{display:grid;gap:5px}
.ed__l .sk{height:5px;background:#cfc9bd}
.ed__l .sk:first-child{background:#3a3a3a}
.ed__mark{position:absolute;left:0;right:0;top:116px;height:2px;background:var(--red);z-index:3}
.ed__mark::before{content:"";position:absolute;left:0;top:-5px;width:12px;height:12px;background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%)}

/* 02 rotina: a barra cheia e a rotina; o vermelho e o tempo que sobra */
.tm{display:grid;gap:24px;padding:8px 0}
.tm li{display:grid;gap:10px}
.tm__l{font:700 .8125rem/1.2 var(--f-title);color:#e6e6e6}
.tm__b{position:relative;height:12px;border-radius:4px;background:#141414;overflow:hidden}
.tm__busy{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f) * min(1, var(--p) * 1.6));background:repeating-linear-gradient(135deg,#2c2c2c 0 6px,#212121 6px 12px)}
.tm__free{position:absolute;top:0;bottom:0;left:var(--f);width:calc(var(--s) * clamp(0, var(--p) * 2.2 - 1, 1));background:var(--red)}

/* 03 questao: os 4 detalhes acendem em sequencia */
.qz{display:grid;gap:16px;padding:clamp(22px,2.4vw,30px);border-radius:14px;background:#f2efe8;color:#0b0b0b;rotate:-1.5deg}
.qz__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qz__src{font:700 .6875rem/1 var(--f-title);letter-spacing:.1em;text-transform:uppercase;color:#6b6b6b}
.pb .qz__q{color:#0b0b0b;font:700 clamp(1.0625rem,1rem + .35vw,1.3125rem)/1.35 var(--f-title)}
.pb .qz__a{display:flex;align-items:baseline;gap:10px;color:#0b0b0b;font-weight:600}
.qz__blank{display:inline-block;width:72px;height:1.3em;border-bottom:3px solid var(--red)}
.qz__chips{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;border-top:1px dashed #d0c9bb}
.qz__chips li{
  padding:7px 10px;border-radius:6px;border:1px solid #d0c9bb;font:700 .6875rem/1 var(--f-title);letter-spacing:.06em;text-transform:uppercase;color:#7a7a7a;
  transition:background-color .4s var(--ease),border-color .4s,color .4s,transform .4s var(--ease);
}
.qz__chips li.is-on{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)}
@media (max-width:900px){
  .pb,.pb--ed,.pb--tm,.pb--qz,.pb--end{grid-column:1/-1}
  .pb--qz{grid-template-columns:minmax(0,1fr)}
}

/* ---------- para quem e: cinco cartas empilhadas que se abrem em leque com a rolagem ---------- */
#para-quem .sec-head{margin-bottom:8px}
.hand{--s:0;--gx:min(246px,20.4vw);position:relative;height:calc(min(236px,20vw) * 330 / 236 + 46px);margin:0 auto;max-width:1180px}
.card{
  position:absolute;left:50%;bottom:20px;width:min(236px,20vw);aspect-ratio:236/330;margin-left:calc(min(236px,20vw) / -2);
  display:flex;flex-direction:column;justify-content:flex-start;gap:16px;padding:clamp(18px,1.8vw,24px);
  border-radius:20px;background:#121212;border:1px solid var(--line-2);z-index:calc(10 - var(--a));
  transform-origin:50% 115%;
  transform:
    translateX(calc(var(--o) * var(--gx) * var(--s)))
    translateY(calc(var(--a) * 22px * var(--s)))
    rotate(calc(var(--o) * 6deg * var(--s) + var(--r0) * (1 - var(--s))));
  transition:transform .25s linear,translate .5s var(--ease),border-color .4s,background-color .4s;
}
.card:nth-child(odd){background:#0d0d0d}
.card:hover{translate:0 -26px;border-color:var(--red);z-index:20}
.card .num{position:relative;display:block;padding-bottom:16px;font-size:clamp(3.4rem,5vw,4.6rem);line-height:.85;color:var(--red-text)}
.card .num::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(var(--s));transform-origin:left}
.card p{font-size:clamp(.9375rem,.85rem + .3vw,1.0625rem);line-height:1.45;color:#e6e6e6}
.card b{display:block;font-weight:600;color:#fff;margin-bottom:4px}
#para-quem .novid{max-width:900px;margin-inline:auto}
@media (max-width:900px){
  #para-quem .sec-head{margin-bottom:32px}
  /* celular: cartas em pilha ligada a rolagem (stack() no main.js): cada uma gruda no topo e a de tras encolhe */
  .hand{height:auto;display:grid;gap:28px}
  .card{
    position:sticky;top:calc(var(--hdr-top) + 20px + var(--n,0) * 12px);left:auto;bottom:auto;width:auto;aspect-ratio:auto;margin:0;min-height:120px;
    flex-direction:row;align-items:center;gap:18px;z-index:auto;
    transform:scale(calc(1 - var(--k,0) * .06));transform-origin:50% 0;filter:brightness(calc(1 - var(--k,0) * .5));transition:border-color .4s;
  }
  .card:nth-child(2){--n:1}.card:nth-child(3){--n:2}.card:nth-child(4){--n:3}.card:nth-child(5){--n:4}
  .card .num{font-size:3rem;flex:none;width:64px;padding-bottom:0}
  .card .num::after{display:none}
  .card:hover{translate:none}
}

/* aviso "nao e videoaula": a palavra riscada em vermelho */
.novid{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3.4vw,52px);align-items:center;
  margin-top:clamp(36px,4vw,56px);padding:clamp(20px,2.4vw,30px) 0;
}
.novid__w{position:relative;justify-self:start;font:800 clamp(2.6rem,5vw,4.5rem)/.9 var(--f-num);text-transform:uppercase;color:#2f2f2f}
.novid__w i{position:absolute;left:-5%;right:-5%;top:50%;height:5px;margin-top:-2px;background:var(--red);transform:rotate(-5deg) scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .35s}
.novid.is-in .novid__w i,html:not(.js) .novid__w i{transform:rotate(-5deg) scaleX(1)}
.novid p{color:var(--muted);font-size:1.0625rem;line-height:1.55;max-width:52ch}
.novid p b{display:block;color:#fff;font:700 clamp(1.0625rem,1rem + .3vw,1.25rem)/1.35 var(--f-title);margin-bottom:4px}
@media (max-width:640px){.novid{grid-template-columns:minmax(0,1fr);gap:14px}}

/* ---------- antes e depois: lamina vermelha varre a lista conforme a rolagem ---------- */
.ba-sec{position:relative}
.ba__sticky{position:relative;z-index:1;padding:var(--gap) 0}
@media (min-width:901px) and (min-height:620px){
  .js .ba-sec{height:250vh}
  .js .ba__sticky{position:sticky;top:var(--hdr-top);height:calc(100vh - var(--hdr-top));transition:top .55s var(--ease),height .55s var(--ease);display:grid;align-content:center;padding:20px 0;overflow:hidden}
}
.ba__head{text-align:center;max-width:820px;margin:0 auto clamp(22px,3vw,34px)}
.ba__labels{
  display:flex;justify-content:space-between;gap:16px;max-width:980px;margin:0 auto 12px;
  font:700 .75rem/1.2 var(--f-title);letter-spacing:.08em;text-transform:uppercase;
}
.ba__lab{display:inline-flex;align-items:center;gap:8px}
.ba__lab i{width:10px;height:10px;border-radius:2px;flex:none}
.ba__lab--old{color:#8a8a8a;opacity:calc(1 - var(--p,0) * .6)}
.ba__lab--old i{background:#3a3a3a}
.ba__lab--new{color:var(--red-text);opacity:calc(.35 + var(--p,0) * .65)}
.ba__lab--new i{background:var(--red)}
.ba{
  --p:0;position:relative;max-width:980px;margin:0 auto;
  border:1px solid var(--line-2);border-radius:16px;overflow:hidden;background:#0c0c0c;touch-action:pan-y;
}
@media (hover:hover){.ba{cursor:ew-resize}}
.ba__row{display:grid}
.ba__row+.ba__row .ba__old{border-top:1px solid #1e1e1e}
.ba__row+.ba__row .ba__new{border-top:1px solid rgba(0,0,0,.2)}
.ba__row:last-child{border-bottom:0}
.ba__old,.ba__new{
  grid-area:1/1;display:grid;grid-template-columns:40px minmax(0,1fr);gap:18px;align-items:center;
  padding:clamp(16px,2vw,22px) clamp(18px,3vw,34px);font-size:clamp(1rem,.95rem + .3vw,1.1875rem);line-height:1.4;
}
.ba__old{color:#7a7a7a;background:#0d0d0d}
.ba__old .t{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.22);text-decoration-thickness:1px}
.ba__new{
  color:#fff;font-weight:600;background:var(--red);
  clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0);
}
.ba__ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.ba__ic svg{width:17px;height:17px}
.ba__old .ba__ic{border:1px solid var(--line-2);color:#666}
.ba__new .ba__ic{background:#000;color:#fff}
.ba__handle{
  position:absolute;top:0;bottom:0;left:calc(var(--p) * 100%);width:2px;margin-left:-1px;
  width:3px;margin-left:-1.5px;background:#fff;z-index:3;pointer-events:none;transition:opacity .4s;
}
.ba__knob{
  position:absolute;top:50%;left:50%;width:44px;height:56px;margin:-28px 0 0 -22px;border-radius:10px;
  background:#fff;border:3px solid #0b0b0b;display:grid;place-items:center;
}
.ba__knob svg{width:13px;height:22px;color:var(--red);fill:currentColor}
.ba.is-done .ba__handle{opacity:0}
.ba-cta{display:flex;justify-content:center;margin-top:clamp(24px,3vw,36px)}
@media (max-width:560px){
  .ba__old,.ba__new{grid-template-columns:34px minmax(0,1fr);gap:12px}
  .ba__ic{width:34px;height:34px}
  .ba__labels{font-size:.6875rem}
  .ba__head{margin-bottom:40px}
}

/* ---------- oferta: tres cursos em formato de ingresso (picote e canhoto com o preco) ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto);gap:0 22px;align-items:stretch}
.plan{
  --bgc:#0e0e0e;--stub:#171717;--ink:#fff;--ink-2:var(--muted);
  position:relative;grid-row:span 5;display:grid;grid-template-rows:subgrid;
  transition:translate .55s var(--ease);
}
.plan:hover{translate:0 -6px}
.plan>*{position:relative;padding-inline:clamp(22px,2.4vw,30px)}
.plan__top{
  padding-block:clamp(22px,2.4vw,30px) 22px;display:grid;gap:12px;align-content:start;justify-items:start;
  background:var(--bgc);border-radius:20px 20px 0 0;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.07);
}
.plan__top>*{position:relative}
.plan__top .bolt{position:absolute;right:-24px;top:-30px;width:120px;color:#1f0c09;transform:rotate(14deg);transition:transform .7s var(--ease)}
.plan:hover .plan__top .bolt{transform:rotate(4deg) translateY(10px)}
.plan__badges{display:flex;flex-wrap:wrap;gap:8px}
.plan__state{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:4px;padding:6px 10px;font:700 .6875rem/1.2 var(--f-title);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.plan__state svg{width:13px;height:13px}
.plan__title{font:800 clamp(1.5rem,1.25rem + .8vw,1.875rem)/1.1 var(--f-title);letter-spacing:-.01em}
.plan__desc{color:var(--muted);font-size:1rem;line-height:1.55}
.plan__mods{padding-block:6px 16px;display:grid;align-content:start;background:var(--bgc)}
.plan__mods li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:14px 0;border-top:1px solid rgba(255,255,255,.07)}
.plan__mods li:first-child{border-top:0}
.plan__mods .n{font:800 1.6rem/1 var(--f-num);color:var(--red-text);transition:transform .4s var(--ease)}
.plan__mods li:hover .n{transform:translateX(4px)}
.plan__mods b{display:block;font:700 1rem/1.35 var(--f-title)}
.plan__mods small{display:block;color:var(--muted);font-size:.875rem;line-height:1.45;margin-top:3px}
.plan__cut{position:relative;height:30px;padding:0!important;background:linear-gradient(var(--bgc) 50%,var(--stub) 50%)}
.plan__cut::before{content:"";position:absolute;left:24px;right:24px;top:50%;margin-top:-1px;border-top:2px dashed var(--red)}
.plan__cut i{position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--bg)}
.plan__cut i:first-child{left:-15px}
.plan__cut i:last-child{right:-15px}
.plan__price{padding-block:20px 6px;display:grid;justify-items:center;text-align:center;gap:6px;background:var(--stub);color:var(--ink)}
.plan__inst{font:700 .875rem/1.2 var(--f-title);color:var(--ink-2);text-transform:uppercase;letter-spacing:.12em}
.plan__val{display:flex;align-items:flex-start;justify-content:center;gap:8px;font:800 clamp(3.5rem,2.6rem + 2.4vw,4.75rem)/.95 var(--f-title);letter-spacing:-.04em}
.plan__val small{font-size:.34em;margin-top:.3em;letter-spacing:0}
.plan__cash{color:var(--ink-2);font-size:1.0625rem}
.plan__cash b{color:var(--ink);font-weight:700}
.plan__foot{padding-block:16px clamp(22px,2.4vw,30px);background:var(--stub);border-radius:0 0 20px 20px;display:grid;align-content:end}
.plan__foot .btn{--b-px:18px;letter-spacing:.1em}
.plan__foot .btn__label{white-space:normal;line-height:1.25;font-size:.8125rem;text-align:center}
.plan--hot{--stub:#f2efe8;--ink:#0b0b0b;--ink-2:#5a5a5a}
.plan--hot .plan__top{background:var(--red);border-bottom-color:transparent}
.plan--hot .plan__top .bolt{color:var(--red-deep)}
.plan--hot .tag{background:#000}
.plan--hot .plan__desc{color:#fff}
.plan--soon .plan__title{color:#d0d0d0}
.plan--soon .plan__val{color:#8a8a8a}
@media (max-width:900px){
  .plans{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(280px,84%);
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding:8px var(--gut) 14px;scroll-padding-inline:var(--gut);
  }
  .plans::-webkit-scrollbar{display:none}
  .plan{scroll-snap-align:start}
  .plan:hover{translate:none}
}
.swipe{display:none;justify-content:center;gap:8px;margin-top:10px}
.swipe i{width:8px;height:8px;border-radius:50%;background:#333;transition:background-color .3s,width .4s var(--ease)}
.swipe i.is-on{background:var(--red);width:22px;border-radius:4px}
@media (max-width:900px){.swipe{display:flex}}

/* ---------- garantia: calendario de 7 dias + carimbo ---------- */
.guar{background:var(--red);overflow:clip}
.guar__bolt{position:absolute;right:-3%;bottom:-22%;width:clamp(160px,22vw,320px);color:var(--red-deep);transform:translate3d(0,var(--py,0px),0) rotate(12deg)}
.guar__head{display:grid;justify-items:center;text-align:center;gap:18px;max-width:760px;margin:0 auto clamp(40px,5vw,60px)}
.guar .lead{color:#fff;max-width:56ch}
.cal{position:relative;max-width:900px;margin:0 auto}
.cal__tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(6px,1.2vw,14px)}
.cal__d{position:relative;aspect-ratio:3/4;perspective:700px}
.cal__d::before,.cal__d::after{
  content:"";position:absolute;top:-7px;width:6px;height:16px;border-radius:3px;background:#2a0805;z-index:3;
}
.cal__d::before{left:28%}
.cal__d::after{right:28%}
.cal__f{
  position:absolute;inset:0;border-radius:clamp(8px,1.2vw,14px);display:grid;place-items:center;
  font:800 clamp(1.7rem,4.6vw,3.8rem)/1 var(--f-num);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .75s var(--ease);
}
.cal__f--a{background:var(--red-deep);color:rgba(0,0,0,.42);border:1px solid rgba(0,0,0,.18)}
.cal__f--b{background:#000;color:#fff;transform:rotateX(-180deg)}
.cal__f--b svg{position:absolute;top:9%;right:9%;width:24%;color:var(--red-text)}
.cal__d.is-on .cal__f--a{transform:rotateX(180deg)}
.cal__d.is-on .cal__f--b{transform:rotateX(0)}
.cal__d--last .cal__f--b{background:#fff;color:var(--red)}
.cal__d--last .cal__f--b svg{color:var(--red)}
.cal.is-done .cal__tiles{animation:thud .5s var(--ease) .32s}
@keyframes thud{30%{transform:translateY(5px)}60%{transform:translateY(-2px)}}
.stamp{
  position:absolute;right:-3%;top:50%;z-index:4;width:clamp(130px,16vw,184px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;align-content:center;gap:0;text-align:center;
  background:#000;color:#fff;border:3px solid #fff;outline:2px solid #fff;outline-offset:5px;
  opacity:0;transform:translateY(-50%) rotate(-14deg) scale(2.4);pointer-events:none;
  transition:opacity .2s,transform .55s cubic-bezier(.2,1.5,.4,1);
}
.cal.is-done .stamp{opacity:1;transform:translateY(-50%) rotate(-14deg) scale(1)}
.stamp b{font:800 clamp(3.4rem,6vw,4.75rem)/.8 var(--f-num)}
.stamp span{font:700 clamp(.6875rem,1.1vw,.875rem)/1.2 var(--f-title);letter-spacing:.12em;text-transform:uppercase;margin-top:clamp(8px,1vw,12px)}
.guar__cta{display:flex;justify-content:center;margin-top:clamp(40px,5vw,64px)}
@media (max-width:700px){
  .cal__d::before,.cal__d::after{top:-5px;width:4px;height:11px}
  .stamp{position:relative;right:auto;top:auto;margin:30px auto 0;transform:rotate(-12deg) scale(2.4)}
  .cal.is-done .stamp{transform:rotate(-12deg) scale(1)}
}

/* ---------- faq: centralizado ---------- */
.faq__in{position:relative;z-index:1;max-width:860px;margin:0 auto}
.acc{display:grid;gap:10px;counter-reset:q}
.acc__item{
  position:relative;border:1px solid var(--line);border-radius:18px;background:var(--bg-3);overflow:hidden;
  transition:border-color .4s,background-color .4s;
}
.acc__item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);
  transform:scaleY(0);transition:transform .5s var(--ease);
}
.acc__item:hover{border-color:var(--line-2)}
.acc__item.is-open{border-color:rgba(178,35,20,.6);background:#000}
.acc__item.is-open::before{transform:scaleY(1)}
.acc__q{
  width:100%;display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:16px;align-items:center;text-align:left;
  padding:18px clamp(16px,2.4vw,24px);font:600 clamp(1.0625rem,1rem + .2vw,1.1875rem)/1.35 var(--f-title);min-height:44px;
}
.acc__q .pm{position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);display:grid;place-items:center;transition:background-color .4s,border-color .4s}
.acc__q .pm::before,.acc__q .pm::after{content:"";position:absolute;width:14px;height:2px;border-radius:2px;background:#fff;transition:transform .5s var(--ease)}
.acc__q .pm::after{transform:rotate(90deg)}
.acc__q:hover .pm{border-color:var(--red)}
.acc__q[aria-expanded="true"] .pm{background:var(--red);border-color:var(--red)}
.acc__q[aria-expanded="true"] .pm::after{transform:rotate(0deg)}
.acc__q[aria-expanded="true"] .pm::before{transform:rotate(180deg)}
.acc__a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--ease)}
.acc__a>div{overflow:hidden}
.acc__a p{padding:0 clamp(16px,2.4vw,24px) 22px;color:var(--muted);max-width:70ch;opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .5s var(--ease)}
.acc__a p+p{margin-top:-10px}
.acc__item.is-open .acc__a p,html:not(.js) .acc__a p{opacity:1;transform:none;transition-delay:.12s}
.js .acc__a{grid-template-rows:0fr}
.js .acc__item.is-open .acc__a{grid-template-rows:1fr}
@media (max-width:560px){
  .acc__q{grid-template-columns:minmax(0,1fr) 36px;gap:12px}
  .acc__q .pm{width:36px;height:36px}
  .acc__a p{padding-left:clamp(16px,2.4vw,24px)}
}

/* ---------- paginas internas ---------- */
.page-hero{position:relative;overflow:clip;padding:clamp(40px,6vw,88px) 0 clamp(48px,6vw,80px)}
.page-hero>.wrap{position:relative;z-index:1}
.page-hero__in{position:relative;display:grid;justify-items:start;gap:clamp(16px,2vw,22px)}
.page-hero__in>:not(.bolt){position:relative;z-index:1;max-width:820px}
.page-hero .page-hero__in>.bolt{position:absolute;right:0;top:-6%;width:clamp(70px,10vw,140px);transform:rotate(9deg);pointer-events:none;z-index:0}
@media (max-width:700px){.page-hero .page-hero__in>.bolt{opacity:.35}}

/* sobre: abertura */
.about-hero{min-height:calc(100vh - var(--hdr));display:grid;align-items:center}
.about{position:relative;z-index:2}
.about__copy{display:grid;justify-items:start;gap:clamp(16px,2vw,22px);max-width:610px}
/* fotos do Warley e do Vinicius em 3D (photo() no main.js): duas fotos em profundidades diferentes
   (Vinicius atras e a direita, Warley na frente e a esquerda), o conjunto inclina na direcao do mouse,
   placa vermelha atras, fatias que viram na entrada e saltam perto do cursor, brilho e cantoneiras de mira */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(32px,5vw,80px);align-items:center}
.about__ph{margin:0;aspect-ratio:10/11;max-width:520px;width:100%;justify-self:end;perspective:1100px}
.ph3{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.ph3__plate{
  position:absolute;inset:0;border-radius:20px;border:1px solid rgba(178,35,20,.7);
  background:repeating-linear-gradient(-45deg,rgba(178,35,20,.28) 0 2px,transparent 2px 11px);
  transform:translate3d(28px,28px,-80px) scale(1.06);
}
.ph3__card{position:absolute;transform-style:preserve-3d}
.ph3__card--a{left:0;bottom:0;width:58%;height:78%;transform:translateZ(34px)}
.ph3__card--b{right:0;top:0;width:62%;height:72%;transform:translateZ(-34px)}
.ph3__name{
  position:absolute;left:14px;bottom:14px;transform:translateZ(24px);
  font:700 11px/1 'Archivo',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  padding:8px 10px;border-radius:4px;border-left:2px solid var(--red);background:rgba(0,0,0,.72);
  opacity:0;transition:opacity .6s 1.2s;
}
.ph3__card--b .ph3__name{left:auto;bottom:auto;right:14px;top:14px}
.is-built .ph3__name{opacity:1}
.ph3__img{position:absolute;inset:0;transform-style:preserve-3d}
.ph3__img>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:20px}
.is-3d .ph3__img>img{opacity:0}
.ph3__s{
  position:absolute;top:0;bottom:0;overflow:hidden;
  transform:translateZ(var(--z,0px));rotate:0 1 0 -88deg;opacity:0;transform-origin:50% 50%;
  transition:rotate 1.1s var(--ease),opacity .5s;transition-delay:calc(var(--i) * 75ms + .15s);
}
.ph3__s:first-child{border-radius:20px 0 0 20px}
.ph3__s:last-child{border-radius:0 20px 20px 0}
.ph3__s img{position:absolute;top:0;height:100%;max-width:none;object-fit:cover;object-position:50% 20%}
.is-built .ph3__s{rotate:0 1 0 0deg;opacity:1}
.ph3__glare{
  position:absolute;inset:0;border-radius:20px;pointer-events:none;transform:translateZ(1px);opacity:var(--gl,0);
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.2),transparent 50%);
}
.ph3__aim{
  --c:var(--red);--l:30px;--t:2px;
  position:absolute;inset:-16px;pointer-events:none;transform:translateZ(60px);opacity:0;transition:opacity .6s 1s;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) var(--t),linear-gradient(var(--c),var(--c)) 0 0/var(--t) var(--l),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) var(--t),linear-gradient(var(--c),var(--c)) 100% 0/var(--t) var(--l),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) var(--t),linear-gradient(var(--c),var(--c)) 0 100%/var(--t) var(--l),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--t),linear-gradient(var(--c),var(--c)) 100% 100%/var(--t) var(--l);
  background-repeat:no-repeat;
}
.is-built .ph3__aim{opacity:1}
@media (max-width:900px){
  .about-hero{min-height:0}
  .about{grid-template-columns:minmax(0,1fr)}
  .about{gap:56px}
  .about-hero{padding-bottom:110px}
  .about__ph{order:-1;justify-self:center;max-width:min(360px,calc(100% - 50px));margin-top:28px}
  .ph3__name{font-size:10px;padding:6px 8px;left:10px;bottom:10px}
  .ph3__card--b .ph3__name{right:10px;top:10px}
  .ph3__plate{transform:translate3d(16px,16px,-60px) scale(1.04)}
  .ph3__aim{inset:-12px;--l:22px}
}
.creds-t{font-weight:600;color:#fff}
.creds-mq{
  display:flex;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.creds{display:flex;flex:none;gap:8px;padding-right:8px;animation:mq 30s linear infinite}
.creds-mq:hover .creds{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-100%)}}
.is-off .creds,.tab-hidden .creds{animation-play-state:paused}
.creds li{
  position:relative;display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 8px;
  border:1px solid var(--line-2);border-radius:999px;background:var(--bg-3);font-weight:500;font-size:.9375rem;line-height:1.3;overflow:hidden;white-space:nowrap;
  transition:border-color .4s,background-color .4s;
}
.creds li:hover{border-color:var(--red);background:#000}
.ck2{width:24px;height:24px;border-radius:50%;background:var(--red);display:grid;place-items:center;flex:none}
.ck2 svg{width:13px;height:13px;color:#fff}
.after{border-left:3px solid var(--red);padding-left:clamp(14px,1.6vw,20px);color:#e2e2e2}

/* sobre: dois sargentos que se conectam com a rolagem */
.duo{--c:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}
.duo__card{
  position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);gap:20px;align-items:center;
  border:1px solid var(--line-2);border-radius:20px;background:var(--bg-3);padding:clamp(20px,2.6vw,32px);
  opacity:calc(.2 + var(--c) * .8);
  transition:border-color .4s,transform .5s var(--ease);
}
.duo__card--a{translate:calc((1 - var(--c)) * -90px) 0}
.duo__card--b{translate:calc((1 - var(--c)) * 90px) 0}
.duo__card:hover{border-color:var(--red);transform:translateY(-4px)}
.duo__av{width:76px;height:76px;border-radius:50%;overflow:hidden;border:2px solid var(--red)}
.duo__av img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.duo__av--ph{border:1px dashed var(--gray);display:grid;place-items:center}
.duo__av--ph img{width:46%;height:auto;opacity:.5;object-fit:contain}
.duo__body{display:grid;gap:8px;justify-items:start}
.duo__card h3{font:800 clamp(1.125rem,1rem + .4vw,1.375rem)/1.2 var(--f-title)}
.duo__card p{color:var(--muted);line-height:1.5}
.duo__plus{
  align-self:center;position:relative;z-index:2;margin:0 -16px;
  width:56px;height:56px;border-radius:50%;background:var(--red);display:grid;place-items:center;
  border:6px solid var(--bg-2);scale:calc(.3 + var(--c) * .7);rotate:calc((1 - var(--c)) * -180deg);
}
.duo__plus svg{width:22px;height:22px;color:#fff}
.link{position:relative;height:82px}
.link i{position:absolute;display:block;background:var(--red)}
.link__vl,.link__vr{top:0;width:2px;height:40px;margin-left:-1px;transform-origin:top;transform:scaleY(var(--p1,0))}
.link__vl{left:25%}
.link__vr{left:75%}
.link__hl,.link__hr{top:39px;height:2px}
.link__hl{left:25%;right:50%;transform-origin:left;transform:scaleX(var(--p2,0))}
.link__hr{left:50%;right:25%;transform-origin:right;transform:scaleX(var(--p2,0))}
.link__s{top:39px;left:50%;width:2px;height:43px;margin-left:-1px;transform-origin:top;transform:scaleY(var(--p3,0))}
.duo__result{display:flex;justify-content:center;opacity:0;transform:translateY(16px) scale(.9);transition:opacity .5s var(--ease),transform .6s cubic-bezier(.2,1.5,.4,1)}
.link.is-done~.duo__result{opacity:1;transform:none}
.duo__result span{display:inline-flex;padding:14px 26px;border:1px solid var(--red);border-radius:999px;background:#000}
.duo__result img{height:52px;width:auto}
@media (max-width:820px){
  .duo{grid-template-columns:minmax(0,1fr)}
  .duo__card--a,.duo__card--b{translate:none}
  .duo__plus{justify-self:center;margin:-16px 0}
  .link{height:56px}
  .link .link__vl,.link .link__vr,.link .link__hl,.link .link__hr{display:none}
  .link__s{top:0;height:56px}
}

/* sobre: linha de producao do material */
.claim{
  display:inline-flex;align-items:center;gap:10px;border:2px solid var(--red);border-radius:999px;padding:9px 18px 9px 10px;
  font:800 .875rem/1 var(--f-title);letter-spacing:.08em;text-transform:uppercase;color:#fff;
}
.claim span{width:26px;height:26px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.claim svg{width:14px;height:14px}
.forge{
  --p:0;position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(40px,90px) auto minmax(40px,90px) minmax(0,1.1fr);
  align-items:center;margin-top:clamp(12px,2vw,24px);
}
.forge__src{display:grid;gap:14px}
.src{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line-2);border-radius:16px;background:var(--bg-3);
  font:700 1.0625rem/1.2 var(--f-title);
  opacity:calc(.25 + clamp(0, calc(var(--p) * 4), 1) * .75);
  translate:calc((1 - clamp(0, calc(var(--p) * 4), 1)) * -40px) 0;
}
.src+.src{translate:calc((1 - clamp(0, calc(var(--p) * 4 - .4), 1)) * -40px) 0;opacity:calc(.25 + clamp(0, calc(var(--p) * 4 - .4), 1) * .75)}
.src__ic{width:44px;height:44px;border-radius:12px;background:#000;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--red-text);flex:none}
.src__ic svg{width:22px;height:22px}
.wire{position:relative;height:2px;background:var(--line-2)}
.wire::before{
  content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--w,0));
  background:repeating-linear-gradient(90deg,var(--red) 0 10px,rgba(178,35,20,.25) 10px 18px);
  animation:flow .7s linear infinite;
}
@keyframes flow{to{background-position:18px 0}}
.wire--a{--w:clamp(0, calc(var(--p) * 3.2 - .5), 1)}
.wire--b{--w:clamp(0, calc(var(--p) * 3.2 - 1.6), 1)}
.wire::after{
  content:"";position:absolute;right:-2px;top:50%;width:10px;height:10px;margin-top:-5px;border-top:2px solid var(--red);border-right:2px solid var(--red);
  transform:rotate(45deg);opacity:clamp(0, calc((var(--w) - .9) * 10), 1);
}
.core{position:relative;width:clamp(170px,17vw,210px);aspect-ratio:1;display:grid;place-items:center;margin:0 6px}
.core__ring{position:absolute;inset:0;border-radius:50%;border:2px dashed var(--line-2);animation:spin 20s linear infinite;transition:border-color .5s}
.core__in{width:70%;aspect-ratio:1;border-radius:50%;background:#000;border:1px solid var(--line-2);display:grid;place-items:center;transition:background-color .6s var(--ease),border-color .6s,transform .6s cubic-bezier(.2,1.5,.4,1)}
.core__in img{width:58%;height:auto}
.core.is-on .core__ring{border-color:var(--red)}
.core.is-on .core__in{background:var(--red);border-color:var(--red);transform:scale(1.06)}
.core__lbl{position:absolute;top:100%;left:50%;width:230px;margin:14px 0 0 -115px;text-align:center;font:700 .9375rem/1.3 var(--f-title)}
.out{border:1px solid var(--line-2);border-radius:18px;background:var(--bg-3);padding:20px 22px;display:grid;gap:12px;transition:border-color .5s}
.out.is-on{border-color:var(--red)}
.out h3{font:700 1.0625rem/1.3 var(--f-title);padding-bottom:12px;border-bottom:1px solid var(--line)}
.out__r{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;opacity:.15;translate:16px 0;transition:opacity .5s var(--ease),translate .6s var(--ease)}
.out__r.is-on{opacity:1;translate:0 0}
.out__r b{font:800 1.4rem/1 var(--f-num);color:var(--red-text)}
.out__r span{display:grid;gap:6px}
.out.is-on .out__r .sk{animation:type 4.2s var(--ease) infinite;animation-delay:calc(var(--k,0) * .45s)}
.out.is-on .out__r b{animation:tick 4.2s steps(1) infinite;animation-delay:calc(var(--k,0) * .45s)}
@keyframes type{0%{width:0}28%{width:var(--w,100%)}82%{width:var(--w,100%);opacity:1}100%{width:var(--w,100%);opacity:.25}}
@keyframes tick{0%{color:#fff}28%{color:var(--red-text)}}
.out__bar{position:absolute;left:0;top:0;width:3px;height:100%;background:var(--red);border-radius:2px;opacity:0}
.out{position:relative;overflow:hidden}
.out.is-on .out__scan{animation:outscan 4.2s linear infinite}
.out__scan{position:absolute;left:0;right:0;height:2px;top:58px;background:var(--red);opacity:0}
@keyframes outscan{0%{transform:translateY(0);opacity:.0}8%{opacity:.9}70%{transform:translateY(150px);opacity:.9}80%,100%{transform:translateY(150px);opacity:0}}
.made__cta{position:relative;z-index:1;display:flex;justify-content:center;margin-top:clamp(64px,7vw,96px)}
@media (max-width:900px){
  .forge{grid-template-columns:minmax(0,1fr);justify-items:center}
  .forge__src,.out{width:100%;max-width:420px}
  .wire{width:2px;height:48px}
  .wire::before{transform-origin:top;transform:scaleY(var(--w,0));background:repeating-linear-gradient(180deg,var(--red) 0 10px,rgba(178,35,20,.25) 10px 18px);animation-name:flowv}
  .wire::after{right:auto;left:50%;top:auto;bottom:-2px;margin:0 0 0 -5px;transform:rotate(135deg)}
  .core{margin:6px 0 64px}
  .made__cta{margin-top:48px}
}
@keyframes flowv{to{background-position:0 18px}}

/* como funciona: abertura com painel que se abre com a rolagem (inset-hero.js). A secao fica presa; o titulo
   entra desfocado e sobe (--cy0); o painel comeca como pilula (clip-path com --iy/--ix/--ir) e se abre ate a
   area toda, e o conteudo cresce junto (--ms). Overflow:clip (e nao hidden) para nao quebrar o sticky. */
.cfx{position:relative;overflow:clip;height:calc(100svh - var(--hdr) + 120vh)}
.cfx__stage{
  position:sticky;top:var(--hdr-top);height:calc(100svh - var(--hdr-top));overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(16px,3vh,32px);padding:clamp(24px,5vh,56px) 0 clamp(16px,3vh,28px);
  transition:top .55s var(--ease),height .55s var(--ease);
}
.cfx .dotfield{opacity:.22;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.cfx__head{position:relative;z-index:2;display:grid;justify-items:center;gap:clamp(12px,2vh,18px);max-width:860px;text-align:center;translate:0 var(--hy,0px)}
.cfx__head .lead{max-width:60ch}
.js .cfx__head{opacity:0;filter:blur(10px);transition:opacity .9s ease,filter .9s ease}
.js .cfx.is-in .cfx__head{opacity:1;filter:none}
.cfx__inset{
  position:relative;z-index:1;width:min(var(--max),calc(100% - var(--gut) * 2));margin:0 auto;
  clip-path:inset(var(--iy,45%) var(--ix,45%) var(--iy,45%) var(--ix,45%) round var(--ir,999px));
  background:radial-gradient(120% 90% at 50% 0%,#161616,#070707 70%);
}
.cfx__inset::after{content:"";position:absolute;inset:0;border:1px solid var(--line-2);border-radius:20px;pointer-events:none}
.cfx__media{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
/* a animacao tem tamanho fixo e e escalada pelo script para caber no painel (inclusive no celular) */
.cfx__media .flow{position:absolute;left:50%;top:50%;width:760px;height:480px;transform:translate(-50%,-50%) scale(var(--ms,1))}
/* celular: a mesma animacao em pe (folha em cima, as 4 ferramentas em grade 2x2 embaixo; 340 x 600), para caber maior no painel */
@media (max-width:767px){
  .cfx__media .flow{width:340px;height:600px}
  .cfx .flow__wires{display:none}
  .cfx .flow__page{left:50%;top:0;width:240px;height:250px;translate:-50% 0;rotate:-2deg;animation:pageInM .9s var(--ease) both}
  .cfx .flow__tools{top:auto;bottom:0;left:0;right:0;width:auto;height:322px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
  .cfx .ft{grid-template-columns:minmax(0,1fr);align-content:center;gap:8px;padding:10px 12px}
  .cfx .ft__t{font-size:.875rem}
}
@keyframes pageInM{from{opacity:0;rotate:-8deg}}

/* a folha da lei e lida (linha de leitura) e alimenta as 4 ferramentas pelos fios;
   ciclo de 8s, cada ferramenta acende por 2s na sua vez (--k) */
.flow{--cy:8s;position:relative;height:clamp(400px,36vw,480px)}
.flow__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.flow__wires path{fill:none}
.flow__base path{stroke:#2c2c2c;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;animation:wireIn 1s var(--ease) 1s forwards}
.flow__pulse path{
  stroke:var(--red);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:.22 1.4;stroke-dashoffset:.22;opacity:0;
  animation:wirePulse var(--cy) linear infinite;animation-delay:calc(1.6s + var(--k) * 2s);
}
@keyframes wireIn{to{stroke-dashoffset:0}}
@keyframes wirePulse{0%{stroke-dashoffset:.22;opacity:1}12%{stroke-dashoffset:-1;opacity:1}12.5%,100%{stroke-dashoffset:-1;opacity:0}}

/* folha da lei */
.flow__page{
  position:absolute;left:0;top:50%;width:42%;height:88%;z-index:2;translate:0 -50%;
  background:#f2efe8;border-radius:14px;padding:clamp(14px,1.6vw,22px);display:grid;gap:9px;align-content:start;overflow:hidden;
  rotate:-3deg;animation:pageIn .9s var(--ease) both;
}
.flow__page::before{content:"";position:absolute;inset:7px;border:1px solid #ddd7ca;border-radius:9px;pointer-events:none}
.flow__ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.flow__pg{display:flex;gap:4px}
.flow__pg i{width:6px;height:6px;border-radius:50%;background:#cfc9bd}
.flow__page .sk{height:7px;background:#d9d3c6}
.flow__page .sk--dk{height:9px;background:#3a3a3a;margin-top:6px}
.flow__page .sk--hl{background:var(--red)}
.flow__scan{position:absolute;left:0;right:0;top:20%;height:2px;background:var(--red);animation:scan 2s cubic-bezier(.45,0,.55,1) 1.6s infinite}
@keyframes scan{from{top:16%;opacity:0}12%{opacity:1}88%{opacity:1}to{top:94%;opacity:0}}
@keyframes pageIn{from{opacity:0;translate:-30px -50%;rotate:-9deg}}

/* ferramentas */
.flow__tools{position:absolute;right:0;top:0;bottom:0;width:42%;z-index:2;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:12px}
.ft{
  display:grid;grid-template-columns:minmax(0,1fr) 44%;gap:12px;align-items:center;
  padding:12px 14px;border:1px solid var(--line-2);border-radius:14px;background:#0b0b0b;
  animation:ftIn .8s var(--ease) both,ftAct var(--cy) var(--ease) infinite;
  animation-delay:calc(.35s + var(--k) * .12s),calc(1.6s + var(--k) * 2s);
}
.ft__hd{display:grid;gap:3px;min-width:0}
.ft__n{font:800 1.25rem/1 var(--f-num);color:#444;animation:ftNum var(--cy) var(--ease) infinite;animation-delay:calc(1.6s + var(--k) * 2s)}
.ft__t{font:700 .8125rem/1.2 var(--f-title);color:#fff}
.ft__v{font-size:.75rem;line-height:1.2;color:var(--muted)}
.ft__ui{min-width:0}
@keyframes ftIn{from{opacity:0;translate:40px 0}}
@keyframes ftAct{
  0%,10%{border-color:var(--line-2);background:#0b0b0b;transform:none}
  14%,30%{border-color:var(--red);background:#140807;transform:translateX(-10px)}
  36%,100%{border-color:var(--line-2);background:#0b0b0b;transform:none}
}
@keyframes ftNum{0%,10%{color:#444}14%,30%{color:var(--red-text)}36%,100%{color:#444}}

/* 01 pranchas: tres quadros, o do meio destacado */
.ftp{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.ftp span{display:grid;gap:4px;padding:6px 5px;border:1px solid #262626;border-radius:6px}
.ftp b{display:block;height:4px;border-radius:2px;background:#333}
.ftp b:first-child{width:70%;background:#e9e9e9}
.ftp .is-hl b:first-child{background:var(--red)}
.ftp span{animation:ftPop var(--cy) var(--ease) infinite;animation-delay:calc(1.6s + var(--k) * 2s)}
.ftp .is-hl{animation-name:ftPopHl}
@keyframes ftPop{0%,12%{transform:none}17%{transform:translateY(-3px)}22%,100%{transform:none}}
@keyframes ftPopHl{0%,12%{transform:none;border-color:#262626}17%,30%{transform:translateY(-3px);border-color:var(--red)}36%,100%{transform:none;border-color:#262626}}

/* 02 flashcard que vira */
.ftf{perspective:400px;height:44px}
.ftf__in{position:relative;height:100%;transform-style:preserve-3d;animation:ftFlip var(--cy) var(--ease) infinite;animation-delay:calc(1.6s + var(--k) * 2s)}
.ftf__a,.ftf__b{position:absolute;inset:0;border-radius:7px;display:grid;align-content:center;gap:5px;padding:0 10px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ftf__a{background:#f2efe8}
.ftf__a b{display:block;height:4px;border-radius:2px;background:#3a3a3a}
.ftf__a b+b{width:60%;background:#cfc9bd}
.ftf__b{background:var(--red);transform:rotateY(180deg)}
.ftf__b b{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.9)}
.ftf__b b+b{width:70%;background:rgba(255,255,255,.55)}
@keyframes ftFlip{0%,14%{transform:none}20%,30%{transform:rotateY(180deg)}36%,100%{transform:none}}

/* 03 questao: B e marcada certa */
.ftq{display:grid;gap:4px}
.ftq span{display:grid;grid-template-columns:14px minmax(0,1fr);gap:6px;align-items:center;padding:2px 6px 2px 2px;border-radius:5px}
.ftq i{width:14px;height:14px;border-radius:50%;border:1px solid #333;display:grid;place-items:center;font:700 .5rem/1 var(--f-body);font-style:normal;color:var(--muted)}
.ftq b{display:block;height:4px;border-radius:2px;background:#333}
.ftq .is-ok,.ftq .is-ok i{animation:ftOk var(--cy) var(--ease) infinite;animation-delay:calc(1.6s + var(--k) * 2s)}
.ftq .is-ok i{animation-name:ftOkI}
@keyframes ftOk{0%,16%{background:transparent}20%,30%{background:rgba(178,35,20,.22)}36%,100%{background:transparent}}
@keyframes ftOkI{0%,16%{background:transparent;border-color:#333;color:var(--muted)}20%,30%{background:var(--red);border-color:var(--red);color:#fff}36%,100%{background:transparent;border-color:#333;color:var(--muted)}}

/* 04 simulado: grade enche */
.fts{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.fts i{aspect-ratio:1;border-radius:2px;background:#222;animation:ftCell var(--cy) linear infinite;animation-delay:calc(1.6s + var(--k) * 2s + var(--c) * .06s)}
@keyframes ftCell{0%,13%{background:#222}15%,31%{background:var(--red)}35%,100%{background:#222}}

.is-off .flow *,.tab-hidden .flow *{animation-play-state:paused}

/* depoimentos: carrossel escalonado (stagger() no main.js). O cartao do meio fica vermelho e mais alto;
   os outros se espalham para os lados, alternando para cima e para baixo. Canto de cima a direita cortado
   na diagonal, os outros arredondados. Clicar num cartao traz ele para o meio. */
.stg{--cs:365px;position:relative;height:600px;overflow:hidden;margin-top:clamp(8px,2vw,24px)}
.stg__list{margin:0;padding:0;list-style:none}
.stg__card{
  position:absolute;left:50%;top:50%;width:var(--cs);height:var(--cs);padding:32px;cursor:pointer;
  border:2px solid var(--line-2);border-radius:22px;background:#0b0b0b;color:#ececec;
  clip-path:polygon(50px 0,calc(100% - 50px) 0,100% 50px,100% 100%,calc(100% - 50px) 100%,50px 100%,0 100%,0 0);
  transform:translate(-50%,-50%) translateX(var(--x,0px)) translateY(var(--y,0px)) rotate(var(--r,0deg));
  transition:transform .5s ease-in-out,opacity .4s ease-in-out,background-color .5s ease-in-out,border-color .5s ease-in-out,color .5s ease-in-out;
}
.stg__card:hover{border-color:rgba(178,35,20,.6)}
.stg__card.is-center{z-index:2;background:var(--red);border-color:var(--red);color:#fff;cursor:default}
.stg__card.is-out{opacity:0;pointer-events:none}
.stg__card.no-anim{transition:none}
.stg__cut{position:absolute;right:-2px;top:48px;width:70.71px;height:2px;background:var(--line-2);transform-origin:top right;rotate:45deg}
.stg__card.is-center .stg__cut{background:rgba(0,0,0,.35)}
.stg__card .tst__av{margin-bottom:16px}
.stg__card.is-center .tst__av{border-color:rgba(255,255,255,.6)}
.stg__txt{font:500 clamp(1rem,.95rem + .35vw,1.25rem)/1.45 var(--f-body)}
.stg__by{position:absolute;left:32px;right:32px;bottom:32px;font-size:.875rem;font-style:italic;color:var(--muted)}
.stg__card.is-center .stg__by{color:rgba(255,255,255,.82)}
.stg__card.is-center .todo{outline-color:#fff;background:rgba(0,0,0,.28)}
.stg__nav{position:absolute;left:50%;bottom:16px;z-index:3;display:flex;gap:8px;translate:-50% 0}
.stg__nav button{
  width:56px;height:56px;display:grid;place-items:center;border-radius:14px;cursor:pointer;
  border:2px solid var(--line-2);background:#000;color:#fff;transition:background-color .3s,border-color .3s;
}
.stg__nav button:hover{background:var(--red);border-color:var(--red)}
.stg__nav button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.stg__nav svg{width:24px;height:24px}
.tst__av{display:block;width:52px;height:52px;border-radius:50%;overflow:hidden;border:2px solid var(--red);flex:none}
.tst__av img{width:100%;height:100%;object-fit:cover}
@media (max-width:639px){
  .stg{--cs:290px;height:540px}
  .stg__card{padding:24px}
  .stg__by{left:24px;right:24px;bottom:24px}
}
.cta-row{display:flex;justify-content:center;margin-top:clamp(32px,4vw,52px)}

/* como funciona: linha do tempo horizontal presa na tela */
.htl{position:relative}
.htl__sticky{position:relative;z-index:1;padding:var(--gap) 0}
.htl__rail{display:none}
.htl__viewport{position:relative}
.htl__track{position:relative;display:grid;gap:22px;padding-left:34px}
.htl__track::before,.htl__track::after{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:var(--line-2)}
.htl__track::after{background:var(--red);transform-origin:top;transform:scaleY(var(--p,0))}
.htl__panel{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;
  border:1px solid var(--line-2);border-radius:24px;background:#070707;padding:clamp(22px,3vw,40px);
  transition:border-color .5s,opacity .5s;
}
.htl__panel::before{
  content:"";position:absolute;left:-31px;top:30px;width:14px;height:14px;border-radius:50%;background:#000;border:2px solid var(--line-2);
  transition:background-color .4s,border-color .4s;
}
.htl__panel.is-active{border-color:var(--red)}
.htl__panel.is-active::before{background:var(--red);border-color:var(--red)}
.htl__txt{display:grid;gap:12px;justify-items:start;align-content:center}
.htl__big{font:800 clamp(3rem,5vw,4.6rem)/.9 var(--f-num);color:#2a2a2a;transition:color .5s}
.htl__panel.is-active .htl__big{color:var(--red-text)}
.htl__txt h2{font:800 clamp(1.375rem,1.2rem + .7vw,1.75rem)/1.2 var(--f-title)}
.htl__txt p{color:#d0d0d0;max-width:44ch}
.htl__vis{width:100%;max-width:460px;justify-self:center;align-self:center}
.htl__vis .fc{max-width:420px}
.htl__panel.is-active .pr-box{animation:pop .55s var(--ease) both;animation-delay:calc(var(--k,0) * .14s + .2s)}
.htl__panel.is-active .q-opt{animation:pop .5s var(--ease) both;animation-delay:calc(var(--k,0) * .1s + .15s)}
.htl__panel.is-active .q-opt--ok{animation:pop .5s var(--ease) both,qok .45s var(--ease) 1.1s both;animation-delay:calc(var(--k,0) * .1s + .15s),1.1s}
.htl__panel.is-active .q-note{animation:pop .55s var(--ease) 1.4s both}
.htl__panel.is-active .sim-grid i{animation:pop .35s var(--ease) both;animation-delay:calc(var(--k,0) * .035s + .2s)}
.htl__panel.is-active .sim-bar b{animation:grow 1.4s var(--ease) .5s both}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes qok{from{border-color:var(--line-2);background:transparent}}
@keyframes grow{from{width:0}}
@media (min-width:901px){
  .htl__panel{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
}
/* modo preso (desktop): a rolagem vertical move a trilha na horizontal */
.htl.is-pinned .htl__sticky{
  position:sticky;top:var(--hdr-top);height:calc(100vh - var(--hdr-top));padding:clamp(18px,3vh,36px) 0;transition:top .55s var(--ease),height .55s var(--ease);
  display:grid;grid-template-rows:auto auto;align-content:center;gap:clamp(22px,4vh,40px);overflow:hidden;
}
.htl.is-pinned .htl__rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.htl__rail::before,.htl__fill{content:"";position:absolute;left:21px;top:21px;width:75%;height:2px;background:var(--line-2)}
.htl__fill{background:var(--red);transform-origin:left;transform:scaleX(var(--p,0));z-index:1}
.htl__node{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.htl__dot{
  width:44px;height:44px;border-radius:50%;background:#000;border:2px solid var(--line-2);display:grid;place-items:center;flex:none;
  font:800 1.4rem/1 var(--f-num);color:#777;transition:background-color .4s,border-color .4s,color .4s;
}
.htl__node small{font:700 .75rem/1.2 var(--f-title);letter-spacing:.08em;text-transform:uppercase;color:#777;transition:color .4s}
.htl__node.is-on .htl__dot{background:var(--red);border-color:var(--red);color:#fff}
.htl__node.is-on small{color:#fff}
.htl.is-pinned .htl__viewport{min-height:0;display:grid;align-items:center;overflow:hidden}
.htl.is-pinned .htl__track{
  display:flex;gap:28px;width:max-content;will-change:transform;
  padding:0 max(var(--gut),calc((100vw - var(--max)) / 2));
}
.htl.is-pinned .htl__track::before,.htl.is-pinned .htl__track::after{display:none}
.htl.is-pinned .htl__panel{width:min(1000px,80vw);max-height:100%;opacity:.35}
.htl.is-pinned .htl__panel::before{display:none}
.htl.is-pinned .htl__panel.is-active{opacity:1}
/* celular: a mesma rolagem lateral, com cartao e trilha mais compactos */
@media (max-width:900px){
  .htl.is-pinned .htl__track{gap:14px}
  .htl.is-pinned .htl__panel{width:84vw;padding:20px;gap:14px;border-radius:20px}
  .htl.is-pinned .htl__txt{gap:8px}
  .htl.is-pinned .htl__big{font-size:2.4rem}
  .htl.is-pinned .htl__txt p{font-size:.9375rem;line-height:1.5}
  .htl.is-pinned .htl__vis{max-width:320px}
  .htl.is-pinned .htl__node small{display:none}
  .htl.is-pinned .htl__dot{width:34px;height:34px;font-size:1.05rem}
  .htl.is-pinned .htl__rail::before,.htl.is-pinned .htl__fill{left:16px;top:16px}
}
/* do pagamento ao primeiro resumo: tres colunas simples, icone e texto */
.cf-steps{padding-top:0}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);max-width:1040px;margin-inline:auto;text-align:center}
.steps3 li{display:grid;justify-items:center;align-content:start;gap:18px;padding:clamp(26px,3vw,36px) clamp(20px,2.4vw,30px);border:1px solid var(--line-2);border-radius:20px;background:#0a0a0a}
.cf-steps .novid{width:fit-content;max-width:100%;margin-inline:auto}
.steps3__ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--red-text)}
.steps3__ic svg{width:22px;height:22px}
.steps3 p{color:#dcdcdc;font-size:clamp(1.0625rem,1rem + .2vw,1.1875rem);line-height:1.55;max-width:30ch}
@media (max-width:760px){
  .steps3{grid-template-columns:minmax(0,1fr);gap:16px}
}

/* contato */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact__copy{display:grid;gap:clamp(16px,2vw,22px)}
.topics{display:grid;gap:0;border-top:1px solid var(--line)}
.topics li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-weight:500}
.topics .ic{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--red-text);transition:background-color .4s,color .4s,border-color .4s}
.topics li:hover .ic{background:var(--red);color:#fff;border-color:var(--red)}
.topics svg{width:20px;height:20px}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}

.form-panel{position:relative;border:1px solid var(--line-2);border-radius:24px;background:var(--bg-3);padding:clamp(22px,3.4vw,48px);overflow:clip}
.form-panel .bolt{position:absolute;right:18px;top:-18px;width:64px;transform:rotate(12deg)}
.form-panel>*{position:relative}
.form{display:grid;gap:20px;margin-top:clamp(18px,2.4vw,28px)}
.field{display:grid;gap:8px}
.field label{font-weight:600;font-size:.98rem;letter-spacing:.02em}
.field label i{font-style:normal;color:var(--red-text);margin-left:3px}
.field input,.field textarea{
  width:100%;font:inherit;color:#fff;background:#000;border:1px solid var(--line-2);border-radius:12px;padding:15px 16px;min-height:52px;
  transition:border-color .3s;
}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#777}
.field input:hover,.field textarea:hover{border-color:#555}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid #fff;outline-offset:2px;border-color:#fff}
.field [aria-invalid="true"]{border-color:var(--red-text)}
.field .err{color:var(--red-text);font-size:.92rem;min-height:0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__priv{font-size:.92rem;color:var(--muted);max-width:52ch}
.form__ok{display:none;align-items:center;gap:16px;border:1px solid var(--red);border-radius:14px;padding:18px 20px;margin-top:20px;background:#000}
.form__ok.is-show{display:flex}
.form__ok svg{width:30px;height:30px;color:var(--red-text);flex:none}
.form__demo{font-size:.88rem;color:var(--muted);margin-top:12px}
.form__fail{color:var(--red-text);font-size:.98rem}

/* ---------- entrada e saida esfumacadas ligadas a rolagem (main.js: smoke) ----------
   --sv: 0 escondido, 1 visivel | --sd: 1 vem de baixo, -1 sai por cima.
   So opacity, filter e translate: nao briga com transform/transition dos elementos */
.js [data-smoke]{
  opacity:var(--sv,0);
  filter:blur(calc((1 - var(--sv,0)) * 9px));
  translate:0 calc((1 - var(--sv,0)) * var(--sd,1) * 28px);
}
.js [data-smoke].is-clear{filter:none;translate:none}
.js .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0 .06em;margin:-.12em 0 -.06em}
.js .w>span{display:inline-block;transform:translateY(112%);transition:transform .8s var(--ease) calc(var(--d,0s) + var(--wi,0) * .04s)}
.js .is-in .w>span,.js .w.is-in>span{transform:none}
.js [data-bolt]{opacity:0;transform:translate(60px,-60px) rotate(8deg);transition:opacity 1s var(--ease) .2s,transform 1.2s var(--ease) .2s}
.js [data-bolt].is-in{opacity:1;transform:rotate(8deg)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-smoke],.js [data-bolt]{opacity:1;filter:none;translate:none}
  .js [data-bolt]{transform:rotate(8deg)}
  .js .w>span{transform:none}
  .js .acc__a{grid-template-rows:0fr}
  .js .acc__item.is-open .acc__a{grid-template-rows:1fr}
  .js .ba-sec{height:auto}
  .js .ba__sticky{position:relative;height:auto;padding:var(--gap) 0}
  .creds-mq .creds[aria-hidden]{display:none}
  .creds{flex-wrap:wrap}
  .flow *{animation:none!important}
  .flow__base path{stroke-dashoffset:0}
  .flow__scan{display:none}
}

/* ---------- rodape (beam-footer.js): fundo escuro cruzado por um facho de luz vermelho que deriva sozinho e
   se inclina para o mouse; cada letra da palavra gigante pinta o mesmo facho alinhado ao rodape, entao a luz
   parece passar por tras das colunas e atravessar as letras. Adaptado do "Beam Wordmark Footer" (21st.dev). ---------- */
.bwf{
  --bwf-bg:#050202;--bwf-bg-rgb:5,2,2;--bwf-ink:#f2f2f2;--bwf-ink-rgb:242,242,242;--bwf-muted:#9a9a9a;
  --bwf-acc:214,50,31;--bwf-wt:#6a130b;--bwf-wf:#120403;
  --bwf-ang:118deg;--bwf-b:58%;--bwf-px:50%;--bwf-py:50%;--bwf-g:0;--bwf-top:0px;--bwf-bot:100%;
  position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;margin-top:clamp(40px,6vw,90px);
  background:var(--bwf-bg);color:var(--bwf-ink);touch-action:pan-y;
}
.bwf a{color:inherit;text-decoration:none}
.bwf ul{list-style:none;margin:0;padding:0}
.bwf p{margin:0}
.bwf svg{max-width:none;display:block}
.bwf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bwf-rule{position:absolute;left:0;right:0;top:0;height:1px;z-index:3;background:linear-gradient(90deg,rgba(var(--bwf-acc),.15),rgba(var(--bwf-acc),.55) var(--bwf-b),rgba(var(--bwf-acc),.15))}
.bwf-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.bwf-wash{position:absolute;inset:0;background:radial-gradient(120% 90% at 8% 0%,rgba(var(--bwf-acc),.14),transparent 55%),radial-gradient(90% 70% at 92% 8%,rgba(var(--bwf-acc),.09),transparent 60%),linear-gradient(180deg,rgba(var(--bwf-acc),.04),transparent 70%)}
.bwf-bands{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(var(--bwf-acc),.05) 0 1.6cqw,transparent 1.6cqw 4.2cqw);-webkit-mask-image:linear-gradient(100deg,#000 0%,transparent 55%);mask-image:linear-gradient(100deg,#000 0%,transparent 55%);opacity:.9}
.bwf-beam{
  position:absolute;inset:0;filter:blur(calc(1px + 1.6cqw));
  background:
    linear-gradient(var(--bwf-ang),transparent calc(var(--bwf-b) - 11%),rgba(var(--bwf-acc),.10) calc(var(--bwf-b) - 5%),rgba(var(--bwf-acc),.32) var(--bwf-b),rgba(var(--bwf-acc),.08) calc(var(--bwf-b) + 4%),transparent calc(var(--bwf-b) + 9%)),
    linear-gradient(var(--bwf-ang),transparent calc(var(--bwf-b) - 34%),rgba(var(--bwf-acc),.09) calc(var(--bwf-b) - 27%),transparent calc(var(--bwf-b) - 20%));
}
.bwf-glow{position:absolute;inset:0;opacity:var(--bwf-g);background:radial-gradient(circle 26cqw at var(--bwf-px) var(--bwf-py),rgba(var(--bwf-acc),.14),transparent 70%)}
.bwf-grain{position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.bwf-inner{
  position:relative;z-index:2;box-sizing:border-box;max-width:calc(var(--max) + var(--gut) * 2);margin:0 auto;
  padding:clamp(48px,8.5cqw,104px) var(--gut) 0;
  display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,.86fr) minmax(0,.86fr);column-gap:clamp(24px,4cqw,48px);row-gap:44px;
}
.bwf-col{min-width:0}
.bwf-col:nth-child(1){max-width:420px}
.bwf-label{position:relative;display:block;padding-bottom:13px;font:700 .75rem/1 var(--f-title);letter-spacing:.14em;text-transform:uppercase;color:var(--red-text)}
.bwf-label::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(var(--bwf-acc),.55),rgba(var(--bwf-acc),.25));
  transform-origin:0 50%;transform:scaleX(var(--bwf-line,1));transition:transform 1.1s cubic-bezier(.2,.7,.1,1) var(--bwf-d,0ms);
}
.bwf[data-in="false"] .bwf-label::after{--bwf-line:0}
.bwf-fade{transition:opacity .9s ease var(--bwf-d,0ms),translate .9s cubic-bezier(.2,.7,.1,1) var(--bwf-d,0ms)}
.bwf[data-in="false"] .bwf-fade{opacity:0;translate:0 14px}
.bwf .bwf-text{margin-top:18px;max-width:30ch;color:var(--bwf-muted);font-size:1rem;line-height:1.55}
.bwf .bwf-links{margin-top:13px;display:flex;flex-direction:column}
.bwf-link{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 0;font-size:1rem;line-height:1.4;color:rgba(var(--bwf-ink-rgb),.78);transition:color .25s}
.bwf-link-t{display:inline-block;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.bwf-link::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:rgb(var(--bwf-acc));transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.bwf-link svg{width:12px;height:12px;opacity:0;translate:-6px 0;color:rgb(var(--bwf-acc));transition:opacity .25s,translate .35s cubic-bezier(.2,.8,.2,1)}
.bwf-link:hover,.bwf-link:focus-visible,.bwf-link[aria-current="page"]{color:#fff;outline:none}
.bwf-link:hover::before,.bwf-link:focus-visible::before{transform:scaleX(1)}
.bwf-link:hover .bwf-link-t,.bwf-link:focus-visible .bwf-link-t{translate:12px 0}
.bwf-link:hover svg,.bwf-link:focus-visible svg{opacity:1;translate:10px 0}
.bwf-link:focus-visible .bwf-link-t{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(var(--bwf-acc),.8)}
.bwf-word{position:relative;z-index:1;overflow:hidden;margin-top:clamp(28px,7cqw,96px);height:calc(.94 * 22cqw)}
.bwf-word-box{box-sizing:border-box;max-width:calc(var(--max) + var(--gut) * 2);margin:0 auto;padding:0 var(--gut)}
.bwf-word-in{display:inline-flex;white-space:nowrap;font:800 22cqw/1 var(--f-title);letter-spacing:-.045em;color:var(--bwf-wt);user-select:none;-webkit-user-select:none}
.bwf-lw{display:inline-block;translate:0 0;transition:translate 1.25s cubic-bezier(.16,.84,.2,1) var(--bwf-d,0ms)}
.bwf[data-in="false"] .bwf-lw{translate:0 85%}
.bwf-l{
  display:inline-block;cursor:pointer;color:transparent;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;
  background-size:var(--bwf-rw) var(--bwf-rh);background-position:calc(var(--bwf-x) * -1) calc(var(--bwf-y) * -1);
  background-image:
    radial-gradient(circle 22cqw at var(--bwf-px) var(--bwf-py),rgba(var(--bwf-acc),calc(var(--bwf-g) * .85)),transparent 70%),
    linear-gradient(var(--bwf-ang),transparent calc(var(--bwf-b) - 9%),rgba(var(--bwf-acc),.55) calc(var(--bwf-b) - 1.5%),rgba(var(--bwf-acc),.75) var(--bwf-b),rgba(var(--bwf-acc),.2) calc(var(--bwf-b) + 3.5%),transparent calc(var(--bwf-b) + 8%)),
    linear-gradient(180deg,var(--bwf-wt) var(--bwf-top),var(--bwf-wf) var(--bwf-bot));
  transition:transform .5s cubic-bezier(.2,.9,.25,1.2),filter .4s;transform-origin:50% 100%;
}
.bwf-l:hover{transform:translateY(-.045em);filter:brightness(1.35) saturate(1.1)}
.bwf-l.is-hop{animation:bwf-hop .75s cubic-bezier(.2,.8,.2,1)}
@keyframes bwf-hop{0%{transform:translateY(0) scale(1,1)}18%{transform:translateY(.02em) scale(1.06,.9)}45%{transform:translateY(-.14em) scale(.97,1.05)}70%{transform:translateY(.01em) scale(1.02,.97)}100%{transform:translateY(-.045em) scale(1,1)}}
.bwf-foot{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(var(--bwf-bg-rgb),.55) 55%,var(--bwf-bg))}
@container (max-width:760px){
  .bwf-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:40px}
  .bwf-col:nth-child(1){grid-column:1 / -1;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .bwf .bwf-lw,.bwf .bwf-fade,.bwf .bwf-label::after,.bwf .bwf-l,.bwf .bwf-link-t,.bwf .bwf-link svg{transition:none!important;animation:none!important}
  .bwf[data-in="false"] .bwf-lw,.bwf[data-in="false"] .bwf-fade{translate:none;opacity:1}
  .bwf[data-in="false"] .bwf-label::after{--bwf-line:1}
}
/* sobre: expertises de cada mentor passando no card */
.duo__body{min-width:0}
.creds-mq--sm{margin-top:4px}
.creds-mq--sm .creds{gap:6px;padding-right:6px;animation-duration:24s}
.creds-mq--sm .creds li{padding:6px 12px;font-size:.8125rem;color:#e2e2e2}
@media (prefers-reduced-motion: reduce){.creds-mq--sm .creds li{white-space:normal}}