/* Estilos para las nuevas tarjetas de beneficios en la página de inicio */
.benefit-card {
  border-radius: 18px; /* Esquinas redondeadas */
  overflow: hidden; /* Asegura que la imagen no se salga de los bordes redondeados */
  border: 3px dashed transparent; /* Borde inicial invisible pero que ocupa espacio */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.benefit-card:hover {
  border-color: #0969da; /* Borde azul punteado al pasar el cursor */
  transform: translateY(-8px) scale(1.02); /* Efecto de elevación */
  box-shadow: 0 10px 30px rgba(9, 105, 218, 0.25); /* Sombra azulada para resaltar */
}

.benefit-card img {
  display: block; /* Elimina espacios extra debajo de la imagen */
  width: 100%;
  height: auto;
}

/* Estilos para el carrusel de ancho completo */
.carousel-full-width {
  margin-top: 0;
}

.carousel-full-width .carousel-item img {
  /* Ya no forzamos una altura ni un recorte.
     La imagen se mostrará completa y su altura
     se ajustará automáticamente al ancho de la pantalla. */
  width: 100%;
  height: auto;
}

/* El media query para móviles ya no es necesario al no tener una altura fija,
   así que puedes eliminarlo si quieres. */