/* ============================================================
   PADRÃO KANNON — COMPONENTES
   Classes .k-* construídas sobre kannon-tokens.css.
   São os blocos de uma landing vendedora. Use, combine, repita.
   Dependência: kannon-tokens.css carregado antes.
   ============================================================ */

/* ---- Reset enxuto (escopo .k-root pra não vazar) ---------- */
.k-root, .k-root * { box-sizing: border-box; }
.k-root {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.k-root p { margin: 0; }
.k-root h1, .k-root h2, .k-root h3 { margin: 0; font-weight: 700; }

/* ---- Container + seção --------------------------------------*/
.k-container { width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem); }
.k-section { padding-block: var(--section-y); }
.k-section--surface { background: var(--surface); }

/* ---- Tipo utilitária ---------------------------------------*/
.k-eyebrow {
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brand-ink); margin: 0 0 var(--sp-4);
}
.k-display {
  font-size: var(--text-3xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight); font-weight: 700;
  text-wrap: balance;
}
.k-display em {                       /* acento serifado em itálico */
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  color: var(--brand-ink);
}
.k-h2 { font-size: var(--text-2xl); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight); text-wrap: balance; }
.k-lead {
  font-size: var(--text-lg); line-height: 1.5; color: var(--ink-soft);
  max-width: 52ch; text-wrap: pretty;
}
.k-body { color: var(--ink-soft); max-width: var(--measure); text-wrap: pretty; }

/* ---- Botões -------------------------------------------------*/
.k-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); min-height: var(--tap);
  padding: 0 var(--sp-5); border-radius: var(--r-md);
  font: inherit; font-weight: 600; font-size: var(--text-base);
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.k-btn:active { transform: translateY(1px); }
.k-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.k-btn--primary { background: var(--brand-strong); color: var(--on-brand);
  box-shadow: var(--shadow-sm); }
.k-btn--primary:hover { box-shadow: var(--shadow-md);
  filter: brightness(1.05); }
.k-btn--secondary { background: transparent; color: var(--ink);
  border-color: var(--line); }
.k-btn--secondary:hover { border-color: var(--ink); background: var(--paper); }
.k-btn--ghost { background: transparent; color: var(--brand-ink); padding-inline: var(--sp-3); }
.k-btn--lg { min-height: 56px; padding-inline: var(--sp-6); font-size: var(--text-md); }
.k-btn--block { display: flex; width: 100%; }

/* ---- Faixa de confiança (trust strip) ----------------------*/
.k-trust { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-6);
  font-size: var(--text-sm); color: var(--ink-mute); }
.k-trust__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.k-trust__star { color: var(--brand); }

/* ---- HERO ---------------------------------------------------*/
.k-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-6); }
.k-hero__grid { display: grid; gap: var(--sp-7); align-items: center;
  grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 760px){ .k-hero__grid { grid-template-columns: 1fr; } }

/* ---- Placeholder de imagem (use até ter a foto real) -------*/
.k-ph {
  --c: var(--ink-mute);
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background:
    repeating-linear-gradient(45deg,
      oklch(0.92 0.01 80) 0 10px, oklch(0.95 0.008 80) 10px 20px);
  border: 1px solid var(--line);
  display: grid; place-items: center; min-height: 220px; color: var(--ink-mute);
  font-family: var(--font-mono); font-size: var(--text-sm); text-align: center;
}
.k-ph[data-ratio="4-5"]{ aspect-ratio: 4/5; }
.k-ph[data-ratio="16-9"]{ aspect-ratio: 16/9; }
.k-ph[data-ratio="1-1"]{ aspect-ratio: 1/1; }

/* ---- Métricas / números ------------------------------------*/
.k-metrics { display: flex; flex-wrap: wrap; gap: var(--sp-7); }
.k-metric__n { font-size: var(--text-2xl); font-weight: 700;
  letter-spacing: var(--tracking-tight); color: var(--ink); line-height: 1; }
