:root {
  --bg: #03040A;
  --bg2: #070A18;
  --panel: #0A0F24;
  --panel2: #0E1530;
  --line: #172046;
  --text: #EAF0FF;
  --muted: #8A95B8;
  --blue: #1E6BFF;
  --cyan: #19C6FF;
  --deep: #0A2A8C;
  --ok: #3DFFA8;
  --bad: #FF5A6E;
  --display: "Unbounded", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--cyan); text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- animações base ---------- */
@keyframes enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes leave { to { opacity: 0; transform: translateY(-8px); } }
@keyframes pop { 0% { transform: scale(.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shrink { to { transform: scale(.94); opacity: 0; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(30, 107, 255, .55); } 50% { box-shadow: 0 0 0 10px rgba(30, 107, 255, 0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.page { animation: enter .45s var(--ease) both; }
.page.out { animation: leave .18s ease both; }
.stagger > * { animation: enter .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- botões ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 14px; border: 1px solid transparent; font-weight: 800; font-size: 15px; cursor: pointer; transition: transform .15s var(--ease), box-shadow .25s, background .25s, border-color .25s; user-select: none; white-space: nowrap; }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: linear-gradient(180deg, #2B7BFF, #1452E6); color: #fff; box-shadow: 0 8px 30px rgba(30, 107, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 10px 40px rgba(30, 107, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .3); transform: translateY(-1px); }
.btn-ghost { background: rgba(255, 255, 255, .03); border-color: var(--line); color: var(--text); }
.btn-ghost:hover:not(:disabled) { border-color: #2A3A78; background: rgba(30, 107, 255, .08); }
.btn-danger { background: rgba(255, 90, 110, .12); border-color: rgba(255, 90, 110, .35); color: #FFB3BD; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.btn .rp { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(255, 255, 255, .35); pointer-events: none; animation: ripple .55s ease-out forwards; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); cursor: pointer; transition: transform .25s var(--ease), background .2s, border-color .2s; }
.icon-btn:hover { background: rgba(30, 107, 255, .1); border-color: #2A3A78; }
.icon-btn.x:hover { transform: rotate(90deg); }
.icon-btn:active { transform: scale(.9); }

/* ---------- topo do site ---------- */
.topbar { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); background: rgba(3, 4, 10, .72); border-bottom: 1px solid rgba(23, 32, 70, .6); }
.topbar .in { max-width: 1240px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); font-family: var(--display); font-weight: 900; font-size: 18px; letter-spacing: -.01em; }
.brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 24px rgba(30, 107, 255, .45); }
.brand span b { color: var(--cyan); font-weight: 900; }
.topbar nav { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.topbar nav a.lnk { color: var(--muted); font-weight: 700; padding: 10px 12px; border-radius: 10px; transition: color .2s, background .2s; }
.topbar nav a.lnk:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
@media (max-width: 720px) { .topbar nav a.lnk { display: none; } }

/* ---------- landing ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.hero { position: relative; padding: 72px 0 40px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -200px -10% auto; height: 700px; background: radial-gradient(60% 60% at 50% 30%, rgba(30, 107, 255, .35), transparent 70%); pointer-events: none; animation: glow 6s ease-in-out infinite; }
.hero .in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .hero .in { grid-template-columns: 1fr; } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; border: 1px solid #1F3170; background: rgba(30, 107, 255, .1); color: #BFD3FF; font-size: 13px; font-weight: 700; }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); animation: pulse 2s infinite; }
h1.big { font-family: var(--display); font-weight: 900; font-size: clamp(38px, 6vw, 72px); line-height: 1.02; letter-spacing: -.03em; margin: 18px 0 18px; }
h1.big em { font-style: normal; background: linear-gradient(90deg, #19C6FF, #2B6BFF 60%, #7FA8FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: #B5C1E6; font-size: 19px; max-width: 560px; }
.try { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; max-width: 560px; }
.field { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30, 107, 255, .18); }
.field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-size: 17px; font-weight: 700; }
.field input::placeholder { color: #56618A; font-weight: 600; }
.hero-logo { justify-self: center; position: relative; width: min(420px, 80vw); aspect-ratio: 1; animation: float 6s ease-in-out infinite; }
.hero-logo img { width: 100%; height: 100%; border-radius: 22%; box-shadow: 0 30px 120px rgba(30, 107, 255, .45), 0 0 0 1px rgba(127, 168, 255, .25); }
.trust { margin-top: 18px; color: var(--muted); font-size: 14px; }

.section { padding: 72px 0; }
.section h2 { font-family: var(--display); font-weight: 900; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.02em; margin: 0 0 12px; line-height: 1.1; }
.section .sub { color: var(--muted); font-size: 17px; max-width: 640px; margin: 0 0 36px; }

.showcase { position: relative; overflow: hidden; padding: 30px 0 30px; margin-top: -22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; gap: 22px; width: max-content; animation: marquee 60s linear infinite; }
.phone { position: relative; flex: 0 0 auto; width: 220px; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #000; border: 1px solid #1A2552; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); transition: transform .35s var(--ease), box-shadow .35s; }
.phone:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 30px 80px rgba(30, 107, 255, .35); }
.phone video { width: 100%; height: 100%; object-fit: cover; }
.phone .tag { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(3, 4, 10, .75); backdrop-filter: blur(8px); font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.phone .tag img { width: 20px; height: 20px; border-radius: 6px; }
.made { text-align: center; margin-top: 8px; color: var(--muted); font-weight: 700; }
.made b { color: var(--text); }

.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card { background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: 22px; padding: 24px; transition: transform .3s var(--ease), border-color .3s; }
.card:hover { transform: translateY(-4px); border-color: #24357A; }
.card .num { font-family: var(--display); font-weight: 900; color: var(--cyan); font-size: 15px; }
.card h3 { margin: 10px 0 6px; font-size: 19px; font-weight: 800; }
.card p { margin: 0; color: var(--muted); }
.feat { display: flex; gap: 14px; align-items: flex-start; }
.feat .ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; background: rgba(30, 107, 255, .12); border: 1px solid #1F3170; display: flex; align-items: center; justify-content: center; color: var(--cyan); }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 26px; background: var(--panel); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.plan:hover { transform: translateY(-6px); }
.plan.hot { border-color: var(--blue); box-shadow: 0 20px 70px rgba(30, 107, 255, .25); background: linear-gradient(180deg, #0F1D4A, var(--panel)); }
.plan .badge { position: absolute; top: -12px; right: 22px; padding: 5px 12px; border-radius: 99px; background: var(--blue); font-size: 12px; font-weight: 800; }
.plan .price { font-family: var(--display); font-weight: 900; font-size: 46px; letter-spacing: -.03em; }
.plan .price small { font-family: var(--body); font-size: 15px; color: var(--muted); font-weight: 700; }
.plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; color: #C5D0F0; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li svg { flex: 0 0 auto; margin-top: 3px; color: var(--cyan); }
.plan .btn { margin-top: auto; }

details.faq { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); margin-bottom: 10px; overflow: hidden; }
details.faq summary { cursor: pointer; padding: 18px 20px; font-weight: 800; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary span { transition: transform .3s var(--ease); color: var(--cyan); }
details.faq[open] summary span { transform: rotate(45deg); }
details.faq p { margin: 0; padding: 0 20px 18px; color: var(--muted); animation: enter .3s var(--ease); }
footer.foot { border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--muted); font-size: 14px; }

/* ---------- app ---------- */
.shell { display: flex; min-height: 100vh; }
.side { width: 260px; flex: 0 0 auto; padding: 22px 16px; border-right: 1px solid var(--line); background: linear-gradient(180deg, #050816, var(--bg)); display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; }
.side .nav { display: flex; flex-direction: column; gap: 4px; }
.side .nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border-radius: 13px; color: var(--muted); font-weight: 700; transition: color .2s, background .2s, transform .15s; }
.side .nav a:hover { color: var(--text); background: rgba(255, 255, 255, .03); }
.side .nav a:active { transform: scale(.97); }
.side .nav a.on { color: #fff; background: linear-gradient(90deg, rgba(30, 107, 255, .22), rgba(30, 107, 255, .04)); }
.side .nav a.on::before { content: ""; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: fadein .3s; }
.side .usage { margin-top: auto; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 10px; }
.bar { height: 8px; border-radius: 99px; background: #141D40; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width .8s var(--ease); }
.main { flex: 1; min-width: 0; padding: 32px clamp(18px, 4vw, 48px) 60px; }
.mtop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.mtop h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; }
.mtop p { margin: 4px 0 0; color: var(--muted); }
.mobile-nav { display: none; }
@media (max-width: 860px) {
  .side { display: none; }
  .mobile-nav { display: flex; position: fixed; z-index: 40; left: 10px; right: 10px; bottom: 10px; padding: 6px; border-radius: 18px; background: rgba(10, 15, 36, .92); backdrop-filter: blur(14px); border: 1px solid var(--line); justify-content: space-around; }
  .mobile-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; font-size: 11px; font-weight: 700; color: var(--muted); border-radius: 12px; }
  .mobile-nav a.on { color: #fff; background: rgba(30, 107, 255, .2); }
  .main { padding-bottom: 110px; }
}

.gen { position: relative; overflow: visible; z-index: 2; padding: 30px; border-radius: 26px; background: radial-gradient(120% 140% at 0% 0%, #10225C 0%, var(--panel) 45%, var(--bg2) 100%); border: 1px solid #1C2B66; }
.gen h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 900; font-size: 24px; }
.gen p { margin: 0 0 20px; color: #A9B6E0; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-weight: 800; cursor: pointer; transition: all .2s var(--ease); }
.chip:hover { border-color: #2A3A78; }
.chip:active { transform: scale(.95); }
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 6px 22px rgba(30, 107, 255, .4); }
.lbl { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }

.job { margin-top: 18px; padding: 22px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); animation: pop .4s var(--ease); }
.job-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.job-head h3 { margin: 0; font-size: 18px; font-weight: 800; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 800; background: rgba(30, 107, 255, .14); color: #BFD3FF; }
.status.done { background: rgba(61, 255, 168, .12); color: var(--ok); }
.status.error { background: rgba(255, 90, 110, .12); color: #FFB3BD; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(191, 211, 255, .3); border-top-color: #BFD3FF; animation: spin .8s linear infinite; }
.prog { margin: 16px 0 10px; height: 10px; border-radius: 99px; background: #111A3C; overflow: hidden; }
.prog > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--cyan), var(--blue)); background-size: 200% 100%; animation: shimmer 2s linear infinite; transition: width .9s var(--ease); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; }
.stp { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #4D5885; transition: color .3s; }
.stp i { width: 10px; height: 10px; border-radius: 50%; background: #1A2550; transition: background .3s, box-shadow .3s; }
.stp.now { color: var(--text); }
.stp.now i { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulse 1.6s infinite; }
.stp.ok { color: #9BB0E8; }
.stp.ok i { background: var(--blue); }
.msg { color: var(--muted); font-size: 14px; margin-top: 8px; }

.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.clip { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); overflow: hidden; cursor: pointer; text-align: left; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.clip:hover { transform: translateY(-5px); border-color: #2A3A78; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.clip:active { transform: scale(.98); }
.clip .thumb { aspect-ratio: 9 / 16; background: #000 center / cover no-repeat; position: relative; }
.clip .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3, 4, 10, .9)); }
.clip .play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(30, 107, 255, .85); display: flex; align-items: center; justify-content: center; transform: scale(.8); opacity: 0; transition: all .3s var(--ease); }
.clip:hover .play { transform: scale(1); opacity: 1; }
.clip .info { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; }
.clip .info b { display: block; font-size: 15px; line-height: 1.25; }
.clip .info span { font-size: 12px; color: #A9B6E0; }
.empty { padding: 48px 24px; text-align: center; border: 1px dashed #22306A; border-radius: 22px; color: var(--muted); }
.empty h3 { color: var(--text); margin: 12px 0 6px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { padding: 20px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.kpi span { color: var(--muted); font-size: 14px; font-weight: 700; }
.kpi b { display: block; font-family: var(--display); font-weight: 900; font-size: 30px; letter-spacing: -.02em; margin-top: 6px; }
.kpi small { color: var(--cyan); font-weight: 800; }
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.pnl { padding: 22px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.pnl h3 { margin: 0 0 16px; font-size: 17px; font-weight: 800; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 10px; align-items: center; margin-bottom: 12px; font-size: 14px; }
.hbar .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .bar { grid-column: 1 / -1; margin-top: -6px; }
.hbar .v { text-align: right; font-weight: 800; }

/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; z-index: 60; background: rgba(2, 3, 8, .72); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 18px; animation: fadein .25s ease both; }
.modal-bg.closing { animation: fadeout .22s ease both; }
.modal { position: relative; width: min(920px, 100%); max-height: calc(100vh - 36px); overflow: auto; border-radius: 26px; background: var(--bg2); border: 1px solid #1C2B66; box-shadow: 0 40px 120px rgba(0, 0, 0, .7); animation: pop .32s var(--ease) both; }
.modal-bg.closing .modal { animation: shrink .22s ease both; }
.modal.small { width: min(460px, 100%); }
.modal .x { position: absolute; top: 14px; right: 14px; z-index: 2; }
.modal-body { padding: 26px; }
.player { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; }
@media (max-width: 760px) { .player { grid-template-columns: 1fr; } }
.player video { width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; background: #000; }
.copybox { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.copybox .h { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.copybox textarea { width: 100%; resize: none; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 600 14px/1.45 var(--body); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.form input, .form select { min-height: 44px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 700; }
.form .full { grid-column: 1 / -1; }

/* ---------- avisos ---------- */
#toasts { position: fixed; z-index: 80; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { pointer-events: auto; min-width: 240px; max-width: 360px; padding: 14px 16px; border-radius: 14px; background: #0E1638; border: 1px solid #22306A; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); font-weight: 700; font-size: 14px; animation: enter .35s var(--ease) both; }
.toast.ok { border-color: rgba(61, 255, 168, .4); }
.toast.bad { border-color: rgba(255, 90, 110, .5); }
.toast.out { animation: leave .25s ease both; }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255, 196, 61, .35); background: rgba(255, 196, 61, .07); color: #FFE2A1; font-size: 14px; margin-bottom: 18px; animation: enter .4s var(--ease); }

/* =========================================================
   Página de vendas
   ========================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal.vis { opacity: 1; transform: none; }
.reveal.zoom { transform: scale(.94); }
.reveal.zoom.vis { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

.sales { position: relative; overflow: hidden; }
.sales::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background:
  radial-gradient(40% 35% at 85% 10%, rgba(30, 107, 255, .16), transparent 70%),
  radial-gradient(35% 30% at 5% 60%, rgba(25, 198, 255, .08), transparent 70%); }
.grid-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(127, 168, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 168, 255, .06) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent); }

.s-hero { position: relative; padding: 64px 0 56px; }
.s-hero .in { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
@media (max-width: 980px) { .s-hero .in { grid-template-columns: 1fr; } }
.s-hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(38px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -.035em; margin: 20px 0; }
.s-hero h1 .line { display: block; overflow: hidden; }
.s-hero h1 .line > span { display: inline-block; animation: rise .9s var(--ease) both; animation-delay: calc(var(--d) * 110ms + 150ms); }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.grad { background: linear-gradient(90deg, #19C6FF, #2B6BFF 55%, #9DBBFF); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shift 6s ease-in-out infinite; }
@keyframes shift { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.s-hero .lead { font-size: 20px; color: #B9C5EA; max-width: 560px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.btn-xl { min-height: 60px; padding: 0 30px; font-size: 17px; border-radius: 16px; }
.btn-glow { animation: pulse 2.4s infinite; }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; color: #9FB0DC; font-size: 14px; font-weight: 700; }
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row svg { color: var(--cyan); }

.stage { position: relative; height: 600px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 980px) { .stage { height: 520px; } }
.stage .ring { position: absolute; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(127, 168, 255, .16); animation: spin 40s linear infinite; }
.stage .ring::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.stage .ring.r2 { width: 380px; height: 380px; animation-duration: 26s; animation-direction: reverse; }
.stage .halo { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(30, 107, 255, .45), transparent 65%); filter: blur(20px); animation: glow 5s ease-in-out infinite; }
.hp { position: absolute; width: 230px; aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: #000; border: 2px solid #22336F; box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 0 6px rgba(255, 255, 255, .02); }
.hp video { width: 100%; height: 100%; object-fit: cover; }
.hp.a { transform: translateX(-160px) scale(.86); animation: fa 7s ease-in-out infinite; z-index: 1; opacity: .9; }
.hp.b { z-index: 3; animation: fb 6s ease-in-out infinite; }
.hp.c { transform: translateX(160px) scale(.86); animation: fc 8s ease-in-out infinite; z-index: 2; opacity: .9; }
@keyframes fa { 0%, 100% { transform: translateX(-160px) scale(.86) translateY(0); } 50% { transform: translateX(-160px) scale(.86) translateY(-16px); } }
@keyframes fb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes fc { 0%, 100% { transform: translateX(160px) scale(.86) translateY(0); } 50% { transform: translateX(160px) scale(.86) translateY(-18px); } }
@media (max-width: 520px) { .hp { width: 180px; } .hp.a { display: none; } .hp.c { display: none; } }
.fbadge { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: rgba(10, 16, 40, .86); backdrop-filter: blur(12px); border: 1px solid #22336F; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); font-weight: 800; font-size: 14px; white-space: nowrap; }
.fbadge .dot { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(30, 107, 255, .2); color: var(--cyan); }
.fbadge small { display: block; color: var(--muted); font-weight: 700; font-size: 12px; }
.fbadge.b1 { top: 30px; left: -20px; animation: fb 5s ease-in-out infinite; }
.fbadge.b2 { bottom: 110px; right: -10px; animation: fb 6.5s ease-in-out infinite .6s; }
.fbadge.b3 { bottom: 30px; left: 30px; animation: fb 5.5s ease-in-out infinite 1.2s; }
@media (max-width: 520px) { .fbadge.b1 { left: 0; } .fbadge.b2 { right: 0; } .fbadge.b3 { display: none; } }

.ticker { border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(30, 107, 255, .08), rgba(25, 198, 255, .04)); overflow: hidden; padding: 18px 0; }
.ticker .track { animation-duration: 40s; gap: 0; }
.ticker span { display: inline-flex; align-items: center; gap: 18px; padding: 0 22px; font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: -.01em; color: #CFDBFF; white-space: nowrap; }
.ticker span::after { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--blue); transform: rotate(45deg); box-shadow: 0 0 12px var(--blue); }

.kicker { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.center { text-align: center; }
.center .sub { margin-left: auto; margin-right: auto; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.stat { position: relative; overflow: hidden; padding: 30px 26px; border-radius: 24px; background: linear-gradient(180deg, #0C1534, var(--bg2)); border: 1px solid var(--line); }
.stat b { display: block; white-space: nowrap; font-family: var(--display); font-weight: 900; font-size: clamp(36px, 3.4vw, 50px); letter-spacing: -.04em; line-height: 1; }
.stat span { display: block; margin-top: 10px; color: var(--muted); font-weight: 700; }
.stat::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(30, 107, 255, .3), transparent 70%); }

.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.benefit { position: relative; padding: 26px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; overflow: hidden; }
.benefit::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at var(--mx, 50%) var(--my, 0%), rgba(30, 107, 255, .18), transparent 70%); opacity: 0; transition: opacity .35s; }
.benefit:hover { transform: translateY(-6px); border-color: #2B3F86; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.benefit:hover::before { opacity: 1; }
.benefit .ic { position: relative; width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(43, 123, 255, .3), rgba(30, 107, 255, .08)); border: 1px solid #2A3F8A; color: #9FD8FF; margin-bottom: 16px; }
.benefit h3 { position: relative; margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.benefit p { position: relative; margin: 0; color: var(--muted); }

.who { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.who .card h3 { font-size: 20px; }

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.compare .col { padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: var(--panel); }
.compare .col.good { border-color: #2B4FC0; background: linear-gradient(180deg, #0F1E55, var(--panel)); box-shadow: 0 30px 80px rgba(30, 107, 255, .2); }
.compare h3 { margin: 0 0 18px; font-family: var(--display); font-size: 22px; font-weight: 900; }
.compare ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.compare li { display: flex; gap: 12px; align-items: flex-start; color: #C5D0F0; }
.compare li svg { flex: 0 0 auto; margin-top: 2px; }
.compare .bad svg { color: #FF7A8A; }
.compare .good svg { color: var(--ok); }

.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
@media (max-width: 980px) { .prices { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
.price-card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 32px 28px; border-radius: 28px; background: var(--panel); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.price-card:hover { transform: translateY(-8px); }
.price-card.best { border: 1px solid transparent; background: linear-gradient(var(--bg2), var(--bg2)) padding-box, linear-gradient(160deg, #19C6FF, #2B6BFF 40%, #0A2A8C) border-box; box-shadow: 0 40px 120px rgba(30, 107, 255, .35); }
@media (min-width: 981px) { .price-card.best { transform: scale(1.04); } .price-card.best:hover { transform: scale(1.04) translateY(-8px); } }
.price-card .ribbon { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); padding: 7px 16px; border-radius: 99px; background: linear-gradient(90deg, #19C6FF, #2B6BFF); color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 30px rgba(30, 107, 255, .5); animation: pulse 2.4s infinite; }
.price-card .pname { font-family: var(--display); font-weight: 900; font-size: 20px; }
.price-card .pdesc { color: var(--muted); font-size: 14px; margin-top: 2px; }
.price-card .inst { color: #CFDBFF; font-weight: 800; font-size: 15px; }
.price-card .big { font-family: var(--display); font-weight: 900; font-size: 50px; letter-spacing: -.04em; line-height: 1; }
.price-card .big small { font-size: 20px; letter-spacing: 0; }
.price-card .cash { color: var(--muted); font-size: 14px; margin-top: 6px; }
.price-card .save { display: inline-flex; align-self: flex-start; padding: 6px 12px; border-radius: 99px; background: rgba(61, 255, 168, .12); color: var(--ok); font-size: 13px; font-weight: 800; }
.price-card .limit { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(30, 107, 255, .1); border: 1px solid #22336F; font-weight: 800; }
.price-card .limit svg { color: var(--cyan); }
.price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; color: #C5D0F0; font-size: 15px; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; }
.price-card li svg { flex: 0 0 auto; margin-top: 3px; color: var(--cyan); }
.price-card .btn { margin-top: auto; width: 100%; }

.paybar { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.pay { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-weight: 800; font-size: 14px; }
.pay svg { color: var(--cyan); }
.paynote { text-align: center; color: var(--muted); font-size: 14px; margin-top: 16px; }

.guarantee { display: flex; gap: 22px; align-items: center; padding: 28px; border-radius: 26px; border: 1px solid #22336F; background: linear-gradient(90deg, rgba(30, 107, 255, .12), rgba(25, 198, 255, .04)); max-width: 900px; margin: 40px auto 0; }
.guarantee .seal { flex: 0 0 auto; width: 90px; height: 90px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, #1D4BD6, #0A2A8C); border: 2px solid #4C86FF; box-shadow: 0 0 40px rgba(30, 107, 255, .5); font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; animation: float 5s ease-in-out infinite; }
.guarantee .seal small { font-family: var(--body); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.guarantee h3 { margin: 0 0 6px; font-size: 20px; }
.guarantee p { margin: 0; color: #B9C5EA; }
@media (max-width: 600px) { .guarantee { flex-direction: column; text-align: center; } }

.final { position: relative; overflow: hidden; text-align: center; padding: 64px 28px; border-radius: 34px; background: radial-gradient(80% 120% at 50% 0%, #1A47D6 0%, #0B1A55 45%, var(--bg2) 100%); border: 1px solid #2B4FC0; }
.final h2 { font-size: clamp(30px, 4.6vw, 54px); }
.final .sub { color: #C9D6FF; margin: 0 auto 28px; }
.final::after { content: ""; position: absolute; inset: -50%; background: conic-gradient(from 0deg, transparent, rgba(25, 198, 255, .12), transparent 30%); animation: spin 12s linear infinite; pointer-events: none; }
.final > * { position: relative; z-index: 1; }

.foot .pays { display: flex; gap: 8px; flex-wrap: wrap; }
.foot .pays span { padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line); font-size: 12px; font-weight: 800; color: #9FB0DC; }

/* analytics: valor por clip e campanhas */
.worth { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(61, 255, 168, .08); border: 1px solid rgba(61, 255, 168, .25); color: #C5D0F0; font-weight: 700; }
.worth svg { color: var(--ok); }
.worth b { margin-left: auto; color: var(--ok); font-size: 18px; }
.vtable { display: flex; flex-direction: column; }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) 90px 130px 90px; gap: 12px; align-items: center; padding: 10px 6px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; transition: background .2s; }
.vrow:hover { background: rgba(30, 107, 255, .08); }
.vrow.head { cursor: default; border-top: 0; color: var(--muted); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.vrow.head:hover { background: none; }
.vrow .t { display: flex; align-items: center; gap: 10px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow .t img { width: 30px; height: 44px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; }
.vrow .m { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow b { color: var(--ok); }
@media (max-width: 640px) { .vrow { grid-template-columns: minmax(0, 1fr) 70px 80px; } .vrow > :nth-child(3) { display: none; } }
.camps { display: flex; flex-direction: column; gap: 8px; }
.camp-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); animation: enter .3s var(--ease); }
.camp-row span { margin-left: auto; color: var(--muted); font-size: 14px; }

.ticker { position: relative; }
.ticker .tlabel { text-align: center; margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ticker span img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 6px 20px rgba(0, 0, 0, .45); }

/* seleção personalizada */
.pick { position: relative; }
.pick-btn { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 700; cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .2s; }
.pick-btn:hover, .pick.open .pick-btn { border-color: #2B4FC0; }
.pick.open .pick-btn { box-shadow: 0 0 0 3px rgba(30, 107, 255, .25); }
.pick-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-chev { flex: 0 0 auto; color: var(--muted); transition: transform .25s var(--ease); }
.pick.open .pick-chev { transform: rotate(180deg); color: var(--cyan); }
.pick-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: 240px; overflow: auto; border-radius: 14px; background: #0B1330; border: 1px solid #2B3F86; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top; pointer-events: none; transition: opacity .18s, transform .22s var(--ease); }
.pick.up .pick-list { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; transform: translateY(6px) scale(.98); }
.pick.open .pick-list { opacity: 1; transform: none; pointer-events: auto; }
.pick-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-weight: 700; color: #C5D0F0; transition: background .15s, color .15s; }
.pick-list li:hover, .pick-list li.hi { background: rgba(30, 107, 255, .16); color: #fff; }
.pick-list li.sel { color: #fff; }
.pick-list li svg { color: var(--cyan); }
.form .lbl-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }

/* créditos */
.cost { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid #22336F; background: rgba(30, 107, 255, .08); animation: enter .35s var(--ease); }
.cost .ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255, 196, 61, .14); color: #FFC43D; flex: 0 0 auto; }
.cost b { display: block; }
.cost small { color: var(--muted); font-weight: 700; }
.cost .after, .cost .btn { margin-left: auto; }
.cost .after { color: var(--ok); font-weight: 800; font-size: 14px; white-space: nowrap; }
.cost.short { border-color: rgba(255, 90, 110, .45); background: rgba(255, 90, 110, .08); }
.cost.short .ic { background: rgba(255, 90, 110, .15); color: #FF7A8A; }
.chip small { opacity: .7; font-weight: 700; }
.side a.usage { text-decoration: none; transition: border-color .2s; }
.side a.usage:hover { border-color: #2B4FC0; }
.side .usage span { display: inline-flex; align-items: center; gap: 6px; }
.side .usage span svg { color: #FFC43D; }
.side .usage small { color: var(--cyan); font-weight: 800; }

/* apagar: aviso de risco */
.risk-ic { width: 62px; height: 62px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; background: rgba(255, 90, 110, .14); color: #FF7A8A; border: 1px solid rgba(255, 90, 110, .4); animation: shake .5s .15s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px) rotate(-3deg); } 40%, 80% { transform: translateX(5px) rotate(3deg); } }
.risk-list { list-style: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; border-radius: 14px; background: rgba(255, 90, 110, .06); border: 1px solid rgba(255, 90, 110, .25); color: #E8C9CF; font-size: 14px; }
.risk-list li { display: flex; gap: 10px; align-items: flex-start; }
.risk-list svg { color: #FF7A8A; flex: 0 0 auto; margin-top: 2px; }
.risk-list b { color: #fff; }
.risk-check { display: flex; gap: 10px; align-items: center; margin-top: 16px; font-weight: 700; cursor: pointer; }
.risk-check input { width: 20px; height: 20px; accent-color: #FF5A6E; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* compra segura: passo a passo e reembolso */
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
@media (max-width: 980px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps4 { grid-template-columns: 1fr; } }
.step4 { position: relative; padding: 26px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.step4 .ic { width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: linear-gradient(180deg, rgba(43, 123, 255, .3), rgba(30, 107, 255, .08)); border: 1px solid #2A3F8A; color: #9FD8FF; }
.step4 h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.step4 p { margin: 0; color: var(--muted); }
.refund { margin-top: 18px; padding: 26px; border-radius: 24px; border: 1px solid rgba(61, 255, 168, .25); background: linear-gradient(180deg, rgba(61, 255, 168, .06), transparent); }
.refund h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 20px; }
.refund h3 svg { color: var(--ok); }
.refund-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .refund-grid { grid-template-columns: 1fr; } }
.refund-grid b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.refund-grid b svg { color: var(--cyan); }
.refund-grid p { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 520px) { .cost { flex-wrap: wrap; } .cost > div { flex: 1 1 0; } .cost .after, .cost .btn { margin-left: 54px; } }

/* busca do criador com foto */
.csearch { position: relative; min-width: 0; }
.csearch .field { width: 100%; }
.cres { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); padding: 6px; border-radius: 18px; background: #0B1330; border: 1px solid #2B3F86; box-shadow: 0 30px 70px rgba(0, 0, 0, .65); max-height: 380px; overflow: auto; opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); }
.csearch.open .cres { opacity: 1; transform: none; pointer-events: auto; }
.copt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 13px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; animation: enter .3s var(--ease) both; }
.copt:hover, .copt.hi { background: rgba(30, 107, 255, .16); }
.cinfo { min-width: 0; flex: 1 1 auto; }
.cinfo b { display: flex; align-items: center; gap: 6px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cinfo small { display: block; color: var(--muted); font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbadge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #9AA6C8; color: #05070F; flex: 0 0 auto; }
.ctag { flex: 0 0 auto; padding: 5px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; background: rgba(255, 196, 61, .12); color: #FFC43D; }
.ctag.ok { background: rgba(61, 255, 168, .12); color: var(--ok); }
.cempty { display: flex; align-items: center; gap: 10px; padding: 14px; color: var(--muted); font-weight: 700; }
.avatar { flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: #111A3D; box-shadow: 0 0 0 2px #22336F; }
.avatar.fb { display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; color: #CFDBFF; background: linear-gradient(160deg, #1E6BFF, #0A2A8C); }
.cpick { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 10px 8px 8px; border-radius: 18px; border: 1px solid #2B4FC0; background: linear-gradient(90deg, rgba(30, 107, 255, .16), rgba(30, 107, 255, .04)); animation: enter .35s var(--ease); }
.cpick[hidden], .csearch .field[hidden] { display: none; }
.cpick .avatar { box-shadow: 0 0 0 2px var(--cyan), 0 0 22px rgba(25, 198, 255, .4); }

/* quantidade de cortes e aviso de créditos */
.chip { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 58px; padding: 8px 16px; }
.chip small { display: block; font-size: 12px; opacity: .75; }
.chip.best { border-color: #2B4FC0; }
.chip-tag { display: inline-block; padding: 3px 8px; border-radius: 99px; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(90deg, #19C6FF, #2B6BFF); color: #fff; }
.chip .chip-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 6px 16px rgba(30, 107, 255, .45); }
.risk-ic.warn { background: rgba(255, 196, 61, .12); color: #FFC43D; border-color: rgba(255, 196, 61, .4); }
.alt { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px; border-radius: 16px; border: 1px solid #2B4FC0; background: linear-gradient(90deg, rgba(30, 107, 255, .16), rgba(30, 107, 255, .04)); animation: enter .4s var(--ease) .1s both; }
.alt b { display: block; font-family: var(--display); font-size: 22px; margin-top: 8px; }
.alt small { color: var(--muted); font-weight: 700; }
.chips { padding-top: 8px; }

/* gerar: o que faz, plataformas, contas, vídeos e opções */
.what { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; padding: 18px 20px; margin-bottom: 16px; border-radius: 20px; border: 1px solid #22336F; background: linear-gradient(90deg, rgba(30, 107, 255, .12), rgba(25, 198, 255, .03)); animation: enter .45s var(--ease); }
.what-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #1E6BFF, #0A2A8C); color: #fff; box-shadow: 0 10px 30px rgba(30, 107, 255, .4); }
.what b { font-size: 17px; }
.what p { margin: 2px 0 0; color: #B9C5EA; }
.what-steps { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.what-steps span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 13px; font-weight: 800; color: #CFDBFF; animation: enter .4s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 150ms); }
.what-steps span svg { color: var(--cyan); }
.what-steps span + span::before { content: "→"; margin-right: 2px; color: var(--muted); }
.ptabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ptab { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-weight: 800; cursor: pointer; transition: all .2s var(--ease); }
.ptab img { border-radius: 6px; }
.ptab:hover { border-color: #2A3A78; }
.ptab.on { border-color: #2B6BFF; background: rgba(30, 107, 255, .16); box-shadow: 0 0 0 3px rgba(30, 107, 255, .18); }
.ptab:active { transform: scale(.96); }
.csearch[hidden] { display: none; }
.accs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.accs:empty { display: none; }
.acc { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; max-width: min(380px, 100%); min-height: 66px; padding: 8px 10px 8px 8px; border-radius: 18px; border: 1px solid #2B4FC0; background: linear-gradient(90deg, rgba(30, 107, 255, .16), rgba(30, 107, 255, .04)); animation: enter .35s var(--ease); }
.acc-av { position: relative; flex: 0 0 auto; }
.acc-av .avatar { box-shadow: 0 0 0 2px var(--cyan), 0 0 18px rgba(25, 198, 255, .35); }
.acc-plat { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 6px; box-shadow: 0 0 0 2px var(--bg2); }
.acc-more { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 66px; border-radius: 18px; border: 1px dashed #2A3A78; color: var(--muted); font-weight: 700; font-size: 14px; }
.acc-more svg { color: var(--cyan); }
.vids { margin-top: 16px; }
.vstrip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.vcard { flex: 0 0 200px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; animation: enter .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.vcard b { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcard small { color: var(--muted); font-weight: 700; font-size: 12px; }
.vthumb { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #13204F, #0A1230); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .5); transition: transform .25s var(--ease), border-color .25s; }
.vcard:hover .vthumb { transform: translateY(-3px); border-color: #2B4FC0; }
.vthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vdur { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .8); color: #fff; font-size: 11px; font-weight: 800; }
.vcard.sk { height: 150px; border-radius: 12px; background: linear-gradient(90deg, #0E1638, #16224F, #0E1638); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .opts { grid-template-columns: 1fr; } }
.opt { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); transition: opacity .25s; }
.opt .lbl { margin: 0 0 10px; }
.opt.off .seg { opacity: .4; pointer-events: none; }
.opt .hint { display: block; margin-top: 10px; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-b { position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-weight: 800; cursor: pointer; transition: all .2s var(--ease); }
.seg-b:hover { border-color: #2A3A78; }
.seg-b:active { transform: scale(.96); }
.seg-b.on { border-color: #2B6BFF; background: linear-gradient(180deg, rgba(43, 123, 255, .35), rgba(30, 107, 255, .14)); box-shadow: 0 8px 24px rgba(30, 107, 255, .25); }
.seg-b .chip-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.seg.secs { padding-top: 6px; }
.flag { width: 28px; height: 20px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 3px 8px rgba(0, 0, 0, .4); }
.fmt { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 14px; border-radius: 13px; border: 1px solid #2B6BFF; background: rgba(30, 107, 255, .12); }
.fmt b { display: block; }
.fmt small { color: var(--muted); font-weight: 700; }
.fmt > svg { margin-left: auto; color: var(--ok); }
.ratio { width: 22px; height: 38px; border-radius: 5px; border: 2px solid var(--cyan); box-shadow: 0 0 14px rgba(25, 198, 255, .4); flex: 0 0 auto; }
.gen h2 { font-size: 21px; }
.gen-go { width: 100%; }

/* administrador */
.mlist { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; max-height: 260px; overflow: auto; }
.mrow { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-weight: 700; }
.mrow span:not(.ctag) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow svg { color: var(--cyan); flex: 0 0 auto; }

/* entrar / criar conta: área do assinante */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
@media (max-width: 900px) { .auth { grid-template-columns: minmax(0, 1fr); } .auth-side { display: none; } }
.auth-side { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 28px; padding: 40px max(32px, env(safe-area-inset-left, 0px)) 40px 48px; background: radial-gradient(55% 45% at 10% 0%, rgba(30, 107, 255, .22), transparent 70%), radial-gradient(40% 40% at 90% 100%, rgba(25, 198, 255, .10), transparent 70%), linear-gradient(180deg, #070C22, var(--bg)); border-right: 1px solid var(--line); }
.auth-side > * { position: relative; z-index: 1; }
.auth-pitch { max-width: 460px; animation: enter .6s var(--ease) both; }
.auth-pitch h2 { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.03em; margin: 18px 0 22px; }
.auth-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.auth-perks li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: #D7E2FF; animation: enter .5s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 200ms); }
.auth-perks .ic { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(25, 198, 255, .14); border: 1px solid rgba(25, 198, 255, .3); color: var(--cyan); }
.auth-phone { position: absolute !important; right: 48px; bottom: 48px; width: 210px; aspect-ratio: 9 / 16; border-radius: 32px; overflow: hidden; background: #000; border: 2px solid #2B4FC0; box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 80px rgba(30, 107, 255, .35); animation: fb 6s ease-in-out infinite; z-index: 0 !important; }
.auth-phone video { width: 100%; height: 100%; object-fit: cover; }
.auth-badge { position: absolute !important; right: 230px; bottom: 90px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: rgba(10, 16, 40, .86); backdrop-filter: blur(12px); border: 1px solid #22336F; font-weight: 800; font-size: 14px; animation: fb 5s ease-in-out infinite .8s; z-index: 2 !important; }
.auth-badge .dot { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(61, 255, 168, .14); color: var(--ok); }
.auth-badge small { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 1180px) { .auth-badge { display: none; } }
@media (max-height: 760px) { .auth-phone { display: none; } }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding-block: 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); background: radial-gradient(50% 40% at 50% 0%, rgba(30, 107, 255, .14), transparent 70%); }
.auth-brand-m { display: none; }
@media (max-width: 900px) { .auth-brand-m { display: inline-flex; } }
.auth-card { width: 100%; max-width: 440px; padding: 30px; border-radius: 28px; border: 1px solid transparent; background: linear-gradient(var(--bg2), var(--bg2)) padding-box, linear-gradient(160deg, rgba(25, 198, 255, .7), rgba(43, 107, 255, .35) 40%, #1C2B66) border-box; box-shadow: 0 40px 120px rgba(30, 107, 255, .18); animation: enter .5s var(--ease); }
.auth-tabs .seg-b { min-height: 44px; }
.auth-card h1 { margin: 22px 0 6px; font-family: var(--display); font-size: 28px; letter-spacing: -.02em; }
.auth-card .sub { margin: 0 0 22px; color: var(--muted); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.af { display: flex; flex-direction: column; gap: 6px; }
.af > span { font-size: 13px; font-weight: 800; color: var(--muted); }
.af .field { flex: 0 0 auto; min-height: 54px; }
.auth-form .btn-xl { margin-top: 6px; }
.auth-foot { margin: 20px 0 0; text-align: center; color: var(--muted); font-weight: 700; }
.auth-foot a { color: var(--cyan); }
.auth-help { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.auth-back { color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: none; }
.auth-back:hover { color: var(--text); }
.ubox { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.clients { display: flex; flex-direction: column; gap: 8px; }
.client { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.client .pick { min-width: 170px; }
.client input[type=number] { min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 700; }
@media (max-width: 900px) { .auth-side { display: none !important; } .auth-main { min-height: 100vh; } }

/* entrar: só assinantes */
.auth-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; background: rgba(25, 198, 255, .1); border: 1px solid rgba(25, 198, 255, .25); color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.auth-card h1 { margin-top: 16px; }
.af .field .eye { margin-left: auto; width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); }
.af .field .eye.on { color: var(--cyan); }
.info-btn { display: inline-flex; align-items: center; gap: 8px; margin: 18px auto 0; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: #CFDBFF; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: all .2s var(--ease); }
.info-btn svg { color: var(--cyan); }
.info-btn:hover, .info-btn.on { border-color: #2B4FC0; background: rgba(30, 107, 255, .12); }
.auth-card .info-btn { display: flex; width: fit-content; }
.acesso { margin-top: 14px; padding: 16px; border-radius: 18px; border: 1px solid #22336F; background: rgba(30, 107, 255, .06); animation: enter .35s var(--ease); }
.acesso ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; position: relative; }
.acesso li { display: flex; gap: 12px; align-items: flex-start; animation: enter .4s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
.acesso .n { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #1E6BFF, #0A2A8C); color: #fff; box-shadow: 0 6px 18px rgba(30, 107, 255, .35); }
.acesso b { display: block; font-size: 14.5px; }
.acesso p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.acesso-foot { margin: 14px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.auth-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; color: var(--muted); font-weight: 700; font-size: 14px; }
.newclient { display: flex; flex-direction: column; gap: 12px; padding: 16px; margin-bottom: 14px; border-radius: 16px; border: 1px dashed #2B4FC0; background: rgba(30, 107, 255, .05); }
.newclient > b { display: flex; align-items: center; gap: 8px; }
.newclient > b svg { color: var(--cyan); }
.nc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .nc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .nc-grid { grid-template-columns: 1fr; } }
.nc-grid input { min-height: 44px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 700; min-width: 0; }
.af .field input { min-width: 0; }
.pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .pay-grid { grid-template-columns: 1fr; } }
.pay-grid input, .hookbox input { min-height: 44px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 700; min-width: 0; width: 100%; }
.hookbox { margin-top: 14px; padding: 14px; border-radius: 14px; border: 1px solid #22336F; background: rgba(30, 107, 255, .05); }
.hookbox > b { display: flex; align-items: center; gap: 8px; }
.hookbox > b svg { color: var(--cyan); }
.hookbox p { margin: 6px 0 10px; color: var(--muted); font-size: 14px; }
.client.pending { border-color: rgba(61, 255, 168, .45); background: rgba(61, 255, 168, .05); }
.pulse-soft { animation: pulse 2.4s infinite; }

/* planos: meu plano atual */
.myplan { padding: 26px; margin-bottom: 30px; border-radius: 24px; border: 1px solid transparent; background: linear-gradient(var(--bg2), var(--bg2)) padding-box, linear-gradient(140deg, rgba(25, 198, 255, .6), rgba(43, 107, 255, .3) 40%, #1C2B66) border-box; box-shadow: 0 30px 90px rgba(30, 107, 255, .14); animation: enter .45s var(--ease); }
.mp-head h2 { margin: 12px 0 4px; font-family: var(--display); font-size: 28px; }
.mp-head p { margin: 0; color: var(--muted); }
.mp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; background: rgba(255, 255, 255, .06); color: #CFDBFF; }
.mp-badge.ok { background: rgba(61, 255, 168, .12); color: var(--ok); }
.mp-badge.warn { background: rgba(255, 196, 61, .12); color: #FFC43D; }
.mp-badge.bad { background: rgba(255, 90, 110, .14); color: #FF7A8A; }
.mp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
@media (max-width: 1100px) { .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mp-grid { grid-template-columns: 1fr; } }
.mp-item { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); animation: enter .4s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.mp-item .ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(30, 107, 255, .14); color: var(--cyan); }
.mp-item small { display: block; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.mp-item b { display: block; font-size: 15.5px; }
.mp-period { margin-top: 18px; }
.mp-period small { color: var(--muted); font-weight: 700; }
.mp-period .bar { margin-top: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.mp-period .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #19C6FF, #2B6BFF); transition: width 1s var(--ease); }
.mp-title { font-family: var(--display); font-size: 22px; margin: 0 0 30px; }
.price-card.mine { border: 1px solid transparent; background: linear-gradient(var(--bg2), var(--bg2)) padding-box, linear-gradient(160deg, #3DFFA8, #19C6FF 50%, #1C2B66) border-box; }
.ribbon.mine { background: linear-gradient(90deg, #2BD98F, #19C6FF); }

/* documentos legais */
.legal-wrap { padding-block: 36px 60px; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.legal-tab { padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); color: #CFDBFF; font-weight: 800; font-size: 14px; text-decoration: none; transition: all .2s var(--ease); }
.legal-tab:hover { border-color: #2A3A78; }
.legal-tab.on { border-color: #2B6BFF; background: rgba(30, 107, 255, .14); color: #fff; }
.legal-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .legal-grid { grid-template-columns: minmax(0, 1fr); } .legal-toc { display: none !important; } }
.legal-toc { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); max-height: calc(100vh - 120px); overflow: auto; }
.legal-toc b { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.legal-toc a { padding: 7px 8px; border-radius: 8px; color: #B9C5EA; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.legal-toc a:hover { background: rgba(30, 107, 255, .12); color: #fff; }
.legal-doc { max-width: 760px; }
.legal-doc h1 { font-family: var(--display); font-size: clamp(30px, 4vw, 44px); letter-spacing: -.02em; margin: 6px 0 14px; text-wrap: balance; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.legal-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: #CFDBFF; font-size: 13px; font-weight: 800; }
.legal-meta span:last-child { color: var(--ok); border-color: rgba(61, 255, 168, .3); }
.legal-intro { font-size: 17px; line-height: 1.7; color: #D7E2FF; padding: 18px 20px; border-left: 3px solid var(--blue); background: rgba(30, 107, 255, .06); border-radius: 0 14px 14px 0; }
.legal-doc section { scroll-margin-top: 90px; padding-top: 10px; }
.legal-doc h2 { font-size: 20px; margin: 26px 0 10px; }
.legal-doc p { line-height: 1.75; color: #C2CDEE; margin: 0 0 12px; }
.legal-end { margin-top: 30px !important; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted) !important; font-size: 14px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 14px; }
.legal-links a { color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.legal-links a:hover { color: var(--text); text-decoration: underline; }
.auth-main .legal-links { justify-content: center; }
.legal-note a { color: var(--cyan); }
/* cancelar plano */
.mp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.mp-cancel { color: #FF9AA7; border-color: rgba(255, 90, 110, .35); }
.mp-cancel:hover { background: rgba(255, 90, 110, .08); }
.lnk-small { color: var(--muted); font-size: 13px; font-weight: 700; }
.guar { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 14px; margin-bottom: 14px; }
.guar svg { flex: 0 0 auto; margin-top: 2px; }
.guar.ok { background: rgba(61, 255, 168, .08); border: 1px solid rgba(61, 255, 168, .3); color: #C9F7E2; }
.guar.ok svg { color: var(--ok); }
.guar.bad { background: rgba(255, 196, 61, .08); border: 1px solid rgba(255, 196, 61, .3); color: #FFE6AE; }
.guar.bad svg { color: #FFC43D; }
.cancel-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: #C5D0F0; font-size: 14px; }
.btn.disabled { opacity: .45; pointer-events: auto; cursor: not-allowed; }

/* "Qualquer influenciador. Agora, clipado." */
.anyone { position: relative; padding: 90px 0; overflow: hidden; }
.anyone::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 60% at 80% 50%, rgba(30, 107, 255, .16), transparent 70%); pointer-events: none; }
.anyone-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
@media (max-width: 980px) { .anyone-in { grid-template-columns: minmax(0, 1fr); } }
.anyone h2 { font-family: var(--display); font-weight: 900; font-size: clamp(38px, 5.4vw, 76px); line-height: .98; letter-spacing: -.035em; margin: 0 0 22px; }
.anyone h2 span { display: block; }
.anyone h2 .a1 { color: #E8EEFF; }
.anyone-copy p { font-size: 19px; color: #B9C5EA; max-width: 560px; margin: 0 0 22px; }
.anyone-plats { display: flex; flex-wrap: wrap; gap: 10px; }
.anyone-plats span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-weight: 800; }
.anyone-plats img { border-radius: 6px; }
.anyone-demo { padding: 22px; border-radius: 26px; border: 1px solid transparent; background: linear-gradient(var(--bg2), var(--bg2)) padding-box, linear-gradient(150deg, rgba(25, 198, 255, .6), rgba(43, 107, 255, .3) 45%, #1C2B66) border-box; box-shadow: 0 40px 110px rgba(30, 107, 255, .2); }
.ad-search { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border-radius: 16px; border: 1px solid #2B4FC0; background: rgba(30, 107, 255, .08); font-weight: 800; font-size: 17px; }
.ad-search svg { color: var(--cyan); flex: 0 0 auto; }
.ad-typed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-caret { width: 2px; height: 22px; background: var(--cyan); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ad-steps { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.ad-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); color: var(--muted); font-weight: 800; font-size: 14.5px; opacity: .35; transform: translateX(-6px); transition: opacity .35s, transform .35s var(--ease), color .35s, border-color .35s; }
.ad-step .ic { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .05); }
.anyone-demo.done .ad-step { opacity: 1; transform: none; color: #E8EEFF; transition-delay: calc(var(--i) * 420ms); }
.anyone-demo.done .ad-step .ic { background: rgba(30, 107, 255, .2); color: var(--cyan); }
.anyone-demo.done .ad-step:last-child { border-color: rgba(61, 255, 168, .4); color: var(--ok); }
.anyone-demo.done .ad-step:last-child .ic { background: rgba(61, 255, 168, .15); color: var(--ok); }
.ad-clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ad-clip { aspect-ratio: 9 / 13; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, #13204F, #0A1230); padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; opacity: .3; transform: scale(.94); transition: opacity .4s, transform .5s var(--ease); }
.ad-clip i { flex: 1; border-radius: 9px; background: linear-gradient(135deg, rgba(25, 198, 255, .25), rgba(43, 107, 255, .1)); }
.ad-clip b { height: 8px; width: 80%; border-radius: 4px; background: rgba(255, 255, 255, .25); }
.ad-clip small { height: 6px; width: 50%; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.anyone-demo.done .ad-clip { opacity: 1; transform: none; transition-delay: calc(1.7s + var(--i) * 150ms); }

/* demo com clips reais */
.ad-clip { aspect-ratio: 9 / 16; padding: 0; position: relative; overflow: hidden; background: #000; }
.ad-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-cap { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 1.2; color: #fff; background: rgba(5, 10, 30, .72); backdrop-filter: blur(6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-cap svg { flex: none; color: var(--cyan); }
.ad-typed { font-weight: 700; }

/* carrossel sempre andando + "sem editar nada" */
.phone .ph-mute { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(3, 4, 10, .6); backdrop-filter: blur(6px); color: #fff; }
.phone .tag svg { color: var(--ok); flex: none; }
.nofuss { margin: 6px auto 0; max-width: 860px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.nf-step { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(13, 20, 48, .6); font-weight: 700; font-size: 15px; }
.nf-step svg { color: var(--cyan); }
.nf-step .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: linear-gradient(135deg, #1E6BFF, #19C6FF); color: #fff; }
.nf-step + .nf-step::before { content: ""; width: 18px; height: 2px; margin-left: -28px; margin-right: 6px; background: var(--line); display: none; }
.nf-note { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 15px; text-align: center; }
.nf-note svg { color: var(--ok); flex: none; }
.nf-note b { color: #E8EEFF; }
@media (max-width: 600px) { .nf-step { font-size: 14px; padding: 9px 13px; } .nf-note { font-size: 14px; align-items: flex-start; text-align: left; } }

/* demo: carrossel de clips (sem som, só passando) */
.ad-reel { overflow: hidden; margin: 0 -4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); opacity: .35; transition: opacity .6s 1.6s; }
.anyone-demo.done .ad-reel { opacity: 1; }
.ad-track { display: flex; gap: 10px; width: max-content; animation: marquee 38s linear infinite; }
.ad-reel .ad-clip { flex: 0 0 auto; width: 122px; aspect-ratio: 9 / 16; opacity: 1; transform: none; transition: none; }
.ad-ok { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #03140B; }
@media (max-width: 600px) { .ad-reel .ad-clip { width: 104px; } }
@media (prefers-reduced-motion: reduce) { .ad-track { animation: none; } }

/* metodologia: genéricos x Zairon */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 980px; margin: 0 auto; }
.vs-col { border-radius: 22px; padding: 26px; border: 1px solid var(--line); background: rgba(13, 20, 48, .55); }
.vs-col.bad { background: linear-gradient(180deg, rgba(255, 90, 110, .07), rgba(13, 20, 48, .4)); border-color: rgba(255, 90, 110, .25); }
.vs-col.good { background: linear-gradient(180deg, rgba(30, 107, 255, .16), rgba(13, 20, 48, .5)); border-color: rgba(25, 198, 255, .45); box-shadow: 0 24px 70px rgba(30, 107, 255, .18); }
.vs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.vs-head b { display: block; font-size: 20px; }
.vs-head small { color: var(--muted); }
.vs-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.bad .vs-ic { background: rgba(255, 90, 110, .15); color: var(--bad); }
.good .vs-ic { background: rgba(61, 255, 168, .14); color: var(--ok); }
.vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vs-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; }
.vs-col li svg { flex: none; margin-top: 3px; }
.bad li { color: #C9CFE6; } .bad li svg { color: var(--bad); }
.good li { color: #EEF3FF; font-weight: 600; } .good li svg { color: var(--ok); }
.lied { max-width: 980px; margin: 22px auto 0; padding: 34px 30px; border-radius: 24px; text-align: center; border: 1px solid rgba(255, 90, 110, .3); background: radial-gradient(120% 140% at 50% 0%, rgba(255, 90, 110, .14), rgba(13, 20, 48, .5) 60%); }
.lied h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 900; letter-spacing: -.02em; font-size: clamp(32px, 5vw, 52px); line-height: 1.05; color: #fff; }
.lied p { margin: 0 auto 12px; max-width: 680px; color: #C9CFE6; font-size: 17px; line-height: 1.55; }
.lied .lied-big { color: #fff; font-weight: 800; font-size: clamp(19px, 2.4vw, 24px); }
.lied small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 760px) { .vs { grid-template-columns: minmax(0, 1fr); } .vs-col { padding: 20px; } .lied { padding: 26px 18px; } }
.lied .lied-you { color: var(--cyan); font-weight: 800; font-size: 17px; margin-bottom: 14px; }
.section .sub .hl { color: #fff; font-weight: 800; }

/* legendas: carrossel com fundo clarinho tipo PNG */
.opt-wide { grid-column: 1 / -1; min-width: 0; }
.cap-sel { font-weight: 600; color: var(--muted); font-size: 13px; text-transform: none; letter-spacing: 0; }
.cap-sel b { color: var(--cyan); }
.cap-wrap { position: relative; margin: 10px -4px 8px; }
.cap-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 4px 12px; scrollbar-width: none; }
.cap-row::-webkit-scrollbar { display: none; }
.cap-card { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-self: flex-start; flex: 0 0 154px; scroll-snap-align: start; padding: 0; border: 2px solid var(--line); border-radius: 16px; background: #0C1330; color: var(--text); cursor: pointer; overflow: hidden; text-align: left; transition: transform .25s var(--ease), border-color .2s, box-shadow .25s; }
.cap-card:hover { transform: translateY(-3px); }
.cap-card.on { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(25, 198, 255, .25), 0 14px 34px rgba(30, 107, 255, .3); }
.cap-prev { height: 128px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, rgba(150, 165, 210, .22), rgba(110, 125, 175, .12)); border-bottom: 1px solid rgba(255, 255, 255, .06); backdrop-filter: blur(6px); }
.cap-w { display: inline-block; line-height: 1.15; white-space: nowrap; max-width: 100%; }
.cap-w.pop { animation: cappop .28s var(--ease); }
@keyframes cappop { from { transform: scale(1.18); } to { transform: none; } }
.cap-lbl { padding: 9px 10px 10px; font-size: 13px; font-weight: 700; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.cap-ok { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cyan); color: #03122B; opacity: 0; transform: scale(.6); transition: .2s; }
.on > .cap-ok { opacity: 1; transform: none; }
.cap-nav { position: absolute; top: 50%; z-index: 2; width: 38px; height: 38px; margin-top: -30px; border-radius: 50%; border: 1px solid var(--line); background: rgba(8, 12, 32, .9); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.cap-nav.l { left: -8px; } .cap-nav.l svg { transform: rotate(180deg); }
.cap-nav.r { right: -8px; }
@media (max-width: 600px) { .cap-nav { display: none; } .cap-card { flex-basis: 132px; } .cap-prev { height: 112px; } }

/* vozes do narrador */
.voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0 8px; }
.vcard2 { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: #0C1330; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.vcard2.on { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(25, 198, 255, .2); }
.vplay-b { padding: 0; border: 0; background: none; cursor: pointer; }
.vplay { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #1E6BFF, #19C6FF); color: #fff; flex: none; }
.vplay.on { animation: pulse 1.2s infinite; }
.vtxt { min-width: 0; }
.vtxt b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.vtxt small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 600px) { .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .vcard2 { padding: 8px; gap: 8px; } .vplay { width: 30px; height: 30px; } .vtxt b { font-size: 13px; } .vtxt small { font-size: 11.5px; } .vcard2 .chip-tag { display: none; } }
.organic { max-width: 980px; margin: 18px auto 0; display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 18px; border: 1px solid rgba(61, 255, 168, .35); background: linear-gradient(90deg, rgba(61, 255, 168, .1), rgba(13, 20, 48, .4)); font-size: 17px; color: #C9CFE6; }
.organic b { color: #fff; font-size: 19px; }
.org-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(61, 255, 168, .15); color: var(--ok); }
@media (max-width: 600px) { .organic { align-items: flex-start; font-size: 15px; padding: 16px; } .organic b { font-size: 17px; } }
@media (max-width: 600px) { .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .vcard2 { padding: 8px; gap: 8px; } .vplay { width: 30px; height: 30px; } .vtxt b { font-size: 13px; } .vtxt small { font-size: 11.5px; } .vcard2 .chip-tag { display: none; } }

/* legendas: abas por cor + prévia ao vivo */
.cap-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 10px; }
.cap-side { min-width: 0; }
.cap-phone { position: relative; width: 210px; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #000; border: 2px solid #1E2A5C; box-shadow: 0 20px 50px rgba(0, 0, 0, .55), 0 0 0 6px rgba(30, 107, 255, .08); }
.cap-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-cap { position: absolute; left: 0; right: 0; top: 58%; display: flex; justify-content: center; transform: translateY(-50%); pointer-events: none; }
.pv-badge { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; background: rgba(3, 4, 10, .65); backdrop-filter: blur(6px); }
.pv-voice { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 700; background: rgba(3, 4, 10, .65); backdrop-filter: blur(6px); }
.cap-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.cap-tabs::-webkit-scrollbar { display: none; }
.cap-tab { flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line); background: #0C1330; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: .2s; }
.cap-tab.on { border-color: var(--cyan); background: rgba(25, 198, 255, .12); }
.cap-tab .sw { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.cap-tab .sw.multi { background: conic-gradient(#FFF, #4DE8FF, #FFE34D, #FF5FD2, #3DFF6E, #FFF); }
.cap-tab .n { font-size: 11px; color: var(--muted); font-weight: 800; }
@media (max-width: 760px) { .cap-layout { grid-template-columns: minmax(0, 1fr); } .cap-phone { width: 170px; margin: 0 auto; } }

/* pedido em andamento: "espera aí, criando…" */
.live { display: flex; gap: 18px; align-items: stretch; margin-top: 14px; }
.live-phone { position: relative; flex: none; width: 92px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid #1E2A5C;
  background: linear-gradient(110deg, #0E1638 30%, #1B2A66 50%, #0E1638 70%); background-size: 250% 100%; animation: shimmer 1.8s linear infinite; }
.lp-scan { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(25, 198, 255, .28), transparent); animation: lpscan 2.2s ease-in-out infinite; }
@keyframes lpscan { from { top: -30%; } to { top: 100%; } }
.lp-num { position: relative; font-family: var(--display); font-weight: 900; font-size: 22px; }
.live-phone small { position: relative; color: var(--cyan); font-weight: 800; font-size: 11px; }
.live-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.live-txt > b { font-size: 17px; }
.eta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.eta svg { color: var(--cyan); } .eta strong { color: #fff; }
.live-hint { color: var(--muted); display: flex; align-items: center; gap: 4px; }
.live .prog { margin: 2px 0 0; } .live .steps { margin: 0; } .live .msg { margin: 0; }
.nav a.ping { position: relative; }
.nav a.ping::after { content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(61, 255, 168, .2); }
@media (max-width: 600px) { .live-phone { width: 70px; } .live { gap: 12px; } }

/* "Visual do clip": prévia fiel ao vídeo final (4K 2160x3840) */
.cap-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 22px; }
.pv-col { position: sticky; top: 16px; }
.cap-phone { width: 230px; background: #000; }
.pv-stage { position: absolute; inset: 0; }
.pv-panel { position: absolute; left: 0; right: 0; top: 21.875%; height: 56.25%; }
.pv-clip { position: absolute; inset: 0; overflow: hidden; }
.pv-clip > video, .pv-clip > .pv-img, .pv-clip > .pv-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-panel > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-cap { top: 55%; }
.pv-bar { position: absolute; left: 0; right: 0; height: 50.5%; background: #000; transform: translateY(0); opacity: 0; }
.pv-bar.t { top: 0; } .pv-bar.b { bottom: 0; }
.pv-title { position: absolute; left: 0; right: 0; bottom: calc(100% + 2px); text-align: center; font-family: "zc-MontserratBoldttf", sans-serif; font-weight: 700; white-space: nowrap; color: #fff; }
.pv-title .sk { font-size: .9em; }
.pv-replay { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 99px; border: 0; font: inherit; font-size: 11px; font-weight: 800; color: #fff; background: rgba(30, 107, 255, .85); cursor: pointer; }
/* abertura: mesma curva da edição (ease-out cúbico, 1,6 s) */
.cap-phone.run .pv-stage, .cap-phone.run .pv-bar, .cap-phone.run .pv-title { animation-duration: 1.6s; animation-timing-function: cubic-bezier(.33, 1, .68, 1); animation-fill-mode: both; }
.cap-phone.run.a-sobe .pv-stage, .cap-phone.run.a-subir .pv-stage { animation-name: pvrise; }
.cap-phone.run.a-descer .pv-stage { animation-name: pvfall; }
.cap-phone.run.a-sobe .pv-bar, .cap-phone.run.a-abre .pv-bar { opacity: 1; }
.cap-phone.run.a-sobe .pv-bar.t, .cap-phone.run.a-abre .pv-bar.t { animation-name: pvbart; }
.cap-phone.run.a-sobe .pv-bar.b, .cap-phone.run.a-abre .pv-bar.b { animation-name: pvbarb; }
.cap-phone.run.a-sobe .pv-title, .cap-phone.run.a-abre .pv-title { animation-name: pvtitle; }
@keyframes pvrise { from { transform: translateY(13.54%); } to { transform: none; } }
@keyframes pvfall { from { transform: translateY(-13.54%); } to { transform: none; } }
@keyframes pvbart { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes pvbarb { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes pvtitle { from { transform: translateY(var(--half, 60px)); } to { transform: none; } }
.pv-cap { z-index: 1; } .pv-bar { z-index: 2; } .pv-title { z-index: 3; }
.sub-lbl { margin: 4px 0 8px; font-size: 13px; font-weight: 800; color: #DDE5FF; }
.sub-lbl small { font-weight: 600; color: var(--muted); }
.cap-side > .sub-lbl:not(:first-child) { margin-top: 18px; }
.tcolors { display: flex; flex-wrap: wrap; gap: 8px; }
.tcol { display: flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: 99px; border: 1px solid var(--line); background: #0C1330; color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tcol i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.tcol.on { border-color: var(--cyan); background: rgba(25, 198, 255, .12); }
.intros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.intro { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 0 0 10px; border-radius: 14px; border: 2px solid var(--line); background: #0C1330; color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.intro.on { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(25, 198, 255, .2); }
.intro .iv { width: 100%; aspect-ratio: 9 / 16; background: #000; margin-bottom: 6px; }
.intro video { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro b { padding: 0 9px; font-size: 13px; } .intro small { padding: 0 9px; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.intro .chip-tag { position: absolute; top: 8px; left: 8px; }
@media (max-width: 1100px) { .intros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cap-layout { grid-template-columns: minmax(0, 1fr); } .pv-col { position: static; } .cap-phone { width: 190px; } .intros { display: flex; overflow-x: auto; scrollbar-width: none; } .intro { flex: 0 0 112px; } }
@media (max-width: 760px) { .tcolors { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .tcol { flex: none; } }

/* banners de divulgação (Analytics) */
.banners { position: relative; margin-bottom: 18px; user-select: none; }
.bn-view { overflow: hidden; border-radius: 22px; }
.bn-track { display: flex; transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.bn { position: relative; flex: 0 0 100%; min-height: 230px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 20px; padding: 30px 36px; overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px; }
.bn-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 90% at 85% 50%, var(--g2), transparent 70%), radial-gradient(70% 120% at 0% 0%, var(--g1), transparent 60%), var(--bg0); }
.bn-glow::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, transparent, #000 60%); }
.bn-blue { --bg0: #061031; --g1: rgba(30, 107, 255, .45); --g2: rgba(25, 198, 255, .35); --ac: #4DE8FF; }
.bn-gold { --bg0: #1A1104; --g1: rgba(255, 179, 0, .35); --g2: rgba(255, 210, 74, .3); --ac: #FFD24A; }
.bn-purple { --bg0: #12062B; --g1: rgba(140, 70, 255, .45); --g2: rgba(255, 61, 203, .3); --ac: #D7A6FF; }
.bn-cyan { --bg0: #04182A; --g1: rgba(25, 198, 255, .4); --g2: rgba(30, 107, 255, .35); --ac: #4DE8FF; }
.bn-green { --bg0: #03190F; --g1: rgba(61, 255, 110, .3); --g2: rgba(0, 200, 120, .35); --ac: #3DFF9E; }
.bn-pink { --bg0: #1D0618; --g1: rgba(255, 61, 160, .4); --g2: rgba(255, 120, 60, .3); --ac: #FF8AD8; }
.bn-navy { --bg0: #070B22; --g1: rgba(80, 90, 255, .4); --g2: rgba(255, 210, 74, .25); --ac: #FFD24A; }
.bn-orange { --bg0: #1C0B02; --g1: rgba(255, 120, 30, .4); --g2: rgba(255, 60, 60, .3); --ac: #FFAA5C; }
.bn-teal { --bg0: #031819; --g1: rgba(0, 210, 190, .35); --g2: rgba(30, 107, 255, .3); --ac: #5CF2E0; }
.bn-red { --bg0: #1C0408; --g1: rgba(255, 50, 80, .4); --g2: rgba(120, 60, 255, .3); --ac: #FF7A8C; }
.bn-copy { position: relative; min-width: 0; }
.bn-k { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ac); }
.bn-k img { width: 20px; height: 20px; border-radius: 6px; }
.bn h3 { margin: 12px 0 8px; font-family: var(--display); font-weight: 900; font-size: clamp(24px, 3vw, 36px); line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.bn h3 em { font-style: normal; color: var(--ac); }
.bn p { margin: 0 0 16px; max-width: 470px; color: rgba(230, 236, 255, .78); font-size: 15px; line-height: 1.5; }
.bn-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: #fff; color: #050814; font-weight: 800; font-size: 14px; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s; }
.bn-cta:hover { transform: translateY(-2px); }
.bn-vis { position: relative; height: 100%; min-height: 170px; display: grid; place-items: center; }
/* entrada dos elementos quando o banner aparece */
.bn .bn-copy > *, .bn-vis > * { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.bn.on .bn-copy > *, .bn.on .bn-vis > * { opacity: 1; transform: none; }
.bn.on .bn-copy > :nth-child(2) { transition-delay: .08s; } .bn.on .bn-copy > :nth-child(3) { transition-delay: .16s; } .bn.on .bn-copy > :nth-child(4) { transition-delay: .24s; } .bn.on .bn-vis > * { transition-delay: .2s; }
.bn-phones { position: relative; width: 260px; height: 190px; }
.bn-ph { position: absolute; top: 50%; left: 50%; width: 96px; aspect-ratio: 9 / 16; border-radius: 14px; background: #000 center / cover; border: 2px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); transform: translate(calc(-50% + (var(--i) - 1) * 82px), -50%) rotate(calc((var(--i) - 1) * 8deg)); animation: bnfloat 4s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
.bn-ph:nth-child(2) { z-index: 2; width: 108px; }
@keyframes bnfloat { 50% { margin-top: -8px; } }
.bn-big { text-align: center; }
.bn-big b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(54px, 7vw, 92px); line-height: .95; letter-spacing: -.03em; background: linear-gradient(180deg, #fff, var(--ac)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .4)); }
.bn-big small { color: rgba(230, 236, 255, .7); font-weight: 700; }
.bn-caps { display: grid; gap: 4px; justify-items: center; transform: rotate(-4deg); }
.bn-caps span { font-weight: 900; line-height: 1; }
.bn-caps .c1 { font-size: 38px; color: #FFE34D; text-shadow: 0 0 6px #000, 0 0 12px #000, 0 0 18px #000; }
.bn-caps .c2 { font-size: 32px; padding: 4px 12px; background: #fff; color: #111; }
.bn-caps .c3 { font-size: 48px; color: #fff; -webkit-text-stroke: 5px #000; paint-order: stroke fill; text-shadow: 5px 5px 0 #FF3DCB; }
.bn-vid { width: 108px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .2); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); background: #000; }
.bn-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-chart { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.bn-chart i { width: 22px; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--ac), rgba(255, 255, 255, .1)); transform-origin: bottom; animation: bnbar 1.2s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * .08s); }
@keyframes bnbar { from { transform: scaleY(0); } }
.bn-logos { display: flex; gap: 18px; }
.bn-logos span { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: rgba(255, 255, 255, .95); box-shadow: 0 16px 36px rgba(0, 0, 0, .45); animation: bnfloat 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
.bn-logos img { width: 44px; height: 44px; }
.bn-avs { display: grid; gap: 10px; }
.bn-avs span { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-weight: 800; transform: translateX(calc(var(--i) * 18px)); }
.bn-avs i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: linear-gradient(135deg, var(--ac), #FF3B3B); color: #fff; }
.bn-wave { display: flex; align-items: center; gap: 5px; height: 120px; }
.bn-wave i { width: 6px; height: 30%; border-radius: 9px; background: var(--ac); animation: bnwave 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -.09s); }
@keyframes bnwave { 50% { height: 95%; } }
.bn-nav { position: absolute; top: 50%; margin-top: -19px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); background: rgba(5, 8, 20, .7); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .2s; }
.banners:hover .bn-nav { opacity: 1; }
.bn-nav.l { left: 12px; } .bn-nav.l svg { transform: rotate(180deg); } .bn-nav.r { right: 12px; }
.bn-dots { position: absolute; left: 36px; bottom: 14px; display: flex; gap: 6px; }
.bn-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .3); cursor: pointer; transition: width .3s, background .3s; }
.bn-dots button.on { width: 24px; background: #fff; }
@media (max-width: 760px) {
  .bn { grid-template-columns: minmax(0, 1fr); padding: 22px 20px 34px; min-height: 360px; align-content: start; }
  .bn-vis { min-height: 150px; order: -1; } .bn-phones { transform: scale(.8); } .bn p { font-size: 14px; } .bn-dots { left: 20px; } .bn-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bn-track { transition: none; } .bn-ph, .bn-logos span, .bn-wave i, .bn-chart i { animation: none; } }
.bn { padding-bottom: 44px; }
.bn-nav { top: auto; bottom: 10px; margin-top: 0; width: 34px; height: 34px; opacity: .85; }
.bn-nav.l { left: auto; right: 56px; } .bn-nav.r { right: 14px; }
.bn { padding-bottom: 44px; }
.bn-nav { top: auto; bottom: 10px; margin-top: 0; width: 34px; height: 34px; opacity: .85; }
.bn-nav.l { left: auto; right: 56px; } .bn-nav.r { right: 14px; }
.bn-avs i { background: linear-gradient(135deg, #19C6FF, #2B6BFF); }

/* +500 aberturas: mini celular animado em cada card */
.mini { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #000; overflow: hidden; margin-bottom: 6px; }
.pv-img { position: absolute; inset: 0; background: #111 url(/static/img/demo/amostra.jpg) center / cover; }
.pv-bar.t, .pv-bar.b { left: 0; right: 0; width: auto; height: 50.5%; }
.pv-bar.l, .pv-bar.r { top: 0; bottom: 0; height: auto; width: 50.5%; }
.pv-bar.l { left: 0; } .pv-bar.r { right: 0; left: auto; }
.pv-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 4; }
.mini .pv-title { font-size: 7px; font-family: "zc-MontserratBoldttf", sans-serif; }
.intro { flex: 0 0 120px; }
.cap-wrap .intro { scroll-snap-align: start; }
.intros { display: none; }
.intro b { font-size: 12.5px; } .intro small { min-height: 2.6em; }
/* legendas: busca, cards e personalizar */
.cap-search { width: 100%; margin: 0 0 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: #0A1029; color: var(--text); font: inherit; font-size: 14px; }
.cap-search:focus { outline: 2px solid rgba(25, 198, 255, .5); border-color: transparent; }
.cap-card .cap-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
.custom { margin-top: 12px; padding: 16px; border-radius: 16px; border: 1px dashed rgba(25, 198, 255, .45); background: rgba(25, 198, 255, .05); }
.custom.on { border-style: solid; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(25, 198, 255, .18); }
.cu-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; color: var(--cyan); }
.cu-head b { color: #fff; } .cu-head small { color: var(--muted); }
.cu-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.cu-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 230px; overflow-y: auto; padding-right: 4px; }
.cu-font { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0C1330; color: #fff; font-size: 19px; line-height: 1.1; text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cu-font small { font-family: var(--body); font-weight: 600; font-size: 10.5px; color: var(--muted); }
.cu-font.on { border-color: var(--cyan); background: rgba(25, 198, 255, .12); }
.cu-colors { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.cu-colors label { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 99px; border: 1px solid var(--line); background: #0C1330; font-size: 13px; font-weight: 700; cursor: pointer; }
.cu-colors input[type=color] { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.cu-colors input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .cu-colors input[type=color]::-webkit-color-swatch { border: 2px solid rgba(255, 255, 255, .3); border-radius: 50%; }
.cu-up input { accent-color: var(--cyan); width: 16px; height: 16px; }
.cu-effs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
@media (max-width: 760px) { .cu-grid { grid-template-columns: minmax(0, 1fr); } .intro { flex-basis: 104px; } }

/* Analytics: olá, períodos, gráfico */
.hello { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
.hello h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; }
.hello small { color: var(--muted); }
.wave { display: inline-block; animation: wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave { 0%, 60%, 100% { transform: none; } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-8deg); } }
.eye-btn { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: #0C1330; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.eye-btn[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
body.hide-data .secret { filter: blur(8px); user-select: none; }
body.hide-data .secret-svg { opacity: 0; }
.pwrap { position: relative; margin-bottom: 14px; }
.periods { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.period { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line); background: #0C1330; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.period.on { background: linear-gradient(135deg, #1E6BFF, #19C6FF); border-color: transparent; color: #fff; }
.calpop { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: min(380px, 100%); padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: #0B1130; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.calpop[hidden] { display: none; }
.calpop p { margin: 6px 0 12px; color: var(--muted); font-size: 14px; } .calpop p strong { color: #fff; }
.calpop label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); flex: 1; min-width: 140px; }
.calpop input[type=date] { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0A1029; color: #fff; font: inherit; color-scheme: dark; }
.stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.s3 { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.s3 .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--muted); }
.s3.ok .ic { background: rgba(61, 255, 168, .14); color: var(--ok); } .s3.bad .ic { background: rgba(255, 90, 110, .14); color: var(--bad); }
.s3 b { display: block; font-family: var(--display); font-size: 22px; } .s3 small { color: var(--muted); }
.chart-pnl { margin-bottom: 14px; }
.chart { position: relative; width: 100%; overflow: visible; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.chart .ylab, .chart .xlab { fill: #8D98C4; font-size: 11.5px; font-weight: 600; font-family: var(--body); }
.chart .cline { fill: none; stroke: #19C6FF; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 4px 10px rgba(25, 198, 255, .35)); }
.cpt { cursor: pointer; outline: none; }
.cpt .hit { fill: transparent; }
.cpt .dot { fill: #0B1130; stroke: #4D6AA8; stroke-width: 2; transition: r .15s; }
.cpt.has .dot { stroke: #19C6FF; fill: #19C6FF; }
.cpt:hover .dot, .cpt:focus .dot, .cpt.on .dot { stroke: #fff; stroke-width: 3; r: 6.5; }
.ctip { position: absolute; z-index: 5; width: 230px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(25, 198, 255, .4); background: rgba(8, 12, 32, .96); backdrop-filter: blur(8px); box-shadow: 0 18px 44px rgba(0, 0, 0, .6); pointer-events: auto; }
.ctip[hidden] { display: none; }
.ct-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ct-h button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; }
.ct-big b, .ct-big .secret { font-family: var(--display); font-weight: 900; font-size: 24px; color: #3DFF9E; }
.ct-big small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.ct-grid { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; font-size: 13px; }
.ct-grid span { display: flex; align-items: center; gap: 5px; color: #C9CFE6; }
.ct-grid .ok { color: var(--ok); } .ct-grid .bad { color: var(--bad); }
.ct-clips { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); display: grid; gap: 2px; color: var(--muted); }
.mini-seg .seg-b { padding: 7px 12px; font-size: 13px; }
.panels.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
.crow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.crow:hover { background: rgba(255, 255, 255, .04); }
.crow .rank { width: 24px; height: 24px; flex: none; border-radius: 8px; display: grid; place-items: center; font-weight: 900; font-size: 12px; background: linear-gradient(135deg, #1E6BFF, #19C6FF); }
.crow img { width: 40px; height: 56px; flex: none; border-radius: 8px; object-fit: cover; background: #111; }
.crow .ci { min-width: 0; flex: 1; } .crow .ci b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.crow .ci small, .crow .cv small { color: var(--muted); font-size: 12px; }
.crow .cv { text-align: right; } .crow .cv b { display: block; font-size: 14px; }
.muted { color: var(--muted); }
@media (max-width: 760px) { .stat3 { grid-template-columns: minmax(0, 1fr); } .panels.two { grid-template-columns: minmax(0, 1fr); } .calpop { left: 0; right: auto; } }
.ctip svg { width: 14px; height: 14px; flex: none; }
.kpi .secret, .s3 .secret, .crow .secret, .ct-grid .secret, .hbar .secret, .vrow .secret { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; display: inline; }
.ctip svg { width: 14px; height: 14px; flex: none; }
.kpi .secret, .s3 .secret, .crow .secret, .ct-grid .secret, .hbar .secret, .vrow .secret { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; display: inline; }

/* setas de subiu/caiu e "Seus ganhos" */
.trend { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 99px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.trend svg { width: 14px; height: 14px; }
.trend.up { color: #3DFF9E; background: rgba(61, 255, 158, .12); }
.trend.down { color: #FF6A7E; background: rgba(255, 90, 110, .13); }
.trend.eq { color: var(--muted); background: rgba(255, 255, 255, .06); }
body.hide-data .trend { filter: blur(6px); }
.kpi-tr { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.kpi-tr small { color: var(--muted); font-size: 11.5px; }
.s3 > .trend { margin-left: auto; }
.sec-t { margin: 6px 0 10px; font-family: var(--display); font-size: 20px; }
.earn { margin-bottom: 14px; }
.earn-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.earn-top small { display: block; color: var(--muted); }
.earn-big { display: block; margin: 4px 0; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 5vw, 48px); letter-spacing: -.02em; background: linear-gradient(180deg, #fff, #3DFF9E); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.hide-data .earn-big .secret { color: #fff; }
.earn-best { padding: 12px 16px; border-radius: 14px; background: rgba(255, 210, 74, .08); border: 1px solid rgba(255, 210, 74, .3); text-align: right; }
.earn-best b { display: block; font-family: var(--display); font-size: 22px; color: #FFD24A; }
.er-list { display: grid; margin-bottom: 10px; }
.er-year { margin: 10px 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.er-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 76px 110px; align-items: center; gap: 10px; padding: 11px 10px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .05); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.er-row:hover { background: rgba(255, 255, 255, .04); }
.er-row.now { background: rgba(25, 198, 255, .07); }
.er-m { font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .er-m small { color: var(--cyan); font-weight: 700; }
.er-m .best { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: rgba(255, 210, 74, .14); color: #FFD24A; }
.er-c { color: var(--muted); font-size: 13px; }
.er-row b { text-align: right; font-size: 16px; }
.er-row .trend { justify-self: end; }
@media (max-width: 760px) { .er-row { grid-template-columns: minmax(0, 1fr) auto; } .er-c { grid-column: 1; font-size: 12px; } .er-row .trend { grid-row: 1; grid-column: 2; } .er-row b { grid-column: 2; } .earn-best { text-align: left; } }
.trend.ph { visibility: hidden; padding: 0; }
/* ganhos do mês: número branco + barra que enche */
.earn-big { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.earn-now { flex: 1; min-width: 240px; max-width: 560px; }
.earn-goal { margin-top: 12px; }
.eg-bar { height: 12px; border-radius: 99px; background: #111A3C; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.eg-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #1E6BFF, #19C6FF); box-shadow: 0 0 16px rgba(25, 198, 255, .5); transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }
.earn-goal small { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
body.hide-data .eg-bar i { opacity: .25; }
.earn-best { align-self: flex-start; }

/* integrações */
.integs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.integs.soon { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.integ { padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); display: grid; gap: 14px; align-content: start; }
.integ.on { border-color: rgba(61, 255, 168, .35); background: linear-gradient(180deg, rgba(61, 255, 168, .06), rgba(255, 255, 255, .01)); }
.integ.off { opacity: .6; }
.ig-top { display: flex; align-items: center; gap: 12px; }
.ig-top > div { flex: 1; min-width: 0; } .ig-top b { display: block; font-size: 17px; } .ig-top small { color: var(--muted); }
.ig-logo { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; background: #fff; overflow: hidden; }
.ig-logo img { width: 28px; height: 28px; object-fit: contain; } .ig-logo b { color: #0B1130; font-size: 20px; }
.ig-list { margin: 0 0 12px; padding-left: 18px; color: #C9CFE6; display: grid; gap: 4px; font-size: 14px; }
.ig-acc { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .ig-acc small { display: block; color: var(--muted); }
.ig-nums { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.ig-nums > div { flex: 1; min-width: 90px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.ig-nums b { display: block; font-family: var(--display); font-size: 20px; } .ig-nums small { color: var(--muted); font-size: 12px; }
.ig-nums .ok b { color: var(--ok); } .ig-nums .bad b { color: var(--bad); }
.ig-cta { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); border-style: dashed; }
.ig-cta div { flex: 1; } .ig-cta small { display: block; color: var(--muted); }
.integ .ctag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, .08); color: var(--muted); white-space: nowrap; }
.integ .ctag.ok { background: rgba(61, 255, 168, .14); color: var(--ok); }
@media (max-width: 760px) { .integs { grid-template-columns: minmax(0, 1fr); } }
/* integrações: etiqueta "Em breve" dentro do card; logo ao lado do nome */
.integ { position: relative; }
.integ.off .ig-top { padding-right: 76px; }
.integ.off .ctag { position: absolute; top: 14px; right: 14px; }
.panels.two .pnl h3 { display: flex; align-items: center; gap: 6px; }
.panels.two .pnl h3 img { margin: 0 !important; }
/* melhor mês: só um selo pequeno */
.earn-best { padding: 8px 12px; border-radius: 12px; display: flex; align-items: center; gap: 8px; text-align: left; }
.earn-best small { display: inline; margin: 0; font-size: 12px; }
.earn-best b { display: inline; font-size: 15px; }
@media (max-width: 760px) { .earn-best { flex-wrap: wrap; } }

/* premiação: placas (moldura sem fundo, a arte entra depois) */
.awards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 1100px; margin: 0 auto; }
.award { text-align: center; }
.plaque { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; border: 2px dashed var(--pq, rgba(255, 255, 255, .25)); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; transition: transform .35s var(--ease), box-shadow .35s; }
.award:hover .plaque { transform: translateY(-6px); box-shadow: 0 24px 60px -20px var(--pq); }
.plaque b { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; color: var(--pq); }
.plaque small { color: var(--muted); font-size: 13px; }
.pq-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--pq); border: 1px solid var(--pq); margin-bottom: 6px; }
.pq-soon { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.award h3 { margin: 14px 0 4px; font-size: 18px; }
.award p { margin: 0; color: var(--muted); font-size: 14.5px; } .award p b { color: #fff; }
.award.silver { --pq: #C9D3E6; } .award.gold { --pq: #FFD24A; } .award.diamond { --pq: #7FE3FF; } .award.record { --pq: #B57BFF; }
.awards-note { text-align: center; color: var(--muted); margin: 22px auto 0; }
@media (max-width: 900px) { .awards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plaque b { white-space: nowrap; font-size: clamp(22px, 2.5vw, 34px); }
/* placas: imagens reais + tamanho + como funciona */
.plaque-img { aspect-ratio: 4 / 5; display: grid; place-items: center; }
.plaque-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ease); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5)); }
.award:hover .plaque-img img { transform: translateY(-8px) rotate(-1deg); }
.a-size { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); color: #C9CFE6; font-size: 12.5px; font-weight: 700; }
.award-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin: 28px auto 0; }
.award-how > div { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); display: grid; gap: 4px; }
.award-how .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(25, 198, 255, .12); color: var(--cyan); margin-bottom: 4px; }
.award-how small { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 760px) { .award-how { grid-template-columns: minmax(0, 1fr); } }

/* placas no Analytics */
.plaq { margin-bottom: 14px; }
.plq-row { display: flex; gap: 22px; align-items: center; }
.plq-img { width: 120px; flex: none; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); }
.plq-txt { flex: 1; min-width: 0; display: grid; gap: 6px; }
.plq-name { font-family: var(--display); font-size: 22px; } .plq-name span { font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--muted); }
.plq-msg { margin: 0; font-weight: 700; color: #fff; }
.plq-bar { height: 14px; border-radius: 99px; background: #111A3C; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.plq-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #1E6BFF, #19C6FF); box-shadow: 0 0 16px rgba(25, 198, 255, .55); transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }
.plq-bar.v { height: 8px; } .plq-bar.v i { background: linear-gradient(90deg, #6D7BA8, #A9B6DA); box-shadow: none; }
.plq-bar.v.warn i { background: linear-gradient(90deg, #FF9F43, #FF5A6E); }
.plq-lbl { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.plq-won { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.plq-chip { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 14px; background: rgba(61, 255, 168, .08); border: 1px solid rgba(61, 255, 168, .3); }
.plq-chip img { width: 34px; } .plq-chip small { display: block; color: var(--muted); font-size: 11.5px; }
@media (max-width: 600px) { .plq-row { flex-direction: column; align-items: stretch; } .plq-img { width: 110px; align-self: center; } }

/* premiação: escada de níveis */
.stairs-wrap { overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 8px; scroll-snap-type: x mandatory; }
.stairs-wrap::-webkit-scrollbar { display: none; }
.stairs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(210px, 1.45fr); align-items: end; gap: 16px; min-width: 900px; max-width: 1180px; margin: 0 auto; padding-top: 20px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M3 96 L97 8' stroke='%2319C6FF' stroke-opacity='.45' stroke-width='.5' stroke-dasharray='1.6 1.6' fill='none' vector-effect='non-scaling-stroke'/></svg>") no-repeat center / 100% 100%; }
.step { position: relative; display: flex; flex-direction: column; align-items: center; scroll-snap-align: center; }
.st-plaque { position: relative; width: calc(78% + var(--i) * 4%); margin-bottom: -6px; z-index: 2; transition: transform .4s var(--ease); }
.step:hover .st-plaque { transform: translateY(-8px); }
.st-plaque > img:first-of-type { width: 100%; display: block; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)); }
.st-block { width: 100%; height: calc(84px + var(--i) * 46px); border-radius: 16px 16px 4px 4px; padding: 14px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 26%, #0d1433), #0a1029 70%); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-top: 3px solid var(--c);
  box-shadow: 0 -10px 30px -12px var(--c); }
.st-n { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.st-block b { font-family: var(--display); font-weight: 900; font-size: clamp(18px, 1.8vw, 24px); color: #fff; white-space: nowrap; }
.st-lvl { font-weight: 800; font-size: 13.5px; color: var(--c); }
.st-block small { color: var(--muted); font-size: 11.5px; }
/* o maior: 1 milhão em destaque */
.step.top .st-plaque { width: 100%; filter: drop-shadow(0 0 40px rgba(245, 207, 99, .35)); }
.step.top .st-block { background: linear-gradient(180deg, rgba(245, 207, 99, .25), #0a1029 75%); }
.step.top .st-block b { font-size: clamp(22px, 2.2vw, 30px); background: linear-gradient(180deg, #fff8d8, #f5cf63 55%, #b07a1d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-soon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 5px 14px; border-radius: 99px; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: #1a1206; background: linear-gradient(90deg, #fff1b8, #f5cf63, #d9a63e); box-shadow: 0 8px 20px rgba(245, 207, 99, .45); white-space: nowrap; }
.st-champ { position: absolute; right: -22%; bottom: 2%; width: 34%; z-index: 3; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); pointer-events: none; }
.st-curio { position: absolute; top: calc(100% + 10px); left: -30%; right: 0; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; color: #E8D9A8; background: rgba(245, 207, 99, .08); border: 1px solid rgba(245, 207, 99, .3); text-align: left; }
.stairs-wrap { padding-bottom: 96px; }
/* kit */
.kit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 30px; align-items: center; max-width: 1080px; margin: 10px auto 0; padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: radial-gradient(90% 120% at 20% 30%, rgba(30, 107, 255, .14), rgba(13, 20, 48, .4)); }
.kit-scene { position: relative; aspect-ratio: 5 / 4; }
.kit-scene img { position: absolute; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.k-letter { width: 40%; left: 2%; top: 4%; transform: rotate(-8deg); }
.k-plaque { width: 42%; left: 32%; top: 0; z-index: 2; }
.k-choc { width: 62%; right: -2%; bottom: 0; z-index: 3; transform: rotate(4deg); border-radius: 8px; }
.kit-txt h3 { margin: 6px 0 12px; font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); }
.kit-txt ul { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 8px; color: #C9CFE6; } .kit-txt li b { color: #fff; }
@media (max-width: 860px) { .kit { grid-template-columns: minmax(0, 1fr); padding: 18px; } .st-curio { left: -60%; } }
/* Analytics: nível atual */
.plq-level { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .plq-level b { font-family: var(--display); font-size: 22px; }
.st-block { height: calc(104px + var(--i) * 42px); }
.st-champ { right: -6%; width: 28%; }
.k-choc { clip-path: inset(4% 3% 5% 3% round 16px); }
/* placa de 1 milhão: secreta (suspense) */
.st-secret { position: relative; display: grid; place-items: center; border-radius: 10px; overflow: hidden; }
.st-secret img { width: 100%; display: block; filter: blur(16px) brightness(.45) saturate(1.3); transform: scale(1.08); }
.sq-q { position: absolute; font-family: var(--display); font-weight: 900; font-size: clamp(70px, 9vw, 130px); line-height: 1; color: transparent;
  background: linear-gradient(180deg, #fff8d8, #f5cf63 55%, #a26d12); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 24px rgba(245, 207, 99, .55)); animation: sqpulse 2.6s ease-in-out infinite; }
@keyframes sqpulse { 50% { transform: scale(1.06); filter: drop-shadow(0 0 40px rgba(245, 207, 99, .8)); } }
.sq-lock { position: absolute; bottom: 12%; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #f8dc8a; background: rgba(0, 0, 0, .55); border: 1px solid rgba(245, 207, 99, .45); }
.step.top .st-curio { color: #F3E3B0; }
.plq-img.st-secret { width: 120px; } .plq-img.st-secret .sq-q { font-size: 60px; }
@media (prefers-reduced-motion: reduce) { .sq-q { animation: none; } }
.st-plaque > img.st-champ { position: absolute; width: 30%; right: -10%; bottom: 0; }
.st-block { height: calc(120px + var(--i) * 40px); }
/* bombons dentro de uma caixa preta de presente (a borda esconde o corte da foto) */
.kit-scene .k-choc { position: absolute; width: 60%; right: 0; bottom: 2%; z-index: 3; padding: 14px; border-radius: 14px; transform: rotate(4deg); clip-path: none;
  background: linear-gradient(145deg, #2a2a2e, #0c0c0e 45%, #050506); box-shadow: 0 26px 36px -10px rgba(0, 0, 0, .7), inset 0 2px 1px rgba(255, 255, 255, .18); }
.kit-scene .k-choc img { position: static; display: block; width: 100%; border-radius: 6px; filter: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 2px #000; }
.kit-scene .k-choc::after { content: ""; position: absolute; inset: 14px; border-radius: 6px; box-shadow: inset 0 10px 16px rgba(0, 0, 0, .55), inset 0 -4px 10px rgba(0, 0, 0, .35); pointer-events: none; }
/* degraus: o texto nunca passa da borda */
.st-block { height: auto; min-height: calc(120px + var(--i) * 40px); }
/* kit: caixa aberta (o resto é segredo) */
.kit-scene.box { aspect-ratio: auto; }
.kit-scene.box img { position: static; width: 112%; margin-left: -6%; display: block; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.kit-txt p { color: #C9CFE6; margin: 0 0 14px; }
.kit-secret { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 14px; margin-bottom: 12px; background: rgba(25, 198, 255, .07); border: 1px dashed rgba(25, 198, 255, .45); color: #C9CFE6; }
.kit-secret svg { color: var(--cyan); flex: none; margin-top: 2px; } .kit-secret b { color: #fff; }
/* 3 placas: 10K, 100K e 1 milhão */
.stairs { grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(230px, 1.35fr); min-width: 640px; max-width: 920px; }
.st-plaque { width: calc(74% + var(--i) * 10%); }
.st-block { min-height: calc(130px + var(--i) * 70px); }
.st-curio { left: -20%; }

/* "clips virais": cor passando do azul clarinho ao azul escuro, com volume 3D */
.grad3d { position: relative; display: inline-block;
  background: linear-gradient(100deg, #CFF4FF 0%, #6FDCFF 18%, #19C6FF 34%, #1E6BFF 52%, #0B2E9E 68%, #1E6BFF 82%, #CFF4FF 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: grad3d 5s linear infinite;
  filter: drop-shadow(0 1px 0 #0d3fb8) drop-shadow(0 2px 0 #0b36a0) drop-shadow(0 3px 0 #092c86) drop-shadow(0 4px 0 #07236c) drop-shadow(0 12px 18px rgba(25, 120, 255, .45)); }
@keyframes grad3d { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
@media (prefers-reduced-motion: reduce) { .grad3d { animation: none; } }
/* selo de garantia dourado */
.guarantee .seal7 { flex: 0 0 auto; width: 132px; margin: -24px 0 -30px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .45)); animation: float 5s ease-in-out infinite; }
.guarantee { border-color: rgba(255, 210, 63, .35); background: linear-gradient(90deg, rgba(255, 196, 30, .1), rgba(255, 210, 63, .02)); }
@media (max-width: 600px) { .guarantee .seal7 { margin: -10px 0 0; } }
/* escada mais discreta: degraus neutros, cor só nas placas */
.st-block { background: linear-gradient(180deg, #121a3a, #0a1029 75%); border: 1px solid #1e2a55; border-top: 2px solid rgba(255, 255, 255, .14); box-shadow: none; }
.st-lvl { color: #C9D2F2; }
.step.top .st-plaque { filter: none; }
.step.top .st-block { background: linear-gradient(180deg, #151d40, #0a1029 75%); }
.step.top .st-block b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.st-soon { color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); box-shadow: none; }
.st-curio, .step.top .st-curio { color: #C9CFE6; background: rgba(255, 255, 255, .04); border-color: #1e2a55; }
.grad3d { background: linear-gradient(100deg, #DFF8FF 0%, #5FD6FF 22%, #1E6BFF 45%, #0A2A8F 55%, #1E6BFF 70%, #5FD6FF 85%, #DFF8FF 100%); background-size: 200% 100%; animation: grad3d 4s ease-in-out infinite alternate; }
@keyframes grad3d { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.s-hero .line { overflow: visible; }
.guarantee .seal7 { width: 160px; }
/* "clips virais": só o volume 3D, sem sombra borrada (sem fundo atrás) */
.grad3d { filter: drop-shadow(0 1px 0 #0d3fb8) drop-shadow(0 2px 0 #0b36a0) drop-shadow(0 3px 0 #092c86) drop-shadow(0 4px 0 #07236c); }
.s-hero h1 .line { overflow: visible; }
.grad3d { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
/* "clips virais": cores originais da página (ciano → azul), em movimento e com volume 3D */
.grad3d { background: linear-gradient(90deg, #19C6FF, #2B6BFF 55%, #9DBBFF, #19C6FF); background-size: 200% 100%; animation: shift 6s ease-in-out infinite;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.what-nar { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px !important; color: #C9D2F2; }
.what-nar svg { color: var(--cyan); flex: none; margin-top: 3px; } .what-nar b { color: #fff; }

/* campanhas */
.camps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin: 14px 0 8px; }
.camp { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.camp.best { border-color: rgba(61, 255, 168, .4); background: linear-gradient(180deg, rgba(61, 255, 168, .06), rgba(255, 255, 255, .01)); }
.cp-top { display: flex; align-items: center; gap: 12px; }
.cp-logo { width: 44px; height: 44px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #fff; }
.cp-logo img { width: 100%; height: 100%; object-fit: cover; } .cp-logo b { color: #0B1130; font-size: 20px; }
.cp-t { flex: 1; min-width: 0; } .cp-t b { display: block; font-size: 16px; } .cp-t small { color: var(--muted); }
.cp-rpm { display: flex; align-items: baseline; gap: 8px; }
.cp-rpm b { font-family: var(--display); font-weight: 900; font-size: 32px; color: #fff; } .cp-rpm span { color: var(--muted); font-size: 14px; }
.cp-info { display: grid; gap: 6px; font-size: 13px; color: #C9CFE6; }
.cp-info span { display: flex; align-items: center; gap: 6px; } .cp-info svg { color: var(--cyan); flex: none; }
.camp .cp-join { align-self: flex-start; margin-top: auto; }
.camp .ctag { padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; }
.camp .ctag.ok { background: rgba(61, 255, 168, .14); color: var(--ok); }
/* admin: edição de campanhas */
.camp-edit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; padding: 14px; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.camp-edit input, .camp-edit select { width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: #0A1029; color: #fff; font: inherit; font-size: 14px; color-scheme: dark; }
.camp-edit .ck { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 700; }
.camp-edit .ck input { width: 18px; height: 18px; accent-color: var(--cyan); }
@media (max-width: 760px) { .camp-edit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.camp-edit .lbl-f { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
/* campanhas no estilo Content Rewards */
.camp { padding: 0; overflow: hidden; gap: 0; }
.cp-img { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #12204d, #0a1029); }
.cp-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-ph { position: absolute; inset: 0; display: grid; place-items: center; } .cp-ph .cp-logo { width: 64px; height: 64px; border-radius: 18px; }
.cp-kind { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: rgba(5, 8, 20, .75); backdrop-filter: blur(6px); }
.cp-best { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: var(--ok); color: #03140B; }
.cp-src { position: absolute; left: 12px; bottom: -18px; } .cp-src .cp-logo { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 0 0 3px #0a1029; }
.cp-body { display: flex; flex-direction: column; gap: 8px; padding: 26px 16px 16px; flex: 1; }
.cp-name { font-size: 16.5px; line-height: 1.3; }
.cp-by { color: var(--muted); } .cp-by b { color: #DDE5FF; }
.cp-niche { align-self: flex-start; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: rgba(25, 198, 255, .1); color: var(--cyan); }
.cp-rpm b { font-size: 28px; }
.cp-bar { height: 7px; border-radius: 99px; background: #111A3C; overflow: hidden; } .cp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #1E6BFF, #19C6FF); }
.cp-budget small { display: flex; justify-content: space-between; margin-top: 5px; color: var(--muted); font-size: 12px; }
.cp-nets { display: flex; align-items: center; gap: 6px; } .cp-nets small { color: var(--muted); font-size: 12px; margin-right: 2px; }
.cp-nets img { width: 22px; height: 22px; border-radius: 6px; background: #fff; padding: 2px; }
.camp .cp-join { margin-top: 6px; }
.cp-count { margin: 4px 0 12px; color: var(--muted); font-size: 15px; } .cp-count b { font-family: var(--display); font-size: 26px; color: #fff; margin-right: 4px; }
.cp-img { overflow: hidden; flex: none; }
.cp-img > img { position: absolute; inset: 0; }
.wkey { display: grid; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); max-width: 520px; }
.wkey input { padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); background: #0A1029; color: #fff; font: inherit; font-size: 14px; }
/* campanhas: filtros por plataforma e nicho, foto do criador */
.periods .fl-t { align-self: center; margin-right: 4px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.periods .period img { width: 16px; height: 16px; border-radius: 4px; background: #fff; padding: 1px; }
.cp-by { display: flex; align-items: center; gap: 6px; }
.cp-by .avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }
.cp-ph b { padding: 0 18px; text-align: center; font-family: var(--display); font-size: 20px; line-height: 1.2; color: #fff; }
/* logos das plataformas sem fundo branco */
.cp-nets img, .periods .period img { background: none; padding: 0; border-radius: 0; object-fit: contain; }
/* campanhas: busca, nicho, ordem, "nova" */
.cp-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.cp-q, .cp-sel { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #0A1029; color: #fff; font: inherit; font-size: 14px; color-scheme: dark; }
.cp-q { flex: 1 1 240px; min-width: 0; }
.cp-new { background: #FFD23F; color: #201400; }
.cp-newc { margin-left: 10px; padding: 3px 9px; border-radius: 99px; background: rgba(255, 210, 63, .14); color: #FFD23F; font-size: 12.5px; font-weight: 800; }
.cp-img { display: block; }
.vbadge { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #1E6BFF; color: #fff; }
/* suas campanhas */
.mycamps { display: grid; gap: 8px; margin-top: 10px; }
.mycamp { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); color: inherit; text-decoration: none; transition: border-color .2s; }
.mycamp:hover { border-color: rgba(25, 198, 255, .5); }
.mc-img { width: 64px; height: 40px; flex: none; border-radius: 8px; overflow: hidden; background: #12204d; display: grid; place-items: center; }
.mc-img img { width: 100%; height: 100%; object-fit: cover; }
.mc-t { flex: 1; min-width: 0; } .mc-t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-t small { color: var(--muted); }
.mc-on { color: var(--ok); font-weight: 700; } .mc-off { color: var(--muted); }
.mc-n { text-align: right; min-width: 64px; } .mc-n b { display: block; } .mc-n small { color: var(--muted); font-size: 11.5px; }
/* página da campanha */
.ch-hero { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.ch-ban { position: relative; aspect-ratio: 16 / 6; min-height: 180px; background: linear-gradient(135deg, #12204d, #0a1029); }
.ch-ban > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-over { position: absolute; inset: auto 0 0 0; padding: 60px 20px 18px; background: linear-gradient(180deg, transparent, rgba(3, 6, 18, .92)); }
.ch-over h2 { margin: 8px 0 0; font-size: clamp(20px, 3vw, 30px); }
.ch-by { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 99px; background: rgba(5, 8, 20, .7); font-size: 13px; font-weight: 700; }
.ch-by .avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.ch-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; }
.ch-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.ch-chip.on { color: var(--ok); } .ch-chip.cpm { color: var(--cyan); border-color: rgba(25, 198, 255, .4); }
.ch-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.ch-stats > div { padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.ch-stats small { display: block; color: var(--muted); font-size: 12px; } .ch-stats b { font-family: var(--display); font-size: 22px; }
@media (max-width: 800px) { .ch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ch-pays { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ch-pay { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); overflow: hidden; }
.ch-pay .cp-h { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-weight: 700; }
.ch-pay .cp-v { display: grid; grid-template-columns: repeat(3, 1fr); } .ch-pay .cp-v > div { padding: 11px 14px; } .ch-pay .cp-v > div + div { border-left: 1px solid var(--line); }
.ch-pay .cp-v small { display: block; color: var(--muted); font-size: 11.5px; } .ch-pay .cp-budget { padding: 14px; }
.ch-sec { margin-bottom: 14px; } .ch-sec h3 { display: flex; align-items: center; gap: 10px; }
.ch-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #1E6BFF, #19C6FF); color: #fff; font-size: 14px; }
.ch-prof { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .ch-prof { grid-template-columns: 1fr; } }
.ideas { display: grid; gap: 10px; max-height: 620px; overflow: auto; padding-right: 4px; }
.idea { display: grid; gap: 6px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); cursor: pointer; animation: enter .3s var(--ease); }
.idea.on { border-color: var(--cyan); background: rgba(25, 198, 255, .06); }
.id-f { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.id-f small { color: var(--muted); font-size: 12px; } .id-v { font-weight: 700; overflow-wrap: anywhere; }
.id-v.typing::after { content: "▍"; color: var(--cyan); animation: blink .7s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.id-copy { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line); background: #0A1029; color: #DDE5FF; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.id-copy:hover { border-color: var(--cyan); color: #fff; }
.idea-use { justify-self: end; display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 700; color: var(--cyan); }
.pv-col { position: sticky; top: 16px; display: grid; gap: 8px; }
.pv-phone { border-radius: 30px; border: 8px solid #1b2236; background: #000; min-height: 470px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.pv { color: #fff; font-size: 13px; padding: 12px 14px; }
.pv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-size: 15px; }
.pv.yt .pv-top { justify-content: flex-start; }
.pv-banner { height: 70px; border-radius: 10px; background: linear-gradient(135deg, #1E6BFF, #19C6FF); margin-bottom: 12px; }
.pv-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pv-av { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: #1b2236; font-size: 28px; font-weight: 800; }
.pv.ig .pv-av { box-shadow: 0 0 0 2px #000, 0 0 0 4px #e1306c; }
.pv-av.gen { background: linear-gradient(90deg, #1b2236, #2a3555, #1b2236); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.pv-cnt { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; } .pv-cnt b { display: block; font-size: 15px; } .pv-cnt small { color: #aaa; font-size: 11px; }
.pv-name { display: block; font-size: 14px; } .pv-row small { color: #aaa; }
.pv-bio { margin: 4px 0 10px; color: #ddd; line-height: 1.35; white-space: pre-wrap; max-height: 72px; overflow: hidden; }
.pv-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.pv-btn { display: block; text-align: center; padding: 7px; border-radius: 8px; background: #262626; font-weight: 700; font-size: 12.5px; }
.pv-btn.yt { background: #fff; color: #000; border-radius: 99px; margin-bottom: 12px; }
.pv-tabs { display: flex; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid #333; margin-bottom: 8px; } .pv-tabs span { color: #aaa; }
.pv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.pv-grid span { aspect-ratio: 9 / 14; background: #151a28; animation: enter .4s var(--ease) both; animation-delay: var(--d); }
.pv-phone.gen-photo + * { opacity: 1; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ph, .ph-sk { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid transparent; padding: 0; background: #1b2236; cursor: pointer; }
.ph-sk { background: linear-gradient(90deg, #1b2236, #2a3555, #1b2236); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .ph.on { border-color: var(--cyan); }
.ph-dl { position: absolute; right: 6%; bottom: 6%; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.dfile { display: grid; gap: 8px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.dfile b { font-size: 13px; overflow-wrap: anywhere; }
.df-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #12204d; color: #fff; }
.df-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.df-img svg { position: relative; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.ch-rules { white-space: pre-wrap; line-height: 1.55; color: #DDE5FF; margin: 0 0 10px; }
.ch-links { display: grid; gap: 6px; margin-bottom: 10px; } .ch-links a { display: inline-flex; gap: 6px; align-items: center; color: var(--cyan); font-size: 13.5px; overflow-wrap: anywhere; }
.cp-st { margin: 6px 0 10px; } .cp-st .st-n { margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); font-size: 12px; }
.cp-end { background: #2a3048; color: #C9CFE6; }
.cp-ended { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); } .cp-ended b { color: #DDE5FF; }
.ch-chip.off { color: #FFB4B4; border-color: rgba(255, 120, 120, .35); }
.ch-guide { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.mycamps { grid-template-columns: minmax(0, 1fr); } .mycamp { min-width: 0; }
.pnl > .periods { flex-wrap: wrap; }
@media (max-width: 600px) {
  .mycamp { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 8px; }
  .mc-img { grid-row: 1 / 3; align-self: start; }
  .mc-t { grid-column: 2 / 4; }
  .mc-t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mc-n { min-width: 0; text-align: left; }
  .mycamp > svg { display: none; }
}
/* notificações */
.mtop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bell-wrap { position: relative; flex: none; }
.bell { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: #fff; cursor: pointer; }
.bell-n:empty { display: none !important; }
.bell svg { display: block; }
.bell-n:not(:empty) { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #FF6A00; color: #fff; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.bell-pop { position: absolute; right: 0; top: 52px; z-index: 50; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; border-radius: 18px; background: #111; border: 1px solid #2a2a2a; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); padding-bottom: 8px; }
.bell-h { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border-bottom: 1px solid #222; } .bell-h img { width: 48px; height: 48px; border-radius: 50%; }
.note { display: block; padding: 12px 16px; text-align: center; color: #ddd; text-decoration: none; border-bottom: 1px solid #1c1c1c; }
.note small { color: #888; font-size: 11.5px; } .note p { margin: 4px 0 0; line-height: 1.45; font-size: 14px; }
.note.unread { background: rgba(255, 106, 0, .06); } .nw { color: #FF8A1F; }
/* campanha: arquivos, regras, envio */
.ch-left { margin: 0; padding: 0 14px 14px; color: var(--muted); font-size: 13px; } .ch-left b { color: var(--ok); }
.ch-lock p { margin: 0; padding: 12px 14px; color: var(--muted); font-size: 13.5px; }
.ch-upd { margin-bottom: 12px; border-color: rgba(255, 138, 31, .5); }
.mats { display: grid; gap: 10px; }
.mat { padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.mat.new { border-color: rgba(255, 138, 31, .6); } .mat.lock { margin-top: 10px; border-style: dashed; }
.mat-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mat-t { flex: 1 1 200px; min-width: 0; } .mat-t small { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; } .mat-t b { display: block; overflow-wrap: anywhere; }
.mat-new { padding: 1px 8px; border-radius: 99px; background: #FF8A1F; color: #1a0a00; font-weight: 800; font-size: 11px; }
.mat-tag { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 800; }
.mat-btns { display: flex; gap: 6px; }
.need { display: grid; gap: 8px; padding: 14px; margin-bottom: 10px; border-radius: 14px; border: 1px solid rgba(61, 255, 168, .35); background: rgba(61, 255, 168, .05); }
.need-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; align-items: center; } .need-row small { color: var(--muted); } .need-row span { font-weight: 700; overflow-wrap: anywhere; }
.need ul { margin: 0; padding-left: 18px; color: #DDE5FF; }
@media (max-width: 600px) { .need-row { grid-template-columns: 1fr auto; } .need-row small { grid-column: 1 / 3; } }
.subs { display: grid; gap: 8px; margin-top: 12px; }
.sub { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); flex-wrap: wrap; }
.sub a { flex: 1 1 200px; min-width: 0; color: var(--cyan); overflow-wrap: anywhere; } .sub small { color: var(--muted); }
.pv-av.gen { display: grid; place-items: center; text-align: center; } .pv-av.gen small { font-size: 9px; color: #fff; padding: 6px; line-height: 1.2; }
@media (max-width: 600px) { .id-f { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; } .id-f small { grid-column: 1 / 3; } }
.bell-n.pop { animation: bellpop .5s var(--ease); } @keyframes bellpop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.wgate { display: grid; gap: 12px; text-align: left; } .wgate h2 { margin: 0; } .wgate > .muted { margin: 0; }
.wg-logo { width: 56px; height: 56px; border-radius: 16px; }
.wg-step { display: flex; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.wg-step p { margin: 4px 0 8px; color: var(--muted); font-size: 14px; } .wg-step .ch-n { flex: none; }
.yt-need { margin-bottom: 14px; border-color: rgba(255, 60, 60, .45); }
.yt-since { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; }
.wgate-pnl { max-width: 760px; }
/* meus cortes: resumo e player */
.ckpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ck { padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); min-width: 0; }
.ck small { display: block; color: var(--muted); font-size: 12px; } .ck b { display: block; font-family: var(--display); font-size: 24px; margin: 4px 0 2px; }
.ck span { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 150px; margin-top: 10px; }
.cbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.cbar i { display: block; width: 100%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #19C6FF, #1E6BFF); }
.cbar small { color: var(--muted); font-size: 10.5px; } .cbar-n { font-size: 11px; font-weight: 800; color: #DDE5FF; }
.cuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 10px; }
.cut { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); animation: enter .35s var(--ease) both; animation-delay: calc(var(--i) * 30ms); }
.cut-v { position: relative; aspect-ratio: 9 / 16; background: #000; }
.cut-v video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cut-dur { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 8px; background: rgba(0, 0, 0, .7); font-size: 12px; font-weight: 800; pointer-events: none; }
.cut-b { display: grid; gap: 4px; padding: 12px; } .cut-b b { line-height: 1.3; }
.cut-when { display: flex; align-items: center; gap: 4px; color: var(--cyan); font-size: 12.5px; font-weight: 700; }
.ph-grid.ai { margin-top: 10px; } .ph-grid.ai:empty { display: none; }
.ph img[src^="/media/avatars/"] { object-fit: cover; }
.ai-btn { width: 100%; justify-content: center; }
/* login: celular com o vídeo maior */
.auth-phone { width: min(clamp(260px, 21vw, 340px), calc((100vh - 300px) * 9 / 16)); right: 40px; bottom: 40px; border-radius: 36px; }
@media (max-height: 760px) { .auth-phone { display: block; } }
@media (max-height: 620px) { .auth-phone { display: none; } }
.auth-phone { width: min(clamp(250px, 20vw, 330px), calc((100vh - 340px) * 9 / 16)); right: 36px; bottom: 36px; }
.auth-side .auth-perks { max-width: 345px; }
.auth-side .auth-perks li { line-height: 1.35; }
/* gerar: prévia acompanha a rolagem (fica do lado do Personalizar) */
.cap-layout .pv-col { position: sticky; top: 16px; align-self: start; }
@media (max-width: 760px) { .cap-layout .pv-col { position: static; } }
.cap-sel b.flash { animation: capflash .9s var(--ease); } @keyframes capflash { 0%, 60% { color: #fff; text-shadow: 0 0 12px var(--cyan); } }
.tc-custom { position: relative; cursor: pointer; } .tc-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vplay.load { opacity: .9; } .vplay .spinner { width: 14px; height: 14px; }
.eqz { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } .eqz i { width: 3px; background: currentColor; border-radius: 2px; animation: eqz .8s ease-in-out infinite; }
.eqz i:nth-child(2) { animation-delay: .2s; } .eqz i:nth-child(3) { animation-delay: .4s; } @keyframes eqz { 0%, 100% { height: 4px; } 50% { height: 14px; } }
/* prévia com o vídeo real do criador */
.pv-real { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.pv-real.yt { width: 178%; left: -39%; }
.pv-real.kb { object-fit: cover; animation: kburns 9s ease-in-out infinite alternate; }
@keyframes kburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-2%, -2%); } }
.cut-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.cut-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cut-range small { color: var(--muted); }
.cut-range[hidden] { display: none; }
/* vídeos do criador: canal inteiro, longos e shorts, com escolha */
.vids-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .vids-head .lbl { margin: 0; }
.vids-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.vids-tools .period .n { opacity: .7; font-size: 12px; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.vgrid.shorts { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.vgrid .vcard { width: auto; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 2px solid transparent; }
.vgrid .vcard.on { border-color: var(--cyan); background: rgba(25, 198, 255, .08); }
.vgrid.shorts .vthumb { aspect-ratio: 9 / 16; }
.vpick { position: absolute; top: 6px; left: 6px; display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cyan); color: #001; }
.vcard.on .vpick { display: grid; }
.vmore { margin-top: 10px; }
/* personalizar: todas as fontes, por categoria */
.cu-fonts { max-height: 340px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cu-picked { display: block; margin: 0 0 8px; color: var(--muted); } .cu-picked b { color: #fff; font-size: 16px; }
.cu-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .cu-cats .n { opacity: .65; }
.cu-more { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.vgrid .vcard { background: rgba(255, 255, 255, .02); border-radius: 14px; padding: 6px; }
.vgrid .vcard:hover { background: rgba(255, 255, 255, .05); }
.seg-cost { display: block; width: 100%; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.vnum { width: 130px; }
.job .motivo{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);color:var(--text,#eee);font-size:14px;line-height:1.45}
.job .motivo b{color:#ef4444;letter-spacing:.04em}
.job .motivo small{display:block;margin-top:4px;opacity:.75}
.best-m{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:6px 0 2px;padding:5px 10px;border-radius:99px;border:1px solid rgba(34,197,94,.45);background:rgba(34,197,94,.14);color:#4ade80;font-size:12.5px;font-weight:800;cursor:pointer}
.best-m small{color:#86efac;font-weight:700}
.best-m:hover{background:rgba(34,197,94,.24)}
.cut-tags{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0}
.cut-tags span{font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted)}
/* seletores do app (no lugar do padrão do Windows) */
.pick.pick-sm { min-width: 168px; }
.pick.pick-sm .pick-btn { min-height: 40px; padding: 0 12px; border-radius: 12px; background: #0A1029; font-size: 14px; }
.pick.pick-sm .pick-list { min-width: 200px; right: auto; }
.paste-box { display: grid; gap: 8px; margin-top: 12px; text-align: left; }
.paste-links { width: 100%; resize: vertical; min-height: 70px; }
/* escolher cenas: ordem, player e prévia */
.vwatch { position: absolute; left: 6px; bottom: 6px; z-index: 2; display: grid; place-items: center; color: #fff; cursor: pointer; }
.vwatch svg { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: rgba(0, 0, 0, .55); transition: transform .2s; }
.vwatch:hover svg { transform: scale(1.12); background: rgba(30, 107, 255, .85); }
.vpick { font-weight: 900; font-size: 12px; }
.scene-order { margin: 10px 0 12px; padding: 10px; border-radius: 14px; border: 1px solid #2B3F86; background: rgba(30, 107, 255, .08); }
.so-list { display: grid; gap: 6px; margin-top: 8px; }
.so-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #0A1029; }
.so-item img { width: 44px; height: 30px; object-fit: cover; border-radius: 6px; flex: none; }
.so-n { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 900; font-size: 12px; }
.so-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.so-item .icon-btn { width: 30px; height: 30px; }
.so-item .icon-btn:disabled { opacity: .3; }
.vplayer { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.vplayer.vert { aspect-ratio: 9 / 16; max-height: 70vh; width: auto; margin: 0 auto; }
.vplayer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pv-real { transition: opacity .35s; }
.pv-real.off { opacity: 0; }
.pv-scene { position: absolute; right: 6px; bottom: 6px; z-index: 3; padding: 2px 7px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10px; font-weight: 800; }
.techlog { margin-top: 8px; font-size: 12px; color: var(--muted); }
.techlog summary { cursor: pointer; font-weight: 700; }
.techlog pre { white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow: auto; background: #070a18; border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 6px 0 0; }
.seg.secs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.seg.secs .seg-b { position: relative; white-space: nowrap; padding-left: 4px; padding-right: 4px; }
.seg.secs .chip-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 9.5px; }
@media (max-width: 560px) { .seg.secs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } }
/* velocidade: nome em cima, créditos embaixo (sem quebrar feio) */
.seg-b .seg-cost { display: block; }
.seg-b:has(.seg-cost) { flex-direction: column; gap: 2px; line-height: 1.2; }
/* tela de entrar: celular centralizado na altura e mais pro meio; selo embaixo (sem cobrir o vídeo) */
.auth-side { --pw: min(clamp(230px, 19vw, 300px), calc((100vh - 260px) * 9 / 16)); }
.auth-phone { top: 0; bottom: 0 !important; margin: auto 0; right: 40px !important; height: max-content; width: var(--pw) !important; }
/* selo colado no canto de baixo do celular (meio pra fora), não lá no fim da tela */
.auth-badge { right: calc(40px + (var(--pw) - 196px) / 2) !important; bottom: calc((100% - var(--pw) * 16 / 9) / 2 - 80px) !important; }
.auth-pitch { max-width: calc(100% - var(--pw) - 70px); }
.pw-form { display: grid; gap: 10px; }
.pw-form input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #0A1029; color: #fff; font: inherit; }
.forgot-lnk { justify-self: end; margin: -4px 0 6px; font-size: 13px; font-weight: 700; color: var(--cyan); text-decoration: none; }
.forgot-lnk:hover { text-decoration: underline; }
.auth-solo { grid-template-columns: minmax(0, 1fr) !important; }
.auth-solo .auth-main { min-height: 100vh; display: grid; place-content: center; gap: 18px; justify-items: center; }
.ubox .key-btn { margin-left: auto; }
.mail-prev { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #03040A; }
.mail-prev iframe { width: 100%; height: 620px; border: 0; display: block; }
/* "i" de informação em cada função */
.info-i { position: relative; display: inline-grid; place-items: center; margin-left: 6px; color: var(--cyan); cursor: help; vertical-align: middle; opacity: .85; }
.info-i:hover, .info-i:focus { opacity: 1; outline: none; }
.info-i::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 260px; padding: 10px 12px; border-radius: 12px; background: #0B1330; border: 1px solid #2B3F86; color: #E8EEFF; font-size: 12.5px; font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 60; white-space: normal; }
.info-i:hover::after, .info-i:focus::after { opacity: 1; }
h2 .info-i svg { width: 18px; height: 18px; }
/* Visual do clipe em blocos */
.cap-sec { padding: 14px; border-radius: 16px; border: 1px solid #1A2552; background: rgba(10, 16, 41, .55); margin-bottom: 14px; }
.cap-sec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.cap-n { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #1E6BFF, #19C6FF); color: #fff; font-weight: 900; font-size: 12px; }
.title-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 8px; }
.title-seg .seg-b { position: relative; }
.title-seg .chip-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 9.5px; white-space: nowrap; }
.title-in { width: 100%; margin-top: 10px; font-size: 16px; font-weight: 700; }
/* prévia com borda colorida girando */
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.rgb-ring { position: relative; width: max-content; margin: 0 auto; padding: 4px; border-radius: 30px; background: conic-gradient(from var(--ring), #ff004c, #ffb800, #3dff6e, #19c6ff, #7a5cff, #ff3df2, #ff004c); animation: ringspin 3s linear infinite; box-shadow: 0 0 28px rgba(122, 92, 255, .45); }
.rgb-ring .cap-phone { border-color: transparent; }
@keyframes ringspin { to { --ring: 360deg; } }
.pv-col { display: flex; flex-direction: column; align-items: center; }
/* velocidade: tag no canto, ícone ao lado do texto */
.seg.speed .seg-b { position: relative; display: flex; flex-direction: row !important; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; }
.seg.speed .sp-t { display: flex; flex-direction: column; line-height: 1.25; }
.seg.speed .chip-tag.corner { position: absolute; top: -9px; right: 10px; left: auto; transform: none; }
/* resumo do pedido */
.order-sum { margin-top: 16px; padding: 16px; border-radius: 18px; border: 1px solid #2B3F86; background: linear-gradient(180deg, rgba(30, 107, 255, .10), rgba(10, 16, 41, .6)); }
.os-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #fff; font-size: 16px; }
.os-h svg { color: var(--ok); }
.os-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.os-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #1A2552; font-size: 13.5px; }
.os-row span { color: var(--muted); flex: none; }
.os-row b { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .os-grid { grid-template-columns: minmax(0, 1fr); } }
/* detalhes do vídeo no player */
.vdet { margin-top: 12px; display: grid; gap: 12px; color: var(--muted); font-size: 13px; }
.vstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vstat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: #0A1029; border: 1px solid var(--line); color: var(--cyan); }
.vstat b { color: #fff; font-size: 15px; }
.vstat small { color: var(--muted); font-size: 11px; }
.vmoments { display: flex; flex-wrap: wrap; gap: 6px; }
.vmoment { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; border: 1px solid rgba(34, 197, 94, .45); background: rgba(34, 197, 94, .12); color: #86efac; font-size: 12.5px; cursor: pointer; }
.vmoment b { color: #4ade80; }
.vtopics { display: flex; flex-wrap: wrap; gap: 6px; }
.vtopics span { padding: 4px 10px; border-radius: 99px; background: rgba(30, 107, 255, .14); border: 1px solid #2B3F86; color: #C5D0F0; font-size: 12px; }
@media (max-width: 560px) { .vstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }