/* Página «Cómo se hizo»: reutiliza tokens y botones de simrosario.css, con scroll normal. */
html,body.pagina{overflow:auto;height:auto;background:var(--panel-solido)}
.pagina{min-height:100dvh;font-size:14px;line-height:1.75}
.pagina-cabeza{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));background:var(--panel);border-bottom:2px solid var(--borde);backdrop-filter:blur(6px)}
.articulo{max-width:720px;margin:0 auto;padding:48px 16px 96px}
.kicker{margin:0 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acento-luz)}
.articulo h1{margin:0;font-family:var(--pixel);font-weight:400;font-size:40px;line-height:1.1}
.bajada{margin:16px 0 0;font-size:16px;color:var(--tinta)}
.articulo h2{margin:48px 0 14px;font-family:var(--pixel);font-weight:400;font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--acento-luz)}
.articulo a{color:var(--acento-luz);text-underline-offset:2px}
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:paso}
.pasos li{counter-increment:paso;padding:14px 16px;border:2px solid var(--borde);border-radius:6px;background:#ffffff05;box-shadow:4px 4px 0 var(--sombra)}
.pasos li::before{content:counter(paso,decimal-leading-zero);float:right;font-family:var(--pixel);font-size:24px;line-height:1;color:var(--acento)}
.pasos strong{font-family:var(--pixel);font-weight:400;font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.pasos p{margin:6px 0 0;color:var(--tinta-suave)}
.notas{margin:0;padding-left:20px;color:var(--tinta-suave)}
.articulo .creditos{padding:0;font-size:13px}
.caja-contacto{padding:16px 18px 20px;border:2px solid var(--borde);border-radius:6px;background:#ffffff05;box-shadow:4px 4px 0 var(--sombra)}
.caja-contacto p{margin:0}
@media (max-width:640px){.articulo{padding-top:32px}.articulo h1{font-size:32px}}