/* css/cards-movil.css */

@media (max-width: 768px) {

    /* --- 1. CONFIGURACIÓN DE CONTENEDORES (Vista 2 columnas) --- */
    .restaurantes-layout .distribucion-especial,
    .actividades-page-layout .distribucion-especial,
    .servicios-page-layout .distribucion-especial,
    .bienes-raices-layout .distribucion-especial { 
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: wrap !important;     
        justify-content: center !important;
        align-items: stretch !important;
        /* Gap unificado para que no se vea mucha separación */
        gap: 8px !important;           
        padding: 5px !important;
        width: 100% !important;
    }

    /* Hospedajes se queda solo en vertical */
    .tarjetas-al-centro {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;    
        gap: 20px !important;              
    }

    /* --- 2. LA TARJETA (Medidas estándar para que no se rompan) --- */
    .restaurantes-layout .card,
    .actividades-page-layout .card,
    .servicios-page-layout .card,
    .bienes-raices-layout .card, 
    .tarjetas-al-centro .card {
        /* 47% permite que quepan dos lado a lado con el gap de 8px */
        width: 47% !important; 
        max-width: 180px !important; 
        min-height: 250px !important; 
        height: auto !important;
        padding: 10px 5px !important; 
        box-sizing: border-box !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; 
        background-color: #fff;
        border-radius: 8px;
    }

    /* --- 3. ICONOS Y TEXTOS (Unificados) --- */
    .restaurantes-layout .card img, 
    .actividades-page-layout .card img,
    .servicios-page-layout .card img,
    .bienes-raices-layout .card img,
    .tarjetas-al-centro .card img {
        max-width: 130px !important; 
        max-height: 130px !important;
        margin: 5px auto 10px !important;
    }

    .restaurantes-layout .card h3,
    .actividades-page-layout .card h3,
    .servicios-page-layout .card h3,
    .bienes-raices-layout .card h3,
    .tarjetas-al-centro .card h3 {
        font-size: 0.85rem !important;
        line-height: 1.1 !important;
    }

    .restaurantes-layout .card p,
    .actividades-page-layout .card p,
    .servicios-page-layout .card p,
    .bienes-raices-layout .card p,
    .tarjetas-al-centro .card p {
        font-size: 0.7rem !important;
        margin: 5px auto !important;
    }
}