/* =================================================================
   ANGELO GARCIA
   Sistema visual conforme DESIGN.md (constellation on black velvet)

   Regras que este arquivo respeita, sem exceção:
   . #000000 puro em toda seção. Nenhum painel, card, borda ou sombra
   . Hierarquia por ESCALA e tracking negativo, nunca por peso
   . Todo título em weight 400. Todo corpo de texto em weight 200
   . #8052ff só em botão de ação preenchido. Nunca como superfície
   . #ffb829 só em ênfase e label
   . Sem gradiente em componente de UI. Só na logo e nas partículas
   . Raio 24px. Pill apenas nos elementos pequenos
   ================================================================= */

/* ---------------------------------------------------------------------
   MADE Tommy, da MadeType.

   ATENCAO DE LICENCA: os arquivos em /fontes sao a versao PERSONAL USE.
   O EULA que veio no pacote diz, literalmente, "FOR PERSONAL USE".
   Este site vende servico, o que e uso comercial e nao esta coberto.
   Licenca comercial: https://pixelsurplus.com/products/made-tommy
   --------------------------------------------------------------------- */
@font-face{
  font-family:'MADE Tommy';
  src:url('fontes/MADE-Tommy-Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'MADE Tommy';
  src:url('fontes/MADE-Tommy-Bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* Cores */
  --void:          #000000;
  --bone-white:    #ffffff;
  --ash-gray:      #9a9a9a;
  --silver-mist:   #bdbdbd;
  --electric-iris: #8052ff;
  --saffron-spark: #ffb829;
  --deep-verdant:  #15846e;

  /* Duas fontes, ambas da Fontshare, uso comercial livre.

     --font-display  MADE Tommy. Só títulos. Geométrica, bojos redondos,
                     terminais retos. Volta a caixa mista, ao contrário
                     da Bebas, que forçava tudo em maiúscula.

     --font          Switzer. Corpo, nav, labels e botões. Equivalente
                     livre da PP Neue Montreal, a fonte da referência.  */
  --font-display: 'MADE Tommy', 'Switzer', ui-sans-serif, system-ui, sans-serif;
  --font: 'Switzer', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --w-extralight: 200;
  --w-regular:    400;
  --w-semibold:   600;

  /* Escala de tipo do sistema, fluida mas com os mesmos topos */
  --text-caption:   12px;
  --text-nav-label: 14px;
  --text-body:      clamp(16px, 1.2vw, 18px);
  --text-h-2xs:     clamp(20px, 1.7vw, 24px);
  --text-h-xs:      clamp(22px, 1.9vw, 27px);
  --text-h-sm:      clamp(30px, 3.3vw, 42px);
  --text-h:         clamp(32px, 3.7vw, 48px);
  --text-h-lg:      clamp(38px, 6vw, 78px);
  --text-display:   clamp(46px, 8.2vw, 113px);

  /* Espaçamento, base 6px */
  --s-6: 6px;   --s-12: 12px; --s-18: 18px; --s-24: 24px;
  --s-30: 30px; --s-36: 36px; --s-60: 60px; --s-96: 96px; --s-120: 120px;

  --page-max: 1280px;
  --radius: 24px;
  --radius-full: 9999px;

  --gutter: clamp(20px, 4vw, 40px);
  --section-gap: clamp(72px, 9vw, 120px);
}

/* Em tela larga o container de 1280 deixa margens enormes dos dois
   lados e a pagina parece perdida no meio do monitor. Acima de 1700px
   ele cresce, e o conteudo passa a ocupar a tela em vez de boiar. */
@media (min-width:1700px){
  :root{ --page-max:1560px; }
}

/* ------------------------------ Reset ------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--void);
  color:var(--bone-white);
  font-family:var(--font);
  font-size:var(--text-body);
  font-weight:var(--w-extralight);
  line-height:1.5;
  font-feature-settings:"ss01" on;
  -webkit-font-smoothing:antialiased;
  /* clip, e NÃO hidden. overflow-x:hidden faz o overflow-y virar auto,
     o body vira contêiner de rolagem e todo position:sticky de dentro
     passa a grudar nele em vez de grudar na tela. Era isso que fazia o
     astronauta sumir ao rolar. clip recorta igual e não cria contêiner. */
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure,blockquote{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
em{ font-style:normal; color:var(--saffron-spark); }
strong{ font-weight:var(--w-regular); color:var(--bone-white); }
::selection{ background:var(--electric-iris); color:#fff; }

/* Campo de partículas ambiente, atrás de todo o conteúdo */
#ambient{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
}
/* CUIDADO AO MEXER AQUI.
   Aqui já moraram dois bugs, os dois pelo mesmo motivo: um seletor do
   tipo body > *:not(#ambient). Um id dentro do :not conta como
   especificidade de id, então aquilo valia (1,0,1) e atropelava .nav,
   .mobilemenu e .float-wpp, que valem (0,1,0). Na primeira versão
   roubava o position:fixed dos três; na segunda, roubava o z-index, e
   a nav empatava em 1 com o main, que vem depois no HTML e cobria o
   menu inteiro, deixando os links sem clique.

   Por isso agora é explícito, elemento por elemento, sem coringa:
   só main e footer precisam subir acima do canvas. Quem é fixed já
   tem posicionamento e z-index próprios e fica fora daqui. */
main, footer{ position:relative; z-index:1; }

/* ---------------------------- Estrutura ---------------------------- */
.container{
  width:100%;
  max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-gap); }
.section--tight{ padding-block:clamp(48px,6vw,84px); }
.center{ margin-top:var(--s-96); }

/* Ritmo de duas colunas: título grande à esquerda, corpo à direita */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-60) clamp(40px,7vw,120px);
  align-items:start;
}
.split__right > * + *{ margin-top:var(--s-36); }

