/* ============================================================
   InvestEmpire — Painel de administração
   Tema dark gamer: fundo #0f1020, painéis #1a1b2e,
   acento roxo #7c5cff, dourado #f5c842 (moedas).
   Sem dependências externas (CSP: style-src 'self').
   ============================================================ */

:root {
    --fundo: #0f1020;
    --painel: #1a1b2e;
    --painel-claro: #23243a;
    --painel-borda: #2c2d47;
    --acento: #7c5cff;
    --acento-escuro: #5d42d4;
    --acento-suave: rgba(124, 92, 255, 0.16);
    --dourado: #f5c842;
    --texto: #e8e8f2;
    --texto-suave: #a3a4c2;
    --texto-apagado: #6e6f8e;
    --perigo: #ff5c7a;
    --perigo-escuro: #d43e5b;
    --sucesso: #4cd98a;
    --raio: 12px;
    --raio-mini: 8px;
    --sombra: 0 8px 28px rgba(0, 0, 0, 0.35);
    --largura-sidebar: 230px;
}

* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(124, 92, 255, 0.14), transparent 60%),
        radial-gradient(900px 420px at -10% 110%, rgba(245, 200, 66, 0.06), transparent 60%),
        var(--fundo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--acento);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3 {
    margin: 0 0 0.4rem;
    line-height: 1.25;
}

code, .mono {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    font-size: 0.92em;
}

/* ------------------------------------------------------------
   TOPO (header)
   ------------------------------------------------------------ */
.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 1.25rem;
    background: rgba(26, 27, 46, 0.92);
    border-bottom: 1px solid var(--painel-borda);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(8px);
}

.topo-esq,
.topo-dir {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.marca {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--texto);
    white-space: nowrap;
}

.marca:hover {
    text-decoration: none;
}

.marca-acento,
.texto-acento {
    color: var(--acento);
}

.topo-separador {
    width: 1px;
    height: 22px;
    background: var(--painel-borda);
}

.topo-guild {
    color: var(--texto-suave);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28vw;
}

.topo-link {
    color: var(--texto-suave);
    font-weight: 600;
}

.topo-link:hover {
    color: var(--texto);
    text-decoration: none;
}

.usuario-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--painel-claro);
    border: 1px solid var(--painel-borda);
    border-radius: 999px;
    padding: 0.25rem 0.8rem 0.25rem 0.3rem;
    min-width: 0;
}

.usuario-nome {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.avatar-fallback,
.guild-icone-fallback {
    background: var(--acento-suave);
    color: var(--acento);
    font-weight: 800;
    text-align: center;
}

/* Botão hamburger (mobile) */
.botao-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 8px;
    background: var(--painel-claro);
    border: 1px solid var(--painel-borda);
    border-radius: var(--raio-mini);
    cursor: pointer;
}

.botao-menu-barra {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--texto);
    border-radius: 2px;
}

/* ------------------------------------------------------------
   LEIAUTE (sidebar + conteúdo)
   ------------------------------------------------------------ */
.leiaute {
    display: flex;
    flex: 1;
    min-height: 0;
}

