/* ═══════════ v26 · SEGUNDA DEMÃO EDITORIAL ═══════════
   Só aparência, por cima do Índigo Editorial da v23. Nada aqui muda o que
   um botão faz ou o que aparece em cada tela: é tipografia, ritmo e
   acabamento onde a primeira passada ainda deixava ruído.               */

/* ── Hoje: o coração do produto ─────────────────────────────────────── */

/* o título de cada atividade entra na voz editorial (serifa), como os
   títulos das telas; o corpo continua na letra de interface */
.step-body h3{font-family:var(--fd);font-weight:500;font-size:23px;line-height:1.28;
 letter-spacing:-.014em;color:var(--tx)}
.step-body>p{font-size:14.5px;line-height:1.72}
.today-step{gap:24px;padding-block:32px}
.step-number{font-family:var(--fd);font-size:15px;font-weight:500;min-width:30px;height:30px;
 color:var(--t2);border-color:var(--ln2);font-variant-numeric:lining-nums;margin-top:1px}
.today-step.complete .step-number,.complete .step-number{background:var(--vd);border-color:var(--vd);color:#fff}
.today-step.complete .step-body h3{color:var(--t2)}
.step-progress{letter-spacing:.01em;color:var(--t3)}

/* a linha do dia: fina, no acento da marca */
.daily-line{height:2px;background:var(--ln2);border-radius:2px;margin-top:30px}
.daily-line i{background:var(--ac);border-radius:2px;transition:width .5s var(--ez2)}

/* o interruptor da Leitura ativa acompanha o acento */
.reading-switch{border-radius:var(--r2);padding:15px 18px;box-shadow:var(--sh1)}
.reading-switch input{transition:background .2s ease,border-color .2s ease}
.reading-switch input:checked{background:var(--ac);border-color:var(--ac)}
.reading-switch input:before{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.reading-switch input:focus-visible{outline-color:var(--ac)}

.quiet-actions{padding-top:28px}
.today-footer{padding-top:22px;border-top:1px solid var(--ln);margin-top:30px}

@media(max-width:700px){
 .step-body h3{font-size:20px}
 .today-step{gap:14px;padding-block:26px}
 .step-number{min-width:26px;height:26px;font-size:13.5px}
}

/* ── Meu progresso: três números numa linha só ──────────────────────── */
.kpi:has(>.k:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi .k b{font-variant-numeric:lining-nums tabular-nums}
@media(max-width:420px){
 .kpi:has(>.k:nth-child(3):last-child){gap:8px}
 .kpi:has(>.k:nth-child(3):last-child) .k{padding:14px 12px}
 .kpi:has(>.k:nth-child(3):last-child) .k span{font-size:9px;letter-spacing:.09em}
}

/* ── Como usar: perguntas como índice de livro ──────────────────────── */
.faq-item{padding:0;border-bottom:1px solid var(--ln)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;
 padding:20px 0;font-family:var(--fd);font-size:18.5px;font-weight:500;letter-spacing:-.008em;
 line-height:1.35;color:var(--tx);transition:color .16s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;
 border-right:1.5px solid var(--t3);border-bottom:1.5px solid var(--t3);
 transform:rotate(45deg) translateY(-3px);transition:transform .24s var(--ez)}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq-item summary:hover{color:var(--acT)}
.faq-item p{margin:0 0 22px;max-width:62ch;font-size:14.5px}
.faq-item summary:focus-visible{outline:2px solid var(--ac);outline-offset:4px;border-radius:6px}
@media(max-width:700px){.faq-item summary{font-size:17px;padding-block:18px}}

/* ── Idiomas: os três passos ────────────────────────────────────────── */
.language-step>span:first-child{font-family:var(--fd);font-variant-numeric:lining-nums}
.language-step b{font-family:var(--fd);font-weight:500;font-size:17px;letter-spacing:-.008em}

@media (prefers-reduced-motion:reduce){
 .daily-line i,.faq-item summary::after,.reading-switch input{transition:none}
}