/* =====================================
   RESET
===================================== */

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


/* =====================================
   CONFIGURAÇÕES GERAIS
===================================== */

body{

    background:#FFFFFF;

    color:#333333;

    font-family:
    "Verdana",
    Arial,
    sans-serif;

}

a{

    text-decoration:none;

}

img{

    display:block;

    border:0;

}

html{

    scroll-behavior:smooth;

}


/* =====================================
   CONTAINER
===================================== */

.container{

    width:100%;

    margin:0 auto;

    overflow:hidden;

}


/* =====================================
   BANNER SUPERIOR
===================================== */

.area-banner{

    background:#F1EFEF;

}

.banner-topo{

    overflow:hidden;

}


.banner-topo img{

    max-width:none;

}


/* =====================================
   MENU
===================================== */

.menu-principal{

    display:flex;

    align-items:center;

    flex-wrap:nowrap;

    margin-top:1px;

    margin-bottom:18px;

    background:#11315E;

    width:100%;

    padding:0;

    margin-left:0;

    padding-left:0;

}

.menu-principal a{

    display:block;

}


/* =====================================
   ÁREA PRINCIPAL
===================================== */

.area-principal{

    display:flex;

    align-items:flex-start;

    gap:25px;

}


/* =====================================
   CONTEÚDO CENTRAL
===================================== */

.conteudo{

    flex:1;

    min-width:0;

}


/* =====================================
   TRILHA
===================================== */

.trilha{

    margin-bottom:20px;
    padding-left:20px;

}


/* =====================================
   MISSÕES (CORRIGIDO)
===================================== */

.cards-missoes {
    display: flex;
    flex-wrap: nowrap; /* Garante que os 5 cards FIQUEM na mesma linha */
    gap: 15px;         /* Espaço entre os cards */
    align-items: flex-start;
    padding-left: 20px;
    width: 100%;
}

.cards-missoes a {
    display: block;    
    flex: 1;           /* Faz todos os 5 links terem EXATAMENTE o mesmo tamanho e encolherem juntos */
    min-width: 0;      /* Evita que o link quebre o flexbox */
}

/* A imagem dentro do link se adapta 100% ao link */
.cards-missoes a img {
    display: block;
    width: 100%;       /* Ocupa sempre 100% do link, sem espaço fantasma */
    height: auto;
}


/* =====================================
   DIVISOR DE CATEGORIAS
===================================== */

.div-categorias {
    margin-top: 10px;    /* Mantém o espaço em relação às missões */
    margin-bottom: 10px; /* Diminui o espaço em relação às categorias abaixo */
}


/* =====================================
   PESQUISA E PRODUTIVIDADE
===================================== */

.categorias{

    display:flex;

    flex-direction:column;

    gap:20px;

    padding-left:20px;

}

.linha-categorias{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:10px;

}

.linha-categorias a{

    display:block;

}

.separador-categoria{

    flex-shrink:0;

}


/* =====================================
   SIDEBAR
===================================== */

.sidebar{

    width:240px;

    flex-shrink:0;

}

.sidebar a{

    display:block;

}


/* =====================================
   PÁGINAS INTERNAS
===================================== */

.pagina{

    padding:10px 100px 40px 71px;

}

.pagina h1 {
    color: #11315E;
    margin-bottom: 20px;
    font-size: 32px;
    margin-right: 100px; /* Adiciona a margem direita */
}


.pagina h2{

    color:#11315E;
    margin-top:30px;
    margin-bottom:15px;
    margin-right: 100px; /* Adiciona a margem direita */
}

.pagina p {
    margin-bottom: 15px;
    line-height: 1.7;
    text-align: justify;
    
    /* Adicione esta linha abaixo para aumentar o tamanho */
    font-size: 18px; /* O padrão costuma ser 16px. 18px vai dar aquele "tapa" sutil que você quer */
}

.pagina ul{

    margin-left:25px;
    margin-bottom:20px;

}

.pagina li{

    margin-bottom:8px;

}


/* =====================================
   RODAPÉ
===================================== */

.rodape{

    background:#FDDB51;

    margin-top:50px;

    padding:40px 0;

    padding-left:40px;

}

.rodape h3{

    color:#11315E;

    margin-bottom:15px;

}

.rodape p{

    line-height:1.6;

    margin-bottom:10px;

}


/* =====================================
   RESPONSIVO
===================================== */

@media (max-width:1200px){

    .area-principal{

        flex-direction:column;

    }

    .sidebar{

        width:auto;

        position:relative;

        top:auto;

    }

}


@media (max-width:900px){

    .linha-categorias{

        flex-direction:column;

        align-items:flex-start;

    }

    .separador-categoria{

        display:none;

    }

}


@media (max-width:700px){

    .menu-principal{

        flex-wrap:wrap;

    }

}


/* =====================================
   BOTAO ANIMADO (CARDS E CATEGORIAS)
===================================== */

.botao-animado{

    display:inline-block;

    transition:
    transform 0.2s ease,
    filter 0.2s ease;

}

.botao-animado:hover{

    transform:translateY(-6px);
    contrast(3)
    filter:brightness(2);

}

/* =====================================
   BOTAO ANIMADO (MENU E SIDEBARS)
===================================== */ 
/* 1. Criamos os micro-movimentos da tremidinha */
@keyframes tremidinha {
    0% { transform: translateX(0); }
    15% { transform: translateX(-4px); }  /* Vai um pouquinho pra esquerda */
    30% { transform: translateX(4px); }   /* Vai um pouquinho pra direita */
    45% { transform: translateX(-3px); }  /* Diminui o movimento */
    60% { transform: translateX(3px); }
    75% { transform: translateX(-1px); }
    90% { transform: translateX(1px); }
    100% { transform: translateX(0); }    /* Para exatamente no centro */
}

/* 2. Aplicamos o efeito no hover da imagem do menu */
.ani-menus {
    /* Deixa o botão preparado para se mover sem quebrar o espaço ao redor */
    display: inline-block; 
}

.ani-menus:hover {
    /* Nome da animação: tremidinha
       Duração: 0.5s (meio segundo é o ideal para o efeito parecer rápido e responsivo. Se quiser 1 segundo inteiro, mude para 1s)
       Ritmo: linear
       Repetição: 1 (roda apenas uma vez por hover) */
    animation: tremidinha 0.5s linear 1;
}

/* =====================================
   AJUSTES PARA TELAS ATÉ 1366px
===================================== */

@media (max-width: 1366px){

    /* Sidebar um pouco mais estreita */
    .sidebar {
        width: 180px;
    }

    .sidebar img {
        width: 100%;
        height: auto;
    }

    /* Menor espaço entre conteúdo e sidebar */
    .area-principal {
        gap: 10px;
    }

    /* O Flexbox resolve o tamanho dos cards automaticamente, 
       então só reduzimos um pouco o espaço entre eles aqui se quiser */
    .cards-missoes {
        gap: 8px; 
    }
}