/* ==========================================================================
   Casa em Hercílio Luz, Araranguá/SC — LP de venda direta
   Paleta derivada das cores reais das fotos (céu, fachada, pedrisco, mato).
   Tipografia: Alegreya (display) + Karla (corpo) — escolhidas via /nomapa-tipografia.

   Estrutura: header fixo · hero fullscreen com foto real · sobre em 2 colunas ·
   faixa de galeria · a régua dos 85 m (seção-herói) · destaques · edícula ·
   localização · rodapé escuro com faixa de selos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fallbacks com size-adjust — matam o CLS do FOUT.
   O Lighthouse apontou 0,061 de CLS causado por "Web font loaded" deslocando
   o .hero__acoes. Estas faces fazem a fonte de sistema ocupar exatamente a
   mesma largura da web font, então a troca não reflui nada.
   Razões medidas no browser com "Ação, coração, você — três anos" a 100px:
   Alegreya/Georgia = 0,920 · Karla/Arial = 0,963.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Alegreya Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 92.0%;
  ascent-override: 105%;
  descent-override: 32%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Karla Fallback';
  src: local('Arial'), local('Helvetica Neue');
  size-adjust: 96.3%;
  ascent-override: 98%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* cores — origem em §6 do CLAUDE.md */
  --ceu:       #286097;
  --ceu-alto:  #6AA5D9;
  --ceu-claro: #AAD0ED;
  --fachada:   #303C47;
  --fachada-esc:#232C34;
  --cal:       #F4F1EA;
  --cal-fundo: #E9E4D8;
  --mato:      #3F6B3A;
  --manga:     #AF4C15;  /* 5,43:1 com branco — NÃO clarear */
  --manga-esc: #943F10;
  --granito:   #2A2E30;
  /* areia: kicker e detalhe. Medido na tela: #8A6A2F dava 4,45 sobre --cal e
     3,96 sobre --cal-fundo — abaixo de AA nos dois. #75581F dá 5,87 e 5,22.
     A variante clara só aparece sobre fundo escuro (7,3:1 sobre --fachada). */
  --areia:     #75581F;
  --areia-clara:#D8B56A;   /* só em fundo bem escuro: 7,3:1 sobre --fachada */
  --areia-regua:#EDD9AE;   /* sobre o azul da régua: 4,9:1 (o D8B56A dava 3,3) */

  --linha:     rgba(48, 60, 71, .14);
  --linha-forte: rgba(48, 60, 71, .26);

  /* tipografia */
  --f-display: 'Alegreya', 'Alegreya Fallback', Georgia, serif;
  --f-corpo:   'Karla', 'Karla Fallback', system-ui, -apple-system, sans-serif;

  --t-h1:   clamp(2.5rem, 1.45rem + 4.6vw, 5.5rem);
  --t-h2:   clamp(1.85rem, 1.35rem + 2.2vw, 3.15rem);
  --t-h3:   clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);
  --t-lead: clamp(1.1rem, 1.03rem + 0.4vw, 1.32rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-cap:  clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --t-dado: clamp(3.25rem, 2rem + 6vw, 7.5rem);
  --t-kicker: clamp(0.72rem, 0.69rem + 0.14vw, 0.8125rem);

  --lh-display: 1.06;
  --lh-corpo: 1.62;

  /* ritmo de seção — três alturas, para o scroll não virar metrônomo */
  --pad-secao: clamp(3.5rem, 8vw, 7rem);
  --pad-secao-larga: clamp(4.5rem, 11vw, 9.5rem);
  --pad-secao-curta: clamp(2.5rem, 5vw, 4rem);

  --largura: 74rem;
  --largura-estreita: 46rem;
  --h-header: 4.5rem;
  --raio: 4px;
  --raio-foto: 10px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--f-corpo);
  font-size: var(--t-body);
  line-height: var(--lh-corpo);
  color: var(--granito);
  background: var(--cal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 5.25rem; /* reserva da barra fixa mobile — evita CLS */
}
@media (min-width: 60rem) { body { padding-bottom: 0; } }

h1, h2, h3 {
  font-family: var(--f-display);
  line-height: var(--lh-display);
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0 0 0.6rem;
  font-variant-numeric: lining-nums tabular-nums;
}
h1 { font-size: var(--t-h1); font-weight: 700; }
h2 { font-size: var(--t-h2); font-weight: 700; }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; max-width: 62ch; }
.lead { font-size: var(--t-lead); text-wrap: pretty; max-width: 48ch; }

a { color: var(--ceu); }

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

strong { font-weight: 700; }

.container {
  width: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
}
.container--estreito { width: min(100% - 2.5rem, var(--largura-estreita)); }

/* pular para o conteúdo — só aparece no foco */
.pular {
  position: absolute; left: 1rem; top: -100%;
  z-index: 100;
  background: var(--manga); color: #fff;
  padding: .75rem 1.25rem; border-radius: var(--raio);
  font-weight: 700; text-decoration: none;
}
.pular:focus { top: 1rem; }

/* Kicker (olho de seção): areia sobre fundo claro, com um traço fino à esquerda.
   Substitui o ícone de biblioteca proibido pelo §13.4. */
.kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--f-corpo);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--areia);
  margin: 0 0 1rem;
  max-width: none;
}
.kicker::before {
  content: '';
  width: 2.25rem; height: 1px;
  background: currentColor;
  flex: 0 0 auto;
}
.kicker--claro { color: var(--areia-clara); }
.kicker--centro { justify-content: center; }

