/*
================================================================================
Sistema: Ecovía Comechingones (Smart City & Tourism)
Creador y Desarrollador: Silvio Deandrea
Copyright: © 2026 Silvio Deandrea. Todos los derechos reservados.
Licencia: Propiedad Privada - Producto Protegido por Derechos de Autor.
================================================================================
F84 — Página /app/instalar. Tokens en /shared/styles/tokens-premium.css.
*/
@font-face { font-family: 'Fraunces'; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/fraunces-latin.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/manrope-latin.woff2') format('woff2'); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-ui); color: var(--ink); background: var(--forest-950); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 8px; }
.inst { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; align-content: center; gap: 16px; padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); isolation: isolate; overflow: hidden; }
.inst-bg, .inst-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.inst::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,47,53,.55), rgba(6,47,53,.9)); }
.inst-card { width: min(100%, 440px); background: var(--sand-050); border-radius: 24px; padding: 28px 24px; box-shadow: var(--shadow-lg); display: grid; gap: 16px; }
.inst-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--forest-950); }
.inst-brand svg { width: 40px; height: 28px; }
.inst-brand span { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: .95; }
.inst-brand small { display: block; font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; margin-top: 3px; }
h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 8vw, 38px); line-height: 1.05; letter-spacing: -.02em; margin: 6px 0 0; color: var(--forest-950); }
.inst-lead { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.inst-paso { display: grid; gap: 12px; }
.inst-paso p { margin: 0; line-height: 1.5; }
.inst-muted { color: var(--ink-soft); font-size: 14px; }
.inst-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; width: 100%; padding: 12px 20px; border-radius: 999px; border: 0; background: var(--terracotta); color: #fff; font: 700 17px/1 var(--font-ui); text-decoration: none; cursor: pointer; box-shadow: 0 12px 26px -12px rgba(233,107,44,.8); transition: transform var(--t-fast) var(--ease), background var(--t-fast); }
.inst-btn:hover { background: var(--terracotta-700); transform: translateY(-1px); }
.inst-btn svg { width: 20px; height: 20px; }
.inst-btn--ghost { background: transparent; color: var(--forest-950); border: 1.5px solid rgba(6,47,53,.25); box-shadow: none; }
.inst-btn--ghost:hover { background: var(--forest-950); color: #fff; }
.inst-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.inst-pasos li { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; background: #fff; border: var(--border); border-radius: 14px; padding: 12px 14px; font-size: 15px; }
.inst-pasos .num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--forest-950); color: #fff; font-weight: 800; font-size: 14px; }
.inst-pasos .ico { width: 22px; height: 22px; color: var(--forest-700); }
.inst-qr { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.inst-qr img { width: 120px; height: 120px; border-radius: 10px; background: #fff; border: var(--border); }
.inst-qr p { font-size: 14px; color: var(--ink-soft); }
.inst-ok { font-family: var(--font-display); font-size: 22px; color: var(--forest-700); }
.inst-link { justify-self: center; color: var(--forest-700); font-weight: 700; font-size: 15px; padding: 10px; text-underline-offset: 4px; }
.inst-foot { margin: 0; font-size: 11px; }
.inst-foot a { color: rgba(255,255,255,.65); text-decoration: none; }
@media (max-width: 380px) { .inst-qr { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }