/* ==========================================================================
   NOVREN — LP v2 · SECOES
   Cada medida e o numero do Figma, em unidades --px. O node id do arquivo
   esta anotado em cada bloco para poder conferir contra a fonte.
   ========================================================================== */

/* ==========================================================================
   01 · HERO  (38:466 / 38:467)
   Cartao preto raio 20 com 20 de respiro; altura 967-40 = 927.
   Bloco central 944 de largura, gap 20 entre as tres partes.
   Brilho: elipse #ECECEC a 80% com desfoque 261.9, caixa 2214x2300 ancorada
   pelo topo a 909px; a imagem transborda a caixa pela margem do desfoque.
   ========================================================================== */
.hero__card {
  position: relative;
  display: grid; place-items: center;
  height: calc(927 * var(--px));
}
.hero__glow {
  position: absolute; left: 50%; top: calc(909 * var(--px));
  transform: translateX(-50%);
  width: calc(2214 * var(--px)); height: calc(2300 * var(--px));
  pointer-events: none; z-index: 0;
}
.hero__glow img {
  position: absolute;
  top: -22.78%; right: -23.66%; bottom: -22.78%; left: -23.66%;
  width: auto; height: auto; max-width: none;
}
.hero__conteudo {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(20 * var(--px));
  width: calc(944 * var(--px));
}
/* Figma 67:10210 — a linha tem 14 de altura, nao 18.667: o texto e cortado.
   O corte vai nos <span>, nao no flex: item anonimo de flex nao recebe
   `text-box-trim` (mesmo motivo da pilula de tag em components.css). */
.hero__rotulos {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  font-size: var(--t-mono-hero); line-height: calc(18.667 * var(--px));
  color: var(--c-cinza-75);
}
.hero__rotulos span { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
@supports not (text-box-trim: trim-both) {
  .hero__rotulos span { line-height: calc(14 * var(--px)); }
}
.hero__titulo { text-align: center; color: var(--c-cinza-20); white-space: nowrap; }
/* Entrada por mascara: a linha e uma janela que corta e o texto sobe de
   dentro. O respiro embaixo com margem negativa e obrigatorio — sem ele o
   corte come a perna do "ç" e do "p", que descem abaixo da linha de base. */
.hero__titulo .linha {
  display: block; overflow: hidden;
  padding-bottom: .12em; margin-bottom: -.12em;
}
.hero__titulo .linha > span { display: block; }
.js .hero__titulo .linha > span {
  transform: translateY(105%);
  transition: transform 1s var(--ease);
}
.js .hero__titulo.is-vis .linha > span { transform: none; }
.js .hero__titulo.is-vis .linha:nth-child(2) > span { transition-delay: .09s; }
@media (prefers-reduced-motion: reduce) {
  .js .hero__titulo .linha > span { transform: none; transition: none; }
}

/* O brilho segue o ponteiro. O deslocamento vem de duas variaveis que o JS
   atualiza; o `translateX(-50%)` original continua sendo o que centraliza. */
.hero__glow {
  transform: translateX(-50%) translate3d(var(--glow-x, 0px), var(--glow-y, 0px), 0);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .hero__glow { transform: translateX(-50%); transition: none; }
}
.hero__lede {
  width: 100%; text-align: center; color: var(--c-cinza-20);
  font-size: var(--t-30); line-height: var(--lh-37);
}

/* ==========================================================================
   02 · EMPRESAS QUE CONFIAM  (40:3978)
   Fundo #ececec, py-60, titulo 40, gap 70 ate a grade.
   ========================================================================== */
.confiam { background: var(--c-cinza-20); }
.confiam__inner { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); }
.confiam__titulo { text-align: center; white-space: nowrap; }

/* ==========================================================================
   03 · CASES  (39:86 / 39:286)
   Bloco de 1836 de largura. Linhas de 766.67; a dupla tem dois de 910 com
   gap 16. Tags a 20 da esquerda e 20 do fundo (top 712.77 de 766.67).
   ========================================================================== */
.cases__cabeca {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--e-1);
  width: calc(668 * var(--px)); margin-inline: auto;
  text-align: center;
}
.cases__lede { font-size: var(--t-16); line-height: var(--lh-22-4); color: var(--fg-soft); }

.cases__grade {
  display: flex; flex-direction: column; gap: var(--gap-16);
  width: var(--w-faixa); margin: var(--e-3) auto 0;
}
.cases__linha { display: grid; gap: var(--gap-16); grid-template-columns: 1fr; }
/* 1fr 1fr e nao dois 910 cravados: 910 + 16 + 910 = 1836, entao as duas
   formas dao o mesmo resultado ate 1920 — mas so a fracionaria acompanha a
   faixa quando ela cresce acima disso. */
.cases__linha--dupla { grid-template-columns: 1fr 1fr; }

/* Altura: 16/9, e nao os 766.67 do Figma.
   Os quatro cartoes do arquivo sao 1836x766.67 (2.39:1) e 910x766.67 (1.19:1),
   mas ali dentro nao ha foto — sao retangulos #c4c4c4. As nove fotos de case
   que temos sao todas 1920x1080. Encaixar 16:9 num cartao 2.39:1 pelo `cover`
   comia 25% da altura; no de 1.19:1, metade da largura.

   Decisao do Eduardo (04/08): o cartao segue a foto. O largo cresce de 766.67
   para 1032.75 e o duplo cai para 511.88 — nenhuma foto cortada. E o unico
   ponto da pagina onde a medida sai de proposito do arquivo, e o conferir.sh
   foi atualizado para cobrar os numeros novos.
   O cartao da pagina de projeto (42:1236) ja e 1836x1029.84 no proprio Figma,
   isto e, 16:9 — entao a home passa a concordar com ela. */
