/* =========================================================================
   LANDING — CAMADA DE POLIMENTO
   -------------------------------------------------------------------------
   Carregado DEPOIS de landing-sistemas.css, só pra acrescentar movimento e
   resposta ao toque/hover. Não redefine paleta, tipografia nem layout — se
   este arquivo sair do enqueue, a landing volta exatamente ao que era.

   Regras da casa aqui:
   - tudo escopado em #lp (ou no próprio elemento fixo) pra não vazar;
   - nada que altere posição de conteúdo ao carregar (evita layout shift);
   - tudo desligável por prefers-reduced-motion, no fim do arquivo.
   ========================================================================= */

/* =========================================================
   1. REVELAÇÃO NO SCROLL
   O JS (landing-sistema.js) marca <html class="lp-js"> e vai pondo
   .is-visivel nos elementos conforme entram na tela. Sem JS, nada fica
   escondido — por isso o estado inicial depende da classe .lp-js.
   ========================================================= */
.lp-js #lp [data-revelar] {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .7s cubic-bezier(.16, 1, .3, 1),
        transform .7s cubic-bezier(.16, 1, .3, 1);
    /* Avisa o navegador antes da animação começar, pra ele promover a camada
       e o texto não "tremer" no meio do movimento. */
    will-change: opacity, transform;
}
.lp-js #lp [data-revelar].is-visivel {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Variações de direção, pra a página não revelar tudo do mesmo jeito. */
.lp-js #lp [data-revelar="esquerda"] { transform: translateX(-28px); }
.lp-js #lp [data-revelar="direita"]  { transform: translateX(28px); }
.lp-js #lp [data-revelar="zoom"]     { transform: scale(.96); }

/* Entrada em cascata: cada filho sai um pouquinho depois do anterior.
   Vai até 8 — acima disso a espera ficaria perceptível demais. */
.lp-js #lp [data-revelar][style*="--atraso"] { transition-delay: var(--atraso); }

/* =========================================================
   2. HOVER DOS CARDS
   A elevação já existia em alguns cards; aqui ela fica consistente e ganha
   um brilho que atravessa o card no hover (só no dispositivo que TEM hover —
   no celular isso viraria um flash no toque).
   ========================================================= */
@media (hover: hover) and (pointer: fine) {

    #lp .mod-card,
    #lp .bf-card,
    #lp .persona-card,
    #lp .dep-card,
    #lp .cf-card {
        transition:
            transform .32s cubic-bezier(.16, 1, .3, 1),
            box-shadow .32s cubic-bezier(.16, 1, .3, 1),
            border-color .32s ease;
    }

    #lp .mod-card:hover,
    #lp .bf-card:hover,
    #lp .persona-card:hover,
    #lp .dep-card:hover,
    #lp .cf-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 48px rgba(17, 22, 27, .12);
        border-color: rgba(201, 122, 46, .34);
    }

    /* Ícone dos cards menores acompanha o movimento. */
    #lp .bf-card .bf-ico,
    #lp .persona-card .persona-ico,
    #lp .cf-card .cf-num {
        transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
    }
    #lp .bf-card:hover .bf-ico,
    #lp .persona-card:hover .persona-ico,
    #lp .cf-card:hover .cf-num {
        transform: scale(1.1);
    }

    /* Brilho diagonal que cruza o card. overflow/isolation ficam no :hover
       pra não cortar selos posicionados fora do card no estado normal. */
    #lp .mod-card { position: relative; }
    #lp .mod-card::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
        background-size: 280% 100%;
        background-position: 100% 0;
        transition: opacity .2s ease;
    }
    #lp .mod-card:hover::after {
        opacity: 1;
        animation: lpBrilho .85s cubic-bezier(.16, 1, .3, 1);
    }

    /* Ícone do card responde junto com o card. */
    #lp .mod-card .mc-ico {
        transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .32s ease;
    }
    #lp .mod-card:hover .mc-ico {
        transform: translateY(-2px) rotate(-6deg) scale(1.08);
    }

    /* A imagem do print ganha um leve zoom dentro da moldura. */
    #lp .mod-card .mockup,
    #lp .mod-card .mockup img {
        transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    }
    #lp .mod-card:hover .mockup img { transform: scale(1.045); }

    /* Linhas do comparativo e do FAQ: fundo sutil ao passar o mouse, pra
       dar a sensação de linha "viva" em tabela longa. */
    #lp .comp-tabela tbody tr,
    #lp .faq-item {
        transition: background-color .22s ease;
    }
    #lp .comp-tabela tbody tr:hover { background-color: rgba(201, 122, 46, .05); }
    #lp .faq-item:hover { background-color: rgba(30, 110, 82, .035); }
}

