/* =========================================================================
   DESTAQUES "VEJA FUNCIONANDO" — stories dos módulos na landing (v3)
   Par de: page-lp-sistema.php (seção #veja, config $lp_stories)
           + js/landing-stories.js

   Ideia: como os destaques de um perfil do Instagram — uma fileira de
   círculos com o ícone de cada módulo, logo abaixo do hero. O clique abre o
   vídeo vertical (9:16) do módulo em tela cheia, com barra de progresso,
   tocar à esquerda/direita para voltar/avançar, segurar para pausar e, no
   fim, passa sozinho para o próximo módulo.

   Regras da casa:
   - Tudo em #lp.sx (vence o landing-polish.css sem !important).
   - Sem degradê de Instagram: o anel é verde chapado (não visto) e vira
     régua-forte depois de visto (localStorage, só conveniência).
   - Os vídeos têm fundo papel; no celular o quadro usa `contain` sobre o
     mesmo papel, então a sobra vira margem e nada do miolo é cortado.
   - Vídeos em assets/stories/<slug>.mp4 (720×1280, sem áudio), gerados de
     criativos-instagram/modulos/saida/ — ver o docblock da seção no template.
   ========================================================================= */

/* -------------------------------------------------------------------- */
/* FAIXA DOS DESTAQUES                                                   */
/* -------------------------------------------------------------------- */
#lp.sx .sx-st {
    padding-block: clamp(28px, 4vw, 44px);
    border-top: 1px solid var(--sx-regua);
    border-bottom: 1px solid var(--sx-regua);
}
/* título em cima e a fileira na largura toda: 10 círculos cabem em 1200px */
#lp.sx .sx-st-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
}
#lp.sx .sx-st-cab { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px; }
#lp.sx .sx-st-cab .sx-st-titulo { margin: 0; }
#lp.sx .sx-st-titulo {
    margin: 0 0 6px;
    font-family: var(--sx-display);
    font-weight: 800;
    font-size: 1.625rem;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--sx-grafite);
}
#lp.sx .sx-st-texto { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--sx-cinza); }

#lp.sx .sx-st-lista {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 8px 4px 6px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--sx-regua-forte) transparent;
}
#lp.sx .sx-st-lista li { flex: none; scroll-snap-align: start; }

#lp.sx .sx-st-bola {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 84px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--sx-texto);
    cursor: pointer;
    transform: none;
    box-shadow: none;
}
#lp.sx .sx-st-circulo {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 5px;
    border-radius: 50%;
    background: var(--sx-branco);
    color: var(--sx-grafite);
    font-size: 1.5rem;
    /* anel: papel (respiro) + verde (não visto) */
    box-shadow: 0 0 0 3px var(--sx-papel), 0 0 0 5.5px var(--sx-verde);
    transition: box-shadow .18s, color .18s;
}
#lp.sx .sx-st-bola.is-visto .sx-st-circulo { box-shadow: 0 0 0 3px var(--sx-papel), 0 0 0 4.5px var(--sx-regua-forte); }
#lp.sx .sx-st-bola:hover .sx-st-circulo { color: var(--sx-verde); }
#lp.sx .sx-st-bola--geral .sx-st-circulo { background: var(--sx-grafite); color: #fff; }
#lp.sx .sx-st-bola--geral:hover .sx-st-circulo { color: var(--sx-verde-claro); }
#lp.sx .sx-st-tempo {
    position: absolute;
    right: -6px;
    bottom: -4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--sx-grafite);
    color: #fff;
    font: 600 .6875rem/1.5 var(--sx-corpo);
}
#lp.sx .sx-st-nome {
    max-width: 84px;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    color: var(--sx-texto);
}
#lp.sx .sx-st-bola:focus-visible { outline: none; }
#lp.sx .sx-st-bola:focus-visible .sx-st-circulo { outline: 2px solid var(--sx-verde); outline-offset: 7px; }

