/* ==========================================================================
   SC PRIME — Folha de estilo única
   Tipografia: Scto Grotesk A (Schick Toikka), com Inter como fallback.
   Paleta extraída da identidade da marca (logo SC | PRIME).
   ========================================================================== */

/* -------------------------------------------------------- 0. Scto Grotesk A
   Fonte comercial — os arquivos NÃO acompanham o projeto.
   Coloque os .woff2 em assets/fonts/ para ativar. Ver assets/fonts/LEIA-ME.md.
   Sem os arquivos, o navegador cai para Inter automaticamente. */
@font-face {
  font-family: "Scto Grotesk A";
  src: url("../fonts/SctoGroteskA-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Scto Grotesk A";
  src: url("../fonts/SctoGroteskA-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Scto Grotesk A";
  src: url("../fonts/SctoGroteskA-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------ 1. Tokens */
:root {
  /* Uma família só, do branco ao azul-noite. Antes o site misturava neutros
     quentes (bege, cinza-areia) com o azul da marca; a troca entre as duas
     temperaturas era o que dava o ar de coisa montada em pedaços. Agora todo
     cinza é azul dessaturado, e o preto some — o mais escuro é --ink. */
  --paper:      #ffffff;
  --paper-2:    #f1f6fa;
  --paper-3:    #e2ebf2;
  --ink:        #10263a;
  --ink-2:      #16324a;

  --graphite:   #3b5164;
  --muted:      #576d7e;
  --line:       #dbe5ec;
  --line-soft:  #eef3f7;

  /* Dourado da marca. São dois porque o mesmo tom não serve nos dois fundos:
     o dourado que brilha sobre o azul escuro fica ilegível sobre o branco.
     --accent  → superfícies claras (texto, links, botões)
     --dourado → superfícies escuras (rótulos, ícones, destaques) */
  --accent:      #8a6a1e;
  --accent-dark: #6e5417;
  --accent-soft: #f7f1e1;
  --dourado:     #c9a24a;
  /* Sobre foto ou vídeo o dourado cheio não sustenta contraste — medido, o
     rótulo do hero dava 2,86 contra o mínimo de 4,5. Este tom mais claro
     resolve sem sair da família. Só para texto sobre imagem. */
  --dourado-claro: #ecd49a;

  /* Azul-noite dos painéis sólidos */
  --brand-deep:  #12283c;
  --brand-deep-2:#0d1f2f;          /* um passo mais fundo, para camadas */
  --brand-clara: var(--dourado);   /* nome antigo, mantido para não quebrar usos */
  /* Fio sobre fundo escuro. Branco com alfa dessatura e sai cinza — sobre o
     azul ele lê como risco branco atravessando a seção. Com azul claro por
     baixo, o fio fica na família e vira estrutura em vez de traço. */
  --linha-escura: rgba(125, 165, 199, .20);

  /* Archivo nas chamadas, Inter no corpo. Archivo é uma grotesca de desenho
     mais largo e estrutural — em corpo grande com tracking fechado ela tem
     presença que a Inter não tem, e é onde o site parecia genérico. */
  --font: "Scto Grotesk A", "Inter", -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Archivo", "Scto Grotesk A", "Inter", -apple-system,
                  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: var(--font);

  --wrap: 1280px;
  --gutter: clamp(20px, 5vw, 60px);

  /* Escala tipográfica */
  --step-1: clamp(.775rem, .755rem + .1vw, .825rem);
  --step0:  clamp(.95rem, .92rem + .16vw, 1.03rem);
  --step1:  clamp(1.1rem, 1.03rem + .32vw, 1.28rem);
  --step2:  clamp(1.42rem, 1.22rem + .82vw, 1.98rem);
  --step3:  clamp(1.85rem, 1.42rem + 1.85vw, 2.95rem);
  --step4:  clamp(2.15rem, 1.5rem + 2.5vw, 3.5rem);

  /* Raios */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Sombras — difusas e discretas; o peso vem do espaço, não do contraste */
  --sh-sm: 0 1px 2px rgba(19,28,27,.04), 0 4px 12px -6px rgba(19,28,27,.07);
  --sh:    0 1px 2px rgba(19,28,27,.04), 0 14px 34px -16px rgba(19,28,27,.13);
  --sh-lg: 0 2px 4px rgba(19,28,27,.04), 0 30px 64px -28px rgba(19,28,27,.22);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }
/* Qualquer `display` de autor vence o atributo `hidden`, que só define
   display:none na folha do navegador. A regra existia antes só para
   .filters__group, que foi o caso onde o problema apareceu. Aqui vale para
   tudo: a seção da equipe na página de Liderança depende dela. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  color-scheme: dark light;
}
a, button, label, select, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(201,162,74,.18);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: var(--step0);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
/* h3 e h4 seguem no sans: a serifada é de alto contraste e, em corpo pequeno,
   perde legibilidade — ela existe para as chamadas, não para rótulos. */
h3, h4 {
  font-family: var(--font-body);
  color: var(--ink); font-weight: 500; line-height: 1.25;
  letter-spacing: -.015em; margin: 0; text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 11px 20px; border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------ 3. Layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(62px, 8.5vw, 118px); }
.section--tight { padding-block: clamp(42px, 5vw, 72px); }
.section--paper2 { background: var(--paper-2); }
/* Superfícies escuras são todas da mesma família azul. Antes o site tinha
   dois pretos sem parentesco — um quase-preto esverdeado aqui e o azul da
   marca nas faixas — e a troca entre eles ficava evidente ao rolar. */
.section--ink { background: var(--brand-deep-2); color: #c5d6de; }
/* Duas seções escuras coladas viram um bloco só. Este tom, um passo acima,
   separa uma da outra sem sair do azul. */
.section--fundo2 { background: var(--brand-deep); }
.section--ink h2, .section--ink h3 { color: #fff; }

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

/* ------------------------------------------------- 4. Tipografia comum */
.eyebrow {
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display: block;
}
.section--ink .eyebrow { color: var(--brand-clara); }

/* Voz de vitrine: caixa alta, peso e entrelinha fechada. Vale para as
   chamadas — hero, abertura de página e cabeçalho de seção. Títulos de
   imóvel ficam de fora de propósito: são longos ("Área de 29.663,10 m²
   frente à lagoa — Moçambique, Rio Vermelho") e em caixa alta viram parede. */
/* Caixa baixa, peso médio e tracking bem fechado — o tratamento das três
   referências. Em caixa alta a chamada vira bloco e perde o desenho das
   letras, que é justamente o que dá caráter em corpo grande. */
.display {
  font-size: calc(var(--step4) * 1.1); font-weight: 500;
  letter-spacing: -.035em; line-height: 1.02;
}
.h1 { font-size: var(--step3); letter-spacing: -.032em; }
.h2 { font-size: var(--step2); }
.h3 { font-size: var(--step1); letter-spacing: -.018em; }

.section-head .h1,
.section-head .h2 {
  font-size: calc(var(--step3) * 1.08);
  font-weight: 500; letter-spacing: -.032em; line-height: 1.06;
}
.page-hero h1 {
  font-size: calc(var(--step3) * 1.24);
  font-weight: 500; letter-spacing: -.034em; line-height: 1.02;
}

.lead { font-size: var(--step1); line-height: 1.58; color: var(--graphite); }
.muted { color: var(--muted); }
.small { font-size: var(--step-1); }

/* Cabeçalho de seção centralizado. Vale para os blocos de largura cheia, que
   ficam sozinhos acima de uma grade — a abertura de cada página fica de fora,
   assim como os títulos que dividem a linha com uma imagem ou um botão:
   centralizar uma coluna ao lado de outra desfaz o par. */
.section-head {
  max-width: 60ch; margin-inline: auto; text-align: center;
  margin-bottom: clamp(34px, 4vw, 58px);
}
.section-head p { margin-top: 18px; color: var(--muted); }

/* ------------------------------------------------------------ 5. Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), box-shadow .3s var(--ease),
              transform .3s var(--ease-out);
  cursor: pointer;
}
/* Azul, não dourado. Dourado sólido num botão grande vira mancha oliva e
   briga com a imagem; ele rende melhor em fio fino — rótulo, ícone, link. */
.btn--primary { background: var(--brand-deep); color: #fff; box-shadow: 0 8px 22px -12px rgba(18,40,60,.55); }
.btn--primary:hover { background: var(--brand-deep-2); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(18,40,60,.45); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; transform: translateY(-2px); }
.btn--light { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-2px); }
.btn--wide { width: 100%; }

/* No hero o botão principal é branco. Ele fica sobre o vídeo, e ali o azul
   sólido se dissolve no fundo escuro em vez de chamar. Nas demais seções,
   sobre fundo claro, ele segue azul. */
.hero__cta .btn--primary {
  background: #fff; color: var(--ink);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.6);
}
.hero__cta .btn--primary:hover {
  background: var(--paper-2); color: var(--ink);
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.5);
}
.btn__arrow { transition: transform .3s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.link-arrow {
  font-size: var(--step-1); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
  transition: border-color .3s var(--ease), color .3s var(--ease), gap .3s var(--ease-out);
}
.link-arrow:hover { border-color: var(--accent); color: var(--accent); gap: 15px; }

/* ------------------------------------------------------------- 6. Marca */
.brand { display: inline-flex; flex-direction: column; gap: 5px; line-height: 1; }
.brand__mark {
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: .16em;
  margin-right: -.16em;      /* letter-spacing sobra depois da última letra */
  color: var(--ink);
  white-space: nowrap;
}
.brand__bar { color: var(--line); margin-inline: .12em; }
.brand__m { color: var(--accent); }
/* Trava de lockup: a frase termina exatamente onde a marca termina.
   O valor é medido, não escolhido. Com a marca desenhando 183,0 px de
   letra e "Incorporadora Ltda" desenhando 91,9 px sem espaçamento, sobram
   91,1 px para as 17 folgas entre as 18 letras: 91,1 / (17 × 8px) = 0,67em.
   Erro medido: 0,04 px.

   A frase encurtou de 28 para 18 letras quando a empresa virou SC Premium
   Incorporadora, e o espaçamento teve de mais que triplicar para cobrir a
   mesma largura. É por isso que o valor parece exagerado fora de contexto.

   Depende do texto e da fonte — hoje o site cai em Inter, porque a Scto
   Grotesk é licenciada e não pode ser distribuída. Se a frase, a marca ou
   a fonte mudarem, remeça: (largura da marca − largura da frase sem
   espaçamento) ÷ ((nº de caracteres − 1) × font-size). Meça o texto com um
   Range, não com getBoundingClientRect: o .brand é flex e estica a caixa
   além do texto, o que faz a medição parecer certa quando não está. */
.brand__tag {
  font-size: .5rem;
  font-weight: 400;
  letter-spacing: .67em;
  margin-right: -.67em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.brand--light .brand__mark { color: #fff; }
.brand--light .brand__tag { color: rgba(255,255,255,.58); }
.brand--light .brand__bar { color: rgba(255,255,255,.32); }
.brand--light .brand__m { color: var(--brand-clara); }

/* -------------------------------------------------------- 7. Cabeçalho */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 84px;
}
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.nav a {
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--graphite);
  padding: 8px 0;
  white-space: nowrap;
  position: relative;
  transition: color .25s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { background: var(--accent); transform: scaleX(1); }
/* O CTA dentro do menu existe só para a versão mobile. */
.nav > .btn { display: none; }
.nav > .btn::after { display: none; }
.header-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle { display: none; padding: 10px; margin-right: -10px; }
.nav-toggle span {
  display: block; width: 22px; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .2s var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .header-actions .btn { display: none; }
  .nav > .btn { display: inline-flex; }
  .nav {
    position: fixed; inset: 84px 0 auto 0;
    background: var(--paper);
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px var(--gutter) 30px;
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: var(--sh);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease-out);
    max-height: calc(100dvh - 84px); overflow-y: auto;
  }
  .nav[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 20px; }
}

/* ---------------------------------------------------------------- 8. Hero */
.hero { position: relative; background: var(--brand-deep-2); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Poster e vídeo ficam OPACOS. Antes a camada de vídeo tinha 52% de
   opacidade e todo o escurecimento vinha daí — só que uma camada
   semitransparente deixa passar o que está atrás, e o poster (um quadro
   parado) aparecia por trás do vídeo em movimento.

   Agora quem escurece é só o véu abaixo, por cima de tudo. Como o clipe
   ativo é opaco, nada atrás dele consegue vazar: nem o poster, nem o clipe
   que está saindo. Os valores do véu foram recalculados para dar a mesma
   luminância de antes (ex.: no meio, 0,52 × (1 − 0,30) = 0,364 → 1 − 0,64). */
.hero__poster { opacity: 1; }

/* z-index: 0 aqui é o que prende o empilhamento dos clipes dentro desta
   caixa. Sem isso o z-index dos vídeos escapa para o .hero e disputa com o
   véu e com o texto — o véu chegou a cobrir o título. */
.hero__clipes { position: absolute; inset: 0; z-index: 0; }
.hero__video { opacity: 0; z-index: 1; transition: opacity 1.4s linear; }
.hero__video.is-ativo { opacity: 1; z-index: 2; }

/* Véu do hero. Muda de eixo conforme a largura, porque a posição do texto
   muda: em tela estreita ele ocupa tudo, em tela larga fica só à esquerda.

   A cor é um azul bem fundo (6,22,30), não o azul da marca: escurecer o vídeo
   com o próprio #0e3243 clareia demais e derruba o contraste — medido, o
   parágrafo caiu de 4,93 para 3,99 e reprovou. Compensar subindo a alfa
   custaria 6 pontos de brilho do vídeo. Este tom fica na mesma família e
   devolve o contraste sem escurecer a imagem.

   PADRÃO (até 1199px) — vertical: escuro em cima, onde o texto está, e
   clareando para baixo. Aqui não existe "lado livre" para clarear.

   Os números são medidos, não escolhidos: contraste do texto branco sobre
   12 quadros dos três clipes, com esta composição reproduzida em canvas.
   Nesta faixa o texto vai de 12% a 88% da altura, então o clareamento só
   pode começar depois do parágrafo. Medido: eyebrow 9,7 · h1 7,5 ·
   parágrafo 6,1 · botão vazado 4,9 — todos acima do mínimo da WCAG AA. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* Fecho do pé. Sem ele o véu chega ao fim do hero em 67% de opacidade no
       canto direito — o vídeo aparece a 33% ali e fica bem mais claro que o
       azul sólido logo abaixo, o que desenha uma listra na emenda. Esta
       camada leva o pé exatamente à cor da seção seguinte. */
    linear-gradient(180deg,
      rgba(13,31,47,0) calc(100% - 130px),
      rgba(13,31,47,1) 100%),
    linear-gradient(180deg,
      rgba(6,22,30,.76) 0%,
      rgba(6,22,30,.66) 60%,
      rgba(6,22,30,.18) 100%);
}

/* TELA LARGA — horizontal: pesado sob o texto, quase ausente à direita,
   onde fica a vista. É o que permite escurecer a tipografia sem apagar a
   imagem. A vertical vira coadjuvante: só protege o cabeçalho em cima e a
   emenda com a busca embaixo.

   As paradas são em pixels a partir da borda do conteúdo, não em
   porcentagem. O bloco de texto tem largura fixa, então a fração da tela
   que ele ocupa encolhe conforme o monitor cresce: com paradas em %, o
   texto passava a cair na metade clara e o contraste despencava — medido,
   o h1 reprovava em 1200px e passava em 1440px. Ancorado na grade, o véu
   sob o texto é o mesmo em qualquer largura. */
@media (min-width: 1200px) {
  .hero__media::after {
    --borda-conteudo: max((100vw - var(--wrap)) / 2, 0px);
    background:
    /* Fecho do pé. Sem ele o véu chega ao fim do hero em 67% de opacidade no
       canto direito — o vídeo aparece a 33% ali e fica bem mais claro que o
       azul sólido logo abaixo, o que desenha uma listra na emenda. Esta
       camada leva o pé exatamente à cor da seção seguinte. */
    linear-gradient(180deg,
      rgba(13,31,47,0) calc(100% - 130px),
      rgba(13,31,47,1) 100%),
      linear-gradient(90deg,
        rgba(6,22,30,.88) 0,
        rgba(6,22,30,.74) calc(var(--borda-conteudo) + 420px),
        rgba(6,22,30,.34) calc(var(--borda-conteudo) + 820px),
        rgba(6,22,30,.12) 100%),
      linear-gradient(180deg,
        rgba(6,22,30,.42) 0%,
        rgba(6,22,30,.10) 38%,
        rgba(6,22,30,.62) 100%);
  }
}
/* z-index explícito: o conteúdo fica à frente do vídeo e do véu, e não
   depende da ordem dos elementos no HTML para isso.

   O bloco de texto acompanha a mesma margem da logo e das seções de baixo.
   Antes não acompanhava: este elemento É o .wrap, então trocar o max-width
   para 780px deixou o `margin-inline: auto` centralizando a caixa inteira —
   o texto caía 250px à direita do resto da página. Agora quem tem largura
   limitada é o conteúdo, não a caixa. */
.hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(88px, 12vw, 158px);
}
.hero__inner > * { max-width: 720px; }
/* Texto em cor cheia — nada do vídeo atravessa a tipografia. */
.hero h1 { color: #fff; }
.hero p { margin-top: 24px; color: #fff; font-size: var(--step1); line-height: 1.58; max-width: 56ch; }
.hero .eyebrow { color: var(--dourado-claro); }
.hero .btn--light { border-color: #fff; }
.hero__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Faixa de abertura das páginas internas. Em azul-petróleo sólido: dá peso
   ao título, separa a página do cabeçalho sem precisar de linha divisória e
   repete a cor da marca em todas as seções. */
.page-hero {
  background: var(--brand-deep);
  color: #fff;
}
/* Abertura em duas colunas, não em pilha.

   Antes era rótulo, título e parágrafo empilhados num bloco estreito à
   esquerda, com quase metade da largura vazia à direita. É o arranjo mais
   genérico que existe, e num fundo chapado ele não tem nada que segure o
   olho. Agora o rótulo abre, um fio atravessa a largura toda e o título
   divide a linha com o apoio, alinhados pela base: o texto passa a ocupar a
   página inteira e a relação entre as duas colunas é que dá estrutura. */
/* A abertura tinha 447px de altura para 175px de conteúdo: 115px vazios
   embaixo e o apoio começando em 56% da largura, longe do título. Um bloco
   quase vazio é o que fazia a página parecer inacabada. Agora a caixa
   acompanha o conteúdo e o apoio encosta no título. */
.page-hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(52px, 6vw, 88px);
  max-width: none;
}
.page-hero .eyebrow { color: var(--dourado-claro); margin-bottom: 0; }

.page-hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(18px, 3vw, 48px);
  align-items: start;
  margin-top: clamp(16px, 2vw, 24px);
  padding-top: clamp(18px, 2.2vw, 28px);
  border-top: 1px solid rgba(255,255,255,.18);
}
/* Numa coluna só, a régua acima do título deixa de separar duas colunas e
   vira enfeite. Pior: as fotos de fundo têm arestas horizontais de
   arquitetura que caem perto dela, e as duas juntas leem como uma borda
   quebrada. Sem coluna a separar, sem régua. */
@media (max-width: 900px) {
  .page-hero__grade {
    grid-template-columns: 1fr; gap: 16px;
    border-top: 0; padding-top: 0;
  }
  .page-hero .eyebrow { margin-bottom: 4px; }
}

/* Fundo em imagem. É o que as três referências de alto padrão fazem, e o que
   separava esta página de um retângulo de cor com texto em cima. O véu é
   forte porque a foto aqui é cenário, não conteúdo: ela dá profundidade e
   sai de cena. */
.page-hero--imagem { position: relative; overflow: hidden; isolation: isolate; }
.page-hero__fundo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero--imagem::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(9,24,37,.94) 0%, rgba(9,24,37,.86) 46%, rgba(9,24,37,.62) 100%),
    linear-gradient(180deg, rgba(9,24,37,.5) 0%, rgba(9,24,37,.3) 45%, rgba(9,24,37,.85) 100%);
}

.page-hero h1 {
  color: #fff;
  /* Sem balance: com a largura da coluna já definida, o balanceamento
     inventava quebras estranhas ("Quem conduz / a SC Premium"). */
  text-wrap: pretty;
}
.page-hero p {
  color: rgba(255,255,255,.84);
  font-size: var(--step0); line-height: 1.7;
}
.page-hero a { color: var(--brand-clara); }
.page-hero .migalhas, .page-hero .migalhas a { color: rgba(255,255,255,.62); }

/* ------------------------------------------------------- 9. Busca rápida */
/* Barra única em vez de três caixas empilhadas. Cada campo perde a moldura
   e passa a ser separado por um fio — o cartão inteiro é que tem forma, não
   cada campo. É o que deixa a busca parecer parte do hero, e não um
   formulário largado em cima dele. */
.quicksearch {
  position: relative;
  margin-top: -46px; z-index: 5;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-lg);
  padding: 22px 22px 22px 14px;
}
.quicksearch__grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: center;
}
.quicksearch .field {
  gap: 8px; padding-inline: clamp(24px, 2.4vw, 36px);
  border-right: 1px solid var(--line);
}
.quicksearch .field:nth-of-type(3) { border-right: 0; }
.quicksearch .field > label {
  font-size: .66rem; letter-spacing: .14em; color: var(--muted);
}
.quicksearch select {
  border: 0; background-color: transparent; padding: 0 26px 0 0;
  border-radius: 0; font-size: var(--step0); color: var(--ink);
  background-position: right 2px center;
}
/* Só a cor muda no hover. Zerar a borda aqui apagava o contorno que os
   campos ganham em tela estreita — o campo sumia justamente ao ser apontado. */
.quicksearch select:hover, .quicksearch select:focus { color: var(--accent-dark); }
.quicksearch select:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.quicksearch .btn { padding: 17px 34px; }

/* Em tela estreita a barra vira cartão: os campos empilham, recuperam a
   moldura e o fio some — sem isso viram três linhas soltas no branco. */
@media (max-width: 860px) {
  .quicksearch {
    margin-top: -38px; border-radius: var(--r-lg);
    padding: clamp(20px, 2.4vw, 26px);
  }
  .quicksearch__grid { grid-template-columns: 1fr; gap: 16px; }
  .quicksearch .field { padding-inline: 0; border-right: 0; gap: 8px; }
  .quicksearch select {
    border: 1px solid var(--line); background-color: var(--paper);
    border-radius: var(--r-sm); padding: 13px 40px 13px 15px;
    background-position: right 15px center;
  }
  .quicksearch select:hover, .quicksearch select:focus { border-color: var(--accent); }
}

.field { display: flex; flex-direction: column; gap: 9px; }
.field > label {
  font-size: var(--step-1); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
.field select, .field input, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--r-sm);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2377776f' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field select:hover, .field input:hover, .field textarea:hover { border-color: #cfcabf; }
/* O anel de foco não pode depender só de box-shadow: no modo de alto
   contraste do sistema a sombra é descartada e o campo fica sem indicação. */
.field select:focus-visible, .field input:focus-visible, .field textarea:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent); outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { min-height: 130px; resize: vertical; }
.field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------------------------------------------------------- 10. Cards */
.grid-cards {
  display: grid; gap: clamp(22px, 2.4vw, 32px);
  grid-template-columns: repeat(auto-fill, minmax(324px, 1fr));
}
@media (max-width: 700px) { .grid-cards { grid-template-columns: 1fr; } }

/* Card sem moldura: só a foto arredondada e o texto embaixo, alinhado à foto. */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: transparent;
}
.card__media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--paper-3);
  border-radius: var(--r-lg);
}
/* Trilho do carrossel: os slides ficam lado a lado e deslizam no eixo X. */
.card__track {
  display: flex; height: 100%; width: 100%;
  transition: transform .55s var(--ease-out);
}
.card__track img {
  flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover;
}
.card__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity .3s var(--ease);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.card__nav--prev { left: 6px; }
.card__nav--next { right: 6px; }
.card:hover .card__nav, .card__nav:focus-visible { opacity: 1; }
.card__dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 6px;
}
.card__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.5);
  transition: background .3s var(--ease);
}
.card__dot.is-active { background: #fff; }
.card__media--empty {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: var(--step-1);
  letter-spacing: .17em; text-transform: uppercase; color: var(--muted);
  background: linear-gradient(135deg, var(--paper-2), var(--paper-3));
}
.card__flags { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 2; }
.flag {
  font-size: .66rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.93); color: var(--ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.flag--accent { background: var(--accent); color: #fff; }
.flag--ink { background: rgba(19,28,27,.82); color: #fff; }

/* Selos fora da foto (página de imóvel): precisam de contorno para aparecer
   sobre fundo claro. */
.flags-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.flags-inline .flag { background: var(--paper-2); border: 1px solid var(--line); backdrop-filter: none; }
.flags-inline .flag--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent-dark); }

.card__body { padding: 20px 2px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.card__type {
  font-size: var(--step-1); font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink);
}
.card__cod {
  font-size: var(--step-1);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.card__title { font-size: var(--step2); line-height: 1.2; transition: color .3s var(--ease); }
.card:hover .card__title { color: var(--accent); }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__specs { font-size: var(--step0); color: var(--graphite); }
.card__price { font-size: var(--step0); color: var(--ink); margin-top: 2px; }
.card__price strong { font-weight: 500; }

/* ------------------------------------------------------ 11. Diferenciais */
.pillars { display: grid; gap: clamp(26px, 3vw, 42px); grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.pillar { border-top: 1px solid var(--line); padding-top: 24px; }
.section--ink .pillar { border-color: var(--linha-escura); }
.pillar__num {
  font-size: var(--step-1); font-weight: 500;
  letter-spacing: .17em; color: var(--accent); display: block; margin-bottom: 16px;
  text-transform: uppercase;
}
.section--ink .pillar__num { color: var(--brand-clara); }

/* Ícone no lugar da numeração. O que ele mostra já está escrito no título ao
   lado, então é decorativo — daí o aria-hidden no SVG e nenhum texto
   alternativo: leitor de tela leria duas vezes a mesma coisa. */
.pillar__icone {
  width: 30px; height: 30px;
  display: block; margin-bottom: 18px;
  color: var(--accent);
}
.section--ink .pillar__icone { color: var(--brand-clara); }

.pillar h3 { font-size: var(--step1); margin-bottom: 11px; }
.pillar p { color: var(--muted); font-size: var(--step0); }
.section--ink .pillar p { color: rgba(255,255,255,.64); }

/* --------------------------------------------------------- 12. Split CTA */
.split { display: grid; gap: clamp(30px, 5vw, 76px); grid-template-columns: 1fr 1fr; align-items: center; }
/* Para splits com formulário: as duas colunas alinham pelo topo. */
.split--top { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__media {
  aspect-ratio: 5 / 4; overflow: hidden; background: var(--paper-3);
  border-radius: var(--r-xl);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body p { margin-top: 20px; color: var(--muted); }
.split__body .btn, .split__body .link-arrow { margin-top: 32px; }

/* Um tom acima do rodapé, para os dois blocos escuros não virarem uma massa só. */
.cta-band { background: var(--ink-2); color: #fff; }
.cta-band__inner {
  padding-block: clamp(56px, 7vw, 98px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 34px;
}
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { color: rgba(255,255,255,.7); margin-top: 16px; max-width: 46ch; }

/* -------------------------------------------- 12.1 Vitrine exclusividades */
.exclusives { display: grid; grid-template-columns: 1fr 1.55fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
@media (max-width: 980px) { .exclusives { grid-template-columns: 1fr; } }
.exclusives__intro p { margin-top: 20px; color: var(--muted); font-size: var(--step1); }
.exclusives__intro .btn { margin-top: 34px; }
.exclusives__cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 26px); }
@media (max-width: 640px) { .exclusives__cards { grid-template-columns: 1fr; } }

.feature-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 3 / 4; background: var(--paper-3);
  color: #fff;
}
.feature-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Escurece topo e base para o texto branco sobreviver a qualquer foto. */
.feature-card::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(19,28,27,.62) 0%, rgba(19,28,27,.12) 38%,
                    rgba(19,28,27,.12) 58%, rgba(19,28,27,.78) 100%);
}
.feature-card__top, .feature-card__bottom { position: relative; z-index: 2; }
.feature-card__top {
  position: absolute; top: 0; left: 0; right: 0;
  padding: clamp(22px, 2.6vw, 34px);
}
.feature-card__top h3 {
  color: #fff; font-size: var(--step2); line-height: 1.2;
  text-shadow: 0 1px 12px rgba(0,0,0,.3);
}
.feature-card__bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: clamp(22px, 2.6vw, 34px);
  display: grid; gap: 6px;
}
.feature-card__kicker {
  font-size: var(--step-1); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.82);
}
.feature-card__line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.feature-card__place { font-size: var(--step1); }
.feature-card__area { font-size: var(--step1); white-space: nowrap; }

/* ------------------------------------------------ 12.2 Faixa promocional */
.promo-band {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--brand-deep);
}
@media (max-width: 860px) { .promo-band { grid-template-columns: 1fr; } }
.promo-band__media { position: relative; min-height: 320px; background: var(--paper-3); }
.promo-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .promo-band__media { min-height: 240px; } }
.promo-band__body {
  padding: clamp(34px, 4.5vw, 64px);
  display: flex; flex-direction: column; justify-content: center;
  color: #fff;
}
.promo-band__body h2 { color: #fff; font-size: var(--step3); }
.promo-band__body p { margin-top: 18px; color: rgba(255,255,255,.76); max-width: 42ch; font-size: var(--step1); line-height: 1.55; }
.promo-band__body .btn { margin-top: 34px; align-self: flex-start; }

/* --------------------------------------------------- 13. Listagem/filtros */
.listing { display: grid; grid-template-columns: 306px 1fr; gap: clamp(28px, 3.4vw, 54px); align-items: start; }
@media (max-width: 980px) { .listing { grid-template-columns: 1fr; } }

.filters {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--sh-sm);
  padding: 28px; position: sticky; top: 104px;
}
@media (max-width: 980px) { .filters { position: static; } }
.filters h2 { font-size: var(--step1); margin-bottom: 22px; }
.filters .field + .field { margin-top: 18px; }
.filters__group { border-top: 1px solid var(--line-soft); margin-top: 22px; padding-top: 20px; }