/* --------------------------- Tipografia --------------------------- */
.display{
  font-size:var(--text-display);
  font-weight:var(--w-regular);
  line-height:1.02;
  letter-spacing:-.04em;
}
.h-lg{
  font-size:var(--text-h-lg);
  font-weight:var(--w-regular);
  line-height:1.05;
  letter-spacing:-.04em;
}
.h-xs{
  font-size:var(--text-h-xs);
  font-weight:var(--w-regular);
  line-height:1.1;
  letter-spacing:-.02em;
}
.h-2xs{
  font-size:var(--text-h-2xs);
  font-weight:var(--w-regular);
  line-height:1.25;
  letter-spacing:-.02em;
}

/* ---- MADE Tommy: a linha de títulos ----
   Vem depois das regras acima de propósito, para sobrescrever peso e
   tracking. Geométrica de largura normal, então a escala do sistema
   volta a valer: sem a compensação de tamanho que a condensada exigia.
   Fora daqui, de propósito: pergunta de FAQ e depoimento continuam na
   Switzer, para não pesar o bloco de leitura.                        */
.display, .h-lg, .h-xs, .h-2xs, .declaracao,
.proof__num, .preco strong,
.work h3, .mobilemenu__links a{
  font-family:var(--font-display);
}
/* Bojo redondo e haste grossa fecham os contra-formas se o tracking
   for muito negativo. -0.03em segura o ar entre as letras. */
.display, .h-lg, .declaracao,
.proof__num, .preco strong, .mobilemenu__links a{
  font-weight:700;
  letter-spacing:-.03em;
}
.h-xs, .h-2xs, .work h3{
  font-weight:500;
  letter-spacing:-.015em;
}
.display, .h-lg, .declaracao{ line-height:.96; }
.h-xs, .h-2xs, .work h3{ line-height:1.15; }
.proof__num, .preco strong, .mobilemenu__links a{ line-height:1.05; }

.label{
  font-size:var(--text-nav-label);
  font-weight:var(--w-semibold);
  line-height:1.2;
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--saffron-spark);
  margin-bottom:var(--s-30);
}
.label em{ color:var(--bone-white); }
.papel{
  font-size:var(--text-caption);
  font-weight:var(--w-regular);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--electric-iris);
  margin-bottom:var(--s-12);
}
.idx{
  display:block;
  font-size:var(--text-caption);
  font-weight:var(--w-regular);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--electric-iris);
  margin-bottom:var(--s-24);
}
.idx--destaque{ color:var(--saffron-spark); }

.lead{
  font-size:var(--text-body);
  font-weight:var(--w-extralight);
  line-height:1.5;
  color:var(--silver-mist);
  max-width:52ch;
}
.lead--forte{ color:var(--bone-white); }
.apoio{
  font-size:var(--text-body);
  font-weight:var(--w-extralight);
  line-height:1.5;
  color:var(--ash-gray);
  max-width:44ch;
}
.micro{
  font-size:var(--text-caption);
  font-weight:var(--w-extralight);
  line-height:1.5;
  color:var(--ash-gray);
}
.hero__copy .micro{ margin-top:var(--s-24); }

/* ------------------------------ Ações ------------------------------ */
/* Pill violeta. É a única superfície colorida da página. */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--electric-iris);
  color:#fff;
  font-size:var(--text-nav-label);
  font-weight:var(--w-semibold);
  letter-spacing:.025em;
  text-transform:uppercase;
  padding:14.4px 16px;
  border-radius:22.5px;
  transition:opacity .25s ease;
  white-space:nowrap;
}
.btn:hover{ opacity:.82; }

/* Link de texto puro. Sem fundo, sem borda. */
.ghost{
  display:inline-block;
  font-size:var(--text-nav-label);
  font-weight:var(--w-regular);
  letter-spacing:.025em;
  color:var(--bone-white);
  transition:color .25s ease;
}
.ghost:hover{ color:var(--saffron-spark); }

/* ------------------------------ NAV ------------------------------ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background-color .35s ease, backdrop-filter .35s ease,
             box-shadow .35s ease;
}
/* Fundo de vidro: entra ao rolar e também quando o cursor está sobre a
   barra, para o menu ganhar corpo na hora de ser usado. A saturação
   junto do blur é o que faz o vidro parecer vidro e não névoa cinza:
   ela recupera a cor do que está passando por trás.
   Nota: o DESIGN.md pede nav sem blur. Desvio pedido em conversa. */
.nav.is-scrolled,
.nav:hover,
.nav:focus-within{
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
          backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);
}
.nav__inner{
  max-width:var(--page-max);
  margin-inline:auto;
  padding:var(--s-18) var(--gutter);
  display:flex; align-items:center; gap:var(--s-30);
}
/* Alvo de toque decente: 44px é o mínimo confortável no celular. */
.nav__links a{ display:inline-flex; align-items:center; min-height:44px; }
.logo{ min-height:44px; }
/* Marca só em tipografia, sem símbolo.
   Duas vozes na mesma linha: "Psy" na display, pesada e apertada, e
   "Comunic" em caixa alta espacejada e cinza. É o contraste entre as
   duas que sustenta a marca sozinho, agora que não há ícone ao lado. */
