/* Oobo — site. Recriado do handoff "Oobo Site v4" (tokens, medidas e animações do protótipo). */

:root {
  --bg: #FFFFFF; --bg2: #F5F5F7; --card: #FFFFFF;
  --tx: #1D1D1F; --tx2: #6E6E73; --tx3: #A1A1A6;
  --line: rgba(0,0,0,.08);
  --ink: #1A1F3C; --eye: #FFFFFF;
  --ac: #6A44F9; --acs: rgba(106,68,249,.1);
  --hdr: rgba(255,255,255,.82);
  --seg: #E8E8ED; --fill: #F2F2F4; --soft: #F3F2F7;
  --dot: #D8D8DD; --off: #E5E5EA;
  --hov: rgba(0,0,0,.04); --hovc: rgba(255,255,255,.75);
  --grp: #FAFAFB; --pin: rgba(0,0,0,.05); --grpb: rgba(0,0,0,.04);
  --gridline: rgba(0,0,0,.035);
  --ease: cubic-bezier(.32,.72,0,1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111113; --bg2: #1C1C1E; --card: #232326;
    --tx: #F5F5F7; --tx2: #A1A1A6; --tx3: #6E6E73;
    --line: rgba(255,255,255,.09);
    --ink: #FFFFFF; --eye: #1A1F3C;
    --ac: #7B5CFF; --acs: rgba(123,92,255,.2);
    --hdr: rgba(17,17,19,.78);
    --seg: #3A3A3C; --fill: #2C2C2E; --soft: #2C2C2E;
    --dot: #48484A; --off: #48484A;
    --hov: rgba(255,255,255,.06); --hovc: rgba(255,255,255,.08);
    --grp: #1C1C1E; --pin: rgba(255,255,255,.07); --grpb: rgba(255,255,255,.05);
    --gridline: rgba(255,255,255,.035);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--tx); font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ac); }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
