/* ---------- as fontes, servidas daqui mesmo ---------- */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600 700; font-stretch: 110% 125%; font-display: swap; src: url(../../assets/fonts/archivo-600-700-latin.woff2) format('woff2'); }
/* A fonte de recuo, com as MEDIDAS da Archivo emprestadas a uma fonte que já
   está no aparelho. Sem ela, enquanto a Archivo não chega o texto é desenhado
   na fonte do sistema, que é 19,29% mais estreita (medido no navegador, com o
   mesmo wdth 116 que a página usa). Quando a Archivo entra, a legenda do hero
   muda de largura e o bloco centralizado PULA: era esse o CLS de 0,1009.
   O size-adjust estica a de recuo até o texto ocupar a mesma caixa, e os
   overrides de ascent e descent são as medidas da Archivo divididas por esse
   mesmo fator, para a altura de linha bater também. A troca continua
   acontecendo; ela é que deixa de empurrar a página. */
@font-face {
  font-family: 'Archivo Recuo';
  src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial');
  size-adjust: 119.29%;
  ascent-override: 73.60%;
  descent-override: 17.60%;
  line-gap-override: 0%;
}
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../../assets/fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(../../assets/fonts/ibm-plex-sans-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(../../assets/fonts/ibm-plex-sans-400-latin.woff2) format('woff2'); }

/* ============================================================
   EVERFIT HOUSE
   Tokens, tirados do mundo da filmagem: vidro de torre no fim
   de tarde, metal escovado, luz quente de janela.
   ============================================================ */
:root{
  --canvas:#0D1417;
  --panel:#141D21;
  --panel-2:#1A2529;
  --accent:#6DB37C;
  --accent-hover:#82C591;
  --accent-muted:#2E4A38;
  --warm:#E8C89A;
  --alerta:#CE7E6E;      /* o vermelho tijolo do bloco de comprar: 5,6:1 sobre o painel */
  --steel:#8FA0A4;
  --text-secondary:#9BA9A6;
  --text-primary:#EAF0EE;
  --line:#222F33;          /* linha estrutural, decorativa */
  --border-ui:#66787C;     /* borda de controle: 4,0:1 contra a tela, a barra é 3:1 */
  --border-ui-accent:#4E8A61; /* a mesma barra, na família do verde: 4,5:1 */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,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);
  --display:"Archivo","Archivo Recuo",system-ui,sans-serif;
  --text:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --spine-x:clamp(1.25rem,4vw,3.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--text);font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}

/* ---------- a camada de ambiente, atrás de tudo ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient::before{
  content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(46% 38% at 22% 24%,rgba(232,200,154,.09),transparent 70%),
    radial-gradient(40% 44% at 82% 72%,rgba(109,179,124,.075),transparent 72%);
  animation:drift 74s var(--ease) -22s infinite alternate;
}
.ambient::after{
  content:"";position:absolute;inset:0;opacity:.28;
  background-image:url(../../"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(../../%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@keyframes drift{from{transform:translate3d(-2.5%,-1.5%,0) scale(1.04)}to{transform:translate3d(2.5%,2%,0) scale(1.1)}}

/* ---------- tipografia base ---------- */
h1,h2,h3{font-family:var(--display);font-variation-settings:"wdth" 118;font-weight:700;line-height:1.03;letter-spacing:-.015em;margin:0}
h2{font-size:clamp(1.85rem,1.1rem + 3.1vw,3.5rem)}
h3{font-size:clamp(1.12rem,1rem + .55vw,1.4rem);font-variation-settings:"wdth" 112;letter-spacing:-.005em;line-height:1.18}
p{margin:0}
.kicker{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1.1rem;
}
.lede{color:var(--text-secondary);max-width:56ch;font-size:1.06em}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{
  position:absolute;left:.5rem;top:-4rem;z-index:99;background:var(--accent);color:#08110C;
  padding:.7rem 1.1rem;border-radius:9px;font-family:var(--mono);font-size:.78rem;
  transition:top .2s var(--ease);
}
.skip:focus{top:.5rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- navegação ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:1.5rem;
  padding:.85rem var(--pad);
  background:linear-gradient(to bottom,rgba(13,20,23,.82),rgba(13,20,23,0));
  backdrop-filter:blur(2px);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(13,20,23,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:0 0 auto}
/* a logo entra como o arquivo original, sem recorte, sem recolorir e sem tirar
   o fundo. O selo é redondo em preto, então ele aparece como selo mesmo. */
.brand img{width:46px;height:46px;flex:0 0 auto;display:block;border-radius:50%}
.foot-brand img{width:108px;height:108px}
.brand b{
  font-family:var(--display);font-variation-settings:"wdth" 122;font-weight:700;
  font-size:.98rem;letter-spacing:.055em;text-transform:uppercase;
}
.brand b i{font-style:normal;color:var(--accent)}
.brand span{font-family:var(--mono);font-size:.6rem;letter-spacing:.34em;color:var(--steel);
  display:block;margin-top:1px;
  /* o HOUSE do letreiro tambem e caixa alta, igual ao EVERFIT acima dele */
  text-transform:uppercase}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;align-items:center}
.nav-links a{
  font-size:.86rem;text-decoration:none;color:var(--text-secondary);
  transition:color .3s var(--ease);white-space:nowrap;
}
.nav-links a:hover{color:var(--text-primary)}
/* o seletor da navegação tem especificidade maior que .btn e estava pintando
   o rótulo do botão de cinza sobre verde. Re-declarado aqui de propósito. */
