/* Consultline — estilos dos componentes. Valores vêm de tokens.css; nada aqui repete um token. */

body { margin: 0; background: var(--surface-100); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 0; }
.cl-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-6); }
.cl-stack { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); }

/* Contêiner: a única fonte de margem lateral. Todo bloco começa na mesma linha. */
.cl-container { box-sizing: border-box; width: 100%; max-width: calc(var(--container-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Tons de seção: remapeiam os tokens dentro da seção, então qualquer componente lá dentro já sai certo. */
.cl-tone-deep { background: var(--surface-0); }
.cl-tone-base { background: var(--surface-100); }
.cl-tone-raised { background: var(--surface-200); }
.cl-tone-cream {
  --surface-0: var(--cream); --surface-100: var(--cream); --surface-200: var(--cream-200); --surface-300: var(--cream-200); --card: var(--cream-card);
  --ink: var(--on-cream); --ink-muted: var(--on-cream-muted); --ink-subtle: var(--on-cream-subtle); --on-ink: var(--cream);
  --line: var(--cream-line); --line-strong: var(--cream-line-strong); --brand-bright: var(--brand); --focus: var(--brand); --signal-text: var(--cream-signal-text);
  --action: var(--brand); --action-hover: var(--brand-deep); --on-action: var(--on-brand);
  background: var(--cream); color: var(--on-cream);
}
.cl-tone-brand {
  --surface-0: var(--brand-deep); --surface-100: var(--brand-deep); --surface-200: var(--brand); --surface-300: var(--brand); --card: var(--brand);
  --ink: var(--on-brand); --ink-muted: var(--on-brand-muted); --ink-subtle: var(--on-brand-muted); --on-ink: var(--brand-deep);
  --line: var(--brand-line); --line-strong: var(--brand-line-strong); --brand-bright: var(--on-brand-accent); --focus: var(--on-brand);
  --action: var(--on-brand); --action-hover: var(--on-brand-muted); --on-action: var(--brand-deep);
  background: var(--brand-deep); color: var(--on-brand);
}

/* Section */
.cl-section { padding-block: var(--space-24); color: var(--ink); }
/* mesmo tom em seguida: hairline entre as seções (no creme e no azul, a linha do próprio tom) */
.cl-tone-deep + .cl-tone-deep, .cl-tone-base + .cl-tone-base, .cl-tone-raised + .cl-tone-raised, .cl-tone-cream + .cl-tone-cream, .cl-tone-brand + .cl-tone-brand { border-top: 1px solid var(--line); }
.cl-kicker { margin: 0 0 var(--space-3); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--brand-bright); }
.cl-section-title { font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -.02em; margin: 0; max-width: 22ch; color: var(--ink); text-wrap: balance; }
.cl-section-lead { font-size: 19px; line-height: 30px; font-weight: 400; color: var(--ink-muted); max-width: 56ch; margin: var(--space-4) 0 0; }
.cl-section-body { margin-top: var(--space-12); }
.cl-section-split > .cl-container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12) var(--space-16); align-items: start; }
.cl-section-split .cl-section-body { margin-top: 0; }
.cl-section-split .cl-section-title { font-size: 32px; line-height: 40px; }

/* Button */
.cl-btn { display: inline-flex; align-items: center; white-space: nowrap; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500; padding: 11px 20px; cursor: pointer; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.cl-btn:focus-visible, .cl-link:focus-visible, .cl-nav a:focus-visible, .cl-field input:focus-visible, .cl-field textarea:focus-visible, .cl-svc:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cl-btn-lg { padding: 14px var(--space-6); font-size: 16px; }
.cl-btn-primary { background: var(--action); color: var(--on-action); }
.cl-btn-primary:hover { background: var(--action-hover); }
.cl-btn-brand { background: var(--brand); color: var(--on-brand); }
.cl-btn-brand:hover { background: var(--brand-deep); }
.cl-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.cl-btn-ghost:hover { border-color: var(--ink); }
.cl-btn[disabled] { opacity: .45; cursor: not-allowed; }
.cl-btn-arrow { width: 16px; height: 16px; flex: none; transition: transform .15s ease; }
.cl-btn:hover .cl-btn-arrow, .cl-link:hover .cl-btn-arrow, .cl-svc:hover .cl-btn-arrow { transform: translateX(2px); }
.cl-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--brand-bright); font-family: var(--font-sans); font-size: 15px; font-weight: 500; text-decoration: none; }
.cl-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Input */
.cl-field { display: flex; flex-direction: column; gap: 6px; min-width: 280px; }
.cl-field label { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); }
.cl-field input, .cl-field textarea { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; padding: 11px 14px; }
.cl-field input::placeholder, .cl-field textarea::placeholder { color: var(--ink-subtle); }
.cl-field input:hover, .cl-field textarea:hover { border-color: var(--ink-muted); }
.cl-field input:focus, .cl-field textarea:focus { border-color: var(--focus); }
.cl-field-help { font-size: 14px; line-height: 20px; color: var(--ink-subtle); margin: 0; }
.cl-field-invalid input, .cl-field-invalid textarea { border-color: var(--signal-text); }
.cl-field-invalid .cl-field-help { color: var(--signal-text); }

