/* ==========================================================================
   Lost Packet Web — Estilos base + Header
   Depende de tokens.css (carregado antes). Mobile-first.
   ========================================================================== */

/* — Fontes locais (vendorizadas; sem CDN de terceiro — padrão LP) --------- */
@font-face {
  font-family: "Bungee";
  src: url("../fonts/bungee-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat.woff2") format("woff2");
  /* Arquivo variável: um só woff2 cobre toda a faixa de peso (100–900). */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* — Reset mínimo --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100svh;
  line-height: 1.5;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--brand-navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

/* — Scroll snap por seção (a assinatura LP) ------------------------------- */
/* Ligado por classe (html.snap) via JS, para podermos desligar em páginas
   longas de conteúdo. Cada seção principal ocupa a tela e "prende" no rolar. */
html { scroll-behavior: smooth; }
/* proximity (não mandatory): "imanta" cada seção ao chegar perto, mas NÃO força
   parar no meio — essencial p/ a timeline de processos que "prende" e rola na
   horizontal (mandatory pularia o pin inteiro). */
html.snap { scroll-snap-type: y proximity; }
.snap-section {
  min-height: 100svh;             /* svh resolve a barra de endereço do mobile */
  scroll-snap-align: start;
}

/* — Container central ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* — Pular para o conteúdo (acessibilidade) ------------------------------- */
.skip-link {
  position: fixed;
  top: -120px;
  left: 16px;
  z-index: 200;
  background: var(--brand-lime);
  color: var(--brand-navy);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: top var(--t);
}
.skip-link:focus { top: 16px; }

/* ==========================================================================
   HEADER
   Desktop: transparente sobre o hero azul; vira navy sólido ao rolar.
   Mobile:  navy sólido sempre (contraste do hambúrguer/logo).
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h-mob);            /* base = mobile (sólido) */
  /* deslocamento vertical da borda inclinada (-1.9°): tan(1.9°) ≈ .0332; como
     a faixa ocupa 100vw, 3.32vw resulta exatamente nesse ângulo. */
  --nav-tilt: 3.32vw;
  /* altura FIXA (não muda no scroll): logo e links ficam parados ao rolar */
}
/* Faixa navy com a base inclinada -1.9° (lado direito mais baixo), como no
   design. Fica num ::before para logo/menu seguirem RETOS; a faixa se estende
   para baixo (não corta a logo à esquerda) e a diagonal aparece abaixo do
   conteúdo. Usa drop-shadow (não box-shadow) p/ a sombra acompanhar o recorte. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  /* Transborda o header nos DOIS lados (direita 0,15× / esquerda 1,15× o tilt) — o
     mínimo p/ a base inclinada ficar sobre o hero (sem o gap azul), sem faixa alta. */
  height: calc(100% + 1.15 * var(--nav-tilt));
  background: var(--brand-navy);
  filter: drop-shadow(0 6px 12px rgba(4, 3, 14, .42));
  z-index: -1;
  /* A faixa é REVELADA por uma varredura da ESQUERDA→DIREITA ao aparecer (rolar /
     menu aberto) e escondida da DIREITA→ESQUERDA ao sumir. Anima o clip-path do
     estado "colapsado" (largura 0 na esquerda) até a forma inclinada completa —
     a borda que varre é vertical e a base já nasce na inclinação final (como no
     Figma). Inclinação para CIMA: mais alta na ESQUERDA (logo), subindo p/ a direita. */
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path .5s cubic-bezier(.22, .61, .36, 1);
}
.site-header.is-scrolled::before,
body.nav-open .site-header::before {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--nav-tilt)), 0 100%);
}

.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

/* Logo — a arte (LOST[WEB]PACKET) já traz a sombra pixelada no próprio PNG,
   por isso funciona tanto sobre o azul quanto sobre o navy sem retoque. */
.header__logo { display: inline-flex; align-items: center; }
.header__logo img {
  height: 46px;   /* mobile: logo um pouco maior; sem resize no scroll */
  width: auto;
}

/* — Navegação (base mobile: painel que desce; vira linha no desktop) ----- */
.header__nav {
  display: flex;
  align-items: center;
}
.header__menu {
  display: flex;
  align-items: center;
}
.header__menu a {
  display: inline-block;
  font-weight: 300;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  /* branco puro maximiza o contraste sobre o azul royal do hero (~4.1:1, o
     teto sem alterar a cor do design; ao rolar, sobre o navy, fica AA pleno) */
  color: var(--white);
  /* sublinhado do hover pré-declarado transparente p/ animar sem "pulo" */
  text-decoration: underline 3px transparent;
  text-underline-offset: 8px;
  transition: text-decoration-color var(--t-fast);
}
/* ativo e hover = Montserrat bold + indicador verde-limão embaixo;
   inativos ficam finos (300). */
.header__menu a:hover,
.header__menu a:focus-visible,
.header__menu a.is-active {
  font-weight: 700;
  text-decoration-color: var(--brand-lime);
}

/* Divisor "|" entre os links e o botão (só no desktop). */
.header__divider {
  width: 2px;
  height: 24px;
  /* espaçamento vem do gap do .header__nav; sem margem extra aqui */
  background: var(--line);
  border-radius: 2px;
}

