/* ==========================================================================
   TEMA — Simões Arquitetura · B v2 "CINEMATOGRÁFICA COMBINADA" (06/08/2026)

   COMBINAÇÃO de design systems (método do curso: herdar a alma de um,
   roubar efeitos dos outros). Este arquivo é o embrião do DS Simões autoral.

   - ALMA: parallax-clean/AETHEREAL — concreto #E3E1DC, dark #121212, musgo
     #374336, canto vivo, hero full-screen com parallax, stack de projetos,
     ruído. Agora com a voz tipográfica REAL: Syncopate local (400/700).
   - do LUMINA-VIDEO: feixes de luz caindo (@keyframes beam-fall 6-8s) nas
     seções escuras + a serifada de display como contraponto (Instrument
     Serif itálico nos momentos de pausa) + revelação com blur.
   - do FINEX: borda com gradiente via máscara nos cards + traço SVG que se
     desenha (draw-path) + entrada blurIn.
   - do GREEN-MUSEUM: o arco como moldura dos retratos da equipe.

   Todo movimento continua no arsenal de custo zero: scroll-driven, sticky,
   keyframes CSS. 0 KB de biblioteca. Fontes 100% locais.
   ========================================================================== */

@font-face {
  font-family: 'Syncopate';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("syncopate-400.woff2") format('woff2');
}
@font-face {
  font-family: 'Syncopate';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("syncopate-700.woff2") format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("instrument-serif-latin.woff2") format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("oswald-latin.woff2") format('woff2');
}

:root {
  color-scheme: light;

  /* primitivas — neutros do AETHEREAL + PALETA REAL DA MARCA.
     v4: as cores da marca foram extraídas do arquivo do logo (06/08/2026):
     taupe #7E7674 e salmão #E8B090. O musgo do AETHEREAL saiu — o site
     passa a falar a língua da própria marca. Contrastes medidos:
     ação #A45E33 sobre branco = 4,97:1 (AA); apoio #5C5654 sobre concreto
     = 5,51:1; salmão #E8B090 sobre o dark = 9,85:1. */
  --c-concreto:   #e3e1dc;
  --c-concreto-2: #edebe7;
  --c-dark:       #121212;
  --c-card:       #1a1a1a;
  --c-terra:      #a45e33;   /* AÇÃO — terracota da marca, escurecida p/ AA */
  --c-terra-viva: #8a4e2a;   /* pressionado */
  --c-salmao:     #e8b090;   /* a cor EXATA do logo — luz e realce no escuro */
  --c-taupe:      #7e7674;   /* o cinza-quente do logo */
  --c-white:      #ffffff;
  --c-cinza-600:  #5c5654;   /* taupe escurecido: texto de apoio legível */
  --c-luz:        var(--c-salmao);
  --c-ok:  #2f6b3d;
  --c-bad: #9f1d1d;

  /* semânticas */
  --bg:            var(--c-concreto);
  --bg-alt:        var(--c-concreto-2);
  --bg-invert:     var(--c-dark);
  --fg:            var(--c-dark);
  --fg-muted:      var(--c-cinza-600);
  --fg-invert:     var(--c-concreto);
  --border:        rgb(18 18 18 / 0.14);
  --border-strong: var(--c-dark);
  --accent:        var(--c-terra);
  --accent-fg:     var(--c-white);
  --accent-hover:  var(--c-terra-viva);
  --accent-quiet:  color-mix(in oklab, var(--c-terra) 10%, transparent);
  --ok:  var(--c-ok);
  --bad: var(--c-bad);

  /* tipografia — TRÊS vozes: Oswald anuncia, Instrument pausa, sans fala.
     (v3: Syncopate reprovada pelo Guilherme — o "A" sem travessão briga com
     o resto da palavra. Oswald era a voz da B aprovada e volta a ser a
     display; os .woff2 da Syncopate ficam na pasta como registro.) */
  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-serifa:  'Instrument Serif', Georgia, serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.6rem, 8.5vw, 6.25rem);
  --fs-h1:      clamp(2.25rem, 6vw, 4rem);
  --fs-h2:      clamp(1.75rem, 4.5vw, 3.25rem);
  --fs-h3:      clamp(1rem, 1.8vw, 1.25rem);
  --fs-body:    clamp(1rem, 1.1vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --lh-display: 1.04;
  --lh-body:    1.7;

  --weight-display: 500;
  --weight-body:    300;
  --weight-strong:  600;

  --tracking-tight: 0.03em;   /* Oswald condensada respira com um fio de ar */
  --tracking-wide:  0.35em;

  --display-transform: uppercase;
  --eyebrow-transform: uppercase;

  /* forma */
  --radius:       0;
  --radius-small: 0;
  --radius-pill:  0;
  --border-width: 1px;
  --shadow:       0 25px 50px -12px rgb(0 0 0 / 0.7);
  --shadow-none:  none;

  --maxw:          87.5rem;
  --maxw-prosa:    58ch;
  --gutter:        clamp(1rem, 4vw, 3rem);
  --space-section: clamp(4.5rem, 12vw, 8.5rem);

  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.3s;
  --dur-slow:  1.5s;
}


/* ==========================================================================
   CONTRASTE DO TERRACOTA COMO TEXTO (08/08/2026)

   Medido no site publicado: #a45e33 como texto dá 3,80 sobre o fundo claro
   e 3,77 sobre o escuro — reprova em AA nos dois. Ele é cor de AÇÃO (branco
   sobre ele dá 4,97 e passa); como texto, não serve.

   Este token troca sozinho conforme o contexto, então CSS novo herda a
   correção sem ninguém precisar lembrar dela.
   ========================================================================== */
