/* ==========================================================================
   Kalevras — folha de estilo única do site
   Tokens extraídos do site original: Gilda Display + Open Sans,
   fundo escuro #091B26, faixa escura #0C1A26, faixa clara #F6F4F2.
   ========================================================================== */

:root {
  --escuro:        #091b26;
  --escuro-faixa:  #0c1a26;
  --claro:         #f6f4f2;
  --branco:        #ffffff;

  --texto:         #333333;
  --texto-forte:   #0c1a26;
  --texto-claro:   #ffffff;
  --texto-suave:   #c0bcb7;
  --texto-meio:    #7a7a7a;

  --linha:         rgba(255, 255, 255, 0.16);
  --linha-escura:  rgba(12, 26, 38, 0.14);

  /* Azul escuro tirado da paleta da marca, para o link não brigar com o acervo.
     Em faixa escura o link vira branco (ver regras abaixo). */
  --link:          #1f4c6b;
  --link-hover:    #12354d;

  /* ---- escala tipográfica ----
     Nenhum texto abaixo de 12px. O site original usava 10–13px em vários
     lugares, o que prejudicava a leitura. */
  --texto-corpo:   1.125rem;    /* 18px — parágrafos */
  --texto-apoio:   1.0625rem;   /* 17px — textos de apoio */
  --texto-meta:    .9375rem;    /* 15px — metadados e cartões */
  --texto-rotulo:  .8125rem;    /* 13px — rótulos em caixa alta */
  --texto-aviso:   1.5rem;      /* 24px — aviso legal do acervo */

  --serif:  "Gilda Display", Georgia, "Times New Roman", serif;
  --sans:   "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --largura:     1140px;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --ritmo:       clamp(3.5rem, 8vw, 6.5rem);

  /* Distância mínima entre um bloco de texto e uma imagem vizinha. */
  --respiro:     2.5rem;

  --transicao:   180ms ease;
}

/* --------------------------------------------------------------- reset -- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--texto-corpo);
  line-height: 1.65;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--escuro);
  color: var(--texto-claro);
}
.pular-para-conteudo:focus { left: 0; }

/* ------------------------------------------------------------ estrutura -- */

/* O conteúdo mede 1140px como no original: a folga lateral fica por fora
   desse valor, para que grades e mosaicos batam com as medidas do site atual. */
.envoltorio {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.faixa { padding-block: var(--ritmo); }
.faixa--clara  { background: var(--claro); color: var(--texto); }
.faixa--escura { background: var(--escuro-faixa); color: var(--texto-claro); }

/* ---------------------------------------------------------- tipografia -- */

.rotulo {
  font-family: var(--serif);
  font-size: var(--texto-rotulo);
  letter-spacing: .625em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.titulo-secao {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.25;
}

.titulo-pagina {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.15;
}

.texto-corrido { font-size: var(--texto-corpo); line-height: 1.7; max-width: 62ch; }
.texto-corrido li { font-size: var(--texto-apoio); }

/* Botão de texto com sublinhado, como no site original. */
.cta {
  display: inline-block;
  margin-top: 1.75rem;
  padding-bottom: .5rem;
  font-size: var(--texto-rotulo);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--transicao);
}
.cta:hover { opacity: .62; }

/* ------------------------------------------------------------- cabeçalho -- */

.cabecalho {
  background: var(--escuro);
  color: var(--texto-claro);
  border-bottom: 1px solid var(--linha);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
}

.marca { display: flex; flex-direction: column; gap: .35rem; flex: 0 0 auto; }
.marca__nome {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.4vw, 1.75rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.marca__tagline {
  font-family: var(--serif);
  font-size: var(--texto-rotulo);
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--texto-suave);
  line-height: 1.3;
  white-space: nowrap;
}

/* Menu e seletor de idioma dividem o lado direito do cabeçalho. */
.cabecalho__direita { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }

/* O grego é mais longo que o inglês: o menu encolhe em vez de quebrar. */
.menu { display: flex; flex-wrap: nowrap; gap: clamp(.6rem, 1.4vw, 1.5rem); }
.menu a {
  font-size: clamp(var(--texto-rotulo), 1vw, .8125rem);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), opacity var(--transicao);
}
.menu a:hover { opacity: .68; }
.menu a[aria-current="page"] { border-bottom-color: currentColor; }

.alternar-menu {
  display: none;
  background: none;
  border: 1px solid var(--linha);
  color: inherit;
  padding: .5rem .85rem;
  font-size: var(--texto-rotulo);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* O menu do grego precisa de mais largura, então colapsa antes que o do inglês.
   O seletor de idioma continua visível: fica ao lado do botão de menu. */
@media (max-width: 1024px) {
  .cabecalho__interno { flex-wrap: wrap; }
  .cabecalho__direita { order: 3; flex-basis: 100%; flex-wrap: wrap; }
  .cabecalho__interno > .alternar-menu { order: 2; }
  .cabecalho .idiomas { order: -1; margin-left: auto; }
  .alternar-menu { display: block; }
  .cabecalho .menu {
    flex-basis: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0;
    display: none;
    border-top: 1px solid var(--linha);
    margin-top: 1rem;
  }
  .cabecalho .menu[data-aberto="sim"] { display: flex; }
  .cabecalho .menu a { padding-block: .85rem; border-bottom: 1px solid var(--linha); }
}

/* ============================================================
   GALERIA — replica o layout do site original:
   hero escuro de 650px com imagem sangrada à direita, faixa de
   texto, grade de 6 colunas e faixa preta de obra em destaque.
   ============================================================ */

/* O cabeçalho fica sobre o hero, sem fundo próprio. */
.topo-galeria {
  position: relative;
  background: var(--escuro);
  background-repeat: no-repeat;
  background-position: 100% 0%;
  background-size: auto 100%;
  color: var(--texto-claro);
  min-height: 650px;
  display: flex;
  flex-direction: column;
}
.topo-galeria .cabecalho { background: transparent; border-bottom: 0; }

/* Sombra leve só na borda esquerda, onde o texto se apoia. A imagem fica
   com o brilho original — o véu forte apagava a peça. */
.topo-galeria::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(9, 27, 38, var(--veu, .78)) 0%,
    rgba(9, 27, 38, calc(var(--veu, .78) * .82)) 26%,
    rgba(9, 27, 38, calc(var(--veu, .78) * .42)) 44%,
    rgba(9, 27, 38, 0) 66%);
  pointer-events: none;
}
.topo-galeria > * { position: relative; }

.galeria-hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(2rem, 6vw, 4rem);
}
.galeria-hero__titulo {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5.5vw, 4.1875rem);   /* 67px no desktop */
  letter-spacing: .15em;
  line-height: 1;
  color: var(--texto-claro);
  text-transform: uppercase;
  max-width: 12em;
}
.galeria-hero__texto {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texto-suave);
  max-width: 34rem;
  margin-top: 1.75rem;
}

/* ---- faixa de texto abaixo do hero ---- */

.faixa-intro { background: var(--claro); padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.intro { display: grid; gap: max(var(--respiro), 3vw); align-items: center; }
@media (min-width: 900px) { .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); } }

.regua { width: 30px; height: 1px; background: var(--texto-forte); margin-bottom: 1.5rem; }
.faixa-destaque .regua { background: var(--texto-claro); }

.intro__titulo {
  font-family: var(--serif);
  font-size: 1.5rem;                              /* 24px */
  text-transform: uppercase;
  color: var(--texto-forte);
  line-height: 1.3;
}
.intro__texto { margin-top: 1.25rem; display: grid; gap: 1rem; font-size: var(--texto-apoio); line-height: 1.6; color: var(--texto); }
.intro__figura img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---- grade de obras ---- */

.faixa-grade { background: var(--claro); padding-bottom: clamp(2.5rem, 5vw, 3.75rem); }

/* As colunas e os espaçamentos vêm de variáveis para que cada galeria possa
   redefini-los sem quebrar a redução em telas menores — daí o !important nas
   media queries, que precisa vencer o valor vindo do atributo style. */