.case {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-20);
  background: var(--c-cinza-60);
  overflow: clip;
}
/* `>` e obrigatorio aqui. Como descendente, `.case img` tambem pegava a
   bandeirinha dentro da pilula de tag — mesma especificidade que
   `.tag--case img` e sections.css carrega depois, entao vencia e esticava a
   bandeira para 100% do pai (59.92x39.78 em vez de 18.075x12), inchando a
   pilula junto. */
.case > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-lento) var(--ease); }
.case:hover > img { transform: scale(1.02); }

/* ---------- Parallax nas capas ----------
   A foto anda mais devagar que o cartao enquanto a secao atravessa a tela.
   Sem uma linha de JS: `animation-timeline: view()` liga o progresso da
   animacao a posicao do elemento na viewport.

   O `--z` existe porque animacao vence declaracao comum — com a animacao
   rodando, o `transform: scale(1.02)` do hover nunca chegaria ao elemento.
   Entao a escala do hover entra por dentro do keyframe, como variavel.
   `@property` e o que faz essa variavel TRANSICIONAR em vez de saltar.

   `scale(1.14)` nao e enfeite: com a foto deslocando 5% para cada lado, sem a
   folga a borda do cartao apareceria vazia nos extremos. */
@property --z { syntax: '<number>'; initial-value: 1; inherits: false; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .case > img, .obras__item > img, .proj__capa img {
      --z: 1;
      transition: --z var(--dur-lento) var(--ease);
      animation: deriva linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .case:hover > img, .obras__item:hover > img { --z: 1.03; }
    @keyframes deriva {
      from { transform: translateY(-5%) scale(calc(1.14 * var(--z))); }
      to   { transform: translateY(5%)  scale(calc(1.14 * var(--z))); }
    }
  }
}
.case__tags {
  position: absolute; left: calc(20 * var(--px)); bottom: calc(20 * var(--px));
  display: flex; gap: calc(15 * var(--px));
}
/* Figma 39:275 — o botao fica a 60 do fim da grade.
   A largura vai cravada em 286 (o numero do arquivo) em vez de sair do texto:
   a mesma frase a 20px renderiza 203.34 aqui contra os 201 medidos no Figma,
   e essa sobra de 2.34 empurrava o botao para 288.34. E diferenca de metrica
   de glifo, nao de layout — o respiro lateral absorve, o componente fecha. */
.cases__cta { display: flex; justify-content: center; margin-top: var(--e-3); }
.cases__cta .btn { width: calc(286 * var(--px)); }

/* ==========================================================================
   04 · SERVICOS  (39:293 / 39:294)
   Cartao preto de 806 de altura. Coluna de rotulo 377, conteudo 1139,
   gap 4. "Servicos." a 144. Bloco inferior repete o recuo de 377.
   ========================================================================== */
.serv__card { display: grid; place-items: center; height: calc(806 * var(--px)); }
.serv__inner { display: flex; flex-direction: column; gap: calc(40 * var(--px)); width: var(--w-conteudo); }
.serv__topo { display: flex; gap: var(--gap-4); align-items: flex-start; }
.serv__aside { flex: none; width: var(--w-aside); }
.serv__olho { display: inline-flex; align-items: center; gap: calc(9 * var(--px)); font-size: var(--t-16); line-height: var(--lh-22-4); }
.serv__olho span[aria-hidden] {
  display: grid; place-items: center; flex: none;
  width: calc(18 * var(--px)); height: calc(18 * var(--px));
  background: var(--c-branco); color: var(--c-tinta);
  border-radius: 50%;
  font-size: calc(14 * var(--px)); line-height: 1;
}
.serv__titulo { flex: 1; min-width: 0; }
.serv__rodape { display: flex; gap: var(--gap-4); }

/* Item aberto: icone 80 + texto 300 (gap 44) + areas 381.6 */
.serv__linha { display: flex; gap: calc(40 * var(--px)); align-items: flex-start; }
.serv__bloco { display: flex; gap: calc(44 * var(--px)); align-items: center; width: calc(632.4 * var(--px)); }
.serv__icone { flex: none; width: calc(80 * var(--px)); height: calc(80 * var(--px)); border-radius: var(--r-14); overflow: clip; }
.serv__icone img { width: 100%; height: 100%; object-fit: cover; }
.serv__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(19.45 * var(--px)); }
.serv__nome { width: calc(300 * var(--px)); font-size: var(--t-30); line-height: var(--t-36); }
.serv__desc { font-size: var(--t-16); line-height: var(--lh-22-4); opacity: .6; }
.serv__areas { flex: none; width: calc(381.6 * var(--px)); display: flex; flex-direction: column; gap: calc(18 * var(--px)); }
.serv__areas-rotulo { font-size: var(--t-12); line-height: var(--lh-15-6); opacity: .6; }
.serv__tags { display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)) calc(12 * var(--px)); width: calc(350 * var(--px)); }