:root { --c-terra-texto: #92542d; }   /* 4,55 sobre concreto · 5,00 sobre card claro */
.secao--invert, .topo-discreto, .cortina-menu, .stack-card, .hero-cinema, .hero-pagina, .chamada-gigante, .galeria figure, .acervo-tira figure, .galeria-projeto figure, .modal, .rodape { --c-terra-texto: var(--c-salmao); }   /* 9,85 sobre #121212 */
/* ---- toque fino global (v3.1) ----------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
main section[id], #galeria { scroll-margin-top: 4.5rem; }

/* ---- assinaturas tipográficas ---------------------------------------------- */

h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
}
h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; }

/* a voz serifada: itálico do lumina, usada como contraponto dentro dos títulos */
.serifa {
  font-family: var(--font-serifa);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.sobrancelha { font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); }

.btn {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 0;
  box-shadow: none;
}
.btn:hover { transform: none; }

.cartao { background: var(--c-concreto-2); border-color: var(--border); }
.numeros dd { font-family: var(--font-display); font-weight: 400; }
.campo input, .campo select, .campo textarea { background: var(--c-white); border-radius: 0; }
.secao--alt { border-block: 1px solid var(--border); }

/* ==========================================================================
   BLOCOS DA VARIANTE
   ========================================================================== */

/* ---- barra de progresso de leitura (laboratório, scroll-driven) ------------- */
.progresso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100;
  background: var(--c-terra);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progresso {
      animation: progresso-cresce linear both;
      animation-timeline: scroll();
    }
  }
}
@keyframes progresso-cresce {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- ruído global ------------------------------------------------------------ */
.ruido {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ---- topo em mix-blend --------------------------------------------------------- */
.topo-cinema {
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  z-index: 50;
  mix-blend-mode: difference;
  color: #fff;
}
.topo-cinema .topo__linha { display: flex; align-items: center; justify-content: space-between; padding-block: 1.5rem; }
/* v4: LOGO real no topo. Sobre o hero escuro entra a versão branca (gerada
   a partir do PNG oficial, preservando a forma); o mix-blend-difference do
   topo já garante que ele apareça sobre qualquer parte da imagem. */
.topo-cinema .marca {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
}
.topo-cinema .marca img {
  height: 2.75rem;
  width: auto;
  display: block;
}
@media (max-width: 40rem) {
  .topo-cinema .marca img { height: 2.25rem; }
  .topo-cinema .marca span { display: none; }
}
.topo-cinema .nav-cinema { display: flex; gap: 2rem; }
.topo-cinema .nav-cinema a {
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-micro);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity var(--dur) var(--ease);
}
.topo-cinema .nav-cinema a:hover { opacity: 1; }
@media (max-width: 56rem) { .topo-cinema .nav-cinema { display: none; } }

/* ---- HERO ------------------------------------------------------------------------ */
.hero-cinema {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.hero-cinema__fundo { position: absolute; inset: -12% 0; z-index: -1; }
.hero-cinema__fundo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.58); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-cinema__fundo {
      animation: hero-parallax linear both;
      animation-timeline: scroll();
      animation-range: 0 100svh;
    }
  }
}
@keyframes hero-parallax { to { transform: translateY(12%); } }

.hero-cinema__conteudo { padding: 6rem var(--gutter) 5rem; max-width: 72rem; }

/* ⚠️ Descentralização da sobrancelha: a causa é UMA só, e foi medida
   (07/08/2026). `base.css` faz `p { max-width: var(--maxw-prosa) }`
   (58ch ≈ 386px), certo para texto corrido. Mas um <p> em bloco mais
   estreito que o pai NÃO se centraliza sozinho: a caixa encosta à esquerda
   e só o texto DENTRO dela se centraliza. Medido: 340px fora do centro.
   O subtítulo escapou porque já trazia `margin: 0 auto`.
   → `max-width: none` resolve, e o desvio cai para ZERO.

   O que NÃO é causa, apesar de parecer: o espaço fantasma do
   `letter-spacing` depois da última letra. Medido caractere a caractere,
   o navegador já o descarta ao centralizar. A tentativa anterior de
   compensar com `padding-left` deslocava o texto 2,1px para a DIREITA —
   corrigia um problema que não existia. Vale para todo eyebrow com
   tracking largo: medir antes de compensar. */
.hero-cinema .sobrancelha {
  color: #fff;
  opacity: 0.9;
  max-width: none;
}
.hero-cinema__titulo {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  margin: 1.25rem 0 1.5rem;
}
/* a linha serifada dentro do título: maior que a Syncopate, é a pausa */
.hero-cinema__titulo .serifa { font-size: 1.32em; line-height: 1; }
.hero-cinema__sub {
  font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  max-width: 46ch;
  margin: 0 auto 2.5rem;
  opacity: 0.92;
}
.hero-cinema .btn--contorno { border-color: rgb(255 255 255 / 0.6); color: #fff; }
.hero-cinema .btn--contorno:hover { background: rgb(255 255 255 / 0.12); }
.hero-cinema__acoes { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-cinema__seta { position: absolute; bottom: 1.75rem; left: 50%; translate: -50% 0; font-size: 1.5rem; opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
  .hero-cinema__seta { animation: seta-flutua 2.2s ease-in-out infinite; }
}
@keyframes seta-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.5rem); } }

.titulo-linhas .linha { display: block; overflow: hidden; padding-block: 0.06em; }
.titulo-linhas .linha > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .titulo-linhas .linha > span { animation: linha-sobe 1s var(--ease) both; }
  .titulo-linhas .linha:nth-child(2) > span { animation-delay: 0.14s; }
  .titulo-linhas .linha:nth-child(3) > span { animation-delay: 0.28s; }
}
@keyframes linha-sobe { from { transform: translateY(112%); } to { transform: none; } }

/* ---- revelação com blur (lumina/finex) no lugar do revela simples --------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revela-blur {
      animation: revela-blur-entrada linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 30%;
    }
  }
}
@keyframes revela-blur-entrada {
  from { opacity: 0; transform: translateY(1.5rem); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ---- faixa de números ------------------------------------------------------------
   v4: área grande recebe o TAUPE da marca escurecido (#5F5957 = 6,88:1 com
   branco). Terracota chapado nesse tamanho satura demais; a marca usa o
   taupe como cor estrutural e o salmão como realce — é o que se replica. */
