/* =========================================================
   ENTRADA — tela de senha do convite e do painel
   ========================================================= */
.entrar {
  min-height: 100svh; margin: 0; overflow: hidden;
  display: grid; place-items: center; padding: 20px;
  background: var(--navy-900);
  color: var(--white);
}
.entrar__bg {
  position: fixed; inset: -20px;
  background:
    linear-gradient(180deg, rgba(10, 26, 54, .72), rgba(10, 26, 54, .92)),
    url("/img/nos-login.jpg") center 30% / cover no-repeat;
  filter: blur(3px) saturate(.8);
  animation: kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns { to { transform: scale(1.1) translateY(-10px); } }
.sparkles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.entrar__card {
  position: relative; z-index: 2;
  width: min(400px, 100%); text-align: center;
  padding: 46px 32px 36px; border-radius: 26px;
  background: rgba(14, 34, 68, .55);
  border: 1px solid rgba(201, 169, 97, .45);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  animation: surgir 1.1s var(--ease) both;
}
.entrar__card::before {
  content: ""; position: absolute; inset: 7px; border-radius: 20px;
  border: 1px solid rgba(201, 169, 97, .18); pointer-events: none;
}
@keyframes surgir { from { opacity: 0; transform: translateY(30px) scale(.96); } }

.entrar__butterfly { width: 64px; margin: 0 auto 10px; overflow: visible; animation: voar 6s ease-in-out infinite; }
.entrar__butterfly .asa-e { transform-origin: 32px 32px; animation: bater 1.6s ease-in-out infinite; }
.entrar__butterfly .asa-d { transform-origin: 32px 32px; animation: bater 1.6s ease-in-out infinite; }
@keyframes bater { 50% { transform: scaleX(.55); } }
@keyframes voar { 50% { transform: translateY(-10px) rotate(5deg); } }

.entrar__names {
  font-family: var(--script); font-weight: 400;
  font-size: clamp(2.8rem, 10vw, 3.6rem); line-height: 1.05; margin: .2rem 0 .6rem;
}
.entrar__names span { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: .6em; }
.entrar__sub { color: var(--blue-200); margin: 0 0 26px; font-size: .95rem; }

.campo { position: relative; margin-bottom: 14px; }
.campo input {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--white);
  background: rgba(10, 26, 54, .6);
  border: 1px solid rgba(169, 199, 238, .3); border-radius: 14px;
  padding: 22px 48px 10px 16px;
  transition: border-color .3s, box-shadow .3s;
}
.campo label {
  position: absolute; left: 17px; top: 16px; color: var(--blue-300);
  font-size: 1rem; pointer-events: none; transition: all .25s var(--ease);
}
.campo input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 169, 97, .18); }
.campo input:focus + label, .campo input:not(:placeholder-shown) + label { top: 7px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); }
.campo__olho { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--blue-300); width: 34px; height: 34px; display: grid; place-items: center; }
.campo__olho svg { width: 20px; }

.btn.is-loading span { opacity: .4; }
.btn.is-loading::after { content: ""; width: 16px; height: 16px; border: 2px solid var(--navy-900); border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; position: absolute; }
.btn { position: relative; }
@keyframes girar { to { transform: rotate(360deg); } }

.entrar__erro { min-height: 1.4em; margin: 12px 0 0; color: #ffc0c0; font-size: .9rem; }

.entrar__card.is-shake { animation: tremer .45s; }
@keyframes tremer { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.entrar__card.is-open { animation: abrir .9s var(--ease) forwards; }
@keyframes abrir { to { opacity: 0; transform: translateY(-20px) scale(1.06); filter: blur(6px); } }