.nav-links a.btn{color:#08110C}
.nav-links a.btn:hover{color:#08110C}
@media(max-width:900px){.nav-links a:not(.btn){display:none}}

.btn{
  display:inline-block;background:var(--accent);color:#08110C;text-decoration:none;
  font-family:var(--text);font-weight:500;font-size:.9rem;
  padding:.72rem 1.25rem;border-radius:10px;border:0;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
  text-shadow:none;
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 30px rgba(109,179,124,.22)}

/* ---------- a linha do Instagram, depois dos aparelhos ----------
   Este é o único sinal de que a empresa existe fora do site: não há foto de
   instalação real, nome de cliente nem CNPJ na página. Ele fica logo abaixo
   da grade de aparelhos porque é ali que o síndico pensa "isso é real?", e
   fica DISCRETO de propósito: promete só o que se pode cumprir, um perfil
   para olhar, sem inventar prova que não existe. */
.insta-linha{
  display:flex;align-items:center;gap:1rem;margin-top:2.8rem;
  padding:1.05rem 1.25rem;border:1px solid var(--line);border-radius:14px;
  text-decoration:none;color:var(--text-secondary);
  background:rgba(8,12,14,.4);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
}
.insta-linha:hover{border-color:var(--accent-muted);background:rgba(8,12,14,.62);transform:translateY(-2px)}
.insta-linha:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.insta-ico{flex:0 0 auto;display:inline-flex;color:var(--accent)}
.insta-ico svg{width:26px;height:26px;display:block}
.insta-txt{flex:1 1 auto;font-size:.88rem;line-height:1.45}
.insta-txt b{
  display:block;font-family:var(--display);font-weight:600;font-size:1rem;
  color:var(--text-primary);margin-bottom:.15rem;
}
.insta-seta{flex:0 0 auto;color:var(--accent);font-size:1.1rem;transition:transform .35s var(--ease)}
.insta-linha:hover .insta-seta{transform:translateX(4px)}
@media(max-width:520px){
  .insta-linha{gap:.85rem;padding:.95rem 1rem}
  .insta-txt{font-size:.82rem}
  .insta-txt b{font-size:.94rem}
}

/* ---------- o WhatsApp que fica na tela ---------- */
.zap-flut{
  position:fixed;z-index:45;
  right:clamp(1rem,3vw,2rem);
  /* env(safe-area-inset-bottom) mantém o botão acima da barra de gestos do
     iPhone, onde um toque abriria a bandeja do sistema em vez do link */
  bottom:calc(clamp(1rem,3vw,2rem) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--accent);color:#08110C;text-decoration:none;
  font-family:var(--text);font-weight:500;font-size:.9rem;line-height:1;
  padding:.85rem 1.15rem;border-radius:999px;
  box-shadow:0 10px 34px rgba(5,10,8,.5),0 2px 8px rgba(5,10,8,.3);
  /* escondido até o hero acabar, e sem tirar do fluxo de leitura de tela:
     visibility:hidden faz ele sair da ordem de tabulação junto */
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.94);
  transition:opacity .45s var(--ease),transform .45s var(--ease),
             visibility 0s linear .45s,background .3s var(--ease);
  pointer-events:none;
}
.zap-flut.on{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .45s var(--ease),transform .45s var(--ease),
             visibility 0s,background .3s var(--ease);
}
.zap-flut:hover{background:var(--accent-hover)}
.zap-flut:focus-visible{outline:2px solid var(--text-primary);outline-offset:3px}
.zap-flut svg{width:22px;height:22px;flex:0 0 auto}
/* No telefone o rótulo sai e sobra o círculo: 56px é alvo de toque folgado, e
   escrito o botão comeria a largura da tela em cima do conteúdo. */
@media(max-width:640px){
  .zap-flut{padding:0;width:56px;height:56px;justify-content:center;gap:0}
  .zap-flut-txt{display:none}
  .zap-flut svg{width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){
  .zap-flut{transition:opacity .01s,visibility 0s;transform:none}
  .zap-flut.on{transform:none}
}
.btn:active{transform:translateY(0)}
.btn.ghost{
  background:transparent;color:var(--text-primary);border:1px solid var(--border-ui-accent);
  box-shadow:none;
}
.btn.ghost:hover{background:rgba(109,179,124,.08);border-color:var(--accent);box-shadow:none}
@media(pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ============================================================
   O HERO DE SCRUB
   ============================================================ */
.hero{position:relative;height:700vh;z-index:1}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:#0A1012;
}
/* No celular a barra de endereço encolhe e cresce durante a rolagem, e com
   100vh o palco inteiro pula junto. svh é a altura pequena, a que não muda,
   então o quadro fica firme enquanto o dedo arrasta. */
@supports (height:100svh){
  @media (pointer:coarse){ .stage{height:100svh} }
}
/* 700vh de rolagem para 4 segundos de filme é longo demais num telefone, onde
   cada gesto anda menos tela. 440vh ainda pedia umas sete arrastadas de dedo
   até o fim, o que cansa antes de encantar. 300vh dá duas telas de rolagem
   depois da primeira, umas três arrastadas, e o filme inteiro cabe nelas. */
@media (pointer:coarse) and (max-width:820px){
  .hero{height:300vh}
}
.poster,#hero{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background-size:cover;background-position:center;
}
#hero{opacity:0;transition:opacity .8s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero{opacity:1}
.stage.video-failed #hero{display:none}
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%);
}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(13,20,23,.72) 0%,rgba(13,20,23,0) 26%,rgba(13,20,23,0) 62%,rgba(13,20,23,.55) 100%);
}