.dado {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-dado);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 0.86;
  letter-spacing: -0.03em;
}

.num { font-variant-numeric: lining-nums tabular-nums; }

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.9rem 1.75rem;
  font-family: var(--f-corpo);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--raio);
  cursor: pointer;
  overflow: hidden;
  transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.btn--primary {
  background: var(--manga);
  color: #fff;
  box-shadow: 0 6px 18px -10px rgba(175, 76, 21, .9);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--manga-esc);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(148, 63, 16, .95);
}

.btn--ghost {
  background: transparent;
  color: var(--fachada);
  border: 1px solid var(--linha-forte);
  font-weight: 600;
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  border-color: var(--fachada);
  transform: translateY(-2px);
}

/* contorno claro para uso sobre foto/fundo escuro */
.btn--contorno {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
  font-weight: 600;
}
.btn--contorno:hover, .btn--contorno:focus-visible {
  background: rgba(255,255,255,.12);
  border-color: #fff;
  transform: translateY(-2px);
}

.btn--grande { font-size: 1.15rem; padding: 1.15rem 2.4rem; min-height: 62px; }
.btn--bloco { width: 100%; }

:focus-visible { outline: 3px solid var(--manga); outline-offset: 3px; }
.hero :focus-visible,
.rodape :focus-visible,
.selos :focus-visible { outline-color: #fff; }

/* seta que anda no hover — sem ícone de biblioteca, só uma seta de texto */
.seta { display: inline-block; transition: transform .22s ease; }
.btn:hover .seta, .btn:focus-visible .seta,
.elo:hover .seta, .elo:focus-visible .seta { transform: translateX(4px); }

/* link de texto com sublinhado que cresce */
.elo {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: var(--t-cap);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--areia); text-decoration: none;
  padding-bottom: .2rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .28s ease;
}
.elo:hover, .elo:focus-visible { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .seta, .elo { transition: none; }
  .btn:hover, .btn:focus-visible { transform: none; }
}

/* --------------------------------------------------------------------------
   HEADER FIXO
   -------------------------------------------------------------------------- */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--h-header);
  display: flex;
  align-items: center;
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
/* sobre o hero: transparente, texto branco */
.topo__grid {
  width: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: #fff;
  margin-right: auto;
  flex: 0 0 auto;
}
/* monograma tipográfico — o número da casa, não um ícone de biblioteca */
.marca__num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
  padding-right: .7rem;
  border-right: 1px solid currentColor;
  opacity: .95;
}
.marca__nome {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.marca__local {
  display: block;
  font-family: var(--f-corpo);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .82;
  line-height: 1.3;
}

.nav { display: none; }
.nav ul {
  display: flex; align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none; margin: 0; padding: 0;
}
.nav a {
  color: inherit;
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 600;
  padding: .4rem 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .26s ease;
}
.nav a:hover, .nav a:focus-visible { background-size: 100% 1.5px; }

.topo .btn { min-height: 44px; padding: .6rem 1.15rem; font-size: .9375rem; }
.topo__cta { display: none; }

/* estado rolado: fundo sólido claro */
.topo--solido {
  background: rgba(244, 241, 234, .96);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--linha);
  box-shadow: 0 6px 24px -18px rgba(42, 46, 48, .6);
}
.topo--solido .marca,
.topo--solido .nav { color: var(--fachada); }
/* o CTA nunca herda a cor do header — branco sobre --manga é 5,43:1 */
.topo .btn--primary { color: #fff; }
.topo--solido .marca__num { opacity: 1; color: var(--areia); border-right-color: var(--linha-forte); }
.topo--solido .marca__local { color: var(--mato); opacity: 1; }
.topo--solido :focus-visible { outline-color: var(--manga); }

@media (min-width: 60rem) {
  .nav { display: block; margin-inline: auto; }
  .topo__cta { display: inline-flex; }
}

/* hambúrguer */
.hamburguer {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  margin-left: auto;
}
.topo--solido .hamburguer { color: var(--fachada); }
.hamburguer span {
  display: block; height: 2px; width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease;
}
.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 60rem) { .hamburguer { display: none; } }
@media (prefers-reduced-motion: reduce) { .hamburguer span { transition: none; } }

/* painel do menu mobile */
.menu {
  position: fixed;
  inset: var(--h-header) 0 auto 0;
  z-index: 49;
  background: var(--fachada);
  color: var(--cal);
  padding: 1.5rem 0 2rem;
  transform: translateY(-120%);
  visibility: hidden;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility .32s;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6);
}
.menu[data-aberto="true"] { transform: none; visibility: visible; }
.menu ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.menu li + li { border-top: 1px solid rgba(244, 241, 234, .14); }
.menu a:not(.btn) {
  display: block;
  padding: .95rem 0;
  color: var(--cal);
  text-decoration: none;
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 600;
}
.menu a:not(.btn):hover, .menu a:not(.btn):focus-visible { color: var(--areia-clara); }
.menu :focus-visible { outline-color: var(--areia-clara); }
@media (min-width: 60rem) { .menu { display: none; } }
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } }

/* --------------------------------------------------------------------------
   HERO — foto real fullscreen com gradiente direcional
   O overlay NÃO é chapado (§13.1): escurece a base/esquerda e some no topo/direita,
   preservando o céu da foto e garantindo AA no texto.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--h-header) + 2rem) 0 clamp(2.5rem, 7vw, 4.5rem);
  isolation: isolate;
  background: var(--fachada); /* cor de espera enquanto a foto carrega */
  overflow: hidden;
}
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  z-index: -2;
}
/* No mobile a tela é estreita e alta: o texto sobe para o céu e a casa fica
   com a faixa de baixo só para ela. Sem isso o bloco de texto cai exatamente
   em cima da fachada — que é a foto que o anúncio precisa mostrar. */
@media (max-width: 767px) {
  .hero {
    align-items: flex-start;
    padding-top: calc(var(--h-header) + 1.25rem);
    padding-bottom: 0;
    min-height: 100svh;
  }
  .hero__foto { object-position: 50% 100%; }
  .hero__conteudo { padding-bottom: clamp(2rem, 8vw, 3rem); }
  /* espaço reservado abaixo do conteúdo para a fachada aparecer inteira */
  .hero .container { padding-bottom: 31vh; }
}
/* dois gradientes: um vertical, forte na base; outro lateral, da esquerda */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top,
      rgba(20, 27, 33, .92) 0%,
      rgba(20, 27, 33, .78) 22%,
      rgba(20, 27, 33, .40) 48%,
      rgba(20, 27, 33, .10) 72%,
      rgba(20, 27, 33, 0) 100%),
    linear-gradient(to right,
      rgba(20, 27, 33, .70) 0%,
      rgba(20, 27, 33, .34) 42%,
      rgba(20, 27, 33, 0) 78%);
}

/* No mobile o texto está em cima, então o escuro também: a base fica limpa
   para a fachada aparecer com a cor real dela. */
@media (max-width: 767px) {
  .hero::before {
    background:
      linear-gradient(to bottom,
        rgba(20, 27, 33, .82) 0%,
        rgba(20, 27, 33, .72) 34%,
        rgba(20, 27, 33, .42) 56%,
        rgba(20, 27, 33, .12) 72%,
        rgba(20, 27, 33, 0) 86%);
  }
}

.hero__conteudo { max-width: 34ch; color: #fff; }

.selo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 100px;
  padding: .45rem 1rem;
  max-width: 100%;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  backdrop-filter: blur(4px);
  background: rgba(20, 27, 33, .28);
}
.selo::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--areia-clara);
  flex: 0 0 auto;
}

.hero h1 {
  color: #fff;
  margin: 0 0 1.1rem;
  text-shadow: 0 2px 24px rgba(15, 21, 26, .45);
}
.hero__apoio {
  font-size: var(--t-lead);
  color: #fff;                /* sólido, não rgba: texto com alpha sobre foto derruba o Lighthouse */
  max-width: 40ch;
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  text-wrap: pretty;
}

/* O hero no mobile é vertical e a foto precisa aparecer: o complemento
   do parágrafo só entra quando há largura sobrando. */
.so-desktop { display: none; }
@media (min-width: 768px) { .so-desktop { display: inline; } }

.hero__preco {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem .85rem;
  margin: 0 0 1.5rem;
  max-width: none;
}
.hero__valor {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
}
.hero__preco-nota {
  font-size: var(--t-cap);
  font-weight: 600;
  /* sólido: com .88 de alpha esta linha media 4,45:1 sobre a foto — abaixo de AA.
     Ver §10 do CLAUDE.md: alpha em texto passa no olho e falha no Lighthouse. */
  color: #fff;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(20, 27, 33, .55);
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* indicador de rolagem — some no mobile baixo */
.hero__rolar {
  position: absolute;
  right: max(1.25rem, calc(50vw - var(--largura) / 2));
  bottom: clamp(2.5rem, 7vw, 4.5rem);
  display: none;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-kicker);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;              /* sólido: alpha em texto derruba o Lighthouse */
  writing-mode: vertical-rl;
}
.hero__rolar::after {
  content: '';
  width: 1px; height: 3.5rem;
  background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0));
  animation: rolar 2.4s ease-in-out infinite;
}
@keyframes rolar {
  0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; }
  50%      { transform: scaleY(1);  transform-origin: top; opacity: 1; }
}
@media (min-width: 60rem) { .hero__rolar { display: flex; } }
@media (prefers-reduced-motion: reduce) { .hero__rolar::after { animation: none; } }

@media (min-width: 60rem) {
  .hero { align-items: center; }
  .hero__conteudo { max-width: 38ch; }
}

/* --------------------------------------------------------------------------
   SOBRE O IMÓVEL — 2 colunas assimétricas + linha de estatísticas
   -------------------------------------------------------------------------- */
.sobre { padding: var(--pad-secao-larga) 0 var(--pad-secao); background: var(--cal); }
.sobre__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.sobre__texto p { max-width: 50ch; }

.sobre__moldura {
  position: relative;
  border-radius: var(--raio-foto);
  overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(42, 46, 48, .55);
}
.sobre__moldura img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.sobre__moldura:hover img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) { .sobre__moldura img { transition: none; } }
@media (prefers-reduced-motion: reduce) { .sobre__moldura:hover img { transform: none; } }