.logo{ display:inline-flex; align-items:center; }
.logo__word{
  display:inline-flex; align-items:baseline; gap:.44em;
  font-size:var(--text-nav-label);
  line-height:1;
}
.logo__word b{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.34em;
  letter-spacing:-.03em;
  color:var(--bone-white);
}
.logo__word i{
  font-style:normal;
  font-weight:var(--w-semibold);
  font-size:.82em;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ash-gray);
  transition:color .25s ease;
}
.logo:hover .logo__word i{ color:var(--bone-white); }
.nav__links{ display:flex; gap:var(--s-30); margin-left:auto; }
.nav__links a{
  font-size:var(--text-nav-label);
  font-weight:var(--w-semibold);
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--ash-gray);
  transition:color .2s ease;
}
.nav__links a:hover{ color:var(--bone-white); }
.nav__burger{ display:none; margin-left:auto; width:44px; height:44px; }
.nav__burger span{ display:block; height:1px; background:#fff; margin:5px 0; transition:transform .3s ease; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

/* Menu de tela cheia. Mesmo void, mesma escala tipográfica das seções. */
.mobilemenu{
  position:fixed; inset:0; z-index:99;
  background:var(--void);
  padding:clamp(96px,18vh,150px) var(--gutter) var(--s-60);
  display:flex; flex-direction:column;
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* Sem isto o display:flex acima anula o atributo hidden e o menu vaza no desktop */
.mobilemenu[hidden]{ display:none; }

.mobilemenu__links{ display:flex; flex-direction:column; }
.mobilemenu__links a{
  display:flex; align-items:baseline; gap:var(--s-18);
  padding-block:var(--s-18);
  font-size:clamp(32px,8.5vw,48px);
  font-weight:var(--w-regular);
  line-height:1.1;
  letter-spacing:-.04em;
  color:var(--bone-white);
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease, color .2s ease;
}
.mobilemenu__links a i{
  flex:none;
  font-style:normal;
  font-size:var(--text-caption);
  font-weight:var(--w-regular);
  letter-spacing:.08em;
  color:var(--electric-iris);
}
.mobilemenu__links a:active{ color:var(--saffron-spark); }
.mobilemenu.is-open .mobilemenu__links a{ opacity:1; transform:none; }
.mobilemenu.is-open .mobilemenu__links a:nth-child(1){ transition-delay:.04s; }
.mobilemenu.is-open .mobilemenu__links a:nth-child(2){ transition-delay:.10s; }
.mobilemenu.is-open .mobilemenu__links a:nth-child(3){ transition-delay:.16s; }
.mobilemenu.is-open .mobilemenu__links a:nth-child(4){ transition-delay:.22s; }

.mobilemenu__foot{
  margin-top:auto;
  padding-top:var(--s-60);
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-24);
  opacity:0; transition:opacity .5s ease .3s;
}
.mobilemenu.is-open .mobilemenu__foot{ opacity:1; }

/* ------------------------------ HERO ------------------------------ */
/* O vídeo virou o cenário da seção, não um elemento dentro dela. Por
   isso a hero ganha altura de tela e recorte próprio, e o conteúdo
   passa a flutuar por cima, em coluna única. */
/* Bloco, e não flex centralizado: a hero agora carrega dois andares,
   a copy e o carrossel de marcas, e os dois precisam empilhar. */
.hero{
  position:relative;
  /* clip, e NÃO hidden, pelo mesmo motivo do body: hidden transformaria
     a hero em contêiner de rolagem e mataria o sticky do vídeo. */
  overflow:clip;
  min-height:100svh;
  padding-top:clamp(140px,20vh,220px);
  padding-bottom:clamp(56px,8vh,110px);
}
.hero__grid{ position:relative; z-index:1; display:block; }
.hero__copy .lead{ margin-top:var(--s-36); max-width:52ch; }
.hero__actions{
  display:flex; align-items:center; gap:var(--s-36);
  margin-top:var(--s-36); flex-wrap:wrap;
}

/* ---------------------------- Vídeo da hero ----------------------------
   Cobre a seção inteira, de borda a borda. É isso que faz o contorno
   sumir: não há mais uma caixa retangular sobre o preto, há um fundo.  */
.hero__video{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
}
#astronaut-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* ZOOM E NITIDEZ ANDAM JUNTOS AQUI.
     O arquivo tem 864x496. Cada ponto de zoom estica ainda mais um
     vídeo que já é ampliado para caber na largura da tela, e é isso que
     aparece como baixa qualidade. Por isso o zoom caiu de 1.12 para
     1.04: é o mínimo que ainda dá margem para o deslocamento do
     parallax, que foi reduzido junto, de 40px para 20.
     Regra: deslocamento máximo = (zoom - 1) / 2 x altura da caixa. */
  transform:scale(1.04);
  will-change:transform;
}
/* Véu por cima do vídeo. Faz duas coisas ao mesmo tempo:
   segura a legibilidade do texto na metade esquerda e dissolve a base
   no preto, para a seção emendar na próxima sem linha de corte. */
.hero__video::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.92) 26%, rgba(0,0,0,.55) 52%, rgba(0,0,0,.28) 78%, rgba(0,0,0,.5) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 26%, rgba(0,0,0,.2) 62%, #000 100%);
}
@media (max-width:860px){
  /* Sem duas colunas, o texto fica sobre o vídeo inteiro: o véu precisa
     escurecer de baixo para cima, não da esquerda para a direita. */
  .hero__video::after{
    background:linear-gradient(to bottom,
      rgba(0,0,0,.62) 0%, rgba(0,0,0,.3) 18%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.93) 76%, #000 100%);
  }
}

