:root{
    --bg: #0F1115;
    --card: #171A21;
    --text: #E6E6E6;
    --muted: #9BA3AF;
    --line: #242A35;
    --accent: #3C5BFF;
    --radius: 16px;
    --gap: 14px;
  }
  
  *{box-sizing:border-box; margin:0; padding:0}
  html,body{height:100%}
  
  body{
    background: radial-gradient(1200px 800px at 20% -10%, #1B1F2A 0%, #0F1115 60%),
                linear-gradient(180deg, #0F1115 0%, #0C0E12 100%);
    font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
  }
  
  .container{ width:100%; max-width:480px; }
  
  .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px;
    box-shadow:0 8px 28px rgba(0,0,0,.35);
    text-align:center;
  }
  
  .brand{
    display:flex; align-items:center; gap:14px;
    justify-content:center;
    margin-bottom:22px;
  }
  
  .logo{
    width:52px; height:52px;
    border-radius:14px;
    background:linear-gradient(135deg, var(--accent), #667DFF);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:22px; color:#fff;
  }
  .logo-img {
      width: 52px;
      height: 52px;
      border-radius: 14px; /* opcional, si quieres que siga redondeado */
      object-fit: cover;   /* recorta la imagen sin deformarla */
      display: block;
    }
  
  h1{ font-size:22px; font-weight:700; }
  .subtitle{ color:var(--muted); font-size:14px; margin-top:4px; }
  
  .links{
    display:flex; flex-direction:column;
    gap:var(--gap); margin-top:16px;
  }
  
  .btn{
    display:block;
    text-decoration:none;
    color:#fff;
    font-weight:600;
    padding:14px 18px;
    border-radius:14px;
    background:linear-gradient(180deg, #1A1E27 0%, #141821 100%);
    border:1px solid #2A2F3A;
    transition: transform .1s ease, border-color .2s ease, background .2s ease; /* + background */
  }
  
  .btn:hover{ transform:translateY(-2px); border-color:#3A4252; }
  
  /* Solo mientras se pulsa: cambia a azul */
  .btn:active{
    transform:translateY(0);
    background:linear-gradient(180deg, var(--accent) 0%, #2C46D9 100%);
    border-color:#2E44E6;
  }
  
  .btn.primary{
    background:linear-gradient(180deg, var(--accent) 0%, #2C46D9 100%);
    border-color:#2E44E6;
  }
  
  .footer{
    margin-top:22px;
    font-size:12px;
    color:var(--muted);
    text-align:center;
  }
  
  @media (max-width:420px){
    .card{ padding:20px; }
    h1{ font-size:20px; }
  }