/* Botão "Entre em contato" — navy com texto branco, cantos médios. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: var(--radius);
  transition: transform var(--t-fast), filter var(--t-fast);
}
.btn--contato {
  background: var(--brand-navy);
  color: var(--white);
  font-size: .8rem;
  padding: .8rem 1.35rem;
  /* borda sutil dá definição ao botão quando o header está transparente. */
  border: 1px solid rgba(255, 255, 255, .12);
}
.btn--contato:hover { transform: translateY(-2px); filter: brightness(1.35); }
.btn--contato:active { transform: translateY(0); }

/* — Hambúrguer (mobile) -------------------------------------------------- */
.header__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;               /* alvo de toque ≥ 44px (acessibilidade) */
  height: 44px;
}
.header__toggle-bar {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}
/* Vira "X" quando aberto. */
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* — Painel mobile: nav desce como camada abaixo do header ---------------- */
.header__nav {
  position: fixed;
  top: var(--header-h-mob);
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 6px var(--gutter) 22px;
  background: var(--brand-navy);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-header);
  transform: translateY(-135%);   /* escondido acima da viewport */
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t), opacity var(--t);
}
.header__nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
/* trava o scroll do fundo enquanto o painel mobile está aberto */
body.nav-open { overflow: hidden; }
.header__menu { flex-direction: column; align-items: stretch; width: 100%; }
.header__menu a {
  padding: 15px 4px;
  font-size: 1rem;
  border-bottom: 1px solid var(--line);
}
.header__nav .header__divider { display: none; }
.header__nav .btn--contato { margin-top: 18px; width: 100%; padding: 15px; }

/* ==========================================================================
   DESKTOP (≥ 992px): header transparente no topo, nav em linha à direita
   (breakpoint alto p/ o menu nunca espremer/quebrar; abaixo disso = hambúrguer)
   ========================================================================== */
@media (min-width: 992px) {
  .site-header {
    height: var(--header-h);
    /* inclinação MAIS SUAVE no desktop (~1.15°): o lado esquerdo (logo) fica
       menos alto. Satura cedo em telas grandes p/ a cunha não crescer demais. */
    --nav-tilt: clamp(10px, 2vw, 36px);
  }
  /* transparente↔sólido do header agora vale p/ todas as larguras (ver base).
     Altura e logo NÃO mudam no scroll (nada de encolher). */
  .header__logo img { height: 66px; }   /* logo maior no desktop */
  /* desce os elementos e dá respiro do topo da página (padding-top empurra o
     bloco centralizado p/ baixo, meia medida por causa do centramento). */
  .header__inner { padding-top: 26px; }

  .header__toggle { display: none; }

  /* nav volta ao fluxo, em linha e AGRUPADO à direita: gaps enxutos para o
     conjunto menu+divisor+botão ficar coeso, deixando o vão à esquerda. */
  .header__nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: clamp(12px, 1.3vw, 20px);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .header__menu { flex-direction: row; width: auto; gap: clamp(14px, 1.5vw, 26px); }
  .header__menu a {
    padding: 0;
    border: 0;
    font-size: .9rem;
    white-space: nowrap;         /* link nunca quebra no meio (ex.: "Processos de criação") */
    /* Reserva a largura do BOLD (700) desde já: o link mede sempre o mesmo,
       então virar bold no hover/ativo não empurra os vizinhos (sem reflow).
       O texto-fantasma vai numa coluna abaixo, com altura 0. */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }
  .header__menu a::after {
    content: attr(data-text);
    font-weight: 700;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }
  .header__nav .header__divider { display: block; }
  /* botão mais achatado no desktop, como no design (altura ~30px) */
  .header__nav .btn--contato { margin: 0; width: auto; padding: .46rem 1.15rem; }
}

/* ==========================================================================
   PLACEHOLDER — apenas contexto para validar o header (não é a hero final)
   ========================================================================== */
/* ==========================================================================
   HERO
   Composição em camadas: eco "ESTILO" (fundo) → foto → título/stats/pílula.
   Mobile-first: bloco vertical (título topo, foto meio, pílula base).
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  /* azul royal no topo escurecendo para o navy embaixo, como no design */
  background: linear-gradient(180deg,
    var(--brand-blue) 0%, var(--brand-blue) 48%, #2b3784 76%, var(--brand-navy) 100%);
  container-type: inline-size;   /* elementos medidos em cqw do hero */
}

/* — Eco "ESTILO": contorno repetido, decorativo, ecoando atrás da foto ----- */
.hero__eco {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;            /* mobile: eco CENTRALIZADO (desktop sobrescreve) */
  gap: .3cqw;
  pointer-events: none;
  overflow: hidden;
}
.hero__eco span {
  /* estado de repouso = só o deslocamento (stagger) da linha */
  transform: translateX(var(--stag, 0%));
  font-family: var(--font-display);
  font-size: 26cqw;
  line-height: .9;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .62);
  white-space: nowrap;
}
/* Linhas DESALINHADAS entre si (o estilo "eco") em TODAS as larguras, via --stag
   (usado no transform de repouso e como destino das animações de entrada/saída). */
.hero__eco span:nth-child(1) { --stag: -8%; }
.hero__eco span:nth-child(2) { --stag: 4%; }
.hero__eco span:nth-child(3) { --stag: -5%; }
.hero__eco span:nth-child(4) { --stag: 6%; display: none; }  /* 4ª só no desktop */

/* Troca de slide: ímpares entram/saem pela ESQUERDA, pares pela DIREITA.
   O destino é o próprio --stag, então o desalinhamento é preservado. */
