/* site.css — camada de marketing sobre o Cubo Health Design System (ds-tokens.css + app.css).
   Usa apenas variáveis do DS. Navy = estrutura, teal = acento dados/IA, laranja = 1 destaque por tela. */

.mkt { background: var(--surface-page); color: var(--text-body); }
.mkt a { text-decoration: none; }
.mkt a:not(.btn) { color: inherit; }
/* garante contraste dos botões preenchidos em qualquer fundo */
.mkt .btn-primary { color: var(--action-primary-fg, #fff); }
.mkt .btn-accent { color: var(--action-accent-fg, #fff); }
.wrap { max-width: var(--max-content, 1200px); margin: 0 auto; padding: 0 var(--gutter-page, 24px); }
@media (min-width: 900px){ .wrap { padding: 0 var(--gutter-page-lg, 48px); } }
.sect { padding: var(--section-y, 96px) 0; }
.sect-sm { padding: var(--space-12, 80px) 0; }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-13); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-accent); }
.h-display { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--text-heading); line-height: var(--leading-tight); }
.lead { font-size: var(--text-18); color: var(--text-body); line-height: var(--leading-relaxed); }
.sect-head { max-width: 720px; margin: 0 0 var(--space-9); }
.sect-head h2 { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); font-size: clamp(26px, 3.4vw, 38px); color: var(--text-heading); margin: var(--space-4) 0 var(--space-3); }
.sect-head p { color: var(--text-muted); font-size: var(--text-18); margin: 0; }

/* Header */
.mkt-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface-card) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: var(--border-hairline) solid var(--border-subtle); }
.mkt-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.mkt-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-18); color: var(--text-heading); white-space: nowrap; }
.mkt-logo svg { width: 30px; height: 30px; display: block; }
.mkt-nav { display: flex; align-items: center; gap: var(--space-7); }
.mkt-nav a.link { font-size: var(--text-14); font-weight: var(--weight-medium); color: var(--text-body); white-space: nowrap; }
.mkt-nav a.link:hover { color: var(--text-heading); }
.mkt-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--text-heading); }
@media (max-width: 860px){
  .mkt-nav a.link { display: none; }
  .mkt-burger { display: inline-flex; }
  .mkt-nav.open { position: absolute; top: 68px; left: 0; right: 0; background: var(--surface-card); border-bottom: var(--border-hairline) solid var(--border-subtle); flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-4) var(--gutter-page); }
  .mkt-nav.open a.link { display: block; padding: var(--space-4) 0; border-bottom: var(--border-hairline) solid var(--border-subtle); }
}

/* Hero (navy full-bleed) */
.hero { position: relative; background: radial-gradient(120% 120% at 85% 0%, var(--navy-600) 0%, var(--navy-800) 58%, var(--navy-900) 100%); color: var(--text-on-inverse); overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; padding-top: var(--space-13); padding-bottom: var(--space-13); display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-10); align-items: center; }
.hero::after { content:""; position:absolute; right:-140px; top:20px; width:520px; height:520px; background: radial-gradient(circle, color-mix(in srgb, var(--teal-400) 22%, transparent), transparent 62%); pointer-events:none; }
.hero .eyebrow { color: var(--teal-200); }
.hero h1 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: var(--tracking-tight); margin: var(--space-4) 0 0; color: #fff; }
.hero h1 .hl { color: var(--teal-300); }
.hero p.sub { font-size: clamp(16px, 1.6vw, 20px); color: var(--text-on-inverse-muted); max-width: 560px; margin: var(--space-6) 0 var(--space-8); }
.hero .cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 900px){ .hero .wrap { grid-template-columns: 1fr; gap: var(--space-8); } .hero-visual { order: -1; } }

/* Botões grandes (complementam .btn do app.css) */
.btn-lg { padding: 14px 26px; font-size: var(--text-16); border-radius: var(--radius-lg); }
.btn-highlight { background: var(--action-highlight-bg); color: var(--action-highlight-fg); border-color: transparent; }
.btn-highlight:hover { background: var(--action-highlight-hover); }
.btn-inverse { background: #fff; color: var(--navy-800); border-color: transparent; }
.btn-inverse:hover { background: var(--gray-100); }
.btn-ghost-light { background: transparent; color: #fff; border: var(--border-hairline) solid var(--border-inverse); }
.btn-ghost-light:hover { background: rgba(255,255,255,.08); }

/* Faixa manifesto */
.faixa { background: var(--surface-inverse-deep); color: var(--text-on-inverse); }
.faixa .wrap { padding: var(--space-10) var(--gutter-page); text-align: center; }
.faixa p { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: clamp(20px, 2.6vw, 30px); letter-spacing: var(--tracking-snug); margin: 0 auto; max-width: 900px; line-height: var(--leading-snug); }
.faixa .hl { color: var(--teal-300); }

/* KPI row */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); }
.kpi { background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-7); }
.kpi .num { font-family: var(--font-mono); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; font-size: var(--text-36); color: var(--text-heading); line-height: 1; }
.kpi .lab { color: var(--text-muted); font-size: var(--text-14); margin-top: var(--space-3); }

