@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  position: relative;  /* o min-height: 100vh */
  font-family: 'Nunito', sans-serif;
  background-image: url("images/background.png");
    position: relative;   /* contexto para los absolute */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.model {
  position: absolute;
  bottom: 0;
  width: 30%;           /* cada imagen ocupa 30% */
  height: 90%;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
}
.model--left  { left: 0; }
.model--right { right: 0; }

/* ── Formulario central ── */
main.login-wrapper {
  position: relative;
  z-index: 10;          /* encima de las imágenes */
  width: 100%;
  max-width: 420px;     /* ancho fijo del centro */
  margin: 0 auto;       /* centrado horizontal */
  padding: 2rem 1.5rem;
}
/* ── Sección del form ── */
.login-form-wrapper {
  width: 100%;
}

/* ── Form ── */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

/* ── Cada campo label + input ── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}

.field input[type="text"],
.field input[type="password"] {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: none;
  border-radius: 6px;
  background: #fff;
  color: #222;
  font-size: 1rem;
  outline: none;
  transition: box-shadow 0.2s;
}

.field input[type="text"]:focus,
.field input[type="password"]:focus {
  box-shadow: 0 0 0 3px #ff38c8;
}

/* ── Checkbox "Stay signed in" ── */
.field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.field--checkbox input[type="checkbox"] {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #e600a4;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.2s;
}

.field--checkbox input[type="checkbox"]:checked {
  background: #e600a4;
}

.field--checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}

.field--checkbox label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

/* ── Botón Sign In ── */
.btn-signin {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff38c8, #e600a4);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
}


.btn-signin:hover  { filter: brightness(1.12); transform: translateY(-2px); }
.btn-signin:active { transform: translateY(0); filter: brightness(0.96); }

/* ── Footer: link de registro ── */
.login-footer {
  width: 100%;
  text-align: center;
}

.login-footer p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  font-weight: 600;
}

.login-footer a {
  color: #00ffe0;
  text-decoration: underline;
  font-weight: 700;
}

.login-footer a:hover {
  color: #fff;
}
.banner_small{
    display: none;
  }
.banner_small img{
    width: 100%;
}  

@media all and (min-width:321px) and (max-width: 480px) {
    body{
        overflow:auto;
    }
  /* put your css styles in here */
  .model , .login-heading{
    display: none;
  }
  .banner_small{
    display: block;
  }
  .banner_small img{
     width:100%
  }
   main.login-wrapper{
            overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        padding: 10px;
   }
   .logo{
    display: block;
    width: 220px;
    height: auto;
    margin: 0 auto;
   }

}