/* ==========================================================================
   SENA CREATIVE STUDIO
   A página alterna silêncio e voz: faixas pretas e faixas laranja inteiras.
   O laranja é a cor do bloco da assinatura; onde o fundo é laranja, o bloco fica preto.
   Tipografia: Unbounded (títulos, a versão livre mais próxima da Neue Machina do brief)
   e Archivo (texto). Nada de rótulos em caixa-alta espaçada nem fonte mono.

   01 Tokens · 02 Base · 03 Tipografia e fundos · 04 O ponto · 05 Botões · 06 Ambiente
   07 Header · 08 Hero de scroll · 09 Hero estático · 10 A SENA · 11 Projetos
   12 Serviços · 13 Sobre · 14 Processo · 15 CTA e formulário · 16 Footer
   17 Responsivo · 18 Acessibilidade e telas
   ========================================================================== */

/* ============================ 01 TOKENS ============================ */
:root{
  --black:#0B0B0B;
  --off-white:#F4F3EF;
  --gray-dark:#2A2A2A;
  --gray-mid:#8C8C8C;          /* 5.9:1 sobre o preto */
  --orange:#FF3714;
  --orange-deep:#D42A0B;       /* números do processo sobre o papel: 4.6:1 */

  --canvas:var(--black);
  --text:var(--off-white);
  --muted:var(--gray-mid);
  --accent:var(--orange);      /* a cor do bloco e dos detalhes na faixa atual */
  --rule:rgba(244,243,239,.16);
  --rule-strong:rgba(244,243,239,.45);

  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  --gutter:clamp(1.25rem,5vw,6rem);
  --section:clamp(5.5rem,12vw,11rem);
  --maxw:1560px;
  --pad-x:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));

  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-soft:cubic-bezier(.45,.05,.25,1);

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
}

/* ============================ 02 BASE ============================ */
*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--canvas);
  overflow-x:hidden; overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}
body{
  margin:0;
  background:var(--canvas);
  overflow-x:hidden; overflow-x:clip;
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(1rem,1.1vw,1.15rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  animation:pageIn .8s var(--ease) both;
}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,figure,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--orange);color:var(--black)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
main:focus{outline:none}

.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--orange);color:var(--black);padding:.8rem 1.2rem;font-weight:600}
.skip-link:focus{left:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================ 03 TIPOGRAFIA E FUNDOS ============================ */
.section{position:relative;padding:var(--section) var(--pad-x)}
.display{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,6.2vw,6.4rem);
  line-height:.98;letter-spacing:-.035em;text-transform:uppercase;
}
.label{font-size:.92rem;font-weight:500;color:var(--muted);line-height:1.4}
.label i{font-style:normal;margin:0 .45em;color:var(--accent)}

/* Faixa laranja: o texto vira preto e o bloco da assinatura também. */
.on-orange{
  background:var(--orange);color:var(--black);
  --text:var(--black);--muted:rgba(11,11,11,.82);--accent:var(--black);
  --rule:rgba(11,11,11,.28);--rule-strong:var(--black);
}
.on-orange ::selection{background:var(--black);color:var(--orange)}
/* Faixa de papel: só o processo. */
.on-paper{
  background:var(--off-white);color:var(--black);
  --text:var(--black);--muted:#4B4B4B;--accent:var(--orange-deep);
  --rule:rgba(11,11,11,.16);--rule-strong:rgba(11,11,11,.5);
}

/* ============================ 04 O PONTO (a assinatura) ============================ */
/* O bloco do logo: um paralelogramo inclinado. Pontua todo título grande da página. */
.dot{
  display:inline-block;width:.3em;height:.3em;margin-left:.08em;
  background:var(--accent);transform:skewX(-12deg);
}
.dot--inline{width:.24em;height:.24em}
.dot--ink{background:var(--black)}

/* ============================ 05 BOTÕES ============================ */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3rem;padding:.9em 1.6em;
  font-family:var(--body);font-weight:600;font-size:clamp(.98rem,1vw,1.05rem);
  border:2px solid currentColor;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}


.btn--primary{background:var(--orange);border-color:var(--orange);color:var(--black)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--off-white);border-color:var(--off-white)}
.btn--ghost{color:var(--off-white);border-color:var(--rule-strong)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--orange);border-color:var(--orange);color:var(--black)}
.btn--ink{background:var(--black);border-color:var(--black);color:var(--off-white);font-size:clamp(1.02rem,1.2vw,1.2rem);padding:1em 2em;justify-self:start}
.btn--ink:hover,.btn--ink:focus-visible{background:var(--off-white);border-color:var(--off-white);color:var(--black)}
.btn--line{color:var(--black);border-color:var(--black);justify-self:start}
.btn--line:hover,.btn--line:focus-visible{background:var(--black);color:var(--orange)}

