.banner-prestamos {
  width: 100%;                  /* Hace que el banner ocupe todo el ancho disponible de la pantalla. */
  height: 400px;                /* Fija una altura de 400 píxeles para el banner. */
  overflow: hidden;             /* Oculta cualquier parte de la imagen que se salga de las dimensiones del banner. */
}

.banner-prestamos img {
  width: 100%;                  /* La imagen ocupa el 100% del ancho de su contenedor (.banner-prestamos). */
  height: 100%;                 /* La imagen ocupa el 100% de la altura de su contenedor. */
  object-fit: cover;            /* Redimensiona la imagen para que cubra todo el espacio sin deformarse, recortando si es necesario. */
}

/* Contenedor principal de la sección*/

.prestamos-section {
  max-width: 1200px;            /* Establece un ancho máximo de 1200px para evitar que se estire demasiado en pantallas grandes. */
  margin: 0 auto;               /* Centra la sección horizontalmente en la página (el '0' quita el margen superior/inferior). */
  padding: 40px 20px;           /* Agrega un espaciado interno: 40px arriba/abajo y 20px a los lados. */
}

.prestamos-section h1 {
  text-align: center;           /* Centra el texto del título horizontalmente. */
  margin-bottom: 40px;          /* Agrega un espacio de 40px debajo del título para separarlo del contenido. */
  font-size: 2.5rem;            /* Define el tamaño de la fuente (2.5 veces el tamaño de la fuente raíz del navegador). */
  color: #03045E;               /* Establece el color del texto a un azul oscuro. */
}

/*Grid de tarjetas (2x2 + 1 horizontal)*/

.prestamos-grid {
  display: grid;                /* Activa el layout de CSS Grid, permitiendo organizar elementos en filas y columnas. */
  grid-template-columns: repeat(2, 1fr); /* Crea una cuadrícula con 2 columnas de igual ancho (1 fracción del espacio disponible cada una). */
  grid-gap: 30px;               /* Define un espacio de 30px entre cada una de las celdas de la cuadrícula. */
}

/* Tarjetas de Préstamo Verticales*/

.prestamo-card {
  background-image: url(/img/fondop.jpg); /* Establece una imagen de fondo para la tarjeta. */
  padding: 25px;                /* Agrega un espaciado interno de 25px en todos los lados. */
  border-radius: 15px;          /* Redondea las esquinas de la tarjeta con un radio de 15px. */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Agrega una sombra sutil para dar un efecto de profundidad. */
  height: 380px;                /* Fija la altura de la tarjeta en 380px. */
  display: flex;                /* Activa Flexbox para alinear y distribuir el contenido interno. */
  flex-direction: column;       /* Apila los elementos hijos verticalmente, uno sobre otro. */
  justify-content: space-between; /* Distribuye los elementos hijos a lo largo del eje vertical, con espacio uniforme entre ellos. */
}

.prestamo-card h2 {
  font-size: 1.5rem;            /* Define el tamaño de la fuente para el título de la tarjeta. */
  color: #0077B6;               /* Establece el color del texto a un tono de azul. */
}

.prestamo-card p {
  font-size: 1rem;              /* Define el tamaño de la fuente para el párrafo (tamaño estándar). */
  color: #333;                  /* Establece el color del texto a un gris oscuro, para buena legibilidad. */
  margin: 10px 0;               /* Agrega un margen de 10px arriba y abajo del párrafo. */
}

.prestamo-card a {
  margin-top: auto;             /* Empuja el botón (enlace) hacia la parte inferior del contenedor flexible. */
  align-self: flex-start;       /* Alinea el botón a la izquierda dentro de su contenedor. */
  background-color: #6c63ff;    /* Define el color de fondo del botón. */
  color: #fff;                  /* Define el color del texto del botón a blanco. */
  padding: 10px 20px;           /* Agrega espaciado interno al botón (10px arriba/abajo, 20px a los lados). */
  border-radius: 10px;          /* Redondea las esquinas del botón. */
  transition: 0.3s;             /* Agrega una transición suave de 0.3 segundos para cualquier cambio de propiedad (como el hover). */
  font-weight: bold;            /* Pone el texto del botón en negrita. */
}

.prestamo-card a:hover {
  background-color: #03045E;    /* Cambia el color de fondo del botón a azul oscuro cuando el cursor pasa sobre él. */
}

/* Tarjeta de Préstamo Horizontal */

.prestamo-card-horizontal {
  grid-column: span 2;          /* Hace que esta tarjeta ocupe el espacio de 2 columnas en la cuadrícula principal. */
  display: flex;                /* Activa Flexbox para alinear la imagen y el contenido uno al lado del otro. */
  background-color: #ffffff;    /* Establece un color de fondo blanco para la tarjeta. */
  border-radius: 15px;          /* Redondea las esquinas de la tarjeta. */
  overflow: hidden;             /* Oculta cualquier contenido (como la imagen) que se salga de los bordes redondeados. */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Agrega una sombra sutil para dar profundidad. */
  height: 380px;                /* Fija la altura de la tarjeta en 380px. */
}

.prestamo-card-horizontal img {
  width: 50%;                   /* Hace que la imagen ocupe la mitad del ancho de la tarjeta. */
  object-fit: cover;            /* Redimensiona la imagen para que cubra su área (el 50% de la tarjeta) sin deformarse. */
}

.prestamo-horizontal-content {
  padding: 25px;                /* Agrega un espaciado interno de 25px al contenedor del texto. */
  display: flex;                /* Activa Flexbox para alinear el contenido de texto. */
  flex-direction: column;       /* Apila los elementos (título, párrafo, botón) verticalmente. */
  justify-content: center;      /* Centra los elementos verticalmente dentro del contenedor. */
}

.prestamo-horizontal-content h2 {
  font-size: 1.8rem;            /* Define el tamaño de la fuente para el título. */
  color: #0077B6;               /* Establece el color del texto a un tono de azul. */
}

.prestamo-horizontal-content p {
  margin: 10px 0;               /* Agrega un margen vertical de 10px al párrafo. */
  color: #333;                  /* Establece el color del texto a gris oscuro. */
}

.prestamo-horizontal-content a {
  background-color: #6c63ff;    /* Define el color de fondo del botón. */
  color: #fff;                  /* Define el color del texto del botón a blanco. */
  padding: 10px 20px;           /* Agrega espaciado interno al botón. */
  border-radius: 10px;          /* Redondea las esquinas del botón. */
  width: fit-content;           /* Ajusta el ancho del botón para que encaje con su contenido. */
  font-weight: bold;            /* Pone el texto del botón en negrita. */
  transition: 0.3s;             /* Agrega una transición suave para el efecto hover. */
}

.prestamo-horizontal-content a:hover {
  background-color: #03045E;    /* Cambia el color de fondo del botón a azul oscuro al pasar el cursor sobre él. */

}