/* Componentes das páginas /enablers e /casos. Preenchido nas Tasks 4, 6. */

.pagina-intro {
  background: var(--color-roxo-profundo);
  padding-block: var(--space-12) var(--space-8);
}
.pagina-intro .container { max-width: 53rem; }
.pagina-intro__titulo {
  color: #FFFFFF;
  font-size: var(--fs-title-1);
  line-height: var(--lh-title-1);
  letter-spacing: var(--ls-title-1);
  margin-bottom: var(--space-3);
}
.pagina-intro__lead {
  color: var(--color-lavanda);
}
.pagina-intro__nota {
  margin-top: var(--space-4);
  background: rgba(167, 139, 250, 0.08);
  border-left: 3px solid var(--color-violeta-claro);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: var(--space-3);
  color: var(--color-lavanda);
}

.pagina-intro__nota-texto {text-align: center;}

.pagina-intro__nota-rotulo {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  margin-bottom: var(--space-1);
}

/* Mesma regra de prosa das seções da home (ver sections.css): hifenizada
   sempre, justificada só a partir de 640px — no mobile a coluna é estreita
   demais e justificar abre rios. */
.pagina-intro__lead,
.pagina-intro__nota p,
.enabler-card__oque,
.sustentacao,
.caso__narrativa,
.cvm__v,
.nota-integridade p {
  -webkit-hyphens: auto;
  hyphens: auto;
}
@media (min-width: 640px) {
  .pagina-intro__lead,
  .enabler-card__oque,
  .sustentacao,
  .caso__narrativa,
  .cvm__v,
  .nota-integridade p {
    text-align: justify;
  }
}

.enablers-lista { padding-block: var(--space-12); }
.enablers-lista__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .enablers-lista__grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
}

.enabler-card {
  background: #FFFFFF;
  border: 1px solid var(--color-borda);
  border-radius: 0.75rem;
  padding: var(--space-4);
  scroll-margin-top: var(--space-12);
}
.enabler-card > * + * { margin-top: var(--space-2); }
.enabler-card__id {
  font-family: var(--font-mono);
  font-size: var(--fs-indicator);
  color: var(--color-violeta-revdo);
}
.enabler-card__frase {
  font-family: var(--font-display);
  font-size: var(--fs-title-2);
  line-height: var(--lh-title-2);
  letter-spacing: var(--ls-title-2);
  color: var(--color-roxo-profundo);
}
.enabler-card__destrava {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.enabler-card__destrava li {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-cinza-texto);
}
.enabler-card__destrava li::before {
  content: "▸";
  color: var(--color-violeta-revdo);
  margin-right: var(--space-1);
}

.benchmark {
  background: var(--color-nevoa);
  border-radius: 0.5rem;
  padding: var(--space-2);
}
.benchmark > * + * { margin-top: var(--space-1); }
.benchmark__rotulo {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--color-violeta-nucleo);
}
.benchmark__valor {
  font-weight: 600;
  color: var(--color-roxo-profundo);
}
.benchmark__fonte {
  font-size: var(--fs-caption);
  color: var(--color-cinza-texto);
}

.sustentacao {
  border-left: 2px solid var(--color-violeta-claro);
  padding-left: var(--space-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-cinza-texto);
}

.mapa { padding-block: var(--space-8); background: var(--color-nevoa); }
.mapa__scroll { overflow-x: auto; }

/* A tabela ocupa a largura toda e usa faixas por linha para o olho não se
   perder ao cruzar sete colunas. Cores: cabeçalho em lavanda, corpo
   alternando branco e névoa. Todos os pares conferidos contra 4.5:1. */
.mapa__tabela {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  background: #FFFFFF;
  border-radius: 0.5rem;
  overflow: hidden;
}
.mapa__tabela th,
.mapa__tabela td {
  border: 1px solid var(--color-borda);
  padding: var(--space-1) var(--space-2);
}
.mapa__tabela thead tr { background: var(--color-lavanda); }
.mapa__tabela thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--color-roxo-profundo);
}
.mapa__tabela thead a { color: var(--color-roxo-profundo); }
.mapa__tabela tbody tr:nth-child(even) { background: var(--color-nevoa); }
.mapa__tabela tbody th {
  text-align: left;
  white-space: nowrap;
  font-family: var(--font-text);
  font-size: var(--fs-body-sm);
  color: var(--color-grafite);
}
.mapa__sim { text-align: center; color: var(--color-violeta-revdo); }
.mapa__tabela a,
.benchmark__fonte a {
  color: var(--color-violeta-revdo);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mapa__legenda {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-cinza-texto);
  padding: 20px 0 0;
}

.fontes { padding-block: var(--space-8); }
.fontes__lista {
  font-size: var(--fs-caption);
  color: var(--color-cinza-texto);
  padding-left: var(--space-3);
}
.fontes__lista li + li { margin-top: var(--space-2); }
.fontes__lista li { scroll-margin-top: var(--space-12); }

.pagina-cta { padding-block: var(--space-12); background: var(--color-nevoa); }
.pagina-cta__inner { max-width: 32rem; text-align: center; }
.pagina-cta__subheadline {
  color: var(--color-cinza-texto);
  margin-block: var(--space-2) var(--space-6);
}

.casos-lista { padding-block: var(--space-12); }
.caso { scroll-margin-top: var(--space-12); }
.caso + .caso {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-borda);
}
.caso > * + * { margin-top: var(--space-4); }

.caso__head {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}
.caso__id {
  font-family: var(--font-mono);
  font-size: var(--fs-title-2);
  color: var(--color-violeta-revdo);
}
.caso__frase {
  font-size: var(--fs-title-1);
  line-height: var(--lh-title-1);
  letter-spacing: var(--ls-title-1);
  color: var(--color-roxo-profundo);
}
.caso__narrativa {
  color: var(--color-grafite);
}

.caso__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
}
.chip {
  display: inline-block;
  background: var(--color-nevoa);
  color: var(--color-violeta-nucleo);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}
a.chip:hover { background: var(--color-lavanda); }
a.chip:focus-visible {
  outline: 2px solid var(--color-violeta-revdo);
  outline-offset: 2px;
}
.chip--neutro {
  background: transparent;
  border: 1px dashed var(--color-borda);
  color: var(--color-cinza-texto);
}

.cvm { border-top: 1px solid var(--color-borda); }
.cvm__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-borda);
}
@media (min-width: 768px) {
  .cvm__row { grid-template-columns: 12rem 1fr; gap: var(--space-3); }
}
.cvm__k {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-violeta-nucleo);
}
.cvm__v {
  font-size: var(--fs-body-sm);
  color: var(--color-grafite);
}
.cvm__v ul { list-style: none; }
.cvm__v ul li + li { margin-top: var(--space-1); }
.cvm__v ul li::before {
  content: "▸";
  color: var(--color-violeta-revdo);
  margin-right: var(--space-1);
}

.caso__prova {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--color-cinza-texto);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.caso__prova-sep { color: var(--color-violeta-vivo); }

.nota-integridade {
  background: var(--color-nevoa);
  border-left: 3px solid var(--color-violeta-revdo);
  border-radius: 0.5rem;
  padding: var(--space-3);
  font-size: var(--fs-body-sm);
  max-width: 48rem;
  margin-block: var(--space-2);
  margin-inline: auto;
}