/* ============================ 06 AMBIENTE ============================ */
/* A névoa do vídeo continua atrás das faixas pretas, em deriva lenta. */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--canvas)}
.ambient__haze{position:absolute;width:90vmax;height:90vmax;border-radius:50%}
.hero-in .ambient__haze{animation-play-state:paused}
.ambient__haze--a{left:-30vmax;top:-20vmax;background:radial-gradient(circle,rgba(122,130,140,.10) 0%,rgba(122,130,140,0) 62%);animation:hazeA 90s var(--ease-soft) -30s infinite alternate}
.ambient__haze--b{right:-35vmax;bottom:-35vmax;background:radial-gradient(circle,rgba(255,55,20,.05) 0%,rgba(255,55,20,0) 60%);animation:hazeB 110s var(--ease-soft) -50s infinite alternate}
@keyframes hazeA{to{transform:translate(25vmax,30vmax)}}
@keyframes hazeB{to{transform:translate(-30vmax,-20vmax)}}
.ambient__grain{position:absolute;inset:-50%;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ============================ 07 HEADER ============================ */
.header{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;transition:background .5s var(--ease),border-color .5s var(--ease)}
.header.is-stuck{background:rgba(11,11,11,.9);backdrop-filter:blur(14px);border-bottom-color:rgba(244,243,239,.12)}
.header__inner{max-width:var(--maxw);margin-inline:auto;padding:clamp(1rem,2vw,1.4rem) var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:2rem}
.logo{
  display:inline-flex;align-items:baseline;gap:.1em;line-height:1;
  font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,1.9vw,1.6rem);
  letter-spacing:-.04em;color:var(--off-white);text-shadow:var(--tshadow);
  padding:.5rem 0;margin:-.5rem 0; /* alvo de toque maior sem mexer no layout */
}
.logo__dot{width:.28em;height:.28em;background:var(--orange);transform:skewX(-12deg);transition:transform .4s var(--ease)}
.logo:hover .logo__dot{transform:skewX(-12deg) translateY(-.25em)}
.nav{display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.75rem)}
.nav__list{display:flex;gap:clamp(1rem,2.2vw,2.2rem)}
.nav__list a{
  position:relative;display:inline-block;padding:.4em 0;
  font-weight:500;font-size:clamp(.92rem,.95vw,1rem);
  color:rgba(244,243,239,.8);text-shadow:var(--tshadow);transition:color .35s var(--ease);
}
.nav__list a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav__list a:hover,.nav__list a:focus-visible,.nav__list a.is-active{color:var(--off-white)}
.nav__list a:hover::after,.nav__list a:focus-visible::after,.nav__list a.is-active::after{transform:scaleX(1);transform-origin:left}
.nav__cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.6em 1.2em;
  font-weight:600;font-size:clamp(.92rem,.95vw,1rem);
  background:var(--orange);color:var(--black);border:2px solid var(--orange);
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.nav__cta:hover,.nav__cta:focus-visible{background:var(--off-white);border-color:var(--off-white)}
.burger{display:none;width:2.75rem;height:2.75rem;padding:.65rem;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;gap:.4rem;position:relative;z-index:2}
.burger span{display:block;height:2px;background:var(--off-white);transition:transform .4s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(.3rem) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-.3rem) rotate(-45deg)}

/* ============================ 07b IDIOMAS ============================ */
/* Três bandeiras no menu. A da página atual fica acesa; as outras, apagadas até o toque. */
.langs{display:flex;align-items:center;gap:.35rem}
.langs__a{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border:2px solid transparent;opacity:.55;
  transition:opacity .3s var(--ease),border-color .3s var(--ease);
}
.langs__a svg{width:22px;height:16px;display:block;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.langs__a:hover,.langs__a:focus-visible{opacity:1}
.langs__a.is-current{opacity:1;border-color:var(--orange)}

/* ============================ 08 HERO DE SCROLL ============================ */
/* Sem JS: hero de uma tela. Com JS: 360vh de jornada enquanto o bloco cai. */
.hero{position:relative;height:100vh}
.js .hero{height:360vh}

.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background-color:#15161a;background-size:cover;background-position:70% 60%;
}
.poster{position:absolute;inset:0;background-size:cover;background-position:center}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready .hero__video{opacity:1}
/* O trecho de flutuação: aparece devagar com a página parada no topo, some rápido ao rolar. */
.hero__idle{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s var(--ease)}
.stage.idle-on .hero__idle{opacity:1;transition:opacity .9s var(--ease)}
.stage.video-failed .hero__video{display:none}

/* ---------- Movimento de fundo do hero ----------
   Só transform e opacidade. Anima só com o hero na tela (.live) e para com a aba escondida.
   --gx/--gy: onde o bloco pousa na tela, calculado pelo JS a partir do corte da imagem. */
.still{display:none}
/* A cena passa um pouco das bordas do palco para a flutuação de câmera nunca mostrar canto vazio.
   Sem rotação: girar o vídeo, mesmo meio grau, reamostra todos os pixels e amolece a imagem. */
.scene{position:absolute;inset:-3vh -2vw}
.hero.live .scene{animation:camFloat 7s var(--ease-soft) -2.5s infinite alternate}
@keyframes camFloat{
  0%{transform:translate3d(-1vw,1.2vh,0)}
  50%{transform:translate3d(.4vw,-.4vh,0)}
  100%{transform:translate3d(1vw,-1.2vh,0)}
}

/* Fumaça com textura: ruído gerado com o ffmpeg e salvo com transparência (fumaca.webp).
   Nada de mix-blend-mode aqui: em camadas grandes animadas o Chrome desenhou uma linha vertical
   na junção dos pedaços da camada. A camada vai e volta. */
.fx__smoke{position:absolute;top:-10%;left:-30vw;height:120%;width:calc(100% + 30vw);will-change:transform;
  background:url("../img/fumaca.webp") center / 100% 100% no-repeat}
.fx__smoke--far{opacity:.9}
.fx__smoke--core{left:calc(var(--gx,69%) - 34vw);top:calc(var(--gy,67%) - 52vh);width:68vw;height:84vh;opacity:.95;
  -webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%)}
.hero.live .fx__smoke--core{animation:smokeSwirl 22s linear infinite}
@keyframes smokeSwirl{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.15)}100%{transform:rotate(360deg) scale(1)}}
.fx__smoke--near{opacity:.7;transform:scaleY(-1) translate3d(30vw,0,0)}
.hero.live .fx__smoke--far{animation:smokeFar 15s var(--ease-soft) -5s infinite alternate}
.hero.live .fx__smoke--near{animation:smokeNear 11s var(--ease-soft) -3s infinite alternate}
@keyframes smokeFar{from{transform:translate3d(0,0,0)}to{transform:translate3d(30vw,0,0)}}
@keyframes smokeNear{from{transform:scaleY(-1) translate3d(30vw,0,0)}to{transform:scaleY(-1) translate3d(0,0,0)}}

/* O facho que atravessa a cena na diagonal, uma passada a cada 5s. */
.fx__sweep{position:absolute;top:-30%;left:0;width:18vw;height:160%;opacity:0;
  background:linear-gradient(90deg,rgba(220,228,236,0) 0%,rgba(224,232,240,.34) 50%,rgba(220,228,236,0) 100%);
  transform:translate3d(20vw,0,0) rotate(16deg)}
