.login-container-v2 {
    background-color: white;
    border-radius: 15px;
    border-color: #cac7c7;
    border-width: 1px;
    border-style: solid;
    padding: 30px;
    margin-top: 50px; 
    margin-bottom: 50px;
}

.form-signin-social i {
  font-size: 30px;
}

.signup-image {
  display: block;
  text-align: center;
}

.socialMedia div {
  margin-top: 10px;
}

.socialMedia {
  margin-left: auto;
  margin-right: auto;
}

.login-hero{
  position: relative;
  background-image: url("../img/signup/datlas-maps_2.webp");
  overflow: hidden;
  background-repeat: no-repeat;     /* evita que la imagen se repita */
  background-size: cover;           /* opcional: hace que cubra todo el contenedor */
  background-position: center;      /* opcional: centra la imagen */
}

.login-hero > *:not(#datlasCanvas){
  position: relative;
  z-index: 2;
}

#datlasCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.login-card{
  position: relative; z-index: 2;
  max-width: 420px; margin: 0 auto; padding: 24px;
  background: rgba(255,255,255,0.9); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.icon-datlas {
  display: inline-block; /* necesario para que se vea */
  width: 24px;           /* dale tamaño */
  height: 24px;
  background: url("../img/icons/datlas_logo.svg") no-repeat center / contain;
  vertical-align: middle;   /* alinea con el texto */
}

/* Gradiente blanco */
.white-gradient {
  background: transparent
}

/* Animación */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }  /* 6 es el número de imágenes */
}

/* Slider */
.slider {
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
}

.slider::before,
.slider::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

.slider .slide-track {
  animation: scroll 40s linear infinite; /* $animationSpeed reemplazado por 40s */
  display: flex;
  width: calc(150px * 6 * 2); /* 6 es el número de imágenes, 2 es para duplicarlas */
}

.slider .slide {
  height: 100px;
  width: 150px;
}


@media (max-width: 422px) {
  .icon-datlas {
    display: none;
  }
}

@media (max-width: 768px) { 
  .vertical-line {
    border-top: 2px solid #f6f6f6;
  }

  .responsive {
      width: 100%;
      height: auto;
    }

  .login-container-v2 {
    background-color: white;
    border-radius: 15px;
    border-color: #cac7c7;
    padding: 30px;
    border-width: 1px;
    border-style: solid;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 0;
    margin-right: 0;
  }

  .datlas_logos {
    margin:-10px;
  }

  .datlas_img img{
    -moz-transform:scale(0.6);
    -webkit-transform:scale(0.6);
    transform:scale(0.6);
  }

  .datlas_img_small {
    margin-top: -15px;
  }

  .slider::before,
  .slider::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100px;
    position: absolute;
    width: 50px;
    z-index: 2;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .socialMedia{
    max-width: 20vw;
  }

  .vertical-line {
    border-top: 2px solid #f6f6f6;
  }

  .responsive {
      width: 100%;
      height: auto;
    }

  .login-container-v2 {
    background-color: white;
    border-radius: 15px;
    border-color: #cac7c7;
    padding: 30px;
    border-width: 1px;
    border-style: solid;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 0;
    margin-right: 0;
  }

  .datlas_logos {
    margin:-30px;
  }

  .datlas_img img{
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
  }

  .datlas_img_small {
    margin-top: -30px;
  }
}
@media (min-width: 993px) and (max-width: 1200px) { 
  .socialMedia{
    max-width: 30vw;
  }

  .responsive {
    width: 80%;
    height: auto;
  }

  .datlas_logos {
    margin:-15px;
  }

  .datlas_img img{
    -moz-transform:scale(0.7);
    -webkit-transform:scale(0.7);
    transform:scale(0.7);
  }

  .datlas_img_small {
    margin-top: -22px;
  }
}
@media (min-width: 1200px) { 
  .socialMedia{
    max-width: 20vw;
  }

  .datlas_logos {
    margin:-15px;
  }

  .datlas_img img{
    -moz-transform:scale(0.6);
    -webkit-transform:scale(0.6);
    transform:scale(0.6);
  }

  .datlas_img_small {
    margin-top: -25px;
  }
}