/* ######################### STYLE BASE Y MENÚ RUMBO CHIAPAS (UNIFICADO Y FINAL) #########################*/
/*
 * Este archivo ha sido unificado y modificado para:
 * 1. Unir el estilo base (`style.css`) y el estilo del menú (`menu.css`).
 * 2. Convertir la web a diseño responsivo (adiós 981px rígidos).
 * 3. Aplicar la paleta de colores Verde Selva/Vibrante.
 * 4. Eliminar hacks de espaciado y código obsoleto.
 */

/* -------------------------------------------------------------------------- */
/* 1. LIMPIEZA Y BÁSICOS - PEGAR AL TOPE */
/* -------------------------------------------------------------------------- */
body, html {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box;
    /* Usamos Roboto como fuente principal para el cuerpo */
    font-family: 'Roboto', sans-serif; 
}

/* Clases de utilidad */
.imClear { visibility: hidden; clear: both; border: 0; margin: 0; padding: 0; }
.imHidden { display: none; }
.imCaptFrame { vertical-align: middle; }

/* Estilos generales del contenido */
#imContent { 
    font: normal normal normal 10pt 'Roboto', sans-serif; 
    color: #333; 
    padding: 0 20px; /* Relleno lateral para que el contenido no toque los bordes */
    position: relative;
    z-index: 10;
}

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

/* Estilo para Títulos */
.imContentData h1, .imContentData h2, .imContentData h3 {
    color: #227C4B; /* Verde Selva Oscuro */
    font-family: 'Montserrat', sans-serif; /* Fuente de encabezados */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
}
.imContentData h1 { font-size: 2.2em; }
.imContentData h2 { font-size: 1.8em; }
.imContentData h3 { font-size: 1.4em; }
.imContentData h4 { font-size: 1.2em; color: #333; font-weight: bold; }

/* Estilo de Párrafos y Listas */
.imContentData p, .imContentData ul, .imContentData ol {
    line-height: 1.6;
    margin-bottom: 15px;
}
.imContentData li {
    margin-bottom: 5px;
}

/* -------------------------------------------------------------------------- */
/* 2. ESTILOS DE TABLAS Y CONTENEDORES DE INCOMEDIA (RESPONSIVE) */
/* -------------------------------------------------------------------------- */

/* CONTENEDOR PRINCIPAL DE CELDAS (Mobile First: Columna Única) */
div[id^="imCell_"] {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100% !important; /* Mobile & Desktop: 100% de ancho */
    max-width: 100%;
    min-height: auto;
    padding: 15px; /* Relleno uniforme */
    margin-bottom: 20px; /* Separación entre tarjetas/secciones */
    box-sizing: border-box;
    float: none;
    clear: both; /* Aseguramos que no haya floats */

    /* Estilo de Tarjeta Limpia (Coherente) */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Sombra sutil */
    text-align: left;
}

/* Limpieza de celdas internas */
.imTblCol, .imTblIn, .imTblRow {
    display: block !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
}
.imTblCol { padding: 0 !important; }
.imTblIn { padding: 0 !important; }

/* Eliminamos el ancho fijo que rompe el diseño */
#imTbl, .imTbl { width: 100% !important; }


/* -------------------------------------------------------------------------- */
/* 3. IMÁGENES Y OBJETOS MULTIMEDIA */
/* -------------------------------------------------------------------------- */
/* Todas las imágenes y videos son responsivos */
img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Contenedores de imagen */
.imObjImage {
    margin: 15px auto;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 8px; /* Bordes redondeados para todas las imágenes */
}

/* -------------------------------------------------------------------------- */
/* 4. ESTILOS DE FORMULARIOS Y BOTONES (CTA) */
/* -------------------------------------------------------------------------- */

/* Estilo de formulario para mejor usabilidad móvil */
input[type=text], input[type=email], input[type=tel], textarea, select { 
    width: 100%; 
    max-width: 400px;
    padding: 10px; 
    margin: 5px 0 10px 0;
    display: inline-block; 
    border: 1px solid #ccc; 
    box-sizing: border-box; 
    border-radius: 4px;
}
textarea {
    resize: vertical;
    width: 100%; 
    max-width: 400px;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Aplicamos el Verde Vibrante (#7FC744) para botones de acción */
input[type=button], input[type=submit] { 
    background: #7FC744; 
    color: #fff; 
    border: none; 
    padding: 10px 20px; 
    cursor: pointer; 
    border-radius: 50px; /* Botones más suaves */
    font-weight: bold;
    transition: background 0.3s;
}
input[type=button]:hover, input[type=submit]:hover {
    background: #227C4B; /* Verde Selva en hover */
}


/* ========================================================================== */
/* 5. ELIMINACIÓN DE HACKS ANTIGUOS Y LIMPIEZA FINAL */
/* ========================================================================== */

#imMnMnBorder, #imFooPad, #imStatBar { display: none !important; }
.imContentData { padding: 0 !important; }
#imPgMnContainer { display: none; }
#imTbl { margin: 0 auto; } /* Aseguramos el centrado */


/* ######################### ESTILOS DEL MENÚ RESPONSIVO (INTEGRADOS) #########################*/

/* 1. CONFIGURACIÓN BÁSICA DEL MENÚ */
#imSite { position: relative; }
#imMnMn {
    text-align: center; /* Centramos el menú completo en el contenedor */
    font-family: 'Montserrat', sans-serif; /* Fuente moderna */
    z-index: 10002; /* Siempre encima */
}

/* CONTENEDOR DE LA LISTA: CENTRADO Y EN FILA PARA ESCRITORIO */
#imMnMn > ul {
    z-index: 10001;
    display: inline-flex !important; /* IMPORTANTE: Para centrado y fila */
    flex-wrap: nowrap !important; 	/* Prohibido saltar de línea */
    padding: 0;
    margin: 0 auto;
    background-color: #fff; /* Fondo blanco limpio para el menú */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 2. ESTILO DE ELEMENTOS PRINCIPALES */
#imMnMn li {
    position: relative;
    display: block;
    width: auto; /* Ancho flexible para escritorio */
    text-align: center;
    transition: background-color 0.3s;
}

#imMnMn li a, #imMnMn li span {
    display: inline-flex;
    align-items: center;
    padding: 15px 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333; /* Texto oscuro */
    border-radius: 5px;
    transition: all 0.3s;
}

