/* ==========================================================================
   Kronos by Tegra — Landing Page
   JTavares Consultoria Imobiliária

   Regras do design system (Manual IDV, seções 3-5) que governam este arquivo:
   · Paleta institucional fechada: vermelho #F04D47, preto, cinza #EBEDED, branco.
     O vermelho é ACENTO — nunca fundo dominante de página inteira.
   · Space Grotesk única. Bold = títulos · Medium = apoio · Light = texto corrido.
   · Cantos RETOS (raio 0). Sem gradientes. Sem blur.
   · Proteção de texto sobre foto: bloco SÓLIDO, nunca gradiente.
   · Animação sóbria: fade + translação curta, cubic-bezier(.4,0,.2,1), 150-250ms.
   · Assinatura da marca: foto mascarada pelo próprio símbolo (a porta).

   Tema único e claro, por decisão de projeto: é peça de campanha e o manual
   define uma só aparência de marca.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --k-vermelho: #F04D47;
  --k-vermelho-hover: #D9403A;
  --k-preto: #000000;
  --k-preto-suave: #1A1A1A;
  --k-cinza: #EBEDED;
  --k-cinza-medio: #C7CBCB;
  --k-cinza-texto: #6B7070;
  --k-branco: #FFFFFF;

  /* Verde do WhatsApp. Fora da paleta institucional de propósito — ver .zap__botao. */
  --k-zap: #25D366;
  --k-zap-escuro: #1DA851;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 200ms;

  --wrap: 75rem;
  --read: 52rem;

  --pad-band: clamp(3.5rem, 8vw, 7rem);
  --pad-side: clamp(1.25rem, 4vw, 3rem);

  --header-h: 4.5rem;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  /* pretty evita órfã na última linha; balance ficaria só nos títulos. */
  text-wrap: pretty;
  background: var(--k-branco);
  color: var(--k-preto-suave);
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--k-vermelho);
  outline-offset: 3px;
}

/* ---------- Tipografia ----------
   A assinatura tipográfica é a tensão entre display muito fechado (-0.035em)
   e microrrótulos muito abertos (+0.18em). Mesma família, leituras opostas. */