/* etiqueta que flutua sobre a foto */
.sobre__etiqueta {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--cal);
  padding: .85rem 1.35rem .8rem;
  border-top-right-radius: var(--raio-foto);
  max-width: 78%;
}
.sobre__etiqueta b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  color: var(--fachada);
}
.sobre__etiqueta span {
  display: block;
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mato);
  margin-top: .3rem;
}

/* linha de estatísticas com divisórias verticais */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 0;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linha);
  padding-top: clamp(1.5rem, 3.5vw, 2rem);
}
.stats li { padding-inline: 1.15rem; }
.stats li:first-child { padding-left: 0; }
.stats li + li { border-left: 1px solid var(--linha); }
.stats li:nth-child(3) { border-left: 0; padding-left: 0; }

.stats b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.15rem + 2.6vw, 2.85rem);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--fachada);
}
.stats b small { font-size: .42em; font-weight: 600; letter-spacing: 0; }
.stats span {
  display: block;
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--mato);
  margin-top: .4rem;
}

@media (min-width: 46rem) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stats li:nth-child(3) { border-left: 1px solid var(--linha); padding-left: 1.15rem; }
}
@media (min-width: 62rem) {
  .sobre__grid { grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* --------------------------------------------------------------------------
   FAIXA DE GALERIA — miniaturas em linha, scroll no mobile
   -------------------------------------------------------------------------- */
.faixa { padding: var(--pad-secao) 0; background: var(--cal-fundo); }
.faixa__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}
.faixa__cabeca h2 { margin: 0; }

.tira {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: .85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: .5rem;
  /* sangra até a borda no mobile */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}
.tira::-webkit-scrollbar { display: none; }
.tira > figure { margin: 0; scroll-snap-align: center; }
.tira__moldura {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-foto);
  background: var(--cal);
}
.tira img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.tira > figure:hover img { transform: scale(1.05); }
.tira figcaption {
  font-size: var(--t-cap);
  font-weight: 600;
  color: var(--mato);
  padding-top: .6rem;
  max-width: 32ch;
  /* duas linhas reservadas: sem isso as legendas curtas e longas
     deixam as fotos da linha com alturas diferentes */
  min-height: calc(2 * 1.4em + .6rem);
}
@media (min-width: 46rem) { .tira { grid-auto-columns: 42%; } }
@media (min-width: 62rem) {
  .tira {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: auto;
    gap: 1.75rem 1.25rem;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  /* grid assimétrico: as pares descem meia altura.
     As molduras têm proporção fixa, então as legendas de cada linha
     continuam alinhadas entre si — o deslocamento é ritmo, não desalinho. */
  .tira > figure:nth-child(even) { transform: translateY(2.25rem); }
  .tira > figure { align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .tira img { transition: none; }
  .tira > figure:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   A RÉGUA DOS 85 METROS — seção-herói (§1 do CLAUDE.md)
   O espaçamento entre marcos é PROPORCIONAL à distância real:
   rolar a página é medir o terreno com o corpo. NÃO alterar o calc().
   -------------------------------------------------------------------------- */
.regua {
  background: var(--ceu);
  color: var(--cal);
  padding: var(--pad-secao-larga) 0;
  position: relative;
  overflow: hidden;
}
.regua h2, .regua h3 { color: #fff; }
.regua .lead { color: rgba(244, 241, 234, .94); }
.regua .dado { color: #fff; }
/* o areia-clara não passa AA sobre o azul da régua — aqui vai a variante clara */
.regua .kicker--claro { color: var(--areia-regua); }

.regua__cabeca { max-width: 44rem; }
.regua__cabeca h2 { margin-bottom: 1rem; }
.regua__marca-dagua {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-dado);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: .86;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, .085);
  /* sobe só o suficiente para o H2 encostar sem cruzar as hastes altas */
  margin-bottom: -.52em;
  user-select: none;
}

.regua__trilha {
  list-style: none;
  margin: clamp(2rem, 5vw, 3.25rem) 0 0;
  padding: 0;
  position: relative;
  max-width: 46rem;
}
.regua__trilha::before {
  content: '';
  position: absolute;
  left: calc(5.5ch + 0.75rem);
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(rgba(244,241,234,.45) 0%, rgba(244,241,234,.45) 88%, transparent 100%);
}
.marco {
  position: relative;
  display: grid;
  grid-template-columns: 5.5ch 1fr;
  gap: 0 1.75rem;
  /* ⚠️ ESTE calc É O CONCEITO DO SITE — o vão entre marcos é a distância real */
  padding-block: calc(0.85rem + var(--m) * 0.28vh) 0;
}
.marco__num {
  font-family: var(--f-display);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.05rem;
  color: #CFE4F5; /* 5,5:1 sobre o azul */
  text-align: right;
  padding-top: .15em;
}
.marco::before {
  content: '';
  position: absolute;
  left: calc(5.5ch + 0.75rem - 3px);
  top: calc(0.85rem + var(--m) * 0.28vh + 0.55em);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cal);
  box-shadow: 0 0 0 5px var(--ceu);
}
.marco h3 { margin: 0 0 .3rem; }
.marco p { font-size: var(--t-body); color: rgba(244,241,234,.9); margin: 0; max-width: 40ch; }
.marco--fim h3 { font-size: var(--t-h2); }
.marco--fim::before {
  width: 14px; height: 14px;
  background: var(--areia-clara);
  left: calc(5.5ch + 0.75rem - 6px);
}

/* comparação de escala */
.escala { margin: clamp(2.5rem, 6vw, 4rem) 0 0; max-width: 46rem; }
.escala__linha { margin-bottom: .65rem; }
.escala__barra {
  display: flex; align-items: center;
  height: 2.6rem;
  width: calc(var(--pct) * 1%);
  min-width: max-content;
  background: #1B4470; /* mais escuro que a régua: branco fica legível */
  border-radius: 2px;
  padding-inline: .8rem;
}
.escala__barra--este { background: var(--mato); }
.escala__barra b {
  font-family: var(--f-corpo); font-weight: 600;
  font-size: var(--t-cap); line-height: 1;
  white-space: nowrap; color: #fff;
  font-variant-numeric: lining-nums tabular-nums;
}
.escala figcaption {
  font-size: var(--t-cap);
  color: #CFE4F5; /* 5,5:1 sobre o azul */
  margin-top: .85rem;
}

/* revelação dos marcos (só com JS ativo) */
.js .marco { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.js .marco.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .marco { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Seções genéricas
   -------------------------------------------------------------------------- */
.secao { padding: var(--pad-secao) 0; }
.secao--larga { padding-block: var(--pad-secao-larga); }
.secao--cal { background: var(--cal); }
.secao--fundo { background: var(--cal-fundo); }
.secao--escura { background: var(--fachada); color: var(--cal); }
.secao--escura h2, .secao--escura h3 { color: #fff; }
.secao--escura a:not(.btn) { color: var(--ceu-claro); }

.secao__cabeca { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); max-width: 46rem; }

/* par de conteúdo: texto + foto */
.par { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 52rem) {
  .par { grid-template-columns: 1.25fr 1fr; }
  .par--invertido { grid-template-columns: 1fr 1.25fr; }
  .par--invertido > *:first-child { order: 2; }
}
.par__foto {
  border-radius: var(--raio-foto);
  overflow: hidden;
  box-shadow: 0 26px 52px -32px rgba(42, 46, 48, .5);
  margin: 0;
}
.par__foto img { width: 100%; height: auto; }
.par__foto figcaption {
  font-size: var(--t-cap);
  font-weight: 600;
  color: var(--mato);
  padding: .75rem .25rem 0;
}

/* --------------------------------------------------------------------------
   BARRA DE DESTAQUES — rótulo em duas linhas, sem ícone (§13.4)
   O elemento gráfico é um numeral em Alegreya e um traço fino.
   -------------------------------------------------------------------------- */
.destaques {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(244, 241, 234, .18);
  border: 1px solid rgba(244, 241, 234, .18);
  border-radius: var(--raio);
  overflow: hidden;
}
.destaque {
  background: var(--fachada);
  padding: clamp(1.15rem, 3vw, 1.75rem) clamp(1rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transition: background-color .3s ease;
}
.destaque:hover { background: var(--fachada-esc); }
.destaque__marca {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.35rem;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  color: var(--areia-clara);
  margin-bottom: .5rem;
  letter-spacing: -0.02em;
}
.destaque b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem);
  line-height: 1.15;
  color: #fff;
}
.destaque span {
  font-size: var(--t-cap);
  font-weight: 500;
  color: rgba(244, 241, 234, .82);
  line-height: 1.4;
}
@media (min-width: 40rem) { .destaques { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .destaques { grid-template-columns: repeat(6, 1fr); } }
@media (prefers-reduced-motion: reduce) { .destaque { transition: none; } }

/* detalhamento em texto sob os destaques */
.itens {
  list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0;
  display: grid; gap: 1.75rem;
}
@media (min-width: 42rem) { .itens { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .itens { grid-template-columns: repeat(3, 1fr); } }
.item { border-top: 2px solid var(--linha-forte); padding-top: 1.1rem; }
.item__num {
  font-family: var(--f-display); font-weight: 700;
  font-size: 2rem; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--areia); display: block; margin-bottom: .35rem;
}
.item h3 { margin: 0 0 .4rem; }
.item p { font-size: var(--t-body); margin: 0; }

.secao--escura .item { border-top-color: rgba(244, 241, 234, .28); }
.secao--escura .item__num { color: var(--areia-clara); }
.secao--escura .item p { color: rgba(244, 241, 234, .88); }

/* --------------------------------------------------------------------------
   Slots de foto que ainda faltam (edícula por dentro · frutíferas)
   -------------------------------------------------------------------------- */
.slot { margin: 0; }
.slot__moldura {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-foto);
  background: var(--cal-fundo);
}
.slot__vazio {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: .4rem;
  text-align: center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(63,107,58,.07) 11px 22px),
    #EDE8DC;
  border: 1px dashed rgba(63,107,58,.35);
  border-radius: var(--raio-foto);
}
.slot__num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1; color: var(--mato);
}
.slot__rot {
  font-family: var(--f-corpo); font-weight: 600;
  font-size: var(--t-cap); letter-spacing: .1em;
  text-transform: uppercase; color: var(--mato);
}
/* quando a foto chegar, o placeholder some sozinho */
.slot__moldura:has(img) .slot__vazio { display: none; }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot figcaption {
  font-size: var(--t-cap); font-weight: 600;
  color: var(--mato); padding-top: .6rem;
}

/* --------------------------------------------------------------------------
   Ficha técnica
   -------------------------------------------------------------------------- */
.ficha { display: grid; gap: 2rem 2.5rem; }
@media (min-width: 48rem) { .ficha { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .ficha { grid-template-columns: repeat(3, 1fr); } }
.ficha__bloco h3 {
  font-size: var(--t-h3);
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--areia);
  margin-bottom: .85rem;
}
.ficha__lista { list-style: none; margin: 0; padding: 0; }
.ficha__lista li {
  padding: .45rem 0;
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-body);
  font-variant-numeric: lining-nums tabular-nums;
}
.ficha__lista li::before { content: '— '; color: var(--areia); }