.filters__actions { margin-top: 28px; display: grid; gap: 10px; }

.toggle-group {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 4px; background: var(--paper-2);
}
.toggle-group input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-group label {
  text-align: center; padding: 10px 4px; cursor: pointer; border-radius: var(--r-pill);
  font-size: var(--step-1); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.toggle-group input:checked + label { background: var(--ink); color: #fff; box-shadow: var(--sh-sm); }
.toggle-group input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.results-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--line);
}
.results-bar__count { font-size: var(--step1); color: var(--ink); letter-spacing: -.018em; }
.results-bar .field { flex-direction: row; align-items: center; gap: 12px; }
.results-bar .field select { width: auto; padding-block: 10px; }

.empty-state {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper-2);
  padding: clamp(36px, 5vw, 64px); text-align: center;
}
.empty-state h3 { font-size: var(--step2); margin-bottom: 14px; }
.empty-state p { color: var(--muted); max-width: 52ch; margin-inline: auto; }
.empty-state .btn { margin-top: 30px; }

/* ------------------------------------------------- 14. Página de imóvel */
.crumbs { font-size: var(--step-1); color: var(--muted); padding-block: 24px; }
.crumbs a { transition: color .25s var(--ease); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin-inline: 8px; color: var(--line); }

.gallery { display: grid; gap: 10px; grid-template-columns: 2fr 1fr; }
@media (max-width: 780px) { .gallery { grid-template-columns: 1fr; } }
.gallery__main { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-3); border-radius: var(--r-lg); }

