/* ######################### TEMPLATE STYLE RUMBO CHIAPAS #########################*/
/*
 * Archivo optimizado para Rumbo Chiapas.
 * Gestiona: Fondo de página, Estructura principal, Header, Footer.
 */

/* -------------------------------------------------------------------------- */
/* 1. ESTILO GLOBAL DE LA PÁGINA (FONDO Y ESTRUCTURA) */
/* -------------------------------------------------------------------------- */
:root {
    /* PALETA DE COLORES */
    --color-primary-green: #227C4B; /* Verde Selva Oscuro */
    --color-light-cream: #FAFDF2; /* Fondo Crema Armonioso */
}

html {
    position: relative; 
    margin: 0; 
    padding: 0; 
    height: 100%;
    /* Fondo responsivo, fijo y con color Crema/Selva */
    background-color: var(--color-light-cream); 
    background-image: url('bg.jpg'); /* Si tienes una imagen de fondo */
    background-position: center top; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-attachment: fixed; 
}

body {
    margin: 0; 
    padding: 0; 
    text-align: center; 
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 2. CONTENEDOR PRINCIPAL DE LA PÁGINA */
#imPage {
    flex-grow: 1; /* Permite que la página empuje el footer hacia abajo */
    position: relative;
    max-width: 1200px; /* Ancho máximo de la página */
    width: 98%; /* 98% en resoluciones grandes para un poco de margen */
    min-width: 320px; /* Mínimo para móvil */
    margin: 0 auto; /* Centrado horizontal */
    padding-top: 5px; /* Pequeño espacio superior para que el menú no toque el borde */
    background-color: transparent; /* El color de fondo lo da el HTML */
    box-shadow: none;
    text-align: left; /* El contenido se alinea a la izquierda dentro de imPage */
}

/* 3. ENCABEZADO (HEADER) */
#imHeader {
    position: relative;
    min-height: 100px; /* Altura mínima para asegurar espacio */
    width: 100%;
    margin-bottom: 0; /* Eliminamos el margen inferior que podría afectar al menú */
    z-index: 9000; /* Debe estar debajo del menú */
}

/* CONTENEDOR DE LA CABECERA (LOGO) */
#imHeaderBg {
    position: relative;
    width: 100%;
    height: auto;
    background-color: transparent;
    border: none;
}

/* -------------------------------------------------------------------------- */
/* 4. AJUSTE PARA EL MENÚ FIJO (STICKY MENU) */
/* -------------------------------------------------------------------------- */

/* Al colocar el menú como 'fixed', el contenido debajo sube. 
   Necesitamos crear un 'relleno' para empujar el contenido hacia abajo,
   igualando la altura del menú para que el contenido no se oculte. */

#imMnMn.sticky-menu + #imContent {
    /* Ajusta este padding: 
       Si el menú mide ~60px de alto, el padding debe ser de ~60px.
       En mobile, el menú es más grande, por lo que el padding se ajusta en media query.
    */
    padding-top: 60px; 
}

/* 5. FOOTER (PIE DE PÁGINA) - DISEÑO MODERNO */

/* Contenedor del fondo (Ahora es el fondo del pie de página) */
#imFooterBg {
    position: relative; 
    left: 0; 
    bottom: 0; 
    height: auto; 
    width: 100%; 
    /* Fondo con nuestro color primario */
    background-color: var(--color-primary-green); /* Verde Selva Oscuro */
    color: white; 
    padding: 20px 0; 
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
    margin-top: 40px; /* Separación del contenido principal */
}

/* Contenido del footer */
#imFooter {
    position: relative; 
    margin: 0 auto; 
    height: auto; 
    max-width: 1200px; 
    width: 95%; 
    padding: 0;
    background-image: none; 
    text-align: center; 
}

/* Menú inferior de enlaces (imBtMn) */
#imBtMn {
    text-align: center;
    padding: 10px 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

#imBtMn a {
    color: white; /* Enlaces blancos */
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s;
}

#imBtMn a:hover {
    color: #7FC744; /* Verde Lima en hover */
}

/* -------------------------------------------------------------------------- */
/* 6. RESPONSIVE Y AJUSTES MÓVILES (< 960px) */
/* -------------------------------------------------------------------------- */

@media screen and (max-width: 960px) {

    /* Al disminuir el tamaño, el contenido del header se apila */
    #imHeader {
        min-height: 150px !important; /* Aumentamos el espacio para logo/cajas de texto */
    }

    /* En móvil, el menú es más grande cuando se abre. 
       Ajustamos el padding para compensar el menú fijo (sticky-menu) */
    #imMnMn.sticky-menu + #imContent {
        padding-top: 150px; /* Aumentamos el relleno para dejar espacio al menú y logo */
    }
}

/* Fin del template.css */