@charset "UTF-8";

/* ============================================================================
   blanco.css — camada visual da página editorial do Código 963
   ----------------------------------------------------------------------------
   Carregado DEPOIS de styles.css e SÓ no apps/landing/index.html.
   É por isso que nenhum seletor daqui precisa (nem deve) de escopo extra:
   o escopo é o próprio arquivo. vsl.html e upsell.html continuam usando
   styles.css sozinho e não mudam de aparência.

   Rollback visual = apagar a linha do <link>. Nada aqui depende de JS.

   O que este arquivo faz, em ordem:
     0. Tokens (paleta, tipografia, medidas) e neutralização dos tokens legados
     1. Base: corpo em papel, tipografia editorial, foco visível
     2. Layout: bandas, shell de 1080px, coluna de leitura de 680px
     3. Trava visual: mata glow, partícula, selo em imagem, depoimento, âncora
        de preço e qualquer resto do tema escuro dourado
     4. Blocos novos: .lk-brief .lk-tonelab .lk-ruta .lk-tesis .lk-noes
        .lk-merchant
     5. Blocos herdados repaginados: hero, oferta/checkout, garantia, entrega,
        FAQ, fechamento, rodapé, gate de e-mail, popup, barras fixas
     6. Preço (só via JS) e movimento reduzido

   CONTRATO DE MARCAÇÃO — quem manda é o index.html
   ------------------------------------------------
   O HTML é a fonte da verdade. Este arquivo se encaixa nele, nunca o contrário.
   A forma canônica de uma banda, do jeito que o index.html escreve:

   <section class="lk-XXX">              banda: paga o gutter lateral uma vez
     <div class="lk-container lk-read">  coluna de leitura de 680px
       <p class="lk-kicker lk-kicker--claro">…</p>   (sem --claro sobre escuro)
       <h2 class="lk-h2">…</h2>
       …
     </div>
   </section>

   Bandas nomeadas, na ordem da página (docs/PAGINA-BRANCA-CODE963.md §3):
     .lk-ribbon    obsidiana · .lk-ribbon-text
     .lk-hero.lk-hero--editorial  obsidiana · .lk-kicker .lk-subhead .lk-hero-actions
     .lk-brief     papel      · .lk-brief-text
     .lk-tonelab   noche      · .lk-tonelab-text .lk-tone-grid > .lk-tone-btn
                                (> .lk-tone-hz + .lk-tone-label) · .lk-tone-note
     .lk-ruta      papel      · .lk-ruta-form > .lk-ruta-q > .lk-ruta-legend
                                + .lk-ruta-options > .lk-ruta-option
                                · .lk-ruta-result > .lk-ruta-result-text
     .lk-tesis     papel fundo· .lk-tesis-grid > .lk-tesis-item
                                (> .lk-tesis-num + .lk-tesis-title) · .lk-tesis-close
     .lk-incluye   papel      · .lk-incluye-list · .lk-h3 · .lk-incluye-extra
     .lk-noes      papel fundo· .lk-noes-list
     .lk-checkout-section  papel · .lk-offer-box > .lk-container.lk-read
                                > .lk-offer-title .lk-offer-subtitle
                                > .lk-checkout-sticky-aside
                                  > .lk-price-card (.lk-price-new/.lk-price-highlight,
                                    .lk-price-cash, .lk-price-terms, .lk-descargo,
                                    .lk-email-gate, .lk-secure-footer, .lk-legal-inline)
                                  > .lk-guarantee-card > .lk-guarantee-title
     .lk-entrega   papel      · .lk-entrega-steps · .lk-entrega-vida
     .lk-faq       papel      · .lk-faq-container > .lk-faq-item
     .lk-cierre    papel fundo· .lk-cierre-title .lk-cierre-text
                                .lk-offer-closing-btn .lk-cierre-trust
     .lk-merchant  papel      · .lk-merchant-list
     .lk-footer    obsidiana  · .lk-footer-legal .lk-footer-note .lk-disclaimer

   Utilitários disponíveis:
     .lk-read         coluna de leitura de 680px — combina com .lk-container
     .lk-shell/.lk-col  os mesmos limites como classe solta (1080 / 680)
     .lk-sec-head     título à esquerda + parágrafo de apoio à direita (desktop)
     .lk-kicker       rótulo 11px/800/uppercase  ·  --claro = sobre papel
     .lk-h2 / .lk-h3  títulos de seção, quando o elemento não basta
     .lk-note         metadado 12px   ·  .lk-note--min  nota 11px
     .lk-descargo     bloco de aviso legível acima do botão de compra
     .lk-btn-oro      ÚNICO botão sólido (ação de compra)
     .lk-btn-ghost    botão fantasma sobre claro  ·  --hero/--oscuro sobre escuro
     .lk-figure       captura do app com hairline + legenda 11px
     .lk-blanco-band  banda genérica (mesma densidade das seções nomeadas)
     .lk-band--papel / .lk-band--hondo / .lk-band--oscuro  só a cor de fundo

   Estados: o CSS aceita os DOIS vocabulários de estado (o do aria e o de classe,
   em espanhol e em inglês) para não depender de qual JS acabar plugado:
     tom tocando       [aria-pressed="true"] · .is-playing · .is-sonando
     opção escolhida   :has(input:checked)   · input:checked + span
                       [aria-pressed="true"] · .is-selected · .is-elegida

   Preço: NUNCA literal no HTML. Só .lk-price-highlight e .lk-price-inline
   (dentro de .lk-price-inline-wrap[hidden]), preenchidos pelo landing.js com o
   valor que o servidor confirma.
   ========================================================================= */


/* ============================================================================
   0. TOKENS
   ========================================================================= */

:root {
  /* --- paleta (docs/PAGINA-BRANCA-CODE963.md §3) --- */
  --obsidiana: #0E0D0C;
  /* hero, cinta e rodapé */
  --noche: #17150F;
  /* única seção escura do corpo: a câmara de escuta */
  --papel: #F7F4EC;
  /* corpo */
  --papel-hondo: #EDE7DA;
  /* faixa alternada */
  --tinta: #1C1A17;
  /* texto sobre claro */
  --tinta-suave: #57534B;
  /* secundário, metadados, notas */
  --sobre-oscuro: #F0EBDF;
  /* texto sobre escuro */
  --sobre-oscuro-suave: #C9C2B4;
  /* secundário sobre escuro */

  /* hairline de 1px substitui TODA borda dourada de 2px do tema antigo */
  --linea: rgba(28, 26, 23, .12);
  --linea-fuerte: rgba(28, 26, 23, .22);
  --linea-oscura: rgba(240, 235, 223, .16);
  --linea-oscura-fuerte: rgba(240, 235, 223, .28);

  --oro: #9A7B3F;
  /* ouro fosco: só a ação de compra */
  --oro-hover: #B08C49;
  --oro-claro: #C6A35C;
  /* numerais e kickers sobre escuro */
  --terracota: #8A4B34;
  /* aviso e kicker sobre claro. Zero #E11D48, zero verde */

  /* --- tipografia --- */
  --fuente-titulo: 'Lora', Georgia, 'Times New Roman', serif;
  --fuente-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* --- medidas --- */
  --shell: 1080px;
  --col: 680px;
  --gutter: 20px;
  --radio: 6px;
  --banda-y: 72px;
  /* densidade mobile; 104px no desktop, mais abaixo */

  /* --- tokens legados do styles.css, neutralizados ---
     Qualquer regra antiga que ainda leia --c-* passa a ler papel/tinta em vez
     de dourado brilhante. É a rede embaixo das sobrescritas explícitas. */
  --c-primary: #9A7B3F;
  --c-bg-dark: #0E0D0C;
  --c-surface-cream: #F7F4EC;
  --c-fg-dark: #1C1A17;
  --c-fg-light: #F0EBDF;
  --c-muted-light: #C9C2B4;
  --c-muted-dark: #57534B;
  --c-border-gold: rgba(28, 26, 23, .12);
  --c-border-light: rgba(28, 26, 23, .12);
  --radius: 6px;
}