@keyframes eco-in-left   { from { transform: translateX(-130%); opacity: 0 } to { transform: translateX(var(--stag)); opacity: 1 } }
@keyframes eco-in-right  { from { transform: translateX(130%);  opacity: 0 } to { transform: translateX(var(--stag)); opacity: 1 } }
@keyframes eco-out-left  { from { transform: translateX(var(--stag)); opacity: 1 } to { transform: translateX(-130%); opacity: 0 } }
@keyframes eco-out-right { from { transform: translateX(var(--stag)); opacity: 1 } to { transform: translateX(130%);  opacity: 0 } }
.hero__eco.is-entering span:nth-child(odd)  { animation: eco-in-left  .55s cubic-bezier(.2,.7,.2,1) both; }
.hero__eco.is-entering span:nth-child(even) { animation: eco-in-right .55s cubic-bezier(.2,.7,.2,1) both; }
.hero__eco.is-leaving  span:nth-child(odd)  { animation: eco-out-left  .35s ease both; }
.hero__eco.is-leaving  span:nth-child(even) { animation: eco-out-right .35s ease both; }

/* — Foto + pílula = uma unidade (pílula sempre sobre os antebraços) -------- */
.hero__figure {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 6%;                    /* FLUTUA: não cola na base da seção */
  transform: translateX(-50%);
  /* mobile: unidade = pílula ≈ 81vw (design). O 64svh limita a foto em telas
     BAIXAS (celular na horizontal) p/ a cabeça não cortar; no retrato normal a
     largura (82vw) é quem manda e nada muda. */
  width: min(82vw, 440px, 64svh);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* A foto é mais ESTREITA que a pílula (nunca ultrapassa as laterais dela) e
   fica ATRÁS — dá a impressão de que a pessoa sai de trás da pílula. */
.hero__photo {
  width: 93cqw;                  /* medido no PDF do design: foto = 93% da pílula */
  height: auto;
}
/* Pílula colada na foto: largura, fonte e recuo TODOS em cqw DA FOTO → a
   relação é idêntica em qualquer tela/zoom; a fonte escala junto, então o
   texto nunca corta. Sem overrides por breakpoint (a unidade é fixa). */
/* A pílula é o elemento mais LARGO da unidade e fica POR CIMA da foto: a base
   da foto passa atrás dela, "saindo" de trás. Tudo em cqw da unidade → a
   relação foto×pílula é fixa em qualquer tela ou zoom. */
.hero__pill {
  position: relative;
  z-index: 2;                    /* acima da foto */
  width: 100%;                   /* pílula = 100%; foto = 93% → só 7% maior */
  margin-top: -3.4cqw;           /* sobrepõe a base da foto (antebraços) */
  background: var(--brand-lime);
  color: var(--brand-navy);
  font-weight: 700;
  /* texto maior, mas o padding em em foi reduzido p/ a pílula manter a MESMA
     altura (a largura já é fixa em 100%) */
  font-size: 3.95cqw;
  text-transform: uppercase;
  letter-spacing: .01em;
  padding: .6em 0;               /* vertical só; o letreiro rola de borda a borda */
  border-radius: var(--radius-sm);
  overflow: hidden;              /* clipa o trilho do letreiro */
}
/* Letreiro: trilho com 2 cópias; translateX(-50%) = 1 cópia → loop contínuo. */
.hero__pill-track {
  display: inline-flex;
  white-space: nowrap;
  animation: pill-marquee 14s linear infinite;
  will-change: transform;
}
.hero__pill-seg { padding-right: .6em; }   /* respiro entre as cópias */
.hero__pill i { font-style: normal; }
@keyframes pill-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* — Selo do autor: nome + cargo, em "escada", sobre o antebraço direito ----
   Vive dentro da .hero__figure (mede em cqw da própria unidade → escala junto
   com a foto em qualquer tela). O cargo é deslocado à direita (efeito escada). */
.hero__credit {
  position: absolute;
  z-index: 3;                    /* acima da foto e da pílula */
  right: 0;
  /* mobile: mais alto p/ passar ACIMA do float do WhatsApp (fixo no canto);
     no desktop o float fica na base, então o selo desce p/ o antebraço (§desktop) */
  bottom: 24cqw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--font-body);
  font-style: italic;
  line-height: 1.18;
}
.hero__credit span {
  width: fit-content;
  background: var(--brand-navy);
  color: var(--white);
  padding: .1em .5em;
  white-space: nowrap;
}
.hero__credit-name { font-weight: 600; font-size: 4.4cqw; }
.hero__credit-role { font-weight: 400; font-size: 3.9cqw; margin-left: 2.4em; }
/* Cursor piscando enquanto o texto é "digitado" (JS liga .is-typing) */
.hero__credit .is-typing::after {
  content: "";
  display: inline-block;
  width: .07em;
  height: 1em;
  margin-left: .06em;
  vertical-align: -.1em;
  background: currentColor;
  animation: caret-blink .8s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* — Título (Bungee, branco sólido) --------------------------------------- */
.hero__title {
  position: absolute;
  /* ATRÁS da foto (abaixo da figura z:2): quando o título encosta na pessoa
     — telas curtas/estreitas — a silhueta (PNG) recorta o texto, igual ao eco.
     Fica acima do eco (z:1) por vir depois no DOM. */
  z-index: 1;
  /* mobile: começa ~18% e é CENTRALIZADO (design atualizado) */
  top: 18%;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;          /* mobile centralizado; desktop sobrescreve p/ esquerda */
  text-align: center;
  gap: .1em;
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: .96;
  /* Branco sólido, SEM sombra e SEM barra lateral (design atualizado). */
  color: var(--white);
}
/* Troca de slide (e entrada inicial): fade simples, igual na saída. */
@keyframes hero-fade-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes hero-fade-out { from { opacity: 1 } to { opacity: 0 } }
.hero__title.is-entering { animation: hero-fade-in  .5s ease both; }
.hero__title.is-leaving  { animation: hero-fade-out .3s ease both; }
/* Cada linha é uma linha só; o main.js dimensiona a fonte p/ caber (auto-fit).
   Os cqw abaixo são só FALLBACK sem JS (frase do slide 1). */
.hero__title-sm, .hero__title-lg { white-space: nowrap; }
.hero__title-sm { font-size: 7.3cqw; }
.hero__title-lg { font-size: 11.3cqw; }

/* — Stats (Montserrat itálico) ------------------------------------------- */
.hero__stats {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: 18%;                     /* sobe um pouco p/ abrir espaço acima dos dots */
  display: flex;
  /* Ordem única nas duas versões (decisão do cliente): +1k Projetos em cima,
     +500 Clientes embaixo — igual ao desktop (não inverte mais no mobile). */
  flex-direction: column;
  gap: .6rem;
  font-style: italic;
  color: var(--white);
  text-shadow: 0 2px 6px rgba(4, 3, 14, .4);
}
.hero__stats li { display: flex; flex-direction: column; line-height: 1; }
.hero__stats b { font-size: 2.4rem; font-weight: 800; }
.hero__stats span { font-size: 1rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

/* — Dots (indicador de slide, estático por ora) -------------------------- */
/* No MOBILE ficam logo abaixo dos stats (não sobre a pílula central, que é
   larga e ocupa a base). No desktop voltam ao canto inferior esquerdo. */
.hero__dots {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: 12%;                    /* fica ABAIXO dos stats, com folga (não colado) */
  display: flex;
  gap: .15rem;                    /* gap pequeno; o padding do botão dá a área de toque */
}
/* Botão = área de toque generosa; a barra visual fica no ::before (26×7). */
.hero__dots button {
  display: grid;
  place-items: center;
  padding: 11px 6px;
  background: none;
}
.hero__dots button::before {
  content: "";
  width: 26px; height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  transition: background var(--t), width var(--t);
}
.hero__dots button.is-on::before { background: rgba(255, 255, 255, .9); width: 34px; }

/* ===== HERO desktop: foto central, título à direita, stats à esquerda ===== */
@media (min-width: 992px) {
  /* Eco segue o CONTORNO da foto: todas as palavras terminam no centro da foto
     (align-end + right:50%) e a própria silhueta (foto por cima, z-2) recorta.
     Como o contorno varia com a altura, cada linha é cortada num ponto
     diferente → acompanha o contorno sozinho, sem valores fixos por tela. */
  .hero__eco {
    top: var(--header-h);        /* centra no espaço ABAIXO da navbar (igual à foto) */
    bottom: 0;
    left: 0;
    right: 50%;
    height: auto;
    justify-content: center;     /* eco centrado na vertical (compõe o slide centralizado) */
    align-items: flex-end;       /* linhas terminam no centro da foto (a silhueta recorta) */
    gap: .2cqw;
    padding-left: 0;
    overflow: hidden;
  }
  /* fonte ligada à ALTURA (svh) — como a foto é limitada por svh, o eco
     acompanha e as 4 linhas cabem na altura da foto sem passar da cabeça.
     O cqw é o teto em telas altas/estreitas. */
  .hero__eco span { font-size: min(11cqw, 18svh); -webkit-text-stroke-width: 1.5px; }
  .hero__eco span:nth-child(4) { display: block; }   /* desktop mostra 4 linhas (com stagger) */

  /* desktop: a unidade é dimensionada pela LARGURA, limitada pela ALTURA (60svh).
     A composição do slide (eco + foto + título) fica CENTRALIZADA na vertical e
     na horizontal (base do carrossel) — não mais ancorada na base. */
  /* A medida da foto vira variável (reaproveitada no top do título) p/ o título
     "seguir" a cabeça. Os cqw só resolvem quando USADOS num elemento real, então
     tanto a figura quanto o título medem 37cqw contra a MESMA .hero → idênticos. */
  .hero {
    --photo-w: min(37cqw, 500px, 60svh);
    --photo-h: calc(var(--photo-w) * 1102 / 858);   /* proporção real da foto */
  }
  .hero__figure {
    width: var(--photo-w);
    /* centra no espaço abaixo da navbar (50% + metade do header) — assim em
       telas baixas a cabeça não sobe atrás do header (respiro garantido). */
    top: calc(50% + var(--header-h) / 2);
    bottom: auto;
    transform: translate(-50%, -50%);   /* centra V e H (mantém left:50%) */
  }
  .hero__dots { bottom: 5%; }   /* desktop: dots no canto inferior esquerdo, abaixo dos stats */
  .hero__credit { bottom: 15cqw; }  /* desktop: selo desce p/ o antebraço (float fica na base) */

  /* Título à DIREITA da pessoa e livre do corpo: fica na altura do rosto/pescoço
     (~30%), onde a silhueta é estreita — no centro vertical bateria no peito.
     Alinhado à esquerda (as duas linhas começam no mesmo x, logo após a foto). */
  .hero__title {
    /* SEGUE a foto: parte do centro da foto (50% + meia navbar) e sobe ~0,37 da
       altura dela p/ chegar à cabeça; translateY(-50%) centra as 2 linhas nessa
       altura. Como usa a MESMA --photo-h, acompanha a foto em qualquer tela. */
    top: calc(50% + var(--header-h) / 2 - 0.37 * var(--photo-h));
    transform: translateY(-50%);
    left: 58%;
    right: auto;
    width: min(37cqw, 560px);
    text-align: left;              /* desktop volta a alinhar à esquerda */
    align-items: flex-start;
  }
  .hero__title-sm { font-size: 2.5cqw; }
  .hero__title-lg { font-size: 4.4cqw; }

  .hero__stats { bottom: 12%; gap: 1rem; }  /* sobe p/ dar folga acima dos dots */
  .hero__stats b { font-size: clamp(2.6rem, 3.7cqw, 3.8rem); }
}

/* ==========================================================================
   SEÇÃO — "Onde design encontra performance" (vitrine de projetos)
   Navy. Título à esquerda; abaixo, a janela com o screenshot do projeto atual
   (+ o card do próximo atrás), setas laranja e o texto. As setas trocam tudo.
   Conteúdo encostado à ESQUERDA (o terço direito fica livre, como no design).
   ========================================================================== */
.showcase {
  background: var(--brand-navy);
  color: var(--white);
  /* MOBILE: fluxo normal. A 1ª tela (.showcase__screen) ocupa 100svh com título
     + janela + setas; o texto (.showcase__copy) vem DEPOIS, abaixo da dobra — só
     aparece ao rolar (não fica espremido/escondido sob a sombra da janela). */
}
.showcase__inner { width: 100%; }

/* 1ª tela cheia: título no topo, visor (janela + setas) preenchendo o resto. */
.showcase__screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* respiro p/ a navbar FIXA não cobrir o título quando a seção "prende" no topo */
  padding-top: calc(var(--header-h-mob) + clamp(1rem, 3vh, 1.75rem));
  padding-bottom: clamp(1rem, 3vh, 1.75rem);
}
.showcase__title {
  flex: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: .01em;
  font-size: clamp(1.9rem, 4vw, 3.6rem);     /* ~58px @1440 (Bungee) */
  max-width: 16ch;                           /* quebra em ~2 linhas, como no design */
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}

/* Visor = janela + setas SEMPRE juntas (setas à DIREITA da imagem). No mobile
   PREENCHE a altura que sobra da 1ª tela; a janela é centrada nesse espaço. */
.showcase__viewer {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-start;             /* setas junto ao TOPO da imagem (igual desktop) */
  gap: clamp(.6rem, 2.5vw, 1rem);
}

/* — Palco: janela do projeto (frente) + card do próximo (atrás) ----------- */
.showcase__stage {
  position: relative;
  flex: none;                          /* largura da janela vem da ALTURA (aspect) */
}
.showcase__frame {
  position: relative;
  z-index: 2;
  display: flex;
  aspect-ratio: 545 / 788;             /* proporção da janela do design */
  /* MOBILE: preenche a 1ª tela — alta o quanto der, limitada por (a) a ALTURA que
     sobra abaixo do título/navbar (~15rem) e (b) a LARGURA livre (margens+setas
     ≈ 7rem). O menor manda → a janela nunca passa da tela nem das setas; o texto
     fica abaixo (a .showcase__screen tem 100svh). */
  height: min(calc(100svh - 15rem), calc((100vw - 7rem) * 788 / 545));
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 60px rgba(4, 3, 14, .55);
}
.showcase__shot {
  flex: 1;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity var(--t);
}
.showcase__frame.is-swapping .showcase__shot { opacity: 0; }

/* card do próximo projeto: atrás e deslocado p/ a esquerda-baixo (profundidade) */
.showcase__stack {
  position: absolute;
  z-index: 1;
  left: -7%;
  bottom: -7%;
  width: 100%;
  aspect-ratio: 545 / 788;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 20px 40px rgba(4, 3, 14, .45);
  filter: brightness(.5) saturate(.85);   /* apagado, p/ ficar "no fundo" */
}
.showcase__stack-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* — Setas laranja (trocam o projeto): empilhadas, à DIREITA da imagem ----- */
.showcase__nav {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: none;
}
.showcase__arrow {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background: var(--brand-orange);
  color: var(--brand-navy);
  border-radius: var(--radius-sm);
  /* sombra + anel sutil p/ as setas "saltarem" sobre o navy (mais aparentes) */
  box-shadow: 0 10px 22px rgba(4, 3, 14, .55);
  transition: transform var(--t-fast), filter var(--t-fast);
}
.showcase__arrow svg { width: 24px; height: 24px; }
.showcase__arrow:hover { filter: brightness(1.08); transform: translateY(-2px); }
.showcase__arrow:active { transform: translateY(0); }

/* — Texto do projeto (abaixo da 1ª tela no mobile; ao lado no desktop) ---- */
.showcase__copy { padding-block: clamp(2rem, 7vh, 3.5rem); }  /* respiro; só aparece ao rolar */
.showcase__kicker {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: .01em;
  font-size: clamp(1.4rem, 2.5vw, 2.25rem);   /* "CRIAÇÃO DE" ~36px */
  margin-bottom: 1.1rem;
}
.showcase__kicker b { font-weight: 800; font-size: 1.33em; }   /* palavra ~48px */
.showcase__desc {
  color: var(--text-muted);
  font-style: italic;
  font-size: clamp(.95rem, 1.15vw, 1rem);
  line-height: 1.5;
  max-width: 34rem;
}
.showcase__desc p + p { margin-top: 1rem; }

/* — Desktop: título no topo, e abaixo VISOR | texto (2 colunas), tudo em 1 tela.
   A "1ª tela" do mobile se DESFAZ (display:contents) e o .showcase__inner vira a
   grade — o design deixa o terço direito livre (agrupado à esquerda). ------- */
@media (min-width: 992px) {
  .showcase {
    display: flex;
    align-items: center;                 /* centra o bloco na seção (100svh) */
    min-height: 100svh;
    padding-top: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem));
    padding-bottom: clamp(1.5rem, 5vh, 3rem);
  }
  .showcase__screen { display: contents; }   /* dissolve: título/visor viram itens da grade */
  .showcase__inner {
    display: grid;
    grid-template-columns: auto minmax(auto, 34rem);
    grid-template-areas:
      "title  title"
      "viewer copy";
    justify-content: start;
    align-items: start;                  /* título/texto alinham ao TOPO da janela */
    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: clamp(1.25rem, 3vh, 2.25rem);
  }
  .showcase__title  { grid-area: title;  margin-bottom: 0; }
  .showcase__viewer { grid-area: viewer; align-items: flex-start; gap: clamp(1rem, 2vw, 1.75rem); }
  .showcase__copy   { grid-area: copy;   padding-block: 0; }
  .showcase__frame  { height: min(54svh, 480px); }   /* janela do desktop (largura vem do aspect) */
  .showcase__nav    { margin-top: .35rem; }           /* alinha as setas ao topo do título */
}

