/* ==========================================================================
   components.css — camada única de componentes (etapa 12), consumida por a/b/c.
   Sessão S2 (núcleo): CTAs, C-CARD, C-SHOT, C-SVG, C-BADGE, C-HEADER, C-FOOTER.
   C-CTA-STICKY entra aqui; C-FORM (S3), C-TABLE/C-ACCORDION (S4) e C-DEMO (S6)
   virão nas próprias sessões. Depende de tokens.css + base.css.
   ========================================================================== */

/* ─────────────────────────── CTAs ─────────────────────────── */

/* C-CTA-PRIMARY — botão laranja de conversão (DS §2) */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  height: 56px; padding-inline: var(--sp-32);
  font-family: var(--sans); font-size: var(--f-body-lg); font-weight: 700;
  color: var(--tx-1-dark);
  background: var(--cta-orange);
  border: none; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.btn-primary:hover { background: var(--cta-orange-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-primary:active { background: var(--cta-orange-active); transform: translateY(0); }

/* C-CTA-GHOST — botão secundário (abre demo) */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  height: 48px; padding-inline: var(--sp-24);
  font-family: var(--sans); font-size: var(--f-body); font-weight: 600;
  color: var(--tx-1-light);
  background: transparent;
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
  transition: background var(--t), border-color var(--t);
}
.btn-ghost:hover { background: rgba(46,107,230,0.05); border-color: var(--brand-blue); }
.section--dark .btn-ghost { color: var(--tx-1-dark); border-color: var(--border-dark); }
.section--dark .btn-ghost:hover { background: rgba(255,255,255,0.05); }

/* C-CTA-STICKY — CTA fixo pós-1º scroll; escondido ao entrar na Oferta (JS S3/S7) */
.cta-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center;
  padding: var(--sp-12) var(--sp-16);
  background: rgba(10,14,26,0.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-dark);
  transform: translateY(100%); transition: transform var(--t);
}
.cta-sticky.is-visible { transform: translateY(0); }
.cta-sticky[hidden] { display: none; }
.cta-sticky .btn-primary { width: 100%; max-width: 480px; }
@media (min-width: 900px) { .cta-sticky { justify-content: flex-end; padding-inline: var(--sp-32); } .cta-sticky .btn-primary { width: auto; } }

