/* =======================================================================
   FABRA — Design System
   Estrutura herdada da referência (escala, raio binário, hover por
   reposicionamento, mola única). Cor e tipografia são da Fabra.
   ======================================================================= */

/* ---------- Fontes ---------------------------------------------------- */
@font-face { font-family:"Interval"; src:url("../fonts/TBJInterval-Light.woff2") format("woff2");
             font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Interval"; src:url("../fonts/TBJInterval-Regular.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Interval"; src:url("../fonts/TBJInterval-Bold.woff2") format("woff2");
             font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Gulams"; src:url("../fonts/GulamsCondensed-Bold.woff2") format("woff2");
             font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Telegraf"; src:url("../fonts/PPTelegraf-Regular.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-Light.woff2") format("woff2");
             font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-Regular.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Sora"; src:url("../fonts/Sora-Light.woff2") format("woff2");
             font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Sora"; src:url("../fonts/Sora-Regular.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Sora"; src:url("../fonts/Sora-Medium.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Sora"; src:url("../fonts/Sora-SemiBold.woff2") format("woff2");
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Sora"; src:url("../fonts/Sora-Bold.woff2") format("woff2");
             font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* ---------- Cor — paleta Fabra ------------------------------------- */
  --f-preto:  #000000;
  --f-cinza:  #E2DFDC;
  --f-laranja:#ff6d1c;
  --f-azul:   #283654;

  /* Rampa neutra derivada: frio no escuro, quente no claro */
  --n-900:#000000;  --n-850:#0E1012;  --n-800:#1E2225;
  --n-700:#343A3F;  --n-600:#474D53;  --n-500:#6C7278;
  --n-400:#8E8F8D;  --n-300:#B4B2AE;  --n-200:#CFCCC8;
  --n-100:#E2DFDC;  --n-000:#FFFFFF;

  --laranja-hi:  #FF8A45;   /* hover / brilho -- acima da base */
  --laranja-deep:#6E3406;   /* ícone SOBRE o laranja         */
  --azul-hi:     #35486F;

  /* Papéis */
  /* O site e claro, e so. O tema escuro foi retirado em 31/08 -- a rampa
     neutra continua aqui porque a nav sobre o hero ainda usa os tons
     escuros dela (ver .nav--sobre-hero). */
  --bg:          #E1DFDD;
  --bg-raised:   #EDEBE9;
  --text:        #000000;
  --text-muted:  #4A4744;
  --text-dim:    #6E6A66;
  --border:      #B4B0AC;
  --border-soft: #CBC7C3;
  --accent:      var(--f-laranja);

  /* ---------- Tipografia --------------------------------------------- */
  /* Tres familias em uso:
     --telegraf PP Telegraf -> texto corrido E chamadas das secoes
                               (so o peso Regular esta embarcado)
     --sans     Interval    -> botoes, nomes de secao (eyebrow), menu e o
                               rotulo do CTA gigante -- sempre caixa alta
     --display  Gulams      -> nomes dos motores, na secao de servicos

     --inter e --sora ficam declaradas como alternativas de texto corrido:
     trocar a familia no body basta. Face nao apontada nao baixa.           */
  --telegraf:"Telegraf", ui-sans-serif, system-ui, sans-serif;
  --inter:   "Inter", ui-sans-serif, system-ui, sans-serif;
  --sora:    "Sora", ui-sans-serif, system-ui, sans-serif;
  --sans:    "Interval", ui-sans-serif, system-ui, sans-serif;
  --display: "Gulams", "Interval", ui-sans-serif, sans-serif;

  /* Escala — proporções da referência, desktop ≥1200 */
  --fs-display: 76px; --lh-display:108%;  --ls-display:-0.035em;
  --fs-h1:      58px; --lh-h1:     110%;  --ls-h1:     -0.03em;
  --fs-h2:      38px; --lh-h2:     116%;  --ls-h2:     -0.025em;
  --fs-lead:    34px; --lh-lead:   122%;  --ls-lead:   -0.02em;
  --fs-body-lg: 14.5px; --lh-body-lg:162%;  --ls-body-lg: 0em;
  --fs-body:    12px; --lh-body:   175%;  --ls-body:    0.005em;
  --fs-ui:      16px; --lh-ui:     100%;  --ls-ui:      0.01em;
  --fs-label:   14px; --lh-label:  110%;  --ls-label:   0.06em;
  --fs-label-sm:12px; --lh-label-sm:110%; --ls-label-sm:0.08em;
  --fs-micro:   10px; --lh-micro:  100%;  --ls-micro:   0.04em;
  --fs-cta:     54px; --lh-cta:    104%;  --ls-cta:    -0.03em;

  /* Gulams tem ascendente 941 contra 750 da Interval: para casar a altura
     de caixa-alta em uso inline, entra reduzida. */
  --gulams-inline: 0.82em;

  /* ---------- Espaço — escala base-5 da referência -------------------- */
  --sp-4:4px;   --sp-8:8px;   --sp-10:10px; --sp-12:12px; --sp-15:15px;
  --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-25:25px; --sp-30:30px;
  --sp-36:36px; --sp-50:50px; --sp-60:60px; --sp-80:80px; --sp-100:100px;
  --sp-120:120px; --sp-160:160px; --sp-200:200px;

  /* ---------- Layout -------------------------------------------------- */
  /* Largura util do conteudo. Hero e galeria de projetos ficam de fora:
     nao vivem dentro de .container, sangram de ponta a ponta. */
  --container:1250px;
  /* Margem lateral do site. Nao se aplica ao hero nem a galeria de projetos,
     que sangram de ponta a ponta. Escalona nos breakpoints: 70px num celular
     de 375 deixaria 235px de conteudo. */
  --gutter:70px;
  --nav-h:80px;

  /* ---------- Raio / borda / sombra ----------------------------------- */
  --r-none:0;  --r-pill:50px;  --r-full:999px;  --r-soft:80px;
  --bw:1px;    --bw-cta:3px;
  --shadow-img: 16px 13px 48px rgba(0,0,0,.45);
  --glow: 0 0 80px 0 rgba(255,109,28,.55);

  /* ---------- Movimento ----------------------------------------------- */
  --dur:250ms;
  --ease: cubic-bezier(.25,.1,.25,1);
  --dur-fluid:560ms;
  --ease-fluid: cubic-bezier(.16,1,.3,1);   /* expo-out: entra rapido, assenta devagar */
  /* mola stiffness 400 / damping 30, aproximada */
  --spring: linear(0,.0067 1.2%,.0265 2.5%,.1017 5.1%,.2222 7.9%,.7076 16.6%,
            .8879 20.3%,1.0091 24.2%,1.0513 26.6%,1.0637 29.3%,1.0446 33.4%,
            1.0016 39%,.9905 42.4%,.9958 48.6%,1.0026 55.2%,1);
}

/* ---------- Breakpoints ----------------------------------------------- */
@media (min-width:810px) and (max-width:1199.98px) {
  :root {
    --fs-display:56px;  --lh-display:106%;  --ls-display:-0.03em;
    --fs-h1:46px;       --lh-h1:108%;
    --fs-h2:32px;       --lh-h2:116%;
    --fs-lead:28px;
    --fs-cta:42px;      --ls-cta:-0.02em;
    --gutter:40px;
    --r-full:var(--r-soft);
  }
}
@media (max-width:809.98px) {
  :root {
    --fs-display:34px;  --lh-display:112%;  --ls-display:-0.02em;
    --fs-h1:30px;       --lh-h1:112%;
    --fs-h2:22px;       --lh-h2:120%;       --ls-h2:-0.015em;
    --fs-lead:22px;
    --fs-body-lg:12.5px;  --fs-body:11px;
    --fs-cta:26px;      --ls-cta:-0.01em;
    --gutter:20px;
    --r-full:var(--r-soft);
  }
}

/* =======================================================================
   BASE
   ======================================================================= */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
section[id],header[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}
body.menu-open{overflow:hidden}
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--telegraf); font-weight:400;
  font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p,figure,ul { margin:0; padding:0; }
ul { list-style:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* Palavra de destaque — Gulams Condensed */
.g {
  font-family:var(--display); font-weight:700;
  font-size:var(--gulams-inline); letter-spacing:0.005em;
  text-transform:uppercase; color:var(--accent);
}
.g--plain { color:inherit; }

/* destaque so por cor, dentro de um nome de secao em Interval */
.acento { color:var(--accent); }

/* Tipografia */
.t-display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:400;text-wrap:balance}
.t-h1     {font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);font-weight:400;text-wrap:balance}
.t-h2     {font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:400;text-wrap:balance;
           font-family:var(--telegraf)}