/* ==========================================================================
   SEÇÃO — "Sites e aplicações autênticos" (timeline dos processos)
   Fundo BRANCO. Título laranja + subtítulo azul; linha laranja + dots e passos
   ALTERNANDO acima/abaixo.
   • Desktop: a seção PRENDE (sticky) e o trilho rola na HORIZONTAL conforme a
     página rola (JS translada o .process__track e liga .process--pinned). Sem
     JS ou em reduced-motion → cai p/ scroll horizontal nativo.
   • Mobile: VERTICAL (empilhado). Os cards aparecem ao rolar (reveal).
   ========================================================================== */
.process {
  background: var(--white);
  color: var(--ink);
  position: relative;
}
.process__sticky {
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h-mob) + clamp(1.5rem, 4vh, 2.5rem));
  padding-bottom: clamp(1.75rem, 5vh, 3rem);
}
.process__head { margin-bottom: clamp(1.25rem, 3.5vh, 2.25rem); }
.process__title {
  font-family: var(--font-display);
  color: var(--brand-orange);
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: .01em;
  font-size: clamp(1.9rem, 4.4vw, 4rem);      /* ~64px @1440 */
  max-width: 16ch;
}
.process__subtitle {
  margin-top: .7rem;
  font-family: var(--font-body);
  color: var(--brand-blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.18;
  font-size: clamp(1rem, 2vw, 1.875rem);      /* ~30px @1440 */
  max-width: 26ch;                            /* cabe em 2 linhas, como no design */
}

/* — Visor + trilho (fallback: scroll horizontal nativo, barra fina laranja) */
.process__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-orange) rgba(0, 0, 0, .08);
  -webkit-overflow-scrolling: touch;
}
.process__viewport::-webkit-scrollbar { height: 8px; }
.process__viewport::-webkit-scrollbar-thumb { background: var(--brand-orange); border-radius: 999px; }
.process__viewport::-webkit-scrollbar-track { background: rgba(0, 0, 0, .08); border-radius: 999px; }