.hero.live .fx__sweep{animation:sweep 5s var(--ease-soft) -1.2s infinite}
@keyframes sweep{
  0%{opacity:0;transform:translate3d(30vw,0,0) rotate(16deg)}
  12%{opacity:1}
  55%{opacity:1}
  68%{opacity:0;transform:translate3d(110vw,0,0) rotate(16deg)}
  100%{opacity:0;transform:translate3d(110vw,0,0) rotate(16deg)}
}

/* A imagem inteira respira: aproximação lenta e contínua, ancorada no ponto do pouso. */
.media{position:absolute;inset:0;transform-origin:var(--gx,69%) var(--gy,67%);will-change:transform}
.hero.live .media{animation:pushIn 9s var(--ease-soft) -3s infinite alternate}
/* A máscara apaga o movimento na coluna do texto: névoa clara atrás das palavras derruba o contraste. */
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 58%,#000 82%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 58%,#000 82%)}
.fx__haze{position:absolute;border-radius:50%;will-change:transform}
.fx__haze--a{left:38%;top:8%;width:62vw;height:52vh;background:radial-gradient(closest-side,rgba(172,182,194,.30),rgba(172,182,194,0))}
.fx__haze--b{left:52%;top:38%;width:54vw;height:46vh;background:radial-gradient(closest-side,rgba(156,166,178,.24),rgba(156,166,178,0))}
.fx__haze--c{left:30%;top:66%;width:80vw;height:34vh;background:radial-gradient(closest-side,rgba(146,156,166,.22),rgba(146,156,166,0))}
.hero.live .fx__haze--a{animation:hazeDriftA 13s var(--ease-soft) -5s infinite alternate}
.hero.live .fx__haze--b{animation:hazeDriftB 17s var(--ease-soft) -7s infinite alternate}
.hero.live .fx__haze--c{animation:hazeDriftA 20s var(--ease-soft) -12s infinite alternate-reverse}
@keyframes hazeDriftA{from{transform:translate3d(-14vw,1vh,0) scale(.95)}to{transform:translate3d(14vw,-3vh,0) scale(1.12)}}
@keyframes hazeDriftB{from{transform:translate3d(12vw,2vh,0) scale(1.08)}to{transform:translate3d(-15vw,-2vh,0) scale(.92)}}

.fx__beam{position:absolute;top:-12%;width:24vw;height:92vh;transform:translateX(-50%) rotate(-3deg);transform-origin:50% 0;opacity:.55;background:radial-gradient(ellipse 50% 100% at 50% 0%,rgba(214,223,233,.46),rgba(214,223,233,0) 72%)}
.fx__beam--a{left:66%}
.fx__beam--b{left:80%;transform:translateX(-50%) rotate(4deg)}
.hero.live .fx__beam--a{animation:beamBreath 3.2s var(--ease-soft) -1.2s infinite alternate}
.hero.live .fx__beam--b{animation:beamBreath 4.2s var(--ease-soft) -3s infinite alternate}
@keyframes beamBreath{from{opacity:.15}to{opacity:1}}

/* Poeira fora da coluna de texto: nasce na metade direita. */
.fx__dust i,.fx__sparks i,.fx__bokeh i{position:absolute;border-radius:50%;opacity:0}
.fx__dust i{background:rgba(244,243,239,.9)}
.fx__land{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.fx__glow{position:absolute;left:var(--gx,69%);top:var(--gy,67%);width:30vw;height:16vw;transform:translate(-50%,-40%);border-radius:50%;opacity:.7;background:radial-gradient(closest-side,rgba(255,90,40,.42),rgba(255,55,20,.16) 48%,rgba(255,55,20,0))}
.hero.live .fx__glow{animation:glowPulse 3s var(--ease-soft) -.9s infinite alternate}
@keyframes glowPulse{from{opacity:.45;transform:translate(-50%,-40%) scale(.94)}to{opacity:1;transform:translate(-50%,-40%) scale(1.06)}}
.fx__sparks i{top:calc(var(--gy,67%) - 1vh);box-shadow:0 0 6px rgba(255,80,30,.8)}

/* ---------- A poeira do pouso ----------
   Três sopros de fumaça nascem no ponto em que o bloco encosta e abrem para os lados.
   Tocam uma vez só: o JS põe a classe is-on no quadro do impacto e tira quando o
   visitante volta ao topo, para o pouso poder acontecer de novo. */
.fx__impact{position:absolute;left:var(--gx,69%);top:var(--gy,67%);width:0;height:0;pointer-events:none}
.fx__puff{
  position:absolute;left:0;top:0;width:26vw;height:13vw;opacity:0;
  background:url("../img/fumaca.webp") center / 150% 150% no-repeat;
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);
  transform:translate(-50%,-30%) scale(.3);
}
.fx__impact.is-on .fx__puff{animation:puff 1.6s var(--ease) forwards}
.fx__puff--esq{--dx:-42%;--dy:-46%}
.fx__puff--dir{--dx:42%;--dy:-44%;animation-delay:.05s;transform:translate(-50%,-30%) scale(.3) scaleX(-1)}
.fx__puff--meio{--dx:0%;--dy:-68%;width:18vw;height:14vw}
.fx__impact.is-on .fx__puff--dir{animation-delay:.06s}
.fx__impact.is-on .fx__puff--meio{animation-delay:.12s;animation-duration:1.9s}
@keyframes puff{
  0%{opacity:0;transform:translate(-50%,-30%) scale(.3)}
  14%{opacity:.7}
  55%{opacity:.4}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0%)),calc(-30% + var(--dy,-40%))) scale(1.45)}
}
@keyframes pushIn{from{transform:scale(1)}to{transform:scale(1.04)}}

/* Camada 1: o scrim base, sempre ligado. Mais fundo à esquerda, onde o texto vive. */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,8,11,.55) 0%,rgba(8,8,11,0) 18%),
    linear-gradient(90deg,rgba(8,8,11,.5) 0%,rgba(8,8,11,.2) 45%,rgba(8,8,11,0) 62%),
    radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%);
}