.t-lead   {font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-weight:300}
.t-body-lg{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg)}
.t-body   {font-size:var(--fs-body);line-height:var(--lh-body)}
.t-label  {font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase}
.t-label-sm{font-size:var(--fs-label-sm);line-height:var(--lh-label-sm);letter-spacing:var(--ls-label-sm);text-transform:uppercase}
.t-micro  {font-size:var(--fs-micro);line-height:var(--lh-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--text-dim)}
.up       {text-transform:uppercase;letter-spacing:-0.005em}
.muted    {color:var(--text-muted)}
.light    {font-weight:300}

/* rotulo so para leitor de tela -- usado por qualquer pagina (nao so a v2) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Layout */
.section   {display:flex;justify-content:center;width:100%;position:relative}
.container {flex:1;max-width:var(--container);padding:var(--sp-120) var(--gutter);min-width:0}
.container--air {padding-block:var(--sp-200)}
@media (max-width:809.98px){
  .container{padding:var(--sp-60) var(--gutter)}
  .container--air{padding-block:var(--sp-80)}
}

/* Eyebrow de seção */
.eyebrow{
  display:flex;align-items:center;gap:var(--sp-12);
  color:var(--accent);margin-bottom:var(--sp-30);
  font-family:var(--sans);
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--border)}

/* =======================================================================
   NAV
   ======================================================================= */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;justify-content:center;
  /* margem propria, menor que a do conteudo */
  padding:0 var(--sp-36);
  /* sem barra: o degrade desce do topo e some */
  pointer-events:none;
}
.nav::before{
  content:"";position:absolute;left:0;right:0;top:0;height:190px;z-index:-1;
  /* A cor e FIXA (a da pagina clara) e quem entra e sai e a opacidade.
     Antes o gradiente lia var(--bg) e saltava de escuro para claro junto com
     .nav--sobre-hero -- gradiente nao interpola, entao dava um flash. Opacidade
     interpola. */
  background:linear-gradient(180deg,
    rgba(225,223,221,.30)  0%,
    rgba(225,223,221,.25) 32%,
    rgba(225,223,221,.13) 64%,
    transparent          100%);
  opacity:1;
  transition:opacity 420ms var(--ease-fluid);
}
/* sobre o hero escuro o veu claro nao tem o que fazer: some */
.nav--sobre-hero::before{opacity:0}

/* Paginas internas: sem veu nenhum, parado ou rolando -- pedido do cliente.
   (Tinha posto o veu de volta so no `is-stuck`, para o logo preto nao sumir
   sobre o banner escuro de quem-somos ao rolar; removido por pedido explicito
   mesmo assim -- ver legibilidade do logo/menu contra o banner ao rolar.) */
.pagina-interna .nav::before{opacity:0}
.nav__inner > *{pointer-events:auto}
.nav__inner{
  /* Sem max-width de proposito: logo e CTA encostam na margem da TELA, nao
     no enquadramento de 1250px do conteudo. A pilula central nao se importa --
     ela e position:absolute em left:50%, entao continua no centro real. */
  position:relative;flex:1;max-width:none;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-20);
}
.nav__logo{width:104px;color:var(--text);flex:none;
  transition:color 420ms var(--ease-fluid)}
/* O aspect-ratio explicito e proposital: o <svg> nao traz width/height, entao
   a proporcao so existe na viewBox -- e o Safari as vezes erra essa conta em
   item de flex, o que arredonda a altura pra baixo e corta a base das letras
   (a marca aparecia cortada no iPhone). Com a razao declarada nao ha inferencia.
   A folga dentro da viewBox no HTML cobre o resto: a arte encostava exatamente
   na borda de baixo e o <svg> recorta o que passa. */
.nav__logo svg{width:100%;height:auto;aspect-ratio:430/70.4;display:block}
.nav__right{display:flex;align-items:center;gap:var(--sp-12)}

/* Pílula central -- posicionamento absoluto garante centro real da tela,
   independente da largura do logo e do CTA */
.nav__menu{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:2px;
  height:52px;padding:0 15px;
  border:none;border-radius:var(--r-pill);
  background:rgba(226,223,220,.09);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:background-color var(--dur-fluid) var(--ease-fluid);
}
.nav__menu a{
  display:inline-flex;align-items:center;height:38px;padding:0 13px;
  border-radius:var(--r-pill);white-space:nowrap;
  font-family:var(--sans);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);
  transition:color var(--dur-fluid) var(--ease-fluid),
             background-color var(--dur-fluid) var(--ease-fluid);
}
.nav__menu a:hover{color:var(--text);background:rgba(226,223,220,.16)}
.nav__menu a.is-active{color:var(--accent)}
.nav__sep{flex:none;width:1px;height:18px;background:rgba(226,223,220,.20);margin:0 5px;
  transition:background-color var(--dur-fluid) var(--ease-fluid)}

/* Botão de menu -- só aparece quando a pílula não cabe */
.nav__toggle{
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  width:44px;height:44px;padding:0;flex:none;
  background:transparent;border:1px solid var(--border);border-radius:var(--r-pill);
  cursor:pointer;transition:border-color var(--dur) var(--ease);
}
.nav__toggle:hover{border-color:var(--accent)}
.nav__toggle span{
  display:block;width:16px;height:1.5px;background:var(--text);
  transition:transform var(--dur-fluid) var(--ease-fluid),
             opacity var(--dur) var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

@media (max-width:1199.98px){
  .nav__menu{display:none}
  .nav__toggle{display:inline-flex}
}
@media (max-width:809.98px){
  .nav__logo{width:88px}
  .nav .btn-cta--sm{height:40px;padding:0 var(--sp-16);font-size:12px;letter-spacing:.06em}
}
@media (max-width:479.98px){
  .nav .btn-cta--sm{display:none}
}

/* ═══════ Overlay de menu ═══════ */
.menu-overlay{
  position:fixed;inset:0;z-index:49;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;gap:var(--sp-50);
  padding:var(--nav-h) var(--gutter) var(--sp-50);
  /* a faixa preta desce do topo revelando as opcoes */
  clip-path:inset(0 0 100% 0);
  transition:clip-path 620ms var(--ease-fluid);
}
.menu-overlay[hidden]{display:none}
.menu-overlay.is-open{clip-path:inset(0 0 0 0)}
.menu-overlay__links{display:flex;flex-direction:column;gap:var(--sp-8)}
.menu-overlay__links a{
  font-family:var(--sans);
  font-size:clamp(30px,7vw,54px);line-height:1.15;letter-spacing:-0.01em;
  text-transform:uppercase;color:var(--text);width:max-content;max-width:100%;
  opacity:0;transform:translateY(-16px);
  transition:opacity 380ms var(--ease-fluid),transform 460ms var(--ease-fluid),
             color var(--dur-fluid) var(--ease-fluid);
}
.menu-overlay.is-open .menu-overlay__links a{opacity:1;transform:none}
.menu-overlay__links a:hover{color:var(--accent)}
/* entram em cascata, acompanhando a faixa */
.menu-overlay__links a:nth-child(1){transition-delay:180ms}
.menu-overlay__links a:nth-child(2){transition-delay:230ms}
.menu-overlay__links a:nth-child(3){transition-delay:280ms}
.menu-overlay__links a:nth-child(4){transition-delay:330ms}
.menu-overlay__links a:nth-child(5){transition-delay:380ms}
.menu-overlay__links a:nth-child(6){transition-delay:430ms}
.menu-overlay__cta{
  align-self:flex-start;opacity:0;transform:translateY(-16px);
  transition:opacity 380ms var(--ease-fluid) 480ms,transform 460ms var(--ease-fluid) 480ms,
             background-color var(--dur-fluid) var(--ease-fluid),
             color var(--dur-fluid) var(--ease-fluid);
}
.menu-overlay.is-open .menu-overlay__cta{opacity:1;transform:none}

/* =======================================================================
   BOTÕES — raio binário, hover por reposicionamento
   ======================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-10);
  height:48px;padding:var(--sp-12) var(--sp-24);
  border:var(--bw) solid var(--border);border-radius:var(--r-pill);
  background:transparent;color:var(--text);
  font-family:var(--sans);font-size:var(--fs-ui);line-height:var(--lh-ui);
  letter-spacing:.07em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn--active{border-color:var(--accent);color:var(--f-preto);background:var(--accent)}
.btn--active:hover{background:var(--laranja-hi);border-color:var(--laranja-hi);color:var(--f-preto)}

/* CTA -- preenchimento desliza da esquerda no hover */
.btn-cta{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  height:58px;padding:0 var(--sp-36);
  border:1px solid var(--accent);border-radius:var(--r-pill);
  background:transparent;color:var(--accent);
  font-family:var(--sans);font-size:var(--fs-ui);
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:color var(--dur-fluid) var(--ease-fluid),
             background-color var(--dur-fluid) var(--ease-fluid),
             transform var(--dur-fluid) var(--ease-fluid);
}
.btn-cta > span{position:relative;z-index:1}
.btn-cta--sm{height:44px;padding:0 var(--sp-24);font-size:14px;letter-spacing:.07em}
.btn-cta:hover,.btn-cta:focus-visible{
  color:var(--f-preto);background:var(--accent);transform:scale(1.045);
}
@media (max-width:809.98px){
  .btn-cta{height:52px;padding:0 var(--sp-24);font-size:14px;letter-spacing:.07em}
}


/* CTA gigante — o elemento-assinatura.
   SEM USO desde 30/08: a secao "Quero a Fabra como parceira" saiu do HTML e
   um outro componente entra no lugar. O bloco (e o assets/heart.png, e o
   token --fs-cta) fica aqui para nao se perder -- apagar se o novo componente
   nao aproveitar nada. */
.cta-wrap{display:flex;justify-content:center;padding-inline:var(--gutter)}
.cta{
  display:inline-flex;align-items:center;gap:var(--sp-24);
  padding:var(--sp-16) var(--sp-36) var(--sp-16) var(--sp-16);
  border:var(--bw-cta) solid var(--border);border-radius:var(--r-full);
  background:var(--bg-raised);color:var(--text);max-width:100%;
  transition:padding var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.cta__mark{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:150px;height:150px;border-radius:50%;background:var(--accent);
  transition:box-shadow var(--dur) var(--ease);
}
.cta__mark img{width:64px;height:auto;filter:brightness(0) saturate(100%) invert(13%) sepia(48%) saturate(2400%) hue-rotate(8deg) brightness(95%) contrast(96%)}
.cta__label{font-family:var(--sans);font-size:var(--fs-cta);line-height:var(--lh-cta);letter-spacing:var(--ls-cta);text-wrap:balance}
.cta:hover{padding:var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-36);border-color:var(--accent)}
.cta:hover .cta__mark{order:1;box-shadow:var(--glow)}
.cta:hover .cta__label{order:0}
@media (max-width:1199.98px){
  .cta{flex-direction:column;padding:var(--sp-50);border-radius:var(--r-soft);text-align:center}
  .cta:hover{padding:var(--sp-50)}
  .cta__mark{width:220px;height:220px;box-shadow:var(--glow)}
  .cta__mark img{width:94px}
  .cta:hover .cta__mark{order:0}
}
@media (max-width:809.98px){
  .cta{gap:var(--sp-30);width:100%;padding:var(--sp-30) var(--sp-20)}
  .cta:hover{padding:var(--sp-30) var(--sp-20)}
  .cta__mark{width:150px;height:150px}
  .cta__mark img{width:64px}
}

/* =======================================================================
   HERO
   ======================================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      color-mix(in srgb,var(--bg) 92%,transparent) 0%,
      color-mix(in srgb,var(--bg) 70%,transparent) 42%,
      color-mix(in srgb,var(--bg) 34%,transparent) 72%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 60%,transparent) 0%,
      transparent 30%,
      color-mix(in srgb,var(--bg) 88%,transparent) 82%,
      var(--bg) 100%);
}
.hero__grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;
  mix-blend-mode:overlay;
  /* canvas e elemento substituido: inset:0 nao estica, precisa de w/h */
  width:100%;height:100%;
}
.hero__inner{position:relative;z-index:2;display:flex;justify-content:center;padding:0 var(--gutter)}