.faixa-musgo {
  background: #5f5957;
  color: var(--c-concreto);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  position: relative;
  overflow: hidden;
}
.faixa-musgo .numeros dd { color: var(--c-white); }
.faixa-musgo .numeros dt { color: rgb(255 255 255 / 0.82); }

/* ---- intro com traço que se desenha (finex draw-path) ---------------------------- */
.intro-grande {
  font-family: var(--font-serifa);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.25;
  max-width: 26ch;
}
.intro-grande strong { font-style: normal; font-family: var(--font-display); font-weight: 400; font-size: 0.72em; text-transform: uppercase; color: var(--c-terra-texto); }
.traco-casa { display: block; max-width: 18rem; margin-top: 2rem; color: var(--c-terra-texto); }
@media (prefers-reduced-motion: no-preference) {
  .traco-casa path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: traco-desenha 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
}
@keyframes traco-desenha {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  5%   { opacity: 1; }
  40%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ---- STACK de projetos, agora com luz e borda-gradiente --------------------------- */
.stack-secao {
  background: var(--c-dark);
  color: var(--c-concreto);
  padding-block: var(--space-section);
  position: relative;
  overflow: hidden;
}
.stack-secao .sobrancelha { color: rgb(227 225 220 / 0.6); }
.stack-secao h2 { color: var(--c-white); }
.stack-secao h2 .serifa { color: var(--c-luz); }

/* feixes de luz caindo (lumina beam-fall), atrás dos cards */
.feixe {
  position: absolute;
  top: 0;
  width: 1px;
  height: 40vh;
  background: linear-gradient(to bottom, transparent, rgb(232 213 181 / 0.5), transparent);
  pointer-events: none;
}
.feixe--1 { left: 18%; }
.feixe--2 { left: 52%; }
.feixe--3 { left: 84%; }
@media (prefers-reduced-motion: no-preference) {
  .feixe { animation: feixe-cai 7s linear infinite; opacity: 0; }
  .feixe--2 { animation-duration: 9s; animation-delay: 2.5s; }
  .feixe--3 { animation-duration: 8s; animation-delay: 4.5s; }
}
@keyframes feixe-cai {
  0%   { transform: translateY(-100%); opacity: 0; }
  5%   { opacity: 0.45; }
  50%  { opacity: 0.75; }
  95%  { opacity: 0.3; }
  100% { transform: translateY(140vh); opacity: 0; }
}

.stack { display: grid; gap: 4rem; position: relative; }
.stack-item { position: sticky; top: clamp(4.5rem, 12vh, 7rem); }
.stack-item:nth-child(2) { top: calc(clamp(4.5rem, 12vh, 7rem) + 1.5rem); }
.stack-item:nth-child(3) { top: calc(clamp(4.5rem, 12vh, 7rem) + 3rem); }

/* borda com gradiente via máscara (finex) — vira mais viva no hover */
.stack-card {
  display: grid;
  background: var(--c-card);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: min(60vh, 30rem);
  position: relative;
  --border-gradient: linear-gradient(135deg, rgb(232 213 181 / 0.35), rgb(255 255 255 / 0.06) 40%, rgb(232 213 181 / 0.2));
}
.stack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: var(--border-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  transition: opacity var(--dur) var(--ease);
}
.stack-card:hover { --border-gradient: linear-gradient(135deg, rgb(232 213 181 / 0.7), rgb(255 255 255 / 0.12) 40%, rgb(232 213 181 / 0.45)); }
@media (min-width: 56rem) { .stack-card { grid-template-columns: 1fr 1.2fr; } }
.stack-card__conteudo {
  padding: clamp(1.75rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
.stack-card__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.75rem;
  line-height: 1;
  color: rgb(232 213 181 / 0.3);
}
.stack-card h3 { color: var(--c-white); font-size: clamp(1.25rem, 2.4vw, 1.75rem); margin: 0.6rem 0 0.75rem; }
.stack-card__local { font-size: var(--fs-micro); letter-spacing: 0.25em; text-transform: uppercase; color: rgb(227 225 220 / 0.6); }
.stack-card__texto { color: rgb(227 225 220 / 0.75); font-weight: 300; }
/* v7: virou link (<a>) em vez de botão — leva ao projeto, não ao modal */
.stack-card__link {
  align-self: flex-start;
  display: inline-block;
  background: none;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.35);
  color: var(--c-concreto);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 0 0.5rem;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.stack-card__link::after {
  content: " →";
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.stack-card__link:hover { color: var(--c-luz); border-color: var(--c-luz); }
.stack-card__link:hover::after { transform: translateX(4px); }
.stack-card__img { position: relative; overflow: hidden; min-height: 16rem; }
.stack-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) ease;
}
.stack-card:hover .stack-card__img img { transform: scale(1.08); }

/* ---- serviços em linhas numeradas -------------------------------------------------- */
.linhas-servico { border-top: 1px solid var(--border); }
.linhas-servico article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 4vw, 3rem);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--border);
}
.linhas-servico .num {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  color: var(--c-terra-texto);
  line-height: 1.2;
  min-width: 3.5rem;
}
.linhas-servico h3 { margin-bottom: 0.5rem; }
.linhas-servico p { max-width: 62ch; color: var(--fg-muted); font-weight: 300; }

/* ---- galeria -------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.chip {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--border);
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.chip[aria-pressed="true"], .chip:hover { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-concreto); }
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.galeria figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-dark); }
.galeria figure[hidden] { display: none; }
.galeria img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) ease; }
.galeria figure:hover img { transform: scale(1.1); }
.galeria figcaption {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 2.25rem 1.25rem 1rem;
  background: linear-gradient(to top, rgb(18 18 18 / 0.85), transparent);
  color: var(--c-concreto);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---- equipe: o ARCO do green-museum sobre a alma AETHEREAL -------------------------- */