/* --------------------------------------------------------------------------
   Distâncias
   -------------------------------------------------------------------------- */
.distancias { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.distancias li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-body);
}
.distancias b {
  font-family: var(--f-display); font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.regua .distancias li { border-bottom-color: rgba(244, 241, 234, .2); }

/* --------------------------------------------------------------------------
   Palavra do dono
   -------------------------------------------------------------------------- */
.dono {
  background: var(--cal);
  border-left: 4px solid var(--manga);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--raio);
  box-shadow: 0 24px 48px -36px rgba(42, 46, 48, .5);
}
.dono p:last-of-type { margin-bottom: 1.75rem; }
.dono__assinatura {
  font-family: var(--f-display);
  font-size: var(--t-cap);
  font-style: italic;
  color: var(--mato);
  margin: 1.25rem 0 0;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 48rem; }
.faq details {
  border-bottom: 1px solid var(--linha);
  padding: .35rem 0;
}
.faq summary {
  font-family: var(--f-display);
  font-size: var(--t-h3); font-weight: 600;
  padding: 1rem 2.5rem 1rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color .2s ease;
}
.faq summary:hover { color: var(--areia); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute; right: .5rem; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border-right: 2px solid var(--areia);
  border-bottom: 2px solid var(--areia);
  transform: rotate(45deg);
  transition: transform .28s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > p { padding: 0 0 1rem; margin: 0 0 .5rem; }
@media (prefers-reduced-motion: reduce) {
  .faq summary, .faq summary::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Fechamento — sobre foto
   -------------------------------------------------------------------------- */
.fechamento {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding-block: var(--pad-secao-larga);
  color: #fff;
  background: var(--fachada);
  overflow: hidden;
}
.fechamento__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
.fechamento::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(20,27,33,.94) 0%, rgba(20,27,33,.80) 45%, rgba(20,27,33,.66) 100%);
}
.fechamento h2 { color: #fff; margin-bottom: 1.5rem; }
.fechamento p { margin-inline: auto; }
.fechamento .kicker { color: var(--areia-clara); }
.fechamento .dado { color: #fff; margin-bottom: .35rem; display: block; }
.fechamento__nota {
  font-size: var(--t-cap);
  color: #fff;              /* sólido: alpha em texto derruba o Lighthouse */
  font-weight: 600;
  margin-bottom: 2.25rem;
}

/* --------------------------------------------------------------------------
   Barra fixa mobile
   -------------------------------------------------------------------------- */
.barra-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: var(--cal);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -8px 24px -12px rgba(48, 60, 71, .35);
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.barra-cta.visivel { transform: none; }
.barra-cta__preco {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.3rem; line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--fachada);
}
.barra-cta__preco small {
  display: block; font-family: var(--f-corpo);
  font-size: .7rem; font-weight: 600;
  color: var(--mato); letter-spacing: .03em;
}
.barra-cta .btn { flex: 1; padding-inline: 1rem; }
@media (min-width: 60rem) { .barra-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .barra-cta { transition: none; } }

/* --------------------------------------------------------------------------
   RODAPÉ ESCURO + FAIXA DE SELOS
   -------------------------------------------------------------------------- */
.selos {
  background: var(--fachada-esc);
  color: var(--cal);
  padding: clamp(2rem, 5vw, 3rem) 0;
  border-bottom: 1px solid rgba(244, 241, 234, .12);
}
.selos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1.5rem;
  list-style: none; margin: 0; padding: 0;
}
.selo-item b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.15;
  color: #fff;
}
.selo-item span {
  display: block;
  font-size: var(--t-cap);
  color: rgba(244, 241, 234, .82);
  margin-top: .2rem;
}
.selo-item::before {
  content: '';
  display: block;
  width: 1.75rem; height: 2px;
  background: var(--areia-clara);
  margin-bottom: .85rem;
}
@media (min-width: 46rem) { .selos__grid { grid-template-columns: repeat(4, 1fr); } }

