/* Contenedor de la sección de ilustración */
.biodiversidad-ilustracion {
    position: relative;
    width: 100%;
    height: 300vh; /* 3x viewport para tener espacio de scroll */
    z-index: 2;
    margin-top: 0;
}

.biodiversidad-fondo {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    background: url("https://assets-us-01.kc-usercontent.com/b2956330-c34f-0064-2c6f-27bd5c0147fc/0911edd3-b3de-4502-b1ac-f06dcd2c3771/fondo_biodiversidad.svg") no-repeat center calc(60%) / cover;
    overflow: hidden;
    z-index: 2;
}

/* Animales */
.animal {
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
    transform: scale(0.7);
}

.animal.visible {
    opacity: 1;
    transform: scale(1);
}

/* Jaguar */
.jaguar {
    width: 400px;
    height: auto;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    z-index: 2;
}

.jaguar.visible {
    transform: translate(-50%, -50%) scale(1);
}

.descrip-jaguar {
    height: auto;
    top: 27%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    z-index: 3;
}

.descrip-jaguar.visible {
    transform: translate(-50%, -50%) scale(1);
}

/* Aves */
.ave-1 {
    width: 135px;
    height: auto;
    top: 10%;
    left: 10%;
    z-index: 1;
}

.ave-2 {
    width: 107px;
    height: auto;
    top: 12%;
    left: 18%;
    z-index: 1;
}

.ave-3 {
    width: 135px;
    height: auto;
    top: 12%;
    right: 12%;
    z-index: 1;
}

.descrip-aves {
    height: auto;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    z-index: 3;
}

.descrip-aves.visible {
    transform: translate(-50%, -50%) scale(1);
}

/* Tortuga */
.tortuga {
    height: auto;
    bottom: 8%;
    left: 12%;
    z-index: 1;
}

.descrip-tortuga {
    height: auto;
    left: 23%;
    bottom: 5%;
    z-index: 2;
}

.descrip-tortuga.visible {
    transform: scale(1);
}

/* Pinguino */
.pinguino {
    height: auto;
    bottom: 8%;
    left: 35%;
    z-index: 1;
}

.descrip-pinguino {
    height: auto;
    left: 47%;
    bottom: 5%;
    z-index: 2;
}

.descrip-pinguino.visible {
    transform: scale(1);
}

/* Ballenas */
.ballenas {
    height: auto;
    bottom: 3%;
    right: -12%;
    z-index: 1;
}

.descrip-ballenas {
    height: auto;
    right: 7%;
    bottom: 30%;
    z-index: 2;
}

.descrip-ballenas.visible {
    transform: scale(1);
}

/* PANTALLAS CHICAS */
@media screen and (max-width: 1366px) {
    .ave-1 {
        left: 5%;
    }

    .ave-2 {
        left: 16%;
    }

    .ave-3 {
        right: 5%;
    }

    .descrip-aves {
        top: 24%;
    }

    .jaguar {
        top: 51%;
    }

    .descrip-jaguar {
        top: 21%;
    }

    .tortuga {
        left: 5%;
    }

    .descrip-tortuga {
        left: 20%;
    }

    .pinguino {
        left: 29%;
    }

    .descrip-pinguino {
        left: 43%;
    }

    .ballenas {
        bottom: 1%;
    }

    .descrip-ballenas {
        bottom: 32%;
    }



}

/* Ocultar descripciones mobile */
.descrip-aves-mobile {
    display: none;
}

.descrip-jaguar-mobile {
    display: none;
}

.descrip-tortuga-mobile {
    display: none;
}

.descrip-pinguino-mobile {
    display: none;
}

.descrip-ballenas-mobile {
    display: none;
}

/* MOBILE */
@media screen and (max-width: 768px) {
    /* Ocultar descripciones desktop */
    .descrip-aves {
        display: none;
    }

    .descrip-jaguar {
        display: none;
    }

    .descrip-tortuga {
        display: none;
    }

    .descrip-pinguino {
        display: none;
    }

    .descrip-ballenas {
        display: none;
    }

    .biodiversidad-fondo {
        background: url("https://assets-us-01.kc-usercontent.com/b2956330-c34f-0064-2c6f-27bd5c0147fc/0c4f2813-726a-418a-8b6e-dbb9168bd147/fondo_mobile.svg") no-repeat center / cover;
    }

    /* AVES */
    .ave-1 {
        left: 14%;
        width: 77.93px;
        top: 11%;
    }

    .ave-2{
        width: 77px;
        top: 11%;
        left: 38%;
    }

    .ave-3{
        width: 84px;
        top: 6%;
        right: 11%;
    }

    .descrip-aves-mobile {
        display: block;
        transform: translate(-50%, -50%) scale(0.7);
        z-index: 0;
        opacity: 0;
        top: 25%;
        left: 50%;
    }

    .descrip-aves-mobile.visible {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* JAGUAR */
    .jaguar{
        width: 257px;
        top: 56%;
        z-index: 1;
    }
    .descrip-jaguar-mobile {
        display: block;
        transform: translate(-50%, -50%) scale(0.7);
        z-index: 0;
        opacity: 0;
        top: 44%;
        left: 50%;
    }

    .descrip-jaguar-mobile.visible {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* TORTUGA */
    .tortuga{
        width: 96px;
    }
    .descrip-tortuga-mobile {
        display: block;
        transform: translate(-50%, -50%) scale(0.7);
        z-index: 0;
        opacity: 0;
        bottom: 7%;
        left: 50%;
    }

    .descrip-tortuga-mobile.visible {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* PINGUINO */
    .pinguino{
        width: 96px;
        bottom: 22%;
        z-index: 3;
    }
    .descrip-pinguino-mobile {
        display: block;
        transform: translate(-50%, -50%) scale(0.7);
        z-index: 2;
        opacity: 0;
        bottom: 18%;
        left: 50%;
    }

    .descrip-pinguino-mobile.visible {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* BALLENAS */
    .ballenas{
        width: 513px;
        bottom: 7%;
        right: -77%;
        z-index: 5;
    }
    .descrip-ballenas-mobile {
        display: block;
        transform: translate(-50%, -50%) scale(0.7);
        z-index: 4;
        opacity: 0;
        bottom: 12%;
        left: 50%;
    }

    .descrip-ballenas-mobile.visible {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}