/* ============================================================
   Juliana Lino Arq. — style.css
   Tokens e regras conforme especificação de handoff.
   ============================================================ */

/* ---------- 0 · Fontes ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600.woff2') format('woff2');
}
/* Cabinet Grotesk — principal do DNA (3.2): título e display, nunca texto corrido */
@font-face {
  font-family: 'Cabinet Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/cabinet-grotesk-500.woff2') format('woff2');
}

/* ---------- 1 · Tokens ---------- */
:root {
  /* cor */
  --off-white:   #FCFBF9;
  --quase-preto: #262626;
  --greige:      #D9D2C5;
  --cinza-texto: rgba(38, 38, 38, 0.6); /* token text-secondary-light do DNA 3.1 */
  --terracota:   #8C451C;
  --oliva:       #555936; /* não aparece na interface — só dentro das imagens */

  /* tipografia */
  --font: 'Inter', -apple-system, sans-serif;
  --font-display: 'Cabinet Grotesk', 'Inter', -apple-system, sans-serif;
  --fs-manifesto: clamp(1.5rem, 2.4vw, 2rem);
  --fs-titulo:    clamp(2rem, 4vw, 3.5rem);
  --fs-projeto:   clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-corpo:     1rem;
  --fs-ficha:     0.75rem;
  --fs-micro:     0.6875rem;
  --lh-tight: 1.1;
  --lh-corpo: 1.6;
  --ls-titulo: -0.02em;
  --ls-caixa-alta: 0.14em;

  /* espaço — escala de 8 */
  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 40px;
  --s5: 64px;  --s6: 96px;  --s7: 160px; --s8: 240px;

  /* grade */
  --margem: clamp(24px, 5vw, 80px);
  /* recuo editorial: uma coluna da malha, para blocos que respiram mais */
  --recuo: clamp(0px, 5.9vw, 85px);
  --col: 12;
  --gutter: 24px;

  /* movimento */
  --t-rapido: 400ms;
  --t-padrao: 700ms;
  --t-lento:  1100ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* rolagem suave fica por conta do Lenis; scroll-behavior nativo conflita */
html.lenis, html.lenis body { height: auto; }

body {
  font-family: var(--font);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--quase-preto);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 2px;
}

::selection { background: var(--greige); color: var(--quase-preto); }

/* utilitário caixa alta */
.caps {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-caixa-alta);
}

/* grade de 12 dentro das margens */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  column-gap: var(--gutter);
  padding-inline: var(--margem);
}

/* ---------- 3 · Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader img {
  width: min(400px, 60vw);
  height: auto;
  opacity: 0;
}
.preloader.is-hidden { display: none; }

/* ---------- 4 · Header ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--margem);
  background: none;
  color: var(--off-white);
  transition: color var(--t-rapido) var(--ease),
              transform var(--t-rapido) var(--ease);
}
.header.is-dark { color: var(--quase-preto); }
.header.is-hidden { transform: translateY(-100%); }

.header .marca { display: block; color: inherit; }
/* lockup no mínimo de 244 px de largura (DNA, LEIA-ME do logotipo) */
.header .marca svg { width: 244px; height: auto; display: block; fill: currentColor; }
.header .marca .marca-simbolo { display: none; width: auto; height: 28px; }

.header-links { display: flex; gap: var(--s4); }
.header-links a { font-weight: 500; }

/* Telefone: só a marca; links descem para barra fixa no rodapé */
.nav-bar-mobile {
  display: none;
}
@media (max-width: 480px) {
  .header-links { display: none; }
  /* o lockup não desce de 244 px: na barra estreita entra o símbolo isolado */
  .header .marca svg { display: none; }
  .header .marca .marca-simbolo { display: block; }
  .nav-bar-mobile {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s5);
    background: var(--off-white);
    border-top: 1px solid var(--greige);
    color: var(--quase-preto);
  }
  .nav-bar-mobile a { font-weight: 500; }
}

