@font-face { font-family: Inter; src: url(fonts/Inter_24pt-Light.ttf); font-weight: 300; }
@font-face { font-family: Inter; src: url(fonts/Inter_24pt-Medium.ttf); font-weight: normal; }
@font-face { font-family: Inter; src: url(fonts/Inter_28pt-Bold.ttf); font-weight: bold; }
@font-face { font-family: Inter; src: url(fonts/Inter_28pt-ExtraBold.ttf); font-weight: 900; }

body { font-family: 'Inter', sans-serif !important; background: #efefef !important;}
h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif !important;  }

*, *::before, *::after { box-sizing: initial; }

.cor-white { color: white !important; }
.cor-roxa { color: #5E2F7E !important; }
.max-w-550 { max-width: 550px; width: 100%;}
.align-self-center { align-self: center;}
.justify-self-center { justify-self: center;}
.justify-self-start { justify-self: flex-start;}
.justify-self-end { justify-self: flex-end;}
.text-align-center { text-align: center;}
.margem-auto { margin: auto !important;}
.peso-300 { font-weight: 300 !important;}
.peso-900 { font-weight: 900 !important;}
.fonte-16 { font-size: 16px; }
.cola-4 { position: relative; bottom: -8px;}
.sobe-top-20 { position: relative; top: -20px;}
.mb-zero { margin-bottom: 0 !important;}

.container { max-width: 1440px; width: 100%; margin: auto;}
.sessao-home { padding: 2rem 5rem !important; }
.sessao-conteudo { color: #F5F5F5;    font-size: 18px;     font-weight: normal; line-height: 27px; }  
.ss-o-projeto { background-color: #5E2F7E;  background-image: url(imagens/secao-bg-o-projeto-illustra.svg); height: 60vh; min-height: 500px; background-repeat: no-repeat; background-position: right; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
.tit-seccion { font-size: 3rem; font-weight: 900; letter-spacing: -1px; color: white; margin: 0 !important;}
.link-botao-branco { font-size: 1.2rem !important; background-color: white; border-radius: 50px; box-shadow: 0px 3.379px 3.379px 0px #A6CE39, 0px 3.379px 3.379px 0px #A6CE39; padding: 0.9rem 3rem; font-weight: 400; text-decoration: none; margin: 1rem 0; color: #5e2f7e !important; width: max-content;}
.link-botao-branco:hover { outline: 2px solid white; background: #5e2f7e; color: white !important; box-shadow: 0px 3.379px 3.379px 0px #9075b5; } 
#content .link-botao-branco:hover { color: white !important; }
.outline-roxo { outline: 2px solid #5E2F7E !important; } 
.tarja-verde { background-color: #A6CE39; width: 100%; height: 35px; padding: 0; margin: 0; }
.ss-o-mpf { background-color: #F5F5F5; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-height: 50vh; }
.img-o-mpf { width: 100%; max-width: 684px; }
.ss-combate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background-color: #5E2F7E; min-height: 60vh; }
.ss-teste { background-color: #A6CE39; height: 100%; }
.ss-teste h2 { font-size: 3rem !important;}
.ss-noticias { background-color: #F5F5F5; min-height: 60vh; background-image: url(imagens/bg-ilustra-noticias.svg); background-position: left; background-repeat: no-repeat; 
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.5rem;
}
.quiz-div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.quiz-navega { font-size: 28px; color: #5E2F7E !important; }
.quiz-navega:visited, .quiz-navega:link { color: #5E2F7E !important; text-decoration: none; border-bottom: 0 !important; }
.quiz-navega:hover, .quiz-navega:focus { text-decoration: underline; color: #5E2F7E !important;}

@media only screen and (max-width: 640px) {
    .sessao-home { padding: 2rem !important;}
    .ss-o-mpf { grid-template-columns: 1fr; }
    .img-o-mpf { order: -1; justify-self: center; width: 90%;}
    .ss-o-projeto p { background-color: #5E2F7E; }
    .quiz-div { grid-template-columns: 1fr;}
    .quiz-navega { justify-self: center; text-align: center; }

}

@media only screen and (max-width: 460px) {
.dsktmain-hl1 { font-size: 32px;  }
.dsktmain-hl2 { font-size: 38px; line-height: 2.4rem; }
.dstkmain-col1 { padding-left: 1rem !important; }
.dstk2-barra-btns { flex-direction: column; width: 100%;}
.botao-tab { width: 100%; }
}


/*  AJUSTES LOGO E BUSCA SÓ PARA HOME  */

/* #portal-logo { padding-left: 15px !important; margin: 11px 0 1.375em 0 !important;  }  */
#portal-searchbox {  margin: 0 !important;     top: -10px !important; }
@media handheld, screen and (max-device-width: 480px) {
/*    #portal-columns { margin-top: 4rem !important; }   */
}
@media handheld, screen and (max-device-width: 910px) {
    #portal-searchbox { top: 0 !important; }
/*    #portal-logo { margin: 0px 0 1.375em 0 !important; }   */
}


/* MODALZ */

.w3-modal{z-index:1000;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;max-width:1200px; width: 100%;}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
.w3-container { margin-left: 30px; margin-right: 15px; border-radius: 20px; padding-bottom: 25px; padding-top: 5px; line-height: 1.5rem; font-size: 1.2rem; }
.w3-container-table { margin-left: 30px; margin-right: 15px; border-radius: 20px; text-align: center; padding-bottom: 25px; }
.w3-container p { font-size: 1.15rem;    max-width: 1060px;    line-height: 1.7rem;    font-weight: 400;    color: #383939;    margin-bottom: 2rem;  }
.w3-animate-top{position:relative;animation:animatetop 0.4s;}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.image-navega {margin: 0 10px 0 10px; cursor: pointer;} 
.pergunta-modal { font-family: 'Roboto Condensed', sans-serif; margin: 2px 0 2px 0; text-transform: uppercase; font-weight: bold; color: white; font-size: 1.5rem;}
.fechar-modal { margin: 0px 5px 0 0; cursor: pointer; position: relative; text-align: right; width: 100%; top: 5px; right: 10px;}
.cabeca { display: flex; justify-content: space-between; align-items: baseline;}
.w3-modal-content header {color: white; }
.titulo-modal-notícia { color: black; font-size: 1.5rem; font-weight: bold; text-align: center; }

/* CARTAS QUIZ */

#quiz {
    position: relative;
    max-width: 360px;
    min-height: 450px;
    height: 100%
    perspective: 1000px;
    margin: 1rem auto !important;
}
  
  .card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: opacity 0.5s, transform 0.9s;
    opacity: 0;
    visibility: hidden;
  }
  
  .card.active {
    opacity: 1;
    visibility: visible;
    transform: rotateZ(0deg) rotateY(0deg) translateX(0);
    
  }
  
  /* Efeito de transição de entrada e saída das cartas */
  .card.prev {
    transform: rotateZ(-10deg) rotateY(-100deg) translateX(-100%);
  }
  
  .card.next {
    transform: rotateZ(10deg) rotateY(100deg) translateX(100%);
  }
  
  .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
  }
  
  .card.flip .card-inner {
    transform: rotateY(180deg);
  }
  
  .card-front,
  .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 1.2rem;
    color: white;
    background-color: #A6CE39;
    color: #5E2F7E;
    outline: 2px solid white;
    border-radius: 28px;
  }
  
  .card-back {
    background-color: #a7ce39;
    transform: rotateY(180deg);
    outline: 2px solid #5f2f7e;
    border-radius: 30px;
  }

  /* Estilo do botão "Ver Resposta" */
  .flip-btn {
    margin-top: 10px;
    padding: 8px 16px;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    background-color: #e74c3c;
    color: white;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  
  .flip-btn:hover {
    background-color: #c0392b;
  }
  
  .controls {
    margin-top: 20px;
  }
  
  button {
    margin: 5px;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    background-color: #3498db;
    color: white;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  
  button:hover {
    background-color: #2980b9;
  }

  /* Animação de tremor */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-20px); }
    40%, 80% { transform: translateX(20px); }
  }
  
  .shake {
    animation: shake 0.4s ease;
  }
  

  .container-quiz { margin: auto; }
  .card-front { background-color: #E5DBF4; }
    .quiz-question { color: #5E2F7E; text-align: center; font-size: 26px; font-style: normal; font-weight: 900; line-height: normal;}
    .quiz-question p { padding: 0 1rem !important; }
    .quiz-button-resp { border-radius: 50px; background: #5E2F7E; color: white; font-weight: bold; font-size: 18px; padding: 0.5rem 2rem; }
    .quiz-button-resp:hover { color: #5E2F7E; outline: 2px solid #5E2F7E; background-color: white ;}
    .quiz-button-rever { text-decoration: underline; color: #5E2F7E !important; background-color: #a7ce39 !important;}
    .quiz-button-rever:hover, .quiz-button-rever:focus { outline: 1px solid #5f2f7e; border-radius: 50px;}
    .quiz-progress { border-radius: 50px; padding: 0.3rem 1.3rem; font-size: 23px; color: white; background-color: #5E2F7E; font-weight: bold;}
    .resposta-bt-right {  background: #a7ce39; color: #5f2f7e; outline: 2px dotted #5f2f7e; border-radius: 50px; padding: 0.5rem 1.3rem; }
    .resposta-tit-right {color: #5E2F7E; text-align: center; font-size: 25px; font-weight: bold; line-height: normal; }
    .resposta-txt-right { color: #5E2F7E; font-size: 1.5rem; font-style: normal; font-weight: 400; line-height: normal; text-align: center; padding: 0 1rem; }
  

/* Motion destaques */

.svg-dstk-1 { width: 140%; justify-self: flex-end; }
.svg-dstk-2 { width: 150%; max-width: 640px; } 


         svg #ilustracao1 #perna { transition-duration: 0.5s; transform: rotate(0deg); transform-origin:570px 200px;  }         
         svg #braco { transition-duration: 1.5s; transform: rotate(0deg); transform-origin:537px 134px; }
         svg #left-arm {transition-duration: 1s; transform: rotate(0deg); transform-origin:279px 353px;  }
         svg #cell-phone {transition-duration: 1s; transform: rotate(0deg); transform-origin:17rem 22rem;  }
         svg #right-arm {transition-duration: 1s; transform: rotate(0deg); transform-origin:23rem 21.3rem;  }
         svg #cabeca-her { transition-duration: 1s; transform: rotate(0deg); transform-origin: 20rem 20rem;   }
         svg #corpo { transition-duration: 0.5s; transform: rotate(0deg); transform-origin: 34rem 11rem; }

         .slide-ani-1:hover svg #ilustracao1 #perna { transition-duration: 0.8s; transform: rotate(-5deg); transform-origin:570px 200px; }
         /* svg #ilustracao1:hover #Vector { transition-duration: 0.5s; transform: scale(1.3); transform-origin:4rem 26rem; } */
         .slide-ani-1:hover svg #ilustracao1 #braco { transition-duration: 0.5s; transform: rotate(30deg); transform-origin:537px 134px;  } 
         .slide-ani-1:hover svg #ilustracao1 #left-arm {transition-duration: 1s; transform: rotate(-20deg); transform-origin:279px 353px; transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); transition-delay: 0.2s;}
         .slide-ani-1:hover svg #ilustracao1 #right-arm {transition-duration: 0.5s; transform: rotate(80deg); transform-origin:23rem 21.3rem; transition-delay: 0.2s; }
         .slide-ani-1:hover svg #ilustracao1 #cell-phone {transition-duration: 1s; transform: rotate(-21deg); transform-origin:17rem 22rem; transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); transition-delay: 0.2s; }
         .slide-ani-1:hover svg #ilustracao1 #cabeca-her { transition-duration: 0.5s; transform: rotate(-7deg); transform-origin: 20rem 20rem;   }
         .slide-ani-1:hover svg #ilustracao1 #corpo { transition-duration: 0.5s; transform: rotate(-6deg); transform-origin: 34rem 11rem; }
         

         svg #dstk2-megafone { transition-duration: 0.8s; transform: rotate(-0deg); transform-origin:12rem 9rem;}
         svg #dstk2-megafone-shadow { transition-duration: 0.8s; transform: rotate(-0deg); transform-origin:12rem 9rem; opacity: 0.25;}
         svg #dstk2-pict { transition-duration: 0.8s; transform:scale(1); transform-origin:18rem 14rem; }
         svg #dstk2-heart { transition-duration: 0.5s; transform:scale(1); transform-origin:28rem 3rem; transition-timing-function: ease-in-out;  }

         .slide-ani-2:hover svg #ilustra2 #dstk2-megafone { transition-duration: 0.5s; transform: rotate(-15deg); transform-origin:12rem 9rem; transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
         .slide-ani-2:hover svg #ilustra2 #dstk2-megafone-shadow { transition-duration: 0.5s; transform: rotate(-3deg); opacity: 0.2; transform-origin:12rem 9rem; transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }
         .slide-ani-2:hover svg #ilustra2 #dstk2-pict { transition-duration: 0.8s; transform:scale(1.3); transform-origin:18rem 14rem; transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); transition-delay: 0.2; }
         .slide-ani-2:hover svg #ilustra2 #dstk2-heart { transition-duration: 0.5s; transform:scale(1.4); transform-origin: 28rem 3rem; transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); transition-delay: 0.3; }

               /* Motion Ilustra 3 */
         
         svg #dstk3-tracomask {  transform:rotate(0deg); transform-origin: 10rem 5rem; }
         .slide-ani-3:hover svg #ilustra3 #dstk3-tracomask {  transition-duration: 1s; transform:rotate(90deg); transform-origin: 10rem 5rem;  }
         svg #dstk3-sinais { transition-duration: 0.2s; transform:scale(0.5); opacity: 0; transform-origin: 7.5rem 10rem; }
         .slide-ani-3:hover svg #ilustra3 #dstk3-sinais { transition-duration: 0.5s; transform:scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.55, -0.59, 0.35, 1.45); transform-origin: 7.5rem 10rem;}

         svg #dstk3-headhim { transition-duration: 0.2s; transform: rotate(0deg); transform-origin:28rem 6rem; }
         .slide-ani-3:hover svg #ilustra3 #dstk3-headhim { transition-duration: 0.5s; transform: rotate(-22deg); transform-origin:28rem 6rem;  }
         svg #dstk3-elebraco { transition-duration: 0.4s; transform: rotate(0deg); transform-origin:30.5rem 7.5rem; }
         .slide-ani-3:hover svg #ilustra3 #dstk3-elebraco { transition-duration: 0.8s; transform: rotate(25deg);  }
         svg #dstk3-bracao { transition-duration: 0.4s; transform: rotate(0deg); transform-origin:20.5rem 15.5rem; }
         .slide-ani-3:hover svg #ilustra3 #dstk3-bracao { transition-duration: 0.8s; transform: rotate(20deg); transform-origin:20.5rem 15.5rem; animation-timing-function:ease-in-out ; }
         svg #dstk3-herbody { transition-duration: 0.4s; transform: rotate(0deg); transform-origin:6rem 16rem; }
         .slide-ani-3:hover svg #ilustra3 #dstk3-herbody { transition-duration: 0.4s; transform: rotate(-11deg); animation-timing-function:cubic-bezier(0.18, -0.01, 0, 1.04) ; }