/* ============================================================================
   1. BASE
   ========================================================================= */

body {
  background-color: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* O cloaker está desligado: esta página não tem nada a esconder de ninguém.
   Sem isto, uma falha no landing.js deixaria o visitante numa tela em branco
   (o styles.css esconde main/footer até o JS liberar). */
body.lk-cloak-pending main,
body.lk-cloak-pending footer,
body.lk-cloak-pending .lk-top-alert {
  visibility: visible;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  /* nunca 900: peso 900 é o que grita "página de suplemento" */
  color: var(--tinta);
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(30px, 5.2vw, 52px);
  line-height: 1.06;
}

h2 {
  font-size: clamp(23px, 3.4vw, 32px);
  line-height: 1.15;
}

h3 {
  font-size: 19px;
  line-height: 1.3;
}

p {
  margin: 0;
}

p+p {
  margin-top: 16px;
}

strong,
b {
  font-weight: 600;
  color: inherit;
}

/* Link de corpo: sublinhado, sem negrito dourado. */
main a:not([class]),
.lk-col a:not([class]),
.lk-brief a,
.lk-merchant a,
.lk-noes a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--linea-fuerte);
}

main a:not([class]):hover,
.lk-col a:not([class]):hover {
  text-decoration-color: var(--terracota);
  color: var(--terracota);
}

/* O `.gold` do tema antigo vira ouro fosco, sem glow e sem peso 700. */
.gold {
  color: var(--oro);
  font-weight: 600;
  text-shadow: none;
}

.lk-hero .gold,
.lk-tonelab .gold,
.lk-footer .gold,
.lk-top-alert .gold {
  color: var(--oro-claro);
}

/* Foco sempre visível — quase todo o tráfego é webview, e teclado externo e
   leitor de tela precisam do contorno. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
  border-radius: 2px;
}

.lk-hero :focus-visible,
.lk-tonelab :focus-visible,
.lk-footer :focus-visible,
.lk-top-alert :focus-visible {
  outline-color: var(--oro-claro);
}

img {
  max-width: 100%;
  height: auto;
}


/* ============================================================================
   2. LAYOUT — bandas, régua de 1080, coluna de leitura de 680
   ========================================================================= */

/* O <main> da página. Fica como bloco simples: o body do styles.css é flex
   em coluna, então a largura já é a da viewport e a altura é a do conteúdo. */
.lk-blanco {
  display: block;
  width: 100%;
  background: var(--papel);
  color: var(--tinta);
  overflow-x: clip;
}

/* A régua legada do styles.css era 960px. */
.lk-container {
  max-width: var(--shell);
}

.lk-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
}

/* Coluna de leitura. O index.html escreve sempre `class="lk-container lk-read"`,
   então a regra precisa de duas classes para ganhar do max-width do container. */
.lk-read,
.lk-col {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
}

.lk-container.lk-read {
  max-width: var(--col);
}

/* Toda banda paga o gutter lateral uma vez só; o container interno não repete.
   Em 360px sobram 320px de conteúdo. */
.lk-ribbon,
.lk-brief,
.lk-tonelab,
.lk-ruta,
.lk-tesis,
.lk-incluye,
.lk-noes,
.lk-entrega,
.lk-faq,
.lk-cierre,
.lk-merchant,
.lk-blanco-band {
  padding-block: var(--banda-y);
  padding-inline: var(--gutter);
}

/* A cinta é fina: banda, mas não seção. */
.lk-ribbon {
  padding-block: 10px;
}

/* Genérico de propósito: qualquer banda filha do <main> zera o padding do
   container, inclusive as que ainda não existem. O rodapé fica de fora (ele
   vive fora do <main> e o padding lateral dele é o do próprio container). */
.lk-blanco>section>.lk-container,
.lk-blanco>div>.lk-container,
.lk-offer-box>.lk-container,
.lk-brief>.lk-shell,
.lk-brief>.lk-col,
.lk-tonelab>.lk-shell,
.lk-tonelab>.lk-col,
.lk-ruta>.lk-shell,
.lk-ruta>.lk-col,
.lk-tesis>.lk-shell,
.lk-tesis>.lk-col,
.lk-noes>.lk-shell,
.lk-noes>.lk-col,
.lk-merchant>.lk-shell,
.lk-merchant>.lk-col,
.lk-blanco-band>.lk-container {
  padding-inline: 0;
}

/* Âncoras internas (#camara-de-escucha, #checkout-section, #garantia, #tres-preguntas)
   não podem encostar no topo da viewport quando o link do rodapé salta para elas. */
.lk-blanco [id],
#garantia {
  scroll-margin-top: 24px;
}

.lk-band--papel {
  background: var(--papel);
  color: var(--tinta);
}

.lk-band--hondo {
  background: var(--papel-hondo);
  color: var(--tinta);
}

.lk-band--oscuro {
  background: var(--obsidiana);
  color: var(--sobre-oscuro);
}

/* Cabeçalho de seção: título à esquerda, parágrafo de apoio à direita.
   É o que tira o visual de "bloco de VSL centralizado" sem mexer no conteúdo. */
.lk-sec-head {
  display: grid;
  gap: 16px;
}

.lk-sec-head h2 {
  margin: 0;
}

.lk-sec-head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta-suave);
}

/* 40px entre o cabeçalho e o corpo da seção. */
.lk-sec-head+* {
  margin-top: 40px;
}

.lk-kicker {
  font-family: var(--fuente-texto);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracota);
  margin: 0 0 14px;
}

.lk-tonelab .lk-kicker,
.lk-hero .lk-kicker,
.lk-footer .lk-kicker,
.lk-band--oscuro .lk-kicker {
  color: var(--oro-claro);
}

/* --claro = kicker sobre papel. É o mesmo terracota do padrão, declarado à mão
   para que a variante do HTML nunca dependa de herança. */
.lk-kicker--claro {
  color: var(--terracota);
}

/* Títulos de seção. Só medida e ritmo: a cor vem da regra de h1..h4 lá de cima
   (e de .lk-tonelab h2, que ganha em especificidade sobre a banda escura). */
.lk-h2 {
  margin: 0 0 24px;
  font-family: var(--fuente-titulo);
  font-size: clamp(23px, 3.4vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: var(--col);
}

.lk-h3 {
  margin: 40px 0 12px;
  font-family: var(--fuente-titulo);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  max-width: var(--col);
}

.lk-note {
  font-size: 12px;
  line-height: 1.55;
  color: var(--tinta-suave);
  margin: 0;
}

.lk-note--min {
  font-size: 11px;
  line-height: 1.55;
}

.lk-tonelab .lk-note,
.lk-hero .lk-note,
.lk-footer .lk-note,
.lk-band--oscuro .lk-note {
  color: var(--sobre-oscuro-suave);
}

.lk-hair {
  border: 0;
  border-top: 1px solid var(--linea);
  margin: 32px 0;
}

/* Única imagem da página: captura real do app. */
.lk-figure {
  margin: 40px 0 0;
  max-width: var(--col);
}

.lk-figure img {
  display: block;
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: 2px;
  box-shadow: none;
}

.lk-figure figcaption {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--tinta-suave);
}

@media (min-width: 900px) {

  .lk-brief,
  .lk-tonelab,
  .lk-ruta,
  .lk-tesis,
  .lk-incluye,
  .lk-noes,
  .lk-entrega,
  .lk-faq,
  .lk-cierre,
  .lk-merchant,
  .lk-blanco-band {
    padding-block: 104px;
  }

  .lk-sec-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }
}


/* ============================================================================
   3. TRAVA VISUAL — o tema escuro dourado morre aqui
   ========================================================================= */

/* Partículas animadas, linhas de acento e o shimmer do topo do hero. */
.hero-particles,
.particle,
.hero-accent-line {
  display: none !important;
}

.lk-hero::before,
.lk-hero::after {
  content: none !important;
  display: none !important;
}

