/* ==========================================================================
   fix-hero — 26/09. Dois defeitos apontados pelo dono, na ordem:
   1. os selos ("30 dias grátis...") estavam a 43px da janela do painel, ou
      seja, colados. Agora a hero tem pé de verdade e a seção do vídeo sobe
      bem menos, então sobra respiro entre o texto e a moldura.
   2. o fundo terminava numa linha reta. Em vez de contar com o degradê do
      canvas (que já existia mas não bastava), entra uma vinheta por cima de
      TODAS as camadas, longa, que leva o fundo ao preto sólido. Assim não
      importa qual camada acaba onde: a emenda deixa de existir.
   Carregado por último, então vence por ordem.
   ========================================================================== */

@media (min-width: 901px) {
    .hero { padding-bottom: clamp(56px, 7vh, 84px); }
    .scrolly { margin-top: clamp(-200px, -12vw, -130px); }
}

/* a vinheta: cobre a metade de baixo do fundo da hero e morre no preto */
.hero-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--bg-sobra, 420px) + 34%);
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(11, 11, 14, 0) 0%,
        rgba(11, 11, 14, .18) 26%,
        rgba(11, 11, 14, .48) 48%,
        rgba(11, 11, 14, .76) 68%,
        rgba(11, 11, 14, .94) 86%,
        #0B0B0E 100%);
}

@media (max-width: 900px) {
    .hero { padding-bottom: clamp(70px, 10vh, 100px); }
    .scrolly { margin-top: -10px; }
    .hero-bg::after { height: calc(var(--bg-sobra, 300px) + 26%); }
}

/* ==========================================================================
   A janela do painel cresce com o scroll (não só endireita), e o menu fixo
   sai da frente enquanto ela cresce. --p vem do hero.js e vai de 0 a 1.
   ========================================================================== */
.scrolly-frame {
    transform:
        rotateX(calc((1 - var(--p, 0)) * 13deg))
        scale(calc(.85 + var(--p, 0) * .15))
        translateY(calc((1 - var(--p, 0)) * 26px));
    transform-origin: 50% 32%;
}

/* a nota sai do fluxo: o sticky é um flex em LINHA, então ela ficava lado a
   lado com a janela e empurrava tudo pra esquerda. */
.scrolly-nota {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-3);
    opacity: calc(.25 + var(--p, 0) * .75);
    transition: opacity .3s var(--ease);
}

.nav {
    transition: background .3s var(--ease), border-color .3s var(--ease),
                opacity .35s var(--ease), transform .35s var(--ease);
}

