@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root, :root[data-theme='light']{
    --cor-fundo:#E5F2FF;

    --azul-escuro:#002B5B;
    --azul:#007BFF;
    --amarelo:#FFC107;
    --verde:#00E676;
    
    --cor-texto1:#000;
    --cor-texto2:#fff;
}

*{
    margin:0;
    padding:0;
}

body{
    background-color: var(--cor-fundo);
}

h1, h2, h3, h4, h5, h6{
    font-family: "Montserrat";
    font-weight: bold;
}
p, span, button, a, li{
    font-family: "Inter";
    font-size:20px;
    color:var(--cor-texto1);
}
button{
    border-radius:0.4em;
    border:none;
    box-shadow:2px 2px 4px;
    cursor:pointer;
    transition:0.5s;
}

.setaSubir{
    position: fixed;
    right:0;
    bottom:0;
    font-size:30px;
    background-color:var(--verde);
    color:var(--azul);
    box-shadow:1px 1px 3px #000;
    border-radius:100%;
    margin:60px;
    width:60px;
    height:60px;
    display:flex;
    align-items: center;
    justify-content: center;
    opacity: 30%;
    transition:0.5s;
}
.setaSubir:hover{
    opacity: 100%;
}

/* Inicio Header */
#menuMobile{
    display:none;
}
header{
    width:100%;
    position: absolute;
    padding-top:30px;
    display:flex;
    justify-content: space-around;
    align-items:center;
}
header .logo{
    width:200px;
    transition: 0.5s;
}
header .logo:hover{
    scale:1.05;
}
header nav{
    display:flex;
    gap:60px;
}
header nav a{
    text-decoration: none;
    font-size: 18px;
    color:var(--cor-texto2);
    transition:0.5s;
}
header nav a:hover{
    color:var(--verde);
}
header button{
    background-color: var(--verde);
    color:var(--azul-escuro);
    font-size:18px;
    padding:10px 25px;
}
header button:hover{
    scale:1.05;
    background-color: var(--amarelo);
}
/* Fim header */

/* Inicio Home */
#home{
    background-image: linear-gradient(var(--azul-escuro), var(--azul));
    height:750px;
    display:flex;
    justify-content: center;
    align-items:end;
    gap:90px;
}
#home .homeElementos{
    width:600px;
    height:65%;
    display:flex;
    flex-direction: column;
    gap:40px;
}
#home .homeElementos h1{
    color:var(--verde);
    font-size: 42px;
}
#home .homeElementos ul{
    display:flex;
    flex-direction: column;
    gap:20px;
}
#home .homeElementos ul li{
    color:var(--cor-texto2);
    list-style: none;
    padding-left:20px;
}
#home li:before {
    content: '';
    width:8px;
    height:8px;
    border-radius:5em;
    background-color: var(--amarelo);
    display: block;
    position: absolute;
    color:var(--amarelo);
    margin-top:8px;
    margin-left:-20px;
}
#home .homeElementos button{
    width:100%;
    padding:8px 0px;
    background-color: var(--amarelo);
    color:var(--azul-escuro);
}
#home .homeElementos button:hover{
    background-color: var(--verde);
}
#home img{
    width:700px;
}
/* Fim Home */
/* Inicio seção divulgação */
#divulg1{
    padding:50px 0;
    margin-top:60px;
    text-align: center;
    width:100%;
    display:flex;
    flex-direction: column;
    gap:25px;
}
#divulg1 h2{
    color:var(--azul);
    font-size:42px;
}
#divulg1 h3{
    color:var(--verde);
    font-size:24px;
}
#divulg1 button{
    padding:8px 150px;
    background-color: var(--verde);
}
#divulg1 button:hover{
    background-color: var(--amarelo);
}
#divulg1 i{
    position: absolute;
    font-size:90px;
    color:var(--amarelo);
    opacity:60%;
    z-index:-1;
}
#divulg1 .relogio{
    left:76vw;
    margin-top:10vw;
}
#divulg1 .calendario{
    left:15vw;
    margin-top:5vw;
}
/* Fim seção divulgação */

