/* =========================
   VARIÁVEIS DE CORES
========================= */

:root{

    --azul-principal:#012F86;
    --azul-antigo:#083D77;

    --azul-claro:#A9C1F8;
    --azul-soft:#D0E6FE;

    --roxo:#4E52D0;

    --verde-soft:#D9ECD6;
    --verde:#5EAE52;

    --laranja:#F2A81A;

    --amarelo-antigo:#FFE347;

    --texto:#363020;

    --branco:#FFFFFF;

    --fundo:#F9FBFC;

}





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


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:'Montserrat',sans-serif;

    background:var(--fundo);

    color:var(--texto);

    line-height:1.6;

    overflow-x:hidden;

}






/* =========================
   REVEAL ANIMATION
========================= */


.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:all .6s ease;

}


.reveal.active{

    opacity:1;

    transform:translateY(0);

}






/* =========================
   BOTÃO WHATSAPP
========================= */


.btn-whatsapp{


    position:fixed;

    bottom:24px;

    right:24px;


    width:64px;

    height:64px;


    border-radius:50%;


    background:#25D366;


    display:flex;

    justify-content:center;

    align-items:center;


    box-shadow:0 4px 12px rgba(0,0,0,.3);


    z-index:1000;


    transition:.3s;


    animation:pulse 2s infinite;


}



.btn-whatsapp:hover{

    transform:scale(1.08);

}



.btn-whatsapp img{

    width:34px;

    height:34px;

}







/* =========================
   HERO
========================= */


.hero{


    min-height:100vh;


    padding:80px 10%;


    display:grid;


    grid-template-columns:1.3fr .9fr;


    gap:50px;


    align-items:center;



    background:

    linear-gradient(

        135deg,

        var(--azul-soft) 0%,

        #ffffff 100%

    );


}






.hero-content h1{


    font-size:4rem;


    line-height:1.05;


    color:var(--azul-principal);


    margin-bottom:25px;


    font-weight:800;


}





.hero-content p{


    font-size:1.1rem;


    max-width:650px;


    margin-bottom:35px;


    color:#555;


}

/* =========================
   LOGO HERO
========================= */

.hero-logo{
    margin-bottom:18px;
}

.hero-logo img{
    width:180px;
    height:auto;
    display:block;

    filter: drop-shadow(0 10px 18px rgba(1,47,134,.12));
}




.tag{


    display:inline-block;


    background:var(--azul-principal);


    color:white;


    padding:10px 18px;


    border-radius:999px;


    font-size:.99rem;


    font-weight:700;


    margin-bottom:25px;


}







/* =========================
   CARD DESTAQUE HERO
========================= */


.hero-highlight{


    background:white;


    padding:40px;


    border-radius:24px;


    box-shadow:

    0 20px 50px rgba(0,0,0,.08);



    border-top:8px solid var(--laranja);



    display:flex;

    flex-direction:column;


}





.hero-highlight h3{


    color:var(--azul-principal);


    margin:0 0 20px;


    font-size:1.5rem;


}





.highlight-links{


    display:flex;


    flex-direction:column;


    gap:14px;



    max-height:260px;


    overflow-y:auto;


    padding-right:8px;


}





.hero-highlight a{


    color:var(--azul-principal);


    text-decoration:none;


    padding:12px 16px;


    border-radius:12px;


    background:#F8F9FA;


    transition:.3s;


    font-weight:500;


}





.hero-highlight a:hover{


    background:var(--azul-claro);


    transform:translateX(5px);


}





.highlight-links::-webkit-scrollbar{


    width:6px;


}



.highlight-links::-webkit-scrollbar-thumb{


    background:var(--laranja);


    border-radius:999px;


}



.highlight-links::-webkit-scrollbar-track{


    background:transparent;


}

/* =========================
   BOTÕES
========================= */


.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}





.btn-primary{


    background:var(--azul-principal);


    color:white;


    padding:15px 28px;


    border-radius:14px;


    text-decoration:none;


    font-weight:700;


    transition:.3s;


}




.btn-primary:hover{


    background:var(--roxo);


    transform:translateY(-4px);


}





.btn-secondary{


    background:white;


    border:2px solid var(--azul-principal);


    color:var(--azul-principal);


    padding:15px 28px;


    border-radius:14px;


    text-decoration:none;


    font-weight:700;


}