@keyframes lpBrilho {
    from { background-position: 100% 0; }
    to   { background-position: -60% 0; }
}

/* =========================================================
   3. BOTÕES
   Feedback de pressão (o botão "afunda" no clique) — é o detalhe que mais
   faz uma página parecer aplicativo, e vale inclusive no celular.
   ========================================================= */
#lp .btn-p,
#lp .btn-s,
#lp .btn-add,
#lp .btn-testar-gratis,
.lp-back-to-top {
    transition:
        transform .16s cubic-bezier(.16, 1, .3, 1),
        box-shadow .22s ease,
        background-color .22s ease,
        color .22s ease,
        border-color .22s ease;
}
#lp .btn-p:active,
#lp .btn-s:active,
#lp .btn-add:active,
#lp .btn-testar-gratis:active {
    transform: translateY(1px) scale(.985);
}

/* Anel de foco visível pra quem navega por teclado — não existia. */
#lp a:focus-visible,
#lp button:focus-visible,
.lp-back-to-top:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(201, 122, 46, .45);
    border-radius: 10px;
}

/* =========================================================
   4. BOTÃO "VOLTAR AO TOPO"
   O botão já existia (footer-lp-sistema.php), mas com dois defeitos:
   a) no hover ele pintava o texto de branco SEM trocar o fundo branco —
      a seta sumia;
   b) z-index 999, abaixo da barra fixa de conversão (9997) e do carrinho
      (9998); no mobile, onde ele fica em bottom:24px, a barra passava por
      cima e ele nunca aparecia.
   ========================================================= */
.lp-back-to-top {
    /* Acima da barra fixa e do carrinho. */
    z-index: 9999;
}
.lp-back-to-top:hover {
    background: var(--lp-dark, #11161B);
    border-color: var(--lp-dark, #11161B);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(17, 22, 27, .22);
}
.lp-back-to-top:active { transform: translateY(-1px) scale(.96); }
.lp-back-to-top i { transition: transform .22s cubic-bezier(.34, 1.56, .64, 1); }
.lp-back-to-top:hover i { transform: translateY(-2px); }

/* Entra subindo em vez de só aparecer. */
.lp-back-to-top { transform: translateY(10px) scale(.9); }
.lp-back-to-top.show { transform: translateY(0) scale(1); }

@media (max-width: 640px) {
    /* Empilha acima do carrinho (bottom 88px + 58px de altura) pra não
       brigar com ele nem ficar atrás da barra fixa. */
    .lp-back-to-top { bottom: 158px; right: 24px; width: 46px; height: 46px; }
}

/* =========================================================
   5. DETALHES
   ========================================================= */

/* Sublinhado que cresce da esquerda nos links do rodapé. */
.lp-footer-col a {
    position: relative;
    transition: color .2s ease;
}
.lp-footer-col a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
.lp-footer-col a:hover::after { transform: scaleX(1); }

/* Rolagem suave para os links de âncora (#modulos, #faq, #teste). O JS já
   fazia isso só nos [data-scroll-to]; aqui vale pra qualquer âncora. */
html { scroll-behavior: smooth; }
/* Compensa a nav fixa, pra a âncora não parar com o título escondido. */
#lp [id] { scroll-margin-top: 88px; }

/* =========================================================
   6. RESPEITO A "REDUZIR MOVIMENTO"
   Quem pediu menos animação no sistema operacional recebe a página inteira
   sem movimento — inclusive a revelação, que some deixando tudo visível.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .lp-js #lp [data-revelar],
    .lp-js #lp [data-revelar].is-visivel {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    #lp .mod-card:hover,
    #lp .bf-card:hover,
    #lp .persona-card:hover,
    #lp .dep-card:hover,
    #lp .cf-card:hover {
        transform: none;
    }
    #lp .mod-card:hover::after { animation: none; opacity: 0; }
    #lp .mod-card:hover .mc-ico { transform: none; }
    #lp .mod-card:hover .mockup img { transform: none; }
    .lp-back-to-top,
    .lp-back-to-top.show { transform: none; }
}