.grade-obras {
  display: grid;
  grid-template-columns: repeat(var(--colunas, 6), minmax(0, 1fr));
  column-gap: var(--espaco-colunas, 5px);
  row-gap: var(--espaco-linhas, 5px);
}
@media (max-width: 1000px) { .grade-obras { --colunas: 4 !important; } }
@media (max-width: 700px)  { .grade-obras { --colunas: 3 !important; } }
@media (max-width: 460px)  { .grade-obras { --colunas: 2 !important; } }

.obra-cartao { display: flex; flex-direction: column; }
/* Altura da imagem 20% maior que a do site original (era 186/166). */
.obra-cartao__figura { display: block; overflow: hidden; background: #e9e6e2; aspect-ratio: 186 / 199; }
.obra-cartao__figura img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms ease; }
.obra-cartao:hover .obra-cartao__figura img { transform: scale(1.04); }

.obra-cartao__corpo { padding-top: .6rem; display: flex; flex-direction: column; }
.obra-cartao__titulo {
  font-family: var(--sans);
  font-size: var(--texto-meta);
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--texto-forte);
  font-weight: 500;
  letter-spacing: .02em;
}
.obra-cartao__meta {
  font-size: var(--texto-rotulo);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--texto-meio);
}
.obra-cartao__link {
  margin-top: .2rem;
  font-size: var(--texto-rotulo);
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--link);
  align-self: flex-start;
}
.obra-cartao__link:hover { color: var(--link-hover); text-decoration: underline; }
/* Sobre faixa escura o link precisa virar branco. */
.faixa--escura .obra-cartao__link,
.faixa-destaque .obra-cartao__link { color: var(--texto-claro); }
.faixa--escura .obra-cartao__link:hover { color: var(--texto-claro); }
.faixa--escura .obra-cartao__titulo { color: var(--texto-claro); }
.faixa--escura .obra-cartao__meta { color: var(--texto-suave); }

/* ---- obra em destaque ---- */

.faixa-destaque {
  position: relative;
  overflow: hidden;
  background-color: #000;
  color: var(--texto-claro);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  min-height: 430px;
  display: flex;
  align-items: center;
}

/* A foto da obra tem fundo de estúdio claro e, encostando no preto, formaria um
   retângulo visível. Em vez de escurecer por cima, dissolvemos a própria imagem:
   a máscara deixa a borda esquerda transparente e o preto aparece por baixo. */
