/* =================================================================
   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);
}

/* ------------------------------ 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;
  overflow-x:hidden;
}
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;
}
body > *:not(#ambient){ 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; }
.nav.is-scrolled{ background:var(--void); }
.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);
}
/* 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:32px; height:32px; }
.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 ------------------------------ */
.hero{ padding-top:clamp(120px,16vh,180px); padding-bottom:var(--s-60); }
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s-60);
  align-items:center;
}
.hero__copy .lead{ margin-top:var(--s-36); max-width:480px; }
.hero__actions{
  display:flex; align-items:center; gap:var(--s-36);
  margin-top:var(--s-36); flex-wrap:wrap;
}
.hero__visual{ position:relative; aspect-ratio:1/1; }
#constellation{ position:absolute; inset:0; width:100%; height:100%; }

/* 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{ 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; }
}

/* -------------------------- 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(24px,3vw,44px); }
.logos__track--volta{ animation-direction:reverse; }
/* 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 --------------------------- */
.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){
  /* Zero de topo: o banner sobe até embaixo do menu e a primeira dobra
     vira imagem inteira. O menu é transparente e fica por cima, sobre a
     área escura do banner, então continua legível. */
  .hero{ padding-top:0; }
  .hero__grid{ grid-template-columns:1fr; gap:var(--s-30); }
  /* Proporção do próprio banner vertical (689x842), para ele aparecer
     inteiro, sem corte. max-height em min() evita que domine telas
     baixas e empurre o título para fora da primeira dobra. */
  /* Sangra a largura toda da tela, saindo da margem do container, e usa
     altura em vh em vez de proporção: assim o banner preenche a primeira
     dobra em qualquer aparelho, em vez de ficar uma figura no meio. */
  .hero__visual{
    order:-1;
    aspect-ratio:auto;
    height:min(68vh, 640px);
    width:100vw;
    margin-left:calc(50% - 50vw);
  }
  /* O banner já vem composto e centralizado, então não precisa de
     deslocamento nem de máscara lateral. Só a base dissolve, para
     emendar no preto antes do rótulo. */
  .hero__foto{
    --foto-zoom:100%;
    --foto-x:0%;
    --foto-y:0%;
    /* cover, não contain: preencher exige cortar as sobras */
    object-fit:cover;
    object-position:center 22%;
    /* Sangrando de borda a borda, só topo e base precisam dissolver.
       A base é a que importa: é a emenda com o título. */
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 9%, #000 66%, transparent 100%);
            mask-image:linear-gradient(to bottom, transparent 0%, #000 9%, #000 66%, transparent 100%);
  }
  .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;
}