:root {
    --cor: #ff5a1f;
    --fundo: #f7f5f2;
    --texto: #1b1b1f;
    --suave: #5f5f6b;
    --cartao: #ffffff;
    --borda: #e6e2dc;
    --wa: #1faa59;
}
@media (prefers-color-scheme: dark) {
    :root { --fundo: #121214; --texto: #f2f2f4; --suave: #a3a3ad; --cartao: #1c1c20; --borda: #2c2c33; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fundo); color: var(--texto); line-height: 1.5;
}
main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 48px 16px 32px; }
h1 { font-size: clamp(1.75rem, 6vw, 2.4rem); line-height: 1.15; margin: 16px 0 12px; letter-spacing: -0.02em; }
.sub { color: var(--suave); font-size: 1.05rem; margin: 0 0 24px; }
a { color: inherit; }

.selo {
    display: inline-block; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: .9rem;
    background: color-mix(in srgb, var(--cor) 14%, transparent); color: var(--cor);
}
.acoes { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 28px; }
.btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; padding: 14px 20px; border-radius: 14px;
    font-weight: 700; font-size: 1.05rem; text-decoration: none; text-align: center;
    transition: transform .12s ease, filter .12s ease;
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn:active { transform: scale(.98); }
.btn-principal { background: var(--wa); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--wa) 35%, transparent); }
.btn-principal:hover { filter: brightness(1.06); }
.btn-secundario { background: var(--cartao); color: var(--texto); border: 1.5px solid var(--borda); }
.desativado { background: var(--borda); color: var(--suave); box-shadow: none; cursor: default; }

.beneficios { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.beneficios li { padding-left: 30px; position: relative; }
.beneficios li::before {
    content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; font-size: .8rem; font-weight: 700;
    background: color-mix(in srgb, var(--cor) 16%, transparent); color: var(--cor);
}
.gratis { color: var(--suave); font-size: .9rem; }

.cards { display: grid; gap: 12px; }
.card {
    display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
    padding: 16px; border-radius: 16px; background: var(--cartao); border: 1.5px solid var(--borda); text-decoration: none;
}
.card:hover { border-color: var(--cor); }
.card-emoji { grid-row: span 2; font-size: 1.8rem; }
.card span:last-child { color: var(--suave); font-size: .9rem; }

.texto p { color: var(--suave); }
.rodape { padding: 24px 16px 32px; text-align: center; font-size: .8rem; color: var(--suave); max-width: 560px; margin: 0 auto; }
.rodape p { margin: 4px 0; }