/*  ======================================
    ESTILOS PARA EL CARRUSEL DE SERVICIOS
    ====================================== */

/* Botones externos del carousel (lado izquierdo/derecho) */
.carousel-control-outside {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Aumentar hit area en desktop sin cubrir carousel */
@media (min-width: 768px) {
    .carousel-control-outside {
        margin: 0 8px;
    }
}

/* Botones móviles (abajo) con texto pequeño */
.d-md-none .btn {
    min-width: 110px;
}

/* Asegura que el carousel no sea tapado por controles si usas z-index */
#carousels-container .carousel {
    position: relative;
    z-index: 0;
}

/* Si quieres un poco más de separación lateral entre carousel y botones en pantallas grandes */
@media (min-width: 992px) {
    .row.align-items-center .col {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/*  =============================================
    ESTILOS PARA LAS CARD DE SERVICIOS DE COMIDA
    ============================================= */

/* Animación: aparecer desde abajo (stagger mediante inline style delay) */
@keyframes mpch-fade-up {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.mpch-service-card {
    animation-name: mpch-fade-up;
    animation-duration: 550ms;
    animation-fill-mode: both;
    will-change: transform, opacity;
}

/* Card tweaks: mantiene tu estilo Bootstrap pero con sombra y overflow controlado */
.mpch-service-card .card {
    border: none;
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.08);
    height: 100%;
}

/* Imagen */
.mpch-service-card .service-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.servicio-portada-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

/* Título y texto */
.mpch-service-card .card-title {
    font-size: 1.05rem;
    margin-bottom: .35rem;
}

/* Botón ver más (estilo pequeño) */
#btn-ver-mas {
    min-width: 160px;
}

/* Mensajes vacíos / error */
#servicios-grid .no-data {
    padding: 3rem 0;
}

/* Ajustes móviles: reduce imagen */
@media (max-width: 576px) {
    .mpch-service-card .service-img {
        height: 160px;
    }
}