/* Quem manda na altura é a imagem principal, pela proporção 3/2. A coluna da
   direita só acompanha.

   `height: 0` é o que faz isso funcionar: sem ele, a coluna entrava na conta
   da altura da linha com o tamanho natural das duas fotos empilhadas e
   passava da principal — eram 584px contra 511px, 73px sobrando embaixo. Com
   altura zero ela não empurra nada, e o `min-height: 100%` a estica de volta
   até a altura que a principal definiu. */
.gallery__side {
  display: grid; gap: 10px;
  /* auto-rows, não duas linhas fixas: nem todo imóvel tem três fotos. Com
     `1fr 1fr` um imóvel de duas fotos mostrava a miniatura em cima e metade
     da coluna vazia embaixo. Assim as linhas seguem quantas fotos existem. */
  grid-auto-rows: 1fr;
  height: 0; min-height: 100%;
}
/* No celular a galeria vira uma coluna e a lateral ganha linha própria: aí
   não existe mais altura de referência, e manter o height: 0 a colapsaria.
   As colunas também se ajustam à quantidade — uma foto ocupa a largura toda. */
@media (max-width: 780px) {
  .gallery__side {
    grid-auto-rows: auto;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: auto; min-height: 0;
  }
  .gallery__side .gallery__cell { aspect-ratio: 3 / 2; }
}
.gallery__cell { overflow: hidden; background: var(--paper-3); position: relative; border-radius: var(--r); min-height: 0; }
.gallery button.gallery__cell, .gallery button.gallery__main { padding: 0; width: 100%; display: block; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery__more {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(19,28,27,.6); color: #fff;
  font-size: var(--step-1); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  transition: background .3s var(--ease);
}
.gallery button:hover .gallery__more { background: rgba(19,28,27,.46); }

/* Aviso de imagem ilustrativa. Não é enfeite: foto de anúncio que não é do
   imóvel é problema com o comprador e com o CRECI, então precisa ser legível
   por quem olha, e não só existir no alt. O .gallery__main não era
   posicionado — sem isto o selo escaparia da foto principal. */
.gallery__main { position: relative; }
.gallery__selo {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(13,31,47,.82); color: #fff;
  font-size: var(--step-1); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}
.gallery__aviso {
  margin-top: 14px;
  font-size: var(--step-1); color: var(--muted); line-height: 1.5;
}

.detail { display: grid; grid-template-columns: 1fr 382px; gap: clamp(32px, 4vw, 68px); align-items: start; }
@media (max-width: 980px) { .detail { grid-template-columns: 1fr; } }

.detail__block { padding-block: clamp(32px, 4vw, 50px); border-top: 1px solid var(--line); }
.detail__block:first-child { border-top: 0; padding-top: 0; }
.detail__block h2 { font-size: var(--step2); margin-bottom: 24px; }
.detail__block p + p { margin-top: 15px; }

/* Linhas desenhadas com borda em cada célula (e não com gap colorido), para que
   sobras vazias na última linha da grade não apareçam como blocos cinza. */
.specs {
  display: grid; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
}
.spec {
  padding: 19px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec__label {
  font-size: .68rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: 8px;
}
.spec__value { font-size: var(--step1); color: var(--ink); line-height: 1.34; letter-spacing: -.015em; }

/* Régua de ícones da página de imóvel: ícone, número e rótulo. */
.stat-icons {
  display: flex; flex-wrap: wrap;
  gap: clamp(26px, 4vw, 56px);
  margin-top: clamp(30px, 3.5vw, 46px);
}
.stat-icons__item { text-align: center; min-width: 74px; }
.stat-icon { width: 34px; height: 34px; margin: 0 auto 14px; color: var(--ink); }
.stat-icons__value { display: block; font-size: var(--step1); color: var(--ink); font-weight: 500; letter-spacing: -.018em; }
.stat-icons__label { display: block; font-size: var(--step0); color: var(--graphite); margin-top: 4px; }

/* Linha "Cod 60982 | Mapa" logo abaixo do título */
.detail__ident {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 16px; color: var(--muted);
}
.detail__ident .sep { color: var(--line); }
.detail__ident a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink); font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.detail__ident a:hover { color: var(--accent); border-color: var(--accent); }
.detail__ident svg { width: 18px; height: 18px; }

.checklist { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); }
.checklist li { display: flex; gap: 13px; align-items: flex-start; color: var(--graphite); }
.checklist li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: 11px;
  background: var(--accent); border-radius: 50%;
}

