/* ============================================================
   TSN Sistemas — site institucional (camada mobile-first)
   Base = celular (até 767px). min-width 768 = tablet, 1024 = desktop.
   Tokens de cor/tipo/raio vêm do design system inline (index.html).
   ============================================================ */
:root{
  --sec-pad:56px;                      /* respiro vertical por zona, mobile */
  --bg-panel:color-mix(in oklab,var(--accent) 24%,#0B0C0E);       /* painel escuro azul-marinho, deriva do accent */
  --bg-panel-ink:#EEF1F6;
  --bg-gradient-panel:radial-gradient(70% 80% at 85% 0%, color-mix(in oklab,var(--accent) 38%,transparent) 0%, transparent 60%), var(--bg-panel);
  --line-accent:color-mix(in oklab,var(--accent) 55%,transparent);
  --wash-soft:color-mix(in oklab,var(--accent) 6%,var(--bg));
  --dot:color-mix(in oklab,var(--text) 9%,transparent);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);   /* saída expo: começa rápido, assenta devagar */
  --dur:.7s;
  --blur-in:8px;                        /* desfoque inicial do reveal */
  --spot:color-mix(in oklab,var(--accent) 14%,transparent); /* brilho que segue o cursor nos cards */
  --r-panel:36px;
}
html{scroll-behavior:smooth;color-scheme:light only}
[data-theme="dark"]{color-scheme:dark only}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- ambiente único da página (camada fixa, sussurro) ---------- */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:22px 22px;
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.env::after{content:"";position:absolute;width:70vmax;height:70vmax;left:-20vmax;top:-10vmax;border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklab,var(--accent) 9%,transparent) 0%,transparent 65%);
  animation:envdrift 90s ease-in-out infinite alternate}
@keyframes envdrift{to{transform:translate(45vw,35vh) scale(1.15)}}

/* ---------- header: ajustes pro site (o markup base é o do design system) ---------- */
/* o header fica sobre o hero, sem fundo nem risco de divisória: o fundo do
   hero passa por baixo dele (position:absolute no topo, o hero ganha o respiro
   de --topbar-h). Assim que a rolagem sai do topo (JS, estado .is-scrolled)
   ele vira fixo, com o fundo sólido do tema — branco no claro, preto no
   escuro, sempre via --bg. O !important vence o "background" inline que o
   editor pode gravar no elemento (recipe de fundo). */
.topbar{position:absolute;top:0;left:0;right:0;width:100%;background:transparent!important;
  border-bottom:0!important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
  transition:background .25s ease,box-shadow .25s ease}
.topbar__in{flex-wrap:nowrap;padding:10px var(--sp-4);position:relative}
/* Estado fixo: entra assim que a rolagem sai do topo. Fundo sólido do tema
   (branco no claro, preto no escuro — vem de --bg), sem risco de divisória,
   só uma sombra leve pra descolar do conteúdo. */
.topbar.is-scrolled{position:fixed!important;background:var(--bg)!important;box-shadow:var(--shadow-2);
  animation:topbar-in .3s var(--ease)}
.topbar.is-scrolled .topbar__in{padding:8px var(--sp-4)}
@keyframes topbar-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
:root{--topbar-h:64px}
[id]{scroll-margin-top:var(--topbar-h)}
@media (prefers-reduced-motion:reduce){.topbar.is-scrolled{animation:none;transition:none}}
.topbar__logo{text-decoration:none;color:var(--text);flex-shrink:0}
.topbar__logo .logo-mark{width:26px;height:26px;color:var(--text);flex-shrink:0}
.topbar__logo .logo-live[hidden]{display:none}
/* logo que se forma: o traço central é desenhado (dasharray) e o PNG real da marca recorta o resultado */
.logo-draw{color:var(--text);display:block;overflow:visible;
  -webkit-mask:url(../uploads/9997ab73-abd0-4725-a14d-b7e5b27c9452.png) center/contain no-repeat;
  mask:url(../uploads/9997ab73-abd0-4725-a14d-b7e5b27c9452.png) center/contain no-repeat}