/* ---------- 5 · Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--quase-preto);
}
.hero picture, .hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-rodape {
  position: absolute;
  left: var(--margem);
  right: var(--margem);
  bottom: var(--s4);
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  color: var(--off-white);
  z-index: 2;
}
.hero-indicador {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--s2);
  width: 1px;
  height: 24px;
  background: var(--terracota);
  z-index: 2;
  animation: pulso 2s ease-in-out infinite;
  transition: opacity var(--t-rapido) var(--ease);
}
.hero-indicador.is-gone { opacity: 0 !important; animation: none; }
@keyframes pulso {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@media (max-width: 480px) {
  .hero-rodape {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
    bottom: calc(56px + var(--s4));
  }
  .hero-indicador { bottom: calc(56px + var(--s2)); }
}

/* ---------- 6 · Manifesto ---------- */
/* campo de cor sangrado: quase preto sobre greige, a combinação de bloco do DNA. */
/* manifesto escuro: o respiro entre o hero e o índice (Figma 2026-08) */
.manifesto {
  align-content: center;
  padding-block: clamp(88px, 12.9vw, 185px) clamp(120px, 18.3vw, 263px);
  background: var(--quase-preto);
  color: var(--off-white);
}
.manifesto-inner {
  grid-column: 1 / -1;
  text-align: center;
}
/* Figma: o parágrafo é mais estreito que o título (1154 de 1440) */
.manifesto-inner p:first-of-type { max-width: 80%; margin-inline: auto; }
@media (max-width: 900px) { .manifesto-inner { grid-column: 1 / -1; } }

.manifesto h1,
.manifesto-inner p:first-of-type {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.1vw, 3rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.manifesto h1 { color: var(--off-white); }
.manifesto-inner p:first-of-type {
  margin-top: 0.81em;
  line-height: 1.1;
  color: var(--greige);
}
.manifesto-inner p + p {
  margin-top: var(--s4);
  font-size: clamp(0.9375rem, 1.4vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--quase-preto);
  max-width: 46ch;
}

@media (max-width: 768px) {
  .manifesto { padding-block: var(--s6); }
}

/* ---------- 7 · Índice ----------
   Comportamento inspirado na referência: tudo em meio-tom, a linha sob o cursor
   acende, e a imagem do projeto acompanha o ponteiro dentro da linha. */
.indice {
  display: grid;
  align-content: center;
  padding-block: 152px 93px;
}
.indice-header {
  color: var(--cinza-texto);
  margin-bottom: 61px;
  padding-inline: calc(var(--margem) + var(--recuo));
}
.indice nav { display: block; }

.indice-linha {
  position: relative;
  display: grid;
  /* Figma: nome recuado 95 do início da linha; tags a ~61%; seta no fim */
  grid-template-columns: 55.4% auto 1fr;
  align-items: center;
  gap: var(--s3);
  padding-block: 25px;
  padding-left: 6.6%;
  margin-inline: calc(var(--margem) + var(--recuo));
  border-bottom: 1px solid rgba(38, 38, 38, 0.12);
  transition: border-bottom-color var(--t-rapido) var(--ease);
}
.indice-linha:first-of-type { border-top: 1px solid rgba(38, 38, 38, 0.12); }

.indice-num {
  color: var(--terracota);
  font-size: var(--fs-ficha);
  font-weight: 500;
  opacity: 0.45;
  transition: opacity var(--t-rapido) var(--ease);
}
.indice-nome {
  color: var(--quase-preto);
  font-family: var(--font-display);
  font-size: var(--fs-projeto);
  font-weight: 500;
  line-height: var(--lh-tight);
  opacity: 0.45;
  transition: opacity var(--t-rapido) var(--ease);
}
.indice-tags { display: flex; flex-wrap: wrap; gap: var(--s1); }
/* seta de entrada, no fim da linha (Figma 2026-08) */
.indice-seta {
  font-size: 1.5rem;
  line-height: 1;
  justify-self: end;
  margin-right: clamp(0px, 2.7vw, 39px);
  color: var(--quase-preto);
  opacity: 1;
  transition: opacity var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease);
}
.indice-tags .tag {
  border: 1px solid rgba(38, 38, 38, 0.2);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-caixa-alta);
  line-height: 1;
  white-space: nowrap;
  opacity: 0.45;
  transition: opacity var(--t-rapido) var(--ease);
}
.indice-linha .indice-thumb { display: none; }

/* visor único: um quadro que persegue o cursor pelo índice inteiro;
   entre linhas, o quadro permanece — só a foto troca dentro dele */
