/* 🌐 Imágenes generales responsivas */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 🖼️ Clase auxiliar para centrado y bordes suaves */
.img-responsive {
  margin: 0 auto;
  border-radius: 6px;
}

/* 🧱 Contenedor de comparaciones (por ejemplo Win10 vs Win11) */
.imagenes-menu {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem; /* espacio entre imágenes */
  flex-wrap: wrap;
}

.imagenes-menu img {
  max-width: 45%;
  height: auto;
  border-radius: 6px;
}

/* 📱 Ajustes especiales para pantallas menores a 768px */
@media (max-width: 768px) {

  /* Las imágenes dentro del contenedor se apilan */
  .imagenes-menu {
    flex-direction: column; /* se van una debajo de otra */
    align-items: center;
  }

  .imagenes-menu img {
    max-width: 90%; /* ocupan casi todo el ancho */
  }

  /* Ajuste de imágenes con padding-left */
  img.card-img.pl-5 {
    max-width: 100% !important; /* ocupa todo el ancho disponible */
    padding-left: 0 !important;
    display: block;
    margin: 0 auto;
  }

  /* También aplica a las imágenes generales */
  .img-responsive {
    width: 100%;
    padding: 0 10px;
  }

  .pl-5 {
    padding-left: 0 !important;
  }
  img.card-img.w-25 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}