/*!**********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./assets/scss/pages/quem-somos.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
@font-face {
  font-family: "Dosis";
  src: url(../fonts/Dosis-VariableFont_wght.woff2) format("woff2");
  font-weight: 300 400 600 700 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DrawYBrand";
  src: url(../fonts/DrawYBrand-Regular.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@keyframes fadeIntoUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIntoDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes marquee {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 2666.52px;
  }
}
@keyframes floating {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(-1deg);
  }
  50% {
    transform: translateY(-15px) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) rotate(1deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}
@font-face {
  font-family: "Dosis";
  src: url(../fonts/Dosis-VariableFont_wght.woff2) format("woff2");
  font-weight: 300 400 600 700 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DrawYBrand";
  src: url(../fonts/DrawYBrand-Regular.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@keyframes fadeIntoUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIntoDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes marquee {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 2666.52px;
  }
}
@keyframes floating {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(-1deg);
  }
  50% {
    transform: translateY(-15px) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) rotate(1deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}
.breadcrumb-section.blog::after, .breadcrumb-section.red::after, .breadcrumb-section.blue::after, .breadcrumb-section.orange::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-attachment: fixed;
  background-size: cover;
  z-index: 0;
}

.breadcrumb-section {
  position: relative;
  padding: 118px 0 133px 0;
}
.breadcrumb-section.base {
  padding-top: 118px;
  padding-bottom: 51px;
}
.breadcrumb-section.orange {
  background: #f1881a;
}
.breadcrumb-section.orange::after {
  background-image: url(../images/section-breadcrumb-paralax.webp);
}
.breadcrumb-section.blue {
  background: #0160aa;
}
.breadcrumb-section.blue::after {
  background-image: url(../images/section-breadcrumb-paralax-blue.webp);
}
.breadcrumb-section.red {
  background-color: #a90b1b;
}
.breadcrumb-section.red h1 {
  background-color: #1069af;
}
.breadcrumb-section.red::after {
  background-position: bottom;
  background-image: url(../images/section-breadcrumb-paralax-red.webp);
}
.breadcrumb-section.author .breadcrumb {
  justify-content: flex-start;
}
.breadcrumb-section.author .title-wrapper {
  align-items: flex-start;
  flex-direction: column;
}
.breadcrumb-section.author .title-wrapper h1 {
  text-align: start;
}
.breadcrumb-section.author .descricao {
  margin-top: 10px;
  font-family: "Dosis";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.011em;
  color: #ffffff;
}
.breadcrumb-section.author .social-icons {
  display: flex;
  gap: 19px;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb-section.author .social-icons svg {
  min-width: 48px;
}
.breadcrumb-section.author .social-icons a {
  transition: all ease-in-out 0.3s;
}
.breadcrumb-section.author .social-icons:hover a {
  transform: scale(1.1);
}
.breadcrumb-section.blog {
  background-size: cover;
  background-repeat: no-repeat;
}
.breadcrumb-section.blog::after {
  background: rgba(0, 0, 0, 0.6);
}
.breadcrumb-section.blog .breadcrumb {
  justify-content: flex-start;
}
.breadcrumb-section.blog .title-wrapper {
  justify-content: flex-start;
}
.breadcrumb-section.blog h1 {
  text-align: start;
  clip-path: none;
  background: none;
  padding: 0;
  max-width: 755px;
  margin-top: 85px;
}
.breadcrumb-section.produtos {
  background-size: cover;
}
.breadcrumb-section.produtos .breadcrumb {
  justify-content: left;
}
.breadcrumb-section.produtos .title-wrapper {
  flex-direction: column;
  justify-content: left;
  align-items: start;
}
.breadcrumb-section.produtos .title-wrapper h1 {
  margin-left: -55px;
}
.breadcrumb-section.produtos .title-wrapper .description {
  width: 100%;
  max-width: 504px;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  /* ou 140% */
  letter-spacing: -0.011em;
  color: #ffffff;
}
.breadcrumb-section.produtos::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.67) 0%, rgba(255, 255, 255, 0) 52%);
}
.breadcrumb-section > * {
  position: relative;
  z-index: 1;
}
.breadcrumb-section .breadcrumb {
  display: flex;
  justify-content: center;
  text-align: center;
}
.breadcrumb-section .title-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.breadcrumb-section h1 {
  text-align: center;
  font-family: "DrawYBrand", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 80px;
  padding: 20px 55px 5px 55px;
  color: #ffffff;
  position: relative;
  line-height: 1;
  background: #bf151d;
  clip-path: polygon(91% 94%, 8% 94%, 6% 67%, 5% 41%, 3% 6%, 13% 8%, 52% 7%, 78% 8%, 95% 4%, 94% 37%, 93% 69%);
}
@media screen and (max-width: 767px) {
  .breadcrumb-section h1 {
    padding: 30px 40px 15px 40px;
  }
}
.breadcrumb-section.search .breadcrumb,
.breadcrumb-section.search .title-wrapper {
  justify-content: start;
}
.breadcrumb-section.search .resultados-busca {
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 12px;
}
.breadcrumb-section.search .search {
  width: 100%;
  max-width: 516px;
  position: relative;
  border-bottom: 2px solid #fff;
}
.breadcrumb-section.search .search::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: url(../images/ico-search-branco.svg);
  background-size: cover;
}
.breadcrumb-section.search .search input {
  padding: 20px;
  border: none;
  outline: none;
  font-size: 20px;
  width: 100%;
  background-color: transparent;
  color: #fff;
}
.breadcrumb-section.search .search input::-moz-placeholder {
  color: #fff;
}
.breadcrumb-section.search .search input::placeholder {
  color: #fff;
}
@media screen and (max-width: 991px) {
  .breadcrumb-section.search .search {
    margin-top: 16px;
  }
}
@media screen and (max-width: 767px) {
  .breadcrumb-section {
    padding: 80px 0 110px 0;
  }
  .breadcrumb-section h1 {
    font-size: 50px;
  }
  .breadcrumb-section.search .resultados-busca {
    font-size: 20px;
  }
  .breadcrumb-section.produtos .title-wrapper {
    justify-content: center;
    align-items: center;
  }
  .breadcrumb-section.produtos .breadcrumb {
    justify-content: center;
  }
  .breadcrumb-section.produtos h1 {
    margin-left: 0 !important;
  }
  .breadcrumb-section.produtos .description {
    text-align: center;
  }
}

