/* ============================================================
   Flagy — seções do site
   ============================================================ */

/* ============================================================
   Topo
   ------------------------------------------------------------
   Flutuante e com desfoque: o conteúdo passa POR BAIXO dele, o que dá
   profundidade sem precisar de sombra pesada.
   ============================================================ */
.topo {
    position: fixed;
    top: 14px; left: 0; right: 0;
    z-index: 100;
    transition: transform .25s ease;
}
.topo__linha {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 62px;
    padding: 0 18px;
    max-width: calc(var(--max) + 60px);
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: rgba(12, 7, 24, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.topo__marca img { height: 30px; width: auto; }

.topo__nav { display: flex; gap: 4px; margin-left: 10px; }
.topo__link {
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--tinta-2);
    font-size: 14.5px;
    font-weight: 500;
    transition: color .15s, background-color .15s;
}
.topo__link:hover, .topo__link.is-ativo { color: var(--tinta); background: var(--superficie); }

.topo__acoes { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topo__entrar { color: var(--tinta-2); font-size: 14.5px; font-weight: 500; padding: 8px 6px; }
.topo__entrar:hover { color: var(--tinta); }
.botao--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }

.topo__hamburguer {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    margin-left: auto;
    padding: 0 10px;
    border: 0;
    background: none;
    cursor: pointer;
}
.topo__hamburguer span {
    display: block; height: 2px; width: 100%;
    background: var(--tinta);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.topo__hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topo__hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topo__hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.topo__gaveta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 18px 0;
    padding: 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    background: rgba(12, 7, 24, .95);
    backdrop-filter: blur(14px);
}
.topo__gaveta[hidden] { display: none; }
.topo__gaveta a { padding: 12px 14px; border-radius: var(--raio); color: var(--tinta-2); font-weight: 500; }
.topo__gaveta a:hover { background: var(--superficie); color: var(--tinta); }
.topo__gaveta .botao { margin-top: 8px; }

@media (max-width: 900px) {
    .topo__nav, .topo__acoes { display: none; }
    .topo__hamburguer { display: flex; }
}

/* ============================================================
   Constelação do herói
   ------------------------------------------------------------
   Milhares de triângulos que formam o sorriso da marca, viram um globo e
   depois o logotipo inteiro, conforme a página rola. É a única imagem do
   herói — a coreografia mora em site.js; aqui só ficam a caixa e o
   esmaecimento das bordas.
   ============================================================ */
.constelacao {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    /* Some nas bordas: um campo que termina numa linha reta denuncia a caixa.
       O centro da máscara acompanha o centro da figura (68% da largura, ver
       `medir()` em site.js) — centrada em 50% ela comeria o lado direito do
       globo justo quando ele está mais cheio. */
    -webkit-mask-image: radial-gradient(ellipse 96% 96% at 62% 48%, #000 58%, transparent 100%);
    mask-image: radial-gradient(ellipse 96% 96% at 62% 48%, #000 58%, transparent 100%);
}
@media (max-width: 860px) {
    /* No celular não existe metade direita: a figura fica ATRÁS do texto, e aí
       ela é atmosfera, não a peça principal. Duas medidas para o texto
       continuar ganhando — opacidade baixa e uma máscara que concentra o
       campo no alto, atrás do título, e o dissolve justo onde começa o
       parágrafo. Sem isso, o ato do logotipo vira uma mancha por baixo do
       texto corrido, que é o pior dos dois mundos. */
    .constelacao {
        opacity: .32;
        -webkit-mask-image: radial-gradient(ellipse 98% 58% at 50% 34%, #000 38%, transparent 100%);
        mask-image: radial-gradient(ellipse 98% 58% at 50% 34%, #000 38%, transparent 100%);
    }
}

/* ============================================================
   Herói
   ============================================================ */
/* A seção é a PISTA; o palco grudado é o que se vê. A altura extra (300vh) é
   quanto se rola com a figura parada na tela, e é dentro desse curso que
   cabem os três atos — marca, globo, logotipo — mais as duas pausas em que
   cada um fica montado tempo suficiente para ser lido.

   Encurtar isto não acelera a animação: espreme os três atos no mesmo dedo de
   rolagem, e foi exatamente o que fez o logotipo passar batido antes.

   `overflow: clip` e não `hidden`: `hidden` faria da seção um contêiner de
   rolagem, e o `position: sticky` do filho pararia de grudar em silêncio. */
.heroi {
    min-height: 400vh;
    overflow: clip;
}
.heroi__fixo {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: 130px 0 70px;
    overflow: clip;
    background:
        radial-gradient(ellipse 120% 80% at 50% -10%, rgba(64, 21, 121, .55), transparent 60%),
        linear-gradient(180deg, var(--fundo) 0%, var(--fundo-2) 60%, var(--fundo) 100%);
}

/* Traço que desliza para baixo, no rodapé do palco. */
.heroi__desce {
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, transparent, var(--amarelo));
    opacity: .6;
    animation: descer 2.4s ease-in-out infinite;
}
@keyframes descer {
    0%, 100% { transform: translateY(-8px) scaleY(.6); opacity: .25; }
    50%      { transform: translateY(6px) scaleY(1);   opacity: .75; }
}
@media (prefers-reduced-motion: reduce) { .heroi__desce { animation: none; } }

.heroi__grade {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.25fr);
    gap: 48px;
    align-items: center;
}
.selo__ponto {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--amarelo);
    box-shadow: 0 0 0 4px rgba(255, 197, 0, .18);
    /* Pulso lento: diz "ao vivo" sem piscar. */
    animation: pulsoSelo 2.6s ease-in-out infinite;
}
@keyframes pulsoSelo {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 197, 0, .18); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 197, 0, .05); }
}

