/* ============================================================
   SÍTIO MUTUM — folha de estilo
   Paleta e tipografia alinhadas às artes de divulgação do sítio:
   verde profundo, dourado e serifada de alto contraste.
   ============================================================ */

:root {
  /* --- verdes: o fundo das artes, quase preto-esverdeado --- */
  --mata:       #14300F;
  --mata-fundo: #0E2409;  /* ponta escura dos degradês */
  --mata-claro: #1F4417;
  --rio:        #16352B;  /* faixa da água, agora dentro da família verde */

  /* --- dourados: substituem o ocre terroso --- */
  --ouro:       #C9A227;  /* títulos grandes sobre claro */
  --ouro-texto: #8A6B12;  /* texto pequeno sobre claro — contraste AA */
  --ouro-claro: #E3C15C;  /* títulos grandes sobre verde */
  --ouro-suave: #F2DFA4;  /* texto pequeno sobre verde */

  /* --- claros --- */
  --papel:      #F7F4EC;
  --papel-fundo:#EDE8DA;
  --tinta:      #14210F;
  --tinta-suave:#4C5647;
  --linha:      #CFC6AE;
  --linha-clara:rgba(247,244,236,.22);
  --linha-ouro: rgba(201,162,39,.42);

  /* Playfair Display: a serifada de alto contraste das artes.
     Montserrat: o sans dos textos de apoio e rodapés das peças. */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --margem: clamp(1.25rem, 5vw, 6rem);
  --respiro: clamp(4.5rem, 11vw, 10rem);
  --curva: 18px;        /* cantos arredondados — nada de pontas */
  --curva-peq: 12px;

  --transicao: 520ms cubic-bezier(.22, 1, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.7;
  font-weight: 350;
  overflow-x: hidden;
}

/* Nenhuma imagem do site fica com ponta viva: o arredondamento vale para
   toda <img> e para os recipientes que recortam foto. */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--curva);
}
figure, picture { border-radius: var(--curva); }
figure img, picture img, .moldura img, .cartao img { border-radius: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.15em; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
em { font-style: italic; }

::selection { background: var(--ouro); color: var(--papel); }

:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
  border-radius: var(--curva);
}

/* ---------- grão sobre a página ---------- */
.grao {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .05;
  z-index: 9;
  mix-blend-mode: multiply;
}

/* ---------- barra de progresso ---------- */
.progresso {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  background: transparent;
}
.progresso i {
  display: block;
  height: 100%;
  width: var(--lido, 0%);
  background: var(--ouro);
  transition: width 90ms linear;
}

/* ============================================================
   TOPO
   ============================================================ */
.topo {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem var(--margem);
  background: color-mix(in srgb, var(--papel) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), padding var(--transicao);
}
.topo.grudou {
  padding-block: .6rem;
  border-bottom-color: var(--linha);
}

.topo__marca {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
  line-height: 1.15;
}
.topo__nome {
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: -.01em;
}
.topo__local {
  /* nunca abaixo de 12px: em maiúsculas e espaçado, menos que isso
     fica ilegível no celular */
  font-size: clamp(.75rem, .66rem + .2vw, .8rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.topo__nav { display: flex; gap: 1.75rem; }
.topo__nav a {
  position: relative;
  font-size: .82rem;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--tinta-suave);
  padding-block: .25rem;
  transition: color 240ms;
}
.topo__nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ouro);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 380ms cubic-bezier(.22,1,.36,1);
}
.topo__nav a:hover { color: var(--tinta); }
.topo__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- menu das telas estreitas ---------- */
.menu-botao {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.menu-botao span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  background: var(--tinta);
  transition: transform 320ms var(--transicao), opacity 220ms;
}
.menu-botao span:nth-child(1) { top: 18px; }
.menu-botao span:nth-child(2) { top: 25px; }
.menu-botao[aria-expanded='true'] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-botao[aria-expanded='true'] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  padding: 5rem var(--margem) 3rem;
  background: var(--mata);
  opacity: 0;
  transition: opacity 320ms var(--transicao);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu.aberto { opacity: 1; }

