* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  background-color: #f9f9f9;
}

.logo {
  max-width: 5rem;
}

.nav-list {
  list-style-type: none;
  display: flex;
  gap: 1rem;
}

.nav-list li a {
  text-decoration: none;
  color: #02495d;
}

.abrir-menu,
.cerrar-menu {
  display: none;
}

@media screen and (max-width: 1000px) {
  .abrir-menu,
  .cerrar-menu {
      display: block;
      border: 0;
      font-size: 1.25rem;
      background-color: transparent;
      cursor: pointer;
  }

  .abrir-menu {
      color: #02495d;
  }

  .cerrar-menu {
      color: #ececec;
  }

  .nav {
      opacity: 0;
      visibility: hidden;
      display: flex;
      flex-direction: column;
      align-items: end;
      gap: 1rem;
      position: absolute;
      z-index: 999;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: #02495d;
      padding: 2rem;
      box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
  }

  .nav.visible {
      opacity: 1;
      visibility: visible;
  }
  
  .nav-list {
      flex-direction: column;
      align-items: end;
  }

  .nav-list li a {
      color: #ecececec;
  }
}


.footer {
  background-color: #02495d;
  color: #f9f9f9;
  text-align: center;
  padding: 20px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  width: 100%; /* Asegura que ocupe el 100% del ancho */
  box-sizing: border-box; /* Incluye el padding en el ancho total */
  grid-column: 1 / -1; /* Para que se ajuste al ancho completo de la grilla */
  
}