.heroi__botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.seta { font-style: normal; transition: transform .16s ease; }
.botao:hover .seta { transform: translateX(3px); }

.heroi__provas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    color: var(--tinta-3);
    font-size: 14px;
}
.heroi__provas strong { color: var(--tinta-2); }

/* Reserva a metade direita para a constelação. O canvas cobre a seção inteira,
   então o que separa texto de figura é este vazio — não uma margem no texto. */
.heroi__vao { min-height: 540px; }

/* ============================================================
   Palco do fluxo (a peça que se monta sozinha)
   ------------------------------------------------------------
   Uma janela falsa de editor. Os nós entram um a um e os fios se desenham
   entre eles; depois uma mensagem percorre o caminho. A ordem vem do JS.
   ============================================================ */
.palco { position: relative; }
.palco__janela {
    position: relative;
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    background: linear-gradient(160deg, rgba(26, 15, 51, .9), rgba(10, 6, 20, .95));
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .03) inset;
    overflow: hidden;
}
.palco__barra {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--borda);
    background: rgba(255, 255, 255, .03);
}
.palco__bolinha { width: 10px; height: 10px; border-radius: 50%; background: var(--borda-forte); }
.palco__titulo { margin-left: 10px; color: var(--tinta-3); font-size: 12.5px; }

.palco__tela {
    position: relative;
    height: 430px;
    padding: 20px;
    /* A grade é quem posiciona os nós. Ver o comentário em site.js. */
    display: grid;
    grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr));
    grid-template-rows: repeat(var(--linhas, 3), minmax(0, 1fr));
    /* Coluna com folga: a curva do fio precisa de espaço horizontal para sair
       e entrar reta. Com pouco espaço ela vira um cotovelo. */
    column-gap: 30px;
    row-gap: 10px;
    align-items: center;
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 22px 22px;
}
.palco__fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* O fio se desenha por dash-offset: é a forma de "escrever" um caminho SVG sem
   biblioteca e sem recalcular geometria a cada quadro. */
.fio {
    fill: none;
    stroke: rgba(165, 107, 239, .55);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: var(--dash);
    stroke-dashoffset: var(--dash);
    transition: stroke-dashoffset .5s ease;
}
.fio.is-ligado { stroke-dashoffset: 0; }

/* Pulso que corre pelo fio depois de ligado: é a mensagem andando. */
.fio-pulso {
    fill: none;
    stroke: var(--amarelo);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 14 1000;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(255, 197, 0, .8));
}
.fio-pulso.is-correndo { animation: correrFio 1.1s ease-in-out forwards; }
@keyframes correrFio {
    from { stroke-dashoffset: var(--dash); opacity: 1; }
    to   { stroke-dashoffset: -14; opacity: 1; }
}

/* ============================================================
   Nó de fluxo — a mesma anatomia do editor de verdade
   ------------------------------------------------------------
   Cabeçalho com a barra da cor do bloco, corpo com o resumo e SAÍDAS NOMEADAS,
   cada uma com a sua alça. Essa última parte é o que mais faz o desenho parecer
   o produto: num editor de fluxo, o fio não sai do meio do cartão — sai da
   linha da saída específica, e é isso que deixa ler para onde cada caminho vai.
   ============================================================ */
.fno {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: rgba(18, 10, 36, .97);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    font-size: 11.5px;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(8px) scale(.97);
    transition: opacity .35s ease, transform .35s cubic-bezier(.2, .9, .3, 1.3),
                border-color .3s ease, box-shadow .3s ease;
}
.fno.is-posto { opacity: 1; transform: none; }
.fno.is-aceso {
    border-color: var(--cor);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 3px color-mix(in srgb, var(--cor) 28%, transparent);
}

