/* Bonacci · site, versão 6
   Base: a Archivo como protagonista em escala extrema e a Cormorant itálica só nas palavras-chave, com ajuste ótico.
   Vocabulário clássico e áureo: numerais romanos, quadros 1 × 1,618, o girassol no ângulo de ouro e a tríade de Vitrúvio.
   Movimento (site.js, com GSAP, ScrollTrigger e Lenis): entrada com a sequência de Fibonacci, abertura que fica parada
   enquanto o estúdio sobe por cima, títulos que sobem por linha, o girassol de pontos em canvas, problemas que acendem,
   fases na horizontal com contador, faixa que acelera com a rolagem, cursor e botões magnéticos, e o símbolo
   construído com régua e compasso no rodapé.
   Sem as bibliotecas, tudo aparece parado e legível. */

:root {
  --avorio: #F6F2EC;
  --branco: #FFFFFF;
  --preto: #141210;
  --cobre: #A34215;
  --cobre-claro: #D9774A;
  --cobre-fundo: #65290D;
  --travertino: #E7DED2;
  --cinza: #6B645C;

  --f-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;
  /* Ajuste ótico da serifada: tamanho para igualar a altura do "x" da Archivo (o site.js mede e corrige). */
  --k: 1.3;
  --phi: 1.618;

  --gutter: 21px;
  --col-gap: 34px;
  --secao: 89px;
  --topo: 64px;
  --max: 1560px;

  --ease: cubic-bezier(.65, 0, .15, 1);
}
@media (min-width: 760px) { :root { --gutter: 34px; --col-gap: 55px; --secao: 144px; --topo: 72px; } }
@media (min-width: 1200px) { :root { --gutter: 55px; --col-gap: 89px; --secao: 189px; } }

/* O tema muda o cabeçalho conforme a seção sob ele */
html[data-tema="claro"]  { --tinta-topo: #141210; --fundo-topo: rgba(246, 242, 236, .86); }
html[data-tema="escuro"] { --tinta-topo: #F6F2EC; --fundo-topo: rgba(20, 18, 16, .78); }

/* Cada seção define as próprias cores */
.claro, [data-tema="claro"]  { --tinta: #141210; --tinta-2: #6B645C; --acento: #A34215; --linha: rgba(20, 18, 16, .14); }
.escuro, [data-tema="escuro"] { --tinta: #F6F2EC; --tinta-2: rgba(231, 222, 210, .68); --acento: #D9774A; --linha: rgba(231, 222, 210, .2); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* O espaço da barra fica reservado mesmo com a rolagem travada (entrada): no Windows, a barra clássica ocupa
   largura, e sem isso o GSAP mediria a abertura 15px mais larga e ela ficaria cortada à direita. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html:not(.lenis) { scroll-behavior: smooth; }
html.entrando { overflow: hidden; }

/* ---------- Barra de rolagem: fina, trilho preto e polegar em cobre, igual no Windows e no Mac ---------- */
/* Chrome, Edge e Safari usam as regras ::-webkit-scrollbar; o Firefox, as propriedades padrão (só nele, porque
   o Chrome ignora as regras -webkit- quando scrollbar-width ou scrollbar-color estão definidos). */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--preto); }
::-webkit-scrollbar-thumb { background: var(--cobre); border: 2px solid var(--preto); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--cobre-claro); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: var(--preto); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--cobre) var(--preto); }
}