.k-metric__l { font-size: var(--text-sm); color: var(--ink-mute); margin-top: var(--sp-2); }

/* ---- Prova social / depoimento -----------------------------*/
.k-quote { background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.5rem,3vw,2.5rem);
  box-shadow: var(--shadow-sm); max-width: 720px; }
.k-quote__text { font-size: var(--text-lg); line-height: 1.45;
  color: var(--ink); text-wrap: pretty; }
.k-quote__by { display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5); }
.k-avatar { width: 48px; height: 48px; border-radius: var(--r-pill);
  background: var(--brand-soft); display: grid; place-items: center;
  font-weight: 700; color: var(--brand-ink); flex: none; }
.k-quote__name { font-weight: 600; font-size: var(--text-sm); }
.k-quote__role { font-size: var(--text-sm); color: var(--ink-mute); }
.k-logos { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-5) var(--sp-7); opacity: .7; }
.k-logo { font-weight: 700; color: var(--ink-soft); letter-spacing: -0.01em;
  font-size: var(--text-md); }

/* ---- Benefícios --------------------------------------------*/
.k-benefits { display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px){ .k-benefits { grid-template-columns: 1fr; } }
.k-benefit__icon { width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--brand-soft); color: var(--brand-ink);
  display: grid; place-items: center; margin-bottom: var(--sp-4); }
.k-benefit__icon svg { width: 22px; height: 22px; }
.k-benefit__title { font-size: var(--text-md); font-weight: 700; margin-bottom: var(--sp-2); }
.k-benefit__text { color: var(--ink-soft); font-size: var(--text-base); text-wrap: pretty; }

/* ---- Faixa de CTA ------------------------------------------*/
.k-cta-band { background: var(--ink); color: var(--paper);
  border-radius: var(--r-lg); padding: clamp(2rem,5vw,4rem);
  display: grid; gap: var(--sp-5); text-align: center; justify-items: center; }
.k-cta-band .k-h2 { color: var(--paper); }
.k-cta-band .k-lead { color: oklch(0.85 0.01 80); }
.k-cta-band .k-btn--secondary { color: var(--paper); border-color: oklch(0.5 0.01 80); }

/* ---- Formulário --------------------------------------------*/
.k-form { display: grid; gap: var(--sp-4); max-width: 460px; }
.k-field { display: grid; gap: var(--sp-2); }
.k-field label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.k-input, .k-textarea, .k-select {
  font: inherit; min-height: var(--tap); padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink); width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.k-textarea { min-height: 110px; padding-top: var(--sp-3); resize: vertical; }
.k-input:focus, .k-textarea:focus, .k-select:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.k-input::placeholder, .k-textarea::placeholder { color: var(--ink-mute); }
.k-form__note { font-size: var(--text-sm); color: var(--ink-mute); }

/* ---- Rodapé ------------------------------------------------*/
.k-footer { background: var(--ink); color: oklch(0.82 0.01 80);
  padding-block: var(--sp-8) var(--sp-6); }
.k-footer a { color: oklch(0.82 0.01 80); text-decoration: none; }
.k-footer a:hover { color: var(--paper); }
.k-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--sp-6); padding-bottom: var(--sp-6);
  border-bottom: 1px solid oklch(1 0 0 / 0.1); }
.k-footer__brand { font-size: var(--text-md); font-weight: 700; color: var(--paper); }
.k-footer__cols { display: flex; flex-wrap: wrap; gap: var(--sp-7); }
.k-footer__col { display: grid; gap: var(--sp-2); align-content: start; }
.k-footer__col strong { color: var(--paper); font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-2); }
.k-footer__col a, .k-footer__col span { font-size: var(--text-sm); }
.k-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-5); font-size: var(--text-sm);
  color: oklch(0.62 0.01 80); }

/* ---- helpers -----------------------------------------------*/
.k-stack-4 > * + * { margin-top: var(--sp-4); }
.k-stack-5 > * + * { margin-top: var(--sp-5); }
.k-divider { height: 1px; background: var(--line); border: 0; margin: 0; }