/*
 * datahub.css — estilos dedicados para a secao DataHub
 * dinheirodaminhaempresa.com — Stone Brand 2026
 *
 * Depende dos tokens do styles.css (:root).
 * Componentes cobertos:
 *   - Hero DataHub (.datahub-hero)
 *   - Cards de pilar (.datahub-pillar-card)
 *   - Callouts semanticos (.dh-callout)
 *   - Badges de pilar (.dh-badge)
 *   - Artigos relacionados (.dh-related)
 *   - Contador animado (.dh-count)
 *   - Barra de leitura (#reading-progress)
 *   - Dark mode overrides ([data-theme="dark"])
 *
 * Responsivo: mobile-first.
 * prefers-reduced-motion: sem animacoes de transform.
 * Contraste de texto >= 4.5:1 em todos os elementos visiveis.
 */

/* -----------------------------------------------------------------------
 * Tokens exclusivos do DataHub (complementam o :root do styles.css)
 * ---------------------------------------------------------------------- */
:root {
  /* Pilares — cores de acento semantico */
  --dh-compliance:  #2563EB; /* azul — Risco & Compliance */
  --dh-ia:          #7C3AED; /* violeta — DataHub IA */
  --dh-infra:       #0891B2; /* ciano — Infra de Dados */
  --dh-marketing:   #D97706; /* ambar — Marketing & Vendas B2B */
  --dh-bets:        #DC2626; /* vermelho — Integridade em Bets */
  --dh-ai-factory:  #059669; /* esmeralda — AI Factory */
  --dh-agent:       #6D28D9; /* indigo — Agent Factory & B2A */
  --dh-mercado:     #B45309; /* marrom-ouro — Mercado de Dados */

  /* Fundos suavizados (10% opacidade) */
  --dh-compliance-bg:  #EFF6FF;
  --dh-ia-bg:          #F5F3FF;
  --dh-infra-bg:       #ECFEFF;
  --dh-marketing-bg:   #FFFBEB;
  --dh-bets-bg:        #FEF2F2;
  --dh-ai-factory-bg:  #ECFDF5;
  --dh-agent-bg:       #EDE9FE;
  --dh-mercado-bg:     #FEFCE8;

  /* Hero */
  --dh-hero-from: #0F172A;
  --dh-hero-to:   #1E293B;
  --dh-hero-accent: #14B8A6; /* teal sóbrio — identidade DataHub, sem o verde agudo Stone */

  /* Sombra neutra para hover de card */
  --shadow-green-lift: 0 8px 24px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .08);
}


/* -----------------------------------------------------------------------
 * 1. HERO DATAHUB
 * ---------------------------------------------------------------------- */
.datahub-hero {
  background: linear-gradient(160deg, var(--dh-hero-from) 0%, var(--dh-hero-to) 100%);
  border-bottom: 3px solid var(--dh-hero-accent);
  color: #fff;
  padding: 56px 0 48px;
  position: relative;
  overflow: hidden;
}

/* Grade decorativa de pontos no fundo */
.datahub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(148, 163, 184, .12) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.datahub-hero .container {
  position: relative;
  z-index: 1;
}

/* Rotulo acima do titulo */
.datahub-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5EEAD4;
  margin-bottom: 16px;
}

.datahub-hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #14B8A6;
  flex-shrink: 0;
}

/* Titulo principal */
.datahub-hero__title {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  color: #fff;
}

.datahub-hero__title span {
  color: var(--stone-mint);
}

/* Subtitulo / lede */
.datahub-hero__lede {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 400;
  color: rgba(255, 255, 255, .78);
  max-width: 620px;
  line-height: 1.6;
  margin: 0 0 40px;
}

/* Linha de KPIs */
.datahub-hero__kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .datahub-hero__kpis {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 32px;
  }
}

.datahub-hero__kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.datahub-hero__kpi-value {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--stone-mint);
  line-height: 1;
}

.datahub-hero__kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .60);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Separador entre KPIs (desktop) */
@media (min-width: 640px) {
  .datahub-hero__kpi + .datahub-hero__kpi {
    padding-left: 32px;
    border-left: 1px solid rgba(255, 255, 255, .12);
  }
}


/* -----------------------------------------------------------------------
 * 2. CARDS DE PILAR
 * ---------------------------------------------------------------------- */
.datahub-pillars {
  padding: 56px 0;
}

.datahub-pillars__title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 8px;
}

.datahub-pillars__subtitle {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 36px;
}

/* Grade responsiva */
.datahub-pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .datahub-pillar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .datahub-pillar-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card base */
.datahub-pillar-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  transition:
    transform var(--t-fast),
    box-shadow var(--t),
    border-color var(--t-fast);
  position: relative;
  overflow: hidden;
}

/* Faixa colorida no topo do card */
.datahub-pillar-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--_pillar-color, var(--green));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* Hover: elevacao suave */
@media (hover: hover) {
  .datahub-pillar-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-green-lift);
    border-color: var(--_pillar-color, var(--green));
    text-decoration: none;
  }
}

