:root{
  --bg: #0f1420;           /* más pro que el azul plano */
  --panel: rgba(15,20,32,.55);
  --border: rgba(255,255,255,.08);
  --text: rgba(246,243,239,.92);
  --muted: rgba(246,243,239,.55);

  --cyan: #1A8CD7;
  --blue: #4F5ACA;
  --purple: #7F35C4;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }

body{
  background:
    radial-gradient(1200px 800px at 50% 45%, rgba(26,140,215,.18), transparent 60%),
    radial-gradient(1200px 800px at 60% 55%, rgba(127,53,196,.12), transparent 62%),
    var(--bg);
  color: var(--text);
  overflow:hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

#bg{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display:block;
}

/* viñeta para que el centro sea limpio y los bordes tengan mood */
.vignette{
  position: fixed;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(600px 420px at 50% 46%, rgba(0,0,0,0), rgba(0,0,0,.28) 70%),
    radial-gradient(1200px 900px at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,.35) 85%);
}

.shell{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  z-index: 2;
}

.card{
  width: min(560px, 92vw);
  padding: 34px 30px;
  border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 25px 70px rgba(0,0,0,.45);
  text-align: center;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(26,140,215,.35), rgba(127,53,196,.25), rgba(255,255,255,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.55;
}

.logoWrap{
  width: 92px;
  height: 92px;
  margin: 0 auto 14px auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(26,140,215,.06), transparent 66%);
}

.morvadenLogo{
  width: 100%;
  height: 100%;
  display:block;
  animation: logoPulse 7s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.40));
c}

@keyframes logoPulse{
  0%, 100% { transform: scale(1); opacity: .96; }
  50%      { transform: scale(1.02); opacity: 1; }
}

.brand{
  font-size: 1.9rem;
  letter-spacing: .24em;
  font-weight: 600;
  margin-left: .24em; /* compensa el tracking */
}

.tagline{
  margin-top: 10px;
  font-size: .85rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--muted);
}

.divider{
  width: 88px;
  height: 2px;
  margin: 18px auto 14px auto;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(26,140,215,.0), rgba(26,140,215,.55), rgba(127,53,196,.55), rgba(127,53,196,0));
}

.micro{
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(246,243,239,.78);
}

.muted{ color: var(--muted); }

/* móvil: menos padding */
@media (max-width: 420px){
  .card{ padding: 28px 22px; }
  .brand{ font-size: 1.55rem; }
}

.topbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom: 10px;
}

.langBtn{
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(246,243,239,.75);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.langBtn:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.langBtn:active{
  transform: translateY(0);
}