/* ==========================================================================
   STATERA — TOKENS DE DESIGN
   --------------------------------------------------------------------------
   Paleta:     branco + cinzas de temperatura neutra-quente (papel, nao aco).
               Um unico bloco cromatico na pagina: o verde da marca Reserva
               Home Resort, que assina a secao do lancamento.
   Tipografia: Futura PT (arquivos do proprio cliente, herdados do site antigo)
               nos titulos e rotulos; Archivo nos textos corridos.
   Cantos:     UM raio para tudo — 2px. Nada de pill ao lado de card quadrado.
   Tema:       claro, travado. Sem inversao de secao (excecao unica e
               deliberada: o bloco Reserva, ver sections.css).
   ========================================================================== */

:root {
  /* --- Papel ------------------------------------------------------------- */
  --paper:            #FFFFFF;
  --paper-soft:       #F7F6F3;
  --paper-deep:       #EFEDE8;

  /* --- Tinta ------------------------------------------------------------- */
  --ink:              #1A1A18;   /* titulos, texto forte, botao primario     */
  --ink-2:            #4B4A46;   /* texto corrido                            */
  --ink-3:            #7C7A74;   /* apoio, legendas                          */
  --ink-4:            #A9A6A0;   /* placeholder, desativado                  */

  /* --- Linhas ------------------------------------------------------------ */
  --line:             #E4E1DB;
  --line-strong:      #CBC7BF;
  --line-hair:        rgba(26, 26, 24, 0.09);

  /* --- Reserva Home Resort (cores lidas do arquivo oficial da marca) ------ */
  --rhr-green:        #2F3D33;
  --rhr-green-deep:   #243029;
  --rhr-green-soft:   #3A4A3E;
  --rhr-cream:        #E4DCCF;
  --rhr-cream-dim:    rgba(228, 220, 207, 0.62);
  --rhr-line:         rgba(228, 220, 207, 0.18);

  /* --- Rodape ------------------------------------------------------------
     Era uma tarja preta. O cliente nao gostou: o logotipo invertido nunca
     ficou bom ali, por mais que se calibrasse o desenho de construcao.
     Agora o rodape e papel, um tom abaixo do bloco de contato que vem
     acima, e usa o MESMO arquivo de logotipo do cabecalho. Some de vez a
     necessidade de uma versao clara da marca no site. */
  --footer-bg:        #EFEDE8;   /* = --paper-deep                           */
  --footer-text:      #4B4A46;   /* = --ink-2                                */
  --footer-line:      rgba(26, 26, 24, 0.12);

  /* --- Tipografia -------------------------------------------------------- */
  --font-display: 'Futura PT', 'Jost', 'Century Gothic', -apple-system, sans-serif;
  --font-text:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala fluida. Entrelinha nunca abaixo de 1.08 em caixa alta: o til de
     SAO PAULO e o circunflexo de SONIA encostam no topo da caixa e somem. */
  --step-display: clamp(2.6rem, 1.6rem + 3.6vw, 5.1rem);
  --step-h2:      clamp(2rem, 1.45rem + 2vw, 3.1rem);
  --step-h3:      clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
  --step-lead:    clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem);
  --step-body:    1rem;
  --step-small:   0.875rem;
  --step-label:   0.72rem;

  /* --- Medidas ----------------------------------------------------------- */
  --shell:        1320px;
  --shell-narrow: 760px;
  --gutter:       clamp(1.25rem, 4vw, 3.5rem);

  /* Respiro horizontal dentro das celulas separadas por hairline (faixa de
     numeros, ficha do Reserva, formacao do socio, ficha do modal). Vale nos
     dois lados da celula: so quem encosta na borda do bloco zera o seu lado,
     para o texto continuar alinhado com o titulo da secao. */
  --cell-pad:     clamp(18px, 2vw, 30px);
  --radius:       2px;          /* raio unico do projeto */
  --header-h:     72px;

  /* --- Ritmo vertical ---------------------------------------------------- */
  --section-y:    clamp(4.5rem, 2.5rem + 7vw, 9rem);

  /* --- Movimento --------------------------------------------------------- */
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:       0.18s var(--ease);
  --t-base:       0.4s var(--ease);
  --t-slow:       0.9s var(--ease);

  /* --- Elevacao (sombra tingida com o tom do papel, nunca preto puro) ----- */
  --shadow-soft:  0 2px 10px rgba(26, 26, 24, 0.05);
  --shadow-lift:  0 22px 48px -22px rgba(26, 26, 24, 0.28);
  --shadow-modal: 0 40px 90px -30px rgba(26, 26, 24, 0.55);

  /* --- Camadas (escala unica, sem z-index avulso no meio do CSS) --------- */
  --z-header:     100;
  --z-drawer:     200;
  --z-float:      300;
  --z-modal:      400;
}


/* ==========================================================================
   STATERA — BASE
   ========================================================================== */

/* --- Futura PT: arquivos do proprio cliente, herdados do site Wix antigo.
       Sao as duas unicas gramaturas existentes (Light 300 e Medium 500).
       Jost entra como fallback metrico caso o arquivo falhe.                */
@font-face {
  font-family: 'Futura PT';
  src: url('assets/fonts/futura-pt-light.woff2') format('woff2'),
       url('assets/fonts/futura-pt-light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Futura PT';
  src: url('assets/fonts/futura-pt-medium.woff2') format('woff2'),
       url('assets/fonts/futura-pt-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-text);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  margin: 0;
  /* 1.08 e o piso: abaixo disso o til de "SAO PAULO" e cortado */
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* O navegador da a <figure> uma margem padrao de 1em/40px. Em celula de grid
   isso come 80px de largura e as colunas deixam de fechar. */
figure, blockquote { margin: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { background: none; border: none; cursor: pointer; }

strong { color: var(--ink); font-weight: 600; }

::selection { background: var(--ink); color: var(--paper); }

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

/* --- Estrutura ---------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--soft { background: var(--paper-soft); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-modal);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font-size: var(--step-small);
}
.skip-link:focus { left: 12px; top: 12px; }

/* --- Tipografia utilitaria ---------------------------------------------- */
.display  { font-size: var(--step-display); line-height: 1.08; letter-spacing: -0.028em; }
.h2       { font-size: var(--step-h2); letter-spacing: -0.022em; }
.h3       { font-size: var(--step-h3); letter-spacing: -0.015em; }

.lead {
  font-size: var(--step-lead);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.muted { color: var(--ink-3); }


.rule {
  height: 1px;
  background: var(--line);
  border: none;
  margin: 0;
}

/* --- Revelacao no scroll -------------------------------------------------
   Um so gesto na pagina inteira: o conteudo sobe 14px e entra. Serve para
   dar hierarquia de leitura, nao para chamar atencao. Colapsa para estatico
   sob prefers-reduced-motion.                                              */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Sem JS o conteudo nao pode ficar invisivel */
.no-js .reveal { opacity: 1; transform: none; }


/* ==========================================================================
   STATERA — COMPONENTES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botoes
   Contraste conferido: tinta #1A1A18 sobre branco e branco sobre #1A1A18
   passam AA com folga. O botao fantasma sobre foto sempre carrega borda.
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;           /* rotulo de CTA nunca quebra em 2 linhas */
  padding: 14px 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover  { background: transparent; color: var(--btn-bg); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn--on-dark {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-bd: var(--paper);
}
.btn--on-dark:hover { background: transparent; color: var(--paper); border-color: var(--paper); }

.btn--outline-dark {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-bd: rgba(255, 255, 255, 0.45);
}
.btn--outline-dark:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn--cream {
  --btn-bg: var(--rhr-cream);
  --btn-fg: var(--rhr-green-deep);
  --btn-bd: var(--rhr-cream);
}
.btn--cream:hover { background: transparent; color: var(--rhr-cream); border-color: var(--rhr-cream); }

.btn--outline-cream {
  --btn-bg: transparent;
  --btn-fg: var(--rhr-cream);
  --btn-bd: rgba(228, 220, 207, 0.45);
}
.btn--outline-cream:hover { background: var(--rhr-cream); color: var(--rhr-green-deep); border-color: var(--rhr-cream); }

.btn--sm  { padding: 11px 20px; font-size: 0.74rem; }
.btn--full { width: 100%; }

/* Link com sublinhado que cresce — usado no lugar de botao onde a acao e
   secundaria e um botao inteiro seria peso demais. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--t-base), color var(--t-fast);
}
.link-arrow:hover { background-size: 0% 1px; }
.link-arrow i { font-size: 1rem; }

/* --------------------------------------------------------------------------
   Etiqueta de fase do empreendimento
   Ha uma bolinha aqui porque ela carrega estado real: obra em comercializacao
   (ambar) x entregue (verde) x em estudo (cinza). Nao e ornamento.
   -------------------------------------------------------------------------- */
.phase {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--ink-3);
}
.phase::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* Restaram duas tarjas: breve lançamento e entregue. A --estudo fica aqui
   porque um dia pode voltar a existir um terceiro estágio, mas hoje nenhum
   empreendimento a usa — o cliente pediu uma tarja só para tudo que ainda
   não foi entregue. */
.phase--ativo     { color: #8A6A28; }
.phase--entregue  { color: #3E6B46; }
.phase--estudo    { color: var(--ink-4); }
.phase--on-dark   { color: var(--rhr-cream); }

/* --------------------------------------------------------------------------
   Ficha de numeros — sem caixa, so hairline
   -------------------------------------------------------------------------- */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.figure {
  padding: 34px var(--cell-pad) 30px;
  border-right: 1px solid var(--line);
}
/* 4 colunas: a 1a zera a esquerda, a 4a zera a direita e dispensa o hairline */
.figure:first-child { padding-left: 0; }
.figure:last-child  { padding-right: 0; border-right: none; }

.figure__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.9rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.figure__name {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--ink);
}
.figure__note {
  margin-top: 8px;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 30ch;
}

/* 2 colunas: quem abre a linha zera a esquerda, quem fecha zera a direita */
@media (max-width: 1023px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure { padding: 26px var(--cell-pad) 24px; }
  .figure:nth-child(2n + 1) { padding-left: 0; }
  .figure:nth-child(2n) { padding-right: 0; border-right: none; }
  .figure:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 559px) {
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure { border-right: none; padding: 22px 0; }
  .figure + .figure { border-top: 1px solid var(--line); }
  .figure__note { max-width: none; }
}

/* --------------------------------------------------------------------------
   Card de empreendimento
   -------------------------------------------------------------------------- */
.project {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t-base), transform var(--t-base),
              box-shadow var(--t-base);
}
.project:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.project__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-deep);
}
.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.project:hover .project__media img { transform: scale(1.035); }

/* Carimbo de perspectiva conceitual.

   Fica sobre a imagem, num degradê que escurece só o rodapé da foto: legível
   sobre céu claro ou fachada escura, sem virar uma tarja opaca atravessada no
   render. Não é decorativo — é o que separa "foto do projeto" de "ilustração
   feita a partir da ficha". Mexer aqui é mexer no que o site afirma. */
.conceito {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px 14px 10px;
  background: linear-gradient(to top, rgba(26, 26, 24, 0.66), rgba(26, 26, 24, 0));
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.3;
  pointer-events: none;
}
.pm__cover { position: relative; }
.pm__cover .conceito { padding: 40px 22px 14px; font-size: 0.72rem; }

/* Marcacao: o empreendimento existe, a imagem ainda nao. Em vez de encher o
   espaco com foto de banco de imagem, a lacuna aparece desenhada. */
.project__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--paper-soft) 0 12px,
      var(--paper-deep) 12px 24px
    );
}
/* Contraste: o texto da marcacao fica sobre a hachura clara, entao usa
   --ink-2 (#4B4A46, 8.2:1) e --ink-3 (#7C7A74, 4.6:1). O --ink-4 original
   reprovava em AA. */