.logo-draw .ld{stroke-dasharray:var(--len,1300);stroke-dashoffset:var(--len,1300)}
.logo-draw.is-drawn .ld{stroke-dashoffset:0;transition:stroke-dashoffset var(--ld-dur,.55s) cubic-bezier(.4,0,.2,1) var(--ld-delay,0s)}
.logo-draw.is-drawn .ld-1{--ld-dur:.7s;--ld-delay:.1s}
.logo-draw.is-drawn .ld-2{--ld-dur:.55s;--ld-delay:.62s}
.logo-draw.is-drawn .ld-3{--ld-dur:.3s;--ld-delay:1.05s}
.logo-draw.is-drawn .ld-4{--ld-dur:.3s;--ld-delay:1.2s}
.logo-draw.is-drawn{animation:logo-settle .5s ease-out 1.35s both}
@keyframes logo-settle{from{color:var(--accent)}to{color:var(--text)}}
/* header: logo pronta, sem traço animado (a animação vive só no page loader e na seção A marca) */
.logo-draw.is-static{color:var(--text);animation:none}
.logo-draw.is-static .ld{stroke-dashoffset:0;transition:none}
@media (prefers-reduced-motion:reduce){
  .logo-draw .ld{stroke-dashoffset:0;transition:none}
  .logo-draw.is-drawn{animation:none}
}
.navtoggle{margin-left:auto;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:var(--bg-card);cursor:pointer;display:grid;place-items:center;padding:0;color:var(--text);position:relative;z-index:75}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s;position:relative}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0}
.navtoggle span::before{top:-6px}.navtoggle span::after{top:6px}
.navtoggle[aria-expanded="true"] span{background:transparent}
.navtoggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* menu mobile/tablet: painel de tela cheia entrando da direita, estilo Stripe */
.navscrim{position:fixed;inset:0;z-index:65;background:color-mix(in oklab,#000 55%,transparent);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
.navscrim.is-open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
.navlinks{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:70;margin:0;width:min(88vw,400px);height:100dvh;
  flex-direction:column;align-items:stretch;justify-content:center;gap:6px;
  padding:var(--sp-9) var(--sp-6);background:var(--bg-card);border-bottom:0;border-left:1px solid var(--line);box-shadow:var(--shadow-3);
  transform:translateX(100%);opacity:1;visibility:hidden;transition:transform .38s var(--ease),visibility 0s .38s}
.navlinks.is-open{transform:translateX(0);visibility:visible;transition:transform .38s var(--ease),visibility 0s}
.navlinks a{font-size:19px;padding:14px 16px;border-radius:var(--r-sm)}
.navlinks a.is-active{color:var(--accent);background:var(--accent-wash)}
.navlinks .btn{margin-top:var(--sp-3);justify-content:center;color:var(--accent-ink)}
.navlinks .btn:hover{color:var(--accent-ink);background:var(--accent)}
html.nav-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .navlinks,.navscrim{transition:none}
}

/* ---------- zonas ---------- */
.s{padding:var(--sec-pad) 0;position:relative}
.s--alt{background:var(--bg-alt)}
.s--wash{background:var(--wash-soft)}
.wrap{position:relative;z-index:1}

/* ---------- costuras entre seções: gradiente disfarçando o corte de cor ----------
   cada seção "recebe" o tom de saída da anterior no topo e dissolve pra
   transparente, revelando o próprio fundo — a marca de troca de seção some.
   .wrap já ganhou z-index acima pra o conteúdo ficar sempre por cima disso. */
.s--alt::before,.mec::before,.s--wash::before,.seg::before,.ct::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(64px,10vw,140px);pointer-events:none}
.s--alt::before{background:linear-gradient(to bottom,var(--hero-end,var(--accent-wash)) 0%,transparent 100%)}
.mec::before{background:linear-gradient(to bottom,var(--bg-alt) 0%,transparent 100%)}
.s--wash::before{background:linear-gradient(to bottom,var(--bg) 0%,transparent 100%)}
.seg::before{background:linear-gradient(to bottom,var(--wash-soft) 0%,transparent 100%)}
.ct::before{background:linear-gradient(to bottom,var(--bg) 0%,transparent 100%)}
footer.site{position:relative}
.s__head{max-width:62ch;margin-bottom:var(--sp-6)}
.s__head .lead{margin-bottom:0}
.h2{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.03em;font-weight:800;margin:0 0 var(--sp-4)}
.h2 .hl{color:var(--accent)}
.hero-copy{font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.035em;font-weight:800;margin:0 0 var(--sp-5)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);filter:blur(var(--blur-in));
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease-out),filter var(--dur) var(--ease)}
.rv.is-in{opacity:1;transform:none;filter:none}
/* foto dentro de um bloco revelado: assenta de um leve zoom */
.rv .photo img{transform:scale(1.07);transition:transform 1.5s var(--ease-out)}
.rv.is-in .photo img{transform:none}
.rv--late{transition-delay:.18s}
.stagger > *{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity .6s var(--ease),transform .6s var(--ease-out),filter .6s var(--ease)}
.stagger.is-in > *{opacity:1;transform:none;filter:none}
.stagger.is-in > :nth-child(2){transition-delay:.08s}.stagger.is-in > :nth-child(3){transition-delay:.16s}
.stagger.is-in > :nth-child(4){transition-delay:.24s}.stagger.is-in > :nth-child(5){transition-delay:.32s}
.stagger.is-in > :nth-child(6){transition-delay:.40s}.stagger.is-in > :nth-child(7){transition-delay:.48s}
.draw path,.draw circle,.draw polyline{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.4s var(--ease)}
.draw.is-in path,.draw.is-in circle,.draw.is-in polyline{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .rv,.stagger > *{opacity:1;transform:none;filter:none;transition:none}
  .rv .photo img{transform:none;transition:none}
  .draw path,.draw circle,.draw polyline{stroke-dashoffset:0;transition:none}
  .env::after{animation:none}
}

/* ---------- HERO ---------- */
/* Hero ocupa a tela inteira na entrada (100svh = altura visível real no
   mobile, sem a barra do navegador cortar); o conteúdo fica centralizado
   verticalmente e o padding continua garantindo respiro sob o header. */
.hero{position:relative;overflow:clip;background:var(--bg-gradient-hero);padding:calc(var(--topbar-h) + var(--sec-pad) - 8px) 0 var(--sec-pad);
  --hero-pad-b:var(--sec-pad);
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
.hero__in{display:grid;gap:var(--sp-6);width:100%}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px}
.hero .eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.hero__cta{display:flex;flex-direction:column;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-5)}
.hero__cta .btn{justify-content:center}
.hero__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero__tags li{font-size:12.5px;font-weight:600;color:var(--text-muted);padding:5px 11px;border:1px solid var(--line);border-radius:var(--r-pill);background:color-mix(in oklab,var(--bg-card) 70%,transparent)}
.hero__media{position:relative}
.hero__photo{aspect-ratio:4/3;box-shadow:var(--shadow-3);will-change:transform}
.hero__photo img{object-position:60% 30%}
.hero__card{position:relative;margin:calc(-1 * var(--sp-6)) var(--sp-3) 0;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);display:flex;gap:12px;align-items:flex-start;background:color-mix(in oklab,var(--bg-card) 94%,transparent);backdrop-filter:blur(8px)}
.hero__card svg{flex-shrink:0;color:var(--accent)}
.hero__card b{display:block;font-size:14.5px;margin-bottom:2px}
.hero__card span{font-size:13.5px;color:var(--text-2);line-height:1.45}
/* ---------- HERO · fundo azul da marca + recorte da equipe ----------
   O fundo da hero é a arte azul com a marca d'água da logo (mesma arte em
   qualquer tema, claro ou escuro) — por isso o TEXTO da hero é sempre claro:
   os tokens de tinta são sobrescritos só dentro de .hero, sem mexer no tema
   global do resto da página. A foto recortada da equipe entra à direita,
   por cima da marca d'água. */
