/* =========================================================================
   FKweb — Camada de site
   Consome exclusivamente os tokens de assets/css/tokens.css.
   Convenção: classes do design system usam prefixo .fk- ; classes
   exclusivas deste site usam prefixo .s- . Nada aqui redefine a paleta
   bruta da marca — apenas compõe com ela.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. EXTENSÕES DE TOKEN
   A escala do manual (H1 64px) é dimensionada para documento. Um site
   cinematográfico precisa de um degrau acima — declarado aqui como
   "display", explicitamente fora da escala Atom e reservado a heroes.

   Toda cor de superfície do site vive nesta seção, em dois jogos completos
   (claro e escuro). É o que faz o alternador de tema trocar o site inteiro
   — inclusive o hero, o rodapé e as bandas escuras — e não só o miolo.
   ------------------------------------------------------------------------- */
:root {
  /* Dimensionado para que as quatro linhas do H1, o subtítulo, os botões e a
     barra de sinais caibam juntos em uma tela de 900px de altura. */
  --s-display:    clamp(2.375rem, 6.4vw, 6.25rem);
  --s-display-sm: clamp(2.25rem, 5.4vw, 4.5rem);

  --s-h2: clamp(2rem, 4.6vw, 3.5rem);   /* topo = --fk-text-h2 (48px) */
  --s-h3: clamp(1.5rem, 2.8vw, 2.25rem);
  --s-lead: clamp(1.0625rem, 1.4vw, 1.25rem);

  --s-gutter: clamp(1.25rem, 5vw, 4.5rem);
  --s-band-y: clamp(4.5rem, 11vh, 9.5rem);
  --s-rule: 1px;

  --s-nav-h: 76px;
  --s-max: 1360px;

  /* ---- JOGO CLARO -------------------------------------------------------- */

  /* Bandas: ritmo de claro/escuro do documento inteiro. */
  --s-band-base: var(--fk-areia);
  --s-band-alt:  var(--fk-off-white);
  --s-panel:     #FFFFFF;

  /* Bandas "cinema" (.s-band--deep, rodapé, menu móvel, cortina de abertura).
     No escuro são breu; no claro viram a mesma cena ao amanhecer. */
  --s-deep:                #F3E5DB;
  --s-deep-2:              #EDDACD;
  --s-deep-text:           var(--fk-grafite);
  --s-deep-muted:          #6E625C;
  --s-deep-subtle:         #9A8A81;
  --s-deep-inverse:        var(--fk-areia);
  --s-deep-brand:          var(--fk-cacau);
  --s-deep-border:         #E1CDC0;
  --s-deep-border-strong:  #C9AE9C;
  --s-deep-surface:        #FFFFFF;
  --s-deep-surface-alt:    #FBF1EB;
  --s-deep-surface-inset:  #FBF3EF;
  --s-deep-accent-soft:    var(--fk-pessego);
  --s-deep-scheme:         light;

  /* Hero: o céu é pintado aqui: o WebGL desenha só as cristas por cima. */
  --s-hero-sky:
    radial-gradient(40% 22% at 50% 64%, rgba(255,236,216,.98) 0%, rgba(255,236,216,0) 76%),
    radial-gradient(66% 38% at 50% 66%, rgba(202,116,69,.42) 0%, rgba(202,116,69,0) 80%),
    linear-gradient(180deg, #A8C6D6 0%, #C9D8DC 24%, #EFDCCB 54%, #F9E2CE 72%, #FFF6F2 100%);
  --s-hero-veil:
    linear-gradient(180deg, rgba(255,246,242,.60) 0%, rgba(255,246,242,.28) 28%, rgba(255,246,242,.06) 50%, rgba(255,246,242,0) 64%),
    linear-gradient(0deg,   rgba(255,246,242,.90) 0%, rgba(255,246,242,.52) 20%, rgba(255,246,242,.18) 36%, rgba(255,246,242,0) 50%);
  --s-hero-text: var(--fk-grafite);
  --s-hero-sub:  #574E4A;
  --s-hero-dim:  #8B7C74;
  --s-hero-line: #DEC9BA;
  --s-hero-rail: #C9AE9C;

  /* Navegação sobre o hero. */
  --s-nav-fg:      var(--fk-grafite);
  --s-nav-fg-soft: rgba(40, 38, 38, .70);
  --s-nav-stuck:   color-mix(in srgb, #FFF6F2 84%, transparent);
  --s-nav-line:    #DEC9BA;

  /* Palco 3D dos grafismos. */
  --s-stage-bg:
    radial-gradient(70% 70% at 50% 42%, rgba(202,116,69,.20) 0%, transparent 72%),
    radial-gradient(90% 90% at 50% 50%, #FFFFFF 0%, #EFDFD4 100%);

  /* Miudezas que mudam de temperatura com o tema. */
  --s-kicker: var(--fk-cacau);          /* terracota puro reprova em texto 12px */
  --s-grain:  .030;
  --s-photo:  saturate(.74) contrast(1.02) brightness(.98);
}

/* ---- JOGO ESCURO --------------------------------------------------------- */
[data-theme="dark"] {
  --s-band-base: #0A0C0D;
  --s-band-alt:  #141516;
  --s-panel:     #1A1819;

  --s-deep:                #0A0C0D;
  --s-deep-2:              #121415;
  --s-deep-text:           var(--fk-areia);
  --s-deep-muted:          #A29B98;
  --s-deep-subtle:         #726B69;
  --s-deep-inverse:        var(--fk-grafite);
  --s-deep-brand:          var(--fk-brand-300);
  --s-deep-border:         #232526;
  --s-deep-border-strong:  #33383A;
  --s-deep-surface:        #16181A;
  --s-deep-surface-alt:    #1D2022;
  --s-deep-surface-inset:  #101213;
  --s-deep-accent-soft:    #43291C;
  --s-deep-scheme:         dark;

  --s-hero-sky:
    radial-gradient(52% 30% at 50% 60%, rgba(202,116,69,.46) 0%, rgba(202,116,69,0) 74%),
    radial-gradient(110% 60% at 50% 66%, #2E1A10 0%, rgba(46,26,16,0) 66%),
    linear-gradient(180deg, #05070A 0%, #0A1014 40%, #16110D 64%, #0A0C0D 100%);
  --s-hero-veil:
    linear-gradient(180deg, rgba(6,8,10,.92) 0%, rgba(6,8,10,.68) 30%, rgba(6,8,10,.22) 50%, rgba(6,8,10,0) 64%),
    linear-gradient(0deg,   rgba(10,12,13,.94) 0%, rgba(10,12,13,.55) 22%, rgba(10,12,13,.20) 38%, rgba(10,12,13,0) 54%);
  --s-hero-text: var(--fk-areia);
  --s-hero-sub:  #C3BAB6;
  --s-hero-dim:  #A29B98;
  --s-hero-line: #232526;
  --s-hero-rail: #33383A;

  --s-nav-fg:      var(--fk-areia);
  --s-nav-fg-soft: color-mix(in srgb, var(--fk-areia) 76%, transparent);
  --s-nav-stuck:   color-mix(in srgb, #0A0C0D 78%, transparent);
  --s-nav-line:    #33383A;

  --s-stage-bg:
    radial-gradient(70% 70% at 50% 45%, rgba(202,116,69,.16) 0%, transparent 70%),
    radial-gradient(90% 90% at 50% 50%, #1A1D1E 0%, #0A0C0D 100%);

  --s-kicker: var(--fk-terracota);
  --s-grain:  .038;
  --s-photo:  saturate(.55) contrast(1.06) brightness(.82);
}

/* Sem data-theme no <html> (só acontece se o script de tema falhar), o
   sistema decide. Repetição obrigatória: CSS não empacota jogos de token. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s-band-base: #0A0C0D;
    --s-band-alt:  #141516;
    --s-panel:     #1A1819;

    --s-deep:                #0A0C0D;
    --s-deep-2:              #121415;
    --s-deep-text:           var(--fk-areia);
    --s-deep-muted:          #A29B98;
    --s-deep-subtle:         #726B69;
    --s-deep-inverse:        var(--fk-grafite);
    --s-deep-brand:          var(--fk-brand-300);
    --s-deep-border:         #232526;
    --s-deep-border-strong:  #33383A;
    --s-deep-surface:        #16181A;
    --s-deep-surface-alt:    #1D2022;
    --s-deep-surface-inset:  #101213;
    --s-deep-accent-soft:    #43291C;
    --s-deep-scheme:         dark;

    --s-hero-sky:
      radial-gradient(52% 30% at 50% 60%, rgba(202,116,69,.46) 0%, rgba(202,116,69,0) 74%),
      radial-gradient(110% 60% at 50% 66%, #2E1A10 0%, rgba(46,26,16,0) 66%),
      linear-gradient(180deg, #05070A 0%, #0A1014 40%, #16110D 64%, #0A0C0D 100%);
    --s-hero-veil:
      linear-gradient(180deg, rgba(6,8,10,.92) 0%, rgba(6,8,10,.68) 30%, rgba(6,8,10,.22) 50%, rgba(6,8,10,0) 64%),
      linear-gradient(0deg,   rgba(10,12,13,.94) 0%, rgba(10,12,13,.55) 22%, rgba(10,12,13,.20) 38%, rgba(10,12,13,0) 54%);
    --s-hero-text: var(--fk-areia);
    --s-hero-sub:  #C3BAB6;
    --s-hero-dim:  #A29B98;
    --s-hero-line: #232526;
    --s-hero-rail: #33383A;

    --s-nav-fg:      var(--fk-areia);
    --s-nav-fg-soft: color-mix(in srgb, var(--fk-areia) 76%, transparent);
    --s-nav-stuck:   color-mix(in srgb, #0A0C0D 78%, transparent);
    --s-nav-line:    #33383A;

    --s-stage-bg:
      radial-gradient(70% 70% at 50% 45%, rgba(202,116,69,.16) 0%, transparent 70%),
      radial-gradient(90% 90% at 50% 50%, #1A1D1E 0%, #0A0C0D 100%);

    --s-kicker: var(--fk-terracota);
    --s-grain:  .038;
    --s-photo:  saturate(.55) contrast(1.06) brightness(.82);
  }
}

/* Ativos que existem em duas versões (logotipos claros e escuros). */
.s-if-light { display: none; }
[data-theme="light"] .s-if-light { display: block; }
[data-theme="light"] .s-if-dark  { display: none; }

/* Troca de tema em varredura circular a partir do botão (View Transitions,
   theme.js). O fade padrão do navegador sai; quem anima é o recorte do
   quadro novo, que vai por cima. Sem suporte, a troca é direta. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2147483647; }

/* -------------------------------------------------------------------------
   1. FUNDAÇÃO
   ------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
html.s-lenis { scroll-behavior: auto; }

body {
  background: var(--s-band-base);
  overflow-x: clip;
  /* Sem peso nem itálico sintetizados: as duas famílias da marca têm cortes
     próprios e a simulação do navegador deforma o desenho. */
  font-synthesis: none;
  transition: background-color var(--fk-duration-slow) var(--fk-ease);
}
body.s-locked { overflow: hidden; }

::selection { background: var(--fk-terracota); color: var(--fk-areia); }

.s-shell { position: relative; z-index: 1; }

.s-wrap {
  width: 100%;
  max-width: var(--s-max);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
}
.s-wrap--tight { max-width: 980px; }
.s-wrap--text  { max-width: 68ch; }

/* -------------------------------------------------------------------------
   2. BANDAS
   Cada banda remapeia os tokens semânticos para o seu próprio fundo, então
   todo componente do design system funciona dentro dela sem regra extra.
   ------------------------------------------------------------------------- */
.s-band {
  position: relative;
  padding-block: var(--s-band-y);
  background: var(--s-band-base);
  color: var(--fk-text);
  transition: background-color var(--fk-duration-slow) var(--fk-ease);
}
.s-band--alt   { background: var(--s-band-alt); }
.s-band--flush { padding-block: 0; }

.s-band--deep {
  --fk-text:          var(--s-deep-text);
  --fk-text-muted:    var(--s-deep-muted);
  --fk-text-subtle:   var(--s-deep-subtle);
  --fk-text-inverse:  var(--s-deep-inverse);
  --fk-text-brand:    var(--s-deep-brand);
  --fk-border:        var(--s-deep-border);
  --fk-border-strong: var(--s-deep-border-strong);
  --fk-surface:       var(--s-deep-surface);
  --fk-surface-alt:   var(--s-deep-surface-alt);
  --fk-surface-inset: var(--s-deep-surface-inset);
  --fk-accent-soft:   var(--s-deep-accent-soft);
  --s-panel:          var(--s-deep-surface);
  background: var(--s-deep);
  color: var(--fk-text);
  color-scheme: var(--s-deep-scheme);
}

/* Cabeçalho de seção -------------------------------------------------------- */
.s-head {
  display: grid;
  gap: var(--fk-space-6);
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 900px) {
  .s-head {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: end;
  }
}

/* Símbolo acima do título, quando a seção fala da própria marca. Grande o
   bastante para a coruja e a montanha serem reconhecíveis — abaixo de uns
   80px o desenho vira mancha e não explica nada. */
.s-head__mark {
  display: block;
  width: clamp(5.25rem, 9vw, 8.5rem);
  margin-bottom: var(--fk-space-7);
}
/* O `display` das duas versões é assunto de .s-if-light/.s-if-dark, lá em
   cima na folha. Repeti-lo aqui, mais abaixo, faria as duas aparecerem
   juntas — uma embaixo da outra. */
.s-head__mark img { width: 100%; height: auto; }

.s-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--fk-space-4);
  font-family: var(--fk-font-mono);
  font-size: var(--fk-text-xs);
  font-weight: var(--fk-weight-semibold);
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--s-kicker);
}
.s-kicker::before {
  content: "";
  width: clamp(1.5rem, 4vw, 3rem);
  height: var(--s-rule);
  background: currentColor;
  opacity: .55;
}

.s-title {
  font-family: var(--fk-font-brand);
  font-size: var(--s-h2);
  font-weight: var(--fk-weight-bold);
  line-height: 1.02;
  letter-spacing: var(--fk-tracking-title);
  text-wrap: balance;
  margin-top: var(--fk-space-5);
}
.s-title em {
  font-style: normal;
  color: var(--fk-accent);
}

.s-lead {
  font-size: var(--s-lead);
  line-height: var(--fk-leading-relaxed);
  color: var(--fk-text-muted);
  max-width: 60ch;
}

/* Máscara por palavra — o JS divide os títulos e cada palavra sobe de dentro
   de uma fenda.

   FOLGA DE MÁSCARA (vale para .s-w e .s-line). A Cal Sans desenha até 1.00em
   acima e 0.30em abaixo da linha de base; a tinta chega a 0.91em no acento de
   maiúscula (Á, Ê, Õ) e a 0.21em na perna de "g", "p", "q", "ç". Os títulos
   do site usam entrelinha apertada (0.94 a 1.02), então a caixa de linha é
   MENOR que o desenho da letra: qualquer overflow:hidden rente a ela raspa o
   acento em cima e a perna embaixo.

   O padding abre a folga e a margem negativa a devolve ao fluxo — o recorte
   cresce sem alterar o espaçamento projetado. Quem entra por baixo é levado
   além dessa folga pelo deslocamento inicial (145%, em .s-anim e no site.js),
   senão a palavra escondida apareceria dentro do próprio padding. */
.s-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-top: .16em;
  margin-top: -.16em;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.s-w > span { display: block; will-change: transform; }

/* -------------------------------------------------------------------------
   3. PRÉ-CARREGAMENTO
   ------------------------------------------------------------------------- */
/* A cortina só existe se o script de cabeçalho a autorizar, ainda no
   primeiro paint. Assim ela nunca aparece por cima de conteúdo já lido. */
.s-boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  background: var(--s-deep);
  color: var(--s-deep-text);
}
html.s-boot-on .s-boot { display: grid; }
.s-boot[hidden] { display: none !important; }

/* Lâmina que passa na frente quando a cortina sobe: dá peso ao corte. */
.s-boot__sheet {
  position: absolute;
  inset: 0;
  background: var(--fk-gradient-terracota);
  transform: scaleY(0);
  transform-origin: bottom center;
  pointer-events: none;
}

.s-boot__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--fk-space-8);
}
.s-boot__mark {
  width: clamp(74px, 12vw, 128px);
  filter: drop-shadow(0 0 48px rgba(202, 116, 69, .45));
}
.s-boot__bar {
  width: clamp(180px, 32vw, 320px);
  height: 2px;
  background: var(--s-deep-border);
  overflow: hidden;
}
.s-boot__fill {
  height: 100%;
  width: 100%;
  background: var(--fk-terracota);
  transform: scaleX(0);
  transform-origin: left center;
}
.s-boot__meta {
  display: flex;
  width: clamp(180px, 32vw, 320px);
  justify-content: space-between;
  font-family: var(--fk-font-mono);
  font-size: var(--fk-text-xs);
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--s-deep-subtle);
}
.s-boot__num { font-variant-numeric: tabular-nums; color: var(--s-deep-brand); }