.project__placeholder i {
  font-size: 1.9rem;
  color: var(--ink-3);
}
.project__placeholder span {
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink-2);
}
.project__placeholder small {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 26ch;
}

.project__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 24px 24px 26px;
}
.project__name { font-size: var(--step-h3); }
.project__place {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--step-small);
  color: var(--ink-3);
}
.project__desc {
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--ink-2);
}
.project__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-3);
}
.project__meta b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Filtros
   -------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.filter {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--ink-3);
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast);
}
.filter:hover { color: var(--ink); border-color: var(--line-strong); }
.filter.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   Formulario
   Rotulo sempre acima do campo. Placeholder nunca faz papel de rotulo.
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }

.field__label {
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--ink);
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--step-small);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* #7C7A74 sobre branco = 4.8:1, passa AA */
.field__input::placeholder,
.field__textarea::placeholder { color: var(--ink-3); opacity: 1; }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 26, 24, 0.1);
}
.field__textarea { resize: vertical; min-height: 118px; }

.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%234B4A46' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

.field__error {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #9A2F20;      /* 5.9:1 sobre branco */
  min-height: 0;
}
.field--invalid .field__input,
.field--invalid .field__select,
.field--invalid .field__textarea { border-color: #9A2F20; }

.form-note {
  display: none;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  font-size: var(--step-small);
  line-height: 1.55;
}
.form-note.is-on { display: flex; }
.form-note--ok   { background: #EDF3EE; color: #2C5735; border: 1px solid #C8DCCD; }
.form-note--err  { background: #FBEEEC; color: #8A2A1C; border: 1px solid #E8CBC5; }

.btn[aria-busy='true'] { opacity: 0.65; pointer-events: none; }

/* --------------------------------------------------------------------------
   Modal e lightbox
   -------------------------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(20, 20, 18, 0.86);
  backdrop-filter: blur(3px);
}
.overlay.is-on { display: flex; }

.overlay__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.2rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.overlay__close:hover { background: var(--ink); color: var(--paper); }

.modal {
  position: relative;
  width: min(1060px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
}

.lightbox__figure {
  position: relative;
  max-width: min(1240px, 92vw);
  text-align: center;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: 80vh;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--paper);
}
.lightbox__caption {
  margin-top: 14px;
  font-size: var(--step-small);
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   WhatsApp
   -------------------------------------------------------------------------- */
.wa {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: transform var(--t-fast), background var(--t-fast);
}
.wa:hover { transform: translateY(-2px); background: #2C7C4F; }
.wa i { font-size: 1.15rem; }

@media (max-width: 559px) {
  .wa { padding: 13px; }
  .wa span { display: none; }
}


/* ==========================================================================
   STATERA — SECOES
   Cada secao usa uma familia de layout diferente: split assimetrico (hero),
   faixa de numeros em hairline, bloco cromatico full-bleed (Reserva), grade
   de projetos com primeiro item largo, texto+retrato deslocado, declaracao
   larga + mural de logos, formulario em duas colunas desiguais.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabecalho — uma linha so, 72px
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 100%;
}

/* 34px e o maximo que o lockup oficial suporta dentro de uma barra de 72px.
   A linha "desenvolvimento imobiliario" fica fina nesse tamanho, mas o
   lockup e do cliente e nao vamos recompor a marca sem autorizacao. */
.header__brand img { height: 34px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }

.nav__link {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--ink-2);
  padding-block: 4px;
  transition: color var(--t-fast);
}
/* O risco cresce por scaleX, nao por width: transform roda no compositor e
   nao passa pelo layout a cada frame. */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link.is-here::after { transform: scaleX(1); }
.nav__link.is-here { color: var(--ink); }

.header__actions { display: flex; align-items: center; gap: 12px; }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 8px;
}
.burger span {
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--t-base), opacity var(--t-fast);
}
.burger.is-on span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-on span:nth-child(2) { opacity: 0; }
.burger.is-on span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1099px) {
  .nav, .header__actions .btn { display: none; }
  .burger { display: flex; }
}

/* Gaveta mobile */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-drawer);
  background: var(--paper);
  padding: 32px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-base), visibility var(--t-base);
}
.drawer.is-on { transform: none; visibility: visible; }
.drawer a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.drawer .btn { margin-top: 28px; width: 100%; }

/* --------------------------------------------------------------------------
   1. Hero — split assimetrico 7/5, imagem sangra na direita
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 3vw, 2.5rem));
  padding-bottom: clamp(3rem, 6vw, 6rem);
  background: var(--paper);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.hero__title { max-width: 16ch; }
.hero__lead  { margin-top: 26px; max-width: 46ch; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

/* A imagem escapa do shell e encosta na borda direita da janela.
   A conta: metade da folga entre a janela e o shell, mais o gutter. Quando a
   janela e menor que o shell a primeira parcela zera e sobra so o gutter.
   body tem overflow-x hidden, entao a barra de rolagem nao cria estouro. */
.hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-deep);
  margin-right: calc(-1 * ((100vw - min(100vw, var(--shell))) / 2 + var(--gutter)));
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__credit {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--ink-3);
}

@media (max-width: 899px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__title { max-width: none; }
  .hero__media { aspect-ratio: 16 / 10; margin-right: 0; }
}

/* --------------------------------------------------------------------------
   2. Faixa de numeros
   -------------------------------------------------------------------------- */
.trajectory { padding-block: clamp(3rem, 5vw, 5rem); }
.trajectory__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   3. Reserva Home Resort
   Unica inversao de tema da pagina, e ela e proposital: o lancamento em
   destaque ganha o verde da propria marca e ocupa a largura inteira. E o
   pedido central do briefing, nao um bloco colorido aleatorio.
   -------------------------------------------------------------------------- */
