/* Passo a passo · mesma identidade do site (cores, fontes e árvore) */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
[hidden]{display:none!important}
:root{
  --bg:#F3F4EC; --surface:#FFFFFF; --fg:#1E2A22; --muted:#5C6B60; --line:#D9DDCF;
  --vine:#2F5A3A; --vine-soft:#E2EBDD; --gold:#9C7A2E; --gold-soft:#F1E7CF;
  --f-display:"Cinzel","Times New Roman",serif; --f-read:"Lora",Georgia,serif; --f-ui:"Source Sans 3",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121A15; --surface:#1A241E; --fg:#E7ECE2; --muted:#9AA99E; --line:#2D3A31;
  --vine:#8DBF8F; --vine-soft:#22362A; --gold:#D6B266; --gold-soft:#3A3120; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121A15; --surface:#1A241E; --fg:#E7ECE2; --muted:#9AA99E; --line:#2D3A31;
  --vine:#8DBF8F; --vine-soft:#22362A; --gold:#D6B266; --gold-soft:#3A3120; color-scheme:dark}
html,body{background:var(--bg);color:var(--fg)}
body{font:16px/1.55 var(--f-ui);padding:0 max(16px,env(safe-area-inset-left,0px)) 48px max(16px,env(safe-area-inset-right,0px))}
main{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:.02em;text-wrap:balance;margin:0}
p{margin:0}
.eyebrow{font:600 .72rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--muted)}

/* Topo */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding-top:28px}
.hero canvas{width:170px;max-width:60%;height:auto}
.hero h1{font-size:1.6rem;color:var(--vine)}
.hero .para{font:600 .82rem var(--f-ui);letter-spacing:.06em;color:var(--fg);background:var(--vine-soft);border-radius:999px;padding:6px 14px}
.verse{font-family:var(--f-read);font-style:italic;font-size:1.08rem}
.verse cite{display:block;font:600 .72rem var(--f-ui);letter-spacing:.12em;color:var(--gold);font-style:normal;margin-top:6px}

/* Passos */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:s}
.step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;grid-template-columns:40px 1fr;gap:6px 14px;counter-increment:s;break-inside:avoid}
.step::before{content:counter(s);grid-row:span 9;width:40px;height:40px;border-radius:50%;background:var(--vine);color:var(--bg);font:600 1.15rem/40px var(--f-display);text-align:center}
.step h2{font-size:1.08rem;color:var(--vine);align-self:center}
.step > *:not(h2){grid-column:2}
.step p,.step li{font-size:.97rem}
.step ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.step b{font-weight:600}

/* Réplicas dos botões e abas do site, para a pessoa reconhecer na tela */
.ui{display:inline-flex;align-items:center;gap:5px;font:600 .85rem var(--f-ui);border-radius:8px;padding:1px 8px;white-space:nowrap;vertical-align:baseline}
.ui.btn{background:var(--vine);color:var(--bg)}
.ui.ghost{border:1px solid var(--vine);color:var(--vine)}
.ui.link{color:var(--vine);text-decoration:underline;padding:0}
.ui.pill{border-radius:999px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;background:var(--gold-soft);color:var(--gold)}
.ui.pill.ok{background:var(--vine-soft);color:var(--vine)}
.ui.tab{background:var(--vine-soft);color:var(--vine);border-radius:999px;padding:2px 10px 2px 6px}
.ui.tab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.ui.wa{background:#25D366;color:#fff}
.chips{display:inline-flex;gap:4px;vertical-align:middle}
.chips i{font:600 .78rem var(--f-ui);font-style:normal;min-width:28px;text-align:center;border:1px solid var(--line);border-radius:999px;padding:2px 6px;background:var(--surface)}
.chips i.on{background:var(--vine-soft);border-color:var(--vine);color:var(--vine)}

.tip{background:var(--gold-soft);border-radius:10px;padding:10px 12px;font-size:.92rem}
.tip b{color:var(--gold)}
.note{border-left:3px solid var(--gold);padding-left:10px;font-size:.92rem;color:var(--muted)}

/* Ações */
.actions{display:flex;flex-direction:column;gap:10px}
.btn-big{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:12px;font:600 1rem var(--f-ui);text-decoration:none;border:1px solid var(--vine);background:var(--vine);color:var(--bg);cursor:pointer;width:100%}
.btn-big.ghost{background:transparent;color:var(--vine)}
.btn-big.wa{background:#25D366;border-color:#25D366;color:#fff}
.btn-big svg{width:20px;height:20px;fill:currentColor}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:1rem;color:var(--vine)}
.endsite{font:600 .95rem var(--f-ui);color:var(--vine);word-break:break-all}
footer{text-align:center;display:flex;flex-direction:column;gap:6px;padding-top:6px}

@media print{
  :root{--bg:#fff}
  body{padding:0}
  .actions,.noprint{display:none!important}
  .step,.card{border-color:#ccc}
}