/* -------------------------------------------------------------------- */
/* VISUALIZADOR (tela cheia)                                             */
/* -------------------------------------------------------------------- */
#lp.sx .sx-sv {
    position: fixed;
    inset: 0;
    z-index: 100010; /* acima do aviso de cookies (100000, css/cookies.css) */
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 46, 36, .96); /* verde-noite do rodapé */
}
#lp.sx .sx-sv.is-aberto { display: flex; }
body.sx-sv-trava { overflow: hidden; }

#lp.sx .sx-sv-quadro {
    position: relative;
    height: min(92vh, 92dvh, 1000px);
    aspect-ratio: 9 / 16;
    max-width: 100vw;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sx-papel);
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}
#lp.sx .sx-sv-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--sx-papel);
}

/* topo: barras + quem é */
#lp.sx .sx-sv-topo {
    position: absolute;
    left: 0; right: 0; top: 0;
    z-index: 3;
    padding: 12px 12px 0;
    pointer-events: none;
}
#lp.sx .sx-sv-barras { display: flex; gap: 4px; }
#lp.sx .sx-sv-barra {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(22, 33, 28, .18);
    overflow: hidden;
}
#lp.sx .sx-sv-barra i { display: block; width: 0; height: 100%; background: var(--sx-grafite); }
#lp.sx .sx-sv-barra.is-feita i { width: 100%; }
#lp.sx .sx-sv-quem {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
#lp.sx .sx-sv-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sx-grafite);
    color: #fff;
    font-size: .875rem;
}
#lp.sx .sx-sv-nome { font: 600 .875rem/1.2 var(--sx-corpo); color: var(--sx-grafite); }
#lp.sx .sx-sv-nome small { display: block; font-weight: 400; font-size: .75rem; color: var(--sx-cinza); }
#lp.sx .sx-sv-botoes { display: flex; gap: 4px; margin-left: auto; pointer-events: auto; }
#lp.sx .sx-sv-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(241, 239, 230, .85);
    color: var(--sx-grafite);
    font-size: 1rem;
    cursor: pointer;
    transform: none;
    box-shadow: none;
}
#lp.sx .sx-sv-btn:hover { background: #fff; }

/* zonas de toque: 1/3 volta, 2/3 avança */
#lp.sx .sx-sv-zona {
    position: absolute;
    top: 0; bottom: 0;
    z-index: 2;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: none;
    box-shadow: none;
}
#lp.sx .sx-sv-zona--volta { left: 0; width: 33%; }
#lp.sx .sx-sv-zona--vai { right: 0; width: 67%; }
#lp.sx .sx-sv-zona:focus-visible { outline: none; }

/* rodapé: chamada para a linha do módulo */
#lp.sx .sx-sv-pe {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    padding: 0 16px 18px;
    pointer-events: none;
}
#lp.sx .sx-sv-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 6px;
    background: var(--sx-verde);
    color: #fff;
    font: 600 .9375rem/1 var(--sx-corpo);
    text-decoration: none;
    pointer-events: auto;
}
#lp.sx .sx-sv-cta:hover { background: var(--sx-verde-escuro); color: #fff; }

/* carregando */
#lp.sx .sx-sv-carrega {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    place-items: center;
    color: var(--sx-cinza);
    font-size: 1.5rem;
}
#lp.sx .sx-sv.is-carregando .sx-sv-carrega { display: grid; }

/* setas fora do quadro (desktop) */
#lp.sx .sx-sv-seta {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(241, 239, 230, .92);
    color: var(--sx-grafite);
    font-size: 1rem;
    cursor: pointer;
    transform: none;
    box-shadow: none;
}
#lp.sx .sx-sv-seta:hover { background: #fff; }
#lp.sx .sx-sv-seta[disabled] { opacity: .3; cursor: default; }
#lp.sx .sx-sv-seta--volta { left: calc(50% - min(92vh, 92dvh, 1000px) * 9 / 32 - 64px); }
#lp.sx .sx-sv-seta--vai { right: calc(50% - min(92vh, 92dvh, 1000px) * 9 / 32 - 64px); }

