.tb-acesso {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--sp-4);
  background:
    radial-gradient(60rem 32rem at 50% -12rem, color-mix(in srgb, var(--marca) 12%, transparent), transparent 70%),
    var(--fundo);
}

.tb-acesso__caixa {
  width: 100%;
  max-width: 26rem;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
}

.tb-acesso__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--texto);
  text-decoration: none;
  margin-bottom: var(--sp-5);
}

.tb-acesso__marca b { color: var(--marca); font-weight: 800; }

.tb-acesso__pulso {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--marca);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--marca) 60%, transparent);
  animation: tb-pulsa 2.4s ease-out infinite;
  flex: none;
}

@keyframes tb-pulsa {
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-acesso__pulso { animation: none; }
}

.tb-acesso__titulo {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--texto);
  margin-bottom: 4px;
}

.tb-acesso__apoio {
  color: var(--texto-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin-bottom: var(--sp-5);
}

.tb-acesso .tb-aviso { margin-bottom: var(--sp-4); }

.tb-acesso__form {
  display: grid;
  gap: var(--sp-4);
}

.tb-acesso__form[hidden] { display: none; }

.tb-acesso__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.tb-acesso__elo {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--marca);
  text-decoration: none;
}

.tb-acesso__elo:hover { text-decoration: underline; }

.tb-acesso__segredo { position: relative; display: block; }

.tb-acesso__segredo .tb-entrada { width: 100%; padding-inline-end: 5.25rem; }

.tb-acesso__olho {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.tb-acesso__olho:hover { background: var(--hover); color: var(--texto); }

.tb-acesso__olho:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 1px;
}

.tb-acesso__regras {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--texto-2);
}

.tb-acesso__regra {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.tb-acesso__regra::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--linha-2);
  flex: none;
}

.tb-acesso__regra--ok { color: var(--marca); }

.tb-acesso__regra--ok::before {
  border-color: var(--marca);
  background:
    linear-gradient(var(--marca), var(--marca)) center / 6px 6px no-repeat content-box,
    var(--marca-fundo);
  padding: 3px;
}

.tb-acesso__enviar {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 11px;
  font-size: var(--fs-base);
  margin-top: var(--sp-2);
}

.tb-acesso__rodape {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--linha);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--texto-2);
}

.tb-acesso__rodape a { color: var(--marca); font-weight: 600; text-decoration: none; }

.tb-acesso__rodape a:hover { text-decoration: underline; }

@media (max-width: 25rem) {
  .tb-acesso { padding: var(--sp-4) var(--sp-3); align-items: start; }
  .tb-acesso__caixa { padding: var(--sp-5) var(--sp-4) var(--sp-4); border-radius: var(--r-md); }
}