/* ---------- Sem seleção, cópia ou arrasto de textos e imagens (os campos do formulário continuam editáveis) ---------- */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
img, svg, canvas, picture { -webkit-user-drag: none; }
img { pointer-events: none; }
body {
  margin: 0; background: var(--avorio); color: var(--preto);
  font-family: var(--f-sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
@media (min-width: 760px) { body { font-size: 18px; } }
[hidden] { display: none; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
b { font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--cobre); color: var(--branco); }
:focus-visible { outline: 2px solid var(--acento, var(--cobre)); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: 13px; top: -89px; z-index: 100; background: var(--preto); color: var(--branco); padding: 13px 21px; text-decoration: none; }
.pular:focus { top: 13px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Tipografia ---------- */
.rotulo { font-weight: 500; font-size: 11px; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
/* Numeral romano das seções, com um traço fino até o nome */
.romano { display: inline-flex; align-items: center; gap: 13px; margin-right: 13px; color: var(--acento); }
.romano::after { content: ''; width: 34px; height: 1px; background: currentColor; opacity: .6; }
.titulo { margin-top: 21px; font-weight: 600; font-stretch: 125%; font-size: clamp(36px, 5.2vw, 88px); line-height: 1; letter-spacing: -.045em; color: var(--tinta); max-width: 14em; }
/* A serifada como complemento: a palavra-chave em Cormorant itálica, na altura do "x" da Archivo. */
em {
  font-family: var(--f-serif); font-style: italic; font-weight: 500; font-stretch: 100%;
  font-size: calc(var(--k) * 1em); line-height: 0; letter-spacing: -.01em;
  margin-inline: .04em .02em; color: var(--acento);
}
/* Títulos divididos em linhas pelo site.js: cada linha sobe de dentro de uma máscara.
   O respiro em cima e embaixo deixa passar o acento e a descendente da serifada. */
.ln { display: block; overflow: hidden; padding: .24em .1em .2em 0; margin: -.24em -.1em -.2em 0; }
.ln__in { display: block; }
.anima [data-linhas]:not(.dividido) { visibility: hidden; }
/* Fio que se desenha ao entrar na tela */
.fio { display: block; height: 1px; background: var(--tinta); opacity: .22; transform-origin: 0 50%; }

/* ---------- Entrada ---------- */
.entrada { display: none; }
.js .entrada {
  position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto 1fr auto auto;
  padding: 22px var(--gutter) 34px; background: var(--preto); color: var(--avorio);
  /* Se o script não rodar, a entrada some sozinha. */
  animation: entrada-some .01s 6s forwards;
}
@keyframes entrada-some { to { visibility: hidden; } }
.entrada__marca { display: flex; align-items: center; gap: 9px; font-weight: 600; font-stretch: 125%; font-size: 20px; letter-spacing: -.035em; line-height: 1; }
.entrada__marca svg { width: 22px; height: 22px; fill: currentColor; }
.entrada__num { align-self: end; font-weight: 600; font-stretch: 125%; font-size: clamp(110px, 19vw, 320px); line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.entrada__pe { display: flex; justify-content: space-between; margin-top: 34px; font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(231, 222, 210, .7); }
.entrada__barra { display: block; height: 1px; margin-top: 13px; background: var(--cobre-claro); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Barra de progresso da página ---------- */
.progresso { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 2px; background: var(--cobre-claro); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- Cursor (só com mouse) ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 150; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid #FFFFFF; border-radius: 50%; pointer-events: none; mix-blend-mode: difference; opacity: 0;
  transition: opacity .3s, width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .45s var(--ease);
}
.cursor.visivel { opacity: 1; }
.cursor.sobre { width: 68px; height: 68px; margin: -34px 0 0 -34px; background: #FFFFFF; }

/* ---------- Fotos: quadros áureos (1 × 1,618) e em arco ---------- */
.foto { position: relative; overflow: hidden; isolation: isolate; background: var(--travertino); }
.foto img { position: absolute; top: -6%; left: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; }
.foto--arco { aspect-ratio: 1 / 1.618; border-radius: 999px 999px 0 0; }

/* ---------- Cabeçalho ---------- */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--topo); color: var(--tinta-topo); transition: transform .6s var(--ease), background-color .5s var(--ease), color .5s var(--ease); }
.topo.is-solido { background: var(--fundo-topo); -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px); }
.topo.is-escondido { transform: translateY(-101%); }
.topo__in { height: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 21px; }
.marca { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.marca__simbolo { width: 22px; height: 22px; fill: currentColor; }
.marca__nome { font-weight: 600; font-stretch: 125%; font-size: 20px; line-height: 1; letter-spacing: -.035em; font-variant-ligatures: none; }
.topo__nav { display: flex; align-items: center; gap: 21px; }
@media (min-width: 760px) { .topo__nav { gap: 34px; } }
.topo__nav a { font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.topo__nav a:not(.topo__cta) { display: none; padding-block: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.topo__nav a:not(.topo__cta):hover { background-size: 100% 1px; }
@media (min-width: 640px) { .topo__nav a:not(.topo__cta) { display: inline; } }
.topo__cta { display: inline-block; padding: 10px 16px; box-shadow: inset 0 0 0 1px currentColor; transition: background-color .3s, color .3s; }
.topo__cta:hover { background: var(--tinta-topo); color: var(--preto); }
html[data-tema="claro"] .topo__cta:hover { color: var(--avorio); }

/* ---------- Abertura: o metal e as letras ---------- */
/* A abertura fica presa ao topo da tela: por isso não pode ser mais alta que a tela (o mínimo cobre o título e o pé). */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 420px; overflow: hidden; background: var(--preto); color: var(--tinta); }
.metal { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: var(--preto); }
.sem-webgl .metal { background: conic-gradient(from var(--g, 0deg) at 60% 55%, #141210, #65290D, #A34215, #E7DED2, #A34215, #65290D, #141210); filter: blur(30px); transform: scale(1.2); animation: gira 24s linear infinite; }
@property --g { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes gira { to { --g: 360deg; } }
.hero__veu { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 18, 16, .45) 0%, rgba(20, 18, 16, 0) 22%, rgba(20, 18, 16, 0) 42%, rgba(20, 18, 16, .78) 100%); }
.hero__sombra { position: absolute; inset: 0; pointer-events: none; background: var(--preto); opacity: 0; }
.hero__conteudo { position: absolute; left: 0; right: 0; bottom: 0; max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter) 34px; }
.hero__titulo { font-weight: 600; font-stretch: 125%; font-size: clamp(34px, 6.2vw, 108px); line-height: .98; letter-spacing: -.045em; color: var(--avorio); }
.linha { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.linha > span { display: block; }
.hero__pe { margin-top: 34px; padding-top: 21px; border-top: 1px solid rgba(231, 222, 210, .28); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 34px; color: rgba(246, 242, 236, .86); }
.hero__pe .rotulo { color: rgba(231, 222, 210, .7); align-self: center; }

/* ---------- I. O estúdio (sobe por cima da abertura) ---------- */
.posicao { position: relative; z-index: 2; padding-block: var(--secao); background: var(--avorio); color: var(--tinta); box-shadow: 0 -34px 89px rgba(0, 0, 0, .28); }
.posicao__frase { margin-top: 34px; font-weight: 600; font-stretch: 125%; font-size: clamp(30px, 4.6vw, 80px); line-height: 1.04; letter-spacing: -.045em; max-width: 15em; }
.posicao__grade { margin-top: 89px; display: grid; gap: 55px; }
.posicao__foto { width: 61.8%; }
@media (min-width: 960px) {
  /* Grade áurea: 0,382 para a foto, 0,618 para o texto */
  .posicao__grade { grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); column-gap: var(--col-gap); align-items: end; margin-top: 144px; }
  .posicao__foto { width: 100%; max-height: 82vh; }
}
.ficha > div { display: grid; gap: 5px; padding-block: 21px; border-top: 1px solid var(--linha); }
.ficha > div:last-child { border-bottom: 1px solid var(--linha); }
.ficha dd { color: var(--tinta-2); max-width: 30em; }
@media (min-width: 760px) { .ficha > div { grid-template-columns: 9em minmax(0, 1fr); gap: 21px; } .ficha dt { padding-top: 5px; } }

/* ---------- II. Proporção: o girassol de pontos ---------- */
/* Sem números nem rótulos: só pontos dispostos no ângulo de ouro, como as sementes de um girassol (site.js). */
.proporcao { position: relative; overflow: hidden; padding-block: var(--secao); background: var(--preto); color: var(--tinta); }
.proporcao__tela { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.proporcao__in { position: relative; z-index: 1; pointer-events: none; }
.proporcao__titulo { font-size: clamp(32px, 4.2vw, 72px); max-width: 10em; }
.proporcao__p { margin-top: 34px; max-width: 24em; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: var(--tinta-2); }
.proporcao__p + .proporcao__p { margin-top: 21px; color: var(--tinta); }
/* No celular, o girassol fica embaixo do texto */
@media (max-width: 959px) { .proporcao { padding-bottom: calc(var(--secao) + 96vw); } }
@media (min-width: 960px) {
  .proporcao { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; }
  .proporcao__in { width: 100%; }
  .proporcao__texto { max-width: min(44%, 640px); }
  /* O girassol se apaga sob a coluna de texto */
  .proporcao__tela { -webkit-mask-image: linear-gradient(90deg, transparent 26%, #000 50%); mask-image: linear-gradient(90deg, transparent 26%, #000 50%); }
}

/* ---------- III. Diagnóstico ---------- */
.diagnostico { padding-block: var(--secao); background: var(--avorio); color: var(--tinta); }
.diagnostico__titulo { max-width: 15em; }
.diagnostico__lead { margin-top: 34px; color: var(--tinta-2); max-width: 26em; }
.dores { margin-top: 89px; }
.dor { position: relative; display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 8px 13px; padding: 34px 0; transition: opacity .6s var(--ease); }
.dor:last-child { border-bottom: 1px solid var(--linha); }
.dor .fio { position: absolute; top: 0; left: 0; right: 0; }
.dor__n { font-family: var(--f-serif); font-style: italic; font-size: 44px; line-height: .9; color: var(--acento); }
.dor__problema { font-weight: 600; font-stretch: 125%; font-size: clamp(24px, 2.8vw, 48px); line-height: 1.05; letter-spacing: -.04em; }
.dor__resposta { margin-top: 13px; color: var(--tinta-2); max-width: 28em; }
.anima .dor:not(.ativo) { opacity: .26; }
@media (min-width: 960px) {
  /* O título fica parado à esquerda enquanto os problemas passam à direita */
  .diagnostico__grade { display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); column-gap: var(--col-gap); align-items: start; }
  .diagnostico__cab { position: sticky; top: calc(var(--topo) + 55px); }
  .diagnostico__titulo { font-size: clamp(34px, 3.5vw, 60px); }
  .dores { margin-top: 0; }
  .dor { grid-template-columns: 89px minmax(0, 1fr); min-height: 52vh; align-content: center; padding: 55px 0; }
  .dor__n { font-size: 72px; }
}

/* ---------- IV. Método: painéis que correm na horizontal ---------- */
.metodo { padding-top: var(--secao); background: var(--avorio); color: var(--tinta); overflow: hidden; }
.metodo__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 21px 34px; padding-bottom: 55px; }
.metodo__progresso { display: none; align-items: center; gap: 21px; padding-bottom: 10px; font-weight: 500; font-size: 11px; letter-spacing: .16em; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.metodo__progresso b { color: var(--tinta); }
.metodo__barra { position: relative; display: block; width: 144px; height: 1px; background: var(--linha); }
.metodo__barra i { position: absolute; inset: 0; background: var(--acento); transform: scaleX(0); transform-origin: 0 50%; }
.metodo__trilho { display: grid; gap: 13px; padding: 0 var(--gutter) var(--secao); }
.fase { position: relative; display: grid; overflow: hidden; color: var(--tinta); }
.fase--1 { background: var(--travertino); --tinta: #141210; --tinta-2: #6B645C; --acento: #A34215; --linha: rgba(20, 18, 16, .16); }
.fase--2 { background: var(--preto); --tinta: #F6F2EC; --tinta-2: rgba(231, 222, 210, .7); --acento: #D9774A; --linha: rgba(231, 222, 210, .2); }
.fase--3 { background: var(--cobre); --tinta: #FFFFFF; --tinta-2: rgba(255, 255, 255, .82); --acento: #141210; --linha: rgba(255, 255, 255, .3); }
.fase--4 { background: var(--branco); --tinta: #141210; --tinta-2: #6B645C; --acento: #A34215; --linha: rgba(20, 18, 16, .14); }
.fase__foto { aspect-ratio: 1.618 / 1; }
.fase__corpo { display: grid; gap: 21px; padding: 28px; }
.fase__n { font-weight: 500; font-size: 11px; letter-spacing: .16em; color: var(--tinta-2); }
.fase__nome { font-weight: 600; font-stretch: 125%; font-size: clamp(44px, 5.4vw, 100px); line-height: .95; letter-spacing: -.05em; }
.fase__pergunta { font-weight: 500; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.25; letter-spacing: -.015em; max-width: 20em; }
.fase__texto { max-width: 24em; color: var(--tinta-2); }
.fase__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 21px; padding-top: 13px; border-top: 1px solid var(--linha); }
.fase__meta em { font-size: clamp(48px, 5.4vw, 104px); line-height: .9; margin: 0; }
@media (min-width: 960px) {
  /* Foto em quadro áureo à esquerda (largura = altura ÷ 1,618) e o texto à direita */
  .fase { --h: max(460px, 72vh); min-height: var(--h); grid-template-columns: calc(var(--h) / var(--phi)) minmax(0, 1fr); }
  .fase__foto { aspect-ratio: auto; height: 100%; }
  .fase__corpo { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr; column-gap: var(--col-gap); row-gap: 21px; padding: 44px 55px; }
  .fase__n, .fase__nome, .fase__pergunta { grid-column: 1 / -1; }
  .fase__texto { align-self: end; }
  .fase__meta { align-self: end; flex-direction: column; align-items: flex-end; border-top: 0; padding-top: 0; }
  /* Com o GSAP, os painéis ficam lado a lado e a seção trava enquanto eles passam (classe posta pelo site.js,
     só em telas com pelo menos 660px de altura; em telas mais baixas, como notebooks de 1366 × 768 no Windows,
     os painéis ficam empilhados e a página rola normalmente). A seção é uma coluna: o cabeçalho tem a altura
     que precisa e os painéis ocupam exatamente o que sobra, sem cortar embaixo. */
  .metodo.horizontal { height: 100vh; height: 100svh; padding-top: calc(var(--topo) + 21px); display: flex; flex-direction: column; }
  .metodo.horizontal .metodo__cab { flex: none; padding-bottom: 34px; }
  .metodo.horizontal .metodo__progresso { display: flex; }
  /* O respiro de 55px embaixo separa os painéis da seção seguinte (antes ele só existia por sobra de cálculo). */
  .metodo.horizontal .metodo__trilho { display: flex; width: max-content; gap: 21px; padding-bottom: 55px; flex: 1 1 auto; min-height: 0; }
  /* --h aqui só dá a largura da foto (altura ÷ 1,618); a altura real vem do espaço que sobra na coluna */
  .metodo.horizontal .fase { --h: max(380px, calc(100svh - var(--topo) - 250px)); height: auto; min-height: 0; width: min(84vw, 1320px); flex: none; }
  /* Em telas baixas, título, nome, meta e respiros encolhem com a altura da tela (svh), para o painel caber sem cortar */
  .metodo.horizontal .titulo { font-size: clamp(36px, min(5.2vw, 9svh), 88px); }
  .metodo.horizontal .fase__corpo { padding: clamp(21px, 4.5svh, 44px) 55px; row-gap: clamp(13px, 2.2svh, 21px); }
  .metodo.horizontal .fase__nome { font-size: clamp(40px, min(5.4vw, 9svh), 100px); }
  .metodo.horizontal .fase__pergunta { font-size: clamp(18px, min(1.7vw, 3svh), 28px); }
  .metodo.horizontal .fase__meta em { font-size: clamp(44px, min(5.4vw, 9.5svh), 104px); }
}

/* ---------- V. Placar ---------- */
.placar { padding-block: var(--secao); background: var(--preto); color: var(--tinta); overflow: hidden; }
.placar__faixa { margin-bottom: 89px; }
.placar__trilho {
  display: flex; align-items: center; gap: .35em; width: max-content; white-space: nowrap; padding-right: .35em;
  font-weight: 700; font-stretch: 125%; font-size: clamp(72px, 13vw, 240px); line-height: 1; letter-spacing: -.05em; color: var(--avorio);
}
.placar__trilho i { flex: none; width: .5em; height: .5em; background: var(--cobre); border-top-right-radius: 100%; }
.placar__grade { margin-top: 89px; display: grid; gap: 55px; }
@media (min-width: 960px) { .placar__grade { grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); column-gap: var(--col-gap); align-items: end; } }
/* Funil: as larguras seguem a razão áurea, 1 · 0,618 · 0,382 */
.funil { display: grid; gap: 34px; }
.funil__nome { font-weight: 600; font-stretch: 125%; font-size: clamp(22px, 2vw, 32px); letter-spacing: -.035em; line-height: 1.1; }
.funil__barra { display: block; height: 21px; margin-block: 13px 10px; background: var(--travertino); transform-origin: 0 50%; }
.funil__item:nth-child(2) .funil__barra { width: 61.8%; background: var(--cobre-claro); }
.funil__item:nth-child(3) .funil__barra { width: 38.2%; background: var(--cobre); }
.funil__texto { font-size: 15px; color: var(--tinta-2); max-width: 30em; }
.placar__nota { font-size: clamp(18px, 1.6vw, 22px); color: var(--tinta); max-width: 22em; }
.placar__contexto { margin-top: 34px; padding-top: 21px; border-top: 1px solid var(--linha); font-size: 15px; color: var(--tinta-2); max-width: 30em; }
.placar__contexto span { display: block; margin-top: 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- VI. Princípios ---------- */
.principios { padding-block: var(--secao); background: var(--travertino); color: var(--tinta); }
.principios .titulo { max-width: 15em; }
.principios__grade { margin-top: 89px; display: grid; gap: 55px; }
@media (min-width: 760px) { .principios__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); } }
.principio { position: relative; padding-top: 21px; }
.principio .fio { position: absolute; top: 0; left: 0; right: 0; opacity: .5; transition: background-color .5s, opacity .5s; }
.principio:hover .fio { background: var(--acento); opacity: 1; }
.principio__latim {
  overflow: hidden; padding: .1em .1em .14em 0; margin: -.1em -.1em -.14em 0;
  font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(56px, 6vw, 108px); line-height: 1.05; letter-spacing: -.01em; color: var(--acento);
  transition: transform .8s var(--ease);
}
.principio:hover .principio__latim { transform: translateX(13px); }
.principio__latim .c { display: inline-block; }
.principio .rotulo { margin-top: 5px; }
.principio ul { margin-top: 34px; }
.principio li { padding-block: 13px; border-top: 1px solid var(--linha); }
.principios__saida { margin-top: 89px; font-weight: 600; font-stretch: 125%; font-size: clamp(22px, 2.2vw, 36px); line-height: 1.15; letter-spacing: -.035em; max-width: 22em; }

/* ---------- VII. Contato ---------- */
.contato { padding-block: var(--secao); background: var(--avorio); color: var(--tinta); }
.contato__grade { display: grid; gap: 55px; }
.contato__foto { width: 61.8%; justify-self: end; }
.contato__foto img { object-position: 50% 8%; }
@media (min-width: 960px) {
  .contato__grade { grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); column-gap: var(--col-gap); align-items: end; }
  .contato__foto { width: 100%; max-height: 86vh; justify-self: stretch; }
}
.contato__titulo { margin-top: 21px; font-weight: 600; font-stretch: 125%; font-size: clamp(40px, 5.6vw, 100px); line-height: .98; letter-spacing: -.05em; max-width: 9em; }
.contato__lead { margin-top: 34px; max-width: 26em; color: var(--tinta-2); }
.contato__extra { margin-top: 8px; max-width: 26em; color: var(--tinta); font-weight: 500; }
.contato__links { margin-top: 55px; display: flex; flex-wrap: wrap; gap: 13px 34px; }
.contato__links a { font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.contato__links a:hover { color: var(--acento); background-size: 0 1px; }
.form { margin-top: 55px; display: grid; gap: 21px; max-width: 760px; }
@media (min-width: 760px) { .form { grid-template-columns: 1fr 1fr; column-gap: 34px; } .campo--largo, .form .enviar, .form__erro { grid-column: 1 / -1; } }
.form[hidden] { display: none; }
.campo label { display: block; font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.campo input { display: block; width: 100%; height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; background: transparent; color: var(--tinta); font-family: var(--f-sans); font-size: 20px; outline: none; transition: border-color .3s; }
.campo input:focus, .campo input[aria-invalid="true"] { border-bottom-color: var(--acento); }
.campo__erro { margin-top: 5px; font-size: 13px; color: var(--acento); }
.campo__erro:empty { display: none; }
.enviar {
  justify-self: start; margin-top: 8px; display: inline-flex; align-items: center; gap: 13px; height: 55px; padding: 0 34px;
  background: var(--preto); color: var(--avorio); font-weight: 600; font-stretch: 112%; font-size: 15px;
  transition: background-color .35s var(--ease);
}
.enviar::after { content: ''; width: 13px; height: 13px; background: currentColor; border-top-right-radius: 100%; transition: transform .5s var(--ease); }
.enviar:hover { background: var(--cobre); }
.enviar:hover::after { transform: rotate(90deg); }
.enviar:disabled { opacity: .5; cursor: progress; }
.form__erro { font-size: 13px; color: var(--acento); }
.form__erro:empty { display: none; }
.form__ok { margin-top: 55px; display: grid; gap: 8px; outline: none; }
.form__ok[hidden] { display: none; }
.form__ok-titulo { font-weight: 600; font-stretch: 125%; font-size: 40px; letter-spacing: -.04em; }

/* ---------- Rodapé: a assinatura e o símbolo construído ---------- */
.rodape { background: var(--preto); color: var(--tinta); padding-top: var(--secao); overflow: hidden; }
.rodape__topo { display: grid; gap: 55px; padding-bottom: 89px; }
@media (min-width: 960px) { .rodape__topo { grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); column-gap: var(--col-gap); align-items: end; } }
.rodape__assina { font-weight: 600; font-stretch: 125%; font-size: clamp(32px, 4.4vw, 76px); line-height: 1.02; letter-spacing: -.045em; max-width: 11em; }
.construcao { width: min(100%, 560px); justify-self: end; overflow: visible; }
.construcao__tracos { fill: none; stroke: var(--avorio); stroke-width: .3; opacity: .42; }
.construcao__tracos > :first-child { stroke-width: .5; opacity: 1; }
.construcao__cotas { fill: none; stroke: var(--cobre-claro); stroke-width: .3; }
.construcao__cotas text { fill: var(--cobre-claro); stroke: none; font-family: var(--f-serif); font-style: italic; font-size: 6px; dominant-baseline: middle; }
.construcao__portas { fill: var(--cobre-claro); }
.rodape__pe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 34px; padding-block: 21px; border-top: 1px solid var(--linha); font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.rodape__pe a { text-decoration: none; }
.rodape__pe a:hover { color: var(--tinta); }
.rodape__marca {
  display: flex; align-items: flex-start; justify-content: center; gap: .16em; height: .7em; overflow: hidden; padding-top: .04em;
  font-weight: 600; font-stretch: 125%; font-size: 15.6vw; line-height: .8; letter-spacing: -.045em; font-variant-ligatures: none; color: var(--avorio);
}
.rodape__marca svg { flex: none; width: .74em; height: .74em; fill: var(--cobre); }

/* ---------- Estados iniciais, só quando o GSAP está carregado ---------- */
.anima .hero__titulo .linha > span { transform: translateY(105%); }
.anima .hero__pe { opacity: 0; }
.anima [data-sobe] { opacity: 0; transform: translateY(34px); }
/* Traços que se desenham: o GSAP anima --o (de 1 a 0), porque arredonda valores em px */
.anima .construcao__tracos > * { --o: 1; stroke-dasharray: 1; stroke-dashoffset: var(--o); }
.anima .construcao__cotas { opacity: 0; }
.anima .fio { transform: scaleX(0); }
.anima .funil__barra { transform: scaleX(0); }
.anima .foto--revela { clip-path: inset(100% 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
}
@media print { .topo, .entrada, .progresso, .cursor { display: none !important; } }