.breadcrumb-section {
  position: relative;
  min-height: 470px;
  background-size: cover;
}
.breadcrumb-section::after {
  display: block;
  content: "";
  width: 100%;
  max-width: 1287px;
  height: auto;
  aspect-ratio: 1287/246;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../images/jopanas-lettering.svg);
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 768px) {
  .breadcrumb-section::after {
    bottom: 30px;
  }
}

.section-institucional-timeline {
  position: relative;
  background-color: #F28F27;
  padding-top: 23px;
  padding-bottom: 217px;
}
.section-institucional-timeline::before {
  content: "";
  position: absolute;
  top: -98px;
  left: 0;
  width: 100%;
  height: 98px;
  background-image: url(../images/marquee-institucional.svg);
  background-repeat: repeat-x;
  background-position: 0 0;
  z-index: 1;
  animation: marquee 20s linear infinite;
}
.section-institucional-timeline::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../images/shape-timeline.webp);
  background-repeat: repeat-y;
  background-size: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}
.section-institucional-timeline > * {
  position: relative;
  z-index: 2;
}
.section-institucional-timeline h2 {
  font-family: "DrawYBrand";
  font-style: normal;
  font-weight: 600;
  font-size: 75px;
  line-height: 114%;
  text-align: center;
  letter-spacing: 0.01em;
  color: #A51D20;
  margin-bottom: 56px;
}
.section-institucional-timeline .timeline-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  row-gap: 60px;
  max-width: 1338px;
  margin: 0 auto;
}
.section-institucional-timeline .timeline-wrapper::before {
  content: "";
  width: 4px;
  height: 100%;
  background-color: #D9582D;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.section-institucional-timeline .timeline-wrapper .timeline-item {
  position: relative;
  width: calc(50% - 96px);
  max-width: 573px;
  height: -moz-fit-content;
  height: fit-content;
  margin-top: 110px;
}
.section-institucional-timeline .timeline-wrapper .timeline-item:not(:first-child) {
  margin-top: -180px;
}
.section-institucional-timeline .timeline-wrapper .timeline-item::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #0164AD;
  position: absolute;
  z-index: 1;
  top: -15px;
  right: -15px;
  clip-path: path("M5.687 0.502316L554.495 21.8243C556.074 21.8856 557.335 23.1613 557.378 24.7409L574.499 657.703C574.543 659.348 573.253 660.723 571.608 660.782L3.697 681.269C1.995 681.331 0.583 679.965 0.589 678.262L2.57 3.49124C2.575 1.79218 3.989 0.436354 5.687 0.502316Z");
}
.section-institucional-timeline .timeline-wrapper .timeline-item::after {
  display: block;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg width=%27141%27 height=%2742%27 viewBox=%270 0 141 42%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3ccircle cx=%27120%27 cy=%2721%27 r=%2719%27 fill=%27%23F2993B%27 stroke=%27%23D9582D%27 stroke-width=%274%27/%3e%3ccircle cx=%27120%27 cy=%2721%27 r=%274%27 fill=%27%23106DB2%27/%3e%3crect x=%27118%27 y=%2719%27 width=%274%27 height=%27118%27 transform=%27rotate%2890 118 19%29%27 fill=%27%23106DB2%27/%3e%3c/svg%3e");
  width: 141px;
  min-width: 141px;
  height: 42px;
  position: absolute;
  top: 120px;
  right: -116px;
}
.section-institucional-timeline .timeline-wrapper .timeline-item .timeline-card {
  position: relative;
  z-index: 5;
  clip-path: path("M5.687 0.502316L554.495 21.8243C556.074 21.8856 557.335 23.1613 557.378 24.7409L574.499 657.703C574.543 659.348 573.253 660.723 571.608 660.782L3.697 681.269C1.995 681.331 0.583 679.965 0.589 678.262L2.57 3.49124C2.575 1.79218 3.989 0.436354 5.687 0.502316Z");
}
.section-institucional-timeline .timeline-wrapper .timeline-item .timeline-card .text-wrapper {
  background-color: #B0202F;
  padding: 87px 68px 68px 40px;
  position: relative;
  z-index: 5;
}
.section-institucional-timeline .timeline-wrapper .timeline-item .timeline-card .text-wrapper .ano {
  writing-mode: sideways-lr;
  text-orientation: mixed;
  font-family: "Dosis";
  font-style: normal;
  font-weight: 600;
  font-size: 81px;
  line-height: 85%;
  display: flex;
  align-items: center;
  letter-spacing: 0.01em;
  color: #F39A3C;
  margin-right: 25px;
}
.section-institucional-timeline .timeline-wrapper .timeline-item .timeline-card .text-wrapper .titulo {
  font-family: "Dosis";
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 28px;
  letter-spacing: -0.011em;
  text-transform: uppercase;
  color: #FFF0F2;
}
.section-institucional-timeline .timeline-wrapper .timeline-item .timeline-card .text-wrapper .texto {
  font-family: "Dosis";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.011em;
  color: #F6C7CB;
  margin-bottom: 0;
}
.section-institucional-timeline .timeline-wrapper .timeline-item .timeline-card .img-wrapper img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 573/373;
}
.section-institucional-timeline .timeline-wrapper .timeline-item:nth-child(odd) {
  align-self: flex-start;
}
.section-institucional-timeline .timeline-wrapper .timeline-item:nth-child(odd)::before,
.section-institucional-timeline .timeline-wrapper .timeline-item:nth-child(odd) .timeline-card {
  clip-path: path("M569.313 0.502316L20.5049 21.8243C18.9259 21.8856 17.6652 23.1613 17.6225 24.7409L0.501046 657.703C0.45653 659.348 1.74659 660.723 3.39182 660.782L571.303 681.269C573.005 681.331 574.417 679.965 574.411 678.262L572.43 3.49124C572.425 1.79218 571.011 0.436354 569.313 0.502316Z");
}
.section-institucional-timeline .timeline-wrapper .timeline-item:nth-child(even) {
  align-self: flex-end;
}
.section-institucional-timeline .timeline-wrapper .timeline-item:nth-child(even)::before {
  right: auto;
  left: -15px;
}
.section-institucional-timeline .timeline-wrapper .timeline-item:nth-child(even)::after {
  right: auto;
  left: -116px;
  transform: rotate(180deg);
}
.section-institucional-timeline .swiper-navigation {
  margin-top: 32px;
}
.section-institucional-timeline .swiper-navigation * {
  position: static;
  margin-top: 0;
  margin-top: initial;
}
@media (max-width: 992px) {
  .section-institucional-timeline h2 {
    font-size: 50px;
  }
  .section-institucional-timeline .timeline-swiper {
    overflow: visible;
  }
  .section-institucional-timeline .timeline-wrapper {
    flex-direction: row;
  }
  .section-institucional-timeline .timeline-wrapper::before {
    width: 5000vw;
    height: 4px;
  }
  .section-institucional-timeline .timeline-wrapper .timeline-item {
    margin-top: 67px !important;
    align-self: start !important;
    width: calc(100% - 15px);
  }
  .section-institucional-timeline .timeline-wrapper .timeline-item::after {
    transform: translateX(-50%) rotate(270deg) !important;
    right: auto !important;
    left: 50% !important;
    top: -36px !important;
  }
  .section-institucional-timeline .timeline-wrapper .timeline-item .timeline-card .text-wrapper {
    padding: 70px 30px 40px 40px;
  }
  .section-institucional-timeline .timeline-wrapper .timeline-item .timeline-card .text-wrapper .titulo {
    font-size: 24px;
  }
  .section-institucional-timeline .timeline-wrapper .timeline-item .timeline-card .text-wrapper .texto {
    font-size: 18px;
  }
}
@media (max-width: 576px) {
  .section-institucional-timeline {
    padding-bottom: 140px;
  }
  .section-institucional-timeline .timeline-swiper .timeline-item .timeline-card .text-wrapper .ano {
    writing-mode: initial;
    margin-right: 0;
    margin-right: initial;
    font-size: 50px;
  }
}

.jopaninhas {
  position: relative;
  padding-top: 180px;
  width: 734px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.jopaninhas::before {
  display: block;
  content: "";
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  position: absolute;
  height: 255px;
  width: 4px;
  background-color: #D9582D;
  z-index: -1;
}
.jopaninhas .balao-fala {
  background-image: url(../images/pergunta-jopaninhas.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 50px 15px 93px 15px;
  min-height: 379px;
}
.jopaninhas .balao-fala h2 {
  font-family: "DrawYBrand";
  font-style: normal;
  font-weight: 400;
  font-size: 75px;
  line-height: 106%;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  margin-bottom: 12px;
}
.jopaninhas .balao-fala a {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  margin: 0 auto;
  transition: all ease-in-out 0.3s;
}
@media (max-width: 992px) {
  .jopaninhas::before {
    display: none;
  }
}
@media (max-width: 768px) {
  .jopaninhas {
    padding-top: 80px;
  }
  .jopaninhas .balao-fala {
    min-height: 0;
    min-height: initial;
  }
  .jopaninhas .balao-fala h2 {
    font-size: 50px;
  }
}

.personagem-animado {
  position: relative;
  width: 290px;
  height: 218px;
  align-self: flex-end;
  margin-top: 20px;
}
.personagem-animado img {
  position: absolute;
}
.personagem-animado .cabeca {
  top: 0;
  left: 0;
  z-index: 3;
}
.personagem-animado .capa {
  top: 52px;
  left: 16px;
  z-index: 1;
  transform-origin: top center;
  animation: respirarCapa 3s ease-in-out infinite alternate;
}
.personagem-animado .braco-direito {
  top: 12px;
  left: -55px;
  z-index: 4;
  transform-origin: bottom right;
  animation: balancarBraço 2s ease-in-out infinite alternate;
}
.personagem-animado .braco-esquerdo {
  top: 105px;
  left: 132px;
  z-index: 2;
  transform-origin: top left;
  animation: jogarParticulas 2s ease-in-out infinite alternate;
}
.personagem-animado .container-particulas {
  position: absolute;
  top: 156px;
  left: 187px;
  z-index: 1;
}
.personagem-animado .container-particulas .particula {
  position: absolute;
  opacity: 0;
}
.personagem-animado .container-particulas .particula.p1 {
  animation: voarParticula1 2s ease-in-out infinite alternate;
}
.personagem-animado .container-particulas .particula.p2 {
  animation: voarParticula2 2s ease-in-out infinite alternate;
}
.personagem-animado .container-particulas .particula.p3 {
  animation: voarParticula3 2s ease-in-out infinite alternate;
}
@media (max-width: 576px) {
  .personagem-animado {
    align-self: center;
    transform: translateX(50px);
  }
}

@keyframes respirarCapa {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(1.05) translateY(-3px);
  }
}
@keyframes balancarBraço {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(10deg);
  }
}
@keyframes jogarParticulas {
  0% {
    transform: rotate(0deg);
  }
  60%, 100% {
    transform: rotate(-12deg);
  }
}
@keyframes voarParticula1 {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  40%, 100% {
    opacity: 1;
    transform: translate(85px, -15px) rotate(333deg) scale(1);
  }
}
@keyframes voarParticula2 {
  0%, 10% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  50%, 100% {
    opacity: 1;
    transform: translate(93px, 42px) rotate(5deg) scale(1);
  }
}
@keyframes voarParticula3 {
  0%, 20% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  60%, 100% {
    opacity: 1;
    transform: translate(50px, 70px) rotate(45deg) scale(1);
  }
}
.section-institucional-tradicao {
  background-color: #0160AA;
  clip-path: polygon(0% 20px, 20% 70px, 60% 0px, 100% 50px, 100% 100%, 0% 100%);
  margin-top: -80px;
  position: relative;
  z-index: 5;
  padding-top: 220px;
  padding-bottom: 33px;
}
.section-institucional-tradicao::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../images/shape-section-tradicao.webp);
  background-repeat: repeat-y;
  background-size: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}