@media (max-width: 900px) {
    .scrolly-frame { transform: none; }
    .scrolly-nota { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
    .scrolly-frame { transform: none; }
}

/* O fundo é ambiente, não desenho: numa faixa estreita entre o texto e a
   janela ele virava uma cortina listrada. Fica bem mais discreto. */
#hero-canvas {
    opacity: .42;
    /* o desenho tem barras, e barra tem borda reta: qualquer corte vira linha.
       A máscara dissolve o canvas nos quatro lados, então ele não termina em
       lugar nenhum, só some. */
    -webkit-mask-image: radial-gradient(118% 78% at 50% 46%, #000 12%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.26) 70%, transparent 88%);
    mask-image: radial-gradient(118% 78% at 50% 46%, #000 12%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.26) 70%, transparent 88%);
}
@media (max-width: 900px) {
    #hero-canvas {
        opacity: .5;
        -webkit-mask-image: radial-gradient(130% 82% at 50% 44%, #000 14%, rgba(0,0,0,.6) 52%, transparent 86%);
        mask-image: radial-gradient(130% 82% at 50% 44%, #000 14%, rgba(0,0,0,.6) 52%, transparent 86%);
    }
}

/* ==========================================================================
   Nitidez sob a inclinação. O navegador desenha a janela UMA vez e depois
   aplica a perspectiva; como a parte de baixo fica "mais perto", ela amplia
   esse desenho e borra. A saída é desenhar em dobro e encolher pela metade:
   a textura passa a ter resolução de sobra pra aguentar a projeção.
   ========================================================================== */
/* a janela cresce até 1.0, então a largura de base já precisa caber na tela
   com a altura da barra fixa descontada. Sem isso ela estoura a viewport e o
   sticky corta o topo. */
.scrolly-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    width: min(94vw, calc((100svh - 130px) * 16 / 9));
    max-height: calc(100svh - 130px);
}
.scrolly-frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-width: none;
    will-change: transform;
}
@media (max-width: 900px) {
    /* no celular a cena também fica presa, com o print feito na largura do
       celular: a janela é alta e toma quase a tela toda */
    .scrolly { height: 300vh; margin-top: -10px; padding: 0; }
    .scrolly-sticky { position: sticky; top: 0; height: 100svh; padding-top: 70px; overflow: hidden; }
    .scrolly-frame { width: 92vw; aspect-ratio: auto; height: calc(100svh - 92px); max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
    .scrolly { height: auto; padding: 24px 0 48px; }
    .scrolly-sticky { position: static; height: auto; padding-top: 0; }
    .scrolly-frame { aspect-ratio: 16 / 9; height: auto; }
}

/* headline maior, ainda em duas linhas: a fonte sobe e a coluna acompanha,
   senão ela quebra em três. */
@media (min-width: 901px) {
    .hero-in { max-width: 1320px; }
    .hero-h {
        font-size: clamp(38px, 3.7vw, 52px);
        max-width: 1180px;
        line-height: 1.08;
        letter-spacing: -.043em;
    }
    .hero-sub { font-size: clamp(16.5px, 1.6vw, 20px); max-width: 68ch; }
}

/* ==========================================================================
   FRAGMENTO CONCEITUAL (prova) — o princípio que a referência usa e que a
   gente não estava usando: NÃO imitar a tela real em miniatura. Poucos
   objetos, grandes, um único ponto de foco, muito vazio em volta, cor só no
   que importa. Miniatura de interface densa com texto de 10px é o que dá
   aquela cara de coisa gerada.
   ========================================================================== */
/* Fase 1 (Zouti × Deu ROI, 26/09): superfície de vidro sobre luz. Layout e
   animação (tempos, keyframes de posição) intocados; só a matéria muda.
   UM glow no #launcher: o "12" do alvo. */
#launcher { isolation: isolate; }
/* a luz atrás do cartão: sem ela o vidro não tem o que desfocar. Nasce e
   morre em transparente, então não desenha aresta nenhuma. */
#launcher::before {
    content: "";
    position: absolute; inset: 0;
    z-index: -1; pointer-events: none;
    background:
        radial-gradient(32% 42% at 72% 50%, rgba(60,230,160,.06), transparent 70%),
        radial-gradient(20% 28% at 84% 48%, rgba(60,230,160,.045), transparent 72%);
}
.lch2 {
    position: relative;
    padding: 26px 26px 30px;
    border-radius: var(--r-box);
    background-color: var(--surface);
    background-image:
        radial-gradient(34% 40% at 24% 58%, rgba(60,230,160,.075), transparent 72%),
        radial-gradient(40% 50% at 84% 52%, rgba(60,230,160,.11), transparent 70%),
        radial-gradient(120% 90% at 50% 0%, rgba(60,230,160,.05), transparent 62%),
        var(--veil),
        var(--glass-grad);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--ring), var(--mold), var(--drop);
    overflow: hidden;
}
.lch2::after { content: none; }
@media (max-width: 900px) {
    /* no celular o cartão fica embaixo do texto: a luz desce com ele */
    #launcher::before {
        background: radial-gradient(60% 26% at 50% 80%, rgba(60,230,160,.06), transparent 72%);
    }
}
.lch2-t {
    font-family: var(--display);
    font-size: 13px; font-weight: 600; letter-spacing: -.01em;
    color: var(--text-2); margin-bottom: 26px;
}
.lch2-palco { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: 290px; }

/* a pilha: o do meio em foco, os outros desfocados e apagados. É daqui que
   vem a sensação de profundidade, não de sombra. */
.lch2-pilha { display: grid; justify-items: center; gap: 9px; }
.lch2-peca {
    position: relative; display: flex; align-items: center; gap: 9px;
    width: 176px; height: 40px; padding: 0 13px;
    border-radius: var(--r-card);
    background-color: rgba(255,255,255,.03);
    background-image: var(--glass-grad);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--ring), var(--mold-soft);
}
.lch2-peca.p1, .lch2-peca.p5 { opacity: .2; filter: blur(2.4px); transform: scale(.9); }
.lch2-peca.p2, .lch2-peca.p4 { opacity: .42; filter: blur(1.1px); transform: scale(.96); }
.lch2-peca.foco {
    width: 208px; height: 52px;
    background-color: rgba(255,255,255,.045);
    background-image: var(--veil), linear-gradient(267deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
    box-shadow: 0 0 0 1px rgba(60,230,160,.26), var(--mold), 0 18px 40px -18px rgba(0,0,0,.9);
    animation: lch2-pulso 3.6s ease-in-out infinite;
}
/* mesmo tempo de sempre; só o anel pulsa (anel, não brilho: o brilho é do alvo) */
@keyframes lch2-pulso {
    0%, 100% { box-shadow: 0 0 0 1px rgba(60,230,160,.22), var(--mold), 0 18px 40px -18px rgba(0,0,0,.9); }
    50%      { box-shadow: 0 0 0 1px rgba(60,230,160,.5), var(--mold), 0 18px 46px -16px rgba(0,0,0,.95); }
}
.lch2-peca b { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text); letter-spacing: -.02em; }
.lch2-play {
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
    background: var(--brand-grad-deep);
    box-shadow: 0 0 0 1px rgba(60,230,160,.34), var(--mold-soft);
    position: relative;
}
.lch2-play::after {
    content: ""; position: absolute; left: 10px; top: 8px;
    border-left: 8px solid var(--brand); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

/* o fio: uma linha fina com um ponto de luz andando */
.lch2-fio { position: relative; width: 108px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(60,230,160,.5)); }
.lch2-fio i {
    position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%;
    background: var(--brand); box-shadow: 0 0 0 2px rgba(60,230,160,.18); /* sem halo: o glow da seção é só o "12" */
    animation: lch2-corre 2.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes lch2-corre { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.lch2-alvo { display: grid; justify-items: start; gap: 7px; }
.lch2-meta {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: var(--r-pill);
    background-color: rgba(255,255,255,.03);
    background-image: var(--glass-grad);
    -webkit-backdrop-filter: var(--glass-blur-2); backdrop-filter: var(--glass-blur-2);
    box-shadow: var(--ring), var(--mold-soft);
    font-size: 12px; color: var(--text-2);
}
.lch2-meta svg { width: 14px; height: 14px; color: #E4E4E7; }
.lch2-num {
    font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05;
    color: var(--text);
}
/* O FOCO: o "12" vira uma peça de vidro verde acesa — o único glow da seção */
.lch2-num span {
    display: inline-block;
    padding: .04em .2em .02em;
    margin: 0 0 .14em -.04em;
    border-radius: var(--r-card);
    color: #D9FFEF;
    font-family: var(--mono);
    background-color: rgba(60,230,160,.1);
    background-image: linear-gradient(-44deg, rgba(10,59,40,.85), rgba(47,214,147,.5));
    -webkit-backdrop-filter: var(--glass-blur-2); backdrop-filter: var(--glass-blur-2);
    box-shadow: var(--ring-brand), var(--mold), var(--glow);
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.lch2-alvo small { font-size: 12.5px; color: #8A8A96; max-width: 24ch; line-height: 1.45; }

@media (max-width: 760px) {
    .lch2-palco { grid-template-columns: 1fr; justify-items: center; gap: 22px; min-height: 0; }
    .lch2-fio { width: 1px; height: 64px; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(60,230,160,.5)); }
    .lch2-fio i { left: -2px; top: 0; animation-name: lch2-desce; }
    @keyframes lch2-desce { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
    .lch2-alvo { justify-items: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .lch2-peca.foco, .lch2-fio i { animation: none; }
}

/* ==========================================================================
   O corte reto e o gráfico apagado — a causa (26/09)
   --------------------------------------------------------------------------
   Eu vinha tratando sintoma. A linha reta atravessando a página inteira não
   era o desenho acabando: era `.hero { overflow: hidden }` CORTANDO o canvas,
   que já é desenhado mais alto que a hero. E a vinheta que eu tinha posto pra
   disfarçar estava presa ao mesmo rodapé, então ela escurecia o gráfico
   inteiro e a emenda continuava lá.
   Agora: a hero para de cortar (o fundo passa por trás da janela inclinada,
   como pedido) e quem desaparece é o próprio canvas, por máscara — sem
   camada escura nenhuma por cima, então o gráfico volta a aparecer.
   ========================================================================== */
.hero { overflow: visible; }
.hero-bg { overflow: visible; }
.hero-bg::after { content: none; }

/* O canvas JÁ apaga sozinho o topo e o pé (hero.js, composite destination-in).
   A máscara que eu tinha posto aqui somava com aquele fade e por isso o
   gráfico sumia. Sobra só um alívio de canto, fraco. */
#hero-canvas {
    opacity: .72;
    -webkit-mask-image: radial-gradient(170% 150% at 50% 42%, #000 72%, rgba(0,0,0,.8) 90%, rgba(0,0,0,.5) 100%);
    mask-image: radial-gradient(170% 150% at 50% 42%, #000 72%, rgba(0,0,0,.8) 90%, rgba(0,0,0,.5) 100%);
}
@media (max-width: 900px) {
    #hero-canvas { opacity: .66; }
}
.scrolly { background: transparent; }

/* o "12" não tinha origem: o número aparecia sozinho e não se explicava.
   Agora a pilha diz de onde ele vem, então o fragmento conta 12 → 12. */
.lch2-de { display: block; margin-top: 3px; font-weight: 400; color: #8A8A96; font-size: 12px; }

/* ==========================================================================
   Launcher, 30/10: animação em código. Quadradinhos de vídeo entram na Meta e
   saem organizados em ABO (teste) e CBO (escala). O movimento mora no app.js;
   aqui só as caixas, que o JS mede. Tudo em cqw pra acompanhar a largura do card.
   ========================================================================== */
#launcher .lsa { padding: clamp(18px, 2.4vw, 28px); container-type: inline-size; overflow: hidden; }
#launcher .lsa-palco {
    position: relative; display: grid; align-items: center; column-gap: 5cqw;
    grid-template-columns: auto auto minmax(0, 1fr);
    --q: 8.4cqw; --s: 4.7cqw;
}
#launcher .lsa-fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#launcher .lsa-fios path {
    fill: none; stroke: rgba(60, 230, 160, .28); stroke-width: 1.2; stroke-dasharray: 3 7;
}
#launcher .lsa-palco.vai .lsa-fios path { animation: lsa-fio .7s linear infinite; stroke: rgba(60, 230, 160, .6); }
@keyframes lsa-fio { to { stroke-dashoffset: -20; } }

#launcher .lsa-t1 { display: flex; align-items: baseline; gap: 6px; margin: 0 0 9px; font-size: 12.5px; color: var(--text); }
#launcher .lsa-t1 b { font-weight: 600; }
#launcher .lsa-t1 span { font-size: 11px; color: var(--text-3); }

#launcher .lsa-grade { display: grid; grid-template-columns: repeat(3, var(--q)); gap: 1.5cqw; }
#launcher .lsa-o { display: block; width: var(--q); height: var(--q); border-radius: 22%; background: rgba(255, 255, 255, .03); }

#launcher .lsa-meta { position: relative; z-index: 2; display: grid; place-items: center; width: 12cqw; height: 12cqw; }
#launcher .lsa-meta b {
    position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #4f9bff, #1877f2 62%, #0f56b8);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 34px -6px rgba(24, 119, 242, .75);
}
#launcher .lsa-meta svg { width: 52%; height: 52%; fill: #fff; }
#launcher .lsa-onda { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(90, 160, 255, .8); opacity: 0; }

#launcher .lsa-dest { position: relative; z-index: 1; display: grid; gap: 2.2cqw; min-width: 0; }
#launcher .lsa-camp {
    padding: 2.2cqw 2.4cqw; border-radius: 12px;
    background: rgba(255, 255, 255, .035); box-shadow: var(--ring);
    transition: box-shadow .4s var(--ease), background .4s var(--ease);
}
#launcher .lsa-palco.fim .lsa-camp { background: rgba(60, 230, 160, .06); box-shadow: 0 0 0 1px rgba(60, 230, 160, .32); }
#launcher .lsa-conj { display: flex; gap: 1.2cqw; }
#launcher .lsa-conj > span {
    display: flex; flex-wrap: wrap; gap: .8cqw; padding: .9cqw; border-radius: 8px;
    background: rgba(0, 0, 0, .24); box-shadow: var(--ring);
}
#launcher .lsa-s { display: block; width: var(--s); height: var(--s); border-radius: 22%; background: rgba(255, 255, 255, .05); }

#launcher .lsa-fim {
    grid-column: 1 / -1; justify-self: end; margin: 2.2cqw 0 0; font-size: 13px; color: var(--text-2);
}
#launcher .lsa-fim b { font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }

/* o quadradinho é um vídeo: fundo com cor, play e barra de progresso */
#launcher .lsa-t {
    position: absolute; left: 0; top: 0; z-index: 3; display: block; border-radius: 22%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 6px 16px -6px rgba(0, 0, 0, .8);
    will-change: transform, opacity;
}
#launcher .lsa-t::before {
    content: ''; position: absolute; left: 50%; top: 46%; transform: translate(-30%, -50%);
    border-left: calc(var(--q) * .2) solid rgba(255, 255, 255, .92);
    border-top: calc(var(--q) * .13) solid transparent; border-bottom: calc(var(--q) * .13) solid transparent;
}
#launcher .lsa-t::after {
    content: ''; position: absolute; left: 12%; right: 12%; bottom: 11%; height: 6%; border-radius: 9px;
    background: linear-gradient(90deg, #fff 58%, rgba(255, 255, 255, .28) 58%);
}
#launcher .lsa-t.c0 { background: linear-gradient(150deg, #f0a27a, #a8452f); }
#launcher .lsa-t.c1 { background: linear-gradient(150deg, #8d7cf5, #4a35a8); }
#launcher .lsa-t.c2 { background: linear-gradient(150deg, #3ce6a0, #127a55); }
#launcher .lsa-t.c3 { background: linear-gradient(150deg, #f2c463, #a9701a); }
#launcher .lsa-t.c4 { background: linear-gradient(150deg, #5cc6f2, #1b6c9c); }
#launcher .lsa-t.c5 { background: linear-gradient(150deg, #f07fa6, #99305c); }

