/* ============================================================ acquire-screen.css — Tela de aquisicao + modal de pagamento Estilo: glassmorphism v2 (adaptado do mockup escolhido) ============================================================ */ :root { --acq-lime-500: #84cc16; --acq-lime-600: #65a30d; --acq-lime-700: #4d7c0f; --acq-lime-50: #f7fee7; --acq-lime-100: #ecfccb; --acq-ink-900: #0f172a; --acq-ink-800: #1e293b; --acq-ink-700: #334155; --acq-ink-600: #475569; --acq-ink-500: #64748b; --acq-ink-400: #94a3b8; --acq-ink-200: #e2e8f0; --acq-ink-100: #f1f5f9; --acq-ink-50: #f8fafc; --acq-violet-500: #8b5cf6; --acq-indigo-500: #6366f1; --acq-sky-400: #38bdf8; --acq-radius-sm: 12px; --acq-radius-md: 16px; --acq-radius-lg: 24px; --acq-radius-xl: 32px; --acq-shadow-card: 0 20px 50px -12px rgba(15, 23, 42, 0.12); --acq-shadow-glass: 0 30px 80px -20px rgba(99, 102, 241, 0.35), 0 8px 24px -8px rgba(15, 23, 42, 0.12); --acq-shadow-cta: 0 14px 32px -10px rgba(132, 204, 22, 0.55); } /* ===== STAGE: ocupa a tela toda com blobs de gradiente ===== */ .acquire-screen { position: fixed; inset: 0; display: none; /* safe center = centra; se nao couber, cai pra top (sem clipar conteudo) */ align-items: safe center; justify-content: center; padding: 28px 24px; z-index: 100; overflow-y: auto; overflow-x: hidden; font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--acq-ink-900); background: radial-gradient(1200px 600px at 85% 10%, rgba(139, 92, 246, 0.35), transparent 60%), radial-gradient(900px 500px at 10% 90%, rgba(56, 189, 248, 0.28), transparent 55%), radial-gradient(700px 500px at 50% 50%, rgba(132, 204, 22, 0.18), transparent 60%), linear-gradient(180deg, #0b1020 0%, #0f172a 100%); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .acquire-screen.active { display: flex; } /* Anti-flash: quando ha ?convite= na URL, acquire-init.js seta data-prec-invite em ANTES do paint. CSS esconde acquire-screen e mantem loading visivel ate o JS principal validar o token (showApp ou removeAttribute). */ html[data-prec-invite] .acquire-screen.active { display: none; } html[data-prec-invite] .loading-overlay { display: flex; } .acquire-screen::before, .acquire-screen::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; pointer-events: none; } .acquire-screen::before { width: 480px; height: 480px; background: radial-gradient(circle, #8b5cf6 0%, transparent 70%); top: -100px; right: -120px; } .acquire-screen::after { width: 520px; height: 520px; background: radial-gradient(circle, #84cc16 0%, transparent 70%); bottom: -150px; left: -100px; } /* ===== SHELL + LAYOUT ===== */ .acquire-shell { position: relative; max-width: 1240px; width: 100%; margin: 0 auto; z-index: 1; } .acquire-feedback { margin-bottom: 16px; padding: 10px 14px; background: rgba(255, 255, 255, 0.92); border-radius: 12px; color: var(--acq-ink-700); font-size: 0.88rem; box-shadow: var(--acq-shadow-card); } .acquire-feedback[hidden] { display: none; } .acquire-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } @media (min-width: 980px) { .acquire-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 0; } } /* ===== MAIN CARD (esquerda) ===== */ .acquire-main { background: white; border-radius: var(--acq-radius-xl); padding: 40px 36px; box-shadow: var(--acq-shadow-card); position: relative; overflow: hidden; } @media (min-width: 980px) { .acquire-main { padding: 44px 56px 44px 48px; } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--acq-lime-50); color: var(--acq-lime-700); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 18px; } .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acq-lime-500); box-shadow: 0 0 0 4px rgba(132, 204, 22, 0.18); } .acquire-main .headline { font-size: clamp(1.85rem, 3.2vw, 2.55rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; color: var(--acq-ink-900); margin: 0 0 14px; } .acquire-main .headline em { font-style: normal; background: linear-gradient(135deg, var(--acq-lime-600), var(--acq-lime-500)); -webkit-background-clip: text; background-clip: text; color: transparent; } .acquire-main .sub { font-size: 0.98rem; line-height: 1.55; color: var(--acq-ink-600); max-width: 560px; margin: 0 0 22px; } /* ===== SOCIAL PROOF (logos marketplaces) ===== */ .social-proof { display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: var(--acq-radius-md); background: var(--acq-ink-50); margin-bottom: 24px; } .sp-label { font-size: 0.72rem; font-weight: 700; color: var(--acq-ink-500); text-transform: uppercase; letter-spacing: 0.06em; } .sp-logos { display: inline-flex; align-items: center; gap: 14px; } .sp-logo { height: 26px; width: auto; display: block; opacity: 0.85; transition: opacity 0.2s ease, transform 0.2s ease; } .sp-logo:hover { opacity: 1; transform: translateY(-1px); } .sp-shopee { width: 19px; height: 26px; color: #EE4D2D; } /* Section heading - aparece SO no mobile (separa pitch de features) */ .features-heading { display: none; font-size: 0.78rem; font-weight: 700; color: var(--acq-ink-500); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; } /* ===== FEATURES ===== */ .features { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; gap: 16px 26px; } } .feature { display: flex; gap: 14px; align-items: flex-start; } .feature-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: linear-gradient(135deg, var(--acq-lime-50), white); border: 1px solid var(--acq-lime-100); color: var(--acq-lime-600); transition: transform 0.25s ease; } .feature:hover .feature-icon { transform: translateY(-2px) rotate(-3deg); } .feature-icon.violet { background: linear-gradient(135deg, #f5f3ff, white); border-color: #ede9fe; color: var(--acq-violet-500); } .feature-icon.sky { background: linear-gradient(135deg, #f0f9ff, white); border-color: #e0f2fe; color: #0284c7; } .feature-icon.amber { background: linear-gradient(135deg, #fffbeb, white); border-color: #fef3c7; color: #d97706; } .feature-icon svg { width: 22px; height: 22px; } .feature-body h3 { font-size: 0.97rem; font-weight: 700; color: var(--acq-ink-900); margin: 0 0 4px; line-height: 1.3; } .feature-body p { font-size: 0.86rem; line-height: 1.5; color: var(--acq-ink-500); margin: 0; } /* ===== PROMO CARD (glass — direita) ===== */ .acquire-aside { position: relative; } @media (min-width: 980px) { .acquire-aside { margin-left: -48px; margin-top: 28px; margin-bottom: 28px; } } .promo-card { position: relative; padding: 30px 28px; border-radius: var(--acq-radius-xl); background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: var(--acq-shadow-glass); overflow: hidden; } .promo-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); } .promo-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 18px; } .promo-badge svg { width: 14px; height: 14px; } .price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .price-old { font-size: 1.1rem; color: var(--acq-ink-400); text-decoration: line-through; font-weight: 600; } .price-discount { font-size: 0.78rem; font-weight: 800; color: var(--acq-lime-700); background: var(--acq-lime-100); padding: 3px 10px; border-radius: 999px; } .price-new { display: flex; align-items: baseline; gap: 4px; font-weight: 800; color: var(--acq-ink-900); letter-spacing: -0.04em; line-height: 1; margin-bottom: 8px; } .price-new .currency { font-size: 1.5rem; font-weight: 700; } .price-new .amount { font-size: 3.3rem; } .price-new .period { font-size: 1rem; font-weight: 600; color: var(--acq-ink-500); margin-left: 4px; } .price-note { font-size: 0.83rem; color: var(--acq-ink-600); line-height: 1.5; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } /* Countdown 3 cells */ .countdown-block { margin-bottom: 20px; } .countdown-label { font-size: 0.74rem; font-weight: 700; color: var(--acq-ink-500); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .countdown-label svg { width: 14px; height: 14px; color: var(--acq-violet-500); } .countdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cd-cell { background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.06); border-radius: var(--acq-radius-sm); padding: 8px 6px; text-align: center; } .cd-num { font-size: 1.35rem; font-weight: 800; color: var(--acq-ink-900); font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 4px; letter-spacing: -0.02em; } .cd-lbl { font-size: 0.66rem; font-weight: 700; color: var(--acq-ink-500); text-transform: uppercase; letter-spacing: 0.06em; } /* CTAs */ .cta-stack { display: flex; flex-direction: column; gap: 10px; } .btn-cta, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 14px; font-size: 0.94rem; font-weight: 700; text-decoration: none; border: none; cursor: pointer; font-family: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; letter-spacing: -0.005em; } .btn-cta { background: linear-gradient(135deg, var(--acq-lime-500), var(--acq-lime-600)); color: white; box-shadow: var(--acq-shadow-cta); } .btn-cta:hover { transform: translateY(-1px); box-shadow: 0 18px 38px -10px rgba(132, 204, 22, 0.7); } .btn-cta:disabled { opacity: 0.6; cursor: progress; transform: none; } .btn-cta svg { width: 18px; height: 18px; } .btn-secondary { background: transparent; color: var(--acq-ink-700); border: 1.5px solid rgba(15, 23, 42, 0.12); } .btn-secondary:hover { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.2); } .acquire-error { color: #b91c1c; font-size: 0.82rem; min-height: 1.1em; margin-top: 8px; } .footer-note { margin: 18px 0 0; font-size: 0.78rem; color: var(--acq-ink-500); line-height: 1.5; text-align: center; } .footer-note a { color: var(--acq-lime-700); font-weight: 700; text-decoration: none; } .footer-note a:hover { text-decoration: underline; } /* ===== Float sutil no promo (desktop only) ===== */ @keyframes acqFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (min-width: 980px) { .promo-card { animation: acqFloat 6s ease-in-out infinite; } } /* ============================================================ MOBILE (< 980px) - layout sticky-dock v1 (vertical rhythm apertado) Hero + features PRIMEIRO, promo card DEPOIS, dock SEMPRE ============================================================ */ @media (max-width: 979px) { .acquire-screen { padding: 14px 14px 110px; /* 110px de buffer pro dock que fica fixed */ align-items: flex-start; } .acquire-layout { gap: 14px; } /* Ordem mobile: pitch primeiro, promo depois */ .acquire-main { order: 0; } .acquire-aside { order: 1; } /* Main card compacto */ .acquire-main { padding: 20px 18px 18px; border-radius: var(--acq-radius-lg); } .eyebrow { padding: 5px 11px; font-size: 0.72rem; margin-bottom: 12px; } .acquire-main .headline { font-size: 1.5rem; line-height: 1.1; margin-bottom: 10px; } .acquire-main .sub { font-size: 0.86rem; line-height: 1.45; margin-bottom: 14px; } /* Social proof compact em mobile */ .social-proof { padding: 8px 12px; gap: 10px; margin-bottom: 16px; border-radius: 10px; } .sp-label { font-size: 0.66rem; } .sp-logo { height: 18px; } .sp-shopee { width: 13px; height: 18px; } /* Mostra heading de secao */ .features-heading { display: block; font-size: 0.7rem; margin: 0 0 4px; } /* Features viram lista clean com divisorias (estilo native list) */ .features { display: flex; flex-direction: column; gap: 0; margin-bottom: 0; } .feature { align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(15, 23, 42, 0.06); } .feature:last-child { border-bottom: none; padding-bottom: 4px; } .feature:hover .feature-icon { transform: none; } .feature-icon { width: 36px; height: 36px; border-radius: 10px; } .feature-icon svg { width: 18px; height: 18px; } .feature-body h3 { font-size: 0.9rem; margin-bottom: 2px; } .feature-body p { font-size: 0.8rem; line-height: 1.35; } /* Promo card mobile: dark gradient (igual mockup v1) - destaca o CTA */ .promo-card { padding: 28px 22px 26px; border-radius: var(--acq-radius-lg); background: radial-gradient(circle at 0% 0%, rgba(132, 204, 22, 0.18), transparent 55%), linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(255, 255, 255, 0.08); animation: none; color: #fff; } .promo-card::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); } .promo-badge { background: rgba(132, 204, 22, 0.18); border: 1px solid rgba(132, 204, 22, 0.32); color: #bef264; } .price-old { color: #94a3b8; text-decoration-color: #ef4444; } .price-discount { background: #ef4444; color: #fff; font-weight: 800; } .price-new { color: #fff; } .price-new .currency { font-size: 1.4rem; color: #bef264; } .price-new .amount { font-size: 2.95rem; background: linear-gradient(135deg, #ecfccb, #bef264); -webkit-background-clip: text; background-clip: text; color: transparent; } .price-new .period { color: #cbd5e1; } .price-note { color: #cbd5e1; border-bottom-color: rgba(255, 255, 255, 0.10); } .price-note b { color: #fff; } .countdown-label { color: #cbd5e1; } .countdown-label svg { color: #fbbf24; } .cd-cell { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); } .cd-num { color: #fff; } .cd-lbl { color: #94a3b8; } /* CTAs no promo card mobile: btn-cta mantem lime, secondary fica transparente claro */ .btn-secondary { color: #e2e8f0; border-color: rgba(255, 255, 255, 0.20); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.32); color: #fff; } .footer-note { color: #94a3b8; } .footer-note a { color: #bef264; } .footer-note a:hover { color: #d9f99d; } .acquire-error { color: #fca5a5; } } @media (max-width: 480px) { .acquire-screen { padding: 10px 12px 104px; } .acquire-layout { gap: 12px; } .acquire-main { padding: 18px 16px 14px; } .acquire-main .headline { font-size: 1.4rem; line-height: 1.12; } .acquire-main .sub { font-size: 0.83rem; } .feature { padding: 10px 0; gap: 11px; } .feature-icon { width: 34px; height: 34px; } .feature-icon svg { width: 17px; height: 17px; } .feature-body h3 { font-size: 0.88rem; } .feature-body p { font-size: 0.78rem; } .promo-card { padding: 22px 18px 20px; } .price-new .amount { font-size: 2.55rem; } .price-new .currency { font-size: 1.2rem; } .cd-num { font-size: 1.2rem; } .cd-cell { padding: 7px 5px; } } /* ===== Scroll hint (so mobile) - sumiu ao primeiro scroll ===== */ .scroll-hint { display: none; position: fixed; left: 50%; bottom: 96px; /* fica acima do dock */ transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; align-items: center; justify-content: center; z-index: 200; opacity: 0.7; pointer-events: none; animation: scrollHintBounce 2s ease-in-out infinite; transition: opacity 0.3s ease, transform 0.3s ease; } .scroll-hint svg { width: 16px; height: 16px; } .scroll-hint.hidden { opacity: 0; transform: translateX(-50%) translateY(8px); } @keyframes scrollHintBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } } @media (max-width: 979px) { .scroll-hint { display: flex; } } /* ===== Sticky dock (so mobile) - CTA sempre visivel ===== */ .acquire-dock { display: none; position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 14px max(16px, env(safe-area-inset-bottom)); z-index: 250; pointer-events: none; } @media (max-width: 979px) { .acquire-dock { display: block; } } .dock-inner { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; background: rgba(255, 255, 255, 0.78); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 22px; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.22), 0 4px 12px -4px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85); animation: acqDockEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; } @keyframes acqDockEnter { 0% { transform: translateY(120%); opacity: 0; } 60% { transform: translateY(-6px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } .dock-price { display: flex; flex-direction: column; flex-shrink: 0; line-height: 1; } .dock-price-top { display: flex; align-items: baseline; gap: 2px; } .dock-price-currency { font-size: 0.82rem; font-weight: 700; color: var(--acq-lime-700); } .dock-price-amount { font-size: 1.4rem; font-weight: 800; color: var(--acq-ink-900); letter-spacing: -0.02em; line-height: 1; } .dock-price-period { margin-top: 3px; font-size: 0.7rem; color: var(--acq-ink-500); font-weight: 600; } .dock-price-period s { color: var(--acq-ink-400); text-decoration-color: #ef4444; margin-right: 4px; } .dock-cta { margin-left: auto; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--acq-lime-500), var(--acq-lime-600)); color: #fff; font-family: inherit; font-size: 0.94rem; font-weight: 800; letter-spacing: -0.005em; cursor: pointer; box-shadow: 0 8px 18px -4px rgba(101, 163, 13, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.32); transition: transform 0.18s ease, box-shadow 0.18s ease; position: relative; overflow: hidden; } .dock-cta:active { transform: scale(0.97); box-shadow: 0 4px 10px -2px rgba(101, 163, 13, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.32); } .dock-cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); animation: acqDockShimmer 3.2s ease-in-out 1.2s infinite; } @keyframes acqDockShimmer { 100% { left: 100%; } } .dock-cta svg { width: 16px; height: 16px; flex-shrink: 0; } /* Acessibilidade: respeitar prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .acquire-dock .dock-inner, .dock-cta::before, .scroll-hint, .promo-card { animation: none; } } /* ============================================================ MODAL DE ESCOLHA DE METODO DE PAGAMENTO (estilo glass igual promo) ============================================================ */ .pay-modal { position: fixed; inset: 0; z-index: var(--z-modal, 1000); display: none; align-items: center; justify-content: center; padding: 1rem; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; } .pay-modal[aria-hidden="false"] { display: flex; } .pay-modal-backdrop { position: absolute; inset: 0; background: rgba(11, 16, 32, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pay-modal-card { position: relative; width: 100%; max-width: 460px; padding: 2rem 1.8rem 1.4rem; border-radius: var(--acq-radius-xl); background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: var(--acq-shadow-glass); overflow: hidden; animation: payModalIn 0.2s ease-out; } .pay-modal-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); } @keyframes payModalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .pay-modal-close { position: absolute; top: 0.7rem; right: 0.7rem; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(15, 23, 42, 0.06); color: var(--acq-ink-600); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .pay-modal-close:hover { background: rgba(15, 23, 42, 0.12); color: var(--acq-ink-900); } .pay-modal-close svg, .pay-modal-close i { font-size: 0.95rem; } .pay-modal-title { margin: 0 0 0.35rem; font-size: 1.2rem; font-weight: 800; color: var(--acq-ink-900); letter-spacing: -0.015em; } .pay-modal-sub { margin: 0 0 1.1rem; font-size: 0.88rem; color: var(--acq-ink-600); } .pay-option { display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 0.95rem 1rem; margin-bottom: 0.65rem; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 14px; text-align: left; cursor: pointer; font-family: inherit; transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease; } .pay-option:hover { border-color: var(--acq-lime-500); background: rgba(255, 255, 255, 0.85); transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(132, 204, 22, 0.3); } .pay-option:disabled { opacity: 0.6; cursor: progress; transform: none; } .pay-option-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--acq-lime-500), var(--acq-lime-600)); color: #fff; font-size: 1.05rem; } .pay-option-pix .pay-option-icon { background: linear-gradient(135deg, #32BCAD, #1ea99a); } .pay-option-body { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .pay-option-title { font-weight: 700; font-size: 0.96rem; color: var(--acq-ink-900); } .pay-option-desc { font-size: 0.78rem; color: var(--acq-ink-500); line-height: 1.4; } .pay-option-chev { color: var(--acq-ink-400); font-size: 0.85rem; flex-shrink: 0; } .pay-modal-note { margin: 0.7rem 0 0; font-size: 0.74rem; color: var(--acq-ink-500); text-align: center; } /* ===== Desktop: modal 2 colunas mas mantem look glass ===== */ @media (min-width: 640px) { .pay-modal-card { max-width: 680px; padding: 2rem 2rem 1.4rem; display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: 0; align-items: stretch; } .pay-modal-card > .pay-modal-title, .pay-modal-card > .pay-modal-sub, .pay-modal-card > .pay-modal-note { grid-column: 1 / -1; } .pay-modal-title { font-size: 1.4rem; text-align: center; } .pay-modal-sub { text-align: center; margin-bottom: 1.5rem; font-size: 0.92rem; } .pay-modal-card > .pay-option { flex-direction: column; align-items: center; text-align: center; padding: 1.6rem 1.4rem 1.4rem; background: transparent; border: 0; border-radius: 12px; gap: 0.85rem; position: relative; margin: 0; transition: background 0.18s ease, transform 0.15s ease; } .pay-modal-card > .pay-option:hover { background: rgba(132, 204, 22, 0.08); border: 0; transform: translateY(-3px); box-shadow: none; } .pay-modal-card > .pay-option-pix:hover { background: rgba(50, 188, 173, 0.10); } .pay-modal-card > .pay-option:nth-of-type(2)::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: linear-gradient( 180deg, transparent 0%, rgba(15, 23, 42, 0.12) 25%, rgba(15, 23, 42, 0.12) 75%, transparent 100% ); pointer-events: none; } .pay-modal-card > .pay-option .pay-option-icon { width: 56px; height: 56px; border-radius: 14px; font-size: 1.4rem; box-shadow: 0 6px 18px rgba(132, 204, 22, 0.25); transition: transform 0.2s ease; } .pay-modal-card > .pay-option-pix .pay-option-icon { box-shadow: 0 6px 18px rgba(50, 188, 173, 0.25); } .pay-modal-card > .pay-option:hover .pay-option-icon { transform: scale(1.06); } .pay-modal-card > .pay-option .pay-option-body { gap: 0.35rem; } .pay-modal-card > .pay-option .pay-option-title { font-size: 1.05rem; } .pay-modal-card > .pay-option .pay-option-desc { font-size: 0.82rem; line-height: 1.45; } .pay-modal-card > .pay-option .pay-option-chev { font-size: 0.78rem; color: var(--acq-lime-600); opacity: 0; transform: translateX(-4px); transition: opacity 0.18s ease, transform 0.18s ease; margin-top: 0.2rem; } .pay-modal-card > .pay-option-pix .pay-option-chev { color: #1ea99a; } .pay-modal-card > .pay-option:hover .pay-option-chev { opacity: 1; transform: translateX(0); } }