@import url('fontes.css');

body, html {
  font-family: "Unimed Sans", sans-serif;
  font-optical-sizing: auto;
  background: #f8fafd;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  overflow-x: hidden;
  font-size: 15px;
  color: #666;
  scroll-behavior: smooth;
}

a:hover {text-decoration: none !important;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.mobile  {display: none;}
.vertical {margin: auto 0;}
.none {display: none;}
@keyframes fadeInSuave {from {opacity: 0;transform: translateX(-50%) translateY(10px);}to {opacity: 1;transform: translateX(-50%) translateY(0);}}

/* HEADER */
header {
  background: #fff;
  border-bottom: 1px solid #d8dfe4;
  padding: 30px 0;
}
header img {
  height: 100px;
  margin-bottom: 20px;
}
header p {
  margin: 0;
  color: #576574;  
  font-weight: 400;
}

/* LOGOS */
.logos {
  padding: 30px 0;
}
.logos h2 {
  font-size: 18px;
  font-weight: 600;
  color: #0d1e2f;
  padding-bottom: 10px;
}

.logo-card {
  background: #fff;
  border: 1px solid #d8dfe4;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: grab;
  position: relative;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 8px 25px rgba(0,0,0,.07);
  margin-bottom: 10px;
}
.logo-card:hover {
  transform: translateY(-3px);
  border-color: #00995d;
  box-shadow: 0 8px 25px rgba(0,0,0,.07);
}
.logo-card:active {
  cursor: grabbing;
}
.logo-card img {
  /*max-width: 145px;
  max-height: 65px;*/
  /*width: auto;
  height: auto;*/
  object-fit: contain;
  pointer-events: none;
}
.logo-card.a {padding: 24px 0;}
.logo-card.a img {height: 35px;}
.logo-card.b {padding: 30px 0;}
.logo-card.b img {height: 25px;}
.logo-card.c {padding: 24px 0;}
.logo-card.c img {height: 35px;}
.logo-card.d {padding: 17px 0;}
.logo-card.d img {height: 50px;}
.logo-card.e {padding: 19px 0;}
.logo-card.e img {height: 45px;}
.logo-card.f {padding: 16px 0;}
.logo-card.f img {height: 52px;}
.logo-card.usado {
  opacity: .30;
  filter: grayscale(.3);
  cursor: default;
  transform: none;
  box-shadow: none;
}
.logo-card.usado::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #00995d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

/* SOLUÇÕES */
.solucao {
  position: relative;
  display: grid;
  grid-template-columns: 115px 1fr 45px;
  align-items: center;
  background: #fff;
  border: 1px dashed #c8c8c8;
  border-radius: 20px;
  /*padding: 15px;*/
  height: 14%;
  transition: border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
  box-shadow: 0 8px 25px rgba(0,0,0,.07);
  margin-bottom: 10px;
}
.solucao .drop-zone {
  width: 145px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #f1f6f8;
  transition: background .2s ease,border-color .2s ease,transform .2s ease;
  /*padding: 20px 0;*/
  margin-left: 15px;
  height: 50%;
  box-shadow: 0 8px 25px rgba(0,0,0,.03);
}
.solucao .drop-zone-texto {
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  color: #aaa;
  pointer-events: none;
}
.solucao.ui-droppable-hover {
  border: 1px solid #205b5f;
  background: #d4efe7;
}
.solucao.ui-droppable-hover .drop-zone {
  border-color: #00995d;
  background: #e9f7f1;
  transform: scale(1.04);
}
.solucao .texto-solucao {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
  color: #0d1e2f;
  margin-left: 60px;
}
.solucao .logo-encaixado {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.solucao .logo-encaixado img {
  max-width: 90px;
  max-height: 50px;
  object-fit: contain;
  padding: 10px 0;
}
.solucao .remover-logo {
  display: none;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 23px;
  height: 23px;
  border: 0;
  border-radius: 50%;
  background: #444;
  color: #fff;
  font-size: 16px;
  line-height: 23px;
  cursor: pointer;
  /*display: flex;*/
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 0;
}
.solucao .remover-logo:hover {
  background: #000;
}

/* BT */
footer {
    margin-bottom: 40px;
}
footer #btn-verificar,footer #btn-recarregar {
  width: 100%;
  max-width: 140px;
  min-height: 40px;
  border: none;
  border-radius: 30px;
  background: #005b60;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s ease,transform .2s ease,opacity .2s ease,box-shadow .2s ease;
}
footer #btn-verificar:not(:disabled):hover,footer #btn-recarregar:hover {
  background: #00995d;
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(0,153,93,.2);
}
footer #btn-verificar:disabled {
  background: #7ba9ad;
  color: #fff;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