/* Botao fantasma sobre o video */
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  height:64px;padding:0 var(--sp-50);
  border:1px solid rgba(226,223,220,.38);border-radius:var(--r-pill);
  background:rgba(29,32,35,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--text);font-family:var(--sans);font-size:var(--fs-ui);letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:border-color var(--dur-fluid) var(--ease-fluid),
             background-color var(--dur-fluid) var(--ease-fluid),
             letter-spacing var(--dur-fluid) var(--ease-fluid);
}
.btn-ghost:hover{
  border-color:var(--text);
  background:rgba(226,223,220,.10);
  letter-spacing:.14em;
}
@media (max-width:809.98px){
  .btn-ghost{height:54px;padding:0 var(--sp-24);font-size:13px;letter-spacing:.06em}
  .btn-ghost:hover{letter-spacing:.09em}
}
.hero__slot{
  position:absolute;z-index:2;bottom:var(--sp-30);
  left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--sp-8);
  padding:6px var(--sp-12);border:1px solid var(--border);
  border-radius:var(--r-pill);background:color-mix(in srgb,var(--bg) 70%,transparent);
  backdrop-filter:blur(8px);color:var(--text-dim);white-space:nowrap;
}
.hero__slot i{width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.scroll-cue{
  position:absolute;right:var(--gutter);bottom:var(--sp-30);z-index:2;
  display:flex;align-items:center;gap:var(--sp-10);color:var(--text-dim);
}
.scroll-cue span{display:block;width:1px;height:40px;background:var(--border);
  position:relative;overflow:hidden}
.scroll-cue span::after{content:"";position:absolute;inset:0;background:var(--accent);
  animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (max-width:809.98px){ .scroll-cue{display:none} }

/* =======================================================================
   MANIFESTO -- o texto do hero, agora abaixo do vídeo
   ======================================================================= */
/* mesma grade da secao de servicos: o texto cai exatamente na coluna
   das descricoes dos motores logo abaixo */
.manifesto{
  display:grid;grid-template-columns:var(--sp-100) 1fr minmax(0,42ch);
  gap:var(--sp-50) var(--sp-30);align-items:start;
  /* o respiro para servicos vem quase todo daqui: 120 de baixo somava 240
     com o topo da secao seguinte */
  padding-bottom:var(--sp-50);
}
.manifesto__title{
  grid-column:1 / 3;grid-row:1;
  font-family:var(--telegraf);font-weight:400;
  font-size:clamp(22px,3.6vw,54px);line-height:1.0;letter-spacing:-0.015em;
  max-width:none;
}
/* as quebras sao autorais: cada trecho e uma linha propria */
.manifesto__title span{display:block}
.manifesto__copy{
  grid-column:3;grid-row:1;
  display:flex;flex-direction:column;gap:var(--sp-16);
  font-size:var(--fs-body);line-height:var(--lh-body);
}
/* o CTA acompanha o texto em vez de virar linha propria da grade: na linha 2
   ele descia ate depois do titulo, que e bem mais alto que a copy */
.manifesto__copy .btn-cta{align-self:flex-start;margin-top:var(--sp-15)}

@media (max-width:1199.98px){
  .manifesto{grid-template-columns:70px 1fr;gap:var(--sp-30) var(--sp-24)}
  .manifesto__title{grid-column:1 / -1;grid-row:auto}
  .manifesto__copy{grid-column:2;grid-row:auto}
}
@media (max-width:809.98px){
  .manifesto{grid-template-columns:1fr;gap:var(--sp-30)}
  .manifesto__title{grid-column:1;grid-row:auto}
  .manifesto__copy{grid-column:1;grid-row:auto}
}

/* --- Abertura da pagina Quem somos ---
   Entre o banner e a linha do eyebrow, ocupando a area de leitura inteira --
   a mesma largura que a linha do eyebrow varre logo abaixo. Sem grade de
   colunas: o proprio .container ja define esse limite, entao qualquer coisa
   aqui seria so uma chance de desalinhar.
   Respiro proprio: o container padrao abre --sp-120 em cima e embaixo, o que
   somaria 240 entre este bloco e a linha do "Quem somos". */
#quem-somos-abertura .container{padding-top:var(--sp-80);padding-bottom:var(--sp-50)}
@media (max-width:809.98px){
  #quem-somos-abertura .container{padding-top:var(--sp-60);padding-bottom:var(--sp-40)}
}
/* Sora Medium e corpo bem acima do resto da pagina: e um bloco de manifesto,
   nao legenda. */
.magia{
  display:flex;flex-direction:column;gap:var(--sp-24);
  font-family:var(--sora);font-weight:500;
  font-size:clamp(19px,2.1vw,30px);line-height:1.38;letter-spacing:-0.02em;
  color:var(--text);
  text-wrap:pretty;
}

/* --- Texto que acende palavra a palavra na rolagem ---
   Cada palavra vira um span e o fabra.js escreve a opacidade quadro a quadro.
   O piso de 0.2 e' o mesmo da referencia (la eram duas copias empilhadas, uma
   fantasma a 20% e outra por cima de 0 a 100 -- empilhar as duas da exatamente
   0.2 + 0.8t, entao um span so com essa conta rende o mesmo desenho com metade
   do DOM). A transition curta so amacia o passo entre quadros. */
.magia__palavra{
  display:inline-block;
  opacity:1;
  transition:opacity 120ms linear;
  will-change:opacity;
}
@media (prefers-reduced-motion:reduce){
  /* o fabra.js nao rebaixa a opacidade nesse caso; aqui so garantimos que
     nenhum resto de estilo deixe o texto apagado */
  .magia__palavra{opacity:1 !important;transition:none}
}

/* =======================================================================
   SERVIÇOS
   ======================================================================= */
#servicos .container{padding-top:var(--sp-60);padding-bottom:var(--sp-60)}
#projetos .sec-head{padding-top:var(--sp-50)}
.motores{display:flex;flex-direction:column;margin-top:var(--sp-60)}
.motor{
  position:relative;
  display:grid;grid-template-columns:var(--sp-100) 1fr minmax(0,42ch) auto;
  gap:var(--sp-30);align-items:start;
  padding:var(--sp-50) 0;border-top:1px solid var(--border);
  transition:border-color var(--dur) var(--ease);
}
/* o primeiro traco encostava no nome da secao; a lista comeca sem ele */
.motor:first-child{border-top:0}
.motor:last-child{border-bottom:1px solid var(--border)}
.motor:hover{border-color:var(--n-500)}
.motor__num{
  font-family:var(--display);font-weight:700;font-size:52px;line-height:.9;
  color:var(--n-700);transition:color var(--dur) var(--ease);
}
.motor:hover .motor__num{color:var(--accent)}
.motor__name{font-family:var(--display);font-weight:700;
  font-size:clamp(38px,4.4vw,64px);line-height:.95;letter-spacing:.01em;
  text-transform:uppercase}
/* Kerning manual so na junçao "P"+"A" de "Propaganda" -- o cliente confirmou
   que so ali tem problema (o resto da palavra esta ok). Medir a largura dos
   glifos (Range API) nao bateu com o que se ve: por avanço puro esse par ja
   saia igual aos vizinhos, entao o vao e optico (a diagonal do "A" abre um
   vazio visual do lado esquerdo dele que o "P", de haste reta, nao tem) --
   por isso o ajuste e por olho, nao por medida, e so nesse par. */
.motor__name--kern{margin-left:-.06em}
.motor__desc{color:var(--text-muted);font-weight:300}

/* --- sanfona: a descricao so aparece no + --- */
.motor__head{grid-column:1 / 3;font-size:inherit;font-weight:400}
.motor__toggle{
  display:grid;grid-template-columns:var(--sp-100) 1fr;
  gap:var(--sp-30);align-items:center;width:100%;
  margin:0;padding:0;border:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer;
}
/* o + mora na ultima coluna, fora do botao: para ele continuar clicavel o
   alvo do botao se estica por cima da linha inteira */
.motor__toggle::after{content:"";position:absolute;inset:0;z-index:1}
/* anima grid-template-rows em vez de max-height: nao precisa de altura
   chutada e assenta na medida exata do texto */
.motor__desc-wrap{
  /* acima do alvo esticado, senao o texto nao da para selecionar */
  grid-column:3;position:relative;z-index:2;
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--dur-fluid) var(--ease-fluid),
             opacity var(--dur) var(--ease);
}
.motor__desc-wrap > *{overflow:hidden;min-height:0}
.motor.is-open .motor__desc-wrap{grid-template-rows:1fr;opacity:1}

/* 1em aqui = o corpo do nome, entao a conta centra o + na caixa do nome
   sem depender do breakpoint */
.motor__mais{
  position:relative;width:22px;height:22px;
  grid-column:4;justify-self:end;align-self:start;
  font-size:clamp(38px,4.4vw,64px);
  margin-top:calc((0.95em - 22px) / 2);
}
.motor__mais::before,.motor__mais::after{
  content:"";position:absolute;left:0;top:50%;
  width:22px;height:1.5px;margin-top:-.75px;background:var(--text-muted);
  transition:background-color var(--dur) var(--ease),
             transform var(--dur-fluid) var(--ease-fluid);
}
.motor__mais::after{transform:rotate(90deg)}
/* aberto, a haste vertical deita: o + vira menos */
.motor.is-open .motor__mais::after{transform:rotate(0deg)}
.motor:hover .motor__mais::before,
.motor:hover .motor__mais::after{background:var(--accent)}
@media (max-width:1199.98px){
  .motor{grid-template-columns:70px 1fr auto;gap:var(--sp-20) var(--sp-24)}
  .motor__head{grid-column:1 / 3;grid-row:1}
  .motor__toggle{grid-template-columns:70px 1fr;gap:var(--sp-24)}
  .motor__mais{grid-column:3;grid-row:1}
  .motor__desc-wrap{grid-column:2;grid-row:2}
}
@media (max-width:809.98px){
  .motor{grid-template-columns:1fr auto;gap:var(--sp-12);padding:var(--sp-30) 0}
  .motor__num{font-size:34px}
  .motor__head{grid-column:1;grid-row:1}
  .motor__toggle{grid-template-columns:auto 1fr;gap:var(--sp-16)}
  .motor__mais{grid-column:2;grid-row:1}
  .motor__desc-wrap{grid-column:1 / -1;grid-row:2}
}

/* =======================================================================
   PROJETOS
   ======================================================================= */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-bottom:var(--sp-30)}
