html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* EFECTO DE ENTRADA */
body {
    opacity: 0;
    animation: fadeInBody 1s ease-in forwards;
}

@keyframes fadeInBody {
    to {
        opacity: 1;
    }
}



/* LOGO */
h1.m-0.display-4.text-uppercase.text-white {
    font-family: "Zilla Slab", serif;
    font-weight: 300;
    font-style: normal;
    margin-left: 5%;
    font-size: 34px;
}


/*titulo en medio de imagen principal */
/* Estilo base para pantallas grandes */
h1.display-1.text-white.m-0 {
    font-family: "Zilla Slab", serif;
    font-weight: 300;         /* Usamos 300 porque '10px' no es válido para font-weight */
    font-style: normal;
    margin-left: 5%;
    font-size: 84px;
}

/* Pantallas medianas (tabletas: <= 991px) */
@media (max-width: 991px) {
    h1.display-1.text-white.m-0 {
        font-size: 60px;
        margin-left: 4%;
    }
}

/* Pantallas pequeñas (teléfonos: <= 767px) */
@media (max-width: 767px) {
    h1.display-1.text-white.m-0 {
        font-size: 40px;
        margin-left: 3%;
        text-align: center;
    }
}

/* Teléfonos muy pequeños (<= 480px) */
@media (max-width: 480px) {
    h1.display-1.text-white.m-0 {
        font-size: 28px;
        margin-left: 0;
        text-align: center;
    }
}





/*--------------- TEMPLO DE ROSALIA 1----------- */

.file3 {
    max-width: 100%; /* La imagen nunca será más ancha que su contenedor */
    height: auto; /* Ajusta la altura proporcionalmente al ancho */
    display: block; /* Elimina el espacio inferior añadido por defecto */
    margin: 0 auto; /* Centra la imagen horizontalmente si el contenedor es más ancho */
    width: 100%; /* Ancho del contenedor adaptado */
  
}

.grid-container-5 {
    display: flex; /* Activa flexbox para organizar los hijos en una fila */
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: flex-start; /* Alinea el contenido a la izquierda */
    height: 100vh; /* Ocupa toda la altura de la ventana */
    padding-top: 100vh; /* Espaciado superior inicial */
    margin-top: -24vh; /* Asegura que no haya espacio extra encima */
    margin-bottom: 570px; /* Espaciado inferior */
    width: 102%;
}

.grid-item4 {
    flex: 0 0 auto; /* Evita que el elemento crezca o se encoja */
    max-width: 50%; /* Limita el ancho al 50% de la página */
    padding-right: 20px; /* Espaciado entre la imagen y el texto */

}

.grid-item4 img {
    width: 100%; /* Imagen ocupa todo el espacio disponible */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina espacio extra alrededor de la imagen */
    object-fit: cover; /* Asegura que se ajuste al contenedor si es necesario */
}

.portraitquote3 {
    flex: 1; /* Permite que el texto ocupe el espacio restante */
    text-align: justify; /* Justifica el texto */
    font-size: 12px; /* Tamaño de fuente del texto */
    margin-top: 0; /* Ajusta según sea necesario */
    line-height: 1.5; /* Espaciado entre líneas */
    color: #333; /* Color del texto */
    font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: normal;
}

.quote7 {
    font-size: 24px; /* Tamaño de fuente del título */
    font-weight: bold; /* Negrita */
    margin-bottom: 10px; /* Espaciado debajo del título */
    padding-left: 25%;
    font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: normal;
}

.quote8 {
    font-size: 28px; /* Tamaño de fuente del párrafo */
    line-height: 1.5; /* Espaciado entre líneas */
    padding-left: 10%; /* Espacio interno desde la izquierda */
 
   width: 70%;
    color: #333; /* Color del texto */
    font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: normal;
}




