/* =========================================================
   Central de Operações — OLTS Tech
   Design system: Meta (getdesign.md/design-md/meta)
   Estrutura: tokens → base → componentes → estados → responsivo
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Paleta — superfícies */
  --canvas: #ffffff;
  --surface-soft: #f1f4f7;
  --hairline: #ced0d4;
  --hairline-soft: #dee3e9;

  /* Paleta — texto */
  --ink-deep: #0a1317;
  --ink: #1c1e21;
  --charcoal: #444950;
  --slate: #4b4c4f;
  --steel: #5d6c7b;
  --stone: #8595a4;
  --disabled-text: #bcc0c4;

  /* Paleta — marca */
  --primary: #0064e0;
  --primary-deep: #0457cb;
  --primary-soft: #0091ff;
  --primary-tint: rgba(0, 145, 255, 0.15);
  --fb-blue: #1876f2;
  --meta-link: #385898;
  --oculus-purple: #a121ce;
  --ink-button: #000000;
  --on-ink-button: #ffffff;

  /* Paleta — estados semânticos */
  --success: #31a24c;
  --attention: #f2a918;
  --warning: #f7b928;
  --warning-bg: #ffe200;
  --critical: #e41e3f;
  --critical-strong: #f0284a;

  /* Paleta — heliocêntrica da imagem (nav) */
  --nav-ink1: #061429;
  --nav-ink2: #0b2b4a;
  --nav-ink3: #104a7a;

  /* Tipografia */
  --font-display: "Montserrat", "Optimistic VF", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-body: "Montserrat", "Optimistic VF", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --pthero: clamp(2.25rem, 1.6rem + 3.2vw, 3.875rem);
  --pdisplay: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --pheading-lg: clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem);
  --pheading-md: clamp(1.45rem, 1.15rem + 1.4vw, 1.75rem);
  --pheading-sm: 1.5rem;
  --psubtitle-lg: 1.125rem;
  --psubtitle-md: 1.125rem;
  --pbody-md: 1rem;
  --pbody-sm: 0.875rem;
  --pcaption: 0.75rem;
  --ptiny: 0.6875rem;
  --lh-hero: 1.16;
  --lh-headings: 1.28;
  --lh-md: 1.21;
  --lh-sm: 1.25;
  --lh-body: 1.5;
  --lh-smaller: 1.43;
  --lh-caption: 1.33;
  --lh-pill: 1;
  --ls-tight: -0.02em;

  /* Escala de espaçamento (4px base) */
  --sp-xxs: 4px;
  --sp-xs: 8px;
  --sp-sm: 10px;
  --sp-md: 12px;
  --sp-base: 16px;
  --sp-lg: 20px;
  --sp-xl: 24px;
  --sp-xxl: 32px;
  --sp-xxxl: 40px;
  --sp-section-sm: 48px;
  --sp-section: 64px;
  --sp-section-lg: 80px;

  /* Raio */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 16px;
  --r-xxl: 24px;
  --r-xxxl: 32px;
  --r-feature: 40px;
  --r-chip: 100px;

  /* Transições */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med: 200ms;
  --t-slow: 300ms;
  --t-ease: cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Sombra */
  --shadow-flat: none;
  --shadow-sticky: rgba(20, 22, 26, 0.3) 0px 1px 4px 0px;
  --shadow-indicator: rgba(0, 0, 0, 0.2) 1px 1px 0px 0px;

  /* Densidade da grid */
  --bd-card: 24px;
  --grid-max: 1280px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* display explícito de display:grid/flex não pode vencer o hidden */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--pbody-md);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--canvas);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
::selection { background: var(--primary-soft); color: var(--canvas); }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
a { color: var(--meta-link); text-decoration: none; transition: color var(--t-fast); }
a:hover { text-decoration: underline; }
a:focus, button:focus, input:focus { outline: none; }
:focus-visible { outline: 4px solid var(--fb-blue); outline-offset: 2px; }

.visually-hidden {
  position: absolute; clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; white-space: nowrap;
}

/* ---------- 3. Componentes ---------- */

/* Marca */
.brand-lockup { display: inline-flex; align-items: center; gap: var(--sp-md); }
.brand-mark { width: 2rem; height: 2rem; font-size: 1.8rem; line-height: 1; color: var(--charcoal); }
.brand-name { font-family: var(--font-body); font-size: var(--pheading-sm); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }

/* Botões — estilo Meta, sem hover customizado (exceção documentada) */
.button-primary, .button-buy-cta, .button-secondary, .button-ghost, .button-pill {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-xs); cursor: pointer; user-select: none;
  border: none; -webkit-appearance: none; appearance: none;
  font-family: var(--font-body); font-size: var(--pbody-sm); font-weight: 700;
  letter-spacing: -0.14px; text-align: center; text-decoration: none;
  border-radius: var(--r-chip); transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.button-primary { background: var(--ink-button); color: var(--on-ink-button); padding: var(--sp-base) 30px; min-height: 48px; }
.button-primary:active { background: var(--charcoal); }
.button-buy-cta { background: var(--primary); color: var(--on-primary); padding: var(--sp-base) 30px; min-height: 48px; }
.button-buy-cta:active { background: var(--primary-deep); }
.button-secondary { background: transparent; color: var(--ink-deep); padding: calc(var(--sp-base) - 2px) 28px; border: 2px solid var(--ink-deep); min-height: 48px; }
.button-ghost { background: transparent; color: var(--ink-deep); padding: var(--sp-sm) 22px; border: 2px solid rgba(10, 19, 23, 0.12); }
.button-ghost:active { background: rgba(10, 19, 23, 0.06); }
.button-pill { background: var(--canvas); color: var(--ink); padding: 8px 16px; border: 1px solid var(--hairline); min-height: 40px; }
.button-pill:active { background: var(--surface-soft); }

/* Inputs estilo Meta */
.field-group { margin-bottom: var(--sp-lg); }
.field-label { display: block; margin-bottom: var(--sp-xs); font-family: var(--font-body); font-size: var(--pbody-sm); font-weight: 700; color: var(--ink-deep); }
.text-input {
  display: block; width: 100%; height: 48px; padding: var(--sp-md);
  font-family: var(--font-body); font-size: var(--pbody-md); line-height: var(--lh-md);
  color: var(--ink); background: var(--canvas);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.text-input::placeholder { color: var(--steel); }
.text-input:focus { border-color: var(--fb-blue); box-shadow: 0 0 0 2px rgba(24, 118, 242, 0.15); outline: none; }
.text-input.is-invalid { border-color: var(--critical-strong); }
.text-input.is-invalid:focus { box-shadow: 0 0 0 2px rgba(240, 40, 74, 0.15); }

/* ---------- 4. Login ---------- */
.login-wrap {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: var(--sp-xl); background: var(--surface-soft);
}
.login-panel {
  display: flex; flex-direction: column; justify-content: center;
  width: min(460px, 100%); padding: var(--sp-xxxl) var(--sp-section-sm);
  background: var(--canvas); border-radius: var(--r-feature);
  box-shadow: 0 1px 2px rgba(10, 19, 23, 0.05);
}
.login-headline { font-family: var(--font-display); font-size: var(--pdisplay); font-weight: 700; letter-spacing: var(--ls-tight); line-height: var(--lh-hero); color: var(--ink-deep); margin: var(--sp-lg) 0 var(--sp-sm) 0; }
.login-subtitle { font-family: var(--font-body); font-size: var(--psubtitle-md); line-height: var(--lh-body); color: var(--slate); margin-bottom: var(--sp-xl); }
.remember-row { display: flex; align-items: center; gap: var(--sp-sm); margin: 0 0 var(--sp-lg) 0; font-size: var(--pbody-sm); color: var(--charcoal); cursor: pointer; user-select: none; }
.remember-row input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); cursor: pointer; }
.login-error { display: block; margin-top: var(--sp-base); color: var(--critical-strong); font-size: var(--pbody-sm); font-weight: 700; }
.login-footer { margin-top: var(--sp-xxl); color: var(--steel); font-size: var(--ptiny); }
.login-footer .caption { color: inherit; }

.caption { font-size: var(--pcaption); font-weight: 400; line-height: var(--lh-caption); color: var(--steel); }
.caption-strong { font-weight: 700; }

/* ---------- 5. Dashboard ---------- */
.dashboard { max-width: var(--grid-max); margin: 0 auto; padding: 0 var(--sp-section-sm) var(--sp-hero, 96px) var(--sp-section-sm); }
.topbar { position: sticky; top: 0; z-index: 20; background: var(--canvas); border-bottom: 1px solid var(--hairline-soft); }
.topbar-inner { max-width: var(--grid-max); margin: 0 auto; padding: var(--sp-md) var(--sp-section-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg); }
.topbar-right { display: flex; align-items: center; gap: var(--sp-base); }
.pill-runtime {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  padding: 6px var(--sp-base); border-radius: var(--r-chip);
  border: 1px solid var(--hairline); background: var(--surface-soft);
  color: var(--slate); font-size: var(--pbody-sm); font-weight: 700; white-space: nowrap;
}
.pill-runtime::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(49, 162, 76, 0.25); }