/* os filtros sao um controle secundario: pedem menos peso que um .btn cheio */
.filters .btn{height:38px;padding:0 var(--sp-16);font-size:13px;letter-spacing:.08em}

/* cabecalho de secao: nome, chamada e filtros no eixo central.
   o filete do eyebrow ganha um par a esquerda para ficar simetrico. */
.sec-head{text-align:center}
.sec-head .eyebrow{justify-content:center}
.sec-head .eyebrow::before{content:"";flex:1;height:1px;background:var(--border)}
.sec-head .filters{justify-content:center}
.sec-head__lead{margin-inline:auto}
.grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0;width:100%;
}
@media (max-width:809.98px){ .grid{grid-template-columns:1fr} }

.proj{
  position:relative;overflow:hidden;aspect-ratio:4/3;cursor:pointer;
  background:var(--bg-raised);border-radius:var(--r-none);
  transition:opacity var(--dur) var(--ease);
}
.proj[hidden]{display:none}
/* fora do filtro: veu preto por cima, o card continua na grade
   (o veu usava --bg, o cinza claro do fundo do site -- saia um veu CLARO em
   vez do preto que o proprio comentario acima sempre pediu) */
.proj::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--f-preto);opacity:0;
  transition:opacity var(--dur-fluid) var(--ease-fluid);
}
.proj.is-dim::after{opacity:.68}
.proj img,.proj video{width:100%;height:100%;object-fit:cover;
  transition:transform 600ms var(--ease),opacity var(--dur) var(--ease)}
.proj video{position:absolute;inset:0;opacity:0}
.proj img{transition:transform 900ms var(--ease-fluid),opacity var(--dur) var(--ease)}
.proj:hover img{transform:scale(1.04)}
.proj.has-video:hover video{opacity:1}
.proj__tag{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;gap:var(--sp-12);
  padding:var(--sp-16) var(--sp-20);
  background:var(--accent);color:var(--f-preto);
  transform:translateX(-101%);
  transition:transform 620ms var(--ease-fluid);
}
.proj:hover .proj__tag,.proj:focus-visible .proj__tag{transform:translateX(0)}
.proj__arrow{color:var(--f-preto)}
.proj__type{
  position:absolute;top:var(--sp-12);right:var(--sp-12);z-index:2;
  padding:4px var(--sp-8);background:color-mix(in srgb,var(--f-preto) 78%,transparent);
  backdrop-filter:blur(6px);color:var(--n-200);
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.proj:hover .proj__type{opacity:1}

/* =======================================================================
   CLIENTES
   ======================================================================= */
#clientes .container{padding-bottom:var(--sp-60)}
.marquee{
  overflow:hidden;margin-top:var(--sp-30);
  border-bottom:1px solid var(--border-soft);
  /* esmaece as pontas para o loop nao ter corte seco */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
}
.marquee__track{
  display:flex;align-items:center;width:max-content;
  animation:marquee 44s linear infinite;
}
/* Sem `:hover{animation-play-state:paused}`: no hover o carrossel nao para,
   so desacelera -- e isso fica no fabra.js. Trocar o animation-duration aqui
   faria o progresso saltar (ele e tempo/duracao); o playbackRate do JS mantem
   a posicao e so muda a velocidade. */
.marquee__item{
  flex:none;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-36) var(--sp-60);min-width:220px;
}
.marquee__item img{
  height:48px;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.42;
  transition:opacity var(--dur-fluid) var(--ease-fluid);
}
.marquee__item:hover img{opacity:1}
/* Correcao optica: NSC e AM sao marcas quase quadradas (1,2:1 e 1,3:1) contra
   uma media de ~3,2:1 nas demais. Na mesma altura elas saem com 60px de largura
   contra ~150-250px das outras -- leem como "encolhidas" ao lado das wordmarks,
   mesmo a arte nao tendo nenhuma margem morta (conferido: bbox = canvas inteiro
   nos 9 PNGs). Aumentar a régua toda não resolve -- é proporção, nao tamanho;
   sobe-se so estas duas. Selecionado por `src`, nao por `alt`, porque a copia
   `aria-hidden` do loop (a segunda metade do marquee) tem `alt=""` -- por
   `src` a correcao vale para as duas copias igual, sem salto no loop. */
