/* GERADO por ferramentas/construir.py — não edite aqui.
   Edite assets/css/base.css, assets/css/site.css e rode o script de novo. */

/* ===== assets/css/base.css ===== */
/* ==========================================================================
   Base extraída de terascape.framer.website
   Tokens, escala tipográfica, primitivas de layout e motion.
   Valores medidos no site em execução.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTES
   Inter Display é o corte de display do Inter v4.
   Opção A (fiel): arquivos InterDisplay de rsms.me/inter, auto-hospedados.
   Opção B (prática): Inter variável do Google Fonts com optical sizing.
   -------------------------------------------------------------------------- */
/* A fonte entra por <link> no <head> do index.html: @import bloqueia a
   renderização e custa uma viagem a mais. A família é a mesma. */

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Tipografia */
  --font-sans: "Inter Display", "Inter", "Inter reserva", "Inter reserva win", -apple-system, sans-serif;
  --font-features: "cv03" on, "cv04" on, "cv09" on, "cv11" on;

  /* Texto */
  --text-primary:      #333333;
  --text-secondary:    #595959;   /* era #808080: 3,9:1 reprovava no contraste */
  --text-muted:        rgba(0, 0, 0, .58);  /* era .3: 2,1:1 reprovava no contraste */
  --text-strong:       #000000;
  --text-invert:       #ffffff;
  --text-invert-soft:  rgba(255, 255, 255, .8);

  /* Superfícies */
  --bg:                #ffffff;
  --bg-alt:            #f5f5f5;
  --bg-warm:           #faf9f5;
  --bg-card:           rgba(0, 0, 0, .04);
  --bg-cool:           #ebf2f8;
  --glass:             rgba(255, 255, 255, .6);
  --glass-strong:      rgba(255, 255, 255, .7);
  --glass-blur:        blur(5px);

  /* Linhas */
  --line:              rgba(0, 0, 0, .16);
  --line-soft:         rgba(0, 0, 0, .1);
  --line-faint:        rgba(0, 0, 0, .06);
  --line-invert:       rgba(255, 255, 255, .4);
  --underline:         #efeeec;

  /* Overlays sobre imagem */
  --scrim-sky:         rgba(30, 50, 79, .2);
  --scrim-flat:        rgba(0, 0, 0, .2);
  --scrim-bottom:      linear-gradient(rgba(11, 20, 34, 0) 0%, rgba(10, 19, 33, .2) 100%);

  /* Acento (declarado no original, mas não usado na UI) */
  --accent:            #ff462e;
  --blue-500:          #4e8bbf;
  --blue-600:          #3a6e9c;
  --blue-100:          #d6ecff;
  --cyan-100:          #a6ecff;
  --slate-500:         #64748b;

  /* Layout */
  --container:         1400px;
  --gutter:            40px;
  --header-h:          80px;
  --sticky-top:        132px;
  --radius:            4px;

  /* Ritmo vertical */
  --section-y:         184px;   /* era 120, depois 152 */
  --gap-xl:            80px;
  --gap-l:             60px;
  --gap-m:             48px;
  --gap-s:             32px;
  --gap-xs:            20px;
  --gap-2xs:           12px;

  /* Curvas — as três do site */
  --ease-reveal:       cubic-bezier(0.6, 0.4, 0, 1);   /* wipes de clip-path */
  --ease-enter:        cubic-bezier(0.8, 0.2, 0, 1);   /* entradas e fades   */
  --ease-ui:           cubic-bezier(0.4, 0, 0.2, 1);   /* micro-interação    */
  --ease-spring:       cubic-bezier(0.5, 0, 0.1, 1);   /* aprox. do spring   */
  --ease-input:        cubic-bezier(.44, 0, .56, 1);

  /* Durações */
  --dur-reveal:        1300ms;
  --dur-enter:         400ms;
  --dur-fade:          2000ms;
  --dur-spring:        900ms;
  --dur-ui:            300ms;
  --stagger:           100ms;

  /* Parallax */
  --parallax-hero:     0.30;
  --parallax-image:    0.16;

  /* Escala tipográfica — desktop */
  --fs-display-xl: 92px;  --lh-display-xl: 96px;  --ls-display-xl: -0.3px;
  --fs-display-l:  64px;  --lh-display-l:  72px;  --ls-display-l:  -1.1px;
  --fs-display-m:  52px;  --lh-display-m:  64px;  --ls-display-m:  -1px;
  --fs-heading-l:  40px;  --lh-heading-l:  52px;  --ls-heading-l:  -0.6px;
  --fs-heading-m:  28px;  --lh-heading-m:  38px;  --ls-heading-m:  -0.1px;
  --fs-heading-s:  20px;  --lh-heading-s:  26px;  --ls-heading-s:  -0.1px;
  --fs-body-l:     16px;  --lh-body-l:     22px;  --ls-body-l:      0px;   /* era 18/24 */
  --fs-body-m:     16px;  --lh-body-m:     20px;  --ls-body-m:      0px;
  --fs-label:      14px;  --lh-label:      18px;  --ls-label:       0.2px;
  --fs-caption:    12px;  --lh-caption:    14px;  --ls-caption:     0.1px;
}

@media (max-width: 1199px) {
  :root {
    --section-y: 136px; --gutter: 32px;
    --fs-display-xl: 62px; --lh-display-xl: 66px; --ls-display-xl: -1px;
    --fs-display-l:  54px; --lh-display-l:  64px; --ls-display-l:  -0.8px;
    --fs-display-m:  34px; --lh-display-m:  42px; --ls-display-m:  -0.6px;
    --fs-heading-l:  28px; --lh-heading-l:  38px; --ls-heading-l:  -0.3px;
    --fs-heading-m:  24px; --lh-heading-m:  32px; --ls-heading-m:  -0.2px;
    --fs-heading-s:  18px; --lh-heading-s:  26px; --ls-heading-s:   0px;
    --fs-body-l:     16px; --lh-body-l:     24px;
    --fs-body-m:     15px; --lh-body-m:     20px; --ls-body-m:      0.1px;
    --fs-label:      12px;
    --fs-caption:    13px;
  }
}

@media (max-width: 809px) {
  :root {
    --section-y: 104px; --gutter: 20px;
    --gap-xl: 48px; --gap-l: 40px; --gap-m: 32px;
    --fs-display-xl: 52px; --lh-display-xl: 52px; --ls-display-xl: -0.5px;
    --fs-display-l:  32px; --lh-display-l:  40px; --ls-display-l:  -0.4px;
    --fs-display-m:  28px; --lh-display-m:  36px; --ls-display-m:  -0.3px;
    --fs-heading-l:  24px; --lh-heading-l:  32px; --ls-heading-l:  -0.2px;
    --fs-heading-m:  20px; --lh-heading-m:  28px; --ls-heading-m:  -0.1px;
    --fs-heading-s:  16px; --lh-heading-s:  24px;
    --fs-body-l:     14px; --lh-body-l:     20px;
    --fs-body-m:     14px; --lh-body-m:     18px; --ls-body-m:      0.1px;
    --fs-caption:    10px;
  }
}

