/* Estilos propios del sitio, sobre Bootstrap 5. Sin build de Sass: se edita
   este archivo directamente, igual que en /entradas/2026/assets/css/custom.css. */

.hero-search-band h1 {
    font-size: clamp(1.25rem, 4vw, 2.25rem);
    font-weight: 700;
}

.hero-search .form-control,
.hero-search .form-select {
    min-height: 3rem;
}

/* Bootstrap ya oculta con display:none las slides no activas del carrusel
   (evita que el navegador priorice imágenes fuera de pantalla), y cada
   .carousel-item mide lo mismo que su propia imagen — por eso el caption no
   necesita alto fijo ni overlay aparte como pasaba con el Hero anterior. */
.hero .carousel-caption {
    background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
    border-radius: .25rem;
    padding-bottom: 1rem;
}

.hero .carousel-caption h2 {
    font-weight: 700;
}

@media (min-width: 768px) {
    .hero .carousel-caption {
        padding-bottom: 3rem;
    }

    .hero .carousel-caption h2 {
        font-size: 2.5rem;
    }

    .hero .carousel-caption .btn {
        font-size: 1rem;
        padding: .5rem 1.25rem;
    }
}

.card-pelicula {
    height: 100%;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.card-pelicula img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    width: 100%;
}

.card-pelicula .badge-estreno {
    position: absolute;
    top: .5rem;
    right: .5rem;
}

.card-sala img {
    height: 90px;
    width: auto;
    object-fit: contain;
}

.card-promo {
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.card-promo img {
    aspect-ratio: 16 / 6;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 575.98px) {
    .hero-search-band {
        padding: 1.25rem 0;
    }
}