/* Grid de cards genérico */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px){ .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .cards-4 { grid-template-columns: 1fr; } }
.card-mkt { background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-8); transition: var(--transition-control, all .18s); display: block; }
a.card-mkt:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-default); }
.card-mkt .ic { width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center; margin-bottom: var(--space-5); background: var(--surface-teal-soft); color: var(--teal-600); }
.card-mkt h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-20); color: var(--text-heading); margin: 0 0 var(--space-3); }
.card-mkt p { color: var(--text-muted); font-size: var(--text-14); margin: 0; line-height: var(--leading-normal); }
.card-mkt ul { margin: var(--space-4) 0 0; padding-left: 1.1em; color: var(--text-muted); font-size: var(--text-14); }
.card-mkt li { margin: var(--space-2) 0; }
.card-mkt .top-rule { height: 3px; border-radius: var(--radius-pill); margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-6); }

/* CTA band */
.cta-band { background: linear-gradient(180deg, var(--surface-card), var(--surface-sunken)); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-2xl); padding: var(--space-12) var(--space-8); text-align: center; }
.cta-band h2 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(24px, 3vw, 34px); letter-spacing: var(--tracking-tight); color: var(--text-heading); margin: 0 0 var(--space-4); }
.cta-band p { color: var(--text-muted); font-size: var(--text-16); margin: 0 0 var(--space-7); }
.cta-band .cta { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* Mock de dashboard (ilustrativo, sem dado real) */
.mock { background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6); }
.mock .mock-bar { display: flex; gap: 6px; margin-bottom: var(--space-5); }
.mock .mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-200); display: block; }
.mock .mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.mock .mock-kpis div { background: var(--surface-sunken); border-radius: var(--radius-sm); padding: var(--space-4); }
.mock .mock-kpis b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-heading); font-size: var(--text-20); display: block; }
.mock .mock-kpis span { color: var(--text-subtle); font-size: var(--text-12); font-family: var(--font-mono); }
.mock .mock-chart { display: flex; align-items: flex-end; gap: 7px; height: 96px; padding-top: var(--space-3); }
.mock .mock-chart i { flex: 1; border-radius: 3px 3px 0 0; display: block; }

/* Footer */
.mkt-footer { background: var(--surface-inverse); color: var(--text-on-inverse-muted); padding: var(--space-11) 0 var(--space-8); margin-top: var(--space-12); }
.mkt-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-8); }
@media (max-width: 820px){ .mkt-footer .cols { grid-template-columns: 1fr 1fr; gap: var(--space-7); } }
@media (max-width: 520px){ .mkt-footer .cols { grid-template-columns: 1fr; } }
.mkt-footer .mkt-logo { color: #fff; }
.mkt-footer h4 { font-family: var(--font-mono); font-size: var(--text-12); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--navy-200); margin: 0 0 var(--space-5); }
.mkt-footer a.fl { display: block; color: var(--text-on-inverse-muted); font-size: var(--text-14); padding: var(--space-2) 0; }
.mkt-footer a.fl:hover { color: #fff; }
.mkt-footer .legal { border-top: var(--border-hairline) solid var(--border-inverse); margin-top: var(--space-9); padding-top: var(--space-6); color: var(--navy-200); font-size: var(--text-13); line-height: var(--leading-relaxed); }
.mkt-footer .legal a { color: var(--teal-200); }

/* Redes sociais */
.social { display: flex; gap: var(--space-4); margin-top: var(--space-5); }
.social a { width: 38px; height: 38px; border-radius: var(--radius-md); display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; }
.social a:hover { background: var(--teal-500); }
.social svg { width: 18px; height: 18px; }

/* Split (texto + mídia) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
.split + .split { margin-top: var(--space-11); }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; gap: var(--space-7); } .split .split-media { order: -1; } }
.split h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-24); color: var(--text-heading); margin: var(--space-3) 0 var(--space-4); }
.split ul { margin: 0; padding-left: 1.1em; color: var(--text-muted); }
.split li { margin: var(--space-2) 0; }

/* Passos numerados */
.step { display: flex; gap: var(--space-5); align-items: flex-start; }
.step .n { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--surface-teal-soft); color: var(--teal-600); font-family: var(--font-mono); font-weight: var(--weight-semibold); display: grid; place-items: center; }
.step h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-18); color: var(--text-heading); margin: var(--space-2) 0 var(--space-2); }
.step p { color: var(--text-muted); font-size: var(--text-14); margin: 0; }

/* Grid de fontes */
.fontes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.fonte { background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); }
.fonte b { display: block; font-family: var(--font-display); color: var(--text-heading); font-size: var(--text-16); margin-bottom: var(--space-2); }
.fonte span { color: var(--text-muted); font-size: var(--text-13); line-height: var(--leading-normal); }

/* Grid de treinamentos: 3 cursos + 1 box menor ao lado */
.treino-grid { display: grid; grid-template-columns: repeat(3, 1fr) 0.82fr; gap: var(--space-6); align-items: stretch; }
@media (max-width: 1000px){ .treino-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .treino-grid { grid-template-columns: 1fr; } }
.box-mini { background: var(--surface-sunken); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; }
.box-mini .ic { width: 38px; height: 38px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--surface-teal-soft); color: var(--teal-600); margin-bottom: var(--space-4); }
.box-mini h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-16); color: var(--text-heading); margin: 0 0 var(--space-2); }
.box-mini p { color: var(--text-muted); font-size: var(--text-13); margin: 0 0 var(--space-4); line-height: var(--leading-normal); }
.box-mini a { margin-top: auto; }

/* Highlight band (laranja suave) — 1 destaque por página */
.hl-band { background: var(--surface-orange-soft); border: var(--border-hairline) solid var(--orange-200); border-radius: var(--radius-2xl); padding: var(--space-10) var(--space-9); }

/* Formulários de captura (herdam .field/.input/.select do app.css) */
.form-card { background: var(--surface-card); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-8); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }