/* Família em Equilíbrio · base visual A (editorial quente)
   Tokens e componentes compartilhados por venda, obrigado e quiz.
   Direção clara por decisão: não há tema escuro. */

:root {
  color-scheme: light;

  --fundo: #FAF6EF;
  --tinta: #2A1D16;
  --acento: #A4552E;
  --acento-escuro: #8A4524;
  --acento-suave: #F6E7DC;
  --suave: #6B5546;
  --linha: #E7DCCD;
  --sucesso: #1F7A55;
  --sucesso-escuro: #19654A;
  --branco: #FFFFFF;

  --raio: 12px;
  --fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

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

/* hidden vence qualquer display de componente (variantes ?h= e ?vsl=) */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Marca: símbolo (dois lugares sob o mesmo teto) + nome.
   O telhado e o chão herdam a cor do texto; as portas usam o acento. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  color: var(--tinta);
  text-decoration: none;
}
.marca-simbolo { width: 48px; height: 48px; flex: none; }
.marca-simbolo .portas { fill: var(--acento); }
.marca-txt { display: flex; flex-direction: column; line-height: 1; }
.marca-sup { font: 600 10px/1 var(--fonte-texto); letter-spacing: .32em; text-transform: uppercase; margin-bottom: 4px; }
.marca-nome { font: 600 26px/1 var(--fonte-titulo); letter-spacing: -.015em; }
.marca-sub { font: 500 9px/1 var(--fonte-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--suave); margin-top: 6px; white-space: nowrap; }
.marca-escura { color: #F3E9DC; }
.marca-escura .portas { fill: #E39A72; }
.marca-escura .marca-sub { color: #CDBBAA; }

.eyebrow {
  margin: 0 0 12px;
  color: var(--acento);
  font: 600 12px/1.2 var(--fonte-texto);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.titulo {
  margin: 0 0 12px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(28px, 6vw, 42px);
  line-height: 1.12;
  letter-spacing: -.01em;
}

.lead { margin: 0 0 20px; color: var(--suave); font-size: 18px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font: 600 16px/1.2 var(--fonte-texto);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }

.btn-primario { background: var(--acento); color: var(--branco); }
.btn-primario:hover { background: var(--acento-escuro); }

.btn-fantasma { background: transparent; color: var(--acento); border-color: var(--acento); }
.btn-fantasma:hover { background: var(--acento-suave); }

.btn-whatsapp { background: var(--sucesso); color: var(--branco); }
.btn-whatsapp:hover { background: var(--sucesso-escuro); }

.btn-bloco { display: flex; width: 100%; }

.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
}

.caixa-destaque {
  background: var(--acento-suave);
  border: 1px solid var(--acento);
  border-radius: var(--raio);
  padding: 16px 18px;
}
.caixa-destaque strong { display: block; font-size: 18px; }

/* Espaço reservado pra vídeo/foto que ainda não existe.
   Página com placeholder não recebe tráfego pago. */
.placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio);
  border: 1px dashed var(--acento);
  background: repeating-linear-gradient(135deg, #F1E6D8 0 12px, #EBDDCB 12px 24px);
  color: var(--acento);
  font: 600 13px/1.3 var(--fonte-texto);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px;
}
.placeholder::after { content: attr(data-placeholder); }
/* Vídeos verticais (9:16) gravados no celular */
.video-vertical {
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: var(--raio);
  background: var(--tinta);
  object-fit: cover;
}

.placeholder.linha { aspect-ratio: auto; min-height: 44px; display: inline-flex; }

.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;
}

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