:root{ --bg:#0b1020; --card:#0f172a; --muted:#92a1b3; --text:#f1f5f9; --accent:#ff7a00; --danger:#ef4444; --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35); } /* RESET */ *{box-sizing:border-box;margin:0;padding:0} body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial; background:var(--bg); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased; } a{text-decoration:none;color:inherit} img,iframe{max-width:100%;border-radius:12px} /* HEADER */ .header{ position:sticky;top:0;z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(11,16,32,.8); border-bottom:1px solid rgba(255,255,255,.05); } .header .bar{ display:flex;justify-content:space-between;align-items:center; padding:10px 16px; } .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px} .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ffb15c)} .cta{ background:var(--accent);color:#111;font-weight:800; border:none;padding:10px 16px;border-radius:10px; font-size:15px;cursor:pointer; } /* HERO */ .hero{padding:24px 16px} .headline{ font-size:clamp(22px,6vw,34px); font-weight:900;line-height:1.2; margin-bottom:10px; } .sub{ color:var(--muted); font-size:clamp(15px,4.2vw,18px); margin-bottom:20px; } .price{ display:flex;flex-wrap:wrap;gap:8px; margin-bottom:20px; } .pill{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:6px 10px;border-radius:999px; font-size:13px;font-weight:600;color:#e2e8f0; } /* LAYOUT PRINCIPAL MOBILE */ .row{ display:flex;flex-direction:column;gap:18px; } .card{ background:var(--card); border:1px solid rgba(255,255,255,.05); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; } .list{margin-left:18px} .list li{margin:8px 0;font-size:15px} /* BENEFÍCIOS */ .benefits{display:grid;gap:12px;margin-top:10px} .benefit{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px;padding:10px 12px; font-size:14px; } .benefit strong{display:block;margin-bottom:4px} /* VIDEO */ .video{aspect-ratio:16/9;overflow:hidden;border-radius:12px;margin-bottom:18px} .video iframe{width:100%;height:100%} /* TIMER / CTA */ .timer{ text-align:center; font-size:16px;font-weight:700; color:#fecaca; background:linear-gradient(180deg,rgba(239,68,68,.12),transparent); border:1px solid rgba(239,68,68,.25); border-radius:12px;padding:10px;margin-top:10px; } .clock{font-variant-numeric:tabular-nums} .cta-block{ display:block;width:100%;text-align:center; background:var(--accent);color:#111; padding:14px 20px;font-weight:800; border-radius:10px;margin-top:18px; box-shadow:0 4px 16px rgba(255,122,0,.35); } /* PROVA / BONUS / FAQ */ .proof,.stack{display:grid;gap:14px} .chip{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px;padding:10px; font-size:14px;color:#e2e8f0; } details{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px;padding:10px 14px; } summary{cursor:pointer;font-weight:700;font-size:15px} details[open]{background:rgba(255,255,255,.08)} /* FOOTER */ footer{border-top:1px solid rgba(255,255,255,.08);padding:20px;text-align:center;color:var(--muted);font-size:13px} /* CTA FLUTUANTE */ .floating-cta{ position:fixed;bottom:14px;left:50%;transform:translateX(-50%); background:var(--accent);color:#111;font-weight:800; padding:14px 26px;border-radius:999px; font-size:16px;text-align:center; box-shadow:0 6px 20px rgba(255,122,0,.45); z-index:999; } @media (min-width:768px){ .row{flex-direction:row} .floating-cta{display:none} }