/* Hover en elemento principal */
#imMnMn li:hover > a, #imMnMn li:hover > span {
    color: #227C4B !important; /* Verde Selva en hover */
}

/* 3. ESTILO DEL SUBMENÚ (DROPDOWN) */
#imMnMn li > ul {
    position: absolute; /* Aparece flotando */
    left: 0;
    top: 100%; /* Debajo del elemento principal */
    min-width: 220px;
    background-color: #fff; /* Fondo blanco */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    border-radius: 5px;
    padding: 10px 0;
    z-index: 10000;
    display: none; /* Oculto por defecto */
    text-align: left;
}

/* Mostrar submenú al pasar el ratón */
#imMnMn li:hover > ul {
    display: block;
}

/* Estilo de elementos de submenú */
#imMnMn li li {
    display: block;
    width: 100%;
    text-align: left;
}
#imMnMn li li a, #imMnMn li li span {
    padding: 10px 20px;
    font-weight: 500;
    font-size: 13px;
    width: 100%;
    display: block; /* Para que ocupen todo el ancho */
    box-sizing: border-box;
    border-radius: 0;
}

/* Hover en submenú */
#imMnMn li li:hover a, #imMnMn li li:hover span {
    background-color: #FAFDF2 !important; /* Fondo Crema suave */
    color: #227C4B !important; /* Verde Selva */
}


/* 4. ESTILOS DEL MENÚ FIJO (STICKY MENU) */

/* Contenedor del menú */
.sticky-menu {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff; /* Fondo blanco en el menú fijo */
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000; /* Asegura que esté por encima del contenido */
}


/* 5. ESTILO DEL BOTÓN DE MENÚ MÓVIL (ICONO HAMBURGUESA) */

/* El botón de menú debe estar oculto en escritorio */
#menu-toggle-button {
    display: none; /* Oculto por defecto */
    background-color: #227C4B; /* Verde Selva */
    color: white;
    padding: 10px 15px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 5px;
    position: fixed; /* Lo fijamos para que siempre esté visible en móvil */
    top: 10px;
    right: 10px;
    z-index: 10003;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background-color 0.3s;
}
#menu-toggle-button:hover {
    background-color: #7FC744; /* Verde Vibrante en hover */
}


/* 6. MEDIA QUERY PARA DISEÑO MÓVIL (Menos de 980px) */
@media (max-width: 980px) {

    /* Mostramos el botón de menú */
    #menu-toggle-button {
        display: block !important;
    }

    /* Ocultamos el menú completo por defecto en el borde derecho */
    #imMnMn > ul {
        display: none !important; /* Oculta la lista principal por defecto */
        position: fixed; /* Lo fija en el viewport */
        top: 0;
        right: 0;
        width: 70%; /* Ancho del menú desplegable */
        max-width: 300px;
        height: 100vh; /* Ocupa toda la altura */
        overflow-y: auto;
        flex-direction: column;
        background-color: #f8f8f8 !important; /* Fondo claro para el desplegable */
        box-shadow: -4px 0 10px rgba(0,0,0,0.2);
        border-radius: 0;
        z-index: 9999;
        display: block !important;
        text-align: left; /* El texto se alinea a la izquierda en la lista */
        transform: translateX(100%); /* Lo sacamos de la vista */
        transition: transform 0.3s ease-out;
    }

    /* Clase para mostrar el menú cuando se hace clic (toggle) */
    #imMnMnList.is-open {
        display: block !important; /* Muestra la lista del menú */
        transform: translateX(0); /* Lo movemos a la vista */
    }

    /* Estilo de los elementos en el menú móvil (Botones verticales) */
    #imMnMnList li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #e0e0e0; /* Separador */
        text-align: left;
    }

    /* Estilo del link: El link ocupa todo el ancho y tiene color */
    #imMnMnList li a, #imMnMnList li span {
        background-color: #f8f8f8;
        color: #333;
        padding: 15px 20px;
        border-radius: 0;
    }

    /* Hover en móvil */
    #imMnMnList li:hover a, #imMnMnList li:hover span {
        background-color: #227C4B !important;
        color: white !important;
    }

    /* Ajustes para submenús en móvil */
    #imMnMn li > ul {
        position: static; /* Ya no flotan */
        box-shadow: none;
        border-radius: 0;
        width: 100% !important;
        padding: 0;
        margin: 0;
        background-color: #e8e8e8; /* Un color ligeramente diferente para el submenú */
    }

    #imMnMn li li a, #imMnMn li li span {
        padding-left: 40px; /* Indentación para submenú */
        background-color: #e8e8e8;
    }

    /* El contenedor principal del menú estático debe estar limpio */
    .sticky-menu {
        padding: 0;
        box-shadow: none;
        background: none;
        position: relative; /* Lo hacemos relativo para no interferir con el botón fijo */
    }
/* ========================================================================== */
/* 3. ESTRUCTURA DE CONTENIDO */
/* ========================================================================== */

/* ... (Otras reglas existentes para #imContent) ... */

#imContentContainer {
    position: relative;
    /* ESTA LÍNEA COMPENSA LA ALTURA DEL MENÚ FIJO (100px) EN TODA LA WEB */
    padding-top: 100px; 
}
#imContentContainer {
    position: relative;
    padding-top: 100px; /* Esto empuja el contenido hacia abajo */
}
}