.marquee__item img[src*="NSC.png"]{height:60px}
/* AM levou +5% por cima do +25% original (pedido em duas rodadas). */
.marquee__item img[src*="AM.png"]{height:63px}
/* Ajuste fino pedido pelo cliente em cima da base de 48px, em tres rodadas:
   CBN/Intelbras/Abrasel -20%, depois -5%, depois -10% (~31% no total);
   Ferreira -7% e depois mais -5% (~12% no total); SempreFort so -7%; Bayit -4%. */
.marquee__item img[src*="CBN.png"],
.marquee__item img[src*="Intelbras.png"],
.marquee__item img[src*="Abrasel.png"]{height:32px}
.marquee__item img[src*="Ferreira.png"]{height:43px}
.marquee__item img[src*="FarmaciaSempreFort.png"]{height:45px}
.marquee__item img[src*="Bayit.png"]{height:46px}
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}
}
@media (max-width:809.98px){
  .marquee__item{padding:var(--sp-24) var(--sp-36);min-width:170px}
  .marquee__item img{height:36px}
  .marquee__item img[src*="NSC.png"]{height:46px}
  .marquee__item img[src*="AM.png"]{height:48px}
  .marquee__item img[src*="CBN.png"],
  .marquee__item img[src*="Intelbras.png"],
  .marquee__item img[src*="Abrasel.png"]{height:25px}
  .marquee__item img[src*="Ferreira.png"]{height:31px}
  .marquee__item img[src*="FarmaciaSempreFort.png"]{height:33px}
  .marquee__item img[src*="Bayit.png"]{height:35px}
}

.slot{
  margin-top:var(--sp-50);padding:var(--sp-30);
  border:1px dashed var(--border);border-radius:var(--r-none);
  display:flex;flex-direction:column;gap:var(--sp-8);color:var(--text-dim);
}

/* =======================================================================
   DEPOIMENTOS
   Cinza claro (mesmo --bg do site). So um depoimento por vez, trocado pelos
   pontinhos ou pelas setas; nada de autoplay, a secao e so texto e pausa o
   scroll sozinha.

   Centralizacao: o cliente pensa o bloco como se houvesse uma imagem de
   225px de cada lado dentro dos 1250px de --container (225 + 800 + 225).
   Por isso `depoimentos__inner` usa o --container CRU, sem o --gutter que
   `.container` aplicaria (isso deixaria so 1110px uteis, e a conta do
   cliente nao bateria) -- so ganha o gutter de volta no mobile, como rede
   de seguranca para o texto nao encostar na borda. O `max-width:800px` +
   `margin-inline:auto` no miolo faz os 225px sobrarem sozinhos dos dois
   lados sempre que o container estiver no teto de 1250px; abaixo disso a
   faixa encolhe proporcionalmente.

   As setas ficam grudadas no `depoimentos__col` (perto do texto, nao nas
   pontas da faixa de 225px) -- por isso a posicao delas e absoluta contra
   o proprio col (que so tem o texto dentro, sem padding), nao contra o
   inner. Padding-top do inner bem menor que o padding-bottom: cola no
   carrossel de marcas logo acima e mantem a folga larga contra o rodape. */
.depoimentos{background:var(--bg);color:var(--text)}
.depoimentos__inner{padding:var(--sp-50) 0 var(--sp-160);max-width:var(--container);margin-inline:auto}
.depoimentos__col{position:relative;max-width:800px;margin-inline:auto}
.depoimentos__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  padding:var(--sp-8);border:none;background:none;color:var(--text);
  cursor:pointer;opacity:.55;
  transition:opacity var(--dur) var(--ease);
}
.depoimentos__arrow--prev{right:100%;margin-right:var(--sp-24)}
.depoimentos__arrow--next{left:100%;margin-left:var(--sp-24)}
.depoimentos__arrow:hover{opacity:1}
.depoimentos__arrow svg{width:22px;height:22px;display:block}
.depoimento{display:none}
.depoimento.is-active{display:block;animation:depoimentoEntra var(--dur-fluid) var(--ease-fluid)}
@keyframes depoimentoEntra{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.depoimento__quote{
  margin:0;
  /* ExtraLight pedido, mas o arquivo nao esta embarcado (so vieram Light
     300 / Regular / Medium / SemiBold / Bold) -- usando o Light, o mais
     proximo disponivel. Trocar o peso para 200 se o .woff2 chegar. */
  font-family:var(--sora);font-weight:300;
  font-size:clamp(18px,2vw,30px);line-height:1.18;letter-spacing:-0.02em;
  /* evita palavra sozinha na ultima linha -- o texto real do 1o depoimento
     terminava so com "desafio." (mesma trava do .projeto-copy) */
  text-wrap:pretty;
}
.depoimento__autor{
  display:flex;flex-direction:column;gap:var(--sp-4);
  margin-top:var(--sp-50);
  font-family:var(--sans);
}
.depoimento__nome{font-size:var(--fs-ui);font-weight:700;color:var(--text)}
.depoimento__cargo{font-size:var(--fs-body-lg);color:var(--text-dim)}

.depoimentos__nav{display:flex;gap:var(--sp-12);margin-top:var(--sp-60)}
.depoimentos__dot{
  width:8px;height:8px;padding:0;border:none;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--text) 30%,transparent);cursor:pointer;
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.depoimentos__dot:hover{background:color-mix(in srgb,var(--text) 55%,transparent)}
.depoimentos__dot.is-active{background:var(--accent);transform:scale(1.25)}

@media (max-width:809.98px){
  .depoimentos__inner{padding-block:var(--sp-80);padding-inline:var(--gutter)}
  .depoimentos__arrow svg{width:18px;height:18px}
  .depoimento__autor{margin-top:var(--sp-30)}
  .depoimentos__nav{margin-top:var(--sp-36)}
}

/* =======================================================================
   QUEM SOMOS
   ======================================================================= */

/* --- Banner ---
   A arte foi exportada em exatamente 1250px, a medida CRUA do --container.
   Por isso o max-width abre o gutter dos dois lados por cima dos 1250 (e nao
   desconta deles como .container faria): assim a imagem cai em 1250 exatos
   na tela larga, e ainda guarda a margem lateral do site quando a janela
   aperta -- sem os dois somados ela encostaria na borda entre 810 e 1250px.
   O padding-top e a altura da nav: aqui ela e clara e flutua sobre o fundo
   da pagina, entao o banner escuro comeca DEPOIS dela (diferente do hero da
   home, onde a nav entra por cima e troca de tema). */
.qs-banner{
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-top:calc(var(--nav-h) + var(--sp-50));
}
.qs-banner img{width:100%;height:auto}
@media (max-width:809.98px){
  .qs-banner{padding-top:calc(var(--nav-h) + var(--sp-30))}
}

/* A seção de texto entrega o respiro para as fotos logo abaixo: sem isso
   somava os 120 do container com os 50 do manifesto e os 60 das fotos. */
#quem-somos .container{padding-bottom:var(--sp-50)}
#quem-somos .manifesto{padding-bottom:0}
#socios .container{padding-top:0}

/* --- Sócios ---
   Fotos lado a lado na esquerda funcionando como abas; na direita uma caixa
   que troca de texto. Os dois paineis dividem a MESMA celula de grade
   (grid-area 1/1) e o que esta fora sai por visibility, nao por display:
   assim a altura da caixa e sempre a do maior texto e a troca nao empurra as
   fotos para cima e para baixo.
   align-items:start (e nao center) porque o texto tem de comecar na mesma
   linha do topo da foto -- o painel do Riva e bem mais alto que o do Arthur
   por causa da regua de premios, e centralizado os dois nunca casariam. */