.indice nav { position: relative; }
.indice-visor {
  position: absolute;
  left: 0;
  top: 0;
  width: 230px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  display: none;
  will-change: transform;
}
.indice-visor img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .indice-visor { display: block; }
  /* só o filete de baixo reage — o de cima pertence à linha anterior */
  .indice-linha:hover { border-bottom-color: rgba(38, 38, 38, 0.5); }
  .indice-linha:hover .indice-num,
  .indice-linha:hover .indice-nome,
  .indice-linha:hover .tag,
  .indice-linha:focus-visible .indice-num,
  .indice-linha:focus-visible .indice-nome,
  .indice-linha:focus-visible .tag { opacity: 1; }
  .indice-linha:hover .indice-seta,
  .indice-linha:focus-visible .indice-seta { opacity: 1; transform: translate(3px, -3px); }
}

/* telefone e tablet: sem hover, miniatura sempre visível */
@media (max-width: 1024px) {
  .indice-header { padding-inline: 0; }
  .indice-linha {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "thumb nome ano";
    padding-block: var(--s2);
    padding-left: 0;
    column-gap: var(--s2);
  }
  .indice-linha .indice-thumb {
    display: block;
    grid-area: thumb;
    width: 56px;
    height: 56px;
    object-fit: cover;
  }
  .indice-nome { grid-area: nome; opacity: 1; }
  .indice-tags { grid-area: ano; }
  .indice-tags .tag { opacity: 1; }
  .indice-tags .tag:not(:first-child) { display: none; }
  .indice-seta { display: none; }
}
@media (max-width: 480px) {
  .indice-linha {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "thumb nome ano";
  }
  .indice-num { display: none; }
  .indice-nome {
    font-size: 1.125rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---------- 8 · Projetos ---------- */
.antessala {
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  background: var(--off-white);
  text-align: center;
}
.projeto-num {
  color: var(--terracota);
  font-size: var(--fs-ficha);
  font-weight: 500;
  line-height: 1.17;
}
.antessala h2, .projeto-texto h2, .projeto-texto .projeto-nome {
  font-family: var(--font-display);
  font-size: var(--fs-titulo);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-titulo);
}

.abertura {
  width: 100%;
  height: 85vh;
  overflow: hidden;
}
.abertura .quadro { height: 100%; }

.projeto-texto { padding-block: var(--s6); }
.projeto-texto .col-titulo { grid-column: 2 / span 3; }
.projeto-texto .col-corpo  { grid-column: 7 / span 5; max-width: 65ch; }
.projeto-texto .projeto-num { display: block; margin-bottom: var(--s1); }
.projeto-texto p + p { margin-top: var(--s3); }

@media (max-width: 768px) {
  
  .projeto-texto .col-titulo { grid-column: 1 / -1; margin-bottom: var(--s4); }
  .projeto-texto .col-corpo  { grid-column: 1 / -1; }
}

/* ---- sequência: quadro recortado + parallax contido ----
   A camada interna é maior que o quadro e desliza no scroll: a imagem se move
   dentro da própria moldura, sem que a moldura se mexa. */
.quadro {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: var(--greige);
}
.quadro .px-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: -7%;
  bottom: -7%;
  will-change: transform;
}
.quadro picture,
.quadro img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ritmo: três blocos, cada um com a sua proporção.
   As alturas derivam da largura (aspect-ratio), então o conjunto fecha sozinho. */
.seq { margin-bottom: var(--s2); align-items: end; }

