/* ==========================================================================
   /form: página que hospeda o formulário do CRM.
   Assinatura do Torres Neto em cima e o embed logo abaixo, os dois no centro
   da tela, sobre o mesmo fundo da primeira dobra da home. Sem borda, sem fundo e sem sombra atrás do formulário: o visual
   dele vem de dentro do iframe.
   ========================================================================== */

@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/GeneralSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/GeneralSans-Bold.woff2") format("woff2");
}

:root {
  --tn-fundo: #0F0A02;
  --tn-ouro: #DDB682;
  --tn-texto: #DCD4CD;
  --tn-separador: #5E4520;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  overflow-x: hidden;
}

/* Centraliza nos dois eixos com margin:auto num container flex. Diferente de
   align-items:center, isso não corta o topo quando o formulário cresce além da
   altura da tela: as margens automáticas zeram e a página rola normalmente.
   O svh desconta a barra do navegador no celular, que o vh ignora. */
html { background: var(--tn-fundo); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  background: transparent;
  color: #fff;
  font-family: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Fundo igual ao da primeira dobra da home: mesma foto, mesmo enquadramento.
   Fica num pseudo-elemento fixo para manter o tamanho da tela mesmo quando
   uma etapa longa do formulário faz a página rolar. No body, o cover
   acompanharia a altura total e daria zoom na foto. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("/assets/img/hero-desktop.webp");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width: 1024px) {
  body::before {
    background-image: url("/assets/img/hero-mobile.webp");
    background-position: bottom center;
    background-size: contain;
  }
}

.tn-form {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.tn-form__assinatura {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--tn-texto);
  text-align: center;
}
.tn-form__assinatura strong { color: var(--tn-ouro); font-weight: 700; }
.tn-form__sep { color: var(--tn-separador); }

/* A altura do iframe é definida pelo próprio formulário, por postMessage.
   Nada de min-height aqui: ele venceria a altura informada e sobraria espaço
   morto embaixo do formulário. */
.tn-form iframe {
  width: 100%;
  border: 0;
  display: block;
  background: none;
}

@media (max-width: 767px) {
  body { padding: 20px 16px; }
  .tn-form { gap: 12px; }
  .tn-form__assinatura { font-size: 0.8125rem; column-gap: 8px; }
}

/* Telas muito estreitas: a assinatura não cabe numa linha. Em vez de deixar o
   separador pendurado no fim da primeira linha, empilha as duas partes. */
@media (max-width: 359px) {
  .tn-form__assinatura { flex-direction: column; align-items: center; }
  .tn-form__sep { display: none; }
}

/* Até 1024px o fundo usa a foto vertical ancorada embaixo, e o formulário
   centralizado cobria o rosto do Torres. Aqui ele sobe para o topo e a foto
   aparece por baixo. Fica só um respiro mínimo para o texto não colar na borda,
   e o safe-area evita que ele entre embaixo do notch no iPhone.
   Precisa ficar no fim do arquivo: a regra base do .tn-form e o padding do
   body no bloco de 767px viriam depois e desfariam este ajuste. */
@media (max-width: 1024px) {
  body { padding-top: max(16px, env(safe-area-inset-top)); }
  .tn-form { margin: 0 auto auto; }
}