.socios{
  display:grid;grid-template-columns:1.2fr 1fr;
  gap:var(--sp-60);align-items:start;
  margin-top:var(--sp-30);
}
.socios__fotos{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-20)}
.socio-foto{
  display:flex;flex-direction:column;gap:var(--sp-16);
  padding:0;border:none;background:none;color:inherit;
  text-align:left;cursor:pointer;
  /* a foto ativa ocupa sempre o slot colado no texto (2o da dupla); o JS
     anima a troca por transform (FLIP) quando o `order` muda de lugar. */
  order:1;
  transition:transform var(--dur-fluid) var(--ease-fluid);
}
.socio-foto.is-active{order:2}
.socio-foto img{
  /* height:auto e obrigatorio: sem ele o atributo height="875" do HTML entra
     como dica de apresentacao, o browser passa a ter as duas medidas e
     ignora o aspect-ratio -- a foto sairia esticada em 276x875. */
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  opacity:.34;
  transition:opacity var(--dur-fluid) var(--ease-fluid);
}
.socio-foto:hover img{opacity:.72}
.socio-foto.is-active img,
.socio-foto.is-active:hover img{opacity:1}
.socio-foto__nome{
  font-family:var(--sans);color:var(--text-dim);
  transition:color var(--dur-fluid) var(--ease-fluid);
}
.socio-foto:hover .socio-foto__nome{color:var(--text)}
.socio-foto.is-active .socio-foto__nome{color:var(--accent)}

/* So o painel ativo entra no fluxo; os outros saem por position:absolute.
   Assim a caixa tem exatamente a altura de quem esta em cena -- o painel do
   Riva e ~120px mais alto por causa da regua de premios, e se os dois
   dividissem a mesma celula sobraria um buraco desse tamanho embaixo do
   texto do Arthur. Quem suaviza a mudanca de altura e o JS (mede antes e
   depois e anima entre as duas); sem ele a troca ainda acontece certa, so
   que seca. */
.socios__textos{position:relative;transition:height var(--dur-fluid) var(--ease-fluid)}
.socio{
  position:absolute;top:0;left:0;width:100%;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--dur-fluid) var(--ease-fluid),
             transform var(--dur-fluid) var(--ease-fluid),
             visibility 0s linear var(--dur-fluid);
}
.socio.is-active{
  position:relative;
  opacity:1;visibility:visible;transform:none;
  transition:opacity var(--dur-fluid) var(--ease-fluid),
             transform var(--dur-fluid) var(--ease-fluid),
             visibility 0s;
}
.socio__cargo{font-family:var(--sans);color:var(--accent);margin-top:var(--sp-10)}
.socio__bio{margin-top:var(--sp-24)}

/* Régua de prêmios (hoje só no perfil do Riva).
   Mesmo tratamento do carrossel de clientes: a arte e PNG preto, entao
   brightness(0) normaliza qualquer cinza que venha no arquivo e a opacidade
   baixa o peso para a regua nao competir com a bio.

   Altura afinada uma a uma, como no carrossel. Os quatro arquivos ja vem
   sem margem morta (conferido: a caixa de tinta ocupa o canvas inteiro nos
   quatro), entao o desencontro aqui e de PROPORCAO e de peso, nao de sobra:
     one-show     1,35:1 e 41% de tinta -- o mais pesado, quase um bloco solido
     lurzers      1,55:1 e 33%
     premio-abril 2,92:1 e 34% -- deitado, na mesma altura fica com o dobro
                                  de tinta dos outros
     colunistas   1,46:1 e 18% -- script fino, na mesma altura some
   As alturas abaixo saem de equilibrar a AREA DE TINTA a meio caminho da
   altura igual: sobe o script, desce o lockup deitado. */
.socio__premios{
  margin-top:var(--sp-30);padding-top:var(--sp-24);
  border-top:1px solid var(--border-soft);
}
.socio__premios-titulo{margin-bottom:var(--sp-16)}
.socio__premios-lista{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-20) var(--sp-30);
}
.socio__premios-lista img{
  height:42px;width:auto;object-fit:contain;
  filter:brightness(0);opacity:.5;
}
.socio__premios-lista img[src*="one-show"]{height:40px}
.socio__premios-lista img[src*="lurzers-archive"]{height:42px}
.socio__premios-lista img[src*="premio-abril"]{height:34px}
.socio__premios-lista img[src*="premio-colunistas"]{height:48px}

.socios__cta{display:flex;justify-content:center;margin-top:var(--sp-100)}

@media (max-width:1199.98px){
  .socios{grid-template-columns:1fr;gap:var(--sp-50);align-items:start}
  .socios__fotos{max-width:520px}
  /* Nesta largura a descricao cai ABAIXO das fotos, entao "colada no texto"
     deixa de fazer sentido -- as duas ficam sempre na ordem original, sem
     o vai-e-vem ao trocar de aba (o JS ja vira no-op sozinho: sem mudanca
     de `order` no CSS, o FLIP calcula delta zero e nao anima nada). */
  .socio-foto.is-active{order:1}
}
@media (max-width:809.98px){
  .socios{margin-top:var(--sp-20);gap:var(--sp-30)}
  .socios__fotos{gap:var(--sp-12)}
  .socio-foto{gap:var(--sp-10)}
  .socios__cta{margin-top:var(--sp-60)}
  .socio__premios-lista{gap:var(--sp-16) var(--sp-24)}
  .socio__premios-lista img{height:32px}
  .socio__premios-lista img[src*="one-show"]{height:30px}
  .socio__premios-lista img[src*="lurzers-archive"]{height:32px}
  .socio__premios-lista img[src*="premio-abril"]{height:26px}
  .socio__premios-lista img[src*="premio-colunistas"]{height:36px}
}

/* =======================================================================
   PÁGINA DE PROJETO
   Modelo para todas as páginas de case (CBN Floripa é a primeira). Mesma
   logica do .qs-banner para o KV -- so que aqui pode ser video ou imagem.
   ======================================================================= */
.projeto-kv{
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-top:calc(var(--nav-h) + var(--sp-50));
}
.projeto-kv video,.projeto-kv img{width:100%;height:auto;display:block}
@media (max-width:809.98px){
  .projeto-kv{padding-top:calc(var(--nav-h) + var(--sp-30))}
}

/* --- Cabeçalho + texto corrido ---
   Grade de 2 colunas reaproveitada duas vezes na página: uma para
   cabecalho+apresentacao, outra (sem a coluna da esquerda) so para o
   conceito continuar na MESMA coluna de texto depois da quebra de imagens.
   .projeto-copy usa a mesma familia/peso/escala do .depoimento__quote (pedido
   do cliente) -- so o line-height abriu de 1.18 para 1.32, porque aquele
   valor foi calibrado para 2-3 linhas de citação e aqui o texto e um
   paragrafo corrido, bem mais longo. */
/* Respiro entre o video e o cabecalho/apresentacao logo abaixo -- e entre a
   apresentacao e a primeira imagem cheia que vem depois dela. O padding-top
   (somado aos --sp-30 de margin-top do .projeto-rail) fica igual ao respiro
   ACIMA do video (--nav-h + --sp-50 no .projeto-kv) pra o video ficar
   centralizado entre a nav e o cabecalho, nao colado num dos dois lados. */
#projeto-cabecalho .container{padding-top:var(--sp-100);padding-bottom:var(--sp-80)}
@media (max-width:809.98px){
  #projeto-cabecalho .container{padding-top:var(--sp-80);padding-bottom:var(--sp-60)}
}
.projeto-rail{
  display:grid;grid-template-columns:1fr minmax(0,46ch);
  gap:var(--sp-50) var(--sp-60);
  align-items:start;
  margin-top:var(--sp-30);
}
.projeto-rail__meta{display:flex;flex-direction:column;gap:var(--sp-30)}
.projeto-meta__campo{display:flex;flex-direction:column;gap:var(--sp-8)}
.projeto-copy{
  grid-column:2;
  font-family:var(--sora);font-weight:300;
  font-size:clamp(18px,2vw,28px);line-height:1.32;letter-spacing:-0.02em;
  /* A coluna e travada em 46ch, entao a quebra e sempre a mesma em qualquer
     largura de desktop -- inclusive as linhas finais curtas. O tracking mais
     fechado foi pedido do cliente; o text-wrap:pretty e' a trava de verdade,
     ele puxa palavra da penultima linha quando a ultima ficaria orfa. Onde o
     navegador nao suportar, o &nbsp; no HTML do paragrafo segura o caso. */
  text-wrap:pretty;
}
@media (max-width:1199.98px){
  .projeto-rail{grid-template-columns:1fr;gap:var(--sp-30)}
  .projeto-copy{grid-column:1}
}