/* Inicio temas */
#temas{
    margin-top:110px;
    display:flex;
    flex-direction: column;
    gap:20px;
    padding:0 250px
}
#temas h2{
    font-size:32px;
    color:var(--azul);
}

#temas .temasElementos{
    display:flex;
    justify-content: space-between;
    align-items:center;
}
#temas .temasElementos .temasConjCard{
    width:650px;
    display:flex;
    flex-direction: column;
    gap:20px;
}
#temas .temasConjCard a{
    text-decoration: none;
}
#temas .temasConjCard .temasCard{ 
    border-radius:1em;
    display:flex;
    flex-direction: column;
    height:60px;
    transition: 0.5s;
    cursor:pointer;
}
#temas .temasConjCard .verde{
    background-color: #00e67735;
    border:5px solid var(--verde);
}
#temas .temasConjCard .amarelo{
    background-color: #FFC10735;
    border:5px solid var(--amarelo);
}

#temas .temasConjCard .temasCard .titulo{
    position: relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:20px;
    border-radius:0.8em;
    padding:18px;
}
.temasConjCard .verde .titulo{
    background-color:#95EECF;
}
.temasConjCard .amarelo .titulo{
    background-color:#EEE2A8;
}
.temasCard .titulo h3, .temasCard .titulo i{
    font-weight:500;
    color:var(--azul-escuro);
    font-size:20px;
}

#temas .temasConjCard .temasCard .texto{
    position: relative;
    z-index:1;
    padding:18px;
}
#temas .temasConjCard .temasCard .texto p{
    margin-top:-70px;
    opacity: 0;
    transition: 0.5s;
}
#temas .temasConjCard .temasCard .texto p u{
    font-size:12px;
    color:var(--azul);
}

#temas .temasConjCard .temasCard:hover{
    height:160px;
}

#temas .temasCard:hover .texto p{
    opacity: 1;
    margin-top:0px;
}

#temas .temasCard:hover .titulo{
    border-radius:1em 1em 0 0;
}
#temas .temasCard:not(:hover) .titulo{
    transition: 0.5s;
}

#temas .temasElementos img{
    width:420px;
}
/* Fim temas */
/* Inicio sobre */
#sobre{
    margin-top:110px;
    padding:80px 0;
    background-image: linear-gradient(var(--azul-escuro), var(--azul));
    display:flex;
    flex-direction: column;
    gap:20px;
    align-items:center;
    justify-content:center;
    text-align:center;
}
#sobre img{
    width:500px;
}
#sobre h2{
    font-size:34px;
    color:var(--verde);
}
#sobre ul{
    display:flex;
    flex-direction: column;
    gap:25px;
    margin-top:30px;
}
#sobre ul li{
    color:var(--cor-texto2);
    text-align:start;
    list-style: none;
}
#sobre li:before {
    content: '';
    width:8px;
    height:8px;
    border-radius:5em;
    background-color: var(--amarelo);
    display: block;
    position: absolute;
    color:var(--amarelo);
    margin-top:8px;
    margin-left:-20px;
}
#sobre ul li .corTexto{
    color:var(--verde);
    font-weight: bold;
}
/* Fim sobre */
/* Inicio seção divulgação */
#divulg2{
    margin-top:110px;
    display:flex;
    justify-content: space-evenly;
    align-items:center;
    gap:40px;
    padding:0 300px;
}
#divulg2 img{
    width:500px;
}
#divulg2 h2{
    font-size:32px;
    color:var(--azul);
}
#divulg2 .divulgConteudo{
    display:flex;
    justify-content: center;
    flex-direction: column;
    gap:30px;
    text-align:end;
}
#divulg2 .divulgConteudo h3{
    color:var(--verde);
}
#divulg2 .divulgConteudo h3 .corTexto{
    color:var(--amarelo);
}
#divulg2 .divulgConteudo button{
    padding:8px 80px;
    background-color: var(--verde);
}
#divulg2 .divulgConteudo button:hover{
    background-color: var(--amarelo);
}
/* Fim seção divulgação 2 */
/* Inicio contato */
#contato{
    margin-top:160px;
    display:flex;
    justify-content: center;
    align-items:center;
    gap:150px;
}
#contato .contatoConteudo{
    display:flex;
    flex-direction: column;
    gap:30px;
}
#contato .contatoConteudo h2{
    color:var(--azul);
    font-size:43px;
}
#contato .contatoConteudo a{
    text-decoration: none;
}
#contato .contatoConteudo .contatoTexto{
    display:flex;
    gap:15px;
    padding:10px;
    align-items: center;
    transition: 0.5s;
}
#contato .contatoConteudo .contatoTexto:hover{
    background-color: var(--verde);
}
#contato .contatoConteudo .contatoTexto:hover i{
    color:var(--azul);
}
#contato .contatoConteudo .contatoTexto i{
    font-size:30px;
    color:var(--amarelo);
    transition: 0.5s;
}
#contato .contatoConteudo .contatoTexto span{
    font-size:20px;
}
#contato img{
    width:450px;
}
/* Fim contato */
/* Inicio footer */
footer{
    margin-top:150px;
    background-image: linear-gradient(var(--azul-escuro), var(--azul));
    padding:30px 100px;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
footer .logoTexto{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:5px;
}
footer .logoTexto img{
    width:200px;
}
footer .logoTexto span{
    font-size:16px;
    font-weight: bold;
    color:var(--verde);
}
footer span, footer span a{
    font-size:15px;
    color:var(--cor-texto2);
    text-align:center;
}
footer span a{
    color:var(--verde);
}
footer .redes{
    display:flex;
    align-items: center;
    justify-content: center;
    gap:30px;
}
footer .redes a{
    text-decoration: none;
}
footer .redes i{
    color:var(--cor-texto2);
    background-color: var(--verde);
    border-radius:100%;
    font-size:20px;
    width:40px;
    height:40px;
    display:flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}
footer .redes i:hover{
    background-color: var(--amarelo);
}
/* Fim footer */

/* Inicio versão mobile -------------------------------------------- */

@media (max-width: 1400px) {
    #home{
        gap:50px;
    }
    #home .homeElementos{
        width:80%;
        height:70%;
        gap:20px;
    }
    #home img{
        width:600px;
    }

    /* Seções que usam padding grande */
    #temas {
        padding: 0 50px; /* Reduz o padding lateral */
    }

    #divulg2 {
        padding: 0 50px;
    }

    /* Contato */
    #contato {
        gap: 50px; /* Reduz o gap entre imagem e conteúdo */
    }
}

/* ============================================== */