/* Depoimento, selo de compra conferida, estrelas, prova social numérica e
   barra de logos de autoridade: já saíram do HTML na Fase 0. A regra fica como
   segunda tranca — se algum bloco voltar por descuido, ele não aparece.
   (O check de alegação proibida varre HTML e JS; esta tranca é a do CSS.) */
.lk-testimonials-title,
.lk-testimonials-grid,
.lk-testimonial-card,
.lk-carousel,
.lk-carousel-track,
.lk-carousel-arrow,
.lk-carousel-dots,
.lk-social-proof-banner,
.lk-testimonial-verified,
.lk-testimonial-stars,
.lk-authority-bar,
.lk-authority-title {
  display: none !important;
}

/* Âncora de preço riscado: não existe nesta página, venha de onde vier. */
.lk-price-old,
.lk-price-old del {
  display: none !important;
}

/* Selo de garantia em imagem e badge em emoji. */
.lk-guarantee-seal,
.lk-guarantee-badge,
.lk-bonus-icon,
.lk-thanks-icon {
  display: none !important;
}

/* Timer/urgência do popup e ping do pulso de compra: sem animação de pressa. */
.lk-popup-badge--alert,
.lk-buyer-pulse-dot,
.lk-btn--checkout,
.lk-btn--checkout-samcart,
.lk-scroll-cta-btn,
.lk-sticky-cta,
.lk-sticky-cta-btn,
.lk-email-gate-btn,
.lk-footer-cta-btn,
.lk-offer-closing-btn,
.lk-checkout-section,
.lk-scroll-cta,
.lk-ext-nudge {
  animation: none !important;
}

/* Nenhum glow dourado, nenhuma sombra verde, em lugar nenhum. */
.lk-hero,
.lk-checkout-section,
.lk-offer-box,
.lk-price-card,
.lk-vsl-container,
.lk-guarantee-box-cert,
.lk-delivery-box,
.lk-faq-item,
.lk-order-bump,
.lk-popup-content,
.lk-buyer-pulse-card,
.lk-ext-nudge,
.lk-btn--checkout,
.lk-btn--checkout-samcart,
.lk-sticky-cta-btn,
.lk-scroll-cta-btn,
.lk-email-gate-btn,
.lk-footer-cta-btn,
.lk-offer-closing-btn,
.lk-thanks-btn,
.lk-popup-submit-btn {
  box-shadow: none;
  text-shadow: none;
}


/* ============================================================================
   4. BLOCOS NOVOS
   ========================================================================= */

/* --- 4.1 .lk-brief — Respuesta breve -------------------------------------- */

.lk-brief {
  background: var(--papel);
  color: var(--tinta);
}

/* A "caixa com hairline em cima e embaixo" da §3. No index.html ela é o próprio
   parágrafo (.lk-brief-text); .lk-brief-box fica para quando a resposta breve
   precisar de mais de um bloco. */
.lk-brief-box,
.lk-brief-text {
  border-top: 1px solid var(--linea-fuerte);
  border-bottom: 1px solid var(--linea-fuerte);
  padding-block: 28px;
}

.lk-brief-box>*+* {
  margin-top: 16px;
}

.lk-brief p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--tinta);
}

/* O preço revelado dentro da resposta breve não pode virar destaque de oferta. */
.lk-brief-text .lk-price-inline {
  font-weight: 600;
}

/* A linha de oferta (pago único · de por vida · 90 días) fica em metadado. */
.lk-brief-meta {
  font-size: 13px;
  line-height: 1.6;
  color: var(--tinta-suave);
  letter-spacing: .01em;
}


/* --- 4.2 .lk-tonelab — Cámara de escucha (única banda escura do corpo) ----- */

.lk-tonelab {
  background: var(--noche);
  color: var(--sobre-oscuro);
}

.lk-tonelab h2,
.lk-tonelab h3 {
  color: var(--sobre-oscuro);
}

.lk-tonelab p,
.lk-tonelab .lk-sec-head p {
  color: var(--sobre-oscuro-suave);
}

/* Texto de apresentação da câmara, acima dos quatro botões. */
.lk-tonelab-text {
  margin: 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--sobre-oscuro-suave);
}

/* .lk-tone-grid é o nome que o index.html usa; .lk-tonelab-grid fica como
   sinônimo para não quebrar quem já tinha escrito o outro. */
.lk-tone-grid,
.lk-tonelab-grid {
  display: grid;
  /* 2 colunas em 360px, 4 a partir de 720px */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.lk-tone-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--linea-oscura-fuerte);
  border-radius: var(--radio);
  color: var(--sobre-oscuro);
  font-family: var(--fuente-texto);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease;
}

.lk-tone-btn:hover {
  border-color: var(--linea-oscura-fuerte);
  background: rgba(240, 235, 223, .05);
}

/* Tocando: um tom por vez, sem pulsar — só a borda muda.
   Os três seletores existem porque o estado pode chegar pelo aria (o correto),
   por .is-playing ou por .is-sonando, conforme o JS que estiver plugado. */
.lk-tone-btn[aria-pressed="true"],
.lk-tone-btn.is-playing,
.lk-tone-btn.is-sonando {
  border-color: var(--oro-claro);
  background: rgba(198, 163, 92, .10);
}

.lk-tone-btn:disabled,
.lk-tone-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: default;
}

/* Os dois <span> dentro do botão. Nomes do index.html primeiro. */
.lk-tone-hz,
.lk-tone-btn-hz {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--sobre-oscuro);
  font-variant-numeric: tabular-nums;
}

.lk-tone-label,
.lk-tone-btn-label,
.lk-tonelab__accion {
  display: block;
  font-family: var(--fuente-texto);
  font-size: 11px;
  line-height: 1.35;
  /* .06em (e não .08em) porque em 360px a coluna tem 155px e "abrir 8 segundos"
     precisa caber sem quebrar em três linhas. */
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sobre-oscuro-suave);
}

/* Enquanto o tom soa, o rótulo vira a ação inversa e ganha a cor do ouro. */
.lk-tone-btn[aria-pressed="true"] .lk-tone-label,
.lk-tone-btn.is-playing .lk-tone-label,
.lk-tone-btn.is-sonando .lk-tone-label,
.lk-tone-btn[aria-pressed="true"] .lk-tonelab__accion,
.lk-tone-btn.is-sonando .lk-tonelab__accion {
  color: var(--oro-claro);
}

/* Barra de progresso dos 8 segundos, se o tono.js quiser usá-la:
   o JS só precisa escrever --lk-tone-progress de 0 a 1. */
.lk-tone-bar {
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 6px;
  background: var(--linea-oscura);
  overflow: hidden;
}

.lk-tone-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--oro-claro);
  transform: scaleX(var(--lk-tone-progress, 0));
  transform-origin: left center;
}

/* Nota de escuta segura: 11px, sempre visível, nunca escondida atrás de toggle. */
.lk-tone-note,
.lk-tonelab-note {
  margin-top: 20px;
  max-width: 560px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--sobre-oscuro-suave);
}

/* Região aria-live da câmara, se o JS criar uma: lida por leitor de tela,
   sem ocupar espaço nem competir com o texto. */
.lk-tonelab [data-tono-status] {
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--sobre-oscuro-suave);
}

@media (min-width: 720px) {

  .lk-tone-grid,
  .lk-tonelab-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* --- 4.3 .lk-ruta — Tres preguntas + Tu ruta ------------------------------ */

.lk-ruta {
  background: var(--papel);
  color: var(--tinta);
}

.lk-ruta-q {
  border: 0;
  border-top: 1px solid var(--linea);
  margin: 24px 0 0;
  padding: 24px 0 0;
}

.lk-ruta-q:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.lk-ruta-form {
  display: block;
  margin: 0;
  border: 0;
  padding: 0;
}

/* O <legend> do fieldset. O index.html marca a classe; a versão por elemento
   fica junto para o caso de um bloco sem classe. */
.lk-ruta-legend,
.lk-ruta-q legend,
.lk-ruta-q-label,
.lk-ruta__pregunta[aria-label]>strong {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0 0 14px;
  font-family: var(--fuente-titulo);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}

/* Uma opção por linha em 360px, duas a partir de 560px. Empilhado, e não em
   chips que reembrulham: as respostas têm tamanhos muito diferentes
   ("Bluetooth" vs "Bajarle el volumen a la cabeza") e a fileira ficava rasgada. */
.lk-ruta-options,
.lk-ruta-opts,
.lk-ruta__opciones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Linha de escolha com hairline. Funciona como <label><input radio><span>
   (o contrato do index.html) e também como <button aria-pressed>. */
.lk-ruta-option,
.lk-ruta-opt,
.lk-ruta__opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease;
}

/* O rádio fica VISÍVEL, desenhado à mão. Esconder o input obrigaria o estado
   de escolha a depender de :has() ou de JS; assim o `input:checked` pinta o
   próprio controle em qualquer navegador, mesmo se nenhum script rodar. */
.lk-ruta-option input[type="radio"],
.lk-ruta-opt input[type="radio"],
.lk-ruta-option input[type="checkbox"],
.lk-ruta-opt input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.lk-ruta-option input[type="checkbox"],
.lk-ruta-opt input[type="checkbox"] {
  border-radius: 2px;
}

/* Marcado: círculo em ouro, anel de papel por dentro, miolo em ouro. Tudo em
   box-shadow inset — sem pseudo-elemento e sem imagem, então o controle
   continua sendo o próprio <input> para o leitor de tela. */
.lk-ruta-option input:checked,
.lk-ruta-opt input:checked {
  background: var(--oro);
  border-color: var(--oro);
  box-shadow: inset 0 0 0 3px var(--papel);
}

/* O <span> com o texto da resposta. */
.lk-ruta-option>span,
.lk-ruta-opt>span,
.lk-ruta__opcion>span {
  flex: 1 1 auto;
  min-width: 0;
}

/* Escolhido, sem :has(): o irmão do input marcado engrossa. */
.lk-ruta-option input:checked+span,
.lk-ruta-opt input:checked+span {
  font-weight: 600;
}

.lk-ruta-option:hover,
.lk-ruta-opt:hover,
.lk-ruta__opcion:hover {
  border-color: var(--tinta-suave);
}

.lk-ruta-option[aria-pressed="true"],
.lk-ruta-opt[aria-pressed="true"],
.lk-ruta__opcion[aria-pressed="true"],
.lk-ruta-option.is-selected,
.lk-ruta-opt.is-selected,
.lk-ruta-option.is-elegida,
.lk-ruta__opcion.is-elegida {
  border-color: var(--tinta);
  background: rgba(28, 26, 23, .05);
  font-weight: 600;
}

/* Regra à parte de propósito: um navegador sem :has() descarta a LISTA inteira
   de seletores em que o :has() aparece. Isolado, o estado por input:checked,
   aria-pressed e .is-* acima continua valendo mesmo onde :has() não existe. */
.lk-ruta-option:has(input:checked),
.lk-ruta-opt:has(input:checked) {
  border-color: var(--tinta);
  background: rgba(28, 26, 23, .05);
}

/* Foco pelo teclado: o :focus-within cobre todo navegador; o :has() só afina
   para não acender a linha inteira no clique de mouse. */
.lk-ruta-option:focus-within,
.lk-ruta-opt:focus-within {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}

.lk-ruta-option:has(input:focus:not(:focus-visible)),
.lk-ruta-opt:has(input:focus:not(:focus-visible)) {
  outline: none;
}

/* O contorno é o da linha inteira; o input não desenha um segundo por cima. */
.lk-ruta-option input:focus-visible,
.lk-ruta-opt input:focus-visible {
  outline: none;
}

.lk-ruta-note {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* Resultado. O qualificador ("no es un diagnóstico…") vive NESTE bloco, na
   MESMA tipografia do resto — nada de letra miúda para a ressalva. */
.lk-ruta-result {
  margin-top: 32px;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--oro);
}

.lk-ruta-result[hidden] {
  display: none !important;
}

.lk-ruta-result .lk-kicker {
  margin-bottom: 10px;
}

.lk-ruta-result-title {
  margin: 0 0 12px;
  font-family: var(--fuente-titulo);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta);
}

.lk-ruta-result p,
.lk-ruta-result-text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--tinta);
}

.lk-ruta-result-text+.lk-ruta-result-text {
  margin-top: 16px;
}

/* A nota de privacidade fecha a seção, depois do resultado. */
.lk-ruta>.lk-container>.lk-note,
.lk-ruta .lk-read>.lk-note {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
}

@media (min-width: 560px) {

  .lk-ruta-options,
  .lk-ruta-opts,
  .lk-ruta__opciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* --- 4.4 .lk-tesis — lo que se mide / se cuenta / no afirmamos ------------- */

.lk-tesis {
  background: var(--papel-hondo);
  color: var(--tinta);
}

.lk-tesis-grid {
  display: grid;
  gap: 0;
  margin-top: 40px;
}

.lk-tesis-item {
  border-top: 1px solid var(--linea);
  padding-block: 28px;
}

/* Numeral em Lora dourada — decorativo, mas carrega a ordem 01/02/03, então
   usa --oro (3,4:1 sobre o papel fundo), não o --oro-claro que some. */
.lk-tesis-num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--fuente-titulo);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}

.lk-tesis-item h3,
.lk-tesis-title {
  margin: 0 0 12px;
  font-family: var(--fuente-texto);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracota);
}

.lk-tesis-item p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta);
}

.lk-tesis-close {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--linea);
  font-family: var(--fuente-titulo);
  font-size: 19px;
  line-height: 1.5;
  color: var(--tinta);
}

@media (min-width: 860px) {

  /* O grid 01/02/03 da §3 é o único bloco que sai da coluna de 680px: três
     colunas dentro de 680 dariam 200px cada, estreito demais para 16px de
     corpo. A banda abre para a régua de 1080 e o texto corrido dela continua
     travado em 680 logo abaixo. */
  .lk-tesis>.lk-container.lk-read {
    max-width: var(--shell);
  }

  .lk-tesis .lk-h2,
  .lk-tesis .lk-kicker,
  .lk-tesis-close {
    max-width: var(--col);
  }

  .lk-tesis-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    border-top: 1px solid var(--linea);
  }

  .lk-tesis-item {
    border-top: 0;
    padding-block: 32px 0;
  }

  .lk-tesis-item p {
    font-size: 15.5px;
  }
}


/* --- 4.5 .lk-incluye — Lo que recibes / Lo que no está incluido ------------ */
/* O inventário do que é entregue e, no MESMO corpo de texto e no mesmo tamanho
   de letra, os upsells divulgados antes do primeiro pagamento. A ressalva não
   pode virar letra miúda: é ela que evita o chargeback. */

.lk-incluye {
  background: var(--papel);
  color: var(--tinta);
}

.lk-incluye-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-width: var(--col);
}

.lk-incluye-list li {
  position: relative;
  border-top: 1px solid var(--linea);
  padding: 16px 0 16px 22px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--tinta);
}

.lk-incluye-list li:last-child {
  border-bottom: 1px solid var(--linea);
}

/* Marcador tipográfico em vez de emoji-selo: um traço em ouro fosco. */
.lk-incluye-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 16px;
  color: var(--oro);
  font-family: var(--fuente-titulo);
  line-height: 1.6;
}

.lk-incluye-list strong {
  font-weight: 600;
  color: var(--tinta);
}

.lk-incluye-list+.lk-note {
  margin-top: 16px;
}

/* "Lo que no está incluido": mesmo tamanho de corpo do resto, dentro de um
   bloco com hairline à esquerda — visível, nunca escondido. */
.lk-incluye-extra {
  max-width: var(--col);
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--linea-fuerte);
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta);
}


