@media screen and (min-width: 320px) {

  .faq-form { height: 50px; position: relative; border: 2px solid #6d2077; border-radius: 10px; overflow: visible; display: block; z-index: 10; }
  .faq-form::before { content: ''; position: absolute; width: 20px; height: 20px; background-image: url(../img/seta-combo.svg); background-repeat: no-repeat; right: 25px; top: 50%; transform: translateY(-50%); background-position: center; background-size: 20px auto; z-index: 0; }
  .faq-select { border: none; height: 50px; width: 100%; background-color: transparent; position: relative; z-index: 1; font-family: sans-serif; font-weight: 400; padding: 0 50px 0 25px; font-size: 22px; -webkit-appearance: none; -moz-appearance: none; }
  .faq-select.is-customized { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; }

  .faq-custom-select { position: relative; width: 100%; height: 100%; font-family: sans-serif; font-size: 22px; }
  .faq-custom-trigger { width: 100%; height: 100%; padding: 0 50px 0 25px; border: 0; border-radius: 8px; background: transparent; color: #000; font: inherit; text-align: left; cursor: pointer; }
  .faq-custom-trigger:focus-visible { outline: 3px solid rgba(108, 46, 121, .3); outline-offset: 2px; }
  .faq-custom-options { display: none; position: absolute; top: calc(100% + 2px); left: -2px; right: -2px; z-index: 1000; margin: 0; padding: 0; border: 2px solid #6c2e79; border-radius: 0 0 10px 10px; background: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .14); list-style: none; overflow: hidden; }
  .faq-custom-select.is-open .faq-custom-options { display: block; }
  .faq-custom-option { padding: 5px 25px; background: #fff; color: #000; line-height: 1.15; cursor: pointer; }
  .faq-custom-option:hover,
  .faq-custom-option.is-highlighted { background: #eadfee; color: #000; }
  .faq-custom-option.is-selected,
  .faq-custom-option.is-selected:hover,
  .faq-custom-option.is-selected.is-highlighted { background: #6c2e79; color: #fff; }
  .faq-box {  }
  .faq-box h3 { font-size: 22px; font-family: sans-serif; font-weight: 700; background: #6c2e79; color: white; padding: 0px 25px; min-height: 50px; margin-bottom: 15px; border-radius: 10px; display: flex; align-items: center; }

  .question { position: relative; margin: 0 auto; padding: 0 10px 0 50px; display: block; cursor: pointer; font-family: sans-serif; font-weight: 400; color: #6d2077; min-height: 48px; display: flex; align-items: center; border-radius: 50px; font-size: 14px; line-height: 1.2 }
  .question-box { margin-bottom: 10px; border: 2px solid #6d2077; border-radius: 10px; overflow: hidden; }
  .answers { padding: 0px 15px; margin: 0; height: 0; overflow: hidden;  position: relative; opacity: 0; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; font-size: 13px; line-height: 1.2; font-weight: 300; color:#555; }
  .answers a { text-decoration: underline; color: #09D; }
  .plus { color: #00a635; position: absolute; margin: 5px 0 0 10px; z-index: 1; font-size: 38px; line-height: 100%; transition: .3s ease; font-family: sans-serif; font-weight: 300; margin-left: 15px; }
  
  .questions:checked ~ .question {  }
  .questions:checked ~ .plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
  .questions:checked ~ .answers{ height: auto; opacity: 1; margin: 0; color: #343434; }
  .questions { display: none; }

  .faq { background: #FFF; display: block; position: relative; z-index: 2; padding: 0; overflow: hidden; }

  /*
  .faq::before, .faq::after { content:''; position: absolute; width: 100px; height:100px; opacity: .5; background-position: center; background-size: contain; background-repeat: no-repeat; }
  .faq::before { background-image: url(../img/faq_bg_esq.webp); bottom: 10px; left:-10px }
  .faq::after { background-image: url(../img/faq_bg_dir.webp); top: 10px; right:-10px; }
  */



  .faq-container { max-width: 1200px; width: 90%; margin: 0 auto; padding: 20px 0 0 0; }
  .faq-titulo { color: #60007a; font-size: 32px; margin-bottom: 20px; line-height: 1; position: relative; text-align: center; font-weight: 400; }
  .faq-titulo span { display: block; font-size: 18px; color: #343434; }


  .faq-conteudo { display: flex; flex-wrap: wrap; padding: 0; margin: 0; gap: 0; flex-direction: column; max-width: 800px; margin: auto; }
  .faq-texto { order: 2; padding: 0 0 40px 0; margin: 0 }
  .faq-foto { order: 1; padding: 0; margin: 0; gap: 0; display: flex; justify-content: center; align-items: flex-end; }
  .faq-foto img { margin: 0; padding: 0; height: 250px; width: auto; }

  .faq-foto-desktop { display: none; }


  .faq-obs { font-size: 18px; font-weight: 700; padding: 30px 20px 0 20px; text-align: center; color: #6c2e79 }
  .faq-obs a { color: #00a635; display:  block; text-decoration: underline; font-weight: 500;}


}


@media screen and (min-width: 620px) {

}


@media screen and (min-width: 1000px) {

  .faq { padding-top: 50px; position: relative; }

  /*
  .faq::before, .faq::after { width: 150px; height:150px; }
  .faq::before { bottom: 20px; left:-20px }
  .faq::after { top: 20px; right:-20px; }
  */

  .faq-titulo { font-size: 48px; line-height: .9; }
  .faq-titulo span { display: block; font-size: 24px; letter-spacing: 0 !important; padding-top: 10px;  }
  .faq-box, .faq-form {  }

  .faq-foto-desktop { display: initial; }
  .faq-foto-mobile { display: none; }

  .faq-obs { font-size: 24px; font-weight: 700; padding: 30px 20px 0 20px; text-align: center; color: #6c2e79 }
  .faq-obs a { color: #00a635; display:  block; text-decoration: underline; font-weight: 500; font-size: 18px; padding: 10px 0 0 0;}
  
  
  .question { font-size: 20px; }
  .questions:checked ~ .answers{ font-size: 18px; font-weight: 300; }

}


@media screen and (min-width: 1320px) {

  .faq-titulo { font-size: 58px; padding: 0; text-align: center; width: fit-content; margin: 30px auto; }
  .faq-foto img { width: 300px; height: initial; }
   
   /*
  .faq::before, .faq::after { width: 300px; height:300px; }
  .faq::before { bottom: 20px; left:-40px }
  .faq::after { top: 20px; right:-40px; }
  */

}


@media screen and (min-width: 1580px) {


}


@media screen and (min-width: 1880px) {

}