.band{
  position:absolute;left:var(--gutter);top:50%;
  width:min(48rem,58vw);
  transform:translateY(-50%);
  text-shadow:var(--tshadow);
  pointer-events:none;
}
.band.is-live{pointer-events:auto}
.js .band{opacity:0}
/* Camada 2: o scrim por faixa, que aprofunda com o progresso --k da faixa. */
.band::before{
  content:"";position:absolute;inset:-18% -30% -18% -40%;z-index:-1;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 60% 58% at 38% 50%,rgba(5,5,10,var(--peak,.62)) 0%,rgba(5,5,10,calc(var(--peak,.62)*.66)) 46%,rgba(5,5,10,0) 76%);
}
.band--3{--peak:.66}
.band .btn{text-shadow:none}
.band .w{display:inline-block;white-space:pre}

/* O título entra palavra por palavra; o ponto cai por último, como o bloco. */
.hero__title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.3rem,6.3vw,6.9rem);line-height:.96;letter-spacing:-.04em;
  margin-bottom:clamp(1.2rem,2.2vw,1.8rem);
}
.hero__title .line{display:block}
/* Em inglês a frase é mais larga: sem isso, HAS SOMETHING quebra em duas linhas. */
html[lang="en"] .hero__title{font-size:clamp(1.95rem,4.6vw,5.1rem)}
html[lang="en"] .cta__title{font-size:clamp(2.4rem,8.8vw,9.2rem)}
.band--3 .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*.35em));
}
.hero__dot{
  display:inline-block;width:.3em;height:.3em;margin-left:.08em;background:var(--orange);
  --dc:clamp(0,(var(--k,0) - .5)*5,1);
  --ds:clamp(0,(var(--k,0) - .62)*2.6,1);
  opacity:var(--dc);
  transform:translateY(calc((1 - var(--dc))*-1.4em)) scale(calc(.6 + .64*var(--dc) - .24*var(--ds))) skewX(-12deg);
}
.hero__lede{
  --ks:clamp(0,(var(--k,0) - .7)*6,1);
  opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px));
  max-width:36ch;font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.5;color:rgba(244,243,239,.92);
}
.hero__actions{
  --kb:clamp(0,(var(--k,0) - .82)*7,1);
  opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px));
  display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.4rem,2.2vw,2rem);
}

/* A deixa de scroll: anel honesto enquanto o vídeo chega, depois a seta. */
.cue{position:absolute;left:50%;bottom:clamp(1.25rem,4vh,2.5rem);transform:translateX(-50%);color:var(--off-white);transition:opacity .5s var(--ease)}
.cue.is-off{opacity:0}
.ring{width:34px;height:34px;transform:rotate(-90deg)}
.ring__fill{color:var(--orange);transition:stroke-dashoffset .2s linear}
.stage.video-ready .ring,.stage.video-failed .ring{display:none}
.cue__chevron{display:none;width:14px;height:14px;border-right:2px solid var(--off-white);border-bottom:2px solid var(--off-white);transform:rotate(45deg);animation:bob 2.4s var(--ease-soft) -1.2s infinite}
.stage.video-ready .cue__chevron,.stage.video-failed .cue__chevron{display:block}
@keyframes bob{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(8px) rotate(45deg)}}

/* ============================ 09 HERO ESTÁTICO ============================ */
/* Os cinco portões. As strings batem caractere por caractere com GATES no main.js. */
html:not(.js) .band--3{--k:1;opacity:1;pointer-events:auto}

@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .js .hero{height:auto}
  .stage{
    position:relative;height:auto;min-height:100svh;
    display:flex;flex-direction:column;justify-content:flex-start;
    background-image:url("../img/hero-final.jpg");background-position:72% 50%;
    padding:clamp(6rem,14vh,8rem) 0 clamp(2.5rem,6vh,4rem);
  }
  .poster,.hero__video,.hero__idle,.cue{display:none!important}
  .band--3{
    position:relative;left:auto;top:auto;transform:none;width:auto;max-width:46rem;
    padding:0 var(--gutter);
    --k:1!important;opacity:1!important;pointer-events:auto!important;
  }
  .band--3::before{opacity:1}
  /* A imagem parada ganha uma aproximação lenta, ancorada no bloco, e o pouso fica aceso. */
  .still{
    display:block;position:absolute;inset:0;
    background:url("../img/hero-final.jpg") 72% 50% / cover no-repeat;
    transform-origin:var(--gx,69%) var(--gy,67%);
  }
  .hero.live .still{animation:pushIn 12s var(--ease-soft) -3s infinite alternate}
  .fx{transform:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 42%,#000 72%);
    mask-image:linear-gradient(180deg,transparent 0%,transparent 42%,#000 72%)}
  .fx__land{opacity:1!important}
  .scrim{background:linear-gradient(180deg,rgba(8,8,11,.78) 0%,rgba(8,8,11,.55) 55%,rgba(8,8,11,.1) 80%,rgba(8,8,11,.5) 100%)}
}
@media (max-width: 720px){
  .stage{min-height:128svh;background-position:70% 100%}
  .still{background-position:70% 100%}
}

/* ============================ 10 A SENA ============================ */
/* Primeira faixa laranja. O título ocupa a largura toda; o texto fica à direita, embaixo. */
.sena__title{font-size:clamp(2.4rem,8.2vw,9.4rem);line-height:.94}
.sena__body{display:grid;gap:1.2rem;margin:clamp(2.5rem,5vw,4.5rem) 0 0 auto;max-width:34rem;font-size:clamp(1.08rem,1.35vw,1.3rem);line-height:1.5;font-weight:500}

/* O momento interativo: segurar o botão coloca o ponto final e acende as três palavras. */
.say{margin-top:clamp(4.5rem,10vw,9rem);padding-top:clamp(2rem,4vw,3rem);border-top:2px solid var(--black);display:grid;gap:1.25rem;justify-items:start}
.say__line{font-size:clamp(1.5rem,3.4vw,3rem);line-height:1.15;letter-spacing:-.02em;font-weight:500}
.say__lead{display:block;color:rgba(11,11,11,.72)}
.say__phrase{font-style:normal;font-weight:800;font-family:var(--display);text-transform:uppercase;letter-spacing:-.03em;font-size:.92em}
.say__slot{position:relative;display:inline-block;width:.34em;height:.5em}
.say__dot{position:absolute;left:.06em;bottom:.02em;width:.26em;height:.26em;background:var(--black);transform:skewX(-12deg) translateY(-1.6em);opacity:0}
.say.said .say__dot{animation:dotDrop .75s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes dotDrop{
  0%{opacity:0;transform:skewX(-12deg) translateY(-1.6em)}
  35%{opacity:1}
  70%{transform:skewX(-12deg) translateY(.06em)}
  100%{opacity:1;transform:skewX(-12deg) translateY(0)}
}
.say__track{width:min(100%,34rem);height:4px;background:rgba(11,11,11,.2)}
.say__fill{display:block;height:100%;background:var(--black);transform:scaleX(var(--hold,0));transform-origin:left}
.say__btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.9em 1.8em;
  font-weight:600;font-size:1.05rem;
  background:var(--black);color:var(--off-white);border:2px solid var(--black);cursor:pointer;
  user-select:none;-webkit-user-select:none;touch-action:none;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.say__btn:hover{background:#262626}
.say__btn.is-holding{transform:scale(.97)}
.say.said .say__btn{background:transparent;color:var(--black);pointer-events:none}
.say__hint{color:rgba(11,11,11,.78)}

/* As três palavras: contorno até o visitante comunicar, depois cheias. */
.pillars{margin-top:clamp(3rem,6vw,5rem);display:grid}
.pillars li{border-top:2px solid var(--black)}
.pillars li:last-child{border-bottom:2px solid var(--black)}
.pillars__name{
  display:block;padding:.08em 0 .02em;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.2rem,9vw,9.6rem);line-height:1;letter-spacing:-.045em;
  color:rgba(11,11,11,.3);transition:color .6s var(--ease);
}
@supports (-webkit-text-stroke:1px black){
  .pillars__name{color:transparent;-webkit-text-stroke:2px var(--black)}
}
.pillars li.lit .pillars__name{color:var(--black)}
.pillars li:nth-child(2) .pillars__name{text-align:center}
.pillars li:nth-child(3) .pillars__name{text-align:right}

/* ============================ 10b MARCAS ATENDIDAS ============================ */
/* Uma faixa preta entre o hero e a primeira faixa laranja: os logos passam devagar,
   separados pelo bloco da assinatura. Para o laço fechar, a lista aparece duas vezes
   no HTML e a trilha anda exatamente metade da própria largura. */
.marquee{background:var(--black);border-block:1px solid var(--rule);overflow:hidden;padding:clamp(1.1rem,2.4vw,1.9rem) 0}
.marquee__track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee__group{display:flex;align-items:center;gap:clamp(2.5rem,6vw,5rem);padding-right:clamp(2.5rem,6vw,5rem)}
.marquee__item{display:flex;align-items:center;gap:clamp(2.5rem,6vw,5rem)}
.marquee__item::after{content:"";width:.5rem;height:.5rem;background:var(--orange);transform:skewX(-12deg);flex:none}
.marquee__logo{height:clamp(1.9rem,3.2vw,2.6rem);width:auto;opacity:.86}
/* logos altos, como um escudo, pedem mais altura para pesar igual aos letreiros */
.marquee__logo--alto{height:clamp(3.2rem,5.6vw,4.6rem)}
.marquee__word{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1rem,1.8vw,1.5rem);letter-spacing:-.03em;color:rgba(244,243,239,.86);white-space:nowrap;
}

/* ============================ 11 PROJETOS ============================ */
.work__head{margin-bottom:clamp(3rem,6vw,5rem)}
.work__lede{margin-top:1.2rem;max-width:40ch;color:var(--muted);font-size:clamp(1.05rem,1.3vw,1.25rem)}
/* ---------- Galeria em coverflow 3D ----------
   O card do centro fica de frente e os vizinhos giram em perspectiva. O JS só escreve --tx, --ry, --s,
   --o e --z em cada slide; a transição anima apenas transform e opacidade. Sem JS: faixa rolável. */
.cf{position:relative;margin-inline:calc(var(--pad-x) * -1);padding:clamp(1rem,3vw,2.5rem) 0 0;overflow:hidden}
.cf__ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cf__ambient-img{width:100%;height:100%;object-fit:cover;filter:blur(40px) brightness(.35);transform:scale(1.2);opacity:.7;transition:opacity .9s var(--ease)}
.cf__ambient::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(11,11,11,.2),rgba(11,11,11,.95) 100%)}
.cf__ambient-img.is-swapping{opacity:0}

/* Sem JS: uma faixa de cards que rola para o lado. */
.cf__stage{position:relative;display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 1rem}
.cf__slide{flex:0 0 min(84vw,52rem);scroll-snap-align:center}
.cf__card{position:relative;display:block;aspect-ratio:1 / var(--ar);overflow:hidden;background:var(--black);border:1px solid var(--rule)}
.cf__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.cf__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,11,.35) 0%,rgba(11,11,11,0) 30%,rgba(11,11,11,.55) 62%,rgba(11,11,11,.94) 100%)}
.cf__bar{position:absolute;left:0;bottom:0;width:100%;height:.45rem;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.cf__meta{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.5rem;padding:clamp(1.1rem,2.4vw,2rem)}
.cf__top{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.cf__tags,.cf__year{font-size:.95rem;font-weight:500;color:rgba(244,243,239,.82)}
.cf__name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,3.2vw,2.8rem);line-height:1;letter-spacing:-.04em;color:var(--off-white)}
.cf__desc{max-width:48ch;color:rgba(244,243,239,.86);font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.5}
.cf__cta{font-weight:600;color:var(--orange);margin-top:.2rem}
.cf__card:hover .cf__img,.cf__card:focus-visible .cf__img{transform:scale(1.04)}
.cf__card:hover .cf__bar,.cf__card:focus-visible .cf__bar{transform:scaleX(1)}