.fno__cab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border-top: 3px solid var(--cor);
    border-radius: 9px 9px 0 0;
    border-bottom: 1px solid color-mix(in srgb, var(--cor) 26%, var(--borda));
    background: color-mix(in srgb, var(--cor) 16%, transparent);
    color: var(--tinta);
    font-weight: 600;
    font-size: 11.5px;
}
.fno__cab i { color: var(--cor); font-style: normal; font-size: 12px; }
.fno__tipo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fno__corpo {
    padding: 7px 9px;
    color: var(--tinta-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fno__var { color: var(--amarelo-suave); }

.fno__saidas { border-top: 1px solid var(--borda); }
.fno__saida {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding: 4px 11px 4px 9px;
    color: var(--tinta-2);
    font-size: 10.5px;
    white-space: nowrap;
}
.fno__saida + .fno__saida { border-top: 1px dashed rgba(255, 255, 255, .08); }
.fno__saida--alternativa { color: var(--tinta-3); font-style: italic; }

/* Alças nas bordas: a de entrada à esquerda, a de cada saída à direita, na
   altura da linha dela. */
.fno__alca {
    position: absolute;
    width: 9px; height: 9px;
    border: 2px solid var(--cor);
    border-radius: 50%;
    background: var(--fundo-2);
    top: 50%;
}
.fno__alca--entrada { left: -5px; transform: translateY(-50%); }
.fno__alca--saida { right: -5px; transform: translateY(-50%); }
/* A entrada mora no cabeçalho, como no editor: é o topo do cartão que recebe. */
.fno__cab .fno__alca--entrada { top: 50%; }

/* Fantasma do arraste: o cartão que acompanha o ponteiro entre a paleta e o
   canvas. É o gesto que explica "arraste um bloco" sem nenhuma legenda. */
.fantasma {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transform: scale(.94) rotate(-1.5deg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
    transition: opacity .18s ease;
}
.fantasma.is-voando { opacity: .95; }
.fantasma__ponteiro {
    position: absolute;
    right: -6px; bottom: -8px;
    width: 14px; height: 18px;
    color: var(--tinta);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}

/* Alvo onde o bloco vai cair: contorno tracejado, como no editor. */
.solta {
    border: 1.5px dashed color-mix(in srgb, var(--amarelo) 55%, transparent);
    border-radius: 10px;
    background: rgba(255, 197, 0, .05);
    opacity: 0;
    transition: opacity .2s ease;
}
.solta.is-vendo { opacity: 1; }

/* ============================================================
   Seção da demonstração do editor
   ------------------------------------------------------------
   NÃO se chama `.editor`: esse nome já é o cromo do editor falso dentro das
   cenas (`display: grid` de 148px e altura fixa), e a seção herdava aquilo —
   o título ia parar numa coluna de 148px por baixo do palco.
   ============================================================ */
.demo { padding: 96px 0 110px; }
.demo__palco { position: relative; z-index: 1; margin-top: 52px; }

@media (max-width: 980px) {
    /* Curso bem menor no celular. Não é a mesma animação em tela pequena: lá
       a figura fica ATRÁS do texto, a 45% de opacidade, e é atmosfera. Cobrar
       três telas de rolagem por uma atmosfera antes de mostrar qualquer
       conteúdo seria o pior negócio possível numa página de produto. */
    .heroi { min-height: 215vh; }
    .heroi__fixo { padding: 104px 0 60px; }
    /* Uma coluna só: o vão vira altura embaixo do texto, e a figura continua
       atrás de tudo em vez de ao lado. */
    .heroi__grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .heroi__vao { min-height: 260px; }
    .demo { padding: 72px 0 84px; }
    .palco__tela { height: 430px; }
}
@media (max-width: 560px) {
    .no { gap: 7px; padding: 8px; }
    .no__rotulo { font-size: 12px; }
    .palco__tela { height: 400px; }
}

/* ============================================================
   Rodapé
   ============================================================ */
.rodape {
    margin-top: 40px;
    padding: 56px 0 34px;
    border-top: 1px solid var(--borda);
    background: var(--fundo-2);
}
.rodape__grade {
    display: grid;
    /* A coluna da marca é quase o dobro das outras: ela carrega o logotipo, o
       parágrafo e o botão, enquanto as demais só têm listas curtas. */
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
    gap: 40px 34px;
}
.rodape__coluna--marca .botao { margin-top: 18px; }
.rodape__nota {
    margin-top: 16px;
    color: var(--tinta-3);
    font-size: 13px;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   Selos de confiança
   ------------------------------------------------------------
   São o resumo do que separa este produto do vizinho, e ficam no rodapé
   porque é lá que quem já leu a página vai procurar a prova. Por isso cada um
   tem uma segunda linha: "LGPD" sozinho não quer dizer nada, "dados separados
   e exportáveis" quer.
   ------------------------------------------------------------ */
/* `.rodape ul.rodape__selos` e não só a classe: a regra genérica `.rodape ul`
   põe as listas do rodapé em coluna, empata em especificidade e vem depois no
   arquivo — os selos empilhavam um por linha. */
.rodape ul.rodape__selos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 42px 0 0;
    padding: 0;
    list-style: none;
}
.rodape li.rodape__selo {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
}
.rodape__selo-icone { font-size: 21px; color: var(--acento); line-height: 1; flex: 0 0 auto; }
.rodape__selo strong { display: block; color: var(--tinta); font-size: 13.5px; font-weight: 600; }
.rodape__selo small { display: block; color: var(--tinta-3); font-size: 12px; margin-top: 1px; }

@media (max-width: 900px) {
    .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rodape__coluna--marca { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .rodape__grade { grid-template-columns: minmax(0, 1fr); }
}
.rodape__marca img { height: 30px; width: auto; }
.rodape__sobre { margin-top: 14px; max-width: 42ch; color: var(--tinta-3); font-size: 14px; }
.rodape h3 {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: 12px;
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rodape li a { color: var(--tinta-2); font-size: 14.5px; }
.rodape li a:hover { color: var(--tinta); }
.rodape__fim {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--borda);
    color: var(--tinta-3);
    font-size: 13px;
}
@media (max-width: 760px) {
    .rodape__grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ============================================================
   Blocos genéricos de seção
   ============================================================ */
.bloco { padding: 96px 0; overflow: hidden; }
/* O degradê vem EM CIMA do fundo da seção, não no lugar dele. Escrito como
   camada única, ele zerava o `background-color` e as seções com registro claro
   voltavam a mostrar o corpo escuro por baixo. */
.bloco--invertido {
    background:
        linear-gradient(180deg, transparent, var(--fundo-2) 30%, transparent),
        var(--fundo);
}
.bloco__grade {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 60px;
    align-items: center;
}
.bloco--invertido .bloco__grade { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
/* O visual vai para a coluna 1 na seção invertida, alternando o ritmo da página
   sem precisar de duas marcações diferentes. */
.bloco--invertido .bloco__visual { order: -1; }

.lista-checada { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.lista-checada li {
    position: relative;
    padding-left: 30px;
    color: var(--tinta-2);
    font-size: 15px;
}
.lista-checada li::before {
    /* O visto vem da fonte de ícones, e não do caractere Unicode de marca de
       seleção: aquele muda de traço e de peso em cada plataforma. */
    font-family: 'icones-flagy';
    content: '\f272';
    position: absolute;
    left: 0; top: 0;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--acento-veu);
    color: var(--acento);
    font-size: 11px;
    font-weight: 700;
}
.lista-checada strong { color: var(--tinta); }

@media (max-width: 980px) {
    .bloco { padding: 72px 0; }
    .bloco__grade, .bloco--invertido .bloco__grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .bloco--invertido .bloco__visual { order: 0; }
}

/* ============================================================
   Marquise de integrações
   ============================================================ */
.marquise { overflow: hidden; padding: 60px 0 76px; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.marquise__titulo { font-size: 15px; font-weight: 600; color: var(--tinta-3); letter-spacing: .04em; }
.marquise__faixas { display: grid; gap: 14px; margin-top: 30px; }
.marquise__faixa {
    overflow: hidden;
    /* Desvanece nas pontas: sem isto, as pastilhas "aparecem" e "somem" com um
       corte duro na borda da tela. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquise__trilho { display: flex; gap: 14px; width: max-content; }
/* Metade exata do trilho: a segunda cópia da lista ocupa o lugar da primeira e
   a emenda fica invisível. */
.marquise__trilho--esquerda { animation: correrEsq 34s linear infinite; }
.marquise__trilho--direita  { animation: correrDir 40s linear infinite; }
@keyframes correrEsq { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes correrDir { from { transform: translateX(-50%); }  to { transform: translateX(0); } }
.marquise__faixa:hover .marquise__trilho { animation-play-state: paused; }

.pastilha {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 12px 18px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie);
    white-space: nowrap;
}
.pastilha__icone {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: rgba(165, 107, 239, .16);
    font-size: 15px;
}
.pastilha__texto { display: flex; flex-direction: column; line-height: 1.25; }
.pastilha__texto strong { font-size: 14px; font-weight: 600; }
.pastilha__texto small { font-size: 11.5px; color: var(--tinta-3); }
.marquise__nota { margin-top: 26px; color: var(--tinta-3); font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
    .marquise__trilho { animation: none; }
    /* Parado, a segunda cópia seria repetição visível. */
    .marquise__trilho > .pastilha:nth-child(n + 6) { display: none; }
}

/* ============================================================
   Cena guiada pela rolagem
   ============================================================ */
/* `overflow-x: clip`, e NÃO `overflow: hidden`.
   Os dois contêm o brilho que passa da borda, mas `hidden` transforma a seção
   num contêiner de rolagem — e aí o `position: sticky` do filho passa a se
   referir a ela, que nunca rola. O resultado é a cena não grudar e nunca
   trocar. `clip` recorta sem criar contêiner de rolagem. */
.cena { padding: 96px 0 0; overflow-x: clip; }
.cena__cabeca { position: relative; z-index: 1; margin-bottom: 44px; }
.cena__fixo { position: relative; }
/* O grudado tem a altura do PRÓPRIO CONTEÚDO, e o `top` é calculado no JS para
   centralizá-lo na tela.
   Esticá-lo até 100vh parecia resolver e piorava: o cartão ocupava a janela
   inteira mas o conteúdo dentro dele era menor, e a metade vazia era justamente
   o que atravessava a tela na saída da seção — o "espaço gigante" que sobrava
   depois. Com a altura colada no conteúdo, só o conteúdo passa. */
.cena__grade {
    position: sticky;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr);
    gap: 48px;
    align-items: center;
    padding: 0 24px;
}

.cena__passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cena__passo {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: var(--raio);
    border-left: 2px solid transparent;
    color: var(--tinta-3);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.cena__passo.is-ativo {
    background: var(--superficie);
    border-left-color: var(--amarelo);
    color: var(--tinta);
}
.cena__n {
    flex: 0 0 26px;
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border: 1px solid var(--borda-forte);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}
.cena__passo.is-ativo .cena__n { background: var(--amarelo); border-color: var(--amarelo); color: #2E0F58; }
.cena__passo-texto { display: flex; flex-direction: column; gap: 3px; }
.cena__passo-texto strong { font-size: 14.5px; font-weight: 600; }
.cena__passo-texto span { font-size: 13px; color: var(--tinta-3); }
.cena__passo.is-ativo .cena__passo-texto span { color: var(--tinta-2); }

/* O palco preenche a tela fixa em vez de flutuar no meio dela. Com um cartão
   de 556px numa janela de 900, sobravam ~170px vazios em cima e embaixo — e
   eram justamente eles que passavam na saída da seção, parecendo buraco. */
.cena__palco { position: relative; min-height: 560px; }
.cena__quadro {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
}
.cena__quadro.is-ativo { opacity: 1; transform: none; pointer-events: auto; }
.quadro__mock {
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    background: linear-gradient(160deg, rgba(26, 15, 51, .9), rgba(10, 6, 20, .95));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    padding: 22px;
    min-height: 340px;
}
.quadro__texto { margin-top: 24px; }
.quadro__texto h3 { font-size: 22px; margin-bottom: 10px; }
.quadro__texto p { color: var(--tinta-2); font-size: 15px; }
.quadro__nota {
    margin-top: 12px !important;
    padding-left: 14px;
    border-left: 2px solid rgba(255, 197, 0, .4);
    color: var(--tinta-3) !important;
    font-size: 13.5px !important;
}

@media (max-width: 980px) {
    /* Sem "prender": em tela pequena o palco fixo come a altura toda e a pessoa
       rola sem ver nada mudar. Vira uma lista de cenas, na ordem. */
    .cena__grade { position: static; top: auto !important; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 0 24px 60px; }
    .cena__palco { min-height: 0; }
    .cena__quadro { position: static; opacity: 1; transform: none; margin-bottom: 36px; }
    .cena__passos { display: none; }
}

/* ============================================================
   Maquetes dentro das janelas
   ============================================================ */
.mock { display: grid; gap: 10px; }
.mock__linha { display: flex; align-items: center; gap: 10px; }
.mock__balao {
    max-width: 78%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(8px);
    animation: entrarBalao .45s ease forwards;
}
.mock__balao--deles { background: var(--superficie-2); border-bottom-left-radius: 4px; }
.mock__balao--nosso {
    margin-left: auto;
    background: rgba(138, 79, 216, .28);
    border: 1px solid rgba(165, 107, 239, .3);
    border-bottom-right-radius: 4px;
}
.mock__balao--nota {
    margin-left: auto;
    background: rgba(255, 197, 0, .10);
    border: 1px dashed rgba(255, 197, 0, .35);
    color: var(--amarelo-suave);
    font-size: 12.5px;
}
@keyframes entrarBalao { to { opacity: 1; transform: none; } }

.mock__rotulo {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-3);
}
.mock__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie);
    font-size: 12px;
    color: var(--tinta-2);
}
.mock__barra { height: 8px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.mock__barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--roxo-claro), var(--amarelo)); width: 0; transition: width 1.2s ease; }

/* ============================================================
   Maquete do editor
   ============================================================ */
.editor { display: grid; grid-template-columns: 148px minmax(0, 1fr); height: 380px; }
.editor__paleta {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 12px;
    border-right: 1px solid var(--borda);
    background: rgba(255, 255, 255, .02);
    overflow: hidden;
}
/* A paleta de verdade rola; aqui o esmaecido conta isso sem precisar rolar. */
.editor__paleta::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 46px;
    background: linear-gradient(transparent, rgba(10, 6, 20, .95));
    pointer-events: none;
}
.paleta__titulo {
    margin-top: 8px;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-3);
    opacity: 0;
    transition: opacity .4s ease;
}
.paleta__titulo.is-visivel { opacity: 1; }
.paleta__titulo:first-child { margin-top: 0; }

.paleta__item {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 7px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--superficie);
    font-size: 11px;
    color: var(--tinta-2);
    cursor: grab;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .35s ease, transform .35s ease, border-color .2s ease, background-color .2s ease;
}
.paleta__item.is-visivel { opacity: 1; transform: none; }
/* "Pego": o item some de foco enquanto o fantasma dele está voando. */
.paleta__item.is-pego {
    border-color: var(--cor);
    background: color-mix(in srgb, var(--cor) 14%, transparent);
    color: var(--tinta);
}
.paleta__icone {
    display: grid; place-items: center;
    width: 18px; height: 18px; flex: 0 0 18px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--cor) 22%, transparent);
    font-size: 9.5px;
}
.paleta__rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 620px) {
    /* A paleta é contexto; o canvas é a história. Em 390px os dois não cabem,
       e cortar o canvas seria cortar justamente o que se quer mostrar. */
    .editor { grid-template-columns: minmax(0, 1fr); height: 330px; }
    .editor__paleta { display: none; }
}