/* Media query para pantallas pequeñas (768px o menos) */
@media (max-width: 768px) {
    .grid-container-5 {
        flex-direction: column; /* Cambia la disposición a vertical */
        align-items: center; /* Centra los elementos horizontalmente */
        padding-top: 0vh; /* Elimina el espaciado superior */
        margin-top: 0vh; /* Asegura que no haya márgenes extra */
        margin-bottom: 1px; /* Reduce el espaciado inferior */
        height: auto; /* Permite que el contenedor se ajuste al contenido */
        padding-top: 1%;
        width: 110%;
    }

    .grid-item4 {
        max-width: 100%; /* Imagen ocupa todo el ancho disponible */
        padding-bottom: -20%;
    }

    .portraitquote3 {
        margin-top: 20px; /* Espaciado entre la imagen y el texto */
        text-align: center; /* Centra el texto horizontalmente */
    }

    .quote8 {
        text-align: justify; /* Mantiene el texto justificado */
        font-size: 16px; /* Tamaño de fuente del párrafo */
        line-height: 1.5; /* Espaciado entre líneas */
        padding-left: 20%; /* Espacio interno desde la izquierda */
        padding-top: -20%;
        padding-bottom: 25%;
       width: 80%;
    }

    .quote7 {
        text-align: justify; /* Mantiene el texto justificado */
       
        line-height: 1.5; /* Espaciado entre líneas */
        padding-left: 30%; /* Espacio interno desde la izquierda */
      
    }


}






/*---------------------- TEMPLO DE ROSALIA 2------------ */


.file3 {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    width: 100%;
}

.grid-container-6 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    padding-top: 100vh;
    margin-top: -34vh;
    margin-bottom: 570px;
    width: 103%;
    flex-direction: row-reverse; /* Imagen a la izquierda, texto a la derecha */
}

.grid-item5 {
    flex: 0 0 auto;
    max-width: 53%;
    padding-left: 20px; /* Espaciado entre la imagen y el texto */
    padding-right: 50px; /* Agrega un espacio desde el borde derecho */
}

.grid-item5 img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    margin-left: 10px; /* Asegura que la imagen no quede pegada al borde izquierdo */
}

.portraitquote3 {
    flex: 1;
    text-align: justify;
    font-size: 12px;
    margin-top: 0;
    line-height: 1.5;
    color: #333;
    padding-left: 70px; /* Espaciado a la derecha del contenedor */
}

.quote7 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-left: 25%;
}

.quote8 {
    font-size: 28px;
    line-height: 1.5;
    padding-left: 0; /* Elimina el espaciado desde la izquierda */
    width: 70%;
    color: #333;
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
    .grid-container-6 {
        flex-direction: column; /* Cambia la disposición a vertical */
        align-items: center;
        padding-top: 0vh;
        margin-top: 0vh;
        margin-bottom: 1px;
        height: auto;
        padding-top: 1%;
        width: 100%;
    }

    .grid-item5 {
        max-width: 100%;
        padding-bottom: -20%;
    }

    .portraitquote3 {
        margin-top: 20px;
        text-align: center; /* Centra el texto horizontalmente */
    }

    .quote8 {
        text-align: justify;
        font-size: 16px;
        line-height: 1.5;
        padding-left: 20%;
        width: 80%;
        margin-left: -10%;
    }

    .quote7 {
        text-align: justify;
        line-height: 1.5;
        padding-left: 30%;
    }
}



/*---------------VOLCANES----------- */
.grid-container-Latam1 { 
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas iguales */
    gap: 10px; /* Espaciado entre los elementos */
    width: 100%; /* Ancho del contenedor adaptado */
    max-width: 100vw; /* Máximo ancho igual a la ventana */
   
}

.grid-container-Latam1 .grid-item7,
.grid-container-Latam1 .grid-item8 {
    width: 100%; /* Ancho completo de la celda */
    position: relative; /* Necesario para posicionar imágenes dentro */
    overflow: hidden; /* Evitar desbordamientos */
}

.grid-container-Latam1 .grid-item7 img {
    width: 100%; /* Ajustar al ancho del contenedor */
    height: 100%; /* Llenar la altura del contenedor */
    object-fit: cover; /* Recortar la imagen para llenar el espacio */
    object-position: center; /* Centrar la imagen */
}

.grid-container-Latam1 .grid-item8 img {
    width: 100%; /* Ajustar al ancho del contenedor */
    height: 100%; /* Llenar la altura del contenedor */
    object-fit: cover; /* Recortar la imagen para llenar el espacio */
    object-position: center; /* Centrar la imagen */
    /* Propiedades adicionales que desees aplicar */
}

