/* ValiSys - correção pública, SVG, SAC e mobile */



.public-card-svg {

  --public-card-svg: url("/assets/svg-repo/ui/question-circle.svg");



  display: inline-block !important;

  width: 27px !important;

  height: 27px !important;

  min-width: 27px !important;

  flex: 0 0 27px !important;



  background: currentColor !important;



  -webkit-mask:

    var(--public-card-svg)

    center / contain no-repeat !important;



  mask:

    var(--public-card-svg)

    center / contain no-repeat !important;

}



.public-button-svg {

  width: 19px !important;

  height: 19px !important;

  min-width: 19px !important;

  flex-basis: 19px !important;

}



/* Cards gerais com SVG */



.public-card-with-svg {

  position: relative !important;

}



.public-plan-card > .public-card-svg,

.public-plan-flow-note > .public-card-svg,

.public-plans-note > .public-card-svg,

.contratacao-form > .public-card-svg,

.contratacao-resumo > .public-card-svg,

.contratacao-info > .public-card-svg,

.contratacao-admin-box > .public-card-svg {

  width: 38px !important;

  height: 38px !important;

  min-width: 38px !important;

  margin-bottom: 16px !important;



  padding: 9px !important;

  box-sizing: content-box !important;



  border-radius: 15px !important;

  background-color: #e9f4ed !important;

  color: #176b42 !important;

}



/* Área de contato */



#contato.public-contact-v2 {

  overflow: visible !important;

}



#contato .contact-public-actions {

  display: grid !important;

  grid-template-columns:

    repeat(4, minmax(0, 1fr)) !important;

  gap: 14px !important;



  width: 100% !important;

  margin: 28px 0 22px !important;



  opacity: 1 !important;

  visibility: visible !important;

  transform: none !important;

}



#contato .contact-pill {

  appearance: none !important;

  -webkit-appearance: none !important;



  position: relative !important;



  display: grid !important;

  grid-template-columns: 46px minmax(0, 1fr) !important;

  grid-template-rows: auto auto !important;

  column-gap: 13px !important;

  align-items: center !important;



  width: 100% !important;

  min-width: 0 !important;

  min-height: 126px !important;



  margin: 0 !important;

  padding: 18px !important;



  border: 1px solid rgba(18, 63, 45, .14) !important;

  border-radius: 20px !important;



  background: #fff !important;

  color: #17211c !important;



  font: inherit !important;

  text-align: left !important;

  text-decoration: none !important;



  cursor: pointer !important;



  box-shadow:

    0 12px 34px rgba(18, 63, 45, .06) !important;



  opacity: 1 !important;

  visibility: visible !important;

  transform: none !important;

}



#contato .contact-pill:hover {

  border-color: rgba(23, 107, 66, .34) !important;

  transform: translateY(-3px) !important;

}



#contato .contact-pill > .public-card-svg {

  grid-column: 1 !important;

  grid-row: 1 / 3 !important;



  width: 27px !important;

  height: 27px !important;

  min-width: 27px !important;



  padding: 9px !important;

  box-sizing: content-box !important;



  border-radius: 14px !important;

  background-color: #e9f4ed !important;

  color: #176b42 !important;

}



#contato .contact-pill strong {

  grid-column: 2 !important;

  grid-row: 1 !important;



  margin: 0 !important;

  align-self: end !important;



  color: #17211c !important;

  font-size: 15px !important;

  line-height: 1.25 !important;

}



#contato .contact-pill span:not(.public-card-svg) {

  grid-column: 2 !important;

  grid-row: 2 !important;



  min-width: 0 !important;

  align-self: start !important;



  color: #68716c !important;

  font-size: 13px !important;

  line-height: 1.4 !important;

  overflow-wrap: anywhere !important;

}



.public-contact-main-actions {

  display: grid !important;

  grid-template-columns:

    repeat(3, minmax(0, 1fr)) !important;

  gap: 12px !important;



  width: 100% !important;

  margin-top: 18px !important;

}