.editor__canvas {
    position: relative;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(var(--colunas, 3), minmax(0, 1fr));
    grid-template-rows: repeat(var(--linhas, 3), minmax(0, 1fr));
    column-gap: 26px;
    row-gap: 8px;
    align-items: center;
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ============================================================
   Maquete da base de conhecimento
   ============================================================ */
.rag { padding: 18px; display: grid; gap: 12px; min-height: 340px; align-content: start; }
.rag__pergunta {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    background: var(--superficie);
    font-size: 13.5px;
}
.rag__cursor { width: 1.5px; height: 15px; background: var(--amarelo); animation: piscar 1s steps(2) infinite; }
@keyframes piscar { 50% { opacity: 0; } }

.rag__trecho {
    padding: 11px 13px;
    border: 1px solid var(--borda);
    border-left: 3px solid var(--roxo-vivo);
    border-radius: var(--raio-sm);
    background: rgba(255, 255, 255, .03);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s ease, transform .45s ease;
}
.rag__trecho.is-visivel { opacity: 1; transform: none; }
.rag__fonte { display: block; font-size: 11.5px; color: var(--amarelo-suave); margin-bottom: 4px; }
.rag__texto { font-size: 12.5px; color: var(--tinta-2); line-height: 1.5; }

.rag__resposta {
    padding: 13px;
    border: 1px solid rgba(255, 197, 0, .3);
    border-radius: var(--raio);
    background: rgba(255, 197, 0, .07);
    font-size: 13.5px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .5s ease;
}
.rag__resposta.is-visivel { opacity: 1; transform: none; }

/* ============================================================
   Maquete do painel (relatórios)
   ============================================================ */
.painel { padding: 18px; display: grid; gap: 14px; min-height: 340px; align-content: start; }
.painel__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.painel__kpi {
    padding: 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    background: var(--superficie);
}
.painel__kpi b { display: block; font-size: 22px; font-weight: 700; }
.painel__kpi span { font-size: 11.5px; color: var(--tinta-3); }

.painel__grafico { display: flex; align-items: flex-end; gap: 7px; height: 128px; padding-top: 10px; }
.painel__col {
    flex: 1;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, var(--roxo-vivo), rgba(138, 79, 216, .35));
    height: 0;
    transition: height .9s cubic-bezier(.2, .8, .3, 1);
}
.painel__col--destaque { background: linear-gradient(180deg, var(--amarelo), rgba(255, 197, 0, .35)); }