.process__track {
  position: relative;                         /* p/ a linha contínua (::before) */
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* dot laranja (anel branco "corta" a linha atrás dele) — comum às 2 versões */
.process__step::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 0 5px var(--white);
  z-index: 2;
}
.process__step-title {
  font-family: var(--font-display);
  color: var(--brand-blue);
  text-transform: uppercase;
  line-height: 1.02;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);   /* ~32px no maior */
  margin-bottom: .7rem;
}
.process__step-desc {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: clamp(.9rem, 1vw, 1rem);         /* ~16px */
  line-height: 1.45;
  text-align: justify;
  hyphens: auto;
  overflow-wrap: break-word;                  /* palavra longa nunca estoura a coluna */
}

/* — Reveal: cards começam apagados e sobem, mas SÓ quando o JS confirma o reveal
   (liga .reveal-ready na seção). Sem JS ou em reduced-motion a classe não entra,
   então os textos ficam SEMPRE visíveis — nunca somem por falha de script. */
.process.reveal-ready .process__card {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s ease, transform .55s ease;
}
.process.reveal-ready .process__step.is-in .process__card {
  opacity: 1;
  transform: none;
}

/* ===== DESKTOP (≥992): timeline HORIZONTAL, alternando, com pin ========== */
@media (min-width: 992px) {
  .process__sticky { padding-top: calc(var(--header-h) + clamp(3.5rem, 7vh, 4.5rem)); }

  .process__track {
    align-items: stretch;
    width: max-content;                       /* transborda → o JS translada */
    padding-inline: var(--gutter);            /* 1º passo alinha ao título */
  }
  /* LINHA laranja contínua, uma só, atravessando todos os dots (no centro) */
  .process__track::before {
    content: "";
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: var(--brand-orange);
    z-index: 0;
  }
  .process__step {
    flex: 0 0 clamp(300px, 28vw, 410px);
    display: grid;
    grid-template-rows: 1fr auto 1fr;         /* topo | linha+dot | base */
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    position: relative;
  }
  .process__step::before { grid-row: 2; justify-self: center; align-self: center; }
  .process__card {                             /* ÍMPAR acima da linha */
    grid-row: 1;
    align-self: end;
    padding: 0 clamp(.75rem, 1.6vw, 1.6rem) clamp(1rem, 1.8vw, 1.75rem);
  }
  .process__step:nth-child(even) .process__card {   /* PAR abaixo */
    grid-row: 3;
    align-self: start;
    padding: clamp(1rem, 1.8vw, 1.75rem) clamp(.75rem, 1.6vw, 1.6rem) 0;
  }

  /* Pin ligado pelo JS: a seção fica alta (JS define height), o sticky "prende"
     100svh e o trilho é transladado (overflow escondido). */
  .process--pinned .process__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    padding-bottom: 0;
  }
  .process--pinned .process__viewport {
    flex: 1;
    min-height: 0;
    overflow: visible;                        /* o JS translada; sem scroll nativo */
    display: flex;
    align-items: center;
  }
  .process--pinned .process__track { will-change: transform; }
}

