/* Perfil do MEI — login e cadastro (depende de tema.css e componentes.css) */
.acesso { min-height: 100vh; background: var(--nevoa); display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.acesso-in { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 22px; }
.acesso-largo .acesso-in { max-width: 720px; }
.acesso .marca { align-self: center; }
.acesso .marca svg { width: 40px; height: 40px; }
.acesso .marca-nome { font-size: 22px; }
.acesso-cartao { padding: 32px; box-shadow: var(--sombra-cartao); }
.acesso-bloco { display: flex; flex-direction: column; gap: 16px; }
.acesso-bloco[hidden] { display: none; }
.acesso-link { align-self: flex-end; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.acesso-rodape { text-align: center; }
.acesso-rodape a { font-weight: 700; }
.acesso-status:empty { margin: 0; padding: 0; }
.acesso-bloco > .acesso-status:empty { margin-top: -16px; }
.acesso-largo .acesso-cartao > .acesso-status:empty { margin-top: -28px; }
.acesso-status.aviso { font-size: 15px; }

/* Etapas do cadastro */
.etapas { list-style: none; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.etapas li { flex: 1 1 100px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--cinza); }
.etapas li::before { content: ""; height: 5px; border-radius: 999px; background: var(--linha); }
.etapas li.feita::before, .etapas li[aria-current="step"]::before { background: var(--azul); }
.etapas li[aria-current="step"] { color: var(--grafite); font-weight: 700; }

/* Cartão do cadastro */
.acesso-largo .acesso-cartao { display: flex; flex-direction: column; gap: 28px; }
.secao-titulo { margin-bottom: 16px; }
.secao-nota { margin: -8px 0 16px; }

/* Escolha do plano */
.escolha-plano { border: 0; padding: 0; margin: 0; min-width: 0; }
.escolha-plano legend { padding: 0; margin-bottom: 14px; }
.lista-planos { display: flex; flex-direction: column; gap: 10px; }
.opcao-plano { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 16px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; cursor: pointer; }
.opcao-plano:hover { border-color: var(--borda-campo); }
.opcao-plano:has(input:checked) { border-color: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); }
.opcao-plano input { width: 20px; height: 20px; accent-color: var(--azul); flex-shrink: 0; margin: 0; }
.opcao-plano-nome { flex: 1; min-width: 0; font-weight: 700; }
.opcao-plano-preco { font-weight: 800; white-space: nowrap; }
.opcao-plano-preco small { font-weight: 400; color: var(--cinza); font-size: 14px; }

@media (max-width: 600px) {
  .acesso { padding: 24px 16px; align-items: flex-start; }
  .acesso-cartao { padding: 24px 20px; }
}

/* ===== Visual colorido: fundo azul-céu com um sol ao fundo ===== */
.acesso { position: relative; overflow: hidden; background: var(--azul-ceu); }
.acesso::before {
  content: ""; position: absolute; z-index: 0; right: -140px; bottom: -160px;
  width: 460px; height: 460px; border-radius: 50%; background: var(--sol);
}
.acesso-in { position: relative; z-index: 1; }
.acesso-cartao { border-radius: 28px; box-shadow: var(--sombra-suave); }
.opcao-plano { border-radius: var(--r-cartao); }
.opcao-plano:has(input:checked) { background: var(--sol-claro); }
.etapas li[aria-current="step"]::before { background: var(--sol); }
@media (max-width: 600px) {
  .acesso::before { width: 280px; height: 280px; right: -110px; bottom: -110px; }
}