/* =========================
   SEÇÕES GERAIS
========================= */


.section{


    padding:100px 10%;


}





.section-title{


    text-align:center;


    margin-bottom:60px;


}





.section-title h2{


    font-size:3rem;


    color:var(--azul-principal);


    margin-bottom:15px;


}





.section-title p{


    max-width:700px;


    margin:auto;


}

/* ===========================
card meo
==============================*/
/* 
.guide-card{
    text-align: center;

    width: 600px;
} */




/* =========================
   FUNDOS DAS SEÇÕES
========================= */


.section-soft{


    background:var(--verde-soft);


}




.section-blue{


    background:var(--azul-soft);


}





.section-purple{


    background:#EEF0FF;


}





.section-green{


    background:var(--verde-soft);


}





.section-orange{


    background:#FFF1D6;


}





.section-dark{


    background:var(--azul-principal);


    color:white;


}





.section-dark .section-title h2{


    color:white;


}


/* ===================== largura dos cards solitarios */

/* .single-card{
    display:grid;
    justify-content:center;
    grid-template-columns: 600px;
}


.single-card .guide-card{
    width:100%;
    max-width:600px;
}

.single-card .test-card{
     width:100%;
    max-width:600px;
}

 */


/* =========================
   CORES INDIVIDUAIS
   DAS NOVAS SEÇÕES
========================= */


/* Organização */

#organizacao{


    background:#EEF0FF;


}





#organizacao .test-card{


    border-top:6px solid var(--roxo);
    


}





#organizacao .test-card a{


    background:var(--roxo);


    color:white;


}






/* Preparação */


#preparacao{


    background:var(--azul-soft);


}





#preparacao .test-card{


    border-top:6px solid var(--azul-principal);


}






#preparacao .test-card a{


    background:var(--azul-principal);


    color:white;


}






/* Profissão */


#profissao{


    background:var(--verde-soft);


}





#profissao .test-card{


    border-top:6px solid var(--verde);


}





#profissao .test-card a{


    background:var(--verde);


    color:white;


}







/* ENEM */


#enem{


    background:var(--azul-soft);


}





#enem .guide-card{


    border-top:6px solid var(--azul-principal);


}







/* FUVEST */


#fuvest{


    background:white;


}





#fuvest .guide-card{


    border-top:6px solid var(--laranja);


}







/* UNICAMP */


#unicamp{


    background:var(--verde-soft);


}





#unicamp .guide-card{


    border-top:6px solid var(--verde);


}







/* TRI */


#tri{


    background:#EAF6E7;


}





#tri .guide-card{


    border-top:6px solid var(--verde);


}







/* SIMULADOS */


#simulados{


    background:#FFF1D6;


}





#simulados .guide-card{


    border-top:6px solid var(--laranja);


}


/* =========================
   GUIAS
========================= */


.guide-grid{


    display:grid;


    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));


    gap:25px;


}

.guide-grid-single{
    grid-template-columns: minmax(320px,600px);
    justify-content: center;
}





.guide-card{


    background:white;


    padding:35px;


    border-radius:20px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.06);



    transition:.3s;


    text-decoration:none;


    color:inherit;


    display:block;


}





.guide-card:hover{


    transform:translateY(-8px);


    box-shadow:

    0 18px 35px rgba(0,0,0,.12);


}






.guide-card h3{


    color:var(--azul-principal);


    margin-bottom:10px;


}






.guide-card p{


    color:#555;


}






/* =========================
   TESTES
========================= */


.test-grid{


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));


    gap:25px;


}

.test-grid-single{
    grid-template-columns: minmax(320px,600px);
    justify-content: center;
}





.test-card{


    background:white;


    padding:35px;


    border-radius:20px;


    text-align:center;


    box-shadow:

    0 10px 30px rgba(0,0,0,.08);



    transition:.3s;


}





.test-card:hover{


    transform:translateY(-8px);


}






.test-icon{


    font-size:2rem;


    display:block;


    margin-bottom:15px;


}





.test-card h3{


    color:var(--azul-principal);


    margin-bottom:12px;


}





.test-card p{


    color:#555;


}