/* --- Imagens de apoio ---
   Uma imagem cheia nos 1250px do container, depois duas dividindo o mesmo
   espaço -- mesma tecnica do .qs-banner/.projeto-kv (max-width soma o
   gutter dos dois lados por cima do --container pra a imagem cair em 1250
   exatos, em vez dos ~1110 que o .container abre por padrao). */
.projeto-midia{
  flex:1;min-width:0;
  max-width:calc(var(--container) + var(--gutter) * 2);
  padding-inline:var(--gutter);
  display:flex;flex-direction:column;gap:var(--sp-16);
}
.projeto-midia img{width:100%;height:auto;display:block}
.projeto-midia__par{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16)}
/* Trio -- usado quando as peças são retrato (páginas de manifesto da NSC),
   onde duas por linha deixariam cada uma alta demais. */
.projeto-midia__trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-16)}
@media (max-width:1199.98px){
  .projeto-midia__trio{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:809.98px){
  .projeto-midia__par{grid-template-columns:1fr}
  .projeto-midia__trio{grid-template-columns:1fr}
}

/* Respiro antes do conceito retomar -- mais curto que o da apresentação, o
   texto aqui volta logo em seguida da dupla de imagens. */
#projeto-conceito .container{padding-top:var(--sp-50);padding-bottom:var(--sp-60)}

/* --- Galeria ---
   Peças estáticas empilhadas em linhas que alternam cheia (1250px) e dupla
   (duas dividindo o espaço) -- pedido do cliente pra nao seguir uma regra
   fixa de grade; a ordem de cada projeto e escolhida caso a caso. */
/* O id cobre o case de uma galeria só; a classe existe porque um case com
   fases (NSC) repete o bloco uma vez por etapa -- e nesse caso ainda vem
   conteúdo embaixo, então o rodapé do bloco é mais curto. */
#projeto-galeria .container,.projeto-galeria-bloco .container{padding-top:0}
.projeto-galeria-bloco .container{padding-bottom:var(--sp-60)}

/* Blocos de texto que entram DEPOIS de mídia/galeria: o respiro de cima vem
   do bloco anterior, então aqui ele encolhe (ou zera) pra não somar duas
   vezes. Mesma lógica já aplicada em #projeto-conceito. */
#projeto-naming .container{padding-top:var(--sp-50);padding-bottom:var(--sp-60)}
#projeto-resultados .container{padding-top:0}
.projeto-galeria{display:flex;flex-direction:column;gap:var(--sp-16)}
.projeto-galeria img{width:100%;height:auto;display:block}
.projeto-galeria__par{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16)}
/* Trio -- peças retrato (páginas de manifesto da NSC), onde duas por linha
   deixariam cada uma alta demais. */
.projeto-galeria__trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-16)}
@media (max-width:809.98px){
  .projeto-galeria__par,.projeto-galeria__trio{grid-template-columns:1fr}
}

/* --- Players dentro de mídia/galeria (campanhas com filme, caso da NSC) ---
   Mesmo comportamento das imagens, mas SEM o cursor de zoom: o lightbox do
   fabra.js só pega `img`, e um vídeo precisa dos próprios controles. */
.projeto-midia video,.projeto-galeria video{
  width:100%;height:auto;display:block;background:var(--f-preto);
}

/* --- Texto corrido no meio da narrativa (NSC) ---
   Bloco so de parágrafo, na mesma coluna da direita do cabeçalho, usado
   quando o case retoma o texto entre duas levas de imagens. Respiro de cima
   menor que o de uma seção nova: o assunto continua o mesmo.
   (Antes isso era .projeto-fase, com rótulo "Primeira fase / 01" na coluna
   da esquerda -- o cliente pediu pra tirar a numeração de fases.) */
.projeto-texto .container{padding-top:var(--sp-80);padding-bottom:var(--sp-50)}
/* Quando o texto vem logo DEPOIS de uma galeria, o respiro de cima ja chegou
   pronto: --sp-60 do rodape da galeria mais os --sp-30 de margin-top do
   .projeto-rail. Somar o --sp-80 daqui dava 170px -- o dobro do que separa os
   outros blocos de texto das mesmas paginas. Zerando, fica em 90, na mesma
   faixa do #projeto-conceito (80).
   O seletor de irmao adjacente e' o ponto: o texto que vem depois de um
   .projeto-midia (caso do primeiro bloco da NSC) nao recebe respiro nenhum de
   cima e continua precisando dos --sp-80. */
.projeto-galeria-bloco + .projeto-texto .container,
/* O segundo seletor existe so pra ganhar do `#projeto-conceito .container`,
   que e por ID e por isso vence a linha de cima: na Top of Mind o bloco de
   texto do meio da narrativa e justamente o #projeto-conceito. */
.projeto-galeria-bloco + #projeto-conceito .container{padding-top:0}
@media (max-width:809.98px){
  .projeto-texto .container{padding-top:var(--sp-50);padding-bottom:var(--sp-30)}
  .projeto-galeria-bloco + .projeto-texto .container,
  .projeto-galeria-bloco + #projeto-conceito .container{padding-top:0}
}
/* Fecho do case (NSC): esse bloco e' o ultimo antes do rodape, nao um texto
   no meio da narrativa -- os 90px herdados da regra acima (a mesma que serve
   a Top of Mind, onde o conceito continua no meio da pagina) ficavam colados
   na imagem de cima. Aqui ele reganha respiro proprio pra fechar o case. */
.projeto-galeria-bloco + #projeto-conceito.projeto-fecho .container{padding-top:var(--sp-30)}

/* --- Resultado com gráfico (BVIX) ---
   Dois marcos reais (2024 = 0, 2025 = R$ 100 mi), então quem conta a história
   é o número: a barra logo abaixo encena o percurso de zero até ele. Barra e
   contador são animados juntos pelo fabra.js, no mesmo rAF e com a mesma
   curva -- por isso a largura NÃO tem transition aqui.
   Sem moldura e sem cantos arredondados (pedido do cliente): o bloco vive
   dentro da coluna de texto, alinhado com o parágrafo acima dele. */
.grafico{
  grid-column:2;
  margin-top:var(--sp-50);
}
@media (max-width:1199.98px){
  /* Mesma quebra do .projeto-copy: nesta largura o rail vira coluna única. */
  .grafico{grid-column:1}
}

/* Lettering conforme referencia do cliente: Sora Light, "R$" no mesmo corpo
   do numero e colado nele, "MI" menor apoiado na mesma linha de base.
   O baseline do flex e' o que alinha o "MI" -- com align-items:center ele
   flutuaria no meio da altura do numero.
   proportional-nums (e NAO tabular): no tabular o "1" recebe a mesma largura
   de avanco do "0" -- 48px pra um glifo de 28px -- e sobra um buraco dos dois
   lados dele, visivel entre o "$" e o primeiro zero. Com proporcional cada
   algarismo fica com o avanco que foi desenhado pra ele. A largura fixa que o
   tabular dava pra animacao de contagem e' reposta pelo min-width que o
   fabra.js calcula a partir do valor final. */
.grafico__valor{
  display:flex;align-items:baseline;
  font-family:var(--sora);font-weight:300;
  font-size:clamp(38px,8vw,96px);line-height:1;letter-spacing:-0.05em;
  color:var(--text);
  font-variant-numeric:proportional-nums;
}
.grafico__moeda{font-size:1em}
.grafico__unidade{font-size:.38em;letter-spacing:-0.01em;margin-left:.06em}
.grafico__numero{display:inline-block;text-align:left}
/* Escala propria (nao --fs-body, que e 12px): na referencia a legenda vem
   logo abaixo do numero e num corpo proporcional a ele, ~1/4 do tamanho. */
.grafico__legenda{
  margin-top:var(--sp-8);
  font-family:var(--sora);font-weight:300;
  font-size:clamp(14px,1.8vw,24px);line-height:1.3;letter-spacing:-0.02em;
  color:var(--text-dim);
}

/* Corte reto, sem borda. O trecho ainda nao preenchido fica num laranja
   rebaixado -- o mesmo accent diluido no fundo da pagina, pra a barra inteira
   pertencer a mesma familia de cor. O hex antes do color-mix e a saida
   equivalente, pra navegador sem suporte nao cair num trilho transparente. */
