.apresentacao {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(15rem, 0.8fr);
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: var(--azul-bebe);
  border: 0.0625rem solid var(--azul-ativo);
  border-radius: var(--raio-destaque);
  box-shadow: var(--sombra-cartao);
}

.apresentacao-conteudo > :last-child,
.cabecalho-secao > :last-child,
.cartao-conteudo > :last-child {
  margin-block-end: 0;
}

.personagens-institucionais {
  display: block;
  width: 100%;
  max-height: 16rem;
  object-fit: contain;
  border-radius: var(--raio-cartao);
}

.secao-oficinas,
.secao-laboratorios {
  margin-block-start: 2rem;
}

.cabecalho-secao {
  max-width: 45rem;
  margin-block-end: 1.5rem;
}

.cartao {
  padding: 1.5rem;
  background: var(--branco);
  border: 0.0625rem solid var(--borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
}

.cartao-oficina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem;
  border-block-start: 0.375rem solid var(--verde-apoio);
}

.cartao-oficina + .cartao-oficina {
  margin-block-start: 1rem;
}

.cartao-laboratorio-referencia {
  display: grid;
  grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  border-block-start: 0.375rem solid var(--dourado);
}

.estado {
  display: inline-flex;
  width: fit-content;
  margin-block-end: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
}

.estado-disponivel {
  color: var(--verde-apoio);
  background: var(--verde-claro);
}

.estado-integracao {
  color: var(--dourado-escuro);
  background: var(--dourado-claro);
}

.botao {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border: 0.125rem solid transparent;
  border-radius: var(--raio-botao);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.botao-primario {
  color: var(--branco);
  background: var(--azul-acao);
  border-color: var(--azul-acao);
}

.botao-primario:hover {
  background: var(--azul-acao-hover);
  border-color: var(--azul-acao-hover);
}

.botao-discreto {
  color: var(--azul-acao);
  background: transparent;
}

.botao-discreto:hover {
  background: var(--azul-bebe);
}

.navegacao-contextual {
  margin-block-end: 1rem;
}

.representacao-material {
  min-height: 10rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  background: #fffaf0;
  border: 0.0625rem solid #f3d98d;
  border-radius: var(--raio-cartao);
}

.dezena-visual {
  width: 2rem;
  height: 8rem;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(10% - 0.0625rem),
      var(--dourado-escuro) calc(10% - 0.0625rem),
      var(--dourado-escuro) 10%
    ),
    var(--dourado);
  border: 0.125rem solid var(--dourado-escuro);
  border-radius: 0.375rem;
}

.unidade-visual {
  width: 2rem;
  height: 2rem;
  background: var(--dourado);
  border: 0.125rem solid var(--dourado-escuro);
  border-radius: 0.375rem;
}

.informacao-progressiva {
  margin-block-start: 0.75rem;
  padding-block-start: 0.75rem;
  border-block-start: 0.0625rem solid var(--borda);
  font-size: 0.9375rem;
}