/* ==========================================================================
   05 · POR QUE ESCOLHER  (40:2659)
   py-60, gap 40. Quatro colunas de 377 com gap 4; cada uma sao DOIS cartoes
   empilhados com gap 4: o de cima com o titulo a 40 e o numero a 10, o de
   baixo com 326 de altura fixa. Depois, os quatro numeros a 85.
   ========================================================================== */
.porque__inner { display: flex; flex-direction: column; align-items: center; gap: var(--e-3); }
.porque__titulo { white-space: nowrap; }
.porque__cards { display: flex; gap: var(--gap-4); align-items: flex-end; }
.porque__col { display: flex; flex-direction: column; gap: var(--gap-4); width: var(--w-aside); }

.porque__topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(30 * var(--px));
  background: var(--c-branco); border-radius: var(--r-18);
}
.porque__n { opacity: .5; text-align: right; color: var(--c-tinta-alt); }
.porque__base {
  display: flex; flex-direction: column; justify-content: space-between;
  height: calc(326 * var(--px));
  padding: calc(30 * var(--px)) calc(30 * var(--px)) calc(29.99 * var(--px));
  background: var(--c-branco); border-radius: var(--r-18);
}
.porque__mote { width: calc(200 * var(--px)); color: var(--c-tinta-alt); }
.porque__apoio { font-size: var(--t-16); line-height: var(--lh-22-4); opacity: .6; }

/* Numeros — Figma 67:10493.
   Linha de 1520 com `items-center` (por isso o 4o item, mais curto, sobe).
   Itens de 173 / 173 / 204 / 204, gap 20 entre as tres partes.
   As tres partes sao cortadas: a caixa de "7+" mede 61 (nao os ~102 da
   entrelinha normal) e a do rotulo mede 11. Sem o corte os gaps de 20
   apareceriam somados a sobra de entrelinha dos dois lados. */
.numeros { display: flex; align-items: center; justify-content: space-between; width: var(--w-conteudo); }
.numeros__item { display: flex; flex-direction: column; gap: calc(20 * var(--px)); }
.numeros__item:nth-child(1), .numeros__item:nth-child(2) { width: calc(173 * var(--px)); }
.numeros__item:nth-child(3), .numeros__item:nth-child(4) { width: calc(204 * var(--px)); }
.numeros__n,
.numeros__rot,
.numeros__desc { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.numeros__n { font-size: var(--t-num); line-height: normal; letter-spacing: -.01em; font-weight: 500; }
.numeros__rot { font-size: var(--t-16); line-height: calc(16 * var(--px)); font-weight: 500; }
.numeros__desc { font-size: var(--t-16); line-height: var(--lh-22-4); color: var(--fg-soft); }
@supports not (text-box-trim: trim-both) {
  .numeros__n { line-height: calc(61 * var(--px)); }
  .numeros__rot { line-height: calc(11 * var(--px)); }
}

/* ==========================================================================
   06 · EXPERIENCIA / DEPOIMENTOS  (40:3045)
   py-100, gap 40. Cabecalho de 1520 com os dois titulos nas pontas (66 de
   entrelinha). Quatro colunas iguais com gap 4; a primeira e o resumo.
   ========================================================================== */
.depo__cabeca { display: flex; align-items: center; justify-content: space-between; width: var(--w-conteudo); }
.depo__cabeca p { line-height: calc(66 * var(--px)); }
.depo__grade { display: flex; gap: var(--gap-4); align-items: stretch; width: var(--w-conteudo); }
.depo__grade > * { flex: 1 1 0; min-width: 0; }

.depo__intro {
  display: flex; flex-direction: column; justify-content: center; gap: calc(223 * var(--px));
  padding: calc(51 * var(--px)) calc(30 * var(--px));
  background: var(--c-branco); border-radius: var(--r-18);
}
.depo__num { font-size: var(--t-num-depo); line-height: var(--t-num-depo); color: var(--c-tinta-alt); }
.depo__intro-desc { margin-top: calc(9.15 * var(--px)); font-size: var(--t-16); line-height: var(--lh-22-4); color: var(--fg-soft); }
.depo__marca { display: flex; align-items: center; justify-content: space-between; width: calc(317 * var(--px)); }
.depo__marca strong { font-size: var(--t-20); line-height: calc(22 * var(--px)); font-weight: 500; }
.depo__servicos { margin-top: calc(22 * var(--px)); font-size: var(--t-12); line-height: var(--lh-15-6); color: var(--c-tinta-alt); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.depo__intro .btn--g { width: 100%; margin-top: calc(40 * var(--px)); }

.depo__col { display: flex; flex-direction: column; gap: var(--gap-4); }
.depo__autor { display: flex; align-items: center; gap: calc(16 * var(--px)); }
.depo__foto { flex: none; width: calc(46 * var(--px)); height: calc(46 * var(--px)); border-radius: calc(7 * var(--px)); overflow: clip; }
.depo__foto img { width: 100%; height: 100%; object-fit: cover; }
.depo__nome { font-size: var(--t-18); line-height: calc(21.6 * var(--px)); }
.depo__cargo { margin-top: calc(2 * var(--px)); font-size: var(--t-12); line-height: var(--lh-15-6); opacity: .6; }
.depo__fala { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.depo__fala-topo { display: flex; align-items: flex-start; justify-content: space-between; }
.depo__aspas { position: relative; width: calc(16 * var(--px)); height: calc(16 * var(--px)); opacity: .3; }
.depo__aspas::before, .depo__aspas::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--c-tinta);
}
.depo__aspas::before { width: calc(16 * var(--px)); height: calc(2 * var(--px)); transform: translate(-50%, -50%); }
.depo__aspas::after  { width: calc(2 * var(--px)); height: calc(16 * var(--px)); transform: translate(-50%, -50%); }
.depo__texto { font-size: var(--t-20); line-height: var(--lh-23); color: var(--c-tinta); }

/* ==========================================================================
   07 · FAQ  (40:4152)
   py-80. "FAQ." a 144 na esquerda, lede de 380 embaixo com gap 29.445.
   Lista de 758 na direita, cartoes raio 14 com 26 de respiro, gap 4.
   ========================================================================== */
/* margin-inline: auto — sem isso o bloco de 1520 encosta na esquerda da
   secao, que e o unico lugar da pagina onde a coluna nao vinha centrada. */
.faq__grade { display: flex; gap: var(--gap-4); align-items: flex-start; width: var(--w-conteudo); margin-inline: auto; }
.faq__aside { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.faq__lede { width: calc(380 * var(--px)); font-size: var(--t-16); line-height: var(--lh-22-4); opacity: .6; }
.faq__lista { flex: none; width: var(--w-faq); display: flex; flex-direction: column; gap: var(--gap-4); }

.faq__item { background: var(--c-branco); border-radius: var(--r-14); overflow: clip; }
.faq__topo { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: calc(26 * var(--px)); text-align: left; }
.faq__q { font-size: var(--t-18); line-height: var(--lh-23-4); font-weight: 500; color: var(--c-tinta); }
.faq__sinal {
  flex: none; margin-left: calc(16 * var(--px));
  width: calc(17.804 * var(--px)); height: calc(18 * var(--px));
  transition: transform var(--dur) var(--ease);
}
.faq__item.is-open .faq__sinal { transform: rotate(45deg); }
.faq__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-lento) var(--ease); }
.faq__item.is-open .faq__painel { grid-template-rows: 1fr; }
.faq__painel > div { overflow: hidden; }
.faq__a { padding: 0 calc(26 * var(--px)) calc(26 * var(--px)); font-size: var(--t-15); line-height: var(--lh-21); color: var(--fg-soft); }
@media (prefers-reduced-motion: reduce) { .faq__painel { transition: none; } }

