/* Páginas de presentación de cada app (www.zojim.com.ar/apps/<app>/). Usa zojim-ui.css.
   Las arma C:/Zojim/diseno/herramientas/armar-apps.mjs: no editar a mano las páginas, editar el script. */
body.z {
  background:
    radial-gradient(700px 480px at 0% 0%, color-mix(in srgb, var(--z-app-1) 18%, transparent), transparent 70%),
    radial-gradient(600px 480px at 100% 0%, rgba(116, 172, 223, .08), transparent 70%),
    var(--z-negro);
}
main.z-contenedor { max-width: 880px; padding-block: 8px 64px; display: grid; gap: 44px; }
header.z-cabecera { max-width: 1160px; }
.intro { display: grid; gap: 24px; align-items: start; }
@media (min-width: 720px) { .intro { grid-template-columns: 120px 1fr; padding-top: 24px; } }
.icono { width: 96px; height: 96px; border-radius: 24%; }
.intro-textos { display: grid; gap: 16px; justify-items: start; }
.intro-textos .z-h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); text-wrap: balance; }
.abrir { min-width: min(100%, 320px); }
.bloque { display: grid; gap: 14px; }
.bloque p { margin: 0; }
.precio { display: grid; gap: 10px; }
.precio p { margin: 0; color: var(--z-texto-2); }
.precio b { color: var(--z-texto); }
.precio-linea { font-size: var(--z-t-medio); }
.pasos { margin: 0; padding-left: 1.4em; display: grid; gap: 12px; color: var(--z-texto-2); }
.pasos b { color: var(--z-texto); }
.pasos a { color: var(--z-dorado-claro); }
.final { display: grid; gap: 12px; justify-items: start; }
@media (max-width: 560px) { .abrir { width: 100%; } }