/* Delivery Fácil · landing (design: Claude Design "Landing Page v2") */
:root {
  --azul: #154FEA;
  --azul-esc: #0f3cb8;
  --azul-claro: #8fb0ff;
  --tinta: #1d1d1f;
  --tinta-2: #424245;
  --muda: #6e6e73;
  --muda-2: #86868b;
  --cinza: #f5f5f7;
  --linha: #d2d2d7;
  --linha-2: #e3e3e8;
  --grafite: #1d1d1f;
  --borda-esc: #2a2a2d;
  --texto-esc: #a1a1a6;
  --cab-h: 60px;
  --suave: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cab-h) + 12px); -webkit-text-size-adjust: 100%; }
html { overflow-x: clip; }
body { margin: 0; background: #fff; color: var(--tinta); font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--azul); text-decoration: none; transition: color .2s; }
a:hover { color: var(--azul-esc); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
h1, h2, p { margin: 0; }

.pular { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; padding: 10px 14px; border-radius: 10px; }
.pular:focus { left: 8px; }

/* ── Cabeçalho ─────────────────────────────────────────── */
/* No topo é uma barra inteira; ao rolar, a barra some e o conteúdo vira um balão flutuante. */
.topo { position: sticky; top: 0; z-index: 30; height: var(--cab-h); background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(0,0,0,.07); transition: background .45s, border-color .45s, backdrop-filter .45s, -webkit-backdrop-filter .45s; }
.topo-in { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 22px; height: var(--cab-h); display: flex; align-items: center; gap: 28px; border: 1px solid transparent; border-radius: 0; transition: max-width .6s var(--suave), height .5s var(--suave), transform .6s var(--suave), padding .5s var(--suave), border-radius .5s var(--suave), background .45s, border-color .45s, box-shadow .5s; }
.topo.rolou { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.topo.rolou .topo-in { pointer-events: auto; max-width: 1000px; height: 54px; padding: 0 8px 0 18px; transform: translateY(10px); border-radius: 18px; background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-color: rgba(0,0,0,.08); box-shadow: 0 18px 40px -20px rgba(15,23,42,.35), 0 2px 6px -2px rgba(15,23,42,.08); }
.topo.rolou .btn-pq { padding: 10px 16px; border-radius: 12px; }
@media (max-width: 1060px) { .topo.rolou .topo-in { max-width: calc(100% - 24px); } }
.marca { display: flex; align-items: center; gap: 10px; color: var(--tinta); flex: none; }
.marca:hover { color: var(--tinta); }
.marca svg { width: 26px; height: 26px; color: var(--azul); transition: transform .5s var(--suave); }
.marca:hover svg { transform: translateX(3px); }
.marca span { font: 800 16px/1 Archivo, sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.menu { display: flex; gap: 26px; margin: 0 auto; font: 400 13.5px/1 'Geist', sans-serif; }
.menu a { color: var(--tinta-2); position: relative; padding: 6px 0; }
.menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--suave); }
.menu a:hover, .menu a.ativo { color: var(--tinta); }
.menu a.ativo::after { transform: scaleX(1); }
.topo .btn-pq { margin-left: auto; }
.progresso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--azul); transform-origin: left; transform: scaleX(var(--p, 0)); transition: left .5s var(--suave), right .5s var(--suave), bottom .5s var(--suave), border-radius .5s; }
.topo.rolou .progresso { left: 18px; right: 18px; bottom: 5px; border-radius: 2px; opacity: .9; }
@media (max-width: 899px) { .menu { display: none; } }

