/* Diseño general */
.intro-en_linea {
  width: 100%;
  position: relative; /* Permite posicionar el contenido dentro de este contenedor */
}

.container-en_linea .banner-en_linea {
  width: 100%;
  height: auto;
  max-height: 500px; /* Limita la altura máxima a 500px */
  object-fit: cover; /* Mantiene el estilo de ajuste */
  max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
  filter: brightness(60%); /* Hacer la imagen más oscura */
  display: block; /* Asegura que la imagen sea un bloque que ocupa todo el ancho */
}

/* SEPARACION */

.container-en_linea .imagen-separacion-linea-container {
  position: relative;
  width: 100%;
  height: auto;
}

.container-en_linea .imagen-separacion {
  width: 100%;
  display: block;
  margin: 0 auto;
  margin-top: 0.5vw;
  margin-bottom: 2vw;
  filter: brightness(40%); /* Hacer la imagen más oscura */
}

.container-en_linea .titulo-separacion-contac {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  border-bottom: 5px solid #f07d06; /* Línea debajo del título */
  display: inline-block;
  width: fit-content; /* Ajusta el ancho de la línea al contenido del texto */
  padding-left: 10px; /* Opcional: Agrega espacio a la izquierda de la línea */
  padding-right: 10px; /* Opcional: Agrega espacio a la derecha de la línea */
  white-space: nowrap; /* Evita que el texto haga salto de línea */
}

/* BIBLIOTECARIOS */

.en_linea-new {
  padding: 0;
  margin-top: 50px;
  margin-bottom: 70px;
  box-sizing: border-box;
  text-align: center; /* Centra contenido */
}

.container_en_linea h2 {
  color: #32398e;
  font-weight: bold;
  padding: 30px;
  text-align: center;
  margin-bottom: 0;
}

.container_en_linea {
  max-width: 70%;
  margin: 0 auto;
}

.card {
  box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 2px 0px;
  margin: 0 auto 20px auto;
  width: 100%;
  margin-bottom: 4vw;
}

/* Ajusta todas las tarjetas al mismo tamaño */
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* Hace que todas las columnas tengan el mismo tamaño */
}

/* Hace que las tarjetas ocupen toda la altura de su contenedor */
.col-md-4 {
  display: flex;
}

.card-body {
  padding: 15px;
}

.card-body h5 {
  font-size: 1.2em;
  margin: 10px 0;
  font-weight: bold;
  color: #32398e;
}

.card-body p {
  font-size: 0.8em;
  margin: 10px 0;
}

.en_linea-new {
  text-align: center; /* Centrar contenido */
}

.en_linea-new a,
.row a {
  /* display: flex; */
  display: inline-block; /* Permite ajustar el ancho al contenido */
  justify-content: center;
  text-decoration: none;
}

.section-ver-mas {
  float: right; /* Mueve la sección a la derecha */
  margin-top: 20px;
  background-color: transparent; /* Fondo transparente */
  color: #32398e; /* Color del texto */
  border: none; /* Sin borde */
  padding: 0; /* Sin espaciado interno */
  cursor: pointer; /* Cambiar el cursor a pointer */
  font-size: 1em; /* Ajusta el tamaño de fuente según sea necesario */
  font-weight: bolder;
  transition: color 0.3s ease; /* Transición suave para el hover */
}

.section-ver-mas:hover {
  color: #f07d06; /* Cambia el color del texto al pasar el ratón */
}

.section-button {
  margin-top: 5px;
  background-color: #32398e; /* Color de fondo */
  color: white; /* Color del texto */
  border: none; /* Sin borde */
  padding: 10px 20px; /* Espaciado interno */
  border-radius: 20px; /* Puntas ovaladas */
  cursor: pointer; /* Cambiar el cursor a pointer */
}

.section-button:hover {
  background-color: #f07d06; /* Color de fondo al pasar el ratón */
}

/* Media Queries */

@media screen and (max-width: 1080px){
  .container-en_linea .titulo-separacion-contac{
    font-size: 2rem;
  }
}

@media screen and (max-width: 840px){
  .container-en_linea .titulo-separacion-contac{
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 780px){
  .container-en_linea .titulo-separacion-contac{
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 650px){
  .container-en_linea .titulo-separacion-contac{
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 501px){
  .container-en_linea .titulo-separacion-contac{
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 420px){
  .container-en_linea .titulo-separacion-contac{
    font-size: 1.3rem;
  }
}

@media (max-width: 300px) {
  .intro-en_linea h2 {
    font-size: 1rem;
  }
}