:root {
  --bg: #0e1420;      /* fundo exato da marca */
  --claro: #eef1f5;
  --marca: #e5443b;
  --cartao: #151d2c;
  --borda: #222d41;
  --suave: #8d98ab;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--claro);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 2rem;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6rem;
}

.marca {
  width: min(460px, 78vw);
  height: auto;
  display: block;
}

/* Os dois sistemas, lado a lado — cada um com a sua porta. */
.acessos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.acesso {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 265px;
  padding: 1rem 1.3rem;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--cartao);
  color: var(--claro);
  text-decoration: none;
  transition: border-color .15s, transform .15s, background .15s;
}

.acesso:hover,
.acesso:focus-visible {
  border-color: var(--marca);
  background: #192231;
  transform: translateY(-2px);
  outline: none;
}

.acesso-icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(229, 68, 59, .12);
  color: var(--marca);
  font-size: 19px;
  line-height: 1;
}

.acesso-texto { display: flex; flex-direction: column; gap: .18rem; }
.acesso-texto strong { font-size: 15px; font-weight: 600; letter-spacing: .3px; }
.acesso-texto small { font-size: 12px; color: var(--suave); }

@media (max-width: 560px) {
  main { gap: 2rem; }
  .acessos { flex-direction: column; width: 100%; }
  .acesso { min-width: 0; width: 100%; }
}