/* ==========================================================================
   08 · PROXIMO PASSO  (67:10586)
   Fundo #f5f5f5, px-200 py-80, gap 30. Titulo a 70/73.
   ========================================================================== */
.passo { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); text-align: center; }
.passo__olho { font-size: var(--t-24); line-height: normal; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.passo__titulo { font-size: var(--t-cta); line-height: var(--lh-cta); letter-spacing: -.01em; font-weight: 500; white-space: nowrap; }
.passo__botoes { display: flex; gap: var(--gap-10); }

/* ==========================================================================
   09 · RODAPE  (42:33)
   Fundo #fafafa, px-20 py-60, gap 40. Wordmark 1520x125.679. Texto 18/23.4
   em #7c7c7c com tracking -0.72.
   ========================================================================== */
.rodape { background: var(--c-osso); color: var(--c-cinza-70); }
.rodape__inner { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); width: var(--w-conteudo); margin-inline: auto; }
.rodape__topo { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
.rodape__col { display: flex; flex-direction: column; gap: var(--gap-10); }
.rodape__col a, .rodape__barra { font-size: var(--t-18); line-height: var(--lh-23-4); letter-spacing: -.04em; }
.rodape__col a:hover { color: var(--c-tinta); }
.rodape__wordmark { width: 100%; height: calc(125.679 * var(--px)); }
.rodape__wordmark img { width: 100%; height: 100%; }
.rodape__linha { width: 100%; height: 1px; background: currentColor; opacity: .2; }
.rodape__barra { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.rodape__legal { display: flex; gap: calc(14 * var(--px)); }
.rodape__social { display: flex; align-items: flex-end; gap: calc(5.676 * var(--px)); }
.rodape__social img { width: calc(13.129 * var(--px)); height: auto; }

/* ==========================================================================
   Queda abaixo de 1280 — o Figma nao tem tela mobile; daqui para baixo
   o que vale e legibilidade, nao fidelidade.
   ========================================================================== */
@media (max-width: 1280px) {
  /* O cartao vestia 496 fixos com 166 a 284 de conteudo — de 212 a 330px de
     ar, medidos em seis larguras. Metade a dois tercos do hero era vazio.
     Piso menor e respiro menor; o cartao continua sendo hero, sem ser buraco. */
  .hero__card { height: auto; min-height: clamp(380px, 54vh, 600px); padding: 52px var(--gutter); }
  .hero__glow { top: 92%; width: 130%; height: auto; aspect-ratio: 2214 / 2300; }
  .hero__conteudo { width: 100%; max-width: 944px; gap: 18px; }
  .hero__rotulos { font-size: 12px; line-height: 1.2; }
  .hero__titulo { white-space: normal; }
  .hero__lede { font-size: clamp(16px, 2.2vw, 24px); line-height: 1.3; }
  /* O <br> do lede vem do desenho a 1920, onde ele parte a frase no ponto
     certo. Estreito, ele briga com a quebra natural e deixa uma linha orfa. */
  .hero__lede br { display: none; }

  .confiam__inner { gap: 32px; }
  .confiam__titulo { white-space: normal; }

  .cases__cabeca { width: 100%; max-width: 668px; padding-inline: var(--gutter); gap: 16px; }
  .cases__lede { font-size: 15px; line-height: 1.45; }
  .cases__grade { width: 100%; padding-inline: var(--gutter); gap: 12px; margin-top: 40px; }
  .cases__linha--dupla { grid-template-columns: 1fr 1fr; gap: 12px; }
  .case { border-radius: 14px; }
  .case__tags { left: 12px; bottom: 12px; gap: 8px; }
  .cases__cta { margin-top: 32px; }

  .serv__card { height: auto; padding: 56px 0; }
  .serv__inner { width: 100%; padding-inline: var(--gutter); gap: 32px; }
  /* O rotulo empilha acima do titulo em vez de ficar ao lado. A coluna de
     recuo tinha 56 de largura e o rotulo mede 78: ele transbordava a propria
     coluna e corria por baixo de "Servicos.", que comeca a 100. Nao havia
     largura a apertar — a 52px de titulo os dois nao cabem lado a lado. */
  .serv__topo { flex-direction: column; gap: 14px; }
  .serv__rodape .serv__aside { display: none; }
  .serv__aside { width: auto; }
  .serv__olho { font-size: 14px; }
  .serv__olho span[aria-hidden] { width: 18px; height: 18px; font-size: 13px; }
  .serv__linha { flex-direction: column; gap: 24px; }
  .serv__bloco { width: 100%; gap: 20px; align-items: flex-start; }
  .serv__icone { width: 64px; height: 64px; border-radius: 12px; }
  .serv__nome { width: auto; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; }
  .serv__desc, .serv__apoio { font-size: 15px; line-height: 1.45; }
  .serv__areas { width: 100%; gap: 14px; }
  .serv__tags { width: 100%; gap: 8px; }

  .porque__inner { gap: 32px; }
  .porque__titulo { white-space: normal; text-align: center; }
  /* `50% - 4px` com gap 8 fecha exatamente 100%. Com `50% - 8px` sobravam 8
     que o `center` dividia nas pontas, e as duas colunas caiam em 24 enquanto
     o resto da pagina alinhava em 20 — 4px de desalinho, visiveis. */
  .porque__cards { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .porque__col { width: calc(50% - 4px); gap: 8px; }
  .porque__topo, .porque__base { padding: 24px; border-radius: 16px; }
  /* Sem altura minima. No desktop o cartao tem 326 fixos do Figma e o
     `space-between` empurra o apoio para o pe — e o desenho. No celular a
     altura vinha de um `min-height: 220` que sobrava 62 a 84px de vao morto no
     meio do cartao, medido nas quatro larguras. Aqui o cartao veste o texto. */
  .porque__base { height: auto; min-height: 0; justify-content: flex-start; gap: 14px; }
  .porque__mote { width: auto; font-size: 17px; line-height: 1.3; }
  .porque__apoio { font-size: 15px; line-height: 1.45; }

  .numeros { width: 100%; flex-wrap: wrap; gap: 32px; }
  .numeros__item { width: calc(50% - 16px); gap: 12px; }
  .numeros__n { font-size: clamp(44px, 7vw, 72px); }
  .numeros__rot, .numeros__desc { font-size: 15px; }
  .numeros__item .numeros__desc { width: auto; line-height: 1.45; }

  .depo__cabeca, .depo__grade { width: 100%; }
  .rodape__inner, .faq__grade { width: 100%; padding-inline: var(--gutter); }
  .depo__cabeca { flex-wrap: wrap; gap: 4px; }
  .depo__cabeca p { line-height: 1.2; }
  .depo__grade { flex-wrap: wrap; gap: 8px; }
  .depo__grade > * { flex: 1 1 calc(50% - 8px); }
  .depo__intro { gap: 40px; padding: 28px 24px; }
  .depo__num { font-size: 44px; line-height: 1; }
  .depo__marca { width: 100%; }
  .depo__texto { font-size: 17px; line-height: 1.3; }
  .depo__foto { width: 46px; height: 46px; }
  .depo__intro-desc, .depo__nome { font-size: 15px; line-height: 1.4; }

  .faq__grade { flex-direction: column; gap: 32px; }
  .faq__aside { width: 100%; gap: 18px; }
  .faq__lede { width: 100%; max-width: 480px; font-size: 15px; line-height: 1.45; }
  .faq__lista { width: 100%; gap: 6px; }
  .faq__topo { padding: 20px; }
  .faq__q { font-size: 16px; line-height: 1.3; }
  .faq__sinal { width: 17.8px; height: 18px; margin-left: 14px; }
  .faq__a { padding: 0 20px 20px; font-size: 15px; }

  .passo { padding-inline: var(--gutter); gap: 22px; }
  .passo__olho { font-size: 18px; }
  .passo__titulo { font-size: clamp(28px, 5vw, 56px); line-height: 1.05; white-space: normal; }
  .passo__botoes { flex-wrap: wrap; justify-content: center; gap: 10px; }

  .rodape__inner { gap: 32px; }
  .rodape__col a, .rodape__barra { font-size: 15px; letter-spacing: -.02em; }
  .rodape__wordmark { height: auto; }
  .rodape__wordmark img { height: auto; }
  .rodape__social img { width: 14px; }
}

@media (max-width: 760px) {
  .cases__linha--dupla { grid-template-columns: 1fr; }
  .porque__col, .numeros__item, .depo__grade > * { width: 100%; flex-basis: 100%; }
  .rodape__barra { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* As duas colunas do topo do rodape lado a lado a 390 deixavam
   "contato@novren.com.br" encostando na margem. Empilham. */
@media (max-width: 560px) {
  .rodape__topo { flex-direction: column; gap: 24px; }
}

/* ==========================================================================
   10 · PAGINA DE CONTATO  (42:187)
   Container de 1000 a partir do menu (96). Bloco de texto de 667 a esquerda
   comecando a 152 do topo; o form entra no lugar do frame de 749x440 que o
   arquivo deixou vazio a 771 da esquerda (gap 104).
   ========================================================================== */
.pagina { padding-top: calc(96 * var(--px)); background: var(--c-branco); }

.contato__topo {
  display: flex; gap: calc(104 * var(--px));
  width: var(--w-conteudo); margin-inline: auto;
  padding-block: calc(152 * var(--px)) calc(120 * var(--px));
}
.contato__texto { flex: none; width: calc(667 * var(--px)); }
.contato__titulo { font-size: var(--t-cta); line-height: var(--lh-cta); font-weight: 500; letter-spacing: -.01em; }
.contato__sub {
  width: calc(610 * var(--px)); margin-top: calc(30 * var(--px));
  font-size: calc(24 * var(--px)); line-height: calc(24 * var(--px));
}
.contato__corpo {
  width: calc(610 * var(--px)); margin-top: calc(30 * var(--px));
  font-size: var(--t-16); line-height: calc(24 * var(--px)); color: var(--fg-soft);
}
.contato__regua { width: calc(610 * var(--px)); height: 1px; margin-top: calc(32 * var(--px)); background: var(--c-cinza-35); }
.contato__ganha { margin-top: var(--e-2); }
.contato__ganha h2 { font-size: var(--t-30); line-height: var(--t-36); font-weight: 500; letter-spacing: -.01em; }
/* Os tres itens do arquivo caem em 0 / 277.5 / 545 dentro de 667, com as duas
   linhas em 206.75 e 474.25 — ou seja, respiro uniforme de 70.75. */
.contato__itens { display: flex; align-items: stretch; gap: calc(70.75 * var(--px)); margin-top: calc(30 * var(--px)); height: calc(48 * var(--px)); }
.contato__itens p { font-size: var(--t-16); line-height: calc(24 * var(--px)); }
.contato__itens p:nth-of-type(1) { width: calc(136 * var(--px)); }
.contato__itens p:nth-of-type(2) { width: calc(126 * var(--px)); }
.contato__itens p:nth-of-type(3) { width: calc(122 * var(--px)); }
.contato__itens i { display: block; width: 1px; background: var(--c-cinza-35); }

/* Mesmo formulario do popup, sem a moldura do popup: duas colunas e campo de
   linha. Nao ha override de grade aqui de proposito — o que vale e o
   `.pop__campos` que os dois compartilham. */
.contato__form { flex: none; width: calc(749 * var(--px)); margin-top: calc(32 * var(--px)); }
.contato__form .pop__pe { margin-top: calc(36 * var(--px)); }

/* "Latest Works (see more)" — 40/48, centrado, a 60 do topo da faixa. */
/* Mesma logica da home: na pagina de contato o bloco de cima e branco, e
   "Ultimos trabalhos" vinha branco tambem — duas faixas coladas sem nada
   entre elas. Um degrau de 5 pontos separa. */
.obras { padding-block: var(--e-4); background: var(--c-osso); }
.obras__titulo { width: var(--w-conteudo); margin-inline: auto; text-align: center; font-size: var(--t-40); line-height: calc(48 * var(--px)); font-weight: 500; letter-spacing: -.01em; }
/* Grade 3x4 de 604.909 com respiro 10.636 (42:956). A altura sai do 16:9 da
   foto, pelo mesmo motivo dos cases da home. */
.obras__grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(10.636 * var(--px));
  width: var(--w-faixa); margin: var(--e-3) auto 0;
}
.obras__item {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: var(--r-20); background: var(--c-cinza-60); overflow: clip;
}
.obras__item > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-lento) var(--ease); }
.obras__item:hover > img { transform: scale(1.02); }
.obras__item .case__tags { gap: calc(10 * var(--px)); left: calc(16 * var(--px)); bottom: calc(16 * var(--px)); }

/* ==========================================================================
   11 · PAGINA DE PROJETO  (42:1038)
   Faixa de 1836. Cabeca de 96 (titulo+ano a esquerda, resumo de 757 a
   direita), capa 1836x1029.84 (16:9 no proprio arquivo), ficha de 1521 e
   galeria de blocos 1 largo + 2 meios.
   ========================================================================== */
.proj { width: var(--w-faixa); margin-inline: auto; }
.proj__cabeca { display: flex; justify-content: space-between; align-items: flex-start; padding-top: calc(150 * var(--px)); }
.proj__nome { font-size: var(--t-40); line-height: calc(48 * var(--px)); font-weight: 500; letter-spacing: -.01em; }
.proj__ano { margin-top: calc(10 * var(--px)); font-size: var(--t-20); line-height: calc(24 * var(--px)); color: var(--fg-soft); }
.proj__resumo { flex: none; width: calc(757 * var(--px)); font-size: var(--t-16); line-height: calc(24 * var(--px)); color: var(--fg-soft); }

.proj__capa { margin-top: var(--e-2); aspect-ratio: 16 / 9; border-radius: var(--r-20); background: var(--c-cinza-60); overflow: clip; }
/* A outra metade do par de transicao: a foto do cartao de case na home recebe
   este mesmo nome no clique (ver ui.js), e o navegador liga as duas. */
.proj__capa img { width: 100%; height: 100%; object-fit: cover; view-transition-name: capa-projeto; }

.proj__ficha { display: flex; gap: calc(149 * var(--px)); width: calc(1521 * var(--px)); margin: var(--e-5) auto 0; }
/* Coluna esquerda: quatro linhas de 33.476 com 16.52 entre elas; a regra fica
   no topo e o par rotulo/valor a 21.476 dela. */
.proj__specs { flex: none; width: calc(750 * var(--px)); display: flex; flex-direction: column; gap: calc(16.52 * var(--px)); }
.proj__spec { border-top: 1px solid var(--c-cinza-35); padding-top: calc(21.476 * var(--px)); }
.proj__spec > div { display: flex; justify-content: space-between; font-size: var(--t-12); line-height: calc(12 * var(--px)); text-transform: uppercase; letter-spacing: .02em; }
.proj__spec dt { color: var(--fg-soft); }
.proj__spec dd { margin: 0; }

.proj__texto { flex: none; width: calc(622 * var(--px)); display: flex; flex-direction: column; gap: calc(24 * var(--px)); }
.proj__texto h2 { font-size: var(--t-30); line-height: var(--t-36); font-weight: 500; letter-spacing: -.01em; }
.proj__texto p, .proj__texto li { margin-top: calc(10 * var(--px)); font-size: var(--t-12); line-height: calc(18 * var(--px)); color: var(--fg-soft); }
.proj__texto li { margin-top: 0; line-height: calc(23 * var(--px)); }
.proj__texto ul { margin-top: calc(10 * var(--px)); }

.proj__galeria { display: flex; flex-direction: column; gap: calc(20 * var(--px)); margin-top: var(--e-5); }
.proj__linha { display: grid; gap: calc(20 * var(--px)); grid-template-columns: 1fr; }
/* 908 + 20 + 908 = 1836: mesmo motivo do dupla dos cases. */
.proj__linha--dupla { grid-template-columns: 1fr 1fr; }
.proj__peca {
  display: grid; place-items: center;
  border-radius: var(--r-20); background: var(--c-cinza-10);
  border: 1px dashed var(--c-cinza-35);
  color: var(--c-cinza-70); font-size: var(--t-15); text-align: center;
  padding: calc(24 * var(--px));
}
.proj__linha .proj__peca { aspect-ratio: 1836 / 1029.84; }
.proj__linha--dupla .proj__peca { aspect-ratio: 908 / 1029.84; }
.proj__voltar { display: flex; justify-content: center; padding-block: calc(80 * var(--px)); }

/* ==========================================================================
   12 · PAGINA DE CASES
   Mesma grade de 3 colunas da faixa "Latest Works", com cabeca propria.
   ========================================================================== */
.cases-pg__cabeca { display: flex; flex-direction: column; align-items: center; gap: var(--e-1); width: calc(668 * var(--px)); margin: calc(152 * var(--px)) auto 0; text-align: center; }

/* ==========================================================================
   13 · PAGINAS LEGAIS  (privacidade, termos)
   Nao existem no Figma. Coluna de leitura estreita: sao textos corridos, e
   linha longa demais cansa. 760 e proximo dos 758 da lista do FAQ, entao a
   pagina continua conversando com o resto do sistema.
   ========================================================================== */
.legal { width: calc(760 * var(--px)); margin: calc(152 * var(--px)) auto 0; }
.legal__titulo { font-size: var(--t-cta); line-height: var(--lh-cta); font-weight: 500; letter-spacing: -.01em; }
.legal__data { margin-top: calc(20 * var(--px)); font-size: var(--t-15); line-height: var(--lh-21); color: var(--fg-soft); }

/* Aviso de que o documento nao passou por revisao juridica e de que ha campos
   a preencher. Fica no topo, visivel — nao em comentario de codigo. */
.legal__aviso {
  margin-top: calc(40 * var(--px));
  padding: calc(24 * var(--px)) calc(26 * var(--px));
  border-radius: var(--r-14);
  background: var(--c-cinza-20);
  font-size: var(--t-15); line-height: var(--lh-21);
}
.legal__aviso strong { font-weight: 600; }

.legal section { margin-top: var(--e-2); }
.legal h2 {
  font-size: var(--t-24); line-height: calc(30 * var(--px));
  font-weight: 500; letter-spacing: -.01em;
}
.legal h3 {
  margin-top: calc(24 * var(--px));
  font-size: var(--t-18); line-height: var(--lh-23-4); font-weight: 500;
}
.legal p { margin-top: calc(16 * var(--px)); font-size: var(--t-16); line-height: calc(25 * var(--px)); color: var(--fg-soft); }
.legal ul { margin-top: calc(16 * var(--px)); display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.legal li {
  position: relative; padding-left: calc(20 * var(--px));
  font-size: var(--t-16); line-height: calc(25 * var(--px)); color: var(--fg-soft);
}
.legal li::before {
  content: ''; position: absolute; left: 0; top: calc(11 * var(--px));
  width: calc(6 * var(--px)); height: calc(1.5 * var(--px));
  background: currentColor; opacity: .5;
}
.legal a { text-decoration: underline; }
/* Lacuna que depende de decisao de voces — marcada, nao preenchida no chute. */
.falta {
  display: inline-block;
  padding: calc(1 * var(--px)) calc(7 * var(--px));
  border-radius: calc(4 * var(--px));
  background: var(--c-cinza-35); color: var(--c-tinta);
  font-size: calc(14 * var(--px));
}
.legal__pe { margin: calc(60 * var(--px)) 0 calc(100 * var(--px)); }

/* ==========================================================================
   Queda abaixo de 1280 — paginas novas
   ========================================================================== */
@media (max-width: 1280px) {
  .pagina { padding-top: 72px; }

  .contato__topo { flex-direction: column; gap: 48px; width: 100%; padding: 64px var(--gutter) 56px; }
  .contato__texto, .contato__form { width: 100%; margin-top: 0; }
  .contato__titulo { font-size: clamp(30px, 5.4vw, 58px); line-height: 1.06; }
  .contato__sub { width: 100%; font-size: clamp(17px, 2.2vw, 22px); line-height: 1.3; margin-top: 20px; }
  .contato__corpo, .contato__regua, .contato__ganha h2 { width: 100%; }
  .contato__corpo { font-size: 15px; line-height: 1.5; margin-top: 20px; }
  .contato__ganha h2 { font-size: clamp(20px, 2.6vw, 28px); line-height: 1.2; }
  .contato__itens { flex-wrap: wrap; height: auto; gap: 20px; }
  .contato__itens p { width: calc(50% - 10px) !important; font-size: 15px; line-height: 1.4; }
  .contato__itens i { display: none; }

  .obras { padding-block: 40px 64px; }
  .obras__titulo { width: 100%; padding-inline: var(--gutter); font-size: clamp(24px, 3.4vw, 40px); line-height: 1.15; }
  .obras__grade { width: 100%; padding-inline: var(--gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
  .obras__item { border-radius: 14px; }

  .proj { width: 100%; padding-inline: var(--gutter); }
  .proj__cabeca { flex-direction: column; gap: 24px; padding-top: 56px; }
  .proj__nome { font-size: clamp(26px, 4vw, 40px); line-height: 1.15; }
  .proj__resumo { width: 100%; font-size: 15px; line-height: 1.5; }
  .proj__capa { margin-top: 28px; border-radius: 14px; }
  .proj__ficha { flex-direction: column; gap: 40px; width: 100%; margin-top: 56px; }
  .proj__specs, .proj__texto { width: 100%; }
  .proj__texto h2 { font-size: clamp(20px, 2.6vw, 28px); line-height: 1.2; }
  .proj__texto p, .proj__texto li { font-size: 13px; line-height: 1.55; }
  .proj__galeria { margin-top: 56px; gap: 12px; }
  .proj__linha--dupla { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* Enquanto sao placeholder, as seis pecas nao herdam a proporcao do Figma
     no celular: 1836x1030 a 390 de largura dava seis retangulos vazios de
     ~500 de altura cada, e a pagina virava 3.000px de nada. Quando entrar
     peca de verdade, a proporcao volta com ela. */
  .proj__linha .proj__peca,
  .proj__linha--dupla .proj__peca { aspect-ratio: auto; min-height: 150px; }
  .proj__peca { border-radius: 14px; font-size: 14px; }
  .proj__voltar { padding-block: 56px; }

  .cases-pg__cabeca { width: 100%; max-width: 668px; padding-inline: var(--gutter); margin-top: 56px; gap: 16px; }

  .legal { width: 100%; max-width: 760px; padding-inline: var(--gutter); margin-top: 56px; }
  .legal__titulo { font-size: clamp(30px, 5.4vw, 58px); line-height: 1.06; }
  .legal__aviso { margin-top: 28px; padding: 20px; border-radius: 12px; font-size: 14px; }
  .legal section { margin-top: 36px; }
  .legal h2 { font-size: clamp(18px, 2.4vw, 24px); line-height: 1.25; }
  .legal h3 { font-size: 16px; }
  .legal p, .legal li { font-size: 15px; line-height: 1.6; }
  .legal li::before { top: 10px; }
  .legal__pe { margin: 40px 0 64px; }
}
@media (max-width: 640px) {
  .obras__grade { grid-template-columns: 1fr; }
  .proj__linha--dupla { grid-template-columns: 1fr; }
  .contato__itens p { width: 100% !important; }
}