:root{
  --bg-hero-image:url("../uploads/28bd6646-6e82-4edd-9239-f55499370515.png");
  /* A arte do PNG é azul, mas a COR dela segue a paleta: .hero::before pinta a
     hero com --hero-tint (= --accent) em mix-blend-mode:color — a luminosidade e
     a marca d'água da arte ficam, só o matiz troca (azul na 1, laranja na 2,
     verde na 3). Todos os tons "do azul" abaixo derivam do accent pelo mesmo motivo. */
  --hero-tint:var(--accent);
  --hero-blue:color-mix(in oklab,var(--accent) 68%,#000);  /* tom médio da arte, pra costuras e detalhes */
  --hero-ink:#F4F6F8;
  --hero-ink-2:color-mix(in oklab,var(--accent-2) 24%,#FFFFFF);
  --hero-ink-muted:color-mix(in oklab,var(--accent-2) 50%,#FFFFFF);
  --hero-line:rgba(255,255,255,.22); --hero-line-strong:rgba(255,255,255,.42);
  --hero-glass:color-mix(in oklab,color-mix(in oklab,var(--accent) 26%,#000) 66%,transparent); /* card/chips em vidro escuro sobre a cor da hero */
}
.hero{background:var(--bg-hero-image) right center/cover no-repeat,var(--bg-gradient-hero);isolation:isolate;
  --text:var(--hero-ink);--text-2:var(--hero-ink-2);--text-muted:var(--hero-ink-muted);
  --line:var(--hero-line);--line-strong:var(--hero-line-strong);--bg-card:var(--hero-glass);--bg:var(--hero-blue);
  color:var(--text)}
.hero .lead,.hero p{color:var(--text-2)}
/* camada de tinta da paleta sobre a arte: fica atrás do conteúdo (.hero__in z-index:1)
   e antes do degradê de saída (.hero::after); isolation:isolate na .hero impede o
   blend de vazar pro fundo fixo (.env) atrás dela */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--hero-tint);mix-blend-mode:color}
.hero__aurora{opacity:.35;mix-blend-mode:screen}
.hero__card{border:1px solid var(--hero-line);color:var(--hero-ink)}
.hero__card b{color:var(--hero-ink)}
.hero__tags li{color:var(--hero-ink-2)}
.hero .btn--ghost:hover{color:var(--accent-2);border-color:var(--accent-2)}
/* A foto é um PNG recortado (3600×2025) com margem transparente dos lados: as
   pessoas ocupam x 20%→82% e y 2%→100% do arquivo. A caixa tem EXATAMENTE essa
   proporção (2229×1981, mais 4% de folga pra sombra) e o object-position cai no centro delas — nada
   das laterais é cortado, e sem a margem vazia a foto fica bem maior. Só o pé
   da imagem dissolve (mask), pra o corte na cintura sumir no degradê. */
.hero__people{position:relative;aspect-ratio:2400/1981;width:120%;margin:0 -10%;will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.hero__people::before{content:"";position:absolute;inset:auto 8% 0 8%;height:70%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.22) 0%,transparent 70%);filter:blur(28px);pointer-events:none}
.hero__people img{position:relative;width:100%;height:100%;object-fit:cover;object-position:50.8% 100%;
  filter:drop-shadow(0 30px 40px rgba(3,10,50,.55))}
/* costura hero → próxima seção: o próprio pé da hero dissolve pra cor da seção de
   baixo (--bg-alt, a mesma do #dor) em vários degraus, então no encontro as duas
   cores já são iguais e não existe linha de troca. Fica atrás do conteúdo
   (.hero__in tem z-index:1); a máscara da foto revela esse degradê por baixo. */
:root{--hero-fade:clamp(160px,30vh,340px)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hero-fade);z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,
    color-mix(in oklab,var(--bg-alt) 6%,transparent) 18%,
    color-mix(in oklab,var(--bg-alt) 24%,transparent) 42%,
    color-mix(in oklab,var(--bg-alt) 58%,transparent) 66%,
    color-mix(in oklab,var(--bg-alt) 88%,transparent) 86%,
    var(--bg-alt) 100%)}
.hero + .s--alt::before{display:none}
/* o convite "Role" fica dentro do degradê claro: tinta do azul da arte, não a clara */
.hero .hero__scroll{color:var(--hero-blue)}
.hero .hero__scroll:hover{color:var(--accent)}
.hero .hero__scroll i::after{background:var(--bg-alt)}
/* paleta azul sobre a arte azul: o destaque do título e o botão principal ficam
   claros (tinta da hero + accent-2), senão somem no fundo */