.menu__lista { display: grid; gap: .35rem; }
.menu__lista a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 7vw, 2.6rem);
  line-height: 1.1;
  text-decoration: none;
  color: var(--papel);
  border-bottom: 1px solid rgba(247,244,236,.12);
  opacity: 0;
  transform: translateY(14px);
}
.menu.aberto .menu__lista a {
  animation: sobe 520ms var(--transicao) forwards;
  animation-delay: calc(var(--i, 0) * 45ms + 90ms);
}
.menu__lista i {
  font-family: var(--sans);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--ouro-claro);
}
.menu__zap { align-self: start; }

@media (max-width: 900px) {
  .topo__nav { display: none; }
  .menu-botao { display: block; }
}
/* trava a rolagem do fundo enquanto o menu está aberto */
body.menu-aberto { overflow: hidden; }

/* ============================================================
   BOTÕES
   ============================================================ */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.5rem;
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid var(--tinta);
  border-radius: 100px;
  color: var(--tinta);
  background: transparent;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform 220ms;
}
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0); }

.botao--zap {
  background: var(--mata);
  border-color: var(--mata);
  color: var(--papel);
}
.botao--zap:hover {
  background: var(--ouro);
  border-color: var(--ouro);
  color: #fff;
}
.botao--linha:hover { background: var(--tinta); color: var(--papel); }
.botao--g { padding: 1.05rem 2.4rem; font-size: .95rem; }

@media (max-width: 560px) {
  .topo__cta { display: none; }
}

/* ============================================================
   CAPA
   ============================================================ */
.capa {
  position: relative;
  padding: clamp(6.5rem, 13vh, 9rem) var(--margem) var(--respiro);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    'selo  selo  selo'
    'tit   tit   tit'
    'cham  foto  nums';
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(201,162,39,.10), transparent 60%),
    linear-gradient(var(--papel), var(--papel-fundo));
}

.capa__selo {
  grid-area: selo;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 clamp(1rem, 3vw, 2.5rem);
  font-size: clamp(.75rem, .68rem + .22vw, .78rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ouro-texto);
  animation: sobe 900ms var(--transicao) both;
}
.capa__selo span {
  width: clamp(1.5rem, 6vw, 3.5rem);
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.capa__titulo {
  grid-area: tit;
  justify-self: center;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 15vw, 12.5rem);
  font-weight: 300;
  line-height: .82;
  letter-spacing: -.045em;
  margin-bottom: clamp(1rem, 3vw, 2rem);
}
.capa__titulo .linha {
  display: block;
  overflow: hidden;
}
.capa__titulo .linha > em,
.capa__titulo .linha {
  animation: revelaLinha 1.1s cubic-bezier(.22,1,.36,1) both;
}
.capa__titulo .linha:nth-child(1) { animation-delay: .15s; }
.capa__titulo .linha:nth-child(2) { animation-delay: .3s; }
.capa__titulo em {
  color: var(--ouro);
}

.capa__chamada {
  grid-area: cham;
  align-self: end;
  max-width: 22ch;
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--tinta-suave);
  animation: sobe 1s var(--transicao) .5s both;
}

.capa__foto {
  grid-area: foto;
  position: relative;
  margin: 0;
  width: clamp(210px, 26vw, 330px);
  animation: sobe 1.2s var(--transicao) .35s both;
}
.capa__foto img {
  width: 100%;
  border-radius: 165px 165px var(--curva) var(--curva);
  border: 1px solid var(--linha);
  box-shadow: 0 40px 80px -30px rgba(23,33,27,.5);
  filter: saturate(1.05) contrast(1.03);
}
.capa__foto figcaption {
  margin-top: .9rem;
  text-align: center;
  font-size: clamp(.75rem, .68rem + .22vw, .78rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.numeros {
  grid-area: nums;
  align-self: end;
  display: grid;
  gap: 1.2rem;
  animation: sobe 1s var(--transicao) .6s both;
}
.numeros li {
  border-top: 1px solid var(--linha);
  padding-top: .55rem;
}
.numeros b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
}
.numeros b small {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--tinta-suave);
  margin-left: .3em;
}
.numeros span {
  font-size: .78rem;
  color: var(--tinta-suave);
}