/* -------------------------------------------------------------------------
   4. NAVEGAÇÃO
   ------------------------------------------------------------------------- */
.s-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 90;
  background: var(--fk-terracota);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.s-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: var(--s-nav-h);
  display: flex;
  align-items: center;
  color: var(--s-nav-fg);
  transition: transform var(--fk-duration-slow) var(--fk-ease),
              background-color var(--fk-duration-slow) var(--fk-ease),
              border-color var(--fk-duration-slow) var(--fk-ease),
              backdrop-filter var(--fk-duration-slow) var(--fk-ease);
  border-bottom: var(--s-rule) solid transparent;
}
.s-nav--stuck {
  background: var(--s-nav-stuck);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--s-nav-line);
}
.s-nav--hidden { transform: translateY(-105%); }

.s-nav__row {
  display: flex;
  align-items: center;
  gap: var(--fk-space-7);
  width: 100%;
  max-width: var(--s-max);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
}
.s-nav__logo { height: 26px; flex: none; }
.s-nav__logo img { height: 100%; width: auto; }

.s-nav__links {
  display: none;
  margin-left: auto;
  gap: var(--fk-space-3);
  align-items: center;
}
@media (min-width: 1000px) { .s-nav__links { display: flex; } }

.s-nav__link {
  position: relative;
  padding: var(--fk-space-3) var(--fk-space-4);
  font-size: var(--fk-text-sm);
  font-weight: var(--fk-weight-medium);
  color: var(--s-nav-fg-soft);
  text-decoration: none;
  transition: color var(--fk-duration-fast) var(--fk-ease);
}
.s-nav__link::after {
  content: "";
  position: absolute;
  left: var(--fk-space-4);
  right: var(--fk-space-4);
  bottom: 6px;
  height: var(--s-rule);
  background: var(--fk-terracota);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--fk-duration-normal) var(--fk-ease);
}
.s-nav__link:hover,
.s-nav__link[aria-current="true"] { color: var(--s-nav-fg); }
.s-nav__link:hover::after,
.s-nav__link[aria-current="true"]::after { transform: scaleX(1); }

.s-nav__side {
  display: flex;
  align-items: center;
  gap: var(--fk-space-3);
  margin-left: auto;
}
@media (min-width: 1000px) { .s-nav__side { margin-left: 0; } }

.s-icon-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: var(--s-rule) solid var(--s-nav-line);
  border-radius: var(--fk-radius-full);
  background: transparent;
  color: var(--s-nav-fg);
  transition: border-color var(--fk-duration-fast) var(--fk-ease),
              background-color var(--fk-duration-fast) var(--fk-ease),
              color var(--fk-duration-fast) var(--fk-ease),
              transform var(--fk-duration-normal) var(--fk-ease-spring);
}
.s-icon-btn:hover {
  border-color: var(--fk-terracota);
  color: var(--fk-terracota);
  transform: rotate(-18deg) scale(1.06);
}
.s-icon-btn svg { width: 17px; height: 17px; }
.s-icon-btn .s-ico--sun  { display: none; }
[data-theme="dark"] .s-icon-btn .s-ico--sun  { display: block; }
[data-theme="dark"] .s-icon-btn .s-ico--moon { display: none; }

/* A barra não tem mais CTA: sobre o hero o cartão do canto direito já
   convida, e da rolagem em diante quem convida é o botão flutuante do
   WhatsApp (ver "BOTÃO FLUTUANTE DO WHATSAPP", no fim deste arquivo). */

.s-burst { display: grid; }
@media (min-width: 1000px) { .s-burst { display: none; } }

