@font-face { font-family: "Inter"; src: url("fontes/Inter-800.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fontes/Literata-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fontes/Literata-400i.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fontes/Literata-700.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fontes/Literata-700i.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
:root {  --primaria: #0B2545;  --sobre-primaria: #FFFFFF;  --secundaria: #1F4E8C;  --acento: #F5B700;  --sobre-acento: #111827;  --fundo: #F3F5F8;  --texto: #111827;  --superficie: #FFFFFF;  --suave: #E3E8EF;  --texto-suave: #4B5563;  --borda: #C5CFDB;  --texto-botao: #111827;
  --fonte-titulo: "Inter", serif;
  --fonte-corpo: "Literata", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte-corpo);
  font-size: 18px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
h1, h2 { font-family: var(--fonte-titulo); font-weight: 800; line-height: 1.15; }
h1 { font-size: clamp(30px, 6vw, 48px); margin: 0 0 16px; }
h2 { font-size: clamp(24px, 4.5vw, 32px); margin: 0 0 16px; }
p { margin: 0 0 14px; }
.topo { padding: 16px 20px; max-width: 1080px; margin: 0 auto; }
.logo svg { height: 40px; width: auto; }
main { max-width: 1080px; margin: 0 auto; padding: 0 20px 40px; }
.hero { display: grid; gap: 24px; align-items: center; padding: 24px 0 40px; }
.hero .sub { font-size: 20px; }
.hero-imagem { border-radius: 12px; }
.botao { display: inline-block; background: var(--acento); color: var(--texto-botao); font-weight: 700;
  text-decoration: none; padding: 16px 28px; border-radius: 10px; font-size: 19px; margin: 8px 0; }
.botao:focus-visible { outline: 3px solid var(--primaria); outline-offset: 3px; }
.garantia-curta { font-size: 15px; opacity: 0.85; }
.bloco { max-width: 760px; margin: 0 auto; padding: 36px 0; border-top: 1px solid rgba(0,0,0,0.08); }
.destaque, .oferta { background: var(--primaria); color: var(--sobre-primaria); border-radius: 16px;
  padding: 32px 24px; border-top: 0; }
.lista-check, .lista-x, .itens { padding: 0; list-style: none; margin: 0; }
.lista-check li, .lista-x li { padding-left: 30px; position: relative; margin: 0 0 10px; }
.lista-check li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; }
.lista-x li::before { content: "✗"; position: absolute; left: 0; font-weight: 700; }
.colunas { display: grid; gap: 24px; }
.itens li { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
.preco { font-family: var(--fonte-titulo); font-size: 40px; font-weight: 700; margin: 24px 0 0; }
.parcelas { font-size: 16px; }
.garantia { text-align: center; }
.autor { display: grid; gap: 20px; align-items: center; }
.autor img { border-radius: 50%; }
.faq details { border-bottom: 1px solid rgba(0,0,0,0.1); padding: 14px 0; }
.faq summary { font-weight: 700; cursor: pointer; }
.final { text-align: center; }
.rodape { text-align: center; font-size: 14px; padding: 32px 20px; opacity: 0.85; }
.rodape a { color: inherit; }
@media (min-width: 820px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; }
  .colunas { grid-template-columns: 1fr 1fr; }
  .autor { grid-template-columns: 160px 1fr; }
}

/* ajustes responsivos (pós-render) */
.botao { text-align: center; line-height: 1.3; }
.hero-imagem { width: 100%; max-width: 300px; margin: 0 auto; }
.autor { justify-items: start; }
.autor img { width: 112px; height: 112px; object-fit: cover; border: 1px solid var(--borda); }
.faq summary { padding: 4px 0; }
@media (max-width: 599px) {
  .botao { display: block; width: 100%; padding: 16px 18px; font-size: 18px; }
  .hero { padding-top: 8px; }
  .hero-imagem { max-width: 220px; }
  .hero .garantia-curta { text-align: center; }
  .destaque, .oferta { padding: 26px 18px; }
}
@media (min-width: 820px) {
  .hero-imagem { max-width: 380px; }
  .autor { grid-template-columns: 140px 1fr; }
  .autor img { width: 140px; height: 140px; }
}