/* --- 4.6 .lk-noes — Lo que Código 963 no es -------------------------------- */

.lk-noes {
  background: var(--papel-hondo);
  color: var(--tinta);
}

.lk-noes-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  max-width: var(--col);
}

.lk-noes-list li {
  border-top: 1px solid var(--linea);
  padding-block: 16px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--tinta);
}

.lk-noes-list li:last-child {
  border-bottom: 1px solid var(--linea);
}


/* --- 4.7 .lk-merchant — Quién te está vendiendo esto ----------------------- */

.lk-merchant {
  background: var(--papel);
  color: var(--tinta);
  border-top: 1px solid var(--linea);
}

/* A lista do index.html: <li><strong>Rótulo:</strong> valor</li>. No desktop o
   rótulo vira a coluna da esquerda sem precisar de <dl>. */
.lk-merchant-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-width: var(--col);
}

.lk-merchant-list li {
  border-top: 1px solid var(--linea);
  padding-block: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta);
}

.lk-merchant-list li:last-child {
  border-bottom: 1px solid var(--linea);
}

.lk-merchant-list strong {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.lk-merchant-list+.lk-note {
  margin-top: 20px;
}

.lk-merchant-grid {
  margin: 28px 0 0;
  max-width: var(--col);
}

.lk-merchant-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding-block: 14px;
  border-top: 1px solid var(--linea);
}

.lk-merchant-row:last-child {
  border-bottom: 1px solid var(--linea);
}

.lk-merchant-row dt,
.lk-merchant-label {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.lk-merchant-row dd,
.lk-merchant-value {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta);
}

.lk-merchant-note {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--tinta-suave);
}

@media (min-width: 560px) {

  .lk-merchant-row,
  .lk-merchant-list li {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    column-gap: 20px;
    align-items: baseline;
  }
}


/* --- 4.8 .lk-entrega — Cómo recibes tu acceso ------------------------------ */
/* Fora do #checkout-section de propósito: a entrega tem que ser legível mesmo
   antes de o checkout ser revelado. */

.lk-entrega {
  background: var(--papel);
  color: var(--tinta);
}

.lk-entrega-steps {
  list-style: none;
  counter-reset: lk-paso;
  margin: 8px 0 0;
  padding: 0;
  max-width: var(--col);
}

.lk-entrega-steps li {
  position: relative;
  counter-increment: lk-paso;
  border-top: 1px solid var(--linea);
  padding: 18px 0 18px 42px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta);
}

.lk-entrega-steps li:last-child {
  border-bottom: 1px solid var(--linea);
}

/* Numeral em Lora dourada, o mesmo ornamento dos 01/02/03 da tese. */
.lk-entrega-steps li::before {
  content: counter(lk-paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--fuente-titulo);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}

.lk-entrega-steps strong {
  font-weight: 600;
  color: var(--tinta);
}

/* "Qué significa de por vida": a definição que sustenta a promessa da cinta.
   Fica destacada por hairline, não por caixa colorida. */
.lk-entrega-vida {
  max-width: var(--col);
  margin: 28px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--linea-fuerte);
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta);
}

.lk-entrega-vida+.lk-note {
  margin-top: 20px;
}


/* --- 4.9 .lk-cierre — o fechamento ---------------------------------------- */
/* A ÚNICA banda com botão de ouro sólido. Nada de eyebrow, nada de contagem. */

.lk-cierre {
  background: var(--papel-hondo);
  color: var(--tinta);
}

.lk-cierre-title {
  max-width: var(--col);
  margin: 0 0 20px;
  font-family: var(--fuente-titulo);
  font-size: clamp(25px, 3.8vw, 34px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--tinta);
}

.lk-cierre-text {
  max-width: var(--col);
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--tinta);
}

/* Fita de confiança: texto corrido separado por ponto médio, sem emoji-selo. */
.lk-cierre-trust {
  max-width: var(--col);
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--tinta-suave);
}


/* ============================================================================
   5. BLOCOS HERDADOS, REPAGINADOS
   ========================================================================= */

/* --- 5.1 Cinta de entrega (topo) ------------------------------------------ */
/* Era cinta de escassez. Agora é linha fria de entrega: o que se paga, o que se
   recebe, por quanto tempo. Sem ícone, sem número sorteado, sem contagem. */

/* .lk-ribbon é o nome no index.html; .lk-top-alert é o bloco legado do
   styles.css, mantido em pé para as outras páginas do mesmo tema. */
.lk-ribbon,
.lk-top-alert {
  background: var(--obsidiana);
  color: var(--sobre-oscuro-suave);
  border-bottom: 1px solid var(--linea-oscura);
  border-radius: 0;
  margin-bottom: 0;
  font-family: var(--fuente-texto);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .01em;
  text-transform: none;
}

.lk-top-alert {
  padding: 10px var(--gutter);
  text-align: center;
}

/* Alinhada à esquerda: a cinta e o H1 do hero usam o mesmo container, então as
   duas linhas nascem na mesma margem. Centralizar aqui quebraria esse prumo. */
.lk-ribbon-text {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sobre-oscuro-suave);
  text-align: left;
}

.lk-ribbon-text .lk-price-inline {
  color: var(--sobre-oscuro);
  font-weight: 600;
}

.lk-ribbon strong,
.lk-top-alert strong {
  color: var(--sobre-oscuro);
  font-weight: 600;
}


/* --- 5.2 Hero (escuro, sem vídeo) ----------------------------------------- */
/* A página principal não tem VSL: o vídeo mora em /vsl. O hero é tipografia
   sobre obsidiana, alinhado à esquerda, sem gradiente radial e sem vinheta. */

.lk-hero {
  background: var(--obsidiana);
  color: var(--sobre-oscuro);
  border-bottom: 1px solid var(--linea-oscura);
  padding: 64px var(--gutter) 56px;
  text-align: left;
  overflow: visible;
}

/* Modificador da variante sem vídeo: nada de min-height reservando o buraco do
   player, nada de centralização herdada. O hero é só tipografia. */
.lk-hero--editorial {
  display: block;
  min-height: 0;
  text-align: left;
}

.lk-hero .lk-container {
  padding-inline: 0;
}

.lk-hero h1 {
  max-width: 740px;
  margin: 0 0 20px;
  color: var(--sobre-oscuro);
  font-family: var(--fuente-titulo);
  font-size: clamp(30px, 5.2vw, 52px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.lk-subhead {
  max-width: 620px;
  margin: 0 0 32px;
  color: var(--sobre-oscuro-suave);
  font-family: var(--fuente-texto);
  font-size: clamp(16px, 2.2vw, 19px);
  font-style: normal;
  /* o itálico serifado era ornamento de VSL */
  font-weight: 400;
  line-height: 1.6;
}

.lk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.lk-hero-meta {
  margin-top: 24px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--sobre-oscuro-suave);
}

/* Se algum dia o hero receber um player de volta, ele entra sem moldura
   dourada e sem sombra. */
.lk-vsl-container {
  background: #000;
  border: 1px solid var(--linea-oscura-fuerte);
  border-radius: var(--radio);
  box-shadow: none;
}

@media (min-width: 900px) {
  .lk-hero {
    padding-block: 104px 88px;
  }
}


/* --- 5.3 Botões ----------------------------------------------------------- */
/* Ouro sólido = ação de compra, e só ela. Todo o resto é fantasma.
   Sem gradiente, sem sombra, sem pulsar, sem seta animada. */

.lk-btn-oro,
.lk-btn--checkout,
.lk-btn--checkout-samcart,
.lk-offer-closing-btn,
.lk-footer-cta-btn,
.lk-sticky-cta-btn,
.lk-thanks-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 14px 22px;
  background: var(--oro);
  background-image: none;
  color: #17150F;
  border: 0;
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease;
}

