/* Tela de entrada */
.entrada { display: flex; flex-direction: column; background: var(--fundo); }

.palco {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--esp-5) var(--esp-4);
  background:
    radial-gradient(60vmax 40vmax at 8% 12%, rgb(5 135 197 / 0.10), transparent 70%),
    radial-gradient(55vmax 40vmax at 95% 95%, rgb(98 180 85 / 0.14), transparent 70%),
    var(--fundo);
}

.cartao-entrada {
  position: relative;
  width: min(100%, 460px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--esp-3);
  padding: var(--esp-7) var(--esp-5) var(--esp-6);
  background: var(--cartao-fundo);
  border: 1px solid var(--cartao-borda);
  border-radius: var(--raio-3);
  box-shadow: var(--cartao-sombra);
  overflow: hidden;
}
/* Filete com as cores do círculo da logo: azul para verde */
.cartao-entrada::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--marinho-500), var(--azul-circulo-500) 45%, var(--verde-500) 75%, var(--verde-300));
}

.entrada-titulo {
  font-size: var(--tam-5);
  line-height: 1.15;
  color: var(--texto-forte);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.entrada-texto { color: var(--texto-suave); }
.entrada-botao { margin-top: var(--esp-3); width: 100%; min-height: 52px; font-size: var(--tam-3); }
.entrada-nota { color: var(--texto-suave); font-size: var(--tam-1); }

/* Três portas */
.cartao-entrada { width: min(100%, 520px); }
.portas { list-style: none; margin: var(--esp-3) 0 0; padding: 0; width: 100%; display: grid; gap: var(--esp-3); text-align: left; }
.porta {
  display: grid; gap: 2px; min-height: 68px; padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda-controle); border-radius: var(--raio-2); background: var(--superficie);
  color: var(--texto-forte); text-decoration: none;
  transition: transform var(--tempo-toque) var(--curva-saida), background-color var(--tempo-toque) ease;
}
.porta strong { font-size: var(--tam-3); }
.porta span { color: var(--texto-suave); font-size: var(--tam-2); }
.porta--principal { background: var(--acao); border-color: var(--acao); color: var(--acao-texto); }
.porta--principal span { color: var(--acao-texto); opacity: 0.92; }
.porta:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .porta:hover { background: var(--superficie-suave); }
  .porta--principal:hover { background: var(--acao-hover); }
}
.entrada-rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2); margin-top: var(--esp-2); }