/* o anel de carregamento honesto */
.ring{
  position:absolute;right:calc(var(--pad) - .3rem);bottom:calc(var(--pad) - .3rem);
  width:34px;height:34px;color:var(--accent);opacity:.75;
  transform:rotate(-90deg);pointer-events:none;
}
.stage.video-ready .ring{opacity:0;transition:opacity .5s var(--ease)}
.cue{
  position:absolute;left:50%;bottom:calc(var(--pad) - .2rem);transform:translateX(-50%);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--steel);pointer-events:none;
  background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);border-radius:10px;
  backdrop-filter:blur(10px);padding:.4rem .75rem;
  text-shadow:0 1px 3px rgba(5,5,10,.85);
  animation:cuepulse 3.4s var(--ease) -1.2s infinite;
}
@keyframes cuepulse{0%,100%{opacity:.55;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,4px)}}
@media(max-height:560px){.cue,.ring{display:none}}

/* as faixas de legenda */
.band{
  position:absolute;inset:0;display:flex;pointer-events:none;
  padding:0 var(--pad);opacity:0;text-shadow:var(--tshadow);
}
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 26% 50%,rgba(5,5,10,.66) 0%,rgba(5,5,10,.44) 46%,rgba(5,5,10,0) 76%);
}
/* faixas 1 e 2 correm sobre o vidro com reflexo de céu, o trecho mais claro
   da filmagem, então o escurecimento local delas é mais fundo. Calibrado
   contra o pior pixel de cada faixa, não contra o médio. */
#band1::before,#band2::before,#band3::before{
  background:radial-gradient(ellipse 80% 68% at 26% 50%,rgba(5,5,10,.82) 0%,rgba(5,5,10,.6) 48%,rgba(5,5,10,0) 80%);
}
/* a faixa 3 é a mais dura: a câmera entra na sala e a janela clareia o quadro
   inteiro no fim dela, então ela ganha o escurecimento mais fundo dos quatro */
#band3::before{
  background:radial-gradient(ellipse 84% 72% at 26% 50%,rgba(5,5,10,.88) 0%,rgba(5,5,10,.68) 50%,rgba(5,5,10,0) 82%);
}
.band>.inner{position:relative;z-index:1;align-self:center;max-width:min(46rem,88%)}
.band .btn{text-shadow:none}
.band .t{
  font-family:var(--display);font-variation-settings:"wdth" 116;font-weight:700;
  font-size:clamp(2rem,1rem + 4.6vw,4.6rem);line-height:1.02;letter-spacing:-.022em;
  margin:0;padding:.06em 0 .12em;
}
.band .w{display:inline-block;white-space:pre}
.band .c{display:inline-block;white-space:pre}

/* a logo acompanha as legendas na coluna da direita, na área calma do vidro.
   Ela herda a opacidade da faixa e ainda tem a sua, então entra junto com o texto. */
.band-logo{
  position:absolute;right:clamp(2.5rem,6vw,7rem);top:50%;
  width:clamp(96px,11vw,150px);height:auto;border-radius:50%;
  transform:translateY(-50%) scale(calc(.9 + .1*var(--k,1)));
  opacity:calc(.2 + .8*var(--k,0));
  filter:drop-shadow(0 14px 46px rgba(5,8,10,.65));
  pointer-events:none;
  transition:none;
}
/* no assentamento ela fica de canto, quieta, como assinatura */
#band4 .band-logo{
  width:clamp(54px,4.6vw,76px);
  opacity:calc(.14 + .44*var(--k,0));
  /* sobe para a parede escura do alto: no centro ela caía sobre o rack de
     halteres e lia como borrão em vez de assinatura */
  top:15%;
  transform:translateY(0) scale(calc(.9 + .1*var(--k,1)));
}
/* abaixo disso a legenda ocupa a largura toda e a logo colidiria com o texto */
@media(max-width:980px){.band-logo{display:none}}

/* faixa 4, centrada sobre a sala em repouso */
/* a filmagem recompõe o layout: a esteira puxa o quadro final para a direita,
   então o fechamento sobe para a faixa limpa de teto e janela alta */
#band4{justify-content:center;text-align:center;align-items:flex-start}
/* O escurecimento desta faixa foi recalibrado quando o fim do video passou a
   ser a foto real da academia, que e bem mais clara que a cena de fim de
   tarde que havia antes: o contraste medido caiu de 5,27 para 4,88 e a
   margem ficou fina demais para confiar. */
#band4::before{background:radial-gradient(ellipse 74% 50% at 50% 30%,rgba(5,5,10,.86) 0%,rgba(5,5,10,.64) 48%,rgba(5,5,10,0) 82%)}

/* ---------- o escurecimento das faixas, refeito para o retrato ----------
   As elipses acima estão ancoradas em 26% da largura e foram calibradas
   contra um texto de 736px numa tela de 1440. No telefone o texto tem 308px
   numa tela de 390 e ATRAVESSA a elipse inteira, saindo do lado escuro para
   cima do vidro claro da filmagem: o contraste medido caiu de 5,2:1 para
   1,74:1, ilegível. Em retrato a forma certa não é uma elipse à esquerda, é
   uma faixa horizontal atrás da linha do texto, porque é assim que o texto
   se deita numa tela estreita. */