/* ===== MOBILE (≤991): timeline VERTICAL (linha à esquerda, empilhado) ===== */
@media (max-width: 991px) {
  .process__viewport { overflow-x: hidden; }
  /* gutter nas laterais p/ o texto não encostar/sair da borda da tela */
  .process__track { flex-direction: column; width: 100%; padding-inline: var(--gutter); }
  .process__step {
    display: grid;
    grid-template-columns: 2.25rem 1fr;        /* dot+linha | card */
    align-items: stretch;
    position: relative;
  }
  /* linha VERTICAL: cada passo desenha um trecho na coluna do dot → contínua */
  .process__step::after {
    content: "";
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: stretch;
    width: 4px;
    background: var(--brand-orange);
    z-index: 0;
  }
  .process__step:last-child::after { align-self: start; height: 1.6rem; }  /* para no último dot */
  .process__step::before {                     /* dot no topo, junto ao título */
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: start;
    margin-top: .35rem;
  }
  .process__card {
    grid-column: 2;
    grid-row: 1;
    padding: 0 0 clamp(1.75rem, 5vw, 2.5rem);  /* espaço entre passos */
  }
}

/* ==========================================================================
   SEÇÃO — "São algumas das tecnologias que usamos…"
   Fundo navy, tudo CENTRALIZADO: título + fileira de logos (tiles brancos) +
   tagline. No mobile os tiles quebram em várias linhas (flex-wrap).
   ========================================================================== */