.test-card a{


    display:inline-block;


    margin-top:20px;


    background:var(--laranja);


    color:var(--azul-principal);


    text-decoration:none;


    font-weight:700;


    padding:10px 18px;


    border-radius:10px;


    transition:.3s;


}





.test-card a:hover{


    transform:scale(1.05);


}





/* =========================
   NOTÍCIAS
========================= */


.news-layout{


    display:grid;


    grid-template-columns:2fr 1fr;


    gap:25px;


}






.news-featured{


    background:var(--azul-principal);


    color:white;


    text-decoration:none;


    padding:40px;


    border-radius:24px;


    transition:.3s;


}





.news-featured:hover{


    transform:translateY(-5px);


}





.news-featured span{


    color:var(--laranja);


    font-weight:700;


}






.news-featured h3{


    font-size:2rem;


    margin:15px 0;


}





.news-featured p{


    color:#F1F1F1;


}






.news-side{


    display:flex;


    flex-direction:column;


    gap:20px;


}






.news-mini{


    background:white;


    padding:25px;


    border-radius:18px;


    color:inherit;


    text-decoration:none;


    box-shadow:

    0 8px 20px rgba(0,0,0,.06);


    transition:.3s;


}





.news-mini:hover{


    transform:translateY(-5px);


}





.news-mini h4{


    color:var(--azul-principal);


}

/* =========================
   TIMELINE
========================= */


.timeline{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}






.timeline-item{


    background:white;


    color:var(--texto);


    padding:30px;


    border-radius:18px;


    text-align:center;


    box-shadow:

    0 10px 25px rgba(0,0,0,.06);


}





.timeline-item span{


    width:60px;


    height:60px;


    display:flex;


    align-items:center;


    justify-content:center;


    margin:auto auto 15px;


    border-radius:50%;


    background:var(--laranja);


    color:var(--azul-principal);


    font-weight:800;


}





.timeline-item h3{


    color:var(--azul-principal);


    margin-bottom:10px;


}






/* =========================
   CTA
========================= */


.cta{


    background:var(--laranja);


    text-align:center;


    padding:120px 10%;


}






.cta h2{


    color:var(--azul-principal);


    font-size:3rem;


    margin-bottom:15px;


}






.cta p{


    max-width:700px;


    margin:auto auto 35px;


}





.cta .btn-primary{


    background:var(--azul-principal);


}





.cta .btn-primary:hover{


    background:white;


    color:var(--azul-principal);


}






/* =========================
   FOOTER
========================= */


footer{


    background:var(--texto);


    color:white;


    text-align:center;


    padding:35px;


}

/* MINUTOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO */


/*=========================
      MINUTO ENEM
==========================*/

.minuto-enem{

    padding:90px 8%;
    background:#f8fbff;

}

.section-title{

    text-align:center;
    max-width:700px;
    margin:0 auto 60px;

}

.section-title .tag{

    display:inline-block;
    background:#ffd34d;
    color:#003b8f;
    font-weight:700;
    padding:8px 18px;
    border-radius:30px;
    margin-bottom:20px;

}

.section-title h2{

    font-size:2.4rem;
    color:#123d8f;
    margin-bottom:18px;

}

.section-title p{

    color:#666;
    line-height:1.8;

}

/* GRID */

.videos-grid{

    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:35px;
    flex-wrap:wrap;

}

/* CARD DO VÍDEO */

