/* Contenedor de tarjetas */
.card-container {
  display: flex;              /* Usar flexbox para filas */
  flex-wrap: wrap;            /* Permite que las tarjetas se acomoden en varias filas */
  gap: 20px;                  /* Espacio entre tarjetas */
  justify-content: center;    /* Centrar tarjetas horizontalmente */
}

/* Estilo para cada tarjeta */
.card {
  width: 180px;               /* Ancho fijo */
  text-align: center;         /* Texto centrado */
  cursor: pointer;            /* Cursor tipo mano */
  border-radius: 10px;        /* Bordes redondeados */
  background-color: #b3e5fc;  /* Fondo celeste muy claro */
  padding: 10px;              /* Espacio interno */
  box-shadow: 0 2px 6px rgba(2, 119, 189, 0.3); /* Sombra sutil */
  transition: box-shadow 0.3s ease; /* Transición suave para sombra */
}

/* Efecto hover para la tarjeta */
.card:hover {
  box-shadow: 0 5px 15px rgba(2, 119, 189, 0.6); /* Sombra más grande y visible */
}

/* Imagen dentro de la tarjeta */
.card img {
  max-width: 100%;            /* La imagen no excede el ancho de la tarjeta */
  border-radius: 8px;         /* Bordes redondeados */
  transition: transform 0.3s ease; /* Transición suave para efecto hover */
}

/* Efecto hover para la imagen */
.card img:hover {
  transform: scale(1.05);     /* Agranda ligeramente la imagen */
}

/* Nombre o título debajo de la imagen */
.name {
  margin-top: 10px;           /* Separación arriba */
  font-weight: 700;           /* Texto en negrita */
  color: #01579b;             /* Azul oscuro */
}

/* Contenedor para la información del producto */
#infoProducto {
  margin-top: 40px;           /* Separación superior */
  padding: 20px;              /* Espaciado interno */
  border-top: 3px solid #03a9f4; /* Línea superior azul */
  background-color: #e1f5fe;  /* Fondo celeste muy claro */
  color: #0277bd;             /* Texto azul */
  max-width: 600px;           /* Ancho máximo */
  margin-left: auto;          /* Centrado horizontal */
  margin-right: auto;
  border-radius: 12px;        /* Bordes redondeados */
  box-shadow: 0 3px 8px rgba(2, 119, 189, 0.2); /* Sombra sutil */
  font-size: 18px;            /* Tamaño de texto */
}

/* Estilo del título dentro de la info del producto */
#infoProducto h3 {
  margin-bottom: 15px;        /* Espacio abajo */
  border-bottom: 3px solid #03a9f4; /* Línea azul debajo */
  padding-bottom: 6px;        /* Espacio interno abajo */
  color: #01579b;             /* Azul oscuro */
}

/* Párrafos dentro de la info del producto */
#infoProducto p {
  margin: 6px 0;              /* Margen vertical */
  font-weight: 500;           /* Fuente semi negrita */
}

/* Botón para volver o salir */
.boton-volver {
  display: block;             /* Ocupa toda la línea */
  margin: 30px auto;          /* Centrado horizontal con margen vertical */
  background-color: #03a9f4; /* Fondo azul */
  border: none;               /* Sin borde */
  color: white;               /* Texto blanco */
  padding: 12px 25px;         /* Espacio interno */
  font-size: 18px;            /* Tamaño de texto */
  border-radius: 8px;         /* Bordes redondeados */
  cursor: pointer;            /* Cursor mano */
  transition: background-color 0.3s ease; /* Transición suave para hover */
}

/* Efecto hover para el botón volver */
.boton-volver:hover {
  background-color: #0288d1;  /* Azul más oscuro */
}

/* Estilos responsivos para pantallas pequeñas */
@media (max-width: 768px) {
  .card-container {
    flex-direction: column;  /* Las tarjetas se apilan verticalmente */
    align-items: center;     /* Centrado horizontal */
  }

  .card {
    width: 80%;              /* Tarjetas más anchas y adaptables */
  }
}