/* ── Botões e textos ───────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border-radius: 999px; background: var(--azul); color: #fff; font: 500 16px/1 'Geist', sans-serif; white-space: nowrap; transition: background .2s, transform .2s var(--suave), box-shadow .3s; }
.btn:hover { background: var(--azul-esc); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(21,79,234,.7); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-pq { padding: 10px 18px; font-size: 13.5px; flex: none; }
.btn-gd { padding: 16px 30px; font-size: 18px; }
.btn.grafite { background: var(--grafite); }
.btn.grafite:hover { background: #000; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
.link-seta { font: 500 16px/1 'Geist', sans-serif; padding: 13px 8px; transition: color .2s, letter-spacing .3s; }
.link-seta:hover { letter-spacing: .01em; }
.link-seta.claro { color: var(--azul-claro); }
.link-seta.claro:hover { color: #fff; }

.eyebrow { font: 600 clamp(15px,1.6vw,19px)/1 'Geist', sans-serif; color: var(--azul); white-space: nowrap; }
.eyebrow.claro { color: var(--azul-claro); }
.cinza { color: var(--muda-2); }
.titulo { font: 700 clamp(40px,6.4vw,80px)/.98 'Geist', sans-serif; letter-spacing: -.055em; text-wrap: balance; }
.titulo.menor { font-size: clamp(38px,5.6vw,68px); line-height: 1; letter-spacing: -.05em; }
.titulo.grande { font-size: clamp(48px,8.6vw,108px); line-height: .95; letter-spacing: -.06em; }
.texto { max-width: 38ch; font: 400 clamp(16px,1.7vw,19px)/1.5 'Geist', sans-serif; color: var(--muda); text-wrap: pretty; }
.texto.escuro { color: var(--texto-esc); }
.nota { font: 400 13px/1.5 'Geist', sans-serif; color: var(--muda); }

/* ── Estrutura ─────────────────────────────────────────── */
.sec { padding: clamp(96px,12vw,150px) 22px; }
.cinza-bg { background: var(--cinza); }
.preto-bg { background: #000; color: #f5f5f7; }
.caixa { max-width: 1080px; margin: 0 auto; }
.col { display: flex; flex-direction: column; gap: clamp(36px,5vw,56px); }
.cab { display: flex; flex-direction: column; gap: 18px; }
.centro-tx { align-items: center; text-align: center; }
.lado { display: flex; flex-wrap: wrap; gap: clamp(28px,5vw,64px); align-items: stretch; }
.lado.topo-al { align-items: flex-start; }
.lado.centro { align-items: center; gap: clamp(40px,7vw,96px); }
.col-tx { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* ── Hero ──────────────────────────────────────────────── */
.hero { padding: clamp(72px,11vw,128px) 22px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; background: radial-gradient(60% 46% at 50% 92%, rgba(21,79,234,.13), transparent 70%); overflow: hidden; }
.hero h1 { max-width: 13ch; font: 700 clamp(48px,9.2vw,112px)/.96 'Geist', sans-serif; letter-spacing: -.055em; text-wrap: balance; }
.hero-sub { max-width: 34ch; font: 400 clamp(18px,2vw,23px)/1.4 'Geist', sans-serif; color: var(--tinta-2); letter-spacing: -.01em; text-wrap: balance; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; padding-top: 6px; }
.hero-prova { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; font: 400 14px/1.3 'Geist', sans-serif; color: var(--muda); }
.hero-prova a { font-weight: 500; }
.numeros { display: flex; gap: 18px; padding-left: 18px; border-left: 1px solid var(--linha); }
.numeros strong { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .numeros { padding-left: 0; border-left: 0; width: 100%; justify-content: center; } }

.hero-palco { position: relative; width: 100%; max-width: 1040px; margin-top: clamp(36px,6vw,64px); height: 520px; }
.tela-desk { position: absolute; left: 0; right: 14%; top: 0; bottom: 0; margin: 0; border-radius: clamp(14px,2vw,22px) clamp(14px,2vw,22px) 0 0; background: var(--grafite); padding: clamp(8px,1.2vw,14px) clamp(8px,1.2vw,14px) 0; box-shadow: 0 -10px 60px -20px rgba(0,0,0,.25); }
.tela-desk-in, .tela-cel-in { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--cinza); }
.tela-desk-in { border-radius: 8px 8px 0 0; }
.tela-desk img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.tela-cel { position: absolute; right: 0; bottom: -40px; width: 230px; aspect-ratio: 9/19; margin: 0; border-radius: clamp(26px,3.4vw,44px); background: var(--grafite); padding: clamp(6px,.8vw,10px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); }
.tela-cel-in { border-radius: clamp(20px,2.8vw,36px); }
.tela-cel img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 819px) {
  .hero-palco { height: 300px; }
  .tela-desk { right: 22%; }
  .tela-cel { width: 128px; }
}

/* entrada do topo */
.entra { opacity: 0; transform: translateY(18px); animation: entra .9s var(--suave) forwards; animation-delay: calc(var(--i) * 90ms + 80ms); }
.tela-desk { opacity: 0; transform: translateY(60px); animation: sobe 1.2s var(--suave) .45s forwards; }
.tela-cel { opacity: 0; transform: translate(40px, 80px) rotate(4deg); animation: celular 1.3s var(--suave) .75s forwards; }
@keyframes entra { to { opacity: 1; transform: none; } }
@keyframes sobe { to { opacity: 1; transform: translateY(var(--px, 0px)); } }
@keyframes celular { to { opacity: 1; transform: translateY(var(--pc, 0px)); } }
.anima-ok .tela-desk { transform: translateY(var(--px, 0px)); opacity: 1; animation: none; }
.anima-ok .tela-cel { transform: translateY(var(--pc, 0px)); opacity: 1; animation: none; }

/* ── Revelar ao rolar ──────────────────────────────────── */
.js .r { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--suave), transform .8s var(--suave); transition-delay: var(--atraso, 0ms); }
.js .r.vis { opacity: 1; transform: none; }