/* Responsive para pantallas pequeñas */







/*--------------quote 1---------- */

.latamquote2 {
    display: flex; /* Usamos flexbox */
    flex-direction: column; /* Alineamos los elementos en columna */
    align-items: center; /* Centramos horizontalmente */
    justify-content: center; /* Centramos verticalmente */
    text-align: justify; /* Justificamos el texto */
    padding: 50px; /* Espaciado interno */
  }
  
  .quotelatam1{
    font-weight: bold; /* Negrita */
    font-size: 2.5em; /* Tamaño de título */
    margin-bottom: 50px; /* Espacio debajo del título */
    text-align: center; /* Alineación central */
    font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: normal;
  }


  @media (max-width: 768px) {
    .quotelatam1{
        font-weight: bold; /* Negrita */
        font-size: 2.5em; /* Tamaño de título */
        margin-bottom: 50px; /* Espacio debajo del título */
        text-align: center; /* Alineación central */
        font-family: "Zilla Slab", serif;
      font-weight: 300;
      font-style: normal;
      margin-left: 7%;
      }




}


  
  .quotelatam2 {
    font-size: 1.2em; /* Tamaño para el texto */
    line-height: 1.8; /* Altura de línea para mejor lectura */
    max-width: 900px; /* Limitar ancho del texto */
    text-align: justify; /* Texto justificado */
    font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: normal;
  }



/*-------------ciudad de guate portada---------- */

  .filelatam1 {
    max-width: 100%; /* La imagen nunca será más ancha que su contenedor */
    height: auto; /* Ajusta la altura proporcionalmente al ancho */
    display: block; /* Elimina el espacio inferior añadido por defecto */
    margin: 0 auto; /* Centra la imagen horizontalmente si el contenedor es más ancho */
    width: 100%; /* Ancho del contenedor adaptado */
    margin-top: 1%;
  
}



/*-------------museo---------- */

.filemuseo {
    max-width: 70%; /* La imagen nunca será más ancha que su contenedor */
    height: auto; /* Ajusta la altura proporcionalmente al ancho */
    display: block; /* Elimina el espacio inferior añadido por defecto */
    margin: 0 auto; /* Centra la imagen horizontalmente si el contenedor es más ancho */
    padding: 0 10px; /* Añade un espaciado lateral de 10px para evitar que la imagen toque los bordes */
   
}


/*----------FOTOS DE PAISAJES LATAM--------- */

.grid-container-L1 {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espaciado entre imágenes */
    flex-wrap: wrap; /* Evita que las imágenes se amontonen */
    padding: 10px;
}

.grid-item img {
    width: 100%;
    max-width: 600px; /* Ajusta el tamaño máximo */
    height: auto;

}

@media (max-width: 768px) {
    .grid-container-L1 {
        flex-direction: column; /* Cambia a una sola columna */
        align-items: center; /* Centra las imágenes */
        width: 500%;
        display: block;
        object-fit: cover;
        margin-left: 50px;
       
    }
  

    .grid-item {
        max-width: 600%; /* Ajusta el tamaño en móviles */
        margin-bottom: 10px; /* Espaciado entre imágenes */
        height: 700%;
        width: 300%;

    }
}




