/* Asegura que el body no tenga márgenes extra */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita el desplazamiento horizontal */
    
    /* display: flex;
    flex-direction: column; 
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px; */
}

/* Ajusta las secciones */
section {
    width: 100vw; /* Asegura que tome todo el ancho de la pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden; /* Evita que el contenido interno genere scroll */
}

.section1 {
    background-image: url('Fondos/Jaliscoencomun.png'); /* Imagen de fondo opcional */
    min-height: 100dvh; /* Ocupa toda la altura de la pantalla */
    max-width: 100vw;
    background-size: cover;
    display: flex;
    justify-content: flex-start; /* Alineado a la izquierda en escritorio */
    align-items: center; /* Centra verticalmente */
    gap: 10px; /* Separación entre logo y texto */
    padding: 0 20px; /* Un poco de margen horizontal */
}



.section2 {
    background-color: rgb(255, 255, 255);
    min-height: 100vh; /* Ocupa toda la altura de la pantalla */
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center; /* Asegura que todo esté centrado horizontalmente */
    justify-content: flex-start; /* Alinea los elementos desde la parte superior */
  }
  
.section3 {
    background-color: #141F35;
    min-height: 80vh; /* Ocupa toda la altura de la pantalla */
   
}
.secboton{
    background-color: #141F35;

}


.section4 {
    background-color: rgb(255, 255, 255);
    display: flex;
    position: relative; /* Necesario para contener elementos absolutos */
    display: flex;
    width: 100%;
    overflow: visible; /* Permite que el contenido se salga */
     /* Espacio para la imagen que sobresale */
     
  }

.section5 {
    background-color: #F2F2F2;
    overflow: visible;
    min-height: 80vh; /* Ocupa toda la altura de la pantalla */
    
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea el contenido a la izquierda */
    gap: 20px; /* Espaciado entre elementos */
    text-align: left; /* Asegura que el texto también esté alineado a la izquierda */
    padding-left: 20px; /* Da un poco de margen desde el borde izquierdo */
    width: 100%;   
    
}

.section6 {
    background-image: url('Fondos/Jaliscozaul.png');
    min-height: 100vh; /* Ocupa toda la altura de la pantalla */
}

.section7 {
    background-image: url('Fondos/manosTierra.png');
    min-height: 100vh; /* Ocupa toda la altura de la pantalla */
    display: flex;
    justify-content: flex-start;
    border-bottom: 10%;

    
}

.section8 {
    background-color: rgb(255, 255, 255);
    height: auto; /* Permite que se ajuste al contenido */
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
    overflow: hidden; /* Evita que el contenido se desborde */
    position: relative; /* Mantiene la estructura del contenedor */
    min-height: 80vh;
}

.section9 {
    background-color: #F2F2F2;
    min-height: 35vh; /* Ocupa toda la altura de la pantalla */
}


img {
    max-width: 100%;  /* Hace que la imagen nunca sea más ancha que su contenedor */
    height: auto;  /* Mantiene la proporción de la imagen */
    display: block;  /* Asegura que no haya espacios no deseados alrededor de la imagen */
}






@media screen and (max-width: 768px) {
  .section1 {
    min-height: 100dvh;
    flex-direction: column;
    justify-content: center;
  
  }

  .section3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  }
.section4 {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.section6 {
    background-image: url('Fondos/Jaliscozaul.png');
    min-height: 60vh; /* Ocupa toda la altura de la pantalla */
}



.section7 {
    background-image: none;
    background-color: #3F7E45;
    min-height: 50vh; /* Ocupa toda la altura de la pantalla */
    display: flex;
    justify-content: flex-start;

}

.section8{
    min-height: 60vh;
}


.section9 {
  background-color: #F2F2F2;
  min-height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
  flex-direction: column;
  gap: 20px;
}


}