/* ==========================================================
   GUÍA DE SELECCIÓN - título como overlay dentro de la imagen
   Solo afecta a .banner-card-1 (no toca banner-card-B ni otras secciones).
   Pégalo AL FINAL de tu CSS para que sobrescriba las reglas anteriores.
   ========================================================== */

.banner-card-1 .banner-wrapper-1 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Franja blanca: pequeña en reposo, grande en hover */
.banner-card-1 .banner-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 40px;               /* franja pequeña (reposo) */
    margin: 0;
    padding: 0;

    background: rgba(255, 255, 255, 1);
    color: #111;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-align: center;

    transition:
        height 0.45s cubic-bezier(0.2, 1, 0.3, 1),
        font-size 0.45s cubic-bezier(0.2, 1, 0.3, 1),
        background 0.3s ease;
}

/* Línea decorativa: oculta en reposo */
.banner-card-1 .banner-title::after {
    bottom: 22%;
    opacity: 0;
    transform: translateX(-50%) scaleX(0);
    transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 1, 0.3, 1);
}

/* Hover: la franja crece a la altura original (~108px) y aparece la línea */
.banner-card-1 .banner-wrapper-1:hover .banner-title {
    height: 108px;
    background: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    padding-bottom: 14px;
}

.banner-card-1 .banner-wrapper-1:hover .banner-title::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

/* La imagen mantiene su zoom suave en hover */
.banner-card-1 .banner-wrapper-1:hover .banner-img {
    transform: scale(1.05);
}

/* Pantallas táctiles (sin hover): se queda la franja pequeña, sin línea */
@media (hover: none) {
    .banner-card-1 .banner-wrapper-1:hover .banner-title {
        height: 40px;
        font-size: 0.7rem;
        padding-bottom: 0;
    }
    .banner-card-1 .banner-wrapper-1:hover .banner-title::after {
        opacity: 0;
    }
}

/* Móvil: franja un poco más compacta */
@media (max-width: 430px) {
    .banner-card-1 .banner-title {
        height: 30px;
        font-size: 0.6rem;
        letter-spacing: 0.1em;
    }
}