/* Contenedor principal del borde animado */
.animated-border {
    position: relative;
    display: inline-block;
    border-radius: 20px;
    padding: 4px;
    background: linear-gradient(45deg, #000000, #050504, #000000, #540c0c, #242726, #2a2b2f, #322f36, #393939, #777777);
    background-size: 400% 400%;
    animation: gradient-border 10s linear infinite;
    max-width: 100%;
    margin: 20px auto;
    transition: all 0.3s ease;
}
/*.animated-border {*/
/*  position: relative;*/
/*  display: inline-block;*/
/*  border-radius: 20px;*/
/*  padding: 4px;*/
/*  background: linear-gradient(*/
/*    45deg,*/
/*    #ff0000,*/
/*    #ff7300,*/
/*    #fffb00,*/
/*    #48ff00,*/
/*    #00ffd5,*/
/*    #002bff,*/
/*    #7a00ff,*/
/*    #ff00c8,*/
/*    #ff0000*/
/*  );*/
/*  background-size: 400% 400%;*/
/*  animation: gradient-border 10s linear infinite;*/
/*  max-width: 100%;*/
/*  margin: 20px auto;*/
/*  transition: all 0.3s ease;*/
/*}*/

/* Estilos para la imagen responsive */
.responsive-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  transition: transform 0.3s ease;
}

/* Animación del gradiente */
@keyframes gradient-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Efectos hover */
.animated-border:hover {
  animation-duration: 3s;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

/* Media Queries para dispositivos móviles */
@media (max-width: 768px) {
  .animated-border {
    border-radius: 15px;
    padding: 3px;
    margin: 10px auto;
  }

  .responsive-img {
    border-radius: 13px;
  }
}

@media (max-width: 480px) {
  .animated-border {
    border-radius: 12px;
    padding: 2px;
  }

  .responsive-img {
    border-radius: 10px;
  }
}