@media (max-width:820px){
  .band::before,
  #band1::before,#band2::before,#band3::before{
    inset:0;
    background:linear-gradient(to bottom,
      rgba(4,5,9,.12) 0%,
      rgba(4,5,9,.34) 16%,
      rgba(4,5,9,.60) 32%,
      rgba(4,5,9,.63) 50%,
      rgba(4,5,9,.60) 68%,
      rgba(4,5,9,.34) 84%,
      rgba(4,5,9,.12) 100%);
  }
  /* a faixa 4 fecha com o texto no alto, não no meio, então o peso sobe junto */
  #band4::before{
    inset:0;
    background:linear-gradient(to bottom,
      rgba(4,5,9,.56) 0%,
      rgba(4,5,9,.63) 34%,
      rgba(4,5,9,.56) 58%,
      rgba(4,5,9,.26) 80%,
      rgba(4,5,9,.10) 100%);
  }
}
#band4>.inner{max-width:min(50rem,92%);align-self:flex-start;margin-top:12vh}
@media(max-height:800px){#band4>.inner{margin-top:8vh}}

/* No telefone esse encosto no alto quebrava: com 8vh numa tela de 800px o
   título começava em y=64 e a barra fixa do topo tem 74px, ou seja ela comia
   a primeira linha ("Academia" aparecia pela metade). E ainda sobravam 421px
   vazios embaixo. Então no celular a faixa 4 deixa de se pendurar no topo e
   se centra na tela, como as outras três. */
@media (pointer:coarse) and (max-width:820px){
  #band4{align-items:center}
  #band4>.inner{align-self:center;margin-top:0}
  /* o escurecimento acompanha: o texto não está mais no alto */
  #band4::before{
    background:linear-gradient(to bottom,
      rgba(4,5,9,.20) 0%,
      rgba(4,5,9,.48) 14%,
      rgba(4,5,9,.63) 32%,
      rgba(4,5,9,.63) 62%,
      rgba(4,5,9,.44) 82%,
      rgba(4,5,9,.18) 100%);
  }
}
#band4 .sub{
  margin:1.35rem auto 0;max-width:44ch;color:#D3DDDA;font-size:clamp(.98rem,.9rem + .3vw,1.16rem);
  opacity:var(--ks,0);transform:translateY(calc((1 - var(--ks,0))*14px));
}
#band4 .row{
  margin-top:1.9rem;display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;
  opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0))*16px));pointer-events:auto;
}

/* --- as entradas: só transform e opacity, guiadas por --k --- */
.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px));
}
.e-grid .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)));
}
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px));
}
.e-blur{position:relative;display:block}
.e-blur .soft,.e-blur .sharp{display:block}
.e-blur .soft{filter:blur(11px);opacity:calc(1 - var(--k,0));position:absolute;inset:0}
.e-blur .sharp{opacity:var(--k,0)}

/* o hero estático, um layout desenhado */
.static-hero{display:none;position:relative;min-height:100svh;overflow:hidden}
.static-hero .poster{position:absolute;inset:0}
.static-hero .sh-in{
  position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:6rem var(--pad) calc(var(--pad) + 1rem);
  text-shadow:var(--tshadow);
}
.static-hero .sh-in::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(13,20,23,.6) 0%,rgba(13,20,23,.12) 20%,rgba(7,11,13,.66) 52%,rgba(5,8,10,.93) 100%);
}
.static-hero h1{
  font-family:var(--display);font-variation-settings:"wdth" 114;font-weight:700;
  font-size:clamp(2.1rem,1.2rem + 5.2vw,3.4rem);line-height:1.04;letter-spacing:-.02em;
  margin:0 0 1.1rem;max-width:18ch;
}
.static-hero .sub{color:#D3DDDA;max-width:40ch;margin-bottom:1.7rem}
.static-hero .btn{align-self:flex-start;text-shadow:none}

/* ============================================================
   A PÁGINA ABAIXO DO HERO
   ============================================================ */
.below{position:relative;z-index:2;background:var(--canvas)}
section{position:relative;padding:clamp(4.5rem,10vh,8rem) var(--pad)}
.wrap{max-width:74rem;margin:0 auto}

/* o elemento assinatura: a linha de prumo */
.spine{
  position:absolute;left:var(--spine-x);top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,rgba(46,74,56,.15),var(--accent-muted) 6%,var(--accent-muted) 94%,rgba(46,74,56,.15));
  z-index:1;pointer-events:none;
}
.spine::after{
  content:"";position:absolute;inset:0;width:2px;
  background:linear-gradient(to bottom,var(--accent),rgba(109,179,124,.55));
  transform:scaleY(var(--spine,0));transform-origin:top;
  box-shadow:0 0 12px rgba(109,179,124,.35);
}
/* o prumo em si: desce a linha junto com o visitante */
.bob{
  position:absolute;left:-4px;top:calc(var(--spine,0)*100%);width:10px;height:10px;
  border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(109,179,124,.14),0 0 18px rgba(109,179,124,.6);
}
.cota{
  position:absolute;left:var(--spine-x);top:clamp(2.6rem,6vh,4.6rem);
  font-family:var(--mono);font-size:.63rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel);
  padding-left:2.4rem;white-space:nowrap;z-index:2;
}
.cota::before{
  content:"";position:absolute;left:0;top:.52em;width:1.8rem;height:1px;background:var(--accent);opacity:.55;
}
.cota::after{
  content:"";position:absolute;left:-3px;top:calc(.52em - 3px);width:7px;height:7px;
  border:1px solid var(--accent);border-radius:50%;background:var(--canvas);
}
@media(max-width:1080px){.spine,.cota{display:none}}
@media(min-width:1081px){section{padding-left:calc(var(--spine-x) + 5.5rem)}}

/* entradas coreografadas */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.stag>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:0ms}
.stag.in>*:nth-child(2){transition-delay:90ms}
.stag.in>*:nth-child(3){transition-delay:180ms}
.stag.in>*:nth-child(4){transition-delay:270ms}
.stag.in>*:nth-child(5){transition-delay:360ms}
.stag.done>*:nth-child(1),.stag.done>*:nth-child(2),.stag.done>*:nth-child(3),
.stag.done>*:nth-child(4),.stag.done>*:nth-child(5){transition-delay:0s!important}

/* 1. a premissa */
#premissa{padding-top:clamp(5rem,12vh,9rem)}
#premissa h2{max-width:17ch}
#premissa .lede{margin-top:1.8rem}

/* A seção abria com o texto sozinho e metade da tela vazia à direita. A foto
   que entra ali é o próprio argumento: o espaço pronto, limpo, e sem ninguém
   usando. Duas colunas a partir de 900px; abaixo disso a foto desce e vira
   uma faixa larga, que é como ela lê num telefone. */
#premissa .duas{display:grid;gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
@media(min-width:900px){
  #premissa .duas{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
  #premissa .lede{max-width:46ch}
}
.antes{
  position:relative;margin:0;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:#0A1012;
}
.antes img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  transform:scale(1.01);
}
@media(max-width:899px){ .antes img{aspect-ratio:16/10} }
/* o mesmo véu das outras fotos: a página é carvão e esta imagem é clara,
   então ela precisa de um pouso, não de um recorte branco no meio do escuro */
.antes::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 92% at 50% 42%,rgba(8,12,14,0) 34%,rgba(8,12,14,.46) 100%),
    linear-gradient(to bottom,rgba(8,12,14,.26) 0%,rgba(8,12,14,0) 30%,rgba(8,12,14,.6) 100%);
}
/* a legenda pousa sobre o rodapé já escurecido do véu */
.antes figcaption{
  position:absolute;left:1.15rem;right:1.15rem;bottom:1.05rem;z-index:2;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;
  color:#C6D2CF;text-shadow:var(--tshadow);
}
.antes figcaption b{
  display:block;font-family:var(--display);font-weight:600;text-transform:none;
  letter-spacing:.01em;font-size:.98rem;color:var(--text-primary);margin-bottom:.15rem;
}
.dust{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.dust i{
  position:absolute;width:2px;height:2px;border-radius:50%;background:var(--accent);
  opacity:.22;animation:float 16s linear infinite;
}
@keyframes float{
  0%{transform:translateY(14px) scale(.6);opacity:0}
  22%{opacity:.3}
  78%{opacity:.22}
  100%{transform:translateY(-70px) scale(1.1);opacity:0}
}

/* 2. como funciona */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:3rem}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--panel);padding:1.9rem 1.5rem 2rem;position:relative;transition:background .45s var(--ease)}
.step:hover{background:var(--panel-2)}
.step .n{font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:1.4rem}
.step svg{width:44px;height:44px;margin-bottom:1.3rem;display:block;color:var(--accent)}
.step p{color:var(--text-secondary);font-size:.94rem;margin-top:.7rem}
.step .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 0%,rgba(109,179,124,.14),transparent 70%);opacity:0;animation:breathe 7s var(--ease) -2s infinite}
@keyframes breathe{0%,100%{opacity:0}50%{opacity:.85}}

/* 3. o espaço, a vitrine com efeito no hover */
#espaco{background:linear-gradient(180deg,transparent,rgba(20,29,33,.55) 22%,rgba(20,29,33,.55) 78%,transparent)}

/* a vitrine: foto de academia completa que reage ao ponteiro. O hover acende
   as cotas por cima, que é o motivo de arquitetura da marca aplicado a uma
   foto em vez de a um desenho. */
.showcase{
  position:relative;margin:3rem 0 0;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:#0A1012;cursor:default;
  outline-offset:4px;
}
.showcase img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease),filter 1.1s var(--ease);
  transform:scale(1.005);
}
.showcase:hover img,.showcase:focus-visible img,.showcase.lit img{
  transform:scale(1.055);filter:saturate(1.06) contrast(1.04);
}
/* o véu que escurece a foto para as cotas terem onde pousar */
.sc-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%,rgba(8,12,14,0) 30%,rgba(8,12,14,.5) 100%),
    linear-gradient(to bottom,rgba(8,12,14,.3) 0%,rgba(8,12,14,0) 26%,rgba(8,12,14,.72) 100%);
  transition:opacity .8s var(--ease);
}
.showcase:hover .sc-veil,.showcase:focus-visible .sc-veil,.showcase.lit .sc-veil{opacity:1}
/* os cantos de enquadramento, que se traçam sozinhos */
.sc-frame{position:absolute;inset:1.1rem;pointer-events:none;color:var(--accent)}
.sc-frame path{
  fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke;
  stroke-dasharray:56;stroke-dashoffset:56;
  transition:stroke-dashoffset .85s var(--ease);
}
.showcase:hover .sc-frame path,.showcase:focus-visible .sc-frame path,.showcase.lit .sc-frame path{stroke-dashoffset:0}
/* O selo da marca, no alto à direita da foto. As pastilhas de texto saíram
   daqui a pedido do usuário: sobrou a aproximação da imagem e este selo.
   Ele mora dentro do canto que a moldura desenha, e é a MESMA logo de sempre,
   só redimensionada. Regra do projeto: a logo não se altera, nem recorte nem
   fundo. O disco preto sobre a foto é assumido.
   O seletor precisa da força de "img.sc-selo" porque ".showcase img" acima
   manda toda imagem da vitrine ocupar a largura inteira em 16:9. */