.equipe {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr));
  gap: 1.5rem;
}
.equipe li { text-align: center; }
.equipe .retrato {
  border-radius: 6rem 6rem 0 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  margin-bottom: 0.9rem;
  border: 1px solid var(--border);
  background: var(--c-concreto-2);
}
.equipe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  filter: grayscale(1);
  transition: filter var(--dur-slow) ease, transform var(--dur-slow) ease;
}
.equipe li:hover img { filter: none; transform: scale(1.05); }
.equipe strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
}
.equipe span { font-size: var(--fs-micro); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted); }

/* ---- chamada gigante ------------------------------------------------------------------ */
.chamada-gigante {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 7vw, 5rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-dark);
  padding: clamp(3rem, 8vw, 5rem) var(--gutter);
  transition: color var(--dur) var(--ease), letter-spacing 0.6s var(--ease);
}
.chamada-gigante:hover { color: var(--c-terra-texto); letter-spacing: 0.03em; }
.chamada-gigante small {
  display: block;
  font-family: var(--font-serifa);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--fg-muted);
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   v3 — ANIMAÇÕES "DE ARQUITETO" (pedido do Guilherme: ir mais fundo no
   movimento, com cara de coisa desenhada para o ofício). Tudo continua no
   arsenal de custo zero: scroll-driven + keyframes. Estado final = padrão.
   ========================================================================== */

/* ---- cotas técnicas nas MARGENS do hero -------------------------------------
   v3.1: a versão em SVG de tela cheia cruzava o conteúdo e a seta em várias
   larguras (medido na auditoria geométrica). Agora cada cota é um elemento
   posicionado na margem, longe da área de texto por construção, e o
   conjunto só existe onde há margem de sobra (≥80rem). A linha se desenha
   por scaleY; os tiques e o rótulo aparecem depois. */
.cota-v {
  position: absolute;
  top: 16vh;
  bottom: 16vh;
  width: 1px;
  background: rgb(255 255 255 / 0.5);
  pointer-events: none;
  z-index: 1;
  display: none;
  transform-origin: top;
}
.cota-v--esq { left: 1.75rem; }
.cota-v--dir { right: 1.75rem; }
@media (min-width: 80rem) { .cota-v { display: block; } }
.cota-v::before,
.cota-v::after {
  content: "";
  position: absolute;
  left: -6px;
  width: 13px;
  height: 1.5px;
  background: rgb(255 255 255 / 0.5);
}
.cota-v::before { top: 0; }
.cota-v::after  { bottom: 0; }
.cota-v span {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.25em;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.7);
  background: transparent;
  padding: 0 0.5rem;
}
.cota-v--dir span { transform: translate(-50%, -50%) rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
  .cota-v { animation: cota-estica 1.8s var(--ease) both 0.6s; }
  .cota-v--dir { animation-delay: 1.1s; }
  .cota-v::before, .cota-v::after, .cota-v span { opacity: 0; animation: cota-surge 0.7s ease forwards 2.2s; }
}
@keyframes cota-estica { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cota-surge  { to { opacity: 1; } }

/* ---- revelação em cortina (clip-path), scroll-driven -------------------------
   A imagem entra como quem puxa um papel vegetal: da esquerda p/ a direita. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cortina {
      animation: cortina-abre 1ms linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
  }
}
@keyframes cortina-abre {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
/* (v3.1: um deslize interno na imagem foi testado e REMOVIDO — animação com
   fill em `transform` engole a transição do zoom de hover. Interação > enfeite.) */

/* ---- sublinhado de título que se estende ao entrar ---------------------------- */
.sublinha { position: relative; padding-bottom: 0.35em; }
.sublinha::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 4rem;
  background: currentColor;
  opacity: 0.5;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sublinha::after {
      animation: sublinha-cresce 1ms linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }
  }
}
@keyframes sublinha-cresce {
  from { width: 0; }
  to   { width: 4rem; }
}

/* ---- linha do processo: o "risco" que conecta os passos -----------------------
   ⚠️ A primeira versão desenhava UMA linha no container inteiro, que descia
   além do último passo e parecia apontar para um passo 4 inexistente.
   Agora cada passo tem seu PRÓPRIO segmento, ligando-o ao seguinte — e o
   último não tem segmento nenhum. A linha termina exatamente no passo 3. */
.processo { position: relative; counter-reset: passo; }
.processo article {
  position: relative;
  padding: 0 0 clamp(1.75rem, 4vw, 2.5rem) 3.5rem;
}
.processo article:last-child { padding-bottom: 0; }

.processo article:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.06rem;              /* centro do marcador de 2.25rem */
  top: 2.5rem;                /* logo abaixo do marcador */
  bottom: 0;
  width: 2px;
  background: var(--c-terra);
  transform-origin: top;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .processo article:not(:last-child)::after {
      animation: risco-desce linear both;
      animation-timeline: view();
      animation-range: entry 25% cover 60%;
    }
  }
}
@keyframes risco-desce {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.processo article::before {
  counter-increment: passo;
  content: "0" counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: var(--c-terra);
  color: var(--c-concreto);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
.processo h3 { margin-bottom: 0.4rem; }
.processo p { max-width: 56ch; color: var(--fg-muted); font-weight: 300; }

/* ---- portfólio unificado: tira de acervo + link p/ a página Projetos ----------- */
.acervo-tira {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1px;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.12);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.acervo-tira figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-card); }
.acervo-tira img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.6) brightness(0.85);
  transition: filter var(--dur-slow) ease, transform var(--dur-slow) ease;
}
.acervo-tira figure:hover img { filter: none; transform: scale(1.08); }
.verlink {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--c-concreto);
  text-decoration: none;
}
.verlink strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 3vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
  padding-bottom: 0.3rem;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.verlink strong::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.verlink:hover strong { color: var(--c-luz); }
