/* ══════════════════════════════════════════════════════════════
   Freely — Landing /vem
   Identidade: base do app (roxo #7c5cfc sobre quase-preto) + o calor das
   capas de arrocha/brega (magenta e ouro). Display em Anton (condensada,
   o vernáculo do cartaz de show e da capa de CD) contra Manrope no corpo.
   Tudo prefixado .lp- pra nunca colidir com o app.css.
   ══════════════════════════════════════════════════════════════ */

.lp {
    --bg:        #0a0a11;
    --bg2:       #10101a;
    --surface:   #16161f;
    --line:      #262636;
    --ink:       #ececf6;
    --ink-mid:   #a6a6c0;
    --ink-dim:   #6b6b8a;
    --accent:    #7c5cfc;
    --accent2:   #a78bfa;
    --hot:       #ff2d78;
    --gold:      #ffc14d;
    --green:     #1db954;

    --shell:     min(1180px, 100% - 40px);
    --r:         6px;
    --ease:      cubic-bezier(.22,.9,.28,1);
}

/* Reset local (a landing não carrega o app.css) */
.lp *, .lp *::before, .lp *::after { margin: 0; padding: 0; box-sizing: border-box; }

html.lp-html, body.lp-body {
    margin: 0;
    background: var(--bg, #0a0a11);
    overflow-x: hidden;
}
body.lp-body { -webkit-tap-highlight-color: transparent; }

.lp {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
.lp img, .lab img { display: block; max-width: 100%; }
.lp a { color: inherit; text-decoration: none; }
/* :where() zera a especificidade do reset — sem isso ".lp button" (0,1,1)
   vencia as classes dos componentes (0,1,0) e comia o fundo dos botões. */
:where(.lp) :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(.lab) :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.lp :focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; border-radius: 6px; }

.lp-shell { width: var(--shell); margin-inline: auto; }

/* Display: Anton só nos títulos, com restrição. */
.lp-display {
    font-family: 'Anton', 'Manrope', system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: .012em;
    line-height: .93;
    text-transform: uppercase;
}

/* ── NAV ───────────────────────────────────────────────────── */
.lp-nav {
    position: fixed; inset: 0 0 auto 0; z-index: 60;
    display: flex; align-items: center; gap: 16px;
    padding: 14px max(20px, env(safe-area-inset-left)) 14px max(20px, env(safe-area-inset-right));
    background: rgba(10,10,17,0);
    transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
    border-bottom: 1px solid transparent;
}
.lp-nav.stuck {
    background: rgba(10,10,17,.86);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
}
/* o "Freely" do PNG é vazado e some no fundo escuro: usamos só a onda do
   arquivo e escrevemos o nome em branco, que lê bem em qualquer tela */
.lp-brand { display: flex; align-items: center; gap: 10px; }
.lp-brand span {
    font-size: 25px; font-weight: 800; letter-spacing: -.028em; color: #fff;
    line-height: 1;
}
.lp-brand-mark {
    width: 30px; height: 30px; border-radius: 7px; flex: 0 0 30px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--accent), var(--hot));
    font-family: 'Anton', sans-serif; font-size: 18px; color: #fff;
    box-shadow: 0 6px 20px rgba(124,92,252,.35);
}
.lp-nav-spacer { flex: 1; }
/* Contador de "ouvindo agora" no header: prova social ao vivo */
.lp-live {
    display: inline-flex; align-items: center; gap: 7px; margin-left: 14px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(29,185,84,.08); border: 1px solid rgba(29,185,84,.28);
    font-size: 13px; color: var(--ink-mid); white-space: nowrap;
}
.lp-live b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-live-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.7);
    animation: lp-live-pulse 1.6s ease-out infinite;
}
@keyframes lp-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,.65); }
    70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@media (prefers-reduced-motion: reduce) { .lp-live-dot { animation: none; } }
/* No celular fica compacto, mas COM o "ouvindo agora": o número sozinho não diz
   nada — é a frase que transforma 1.437 em prova social. Some só quando o
   header não tem mesmo espaço. */
@media (max-width: 560px) {
    .lp-live { margin-left: 8px; padding: 4px 9px; font-size: 11.5px; gap: 5px; }
    .lp-live-dot { width: 7px; height: 7px; }
}
@media (max-width: 400px) {
    .lp-live { margin-left: 6px; padding: 4px 8px; font-size: 11px; gap: 4px; }
}
@media (max-width: 340px) { .lp-live-txt { display: none; } }

.lp-nav-link { color: var(--ink-mid); font-size: 14.5px; font-weight: 600; padding: 8px 10px; border-radius: 8px; transition: color .2s; }
.lp-nav-link:hover { color: var(--ink); }
/* Entrar é só texto: quem já tem conta sabe onde clicar, e sem a moldura o
   único botão desenhado do topo passa a ser o da ação principal. */
.lp-enter {
    color: var(--ink); font-size: 15px; font-weight: 700;
    padding: 8px 4px; border-radius: 6px;
    transition: color .2s var(--ease);
}
.lp-enter:hover { color: var(--accent2); }
@media (max-width: 640px) { .lp-nav-link.hide-xs { display: none; } }

/* ── BOTÕES ────────────────────────────────────────────────── */
.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 22px; border-radius: 8px;
    font-weight: 800; font-size: 15.5px; letter-spacing: -.01em;
    transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s;
    will-change: transform;
}
.lp-btn:active { transform: scale(.97); }
.lp-btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--hot));
    color: #fff;
    box-shadow: 0 10px 30px -8px rgba(124,92,252,.7), inset 0 1px 0 rgba(255,255,255,.22);
}
.lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(255,45,120,.6), inset 0 1px 0 rgba(255,255,255,.28); }
.lp-btn-ghost {
    background: rgba(20,20,32,.66); color: var(--ink); border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lp-btn-ghost:hover { background: rgba(38,38,58,.8); border-color: rgba(255,255,255,.28); transform: translateY(-2px); }
.lp-btn-sm { padding: 10px 16px; font-size: 14px; }
.lp-btn-wide { width: 100%; }

/* ── HERO ──────────────────────────────────────────────────── */
.lp-hero {
    position: relative;
    min-height: 86svh;
    padding: 74px 0 14px;
    display: flex; flex-direction: column; justify-content: center;
    overflow: clip;
    isolation: isolate;
}
/* brilho fixo e leve (o que seguia o mouse repintava a tela toda) */
.lp-hero::before {
    content: ''; position: absolute; z-index: -2;
    width: 76vmax; height: 76vmax; left: 50%; top: 34%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(124,92,252,.16) 0%, rgba(255,45,120,.06) 34%, transparent 62%);
    pointer-events: none;
}
.lp-hero::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 30%; z-index: -1;
    background: linear-gradient(to bottom, transparent, var(--bg) 78%);
    pointer-events: none;
}
/* Palco: véu escuro só onde o texto vive. Sem ele as capas engolem a headline
   (as capas de arrocha são MUITO claras e saturadas). As bordas seguem livres,
   então a parede continua sendo o assunto. */
.lp-hero-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(56% 48% at 50% 44%, rgba(8,8,14,.96) 0%, rgba(8,8,14,.9) 38%, rgba(8,8,14,.5) 66%, transparent 82%),
        linear-gradient(to bottom, rgba(8,8,14,.72), transparent 26%);
}

