/* Central de Ajuda mCasei — manuais passo a passo, pensados para telemóvel. */
:root{
  --rose:#c76a67; --gold:#dbc078; --blush:#f2ddcc; --ink:#3a2b28; --muted:#6b5a55;
  --bg:#fffaf6; --mark:#e3262f;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;font-size:16px;line-height:1.55}
.wrap{max-width:480px;margin:0 auto;padding:0 16px}
a{color:var(--rose)}

header{background:linear-gradient(160deg,var(--blush),#fff 70%);border-bottom:3px solid var(--gold);padding:22px 0 24px}
.brand{font-family:"Cormorant Garamond",serif;font-size:22px;color:var(--rose);font-weight:700;letter-spacing:.3px;text-decoration:none}
.brand span{color:var(--muted);font-family:"DM Sans",sans-serif;font-size:13px;font-weight:500;margin-left:6px}
h1{font-family:"Cormorant Garamond",serif;font-size:33px;line-height:1.1;color:var(--ink);margin:14px 0 8px}
.lead{margin:0;color:var(--muted)}
.chip{display:inline-block;margin-top:12px;background:#fff;border:1px solid var(--blush);border-radius:999px;padding:3px 11px;font-size:13px;color:var(--muted)}

.step{padding:28px 0 8px;border-bottom:1px dashed var(--blush)}
.step:last-of-type{border-bottom:0}
.step-head{display:flex;gap:12px;align-items:flex-start}
.num{flex:0 0 34px;height:34px;border-radius:50%;background:var(--rose);color:#fff;font-weight:700;display:grid;place-items:center;font-size:16px}
.step h2{font-size:18px;margin:4px 0 2px;line-height:1.3}
.step p{margin:0;color:var(--muted);font-size:15px}
.step p b{color:var(--ink)}

/* moldura de telemóvel */
.phone{position:relative;width:min(300px,82vw);margin:18px auto 14px;border-radius:34px;padding:9px;background:#1d1716;box-shadow:0 14px 30px rgba(58,43,40,.22)}
.screen{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:390/844;background:#fff}
.screen img{display:block;width:100%;height:100%}
/* marca vermelha: caixa + seta, posicionadas em % da viewport 390×844 da captura */
.mark{position:absolute;border:3px solid var(--mark);border-radius:10px;box-shadow:0 0 0 3px rgba(227,38,47,.18);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(227,38,47,.08)}}
.arrow{position:absolute;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.arrow svg{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){.mark{animation:none}}

.note{background:#fff;border:1px solid var(--blush);border-left:4px solid var(--gold);border-radius:10px;padding:12px 14px;margin:18px 0;font-size:14.5px;color:var(--muted)}
.note b{color:var(--ink)}
.help{text-align:center;padding:26px 0 44px}
.help p{margin:0 0 12px;color:var(--muted)}
.cta{display:inline-block;background:var(--gold);color:var(--ink);font-weight:700;text-decoration:none;border-radius:999px;padding:13px 24px}
.more{display:block;margin-top:18px;font-size:14px}

/* índice */
.cards{display:grid;gap:12px;padding:24px 0}
.card{display:block;background:#fff;border:1px solid var(--blush);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--ink)}
.card strong{display:block;font-size:17px}
.card span{color:var(--muted);font-size:14.5px}