/*
  Brecha · cópia do site brechaeditorial.com (Wix Studio)

  O site original escala tudo junto com a largura da tela. Aqui isso é feito
  com a unidade --u:
    · computador (1024px pra cima): 1u = 1px numa tela de 1440px, e o conteúdo
      para de crescer em 1920px
    · celular (até 1023px): 1u = 1px numa tela de 390px
  Todas as medidas abaixo foram tiradas do site no ar nessas duas larguras.
  Formulário, bordas e sombras continuam em px fixo, como no original.
*/

:root {
  --azul: #3f67ff;
  --cinza: #ebeced;
  --marinho: #312783;
  --azul-escuro: #1a2141;
  --areia: #e9ded2;
  --creme: #feffea;
  --brilho: 0 0 13px 0 rgb(21, 94, 219);
  --linha-campo: rgba(63, 103, 255, .6);
  --u: calc(min(100vw, 1920px) / 1440);
}
@supports (width: 1cqw) {
  :root { --u: calc(min(100cqw, 1920px) / 1440); }
}
@media (max-width: 1023px) {
  :root { --u: calc(min(100vw, 600px) / 390); }
  @supports (width: 1cqw) {
    :root { --u: calc(min(100cqw, 600px) / 390); }
  }
}

/* ---------- base ---------- */

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

html {
  background: var(--azul);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cinza);
  color: var(--azul);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.menu-aberto { overflow: hidden; }

/* A régua da unidade --u. O menu de celular fica fora desse bloco de
   propósito: lá dentro ele passaria a se posicionar pela página, não pela tela. */
.pagina { container-type: inline-size; }

h1, h2, h3, p, ul, blockquote, figure { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
em { font-style: italic; }

.c { position: relative; max-width: 1920px; margin-inline: auto; }

/* Transição entre páginas (refeita em 2026-10-05; a versão com o recurso
   nativo do navegador não disparava nos cliques). Ao clicar num link do site,
   um véu com a cor de fundo da página de destino cobre a atual (0,5s); a nova
   abre coberta por ele e se revela (0,5s). O azul de uma página vira o azul
   escuro da outra sem corte. Funciona em qualquer navegador; js/main.js faz a
   saída e o script curto no <head> de cada página prepara a entrada. */
.veu-transicao {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--veu-cor, var(--azul));
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s cubic-bezier(.445, .05, .55, .95);
}
.veu-transicao.cobre { opacity: 1; pointer-events: auto; }
@keyframes veu-sai { from { opacity: 1; } to { opacity: 0; } }
html.entrando body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--veu-cor, var(--azul));
  pointer-events: none;
  animation: veu-sai .5s cubic-bezier(.445, .05, .55, .95) both;
}

.pular {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 100;
  padding: 8px 16px;
  background: #fff;
  color: #116dff;
  font: 14px Helvetica, Arial, sans-serif;
  transform: translate(-50%, -300%);
}
.pular:focus { transform: translate(-50%, 0); }

/* ---------- topo ---------- */

.topo { background: var(--azul); }
.topo .c { height: calc(113.73 * var(--u)); }

.topo-marca {
  position: absolute;
  /* lupa: js/main.js põe --z conforme a distância do mouse; cresce da borda esquerda */
  transform: scale(var(--z, 1));
  transform-origin: left center;
  top: calc(27 * var(--u));
  left: calc(52 * var(--u));
  width: calc(123 * var(--u));
  height: calc(64 * var(--u));
}
.topo-marca img { width: 100%; height: 100%; object-fit: contain; }

.topo-nav {
  position: absolute;
  top: calc(42 * var(--u));
  right: calc(72 * var(--u));
}
/* Menu em teste (2026-10-05), no modelo da referência do Lovable (print do
   Luan): centralizado na largura, caixa alta, letra pequena e espaçada, na
   altura do centro do logo. A página atual fica em negrito; o hover clareia. */
/* Alinhado à direita (2026-10-05), com o centro na altura do centro do logo.
   Lupa por proximidade: js/main.js põe --z em cada item (1 = normal) conforme
   a distância do mouse; o item cresce pra esquerda e pra cima e pra baixo. */
.topo-nav {
  top: calc(59 * var(--u));
  right: calc(74 * var(--u));
  transform: translateY(-50%);
}
.topo-nav ul { display: flex; align-items: center; gap: calc(42 * var(--u)); }
.topo-nav a,
.topo-nav span {
  display: block;
  color: rgba(235, 236, 237, .78);
  font-size: calc(14 * var(--u) * var(--z, 1));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s ease;
}
.topo-nav span { cursor: default; }
.topo-nav a:hover,
.topo-nav span:hover { color: var(--cinza); }
.topo-nav [aria-current="page"] { color: var(--cinza); font-weight: 600; }

.topo-menu { display: none; }

/* menu de celular */
.menu-movel {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--azul);
  animation: aparece .3s ease both;
}
.menu-movel[hidden] { display: none; }
.menu-fechar {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
}
.menu-fechar svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); fill: var(--marinho); }
.menu-movel nav {
  position: absolute;
  top: calc(100 * var(--u));
  left: 0;
  right: 0;
  padding: calc(6 * var(--u));
}
.menu-movel li { height: calc(47 * var(--u)); }
.menu-movel li + li { margin-top: calc(12 * var(--u)); }
.menu-movel a,
.menu-movel li span {
  display: inline-block;
  margin-left: calc(13 * var(--u));
  padding: 0 calc(12 * var(--u));
  color: var(--cinza);
  font-size: calc(33 * var(--u));
  line-height: calc(45 * var(--u));
}
.menu-movel [aria-current="page"] { font-weight: 600; }

/* ---------- peças que se repetem ---------- */

.secao { background: var(--cinza); }
.secao--azul { background: var(--azul); color: var(--cinza); }

.degrade {
  height: calc(var(--h) * var(--u));
  background: linear-gradient(180deg, var(--azul) 0%, var(--cinza) 100%);
}
/* Degradê antes do rodapé (suavizado em 2026-10-05): mesma curva do degradê
   longo do topo, invertida. --hx (e --hxm no celular) é quanto ele começa
   antes, por trás do espaço vazio do fim da seção de cima; a altura cresce o
   mesmo tanto e a margem negativa compensa, então nada muda de lugar. */