/* NavBar */
.cl-nav { height: var(--nav-height); border-bottom: 1px solid var(--line); background: var(--surface-0); }
.cl-nav-inner { display: flex; align-items: center; gap: var(--space-12); height: 100%; }
.cl-nav-logo { display: block; height: 34px; margin-right: auto; }
.cl-nav-logo img { height: 34px; width: auto; display: block; }
.cl-nav-links { display: flex; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.cl-nav-links a { color: var(--ink-muted); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; transition: color .15s ease; }
.cl-nav-links a:hover, .cl-nav-links a[aria-current="page"] { color: var(--ink); }

/* Hero */
.cl-hero { position: relative; padding-block: var(--space-32) var(--space-24); color: var(--ink); }
.cl-hero h1 { font-size: 60px; line-height: 66px; font-weight: 600; letter-spacing: -.025em; margin: 0; max-width: 20ch; color: var(--ink); text-wrap: balance; }
.cl-hero-lead { font-size: 19px; line-height: 30px; color: var(--ink-muted); max-width: 52ch; margin: var(--space-6) 0 0; }
.cl-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); }
.cl-hero-aside { margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: 15px; line-height: 24px; color: var(--ink-subtle); }
.cl-hero-compact { padding-block: var(--space-16); }
.cl-hero-compact h1 { font-size: 44px; line-height: 52px; }

/* ServiceCard */
.cl-svc { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: border-color .15s ease; box-sizing: border-box; }
.cl-svc:hover { border-color: var(--line-strong); }
.cl-svc-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--brand-bright); }
.cl-svc h3 { font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.cl-svc p { font-size: 15px; line-height: 24px; color: var(--ink-muted); margin: 0; }
.cl-svc-more { margin-top: auto; padding-top: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-1); font-size: 15px; font-weight: 500; color: var(--brand-bright); }
.cl-grid-2, .cl-grid-3, .cl-grid-4 { display: grid; gap: var(--space-6); }
.cl-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ClientLogos */
.cl-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cl-logo-cols, 5), minmax(0, 1fr)); gap: var(--space-4); }
.cl-logo { display: flex; align-items: center; justify-content: center; height: 104px; padding: var(--space-4) var(--space-6); box-sizing: border-box; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cl-logo-dark { background: var(--brand-deep); border-color: var(--brand-deep); }
.cl-logo img { display: block; max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; }
.cl-logos-mono .cl-logo img { filter: grayscale(1); opacity: .72; transition: filter .15s ease, opacity .15s ease; }
.cl-logos-mono .cl-logo:hover img { filter: none; opacity: 1; }

/* Stat */
.cl-stat { display: flex; flex-direction: column; gap: var(--space-2); min-width: 180px; }
.cl-stat-value { font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-stat-value span { color: var(--brand-bright); margin-left: 2px; }
.cl-stat-label { font-size: 15px; line-height: 22px; color: var(--ink-muted); max-width: 30ch; }

/* Quote */
.cl-quote { margin: 0; padding-block: var(--space-24); color: var(--ink); }
.cl-quote blockquote { margin: 0; font-size: 28px; line-height: 40px; font-weight: 500; letter-spacing: -.015em; color: var(--ink); max-width: 36ch; text-wrap: balance; }
.cl-quote figcaption { margin-top: var(--space-6); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.cl-quote figcaption strong { color: var(--ink); font-weight: 600; }

/* Footer */
.cl-footer { padding-block: var(--space-16) var(--space-8); color: var(--ink); }
.cl-footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-8); padding-bottom: var(--space-12); }
.cl-footer-logo img { height: 44px; width: auto; display: block; }
.cl-footer-tag { margin: var(--space-6) 0 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); max-width: 32ch; }
.cl-footer h4 { margin: 0 0 var(--space-4); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.cl-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cl-footer ul a { color: var(--ink-muted); text-decoration: none; font-size: 15px; }
.cl-footer ul a:hover { color: var(--ink); }
.cl-footer-legal { display: flex; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; color: var(--ink-subtle); }

@media (max-width: 1100px) { .cl-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cl-nav-links { gap: var(--space-6); } .cl-nav-inner { gap: var(--space-8); } }
@media (max-width: 900px) { .cl-section-split > .cl-container { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .cl-container { padding-inline: var(--space-4); }
  .cl-nav-links { display: none; }
  .cl-hero { padding-block: var(--space-16); }
  .cl-hero h1 { font-size: 38px; line-height: 44px; }
  .cl-section { padding-block: var(--space-16); }
  .cl-section-title, .cl-section-split .cl-section-title { font-size: 30px; line-height: 38px; }
  .cl-grid-2, .cl-grid-3, .cl-grid-4, .cl-footer-top { grid-template-columns: 1fr; }
  .cl-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-logo { height: 80px; padding: var(--space-3) var(--space-4); }
  .cl-logo img { max-height: 40px; }
  .cl-quote { padding-block: var(--space-16); }
  .cl-quote blockquote { font-size: 22px; line-height: 32px; }
  .cl-footer { padding-block: var(--space-12) var(--space-6); }
  .cl-footer-legal { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .cl-btn, .cl-btn-arrow, .cl-svc, .cl-link, .cl-logos-mono .cl-logo img { transition: none; } }