.rolar {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 1px;
  height: 3.5rem;
  background: var(--linha);
  overflow: hidden;
}
.rolar span {
  position: absolute;
  inset: 0;
  background: var(--ouro);
  animation: desce 2.4s ease-in-out infinite;
}

@media (max-width: 860px) {
  .capa {
    grid-template-columns: 1fr;
    grid-template-areas: 'selo' 'tit' 'foto' 'cham' 'nums';
    justify-items: center;
    text-align: center;
  }
  .capa__foto { width: min(74vw, 330px); }
  .capa__chamada { max-width: 30ch; }
  .numeros {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.6rem;
    width: 100%;
    text-align: left;
  }
  .rolar { display: none; }
}

/* ============================================================
   SEÇÕES — base
   ============================================================ */
.secao {
  position: relative;
  padding: var(--respiro) var(--margem);
}

/* Em monitores largos o conteúdo só pararia de crescer na margem, virando
   linhas quilométricas. Cada filho direto da seção fica com um teto e vai
   para o centro; o fundo da faixa continua sangrando de ponta a ponta. */
@media (min-width: 1600px) {
  .secao > * {
    max-width: 1500px;
    margin-inline: auto;
  }
}

.secao__indice {
  margin: 0 0 clamp(1.5rem, 4vw, 3rem);
  font-size: clamp(.75rem, .68rem + .22vw, .78rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--linha);
}
.secao__indice--claro {
  color: rgba(242,237,226,.6);
  border-bottom-color: var(--linha-clara);
}

.titulo {
  font-family: var(--serif);
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.035em;
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
  max-width: 16ch;
}
.titulo em { color: var(--ouro); }
.titulo--claro { color: var(--papel); }
.titulo--claro em { color: var(--ouro-claro); }

.destaque {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: -.01em;
}

/* molduras de foto */
.moldura {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--curva);
  border: 1px solid var(--linha);
  background: var(--papel-fundo);
}
.moldura img {
  width: 100%;
  transition: transform 900ms cubic-bezier(.22,1,.36,1), filter 700ms;
  filter: saturate(1.04);
}
.moldura:hover img { transform: scale(1.035); filter: saturate(1.14); }
.moldura--alta img { aspect-ratio: 4/5; object-fit: cover; }
.moldura figcaption {
  padding: .7rem .9rem;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  border-top: 1px solid var(--linha);
  background: var(--papel);
}

/* revelação no scroll */
[data-revela] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms cubic-bezier(.22,1,.36,1) var(--atraso, 0s),
              transform 900ms cubic-bezier(.22,1,.36,1) var(--atraso, 0s);
}
[data-revela].visivel { opacity: 1; transform: none; }

/* ============================================================
   01 — O LUGAR
   ============================================================ */
.lugar__grade {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.lugar__texto { max-width: 46ch; }
.lugar__texto .titulo { margin-bottom: 1.6rem; }
.lugar__texto .destaque { margin-bottom: 1.6rem; }

.lugar__fotos {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.lugar__fotos .moldura:nth-child(2) {
  margin-left: clamp(1.5rem, 8%, 5rem);
}

@media (max-width: 860px) {
  .lugar__grade { grid-template-columns: 1fr; }
  .lugar__fotos .moldura:nth-child(2) { margin-left: 0; }
}

/* ============================================================
   02 — A TERRA (mapa interativo)
   ============================================================ */
.terra {
  background: var(--mata);
  color: rgba(242,237,226,.82);
}
.terra::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 20% 0%, rgba(201,162,39,.16), transparent 65%);
  pointer-events: none;
}
.terra > * { position: relative; }

.terra__ajuda {
  max-width: 40ch;
  font-size: .92rem;
  color: rgba(242,237,226,.6);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.mapa {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}

.mapa__foto {
  position: relative;
  border-radius: var(--curva);
  overflow: hidden;
  border: 1px solid var(--linha-clara);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.7);
}
.mapa__foto img { width: 100%; filter: saturate(1.08) brightness(.97); }
.mapa__pontos { position: absolute; inset: 0; }