/* Menu móvel --------------------------------------------------------------- */
.s-drawer {
  position: fixed;
  inset: 0;
  z-index: 79;
  display: grid;
  grid-template-rows: var(--s-nav-h) 1fr;
  background: var(--s-deep);
  color: var(--s-deep-text);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--fk-duration-slow) var(--fk-ease);
}
.s-drawer[data-open="true"] { clip-path: inset(0 0 0 0); }
.s-drawer__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--fk-space-2);
  padding: var(--s-gutter);
  max-width: var(--s-max);
  margin-inline: auto;
  width: 100%;
}
.s-drawer__link {
  display: flex;
  align-items: baseline;
  gap: var(--fk-space-5);
  padding: var(--fk-space-4) 0;
  border-bottom: var(--s-rule) solid var(--s-deep-border);
  font-family: var(--fk-font-brand);
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  letter-spacing: var(--fk-tracking-title);
  line-height: 1.1;
  color: var(--s-deep-text);
  text-decoration: none;
  transition: color var(--fk-duration-fast) var(--fk-ease),
              padding-left var(--fk-duration-normal) var(--fk-ease);
}
.s-drawer__link:hover { color: var(--fk-accent); padding-left: var(--fk-space-5); }
.s-drawer__link span {
  font-family: var(--fk-font-mono);
  font-size: var(--fk-text-xs);
  color: var(--s-deep-brand);
}

/* -------------------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------------------- */
.s-hero {
  position: relative;
  /* Exatamente a altura da tela: tudo se lê de uma vez, sem rolar. */
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: calc(var(--s-nav-h) + clamp(3rem, 9vh, 7rem));
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* O céu é pintado em CSS e o WebGL desenha só as cristas por cima. Isso
   mantém a cena leve, e o sol em Terracota nasce exatamente na altura da
   linha do horizonte — aparecendo pelos vãos entre os picos. */
.s-canvas {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--s-hero-sky);
  will-change: transform;
}
.s-canvas canvas { display: block; width: 100% !important; height: 100% !important; }

/* Scrim em gradiente — a solução que o manual da marca prescreve para
   título sobre imagem. Garante contraste do H1 sem apagar a paisagem. */
.s-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--s-hero-veil);
}

.s-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--s-max);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
  /* Estica até a barra de sinais: é o que permite ancorar o método no pé
     da coluna de texto enquanto o cartão fica no topo da outra. */
  align-self: stretch;
  display: grid;
  will-change: transform;
}

.s-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fk-space-4) var(--fk-space-6);
  font-family: var(--fk-font-mono);
  font-size: var(--fk-text-xs);
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--s-hero-dim);
  margin-bottom: clamp(1.5rem, 3.4vw, 2.5rem);
}
.s-hero__eyebrow b { color: var(--s-kicker); font-weight: var(--fk-weight-semibold); }
.s-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fk-terracota);
  box-shadow: 0 0 0 0 rgba(202,116,69,.6);
  animation: s-pulse 2.6s var(--fk-ease) infinite;
}
@keyframes s-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(202,116,69,.55); }
  60%      { box-shadow: 0 0 0 9px rgba(202,116,69,0); }
}

.s-hero__title {
  font-family: var(--fk-font-brand);
  font-size: var(--s-display);
  font-weight: var(--fk-weight-bold);
  line-height: .94;
  letter-spacing: var(--fk-tracking-title);
  color: var(--s-hero-text);
  max-width: 20ch;
  margin: 0;
}
/* Cal Sans não tem itálico. Deixar o <em> em itálico faria o navegador
   inclinar a fonte artificialmente — o destaque aqui é a cor, como no
   restante do site (.s-title em). */
.s-hero__title .s-accent { color: var(--fk-terracota); font-style: normal; }

/* Máscara por linha para a entrada tipográfica. Entrelinha de 0.94 é o caso
   mais apertado do site: sem a folga descrita em .s-w, a fenda corta 3px da
   perna do "g" de "negócio" e do "q" de "que" a 100px de corpo. */
.s-line {
  display: block;
  overflow: hidden;
  padding-top: .2em;
  margin-top: -.2em;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.s-line > span { display: block; will-change: transform; }

/* Duas colunas: texto à esquerda (com o método ancorado no pé) e o cartão
   de ação à direita, no topo. Abaixo de 1000px vira uma coluna só e o
   cartão desce para logo depois do subtítulo. */
.s-hero__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .s-hero__grid { grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 400px); }
}
.s-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  height: 100%;
}

.s-hero__sub {
  font-size: var(--s-lead);
  line-height: var(--fk-leading-relaxed);
  color: var(--s-hero-sub);
  max-width: 46ch;
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
}

/* Cartão de ação: vidro sobre o céu, no canto superior direito. Os dois
   botões ocupam a largura toda — não há como não vê-los. */
.s-hero__cta {
  display: grid;
  gap: var(--fk-space-4);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: var(--s-rule) solid var(--s-hero-line);
  border-radius: var(--fk-radius-2xl);
  background: color-mix(in srgb, var(--s-deep) 58%, transparent);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: var(--fk-shadow-lg);
  will-change: transform;
}
.s-hero__cta-k {
  font-family: var(--fk-font-mono);
  font-size: 10px;
  font-weight: var(--fk-weight-semibold);
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--s-kicker);
}
.s-hero__cta-t {
  font-size: var(--fk-text-sm);
  line-height: var(--fk-leading-normal);
  color: var(--s-hero-sub);
  margin-bottom: var(--fk-space-2);
}
.s-hero__cta .s-btn-go { justify-content: space-between; padding-left: var(--fk-space-8); }
.s-hero__cta .fk-btn--secondary {
  --_fg: var(--s-hero-text);
  --_bd: var(--s-hero-rail);
  --_bg: transparent;
}
.s-hero__cta .fk-btn--secondary:hover { --_bd: var(--fk-accent); }

.s-hero__trust {
  display: flex;
  align-items: flex-start;
  gap: var(--fk-space-3);
  font-size: var(--fk-text-sm);
  line-height: 1.45;
  color: var(--s-hero-dim);
}
/* Alinhado à primeira linha, caso a frase quebre em duas. */
.s-hero__trust svg { width: 14px; height: 14px; flex: none; margin-top: .2em; color: var(--fk-terracota); }

/* Seta em cápsula no botão principal. No hover a seta sai pela direita e
   outra entra pela esquerda: o botão "anda" na direção do clique. */
.s-btn-go { padding-right: var(--fk-space-5); }
.s-btn-go__ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin: -8px 0 -8px var(--fk-space-2);
  border-radius: 50%;
  background: color-mix(in srgb, var(--fk-areia) 20%, transparent);
  overflow: hidden;
  transition: background-color var(--fk-duration-normal) var(--fk-ease);
}
.s-btn-go__ico svg {
  position: absolute;
  width: 15px; height: 15px;
  transition: transform var(--fk-duration-slow) var(--fk-ease);
}
.s-btn-go__ico svg:last-child { transform: translateX(-170%); }
.s-btn-go:hover .s-btn-go__ico { background: color-mix(in srgb, var(--fk-areia) 30%, transparent); }
.s-btn-go:hover .s-btn-go__ico svg:first-child { transform: translateX(170%); }
.s-btn-go:hover .s-btn-go__ico svg:last-child  { transform: translateX(0); }

/* Painel do método: vidro sobre a paisagem, ancorado no pé da coluna de
   texto. O destaque percorre as etapas sozinho (site.js); é a prévia da
   seção Processo, para onde o botão do cartão leva. Só em tela larga — no
   celular a altura do hero é mais preciosa que a prévia. */
.s-hero__method {
  display: none;
  width: 100%;
  max-width: 560px;
  margin-top: auto;
  padding: var(--fk-space-5) var(--fk-space-6) var(--fk-space-6);
  border: var(--s-rule) solid var(--s-hero-line);
  border-radius: var(--fk-radius-xl);
  background: color-mix(in srgb, var(--s-deep) 48%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
}
@media (min-width: 1000px) { .s-hero__method { display: block; } }
.s-hero__method-k {
  font-family: var(--fk-font-mono);
  font-size: 10px;
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--s-hero-dim);
  margin-bottom: var(--fk-space-5);
}
.s-hero__method-list {
  display: flex;
  align-items: center;
  gap: var(--fk-space-3);
}
.s-hero__method-i {
  display: flex;
  align-items: center;
  gap: var(--fk-space-3);
  min-width: 0;
  font-family: var(--fk-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--s-hero-dim);
  transition: color 400ms var(--fk-ease);
}
.s-hero__method-i:not(:last-child) { flex: 1; }
.s-hero__method-i span { white-space: nowrap; }
.s-hero__method-dot {
  width: 9px; height: 9px;
  flex: none;
  border-radius: 50%;
  border: var(--s-rule) solid var(--s-hero-rail);
  box-shadow: 0 0 0 0 rgba(202, 116, 69, 0);
  transition: background-color 400ms var(--fk-ease),
              border-color 400ms var(--fk-ease),
              box-shadow 600ms var(--fk-ease);
}
.s-hero__method-line {
  position: relative;
  flex: 1;
  min-width: 14px;
  height: var(--s-rule);
  background: var(--s-hero-rail);
}
.s-hero__method-line b {
  position: absolute;
  inset: -1px 0;
  background: var(--fk-terracota);
  transform: scaleX(0);
  transform-origin: left center;
}
.s-hero__method-i--on   { color: var(--s-hero-text); }
.s-hero__method-i--done { color: var(--s-hero-sub); }
.s-hero__method-i--on .s-hero__method-dot,
.s-hero__method-i--done .s-hero__method-dot { background: var(--fk-terracota); border-color: var(--fk-terracota); }
.s-hero__method-i--on .s-hero__method-dot { box-shadow: 0 0 0 5px rgba(202, 116, 69, .22); }
/* Rodapé do hero: barra de sinais ------------------------------------------ */
.s-hero__foot {
  position: relative;
  width: 100%;
  max-width: var(--s-max);
  margin-inline: auto;
  padding: var(--fk-space-6) var(--s-gutter) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fk-space-6) var(--fk-space-9);
  border-top: var(--s-rule) solid var(--s-hero-line);
  will-change: transform;
}
.s-sig {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.s-sig__k {
  font-family: var(--fk-font-mono);
  font-size: 10px;
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--s-hero-dim);
}
.s-sig__v {
  font-family: var(--fk-font-brand);
  font-size: var(--fk-text-lg);
  letter-spacing: var(--fk-tracking-title);
  color: var(--s-hero-text);
  font-variant-numeric: tabular-nums;
}
.s-scroll-hint {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--fk-space-4);
  font-family: var(--fk-font-mono);
  font-size: 10px;
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--s-hero-dim);
  text-decoration: none;
}
.s-scroll-hint__rail {
  position: relative;
  width: 1px; height: 34px;
  background: var(--s-hero-rail);
  overflow: hidden;
}
.s-scroll-hint__rail::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 12px;
  background: var(--fk-terracota);
  animation: s-drop 2.2s var(--fk-ease) infinite;
}
@keyframes s-drop {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(340%); }
}