.sidebar {
    width: var(--largura-sidebar);
    flex: none;
    background: var(--painel);
    border-right: 1px solid var(--painel-borda);
    padding: 1rem 0.75rem;
    position: sticky;
    top: 56px;
    align-self: flex-start;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

.sidebar-guild {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem 0.9rem;
    border-bottom: 1px solid var(--painel-borda);
    margin-bottom: 0.75rem;
}

.guild-icone {
    width: 40px;
    height: 40px;
    border-radius: var(--raio-mini);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex: none;
}

.sidebar-guild-nome {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-link {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: var(--raio-mini);
    color: var(--texto-suave);
    font-weight: 600;
    border-left: 3px solid transparent;
}

.sidebar-link:hover {
    background: var(--painel-claro);
    color: var(--texto);
    text-decoration: none;
}

.sidebar-link.ativo {
    background: var(--acento-suave);
    color: var(--texto);
    border-left-color: var(--acento);
}

.conteudo {
    flex: 1;
    min-width: 0;
    padding: 1.5rem clamp(1rem, 3vw, 2.25rem) 3rem;
    max-width: 1200px;
}

.leiaute-sem-sidebar .conteudo {
    margin: 0 auto;
}

/* ------------------------------------------------------------
   RODAPÉ
   ------------------------------------------------------------ */
.rodape {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--painel-borda);
    color: var(--texto-apagado);
    font-size: 0.85rem;
    text-align: center;
}

/* ------------------------------------------------------------
   PAINÉIS E SEÇÕES
   ------------------------------------------------------------ */
.painel {
    background: var(--painel);
    border: 1px solid var(--painel-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

.painel-interno {
    background: var(--painel-claro);
    border: 1px solid var(--painel-borda);
    border-radius: var(--raio);
}

.secao {
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.5rem;
}

.secao-titulo {
    font-size: 1.05rem;
    color: var(--texto);
    margin-bottom: 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--painel-borda);
}

.secao-ajuda {
    color: var(--texto-suave);
    font-size: 0.9rem;
    margin: -0.35rem 0 1rem;
}

.pagina-cabecalho {
    margin-bottom: 1.4rem;
}

.pagina-cabecalho h1 {
    font-size: 1.55rem;
}

.pagina-subtitulo {
    color: var(--texto-suave);
    margin: 0;
}

.vazio {
    padding: 1.6rem 1.8rem;
}

.vazio-texto {
    color: var(--texto-apagado);
    margin: 0.25rem 0;
}

.lista-simples {
    color: var(--texto-suave);
    padding-left: 1.25rem;
}

/* ------------------------------------------------------------
   BOTÕES
   ------------------------------------------------------------ */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: var(--raio-mini);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.botao:hover {
    text-decoration: none;
}

.botao:active {
    transform: translateY(1px);
}

.botao-primario {
    background: var(--acento);
    color: #fff;
}

.botao-primario:hover {
    background: var(--acento-escuro);
}

.botao-secundario {
    background: var(--painel-claro);
    color: var(--texto);
    border-color: var(--painel-borda);
}

.botao-secundario:hover {
    border-color: var(--acento);
}

.botao-perigo {
    background: transparent;
    color: var(--perigo);
    border-color: var(--perigo);
}

.botao-perigo:hover {
    background: var(--perigo);
    color: #fff;
}

.botao-fantasma {
    background: transparent;
    color: var(--texto-suave);
    border-color: var(--painel-borda);
}

.botao-fantasma:hover {
    color: var(--texto);
    border-color: var(--acento);
}

.botao-grande {
    font-size: 1.05rem;
    padding: 0.8rem 1.8rem;
}

.botao-mini {
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.form-inline {
    display: inline-block;
    margin: 0;
}

/* ------------------------------------------------------------
   FORMULÁRIOS
   ------------------------------------------------------------ */
.formulario {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.formulario-linha {
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem 1rem;
    width: 100%;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.campo-largo {
    grid-column: 1 / -1;
}

.campo-rotulo {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.campo input,
.campo select {
    background: var(--fundo);
    border: 1px solid var(--painel-borda);
    border-radius: var(--raio-mini);
    color: var(--texto);
    font: inherit;
    padding: 0.55rem 0.75rem;
    width: 100%;
}

.campo input::placeholder {
    color: var(--texto-apagado);
}

.campo input:focus,
.campo select:focus {
    outline: 2px solid var(--acento);
    outline-offset: 1px;
    border-color: var(--acento);
}

.campo input:invalid:not(:placeholder-shown) {
    border-color: var(--perigo);
}

.fieldset-premios {
    border: 1px solid var(--painel-borda);
    border-radius: var(--raio);
    padding: 0.9rem 1rem 1.1rem;
    margin: 0;
    width: 100%;
}

.grade-premios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.7rem 1.25rem;
}

.linha-premio {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}

.linha-premio-indice {
    color: var(--texto-apagado);
    padding-bottom: 0.6rem;
    width: 1.4rem;
    text-align: right;
    flex: none;
}

.campo-compacto {
    flex: 1;
}

/* ------------------------------------------------------------
   TABELAS
   ------------------------------------------------------------ */
.tabela-envolto {
    overflow-x: auto;
    border-radius: var(--raio-mini);
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}

.tabela th {
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-apagado);
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--painel-borda);
    white-space: nowrap;
}

.tabela td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(44, 45, 71, 0.55);
    vertical-align: middle;
}

.tabela tbody tr:hover {
    background: rgba(124, 92, 255, 0.05);
}

.tabela-compacta th,
.tabela-compacta td {
    padding: 0.35rem 0.6rem;
}

.col-num {
    text-align: right;
    white-space: nowrap;
}

.col-estreita {
    width: 3rem;
}

.col-acoes {
    text-align: right;
    white-space: nowrap;
}

.col-acoes .form-inline {
    margin-left: 0.4rem;
}

.celula-titulo {
    display: block;
    font-weight: 700;
}

.celula-sub {
    display: block;
    color: var(--texto-apagado);
    font-size: 0.84rem;
}

.celula-descricao {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.posicao {
    color: var(--dourado);
    font-weight: 800;
}

/* ------------------------------------------------------------
   BADGES
   ------------------------------------------------------------ */
.badge {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-cargo {
    background: rgba(124, 92, 255, 0.18);
    color: #b3a1ff;
    border-color: rgba(124, 92, 255, 0.45);
}

.badge-gamepass {
    background: rgba(76, 217, 138, 0.14);
    color: var(--sucesso);
    border-color: rgba(76, 217, 138, 0.4);
}

.badge-cosmetico {
    background: rgba(245, 200, 66, 0.12);
    color: var(--dourado);
    border-color: rgba(245, 200, 66, 0.4);
}

.badge-beneficio {
    background: rgba(94, 200, 255, 0.12);
    color: #5ec8ff;
    border-color: rgba(94, 200, 255, 0.4);
}

.badge-tipo {
    background: var(--painel-claro);
    color: var(--texto-suave);
    border-color: var(--painel-borda);
    text-transform: none;
}

.badge-diaria {
    background: rgba(94, 200, 255, 0.12);
    color: #5ec8ff;
    border-color: rgba(94, 200, 255, 0.4);
}

.badge-semanal {
    background: rgba(255, 154, 94, 0.12);
    color: #ff9a5e;
    border-color: rgba(255, 154, 94, 0.4);
}

/* ------------------------------------------------------------
   VALORES (moedas, +/-)
   ------------------------------------------------------------ */
.moedas {
    color: var(--dourado);
    font-weight: 700;
}

.valor-pos {
    color: var(--sucesso);
    font-weight: 700;
}

.valor-neg {
    color: var(--perigo);
    font-weight: 700;
}

/* ------------------------------------------------------------
   ALERTAS
   ------------------------------------------------------------ */
.alerta {
    padding: 0.75rem 1rem;
    border-radius: var(--raio-mini);
    margin-bottom: 1.1rem;
    font-weight: 600;
    border: 1px solid;
    transition: opacity 350ms ease, transform 350ms ease;
}

.alerta-ok {
    background: rgba(76, 217, 138, 0.1);
    border-color: rgba(76, 217, 138, 0.4);
    color: var(--sucesso);
}

.alerta-erro {
    background: rgba(255, 92, 122, 0.1);
    border-color: rgba(255, 92, 122, 0.4);
    color: var(--perigo);
}

.alerta-saindo {
    opacity: 0;
    transform: translateY(-6px);
}

/* ------------------------------------------------------------
   GRADES (stats, guilds, atalhos, lootboxes, colunas)
   ------------------------------------------------------------ */
.grade-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat {
    padding: 1.1rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-rotulo {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-apagado);
    font-weight: 700;
}

.stat-valor {
    font-size: 1.7rem;
    font-weight: 800;
}

.grade-atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.atalho {
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--texto);
    border-left: 3px solid var(--acento);
}

.atalho:hover {
    text-decoration: none;
    background: var(--painel-claro);
}

.atalho-titulo {
    font-weight: 800;
}

.atalho-texto {
    color: var(--texto-apagado);
    font-size: 0.88rem;
}

.grade-guilds {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.cartao-guild {
    transition: border-color 120ms ease, transform 120ms ease;
}

.cartao-guild:hover {
    border-color: var(--acento);
    transform: translateY(-2px);
}

.cartao-guild-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.4rem 1rem 1.2rem;
    color: var(--texto);
    text-align: center;
}

.cartao-guild-link:hover {
    text-decoration: none;
}

.guild-icone-grande {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.cartao-guild-nome {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.cartao-guild-acao {
    color: var(--acento);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.grade-lootboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.cartao-lootbox {
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.cartao-lootbox-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.cartao-lootbox-nome {
    font-size: 1rem;
    margin: 0;
}

.cartao-lootbox-id {
    color: var(--texto-apagado);
}

.grade-duas-colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

/* ------------------------------------------------------------
   EDIÇÃO INLINE (details/summary na loja)
   ------------------------------------------------------------ */
.detalhe-edicao {
    display: inline-block;
    position: relative;
    text-align: left;
}

.detalhe-edicao summary {
    list-style: none;
}

.detalhe-edicao summary::-webkit-details-marker {
    display: none;
}

.detalhe-edicao[open] summary {
    background: var(--acento);
    color: #fff;
    border-color: var(--acento);
}

.formulario-edicao {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    background: var(--painel-claro);
    border: 1px solid var(--acento);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1rem;
    width: 280px;
    gap: 0.7rem;
}

/* ------------------------------------------------------------
   PAGINAÇÃO
   ------------------------------------------------------------ */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.paginacao-atual {
    color: var(--texto-suave);
    font-weight: 700;
}

/* ------------------------------------------------------------
   HERO (landing / erro)
   ------------------------------------------------------------ */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-top: 2.5rem;
}

.hero-cartao {
    padding: 2.4rem 2.6rem;
    text-align: center;
    max-width: 560px;
}

.hero-selo {
    color: var(--acento);
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 0 0 0.4rem;
}

.hero-titulo {
    font-size: 2.3rem;
    margin-bottom: 0.6rem;
}

.hero-texto {
    color: var(--texto-suave);
    margin: 0 0 1.4rem;
}

.hero-nota {
    color: var(--texto-apagado);
    font-size: 0.85rem;
    margin: 1.1rem 0 0;
}

.hero-destaques {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 860px;
}

.destaque {
    padding: 1.1rem 1.3rem;
}

.destaque-titulo {
    font-size: 0.98rem;
    color: var(--dourado);
}

.destaque-texto {
    color: var(--texto-suave);
    font-size: 0.9rem;
    margin: 0;
}

/* ------------------------------------------------------------
   PÁGINA DE ERRO
   ------------------------------------------------------------ */
.painel-erro {
    border-color: rgba(255, 92, 122, 0.35);
}

.erro-codigo {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--perigo);
    margin: 0;
}

.erro-titulo {
    font-size: 1.4rem;
}

.erro-texto {
    color: var(--texto-suave);
}

.erro-acoes {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.2rem;
}

/* ------------------------------------------------------------
   RESPONSIVO (< 900px): sidebar colapsa em gaveta
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .botao-menu {
        display: flex;
    }

    .sidebar {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        height: auto;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 180ms ease;
        box-shadow: var(--sombra);
    }

    .sidebar.aberta {
        transform: translateX(0);
    }

    .topo-guild {
        display: none;
    }

    .usuario-nome {
        display: none;
    }

    .conteudo {
        padding: 1.1rem 0.9rem 2.5rem;
    }

    .secao {
        padding: 1rem;
    }

    .hero-cartao {
        padding: 1.8rem 1.4rem;
    }

    .formulario-edicao {
        position: fixed;
        left: 50%;
        right: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(320px, calc(100vw - 2rem));
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* ============================================================
   LANDING PREMIUM (página de entrada) — classes lp-*
   Hero multi-camada com parallax duplo (scroll-driven CSS +
   mouse via JS), mockup "vídeo sintético" do painel em 3D,
   cards com tilt + glow, passos com linha conectora e CTA.
   CSP style-src 'self': zero inline, zero libs externas.
   Loops de animação usam SÓ transform/opacity (compositor);
   clip-path/blur aparecem apenas na ENTRADA do título (one-shot).
   Fallbacks: @supports p/ scroll-driven, :has() p/ full-bleed,
   prefers-reduced-motion desliga TODAS as animações.
   ============================================================ */

/* Full-bleed: anula o container padrão do painel SOMENTE quando a
   página contém .lp. Sem :has() a landing fica centrada a 1200px
   com padding — degrada com elegância, continua 100% legível. */
.leiaute-sem-sidebar .conteudo:has(.lp) { max-width: none; padding: 0; }
.leiaute-sem-sidebar .conteudo:has(.lp) .alerta {
    width: min(720px, calc(100% - 2rem));
    margin: 1rem auto 0;
}

.lp {
    /* clip não cria scroll container (necessário p/ a view timeline
       olhar o viewport); hidden fica como fallback antigo */
    overflow-x: hidden;
    overflow-x: clip;
}

/* ---- esqueleto comum das seções ---- */
.lp-secao {
    position: relative;
    width: min(1080px, 100%);
    margin: 0 auto;
    padding: clamp(3.2rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem);
}
.lp-secao-cab { max-width: 660px; margin: 0 auto clamp(2rem, 5vw, 3.2rem); text-align: center; }
.lp-secao-tag {
    display: inline-block; margin: 0 0 .9rem; padding: .32rem .95rem;
    border: 1px solid rgba(124, 92, 255, .4); border-radius: 999px;
    background: rgba(124, 92, 255, .1); color: #c9b8ff;
    font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.lp-secao-titulo {
    margin: 0 0 .7rem; color: #f4f2ff; text-wrap: balance;
    font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 800; letter-spacing: -.015em;
}
.lp-secao-sub { max-width: 560px; margin: 0 auto; color: var(--texto-suave); font-size: 1.02rem; line-height: 1.65; }

/* seções abaixo da dobra: o browser pula o render até chegar perto */
.lp-feat-secao, .lp-como, .lp-cta-final { content-visibility: auto; contain-intrinsic-size: auto 640px; }

/* ============================================================
   HERO — fundo em 3 camadas com parallax duplo
   .lp-camada [data-par]          -> parallax de SCROLL
   .lp-prof   [data-profundidade] -> parallax de MOUSE (JS)
   ============================================================ */
.lp-heroi {
    position: relative;
    min-height: calc(100vh - 130px);
    min-height: calc(100svh - 130px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: clamp(3rem, 8vh, 5rem) 1.25rem 4.5rem;
    isolation: isolate;
}

.lp-fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lp-camada, .lp-prof { position: absolute; inset: -10%; } /* sobra p/ o parallax não expor borda */
.lp-prof { will-change: transform; }

.lp-orbe {
    position: absolute; border-radius: 50%; opacity: .55;
    filter: blur(90px); /* estático: pinta uma vez, sem custo por frame */
    animation: lp-flutuar 14s ease-in-out infinite alternate;
}
.lp-orbe-1 { width: 480px; height: 480px; top: -90px; left: -90px;
    background: radial-gradient(circle, rgba(124, 92, 255, .55), transparent 70%); }
.lp-orbe-2 { width: 430px; height: 430px; bottom: -120px; right: -70px;
    background: radial-gradient(circle, rgba(245, 200, 66, .26), transparent 70%);
    animation-delay: -5s; animation-duration: 17s; }
.lp-orbe-3 { width: 340px; height: 340px; top: 32%; left: 56%;
    background: radial-gradient(circle, rgba(92, 160, 255, .3), transparent 70%);
    animation-delay: -9s; animation-duration: 20s; }
@keyframes lp-flutuar {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(40px, -46px, 0) scale(1.1); }
}

.lp-grade {
    background-image:
        linear-gradient(rgba(124, 92, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 92, 255, .07) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 30%, transparent 75%);
}

/* moedas + partículas subindo (decorativas, somem em reduced-motion) */
.lp-moeda {
    position: absolute; bottom: -6%; font-size: 1.4rem; opacity: 0;
    animation: lp-subir linear infinite;
    text-shadow: 0 0 18px rgba(245, 200, 66, .8);
}
.lp-moeda-1 { left: 8%;  animation-duration: 16s; animation-delay: 0s;  font-size: 1.1rem; }
.lp-moeda-2 { left: 22%; animation-duration: 21s; animation-delay: 4s;  font-size: 1.6rem; }
.lp-moeda-3 { left: 47%; animation-duration: 18s; animation-delay: 9s;  font-size: 1rem; }
.lp-moeda-4 { left: 66%; animation-duration: 23s; animation-delay: 2s;  font-size: 1.4rem; }
.lp-moeda-5 { left: 81%; animation-duration: 17s; animation-delay: 12s; font-size: 1.2rem; }
.lp-moeda-6 { left: 92%; animation-duration: 25s; animation-delay: 6s;  font-size: 1.7rem; }

.lp-particula {
    position: absolute; bottom: -4%; width: 5px; height: 5px; border-radius: 50%;
    background: #a98fff; box-shadow: 0 0 12px 2px rgba(124, 92, 255, .75);
    opacity: 0; animation: lp-subir linear infinite;
}
.lp-particula-1 { left: 14%; animation-duration: 13s; animation-delay: 1s; }
.lp-particula-2 { left: 33%; animation-duration: 19s; animation-delay: 7s; width: 3px; height: 3px; }
.lp-particula-3 { left: 58%; animation-duration: 15s; animation-delay: 3s; }
.lp-particula-4 { left: 74%; animation-duration: 22s; animation-delay: 10s; width: 4px; height: 4px;
    background: #ffd966; box-shadow: 0 0 12px 2px rgba(245, 200, 66, .7); }
.lp-particula-5 { left: 88%; animation-duration: 17s; animation-delay: 5s; width: 3px; height: 3px; }

@keyframes lp-subir {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    8%   { opacity: .55; }
    85%  { opacity: .35; }
    100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}

/* ---- conteúdo do herói ---- */
.lp-hero { text-align: center; max-width: 780px; }

.lp-selo {
    display: inline-flex; align-items: center; gap: .55rem; padding: .45rem 1.1rem;
    border: 1px solid rgba(124, 92, 255, .45); border-radius: 999px;
    background: rgba(124, 92, 255, .12); color: #c9b8ff;
    font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.lp-selo-ponto { width: 8px; height: 8px; border-radius: 50%; background: #8f6fff; color: #8f6fff; }

/* anel "ping" genérico — só transform/opacity */
.lp-ping { position: relative; }
.lp-ping::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid currentColor; opacity: 0;
    animation: lp-ping 2s cubic-bezier(.2, .7, .4, 1) infinite;
}
@keyframes lp-ping {
    0%        { transform: scale(.5); opacity: .85; }
    80%, 100% { transform: scale(2.1); opacity: 0; }
}

.lp-titulo {
    margin: 1.3rem 0 1.1rem; color: #f4f2ff;
    font-size: clamp(2.7rem, 9vw, 5.4rem); font-weight: 800;
    line-height: 1.04; letter-spacing: -.02em;
    text-shadow: 0 8px 40px rgba(124, 92, 255, .35);
}

/* entrada do título: clip-path + blur-in + letter-spacing (one-shot) */
.lp-palavra { display: inline-block; animation: lp-revelar-palavra .95s cubic-bezier(.2, .75, .25, 1) backwards; }
@keyframes lp-revelar-palavra {
    from { opacity: 0; transform: translateY(.35em); filter: blur(12px);
           letter-spacing: .12em; clip-path: inset(0 0 100% 0); }
    60%  { clip-path: inset(-15% -8% -15% -8%); }
    to   { opacity: 1; transform: none; filter: blur(0);
           letter-spacing: -.02em; clip-path: inset(-15% -8% -15% -8%); }
}

/* gradiente animado com fallback: sem background-clip o "Empire"
   fica dourado sólido (nunca invisível) */
.lp-titulo-grad { color: var(--dourado); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .lp-titulo-grad {
        background: linear-gradient(120deg, #8f6fff, #c79bff, #f5c842, #8f6fff);
        background-size: 300% 100%;
        -webkit-background-clip: text; background-clip: text; color: transparent;
        animation: lp-gradiente 7s ease infinite;
    }
    .lp-palavra.lp-titulo-grad {
        animation: lp-revelar-palavra .95s cubic-bezier(.2, .75, .25, 1) backwards,
                   lp-gradiente 7s ease infinite;
    }
}
@keyframes lp-gradiente {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.lp-sub { max-width: 600px; margin: 0 auto; color: #b7b4cf; font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.65; }

/* ---- botão principal (touch target >= 44px) ---- */
.lp-acoes { margin-top: 2.2rem; }
.lp-botao {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
    min-height: 52px; padding: 1rem 2.4rem; border-radius: 14px;
    background: linear-gradient(135deg, #7c5cff, #5a3fd4);
    color: #fff; font-size: 1.08rem; font-weight: 700; text-decoration: none;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(124, 92, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .25s ease, box-shadow .25s ease;
}
.lp-botao:hover {
    text-decoration: none;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 44px rgba(124, 92, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.lp-botao:active { transform: translateY(-1px) scale(.99); }
.lp-botao:focus-visible { outline: 3px solid rgba(245, 200, 66, .85); outline-offset: 3px; }
.lp-botao-icone { width: 1.35em; height: 1.35em; flex: none; }
.lp-botao-brilho {
    position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: translateX(0) skewX(-20deg);
    animation: lp-brilho 3.6s ease-in-out infinite;
}
@keyframes lp-brilho {
    0%, 55%   { transform: translateX(0) skewX(-20deg); }
    75%, 100% { transform: translateX(360%) skewX(-20deg); }
}

.lp-nota { margin-top: 1.6rem; color: #8d8aa8; font-size: .88rem; }

.lp-stats {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 1.6rem; margin: 2.4rem auto 0; padding: 0; list-style: none;
}
.lp-stats li { display: flex; flex-direction: column; gap: .15rem; }
.lp-stats strong { font-size: 1.7rem; font-weight: 800; color: var(--dourado); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .lp-stats strong {
        background: linear-gradient(120deg, #f5c842, #ffe9a8);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
}
.lp-stats span { color: #8d8aa8; font-size: .8rem; letter-spacing: .04em; }
.lp-stat-sep { width: 1px; height: 34px; background: rgba(255, 255, 255, .12); }

/* dica de scroll (mouse desenhado em CSS) */
.lp-rolar {
    position: absolute; bottom: 1.3rem; left: 50%;
    width: 26px; height: 42px; margin-left: -13px;
    border: 2px solid rgba(255, 255, 255, .25); border-radius: 999px;
}
.lp-rolar::before {
    content: ""; position: absolute; top: 7px; left: 50%;
    width: 4px; height: 9px; margin-left: -2px; border-radius: 2px;
    background: var(--dourado);
    animation: lp-rolar-ponto 1.8s ease-in-out infinite;
}
@keyframes lp-rolar-ponto {
    0%        { transform: translateY(0); opacity: 1; }
    70%, 100% { transform: translateY(14px); opacity: 0; }
}

/* ============================================================
   MOCKUP — "vídeo sintético" do painel (janela de navegador
   desenhada em CSS com gráfico, contador e transações vivas).
   Entra deitado em 3D e endireita no scroll (scroll-driven;
   fallback JS; sem os dois, fica reto = estático e correto).
   ============================================================ */
.lp-mock-cena { position: relative; width: min(880px, 100%); margin: 0 auto; perspective: 1200px; }
.lp-mock {
    position: relative; border: 1px solid rgba(124, 92, 255, .28); border-radius: 18px;
    background: linear-gradient(170deg, #191a30, #131426 60%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
    transform-style: preserve-3d;
    will-change: transform;
}
.lp-mock-reflexo {
    position: absolute; inset: auto 8% -36px 8%; height: 60px;
    background: radial-gradient(50% 100% at 50% 0, rgba(124, 92, 255, .35), transparent 70%);
    filter: blur(18px); /* estático */
    pointer-events: none;
}

/* barra do navegador: 3 bolinhas + url + selo "ao vivo" */
.lp-mock-barra {
    display: flex; align-items: center; gap: .45rem;
    padding: .65rem .9rem; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.lp-mock-bola { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.lp-mock-bola-r { background: #ff5f57; }
.lp-mock-bola-a { background: #febc2e; }
.lp-mock-bola-v { background: #28c840; }
.lp-mock-url {
    flex: 1; max-width: 330px; margin: 0 auto; padding: .28rem .9rem;
    border-radius: 999px; background: rgba(255, 255, 255, .06);
    color: #8f8cab; font-size: .72rem; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-mock-aovivo {
    display: inline-flex; align-items: center; gap: .45rem; color: #7ee2a8;
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.lp-mock-aovivo-ponto { width: 7px; height: 7px; border-radius: 50%; background: #4cd98a; color: #4cd98a; }

/* corpo: sidebar + área principal */
.lp-mock-corpo { display: grid; grid-template-columns: 150px 1fr; min-height: 330px; }
.lp-mock-sidebar {
    display: flex; flex-direction: column; gap: .55rem;
    padding: .9rem .7rem; border-right: 1px solid rgba(255, 255, 255, .06);
}
.lp-mock-marca {
    display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: .4rem;
    border-radius: 9px; background: linear-gradient(135deg, var(--acento), #5a3fd4);
    color: #fff; font-size: .7rem; font-weight: 800;
}
.lp-mock-nav { position: relative; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
.lp-mock-nav::before {
    content: ""; position: absolute; top: 8px; left: 8px;
    width: 10px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .14);
}
.lp-mock-nav::after {
    content: ""; position: absolute; top: 10px; left: 26px; right: 18px;
    height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12);
}
.lp-mock-nav-ativo { background: rgba(124, 92, 255, .22); box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .5); }

.lp-mock-main { display: flex; flex-direction: column; gap: .8rem; padding: .95rem; min-width: 0; }
.lp-mock-cards { display: grid; grid-template-columns: 1fr 1.4fr; gap: .8rem; }
.lp-mock-card {
    display: flex; flex-direction: column; gap: .45rem; padding: .85rem .95rem;
    border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}
.lp-mock-rotulo { color: #8f8cab; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.lp-mock-num { color: var(--dourado); font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-mock-badge {
    align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem;
    padding: .18rem .6rem; border: 1px solid rgba(76, 217, 138, .35); border-radius: 999px;
    background: rgba(76, 217, 138, .14); color: #7ee2a8; font-size: .7rem; font-weight: 700;
    animation: lp-badge 2.6s ease-in-out infinite; /* pulso: só transform */
}
@keyframes lp-badge {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}

/* gráfico de barras "equalizador" — scaleY no compositor */
.lp-mock-grafico { display: flex; align-items: flex-end; gap: 6%; height: 78px; }
.lp-mock-barrag {
    flex: 1; border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #9a7bff, #5d42d4);
    transform-origin: bottom;
    animation: lp-eq 2.6s ease-in-out infinite alternate;
}
.lp-mock-b1 { height: 38%; animation-delay: 0s; }
.lp-mock-b2 { height: 58%; animation-delay: -.5s; }
.lp-mock-b3 { height: 44%; animation-delay: -1.1s; }
.lp-mock-b4 { height: 72%; animation-delay: -1.6s; }
.lp-mock-b5 { height: 55%; animation-delay: -.8s; }
.lp-mock-b6 { height: 92%; animation-delay: -2s;
    background: linear-gradient(180deg, #ffe9a8, #f5c842); } /* melhor dia = dourado */
.lp-mock-b7 { height: 64%; animation-delay: -1.3s; }
@keyframes lp-eq {
    from { transform: scaleY(.5); }
    to   { transform: scaleY(1); }
}

/* transações chegando em loop (opacity + translateX) */
.lp-mock-lista { display: flex; flex-direction: column; gap: .55rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.lp-mock-tx { display: flex; align-items: center; gap: .6rem; animation: lp-tx 9s ease-in-out infinite both; }
.lp-mock-tx-1 { animation-delay: .2s; }
.lp-mock-tx-2 { animation-delay: .9s; }
.lp-mock-tx-3 { animation-delay: 1.6s; }
.lp-mock-tx-4 { animation-delay: 2.3s; }
.lp-mock-ava { width: 22px; height: 22px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #8f6fff, #4a3796); }
.lp-mock-tx-2 .lp-mock-ava { background: linear-gradient(135deg, #f5c842, #b9821e); }
.lp-mock-tx-3 .lp-mock-ava { background: linear-gradient(135deg, #5cc88c, #2c7a51); }
.lp-mock-tx-4 .lp-mock-ava { background: linear-gradient(135deg, #5ca0ff, #2f5fb0); }
.lp-mock-tx-linha { flex: 1; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.lp-mock-tx-2 .lp-mock-tx-linha { max-width: 62%; }
.lp-mock-tx-4 .lp-mock-tx-linha { max-width: 74%; }
.lp-mock-tx-valor { font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-mock-mais  { color: #7ee2a8; }
.lp-mock-menos { color: #ff8da1; }
@keyframes lp-tx {
    0%        { opacity: 0; transform: translateX(-12px); }
    5%, 82%   { opacity: 1; transform: none; }
    90%, 100% { opacity: 0; transform: translateX(10px); }
}

/* ============================================================
   FEATURES — cards com tilt 3D (JS) + glow que segue o cursor
   via --mx/--my (custom properties setadas pelo JS)
   ============================================================ */
.lp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.lp-card {
    --mx: 50%;
    --my: -20%;
    position: relative; padding: 1.7rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px;
    background: linear-gradient(165deg, rgba(34, 33, 58, .85), rgba(22, 21, 40, .92));
    transform-style: preserve-3d;
}
.lp-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(380px circle at var(--mx) var(--my), rgba(124, 92, 255, .25), transparent 65%);
    opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.lp-card:hover { border-color: rgba(124, 92, 255, .5); }
.lp-card:hover::before { opacity: 1; }

/* transição longa em repouso; curtíssima enquanto o mouse guia.
   Especificidade alta de propósito: os cards também são .lp-revelar
   e a transição do reveal (.lp-js .lp-revelar) não pode "amolecer"
   o tilt nem atrasá-lo com o transition-delay do stagger. */
.lp.lp-js .lp-features .lp-card.lp-tilt {
    transition: transform .55s cubic-bezier(.22, .8, .3, 1), border-color .3s ease, opacity .8s ease;
}
.lp.lp-js .lp-features .lp-card.lp-tilt-ativo {
    transition: transform .06s linear, border-color .3s ease, opacity .8s ease;
    transition-delay: 0s;
}
.lp-card-conteudo { transform: translateZ(26px); } /* profundidade no tilt */

.lp-card-icone {
    display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem;
    border: 1px solid rgba(124, 92, 255, .35); border-radius: 13px;
    background: rgba(124, 92, 255, .14); box-shadow: inset 0 0 18px rgba(124, 92, 255, .15);
    font-size: 1.5rem;
}
.lp-icone-loja     { background: rgba(245, 200, 66, .12); border-color: rgba(245, 200, 66, .4); }
.lp-icone-economia { background: rgba(92, 200, 140, .12); border-color: rgba(92, 200, 140, .4); }
.lp-card-titulo { margin: 0 0 .5rem; font-size: 1.05rem; color: #efedff; }
.lp-card-texto  { margin: 0; color: #a7a4c2; font-size: .92rem; line-height: 1.6; }

/* ============================================================
   COMO FUNCIONA — 3 passos com linha conectora que se desenha
   ============================================================ */
.lp-passos { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.lp-passos::before {
    content: ""; position: absolute; top: 26px; left: 14%; right: 14%;
    height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--acento), var(--dourado));
    transform-origin: left center;
}
.lp-passo { position: relative; padding: 0 .8rem; text-align: center; }
.lp-passo-num {
    position: relative; z-index: 1;
    display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: .9rem;
    border: 1px solid rgba(124, 92, 255, .55); border-radius: 50%;
    background: linear-gradient(160deg, #26244a, #16152c);
    box-shadow: 0 0 24px rgba(124, 92, 255, .25);
    color: #cdbfff; font-size: 1.15rem; font-weight: 800;
}
.lp-passo-titulo { margin: .2rem 0 .45rem; font-size: 1.06rem; color: #efedff; }
.lp-passo-texto { max-width: 280px; margin: 0 auto; color: var(--texto-suave); font-size: .92rem; line-height: 1.6; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.lp-cta-final { padding-bottom: clamp(4rem, 8vw, 6rem); }
.lp-cta-cartao {
    position: relative; overflow: hidden; text-align: center;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
    border: 1px solid rgba(124, 92, 255, .35); border-radius: 24px;
    background: linear-gradient(160deg, rgba(124, 92, 255, .16), rgba(20, 19, 38, .9) 55%), #15142a;
}
.lp-cta-cartao::before {
    content: ""; position: absolute; top: -120px; left: 50%;
    width: 420px; height: 240px; transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(245, 200, 66, .18), transparent 70%);
    pointer-events: none;
}
.lp-cta-titulo { margin: 0 0 .6rem; color: #f4f2ff; font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: 800; text-wrap: balance; }
.lp-cta-sub { max-width: 520px; margin: 0 auto 1.8rem; color: var(--texto-suave); line-height: 1.6; }
.lp-cta-mini { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center; margin: 1.5rem 0 0; color: #8d8aa8; font-size: .85rem; }

/* ============================================================
   ENTRADA EM CASCATA (herói) + REVEAL NO SCROLL
   ============================================================ */
.lp-anim { animation: lp-surgir .8s cubic-bezier(.22, .8, .3, 1) backwards; }
.lp-d1 { animation-delay: .05s; }
.lp-d2 { animation-delay: .18s; }
.lp-d3 { animation-delay: .34s; }
.lp-d4 { animation-delay: .5s; }
.lp-d5 { animation-delay: .64s; }
.lp-d6 { animation-delay: .78s; }
.lp-d7 { animation-delay: .92s; }
.lp-d8 { animation-delay: 1.3s; }
@keyframes lp-surgir {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

/* .lp-revelar só fica escondido quando o JS está presente (classe
   .lp-js no container) — sem JS a página nasce inteira visível */
.lp-js .lp-revelar {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, .8, .3, 1);
}
.lp-js .lp-revelar.lp-visivel { opacity: 1; transform: none; }
.lp-js .lp-features .lp-revelar:nth-child(2) { transition-delay: .12s; }
.lp-js .lp-features .lp-revelar:nth-child(3) { transition-delay: .24s; }
.lp-js .lp-passos .lp-revelar:nth-child(2) { transition-delay: .15s; }
.lp-js .lp-passos .lp-revelar:nth-child(3) { transition-delay: .3s; }

/* linha conectora: desenha quando os passos entram em cena (fallback
   por classe; com scroll-driven a animação abaixo assume o controle) */
.lp-js .lp-passos::before { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.65, .05, .35, 1) .2s; }
.lp-js .lp-passos.lp-visivel::before { transform: scaleX(1); }

/* ============================================================
   SCROLL-DRIVEN ANIMATIONS (progressive enhancement)
   Browsers com animation-timeline ganham parallax de scroll em
   3 velocidades no fundo, o mockup endireitando e a linha dos
   passos se desenhando — dirigidos pela rolagem, sem JS.
   ============================================================ */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .lp-camada-orbes { animation: lp-par-suave linear both; animation-timeline: scroll(); animation-range: 0 110vh; }
        .lp-camada-grade { animation: lp-par-media linear both; animation-timeline: scroll(); animation-range: 0 110vh; }
        .lp-camada-part  { animation: lp-par-forte linear both; animation-timeline: scroll(); animation-range: 0 110vh; }
        .lp-mock { animation: lp-endireitar linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
        .lp-passos::before { animation: lp-tracar-x linear both; animation-timeline: view(); animation-range: entry 25% cover 65%; }
        @media (max-width: 760px) {
            .lp-passos::before { animation-name: lp-tracar-y; }
        }
    }
}
@keyframes lp-par-suave { to { transform: translateY(-70px); } }
@keyframes lp-par-media { to { transform: translateY(-120px); } }
@keyframes lp-par-forte { to { transform: translateY(-190px); } }
@keyframes lp-endireitar {
    from { opacity: .45; transform: rotateX(16deg) scale(.94); }
    to   { opacity: 1; transform: rotateX(0deg) scale(1); }
}
@keyframes lp-tracar-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lp-tracar-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ============================================================
   RESPONSIVO — pensado em 360 / 640 / 760 / 900 / 1440
   ============================================================ */
@media (max-width: 900px) {
    .lp-features { grid-template-columns: 1fr; width: min(480px, 100%); margin: 0 auto; }
}
@media (max-width: 760px) {
    /* timeline à esquerda: a linha atravessa só a coluna dos números,
       nunca o texto dos passos */
    .lp-passos { grid-template-columns: 1fr; gap: 1.6rem; width: min(440px, 100%); margin: 0 auto; }
    .lp-passos::before {
        top: 26px; bottom: 70px; left: 26px; right: auto;
        width: 2px; height: auto; margin-left: -1px;
        background: linear-gradient(180deg, var(--acento), var(--dourado) 80%, transparent);
        transform-origin: top center;
    }
    .lp-passo {
        display: grid;
        grid-template-columns: 52px 1fr;
        column-gap: 1.1rem;
        align-items: start;
        padding: 0;
        text-align: left;
    }
    .lp-passo-num { grid-row: 1 / span 2; margin-bottom: 0; }
    .lp-passo-titulo { margin-top: .6rem; }
    .lp-passo-texto { margin: 0; max-width: none; }
    .lp-js .lp-passos::before { transform: scaleY(0); }
    .lp-js .lp-passos.lp-visivel::before { transform: scaleY(1); }
}
@media (max-width: 640px) {
    .lp-heroi { padding-bottom: 5rem; }
    .lp-mock-corpo { grid-template-columns: 50px 1fr; min-height: 0; }
    .lp-mock-nav::after { display: none; }
    .lp-mock-url { display: none; }
    .lp-mock-cards { grid-template-columns: 1fr; }
    .lp-stats .lp-stat-sep { display: none; } /* vence .lp-stats li */
    .lp-stats { gap: 1.1rem 1.6rem; }
}

/* ============================================================
   ACESSIBILIDADE — reduced-motion desliga TUDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .lp *,
    .lp *::before,
    .lp *::after {
        animation: none !important;
        transition: none !important;
    }
    .lp-moeda, .lp-particula, .lp-rolar { display: none !important; }
    .lp-revelar { opacity: 1 !important; transform: none !important; }
    .lp-passos::before { transform: none !important; }
}

/* ============================================================
   SELETOR DE IDIOMA (i18n PT/EN) — regras ADICIONADAS ao final;
   nenhuma regra anterior foi alterada.
   ============================================================ */
.seletor-idioma {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

.idioma-link {
    color: var(--texto-suave);
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.idioma-link:hover {
    color: var(--texto);
    text-decoration: none;
}

.idioma-link.idioma-ativo {
    color: var(--texto);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px var(--painel-borda);
    cursor: default;
}

.idioma-sep {
    color: var(--painel-borda);
    user-select: none;
}

/* ============================================================
   BADGE DINAMICA DE ALCANCE (landing) — regras NOVAS, apenas
   adicionadas ao final; nada acima foi alterado.
   ============================================================ */
.lp-stats strong.lp-stat-destaque { font-size: 2rem; letter-spacing: -.01em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .lp-stats strong.lp-stat-destaque {
        background: linear-gradient(120deg, #ffd75e, #f5c842 55%, #fff3c4);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }
}