/* ============================================================
   Cartões, regras, em breve, final
   ============================================================ */
.cartoes, .regras__grade {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
    gap: 18px;
    margin-top: 44px;
}
/* São QUATRO regras. Com `auto-fit` a largura escolhia três colunas e deixava
   um cartão órfão na segunda linha. Quatro ou dois — nunca três. */
@media (min-width: 1040px) { .regras__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 620px) and (max-width: 1039.98px) { .regras__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cartao, .regra {
    padding: 26px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
    transition: border-color .2s ease, transform .2s ease;
}
.cartao:hover, .regra:hover { border-color: var(--borda-forte); transform: translateY(-2px); }
.cartao__icone, .regra__icone {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(165, 107, 239, .16);
    color: var(--acento);
    /* Maior que o emoji que estava aqui: o glifo de ícone ocupa menos da
       caixa do caractere e, no mesmo tamanho, lê menor. */
    font-size: 22px;
    margin-bottom: 16px;
}
.regra__icone { background: var(--acento-veu); color: var(--acento); }
.cartao h3, .regra h3 { font-size: 17px; margin-bottom: 9px; }
.cartao p, .regra p { color: var(--tinta-2); font-size: 14.5px; }

.breve { padding-top: 0; }
.breve__caixa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 34px;
    padding: 30px;
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio-lg);
    background: rgba(255, 255, 255, .02);
}
.breve h3 { font-size: 19px; margin-bottom: 8px; }
.breve p { color: var(--tinta-3); font-size: 14px; }
.breve ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; align-content: start; }
.breve li {
    position: relative;
    padding-left: 22px;
    color: var(--tinta-2);
    font-size: 14.5px;
}
.breve li::before {
    content: '';
    position: absolute; left: 4px; top: 9px;
    width: 6px; height: 6px;
    border-radius: 50%;
    border: 1.5px solid var(--tinta-3);
}
@media (max-width: 760px) { .breve__caixa { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

.final { padding: 110px 0 120px; overflow: hidden; }
.final__conteudo { position: relative; z-index: 1; }
.final__botoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }

/* ============================================================
   Grade de blocos do editor
   ============================================================ */
.blocos {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 72px;
    padding-top: 40px;
    border-top: 1px solid var(--borda);
}
.blocos__grupo h3 {
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: 12px;
}
.blocos__grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.blocos__grupo li { display: flex; flex-direction: column; gap: 2px; }
.blocos__grupo strong { font-size: 14px; font-weight: 600; }
.blocos__grupo span { font-size: 12.5px; color: var(--tinta-3); }

/* ============================================================
   No celular — a caixa de entrada dentro de uma moldura
   ------------------------------------------------------------
   A moldura é CSS, não imagem: escala com a tela, acompanha o tema e não pesa
   um único byte de download. E a tela lá dentro não é um desenho genérico de
   telefone — é a mesma lista de conversas do painel, com os mesmos estados,
   porque uma maquete que não bate com o produto só adia a decepção.
   ============================================================ */
.celular-secao .bloco__grade { align-items: center; }
.celular-secao .bloco__visual { display: flex; justify-content: center; }

.celular { position: relative; width: min(300px, 82vw); }

.celular__moldura {
    position: relative;
    padding: 10px;
    border-radius: 42px;
    /* Dois anéis: o metal e a sombra interna do vidro. */
    background: linear-gradient(160deg, #3A3050, #15102A 60%, #241C3D);
    box-shadow:
        0 30px 70px rgba(64, 21, 121, .28),
        0 0 0 1px rgba(255, 255, 255, .10) inset;
}
.celular__entalhe {
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    /* Estreito de propósito: a gravação traz a barra do próprio painel, com o
       logotipo à esquerda e os ícones à direita. Um entalhe largo come o
       logotipo — e entalhe existe para dizer "é um telefone", não para tapar a
       marca. */
    width: 68px; height: 16px;
    border-radius: 0 0 12px 12px;
    background: #15102A;
    z-index: 2;
}
.celular__tela {
    position: relative;
    border-radius: 33px;
    padding: 30px 12px 16px;
    /* A tela guarda o tema ESCURO mesmo em seção clara: é uma foto do produto,
       e o produto tem a pele dele. É também o que faz a maquete saltar. */
    background: linear-gradient(180deg, #1C1135, #120A24);
    color: #F4F1FA;
    overflow: hidden;
}

.celular__topo { display: flex; align-items: baseline; justify-content: space-between; }
.celular__titulo { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.celular__online { font-size: 10.5px; color: #4ADE80; }

.celular__busca {
    margin: 10px 0 12px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    color: #8B82A3;
    font-size: 11px;
}

.celular__lista { display: grid; gap: 8px; }
.celular__item {
    display: flex;
    gap: 9px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
}
/* A conversa nova ganha o filete da marca na borda esquerda — é como o painel
   marca o que chegou agora. */
.celular__item.is-nova {
    border-left: 2px solid var(--amarelo);
    background: rgba(255, 197, 0, .07);
}

.celular__avatar {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
}
.celular__corpo { display: grid; gap: 3px; min-width: 0; flex: 1; }
.celular__linha { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.celular__linha strong { font-size: 12.5px; font-weight: 600; }
.celular__linha small { font-size: 10px; color: #8B82A3; flex: 0 0 auto; }
.celular__previa {
    font-size: 11px;
    color: #BCB3D0;
    /* Uma linha só, como no aplicativo: a prévia é isca, não o conteúdo. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.celular__estado {
    justify-self: start;
    margin-top: 2px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 600;
}
/* Os mesmos pares fundo/tinta dos estados no painel. */
.celular__estado--atendimento { background: #10243F; color: #93C5FD; }
.celular__estado--fluxo       { background: #241A45; color: #C4B5FD; }
.celular__estado--resolvida   { background: #0B2E22; color: #6EE7B7; }
.celular__estado--ia          { background: #3B1029; color: #F9A8D4; }

/* Os balões que flutuam fora da moldura. Ficam com a pele CLARA da seção, e é
   esse contraste com a tela escura que dá a sensação de camada. */
.celular__chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: #fff;
    color: #16092B;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(64, 21, 121, .16);
    animation: flutuar 4.5s ease-in-out infinite;
}
/* Bem para fora: encostados, eles tapavam a busca e a lista — e o que
   interessa na maquete é justamente a lista. */
.celular__chip--alta  { top: 64px;  left: -108px; }
.celular__chip--baixa { bottom: 88px; right: -118px; animation-delay: -2.2s; }
.celular__ponto { width: 7px; height: 7px; border-radius: 50%; background: #12855F; }

@keyframes flutuar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) { .celular__chip { animation: none; } }

/* Abaixo de 1040px a moldura vai para cima do texto e os balões perdem o vão
   lateral — encostados, eles sairiam da tela. */
@media (max-width: 1040px) {
    .celular-secao .bloco__visual { order: -1; }
    .celular__chip--alta  { left: -18px; }
    .celular__chip--baixa { right: -18px; }
}
@media (max-width: 520px) {
    .celular__chip { font-size: 11px; padding: 7px 11px; }
    .celular__chip--alta  { left: -6px; top: 60px; }
    .celular__chip--baixa { right: -6px; bottom: 80px; }
}

/* ============================================================
   Clipes do produto
   ------------------------------------------------------------
   Gravações reais da plataforma (tools/gravar). A proporção vem por variável
   porque o clipe de desktop é 16/10 e o de celular é quase 1/2 — reservar a
   caixa CERTA antes do vídeo chegar é o que impede a página de pular quando
   ele carrega.
   ============================================================ */
.video {
    position: relative;
    aspect-ratio: var(--proporcao, 16 / 10);
    border-radius: var(--raio-lg);
    overflow: hidden;
    background: var(--fundo-3);
}
.video__midia {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dentro da moldura de celular o vídeo É a tela.

   Quem dá a altura é a PROPORÇÃO da tela, não o vídeo: com `height: 100%` num
   pai de altura automática o vídeo colapsa, e sobrava moldura cinza em volta
   de um clipe miúdo no canto. E o preenchimento da tela vai a zero — a
   gravação já traz a barra do próprio painel, então qualquer margem aqui
   seria moldura dentro de moldura. */
.celular__tela:has(.video) {
    padding: 0;
    aspect-ratio: 390 / 844;
}
.celular__tela .video {
    border-radius: 0;
    aspect-ratio: auto;
    height: 100%;
    background: transparent;
}
.celular__tela .video__midia { object-fit: cover; object-position: top center; }

/* O clipe do atendimento ocupa a largura toda antes dos cartões. */
.produto__clipe { margin: 44px auto 0; max-width: 980px; }

/* O botão de atendimento flutua no canto inferior direito (58px + margem). No
   celular ele caía justo sobre as últimas linhas do rodapé — as da razão social
   e a da marca da Meta, que são exatamente as que alguém vai lá procurar. */
@media (max-width: 760px) {
    .rodape { padding-bottom: 110px; }
}