:root {
  --papel: #F2F3EE;
  --superficie: #FFFFFF;
  --tinta: #15170F;
  --tinta-2: #4F5246;
  --linha: #DADCD2;
  --lima: #C1FB0D;
  --sobre-lima: #15170F;
  --cabeca: "Poppins", system-ui, sans-serif;
  --corpo: "Inter", system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #121410;
    --superficie: #1C1F18;
    --tinta: #EEF0E8;
    --tinta-2: #A9AD9E;
    --linha: #2E3228;
  }
}
:root[data-theme="dark"] {
  --papel: #121410;
  --superficie: #1C1F18;
  --tinta: #EEF0E8;
  --tinta-2: #A9AD9E;
  --linha: #2E3228;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 17px/1.55 var(--corpo);
  -webkit-text-size-adjust: 100%;
}

.pagina {
  max-width: 560px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom));
}

.topo { padding: 4px 0 40px; }
.logo { display: block; height: 31px; width: auto; }
.logo-escuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-claro { display: none; }
  :root:not([data-theme="light"]) .logo-escuro { display: block; }
}
:root[data-theme="dark"] .logo-claro { display: none; }
:root[data-theme="dark"] .logo-escuro { display: block; }

h1, h2, h3 { font-family: var(--cabeca); margin: 0; }

h1 {
  font-size: clamp(30px, 8.4vw, 42px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lead {
  margin: 18px 0 0;
  color: var(--tinta-2);
  max-width: 34em;
}

/* a folha de Compartilhar do iOS: a peca que mostra o gesto */
.folha {
  margin: 36px 0 0;
  padding: 10px 0 6px;
  background: var(--superficie);
  border-radius: 22px;
  border: 1px solid var(--linha);
}
.folha-alca {
  width: 38px; height: 5px; border-radius: 3px;
  background: var(--linha);
  margin: 0 auto 8px;
}
.folha-linha {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 10px;
  padding: 13px 14px;
  font-size: 16px;
  color: var(--tinta-2);
  border-top: 1px solid var(--linha);
}
.folha-alca + .folha-linha { border-top: 0; }
.folha-linha svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linejoin: round; stroke-linecap: round;
}
.folha-fluxo {
  background: var(--lima);
  color: var(--sobre-lima);
  font-weight: 600;
  border-radius: 12px;
  border-top-color: transparent;
}
.folha-fluxo + .folha-linha { border-top-color: transparent; }
.folha-fluxo svg { stroke-width: 2.4; }
.folha-fluxo .play { fill: currentColor; stroke-width: 1.4; }

@media (prefers-reduced-motion: no-preference) {
  .folha-fluxo { animation: toque 900ms 500ms cubic-bezier(.3,.7,.3,1) both; }
  @keyframes toque {
    0% { background: transparent; color: var(--tinta-2); }
    55% { transform: scale(.975); }
    100% { background: var(--lima); color: var(--sobre-lima); transform: none; }
  }
}

.passos { margin-top: 56px; }
.passos h2 { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.passos ol { list-style: none; counter-reset: passo; margin: 20px 0 0; padding: 0; }
.passos li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 28px 48px;
}
.passos li::before {
  content: counter(passo);
  position: absolute; left: 0; top: -1px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 15px/1 var(--cabeca);
  border: 1.5px solid var(--tinta);
}
.passos li:not(:last-child)::after {
  content: "";
  position: absolute; left: 15.5px; top: 38px; bottom: 6px;
  width: 1px; background: var(--linha);
}
.passos h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
.passos p { margin: 6px 0 0; color: var(--tinta-2); }

.botao {
  display: inline-block;
  margin-top: 14px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--lima);
  color: var(--sobre-lima);
  font: 600 16px/1.2 var(--corpo);
  text-decoration: none;
}
.botao:active { transform: scale(.98); }
.botao:focus-visible, .rodape a:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

.notas {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
  font-size: 15px;
  color: var(--tinta-2);
}
.notas p { margin: 0 0 10px; }
.notas strong { color: var(--tinta); font-weight: 600; }

.rodape { margin-top: 40px; font-size: 14px; }
.rodape a { color: var(--tinta-2); }