/* ============================================================
   Compare Demo (#compare-demo) — a tela real do produto rodando
   sozinha, depois interativa. Seção da landing logo abaixo do hero.

   Vocabulário om-* (eyebrow/h2/btn/stats) vem de home.css;
   tokens (:root) vivem em layout.css. Tudo novo aqui é cq-*.
   Markup: app/Views/partials/compare-demo.php
   Comportamento: public/static/js/compare-demo.js
   ============================================================ */

.cq-hero { max-width: 1280px; margin: 0 auto; padding: 72px 24px 96px; position: relative; }
.cq-hero .om-hero-sub { max-width: 680px; }
.cq-hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; position: relative; z-index: 2; }

/* nota de preço abaixo dos botões — irmã do .cq-hero-ctas (o pai .cq-hero é
   bloco, então já ocupa a linha inteira); único caminho pro #trial na página */
.cq-cta-note { flex-basis: 100%; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-subtle); margin: 12px 0 0; position: relative; z-index: 2; }
.cq-cta-note a { color: var(--brand); text-decoration: none; border-bottom: 1px solid rgba(var(--primary-rgb), .35); }
.cq-cta-note a:hover { border-bottom-color: var(--brand); }

/* órbita da marca atrás da manchete; o mapa cobre a parte de baixo */
.cq-hero .oa-stage { top: -90px; right: -100px; z-index: 0; }
.cq-hero .om-hero-stats, .cq-hero .cq-foot-note { position: relative; z-index: 2; }

/* ---- app frame ---- */
.cq-frame {
  margin-top: 64px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raised);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.cq-frame-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.cq-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--fg-muted); }
.cq-brand img { display: block; }
.cq-brand b { color: var(--brand); font-weight: 500; }
.cq-steps { display: flex; gap: 14px; align-items: center; }
.cq-step { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--fg-subtle); opacity: .45; transition: opacity .3s, color .3s; white-space: nowrap; }
.cq-step.is-on { opacity: 1; color: var(--fg); }
.cq-step b { color: var(--brand); font-weight: 500; margin-right: 4px; }
.cq-replay {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  border: 1px solid var(--line); background: none; border-radius: 999px;
  padding: 4px 10px; color: var(--fg-muted); cursor: pointer;
}
.cq-replay:hover { border-color: var(--line-strong); color: var(--fg); }

/* ---- documents row ---- */
.cq-docs { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: center; }
.cq-docs-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--fg-subtle); margin-right: 6px; }
.cq-doc {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-left: 3px solid var(--cq-dot, var(--line-strong));
  border-radius: 6px; padding: 6px 11px; background: var(--bg);
  font-family: var(--font-mono); font-size: 12px; color: var(--fg);
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease-out, ease), transform .4s var(--ease-out, ease);
}
.cq-doc.is-on { opacity: 1; transform: none; }
.cq-doc-kind { font-size: 9px; letter-spacing: .1em; padding: 2px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--fg-subtle); }
.cq-doc-t { color: var(--fg-subtle); font-size: 11px; }
.cq-live { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); display: inline-flex; align-items: center; gap: 7px; }
.cq-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: cq-blink 1s infinite; }
.cq-live.is-done .cq-live-dot { background: var(--success); animation: none; }
@keyframes cq-blink { 50% { opacity: .25; } }

/* ---- purchase plan selector ----
   Cada chip é uma seleção REAL: nome, total, e o custo dessa escolha. */
.cq-plans { padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--bg-sunken); }
.cq-plans-l { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--fg-muted); margin-bottom: 10px; }
.cq-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.cq-chip {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; text-align: left;
  border: 1.5px solid var(--line-strong); border-radius: 8px; padding: 8px 12px;
  background: var(--bg-raised); color: var(--fg); cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  display: flex; flex-direction: column; gap: 3px; min-width: 168px;
}
.cq-chip b { font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cq-chip i { font-style: normal; font-size: 10px; color: var(--fg-subtle); }
.cq-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cq-chip.is-on i { color: rgba(255,255,255,.78); }
.cq-chip.is-manual { border-style: dashed; }
.cq-chip.is-manual.is-on { background: var(--fg); border-color: var(--fg); border-style: solid; }
.cq-chip:not(.is-live):not(.is-on) { cursor: default; color: var(--fg-muted); }
/* desabilitado = a demo ainda não chegou na fase interativa (o JS põe/tira o
   attr `disabled` junto com o .is-live; no SSR nasce clicável) */
.cq-chip:disabled { opacity: .55; border-style: dashed; border-color: var(--line); background: var(--bg); }
.cq-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cq-chip.is-live:hover:not(.is-on) { border-color: var(--fg); background: var(--bg-raised); }
.cq-plan-why { margin: 10px 0 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--fg-muted); }