/* --------------------------------------------------------------------------
   A INTER, HOSPEDADA AQUI

   Vinha do Google Fonts, e em 4G lento demorava 6,3s para chegar: o
   navegador precisa abrir conexão com dois servidores e fazer duas idas e
   voltas antes de começar a baixar o arquivo. Agora ela vem do mesmo
   servidor do site, comprimida, e o <head> pede o arquivo latino com
   prioridade.

   É a fonte variável: um arquivo só cobre todos os pesos de 100 a 900. O
   latin-ext só é baixado se aparecer na página uma letra que não exista no
   latin — em português isso não acontece, então na prática são 71KB.

   Baixada de fonts.gstatic.com em 11/09/2026. Licença SIL Open Font 1.1.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   FONTE DE RESERVA COM AS MEDIDAS DA INTER

   A Inter vem do Google Fonts, então nos primeiros instantes o texto é
   desenhado com a fonte do sistema. No Mac ela é 6,6% mais estreita que a
   Inter; no Windows, 6% mais larga. Quando a Inter chega, tudo se
   reorganiza — no site publicado isso valia 0,21 de CLS, o dobro do limite
   que o Google considera aceitável.

   Estas duas faces são a fonte do sistema esticada ou encolhida para ocupar
   exatamente o espaço da Inter. Os valores foram medidos, não chutados: uma
   frase de 76 letras em 100px, com e sem Inter.

   A primeira resolve no Mac (Helvetica Neue), a segunda no Windows e no
   Android (Arial, Segoe UI, Roboto). Onde nenhuma existir, cai no
   sans-serif de sempre.

   Os números saem de medir a mesma frase nas duas fontes, em 28, 52 e 92px:
   as do sistema são de 4% a 6% mais largas que a Inter. O ajuste as deixa
   uns 2% mais estreitas, de propósito — reserva mais larga empurra uma
   palavra para a linha seguinte, e foi assim que a hera ganhou uma quarta
   linha e pulou 36px quando a Inter chegou.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Inter reserva";
  src:local("Helvetica Neue"), local("HelveticaNeue");
  size-adjust:94%;
  font-weight:100 900;
  font-style:normal;
}
@font-face{
  font-family:"Inter reserva win";
  src:local("Arial"), local("Segoe UI"), local("Roboto");
  size-adjust:93%;
  font-weight:100 900;
  font-style:normal;
}

/* --------------------------------------------------------------------------
   3. RESET MÍNIMO + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  font-weight: 300;   /* era 400: uma casa mais fina em toda a página */
  font-feature-settings: var(--font-features);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
/* height:auto é obrigatório: as imagens levam os atributos width e height
   no HTML, e sem isso o navegador usa a altura do atributo enquanto o
   max-width encolhe a largura — a arte sai esticada */
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; font-weight: 300; }   /* era 400 */

/* --------------------------------------------------------------------------
   4. ESCALA TIPOGRÁFICA
   -------------------------------------------------------------------------- */
.t-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); }
.t-display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-display-l);  letter-spacing: var(--ls-display-l); }
.t-display-m  { font-size: var(--fs-display-m);  line-height: var(--lh-display-m);  letter-spacing: var(--ls-display-m); }
.t-heading-l  { font-size: var(--fs-heading-l);  line-height: var(--lh-heading-l);  letter-spacing: var(--ls-heading-l); }
.t-heading-m  { font-size: var(--fs-heading-m);  line-height: var(--lh-heading-m);  letter-spacing: var(--ls-heading-m); }
.t-heading-s  { font-size: var(--fs-heading-s);  line-height: var(--lh-heading-s);  letter-spacing: var(--ls-heading-s); }
.t-body-l     { font-size: var(--fs-body-l);     line-height: var(--lh-body-l); }
.t-body-m     { font-size: var(--fs-body-m);     line-height: var(--lh-body-m);     letter-spacing: var(--ls-body-m); }
.t-label      { font-size: var(--fs-label);      line-height: var(--lh-label);      letter-spacing: var(--ls-label); font-weight: 400; }
.t-caption    { font-size: var(--fs-caption);    line-height: var(--lh-caption);    letter-spacing: var(--ls-caption); }

.t-muted   { color: var(--text-muted); }
.t-second  { color: var(--text-secondary); }
.t-invert  { color: var(--text-invert); }

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.section {
  padding: var(--section-y) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
}
.section--wide { gap: var(--gap-xl); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; }

.site-header {
  position: fixed; inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter);
  z-index: 4;
}

/* Assinatura do template: eyebrow à esquerda, régua no meio, headline à direita */
.section-head {
  display: flex; align-items: baseline; gap: var(--gap-s);
  width: 100%; max-width: var(--container); margin-inline: auto;
}
.section-head .rule { flex: 1; height: 1px; background: var(--line); }
.section-head .title { text-align: right; }

.eyebrow {
  font-size: var(--fs-label); line-height: var(--lh-label);
  letter-spacing: var(--ls-label); font-weight: 400;
  text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap;
}

/* Painel de vidro do CTA final */
.glass-panel {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius);
  padding: var(--gutter);
  display: flex; flex-direction: column; gap: var(--gap-m);
}

/* Janela de parallax */
.parallax-window { position: relative; overflow: hidden; border-radius: var(--radius); }
.parallax-window > img,
.parallax-window > .parallax-media {
  width: 100%; height: 220%; object-fit: cover;
  position: absolute; top: -60%; left: 0;
  will-change: transform;
}
.scrim-bottom { position: absolute; inset: 0; background: var(--scrim-bottom); pointer-events: none; }

/* Card do Process */
.process-card {
  position: sticky; top: var(--sticky-top);
  background: var(--bg-card); border-radius: var(--radius);
  padding: var(--gap-s); display: flex; flex-direction: column; gap: var(--gap-l);
}
.process-card:nth-child(2) { margin-top: 25px; }
.process-card:nth-child(3) { margin-top: 50px; }

/* --------------------------------------------------------------------------
   6. MOTION — estados iniciais e revelados
   As classes .is-in são adicionadas pelo terascape-motion.js
   -------------------------------------------------------------------------- */

/* 6.1 Wipe de máscara — a assinatura de motion do site (1300ms) */
[data-reveal] {
  transition: clip-path var(--dur-reveal) var(--ease-reveal);
  will-change: clip-path;
}
[data-reveal="up"]     { clip-path: inset(0% 0% 100% 0%); }   /* texto: de baixo p/ cima */
[data-reveal="right"]  { clip-path: inset(0% 0% 0% 100%); }   /* imagem: esq. p/ dir.    */
[data-reveal="center"] { clip-path: inset(100%); }            /* card: centro p/ fora    */
[data-reveal].is-in    { clip-path: inset(0%); }

/* 6.2 Fade + subida com spring (usado no bloco de apoio do hero) */
[data-rise] {
  opacity: 0; transform: translateY(30px);
  transition: opacity var(--dur-spring) var(--ease-spring),
              transform var(--dur-spring) var(--ease-spring);
  will-change: transform, opacity;
}
[data-rise].is-in { opacity: 1; transform: none; }

/* 6.3 Fade com stagger de 100ms — parágrafos longos, listas, logos */
[data-stagger] > * {
  opacity: 0;
  transition: opacity var(--dur-fade) var(--ease-enter);
}
[data-stagger].is-in > *            { opacity: 1; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: 100ms; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: 200ms; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: 300ms; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: 400ms; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: 500ms; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: 600ms; }
[data-stagger].is-in > *:nth-child(n+8) { transition-delay: 700ms; }

/* 6.4 Abertura da página */
@keyframes ts-nav-in {
  from { opacity: 0; transform: translateY(-150px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ts-pop-in {
  from { transform: scale(0); }
  to   { transform: none; }
}
.site-header {
  animation: ts-nav-in var(--dur-enter) var(--ease-enter) 400ms both;
}
.pop-in { animation: ts-pop-in 800ms var(--ease-spring) 80ms both; }

/* --------------------------------------------------------------------------
   7. COMPONENTES INTERATIVOS
   -------------------------------------------------------------------------- */

/* 7.1 Link de texto: sublinhado desliza da esquerda + ícone gira */
.link-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 0;
  font-size: var(--fs-body-l); line-height: var(--lh-body-l);
  overflow: hidden;
}
.link-btn::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: translateX(-101%);
  transition: transform var(--dur-spring) var(--ease-spring);
}
.link-btn:hover::after { transform: none; }
.link-btn .icon {
  display: inline-block;
  transition: transform 200ms var(--ease-enter);
}
.link-btn:hover .icon { transform: rotate(90deg); }

/* 7.2 Botão sólido */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 6px 20px; border-radius: var(--radius);
  background: var(--bg); color: var(--text-primary);
  font-size: var(--fs-body-m); line-height: var(--lh-body-m);
  transition: background var(--dur-ui) var(--ease-input),
              box-shadow var(--dur-ui) var(--ease-input);
}
.btn:hover { background: var(--bg-alt); }