.degrade--sobe {
  height: calc((var(--h) + var(--hx, 0)) * var(--u));
  margin-top: calc(var(--hx, 0) * -1 * var(--u));
  background: linear-gradient(180deg,
    #ebeced 0%, #e6e9ee 10%, #d8e0f1 20%, #c3d2f5 30%, #abc1f8 40%, #90affb 50%,
    #779bfd 60%, #6088fe 70%, #4f78ff 80%, #436cff 90%, #3f67ff 100%);
}

/* "01  Projeto com foco em objetivos" */
.rotulo {
  display: flex;
  padding-left: calc(23 * var(--u));
  font-size: calc(25.875 * var(--u));
  line-height: 1.2;
}
.rotulo h2 { font-size: inherit; line-height: inherit; }
.rotulo-num { flex: none; width: calc(354 * var(--u)); text-transform: uppercase; }
.rotulo .aperta { letter-spacing: -.03em; }

.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: 999px;
  font-size: min(19px, calc(20.04 * var(--u)));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.botao:hover { text-decoration: underline; }
/* lupa nos botões (js/main.js): o botão inteiro (caixa, borda, sombra e texto) cresce */
.botao, .nl-enviar, .filtro-op { scale: var(--zb, 1); transform-origin: center; }
.botao--claro { border-color: var(--cinza); color: var(--cinza); box-shadow: var(--brilho); }
.botao--creme { border-color: var(--cinza); color: var(--creme); box-shadow: var(--brilho); }
.botao--areia { border-color: var(--cinza); background: var(--areia); color: var(--marinho); box-shadow: var(--brilho); }
.botao--azul { border-color: var(--azul); color: var(--azul); }
.botao--fundo { background: var(--cinza); }
.botao--haas { font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }

/* ---------- início ---------- */

.hero { background: var(--azul); color: var(--cinza); }

.hero-inicio .c { padding: calc(13 * var(--u)) 0 calc(64.6 * var(--u)); }
.hero-inicio h1 {
  width: calc(1347 * var(--u));
  margin-left: calc(44 * var(--u));
  font-size: calc(202.5 * var(--u));
  line-height: .85;
  letter-spacing: max(-5px, calc(-5.3 * var(--u)));
}
.hero-linha1 { display: flex; align-items: flex-start; margin-top: calc(80 * var(--u)); }
.hero-lista {
  width: calc(226 * var(--u));
  margin-left: calc(732 * var(--u));
  font-size: calc(22.5 * var(--u));
  line-height: 1.2;
  text-transform: uppercase;
}
.hero-texto {
  width: calc(268 * var(--u));
  margin-left: calc(101 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1.2;
}
.hero-linha2 { position: relative; height: calc(49 * var(--u)); margin-top: calc(118 * var(--u)); }
.hero-linha2 > * { position: absolute; }
.hero-num {
  top: calc(14.4 * var(--u));
  font-size: min(16px, calc(16.875 * var(--u)));
  line-height: min(23px, calc(24.26 * var(--u)));
  text-transform: uppercase;
}
.hero-num--1 { left: calc(44 * var(--u)); width: calc(274 * var(--u)); }
.hero-num--2 { left: calc(322 * var(--u)); width: calc(319 * var(--u)); }
.hero-linha2 .botao { width: calc(307 * var(--u)); height: calc(49 * var(--u)); }
.hero-botao--1 { top: 0; left: calc(710 * var(--u)); }
.hero-botao--2 { top: calc(1 * var(--u)); left: calc(1052 * var(--u)); }

/* 01 · projeto com foco em objetivos */
.objetivos .c { padding: calc(5 * var(--u)) 0 calc(61 * var(--u)); }  /* subiu 130 (2026-10-08): eram 135 */
.objetivos-lista { margin: calc(141 * var(--u)) calc(22 * var(--u)) 0 calc(23 * var(--u)); }
.objetivo {
  display: grid;
  grid-template-columns: calc(354 * var(--u)) calc(var(--w) * var(--u)) 1fr;
  align-items: start;
  padding-top: calc(9 * var(--u));
  border-top: 3px solid var(--marinho);
  font-size: min(16px, calc(16.875 * var(--u)));
  line-height: min(23px, calc(24.26 * var(--u)));
}
.objetivo + .objetivo { margin-top: calc(22 * var(--u)); }
.objetivo h3 { grid-column: 1; grid-row: 1; width: calc(283 * var(--u)); font-size: inherit; line-height: inherit; }
.objetivo p { grid-column: 2; grid-row: 1; }
.objetivo img {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: calc(692 * var(--u));
  height: calc(304 * var(--u));
  border-radius: calc(22.5 * var(--u));
  object-fit: cover;
}
.objetivos .botao {
  width: calc(317 * var(--u));
  height: calc(51 * var(--u));
  margin: calc(84 * var(--u)) 0 0 calc(726 * var(--u));
}

/* 02 · como fazemos */
.como .c { padding: calc(101 * var(--u)) 0 calc(165 * var(--u)); }
.como-frase {
  width: calc(1354 * var(--u));
  margin: calc(62 * var(--u)) 0 0 calc(21 * var(--u));
  font-size: calc(105.75 * var(--u));
  line-height: .94;
  letter-spacing: -.05em;
}
.como .botao {
  width: calc(317 * var(--u));
  height: calc(50 * var(--u));
  margin: calc(54 * var(--u)) 0 0 calc(24 * var(--u));
}

/* 03 · histórias de sucesso */
.historias .c { padding: calc(135 * var(--u)) 0 calc(56 * var(--u)); }
.historias-corpo {
  display: grid;
  grid-template-columns: calc(545 * var(--u)) calc(691 * var(--u));
  column-gap: calc(158 * var(--u));
  margin: calc(98 * var(--u)) 0 0 calc(23 * var(--u));
}
.historias-citacao {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  grid-column: 1;
  grid-row: 1;
}
.historias-citacao .historias-frase {
  margin-top: calc(1 * var(--u));
  font-size: calc(56.25 * var(--u));
  line-height: 1;
}
.historias-autor { font-size: min(16px, calc(16.875 * var(--u))); line-height: min(23px, calc(24.26 * var(--u))); }
.historias-foto {
  grid-column: 2;
  grid-row: 1;
  width: calc(691 * var(--u));
  height: calc(488 * var(--u));
  object-fit: cover;
  object-position: 100% 100%;
}
.historias .botao {
  grid-column: 2;
  grid-row: 2;
  width: calc(317 * var(--u));
  height: calc(50 * var(--u));
  margin-top: calc(52 * var(--u));
}

/* 04 · mantenha-se à frente */
/* o formulário tem tamanho fixo em px; a altura mínima mantém a seção
   escalando como no original em telas maiores que 1920px */
.frente .c { min-height: calc(919 * var(--u)); padding: calc(135 * var(--u)) 0 calc(22 * var(--u)); }
.frente-frase {
  width: calc(1393 * var(--u));
  margin: calc(90 * var(--u)) 0 0 calc(23 * var(--u));
  font-size: calc(112.5 * var(--u));
  line-height: 1;
  letter-spacing: -.05em;
}

.newsletter {
  width: calc(689 * var(--u));
  margin: calc(44 * var(--u)) 0 0 calc(726 * var(--u));
  padding: 1px 0 2px;
  color: var(--marinho);
  font-size: 15px;
  line-height: 18px;
}
.nl-rotulo { display: block; }
.nl-campo {
  height: 35px;
  margin-top: 8px;
  padding-right: 12px;
  border-bottom: 1px solid var(--linha-campo);
}
.nl-campo input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 8px 0 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--marinho);
  font: 15px/18px "Instrument Sans", sans-serif;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.nl-campo input::placeholder { color: var(--marinho); opacity: 1; }
.nl-aceite {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 23px;
  margin-top: 9px;
  line-height: 22.5px;
  cursor: pointer;
}
.nl-aceite input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--linha-campo);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.nl-aceite input:checked {
  border-color: var(--marinho);
  background: var(--marinho) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23ebeced' stroke-width='1.6'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.nl-enviar {
  display: block;
  width: 172px;
  height: 43px;
  margin-top: 8px;
  border: 1px solid var(--marinho);
  color: var(--marinho);
  font-size: min(19px, calc(20.04 * var(--u)));
  line-height: 24px;
}
.nl-aviso { margin-top: 8px; }
.nl-aviso:empty { display: none; }