/* -------------------------------------------------------------------------
   6. MARQUEE
   A animação CSS é o plano B. Com GSAP, o JS assume e a faixa passa a
   responder à velocidade da rolagem — inclusive invertendo o sentido.
   ------------------------------------------------------------------------- */
.s-ticker {
  --fk-text: var(--fk-areia);
  overflow: hidden;
  background: var(--fk-gradient-terracota);
  border-block: var(--s-rule) solid rgba(255,246,242,.14);
  padding-block: var(--fk-space-5);
}
.s-ticker__track {
  display: flex;
  width: max-content;
  animation: s-slide 34s linear infinite;
}
html.s-anim .s-ticker__track { animation: none; }
.s-ticker__set {
  display: flex;
  align-items: center;
  flex: none;
}
.s-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-inline: clamp(.75rem, 2vw, 1.5rem);
  font-family: var(--fk-font-brand);
  font-size: clamp(1rem, 1.9vw, 1.5rem);
  letter-spacing: var(--fk-tracking-title);
  color: var(--fk-areia);
  white-space: nowrap;
}
.s-ticker__item::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,246,242,.5);
}
@keyframes s-slide {
  to { transform: translate3d(-50%, 0, 0); }
}

/* -------------------------------------------------------------------------
   7. MANIFESTO — a frase sai do desfoque palavra por palavra
   ------------------------------------------------------------------------- */
.s-manifesto { position: relative; }
.s-manifesto__stage {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: var(--s-band-y);
}
.s-manifesto__quote {
  font-family: var(--fk-font-brand);
  font-size: clamp(1.75rem, 5.1vw, 4.5rem);
  font-weight: var(--fk-weight-bold);
  line-height: 1.08;
  letter-spacing: var(--fk-tracking-title);
  max-width: 24ch;
  margin: 0;
  perspective: 900px;
  will-change: transform;
}
/* As palavras nascem fora de foco, deitadas para trás, e levantam conforme a
   leitura desce. O destaque em Terracota só vale quando a palavra já acendeu
   — por isso a regra composta, e não uma cor fixa em .w--mark. */
.s-manifesto__quote .w {
  display: inline-block;
  color: color-mix(in srgb, var(--fk-text) 16%, transparent);
  filter: blur(7px);
  transform: translateY(.14em) rotateX(-58deg) scale(.97);
  transform-origin: 50% 100%;
  transition: color 480ms var(--fk-ease),
              filter 480ms var(--fk-ease),
              transform 560ms var(--fk-ease);
}
.s-manifesto__quote .w--on {
  color: var(--fk-text);
  filter: blur(0);
  transform: none;
}
.s-manifesto__quote .w--on.w--mark  { color: var(--fk-accent); }

/* Sem JS, a citação precisa nascer legível. */
html:not(.s-anim) .s-manifesto__quote .w { color: var(--fk-text); filter: none; transform: none; }
html:not(.s-anim) .s-manifesto__quote .w--mark { color: var(--fk-accent); }

.s-manifesto__by {
  display: flex;
  align-items: center;
  gap: var(--fk-space-5);
  font-size: var(--fk-text-sm);
  color: var(--fk-text-muted);
  max-width: 52ch;
}
.s-manifesto__by img { width: 34px; flex: none; opacity: .85; }

/* -------------------------------------------------------------------------
   8. PRINCÍPIOS
   ------------------------------------------------------------------------- */
.s-principles {
  display: grid;
  background: var(--fk-border);
  border: var(--s-rule) solid var(--fk-border);
  perspective: 1400px;
}
/* O fio entre os cartões é borda do próprio cartão, não vão da grade. Vão de
   1px some quando a coluna dá número quebrado: a partir de 1700px o conteúdo
   tem 1416px e cada coluna fica com 470,66px, aí o navegador arredonda a
   borda de um cartão e a do vizinho para o mesmo pixel e a linha desaparece —
   só a do meio, o que fazia uma caixa parecer diferente das outras. Borda
   fica dentro da caixa e sempre é pintada. */
.s-principle + .s-principle { border-top: var(--s-rule) solid var(--fk-border); }

@media (min-width: 820px) {
  .s-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Em três colunas o fio vira vertical; volta a ser horizontal só se entrar
     uma segunda fileira. */
  .s-principle + .s-principle          { border-top: 0; }
  .s-principle:not(:nth-child(3n + 1)) { border-left: var(--s-rule) solid var(--fk-border); }
  .s-principle:nth-child(n + 4)        { border-top: var(--s-rule) solid var(--fk-border); }

  /* Guarda anti-vão. Se a última fileira ficar órfã, o item estica pelas
     colunas que sobraram — fileira incompleta mostraria o fundo da grade e
     leria como bug. Com três princípios estas regras não casam com nada;
     existem para o dia em que entrar um quarto. */
  .s-principle:last-child:nth-child(3n + 1) { grid-column: span 3; }
  .s-principle:last-child:nth-child(3n + 2) { grid-column: span 2; }
}

.s-principle {
  position: relative;
  background: var(--s-band-base);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  display: grid;
  gap: var(--fk-space-5);
  align-content: start;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: background-color var(--fk-duration-normal) var(--fk-ease);
}
.s-principle::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--fk-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--fk-duration-slow) var(--fk-ease);
}
/* Halo que segue o ponteiro: dá relevo sem trocar a cor da tipografia. */
.s-principle::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(30% 40% at var(--_mx, 50%) var(--_my, 50%),
              color-mix(in srgb, var(--fk-accent) 22%, transparent) 0%, transparent 72%);
  transition: opacity var(--fk-duration-slow) var(--fk-ease);
}
.s-principle:hover::before { transform: scaleX(1); }
.s-principle:hover::after  { opacity: 1; }
.s-principle:hover { background: var(--s-band-alt); }
.s-principle > * { position: relative; z-index: 1; }

.s-principle__glyph {
  width: 30px;
  color: var(--fk-accent);
}
.s-principle__glyph svg { width: 100%; height: auto; fill: currentColor; }
.s-principle__t {
  font-family: var(--fk-font-brand);
  font-size: var(--fk-text-h4);
  letter-spacing: var(--fk-tracking-title);
  line-height: 1.1;
}
.s-principle__d {
  font-size: var(--fk-text-sm);
  line-height: var(--fk-leading-relaxed);
  color: var(--fk-text-muted);
}
.s-principle__meta {
  font-family: var(--fk-font-mono);
  font-size: 10px;
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--fk-text-subtle);
}

/* -------------------------------------------------------------------------
   9. SERVIÇOS
   ------------------------------------------------------------------------- */
/* A perspectiva é para a entrada em 3D das linhas (site.js): cada uma
   desdobra de cima para baixo, como uma persiana. */
.s-services { display: grid; gap: var(--s-rule); background: var(--fk-border); perspective: 1200px; }

.s-service {
  position: relative;
  display: grid;
  gap: var(--fk-space-5);
  grid-template-columns: minmax(0, 1fr);
  background: var(--s-band-base);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  overflow: hidden;
  /* A linha inteira é um link; sem isto o padrão de <a> sublinha título,
     texto e etiquetas de uma vez. */
  text-decoration: none;
  color: inherit;
}
@media (min-width: 900px) {
  .s-service {
    grid-template-columns: 5rem minmax(0, 1.05fr) minmax(0, 1.35fr) auto;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
  }
}
.s-service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fk-gradient-terracota);
  opacity: 0;
  transform: translateY(101%);
  transition: transform var(--fk-duration-slow) var(--fk-ease),
              opacity var(--fk-duration-slow) var(--fk-ease);
  z-index: 0;
}
.s-service > * { position: relative; z-index: 1; }

@media (hover: hover) {
  .s-service:hover::before { opacity: 1; transform: translateY(0); }
  .s-service:hover { --fk-text: var(--fk-areia); --fk-text-muted: rgba(255,246,242,.78); --fk-text-subtle: rgba(255,246,242,.6); }
  .s-service:hover .s-service__n { color: rgba(255,246,242,.7); }
  .s-service:hover .s-service__t { transform: translateX(var(--fk-space-4)); }
  .s-service:hover .s-service__arrow { color: var(--fk-areia); border-color: rgba(255,246,242,.5); transform: none; opacity: 1; }
  .s-service:hover .s-service__tags li { border-color: rgba(255,246,242,.4); color: rgba(255,246,242,.9); }
}

.s-service__n {
  font-family: var(--fk-font-mono);
  font-size: var(--fk-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fk-text-subtle);
  transition: color var(--fk-duration-normal) var(--fk-ease);
}
.s-service__t {
  font-family: var(--fk-font-brand);
  font-size: var(--s-h3);
  font-weight: var(--fk-weight-semibold);
  letter-spacing: var(--fk-tracking-title);
  line-height: 1.06;
  color: var(--fk-text);
  transition: transform var(--fk-duration-slow) var(--fk-ease);
}
.s-service__d {
  font-size: var(--fk-text-sm);
  line-height: var(--fk-leading-relaxed);
  color: var(--fk-text-muted);
  max-width: 54ch;
}
.s-service__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fk-space-3);
  margin-top: var(--fk-space-5);
}
.s-service__tags li {
  font-family: var(--fk-font-mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: var(--s-rule) solid var(--fk-border-strong);
  border-radius: var(--fk-radius-full);
  color: var(--fk-text-muted);
  transition: border-color var(--fk-duration-normal) var(--fk-ease),
              color var(--fk-duration-normal) var(--fk-ease);
}
.s-service__arrow {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: var(--s-rule) solid var(--fk-border-strong);
  border-radius: var(--fk-radius-full);
  color: var(--fk-text-muted);
  flex: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: all var(--fk-duration-normal) var(--fk-ease);
}
.s-service__arrow svg { width: 16px; height: 16px; }
@media (max-width: 899px) { .s-service__arrow { display: none; } }

/* -------------------------------------------------------------------------
   10. PROCESSO — scroll horizontal fixado
   ------------------------------------------------------------------------- */
.s-process { position: relative; overflow: hidden; }
.s-process__viewport {
  height: 100svh;
  display: flex;
  flex-direction: column;
}
.s-process__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fk-space-8);
  padding: calc(var(--s-nav-h) + var(--fk-space-9)) var(--s-gutter) var(--fk-space-7);
  max-width: var(--s-max);
  margin-inline: auto;
  width: 100%;
}

/* Marcador da etapa da vez. Só na versão horizontal: em coluna, a etapa
   está na tela, não precisa de placar. */