/*----------FOTOS DE cierre--------- */
.grid-container-Latam2 {
    display: flex; /* Coloca las imágenes en una fila */
    gap: 200px; /* Espacio entre imágenes */
    justify-content: center; /* Centra las imágenes horizontalmente */
    padding: 10px; /* Espacio alrededor del contenedor */
  }
  
  .grid-item img {
    width: 1000%; /* Asegura que la imagen ocupe todo el ancho de su contenedor */
    max-width: 800px; /* Define un tamaño máximo para las imágenes */
    height: 600px; /* Define una altura fija para unificar dimensiones */
    object-fit: cover; /* Ajusta la imagen para que se recorte y mantenga su proporción */
  }
  
  @media (max-width: 768px)  { 
    .grid-container-Latam2 {
        display: flex; /* Coloca las imágenes en una fila */
        gap: 100px; /* Espacio entre imágenes */
        justify-content: center; /* Centra las imágenes horizontalmente */
        padding: 10px; /* Espacio alrededor del contenedor */
        image-rendering: auto; /* Renderizado predeterminado */
        image-rendering: -webkit-optimize-contrast; /* Mejora en navegadores WebKit */
        backface-visibility: hidden; /* Suavizar la representación */
        transform: scale(1.01); /* Reducir pixelación */
      }
      
      .grid-item img {
        width: 700%; /* Asegura que la imagen ocupe todo el ancho de su contenedor */
        max-width: 400px; /* Define un tamaño máximo para las imágenes */
        height: 150px; /* Define una altura fija para unificar dimensiones */
        object-fit: cover; /* Ajusta la imagen para que se recorte y mantenga su proporción */
        image-rendering: auto; /* Renderizado predeterminado */
        image-rendering: -webkit-optimize-contrast; /* Mejora en navegadores WebKit */
        backface-visibility: hidden; /* Suavizar la representación */
        transform: scale(1.01); /* Reducir pixelación */
      }
      
    }
      

    @media (max-width: 768px)  { 
        .TAQUICARDIA{
            margin-left: -20%;
        }
          
        }
          

/*--------------lastquote---------- */

.latamquote3 {
    display: flex; /* Usamos flexbox */
    flex-direction: column; /* Alineamos los elementos en columna */
    align-items: center; /* Centramos horizontalmente */
    justify-content: center; /* Centramos verticalmente */
    text-align: justify; /* Justificamos el texto */
    padding: 50px; /* Espaciado interno */
    margin-top: 2%;
    font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: normal;
  }
  
  .quotelatam3{
    font-weight: bold; /* Negrita */
    font-size: 2.5em; /* Tamaño de título */
    margin-bottom: 50px; /* Espacio debajo del título */
    text-align: center; /* Alineación central */
    font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: normal;
  }
  
  .quotelatam4 {
    font-size: 1.2em; /* Tamaño para el texto */
    line-height: 1.8; /* Altura de línea para mejor lectura */
    max-width: 900px; /* Limitar ancho del texto */
    text-align: justify; /* Texto justificado */
    font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: normal;
  }


  @media (max-width: 768px) 
  {
  .latamquote3 {
    display: flex; /* Usamos flexbox */
    flex-direction: column; /* Alineamos los elementos en columna */
    align-items: center; /* Centramos horizontalmente */
    justify-content: center; /* Centramos verticalmente */
    text-align: justify; /* Justificamos el texto */
    padding: 50px; /* Espaciado interno */
    margin-top: -5;
    padding-left: 20%;
    font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: normal;

  }
  
  .quotelatam3{
    font-weight: bold; /* Negrita */
    font-size:200%; /* Tamaño de título */
    margin-bottom: 50px; /* Espacio debajo del título */
    text-align: center; /* Alineación central */
    font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: normal;
  margin-left: -10%;
  }
  
  .quotelatam4 {
    font-size: 1.2em; /* Tamaño para el texto */
    line-height: 1.8; /* Altura de línea para mejor lectura */
    max-width: 900px; /* Limitar ancho del texto */
    text-align: justify; /* Texto justificado */
    font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: normal;
  }

}





.image-footer {
    width: 100%;
    height: 900px; /* Ajusta la altura según tus necesidades */
    background: url('https://sosupics.com/PORTFOLIO/LATAM/usadas/photo_2022-09-25_19-01-09.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: end;
    justify-content: center;
    text-align:center;
    position: relative;
    padding: 20px; /* Espaciado para texto */
}

.footer-text {
    color: white;
    font-size: 14px;
    line-height: 1.5; /* Espaciado entre líneas */
   
    max-width: 90%; /* Limita el ancho del texto */
    font-family: Arial, sans-serif; /* Fuente legible */
}

/* Responsividad */
@media (max-width: 768px) {
    .image-footer {
        height: 200px;
    }

    .footer-text {
        font-size: 10px; /* Reduce tamaño en pantallas pequeñas */
    }
}

@media (max-width: 480px) {
    .image-footer {
        height: 500px;
        weight: 50px;
    }

    .footer-text {
        font-size: 12px; /* Ajusta tamaño aún más para dispositivos pequeños */
    }
}