@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

:root { 
    --cinza-leve: #F6F6F6;
    --tag-vermelho: #E40034;
    --tag-verde: #169684;
    --tag-azul: #116690;
    --tag-roxo: #3E0075;
}


body { margin: 0; box-sizing: border-box; font-family: "Noto Serif", serif !important;  background-color: var(--cinza-leve);}
.container-full { margin: 0; padding: 0; background-color: #f9efe3;}

.centraliza-horizontal { display: flex; align-items: center; justify-content: flex-end !important; width: 100%; }

.seta-nav { margin: 0 1rem;}
.logo-mpf { margin: 0 auto; width: 100%; max-width: 110px;}
.ptop-3 { padding-top: 3rem; }
.pbottom-3 { padding-bottom: 3rem !important; }
.mbottom-3 { margin-bottom: 3rem;}
.flex-end { display: flex; justify-content: flex-end; align-items: flex-end; }
.flex-start { display: flex; justify-content: flex-start; align-items: flex-end; }
.flex-centro { display: flex; justify-content: center; align-items: center; width: 100%;}
.w50 { width: 50%;}
.highlight-bellow { padding: 0 0.4rem; border-radius: 5px; color: white; background-color: black; }

.pbottom-0 { padding-bottom: 0 !important; }
.container-pagina {     max-width: 1060px;    margin: 0 auto; padding-bottom: 5rem;    background: #fff;  position: relative; }
.pagina-0 { background-color: #8B0E1A !important;}
.topo-hero { display: flex; justify-content: center; align-items: flex-start; flex-direction: column;}
.p01-logo { margin: 1rem auto; width: 90%; max-width: 500px; z-index: 0;}
.p02-logo { margin: 1rem auto; width: 95%; max-width: 600px; z-index: 0;}
.arara { position: absolute; right: 0;  }
.p01-aspas { margin: 1rem auto; max-width: 733px; width: 100%; }
.p02-nuvem { position: absolute;   left: -205px;    z-index: 2;    top: 5px; }
.p03-tit {     max-width: 675px; width: 95%; margin: 2rem auto;}
.p03-graph { max-width: 850px; width: 95%; margin: 0 auto; }
.p04-tit { font-size: 1.8rem; line-height: 2rem;    color: white;    font-weight: bold; margin: 2rem 0;}
.p05-graphs {  display: flex; justify-content: center; gap: 1rem; align-items: flex-start; flex-wrap: wrap;}
.p05-graph1 { max-width: 380px; width: 90%;}
.p05-graph2 { max-width: 500px; width: 90%; padding: 2rem; }
.p06-tit1 { width: 100%; max-width: 330px;}
.p06-tit2 { width: 100%; max-width: 610px; }
.p06-indigena { width: 100%; max-width: 435px ; right: -50px;}
.p07-tit { max-width: 800px; width: 100%; margin: 0 1rem;}
.p08-tit { max-width: 765px; width: 100%; margin: 0 1.5rem;}
.p09-tit { max-width: 647px; width: 100%; margin: 0 1.5rem;}
.p09-kid { max-width: 490px; width: 100%; left: 22px; position: relative;}
.p10-tit { max-width: 511px; width: 100%; margin: 0 1.5rem;}
.tucano { max-width: 223px; width: 100%; position: relative; right: 30px;}
.p10-mapa { max-width: 722px; width: 100%; margin: 0 auto; display: flex;}
.p11-tit { max-width: 800px; width: 100%; margin: 0 1.5rem;}
.p11-elas {max-width: 610px; width: 100%;  margin: 0 auto; display: flex; position: relative; left: -20px;}
.p12-tit { max-width: 647px; width: 100%; margin: 0 auto; z-index: 5; }
.p12-cloud {  z-index: 2; position: absolute; left: 15px;}

.mandioka { max-width: 940px; width: 99%; position: relative;    left: -110px;}
.conteudo-branco { color: white; margin: 0 7rem; font-size: 1.4rem; font-weight: 400;}
.bg-embaixo { width: 100%; height: 230px; object-fit: cover; background-image: url(00-waves.svg); background-size: cover; background-repeat: no-repeat; background-position-y: top;    position: relative;}
.bg-embaixo-indios { width: 100%; height: 695px; object-fit: contain; background-image: url(07-indigenas-bottom-nuovo.png); background-size: cover; background-repeat: no-repeat; background-position-y: top;    position: relative; background-position-x: center ; }

p:last-of-type { margin-bottom: 0 !important;}

/* ANIMACAO FADEIN */
@media (prefers-reduced-motion: no-preference) {
    .animafade { scale: .8; opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: 250px 500px;
}
@keyframes fade-in { 
    to { scale: 1; opacity: 1; }
    }
}

/* ANIMACAO SCALE */

@media (prefers-reduced-motion: no-preference) {
    .animascala { scale: 0;
    animation: scale-in linear forwards;
    animation-timeline: view();
    animation-range: 250px 500px;
}
@keyframes scale-in { 
    to { scale: 1; }
    }
}

/* ANIMACAO HORIZONTAL */
.scroller { 
    animation: scrolling linear;
    animation-timeline: view(); 
}
.scroller[data-direction="right"] {
    animation-direction: reverse;
}
@keyframes scrolling {
    to { transform: translate(calc(-10% - 0.9rem));}
    
}

/* ANIMACAO HORIZONTAL OPOSTA */
.scroller-oposto { opacity: 0.8;
    animation: scrolling-opo linear forwards;
    animation-timeline: view(); 
    animation-range: 100px 500px;
}
.scroller-oposto[data-direction="right"] {
    animation-direction: reverse;
}
@keyframes scrolling-opo {
    to { opacity: 1; transform: translate(calc(-0.5rem - -10%));}
    
}

/* BREAKPOINTS */
@media screen and (max-width: 950px) {
    .p01-logo { width: 65%; margin-top: 5rem; }   
    .p02-logo { width: 80%; margin-top: 2rem; }
    .arara { width: 29%;  top: 65px; }
    .p02-nuvem { left: -350px;}
    .bg-embaixo-indios { height: 450px;}
    .p12-cloud { left: -90px; }
}
@media screen and (max-width: 640px) {
    .centraliza-horizontal { flex-direction: row !important; justify-content: center !important; align-items: flex-start;}
    .conteudo-branco { margin: 0 3rem; font-size: 1.2rem; }
    .bg-embaixo-indios { height: 250px;}
    .p12-cloud { left: -230px;   scale: 0.5; }
    .p02-nuvem { top: -90px; left: -495px;}
    .p09-kid { width: 85%;}
}

@media screen and (max-width: 420px) {
    .conteudo-branco { padding: 0 0.5rem; font-size: 1.1rem; }
    .animascala { animation-range: 25px 150px;    }
    .animafade { animation-range: 25px 150px;    }
    .mandioka { width: 100%; }
    .bg-embaixo {  background-size: 250%; background-position-y: center; }
    .p12-tit { width: 85%;} 
}