.s-process__meter {
  display: none;
  align-items: baseline;
  gap: var(--fk-space-5);
  flex: none;
  padding-bottom: var(--fk-space-2);
  font-family: var(--fk-font-mono);
  font-size: var(--fk-text-xs);
  font-weight: var(--fk-weight-semibold);
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--fk-text-muted);
  white-space: nowrap;
}
@media (min-width: 900px) { .s-process__meter { display: inline-flex; } }
.s-process__meter-n {
  font-family: var(--fk-font-brand);
  font-size: var(--s-h3);
  font-weight: var(--fk-weight-semibold);
  letter-spacing: var(--fk-tracking-title);
  line-height: 1;
  color: var(--fk-accent);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: right;
}
.s-process__meter-sep {
  width: 28px;
  height: var(--s-rule);
  background: var(--fk-border-strong);
  align-self: center;
}
.s-process__rail {
  position: relative;
  height: var(--s-rule);
  background: var(--fk-border);
  max-width: var(--s-max);
  margin: 0 auto;
  width: calc(100% - 2 * var(--s-gutter));
}
.s-process__rail i {
  position: absolute;
  inset: -1px auto -1px 0;
  width: 100%;
  background: var(--fk-terracota);
  transform: scaleX(0);
  transform-origin: left center;
}

/* O palco guarda a trilha. Nas bordas da tela as etapas se dissolvem em vez
   de serem cortadas a seco; a folga de 4% fica dentro da calha lateral, então
   nenhuma letra da primeira etapa nasce esmaecida. */
.s-process__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .s-process__stage {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
}
.s-process__track {
  display: flex;
  flex: 1;
  align-items: stretch;
  /* Carrossel em perspectiva: cada etapa gira de leve para fora conforme se
     afasta do centro e recua no fundo (site.js). */
  perspective: 1600px;
  will-change: transform;
}
.s-step {
  flex: none;
  /* Cresce com a tela. Travada em 620px numa ultrawide caberiam cinco etapas
     de uma vez e a rolagem horizontal não teria para onde ir. */
  width: min(86vw, max(600px, 33vw));
  display: grid;
  /* Texto em cima, paisagem embaixo: o conteúdo encosta no topo do palco e
     a montanha ocupa o terço de baixo sem passar por trás das letras. */
  align-content: start;
  gap: var(--fk-space-6);
  padding: clamp(2rem, 5vh, 3.5rem) var(--s-gutter) var(--fk-space-9);
  border-left: var(--s-rule) solid var(--fk-border);
}
.s-step:first-child { border-left: 0; padding-left: var(--s-gutter); }

/* Durante a rolagem horizontal, a etapa da vez vem à frente e as vizinhas
   recuam. Sem desfoque: quem quiser adiantar a leitura ainda lê. A etapa
   ativa é decidida pela posição do escalador na montanha (site.js) — a
   primeira já nasce acesa e a última acende no cume, nunca antes. Só com
   JS: sem ele todas as etapas precisam nascer inteiras. */
@media (min-width: 900px) {
  html.s-anim .s-step {
    opacity: .42;
    transition: opacity 650ms var(--fk-ease);
  }
  html.s-anim .s-step--on { opacity: 1; }
}

.s-step__n {
  font-family: var(--fk-font-mono);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-variant-numeric: tabular-nums;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--fk-border-strong);
  transition: color var(--fk-duration-slow) var(--fk-ease),
              -webkit-text-stroke-color var(--fk-duration-slow) var(--fk-ease),
              transform var(--fk-duration-slow) var(--fk-ease-spring);
}
.s-step--on .s-step__n {
  color: var(--fk-accent);
  -webkit-text-stroke-color: transparent;
  transform: translateX(var(--fk-space-3));
}
.s-step__t {
  font-family: var(--fk-font-brand);
  font-size: var(--s-h3);
  font-weight: var(--fk-weight-semibold);
  letter-spacing: var(--fk-tracking-title);
  line-height: 1.06;
}
.s-step__d {
  font-size: var(--fk-text-md);
  line-height: var(--fk-leading-relaxed);
  color: var(--fk-text-muted);
  max-width: 44ch;
}
.s-step__list {
  display: grid;
  gap: var(--fk-space-3);
  margin-top: var(--fk-space-3);
}
.s-step__list li {
  display: flex;
  gap: var(--fk-space-4);
  align-items: baseline;
  font-size: var(--fk-text-sm);
  color: var(--fk-text-muted);
  padding-bottom: var(--fk-space-3);
  border-bottom: var(--s-rule) solid var(--fk-border);
}
.s-step__list li::before {
  content: "";
  width: 5px; height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--fk-accent);
  transform: translateY(-3px);
}

/* A subida ---------------------------------------------------------------
   Perfil de montanha atrás das etapas: desenha-se da esquerda para a direita
   com a rolagem, um acampamento acende por etapa e o cume no fim. É a
   montanha da marca ("uma montanha que cresce") posta para trabalhar.

   O SVG estica sem preservar proporção — é uma faixa, e a faixa muda de
   formato com a tela. Por isso NÃO se usa vector-effect aqui: o traço
   tracejado que desenha a linha é medido em unidades do desenho, e o JS
   ajusta a espessura para valer ~2px em qualquer tela. Pelo mesmo motivo os
   pinos ficam em .s-ridge__pin, que o JS reescala para pixels — senão os
   círculos virariam elipses em tela larga. */
.s-process__ridge {
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  pointer-events: none;
  z-index: 0;
}
.s-process__ridge svg { width: 100%; height: 100%; overflow: visible; }

#ridgeFill stop:nth-child(1)     { stop-color: var(--fk-accent); stop-opacity: .34; }
#ridgeFill stop:nth-child(2)     { stop-color: var(--fk-accent); stop-opacity: .07; }
#ridgeFill stop:nth-child(3)     { stop-color: var(--fk-accent); stop-opacity: 0; }
#ridgeFillBack stop:nth-child(1) { stop-color: var(--fk-text);   stop-opacity: .075; }
#ridgeFillBack stop:nth-child(2) { stop-color: var(--fk-text);   stop-opacity: 0; }
#ridgeGlowGrad stop:nth-child(1) { stop-color: var(--fk-accent); stop-opacity: .42; }
#ridgeGlowGrad stop:nth-child(2) { stop-color: var(--fk-accent); stop-opacity: 0; }

