/* =====================================================================
   Banner "app" — App GransoftWeb para Android (QR Code para a Google Play)
   Coluna esquerda do /login. Carregado só quando este banner é o do dia.
   ===================================================================== */

.bn-app {
    background-color: #19233F;
    background-image: radial-gradient(115% 48% at 72% 0%, rgba(96,124,170,.50) 0%, rgba(52,70,110,.28) 45%, rgba(25,35,63,0) 100%);
    padding: 56px 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}

/* Profundidade: anel e brilho atrás do aparelho */
.bn-app .bn-ring { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.bn-app .bn-ring-1 { width: 560px; height: 560px; right: -250px; top: 230px; border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 0 120px rgba(8,13,28,.5); }
.bn-app .bn-ring-2 { width: 380px; height: 380px; right: -140px; top: 330px; background: radial-gradient(closest-side, rgba(47,191,155,.14), rgba(47,191,155,0) 75%); }

.bn-app .bn-top { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 56px; }
.bn-app .bn-logo { width: 200px; height: auto; display: block; }
.bn-app .bn-copy { display: flex; flex-direction: column; gap: 22px; max-width: 380px; }

.bn-app .bn-pill {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: .04em; color: #C7CDD6;
}
.bn-app .bn-pill i { width: 6px; height: 6px; border-radius: 50%; background: #2FBF9B; box-shadow: 0 0 10px #2FBF9B; }

.bn-app .bn-title { margin: 0; font-size: 46px; line-height: 1.12; font-weight: 800; text-transform: uppercase; color: #FFFFFF; }
.bn-app .bn-title span { color: #3ABCAF; }
.bn-app .bn-text { margin: 0; font-size: 15px; line-height: 1.7; color: #C3CBD8; }

/* Cartão do QR Code */
.bn-app .bn-qr {
    margin-top: 6px;
    display: flex; align-items: center; gap: 18px;
    padding: 14px 18px 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    max-width: 380px;
}
.bn-app .bn-qr-img {
    flex: none;
    width: 112px; height: 112px;
    padding: 8px;
    border-radius: 10px;
    background: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
}
.bn-app .bn-qr-img img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.bn-app .bn-qr-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bn-app .bn-qr-info strong { font-size: 15px; font-weight: 700; color: #FFFFFF; line-height: 1.3; }
.bn-app .bn-qr-info span { font-size: 13px; line-height: 1.5; color: #C3CBD8; }
.bn-app .bn-qr-android {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #3ABCAF;
}
.bn-app .bn-qr-link { color: #3ABCAF; font-size: 13px; font-weight: 600; text-underline-offset: 3px; }
.bn-app .bn-qr-link:hover { color: #7FE0CC; }

/* Aparelho */
@keyframes bnAppFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(-4deg); } }
.bn-app .bn-phone {
    position: absolute; z-index: 0;
    width: 290px; height: auto;
    right: -30px; top: 250px;
    transform: rotate(-4deg);
    animation: bnAppFloat 7s cubic-bezier(.45,0,.55,1) infinite;
    filter: drop-shadow(0 40px 50px rgba(0,0,0,.55));
    pointer-events: none;
}

.bn-app .bn-spacer { height: 40px; }

/* Coluna mais estreita: o aparelho cobriria o texto */
@media (max-width: 1280px) {
    .bn-app .bn-phone { width: 240px; right: -60px; top: 300px; }
    .bn-app .bn-copy, .bn-app .bn-qr { max-width: 340px; }
    .bn-app .bn-title { font-size: 40px; }
}
@media (max-width: 1100px) {
    .bn-app { padding: 44px 36px 36px; }
    .bn-app .bn-phone, .bn-app .bn-ring { display: none; }
    .bn-app .bn-top { gap: 40px; }
    .bn-app .bn-title { font-size: 34px; }
}