.cf__controls{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(.75rem,2vw,1.5rem);padding:clamp(1.25rem,3vw,2.25rem) var(--gutter) 0}
.cf__arrow{display:grid;place-items:center;width:3rem;height:3rem;border:2px solid var(--rule-strong);background:rgba(11,11,11,.5);color:var(--off-white);font-size:1.1rem;cursor:pointer;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.cf__arrow:hover,.cf__arrow:focus-visible{background:var(--orange);border-color:var(--orange);color:var(--black)}
.cf__dots{display:flex;align-items:center;gap:.55rem}
.cf__dot{width:1.5rem;height:1.5rem;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.cf__dot::before{content:"";width:.6rem;height:.6rem;background:rgba(244,243,239,.34);transform:skewX(-12deg);transition:width .45s var(--ease),background .45s var(--ease)}
.cf__dot[aria-current="true"]::before{width:1.9rem;background:var(--orange)}
.cf__dot:hover::before{background:rgba(244,243,239,.7)}
.cf__pause{min-height:2.75rem;padding:0 1rem;border:2px solid var(--rule);background:none;cursor:pointer;color:var(--muted);font-weight:500}
.cf__pause:hover,.cf__pause:focus-visible{color:var(--off-white);border-color:var(--rule-strong)}
html:not(.js) .cf__controls{display:none}

/* Com JS: o palco 3D. */
.js .cf__stage{display:block;overflow:visible;height:calc(var(--cw) * var(--ar) + 2rem);padding:0;perspective:1800px;perspective-origin:50% 45%;touch-action:pan-y}
.js .cf__slide{
  position:absolute;left:50%;top:1rem;width:var(--cw);
  transform:translateX(-50%) translateX(var(--tx,0px)) rotateY(var(--ry,0deg)) scale(var(--s,1));
  opacity:var(--o,1);z-index:var(--z,1);
  transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .9s cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
}
.cf{--cw:min(62vw,58rem);--ar:.625} /* --ar: altura dividida pela largura do card */
.js .cf__slide .cf__shade::after{content:"";position:absolute;inset:0;background:rgba(11,11,11,.62);opacity:1;transition:opacity .9s var(--ease)}
.js .cf__slide.is-center .cf__shade::after{opacity:0}
.js .cf__slide .cf__meta{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .cf__slide.is-center .cf__meta{opacity:1;transform:none;transition-delay:.25s}
.js .cf__slide:not(.is-center) .cf__card{cursor:pointer;border-color:rgba(244,243,239,.24)}
.js .cf__slide.is-center .cf__card{box-shadow:0 30px 80px rgba(0,0,0,.7)}
.cf.is-dragging .cf__slide{transition-duration:.35s}

/* Card com posts: os posts ficam inteiros no alto e o texto embaixo, sem cobrir nenhum. */
button.cf__card{width:100%;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:0}
.cf__card--board{background:radial-gradient(ellipse 80% 70% at 50% 30%,#1d1d21 0%,#0e0e10 70%)}
.cf__card--board .cf__shade{background:none}
.cf__board{position:absolute;left:0;right:0;top:0;height:58%;display:flex;align-items:flex-end;justify-content:center;gap:clamp(.5rem,1.1vw,1rem);padding:clamp(1rem,2.4vw,2rem) clamp(1rem,2.4vw,2rem) 0}
.cf__post{display:block;height:100%;min-width:0;border:1px solid rgba(244,243,239,.1);box-shadow:0 18px 36px rgba(0,0,0,.6);transition:transform .6s var(--ease)}
.cf__post img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
.cf__card--board .cf__meta{padding-top:0}
.js .cf__slide.is-center .cf__card--board:hover .cf__post,.js .cf__slide.is-center .cf__card--board:focus-visible .cf__post{transform:translateY(-6px)}
.cf__card--board:hover .cf__post:nth-child(2){transition-delay:.04s}
.cf__card--board:hover .cf__post:nth-child(3){transition-delay:.08s}
.cf__card--board:hover .cf__post:nth-child(4){transition-delay:.12s}

/* Tela cheia dos posts */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(8,8,10,.96);color:var(--off-white);opacity:0;transition:opacity .35s var(--ease),display .35s allow-discrete,overlay .35s allow-discrete}
.lb[open]{opacity:1}
@starting-style{.lb[open]{opacity:0}}
.lb::backdrop{background:rgba(0,0,0,.6)}
.lb__bar{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;gap:1.25rem;padding:clamp(.75rem,2vw,1.25rem) var(--gutter)}
.lb__title{color:var(--off-white);font-weight:600}
.lb__count{color:var(--gray-mid)}
.lb__ext{margin-left:auto;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1rem;border:2px solid var(--rule-strong);color:var(--off-white);font-weight:600;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.lb__ext[hidden]{display:none} /* sem isto o display do botão anulava o hidden e sobrava um quadrado vazio */
.lb__ext:hover,.lb__ext:focus-visible{background:var(--orange);border-color:var(--orange);color:var(--black)}
.lb__close{margin-left:auto;width:2.75rem;height:2.75rem;border:2px solid var(--rule-strong);background:none;color:var(--off-white);font-size:1.6rem;line-height:1;cursor:pointer}
.lb__ext:not([hidden]) + .lb__close{margin-left:0}
.lb__close:hover,.lb__close:focus-visible{background:var(--orange);border-color:var(--orange);color:var(--black)}
.lb__figure{position:absolute;inset:clamp(4.5rem,9vh,6rem) clamp(4rem,9vw,8rem) clamp(1.5rem,4vh,3rem);display:flex;align-items:center;justify-content:center;touch-action:pan-y} /* flex: com grid a altura máxima da imagem não valia */
.lb__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.7);transition:opacity .25s var(--ease)}
.lb__img.is-loading{opacity:.35}
.lb__nav{position:absolute;top:50%;z-index:2;width:3rem;height:3rem;transform:translateY(-50%);border:2px solid var(--rule-strong);background:rgba(11,11,11,.6);color:var(--off-white);font-size:1.1rem;cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.lb__nav:hover,.lb__nav:focus-visible{background:var(--orange);border-color:var(--orange);color:var(--black)}
.lb__nav--prev{left:clamp(.5rem,2.5vw,2rem)}
.lb__nav--next{right:clamp(.5rem,2.5vw,2rem)}
body.lb-open{overflow:hidden}

/* ============================ 12 SERVIÇOS ============================ */
/* Segunda faixa laranja. Os serviços são uma lista, não uma sequência: sem números. */
.services__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
.services__head{position:sticky;top:7rem}
.services .display{font-size:clamp(2rem,4.4vw,4.4rem)}
.services__lede{margin-top:1.4rem;max-width:30ch;font-size:clamp(1.05rem,1.3vw,1.25rem);font-weight:500}
.acc{border-top:2px solid var(--black)}
.acc__item{border-bottom:2px solid var(--black)}
.acc__h{font:inherit}
.acc__btn{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.5rem;padding:clamp(1.3rem,2.4vw,2rem) 0;background:none;border:0;text-align:left;cursor:pointer}
.acc__name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.15rem,2.3vw,2.1rem);line-height:1.05;letter-spacing:-.035em;transition:transform .4s var(--ease)}
.acc__btn:hover .acc__name{transform:translateX(.35rem)}
.acc__icon{position:relative;width:1.4rem;height:1.4rem;flex:none}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;background:currentColor;transition:transform .45s var(--ease)}
.acc__icon::before{left:0;top:calc(50% - 1.5px);width:100%;height:3px}
.acc__icon::after{top:0;left:calc(50% - 1.5px);width:3px;height:100%}
.acc__btn[aria-expanded="true"] .acc__icon::after{transform:scaleY(0)}
.acc__panel{overflow:hidden}
.acc__panel p{max-width:48ch;padding:0 0 clamp(1.4rem,2.6vw,2.2rem);font-size:clamp(1.02rem,1.2vw,1.15rem);font-weight:500}
.acc__panel.is-anim{transition:height .5s var(--ease)}

/* ============================ 13 SOBRE ============================ */
/* A foto leva o bloco laranja atrás, deslocado: a assinatura em tamanho de retrato. */
.founder{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.founder__media{grid-column:1 / span 5;position:relative;margin:0 clamp(1rem,2vw,1.6rem) clamp(1rem,2vw,1.6rem) 0}
.founder__media::before{content:"";position:absolute;inset:0;transform:translate(clamp(1rem,2vw,1.6rem),clamp(1rem,2vw,1.6rem));background:var(--orange)}
.founder__media img{position:relative;width:100%}
.founder__bar{display:none}
.founder__body{grid-column:7 / span 6}
.founder__text{display:grid;gap:1.1rem;color:rgba(244,243,239,.82);margin-top:clamp(1.6rem,3vw,2.4rem);font-size:clamp(1.05rem,1.25vw,1.2rem)}
.founder__text p{max-width:48ch}
.founder__text p:first-child{color:var(--off-white);font-weight:600}
.founder__role{margin-top:1.8rem;color:var(--off-white)}

/* ============================ 14 PROCESSO ============================ */
/* A única faixa de papel: aqui a ordem importa, então os passos levam número. */
.process__inner{padding:var(--section) var(--pad-x) clamp(4rem,8vw,7rem)}
.timeline{position:relative;margin-top:clamp(3.5rem,7vw,6rem)}
.timeline__svg{position:absolute;overflow:visible;pointer-events:none}
.timeline__svg--h{left:0;right:0;top:7px;width:100%;height:2px}
.timeline__svg--v{display:none}
.timeline__base{stroke:var(--rule-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.timeline__draw{stroke:var(--orange);stroke-width:4;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--tl,0))}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1rem,2vw,2rem)}
.step{position:relative;display:grid;gap:.5rem;align-content:start;padding-top:2.4rem}
.step__node{position:absolute;top:0;left:0;width:16px;height:16px;background:var(--off-white);border:2px solid var(--black);transform:skewX(-12deg);transition:background .4s var(--ease),border-color .4s var(--ease)}
.step.lit .step__node{background:var(--orange);border-color:var(--orange)}
.step__num{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,2.6vw,2.6rem);line-height:1;letter-spacing:-.04em;color:var(--accent)}
.step h3{font-weight:700;font-size:clamp(1.1rem,1.4vw,1.3rem)}
.step p{color:var(--muted);font-size:1rem;max-width:26ch}