/* ---------------- NITIDEZ: o vídeo recua no desktop ----------------
   O arquivo tem 864x496. Cobrindo a largura inteira de um monitor de
   1414px, a ampliação mínima possível é 1,64x, e é a largura da tela
   que impõe isso: não há ajuste de zoom que resolva.
   A saída é o vídeo ocupar menos área. Num painel de até 900px ele
   roda praticamente no tamanho nativo, 1,04x, e a diferença de
   nitidez é visível.
   O painel não vira retângulo porque as quatro bordas dissolvem por
   máscara, combinadas por interseção.
   No celular não se aplica: ali a tela é mais estreita que o próprio
   arquivo, então o vídeo já é REDUZIDO, e reduzir nunca borra.      */
@media (min-width:1024px){
  /* A COLUNA atravessa a hero inteira, do topo até o fim das marcas.
     O VÍDEO dentro dela é sticky: gruda na tela e só solta quando a
     coluna acaba. É isso que faz o astronauta acompanhar a rolagem e
     continuar visível ao lado das logos, com um arquivo só.
     Sticky funciona aqui porque a coluna é o bloco que o contém, e ela
     tem a altura da hero para o vídeo percorrer. */
  /* Ancorado pela BORDA ESQUERDA, em porcentagem da tela, e nao por
     largura fixa. Assim ele acompanha o monitor: quanto maior a tela,
     maior o video, e o vazio da direita deixa de existir. */
  .hero__video{
    position:absolute;
    top:0; bottom:0; right:0;
    left:40%;
    width:auto;
    height:auto;
  }
  #astronaut-video{
    position:sticky;
    inset:auto;
    top:clamp(84px,11vh,140px);
    width:100%;
    height:clamp(560px, 73vh, 860px);
    display:block;
  }
  /* Largura da copy é um equilíbrio, não um número solto:
     com 46% ela invadia o painel em 51px; com 38% parava de invadir mas
     o título quebrava em seis linhas em vez de três. 42% é o ponto em
     que "O site que" cabe numa linha e ainda sobra folga até o painel. */
  .hero__copy{ max-width:34%; }
  /* O título desce de 113px para 96px SÓ na hero. Com o painel de vídeo
     ao lado, 113px não cabia: "O site que" quebrava e o título virava
     seis linhas em vez de três. O CTA final, que ocupa a largura toda,
     continua na escala cheia do sistema. */
  .hero .display{ font-size:clamp(42px, 4.6vw, 68px); }
  /* O véu de tela cheia não faz mais sentido: o vídeo não passa mais
     por baixo do texto. Quem dissolve as bordas agora é a máscara. */
  .hero__video::after{ background:none; }

  #astronaut-video{
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 20%, #000 86%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 20%, #000 86%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%);
    mask-composite:intersect;
  }
}

/* Foto por cima do campo de partículas.
   O fade é feito com mask, não com um degradê preto sobreposto: assim a
   área esvanecida fica de fato transparente e as partículas continuam
   visíveis atrás dela, em vez de sumirem sob uma tarja preta.
   Camada 1 dissolve a esquerda. Camada 2 tira as bordas de cima e de
   baixo, que senão cortariam a foto em retângulo duro sobre o void.
   As duas se combinam por interseção. */
.hero__foto{
  /* ---- AFINE A FOTO POR AQUI ----
     --foto-x     negativo puxa para a esquerda, para perto do texto
     --foto-y     negativo sobe a foto
     --foto-zoom  100% e o tamanho da caixa. Acima disso, amplia.
     Mantenha zoom maior que x e y somados, senao abre um vazio na
     direita ou embaixo, onde a foto deixaria de cobrir a caixa.      */
  --foto-x:0%;
  --foto-y:0%;
  --foto-zoom:100%;

  position:absolute; z-index:3;
  inset:auto;
  top:var(--foto-y);
  left:var(--foto-x);
  width:var(--foto-zoom);
  height:var(--foto-zoom);
  object-fit:cover;
  object-position:55% 18%;
  pointer-events:none;

  /* As quatro bordas precisam dissolver. Qualquer uma que termine opaca
     vira uma linha reta sobre o void, porque o fundo da foto e azul
     escuro e nao preto puro. A direita fecha em faixa larga (85% a 100%)
     para o corte sumir sem comer o ombro. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 24%, #000 54%, #000 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 78%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 24%, #000 54%, #000 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 78%, transparent 100%);
  mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}

/* No desktop a foto sobe e encosta no titulo. A caixa continua no lugar,
   entao o cerebro de particulas nao se mexe: so a foto anda por cima. */
@media (min-width:1024px){
  .hero__foto{
    --foto-x:-17%;
    --foto-y:-14%;
    --foto-zoom:118%;
  }
}
@media (min-width:1180px){
  .hero__visual{ margin-right:calc(var(--gutter) * -2); transform:scale(1.12); }
}

/* ----------------------------- PROVA ----------------------------- */
/* Tratamento editorial, não painel de indicadores.
   O numeral leva a unidade ao lado, alinhada pela LINHA DE BASE e em
   corpo pequeno. É o que separa um relatório bem feito de um banner:
   o numeral domina, a unidade acompanha, nada fica pendurado nele.
   Fora: o "+" violeta colado no numeral, que parecia selo, e o rótulo
   colorido de cada coluna. Quatro violetas seguidos gastavam a cor que
   o sistema reserva para ação. */
.proof{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--s-60) clamp(30px,4vw,72px);
  margin-top:var(--s-60);
}
.proof__num{
  display:flex; align-items:baseline; gap:.2em;
  font-size:clamp(48px,5.8vw,78px);
  line-height:1;
  color:var(--bone-white);
}
.proof__num i{
  font-family:var(--font);          /* a unidade volta para a Switzer */
  font-style:normal;
  font-size:.3em;
  font-weight:var(--w-extralight);
  letter-spacing:0;
  color:var(--ash-gray);
}
/* Uma linha só. A copy foi encurtada para nenhuma quebrar torta. */
.proof__txt{
  margin-top:var(--s-18);
  font-size:14px;
  font-weight:var(--w-extralight);
  line-height:1.5;
  color:var(--silver-mist);
}