.verlink:hover strong::after { transform: scaleX(1); }
.verlink small { font-size: var(--fs-micro); letter-spacing: 0.15em; text-transform: uppercase; color: rgb(227 225 220 / 0.55); }

/* ==========================================================================
   PÁGINAS INTERNAS (projetos.html e detalhe de projeto) — 07/08/2026.
   O topo, o rodapé, o modal e as fontes são os mesmos da home; só entram
   aqui os blocos que a home não tem.
   ========================================================================== */

/* ---- hero curto das páginas internas --------------------------------------- */
.hero-pagina {
  position: relative;
  min-height: min(58svh, 30rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.hero-pagina__fundo { position: absolute; inset: -8% 0; z-index: -1; }
.hero-pagina__fundo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-pagina__fundo {
      animation: hero-parallax linear both;
      animation-timeline: scroll();
      animation-range: 0 60svh;
    }
  }
}
.hero-pagina__conteudo { padding: 7rem var(--gutter) 3.5rem; max-width: 60rem; }
.hero-pagina .sobrancelha { color: #fff; opacity: 0.9; max-width: none; }
.hero-pagina h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: 1.04; margin: 0.75rem 0 0.75rem; }
.hero-pagina p { max-width: 52ch; margin-inline: auto; opacity: 0.92; font-weight: 300; }

/* migalha de navegação */
.migalha {
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.75);
  max-width: none;
}
.migalha a { color: inherit; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / 0.4); }
.migalha a:hover { color: #fff; border-color: #fff; }

/* ---- grade de projetos ------------------------------------------------------ */
.projetos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: 1.5rem;
}
.projeto-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--c-concreto-2);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.projeto-cartao[hidden] { display: none; }
.projeto-cartao:hover { border-color: var(--c-terra); }
.projeto-cartao__img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-dark); }
.projeto-cartao__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) ease;
}
.projeto-cartao:hover .projeto-cartao__img img { transform: scale(1.06); }
.projeto-cartao__etiqueta {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  background: rgb(18 18 18 / 0.78);
  color: var(--c-concreto);
  font-family: var(--font-display);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
}
.projeto-cartao__texto { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.projeto-cartao__texto h2 {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  margin: 0;
  line-height: 1.15;
}
.projeto-cartao__local { font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); }
.projeto-cartao__ver {
  margin-top: auto;
  padding-top: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-terra-texto);
}
.projeto-cartao__ver::after { content: " →"; display: inline-block; transition: transform var(--dur) var(--ease); }
.projeto-cartao:hover .projeto-cartao__ver::after { transform: translateX(4px); }

.contagem {
  text-align: center;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 1.5rem;
  max-width: none;
}

/* ---- detalhe de projeto ------------------------------------------------------ */
.ficha {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.ficha div { background: var(--bg); padding: 1.25rem 1.35rem; }
.ficha dt {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 0.3rem;
}
.ficha dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.05rem;
}

/* galeria do detalhe: ritmo editorial, alterna cheia e meia */
.galeria-projeto { display: grid; gap: 1.25rem; }
.galeria-projeto figure { margin: 0; position: relative; overflow: hidden; background: var(--c-dark); }
.galeria-projeto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-projeto figcaption {
  padding: 0.75rem 0 0;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
@media (min-width: 56rem) {
  .galeria-projeto { grid-template-columns: 1fr 1fr; }
  .galeria-projeto .larga { grid-column: 1 / -1; }
}

/* navegação entre projetos */
.entre-projetos {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.entre-projetos a {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.25rem;
}
.entre-projetos a:hover { color: var(--c-terra-texto); border-color: var(--c-terra); }

/* ==========================================================================
   v5 — TRANSIÇÃO ENTRE PÁGINAS (07/08/2026)

   View Transition cross-document: duas linhas de CSS dão ao site estático
   a sensação de aplicativo. Quem não suporta (Firefox hoje) navega normal,
   sem nada quebrado — degradação de risco zero.

   O efeito principal: a imagem do cartão na grade e a imagem do hero do
   detalhe compartilham `view-transition-name`, então o navegador ANIMA uma
   até a outra. É literalmente "o elemento se conectando" entre as páginas.
   ========================================================================== */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-sai 0.28s cubic-bezier(0.4, 0, 1, 1) both;
  }
  ::view-transition-new(root) {
    animation: vt-entra 0.42s cubic-bezier(0, 0, 0.2, 1) both;
  }
  /* A imagem que viaja entre as páginas: o PAREAMENTO é feito pelo
     `view-transition-name`, que precisa ser IGUAL nos dois elementos e
     ÚNICO na página — por isso ele vai inline no HTML, um por projeto
     (`capa-elenir`, `capa-ricardo`...). A classe abaixo só serve para
     estilizar o grupo todo de uma vez. */
  ::view-transition-group(.capa-projeto) {
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* dentro do morph, as duas fotos se dissolvem uma na outra */
  ::view-transition-old(.capa-projeto),
  ::view-transition-new(.capa-projeto) {
    animation-duration: 0.6s;
    mix-blend-mode: normal;
  }
}
@keyframes vt-sai   { to   { opacity: 0; transform: translateY(-1.5rem); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(1.5rem); } }

.projeto-cartao__img,
.hero-pagina__fundo { view-transition-class: capa-projeto; }

/* ==========================================================================
   v5 — MOVIMENTO COM VOCABULÁRIO DE ARQUITETURA
   Tudo CSS puro, scroll-driven ou keyframe. 0 KB de biblioteca.
   ========================================================================== */

/* ---- 1. (vago) --------------------------------------------------------
   Aqui viviam a planta baixa que se desenhava e, depois dela, o risco
   da fachada. As duas saíram da home em 07/08/2026 (a segunda por não
   ter ficado boa) e o CSS foi removido junto para não pesar à toa.
   Recuperável no histórico do git desta pasta. */

/* ---- 2. BLOCOS QUE EMPILHAM -------------------------------------------------
   Os cartões de serviço/passo sobem em sequência, como peças assentadas.
   Cada um entra um pouco depois do anterior. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .assenta > * {
      animation: assenta-bloco linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 40%;
    }
    .assenta > *:nth-child(2) { animation-range: entry 12% cover 47%; }
    .assenta > *:nth-child(3) { animation-range: entry 19% cover 54%; }
  }
}
@keyframes assenta-bloco {
  from { opacity: 0; transform: translateY(2.5rem) scaleY(0.94); transform-origin: bottom; }
  to   { opacity: 1; transform: none; }
}

/* ---- 3. HERO COM PROFUNDIDADE REAL ------------------------------------------
   A imagem afunda e escurece enquanto o conteúdo sobe mais rápido e some.
   É o efeito de câmera que dá a sensação de "entrar" na página. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-pagina__fundo,
    .hero-cinema__fundo {
      animation: fundo-afunda linear both;
      animation-timeline: scroll();
      animation-range: 0 90svh;
    }
    .hero-pagina__conteudo,
    .hero-cinema__conteudo {
      animation: conteudo-sobe linear both;
      animation-timeline: scroll();
      animation-range: 0 70svh;
    }
  }
}
@keyframes fundo-afunda {
  from { transform: translateY(0) scale(1.06); filter: brightness(1); }
  to   { transform: translateY(14%) scale(1); filter: brightness(0.55); }
}
@keyframes conteudo-sobe {
  from { transform: translateY(0); opacity: 1; }
  60%  { opacity: 1; }
  to   { transform: translateY(-3.5rem); opacity: 0; }
}

/* ---- 4. MALHA TÉCNICA que aparece ao rolar ---------------------------------- */
.malha {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.14) 1px, transparent 1px);
  background-size: 6.5rem 6.5rem;
  opacity: 0;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .malha {
      animation: malha-surge linear both;
      animation-timeline: scroll();
      animation-range: 0 60svh;
    }
  }
}
@keyframes malha-surge { from { opacity: 0; } 40% { opacity: 1; } to { opacity: 0; } }