.closing{position:relative;height:clamp(320px,46vw,620px);overflow:hidden;display:flex;align-items:center;background:var(--black)}
.closing__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 70%}
.closing::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,11,.92) 0%,rgba(11,11,11,.55) 45%,rgba(11,11,11,0) 70%),linear-gradient(0deg,rgba(11,11,11,.9) 0%,rgba(11,11,11,0) 30%,rgba(11,11,11,0) 75%,rgba(11,11,11,.9) 100%)}
.closing__text{position:relative;z-index:1;padding:0 var(--pad-x);width:100%;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.9rem,5vw,4.8rem);line-height:.98;letter-spacing:-.04em;color:var(--off-white);text-shadow:var(--tshadow);max-width:none}
.closing__text em{font-style:normal}
.closing .dot{background:var(--orange)}

/* ============================ 15 CTA E FORMULÁRIO ============================ */
.cta__inner{display:grid;gap:clamp(1.2rem,2.4vw,1.8rem)}
.cta__title{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.7rem,10.5vw,11rem);line-height:.9;letter-spacing:-.05em}
.cta__lede{font-size:clamp(1.3rem,2.6vw,2.2rem);font-weight:500;letter-spacing:-.02em;margin-bottom:.6rem}
/* Contato por ícone: a plataforma se reconhece pelo símbolo, sem precisar ler o endereço.
   O nome completo fica no aria-label, para quem navega por leitor de tela. */