/* ---------- páginas internas ---------- */

.hero-pagina .c { padding-top: calc(92 * var(--u)); }
.hero-pagina h1 {
  font-size: calc(99 * var(--u));
  line-height: .97;
  letter-spacing: -.05em;
}
.hero-sobre .c { padding-bottom: 0; }
.hero-sobre h1 { width: calc(1306 * var(--u)); margin-left: calc(74 * var(--u)); }
/* a página de política mantém o espaço de antes */
.hero-politica .c { padding-bottom: calc(122 * var(--u)); }
.hero-politica h1 { width: calc(1306 * var(--u)); margin-left: calc(74 * var(--u)); }
.hero-solucoes .c { padding-bottom: calc(123 * var(--u)); }
.hero-solucoes h1 { width: calc(1306 * var(--u)); margin-left: calc(74 * var(--u)); }

/* Degradê longo do topo (aprovado pelo Luan em 2026-10-03). Fica no fundo do
   <main>: o azul segura o título e a transição pro cinza passa por trás dos
   espaços que já existiam, sem mudar nada de lugar. Cada página diz no
   próprio <main> onde a transição começa (--di) e quanto ela dura (--dl),
   medidos a partir do topo da área azul, em u. --dim e --dlm são os mesmos
   valores no celular. A transição termina em volta do primeiro texto da
   página, quando a cor já está a 96% do cinza. Cores misturadas em OKLab e
   espaçadas numa curva suave. */
.degrade-longo {
  --d-ini: calc(var(--di) * var(--u));
  --d-len: calc(var(--dl) * var(--u));
  background:
    linear-gradient(180deg,
      #3f67ff 0,
      #3f67ff calc(var(--d-ini) + 0.0 * var(--d-len)),
      #436cff calc(var(--d-ini) + 0.1 * var(--d-len)),
      #4f78ff calc(var(--d-ini) + 0.2 * var(--d-len)),
      #6088fe calc(var(--d-ini) + 0.3 * var(--d-len)),
      #779bfd calc(var(--d-ini) + 0.4 * var(--d-len)),
      #90affb calc(var(--d-ini) + 0.5 * var(--d-len)),
      #abc1f8 calc(var(--d-ini) + 0.6 * var(--d-len)),
      #c3d2f5 calc(var(--d-ini) + 0.7 * var(--d-len)),
      #d8e0f1 calc(var(--d-ini) + 0.8 * var(--d-len)),
      #e6e9ee calc(var(--d-ini) + 0.9 * var(--d-len)),
      #ebeced calc(var(--d-ini) + 1.0 * var(--d-len)))
      top / 100% calc(var(--d-ini) + var(--d-len)) no-repeat,
    var(--cinza);
}
.degrade-longo > .hero,
.degrade-longo > .hero + .degrade,
.degrade-longo > .hero + .secao,
.degrade-longo > .hero + .degrade + .secao { background: transparent; }

/* Teste (2026-10-05): página Projetos com o fundo todo em azul-marinho quase
   preto, sem degradê. Os espaços dos degradês continuam, só que chapados,
   então nada muda de lugar. */
html:has(.pagina--escura) { background: var(--azul-escuro); }
.pagina--escura,
.pagina--escura .topo,
.pagina--escura .hero,
.pagina--escura .secao,
.pagina--escura .degrade,
.pagina--escura .rodape { background: var(--azul-escuro); }
/* sobre o azul escuro, texto azul reprova (3,4:1, ver design-guide); vai cinza claro */
.pagina--escura .secao { color: var(--cinza); }

/* projetos: galeria a 135u do título (2026-10-05, antes ficava a 466u) */
.hero-projetos .c { padding-bottom: 0; }
.hero-projetos h1 { margin-left: calc(74 * var(--u)); }

/* o filtro ocupa 102u logo abaixo do título; a galeria continua a 240u dele */
.projetos { padding: calc(138 * var(--u)) 0 calc(135 * var(--u)); }

/* Filtro por serviço (2026-10-05). js/main.js mostra só os projetos com o
   serviço escolhido e remonta as duas colunas pela regra da coluna mais curta. */
.filtro {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  height: calc(38 * var(--u));
  margin: calc(64 * var(--u)) 0 0 calc(74 * var(--u));
}
.filtro-op {
  padding: 0 calc(18 * var(--u));
  height: calc(38 * var(--u));
  border: 1px solid rgba(235, 236, 237, .4);
  border-radius: 999px;
  color: var(--cinza);
  font-size: calc(13 * var(--u));
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.filtro-op:hover { border-color: var(--cinza); }
.filtro-op[aria-pressed="true"] { border-color: var(--azul); background: var(--azul); color: var(--cinza); }
.filtro-op:disabled { opacity: .35; cursor: default; }
.filtro-n { margin-left: .5em; opacity: .6; }
.galeria { transition: opacity .3s ease; }
.galeria.trocando { opacity: 0; }

/* Galeria copiada da home do luanfreitas.co (Wix Pro Gallery). Lá as margens
   e os espaços são fixos em px, não escalam com a tela: 80px dos lados e
   160px entre colunas e entre imagens. Cada imagem mantém a proporção. */
.galeria { display: flex; gap: 160px; padding: 0 80px; }
.galeria-col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 160px;
  min-width: 0;
}
.galeria-item a { position: relative; display: block; isolation: isolate; color: var(--cinza); }
.galeria-item img { width: 100%; height: auto; }

/* Mouse-over (opção 3 do teste, escolhida em 2026-10-05): a capa vira
   monocromia azul com título e autoria no centro, o mesmo tratamento do topo
   da página do projeto. Só em aparelho com mouse. */
.galeria { --col: calc((100cqw - 320px) / 2); }
.galeria-info {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8%;
  text-align: center;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.galeria-info b {
  font-size: calc(var(--col) * .065);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.05em;
}
.galeria-info i {
  margin-top: calc(var(--col) * .03);
  font-size: max(11px, calc(var(--col) * .022));
  font-style: normal;
  letter-spacing: .15em;
  text-transform: uppercase;
}
/* serviços prestados no projeto: capa, projeto gráfico, diagramação,
   tradução, revisão, preparação */
.galeria-servicos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: max(5px, calc(var(--col) * .01));
  max-width: 90%;
  margin-top: calc(var(--col) * .05);
}
.galeria-servicos li {
  padding: .55em 1em .45em;
  border-radius: 999px;
  background: var(--cinza);
  color: var(--azul-escuro);
  white-space: nowrap;
  font-size: calc(14.76 * var(--u));
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}
@media (hover: hover) {
  /* a capa encolhe um pouco, devagar (pedido do Luan, 2026-10-05) */
  .galeria-item a { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
  .galeria-item img { transition: filter .6s ease; }
  .galeria-item a:hover { transform: scale(.94); }
  .galeria-item a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--azul);
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity .6s ease;
  }
  .galeria-item a:hover img { filter: grayscale(1) contrast(1.1); }
  .galeria-item a:hover::after,
  .galeria-item a:hover .galeria-info { opacity: 1; }
}