.hero .hero-copy .hl,.hero .hero-copy .hl .w{background:none;color:var(--accent-2);-webkit-text-fill-color:var(--accent-2)}
.hero .btn--primary{background:var(--hero-ink);color:var(--hero-blue)}
.hero .btn--primary:hover{box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.hero .btn--primary::before{background:linear-gradient(100deg,transparent 0%,color-mix(in oklab,var(--hero-blue) 22%,transparent) 50%,transparent 100%)}
.topbar:not(.is-scrolled) .navlinks .btn{background:var(--hero-ink);color:var(--hero-blue)}
.topbar:not(.is-scrolled) .navlinks .btn:hover{background:var(--hero-ink);color:var(--hero-blue)}
/* ---------- HERO · formulário de e-mail (card de vidro sobre o azul) ----------
   mesmo sistema de card do site (raio, borda, sombra); só o vidro é da hero. */
.hero__signup{margin:var(--sp-5) 0 0;padding:var(--sp-4) var(--sp-5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-color:var(--hero-line-strong);box-shadow:var(--shadow-3);position:relative;isolation:isolate;overflow:hidden;
  color:var(--hero-ink)}
.hero__signup::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(240px circle at 10% 0%,color-mix(in oklab,var(--hero-ink) 14%,transparent),transparent 70%)}
.hero__signup h2{font-size:18px;margin:0 0 4px;color:var(--hero-ink);letter-spacing:-.02em}
.hero__signup > p{font-size:var(--fs-sm);margin:0 0 var(--sp-4);color:var(--hero-ink-2)}
.hero__signup .field{margin-bottom:0}
.hero__signup .field > label{color:var(--hero-ink-2)}
.hero__signup .input{background:color-mix(in oklab,#000 24%,transparent);border-color:var(--hero-line-strong);color:var(--hero-ink)}
.hero__signup .input::placeholder{color:var(--hero-ink-muted)}
.hero__signup .input:focus{border-color:var(--hero-ink);box-shadow:0 0 0 3px color-mix(in oklab,var(--hero-ink) 26%,transparent)}
.hero__signup .input:user-invalid{border-color:#FFB4B8}
.hero__signup__row{display:flex;flex-direction:column;gap:var(--sp-3)}
.hero__signup__row .btn{justify-content:center;white-space:nowrap}
.hero__signup .cap{display:block;margin-top:var(--sp-3);color:var(--hero-ink-muted)}
.hero__signup .cap a{color:var(--hero-ink);font-weight:600;text-underline-offset:3px}
.hero__signup .cap a:hover{color:var(--accent-2)}
.hero__signup .err{margin:var(--sp-2) 0 0;color:#FFB4B8}
.hero__signup .alert{margin:var(--sp-3) 0 0;border-color:color-mix(in oklab,var(--hero-ink) 40%,transparent);background:color-mix(in oklab,var(--hero-ink) 12%,transparent);color:var(--hero-ink)}
.hero__signup .alert b{color:var(--hero-ink)}
.hero__signup .alert[hidden],.hero__signup .err[hidden]{display:none}
.hero__signup.is-sent .hero__signup__row,.hero__signup.is-sent > p,.hero__signup.is-sent .cap{display:none}
.hero__tags{margin-top:var(--sp-5)}
/* header transparente sobre a hero: tinta clara enquanto não rolou; ao rolar
   volta pros tokens do tema (fundo sólido). O painel do menu mobile fica de
   fora — ele tem fundo próprio e continua nos tokens do tema. */
.topbar:not(.is-scrolled) .topbar__logo,.topbar:not(.is-scrolled) .topbar__logo .logo-mark,
.topbar:not(.is-scrolled) [data-ls-pages]{color:var(--hero-ink)}
.topbar:not(.is-scrolled) .topbar__logo span span{color:var(--hero-ink-muted)!important}
.topbar:not(.is-scrolled) .navtoggle{color:var(--hero-ink);border-color:var(--hero-line-strong);background:var(--hero-glass)}
@media (min-width:768px){
  .topbar:not(.is-scrolled) .navlinks a:not(.btn){color:var(--hero-ink-2)}
  .topbar:not(.is-scrolled) .navlinks a:not(.btn):hover{color:var(--hero-ink)}
  .topbar:not(.is-scrolled) .navlinks a.is-active:not(.btn){color:var(--hero-ink);background:rgba(255,255,255,.12)}
}

/* ---------- DOR ---------- */
.dor__grid{display:grid;gap:var(--sp-6)}
.dor__photo{aspect-ratio:16/11}
.pains{list-style:none;margin:0 0 var(--sp-5);padding:0;display:grid;gap:10px}
.pains li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-card);
  font-size:15px;color:var(--text-2);transition:border-color .2s,transform .2s}
.pains li:hover{border-color:var(--accent-2);transform:translateX(3px)}
.pains svg{flex-shrink:0;color:var(--accent);margin-top:1px}
.dor__punch{border-left:3px solid var(--accent);padding:6px 0 6px var(--sp-4);margin:0;font-size:17px;font-weight:600;color:var(--text);line-height:1.45;max-width:46ch}
.dor__punch em{font-style:normal;color:var(--accent)}

/* ---------- MECANISMO ---------- */
.mec{background:var(--bg);overflow:clip}
.mec__grid{display:grid;gap:var(--sp-6)}
.mec__intro .h2{max-width:20ch}
.mec__flow{display:flex;flex-wrap:wrap;gap:6px 4px;margin-top:var(--sp-4);font-family:var(--ff-mono);font-size:12px;color:var(--text-muted);letter-spacing:.06em}
.mec__flow b{color:var(--accent);font-weight:600}
.steps{position:relative}
.steps__list{list-style:none;margin:0;padding:0 0 0 44px;display:grid;gap:var(--sp-5)}
.steps__rail{position:absolute;left:12px;top:0;bottom:0;width:20px;height:100%;overflow:visible;color:var(--accent)}
.steps__rail path{fill:none;stroke-width:2.5;stroke-linecap:round}
.steps__rail .bg{stroke:var(--line-strong)}
.steps__rail .fg{stroke:currentColor;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0));
  transition:stroke-dashoffset .15s linear}
.step{position:relative;padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-card);box-shadow:var(--shadow-1);
  transition:border-color .25s,box-shadow .25s,transform .25s}