@container (max-width: 470px) {
    #launcher .lsa-palco {
        grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 26px;
        --q: 12.6cqw; --s: 8.6cqw;
    }
    #launcher .lsa-t1 { justify-content: flex-start; }
    #launcher .lsa-grade { grid-template-columns: repeat(6, var(--q)); gap: 2cqw; }
    #launcher .lsa-meta { width: 18cqw; height: 18cqw; }
    #launcher .lsa-dest { width: 100%; gap: 3cqw; }
    #launcher .lsa-camp { padding: 3cqw; }
    #launcher .lsa-conj { justify-content: space-between; }
    #launcher .lsa-conj > span { gap: 1.4cqw; padding: 1.4cqw; }
    #launcher .lsa-fim { justify-self: center; margin-top: 0; }
    /* empilhado, o fio do CBO cruzaria o card do ABO */
    #launcher .lsa-fios path:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #launcher .lsa-palco.vai .lsa-fios path { animation: none; }
}

/* ==========================================================================
   Atribuição, 30/10: ângulo "você nunca perde". Saiu a fila manual, que dava
   a impressão de trabalho e usava termo que ninguém conhece (macro crua, paga
   sem match). Agora: de onde a venda veio → a campanha certa.
   ========================================================================== */
#atribuicao .vol { padding: clamp(20px, 2.6vw, 30px); }
#atribuicao .vol-g {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 1.2fr) 60px minmax(0, 1fr);
}
#atribuicao .vol-orig { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
#atribuicao .vol-orig li {
    display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px;
    min-height: 62px; padding: 10px 12px; border-radius: 12px;
    background: rgba(255, 255, 255, .04); box-shadow: var(--ring);
}
#atribuicao .vol-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; }
#atribuicao .vol-ico svg { width: 20px; height: 20px; }
#atribuicao .ig .vol-ico { background: linear-gradient(135deg, #f9a13a, #dd2a7b 55%, #8134af); }
#atribuicao .wa .vol-ico { background: #25d366; }
#atribuicao .lk .vol-ico { background: rgba(255, 255, 255, .12); }
#atribuicao .vol-tx { min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--text); }
#atribuicao .vol-tx small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--text-3); }

