@import url('variables.css');

/* =========================
   AVISOS
========================= */

.avisos-section {
    padding: 80px 20px;
    background: var(--blanco);
    overflow: hidden;
}

.avisos-title {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.4rem;
    color: var(--guinda);
    margin-bottom: 50px;
}

.avisos-wrapper {
    position: relative;
    width: min(90vw, 260px);
    height: min(90vw, 320px);
    perspective: 1200px;
    margin: auto;
}

.avisos-carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    cursor: grab;
    z-index: 1;
}

.avisos-carousel figure {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aviso-card{
    width:75%;
    height:88%;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.12);
    transition:transform .3s ease;
    position:relative;

    /* evita deformaciones */
    flex-shrink:0;
}

.aviso-card:hover{
    transform:scale(1.04);
}

.aviso-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    cursor:pointer;
}

/* Lightbox */

.avisos-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .9);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
    z-index: 9999;
}

.avisos-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.avisos-lightbox img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 16px;
}

@media(max-width:768px){

    .avisos-wrapper{
        width:240px;
        height:320px;
    }

    .aviso-card{
        width:65%;
        height:80%;
    }

}

@media(max-width:480px){

    .avisos-wrapper{
        width:210px;
        height:280px;
    }

    .aviso-card{
        width:58%;
        height:74%;
    }

}