/* Página de apresentação (pública, em "/"). Escura, com o brilho azul no topo e o produto em destaque. */
body.site { background: #05070c; color: var(--texto); overflow-x: clip; }       /* clip (e não hidden): hidden quebraria o topo que acompanha a rolagem */
.site-brilho { position: absolute; inset: 0 0 auto 0; height: 980px; pointer-events: none; background:
  radial-gradient(1000px 560px at 50% 520px, rgb(52 120 255 / 0.55), transparent 68%),
  radial-gradient(1100px 600px at 50% -140px, rgb(30 70 170 / 0.40), transparent 70%); }
.s-topo { position: sticky; top: 0; z-index: 40; padding: 22px 0 14px; }
.s-topo::before { content: ""; position: absolute; inset: 0 0 -26px 0; z-index: -1; pointer-events: none; background: linear-gradient(#05070c 35%, rgb(5 7 12 / 0)); }
.s-topo-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 56px); padding-right: calc(clamp(20px, 3.5vw, 56px) - 8px); }       /* -8px: a ponta inclinada do botão "Começar" parece mais para dentro, então ela avança um pouco para ficar espelhada ao logo */
.s-marca { display: inline-flex; align-items: center; gap: 10px; justify-self: start; color: var(--texto); text-decoration: none; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.s-marca svg { width: 28px; height: 28px; color: var(--destaque); }
.s-nav { display: flex; gap: 6px; justify-self: center; }
.s-nav a { padding: 8px 14px; border-radius: 999px; color: #c9d1dc; text-decoration: none; font-size: 15px; font-weight: 600; transition: background 0.15s, color 0.15s; }
.s-nav a:hover { color: #fff; background: rgb(255 255 255 / 0.08); }
.s-acoes { display: flex; align-items: center; gap: 6px; justify-self: end; }
.s-comecar { display: inline-flex; align-items: center; height: 42px; margin-left: 8px; padding: 0 28px 0 22px; border-radius: 14px 0 0 14px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); background: #fff; color: #05070c; font-size: 15px; font-weight: 700; text-decoration: none; transition: background 0.15s; }
.s-comecar:hover { background: #e4eaf4; }

main { position: relative; z-index: 1; }
.s-hero { max-width: 1180px; margin: 0 auto; padding: clamp(18px, 2.6vw, 34px) 20px 0; text-align: center; }
.s-hero h1 { margin: 0; font-size: clamp(34px, 5.2vw, 66px); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; background: linear-gradient(180deg, #fff 30%, #9fb0c8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-sub { max-width: 720px; margin: 16px auto 0; color: #c3ccd9; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.55; }
.s-sub strong { color: #fff; }
.s-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.s-botao-claro, .s-botao-vazio { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border-radius: 999px; font-size: 16.5px; font-weight: 700; text-decoration: none; transition: transform 0.12s, background 0.15s; }
.s-botao-claro { background: #fff; color: #05070c; }
.s-botao-claro:hover { background: #e6edf8; transform: translateY(-1px); }
.s-botao-vazio { border: 1px solid rgb(var(--ov) / 0.28); color: #fff; }
.s-botao-vazio:hover { background: rgb(var(--ov) / 0.08); }
.s-nota { margin: 16px 0 0; color: #8f9aab; font-size: 13.5px; }
.s-vitrine { margin: clamp(28px, 4vw, 46px) auto 0; max-width: 1080px; padding: 10px; border: 1px solid rgb(var(--ov) / 0.14); border-radius: 18px; background: rgb(var(--ov) / 0.04); box-shadow: 0 0 120px rgb(52 120 255 / 0.35), 0 40px 90px rgb(0 0 0 / 0.5); }
.s-janela { overflow: hidden; border-radius: 12px; background: #0b0d12; }
.s-janela-barra { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-bottom: 1px solid rgb(var(--ov) / 0.08); background: #10131a; color: #7f8a9b; font-size: 12.5px; }
.s-janela-barra i { width: 10px; height: 10px; border-radius: 50%; background: #2a303b; }
.s-janela-barra span { margin-left: 10px; }
.s-janela img { display: block; width: 100%; height: auto; }


.s-secao { max-width: 1080px; margin: 0 auto; padding: clamp(56px, 8vw, 110px) 20px 0; }
.s-secao h2 { margin: 0; text-align: center; font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.025em; }
.s-secao-sub { max-width: 620px; margin: 14px auto 0; text-align: center; color: #aab4c4; font-size: 17px; line-height: 1.55; }
.s-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.s-grade article { padding: 24px; border: 1px solid rgb(var(--ov) / 0.12); border-radius: 14px; background: linear-gradient(170deg, rgb(var(--ov) / 0.06), rgb(var(--ov) / 0.015)); transition: border-color 0.15s, transform 0.15s; }
.s-grade article:hover { border-color: rgb(91 155 255 / 0.5); transform: translateY(-2px); }
.s-grade h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.s-grade p { margin: 0; color: #aab4c4; font-size: 15px; line-height: 1.55; }
.s-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 40px 0 0; padding: 0; list-style: none; }
.s-passos li { padding: 24px; border: 1px solid rgb(var(--ov) / 0.12); border-radius: 14px; background: rgb(var(--ov) / 0.03); }
.s-passos b { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: #0a62ff; color: #fff; font-size: 15px; }
.s-passos h3 { margin: 0 0 6px; font-size: 18px; }
.s-passos p { margin: 0; color: #aab4c4; font-size: 15px; line-height: 1.55; }

.s-duvidas { max-width: 760px; }
.s-duvidas details { margin-top: 12px; border: 1px solid rgb(var(--ov) / 0.12); border-radius: 12px; background: rgb(var(--ov) / 0.03); }
.s-duvidas summary { padding: 16px 20px; font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; }
.s-duvidas summary::-webkit-details-marker { display: none; }
.s-duvidas summary::after { content: "+"; float: right; color: #8f9aab; font-size: 20px; line-height: 1; }
.s-duvidas details[open] summary::after { content: "−"; }
.s-duvidas details p { margin: 0; padding: 0 20px 18px; color: #aab4c4; font-size: 15px; line-height: 1.6; }
.s-final { margin: clamp(60px, 9vw, 120px) auto 0; padding: 0 20px; text-align: center; }
.s-final h2 { margin: 0 0 26px; font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.025em; }
.s-rodape { margin-top: clamp(60px, 9vw, 120px); padding: 28px clamp(16px, 5vw, 64px) 40px; border-top: 1px solid rgb(var(--ov) / 0.08); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; color: #8f9aab; font-size: 14px; }
.s-rodape nav { display: flex; gap: 20px; }
.s-rodape a { color: #aab4c4; text-decoration: none; }
.s-rodape a:hover { color: #fff; }
.s-rodape p { flex-basis: 100%; margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; }

@media (max-width: 860px) {
  .s-nav { display: none; }
  .s-grade, .s-passos { grid-template-columns: 1fr; }
}

.idioma-solto .idioma-op::after, .idioma-solto .idioma-op::before { display: none !important; }

/* tema claro na página de apresentação */
html[data-aparencia="claro"] body.site { background: #dde3ed; color: #0f1b2d; }
html[data-aparencia="claro"] .site-brilho { background: radial-gradient(1000px 520px at 50% 480px, rgb(80 130 255 / 0.28), transparent 68%), radial-gradient(1100px 600px at 50% -140px, rgb(120 160 255 / 0.30), transparent 70%); }
html[data-aparencia="claro"] .s-topo::before { background: linear-gradient(#dde3ed 35%, rgb(221 227 237 / 0)); }
html[data-aparencia="claro"] .s-nav a { color: #44546b; }
html[data-aparencia="claro"] .s-nav a:hover { color: #0f1b2d; background: rgb(15 27 45 / 0.07); }
html[data-aparencia="claro"] .seletor-bt { color: #0f1b2d; }
html[data-aparencia="claro"] .seletor-bt:hover, html[data-aparencia="claro"] .seletor-bt[aria-expanded="true"] { background: rgb(15 27 45 / 0.08); }
html[data-aparencia="claro"] .s-comecar { background: #0f1b2d; color: #fff; }
html[data-aparencia="claro"] .s-comecar:hover { background: #1d2c45; }
html[data-aparencia="claro"] .s-hero h1 { background: linear-gradient(180deg, #0f1b2d 30%, #4a5d7c); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-aparencia="claro"] .s-sub, html[data-aparencia="claro"] .s-secao-sub, html[data-aparencia="claro"] .s-grade p, html[data-aparencia="claro"] .s-passos p, html[data-aparencia="claro"] .s-faixa span, html[data-aparencia="claro"] .s-duvidas details p, html[data-aparencia="claro"] .s-nota { color: #4a5d7c; }
html[data-aparencia="claro"] .s-sub strong { color: #0f1b2d; }
html[data-aparencia="claro"] .s-botao-claro { background: #0f1b2d; color: #fff; }
html[data-aparencia="claro"] .s-botao-vazio { border-color: #b7c2d6; color: #0f1b2d; }
html[data-aparencia="claro"] .s-grade article, html[data-aparencia="claro"] .s-passos li, html[data-aparencia="claro"] .s-plano, html[data-aparencia="claro"] .s-duvidas details, html[data-aparencia="claro"] .s-vitrine { background: #e9edf4; border-color: #c2cbdb; }
html[data-aparencia="claro"] .s-rodape, html[data-aparencia="claro"] .s-rodape a { color: #5a6b86; }
html[data-aparencia="claro"] .s-janela { background: #0b0d12; }

html { scroll-padding-top: 84px; }
.s-secao, .s-final { scroll-margin-top: 84px; }

/* rodapé: mesma largura e margens do topo; colunas de links, linha de direitos e avisos legais */
.rd { position: relative; z-index: 1; margin-top: clamp(70px, 9vw, 130px); padding: 56px 0 56px; border-top: 1px solid rgb(var(--ov) / 0.08); }
.rd-in { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 56px); padding-right: calc(clamp(20px, 3.5vw, 56px) - 8px); }
.rd-colunas { display: grid; grid-template-columns: 1.1fr repeat(4, minmax(0, 1fr)); gap: 36px 28px; }
.rd-marca { display: inline-flex; align-items: flex-start; gap: 10px; align-self: start; color: var(--texto); text-decoration: none; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.rd-marca svg { width: 28px; height: 28px; color: var(--destaque); }
.rd-col { display: flex; flex-direction: column; gap: 14px; }
.rd-col h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.rd-col a { color: #98a4b6; text-decoration: none; font-size: 15.5px; transition: color 0.15s; }
.rd-col a:hover { color: #fff; }
.rd-meio { display: flex; justify-content: flex-end; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgb(var(--ov) / 0.08); color: #c9d1dc; font-size: 14px; }
.rd-avisos { margin-top: 30px; display: grid; gap: 14px; }
.rd-avisos p { margin: 0; color: #7f8b9d; font-size: 12.5px; line-height: 1.65; }
@media (max-width: 980px) { .rd-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-marca { grid-column: 1 / -1; } .rd-meio { justify-content: flex-start; } }
html[data-aparencia="claro"] .rd { border-top-color: #dbe2ef; }
html[data-aparencia="claro"] .rd-col h3 { color: #0f1b2d; }
html[data-aparencia="claro"] .rd-col a { color: #5a6b86; }
html[data-aparencia="claro"] .rd-col a:hover { color: #0f1b2d; }
html[data-aparencia="claro"] .rd-meio { color: #44546b; border-top-color: #dbe2ef; }
html[data-aparencia="claro"] .rd-avisos p { color: #6b7a93; }

/* ---------- demonstração animada do hero ---------- */
.dm { background: #0a0c11; transition: opacity 0.2s linear; }
.dm-topo { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid rgb(255 255 255 / 0.07); background: #0d1017; font-size: 12.5px; font-weight: 700; color: #dfe6f2; }
.dm-logo { width: 20px; height: 20px; color: #5b9bff; }
.dm-tf { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding-left: 12px; border-left: 1px solid rgb(255 255 255 / 0.12); }
.dm-tf i, .dm-bt i { width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.7; }
.dm-bt { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 7px; background: rgb(255 255 255 / 0.03); font-weight: 600; }
.dm-bt b { width: 7px; height: 7px; border-radius: 50%; background: #2fd6a5; }
.dm-nome { margin-left: auto; color: #7f8ba0; font-size: 11.5px; letter-spacing: 0.04em; }
.dm-corpo { position: relative; }
#dm-cv { display: block; width: 100%; aspect-ratio: 1000 / 470; }
.dm-cartao { position: absolute; top: 14px; left: 16px; min-width: 230px; padding: 12px 14px; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 12px; background: rgb(12 16 26 / 0.78); backdrop-filter: blur(8px); }
.dm-estado { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #aab6cc; }
.dm-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6c7a94; }
.dm-estado[data-fase="aberta"]::before { background: #ffcf5c; animation: dm-pisca 0.9s ease-in-out infinite; }
.dm-estado[data-fase="ok"]::before { background: #2fd6a5; }
.dm-estado[data-fase="ok"] { color: #7fe9c8; }
@keyframes dm-pisca { 50% { opacity: 0.35; } }
.dm-linhas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 10px; }
.dm-linhas span { display: block; color: #7f8ba0; font-size: 11px; }
.dm-linhas b { font-size: 16px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.dm-linhas b.alta { color: #2fd6a5; }
.dm-toast { position: absolute; right: 78px; bottom: 44px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid rgb(47 214 165 / 0.5); border-radius: 12px; background: rgb(8 28 24 / 0.92); backdrop-filter: blur(8px); box-shadow: 0 10px 40px rgb(47 214 165 / 0.2); opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.dm-toast.vis { opacity: 1; transform: none; }
.dm-toast i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2fd6a5; color: #05110d; font-style: normal; font-weight: 900; }
.dm-toast b { display: block; font-size: 13.5px; color: #fff; }
.dm-toast span { font-size: 12.5px; color: #8fe9cd; }


/* demo: barra de replay e painel de baixo iguais aos do app */
.dm-replay { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid rgb(255 255 255 / 0.08); background: #0d1017; }
.dm-rep-esq { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dm-data { color: #e7ecf5; font-size: 14px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dm-estrat { display: inline-flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px 0 14px; border: 1px solid rgb(47 214 165 / 0.4); border-radius: 10px; background: rgb(255 255 255 / 0.04); color: #e7ecf5; }
.dm-ponto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2fd6a5; box-shadow: 0 0 0 4px rgb(47 214 165 / 0.22); }
.dm-estrat-t { display: flex; flex-direction: column; line-height: 1.2; }
.dm-estrat-t small { color: #6b7a99; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.dm-estrat-t strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.dm-estrat-e { padding: 3px 9px; border-radius: 6px; background: rgb(255 255 255 / 0.08); color: #aab6cc; font-size: 11.5px; font-weight: 700; }
.dm-i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dm-ordem { display: flex; align-items: center; gap: 8px; }
.dm-vender, .dm-comprar { display: inline-grid; place-items: center; height: 38px; min-width: 108px; padding: 0 18px; border-radius: 8px; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; }
.dm-vender { background: #e0405a; color: #fff; }
.dm-comprar { background: #1fb98d; color: #04140f; }
.dm-comprar.pisca { animation: dm-comprar 0.9s ease-out 1; }
@keyframes dm-comprar { 0% { box-shadow: 0 0 0 0 rgb(47 214 165 / 0.8); transform: scale(1); } 40% { transform: scale(1.08); } 100% { box-shadow: 0 0 0 18px rgb(47 214 165 / 0); transform: scale(1); } }
.dm-lote { display: flex; align-items: center; height: 38px; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 8px; background: rgb(255 255 255 / 0.04); overflow: hidden; }
.dm-lote i { display: grid; place-items: center; width: 30px; height: 100%; color: #b4c0d4; }
.dm-lote b { width: 66px; text-align: center; font-size: 14px; font-weight: 600; color: #e7ecf5; }
.dm-rep-dir { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.dm-ib { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: #b4c0d4; cursor: pointer; }
.dm-ib:hover { background: rgb(255 255 255 / 0.09); color: #fff; }
.dm-ib .dm-i { width: 20px; height: 20px; }
.dm-play .dm-i { width: 22px; height: 22px; }
.dm-play[data-estado="pausado"] .ic-pausa, .dm-play[data-estado="tocando"] .ic-play { display: none; }
.dm-vel-r { min-width: 26px; color: #8b97ab; font-size: 12.5px; font-weight: 600; text-align: right; }
.dm-rep-dir input[type="range"] { width: 110px; accent-color: #5b9bff; cursor: pointer; }
.dm-passo-sel { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 8px; background: rgb(255 255 255 / 0.04); color: #e7ecf5; font-size: 13.5px; }
.dm-trades { display: flex; align-items: center; gap: 18px; height: 46px; padding: 0 16px; border-top: 1px solid rgb(255 255 255 / 0.08); background: #0b0e14; font-size: 13px; color: #8b97ab; font-weight: 600; }
.dm-aba { padding: 14px 4px; }
.dm-aba.on { color: #fff; font-weight: 800; box-shadow: inset 0 -2px #5b9bff; }
.dm-aba em { margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: rgb(255 255 255 / 0.08); font-style: normal; font-size: 11px; }
.dm-stats { margin-left: auto; display: inline-flex; gap: 22px; }
.dm-stats b { margin-left: 4px; color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.dm-stats b.alta { color: #2fd6a5; }
@media (max-width: 900px) { .dm-replay { grid-template-columns: 1fr; gap: 8px; } .dm-rep-esq, .dm-rep-dir, .dm-ordem { justify-content: center; } .dm-data, .dm-passo-sel, .dm-rep-dir input[type="range"], .dm-margem { display: none; } .dm-stats { gap: 12px; } .dm-aba:nth-child(n+2) { display: none; } }
.dm { container-type: inline-size; }
.dm-trades, .dm-stats span, .dm-aba { white-space: nowrap; }
.dm-estrat-t strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 1100px) {
  .dm-replay { grid-template-columns: auto 1fr; row-gap: 8px; }
  .dm-rep-esq { grid-column: 1 / -1; }
  .dm-data, .dm-margem, .dm-passo-sel { display: none; }
  .dm-ordem { justify-self: start; }
  .dm-rep-dir input[type="range"] { width: 70px; }
  .dm-stats { gap: 16px; }
}


/* barra de replay: sempre numa linha, como no app (as peças encolhem em vez de quebrar) */
.dm-replay { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.dm-rep-esq { flex: 0 1 auto; gap: 0; }
.dm-data { display: none; }
.dm-ordem { flex: none; margin: 0 auto; }
.dm-rep-dir { flex: 0 1 auto; gap: 2px; }
.dm-estrat { height: 40px; gap: 9px; padding: 0 8px 0 11px; }
.dm-estrat-e, .dm-estrat .dm-i { display: none; }
.dm-vender, .dm-comprar { min-width: 84px; padding: 0 12px; font-size: 13px; }
.dm-lote b { width: 44px; }
.dm-lote i { width: 24px; }
.dm-ib { width: 28px; }
.dm-passo-sel { display: none; }
.dm-rep-dir input[type="range"] { width: 64px; }
@container (max-width: 1100px) { .dm-replay { grid-template-columns: none; } .dm-rep-esq { grid-column: auto; } .dm-ordem { justify-self: auto; } }

/* a "mão" da demonstração apertando mais devagar / mais rápido */
@keyframes dm-pisca-b { 0% { box-shadow: 0 0 0 0 rgb(91 155 255 / 0.9); background: rgb(91 155 255 / 0.45); color: #fff; } 100% { box-shadow: 0 0 0 14px rgb(91 155 255 / 0); background: none; } }
.dm-ib.pisca-b { animation: dm-pisca-b 1.1s ease-out 2; }

/* o mouse da demonstração: anda até o controle, aperta e some */
.dm { position: relative; }
.dm-mouse { position: absolute; left: 0; top: 0; z-index: 8; width: 40px; height: 40px; margin: -3px 0 0 -5px; pointer-events: none; opacity: 0; transform: translate(0, 0); transition: transform 1s cubic-bezier(0.45, 0.05, 0.2, 1), opacity 0.4s; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 0.55)); }
.dm-mouse.vis { opacity: 1; }
.dm-mouse svg { display: block; width: 100%; height: 100%; transform-origin: 5px 3px; transition: transform 0.12s; }
.dm-mouse.clica svg { transform: scale(0.8); }
.dm-b-ou { display: none; }
.dm-trades b.baixa, .dm-stats b.baixa { color: #ff6a86; }

/* destaque dos controles do replay no começo da demonstração */
.dm { overflow: clip; }
.dm-foco { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.dm-foco.vis { opacity: 1; }
.dm-foco-aro { position: absolute; border: 2px solid #6aa6ff; border-radius: 14px; box-shadow: 0 0 0 4000px rgb(3 6 12 / 0.5), 0 0 26px rgb(91 155 255 / 0.55), inset 0 0 18px rgb(91 155 255 / 0.22); animation: dm-aro 1.9s ease-in-out infinite; }
@keyframes dm-aro { 50% { box-shadow: 0 0 0 4000px rgb(3 6 12 / 0.5), 0 0 40px rgb(91 155 255 / 0.8), inset 0 0 22px rgb(91 155 255 / 0.3); border-color: #9cc4ff; } }
.dm-foco-balao { position: absolute; display: flex; align-items: center; gap: 12px; max-width: min(340px, 86%); padding: 13px 16px; border: 1px solid rgb(130 170 255 / 0.55); border-radius: 14px; background: linear-gradient(180deg, #1a2f57, #13223f); color: #fff; box-shadow: 0 16px 40px rgb(0 0 0 / 0.55), 0 0 30px rgb(80 130 255 / 0.3); transform: translateY(46px); opacity: 0; transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s, opacity 0.8s ease 0.35s; }
.dm-foco.vis .dm-foco-balao { transform: none; opacity: 1; }
.dm-foco-balao::after { content: ""; position: absolute; right: 38px; bottom: -8px; width: 14px; height: 14px; border-right: 1px solid rgb(130 170 255 / 0.55); border-bottom: 1px solid rgb(130 170 255 / 0.55); background: #13223f; transform: rotate(45deg); }
.dm-foco-balao svg { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: rgb(91 155 255 / 0.25); fill: none; stroke: #cfe0ff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); animation: dm-seta 1.4s ease-in-out infinite; }
@keyframes dm-seta { 50% { transform: rotate(180deg) translateY(-4px); } }
.dm-foco-balao b { display: block; font-size: 14.5px; font-weight: 700; }
.dm-foco-balao span { display: block; margin-top: 2px; color: #b7c8e6; font-size: 12.5px; line-height: 1.35; }
/* clique de verdade: o botão afunda e o mouse faz uma onda, sem brilho */
.dm-ib.press { background: rgb(255 255 255 / 0.2); transform: scale(0.9); transition: transform 0.08s, background 0.08s; }
.dm-mouse::before { content: ""; position: absolute; left: 5px; top: 3px; width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 2px solid rgb(255 255 255 / 0.85); border-radius: 50%; opacity: 0; }
.dm-mouse.clica::before { animation: dm-onda 0.5s ease-out; }
@keyframes dm-onda { from { opacity: 0.9; transform: scale(0.6); } to { opacity: 0; transform: scale(4.2); } }
@media (prefers-reduced-motion: reduce) { .dm-foco-aro, .dm-foco-balao svg { animation: none; } }

/* chip da estratégia: ícone de raio, nome e estado, como no app */
.dm-estrat { height: 42px; gap: 10px; padding: 0 12px 0 8px; border-color: rgb(47 214 165 / 0.38); background: linear-gradient(180deg, rgb(47 214 165 / 0.07), rgb(255 255 255 / 0.03)); }
.dm-raio { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: rgb(47 214 165 / 0.16); color: #2fd6a5; }
.dm-raio svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dm-estrat-t strong { max-width: 128px; font-size: 13px; }
.dm-estrat .dm-estrat-e { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; color: #8fe9cd; font-size: 11.5px; font-weight: 700; }
.dm-estrat-e i { width: 7px; height: 7px; border-radius: 50%; background: #2fd6a5; box-shadow: 0 0 0 3px rgb(47 214 165 / 0.2); }
/* destaque dos controles: só um aro suave, sem escurecer a tela */
.dm-foco-aro { border-color: rgb(120 175 255 / 0.85); box-shadow: 0 0 22px rgb(91 155 255 / 0.5), inset 0 0 14px rgb(91 155 255 / 0.18); animation: dm-aro2 1.8s ease-in-out infinite; }
@keyframes dm-aro2 { 50% { box-shadow: 0 0 34px rgb(91 155 255 / 0.75), inset 0 0 18px rgb(91 155 255 / 0.28); } }

/* a demonstração e os destaques: ao rolar, ela vai para a esquerda e o painel aparece à direita (a troca é por estado, não acompanha o dedo) */
.s-historia { position: relative; margin-top: clamp(28px, 4vw, 46px); }
.s-estagio { position: sticky; top: 92px; max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 56px); }
.s-demo-col { width: 100%; max-width: 1080px; margin: 0 auto; transform-origin: left top; }
.s-demo-col .s-vitrine { margin: 0; max-width: none; }
/* telas estreitas: tudo em coluna, sem fixar nada */
.s-historia.plano .s-estagio { position: static; height: auto !important; }
.s-historia.plano .s-demo-col { transform: none !important; }
/* marca */
.s-marca span, .entrar-marca span { font-weight: 800; letter-spacing: -0.045em; background: linear-gradient(100deg, #ffffff 15%, #8fb8ff 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-marca svg, .entrar-marca svg { color: #5b9bff; filter: drop-shadow(0 0 8px rgb(91 155 255 / 0.55)); }
html[data-aparencia="claro"] .s-marca span, html[data-aparencia="claro"] .entrar-marca span { background: linear-gradient(100deg, #0f1b2d 20%, #2563eb 95%); -webkit-background-clip: text; background-clip: text; }
html[data-aparencia="claro"] .s-marca svg, html[data-aparencia="claro"] .entrar-marca svg { color: #2563eb; filter: none; }


/* ---- cabeçalho reformulado: etiqueta, título com destaque colorido, botões com brilho, fundo em grade e vitrine com borda em degradê ---- */
.site-brilho { height: 1100px; background:
  radial-gradient(900px 480px at 50% 600px, rgb(52 120 255 / 0.45), transparent 68%),
  radial-gradient(700px 420px at 14% 120px, rgb(123 108 255 / 0.30), transparent 70%),
  radial-gradient(700px 420px at 88% 160px, rgb(30 190 220 / 0.20), transparent 70%); }
.site-brilho::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%); }
.s-hero { padding-top: clamp(26px, 4vw, 54px); }
.s-hero h1 em { font-style: normal; background: linear-gradient(95deg, #6cb2ff 0%, #8f86ff 50%, #3de0c0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-botao-claro { position: relative; background: linear-gradient(135deg, #4f9dff, #3d6bff 55%, #7b5cff); color: #fff; box-shadow: 0 14px 34px -12px rgb(79 120 255 / 0.9), inset 0 1px 0 rgb(255 255 255 / 0.3); }
.s-botao-claro:hover { background: linear-gradient(135deg, #63a8ff, #4d7aff 55%, #8c6dff); transform: translateY(-2px); }
.s-botao-vazio { background: rgb(var(--ov) / 0.05); backdrop-filter: blur(6px); }
.s-provas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 20px 0 0; padding: 0; list-style: none; color: #9fabbd; font-size: 13.5px; }
.s-provas li { display: inline-flex; align-items: center; gap: 7px; }
.s-provas svg { width: 15px; height: 15px; padding: 2px; border-radius: 50%; background: rgb(47 214 165 / 0.16); fill: none; stroke: #2fd6a5; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.s-vitrine { position: relative; border: 1px solid transparent; background: linear-gradient(#0b0e15, #0b0e15) padding-box, linear-gradient(140deg, rgb(120 170 255 / 0.65), rgb(123 108 255 / 0.25) 40%, rgb(61 224 192 / 0.4)) border-box; box-shadow: 0 0 140px rgb(70 110 255 / 0.32), 0 50px 100px rgb(0 0 0 / 0.55); }
.s-flutua { position: absolute; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 11px 16px 11px 12px; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 14px; background: rgb(18 22 32 / 0.78); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.7); animation: s-boia 6s ease-in-out infinite; }
.s-flutua small { display: block; color: #9fabbd; font-size: 11.5px; }
.s-flutua b { display: block; color: #fff; font-size: 15px; font-weight: 800; }
.s-flutua-a { right: -34px; top: 74px; }
.s-flutua-a b { color: #2fd6a5; font-size: 17px; }
.s-flutua-b { left: -34px; bottom: 96px; animation-delay: -3s; }
.s-flutua-b svg { width: 74px; height: 26px; }
.s-fl-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(140deg, #1fb87a, #2ecf8a); }
.s-fl-ic svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes s-boia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .s-flutua { animation: none; } }
html[data-aparencia="claro"] .site-brilho::after { background-image: linear-gradient(rgb(15 27 45 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(15 27 45 / 0.06) 1px, transparent 1px); }
html[data-aparencia="claro"] .s-hero h1 em { background: linear-gradient(95deg, #2f6fe0 0%, #6a55e0 55%, #0fa58a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-aparencia="claro"] .s-botao-claro { color: #fff; }
html[data-aparencia="claro"] .s-botao-vazio { color: #0f1b2d; border-color: #c9d3e6; background: #e9edf4; }
html[data-aparencia="claro"] .s-provas { color: #4a5d7c; }
html[data-aparencia="claro"] .s-vitrine { background: linear-gradient(#e9edf4, #e9edf4) padding-box, linear-gradient(140deg, rgb(70 120 235 / 0.6), rgb(123 108 255 / 0.25) 40%, rgb(40 190 160 / 0.4)) border-box; }

/* celular e tablet (sem a barra de seções): ☰ + logo à esquerda, "Começar" à direita; seções, conta, idioma e tema vão para a gaveta */
.s-menu-bt, .s-gaveta { display: none; }
@media (max-width: 860px) {
  .s-topo-in { grid-template-columns: auto 1fr auto; gap: 10px; }
  .s-acoes .seletor { display: none; }
  .s-menu-bt { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; margin-left: -8px; padding: 0 9px; border: 0; border-radius: 10px; background: none; color: #fff; cursor: pointer; }
  .s-menu-bt i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.22s, opacity 0.18s; }
  .s-menu-bt[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .s-menu-bt[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .s-menu-bt[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .s-menu-bt:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

  /* gaveta: tela inteira atrás da barra do topo (z-index -1 dentro do topo, acima só do degradê dele) */
  .s-gaveta:not([hidden]) { display: block; position: fixed; inset: 0; z-index: -1; overflow-y: auto; padding-top: 66px; background: #05070c; animation: s-gav-entra 0.24s ease-out; }
  .s-gav-in { display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; padding: 18px 20px 28px; }
  .s-gav-rot { margin: 0 0 6px; color: #7d8aa0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .s-gav-item { position: relative; display: grid; gap: 3px; padding: 15px 28px 15px 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); color: #fff; text-decoration: none; }
  .s-gav-item::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #5d6b82; border-right: 2px solid #5d6b82; transform: translateY(-50%) rotate(45deg); }
  .s-gav-item b { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
  .s-gav-item span { color: #95a1b5; font-size: 13.5px; line-height: 1.4; }
  .s-gav-item:active { background: rgb(255 255 255 / 0.04); }
  .s-gav-conta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
  .s-gav-conta a { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 14px; font-size: 15px; font-weight: 700; text-decoration: none; }
  .s-gav-entrar { border: 1px solid rgb(255 255 255 / 0.18); color: #fff; }
  .s-gav-criar { background: linear-gradient(100deg, #3d7bff, #6a5cff); color: #fff; }
  .s-gav-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / 0.08); }
  .s-gav-idioma { display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / 0.07); }
  .s-gav-idioma button { min-width: 46px; height: 32px; border: 0; border-radius: 999px; background: none; color: #95a1b5; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
  .s-gav-idioma button[aria-pressed="true"] { background: #fff; color: #05070c; }
  .s-gav-tema { width: auto; padding: 6px 0; border: 0; background: none; color: #c9d1dc; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
  html.s-menu-aberto { overflow: hidden; }
  html[data-aparencia="claro"] .s-menu-bt { color: #0f1b2d; }
  html[data-aparencia="claro"] .s-gaveta { background: #dde3ed; }
  html[data-aparencia="claro"] .s-gav-item { color: #0f1b2d; border-bottom-color: rgb(15 27 45 / 0.1); }
  html[data-aparencia="claro"] .s-gav-item span, html[data-aparencia="claro"] .s-gav-rot { color: #4a5d7c; }
  html[data-aparencia="claro"] .s-gav-entrar { color: #0f1b2d; border-color: rgb(15 27 45 / 0.2); }
  html[data-aparencia="claro"] .s-gav-pe { border-top-color: rgb(15 27 45 / 0.1); }
  html[data-aparencia="claro"] .s-gav-idioma { background: rgb(15 27 45 / 0.07); }
  html[data-aparencia="claro"] .s-gav-idioma button[aria-pressed="true"] { background: #0f1b2d; color: #fff; }
  html[data-aparencia="claro"] .s-gav-tema { color: #0f1b2d; }
}
@keyframes s-gav-entra { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .s-gaveta:not([hidden]) { animation: none; } .s-menu-bt i { transition: none; } }
@media (max-width: 520px) {
  .s-topo { padding: 14px 0 10px; }
  .s-topo-in { gap: 8px; padding: 0 12px 0 16px; }
  .s-marca { gap: 8px; font-size: 19px; }
  .s-marca svg { width: 25px; height: 25px; }
  .s-comecar { height: 38px; padding: 0 20px 0 14px; font-size: 14px; }
  .s-gaveta:not([hidden]) { padding-top: 62px; }
}

/* ---------- página inicial reformulada: hero, Pip, recursos em linhas, laboratório, comparativo ---------- */
.s-hero h1 em { font-style: normal; background: linear-gradient(100deg, #8fc2ff, #a99bff 60%, #d49bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-final-sub { margin: -12px 0 26px; color: #aab4c4; font-size: 17px; }



.lb { text-align: center; }
.lb-rot { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border: 1px solid rgb(91 155 255 / 0.5); border-radius: 999px; color: #9cc4ff; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.lb h2 { max-width: 820px; margin-left: auto; margin-right: auto; }
.lb { position: relative; max-width: none; padding: 0; text-align: center; }
.lb-estagio { max-width: 1100px; margin: 0 auto; padding: 56px clamp(20px, 4vw, 56px) 64px; }
.lb-estagio .s-secao-sub { max-width: 700px; }



/* ---------- a tela se desconstrói ao rolar (--d), ficam só as velas (--v) e o chat do Pip entra (--chat); definidos por historia.js ---------- */
.s-historia { --d: 0; --v: 0; --chat: 0; }
.s-historia:not(.plano) .s-janela-barra, .s-historia:not(.plano) .dm-topo { opacity: calc(1 - var(--d)); transform: translateY(calc(var(--d) * -44px)); filter: blur(calc(var(--d) * 8px)); }
.s-historia:not(.plano) .dm-replay, .s-historia:not(.plano) .dm-trades { opacity: calc(1 - var(--d)); transform: translateY(calc(var(--d) * 44px)); filter: blur(calc(var(--d) * 8px)); }
.s-historia:not(.plano) .s-vitrine { border-color: rgb(var(--ov) / calc(0.14 * (1 - var(--d)))); background: rgb(var(--ov) / calc(0.04 * (1 - var(--d)))); box-shadow: 0 0 120px rgb(52 120 255 / calc(0.22 * (1 - var(--d)))); }
.s-historia:not(.plano) .s-janela, .s-historia:not(.plano) .dm { background: color-mix(in srgb, #0b0d12 calc((1 - var(--d)) * 100%), transparent); }
.s-historia:not(.plano) .dm-corpo { border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / calc(0.12 * var(--d) * (1 - var(--v)))), 0 40px 100px -30px rgb(40 90 255 / calc(0.5 * var(--d) * (1 - var(--v)))); }
.s-historia:not(.plano) .s-flutua { opacity: calc(1 - var(--d) * 1.6); }
.s-vend-titulo, .s-vend-cards { display: none; }
.s-historia:not(.plano) .s-vend-titulo { position: absolute; left: clamp(20px, 3.5vw, 56px); bottom: 0; z-index: 7; display: flex; flex-direction: column; align-items: flex-start; width: min(46%, 520px); opacity: clamp(0, calc(var(--chat) * 6), 1); transform: translateY(calc((1 - clamp(0, calc(var(--chat) * 6), 1)) * 24px)); }
.s-vend-rot { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 5px 12px; border: 1px solid rgb(150 140 255 / 0.45); border-radius: 999px; background: rgb(110 100 255 / 0.14); color: #dcdfff; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.s-vend-rot svg { width: 14px; height: 14px; fill: #b6a9ff; }
.s-vend-titulo h2 { margin: 0; font-size: clamp(28px, 3.1vw, 44px); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; background: linear-gradient(100deg, #fff 35%, #b9c8ff 75%, #9fe3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-vend-titulo p { margin: 12px 0 0; color: #cdd6e8; font-size: clamp(14px, 1.2vw, 16.5px); line-height: 1.5; }
@media (max-height: 760px) { .s-vend-titulo p { display: none; } }
.s-historia:not(.plano) .s-vend-cards { position: absolute; inset: 0; z-index: 7; display: block; pointer-events: none; }
.s-vc { --t: 0.1; --s: 1; --b: 0px; --o: 1; --dz: 26px; --par: 40px; position: absolute; display: grid; gap: 3px; width: 218px; padding: 14px 16px 15px; border: 1px solid transparent; border-radius: 18px; background: linear-gradient(160deg, rgb(26 30 52 / 0.8), rgb(10 12 22 / 0.72)) padding-box, linear-gradient(150deg, rgb(170 160 255 / 0.6), rgb(255 255 255 / 0.06) 50%, rgb(90 200 255 / 0.35)) border-box; -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6); box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.8), 0 0 60px -14px rgb(130 120 255 / 0.5); scale: var(--s); filter: blur(calc(var(--b) + 10px)); opacity: 0; transform: translateY(calc((0.5 - var(--chat)) * var(--par))); transition: opacity 0.8s ease var(--atraso, 0s), filter 0.8s ease var(--atraso, 0s); animation: vc-flutua var(--dur, 6s) ease-in-out infinite; }
.s-historia.cards-ja .s-vc { opacity: var(--o); filter: blur(var(--b)); }
.s-vc-perto { --s: 1.08; --par: 70px; z-index: 3; }
.s-vc-medio { --s: 0.88; --b: 0.5px; --o: 0.88; --par: 36px; z-index: 2; }
.s-vc-longe { --s: 0.72; --b: 1.8px; --o: 0.62; --par: 14px; z-index: 1; }
.s-vc-pip { --t: 0.02; --s: 1; --par: 30px; z-index: 4; left: calc(50% + 24px); top: calc(50% - 90px); width: min(440px, calc(50% - 40px)); padding: 22px 24px 24px; gap: 14px; border-radius: 24px; opacity: clamp(0, calc((var(--chat) - var(--t, 0)) * 6), 1); filter: none; transform: translateY(calc((1 - clamp(0, calc((var(--chat) - var(--t, 0)) * 6), 1)) * 26px + (0.5 - var(--chat)) * var(--par))); transition: none; box-shadow: 0 40px 80px -24px rgb(0 0 0 / 0.85), 0 0 100px -10px rgb(130 120 255 / 0.65); --dur: 7s; }
.s-vc-risco { --atraso: 0.54s; left: 1%; top: 6%; --dur: 7.5s; }
.s-vc-horario { --atraso: 0.3s; left: 37%; top: 2%; --dur: 6.5s; animation-delay: -2s; }
.s-vc-nota { --atraso: 0.05s; right: 0; top: 4%; width: 300px; grid-template-columns: 64px 1fr; align-items: center; column-gap: 14px; --dur: 5.5s; }
.s-vc-fator { --atraso: 0.66s; right: 2%; top: 47%; --dur: 8s; animation-delay: -3s; }
.s-vc-queda { --atraso: 0.42s; left: 55%; bottom: 0; --dur: 6s; animation-delay: -4s; }
.s-vc-alerta { --atraso: 0.18s; right: 3%; bottom: 6%; width: 270px; --dur: 6.8s; animation-delay: -1s; background: linear-gradient(160deg, rgb(52 20 34 / 0.82), rgb(18 10 18 / 0.74)) padding-box, linear-gradient(150deg, rgb(255 120 140 / 0.7), rgb(255 255 255 / 0.05) 50%, rgb(255 160 120 / 0.35)) border-box; box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.8), 0 0 60px -14px rgb(255 100 130 / 0.45); }
@keyframes vc-flutua { 50% { translate: 0 -8px; } }
.s-vc small { color: #9aa6c3; font-size: 11.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.s-vc b { font-size: 17px; font-weight: 800; line-height: 1.25; }
.s-vc em { color: #b8c3d9; font-size: 12.5px; font-style: normal; line-height: 1.4; }
.s-vc-alerta small { color: #ff9db0; }
.s-vc-nota svg { grid-row: 1; grid-column: 1; width: 64px; height: 64px; transform: rotate(-90deg); fill: none; stroke-width: 6; }
.s-vc-nota circle { stroke: rgb(255 255 255 / 0.1); }
.s-historia.cards-ja .s-vc-nota .arco { stroke-dasharray: 128 200; }
.s-vc-nota .arco { stroke: #4ee0c0; stroke-linecap: round; stroke-dasharray: 0 200; transition: stroke-dasharray 1.3s ease 0.4s; filter: drop-shadow(0 0 6px rgb(78 224 192 / 0.7)); }
.s-vc-nota strong { grid-row: 1; grid-column: 1; align-self: center; justify-self: center; font-size: 20px; font-weight: 800; }
.s-vc-nota > span { grid-row: 1; grid-column: 2; display: grid; gap: 3px; }
.s-vc-pip-topo { display: flex; align-items: center; gap: 10px; }
.s-vc-pip-topo i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: linear-gradient(145deg, #7a9bff, #a07bff); box-shadow: 0 0 22px rgb(140 120 255 / 0.7); }
.s-vc-pip-topo svg { width: 17px; height: 17px; fill: #fff; }
.s-vc-pip-topo b { font-size: 16px; }
.s-vc-pip-topo small { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.s-vc-pip-topo em { width: 7px; height: 7px; border-radius: 50%; background: #4ee0c0; box-shadow: 0 0 10px #4ee0c0; animation: chat-vivo 1.4s ease-in-out infinite; }
@keyframes chat-vivo { 50% { opacity: 0.35; } }
.s-vc-pip p { margin: 0; color: #f1f3fb; font-size: 17.5px; line-height: 1.5; }
.s-vc-pip > span { justify-self: start; padding: 9px 18px; border-radius: 999px; background: linear-gradient(135deg, #4a6dff, #7a5bff); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 10px 24px -10px rgb(90 100 255 / 0.8); }
@media (prefers-reduced-motion: reduce) { .s-vc { animation: none; } }

/* cartões flutuantes em vidro fosco */
.s-flutua { padding: 14px 20px 14px 14px; gap: 14px; border: 1px solid rgb(255 255 255 / 0.28); border-radius: 18px; background: linear-gradient(145deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.05)); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 30px 60px -18px rgb(0 0 0 / 0.65), 0 0 50px -10px rgb(110 130 255 / 0.4); }
.s-flutua small { color: #d0d8ea; font-size: 12.5px; }
.s-flutua b { font-size: 17px; }
.s-flutua-a b { font-size: 21px; }
.s-flutua-a { right: -44px; top: 70px; }
.s-flutua-b { left: -44px; bottom: 110px; }
.s-fl-ic { width: 40px; height: 40px; border-radius: 12px; }
.s-flutua-b svg { width: 88px; height: 32px; }
@media (max-width: 1180px) { .s-flutua { display: flex; transform: scale(0.8); } .s-flutua-a { right: -6px; } .s-flutua-b { left: -6px; } }
@media (max-width: 760px) { .s-flutua { display: none; } }
.s-historia.plano .s-vend-titulo { display: flex; flex-direction: column; align-items: center; margin: 34px auto 0; max-width: 520px; text-align: center; }
.s-historia.sem-guia .dm-mouse, .s-historia.sem-guia .dm-foco { display: none !important; }


/* celular: topo curto (título, uma frase, um botão) e a demonstração logo abaixo */
@media (max-width: 700px) {
  .s-hero { padding-top: 14px; }
  .s-hero h1 { font-size: clamp(32px, 9.6vw, 46px); line-height: 1.05; letter-spacing: -0.04em; }
  .s-hero h1 br { display: none; }
  .s-sub { margin-top: 14px; font-size: 17px; line-height: 1.4; }
  .s-cta { margin-top: 16px; }
  .s-cta .s-botao-vazio, .s-provas { display: none; }
  .s-cta .s-botao-claro { height: 42px; padding: 0 22px; font-size: 14.5px; }
  .s-historia .s-vitrine { margin-top: 22px; }
}

/* celular: a mesma animação, com o gráfico em cima e os cartões embaixo (classe "movel", definida por historia.js); tudo pequeno para aproveitar a tela inteira */
.s-historia.movel .s-estagio { padding: 0 5px; clip-path: inset(-200px -10px 0 -10px); }       /* corta só embaixo: o brilho do quadro continua se espalhando nos outros lados */
.s-historia.movel .s-vitrine { padding: 4px; border-radius: 14px; }
.s-historia.movel .s-vend-rot { display: none; }
.s-historia.movel .s-vend-titulo { left: 5px; right: 5px; bottom: auto; top: var(--topo-cards, 260px); width: auto; align-items: center; text-align: center; }
.s-historia.movel .s-vend-titulo p { display: none; }
.s-historia.movel .s-vend-titulo h2 { font-size: 20px; }

/* celular: lista de recursos e Laboratório menores, com a largura toda */
@media (max-width: 999px) {
  .s-hero { padding-left: 10px; padding-right: 10px; }
}

/* celular: Laboratório preso na tela, com 4 cartões e o selo de provas restantes */
@media (max-width: 999px) {
  .lb-estagio h2 { font-size: 21px; }
  .lb-estagio .s-secao-sub { display: none; }
  .lb-rot { margin-bottom: 8px; }
}

/* celular: as seções animadas vão de ponta a ponta (o <main> tem 20 px de margem) e o gráfico fica mais alto, com velas maiores */
@media (max-width: 999px) {
  .s-historia, .sl, .lb { margin-left: -20px; margin-right: -20px; }
  .s-historia.movel .s-estagio { padding: 0; }
  .s-historia.movel .s-vitrine { padding: 3px; border-radius: 10px; }
  .s-historia.movel .s-vend-titulo { left: 6px; right: 6px; }
  #dm-cv { aspect-ratio: 1000 / var(--cv-h, 560); }
  .lb-estagio h2 { font-size: 17px; }
}


/* celular: Laboratório com 4 cartões resumidos (só o nome), com o nome da seção, tudo numa tela e centralizado */
@media (max-width: 999px) {
  .lb-rot { display: inline-block; align-self: center; margin-bottom: 10px; padding: 3px 10px; font-size: 10.5px; }
  .lb-estagio h2 { font-size: 20px; }
}

/* lista de recursos (PC): "Análise completa" desenha a curva, a queda e as barras com a rolagem; o Pip monta o gráfico das perdas por horário */

/* celular: o Pip fica no cartão embaixo do gráfico e os outros cartões flutuam ao fundo, ao lado e atrás dos candles (mesma ideia de profundidade do PC) */
@media (max-width: 999px) {
  .s-historia.movel .s-demo-col { position: relative; z-index: 2; }
  .s-historia.movel .s-vend-cards { inset: 0; display: block; }
  .s-historia.movel .s-vc { position: absolute; inset: auto; width: 160px; padding: 8px 10px; gap: 1px; border-radius: 12px; z-index: 1; --par: 0px; }
  .s-historia.movel .s-vc small { font-size: 8.5px; }
  .s-historia.movel .s-vc b { font-size: 12px; line-height: 1.2; }
  .s-historia.movel .s-vc em { font-size: 10px; line-height: 1.25; }
  .s-historia.movel .s-vc-nota { right: 12px; top: calc(var(--topo-cards, 260px) * 0.05); width: 172px; grid-template-columns: 30px 1fr; column-gap: 8px; --s: 1; }
  .s-historia.movel .s-vc-nota svg { width: 30px; height: 30px; }
  .s-historia.movel .s-vc-nota strong { font-size: 11px; }
  .s-historia.movel .s-vc-nota em, .s-historia.movel .s-vc-alerta em { display: none; }
  .s-historia.movel .s-vc-alerta { right: 14px; top: calc(var(--topo-cards, 260px) * 0.64); width: 176px; }
  .s-historia.movel .s-vc-horario { left: 48%; top: calc(var(--topo-cards, 260px) * 0.36); width: 150px; --s: 0.92; --b: 0.4px; --o: 0.9; }
  .s-historia.movel .s-vc-risco { left: 6px; top: calc(var(--topo-cards, 260px) * 0.03); width: 118px; --s: 0.8; --b: 1.2px; --o: 0.6; }
  .s-historia.movel .s-vc-queda { left: 36%; top: calc(var(--topo-cards, 260px) * 0.82); width: 118px; --s: 0.8; --b: 1.2px; --o: 0.6; }
  .s-historia.movel .s-vc-fator { left: 6px; top: calc(var(--topo-cards, 260px) * 0.84); width: 112px; --s: 0.8; --b: 1.2px; --o: 0.6; }
  .s-historia.movel .s-vc-pip { z-index: 3; left: 8px; right: 8px; top: auto; bottom: 18px; width: auto; min-height: 150px; padding: 16px 18px; gap: 10px; --s: 1; }
  .s-historia.movel .s-vc-pip-topo i { width: 24px; height: 24px; border-radius: 8px; }
  .s-historia.movel .s-vc-pip-topo svg { width: 13px; height: 13px; }
  .s-historia.movel .s-vc-pip-topo b { font-size: 14px; }
  .s-historia.movel .s-vc-pip-topo small { font-size: 10.5px; }
  .s-historia.movel .s-vc-pip p { font-size: 15px; line-height: 1.4; }
  .s-historia.movel .s-vc-pip > span { padding: 8px 16px; font-size: 12.5px; }
}
@media (max-width: 999px) {
  .s-historia.movel .s-vend-titulo { top: auto; bottom: 216px; }
}


/* celular: botão branco e liso (estilo TradingView/FXReplay) e fundo do topo mais sóbrio, sem o brilho roxo/ciano */
@media (max-width: 999px) {
  html:not([data-aparencia="claro"]) .s-cta .s-botao-claro { background: #fff; color: #0b1220; box-shadow: 0 8px 20px -10px rgb(0 0 0 / 0.6); }
  html:not([data-aparencia="claro"]) .s-cta .s-botao-claro:hover { background: #e9eef7; transform: none; }
  html:not([data-aparencia="claro"]) .site-brilho { background:
    radial-gradient(900px 460px at 50% -120px, rgb(36 78 170 / 0.38), transparent 70%),
    radial-gradient(800px 420px at 50% 560px, rgb(40 90 200 / 0.20), transparent 70%); }
  html:not([data-aparencia="claro"]) .site-brilho::after { opacity: 0.45; }
}

/* celular: "Criar estratégia" no mesmo botão branco liso */
@media (max-width: 999px) {
  html:not([data-aparencia="claro"]) .s-historia.movel .s-vc-pip > span { background: #fff; color: #0b1220; box-shadow: 0 8px 20px -10px rgb(0 0 0 / 0.6); }
}

/* Botão principal branco também no PC (padrão TradingView/FXReplay) */
html:not([data-aparencia="claro"]) .s-botao-claro { background: #fff; color: #0b1220; box-shadow: 0 8px 20px -10px rgb(0 0 0 / 0.6); }
html:not([data-aparencia="claro"]) .s-botao-claro:hover { background: #e9eef7; transform: none; }
html:not([data-aparencia="claro"]) .s-vc-pip > span { background: #fff; color: #0b1220; box-shadow: 0 8px 20px -10px rgb(0 0 0 / 0.6); }
.lb-rot { align-self: center; justify-self: center; width: fit-content; margin-inline: auto; padding: 6px 14px; border: 0; background: rgb(91 155 255 / 0.12); font-size: 12px; letter-spacing: 0.12em; }

/* ---------- "Tudo para entender": três itens, um aberto por vez (lista.js); a demonstração ao lado troca junto e se desenha uma vez ---------- */
.sl { position: relative; max-width: none; padding: 0; }
.sl-ancora { position: absolute; left: 0; top: 0; }
.sl-estagio { max-width: 1180px; margin: 0 auto; padding: 56px clamp(20px, 4vw, 56px) 64px; }
.sl-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 44px; align-items: start; margin-top: 34px; }
.sl-lista { margin: 0; padding: 0; list-style: none; }
.sl-item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 18px 0; border-top: 1px solid rgb(255 255 255 / 0.1); }
.sl-item:last-child { border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.sl-item::before { content: ""; position: absolute; left: -18px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #7aa2ff, #a07bff); opacity: 0; }
.sl-item.aberto::before { opacity: 1; }
.sl-n { padding-top: 12px; color: #5b6478; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; }
.sl-item.aberto .sl-n { color: #a9b4ff; }
.sl-item h3 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.sl-item h3 button { width: 100%; padding: 0; border: 0; background: none; color: #6b7488; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.sl-item h3 button:hover { color: #aab4c8; }
.sl-item h3 button:focus-visible { outline: 2px solid #7aa2ff; outline-offset: 4px; border-radius: 6px; }
.sl-item.aberto h3 { font-size: 44px; }
.sl-item.aberto h3 button { color: #fff; cursor: default; }
.sl-corpo { display: none; }
.sl-item.aberto .sl-corpo { display: block; animation: sl-entra 0.35s ease-out; }
.sl-corpo p { max-width: 640px; margin: 14px 0 0; color: #b4c0d2; font-size: 17px; line-height: 1.55; }
.sl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; padding: 0; list-style: none; }
.sl-chips li { padding: 6px 13px; border: 1px solid rgb(160 150 255 / 0.4); border-radius: 999px; background: rgb(130 120 255 / 0.14); color: #dcdfff; font-size: 13.5px; font-weight: 600; }
.sl-visual { display: grid; aspect-ratio: 1 / 1.02; border: 1px solid transparent; border-radius: 28px; background: linear-gradient(160deg, rgb(26 30 52 / 0.8), rgb(10 12 22 / 0.7)) padding-box, linear-gradient(150deg, rgb(170 160 255 / 0.6), rgb(255 255 255 / 0.06) 50%, rgb(90 200 255 / 0.35)) border-box; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.8); overflow: hidden; }
.sl-vis { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 26px; visibility: hidden; opacity: 0; }
.sl[data-aberto="1"] .sl-v1, .sl[data-aberto="2"] .sl-v2, .sl[data-aberto="3"] .sl-v3 { visibility: visible; opacity: 1; }
.sl-v2 { gap: 8px; }
.sl-vis svg { width: 100%; height: auto; }
.sl-rep { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgb(255 255 255 / 0.06); }
.sl-rep i { width: 30px; height: 30px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #4a6dff, #7a5bff); box-shadow: 0 0 20px rgb(110 110 255 / 0.7); }
.sl-rep span { flex: 1; height: 5px; border-radius: 5px; background: rgb(255 255 255 / 0.12); overflow: hidden; }
.sl-rep b { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #4f86ff, #a77bff); transform-origin: left; transform: scaleX(0.58); }
.sl-rep em { color: #aab4c4; font-size: 13px; font-style: normal; font-weight: 700; }
.sl-topo2 { display: flex; align-items: flex-end; justify-content: space-between; }
.sl-topo2 span { display: grid; gap: 2px; }
.sl-topo2 small, .sl-cap { color: #93a0b8; font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.sl-topo2 b { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(100deg, #8ff5dc, #4ee0c0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl-topo2 i { padding: 4px 11px; border: 1px solid rgb(160 150 255 / 0.4); border-radius: 999px; background: rgb(130 120 255 / 0.14); color: #dcdfff; font-size: 12px; font-style: normal; font-weight: 700; }
.sl-eq .grade line, .sl-bars line { stroke: rgb(255 255 255 / 0.08); stroke-width: 1; }
.sl-eq .linha { fill: none; stroke: #4ee0c0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; filter: drop-shadow(0 0 6px rgb(78 224 192 / 0.7)); }
.sl-eq .ponta { fill: #e9fff9; filter: drop-shadow(0 0 8px #4ee0c0); }
.sl-bars rect, .sl-hist rect { transform-box: fill-box; transform-origin: 50% 100%; }
.sl-bars rect.neg { transform-origin: 50% 0; }
.sl-bars .pos { fill: #4ee0c0; }
.sl-bars .neg { fill: #ff6a86; }
.sl-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sl-kpis div { display: grid; gap: 4px; padding: 11px 10px; border-radius: 14px; background: rgb(255 255 255 / 0.06); text-align: center; }
.sl-kpis small { color: #93a0b8; font-size: 11px; font-weight: 700; }
.sl-kpis b { font-size: 20px; font-weight: 800; }
.sl-pip { display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: linear-gradient(160deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12); }
.sl-pip-topo { display: flex; align-items: center; gap: 10px; }
.sl-pip-topo i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(145deg, #7a9bff, #a07bff); box-shadow: 0 0 24px rgb(140 120 255 / 0.75); }
.sl-pip-topo svg { width: 18px; height: 18px; fill: #fff; }
.sl-pip-topo b { font-size: 16px; }
.sl-pip-topo span { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: #aeb9d3; font-size: 12px; font-weight: 600; }
.sl-pip-topo em { width: 7px; height: 7px; border-radius: 50%; background: #4ee0c0; box-shadow: 0 0 10px #4ee0c0; }
.sl-pip p { margin: 0; color: #f1f3fb; font-size: 17px; line-height: 1.45; }
.sl-hist { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgb(8 10 20 / 0.5); }
.sl-hist svg { width: 100%; height: auto; }
.sl-hist line { stroke: rgb(255 255 255 / 0.14); stroke-width: 1; }
.sl-hist .ok { fill: #6aa8ff; opacity: 0.85; }
.sl-hist .ruim { fill: #ff6a86; filter: drop-shadow(0 0 6px rgb(255 106 134 / 0.6)); }
.sl-hist .colchete { fill: none; stroke: #ff9db0; stroke-width: 1.6; }
.sl-hist-rot { display: grid; gap: 2px; }
.sl-hist-rot small { color: #ff9db0; font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.sl-hist-rot b { font-size: 18px; }
.sl-pip ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sl-pip li { padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, #4a6dff, #7a5bff); color: #fff; font-size: 13px; font-weight: 700; }
.sl-hist rect:nth-of-type(1) { --k: 0; }
.sl-hist rect:nth-of-type(2) { --k: 1; }
.sl-hist rect:nth-of-type(3) { --k: 2; }
.sl-hist rect:nth-of-type(4) { --k: 3; }
.sl-hist rect:nth-of-type(5) { --k: 4; }
.sl-hist rect:nth-of-type(6) { --k: 5; }
.sl-hist rect:nth-of-type(7) { --k: 6; }
.sl-hist rect:nth-of-type(8) { --k: 7; }
.sl-hist rect:nth-of-type(9) { --k: 8; }
.sl-hist rect:nth-of-type(10) { --k: 9; }
.sl-hist rect:nth-of-type(11) { --k: 10; }
.sl-hist rect:nth-of-type(12) { --k: 11; }

/* a demonstração se desenha uma vez cada vez que o item abre (a regra com data-aberto some e volta, e a animação recomeça) */
.sl[data-aberto="1"] .sl-rep b { animation: sl-avanca 5s ease-in-out infinite alternate; }
.sl[data-aberto="2"] .sl-eq .linha { animation: sl-traca 1.2s ease-out both; }
.sl[data-aberto="2"] .sl-eq .area, .sl[data-aberto="2"] .sl-dd { animation: sl-aparece 0.8s 0.3s ease-out both; }
.sl[data-aberto="2"] .sl-eq .ponta { animation: sl-aparece 0.3s 1.1s ease-out both; }
.sl[data-aberto="2"] .sl-bars rect { animation: sl-cresce 0.5s 0.5s ease-out both; }
.sl[data-aberto="3"] .sl-pip-topo em { animation: chat-vivo 1.4s ease-in-out infinite; }
.sl[data-aberto="3"] .sl-hist rect { animation: sl-cresce 0.5s calc(var(--k) * 60ms) ease-out both; }
.sl[data-aberto="3"] .sl-hist .colchete, .sl[data-aberto="3"] .sl-hist-rot { animation: sl-aparece 0.4s 0.9s ease-out both; }
.sl[data-aberto="3"] .sl-pip ul { animation: sl-aparece 0.4s 1.2s ease-out both; }
@keyframes sl-traca { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes sl-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sl-cresce { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sl-avanca { from { transform: scaleX(0.22); } to { transform: scaleX(0.88); } }
@keyframes sl-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sl * { animation: none !important; } }

/* celular: lista em cima e a demonstração embaixo (todas as demonstrações empilhadas no mesmo lugar, então a altura é a da maior e a página não pula ao trocar de item) */
@media (max-width: 999px) {
  .sl-estagio { padding: 36px 14px 40px; }
  .sl .s-secao-sub { display: none; }
  .sl-estagio h2 { font-size: 22px; }
  .sl-grade { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; }
  .sl-item { grid-template-columns: 30px minmax(0, 1fr); padding: 12px 0; }
  .sl-item::before { left: -10px; top: 12px; bottom: 12px; }
  .sl-n { padding-top: 5px; font-size: 11px; }
  .sl-item h3 { font-size: 19px; }
  .sl-item.aberto h3 { font-size: 26px; }
  .sl-corpo p { margin-top: 8px; font-size: 14.5px; line-height: 1.45; }
  .sl-chips { gap: 6px; margin-top: 10px; }
  .sl-chips li { padding: 4px 10px; font-size: 11.5px; }
  .sl-visual { aspect-ratio: auto; border-radius: 20px; }
  .sl-vis { padding: 18px; }
  .sl-kpis b { font-size: 17px; }
}

@media (max-width: 999px) {
  .lb-estagio { padding: 36px 14px 40px; }
}

/* ---------- Laboratório estático: nota grande, trilha de etapas concluídas e os seis estudos já à mostra ---------- */
.lb-etapas { display: flex; justify-content: center; margin: 30px 0 0; padding: 0; list-style: none; }
.lb-etapas li { display: flex; align-items: center; color: #4ee0c0; font-size: 13px; font-weight: 700; }
.lb-etapas li + li::before { content: ""; width: 36px; height: 2px; margin: 0 12px; border-radius: 2px; background: rgb(78 224 192 / 0.3); }
.lb-etapas i, .lb-veredito i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: rgb(78 224 192 / 0.16); }
.lb-etapas i::before, .lb-veredito i::before, .lb-cartoes em i::before { content: "✓"; font-size: 12px; font-style: normal; font-weight: 800; }
.lb-painel { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 12px; margin-top: 22px; text-align: left; }
.lb-nota { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 16px; border-radius: 18px; border: 1px solid transparent; background: linear-gradient(170deg, rgb(26 30 52 / 0.7), rgb(10 12 22 / 0.6)) padding-box, linear-gradient(150deg, rgb(170 160 255 / 0.4), rgb(255 255 255 / 0.05) 50%, rgb(90 200 255 / 0.2)) border-box; }
.lb-nota-rot { color: #93a0b8; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.lb-anel { position: relative; width: 168px; height: 168px; }
.lb-anel svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 10; }
.lb-anel circle { stroke: rgb(var(--ov) / 0.1); }
.lb-anel .arco { stroke: url(#lbg); stroke-linecap: round; stroke-dasharray: 364.4; stroke-dashoffset: 80; }
.lb-anel b { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.lb-anel small { display: block; margin-top: 6px; color: #93a0b8; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.lb-veredito { display: inline-flex; align-items: center; padding: 7px 16px 7px 10px; border-radius: 999px; background: rgb(47 214 165 / 0.14); color: #4eecc0; font-size: 14px; font-weight: 800; }
.lb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lb-chips li { padding: 4px 12px; border: 1px solid rgb(160 150 255 / 0.4); border-radius: 999px; background: rgb(130 120 255 / 0.14); color: #dcdfff; font-size: 12.5px; font-weight: 700; }
.lb-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lb-cartoes article { display: flex; flex-direction: column; padding: 18px 20px; border-radius: 18px; border: 1px solid transparent; background: linear-gradient(170deg, rgb(26 30 52 / 0.7), rgb(10 12 22 / 0.6)) padding-box, linear-gradient(150deg, rgb(170 160 255 / 0.4), rgb(255 255 255 / 0.05) 50%, rgb(90 200 255 / 0.2)) border-box; }
.lb-cartoes small { display: block; margin-bottom: 6px; color: #9aa6ff; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.lb-cartoes b { display: block; margin-bottom: 6px; color: #fff; font-size: 17px; }
.lb-cartoes p { margin: 0; color: #aab4c4; font-size: 13.5px; line-height: 1.45; }
.lb-cartoes em { display: flex; align-items: center; margin-top: auto; padding-top: 12px; color: #4eecc0; font-size: 13px; font-style: normal; font-weight: 700; }
.lb-cartoes em i { display: grid; place-items: center; width: 18px; height: 18px; margin-right: 7px; border-radius: 50%; background: rgb(78 224 192 / 0.16); }
.lb-mais { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin: 20px auto 0; padding: 9px 20px; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(135deg, rgb(52 56 130 / 0.7), rgb(14 14 40 / 0.7)) padding-box, linear-gradient(120deg, #8fa8ff, rgb(255 255 255 / 0.1) 50%, #3de0c0) border-box; color: #e6eaff; font-size: 14.5px; font-weight: 700; }
.lb-mais i { width: 8px; height: 8px; border-radius: 50%; background: #4ee0c0; }
.lb-mais-cel { display: none; }
@media (max-width: 999px) {
  .lb-painel { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lb-nota { gap: 12px; padding: 18px 12px; border-radius: 14px; }
  .lb-anel { width: 128px; height: 128px; }
  .lb-anel b { font-size: 40px; }
  .lb-cartoes { gap: 8px; }
  .lb-cartoes article { padding: 12px; border-radius: 14px; }
  .lb-cartoes b { font-size: 14.5px; }
  .lb-cartoes p { font-size: 12px; line-height: 1.35; }
  .lb-cartoes em { padding-top: 8px; font-size: 11.5px; }
}
@media (max-width: 640px) {
  .lb-etapas { margin-top: 18px; }
  .lb-etapas li { font-size: 10.5px; }
  .lb-etapas li + li::before { width: 10px; margin: 0 6px; }
  .lb-etapas i { width: 16px; height: 16px; margin-right: 5px; }
  .lb-chips { display: none; }
  .lb-cartoes article:nth-child(n+5) { display: none; }
  .lb-cartoes p { display: none; }
  .lb-mais-pc { display: none; }
  .lb-mais-cel { display: inline; }
  .lb-mais { margin-top: 14px; padding: 8px 16px; font-size: 12.5px; }
}