.video-card{

    background:white;
    width:450px;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.video-player{

    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px 20px 10px;

}

.video-player video{

    width:100%;
    max-width:320px;
    border-radius:15px;

}

.video-info{

    text-align:center;
    padding:20px 25px 28px;

}

.episode{

    display:inline-block;
    background:#0d6efd15;
    color:#0d6efd;
    font-weight:700;
    padding:6px 14px;
    border-radius:20px;
    margin-bottom:18px;

}

.video-info h3{

    color:#123d8f;
    margin-bottom:12px;
    font-size:1.4rem;

}

.video-info p{

    color:#666;
    line-height:1.7;

}

/* CARD "EM BREVE" */

.coming-soon{

    background:white;
    width:320px;
    min-height:420px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    border-radius:22px;
    padding:35px 25px;
    text-align:center;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.coming-soon .icon{

    font-size:3rem;
    margin-bottom:20px;

}

.coming-soon h3{

    color:#123d8f;
    margin-bottom:15px;

}

.coming-soon p{

    color:#666;
    line-height:1.7;

}

/* RESPONSIVO */

@media(max-width:900px){

    .videos-grid{

        flex-direction:column;
        align-items:center;

    }

    .video-card{

        width:100%;
        max-width:500px;

    }

    .coming-soon{

        width:100%;
        max-width:500px;
        min-height:auto;

    }

    .video-player video{

        max-width:100%;

    }

}


/* =========================
   ANIMAÇÃO WHATSAPP
========================= */


@keyframes pulse {


    0% {


        box-shadow:

        0 0 0 0 rgba(37,211,102,.6);


    }



    70% {


        box-shadow:

        0 0 0 15px rgba(37,211,102,0);


    }



    100% {


        box-shadow:

        0 0 0 0 rgba(37,211,102,0);


    }


}


/* =========================
   RESPONSIVIDADE
========================= */


@media(max-width:1100px){


    .hero{


        grid-template-columns:1fr;


        text-align:center;


        padding:80px 8%;


    }



    .hero-content{


        display:flex;


        flex-direction:column;


        align-items:center;


    }




    .hero-highlight{


        max-width:600px;


        width:100%;


        margin:auto;


    }



    .timeline{


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


    }



}






@media(max-width:768px){



    /* =========================
       GERAL
    ========================= */


    .section{


        padding:70px 8%;


    }




    .section-title{


        margin-bottom:40px;


    }




    .section-title h2{


        font-size:2.1rem;


        line-height:1.2;


    }




    .section-title p{


        font-size:.95rem;


    }






    /* =========================
       HERO MOBILE
    ========================= */


    .hero{


        min-height:auto;


        padding:60px 8% 80px;


        gap:40px;


    }





    .hero-content h1{


        font-size:2.2rem;


        line-height:1.15;


    }




    .hero-content p{


        font-size:1rem;


    }




    .tag{


        font-size:.8rem;


        padding:8px 14px;


    }






    .hero-highlight{


        padding:24px;


        border-radius:20px;


    }





    .hero-highlight h3{


        font-size:1.2rem;


    }




    .highlight-links{


        max-height:none;


        gap:10px;


    }




    .hero-highlight a{


        font-size:.9rem;


        padding:11px 12px;


    }







    /* =========================
       BOTÕES
    ========================= */


    .hero-buttons{


        flex-direction:column;


        width:100%;


    }





    .btn-primary,
    .btn-secondary{


        width:100%;


        text-align:center;


        padding:14px 20px;


    }







    /* =========================
       CARDS
    ========================= */


    .guide-grid,
    .test-grid{


        grid-template-columns:1fr;


        gap:18px;


    }







    .guide-card,
    .test-card{


        padding:28px;


        border-radius:18px;


    }






    .guide-card h3{


        font-size:1.15rem;


    }







    .test-icon{


        font-size:1.8rem;


    }







    /* =========================
       NOTÍCIAS
    ========================= */


    .news-layout{


        grid-template-columns:1fr;


    }





    .news-featured{


        padding:28px;


    }





    .news-featured h3{


        font-size:1.5rem;


    }





    .news-mini{


        padding:20px;


    }








    /* =========================
       TIMELINE
    ========================= */


    .timeline{


        grid-template-columns:1fr;


    }







    .timeline-item{


        padding:25px;


    }







    /* =========================
       CTA
    ========================= */


    .cta{


        padding:80px 8%;


    }




    .cta h2{


        font-size:2rem;


        line-height:1.2;


    }




    .cta p{


        font-size:.95rem;


    }







    /* =========================
       WHATSAPP
    ========================= */


    .btn-whatsapp{


        width:56px;


        height:56px;


        bottom:16px;


        right:16px;


    }





    .btn-whatsapp img{


        width:28px;


        height:28px;


    }


}






@media(max-width:400px){



    .hero-content h1{


        font-size:1.9rem;


    }





    .section-title h2{


        font-size:1.8rem;


    }

    .hero-logo{
    display:flex;
    justify-content:center;
    }

    .hero-logo img{
    width:100px;
    }

    .hero-highlight{


        padding:12px;


    }




    .hero-highlight a{


        font-size:.85rem;


    }




}