.rhr {
  background: var(--rhr-green);
  color: var(--rhr-cream-dim);
  padding-block: clamp(4rem, 3rem + 5vw, 7rem);
}
.rhr h2, .rhr h3, .rhr h4 { color: var(--rhr-cream); }

.rhr__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--rhr-line);
}
.rhr__mark { width: clamp(220px, 26vw, 330px); height: auto; }
.rhr__title { margin-top: 20px; font-size: var(--step-h2); }
.rhr__lead  { margin-top: 16px; max-width: 54ch; color: var(--rhr-cream-dim); font-size: var(--step-lead); }

@media (max-width: 899px) {
  .rhr__head { grid-template-columns: 1fr; align-items: start; }
}

/* Vista aerea: o argumento principal do empreendimento e a implantacao
   dentro da serra, entao ela vem grande e sozinha. */
.rhr__aerial {
  position: relative;
  margin-top: 42px;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius);
  overflow: hidden;
}
.rhr__aerial img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) {
  .rhr__aerial { aspect-ratio: 4 / 3; }
}

/* Numero da ficha tecnica em tipo de exibicao, sem caixa nem barra */
.rhr__specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 46px;
  border-top: 1px solid var(--rhr-line);
}
.rhr__spec {
  padding: 28px var(--cell-pad) 24px;
  border-right: 1px solid var(--rhr-line);
}
.rhr__spec:first-child { padding-left: 0; }
.rhr__spec:last-child { padding-right: 0; border-right: none; }
.rhr__spec b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--rhr-cream);
}
.rhr__spec span {
  display: block;
  margin-top: 9px;
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--rhr-cream-dim);
}
/* Quebra em 2 colunas junto com a faixa de numeros, em 1023px: a 900px
   quatro colunas apertam "54 e 67 m2" em duas linhas. */
@media (max-width: 1023px) {
  .rhr__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rhr__spec:nth-child(2n + 1) { padding-left: 0; }
  .rhr__spec:nth-child(2n) { padding-right: 0; border-right: none; }
  .rhr__spec:nth-child(n + 3) { border-top: 1px solid var(--rhr-line); }
}
@media (max-width: 519px) {
  .rhr__specs { grid-template-columns: minmax(0, 1fr); }
  .rhr__spec { padding-inline: 0; border-right: none; }
  .rhr__spec + .rhr__spec { border-top: 1px solid var(--rhr-line); }
}

/* Galeria do lazer: mosaico com ritmo, sem celula vazia.
   6 imagens em 4 colunas: 1 larga em cima + 2, depois 3 embaixo. */
.rhr__gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 52px;
}
.rhr__shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: zoom-in;
  background: var(--rhr-green-soft);
}
.rhr__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.rhr__shot:hover img { transform: scale(1.04); }

/* Legenda embaixo da imagem, nunca por cima dela */
.rhr__caption {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--rhr-cream-dim);
}

/* 6 imagens em 3 linhas cheias, cada linha com um recorte diferente:
   linha 1  destaque largo + retrato   (4 + 2 colunas)
   linha 2  trio                        (2 + 2 + 2)
   linha 3  panorama                    (6)
   As proporcoes de cada linha sao escolhidas para as celulas fecharem na
   mesma altura, senao a mais baixa deixa um vazio embaixo. */
.rhr__figure { display: flex; flex-direction: column; }
.rhr__figure--wide  { grid-column: span 4; }
.rhr__figure--tall  { grid-column: span 2; }
.rhr__figure--third { grid-column: span 2; }
.rhr__figure--pano  { grid-column: span 6; }

.rhr__figure--wide  .rhr__shot { aspect-ratio: 16 / 9; }
.rhr__figure--tall  .rhr__shot { aspect-ratio: 7 / 8; }
.rhr__figure--third .rhr__shot { aspect-ratio: 4 / 3; }
.rhr__figure--pano  .rhr__shot { aspect-ratio: 24 / 8; }

.rhr__more {
  margin-top: 26px;
  font-size: var(--step-small);
  color: var(--rhr-cream-dim);
}

@media (max-width: 899px) {
  .rhr__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rhr__figure--wide,
  .rhr__figure--tall,
  .rhr__figure--third { grid-column: span 1; }
  .rhr__figure--pano { grid-column: span 2; }
  .rhr__figure--wide  .rhr__shot,
  .rhr__figure--tall  .rhr__shot,
  .rhr__figure--third .rhr__shot { aspect-ratio: 4 / 3; }
  .rhr__figure--pano  .rhr__shot { aspect-ratio: 16 / 9; }
}
@media (max-width: 519px) {
  .rhr__gallery { grid-template-columns: 1fr; }
  .rhr__figure--pano { grid-column: span 1; }
  .rhr__figure--pano .rhr__shot { aspect-ratio: 4 / 3; }
}

/* Plantas */
.rhr__plans {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-top: 62px;
  padding-top: 46px;
  border-top: 1px solid var(--rhr-line);
}
.rhr__plan-img {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  cursor: zoom-in;
  padding: 18px;
}
.rhr__plan-img img { width: 100%; height: auto; }

.rhr__plan-switch { display: flex; gap: 8px; margin-bottom: 26px; }
.rhr__plan-switch button {
  padding: 10px 18px;
  border: 1px solid var(--rhr-line);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--rhr-cream-dim);
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast);
}
.rhr__plan-switch button:hover { color: var(--rhr-cream); border-color: var(--rhr-cream); }
.rhr__plan-switch button.is-on {
  background: var(--rhr-cream);
  border-color: var(--rhr-cream);
  color: var(--rhr-green-deep);
}

.rhr__plan-list { margin: 24px 0 30px; }
.rhr__plan-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rhr-line);
  font-size: var(--step-small);
}
.rhr__plan-list li span:first-child { color: var(--rhr-cream-dim); }
.rhr__plan-list li span:last-child { color: var(--rhr-cream); text-align: right; }