.faixa-destaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--foto);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 46%, #000 76%);
  mask-image: linear-gradient(90deg, transparent 46%, #000 76%);
  pointer-events: none;
}
.faixa-destaque > * { position: relative; }
.destaque { display: grid; gap: max(var(--respiro), 2vw); }
@media (min-width: 900px) { .destaque { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.destaque__titulo {
  font-family: var(--serif);
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--texto-claro);
}
.destaque__texto { margin-top: 1.25rem; font-size: var(--texto-apoio); line-height: 1.6; color: rgba(255, 255, 255, .82); }
.destaque__dados { margin-top: 1.75rem; display: grid; gap: .35rem; font-size: var(--texto-rotulo); }
.destaque__linha { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
.destaque__rotulo { text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.destaque__valor { text-transform: uppercase; color: var(--texto-claro); }

/* ============================================================
   HOME — replica o layout do original: hero escuro com a peça
   à direita e quatro faixas alternadas com texto à esquerda
   e imagens à direita.
   ============================================================ */

.home-hero { min-height: 650px; background-position: 50% 0%; background-size: contain; }
.home-hero .galeria-hero { align-items: center; }

/* Em tela estreita, "contain" encolhe a foto larga até virar uma faixa fina no
   topo e sobra fundo liso embaixo. "cover" preenche o hero e a posição escolhe
   qual recorte aparece. A altura também cai: 650px num celular ocupariam a tela
   inteira e o visitante não veria que há conteúdo abaixo. */
@media (max-width: 720px) {
  .topo-galeria {
    min-height: 0;
    background-size: cover !important;
    background-position: 50% 30% !important;
  }
  .home-hero { background-position: 50% 45% !important; }
  /* Deixa a faixa seguinte assomar no pé da tela, para o visitante perceber
     que a página continua. */
  .galeria-hero { min-height: 48vh; padding-block: 2.25rem; }
  .home-hero__titulo { font-size: clamp(2rem, 11vw, 2.75rem); letter-spacing: .16em; }
  .galeria-hero__titulo { font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .home-hero__linhas, .galeria-hero__texto { font-size: var(--texto-meta); }
}

.home-hero__titulo {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 7vw, 5rem);
  letter-spacing: .22em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--texto-claro);
}
.home-hero__linhas {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-size: .9375rem;
  letter-spacing: .06em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* Faixa da home: texto numa coluna estreita, imagens numa coluna larga. */
.home-faixa { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.home-faixa--clara  { background: var(--claro);       color: var(--texto); }
.home-faixa--escura { background: var(--escuro-faixa); color: var(--texto-claro); }

/* Coluna de texto de 280px colada ao mosaico, como no original (gap de 8px).
   As duas colunas esticam até a mesma altura. */
.home-bloco { display: grid; gap: var(--respiro); align-items: stretch; }
@media (min-width: 900px) {
  .home-bloco { grid-template-columns: 280px minmax(0, 1fr); }
  .home-bloco__coluna { display: flex; flex-direction: column; height: 100%; }
}

.home-bloco__titulo {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  text-transform: uppercase;
  line-height: 1.2;
}
.home-faixa--clara  .home-bloco__titulo { color: var(--texto-forte); }
.home-faixa--escura .home-bloco__titulo { color: var(--texto-claro); }

.home-bloco__texto { margin-top: 1.25rem; font-size: var(--texto-apoio); line-height: 1.7; }
.home-faixa--escura .home-bloco__texto { color: rgba(255, 255, 255, .78); }

.home-bloco .regua { margin-top: .9rem; margin-bottom: 0; }
.home-faixa--escura .regua { background: var(--texto-claro); }

.home-bloco__cta {
  display: inline-block;
  margin-top: 1.5rem;
  padding-bottom: .35rem;
  font-size: var(--texto-rotulo);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}
.home-bloco__cta:hover { opacity: .68; }

.home-bloco__lateral { margin-top: 2rem; }
.home-bloco__lateral img { width: 100%; aspect-ratio: 280 / 178; object-fit: cover; }

/* Empurra a imagem lateral até a base da coluna, para que ela termine na mesma
   linha do mosaico. Precisa vir depois da regra acima para vencer o margin-top. */
@media (min-width: 900px) {
  .home-bloco__lateral { margin-top: auto; padding-top: var(--respiro); }
}

.home-mosaico { display: grid; gap: 4px; }
@media (min-width: 900px) {
  /* O mosaico ocupa toda a altura da linha, para que sua base coincida com a
     da imagem lateral da coluna de texto. */
  .home-mosaico { height: 100%; grid-auto-rows: 1fr; }
  .home-mosaico > * { min-height: 0; }
}
.home-mosaico a { display: block; overflow: hidden; }
.home-mosaico a img { transition: transform 420ms ease; }
.home-mosaico a:hover img { transform: scale(1.04); }
.home-mosaico img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--proporcao, auto);
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  .home-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .home-mosaico:has(img:only-child) { grid-template-columns: 1fr !important; }
}

/* ============================================================
   BIOGRAFIA — hero centralizado sobre a foto do ateliê, retrato
   ao lado do texto, quatro temas ilustrados, cronologia escura
   e a faixa de convite ao acervo.
   ============================================================ */

/* Diferente das galerias, aqui o texto vai ao centro. */
.bio-hero { text-align: center; }
.bio-hero .galeria-hero { align-items: center; }
.bio-hero::before {
  background: linear-gradient(180deg,
    rgba(9, 27, 38, .82) 0%,
    rgba(9, 27, 38, .62) 45%,
    rgba(9, 27, 38, .8) 100%);
}
.bio-hero__titulo {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 5.5vw, 4.1875rem);
  letter-spacing: .18em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--texto-claro);
}
.bio-hero .regua { margin-inline: auto; background: var(--texto-suave); margin-block: 1.5rem; }
.bio-hero__texto { font-family: var(--serif); font-size: 1.0625rem; color: var(--texto-claro); }