.seq-cheia { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* dominante: paisagem larga + retrato pequeno assentado na base */
.seq-dom .-grande  { grid-row: 1; grid-column: 1 / span 8;  aspect-ratio: 3 / 2; }
.seq-dom .-pequena { grid-row: 1; grid-column: 10 / span 3; aspect-ratio: 4 / 5; }
.seq-dom.-espelhado .-grande  { grid-column: 5 / span 8; }
.seq-dom.-espelhado .-pequena { grid-column: 1 / span 3; }

/* retrato: vertical alta + paisagem pequena deslocada para cima */
.seq-ret .-grande  { grid-row: 1; grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.seq-ret .-pequena {
  grid-row: 1;
  grid-column: 8 / span 4;
  aspect-ratio: 3 / 2;
  align-self: start;
  margin-top: 14%;
}
.seq-ret.-espelhado .-grande  { grid-column: 8 / span 5; }
.seq-ret.-espelhado .-pequena { grid-column: 1 / span 4; }

@media (max-width: 768px) {
  .seq-cheia { aspect-ratio: 4 / 3; }
  .seq-dom .-grande, .seq-dom.-espelhado .-grande,
  .seq-ret .-grande, .seq-ret.-espelhado .-grande { grid-column: 1 / -1; }
  .seq-ret .-grande, .seq-ret.-espelhado .-grande { aspect-ratio: 3 / 4; }
  .seq-dom .-pequena, .seq-dom.-espelhado .-pequena,
  .seq-ret .-pequena, .seq-ret.-espelhado .-pequena {
    grid-column: 1 / span 8;
    margin-top: var(--s2);
    align-self: auto;
  }
}


/* ficha e vazio */
.ficha-bloco { padding-top: var(--s5); }
.ficha {
  grid-column: 8 / span 4;
  font-size: var(--fs-ficha);
  text-transform: uppercase;
  letter-spacing: var(--ls-caixa-alta);
  line-height: var(--lh-corpo);
  font-style: normal;
}
@media (max-width: 768px) { .ficha { grid-column: 1 / -1; } }

.vazio { height: 42vh; background: var(--off-white); }

/* ---------- 8b · Anatomias de projeto na home ---------- */

/* --- galeria horizontal: a trilha corre pelo scroll --- */
.galeria {
  position: relative;
  overflow: hidden;
  margin-block: var(--s5);
}
.gal-trilha {
  display: flex;
  gap: var(--s2);
  padding-inline: var(--margem);
  will-change: transform;
}
.gal-item {
  flex: 0 0 min(62vw, 780px);
  height: 62vh;
}
.gal-item:nth-child(even) { height: 48vh; align-self: flex-end; }
@media (max-width: 768px) {
  .gal-item { flex-basis: 82vw; height: 46vh; }
  .gal-item:nth-child(even) { height: 40vh; }
}

/* --- ficha fixa lateral: a coluna gruda, as imagens passam --- */
.ff-corpo { padding-block: var(--s5); align-items: start; }
.ff-lado  { grid-column: 1 / span 4; }
.ff-pilha { grid-column: 6 / span 7; display: grid; gap: var(--s2); }
.ff-grude {
  position: sticky;
  top: 120px;
}
.ff-nome {
  font-family: var(--font-display);
  font-size: var(--fs-projeto);
  font-weight: 500;
  line-height: var(--lh-tight);
  margin: var(--s1) 0 var(--s3);
}
.ff-texto p { font-size: var(--fs-corpo); line-height: var(--lh-corpo); max-width: 42ch; }
.ff-texto p + p { margin-top: var(--s2); }
.ff-grude .ficha {
  display: block;
  grid-column: auto;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--greige);
}
.ff-img { height: 78vh; }
.ff-img:nth-child(3n) { height: 56vh; }
@media (max-width: 900px) {
  .ff-lado, .ff-pilha { grid-column: 1 / -1; }
  .ff-grude { position: static; margin-bottom: var(--s4); }
  .ff-img, .ff-img:nth-child(3n) { height: 52vh; }
}


/* --- convite: duas imagens em contraponto e a entrada para o projeto ---
   A composição vive num grid próprio: a principal ancora à esquerda e sangra
   até a borda, o texto ocupa o degrau à direita, e a de apoio desce por baixo
   dele. O desalinho é deliberado — é o que dá o ar de composição, não de lista. */
.projeto.-convite .antessala { height: 38vh; }

.cv-corpo {
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  column-gap: var(--gutter);
  padding-right: var(--margem);
  padding-bottom: var(--s6);
  align-items: start;
}

/* principal: sangra na borda esquerda, retrato alto */
.cv-principal {
  grid-column: 1 / span 7;
  aspect-ratio: 4 / 5;
  position: relative;
}
.cv-principal .quadro { height: 100%; }

/* texto: ocupa o topo da coluna direita, respirando longe da imagem */
.cv-lado {
  grid-column: 9 / span 4;
  padding-top: var(--s6);
}
.cv-texto p {
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  max-width: 38ch;
}
.cv-texto p + p { margin-top: var(--s3); }
.cv-ficha {
  grid-column: auto;
  display: block;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--greige);
  color: var(--cinza-texto);
}

/* apoio: desce por baixo do texto e avança sobre a coluna da principal,
   criando a sobreposição que quebra o alinhamento de lista */
.cv-apoio {
  grid-column: 6 / span 7;
  aspect-ratio: 3 / 2;
  margin-top: calc(var(--s6) * -1);
  position: relative;
  z-index: 1;
}
.cv-apoio .quadro { height: 100%; }

