:root {
    --padding-container: 100px 0;

    /* Colores universales */
    --color-black: #000000;
    --color-dark-gray: #1f1f1f;
    --color-gray: #3f3f3f;
    --color-red: #ff1111;
    --color-dark-red: #bb0006;
    --color-white: #ffffff;
    --color-dark-white: #bdbdbd;

    --color-title: var(--color-dark-gray);
}

.boton-aumentar {
    /* 1. Transición suave para el cambio de tamaño */
    transition: transform 0.3s ease, background-color 0.3s ease;

  }

  /* 2. Efecto al pasar el cursor (hover) */
.boton-aumentar:hover {
    transform: scale(1.1); /* Aumenta el tamaño un 10% */
    background-color: var(--color-dark-red); /* Cambia ligeramente de color */
  }

.btn-aumentar {
    /* 1. Transición suave para el cambio de tamaño */
    transition: transform 0.3s ease, background-color 0.3s ease;

  }

  /* 2. Efecto al pasar el cursor (hover) */
.btn-aumentar:hover {
    transform: scale(1.1); /* Aumenta el tamaño un 10% */
    background-color: var(--color-dark-white); /* Cambia ligeramente de color */
  }

.filtro-oscuro {
  position: relative;
}

.filtro-oscuro::after {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.6); /* nivel de oscuridad */
  pointer-events: none; /* permite hacer clic en el contenido */
}

/*ANIMACIONES*/
.fade-in {
    opacity: 0;
    animation: aparecer 0.8s ease forwards;
}

@keyframes aparecer {
    to {
        opacity: 1;
    }
}

.animar {
    opacity: 0;
    transform: translateY(20px);
    animation: entrada 0.6s ease forwards;
}

@keyframes entrada {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.producto {
    opacity: 0;
    transform: translateY(20px);
    animation: entrada 0.6s ease forwards;
}

.producto:nth-child(1) { animation-delay: 0.1s; }
.producto:nth-child(2) { animation-delay: 0.2s; }
.producto:nth-child(3) { animation-delay: 0.3s; }
.producto:nth-child(4) { animation-delay: 0.4s; }
.producto:nth-child(5) { animation-delay: 0.5s; }
.producto:nth-child(6) { animation-delay: 0.6s; }

@keyframes entrada {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Estado inicial (oculto) */
.img-anim {
  opacity: 0;
  transition: all 1s ease-out; /* Controla la suavidad aquí */
}

/* De izquierda a derecha */
.slide-in-left {
  transform: translateX(-100px);
}

/* De derecha a izquierda */
.slide-in-right {
  transform: translateX(100px);
}

/* Clase que activaremos con JavaScript */
.img-anim.show {
  opacity: 1;
  transform: translateX(0);
}