input::placeholder { color: var(--tx3); }
svg { flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ln { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.arrow { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.grow { flex: 1; }
.fcol { display: flex; flex-direction: column; min-width: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ac); color: #fff; font-weight: 600; }
.skip:focus { top: 12px; color: #fff; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.ac { color: var(--ac); }

/* mascote */
.look { animation: oobo-look 16s ease-in-out infinite; }
.blink { transform-box: fill-box; transform-origin: center; animation: oobo-blink 4.6s ease-in-out infinite; }
.blink.fast { animation-duration: 3s; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; font-weight: 600; white-space: nowrap; corner-shape: squircle; transition: transform .2s var(--ease), box-shadow .2s, filter .2s, background .2s; }
.btn-primary { background: var(--ac); color: #fff; }
.btn-primary:hover { color: #fff; filter: brightness(1.08); }
.btn-primary:active { transform: scale(.98); }
.btn-sm { height: 38px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
.btn-sm:hover { transform: translateY(-1px); }
.btn-md { height: 40px; padding: 0 20px; border-radius: 12px; font-size: 14px; }
.btn-lg { height: 50px; padding: 0 22px; border-radius: 15px; font-size: 16px; }
.btn-primary.btn-lg { padding: 0 20px 0 24px; box-shadow: 0 10px 30px -12px rgba(106,68,249,.6); }
.btn-primary.btn-lg:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(106,68,249,.7); }
.btn-secondary { background: var(--fill); color: var(--tx); }
.btn-secondary:hover { background: var(--seg); color: var(--tx); }
.btn-white { margin-top: 6px; height: 54px; padding: 0 22px 0 26px; border-radius: 16px; background: #fff; color: #15172B; font-size: 16px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); }
.btn-white:hover { transform: translateY(-2px); color: #15172B; }
.btn-white:active { transform: scale(.98); }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 11px; background: var(--card); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s; }
.btn-ghost:hover { background: var(--seg); }
.btn-ghost.fill { height: 44px; padding: 0 22px; border-radius: 13px; background: var(--fill); font-size: 15px; margin-top: 10px; }
.btn-ghost.fill:hover { background: var(--seg); }
.link-btn { border: 0; background: none; padding: 0; font-size: 13px; color: var(--tx3); cursor: pointer; }
.link-btn:hover { color: var(--tx); }

/* interruptor estilo macOS */
.switch { position: relative; flex: none; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 12px; background: var(--off); cursor: pointer; transition: background .2s; }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .3s var(--ease); }
.switch[aria-checked="true"] { background: var(--ac); }
.switch[aria-checked="true"] .knob { transform: translateX(16px); }

/* rádio */
.radio { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px #C7C7CF; transition: box-shadow .2s; }

/* ---------- menu (dock) ---------- */
.dock-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; padding: 12px 16px 0; pointer-events: none; }
.dock { pointer-events: auto; position: relative; overflow: hidden; width: 100%; max-width: 880px; height: 54px; padding: 0 8px 0 18px; display: flex; align-items: center; gap: 18px; border-radius: 18px; corner-shape: squircle; background: var(--hdr); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 4px 14px -8px rgba(40,20,110,.12); transition: box-shadow .35s; }
.dock.is-scrolled { box-shadow: 0 0 0 .5px rgba(0,0,0,.1), 0 14px 34px -14px rgba(40,20,110,.28); }
.dock-logo { display: flex; flex: none; }
.dock-logo svg { display: block; }
.dock-nav { display: flex; gap: 2px; font-size: 14px; color: var(--tx2); }
.dock-nav a { padding: 7px 11px; border-radius: 10px; transition: background .2s, color .2s; }
.dock-nav a:hover { background: var(--hov); color: var(--tx); }
.dock-nav a.is-on { background: var(--acs); color: var(--ac); font-weight: 600; }
.dock-progress { position: absolute; left: 18px; bottom: 0; height: 2px; width: calc((100% - 36px) * var(--p, 0)); border-radius: 2px; background: linear-gradient(90deg, #6A44F9, #9A7BFF); }

/* ---------- seções ---------- */
.sec { padding: clamp(72px, 9vw, 128px) 24px; overflow-x: clip; }
.sec.bg2 { background: var(--bg2); }
.wrap { max-width: 1160px; margin: 0 auto; }
.wrap.narrow { max-width: 820px; }
.col { display: flex; flex-direction: column; }
.col.center, .center { align-items: center; text-align: center; }
.gap-sec { gap: clamp(40px, 5vw, 56px); }
.sec-head { display: flex; flex-direction: column; gap: 18px; max-width: 700px; }
.sec-head.center { align-items: center; max-width: none; }
.mw680 { max-width: 680px; } .mw780 { max-width: 780px; } .mw560 { max-width: 560px; } .mw640 { max-width: 640px; } .mw520 { max-width: 520px; }
.mb40 { margin-bottom: 40px; }
.eyebrow { margin: 0; font-size: 15px; font-weight: 600; color: var(--ac); display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ac); }
.h2 { margin: 0; font-size: clamp(36px, 5vw, 58px); line-height: 1.04; font-weight: 800; letter-spacing: -.04em; text-wrap: balance; }
.h2-xl { font-size: clamp(36px, 5.6vw, 72px); letter-spacing: -.045em; max-width: 900px; padding: 0 24px; }
.lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--tx2); text-wrap: pretty; }
.sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tx3); text-wrap: pretty; }
.card { border-radius: 24px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 1px var(--line); }

/* entrada ao rolar (só quando o JS marca) */
.rv { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- 2. abertura ---------- */
.hero { padding: calc(66px + clamp(28px, 4vw, 52px)) 20px 0; overflow: hidden; }
.hero-in { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.badge { margin: 0; display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px 0 8px; border-radius: 16px; background: var(--acs); color: var(--ac); font-size: 13px; font-weight: 600; animation: rise .8s var(--ease) .1s both; }
.badge-dot { width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--ac); animation: pulse 1.8s ease-out infinite; }
.h1 { margin: 20px 0 0; font-size: clamp(42px, 6.6vw, 84px); line-height: 1.02; font-weight: 800; letter-spacing: -.045em; text-wrap: balance; max-width: 980px; animation: rise .9s var(--ease) .2s both; }
.h1-mascot { display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; width: 1.32em; height: .92em; border-radius: .3em; background: var(--acs); margin: 0 .06em; transform: translateY(-.05em); }
@media (prefers-color-scheme: light) { .h1-mascot { background: rgba(106,68,249,.12); } }
.h1-hop { display: block; transform-origin: 50% 100%; animation: oobo-hopl 2.6s var(--ease) 1.4s infinite; }
.h1-hop svg { width: .86em; height: auto; display: block; overflow: visible; }
.hero-p1 { margin: 20px 0 0; max-width: 640px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; color: var(--tx2); text-wrap: pretty; animation: rise .9s var(--ease) .3s both; }
.hero-p2 { margin: 10px 0 0; max-width: 560px; font-size: 15px; line-height: 1.5; color: var(--tx3); text-wrap: pretty; animation: rise .9s var(--ease) .36s both; }
.hero-ctas { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; animation: rise .9s var(--ease) .4s both; }

.hero-stage { position: relative; width: 100%; max-width: 1240px; margin-top: clamp(32px, 4.5vw, 56px); }
.mock-clip { position: relative; width: 100%; height: clamp(500px, 50vw, 660px); padding: 16px 20px 0; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); animation: rise 1s var(--ease) .45s both; }
.mock { position: relative; width: 100%; height: 800px; border-radius: 22px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 .5px rgba(0,0,0,.16), 0 2px 4px rgba(0,0,0,.04), 0 40px 100px -30px rgba(70,40,190,.35); display: flex; overflow: hidden; text-align: left; font-size: 14px; }

.ib { width: 28px; height: 28px; border: 0; padding: 0; border-radius: 8px; background: transparent; display: grid; place-items: center; color: var(--tx3); cursor: pointer; transition: background .15s, color .15s; flex: none; }
.ib:hover { background: var(--hov); color: var(--tx); }
.ib:active { transform: scale(.94); }
.ib.sm { width: 26px; height: 26px; border-radius: 7px; }
.fx { flex: none; color: var(--tx3); }

.mock-sb { width: 240px; flex: none; overflow: hidden; background: var(--bg2); transition: width .5s var(--ease); }
.mock.sb-closed .mock-sb { width: 0; }
.mock-sb-in { width: 240px; height: 100%; padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.sb-top { display: flex; align-items: center; }
.tl { display: flex; gap: 8px; padding: 0 8px 0 4px; }
.tl span { width: 12px; height: 12px; border-radius: 50%; background: var(--dot); transition: background .15s; }
.tl:hover span:nth-child(1) { background: #FF5F57; }
.tl:hover span:nth-child(2) { background: #FEBC2E; }
.tl:hover span:nth-child(3) { background: #28C840; }
.sb-search { height: 38px; flex: none; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--line); display: flex; align-items: center; gap: 8px; padding: 0 4px 0 12px; color: var(--tx3); }
.sb-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.sb-url.is-set { color: var(--tx); }
.pins { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; flex: none; }
.pin { height: 44px; border: 0; padding: 0; border-radius: 12px; corner-shape: squircle; background: var(--pin); display: grid; place-items: center; cursor: pointer; transition: background .25s, transform .3s var(--ease), box-shadow .25s; }
.pin svg { display: block; transition: transform .3s var(--ease); }
.pin:hover { transform: translateY(-1px); background: var(--card); }
.pin:active { transform: scale(.95); }
.pin.is-on, .pin.is-hot { background: var(--card); box-shadow: 0 4px 12px -4px rgba(40,20,110,.22); }
.pin.is-hot { transform: translateY(-2px); }
.pin.is-hot svg { transform: scale(1.12); }
.groups { display: flex; flex-direction: column; gap: 8px; flex: none; }
.grp { border-radius: 14px; corner-shape: squircle; background: var(--grpb); padding: 3px; }
.grp-h { width: 100%; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; font-size: 14px; font-weight: 700; color: var(--tx); cursor: pointer; text-align: left; transition: background .15s; }
.grp-h:hover, .grp-h.is-hot { background: var(--hov); }
.grp-h .sq { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.grp-h .chev { color: var(--tx3); transition: transform .35s var(--ease); }
.grp.is-open .chev { transform: rotate(90deg); }
.grp-n { font-size: 12px; font-weight: 500; color: var(--tx3); }
.grp.is-open .grp-n { visibility: hidden; }
.grp-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.grp.is-open .grp-b { grid-template-rows: 1fr; }
.grp-clip { overflow: hidden; min-height: 0; }
.grp-tabs { display: flex; flex-direction: column; gap: 1px; padding: 0 0 3px; opacity: 0; transition: opacity .3s; }
.grp.is-open .grp-tabs { opacity: 1; }
.tab { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 6px 0 10px; border-radius: 10px; cursor: pointer; transition: background .2s, box-shadow .2s; }
.tab svg { display: block; }
.tab:hover { background: var(--card); }
.tab.is-hot { background: var(--hovc); }
.tab.is-on { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.04); font-weight: 600; }
.tab-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-x { display: none; width: 22px; height: 22px; border-radius: 6px; place-items: center; color: var(--tx3); transition: background .15s, color .15s; flex: none; }
.tab.is-on .tab-x { display: grid; }
.tab-x:hover { background: var(--hov); color: var(--tx); }
.tab.is-closed { display: none; }
.sb-sep { width: 46%; height: 1px; background: var(--line); margin: 2px 12px; flex: none; }
.loose { display: flex; flex-direction: column; gap: 2px; flex: none; }
.newtab { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; font-size: 14px; color: var(--tx); cursor: pointer; text-align: left; transition: background .15s; }
.newtab svg { color: var(--tx2); transition: color .15s; }
.newtab:hover, .newtab.is-hot { background: var(--hov); }
.newtab:hover svg { color: var(--ac); }
.sb-foot { display: flex; align-items: center; padding: 0 2px; }
.sb-oobo { padding: 3px; border-radius: 9px; transition: background .15s; }
.sb-oobo:hover { background: var(--hov); }
.sb-oobo svg { width: 32px; height: auto; display: block; overflow: visible; }

.mock-main { flex: 1; min-width: 0; position: relative; background: var(--card); overflow: hidden; }
.mini-ctrl { position: absolute; z-index: 3; top: 10px; left: 10px; display: none; align-items: center; animation: fade .3s ease both; }
.mock.sb-closed .mini-ctrl { display: flex; }
.nt { position: absolute; left: 0; right: 0; top: 0; height: 640px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 24px 40px; }
.nt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.nt-oobo { border: 0; padding: 0; background: none; cursor: pointer; transform-origin: 50% 100%; }
.nt-oobo.hop-a { animation: mhopA .7s cubic-bezier(.3,.7,.4,1); }
.nt-oobo.hop-b { animation: mhopB .7s cubic-bezier(.3,.7,.4,1); }
.nt-oobo svg { width: clamp(60px, 6.4vw, 82px); height: auto; display: block; overflow: visible; }
.eyes-follow { transition: transform .25s var(--ease); }
.nt-bubble { margin: 0; padding: 11px 16px; border-radius: 14px; corner-shape: squircle; background: var(--bg2); font-size: clamp(14px, 1.35vw, 17px); font-weight: 500; max-width: 400px; text-wrap: pretty; }
.nt-search { width: min(100%, 580px); height: 54px; border-radius: 16px; corner-shape: squircle; background: var(--bg2); display: flex; align-items: center; gap: 12px; padding: 0 9px 0 18px; transition: box-shadow .2s; }
.nt-search:hover { box-shadow: 0 0 0 1px var(--line); }
.nt-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15.5px; color: var(--tx); }
.nt-search:focus-within { box-shadow: 0 0 0 1px var(--line), 0 0 0 4px var(--acs); }
.nt-send { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--tx3); transition: background .2s, color .2s; flex: none; }
.nt-send.is-on { background: var(--ac); color: #fff; }
.nt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; max-width: 720px; }
.chip { height: 34px; padding: 0 12px; border: 0; border-radius: 10px; corner-shape: squircle; background: var(--bg2); color: var(--tx); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: background .15s, transform .2s var(--ease); }
.chip svg { color: var(--tx2); transition: color .15s; }
.chip:hover { background: var(--seg); transform: translateY(-1px); }
.chip:hover svg { color: var(--ac); }
.chip:active { transform: scale(.97); }
.chip.is-on { background: var(--acs); }
.chip.is-on svg { color: var(--ac); }

.cursor { position: absolute; z-index: 10; left: 420px; top: 300px; opacity: 0; pointer-events: none; transition: left .75s cubic-bezier(.45,.05,.25,1), top .75s cubic-bezier(.45,.05,.25,1), opacity .35s; }
.cursor.is-on { opacity: 1; }
.cursor svg { display: block; margin: -3px 0 0 -5px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.cursor path { fill: #1D1D1F; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.cursor .rip { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; background: rgba(106,68,249,.3); opacity: 0; }
.cursor.click-a .rip { animation: ripA .55s ease-out; }
.cursor.click-b .rip { animation: ripB .55s ease-out; }

/* cartões flutuantes */
.float { position: absolute; z-index: 12; }
.f1 { left: max(12px, calc((100% - 1100px) / 2 - 34px)); top: 110px; animation: rise .9s var(--ease) 1.1s both; }
.f2 { left: max(12px, calc((100% - 1100px) / 2 - 48px)); top: 330px; animation: rise .9s var(--ease) 1.3s both; }
.f3 { right: max(12px, calc((100% - 1100px) / 2 - 36px)); top: 80px; animation: rise .9s var(--ease) 1.2s both; }
.f4 { right: max(12px, calc((100% - 1100px) / 2 - 22px)); top: 300px; animation: rise .9s var(--ease) 1.4s both; }
.floaty { animation: floaty 3.4s ease-in-out infinite alternate; }
.f2 .floaty { animation-duration: 4.1s; } .f3 .floaty { animation-duration: 3.8s; } .f4 .floaty { animation-duration: 3.6s; }
.fcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 20px 40px -18px rgba(40,20,110,.35); text-align: left; transition: transform .3s var(--ease); }
.fcard:hover { transform: scale(1.04) rotate(-1deg); }
.fic { width: 38px; height: 38px; border-radius: 11px; corner-shape: squircle; background: var(--bg2); color: var(--tx2); display: grid; place-items: center; flex: none; }
.fic.ac { background: var(--acs); color: var(--ac); }
.fcol.f-narrow { max-width: 190px; gap: 2px; }
.f-sm { font-size: 12px; color: var(--tx3); }
.f-sm2 { font-size: 12px; color: var(--tx2); }
.f-big { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.f-mid { font-size: 13.5px; font-weight: 600; }
.f-m { width: 34px; height: auto; }
.pill-ok { font-size: 12px; font-weight: 700; color: #30A46C; background: rgba(48,164,108,.12); padding: 4px 8px; border-radius: 7px; white-space: nowrap; }
.postit { background: #FFE58A; color: #3B3000; font-weight: 500; }
.postit.big { width: 170px; padding: 14px 14px 16px; border-radius: 4px 4px 16px 4px; box-shadow: 0 20px 34px -16px rgba(120,90,0,.5); font-size: 14px; line-height: 1.35; text-align: left; transform: rotate(4deg); transition: transform .3s var(--ease); }
.postit.big:hover { transform: rotate(0) scale(1.04); }
.postit.big span { display: block; margin-top: 8px; font-size: 11px; opacity: .6; }

.stats { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; width: 100%; max-width: 1120px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--line); text-align: left; }
.stats li { padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.stats li + li { border-left: 1px solid var(--line); }
.stats strong { font-size: 34px; font-weight: 800; letter-spacing: -.04em; }
.stats span { font-size: 14.5px; line-height: 1.45; color: var(--tx2); }

/* ---------- 3. ao vivo (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 16px; }
.live { grid-column: span 2; background: var(--card); border-radius: 24px; corner-shape: squircle; box-shadow: 0 0 0 1px var(--line); padding: 14px 14px 22px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s, opacity .9s var(--ease); }
.live.s4 { grid-column: span 4; }
.live:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -28px rgba(70,40,190,.35); }
.live-txt { display: flex; flex-direction: column; gap: 6px; padding: 0 8px; }
.live-txt h3 { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.live-txt h3 svg { color: var(--tx2); transition: color .2s; }
.live:hover .live-txt h3 svg { color: var(--ac); }
.live-txt p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tx2); }
.stage { position: relative; height: 210px; border-radius: 16px; corner-shape: squircle; background: var(--bg2); overflow: hidden; }
.stage.tall { height: 230px; }
/* seleção mágica */
.sel-bar { position: absolute; left: 24px; top: 22px; width: 44%; height: 10px; border-radius: 5px; background: rgba(0,0,0,.06); }
.sel-grid { position: absolute; left: 24px; right: 24px; top: 46px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 4px; }
.sel-grid > span { height: 22px; border-radius: 5px; background: var(--card); display: flex; align-items: center; padding: 0 8px; }
.sel-grid > span i { height: 6px; border-radius: 3px; background: rgba(0,0,0,.06); }
.sel-grid > span.h { background: rgba(0,0,0,.06); }
.sel-grid > span.h i { background: var(--tx3); }
@media (prefers-color-scheme: dark) { .sel-bar, .sel-grid > span i, .sel-grid > span.h, .lines .l0 { background: rgba(255,255,255,.08); } }
.sel-box { position: absolute; left: -6px; top: -6px; border: 1.5px dashed var(--ac); background: rgba(106,68,249,.08); border-radius: 8px; width: calc(100% + 12px); height: calc(100% + 12px); animation: sel 6s var(--ease) infinite; }
.sel-menu { position: absolute; right: 24px; top: 14px; display: flex; gap: 4px; padding: 4px; border-radius: 11px; background: var(--card); box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 10px 24px -10px rgba(0,0,0,.3); font-size: 12px; font-weight: 500; animation: menuk 6s ease infinite; }
.sel-menu span { padding: 5px 9px; border-radius: 7px; white-space: nowrap; }
.sel-menu .on { background: var(--ac); color: #fff; }
.toast { position: absolute; left: 50%; display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 11px; background: var(--tx); color: var(--bg); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.t-sel { bottom: 14px; animation: toastk 6s ease infinite; }
.t-remind { bottom: 22px; padding: 8px 12px; transform: translateX(-50%); animation: remindk 7s ease infinite; }
/* foco */
.focus { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 0 20px; }
.ring { position: relative; width: 118px; height: 118px; flex: none; }
.ring svg { width: 118px; height: 118px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(0,0,0,.06); stroke-width: 8; }
@media (prefers-color-scheme: dark) { .ring-bg { stroke: rgba(255,255,255,.08); } }
.ring-fg { fill: none; stroke: var(--ac); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 0.7; transition: stroke-dashoffset 1s linear; }
.ring-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-txt span:first-child { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.ring-txt span:last-child { font-size: 11px; color: var(--tx3); }
.paused { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.paused span { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 9px; background: var(--card); color: var(--tx2); white-space: nowrap; }
.paused i { width: 6px; height: 6px; border-radius: 50%; background: #E5484D; }
/* post-it */
.lines { position: absolute; left: 20px; right: 20px; top: 20px; display: flex; flex-direction: column; gap: 9px; }
.lines span { height: 8px; border-radius: 4px; background: var(--card); }
.lines .l0 { height: 12px; width: 60%; border-radius: 6px; background: rgba(0,0,0,.06); }
.postit.sm { position: absolute; right: 22px; bottom: 20px; width: 128px; padding: 11px 12px 14px; border-radius: 3px 3px 12px 3px; box-shadow: 0 12px 24px -10px rgba(120,90,0,.45); font-size: 12.5px; line-height: 1.35; }
.a-postit { animation: postit 5s var(--ease) infinite; }
.note-hint { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 6px; }
.note-hint svg { width: 24px; height: auto; display: block; }
.note-hint span { padding: 5px 9px; border-radius: 9px; background: var(--card); font-size: 12px; font-weight: 500; }
.a-notek { animation: notek 5s ease infinite; }
/* textos rápidos */
.qt { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
.qt-field { position: relative; height: 46px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px rgba(0,0,0,.06); display: flex; align-items: center; padding: 0 14px; font-size: 14px; }
.qt-lbl { color: var(--tx3); margin-right: 6px; }
.qt-typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; animation: qtype 6s steps(4, end) infinite; }
.qt-val { position: absolute; left: 50px; color: var(--ac); font-weight: 600; opacity: 0; animation: qb 6s ease infinite; }
.qt-sug { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 .5px rgba(0,0,0,.1), 0 8px 18px -8px rgba(0,0,0,.25); font-size: 12.5px; opacity: 0; animation: qsug 6s ease infinite; }
.qt-sug .mono { color: var(--ac); font-weight: 600; }
.qt-ret { color: var(--tx3); }
/* tradução */
.tr { position: absolute; inset: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.tr-tag { align-self: flex-start; position: relative; height: 28px; padding: 0 10px; border-radius: 9px; background: var(--acs); color: var(--ac); font-size: 12px; font-weight: 600; display: flex; align-items: center; min-width: 140px; }
.tr-tag span { position: absolute; left: 10px; white-space: nowrap; }
.tr-text { position: relative; font-size: 17px; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; min-height: 70px; }
.tr-text span { position: absolute; inset: 0; }
.xa { animation: xa 7s ease infinite; }
.xb { opacity: 0; animation: xb 7s ease infinite; }
.tr .bar { height: 8px; border-radius: 4px; background: var(--card); }
/* lembrar depois */
.rl { position: absolute; left: 20px; right: 20px; top: 24px; display: flex; flex-direction: column; gap: 6px; }
.rl div { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 9px; background: var(--card); font-size: 12.5px; }
.rl div span { width: 14px; height: 14px; border-radius: 4px; }
.rl .rl-out { box-shadow: 0 0 0 1.5px var(--ac); animation: tabout 7s var(--ease) infinite; }
/* vigiar */
.watch { position: absolute; left: 20px; right: 20px; top: 26px; padding: 14px; border-radius: 12px; background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.w-lbl { font-size: 12px; color: var(--tx3); }
.w-st { position: relative; height: 30px; border-radius: 9px; animation: ringp 6s ease infinite; }
.w-st span { position: absolute; left: 0; top: 4px; font-size: 16px; font-weight: 700; }
.w-st .sa { animation: statusA 6s ease infinite; }
.w-st .sb { color: var(--ac); opacity: 0; animation: statusB 6s ease infinite; }
.notif { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 11px; background: var(--card); box-shadow: 0 0 0 .5px rgba(0,0,0,.1), 0 10px 22px -10px rgba(0,0,0,.3); font-size: 12.5px; font-weight: 500; opacity: 0; animation: notif 6s ease infinite; }
.notif svg { color: var(--ac); }
/* recursos */
.assets { position: absolute; inset: 18px 20px 44px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.assets div { position: relative; border-radius: 10px; }
.assets span { position: absolute; right: 5px; bottom: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--ac); color: #fff; display: grid; place-items: center; opacity: 0; animation: badge 6s ease infinite; }
.assets-lbl { position: absolute; left: 20px; bottom: 16px; font-size: 12px; color: var(--tx2); }

/* ---------- 4. formatos ---------- */
.fmts { margin-top: 40px; width: 100%; max-width: 1000px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.fmt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 0 18px; border: 0; border-radius: 18px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.03); color: var(--tx); text-align: left; cursor: pointer; transition: box-shadow .25s, transform .25s var(--ease); }
.fmt:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(70,40,190,.32); }
.fmt:active { transform: scale(.98); }
.fmt.is-on { box-shadow: 0 16px 32px -14px rgba(70,40,190,.32); }
.fmt.is-on .radio { box-shadow: inset 0 0 0 6px var(--ac); }
.fmt-t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fmt-t span:first-child { font-size: 16px; font-weight: 600; }
.fmt-t span:last-child { font-size: 13px; color: var(--tx2); }
.fmt-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; border-radius: 2px; background: linear-gradient(90deg, #6A44F9, #9A7BFF); display: none; }
.fmts.auto .fmt.is-on .fmt-bar { display: block; animation: prog 4.5s linear both; }
.fmt-stage { position: relative; isolation: isolate; width: 100%; max-width: 1000px; margin-top: 28px; }
.fmt-win { width: 100%; aspect-ratio: 16 / 10; border-radius: 22px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 .5px rgba(0,0,0,.16), 0 40px 90px -30px rgba(20,20,40,.32); display: flex; text-align: left; position: relative; overflow: hidden; font-size: 12px; }
.fw-sb { width: 20%; min-width: 150px; max-width: 196px; flex: none; display: none; flex-direction: column; gap: 7px; padding: 10px 8px 8px; background: var(--bg2); font-size: 11px; }
.is-lateral .fw-sb { display: flex; animation: slidein .5s var(--ease) both; }
.fw-sb .grow { flex: 1; }
.d { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex: none; }
.fw-top { display: flex; align-items: center; gap: 4px; color: var(--tx3); }
.fw-url { height: 24px; border-radius: 7px; background: var(--card); box-shadow: 0 0 0 1px var(--line); display: flex; align-items: center; gap: 5px; padding: 0 6px; color: var(--tx3); white-space: nowrap; overflow: hidden; }
.fw-url span { flex: 1; color: var(--tx); overflow: hidden; text-overflow: ellipsis; }
.fw-pins { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; }
.fw-pins span { height: 26px; border-radius: 7px; background: var(--pin); display: grid; place-items: center; }
.fw-grp { border-radius: 9px; background: var(--grpb); padding: 2px; }
.fw-gh { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 7px; font-weight: 700; }
.fw-gh svg { color: var(--tx3); }
.fw-gh .rot { transform: rotate(90deg); }
.fw-gh .sq { width: 7px; height: 7px; border-radius: 2px; }
.fw-n { font-weight: 500; color: var(--tx3); font-size: 10px; }
.fw-tab { display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 7px; border-radius: 7px; white-space: nowrap; overflow: hidden; }
.fw-tab span { overflow: hidden; text-overflow: ellipsis; }
.fw-tab.on { background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600; }
.fw-sep { width: 46%; height: 1px; background: var(--line); margin: 1px 8px; }
.fw-foot { display: flex; align-items: center; gap: 5px; padding: 0 3px; color: var(--tx3); }
.fw-foot > svg:first-child { height: auto; }
.fw-main { flex: 1; min-width: 0; background: var(--card); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 6% 8%; }
.fw-greet { display: flex; align-items: flex-start; gap: 6px; }
.fw-greet svg { height: auto; overflow: visible; }
.fw-greet span { padding: 6px 10px; border-radius: 10px; background: var(--bg2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.fw-search { width: min(64%, 420px); height: 36px; border-radius: 12px; background: var(--bg2); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--tx3); white-space: nowrap; overflow: hidden; }
.fw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 80%; font-size: 10.5px; color: var(--tx2); }
.fw-chips span { padding: 5px 9px; border-radius: 8px; background: var(--bg2); }
.fw-dock { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: 94%; display: none; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 14px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 14px 34px -10px rgba(20,20,40,.35); white-space: nowrap; color: var(--tx3); }
.is-dock .fw-dock { display: flex; animation: dockin .5s var(--ease) both; }
.vsep { width: 1px; height: 16px; background: var(--line); flex: none; }
.fw-dsearch { min-width: 0; flex: 0 1 auto; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--bg2); display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--tx); overflow: hidden; }
.fw-dsearch svg { color: var(--tx3); }
.fw-dsearch span { overflow: hidden; text-overflow: ellipsis; }
.fw-dtab { position: relative; width: 26px; height: 26px; border-radius: 8px; background: var(--bg2); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--tx2); flex: none; }
.fw-dtab i { position: absolute; bottom: -5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #6A44F9; }
.fw-dock > svg:last-child { height: auto; }
.fw-so { position: absolute; right: 16px; bottom: 14px; display: none; }
.is-so .fw-so { display: block; animation: oobo-in .9s cubic-bezier(.3,.7,.4,1) both; transform-origin: 50% 100%; }
.fw-so svg { height: auto; display: block; overflow: visible; }
.fmt-note { margin: 22px 0 0; font-size: 14px; color: var(--tx3); min-height: 20px; }

/* ---------- painéis (memória, importar) ---------- */
.sec-panel { padding: clamp(24px, 3vw, 40px) 20px; }
.sec-panel.last { padding-bottom: clamp(72px, 9vw, 120px); overflow-x: clip; }
.panel { position: relative; isolation: isolate; overflow: hidden; border-radius: 36px; corner-shape: squircle; padding: clamp(32px, 5vw, 72px); max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 88px); align-items: center; }
.grid-bg { background-color: var(--bg2); background-image: linear-gradient(var(--gridline) 1px, transparent 1px), linear-gradient(90deg, var(--gridline) 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px; }
.panel-txt { flex: 1 1 340px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.mem-list { list-style: none; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); width: 100%; display: flex; flex-direction: column; gap: 12px; }
.mem-list li { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--tx2); }
.mi { width: 38px; height: 38px; border-radius: 12px; background: var(--card); display: grid; place-items: center; color: var(--ac); flex: none; }
.tag { font-size: 11px; font-weight: 600; color: var(--ac); background: var(--acs); padding: 2px 7px; border-radius: 6px; }
#memReplay { margin-top: 4px; }
.mem-demo { flex: 1.3 1 440px; min-width: 0; min-height: 430px; border-radius: 24px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 30px 70px -30px rgba(70,40,190,.28); padding: 12px; }
.mem-search { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px; border-radius: 15px; corner-shape: squircle; background: var(--bg2); }
.mem-typed { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caret { width: 2px; height: 20px; border-radius: 1px; background: var(--ac); animation: caret 1s steps(1) infinite; margin-left: -8px; flex: none; }
.mem-res, .mem-ai { display: none; }
.mem-demo.s1 .mem-res, .mem-demo.s2 .mem-res, .mem-demo.s2 .mem-ai { display: block; }
.mem-ai { display: none; }
.mem-demo.s2 .mem-ai { display: flex; }
.mem-lbl { margin: 0; padding: 18px 8px 8px; font-size: 12px; font-weight: 600; color: var(--tx2); animation: fade .4s ease both; }
.mem-box { border-radius: 15px; corner-shape: squircle; background: var(--grp); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.mem-item { padding: 14px 16px; display: flex; gap: 12px; cursor: default; transition: background .15s; animation: fade .45s var(--ease) .05s both; }
.mem-item + .mem-item { border-top: 1px solid var(--line); animation-delay: .15s; }
.mem-item:hover { background: var(--hov); }
.mem-item > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.num { width: 28px; height: 28px; border-radius: 8px; background: var(--seg); flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--tx2); }
.mt { font-size: 15px; font-weight: 600; }
.ms { font-size: 12.5px; color: var(--tx3); }
.mx { font-size: 14px; line-height: 1.45; color: var(--tx2); }
mark { background: var(--acs); color: inherit; border-radius: 4px; padding: 0 2px; }
.mem-ai { margin-top: 10px; padding: 14px 16px; border-radius: 15px; corner-shape: squircle; background: var(--bg2); gap: 12px; align-items: flex-start; animation: fade .5s var(--ease) both; }
.mem-ai svg { height: auto; flex: none; margin-top: 2px; overflow: visible; }
.mem-ai p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tx2); }
.mem-ai sup { color: var(--ac); font-weight: 700; }

/* ---------- 6. compras ---------- */
.split { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 88px); align-items: center; }
.split.rev { flex-wrap: wrap-reverse; }
.split-txt { flex: 1 1 340px; display: flex; flex-direction: column; gap: 18px; }
.price-wrap { flex: 1.1 1 380px; min-width: 0; display: flex; justify-content: center; position: relative; isolation: isolate; }
.price { width: 100%; max-width: 460px; border-radius: 24px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 40px 90px -30px rgba(20,20,40,.32); overflow: hidden; transition: transform .4s var(--ease); }
.price:hover { transform: translateY(-4px) rotate(-.4deg); }
.pr-head { padding: 20px 20px 0; display: flex; gap: 14px; align-items: center; }
.pr-head > svg { height: auto; }
.pr-ic { width: 48px; height: 48px; border-radius: 13px; corner-shape: squircle; background: var(--bg2); display: grid; place-items: center; flex-shrink: 0; color: var(--tx2); }
.pr-head .fcol { gap: 2px; }
.pr-name { font-size: 15px; font-weight: 600; }
.pr-site { font-size: 13px; color: var(--tx3); }
.pr-now { padding: 18px 20px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; }
.pr-now > span:first-child { font-size: 38px; font-weight: 800; letter-spacing: -.035em; }
.pr-drop { font-size: 13px; font-weight: 600; padding: 4px 9px; visibility: hidden; }
.price.on .pr-drop { visibility: visible; animation: pop .5s cubic-bezier(.3,.7,.4,1) 1.2s both; }
.pr-chart { padding: 14px 20px 4px; }
.pr-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.pr-chart .avg { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.pr-chart .line { fill: none; stroke: var(--tx); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 640; stroke-dashoffset: 640; transition: stroke-dashoffset 1.6s var(--ease); }
.pr-chart .dot { fill: var(--ac); stroke: var(--card); stroke-width: 2.5; opacity: 0; transition: opacity .3s 1.4s; }
.price.on .line { stroke-dashoffset: 0; }
.price.on .dot { opacity: 1; }
.pr-stats { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 20px 16px; gap: 8px; }
.pr-stats div { display: flex; flex-direction: column; gap: 2px; }
.pr-stats dt { font-size: 12px; color: var(--tx3); }
.pr-stats dd { margin: 0; font-size: 15px; font-weight: 600; }
.pr-row { display: flex; align-items: center; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--line); font-size: 14px; }
.pr-row:last-child { gap: 12px; padding-bottom: 16px; }
.pr-row .fcol { gap: 2px; }
.pr-w { font-weight: 500; }
.dot-ok { width: 8px; height: 8px; border-radius: 50%; background: #30A46C; }

/* ---------- 7. privacidade ---------- */
.priv { background: var(--bg2); padding: clamp(80px, 10vw, 136px) 0; overflow: hidden; }
.priv-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(18px, 2.4vw, 28px); }
.priv-head .lead { padding: 0 24px; line-height: 1.55; }
.marquee { width: 100%; margin-top: 8px; overflow: hidden; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.mq-set { display: flex; }
.mq { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 16px; margin-right: 12px; border-radius: 22px; background: var(--card); box-shadow: 0 0 0 1px var(--line); white-space: nowrap; font-size: 15px; font-weight: 500; }
.mq i { width: 8px; height: 8px; border-radius: 50%; background: #30A46C; }
.mq.on i { background: var(--ac); }
.mq b { height: 32px; padding: 0 12px; border-radius: 16px; background: var(--bg2); color: var(--tx); display: flex; align-items: center; font-size: 13.5px; font-weight: 600; }
.mq.on b { background: var(--acs); color: var(--ac); }
.priv-grid { max-width: 1208px; margin-top: clamp(56px, 7vw, 88px); padding: 0 24px; display: flex; flex-wrap: wrap; gap: 20px; }
.priv-count { flex: 1 1 380px; min-width: 0; padding: 30px; display: flex; flex-direction: column; gap: 26px; }
.pc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pc-top .fcol { gap: 4px; }
.pc-num { font-size: clamp(68px, 9vw, 112px); line-height: .95; font-weight: 800; letter-spacing: -.055em; }
.pc-lbl { font-size: 15px; color: var(--tx2); }
.bars { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: flex; flex-direction: column; gap: 7px; }
.bar-l { display: flex; justify-content: space-between; font-size: 14px; }
.bar-l span:first-child { font-weight: 500; }
.bar-l span:last-child { color: var(--tx2); }
.bar-t { height: 6px; border-radius: 3px; background: var(--seg); overflow: hidden; }
.bar-f { height: 6px; border-radius: 3px; background: var(--tx); width: var(--w); transition: width 1.2s var(--ease); }
.bar-f.dim { background: var(--tx3); }
.bars.pending .bar-f { width: 0; }
.priv-side { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.leak { padding: 22px; display: flex; gap: 14px; align-items: flex-start; transition: transform .3s var(--ease), opacity .9s var(--ease); }
.leak:hover { transform: translateY(-2px); }
.leak-ic { width: 40px; height: 40px; border-radius: 12px; corner-shape: squircle; background: rgba(245,165,36,.16); display: grid; place-items: center; flex-shrink: 0; color: #F5A524; }
.leak .fcol { flex: 1; gap: 4px; }
.lk-t { font-size: 15px; font-weight: 600; }
.lk-d { font-size: 14px; line-height: 1.45; color: var(--tx2); }
.rows { overflow: hidden; }
.row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; transition: background .15s; }
.row + .row { border-top: 1px solid var(--line); }
.row:hover { background: var(--hov); }
.row > svg { color: var(--tx3); }
.row .fcol { gap: 2px; }
.r-t { font-size: 15px; font-weight: 500; }
.r-d { font-size: 13px; color: var(--tx3); }

/* ---------- 8. tudo que faz ---------- */
.feat-bar { position: sticky; top: 76px; z-index: 5; display: flex; gap: 10px; align-items: center; padding: 10px 0; background: var(--bg); }
.seg { display: flex; padding: 2px; border-radius: 11px; background: var(--seg); flex: none; }
.seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; font-size: 14px; font-weight: 500; cursor: pointer; background: transparent; color: var(--tx2); transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--tx); box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.06); }
.feat-q { flex: 1; min-width: 0; position: relative; }
.feat-q svg { position: absolute; left: 12px; top: 50%; margin-top: -7.5px; color: var(--tx3); pointer-events: none; }
.feat-q input { width: 100%; height: 38px; border: 0; outline: 0; border-radius: 11px; background: var(--card); box-shadow: 0 0 0 1px var(--line); padding: 0 12px 0 34px; font: inherit; font-size: 15px; color: var(--tx); transition: background .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.feat-q input:focus { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 4px rgba(106,68,249,.18); }
.feat-q input::-webkit-search-cancel-button { -webkit-appearance: none; }
.fg-h { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 6px 8px; font-size: 13px; font-weight: 600; color: var(--tx2); }
.fg-n { font-weight: 400; font-size: 12px; color: var(--tx3); }
.fg-list { list-style: none; margin: 0; padding: 0; border-radius: 16px; corner-shape: squircle; background: var(--grp); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.fi { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 18px; transition: background .15s; }
.fi + .fi { border-top: 1px solid var(--line); }
.fi.top { border-top: 0; }
.fi:hover { background: var(--hov); }
.fi > svg { color: var(--tx2); transition: color .15s; }
.fi:hover > svg { color: var(--ac); }
.fi[hidden] { display: none; }
.fi-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fi-n { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.star { font-size: 10.5px; font-weight: 600; color: var(--ac); }
.fi-d { font-size: 13px; line-height: 1.4; color: var(--tx2); }
kbd { font-family: inherit; font-size: 11.5px; font-weight: 500; color: var(--tx2); background: var(--fill); border-radius: 6px; padding: 2px 7px; flex: none; }
.soon { font-size: 12px; color: var(--tx3); flex: none; }
.no-res { padding: 56px 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; animation: fade .3s ease both; }
.no-res[hidden] { display: none; }
.no-res svg { height: auto; overflow: visible; }
.nr-t { font-size: 15px; font-weight: 600; }
.nr-d { font-size: 14px; color: var(--tx2); }
.btn-more { margin: 22px auto 0; height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--fill); font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background .15s; }
.btn-more:hover { background: var(--seg); }
.btn-more[hidden] { display: none; }

/* ---------- 9. comparativo ---------- */
.cmp { overflow-x: auto; border-radius: 24px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 1px var(--line); -webkit-overflow-scrolling: touch; }
.cmp table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 14px; text-align: left; table-layout: fixed; }
.cmp col.c-l { width: 31.75%; } .cmp col.c-o { width: 20.63%; }
.cmp th, .cmp td { padding: 15px 0; font-weight: 400; vertical-align: middle; }
.cmp tr > :first-child { padding-left: 24px; }
.cmp tr > :last-child { padding-right: 24px; }
.cmp thead th { padding-top: 20px; padding-bottom: 20px; font-weight: 600; color: var(--tx2); border-bottom: 1px solid var(--line); }
.cmp thead th:nth-child(2) { color: var(--tx); }
.cmp-o { display: flex; align-items: center; gap: 8px; }
.cmp-o svg { height: auto; }
.cmp tbody tr { transition: background .15s; }
.cmp tbody tr:hover { background: var(--hov); }
.cmp tbody tr + tr { border-top: 1px solid var(--line); }
.cmp td { color: var(--tx2); }
.cmp td.no { color: var(--tx3); }
.cmp td.o { color: var(--tx); font-weight: 600; }
.cmp td.o span { display: flex; align-items: center; gap: 7px; }
.cmp td.o svg { color: var(--ac); }

/* ---------- 10. importar ---------- */
.works { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.works-lbl { font-size: 13px; font-weight: 600; color: var(--tx3); }
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.logos li { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12px; color: var(--tx2); transition: transform .3s var(--ease); }
.logos li:hover { transform: translateY(-4px); }
.lg { width: 60px; height: 60px; border-radius: 18px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 8px 20px -12px rgba(0,0,0,.25); display: grid; place-items: center; }
.imp-wrap { flex: 1 1 400px; min-width: 0; display: flex; justify-content: center; position: relative; padding: 28px 0; }
.imp { width: 100%; max-width: 460px; border-radius: 24px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 40px 90px -30px rgba(20,20,40,.32); overflow: hidden; }
.imp-head { padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--line); }
.brand { display: block; flex: none; object-fit: contain; }
.imp-who { display: flex; align-items: center; gap: 12px; }
.imp-who .fcol { gap: 2px; }
.imp-t { font-size: 16px; font-weight: 600; }
.imp-f { font-size: 13px; color: var(--tx3); }
.imp-br { display: flex; flex-wrap: wrap; gap: 6px; }
.brw { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px 0 8px; border: 0; border-radius: 10px; background: var(--bg2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s var(--ease); }
.brw:hover { transform: translateY(-1px); }
.brw.is-on { background: var(--acs); box-shadow: inset 0 0 0 1.5px var(--ac); }
.imp-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: 15px; }
.imp-row span { flex: 1; }
.imp-row + .imp-row { border-top: 1px solid var(--line); }
.imp-foot { padding: 16px 20px 20px; background: var(--bg2); border-top: 1px solid var(--line); min-height: 44px; }
.if-idle, .if-run, .if-done { display: none; }
.imp-foot[data-state="idle"] .if-idle { display: flex; align-items: center; gap: 12px; }
.imp-foot[data-state="run"] .if-run { display: flex; flex-direction: column; gap: 10px; }
.imp-foot[data-state="done"] .if-done { display: flex; align-items: center; gap: 10px; animation: fade .4s ease both; }
.if-hint { font-size: 13px; color: var(--tx3); }
.if-lbl { display: flex; justify-content: space-between; font-size: 13px; }
.if-lbl span:last-child { color: var(--tx3); }
.if-track { height: 6px; border-radius: 3px; background: var(--seg); overflow: hidden; }
.if-fill { height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #6A44F9, #9A7BFF); transition: width .12s linear; }
.ok-ic { width: 22px; height: 22px; border-radius: 50%; background: #30A46C; display: grid; place-items: center; color: #fff; flex: none; }
.if-dt { font-size: 14px; font-weight: 600; }

/* ---------- 11. fechamento ---------- */
.closing { position: relative; overflow: hidden; background-color: #15172B; 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: 56px 56px; color: #fff; padding: clamp(110px, 14vw, 190px) 24px; }
.closing-in { position: relative; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.h2-close { margin: 6px 0 0; font-size: clamp(40px, 6.4vw, 76px); line-height: 1.02; font-weight: 800; letter-spacing: -.045em; text-wrap: balance; }
.h2-close span { opacity: .7; }
.closing p { margin: 0; font-size: 18px; color: rgba(255,255,255,.85); }
.closing-os { font-size: 13px; color: rgba(255,255,255,.72); }

/* ---------- 12. rodapé ---------- */
.foot { padding: 36px 24px 44px; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; font-size: 13px; color: var(--tx2); }
.foot-in > svg { display: block; }
.foot-c { color: var(--tx3); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- 13. modal ---------- */
.modal { padding: 20px; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; margin: 0; color: var(--tx); overflow: auto; }
.modal:not([open]) { display: none; }
.modal[open] { display: grid; place-items: center; animation: fade .25s ease both; }
.modal::backdrop { background: rgba(10,10,25,.36); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal-card { width: 100%; max-width: 440px; border-radius: 26px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 40px 100px -20px rgba(10,10,30,.5); padding: 30px; position: relative; animation: pop .35s var(--ease) both; }
.modal-x { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 0; padding: 0; border-radius: 10px; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--tx3); transition: background .15s, color .15s; }
.modal-x:hover { background: var(--bg2); color: var(--tx); }
.wl-form { display: flex; flex-direction: column; }
.wl-m { height: auto; display: block; overflow: visible; }
.wl-title { margin: 20px 0 0; font-size: 30px; line-height: 1.05; font-weight: 800; letter-spacing: -.04em; outline: none; }
.wl-sub { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--tx2); }
.wl-sub.center { max-width: 310px; margin: 0; }
.fld, .os legend { display: block; margin-top: 20px; font-size: 13.5px; font-weight: 600; color: var(--tx2); }
@media (prefers-color-scheme: light) { .fld, .os legend { color: #3A3A44; } }
.fld + .fld { margin-top: 14px; }
.fld input { display: block; width: 100%; margin-top: 8px; height: 52px; border: 0; outline: 0; border-radius: 14px; background: var(--soft); padding: 0 18px; font: inherit; font-size: 16px; font-weight: 400; color: var(--tx); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background .2s; }
.fld input:focus { background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 4px rgba(106,68,249,.18); }
.fld input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #E5484D; }
.os { border: 0; margin: 0; padding: 0; min-width: 0; }
.os legend { margin-top: 14px; padding: 0; float: left; width: 100%; }
.os-grid { clear: both; margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.os-opt { position: relative; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; border-radius: 16px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.03); font-size: 15px; font-weight: 600; cursor: pointer; transition: box-shadow .2s, transform .2s var(--ease); }
.os-opt:hover { transform: translateY(-1px); }
.os-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.os-opt .radio { width: 20px; height: 20px; }
.os-opt:has(input:checked) { box-shadow: 0 16px 32px -14px rgba(70,40,190,.32); }
.os-opt:has(input:checked) .radio { box-shadow: inset 0 0 0 6px var(--ac); }
.os-opt:has(input:focus-visible) { outline: 2px solid var(--ac); outline-offset: 2px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wl-err { margin: 12px 0 0; min-height: 0; font-size: 13.5px; color: #E5484D; }
.wl-err:empty { display: none; }
.wl-go { margin-top: 22px; height: 54px; border-radius: 15px; font-size: 16px; transition: opacity .2s, filter .15s, transform .15s; }
.wl-go:disabled { opacity: .45; cursor: default; filter: none; }
.wl-go.is-busy { opacity: .7; cursor: progress; }
.wl-legal { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tx3); text-align: center; }
.wl-legal a { color: var(--tx2); text-decoration: underline; }
.wl-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 18px 0 4px; }
.wl-done[hidden] { display: none; }
.wl-done .wl-title { margin-top: 8px; }
.cheer { position: relative; animation: oobo-cheer .9s cubic-bezier(.3,.7,.4,1) 3; transform-origin: 50% 100%; }
.cheer svg { height: auto; display: block; overflow: visible; }
.happy { transform-box: fill-box; transform-origin: center; transform: scale(1, .6); }
.cf { position: absolute; left: 50%; top: 30%; width: 8px; height: 8px; border-radius: 3px; animation: confetti 1.2s ease-out both; }
.c1 { background: #6A44F9; --dx: -80px; --dy: -70px; }
.c2 { width: 7px; height: 7px; border-radius: 50%; background: #30A46C; --dx: 90px; --dy: -60px; animation-delay: .15s; }
.c3 { background: #F5A524; --dx: -40px; --dy: -100px; animation-delay: .3s; }
.c4 { width: 7px; height: 7px; border-radius: 50%; background: #FF9DD0; --dx: 60px; --dy: -100px; animation-delay: .45s; }

/* ---------- páginas simples (privacidade, termos, 404) ---------- */
.doc { max-width: 720px; margin: 0 auto; padding: calc(66px + 56px) 24px 80px; }
.doc h1 { margin: 0 0 12px; font-size: clamp(34px, 5vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -.04em; }
.doc h2 { margin: 36px 0 8px; font-size: 20px; letter-spacing: -.01em; }
.doc p, .doc li { font-size: 16px; line-height: 1.6; color: var(--tx2); }
.doc a:not(.btn):not(.btn-ghost) { color: var(--ac); text-decoration: underline; }
.doc .note { padding: 14px 16px; border-radius: 14px; background: var(--acs); color: var(--tx); font-size: 14px; }
.doc .note p, .doc .note li { font-size: 15px; color: var(--tx); }
.doc .note p { margin: 0 0 6px; }
.doc .note ul { margin: 0; padding-left: 20px; }
.doc code { font-size: .9em; }
.doc .lost { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding-top: 40px; }
.doc .lost svg { width: 96px; height: auto; overflow: visible; }

/* ---------- responsivo (breakpoint do handoff: 860px) ---------- */
@media (max-width: 859.98px) {
  .dock-nav { display: none; }
  .mock .mock-sb { width: 0; }
  .mock .mini-ctrl { display: flex; }
  .float { display: none; }
  .stats { grid-template-columns: minmax(0,1fr); }
  .stats li + li { border-left: 0; border-top: 1px solid var(--line); }
  .bento { grid-template-columns: minmax(0,1fr); }
  .live, .live.s4 { grid-column: auto; }
  .fmt-win { aspect-ratio: 4 / 5; }
}
@media (max-width: 420px) {
  .modal { padding: 12px; }
  .modal-card { padding: 26px 22px; }
  .seg button { padding: 0 11px; }
}

/* ---------- animações (keyframes do protótipo) ---------- */
@keyframes oobo-look{0%,6%{transform:translate(0,0)}9%,15%{transform:translate(-26px,0)}18%,23%{transform:translate(0,0)}26%,32%{transform:translate(0,-22px)}35%,39%{transform:translate(0,0)}42%,48%{transform:translate(26px,0)}51%,55%{transform:translate(0,0)}59%,62%{transform:translate(-30px,18px)}78%,81%{transform:translate(30px,18px)}86%,100%{transform:translate(0,0)}}
@keyframes oobo-blink{0%,91%,100%{transform:scaleY(1)}94.5%{transform:scaleY(.08)}}
@keyframes oobo-in{0%{transform:translateY(-70px) scale(.9);opacity:0}35%{transform:translateY(0) scale(1.12,.82);opacity:1}55%{transform:translateY(-22px) scale(.97,1.04)}75%{transform:translateY(0) scale(1.05,.94)}100%{transform:none}}
@keyframes oobo-hopl{0%,60%,100%{transform:translateY(0) scale(1,1)}70%{transform:translateY(0) scale(1.06,.92)}80%{transform:translateY(-16px) scale(.97,1.04)}90%{transform:translateY(0) scale(1.03,.97)}}
@keyframes oobo-cheer{0%,100%{transform:translateY(0) scale(1)}20%{transform:translateY(0) scale(1.1,.88)}45%{transform:translateY(-36px) scale(.95,1.07)}70%{transform:translateY(0) scale(1.06,.94)}}
@keyframes confetti{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes mhopA{0%,100%{transform:none}25%{transform:scale(1.08,.9)}55%{transform:translateY(-22px) scale(.96,1.05)}80%{transform:scale(1.04,.96)}}
@keyframes mhopB{0%,100%{transform:none}25%{transform:scale(1.08,.9)}55%{transform:translateY(-22px) scale(.96,1.05)}80%{transform:scale(1.04,.96)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(106,68,249,.5)}100%{box-shadow:0 0 0 9px rgba(106,68,249,0)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes sel{0%,8%{width:0;height:0;opacity:0}12%{opacity:1;width:0;height:0}40%,88%{width:calc(100% + 12px);height:calc(100% + 12px);opacity:1}96%,100%{width:calc(100% + 12px);height:calc(100% + 12px);opacity:0}}
@keyframes menuk{0%,42%{opacity:0;transform:translateY(6px)}48%,68%{opacity:1;transform:none}74%,100%{opacity:0;transform:none}}
@keyframes toastk{0%,70%{opacity:0;transform:translate(-50%,8px)}76%,92%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}
@keyframes postit{0%,12%{opacity:0;transform:scale(.6) rotate(-10deg)}24%,86%{opacity:1;transform:scale(1) rotate(3deg)}96%,100%{opacity:0;transform:scale(.9) rotate(3deg)}}
@keyframes notek{0%,34%{opacity:0;transform:translateY(6px)}42%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes qtype{0%,6%{width:0}30%,48%{width:4ch}52%,100%{width:0}}
@keyframes qsug{0%,30%{opacity:0;transform:translateY(-4px)}34%,48%{opacity:1;transform:none}52%,100%{opacity:0}}
@keyframes qb{0%,50%{opacity:0}54%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes xa{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes xb{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@keyframes tabout{0%,18%{transform:none;opacity:1}30%,80%{transform:translateX(110%);opacity:0}92%,100%{transform:none;opacity:1}}
@keyframes remindk{0%,26%{opacity:0;transform:translateX(-50%) scale(.9)}34%,78%{opacity:1;transform:translateX(-50%)}86%,100%{opacity:0;transform:translateX(-50%) scale(.95)}}
@keyframes statusA{0%,40%{opacity:1}48%,92%{opacity:0}100%{opacity:1}}
@keyframes statusB{0%,40%{opacity:0}48%,92%{opacity:1}100%{opacity:0}}
@keyframes ringp{0%,40%{box-shadow:0 0 0 0 rgba(106,68,249,0)}48%{box-shadow:0 0 0 6px rgba(106,68,249,.25)}60%,100%{box-shadow:0 0 0 0 rgba(106,68,249,0)}}
@keyframes notif{0%,48%{opacity:0;transform:translateY(-8px)}56%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes badge{0%,10%{opacity:0;transform:scale(.4)}18%,85%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes ripA{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes ripB{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@keyframes prog{from{width:0}to{width:100%}}
@keyframes caret{50%{opacity:0}}
@keyframes slidein{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes dockin{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}}

/* menos movimento: para os loops e mostra o estado final */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .rv { opacity: 1; transform: none; }
  .marquee { overflow-x: auto; }
  .xb, .qt-val, .w-st .sb { opacity: 0; }
  .qt-typed { width: 4ch; }
}

/* ---------- beta: chamada na landing ---------- */
.beta-sec { padding-top: 0; }
.beta-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; padding: clamp(28px, 4vw, 48px); border-radius: 28px; corner-shape: squircle; background: var(--bg2); }
.beta-txt { display: flex; flex-direction: column; gap: 14px; flex: 1 1 420px; max-width: 640px; }
.h2-sm { font-size: clamp(30px, 3.6vw, 44px); }
.beta-cta .btn { flex: none; }
.wl-beta { margin: 14px 0 0; font-size: 13.5px; color: var(--tx2); text-align: center; }
.wl-beta a { color: var(--ac); font-weight: 600; }
.wl-beta a:hover { text-decoration: underline; }

/* ---------- /participar ---------- */
.beta { display: flex; flex-direction: column; gap: 28px; }
.beta-head { display: flex; flex-direction: column; gap: 14px; }
.doc .beta-head .lead { font-size: 18px; line-height: 1.5; margin: 0; }
.doc .beta-head h1 { margin: 0; }
.beta-card { border-radius: 26px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 30px 70px -30px rgba(70,40,190,.22); padding: clamp(22px, 4vw, 34px); }
.pf { display: flex; flex-direction: column; }
.pf .fld:first-child { margin-top: 0; }
.pf .fld { margin-top: 18px; }
.opt { font-weight: 400; color: var(--tx3); margin-left: 4px; }
.grp-f { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.grp-f legend { padding: 0; font-size: 13.5px; font-weight: 600; color: var(--tx2); }
@media (prefers-color-scheme: light) { .grp-f legend { color: #3A3A44; } }
.picks { margin-top: 8px; display: grid; gap: 8px; }
.picks-br { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.picks-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick { position: relative; display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 8px 12px; border-radius: 14px; corner-shape: squircle; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.03); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: box-shadow .2s, transform .2s var(--ease), background .2s; }
.pick:hover { transform: translateY(-1px); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick > svg { color: var(--tx2); }
.pick span { display: flex; flex-direction: column; line-height: 1.2; }
.pick small { font-size: 11.5px; font-weight: 400; color: var(--tx3); margin-top: 2px; }
.pick:has(input:checked) { background: var(--acs); box-shadow: inset 0 0 0 1.5px var(--ac); }
.pick:has(input:focus-visible) { outline: 2px solid var(--ac); outline-offset: 2px; }
.sel { position: relative; display: block; margin-top: 8px; }
.sel select { display: block; width: 100%; height: 52px; border: 0; outline: 0; border-radius: 14px; background: var(--soft); padding: 0 44px 0 18px; font: inherit; font-size: 16px; font-weight: 400; color: var(--tx); box-shadow: inset 0 0 0 1px var(--line); -webkit-appearance: none; appearance: none; cursor: pointer; }
.sel select:focus { background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 4px rgba(106,68,249,.18); }
.sel svg { position: absolute; right: 16px; top: 50%; margin-top: -7px; color: var(--tx3); pointer-events: none; }
.fld textarea { display: block; width: 100%; margin-top: 8px; min-height: 110px; resize: vertical; border: 0; outline: 0; border-radius: 14px; background: var(--soft); padding: 14px 18px; font: inherit; font-size: 16px; font-weight: 400; line-height: 1.45; color: var(--tx); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background .2s; }
.fld textarea:focus { background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 4px rgba(106,68,249,.18); }
.chk { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; font-size: 14.5px; line-height: 1.45; color: var(--tx); cursor: pointer; }
.chk + .chk { margin-top: 12px; }
.chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chk .box { width: 22px; height: 22px; flex: none; margin-top: -1px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px #C7C7CF; display: grid; place-items: center; color: transparent; transition: background .15s, box-shadow .15s, color .15s; }
.chk input:checked + .box { background: var(--ac); box-shadow: none; color: #fff; }
.chk input:focus-visible + .box { outline: 2px solid var(--ac); outline-offset: 2px; }
.chk a { color: var(--ac); text-decoration: underline; }
.doc .wl-err { color: #E5484D; font-size: 13.5px; margin: 14px 0 0; }
.doc .wl-legal { font-size: 12.5px; line-height: 1.45; color: var(--tx3); }
.doc .wl-done p { margin: 0; }
.doc a.btn-ghost { text-decoration: none; color: var(--tx); display: inline-flex; align-items: center; }
@media (max-width: 420px) {
  .picks-br { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picks-3 { grid-template-columns: minmax(0, 1fr); }
}
.doc .eyebrow { color: var(--ac); font-size: 15px; line-height: normal; }