/* ─────────────────────────── C-CARD ─────────────────────────── */
.card {
  background: var(--surface-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-24);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.card:hover { transform: translateY(-3px); border-color: var(--brand-blue); box-shadow: var(--shadow-md); }
.card__icon { width: 40px; height: 40px; margin-bottom: var(--sp-16); color: var(--brand-blue); }
.card__title { font-size: var(--f-h3); margin-bottom: var(--sp-8); }
.card__text { color: var(--tx-2-light); font-size: var(--f-body); }
.section--dark .card { background: var(--surface-dark); border-color: var(--border-dark); color: var(--tx-1-dark); }
.section--dark .card__text { color: var(--tx-2-dark); }

/* Grade de cards reutilizável */
.card-grid { display: grid; gap: var(--sp-24); grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ─────────────────────────── C-SHOT ─────────────────────────── */
/* Moldura canônica única de screenshot (DS §7) — mesma proporção/borda/sombra
   em hero e pilares → efeito "tour contínuo". */
.shot {
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dark);
  overflow: hidden;
  background: var(--surface-dark);
}
.shot img { width: 100%; height: auto; }
.shot--16x9 { aspect-ratio: 16 / 9; }
.shot--3x2  { aspect-ratio: 3 / 2; }

/* ─────────────────────────── C-SVG ─────────────────────────── */
/* Ícone/ilustração de sinalização — currentColor herda o papel da seção.
   Cores por papel (DS §7): estrutura/dor azul, ROI/dinheiro laranja, confiança verde. */
.svg-ico { display: inline-block; width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svg-ico--money { color: var(--cta-orange); }
.svg-ico--trust { color: var(--ok); }
.svg-ico--brand { color: var(--brand-blue); }

/* ─────────────────────────── C-BADGE ─────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  font-size: var(--f-sm); font-weight: 600;
  border: 1px solid var(--border-light); border-radius: var(--radius-pill);
  color: var(--tx-2-light); background: var(--surface-light);
}
.badge svg { width: 18px; height: 18px; }
.section--dark .badge { border-color: var(--border-dark); color: var(--tx-2-dark); background: var(--surface-dark); }

/* ─────────────────────────── C-FORM ─────────────────────────── */
/* Captura de e-mail (etapa 12 §3). Um input + CTA; sem nome/telefone.
   Estados via [data-state] no <form>: default | enviando | sucesso | erro. */
.form { max-width: 520px; }
.form__row { display: flex; flex-direction: column; gap: var(--sp-12); }
@media (min-width: 560px) { .form__row { flex-direction: row; } }
.form__field {
  flex: 1;
  height: 56px; padding-inline: var(--sp-16);
  font: inherit; color: var(--tx-1-light);
  background: var(--surface-light);
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
  transition: border-color var(--t), box-shadow var(--t);
}
.form__field::placeholder { color: var(--tx-3-light); }
.form__field:focus { outline: none; border-color: var(--info); box-shadow: 0 0 0 3px rgba(59,130,246,0.25); }
.form[data-state="erro"] .form__field { border-color: var(--err); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */
.form__feedback { min-height: 1.4em; margin-top: var(--sp-12); font-size: var(--f-sm); color: var(--tx-2-light); }
.form__feedback.is-error { color: var(--err); }
.form__feedback.is-ok { color: var(--ok); }
.form__note { display: flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-12); font-size: var(--f-sm); color: var(--tx-3-light); }
.form[data-state="enviando"] .btn-primary { opacity: 0.7; pointer-events: none; }
/* Sobre fundo escuro (Oferta/Fechamento) */
.section--dark .form__field { background: var(--surface-dark-2); border-color: var(--border-dark); color: var(--tx-1-dark); }
.section--dark .form__field::placeholder { color: var(--tx-3-dark); }
.section--dark .form__feedback { color: var(--tx-2-dark); }
.section--dark .form__note { color: var(--tx-2-dark); }
.form__fine-print { margin-top: var(--sp-8); font-size: var(--f-xs); color: var(--tx-3-light); }
.section--dark .form__fine-print { color: var(--tx-3-dark); }

/* ─────────────────────────── C-TABLE ─────────────────────────── */
/* Tabela comparativa (DS §2). Desktop = grade; mobile ≤768 = scroll horizontal
   com 1ª coluna fixa. Coluna/linha FlowNC destacada em azul sutil. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.table-compare { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--surface-light); font-size: var(--f-body); }
.table-compare th, .table-compare td { padding: var(--sp-16); text-align: left; border-bottom: 1px solid var(--border-light); }
.table-compare thead th { font-weight: 700; color: var(--tx-1-light); background: var(--bg-light); position: sticky; top: 0; }
.table-compare tbody th { font-weight: 600; color: var(--tx-2-light); position: sticky; left: 0; background: var(--surface-light); }
.table-compare .col-flownc { background: rgba(46,107,230,0.05); color: var(--tx-1-light); font-weight: 600; }
.table-compare thead .col-flownc { color: var(--brand-blue); }
.table-compare .cell-yes { color: var(--ok); font-weight: 700; }
.table-compare .cell-no  { color: var(--tx-3-light); }

/* ─────────────────────────── C-ACCORDION ─────────────────────────── */
/* Acordeão genérico (FAQ + guia SmartScreen). Chevron gira 180° em .is-open;
   conteúdo animado por grid 0fr→1fr (DS §2). */
.accordion { border-top: 1px solid var(--border-light); }
.accordion__item { border-bottom: 1px solid var(--border-light); }
.accordion__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
  width: 100%; min-height: 56px; padding: var(--sp-16) 0;
  font: inherit; font-weight: 600; font-size: var(--f-body-lg); text-align: left;
  color: var(--tx-1-light); background: transparent; border: none;
}
.accordion__chevron { flex: 0 0 auto; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t); color: var(--tx-3-light); }
.accordion__item.is-open .accordion__chevron { transform: rotate(180deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t); }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__body { padding-bottom: var(--sp-24); color: var(--tx-2-light); font-size: var(--f-body); }
.section--dark .accordion { border-top-color: var(--border-dark); }
.section--dark .accordion__item { border-bottom-color: var(--border-dark); }
.section--dark .accordion__head { color: var(--tx-1-dark); }
.section--dark .accordion__body { color: var(--tx-2-dark); }

/* ─────────────────────────── C-DEMO ─────────────────────────── */
/* Demo navegável em moldura de janela Windows. Dois modos:
   - modal (A/C): overlay acionado pelos CTAs [data-demo-open]
   - embutido (B): .demo--inline direto no fluxo, sem overlay
   "nada é gravado" = microcopy fixa. Fallback mobile = vídeo (JS decide). */
.demo-frame { border: 1px solid var(--border-dark); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-dark); box-shadow: var(--shadow-dark); }
.demo-frame__bar { display: flex; align-items: center; gap: var(--sp-8); height: 36px; padding-inline: var(--sp-12); background: var(--surface-dark-2); border-bottom: 1px solid var(--border-dark); }
.demo-frame__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-dark); }
.demo-frame__title { margin-left: var(--sp-8); font-size: var(--f-xs); color: var(--tx-3-dark); font-family: var(--mono); }
.demo-frame__body { position: relative; aspect-ratio: 16 / 9; }
.demo-frame__body iframe, .demo-frame__body video, .demo-frame__body img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.demo-frame__note { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-12); font-size: var(--f-xs); color: var(--tx-3-dark); }
.demo-frame__note svg { width: 14px; height: 14px; color: var(--ok); flex: 0 0 auto; }

/* Embutido (Versão B) */
.demo--inline { max-width: 960px; margin-inline: auto; }

/* Modal (Versões A/C) */
.demo-modal { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: var(--sp-24); background: rgba(10,14,26,0.78); backdrop-filter: blur(4px); }
.demo-modal.is-open { display: grid; }
.demo-modal__dialog { width: 100%; max-width: 960px; }
.demo-modal__close { position: absolute; top: var(--sp-16); right: var(--sp-16); width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-pill); border: 1px solid var(--border-dark); background: var(--surface-dark); color: var(--tx-1-dark); }
.demo-modal__close:hover { background: var(--surface-dark-2); }
body.demo-lock { overflow: hidden; }

/* ─────────────────────────── C-HEADER ─────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(248,250,252,0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vc-border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); }
.site-header__logo { display: inline-flex; align-items: center; height: 32px; color: var(--brand-blue); font-weight: 700; }
.site-header__nav { display: none; gap: var(--sp-24); font-size: var(--f-sm); font-weight: 600; color: var(--tx-2-light); }
.site-header__nav a:hover { color: var(--brand-blue); }
@media (min-width: 900px) { .site-header__nav { display: flex; } }
.site-header .btn-primary { height: 44px; font-size: var(--f-body); }

/* Marca oficial + header escuro (paridade com o site no ar) */
.site-header__logo { gap: var(--sp-12); }
.site-header__logo img { width: 206px; height: 32px; }
.badge-beta {
  font-family: var(--mono); font-size: var(--f-xs); font-weight: 600;
  color: var(--brand-blue);
  border: 1px solid var(--border-dark); border-radius: var(--radius-pill);
  padding: 2px var(--sp-8); background: var(--surface-dark-2); white-space: nowrap;
}
.site-header--dark { background: rgba(10,14,26,0.85); border-bottom-color: var(--border-dark); }
.site-header--dark .site-header__nav { color: var(--tx-2-dark); }
.site-header--dark .site-header__nav a:hover { color: var(--tx-1-dark); }

/* ─────────────────────────── C-FOOTER ─────────────────────────── */
.site-footer { background: var(--bg-dark); color: var(--tx-2-dark); padding-block: var(--sp-64); }
.site-footer a { color: var(--tx-2-dark); }
.site-footer a:hover { color: var(--tx-1-dark); }
.site-footer__grid { display: grid; gap: var(--sp-32); grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__legal { margin-top: var(--sp-32); padding-top: var(--sp-24); border-top: 1px solid var(--border-dark); font-size: var(--f-xs); color: var(--tx-3-dark); }