/* ######################### INDEX STYLE (RUMBO CHIAPAS - RESPONSIVE) #########################*/
/* Este archivo controla el diseño de la página de inicio.
   Se han eliminado los anchos fijos para permitir que la página se adapte a móviles.
   CORRECCIÓN: Se restauran las columnas para Paquetes y Testimonios.
*/

/* ========================================================================== */
/* 1. REGLAS GENERALES PARA CELDAS (MOBILE FIRST) */
/* ========================================================================== */

/* Todas las celdas empiezan ocupando el 100% del ancho en celulares */
div[id^="imCell_"] {
    display: block;
    position: relative;
    overflow: visible; /* Permitir sombras fuera de la caja */
    width: 100% !important;
    min-height: auto !important;
    padding: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    
    /* Estilo de Tarjeta Limpia */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Estilo interno de las celdas */
div[id^="imCellStyle_"] {
    width: 100% !important;
    padding: 0 !important;
    text-align: center;
    border: none;
}

/* Ocultar gráficos de fondo obsoletos */
div[id^="imCellStyleGraphics_\"] {
    display: none;
}

/* ========================================================================== */
/* 2. DISEÑO DE ESCRITORIO (Pantallas Grandes > 768px) */
/* ========================================================================== */

@media (min-width: 768px) {
    
    /* 🟢 CORRECCIÓN CRÍTICA: Restaurar flotación y ancho para la sección de 2 columnas (Paquetes y Tours) */
    /* imCell_7, imCell_9, imCell_14, imCell_26 son las celdas de 2 columnas */
    #imContent #imCell_7,
    #imContent #imCell_9,
    #imContent #imCell_14,
    #imContent #imCell_26 {
        float: left !important;
        clear: none !important; 
        width: 49% !important; 
        max-width: 49% !important; 
        margin-right: 2% !important; /* Espacio entre columnas */
    }

    /* 🟢 CORRECCIÓN CRÍTICA: Restaurar flotación y ancho para la sección de 3 columnas (Testimonios) */
    /* imCell_21, imCell_23, imCell_24 son las celdas de 3 columnas */
    #imContent #imCell_21,
    #imContent #imCell_23,
    #imContent #imCell_24 {
        float: left !important;
        clear: none !important;
        width: 31.333% !important; /* 33.33% - padding */
        max-width: 31.333% !important;
        margin-right: 3% !important; /* Espacio entre columnas */
    }
    
    /* Arreglo: Eliminar margen en el último elemento de la fila de 3 para evitar saltos */
    #imContent #imCell_24 {
        margin-right: 0 !important;
    }
}


/* ========================================================================== */
/* 3. CLASES DE CELDAS PARA COLUMNAS (MANTENIDAS POR COMPATIBILIDAD) */
/* ========================================================================== */

.im_w100 { width: 100% !important; }
.im_w48_left { /* Solo flotan en Desktop, son 100% en Mobile (gracias a la regla 1) */
    width: 48%; 
    float: left;
}
.im_w31_left { /* Solo flotan en Desktop, son 100% en Mobile (gracias a la regla 1) */
    width: 31%;
    float: left;
}


/* ========================================================================== */
/* 4. IMÁGENES Y ALINEACIÓN */
/* ========================================================================== */

/* Hacemos que todas las imágenes sean responsivas */
div[id^="imTextObject_\"] img,
#imContent img { /* Se expande la regla a todas las imágenes dentro del contenido */
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px;
    margin: 10px 0;
}

/* En móviles, quitamos la flotación para que la imagen se vea grande */
div[id^="imTextObject_\"] img.fleft, 
div[id^="imTextObject_\"] img.fright {
    float: none !important;
    margin: 10px auto !important;
    display: block;
}

/* En escritorio, restauramos la flotación si es necesario */
@media (min-width: 768px) {
    div[id^="imTextObject_\"] img.fleft { 
        float: left !important; 
        margin-right: 20px !important; 
        max-width: 40% !important;
    }
    div[id^="imTextObject_\"] img.fright { 
        float: right !important; 
        margin-left: 20px !important; 
        max-width: 40% !important;\
    }
}