/* ===== Tu CSS original ===== */
.image-box.image-hover .image img {
    -moz-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

.image-box .image img {
    position: relative;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    width: 100%;
    z-index: 1;
}
.image-box .hover {
    position: absolute;
    top: 50%;
    left: 30px;
    right: 30px;
    -moz-transform: translate3d(0, -50%, 0);
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    color: #fff;
    z-index: 3;
    text-align: center;
}

.dark { color: #fff; }

.image-box .image {
    position: relative;
    background: #000000;
    overflow: hidden;
}

.bg-black { background-color: #000000; }

.image-box {
    position: relative;
    overflow: hidden;
}

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

/* ===== Nuevo: mobile-overlay (oculto por defecto) ===== */
.mobile-overlay {
    display: none;                /* oculto en desktop por defecto */
}

/* estilo del h5 dentro del overlay (ajusta tamaños si quieres) */
.mobile-overlay h5 {
    margin: 0;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1.2;
    text-align: center;
}

p.lead {
    font-size: 20px;
    margin-bottom: 25px;
}


/* ===== Reglas para móviles (muestra el overlay y oculta hover) ===== */
@media (max-width: 768px) {
    /* Ocultamos el hover original (evita duplicados visuales) */
    .image-box .hover {
        display: none !important;
        opacity: 0 !important;
        filter: none !important;
    }

    /* Quitar transform/zoom de la imagen */
    .image-box.image-hover .image img {
        transform: none !important;
    }
    .image-box .mobile-overlay {
        display: flex !important;
        position: absolute;
        inset: 0; /* top:0; right:0; bottom:0; left:0 */
        flex-direction: column; /* para que h5 y p queden en columna */
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,0.6); /* fondo oscuro completo */
        z-index: 999 !important;
        padding: 15px;
        box-sizing: border-box;
        text-align: center;
    }

    .mobile-overlay h5 {
         margin: 0 0 10px 0; /* separa del p */
        color: #fff;
        font-size: 18px;
        line-height: 1.2;
    }

    .mobile-overlay p.mobile-overlay-text {
        margin: 0;
        color: #fff;
        font-size: 14px;
        line-height: 1.2;
        display: flex;
        align-items: center;
        gap: 5px; /* espacio entre texto e icono */
    }

    .mobile-overlay p.mobile-overlay-text i {
        font-size: 18px;
        vertical-align: middle;
    }
    p.lead {
    font-size: 20px;
    margin-bottom: 70px !important;
}
}