/* Icone do pilar */
.datahub-pillar-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--_pillar-bg, var(--green-soft));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.datahub-pillar-card__icon svg {
  width: 22px;
  height: 22px;
  color: var(--_pillar-color, var(--green));
}

/* Titulo do pilar */
.datahub-pillar-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}

/* Descricao curta */
.datahub-pillar-card__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

/* Rodape com contagem e link */
.datahub-pillar-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.datahub-pillar-card__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--_pillar-color, var(--green));
  background: var(--_pillar-bg, var(--green-soft));
  padding: 3px 10px;
  border-radius: var(--r-pill);
}

.datahub-pillar-card__arrow {
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: color var(--t-fast), transform var(--t-fast);
}

@media (hover: hover) {
  .datahub-pillar-card:hover .datahub-pillar-card__arrow {
    color: var(--_pillar-color, var(--green));
    transform: translateX(3px);
  }
}

/* --- Variantes de cor por pilar via data-pillar --- */

.datahub-pillar-card[data-pillar="compliance"] {
  --_pillar-color: var(--dh-compliance);
  --_pillar-bg:    var(--dh-compliance-bg);
}

.datahub-pillar-card[data-pillar="ia"] {
  --_pillar-color: var(--dh-ia);
  --_pillar-bg:    var(--dh-ia-bg);
}

.datahub-pillar-card[data-pillar="infra"] {
  --_pillar-color: var(--dh-infra);
  --_pillar-bg:    var(--dh-infra-bg);
}

.datahub-pillar-card[data-pillar="marketing"] {
  --_pillar-color: var(--dh-marketing);
  --_pillar-bg:    var(--dh-marketing-bg);
}

.datahub-pillar-card[data-pillar="bets"] {
  --_pillar-color: var(--dh-bets);
  --_pillar-bg:    var(--dh-bets-bg);
}

.datahub-pillar-card[data-pillar="ai-factory"] {
  --_pillar-color: var(--dh-ai-factory);
  --_pillar-bg:    var(--dh-ai-factory-bg);
}

.datahub-pillar-card[data-pillar="agent-factory"] {
  --_pillar-color: var(--dh-agent);
  --_pillar-bg:    var(--dh-agent-bg);
}

.datahub-pillar-card[data-pillar="mercado"] {
  --_pillar-color: var(--dh-mercado);
  --_pillar-bg:    var(--dh-mercado-bg);
}


/* -----------------------------------------------------------------------
 * 3. CALLOUTS SEMANTICOS
 * ---------------------------------------------------------------------- */
.dh-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  border-left: 4px solid transparent;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 16px 20px;
  margin: 28px 0;
  position: relative;
}

/* Icone */
.dh-callout__icon {
  grid-row: 1 / 3;
  align-self: start;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Titulo */
.dh-callout__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

/* Corpo */
.dh-callout__body {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Variante info (azul) */
.dh-callout--info {
  background: #EFF6FF;
  border-left-color: var(--dh-compliance);
}

.dh-callout--info .dh-callout__icon {
  color: var(--dh-compliance);
}

.dh-callout--info .dh-callout__title {
  color: #1E40AF;
}

.dh-callout--info .dh-callout__body {
  color: #1E3A5F;
}

/* Variante data (verde Stone) */
.dh-callout--data {
  background: var(--green-soft);
  border-left-color: var(--green);
}

.dh-callout--data .dh-callout__icon {
  color: var(--green-dark);
}

.dh-callout--data .dh-callout__title {
  color: var(--green-ink);
}

.dh-callout--data .dh-callout__body {
  color: var(--green-ink);
}

/* Variante warning (ambar) */
.dh-callout--warning {
  background: #FFFBEB;
  border-left-color: #D97706;
}

.dh-callout--warning .dh-callout__icon {
  color: #B45309;
}

.dh-callout--warning .dh-callout__title {
  color: #92400E;
}

.dh-callout--warning .dh-callout__body {
  color: #78350F;
}

/* Variante regulation (roxo) */
.dh-callout--regulation {
  background: #F5F3FF;
  border-left-color: #7C3AED;
}

.dh-callout--regulation .dh-callout__icon {
  color: #6D28D9;
}

.dh-callout--regulation .dh-callout__title {
  color: #4C1D95;
}

.dh-callout--regulation .dh-callout__body {
  color: #3B0764;
}


/* -----------------------------------------------------------------------
 * 4. BADGE DE PILAR
 * ---------------------------------------------------------------------- */
.dh-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  /* Cor padrao; sobrescrita por variante */
  background: var(--green-soft);
  color: var(--green-dark);
  border-color: rgba(0, 133, 80, .25);
}

.dh-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* --- Variantes de badge por pilar --- */

.dh-badge[data-pillar="compliance"] {
  background: var(--dh-compliance-bg);
  color: #1E40AF;
  border-color: rgba(37, 99, 235, .25);
}

.dh-badge[data-pillar="ia"] {
  background: var(--dh-ia-bg);
  color: #5B21B6;
  border-color: rgba(124, 58, 237, .25);
}

.dh-badge[data-pillar="infra"] {
  background: var(--dh-infra-bg);
  color: #155E75;
  border-color: rgba(8, 145, 178, .25);
}

.dh-badge[data-pillar="marketing"] {
  background: var(--dh-marketing-bg);
  color: #92400E;
  border-color: rgba(217, 119, 6, .25);
}

.dh-badge[data-pillar="bets"] {
  background: var(--dh-bets-bg);
  color: #991B1B;
  border-color: rgba(220, 38, 38, .25);
}

.dh-badge[data-pillar="ai-factory"] {
  background: var(--dh-ai-factory-bg);
  color: #065F46;
  border-color: rgba(5, 150, 105, .25);
}

.dh-badge[data-pillar="agent-factory"] {
  background: var(--dh-agent-bg);
  color: #4C1D95;
  border-color: rgba(109, 40, 217, .25);
}

.dh-badge[data-pillar="mercado"] {
  background: var(--dh-mercado-bg);
  color: #78350F;
  border-color: rgba(180, 83, 9, .25);
}


/* -----------------------------------------------------------------------
 * 5. ARTIGOS RELACIONADOS
 * ---------------------------------------------------------------------- */
.dh-related {
  padding: 48px 0;
  border-top: 1px solid var(--line);
}

.dh-related__title {
  font-size: clamp(17px, 2.5vw, 22px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 24px;
}

/* Grade responsiva */
.dh-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .dh-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dh-related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card de artigo relacionado */
.dh-related-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--t),
    border-color var(--t-fast);
}