.display {
  font-weight: 700;
  font-size: clamp(2.4rem, 6.2vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.h2 {
  font-weight: 700;
  font-size: clamp(1.7rem, 3.8vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.h3 {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.label {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
}

.lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.2rem);
  line-height: 1.65;
}

.muted { color: var(--k-cinza-texto); }
.tnum { font-variant-numeric: tabular-nums; }

/* NOTA DE CASCATA: as regras abaixo do tipo ".container p" têm especificidade
   (0,1,1) e venciam .label / .pgto__pct (0,1,0), achatando os microrrótulos e os
   percentuais. Por isso excluem explicitamente os parágrafos com classe. */

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-side);
}

.band { padding-block: var(--pad-band); }
.band--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.band--cinza { background: var(--k-cinza); }
.band--preto { background: var(--k-preto); color: var(--k-branco); }
.band--preto .muted { color: var(--k-cinza-medio); }

.band-head { max-width: var(--read); }
.band-head .label { color: var(--k-vermelho); }
.band-head .h2 { margin-top: 0.75rem; }
.band-head p:not(.label) { margin-top: 1.1rem; }
.band--preto .band-head .h2 { color: var(--k-branco); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn--primario {
  background: var(--k-vermelho);
  color: var(--k-branco);
  border-color: var(--k-vermelho);
}
.btn--primario:hover { background: var(--k-vermelho-hover); border-color: var(--k-vermelho-hover); }

.btn--contorno {
  background: transparent;
  color: var(--k-preto);
  border-color: var(--k-cinza-medio);
}
.btn--contorno:hover { border-color: var(--k-preto); }

.btn--claro {
  background: transparent;
  color: var(--k-branco);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--claro:hover { border-color: var(--k-branco); background: rgba(255, 255, 255, 0.08); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------- Faixa de prévia (só em MODO_PREVIA) ---------- */
.previa-faixa {
  background: var(--k-preto-suave);
  color: var(--k-branco);
  border-bottom: 2px solid var(--k-vermelho);
  padding: 0.7rem var(--pad-side);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  font-size: 0.8125rem;
}
.previa-faixa strong {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-vermelho);
}
.previa-faixa span { color: var(--k-cinza-medio); }

/* ---------- Cabeçalho fixo ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--k-branco);
  border-bottom: 1px solid var(--k-cinza);
}

.topo__in {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.topo__marca { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }
.topo__marca img { height: 26px; width: auto; }
.topo__marca span {
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-left: 0.9rem;
  border-left: 1px solid var(--k-cinza-medio);
}

.topo__nav { margin-left: auto; display: flex; gap: clamp(0.9rem, 1.6vw, 1.6rem); }
.topo__nav a {
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--k-cinza-texto);
  transition: color var(--dur) var(--ease);
}
.topo__nav a:hover, .topo__nav a.ativo { color: var(--k-preto); }

.topo__cta { flex-shrink: 0; }
.topo__cta .btn { padding-block: 0.7rem; }

.topo__burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--k-cinza-medio);
  padding: 0.55rem 0.8rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 74rem) {
  .topo__nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--k-branco);
    border-bottom: 1px solid var(--k-cinza);
    padding: 0.5rem var(--pad-side) 1.25rem;
    display: none;
  }
  .topo__nav.aberto { display: flex; }
  .topo__nav a { padding-block: 0.7rem; font-size: 0.95rem; border-bottom: 1px solid var(--k-cinza); }
  .topo__burger { display: block; }
  .topo__cta { display: none; }
}

/* ---------- Hero ----------
   Composição em dois blocos: painel sólido preto com o texto, foto sangrando
   ao lado. Proteção por bloco sólido, como manda o manual — sem gradiente. */
.hero { background: var(--k-preto); color: var(--k-branco); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  min-height: min(78vh, 44rem);
}

.hero__texto {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 38rem;
  margin-left: auto;
  width: 100%;
}

/* Lockup da marca em duas linhas: o nome domina, "by Tegra" apoia com tracking
   aberto. Uppercase grande pede tracking neutro, não o negativo dos títulos. */
.hero__marca { margin: 0; }
.hero__marca-nome {
  display: block;
  font-weight: 700;
  font-size: clamp(3.1rem, 8.4vw, 6.1rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero__marca-by {
  display: block;
  margin-top: 0.45rem;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.9vw, 1.35rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--k-vermelho);
}

.hero__tagline {
  margin-top: 1.5rem;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--k-branco);
}

.hero__sub {
  margin-top: 0.9rem;
  max-width: 36ch;
  font-size: 0.9375rem;
  color: var(--k-cinza-medio);
}

/* Urgência: régua vermelha em vez de bloco preenchido, para não competir com
   os dois botões vermelhos logo abaixo. */
.hero__urgencia {
  margin-top: 1.9rem;
  padding-left: 1.25rem;
  border-left: 4px solid var(--k-vermelho);
}
.hero__antecipe {
  font-weight: 700;
  font-size: clamp(1.45rem, 2.7vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--k-branco);
}
.hero__data {
  margin-top: 0.45rem;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  color: var(--k-vermelho);
}

.hero__dados {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  gap: 0.9rem;
}
.hero__dados div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.8rem; }
.hero__dados dt { color: var(--k-vermelho); }
.hero__dados dd { margin: 0; font-weight: 500; }

.hero__preco { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }

.hero__foto { position: relative; min-height: 20rem; }
.hero__foto picture,
.hero__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* O interesse do render está na base — acesso, portaria e assinatura Kronos. */
  object-position: 50% 72%;
}

@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__foto { min-height: 58vw; order: -1; }
  .hero__texto { max-width: none; margin-left: 0; }
}

/* ---------- Assinatura: foto mascarada pelo símbolo (a porta) ---------- */
.porta {
  --porta-w: min(30rem, 78vw);
  width: var(--porta-w);
  aspect-ratio: 485 / 366;
  -webkit-mask-image: url("../img/marca/simbolo-preto.png");
  mask-image: url("../img/marca/simbolo-preto.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  margin: 0;
}
.porta img,
.porta picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.conceito__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 62rem) {
  .conceito__grid { grid-template-columns: 1fr; }
}

.creditos {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  gap: 0.75rem;
}
.creditos div { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; align-items: baseline; }
.creditos dt { color: var(--k-vermelho); }
.creditos dd { margin: 0; font-weight: 500; font-size: 0.95rem; }

