:root {
  --wine: #882038;
  --wine-lift: #A8283F;
  --wine-focus: #C43D59;
  --cream: #F8F8F0;
  --cream-dim: #D0C8C0;
  --bg: #141114;
  --surface: #1D181B;
  --rule: rgba(248, 248, 240, .11);
  --flare: #F2C063;
  --serif: 'PT Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --gutter: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--cream); font: 400 17px/1.6 var(--sans); overflow-wrap: break-word; }
:focus-visible { outline: 3px solid var(--wine-focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.16; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
.shell { width: 100%; max-width: 1040px; margin-inline: auto; padding-inline: var(--gutter); }
.fim .so-bf { display: none !important; }

.confirmacao { display: flex; align-items: center; gap: 10px; padding-block: 18px 0; color: var(--cream-dim); font-size: .95rem; }
.confirmacao i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--wine); position: relative; }
.confirmacao i::after { content: ''; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid var(--cream); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.topo { padding-block: 24px 56px; }
.grade { display: grid; gap: 24px; align-items: start; }
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--flare); }
h1 { font-size: 2.05rem; margin-top: 10px; }
.lead { color: var(--cream-dim); margin-top: 12px; max-width: 58ch; }

.oferta { background: var(--surface); border: 1px solid var(--wine-lift); border-radius: 14px; overflow: hidden; }
.oferta-topo { background: var(--wine); padding: 12px 20px; font-weight: 700; letter-spacing: .12em; font-size: .86rem; }
.oferta-corpo { padding: 20px; }
.oferta h2 { font-size: 1.3rem; }
.inclui { color: var(--cream-dim); margin-top: 6px; }
.preco { font-family: var(--serif); font-weight: 700; font-size: 4rem; line-height: 1; color: var(--flare); margin-top: 14px; }
.preco small { font-size: .36em; margin-right: 4px; vertical-align: .9em; }
.aceitar { display: block; width: 100%; min-height: 58px; margin-top: 18px; padding: 12px 16px; background: var(--wine); border: 1px solid var(--wine-lift); border-radius: 10px; color: var(--cream); font: 700 1.06rem/1.25 var(--sans); cursor: pointer; transition: background .15s; }
.aceitar:hover { background: var(--wine-lift); }
.aviso { font-size: .86rem; line-height: 1.45; color: var(--cream-dim); margin-top: 12px; }
.recusar { display: block; width: 100%; min-height: 44px; margin-top: 8px; background: none; border: 0; color: var(--cream-dim); font: 400 .95rem/1.3 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.recusar:hover { color: var(--cream); }

section { padding-block: 48px; border-top: 1px solid var(--rule); }
section h2 { font-size: 1.7rem; }
.itens { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 18px; }
.itens p, .cuidados li { color: var(--cream-dim); }
.itens h3 { font-size: 1.14rem; margin-bottom: 2px; }
.cuidados { margin: 18px 0 0; padding-left: 20px; display: grid; gap: 10px; max-width: 70ch; }

/* Páginas de obrigado e de ajuda */
.passos { list-style: none; counter-reset: passo; padding: 0; margin: 22px 0 0; display: grid; gap: 20px; max-width: 70ch; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; }
.passos li::before { content: counter(passo); grid-row: span 2; font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--flare); }
.passos h3 { font-size: 1.14rem; }
.passos p { color: var(--cream-dim); margin-top: 2px; }
.botao-link { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 20px; padding: 12px 22px; background: var(--wine); border: 1px solid var(--wine-lift); border-radius: 10px; color: var(--cream); font-weight: 700; text-decoration: none; text-align: center; transition: background .15s; }
.botao-link:hover { background: var(--wine-lift); }
.nota { color: var(--cream-dim); margin-top: 12px; max-width: 62ch; font-size: .95rem; }
.link { color: var(--flare); font-weight: 600; text-underline-offset: 4px; }
.perguntas { margin-top: 20px; border-top: 1px solid var(--rule); max-width: 76ch; }
details { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; padding: 18px 28px 18px 0; font-weight: 600; position: relative; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 2px; top: 13px; font-size: 1.5rem; color: var(--flare); }
details[open] summary::after { content: '\2212'; }
details p { color: var(--cream-dim); padding-bottom: 18px; }
details p + p { margin-top: -8px; }

footer { border-top: 1px solid var(--rule); padding-block: 32px 40px; color: var(--cream-dim); font-size: .88rem; }
footer p + p { margin-top: 8px; }
.pendente { color: var(--flare); border: 1px dashed var(--flare); border-radius: 4px; padding: 0 6px; }

@media (min-width: 880px) {
  :root { --gutter: 28px; }
  .topo { padding-block: 44px 72px; }
  .grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; }
  h1 { font-size: 3rem; }
  .lead { font-size: 1.12rem; margin-top: 16px; }
  .itens { grid-template-columns: 1fr 1fr; gap: 24px 40px; }
}
@media (prefers-reduced-motion: reduce) { .aceitar, .botao-link { transition: none; } }