.step::before{content:"";position:absolute;left:-38px;top:30px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2.5px solid var(--line-strong);transition:.3s}
.step.is-on{border-color:var(--accent);box-shadow:var(--shadow-2)}
.step.is-on::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 18%,transparent)}
.step__top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.step__n{font-family:var(--ff-mono);font-size:13px;color:var(--accent);letter-spacing:.08em}
.step__ico{width:40px;height:40px;border-radius:12px;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;margin-left:auto}
.step__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.step h3{margin:0 0 6px;font-size:19px;letter-spacing:-.02em}
.step p{margin:0;font-size:15px}
.step p + p{margin-top:8px;color:var(--text-muted);font-size:14px}

/* ---------- TRANSFORMAR ---------- */
.tr__grid{display:grid;gap:var(--sp-4)}
.tr{display:grid;gap:12px;padding:var(--sp-5);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-card);
  position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.tr::after{content:"";position:absolute;inset:auto -40px -40px auto;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklab,var(--accent) 16%,transparent),transparent 70%);opacity:0;transition:opacity .3s}
.tr:hover,.tr:focus-within{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--accent-2)}
.tr:hover::after{opacity:1}
.tr__from,.tr__to{position:relative}
.tr__lbl{display:block;font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.tr__from .tr__lbl{color:var(--text-muted)}
.tr__from p{margin:0;color:var(--text-muted);font-size:14.5px;text-decoration:line-through;text-decoration-color:color-mix(in oklab,var(--text-muted) 45%,transparent);text-decoration-thickness:1px}
.tr__arrow{width:26px;height:26px;color:var(--accent)}
.tr__arrow svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tr__to .tr__lbl{color:var(--accent)}
.tr__to p{margin:0;font-weight:600;color:var(--text);font-size:16px;line-height:1.45}

/* ---------- SEGMENTOS ---------- */
.seg{overflow:clip}
.seg__track{display:flex;gap:var(--sp-4);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--sp-5) var(--sp-4);
  margin:0 calc(-1 * var(--sp-5));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.seg__track::-webkit-scrollbar{display:none}
.segc{flex:0 0 78%;scroll-snap-align:start;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-card);border:1px solid var(--line);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s}
.segc:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.segc .photo{aspect-ratio:4/3}
.segc .photo img{transition:transform .8s var(--ease)}
.segc:hover .photo img{transform:scale(1.04)}
.segc__body{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.segc__body h3{margin:0 0 6px;font-size:18px}
.segc__body p{margin:0;font-size:14.5px}
.segc--org{background:var(--bg-gradient-panel);color:var(--bg-panel-ink);border-color:transparent;justify-content:flex-end;min-height:280px}
.segc--org .segc__ico{padding:var(--sp-5) var(--sp-5) 0;color:var(--accent-2)}
.segc--org .segc__ico svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.segc--org p{color:color-mix(in oklab,var(--bg-panel-ink) 78%,transparent)}
.seg__hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);margin-top:4px}
.seg__hint svg{width:16px;height:16px}

/* ---------- PAINEL ESCURO com curva da referência ---------- */
.panel-wrap{padding:var(--sec-pad) 0 0;background:var(--bg)}
.panel{position:relative;background:var(--bg-gradient-panel);color:var(--bg-panel-ink);
  border-radius:var(--r-panel) var(--r-panel) 0 0;padding:calc(var(--sec-pad) * 1.7) 0;
  min-height:82svh;display:flex;flex-direction:column;justify-content:center;
  box-shadow:inset 0 1px 0 var(--line-accent),inset 1px 0 0 var(--line-accent),inset -1px 0 0 var(--line-accent)}
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid var(--line-accent);border-bottom:0;
  mask-image:linear-gradient(180deg,#000 0,#000 120px,transparent 300px);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 120px,transparent 300px)}
.panel .eyebrow{color:var(--accent-2)}
.panel .h2{color:#fff}
.panel .lead{color:color-mix(in oklab,var(--bg-panel-ink) 80%,transparent)}
.needs{list-style:none;margin:var(--sp-6) 0;padding:0;display:grid;gap:8px}
.needs li{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--r-md);
  background:color-mix(in oklab,#fff 6%,transparent);border:1px solid color-mix(in oklab,#fff 10%,transparent);font-size:15.5px;font-weight:500;
  transition:background .25s,border-color .25s,transform .25s}
.needs li:hover{background:color-mix(in oklab,#fff 10%,transparent);border-color:var(--line-accent);transform:translateX(4px)}
.needs svg{flex-shrink:0;width:22px;height:22px;color:var(--accent-2);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.panel__close{display:grid;gap:var(--sp-4);align-items:center}
.panel__close .hero-copy{font-size:clamp(28px,7vw,44px);color:#fff;margin:0}
.panel__close .btn--primary{justify-content:center}
.panel__grain{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- SOBRE ---------- */
.sobre{background:var(--bg)}
.sobre__grid{display:grid;gap:var(--sp-6)}
.sobre__photo{aspect-ratio:16/11}
.pillars{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:10px}
.pillars li{padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg-card)}
.pillars b{display:block;font-size:14.5px;margin-bottom:2px}
.pillars span{font-size:13.5px;color:var(--text-2);line-height:1.45}
.vision{margin-top:var(--sp-6);padding:var(--sp-5);border-radius:var(--r-lg);background:var(--bg-inset);border:1px solid var(--line)}
.vision__path{width:100%;height:auto;color:var(--accent);margin:8px 0 4px;overflow:visible}
.vision__path path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vision__path circle{fill:var(--bg-card);stroke:currentColor;stroke-width:2.5}
.vision__labels{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;font-size:9.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text-2);text-align:center;line-height:1.25}
.vision__labels span:last-child{color:var(--accent)}

/* ---------- A MARCA: a logo grande se forma ao entrar na tela ---------- */
.marca{background:var(--bg)}
.marca__grid{display:grid;gap:var(--sp-6)}
.marca__steps{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:10px;counter-reset:none}
.marca__steps li{padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg-card)}
.marca__steps b{display:block;font-size:14.5px;margin-bottom:2px;font-family:var(--ff-mono);font-weight:600;letter-spacing:.02em;color:var(--accent)}
.marca__steps span{font-size:13.5px;color:var(--text-2);line-height:1.45}
.marca__actions{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-5)}
.marca__stage{--bg-gradient-marca:radial-gradient(60% 60% at 50% 46%,color-mix(in oklab,var(--accent) 16%,transparent) 0%,transparent 72%),var(--bg-inset);
  position:relative;display:grid;place-items:center;gap:var(--sp-4);padding:var(--sp-7) var(--sp-5);
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-gradient-marca);overflow:clip;isolation:isolate}
.marca__stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,color-mix(in oklab,var(--text) 14%,transparent) .8px,transparent .9px);background-size:14px 14px;opacity:.55;
  -webkit-mask:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);mask:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%)}