/* ==========================================================================
   v5 — MENU, OPÇÃO A: TORRE LATERAL
   Faixa vertical fixa na esquerda. Libera a imagem inteira e dá ao site a
   silhueta de estúdio de arquitetura. Vira barra superior no celular.
   ========================================================================== */
.torre {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5.5rem;
  z-index: 60;
  background: var(--c-dark);
  border-right: 1px solid rgb(255 255 255 / 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
}
.torre__marca img { width: 2.5rem; height: auto; display: block; }
.torre__links {
  display: flex;
  flex-direction: column-reverse;   /* lê de baixo para cima na vertical */
  align-items: center;
  gap: 2.25rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.torre__links a {
  color: rgb(227 225 220 / 0.72);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  position: relative;
  padding-inline: 0.2rem;
  transition: color var(--dur) var(--ease);
}
.torre__links a::before {
  content: "";
  position: absolute;
  inset-inline-start: -0.55rem;
  inset-block: 50% 50%;
  width: 1px;
  background: var(--c-salmao);
  transition: inset-block 0.45s var(--ease);
}
.torre__links a:hover { color: #fff; }
.torre__links a:hover::before { inset-block: 0 0; }
.torre__pe {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(227 225 220 / 0.4);
}
/* o corpo desloca para não passar por baixo da torre */
body.com-torre { padding-left: 5.5rem; }
body.com-torre .barra-fixa { left: 5.5rem; }

@media (max-width: 56rem) {
  .torre {
    flex-direction: row;
    inset: 0 0 auto 0;
    width: auto;
    height: 4rem;
    padding: 0 1rem;
    border-right: 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
  }
  .torre__links { writing-mode: horizontal-tb; transform: none; flex-direction: row; gap: 1.1rem; }
  .torre__links a { font-size: 0.6rem; letter-spacing: 0.14em; }
  .torre__links a::before { display: none; }
  .torre__pe { display: none; }
  .torre__marca img { width: 2rem; }
  body.com-torre { padding-left: 0; padding-top: 4rem; }
  body.com-torre .barra-fixa { left: 0; }
  body.com-torre .hero-cinema { min-height: calc(100svh - 4rem); }
}

/* ==========================================================================
   v5 — MENU, OPÇÃO B: CORTINA EM TELA CHEIA
   Topo quase invisível (só marca e um botão). O menu abre como uma cortina
   com os destinos em tipografia grande e uma imagem de apoio. É o padrão
   dos escritórios de arquitetura premium: some da frente da imagem.
   ========================================================================== */
.topo-discreto {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem clamp(1rem, 4vw, 3rem);
}

/* ⚠️ O topo é branco porque nasce sobre a imagem escura do hero. Quando a
   pessoa rola para o conteúdo (fundo areia claro), branco sobre claro fica
   ILEGÍVEL. Solução: ao sair do hero, o topo veste um fundo escuro. O
   intervalo 30svh–55svh funciona tanto no hero de 100svh (home) quanto no
   de 58svh (páginas internas). */
@supports (animation-timeline: scroll()) {
  .topo-discreto {
    animation: topo-veste linear both;
    animation-timeline: scroll();
    animation-range: 30svh 55svh;
  }
}
@keyframes topo-veste {
  from { background: transparent; backdrop-filter: blur(0px); }
  to   { background: rgb(18 18 18 / 0.92); backdrop-filter: blur(10px); }
}
/* Sem scroll-timeline (Firefox hoje) o topo ficaria transparente para
   sempre e o texto sumiria sobre o conteúdo claro. Aqui a legibilidade
   vence a elegância: fundo escuro fixo desde o início. */
@supports not (animation-timeline: scroll()) {
  .topo-discreto { background: rgb(18 18 18 / 0.9); backdrop-filter: blur(10px); }
}
.topo-discreto .marca-min { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.topo-discreto .marca-min img { height: 2.4rem; width: auto; display: block; }
.topo-discreto .marca-min span {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
}
@media (max-width: 40rem) { .topo-discreto .marca-min span { display: none; } }

.botao-cortina {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 0.5rem 0;
}
.botao-cortina i {
  display: block;
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: transform var(--dur) var(--ease);
}
.botao-cortina i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
}
.botao-cortina:hover i::after { width: 60%; }

.cortina-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--c-dark);
  color: var(--c-concreto);
  display: grid;
  grid-template-columns: 1fr;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease), opacity 0.35s var(--ease);
}
@media (min-width: 60rem) { .cortina-menu { grid-template-columns: 1.05fr 0.95fr; } }
.cortina-menu[data-aberta="true"] { opacity: 1; pointer-events: auto; clip-path: inset(0 0 0 0); }

