/* ======================================
   TABLETS
====================================== */

@media (max-width:1024px){

.container{

    width:92%;

}

.hero{

    padding:120px 0 80px;

}

.hero h1{

    font-size:54px;

}

.hero p{

    font-size:20px;

}

.cards{

    grid-template-columns:repeat(2,1fr);

}

.eventos-grid{

    grid-template-columns:repeat(2,1fr);

}

}


/* ======================================
   CELULAR
====================================== */

@media (max-width:768px){

section{

    padding:70px 0;

}

.container{

    width:94%;

}

header{

    padding:15px 0;

}

.logo{

    width:150px;

}

.menu{

    display:none;

}

.hero{

    text-align:center;

    padding:120px 0 70px;

}

.hero h1{

    font-size:38px;

    line-height:1.2;

}

.hero p{

    font-size:18px;

    margin-top:20px;

}

.hero-buttons{

    flex-direction:column;

    gap:15px;

}

.hero-buttons a{

    width:100%;

}

.eventos-grid{

    grid-template-columns:1fr;

}

.evento-card{

    margin-bottom:20px;

}

.cards{

    grid-template-columns:1fr;

}

.social-grid{

    grid-template-columns:1fr;

}

.titulo{

    font-size:34px;

}

.subtitulo{

    font-size:17px;

}

.footer{

    text-align:center;

}

.footer-logo{

    margin:auto;

}

.whatsapp-float{

    width:60px;

    height:60px;

    font-size:30px;

    right:20px;

    bottom:20px;

}

}


/* ======================================
   CELULARES PEQUENOS
====================================== */

@media (max-width:480px){

.hero h1{

    font-size:30px;

}

.hero p{

    font-size:16px;

}

.titulo{

    font-size:28px;

}

.botao,

.botao-secundario{

    padding:14px 18px;

    font-size:15px;

}

.evento-info{

    padding:18px;

}

.evento-info h3{

    font-size:22px;

}

.evento-info p{

    font-size:15px;

}

.social-card{

    padding:25px;

}

.social-card i{

    font-size:34px;

}

.social-card span{

    font-size:16px;

}

}


/* ======================================
   TELAS GRANDES
====================================== */

@media (min-width:1600px){

.container{

    max-width:1450px;

}

.hero h1{

    font-size:80px;

}

.hero p{

    font-size:24px;

}

.titulo{

    font-size:54px;

}

}
/* =======================================
   CORREÇÃO FINAL DOS BANNERS DOS EVENTOS NO CELULAR
   Evita que o flyer fique cortado/apertado.
======================================= */
.card img,
.cards .card img,
#eventos .card img,
#eventos .cards .card > img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;
    object-fit:contain !important;
    object-position:center center !important;
    background:#050505 !important;
}

@media (min-width: 769px){
    #eventos .card > img{
        aspect-ratio:16 / 9 !important;
        height:auto !important;
        object-fit:cover !important;
    }
}

@media (max-width: 768px){
    #eventos{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    #eventos .container{
        width:94% !important;
        max-width:94% !important;
        margin:0 auto !important;
    }

    #eventos .cards{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:24px !important;
    }

    #eventos .card{
        width:100% !important;
        max-width:100% !important;
        overflow:hidden !important;
        border-radius:20px !important;
    }

    #eventos .card > img{
        width:100% !important;
        height:auto !important;
        aspect-ratio:16 / 9 !important;
        object-fit:contain !important;
        object-position:center center !important;
        background:#050505 !important;
    }

    #eventos .card-content{
        padding:22px !important;
    }

    #eventos .card h3{
        font-size:25px !important;
        line-height:1.25 !important;
    }
}

@media (max-width: 480px){
    #eventos .container{
        width:94% !important;
        max-width:94% !important;
    }

    #eventos .card > img{
        aspect-ratio:16 / 9 !important;
        object-fit:contain !important;
    }

    #eventos .card-content{
        padding:20px !important;
    }

    #eventos .card h3{
        font-size:23px !important;
    }
}


/* Correção final: botão do WhatsApp no celular */
@media (max-width: 768px){
    .whatsapp-float{
        width:52px !important;
        height:52px !important;
        right:14px !important;
        bottom:78px !important;
        font-size:28px !important;
        border-radius:50% !important;
        overflow:hidden !important;
    }

    .whatsapp-float span,
    .whatsapp-float p,
    .whatsapp-float strong{
        display:none !important;
    }

    .acoes{
        flex-direction:column !important;
    }

    .btn-evento,
    .btn-whatsapp{
        width:100% !important;
        flex:none !important;
        min-height:52px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }
}


/* AJUSTE 2026-06-30: override final mobile */
@media (max-width:768px){
    #eventos .container{width:100% !important;max-width:100% !important;padding-left:14px !important;padding-right:14px !important;}
    #eventos .cards{grid-template-columns:1fr !important;gap:26px !important;}
    #eventos .card{width:100% !important;max-width:100% !important;overflow:hidden !important;}
    #eventos .card > img{width:100% !important;height:auto !important;max-height:none !important;aspect-ratio:auto !important;object-fit:contain !important;object-position:center center !important;background:#050505 !important;}
    .whatsapp-float{width:54px !important;height:54px !important;min-width:54px !important;min-height:54px !important;max-width:54px !important;max-height:54px !important;right:14px !important;bottom:18px !important;border-radius:50% !important;overflow:hidden !important;}
    .whatsapp-float .whatsapp-svg{width:30px !important;height:30px !important;}
    .whatsapp-float i,.whatsapp-float span,.whatsapp-float p,.whatsapp-float strong{display:none !important;}
}