/* O PAREDÃO — muralha 3D de capas reais */
.lp-wall {
    position: absolute; inset: -8% -16% -8% -16%; z-index: -3;
    display: flex; flex-direction: column; justify-content: center; gap: clamp(7px, .9vw, 12px);
    pointer-events: none;
    mask-image: radial-gradient(132% 118% at 50% 47%, #000 54%, transparent 97%);
    -webkit-mask-image: radial-gradient(132% 118% at 50% 47%, #000 54%, transparent 97%);
    opacity: 0;
    transition: opacity 1.1s var(--ease);
}
.lp-wall.on { opacity: 1; }
/* 1 filtro no container em vez de 1 por capa: derruba o custo de composição
   (era o que travava o hero em máquina modesta). */
.lp-wall { filter: brightness(.74) saturate(.95); }
.lp-wall:hover { filter: brightness(.8) saturate(1); }
.lp-wall-inner {
    display: flex; flex-direction: column; gap: clamp(7px, .9vw, 12px);
}
.lp-row { display: flex; gap: clamp(7px, .9vw, 12px); width: max-content; will-change: transform; }
.lp-row-track { display: flex; gap: clamp(7px, .9vw, 12px); }
.lp-cover {
    position: relative;
    width: clamp(76px, 9vw, 120px); aspect-ratio: 1;
    border-radius: 4px; overflow: hidden; flex: none;
    background: var(--surface);
    pointer-events: auto; cursor: pointer;
    transition: transform .28s var(--ease), opacity .28s;
    opacity: .96;
}
.lp-cover img { width: 100%; height: 100%; object-fit: cover; }
/* a parede se arrasta: nada de selecionar texto nem de fantasma de imagem */
.lp-wall { user-select: none; -webkit-user-select: none; }
.lp-wall img { -webkit-user-drag: none; user-drag: none; }
.lp-wall.arrastando .lp-cover { transition: none; }
.lp-cover:hover, .lp-cover.playing {
    transform: scale(1.07);
    opacity: 1;
    z-index: 3;
}
/* Marca da casa no meio do acervo: a parede é do Freely, não um mural genérico */
.lp-cover.brand {
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--accent), var(--hot));
}
.lp-cover.brand img { width: 62%; height: auto; object-fit: contain; }
/* capa que nem a troca salvou: some sem deixar vão (a fileira reflui) */
.lp-cover-gone { display: none; }
/* botão play que aparece no hover/toque */
.lp-cover-play {
    position: absolute; inset: 0; z-index: 2;
    display: grid; place-items: center;
    opacity: 0; transition: opacity .25s var(--ease);
}
.lp-cover:hover .lp-cover-play, .lp-cover.playing .lp-cover-play { opacity: 1; }
.lp-cover-play span {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(10,10,17,.72); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff; font-size: 13px; padding-left: 2px;
}
.lp-cover.playing .lp-cover-play span { padding-left: 0; }
/* anel de progresso da prévia */
.lp-cover-ring { position: absolute; inset: 0; z-index: 3; opacity: 0; transition: opacity .2s; }
.lp-cover.playing .lp-cover-ring { opacity: 1; }
.lp-cover-ring circle { fill: none; stroke-width: 3; }
.lp-cover-ring .bg { stroke: rgba(255,255,255,.16); }
.lp-cover-ring .fg { stroke: var(--hot); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .25s linear; }

/* conteúdo do hero */
/* o bloco de texto não intercepta clique; só os elementos de fato clicáveis
   voltam a receber. Assim dá pra tocar as capas que ficam atrás do texto. */
.lp-hero-body { position: relative; z-index: 4; text-align: center; pointer-events: none; }
.lp-hero-body a, .lp-hero-body button, .lp-hero-body .lp-eyebrow { pointer-events: auto; }
.lp-stats { pointer-events: none; }
.lp-hero-body .lp-sub, .lp-hero-body .lp-hero-note { text-shadow: 0 2px 20px rgba(0,0,0,.95); }
.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 15px 7px 9px; border-radius: 6px;
    background: rgba(255,255,255,.055); border: 1px solid var(--line);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font-size: 13px; font-weight: 700; color: var(--ink-mid); letter-spacing: .01em;
}
.lp-eyebrow b { color: var(--ink); font-weight: 800; }
.lp-live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none;
    box-shadow: 0 0 0 4px rgba(29,185,84,.16);
    animation: lp-pulse 2.4s ease-in-out infinite;
}
@keyframes lp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

.lp-h1 {
    margin: 0 auto;
    font-size: clamp(40px, 8.2vw, 94px);
    max-width: 14ch;
    text-shadow: 0 8px 44px rgba(0,0,0,.85);
}
.lp-h1 em {
    font-style: normal;
    background: linear-gradient(96deg, var(--accent2) 4%, #c07bff 42%, var(--hot) 92%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-sub {
    margin: 16px auto 0; max-width: 52ch;
    font-size: clamp(15.5px, 2.2vw, 19px); color: var(--ink-mid); font-weight: 500;
    text-shadow: 0 2px 18px rgba(0,0,0,.7);
}
.lp-cta-row { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-hero-note { margin-top: 16px; font-size: 13.5px; color: var(--ink-mid); opacity: .9; }

/* stats reais do acervo — marcadores estruturais com informação de verdade */
.lp-stats { position: relative; z-index: 4; margin-top: 30px; display: flex; gap: clamp(18px, 5vw, 56px); justify-content: center; flex-wrap: wrap; text-align: center; }
.lp-stat-n { font-family: 'Anton', sans-serif; font-size: clamp(24px, 4vw, 34px); line-height: 1; letter-spacing: .01em; }
.lp-stat-l { margin-top: 5px; font-size: 12px; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-dim); font-weight: 700; }

/* ── TICKER de gêneros ─────────────────────────────────────── */
.lp-ticker {
    position: relative; overflow: hidden;
    border-block: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(124,92,252,.07), rgba(255,45,120,.07));
    padding: 15px 0;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lp-ticker-track { display: flex; gap: 34px; width: max-content; animation: lp-marquee 34s linear infinite; }
.lp-ticker:hover .lp-ticker-track { animation-play-state: paused; }
@keyframes lp-marquee { to { transform: translateX(-50%); } }
.lp-ticker-item { font-family: 'Anton', sans-serif; font-size: 19px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mid); white-space: nowrap; display: flex; align-items: center; gap: 34px; }
.lp-ticker-item::after { content: '◆'; font-size: 8px; color: var(--hot); font-family: 'Manrope', sans-serif; }

/* ── SEÇÕES ────────────────────────────────────────────────── */
.lp-section { padding: clamp(48px, 6.5vw, 84px) 0; position: relative; }
.lp-section-head { max-width: 40ch; margin-bottom: clamp(26px, 3.4vw, 40px); }
.lp-section-head.center { margin-inline: auto; text-align: center; }
.lp-kicker {
    font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--hot); margin-bottom: 14px;
}
.lp-h2 { font-size: clamp(30px, 5.6vw, 56px); }
.lp-h2 em { font-style: normal; color: var(--accent2); }
.lp-lead { margin-top: 16px; color: var(--ink-mid); font-size: clamp(15px, 2vw, 17.5px); }

/* reveal no scroll */
.lp-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.lp-reveal.in { opacity: 1; transform: none; }