.lk-btn-oro:hover,
.lk-btn--checkout:hover,
.lk-btn--checkout-samcart:hover,
.lk-offer-closing-btn:hover,
.lk-footer-cta-btn:hover,
.lk-sticky-cta-btn:hover,
.lk-thanks-btn:hover {
  background: var(--oro-hover);
  color: #17150F;
  transform: none;
  text-decoration: none;
}

.lk-btn-oro:active,
.lk-btn--checkout:active,
.lk-sticky-cta-btn:active,
.lk-offer-closing-btn:active {
  transform: none;
}

.lk-btn--checkout {
  margin: 20px 0 14px;
}

/* No desktop o botão não precisa esticar a linha inteira. */
@media (min-width: 900px) {

  .lk-btn-oro,
  .lk-offer-closing-btn,
  .lk-footer-cta-btn {
    width: auto;
    display: inline-flex;
  }
}

/* Fantasma sobre claro: âncoras, "ver qué incluye", secundários. */
.lk-btn-ghost,
.lk-scroll-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 16px;
  background: transparent;
  background-image: none;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease;
}

.lk-btn-ghost:hover,
.lk-scroll-cta-btn:hover {
  border-color: var(--tinta);
  background: rgba(28, 26, 23, .04);
  transform: none;
}

/* Fantasma sobre escuro: hero e câmara de escuta. */
.lk-btn-ghost--oscuro,
.lk-btn-ghost--hero,
.lk-hero .lk-btn-ghost,
.lk-hero .lk-scroll-cta-btn,
.lk-tonelab .lk-btn-ghost {
  border-color: var(--linea-oscura-fuerte);
  color: var(--sobre-oscuro);
}

.lk-btn-ghost--oscuro:hover,
.lk-btn-ghost--hero:hover,
.lk-hero .lk-btn-ghost:hover,
.lk-hero .lk-scroll-cta-btn:hover,
.lk-tonelab .lk-btn-ghost:hover {
  border-color: var(--sobre-oscuro-suave);
  background: rgba(240, 235, 223, .06);
}

/* Os dois fantasmas do hero são alvo de polegar em webview: 44px de altura e,
   abaixo de 560px, um por linha (as duas legendas não cabem lado a lado). */
.lk-btn-ghost--hero {
  flex: 1 1 100%;
  min-height: 44px;
  padding: 11px 18px;
  font-size: 14px;
}

@media (min-width: 560px) {
  .lk-btn-ghost--hero {
    flex: 0 0 auto;
  }
}

.lk-scroll-cta {
  max-width: none;
  margin: 24px 0 0;
  text-align: left;
}

.lk-scroll-cta-headline {
  max-width: 520px;
  margin: 0 0 12px;
  font-family: var(--fuente-texto);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--sobre-oscuro-suave);
}


/* --- 5.4 El acceso (#checkout-section) ------------------------------------ */

.lk-checkout-section {
  background: var(--papel);
  color: var(--tinta);
  padding: var(--banda-y) var(--gutter);
}

/* O grid de duas colunas e o cartão creme flutuante saem: uma coluna de
   leitura só, do mobile ao desktop. */
.lk-offer-box,
.lk-offer-box.lk-offer-box--thanks {
  display: block;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--tinta);
  text-align: left;
}

.lk-checkout-sticky-aside,
.lk-checkout-extra-content {
  display: block;
  position: static;
  max-width: var(--col);
  margin: 0 auto;
  min-width: 0;
}

.lk-offer-badge {
  display: block;
  margin: 0 0 14px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--terracota);
  font-family: var(--fuente-texto);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
}

.lk-offer-title {
  max-width: var(--col);
  margin: 0 0 12px;
  font-family: var(--fuente-titulo);
  font-size: clamp(23px, 3.4vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--tinta);
  text-align: left;
}

.lk-offer-subtitle {
  max-width: var(--col);
  margin: 0 0 40px;
  font-family: var(--fuente-texto);
  font-size: 16px;
  font-style: normal;
  line-height: 1.7;
  color: var(--tinta-suave);
  text-align: left;
}

/* Inventário do que se recebe (reaproveita .lk-bonus-*). Sem ícone, sem
   "valor" riscado, sem etiqueta GRÁTIS em verde. */
.lk-bonus-grid {
  display: block;
  margin-bottom: 36px;
  text-align: left;
}

.lk-bonus-item {
  display: block;
  gap: 0;
  padding: 16px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--linea);
  border-radius: 0;
  transition: none;
}

.lk-bonus-item:last-child {
  border-bottom: 1px solid var(--linea);
}

.lk-bonus-item:hover {
  transform: none;
  border-color: var(--linea);
}

.lk-bonus-info h4 {
  margin: 0 0 4px;
  font-family: var(--fuente-texto);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
}

.lk-bonus-info p {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta-suave);
}

.lk-bonus-value,
.lk-free-badge {
  display: none !important;
}

/* Captura do app, se entrar aqui. */
.lk-product-showcase {
  max-width: var(--col);
  margin: 0 auto 36px;
  text-align: left;
}

.lk-product-showcase img {
  border: 1px solid var(--linea);
  border-radius: 2px;
  box-shadow: none;
}

/* Cartão de preço: hairline, sem borda dourada de 2px e sem fundo creme. */
.lk-price-card {
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 24px 20px;
  margin-bottom: 32px;
  box-shadow: none;
}

.lk-price-new {
  font-family: var(--fuente-titulo);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinta);
}

.lk-price-cash {
  margin-top: 10px;
  font-family: var(--fuente-texto);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* As condições da cobrança (sem assinatura, sem renovação, descritor, quem
   processa). Vem logo abaixo do preço e antes do descargo. */
.lk-price-terms {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-family: var(--fuente-texto);
  font-size: 13px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

/* O descritor dentro das condições sai em monoespaçada: é o que a pessoa vai
   procurar na fatura, letra por letra. */
.lk-price-terms strong,
.lk-price-terms [data-bind="offer.descriptor"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--tinta);
}

#price-card-details {
  margin-bottom: 20px;
}

/* Descargo legível ACIMA do botão. Fine print ilegível é meio caminho para o
   chargeback: aqui ele tem o mesmo peso de leitura do resto. */
.lk-descargo {
  margin: 0 0 20px;
  padding-left: 16px;
  border-left: 2px solid var(--linea-fuerte);
  font-size: 13px;
  line-height: 1.65;
  color: var(--tinta-suave);
  text-align: left;
}

/* Linha de cobrança + descritor. */
.lk-billing-line {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

.lk-billing-line strong,
.lk-descriptor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--tinta);
}

.lk-secure-footer {
  justify-content: flex-start;
  gap: 8px 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-family: var(--fuente-texto);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* Links legais imediatamente abaixo do formulário de pagamento. Sublinhados e
   legíveis: a pessoa aceita o que consegue ler. */
.lk-legal-inline {
  margin: 14px 0 0;
  font-family: var(--fuente-texto);
  font-size: 12px;
  line-height: 1.6;
  color: var(--tinta-suave);
}

.lk-legal-inline a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--linea-fuerte);
}

.lk-legal-inline a:hover {
  color: var(--terracota);
  text-decoration-color: var(--terracota);
}

/* Spinner do formulário de pagamento, em tinta. */
.lk-price-loading-spinner {
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--tinta-suave) !important;
  font-family: var(--fuente-texto);
  font-size: 13px;
  font-weight: 400;
  padding: 24px;
}

.lk-price-loading-spinner::before {
  border-color: var(--linea-fuerte);
  border-top-color: var(--tinta-suave);
}

/* Formulário embutido do SamCart. */
#checkout-embed-container.lk-samcart-embed {
  margin-top: 8px;
}

.lk-samcart-embed-fallback p {
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta);
}

.lk-samcart-embed-secure-link__a {
  font-family: var(--fuente-texto);
  font-size: 15px;
  color: var(--tinta);
  text-underline-offset: 4px;
}