.footer p {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* Responsivo */
@media (max-width: 768px) {
  .footer {
      padding: 15px;
      font-size: 12px;
  }
}


/* BANNER PRINCIPAL */
.banner {
  display: flex;
  flex-direction: column; /* Colocamos la imagen y el texto en columnas */
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #02495d;
  background-image: url('imagenes/banner1.jpg');
  background-size: cover;
  background-position: center;
  height: 50vh;
  padding: 20px;
  box-sizing: border-box;
}

.banner-image {
  width: 100%;
  height: 50vh;
  background-image: url('imagenes/banner1.jpg');
  background-size: cover;
  background-position: center;
}

.banner-text {
  color: #f9f9f9;
  text-align: center;
  padding: 20px;
}

.banner-text h1 {
  font-size: 3rem;
  margin: 0;
}

.banner-text p {
  font-size: 1.5rem;
  margin: 10px 0;
}

/* Aquí hacemos el cambio para pantallas pequeñas */
@media (max-width: 768px) {
  .banner {
    flex-direction: column; /* Colocamos la imagen arriba y el texto abajo */
    height: auto; /* Dejamos que el alto se ajuste al contenido */
  }

  .banner-image {
    height: 40vh; /* Reducimos un poco la altura de la imagen en pantallas pequeñas */
  }

  .banner-text h1 {
    font-size: 2.5rem; /* Ajustamos el tamaño del título */
  }

  .banner-text p {
    font-size: 1.2rem; /* Ajustamos el tamaño del subtítulo */
  }
}

@media (max-width: 480px) {
  .banner-image {
    height: 30vh; /* Aún más pequeña la imagen en pantallas pequeñas */
  }

  .banner-text h1 {
    font-size: 2rem; /* Ajustamos el título para pantallas pequeñas */
  }

  .banner-text p {
    font-size: 1rem; /* Reducimos el subtítulo */
  }
}


  
  
  
  
  /* QUIENES SOMOS */

  .about-us2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background-color: #02495d; /* Color de fondo */
  }
  
  .about-content2 {
    display: flex;
    flex-direction: row; /* Por defecto, imagen y texto estarán uno al lado del otro */
    max-width: 1200px;
    width: 100%;
    gap: 30px; /* Espacio entre la imagen y el texto */
  }
  
  .about-logo2 img {
    width: 300px; /* Tamaño de la imagen */
    height: auto;
    border-radius: 10px; /* Bordes redondeados */
  }
  
  .about-text2 {
    flex: 1;
  }
  
  .about-text2 h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #ffffff;
  }
  
  .about-text2 p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #fdffff;
  }
  
  /* Medias queries para pantallas más pequeñas */
  @media (max-width: 768px) {
    .about-content2 {
      flex-direction: column; /* En pantallas pequeñas, la imagen irá arriba y el texto abajo */
      text-align: center; /* Centra el texto */
      gap: 20px; /* Reduce el espacio entre la imagen y el texto */
    }
  
    .about-logo2 img {
      width: 100%; /* La imagen ocupará el 100% del ancho del contenedor */
      max-width: 300px; /* Limita el tamaño de la imagen en pantallas más chicas */
      margin: 0 auto; /* Centra la imagen */
    }
  
    .about-text2 h2 {
      font-size: 1.8rem; /* Ajusta el tamaño del título en pantallas pequeñas */
    }
  
    .about-text2 p {
      font-size: 1.1rem; /* Ajusta el tamaño del texto en pantallas pequeñas */
    }
  }
  
  @media (max-width: 480px) {
    .about-content2 {
      padding: 20px; /* Ajusta el padding para pantallas muy pequeñas */
    }
  
    .about-text2 h2 {
      font-size: 1.6rem; /* Tamaño del título aún más pequeño en pantallas muy pequeñas */
    }
  
    .about-text2 p {
      font-size: 1rem; /* Tamaño del texto más pequeño para que siga siendo legible */
    }
  }
  
  
  
  /* QUIENES SOMOS */
  
  .about-us {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background-color: #f9f9f9; /* Color de fondo */
  }
  
  .about-content {
    display: flex;
    flex-direction: row; /* Por defecto, imagen y texto estarán uno al lado del otro */
    max-width: 1200px;
    width: 100%;
    gap: 30px; /* Espacio entre la imagen y el texto */
  }
  
  .about-logo img {
    width: 300px; /* Tamaño de la imagen */
    height: auto;
    border-radius: 10px; /* Bordes redondeados */
  }
  
  .about-text {
    flex: 1;
  }
  
  .about-text h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #02495d;
  }
  
  .about-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #02495d;
  }
  
  /* Media queries para pantallas pequeñas */
  @media (max-width: 768px) {
    .about-content {
      flex-direction: column; /* Imagen arriba, texto abajo en pantallas pequeñas */
      text-align: center; /* Centra el texto */
      gap: 20px; /* Reduce el espacio entre imagen y texto */
    }
  
    .about-logo img {
      width: 100%; /* La imagen ocupará el 100% del contenedor */
      max-width: 300px; /* Limita el tamaño en pantallas chicas */
      margin: 0 auto; /* Centra la imagen */
    }
  
    .about-text h2 {
      font-size: 1.8rem; /* Ajusta el tamaño del título en pantallas pequeñas */
    }
  
    .about-text p {
      font-size: 1.1rem; /* Ajusta el tamaño del texto en pantallas pequeñas */
    }
  }
  
  @media (max-width: 480px) {
    .about-content {
      padding: 20px; /* Ajusta el padding para pantallas muy pequeñas */
    }
  
    .about-text h2 {
      font-size: 1.6rem; /* Tamaño del título más pequeño */
    }
  
    .about-text p {
      font-size: 1rem; /* Tamaño del texto más pequeño para mayor legibilidad */
    }
  }
  
  
   
/* Estilos para el contenedor del buscador */
.search-bar {
  display: flex; /* Para que el input y el botón queden en línea */
  align-items: center; /* Centra verticalmente el contenido */
  justify-content: center; /* Centra el contenido horizontalmente */
  background-color: transparent; /* Fondo transparente */
  gap: 1rem;
  padding: 0.5rem 0 rem; /* Espaciado interno */
  border-radius: 50px; /* Bordes redondeados (completamente circulares) */
  border: 1px solid #1c1c1c; /* Borde finito y de color oscuro */
  max-width: 300px; /* Limita el ancho del buscador */
  margin: 0 auto; /* Centra horizontalmente en la página */
}

