*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Sem isto o navegador assume tema CLARO e pinta de BRANCO o canvas padrão de qualquer iframe (os campos do Mercado Pago) até o conteúdo carregar — é o flash branco ao abrir "Adicionar cartão". Também deixa barras de rolagem e controles nativos no tom escuro. */ color-scheme: dark; --g1: #09E58F; --g2: #16E2D2; --grad: linear-gradient(125deg, #09E58F 0%, #16E2D2 100%); --on-accent: #04211A; --bg: #060C0B; --bg-2: #0A1413; --surface: rgba(255, 255, 255, 0.045); --surface-2: rgba(255, 255, 255, 0.07); --surface-3: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.085); --border-sub: rgba(255, 255, 255, 0.06); --border-2: rgba(255, 255, 255, 0.14); --text: #EDF7F4; --text-sub: #8DA39E; --text-muted: #63756F; --accent: #09E58F; --accent-soft: rgba(9, 229, 143, 0.11); --accent-border: rgba(9, 229, 143, 0.28); --success: #09E58F; --warning: #FFC24B; --danger: #FF6B6B; --whatsapp:#25d366; --radius: 18px; --radius-sm: 12px; --radius-xs: 8px; --shadow-sm: 0 2px 8px rgba(0,0,0,0.40); --shadow: 0 10px 26px -12px rgba(0,0,0,0.70); --shadow-lg: 0 18px 40px -18px rgba(0,0,0,0.80); } /* A área que aparece ao puxar a página no celular (overscroll / pull-to-refresh) é pintada com o fundo do , não do . Sem esta regra o navegador usa preto puro (#000) e sobra uma faixa escura encostada no #060C0B do portal. */ html { background: var(--bg); } body { font-family: 'Inter', sans-serif; background: /* Faixa de emenda: os primeiros 64px viram exatamente --bg e abrem para o brilho. Sem ela, a borda de cima da página fica esverdeada (~#092E2B) e encosta na faixa do overscroll, que é --bg (#060C0B) — e é esse contraste que parece "página cortada" ao puxar no celular. O overscroll só aceita cor sólida, então a saída é fazer o topo da página ter a MESMA cor. */ linear-gradient(to bottom, var(--bg) 0, transparent 64px), radial-gradient(ellipse 780px 420px at 50% 0, rgba(22, 226, 210, 0.16), transparent 68%), var(--bg); background-repeat: no-repeat; background-attachment: fixed; color: var(--text); line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { opacity: .8; } .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; } .login-wrapper { width: 100%; max-width: 380px; } .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px 32px; box-shadow: var(--shadow-lg); } .login-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 32px; } .login-logo img { height: 38px; width: auto; } .logo img { height: 28px; width: auto; } .login-title { font-size: 18px; font-weight: 600; color: var(--text); text-align: center; margin-bottom: 4px; letter-spacing: -.2px; } .login-subtitle { font-size: 13px; color: var(--text-sub); text-align: center; margin-bottom: 28px; text-wrap: balance; } .field-group { margin-bottom: 14px; } .field-group label { display: block; font-size: 12px; font-weight: 500; color: var(--text-sub); margin-bottom: 6px; } input[type="text"], input[type="tel"], input[type="password"] { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; color: var(--text); font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input::placeholder { color: var(--text-muted); } /* iOS: o Safari dá ZOOM automático ao focar qualquer campo com fonte < 16px, e depois a página fica desalinhada. 16px é o limiar exato que desliga esse comportamento — não é estética, é o que impede o zoom. Vale para celular e tablet (o iPad faz o mesmo). No desktop os 14px continuam. */ @media (max-width: 1024px) { input[type="text"], input[type="tel"], input[type="password"], input[type="email"], input[type="number"], select, textarea, .text-input { font-size: 16px; } } .password-wrap { position: relative; } .password-wrap input { padding-right: 42px; } .toggle-pw { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; padding: 0; transition: color .15s; } .toggle-pw:hover { color: var(--text-sub); } .login-footer { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 20px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 13px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: filter .16s, background .16s, transform .12s, border-color .16s; text-decoration: none; letter-spacing: -.01em; } .btn:active { transform: scale(.975); } .btn-primary { background: var(--grad); color: var(--on-accent); font-weight: 700; box-shadow: 0 10px 24px -10px rgba(16, 226, 180, .55); } .btn-primary:hover { filter: brightness(1.07); text-decoration: none; } .btn-primary:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; } .btn-outline { background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); } .btn-outline:hover { background: var(--surface-3); border-color: var(--border-2); color: var(--text); text-decoration: none; } #logoutBtn { border-color: rgba(248,113,113,.35); color: var(--danger); } #logoutBtn:hover { border-color: var(--danger); color: #fff; background: var(--danger); } .btn-danger { background: transparent; border: 1px solid rgba(248,113,113,.35); color: var(--danger); } .btn-danger:hover { border-color: var(--danger); color: #fff; background: var(--danger); text-decoration: none; } .btn-full { width: 100%; margin-top: 8px; } .btn-sm { padding: 9px 15px; font-size: 13px; border-radius: 11px; } .btn-spinner { width: 14px; height: 14px; border: 2px solid rgba(4,33,26,.25); border-top-color: var(--on-accent); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; } .alert { padding: 10px 13px; border-radius: var(--radius-xs); font-size: 13px; margin-bottom: 12px; } .alert-error { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.22); color: #fca5a5; } .hidden { display: none !important; } .navbar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .navbar-inner { max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .navbar-left { display: flex; align-items: center; gap: 12px; } @keyframes logoWiggle { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.14) rotate(-7deg); } 45% { transform: scale(1.06) rotate(6deg); } 65% { transform: scale(1.10) rotate(-4deg); } 82% { transform: scale(1.02) rotate(2deg); } 100% { transform: scale(1) rotate(0deg); } } .logo img.wiggle { animation: logoWiggle .6s cubic-bezier(.34, 1.56, .64, 1); } .navbar-right { display: flex; align-items: center; gap: 12px; } .cine-carousel { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #0A1211; } .cine-carousel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 12, 11, .72) 0%, transparent 55%); pointer-events: none; } .cine-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; -webkit-user-select: none; user-select: none; pointer-events: none;} .cine-slide.active { opacity: 1; } @supports not (aspect-ratio: 1) { .cine-carousel { height: 220px; } } .cine-tag { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 5px 11px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: none; } .conta-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 20px; border-radius: 24px; border: 1px solid var(--border-2); background: radial-gradient(120% 130% at 100% 0%, rgba(22, 226, 210, .18), transparent 58%), linear-gradient(160deg, #0F1D1A 0%, #091210 100%); } .conta-hero { flex-direction: column; align-items: stretch; gap: 16px; } .conta-hero-top { display: flex; align-items: center; gap: 18px; } .conta-hero-info { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; flex: 1; min-width: 0; } .conta-hero-info .status-banner { margin-bottom: 0; } .conta-hero-title { font-size: 21px; font-weight: 750; letter-spacing: -.025em; line-height: 1.18; color: var(--text); } .conta-hero-sub { font-size: 13px; color: var(--text-sub); line-height: 1.5; } .conta-hero-sub strong { color: var(--text); font-weight: 650; } .conta-hero-actions { width: 100%; } .conta-hero-actions .btn { width: 100%; height: 46px; padding: 0 20px; font-size: 14.5px; } .conta-hero-actions:has(> .hidden) { display: none; } @media (min-width: 1128px) { .conta-hero { flex-direction: row; align-items: center; gap: 12px; padding: 18px; } .conta-hero-top { flex: 1; min-width: 0; gap: 12px; } .conta-hero-actions { width: auto; flex-shrink: 0; } .conta-hero-actions .btn { width: auto; padding: 0 12px; font-size: 13.5px; gap: 7px; } .conta-hero-actions .btn svg { width: 16px; height: 16px; } } .validity-lbl { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-sub); } .validity-ring { --pct: 100; position: relative; width: 92px; height: 92px; flex-shrink: 0; border-radius: 50%; background: conic-gradient( from -90deg, var(--g1) 0%, var(--g2) calc(var(--pct) * 1%), rgba(255, 255, 255, .08) calc(var(--pct) * 1%) 100% ); display: grid; place-items: center; } .validity-ring::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #0A1513; } .validity-ring.is-warning { background: conic-gradient(from -90deg, var(--warning) 0%, var(--warning) calc(var(--pct) * 1%), rgba(255,255,255,.08) calc(var(--pct) * 1%) 100%); } .validity-ring.is-expired { background: conic-gradient(from -90deg, var(--danger) 0%, var(--danger) 6%, rgba(255,255,255,.08) 6% 100%); } .validity-ring-in { position: relative; z-index: 1; text-align: center; line-height: 1; } .validity-num { font-size: 27px; font-weight: 800; letter-spacing: -.04em; color: var(--text); font-variant-numeric: tabular-nums; } @media (max-width: 580px) { .conta-hero { gap: 14px; padding: 16px; } .conta-hero-top { gap: 12px; } .conta-hero-sub { font-size: 12.5px; } .validity-ring { width: 78px; height: 78px; } .validity-num { font-size: 23px; } } @media (max-width: 380px) { .validity-ring { width: 72px; height: 72px; } .validity-num { font-size: 21px; } } #tab-conta.active { display: grid; grid-template-columns: 1fr; gap: 16px; } #tab-conta > .card, #tab-conta > .conta-info-card { margin-bottom: 0; } #tab-conta > #accountsCard { grid-column: 1 / -1; } #tab-conta > #contaHero { order: -1; } .conta-info-card { background: none; border: 0; padding: 0; } @media (max-width: 580px) { #tab-conta > #cineCard { order: 5; }} @media (min-width: 581px) { #tab-conta.active { grid-template-columns: 1fr 1fr; align-items: stretch; } #tab-conta > #contaHero { grid-column: 1; } #tab-conta > .conta-info-card { grid-column: 1; } #tab-conta > #cineCard { grid-column: 2; grid-row: 1 / span 2; } #cineCard.cine-card { max-width: none; display: flex; } #cineCard .cine-carousel { flex: 1; aspect-ratio: auto; min-height: 180px; } #tab-conta > #accountsCard { order: 1; } } @media (min-width: 900px) { .conta-info-card .info-grid { grid-template-columns: repeat(3, 1fr); } } .dashboard-main { padding: 32px 24px 72px; } .container { max-width: 1080px; margin: 0 auto; } .loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 96px 0; color: var(--text-sub); font-size: 14px; } .spinner-lg { width: 36px; height: 36px; border: 2px solid var(--surface-3); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; } .error-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 96px 0; color: var(--text-sub); text-align: center; } .error-icon { width: 44px; height: 44px; background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.20); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--danger); } .status-banner { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 30px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; margin-bottom: 20px; color: var(--text-sub); } .status-banner::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .status-active { background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent); } .status-active::before { background: var(--accent); animation: blip 2.2s ease-in-out infinite; } @keyframes blip { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .status-warning { background: rgba(255,194,75,.10); border: 1px solid rgba(255,194,75,.26); color: var(--warning); } .status-warning::before { background: var(--warning); } .status-expired { background: rgba(255,107,107,.10); border: 1px solid rgba(255,107,107,.26); color: var(--danger); } .status-expired::before { background: var(--danger); } .user-wrap { position: relative; flex-shrink: 0; } .user-chip { display: flex; align-items: center; gap: 9px; padding: 5px 8px 5px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; cursor: pointer; transition: background .16s, border-color .16s; } .user-chip:hover, .user-chip[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-2); } .user-chip-name { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; } .user-caret { color: var(--text-muted); transition: transform .22s; } .user-chip[aria-expanded="true"] .user-caret { transform: rotate(180deg); } .user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: var(--on-accent); font-size: 11.5px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; } /* O avatar é um ícone genérico de pessoa, não a inicial do usuário. Em % para servir aos dois tamanhos (26px no chip, 38px no menu) sem regra extra. */ .user-avatar svg { width: 64%; height: 64%; } .user-avatar--lg { width: 38px; height: 38px; font-size: 15px; border-radius: 12px; } .user-menu { position: absolute; top: calc(100% + 9px); right: 0; z-index: 200; min-width: 214px; padding: 6px; border-radius: 16px; border: 1px solid var(--border-2); background: rgba(12, 22, 20, .97); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 20px 44px -16px rgba(0,0,0,.92); animation: userMenuIn .16s cubic-bezier(.2,.9,.3,1); } .user-menu[hidden] { display: none; } @keyframes userMenuIn { from { opacity: 0; transform: scale(.95) translateY(-5px); } to { opacity: 1; transform: none; } } .user-menu-head { display: flex; align-items: center; gap: 11px; padding: 10px 10px 13px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .user-menu-name { font-size: 14px; font-weight: 700; letter-spacing: -.015em; } .user-menu-sub { font-size: 12px; color: var(--text-sub); margin-top: 3px; } .user-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 10px; border: 0; border-radius: 11px; background: none; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 620; text-align: left; cursor: pointer; transition: background .15s, color .15s; } .user-menu-item svg { width: 17px; height: 17px; flex-shrink: 0; } .user-menu-item:hover { background: rgba(255,107,107,.10); color: var(--danger); } .nav-dock { display: none; } @media (max-width: 580px) { /* Formato inspirado na barra do WhatsApp: quase toda a largura da tela, com folga interna e vidro mais translúcido. Os itens usam flex:1 para dividir o espaço por igual — assim os 5 destinos respiram em vez de se espremerem. */ .nav-dock { position: fixed; left: 26px; right: 26px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; display: flex; gap: 2px; padding: 4px 6px; border-radius: 999px; /* pílula inteira, como no WhatsApp */ background: rgba(20, 26, 25, .58); backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%); border: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 16px 40px -12px rgba(0,0,0,.85); } .nav-dock-item { flex: 1; /* divide a largura por igual entre os 5 destinos */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; border: 0; border-radius: 22px; background: none; color: var(--text-sub); font-family: inherit; cursor: pointer; transition: color .18s, background .2s; min-width: 0; } .nav-dock-item svg { width: 25px; height: 25px; } .nav-dock-item span { font-size: 12px; line-height: 1; font-weight: 500; letter-spacing: 0; white-space: nowrap; max-width: 62px; overflow: hidden; text-overflow: ellipsis; } /* Ativo com realce cinza neutro e texto claro — no WhatsApp o item ativo NÃO é preenchido com a cor da marca, é uma pastilha translúcida. */ .nav-dock-item.active { background: rgba(255, 255, 255, .11); color: var(--text); } } .tab-bar { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); width: max-content; max-width: 100%; margin: 0 auto 26px; overflow-x: auto; scrollbar-width: none; } .tab-bar::-webkit-scrollbar { display: none; } .tab-btn { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: none; border: none; border-radius: 11px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-sub); cursor: pointer; transition: color .16s, background .16s; white-space: nowrap; } .tab-btn svg { flex-shrink: 0; } .tab-btn:hover { color: var(--text); } .tab-btn.active { background: var(--grad); color: var(--on-accent); font-weight: 700; } .tab-btn.active svg { color: var(--on-accent); } .tab-btn[data-tab="indique"]:not(.active), .nav-dock-item[data-tab="indique"]:not(.active) { color: var(--accent); background: var(--accent-soft); } .tab-btn[data-tab="indique"]:not(.active):hover, .nav-dock-item[data-tab="indique"]:not(.active):hover { color: var(--accent); background: rgba(9, 229, 143, .18); } .tab-btn[data-tab="indique"]:not(.active) svg, .nav-dock-item[data-tab="indique"]:not(.active) svg { color: var(--accent); animation: giftNudge 2.8s ease-in-out infinite; transform-origin: center; } @keyframes giftNudge { 0%, 82%, 100% { transform: scale(1); } 88% { transform: scale(1.18); } 94% { transform: scale(.96); } } @media (prefers-reduced-motion: reduce) { .tab-btn[data-tab="indique"] svg, .nav-dock-item[data-tab="indique"] svg { animation: none; } } .tab-pane { display: none; } .tab-pane.active { display: block; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .card-header { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-title { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -.02em; } .card-subtitle{ font-size: 13px; color: var(--text-sub); margin-top: 5px; line-height: 1.5; } .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .info-item { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: #0A1211; min-width: 0; } .info-item:hover { background: #0D1716; } .info-label { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .11em; } .info-value { font-size: 15px; font-weight: 650; color: var(--text); letter-spacing: -.01em; } .adult-toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 15px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); cursor: pointer; user-select: none; transition: border-color .16s, background .16s; } .adult-toggle:hover { border-color: var(--border-2); } .adult-toggle input { position: absolute; opacity: 0; pointer-events: none; } .adult-switch { order: 2; position: relative; width: 46px; height: 27px; background: rgba(255, 255, 255, .13); border: 0; border-radius: 999px; flex-shrink: 0; transition: background .22s; } .adult-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; background: #fff; border-radius: 50%; transition: transform .22s cubic-bezier(.4, 0, .2, 1); } .adult-toggle input:checked + .adult-switch { background: var(--grad); } .adult-toggle input:checked + .adult-switch::after { transform: translateX(19px); } .adult-label { font-size: 14px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 7px; } .adult-tag { display: inline-flex; align-items: center; justify-content: center; height: 16px; font-size: 10px; font-weight: 700; color: var(--danger); border: 1px solid rgba(248,113,113,.4); border-radius: 4px; padding: 0 5px; line-height: 1; transform: translateY(-1.25px);} .adult-price { position: absolute; top: -9px; left: 22px; display: inline-flex; align-items: center; height: 18px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; color: var(--accent); background: #0E1A17; border: 1px solid var(--accent-border); } .info-value:has(.adult-tag), .renew-bar-val:has(.adult-tag) { display: inline-flex; align-items: center; gap: 6px; } .renew-bar-val:has(.adult-tag) { justify-content: center; } .plans-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 12px; } @media (min-width: 581px) { .plans-grid { max-width: 510px; margin: 0 auto; } .adult-toggle { max-width: 510px; margin-left: auto; margin-right: auto; } } .plan-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 22px 14px; cursor: pointer; transition: border-color .18s, background .18s; user-select: none; } .plan-card:hover { border-color: var(--border-2); background: var(--surface-2); } .plan-card:active { transform: scale(.985); }.plan-card.selected { border-color: var(--g1); background: rgba(9, 229, 143, .07); box-shadow: 0 14px 30px -18px rgba(9, 229, 143, .55); } .plan-featured { border-color: var(--accent-border); } .plan-card-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); line-height: 0; transition: background .18s, color .18s, border-color .18s; } .plan-card.selected .plan-card-icon { background: var(--grad); border-color: transparent; color: var(--on-accent);} .plan-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--grad); color: var(--on-accent); font-size: 9.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; } .plan-label { font-size: 11px; font-weight: 700; color: var(--text-sub); text-transform: uppercase; letter-spacing: .09em; } .plan-price { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.045em; line-height: 1.1; font-variant-numeric: tabular-nums; } .renew-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; flex-wrap: wrap; } .renew-bar-info { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } .renew-bar-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 120px; } .renew-bar-key { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; } .renew-bar-val { font-size: 15px; font-weight: 600; color: var(--text-sub); } .renew-bar-total { font-size: 18px; font-weight: 700; color: var(--text); } .renew-bar-btn { padding: 11px 28px; } @media (min-width: 768px) { .renew-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); grid-template-rows: auto auto; gap: 16px; align-items: stretch; max-width: 826px; margin: 0 auto; } .adult-toggle { grid-column: 1; grid-row: 1; max-width: none; margin: 0; } .plans-grid { grid-column: 1; grid-row: 2; max-width: none; margin: 0; } .renew-bar { grid-column: 2; grid-row: 1 / -1; } .plans-grid { grid-auto-rows: 1fr; } .plan-card { padding: 19px 14px; justify-content: center; } .renew-bar { flex-direction: column; align-items: stretch; gap: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); } .renew-bar-info { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .renew-bar-item { flex-direction: row; justify-content: space-between; align-items: baseline; text-align: left; gap: 12px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--border-sub); } .renew-bar-item:last-child { border-bottom: 0; padding-bottom: 4px; } .renew-bar-val { text-align: right; } .renew-bar-val:has(.adult-tag) { justify-content: flex-end; } .renew-bar-btn { width: 100%; margin-top: 14px; } } .inst-head { margin-bottom: 16px; } .inst-head .card-header { margin-bottom: 0; } .renew-head { margin-bottom: 16px; } .renew-head .card-header { margin-bottom: 0; } .tutorials-grid { display: flex; flex-direction: column; gap: 9px; background: none; border-radius: 0; overflow: visible; } .tutorial-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; cursor: pointer; transition: border-color .16s, background .16s, transform .12s; color: inherit; text-decoration: none; position: static; } .tutorial-card::before { display: none; } .tutorial-card:hover { border-color: var(--border-2); background: var(--surface-2); text-decoration: none; } .tutorial-card:active { transform: scale(.99); } .tutorial-icon { font-size: 21px; flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(9, 229, 143, .1); border: 0; border-radius: 13px; } .tutorial-info { flex: 1; min-width: 0; } .tutorial-title { font-size: 14.5px; font-weight: 650; color: var(--text); letter-spacing: -.012em; margin-bottom: 0; } .tutorial-arrow { font-size: 16px; color: var(--text-muted); flex-shrink: 0; line-height: 1; } .brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .brand-tile { display: flex; align-items: center; justify-content: center; height: 96px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color .16s, background .16s, transform .12s; } .brand-tile:hover { border-color: var(--border-2); background: var(--surface-2); } .brand-tile:active { transform: scale(.99); } .brand-tile img { max-width: 100%; max-height: 56px; width: auto; object-fit: contain; display: block; } .brand-tile-text { font-size: 20px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); line-height: 1; } .brand-tile:hover .brand-tile-text { color: var(--accent); } .sup-methods { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; } .sup-head { margin-bottom: 16px; } .sup-head .card-header { margin-bottom: 12px; } .sup-head .app-instruction { margin-bottom: 14px; } .sup-head .sup-track { margin-bottom: 0; } .sup-track { display: flex; gap: 5px; margin: 0 0 16px; } .sup-track i { flex: 1; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); transition: background .3s; } .sup-track i.is-done { background: var(--grad); } .sup-method { background: none; border: 0; border-radius: 0; padding: 0; } .sup-method-head { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; } .sup-method-num { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; background: var(--grad); border: 0; color: var(--on-accent); font-size: 17px; font-weight: 850; border-radius: 14px; letter-spacing: 0; font-variant-numeric: tabular-nums; } .sup-method-heading { min-width: 0; } .sup-method-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -.022em; line-height: 1.22; } .sup-method-body { font-size: 14px; line-height: 1.62; color: #C7D6D2; } .sup-method-body strong { color: var(--text); font-weight: 650; } .sup-method-body .dl-step-text:last-child { margin-bottom: 0; } .sup-method-body .app-note:last-child { margin-bottom: 0; } .sup-chan-example { margin: 0 0 14px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .sup-chan-line { font-size: 12.5px; color: var(--text-sub); line-height: 1.9; white-space: nowrap; overflow-x: auto; } .sup-chan-line strong { color: var(--accent); font-weight: 700; } .sup-apps { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; } .sup-app { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .sup-app-logo { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; flex: 0 0 auto; } .sup-app-info { min-width: 0; flex: 1 1 auto; } .sup-app-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; } .sup-app-alt { font-size: 12px; font-weight: 500; color: var(--text-sub); } .sup-app-where { font-size: 13px; line-height: 1.55; color: var(--text-sub); } .sup-app-where strong { color: var(--text); font-weight: 650; } .sup-app .reload-img-link { margin-top: 10px; } .sup-goto-install { width: 100%; margin-top: 4px; } .sup-method .app-actions { display: flex; gap: 10px; margin-top: 17px; padding-top: 0; border-top: 0; } .sup-method .app-actions .btn { flex: 1 1 0; min-width: 0; height: 46px; padding: 0 12px; font-size: 13.5px; white-space: nowrap; } @media (max-width: 380px) { .sup-method .app-actions .btn { padding: 0 8px; font-size: 13px; } } .sup-method .app-actions .btn-danger { background: var(--surface-2); border-color: var(--border-2); color: var(--text); } .sup-method .app-actions .btn-danger:hover { background: var(--surface-3); border-color: var(--border-2); color: var(--text); } .sup-fallback { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .sup-fallback-icon { width: 48px; height: 48px; object-fit: contain; } .sup-done-icon { font-size: 42px; line-height: 1; } .sup-fallback .sup-restart { margin-top: 2px; } .sup-fallback-title { font-size: 15px; font-weight: 600; color: var(--text); } .sup-fallback-text { font-size: 13px; line-height: 1.6; color: var(--text-sub); margin: 0 0 6px; max-width: 360px; } .sup-fallback .btn { min-width: 220px; } .tutorial-back { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--text-sub); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; padding: 4px 0; margin-bottom: 12px; transition: color .15s; } .tutorial-back:hover { color: var(--accent); } .app-step-num { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; margin-bottom: 12px; border-radius: 999px; background: var(--grad); color: var(--on-accent); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .app-instruction { font-size: 14px; line-height: 1.6; color: var(--text-sub); margin: 0 0 16px; } .app-instruction--sub { font-size: 13px; } .app-logo-box { position: relative; display: flex; align-items: center; justify-content: center; padding: 4px 0 8px; margin-bottom: 16px; } .app-logo-back { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--text-sub); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .04em; cursor: pointer; padding: 6px 4px; transition: color .15s; } .app-logo-back:hover { color: var(--accent); } .app-logo { width: 132px; height: 132px; object-fit: contain; border-radius: 28px; display: block; } .app-note { display: flex; gap: 8px; font-size: 13px; line-height: 1.55; color: #E8D9B8; background: rgba(255, 194, 75, .08); border: 1px solid rgba(255, 194, 75, .2); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; } .app-note::before { content: ""; flex: 0 0 17px; width: 17px; height: 17px; margin-top: 1px; background-color: var(--warning); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .app-note-text { flex: 1 1 auto; min-width: 0; } .flag-icon { display: inline-block; vertical-align: -1px; border-radius: 2px; flex: 0 0 auto; } .wapp-dl { display: flex; gap: 8px; margin: 4px 0 18px; } .wapp-dl .btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; } .wapp-dl-icon { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; } .content-alt .btn { margin-top: 12px; } .wapp-dl-short { display: none; } @media (max-width: 580px) { .wapp-dl { gap: 8px; } .wapp-dl .btn { padding: 11px 10px; font-size: 13px; gap: 7px; min-width: 0; } .wapp-dl-full { display: none; } .wapp-dl-short { display: inline; } } .mac-block { margin-bottom: 20px; } .mac-field { display: flex; gap: 8px; margin-bottom: 12px; } .mac-input { flex: 1 1 auto; letter-spacing: .3px; } .mac-input::placeholder { text-transform: none; } .mac-input:not(:placeholder-shown) { text-transform: uppercase; } .mac-activate { flex: 0 0 auto; white-space: nowrap; } .mac-result { font-size: 13px; line-height: 1.55; padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 12px;} .reload-img-link { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 11px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-sub); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .1s; } .reload-img-link svg { flex: 0 0 auto; } .reload-img-link:hover { background: var(--accent-soft); border-color: var(--accent-border); color: var(--text); } .reload-img-link:active { transform: scale(.98); } .img-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .82); display: flex; align-items: center; justify-content: center; padding: 16px; } .img-lightbox-inner { display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 100%; max-height: 100%; } .img-lightbox-img { max-width: 100%; max-height: 80vh; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); } .img-lightbox-close { padding: 11px 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-family: inherit; cursor: pointer; } .img-lightbox-close:hover { background: var(--surface-3); } .mac-result--ok { color: var(--text); background: var(--accent-soft); border: 1px solid var(--accent-border); } .mac-result--err { color: #ffb4b4; background: rgba(255, 90, 90, .08); border: 1px solid rgba(255, 90, 90, .28); } .cred-box { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .cred-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .cred-label { flex: 0 0 70px; font-size: 12px; font-weight: 600; color: var(--text-sub); text-transform: uppercase; letter-spacing: .02em; } .cred-value { flex: 1 1 auto; font-size: 15px; font-weight: 600; color: var(--text); word-break: break-all; } .cred-copy { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); color: var(--accent); font-family: inherit; font-size: 12.5px; font-weight: 600; min-height: 32px; padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, color .15s; } .cred-row--stack { flex-direction: column; align-items: stretch; gap: 12px; } .cred-row--stack .cred-value { text-align: center; } .cred-row--stack .cred-copy { width: 100%; height: 40px; font-size: 13px; } .cred-copy:hover { border-color: var(--accent-border); } .cred-copy:disabled { opacity: .4; cursor: default; } .dl-steps { list-style: none; counter-reset: dlstep; display: flex; flex-direction: column; gap: 20px; margin: 4px 0 20px; padding: 0; } .dl-steps > li { counter-increment: dlstep; position: relative; padding-left: 40px; } .dl-steps > li::before { content: counter(dlstep); position: absolute; left: 0; top: 0; width: 26px; height: 26px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); font-size: 12px; font-weight: 750; border-radius: 9px; } .dl-step-text { font-size: 14px; line-height: 1.62; color: #C7D6D2; margin-bottom: 12px; } .dl-step-text strong { color: var(--text); font-weight: 650; } .dl-step-text:last-child { margin-bottom: 0; } .dl-result { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .dl-codes { display: flex; flex-direction: column; gap: 14px; margin-bottom: 0; } @media (max-width: 580px) { .dl-steps > li > .dl-codes { margin-left: -40px; } .dl-codes .cred-label { flex-basis: 52px; } } @media (max-width: 380px) { .dl-codes .cred-row:last-child .cred-value { font-size: 13.5px; } } .dl-item { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); } .dl-item-title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .02em; } .dl-item-num { flex: 0 0 auto; min-width: 21px; height: 21px; padding: 0 5px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 7px; font-size: 11px; font-weight: 750; letter-spacing: .02em; } .dl-or { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-sub); } .dl-or::before, .dl-or::after { content: ''; flex: 1; height: 1px; background: var(--border); } .cards-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .cards-title { font-size: 14px; font-weight: 600; color: var(--text); } .cards-list { display: flex; flex-direction: column; gap: 8px; } .cards-empty { font-size: 13px; color: var(--text-sub); line-height: 1.5; } .cards-empty-btn { width: 100%; margin-top: 12px; } .card-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .card-brand { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--text-sub); text-transform: uppercase; } .card-flag { height: 32px; width: auto; max-width: 52px; object-fit: contain; display: block; vertical-align: middle; border-radius: 3px; } .card-flag-wrap { display: inline-flex; align-items: center; } .saved-opt-name .card-flag { display: inline-block; margin-right: 2px; } .card-num { font-size: 14px; font-weight: 600; color: var(--text); } .card-exp { font-size: 12px; color: var(--text-sub); } .card-del { margin-left: auto; background: none; border: none; color: var(--danger); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .card-del:disabled { opacity: .5; cursor: default; } .add-card-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .secure-row .secure-field { flex: 1; } /* Reforço: o iframe do MP não deve pintar fundo próprio. */ .secure-field iframe { background: transparent; width: 100%; height: 100%; border: 0; display: block; } .secure-field { height: 42px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; } .text-input { height: 42px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: 14px; } .text-input::placeholder { color: var(--text-sub); } select.text-input { color-scheme: dark; appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238DA39E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; } select.text-input:focus { outline: none; border-color: var(--accent-border); } select.text-input option { background-color: #0A1211; color: #EDF7F4; } select.text-input option:checked { background-color: #0A3425; color: #EDF7F4; } .consent-label { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--text-sub); cursor: pointer; } .consent-label input { margin-top: 2px; flex: 0 0 auto; } .add-card-actions { display: flex; gap: 10px; justify-content: flex-end; } .add-card-msg { font-size: 12px; color: var(--danger); } .pay-tabs { display: flex; gap: 8px; margin-bottom: 16px; } .pay-tab { flex: 1; padding: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-sub); border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, box-shadow .15s; } .pay-tab.active { border-color: var(--accent-border); color: var(--accent); box-shadow: 0 0 0 1px var(--accent-border); } #payCard, #payPix { display: flex; flex-direction: column; gap: 10px; } .pix-intro { font-size: 13px; color: var(--text-sub); margin: 0 0 4px; line-height: 1.5; } .pix-note { font-size: 12px; color: var(--text-sub); margin: 0; line-height: 1.5; } #savedCardsBox { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .saved-title { font-size: 14px; font-weight: 600; color: var(--text); } .saved-list { display: flex; flex-direction: column; gap: 8px; } .saved-opt { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; color: var(--text); cursor: pointer; } .saved-opt-name { flex: 1; min-width: 0; } .saved-opt input[type="radio"] { outline: none; box-shadow: none; } .saved-opt input[type="radio"]:focus, .saved-opt input[type="radio"]:focus-visible { outline: none; box-shadow: none; } .saved-opt-cvv { flex: 0 0 auto; margin-left: auto; min-width: 84px; min-height: 36px; } .saved-cvv-field { width: 84px; height: 36px; } .saved-cvv-row { display: flex; align-items: center; gap: 10px; } .saved-cvv-label { font-size: 12px; font-weight: 600; color: var(--text-sub); text-transform: uppercase; } .saved-cvv-row .secure-field { flex: 1; max-width: 140px; } .saved-inst { max-width: 260px; } #paymentBrick { margin-top: 4px; } .sub-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 14px; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-sm); } .sub-status-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sub-status-badge { font-size: 13px; font-weight: 700; color: var(--accent); } .sub-status-detail { font-size: 12px; color: var(--text-sub); } .sub-status .btn { flex: 0 0 auto; } .checkout-status { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 12px; font-size: 14px; line-height: 1.6; color: var(--text-sub); } .checkout-status p { margin: 0; } .checkout-status--ok p { color: var(--text); font-weight: 600; } .pix-qr { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: var(--radius-sm); } .checkout-status .cred-row { width: 100%; } .pix-wait { font-size: 12.5px; } .checkout-status--celebrate { gap: 0; padding: 14px 0 4px; } .celebrate-seal { font-size: 44px; line-height: 1; margin-bottom: 10px; animation: celebrate-pop .5s cubic-bezier(.34,1.56,.64,1); } @keyframes celebrate-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } } .checkout-status--celebrate .celebrate-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.01em; } .checkout-status--celebrate .celebrate-sub { margin: 0 0 18px; font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--text-sub); max-width: 300px; } .checkout-status--celebrate .celebrate-note { margin: 0; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 11.5px; font-weight: 400; line-height: 1.5; color: var(--text-sub); max-width: 360px; text-wrap: balance; } .checkout-status--celebrate .celebrate-note strong { color: var(--text-sub); font-weight: 600; } .app-actions { display: flex; flex-wrap: nowrap; gap: 10px; } .app-actions .btn { flex: 1 1 0; min-width: 0; text-align: center; } .app-actions--end .btn { flex: 0 0 auto; } .app-screen--final { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; } .app-final-icon { font-size: 40px; margin-bottom: 8px; } .app-final-icon-img { display: block; width: 60px; height: 60px; margin: 0 auto 10px; } .app-final-title { font-size: 15px; font-weight: 600; color: var(--text); } /* `balance`: distribui as palavras igualmente entre as linhas em vez de encher a primeira e deixar duas sobrando na segunda. */ .app-screen--final .app-instruction { max-width: 420px; text-wrap: balance; } .app-screen--final .btn { margin-top: 12px; } .tutorial-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 14px; } .tutorial-steps li { counter-increment: step; position: relative; padding-left: 40px; font-size: 14px; color: var(--text-sub); line-height: 1.6; min-height: 28px; display: flex; align-items: center; } .tutorial-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent); font-size: 13px; font-weight: 700; border-radius: 50%; } .status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; } .status-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .status-badge--active { color: var(--success); } .status-badge--active::before { background: var(--success); } .status-badge--expired { color: var(--danger); } .status-badge--expired::before { background: var(--danger); } .plan-trial { color: #f59e0b; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 860px) { .navbar-inner { padding: 0 20px; } .dashboard-main { padding: 24px 20px 60px; } .info-grid { grid-template-columns: repeat(2, 1fr); } .plans-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .login-page { padding: 16px; } .login-card { padding: 30px 20px; } .login-logo img { height: 34px; } .navbar { background: rgba(10, 18, 17, .72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); } .navbar-inner { padding: 0 16px; height: 52px; } .logo img { height: 24px; } .btn-sm { padding: 5px 11px; font-size: 11px; } :root { --dock-space: calc(100px + env(safe-area-inset-bottom)); } /* dock ~63px + 12px do fundo + respiro */ .dashboard-main { padding: 16px 14px var(--dock-space); } .status-banner { font-size: 12px; padding: 9px 13px; } .brand-grid { grid-template-columns: repeat(2, 1fr); } .brand-tile--wide { grid-column: 1 / -1; } .app-actions { gap: 7px; } .app-actions .btn { padding: 9px 8px; font-size: 12px; line-height: 1.25; } .cred-row--link { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "label value" "copy copy"; align-items: center; column-gap: 10px; row-gap: 8px; } .cred-row--link .cred-label { grid-area: label; } .cred-row--link .cred-value { grid-area: value; min-width: 0; } .cred-row--link .cred-copy { grid-area: copy; height: 40px; font-size: 13px; } .tab-bar { display: none; } .navbar-left { width: auto; justify-content: flex-start; } .card { padding: 18px 16px; } .card-header--sub { flex-direction: column; align-items: flex-start; gap: 4px; } .info-grid { grid-template-columns: repeat(2, 1fr); } .info-item { padding: 14px 16px; } .info-value { font-size: 14px; } .plans-grid { grid-template-columns: 1fr 1fr; gap: 22px 10px; } .plan-card { padding: 14px 12px; } .plan-price { font-size: 18px; } .plan-badge { font-size: 9px; padding: 2px 8px; } .renew-bar { flex-direction: column; align-items: stretch; gap: 20px; } .renew-bar-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .renew-bar-item { min-width: 0; align-items: center; text-align: center; } .renew-bar-key { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .renew-bar-val { font-size: 14px; white-space: nowrap; } .renew-bar-total { font-size: 15px; } .renew-bar-btn { width: 100%; } .tutorial-card { padding: 13px 16px; } .tutorial-icon { width: 34px; height: 34px; font-size: 16px; } .tutorial-title { font-size: 13px; } } @media (max-width: 380px) { .tab-btn svg { display: none; } } .oa-wrapper { max-width: 400px; } .oa-emoji { font-size: 34px; text-align: center; line-height: 1; margin-bottom: 14px; } .oa-cred { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); margin-bottom: 14px; } .oa-cred-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; } .oa-cred-row + .oa-cred-row { border-top: 1px solid var(--border-sub); } .oa-cred-label { display: block; font-size: 11px; color: var(--text-sub); margin-bottom: 2px; } .oa-cred-value { display: block; font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: .5px; word-break: break-all; } .oa-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; } .oa-summary div { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; } .oa-summary span { display: block; font-size: 11px; color: var(--text-sub); margin-bottom: 2px; } .oa-summary strong { font-size: 13px; font-weight: 600; color: var(--text); } .oa-code:not(:placeholder-shown) { text-transform: uppercase; letter-spacing: 1px; } .oa-skip { text-align: center; margin-top: 14px; font-size: 13px; } .oa-skip a { color: var(--text-sub); } .oa-skip a:hover { color: var(--accent); } @media (max-width: 380px) { .oa-summary { grid-template-columns: 1fr; } } .oa-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .oa-picker-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; } .oa-picker-item:hover:not(:disabled) { border-color: var(--accent-border); background: var(--accent-soft); } .oa-picker-item:disabled { opacity: .45; cursor: default; } .oa-picker-item.is-loading { border-color: var(--accent); opacity: 1; } .oa-phone { display: flex; align-items: stretch; } .oa-flag-btn { display: flex; align-items: center; gap: 5px; padding: 0 9px; background: var(--surface-3); border: 1px solid var(--border); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); cursor: pointer; font-family: inherit; font-size: 13px; color: var(--text); white-space: nowrap; transition: background .15s; } .oa-flag-btn:hover { background: #262626; } .oa-flag-cur { display: inline-flex; } .oa-flag-cur .flag-icon { display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.08); } .oa-flag-dial { color: var(--text-sub); font-variant-numeric: tabular-nums; } .oa-flag-caret { color: var(--text-muted); flex: 0 0 auto; } .oa-phone input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; flex: 1 1 auto; min-width: 0; margin: 0; } .oa-flag-menu { margin-top: 8px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: rgba(12, 22, 20, .98); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--shadow-lg); overflow: hidden; } .oa-flag-search { width: 100%; border: none !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; background: transparent !important; } .oa-flag-search:focus { box-shadow: none !important; } .oa-flag-list { max-height: 232px; overflow-y: auto; } .oa-flag-option { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--text); transition: background .12s; } .oa-flag-option:hover { background: var(--accent-soft); } .oa-flag-option.is-current { background: var(--surface-3); } .oa-flag-ic { display: inline-flex; flex: 0 0 auto; } .oa-flag-ic .flag-icon { display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.08); } .oa-flag-name { flex: 1 1 auto; } .oa-flag-dial2 { color: var(--text-sub); font-size: 12px; font-variant-numeric: tabular-nums; } .oa-flag-empty { padding: 16px 12px; text-align: center; font-size: 13px; color: var(--text-sub); } .acc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .acc-user { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: .3px; } .acc-meta { font-size: 12px; color: var(--text-sub); } .acc-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .acc-badge--active { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); } .acc-badge--expired { background: rgba(248,113,113,.08); color: var(--danger); border: 1px solid rgba(248,113,113,.22); } .acc-phone { color: var(--text); font-weight: 600; } .oa-picker-item.acc-current { border-color: var(--accent-border); background: var(--accent-soft); cursor: default; } .oa-picker-item.acc-current:hover { background: var(--accent-soft); } .acc-switch-lead { font-size: 13px; color: var(--text-sub); margin-bottom: 12px; line-height: 1.5; } #accountsSwitchList .oa-picker-item { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 2px; padding: 13px; background: rgba(255, 255, 255, .03); } #accountsSwitchList .acc-ico { grid-column: 1; grid-row: 1 / -1; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface-2); color: var(--text-muted); transition: background .16s, color .16s; } #accountsSwitchList .acc-top { grid-column: 2; min-width: 0; } #accountsSwitchList .acc-user { font-size: 14px; font-weight: 650; letter-spacing: -.01em; } #accountsSwitchList .acc-badge { text-transform: uppercase; letter-spacing: .06em; } #accountsSwitchList .acc-current { border-color: rgba(9, 229, 143, .4); background: rgba(9, 229, 143, .07); } #accountsSwitchList .acc-current .acc-ico { background: rgba(9, 229, 143, .16); color: var(--g1); } #accountsSwitchList .oa-picker-item:hover:not(.acc-current) { border-color: var(--border-2); background: rgba(255, 255, 255, .06); } .acc-accordion { padding: 0; overflow: hidden; } .acc-accordion-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 17px 18px; background: none; border: none; cursor: pointer; font-family: inherit; color: var(--text); text-align: left; } .acc-accordion-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .acc-accordion-ico { color: var(--accent); flex-shrink: 0; } .acc-accordion-head .card-title { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; } .acc-accordion-inner { padding: 0 18px 18px; } .acc-accordion-caret { color: var(--text-muted); flex-shrink: 0; transition: transform .25s ease; } .acc-accordion-head[aria-expanded="true"] .acc-accordion-caret { transform: rotate(180deg); } .acc-accordion-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .ref-card { text-align: center; } .ref-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; } .ref-hero-gift { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); animation: ref-gift-float 3.4s ease-in-out infinite; } @keyframes ref-gift-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } } .ref-hero-title { font-size: 21px; font-weight: 700; color: var(--text); margin-top: 4px; } .ref-hero-sub { font-size: 13.5px; color: var(--text-sub); line-height: 1.55; max-width: 440px; } .ref-hero-sub strong { color: var(--accent); } .ref-steps { display: flex; flex-direction: column; gap: 10px; text-align: left; margin: 22px auto 4px; max-width: 420px; } .ref-step { display: flex; align-items: center; gap: 12px; } .ref-step-num { flex: 0 0 auto; width: 25px; height: 25px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 750; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-2); } .ref-step-txt { font-size: 13.5px; color: #C7D6D2; line-height: 1.5; } .ref-step-txt strong { color: var(--g1); font-weight: 700; } .ref-card .app-note { max-width: 420px; margin: 14px auto 0; text-align: left; } .ref-progress { display: flex; align-items: center; justify-content: center; gap: 0; margin: 4px 0 16px; } .ref-dot { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); transition: background .2s, color .2s, border-color .2s; } .ref-dot.is-done { background: var(--grad); border-color: transparent; color: var(--on-accent); } .ref-dot--goal { border-style: dashed; font-size: 15px; } .ref-dot--goal.is-done { border-style: solid; } .ref-dot-line { flex: 1 1 auto; height: 2px; min-width: 8px; background: var(--border); transition: background .2s; } .ref-dot-line.is-done { background: var(--grad); } .ref-progress-note { font-size: 12.5px; color: var(--text-sub); line-height: 1.55; text-align: center; } .ref-progress-note strong { color: var(--text); } .ref-state { margin: 18px auto 0; max-width: 440px; } .ref-loading { font-size: 13px; color: var(--text-muted); padding: 16px 0; } .ref-code-box { display: flex; align-items: center; gap: 10px; background: rgba(9, 229, 143, .06); border: 1.5px dashed rgba(9, 229, 143, .4); border-radius: 15px; padding: 6px 6px 6px 18px; } .ref-code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; font-size: 23px; font-weight: 800; letter-spacing: .16em; color: var(--text); font-variant-numeric: tabular-nums; user-select: all; } .ref-copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 11px; background: var(--grad); border: none; color: var(--on-accent); font-family: inherit; font-size: 13px; font-weight: 750; cursor: pointer; white-space: nowrap; transition: filter .15s, transform .1s; } .ref-copy:hover { filter: brightness(1.07); } .ref-copy:active { transform: scale(.96); } .ref-copy.is-copied { filter: brightness(1.12); } .ref-inactive { background: rgba(248,113,113,.07); border: 1px solid rgba(248,113,113,.24); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 20px; text-align: center; } .ref-inactive-title { font-size: 14px; font-weight: 700; color: var(--danger); margin-bottom: 6px; } .ref-inactive-text { font-size: 12.5px; color: var(--text-sub); line-height: 1.55; margin-bottom: 14px; } .ref-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 16px; } .ref-stat { padding: 22px 16px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .15s, transform .15s; } .ref-stat:hover { border-color: var(--accent-border); transform: translateY(-2px); } .ref-stat-top { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 10px; } .ref-stat-icon { display: inline-flex; }.ref-stat-num { font-size: 40px; font-weight: 850; line-height: 1; letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; } .ref-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); } @media (max-width: 380px) { .ref-stat { padding: 18px 12px; } .ref-stat-top { gap: 10px; } .ref-stat-num { font-size: 32px; } .ref-stat-label { font-size: 12px; } } .ref-celebrate { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4,4,4,.72); opacity: 0; transition: opacity .3s ease; overflow: hidden; } .ref-celebrate.show { opacity: 1; } .ref-celebrate.hidden { display: none; } .ref-celebrate-card { position: relative; z-index: 2; width: 100%; max-width: 360px; background: rgba(12, 22, 20, .98); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 30px 26px; text-align: center; box-shadow: var(--shadow-lg); transform: scale(.8); opacity: 0; transition: transform .35s cubic-bezier(.2,1.4,.4,1), opacity .3s; } .ref-celebrate.show .ref-celebrate-card { transform: scale(1); opacity: 1; } .ref-celebrate-badge { font-size: 52px; line-height: 1; margin-bottom: 8px; display: inline-block; animation: ref-badge-pop .6s cubic-bezier(.2,1.5,.4,1) both; } @keyframes ref-badge-pop { 0% { transform: scale(0) rotate(-25deg); } 60% { transform: scale(1.25) rotate(10deg); } 100% { transform: scale(1) rotate(0); } } .ref-celebrate-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; } .ref-celebrate-text { font-size: 13.5px; color: var(--text-sub); line-height: 1.55; margin-bottom: 20px; } .ref-celebrate-text strong { color: var(--accent); } .ref-celebrate-card .btn { width: 100%; } .ref-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .ref-conf { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 1px; opacity: 0; animation-name: ref-fall; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: both; } @keyframes ref-fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ref-hero-gift, .ref-celebrate-badge { animation: none; } .ref-conf { display: none; } } .ref-success-confetti { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .ref-success-burst { display: flex; justify-content: center; margin-bottom: 18px; } .ref-success-check { width: 92px; height: 92px; } .ref-success-circle { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: ref-draw-circle .5s ease-out forwards; } .ref-success-tick { stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: ref-draw-tick .35s .45s ease-out forwards; } @keyframes ref-draw-circle { to { stroke-dashoffset: 0; } } @keyframes ref-draw-tick { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .ref-success-circle, .ref-success-tick { animation: none; stroke-dashoffset: 0; } .ref-success-confetti { display: none; } } /* ── Convite para instalar o portal como app (PWA) ────────────────────── */ .pwa-tip { display: flex; align-items: center; gap: 10px; margin: 18px 0 2px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); position: relative; } .pwa-tip-icon { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; } .pwa-tip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .pwa-tip-body strong { font-size: 12.5px; font-weight: 600; color: var(--text); } .pwa-tip-body span { font-size: 11.5px; color: var(--text-sub); line-height: 1.45; } .pwa-tip .btn-sm { flex-shrink: 0; } .pwa-tip-close { position: absolute; top: 4px; right: 6px; width: 20px; height: 20px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--text-muted); font-size: 17px; line-height: 1; font-family: inherit; } .pwa-tip-close:hover { color: var(--text); }