.s-ridge__glow { fill: url(#ridgeGlowGrad); opacity: 0; }
.s-ridge__back { fill: url(#ridgeFillBack); }
.s-ridge__area { fill: url(#ridgeFill); }
.s-ridge__line,
.s-ridge__line--soft {
  fill: none;
  stroke: var(--fk-accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.s-ridge__line--soft { stroke-width: 14; opacity: .16; }

/* Pinos: desenhados em pixels (ver acima). Os círculos são centrados em 0,0
   do próprio grupo, então a escala CSS de halo e pulso é em torno deles. */
.s-ridge__pin circle { transform-box: fill-box; transform-origin: center; }
/* Apagado, o acampamento é só um anel discreto — o que vem pela frente. O
   rótulo aparece quando o escalador chega. */
.s-ridge__label {
  font-family: var(--fk-font-mono);
  font-size: 10px;
  font-weight: var(--fk-weight-semibold);
  letter-spacing: .1em;
  fill: var(--fk-accent);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 500ms var(--fk-ease), transform 500ms var(--fk-ease);
}
.s-ridge__halo {
  fill: var(--fk-accent);
  opacity: 0;
  transform: scale(.3);
  transition: opacity 600ms var(--fk-ease), transform 700ms var(--fk-ease-spring);
}
.s-ridge__dot {
  fill: var(--s-deep);
  stroke: var(--fk-border-strong);
  stroke-width: 1.5;
  transition: fill 450ms var(--fk-ease), stroke 450ms var(--fk-ease);
}
.s-ridge__camp--on .s-ridge__halo  { opacity: .2; transform: scale(1); }
.s-ridge__camp--on .s-ridge__dot   { fill: var(--fk-accent); stroke: var(--fk-accent); }
.s-ridge__camp--on .s-ridge__label { opacity: 1; transform: none; }
.s-ridge__camp--summit.s-ridge__camp--on .s-ridge__halo { opacity: .28; }

.s-ridge__pulse {
  fill: var(--fk-accent);
  opacity: .3;
  animation: s-ridge-pulse 2.4s var(--fk-ease-out) infinite;
}
.s-ridge__core { fill: var(--fk-accent); stroke: var(--s-deep); stroke-width: 2; }
/* Sem JS ninguém move o escalador: a serra fica inteira, ele sai de cena. */
html:not(.s-anim) .s-ridge__climber { display: none; }
@keyframes s-ridge-pulse {
  0%   { transform: scale(.3);  opacity: .42; }
  100% { transform: scale(1.4); opacity: 0; }
}

.s-process__viewport > * { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   11. BASTIDORES — grafismos 3D
   ------------------------------------------------------------------------- */
.s-tech { position: relative; overflow: hidden; }
.s-tech__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 940px) {
  .s-tech__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.s-tech__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 60svh;
  border-radius: var(--fk-radius-2xl);
  overflow: hidden;
  background: var(--s-stage-bg);
  border: var(--s-rule) solid var(--fk-border);
}
.s-tech__stage canvas { display: block; width: 100% !important; height: 100% !important; }
.s-tech__hint {
  position: absolute;
  inset: auto var(--fk-space-6) var(--fk-space-6) auto;
  font-family: var(--fk-font-mono);
  font-size: 10px;
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--fk-text-subtle);
  pointer-events: none;
}

.s-code-note {
  display: inline-flex;
  align-items: center;
  gap: var(--fk-space-4);
  padding: var(--fk-space-4) var(--fk-space-6);
  border: var(--s-rule) solid var(--fk-border-strong);
  border-radius: var(--fk-radius-full);
  font-family: var(--fk-font-mono);
  font-size: var(--fk-text-sm);
  color: var(--fk-text-muted);
  margin-top: var(--fk-space-8);
}
.s-code-note b { color: var(--fk-accent); font-weight: var(--fk-weight-semibold); }

/* A grade é desenhada como fundo aparecendo por trás de células opacas — é o
   que faz as linhas de 1px. Consequência: fileira incompleta não fica
   "vazia", fica um retângulo do fundo à mostra. Com auto-fill o número de
   colunas variava com a largura e seis itens caíam em 5 + 1, abrindo esse
   vão. Aqui é flex: a base em porcentagem fixa a contagem por fileira em
   divisores de seis (3 no desktop, 2 no celular) e o flex-grow estica a
   última fileira, então nunca sobra vão — inclusive se um item for
   acrescentado ou removido depois. */
.s-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-rule);
  background: var(--fk-border);
  border: var(--s-rule) solid var(--fk-border);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.s-stack__i {
  flex: 1 1 max(170px, 30%);
  min-width: 0;
  background: var(--s-deep);
  padding: var(--fk-space-6);
  display: grid;
  gap: 4px;
  transition: background-color var(--fk-duration-normal) var(--fk-ease);
}
.s-stack__i:hover { background: var(--fk-surface); }
.s-stack__i b {
  font-family: var(--fk-font-brand);
  font-size: var(--fk-text-md);
  font-weight: var(--fk-weight-semibold);
  letter-spacing: var(--fk-tracking-title);
  color: var(--fk-text);
}
.s-stack__i span {
  font-family: var(--fk-font-mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fk-text-subtle);
}

/* -------------------------------------------------------------------------
   12. TRABALHOS
   ------------------------------------------------------------------------- */
.s-works {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  perspective: 1400px;   /* os cartões inclinam conforme atravessam a tela */
}
/* Seis colunas com peças de 4 e de 2: a fileira só fecha em pares
   largo + estreito. Ao acrescentar trabalho, acrescente aos pares — senão
   sobra meia fileira vazia no fim da grade. */
@media (min-width: 860px) {
  .s-works { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .s-work--wide { grid-column: span 4; }
  .s-work--nar  { grid-column: span 2; }
  /* Mantido o par largo + estreito, contagem ímpar significa um trabalho
     sozinho na última fileira — que então a ocupa inteira. */
  .s-work:last-child:nth-child(odd) { grid-column: span 6; }
}

.s-work {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--fk-space-5);
  text-decoration: none;
  color: inherit;
}
.s-work__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--fk-radius-lg);
  background: var(--fk-surface-inset);
  aspect-ratio: 16 / 10;
  clip-path: inset(0 0 0 0);
}
.s-work--nar .s-work__frame { aspect-ratio: 4 / 5; }
/* O <picture> é só o invólucro que oferece o WebP: `contents` tira ele do
   layout para a imagem seguir sendo filha direta do quadro, como antes. */
.s-work__frame picture { display: contents; }
.s-work__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Gradação quente: as fotos de referência são frias; a marca é quente. */
  filter: var(--s-photo);
  transform: scale(1.06);
  transition: transform 900ms var(--fk-ease), filter 700ms var(--fk-ease);
  will-change: transform;
}
.s-work__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fk-gradient-terracota);
  mix-blend-mode: soft-light;
  opacity: .85;
  transition: opacity 700ms var(--fk-ease);
}
/* O zoom de hover fica no JS: a paralaxe escreve transform em linha e
   anularia esta regra. Sem JS, o CSS assume de volta. */
.s-work:hover .s-work__frame img { filter: saturate(.9) contrast(1.04) brightness(1); }
html:not(.s-anim) .s-work:hover .s-work__frame img { transform: scale(1); }
.s-work:hover .s-work__frame::after { opacity: .45; }

.s-work__tag {
  position: absolute;
  z-index: 2;
  inset: var(--fk-space-5) auto auto var(--fk-space-5);
  padding: 4px 12px;
  border-radius: var(--fk-radius-full);
  background: color-mix(in srgb, #0A0C0D 62%, transparent);
  backdrop-filter: blur(10px);
  font-family: var(--fk-font-mono);
  font-size: 10px;
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--fk-areia);
}
.s-work__meta { display: grid; gap: var(--fk-space-2); }
.s-work__t {
  font-family: var(--fk-font-brand);
  font-size: var(--fk-text-h5);
  font-weight: var(--fk-weight-semibold);
  letter-spacing: var(--fk-tracking-title);
  line-height: 1.15;
  transition: color var(--fk-duration-fast) var(--fk-ease);
}
.s-work:hover .s-work__t { color: var(--fk-accent); }
.s-work__k {
  font-size: var(--fk-text-sm);
  color: var(--fk-text-muted);
}
.s-work__num {
  font-family: var(--fk-font-mono);
  font-size: var(--fk-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fk-accent);
}

/* -------------------------------------------------------------------------
   13. NÚMEROS
   ------------------------------------------------------------------------- */
.s-figures {
  display: grid;
  gap: var(--s-rule);
  background: var(--fk-border);
  border-block: var(--s-rule) solid var(--fk-border);
}
@media (min-width: 700px) {
  .s-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Mesma guarda anti-vão dos princípios: número ímpar de números não deixa
     meia fileira de fundo aparecendo. */
  .s-figure:last-child:nth-child(2n + 1) { grid-column: span 2; }
}
@media (min-width: 1040px) {
  .s-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-figure:last-child:nth-child(4n + 1) { grid-column: span 4; }
  .s-figure:last-child:nth-child(4n + 2) { grid-column: span 3; }
  .s-figure:last-child:nth-child(4n + 3) { grid-column: span 2; }
}

.s-figure {
  position: relative;
  background: var(--s-band-base);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  display: grid;
  gap: var(--fk-space-3);
  overflow: hidden;
  perspective: 700px;   /* o número levanta em 3D ao entrar (site.js) */
  transition: background-color var(--fk-duration-normal) var(--fk-ease);
}
.s-figure:hover { background: var(--s-band-alt); }
/* O mesmo halo que segue o ponteiro nos princípios. */
.s-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(34% 46% at var(--_mx, 50%) var(--_my, 50%),
              color-mix(in srgb, var(--fk-accent) 20%, transparent) 0%, transparent 72%);
  transition: opacity var(--fk-duration-slow) var(--fk-ease);
}
.s-figure:hover::after { opacity: 1; }
.s-figure > * { position: relative; z-index: 1; }
.s-figure__v {
  font-family: var(--fk-font-brand);
  font-size: clamp(2.75rem, 5.4vw, 4.25rem);
  font-weight: var(--fk-weight-bold);
  letter-spacing: var(--fk-tracking-title);
  line-height: .92;
  color: var(--fk-text);
  font-variant-numeric: tabular-nums;
}
.s-figure__v i { font-style: normal; color: var(--fk-accent); }
.s-figure__k {
  font-size: var(--fk-text-sm);
  color: var(--fk-text-muted);
  max-width: 26ch;
}

/* -------------------------------------------------------------------------
   14. FAQ
   ------------------------------------------------------------------------- */
.s-faq { border-top: var(--s-rule) solid var(--fk-border); }
.s-faq__i { border-bottom: var(--s-rule) solid var(--fk-border); }
.s-faq__q {
  display: flex;
  align-items: center;
  gap: var(--fk-space-6);
  width: 100%;
  padding: clamp(1.25rem, 2.6vw, 1.75rem) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--fk-font-brand);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: var(--fk-weight-semibold);
  letter-spacing: var(--fk-tracking-title);
  line-height: 1.2;
  color: var(--fk-text);
  transition: color var(--fk-duration-fast) var(--fk-ease),
              padding-left var(--fk-duration-normal) var(--fk-ease);
}
.s-faq__q:hover { color: var(--fk-accent); padding-left: var(--fk-space-4); }
.s-faq__q i {
  margin-left: auto;
  flex: none;
  position: relative;
  width: 15px; height: 15px;
}
.s-faq__q i::before,
.s-faq__q i::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: var(--s-rule);
  background: currentColor;
  transition: transform var(--fk-duration-normal) var(--fk-ease);
}
.s-faq__q i::after { transform: rotate(90deg); }
.s-faq__q[aria-expanded="true"] i::after { transform: rotate(0deg); }
.s-faq__a {
  overflow: hidden;
  height: 0;
}
.s-faq__a > div {
  padding-bottom: clamp(1.25rem, 2.6vw, 1.75rem);
  font-size: var(--fk-text-md);
  line-height: var(--fk-leading-relaxed);
  color: var(--fk-text-muted);
  max-width: 62ch;
}

/* -------------------------------------------------------------------------
   15. CONTATO
   ------------------------------------------------------------------------- */
.s-contact { position: relative; overflow: hidden; }
.s-contact__mark {
  position: absolute;
  inset: auto -6% -18% auto;
  width: min(48vw, 560px);
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
.s-contact__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
}
@media (min-width: 940px) {
  .s-contact__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}

.s-contact__title {
  font-family: var(--fk-font-brand);
  font-size: var(--s-display-sm);
  font-weight: var(--fk-weight-bold);
  line-height: .98;
  letter-spacing: var(--fk-tracking-title);
  text-wrap: balance;
}
.s-contact__title em { font-style: normal; color: var(--fk-accent); }
.s-contact__list {
  display: grid;
  gap: var(--fk-space-5);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.s-contact__list a,
.s-contact__list span {
  display: flex;
  align-items: baseline;
  gap: var(--fk-space-5);
  padding-bottom: var(--fk-space-4);
  border-bottom: var(--s-rule) solid var(--fk-border);
  font-size: var(--fk-text-md);
  color: var(--fk-text);
  text-decoration: none;
  transition: border-color var(--fk-duration-fast) var(--fk-ease),
              color var(--fk-duration-fast) var(--fk-ease);
}
.s-contact__list a:hover { color: var(--fk-accent); border-bottom-color: var(--fk-accent); }
.s-contact__list b {
  font-family: var(--fk-font-mono);
  font-size: 10px;
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--fk-text-subtle);
  font-weight: var(--fk-weight-semibold);
  flex: none;
  width: 5.5rem;
}