.ponto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.ponto::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--ouro-claro);
  box-shadow: 0 0 0 2px rgba(23,33,27,.5);
  transition: inset 300ms cubic-bezier(.22,1,.36,1), background 300ms;
}
.ponto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--ouro-claro);
  opacity: 0;
  transform: scale(.4);
  transition: opacity 400ms, transform 400ms;
}
.ponto:hover::before, .ponto.aceso::before { inset: 6px; background: #fff; }
.ponto:hover::after, .ponto.aceso::after { opacity: .9; transform: scale(1); }

/* pulso só nos pontos ainda não visitados, para convidar ao clique */
.ponto.pulsa::after { animation: pulso 2.6s ease-out infinite; opacity: 1; }

/* --- alvos de toque ---
   No dedo, 44px é o mínimo confortável. O marcador do mapa precisa continuar
   pequeno para não cobrir a foto, então a área clicável cresce por fora,
   invisível; os demais controles crescem de verdade. */
@media (pointer: coarse) {
  .ponto { -webkit-tap-highlight-color: transparent; }
  .ponto__toque {
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
  .ponto__nome { font-size: .78rem; }

  .filtros button,
  .sede__botoes button,
  .lupa button {
    min-height: 44px;
    padding-inline: 1.1rem;
  }
  .topo__marca { min-height: 44px; justify-content: center; }
  .rodape a, .fecho a:not(.botao) { display: inline-block; min-height: 44px; }
}

.ponto__nome {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: .25rem .6rem;
  font-size: clamp(.75rem, .68rem + .2vw, .76rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mata);
  background: var(--papel);
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms, transform 260ms;
}
.ponto:hover .ponto__nome, .ponto.aceso .ponto__nome {
  opacity: 1;
  transform: translateX(-50%) translateY(-3px);
}

.mapa__ficha {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  position: sticky;
  top: 7rem;
}
.mapa__ficha img {
  width: 100%;
  border-radius: var(--curva);
  border: 1px solid var(--linha-clara);
  animation: apareceFoto 700ms cubic-bezier(.22,1,.36,1);
}
.mapa__fichaTexto h3 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--papel);
  margin-bottom: .7rem;
}
.mapa__fichaTexto p {
  max-width: 44ch;
  margin: 0;
  color: rgba(242,237,226,.68);
}

@media (max-width: 860px) {
  .mapa { grid-template-columns: 1fr; }
  .mapa__foto { max-width: 420px; margin-inline: auto; }
  .mapa__ficha { position: static; }
}

/* ============================================================
   03 — A PRODUÇÃO
   ============================================================ */
.producao__grade {
  display: grid;
  grid-template-columns: 1fr .95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.producao__grade > div:first-child { max-width: 46ch; }

.producao__destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.4rem;
  margin-top: 2.2rem;
  border-top: 1px solid var(--linha);
  padding-top: 1.5rem;
}
.producao__destaques b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--mata);
}
.producao__destaques small {
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--tinta-suave);
  margin-left: .3em;
}
.producao__destaques span {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--tinta-suave);
}

/* --- barra de composição da área --- */
.composicao {
  margin-top: var(--respiro);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--linha);
  border-radius: var(--curva);
  background: color-mix(in srgb, var(--papel-fundo) 55%, transparent);
}
.composicao__titulo {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 1.1rem;
}

.barra {
  display: flex;
  height: 34px;
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--linha);
}
.barra__parte {
  width: var(--fatia);
  background: var(--cor);
  transition: filter 300ms, transform 300ms;
}
.barra__parte:hover { filter: brightness(1.12); }
/* a barra cresce da esquerda quando a seção entra na tela */
[data-revela] .barra__parte { transform: scaleX(0); transform-origin: left; }
[data-revela].visivel .barra__parte {
  transform: none;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1) var(--atraso, .1s), filter 300ms;
}

