/* CSS Dinâmico - Correção de Backgrounds */

/* Hero Section Background */
.hero {
    background-image: url('https://v2.atitudejovem.org.br/uploads/static/backgrounds/bg_telaInicial01.png');
}

/* CTA Section Background */
.cta-bg {
    background-image: url('https://v2.atitudejovem.org.br/uploads/static/backgrounds/bg_telaInicial02.png');
}

/* Green Background Section - Footer com Gradient */
.green-bg {
    background: linear-gradient(180deg, #127906 0%, #58AE45 100%);
}

.index .actions-section {
    background-image: 
        url('https://v2.atitudejovem.org.br/uploads/static/backgrounds/bg_telaInicial04-2.png'),
        linear-gradient(to bottom, #ffffff 40%, #F4ECE6 40%);
}

/* Testimonials Section */
.testimonials {
    background-color: white;
    background-image: url('https://v2.atitudejovem.org.br/uploads/static/backgrounds/bg_folha.png');
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    position: relative;
    padding-bottom: 2rem;
}

/* Blog Section */
.blog {
    background-color: white;
    background-image: url('https://v2.atitudejovem.org.br/uploads/static/backgrounds/bg_telaInicial09.png');
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 86px;
    padding-bottom: 2rem;
}


/* Filtros */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    background: url('https://v2.atitudejovem.org.br/uploads/static/icons/icone_setaDown_gray.png') no-repeat right 12px center;
    background-size: 17px;

    border: 1px solid #AAA9A7;
    border-radius: 8px;
    cursor: pointer;
}

/* ============================================================================================
   ---------------------------------- Pagina: Sobre-Nos ----------------------------------
   ============================================================================================ */

/* Hero Section */
.hero-sobre {
    background: linear-gradient(135deg, #E37925 0%, #CE4A11 100%);
    background-image: url('https://v2.atitudejovem.org.br/uploads/static/backgrounds/bg_telaInicial08.png');
    background-size: cover;
    background-position: bottom right;
    background-repeat: no-repeat;
    position: relative;
}

/* Impacto Section */
.impacto-section {
    background: url('https://v2.atitudejovem.org.br/uploads/static/backgrounds/bg_telaInicial09.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

/* ============================================================================================
   ---------------------------------- Pagina: Seja-Voluntario ----------------------------------
   ============================================================================================ */
/* Hero Section */
/* fundo transparente da imagem */
.hero-voluntario {
    --bg-img: url('https://v2.atitudejovem.org.br/uploads/static/backgrounds/bg_telaInicial12.png');

    position: relative;
    isolation: isolate;
    background: #F4EDE7;
}

/* imagem */
.hero-voluntario::before {
    content: "";
    position: absolute;
    inset: 0;

    background: var(--bg-img) no-repeat bottom center / cover;

    z-index: 0;
}

/* fade respeitando transparencia */
.hero-voluntario::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(to right, rgba(0,0,0,0.6), transparent);

    /* reaproveita a mesma imagem */
    -webkit-mask: var(--bg-img) no-repeat bottom center / cover;
    mask: var(--bg-img) no-repeat bottom center / cover;

    pointer-events: none;
    z-index: 1;
}

.hero-voluntario > * {
    position: relative;
    z-index: 2;
}

/* Comece uma acao */
.seja-voluntario .actions-section{
    background: url('https://v2.atitudejovem.org.br/uploads/static/backgrounds/bg_telaInicial06.png');
    background-size: cover;
    background-position: center top; 
    background-repeat: no-repeat; 
    background-color: #F4ECE6; /* TO DO - Mudar fundo para branco quando tem eventos futuros  */
}