.tech {
  background: var(--brand-navy);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: safe center;        /* centra se couber; senão alinha ao topo */
  text-align: center;
  /* respiro p/ a navbar fixa (a faixa inclinada desce mais à esquerda) */
  padding-top: calc(var(--header-h-mob) + clamp(1.5rem, 4vh, 2.5rem));
  padding-bottom: clamp(2rem, 6vh, 3.5rem);
}
.tech__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 7vh, 4.5rem);
}
.tech__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.06;
  letter-spacing: .01em;
  font-size: clamp(1.5rem, 3.4vw, 3rem);      /* ~48px @1440 (1 linha no desktop) */
  max-width: 100%;                            /* só quebra quando não couber (mobile) */
}
.tech__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.3rem, 3.2vw, 3.2rem);           /* mais espaçados */
  list-style: none;
  margin: 0;
  padding: 0;
}
.tech__tile {
  width: clamp(74px, 8.5vw, 104px);
  aspect-ratio: 1;
  background: var(--white);
  border-radius: var(--radius);                /* quadrado, cantos levemente arredondados */
  display: grid;
  place-items: center;
  padding: clamp(11px, 1.4vw, 18px);
  box-shadow: 0 10px 24px rgba(4, 3, 14, .35);
}
.tech__tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* — Entrada dos tiles UM A UM (stagger): só esconde se o JS confirmar (classe
   .reveal-ready) → sem JS / reduced-motion os logos aparecem normalmente. ---- */
.tech.reveal-ready .tech__tile {
  opacity: 0;
  transform: translateY(18px) scale(.86);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
  transition-delay: calc(var(--i, 0) * 80ms);  /* cada tile entra um pouco depois */
}
.tech.is-in .tech__tile { opacity: 1; transform: none; }
.tech__note {
  font-family: var(--font-display);            /* Bungee, como no design */
  text-transform: uppercase;
  line-height: 1.4;
  letter-spacing: .01em;
  font-size: clamp(.78rem, 1.7vw, 1.5rem);     /* ~24px @1440 */
  max-width: 100%;                             /* 2 linhas (o <br>) no desktop */
}

/* — Desktop: respiro maior do topo (limpa a diagonal da navbar) ----------- */
@media (min-width: 992px) {
  .tech { padding-top: calc(var(--header-h) + clamp(3rem, 6vh, 4.5rem)); }
}