.composicao__chaves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .8rem 1.6rem;
  margin-top: 1.3rem;
}
.composicao__chaves li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .6rem;
  align-items: center;
}
.composicao__chaves i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  grid-row: span 2;
}
.composicao__chaves strong {
  font-size: .88rem;
  font-weight: 500;
}
.composicao__chaves span {
  font-size: .78rem;
  color: var(--tinta-suave);
}
.composicao__nota {
  margin: 1.2rem 0 0;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: 58ch;
}

.producao__subtitulo {
  margin: var(--respiro) 0 1.4rem;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.benfeitorias {
  display: grid;
  /* 3 colunas fecham as 6 benfeitorias em duas linhas cheias */
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
}
.benfeitorias li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.15rem;
  border: 1px solid var(--linha);
  border-radius: var(--curva);
  font-size: .92rem;
  background: var(--papel);
  transition: border-color var(--transicao), transform 260ms;
}
.benfeitorias li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ouro);
  flex: none;
}
.benfeitorias li:hover {
  border-color: var(--ouro);
  transform: translateY(-2px);
}

@media (max-width: 860px) {
  .producao__grade { grid-template-columns: 1fr; }
  .benfeitorias { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .benfeitorias { grid-template-columns: 1fr; }
}

/* ============================================================
   PEÇAS DE DIVULGAÇÃO
   ============================================================ */
.pecas__texto { max-width: 46ch; }
.pecas__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.8rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.pecas__grade li {
  border-radius: var(--curva);
  overflow: hidden;
  border: 1px solid var(--linha-ouro);
  transition: transform 320ms var(--transicao), box-shadow 320ms;
}
.pecas__grade img { width: 100%; }
.pecas__grade li:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -24px rgba(20,48,15,.5);
}

@media (max-width: 900px) {
  .pecas__grade { grid-template-columns: repeat(2, 1fr); }
}
/* No celular vira carrossel: quatro quadrados empilhados dariam uma
   rolagem enorme bem no fim da página. */