.showcase img.sc-selo{
  position:absolute;z-index:3;
  /* centrado na base, a 12% do chao. O canto superior direito disputava
     atencao com as maquinas de cabo daquele lado; aqui embaixo ele pousa
     sobre o piso, que e a area mais calma do quadro. */
  left:50%;bottom:12%;top:auto;right:auto;
  transform:translateX(-50%);
  width:clamp(58px,8vw,96px);height:auto;aspect-ratio:1;
  object-fit:contain;border-radius:50%;
  transition:none;
  filter:drop-shadow(0 10px 30px rgba(5,8,10,.6));
  pointer-events:none;
}
@media(max-width:640px){
  .showcase img.sc-selo{bottom:10%;top:auto;right:auto;left:50%;width:clamp(46px,13vw,64px)}
}
@media(max-width:640px){
  .showcase img{aspect-ratio:4/3}
  .sc-frame{inset:.7rem}
}

/* a fileira de chamadas para ação, repetida pela página */
.cta-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem;align-items:center}
.btn.zap{display:inline-flex;align-items:center;gap:.6rem}
.btn.zap svg{width:18px;height:18px;flex:0 0 auto}
.cta-hint{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);margin-left:.3rem;
}
/* No telefone estas frases fechavam em 9,9px, e elas não são enfeite: são
   argumento de venda ("sem obra, entrega rápida, preço justo", "a visita é sem
   compromisso"). Sobem para 12px e clareiam, porque abaixo disso ninguém lê de
   pé no corredor do prédio. */
@media(max-width:640px){
  .cta-hint{
    font-size:.75rem;letter-spacing:.08em;color:var(--text-secondary);
    margin-left:0;width:100%;
  }
}
@media(max-width:520px){
  .cta-row .btn{width:100%;justify-content:center}
  .cta-hint{margin:.4rem 0 0}
}

/* 4. alugar ou comprar, esqueleto diferente das vizinhas */
/* Os dois cartoes NAO sao duas opcoes equivalentes, e o desenho diz isso antes
   do texto. O de alugar tem mais largura, borda acesa, brilho proprio, selo de
   recomendado e visto verde em cada item. O de comprar recua: fundo apagado,
   borda morta, conteudo em meia-luz e um X vermelho em cada linha. A leitura
   nunca depende SO da cor: o visto e o X tem formas diferentes, os titulos
   dizem o que cada bloco e, e o de comprar carrega a palavra "sozinho". */
/* align-items:stretch, que e o padrao da grade, e NAO "start". Com "start"
   cada cartao ficava com a altura do proprio texto: o de comprar tem descricoes
   mais longas e sobrava mais alto que o de alugar, e o texto de fecho, que se
   alinha pelo mais alto, abria um vao embaixo do cartao curto. Esticados, os
   dois terminam na mesma linha e o vao some junto. */
.two{display:grid;gap:1.4rem;margin-top:3rem;align-items:stretch}
@media(min-width:860px){.two{grid-template-columns:1.22fr .78fr;gap:1.8rem}}
.card{border:1px solid var(--line);border-radius:16px;padding:2rem 1.8rem;background:var(--panel);position:relative;overflow:hidden}

/* ---------- ALUGAR, o caminho ---------- */
.card.lead{
  border:1px solid var(--border-ui-accent);
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(109,179,124,.16),rgba(109,179,124,0) 62%),
    linear-gradient(160deg,rgba(109,179,124,.09),var(--panel) 58%);
  box-shadow:0 0 0 1px rgba(109,179,124,.16), 0 18px 50px -18px rgba(109,179,124,.34);
  padding:2.3rem 2rem 2.2rem;
}
/* a faixa de luz no topo, que marca qual dos dois manda */
.card.lead::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(to right,transparent,var(--accent),transparent);
}
.selo{
  position:absolute;top:1.15rem;right:1.15rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:#08110C;background:var(--accent);border-radius:999px;padding:.32rem .6rem;
}
.card.lead h3{color:var(--text-primary)}
.card.lead li{color:var(--text-secondary)}