.rodape {
  background: var(--fachada);
  color: rgba(244, 241, 234, .82);
  padding: clamp(2.25rem, 5vw, 3rem) 0;
  font-size: var(--t-cap);
}
.rodape a:not(.btn) { color: #CFE4F5; } /* 5,4:1 sobre o fundo escuro */
.rodape .btn--primary { color: #fff; }  /* o CTA não herda o azul-claro dos links */
.rodape p { max-width: none; margin: 0 0 .5rem; }
.rodape strong { color: #fff; font-family: var(--f-display); font-size: 1.05rem; }
.rodape__grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
.rodape__legal { color: #B9BEC1; } /* 4,7:1 sobre --fachada */
@media (min-width: 52rem) {
  .rodape__grid { grid-template-columns: 1fr auto; }
  .rodape__acao { justify-self: end; }
}

/* --------------------------------------------------------------------------
   Revelação genérica ao rolar
   -------------------------------------------------------------------------- */
.js .revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
.js .revela.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .revela { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Banner de cookies — componente canônico No Mapa
   ⚠️ A regra [hidden] é OBRIGATÓRIA: sem ela o display:flex vence o hidden
   e o banner nunca fecha (bug que já quebrou 4 protótipos).
   -------------------------------------------------------------------------- */
.cookie-banner[hidden] { display: none; }

.cookie-banner {
  position: fixed;
  /* Encostado na borda inferior. No mobile o hero tem 100svh e o preço + CTA
     ficam na base da tela: qualquer `bottom` folgado joga o banner por cima
     deles no primeiro acesso, que é justamente o tráfego pago. */
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  justify-content: space-between;
  background: var(--cal);
  color: var(--granito);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -10px 40px rgba(48, 60, 71, .18);
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  font-size: .85rem;
}
.cookie-banner__text { margin: 0; flex: 1 1 240px; max-width: none; }
.cookie-banner__text a { color: var(--ceu); }
.cookie-banner__actions { display: flex; gap: .6rem; flex-shrink: 0; }
.cookie-banner .btn { min-height: 42px; padding: .55rem 1.1rem; font-size: .9rem; }
/* no desktop não existe barra fixa nem hero apertado: volta a ser cartão flutuante */
@media (min-width: 60rem) {
  .cookie-banner {
    left: 1rem; right: 1rem; bottom: 1rem;
    max-width: 720px;
    margin-inline: auto;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: 0 10px 40px rgba(48, 60, 71, .22);
    padding: 1.1rem 1.3rem;
  }
}

/* --------------------------------------------------------------------------
   Página interna (privacidade) — header sólido desde o topo
   -------------------------------------------------------------------------- */
.pagina-interna { padding-top: var(--h-header); padding-bottom: 0; }
.pagina-interna .topo { position: static; }
.pagina-interna .prosa h2 {
  font-size: clamp(1.35rem, 1.2rem + .7vw, 1.7rem);
  margin-top: 2.25rem;
}
.pagina-interna .prosa h2:first-of-type { margin-top: 0; }

/* ==========================================================================
   GUIA — artigos
   Páginas de conteúdo em /guia/. Reaproveitam header, rodapé, banner de cookies
   e todos os tokens da LP: o guia precisa parecer o mesmo site, não um blog.
   Diferença de uso: aqui a pessoa LÊ. Coluna estreita (~66ch), entrelinha maior
   e hierarquia H2/H3 mais espaçada que na LP, que é feita para escanear.
   ========================================================================== */

.artigo { padding: clamp(2rem, 5vw, 3.25rem) 0 var(--pad-secao); background: var(--cal); }

/* cabeçalho do artigo — mesma gramática do .secao__cabeca, com trilha acima */
.artigo__cabeca {
  width: min(100% - 2.5rem, 44rem);
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
}
.artigo__cabeca h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  margin-bottom: 1rem;
}
.artigo__resumo {
  font-size: var(--t-lead);
  color: var(--granito);
  max-width: 54ch;
  text-wrap: pretty;
}

/* trilha de navegação (breadcrumb visível) */
.trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .5rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: var(--t-cap);
  font-weight: 600;
  color: var(--mato);
}
.trilha li { display: flex; align-items: center; gap: .5rem; }
.trilha li + li::before { content: '/'; color: var(--linha-forte); }
.trilha a { color: var(--mato); text-decoration: none; border-bottom: 1px solid var(--linha-forte); }
.trilha a:hover, .trilha a:focus-visible { color: var(--areia); border-bottom-color: currentColor; }
.trilha [aria-current='page'] { color: var(--granito); }

/* corpo de leitura longa */
.prosa-artigo {
  width: min(100% - 2.5rem, 44rem);   /* ≈ 66ch no corpo */
  margin-inline: auto;
}
.prosa-artigo > p { max-width: none; line-height: 1.72; margin: 0 0 1.15rem; }
.prosa-artigo h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.05rem);
  margin: clamp(2.5rem, 5vw, 3.25rem) 0 .85rem;
}
.prosa-artigo h3 {
  font-size: clamp(1.15rem, 1.06rem + .45vw, 1.35rem);
  margin: 2rem 0 .6rem;
}
.prosa-artigo ul:not([class]) { margin: 0 0 1.25rem; padding-left: 1.15rem; }
.prosa-artigo ul:not([class]) li { margin-bottom: .5rem; line-height: 1.65; }
.prosa-artigo ul:not([class]) li::marker { color: var(--areia); }
.prosa-artigo figure { margin: clamp(1.75rem, 4vw, 2.5rem) 0; }
.prosa-artigo figure img { border-radius: var(--raio-foto); width: 100%; }
.prosa-artigo figcaption {
  font-size: var(--t-cap);
  font-weight: 600;
  color: var(--mato);
  padding-top: .6rem;
}
.prosa-artigo .distancias { margin: 1.5rem 0 1.75rem; }

/* nota lateral: o "vou ser honesto sobre isso" do artigo */
.nota {
  border-left: 3px solid var(--areia);
  background: var(--cal-fundo);
  padding: 1.15rem 1.35rem .35rem;
  border-radius: 0 var(--raio) var(--raio) 0;
  margin: clamp(1.75rem, 4vw, 2.25rem) 0;
}
.nota p { max-width: none; font-size: var(--t-body); }
.nota strong { color: var(--fachada); }

/* --------------------------------------------------------------------------
   Bloco de oferta dentro do artigo — destacado do corpo, mas sem virar banner
   -------------------------------------------------------------------------- */
.oferta {
  background: var(--fachada);
  color: var(--cal);
  border-radius: var(--raio-foto);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  margin: clamp(2.25rem, 5vw, 3rem) 0;
  box-shadow: 0 26px 52px -34px rgba(42, 46, 48, .55);
}
.oferta .kicker { color: var(--areia-clara); margin-bottom: .85rem; }
.oferta h2, .oferta p:first-of-type { margin-top: 0; }
.oferta__titulo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 .75rem;
  max-width: 30ch;
}
.oferta p { color: #E6E2D8; max-width: 46ch; }  /* 10,4:1 sobre --fachada */
/* ⚠️ o link do corpo NÃO pode herdar --ceu aqui: azul #286097 sobre --fachada
   dá 1,72:1, medido na tela. Mesma armadilha do §10 — o olho não pega. */
.oferta a:not(.btn) { color: #CFE4F5; }   /* 8,0:1 sobre --fachada */

.oferta__numeros {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 1rem;
  margin: 1.5rem 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(244, 241, 234, .22);
}
.oferta__numeros b {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.oferta__numeros span {
  display: block;
  font-size: var(--t-cap);
  font-weight: 600;
  color: #D3CEC2;   /* 8,3:1 sobre --fachada */
  margin-top: .3rem;
}
.oferta__nota {
  font-size: var(--t-cap);
  color: #D3CEC2;
  margin: .9rem 0 0;
}
@media (min-width: 34rem) { .oferta__numeros { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   Continue lendo — discreto, no fim do artigo
   -------------------------------------------------------------------------- */
.continue { padding: var(--pad-secao-curta) 0 var(--pad-secao); background: var(--cal-fundo); }
.continue__titulo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-h3);
  margin: 0 0 1.25rem;
}
.continue__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--linha);
  border-block: 1px solid var(--linha);
}
.continue__lista li { background: var(--cal-fundo); }
.continue__lista a {
  display: block;
  padding: 1rem .25rem;
  text-decoration: none;
  color: var(--granito);
}
.continue__lista a:hover, .continue__lista a:focus-visible { color: var(--ceu); }
.continue__lista b {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.25;
  color: inherit;
}
.continue__lista span {
  display: block;
  font-size: var(--t-cap);
  color: var(--mato);
  margin-top: .2rem;
}
@media (min-width: 48rem) { .continue__lista { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   Índice do guia (hub)
   -------------------------------------------------------------------------- */
.guia-cards {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 48rem) { .guia-cards { grid-template-columns: repeat(2, 1fr); } }

.guia-card {
  background: var(--cal-fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio-foto);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.guia-card:hover, .guia-card:focus-within {
  border-color: var(--linha-forte);
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -30px rgba(42, 46, 48, .5);
}
.guia-card__num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.6rem;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  color: var(--areia);
  margin-bottom: .6rem;
}
.guia-card h2 {
  font-size: clamp(1.2rem, 1.08rem + .55vw, 1.45rem);
  margin: 0 0 .55rem;
}
.guia-card h2 a { color: var(--fachada); text-decoration: none; }
.guia-card h2 a:hover, .guia-card h2 a:focus-visible { color: var(--ceu); }
.guia-card p { font-size: var(--t-body); margin: 0 0 1rem; max-width: none; }
.guia-card .elo { margin-top: auto; }
@media (prefers-reduced-motion: reduce) {
  .guia-card { transition: none; }
  .guia-card:hover, .guia-card:focus-within { transform: none; }
}

/* link "Ver a casa" no header do guia — sem virar segundo botão laranja */
.topo__voltar {
  display: none;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.topo__voltar:hover, .topo__voltar:focus-visible { color: var(--manga); }
.topo--solido .topo__voltar { color: var(--fachada); }
@media (min-width: 60rem) { .topo__voltar { display: inline-block; } }

/* no guia a barra fixa mostra o preço e leva ao anúncio, não ao WhatsApp direto */
.barra-cta--guia .btn { flex: 0 1 auto; }

/* --------------------------------------------------------------------------
   Rodapé — links do guia da região
   Entram no rodapé de propósito: é conteúdo de apoio, não pode competir com o
   CTA. Serve também de trilha para o Google descobrir /guia/.
   -------------------------------------------------------------------------- */
.rodape__guia { margin-top: 1.75rem; }
.rodape__guia-titulo {
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--areia-clara);
  margin: 0 0 .6rem;
}
.rodape__guia ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: .15rem;
}
/* alvo de toque >= 44px com espaçamento — o Lighthouse reprova links de lista
   colados um no outro (falha target-size). O padding faz a área, não a fonte. */
.rodape__guia a {
  color: #fff;
  text-decoration: none;
  font-size: var(--t-cap);
  display: inline-block;
  padding-block: .55rem;
  min-height: 24px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .25s ease;
}
.rodape__guia a:hover,
.rodape__guia a:focus-visible { background-size: 100% 1px; }
.rodape__guia-mais { margin: .6rem 0 0; }
.rodape__guia-mais a {
  color: var(--areia-clara);
  font-weight: 700;
  display: inline-block;
  padding-block: .55rem;
}