@media (max-width: 560px) {
  .pecas__grade {
    display: flex;
    gap: .8rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .6rem;
    margin-inline: calc(var(--margem) * -1);
    padding-inline: var(--margem);
    scrollbar-width: none;
  }
  .pecas__grade::-webkit-scrollbar { display: none; }
  .pecas__grade li {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
}

/* ============================================================
   04 — A SEDE
   ============================================================ */
.sede__grade {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.sede__grade > div:first-child { max-width: 44ch; }

.sede__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  border-top: 1px solid var(--linha);
  padding-top: 1.4rem;
}
.sede__specs b {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.1;
}
.sede__specs span {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.sede__troca { margin: 0; }
.sede__palco {
  position: relative;
  border-radius: var(--curva);
  overflow: hidden;
  border: 1px solid var(--linha);
  background: var(--mata);
  aspect-ratio: 16/10;
}
.sede__palco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 800ms cubic-bezier(.22,1,.36,1),
              transform 1200ms cubic-bezier(.22,1,.36,1);
}
.sede__palco img.ativa { opacity: 1; transform: scale(1); }

.sede__botoes {
  display: inline-flex;
  margin-top: 1rem;
  border: 1px solid var(--linha);
  border-radius: 100px;
  padding: 3px;
  background: var(--papel);
}
.sede__botoes button {
  border: 0;
  background: transparent;
  padding: .5rem 1.3rem;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.sede__botoes button.ativo {
  background: var(--mata);
  color: var(--papel);
}

.infra {
  display: grid;
  /* 3 colunas fecham as 6 fichas em duas linhas cheias, sem sobra */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: var(--respiro);
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--curva);
  overflow: hidden;
}
.infra li {
  background: var(--papel);
  padding: 1.6rem 1.5rem;
  transition: background var(--transicao);
}
.infra li:hover { background: var(--papel-fundo); }
.infra svg {
  width: 22px;
  height: 22px;
  stroke: var(--ouro);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: .8rem;
}
.infra h3 {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.infra p {
  margin: 0;
  font-size: .92rem;
  color: var(--tinta-suave);
  line-height: 1.55;
}

@media (max-width: 860px) {
  .sede__grade { grid-template-columns: 1fr; }
  .infra { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .infra { grid-template-columns: 1fr; }
}

/* ============================================================
   04 — A ÁGUA
   ============================================================ */
.agua {
  background: var(--rio);
  color: rgba(242,237,226,.85);
}
.agua::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(23,33,27,.35), transparent 55%);
  pointer-events: none;
}
.agua > * { position: relative; }
.agua__grade {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.agua__grade > div:first-child { max-width: 44ch; }
.agua__fotos { display: grid; gap: clamp(1rem, 2.5vw, 1.8rem); }
.agua .moldura { border-color: var(--linha-clara); background: transparent; }

@media (max-width: 860px) {
  .agua__grade { grid-template-columns: 1fr; }
}

/* ============================================================
   05 — GALERIA
   ============================================================ */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.filtros button {
  border: 1px solid var(--linha);
  background: transparent;
  border-radius: 100px;
  padding: .5rem 1.15rem;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.filtros button:hover { border-color: var(--tinta); color: var(--tinta); }
.filtros button.ativo {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}

.mosaico {
  columns: 3;
  column-gap: clamp(.75rem, 1.6vw, 1.25rem);
}
@media (max-width: 900px) { .mosaico { columns: 2; } }
@media (max-width: 520px) { .mosaico { columns: 1; } }

.cartao {
  position: relative;
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: clamp(.75rem, 1.6vw, 1.25rem);
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--curva);
  overflow: hidden;
  background: var(--papel-fundo);
  cursor: zoom-in;
  transition: opacity 420ms, transform 420ms, box-shadow var(--transicao);
}
.cartao img {
  width: 100%;
  transition: transform 900ms cubic-bezier(.22,1,.36,1), filter 700ms;
}
.cartao:hover { box-shadow: 0 22px 44px -22px rgba(23,33,27,.45); }
.cartao:hover img { transform: scale(1.05); filter: saturate(1.15); }

.cartao__legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem .9rem .8rem;
  text-align: left;
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.4;
  color: #fff;
  background: linear-gradient(transparent, rgba(23,33,27,.88));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms, transform 420ms;
}
.cartao:hover .cartao__legenda,
.cartao:focus-visible .cartao__legenda { opacity: 1; transform: none; }

.cartao.oculto {
  display: none;
}

/* ============================================================
   06 — ONDE FICA
   ============================================================ */
.onde__grade {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.distancias {
  display: grid;
  margin-bottom: 2rem;
}
.distancias li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linha);
}
.distancias li:first-child { border-top: 1px solid var(--linha); }
.distancias strong {
  font-weight: 500;
  font-size: 1rem;
  flex: 1;
}
.distancias b {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -.02em;
}
.distancias span {
  font-size: .8rem;
  color: var(--tinta-suave);
  min-width: 4.5rem;
  text-align: right;
}

@media (max-width: 860px) {
  .onde__grade { grid-template-columns: 1fr; }
  .onde .moldura { max-width: 340px; }
}

/* ============================================================
   FECHO
   ============================================================ */
.fecho {
  background: var(--mata);
  padding-block: calc(var(--respiro) * 1.1);
}
.fecho::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 50% 110%, rgba(201,162,39,.28), transparent 70%);
  pointer-events: none;
}
.fecho__caixa {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  color: var(--papel);
}
.fecho__olho {
  font-size: clamp(.75rem, .68rem + .22vw, .78rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ouro-claro);
  margin-bottom: 1.4rem;
}
.fecho__titulo {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 6.5vw, 5rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.04em;
  margin-bottom: 1.6rem;
}
.fecho__titulo em { color: var(--ouro-claro); }
.fecho__preco {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 2rem);
  margin-bottom: .3rem;
}
.fecho__obs {
  font-size: .88rem;
  color: rgba(242,237,226,.6);
  margin-bottom: 2.2rem;
}
.fecho__resp {
  margin: 1.5rem 0 0;
  font-size: .82rem;
  letter-spacing: .06em;
  color: rgba(242,237,226,.55);
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape {
  padding: 3rem var(--margem);
  background: var(--tinta);
  color: rgba(242,237,226,.5);
  font-size: .8rem;
  text-align: center;
}
.rodape p { margin: 0 0 .5rem; }
.rodape strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1rem;
  color: var(--papel);
  letter-spacing: .02em;
}
.rodape__nota { max-width: 52ch; margin-inline: auto; opacity: .7; }