.cv-legenda {
  display: block;
  margin-top: var(--s2);
  color: var(--cinza-texto);
  font-size: var(--fs-micro);
}
/* a principal sangra na borda; a legenda dela volta para a margem do texto */
.cv-principal .cv-legenda { padding-left: var(--margem); }

/* entrada: o convite explícito, alinhado à direita sob a composição */
.link-seta,
.cv-entrada {
  margin-top: var(--s4);
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--greige);
  transition: border-color 0.6s var(--ease);
}
.link-seta .caps, .cv-entrada-rotulo { transition: color 0.6s var(--ease); }
.link-seta-seta { display: inline-block; transition: transform 0.6s var(--ease); }
.link-seta:hover { border-bottom-color: var(--terracota); }
.link-seta:hover .link-seta-seta { transform: translateX(8px); }
.link-seta:hover .caps { color: var(--terracota); }
.cv-entrada-seta {
  display: inline-block;
  transition: transform 0.6s var(--ease);
}
.cv-entrada:hover { border-bottom-color: var(--terracota); }
.cv-entrada:hover .cv-entrada-seta { transform: translateX(8px); }
.cv-entrada:hover .cv-entrada-rotulo { color: var(--terracota); }

@media (max-width: 900px) {
  .cv-corpo {
    padding-right: 0;
    padding-bottom: var(--s6);
    row-gap: var(--s4);
  }
  .cv-principal { grid-column: 1 / span 11; aspect-ratio: 3 / 4; }
  .cv-lado {
    grid-column: 1 / -1;
    padding-top: var(--s3);
    padding-inline: var(--margem);
  }
  .cv-apoio {
    grid-column: 2 / -1;
    aspect-ratio: 4 / 3;
    margin-top: 0;
  }
  /* as duas sangram numa das bordas — as legendas voltam para a margem do texto */
  .cv-legenda, .cv-principal .cv-legenda { padding-left: var(--margem); }
  .cv-entrada { margin-top: var(--s3); }
}

/* ---------- 8c · Estúdio ---------- */
.rotulo-secao { display: block; color: var(--cinza-texto); margin-bottom: var(--s3); }
.legenda-micro {
  display: block;
  margin-top: var(--s2);
  color: var(--cinza-texto);
  font-size: var(--fs-micro);
}

/* ---------- 8c · Três casas, três anatomias ----------
   Mesmos tokens — número, filete, legendas, convite — e uma composição
   própria por projeto: panorâmica com sobreposição, contraponto vertical
   com baseline quebrada, faixa recuada com sangria à direita. */
.spread { padding-top: 100px; --acento: var(--terracota); }
.spread .sp-cab h2, .sp-hero-titulo h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.05vw, 2.75rem);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-titulo);
  margin-top: var(--s1);
}
.spread .sp-cab h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
}
.sp-texto p { font-size: var(--fs-corpo); line-height: var(--lh-corpo); }
.sp-texto p + p { margin-top: 16px; }
.sp-ficha {
  grid-column: auto;
  display: block;
  margin-top: 16px;
  color: var(--cinza-texto);
}
.spread .link-seta { margin-top: 16px; padding-bottom: 0; border-bottom-color: transparent; }
.sp-meta { grid-column: auto; color: var(--cinza-texto); }
.spread picture { display: block; background: var(--greige); }
.spread figure img { display: block; width: 100%; height: auto; }

/* --- 01 · panorâmica: imagem contida, título e texto recuados, detalhe
   sobreposto subindo por cima da foto (medidas do Figma 2026-08) --- */
#projeto-01, #projeto-02 { --acento: var(--oliva); }
.spread .sp-cab h2::after, .sp-hero-titulo h2::after { background: var(--acento); margin-top: 8px; }
.spread .sp-cab .projeto-num, .sp-hero-titulo .projeto-num { display: block; margin-bottom: 8px; }
.spread .sp-cab h2, .sp-hero-titulo h2 { margin-top: 0; }
.spread .projeto-num { color: var(--acento); }

.-pano .sp-hero { margin-inline: 5%; }
.-pano .sp-hero picture { display: block; aspect-ratio: 1290 / 475; overflow: hidden; background: var(--greige); }
.-pano .sp-hero img { width: 100%; height: 100%; object-fit: cover; }
.sp-veu { display: none; }

