/* Configuração do Tailwind com cores customizadas */
@layer base {
    :root {
        --red-inter: #DB0817;
        --red-dark: #E20613;
        --brown-wine: #65383E;
        --black-brown: #261B1C;
        --off-white: #FAFAFA;
    }
}

/* Estilos Globais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hero-bg {
    background-image: url('assets/img/bg-hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#form {
    background-image: url('assets/img/bg-cta.webp');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

/* Estilos para botões de rádio customizados */
input[type="radio"]:checked + span {
    background-color: #DB0817;
    color: white;
    border-color: #DB0817;
}

#rodape {
    background-image: url('assets/img/bg-rodape.webp');
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
}

/* Media Queries para Mobile */
@media (max-width: 768px) {
    /* Ajustes para seção #voz - Layout vertical no mobile */
    #voz > div[class*="w-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    #voz div[class*="grid-cols-4"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    #voz div[class*="col-span-1"],
    #voz div[class*="col-span-2"] {
        grid-column: span 1 !important;
    }
    
    #voz div[class*="col-span-2"] {
        order: 2;
    }
    
    #voz div[class*="col-span-1"]:first-child {
        order: 1;
    }
    
    #voz div[class*="col-span-1"]:last-child {
        order: 3;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    #voz div[class*="col-span-2"] span {
        text-align: center !important;
        display: block !important;
    }
    
    #voz div[class*="col-span-2"] img[src*="ouvir-torcedor"] {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
    }
    
    #voz div[class*="col-span-2"] img[src*="img2-voz"] {
        margin-top: 0 !important;
    }
    
    /* Ajustes para botões Sim/Não - Aumentar espaçamento */
    /* #form form > div:nth-child(4) > div[class*="flex"] {
        gap: 25px !important;
        flex-wrap: wrap !important;
    }
    
    #form form > div:nth-child(4) label span[class*="w-"] {
        width: 150px !important;
        min-width: 120px !important;
    } */
    
    /* Ajustes para cards de recursos - Layout de coluna única */
    #movimento > div[class*="w-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    #movimento div[class*="grid-cols-4"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    #movimento div[class*="grid-cols-4"] > div {
        width: 100% !important;
    }

    #rodape {
        background-image: url('assets/img/bg-rodape-mobile.webp');
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
    }
}