/* cards de prova */
.lp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .lp-grid3 { grid-template-columns: 1fr; } }
.lp-card {
    position: relative; overflow: hidden;
    padding: 30px 26px 28px;
    background: linear-gradient(168deg, var(--surface), var(--bg2));
    border: 1px solid var(--line); border-radius: var(--r);
    transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.lp-card:hover { transform: translateY(-5px); border-color: rgba(124,92,252,.5); box-shadow: 0 24px 50px -26px rgba(124,92,252,.75); }
.lp-card-ico {
    width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center;
    background: rgba(124,92,252,.14); color: var(--accent2); margin-bottom: 18px;
}
.lp-card-ico svg { width: 22px; height: 22px; }
.lp-card h3 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.lp-card p { margin-top: 9px; color: var(--ink-mid); font-size: 15px; }

/* ── PLANOS ────────────────────────────────────────────────── */
/* 3x2 no desktop: com auto-fit os 6 planos quebravam 5+1 e o "melhor valor"
   ficava órfão na segunda linha, justo o card que precisa ser visto. */
.lp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .lp-plans { grid-template-columns: repeat(2, 1fr); } }
.lp-plan {
    position: relative; padding: 26px 22px 24px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    display: flex; flex-direction: column; gap: 4px;
    transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.lp-plan:hover { transform: translateY(-4px); border-color: rgba(167,139,250,.55); }
.lp-plan.best {
    border-color: rgba(255,193,77,.6);
    background: linear-gradient(170deg, rgba(255,193,77,.1), var(--surface) 46%);
    box-shadow: 0 26px 60px -32px rgba(255,193,77,.7);
}
.lp-plan-tag {
    position: absolute; top: -10px; left: 22px;
    padding: 4px 11px; border-radius: 4px;
    background: var(--gold); color: #241a02;
    font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.lp-plan-name { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.lp-plan-price { font-family: 'Anton', sans-serif; font-size: 40px; line-height: 1.05; letter-spacing: .01em; }
/* o "R$" e o "/mês" são unidade: pequenos e leves, o número fica sozinho no
   tamanho grande (mesmo tratamento do checkout do app) */
.lp-plan-price small { font-size: .4em; opacity: .55; margin-right: 3px; font-weight: 400; }
.lp-plan-price i {
    font-style: normal; font-family: 'Manrope', sans-serif;
    font-size: .3em; font-weight: 700; color: var(--ink-dim); margin-left: 2px;
}
.lp-plan-per { font-size: 13.5px; color: var(--ink-mid); min-height: 20px; }
.lp-plan-days { margin-top: 6px; font-size: 14px; color: var(--ink-mid); }
/* neutro de propósito: o verde do cartão é do desconto, e dois verdes brigando
   fazem o olho não saber qual é a vantagem */
.lp-plan-note { margin-top: 8px; font-size: 12.5px; color: var(--ink-mid); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.lp-plan-note.renew { color: var(--ink-dim); font-weight: 600; }
.lp-plan .lp-btn { margin-top: 18px; }
/* Desconto: verde é a única cor de "ganho" da página, e ela aparece só aqui e
   no aviso de não renovar. O preço antigo fica cinza e riscado pra o olho
   comparar sem precisar ler. */
.lp-plan-deal { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 2px; }
.lp-plan-old { color: var(--ink-dim); font-size: 13px; text-decoration: line-through; }
.lp-plan-off {
    padding: 2px 8px; border-radius: 999px;
    background: rgba(29,185,84,.16); border: 1px solid rgba(29,185,84,.42);
    color: #5fd39a; font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
    white-space: nowrap;
}

/* Seis planos empilhados viravam uma rolagem sem fim no celular. Dois por linha
   mostram a comparação de preço numa tela só, que é a decisão que a pessoa
   está tomando ali. O cartão encolhe pra caber sem apertar o texto. */
@media (max-width: 560px) {
    .lp-plans { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .lp-plan { padding: 18px 12px 16px; }
    .lp-plan-name { font-size: 11px; letter-spacing: .06em; }
    .lp-plan-price { font-size: 31px; }
    .lp-plan-price small { font-size: 14px; }
    .lp-plan-per, .lp-plan-days { font-size: 12px; }
    .lp-plan-days { margin-top: 4px; }
    .lp-plan-note { font-size: 11px; margin-top: 6px; gap: 4px; }
    /* lado a lado, os textos têm alturas diferentes (uns renovam, outros não).
       Empurrar o botão pro fim alinha os dois "Assinar" da linha. */
    .lp-plan { display: flex; flex-direction: column; }
    .lp-plan .lp-btn { margin-top: auto; padding: 11px 10px; font-size: 14px; width: 100%; }
    .lp-plan-note { margin-bottom: 12px; }
    .lp-plan-tag { font-size: 9.5px; padding: 3px 8px; }
}
.lp-pay-note { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; color: var(--ink-dim); font-size: 13.5px; }
.lp-pix { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 5px; background: rgba(29,185,84,.12); border: 1px solid rgba(29,185,84,.36); color: #6ee7a0; font-weight: 700; font-size: 13px; }

/* ── FAQ ───────────────────────────────────────────────────── */
.lp-faq { max-width: 760px; margin-inline: auto; }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary {
    list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
    font-weight: 700; font-size: 16.5px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
    content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    font-size: 24px; color: var(--accent2); font-weight: 400; transition: transform .25s var(--ease);
}
.lp-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.lp-faq-a { padding: 0 0 20px; color: var(--ink-mid); font-size: 15.5px; }

/* ── CTA final + rodapé ────────────────────────────────────── */
.lp-final {
    text-align: center; padding: clamp(56px, 7vw, 92px) 0;
    background:
        radial-gradient(80% 130% at 50% 0%, rgba(124,92,252,.2), transparent 62%),
        linear-gradient(to bottom, var(--bg2), var(--bg));
    border-top: 1px solid var(--line);
}
.lp-foot { padding: 30px 0 max(30px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--ink-dim); font-size: 13.5px; }
.lp-foot-row { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lp-foot a { color: var(--ink-mid); }
.lp-foot a:hover { color: var(--ink); }

/* ── BARRA FIXA (aparece ao rolar) ─────────────────────────── */
.lp-sticky {
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
    padding: 12px max(16px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
    background: rgba(12,12,20,.93); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 14px;
    transform: translateY(115%); transition: transform .45s var(--ease);
}
.lp-sticky.on { transform: none; }
.lp-body.sticky-on { padding-bottom: 84px; }
.lp-sticky-txt { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; }
.lp-sticky-txt small { display: block; font-weight: 500; color: var(--ink-dim); font-size: 12.5px; }
.lp-sticky-close { color: var(--ink-dim); font-size: 20px; padding: 4px 8px; }

/* ── POPUPS ────────────────────────────────────────────────── */
.lp-pop-bg {
    position: fixed; inset: 0; z-index: 90;
    display: grid; place-items: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    background: rgba(6,6,12,.76); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.lp-pop-bg.on { opacity: 1; pointer-events: auto; }
.lp-pop {
    width: 100%; max-width: 430px;
    max-height: calc(100dvh - 32px); overflow-y: auto;
    background: linear-gradient(170deg, #191924, #101018);
    border: 1px solid var(--line); border-radius: 10px;
    padding: 28px 26px 26px; text-align: center;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.95);
    transform: translateY(16px) scale(.97); transition: transform .35s var(--ease);
}
.lp-pop-bg.on .lp-pop { transform: none; }
.lp-pop-art { display: flex; justify-content: center; gap: -10px; margin-bottom: 18px; }
.lp-pop-art img { width: 58px; height: 58px; border-radius: 5px; object-fit: cover; border: 2px solid #191924; margin-left: -14px; box-shadow: 0 8px 20px -8px #000; }
.lp-pop-art img:first-child { margin-left: 0; }
.lp-pop h3 { font-family: 'Anton', sans-serif; font-size: 27px; text-transform: uppercase; line-height: 1.02; letter-spacing: .01em; }
.lp-pop p { margin-top: 12px; color: var(--ink-mid); font-size: 15px; }
.lp-pop .lp-btn { margin-top: 20px; }
.lp-pop-skip { margin-top: 12px; display: block; width: 100%; color: var(--ink-dim); font-size: 13.5px; text-decoration: underline; padding: 6px; }
.lp-pop-close { position: absolute; top: 10px; right: 14px; color: var(--ink-dim); font-size: 26px; line-height: 1; }
.lp-pop-wrap { position: relative; }

/* ── Toast de prévia tocando ───────────────────────────────── */
/* fora de cena de verdade: translate por % da própria altura deixava uma
   nesga aparecendo embaixo. visibility garante que some. */
.lp-now {
    position: fixed; z-index: 65; left: 50%; bottom: 22px;
    transform: translate(-50%, calc(100% + 40px));
    visibility: hidden; pointer-events: none;
    display: flex; align-items: center; gap: 11px;
    padding: 9px 16px 9px 9px; border-radius: 8px;
    background: rgba(16,16,26,.94); border: 1px solid var(--line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px -18px #000;
    transition: transform .4s var(--ease);
    max-width: calc(100% - 32px);
}
.lp-now.on { transform: translate(-50%, 0); visibility: visible; pointer-events: auto; }
.lp-now img { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; flex: none; }
.lp-now-txt { min-width: 0; }
.lp-now-t { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.lp-now-a { font-size: 12px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.lp-eq { display: flex; align-items: flex-end; gap: 2.5px; height: 15px; flex: none; }
.lp-eq i { width: 3px; background: var(--hot); border-radius: 2px; animation: lp-eq .9s ease-in-out infinite; }
.lp-eq i:nth-child(2) { animation-delay: .18s; }
.lp-eq i:nth-child(3) { animation-delay: .36s; }
@keyframes lp-eq { 0%,100% { height: 4px; } 50% { height: 15px; } }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .lp { font-size: 15.5px; }
    .lp-h1 { font-size: clamp(38px, 12vw, 58px); max-width: 12ch; }
    .lp-cta-row { flex-direction: column; }
    .lp-cta-row .lp-btn { width: 100%; }
    .lp-sticky-txt small { display: none; }

    /* No celular a parede atrás do texto vira ruído (tela estreita, capas
       saturadas). Ela desce pra uma FAIXA própria embaixo do CTA: o texto
       ganha fundo limpo e as capas viram um convite claro pra tocar. */
    .lp-hero {
        min-height: auto; padding: 96px 0 34px;
        justify-content: flex-start; gap: 26px;
    }
    .lp-wall {
        position: relative; inset: auto; height: auto; order: 2;
        margin: 0 -20px; padding: 4px 0;
        perspective: 900px;
        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    }
    .lp-wall-inner { transform: none; }
    /* a faixa inteira recebe o dedo, não só as capas: dá pra puxar do vão */
    .lp-wall { pointer-events: auto; }
    .lp-wall .lp-row:nth-child(3) { display: none; }   /* 2 fileiras bastam */
    .lp-cover { filter: saturate(1) brightness(.94); width: clamp(104px, 30vw, 128px); }
    .lp-cover:hover, .lp-cover.playing { transform: scale(1.05); }
    .lp-hero-scrim { display: none; }
    .lp-hero-body { order: 1; }
    .lp-stats {
        order: 3; gap: 0; margin-top: 4px;
        display: grid; grid-template-columns: repeat(3, 1fr); width: var(--shell); margin-inline: auto;
    }
    .lp-stats > div { text-align: center; }
    .lp-hero-note { margin-top: 14px; }

    /* Tela estreita lê melhor com tudo no eixo: título, texto e botão na mesma
       linha de centro. Fora do celular a leitura em coluna à esquerda continua
       sendo a melhor, então isso vive só aqui dentro. */
    .lp-section-head, .lp-eq-copy, .lp-card, .lp-plan, .lp-faq-a {
        text-align: center;
    }
    .lp-section-head { max-width: 100%; margin-inline: auto; }
    .lp-card-ico, .lp-plan-note { margin-inline: auto; }
    .lp-plan-note { justify-content: center; }
    /* o botão do equalizador acompanha o texto centralizado */
    .lp-eq-copy .lp-btn { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .lp *, .lp *::before, .lp *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
    .lp-reveal { opacity: 1; transform: none; }
}

/* ── GÊNEROS (faixa organizada, com rótulo) ────────────────── */
.lp-genres-sec { padding: 18px 0 6px; }
.lp-genres-label {
    text-align: center; font-size: 12px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim);
    margin-bottom: 16px;
}
.lp-ticker-item {
    padding: 9px 16px; border: 1px solid var(--line); border-radius: 5px;
    background: rgba(255,255,255,.03);
    font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mid);
    gap: 0;
}
.lp-ticker-item::after { content: none; }
.lp-ticker { border: 0; background: none; padding: 4px 0 0; }
.lp-ticker-track { gap: 10px; animation-duration: 46s; }
/* cada gênero leva a uma playlist dele, então tem que parecer clicável */
.lp-ticker-item { transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.lp-ticker-item:hover, .lp-ticker-item:focus-visible {
    color: var(--ink); border-color: rgba(167,139,250,.6); background: rgba(124,92,252,.12);
}
/* No dedo a faixa para de correr: alvo parado é alvo que o dedo acerta. Vale
   pra tablet também, não só pro celular, daí o (pointer: coarse). */
@media (max-width: 720px), (pointer: coarse) {
    .lp-ticker { overflow: visible; mask-image: none; -webkit-mask-image: none; }
    /* Grade de duas colunas em vez de wrap solto: com larguras variáveis o
       último gênero acabava sozinho numa linha, parecendo sobra. Em grade as
       linhas fecham sempre certas. */
    .lp-ticker-track {
        animation: none; width: auto;
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 8px; padding: 0 20px;
    }
    .lp-ticker-item { padding: 11px 10px; font-size: 12.5px; justify-content: center; text-align: center; }
}

/* ── EQUALIZADOR ────────────────────────────────────────────────────────────
   As fotos ficam dentro de uma moldura ao lado do texto. Soltas num palco
   vazio elas pareciam "coladas na página"; emolduradas e pareadas com a copy,
   viram uma peça só. */
.lp-eq-sec { background: linear-gradient(180deg, transparent, rgba(124,92,252,.05) 42%, transparent); }
.lp-eq-grid {
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(28px, 4.5vw, 62px); align-items: center;
}
@media (max-width: 980px) { .lp-eq-grid { grid-template-columns: 1fr; gap: 30px; } }

/* 2 linhas exatas: o trecho destacado ganha linha própria e o corpo do
   título encolhe o suficiente pra "Equalizador de verdade," caber inteiro */
.lp-eq-copy .lp-h2 { font-size: clamp(25px, 3.15vw, 39px); max-width: 100%; }
.lp-eq-copy .lp-h2 em { display: block; }
.lp-eq-list { list-style: none; margin: 20px 0 26px; display: grid; gap: 11px; }
.lp-eq-list li { position: relative; padding-left: 26px; color: var(--ink-mid); font-size: 15.5px; }
.lp-eq-list li b { color: var(--ink); font-weight: 800; }
.lp-eq-list li::before {
    content: ''; position: absolute; left: 0; top: 9px;
    width: 12px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--accent2), var(--hot));
}

.lp-eq-sec { padding-bottom: clamp(30px, 4vw, 52px); }
.lp-eq-showcase {
    position: relative; isolation: isolate;
    /* sem moldura e sem fundo: as fotos flutuam, só o brilho por trás */
    padding: 0 0 clamp(52px, 6vw, 78px) clamp(30px, 5vw, 72px);
}
.lp-eq-glow {
    position: absolute; z-index: -1; inset: -6% -4% 4% 10%;
    background:
        radial-gradient(58% 60% at 66% 38%, rgba(124,92,252,.42), transparent 68%),
        radial-gradient(40% 44% at 14% 82%, rgba(255,45,120,.22), transparent 72%);
    filter: blur(34px);
}
.lp-eq-tablet, .lp-eq-phone { margin: 0; position: relative; }
.lp-eq-tablet img, .lp-eq-phone img {
    width: 100%; height: auto; display: block;
    border-radius: 8px;
}
.lp-eq-tablet {
    width: 100%;
    filter: drop-shadow(0 26px 40px rgba(0,0,0,.7));
}
/* o celular encaixa na quina, mordendo a moldura: parece composição, não colagem */
.lp-eq-phone {
    position: absolute; left: 0; bottom: clamp(-30px, -2.6vw, -16px);
    width: 36%;
    filter: drop-shadow(0 22px 34px rgba(0,0,0,.9));
    z-index: 2;
}
.lp-eq-tablet figcaption, .lp-eq-phone figcaption {
    position: absolute; z-index: 3;
    padding: 5px 11px; border-radius: 5px;
    background: rgba(10,10,17,.9); border: 1px solid var(--line);
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-mid); white-space: nowrap;
}
.lp-eq-tablet figcaption { right: 12px; bottom: 12px; }
.lp-eq-phone figcaption { left: 50%; transform: translateX(-50%); bottom: -13px; }

.lp-eq-facts {
    display: flex; justify-content: center; gap: clamp(26px, 6vw, 76px);
    flex-wrap: wrap; margin-top: clamp(46px, 5vw, 64px);
    padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--line);
}
.lp-eq-facts > div { text-align: center; }
.lp-eq-facts b {
    display: block; font-family: 'Anton', sans-serif; font-weight: 400;
    font-size: clamp(30px, 4.4vw, 42px); line-height: 1;
    background: linear-gradient(120deg, var(--accent2), var(--hot));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-eq-facts span {
    display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
}
.lp-eq-hint { margin-top: 12px; font-size: 13.5px; color: var(--ink-dim); }

/* Centralização do bloco do equalizador no celular. Fica depois das regras da
   seção de propósito: mesma especificidade, então quem vem por último vence. */
@media (max-width: 720px) {
    .lp-eq-hint, .lp-eq-facts { text-align: center; }
    .lp-eq-facts { justify-content: center; }
    /* o traço sai da margem e vira marcador em cima do item */
    .lp-eq-list li { padding-left: 0; }
    .lp-eq-list li::before { position: static; display: block; margin: 0 auto 7px; }
}

@media (max-width: 620px) {
    .lp-eq-showcase { padding: 0 0 44px 26px; }
    .lp-eq-phone { width: 42%; left: 0; bottom: -18px; }
    .lp-eq-phone figcaption { font-size: 9px; bottom: -11px; }
    .lp-eq-tablet figcaption { font-size: 9px; right: 8px; bottom: 8px; }
    .lp-eq-facts { gap: 18px; }
    .lp-eq-facts > div { flex: 1 1 28%; }
}

/* ── RELEVO SONORO (fundo) ─────────────────────────────────── */
.lp-terrain {
    position: fixed; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: .85;
}
.lp { position: relative; z-index: 1; }
.lp-section, .lp-final, .lp-foot, .lp-genres-sec { background-color: transparent; }
/* hero limpo: só o carrossel. O relevo sonoro segue no resto da página. */
.lp-hero { background-color: var(--bg); }
/* as seções precisam de um fundo próprio pra o relevo não brigar com o texto */
.lp-section, .lp-genres-sec { backdrop-filter: none; }

/* ── HEADER com a logo ─────────────────────────────────────── */
.lp-brand img { height: 38px; width: auto; display: block; }
@media (max-width: 420px) { .lp-brand img { height: 30px; } .lp-brand span { font-size: 20px; } }

.lp-btn-lg { padding: 16px 28px; font-size: 16.5px; }
.lp-eq-hint { margin-top: 12px; font-size: 13.5px; color: var(--ink-dim); }

/* ── RODAPÉ ────────────────────────────────────────────────── */
.lp-foot { padding: clamp(40px, 5vw, 62px) 0 max(26px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.lp-foot-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: clamp(24px, 4vw, 54px); padding-bottom: 34px;
}
@media (max-width: 860px) { .lp-foot-grid { grid-template-columns: 1fr 1fr; } .lp-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .lp-foot-grid { grid-template-columns: 1fr; gap: 26px; } }
.lp-foot-logo { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.lp-foot-logo img { height: 32px; width: auto; display: block; }
.lp-foot-logo span { font-size: 21px; font-weight: 800; letter-spacing: -.028em; color: #fff; }
.lp-foot-brand p { color: var(--ink-dim); font-size: 14px; max-width: 34ch; line-height: 1.6; }
.lp-foot-wa {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
    padding: 9px 15px; border-radius: 6px;
    background: rgba(29,185,84,.1); border: 1px solid rgba(29,185,84,.3);
    color: #6ee7a0; font-size: 13.5px; font-weight: 700;
    transition: background .2s;
}
.lp-foot-wa:hover { background: rgba(29,185,84,.18); color: #8df0b8; }
.lp-foot-col h4 {
    font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    color: var(--ink); margin-bottom: 14px;
}
.lp-foot-col a {
    display: block; color: var(--ink-dim); font-size: 14px; padding: 5px 0;
    transition: color .2s;
}
.lp-foot-col a:hover { color: var(--accent2); }
.lp-foot-legal {
    display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    padding-top: 24px; border-top: 1px solid var(--line);
    color: var(--ink-dim); font-size: 12.5px; line-height: 1.7;
}
.lp-foot-right { text-align: right; display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 620px) { .lp-foot-right { text-align: left; } }
/* Rodapé no celular: era uma torre de quase mil pixels, com doze links
   empilhados um embaixo do outro depois de tudo que a página já pediu. Aqui ele
   vira duas colunas curtas e centradas. A descrição da marca sai (a página
   inteira acima já explicou o que é o Freely) e fica o que serve pra agir:
   WhatsApp, os links e o dado legal. Depois das regras acima de propósito:
   mesma especificidade, então precisa vir por último pra valer. */
@media (max-width: 720px) {
    .lp-foot { padding-top: 30px; }
    .lp-foot-grid { grid-template-columns: 1fr 1fr; gap: 22px 14px; padding-bottom: 22px; text-align: center; }
    .lp-foot-brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; }
    .lp-foot-brand p { display: none; }
    .lp-foot-logo { margin-bottom: 12px; }
    .lp-foot-wa { margin-top: 0; }
    .lp-foot-col { text-align: center; }
    .lp-foot-col h4 { margin-bottom: 8px; font-size: 11px; }
    .lp-foot-col a { padding: 4px 0; font-size: 13.5px; }
    /* Legal é o mais frio dos três: no celular ele vira a linha de baixo,
       ocupando as duas colunas, em vez de criar uma terceira pilha. */
    .lp-foot-col:last-of-type { grid-column: 1 / -1; }
    .lp-foot-col:last-of-type nav,
    .lp-foot-col:last-of-type { display: block; }
    .lp-foot-col:last-of-type a { display: inline-block; margin: 0 9px; }
    .lp-foot-legal { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-top: 18px; }
    .lp-foot-right { text-align: center; align-items: center; }
}

.lp-foot-by a { color: var(--ink-mid); }
.lp-foot-by a:hover { color: var(--accent2); }
.lp-foot-by b { font-weight: 800; }

/* ── LABORATÓRIO DO EQUALIZADOR (espelha o painel do player) ─────────────── */
.lab-bg {
    position: fixed; inset: 0; z-index: 95;
    display: grid; place-items: center;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    background: rgba(5,5,10,.88);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.lab-bg.on { opacity: 1; pointer-events: auto; }
.lab {
    width: 100%; max-width: 660px;
    max-height: calc(100dvh - 20px); overflow-y: auto;
    background: #16161e; border: 1px solid #262636; border-radius: 12px;
    padding: 20px 22px 18px;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.95);
    transform: translateY(14px) scale(.98); transition: transform .32s var(--ease);
}
.lab-bg.on .lab { transform: none; }

.lab-top { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.lab-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
/* centralizada pelo painel, não pelo espaço que sobra entre título e X */
.lab-wave {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 78px; height: auto; display: block; pointer-events: none;
}
.lab-x { margin-left: auto; color: var(--ink-dim); font-size: 26px; line-height: 1; padding: 0 4px; }
.lab-x:hover { color: var(--ink); }

.lab-row1 { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.lab-toggle {
    width: 46px; height: 26px; border-radius: 13px; flex: none;
    background: #2a2a3a; position: relative; transition: background .25s var(--ease);
}
.lab-toggle.on { background: var(--accent); }
.lab-knob {
    position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; transition: transform .25s var(--ease);
}
.lab-toggle.on .lab-knob { transform: translateX(20px); }
.lab-toggle-label { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.lab-select {
    margin-left: auto; min-width: 168px;
    background: #1e1e2a; color: var(--ink); border: 1px solid #2e2e40;
    border-radius: 7px; padding: 9px 12px; font-size: 14px; font-family: inherit;
    cursor: pointer;
}

.lab-gains {
    display: flex; justify-content: space-between; padding: 0 6px 10px;
    border-bottom: 1px solid #232332; margin-bottom: 10px;
}
.lab-gains span {
    flex: 1; text-align: center; font-size: 11.5px; font-weight: 700;
    color: var(--accent2); font-variant-numeric: tabular-nums;
    transition: color .3s;
}
.lab-gains span.zero { color: var(--ink-dim); }
.lab-gains span.down { color: var(--hot); }

.lab-curve { width: 100%; height: 172px; display: block; touch-action: none; cursor: ns-resize; }
.lab-curve .gl { stroke: rgba(255,255,255,.05); stroke-width: 1; }
.lab-curve .gv { stroke: rgba(255,255,255,.045); stroke-width: 1; stroke-dasharray: 3 5; }
.lab-curve .nd { fill: #16161e; stroke: #8b6cff; stroke-width: 3; cursor: grab; }
.lab-curve .nd:hover { stroke: #b39dff; r: 8; }
#lab-line, #lab-fill { transition: d .18s linear; }

.lab-knobs { display: flex; justify-content: space-between; gap: 2px; margin-top: 12px; touch-action: none; }
.lab-kb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.lab-kb svg { width: 100%; max-width: 46px; aspect-ratio: 1; cursor: ns-resize; }
.lab-kb .ring { fill: #14141c; stroke: #2b2b3c; stroke-width: 3.5; }
.lab-kb .arc { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset .25s var(--ease), stroke .25s; }
.lab-kb.neg .arc { stroke: var(--hot); }
.lab-kb .pin { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; transition: transform .25s var(--ease); transform-origin: 50% 50%; }
.lab-kb small { font-size: 9.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

.lab-vol { display: flex; align-items: center; gap: 11px; margin-top: 18px; color: var(--ink-mid); }
.lab-vol-btn {
    display: grid; place-items: center; flex: none;
    width: 30px; height: 30px; border-radius: 6px;
    color: var(--ink-mid); transition: color .2s, background .2s;
}
.lab-vol-btn:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.lab-vol-btn.muted { color: var(--hot); }
.lab-vol-ico { width: 22px; height: 22px; display: block; }
.lab-vol span { font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; color: var(--ink-dim); }
#lab-volume {
    -webkit-appearance: none; appearance: none; flex: 1;
    height: 5px; border-radius: 3px; cursor: pointer;
    background: linear-gradient(90deg, var(--accent) var(--vol, 50%), #2a2a3a var(--vol, 50%));
}
#lab-volume::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.6); cursor: grab;
}
#lab-volume::-moz-range-thumb {
    width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; cursor: grab;
}

.lab-reset {
    width: 100%; margin-top: 16px; padding: 12px;
    background: #1e1e2a; border: 1px solid #2e2e40; border-radius: 8px;
    color: var(--ink); font-size: 14.5px; font-weight: 700;
    transition: background .2s;
}
.lab-reset:hover { background: #262634; }

.lab-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid #232332;
    font-size: 13.5px; color: var(--ink-mid);
}
@media (max-width: 560px) {
    .lab { padding: 16px 13px 14px; }
    .lab-curve { height: 132px; }
    .lab-kb svg { max-width: 34px; }
    .lab-kb small { font-size: 8.5px; }
    .lab-select { min-width: 0; flex: 1; font-size: 13px; padding: 8px 9px; }
    .lab-gains span { font-size: 9.5px; }
    .lab-cta { justify-content: center; text-align: center; }
    .lab-wave { width: 58px; }
}

/* ── Navegador embutido de Instagram/Facebook (tráfego pago) ──────────────── */
/* O webview reserva espaço para a própria barra: 100svh vira rolagem morta e o
   CTA principal cai abaixo da dobra. Com a altura medida em JS isso some. */
.lp-inapp .lp-hero { min-height: calc(var(--vh, 100svh) - 62px); padding-top: 66px; }
.lp-inapp .lp-nav { position: absolute; }
.lp-inapp .lp-sticky { padding-bottom: 14px; }
/* backdrop-filter é caro e falha nesses webviews: cai pra cor sólida */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lp-nav.stuck, .lp-pop-bg, .lab-bg, .lp-sticky, .lp-now { background: rgba(10,10,17,.97); }
    .lp-section::before, .lp-genres-sec::before, .lp-final::before, .lp-foot::before { background: rgba(10,10,17,.88); }
}

.lp-now-x {
    margin-left: 4px; color: var(--ink-dim); font-size: 20px; line-height: 1;
    padding: 2px 6px; border-radius: 4px; flex: none;
}
.lp-now-x:hover { color: var(--ink); background: rgba(255,255,255,.07); }

/* Volume no aviso de prévia (mesmo padrão do equalizador: metade) */
.lp-now-vol { display: flex; align-items: center; gap: 7px; color: var(--ink-dim); flex: none; }
.lp-now-vol svg { width: 15px; height: 15px; }
#lp-now-vol {
    -webkit-appearance: none; appearance: none; width: 66px;
    height: 4px; border-radius: 2px; background: #33334a; cursor: pointer;
}
#lp-now-vol::-webkit-slider-thumb {
    -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.6);
}
#lp-now-vol::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; }
@media (max-width: 520px) { .lp-now-vol { display: none; } }

/* Arte própria do popup (banner de aviso ou quadrada tipo feed). Sem ela, o
   espaço segue sendo das 4 capas do acervo. */
.lp-pop-art.lp-pop-arte-banner,
.lp-pop-art.lp-pop-arte-quadrada { display: block; margin-bottom: 16px; }
.lp-pop-art.lp-pop-arte-banner, .lp-pop-art.lp-pop-arte-quadrada {
    border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px -14px #000;
}
.lp-pop-art.lp-pop-arte-banner { aspect-ratio: 16 / 6; }
.lp-pop-art.lp-pop-arte-quadrada { aspect-ratio: 1 / 1; max-width: 260px; margin-inline: auto; }
.lp-pop-art.lp-pop-arte-banner img,
.lp-pop-art.lp-pop-arte-quadrada img {
    width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0;
    object-fit: cover; display: block; transform-origin: center;
}

/* Garantia: linha curta no cartão, pra tirar o medo sem virar parágrafo */
.lp-plan-garantia {
    margin-top: 6px; font-size: 11.5px; color: var(--ink-dim);
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.lp-plan-garantia::before { content: '🛡'; font-size: 12px; }

/* Benefícios no cartão de plano (mesma leitura do checkout do site) */
.lp-plan-benef { list-style: none; margin: 14px 0 4px; padding: 0; text-align: left; display: grid; gap: 8px; }
.lp-plan-benef li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-mid); line-height: 1.35; }
.lp-plan-benef li svg {
    width: 15px; height: 15px; flex: none; margin-top: 1px; padding: 2.5px;
    border-radius: 50%; background: rgba(29,185,84,.16); fill: #5fd39a;
}

/* Ponto que pulsa dentro do botão de assinar: chama o olho sem poluir. Herda a
   cor do texto do botão, então combina com o cheio (branco) e o vazado. */
.lp-btn-pisca {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: lp-pisca 1.4s ease-out infinite;
}
@keyframes lp-pisca {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.6); opacity: 1; }
    70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); opacity: .85; }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .lp-btn-pisca { animation: none; } }

/* ── PROVA SOCIAL: globo + avaliações ──────────────────────────────────────── */
.lp-social { background: linear-gradient(180deg, transparent, rgba(124,92,252,.05) 45%, transparent); overflow: hidden; }
.lp-social-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(20px, 3vw, 34px);
}
@media (max-width: 860px) { .lp-social-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Globo */
.lp-globe { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 1; }
.lp-globe svg { display: block; overflow: visible; }
.lp-globe .fg-ativo { filter: drop-shadow(0 0 6px var(--hot)); animation: fg-pulse 1.6s ease-out infinite; transform-box: fill-box; }
@keyframes fg-pulse { 0%,100% { r: 6px; } 50% { r: 8px; } }
/* rótulo da cidade sob o globo */
.lp-globe-label {
    position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 8px 16px; border-radius: 6px;
    background: rgba(16,16,26,.92); border: 1px solid var(--line);
    backdrop-filter: blur(10px); box-shadow: 0 12px 30px -12px #000;
}
.lp-globe-label b { font-family: 'Anton', sans-serif; font-size: 17px; letter-spacing: .02em; color: #fff; }
.lp-globe-label #fg-pais { font-size: 12px; color: var(--ink-mid); }
.lp-globe-live { width: 8px; height: 8px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 0 var(--hot); animation: lp-pisca 1.5s ease-out infinite; flex: none; }
.lp-globe-label.trocando b { animation: fg-troca .5s var(--ease); }
@keyframes fg-troca { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Lado do globo: prova (nota + satisfação) + avaliações */
.lp-social-side { display: flex; flex-direction: column; gap: 20px; }
.lp-social-proof { display: flex; align-items: stretch; gap: clamp(18px, 3vw, 30px); }
/* os dois itens têm a MESMA estrutura (número + rótulo numa linha só), então o
   número e o rótulo de cada lado ficam na mesma altura */
.lp-proof-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lp-proof-num {
    font-family: 'Anton', sans-serif; font-size: clamp(40px, 5vw, 54px); line-height: 1;
    color: var(--ink); letter-spacing: .01em;
}
.lp-proof-num small { font-size: .4em; color: var(--ink-dim); font-weight: 400; margin-left: 1px; }
.lp-proof-hot {
    background: linear-gradient(120deg, var(--accent2), var(--hot));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-proof-stars { color: var(--gold); font-size: .92em; letter-spacing: 1px; }
.lp-proof-lbl {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .1em;
    margin-top: auto;   /* cola o rótulo embaixo: os dois rótulos alinham na base */
}
.lp-proof-sep { width: 1px; align-self: stretch; background: var(--line); }
@media (max-width: 860px) {
    .lp-social-side { text-align: center; align-items: center; }
    .lp-social-proof { justify-content: center; }
    .lp-proof-item { align-items: center; }
}

/* Avaliações empilhadas: uma à frente, a próxima espiando atrás; a cada troca a
   de trás vem pra frente e a atual recua, com transição. O print já é o card:
   moldura mínima, cantos pouco arredondados, nada de caixa por fora. */
.lp-rev-stack { position: relative; width: 100%; max-width: 460px; aspect-ratio: 3 / 2; margin-top: 4px; }
.lp-social-side .lp-rev-stack { margin-inline: 0; }
@media (max-width: 860px) { .lp-social-side .lp-rev-stack { margin-inline: auto; } }
.lp-rev-card {
    position: absolute; inset: 0; width: 100%; height: 100%;
    /* cover + topo: preenche o card sem borda branca. Nas paisagens (já 3:2)
       não corta nada; nas verticais (DM) mostra o topo com as mensagens e come
       só a sobra vazia de baixo. */
    object-fit: cover; object-position: top center; background: #14141c;
    border-radius: 6px; border: 1px solid var(--line);
    box-shadow: 0 20px 44px -20px rgba(0,0,0,.85);
    transform-origin: bottom center;
    /* estado padrão = recuada e invisível (sai por baixo/trás) */
    opacity: 0; transform: scale(.82) translateY(30px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    pointer-events: none; z-index: 0;
}
/* mais entortadas e deslocadas: a pilha aparece bem atrás da da frente */
.lp-rev-card.is-back2 { opacity: .35; transform: scale(.9)  translate(34px, 24px) rotate(9deg);  z-index: 1; }
.lp-rev-card.is-back  { opacity: .6;  transform: scale(.95) translate(18px, 13px) rotate(5deg);  z-index: 2; }
.lp-rev-card.is-front { opacity: 1;   transform: none; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
    .lp-rev-card { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   Novas seções — v50
   TrustBar, PainSection, ProductShowcase, Bonus, Guarantee, HowItWorks
   ══════════════════════════════════════════════════════════════ */

/* ── TRUST BAR ───────────────────────────────────────────────── */
.lp-trust-bar {
    padding: 28px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(124,92,252,.06), rgba(255,45,120,.06));
}
.lp-trust-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center;
}
.lp-trust-item {
    font-family: 'Anton', sans-serif;
    font-size: clamp(26px, 3.6vw, 38px); line-height: 1.1; letter-spacing: .01em;
    background: linear-gradient(120deg, var(--accent2), var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-trust-item span {
    display: block; font-family: 'Manrope', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-dim); margin-top: 4px;
}
@media (max-width: 560px) {
    .lp-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
}

/* ── PAIN SECTION ─────────────────────────────────────────────── */
.lp-pain-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 780px; margin-inline: auto;
}
@media (max-width: 640px) { .lp-pain-grid { grid-template-columns: 1fr; max-width: 420px; } }
.lp-pain-card {
    padding: 28px 24px; border-radius: var(--r); border: 1px solid var(--line);
    background: var(--surface);
}
.lp-pain-card h3 { font-size: 19px; font-weight: 800; margin-bottom: 18px; text-align: center; letter-spacing: -.01em; }
.lp-pain-bad { border-color: rgba(255,45,120,.3); background: linear-gradient(170deg, rgba(255,45,120,.06), var(--surface)); }
.lp-pain-bad h3 { color: var(--hot); }
.lp-pain-good { border-color: rgba(29,185,84,.3); background: linear-gradient(170deg, rgba(29,185,84,.06), var(--surface)); }
.lp-pain-good h3 { color: var(--green); }
.lp-pain-card ul { list-style: none; display: grid; gap: 10px; }
.lp-pain-card li {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 6px;
    background: rgba(255,255,255,.03); font-size: 14.5px; font-weight: 600;
    color: var(--ink-mid);
}
.lp-pain-bad li { text-decoration: line-through; text-decoration-color: rgba(255,45,120,.4); }
.lp-pain-card li svg { width: 18px; height: 18px; flex: none; }
.lp-pain-bad li svg { color: var(--hot); }
.lp-pain-good li svg { color: var(--green); }

/* ── PRODUCT SHOWCASE (app por dentro) ────────────────────────── */
.lp-devices {
    display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 3vw, 32px);
    margin-top: clamp(28px, 4vw, 48px);
}
@media (max-width: 720px) {
    .lp-devices { flex-direction: column; align-items: center; gap: 28px; }
}
.lp-device { margin: 0; text-align: center; }
.lp-device-phone { max-width: 240px; flex: none; }
.lp-device-desk { max-width: 560px; flex: none; }
@media (max-width: 720px) {
    .lp-device-phone { max-width: 200px; }
    .lp-device-desk { max-width: 100%; }
}
.lp-phone-frame {
    position: relative; border-radius: 18px; overflow: hidden;
    border: 3px solid #2a2a3a; background: #000;
    box-shadow: 0 24px 50px -18px rgba(0,0,0,.8);
    aspect-ratio: 9 / 19;
}
.lp-phone-frame video, .lp-screen-frame video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.lp-screen-frame {
    position: relative; border-radius: 8px; overflow: hidden;
    border: 2px solid #2a2a3a; background: #000;
    box-shadow: 0 24px 50px -18px rgba(0,0,0,.8);
    aspect-ratio: 16 / 10;
}
.lp-device-cap {
    margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--ink-dim);
    letter-spacing: .06em; text-transform: uppercase;
}
.lp-showcase-features {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    max-width: 820px; margin: clamp(28px, 4vw, 48px) auto 0;
    list-style: none;
}
.lp-showcase-features li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 14.5px; color: var(--ink-mid);
}
.lp-showcase-features li span {
    font-family: 'Anton', sans-serif; font-size: 18px; color: var(--accent2); flex: none; line-height: 1.2;
}
@media (max-width: 640px) {
    .lp-showcase-features { grid-template-columns: 1fr; }
}

/* ── BONUS ────────────────────────────────────────────────────── */
.lp-bonus-card {
    position: relative; overflow: hidden;
    max-width: 620px; margin-inline: auto;
    padding: 36px 32px; border-radius: 10px;
    background: linear-gradient(150deg, rgba(124,92,252,.12), rgba(255,45,120,.08));
    border: 1px solid rgba(124,92,252,.3);
    text-align: center;
}
.lp-bonus-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255,193,77,.14); border: 1px solid rgba(255,193,77,.3);
    font-size: 12px; font-weight: 800; color: var(--gold);
    letter-spacing: .04em; text-transform: uppercase; margin-bottom: 20px;
}
.lp-bonus-card h2 { font-family: 'Anton', sans-serif; font-size: clamp(28px, 4.2vw, 38px); letter-spacing: .01em; text-transform: uppercase; }
.lp-bonus-card p { margin-top: 12px; color: var(--ink-mid); font-size: 15.5px; max-width: 44ch; margin-inline: auto; }
.lp-bonus-img { margin-top: 24px; display: flex; justify-content: center; }
.lp-bonus-img img { max-width: 180px; height: auto; }
.lp-bonus-glow {
    position: absolute; z-index: -1; pointer-events: none;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(124,92,252,.3), transparent 70%);
    top: -60px; left: 50%; transform: translateX(-50%);
    filter: blur(40px);
}

/* ── GUARANTEE ────────────────────────────────────────────────── */
.lp-guarantee-sec { background: linear-gradient(180deg, transparent, rgba(29,185,84,.04) 50%, transparent); }
.lp-guarantee-row {
    display: flex; align-items: center; gap: 20px;
    max-width: 620px; margin-inline: auto;
    padding: 28px 30px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--line);
}
@media (max-width: 560px) {
    .lp-guarantee-row { flex-direction: column; text-align: center; }
}
.lp-guarantee-icon {
    width: 52px; height: 52px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 26px;
    background: rgba(29,185,84,.12);
}
.lp-guarantee-copy { flex: 1; min-width: 0; }
.lp-guarantee-copy h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.lp-guarantee-copy p { margin-top: 4px; font-size: 14.5px; color: var(--ink-mid); }

/* ── HOW IT WORKS ─────────────────────────────────────────────── */
.lp-how-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 640px) { .lp-how-grid { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; } }
.lp-how-step {
    text-align: center; padding: 32px 20px 28px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    transition: transform .3s var(--ease), border-color .3s;
}
.lp-how-step:hover { transform: translateY(-4px); border-color: rgba(124,92,252,.4); }
.lp-how-num {
    display: block; font-family: 'Anton', sans-serif;
    font-size: clamp(48px, 6vw, 64px); line-height: 1;
    background: linear-gradient(140deg, var(--accent2), var(--hot));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: 12px;
}
.lp-how-step h3 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }

/* ── Ajustes responsivos para novas seções ───────────────────── */
@media (max-width: 720px) {
    .lp-pain-card, .lp-bonus-card, .lp-how-step { text-align: center; }
    .lp-pain-card ul { text-align: left; }
}