/* 7.3 Roll 3D do botão de menu */
.roll-3d { position: relative; display: inline-block; overflow: clip; }
.roll-3d > span { display: block; transition: transform 300ms var(--ease-enter); }
.roll-3d > .bottom {
  position: absolute; inset: 0;
  transform: perspective(500px) rotate(-14deg) rotateY(40deg);
  transform-origin: left center;
}
.roll-3d:hover > .top    { transform: perspective(500px) rotate(14deg) rotateY(-40deg); }
.roll-3d:hover > .bottom { transform: none; }

/* 7.4 Input de newsletter */
.field {
  width: 100%; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; padding: 12px 4px;
  font-family: var(--font-sans); font-size: var(--fs-body-m);
  line-height: 140%; letter-spacing: .2px; color: var(--text-primary);
  transition: all var(--dur-ui) var(--ease-input);
}
.field:focus { outline: 0; border-bottom-color: var(--text-primary); }

/* 7.5 Carrossel arrastável */
.drag-row { display: flex; gap: 14px; cursor: grab; user-select: none; will-change: transform; }
.drag-row.is-dragging { cursor: grabbing; }

/* --------------------------------------------------------------------------
   8. ACESSIBILIDADE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { clip-path: none !important; }
  [data-rise]   { opacity: 1 !important; transform: none !important; }
  [data-stagger] > * { opacity: 1 !important; }
  .parallax-window > img { transform: none !important; }
}

/* ===== assets/css/site.css ===== */
/* ==========================================================================
   mauriciopola.com.br — componentes
   Escrito sobre base.css (sistema Terascape).
   Regras herdadas que não se quebram aqui:
     · uma família só, peso 400. 500 apenas em label e UI de 14px.
     · um raio só: 4px. Sem sombra.
     · neutros mais a cor das fotografias. Sem cor de acento na interface.
     · hover não muda cor: move sublinhado, gira ícone, vira texto em 3D.
   ========================================================================== */

/* ---------- 1. Utilidades ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip{
  position:fixed; left:var(--gutter); top:-100px; z-index:20;
  background:var(--text-primary); color:var(--text-invert);
  padding:10px 18px; border-radius:var(--radius);
  font-size:var(--fs-caption); letter-spacing:var(--ls-caption);
  transition:top var(--dur-ui) var(--ease-ui);
}
.skip:focus{ top:16px; }

:focus-visible{ outline:2px solid var(--text-primary); outline-offset:3px; }

/* laranja de marca: uma palavra da hero, os hovers de serviço e o card
   do processo quando ele se sobrepõe. Fora isso, a página é neutra. */
:root{
  --brand: #F98010;
  /* o mesmo laranja escurece quando vira texto sobre fundo claro: #F98010
     sobre branco dá 2,6:1 e reprova até no tamanho grande */
  --brand-ink: #E65C00;
}
.accent{ color:var(--brand-ink); }

/* ---------- 2. Placeholder de imagem ----------
   Some junto com a tag <img> que entrar no lugar. */
.ph{
  position:relative; width:100%;
  background:var(--bg-alt);
  box-shadow:inset 0 0 0 1px var(--line-faint);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
}
.ph__tag{
  font-size:10px; line-height:14px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--text-muted);
  padding:4px 8px; max-width:88%;
  overflow-wrap:anywhere; text-align:center;
}
.ph--1x1{aspect-ratio:1/1}   .ph--4x5{aspect-ratio:4/5}
.ph--3x4{aspect-ratio:3/4}   .ph--2x3{aspect-ratio:2/3}
.ph--4x3{aspect-ratio:4/3}   .ph--16x9{aspect-ratio:16/9}
.ph--9x16{aspect-ratio:9/16}

/* ---------- 3. Header ---------- */
.site-header__id{ display:flex; align-items:center; gap:16px; }
.site-header__logo{ font-size:var(--fs-body-m); line-height:var(--lh-body-m); }
.site-header__sep{ width:1px; height:28px; background:var(--line); }

.site-header__nav{ display:flex; align-items:center; gap:24px; }
.site-header__quiet{ color:var(--text-secondary); transition:color var(--dur-ui) var(--ease-ui); }
.site-header__quiet:hover{ color:var(--text-primary); }

.menu-btn{
  background:none; border:0; padding:0; cursor:pointer;
  color:inherit; font-family:inherit;
  font-size:var(--fs-body-m); line-height:var(--lh-body-m);
  height:var(--lh-body-m);
}

/* ---------- 4. Menu ---------- */
.menu-scrim{
  position:fixed; inset:0; z-index:8;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity var(--dur-ui) var(--ease-ui);
}
.menu-scrim.is-on{ opacity:1; }

.menu{
  position:fixed; top:0; right:0; bottom:0; z-index:9;
  width:min(460px,92vw);
  background:var(--bg);
  border-left:1px solid var(--line-soft);
  padding:calc(var(--header-h) + 40px) var(--gutter) var(--gutter);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--gap-l);
  clip-path:inset(0% 0% 0% 100%);
  transition:clip-path var(--dur-reveal) var(--ease-reveal);
  overflow-y:auto;
}
.menu.is-open{ clip-path:inset(0%); }

.menu__list{ display:flex; flex-direction:column; }
.menu__list a{
  display:flex; align-items:baseline; gap:20px;
  padding:10px 0;
  border-bottom:1px solid var(--line-faint);
  opacity:0; transform:translateY(20px);
  transition:opacity var(--dur-spring) var(--ease-spring),
             transform var(--dur-spring) var(--ease-spring);
}
.menu.is-open .menu__list a{ opacity:1; transform:none; }
.menu.is-open .menu__list a:nth-child(1){ transition-delay:200ms; }
.menu.is-open .menu__list a:nth-child(2){ transition-delay:260ms; }
.menu.is-open .menu__list a:nth-child(3){ transition-delay:320ms; }
.menu.is-open .menu__list a:nth-child(4){ transition-delay:380ms; }
.menu.is-open .menu__list a:nth-child(5){ transition-delay:440ms; }
.menu.is-open .menu__list a:nth-child(6){ transition-delay:500ms; }
.menu.is-open .menu__list a:nth-child(7){ transition-delay:560ms; }
.menu__num{ color:var(--text-muted); width:44px; flex:none; }

.menu__foot{ display:flex; flex-direction:column; gap:var(--gap-xs); }
.menu__links{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }

/* ---------- 5. Hero ---------- */
.hero{
  /* o texto precisa de ar entre ele e a barra do topo */
  padding:calc(var(--header-h) + 128px) var(--gutter) var(--gutter);
  display:flex; flex-direction:column; gap:var(--gap-l);
}
.hero__type{
  width:100%; max-width:var(--container); margin-inline:auto;
  display:flex; flex-direction:column; gap:var(--gap-s);
}
.hero__claim{ max-width:none; }

.hero__stage{
  width:100%; max-width:var(--container); margin-inline:auto;
  display:flex; flex-direction:column; gap:var(--gap-2xs);
}
/* A hero é o maior elemento da primeira tela, e o Google mede o site pelo
   instante em que ela termina de aparecer. O wipe dela era feito pelo
   motion.js, então só começava quando o JavaScript terminava de baixar: no
   telefone, 3,4s. Aqui ele é uma animação de CSS, que roda no primeiro
   quadro. Mesmo desenho, sem depender de script. O resto da página continua
   revelando pelo motion.js, em 1300ms. */
.hero__stage{ animation:hero-wipe 620ms var(--ease-reveal) both; }
@keyframes hero-wipe{
  from{ clip-path:inset(0 100% 0 0); }
  to  { clip-path:inset(0 0 0 0); }
}

.hero__support{
  display:grid; grid-template-columns:200px minmax(0,1fr) auto;
  align-items:start; gap:var(--gap-s);
  padding-top:var(--gap-xs); border-top:1px solid var(--line-faint);
}
.hero__lead{ max-width:60ch; }

/* ---------- 7. Trabalhos ---------- */
/* o título abre a seção pela esquerda; a régua leva o olho até o eyebrow */
.section-head .title{ text-align:left; }
.section-head .eyebrow{ text-align:right; }

.works__meta{
  display:flex; flex-wrap:wrap; gap:var(--gap-s);
  padding-bottom:var(--gap-xs); margin-bottom:var(--gap-s);
  border-bottom:1px solid var(--line-faint);
}

.wall{ column-count:6; column-gap:12px; }
.piece{ break-inside:avoid; display:inline-block; width:100%; margin:0 0 12px; }

/* Entrada da parede. Sem clip-path aqui de propósito: a peça precisa
   subir e sair do desfoque, e máscara não faz isso. É também o que
   destrava o IntersectionObserver, que o clip-path zeraria. */
.js .piece{
  opacity:0;
  transform:translateY(140px);
  filter:blur(10px);
}
.js .piece.is-in{
  opacity:1;
  transform:none;
  filter:blur(0);
  /* power3.out */
  transition:opacity 800ms cubic-bezier(.215,.61,.355,1),
             transform 800ms cubic-bezier(.215,.61,.355,1),
             filter 800ms cubic-bezier(.215,.61,.355,1);
}
.piece__btn{
  display:block; width:100%; padding:0; margin:0;
  background:none; border:0; cursor:pointer;
  border-radius:var(--radius); overflow:hidden;
  transform:scale(1);
  transition:opacity var(--dur-ui) var(--ease-ui),
             transform 300ms cubic-bezier(.25,.46,.45,.94);
}
.piece__btn img,
.piece__btn .ph{
  border-radius:0;
  transition:transform 500ms var(--ease-enter);
}
.piece__btn:hover,
.piece__btn:focus-visible{ transform:scale(.95); }

.wall.has-active .piece:not(.is-active) .piece__btn{ opacity:.4; }
.piece.is-active .piece__btn{ box-shadow:0 0 0 1px var(--text-primary); }

/* ---------- 8. Ficha do projeto ---------- */
.ficha{
  position:fixed; z-index:12;
  right:var(--gutter); bottom:var(--gutter);
  width:min(280px,calc(100vw - var(--gutter) * 2));
  background:var(--glass-strong);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  border-radius:var(--radius);
  padding:20px;
  clip-path:inset(100%);
  transition:clip-path 600ms var(--ease-reveal);
}
.ficha.is-on{ clip-path:inset(0%); }
.ficha__close{
  position:absolute; top:12px; right:12px;
  background:none; border:0; padding:4px; cursor:pointer;
  color:var(--text-muted); font-family:inherit;
  transition:color var(--dur-ui) var(--ease-ui);
}
.ficha__close:hover{ color:var(--text-primary); }
.ficha__name{ margin:0 0 12px; padding-right:52px; }
.ficha__dl{ margin:0; display:flex; flex-direction:column; }
.ficha__dl > div{
  display:flex; justify-content:space-between; gap:12px;
  padding:7px 0; border-top:1px solid var(--line-faint);
}
.ficha__dl dt, .ficha__dl dd{ margin:0; }
.ficha__dl dd{ text-align:right; }

/* ---------- 9. Serviços ---------- */
.list{ list-style:none; margin:0; padding:0; }
.list li{
  display:grid; grid-template-columns:minmax(0,1fr) 220px;
  align-items:baseline; gap:var(--gap-s);
  padding:24px 0; border-top:1px solid var(--line-faint);
}
.list li:last-child{ border-bottom:1px solid var(--line-faint); }
.list__note{ text-align:right; }

/* ---------- 10. Processo ---------- */
.process{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:var(--gap-m);
  align-items:start;
}
.process__intro{ position:sticky; top:var(--sticky-top); }
.process__intro p{ max-width:36ch; }
.process__stack{ display:flex; flex-direction:column; gap:var(--gap-l); padding-bottom:var(--gap-xl); }
.process-card{
  background:var(--bg-alt);
  /* altura fixa: com min-height cada card ficava de um tamanho, e a pilha
     perdia o alinhamento das bordas ao empilhar */
  height:clamp(300px,38vh,360px);
  justify-content:space-between;
  overflow:hidden;
}
/* cada um gruda 26px abaixo do anterior: é assim que a pilha aparece
   como pilha, com a borda dos de baixo à mostra */
.process-card:nth-child(1){ top:var(--sticky-top); margin-top:0; }
.process-card:nth-child(2){ top:calc(var(--sticky-top) + 26px); margin-top:0; }
.process-card:nth-child(3){ top:calc(var(--sticky-top) + 52px); margin-top:0; }
.process-card__head{ display:flex; flex-direction:column; gap:var(--gap-xs); }
.process-card__head p{ max-width:46ch; }
.process-card__num{ align-self:flex-end; line-height:1; }

/* ---------- 11. Praças ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-faint);
}
.stat{
  display:flex; flex-direction:column; gap:8px;
  padding:24px 0 24px 24px;
  border-left:1px solid var(--line-faint);
}
.stat:first-child{ border-left:0; padding-left:0; }
.stat__n{ color:var(--text-strong); }

.lugares{
  list-style:none; margin:var(--gap-m) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-faint);
}
.lugares li{
  padding:20px 0 20px 24px;
  border-left:1px solid var(--line-faint);
  border-bottom:1px solid var(--line-faint);
  color:var(--text-secondary);
}
.lugares li:nth-child(4n+1){ border-left:0; padding-left:0; }

/* ---------- 12. Sobre ---------- */
.about{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--gap-xl);
  align-items:start;
}
.about__figure{ margin:0; display:flex; flex-direction:column; gap:14px; }
.about__cap{ display:flex; justify-content:space-between; gap:16px; }
.about__portrait{ aspect-ratio:.9; }
.about__text{ display:flex; flex-direction:column; gap:var(--gap-s); max-width:56ch; }
.about__text p{ line-height:1.65; }
/* a primeira frase carrega a coluna: sem ela o texto não segura a foto */
.about__text .t-heading-m{ letter-spacing:-.02em; }
/* três linhas fixas: cada frase é uma linha, e a coluna solta a largura
   para a primeira caber inteira. Em tela estreita volta a quebrar solto. */
.about__lead{ line-height:1.3 !important; width:max-content; max-width:none; }
.about__lead > span{ display:block; white-space:nowrap; }
@media (max-width:1199px){
  .about__lead{ width:auto; }
  .about__lead > span{ display:inline; white-space:normal; }
}

/* ---------- 13. Depoimentos ---------- */
.quotes{ display:flex; flex-direction:column; }
.quote{
  margin:0; padding:40px 0;
  border-top:1px solid var(--line-faint);
  display:grid; grid-template-columns:minmax(0,1fr) 260px;
  gap:var(--gap-l); align-items:start;
}
.quote:last-child{ border-bottom:1px solid var(--line-faint); }
.quote blockquote{ margin:0; max-width:62ch; font-size:clamp(16px,1.25vw,19px); line-height:1.6; font-weight:300; letter-spacing:-.005em; }
.quote figcaption{ display:flex; flex-direction:column; gap:4px; padding-top:3px; }

/* ---------- 15. Rodapé ---------- */
.foot{ padding:48px var(--gutter) 20px; }
.foot__word{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin-bottom:var(--gap-xl);
}