/* -------------------------------------------------------------------- */
/* CELULAR                                                               */
/* -------------------------------------------------------------------- */
@media (max-width: 860px) {
    /* a fileira encosta nas bordas da tela; scroll-padding para o snap respeitar o respiro */
    #lp.sx .sx-st-lista { margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; gap: 12px; }
    #lp.sx .sx-st-bola { width: 76px; }
    #lp.sx .sx-st-circulo { width: 64px; height: 64px; font-size: 1.3rem; }
}
@media (max-width: 640px) {
    #lp.sx .sx-sv { background: var(--sx-papel); }
    #lp.sx .sx-sv-quadro { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; border-radius: 0; }
    #lp.sx .sx-sv-video { object-fit: contain; }
    #lp.sx .sx-sv-seta { display: none; }
    #lp.sx .sx-sv-topo { padding-top: max(12px, env(safe-area-inset-top)); }
    #lp.sx .sx-sv-pe { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    #lp.sx .sx-st-circulo { transition: none; }
}

/* =========================================================================
   HERO · TELA DO DESTAQUE 1 ("O sistema por módulos") — .sx-hm
   Par de: page-lp-sistema.php ($lp_hm_*) + js/landing-hero-rotativo.js
   Mesma linguagem das outras telas do hero (.sx-hf / .sx-ht): janela com a
   barra do navegador e uma ilustração que anima quando o slide entra (.anima,
   posta pelo JS por causa do data-hero-anima). Os módulos surgem, 4 deles
   "acendem" um a um e entram no recibo, que soma o total com os preços ao
   vivo. O botão abre o vídeo geral (.sx-hm-video) por cima, no mesmo quadro.
   Sem .anima (ou com movimento reduzido) fica o estado final, já escolhido.
   ========================================================================= */
#lp.sx .sx-hm { position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column; background: var(--sx-papel); }
#lp.sx .sx-hm .sx-ht-barra { background: #E9E6DB; border-bottom-color: var(--sx-regua); }
#lp.sx .sx-hm-corpo {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
    gap: clamp(16px, 2.6vw, 40px);
    padding: clamp(16px, 2.8vw, 40px);
}
#lp.sx .sx-hm-esq { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px); min-width: 0; padding-bottom: clamp(44px, 5vw, 64px); }
#lp.sx .sx-hm-rot { font-family: var(--sx-display); font-weight: 800; font-size: clamp(.9rem, 1.6vw, 1.35rem); letter-spacing: -.02em; color: var(--sx-grafite); }
#lp.sx .sx-hm-grade { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(6px, .9vw, 12px); margin: 0; padding: 0; list-style: none; }
#lp.sx .sx-hm-mod {
    position: relative;
    display: flex; align-items: center; gap: clamp(6px, .8vw, 10px);
    min-width: 0;
    padding: clamp(6px, .9vw, 12px);
    border: 1px solid var(--sx-regua);
    border-radius: 10px;
    background: var(--sx-branco);
    font-size: clamp(.62rem, .95vw, .84rem);
    font-weight: 600;
    color: var(--sx-grafite);
}
#lp.sx .sx-hm-mod > i {
    flex: none;
    display: grid; place-items: center;
    width: clamp(24px, 2.6vw, 34px); height: clamp(24px, 2.6vw, 34px);
    border-radius: 8px;
    background: #F1F2EE;
    color: var(--sx-grafite);
    font-size: clamp(.68rem, .95vw, .85rem);
}
#lp.sx .sx-hm-mod > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lp.sx .sx-hm-mod > em {
    position: absolute; top: -7px; right: -7px;
    display: grid; place-items: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--sx-verde);
    color: #fff;
    font-size: .6rem;
    box-shadow: 0 0 0 3px var(--sx-papel);
}
/* escolhido (estado final) */
#lp.sx .sx-hm-mod.is-escolhido { border-color: var(--sx-verde); background: var(--sx-verde-claro); }
#lp.sx .sx-hm-mod.is-escolhido > i { background: var(--sx-verde); color: #fff; }

/* recibo */
#lp.sx .sx-hm-recibo {
    --sx-dente: 8px;
    align-self: center;
    display: flex; flex-direction: column; gap: clamp(4px, .6vw, 8px);
    padding: clamp(12px, 1.6vw, 22px) clamp(12px, 1.6vw, 22px) calc(clamp(12px, 1.6vw, 22px) + var(--sx-dente));
    border-radius: 10px 10px 0 0;
    background: var(--sx-branco);
    color: var(--sx-grafite);
    font-size: clamp(.64rem, .9vw, .82rem);
    filter: drop-shadow(0 20px 24px rgba(22, 33, 28, .14)) drop-shadow(0 2px 3px rgba(22, 33, 28, .07));
    -webkit-mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--sx-dente) * 2) var(--sx-dente) repeat-x,
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--sx-dente) + 1px) no-repeat;
            mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--sx-dente) * 2) var(--sx-dente) repeat-x,
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--sx-dente) + 1px) no-repeat;
}
#lp.sx .sx-hm-recibo-topo { display: grid; padding-bottom: clamp(6px, .8vw, 10px); border-bottom: 1.5px solid var(--sx-grafite); }
#lp.sx .sx-hm-recibo-topo b { font-family: var(--sx-display); font-weight: 700; font-size: clamp(.85rem, 1.3vw, 1.1rem); letter-spacing: -.01em; }
#lp.sx .sx-hm-recibo-topo small { color: var(--sx-cinza); }
#lp.sx .sx-hm-recibo ul { margin: 0; padding: 0; list-style: none; display: grid; }
#lp.sx .sx-hm-recibo li { display: flex; justify-content: space-between; gap: 10px; padding: clamp(4px, .6vw, 8px) 0; border-bottom: 1px dashed var(--sx-linha); }
#lp.sx .sx-hm-recibo li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lp.sx .sx-hm-recibo li b { font-family: var(--sx-display); font-weight: 700; white-space: nowrap; }
#lp.sx .sx-hm-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 4px; }
#lp.sx .sx-hm-total span { font-weight: 600; }
#lp.sx .sx-hm-total b { font-family: var(--sx-display); font-weight: 800; font-size: clamp(1rem, 1.8vw, 1.5rem); letter-spacing: -.03em; }
#lp.sx .sx-hm-teste {
    align-self: flex-start;
    padding: 3px 8px;
    border: 1.5px solid var(--sx-ambar);
    border-radius: 4px;
    background: var(--sx-ambar-claro);
    color: var(--sx-ambar-texto);
    font-weight: 600;
    font-size: .92em;
}

/* botão do vídeo */
#lp.sx .sx-hm-play {
    position: absolute;
    left: clamp(16px, 2.8vw, 40px);
    bottom: clamp(16px, 2.8vw, 40px);
    z-index: 2;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 16px 6px 6px;
    border: 1px solid var(--sx-grafite);
    border-radius: 999px;
    background: var(--sx-branco);
    color: var(--sx-grafite);
    font: 600 clamp(.75rem, 1vw, .9rem)/1.2 var(--sx-corpo);
    cursor: pointer;
    transform: none;
    box-shadow: none;
    transition: background .18s ease, color .18s ease;
}
#lp.sx .sx-hm-play:hover { background: var(--sx-grafite); color: #fff; }
#lp.sx .sx-hm-play-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sx-verde); color: #fff; font-size: .75rem; }
#lp.sx .sx-hm-play small { font-weight: 400; color: inherit; opacity: .7; }

