/* Estilos generales del cuerpo */
body {
  margin: 0;
  /* Elimina el margen por defecto del navegador */

  font-family: Times New Roman, sans-serif;
  /* Fuente principal del sitio */

  background-color: #F5C15B;
  /* Color de fondo suave */
}

/* Tarjeta que contiene varias imágenes */
.card-multiple {
  background-color: black;
  /* Fondo blanco para la tarjeta */

  border: 1px solid #ccc;
  /* Borde gris claro */

  border-radius: 10px;
  /* Bordes redondeados */

  width: 90%;
  max-width: 900px;
  /* Ancho máximo para evitar que se extienda demasiado */

  margin: 30px auto;
  /* Centra la tarjeta y agrega espacio superior/inferior */

  padding: 20px;
  /* Espaciado interno */

  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  /* Sombra suave para dar profundidad */

  text-align: center;
  /* Centra el texto y las imágenes */
}

/* Contenedor de las 4 imágenes */
.card-multiple .imagenes {
  display: flex;
  /* Usa flexbox para organizar las imágenes en fila */

  flex-wrap: wrap;
  /* Permite que se acomoden en varias filas si no caben en una sola */

  gap: 10px;
  /* Espacio entre imágenes */

  justify-content: center;
  /* Centra las imágenes horizontalmente */
}

/* Estilo de cada imagen dentro de la tarjeta */
.card-multiple img {
  width: calc(25% - 10px); /* 4 columnas */
  height: 200px;/* Misma altura */
  /* Altura fija de cada imagen */

  object-fit: cover;
  /* Recorta la imagen para que llene el espacio sin deformarse */

  border-radius: 5px;
  /* Bordes redondeados para suavizar el diseño */
  transition: transform .3s ease;
}

/* Efecto al pasar el mouse */
.card-multiple img:hover {
    transform: scale(2.05);
}

/* Descripción debajo de las imágenes */
.card-multiple .descripcion {
  margin-top: 15px;
  /* Espacio entre las imágenes y el texto */

  font-size: 25px;
  /* Tamaño de fuente moderado */

  color: #FFFFFF;
  /* Color gris oscuro para buena legibilidad */
}