/* ---------------------------------------------------------------------------
   A VITRINE. Herda os tokens, a tipografia e os botões do styles.css — a
   página de venda e o app têm de parecer a mesma coisa, senão a primeira
   impressão do app é a de ter entrado noutro lugar.
--------------------------------------------------------------------------- */

body.vitrine { background: var(--fundo); color: var(--texto); font-family: var(--ui); }
body.vitrine main { max-width: 900px; margin: 0 auto; padding: 0 16px 40px; }
body.vitrine section { margin: 0 0 48px; }
body.vitrine h2 {
  margin: 0 0 6px; font-family: var(--display); font-weight: 800;
  font-size: 26px; letter-spacing: -0.02em;
}
body.vitrine .sub { margin: 0 0 16px; color: var(--fraco); font-size: 15px; line-height: 1.45; }

.vitrine-topo { position: sticky; top: 0; z-index: 20; }
.vitrine-topo .marca { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 12px; }
.vitrine-topo .topo-entrar { margin-left: auto; text-decoration: none; }

/* ---------- herói ---------- */
.v-heroi { padding: 40px 0 8px; }
.v-heroi h1 {
  margin: 0 0 14px; font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 9vw, 56px); line-height: 1.03; letter-spacing: -0.035em;
}
.v-linha { margin: 0 0 22px; font-size: 17px; line-height: 1.5; max-width: 34em; color: var(--texto); }
.v-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.v-acoes .btn { text-decoration: none; }
.v-mini { margin: 8px 0 0; font-size: 13px; color: var(--fraco); line-height: 1.45; }
.v-mini a { color: var(--zarcao); }

/* ---------- a demonstração ---------- */
.v-demo {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 18px;
}
.v-demo-cab h2 { font-size: 22px; }
/* O palco e o cromo herdam .palco e .vistas do styles.css — é o mesmo
   desenho e a mesma barra do app, e essa é a ideia. Só a altura muda: aqui
   ele compete com o resto da página de venda. */
#v-palco { min-height: 300px; }
#v-palco svg { max-height: 360px; }
.v-carregando { color: var(--fraco); font-size: 14px; }

/* Os campos herdam .medidas, .campo, .passo e .segmento do styles.css — é
   literalmente a mesma caixa de medida do app. */
#v-campos { margin: 12px 0 4px; }
/* Réguas leves de propósito: o peso visual desta seção é o desenho, e
   quatro caixas com borda viravam um formulário. */
.v-reguas { display: grid; gap: 14px; margin: 14px 0 2px; }
@media (min-width: 620px) { .v-reguas { grid-template-columns: 1fr 1fr; } }
.v-regua span { display: block; margin-bottom: 4px; font-size: 13px; color: var(--fraco); }
.v-regua span b { color: var(--texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.v-regua input[type="range"] { width: 100%; accent-color: var(--zarcao); }

.v-saida {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda);
}
@media (min-width: 620px) { .v-saida { grid-template-columns: repeat(4, 1fr); } }
.v-num b { display: block; font: 700 18px var(--display); font-variant-numeric: tabular-nums; }
.v-num span { font-size: 12px; color: var(--fraco); }

/* ---------- uma medida, quatro papéis ---------- */
.v-quatro { display: grid; gap: 10px; }
@media (min-width: 620px) { .v-quatro { grid-template-columns: 1fr 1fr; } }
.v-papel {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px;
}
.v-quem {
  display: block; margin-bottom: 4px;
  font: 700 10px var(--ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--zarcao);
}
.v-papel b { display: block; font: 800 17px var(--display); letter-spacing: -0.01em; }
.v-papel p { margin: 5px 0 0; font-size: 14px; line-height: 1.45; color: var(--fraco); }

/* ---------- por que o número fecha ---------- */
.v-confianca .v-checks li b { color: var(--texto); }

/* ---------- a grade de produtos ---------- */
.v-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 620px) { .v-grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .v-grade { grid-template-columns: repeat(4, 1fr); } }
.v-cartao {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 10px;
}
.v-cartao:hover { border-color: var(--fraco); }
.v-mini-svg { display: block; height: 96px; }
.v-mini-svg svg { width: 100%; height: 100%; }
.v-nome { display: block; margin-top: 6px; font: 700 13px var(--ui); }
.v-var { display: block; font-size: 11px; color: var(--fraco); line-height: 1.35; }
.v-selo {
  position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 999px;
  background: var(--verde); color: #fff;
  font: 700 10px/1.6 var(--ui); letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- o plano ---------- */
.v-plano {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 22px;
}
.v-preco { margin: 6px 0 14px; font: 800 40px var(--display); letter-spacing: -0.03em; }
.v-preco span { font: 500 15px var(--ui); color: var(--fraco); }
.v-checks { margin: 0 0 18px; padding-left: 20px; }
.v-checks li { margin-bottom: 8px; line-height: 1.45; font-size: 15px; color: var(--fraco); }
.v-checks li::marker { color: var(--verde); }

.v-rodape {
  border-top: 1px solid var(--borda); padding: 20px 16px 32px;
  text-align: center; color: var(--fraco); font-size: 13px;
}
.v-rodape a { color: var(--fraco); }

/* ---------- as perguntas ---------- */
.v-faq details {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); margin-bottom: 8px; padding: 0 14px;
}
.v-faq summary {
  padding: 14px 0; cursor: pointer; list-style: none;
  font: 700 15px var(--ui); line-height: 1.35;
}
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after { content: '+'; float: right; margin-left: 12px; color: var(--zarcao); font-size: 20px; line-height: 1; }
.v-faq details[open] summary::after { content: '−'; }
.v-faq details p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--fraco); }

/* ---------- as páginas de texto ---------- */
.v-legal { max-width: 720px; }
.v-legal h1 { margin: 32px 0 8px; font-family: var(--display); font-weight: 800; font-size: 32px; letter-spacing: -0.03em; }
.v-legal h2 { margin: 30px 0 8px; font-size: 20px; }
.v-legal p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
.v-legal .v-checks { margin-bottom: 16px; }
.v-legal a { color: var(--zarcao); }

/* ---------- formulários das páginas de texto ---------- */
.v-form { margin: 0 0 20px; }
.v-form .campo { margin-bottom: 14px; }
.v-form textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 12px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--cartao); color: var(--texto);
  font: 400 15px/1.45 var(--ui);
}
.v-form textarea:focus { outline: 2px solid var(--zarcao); outline-offset: 1px; }
.v-form .aviso { margin-top: 12px; }
.v-legal .v-lista { margin: 0 0 16px; padding-left: 22px; }
.v-legal .v-lista li { margin-bottom: 8px; line-height: 1.5; font-size: 15px; color: var(--fraco); }
.v-legal .v-lista li b { color: var(--texto); }

/* Termos e privacidade dentro do aplicativo (regra 3.1.1): o texto de compra
   fica no .so-web, a versão do app no .so-app. A classe .nativo vem do user
   agent do WebView, posta no <head> de cada página antes de pintar. */
.so-app { display: none; }
.nativo .so-web { display: none !important; }
.nativo .so-app { display: block; }