.aside-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--sh);
  padding: clamp(24px, 2.4vw, 32px); position: sticky; top: 104px;
}
@media (max-width: 980px) { .aside-card { position: static; } }
.aside-card__price { font-size: var(--step2); color: var(--ink); display: block; letter-spacing: -.028em; }
.aside-card__price small { display: block; font-size: .4em; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 500; }
.aside-card__note { font-size: var(--step-1); color: var(--muted); margin-top: 14px; line-height: 1.6; }
.aside-card form { margin-top: 26px; display: grid; gap: 15px; }
.aside-card .btn { margin-top: 4px; }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: var(--step-1); color: var(--muted); line-height: 1.55; }
.consent input { margin-top: 4px; flex: none; accent-color: var(--accent); width: 16px; height: 16px; }
.consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.form-msg { padding: 14px 17px; font-size: var(--step-1); display: none; border-radius: var(--r-sm); }
.form-msg[data-state="ok"] { display: block; background: var(--accent-soft); color: var(--accent-dark); }
.form-msg[data-state="error"] { display: block; background: #fdeceb; color: #a3352c; }

/* --------------------------------------------------------- 15. Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,16,15,.95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: none; place-items: center;
  padding: clamp(16px, 4vw, 52px);
}
.lightbox[data-open="true"] { display: grid; }
/* Sem isto, rolar dentro do lightbox arrasta a página atrás quando a rolagem
   chega ao fim: a foto fecha e o visitante perde o lugar na listagem. */
.lightbox { overscroll-behavior: contain; }
.lightbox img { max-width: 100%; max-height: 80dvh; object-fit: contain; margin-inline: auto; border-radius: var(--r); }
.lightbox__bar {
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 3vw, 36px);
  display: flex; align-items: center; justify-content: center; gap: 26px;
  color: rgba(255,255,255,.82); font-size: var(--step-1); letter-spacing: .1em;
}
.lightbox__nav {
  width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  transition: background .25s var(--ease), transform .25s var(--ease-out);
}
.lightbox__nav:hover { background: rgba(255,255,255,.14); transform: scale(1.06); }
.lightbox__close {
  position: absolute; top: clamp(14px, 3vw, 30px); right: clamp(14px, 3vw, 30px);
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; border: 1px solid rgba(255,255,255,.28);
  transition: background .25s var(--ease), transform .25s var(--ease-out);
}
.lightbox__close:hover { background: rgba(255,255,255,.14); transform: scale(1.06); }