/* Selo de autoridade. Sai da grade dos números de propósito: é
   qualitativo, não numérico, e competia com eles quando dividia coluna. */
.selo{
  margin-top:var(--s-96);
  max-width:60ch;
  font-size:var(--text-h-2xs);
  font-weight:var(--w-extralight);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--bone-white);
}

/* ---------------------------- DESTAQUE ---------------------------- */
/* Bloco de declaração. Só tipografia grande sobre o void. */
.destaque{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(36px,5vw,80px);
  align-items:center;
}
.declaracao{
  font-size:var(--text-h-lg);
  font-weight:var(--w-regular);
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--bone-white);
}
.destaque .lead{ margin-top:var(--s-36); }
.destaque__mock{ margin:0; }
/* height:auto para o atributo height do HTML não virar altura em CSS */
.destaque__mock img,
.destaque__mock video{ display:block; width:100%; height:auto; }
@media (min-width:1180px){
  /* Deixa o mockup avançar até a borda, como o visual do hero faz */
  .destaque__mock{ margin-right:calc(var(--gutter) * -1); }
}
@media (max-width:860px){
  .destaque{ grid-template-columns:1fr; }
  .destaque__mock{ max-width:420px; }
}

/* ------------------- Marcas dentro do cenário da hero -------------------
   O carrossel mora dentro da .hero, e não numa seção própria. É o que
   faz o astronauta continuar visível aqui embaixo com UM vídeo só, sem
   duplicar o arquivo e sem sticky nem fixed, que já falharam aqui.
   No desktop o bloco ocupa a esquerda e libera a direita para ele.    */
.hero__marcas{
  position:relative;
  z-index:1;
  margin-top:clamp(48px,7vh,100px);
  padding-inline:var(--gutter);
}
/* Título das marcas.
   Era um rótulo em caixa alta de 14px, do mesmo peso de qualquer outro
   label da página. Só que aqui ele não anuncia uma seção: ele carrega
   uma prova. Vira frase, com o número em âmbar, que é onde está o
   argumento. */
.marcas__titulo{
  font-size:clamp(19px,1.7vw,25px);
  font-weight:var(--w-extralight);
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--silver-mist);
  margin-bottom:var(--s-36);
}
.marcas__titulo em{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.32em;
  letter-spacing:-.03em;
  color:var(--saffron-spark);
}

@media (min-width:1024px){
  /* Recua para a esquerda: agora o astronauta ESTÁ ao lado, grudado à
     direita, então o espaço livre deixa de ser vão morto e passa a ser
     o lugar dele. Foi por isso que antes eu tinha voltado para a largura
     toda: sem o vídeo ali, sobrava vazio. */
  /* 44% e não 52%: medido, com 52% o bloco terminava em 735 e a coluna
     do vídeo começa em 650, ou seja, as logos passavam por baixo do
     astronauta. */
  /* Alinhado a coluna de texto, e nao a borda da tela. Sem isto, em
     monitor largo o rotulo das marcas comecava colado na borda enquanto
     o titulo comecava 400px adentro, e os dois pareciam de paginas
     diferentes. */
  .hero__marcas{
    /* Sem somar o gutter aqui: ele já vem do padding-inline do bloco.
       Somado duas vezes, as marcas caíam 40px à direita do título. */
    margin-left:max(0px, calc(50% - var(--page-max) / 2));
    width:min(32%, 600px);
  }
  /* A ponta direita dissolve, para o último logo não bater de frente
     com a borda do vídeo. */
  .hero__marcas .logos{
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 76%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 0%,#000 76%,transparent 100%);
  }
}

/* -------------------------- VINCI SOCIETY -------------------------- */
.label--centro{ text-align:center; margin-top:var(--s-96); margin-bottom:var(--s-36); }
.label--semTopo{ margin-top:0; }

/* --------------------- CARROSSEL DE CASES ---------------------
   Aqui os logos são <img>, não máscara como no carrossel da Vinci.
   Motivo: são 28 marcas. Como máscara elas teriam que virar data URI
   para funcionar em file://, e isso somaria uns 200 KB ao CSS. Como
   já são silhuetas brancas de fundo transparente, <img> resolve sem
   custo, carrega sob demanda e fica em cache separado.

   Repouso a 45% de opacidade, que é o cinza de apoio do sistema.
   No hover vai a branco pleno: mesma gramática de "recua e acende"
   do carrossel da Vinci, só que na paleta neutra, porque aqui são
   marcas suas e lá é autoridade emprestada.                       */
.logos--cases .logos__track{ animation-duration:78s; }
/* As silhuetas foram recortadas rente ao desenho, então as proporções
   variam muito (de 1,4:1 a 6,3:1). object-fit:contain numa caixa fixa
   é o que mantém todas dentro do mesmo ritmo sem distorcer nenhuma. */
.caso{
  flex:none;
  width:clamp(104px,10.5vw,158px);
  height:clamp(38px,3.9vw,54px);
  object-fit:contain;
  opacity:.55;
  transition:opacity .35s ease, transform .35s ease;
}
.caso:hover{ opacity:1; transform:translateY(-4px); }

.vinci__foto{ margin-top:var(--s-120); }
.vinci__foto img{
  width:100%;
  /* height:auto é obrigatório: sem ele o atributo height="1200" do HTML
     entra como altura em CSS e a foto renderiza deformada. */
  height:auto;
  border-radius:var(--radius);   /* mesmo raio dos retratos do sistema */
}
.vinci__foto .micro{ margin-top:var(--s-18); }

/* Carrossel de logos.
   Cada marca e desenhada como MASCARA, nao como imagem: a forma vem do
   canal alfa do arquivo e a cor vem do background-color. Por isso da
   para pintar SVG e PNG de fontes diferentes com a mesma cor da
   identidade, e trocar essa cor no hover, coisa que <img> nao permite. */
.logos{
  margin-top:var(--s-60);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
/* Duas faixas em sentidos opostos. Mostra o dobro de marcas na mesma
   altura de tela e o movimento cruzado dá sensação de volume, que uma
   faixa só não dá. A de volta usa a MESMA animação com direction
   reverse: assim as duas correm exatamente na mesma velocidade. */
.logos__track{
  display:flex;
  width:max-content;
  animation:desfila 46s linear infinite;
}
.logos__track + .logos__track{ margin-top:clamp(20px,2.4vw,38px); }
.logos__track--volta{ animation-direction:reverse; }
/* Velocidade diferente por fileira. Sem isto, as duas que correm no
   mesmo sentido ficam sincronizadas e a repetição fica evidente. */
.logos__track:nth-child(1){ animation-duration:46s; }
.logos__track:nth-child(2){ animation-duration:58s; }
.logos__track:nth-child(3){ animation-duration:52s; }
.logos__track:nth-child(4){ animation-duration:64s; }
/* Cada bloco leva um espaco de sobra na direita igual ao vao interno.
   Assim os dois blocos tem exatamente a mesma largura e translateX(-50%)
   cai no pixel certo. Sem esse espaco, o laco pula meio vao a cada volta. */
.logos__set{
  display:flex; align-items:center;
  gap:var(--vao);
  padding-right:var(--vao);
}
.logos{ --vao:clamp(48px,6vw,96px); }
@keyframes desfila{ to{ transform:translateX(-50%); } }
.logos:hover .logos__track{ animation-play-state:paused; }

.marca{
  flex:none;
  display:block;
  width:clamp(96px,10vw,150px);
  height:clamp(34px,3.4vw,48px);
  background-color:var(--electric-iris);
  -webkit-mask-image:var(--logo);
          mask-image:var(--logo);
  -webkit-mask-size:contain;      mask-size:contain;
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-position:center;   mask-position:center;
  transition:background-color .35s ease, transform .35s ease;
}
.marca:hover{
  background-color:var(--saffron-spark);
  transform:translateY(-4px);
}

@media (prefers-reduced-motion:reduce){
  .logos__track{ animation:none; }
}

/* ------------------------------ LISTA ------------------------------ */
.list{ display:flex; flex-direction:column; gap:var(--s-24); }
.list li{
  font-size:var(--text-body);
  font-weight:var(--w-extralight);
  line-height:1.5;
  color:var(--silver-mist);
  padding-left:var(--s-24);
  position:relative;
  max-width:52ch;
}
.list li::before{
  content:''; position:absolute; left:0; top:.6em;
  width:7px; height:7px;
  background:var(--electric-iris);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.list--curta{ gap:var(--s-12); }
.list--curta li{ font-size:var(--text-caption); }
.list--curta li::before{ width:5px; height:5px; top:.55em; }

/* ------------------ Blocos em três ou quatro colunas ------------------ */
/* Sem card, sem borda, sem fundo. Só texto sobre o void. */
.trio{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--s-60) clamp(40px,5vw,96px);
  margin-top:var(--s-120);
}
.trio--quatro{ grid-template-columns:repeat(4,1fr); }
/* Sem bloco de título acima, o respiro já vem do padding da seção.
   Manter os 120px aqui abriria um vazio no meio da página. */
.trio--semTopo{ margin-top:0; }
.trio h3{ margin-bottom:var(--s-18); }
.trio .apoio{ max-width:38ch; }

.planos article{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-24); }
.planos .idx{ margin-bottom:0; }
.preco{
  font-size:var(--text-caption);
  font-weight:var(--w-extralight);
  color:var(--ash-gray);
}
.preco strong{
  display:block;
  font-size:var(--text-h-sm);
  font-weight:var(--w-regular);
  line-height:1.2;
  letter-spacing:-.04em;
  color:var(--bone-white);
  margin-top:var(--s-6);
}
.garantia{ margin-top:var(--s-96); max-width:64ch; }

/* ---------------------------- TRABALHOS ---------------------------- */
.works{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--s-96) clamp(30px,4vw,60px);
  margin-top:var(--s-120);
}
/* Janela do projeto.
   Os prints são páginas inteiras, de 2.000 a 4.000px de altura. A janela
   mostra só a primeira dobra; ao passar o cursor, a página percorre até
   o fim. O percurso é feito com object-position e não com transform ou
   margin: assim não é preciso saber a altura de cada print em pixel, o
   navegador resolve sozinho de "topo" a "base", em qualquer tamanho de
   tela. A duração vem do --dur de cada card, proporcional ao tamanho da
   página, para todas percorrerem mais ou menos na mesma velocidade. */
.work__janela{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--void);
  margin-bottom:var(--s-24);
}
.work__print{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
  transition:object-position var(--dur,9s) ease-in-out;
}
/* No desktop o percurso começa no hover. No toque, no clique, que liga
   a classe is-rolando pelo script. O card é um <button> e não um link
   justamente por isso: se fosse link, o toque abriria o WhatsApp em vez
   de percorrer a página. */
.work:hover .work__print,
.work:focus-visible .work__print,
.work.is-rolando .work__print{ object-position:center bottom; }