@media (hover: hover) {
  .dh-related-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--line-2);
    text-decoration: none;
  }
}

.dh-related-card__badge-row {
  display: flex;
  align-items: center;
}

.dh-related-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin: 0;
}

.dh-related-card__summary {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  flex: 1;

  /* Limitar a 3 linhas */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dh-related-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-dark);
  margin-top: auto;
}

.dh-related-card__link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--t-fast);
}

@media (hover: hover) {
  .dh-related-card:hover .dh-related-card__link svg {
    transform: translateX(3px);
  }
}


/* -----------------------------------------------------------------------
 * 6. CONTADOR ANIMADO
 * ---------------------------------------------------------------------- */
.dh-count {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.dh-count__value {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--green);
  line-height: 1;
  /* Evitar pulo de layout durante o count-up */
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
}

.dh-count__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Estado inicial: opacidade zero antes da animacao disparar */
.dh-count:not(.dh-count--animated) .dh-count__value {
  opacity: 0;
}

/* Animacao de entrada quando IntersectionObserver disparar */
@keyframes dh-count-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dh-count--animated .dh-count__value {
  opacity: 1;
  animation: dh-count-fade-in .4s cubic-bezier(.2, .7, .3, 1) both;
}

/* Sem animacoes para usuarios que preferem movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .dh-count:not(.dh-count--animated) .dh-count__value {
    opacity: 1;
  }

  .dh-count--animated .dh-count__value {
    animation: none;
  }
}


/* -----------------------------------------------------------------------
 * 7. BARRA DE LEITURA
 * ---------------------------------------------------------------------- */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--green);
  z-index: 9999;
  border-radius: 0 2px 2px 0;
  /* Transicao suave conforme o scroll */
  transition: width .1s linear;
  /* Pointer events desativados para nao interceptar cliques */
  pointer-events: none;
}

/* Sem transicao para usuarios que preferem movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  #reading-progress {
    transition: none;
  }
}


/* -----------------------------------------------------------------------
 * Supressao global de transform para prefers-reduced-motion
 * Garante que TODOS os elementos DataHub respeitem a preferencia
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .datahub-pillar-card:hover,
  .dh-related-card:hover,
  .dh-related-card:hover .dh-related-card__link svg,
  .datahub-pillar-card:hover .datahub-pillar-card__arrow {
    transform: none;
  }

  .datahub-pillar-card,
  .dh-related-card {
    transition: box-shadow var(--t), border-color var(--t-fast);
  }
}


/* -----------------------------------------------------------------------
 * 8. DARK MODE OVERRIDES
 * ---------------------------------------------------------------------- */
[data-theme="dark"] {
  /* Tokens de pilar — mantidos vivos, mas com fundo escuro */
  --dh-compliance-bg:  rgba(37,  99,  235, .12);
  --dh-ia-bg:          rgba(124, 58,  237, .12);
  --dh-infra-bg:       rgba(8,   145, 178, .12);
  --dh-marketing-bg:   rgba(217, 119, 6,   .12);
  --dh-bets-bg:        rgba(220, 38,  38,  .12);
  --dh-ai-factory-bg:  rgba(5,   150, 105, .12);
  --dh-agent-bg:       rgba(109, 40,  217, .12);
  --dh-mercado-bg:     rgba(180, 83,  9,   .12);
}

/* Hero */
[data-theme="dark"] .datahub-hero {
  background: linear-gradient(160deg, #020617 0%, var(--dh-hero-from) 100%);
}

[data-theme="dark"] .datahub-hero::before {
  background-image:
    radial-gradient(circle, rgba(148, 163, 184, .10) 1px, transparent 1px);
}

/* Cards de pilar */
[data-theme="dark"] .datahub-pillar-card {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .datahub-pillar-card__title {
  color: var(--ink);
}

[data-theme="dark"] .datahub-pillar-card__desc {
  color: var(--muted);
}

/* Badges */
[data-theme="dark"] .dh-badge[data-pillar="compliance"] {
  background: var(--dh-compliance-bg);
  color: #93C5FD;
  border-color: rgba(37, 99, 235, .30);
}

[data-theme="dark"] .dh-badge[data-pillar="ia"] {
  background: var(--dh-ia-bg);
  color: #C4B5FD;
  border-color: rgba(124, 58, 237, .30);
}

[data-theme="dark"] .dh-badge[data-pillar="infra"] {
  background: var(--dh-infra-bg);
  color: #67E8F9;
  border-color: rgba(8, 145, 178, .30);
}

[data-theme="dark"] .dh-badge[data-pillar="marketing"] {
  background: var(--dh-marketing-bg);
  color: #FCD34D;
  border-color: rgba(217, 119, 6, .30);
}

[data-theme="dark"] .dh-badge[data-pillar="bets"] {
  background: var(--dh-bets-bg);
  color: #FCA5A5;
  border-color: rgba(220, 38, 38, .30);
}

[data-theme="dark"] .dh-badge[data-pillar="ai-factory"] {
  background: var(--dh-ai-factory-bg);
  color: #6EE7B7;
  border-color: rgba(5, 150, 105, .30);
}

[data-theme="dark"] .dh-badge[data-pillar="agent-factory"] {
  background: var(--dh-agent-bg);
  color: #DDD6FE;
  border-color: rgba(109, 40, 217, .30);
}

[data-theme="dark"] .dh-badge[data-pillar="mercado"] {
  background: var(--dh-mercado-bg);
  color: #FDE68A;
  border-color: rgba(180, 83, 9, .30);
}

/* Callouts em dark */
[data-theme="dark"] .dh-callout--info {
  background: rgba(37, 99, 235, .10);
}

[data-theme="dark"] .dh-callout--info .dh-callout__title {
  color: #93C5FD;
}

[data-theme="dark"] .dh-callout--info .dh-callout__body {
  color: #BFDBFE;
}

[data-theme="dark"] .dh-callout--data {
  background: rgba(15, 23, 42, .10);
}

[data-theme="dark"] .dh-callout--data .dh-callout__title {
  color: var(--stone-mint);
}

[data-theme="dark"] .dh-callout--data .dh-callout__body {
  color: rgba(210, 255, 125, .80);
}

[data-theme="dark"] .dh-callout--warning {
  background: rgba(217, 119, 6, .10);
}

[data-theme="dark"] .dh-callout--warning .dh-callout__title {
  color: #FCD34D;
}

[data-theme="dark"] .dh-callout--warning .dh-callout__body {
  color: #FDE68A;
}

[data-theme="dark"] .dh-callout--regulation {
  background: rgba(124, 58, 237, .10);
}

[data-theme="dark"] .dh-callout--regulation .dh-callout__title {
  color: #C4B5FD;
}

[data-theme="dark"] .dh-callout--regulation .dh-callout__body {
  color: #DDD6FE;
}

/* Artigos relacionados */
[data-theme="dark"] .dh-related {
  border-top-color: var(--line);
}

[data-theme="dark"] .dh-related-card {
  background: var(--card);
  border-color: var(--line);
}

[data-theme="dark"] .dh-related-card__title {
  color: var(--ink);
}

[data-theme="dark"] .dh-related-card__summary {
  color: var(--muted);
}

/* Contador */
[data-theme="dark"] .dh-count__value {
  color: var(--stone-mint);
}

/* Barra de leitura */
[data-theme="dark"] #reading-progress {
  background: var(--stone-mint);
}


/* ── Polimento mobile DataHub ── */
@media(max-width:640px){
  .datahub-hero h1{font-size:clamp(26px,7vw,36px)}
  .dh-kpi-row{grid-template-columns:repeat(2,1fr);gap:12px}
  .dh-count__num{font-size:clamp(28px,8vw,40px)}
  .datahub-pillars-grid{grid-template-columns:1fr}
  .dh-products-grid{grid-template-columns:1fr}
  .dh-related__grid{grid-template-columns:1fr}
  .dh-alpha-nav a{width:30px;height:30px;font-size:12px}
  .mermaid{overflow-x:auto;max-width:100%}
  canvas{max-width:100%!important;height:auto!important}
}

/* ── Proteção contra overflow horizontal: nenhuma página rola lateralmente ── */
html,body{overflow-x:hidden}
.article-body table{display:block;overflow-x:auto}
.article-body img{max-width:100%;height:auto}

/* ── Impressao: oculta elementos de navegacao e sidebar ── */
@media print{
  .hdr,.toc,.next-steps,footer,.botnav,.drawer,#reading-progress,
  #theme-toggle,.dh-related{display:none!important}
  .article-wrap{grid-template-columns:1fr!important}
}


/* -----------------------------------------------------------------------
 * 9. REVEAL ON SCROLL
 * Aplicar .dh-reveal nos elementos; o JS adiciona .dh-reveal--visible
 * via IntersectionObserver quando o elemento entra na viewport.
 * ---------------------------------------------------------------------- */
/* Progressive enhancement: o conteúdo NUNCA depende de JS para aparecer.
   Animação de entrada em CSS puro com animation-fill-mode:both → o estado
   final é sempre visível, mesmo se datahub.js não carregar (regra do curso:
   "estado base sempre visível"). Onde houver suporte a scroll-driven CSS
   (animation-timeline), a entrada é disparada pela rolagem; senão, toca uma
   vez no load. O JS (initReveal) ainda adiciona .dh-reveal--visible, mas é
   apenas redundância — a visibilidade não depende mais dele. */
@keyframes dhRevealIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.dh-reveal{animation:dhRevealIn .6s ease both}
.dh-reveal--visible{opacity:1;transform:none}
@supports (animation-timeline:view()){
  .dh-reveal{animation:dhRevealIn linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
}
@media(prefers-reduced-motion:reduce){
  .dh-reveal{animation:none;opacity:1;transform:none}
  .dh-reveal--visible{opacity:1;transform:none}
}


/* -----------------------------------------------------------------------
 * 10. HOVER LIFT — CARDS DE PILAR
 * ---------------------------------------------------------------------- */
.datahub-pillar-card{transition:transform 0.18s var(--t,ease),box-shadow 0.18s var(--t,ease)}
.datahub-pillar-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(15,23,42,.18)}
@media(prefers-reduced-motion:reduce){.datahub-pillar-card{transition:none}}
@media(prefers-reduced-motion:reduce){.datahub-pillar-card:hover{transform:none}}


/* -----------------------------------------------------------------------
 * 11. HOVER — CARDS DE ARTIGOS RELACIONADOS
 * ---------------------------------------------------------------------- */
.dh-related__card{transition:border-color 0.15s ease,box-shadow 0.15s ease}
.dh-related__card:hover{border-color:var(--green,#00A868);box-shadow:0 4px 12px rgba(15,23,42,.12);text-decoration:none}


/* -----------------------------------------------------------------------
 * 12. NUMERO DE COUNT-UP
 * ---------------------------------------------------------------------- */
.dh-count__num{display:block;font-size:clamp(36px,5vw,56px);font-weight:800;line-height:1;color:var(--green,#00A868);font-variant-numeric:tabular-nums}
.dh-count__label{display:block;font-size:13px;color:var(--muted,#64748B);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}


/* -----------------------------------------------------------------------
 * 13. BADGES POR PILAR — CORES DISTINTAS (complemento ao bloco 4)
 * ---------------------------------------------------------------------- */
.dh-badge[data-pillar="compliance"]{background:#EEF2FF;color:#3730A3}
.dh-badge[data-pillar="ia"]{background:#F0FDF4;color:#166534}
.dh-badge[data-pillar="infra"]{background:#F0F9FF;color:#075985}
.dh-badge[data-pillar="marketing"]{background:#FFF7ED;color:#9A3412}
.dh-badge[data-pillar="bets"]{background:#FDF4FF;color:#7E22CE}
.dh-badge[data-pillar="ai-factory"]{background:#FEFCE8;color:#854D0E}
.dh-badge[data-pillar="agent-factory"]{background:#FFF1F2;color:#9F1239}
.dh-badge[data-pillar="mercado"]{background:#F0FDFA;color:#134E4A}
.dh-badge[data-pillar="datahub"]{background:var(--green-soft,#E6F5EE);color:var(--green-dark,#008550)}


/* -----------------------------------------------------------------------
 * 14. DARK MODE — MICRO-INTERACOES E BADGES (complemento ao bloco 8)
 * ---------------------------------------------------------------------- */
[data-theme="dark"] .dh-badge[data-pillar="compliance"]{background:#1E1B4B;color:#A5B4FC}
[data-theme="dark"] .dh-badge[data-pillar="ia"]{background:#052E16;color:#86EFAC}
[data-theme="dark"] .dh-badge[data-pillar="infra"]{background:#0C4A6E;color:#7DD3FC}
[data-theme="dark"] .dh-badge[data-pillar="marketing"]{background:#431407;color:#FDBA74}
[data-theme="dark"] .dh-badge[data-pillar="bets"]{background:#3B0764;color:#D8B4FE}
[data-theme="dark"] .dh-badge[data-pillar="ai-factory"]{background:#422006;color:#FDE68A}
[data-theme="dark"] .dh-badge[data-pillar="agent-factory"]{background:#4C0519;color:#FCA5A5}
[data-theme="dark"] .dh-badge[data-pillar="mercado"]{background:#042F2E;color:#5EEAD4}

/* ── Score Ring SVG (.dh-score-ring) ── */
.dh-score-ring{display:flex;flex-direction:column;align-items:center;gap:8px;width:120px}
.dh-score-ring svg{width:100px;height:100px}
.dh-score-ring__track{fill:none;stroke:var(--line,#E2E8F0);stroke-width:8}
.dh-score-ring__fill{fill:none;stroke:var(--green,#00A868);stroke-width:8;stroke-linecap:round;stroke-dasharray:251.2;stroke-dashoffset:251.2;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1)}
.dh-score-ring__label{font-size:22px;font-weight:800;fill:var(--ink,#0F172A);dominant-baseline:central;text-anchor:middle}
.dh-score-ring__sublabel{font-size:11px;color:var(--muted,#64748B);text-align:center;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.dh-score-ring--warning .dh-score-ring__fill{stroke:var(--gold,#F59E0B)}
.dh-score-ring--danger .dh-score-ring__fill{stroke:#DC2626}
.dh-score-ring-row{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin:32px 0}
[data-theme="dark"] .dh-score-ring__label{fill:var(--ink,#F1F5F9)}

/* ── Timeline vertical (.dh-timeline) ── */
.dh-timeline{position:relative;padding-left:32px;margin:32px 0}
.dh-timeline::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--green,#00A868);opacity:.3}
.dh-timeline__item{position:relative;margin-bottom:28px}
.dh-timeline__item::before{content:"";position:absolute;left:-25px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--green,#00A868);border:2px solid var(--bg-page,#FAFAF7)}
.dh-timeline__item--alert::before{background:#DC2626}
.dh-timeline__date{font-size:11.5px;font-weight:700;color:var(--muted,#64748B);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.dh-timeline__title{font-weight:700;color:var(--ink,#0F172A);margin-bottom:4px;font-size:15px}
.dh-timeline__desc{font-size:14px;color:var(--ink-3,#374151);line-height:1.5}
[data-theme="dark"] .dh-timeline__item::before{border-color:var(--bg,#0F172A)}

/* ── FAQ Accordion (.dh-faq) ── */
.dh-faq{margin:24px 0;border:1px solid var(--line,#E2E8F0);border-radius:var(--r-lg,16px);overflow:hidden}
.dh-faq__item{border-bottom:1px solid var(--line,#E2E8F0)}
.dh-faq__item:last-child{border-bottom:0}
.dh-faq__q{width:100%;text-align:left;padding:16px 20px;font-weight:600;font-size:15px;color:var(--ink,#0F172A);background:var(--card,#fff);display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;border:0;transition:background .15s}
.dh-faq__q:hover{background:var(--green-soft,#E6F5EE)}
.dh-faq__q[aria-expanded="true"]{background:var(--green-soft,#E6F5EE);color:var(--green-dark,#008550)}
.dh-faq__chevron{width:16px;height:16px;flex-shrink:0;transition:transform .2s}
.dh-faq__q[aria-expanded="true"] .dh-faq__chevron{transform:rotate(180deg)}
.dh-faq__a{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;font-size:15px;line-height:1.65;color:var(--ink-2,#1F2937)}
.dh-faq__a.open{padding:16px 20px;max-height:600px}
[data-theme="dark"] .dh-faq__q{background:var(--card,#1E293B);color:var(--ink,#F1F5F9)}
[data-theme="dark"] .dh-faq__q:hover{background:var(--green-soft,rgba(15,23,42,.12))}
@media(prefers-reduced-motion:reduce){.dh-faq__a,.dh-faq__chevron{transition:none}}

/* ─────────────────────────────────────────────────────────────────────
 * IDENTIDADE DATAHUB — acento teal sóbrio no CONTEÚDO (não no header Stone).
 * Redefine os tokens de verde apenas dentro dos contêineres do DataHub.
 * Como este CSS só carrega nas páginas /datahub/, e o header/drawer/footer
 * compartilhados ficam FORA destes seletores, a marca Stone do site é
 * preservada na navegação enquanto o conteúdo ganha identidade própria.
 * ───────────────────────────────────────────────────────────────────── */
.datahub-hero,.article-body,.dh-related,.dh-faq,.dh-timeline,.dh-count,
.datahub-pillar-card,.dh-score-ring,.dh-badge[data-pillar="datahub"]{
  --green:#0F766E;--green-dark:#0F766E;--green-ink:#134E4A;--green-soft:#ECFDF8;
}
[data-theme="dark"] .datahub-hero,[data-theme="dark"] .article-body,
[data-theme="dark"] .dh-related,[data-theme="dark"] .dh-faq,
[data-theme="dark"] .dh-timeline,[data-theme="dark"] .dh-count,
[data-theme="dark"] .datahub-pillar-card,[data-theme="dark"] .dh-score-ring,
[data-theme="dark"] .dh-badge[data-pillar="datahub"]{
  --green:#2DD4BF;--green-dark:#5EEAD4;--green-ink:#99F6E4;--green-soft:rgba(45,212,191,.12);
}


/* =======================================================================
 * ONDAS 15-19 — UX e navegabilidade (aprimoramento progressivo)
 * Tudo abaixo so estiliza elementos NOVOS (prefixo dh-, classes proprias).
 * Cores via tokens que ADAPTAM ao tema; contraste WCAG AA garantido.
 * Foco visivel, navegacao por teclado e prefers-reduced-motion cobertos.
 * Nada esconde conteudo: count-up anima so o numero (ja visivel).
 * ===================================================================== */

/* Acento DataHub reaproveitado nos novos componentes (light + dark) */
.dh-progress,.dh-to-top,.dh-toc,.dh-toc-mobile,.dh-pillar-chips,
.dh-skip-link,.dh-status{
  --dh-accent: var(--green, #0F766E);
  --dh-accent-ink: var(--green-dark, #0F766E);
}

/* -------- WAVE 15a — Skip-link de fallback (so aparece no foco) -------- */
.dh-skip-link{
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10001;
  transform: translateY(-160%);
  padding: 10px 16px;
  border-radius: var(--r-md, 10px);
  background: var(--dh-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .25);
  transition: transform .15s ease;
}
.dh-skip-link:focus,
.dh-skip-link:focus-visible{
  transform: translateY(0);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* -------- WAVE 15b — Barra de progresso de leitura (fallback) -------- */
.dh-progress{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9998;
  pointer-events: none;
  background: transparent;
}
.dh-progress__fill{
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--dh-accent), var(--stone-mint, #A5FA00));
  border-radius: 0 2px 2px 0;
  transition: width .1s linear;
}
@media (prefers-reduced-motion: reduce){
  .dh-progress__fill{ transition: none; }
}

/* -------- WAVE 15c — Botao voltar ao topo (fallback) -------- */
.dh-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9990;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line, #E2E8F0);
  border-radius: 50%;
  background: var(--card, #fff);
  color: var(--dh-accent-ink);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.dh-to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.dh-to-top:hover{ border-color: var(--dh-accent); color: var(--dh-accent); }
.dh-to-top:focus-visible{ outline: 3px solid var(--dh-accent); outline-offset: 2px; }
[data-theme="dark"] .dh-to-top{ background: var(--card, #1E293B); border-color: var(--line, #334155); }
@media (prefers-reduced-motion: reduce){
  .dh-to-top{ transition: opacity .2s ease, visibility .2s; transform: none; }
  .dh-to-top.is-visible{ transform: none; }
}
@media (max-width: 390px){
  .dh-to-top{ right: 12px; bottom: 12px; width: 42px; height: 42px; }
}

/* -------- WAVE 16 — TOC "Nesta pagina" (fallback) -------- */
.dh-toc{
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  font-size: 13.5px;
  padding-left: 16px;
  border-left: 2px solid var(--line, #E2E8F0);
}
.dh-toc__title{
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted, #64748B);
  margin: 0 0 10px;
}
.dh-toc ul,.dh-toc-mobile ul{ list-style: none; margin: 0; padding: 0; }
.dh-toc li{ margin: 0 0 6px; }
.dh-toc li.dh-toc--sub{ padding-left: 14px; }
.dh-toc a,.dh-toc-mobile a{
  display: block;
  padding: 3px 6px;
  color: var(--ink-3, #374151);
  text-decoration: none;
  border-radius: 6px;
  line-height: 1.4;
  border-left: 2px solid transparent;
  margin-left: -8px;
}
.dh-toc a:hover{ color: var(--dh-accent-ink); }
.dh-toc a.is-active{
  color: var(--dh-accent-ink);
  font-weight: 700;
  border-left-color: var(--dh-accent);
  background: var(--green-soft, #ECFDF8);
}
.dh-toc a:focus-visible,.dh-toc-mobile a:focus-visible,
.dh-toc-mobile summary:focus-visible{
  outline: 3px solid var(--dh-accent);
  outline-offset: 1px;
}
[data-theme="dark"] .dh-toc a{ color: var(--ink-2, #CBD5E1); }

.dh-toc-mobile{
  margin: 0 0 24px;
  border: 1px solid var(--line, #E2E8F0);
  border-radius: var(--r-md, 10px);
  background: var(--card, #fff);
}
.dh-toc-mobile summary{
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink, #0F172A);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.dh-toc-mobile summary::-webkit-details-marker{ display: none; }
.dh-toc-mobile summary small{ font-weight: 500; color: var(--muted, #64748B); }
.dh-toc-mobile[open] summary{ border-bottom: 1px solid var(--line, #E2E8F0); }
.dh-toc-mobile ul{ padding: 10px 16px 14px; }
.dh-toc-mobile li{ margin: 0 0 4px; }
.dh-toc-mobile li.dh-toc--sub{ padding-left: 14px; }
[data-theme="dark"] .dh-toc-mobile{ background: var(--card, #1E293B); border-color: var(--line, #334155); }
[data-theme="dark"] .dh-toc-mobile summary{ color: var(--ink, #F1F5F9); }
/* desktop mostra aside, mobile mostra details */
.dh-toc-mobile{ display: block; }
@media (min-width: 1080px){
  .dh-toc-mobile{ display: none; }
}
@media (max-width: 1079px){
  .dh-toc{ display: none; }
}

/* -------- WAVE 17 — Cartoes de estatistica + bullet SVG -------- */
.dh-count[data-dh-stat]{
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  min-width: 8ch;
}
/* numero final SEMPRE visivel; count-up so altera o texto (sem opacity) */
.dh-count__num,.dh-count__value{ font-variant-numeric: tabular-nums; }
.dh-count__bullet{
  display: block;
  width: 100%;
  max-width: 220px;
  height: 10px;
  margin-top: 2px;
}
.dh-count__bullet-track{ fill: var(--line, #E2E8F0); }
.dh-count__bullet-fill{ fill: var(--dh-accent); }
[data-theme="dark"] .dh-count__bullet-track{ fill: rgba(148, 163, 184, .25); }

/* -------- WAVE 18 — Chips de descoberta de pilares -------- */
.dh-pillar-chips{
  margin: 40px 0 8px;
  padding: 20px;
  border: 1px solid var(--line, #E2E8F0);
  border-radius: var(--r-lg, 16px);
  background: var(--card, #fff);
}
.dh-pillar-chips__lead{
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted, #64748B);
  margin-bottom: 14px;
}
.dh-pillar-chips__row{ display: flex; flex-wrap: wrap; gap: 10px; }
.dh-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--line, #E2E8F0);
  background: var(--bg-subtle, #F8FAFC);
  color: var(--ink, #0F172A);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.dh-chip__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, #0F766E);
  flex-shrink: 0;
}
.dh-chip[data-pillar="compliance"] .dh-chip__dot{ background: var(--dh-compliance); }
.dh-chip[data-pillar="marketing"] .dh-chip__dot{ background: var(--dh-marketing); }
.dh-chip[data-pillar="bets"] .dh-chip__dot{ background: var(--dh-bets); }
.dh-chip[data-pillar="ia"] .dh-chip__dot{ background: var(--dh-ia); }
.dh-chip:hover{ border-color: var(--dh-accent); color: var(--dh-accent-ink); text-decoration: none; }
.dh-chip:focus-visible{ outline: 3px solid var(--dh-accent); outline-offset: 2px; }
[data-theme="dark"] .dh-pillar-chips{ background: var(--card, #1E293B); border-color: var(--line, #334155); }
[data-theme="dark"] .dh-chip{ background: rgba(148, 163, 184, .10); border-color: var(--line, #334155); color: var(--ink, #F1F5F9); }
@media (max-width: 390px){
  .dh-pillar-chips{ padding: 16px; }
  .dh-chip{ padding: 7px 12px; font-size: 13px; }
}

/* -------- WAVE 19 — Badges de status reutilizaveis -------- */
.dh-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill, 999px);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  border: 1px solid transparent;
  line-height: 1.4;
}
.dh-status::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.dh-status--ativo{ background: #ECFDF5; color: #065F46; border-color: rgba(5, 150, 105, .3); }
.dh-status--estudo{ background: #FFFBEB; color: #92400E; border-color: rgba(217, 119, 6, .3); }
[data-theme="dark"] .dh-status--ativo{ background: rgba(5, 150, 105, .14); color: #6EE7B7; border-color: rgba(5, 150, 105, .4); }
[data-theme="dark"] .dh-status--estudo{ background: rgba(217, 119, 6, .14); color: #FCD34D; border-color: rgba(217, 119, 6, .4); }

/* -------- WAVE 19 — Reduced-motion: neutraliza tudo que e novo -------- */
@media (prefers-reduced-motion: reduce){
  .dh-skip-link,.dh-to-top,.dh-chip,.dh-progress__fill{ transition: none; }
}

/* Alvo de foco programatico (TOC/voltar-ao-topo dao foco a secao) sem halo duplo */
.article-body [tabindex="-1"]:focus,
#main[tabindex="-1"]:focus{ outline: none; }
.article-body [tabindex="-1"]:focus-visible{
  outline: 3px solid var(--green, #0F766E);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Impressao: ocultar os novos elementos de UI de navegacao */
@media print{
  .dh-progress,.dh-to-top,.dh-toc,.dh-toc-mobile,.dh-skip-link,.dh-pillar-chips{ display: none !important; }
}