/* ---- savings banner ---- */
.cq-save {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--success);
  background: color-mix(in oklab, var(--success) 5%, var(--bg-raised));
  transition: opacity .5s;
}
.cq-save.is-on { opacity: 1; }
.cq-save-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--success); }
.cq-save-v { font-family: var(--font-sans); font-weight: 600; font-size: 38px; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.cq-save-pct { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--success); }
.cq-save-r { margin-left: auto; text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); line-height: 1.7; }
.cq-save-r b { color: var(--fg-muted); font-weight: 500; }
.cq-save-warn { font-family: var(--font-mono); font-size: 11px; color: var(--warning); }
.cq-save-warn button { font: inherit; color: var(--brand); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* ---- comparison table ---- */
.cq-tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cq-cards { display: none; }
.cq-tbl { width: 100%; border-collapse: collapse; min-width: 900px; }
.cq-tbl th, .cq-tbl td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.cq-tbl thead th { vertical-align: top; padding-top: 14px; padding-bottom: 12px; }
.cq-th-idx { width: 30px; }
.cq-hd-name { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--fg); white-space: nowrap; }
.cq-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cq-dot, var(--fg-subtle)); flex-shrink: 0; }
.cq-hd-tot { font-family: var(--font-mono); font-size: 13px; margin-top: 8px; font-weight: 500; }
.cq-hd-sub { font-family: var(--font-mono); font-size: 10px; color: var(--fg-subtle); margin-top: 3px; letter-spacing: .04em; }
.cq-hd-badge {
  display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .1em; color: var(--success);
  border: 1px solid color-mix(in oklab, var(--success) 40%, transparent);
  border-radius: 3px; padding: 2px 6px;
}
.cq-th-item { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--fg-subtle); font-weight: 500; }

.cq-row { opacity: 0; transform: translateY(4px); transition: opacity .45s, transform .45s; }
.cq-row.is-on { opacity: 1; transform: none; }
.cq-item-n { font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; }
.cq-item-q { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); margin-top: 2px; }
.cq-idx { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); }

.cq-cell {
  display: flex; align-items: center; gap: 7px; width: 100%;
  font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted);
  background: none; border: 0; border-radius: 6px; padding: 6px 8px; margin: -6px -8px;
  cursor: default; transition: background .2s;
  white-space: nowrap;
}
.cq-cell.is-live { cursor: pointer; }
.cq-cell.is-live:hover { background: var(--bg-sunken); }
.cq-cell.is-sel { color: var(--fg); background: color-mix(in oklab, var(--success) 8%, transparent); }
.cq-cell.is-sel.is-live:hover { background: color-mix(in oklab, var(--success) 13%, transparent); }
.cq-r { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex-shrink: 0; position: relative; transition: border-color .2s; }
.cq-cell.is-sel .cq-r { border-color: var(--brand); }
.cq-cell.is-sel .cq-r::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--brand); }
.cq-cell-q { font-size: 10.5px; color: var(--fg-subtle); }
.cq-pct { font-size: 10.5px; font-weight: 500; }
.cq-pct.up { color: var(--danger); }
.cq-pct.down { color: var(--success); }
.cq-none { color: var(--line-strong); font-family: var(--font-mono); }

.cq-tbl tfoot td { padding-top: 12px; padding-bottom: 14px; border-bottom: 0; }
.cq-foot-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--fg-subtle); }
.cq-foot-total { font-family: var(--font-mono); font-size: 15px; font-weight: 500; margin-top: 3px; }
.cq-foot-sup { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.cq-foot-sup i { font-style: normal; display: block; font-size: 10px; color: var(--fg-subtle); margin-top: 2px; }

.cq-hint { padding: 0 16px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); opacity: 0; transition: opacity .4s; }
.cq-hint.is-on { opacity: 1; }
.cq-hint b { color: var(--brand); font-weight: 500; }