#atribuicao .vol-fios svg { display: block; width: 100%; height: 222px; overflow: visible; }
#atribuicao .vol-fios path {
    fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: .6;
    vector-effect: non-scaling-stroke; stroke-dasharray: 120; stroke-dashoffset: 0;
    transition: stroke-dashoffset .8s var(--ease);
}
.js #atribuicao .vol:not(.in) .vol-fios path { stroke-dashoffset: 120; }

#atribuicao .vol-dest {
    padding: 16px; border-radius: 14px; text-align: center;
    background: rgba(60, 230, 160, .07); box-shadow: 0 0 0 1px rgba(60, 230, 160, .3);
}
#atribuicao .vol-dest p { margin: 0; }
#atribuicao .vol-camp span { display: block; font-size: 11px; color: var(--text-3); }
#atribuicao .vol-camp b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
#atribuicao .vol-num { margin-top: 14px !important; font-size: 14px; color: var(--text-2); }
#atribuicao .vol-num b { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: var(--brand); line-height: 1; }
#atribuicao .vol-val { margin-top: 2px !important; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-2); }
#atribuicao .vol-ok {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 14px !important;
    font-size: 12px; font-weight: 600; color: var(--pos);
}
#atribuicao .vol-ok svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* as origens entram uma a uma e a campanha fecha depois */
.js #atribuicao .vol:not(.in) .vol-orig li,
.js #atribuicao .vol:not(.in) .vol-dest { opacity: 0; transform: translateX(-8px); }
#atribuicao .vol-orig li, #atribuicao .vol-dest { transition: opacity .35s var(--ease), transform .35s var(--ease); }
#atribuicao .vol-orig li:nth-child(2) { transition-delay: .12s; }
#atribuicao .vol-orig li:nth-child(3) { transition-delay: .24s; }
#atribuicao .vol-dest { transition-delay: .7s; }