/* Reset de botão: o card precisa parecer conteúdo, não controle. */
.work{
  display:block; width:100%;
  padding:0; border:0; background:none;
  text-align:left; font:inherit; color:inherit;
  cursor:pointer;
}
.work__slot{
  position:absolute; z-index:1;
  font-size:var(--text-caption);
  font-weight:var(--w-extralight);
  color:#4a4a4a;
}
.work h3{
  font-size:var(--text-h-2xs);
  font-weight:var(--w-regular);
  line-height:1.25;
  letter-spacing:-.02em;
  transition:color .25s ease;
}
.work:hover h3{ color:var(--saffron-spark); }
.tag{
  display:block;
  margin-top:var(--s-6);
  font-size:var(--text-caption);
  font-weight:var(--w-extralight);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ash-gray);
}

/* ------------------------------ SOBRE ------------------------------ */
.about{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(40px,7vw,120px);
  align-items:center;
}
.about__photo{
  position:relative;
  aspect-ratio:3/4;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--void);
  display:grid; place-items:center;
}
.about__photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:58% 32%;   /* mantém o rosto no recorte 3:4 */
  position:relative; z-index:2;
}
.about__copy > * + *{ margin-top:var(--s-36); }
.about__copy .h-lg{ margin-top:0; }
.about__copy .lead:first-of-type{ margin-top:var(--s-36); }

/* Lista de clientes em texto. Prova social verificável: são os mesmos
   nomes do carrossel de logos, mas legíveis e indexáveis por busca. */
.label--semTopo{ margin-top:var(--s-96); }
.roster{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s-18) clamp(24px,3vw,60px);
}
.roster li{
  font-size:var(--text-body);
  font-weight:var(--w-extralight);
  line-height:1.4;
  color:var(--silver-mist);
}
@media (max-width:860px){ .roster{ grid-template-columns:repeat(2,1fr); } }

/* ------------------- Depoimentos em vídeo, formato stories -------------------
   Três cartões 9:16 na coluna direita. O escalonamento vertical é de
   propósito: três retângulos alinhados viram tabela, três desalinhados
   viram composição. O brilho violeta no fundo do slot vazio evita o
   buraco cinza que o espaço reservado seria sem ele.               */
.lead--depois{ margin-top:var(--s-36); }

.stories{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,22px);
  align-content:start;
}
.story{ margin:0; }
/* Alinhados. O escalonamento que existia aqui dava ritmo, mas com os
   cartoes maiores ele so desalinhava a leitura das legendas. */

.story__tela{
  position:relative;
  aspect-ratio:9/16;
  border-radius:var(--radius);
  overflow:hidden;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(128,82,255,.22), transparent 62%),
    radial-gradient(90% 70% at 50% 100%, rgba(21,132,110,.14), transparent 60%),
    #060606;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.story:hover .story__tela{ transform:translateY(-6px); }

.story-v{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:1;
}
.story__slot{
  position:absolute;
  bottom:var(--s-18);
  font-size:11px;
  font-weight:var(--w-extralight);
  letter-spacing:.04em;
  color:#4f4f4f;
  text-align:center;
  padding-inline:var(--s-12);
}

/* ---- Botão de play ----
   O aro pulsa e o brilho vem de duas sombras violetas sobrepostas: uma
   curta, que dá o corpo, e uma longa, que espalha a luz no preto. */
.story__play{
  position:absolute; inset:0;
  z-index:2;
  display:grid; place-items:center;
  cursor:pointer;
  opacity:.55;                       /* apagado enquanto não há vídeo */
  transition:opacity .3s ease;
}
.story.tem-video .story__play{ opacity:1; }

.story__aro{
  position:absolute;
  width:clamp(46px,4vw,62px);
  aspect-ratio:1;
  border-radius:var(--radius-full);
  background:var(--electric-iris);
  box-shadow:
    0 0 18px rgba(128,82,255,.75),
    0 0 46px rgba(128,82,255,.45),
    0 0 90px rgba(128,82,255,.22);
  animation:pulsoPlay 2.6s ease-in-out infinite;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.story__seta{
  position:relative;
  width:0; height:0;
  margin-left:5px;
  border-left:15px solid #fff;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.5));
  transition:opacity .3s ease;
}
@keyframes pulsoPlay{
  0%,100%{ box-shadow:0 0 18px rgba(128,82,255,.75), 0 0 46px rgba(128,82,255,.45), 0 0 90px rgba(128,82,255,.22); }
  50%    { box-shadow:0 0 26px rgba(128,82,255,.95), 0 0 72px rgba(128,82,255,.6),  0 0 130px rgba(128,82,255,.32); }
}
.story__play:hover .story__aro{ transform:scale(1.12); }

/* Tocando: o botão sai da frente de quem está falando. */
.story.is-tocando .story__aro,
.story.is-tocando .story__seta{ opacity:0; }
.story.is-tocando .story__aro{ animation:none; }

.story figcaption{
  margin-top:var(--s-18);
  display:flex; flex-direction:column; gap:2px;
}
.story figcaption strong{
  font-size:15px;
  font-weight:var(--w-regular);
  color:var(--bone-white);
}
.story figcaption span{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ash-gray);
}

/* CARTOES MAIORES.
   Duas fontes de largura, somadas:
   1. a coluna de texto vira largura fixa em vez de metade da linha, e
      todo o resto sobra para os cartoes
   2. a faixa sangra ate a borda da tela, recuperando o vao que o
      container centralizado deixava de fora. Em 1414px isso e 67px, em
      1920px sao 180px, entao o ganho cresce junto com o monitor.
   O titulo desta secao encolhe um pouco para caber na coluna estreita. */
