/*====================================================
    CONCIERTOS
=====================================================*/

main{

    min-height:calc(100vh - 95px);

    margin-top:55px;

    display:flex;

    flex-direction:column;

}

/*====================================================
SECCIÓN
=====================================================*/

.concerts{

    height:100%;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding:60px 30px 0;

    background:#000;

}

/*====================================================
CONTENEDOR
=====================================================*/

.concert-container{

    width:min(900px,92%);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    margin-top:-35px;

}

/*====================================================
LOGO
=====================================================*/

.concert-logo{

    width:700px;

    max-width:90vw;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

}

.concert-logo video{

    width:100%;

    height:auto;

    display:block;

}

/*====================================================
TÍTULO
=====================================================*/

.concerts h1{

    font-family:"Cinzel",serif;

    font-size:clamp(2rem,3.5vw,3.4rem);

    font-weight:600;

    line-height:1.05;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#f4f1ea;

}

.concerts h1 span{

    color:var(--dorado);

}

/*====================================================
FOOTER
=====================================================*/

footer{

    text-align:center;

    padding:12px 0 18px;

    font-size:.95rem;

}
/*====================================================
RESPONSIVE
=====================================================*/

@media (max-width:992px){

    main{

        margin-top:70px;

    }

    .concerts{

        padding:50px 25px 30px;

    }

    .concert-container{

        width:min(700px,94%);
        margin-top:0;

    }

    .concert-logo{

        width:520px;
        margin-bottom:25px;

    }

    .concerts h1{

        font-size:2.6rem;

    }

}


@media (max-width:768px){

    main{

        margin-top:75px;

    }

    .concerts{

        padding:40px 20px 40px;

        align-items:center;

    }

    .concert-container{

        width:100%;
        margin-top:0;

    }

    .concert-logo{

        width:100%;
        max-width:340px;
        margin-bottom:20px;

    }

    .concerts h1{

        font-size:2rem;

        line-height:1.2;

    }

    footer{

        padding:20px 15px;

        font-size:.85rem;

    }

}


@media (max-width:480px){

    .concert-logo{

        max-width:260px;

    }

    .concerts h1{

        font-size:1.6rem;

        letter-spacing:1px;

    }

    footer{

        font-size:.80rem;

    }

}