.transition{
    transition: all 0.5s ease-in-out;
}
.transition-sm{
    transition: all 0.3s ease-in-out;
}
.transition-xs{
    transition: all 0.15s ease-in-out;
}
.opacity-0{
    opacity: 0;
    filter: blur(55px);
}
.contenedor-icono-granja{
    width: 30%;
    min-width: 100px;
    max-width: 200px;
    position: relative;
}
.icono-granja{
    width: 67px;
    height: 67px;
    cursor: pointer;
}
.icono-granja-seleccionado{
    filter: invert(46%) sepia(4%) saturate(3704%) hue-rotate(357deg) brightness(102%) contrast(89%);
}
.flecha-sleccion{
    position: absolute;
    width: 67px; 
    bottom: 0; 
    transform: translateY(100%);
    z-index: 1;
}
.bg-white80{
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    animation: opacidadProgresiva 0.3s ease-in;
}
.texto-dorado{
    color: #8E7652;
    text-align: start;
}
.contenedor-descripcion{
    position:relative; 
    overflow:hidden; 
    aspect-ratio: 16/6;
    display: flex;
    align-items: center;
}
.img-fondo-descripcion{
    width: 106%; 
    height: 100%;
    min-height: 600px; 
    max-height: 1000px; 
    -o-object-fit: cover; 
       object-fit: cover; 
    -o-object-position: center; 
       object-position: center;
    position: absolute; 
    top: 0; 
    left: 0;
    animation: entrarDesdeIzquierdaADerecha 2s ease-in;
}
.contenedor-texto-descripcion-usos{
    width: 60%; 
    line-height: 1.1;
}

@media (max-width: 1280px) {
    .contenedor-descripcion{
        aspect-ratio: 16/8;
    }
}

@media (max-width: 1100px) {
    .contenedor-descripcion{ 
        position:relative; 
        overflow:unset; 
        display: block;
        aspect-ratio: auto;
        padding: 0 !important;
        height: 100%;
    }
    .img-fondo-descripcion{
        aspect-ratio: 16/6;
        width: 110%;
        height: unset;
        min-height: unset;
        position: unset;
    }
    .contenedor-texto-descripcion-usos{
        width: 100%; 
        height: 100%;
        max-height: unset;
        min-height: unset;
        aspect-ratio: unset;
        position: unset;
        padding-top: 1rem !important;
    }
    .bg-white80{
        background: rgba(225, 225, 225, 0.468);
        animation: opacidadProgresiva 0.3s ease-in;
    }
}

@media (max-width: 650px) {
    .img-fondo-descripcion{
        aspect-ratio: 4/3;
    }
}

@keyframes entrarDesdeIzquierdaADerecha {
    0% {
        transform: translateX(-5%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes opacidadProgresiva {
    0% {
        opacity: 0;
        background: rgba(255, 255, 255, 0.301);
        backdrop-filter: blur(0px);
    }
    100% {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(30px);
        opacity: 1;
    }
}