@media (max-width: 1000px) {
    .setaSubir{
        display:none;
    }

    /* --- Tipografia e Elementos Base --- */
    p, span, button, a, li {
        font-size: 16px; /* Reduz o tamanho da fonte para melhor leitura em mobile */
    }
    
    /* --- Header --- */
    header{
        display:none;
    }

    #menuMobile{
        padding-top:2vh;
        margin-top:-380px;
        position: fixed;
        z-index:999;
        width:100%;
        background-color: var(--azul-escuro);
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:40px;
        transition:0.5s;
    }
    #menuMobile img{
        width:200px;
        margin-top:20px;
    }
    #menuMobile nav{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:40px;
    }
    #menuMobile nav a{
        text-decoration: none;
        font-size:18px;
        color:var(--cor-texto2);
    }
    #menuMobile nav a::before{
        content: '';
        width:20px;
        height:2px;
        background-color: var(--verde);
        display: block;
        position: absolute;
        color:var(--amarelo);
        margin-top:10px;
        margin-left:-40px;
    }
    #menuMobile button{
        background-color: var(--verde);
        color:var(--azul-escuro);
        font-size:16px;
        padding:10px 25px;
    }
    #menuMobile #fecharMenuMobile{
        font-size:20px;
        background-color:var(--verde);
        color:var(--cor-texto2);
        border:8px solid var(--azul-escuro);
        border-radius:100%;
        margin-bottom:-20px;
        width:40px;
        height:40px;
        display:flex;
        align-items: center;
        justify-content: center;
        cursor:pointer;
    }

    /* --- Home --- */
    #home {
        flex-direction: column;
        padding: 25px 20px 0px 20px; 
        gap: 40px;
        align-items: center;
        justify-content: end;
    }
    #home .homeElementos {
        width: 100%; 
        max-width: 450px; 
        height: auto;
    }
    #home .homeElementos h1 {
        font-size: 32px;
        text-align: center;
    }
    #home img {
        width: 100%;
        max-width: 400px;
    }

    /* --- Divulgação 1 --- */
    #divulg1 {
        width:90%;
        margin-top: 40px;
        padding:30px 20px;
        gap:25px;
    }
    #divulg1 h2 {
        font-size: 32px;
    }
    #divulg1 h3 {
        font-size: 20px;
    }
    #divulg1 button {
        padding: 8px 50px;
        width: 70%;
        margin: 0 auto;
    }
    /* Esconde os ícones de fundo para não poluir o mobile */
    #divulg1 i {
        display: none;
    }

    /* --- Temas --- */
    #temas {
        padding: 0 20px;
        margin-top: 50px;
    }
    #temas .temasElementos {
        flex-direction: column;
        gap: 60px;
    }
    #temas .temasElementos img {
        width: 100%;
        max-width: 350px;
    }
    #temas .temasElementos .temasConjCard {
        width: 100%;
        order: 2;
    }
    #temas .temasConjCard .temasCard:hover {
        height: 120px;
    }

    #temas .temasConjCard .temasCard .titulo{
        padding:20px;
    }
    .temasCard .titulo h3, .temasCard .titulo i{
        font-size:16px;
    }

    #temas .temasConjCard .temasCard .texto{
        position: relative;
        z-index:1;
        padding:20px;
    }

    #temas .temasConjCard .temasCard:hover{
        height:170px;
    }

    /* --- Sobre --- */
    #sobre {
        padding:50px 30px;
    }
    #sobre img {
        width: 80%;
        max-width: 300px;
    }
    #sobre ul li {
        padding-left: 10px;
        text-align: left;
    }
    #sobre h2{
        font-size:25px;
    }

    /* --- Divulgação 2 --- */
    #divulg2 {
        flex-direction: column;
        padding: 0 20px;
        margin-top: 80px;
        gap: 30px;
    }
    #divulg2 .divulgConteudo h3, #divulg2 .divulConteudo h3 span{
        font-size:18px;
    }
    #divulg2 img {
        width: 100%;
        max-width: 350px;
    }
    #divulg2 .divulgConteudo {
        text-align: center;
        gap: 20px;
    }
    #divulg2 .divulgConteudo button {
        padding: 8px 40px;
        width: 80%;
        margin: 0 auto;
    }

    /* --- Contato --- */
    #contato {
        flex-direction: column;
        margin-top: 80px;
        gap: 40px;
        padding: 0 20px;
    }
    #contato img {
        width: 80%;
        max-width: 350px;
        order: 1;
    }
    #contato .contatoConteudo {
        order: 2;
        width: 100%;
        max-width: 450px;
    }
    #contato .contatoConteudo .contatoTexto i{
        font-size:25px;
    }
    #contato .contatoConteudo .contatoTexto span{
        font-size:18px;
    }

    /* --- Footer --- */
    footer {
        margin-top:80px;
        flex-direction: column;
        gap: 30px;
        padding: 30px 20px;
        text-align: center;
    }
    footer .redes {
        order: -1;
    }
    footer .logoTexto img {
        width: 150px;
    }
}