/* ---------- COMPRAR, o cenario que o condominio assume ---------- */
.card.alt{
  background:transparent;
  border:1px dashed var(--line);
  box-shadow:none;
}
.card.alt h3{color:var(--steel)}
.card.alt li{color:#7C8A88}
.card.alt li b{color:var(--steel);font-weight:500}

.card h3{margin-bottom:.35rem}
.card-sub{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 1.4rem;color:var(--accent);
}
.card.alt .card-sub{color:var(--alerta)}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.card li{position:relative;padding-left:1.75rem;color:var(--text-secondary);font-size:.95rem;line-height:1.5}
/* os itens viraram titulo + explicacao, entao o titulo ganha linha propria */
.card li b{display:block;color:var(--text-primary);font-weight:500;margin-bottom:.1rem}

/* o visto: dois lados de um quadrado, girados. Desenhado, nao escrito, para
   leitor de tela nao anunciar um glifo solto no meio da frase. */
.card.lead li::before{
  content:"";position:absolute;left:3px;top:.32em;
  width:5px;height:10px;border:solid var(--accent);border-width:0 2px 2px 0;
  transform:rotate(43deg);
}
/* o X: duas barras cruzadas, pelo mesmo motivo */
.card.alt li::before,.card.alt li::after{
  content:"";position:absolute;left:1px;top:.72em;
  width:12px;height:1.5px;border-radius:1px;background:var(--alerta);
}
.card.alt li::before{transform:rotate(45deg)}
.card.alt li::after{transform:rotate(-45deg)}
.close-line{margin-top:2.2rem;font-size:1.02rem;color:var(--text-primary);max-width:52ch}
.close-line b{color:var(--accent);font-weight:500}

/* 5. a responsabilidade */
/* a faixa larga: a seção fala de manutenção, então ela mostra manutenção.
   Recorte 21 por 9 para quebrar o ritmo empilhado das seções vizinhas. */
.band-img{
  margin:3rem 0 0;position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:#0A1012;
}
.band-img img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;display:block}
.band-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(13,20,23,.28) 0%,rgba(13,20,23,0) 34%,rgba(8,12,14,.74) 100%);
}
/* a legenda vai para a direita: o canto esquerdo da filmagem é onde o rolo de
   ferramentas está, e texto sobre ele fica sujo */
.band-img figcaption{
  position:absolute;right:1.5rem;bottom:1.2rem;z-index:2;text-align:right;
  font-family:var(--mono);font-size:.63rem;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--text-primary);text-shadow:var(--tshadow);
}
.band-img figcaption b{color:var(--accent);font-weight:500}
@media(max-width:640px){
  .band-img img{aspect-ratio:16/10}
  .band-img figcaption{right:1rem;bottom:.9rem;font-size:.58rem;letter-spacing:.15em}
}
.trio{display:grid;gap:1rem;margin-top:2.2rem}
@media(min-width:760px){.trio{grid-template-columns:repeat(3,1fr)}}
.chip{
  border:1px solid var(--line);border-radius:13px;padding:1.3rem 1.2rem;background:rgba(20,29,33,.5);
}
.chip span{font-family:var(--mono);font-size:.63rem;letter-spacing:.19em;color:var(--accent);display:block;margin-bottom:.6rem}
.chip p{font-size:.9rem;color:var(--text-secondary)}

/* 6. a prova */
.proof{display:grid;gap:2rem;align-items:baseline;margin-top:1rem}
@media(min-width:820px){.proof{grid-template-columns:auto 1fr;gap:3rem}}
.big{
  font-family:var(--display);font-variation-settings:"wdth" 124;font-weight:700;
  font-size:clamp(4.6rem,3rem + 9vw,10rem);line-height:.84;letter-spacing:-.04em;
  color:var(--accent);
}
.proof p{max-width:46ch}
.proof .p1{font-size:clamp(1.15rem,1rem + .9vw,1.6rem);line-height:1.35;color:var(--text-primary)}
.proof .p2{margin-top:1.2rem;color:var(--text-secondary);font-size:.98rem}

/* 7. os aparelhos */
.gear{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:3rem}
@media(min-width:700px){.gear{grid-template-columns:repeat(2,1fr)}}
/* quatro colunas, não cinco: são oito aparelhos, e 4 mais 4 fecha a grade
   sem deixar uma fileira órfã */
@media(min-width:1040px){.gear{grid-template-columns:repeat(4,1fr)}}
.g{background:var(--panel);padding:0 0 1.5rem;text-align:center;transition:background .45s var(--ease);overflow:hidden}
.g:hover{background:var(--panel-2)}
/* a foto do aparelho, no mesmo mundo da filmagem do hero. O degradê no pé
   funde a base da imagem no cartão, para os cinco fundos diferentes lerem
   como um conjunto só. */
.g figure{margin:0 0 1.15rem;position:relative;overflow:hidden;background:#0A1012}
.g img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.g:hover img{transform:scale(1.05)}
.g figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(13,20,23,.18) 0%,rgba(13,20,23,0) 30%,rgba(20,29,33,.28) 78%,var(--panel) 100%);
  transition:opacity .45s var(--ease);
}
.g:hover figure::after{opacity:.75}
.g strong{display:block;font-size:.95rem;font-weight:500;padding:0 1rem}
/* altura reservada: sem ela a especificação mais longa quebra em duas linhas
   e o cartão fica desalinhado dos irmãos, o que lê como buraco */
.g em{font-style:normal;font-family:var(--mono);font-size:.54rem;letter-spacing:.09em;color:var(--steel);display:block;margin-top:.55rem;min-height:2.6em;line-height:1.3;padding:0 .8rem}

/* 8. perguntas */
.faq{margin-top:2.6rem;max-width:60rem;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  cursor:pointer;list-style:none;padding:1.35rem 2.6rem 1.35rem 0;position:relative;
  font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:600;
  font-size:clamp(1rem,.95rem + .3vw,1.16rem);letter-spacing:-.005em;
  transition:color .3s var(--ease);
}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--accent)}
summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease);
}
details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
details p{padding:0 0 1.5rem;color:var(--text-secondary);max-width:60ch;font-size:.97rem}