.lk-checkout-error-msg {
  color: var(--terracota);
  font-family: var(--fuente-texto);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

/* Order bump, se voltar: hairline e terracota, nunca vermelho pulsante. */
.lk-order-bump {
  background: transparent;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  box-shadow: none;
  padding: 16px;
}

.lk-order-bump-badge {
  background: transparent;
  color: var(--terracota);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 0;
}

.lk-order-bump-title {
  color: var(--tinta);
  font-size: 14px;
  font-weight: 600;
}

.lk-order-bump-body {
  color: var(--tinta-suave);
  font-size: 13px;
  line-height: 1.6;
}

.lk-order-bump-urgency {
  color: var(--tinta-suave);
  font-size: 12px;
  font-weight: 400;
}

@media (min-width: 900px) {
  .lk-checkout-section {
    padding-block: 104px;
  }

  .lk-price-card {
    padding: 28px 24px;
  }
}


/* --- 5.5 Garantía (sem selo) ---------------------------------------------- */
/* Garantia com PROCESSO escrito — canal, assunto, prazo — no lugar do selo em
   imagem. É o bloco que o #garantia do rodapé aponta. */

.lk-guarantee-card {
  max-width: var(--col);
  margin: 0 auto;
  padding: 24px 20px;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: none;
  text-align: left;
  scroll-margin-top: 24px;
}

.lk-guarantee-title {
  margin: 0 0 12px;
  font-family: var(--fuente-titulo);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
}

.lk-guarantee-card p {
  font-family: var(--fuente-texto);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--tinta);
}

.lk-guarantee-card a {
  color: var(--tinta);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--linea-fuerte);
}

@media (min-width: 900px) {
  .lk-guarantee-card {
    padding: 28px 24px;
  }
}

.lk-guarantee-box-cert {
  max-width: var(--col);
  margin: 32px auto 0;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 0;
  box-shadow: none;
}

.lk-guarantee-box-inner {
  display: block;
  border: 0;
  border-radius: 0;
  padding: 24px 20px;
  text-align: left;
}

.lk-guarantee-box-cert h3,
.lk-guarantee-text h3 {
  margin: 0 0 10px;
  font-family: var(--fuente-titulo);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
}

.lk-guarantee-box-cert p,
.lk-guarantee-text p {
  font-family: var(--fuente-texto);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--tinta);
}

.lk-guarantee-box {
  display: block;
  border-top: 1px solid var(--linea);
  padding-top: 28px;
  margin-top: 28px;
  text-align: left;
}


/* --- 5.6 Cómo recibes tu acceso ------------------------------------------- */

.lk-delivery-box {
  max-width: var(--col);
  margin: 40px auto 0;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 24px 20px;
  box-shadow: none;
  text-align: left;
}

.lk-delivery-title {
  margin: 0 0 14px;
  font-family: var(--fuente-titulo);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}

.lk-delivery-steps {
  gap: 12px;
  padding-left: 18px;
}

.lk-delivery-steps li {
  font-family: var(--fuente-texto);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--tinta);
}

.lk-delivery-steps li::marker {
  color: var(--tinta-suave);
}

.lk-delivery-help {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-family: var(--fuente-texto);
  font-size: 13px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

.lk-delivery-help a {
  color: var(--tinta);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --- 5.7 FAQ -------------------------------------------------------------- */

/* A banda. O .lk-faq-container continua sendo instrumentado pela landing.js
   (initFaqTracking), por isso nem .lk-faq-item nem .lk-faq-question mudam de
   nome — só de aparência. */
.lk-faq {
  background: var(--papel);
  color: var(--tinta);
}

.lk-faq-title {
  max-width: var(--col);
  margin: 56px auto 24px;
  font-family: var(--fuente-titulo);
  font-size: clamp(23px, 3.4vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--tinta);
  text-align: left;
}

.lk-faq-container {
  max-width: var(--col);
  margin: 0 auto;
  text-align: left;
}

.lk-faq-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--linea);
  border-radius: 0;
  margin: 0;
  box-shadow: none;
  transition: none;
}

.lk-faq-item:last-child {
  border-bottom: 1px solid var(--linea);
}

.lk-faq-item:hover {
  box-shadow: none;
}

.lk-faq-question {
  padding: 20px 28px 20px 0;
  position: relative;
  font-family: var(--fuente-texto);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tinta);
}

.lk-faq-icon {
  position: absolute;
  right: 0;
  top: 20px;
  font-family: var(--fuente-texto);
  font-size: 18px;
  font-weight: 400;
  color: var(--tinta-suave);
}

.lk-faq-answer {
  padding: 0 0 20px;
  border-top: 0;
}

.lk-faq-answer p {
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta-suave);
}

.lk-faq-answer p+p {
  margin-top: 14px;
}

@media (min-width: 900px) {
  .lk-faq-title {
    margin-top: 72px;
  }
}


/* --- 5.8 Cierre ----------------------------------------------------------- */

.lk-offer-closing,
.lk-footer-cta {
  max-width: var(--col);
  margin: 72px auto 0;
  padding: 56px 0 0;
  border-top: 1px solid var(--linea);
  text-align: left;
}

.lk-offer-closing-eyebrow,
.lk-footer-cta-eyebrow {
  margin-bottom: 14px;
  font-family: var(--fuente-texto);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracota);
}

.lk-offer-closing-title,
.lk-footer-cta-title {
  max-width: none;
  margin: 0 0 20px;
  font-family: var(--fuente-titulo);
  font-size: clamp(23px, 3.4vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--tinta);
}

.lk-offer-closing-text,
.lk-footer-cta-text {
  max-width: none;
  margin: 0 0 28px;
  font-family: var(--fuente-texto);
  font-size: 17px;
  font-style: normal;
  line-height: 1.7;
  color: var(--tinta);
}

/* Fita de confiança: texto corrido, sem emoji-selo, separada por ponto médio. */
.lk-offer-closing-trust,
.lk-footer-trust {
  justify-content: flex-start;
  gap: 4px 0;
  margin-top: 24px;
  font-family: var(--fuente-texto);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tinta-suave);
}

.lk-offer-closing-trust span+span::before,
.lk-footer-trust span+span::before {
  content: "·";
  margin: 0 8px;
  color: var(--linea-fuerte);
}

/* O rodapé é escuro: ali a fita muda de cor. */
.lk-footer .lk-footer-trust {
  color: var(--sobre-oscuro-suave);
}

.lk-footer .lk-footer-trust span+span::before {
  color: var(--linea-oscura-fuerte);
}

.lk-footer .lk-footer-cta-title {
  color: var(--sobre-oscuro);
}

.lk-footer .lk-footer-cta-text {
  color: var(--sobre-oscuro-suave);
}

.lk-footer .lk-footer-cta-eyebrow {
  color: var(--oro-claro);
}


/* --- 5.9 Rodapé ----------------------------------------------------------- */

.lk-footer {
  background-color: var(--obsidiana);
  border-top: 1px solid var(--linea-oscura);
  padding: 56px 0;
  color: var(--sobre-oscuro-suave);
  font-family: var(--fuente-texto);
  font-size: 13px;
  line-height: 1.7;
  text-align: left;
}

.lk-footer a {
  color: var(--sobre-oscuro);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linea-oscura-fuerte);
}

.lk-footer-legal p {
  margin: 0 0 10px;
  max-width: var(--col);
}

/* As duas notas do rodapé (processador/descritor/moeda e o aviso de que não é
   produto de saúde). 12px, opacidade cheia: são aviso, não letra escondida. */
.lk-footer-note {
  margin: 16px 0 0;
  max-width: var(--col);
  font-size: 12px;
  line-height: 1.6;
  color: var(--sobre-oscuro-suave);
  opacity: 1;
}

.lk-footer-note+.lk-footer-note {
  margin-top: 10px;
}

.lk-footer-note [data-bind="offer.descriptor"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--sobre-oscuro);
}

.lk-footer-cta {
  border-top: 0;
  border-bottom: 1px solid var(--linea-oscura);
  margin: 0 0 32px;
  padding: 0 0 36px;
}

/* O disclaimer é aviso legal, não letra escondida: 12px, opacidade cheia,
   alinhado à esquerda (texto justificado em 360px vira rio de espaço branco). */