/* ---- orders strip ---- */
.cq-orders-note { padding: 0 16px 16px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--fg-subtle); background: var(--bg); }
.cq-orders {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
  padding: 16px; border-top: 1px solid var(--line); background: var(--bg);
}
.cq-order {
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-raised); padding: 13px 14px;
  opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s;
}
.cq-order.is-on { opacity: 1; transform: none; }
.cq-order-hd { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted); overflow: hidden; }
.cq-order-hd span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-order-v { font-family: var(--font-sans); font-weight: 600; font-size: 21px; letter-spacing: -.02em; margin-top: 9px; font-variant-numeric: tabular-nums; }
.cq-order-s { font-family: var(--font-mono); font-size: 10px; color: var(--fg-subtle); margin-top: 3px; }
.cq-order-exp { display: flex; gap: 5px; margin-top: 11px; }
.cq-exp {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: 4px; background: none;
  padding: 3px 7px; color: var(--fg-muted); cursor: pointer;
}
.cq-exp:hover { border-color: var(--line-strong); color: var(--fg); }
.cq-order.is-total { border-color: var(--brand); }
.cq-order.is-total .cq-order-hd { color: var(--brand); letter-spacing: .1em; }
.cq-order.is-total .cq-order-v { color: var(--brand); font-size: 24px; }

/* ---- barra de conversão do mobile ----
   Só existe abaixo de 720px; no desktop nem entra no fluxo. A visibilidade é
   por CLASSE (.is-on) e usa visibility+transform: com `hidden` o display:flex
   da media query ganharia do [hidden]{display:none} e a barra ficaria presa. */
.cq-barwrap { display: none; }  /* desktop: a barra nem entra no fluxo */

/* ---- stats reusam om-hero-stats; nota de rodapé ---- */
.cq-stats { margin-top: 64px; }
.cq-foot-note { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); line-height: 1.6; max-width: 680px; }
.cq-foot-note a { color: var(--brand); text-decoration: none; }
.cq-foot-note a:hover { color: var(--brand-deep); text-decoration: underline; }

@media (max-width: 1024px) {
  .cq-hero { padding: 60px 20px 80px; }
  .cq-frame { margin-top: 48px; }
  .cq-save-r { font-size: 10.5px; }
}

@media (max-width: 820px) {
  .cq-save { gap: 12px 20px; }
  .cq-save-r { flex-basis: 100%; margin-left: 0; text-align: left; }

  /* o mapa vira um card por item (sem scroll horizontal) */
  .cq-tblwrap { display: none; }
  .cq-cards { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; }
  .cq-card { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); padding: 12px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
  .cq-card.is-on { opacity: 1; transform: none; }
  .cq-card-hd { display: flex; align-items: flex-start; gap: 10px; }
  .cq-card-idx { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; background: var(--bg-sunken); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
  .cq-card-item { flex: 1 1 auto; min-width: 0; }
  .cq-card-item .cq-item-n { font-size: 15px; overflow-wrap: anywhere; }
  .cq-card-item .cq-item-q { margin-top: 2px; }
  .cq-card-sel { flex: 0 0 auto; text-align: right; }
  .cq-card-sel-sup { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); }
  .cq-card-sel-v { font-family: var(--font-sans); font-weight: 600; font-size: 16px; color: var(--brand); margin-top: 3px; font-variant-numeric: tabular-nums; }
  .cq-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 12px; }
  .cq-tile { position: relative; min-width: 0; text-align: left; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg-raised); padding: 11px 12px; cursor: default; transition: border-color .2s, background .2s; }
  .cq-tile.is-live { cursor: pointer; }
  .cq-tile.is-sel { border-color: var(--success); background: color-mix(in oklab, var(--success) 7%, var(--bg-raised)); }
  .cq-tile-radio { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: #fff; }
  .cq-tile.is-sel .cq-tile-radio { border-color: var(--success); background: var(--success); }
  .cq-tile-sup { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); padding-right: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cq-tile-v { font-family: var(--font-sans); font-weight: 600; font-size: 19px; letter-spacing: -.01em; margin-top: 6px; font-variant-numeric: tabular-nums; }
  .cq-tile.is-sel .cq-tile-v { color: var(--success); }
  .cq-tile-note { font-family: var(--font-mono); font-size: 10.5px; margin-top: 4px; }
  .cq-tile-note.is-best { color: var(--success); }
  .cq-tile-note.is-up { color: var(--danger); }
  .cq-card-miss { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); }

  /* mapa resumido: só os 2 primeiros cards ficam à vista até o "ver mais". A
     regra é POSICIONAL — os .cq-card têm que continuar sendo os primeiros
     filhos de .cq-cards (o botão vem depois deles). O `3` é o
     $cdCardsVisible + 1 de app/Views/partials/compare-demo.php. */
  .cq-cards.is-clamped .cq-card:nth-child(n+3) { display: none; }

  /* Expander: UM card tracejado com duas linhas (rótulo + dica com os números
     do plano corrente). ⚠️ `display` só fora do `hidden`: o botão nasce
     `hidden` no SSR e um display incondicional venceria o [hidden] do UA. */
  .cq-more:not([hidden]) { display: flex; }
  .cq-more {
    flex-direction: column; gap: 5px; width: 100%; text-align: left;
    border: 1.5px dashed var(--line-strong); border-radius: 12px;
    background: var(--bg-sunken); padding: 14px; cursor: pointer;
  }
  .cq-more b { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--brand); }
  .cq-more i { font-style: normal; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--fg-muted); }
  /* expandido: o botão vira discreto e a dica sai (o mapa já está todo à vista) */
  .cq-more.is-less { background: none; }
  .cq-more.is-less b { color: var(--fg-muted); font-size: 13px; }
  .cq-more.is-less i { display: none; }
}