.section-institucional-tradicao > * {
  position: relative;
  z-index: 3;
}
.section-institucional-tradicao .text-wrapper {
  max-width: 1220px;
  margin: 0 auto;
}
.section-institucional-tradicao .text-wrapper h2,
.section-institucional-tradicao .text-wrapper h2 strong {
  font-family: "DrawYBrand";
  font-style: normal;
  font-weight: 400;
  font-size: 92px;
  line-height: 114%;
  text-align: center;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  margin: 0;
}
.section-institucional-tradicao .text-wrapper h2 strong {
  color: #FCB421;
  position: relative;
  border-radius: 5px;
  padding: 5px 12px 3px 15px;
  background-image: url("data:image/svg+xml,%3csvg width=%27100%25%27 height=%27100%25%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3crect width=%27100%25%27 height=%27100%25%27 fill=%27none%27 rx=%273.5%27 ry=%273.5%27 stroke=%27%23FCB421%27 stroke-width=%271.5%27 stroke-dasharray=%278%2c 8%27/%3e%3c/svg%3e");
  text-wrap: nowrap;
}
.section-institucional-tradicao .wrapper-embalagem {
  width: 496px;
  height: auto;
  aspect-ratio: 496/168;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  margin-top: 110px;
}
.section-institucional-tradicao .wrapper-embalagem img {
  position: absolute;
  top: 0;
  left: 0;
}
.section-institucional-tradicao .elementos-espalhados img {
  position: absolute;
}
.section-institucional-tradicao .particula-esquerda {
  bottom: 20%;
  left: 26%;
}
.section-institucional-tradicao .particula-direita {
  bottom: 26%;
  right: 27%;
}
.section-institucional-tradicao .coxinha {
  left: 47vw;
  bottom: 194px;
}
.section-institucional-tradicao .quibe-dois {
  left: 16vw;
  bottom: 199px;
}
.section-institucional-tradicao .esfirra-dois {
  left: -1vw;
  bottom: 252px;
}
.section-institucional-tradicao .pao-de-queijo {
  left: 12vw;
  bottom: 470px;
}
.section-institucional-tradicao .pao-de-queijo-dois {
  left: 24vw;
  bottom: 521px;
}
.section-institucional-tradicao .quibe {
  right: 31.5vw;
  bottom: 525px;
}
.section-institucional-tradicao .risole {
  right: 13vw;
  top: -84px;
}
.section-institucional-tradicao .coxinha-dois {
  right: 1vw;
  bottom: 369px;
}
.section-institucional-tradicao .esfirra {
  right: 5vw;
  bottom: 205px;
}
@media (max-width: 768px) {
  .section-institucional-tradicao {
    clip-path: polygon(0% 20px, 20% 35px, 60% 0px, 100% 27px, 100% 100%, 0% 100%);
    padding-top: 100px;
  }
  .section-institucional-tradicao .wrapper-embalagem {
    margin-top: 350px;
    width: 290px;
  }
  .section-institucional-tradicao .elementos-espalhados img {
    transform: scale(0.8);
  }
  .section-institucional-tradicao .particula-esquerda {
    bottom: 12%;
    left: 0%;
  }
  .section-institucional-tradicao .particula-direita {
    bottom: 12%;
    right: 0%;
  }
  .section-institucional-tradicao .esfirra {
    right: 6vw;
    bottom: 40px;
  }
  .section-institucional-tradicao .quibe-dois {
    left: -2vw;
    bottom: 55px;
  }
  .section-institucional-tradicao .esfirra-dois {
    left: 8vw;
    bottom: 180px;
  }
  .section-institucional-tradicao .coxinha {
    left: 52vw;
    bottom: 88px;
  }
  .section-institucional-tradicao .risole {
    right: 21vw;
    top: auto;
    top: initial;
    bottom: 201px;
  }
  .section-institucional-tradicao .coxinha-dois {
    left: 1vw;
    bottom: 245px;
  }
  .section-institucional-tradicao .pao-de-queijo {
    left: 30vw;
    bottom: 135px;
  }
  .section-institucional-tradicao .quibe {
    right: 0.5vw;
    bottom: 290px;
  }
  .section-institucional-tradicao .pao-de-queijo-dois {
    left: 30vw;
    bottom: 284px;
  }
  .section-institucional-tradicao .text-wrapper h2,
  .section-institucional-tradicao .text-wrapper h2 strong {
    font-size: 50px;
  }
}
@media (max-width: 576px) {
  .section-institucional-tradicao {
    clip-path: polygon(0 10vw, 100% 0, 100% 100%, 0 100%);
  }
  .section-institucional-tradicao .elementos-espalhados img {
    transform: scale(0.6);
  }
  .section-institucional-tradicao .coxinha {
    left: 54vw;
    bottom: 165px;
  }
  .section-institucional-tradicao .risole {
    right: 28vw;
    top: auto;
    top: initial;
    bottom: 201px;
  }
  .section-institucional-tradicao .esfirra {
    bottom: 125px;
  }
  .section-institucional-tradicao .esfirra-dois {
    left: -24vw;
    bottom: 180px;
  }
}