.public-contact-main-actions > a,

.public-contact-main-actions > button {

  appearance: none !important;

  -webkit-appearance: none !important;



  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 9px !important;



  width: 100% !important;

  min-height: 50px !important;



  margin: 0 !important;

  padding: 0 18px !important;



  border: 1px solid rgba(18, 63, 45, .18) !important;

  border-radius: 15px !important;



  font: 800 15px system-ui, sans-serif !important;

  text-decoration: none !important;

  cursor: pointer !important;

}



.public-contact-primary {

  background: #173f2e !important;

  color: #fff !important;

}



.public-contact-sac {

  background: #eef5f0 !important;

  color: #174f35 !important;

}



.public-contact-whatsapp {

  background: #168647 !important;

  color: #fff !important;

}



/* Planos sempre visíveis */



#planos,

.public-plans-section,

.public-plans-grid,

.public-plan-card,

.public-plan-flow-note,

.public-plans-note {

  opacity: 1 !important;

  visibility: visible !important;

}



.public-plan-card[data-card-motion],

.public-plan-card {

  display: flex !important;

  flex-direction: column !important;



  opacity: 1 !important;

  visibility: visible !important;

  transform: none !important;



  content-visibility: visible !important;

}



.public-plan-card > a {

  margin-top: auto !important;

}



/* Contratação */



.contratacao-grid,

.contratacao-form,

.contratacao-resumo,

.contratacao-info,

.contratacao-admin-box,

.contratacao-actions {

  opacity: 1 !important;

  visibility: visible !important;

  transform: none !important;

  content-visibility: visible !important;

}



.contratacao-form,

.contratacao-resumo,

.contratacao-info,

.contratacao-admin-box {

  position: relative !important;

  overflow: visible !important;

}



/* Mobile */



@media (max-width: 900px) {

  #contato .contact-public-actions {

    grid-template-columns:

      repeat(2, minmax(0, 1fr)) !important;

  }



  .public-plans-grid {

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 16px !important;

  }

}



@media (max-width: 760px) {

  #planos,

  .public-plans-section,

  .public-plans-grid,

  .public-plan-card,

  .public-plan-flow-note,

  .public-plans-note,

  #contato,

  #contato .contact-public-actions,

  #contato .contact-pill,

  .public-contact-main-actions,

  .contratacao-container,

  .contratacao-grid,

  .contratacao-form,

  .contratacao-resumo,

  .contratacao-info,

  .contratacao-admin-box,

  .contratacao-actions {

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

    content-visibility: visible !important;

  }



  #planos,

  .public-plans-section,

  #contato {

    display: block !important;

  }



  .public-plans-grid,

  .contratacao-grid {

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 15px !important;

  }



  .public-plan-card,

  .public-plan-flow-note,

  .public-plans-note,

  .contratacao-form,

  .contratacao-resumo,

  .contratacao-info,

  .contratacao-admin-box {

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    height: auto !important;

    min-height: 0 !important;

  }



  #contato .contact-public-actions {

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 12px !important;

  }



  #contato .contact-pill {

    display: grid !important;

    grid-template-columns: 44px minmax(0, 1fr) !important;

    min-height: 104px !important;

    padding: 16px !important;

  }



  #contato .contact-pill > .public-card-svg {

    width: 24px !important;

    height: 24px !important;

    min-width: 24px !important;

    padding: 8px !important;

  }



  .public-contact-main-actions {

    display: grid !important;

    grid-template-columns: 1fr !important;

  }



  .public-contact-main-actions > a,

  .public-contact-main-actions > button {

    display: inline-flex !important;

    width: 100% !important;

  }



  .contratacao-actions {

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 10px !important;

  }



  .contratacao-actions > a,

  .contratacao-actions > button {

    display: inline-flex !important;

    width: 100% !important;

  }

}