.rhr__cta { display: flex; flex-wrap: wrap; gap: 12px; }

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

/* --------------------------------------------------------------------------
   4. Portfolio — grade com primeiro item largo
   -------------------------------------------------------------------------- */
.portfolio__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}
.portfolio__head p { max-width: 48ch; margin: 14px 0 0; }

.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
/* O primeiro card ocupa duas colunas e fica horizontal: quebra a repeticao
   de "tres cards iguais lado a lado". */
.projects > .project:first-child { grid-column: span 2; }
.projects > .project:first-child .project__media { aspect-ratio: 16 / 9; }

@media (max-width: 1023px) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projects > .project:first-child { grid-column: span 2; }
}
@media (max-width: 679px) {
  .projects { grid-template-columns: 1fr; }
  .projects > .project:first-child { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   5. A Statera — texto largo a esquerda, placa da marca a direita
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
.about__text h2 { margin-bottom: 22px; }
.about__text p { max-width: 62ch; }
.about__text .btn { margin-top: 12px; }

.about__plate {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  padding: 42px 34px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* A placa mostrava a marca solta, num PNG de 128px. Agora mostra o símbolo
   sobre o Homem Vitruviano, que é do que a citação fala. O arquivo é um JPG
   de fundo branco, e o papel da placa é levemente quente: sem o multiply
   apareceria um retângulo branco recortado no meio da caixa. Como é desenho
   de linha sobre branco, o multiply apaga o fundo e preserva o traço. */
.about__plate img {
  width: 100%;
  height: auto;
  margin-bottom: 26px;
  mix-blend-mode: multiply;
}
.about__plate blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}
.about__plate figcaption {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-3);
}

@media (max-width: 899px) {
  .about { grid-template-columns: 1fr; }
  .about__plate { position: static; }
}

/* --------------------------------------------------------------------------
   6. Lideranca — retrato deslocado, credenciais em coluna
   -------------------------------------------------------------------------- */
.leader {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.leader__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-deep);
}
.leader__portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Nome e cargo abrem a coluna de texto: a secao precisa de um titulo no topo,
   nao de uma foto solta seguida de paragrafo sem ancora. */
.leader__name { font-size: var(--step-h2); }
.leader__role { margin: 8px 0 26px; }
.leader__social { display: flex; gap: 8px; margin-top: 22px; }
.leader__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1.05rem;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast);
}
.leader__social a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.leader__body p { max-width: 60ch; }

/* Formacao: 3 itens, entao 3 blocos — sem celula sobrando */
.leader__edu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid var(--line);
}
.leader__edu div {
  padding: 22px var(--cell-pad) 0;
  border-right: 1px solid var(--line);
}
.leader__edu div:first-child { padding-left: 0; }
.leader__edu div:last-child { padding-right: 0; border-right: none; }
.leader__edu b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 8px;
}
.leader__edu span { font-size: 0.82rem; line-height: 1.55; color: var(--ink-3); }

@media (max-width: 899px) {
  .leader { grid-template-columns: 1fr; }
  .leader__portrait { max-width: 340px; }
}
/* Em 3 colunas estreitas o texto de formacao quebra em 4 linhas, entao a
   quebra para coluna unica acontece antes do breakpoint de celular. */
@media (max-width: 767px) {
  .leader__edu { grid-template-columns: minmax(0, 1fr); }
  .leader__edu div { border-right: none; padding: 18px 0; }
  .leader__edu div + div { border-top: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   7. Terrenos — declaracao larga + mural de logos
   -------------------------------------------------------------------------- */
.land__statement { max-width: 60ch; }
.land__statement h2 { margin-bottom: 22px; }
.land__statement .btn { margin-top: 10px; }

/* O mural de logotipos de parceiros saiu do site a pedido do cliente. Estas
   regras ficam porque a index_backup ainda usa o bloco. Se um dia a
   index_backup for apagada, isto e .logos vão junto. */
.land__partners { margin-top: clamp(3rem, 5vw, 4.5rem); }
.land__partners > p { margin-bottom: 26px; }

.logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.logos div {
  display: grid;
  place-items: center;
  padding: 30px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.logos img {
  max-height: 40px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--t-base), filter var(--t-base);
}
.logos div:hover img { opacity: 1; filter: none; }

@media (max-width: 767px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   8. Contato — duas colunas desiguais
   -------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.contact__info h2 { margin-bottom: 22px; }

.contact__list { margin-top: 30px; }
.contact__list li {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.contact__list i { font-size: 1.2rem; color: var(--ink); margin-top: 2px; }
.contact__list b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 6px;
}
.contact__list p { font-size: var(--step-small); line-height: 1.6; margin: 0; }

/* Antes esta linha era o endereço em si — dava para ler e copiar. Agora é
   um convite a clicar ("Escrever para a Statera"), então precisa parecer
   clicável sozinha, sem depender do hover. */
.contact__list a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
}
.contact__list a:hover { text-decoration-color: currentColor; }

.contact__legal {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  font-size: 0.78rem;
  color: var(--ink-3);
}
.contact__legal b { color: var(--ink); font-weight: 600; }

.contact__form {
  padding: clamp(26px, 3vw, 40px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.contact__form h3 { margin-bottom: 6px; }
.contact__form > p { font-size: var(--step-small); color: var(--ink-3); margin-bottom: 26px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Simulador da Caixa: uma linha dentro de contato, nao uma secao inteira */
.contact__caixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  padding: 20px 24px;
  background: var(--paper-deep);
  border-radius: var(--radius);
}
.contact__caixa p { font-size: var(--step-small); margin: 0; max-width: 42ch; }

@media (max-width: 899px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 519px) { .field-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   9. Rodape
   -------------------------------------------------------------------------- */
.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding-block: clamp(3.5rem, 5vw, 5.5rem) 0;
  border-top: 1px solid var(--line);
}
.footer h4 {
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 20px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 46px;
}
.footer__brand img { width: 150px; margin-bottom: 22px; }
.footer__brand p { font-size: var(--step-small); line-height: 1.7; max-width: 34ch; }

.footer__social { display: flex; gap: 8px; margin-top: 22px; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1rem;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast);
}
.footer__social a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.footer__links li { margin-bottom: 11px; }
.footer__links a { font-size: var(--step-small); transition: color var(--t-fast); }
.footer__links a:hover { color: var(--ink); }

.footer__addr { font-size: var(--step-small); line-height: 1.8; }
.footer__addr span { display: block; margin-top: 14px; font-size: 0.76rem; opacity: 0.88; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 24px;
  border-top: 1px solid var(--footer-line);
  font-size: 0.76rem;
}

@media (max-width: 899px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 519px) { .footer__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Modal de projeto
   -------------------------------------------------------------------------- */
.pm__cover { aspect-ratio: 16 / 9; background: var(--paper-deep); }
.pm__cover img { width: 100%; height: 100%; object-fit: cover; }
.pm__body { padding: clamp(24px, 3vw, 40px); }
.pm__title { margin: 14px 0 8px; font-size: var(--step-h2); }
.pm__place { font-size: var(--step-small); color: var(--ink-3); margin-bottom: 20px; }
.pm__desc { max-width: 66ch; }

/* Flex, nao grid: o modal recebe de 1 a 3 fichas dependendo do projeto, e com
   auto-fit sobrava celula vazia. Aqui o hairline vem a esquerda e o primeiro
   item o dispensa, entao qualquer quantidade fecha certo. */
.pm__specs {
  display: flex;
  flex-wrap: wrap;
  margin: 28px 0;
  border-top: 1px solid var(--line);
}
.pm__specs div {
  flex: 1 1 150px;
  padding: 18px var(--cell-pad) 0;
  border-left: 1px solid var(--line);
}
.pm__specs div:first-child { padding-left: 0; border-left: none; }
.pm__specs div:last-child { padding-right: 0; }
.pm__specs b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.pm__specs span {
  display: block;
  margin-top: 5px;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink-3);
}

.pm__points { margin: 24px 0; }
.pm__points li {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-small);
  line-height: 1.55;
}
.pm__points i { color: var(--ink); margin-top: 3px; flex: none; }

.pm__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  margin: 24px 0;
}
.pm__thumbs button {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-deep);
}
.pm__thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-base); }
.pm__thumbs button:hover img { transform: scale(1.06); }