/* ---------- 6. Widgets ---------- */
.section { margin: var(--sp-section-sm) 0 0 0; }
.section-copy { font-size: var(--pbody-sm); line-height: var(--lh-body); color: var(--slate); margin-top: var(--sp-xs); max-width: 72ch; }
.dashboard-footer { margin-top: var(--sp-section); padding: var(--sp-lg) 0 var(--sp-xs); border-top: 1px solid var(--hairline-soft); }

/* Hero de boas-vindas — card-promo-strip escuro do design system */
.hero-welcome {
  margin-top: var(--sp-lg);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-base);
  background: var(--ink-deep); color: var(--canvas);
  border-radius: var(--r-xxxl);
  padding: clamp(2rem, 1.2rem + 3vw, 5rem) clamp(1.5rem, 1rem + 2.5vw, 4rem);
}
.hero-welcome .welcome-title {
  font-family: var(--font-display); font-size: var(--pdisplay);
  font-weight: 700; letter-spacing: -0.02em; line-height: var(--lh-hero);
  color: var(--canvas);
}
.hero-welcome .welcome-copy {
  font-size: var(--psubtitle-md); line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.72); max-width: 60ch;
}
.hero-welcome .button-buy-cta { margin-top: var(--sp-sm); }

.section-header { display: flex; align-items: baseline; gap: var(--sp-base); margin-bottom: var(--sp-xl); flex-wrap: wrap; }
.section-title { font-family: var(--font-display); font-size: var(--pheading-lg); font-weight: 700; letter-spacing: -0.01em; line-height: var(--lh-headings); color: var(--ink-deep); }
.section-sub { font-size: var(--pbody-sm); color: var(--slate); }
.section-anchor { scroll-margin-top: 88px; }

/* Métricas */
.metrics-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-xl); margin-top: var(--sp-xl); }
.metric-card { display: flex; flex-direction: column; gap: var(--sp-xxs); padding: var(--sp-xl); background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: var(--r-xl); transition: box-shadow var(--t-fast), transform var(--t-fast); }
.metric-card:hover { box-shadow: var(--shadow-sticky); transform: translateY(-2px); }
.metric-label { font-size: var(--pbody); color: var(--charcoal); }
.metric-value { display: flex; align-items: baseline; gap: var(--sp-xxs); font-size: var(--pheading-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--ink-deep); }
.metric-unit { font-weight: 400; font-size: var(--pbody-sm); color: var(--steel); }
.metric-hint { font-size: var(--pbody-sm); color: var(--slate); }

/* Módulos */
.modules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-xl); }
.module-grid { gap: var(--sp-xl); }
.module-card { display: flex; flex-direction: column; gap: var(--sp-xxs); padding: var(--sp-xl); background: var(--canvas); border: 1px solid var(--hairline-soft); border-radius: var(--r-xl); transition: box-shadow var(--t-fast), transform var(--t-fast); }
.module-card:hover { box-shadow: var(--shadow-sticky); transform: translateY(-2px); }
.badge-status { display: inline-flex; align-items: center; gap: var(--sp-xs); padding: var(--sp-xxs) var(--sp-sm); border-radius: var(--r-chip); font-size: var(--ptiny); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.badge-status.ativo { color: var(--success); background: rgba(49, 162, 76, 0.12); }
.badge-status.manutencao, .badge-status.degraded { color: var(--attention); background: rgba(242, 169, 24, 0.16); }
.badge-status.off { color: var(--critical); background: rgba(228, 30, 63, 0.12); }
.badge-status.azul { color: var(--primary-soft); background: var(--primary-tint); }
.badge-status.violeta { color: var(--oculus-purple); background: rgba(161, 33, 206, 0.10); }
.badge-status.neutro { color: var(--charcoal); background: var(--surface-soft); }
.badge-status.verde { color: #2e7d32; background: #e8f5e9; }
.badge-status.cinza { color: var(--slate); background: var(--surface-soft); }
.module-name { font-family: var(--font-display); font-size: var(--pheading-md); font-weight: 700; letter-spacing: -0.01em; color: var(--ink-deep); }
.module-desc { font-size: var(--pbody-sm); line-height: var(--lh-body); color: var(--charcoal); }

/* Rotinas */
.routines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-lg); }
.routine-card { display: flex; align-items: flex-start; gap: var(--sp-base); padding: var(--sp-xl); background: var(--surface-soft); border-radius: var(--r-xxl); transition: background var(--t-fast); }
.routine-card:hover { background: #e9eef2; }
.routine-icon {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-circle, 50%);
  background: var(--canvas); border: 1px solid var(--hairline); color: var(--primary); font-size: 1.15rem;
}
.routine-title { font-family: var(--font-body); font-size: var(--psubtitle-lg); font-weight: 700; color: var(--ink-deep); margin: 0 0 var(--sp-xs) 0; }
.routine-desc { font-size: var(--pbody-sm); color: var(--slate); }

