/* ---------- tokens ---------- */
:root {
  --fundo: #12141c;
  --fundo-cartao: #1a1d29;
  --borda: #2a2e3d;
  --texto-claro: #e7e9f0;
  --texto-suave: #9aa0b4;

  --verde-python: #6ee7b7;
  --amarelo-js: #f2c94c;
  --coral-rust: #f2795c;
  --azul-go: #5aa9e6;

  --fonte-mono: 'JetBrains Mono', monospace;
  --fonte-texto: 'Inter', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body.pagina-toda {
  margin: 0;
  background: var(--fundo);
  color: var(--texto-claro);
  font-family: var(--fonte-texto);
  line-height: 1.5;
}

/* ---------- topo ---------- */
.topo {
  max-width: 780px;
  margin: 0 auto;
  padding: 64px 24px 40px;
  text-align: center;
}

.logo-mono {
  font-family: var(--fonte-mono);
  font-weight: 700;
  color: var(--verde-python);
  margin: 0 0 20px;
  font-size: 15px;
}

.titulo-principal {
  font-size: 34px;
  line-height: 1.25;
  margin: 0 0 20px;
  font-weight: 600;
}

.introducao {
  color: var(--texto-suave);
  font-size: 16px;
  max-width: 60ch;
  margin: 0 auto;
}

/* ---------- a fileira de cartões (flexbox) ---------- */
.galera-de-linguagens {
  display: flex;
  gap: 10px;
  max-width: 1040px;
  margin: 24px auto 80px;
  padding: 0 24px;
}

.cartao-daora {
  width: 25%;
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.icone-cartao {
  width: 100%;
  border-radius: 6px;
  display: block;
}

.nome-da-vez {
  font-family: var(--fonte-mono);
  font-size: 17px;
  margin: 4px 0 0;
}

.cartao-python .nome-da-vez { color: var(--verde-python); }
.cartao-js .nome-da-vez { color: var(--amarelo-js); }
.cartao-rust .nome-da-vez { color: var(--coral-rust); }
.cartao-go .nome-da-vez { color: var(--azul-go); }

.legenda {
  text-align: center;
  font-size: 14px;
  color: var(--texto-suave);
  margin: 0;
}

/* ---------- rodapé ---------- */
.rodape {
  text-align: center;
  color: var(--texto-suave);
  font-size: 13px;
  padding: 24px 24px 48px;
}

/* ---------- acessibilidade ---------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--verde-python);
  outline-offset: 2px;
}

/* ---------- responsivo: empilha no celular ---------- */
@media (max-width: 720px) {
  .galera-de-linguagens {
    flex-direction: column;
  }

  .cartao-daora {
    width: 100%;
  }

  .titulo-principal {
    font-size: 26px;
  }
}