/* ============================================================
   🎨 ESTÚDIO DE APARÊNCIA — login montável (Etapa 3) — aparencia_login.css
   ============================================================
   Só entra na página com login próprio salvo ou na prévia do Estúdio. Tudo
   escopado em body.apl (o renderer aparencia_login.js põe a classe e os
   atributos data-apl-disp / -cont / -cartao / -logo / -mov). Os cartões
   estilizam o PRÓPRIO .login-box — os cartões de 2FA/vencido/fornecedor/PIX
   trocam só o conteúdo dele, então herdam o estilo em qualquer disposição.
   Geometria da demo v2 (login-montador-v2.html); "dir" + "vidro" reproduzem a
   vitrine de hoje (mesmos valores do cliente_login.html).
   Plano: docs/superpowers/plans/2026-09-27-estudio-aparencia-etapa3.md
   ============================================================ */
@property --apl-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

html.apl-previa body { visibility: hidden; }
html.apl-previa.apl-previa-pronta body { visibility: visible; }
html.apl-previa #pwa-install-banner { display: none !important; }

body.apl { display: block; overflow: hidden; }
body.apl #lv-showcase { display: none !important; }
.apl-palco { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.apl-vinheta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 45%, rgba(0,0,0,.5) 100%); }
.apl-cont { position: absolute; display: flex; flex-direction: column; gap: 18px; z-index: 1; min-width: 0; min-height: 0; }
.apl-lado { position: absolute; display: flex; flex-direction: column; align-items: center; z-index: 5; padding: 20px; min-width: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
/* espaçadores: centralizam o cartão quando cabe; quando não cabe, o lado rola
   sem cortar o topo (cartão com muitos extras em tela baixa) */
.apl-lado::before, .apl-lado::after { content: ''; flex: 1 1 0; min-height: 0; }
.apl-mosaico { position: absolute; inset: 0; z-index: 1; display: none; overflow: hidden; }
.apl-logo-canto { position: absolute; left: 36px; top: 30px; z-index: 6; display: none; }
.apl-logo-acima { display: none; }
.apl-relogio { position: absolute; right: 30px; top: 26px; z-index: 6; display: none; text-align: right; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.apl-relogio b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.apl-relogio small { font-size: 13px; color: #cbd5e1; }
body.apl.apl-com-relogio .apl-relogio { display: block; }
body.apl .login-box { margin: 0; max-width: 100%; flex: 0 0 auto; }

/* ---------- hero e slides (valores da vitrine legada) ---------- */
.apl-hero { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 22px; overflow: hidden; background: #0a0a0a; box-shadow: 0 25px 50px -12px rgba(0,0,0,.7); }
.apl-sl { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; overflow: hidden; pointer-events: none; }
.apl-sl.on { opacity: 1; z-index: 1; pointer-events: auto; }
body.apl[data-apl-mov="nenhum"] .apl-sl { transition: none; }
.apl-sl-img { position: absolute; inset: 0; background: #131a26 center/cover no-repeat; }
.apl-sl-sombra { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 40%, rgba(0,0,0,.25) 100%), linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 55%); }
.apl-sl-txt { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 36px 40px 40px; max-width: 70%; }
.apl-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--btn-text, #fff); background: var(--btn-gradient); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; box-shadow: 0 6px 16px -6px var(--btn-shadow); }
.apl-sl-txt h2 { font-size: clamp(26px, 3.4vw, 46px); font-weight: 700; line-height: 1.05; letter-spacing: -1px; color: #fff; margin-bottom: 12px; text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.apl-meta { font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.apl-sin { font-size: 14px; line-height: 1.55; color: #d4d4d8; max-width: 560px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.apl[data-apl-mov="completo"] .apl-sl.on .apl-sl-img { animation: apl-kb 9s ease-out forwards; }
body.apl[data-apl-mov="completo"] .apl-sl.on .apl-sl-txt > * { animation: apl-sltxt .8s cubic-bezier(.2,.8,.2,1) both; }
body.apl[data-apl-mov="completo"] .apl-sl.on .apl-sl-txt > *:nth-child(2) { animation-delay: .08s; }
body.apl[data-apl-mov="completo"] .apl-sl.on .apl-sl-txt > *:nth-child(3) { animation-delay: .16s; }
body.apl[data-apl-mov="completo"] .apl-sl.on .apl-sl-txt > *:nth-child(4) { animation-delay: .24s; }
@keyframes apl-kb { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes apl-sltxt { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.apl-credito { position: absolute; top: 14px; right: 22px; z-index: 4; font-size: 10px; color: rgba(255,255,255,.45); letter-spacing: .3px; pointer-events: none; }

/* setas e bolinhas */
.apl-ctr { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.apl-seta { pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.45); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s ease; font-family: inherit; }
.apl-seta:hover { background: rgba(0,0,0,.7); }
.apl-seta.a { left: 16px; }
.apl-seta.b { right: 16px; }
.apl-dots { pointer-events: auto; position: absolute; right: 24px; bottom: 24px; display: flex; gap: 8px; }
.apl-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.35); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.apl-dots button.on { background: var(--accent); transform: scale(1.25); }
body.apl.apl-sem-setas .apl-ctr { display: none; }

/* banners: a arte inteira (contain) sobre uma cópia desfocada (L8) */
.apl-ban-fundo { position: absolute; inset: -30px; background: #0b1220 center/cover no-repeat; filter: blur(28px) brightness(.55); }
.apl-ban-img { position: absolute; inset: 0; background: center/contain no-repeat; }

/* jogos de hoje */
.apl-jg-bg { position: absolute; inset: 0; background: radial-gradient(circle at 82% 8%, rgba(var(--accent-rgb),.32), transparent 52%), repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 64px, transparent 64px 128px), linear-gradient(0deg, #050910, #0b1320); }
.apl-jg-box { position: absolute; left: 40px; right: 40px; top: 50%; transform: translateY(-50%); z-index: 2; }
.apl-jg-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.apl-jg-topo .apl-badge { margin: 0; }
.apl-jg-topo small { font-size: 14px; color: #cbd5e1; }
.apl-jg { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: rgba(20,29,42,.8); border: 1px solid rgba(255,255,255,.08); margin-bottom: 9px; font-size: 14.5px; font-weight: 600; color: #edf2fa; }
.apl-jg-hora { font-size: 13px; color: var(--accent); width: 58px; flex-shrink: 0; }
.apl-jg-hora.vivo { color: #f87171; }
.apl-jg-t { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.apl-jg-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.apl-jg-t i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 800; color: #fff; flex-shrink: 0; background: rgba(255,255,255,.1) center/70% no-repeat; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.apl-jg em { font-style: normal; color: #94a1b4; font-weight: 600; white-space: nowrap; }
.apl-jg-canal { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 7px; background: rgba(var(--accent-rgb),.14); color: var(--accent); white-space: nowrap; }

/* esteira de pôsteres */
.apl-ps { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 18px 0; background: #070b12; overflow: hidden; }
.apl-ps-linha { display: flex; gap: 14px; width: max-content; }
body.apl[data-apl-mov="completo"] .apl-ps-linha { animation: apl-esteira 60s linear infinite; }
body.apl[data-apl-mov="completo"] .apl-ps-linha:nth-child(2) { animation-direction: reverse; animation-duration: 72s; }
.apl-ps-linha i { width: 128px; height: 190px; border-radius: 12px; background: #161f2c center/cover no-repeat; box-shadow: 0 12px 24px -10px rgba(0,0,0,.8); flex-shrink: 0; }
.apl-ps::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,7,12,.85), transparent 25%, transparent 75%, rgba(4,7,12,.6)); }
@keyframes apl-esteira { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* texto de impacto */
.apl-im { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 56px; background: radial-gradient(circle at 20% 30%, rgba(var(--accent-rgb),.28), transparent 45%), radial-gradient(circle at 80% 80%, rgba(var(--accent-rgb),.14), transparent 45%), #070b12; color: #edf2fa; }
.apl-im h2 { font-size: clamp(30px, 3.6vw, 56px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.04; max-width: 640px; }
.apl-im h2 b { color: var(--accent); }
.apl-im p { font-size: 17px; color: #c7d0dd; margin-top: 16px; max-width: 520px; line-height: 1.5; }
.apl-im-selos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.apl-im-selos span { font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),.35); background: rgba(var(--accent-rgb),.08); }
.apl-im-num { display: flex; gap: 34px; margin-top: 28px; }
.apl-im-num b { display: block; font-size: 34px; font-weight: 800; color: var(--accent); letter-spacing: -1px; }
.apl-im-num small { font-size: 13px; color: #aeb8c7; }
body.apl[data-apl-mov="completo"] .apl-sl.on .apl-im > * { animation: apl-sltxt .8s cubic-bezier(.2,.8,.2,1) both; }
body.apl[data-apl-mov="completo"] .apl-sl.on .apl-im > *:nth-child(2) { animation-delay: .1s; }
body.apl[data-apl-mov="completo"] .apl-sl.on .apl-im > *:nth-child(3) { animation-delay: .2s; }
body.apl[data-apl-mov="completo"] .apl-sl.on .apl-im > *:nth-child(4) { animation-delay: .3s; }

/* faixa "Lançamentos" (valores da vitrine legada) */
.apl-faixa { flex: 0 0 auto; min-height: 0; }
.apl-faixa:empty { display: none; }
.apl-faixa h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 12px; letter-spacing: -.3px; }
.apl-fx-row { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.apl-fx-card { flex: 0 0 auto; width: 130px; }
.apl-fx-poster { position: relative; width: 130px; height: 195px; border-radius: 12px; overflow: hidden; background: #161616 center/cover no-repeat; box-shadow: 0 12px 24px -10px rgba(0,0,0,.7); }
.apl-fx-novo { position: absolute; top: 8px; left: 8px; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--btn-text, #fff); background: var(--btn-gradient); padding: 3px 8px; border-radius: 6px; }
.apl-fx-card b { display: block; font-size: 12px; font-weight: 600; color: #e4e4e7; margin-top: 8px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apl-fx-card small { display: block; font-size: 10px; color: #71717a; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.apl.apl-sem-faixa .apl-faixa,
body.apl.apl-sem-posteres .apl-faixa,
body.apl[data-apl-cont="impacto"] .apl-faixa,
body.apl[data-apl-cont="posteres"] .apl-faixa,
body.apl[data-apl-disp="diagonal"] .apl-faixa,
body.apl[data-apl-disp="vertical"] .apl-faixa { display: none; }

/* mosaico de pôsteres */
.apl-mz { position: absolute; left: -4%; top: -6%; width: 108%; height: 112%; display: grid; grid-template-columns: repeat(9, 1fr); gap: 12px; }
.apl-mz i { border-radius: 12px; background: #161f2c center/cover no-repeat; aspect-ratio: 2 / 3; }
body.apl[data-apl-mov="completo"] .apl-mz { animation: apl-mz 30s ease-in-out infinite alternate; }
@keyframes apl-mz { to { transform: translate(-2%, -3%) scale(1.04); } }
.apl-mosaico::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(4,7,12,.55), rgba(4,7,12,.93)); }
.apl-mosaico .apl-credito { z-index: 2; }

/* ---------- disposições (computador) ---------- */
@media (min-width: 900px) {
  body.apl[data-apl-disp="centro"] .apl-cont { display: none; }
  body.apl[data-apl-disp="centro"] .apl-lado { inset: 0; }

  body.apl[data-apl-disp="dir"] .apl-cont { left: 28px; top: 28px; bottom: 20px; width: calc(62% - 56px); }
  body.apl[data-apl-disp="dir"] .apl-lado { left: 62%; right: 0; top: 0; bottom: 0; }

  body.apl[data-apl-disp="esq"] .apl-cont { right: 28px; top: 28px; bottom: 20px; width: calc(62% - 56px); }
  body.apl[data-apl-disp="esq"] .apl-lado { left: 0; right: 62%; top: 0; bottom: 0; }

  body.apl[data-apl-disp="cinema"] .apl-cont { inset: 0; gap: 0; }
  body.apl[data-apl-disp="cinema"] .apl-lado { right: 5%; top: 0; bottom: 0; width: 36%; }

  body.apl[data-apl-disp="dividido"] .apl-cont { left: 0; top: 0; bottom: 0; width: 56%; gap: 0; }
  body.apl[data-apl-disp="dividido"] .apl-lado { right: 0; top: 0; bottom: 0; width: 44%; background: rgba(9,13,21,.92); border-left: 1px solid rgba(255,255,255,.06); }

  body.apl[data-apl-disp="barra"] .apl-lado { left: 0; top: 0; bottom: 0; width: 440px; background: rgba(9,13,21,.96); border-right: 1px solid rgba(255,255,255,.07); box-shadow: 30px 0 60px -30px rgba(0,0,0,.8); }
  body.apl[data-apl-disp="barra"] .apl-cont { left: 440px; right: 0; top: 0; bottom: 0; gap: 0; }
  body.apl[data-apl-disp="barra"] .login-box { width: 380px; }

  body.apl[data-apl-disp="diagonal"] .apl-cont { inset: 0; gap: 0; clip-path: polygon(0 0, 70% 0, 54% 100%, 0 100%); }
  body.apl[data-apl-disp="diagonal"] .apl-cont::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: linear-gradient(100deg, transparent 60%, rgba(var(--accent-rgb),.35) 66%, transparent 67%); }
  body.apl[data-apl-disp="diagonal"] .apl-lado { right: 0; top: 0; bottom: 0; width: 42%; }

  body.apl[data-apl-disp="canto"] .apl-cont { inset: 0; gap: 0; }
  body.apl[data-apl-disp="canto"] .apl-lado { right: 34px; bottom: 30px; padding: 0; }
  body.apl[data-apl-disp="canto"] .login-box { width: 360px; }

  body.apl[data-apl-disp="vertical"] .apl-cont { left: 28px; right: 28px; top: 24px; height: 44%; gap: 0; }
  body.apl[data-apl-disp="vertical"] .apl-lado { left: 0; right: 0; top: calc(44% + 24px); bottom: 0; }
  body.apl[data-apl-disp="vertical"] .apl-lado::before { flex: 0 0 0; }

  body.apl[data-apl-disp="mosaico"] .apl-cont { display: none; }
  body.apl[data-apl-disp="mosaico"] .apl-mosaico { display: block; }
  body.apl[data-apl-disp="mosaico"] .apl-lado { inset: 0; }
  body.apl.apl-sem-posteres[data-apl-disp="mosaico"] .apl-mosaico { display: none; }

  /* conteúdo de ponta a ponta: sem cantos, sem sombra, texto fora do cartão */
  body.apl[data-apl-disp="cinema"] .apl-hero, body.apl[data-apl-disp="dividido"] .apl-hero,
  body.apl[data-apl-disp="barra"] .apl-hero, body.apl[data-apl-disp="diagonal"] .apl-hero,
  body.apl[data-apl-disp="canto"] .apl-hero { border-radius: 0; box-shadow: none; }
  body.apl[data-apl-disp="cinema"] .apl-hero::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(270deg, rgba(0,0,0,.55), transparent 48%); }
  body.apl[data-apl-disp="cinema"] .apl-faixa, body.apl[data-apl-disp="barra"] .apl-faixa,
  body.apl[data-apl-disp="canto"] .apl-faixa { position: absolute; left: 48px; bottom: 28px; width: 52%; z-index: 3; }
  body.apl[data-apl-disp="barra"] .apl-faixa { width: auto; right: 40px; }
  body.apl[data-apl-disp="dividido"] .apl-faixa { position: absolute; left: 36px; right: 36px; bottom: 26px; z-index: 3; }
  body.apl[data-apl-disp="cinema"] .apl-sl-txt, body.apl[data-apl-disp="canto"] .apl-sl-txt { left: 56px; bottom: 70px; max-width: 46%; }
  body.apl[data-apl-disp="dividido"] .apl-sl-txt, body.apl[data-apl-disp="barra"] .apl-sl-txt, body.apl[data-apl-disp="diagonal"] .apl-sl-txt { left: 56px; }
  /* crédito do TMDB: no canto de baixo (o de cima é do relógio/logo) */
  body.apl[data-apl-disp="cinema"] .apl-hero .apl-credito, body.apl[data-apl-disp="canto"] .apl-hero .apl-credito,
  body.apl[data-apl-disp="barra"] .apl-hero .apl-credito, body.apl[data-apl-disp="dividido"] .apl-hero .apl-credito { top: auto; bottom: 8px; right: 16px; }
  body.apl[data-apl-disp="diagonal"] .apl-hero .apl-credito { top: auto; bottom: 8px; right: auto; left: 22px; }
  body.apl[data-apl-disp="cinema"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-sl-txt,
  body.apl[data-apl-disp="canto"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-sl-txt,
  body.apl[data-apl-disp="barra"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-sl-txt { bottom: 290px; }
  body.apl[data-apl-disp="dividido"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-sl-txt { bottom: 270px; }
  body.apl[data-apl-disp="diagonal"] .apl-sl-txt { max-width: 42%; }
  body.apl[data-apl-disp="cinema"] .apl-seta.b, body.apl[data-apl-disp="dividido"] .apl-seta.b,
  body.apl[data-apl-disp="canto"] .apl-seta.b, body.apl[data-apl-disp="diagonal"] .apl-seta.b { display: none; }
  body.apl[data-apl-disp="cinema"] .apl-dots, body.apl[data-apl-disp="canto"] .apl-dots,
  body.apl[data-apl-disp="diagonal"] .apl-dots { right: auto; left: 56px; }
  /* com a faixa por cima do conteúdo, as bolinhas, os jogos e o banner sobem */
  body.apl[data-apl-disp="cinema"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-dots,
  body.apl[data-apl-disp="canto"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-dots,
  body.apl[data-apl-disp="barra"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-dots,
  body.apl[data-apl-disp="dividido"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-dots { display: none; } /* as setas seguem; as bolinhas brigariam com a faixa/logo */
  body.apl[data-apl-disp="cinema"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-jg-box,
  body.apl[data-apl-disp="canto"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-jg-box,
  body.apl[data-apl-disp="barra"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-jg-box,
  body.apl[data-apl-disp="dividido"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-jg-box { top: 64px; transform: none; }
  body.apl[data-apl-disp="cinema"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-jg:nth-child(n+6),
  body.apl[data-apl-disp="canto"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-jg:nth-child(n+6),
  body.apl[data-apl-disp="barra"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-jg:nth-child(n+6),
  body.apl[data-apl-disp="dividido"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-jg:nth-child(n+6) { display: none; }
  body.apl[data-apl-disp="cinema"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-ban-img,
  body.apl[data-apl-disp="canto"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-ban-img,
  body.apl[data-apl-disp="barra"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-ban-img,
  body.apl[data-apl-disp="dividido"]:not(.apl-sem-faixa):not(.apl-sem-posteres) .apl-ban-img { bottom: 270px; top: 24px; }
  body.apl[data-apl-disp="cinema"] .apl-jg-box, body.apl[data-apl-disp="canto"] .apl-jg-box { right: auto; width: 50%; top: 42%; }
  body.apl[data-apl-disp="diagonal"] .apl-jg-box, body.apl[data-apl-disp="diagonal"] .apl-im { right: auto; width: 46%; }
  body.apl[data-apl-disp="cinema"] .apl-im, body.apl[data-apl-disp="canto"] .apl-im { padding-right: 45%; }
  body.apl[data-apl-disp="cinema"] .apl-ban-img, body.apl[data-apl-disp="canto"] .apl-ban-img { right: 42%; }
  body.apl[data-apl-disp="diagonal"] .apl-ban-img { right: 42%; }
}

/* ---------- posição da logo ---------- */
body.apl[data-apl-logo="acima"] .apl-logo-acima { display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; }
body.apl[data-apl-logo="acima"] .apl-logo-acima .logo { flex-direction: column; gap: 10px; margin-bottom: 0; }
body.apl[data-apl-logo="acima"] .apl-logo-acima .logo img { width: 72px !important; height: 72px !important; }
body.apl[data-apl-logo="canto"] .apl-logo-canto { display: block; }
body.apl[data-apl-logo="canto"] .apl-logo-canto .logo { margin: 0; justify-content: flex-start; gap: 12px; }
body.apl[data-apl-logo="canto"] .apl-logo-canto .logo img { width: 44px !important; height: 44px !important; }
body.apl[data-apl-logo="canto"] .apl-logo-canto .logo span { font-size: 24px; }
body.apl[data-apl-logo="acima"] .login-box .apl-logo-orig,
body.apl[data-apl-logo="canto"] .login-box .apl-logo-orig { display: none; }
body.apl.apl-logo-grande .login-box .apl-logo-orig { flex-direction: column; gap: 12px; }
body.apl.apl-logo-grande .login-box .apl-logo-orig img { width: 96px !important; height: 96px !important; }
body.apl.apl-logo-grande .apl-logo-acima .logo img { width: 104px !important; height: 104px !important; }
body.apl.apl-logo-grande .apl-logo-canto .logo img { width: 64px !important; height: 64px !important; }

/* ---------- extras no cartão ---------- */
.apl-cab { margin: -22px 0 24px; text-align: center; }
body.apl[data-apl-logo="acima"] .apl-cab, body.apl[data-apl-logo="canto"] .apl-cab { margin-top: 0; }
.apl-saud { font-size: 17px; font-weight: 600; color: #fff; }
.apl-frase { font-size: 13px; color: #a1a1aa; margin-top: 6px; line-height: 1.5; }
.apl-saud:empty, .apl-frase:empty { display: none; }
.apl-lembrar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #a1a1aa; margin: -6px 0 8px; cursor: pointer; text-align: left; user-select: none; }
.apl-lembrar input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.apl-extras { margin-top: 0; }
.apl-whats { margin-top: 4px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #25d366; border: 1px solid rgba(37,211,102,.4); background: rgba(37,211,102,.07); text-decoration: none; transition: background .2s ease; }
.apl-whats:hover { background: rgba(37,211,102,.14); }
.apl-whats svg { width: 17px; height: 17px; fill: #25d366; }
.apl-loja { display: block; margin-top: 14px; font-size: 13px; color: #a1a1aa; text-decoration: none; }
.apl-loja b { color: var(--accent); }
.apl-selos { display: flex; justify-content: center; gap: 14px; margin-top: 16px; font-size: 11.5px; color: #a1a1aa; flex-wrap: wrap; }
.apl-selos span { display: flex; align-items: center; gap: 5px; }
.apl-selos span::before { content: '✓'; color: var(--accent); font-weight: 800; }
.apl-vivo { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 12.5px; color: #cbd5e1; }
.apl-vivo i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; position: relative; }
body.apl[data-apl-mov="completo"] .apl-vivo i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #34d399; animation: apl-vivo 1.8s ease-out infinite; }
@keyframes apl-vivo { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }

/* ---------- cartões (sobre o PRÓPRIO .login-box) ---------- */
body.apl .login-box { isolation: isolate; }
body.apl[data-apl-cartao="solido"] .login-box { background: #0f1621; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); }
body.apl[data-apl-cartao="luz"] .login-box { background: rgba(8,12,19,.64); border-color: transparent; box-shadow: 0 30px 70px -24px rgba(var(--accent-rgb),.35); }
body.apl[data-apl-cartao="luz"] .login-box::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--apl-ang), rgba(var(--accent-rgb),.1) 0 55%, var(--accent) 72%, #fff 76%, var(--accent) 80%, rgba(var(--accent-rgb),.1) 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
body.apl[data-apl-cartao="luz"][data-apl-mov="completo"] .login-box::before { animation: apl-angulo 4s linear infinite; }
@keyframes apl-angulo { to { --apl-ang: 360deg; } }
body.apl[data-apl-cartao="mini"] .login-box { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.apl[data-apl-cartao="mini"] .login-box .field input { background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.22); border-radius: 0; padding-left: 2px; padding-right: 2px; }
body.apl[data-apl-cartao="mini"] .login-box .field input:focus { box-shadow: none; border-bottom-color: var(--accent); }
body.apl[data-apl-cartao="neon"] .login-box { background: rgba(6,10,16,.78); border: 1.5px solid var(--accent); box-shadow: 0 0 22px rgba(var(--accent-rgb),.55), 0 0 60px rgba(var(--accent-rgb),.22), inset 0 0 22px rgba(var(--accent-rgb),.14); }
body.apl[data-apl-cartao="neon"] .login-box .btn:not([style]) { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); box-shadow: 0 0 16px rgba(var(--accent-rgb),.55), inset 0 0 12px rgba(var(--accent-rgb),.2); text-shadow: 0 0 10px rgba(var(--accent-rgb),.8); }
body.apl[data-apl-cartao="degrade"] .login-box { background: linear-gradient(160deg, rgba(var(--accent-rgb),.34), rgba(10,15,24,.9) 48%); border: 1px solid rgba(var(--accent-rgb),.35); box-shadow: 0 30px 60px -22px rgba(0,0,0,.85); }
body.apl[data-apl-cartao="faixa"] .login-box { background: #0f1621; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); overflow: visible; }
body.apl[data-apl-cartao="faixa"] .login-box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 24px 24px 0 0; background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb),.35)); }
body.apl[data-apl-cartao="faixa"][data-apl-logo="cartao"] .login-box { padding-top: 60px; }
body.apl[data-apl-cartao="faixa"][data-apl-logo="cartao"] .login-box .apl-logo-orig img { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); width: 68px !important; height: 68px !important; padding: 6px; background: #0f1621; border: 3px solid var(--accent); border-radius: 50% !important; animation: none; }
body.apl[data-apl-cartao="flutuante"] .login-box { background: rgba(10,15,24,.72); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 90px -30px rgba(var(--accent-rgb),.65), 0 10px 30px -10px rgba(0,0,0,.7); transition: transform .2s ease-out; will-change: transform; }

/* ---------- celular (≤ 899 px): conteúdo em cima, cartão embaixo (L15) ---------- */
@media (max-width: 899px) {
  body.apl { overflow-x: hidden; overflow-y: auto; }
  body.apl .apl-palco { position: relative; inset: auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: visible; }
  body.apl .apl-vinheta { position: fixed; }
  body.apl .apl-cont { position: relative; margin: 12px 12px 0; height: 38vh; min-height: 220px; max-height: 320px; flex: 0 0 auto; }
  body.apl .apl-lado { position: relative; flex: 1 0 auto; padding: 14px 12px 24px; overflow: visible; }
  body.apl .apl-lado::before { flex: 0 0 0; }
  body.apl .login-box { width: 100%; max-width: 520px; }
  body.apl .apl-faixa, body.apl .apl-seta, body.apl .apl-relogio { display: none !important; }
  body.apl[data-apl-disp="centro"] .apl-cont, body.apl[data-apl-disp="mosaico"] .apl-cont { display: none; }
  body.apl[data-apl-disp="centro"] .apl-lado::before, body.apl[data-apl-disp="mosaico"] .apl-lado::before { flex: 1 1 0; }
  body.apl[data-apl-disp="mosaico"] .apl-mosaico { display: block; position: fixed; }
  body.apl.apl-sem-posteres[data-apl-disp="mosaico"] .apl-mosaico { display: none; }
  body.apl[data-apl-disp="cinema"] .apl-cont, body.apl[data-apl-disp="canto"] .apl-cont { position: fixed; inset: 0; margin: 0; height: auto; max-height: none; }
  body.apl[data-apl-disp="cinema"] .apl-lado, body.apl[data-apl-disp="canto"] .apl-lado { padding-top: 42vh; }
  body.apl[data-apl-disp="cinema"] .apl-lado::before, body.apl[data-apl-disp="canto"] .apl-lado::before { flex: 1 1 0; }
  body.apl[data-apl-disp="cinema"] .apl-lado::after, body.apl[data-apl-disp="canto"] .apl-lado::after { flex: 0 0 0; }
  body.apl[data-apl-disp="dividido"] .apl-cont, body.apl[data-apl-disp="barra"] .apl-cont, body.apl[data-apl-disp="diagonal"] .apl-cont { margin: 0; height: 320px; }
  body.apl[data-apl-disp="cinema"] .apl-hero, body.apl[data-apl-disp="canto"] .apl-hero, body.apl[data-apl-disp="dividido"] .apl-hero,
  body.apl[data-apl-disp="barra"] .apl-hero, body.apl[data-apl-disp="diagonal"] .apl-hero { border-radius: 0; box-shadow: none; }
  body.apl .apl-hero { border-radius: 18px; }
  body.apl .apl-sl-txt { padding: 20px 22px 22px; max-width: 88%; }
  body.apl[data-apl-disp="cinema"] .apl-sl-txt, body.apl[data-apl-disp="canto"] .apl-sl-txt { top: 40px; bottom: auto; }
  body.apl .apl-sl-txt h2 { font-size: 26px; }
  body.apl .apl-sin { display: none; }
  body.apl .apl-dots { right: 16px; bottom: 16px; }
  body.apl[data-apl-disp="cinema"] .apl-dots, body.apl[data-apl-disp="canto"] .apl-dots { top: 16px; bottom: auto; left: 22px; right: auto; }
  body.apl .apl-jg-box { left: 14px; right: 14px; }
  body.apl .apl-jg { font-size: 12.5px; padding: 8px 10px; gap: 8px; margin-bottom: 6px; }
  body.apl .apl-jg-t i { width: 22px; height: 22px; font-size: 8px; }
  body.apl .apl-jg-canal, body.apl .apl-jg:nth-child(n+6) { display: none; }
  body.apl .apl-im { padding: 0 20px; }
  body.apl .apl-im h2 { font-size: 28px; }
  body.apl .apl-im p, body.apl .apl-im-num { display: none; }
  body.apl .apl-ps-linha i { width: 90px; height: 134px; }
  body.apl .apl-logo-canto { position: relative; left: auto; top: auto; margin: 16px 18px 0; order: -1; }
  body.apl[data-apl-logo="canto"] .apl-logo-canto .logo span { font-size: 18px; }
  body.apl[data-apl-logo="acima"] .apl-logo-acima { margin-bottom: 10px; }
  body.apl[data-apl-logo="acima"] .apl-logo-acima .logo img { width: 52px !important; height: 52px !important; }
}