/* ---------- 7. Header / topo do dashboard ---------- */
.topbar-hero { display: flex; align-items: center; gap: var(--sp-lg); margin-bottom: var(--sp-xl); }
.dashboard-title { font-family: var(--font-display); font-size: var(--pthero); font-weight: 700; letter-spacing: -0.03em; line-height: var(--lh-hero); color: var(--ink-deep); }
.dashboard-slogan { margin-top: var(--sp-xs); font-size: var(--psubtitle-md); color: var(--slate); max-width: 56ch; }

/* ---------- 8. Estado vazio (página boas-vindas) ---------- */
.empty-state {
  display: grid; place-items: center; padding: var(--sp-section) var(--sp-lg);
  text-align: center; background: var(--canvas); border: 1px dashed var(--hairline); border-radius: var(--r-xxxl);
  gap: var(--sp-sm);
}
.empty-state .empty-title { font-family: var(--font-display); font-size: var(--pheading-lg); font-weight: 700; color: var(--ink-deep); }
.empty-state .empty-copy { font-size: var(--pbody-md); color: var(--slate); max-width: 48ch; margin: 0 auto; }

/* ---------- 9. Utilidades ---------- */
.wrap-pad { padding-inline: var(--sp-section-sm); }
.text-align-center { text-align: center; }
.stack-xs > * + * { margin-top: var(--sp-xs); }
.stack-sm > * + * { margin-top: var(--sp-sm); }
.stack-md > * + * { margin-top: var(--sp-md); }
.stack-lg > * + * { margin-top: var(--sp-lg); }

/* ---------- 10. Responsividade ---------- */
@media (max-width: 1200px) {
  .metrics-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-lg); }
}
@media (max-width: 768px) {
  html { font-size: 15px; }
  .login-wrap { padding: var(--sp-lg) var(--sp-base); }
  .login-panel { padding: var(--sp-xl) var(--sp-lg); border-radius: var(--r-xxl); }
  .login-headline { font-size: var(--pheading-lg); }
  .login-subtitle { font-size: var(--pbody-md); }
  .section-header { flex-direction: column; gap: var(--sp-xxs); }
  .section-header-right { width: 100%; }
  .section-header-right .button-ghost { width: 100%; justify-content: center; }
  .metrics-row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-base); }
  .metric-card { padding: var(--sp-lg); }
  .modules-grid, .module-grid, .routines-grid { grid-template-columns: 1fr; }
  .routine-card { flex-direction: column; gap: var(--sp-sm); }
  .dashboard-title { font-size: var(--pheading-lg); }
  .dashboard-slogan { font-size: var(--pbody-md); }
  .hero-welcome { border-radius: var(--r-xxl); }
  .topbar-inner { padding: var(--sp-md) var(--sp-lg); }
}
@media (max-width: 480px) {
  html { font-size: 14.5px; }
  .metrics-row { grid-template-columns: 1fr; }
  .login-panel { padding: var(--sp-lg) var(--sp-base); border-radius: var(--r-xl); }
  .login-headline { font-size: var(--pheading-md); }
  .login-subtitle { font-size: var(--pbody-sm); }
  .welcome-copy { font-size: var(--pbody-sm); }
  .empty-state { padding: var(--sp-xl) var(--sp-base); }
  .empty-state .empty-title { font-size: var(--pheading-md); }
  .section-title { font-size: var(--pheading-md); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- 11. Scrollbar e ajustes finos ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-soft); }
::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: var(--r-chip); border: 2px solid var(--surface-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--stone); }

