/* Estilos das páginas de guia (/guia/...). Complementa o /styles.css do site. */

header.guia-topo {
  padding: 22px 20px 52px;
}

header.guia-topo .marca-plexe {
  font-size: 2rem;
  margin: 0 0 6px;
}

header.guia-topo .marca-plexe a {
  color: var(--branco);
  text-decoration: none;
}

header.guia-topo p:last-child {
  font-size: 1rem;
}

main.guia {
  max-width: 840px;
  margin: -30px auto 50px;
  padding: 0 20px;
}

.bloco {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 28px 34px 34px;
  line-height: 1.7;
  font-size: 1.05rem;
}

.migalhas {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 18px;
}

.migalhas a {
  color: var(--azul);
  font-weight: 600;
  text-decoration: none;
}

.migalhas a:hover { text-decoration: underline; }

.bloco h1 {
  font-size: 1.9rem;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--texto);
}

.bloco h2 {
  font-size: 1.4rem;
  margin: 34px 0 10px;
  color: var(--azul-escuro);
}

.bloco h3 {
  font-size: 1.1rem;
  margin: 20px 0 4px;
}

.bloco p { margin: 0 0 14px; }

.bloco ul { margin: 0 0 14px; padding-left: 22px; }
.bloco li { margin-bottom: 10px; }

.meta {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0 0 18px;
}

.lead {
  font-size: 1.15rem;
  color: #334155;
}

.cta { margin: 22px 0; }

.botao-jogar {
  display: inline-block;
  background: var(--verde);
  color: var(--branco);
  font-weight: 800;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 999px;
  box-shadow: var(--sombra);
  transition: transform 0.15s ease;
}

.botao-jogar:hover { transform: translateY(-2px); }

.botao-jogar:focus-visible,
.bloco a:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

.cta.final { margin-top: 30px; }

.nota {
  background: #fffbeb;
  border-left: 5px solid var(--amarelo);
  border-radius: 8px;
  padding: 12px 16px;
}

.bloco a { color: var(--azul); }
.bloco a.botao-jogar { color: var(--branco); }

ul.relacionados { list-style: none; padding-left: 0; }

ul.guias-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.guias-lista li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid #e2e8f0;
  margin: 0;
}

ul.guias-lista .icone {
  font-size: 2.2rem;
  line-height: 1.2;
}

.bloco h3.disciplina {
  font-size: 1.15rem;
  margin: 26px 0 6px;
  color: var(--roxo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

ul.guias-lista .guia-titulo { margin: 0 0 2px; font-size: 1.12rem; }
ul.guias-lista .guia-titulo a { text-decoration: none; font-weight: 800; }
ul.guias-lista .guia-titulo a:hover { text-decoration: underline; }
ul.guias-lista .meta { margin: 0 0 6px; }
ul.guias-lista p:last-child { margin: 0; }

@media (max-width: 640px) {
  .bloco { padding: 22px 18px 26px; font-size: 1rem; }
  .bloco h1 { font-size: 1.55rem; }
  .bloco h2 { font-size: 1.25rem; }
}