.-pano .sp-corpo { position: relative; padding-top: 63px; padding-bottom: 96px; }
.-pano .sp-esquerda { margin-left: 12.85%; width: 34.3%; }
.sp-hero-titulo { color: var(--quase-preto); }
.sp-hero-titulo h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
}
.-pano .sp-texto { margin-top: 49px; }
.-pano .sp-detalhe {
  position: absolute;
  left: 58.2%;
  top: -6.32vw;
  width: 28.9%;
}
.-pano .sp-detalhe picture { display: block; aspect-ratio: 416 / 520; overflow: hidden; background: var(--greige); }
.-pano .sp-detalhe img { width: 100%; height: 100%; object-fit: cover; }
.-pano .sp-detalhe .legenda-micro { text-align: right; }

/* --- 02 · torre à esquerda, coluna verbal à direita e fachada de apoio --- */
.-vertical .sp-corpo { position: relative; display: block; padding-inline: 0; }
.-vertical .sp-torre { margin-left: 12.29%; width: 30.63%; padding-top: 40px; }
.-vertical .sp-torre picture { display: block; aspect-ratio: 441 / 732; overflow: hidden; background: var(--greige); }
.-vertical .sp-torre img { width: 100%; height: 100%; object-fit: cover; }
.-vertical .sp-direita {
  position: absolute;
  left: 50.83%;
  top: 3.47vw;
  width: 36.53%;
}
.-vertical .sp-meta { margin-top: 8px; }
.-vertical .sp-texto { margin-top: 46px; }
.-vertical { padding-bottom: 88px; }
.-vertical .sp-larga {
  position: absolute;
  left: 71.94%;
  top: 39.5vw;
  width: 15.42%;
}
.-vertical .sp-larga picture { display: block; aspect-ratio: 222 / 203; overflow: hidden; background: var(--greige); }
.-vertical .sp-larga img { width: 100%; height: 100%; object-fit: cover; }
.-vertical .sp-larga .legenda-micro { text-align: right; }

/* --- 03 · coluna verbal + detalhe à esquerda, imagem alta à direita --- */
.-faixa .sp-corpo { position: relative; display: block; padding-inline: 0; }
.-faixa .sp-coluna { margin-left: 20.14%; width: 30.83%; }
.-faixa .sp-cab h2 { margin-top: var(--s1); }
.-faixa .sp-meta { grid-column: auto; display: block; margin-top: 8px; color: var(--cinza-texto); }
.-faixa .sp-texto { margin-top: 42px; }
.-faixa { padding-bottom: 114px; }
.-faixa .sp-detalhe { margin-top: 67px; width: 68%; }
.-faixa .sp-detalhe picture { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--greige); }
.-faixa .sp-detalhe img { width: 100%; height: 100%; object-fit: cover; }
.-faixa .sp-alta {
  position: absolute;
  left: 58.26%;
  top: 1.53vw;
  width: 36.46%;
}
.-faixa .sp-alta picture { display: block; aspect-ratio: 525 / 738; overflow: hidden; background: var(--greige); }
.-faixa .sp-alta img { width: 100%; height: 100%; object-fit: cover; }
.-faixa .sp-alta .legenda-micro { text-align: right; }

@media (max-width: 900px) {
  .spread { padding-top: var(--s6); }
  .-pano .sp-hero { margin-inline: var(--margem); }
  .-pano .sp-hero picture { aspect-ratio: 4 / 3; }
  .-pano .sp-corpo { padding-top: var(--s4); }
  .-pano .sp-esquerda { margin-left: var(--margem); width: calc(100% - var(--margem) * 2); }
  .-pano .sp-detalhe { position: static; width: calc(100% - var(--margem) * 2); margin: var(--s4) var(--margem) 0; }
  .-pano .sp-detalhe .legenda-micro { text-align: left; }
  .-vertical .sp-torre { margin-left: var(--margem); width: calc(100% - var(--margem) * 2); }
  .-vertical .sp-torre picture { aspect-ratio: 4 / 5; }
  .-vertical .sp-direita { position: static; width: calc(100% - var(--margem) * 2); margin: var(--s4) var(--margem) 0; }
  .-vertical .sp-larga { margin: var(--s4) var(--margem) 0; width: calc(100% - var(--margem) * 2); }
  .-vertical .sp-larga .legenda-micro { text-align: left; }
  .-faixa .sp-coluna { margin-left: var(--margem); width: calc(100% - var(--margem) * 2); }
  .-faixa .sp-detalhe { width: 100%; margin-top: var(--s4); }
  .-faixa .sp-alta { position: static; width: calc(100% - var(--margem) * 2); margin: 0 var(--margem) var(--s4); }
  .-faixa .sp-alta picture { aspect-ratio: 4 / 5; }
  .-faixa .sp-alta .legenda-micro { text-align: left; }
}