.cortina-menu__lista {
  align-self: center;
  padding: clamp(4.5rem, 10vw, 6rem) clamp(1.25rem, 6vw, 5rem) clamp(2rem, 6vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1.4vw, 0.9rem);
}
.cortina-menu__lista a {
  color: inherit;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 5.5vw, 3.5rem);
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: color var(--dur) var(--ease), opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.cortina-menu[data-aberta="true"] .cortina-menu__lista a { opacity: 1; transform: none; }
.cortina-menu[data-aberta="true"] .cortina-menu__lista a:nth-child(1) { transition-delay: 0.10s; }
.cortina-menu[data-aberta="true"] .cortina-menu__lista a:nth-child(2) { transition-delay: 0.16s; }
.cortina-menu[data-aberta="true"] .cortina-menu__lista a:nth-child(3) { transition-delay: 0.22s; }
.cortina-menu[data-aberta="true"] .cortina-menu__lista a:nth-child(4) { transition-delay: 0.28s; }
.cortina-menu[data-aberta="true"] .cortina-menu__lista a:nth-child(5) { transition-delay: 0.34s; }
.cortina-menu__lista a small {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--c-salmao);
  text-transform: uppercase;
}
.cortina-menu__lista a:hover { color: var(--c-salmao); }

.cortina-menu__midia { position: relative; overflow: hidden; display: none; }
@media (min-width: 60rem) { .cortina-menu__midia { display: block; } }
.cortina-menu__midia img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) brightness(0.75);
  transform: scale(1.08);
  transition: transform 1.2s var(--ease);
}
.cortina-menu[data-aberta="true"] .cortina-menu__midia img { transform: scale(1); }
.cortina-menu__midia figcaption {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  right: 2rem;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(227 225 220 / 0.8);
}
.cortina-menu__fechar {
  position: absolute;
  top: 1.15rem;
  right: clamp(1rem, 4vw, 3rem);
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 0.5rem 0;
  z-index: 2;
}
.cortina-menu__fechar:hover { color: var(--c-salmao); }
.cortina-menu__pe {
  position: absolute;
  left: clamp(1.25rem, 6vw, 5rem);
  bottom: 1.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(227 225 220 / 0.45);
}

/* ==========================================================================
   O CADERNO (o "blog") — 07/08/2026

   O nome "blog" virou ANTES DA OBRA (decisão do Guilherme, 07/08/2026):
   diz para quem serve e quando ler, sem precisar de explicação. As classes
   daqui são neutras de propósito — o nome já mudou duas vezes.
   Para busca e para IA o que pesa é o título de cada texto, não o nome da
   seção — então dá para ter personalidade aqui sem custo de tráfego.
   ========================================================================== */

/* ---- lista de textos ------------------------------------------------------- */
.textos-lista { display: grid; gap: 1px; background: var(--border); border-block: 1px solid var(--border); }
.texto-item {
  display: grid;
  gap: 0.4rem 2rem;
  background: var(--bg);
  padding: clamp(1.5rem, 4vw, 2.25rem) 0;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease);
}
@media (min-width: 56rem) {
  .texto-item { grid-template-columns: 9rem 1fr auto; align-items: baseline; }
}
.texto-item:hover { background: var(--bg-alt); }
.texto-item__marca {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-terra-texto);
}
.texto-item h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  margin: 0 0 0.35rem;
  line-height: 1.2;
  text-transform: none;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.texto-item p { margin: 0; color: var(--fg-muted); max-width: 60ch; font-weight: 300; }
.texto-item__tempo {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}
.texto-item--vazio { opacity: 0.55; pointer-events: none; }
.texto-item--vazio .texto-item__tempo { color: var(--c-terra-texto); }

/* ---- o texto em si --------------------------------------------------------- */
.texto { max-width: 40rem; margin-inline: auto; }
.texto > p, .texto > ul, .texto > ol { max-width: none; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.75; }
.texto > h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  text-transform: none;
  letter-spacing: 0.01em;
  margin: clamp(2.25rem, 5vw, 3rem) 0 0.75rem;
  line-height: 1.2;
}
.texto > h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  text-transform: none;
  letter-spacing: 0;
  margin: 1.75rem 0 0.4rem;
}
.texto ul, .texto ol { padding-left: 1.25rem; }
.texto li { margin-bottom: 0.6rem; }
.texto strong { font-weight: 600; }

/* destaque de leitura: o parágrafo que resume o texto */
.texto .abre {
  font-family: var(--font-serifa);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: 1.45;
  color: var(--c-stone-700, var(--fg));
  border-left: 2px solid var(--c-terra);
  padding-left: 1.25rem;
  margin-bottom: 2rem;
}

/* caixa de nota lateral */
.nota-lateral {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 1.25rem 1.4rem;
  margin: 2rem 0;
}
.nota-lateral p { margin: 0; font-size: 1rem; color: var(--fg-muted); }
.nota-lateral strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-terra-texto);
  margin-bottom: 0.4rem;
}

/* Pergunta para as arquitetas revisarem. Fica VISÍVEL de propósito: quem
   revisa lê a página, não o código. Tem que sumir antes de publicar — o
   amarelo berrante é intencional para ninguém esquecer. */