.section-institucional-mvv {
  margin-top: -33px;
  position: relative;
  z-index: 5;
}
.section-institucional-mvv .first-img {
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 1366/578;
  width: 100%;
}
.section-institucional-mvv .orange-bg {
  position: relative;
  background-color: #F1881A;
  padding-bottom: 174px;
}
.section-institucional-mvv .orange-bg::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../images/shape-section-mvv.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}
.section-institucional-mvv .orange-bg > * {
  position: relative;
  z-index: 5;
}
.section-institucional-mvv .orange-bg .card-mvv-wrapper {
  margin-top: -235px;
  clip-path: polygon(1% 95%, 4% 5%, 100% 0, 100% 100%);
  background-color: #1F0C0C;
  padding: 1px;
}
.section-institucional-mvv .orange-bg .card-mvv-wrapper .card-mvv {
  clip-path: polygon(1% 95%, 4% 5%, 100% 0, 100% 100%);
  background-color: #B0202F;
  width: 100%;
  height: auto;
  aspect-ratio: 401/470;
  padding: 58px 41px;
}
.section-institucional-mvv .orange-bg .card-mvv-wrapper .card-mvv .titulo {
  font-family: "DrawYBrand";
  font-style: normal;
  font-weight: 400;
  font-size: 56px;
  line-height: 58px;
  letter-spacing: -0.011em;
  color: #FFFFFF;
  margin-top: 30px;
  margin-bottom: 12px;
}
.section-institucional-mvv .orange-bg .card-mvv-wrapper .card-mvv .texto {
  font-family: "Dosis";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.011em;
  color: #FFF0F2;
  margin: 0;
}
.section-institucional-mvv .orange-bg .card-mvv-wrapper.inverted {
  clip-path: polygon(0 100%, 0 0, 95% 4%, 97% 96%);
  transform: translateX(12px);
}
.section-institucional-mvv .orange-bg .card-mvv-wrapper.inverted .card-mvv {
  clip-path: polygon(0 100%, 0 0, 95% 4%, 97% 96%);
}
.section-institucional-mvv .orange-bg .text-wrapper {
  width: 1020px;
  max-width: 100%;
  margin-bottom: 40px;
  margin-top: 120px;
}
.section-institucional-mvv .orange-bg .text-wrapper h2,
.section-institucional-mvv .orange-bg .text-wrapper h2 strong {
  font-family: "DrawYBrand";
  font-style: normal;
  font-weight: 400;
  font-size: 64px;
  line-height: 114%;
  letter-spacing: 0.01em;
  color: #FFFFFF;
}
.section-institucional-mvv .orange-bg .text-wrapper h2 strong {
  color: #B0202F;
  position: relative;
  border-radius: 5px;
  padding: 15px 8px 15px 8px;
  background-image: url("data:image/svg+xml,%3csvg width=%27409%27 height=%2778%27 viewBox=%270 0 409 78%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3crect x=%270.5%27 y=%270.5%27 width=%27408%27 height=%2777%27 rx=%273.5%27 stroke=%27%23A51D20%27 stroke-dasharray=%278 8%27/%3e%3c/svg%3e");
  text-wrap: nowrap;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section-institucional-mvv .orange-bg iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 1132/542;
  border-radius: 20px;
  min-height: 270px;
}
@media (max-width: 768px) {
  .section-institucional-mvv .orange-bg {
    padding-bottom: 123px;
  }
  .section-institucional-mvv .orange-bg .card-mvv-wrapper.last {
    margin-top: 50px;
  }
  .section-institucional-mvv .orange-bg .text-wrapper {
    margin-top: 80px;
  }
  .section-institucional-mvv .orange-bg .text-wrapper h2,
  .section-institucional-mvv .orange-bg .text-wrapper h2 strong {
    font-size: 56px;
  }
}
@media (max-width: 576px) {
  .section-institucional-mvv .orange-bg .card-mvv-wrapper {
    margin-top: 30px !important;
  }
  .section-institucional-mvv .orange-bg .card-mvv-wrapper .card-mvv {
    aspect-ratio: unset;
    padding: 58px 41px 75px 41px;
  }
}

/*# sourceMappingURL=quemSomos.bundle.css.map*/