/* Página inicial: topo escuro, antes × depois, simulador, linha do tempo e chamada final */
:root { --mata: #0f3a1e; --mata-2: #15482a; --creme: #f4f7ef; --f-mao: "Caveat", "Segoe Print", cursive; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mata: #0a2414; --mata-2: #0f2f1b; --creme: #e4ece6; } }

.palco {
    background:
        radial-gradient(1200px 500px at 85% 10%, rgba(127, 207, 134, .16), transparent 60%),
        linear-gradient(180deg, var(--mata) 0%, var(--mata-2) 100%);
    color: var(--creme);
    padding-bottom: 12px;
}
.topo-escuro .marca, .topo-escuro .menu a { color: var(--creme); }
.topo-escuro .menu a:hover { color: var(--marca-texto); }
.palco .abertura { padding: 36px 0 84px; }
.sobretitulo { font: 600 14px var(--f-numero); letter-spacing: .04em; text-transform: uppercase; color: #9fd8a6; margin: 0 0 14px; }
.palco .abertura h1 { color: #fff; }
.palco .abertura h1 em { color: #10220f; padding: 0 .08em; background: var(--marca-texto); border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.palco .lide { color: rgba(244, 247, 239, .82); }
.palco .miudo { color: rgba(244, 247, 239, .65); }
.botao.claro { background: var(--marca-texto); border-color: var(--marca-texto); color: #1a1a00; }
.botao.contorno { background: transparent; border-color: rgba(244, 247, 239, .5); color: var(--creme); }
.botao.contorno:hover { border-color: var(--creme); }

.vitrine { position: relative; padding-top: 34px; }
.notificacao {
    position: absolute; top: 0; right: -6px; z-index: 2; width: min(330px, 92%);
    display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px;
    background: rgba(251, 253, 249, .97); color: var(--tinta); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .55);
    font-size: 14px; line-height: 1.35;
}
.notificacao img { border-radius: 9px; flex: none; }
.notificacao b { display: block; font-size: 13px; color: var(--tinta-suave); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
    .notificacao { opacity: 0; animation: chegar .55s 2.9s cubic-bezier(.2, .8, .2, 1.2) forwards; }
    @keyframes chegar { from { opacity: 0; transform: translateY(-18px) scale(.96); } to { opacity: 1; transform: none; } }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .notificacao { background: #18231c; } }

/* antes × depois */
.antes-depois { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
@media (max-width: 820px) { .antes-depois { grid-template-columns: 1fr; gap: 48px; } }
.antes-depois > * { min-width: 0; }
.antes-depois figure { margin: 0; position: relative; }
.antes-depois figcaption {
    position: absolute; top: -14px; left: 18px; font: 600 12px var(--f-numero); text-transform: uppercase; letter-spacing: .08em;
    background: var(--tinta); color: var(--papel); padding: 3px 10px; border-radius: 99px;
}
.caderno {
    background:
        linear-gradient(90deg, transparent 54px, rgba(214, 69, 65, .5) 54px, rgba(214, 69, 65, .5) 56px, transparent 56px),
        repeating-linear-gradient(180deg, #fffef6 0 37px, #c9d9ee 37px 38px);
    padding: 40px 22px 28px 72px; border-radius: 6px; transform: rotate(-1.5deg);
    box-shadow: var(--sombra); color: #24305e; font: 700 27px/38px var(--f-mao);
}
.caderno .linha { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caderno s { text-decoration-thickness: 3px; text-decoration-color: rgba(36, 48, 94, .85); }
.caderno .rabisco { color: #c0392b; }
@media (max-width: 480px) { .caderno { font-size: 22px; padding-left: 64px; } }
.celular { justify-self: center; width: min(320px, 100%); padding: 14px; border-radius: 38px; background: #131a15; box-shadow: 0 30px 60px -24px rgba(18, 38, 26, .6); }
.celular figcaption { left: 50%; transform: translateX(-50%); }
.tela { background: var(--folha); border-radius: 26px; padding: 18px 14px 16px; display: grid; gap: 8px; color: var(--tinta); }
.tela-topo { font: 800 18px var(--f-titulo); font-stretch: 110%; padding: 4px 4px 8px; }
.tela .item { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--papel); border-left: 4px solid var(--picote); }
.tela .item span { font-weight: 600; font-size: 15px; }
.tela .item b { font: 600 15px var(--f-numero); grid-row: 1 / 3; grid-column: 2; align-self: center; }
.tela .item small { font-size: 12px; color: var(--tinta-suave); }
.tela .item.atrasado { border-left-color: var(--erro); }
.tela .item.hoje { border-left-color: var(--marca-texto); }
.tela .item.pago { border-left-color: var(--verde); opacity: .7; }
.tela-total { display: flex; justify-content: space-between; padding: 10px 4px 0; border-top: 1px dashed var(--picote); font-size: 14px; color: var(--tinta-suave); }
.tela-total b { font: 600 16px var(--f-numero); color: var(--tinta); }

/* simulador */
.secao.escura { background: var(--mata); color: var(--creme); }
.secao.escura h2 { color: #fff; }
.secao.escura .intro { color: rgba(244, 247, 239, .78); }
.simulador { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .simulador { grid-template-columns: 1fr; gap: 28px; } }
.simulador > * { min-width: 0; }
.formulario-sim { display: grid; gap: 16px; max-width: 420px; }
.formulario-sim > label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.formulario-sim input:not([type=radio]) {
    font: 600 20px var(--f-numero); padding: 12px 14px; border-radius: 12px; width: 100%;
    border: 1.5px solid rgba(244, 247, 239, .25); background: rgba(0, 0, 0, .18); color: #fff;
}
.formulario-sim input:focus { outline: none; border-color: var(--marca-texto); }
.campo-moeda { position: relative; display: block; }
.campo-moeda > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font: 600 18px var(--f-numero); color: rgba(244, 247, 239, .6); }
.campo-moeda input { padding-left: 48px !important; }
.formulario-sim fieldset { border: 0; padding: 0; margin: 0; }
.formulario-sim legend { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; display: inline-flex; font-weight: 600; cursor: pointer; padding: 9px 14px; border-radius: 99px; border: 1.5px solid rgba(244, 247, 239, .3); }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label:has(input:checked) { background: var(--marca-texto); border-color: var(--marca-texto); color: #1a1a00; }
.chips label:has(input:focus-visible) { outline: 3px solid var(--marca-texto); outline-offset: 2px; }
.resumo-sim { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.resumo-sim div { background: rgba(0, 0, 0, .2); border-radius: 14px; padding: 14px 16px; }
.resumo-sim span { display: block; font-size: 13px; color: rgba(244, 247, 239, .7); }
.resumo-sim b { font: 600 clamp(20px, 3vw, 28px) var(--f-numero); color: #fff; font-variant-numeric: tabular-nums; }
.carne-sim { transform: none; }
.mais-parcelas { margin: 4px 0 0; font: 600 14px var(--f-numero); color: rgba(244, 247, 239, .7); text-align: center; }

/* linha do tempo do dia */
.linha-do-tempo { list-style: none; margin: 0; padding: 0; display: grid; max-width: 820px; }
.linha-do-tempo li { display: grid; grid-template-columns: 84px 1fr; gap: 20px; position: relative; padding-bottom: 34px; }
.linha-do-tempo li::before { content: ""; position: absolute; left: 97px; top: 14px; bottom: 0; width: 2px; background: var(--picote); }
.linha-do-tempo li:last-child::before { display: none; }
.linha-do-tempo time { font: 600 18px var(--f-numero); color: var(--verde); text-align: right; padding-top: 2px; }
.linha-do-tempo li > div { position: relative; padding-left: 26px; }
.linha-do-tempo li > div::before { content: ""; position: absolute; left: -13px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 5px var(--papel); }
.linha-do-tempo h3 { margin: 0 0 4px; font: 700 20px/1.3 var(--f-texto); }
.linha-do-tempo p { margin: 0; color: var(--tinta-suave); }
@media (max-width: 560px) {
    .linha-do-tempo li { grid-template-columns: 1fr; gap: 4px; padding-left: 28px; }
    .linha-do-tempo li::before { left: 6px; top: 14px; }
    .linha-do-tempo time { text-align: left; }
    .linha-do-tempo li > div { padding-left: 0; position: static; }
    .linha-do-tempo li > div::before { left: 0; top: 8px; }
}
.zap { margin-top: 14px; border-radius: 14px; padding: 14px; max-width: 340px;
       background: #e6ddd4 radial-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px) 0 0 / 14px 14px; }
.balao { margin-left: auto; width: fit-content; max-width: 260px; background: #d9fdd3; border-radius: 10px 2px 10px 10px; padding: 6px; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.recibo { background: #fff; border-radius: 6px; padding: 12px 14px; display: grid; gap: 2px; color: #1d2a20; border-top: 4px solid #1b5e20; }
.recibo b { font: 800 13px var(--f-titulo); letter-spacing: .12em; color: #1b5e20; }
.recibo span { font-size: 13px; }
.recibo strong { font: 600 24px var(--f-numero); }
.recibo small { font: 500 11px var(--f-numero); color: #667; }
.balao .hora { display: block; text-align: right; font-size: 11px; color: #2b7bb0; padding: 4px 4px 0; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .zap { background-color: #0b141a; }
    :root:not([data-theme="light"]) .balao { background: #005c4b; }
    :root:not([data-theme="light"]) .balao .hora { color: #8fd3ff; }
}

/* planos com duas formas */
.botoes-plano { display: grid; gap: 8px; margin-top: auto; }
.botoes-plano .botao { justify-content: center; }

/* chamada final */
.chamada { background: var(--marca-texto); color: #1a1a00; padding: 64px 0; text-align: center; }
.chamada h2 { font: 800 clamp(30px, 5vw, 52px)/1.05 var(--f-titulo); font-stretch: 118%; letter-spacing: -.02em; margin: 0 0 10px; }
.chamada p { margin: 0 0 24px; font-size: 18px; }
.chamada .botao { background: var(--mata); border-color: var(--mata); color: #fff; }

/* No fundo escuro a parcela futura fica clara, não acinzentada */
.palco .parcela.futura { opacity: .8; }