.s-form {
  display: grid;
  gap: var(--fk-space-6);
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  background: var(--s-panel);
  border: var(--s-rule) solid var(--fk-border);
  border-radius: var(--fk-radius-xl);
  box-shadow: var(--fk-shadow-lg);
}
.s-form__row { display: grid; gap: var(--fk-space-6); }
@media (min-width: 620px) { .s-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s-form .fk-input,
.s-form .fk-textarea,
.s-form .fk-select {
  background: var(--fk-surface-inset);
  border-color: var(--fk-border);
  padding-block: var(--fk-space-5);
}
.s-form .fk-textarea { min-height: 120px; resize: vertical; }
.s-form__note {
  font-size: var(--fk-text-xs);
  color: var(--fk-text-subtle);
}
.s-form__actions { display: grid; gap: var(--fk-space-4); }
@media (min-width: 540px) {
  .s-form__actions { grid-template-columns: minmax(0, 1fr) auto; }
}

.s-form__msg {
  display: none;
  gap: var(--fk-space-4);
  align-items: center;
  padding: var(--fk-space-5) var(--fk-space-6);
  border-radius: var(--fk-radius-md);
  color: var(--fk-text);
  font-size: var(--fk-text-sm);
}
.s-form__msg[data-on="true"] { display: flex; }
.s-form__msg--ok {
  border-left: 3px solid var(--fk-success);
  background: color-mix(in srgb, var(--fk-success) 14%, transparent);
}
.s-form__msg--err {
  border-left: 3px solid var(--fk-danger);
  background: color-mix(in srgb, var(--fk-danger) 14%, transparent);
}

/* Grupo de escolha por chips (orçamento) ---------------------------------- */
.s-chips { display: flex; flex-wrap: wrap; gap: var(--fk-space-3); }
.s-chips input { position: absolute; opacity: 0; pointer-events: none; }
.s-chips label {
  padding: var(--fk-space-3) var(--fk-space-6);
  border: var(--s-rule) solid var(--fk-border-strong);
  border-radius: var(--fk-radius-full);
  font-size: var(--fk-text-sm);
  color: var(--fk-text-muted);
  cursor: pointer;
  transition: all var(--fk-duration-fast) var(--fk-ease);
}
.s-chips label:hover { border-color: var(--fk-accent); color: var(--fk-text); }
.s-chips input:checked + label {
  background: var(--fk-accent);
  border-color: var(--fk-accent);
  color: var(--fk-accent-contrast);
}
.s-chips input:focus-visible + label { box-shadow: var(--fk-focus-ring); }

/* -------------------------------------------------------------------------
   16. RODAPÉ
   ------------------------------------------------------------------------- */
.s-foot {
  --fk-text:          var(--s-deep-text);
  --fk-text-muted:    var(--s-deep-muted);
  --fk-text-subtle:   var(--s-deep-subtle);
  --fk-border:        var(--s-deep-border);
  background: var(--s-deep-2);
  color: var(--fk-text);
  padding-top: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  color-scheme: var(--s-deep-scheme);
}
.s-foot__mark {
  display: block;
  width: 100%;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.s-foot__mark img { width: 100%; height: auto; }
.s-foot__cols {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 760px) { .s-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .s-foot__cols { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } }

.s-foot__col { display: grid; gap: var(--fk-space-5); align-content: start; }
.s-foot__h {
  font-family: var(--fk-font-mono);
  font-size: 10px;
  letter-spacing: var(--fk-tracking-wide);
  text-transform: uppercase;
  color: var(--fk-text-subtle);
}
/* O reset só desliga o marcador em ul[class]; estas listas não têm classe. */
.s-foot__col ul { display: grid; gap: var(--fk-space-3); list-style: none; margin: 0; padding: 0; }
.s-foot__col a {
  font-size: var(--fk-text-sm);
  color: var(--fk-text-muted);
  text-decoration: none;
  transition: color var(--fk-duration-fast) var(--fk-ease);
}
.s-foot__col a:hover { color: var(--fk-accent); }
.s-foot__blurb { font-size: var(--fk-text-sm); color: var(--fk-text-muted); max-width: 34ch; }

.s-foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fk-space-5) var(--fk-space-8);
  padding-block: var(--fk-space-7);
  border-top: var(--s-rule) solid var(--fk-border);
  font-family: var(--fk-font-mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fk-text-subtle);
}
.s-foot__base a { color: inherit; text-decoration: none; }
.s-foot__base a:hover { color: var(--fk-accent); }
.s-foot__base .s-sp { margin-left: auto; }

/* -------------------------------------------------------------------------
   17. BOTÕES — variantes de site sobre o componente do design system
   ------------------------------------------------------------------------- */
.fk-btn { position: relative; overflow: hidden; }
.fk-btn > span { position: relative; z-index: 1; }

.s-btn-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--fk-cacau);
  transform: translateY(101%);
  transition: transform var(--fk-duration-normal) var(--fk-ease);
}
.fk-btn:hover .s-btn-fill { transform: translateY(0); }
.fk-btn--secondary:hover .s-btn-fill { background: var(--fk-accent); }
.fk-btn--secondary:hover { --_fg: var(--fk-areia); --_bd: var(--fk-accent); }

/* -------------------------------------------------------------------------
   18. CURSOR PERSONALIZADO
   ------------------------------------------------------------------------- */
.s-cursor,
.s-cursor__ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}
.s-cursor {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--fk-terracota);
}
.s-cursor__ring {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: var(--s-rule) solid color-mix(in srgb, var(--fk-terracota) 60%, transparent);
  transition: width var(--fk-duration-normal) var(--fk-ease),
              height var(--fk-duration-normal) var(--fk-ease),
              margin var(--fk-duration-normal) var(--fk-ease),
              background-color var(--fk-duration-normal) var(--fk-ease),
              border-color var(--fk-duration-normal) var(--fk-ease);
}
.s-cursor__ring[data-hot="true"] {
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  background: color-mix(in srgb, var(--fk-terracota) 16%, transparent);
  border-color: var(--fk-terracota);
}
/* Alvos grandes (trabalho, serviço, palco 3D) ganham disco cheio e rótulo. */
.s-cursor__ring[data-big="true"] {
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
  background: color-mix(in srgb, var(--fk-terracota) 90%, transparent);
}
/* Rótulo dentro do anel: diz o que o clique faz sem poluir a interface. */
.s-cursor__ring span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--fk-font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fk-areia);
  opacity: 0;
  transition: opacity var(--fk-duration-fast) var(--fk-ease);
}
.s-cursor__ring[data-big="true"] span { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .s-cursor, .s-cursor__ring { display: none; }
}

/* -------------------------------------------------------------------------
   19. GRÃO
   Textura sutil que unifica fotografia, 3D e cor sólida.
   ------------------------------------------------------------------------- */
.s-grain {
  position: fixed;
  inset: -50%;
  z-index: 70;
  pointer-events: none;
  opacity: var(--s-grain);
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: s-grain 7s steps(6) infinite;
}
@keyframes s-grain {
  0%,100% { transform: translate(0, 0); }
  16%  { transform: translate(-3%, -2%); }
  33%  { transform: translate(2%, -4%); }
  50%  { transform: translate(-1%, 3%); }
  66%  { transform: translate(3%, 1%); }
  83%  { transform: translate(-2%, 2%); }
}

/* -------------------------------------------------------------------------
   20. ESTADOS DE ANIMAÇÃO
   As classes de estado inicial só existem quando o JS confirmou que o GSAP
   carregou (html.s-anim). Sem JS ou sem GSAP, a página nasce visível.
   ------------------------------------------------------------------------- */
html.s-anim [data-reveal] { opacity: 0; }
/* 145% e não 105%: a fenda agora tem folga embaixo (ver .s-w) e a linha
   escondida precisa passar dessa folga para não aparecer de raspão. */