footer .instrucao-botao {
  margin-top: 13px;
  font-size: 13px;
  color: #576574;
}
footer #btn-recarregar svg {
  width: 16px;
  height: 16px;
}

/* BABY */
#babychoro {
  position: fixed;
  width: 390px;
  box-shadow: 0 8px 25px rgba(0,0,0,.07);
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  animation: fadeInSuave 0.5s ease-out forwards;
}
#babychoro .box {
  background: #fff;
  border: 1px solid #ffd8d7;
  border-radius: 20px;
  padding: 10px 20px 20px 20px;
}
#babychoro .box img {
  float: left;
  padding-right: 30px;
}
#babychoro .box svg {
  color: #972430;
  margin-top: 15px;
  width: 20px;
}
#babychoro .box h2 {
  color: #0d1e2f;
  font-weight: 700;
}
#babychoro .box p {
  margin: 0;
  color: #576574;  
}

/* ACERTO / ERRO */
.resultado-item {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: bold;
  opacity: 0;
  text-align: center;
  transform: scale(.5);
  transition: opacity .2s,transform .2s;
  margin-left: 10px;
}
.solucao.correta {
  border-color: #139447;
  background: #effaf3;
}
.solucao.errada .texto-solucao {
  color: #139447;
}
.solucao.correta.drop-zone {
  border-color: #139447;
  background: #fff;
}
.solucao.correta .resultado-item {
  opacity: 1;
  transform: scale(1);
  background: #139447;
  color: #fff;
}
.solucao.correta .resultado-item::before {
  content: "✓";
  margin-top: -2px;
}
.solucao.errada {
  border-color: #d93025;
  background: #ffd8d7;
}
.solucao.errada .texto-solucao {
  color: #d93025;
}
.solucao.errada.drop-zone {
  border-color: #d93025;
  background: #fff;
}
.solucao.errada .resultado-item {
  opacity: 1;
  transform: scale(1);
  background: #d93025;
  color: #fff;
}
.solucao.errada .resultado-item::before {
  content: "×";
  margin-top: -2px;
}

/* RESULTADO */
#mensagem-final {
  display: none;
  margin: 15px auto 0 auto;
  padding: 10px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
#mensagem-final.sucesso {
  display: block;
  background: #effaf3;
  color: #139447;
  border: 1px solid rgba(19,148,71,.25);
}
#mensagem-final.erro {
  display: block;
  background: #fff3f2;
  color: #d93025;
  border: 1px solid rgba(217,48,37,.2);
}

/*  DRAG CLONADO */
.ui-draggable-dragging {
  z-index: 9999 !important;
  box-shadow: 0 14px 35px rgba(0,0,0,.17);
  transform: rotate(2deg);
  opacity: .95;
}

/* PARABENS */
.parabens {
  color: #fff;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(23, 11, 55, 0.86);
  z-index: 999999;
}
.parabens .overlay__inner {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.parabens .overlay__content {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 40%;
}
.parabens .trofeu {
  width: 60px;
  height: 60px;
}
.parabens h2 {
  font-weight: 700;
  font-size: 50px;
  margin: 10px 0 0;
}
.parabens p {
  font-size: 20px;
  font-weight: 500;
}
.parabens #btn-forms {
  width: 100%;
  min-height: 40px;
  border: none;
  border-radius: 30px;
  background: #005b60;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s ease,transform .2s ease,opacity .2s ease,box-shadow .2s ease;
}
.parabens #btn-forms:hover {
  background: #00995d;
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(0,153,93,.2);
}
.parabens #btn-recarregar {
  width: 100%;
  min-height: 40px;
  border: none;
  border-radius: 30px;
  background: #e4f2f2;
  color: #0d1e2f;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s ease,transform .2s ease,opacity .2s ease,box-shadow .2s ease;
}
.parabens #btn-recarregar:hover {
  background: #c8caca;
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(0,153,93,.2);
}
.parabens #btn-recarregar svg,.parabens #btn-forms svg {
  width: 16px;
  height: 16px;
}

