/* ============================= */
/* RESET */
/* ============================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

/* ============================= */
/* FONDO 3D */
/* ============================= */

#bg3d{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}

/* ============================= */
/* BODY */
/* ============================= */

body, html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow: hidden;
  font-family: "Segoe UI", Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-slide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  z-index: -1;
  transition: opacity 1.5s ease-in-out;
}

.bg-slide.active {
  opacity: 1;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,0,17,0.2), rgba(255,0,8,0.2));
  z-index: 1;
}

.login-container {
  position: relative;
  z-index: 2;
}


/* ============================= */
/* LOGIN CONTAINER */
/* ============================= */

.login-container{

  background:rgba(255,255,255,0.95);

  backdrop-filter:blur(6px);

  padding:40px;

  border-radius:15px;

  box-shadow:0 10px 25px rgba(0,0,0,0.25);

  width:100%;
  max-width:380px;

  text-align:center;

}

/* ============================= */
/* LOGO */
/* ============================= */

.logo{

  width:100%;
  max-width:200px;

  height:auto;

  display:block;

  margin:0 auto 15px auto;

}

/* ============================= */
/* TITULO */
/* ============================= */

h2{

  color:#E30613;

  margin-bottom:10px;

  font-size:1.9rem;

}

/* ============================= */
/* TEXTO INFO */
/* ============================= */

.login-info{

  font-size:0.9rem;

  color:#555;

  margin-bottom:20px;

}

/* ============================= */
/* INPUTS */
/* ============================= */

input{

  width:100%;

  padding:12px;

  margin:10px 0;

  border-radius:8px;

  border:1px solid #ccc;

  outline:none;

  font-size:1rem;

  transition:0.2s;

}

input:focus{

  border-color:#E30613;

  box-shadow:0 0 6px rgba(227,6,19,0.4);

}

/* ============================= */
/* BOTON */
/* ============================= */

button{

  width:100%;

  padding:12px;

  margin-top:12px;

  border:none;

  border-radius:8px;

  background:#E30613;

  color:white;

  font-size:1rem;

  cursor:pointer;

  transition:0.3s;

}

button:hover{

  background:#B00010;

  transform:translateY(-2px);

}

/* ============================= */
/* FOOTER LOGIN */
/* ============================= */

.login-footer{

position:fixed;
bottom:10px;
left:0;

width:100%;

text-align:center;

font-size:0.85rem;
color:#3f3f3f;

}

.login-footer p{
margin:3px 0;
}


/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width:768px){

  .login-container{
    padding:30px;
  }

}

@media (max-width:480px){

  h2{
    font-size:1.6rem;
  }

  .login-container{
    padding:25px;
    border-radius:12px;
  }

  input{
    font-size:0.95rem;
  }

  button{
    font-size:0.95rem;
  }

}

@media (max-width:350px){

  .login-container{
    padding:20px;
  }

}