html.s-anim .s-line > span { transform: translateY(145%); }
html.s-anim .s-service,
html.s-anim .s-work,
html.s-anim .s-principle,
html.s-anim .s-figure { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.s-anim [data-reveal],
  html.s-anim .s-service,
  html.s-anim .s-work,
  html.s-anim .s-principle,
  html.s-anim .s-figure,
  html.s-anim .s-line > span { opacity: 1; transform: none; }
  html.s-anim .s-step { opacity: 1; }
  .s-manifesto__quote .w { filter: none; transform: none; }
  .s-ticker__track,
  .s-grain,
  .s-scroll-hint__rail::after,
  .s-ridge__pulse,
  .s-dot { animation: none; }
  .s-grain { opacity: .03; }
  html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------------
   21. TELAS LARGAS E ULTRAWIDE

   O padrão trava o conteúdo em 1360px. Numa 21:9 isso vira uma ilha estreita
   no meio de um vazio enorme, e a tipografia — presa no teto do clamp — para
   de crescer justamente onde havia espaço de sobra. Aqui a régua toda sobe
   junto: largura, escala de texto e altura do hero.

   O que NÃO cresce é a medida de leitura. Parágrafo continua em ~46-60ch;
   quem ocupa a largura extra são os títulos, as grades e a paisagem.
   ------------------------------------------------------------------------- */

/* Desktop grande — 1700px para cima (1920 entra aqui). */
@media (min-width: 1700px) {
  :root {
    --s-max: 1560px;
    --s-display: clamp(2.375rem, 6.4vw, 7.25rem);
    --s-display-sm: clamp(2.25rem, 5.4vw, 5.25rem);
    --s-h2: clamp(2rem, 4.6vw, 4rem);
    --s-h3: clamp(1.5rem, 2.8vw, 2.5rem);
    --s-lead: clamp(1.0625rem, 1.4vw, 1.375rem);
    --s-nav-h: 82px;
  }
  .s-manifesto__quote { font-size: clamp(1.75rem, 5.1vw, 5.25rem); }
  .s-figure__v { font-size: clamp(2.75rem, 5.4vw, 5rem); }
  .s-ticker__item { font-size: clamp(1rem, 1.9vw, 1.75rem); }

  /* A interface também precisa crescer. Uma nav de 26px numa tela de 1920
     lê como rodapé, não como navegação. */
  .s-nav__logo { height: 30px; }
  .s-nav__link { font-size: 15px; }
  .s-icon-btn { width: 44px; height: 44px; }
  .s-icon-btn svg { width: 19px; height: 19px; }
  .s-hero__eyebrow { font-size: 13px; }
  .s-sig__k { font-size: 11px; }
}

/* Ultrawide — 2200px para cima (2560 e 3440 entram aqui). */
@media (min-width: 2200px) {
  :root {
    --s-max: 1800px;
    /* 7.75rem e não 8.5rem: com o cartão de ação na coluna da direita, a
       linha "Sites que observam" precisa caber em ~1200px. */
    --s-display: clamp(2.375rem, 6.4vw, 7.75rem);
    --s-display-sm: clamp(2.25rem, 5.4vw, 6rem);
    --s-h2: clamp(2rem, 4.6vw, 4.75rem);
    --s-h3: clamp(1.5rem, 2.8vw, 2.75rem);
    --s-lead: clamp(1.0625rem, 1.4vw, 1.5rem);
    --s-band-y: clamp(4.5rem, 11vh, 11rem);
    --s-nav-h: 88px;
  }
  .s-manifesto__quote { font-size: clamp(1.75rem, 5.1vw, 6.25rem); }
  .s-figure__v { font-size: clamp(2.75rem, 5.4vw, 5.75rem); }
  .s-ticker__item { font-size: clamp(1rem, 1.9vw, 2rem); }

  .s-nav__logo { height: 34px; }
  .s-nav__link { font-size: 16px; padding: var(--fk-space-3) var(--fk-space-5); }
  .s-icon-btn { width: 48px; height: 48px; }
  .s-icon-btn svg { width: 21px; height: 21px; }
  .s-hero__eyebrow { font-size: 14px; }
  .s-sig__k { font-size: 12px; }
  .s-sig__v { font-size: 1.5rem; }
}

/* Super ultrawide — 32:9 e monitores 5K. */
@media (min-width: 2900px) {
  :root {
    --s-max: 2040px;
    --s-display: clamp(2.375rem, 6.4vw, 9.75rem);
    --s-h2: clamp(2rem, 4.6vw, 5.5rem);
    --s-nav-h: 92px;
  }
}

/* Em telas largas, quem ocupa a largura é o H1; o cartão de ação fica no
   canto, que é onde o olho o procura. */
@media (min-width: 1700px) {
  .s-hero__title { max-width: 22ch; }
}

/* Wide e baixa (2560x1080 é o caso clássico): sobra largura e falta altura.
   Cortar a escala do display pelo lado da largura evita que as quatro linhas
   do H1 empurrem o subtítulo e os botões para fora da tela. */
@media (min-aspect-ratio: 2/1) and (max-height: 1200px) {
  :root { --s-display: clamp(2.375rem, 4.6vw, 6.5rem); }
}

/* Qualquer desktop de pouca altura — notebook 1366x768, janela 1920x900.
   Vem por último de propósito: é a restrição mais dura e precisa vencer as
   regras de largura acima. */
@media (min-width: 900px) and (max-height: 960px) {
  :root {
    --s-display: clamp(2.25rem, 5.2vw, 6rem);
    --s-band-y: clamp(3.5rem, 9vh, 6.5rem);
  }
  .s-hero { padding-top: calc(var(--s-nav-h) + clamp(2rem, 5vh, 3.5rem)); }
  .s-hero__sub { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
}

/* Notebook de 768px de altura (1366x768 ainda é o desktop mais comum): o
   hero inteiro — quatro linhas, subtítulo, método, cartão e barra de
   sinais — tem de caber sem cortar a barra. */
@media (min-width: 900px) and (max-height: 800px) {
  :root { --s-display: clamp(2.25rem, 4.7vw, 5rem); }
  .s-hero { padding-top: calc(var(--s-nav-h) + 1.5rem); padding-bottom: 1rem; }
  .s-hero__eyebrow { margin-bottom: 1.25rem; }
  .s-hero__sub { font-size: 1rem; margin-top: 1rem; margin-bottom: 1.25rem; }
  .s-hero__cta { padding: var(--fk-space-5); gap: var(--fk-space-3); }
  .s-hero__foot { padding-top: var(--fk-space-5); }
  .s-hero__method { padding: var(--fk-space-4) var(--fk-space-5) var(--fk-space-5); }
  .s-hero__method-k { margin-bottom: var(--fk-space-4); }
}

/* Full HD (1920x1080): a régua de tela larga sobe a tipografia, mas a altura
   não acompanha. Sem isto a barra de sinais fica abaixo da dobra. */
@media (min-width: 1700px) and (max-height: 1100px) {
  :root { --s-display: clamp(2.375rem, 5.5vw, 6.6rem); }
  .s-hero__eyebrow { margin-bottom: 1.75rem; }
  .s-hero__sub { margin-top: 1.5rem; }
}

/* Processo em tela de pouca altura. A seção é fixada e o palco vale exatamente
   100svh, com overflow escondido: o que não couber é cortado — em 1366x768 era
   a última linha da lista de cada etapa. A etapa encolhe até caber; nada de
   deixar o recorte decidir. */
@media (min-width: 900px) and (max-height: 880px) {
  .s-process__head {
    padding-top: calc(var(--s-nav-h) + var(--fk-space-6));
    padding-bottom: var(--fk-space-6);
  }
  .s-step {
    padding-block: var(--fk-space-6);
    gap: var(--fk-space-5);
  }
  .s-step__n { font-size: clamp(2.5rem, 5.5vw, 4rem); }
  .s-step__d { font-size: var(--fk-text-sm); }
  .s-step__list { margin-top: 0; gap: var(--fk-space-2); }
  .s-step__list li { padding-bottom: var(--fk-space-2); }
  .s-process__meter-n { font-size: var(--fk-text-h4); }
}

/* -------------------------------------------------------------------------
   22. AJUSTES RESPONSIVOS
   ------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .s-process__viewport { height: auto; }
  .s-process__track { flex-direction: column; }
  .s-step { width: 100%; border-left: 0; border-top: var(--s-rule) solid var(--fk-border); }
  .s-step:first-child { border-top: 0; }
  .s-process__ridge { display: none; }
  .s-manifesto__stage { min-height: 0; }
}

/* Telas muito estreitas (360px ainda é comum no Android).
   O piso de 2.375rem do display faz a linha mais longa do H1 passar da
   largura útil, e .s-line corta o excesso para poder mascarar a animação —
   ou seja, a última palavra some. Aqui o piso acompanha a tela. */
@media (max-width: 420px) {
  :root { --s-display: clamp(1.875rem, 8.6vw, 2.5rem); }
}

/* Em coluna única, o respiro entre subtítulo e cartão é o vão da grade; a
   margem do subtítulo (feita para ancorar o método) só somaria altura. */
@media (max-width: 999px) {
  .s-hero__sub { margin-bottom: 0; }
}

@media (max-width: 560px) {
  /* Uma tela só também no celular: o olho fica com um item, o cartão perde a
     frase de apoio e a barra de sinais vira uma linha corrida. */
  .s-hero { padding-top: calc(var(--s-nav-h) + clamp(2rem, 6vh, 4rem)); }
  .s-hero__eyebrow > span:nth-child(n + 3) { display: none; }
  .s-hero__sub { font-size: 15px; }
  .s-hero__cta { padding: var(--fk-space-5); gap: var(--fk-space-3); }
  .s-hero__cta-t { display: none; }
  .s-hero__foot { gap: var(--fk-space-3) var(--fk-space-5); padding-top: var(--fk-space-5); }
  .s-sig__k { display: none; }
  .s-sig__v { font-size: var(--fk-text-sm); }
  .s-scroll-hint { display: none; }
  .s-contact__list b { width: 4.5rem; }
}

/* -------------------------------------------------------------------------
   23. BOTÃO FLUTUANTE DO WHATSAPP
   Herdeiro do antigo CTA da barra. Fica abaixo do menu móvel (z-index 79)
   para não aparecer por cima dele, e se recolhe em dois momentos: sobre o
   hero, onde o cartão de ação já convida, e sobre o contato, onde o
   formulário já está aberto — no celular ele cobriria o próprio formulário.
   ------------------------------------------------------------------------- */
.s-whats {
  position: fixed;
  right: clamp(1rem, 2.4vw, 1.75rem);
  bottom: clamp(1rem, 2.4vw, 1.75rem);
  z-index: 78;
  /* A caixa do link é o próprio círculo: a etiqueta é posicionada fora do
     fluxo (ver `.s-whats__label`), senão o link cobriria um retângulo vazio
     à esquerda do botão e engoliria cliques do conteúdo da página. */
  display: block;
  border-radius: 50%;
  text-decoration: none;
  /* Em repouso ele não existe nem para o mouse nem para o teclado:
     `visibility` tira do Tab e do leitor de tela, e só volta depois da
     transição — daí o atraso no `visibility` ao esconder e 0s ao mostrar. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.92);
  transition: opacity var(--fk-duration-slow) var(--fk-ease),
              transform var(--fk-duration-slow) var(--fk-ease),
              visibility 0s linear var(--fk-duration-slow);
}
.s-whats[data-on="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--fk-duration-slow) var(--fk-ease),
              transform var(--fk-duration-slow) var(--fk-ease),
              visibility 0s;
}

/* Com o menu aberto (ou a cortina de abertura no ar) ele sai da frente.
   `.s-locked` já é ligada nos dois casos, então não precisa de JS próprio. */
body.s-locked .s-whats {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.92);
}

.s-whats__ico {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  /* Neutro e invertido: no tema claro o círculo é grafite com o ícone areia,
     no escuro troca de lado. `--fk-text`/`--fk-text-inverse` já viram sozinhos
     com o tema, e o botão fica fora de `.s-band--deep`, `.s-foot` e
     `.s-ticker` — os três trechos que redefinem esses tokens localmente. */
  background: var(--fk-text);
  color: var(--fk-text-inverse);
  box-shadow: 0 10px 30px rgb(0 0 0 / 28%);
  transition: transform var(--fk-duration-normal) var(--fk-ease),
              box-shadow var(--fk-duration-normal) var(--fk-ease);
}
.s-whats__ico svg { width: 1.75rem; height: 1.75rem; display: block; }
.s-whats:hover .s-whats__ico {
  transform: scale(1.06);
  box-shadow: 0 14px 38px rgb(0 0 0 / 34%);
}
.s-whats:focus-visible { outline: none; }
.s-whats:focus-visible .s-whats__ico { box-shadow: var(--fk-focus-ring); }

/* A etiqueta é um luxo de ponteiro fino: no toque não há hover que a revele,
   e o ícone verde já diz do que se trata. Fora do fluxo e sem receber
   ponteiro — quem é clicável é só o círculo. Some pela opacidade apenas:
   sem transform, ela não briga com a centralização vertical nem precisa de
   exceção em `prefers-reduced-motion`. */
.s-whats__label {
  display: none;
  position: absolute;
  right: calc(100% + var(--fk-space-4));
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  padding: var(--fk-space-3) var(--fk-space-5);
  border-radius: var(--fk-radius-pill, 999px);
  background: var(--s-panel);
  border: var(--s-rule) solid var(--fk-border);
  color: var(--fk-text);
  font-size: var(--fk-text-sm);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--fk-shadow-lg);
  opacity: 0;
  transition: opacity var(--fk-duration-normal) var(--fk-ease);
}
@media (min-width: 720px) and (hover: hover) and (pointer: fine) {
  .s-whats__label { display: block; }
}
.s-whats:hover .s-whats__label,
.s-whats:focus-visible .s-whats__label { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .s-whats,
  .s-whats:hover .s-whats__ico { transform: none; }
}

/* -------------------------------------------------------------------------
   24. IMPRESSÃO — o site não é peça impressa; degrada para documento limpo.
   ------------------------------------------------------------------------- */
@media print {
  .s-boot, .s-nav, .s-drawer, .s-progress, .s-grain,
  .s-cursor, .s-cursor__ring, .s-canvas, .s-tech__stage,
  .s-ticker, .s-hero__veil, .s-whats { display: none !important; }
  .s-band, .s-band--deep, .s-foot { background: #fff !important; color: #000 !important; padding-block: 12mm !important; }
  .s-process__viewport, .s-process__track { height: auto !important; display: block !important; transform: none !important; }
}