/* Página de interesse do Rito. Cores, fontes e medidas pelos tokens da marca (marca/rito-tokens.css). */
:root { color-scheme: light; --sombra: 0 16px 48px color-mix(in srgb, var(--rito-cafe) 14%, transparent); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--rito-canvas); color: var(--rito-text); font-family: var(--rito-font-ui); font-size: 1.0625rem; line-height: 1.6; }
img { display: block; height: auto; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2 { color: var(--rito-cafe); font-family: var(--rito-font-editorial); font-weight: 400; line-height: 1.15; }
h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: var(--rito-space-8); }
h3 { color: var(--rito-cafe); font-size: 1.0625rem; font-weight: 600; margin-bottom: var(--rito-space-2); }
a { color: var(--rito-primary); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--rito-accent); outline-offset: 2px; }

.faixa { margin-inline: auto; max-width: 1120px; padding-inline: var(--rito-space-4); }
.faixa-estreita { max-width: 760px; }
.centro-texto { text-align: center; }

.botao { align-items: center; background: var(--rito-primary); border: 0; border-radius: var(--rito-radius-control); color: var(--rito-inverse); cursor: pointer; display: inline-flex; font: inherit; font-weight: 600; gap: var(--rito-space-2); justify-content: center; min-height: var(--rito-control-height); padding: 0 var(--rito-space-6); text-decoration: none; transition: background var(--rito-motion-duration); }
.botao:hover { background: var(--rito-primary-hover); }
.botao:disabled { opacity: .6; cursor: wait; }
.botao-compacto { min-height: 40px; padding: 0 var(--rito-space-4); font-size: .9375rem; }
.botao-grande { min-height: 52px; width: 100%; font-size: 1.0625rem; }
.botao-claro { background: var(--rito-inverse); color: var(--rito-cafe); width: auto; }
.botao-claro:hover { background: var(--rito-surface); }

.topo { background: color-mix(in srgb, var(--rito-canvas) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rito-line); position: sticky; top: 0; z-index: 10; }
.topo-interno { align-items: center; display: flex; justify-content: space-between; min-height: 64px; }
.logo { height: 32px; width: auto; }

.abertura { padding-block: var(--rito-space-12) var(--rito-space-16); }
.abertura-grade { display: grid; gap: var(--rito-space-12); align-items: start; }
@media (min-width: 900px) { .abertura-grade { grid-template-columns: 1.15fr 1fr; padding-top: var(--rito-space-8); } }
.sobretitulo { color: var(--rito-accent); font-size: .875rem; font-weight: 600; letter-spacing: .08em; margin-bottom: var(--rito-space-4); text-transform: uppercase; }
.lide { color: var(--rito-muted); font-size: 1.1875rem; margin-top: var(--rito-space-6); max-width: 36em; }
.chips { display: flex; flex-wrap: wrap; gap: var(--rito-space-2); margin-top: var(--rito-space-6); }
.chips li { background: var(--rito-surface); border: 1px solid var(--rito-line); border-radius: 999px; color: var(--rito-primary); font-size: .875rem; padding: 4px 12px; }

.cartao-form { background: var(--rito-surface); border: 1px solid var(--rito-line); border-radius: var(--rito-radius-surface); box-shadow: var(--sombra); padding: var(--rito-space-8) var(--rito-space-6); }
.cartao-form h2 { font-size: 1.75rem; margin-bottom: var(--rito-space-2); }
.cartao-sub { color: var(--rito-muted); margin-bottom: var(--rito-space-6); }
.form { display: grid; gap: var(--rito-space-4); }
.form label { color: var(--rito-text); display: grid; font-size: .9375rem; font-weight: 600; gap: var(--rito-space-1); }
.opcional { color: var(--rito-muted); font-weight: 400; }
.form input[type=email], .form input[type=text], .form select { background: var(--rito-surface); border: 1px solid var(--rito-input-border); border-radius: var(--rito-radius-control); color: var(--rito-text); font: inherit; font-weight: 400; min-height: var(--rito-control-height); padding: 0 var(--rito-space-3); width: 100%; }
.form .consentimento { align-items: start; display: flex; font-size: .875rem; font-weight: 400; gap: var(--rito-space-2); line-height: 1.5; }
.consentimento input { accent-color: var(--rito-primary); flex: none; height: 18px; margin-top: 2px; width: 18px; }
.isca { position: absolute !important; left: -10000px; height: 1px; overflow: hidden; width: 1px; }
.form-msg { font-size: .9375rem; min-height: 1.5em; }
.form-msg-ok { background: var(--rito-success-bg); border-radius: var(--rito-radius-control); color: var(--rito-success); font-weight: 600; padding: var(--rito-space-3); }
.form-msg-erro { color: var(--rito-danger); font-weight: 600; }

.bloco { padding-block: var(--rito-space-16); }
.bloco-claro { background: var(--rito-surface); border-block: 1px solid var(--rito-line); }
.comparacao { display: grid; gap: var(--rito-space-6); }
@media (min-width: 760px) { .comparacao { grid-template-columns: 1fr 1fr; } }
.coluna { border: 1px solid var(--rito-line); border-radius: var(--rito-radius-surface); padding: var(--rito-space-6); }
.coluna li { border-top: 1px solid var(--rito-line); padding-block: var(--rito-space-3); }
.coluna li:first-child { border-top: 0; }
.coluna-rito { background: var(--rito-cafe); border-color: var(--rito-cafe); }
.coluna-rito h3, .coluna-rito li { color: var(--rito-inverse); }
.coluna-rito li { border-color: color-mix(in srgb, var(--rito-inverse) 22%, transparent); }
.recursos, .principios { display: grid; gap: var(--rito-space-6); }
@media (min-width: 640px) { .recursos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .recursos, .principios { grid-template-columns: repeat(3, 1fr); } }
.recursos li, .principios li { border-top: 2px solid var(--rito-accent); padding-top: var(--rito-space-4); }
.recursos p, .principios p { color: var(--rito-muted); }

details { border-bottom: 1px solid var(--rito-line); padding-block: var(--rito-space-4); }
summary { color: var(--rito-cafe); cursor: pointer; font-weight: 600; }
details p { color: var(--rito-muted); margin-top: var(--rito-space-2); }

.chamada { background: var(--rito-cafe); padding-block: var(--rito-space-16); }
.chamada h2 { color: var(--rito-inverse); }
.rodape { padding-block: var(--rito-space-8); }
.rodape-interno { align-items: center; color: var(--rito-muted); display: flex; font-size: .875rem; gap: var(--rito-space-3); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }