/* ========================================================================== App Gate — bloqueia o site "desktop" em telemóveis e convida a instalar a App ========================================================================== Como funciona: - Um pequeno script inline no de cada página (ver device-gate.js / snippet documentado) detecta telemóveis por user-agent e adiciona a classe "pa-app-gate" a ANTES do ser desenhado. - Se a classe existir: esconde tudo dentro de excepto o ecrã #paAppGate. - Se não existir (desktop/tablet/PC): esconde apenas o #paAppGate. Isto evita qualquer "flash" do site completo antes do bloqueio aparecer. ========================================================================== */ html.pa-app-gate body > *:not(#paAppGate) { display: none !important; } html:not(.pa-app-gate) #paAppGate { display: none !important; } #paAppGate { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 2rem 1.5rem; text-align: center; background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; font-family: inherit; } #paAppGate .pa-gate-logo { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); object-fit: cover; } #paAppGate h1 { font-size: 1.4rem; font-weight: 700; margin: 0; color: #fff; } #paAppGate p { max-width: 320px; font-size: 0.95rem; line-height: 1.5; color: rgba(255,255,255,0.85); margin: 0; } #paAppGate .pa-gate-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 2rem; margin-top: 0.5rem; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,0.2); } #paAppGate .pa-gate-btn:active { background: var(--accent-dark); } #paAppGate .pa-gate-note { margin-top: 1.5rem; font-size: 0.8rem; color: rgba(255,255,255,0.6); }