/* 9. o formulário */
#projeto{background:linear-gradient(180deg,transparent,rgba(20,29,33,.6))}
.form-grid{display:grid;gap:2.6rem;margin-top:3rem;align-items:start}
@media(min-width:920px){.form-grid{grid-template-columns:1fr 1.05fr;gap:4rem}}
form{display:grid;gap:1.1rem;border:1px solid var(--line);border-radius:18px;padding:1.9rem 1.7rem;background:var(--panel)}
label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.17em;text-transform:uppercase;color:var(--steel);margin-bottom:.55rem}
input{
  width:100%;background:rgba(10,16,18,.75);border:1px solid var(--border-ui);border-radius:10px;
  padding:.85rem .95rem;color:var(--text-primary);font-family:var(--text);font-size:.98rem;
  transition:border-color .3s var(--ease),background .3s var(--ease);min-height:46px;
}
input::placeholder{color:#7C8B8A}   /* 5,3:1, o valor anterior batia 3,8 */
input:focus{outline:none;border-color:var(--accent);background:rgba(10,16,18,.95)}
form .btn{width:100%;margin-top:.5rem;font-size:.98rem;padding:.95rem 1.25rem}
.micro{font-size:.82rem;color:var(--steel);margin-top:.2rem}
.ok{
  display:none;border:1px solid var(--accent-muted);background:rgba(109,179,124,.09);
  border-radius:12px;padding:1.1rem 1.2rem;font-size:.94rem;
}
.ok.show{display:block}
.ok b{color:var(--accent);font-weight:500}
.side p{color:var(--text-secondary);margin-top:1.5rem;max-width:46ch}
/* Aqui existia um ".side .zap" que vestia este elemento como LINK de texto:
   mono, 12,8px, cor clara e um risco embaixo. Era de um desenho anterior, em
   que o WhatsApp desta coluna não era botão. Quando ele virou "btn zap", a
   regra continuou valendo (".side .zap" pesa mais que ".btn") e atropelava o
   botão: fonte errada, 8px mais baixo que os outros cinco iguais da página, e
   texto CLARO sobre o verde, que além de destoar não tinha contraste. Nenhum
   ".zap" da página é link de texto hoje, então a regra saiu inteira em vez de
   virar exceção. O botão agora herda ".btn" como todos os outros. */

/* rodapé */
footer{
  border-top:1px solid var(--line);padding:3rem var(--pad) 2.4rem;position:relative;z-index:2;
  background:var(--canvas);
}
.foot{max-width:74rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:1.6rem 2.5rem;align-items:center}
.foot .brand{margin-right:auto}
.foot a{color:var(--text-secondary);text-decoration:none;font-size:.88rem;transition:color .3s var(--ease)}
.foot a:hover{color:var(--accent)}

/* O menu do cabeçalho repetido aqui embaixo: quem chega ao fim da página não
   precisa rolar tudo de volta para ir a outra seção. No cabeçalho ele some
   abaixo de 900px por falta de espaço; aqui ele fica, porque o rodapé tem
   linha sobrando e pode quebrar em duas. */
.foot-menu{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center}
.foot-acoes{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center}
/* Medido: estes links fechavam com 22px de altura de toque, metade dos 44px
   que um dedo pede. O texto continua do mesmo tamanho; o que cresce é a área
   clicável em volta dele, com padding negativo na margem para o espaçamento
   visual do rodapé não mudar. */
.foot-menu a,.foot-acoes a:not(.foot-social){
  display:inline-flex;align-items:center;min-height:44px;padding:0 .55rem;margin:0 -.55rem;
}
.foot-social{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--line);border-radius:12px;
  color:var(--text-secondary);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.foot-social svg{width:19px;height:19px;display:block}
.foot-social:hover{color:var(--accent);border-color:var(--accent-muted);background:rgba(8,12,14,.5)}
@media(max-width:720px){
  .foot{gap:1.3rem 1.8rem}
  .foot-menu{width:100%;gap:.8rem 1.4rem}
  .foot-menu a{font-size:.84rem}
}
.foot small{width:100%;color:var(--steel);font-size:.76rem;font-family:var(--mono);letter-spacing:.08em;text-align:center}
.foot-credito{
  display:inline-flex;align-items:center;gap:.35rem;vertical-align:middle;
  color:var(--text-secondary);font-weight:500;
}
.foot-credito img{width:14px;height:14px;border-radius:3px;flex:0 0 auto}
.foot-credito:hover{color:var(--accent)}

/* ---------- os portões do hero estático ----------
   O celular NÃO é mais um portão: a descida de vidro roda no telefone, que é
   onde a maioria vê o site. Sobraram os dois casos honestos de recusa, e os
   dois são pedidos do próprio usuário, não suposições sobre o aparelho dele:
   quem pediu menos movimento no sistema, e quem ligou a economia de dados
   (essa entra por JS, na classe .data-saver). */
@media (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:block}
}
html.data-saver .hero{display:none}
html.data-saver .static-hero{display:block}

/* ---------- movimento reduzido, honrado por completo ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;
  }
  .reveal{opacity:1;transform:none}
  .stag>*{opacity:1;transform:none}
  .spine::after{transform:scaleY(1)}
  .showcase .sc-frame path{stroke-dashoffset:0}
  .showcase img{transform:none}
  .cue{display:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}