/* Estilos para el input del buscador */
.search-bar input {
  border: none; /* Sin borde en el input */
  background-color: transparent; /* Fondo transparente para que se vea el contenedor */
  outline: none; /* Sin borde al hacer clic */
  gap: 1rem;
  padding: 0.5rem; /* Espaciado interno */
  font-size: 1rem; /* Tamaño del texto */
  width: 100%; /* Ocupa todo el espacio disponible */
}

/* Estilos para el botón de búsqueda (lupita) */
.search-bar .search-btn {
  border: none; /* Sin borde en el botón */
  background-color: transparent; /* Fondo transparente */
  cursor: pointer; /* Mano al pasar sobre el botón */
  font-size: 1.25rem; /* Tamaño del icono de la lupa */
  color: #1c1c1c; /* Color del icono */
  padding: 0.5rem; /* Espaciado a la izquierda del botón */
}

/* Estilo para el hover en la lupita */
.search-bar .search-btn:hover {
  color: #8babb4; /* Cambia de color cuando pasás el mouse por encima */
}



/* Contenedor de la sección */
.series {
    padding: 2rem 0; /* Espaciado arriba y abajo */
    background-color: #ffffff; /* Fondo de la sección */
}

/* Contenedor de opciones */
.opciones {
  margin: auto;
  }

/* Las opciones dentro de los cuadraditos */
.opcion {
    display: block;
    padding: 1rem 1.5rem; /* Relleno alrededor del texto */
    background-color: #ffffff; /* Fondo blanco para cada cuadrado */
    border-radius: 12px; /* Bordes redondeados */
    text-decoration: none; /* Quita el subrayado del enlace */
    color: #333333; /* Color del texto */
    text-align: center; /* Centra el texto */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    transition: background-color 0.3s, transform 0.3s; /* Transiciones para el hover */
    width: 150px; /* Establece un tamaño fijo para cada cuadro */
    min-width: 150px; /* Asegura que los cuadros no se hagan más pequeños de lo deseado */
}



/* Estilo para dispositivos pequeños (móviles) */
@media screen and (max-width: 768px) {
    .opciones {
        display: block; /* Las opciones en dispositivos móviles se apilan verticalmente */
        overflow-x: auto; /* Habilita el desplazamiento horizontal */
        white-space: nowrap; /* Asegura que los elementos no se rompan */
    }
    
    /* Para mejorar la visualización en móviles */
    .opcion {
        display: inline-block; /* Hace que cada opción se comporte como un bloque en línea */
        width: 150px; /* Limita el tamaño del cuadrado */
        margin-bottom: 1rem; /* Espaciado entre las opciones */
    }
}


/* Contenedor de la sección */
.series {
  padding: 30px; /* Espaciado arriba y abajo */
  background-color: #f4f4f4; /* Fondo de la sección */
  text-align: center; /* Centrado del contenido */
}

/* Contenedor de opciones, alinear las opciones horizontalmente */
.opciones {
  display: flex;
  flex-wrap: wrap; /* Permite que las opciones se ajusten en varias filas */
  gap: 1rem; /* Espacio entre los elementos */
  justify-content: center; /* Centra las opciones dentro del contenedor */
}

.opcion {
  display: flex;
  align-items: center;
  justify-content: center; /* Centra el texto dentro del cuadrado */
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  text-decoration: none;
  color: #02495d;
  font-size: 1.2rem;
  text-align: center;
  box-shadow: 0 4px 6px #8babb4;
  transition: background-color 0.3s, transform 0.3s;
  width: 20rem; /* El ancho será automático */
  min-width: 120px; /* El tamaño mínimo del cuadrado */
  height: 20rem; /* La altura será automática */
  max-width: 15rem; /* El tamaño máximo del cuadrado */
  max-height: 6rem; /* El tamaño máximo de la altura */
  word-wrap: break-word; /* Permite que las palabras largas se ajusten a la siguiente línea */
  white-space: normal; /* Permite que el texto ocupe varias líneas */
}

.opcion:hover {
  background-color: #8babb4;
  color: #f9f9f9;
  transform: scale(1.1); /* Hace un pequeño efecto al pasar el mouse */
}

.opcion:active {
  transform: scale(0.9); /* Efecto al hacer clic */
}


