/* -------------------- Banner -------------------- */
.banner-img {
    height: 300px; /* ajusta a la altura que quieras */
    object-fit: cover; /* la imagen se recorta para llenar el área sin deformarse */
}

.carousel-caption h5 {
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.carousel-caption p {
    font-size: 1rem;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}
.carousel-indicators{
    color: black !important;
}
/* -------------------- Libro Destacado y Categorías -------------------- */
.container-libros {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; /* centra horizontalmente */
    padding: 0 15px;
}

/* Cards individuales */
.libro-card,
.categorias-card {
    flex: 1 1 45%; /* casi la mitad cada una */
    min-width: 300px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0.5,0.5,0.8,0.8);
    transition: transform 0.3s, box-shadow 0.3s;
}

.libro-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Contenido interno con igual altura */
.libro-card .card-body,
.categorias-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Imagen del libro destacado */
.libro-destacado-img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    padding: 10px 30px;
}

/* Títulos de sección */
#cat-libros h2 {
    margin-bottom: 1rem;
    text-align: center;
}
.categorias-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
}

.categorias-list {
    display: flex;
    flex-direction: column;
}

.categoria-btn {
    display: block;
    width: 100%;
    padding: 20px 20px;
    text-align: center;
    font-size: 1.1rem;
    transition: transform 0.3s, opacity 0.3s;
    text-decoration: none;
}

.categoria-btn:hover {
    transform: scale(1.03);
    opacity: 0.7;
}
/* -------------------- Novedades -------------------- */
/* Fondo oscuro de la sección */
#novedades {
  background-color: #111;
  padding: 40px 0;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.container-novedades{
  color: #fff;
  margin-bottom: 30px;
  text-align: center;
}

/* Tarjetas */
.card-novedad {
  display: block;
  height: 300px; /* altura fija */
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.card-content {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform 0.3s ease;
}

.card-content:hover {
  transform: scale(1.05);
}

/* Overlay con el texto */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  background: rgba(0, 0, 0, 0.5); /* hace que el texto sea legible */
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* pone el texto abajo */
  transition: background 0.3s ease;
}

.card-content:hover .overlay {
  background: rgba(0, 0, 0, 0.6);
}

.overlay h5 {
  margin: 0 0 5px 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.overlay p {
  margin: 0;
  font-size: 0.9rem;
}

/* ====== Sección Libros Recientes ====== */
#recientes {
    background-color: #f8f9fa; /* mismo color que body */
    color: #333;
}

#recientes h2 {
    text-align: center;
    font-weight: 600;
    margin-bottom: 40px;
    color: #fd890d; /* acento azul */
}

/* ====== Tarjetas Libros Recientes ====== */
#carousel-libros .card {
    border: none;
    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 18rem;
    display: flex;
    flex-direction: column;
}

#carousel-libros .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

#carousel-libros .card img {
    height: 250px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.py-5{
    padding: 0 !important;
}
/* Fijar altura del contenido de la tarjeta */
#carousel-libros .card-body {
    height: 120px; /* altura fija, ajustable */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* Título y autor con overflow controlado */
#carousel-libros .card-title,
#carousel-libros .card-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* Precio fijo al final */
#carousel-libros .card-body p.fw-bold {
    margin-top: 5px;
    font-size: 1rem;
    color: #fd890d;
}

/* Controles */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    color: black !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%);
    width: 35px;
    height: 35px;
    color: black !important;
}

/* Ajustes de fila para que los items queden centrados */
#carousel-libros .carousel-item .row {
    justify-content: center;
}
/* Carousel: que las imágenes mantengan proporción y no se corten raro */
.banner-img {
    width: 100%;          /* Ocupa todo el ancho del contenedor */
    height: auto;         /* Mantiene la proporción original */
    max-height: 480px;    /* Altura máxima según tu imagen original */
    object-fit: cover;    /* Ajusta la imagen para cubrir el contenedor sin distorsionar */
}

/* Opcional: hacer que el carousel tenga altura adaptable en móviles */
@media (max-width: 768px) {
    .banner-img {
        max-height: 300px; /* Ajusta altura en tablets/móviles */
    }
}

@media (max-width: 480px) {
    .banner-img {
        max-height: 280px; /* Ajusta altura en celulares */
    }
}

/* -------------------- Responsivo -------------------- */
@media (max-width: 992px) {
    #carousel-libros .card {
        width: 14rem;
    }
}
@media (max-width: 767px) {
    .libro-card,
    .categorias-card {
        flex: 1 1 100%;
    }

    .libro-destacado-img {
        height: 220px;
        padding: 10px 15px;
    }
        #carousel-libros .card {
        width: 12rem;
    }

    #carousel-libros .carousel-control-prev,
    #carousel-libros .carousel-control-next {
        width: 7%;
    }
}