/* ---------- 8d · Isométricas ----------
   Figma 2026-08: a frase recuada à esquerda e os três cortes axonométricos
   em fila, alinhados ao mesmo recuo. Sem rótulo e sem título de seção. */
.isometricas { padding-block: 71px 128px; }
.iso-texto { grid-column: 2 / span 5; }
.iso-frase {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.95vw, 1.75rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--ls-titulo);
}
.iso-frase + .iso-frase { margin-top: 20px; color: var(--cinza-texto); }

.iso-lista {
  margin-top: 45px;
  margin-left: 12.78%;
  width: 76.46%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 55px;
}
.iso-card picture {
  display: block;
  background: var(--greige);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.iso-card img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .isometricas { padding-block: var(--s6); }
  .iso-texto { grid-column: 1 / -1; }
  .iso-lista {
    margin-top: var(--s5);
    margin-left: var(--margem);
    width: calc(100% - var(--margem) * 2);
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
}

/* ---------- 9 · Página de projeto ---------- */
.pagina-projeto .abertura { margin-top: 0; }

/* fecho escuro da página de projeto: o convite para a próxima casa.
   Quase-preto do DNA (fundo escuro de capa e ficha) — um momento separado do resto. */
.projeto-prox {
  margin-top: var(--s7);
  background: var(--quase-preto);
  color: var(--off-white);
  padding: var(--s7) var(--margem) var(--s4);
  display: flex;
  flex-direction: column;
  min-height: 62vh;
  justify-content: space-between;
}
.prox-link { display: block; }
.prox-rotulo { display: block; color: rgba(252, 251, 249, 0.55); margin-bottom: var(--s3); }
.prox-nome {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-titulo);
  transition: transform 0.7s var(--ease);
}
.prox-filete {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--terracota);
  margin-top: var(--s3);
  transition: width 0.7s var(--ease);
}
@media (hover: hover) {
  .prox-link:hover .prox-nome { transform: translateX(12px); }
  .prox-link:hover .prox-filete { width: 128px; }
}
.prox-barra {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid rgba(252, 251, 249, 0.16);
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
}
.prox-barra a { color: rgba(252, 251, 249, 0.55); transition: color 0.5s var(--ease); }
.prox-barra a:hover { color: var(--off-white); }
@media (max-width: 768px) {
  .projeto-prox { min-height: 48vh; padding-top: var(--s6); }
}


/* ---------- 10 · Fecho ----------
   Uma tela: foto do projeto escurecida e o cartão de contato centrado.
   O conteúdo é absoluto dentro da caixa recortada e desliza para o lugar
   conforme a seção entra — contra-rolagem, não fade. */
.fecho {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--quase-preto);
  color: var(--off-white);
}

/* sangra 12% acima e abaixo: a contra-rolagem de ±8% desloca a foto dentro
   dessa folga e nunca descobre o fundo da seção */
.fecho-fundo { position: absolute; inset: -12% 0; z-index: 0; }
.fecho-fundo picture, .fecho-fundo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.fecho-veu { position: absolute; inset: 0; background: rgba(18, 18, 18, 0.72); }

/* camada que desliza: absoluta e do tamanho da caixa */
.fecho-interno {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5) var(--margem);
  will-change: transform;
}

/* ---- cartão ---- */
.fecho-cartao {
  width: min(400px, 100%);
  padding: var(--s3) var(--s4) var(--s4);
  background: rgba(24, 24, 24, 0.84);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(252, 251, 249, 0.16);
}
.fecho-rotulo { display: block; color: rgba(252, 251, 249, 0.5); margin-bottom: var(--s3); }

.fecho-menu { display: grid; gap: 0; margin-bottom: var(--s3); }
.fecho-menu a {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  width: fit-content;
  color: rgba(252, 251, 249, 0.92);
  transition: color var(--t-rapido) ease-in-out, transform var(--t-rapido) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .fecho-menu a:hover { color: var(--off-white); transform: translateX(6px); }
}