.pm__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.pm__note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  margin: 22px 0;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--ink-2);
}
.pm__note i { color: var(--ink-3); font-size: 1.1rem; margin-top: 1px; flex: none; }

/* --------------------------------------------------------------------------
   PÁGINA ÁREAS DE ATUAÇÃO
   As frentes sao ilustradas com obra real da Statera, nao com banco de
   imagem: cada figura leva legenda dizendo de que projeto ela e. Assim a
   lista de servicos vira evidencia em vez de ilustracao generica.
   -------------------------------------------------------------------------- */
.atuacao-hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}
.atuacao-hero h1 { max-width: 15ch; }
.atuacao-hero p  { margin-top: 26px; }

/* Lista de entregas de cada frente, separada por hairline */
.pontos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 3vw, 3.5rem);
}
.pontos li {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--ink-2);
}

/* Frente em destaque: imagem larga, depois titulo a esquerda e lista a direita */
.frente__media {
  aspect-ratio: 24 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-deep);
}
.frente__media img { width: 100%; height: 100%; object-fit: cover; }

.frente__legenda {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-3);
}

.frente__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.frente__grid h2 { font-size: var(--step-h2); }
.frente__grid > div:first-child p { margin-top: 14px; font-size: var(--step-small); }

/* As tres frentes restantes, em cartao */
.frentes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 2.5vw, 2.5rem);
  margin-top: clamp(3.5rem, 6vw, 6rem);
}
.frente-card__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-deep);
}
.frente-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Piso de duas linhas: um dos titulos quebra e os outros nao. Sem isso a
   lista de cada cartao comecaria numa altura diferente. */
.frente-card h2 {
  font-size: var(--step-h3);
  margin-top: 22px;
  min-height: 2.2em;
}
.frente-card .pontos { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }

@media (max-width: 899px) {
  .frente__grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .frente__media { aspect-ratio: 16 / 9; }
  .frentes { grid-template-columns: minmax(0, 1fr); }
  .frente-card__media { max-width: 520px; }
}
@media (max-width: 639px) {
  .pontos { grid-template-columns: minmax(0, 1fr); }
}

/* Bloco de parceria com corretores: duas colunas de texto, sem caixa */
.parceria-texto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3.5rem);
  margin-top: 26px;
}
.parceria-texto p { max-width: 46ch; }

@media (max-width: 767px) {
  .parceria-texto { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   STATERA — TOPO DA HOME E PÁGINA DE EMPREENDIMENTO
   --------------------------------------------------------------------------
   O que mudou, e por quê, conforme a reunião:

   - O topo virou um PALCO: imagem grande sangrando a largura inteira, com o
     empreendimento por cima. É o padrão de Cyrela, Tecnisa, Lavvi e Ztec, que
     foi a referência pedida ("imagem estourada em cima").
   - Logo maior no cabeçalho.
   - Saíram da home: números, sócio e parcerias. Foram para Sobre e Atuação.

   Este arquivo é a última camada do sistema: entra por último no style.css e
   só acrescenta o que é do topo da home e da página de empreendimento.
   Paleta, Futura PT, raio de 2px e os componentes de card, formulário e
   rodapé continuam vindo dos arquivos anteriores.
   ========================================================================== */

/* Logo maior, pedido direto da reunião. O cabeçalho cresce de 72 para 84px
   para o lockup não encostar nas bordas da barra. A altura da marca fica
   declarada mais abaixo, junto do resto do que é próprio do SVG. */
.header--marca { height: 84px; }

/* A altura vira variável na raiz, não via :has(): o palco e a gaveta mobile
   dependem dela para não passar por baixo do cabeçalho. */
.site { --header-h: 84px; }

@media (max-width: 559px) {
  .header--marca { height: 72px; }
  .site { --header-h: 72px; }
}

/* --------------------------------------------------------------------------
   PALCO — o topo da home
   -------------------------------------------------------------------------- */
.palco {
  position: relative;
  margin-top: var(--header-h);
  background: var(--ink);
  overflow: hidden;
}

.palco__janela {
  position: relative;
  min-height: min(82dvh, 780px);
}

.palco__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease);
}
.palco__slide.is-on { opacity: 1; visibility: visible; }

