@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('header.css');
@import url('home.css');
@import url('artigos.css');
@import url('nossaMissao.css');
@import url('pre-footer.css');
@import url('footer.css');
@import url('PAGEartigos.css');
@import url('todosOSposts.css');
@import url('sobremim.css');

:root {
    --color-primary-1: #45515D;
    --color-primary-2: #5cc45f;
    --color-primary-3: #E04C51;
    --color-primary-4: #edc432;
    --color-primary-5: #54b9de;
    --color-primary-6: #f3c3c1;

    --color-neutral-1: #FFF;
    --color-neutral-2: #bcbdbe;
    --color-neutral-3: #0B0B85;
    --color-neutral-4: #83898e;
    --color-neutral-5: #be9e2949;
    --color-neutral-6: #54b9de90;
    --color-neutral-7: #5cc45faa;
    --color-neutral-8: #1d2328;
    --color-neutral-9: #bcbdbe71;

    --color-home-1: #45515d75;
    --color-home-2: #54b9de84;
    --color-home-3: #f3c3c171;
}

*{
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*  Previne overflow horizontal em telas pequenas, ta aplicado de forma global pra evitar que isso aconteça acidentalmente.
   O layout deve continuar responsivo, sem que isso atrapalhe */
html, body {
    width: 100%;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

.titulos {  
    color: var(--color-primary-1);
    font-size: 2rem;
    font-weight: 400;
}

.sub-titulos { 
    color: var(--color-primary-1);
    font-size: 1.2rem ;
    font-weight: 375;
}

.descriptions {
    color: var(--color-primary-1);
    font-size: 0.95rem;
    font-weight: 350;
}

/* Torna images e svgs responsivas como padrão pra evitar overflow */
img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 420px) {
    .titulos { font-size: 1.4rem; }
    .sub-titulos { font-size: 1rem; }
}

.reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1300ms cubic-bezier(.2,.9,.3,1), transform 1300ms cubic-bezier(.2,.9,.3,1);
    will-change: opacity, transform;
}
.reveal-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger > * { opacity: 0; transform: translateY(30px); transition: opacity 1300ms cubic-bezier(.2,.9,.3,1), transform 1300ms cubic-bezier(.2,.9,.3,1); }
.reveal-stagger > *.revealed { opacity: 1; transform: translateY(0); }