/* ---------- 13. Feed de publicações ---------- */
.feed-controls {
  display: flex; gap: var(--sp-base); align-items: center;
  margin-top: var(--sp-lg); flex-wrap: wrap;
}
.search-pill-input {
  flex: 1 1 260px; min-width: 200px; max-width: 480px;
  height: 40px; padding: 0 var(--sp-lg);
  font-family: var(--font-body); font-size: var(--pbody-sm);
  color: var(--ink); background: var(--surface-soft);
  border: 1px solid transparent; border-radius: var(--r-chip);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.search-pill-input::placeholder { color: var(--steel); }
.search-pill-input:focus { outline: none; border-color: var(--fb-blue); background: var(--canvas); }
.sort-select {
  height: 40px; padding: 0 var(--sp-base);
  font-family: var(--font-body); font-size: var(--pbody-sm); font-weight: 700;
  color: var(--ink); background: var(--canvas);
  border: 1px solid var(--hairline); border-radius: var(--r-chip);
  cursor: pointer;
}
.feed-chips { display: flex; gap: var(--sp-sm); flex-wrap: wrap; margin-top: var(--sp-base); }
.button-pill.is-active { background: var(--ink-deep); color: var(--canvas); border-color: var(--ink-deep); }

.feed-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-xl); margin-top: var(--sp-xl);
}
.post-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--canvas); border: 1px solid var(--hairline-soft);
  border-radius: var(--r-xxl); cursor: pointer;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.post-card:hover { box-shadow: var(--shadow-sticky); transform: translateY(-2px); }
.post-card:focus-visible { outline: 4px solid var(--fb-blue); outline-offset: 2px; }
.post-thumb { aspect-ratio: 16 / 9; background: var(--surface-soft); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-body { display: flex; flex-direction: column; gap: var(--sp-sm); padding: var(--sp-lg); }
.post-meta-top { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }
.post-title { font-family: var(--font-display); font-size: var(--psubtitle-lg); font-weight: 700; line-height: var(--lh-sm); color: var(--ink-deep); }
.post-summary { font-size: var(--pbody-sm); line-height: var(--lh-body); color: var(--charcoal); }
.post-meta { display: flex; gap: var(--sp-base); flex-wrap: wrap; font-size: var(--pcaption); color: var(--slate); }
.meta-item { display: inline-flex; align-items: center; gap: var(--sp-xxs); white-space: nowrap; }
.post-footer { display: flex; gap: var(--sp-base); align-items: center; justify-content: space-between; margin-top: auto; flex-wrap: wrap; }
.post-link { font-size: var(--pbody-sm); font-weight: 700; color: var(--primary); }
.post-link::after { content: " →"; }

/* ---------- 14. Jobs (cron) ---------- */
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-lg); }
.job-card {
  display: flex; flex-direction: column; gap: var(--sp-xs);
  padding: var(--sp-lg); background: var(--canvas);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-xl);
}
.job-card.status-ok { border-left: 4px solid var(--success); }
.job-card.status-falhou { border-left: 4px solid var(--critical); }
.job-card.status-pendente { border-left: 4px solid var(--attention); }
.job-title { font-family: var(--font-body); font-size: var(--pbody-sm); font-weight: 700; color: var(--ink-deep); }
.job-detail { font-size: var(--pcaption); line-height: var(--lh-caption); color: var(--slate); }
.job-times { display: flex; gap: var(--sp-base); flex-wrap: wrap; font-size: var(--ptiny); color: var(--steel); }

/* ---------- 15. Página dedicada de post ---------- */
.post-title-page {
  font-family: var(--font-display); font-size: var(--pdisplay);
  font-weight: 700; letter-spacing: -0.02em; line-height: var(--lh-hero);
  color: var(--ink-deep); margin-top: var(--sp-base);
}
.post-article { max-width: 68ch; margin-top: var(--sp-xl); font-size: var(--pbody-md); line-height: var(--lh-body); color: var(--ink); }
.post-article p + p { margin-top: var(--sp-base); }
.post-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-lg); }
.gallery-item { margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--surface-soft); cursor: zoom-in; }
.gallery-item img, .gallery-item video { display: block; width: 100%; height: auto; }

/* ---------- 16. Viewer de mídia ---------- */
.viewer-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 19, 23, 0.92);
  display: flex; flex-direction: column;
}
.viewer-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-base) var(--sp-xl); color: var(--canvas);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.viewer-topbar-right { display: flex; align-items: center; gap: var(--sp-base); }
.viewer-topbar .caption { color: rgba(255, 255, 255, 0.72); }
.viewer-topbar .button-ghost { color: var(--canvas); border-color: rgba(255, 255, 255, 0.28); }
.viewer-stage { flex: 1; display: grid; place-items: center; padding: var(--sp-xl); min-height: 0; }
.viewer-stage img, .viewer-stage video { max-width: 100%; max-height: 100%; border-radius: var(--r-lg); box-shadow: 0 8px 40px rgba(0,0,0,0.4); }
.viewer-nav { display: flex; justify-content: center; gap: var(--sp-base); padding: var(--sp-base); }
.viewer-nav .button-ghost { color: var(--canvas); border-color: rgba(255, 255, 255, 0.28); }

/* ---------- 12. Animações de entrada ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.metric-card, .module-card, .routine-card { animation: fadeUp var(--t-slow) ease-out both; }