/* Retrato à esquerda, texto à direita. */
.bio-perfil { display: grid; gap: var(--respiro); align-items: start; }
@media (min-width: 900px) { .bio-perfil { grid-template-columns: 550px minmax(0, 1fr); } }
.bio-perfil__retrato img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.bio-perfil__rotulo {
  font-size: var(--texto-rotulo);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-meio);
}
.bio-perfil__titulo {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  text-transform: uppercase;
  color: var(--texto-forte);
  margin-top: 1rem;
  line-height: 1.25;
}
.bio-perfil__texto { margin-top: 1.5rem; display: grid; gap: 1rem; font-size: var(--texto-apoio); line-height: 1.7; }
.bio-assinatura { margin-top: 2rem; width: 187px; max-width: 60%; }

/* Quatro temas ilustrados. */
.bio-temas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 800px) { .bio-temas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bio-tema img { width: 100%; aspect-ratio: 265 / 254; object-fit: cover; display: block; }
.bio-tema p {
  margin-top: .85rem;
  font-size: var(--texto-rotulo);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-meio);
}

/* A cronologia do original fica sobre fundo escuro. */
.faixa-cronologia { background: var(--escuro-faixa); color: var(--texto-claro); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.faixa-cronologia .cronologia,
.faixa-cronologia .cronologia__item { border-color: var(--linha); }
.faixa-cronologia .cronologia__ano { color: var(--texto-claro); }
.faixa-cronologia .cronologia__titulo { color: var(--texto-suave); }

/* Bloco de visão, com aspas de abertura. */
.bio-visao { display: grid; gap: var(--respiro); }
@media (min-width: 900px) { .bio-visao { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
.bio-aspas {
  font-family: var(--serif);
  font-size: 4rem;
  line-height: .6;
  color: var(--texto-meio);
  opacity: .45;
}

/* Convite às galerias, no rodapé da página. */
.bio-explorar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
  justify-content: space-between;
}
.bio-explorar__links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.bio-explorar__links a {
  font-size: var(--texto-rotulo);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-bottom: .35rem;
  border-bottom: 1px solid currentColor;
}
.bio-explorar__links a:hover { opacity: .68; }

/* ---------------------------------------------------------------- estate -- */
/* A página do acervo tem voz editorial própria no original: fundo creme,
   título em caixa mista com tracking negativo — o oposto do resto do site. */

.estate-hero {
  background: #f3efe6;
  color: #171714;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.estate-hero__marcador { display: flex; align-items: center; gap: 1rem; }
.estate-hero__risco { width: 42px; height: 1px; background: currentColor; opacity: .6; }
.estate-hero__rotulo {
  font-size: var(--texto-rotulo);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.estate-hero__titulo {
  margin-top: 1.75rem;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 6vw, 4.875rem);
  letter-spacing: -.025em;
  line-height: 1.08;
  max-width: 14ch;
}
.estate-hero__texto {
  margin-top: 1.5rem;
  font-size: var(--texto-corpo);
  line-height: 1.55;
  max-width: 54rem;
}

.estate-ficha {
  display: grid;
  gap: 1.5rem var(--respiro);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(23, 23, 20, .2);
}
@media (min-width: 700px) { .estate-ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.estate-ficha__rotulo {
  font-size: var(--texto-rotulo);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .62;
}
.estate-ficha__valor { margin-top: .5rem; font-size: var(--texto-apoio); }

/* Aviso legal do acervo. A medida limitada evita que o corpo maior vire faixa. */
.estate-aviso {
  font-size: var(--texto-aviso);
  line-height: 1.55;
  color: var(--texto-claro);
  max-width: 46ch;
}

/* -------------------------------------------------------------- contato -- */

/* Hero um pouco mais baixo que o das galerias, como no original. */
.contato-hero { min-height: 500px; }

/* Faixa de dados com a peça ao fundo, dissolvida na borda esquerda. */
.contato-blocos {
  position: relative;
  overflow: hidden;
  background: var(--escuro-faixa);
  color: var(--texto-claro);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.contato-blocos::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--foto);
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 72%);
  mask-image: linear-gradient(90deg, transparent 40%, #000 72%);
  pointer-events: none;
}
.contato-blocos > * { position: relative; }

.contato-blocos__grade { display: grid; gap: 2rem var(--respiro); }
@media (min-width: 700px) { .contato-blocos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; } }
.contato-blocos__rotulo {
  font-size: var(--texto-rotulo);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.contato-blocos__valor { margin-top: .5rem; font-size: var(--texto-apoio); line-height: 1.6; }

/* ------------------------------------------------------------------ hero -- */

.hero {
  position: relative;
  background: var(--escuro);
  color: var(--texto-claro);
  min-height: min(78vh, 620px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.hero__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}
.hero__conteudo { position: relative; padding: var(--ritmo) var(--gutter); }
.hero__titulo {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  line-height: 1.1;
}
.hero__linha { margin-top: 1.25rem; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6; }

/* Cabeçalho curto para páginas internas. */
.topo-pagina {
  background: var(--escuro);
  color: var(--texto-claro);
  padding-block: clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.topo-pagina p { margin-top: 1rem; color: var(--texto-suave); max-width: 60ch; margin-inline: auto; }

/* --------------------------------------------------- blocos alternados -- */

.bloco { display: grid; gap: max(var(--respiro), 5vw); align-items: center; }
/* Quando a coluna da direita é mais alta (um formulário, por exemplo),
   centralizar deixaria o texto flutuando no meio. */
.bloco--topo { align-items: start; }
@media (min-width: 900px) {
  .bloco { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
  .bloco--invertido > :first-child { order: 2; }
}
/* As fotos de escultura são verticais: "contain" evita cortar a peça. */
.bloco__figura { background: #ebe8e4; }
.faixa--escura .bloco__figura { background: rgba(255, 255, 255, .05); }
.bloco__figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }

/* ---------------------------------------------------------------- grade -- */

.grade {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.obra { display: flex; flex-direction: column; }
.obra__figura {
  position: relative;
  overflow: hidden;
  background: #ebe8e4;
  aspect-ratio: 3 / 4;
}
.obra__figura img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 420ms ease;
}
.obra:hover .obra__figura img { transform: scale(1.035); }

.obra__corpo { padding-top: 1rem; display: flex; flex-direction: column; gap: .3rem; }
.obra__titulo {
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
}
.obra__meta {
  font-size: var(--texto-rotulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-meio);
}
.faixa--escura .obra__meta { color: var(--texto-suave); }
.obra__link {
  margin-top: .6rem;
  font-size: var(--texto-rotulo);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  padding-bottom: .2rem;
}

/* ------------------------------------------------------------ ficha da obra -- */

.ficha { display: grid; gap: max(var(--respiro), 5vw); }
@media (min-width: 900px) { .ficha { grid-template-columns: 1.15fr 1fr; align-items: start; } }

.ficha__figura { background: #ebe8e4; }
.ficha__figura img { width: 100%; height: auto; object-fit: contain; }

.ficha__titulo {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
}
.ficha__titulo-alt {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .1em;
  color: var(--texto-meio);
  margin-top: .5rem;
}
.ficha__descricao { margin-top: 1.75rem; line-height: 1.8; }

.dados { margin-top: 2.25rem; border-top: 1px solid var(--linha-escura); }
.dados__item {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding-block: .9rem;
  border-bottom: 1px solid var(--linha-escura);
  font-size: var(--texto-meta);
}
.dados__rotulo {
  font-size: var(--texto-rotulo);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-meio);
  padding-top: .2rem;
}
@media (max-width: 480px) { .dados__item { grid-template-columns: 1fr; gap: .2rem; } }

/* ------------------------------------------------------------- formulário -- */

.formulario { display: grid; gap: 1.5rem; max-width: 34rem; }
.campo { display: grid; gap: .5rem; }
.campo label {
  font-size: var(--texto-rotulo);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-meio);
}
.campo input, .campo textarea {
  font: inherit;
  font-size: .9375rem;
  padding: .8rem .9rem;
  border: 1px solid var(--linha-escura);
  background: var(--branco);
  color: var(--texto);
  border-radius: 0;
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--texto-forte); outline-offset: 1px; }

.botao {
  justify-self: start;
  padding: .9rem 2rem;
  background: var(--escuro);
  color: var(--texto-claro);
  border: 1px solid var(--escuro);
  font-size: var(--texto-rotulo);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--transicao);
}
.botao:hover { opacity: .85; }

/* ------------------------------------------------------------- cronologia -- */

.cronologia { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linha-escura); }
.cronologia__item {
  display: grid;
  gap: .35rem 2rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--linha-escura);
}
@media (min-width: 720px) { .cronologia__item { grid-template-columns: 9rem 1fr; } }
.cronologia__ano {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .12em;
  color: var(--texto-forte);
}
.cronologia__titulo {
  font-size: var(--texto-rotulo);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-meio);
}

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

/* O rodapé do site original é claro, com a marca à esquerda,
   o menu ao centro e o aviso de direitos à direita. */
.rodape {
  background: var(--claro);
  color: var(--texto-forte);
  padding-block: 2.25rem;
}
.rodape__interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.rodape .marca__nome { color: var(--texto-forte); font-size: 1.25rem; letter-spacing: .28em; }
.rodape .marca__tagline { color: var(--texto-meio); }

.rodape .menu { flex-wrap: wrap; gap: .6rem 1.35rem; }
.rodape .menu a {
  font-size: var(--texto-rotulo);
  letter-spacing: .04em;
  color: var(--link);
  border-bottom: 0;
}
.rodape .menu a:hover { color: var(--link-hover); text-decoration: underline; opacity: 1; }

.rodape__direita { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); flex-wrap: wrap; }
.rodape__direitos { font-size: var(--texto-rotulo); color: var(--texto-meio); }
/* ------------------------------------------------------ seletor de idioma -- */
/* Fica ao lado do menu, mas com desenho próprio — globo, caixa e o idioma ativo
   em destaque — para ninguém confundir com um item de navegação. */

.idiomas {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}
.idiomas__globo { width: 14px; height: 14px; opacity: .6; }

.idiomas__opcoes {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid currentColor;
  border-radius: 2px;
  overflow: hidden;
  opacity: .75;
  transition: opacity var(--transicao);
}
.idiomas:hover .idiomas__opcoes { opacity: 1; }

.idiomas__opcoes a {
  font-family: var(--sans);
  font-size: var(--texto-rotulo);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1;
  padding: .35rem .5rem;
  border: 0;
  color: inherit;
}
.idiomas__opcoes a + a { border-left: 1px solid currentColor; }

/* O idioma ativo aparece invertido. As cores são explícitas de propósito:
   com "currentColor" no fundo, texto e fundo resolveriam para o mesmo valor. */
.cabecalho .idiomas__opcoes a[aria-current="true"] { background: var(--texto-claro); color: var(--escuro); }
.rodape .idiomas__opcoes a[aria-current="true"]    { background: var(--texto-forte); color: var(--claro); }
.idiomas__opcoes a:not([aria-current="true"]):hover { background: rgba(128, 128, 128, .28); }

@media (max-width: 1024px) {
  .rodape .menu { display: flex; flex-direction: row; flex-wrap: wrap; border-top: 0; margin-top: 0; }
  .rodape .menu a { border-bottom: 0; padding-block: .35rem; }
}