/* ==========================================================================
   FOOTER (autoral — não estava no design)
   Navy com uma "fita" de brand no topo. Banda de CTA (leva ao WhatsApp) +
   colunas (marca/navegação/serviços/contato) + barra inferior com o tema
   "pacote" e a mascote.
   ========================================================================== */
.footer {
  position: relative;
  background: var(--brand-navy);
  color: var(--text-muted);
}
/* fita de brand no topo (lime → azul → laranja): separa do navy da seção anterior */
.footer::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-lime), var(--brand-blue), var(--brand-orange));
}

/* — CTA final -------------------------------------------------------------- */
.footer__cta { border-bottom: 1px solid var(--line); }
.footer__cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 7vh, 4.5rem);
}
.footer__kicker {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  color: var(--brand-lime);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .9rem;
  margin-bottom: .5rem;
}
.footer__cta-title {
  font-family: var(--font-display);
  color: var(--white);
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: .01em;
  font-size: clamp(1.5rem, 3.4vw, 2.8rem);
  max-width: 18ch;
}
.footer__cta-sub {
  margin-top: .9rem;
  color: var(--text-muted);
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  line-height: 1.5;
  max-width: 46ch;
}
.footer__cta-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--brand-lime);
  color: var(--brand-navy);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(.85rem, 1vw, 1rem);
  padding: .95em 1.5em;
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 30px rgba(203, 251, 0, .18);
  transition: transform var(--t-fast), filter var(--t-fast);
}
.footer__cta-btn svg { width: 1.35em; height: 1.35em; }
.footer__cta-btn:hover { transform: translateY(-3px); filter: brightness(1.06); }
.footer__cta-btn:active { transform: translateY(0); }

/* — Colunas ---------------------------------------------------------------- */
.footer__main {
  display: grid;
  grid-template-columns: 1fr;                 /* mobile: empilhado */
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 6vh, 4rem);
}
.footer__logo img { height: 52px; width: auto; }
.footer__desc {
  margin-top: 1.1rem;
  max-width: 36ch;
  color: var(--text-dim);
  font-size: .95rem;
  line-height: 1.6;
}
.footer__social { display: flex; gap: .6rem; margin-top: 1.3rem; }
.footer__social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--line);
  color: var(--text-muted);
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.footer__social svg { width: 20px; height: 20px; }
.footer__social a:hover {
  transform: translateY(-2px);
  background: var(--brand-lime);
  color: var(--brand-navy);
  border-color: transparent;
}
.footer__col-title {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
  color: var(--brand-orange);
  margin-bottom: 1.1rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: .7rem; }
.footer__col a,
.footer__loc { color: var(--text-muted); font-size: .95rem; }
.footer__col a { width: fit-content; transition: color var(--t-fast); }
.footer__col a:hover { color: var(--brand-lime); }
.footer__loc { color: var(--text-dim); }

/* — Barra inferior --------------------------------------------------------- */
.footer__bottom { border-top: 1px solid var(--line); }
.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1.4rem;
}
.footer__copy { color: var(--text-dim); font-size: .85rem; }
.footer__packet {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-dim);
  font-style: italic;
  font-size: .85rem;
}
.footer__packet img { width: 26px; height: 26px; image-rendering: pixelated; }

/* colunas: 3 no tablet (marca ocupa a linha toda), 4 no desktop */
@media (min-width: 560px) {
  .footer__main { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  .footer__main { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; align-items: start; }
  .footer__brand { grid-column: auto; }
}

/* ==========================================================================
   Botões laterais flutuantes (WhatsApp + voltar ao topo)
   ========================================================================== */
.floats {
  position: fixed;
  right: clamp(1rem, 2vw, 1.6rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.float-btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--brand-navy);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--shadow-header);
  transition: transform var(--t-fast), filter var(--t-fast);
}
.float-btn:hover { transform: translateY(-3px); filter: brightness(1.25); }
.float-btn svg { width: 22px; height: 22px; }
.float-btn--wa { background: #25d366; border-color: transparent; color: #fff; }

/* "Voltar ao topo": oculto enquanto está no topo, aparece após rolar (JS liga
   .is-visible em scrollY > 400). O WhatsApp fica sempre visível. Usamos
   visibility (mantém o espaço) p/ o WhatsApp não pular ao aparecer/sumir. */
.float-btn--top { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t), visibility var(--t); }
.float-btn--top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }

/* No mobile os floats descem p/ a base (sobre a PÍLULA — ok), ficando ABAIXO do
   selo "Fundador Lost Packet". Em svh p/ escalar com a altura do aparelho e não
   colidir com o selo em celulares mais curtos / com safe-area. */
@media (max-width: 991px) {
  .floats { bottom: calc(env(safe-area-inset-bottom, 0px) + 4svh); }
}

.ph-next {
  display: grid;
  place-items: center;
  background: var(--brand-navy);
  color: var(--text-dim);
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* — Respeito a quem pediu menos movimento -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.snap { scroll-snap-type: none !important; }  /* sem snap p/ quem pediu */

  /* Letreiro parado: mostra uma cópia centrada (a regra global o congelaria em -50%) */
  .hero__pill-track { animation: none !important; transform: none !important; }
  .hero__pill-seg[aria-hidden] { display: none; }
  .hero__pill { text-align: center; }
  /* Navbar aparece direto (sem varredura) */
  .site-header::before { transition: none !important; }
}