/* vídeo por cima, no mesmo quadro */
#lp.sx .sx-hm-video { position: absolute; inset: 0; z-index: 3; display: none; background: var(--sx-papel); }
#lp.sx .sx-hm.mostra-video .sx-hm-video { display: block; }
#lp.sx .sx-hm-video .sx-video { height: 100%; display: flex; flex-direction: column; border: 0; border-radius: 0; }
#lp.sx .sx-hm-video .sx-video-tela { flex: 1; min-height: 0; aspect-ratio: auto; background: var(--sx-papel); }
#lp.sx .sx-hm-video video { background: var(--sx-papel); }

/* animação de entrada (.anima vem do JS) — tempos: escolha p em 1,6 s + p × 0,75 s */
#lp.sx .sx-hm.anima .sx-hm-rot { animation: sx-ht-surge .45s ease .3s both; }
#lp.sx .sx-hm.anima .sx-hm-mod { animation: sx-ht-surge .45s cubic-bezier(.16, 1, .3, 1) calc(.45s + var(--d) * 70ms) both; }
#lp.sx .sx-hm.anima .sx-hm-mod.is-escolhido {
    animation:
        sx-ht-surge .45s cubic-bezier(.16, 1, .3, 1) calc(.45s + var(--d) * 70ms) both,
        sx-hm-escolhe .35s ease calc(1.6s + var(--p) * .75s) both;
}
#lp.sx .sx-hm.anima .sx-hm-mod.is-escolhido > i { animation: sx-hm-ico .35s ease calc(1.6s + var(--p) * .75s) both; }
#lp.sx .sx-hm.anima .sx-hm-mod > em { animation: sx-hm-check .4s cubic-bezier(.3, 1.6, .5, 1) calc(1.65s + var(--p) * .75s) both; }
#lp.sx .sx-hm.anima .sx-hm-recibo { animation: sx-ht-surge .5s cubic-bezier(.16, 1, .3, 1) .9s both; }
#lp.sx .sx-hm.anima .sx-hm-recibo li { animation: sx-hm-linha .45s cubic-bezier(.16, 1, .3, 1) calc(1.75s + var(--p) * .75s) both; }
#lp.sx .sx-hm.anima .sx-hm-total { animation: sx-hm-linha .45s cubic-bezier(.16, 1, .3, 1) calc(1.75s + var(--p) * .75s) both; }
#lp.sx .sx-hm.anima .sx-hm-total b { animation: sx-hm-acende 1.2s ease calc(1.9s + var(--p) * .75s) both; }
#lp.sx .sx-hm.anima .sx-hm-teste { animation: sx-ht-surge .45s ease calc(2.2s + var(--p) * .75s) both; }
#lp.sx .sx-hm.anima .sx-hm-play { animation: sx-ht-surge .45s ease 1.1s both; }
@keyframes sx-hm-escolhe { from { border-color: var(--sx-regua); background: var(--sx-branco); } }
@keyframes sx-hm-ico { from { background: #F1F2EE; color: var(--sx-grafite); } }
@keyframes sx-hm-check { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes sx-hm-linha { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
/* o total "acende" em verde-claro, como o recibo da tabela de preço */
@keyframes sx-hm-acende { 0% { background: transparent; } 15% { background: var(--sx-verde-claro); } 100% { background: transparent; } }

@media (max-width: 760px) {
    #lp.sx .sx-hm { aspect-ratio: auto; }
    #lp.sx .sx-hm-corpo { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 14px; }
    #lp.sx .sx-hm-esq { padding-bottom: 0; }
    #lp.sx .sx-hm-grade { grid-auto-rows: auto; }
    #lp.sx .sx-hm-mod { flex-direction: column; text-align: center; font-size: .66rem; padding: 8px 4px; }
    #lp.sx .sx-hm-mod > span { white-space: normal; }
    #lp.sx .sx-hm-recibo { align-self: stretch; font-size: .8rem; }
    #lp.sx .sx-hm-play { position: static; margin: 0 16px 16px; align-self: flex-start; }
    #lp.sx .sx-hm-video { position: absolute; }
    #lp.sx .sx-hm.mostra-video { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
    #lp.sx .sx-hm.anima * { animation: none !important; }
}