@media (max-width: 720px) {
  .cq-hero { padding: 44px 14px 60px; }
  .cq-hero-ctas { gap: 10px; }
  .cq-hero-ctas .om-btn { flex: 1 1 100%; justify-content: center; }
  .cq-steps { display: none; }
  .cq-frame { margin-top: 36px; border-radius: 8px; }
  .cq-frame-hd { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .cq-docs, .cq-plans { padding: 12px; }
  .cq-docs-l { flex-basis: 100%; margin-bottom: 2px; }
  .cq-live { margin-left: 0; flex-basis: 100%; }
  .cq-save { padding: 16px 14px; }
  .cq-save-v { font-size: 28px; }
  .cq-save-r { text-align: left; margin-left: 0; }
  .cq-hint, .cq-orders, .cq-orders-note { padding-left: 12px; padding-right: 12px; }
  .cq-stats { margin-top: 48px; }

  /* ⚠️ A barra é `fixed`, e o ESCOPO dela é responsabilidade do JS.
     O design usa um wrapper `position: sticky; bottom: 0; height: 0`, mas
     sticky-bottom só prende um elemento cuja posição natural cairia ABAIXO da
     dobra — e o wrapper fica no topo do hero, logo ele nunca prendia: media
     wrapTop em -398, -1098, -1898 conforme a página rolava.
     O que o design QUER está no comentário dele: "grudada na base enquanto o
     mapa estiver na tela". Isso é `fixed` + dois observers (CTA passou E hero
     ainda visível), em armCtaBar() de compare-demo.js. Só com o observer do CTA
     ela seguia a página inteira e aparecia sobre o FAQ. */
  .cq-barwrap { display: contents; }
  .cq-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line-strong); background: var(--bg-raised);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .12);
    visibility: hidden; transform: translateY(100%);
    transition: transform .28s var(--ease-out, ease), visibility .28s;
  }
  .cq-bar.is-on { visibility: visible; transform: none; }
  .cq-bar-v { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .cq-bar-v b { font-family: var(--font-sans); font-weight: 600; font-size: 19px; letter-spacing: -.02em; line-height: 1.1; color: var(--success); font-variant-numeric: tabular-nums; }
  .cq-bar-v span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--fg-subtle); }
  .cq-bar .om-btn { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 480px) {
  .cq-hero { padding: 36px 12px 52px; }
  .cq-brand { font-size: 10px; }
  .cq-save-v { font-size: 24px; }
  .cq-orders { grid-template-columns: 1fr; }
}

/* celulares pequenos: 320–420px — aperta os cards do mapa */
@media (max-width: 420px) {
  .cq-cards { padding: 12px 10px; gap: 8px; }
  .cq-card { padding: 11px 10px; border-radius: 11px; }
  .cq-card-hd { gap: 8px; flex-wrap: wrap; }
  .cq-card-idx { width: 24px; height: 24px; border-radius: 6px; font-size: 11px; }
  .cq-card-item { flex: 1 1 60%; min-width: 0; }
  .cq-card-item .cq-item-n { font-size: 14px; line-height: 1.25; }
  .cq-card-sel { flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; text-align: left; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
  .cq-card-sel-v { margin-top: 0; font-size: 15px; }
  .cq-tiles { gap: 7px; margin-top: 10px; }
  .cq-tile { padding: 10px; border-radius: 9px; }
  .cq-tile-radio { top: 8px; right: 8px; width: 16px; height: 16px; font-size: 10px; }
  .cq-tile-sup { font-size: 10px; gap: 5px; padding-right: 20px; }
  .cq-tile-v { font-size: 16px; margin-top: 5px; }
  .cq-tile-note { font-size: 10px; white-space: nowrap; }
  .cq-card-miss { margin-top: 10px; font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  /* a barra é conversão, não animação: perde a transição, não a função */
  .cq-doc, .cq-row, .cq-card, .cq-order, .cq-save, .cq-hint, .cq-bar { transition: none; }
  .cq-live-dot { animation: none; }
}