/* Filho direto: senão esta regra também pega o logotipo que fica dentro do
   texto do slide, que é mais específica e estouraria a marca na tela toda. */
.palco__slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Escurecimento só onde o texto fica, para a foto não perder o brilho no
   resto do quadro. */
.palco__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 12, 11, 0.92) 0%,
    rgba(12, 12, 11, 0.80) 24%,
    rgba(12, 12, 11, 0.42) 48%,
    rgba(12, 12, 11, 0.06) 74%,
    rgba(12, 12, 11, 0.30) 100%
  );
  pointer-events: none;
}

/* Marcação: slide de empreendimento cuja perspectiva ainda não chegou */
.palco__marcacao {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(-45deg, #232322 0 14px, #1c1c1b 14px 28px);
}
.palco__marcacao span {
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.5);
}

/* Conteúdo sobre a imagem */
.palco__texto {
  position: absolute;
  inset: auto 0 0;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  z-index: 2;
}
.palco__fase { color: rgba(255, 255, 255, 0.82); }
.palco__fase.phase::before { background: currentColor; }

.palco__marca { width: clamp(220px, 27vw, 360px); height: auto; margin-top: 20px; }

.palco__nome {
  margin-top: 16px;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: #fff;
}
.palco__linha {
  margin-top: 14px;
  max-width: 46ch;
  font-size: var(--step-lead);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.palco__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Setas */
.palco__seta {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--radius);
  background: rgba(12, 12, 11, 0.32);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.25rem;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.palco__seta:hover { background: #fff; color: var(--ink); border-color: #fff; }
.palco__seta--ant { left: clamp(12px, 2vw, 26px); }
.palco__seta--prox { right: clamp(12px, 2vw, 26px); }

@media (max-width: 767px) { .palco__seta { display: none; } }

/* --------------------------------------------------------------------------
   FITA — os quatro em destaque, na sequência embaixo do palco
   -------------------------------------------------------------------------- */
.fita {
  position: relative;
  z-index: 2;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.fita__trilha {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.fita__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px clamp(14px, 1.6vw, 22px);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
  color: rgba(255, 255, 255, 0.58);
  transition: color var(--t-fast), background var(--t-fast);
}
.fita__item:last-child { border-right: none; }
.fita__item:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.fita__item.is-on { color: #fff; background: rgba(255, 255, 255, 0.1); }

.fita__thumb {
  flex: none;
  width: 68px;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background: #2a2a29;
}
.fita__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Miniatura do empreendimento sem imagem: hachura, para não parecer
   um quadro que falhou ao carregar. */
.fita__thumb--marcacao {
  background: repeating-linear-gradient(-45deg, #2e2e2c 0 6px, #232322 6px 12px);
}

.fita__rotulo { min-width: 0; }
.fita__rotulo b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: inherit;
}
.fita__rotulo span {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.5);
}

/* Régua de progresso do slide ativo */
.fita__item.is-on .fita__thumb { outline: 1px solid rgba(255, 255, 255, 0.55); }

@media (max-width: 899px) {
  .fita__trilha { grid-auto-flow: row; grid-auto-columns: auto; }
  .fita__item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .fita__item:last-child { border-bottom: none; }
}
@media (max-width: 559px) {
  .fita__rotulo span { display: none; }
  .fita__item { padding-block: 14px; }
}

/* --------------------------------------------------------------------------
   Página de empreendimento
   -------------------------------------------------------------------------- */
.emp-hero {
  position: relative;
  margin-top: var(--header-h);
  min-height: min(64dvh, 560px);
  background: var(--ink);
  overflow: hidden;
}
/* Filho direto, de novo: o logotipo da marca também é uma imagem e mora
   dentro do texto desta capa. */
.emp-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.emp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 12, 11, 0.8), rgba(12, 12, 11, 0.12));
}
.emp-hero__texto {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.emp-hero__texto h1 {
  margin-top: 16px;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1.08;
  color: #fff;
}
.emp-hero__texto p {
  margin-top: 14px;
  max-width: 52ch;
  font-size: var(--step-lead);
  color: rgba(255, 255, 255, 0.88);
}

/* Volta para a listagem */
.migalha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink-3);
}
.migalha:hover { color: var(--ink); }

/* Na capa do empreendimento o logotipo entra dentro do h1. A altura do h1
   some, então a marca precisa da própria margem. */
.emp-hero__texto h1 { margin-top: 20px; }
.emp-hero__texto h1 .palco__marca { margin-top: 0; }
.emp-hero__texto .palco__cta { margin-top: 26px; }

/* Espaço entre o logotipo e a chamada: o PNG tem pouca folga embaixo e as
   duas linhas encostavam. */
.palco__marca { margin-bottom: 8px; }

/* ==========================================================================
   TOPO DA HOME

   O topo não é carrossel: é um banner fixo, só do Reserva. Os outros
   empreendimentos ganham um segundo destaque logo abaixo, do mesmo porte,
   que troca sozinho. Depois dele vem a grade com todos.
   ========================================================================== */

