/* ==========================================================================
   NOVREN — LP v2 · BASE
   Reset curto e as primitivas de layout. Toda medida em `--px`: ver a nota
   sobre a trava 1:1 no topo de tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-branco);
  color: var(--fg);
  font-family: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: var(--t-16);
  line-height: var(--lh-22-4);
  letter-spacing: -.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* O Figma usa JetBrains Mono nos rotulos. A fonte nao esta licenciada aqui,
   entao a pilha do sistema entra no lugar. Trocar e mexer nesta linha. */
.mono {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

/* ---------- Moldura ----------
   O motivo estrutural do arquivo: cada bloco preto e um cartao arredondado
   com 20px de respiro em volta, sobre o branco da pagina. */
.moldura { padding: var(--pad-moldura); background: var(--c-branco); }
/* Sem moldura: o bloco encosta nas quatro bordas. Decisao do Eduardo em 05/08,
   primeiro para o hero — "deixa a head full black mesmo" — e na sequencia para
   Servicos, os dois blocos pretos da pagina.

   Isto substitui o respiro de 20 do Figma nesses dois cartoes. O respiro
   continua sendo o motivo estrutural do arquivo e continua descrito em
   `--pad-moldura`; o que mudou e que os blocos pretos deixaram de flutuar
   sobre o branco e passaram a ser faixa, na mesma logica da regua de logos.
   Se um dia voltarem a flutuar, e tirar a classe da secao. */
.moldura--cheia { padding: 0; }
.moldura--cheia > .moldura__card { border-radius: 0; }
.moldura__card {
  background: var(--bg);
  color: var(--fg);
  border-radius: var(--r-20);
  overflow: clip;
}

/* ---------- Coluna ----------
   1520 fixos, centrados. Nao e `max-width`: no Figma a coluna tem essa
   largura exata e o resto e respiro. */
.wrap { width: var(--w-conteudo); margin-inline: auto; }

/* ---------- Secao ----------
   Um respiro so, para toda secao. O vao entre duas quaisquer passa a ser
   sempre 160 (80 + 80), e nao mais um numero diferente a cada par.

   As faixas pretas (hero, Servicos) tem py zero e encostam de proposito: o
   vao antes e depois delas e o 80 da vizinha, simetrico dos dois lados. Ou
   seja, a pagina inteira tem apenas dois vaos — 160 entre seções claras, 80
   em volta das faixas — e os dois saem da mesma escala. */
.secao { background: var(--bg); color: var(--fg); padding-block: var(--e-4); }

/* ---------- Alternancia de fundo ----------
   De "Por que escolher" ate "Proximo passo" eram QUATRO secoes seguidas no
   mesmo #f5f5f5: nada separava uma da outra e o trecho lia como um bloco so.

   A alternancia usa os dois tons que a paleta ja tem — #fafafa e #f5f5f5 —
   e nao uma cor nova. Sao 5 pontos de diferenca, 2%: perto demais para virar
   listra, longe o bastante para o olho registrar que a secao trocou. E o
   "um pouquinho, quase nada" que o Eduardo pediu.

   A regra e simples: nenhum par vizinho repete o tom. Contando de cima:
   preto · #ececec · claro · preto · claro · base · claro · base · claro. */
.secao--claro { --bg: var(--c-osso); }

/* ---------- Tipografia ----------
   Nomes = corpo do Figma, para o CSS ficar conferivel contra o arquivo. */
.t-hero  { font-size: var(--t-hero);  line-height: var(--lh-hero);  font-weight: 500; letter-spacing: -.01em; }
.t-secao { font-size: var(--t-secao); line-height: var(--lh-secao); font-weight: 400; letter-spacing: -.01em; }
.t-40    { font-size: var(--t-40);    line-height: var(--lh-44);    font-weight: 500; letter-spacing: -.01em; }
.t-30    { font-size: var(--t-30);    line-height: var(--lh-37);    font-weight: 500; letter-spacing: -.01em; }
.t-22    { font-size: var(--t-22);    line-height: var(--lh-26);    font-weight: 500; letter-spacing: -.01em; }
.t-20    { font-size: var(--t-20);    line-height: var(--lh-23);    font-weight: 500; letter-spacing: -.01em; }
.t-18    { font-size: var(--t-18);    line-height: var(--lh-23-4);  font-weight: 500; letter-spacing: -.01em; }
.t-16    { font-size: var(--t-16);    line-height: var(--lh-22-4);  font-weight: 500; letter-spacing: -.01em; }
.t-15    { font-size: var(--t-15);    line-height: var(--lh-21);    font-weight: 500; letter-spacing: -.01em; }
.t-12    { font-size: var(--t-12);    line-height: var(--lh-15-6);  font-weight: 500; letter-spacing: -.01em; }
.t-10    { font-size: var(--t-10);    line-height: var(--lh-11);    font-weight: 500; letter-spacing: -.01em; }

.op-60 { opacity: .6; }
.op-50 { opacity: .5; }
.suave { color: var(--fg-soft); }

/* ---------- Corte da caixa de texto ----------
   Varias camadas do Figma trazem `text-box-trim: trim-both` com
   `text-box-edge: cap alphabetic`: a caixa do texto e cortada na altura de
   capitular em cima e na linha de base embaixo. O respiro em volta passa a
   ser medido a partir da letra, nao da linha.

   Nao e detalhe. A pilula de tag do case tem 12px de caixa para uma fonte de
   16.421px — e so com o corte que 12+12+12 fecha os 36px do arquivo. Sem ele
   a caixa vai a ~19.7px e a pilula sai 21% mais alta. Nos numeros da secao
   05 o erro e maior: a caixa de "7+" e 61px, nao os ~102px da entrelinha
   normal, e os gaps de 20px entre numero, rotulo e descricao apareceriam
   dobrados.

   Suportado no Chrome 133+ e Safari 18.2+. Onde nao houver, o @supports
   abaixo devolve a altura por entrelinha fixa, com o mesmo resultado nos
   blocos de uma linha (que sao os que definem altura de componente). */
.trim {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ==========================================================================
   TRANSICAO ENTRE PAGINAS
   `navigation: auto` liga a transicao para toda navegacao de mesma origem —
   e por isso que ela vale a pena aqui: sao tres linhas para a pagina inteira
   deixar de piscar entre um documento e outro.

   O ganho de verdade nao e o cross-fade: e o par de nomes. A foto do case na
   home e a capa na pagina do projeto recebem o mesmo `view-transition-name`
   (ver `ui.js`), e o navegador entende que sao o mesmo objeto — a foto do
   cartao voa e vira a capa. Nao ha animacao escrita para isso; ha uma
   identidade declarada.

   Onde nao houver suporte (Firefox hoje), a navegacao acontece normal. Nada
   depende disto para funcionar.
   ========================================================================== */
@view-transition { navigation: auto; }

::view-transition-group(*) { animation-duration: .55s; animation-timing-function: var(--ease); }
::view-transition-old(root) { animation: sai-suave .35s var(--ease) forwards; }
::view-transition-new(root) { animation: entra-suave .45s var(--ease) .1s backwards; }
@keyframes sai-suave   { to   { opacity: 0; } }
@keyframes entra-suave { from { opacity: 0; } }

/* A capsula do menu atravessa a navegacao como o mesmo objeto, em vez de
   sumir e voltar. */
.nav__capsula { view-transition-name: capsula-menu; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Entrada ---------- */
.rev { opacity: 0; transform: translateY(18px); }
.js .rev { transition: opacity var(--dur-lento) var(--ease), transform var(--dur-lento) var(--ease); }
.rev.is-vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rev, .js .rev { opacity: 1; transform: none; transition: none; }
}

/* ---------- Queda abaixo de 1280 ----------
   Aqui o 1:1 acaba (o Figma nao tem mobile). A coluna vira fluida. */
@media (max-width: 1280px) {
  .wrap { width: 100%; padding-inline: var(--gutter); }
  /* Mesma logica no celular: um respiro so para toda secao. */
  .secao { padding-block: clamp(48px, 6vw, 80px); }

  /* O corpo do hero sai de uma conta, nao de um `vw` escolhido no olho.
     Medido no proprio render: "Construindo presenca." ocupa **9.68em** nesta
     fonte. O espaco util e a janela menos as duas molduras (gutter x4 = 80).
     Logo, para caber numa linha:  corpo <= (100vw - 80) / 9.68.
     O divisor 10.4 e o 9.68 com ~7% de folga, para nao encostar.

     Antes era `clamp(40px, 7vw, 76px)`: o piso de 40 exigia 387px de largura
     util, que so existe a partir de ~470px de tela — por isso o titulo
     quebrava em QUATRO linhas de 360 a 436, em vez das duas que o <br> pede. */
  .t-hero  {
    font-size: clamp(26px, calc((100vw - var(--gutter) * 4) / 10.4), 76px);
    line-height: 1.02;
  }
  .t-secao { font-size: clamp(52px, 10vw, 112px); line-height: .92; }
  .t-40    { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; }
  .t-30    { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.23; }
}

/* ---------- Acessibilidade ---------- */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }