:root{
      --bg-red:#b1100e;
      --bg-dark:#ffffff;
      --card:#ffffff;
      --muted:#868686;
      --text:#000000;
      --input:#ffffff;
      --input-border:#2a2a2a;
      --primary:#d62212;
      --primary-hover:#b71d0f;
      --shadow: 0 10px 30px rgb(255, 255, 255);
      --radius: 22px;
    }

    /* --- Reset suave --- */
    *{box-sizing:border-box}
    html,body{height:100%}
  body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
 background-image: url('../img/fondo2.jpg');
 /* ← tu imagen */
  background-repeat: no-repeat;
  background-size: cover;       /* ocupa toda la pantalla */
  background-position: center;  /* centrada */
  background-attachment: fixed; /* se mantiene fija al hacer scroll */
  min-height:100vh;
  display:grid;
  place-items:center;
}

    .login-card{
      width:min(520px, 92vw);
      background:linear-gradient(180deg, #fdfdfd 0%, #ffffff 100%);
      border-radius:var(--radius);
      padding:32px 30px 28px; /* 🔹 menos alto */
      position:relative;
      isolation:isolate;

    }

    /* Glow sutil alrededor de la tarjeta */
    .login-card::before{
      content:"";
      position:absolute; inset:-1px;
      border-radius:calc(var(--radius) + 2px);
      z-index:-1;
      filter: blur(24px);
      opacity:.6;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:18px;
      margin-bottom:28px;
      justify-content:center;
      text-align:center;
      flex-wrap:wrap;
    }

    .brand img{
  width:200px; /* puedes ajustar el tamaño si lo quieres más grande o pequeño */
  height:auto;
  display:block;
  object-fit:contain;
  background:none;
  border-radius:0; /* elimina el círculo */
  box-shadow:none; /* sin sombra ni borde interno */
}


    .brand h1{
      margin:0;
      line-height:1;
      font-size:28px;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .brand .script{
      display:block;
      margin-top:6px;
      font-size:64px;
      font-weight:700;
      line-height:.9;
      letter-spacing:.01em;
      font-style:italic;
      color:#00000090;
      text-shadow:0 4px 16px rgba(255,42,22,.18);
    }

    form{
      display:grid;
      gap:14px;
      margin-top:8px;
    }

    .field{
      background:var(--input);
      border:1px solid var(--input-border);
      border-radius:14px;
      padding:16px 18px;
      color:var(--text);
      font-size:16px;
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
      width:100%;
    }
    .field::placeholder{ color:#9a9a9a; }
    .field:focus{
      border-color:#3a3a3a;
            box-shadow:0 8px 18px rgba(23, 23, 23, 0.81);
      background:#ffffff;
    }

    .btn{
      margin-top:10px;
      border:none;
      border-radius:16px;
      padding:16px 22px;
      font-size:18px;
      font-weight:700;
      background:#000000;
     
      color:white;
      cursor:pointer;
      transition:transform .04s ease, background .15s ease, box-shadow .15s ease;
   
    }
    .btn:hover{   background:#000000; }
    .btn:active{ transform:translateY(1px); }

    .aux{
      margin-top:18px;
      text-align:center;
      color:var(--muted);
      font-size:15px;
    }
    .aux a{
      color:var(--text);
      text-decoration:none;
      position:relative;
    }
    .aux a::after{
      content:"";
      position:absolute; left:0; right:0; bottom:-2px;
      height:1px; background:#4a4a4a;
      transform:scaleX(0); transform-origin:left;
      transition:transform .2s ease;
    }
    .aux a:hover::after{ transform:scaleX(1); }

    /* Responsive pequeño */
    @media (max-width:340px){
      .brand img{ width:90px; height:90px; }
      .brand .script{ font-size:52px; }
      .login-card{ padding:36px 24px 28px; }
    }
    .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 8px; /* espacio entre icono y texto */
  font-size: 14px;
  color: #000000;
  margin-bottom: 6px;
}

.form-group label i {
  color: #000000; /* azul rey */
  font-size: 15px;
}

.back-link {
  position: fixed;
  top: 20px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 500;
  color: #ffffff; /* azul oscuro del texto */
  text-decoration: none;
  transition: color 0.2s ease;
}

.back-link i {
  color: #ffffff; /* azul celeste del icono */
  font-size: 14px;
}

.back-link:hover {
  color: #ffffff; /* cambia el texto a azul claro al pasar el mouse */
}

/* ===== Título y subtítulo bajo el logo ===== */
.login-heading {
  text-align: center;
  margin-top: 5px;
}

.login-heading h1 {
  font-size: 26px;
  color: #000000;  /* azul oscuro */
  margin-bottom: 6px;
  font-weight: 700;
}

.login-heading p {
  font-size: 14px;
  color: #000000;  /* gris azulado */
  font-weight: 400;
  margin: 0;
}

.login-heading .highlight {
  color: #000000; /* celeste brillante */
  font-weight: 600;
}
body{
  margin:0;
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
 background-image: url('../img/fondo2.jpg');
 /* ← tu imagen */
  background-repeat: no-repeat;
  background-size: cover;       /* ocupa toda la pantalla */
  background-position: center;  /* centrada */
  background-attachment: fixed; /* se mantiene fija al hacer scroll */
  min-height:100vh;
  display:grid;
  place-items:center;
}
/*Fuerza todos los campos a ocupar una sola columna 
.row {
  grid-template-columns: 1fr !important;
}

form {
  gap: 18px;
}


body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70vmax 60vmax at 15% 20%, rgba(0,51,160,.25), transparent 60%),
    radial-gradient(80vmax 70vmax at 85% 85%, rgba(0,51,160,.20), transparent 60%),
    linear-gradient(90deg, #050b16 0%, #0b3ca0 100%);
}*/

@keyframes revealClean{
  0%{
    opacity:0;
    filter:blur(10px);
    clip-path: inset(10% 12% 12% 10% round var(--radius));
  }
  100%{
    opacity:1;
    filter:blur(0);
    clip-path: inset(0 0 0 0 round var(--radius));
  }
}

/* Respeta accesibilidad: si el usuario prefiere menos animación */
@media (prefers-reduced-motion: reduce){
  .animate-in{ animation:none !important }
}

/* SOLO se anima la tarjeta completa */
.login-card.animate-in{
  animation: revealClean .6s cubic-bezier(.16,.84,.44,1) both;
  will-change: opacity, filter, clip-path;
}

/* Hover/active de los botones (se quedan igual que los tenías) */
.login-card .btn{
  transition: transform .2s ease, box-shadow .2s ease, background .15s ease;
}
.login-card .btn:hover{
  transform: scale(1.07);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.login-card .btn:active{
  transform: scale(0.96);
}