/* Ralenti: página inicial. Estilo de página de produto: título enorme e centralizado, subtítulo cinza, dois botões,
 * seções limpas que alternam branco e cinza claro. Usa só os tokens de ralenti.css. Nada se mexe sozinho. */
html { scroll-behavior: auto; }
body { overflow-x: clip; }

.pular { position: absolute; left: var(--e4); top: -80px; z-index: 100; padding: var(--e3) var(--e5); background: var(--texto); color: #fff; border-radius: 999px; font-weight: 600; }
.pular:focus { top: var(--e3); }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.topo-in { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); min-height: 72px; }
.marca { display: block; text-decoration: none; color: var(--texto); }
.marca-px { margin: 0; font: 700 1.5rem/1 var(--rl-display); letter-spacing: -.03em; }
.topo .rl-btn { padding: 0 var(--e5); font-size: 1.0625rem; }

/* ---------- blocos ---------- */
section { padding: var(--e9) 0; }
section h2 { text-align: center; font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); letter-spacing: -.035em; margin: 0 auto var(--e7); max-width: 18ch; text-wrap: balance; }
.rl-btn { font-size: var(--t-corpo); }
.acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e4); margin: var(--e6) 0 var(--e5); }
.nota { margin: var(--e6) auto 0; color: var(--apoio); text-align: center; font-size: 1.0625rem; }
@media (max-width: 559px) { section { padding: var(--e8) 0; } .acoes { flex-direction: column; } .acoes .rl-btn { width: 100%; } }

/* hero: centralizado, título enorme */
.hero { padding: var(--e9) 0 var(--e8); text-align: center; }
.hero-grade { display: flex; flex-direction: column; align-items: center; }
.h-hero { font-size: clamp(2.875rem, 1.4rem + 6.4vw, 5.5rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 700; margin: 0 0 var(--e5); max-width: 12em; text-wrap: balance; }
.lead { font-size: var(--t-lead); line-height: 1.45; color: var(--apoio); max-width: 34ch; margin: 0 auto; text-wrap: balance; }
@media (min-width: 700px) { .lead { font-size: 1.625rem; max-width: 36ch; } }

/* o que ele faz: quatro cartões brancos sobre cinza */
.itens { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: var(--e4); max-width: var(--rl-largura); }
.itens li { max-width: none; background: #fff; border-radius: var(--rl-raio-card); padding: var(--e6); font-size: 1.1875rem; line-height: 1.5; color: var(--apoio); }
.itens li b { display: block; margin-bottom: var(--e2); font: 700 1.5rem/1.2 var(--rl-display); letter-spacing: -.02em; color: var(--texto); }
@media (min-width: 800px) { .itens { grid-template-columns: 1fr 1fr; gap: var(--e5); } .itens li { padding: var(--e7) var(--e7) var(--e7) var(--e7); } }

/* como começar: cinco passos em fila */
.passos { list-style: none; margin: 0 auto; padding: 0; counter-reset: passo; display: grid; gap: var(--e5); max-width: var(--rl-largura); }
.passos li { max-width: none; counter-increment: passo; display: flex; gap: var(--e4); align-items: center; font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; }
.passos li::before { content: counter(passo); flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--texto); color: #fff; font: 600 1.25rem/1 var(--rl-sans); }
@media (min-width: 900px) { .passos { grid-template-columns: repeat(5, 1fr); gap: var(--e6); } .passos li { flex-direction: column; align-items: center; text-align: center; gap: var(--e4); } }

/* dúvidas */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: var(--e3); }
.faq .rl-oque { margin: 0; box-shadow: none; border-radius: var(--rl-raio-card); }
.faq summary { font-size: var(--t-corpo); min-height: 64px; padding: var(--e3) var(--e5); border-radius: var(--rl-raio-card); }
.faq .rl-oque > :not(summary) { padding-inline: var(--e5); }
.faq .rl-oque > p:last-child { padding-bottom: var(--e5); color: var(--texto-2); }

/* rodapé */
.rodape { padding: var(--e5) 0; border-top: 1px solid var(--rl-linha-fraca); background: #fff; color: var(--texto); }
.rodape-in { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); }
.rodape-marca { font: 700 1.25rem/1 var(--rl-display); letter-spacing: -.03em; }
.rodape a { font-weight: 500; min-height: var(--rl-botao-h); display: inline-flex; align-items: center; }