/* Efecto al pasar el mouse (hover) */
.opcion:hover {
  background-color: #8babb4; /* Fondo de color cuando se pasa el mouse */
  transform: scale(1.05); /* Le da un pequeño zoom al cuadrado */
  color: #f9f9f9; /* Cambia el color del texto */
}

/* Estilo para dispositivos pequeños (móviles) */
@media screen and (max-width: 768px) {
  .opciones {
      flex-direction: row; /* Hace que las opciones se apilen verticalmente */
      align-items: center; /* Centra las opciones */
  }

  .opcion {
      width: 200px; /* Ajusta el tamaño del cuadrado en móviles */
      margin-bottom: 1rem; /* Espacio entre los cuadrados en móviles */
  }
}



.recomendaciones-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Por defecto, 1 columna */
  gap: 20px; /* Espacio entre las tarjetas */
  margin-top: 40px; /* Añadido espacio entre banner y recomendaciones */
}

.libro {
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px #c7dbe1; /* Sombra sutil */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  padding: 15px; /* Añadido padding */
}

.libro img {
  width: 100%;
  height: auto;
  border-bottom: 2px solid #f9f9f9;
}

.libro h3 {
  font-size: 1.2rem;
  margin: 10px 0;
}

.libro p {
  font-size: 0.9rem;
  color: #02495d;
  margin-bottom: 15px;
}

.estrellas input {
  display: inline-block;
  cursor: pointer;
  margin: 0 2px;
}

.guardar {
  background-color: #002b80;
  color: #f9f9f9;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.guardar:hover {
  background-color: #02495d;
}

.libro:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

@media (min-width: 600px) {
  .recomendaciones-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas medianas */
  }
}

@media (min-width: 1024px) {
  .recomendaciones-container {
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en pantallas grandes */
  }
}

.estrellas {
  display: flex;
  gap: 5px;
  font-size: 30px;
}

input[type="radio"] {
  display: none;
}

label {
  color: #f9f9f9;
  cursor: pointer;
}

input[type="radio"]:checked ~ label,
input[type="radio"]:checked + label {
  color: gold;
}

input[type="radio"]:hover ~ label,
input[type="radio"]:hover + label {
  color: orange;
}

input[type="radio"]:checked:hover ~ label {
  color: gold;
}


/*audiolibros*/
.contenedor {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  padding: 20px 0;
}

.titulo h1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.titulo h2 {
  margin: 0;
  color: #02495d;
}

.titulo select {
  padding: 5px;
  font-size: 16px;
  color: #02495d;
}

.eventos-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.evento {
  display: flex;
  flex-direction: row;
  background: #f9f9f9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.evento img {
  width: 200px;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

.detalle {
  flex: 1;
  padding: 20px;
}

.detalle h3 {
  color: #02495d;
  margin: 0 0 10px 0;
  border-bottom: 1px solid #00003e;
  padding-bottom: 5px;
}

.detalle p {
  margin: 5px 0;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background-color: #002b80;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 10px;
}

.button:hover {
  background-color: 2px solid #f9f9f9;
}












/*scroll*/

.media-scroller {
  display: grid;
  gap: 2rem;
  grid-auto-flow: column;
  grid-auto-columns: 30%;
  padding: 1rem;  
  overflow-x: auto;
  height: auto;
}

.media-scroller::-webkit-scrollbar {
  height: 10px;
}

.media-scroller::-webkit-scrollbar-track {
  background: #8babb4;
  border-radius: 1rem;
}

.media-scroller::-webkit-scrollbar-thumb {
  background: #02495d;
  border-radius: 4px;
}

.media-element {
  display: grid;
  background: #8babb4;
  border-radius: 1rem;
}

.media-element img{
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
  height: 10rem;
  width: 100%;
  object-fit: cover;
}

.media-element > p {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.media-element a:hover {
  color: #8babb4;
  transition: 0.5s;
  background-color: #8babb4;
}

.snaps-inline {
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: var(--_spacer, 1rem);
}

.snaps-inline > * {
  scroll-snap-align: start;
}

/* Estilos generales para la sección */
.autores {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px 0;
}

/* Contenedor de las tarjetas */
.autores-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px; /* Espacio entre las tarjetas */
  width: 100%;
  padding: 0px;
}

/* Estilos para cada tarjeta de autor */
.autor-card {
  width: 250px; /* Ancho fijo para cada tarjeta */
  text-align: center;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px #c1d6dc;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Imagen del autor */
.autor-card img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover; /* Para asegurar que la imagen se recorte y mantenga la proporción */
  margin-bottom: 15px;
}

/* Título y descripción del autor */
.autor-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #02495d;
}