.grafico__barra{
  margin-top:var(--sp-30);
  height:clamp(24px,3.2vw,40px);
  background:#E9BFA7;
  background:color-mix(in srgb, var(--accent) 28%, var(--bg));
  overflow:hidden;
}
.grafico__preenche{
  width:0;height:100%;
  background:var(--accent);
}
.grafico.is-in .grafico__preenche{width:100%}

.grafico__anos{
  display:flex;justify-content:space-between;
  margin-top:var(--sp-12);color:var(--text-dim);
}
/* Sem animacao por preferencia do sistema: o fabra.js escreve o valor final e
   crava a barra em 100% de uma vez, sem passar pelo rAF. */

/* As imagens de midia/galeria abrem em tela cheia ao clicar (ver fabra.js). */
.projeto-midia img,.projeto-galeria img{cursor:zoom-in}

/* =======================================================================
   LIGHTBOX
   Um unico overlay por pagina, criado pelo JS na primeira vez que alguma
   imagem de projeto e clicada -- nao precisa de marcacao no HTML, entao
   qualquer pagina de case futura ganha isso de graca so por usar as classes
   .projeto-midia/.projeto-galeria.
   ======================================================================= */
.lightbox{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-30);
  background:rgba(0,0,0,.92);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-fluid) var(--ease-fluid),visibility 0s linear var(--dur-fluid);
}
.lightbox.is-open{
  opacity:1;visibility:visible;
  transition:opacity var(--dur-fluid) var(--ease-fluid),visibility 0s;
}
.lightbox__img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lightbox__close{
  position:absolute;top:var(--sp-20);right:var(--sp-20);z-index:1;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;
  cursor:pointer;
}
.lightbox__close svg{width:18px;height:18px}
@media (max-width:809.98px){
  .lightbox{padding:var(--sp-16)}
  .lightbox__close{top:var(--sp-12);right:var(--sp-12)}
}

/* =======================================================================
   RODAPÉ
   ======================================================================= */
.footer{border-top:1px solid var(--border-soft)}
.footer__inner{
  display:flex;flex-wrap:wrap;gap:var(--sp-50) var(--sp-30);
  align-items:flex-end;justify-content:space-between;
}
.footer__brand{display:flex;flex-direction:column;gap:var(--sp-20)}
.footer__logo{width:150px;color:var(--text)}
.footer__nav{display:flex;flex-direction:column;gap:var(--sp-12);align-items:flex-start}
.footer__nav a{
  color:var(--text);text-transform:uppercase;
  font-family:var(--sans);
  font-size:var(--fs-ui);letter-spacing:.09em;
  transition:color var(--dur-fluid) var(--ease-fluid);
}
.footer__nav a:hover{color:var(--accent)}

/* redes: so o icone */
.footer__links{display:flex;align-items:center;gap:var(--sp-12)}
.footer__links a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  border:1px solid var(--border);border-radius:var(--r-pill);
  color:var(--text-muted);
  transition:color var(--dur-fluid) var(--ease-fluid),
             border-color var(--dur-fluid) var(--ease-fluid),
             transform var(--dur-fluid) var(--ease-fluid);
}
.footer__links a:hover{color:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.footer__links a svg{width:18px;height:18px;flex:none}

/* =======================================================================
   PÁGINA DE CONTATO
   Sem banner (nao ha imagem para a pagina) -- a propria intro assume o
   respiro do topo, no lugar do .qs-banner/.projeto-kv das outras internas.
   Chamada primeiro, formulario depois, ocupando a area de leitura toda
   (--container, os mesmos 1250px do resto do site) -- nao e um layout de
   2 colunas como .socios/.projeto-rail; so os PARES de campos dentro do
   formulario (nome/sobrenome, empresa/cargo) usam 2 colunas, e so essa
   grade interna quebra pra 1 coluna no mobile. */
#contato-intro .container{padding-top:calc(var(--nav-h) + var(--sp-100))}
@media (max-width:809.98px){
  #contato-intro .container{padding-top:calc(var(--nav-h) + var(--sp-60))}
}
#contato-form .container{padding-top:0}

.form__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-20) var(--sp-20);
}
.campo{display:flex;flex-direction:column}
.campo--full{grid-column:1 / -1}
/* rotulo real fica .sr-only no HTML (leitor de tela); quem representa o
   campo pro olho e o placeholder, dentro da pilula -- ver referencia do
   cliente. Excecao: o campo-check usa rotulo visivel normalmente. */

/* Campos na MESMA cor do fundo da pagina -- quem desenha a pilula e o
   stroke cinza fino, nao o preenchimento. No foco a borda vira laranja. */
.campo input,.campo textarea{
  width:100%;border:1px solid var(--border);background:var(--bg);
  border-radius:var(--r-full);
  padding:var(--sp-30);
  font-family:var(--telegraf);font-size:var(--fs-body-lg);color:var(--text);
  transition:border-color var(--dur-fluid) var(--ease-fluid);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--text);opacity:.55}
.campo input:focus,.campo textarea:focus{border-color:var(--accent);outline:none}
.campo textarea{
  border-radius:32px;resize:vertical;min-height:220px;line-height:var(--lh-body-lg);
}

/* opt-in de newsletter -- mesma pilula dos campos, so que com o checkbox */
.campo-check{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:var(--sp-16);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-full);
  padding:var(--sp-24) var(--sp-30);
  margin-top:var(--sp-10);
}
.campo-check input[type="checkbox"]{
  width:22px;height:22px;flex:none;margin:0;accent-color:var(--accent);cursor:pointer;
}
.campo-check label{
  font-family:var(--telegraf);font-size:var(--fs-body-lg);color:var(--text);cursor:pointer;
}

.form__envio{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:var(--sp-20);
  margin-top:var(--sp-10);
}
.form__aviso{font-size:var(--fs-body);color:var(--text-dim);opacity:0;transition:opacity var(--dur-fluid) var(--ease-fluid)}
.form__aviso.is-visivel{opacity:1}
/* vazio nao ocupa lugar: no mobile o .form__envio vira coluna com gap, e um
   <p> sem texto ainda abriria 16px de espaco embaixo do botao */
.form__aviso:empty{display:none}
.form__aviso.is-erro{color:var(--accent)}
.form__aviso a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.btn-cta:disabled{opacity:.6;cursor:progress}

@media (max-width:809.98px){
  .form__grid{grid-template-columns:1fr;gap:var(--sp-16)}
  .campo input,.campo textarea{padding:var(--sp-24)}
  .campo-check{padding:var(--sp-20) var(--sp-24)}
  .form__envio{flex-direction:column;align-items:flex-start;gap:var(--sp-16)}
}

/* =======================================================================
   PONTOS DE COR CRAVADA
   O que nao passa por token e precisa acompanhar o fundo claro.
   ======================================================================= */
.nav__menu{background:rgba(0,0,0,.06)}
.nav__menu a:hover{background:rgba(0,0,0,.10)}
.nav__sep{background:rgba(0,0,0,.18)}
.btn-ghost{border-color:rgba(0,0,0,.30);background:rgba(225,223,221,.32)}
.btn-ghost:hover{border-color:var(--text);background:rgba(0,0,0,.06)}
/* os logos sao PNG preto: nao invertem */
.marquee__item img{filter:brightness(0)}
/* overlay clareia sobre escuro; sobre claro quem da textura e multiply */
.hero__grain{mix-blend-mode:multiply;opacity:.055}

/* --- Nav sobre o hero ---------------------------------------------------
   O hero e escuro (era o portao, hoje e a cena 3D) e a pagina e clara. Sobre
   ele a nav volta aos tons escuros e so clareia quando o hero passa. Como
   toda a nav le token, basta redeclarar os PAPEIS no escopo dela: as custom
   properties descem por heranca para logo, links, separador e o degrade. */
.nav--sobre-hero{
  --bg:          #000000;
  --text:        #E2DFDC;
  --text-muted:  #B4B2AE;
  --text-dim:    #8E8F8D;
  --border:      #343A3F;
}
/* os tres pontos cravados nao herdam token: voltam a mao */
.nav--sobre-hero .nav__menu{background:rgba(226,223,220,.09)}
.nav--sobre-hero .nav__menu a:hover{background:rgba(226,223,220,.16)}
.nav--sobre-hero .nav__sep{background:rgba(226,223,220,.20)}

/* =======================================================================
   REVEAL — entrada com a mola
   ======================================================================= */
.reveal{opacity:.001;transform:translateY(22px)}
.reveal.is-in{opacity:1;transform:none;
  transition:opacity 520ms var(--ease),transform 760ms var(--spring)}
.reveal-d1.is-in{transition-delay:70ms}
.reveal-d2.is-in{transition-delay:140ms}
.reveal-d3.is-in{transition-delay:210ms}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none} }