[hidden] { display: none !important; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.topbar { padding-top: env(safe-area-inset-top); }
.footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.pwa-card { margin-block: 2rem; padding: 1.25rem; border: 2px solid var(--primary, #0a4fa8); border-radius: 1rem; }
.pwa-card h2 { margin-top: 0; }
.pwa-card p { max-width: 65ch; }
.pwa-status { font-size: 1rem; }
.pwa-update { position: fixed; z-index: 2000; bottom: calc(1rem + env(safe-area-inset-bottom)); left: 1rem; right: 1rem; max-width: 36rem; margin: auto; background: var(--surface, #fff); color: var(--text, #111827); border: 2px solid var(--primary, #0a4fa8); border-radius: 1rem; padding: 1rem; box-shadow: 0 6px 32px #0003; }
.pwa-update p { margin-top: 0; }
.pwa-update .btn { margin: .25rem; }
@media (display-mode: standalone) { #instalar-app { display: none; } }

.pwa-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem 1.5rem; margin-block:1.25rem; background:var(--surface); }
.pwa-card h2 { font-size:1.45rem; margin-bottom:.4rem; line-height:1.25; }
.pwa-card-texto p { margin:0; }
.pwa-card .pwa-eyebrow { font-size:.8rem; font-weight:700; letter-spacing:.08em; color:var(--primary); margin-bottom:.45rem; }
.pwa-acoes { display:flex; flex-direction:column; gap:.65rem; }
.pwa-status { grid-column:1/-1; margin:0; color:var(--text-muted); }
.pwa-guia { width:min(94vw,640px); max-height:90dvh; padding:1.5rem; border:2px solid var(--primary); border-radius:var(--radius); background:var(--surface); color:var(--text); overflow:auto; font:inherit; }
.pwa-guia::backdrop { background:#0009; }
.pwa-guia-topo { display:flex; align-items:start; justify-content:space-between; gap:1rem; }
.pwa-guia-topo h2 { margin:0; font-size:1.4rem; }
.pwa-dispositivos,.pwa-guia-acoes { display:flex; gap:.75rem; flex-wrap:wrap; }
.pwa-dispositivos [aria-pressed="true"] { background:var(--primary); color:var(--primary-text); }
.pwa-passo { margin:1.2rem 0; padding:1rem; border:2px solid var(--border); border-radius:var(--radius); }
#pwa-passo-numero { font-weight:700; color:var(--primary); margin-top:0; }
.pwa-ilustracao { display:grid; place-items:center; width:88px; height:88px; color:var(--primary); background:var(--surface-2); border-radius:20px; }
.pwa-ilustracao svg { width:58px; height:58px; }
.pwa-passo h3 { font-size:1.35rem; line-height:1.3; margin-bottom:.5rem; }
.pwa-browser-dica { font-size:1rem; }
.pwa-guia-acoes { justify-content:space-between; margin-top:1rem; }
@media(max-width:640px) { .pwa-card{grid-template-columns:1fr;margin-inline:1rem;width:calc(100% - 2rem)} .pwa-acoes .btn{width:100%;justify-content:center} .pwa-guia{padding:1rem} .pwa-guia-acoes .btn{flex:1} }
/* Instalação ao final: a lista de voos vem primeiro. */
.pwa-card { grid-template-columns:minmax(0,1fr) 210px; grid-template-areas:"copy preview" "actions preview" "status preview"; gap:1rem 2rem; padding:1.75rem; }
.pwa-card-texto { grid-area:copy; }
.pwa-acoes { grid-area:actions; align-items:flex-start; max-width:540px; }
.pwa-status { grid-area:status; grid-column:auto; }
.pwa-metodo { margin:0; font-size:1rem; color:var(--text-muted); line-height:1.5; }
.pwa-alternativa { background:transparent; font-size:1rem; }
.pwa-phone-preview { grid-area:preview; margin:0; text-align:center; }
.pwa-phone { position:relative; width:174px; height:295px; margin:0 auto; border:7px solid #172538; border-radius:30px; overflow:hidden; background:linear-gradient(155deg,#dff4ff,#bedaff 50%,#7ca8d0); color:#152d4b; box-shadow:0 12px 28px #17253822; }
.pwa-phone-notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:64px; height:12px; border-radius:0 0 10px 10px; background:#172538; }
.pwa-phone-hora { font:500 30px/1 system-ui; margin-top:30px; }
.pwa-phone-sub { font:10px/1.4 system-ui; margin-top:6px; }
.pwa-phone-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px 8px; padding:24px 12px; align-items:start; }
.pwa-demo-tile { display:block; width:36px; height:36px; margin:auto; border-radius:10px; background:#fff9; box-shadow:0 2px 3px #1231; }
.pwa-demo-tile:nth-child(2) { background:#78b9d9; }.pwa-demo-tile:nth-child(3) { background:#b7d5aa; }.pwa-demo-tile:nth-child(5) { background:#e8c989; }
.pwa-demo-app { display:flex; align-items:center; flex-direction:column; gap:4px; position:relative; }
.pwa-demo-app img { width:36px; height:36px; border-radius:10px; box-shadow:0 3px 10px #0a4fa855; }
.pwa-demo-app span { font:600 8px/1.2 system-ui; color:#152d4b; }
.pwa-phone-dock { position:absolute; left:9px; right:9px; bottom:19px; height:45px; border-radius:17px; background:#fff6; display:flex; align-items:center; justify-content:space-evenly; }
.pwa-phone-dock i { width:26px; height:26px; border-radius:8px; background:#fff9; }
.pwa-phone-home { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:55px; height:4px; background:#172538; border-radius:4px; }
.pwa-phone-preview figcaption { margin-top:12px; font-size:.9rem; color:var(--text); }
.pwa-phone-preview small { display:block; margin-top:5px; font-size:.8rem; color:var(--text-muted); }
.pwa-phone.is-previewing .pwa-demo-app { animation:pwa-icon-arrive 1.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pwa-icon-arrive { 0%{opacity:0;transform:translateY(20px) scale(.5)} 55%{opacity:1;transform:translateY(-5px) scale(1.12)} 78%{transform:translateY(2px) scale(.97)} 100%{opacity:1;transform:none} }
@media(max-width:640px) { .pwa-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "actions" "preview" "status";padding:1.25rem} .pwa-acoes{align-items:stretch;max-width:none} .pwa-phone-preview{margin-top:.5rem} }
@media(prefers-reduced-motion:reduce) { .pwa-phone.is-previewing .pwa-demo-app{animation:none} }