.autor-card p {
  font-size: 1rem;
  color: #02495d;
}

/* Efecto hover para las tarjetas */
.autor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px #cee1e7;
}

/* Diseño responsivo para pantallas pequeñas */
@media (max-width: 768px) {
  .autores-container {
      justify-content: space-around; /* Alinea las tarjetas en filas si el espacio es limitado */
  }

  .autor-card {
      width: 200px; /* Menor tamaño para pantallas pequeñas */
  }
}

@media (max-width: 480px) {
  .autores-container {
      flex-direction: column; /* Apila las tarjetas verticalmente */
      align-items: center;
  }

  .autor-card {
      width: 90%; /* Las tarjetas ocupan más espacio en pantallas muy pequeñas */
  }
}


.titulo-recomendaciones {
  text-align: left; /* Alineado a la izquierda */
  font-size: 2.5rem; /* Tamaño de fuente medio grande */
  font-weight: bold; /* Negrita para destacar el título */
  color: #02495d; /* Color del texto */
  margin-bottom: 20px; /* Espacio debajo del título */
  margin-top: 2rem;
  padding-left: 10px; /* Separación desde la izquierda */
  font-family: 'Arial', sans-serif; /* Tipografía elegante */
  line-height: 1.2; /* Altura de línea para que quede más compacto */
}





/* Estilos generales para la sección de contacto */
.contacto-form {
  background-color: #f9f9f9;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 8px #02495d;
  width: 100%;
  max-width: 600px;
  margin: 40px auto;
  text-align: center;
}

/* Estilo para el título */
.contacto-form h1 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  border-bottom: 2px solid #002b80;
  padding-bottom: 10px;
}

/* Contenedor de los inputs */
.input-group {
  display: flex;
  flex-direction: column; /* Para que los inputs se apilen uno debajo del otro */
  gap: 15px;
  margin-bottom: 20px;
}

/* Estilo para los inputs */
.input-group input, .contacto-form textarea {
  width: 100%; /* Hace que los inputs y textarea ocupen todo el ancho */
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
  background-color: #fff;
}

/* Estilo para el botón de enviar */
.boton1 {
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #002b80;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: inline-block; /* Para que se centre correctamente */
  margin: 0 auto; /* Centra el botón */
}

/* Efecto hover para el botón */
.boton1:hover {
  background-color: #001f66;
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 480px) {
  .input-group input, .contacto-form textarea {
    width: 100%; /* Asegura que los inputs y textarea ocupen el 100% del ancho en pantallas pequeñas */
  }

  .boton1 {
    width: 100%; /* El botón ocupará el 100% del ancho en pantallas pequeñas */
  }
}


  /* BANNER PRINCIPAL */
  .banner3 {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 40vh; /* Esto hace que ocupe toda la pantalla */
    background-image: url('imagenes/bannerfinal.jpg'); /* Acá ponés la ruta de la imagen que quieras usar */
    background-color: #02495d;
    background-size: cover; /* La imagen se ajusta a toda la pantalla */
    background-position: center; /* Centra la imagen */
  }
  
  .banner3-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #f9f9f9; /* Podés cambiar el color del texto según te guste */
  }
  
  .banner3-text h1 {
    font-size: 3rem; /* Tamaño del título */
    margin: 0;
  }
  
  .banner3-text p {
    font-size: 1.5rem; /* Tamaño del subtítulo */
    margin: 10px 0;
  }


  /* BANNER PRINCIPAL */
  .banner4 {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 50vh; /* Esto hace que ocupe toda la pantalla */
    background-image: url('imagenes/bannerfinal.jpg'); /* Acá ponés la ruta de la imagen que quieras usar */
    background-color: #02495d;
    background-size: cover; /* La imagen se ajusta a toda la pantalla */
    background-position: center; /* Centra la imagen */
  }






  /* Estilos para la sección Sobre Nosotros */