/* ---------- Números do empreendimento ---------- */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--k-cinza-medio);
  border: 1px solid var(--k-cinza-medio);
  margin-top: 3rem;
}
.numeros > div { background: var(--k-branco); padding: 1.5rem 1.25rem; }
.numeros strong {
  display: block;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap; /* "5.038 m²" não pode quebrar e desalinhar a régua */
}
.numeros span { display: block; margin-top: 0.5rem; font-size: 0.875rem; color: var(--k-cinza-texto); }

.band--cinza .numeros > div { background: var(--k-cinza); }

/* ---------- Figura larga ---------- */
.figura { margin-top: 3rem; }
.figura img { width: 100%; height: auto; }
.figura figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--k-cinza-texto);
}

.figura--alta img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }

/* ---------- Localização ---------- */
.local__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: 3rem;
}
@media (max-width: 62rem) { .local__grid { grid-template-columns: 1fr; } }

.proximidades { display: grid; gap: 1px; background: var(--k-cinza-medio); border: 1px solid var(--k-cinza-medio); }
.proximidades li {
  background: var(--k-branco);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}
.proximidades b { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; white-space: nowrap; }
.proximidades span { color: var(--k-cinza-texto); font-size: 0.9375rem; }

.mapa { width: 100%; height: auto; border: 1px solid var(--k-cinza-medio); background: var(--k-cinza); }

/* ---------- Tipologias ---------- */
.tipos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.tipo {
  border: 1px solid var(--k-cinza-medio);
  background: var(--k-branco);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur) var(--ease);
}
.tipo:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }

.tipo__foto { aspect-ratio: 4 / 3; overflow: hidden; }
.tipo__foto picture { display: block; height: 100%; }
.tipo__foto img { width: 100%; height: 100%; object-fit: cover; }

.tipo__corpo { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.tipo__corpo .label { color: var(--k-vermelho); }
.tipo__area {
  margin-top: 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.tipo__attrs { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--k-cinza-texto); }
.tipo__planta {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--k-cinza);
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--k-vermelho);
  background: none;
  border-inline: none;
  border-bottom: none;
  padding-inline: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.tipo__planta:hover { color: var(--k-vermelho-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Lazer ---------- */
.lazer__grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--k-cinza-medio);
  border: 1px solid var(--k-cinza-medio);
  margin-top: 3rem;
}
.lazer__grupo { background: var(--k-branco); padding: 1.75rem 1.5rem; }
.lazer__grupo .label { color: var(--k-vermelho); }
.lazer__grupo ul { margin-top: 1.1rem; display: grid; gap: 0.65rem; }
.lazer__grupo li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.9375rem;
}
.lazer__grupo li::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 1px;
  background: var(--k-vermelho);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
/* Os <img> carregam width/height como atributos (evita layout shift). Esses
   atributos mapeiam para as PROPRIEDADES CSS width/height, então a altura deixa
   de ser auto e o aspect-ratio passa a ser ignorado. Onde recortamos por
   aspect-ratio, height:auto é obrigatório. */
.galeria picture { display: block; }
.galeria img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* Rooftop — bloco de impacto */
.rooftop { position: relative; margin-top: 0; }
.rooftop picture { display: block; }
.rooftop img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 60%; }
.rooftop__selo {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--k-preto);
  color: var(--k-branco);
  padding: 1.5rem 2rem;
  max-width: 26rem;
}
.rooftop__selo strong {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.rooftop__selo p:not(.label) { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--k-cinza-medio); }
@media (max-width: 46rem) {
  .rooftop img { aspect-ratio: 4 / 3; }
  .rooftop__selo { position: static; max-width: none; }
}

/* ---------- Diferenciais ---------- */
.difs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 3rem;
}
.difs > div { background: var(--k-preto); padding: 1.6rem 1.5rem; }
.difs h3 { color: var(--k-branco); }
.difs p:not(.label) { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--k-cinza-medio); }

/* ---------- A Barra ---------- */
.barra__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 62rem) { .barra__grid { grid-template-columns: 1fr; } }

.barra__foto { margin-top: 0; }
.barra__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 62rem) {
  .barra__foto img { aspect-ratio: 16 / 10; }
}