/* ============================================================
   WHATSAPP FLUTUANTE
   ============================================================ */
.zapFlutua {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.3rem;
  border-radius: 100px;
  background: var(--mata);
  color: var(--papel);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .03em;
  box-shadow: 0 16px 34px -14px rgba(23,33,27,.65);
  opacity: 0;
  transform: translateY(14px) scale(.96);
  pointer-events: none;
  transition: opacity 500ms, transform 500ms cubic-bezier(.22,1,.36,1),
              background var(--transicao);
}
.zapFlutua.aparece { opacity: 1; transform: none; pointer-events: auto; }
.zapFlutua:hover { background: var(--ouro); }
.zapFlutua svg { width: 20px; height: 20px; fill: currentColor; }

@media (max-width: 480px) {
  .zapFlutua span { display: none; }
  .zapFlutua { padding: 1rem; }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lupa {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12,18,14,.94);
  backdrop-filter: blur(8px);
  animation: apareceFoto 320ms ease-out;
}
.lupa[hidden] { display: none; }

.lupa__palco {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-height: 100%;
}
.lupa__palco img {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--curva);
  box-shadow: 0 30px 70px -25px rgba(0,0,0,.8);
}
.lupa__palco figcaption {
  font-size: .86rem;
  letter-spacing: .03em;
  color: rgba(242,237,226,.7);
  text-align: center;
  max-width: 46ch;
}

.lupa__nav, .lupa__fecha {
  border: 1px solid rgba(242,237,226,.25);
  background: transparent;
  color: var(--papel);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 260ms, border-color 260ms, transform 260ms;
}
.lupa__nav:hover, .lupa__fecha:hover {
  background: rgba(242,237,226,.12);
  border-color: rgba(242,237,226,.5);
  transform: scale(1.06);
}
.lupa__fecha {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  font-size: 1.5rem;
}

@media (max-width: 620px) {
  .lupa { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lupa__palco { grid-row: 1; }
  .lupa__nav { grid-row: 2; }
  .lupa__nav--ant { justify-self: start; }
  .lupa__nav--prox { justify-self: end; grid-column: 1; grid-row: 2; }
}

/* ============================================================
   VALORES AINDA NÃO CONFIRMADOS
   Ficam visualmente marcados para não irem ao ar por engano.
   ============================================================ */
.pendente {
  font-style: normal;
  color: var(--ouro-texto);
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
/* nos números, o dado que falta vira só um traço */
.pendente--traco {
  border-bottom: 0;
  opacity: .45;
}
/* dentro das faixas escuras o ocre precisa clarear para ter contraste */
.terra .pendente, .agua .pendente, .fecho .pendente, .rodape .pendente,
.titulo--claro .pendente { color: var(--ouro-suave); }

/* ============================================================
   ANIMAÇÕES
   ============================================================ */
@keyframes sobe {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes revelaLinha {
  from { opacity: 0; transform: translateY(88%); }
  to   { opacity: 1; transform: none; }
}
@keyframes desce {
  0%        { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
@keyframes pulso {
  0%   { transform: scale(.5); opacity: .9; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes apareceFoto {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-revela] { opacity: 1; transform: none; }
}

/* ---------- hipótese de loteamento ---------- */
.lotear__grade {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.lotear .botao { margin-top: .5rem; }
@media (max-width: 860px) {
  .lotear__grade { grid-template-columns: 1fr; }
  .lotear .moldura { max-width: 420px; }
}

/* ---------- a região (usa os cartões da infra) ---------- */
.regiao .regiao__cabeca { max-width: 640px; }
.regiao .infra {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  /* 4 cartões fecham em 2 × 2, sem órfão na segunda linha */
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px) {
  .regiao .infra { grid-template-columns: 1fr; }
}