.about-us3 {
  
  padding: 50px 20px;
  text-align: left;
  margin: 40px 0;
  border-radius: 8px;
}

/* Estilo para el título */
.about-us3 h2 {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
  font-weight: bold;
  
  display: inline-block;
  padding-bottom: 10px;
}

/* Contenido del texto */
.about-content3 {
  max-width: 800px;
  margin: 0 auto;
  font-size: 18px;
  color: #555;
  line-height: 1.6;
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 480px) {
  .about-us3 {
      padding: 30px 10px;
  }

  .about-us3 h2 {
      font-size: 28px;
  }

  .about-content3 {
      font-size: 16px;
  }
}
/* Estilos generales para la sección de perfil */
.profile {
  background-color: #f8f8f8;
  padding: 40px 20px;
  text-align: center;
  margin: 40px 0;
  border-radius: 8px;
}

/* Contenedor para la imagen y la información */
.profile-container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Estilo para la imagen del perfil */
.profile-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #002b80;
  margin-bottom: 20px;
}

/* Estilo para el nombre */
.profile-info h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

/* Estilo para el título de trabajo */
.profile-info .job-title {
  font-size: 18px;
  color: #777;
  margin-bottom: 15px;
}

/* Estilo para la biografía */
.profile-info .bio {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin-top: 10px;
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 480px) {
  .profile-container {
      padding: 0 20px;
  }

  .profile-img {
      width: 120px;
      height: 120px;
      margin-bottom: 15px;
  }

  h2 {
      font-size: 22px;
  }

  .job-title {
      font-size: 16px;
  }

  .bio {
      font-size: 14px;
  }
}
/* Estilos generales para la sección de información del libro */
.book-info {
  background-color: #f9f9f9;
  padding: 40px 20px;
  text-align: center;
}

.book-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 500px;
  margin: 0 auto;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* Estilo para la imagen del libro */
.book-image img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 30px;
}

/* Estilo para los detalles del libro */
.book-details {
  max-width: 600px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Título del libro */
.book-title {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

/* Autor del libro */
.book-author {
  font-size: 18px;
  color: #777;
  margin-bottom: 15px;
}

/* Descripción del libro */
.book-description {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Contenedor de los botones */
.book-buttons {
  display: flex;
  justify-content: center;
  padding: 1rem;
}



/* Estilo para el botón "Leer" */
.read-btn, .save-btn {
  background-color: #002b80;
  color: white;
  padding: 0.6rem;
  margin-bottom: 1rem;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 48%;
}

/* Efecto al pasar el mouse sobre los botones */
.read-btn:hover, .save-btn:hover {
  background-color: #0040a1;
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
  .book-container {
      flex-direction: column;
      text-align: center;
  }

  .book-image img {
      width: 150px;
      height: 225px;
      margin-right: 0;
      margin-bottom: 20px;
  }

  .book-details {
      text-align: center;
  }

  .read-btn, .save-btn {
      width: 100%;
  }
}

  /* BANNER PRINCIPAL */
  .banner5 {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 50vh; /* Esto hace que ocupe toda la pantalla */
    background-image: url(./imagenes/banner5.jpg); /* Acá ponés la ruta de la imagen que quieras usar */
    background-color: #02495d;
    background-size: cover; /* La imagen se ajusta a toda la pantalla */
    background-position: center; /* Centra la imagen */
  }




  /* Estilo de la sección del video */
.video-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0px;
  
}

video {
  width: 100%;
  max-width: 100%; /* El video ocupará todo el ancho posible */
  height: auto; /* Mantiene la proporción del video */
  border-radius: 0px; /* Bordes redondeados, si te gusta así */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Un toque de sombra para que resalte */
}