.qualidades {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem 1.5rem;
}
.qualidades li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.9375rem;
}
.qualidades li::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 1px;
  background: var(--k-vermelho);
  transform: translateY(-0.3em);
}

/* ---------- Pagamento ---------- */
.pgto__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.pgto__bloco { border: 1px solid var(--k-cinza-medio); padding: 1.75rem 1.5rem; background: var(--k-branco); }
.pgto__pct {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--k-vermelho);
}
.pgto__bloco h3 { margin-top: 0.75rem; }
.pgto__bloco p:not(.pgto__pct) { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--k-cinza-texto); }

.fluxo { margin-top: 2.5rem; border: 1px solid var(--k-cinza-medio); background: var(--k-branco); }
.fluxo__topo {
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid var(--k-cinza-medio);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}
.fluxo__topo strong { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.025em; }
.fluxo__linhas { display: grid; }
.fluxo__linha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  border-bottom: 1px solid var(--k-cinza);
  font-size: 0.9375rem;
}
.fluxo__linha:last-child { border-bottom: none; }
.fluxo__linha b { font-weight: 500; }
.fluxo__barra { height: 3px; background: var(--k-cinza); grid-column: 1 / -1; }
.fluxo__barra i { display: block; height: 100%; background: var(--k-vermelho); }

/* ---------- Quem constrói ---------- */
.assinaturas {
  display: grid;
  /* 6 créditos: 20rem fecha em 3+3 e não deixa célula vazia na última fileira. */
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1px;
  background: var(--k-cinza-medio);
  border: 1px solid var(--k-cinza-medio);
  margin-top: 3rem;
}
.assinaturas > div { background: var(--k-branco); padding: 1.5rem; }
.assinaturas .label { color: var(--k-cinza-texto); }
.assinaturas h3 { margin-top: 0.6rem; font-size: 1.05rem; }
.assinaturas p:not(.label) { margin-top: 0.45rem; font-size: 0.875rem; color: var(--k-cinza-texto); }
.assinaturas small { display: block; margin-top: 0.5rem; font-size: 0.75rem; color: var(--k-cinza-medio); }

/* ---------- FAQ ---------- */
.faq { margin-top: 3rem; border-top: 1px solid var(--k-cinza-medio); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--k-cinza-medio); }
.faq summary {
  padding: 1.3rem 2.5rem 1.3rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: 1.0625rem;
  position: relative;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--k-vermelho); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 0.7rem;
  height: 1px;
  background: currentColor;
}
.faq summary::before {
  content: "";
  position: absolute;
  right: 0.72rem;
  top: 50%;
  width: 1px;
  height: 0.7rem;
  margin-top: -0.35rem;
  background: currentColor;
  transition: opacity var(--dur) var(--ease);
}
.faq details[open] summary::before { opacity: 0; }
.faq details > div { padding-bottom: 1.4rem; max-width: var(--read); color: var(--k-cinza-texto); }

/* ---------- Formulário ---------- */
.form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 62rem) { .form__grid { grid-template-columns: 1fr; } }

.campos { display: grid; gap: 1rem; margin-top: 2rem; }
.campo { display: grid; gap: 0.4rem; }
.campo label { font-size: 0.8125rem; font-weight: 500; }
.campo input, .campo select {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  padding: 0.85rem 1rem;
  border: 1px solid var(--k-cinza-medio);
  background: var(--k-branco);
  color: var(--k-preto);
  border-radius: 0;
  width: 100%;
  transition: border-color var(--dur) var(--ease);
}
.campo input:focus, .campo select:focus { border-color: var(--k-preto); }
.campo input::placeholder { color: var(--k-cinza-medio); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--k-cinza-texto);
}
.consent input { margin-top: 0.2rem; flex-shrink: 0; width: 1rem; height: 1rem; accent-color: var(--k-vermelho); }

.form__aviso { margin-top: 1rem; font-size: 0.75rem; color: var(--k-cinza-texto); }

.form__estado {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--k-vermelho);
  background: var(--k-cinza);
  font-size: 0.9375rem;
  display: none;
}
.form__estado.visivel { display: block; }

.band--preto .campo input,
.band--preto .campo select { background: var(--k-branco); }
.band--preto .consent { color: var(--k-cinza-medio); }
.band--preto .form__aviso { color: var(--k-cinza-medio); }
.band--preto .form__estado { background: var(--k-preto-suave); color: var(--k-branco); }

/* ---------- Escassez ---------- */
.escassez__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
}
@media (max-width: 62rem) { .escassez__grid { grid-template-columns: 1fr; } }
.escassez__foto { position: relative; min-height: 18rem; }
.escassez__foto picture,
.escassez__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.escassez__texto { padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem); background: var(--k-preto); color: var(--k-branco); }

/* ---------- WhatsApp flutuante ---------- */
.zap {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 70;
}
/* Verde do WhatsApp e só o ícone, como no site principal. É a única cor fora
   da paleta institucional na página: aqui o verde não decora, identifica o
   canal — trocá-lo por preto ou vermelho custaria reconhecimento. Redondo pelo
   mesmo motivo, apesar de a marca pedir cantos retos em todo o resto. */
.zap__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  padding: 0;
  background: var(--k-zap);
  color: var(--k-branco);
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  transition: background-color var(--dur) var(--ease);
}
.zap__botao:hover { background: var(--k-zap-escuro); }
.zap__botao svg { width: 1.9rem; height: 1.9rem; flex-shrink: 0; }


/* ---------- Modal de planta ---------- */
.planta {
  width: min(64rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--k-branco);
  color: var(--k-preto-suave);
  overflow: auto;
}
.planta::backdrop {
  /* Sólido, não desfocado: o manual da marca não usa blur nem transparência
     como recurso. Para desfocar, acrescentar: backdrop-filter: blur(6px); */
  background: rgba(0, 0, 0, 0.88);
}

.planta__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--k-cinza);
}
.planta__topo .label { color: var(--k-vermelho); }
.planta__area {
  margin-top: 0.4rem;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.planta__attrs { margin-top: 0.35rem; font-size: 0.9375rem; color: var(--k-cinza-texto); }

.planta__fechar {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--k-cinza-medio);
  color: var(--k-preto);
  font-family: inherit;
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.planta__fechar:hover { border-color: var(--k-preto); background: var(--k-cinza); }

.planta__figura { padding: 0.75rem; background: var(--k-cinza); }
.planta__figura img {
  width: 100%;
  height: auto;
  /* Os arquivos de planta já vêm com margem branca generosa; apertar o padding
     e soltar a altura faz a planta ocupar de fato a tela. */
  max-height: 74vh;
  object-fit: contain;
  margin-inline: auto;
  background: var(--k-branco);
}

.planta__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.75rem 1.5rem;
  border-top: 1px solid var(--k-cinza);
}
.planta__rodape p { font-size: 0.875rem; color: var(--k-cinza-texto); max-width: 40ch; }

@media (max-width: 40rem) {
  .planta__topo, .planta__figura, .planta__rodape { padding-inline: 1.1rem; }
  .planta__rodape .btn { width: 100%; }
}

/* ---------- Rodapé ---------- */
.rodape { background: var(--k-preto); color: var(--k-cinza-medio); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.rodape__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.rodape .label { color: var(--k-vermelho); }
.rodape h3 { color: var(--k-branco); margin-top: 0.7rem; font-size: 1.05rem; }
.rodape p:not(.label) { margin-top: 0.5rem; font-size: 0.9375rem; }
.rodape img { height: 30px; width: auto; }
.rodape__links { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.rodape__links a { font-size: 0.875rem; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 2px; }
.rodape__links a:hover { color: var(--k-branco); border-bottom-color: var(--k-branco); }
.rodape__legal { margin-top: 2rem; font-size: 0.75rem; line-height: 1.6; color: var(--k-cinza-texto); max-width: 62rem; }
.rodape__legal p + p { margin-top: 0.6rem; }

/* ---------- Revelação em scroll (sóbria) ----------
   Opt-in: o estado oculto só existe depois que o JS marca <html class="js-anim">.
   Sem JS, ou se o script falhar, a página inteira continua visível — numa LP de
   captação, conteúdo invisível por erro de script seria perda direta de lead. */
.js-anim .rev {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.js-anim .rev.visivel { opacity: 1; transform: none; }

/* ---------- Utilitários ---------- */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 100;
  background: var(--k-preto);
  color: var(--k-branco);
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  font-size: 0.875rem;
  transition: top var(--dur) var(--ease);
}
.pular:focus { top: 0.5rem; }