.marca__logo{width:min(56vw,260px);height:auto;aspect-ratio:1;color:var(--text)}
.marca__logo.is-drawn .ld-1{--ld-dur:1s;--ld-delay:.1s}
.marca__logo.is-drawn .ld-2{--ld-dur:.75s;--ld-delay:.85s}
.marca__logo.is-drawn .ld-3{--ld-dur:.4s;--ld-delay:1.45s}
.marca__logo.is-drawn .ld-4{--ld-dur:.4s;--ld-delay:1.65s}
.marca__logo.is-drawn{animation:logo-settle .6s ease-out 1.9s both}
.marca__cap{margin:0;text-align:center;color:var(--text-muted)}

/* ---------- CONTATO ---------- */
.ct{background:var(--bg-gradient-band)}
.ct__grid{display:grid;gap:var(--sp-6)}
.ct__next{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:12px;counter-reset:nx}
.ct__next li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--text-2)}
.ct__next li::before{counter-increment:nx;content:counter(nx,decimal-leading-zero);font-family:var(--ff-mono);font-size:12px;color:var(--accent);padding-top:3px;flex-shrink:0}
.ct__form{padding:var(--sp-5);box-shadow:var(--shadow-3)}
.ct__form .field:last-of-type{margin-bottom:var(--sp-5)}
.ct__form .btn{width:100%;justify-content:center}
.ct__row{display:grid;gap:0}
.ct__ok{display:none;text-align:center;padding:var(--sp-5) 0}
.ct__ok svg{width:48px;height:48px;color:var(--accent);margin:0 auto var(--sp-3);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ct__form.is-sent form{display:none}
.ct__form.is-sent .ct__ok{display:block}
.ct__priv{font-size:12.5px;color:var(--text-muted);margin:var(--sp-3) 0 0;text-align:center}

/* ---------- FOOTER ---------- */
.footer__top{display:flex;flex-direction:column;gap:var(--sp-5);align-items:flex-start}
.footer__brand{display:flex;align-items:center;gap:10px}
.footer__ctl{gap:var(--sp-2);flex-wrap:wrap}
.footer__ctl .swbtn{border-color:#2A2E35;background:#15171B;color:#C7CCD3}
.footer__ctl .swbtn:hover{border-color:var(--accent)}
.footer__ctl .swbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.footer__contact{font-style:normal;display:flex;flex-direction:column;gap:6px;margin-top:var(--sp-5);font-size:14px;color:#9AA3AE}
.footer__contact a{transition:color .15s}
.footer__legal{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid #22262C}
.footer__legal p{margin:0;font-size:12.5px;color:#8A929C}

/* ---------- divisor pro anexo de identidade ---------- */
.anexo-hd{padding:var(--sp-6) 0;background:var(--bg-alt);border-top:1px solid var(--line)}
.anexo-hd .wrap{display:flex;flex-direction:column;gap:6px}
.anexo-hd .cap{max-width:60ch}

/* ============================================================
   MENU MOBILE (até 767px): painel gaveta vira tela cheia
   ============================================================ */
@media (max-width:767px){
  .navscrim{display:none}
  .navlinks{width:100vw;max-width:100vw;height:100dvh;border-left:0;box-shadow:none;
    background:var(--bg-gradient-hero);justify-content:flex-start;gap:0;
    padding:calc(var(--sp-9) + env(safe-area-inset-top,0px)) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom,0px))}
  .navlinks::before{content:"Menu";display:block;font-family:var(--ff-mono);font-size:12px;color:var(--text-muted);
    letter-spacing:.08em;text-transform:uppercase;margin:0 4px var(--sp-4)}
  .navlinks a{font-size:23px;font-weight:800;letter-spacing:-.02em;padding:18px 6px;border-radius:0;
    border-bottom:1px solid var(--line);display:flex;align-items:center;
    opacity:0;transform:translateY(10px);transition:opacity .3s var(--ease),transform .3s var(--ease),color .15s,background .15s}
  .navlinks a:hover,.navlinks a:active{background:var(--bg-alt)}
  .navlinks a.btn{border-bottom:0}
  .navlinks.is-open a{opacity:1;transform:none}
  .navlinks.is-open a:nth-child(2){transition-delay:.06s}
  .navlinks.is-open a:nth-child(3){transition-delay:.12s}
  .navlinks.is-open a:nth-child(4){transition-delay:.18s}
  .navlinks.is-open a:nth-child(5){transition-delay:.24s}
  .navlinks .btn{margin-top:var(--sp-6);padding:16px 22px;font-size:16px;justify-content:center}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .navlinks a{transition-delay:0s!important}
}

/* ============================================================
   TABLET (768px+)
   ============================================================ */
@media (min-width:768px){
  :root{--sec-pad:80px}
  .topbar__in{padding:12px var(--sp-5)}
  .footer__top{flex-direction:row;justify-content:space-between;align-items:center}
  .hero__in{grid-template-columns:1.1fr .9fr;align-items:center;gap:var(--sp-7)}
  .hero__cta{flex-direction:row}
  .hero__card{margin:calc(-1 * var(--sp-6)) var(--sp-5) 0 calc(-1 * var(--sp-4))}
  .hero__signup__row{flex-direction:row;align-items:flex-end}
  .hero__signup__row .field{flex:1}
  /* foto maior, apoiada no pé da hero: a cintura (já mascarada) some dentro do
     degradê de saída; o card flutua por cima, no canto de baixo à esquerda */
  .hero__in{flex:1 0 auto}   /* a grade ocupa a altura toda da hero: texto centrado, foto no pé */
  /* a foto cresce até a ALTURA da coluna de copy (não mais até a largura da
     coluna): .hero__media estica na linha da grade (altura = coluna de texto +
     o padding de baixo, que ela invade) e vira container de tamanho; a foto é
     absoluta, apoiada no pé, com largura derivada da altura (100cqh × proporção
     do recorte). Limite: nunca mais larga que a coluna + sangria até a borda da
     tela + uma invasão controlada no vão da grade, pra não cobrir o formulário. */
  .hero{--hero-bleed:calc(max(0px,(100vw - var(--maxw)) / 2) + var(--sp-5));--hero-overlap:calc(var(--sp-8) * 3)}
  .hero__media{align-self:stretch;margin-bottom:calc(-1 * var(--hero-pad-b));min-height:0;container-type:size}
  .hero__people{position:absolute;bottom:0;right:calc(-1 * var(--hero-bleed));margin:0;
    width:calc(100% + var(--hero-bleed) + var(--hero-overlap));
    width:min(calc(106cqh * 2400 / 1981),calc(100% + var(--hero-bleed) + var(--hero-overlap)))}
  .hero__card{position:absolute;left:0;bottom:calc(var(--hero-pad-b) + var(--sp-4));margin:0;max-width:330px;z-index:2}
  .dor__grid{grid-template-columns:1fr 1fr;align-items:center}
  .dor__photo{aspect-ratio:4/5}
  .tr__grid{grid-template-columns:1fr 1fr}
  .segc{flex-basis:44%}
  .needs{grid-template-columns:1fr 1fr}
  .panel{min-height:78svh}
  .panel__close{grid-template-columns:1fr auto}
  .sobre__grid{grid-template-columns:1fr 1fr;align-items:start}
  .pillars{grid-template-columns:1fr 1fr}
  .marca__grid{grid-template-columns:1fr 1fr;align-items:center}
  .marca__steps{grid-template-columns:1fr 1fr}
  .marca__actions{flex-direction:row}
  .ct__grid{grid-template-columns:1fr 1fr;align-items:start}
  .ct__row{grid-template-columns:1fr 1fr;gap:0 var(--sp-4)}
  .steps__list{padding-left:56px}
  .vision__labels{font-size:11px;letter-spacing:.06em}
  .step::before{left:-50px}
  .steps__rail{left:18px}
}

/* ---------- menu, só tablet (768–1023px): vira barra horizontal em
   vez do painel gaveta de celular, que sobrava largura à toa aqui ---------- */
@media (min-width:768px) and (max-width:1023px){
  .navtoggle{display:none}
  .navscrim{display:none}
  .navlinks{position:static;height:auto;width:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;justify-content:flex-end;gap:4px;padding:0;
    background:none;border:0;box-shadow:none;
    transform:none;opacity:1;visibility:visible;margin:0;justify-content:center;transition:none}
  .navlinks a{font-size:14px;padding:9px 13px;border-radius:var(--r-pill);white-space:nowrap}
  .navlinks .btn{margin:0 0 0 8px;padding:10px 18px}
  .topbar__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-3)}
  .topbar__in::after{content:"";display:block}
  .topbar__logo{justify-self:start}
  .navlinks{justify-self:center}
}

/* ============================================================
   DESKTOP (1024px+)
   ============================================================ */
@media (min-width:1024px){
  :root{--sec-pad:112px;--r-panel:56px}
  .marca__grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-7)}
  .marca__logo{width:320px}
  .panel{min-height:74svh}
  .navtoggle{display:none}
  .navscrim{display:none}
  .navlinks{position:static;height:auto;width:auto;flex-direction:row;align-items:center;gap:2px;padding:0;
    background:none;border:0;box-shadow:none;
    transform:none;opacity:1;visibility:visible;margin:0;justify-content:center;transition:none}
  .navlinks a{font-size:13.5px;padding:7px 10px;border-radius:var(--r-pill);white-space:nowrap}
  .navlinks .btn{margin:0 0 0 8px;padding:9px 16px}
  /* logo | menu centralizado | coluna espelho vazia, pra o centro ser o centro real da barra */
  .topbar__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-4)}
  .topbar__in::after{content:"";display:block}
  .topbar__logo{justify-self:start}
  .navlinks{justify-self:center}
  .hero{--hero-pad-b:calc(var(--sp-9) + 48px);padding:calc(var(--topbar-h) + var(--sp-9)) 0 var(--hero-pad-b)}  /* base maior: espaço pro indicador "Role" */
  .hero__in{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
  .hero__signup{max-width:460px}
  .hero-copy{font-size:clamp(38px,3.9vw,54px)}
  .hero__photo{aspect-ratio:5/4}
  .mec__grid{grid-template-columns:.8fr 1.2fr;gap:var(--sp-9)}
  .mec__intro{position:sticky;top:96px;align-self:start}
  .steps__list{padding-left:64px}
  .step::before{left:-58px}
  .steps__rail{left:22px}
  .tr__grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
  .seg__track{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  .segc{flex-basis:auto;grid-column:span 2}
  .segc:nth-child(4),.segc:nth-child(5){grid-column:span 3}
  .segc:nth-child(4) .photo{aspect-ratio:16/8}
  .seg__hint{display:none}
  .sobre__grid{grid-template-columns:1fr 1.1fr;gap:var(--sp-9)}
  .sobre__photo{position:sticky;top:96px;aspect-ratio:4/5}
  .ct__grid{grid-template-columns:.9fr 1.1fr;gap:var(--sp-9)}
  .ct__form{padding:var(--sp-6)}
  .ct__form .btn{width:auto}
  .anexo-hd .wrap{flex-direction:row;align-items:baseline;justify-content:space-between}
}


/* ============================================================
   CAMADA MODERNA (2026-09-16): detalhes vivos por cima do que já existia.
   Tudo deriva dos tokens (accent/accent-2/ink) — nada de hex solto.
   ============================================================ */
/* barra de progresso de rolagem: o header não acompanha o scroll, então
   ela é a única pista de "onde estou na página" */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:64;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(var(--sp,0));
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* destaque dos títulos em gradiente da própria paleta */
.h2 .hl,.hero-copy .hl{background:linear-gradient(92deg,var(--accent) 0%,color-mix(in oklab,var(--accent) 55%,var(--accent-2)) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* hero: aurora lenta atrás do conteúdo (accent + accent-2 desfocados) */
.hero__aurora{position:absolute;inset:0;pointer-events:none;overflow:clip}
.hero__aurora::before,.hero__aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(64px);opacity:.6;will-change:transform}
.hero__aurora::before{width:56vw;height:56vw;max-width:680px;max-height:680px;right:-14vw;top:-22vw;
  background:radial-gradient(circle,color-mix(in oklab,var(--accent) 30%,transparent) 0%,transparent 66%);
  animation:aurora-a 18s ease-in-out infinite alternate}
.hero__aurora::after{width:44vw;height:44vw;max-width:560px;max-height:560px;left:-16vw;bottom:-20vw;
  background:radial-gradient(circle,color-mix(in oklab,var(--accent-2) 36%,transparent) 0%,transparent 66%);
  animation:aurora-b 24s ease-in-out infinite alternate}
@keyframes aurora-a{to{transform:translate(-10vw,14vw) scale(1.12)}}
@keyframes aurora-b{to{transform:translate(12vw,-10vw) scale(1.08)}}
.hero__in{position:relative;z-index:1}

/* hero: título entra palavra por palavra (spans .w criados no site.js) */
.hero-copy .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);transform-origin:0 100%;
  transition:opacity .7s var(--ease),transform .9s var(--ease-out);transition-delay:calc(var(--i,0) * 55ms + 120ms)}