/* ── Bento ─────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.card { border-radius: 28px; background: #fff; padding: 36px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; position: relative; transition: transform .5s var(--suave), box-shadow .5s var(--suave), opacity .8s var(--suave); }
.card:hover { box-shadow: 0 30px 60px -36px rgba(0,0,0,.35); }
.js .card.r.vis:hover { transform: translateY(-4px); }
.s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; }
.alto { min-height: 380px; } .medio { min-height: 340px; } .baixo { min-height: 300px; }
.card.preto { background: #000; color: #fff; justify-content: space-between; gap: 16px; }
.card.azul { background: var(--azul); color: #fff; }
.card.grafite { background: var(--grafite); color: #fff; }
.rotulo { font: 600 14px/1 'Geist', sans-serif; color: var(--azul); }
.rotulo.claro { color: var(--azul-claro); }
.rotulo.branco { color: #fff; }
.rotulo.cinza-t { color: var(--muda); }
.card-t { font: 700 clamp(28px,3.2vw,40px)/1.05 'Geist', sans-serif; letter-spacing: -.04em; }
.card-t2 { max-width: 15ch; font: 700 clamp(26px,2.8vw,34px)/1.08 'Geist', sans-serif; letter-spacing: -.04em; }
.card-t3 { font: 700 clamp(24px,2.4vw,30px)/1.1 'Geist', sans-serif; letter-spacing: -.04em; }
.card-d { font: 400 16px/1.45 'Geist', sans-serif; color: var(--muda); }
.card-d.escuro { color: var(--texto-esc); font-size: 15px; }
.zero { font: 700 clamp(96px,11vw,132px)/.85 'Geist', sans-serif; letter-spacing: -.07em; }

.anel { position: absolute; right: -30px; bottom: -30px; width: 270px; height: 270px; border-radius: 50%; background: conic-gradient(var(--azul) 0 var(--anel, 80%), #e8e8ed 0); display: grid; place-items: center; transition: transform .8s var(--suave); }
.card:hover .anel { transform: rotate(-6deg) scale(1.03); }
.anel-in { width: 76%; height: 76%; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.anel-n { font: 700 52px/1 'Geist', sans-serif; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.anel-l { font: 400 13px/1 'Geist', sans-serif; color: var(--muda); }

.fav { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--cinza); }
.fav-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; background: #fff; color: #ff375f; display: grid; place-items: center; font-size: 16px; }
.card:hover .fav-ic { animation: pulsa 1s var(--suave); }
@keyframes pulsa { 30% { transform: scale(1.25); } 60% { transform: scale(.95); } }
.fav-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fav-n { font: 600 13.5px/1.2 'Geist', sans-serif; }
.fav-d { font: 400 12.5px/1.3 'Geist', sans-serif; color: var(--muda); }
.fav-btn { flex: none; padding: 9px 13px; border-radius: 999px; background: var(--azul); color: #fff; font: 500 12.5px/1 'Geist', sans-serif; }

.ticket { margin-top: auto; position: relative; background: #fff; color: var(--tinta); border-radius: 16px; padding: 18px 26px; display: flex; align-items: center; gap: 18px; transition: transform .6s var(--suave); }
.card:hover .ticket { transform: rotate(-2deg) translateY(-4px); }
.ticket::before, .ticket::after { content: ''; position: absolute; top: 50%; margin-top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--azul); }
.ticket::before { left: -11px; } .ticket::after { right: -11px; }
.ticket-v { font: 700 34px/1 'Geist', sans-serif; letter-spacing: -.04em; color: var(--azul); }
.ticket-sep { width: 0; align-self: stretch; border-left: 2px dashed var(--linha); }
.ticket-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ticket-tx span { font: 600 14px/1.2 'Geist', sans-serif; }
code { font: 500 12px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--muda); }

.url { margin-top: auto; border-radius: 12px; background: var(--cinza); padding: 14px 16px; display: flex; align-items: center; gap: 8px; font: 500 15px/1 'Geist', sans-serif; }
.url > span:first-child { color: var(--muda-2); }
.cursor { width: 2px; height: 18px; background: var(--azul); animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }

.barras { margin-top: auto; height: 96px; display: flex; align-items: flex-end; gap: 8px; }
.barras span { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: #e8e8ed; transform-origin: bottom; transition: transform 1s var(--suave), background .3s; }
.barras span.on { background: var(--azul); }
.js .barras span { transform: scaleY(0); }
.js .vis .barras span { transform: scaleY(1); }
.barras span:nth-child(2) { transition-delay: 60ms; } .barras span:nth-child(3) { transition-delay: 120ms; } .barras span:nth-child(4) { transition-delay: 180ms; }
.barras span:nth-child(5) { transition-delay: 240ms; } .barras span:nth-child(6) { transition-delay: 300ms; } .barras span:nth-child(7) { transition-delay: 360ms; }
.card:hover .barras span:not(.on) { background: #dcdce3; }

@media (max-width: 819px) {
  .bento { grid-template-columns: 1fr; }
  .s2, .s3, .s4 { grid-column: auto; }
  .alto { min-height: 300px; } .medio { min-height: 260px; } .baixo { min-height: 220px; }
  .s4.alto { min-height: 460px; }
  .anel { width: 200px; height: 200px; }
  .anel-n { font-size: 42px; }
  .card { padding: 28px; }
}

/* ── Calculadora ───────────────────────────────────────── */
.calc-campos { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.campo { display: flex; flex-direction: column; gap: 12px; }
.campo-cab { display: flex; align-items: baseline; gap: 10px; font: 400 16px/1.3 'Geist', sans-serif; color: var(--texto-esc); }
.campo-cab output { margin-left: auto; font: 600 24px/1 'Geist', sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #f5f5f7; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --pc: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--azul) var(--pc), #2a2a2d var(--pc)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: #2a2a2d; }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--azul); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(21,79,234,.35); transition: transform .2s, box-shadow .2s; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(21,79,234,.35); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(21,79,234,.3); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { cursor: pointer; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--borda-esc); background: transparent; font: 500 13px/1 'Geist', sans-serif; color: #f5f5f7; transition: background .25s, border-color .25s; }
.chip:hover { border-color: #4a4a50; }
.chip.on { border-color: var(--azul); background: rgba(21,79,234,.25); }
.calc-res { flex: 1 1 380px; min-width: 0; border-radius: 32px; background: var(--grafite); padding: clamp(28px,4vw,44px); display: flex; flex-direction: column; gap: 22px; position: relative; overflow: hidden; }
.brilho { position: absolute; right: -100px; bottom: -140px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(21,79,234,.55), transparent 68%); pointer-events: none; animation: respira 6s ease-in-out infinite; }
.brilho.esq { right: auto; left: -80px; bottom: -120px; background: radial-gradient(circle, rgba(21,79,234,.5), transparent 68%); }
.brilho.topo-dir { right: -120px; top: -120px; bottom: auto; width: 340px; height: 340px; }
@keyframes respira { 50% { transform: scale(1.12); opacity: .8; } }
.calc-res > *:not(.brilho) { position: relative; }
.res-l { font: 400 16px/1.3 'Geist', sans-serif; color: var(--texto-esc); }
.res-l strong { color: #f5f5f7; font-weight: 600; }
.res-v { font: 700 clamp(56px,7.4vw,92px)/.9 'Geist', sans-serif; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.res-pe { margin-top: auto; border-top: 1px solid var(--borda-esc); padding-top: 20px; display: flex; flex-direction: column; gap: 14px; font: 400 15px/1.5 'Geist', sans-serif; color: #d2d2d7; }
.res-pe b { color: var(--azul-claro); font-weight: 600; }
.res-pe .btn { align-self: flex-start; font-size: 15px; padding: 13px 22px; }

/* ── Campanhas ─────────────────────────────────────────── */
.camp-lista { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.grupo { display: flex; flex-direction: column; gap: 4px; }
.grupo-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-bottom: 8px; }
.grupo-cab b { font: 600 13px/1 'Geist', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.grupo-cab span { font: 400 13px/1 'Geist', sans-serif; color: var(--muda-2); }
.camp { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: transparent; transition: background .25s, transform .25s var(--suave); }
.camp:hover { background: #f7f8fb; }
.camp:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.camp.on { background: #f0f4ff; }
.camp-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #c7c7cc; transition: background .25s, transform .25s; }
.camp.on .camp-dot { background: var(--azul); transform: scale(1.3); }
.camp-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.camp-tx b { font: 600 17px/1.2 'Geist', sans-serif; letter-spacing: -.015em; }
.camp-tx span { font: 400 14px/1.45 'Geist', sans-serif; color: var(--muda); text-wrap: pretty; }
.camp-seta { flex: none; font: 400 18px/1 'Geist', sans-serif; color: #c7c7cc; transition: transform .25s, color .25s; }
.camp.on .camp-seta { color: var(--azul); transform: translateX(3px); }
.camp-inline { display: none; }

.camp-palco { flex: 1 1 380px; min-width: 0; position: sticky; top: 90px; border-radius: 32px; background: #000; color: #f5f5f7; padding: clamp(26px,3.4vw,40px); display: flex; flex-direction: column; gap: 24px; overflow: hidden; }
.camp-palco > *:not(.brilho) { position: relative; }
.camp-palco .nota { color: var(--texto-esc); }
.camp-palco-in { display: flex; flex-direction: column; gap: 24px; }
.camp-palco-in.troca > * { animation: troca .5s var(--suave) both; }
.camp-palco-in.troca > *:nth-child(2) { animation-delay: 60ms; }
.camp-palco-in.troca > *:nth-child(3) { animation-delay: 140ms; }
@keyframes troca { from { opacity: 0; transform: translateY(12px); } }
.pal-g { font: 600 13px/1 'Geist', sans-serif; color: var(--azul-claro); }
.pal-t { font: 700 clamp(28px,3vw,36px)/1.05 'Geist', sans-serif; letter-spacing: -.04em; }
.pal-cab { display: flex; flex-direction: column; gap: 10px; }
.pal-q { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 400 15px/1.4 'Geist', sans-serif; }
.pal-q i { font-style: normal; padding: 8px 12px; border-radius: 999px; background: var(--grafite); border: 1px solid var(--borda-esc); font: 500 12.5px/1 'Geist', sans-serif; color: #d2d2d7; }
.msg { align-self: flex-start; max-width: 100%; background: #fff; color: var(--tinta); border-radius: 6px 20px 20px 20px; padding: 15px 16px; display: flex; flex-direction: column; gap: 10px; }
.msg > span { font: 400 14.5px/1.45 'Geist', sans-serif; text-wrap: pretty; }
.msg-cupom { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 12px; background: #f0f4ff; }
.msg-cupom::before, .msg-cupom::after { content: ''; position: absolute; top: 50%; margin-top: -8px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.msg-cupom::before { left: -8px; } .msg-cupom::after { right: -8px; }
.msg-cupom b { font: 700 22px/1 'Geist', sans-serif; letter-spacing: -.03em; color: var(--azul); }
.msg-cupom i { width: 0; align-self: stretch; border-left: 2px dashed #c9d8ff; }
.msg-cupom code { color: var(--tinta-2); }
.msg small { align-self: flex-end; font: 400 10.5px/1 'Geist', sans-serif; color: var(--muda-2); }
.msg.digitando { display: inline-flex; flex-direction: row; gap: 4px; padding: 14px 16px; }
.msg.digitando i { width: 7px; height: 7px; border-radius: 50%; background: #c7c7cc; animation: ponto 1s infinite; }
.msg.digitando i:nth-child(2) { animation-delay: .15s; } .msg.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes ponto { 30% { transform: translateY(-4px); background: var(--muda-2); } }

@media (max-width: 819px) {
  .camp-palco { display: none; }
  .camp-inline { display: block; overflow: hidden; height: 0; transition: height .45s var(--suave); }
  .camp-inline-in { margin: 6px 0 10px; border-radius: 22px; background: #000; color: #f5f5f7; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
  .camp-inline-in .q { font: 400 13.5px/1.4 'Geist', sans-serif; color: #d2d2d7; }
  .camp-inline-in .q b { color: var(--azul-claro); font-weight: 600; }
  .camp-inline-in .msg { border-radius: 6px 18px 18px 18px; }
}

/* ── NextSistem / órbita ───────────────────────────────── */
.grade-itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 28px; padding-top: 10px; }
.item { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--linha); padding-top: 14px; text-align: left; }
.item > span:first-child, .item > span:nth-child(2):not(:last-child) { font: 600 15.5px/1.25 'Geist', sans-serif; }
.item > span:last-child { font: 400 14px/1.5 'Geist', sans-serif; color: var(--muda); text-wrap: pretty; }
.item.escuro { border-top-color: var(--borda-esc); padding-top: 18px; gap: 8px; }
.item.escuro > span:first-child, .item.escuro > span:nth-child(2):not(:last-child) { color: #f5f5f7; font-size: 16px; }
.item.escuro > span:last-child { color: var(--texto-esc); }
.item.escuro > .passo-n { font: 300 15px/1 'Geist', sans-serif; color: var(--azul-claro); }

.orbita { flex: 1 1 400px; min-width: 0; position: relative; aspect-ratio: 1/1; max-width: 480px; width: 100%; margin: 0 auto; perspective: 1200px; }
.orb-cena { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--orx, 0deg)) rotateY(var(--ory, 0deg)); transition: transform .6s var(--suave); }
.orb-anel { position: absolute; border-radius: 50%; }
.orb-anel.a1 { inset: 6%; border: 1px dashed #c7c7cc; animation: gira 90s linear infinite; }
.orb-anel.a2 { inset: 24%; border: 1px solid var(--linha-2); animation: gira 40s linear infinite reverse; }
@keyframes gira { to { transform: rotate(360deg); } }
/* satélites pequenos no anel de dentro */
.orb-sat { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 4px rgba(21,79,234,.12); }
.orb-sat.s1 { left: 50%; top: 0; }
.orb-sat.s2 { left: 93.3%; top: 75%; background: #8fb0ff; }
.orb-sat.s3 { left: 6.7%; top: 75%; width: 5px; height: 5px; margin: -2.5px; background: #c7c7cc; box-shadow: none; }
.orb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orb-raios line { stroke: #b9c8f3; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; animation: fluxo 1.2s linear infinite; transition: stroke .3s, opacity .4s; }
.orb-raios line.on { stroke: var(--azul); stroke-dasharray: none; }
@keyframes fluxo { to { stroke-dashoffset: -16; } }
.orb-pulsos circle { fill: url(#orb-pulso); }
.orb-pulsos circle.nucleo { fill: var(--azul); }

.orb-centro { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1/1; transform: translate(-50%,-50%) scale(var(--bate, 1)); border-radius: 30%; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.45), 0 0 0 0 rgba(21,79,234,0); z-index: 2; transition: transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .35s; }
.orb-centro.recebeu { --bate: 1.05; box-shadow: 0 30px 60px -24px rgba(0,0,0,.45), 0 0 0 10px rgba(21,79,234,.12); }
.orb-nome { position: relative; font: 800 clamp(16px,2vw,22px)/1 Archivo, sans-serif; letter-spacing: -.02em; color: #fff; }
.orb-centro b { color: #0F7B5F; }
.orb-centro small { position: relative; font: 400 11px/1 'Geist', sans-serif; color: var(--texto-esc); }
.orb-ping { position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid rgba(21,79,234,.45); animation: ping 3.2s cubic-bezier(.2,.6,.3,1) infinite; pointer-events: none; }
.orb-ping.p2 { animation-delay: 1.6s; }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }

.orb-p { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%,-50%) scale(var(--s, 1)); display: flex; align-items: center; gap: 9px; padding: 10px 14px 10px 10px; border-radius: 999px; background: #fff; color: var(--tinta); box-shadow: 0 10px 24px -12px rgba(0,0,0,.3); white-space: nowrap; font: 500 13px/1 'Geist', sans-serif; cursor: default; transition: box-shadow .3s, background .3s, color .3s; will-change: left, top, transform; }
.orb-p:hover { --s: 1.08; box-shadow: 0 16px 30px -12px rgba(21,79,234,.45); }
.orb-p.recebeu i { background: var(--azul); color: #fff; }
.orb-p i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: #f0f4ff; color: var(--azul); display: grid; place-items: center; font: 600 12px/1 'Geist', sans-serif; transition: background .3s, color .3s; }
.orb-p.dest { background: var(--azul); color: #fff; }
.orb-p.dest i { background: #fff; color: var(--azul); }
@media (max-width: 520px) { .orb-p { font-size: 11.5px; padding: 7px 10px 7px 7px; gap: 6px; } .orb-p i { width: 20px; height: 20px; font-size: 10px; } }

/* ── Painel ────────────────────────────────────────────── */
#painel .col { gap: 22px; }
.painel-tela { width: 100%; margin: clamp(28px,5vw,56px) 0 0; border-radius: clamp(14px,2vw,22px); background: var(--grafite); padding: clamp(8px,1.2vw,14px); box-shadow: 0 0 0 1px var(--borda-esc), 0 40px 120px -40px rgba(21,79,234,.55); }
.js .painel-tela.r { transform: translateY(60px) scale(.96); transition-duration: 1.1s; }
.js .painel-tela.r.vis { transform: none; }
.painel-in { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #111; }
.painel-in img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.grade-painel { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; padding-top: clamp(28px,4vw,48px); }

/* ── WhatsApp ──────────────────────────────────────────── */
.zap { flex: 0 1 340px; min-width: 0; margin: 0 auto; aspect-ratio: 9/17; max-height: 640px; width: 100%; max-width: 340px; border-radius: 52px; background: var(--grafite); padding: 11px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.45); }
.zap-in { width: 100%; height: 100%; border-radius: 42px; background: #efeae2; overflow: hidden; display: flex; flex-direction: column; }
.zap-cab { flex: none; background: #f7f7f7; padding: 38px 18px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e3e3e3; }
.zap-cab div { display: flex; flex-direction: column; gap: 2px; }
.zap-cab b { font: 600 14px/1 'Geist', sans-serif; }
.zap-cab small { font: 400 11px/1 'Geist', sans-serif; color: var(--muda-2); }
.zap-av { width: 34px; height: 34px; border-radius: 50%; background: #e2543c; color: #fff; display: grid; place-items: center; font: 800 15px/1 Archivo, sans-serif; }
.zap-corpo { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.bolha { align-self: flex-start; max-width: 88%; background: #fff; border-radius: 4px 16px 16px 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 0 rgba(0,0,0,.08); transform-origin: top left; }
.bolha b { font: 600 11px/1 'Geist', sans-serif; color: var(--azul); }
.bolha b.verde { color: #1f7a4d; }
.bolha span { font: 400 13.5px/1.4 'Geist', sans-serif; text-wrap: pretty; }
.bolha small { align-self: flex-end; font: 400 10px/1 'Geist', sans-serif; color: var(--muda-2); }
.js .zap .bolha { opacity: 0; transform: translateY(14px) scale(.92); transition: opacity .55s var(--suave), transform .55s var(--suave); transition-delay: calc(var(--d) * 700ms + 200ms); }
.js .zap.vis .bolha { opacity: 1; transform: none; }

/* ── Planos ────────────────────────────────────────────── */
#planos .col { gap: clamp(32px,4vw,48px); }
#planos .cab { gap: 14px; }
#planos .texto { max-width: none; }
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.plano { border-radius: 28px; background: var(--cinza); padding: clamp(26px,3.4vw,38px); display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; }
.plano.escuro { background: #000; color: #f5f5f7; }
.plano > *:not(.brilho) { position: relative; }
.plano-cab { display: flex; flex-direction: column; gap: 8px; }
.plano-n { font: 700 clamp(32px,3.6vw,42px)/1 'Geist', sans-serif; letter-spacing: -.045em; }
.plano-d { font: 400 15.5px/1.45 'Geist', sans-serif; color: var(--muda); }
.plano.escuro .plano-d { color: var(--texto-esc); }
.preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.preco span { font: 600 clamp(28px,3.2vw,36px)/1 'Geist', sans-serif; letter-spacing: -.045em; }
.preco small { font: 400 15px/1 'Geist', sans-serif; color: var(--muda); }
.plano.escuro .preco small { color: var(--texto-esc); }
.plano-ac { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.plano-ac .btn { font-size: 15px; padding: 13px 22px; }
.plano-ac .link-seta { font-size: 15px; }

.compara { border-radius: 28px; border: 1px solid var(--linha-2); overflow: hidden; }
.cmp-linha { display: grid; grid-template-columns: minmax(0,1fr) 96px 96px; align-items: center; padding: 13px clamp(18px,3vw,32px); border-top: 1px solid #f0f0f3; }
.cmp-linha:hover { background: #fafafc; }
.cmp-cab { padding: 16px clamp(18px,3vw,32px); background: var(--cinza); font: 600 13px/1 'Geist', sans-serif; color: var(--muda); border-top: 0; }
.cmp-cab:hover { background: var(--cinza); }
.cmp-cab span:nth-child(n+2) { text-align: center; }
.cmp-cab span:last-child { color: var(--azul); }
.cmp-grupo { padding: 20px clamp(18px,3vw,32px) 8px; font: 600 12px/1 'Geist', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muda-2); }
.cmp-linha > span:first-child { font: 400 15px/1.4 'Geist', sans-serif; text-wrap: pretty; }
.cmp-v { text-align: center; font: 500 16px/1 'Geist', sans-serif; }
.cmp-v.nao { color: #c7c7cc; }
.cmp-v.sim2 { color: var(--azul); font-weight: 600; }
.cmp-v.ok { display: inline-block; }
@media (max-width: 819px) { .cmp-linha { grid-template-columns: minmax(0,1fr) 44px 44px; } }

/* ── FAQ ───────────────────────────────────────────────── */
.faq-t { flex: 1 1 280px; }
.faq { flex: 2 1 460px; min-width: 0; display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 22px 0; font: 500 clamp(17px,1.8vw,20px)/1.35 'Geist', sans-serif; letter-spacing: -.01em; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--azul); }
.faq-ic { margin-left: auto; flex: none; font: 300 28px/1 'Geist', sans-serif; color: var(--azul); transition: transform .35s var(--suave); }
.faq details.aberto .faq-ic { transform: rotate(45deg); }
.faq-resp { overflow: hidden; }
.faq-resp p { padding: 0 0 24px; max-width: 60ch; font: 400 16px/1.6 'Geist', sans-serif; color: var(--muda); text-wrap: pretty; }

/* ── Final ─────────────────────────────────────────────── */
.final { padding: clamp(110px,14vw,180px) 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; background-image: radial-gradient(50% 60% at 50% 110%, rgba(21,79,234,.5), transparent 70%); }
.passos { width: 100%; max-width: 900px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: clamp(32px,5vw,56px); }

/* ── Rodapé ────────────────────────────────────────────── */
.rodape { background: var(--cinza); border-top: 1px solid var(--linha-2); }
.rodape-in { padding: 22px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; font: 400 12px/1.4 'Geist', sans-serif; color: var(--muda); }
.marca-pq { font: 800 13px/1 Archivo, sans-serif; color: var(--tinta); }
.rodape-dir { margin-left: auto; }

/* ── WhatsApp flutuante ────────────────────────────────── */
.whats-flut { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(0,0,0,.4); transform: translateY(120px); transition: transform .5s var(--suave), box-shadow .3s; }
.whats-flut.mostra { transform: none; }
.whats-flut:hover { color: #fff; box-shadow: 0 18px 36px -10px rgba(37,211,102,.6); }
.whats-flut svg { width: 30px; height: 30px; }

/* ── Menos movimento ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .entra, .tela-desk, .tela-cel { opacity: 1; transform: none; }
}

/* ── Lenis (rolagem suave com inércia) ─────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── Seletor de versões no topo ────────────────────────── */
.versoes { position: relative; display: inline-flex; padding: 5px; margin-top: clamp(24px,4vw,40px); border-radius: 999px; background: #f0f0f3; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.versoes button { position: relative; z-index: 1; cursor: pointer; border: 0; background: transparent; padding: 11px 20px; border-radius: 999px; font: 600 14.5px/1 'Geist', sans-serif; color: var(--muda); transition: color .35s; display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.versoes button small { font: 400 12.5px/1 'Geist', sans-serif; color: var(--muda-2); transition: color .35s; }
.versoes button.on { color: #fff; }
.versoes button.on small { color: rgba(255,255,255,.75); }
.versoes-ind { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--azul); box-shadow: 0 8px 20px -8px rgba(21,79,234,.7); transition: transform .55s cubic-bezier(.6,.0,.2,1.2), width .55s cubic-bezier(.6,0,.2,1.2); }
.versoes .barra-tempo { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.35); transform-origin: left; transform: scaleX(0); }
@media (max-width: 420px) { .versoes button small { display: none; } }

.hero-palco { margin-top: clamp(24px,4vw,40px); perspective: 1600px; }
.tela-desk-in .vimg, .tela-cel-in .vimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; transform: scale(1.03); filter: blur(3px); transition: opacity .7s var(--suave), transform 1s var(--suave), filter .7s var(--suave); }
.tela-cel-in .vimg { object-position: top; }
.tela-desk-in .vimg.on, .tela-cel-in .vimg.on { opacity: 1; transform: none; filter: none; }
.palco-link { position: absolute; left: 0; right: 14%; bottom: 14px; margin: 0 auto; width: max-content; z-index: 3; padding: 10px 16px; border-radius: 999px; background: rgba(29,29,31,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font: 500 13px/1 'Geist', sans-serif; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s var(--suave), background .2s; }
.hero-palco:hover .palco-link, .palco-link:focus-visible { opacity: 1; transform: none; }
.palco-link:hover { color: #fff; background: var(--azul); }
@media (hover: none) { .palco-link { opacity: 1; transform: none; } }
@media (max-width: 819px) { .palco-link { right: 22%; bottom: 10px; font-size: 12px; padding: 8px 12px; } }

/* inclinação 3D das telas ligada à rolagem */
.tela-desk { transform-origin: 50% 100%; }
.anima-ok .tela-desk { transform: translateY(var(--px, 0px)) rotateX(var(--rx, 0deg)) scale(var(--sc, 1)); }
.anima-ok .tela-cel { transform: translateY(var(--pc, 0px)) rotate(var(--rc, 0deg)); }

/* ── Títulos palavra por palavra ───────────────────────── */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; transform: translateY(105%); filter: blur(8px); opacity: 0; transition: transform 1s var(--suave), filter .9s var(--suave), opacity .9s var(--suave); transition-delay: calc(var(--wi) * 55ms + var(--atraso, 0ms)); }
.dividido.vis .w > span, .hero h1.vis .w > span { transform: none; filter: none; opacity: 1; }
.js .titulo.r.dividido { opacity: 1; transform: none; }

/* ── Luz que segue o mouse e inclinação nos cards ──────── */
.card::after, .plano::after, .calc-res::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(21,79,234,.12), transparent 60%); }
.card.preto::after, .card.grafite::after, .plano.escuro::after, .calc-res::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(143,176,255,.18), transparent 60%); }
.card.azul::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.2), transparent 60%); }
.card:hover::after, .plano:hover::after, .calc-res:hover::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .js .card.r.vis { transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translateY(var(--lift, 0px)); transition: transform .5s var(--suave), box-shadow .5s var(--suave), opacity .8s var(--suave); }
  .js .card.r.vis:hover { --lift: -4px; transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translateY(-4px); }
}

/* painel cresce com a rolagem */
.js .painel-tela.r.vis { transform: perspective(1400px) rotateX(var(--prx, 0deg)) scale(var(--psc, 1)); transition: opacity .8s var(--suave); }

/* número grande do card sem comissão */
.zero { font-variant-numeric: tabular-nums; }

/* CTA final com brilho que respira */
.final { position: relative; overflow: hidden; }
.final::before { content: ''; position: absolute; left: 50%; bottom: -40%; width: 120vmax; height: 60vmax; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(21,79,234,.45), transparent 70%); animation: respira 7s ease-in-out infinite; pointer-events: none; }
.final > * { position: relative; }
.btn-gd { box-shadow: 0 0 0 0 rgba(21,79,234,.55); animation: anel-btn 2.6s ease-out infinite; }
@keyframes anel-btn { 0% { box-shadow: 0 0 0 0 rgba(21,79,234,.55); } 70%, 100% { box-shadow: 0 0 0 18px rgba(21,79,234,0); } }

@media (prefers-reduced-motion: reduce) {
  .w > span { transform: none; filter: none; opacity: 1; }
  .vimg { transition: none; }
}

/* balão escuro quando passa por cima de uma seção preta */
.topo.rolou.no-escuro .topo-in { background: rgba(28,28,30,.72); border-color: rgba(255,255,255,.1); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.topo.rolou.no-escuro .marca { color: #f5f5f7; }
.topo.rolou.no-escuro .marca svg { color: var(--azul-claro); }
.topo.rolou.no-escuro .menu a { color: #a1a1a6; }
.topo.rolou.no-escuro .menu a:hover, .topo.rolou.no-escuro .menu a.ativo { color: #fff; }
.topo.rolou.no-escuro .menu a::after { background: var(--azul-claro); }
.topo .marca, .topo .menu a { transition: color .4s; }

/* órbita menor no celular: os anéis acompanham o raio dos módulos (34%) */
@media (max-width: 519px) {
  .orb-anel.a1 { inset: 16%; }
  .orb-anel.a2 { inset: 31%; }
  .orb-centro { width: 32%; }
}

/* ícones SVG no lugar de emoji e símbolos de texto */
.fav-ic .ic { width: 17px; height: 17px; }
.url-ic { display: grid; place-items: center; color: var(--muda-2); }
.url-ic .ic { width: 16px; height: 16px; }
.orb-p i .ic { width: 14px; height: 14px; }
.orb-p.dest i .ic { width: 16px; height: 16px; }
.ic-seta { width: .85em; height: .85em; vertical-align: -.08em; margin-left: 1px; transition: transform .25s var(--suave); }
a:hover > .ic-seta { transform: translate(2px, -2px); }
.palco-link { display: inline-flex; align-items: center; gap: 4px; }
.cmp-v { display: grid; place-items: center; }
.ic-check { width: 18px; height: 18px; }

/* celular: no topo só o aparelho, centralizado e maior (a tela do computador não cabe bem) */
@media (max-width: 819px) {
  .hero-palco { height: auto; display: flex; justify-content: center; padding-bottom: 8px; margin-top: 36px; }
  .tela-desk { display: none; }
  .tela-cel { position: relative; right: auto; bottom: auto; width: min(260px, 66vw); margin-bottom: -70px; }
  .palco-link { left: 0; right: 0; bottom: 84px; }
}

/* ── Barra de rolagem fina e discreta ──────────────────── */
/* Firefox; no Chrome a propriedade padrão anularia o ::-webkit-scrollbar abaixo */
@supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: rgba(134,134,145,.5) transparent; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(134,134,145,.45); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; transition: background-color .2s; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(21,79,234,.65); }
::-webkit-scrollbar-thumb:active { background-color: var(--azul); }
::-webkit-scrollbar-corner { background: transparent; }