/* ---------- página de cada projeto (projetos/*.html) ----------
   Estrutura da referência do Lovable (print do Luan, 2026-10-03), com as cores
   e a letra da Brecha. As medidas são as do print levadas pra 1440. */

.tags { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.tags li {
  padding: calc(7 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u));
  border: 1px solid;
  font-size: calc(12.5 * var(--u));
  line-height: 1;
  letter-spacing: 0px;
  text-transform: uppercase;
}

/* o topo fica transparente por cima da foto, como na referência */
.pagina--projeto { position: relative; }
.pagina--projeto .topo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: transparent;
}

/* foto em monocromia azul: cinza multiplicado pelo azul da marca */
.projeto-hero {
  position: relative;
  isolation: isolate;
  height: calc(819 * var(--u));
  overflow: hidden;
  background: var(--azul);
  color: var(--cinza);
}
.projeto-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}
.projeto-hero .c {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.projeto-hero h1 {
  max-width: calc(1186 * var(--u));
  font-size: calc(118 * var(--u));
  line-height: .94;
  letter-spacing: -.05em;
  text-align: center;
}
.projeto-hero-pe {
  position: absolute;
  left: calc(127 * var(--u));
  right: calc(129 * var(--u));
  bottom: calc(42 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
}
.projeto-hero-meta {
  font-size: calc(14 * var(--u));
  letter-spacing: 0px;
  text-transform: uppercase;
}
.projeto-hero .tags { margin-left: auto; }
.projeto-hero .tags li { border-color: rgba(235, 236, 237, .6); }

/* ficha em grade de 4 colunas (2026-10-05): muitos campos, nenhuma linha
   comprida; o texto descritivo vem embaixo, a partir da 2ª coluna */
.projeto-info .c {
  padding: calc(99 * var(--u)) calc(129 * var(--u)) 0 calc(127 * var(--u));
}
.projeto-ficha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: calc(40 * var(--u));
  row-gap: calc(44 * var(--u));
}
.projeto-ficha dd.a-definir { opacity: .4; }

/* categorias na ficha: pílula no azul principal da Brecha, texto claro
   (4,6:1 no design-guide) */
.ficha-box .tags li {
  padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(7 * var(--u));
  font-size: calc(14.76 * var(--u));
  border: 0;
  border-radius: 999px;
  background: var(--azul);
  color: var(--cinza);
  white-space: nowrap;
}
/* as categorias ocupam 2 colunas da ficha, pra pílula não quebrar */
.ficha-box .projeto-ficha > div:has(.tags) { grid-column: span 2; }

/* Ficha técnica e colofão (2026-10-05): dois boxes lado a lado, cada um com
   seu título, cantos arredondados e fundo bem sutil; no celular, um embaixo
   do outro. Dentro de cada box os campos vão em 2 colunas. */
/* Teste (2026-10-05): ficha técnica numa linha só na largura toda, sem box;
   colofão embaixo, também numa linha, dentro do box. No celular, 2 colunas. */
.projeto-fichas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(48 * var(--u));
}
.projeto-fichas .ficha-box:first-child { padding: 0; border-radius: 0; background: none; }
.ficha-box .projeto-ficha {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
  grid-template-rows: auto auto;
}
/* rótulo que quebra em 2 linhas não desalinha os valores da linha */
.ficha-box .projeto-ficha > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
/* rótulo colado no valor (2026-10-05: antes eram ~53u de distância) */
.ficha-box .projeto-ficha { row-gap: 0; }
.ficha-box .projeto-ficha dd { margin-top: calc(8 * var(--u)); }
.ficha-box {
  padding: calc(30 * var(--u)) calc(34 * var(--u)) calc(36 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(235, 236, 237, .05);
}
.ficha-titulo {
  margin-bottom: calc(30 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.2;
  letter-spacing: 0px;
}
.ficha-box .projeto-ficha { column-gap: calc(28 * var(--u)); }
.projeto-ficha dt {
  font-size: calc(13.7 * var(--u));
  line-height: 1.5385;
  letter-spacing: 0px;
  text-transform: uppercase;
  opacity: .7;
}
.projeto-ficha dd {
  margin: calc(21 * var(--u)) 0 0;
  font-size: calc(13.7 * var(--u));
  line-height: 1.5385;
}
.projeto-descricao {
  margin: calc(88 * var(--u)) 0 0 calc(306 * var(--u));
  max-width: min(790px, calc(878 * var(--u)));
  font-size: min(16px, calc(16.875 * var(--u)));
  line-height: min(23px, calc(24.26 * var(--u)));
}
.projeto-descricao p + p { margin-top: 1em; }
.projeto-descricao a { text-decoration: underline; text-underline-offset: .15em; }
.projeto-selos {
  display: flex;
  align-items: flex-start;
  gap: calc(40 * var(--u));
  margin: calc(56 * var(--u)) 0 0 calc(306 * var(--u));
}
.projeto-selos img { height: calc(147 * var(--u)); width: auto; }  /* 30% menor (2026-10-08) */

.projeto-imagens .c {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(32 * var(--u)); /* metade dos 64u de antes (2026-10-05) */
  /* fim da página: o espaço até o rodapé caiu pela metade (2026-10-05) */
  padding: calc(99 * var(--u)) calc(129 * var(--u)) calc(30 * var(--u)) calc(127 * var(--u));
}
/* foto em pé não passa da altura da imagem da referência; fica centralizada */
.projeto-imagens .foto { width: 100%; overflow: hidden; }
.projeto-imagens img,
.projeto-imagens video {
  width: 100%;
  height: auto;
  max-height: calc(1300 * var(--u));
  object-fit: contain;
}
/* imagem pequena no original não é esticada */
.projeto-imagens .foto.natural { width: auto; max-width: 100%; align-self: center; }
.projeto-imagens .foto.natural img { width: auto; max-width: 100%; }
.projeto-voltar {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-top: calc(76 * var(--u));
  font-size: calc(15.5 * var(--u));
}
.projeto-voltar svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.projeto-voltar:hover { text-decoration: underline; }

/* sobre · 01 */
.estrutura .c { padding: calc(92 * var(--u)) 0 calc(22 * var(--u)); }
.estrutura .rotulo-num { width: calc(351 * var(--u)); }
.estrutura-corpo {
  display: flex;
  align-items: flex-start;
  margin: calc(68 * var(--u)) 0 0 calc(24 * var(--u));
  font-size: min(16px, calc(16.875 * var(--u)));
  line-height: min(23px, calc(24.26 * var(--u)));
}
.estrutura-col { flex: none; width: calc(338 * var(--u)); }
.estrutura-col p + p { margin-top: 1.2em; }
.estrutura-col--2 { margin-left: calc(13 * var(--u)); }
/* a frase de abertura do manifesto, maior que o corpo de texto (2026-10-20) */
.manifesto-abertura { font-size: min(23px, calc(24.26 * var(--u))); line-height: 1.15; letter-spacing: -.03em; }
.estrutura-foto {
  flex: none;
  width: calc(691 * var(--u));
  height: calc(471 * var(--u));
  margin-left: calc(12 * var(--u));
  background: var(--azul);
  object-fit: cover;
  object-position: 0% 100%;
}

/* sobre · 02 */
.equipe .c { padding: calc(135 * var(--u)) 0 calc(42.5 * var(--u)); }
.equipe-lista { display: flex; margin: calc(84 * var(--u)) 0 0 calc(23 * var(--u)); }
.pessoa { flex: none; width: calc(339 * var(--u)); }
.pessoa--luan { margin-left: calc(12 * var(--u)); }
.pessoa--natalia { margin-left: calc(15 * var(--u)); }
.pessoa--beatriz { margin-left: calc(11 * var(--u)); }
.pessoa img { width: 100%; height: calc(471 * var(--u)); object-fit: cover; }
.pessoa figcaption {
  margin-top: calc(21 * var(--u));
  font-size: min(16px, calc(16.875 * var(--u)));
  line-height: min(23px, calc(24.26 * var(--u)));
}

/* sobre · 03 */
.principios .c { padding: calc(135 * var(--u)) 0 calc(22 * var(--u)); }
.principios .rotulo-num { width: calc(356 * var(--u)); }
.principios-cols { display: flex; margin: calc(83 * var(--u)) 0 0 calc(521 * var(--u)); }
.principios-col {
  min-height: calc(379 * var(--u));
  border-top: 3px solid var(--marinho);
  font-size: calc(56.25 * var(--u));
  line-height: .94;
  letter-spacing: -.05em;
}
.principios-col--1 { width: calc(474 * var(--u)); padding-left: calc(1 * var(--u)); }
.principios-col--2 { width: calc(424 * var(--u)); margin-left: calc(5 * var(--u)); padding-left: calc(2 * var(--u)); }
.principios-col p:nth-child(n) { margin-top: calc(46 * var(--u)); }

/* soluções · 01 */
.trabalho .c { padding: calc(23 * var(--u)) 0 calc(22.5 * var(--u)); }
.trabalho-lista { display: flex; margin: calc(36.6 * var(--u)) 0 0 calc(23 * var(--u)); }
.trabalho-lista li { flex: none; }
.trabalho-lista li:nth-child(1) { width: calc(336 * var(--u)); }
.trabalho-lista li:nth-child(2) { width: calc(284 * var(--u)); margin-left: calc(23 * var(--u)); }
.trabalho-lista li:nth-child(3) { width: calc(284 * var(--u)); margin-left: calc(55 * var(--u)); }
.trabalho-lista li:nth-child(4) { width: calc(310 * var(--u)); margin-left: calc(64 * var(--u)); }
.trabalho-tit {
  font-size: calc(56.25 * var(--u));
  line-height: .94;
  letter-spacing: -.05em;
}
.trabalho-lista li:nth-child(1) .trabalho-tit { letter-spacing: -.06em; }
.trabalho-sub {
  margin-top: calc(33.25 * var(--u));
  font-size: min(16px, calc(16.875 * var(--u)));
  line-height: min(23px, calc(24.26 * var(--u)));
}
.trabalho-lista li:nth-child(1) .trabalho-sub { width: calc(332 * var(--u)); }
.trabalho-lista li:nth-child(2) .trabalho-sub { width: calc(196 * var(--u)); }
.trabalho-lista li:nth-child(3) .trabalho-sub { width: calc(194 * var(--u)); }
.trabalho-lista li:nth-child(4) .trabalho-sub { width: calc(300 * var(--u)); }

/* soluções · 02 */
.metodo .c { padding: calc(157 * var(--u)) 0 calc(80 * var(--u)); }
.metodo-lista { margin: calc(39 * var(--u)) calc(22 * var(--u)) 0 calc(23 * var(--u)); }
.metodo-lista li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(118 * var(--u));
  color: var(--marinho);
  font-size: calc(56.25 * var(--u));
  line-height: .94;
  letter-spacing: -.05em;
}
.metodo-lista li + li { margin-top: calc(11.3 * var(--u)); }
.metodo-lista li:nth-child(1) { background: rgba(63, 103, 255, .2); }
.metodo-lista li:nth-child(2) { background: rgba(63, 103, 255, .4); }
.metodo-lista li:nth-child(3) { background: rgba(63, 103, 255, .6); }
.metodo-lista li:nth-child(4) { background: rgba(63, 103, 255, .8); }

/* soluções · 03 */
.operacao .c { padding-top: calc(97 * var(--u)); }
.operacao .rotulo { padding-left: calc(21 * var(--u)); }
.operacao .rotulo-num { width: calc(356 * var(--u)); }
.operacao-lista { margin: calc(66 * var(--u)) calc(22 * var(--u)) 0 calc(23 * var(--u)); }
.servico {
  position: relative;
  height: calc(var(--s) * var(--u));
  border-top: 3px solid var(--marinho);
}
.servico h3,
.servico p,
.servico img { position: absolute; left: 0; }
.servico h3 {
  top: calc(var(--t) * var(--u));
  font-size: calc(25.875 * var(--u));
  line-height: 1.2;
}
.servico p {
  top: calc(var(--d) * var(--u));
  width: calc(var(--w) * var(--u));
  font-size: min(16px, calc(16.875 * var(--u)));
  line-height: min(23px, calc(24.26 * var(--u)));
}
.servico img {
  top: calc(var(--i) * var(--u));
  left: calc(698 * var(--u));
  width: calc(697 * var(--u));
  height: calc(var(--ih) * var(--u));
  object-fit: cover;
}

/* soluções · chamada final */
.chamada .c { padding: calc(41 * var(--u)) 0 calc(35 * var(--u)); }
.chamada-frase {
  width: calc(1079 * var(--u));
  margin-left: calc(180 * var(--u));
  font-size: calc(105.75 * var(--u));
  line-height: .94;
  letter-spacing: -.03em;
  text-align: center;
}
.chamada .botao {
  width: calc(390 * var(--u));
  height: calc(51 * var(--u));
  margin: calc(65.8 * var(--u)) 0 0 calc(525 * var(--u));
}

/* ---------- rodapé ---------- */

.rodape {
  background: var(--azul);
  color: var(--cinza);
  font-size: min(16px, calc(16.875 * var(--u)));
  line-height: min(23px, calc(24.26 * var(--u)));
}
.rodape .c { padding: calc(135 * var(--u)) 0 calc(41.75 * var(--u)); }
.rodape-cols { display: flex; gap: calc(12 * var(--u)); margin-left: calc(23 * var(--u)); }
.rodape-col {
  flex: none;
  width: calc(339 * var(--u));
  padding-top: calc(13 * var(--u));
  border-top: 3px solid var(--marinho);
}
.rodape-col p + p { margin-top: calc(22 * var(--u)); }
.rodape-menu { padding-top: calc(1 * var(--u)); }
.rodape-menu li { display: flex; align-items: center; height: calc(44 * var(--u)); }
.rodape-menu span { cursor: default; }
.rodape a:hover { text-decoration: underline; }
.rodape-menu [aria-current="page"] { font-weight: 600; }
.rodape-marca {
  display: block;
  width: calc(1394 * var(--u));
  margin: calc(55 * var(--u)) 0 0 calc(24 * var(--u));
}
.rodape-marca img { width: 100%; height: auto; }
.rodape-direitos { margin: calc(26.2 * var(--u)) calc(35 * var(--u)) 0 0; text-align: right; }

/* ---------- animação de entrada ---------- */

@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sobe {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: none; }
}
.revela-ativo [data-revela] { opacity: 0; }
.revela-ativo [data-revela].revelado { animation: aparece 1.2s cubic-bezier(.445, .05, .55, .95) both; }
.revela-ativo [data-revela="sobe"].revelado { animation-name: sobe; }