@media (min-width:861px){
  #depoimentos .split{
    grid-template-columns:minmax(0,420px) 1fr;
    gap:var(--s-60) clamp(28px,3vw,52px);
    align-items:center;
  }
  #depoimentos .h-lg{ font-size:clamp(32px,4.2vw,56px); }
  #depoimentos .stories{
    margin-right:calc(-1 * max(0px, (100vw - var(--page-max)) / 2));
  }
}

/* No celular vira uma faixa que corre para o lado, como stories de
   verdade. Três colunas numa tela de 390px dariam cartões de 110px. */
@media (max-width:860px){
  .stories{
    margin-top:var(--s-60);
    display:flex;
    gap:var(--s-18);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:var(--s-12);
  }
  .stories::-webkit-scrollbar{ display:none; }
  .story{ flex:0 0 62vw; max-width:280px; scroll-snap-align:center; }
  .story:nth-child(2){ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .story__aro{ animation:none; }
}
/* --------------------------- DEPOIMENTOS --------------------------- */
.quotes{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--s-60) clamp(40px,5vw,96px);
  margin-top:var(--s-120);
}
.quotes blockquote{
  font-size:var(--text-h-2xs);
  font-weight:var(--w-regular);
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--bone-white);
}
.quotes figcaption{ margin-top:var(--s-24); }
.quotes figcaption strong{
  display:block;
  font-size:var(--text-body);
  font-weight:var(--w-regular);
  color:var(--bone-white);
}

/* ------------------------------- FAQ ------------------------------- */
.faq details{ padding-block:var(--s-24); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:var(--s-24);
  font-size:var(--text-h-2xs);
  font-weight:var(--w-regular);
  line-height:1.25;
  letter-spacing:-.02em;
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; margin-left:auto; flex:none;
  font-weight:var(--w-extralight);
  color:var(--electric-iris);
  transition:transform .3s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--saffron-spark); }
.faq details p{
  margin-top:var(--s-18);
  font-size:var(--text-body);
  font-weight:var(--w-extralight);
  line-height:1.5;
  color:var(--ash-gray);
  max-width:52ch;
}
.split__right.faq > * + *{ margin-top:0; }

/* ----------------------------- CTA FINAL ----------------------------- */
.cta{ display:flex; flex-direction:column; align-items:flex-start; }
.cta .lead{ margin-block:var(--s-36); max-width:52ch; }
.cta .micro{ margin-top:var(--s-24); }

/* ------------------------------ FOOTER ------------------------------ */
.footer{ padding-block:var(--s-96) var(--s-36); }
.footer__inner{
  display:grid; grid-template-columns:1.6fr 1fr 1fr;
  gap:var(--s-36) clamp(40px,5vw,96px);
  padding-bottom:var(--s-96);
  align-items:start;
}
.footer__inner .micro{ margin-top:var(--s-18); }
.footer__links{ display:flex; flex-direction:column; gap:var(--s-18); }
.footer__links a{
  font-size:var(--text-nav-label);
  font-weight:var(--w-semibold);
  letter-spacing:.025em;
  text-transform:uppercase;
  color:var(--ash-gray);
  transition:color .2s ease;
}
.footer__links a:hover{ color:var(--bone-white); }

/* CTA final com o ícone: o botão diz para onde leva antes de ser lido. */
.btn--wpp{ gap:10px; padding:18px 26px; font-size:15px; }
.btn--wpp svg{ width:20px; height:20px; flex:none; }

/* --------------------------- WhatsApp float --------------------------- */
.float-wpp{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:58px; height:58px; border-radius:var(--radius-full);
  background:var(--electric-iris); color:#fff;
  display:grid; place-items:center;
  transform:translateY(80px); opacity:0;
  transition:transform .4s ease, opacity .4s ease;
}
@media (max-width:640px){
  /* Acima do polegar e fora do caminho do CTA de rodapé. */
  .float-wpp{ right:16px; bottom:16px; width:54px; height:54px; }
}
.float-wpp.is-visible{ transform:none; opacity:1; }
.float-wpp:hover{ opacity:.82; }
.float-wpp svg{ width:26px; height:26px; }

/* ----------------------------- Reveal ----------------------------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------------------------- Responsivo ---------------------------- */
@media (max-width:1024px){
  /* A hero agora é cenário de tela cheia com o texto por cima, então
     o que precisa de ajuste no celular é o respiro, não a moldura. */
  .hero{ padding-top:clamp(96px,13vh,150px); padding-bottom:clamp(48px,7vh,90px); }
  .hero__copy .lead{ max-width:none; }
  .proof, .trio, .trio--quatro, .quotes, .works{ grid-template-columns:repeat(2,1fr); }
  .about{ grid-template-columns:1fr; }
  .about__photo{ max-width:320px; aspect-ratio:1/1; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:block; }
  .split{ grid-template-columns:1fr; gap:var(--s-36); }
  .trio, .works, .quotes{ margin-top:var(--s-60); }
}
@media (max-width:640px){
  .trio, .trio--quatro, .quotes, .works{ grid-template-columns:1fr; }
  /* No celular o card ocupa a largura toda, então vale mostrar mais
     página: a janela passa de 4:3 para 3:4 e o print aparece bem mais. */
  .work__janela{ aspect-ratio:3/4; }
  /* Números seguem em duas colunas: empilhados em uma, viram uma lista
     longa e perdem a leitura de "barra de prova" batida de uma vez. */
  .proof{ grid-template-columns:repeat(2,1fr); gap:var(--s-36) var(--s-24); }
  .proof__num{ font-size:clamp(38px,11vw,52px); }
  .hero__actions{ gap:var(--s-24); }
  .footer__inner{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* Foco acessível */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--saffron-spark);
  outline-offset:4px;
  border-radius:6px;
}