.lk-disclaimer,
.lk-offer-footer .lk-disclaimer {
  max-width: var(--col);
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.6;
  opacity: 1;
  text-align: left;
  color: var(--sobre-oscuro-suave);
}

/* Dentro do corpo claro, o mesmo bloco muda de cor. */
main .lk-disclaimer,
.lk-offer-box .lk-disclaimer {
  color: var(--tinta-suave);
}

.lk-offer-footer {
  display: block;
  max-width: var(--col);
  margin: 48px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--linea);
  text-align: left;
}

.lk-offer-footer .lk-footer-legal {
  font-family: var(--fuente-texto);
  font-size: 12px;
  color: var(--tinta-suave);
}

.lk-offer-footer .lk-footer-legal a {
  color: var(--tinta);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 900px) {
  .lk-footer {
    padding-block: 72px;
  }
}


/* --- 5.10 Gate de e-mail (variante soft) ---------------------------------- */
/* Botão em tinta, não em ouro: ouro é só compra. Aqui a promessa é o PDF do
   mapa das frequências, não o acesso ao produto. */

.lk-email-gate {
  margin: 0 0 24px;
  padding: 20px;
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-align: left;
}

.lk-email-gate--done {
  opacity: 1;
  border-color: var(--linea-fuerte);
}

.lk-email-gate-title {
  margin-bottom: 8px;
  font-family: var(--fuente-titulo);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}

.lk-email-gate-sub {
  max-width: none;
  margin: 0 0 16px;
  font-family: var(--fuente-texto);
  font-size: 15px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

.lk-email-form input {
  min-height: 48px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: 16px;
  /* 16px evita o zoom automático do iOS ao focar o campo */
  color: var(--tinta);
  text-align: left;
}

.lk-email-form input::placeholder {
  color: #8C867B;
}

.lk-email-form input:focus {
  border-color: var(--tinta);
  outline: 2px solid var(--oro);
  outline-offset: 1px;
}

.lk-email-gate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  background: var(--tinta);
  background-image: none;
  color: var(--papel);
  border: 0;
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
  transition: background-color .15s ease;
}

.lk-email-gate-btn:hover {
  background: #2E2A25;
  transform: none;
}

.lk-email-gate-note {
  margin-top: 12px;
  font-family: var(--fuente-texto);
  font-size: 12px;
  line-height: 1.55;
  color: var(--tinta-suave);
}

.lk-email-skip-btn {
  width: auto;
  margin-top: 14px;
  color: var(--tinta-suave);
  font-family: var(--fuente-texto);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  text-underline-offset: 3px;
}

.lk-email-skip-btn:hover {
  color: var(--tinta);
}

.lk-email-error {
  background: rgba(138, 75, 52, .07);
  border: 1px solid rgba(138, 75, 52, .30);
  border-radius: var(--radio);
  color: var(--terracota);
  font-family: var(--fuente-texto);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}

.lk-email-form input[aria-invalid="true"] {
  border-color: var(--terracota);
}


/* --- 5.11 Barras fixas e avisos flutuantes -------------------------------- */

/* Barra fixa de compra no celular: papel com hairline, botão ouro, sem
   gradiente escuro por cima do conteúdo e sem pulsar. */
.lk-sticky-cta {
  background: var(--papel);
  border-top: 1px solid var(--linea);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
}

.lk-sticky-cta-btn {
  max-width: 560px;
  font-size: 16px;
}

/* Nudge "abrir no navegador": obsidiana com hairline, sem verde. */
.lk-ext-nudge {
  background: var(--obsidiana);
  background-image: none;
  border-bottom: 1px solid var(--linea-oscura-fuerte);
  box-shadow: none;
}

.lk-ext-nudge-icon {
  display: none;
}

.lk-ext-nudge-text {
  font-family: var(--fuente-texto);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sobre-oscuro);
}

.lk-ext-nudge-text strong {
  color: var(--sobre-oscuro);
  font-weight: 600;
}

.lk-ext-nudge-btn {
  min-height: 40px;
  background: var(--sobre-oscuro);
  color: var(--obsidiana);
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: 13px;
  font-weight: 700;
}

.lk-ext-nudge-close {
  color: var(--sobre-oscuro-suave);
}

/* Pulso de compra: fita discreta, sem ping verde e sem vidro fosco. */
.lk-buyer-pulse-card {
  background: rgba(14, 13, 12, .95);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--linea-oscura-fuerte);
  border-radius: var(--radio);
  box-shadow: none;
  font-family: var(--fuente-texto);
  font-size: 12.5px;
  color: var(--sobre-oscuro);
}

.lk-buyer-pulse-dot {
  background: var(--oro-claro);
  box-shadow: none;
}

.lk-buyer-pulse-text strong {
  color: var(--sobre-oscuro);
  font-weight: 600;
}

/* O "hace X min" é calculado no navegador e não corresponde a um horário real
   de compra. Fica escondido até o landing.js passar a emitir o timestamp do
   servidor; nesse dia basta apagar estas três linhas. */
.lk-buyer-pulse-time {
  display: none !important;
}

/* Popup de saída: papel com hairline, sem dourado nem vidro. */
.lk-popup-content {
  background: var(--papel);
  background-image: none;
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(14, 13, 12, .18);
  color: var(--tinta);
}

.lk-popup-close-btn {
  color: var(--tinta-suave);
  background: transparent;
  border: 0;
}

.lk-popup-badge,
.lk-popup-badge--alert {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 12px;
  color: var(--terracota);
  font-family: var(--fuente-texto);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lk-popup-title {
  font-family: var(--fuente-titulo);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta);
}

.lk-popup-text {
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta);
}

.lk-popup-footer {
  font-family: var(--fuente-texto);
  font-size: 12px;
  line-height: 1.55;
  color: var(--tinta-suave);
}

.lk-popup-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--tinta);
  background-image: none;
  color: var(--papel);
  border: 0;
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
}

.lk-popup-submit-btn:hover {
  background: #2E2A25;
  transform: none;
}

.lk-popup-form input[type="email"] {
  min-height: 48px;
  background: #FFFFFF;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: 16px;
  color: var(--tinta);
}


/* --- 5.12 Volta do checkout (?purchase=success) ---------------------------- */

body.lk-purchase-success .lk-checkout-section {
  padding-block: 64px;
}

.lk-thanks-title {
  font-family: var(--fuente-titulo);
  font-size: clamp(23px, 3.4vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinta);
}

.lk-thanks-lead,
.lk-thanks-steps li {
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinta);
}

.lk-thanks-help,
.lk-thanks-billing {
  font-family: var(--fuente-texto);
  font-size: 13px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

.lk-thanks-descriptor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--tinta);
}


/* ============================================================================
   6. PREÇO (só via JS) E MOVIMENTO REDUZIDO
   ========================================================================= */

/* O número nunca está no HTML. O landing.js escreve dentro destes dois
   elementos depois que o servidor confirma preço e moeda; o wrapper fica
   [hidden] até lá, e o [hidden] tem que continuar valendo. */
.lk-price-inline-wrap {
  display: inline;
}

.lk-price-inline-wrap[hidden],
[hidden] {
  display: none !important;
}

.lk-price-inline {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: inherit;
}

.lk-price-highlight {
  font-family: var(--fuente-titulo);
  font-size: clamp(32px, 8vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}

.lk-hero .lk-price-highlight,
.lk-tonelab .lk-price-highlight,
.lk-band--oscuro .lk-price-highlight,
.lk-top-alert .lk-price-highlight {
  color: var(--sobre-oscuro);
}

@media (min-width: 900px) {
  .lk-price-highlight {
    font-size: 40px;
  }
}

/* Respeito a prefers-reduced-motion. Vale para a página inteira porque este
   arquivo só é carregado na página editorial. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .lk-buyer-pulse,
  .lk-buyer-pulse.is-visible {
    transform: none;
  }
}