.fecho-dados {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  padding-bottom: var(--s3);
  font-size: var(--fs-ficha);
  line-height: 1.6;
  color: rgba(252, 251, 249, 0.55);
}
.fecho-dados a { color: rgba(252, 251, 249, 0.88); transition: color var(--t-rapido) ease-in-out; }
.fecho-dados a:hover { color: var(--off-white); text-decoration: underline; text-underline-offset: 3px; }

/* botão: única superfície clara da tela */
.fecho-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 48px;
  background: var(--off-white);
  color: var(--quase-preto);
  transition: transform 160ms ease-out, background-color var(--t-rapido) ease-in-out;
}
.fecho-botao .cf-seta { opacity: 0.6; transition: transform var(--t-rapido) var(--ease); }
.fecho-botao:hover { background: var(--greige); }
.fecho-botao:hover .cf-seta { transform: translate(2px, -2px); }
.fecho-botao:active { transform: scale(0.98); }

/* ---- barra ---- */
.fecho-barra {
  position: absolute;
  left: var(--margem);
  right: var(--margem);
  bottom: var(--s3);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-caixa-alta);
  color: rgba(252, 251, 249, 0.45);
}

@media (max-width: 768px) {
  .fecho-interno { padding: var(--s4) var(--margem); }
  .fecho-barra { flex-direction: column; gap: var(--s1); }
}
@media (max-width: 480px) {
  .fecho-barra { bottom: calc(56px + var(--s2)); }
  .fecho-cartao { padding: var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  .fecho-interno, .fecho-fundo { transform: none !important; }
}

/* ---------- 11 · 404 ---------- */
.pagina-404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  text-align: center;
  padding-inline: var(--margem);
}
.pagina-404 p { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-manifesto); }
.pagina-404 a {
  font-weight: 500;
  border-bottom: 1px solid var(--quase-preto);
}

/* ---------- 12 · Revelações (estado inicial só com JS) ---------- */
.js .reveal-texto,
.js .reveal-linha,
.js .reveal-img { opacity: 0; }


/* ---------- prefers-reduced-motion: tudo estático ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .preloader { display: none !important; }
  .js .reveal-texto, .js .reveal-linha, .js .reveal-img { opacity: 1 !important; }
  .quadro .px-inner { transform: none !important; }
  .quadro img { transform: none !important; }
  .hero-indicador { animation: none; opacity: 1; }
}

/* assinatura DNA: filete fino de terracota abaixo do nome do projeto */
.pagina-projeto .col-titulo h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--terracota);
  margin-top: var(--s2);
}

/* ---------------------------------------------------------------
   Alternador de idioma — duas siglas e um filete que desliza para a
   outra no hover: o controle mostra o que vai acontecer antes de
   acontecer. Herda a cor do header (currentColor), então inverte
   sozinho sobre a foto clara do topo e sobre o fundo escuro.
   --------------------------------------------------------------- */
.idioma {
  --idioma-vao: 10px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--idioma-vao);
  align-items: baseline;
  color: currentColor;
  text-decoration: none;
  padding-bottom: 7px;
  font-weight: 500;
}
.idioma-cel {
  text-align: center;
  transition: opacity var(--t-rapido) var(--ease);
}
.idioma-de   { opacity: 1;   }
.idioma-para { opacity: 0.38; }

.idioma:hover .idioma-de,
.idioma:focus-visible .idioma-de   { opacity: 0.38; }
.idioma:hover .idioma-para,
.idioma:focus-visible .idioma-para { opacity: 1; }

/* o filete começa sob a sigla ativa e corre até a outra */
.idioma-filete {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: calc(50% - var(--idioma-vao) / 2);
  background: currentColor;
  transition: transform var(--t-padrao) var(--ease);
}
.idioma:hover .idioma-filete,
.idioma:focus-visible .idioma-filete {
  transform: translateX(calc(100% + var(--idioma-vao)));
}

.idioma:focus-visible { outline: none; }
.idioma:focus-visible .idioma-cel { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .idioma-cel, .idioma-filete { transition: none; }
}

/* no header, um respiro maior separa o idioma da navegação */
.header-links .idioma { margin-left: var(--s2); }

/* 404 bilíngue — a Vercel serve um arquivo só para as duas árvores, então
   a página oferece as duas saídas. O inglês entra como segunda voz. */
.pagina-404 .erro-en {
  font-size: calc(var(--fs-manifesto) * 0.5);
  opacity: 0.45;
  margin-top: calc(var(--s3) * -1);
}
.pagina-404 .erro-saidas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s4);
}