.contato{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.contato__label{font-weight:600;font-size:clamp(1rem,1.2vw,1.15rem)}
.contato__list{display:flex;gap:.6rem}
.contato__link{
  display:grid;place-items:center;width:3.25rem;height:3.25rem;
  border:2px solid var(--black);color:var(--black);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.contato__link:hover,.contato__link:focus-visible{background:var(--black);color:var(--orange)}
.contato__link svg{width:1.5rem;height:1.5rem}

.form{margin-top:clamp(2.5rem,6vw,4.5rem);border-top:2px solid var(--black);padding-top:clamp(2rem,4vw,3rem);display:grid;gap:1.25rem;max-width:62rem}
.form__intro{font-size:clamp(1.02rem,1.2vw,1.15rem);font-weight:500;max-width:52ch}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.field{display:grid;gap:.4rem}
.field label{font-weight:600;font-size:.98rem}
.field input,.field textarea{font:inherit;font-size:1.05rem;background:transparent;color:var(--black);border:0;border-bottom:2px solid rgba(11,11,11,.5);border-radius:0;padding:.7rem 0;resize:vertical;transition:border-color .35s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:rgba(11,11,11,.66)}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--black);box-shadow:0 2px 0 var(--black)}
.field [aria-invalid="true"]{border-bottom-color:var(--black);box-shadow:0 2px 0 var(--black)}
.form__status{font-weight:600;min-height:1.4em}

/* ============================ 16 FOOTER ============================ */
.footer{background:var(--black);padding:clamp(3.5rem,8vw,6rem) var(--pad-x) clamp(2rem,4vw,3rem)}
.footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:clamp(2rem,6vw,5rem);border-bottom:1px solid var(--rule);padding-bottom:clamp(2.5rem,5vw,4rem)}
.logo--big{font-size:clamp(2.6rem,6vw,4.6rem);text-shadow:none}
.footer__tag{font-size:1.1rem;color:var(--muted);margin-top:.6rem}
.footer__nav ul{display:grid;gap:.2rem}
.footer__nav a{display:inline-block;padding:.35rem 0;font-weight:500;color:var(--muted);transition:color .3s var(--ease)}
.footer__nav a:hover,.footer__nav a:focus-visible{color:var(--off-white)}
.footer__copy{margin-top:clamp(1.5rem,3vw,2.5rem)}

.wa-float{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;width:3.25rem;height:3.25rem;display:grid;place-items:center;border-radius:50%;background:var(--orange);color:var(--black);box-shadow:0 8px 30px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(1rem);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,background .3s}
.wa-float.is-shown{opacity:1;visibility:visible;transform:none}
.wa-float:hover{background:var(--off-white)}
/* Sobre as faixas laranja o botão laranja sumiria: ele fica preto. */
.wa-float.on-orange-bg{background:var(--black);color:var(--orange)}

/* ============================ 17 RESPONSIVO ============================ */
@media (max-width:1100px){
  .services__inner{grid-template-columns:1fr}
  .services__head{position:static}
  .founder__media{grid-column:1 / span 6}
  .founder__body{grid-column:1 / -1}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:3rem}
  .timeline__svg--h{display:none}
  .steps .step{border-top:1px solid var(--rule-strong)}
  .step__node{top:-8px}
}
@media (max-width:860px){
  .burger{display:flex}
  .nav{position:fixed;inset:0;z-index:1;background:var(--black);flex-direction:column;align-items:flex-start;justify-content:center;gap:2.5rem;padding:6rem var(--gutter) 3rem;transform:translateY(-100%);transition:transform .6s var(--ease);overflow-y:auto}
  .nav.is-open{transform:none}
  .nav__list{flex-direction:column;gap:1rem}
  .langs{order:2}
  .langs__a{width:3.25rem;height:3.25rem}
  .langs__a svg{width:30px;height:22px}
  .nav__list a{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,8vw,2.4rem);letter-spacing:-.04em;color:var(--off-white)}
  .logo{position:relative;z-index:2}
  .sena__body{margin-left:0}
  .pillars li:nth-child(n) .pillars__name{text-align:left}
  .cf{--cw:80vw;--ar:1.45}
  /* no celular os posts do card viram uma grade de 2 por 2 */
  .cf__board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:.4rem;height:68%;padding:.7rem .7rem 0}
  .cf__post{height:100%;border:0;box-shadow:none;display:flex;align-items:center;justify-content:center}
  .cf__post img{max-height:100%;border:1px solid rgba(244,243,239,.1);box-shadow:0 10px 24px rgba(0,0,0,.55)}
  /* com 3 imagens, a primeira ocupa a linha de cima inteira e não sobra buraco na grade */
  .cf__post:first-child:nth-last-child(3){grid-column:1 / -1}
  .lb__figure{inset:4.25rem .75rem 4.5rem}
  .lb__nav{top:auto;bottom:.75rem;transform:none}
  .cf__desc{display:none}
  .cf__top{flex-direction:column;gap:.2rem}
  .founder__media{grid-column:1 / -1}
  .form__row{grid-template-columns:1fr}
  .footer__inner{flex-direction:column}
}
@media (max-width:640px){
  .steps{grid-template-columns:1fr;row-gap:0;padding-left:2.2rem}
  .steps .step{border-top:0;padding:0 0 2.4rem}
  .step__node{top:.5rem;left:-2.2rem}
  .timeline__svg--v{display:block;left:7px;top:0;bottom:0;width:2px;height:100%}
  .hero__actions .btn,.cta .btn,.form .btn{width:100%}
  .pillars__name{-webkit-text-stroke-width:1.5px}
  /* no celular o bloco final do título caía sozinho numa linha */
  .sena__title{font-size:clamp(1.9rem,7.6vw,2.6rem)}
}

/* ============================ 18 ACESSIBILIDADE E TELAS ============================ */
@media (pointer:coarse){
  .btn,.nav__cta,.say__btn{min-height:44px}
}
@media (max-height:560px){.cue{display:none}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  /* sem movimento, a faixa vira uma linha comum que o visitante rola com o dedo */
  .marquee__track{width:auto;overflow-x:auto;padding-inline:var(--gutter)}
  .marquee__group[aria-hidden="true"]{display:none}
  body{animation:none}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .say__dot{opacity:1;transform:skewX(-12deg)}
  .say__fill{transform:scaleX(1)}
  .pillars__name{color:var(--black)}
  .timeline__draw{stroke-dashoffset:0}
  .step__node{background:var(--orange);border-color:var(--orange)}
}