/* ═══════════════════════════════════════════════════════════ CONFLUÊNCIAS · PWA Botão "usar como aplicativo" e modal de instruções do iOS. Segue as regras do design-system: nada de border-radius, sombra ou gradiente; papel/tinta/mono; hierarquia por fio e espaço. Só existe se o navegador aceitar instalação (PWA) — a classe .pwa-ok no só entra quando há suporte, ver assets/js/pwa.js. ═══════════════════════════════════════════════════════════ */ body.pwa-ok .pwa-botao{ display:flex; } .pwa-botao{ display:none; position:fixed; right:20px; bottom:20px; z-index:70; align-items:center; gap:10px; background:var(--tinta); color:var(--papel); padding:13px 18px; cursor:pointer; border:none; font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; font-weight:600; } .pwa-botao:hover{ background:var(--bordo); } .pwa-botao-mark{ font-size:16px; line-height:1; } /* Modal de instruções (usado no iOS, que não tem o prompt do Chrome). Mesmo idioma de .aviso: fundo de papel, fio à esquerda. */ .pwa-modal{ position:fixed; inset:0; z-index:98; display:none; align-items:flex-end; justify-content:center; padding:26px; background:rgba(59,33,26,.42); } body.pwa-modal-aberto{ overflow:hidden; } body.pwa-modal-aberto .pwa-modal{ display:flex; } .pwa-modal-box{ background:var(--papel); color:var(--tinta); max-width:520px; border-left:2px solid var(--bordo); padding:26px 28px; box-shadow:none; } .pwa-modal-box h3{ font-size:24px; font-weight:400; letter-spacing:-.015em; line-height:1.15; margin-bottom:14px; } .pwa-modal-box p{ font-size:16px; font-weight:300; line-height:1.55; margin-bottom:6px; max-width:34em; } .pwa-modal-box em{ font-style:italic; color:var(--bordo); } .pwa-modal-box ol{ margin:14px 0 22px; padding-left:22px; } .pwa-modal-box li{ font-size:15px; line-height:1.5; margin-bottom:6px; } .pwa-modal-box .mono{ display:block; margin-bottom:2px; } .pwa-fechar{ background:transparent; color:var(--tinta); border:1px solid var(--regra-media); padding:12px 22px; cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; font-weight:500; } .pwa-fechar:hover{ border-color:var(--tinta); } /* Não atrapalhar telas de fluxo/checkout e o painel. */ body.pwa-sem-botao .pwa-botao{ display:none !important; } @media (max-width:480px){ .pwa-botao{ right:14px; bottom:14px; } .pwa-modal-box{ padding:22px 22px; } } /* Reduzir no desktop apenas para não roubar a cena — mantém no mobile que é o público do PWA. */ @media (min-width:1024px){ .pwa-botao{ right:32px; bottom:32px; padding:14px 20px; } }