/* --- Estilos base (Móviles primero) --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* =================================================
   CUERPO (BODY): CONTENEDOR FLEX PRINCIPAL
   La clave es min-height: 100vh, display: flex y flex-direction: column.
   =================================================
*/
body {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem; /* Un tamaño base más estándar */
    width: 100%;
    background-image: url('../style/img/fondocel.png');
    background-size: cover;
    background-position: bottom bottom;
    background-repeat: no-repeat;
    
    /* PROPIEDADES CLAVE PARA EL STICKY FOOTER */
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}

/* =================================================
   CONTENEDOR PRINCIPAL (<main>): ELEMENTO QUE CRECE
   Aplica flex-grow: 1 para empujar el footer hacia abajo.
   =================================================
*/
.container_sucursales { /* Corresponde a tu <main> */
    flex-grow: 1; /* ¡ESTA ES LA PROPIEDAD CLAVE! */
    width: 100%;
    /* Tus secciones internas ya deberían manejar el padding y el layout */
}

/* El .main-container de tus estilos originales parece ser un wrapper interno,
   pero si lo quieres mantener, asegúrate de que no interfiera con el flex-grow.
   Si ya usas .container_sucursales como contenedor de todo el contenido,
   puedes eliminar la clase .main-container de tu CSS.
*/
.main-container {
    width: 100%;
    /* Eliminé min-height: 100vh y flex-grow: 1 de aquí para moverlo a .container_sucursales */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 20px;
}

.content-wrapper {
    width: 95%;
    max-width: 1200px;
    /* Eliminé flex-grow: 1 de aquí para evitar conflictos */
    margin-bottom: 0 !important;
}

.cont_titu {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.titu_suc {
    font-size: 4rem;
    font-weight: bold;
    color: #dd1d23;
}

.cont_sucursales {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: 20px;
}

.form_sucursales {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cont_estado {
    width: 90%;
    max-width: 400px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 50px;
    background: transparent;
    position: relative;
    padding-top: 50px;
    margin: 20px auto;
}

.titu_estado {
    font-weight: 700;
    font-size: 1.7rem;
    margin-bottom: 5px;
    color: #0a76ba;
}

.estado,
.sucursales {
    background-color: #ffffff;
    width: 80%;
    height: 12%;
    font-weight: 500;
    font-size: 2rem;
    margin-bottom: 10%;
    border-radius: 5px;
    cursor: pointer;
}

.titu_sucursales {
    background-color: transparent;
    font-weight: 700;
    font-size: 1.7rem;
    color: #0a76ba;
    margin-bottom: 5px;
}

.a_comollegar {
    width: 200px;
    height: 80px;
    padding-top: 5%;
}

.como_llegar {
    border: double 10px white;
    background-color: #d9d9d9;
    font-weight: 700;
    font-size: 2rem;
    border-radius: 10%;
    width: 100%;
    height: 100%;
}

.titu_direccion {
    font-weight: 700;
    font-size: 2rem;
    color: #0a76ba;
}

.tx_direccion {
    text-align: center;
    font-weight: 500;
    font-size: 2rem;
    background-color: #ffffff;
    border-radius: 5px;
}

.mapa_sucursales {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapa {
    width: 95%;
    height: 100%;
    border-radius: 20px;
    box-shadow: 20px 20px 60px transparent, -20px -20px 60px transparent;
}

.mapa iframe {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

/* --- Media Queries para Pantallas Grandes --- */
@media screen and (min-width: 1024px) {
    body {
        background-image: url('../style/img/Fondos_general.jpg');
        background-size: cover;
        background-position: bottom bottom;
        background-repeat: no-repeat;
    }
    .main-container {
        justify-content: center;
        padding-top: 0;
    }
    .cont_titu {
        margin-bottom: 40px;
    }
    .titu_suc {
        font-size: 6rem;
    }
    .cont_sucursales {
        flex-direction: row;
        align-items: flex-start;
        gap: 40px;
    }
    .form_sucursales {
        width: 40%;
    }
    .cont_estado {
        width: 100%;
        min-width: 430px;
        max-width: 430px;
    }
    .mapa_sucursales {
        width: 60%;
        height: 500px;
    }
    .mapa {
        width: 100%;
        height: 100%;
    }
    .mapa iframe {
        border-radius: 20px;
    }
}