/* ============================================================
       P1 — PÁGINA DE VENDAS (não-artigo)
       Ritmo de bandas (navy ↔ claro), seções desenhadas, CTA denso.
       Mobile-first · sem libs · mockup CSS puro.
       ============================================================ */

    /* Larguras */
    .qi-wrap { max-width: 640px; margin: 0 auto; padding: 0 20px; }

    /* Rótulo de seção (eyebrow scannável) */
    .qi-kicker-c {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--qi-brand-deep);
      background: var(--qi-brand-soft);
      border-radius: var(--qi-radius-pill);
      padding: 6px 14px;
      margin-bottom: 16px;
    }
    .qi-kicker-c .qi-icon { width: 14px; height: 14px; }

    .qi-sec { padding: 44px 0; }
    .qi-sec--tint { background: var(--qi-bg); }
    .qi-sec--white { background: var(--qi-surface); }
    .qi-sec h2 {
      font-family: var(--qi-font-display);
      font-size: clamp(1.5rem, 3.4vw + 0.5rem, 1.875rem);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -0.025em;
      color: var(--qi-ink);
      margin-bottom: 18px;
    }
    .qi-sec p { font-size: 1.0625rem; line-height: 1.65; color: var(--qi-ink-soft); margin-bottom: 16px; }
    .qi-sec p strong { color: var(--qi-ink); }

    /* ── HERO navy ─────────────────────────────────────────────── */
    .qi-hero {
      position: relative;
      background: var(--qi-navy);
      color: var(--qi-on-navy);
      padding: 26px 0 34px;
      overflow: hidden;
    }
    .qi-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(680px 340px at 82% -10%, rgba(14, 159, 110, .22), transparent 68%),
        radial-gradient(520px 300px at 0% 108%, rgba(255, 184, 0, .10), transparent 70%);
    }
    .qi-hero-inner { position: relative; max-width: 640px; margin: 0 auto; padding: 0 20px; }
    .qi-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--qi-cta);
      border: 1px solid var(--qi-on-navy-line);
      border-radius: var(--qi-radius-pill);
      padding: 6px 13px;
      margin-bottom: 16px;
    }
    .qi-eyebrow .qi-icon { width: 13px; height: 13px; }
    .qi-hero h1 {
      font-family: var(--qi-font-display);
      font-size: clamp(1.625rem, 5vw + 0.4rem, 2.375rem);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.03em;
      margin-bottom: 14px;
    }
    .qi-hero h1 .qi-hl {
      color: var(--qi-cta);
    }
    .qi-hero-sub {
      font-size: 1.0625rem;
      line-height: 1.6;
      color: var(--qi-on-navy-soft);
      margin-bottom: 22px;
    }
    .qi-hero-sub em { font-style: normal; font-size: 0.8125rem; opacity: .85; }

    /* Player VSL (contrato do player.js — NÃO alterar estrutura) */
    .qi-vsl {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: var(--qi-navy-800);
      border: 1px solid var(--qi-on-navy-line);
      border-radius: var(--qi-radius-card);
      overflow: hidden;
      box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
    }
    .qi-vsl-video { width: 100%; height: 100%; object-fit: cover; }
    .qi-vsl-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      border: 0;
      cursor: pointer;
      background: rgba(10, 30, 66, .55);
      color: #fff;
      font-family: var(--qi-font);
      font-size: 1rem;
      line-height: 1.45;
      text-align: center;
      padding: 20px;
      -webkit-tap-highlight-color: transparent;
    }
    .qi-vsl-overlay-ic {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--qi-cta);
      color: var(--qi-cta-ink);
      animation: qi-pulse 2s var(--qi-ease) infinite;
    }
    .qi-vsl-overlay-ic svg { width: 30px; height: 30px; }
    @keyframes qi-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255, 184, 0, .5); }
      50%      { box-shadow: 0 0 0 14px rgba(255, 184, 0, 0); }
    }
    .qi-vsl-bar {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 6px;
      background: rgba(255, 255, 255, .18);
      z-index: 3;
    }
    .qi-vsl-bar--seek { cursor: pointer; height: 10px; }
    /* Área de toque invisível de 44px (touch target) — visual inalterado */
    .qi-vsl-bar--seek::before {
      content: ''; position: absolute; left: 0; right: 0; top: -34px; height: 44px;
    }
    .qi-vsl-bar-fill { width: 0; height: 100%; background: var(--qi-progress-grad); }

    /* Micro-selos abaixo do CTA do hero */
    .qi-hero-seals {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 18px;
      margin-top: 14px;
    }
    .qi-hero-seals .qi-seal {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--qi-on-navy-soft);
    }
    .qi-hero-seals .qi-seal .qi-icon { width: 15px; height: 15px; color: var(--qi-cta); }

    /* ── Barra de confiança ────────────────────────────────────── */
    .qi-trustbar {
      background: var(--qi-navy-800);
      border-top: 1px solid var(--qi-on-navy-line);
      border-bottom: 1px solid var(--qi-on-navy-line);
      padding: 14px 0;
    }
    .qi-trustbar-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px 22px;
      max-width: 680px;
      margin: 0 auto;
      padding: 0 16px;
    }
    .qi-trust-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--qi-on-navy-soft);
    }
    .qi-trust-item .qi-icon { width: 15px; height: 15px; color: var(--qi-brand); flex-shrink: 0; }

    /* ── CTA block ─────────────────────────────────────────────── */
    .qi-cta-block { margin: 24px 0 6px; }
    .qi-cta-block .qi-btn { min-height: 62px; font-size: 1.0625rem; font-weight: 700; }
    .qi-cta-note {
      text-align: center;
      font-size: 0.8125rem;
      color: var(--qi-ink-soft);
      margin-top: 10px;
    }
    .qi-hero .qi-cta-note { color: var(--qi-on-navy-soft); }

    /* Reveal da oferta (delayed CTA) */
    [data-vsl-reveal][hidden] { display: none; }
    .qi-revealed { animation: qi-rise 0.4s var(--qi-ease) both; }

    /* ── Cenas da dor (cards) ──────────────────────────────────── */
    .qi-scenes { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 8px; }
    .qi-scene {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      background: var(--qi-surface);
      border: 1px solid var(--qi-hairline);
      border-left: 4px solid var(--qi-danger);
      border-radius: var(--qi-radius-option);
      box-shadow: var(--qi-shadow-sm);
      padding: 16px 16px;
    }
    .qi-scene-ic {
      flex-shrink: 0;
      width: 42px; height: 42px;
      display: flex; align-items: center; justify-content: center;
      background: #FCEBEB;
      color: var(--qi-danger);
      border-radius: 12px;
    }
    .qi-scene-ic .qi-icon { width: 22px; height: 22px; }
    .qi-scene p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--qi-ink); }

    /* Callout de agitação */
    .qi-agitate {
      background: var(--qi-navy);
      color: var(--qi-on-navy);
      border-radius: var(--qi-radius-card);
      padding: 22px 20px;
      margin: 22px 0;
    }
    .qi-agitate p { color: var(--qi-on-navy-soft); margin-bottom: 12px; }
    .qi-agitate p:last-child { margin-bottom: 0; }
    .qi-agitate strong, .qi-sec .qi-agitate p strong { color: #fff; }
    .qi-sec .qi-agitate p em { color: var(--qi-on-navy-soft); }
    .qi-agitate .qi-big {
      font-family: var(--qi-font-display);
      font-weight: 800;
      color: var(--qi-cta);
    }

    /* Comparação Você × Cobrador */
    .qi-versus { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 6px; }
    @media (max-width: 480px) { .qi-versus { grid-template-columns: 1fr; } }
    .qi-vs-card {
      border-radius: var(--qi-radius-card);
      padding: 18px 16px;
    }
    .qi-vs-card h4 {
      font-family: var(--qi-font-display);
      font-size: 0.9375rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      margin-bottom: 12px;
      display: flex; align-items: center; gap: 8px;
    }
    .qi-vs-card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
    .qi-vs-card li { font-size: 0.9375rem; line-height: 1.45; display: flex; gap: 8px; align-items: flex-start; }
    .qi-vs-card li .qi-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
    .qi-vs--you { background: #FCEBEB; border: 1px solid rgba(220, 38, 38, .22); }
    .qi-vs--you h4 { color: var(--qi-danger); }
    .qi-vs--you li .qi-icon { color: var(--qi-danger); }
    .qi-vs--them { background: var(--qi-navy); color: var(--qi-on-navy); }
    .qi-vs--them h4 { color: var(--qi-cta); }
    .qi-vs--them li { color: var(--qi-on-navy-soft); }
    .qi-vs--them li .qi-icon { color: var(--qi-cta); }

    /* ── Passos numerados (solução) ────────────────────────────── */
    .qi-steps { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 18px; }
    .qi-step {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      background: var(--qi-surface);
      border: 1px solid var(--qi-hairline);
      border-radius: var(--qi-radius-card);
      box-shadow: var(--qi-shadow-sm);
      padding: 18px 18px;
    }
    .qi-step-num {
      flex-shrink: 0;
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--qi-font-display);
      font-weight: 800;
      font-size: 1.25rem;
      color: #fff;
      background: var(--qi-brand-grad);
      border-radius: 14px;
      box-shadow: 0 6px 14px rgba(14, 159, 110, .28);
    }
    .qi-step-body h3 {
      font-family: var(--qi-font-display);
      font-size: 1.0625rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--qi-ink);
      margin-bottom: 5px;
    }
    .qi-step-body p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--qi-ink-soft); }

    /* ── Mockup do produto (CSS puro) ─────────────────────────── */
    .qi-mockup { display: flex; justify-content: center; margin: 4px 0 22px; perspective: 900px; }
    .qi-mockup-book {
      width: min(190px, 50vw);
      aspect-ratio: 3 / 4.2;
      background: linear-gradient(150deg, var(--qi-navy) 0%, var(--qi-navy-800) 70%);
      border-radius: 6px 14px 14px 6px;
      box-shadow: -14px 18px 34px rgba(16, 24, 43, .30), inset 6px 0 12px rgba(0, 0, 0, .35);
      transform: rotateY(-14deg);
      padding: 18px 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .qi-mockup-kicker {
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--qi-cta);
    }
    .qi-mockup-title {
      font-family: var(--qi-font-display);
      font-size: clamp(1.125rem, 5vw, 1.375rem);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: #fff;
    }
    .qi-mockup-band {
      background: var(--qi-cta);
      color: var(--qi-cta-ink);
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border-radius: 4px;
      padding: 5px 8px;
      align-self: flex-start;
    }

    /* ── Caixa de oferta desenhada ─────────────────────────────── */
    .qi-offer {
      position: relative;
      background: var(--qi-surface);
      border: 2px solid var(--qi-brand);
      border-radius: var(--qi-radius-card);
      box-shadow: var(--qi-shadow-md);
      padding: 30px 20px 26px;
      margin-top: 8px;
    }
    .qi-offer-ribbon {
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--qi-brand);
      color: #fff;
      font-family: var(--qi-font-display);
      font-size: 0.6875rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border-radius: var(--qi-radius-pill);
      padding: 6px 16px;
      white-space: nowrap;
      box-shadow: 0 6px 14px rgba(14, 159, 110, .32);
    }
    .qi-offer h2 { text-align: center; margin-bottom: 16px; }

    /* Empilhamento de valor */
    .qi-stack {
      background: var(--qi-bg);
      border-radius: var(--qi-radius-option);
      overflow: hidden;
      margin: 16px 0;
      border: 1px solid var(--qi-hairline);
    }
    .qi-stack-row {
      display: flex;
      gap: 14px;
      justify-content: space-between;
      align-items: flex-start;
      padding: 14px 16px;
      border-bottom: 1px solid var(--qi-hairline);
    }
    .qi-stack-row p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--qi-ink); }
    .qi-stack-row strong { font-family: var(--qi-font-display); letter-spacing: -0.01em; }
    .qi-stack-val {
      flex-shrink: 0;
      font-family: var(--qi-font-display);
      font-weight: 800;
      color: var(--qi-ink-soft);
      white-space: nowrap;
    }
    .qi-stack-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 16px;
      background: var(--qi-navy);
      color: var(--qi-on-navy);
      font-family: var(--qi-font-display);
      font-weight: 800;
    }
    .qi-stack-total .qi-strike {
      text-decoration: line-through;
      text-decoration-thickness: 2px;
      text-decoration-color: var(--qi-danger);
      color: var(--qi-on-navy-soft);
    }

    /* Preço âncora + agora */
    .qi-price { text-align: center; margin: 20px 0 6px; }
    .qi-price-anchor {
      font-size: 0.9375rem;
      color: var(--qi-ink-soft);
      margin-bottom: 2px;
    }
    .qi-price-anchor .qi-strike {
      text-decoration: line-through;
      text-decoration-thickness: 2px;
      text-decoration-color: var(--qi-danger);
      font-weight: 700;
      color: var(--qi-ink);
    }
    .qi-price-now {
      font-family: var(--qi-font-display);
      font-size: clamp(2.75rem, 11vw, 3.5rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--qi-brand-deep);
      line-height: 1;
    }
    .qi-price-terms {
      font-size: 0.9375rem;
      color: var(--qi-ink-soft);
      margin-top: 8px;
    }

    /* Formas de pagamento */
    .qi-pay { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
    .qi-pay-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--qi-ink-soft);
      background: var(--qi-bg);
      border: 1px solid var(--qi-hairline);
      border-radius: var(--qi-radius-pill);
      padding: 6px 12px;
    }
    .qi-pay-badge .qi-icon { width: 14px; height: 14px; color: var(--qi-brand); }

    .qi-why {
      font-size: 0.875rem;
      line-height: 1.55;
      color: var(--qi-ink-soft);
      font-style: italic;
      text-align: center;
      margin: 14px 0 0;
    }

    /* ── Stats públicos (prova) ────────────────────────────────── */
    .qi-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
    .qi-stat {
      text-align: center;
      background: var(--qi-surface);
      border: 1px solid var(--qi-hairline);
      border-radius: var(--qi-radius-option);
      box-shadow: var(--qi-shadow-sm);
      padding: 14px 6px;
      min-width: 0;
    }
    .qi-stat-num {
      font-family: var(--qi-font-display);
      font-size: clamp(1.0625rem, 4.8vw, 1.75rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--qi-brand-deep);
      line-height: 1.05;
      overflow-wrap: anywhere;
    }
    .qi-stat-lbl { font-size: 0.75rem; line-height: 1.35; color: var(--qi-ink-soft); margin-top: 6px; }

    /* Lista de prova */
    .qi-proof { list-style: none; display: flex; flex-direction: column; gap: 14px; }
    .qi-proof li { display: flex; gap: 12px; align-items: flex-start; }
    .qi-proof .qi-icon { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; color: var(--qi-brand); }
    .qi-proof p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--qi-ink-soft); }
    .qi-proof p strong { color: var(--qi-ink); }

    /* ── Garantia (selo) ───────────────────────────────────────── */
    .qi-guarantee {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      background: var(--qi-brand-soft);
      border: 2px solid var(--qi-brand);
      border-radius: var(--qi-radius-card);
      padding: 22px 20px;
    }
    .qi-guarantee-badge {
      flex-shrink: 0;
      width: 66px; height: 66px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      background: var(--qi-brand);
      color: #fff;
      border-radius: 50%;
      box-shadow: 0 8px 18px rgba(14, 159, 110, .32);
    }
    .qi-guarantee-badge .qi-num { font-family: var(--qi-font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; }
    .qi-guarantee-badge .qi-unit { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
    .qi-guarantee h3 {
      font-family: var(--qi-font-display);
      font-size: 1.1875rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--qi-ink);
      margin-bottom: 8px;
    }
    .qi-guarantee p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--qi-ink-soft); }
    .qi-guarantee p strong { color: var(--qi-ink); }

    /* ── FAQ (details nativo) ──────────────────────────────────── */
    .qi-faq details {
      background: var(--qi-surface);
      border: 1px solid var(--qi-hairline);
      border-radius: var(--qi-radius-option);
      box-shadow: var(--qi-shadow-sm);
      margin-bottom: 10px;
      overflow: hidden;
    }
    .qi-faq summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 16px 18px;
      font-family: var(--qi-font-display);
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: -0.01em;
      color: var(--qi-ink);
      -webkit-tap-highlight-color: transparent;
    }
    .qi-faq summary::-webkit-details-marker { display: none; }
    .qi-faq summary::after {
      content: '+';
      flex-shrink: 0;
      font-family: var(--qi-font-display);
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--qi-brand);
      line-height: 1;
    }
    .qi-faq details[open] summary::after { content: '–'; }
    .qi-faq details > p {
      padding: 0 18px 16px;
      font-size: 1rem;
      line-height: 1.55;
      color: var(--qi-ink-soft);
      margin: 0;
    }

    /* Rodapé legal — padding-bottom reserva espaço pro sticky CTA no
       mobile (disclaimer nunca fica coberto — compliance) */
    .qi-legal {
      max-width: 640px;
      margin: 0 auto;
      padding: 24px 20px calc(96px + env(safe-area-inset-bottom, 0));
      border-top: 1px solid var(--qi-hairline);
      font-size: 0.75rem;
      line-height: 1.6;
      color: var(--qi-ink-soft);
    }
    @media (min-width: 768px) { .qi-legal { padding-bottom: 40px; } }

    /* ── Sticky CTA mobile (após reveal da oferta) ────────────── */
    .qi-sticky-cta {
      display: block;
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: calc(12px + env(safe-area-inset-bottom, 0));
      z-index: 50;
      transform: translateY(120%);
      transition: transform 0.25s var(--qi-ease);
    }
    .qi-sticky-cta.qi-visible { transform: translateY(0); }
    .qi-sticky-cta .qi-btn {
      min-height: 54px;
      font-size: 0.9375rem;
      font-weight: 700;
      box-shadow: 0 4px 16px rgba(16, 24, 43, .25);
    }
    @media (min-width: 768px) {
      .qi-sticky-cta { display: none !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      .qi-sticky-cta { transition: none; }
      .qi-vsl-overlay-ic { animation: none; }
    }