.banner-cuentas {
  width: 100%;           /* Ocupa todo el ancho disponible */
  height: 400px;         /* Altura fija del banner */
  overflow: hidden;      /* Oculta el contenido que se salga del área */
}

.banner-cuentas .banner-img {
  width: 100%;           /* Imagen ocupa todo el ancho del contenedor */
  height: 100%;          /* Imagen ocupa toda la altura del contenedor */
  object-fit: cover;     /* La imagen se recorta para llenar el espacio sin distorsión */
}

/* Sección de tarjetas de cuentas*/
.cuentas-section {
  padding: 60px 20px;     /* Espaciado interno arriba/abajo 60px, lados 20px */
  max-width: 1200px;      /* Ancho máximo del contenedor */
  margin: auto;           /* Centra horizontalmente */
  text-align: center;     /* Centra el texto en el contenedor */
}

.cuentas-section h1 {
  color: #003566;         /* Color azul fuerte para el título */
  margin-bottom: 40px;    /* Espacio debajo del título */
}

.cuentas-grid {
  display: grid;                          /* Se usa grid layout */
  grid-template-columns: repeat(2, 1fr);  /* 2 columnas de igual tamaño */
  gap: 20px;                              /* Espacio entre columnas/filas */
  grid-template-rows: auto auto auto;     /* Altura automática en las filas */
}

/* Tarjeta 1: Cuenta Corriente  */
.cuenta-card1 {
  background-image: url(/img/ahorro.png);      /* Imagen de fondo para la tarjeta */
  border: 1px solid #ccc;                 /* Borde gris claro */
  border-radius: 10px;                    /* Bordes redondeados */
  padding: 30px 20px;                     /* Espaciado interno */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Sombra suave */
  display: flex;                          /* Flexbox layout para su contenido */
  flex-direction: column;                /* Organiza verticalmente */
  justify-content: space-between;        /* Distribuye el espacio */
  height: 760px;                          /* Altura fija mayor que otras tarjetas */
  text-align: left;                      /* Alinea texto a la izquierda */
  text-size-adjust: 6;                   /* (Propiedad inválida, puede omitirse) */
}

/* Tarjeta 2: Cuenta de Ahorros  */
.cuenta-card {
  background-image: url(/img/corriente.png);   /* Imagen de fondo para esta tarjeta */
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 30px 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 760px;
  text-align: left;
  text-size-adjust: 6; /* (No es válida en CSS estándar, se puede eliminar) */
}

/*Títulos de tarjetas*/
.cuenta-card h2,
.cuenta-card1 h2 {
  color: #03045E;         /* Azul oscuro para los títulos */
  margin-bottom: 10px;    /* Espacio debajo del título */
}

/* Párrafos de tarjetas*/
.cuenta-card p,
.cuenta-card1 p {
  margin-bottom: 15px;    /* Espacio debajo del párrafo */
  color: #333;            /* Gris oscuro para el texto */
}

/* Botones de enlace en tarjetas*/
.cuenta-card a,
.cuenta-card1 a {
  margin-top: auto;                 /* Empuja el botón al fondo si hay espacio */
  background-color: #0077B6;        /* Color de fondo azul claro */
  color: white;                     /* Texto blanco */
  padding: 10px 16px;               /* Espaciado interno */
  border-radius: 5px;               /* Bordes redondeados */
  text-decoration: none;           /* Sin subrayado */
  transition: background 0.3s ease;/* Transición suave al pasar el mouse */
  display: inline-block;           /* Permite aplicar padding y margen correctamente */
}

/*Efecto hover para los botones */
.cuenta-card a:hover,
.cuenta-card1 a:hover {
  background-color: #03045E;       /* Cambia a azul más oscuro */
  color: white;                    /* Mantiene el texto blanco */
}

/* Tarjeta horizontal (tercera tarjeta) */
.cuenta-card-horizontal {
  display: flex;                   /* Usa flexbox horizontal */
  flex-direction: row;            /* Alineación horizontal */
  gap: 20px;                       /* Espacio entre imagen y contenido */
  align-items: center;            /* Centra verticalmente */
  background: white;              /* Fondo blanco */
  border: 1px solid #ccc;         /* Borde gris claro */
  border-radius: 10px;            /* Bordes redondeados */
  padding: 20px;                  /* Espaciado interno */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Sombra suave */
  height: 380px;                  /* Altura fija */
  grid-column: span 2;            /* Ocupa las dos columnas del grid */
}

/* Imagen dentro de la tarjeta horizontal*/
.cuenta-card-horizontal img {
  width: 40%;                     /* Ocupa el 40% del ancho de la tarjeta */
  height: 100%;                   /* Ocupa toda la altura disponible */
  object-fit: cover;              /* Ajusta sin deformar */
  border-radius: 10px;            /* Bordes redondeados */
}

/* Contenedor del contenido de la tarjeta horizontal  */
.cuenta-horizontal-content {
  flex: 1;                        /* Ocupa todo el espacio restante */
}

/* Título dentro de la tarjeta horizontal */
.cuenta-horizontal-content h2 {
  color: #003566;                /* Color azul fuerte */
  margin-bottom: 10px;           /* Espaciado debajo del título */
}

/* Texto de la tarjeta horizontal  */
.cuenta-horizontal-content p {
  margin-bottom: 15px;           /* Espacio debajo del párrafo */
  color: #333;                   /* Color de texto gris oscuro */
}

/* Botón/enlace en la tarjeta horizontal*/
.cuenta-horizontal-content a {
  background-color: #0077B6;     /* Fondo azul claro */
  color: white;                  /* Texto blanco */
  padding: 10px 16px;            /* Espaciado interno */
  border-radius: 5px;            /* Bordes redondeados */
  text-decoration: none;         /* Sin subrayado */
  transition: background-color 0.3s ease; /* Transición al pasar el mouse */
}

/* Efecto hover del botón horizontal*/
.cuenta-horizontal-content a:hover {
  background-color: #03045E;     /* Cambia a azul más oscuro */
  color: white;                  /* Mantiene texto blanco */
}