@media (min-width: 900px) {
    #atribuicao .feat { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
    #atribuicao .vol-g { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    #atribuicao .vol-fios { justify-self: center; width: 1px; height: 26px; background: rgba(60, 230, 160, .5); }
    #atribuicao .vol-fios svg { display: none; }
}

/* ==========================================================================
   Analytics, 30/10: telas de verdade, cada uma com a sua frase. O desenho
   antigo juntava criativo e Clarity e ficava muito atrás do painel de hoje.
   ========================================================================== */
#analytics .tela { margin-top: clamp(36px, 5vw, 64px); }
#analytics .tela-tx { max-width: 640px; margin: 0 auto 20px; text-align: center; }
#analytics .tela-tx h3 { margin: 0 0 6px; font-family: var(--display); font-size: clamp(20px, 2vw, 24px); font-weight: 600; letter-spacing: -.02em; color: var(--text); }
#analytics .tela-tx p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
#analytics .tela-img {
    overflow: hidden; border-radius: 16px; background: rgb(8, 9, 9);
    box-shadow: var(--ring), 0 40px 90px -50px rgba(0, 0, 0, .9);
}
#analytics .tela-img img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
    /* a tela é de computador: no celular ela rola de lado e o texto continua legível */
    #analytics .tela-img { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #analytics .tela-img img { width: 760px; max-width: none; }
}

#gerenciador .pxf-novo { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-2); }
#gerenciador .pxf-novo b { color: var(--brand); font-weight: 600; }

#gerenciador .pxf-tudo {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px;
    margin: 12px 0 0; padding: 0; list-style: none;
}
#gerenciador .pxf-tudo li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-2); }
#gerenciador .pxf-tudo b { font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }