/* Base compartilhada pelas duas versões da landing page do Sansa Living.
   ─────────────────────────────────────────────────────────────────────────
   Aqui ficam: as fontes, as três cores do kit da MTG, o botão, o formulário,
   o FAQ, o visor em tela cheia e o rodapé legal. A "pele" de cada versão
   (fundo, ritmo, escala tipográfica) mora no CSS da própria versão.        */

/* ── Fontes ─────────────────────────────────────────────────────────────────
   As duas são variáveis e vêm de ../Marca/fontes/ (kit da MTG).

   ⚠️ A Black Mango não serve para algarismo: o "2" dela tem barra reta e
   diagonal, e "2 Quartos" lê "Z Quartos"; o "1" some, e "101" lê "IOI"
   (descoberto ao migrar a Linha de Tabela, 19/08/2026). Em vez de confiar na
   disciplina de quem escreve o HTML, o `unicode-range` abaixo simplesmente
   NÃO declara os dígitos U+30–U+39 para ela: qualquer número dentro de um
   título em Black Mango cai automaticamente na Libre Franklin. A armadilha
   deixa de existir.                                                        */
@font-face {
  font-family: 'Black Mango';
  src: url('../fontes/BlackMango-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0-2F, U+3A-10FFFF;   /* tudo, menos 0-9 */
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('../fontes/LibreFranklin-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* ── Cores ──────────────────────────────────────────────────────────────────
   As três do manual (`../Marca/LEIA-ME.md`), mais o ocre clareado que o totem
   usa sobre fundo escuro — o ocre puro tem só 2,6 de contraste ali e não
   passa em texto. Todo o resto é mistura destas com branco.                */
:root {
  --ocre: #914521;
  --ocre-claro: #c97a4c;
  --marrom: #4f352a;
  --bege: #edceb7;
  --branco: #fff;

  --papel: #f7ece1;              /* bege lavado, para leitura longa */
  --linha: color-mix(in srgb, var(--marrom) 22%, var(--bege));
  --suave: color-mix(in srgb, var(--marrom) 60%, var(--bege));
  --barra: color-mix(in srgb, var(--marrom) 12%, var(--bege));
  --verde-whats: #2b994f;

  --largura: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --curva: cubic-bezier(.22, 1, .36, 1);
}

/* ── Reset curto ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, .55vw + 13px, 18px);
  line-height: 1.62;
  color: var(--marrom);
  background: var(--papel);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 400; }
p { margin: 0 0 1em; }
figure { margin: 0; }
table { border-collapse: collapse; }

.display { font-family: 'Black Mango', 'Libre Franklin', serif; font-weight: 400; }
/* Números sempre em Libre Franklin, alinhados em coluna. */
.num { font-family: 'Libre Franklin', sans-serif; font-variant-numeric: tabular-nums; }

.centro { width: min(100% - var(--gutter) * 2, var(--largura)); margin-inline: auto; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Foco visível em qualquer skin. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Revelar ao rolar ───────────────────────────────────────────────────── */
/* O estado escondido depende de `html.js`, ligado por revelar() em comum.js:
   sem JS, ou se o JS quebrar, nada fica invisível. */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--curva), transform .8s var(--curva);
}
.js [data-revelar].visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-revelar] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Botões ─────────────────────────────────────────────────────────────── */
.bt {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .85em 1.7em;
  border: 1px solid transparent; border-radius: 999px;
  font-size: .95rem; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--curva);
}
.bt:hover { transform: translateY(-2px); }
.bt-whats { background: var(--verde-whats); color: #fff; }
.bt-whats:hover { background: #23843f; }
.bt-claro { background: var(--bege); color: var(--marrom); }
.bt-claro:hover { background: var(--branco); }
.bt-ocre { background: var(--ocre); color: var(--branco); }
.bt-ocre:hover { background: #7d3a1b; }
.bt-linha { border-color: currentColor; background: transparent; }
.bt-linha:hover { background: currentColor; }
.bt-linha:hover > * { color: var(--papel); }

.bt svg { width: 1.15em; height: 1.15em; fill: currentColor; }

/* ── Lista de tipologias, dentro do FAQ ─────────────────────────────────────
   Era uma tabela de quatro colunas. Virou lista em 20/08/2026: a página não
   publica linha de tabela, só o "a partir de" de cada tipologia.            */
.lista-tipos { list-style: none; margin: 0 0 1.2em; padding: 0; }
.lista-tipos li {
  padding: .55em 0; border-bottom: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .9em;
}
.lista-tipos b { font-weight: 500; color: var(--ocre); }
.lista-tipos span {
  font-size: .92em; color: var(--suave);
  font-variant-numeric: tabular-nums;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-item + .faq-item { margin-top: 8px; }
.faq-item h3 { margin: 0; font-size: 1rem; }
.faq-item button {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1em; padding: 1.05em 1.3em;
  background: var(--barra); border: 0; border-radius: 4px;
  text-align: left; cursor: pointer;
  font-size: clamp(1rem, .35vw + .92rem, 1.15rem); font-weight: 500;
  color: var(--ocre);
  transition: background-color .25s;
}
.faq-item button:hover { background: color-mix(in srgb, var(--marrom) 20%, var(--bege)); }
.faq-item button i {
  flex: 0 0 auto; width: 13px; height: 13px; position: relative;
}
.faq-item button i::before, .faq-item button i::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor; transition: transform .3s var(--curva);
}
.faq-item button i::after { transform: rotate(90deg); }
.faq-item button[aria-expanded="true"] i::after { transform: rotate(0deg); }
.faq-r > div { padding: 1.1em 1.3em 1.6em; font-size: .97em; }
.faq-r p:last-child { margin-bottom: 0; }

/* ── Formulário ─────────────────────────────────────────────────────────── */
.form-campos { display: grid; gap: 12px; }
.form-campos input {
  width: 100%; padding: .95em 1.1em;
  font: inherit; color: inherit;
  background: transparent;
  border: 1px solid var(--linha); border-radius: 3px;
}
.form-campos input::placeholder { color: var(--suave); opacity: 1; }
.form-campos input:focus { border-color: var(--ocre); outline: none; }
.form-aviso { min-height: 1.4em; margin: .8em 0 0; font-size: .88rem; }
.form-aviso.erro { color: #a12b1b; }
.form-aviso.ok { color: var(--ocre); font-weight: 500; }
.bt[disabled] { opacity: .55; cursor: progress; transform: none; }
.form-lgpd { margin: 1em 0 0; font-size: .78rem; line-height: 1.5; color: var(--suave); }

/* ── Visor em tela cheia ────────────────────────────────────────────────── */
.visor {
  position: fixed; inset: 0; z-index: 90;
  display: none; place-items: center;
  padding: clamp(14px, 4vw, 56px);
  background: color-mix(in srgb, #17110d 93%, transparent);
  backdrop-filter: blur(3px);
}
.visor.aberto { display: grid; }
.visor figure {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 100%; max-height: 100%;
}
.visor img {
  max-width: 100%; max-height: calc(100vh - 150px);
  object-fit: contain; border-radius: 2px;
  animation: visor-entra .45s var(--curva);
}
@keyframes visor-entra { from { opacity: 0; transform: scale(.985); } }
.visor figcaption {
  color: var(--bege); font-size: .92rem; text-align: center; max-width: 60ch;
}
.visor figcaption b { color: var(--branco); font-weight: 500; }
.visor button {
  position: absolute; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bege) 14%, transparent);
  color: var(--bege); border: 0; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.visor button:hover { background: var(--bege); color: var(--marrom); }
.visor-x {
  top: clamp(10px, 2vw, 26px); right: clamp(10px, 2vw, 26px);
  width: 44px; height: 44px; border-radius: 50%; font-size: 1.7rem; line-height: 1;
}
.visor-nav {
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; font-size: 1.3rem;
}
.visor-ant { left: clamp(6px, 2vw, 26px); }
.visor-prox { right: clamp(6px, 2vw, 26px); }
@media (max-width: 640px) {
  .visor-nav { top: auto; bottom: 12px; transform: none; width: 46px; height: 46px; }
  .visor img { max-height: calc(100vh - 210px); }
}

/* ── Nota legal ─────────────────────────────────────────────────────────── */
.legal { font-size: .72rem; line-height: 1.58; }
.legal h2 {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.1em;
}
.legal-inc { margin: 0 0 1em; }
.legal-itens { margin: 0; padding-left: 1.5em; }
.legal-itens li { margin-bottom: .6em; }
.legal-itens li:last-child { margin-bottom: 0; }
/* Em tela larga a nota vira duas colunas: são 19 itens, e uma coluna só de
   letra miúda vira uma parede de texto. */
@media (min-width: 900px) {
  .legal-itens { columns: 2; column-gap: clamp(28px, 4vw, 60px); }
  .legal-itens li { break-inside: avoid; }
}

/* ── Créditos dos parceiros ─────────────────────────────────────────────── */
.parceiros {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: clamp(28px, 6vw, 76px);
}
.parceiro { text-align: center; }
.parceiro img { height: clamp(38px, 4.4vw, 58px); width: auto; margin: 0 auto .7em; }
.parceiro figcaption { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }

/* ── Botão flutuante de WhatsApp ────────────────────────────────────────── */
.zap {
  position: fixed; right: clamp(14px, 2.2vw, 28px); bottom: clamp(14px, 2.2vw, 28px);
  z-index: 60; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--verde-whats); color: #fff;
  box-shadow: 0 8px 26px rgb(23 17 13 / .28);
  transition: transform .25s var(--curva);
}
.zap:hover { transform: scale(1.07); }
.zap svg { width: 28px; height: 28px; fill: currentColor; }
@media print { .zap, .visor { display: none !important; } }