.texto mark {
  background: #fff3bf;
  color: #5c4b00;
  padding: 0.15em 0.35em;
  border-bottom: 2px solid #f0c000;
  font-size: 0.94em;
}

/* rodapé de fontes do texto */
.texto .fonte {
  font-size: 0.875rem !important;
  line-height: 1.6;
  color: var(--fg-muted);
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}

/* meta do texto (data e tempo) */
.texto-meta {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  max-width: none;
}

/* chamada de fim de texto */
.fim-texto {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  text-align: center;
}
.fim-texto h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  text-transform: none;
  margin: 0 0 0.5rem;
}
.fim-texto p { color: var(--fg-muted); margin-inline: auto; margin-bottom: 1.25rem; }

/* chamada para o seção de textos, usada dentro das páginas de projeto */
.chamada-textos {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease);
}
.chamada-textos:hover { border-color: var(--c-terra); }
.chamada-textos strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.25rem);
  text-transform: none;
}
.chamada-textos small {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-terra-texto);
  margin-bottom: 0.3rem;
}
.chamada-textos span {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-terra-texto);
  white-space: nowrap;
}

/* ---- modal ------------------------------------------------------------------------------ */
.modal {
  border: 1px solid var(--c-dark);
  border-radius: 0;
  padding: 0;
  max-width: min(26rem, calc(100vw - 2rem));
  width: 100%;
}
.modal::backdrop { background: rgb(18 18 18 / 0.65); backdrop-filter: blur(2px); }
.modal .form { border: 0; }
.modal__fechar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: 0;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--fg-muted);
}
.modal__fechar:hover { color: var(--fg); }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-entra 0.35s var(--ease); }
}
@keyframes modal-entra {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   TEXTO PINTADO PELO base.css (08/08/2026)

   O base.css usa --accent para pintar texto em 11 lugares, e --accent
   aponta para o terracota, que reprova em AA como texto (3,80 / 3,77).
   NÃO dá para reapontar --accent: ele também é FUNDO do botão, e em bloco
   escuro --c-terra-texto vira salmão — botão salmão com texto branco seria
   pior que o problema original.
   Então a correção é só onde o accent vira tinta.
   ========================================================================== */
a,
.sobrancelha,
dd,
.nav a:hover,
.faq summary:hover,
.rodape a:hover,
.menu-mobile[open] > summary { color: var(--c-terra-texto); }

/* ==========================================================================
   VÉU DO TOPO (08/08/2026)

   Medido no site publicado: o subtítulo da marca (10px, branco) cai sobre a
   parte clara do céu do render e dá 3,04 — reprova em AA. O resto do topo
   passa (o botão Menu dá 7,48), porque cai sobre a parte escura da casa.

   Conta: o fundo ali é ~148 de luminância; para o branco chegar a 4,5 ele
   precisa cair para ~118, o que pede um véu de 20%. Uso 38% para ter
   margem, já que o render muda de claro conforme a largura da tela recorta
   a imagem. Só no topo, e some antes do título — não escurece a foto.
   ========================================================================== */
.topo-discreto::before {
  content: ;
  position: absolute;
  inset: 0 0 auto 0;
  height: 200%;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.38), transparent);
  pointer-events: none;
  z-index: -1;
}
/* ⚠️ NÃO redeclarar position aqui: o .topo-discreto é position:fixed lá em
   cima, e um "position: relative" nesta linha (que eu escrevi em 08/08/2026
   junto com o véu) venceu na cascata, tirou o cabeçalho de cima da imagem e
   jogou a faixa no fluxo da página — logo e texto brancos sobre o fundo
   claro, ilegíveis. O fixed já é posicionado; o ::before não precisa de mais
   nada. */

/* ==========================================================================
   LEGENDA EM FUNDO ESCURO (08/08/2026)

   As legendas de imagem usam --c-cinza-600 (#5c5654), que foi calibrado
   para o fundo CLARO (5,51 sobre concreto). Nas galerias o fundo é escuro,
   e ali o mesmo cinza dá 2,60 — reprova.

   #89807d é o mesmo cinza-quente clareado, mantendo matiz e saturação:
   4,86 sobre a seção escura e 4,51 sobre o card. Passa nos dois.
   ========================================================================== */
.secao--invert figcaption,
.galeria figcaption,
.acervo-tira figcaption,
.galeria-projeto figcaption,
.stack-card figcaption,
.cortina-menu figcaption { color: #89807d; }

/* ==========================================================================
   AJUSTES DE CELULAR (08/08/2026, revisão do Guilherme no aparelho dele)

   Três coisas que só aparecem na tela pequena:

   1. PORTFÓLIO — o card vira uma coluna e a imagem caía DEPOIS de todo o
      texto, com 16rem de altura. Num site de arquitetura a imagem é o
      produto: ela passa a vir primeiro e ganha proporção de foto.
   2. ACERVO — o grid auto-fit resolvia para uma coluna só, deixando a tira
      com cara de lista solta. Duas colunas devolvem a leitura de galeria.
   3. EQUIPE — cada pessoa ocupava a tela quase inteira. Duas colunas com
      retrato menor mostram o time como time.
   ========================================================================== */
@media (max-width: 48rem) {
  .stack-card { min-height: 0; }
  .stack-card__img {
    order: -1;                    /* a foto antes do texto */
    min-height: 0;
    /* ⚠️ 4/3 aqui dava 247px de altura numa tela de 330px — MENOS que os
       256px do min-height que havia antes. Quadrado dá 330px e devolve
       presença à foto, que num site de arquitetura é o produto. */
    aspect-ratio: 1 / 1;
  }

  .acervo-tira { grid-template-columns: 1fr 1fr; }

  .equipe { grid-template-columns: 1fr 1fr; gap: clamp(0.9rem, 3vw, 1.4rem); }
  .equipe .retrato { border-radius: 3rem 3rem 0 0; margin-bottom: 0.6rem; }
  .equipe strong { font-size: 0.95rem; }
  .equipe span { font-size: 0.78rem; }
}