.foot__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--gap-s);
  padding-top:24px; border-top:1px solid var(--line-faint);
}
.foot__col{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.foot__col .eyebrow{ margin-bottom:8px; }
.foot__bar{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;
  margin-top:28px; padding-top:var(--gap-xs);
  border-top:1px solid var(--line-faint);
}

/* ---------- 16. Responsivo ---------- */
@media (max-width:1400px){ .wall{ column-count:5; } }
@media (max-width:1199px){
  .wall{ column-count:4; }
  .hero__support{ grid-template-columns:160px minmax(0,1fr); }
  .hero__support .link-btn{ grid-column:2; justify-self:start; }
  .process{ grid-template-columns:1fr; }
  .process__intro{ position:static; }
  .list li{ grid-template-columns:minmax(0,1fr) 180px; }
  .quote{ grid-template-columns:minmax(0,1fr) 200px; gap:var(--gap-m); }
}
@media (max-width:809px){
  .wall{ column-count:2; }
  .site-header__id p{ display:none; }
  .site-header__sep{ display:none; }
  .site-header__quiet{ display:none; }
  .hero__support{ grid-template-columns:1fr; }
  .hero__support .link-btn{ grid-column:1; }
  .about{ grid-template-columns:1fr; }
  .list li{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .list__note{ text-align:left; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line-faint); }
  .lugares{ grid-template-columns:repeat(2,1fr); }
  .lugares li:nth-child(odd){ border-left:0; padding-left:0; }
  .quote{ grid-template-columns:1fr; gap:20px; }
  .quote figcaption{ padding-top:0; }
  .foot__grid{ grid-template-columns:1fr; gap:var(--gap-m); }
  .ficha{ right:12px; left:12px; bottom:12px; width:auto; }
}

/* ---------- 17. Ajuste do roll 3D ----------
   No base o texto de baixo só gira, e fica visível por trás do de cima.
   Ele precisa começar fora da caixa de recorte e subir na virada. */
.roll-3d{ height:var(--lh-body-m); }
.roll-3d > .top,
.roll-3d > .bottom{ transform-origin:left center; }
.roll-3d > .top,
.roll-3d > .bottom{ transition:transform 300ms var(--ease-enter), opacity 200ms var(--ease-enter); }
/* opacidade junto com o deslocamento: só o transform deixava uma sombra do
   texto de baixo aparecendo na borda da caixa de recorte */
.roll-3d > .bottom{
  opacity:0;
  transform:translateY(160%) perspective(500px) rotate(-14deg) rotateY(40deg);
}
.roll-3d:hover > .bottom{ opacity:1; }
.roll-3d:hover > .top{ opacity:0; }
.roll-3d:hover > .top{
  transform:translateY(-160%) perspective(500px) rotate(14deg) rotateY(-40deg);
}
.roll-3d:hover > .bottom{ transform:none; }

/* ---------- 18. Header sobre conteúdo ----------
   O header é transparente por definição do sistema. Quando um título de
   seção passa por baixo dele, os dois se sobrepõem. Uma lâmina de vidro
   a partir do primeiro scroll resolve sem sair do vocabulário. */
/* O desfoque precisa estar no próprio header: em pseudo-elemento com
   z-index negativo o backdrop-filter não pega o que passa por baixo. */
.site-header{
  background:rgba(255,255,255,0);
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);
  transition:background var(--dur-ui) var(--ease-ui),
             -webkit-backdrop-filter var(--dur-ui) var(--ease-ui),
             backdrop-filter var(--dur-ui) var(--ease-ui);
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  backdrop-filter:blur(12px) saturate(1.4);
}

/* ==========================================================================
   19. SERVIÇOS — interação no hover
   A linha inteira reage: o nome anda para a direita, tudo vira laranja e
   um fio da mesma cor cresce por baixo. Nenhuma cor entra sem o mouse.
   ========================================================================== */
.list li{
  position:relative;
  transition:color 400ms var(--ease-enter);
}
.list li::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--brand);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 600ms var(--ease-enter);
}
.list li:hover::after,
.list li:focus-within::after{ transform:scaleX(1); }

.list__name,
.list__note{
  transition:color 400ms var(--ease-enter), transform 600ms var(--ease-enter);
}
.list li:hover .list__name,
.list li:focus-within .list__name{
  color:var(--brand);
  transform:translateX(14px);
}
.list li:hover .list__note,
.list li:focus-within .list__note{ color:var(--brand); }

/* ==========================================================================
   20. PROCESSO — o card acende quando encosta e passa a cobrir o anterior
   ========================================================================== */
.process-card{
  transition:background 500ms var(--ease-enter);
}
/* laranja cheio, sem opacidade: os cards se empilham e qualquer
   transparência deixaria o de baixo aparecer através do de cima */