/* ======================================================
   celular (até 1023px, desenhado em cima de 390px)
   ====================================================== */

@media (max-width: 1023px) {

  .topo .c { height: calc(74 * var(--u)); }
  .topo-marca {
    top: calc(12 * var(--u));
    left: calc(20 * var(--u));
    width: calc(73 * var(--u));
    height: calc(44 * var(--u));
  }
  .topo-nav { display: none; }
  .topo-menu {
    position: absolute;
    top: calc(19 * var(--u));
    left: calc(334 * var(--u));
    display: block;
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
  }
  .topo-menu svg { display: block; width: 100%; height: 100%; fill: var(--cinza); }

  .rotulo {
    flex-direction: column;
    gap: calc(12 * var(--u));
    padding-left: calc(48 * var(--u));
    font-size: calc(20 * var(--u));
  }
  .rotulo-num,
  .estrutura .rotulo-num,
  .principios .rotulo-num,
  .operacao .rotulo-num { width: auto; }
  .operacao .rotulo { padding-left: calc(48 * var(--u)); }

  .botao { font-size: min(19px, calc(19 * var(--u))); line-height: 1.5; }

  .degrade { height: calc(var(--hm) * var(--u)); }
  .degrade--sobe {
    height: calc((var(--hm) + var(--hxm, 0)) * var(--u));
    margin-top: calc(var(--hxm, 0) * -1 * var(--u));
  }

  /* início */
  .hero-inicio .c {
    display: flex;
    flex-direction: column;
    padding: calc(35 * var(--u)) 0 calc(13 * var(--u));
  }
  .hero-inicio h1 {
    width: calc(342 * var(--u));
    margin-left: calc(20 * var(--u));
    font-size: calc(56 * var(--u));
    line-height: 1;
    letter-spacing: -.05em;
  }
  .hero-linha1 { flex-direction: column; margin-top: calc(89 * var(--u)); }
  .hero-lista {
    width: calc(342 * var(--u));
    margin-left: calc(24 * var(--u));
    font-size: calc(18 * var(--u));
  }
  .hero-texto {
    width: calc(221 * var(--u));
    margin: calc(18 * var(--u)) 0 0 calc(24 * var(--u));
    font-size: min(16px, calc(16 * var(--u)));
    line-height: min(23px, calc(23 * var(--u)));
  }
  .hero-linha2 {
    display: flex;
    flex-direction: column;
    height: auto;
    margin-top: calc(59 * var(--u));
    padding-left: calc(24 * var(--u));
  }
  .hero-linha2 > * { position: static; }
  .hero-linha2 .botao { width: calc(273 * var(--u)); height: calc(44 * var(--u)); }
  .hero-botao--1 { order: 1; }
  .hero-botao--2 { order: 2; margin-top: calc(33 * var(--u)); }
  .hero-num { width: auto; font-size: calc(15 * var(--u)); }
  .hero-num--1 { order: 3; width: auto; margin-top: calc(46 * var(--u)); }
  .hero-num--2 { order: 4; width: auto; margin-top: calc(12 * var(--u)); }

  .objetivos .c { padding: calc(48 * var(--u)) 0 calc(35 * var(--u)); }
  .objetivos-lista { margin: calc(59 * var(--u)) calc(24 * var(--u)) 0; }
  .objetivo {
    display: flex;
    flex-direction: column;
    padding: 0 calc(24 * var(--u));
    font-size: min(16px, calc(16 * var(--u)));
    line-height: min(23px, calc(23 * var(--u)));
  }
  .objetivo + .objetivo { margin-top: calc(24 * var(--u)); }
  .objetivo img {
    order: 1;
    width: calc(294 * var(--u));
    height: calc(129 * var(--u));
    margin-top: calc(var(--mi) * var(--u));
    border-radius: calc(6.09375 * var(--u));
  }
  .objetivo h3 { order: 2; width: auto; margin-top: calc(var(--mg) * var(--u)); }
  .objetivo p { order: 3; margin: calc(12.4 * var(--u)) 0 0; }
  .objetivos .botao {
    width: calc(282 * var(--u));
    height: calc(45 * var(--u));
    margin: calc(64.8 * var(--u)) 0 0 calc(48 * var(--u));
  }

  .como .c { padding: calc(48 * var(--u)) 0 calc(93 * var(--u)); }
  .como-frase {
    width: calc(294 * var(--u));
    margin: calc(55 * var(--u)) 0 0 calc(47 * var(--u));
    font-size: calc(36 * var(--u));
  }
  .como .botao {
    width: calc(282 * var(--u));
    height: calc(45 * var(--u));
    margin: calc(26.4 * var(--u)) 0 0 calc(48 * var(--u));
  }

  .historias .c { padding: calc(48 * var(--u)) 0 calc(50 * var(--u)); }
  .historias-corpo { display: block; margin: calc(60 * var(--u)) 0 0; }
  .historias-citacao { display: block; width: calc(294 * var(--u)); margin-left: calc(48 * var(--u)); }
  .historias-citacao .historias-frase { margin-top: 0; font-size: calc(36 * var(--u)); }
  .historias-autor { margin-top: calc(12 * var(--u)); font-size: min(16px, calc(16 * var(--u))); line-height: min(23px, calc(23 * var(--u))); }
  .historias-foto {
    width: calc(342 * var(--u));
    height: calc(200 * var(--u));
    margin: calc(36.6 * var(--u)) 0 0 calc(24 * var(--u));
  }
  .historias .botao {
    width: calc(282 * var(--u));
    height: calc(45 * var(--u));
    margin: calc(48 * var(--u)) 0 0 calc(54 * var(--u));
  }

  .frente .c { min-height: calc(627 * var(--u)); padding: calc(48 * var(--u)) 0 calc(11 * var(--u)); }
  .frente-frase {
    width: calc(294 * var(--u));
    margin: calc(60 * var(--u)) 0 0 calc(48 * var(--u));
    font-size: calc(36 * var(--u));
  }
  .newsletter {
    width: calc(292 * var(--u));
    margin: calc(31 * var(--u)) 0 0 calc(49 * var(--u));
  }
  .nl-enviar { width: 100%; }

  /* páginas internas */
  .hero-pagina h1 { font-size: calc(50 * var(--u)); }
  .hero-sobre .c { padding: calc(68 * var(--u)) 0 calc(40 * var(--u)); }
  .hero-sobre h1 { width: calc(342 * var(--u)); margin-left: calc(24 * var(--u)); }
  .hero-politica .c { padding: calc(68 * var(--u)) 0 calc(40 * var(--u)); }
  .hero-politica h1 { width: calc(342 * var(--u)); margin-left: calc(24 * var(--u)); }
  .hero-solucoes .c { padding: calc(82 * var(--u)) 0 calc(82 * var(--u)); }
  .hero-solucoes h1 { width: calc(336 * var(--u)); margin-left: calc(24 * var(--u)); }

  .degrade-longo { --d-ini: calc(var(--dim) * var(--u)); --d-len: calc(var(--dlm) * var(--u)); }
  .hero-projetos .c { padding: calc(68 * var(--u)) 0 calc(56 * var(--u)); }
  .hero-projetos h1 { margin-left: calc(24 * var(--u)); }

  .projetos { padding: calc(48 * var(--u)) 0; }
  .filtro { height: auto; gap: calc(8 * var(--u)); margin: calc(28 * var(--u)) calc(24 * var(--u)) 0; }
  .filtro-op { height: calc(34 * var(--u)); padding: 0 calc(12 * var(--u)); font-size: calc(11 * var(--u)); }
  /* no celular a galeria do luanfreitas.co vira uma coluna só, com margem de
     15px e 50px entre imagens numa tela de 320px (aqui convertido pra 390) */
  .galeria {
    flex-direction: column;
    gap: calc(60.94 * var(--u));
    padding: 0 calc(18.28 * var(--u));
  }
  .galeria-col { display: contents; }
  .galeria-item { order: var(--o); }

  /* página de projeto */
  .tags li { padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(5 * var(--u)); font-size: calc(10.5 * var(--u)); }
  .projeto-hero { height: calc(560 * var(--u)); }
  .projeto-hero .c { padding: 0 calc(24 * var(--u)); }
  .projeto-hero h1 { max-width: calc(342 * var(--u)); font-size: calc(46 * var(--u)); }
  .projeto-hero-pe {
    left: calc(24 * var(--u));
    right: calc(24 * var(--u));
    bottom: calc(24 * var(--u));
    flex-wrap: wrap;
    gap: calc(12 * var(--u));
  }
  .projeto-hero-meta { font-size: calc(11 * var(--u)); }
  .projeto-info .c { padding: calc(48 * var(--u)) calc(24 * var(--u)) 0; }
  .projeto-ficha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(20 * var(--u));
    row-gap: calc(26 * var(--u));
  }
  .projeto-fichas { grid-template-columns: 1fr; gap: calc(16 * var(--u)); }
  .ficha-box { padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(26 * var(--u)); border-radius: calc(12 * var(--u)); }
  .ficha-titulo { margin-bottom: calc(22 * var(--u)); font-size: calc(19 * var(--u)); letter-spacing: 0px; }
  .ficha-box .projeto-ficha {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    column-gap: calc(20 * var(--u));
    row-gap: calc(24 * var(--u));
  }
  .projeto-fichas { gap: calc(28 * var(--u)); }
  .ficha-box .projeto-ficha > div { display: block; grid-row: auto; }
  .ficha-box .projeto-ficha { row-gap: calc(20 * var(--u)); }
  .ficha-box .projeto-ficha dd { margin-top: calc(6 * var(--u)); }
  .projeto-ficha dt { font-size: calc(13 * var(--u)); line-height: 1.5385; }
  .projeto-ficha dd { margin-top: calc(10 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.5385; }
  .projeto-descricao { margin: calc(40 * var(--u)) 0 0; max-width: none; font-size: min(16px, calc(16 * var(--u))); line-height: min(23px, calc(23 * var(--u))); }
  .projeto-selos { margin: calc(36 * var(--u)) 0 0; gap: calc(24 * var(--u)); }
  .projeto-selos img { height: calc(105 * var(--u)); }
  .projeto-imagens .c { gap: calc(12 * var(--u)); padding: calc(40 * var(--u)) calc(24 * var(--u)) calc(12 * var(--u)); }
  .projeto-imagens img, .projeto-imagens video { max-height: none; }
  .projeto-voltar { margin-top: calc(28 * var(--u)); font-size: calc(15 * var(--u)); }
  .projeto-voltar svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

  .estrutura .c { padding: calc(40 * var(--u)) 0 calc(71 * var(--u)); }
  .estrutura .rotulo { flex-direction: row; gap: 0; padding-left: calc(20 * var(--u)); }
  .estrutura .rotulo-num { width: calc(111 * var(--u)); }
  .estrutura .rotulo h2 { width: calc(239 * var(--u)); }
  .estrutura-corpo {
    flex-direction: column;
    margin: calc(20 * var(--u)) 0 0 calc(20 * var(--u));
    font-size: calc(15 * var(--u));
  }
  .estrutura-col,
  .estrutura-foto { width: calc(350 * var(--u)); margin-left: 0; }
  .estrutura-foto { height: calc(230 * var(--u)); margin-top: calc(20 * var(--u)); }
  .estrutura-col--2 { margin-top: calc(21 * var(--u)); }

  .equipe .c { padding: calc(48 * var(--u)) 0 calc(105.6 * var(--u)); }
  .equipe-lista { flex-direction: column; margin: 0; }
  .pessoa { width: calc(294 * var(--u)); margin: calc(24 * var(--u)) 0 0 calc(48 * var(--u)); }
  .pessoa img { height: calc(300 * var(--u)); }
  .pessoa figcaption { margin-top: calc(24 * var(--u)); font-size: min(16px, calc(16 * var(--u))); line-height: min(23px, calc(23 * var(--u))); }
  .pessoa--luan { order: 1; margin-top: calc(66 * var(--u)); }
  .pessoa--luan figcaption { font-size: calc(15 * var(--u)); }
  .pessoa--natalia { order: 2; }
  .pessoa--beatriz { order: 3; }
  .pessoa--pablo {
    order: 4;
    width: calc(176 * var(--u));
    margin: calc(149.6 * var(--u)) 0 0 calc(107 * var(--u));
  }
  .pessoa--pablo img { height: calc(243 * var(--u)); }
  .pessoa--pablo figcaption { margin-top: 0; }

  .principios .c { padding: calc(68 * var(--u)) 0 calc(225 * var(--u)); }
  .principios-cols { flex-direction: column; margin: calc(51 * var(--u)) 0 0 calc(24 * var(--u)); }
  .principios-col,
  .principios-col--1,
  .principios-col--2 {
    width: calc(342 * var(--u));
    min-height: calc(200 * var(--u));
    margin-left: 0;
    padding-left: calc(24 * var(--u));
    font-size: calc(28 * var(--u));
  }
  .principios-col p:nth-child(1) { margin-top: calc(21 * var(--u)); }
  .principios-col p:nth-child(n+2) { margin-top: calc(12 * var(--u)); }

  .trabalho .c { padding: calc(53 * var(--u)) 0 calc(100 * var(--u)); }
  .trabalho-lista { flex-direction: column; margin: calc(46 * var(--u)) 0 0 calc(48 * var(--u)); }
  .trabalho-lista li,
  .trabalho-lista li:nth-child(n) { width: calc(294 * var(--u)); margin-left: 0; }
  .trabalho-lista li:nth-child(1) { width: calc(300 * var(--u)); }
  .trabalho-lista li:not(:last-child) { height: calc(200 * var(--u)); }
  .trabalho-tit { font-size: calc(50 * var(--u)); }
  .trabalho-sub,
  .trabalho-lista li:nth-child(n) .trabalho-sub {
    width: auto;
    margin-top: calc(12 * var(--u));
    font-size: calc(15 * var(--u));
  }

  .metodo .c { padding: calc(48 * var(--u)) 0 0; }
  .metodo-lista { margin: calc(60 * var(--u)) calc(48 * var(--u)) 0; }
  .metodo-lista li { height: calc(82 * var(--u)); font-size: calc(36 * var(--u)); }
  .metodo-lista li + li { margin-top: calc(24 * var(--u)); }

  .operacao .c { padding-top: calc(93 * var(--u)); }
  .operacao-lista { margin: calc(66 * var(--u)) calc(24 * var(--u)) 0; }
  .servico {
    display: flex;
    flex-direction: column;
    height: calc(var(--ms) * var(--u));
    padding: 0 calc(24 * var(--u));
  }
  .servico h3,
  .servico p,
  .servico img { position: static; }
  .servico img {
    order: 1;
    width: calc(294 * var(--u));
    height: calc(var(--mih) * var(--u));
    margin-top: calc(22 * var(--u));
  }
  .servico h3 { order: 2; margin-top: calc(20 * var(--u)); font-size: calc(22 * var(--u)); }
  .servico p { order: 3; width: auto; margin-top: calc(12.6 * var(--u)); font-size: min(16px, calc(16 * var(--u))); line-height: min(23px, calc(23 * var(--u))); }

  .chamada .c { padding: calc(40 * var(--u)) 0 calc(63 * var(--u)); }
  .chamada-frase {
    width: calc(351 * var(--u));
    margin-left: calc(19 * var(--u));
    font-size: calc(36 * var(--u));
  }
  .chamada .botao {
    width: calc(272 * var(--u));
    height: calc(45 * var(--u));
    margin: calc(29.5 * var(--u)) 0 0 calc(59 * var(--u));
  }

  /* rodapé */
  .rodape { font-size: min(16px, calc(16 * var(--u))); text-align: center; line-height: min(23px, calc(23 * var(--u))); }
  .rodape .c { padding: calc(86 * var(--u)) 0 calc(67 * var(--u)); }
  .rodape-cols { flex-direction: column; gap: 0; margin: 0 calc(24 * var(--u)); }
  .rodape-col { width: auto; }
  .rodape-menu { padding: calc(28 * var(--u)) 0 calc(19 * var(--u)); }
  .rodape-menu li { display: block; height: calc(40 * var(--u)); padding-right: calc(7 * var(--u)); }
  .rodape-email { padding: calc(40 * var(--u)) 0 calc(33 * var(--u)); }
  .rodape-legal { padding: calc(38 * var(--u)) 0 calc(34 * var(--u)); }
  .rodape-legal p + p { margin-top: calc(11.8 * var(--u)); }
  .rodape-social { padding-top: calc(39 * var(--u)); }
  .rodape-social p + p { margin-top: calc(12 * var(--u)); }
  .rodape-marca { width: calc(120 * var(--u)); margin: calc(35.4 * var(--u)) auto 0; }
  .rodape-direitos { width: calc(280 * var(--u)); margin: 0 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-movel { animation: none; }
  .botao { transition: none; }
}

/* política de privacidade (2026-10-20): uma coluna de texto, alinhada ao título das seções */
.politica .c { padding: calc(92 * var(--u)) 0 calc(120 * var(--u)); }
.politica-corpo { width: calc(700 * var(--u)); margin-left: calc(377 * var(--u)); font-size: min(16px, calc(16.875 * var(--u))); line-height: min(23px, calc(24.26 * var(--u))); }
.politica-corpo h2 { margin-top: calc(48 * var(--u)); font-size: calc(25.875 * var(--u)); line-height: 1.2; }
.politica-corpo p, .politica-corpo ul { margin-top: 1.2em; }
.politica-corpo h2 + p, .politica-corpo h2 + ul { margin-top: calc(14 * var(--u)); }
.politica-corpo ul { padding-left: 1.2em; list-style: disc; }
.politica-corpo li + li { margin-top: .5em; }
@media (max-width: 1023px) {
  .politica .c { padding: calc(40 * var(--u)) 0 calc(80 * var(--u)); }
  .politica-corpo { width: auto; margin: 0 calc(24 * var(--u)); }
  .politica-corpo h2 { margin-top: calc(36 * var(--u)); font-size: calc(22 * var(--u)); }
}

/* sobre (2026-10-20): título de "Quem faz a Brecha" na coluna da foto do Luan (374u);
   foto do manifesto com a mesma altura das colunas de texto (recorta se precisar) */
@media (min-width: 1024px) {
  .equipe .rotulo-num { width: calc(351 * var(--u)); }
  .estrutura-foto { align-self: stretch; height: auto; }
}
@media (max-width: 1023px) {
  .c { max-width: calc(390 * var(--u)); }
}

@media (max-width: 1023px) {
  .manifesto-abertura { font-size: min(23px, calc(23 * var(--u))); }
}