/* -------------------------------------------------------- 16. Formulários */
.form-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ 17. Prosa */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--step2); margin-top: 48px; margin-bottom: 18px; }
.prose h3 { font-size: var(--step1); margin-top: 32px; margin-bottom: 10px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p + p { margin-top: 15px; }
.prose ul { margin: 16px 0; display: grid; gap: 11px; }
.prose ul li { display: flex; gap: 13px; }
.prose ul li::before { content: "—"; color: var(--accent); flex: none; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.notice {
  border-left: 2px solid var(--accent);
  background: var(--paper-2);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 24px 28px;
  color: var(--muted);
  font-size: var(--step0);
}
.notice strong { color: var(--ink); font-weight: 500; }

/* ----------------------------------------------------------- 18. Rodapé */
.site-footer { background: var(--brand-deep-2); color: rgba(255,255,255,.66); padding-block: clamp(52px, 6vw, 84px) 34px; }
.footer-grid {
  display: grid; gap: clamp(30px, 4vw, 60px);
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h3 {
  font-size: var(--step-1); font-weight: 500; letter-spacing: .17em; text-transform: uppercase;
  color: rgba(255,255,255,.56); margin-bottom: 20px;
}
.footer-grid a { transition: color .25s var(--ease); }
.footer-grid a:hover { color: #fff; }
.footer-grid li + li { margin-top: 11px; }
.footer-grid p + p { margin-top: 11px; }
.footer-bottom {
  margin-top: clamp(40px, 5vw, 60px); padding-top: 26px;
  border-top: 1px solid var(--linha-escura);
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between;
  font-size: var(--step-1); color: rgba(255,255,255,.56);
}
.footer-bottom a:hover { color: #fff; }
.footer-legal { max-width: 62ch; }

/* ------------------------------------------------- 19. WhatsApp flutuante */
.wa-float {
  position: fixed; right: clamp(16px, 3vw, 30px); bottom: clamp(16px, 3vw, 30px);
  z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 14px 34px -12px rgba(37,211,102,.7);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease);
}
.wa-float:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 18px 40px -12px rgba(37,211,102,.8); }

/* ---------------------------------------------------- 20. Banner cookies */
.cookies {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: clamp(14px, 2.5vw, 24px); z-index: 120;
  width: min(1100px, calc(100% - 2 * clamp(14px, 3vw, 28px)));
  background: rgba(19,28,27,.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,.78);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 20px 26px;
  display: none; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: var(--step-1);
}
.cookies[data-open="true"] { display: flex; }
.cookies a { color: var(--brand-clara); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------ 21. Equipe */
.team-grid { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); }
.team-card__media { aspect-ratio: 3 / 4; background: var(--paper-3); overflow: hidden; border-radius: var(--r-lg); }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: var(--step1); margin-top: 20px; }
.team-card .creci { font-size: var(--step-1); color: var(--accent); letter-spacing: .09em; margin-top: 5px; }
.team-card p { margin-top: 11px; color: var(--muted); font-size: var(--step-1); }

/* -------------------------------------------------------------- 22. Misc */
.stat-row { display: grid; gap: clamp(24px, 3vw, 44px); grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); }
.stat__value { font-size: var(--step3); color: var(--ink); line-height: 1; letter-spacing: -.03em; }
.section--ink .stat__value { color: #fff; }
.stat__label { font-size: var(--step-1); color: var(--muted); margin-top: 11px; letter-spacing: .05em; }
.section--ink .stat__label { color: rgba(255,255,255,.55); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:hover, .wa-float:hover { transform: none; }
}

/* ========================================================================== */
/* 19. Blocos da nova narrativa                                               */
/* ========================================================================== */

/* ------------------------------------------------- faixa de números
   Cinco fatos, sem título e sem ícone. O peso vem do tamanho do número e do
   espaço em volta — qualquer rótulo aqui enfraqueceria o efeito. */
/* A busca fica sobre esta faixa, e a faixa é do mesmo azul da seção de
   números logo abaixo — as duas se emendam. `flow-root` é o que segura o
   margin-top negativo da busca: sem ele a margem escapa para cima, arrasta o
   topo da faixa junto e o azul come o pé do hero. */
.faixa-busca {
  display: flow-root;
  background: var(--brand-deep-2);
  padding-bottom: clamp(28px, 3.6vw, 48px);
}

.numeros { background: var(--brand-deep-2); color: #fff; padding-block: clamp(24px, 3vw, 42px) clamp(46px, 5.5vw, 78px); }
.numeros__grade {
  display: grid; gap: clamp(12px, 1.4vw, 18px);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 860px) { .numeros__grade { grid-template-columns: repeat(2, 1fr); } }

/* Cada número num cartão próprio, com um degradê muito sutil no sentido da
   luz. A borda quase não aparece — é ela que dá a forma, não o contraste. */
.numero {
  background: linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  border: 1px solid var(--linha-escura);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.6vw, 34px);
}
.numero__valor {
  display: block; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem);
  font-weight: 300; line-height: 1; letter-spacing: -.03em; color: #fff;
  white-space: nowrap;
}
.numero__rotulo {
  display: block; margin-top: 14px;
  font-size: var(--step-1); line-height: 1.45;
  color: rgba(255,255,255,.62);
}

/* ------------------------------------------------------- as três portas */
.portas {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.porta {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(26px, 2.6vw, 34px);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
              transform .3s var(--ease-out);
}
.porta:hover { border-color: transparent; box-shadow: var(--sh); transform: translateY(-3px); }
.porta h3 { font-size: var(--step1); }
.porta p { margin-top: 12px; color: var(--muted); font-size: var(--step0); line-height: 1.6; flex: 1; }
.porta__link {
  margin-top: 22px;
  font-size: var(--step-1); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.porta:hover .porta__link span { display: inline-block; transform: translateX(4px); transition: transform .3s var(--ease-out); }

/* ------------------------------------------------------------ liderança */
.lideranca {
  display: grid; gap: clamp(26px, 4vw, 60px);
  grid-template-columns: 1fr 1fr; align-items: start;
}
@media (max-width: 860px) { .lideranca { grid-template-columns: 1fr; } }
.lideranca__corpo p { color: var(--muted); font-size: var(--step0); line-height: 1.7; }
.lideranca__corpo p + p { margin-top: 16px; }
.lideranca__corpo .link-arrow { margin-top: 26px; }

/* ------------------------------------------------------------- sócios */
.socios { display: grid; gap: clamp(18px, 2vw, 26px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.socio {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(26px, 2.6vw, 36px);
}
.socio__cargo {
  display: block; margin-top: 8px;
  font-size: var(--step-1); letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.socio p { margin-top: 16px; color: var(--muted); line-height: 1.7; }

/* Frase isolada que carrega a prova. Fica sozinha na linha de propósito —
   diluída num parágrafo, perde a função. */
.destaque-linha {
  margin-top: 22px; padding-left: 18px;
  border-left: 2px solid var(--accent);
  color: var(--ink); font-size: var(--step1); line-height: 1.5;
}

/* Link secundário do hero: leva o segundo público sem disputar o botão. */
.hero__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--step-1); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 3px;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.hero__link:hover { border-color: #fff; gap: 13px; }

.split--invertido .split__media { order: 2; }
@media (max-width: 860px) { .split--invertido .split__media { order: 0; } }

/* --------------------------------------- portas sobre fundo escuro
   Mesmo tratamento dos cartões de número: degradê muito sutil e borda quase
   invisível. Cartão branco sobre o azul seria um buraco de luz na seção. */
.section--ink .porta {
  background: linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  border-color: var(--linha-escura);
}
.section--ink .porta:hover {
  border-color: rgba(125,165,199,.42);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.55);
}
.section--ink .porta h3 { color: #fff; }
.section--ink .porta p { color: rgba(255,255,255,.7); }
.section--ink .porta__link { color: var(--dourado); }

/* --------------------------------------- exclusividades sobre escuro */
.section--ink .exclusives__intro p { color: rgba(255,255,255,.72); }


/* ------------------------------------------------------- 20. Perfil do sócio
   Retrato alto à esquerda, texto à direita. O retrato é escuro de estúdio, e
   por isso o bloco inteiro é escuro: sobre fundo claro a foto viraria uma
   mancha preta recortada no meio da página. */
.perfil__grade {
  display: grid; gap: clamp(30px, 4vw, 64px);
  grid-template-columns: minmax(280px, 420px) 1fr;
  align-items: start;
}
@media (max-width: 900px) { .perfil__grade { grid-template-columns: 1fr; } }

.perfil__retrato {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  background: var(--brand-deep);
  aspect-ratio: 1046 / 1500;
}
.perfil__retrato img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.perfil__texto .eyebrow { margin-bottom: 14px; }
.perfil__texto > p { color: rgba(255,255,255,.74); line-height: 1.75; }
.perfil__abertura {
  margin-top: 22px;
  font-size: var(--step1); line-height: 1.6;
  color: #fff !important;
}

/* A frase dele fica em voz própria, deslocada do texto corrido. */
.perfil__citacao {
  margin: 28px 0; padding-left: 22px;
  border-left: 2px solid var(--dourado);
}
.perfil__citacao p {
  font-family: var(--font-display);
  font-size: var(--step1); line-height: 1.5; letter-spacing: -.02em;
  color: #fff;
}
.perfil__texto > p + p { margin-top: 18px; }

.perfil__pontos {
  display: grid; gap: 22px;
  margin-top: clamp(30px, 3.4vw, 44px);
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--linha-escura);
}
.perfil__pontos h3 { color: #fff; font-size: var(--step0); }
.perfil__pontos p { margin-top: 7px; color: rgba(255,255,255,.68); font-size: var(--step-1); line-height: 1.65; }
@media (min-width: 700px) { .perfil__pontos { grid-template-columns: repeat(3, 1fr); gap: 26px; } }