/* --- Banner: mesmo tratamento visual do palco, sem a máquina do carrossel */
.banner {
  position: relative;
  margin-top: var(--header-h);
  min-height: min(80dvh, 760px);
  background: var(--ink);
  overflow: hidden;
}
.banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 12, 11, 0.92) 0%,
    rgba(12, 12, 11, 0.80) 24%,
    rgba(12, 12, 11, 0.42) 48%,
    rgba(12, 12, 11, 0.06) 74%,
    rgba(12, 12, 11, 0.30) 100%
  );
}
.banner__texto {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding-bottom: clamp(2.25rem, 4vw, 3.75rem);
}

/* --------------------------------------------------------------------------
   Página de empreendimento
   -------------------------------------------------------------------------- */
.emp-hero {
  position: relative;
  margin-top: var(--header-h);
  min-height: min(64dvh, 560px);
  background: var(--ink);
  overflow: hidden;
}
/* Filho direto, de novo: o logotipo da marca também é uma imagem e mora
   dentro do texto desta capa. */
.emp-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.emp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 12, 11, 0.8), rgba(12, 12, 11, 0.12));
}
.emp-hero__texto {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.emp-hero__texto h1 {
  margin-top: 16px;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1.08;
  color: #fff;
}
.emp-hero__texto p {
  margin-top: 14px;
  max-width: 52ch;
  font-size: var(--step-lead);
  color: rgba(255, 255, 255, 0.88);
}

/* Volta para a listagem */
.migalha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink-3);
}
.migalha:hover { color: var(--ink); }

/* Na capa do empreendimento o logotipo entra dentro do h1. A altura do h1
   some, então a marca precisa da própria margem. */
.emp-hero__texto h1 { margin-top: 20px; }
.emp-hero__texto h1 .palco__marca { margin-top: 0; }
.emp-hero__texto .palco__cta { margin-top: 26px; }

/* Espaço entre o logotipo e a chamada: o PNG tem pouca folga embaixo e as
   duas linhas encostavam. */
.palco__marca { margin-bottom: 8px; }

/* ==========================================================================
   DOIS DESTAQUES NO TOPO

   Referência: Cyrela, Tecnisa. Banner principal só do Reserva, e logo
   abaixo um segundo bloco do mesmo porte com um empreendimento por vez.
   O segundo herda toda a mecânica do palco; muda só a altura e ganha
   bolinhas embaixo.
   ========================================================================== */

/* O segundo destaque não tem o cabeçalho por cima, então não precisa da
   margem de topo, e vem um pouco mais baixo que o banner para a hierarquia
   ficar clara: um é o destaque da casa, o outro é a vitrine. */
.palco--segundo { margin-top: 0; }
.palco--segundo .palco__janela { min-height: min(66dvh, 620px); }
.palco--segundo .palco__nome { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); }

/* Setas discretas nas laterais, como na referência: sem caixa, só o sinal */
.palco--segundo .palco__seta {
  width: 44px;
  height: 64px;
  margin-top: -32px;
  border: none;
  background: none;
  backdrop-filter: none;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.72);
}
.palco--segundo .palco__seta:hover { background: none; color: #fff; }

/* Bolinhas */
.palco__pontos {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 2vw, 22px);
  z-index: 3;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}
.palco__ponto {
  width: 34px;
  height: 14px;              /* alvo de toque; o traço visível é menor */
  display: grid;
  align-items: center;
  padding: 0;
}
.palco__ponto::before {
  content: '';
  display: block;
  height: 2px;
  background: rgba(255, 255, 255, 0.42);
  transition: background var(--t-fast);
}
.palco__ponto:hover::before { background: rgba(255, 255, 255, 0.75); }
.palco__ponto.is-on::before { background: #fff; }

/* Rótulo só para leitor de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sem título, a seção abria com um vazio grande antes dos filtros: o respiro
   do topo fora calculado para ter um h2 ali. */
.section--sem-titulo { padding-top: clamp(2.5rem, 4vw, 4rem); }

/* O logotipo é SVG e entra por altura, não por largura. 62px numa barra de
   84px deixa 11px de folga de cada lado: é o maior que cabe sem a marca
   encostar nas bordas. */
.header--marca .header__brand img { height: 62px; width: auto; }
.footer__brand img { width: 190px; height: auto; }

@media (max-width: 559px) {
  .header--marca .header__brand img { height: 46px; }
}

/* No celular as setas do palco somem, mas esta troca é por opacidade: não
   existe arrastar para o lado. Sem as setas, as bolinhas seriam o único
   controle, e elas são alvo pequeno. Então o segundo destaque mantém as
   setas no toque, e as bolinhas ganham área clicável de 36px, com o traço
   visível continuando fino. */
@media (max-width: 767px) {
  .palco--segundo .palco__seta { display: grid; width: 38px; }
}

.palco__ponto { height: 36px; }
.palco__pontos { bottom: clamp(4px, 1.2vw, 12px); }

/* O cabeçalho é opaco, sem backdrop-filter. O filtro obriga o
   navegador a promover a barra a uma camada composta, que ele rasteriza uma
   vez e depois escala: o logotipo saía áspero e voltava ao normal no zoom,
   quando a camada é refeita. A barra já era 90% branca, então a translucidez
   não fazia falta nenhuma. */
.header--marca {
  background: var(--paper);
  backdrop-filter: none;
}

/* Respiro entre os dois destaques. Sem ele as duas fotos escuras encostam e
   a emenda some: o visitante lê um bloco só, confuso. A faixa de papel
   separa e ainda dá ao segundo destaque o seu próprio palco. */
.destaques-area {
  background: var(--paper-soft);
  padding-block: clamp(2.5rem, 1.5rem + 2.5vw, 4.5rem);
}

/* A foto do banner é 3:2 e o bloco é mais largo que alto, então sobra corte
   em cima e embaixo. Puxando o enquadramento para cima, o que sai é o
   telhado do primeiro plano, e ficam o pôr do sol, as torres e a serra. */
.banner > img { object-position: center 38%; }