/* FORMULARIO */
.formulario {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(23, 11, 55, 0.86);
  z-index: 999999;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.formulario .overlay__inner {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.formulario .overlay__content {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.formulario .box {
  background: #fff;
  padding: 10px 20px;
  border-radius: 20px;
}
.formulario .box .close {
  font-size: 16px;
}
.formulario .box h2 {
  font-size: 22px;
  font-weight: 600;
  color: #0d1e2f;
  margin: 0;
}
.formulario .box p {
  margin: 0 0 20px;
  color: #576574;  
}
.formulario .box label {
  color: #0d1e2f;
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 0px;
}
.formulario .box input,.formulario .box select {
  border-radius: 10px;
  box-shadow: 0 2px 11px rgba(0,0,0,0.1);
  font-size: 14px;
}
.formulario .box h3 {
  font-size: 15px;
  font-weight: 600;
  color: #0d1e2f;
  margin: 20px 0 10px;
}
.formulario .box input.btn_enviar_mail {
  width: 100%;
  border: none;
  border-radius: 30px;
  background: #005b60;
  color: #fff;
  font-size: 16px;
  margin-top: 20px;
  cursor: pointer;
  transition: background .2s ease,transform .2s ease,opacity .2s ease,box-shadow .2s ease;
}
.formulario .box input.btn_enviar_mail:hover {
  background: #00995d;
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(0,153,93,.2);
}
.formulario .box .radio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 10px;
  max-width: 600px;
}
.formulario .box .radio-option {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 15px 8px 38px;
  border: 1px solid #d3dbe3;
  border-radius: 22px;
  background: #f7f9fb;
  color: #12243a;
  font-size: 14px;
  cursor: pointer
  transition: all 0.2s ease;
}
.formulario .box .radio-option.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.formulario .box .radio-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.formulario .box .radio-custom {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 1.5px solid #08788c;
  border-radius: 50%;
  background: #fff;
  transition: all 0.2s ease;
}
.formulario .box .radio-option input[type="checkbox"]:checked + .radio-custom::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #08788c;
  border-radius: 50%;
}
.formulario .box .radio-option.selected {
  border-color: #08788c;
  background: #eef8fa;
}
.formulario .box .radio-option:hover {
  border-color: #08788c;
  background: #f1f8fa;
}

@media(max-width: 650px) {
  .mobile {display: block;}
  header {padding: 20px 0;}
  header img {height: 40px;}
  header p {font-size: 13px;line-height: 14px;}
  .logos {text-align: center;padding: 10px 0;}
  .logos h2 {font-size: 15px;}
  .logos .direito {margin-top: 30px}
  .logo-card {height: 40px;display: inline-flex;}
  .logo-card.a, .logo-card.b, .logo-card.c, .logo-card.d, .logo-card.e, .logo-card.f {padding: 0;}
  .logo-card img {max-width: 115px;}
  .logo-card.a img,.logo-card.b img,.logo-card.c img {height: 20px;padding: 0 10px;}
  .logo-card.d img,.logo-card.e img,.logo-card.f img {height: 30px;padding: 0 10px;}
  .solucao {min-height: 70px;grid-template-columns: 85px 1fr 32px;gap: 12px;padding: 0;}
  .solucao .drop-zone {width: 72px;height: 65px;}
  .solucao .logo-encaixado img {max-width: 58px;max-height: 43px;}
  .solucao .texto-solucao {font-size: 14px;text-align: left;margin-left: 15px;}
  .resultado-item {width: 30px;height: 30px;font-size: 16px;}
  #babychoro {width: 330px;bottom: 12%;}
  #babychoro .box h2 {font-size: 23px;}
  #babychoro .box p {font-size: 13px;}
  #babychoro .box img {height: 110px;}
  #mensagem-final {padding: 5px;}
  #mensagem-final.erro {font-size: 14px;}
  .parabens .overlay__content {top: 35%;width: 100%;}
  .parabens #btn-forms {margin-bottom: 15px;}
  .formulario .overlay__content {width: 95%;}
  .formulario .box {padding: 10px;}
  .radio-grid {grid-template-columns: 1fr;}
}