.hero-copy .hl .w{background:inherit;-webkit-background-clip:text;background-clip:text}
.hero-copy .w .p{color:var(--text);-webkit-text-fill-color:var(--text)}  /* pontuação colada fica na cor do texto, não do destaque */
.is-in .hero-copy .w{opacity:1;transform:none}

/* hero: convite pra rolar, só desktop */
.hero__scroll{display:none}

/* eyebrows: ponto de status pulsando antes do rótulo */
.s .eyebrow::before,.panel .eyebrow::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:currentColor;margin-right:10px;vertical-align:1px;animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in oklab,currentColor 45%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}

/* botão primário: varredura de luz ao passar o mouse */
.btn--primary{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,color-mix(in oklab,var(--accent-ink) 32%,transparent) 50%,transparent 100%);
  transform:skewX(-18deg);transition:left .7s var(--ease-out)}
.btn--primary:hover::before,.btn--primary:focus-visible::before{left:130%}

/* cards: brilho suave que segue o cursor (--mx/--my vêm do site.js) */
.pains li,.needs li,.pillars li,.step,.ct__form{position:relative;isolation:isolate}
.tr::before,.pains li::before,.needs li::before,.pillars li::before,.ct__form::before,.step::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 62%)}
.tr:hover::before,.pains li:hover::before,.needs li:hover::before,.pillars li:hover::before,.ct__form:hover::before,.step:hover::after{opacity:1}
.needs li{--spot:color-mix(in oklab,var(--accent-2) 22%,transparent)}
.pillars li{transition:border-color .25s,transform .25s}
.pillars li:hover{border-color:var(--accent-2);transform:translateY(-2px)}
.step.is-on .step__ico{box-shadow:0 0 0 6px color-mix(in oklab,var(--accent) 10%,transparent);transition:box-shadow .4s var(--ease)}
.ct__form{border-color:color-mix(in oklab,var(--accent) 30%,var(--line))}

/* segmentos: título ganha seta sutil no hover */
.segc__body h3{display:flex;align-items:center;gap:8px}
.segc__body h3::after{content:"";width:14px;height:2px;border-radius:2px;background:var(--accent);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s var(--ease-out)}
.segc:hover .segc__body h3::after{opacity:1;transform:none}

/* footer: fio de luz no topo, na cor da paleta */
footer.site::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--accent-2) 50%,transparent 100%);opacity:.7}

@media (min-width:1024px){
  .hero__scroll{display:flex;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:1;
    align-items:center;gap:10px;text-decoration:none;font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
  .hero__scroll i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--accent),transparent);position:relative;overflow:hidden}
  .hero__scroll i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--bg);opacity:.9;animation:scrollcue 1.8s var(--ease) infinite}
  @keyframes scrollcue{to{top:110%}}
  .hero__scroll:hover{color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){
  .hero__aurora::before,.hero__aurora::after{animation:none}
  .hero-copy .w{opacity:1;transform:none;transition:none}
  .s .eyebrow::before,.panel .eyebrow::before{animation:none}
  .btn--primary::before{display:none}
  .hero__scroll i::after{animation:none}
  .progress{transition:none}
  .marca__logo.is-drawn{animation:none}
}