/* 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;
    }
}


  /* PRIMER GRID DE NATURE*/
  .grid-container-N1 {
    display: flex; /* Activa el flexbox */
    justify-content: space-between; /* Espacia uniformemente los elementos */
    align-items: center; /* Centra verticalmente las imágenes */
    flex-wrap: nowrap; /* Mantiene las imágenes en una fila */
    overflow: hidden; /* Evita desplazamientos */
    padding: 10px; /* Espaciado alrededor del contenedor */
    gap: 10px; /* Espacio entre las imágenes */
}

.grid-item {
    flex: 1 1 auto; /* Permite flexibilidad para las imágenes */
    max-width: 33%; /* Limita el ancho al 33% del contenedor */
    height: 800px; /* Altura estándar para todas las imágenes */
}

.grid-item img {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    height: 100%; /* Ocupa toda la altura del contenedor */
    object-fit: cover; /* Ajusta la imagen para cubrir el área sin distorsión */
    /

}

/* Para pantallas más pequeñas */
@media (max-width: 768px) {
    .grid-container-N1 {
        gap: 5px; /* Reduce el espacio entre imágenes */
    }

    .grid-item {
        height: 200px; /* Ajusta la altura para pantallas más pequeñas */
    }
}



/* JAGUAR */
.file4 {
    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 */
  
}



.file5 {
    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%;
  
}

.file6 {
    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%;
    margin-bottom: 1%;
}

/* OSOS */

.grid-container-N2 {
    display: flex; /* Activa el flexbox */
    justify-content: space-between; /* Espacia uniformemente los elementos */
    align-items: center; /* Centra verticalmente las imágenes */
    flex-wrap: nowrap; /* Mantiene las imágenes en una fila */
    overflow: hidden; /* Evita desplazamientos */
    padding: 10px; /* Espaciado alrededor del contenedor */
    gap: 10px; /* Espacio entre las imágenes */
}

.grid-item {
    flex: 1 1 auto; /* Permite flexibilidad para las imágenes */
    max-width: 33%; /* Limita el ancho al 33% del contenedor */
    height: 800px; /* Altura estándar para todas las imágenes */
}

.grid-item img {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    height: 100%; /* Ocupa toda la altura del contenedor */
    object-fit: cover; /* Ajusta la imagen para cubrir el área sin distorsión */
    /

}

/* Para pantallas más pequeñas */
@media (max-width: 768px) {
    .grid-container-N2 {
        gap: 5px; /* Reduce el espacio entre imágenes */
    }

    .grid-item {
        height: 200px; /* Ajusta la altura para pantallas más pequeñas */
    }
}









.image-footer {
    width: 100%;
    height: 900px; /* Ajusta la altura según tus necesidades */
    background: url('https://sosupics.com/PORTFOLIO/NATURE/EDITADAS/IMG_5835.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 */
}