.process-card.is-stuck{ background:#FA9049; }
.process-card.is-stuck,
.process-card.is-stuck .t-second{ color:#121212; }
.process-card.is-stuck .process-card__num{ color:rgba(18,18,18,.5); }
.process-card__num{ transition:color 500ms var(--ease-enter); }
.process-card.is-stuck .process-card__num{ color:#121212; }   /* laranja sobre laranja sumia */

/* ==========================================================================
   21. PROJETO ABERTO — pop-up
   Fundo escuro e desfocado, imagem grande, ficha embaixo.
   ========================================================================== */
.lb{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:72px var(--gutter) 32px;
}
.lb__scrim{
  position:absolute; inset:0;
  background:rgba(8,8,8,.78);
  -webkit-backdrop-filter:blur(16px) saturate(.9);
  backdrop-filter:blur(16px) saturate(.9);
  opacity:0;
  transition:opacity 420ms var(--ease-enter);
}
.lb.is-on .lb__scrim{ opacity:1; }

.lb__frame{
  position:relative; z-index:1; margin:0;
  display:flex; flex-direction:column; gap:24px;
  width:100%; max-width:1480px; max-height:100%;
  opacity:0; transform:translateY(14px) scale(.99);
  transition:opacity 520ms var(--ease-enter), transform 520ms var(--ease-enter);
}
.lb.is-on .lb__frame{ opacity:1; transform:none; }

.lb__media{ position:relative; display:flex; flex:1 1 auto; align-items:center; justify-content:center; min-height:0; }
/* texto alternativo não se desenha: ele é para quem ouve a página, e na tela
   só aparecia como um flash de letras enquanto a imagem não chegava */
.lb__media img{ color:transparent; }
.lb__media img{
  flex:0 0 auto;
  /* a altura da janela menos o topo, a ficha e o respiro de baixo: a peça
     ocupa tudo o que sobra, sem empurrar a ficha para fora da tela. */
  max-height:min(calc(100vh - 250px), 1000px); width:auto; max-width:100%;
  border-radius:var(--radius);
}
.lb__media .ph{
  /* flex:none, senão o stretch do flex atropela a altura e a proporção */
  flex:0 0 auto;
  height:min(calc(100vh - 250px), 1000px); max-height:100%; width:auto;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}
.lb__media .ph__tag{ color:rgba(255,255,255,.45); }

.lb__info{
  color:var(--text-invert);
  display:flex; flex-direction:column; gap:14px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
}
.lb__head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.lb__count{ color:rgba(255,255,255,.6); }
/* segunda linha da ficha: entrega à esquerda, agência à direita.
   Alinhadas pelo TOPO, não pela linha de base: os dois lados são o mesmo
   elemento com a mesma altura de linha fixa, então o topo de um é o topo do
   outro em qualquer navegador — inclusive no Safari do iPhone, que calculava
   a linha de base de outro jeito e subia a agência. */
.lb__linha{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.lb__campo{ margin:0; color:var(--text-invert); line-height:20px; }
.lb__parceria{ text-align:right; }
.lb__campo .lb__dt{ margin-right:4px; }   /* o espaço de verdade está no HTML; isto só afina o respiro */
/* No telefone a agência desce para baixo da entrega, as duas alinhadas à
   esquerda. Lado a lado, o Safari do iPhone deixava a agência um pouco mais
   alta que a entrega; empilhadas, não há o que desalinhar. */
@media (max-width:809px){
  .lb__linha{ flex-direction:column; align-items:flex-start; gap:4px; }
  .lb__parceria{ text-align:left; }
}
.lb__dl{ margin:0; display:flex; flex-wrap:wrap; gap:8px 40px; }
.lb__dl > div{ display:flex; gap:10px; }
.lb__dl dt, .lb__dl dd{ margin:0; }
.lb__dt{ color:rgba(255,255,255,.45); }

.lb__close{
  position:absolute; top:28px; right:var(--gutter); z-index:2;
  background:none; border:0; padding:6px; cursor:pointer;
  color:rgba(255,255,255,.6); font-family:inherit;
  transition:color var(--dur-ui) var(--ease-ui);
}
.lb__close:hover{ color:var(--text-invert); }

.lb__nav{
  position:absolute; top:50%; z-index:2;
  width:48px; height:48px; margin-top:-24px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid rgba(255,255,255,.22);
  border-radius:50%; cursor:pointer;
  color:rgba(255,255,255,.7);
  transition:border-color var(--dur-ui) var(--ease-ui),
             color var(--dur-ui) var(--ease-ui);
}
.lb__nav:hover{ border-color:rgba(255,255,255,.6); color:var(--text-invert); }
.lb__nav--prev{ left:calc(var(--gutter) / 2); }
.lb__nav--next{ right:calc(var(--gutter) / 2); }

@media (max-width:809px){
  .hero{ padding-top:calc(var(--header-h) + 64px); }
  /* 100svh é a altura da tela COM as barras do navegador à mostra. Com
     100vh, o pop-up ficava mais alto que o visível e as setas iam parar
     atrás da barra de baixo do Safari — apareciam cortadas no canto. */
  .lb{ padding:64px 16px 28px; height:100svh; }
  .lb__media .ph{ height:auto; width:100%; }
  .lb__media img{ max-height:min(calc(100svh - 320px), 620px); }
  /* as setas vão para o canto de baixo à direita, onde cai o polegar e não
     há texto por baixo, com 44px de lado (o mínimo confortável no toque) */
  .lb__nav{ top:auto; bottom:24px; margin-top:0; width:44px; height:44px; }
  .lb__nav--prev{ left:auto; right:76px; }
  .lb__nav--next{ right:20px; left:auto; }
  .lb__dl{ gap:6px 24px; }
  .hero__claim br{ display:none; }
}

/* ==========================================================================
   22. [hidden] precisa vencer
   Qualquer regra de display escrita numa classe atropela o [hidden] que o
   navegador aplica, porque a folha do autor sempre ganha da folha do
   navegador. Sem esta linha o pop-up fica aberto e invisível por cima da
   página, comendo todo clique.
   ========================================================================== */
[hidden]{ display:none !important; }


/* ==========================================================================
   24. LABELS
   Caixa alta, preto, 12px, espaçado e em bold. Vale para todos os rótulos
   de seção — a numeração (01) continua entre parênteses, porque ali o
   parêntese é o que separa número de conteúdo.
   ========================================================================== */
.eyebrow{
  font-size:12px;
  line-height:16px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-strong);
}

/* ==========================================================================
   25. RODAPÉ
   ========================================================================== */
.foot__link{
  font-size:13px;
  line-height:20px;
  letter-spacing:-.005em;
  color:var(--text-secondary);
  transition:color var(--dur-ui) var(--ease-ui);
}
.foot__link:hover{ color:var(--text-primary); }
.foot__col .eyebrow{ margin-bottom:12px; }
.foot__bar .t-caption{ font-size:11px; }



/* ==========================================================================
   23. MENU — fechar e hover
   ========================================================================== */
.menu__close{
  position:absolute; top:28px; right:var(--gutter);
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:0; padding:6px 0; cursor:pointer;
  color:var(--text-primary); font-family:inherit;
  transition:color var(--dur-ui) var(--ease-ui);
}
.menu__close svg{ transition:transform 500ms var(--ease-enter); }
.menu__close:hover{ color:var(--brand); }
.menu__close:hover svg{ transform:rotate(90deg); }
.menu__close .eyebrow{ color:inherit; }

.menu__list a{
  position:relative;
  padding:14px 0;
  overflow:hidden;
}
/* o fio laranja cresce da esquerda, e a palavra anda com ele */
.menu__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--brand);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 600ms var(--ease-enter);
}
.menu__list a:hover::after,
.menu__list a:focus-visible::after{ transform:scaleX(1); }

.menu__list a > span{
  display:inline-block;
  transition:transform 600ms var(--ease-enter), color 400ms var(--ease-enter);
}
.menu__list a:hover > span,
.menu__list a:focus-visible > span{
  transform:translateX(16px);
  color:var(--brand);
}

/* ==========================================================================
   24. LINKS DE TEXTO — o laranja entra no sublinhado e na seta
   ========================================================================== */
.link-btn::after{ background:var(--brand); }
.link-btn .icon{
  transition:transform 400ms var(--ease-enter), color 300ms var(--ease-enter);
}
.link-btn:hover .icon,
.link-btn:focus-visible .icon{ color:var(--brand); }

/* ==========================================================================
   26. NÚMEROS DE ALCANCE
   ========================================================================== */
.stat__n{ font-variant-numeric:tabular-nums; }



/* ==========================================================================
   27. SEÇÕES EM PRETO
   Trocar os tokens de cor no contexto da seção basta: base.css inteiro lê
   essas variáveis, então tudo dentro vira claro sem uma regra a mais.
   ========================================================================== */
.section--dark{
  background:#121212;
  --text-primary:   #FAFAFA;
  --text-secondary: rgba(250,250,250,.72);
  --text-muted:     rgba(255,255,255,.58);  /* era .42: 4,1:1 */
  --text-strong:    #FFFFFF;
  --line:           rgba(255,255,255,.18);
  --line-soft:      rgba(255,255,255,.14);
  --line-faint:     rgba(255,255,255,.11);
  --bg-alt:         rgba(255,255,255,.06);
  color:var(--text-primary);
}
.section--dark .ph{
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.section--dark .ph__tag{ color:rgba(255,255,255,.58); }

/* ==========================================================================
   28. LOGO
   Assinatura em SVG, cor herdada do contexto. Bem pequena nos dois lugares.
   ========================================================================== */
.logo{
  display:block;
  height:11px; width:auto;
  color:currentColor;
}
.site-header__logo{
  display:flex; align-items:center;
  color:var(--text-primary);
  transition:opacity var(--dur-ui) var(--ease-ui);
}
.site-header__logo:hover{ opacity:.6; }

.foot__brand{ margin:0 0 32px; }
.foot__brand .logo{ height:18px; }
@media (max-width:809px){
  .foot__brand{ margin-bottom:24px; }
  .foot__brand .logo{ height:13px; }
}

/* ==========================================================================
   29. TÍTULOS DECIFRADOS
   O caractere ainda embaralhado fica laranja e some junto com o embaralho.
   ========================================================================== */
/* O embaralho fica fora do fluxo, por cima de uma cópia invisível do texto
   real. Antes ele ocupava o lugar do título, e como os caracteres sorteados
   são mais largos, a linha quebrava e a página inteira pulava.

   `white-space:normal` é obrigatório aqui: com `pre-wrap`, o espaço no fim
   da linha contava na conta da largura, a camada de cima ficava alguns
   pixels mais larga que o fantasma e empurrava a última palavra para uma
   segunda linha, que caía fora da caixa. O título aparecia cortado. */
.dec-host{ position:relative; }
.dec__fantasma{ visibility:hidden; }
.dec{ position:absolute; inset:0; white-space:normal; }
.dec__p{ white-space:nowrap; }
.dec__c{ transition:color 120ms linear; }
.dec__c--enc{ color:var(--brand); }

/* ==========================================================================
   30. ENTRADA
   Painel claro com as saudações. Sai subindo, com a borda de baixo curva.
   ========================================================================== */
.intro{
  position:fixed; inset:0; z-index:100;
  background:#121212;
  display:flex; align-items:center; justify-content:center;
  will-change:transform, border-radius;
}
.intro__word{
  font-family:var(--font-sans);
  font-size:clamp(38px,7vw,86px);
  line-height:1; font-weight:300;
  letter-spacing:-.035em;
  color:#FAFAFA;
  opacity:0;
}
.intro.is-out{
  animation:intro-out 820ms cubic-bezier(.76,0,.24,1) forwards;
}
/* No TELEFONE não há cortina.

   Ela é bonita e custa caro onde mais gente entra: é a primeira visita que o
   Google mede, e ele mede quando a tela para de mudar. Mesmo reduzida a uma
   saudação de um segundo, animada em CSS, a tela preta era o que sobrava
   entre o primeiro pixel e o site. Aqui ela nem chega a ser desenhada: o
   visitante de celular cai direto na hero. No computador, onde a página
   inteira chega em meio segundo, a sequência das seis saudações continua. */
@media (max-width:809px){
  .intro{ display:none !important; }
}
/* ATENÇÃO: uma chave } sobrando aqui, antes dos keyframes, fez o navegador
   descartar a animação da onda sem avisar — a cortina sumia seca, do preto
   direto para o branco. Se a onda parar de novo, é a primeira suspeita. */
@keyframes intro-out{
  0%{
    transform:translateY(0);
    border-radius:0 0 0 0;
  }
  35%{
    border-radius:0 0 50% 50% / 0 0 9% 9%;
  }
  100%{
    transform:translateY(-104%);
    border-radius:0 0 50% 50% / 0 0 3% 3%;
  }
}
.intro[hidden]{ display:none !important; }

/* sem animação de entrada: a cortina simplesmente não existe */
@media (prefers-reduced-motion: reduce){
  .intro{ display:none !important; }
}

/* ==========================================================================
   31. HEADER SOBRE FUNDO PRETO
   A lâmina de vidro clara cortaria as seções escuras ao meio. Ela inverte
   quando o que passa por baixo é preto.
   ========================================================================== */
.site-header.is-dark{ color:#FAFAFA; }
.site-header.is-dark.is-scrolled{
  background:rgba(18,18,18,.72);
}
.site-header.is-dark .site-header__logo{ color:#FAFAFA; }
.site-header.is-dark .site-header__quiet{ color:rgba(250,250,250,.6); }
.site-header.is-dark .site-header__quiet:hover{ color:#FAFAFA; }
.site-header.is-dark .site-header__sep{ background:rgba(255,255,255,.24); }
.site-header.is-dark .t-second{ color:rgba(250,250,250,.6); }

/* ==========================================================================
   32. GALERIA EM ACORDEÃO — banner da hero
   O painel aberto ocupa 62% da faixa; os outros quatro dividem o resto.
   Sem GSAP: o mesmo movimento sai de uma transição de flex-grow com a
   curva equivalente à power4.out.
   ========================================================================== */
.accordion-gallery{
  --ag-gap:6px;
  --ag-radius:5px;
  --ag-fechado:64px;
  --ag-rmax:1.8771;    /* a mais larga das cinco imagens da hero */
  --ag-max:620px;
  /* A altura da faixa é a maior que ainda deixa a imagem mais larga caber
     inteira com os outros quatro painéis fechados. Esta é a mesma conta que
     o site.js fazia — e fazia tarde: até o script chegar, o painel aberto
     ficava do tamanho dos outros, e quando ele crescia empurrava meia
     página para baixo. No telefone isso sozinho valia 0,2 de CLS, o dobro
     do limite. Agora a conta está aqui, e o JavaScript só mantém. */
  --ag-height:clamp(240px, calc((min(100vw - 2 * var(--gutter), var(--container))
              - 4 * var(--ag-fechado) - 4 * var(--ag-gap)) / var(--ag-rmax)), var(--ag-max));
  --ag-overlay:#0A0A0A;
  /* grow = r*(n-1)/(1-r), com r=0.62 e n=5 */
  --ag-grow:6.526;
  --ag-ease:cubic-bezier(.165,.84,.44,1);
  --ag-dur:650ms;

  display:flex;
  gap:var(--ag-gap);
  width:100%;
  height:var(--ag-height);
}

/* --w e --h vêm do HTML, com os pixels reais da imagem daquele painel */
.ag-panel.is-open{ flex:0 0 calc(var(--ag-height) * var(--w) / var(--h)); }

.ag-panel{
  position:relative;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  border-radius:var(--ag-radius);
  background:var(--bg-alt);
  display:block;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:flex-grow var(--ag-dur) var(--ag-ease), flex-basis var(--ag-dur) var(--ag-ease);
}

.ag-panel__frame{
  position:absolute; inset:0;
  overflow:hidden; border-radius:inherit;
}
.ag-panel__media{
  position:absolute; top:0; left:50%;
  transform:translateX(-50%);
  /* a mídia guarda a largura do painel aberto: assim a imagem não estica
     nem escorrega quando o painel encolhe, ela só é recortada */
  width:calc(var(--ag-height) * var(--w) / var(--h));
  height:100%;
  filter:grayscale(1);
  transition:filter var(--ag-dur) var(--ag-ease);
}
.ag-panel__media img,
.ag-panel__media .ph{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:0;
  user-select:none;
}
.ag-panel.is-open .ag-panel__media{ filter:grayscale(0); }

.ag-panel__overlay{
  position:absolute; inset:0; pointer-events:none;
  background:rgba(10,10,10,.34);
  transition:background var(--ag-dur) var(--ag-ease);
}
.ag-panel.is-open .ag-panel__overlay{ background:rgba(10,10,10,0); }

.ag-panel:focus-visible{
  outline:1px solid var(--text-primary);
  outline-offset:2px;
}

@media (max-width:1199px){
  .accordion-gallery{ --ag-max:500px; }
}
@media (max-width:809px){
  .accordion-gallery{ --ag-max:400px; }
}
@media (max-width:520px){
  .accordion-gallery{
    flex-direction:column;
    height:auto;
    --ag-grow:3.2;
  }
  .ag-panel{ flex:0 0 var(--ag-fechado); min-height:var(--ag-fechado); }
  /* em coluna a largura é toda a tela, então a altura sai da proporção */
  .ag-panel.is-open{ flex:0 0 auto; aspect-ratio:var(--w) / var(--h); }
  .ag-panel__media{ width:100%; height:100%; left:0; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .ag-panel, .ag-panel__media, .ag-panel__overlay{ transition:none; }
}

/* ==========================================================================
   33. MARCAS — três faixas em loop
   Faixas 1 e 3 andam para a esquerda, a 2 para a direita, a 100px por
   segundo. O conjunto de logos é clonado pelo JS até cobrir a tela, e a
   faixa anda exatamente a largura de um conjunto: a emenda não aparece.
   ========================================================================== */
.marcas{ display:flex; flex-direction:column; gap:var(--gap-s); }
.marcas__chamada{ max-width:58ch; text-wrap:balance; }
.marcas__apoio{ max-width:82ch; text-wrap:balance; }

.marcas__faixas{
  display:flex; flex-direction:column; gap:var(--gap-s);
  /* sangra até a borda da tela: a faixa entra e sai pelas laterais */
  margin-inline:calc(-1 * var(--gutter));
  margin-top:var(--gap-l);   /* soma com o gap da seção: o texto respira antes das faixas */
}

/* Sem JavaScript os logos ficam numa grade parada, que é melhor do que
   sumirem. Com ele, a lista some e vira faixa. */
.marcas__logos{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:32px 56px; margin:0; padding:0 var(--gutter); list-style:none;
}

.loop{
  --loop-gap:88px;
  position:relative;
  overflow:hidden;
  padding-block:10px;
  /* as pontas somem no fundo, qualquer que seja a cor da seção */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.loop__track{
  display:flex;
  width:max-content;
  animation:loop-esq var(--loop-dur, 40s) linear infinite;
  will-change:transform;
}
.loop--dir .loop__track{ animation-name:loop-dir; }
/* hoverSpeed 0: a faixa para inteira quando o mouse entra */
.loop:hover .loop__track,
.loop.is-off .loop__track{ animation-play-state:paused; }

.loop__set{
  display:flex; align-items:center; flex:none;
  gap:var(--loop-gap);
  /* o zero da esquerda é obrigatório: <ul> nasce com 40px de recuo, e esse
     recuo só aparecia na emenda entre um conjunto e a cópia seguinte —
     88px de vão em toda a faixa e 128px ali, que é o ponto onde dava para
     ver onde a faixa terminava */
  padding:0 var(--loop-gap) 0 0;
  margin:0; list-style:none;
}
.loop__item{ flex:none; display:flex; align-items:center; justify-content:center; height:56px; }
.loop__item img{
  display:block;
  transition:transform 300ms var(--ease-ui);
}
/* scaleOnHover */
.loop__item:hover img{ transform:scale(1.2); }

@keyframes loop-esq{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(calc(-1 * var(--set-w, 50%)),0,0); } }
@keyframes loop-dir{ from{ transform:translate3d(calc(-1 * var(--set-w, 50%)),0,0); } to{ transform:translate3d(0,0,0); } }

@media (max-width:809px){
  /* quatro faixas em vez de duas: cada uma fica mais curta, então os logos
     encolhem um pouco e o vão entre eles também */
  .marcas__faixas{ gap:6px; }
  .loop{ --loop-gap:48px; padding-block:6px; }
  .loop__item{ height:42px; }
  .loop__item img{ transform:scale(.78); }
  .loop__item:hover img{ transform:scale(.92); }
}
/* sem movimento: as faixas viram uma grade parada, sem os clones */
@media (prefers-reduced-motion: reduce){
  .loop{ -webkit-mask-image:none; mask-image:none; }
  .loop__track{ animation:none; width:auto; }
  .loop__set{ flex-wrap:wrap; justify-content:center; row-gap:24px; padding-inline:var(--gutter); }
  .loop__set[aria-hidden="true"]{ display:none; }
}

/* ==========================================================================
   34. RETRATO
   Preto e branco, contraste e grão já estão no arquivo. Sem filtro, sem
   mescla e sem parallax: a cada quadro de scroll esta foto não custa nada.
   ========================================================================== */
.about__portrait{ overflow:hidden; }
.about__portrait img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   35. CONTATO — bloco laranja inteiro, título grande à esquerda
   Laranja mais fechado que o da marca: com texto branco, o #F98010 dá
   2,6:1 de contraste e o texto some. Este dá 3,6:1, o suficiente para
   texto grande, e por isso o parágrafo aqui é grande.
   ========================================================================== */
.cta{
  --cta-bg:#E65C00;
  background:var(--cta-bg);
  color:#FFFFFF;
  padding:clamp(64px,9vh,104px) var(--gutter);
}
.cta__inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gap-xl); align-items:center;
}
.cta__eyebrow{ display:block; margin-bottom:28px; color:#121212; }  /* branco sobre laranja dá 3,6:1 e reprova em 12px */
.cta__title{
  margin:0;
  font-size:clamp(56px,7.4vw,112px);
  line-height:.96; letter-spacing:-.04em; font-weight:300;
  max-width:5.4em;               /* quebra em duas linhas: "Vamos / conversar" */
}
.cta .dec__c--enc{ color:rgba(255,255,255,.5); }
.cta__side{ display:flex; flex-direction:column; align-items:flex-start; gap:36px; }
.cta__text{
  margin:0; max-width:24ch;
  font-size:clamp(24px,2.2vw,32px); line-height:1.22;   /* 24px é o piso do "texto grande" no contraste */ letter-spacing:-.02em; font-weight:300;
}
/* três linhas fixas no desktop; em tela estreita volta a quebrar solto */
.cta__text > span{ display:block; white-space:nowrap; }
@media (max-width:1199px){
  .cta__text > span{ display:inline; white-space:normal; }
}
.cta__acoes{
  display:inline-flex; flex-wrap:wrap; align-items:stretch; gap:6px;
  padding:6px;
  background:rgba(0,0,0,.16);
  border-radius:2px;
}
.cta-btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:space-between; gap:40px;
  padding:8px 8px 8px 20px;
  border-radius:2px;
  font-size:15px; line-height:20px; letter-spacing:-.01em; font-weight:400;
  transition:color 520ms var(--ease-enter);
}
/* A caixinha do ícone é esta camada. No hover ela se abre a partir do
   próprio quadrado até cobrir o botão inteiro, e as cores se invertem. */
.cta-btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:2px;
  background:var(--btn-fill);
  clip-path:inset(8px 8px 8px calc(100% - 38px) round 2px);
  transition:clip-path 620ms cubic-bezier(.76,0,.24,1);
}
.cta-btn:hover::before,
.cta-btn:focus-visible::before{ clip-path:inset(0 0 0 0 round 2px); }

/* rótulo em rolo: sai por cima, a cópia entra por baixo */
.cta-btn__txt{ display:block; height:20px; overflow:hidden; }
.cta-btn__txt > span{
  display:block;
  text-shadow:0 20px 0 currentColor;
  transition:transform 560ms cubic-bezier(.76,0,.24,1) 40ms;
}
.cta-btn:hover .cta-btn__txt > span,
.cta-btn:focus-visible .cta-btn__txt > span{ transform:translateY(-20px); }

.cta-btn__box{
  flex:none; width:30px; height:30px;
  display:grid; place-items:center;
  color:var(--btn-ico);
  overflow:hidden;
}
/* ícone gira de lugar: sai pela direita e volta pela esquerda */
.cta-btn__ico{ transition:transform 560ms cubic-bezier(.76,0,.24,1); }
.cta-btn:hover .cta-btn__ico,
.cta-btn:focus-visible .cta-btn__ico{ animation:cta-ico 620ms cubic-bezier(.76,0,.24,1); }
@keyframes cta-ico{
  0%  { transform:translateX(0); }
  45% { transform:translateX(22px); }
  46% { transform:translateX(-22px); }
  100%{ transform:translateX(0); }
}

/* e-mail: vazado, caixa branca. No hover o botão fica branco. */
.cta-btn--ghost{ --btn-fill:#FFFFFF; --btn-ico:#E65C00; color:#FFFFFF; }
.cta-btn--ghost:hover,
.cta-btn--ghost:focus-visible{ color:#121212; }

/* WhatsApp: branco, caixa preta. No hover o botão fica preto. */
.cta-btn--solid{ --btn-fill:#121212; --btn-ico:#FFFFFF; background:#FFFFFF; color:#121212; }
.cta-btn--solid:hover,
.cta-btn--solid:focus-visible{ color:#FFFFFF; }

@media (prefers-reduced-motion: reduce){
  .cta-btn::before, .cta-btn__txt > span{ transition:none; }
  .cta-btn:hover .cta-btn__ico{ animation:none; }
}

.cta :focus-visible{ outline-color:#FFFFFF; }

@media (max-width:1199px){
  .cta__inner{ grid-template-columns:1fr; gap:var(--gap-m); }
}
@media (max-width:809px){
  .cta__acoes{ display:flex; flex-direction:column; width:100%; }
  .cta-btn{ width:100%; }
}

/* ==========================================================================
   36. PAREDE EM LINHAS
   Colunas de CSS preenchem de cima para baixo, então a ordem do HTML não
   era a ordem de leitura. O JS distribui as peças da esquerda para a
   direita, cada uma na coluna mais baixa: a ordem do HTML vira a ordem em
   que se lê a parede. Sem JS, as colunas de CSS continuam valendo.
   ========================================================================== */
.wall.is-linhas{ column-count:auto; display:flex; align-items:flex-start; gap:12px; }
.wall__col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:12px; }
.wall.is-linhas .piece{ margin:0; display:block; }