/* =========================
   BOTÃO
========================= */

.open-guide-wrapper{
  display:flex;
  justify-content:center;

  margin-top:50px;
}

.open-guide-btn{
  border:none;

  background:#b38463;
  color:white;

  padding: 18px 34px;

  border-radius: 12px;

  font-weight:bold;

  cursor:pointer;

  transition:0.3s;
}

.color-guide{
  width:100%;
  padding: 10px;

  margin:50px auto;
}

.color-guide h2{
  text-align:center;
  font-size: 24px;
  color:#433733;
  margin-bottom:12px;
}

/* =========================
   MODAL
========================= */

.guide-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 5px;
  opacity:0;
  visibility:hidden;
  transition:0.3s;
}

.guide-modal.active{
  opacity:1;
  visibility:visible;
}

.guide-content{
  width:100%;
  /*max-width: 900px;*/

  max-height:100vh;

  overflow-y:auto;

  background:#fff;

  border-radius: 0px;

  padding: 12px;

  position:relative;
}

/* =========================
   FECHAR
========================= */

.close-guide{
  position:absolute;
  top:30px;
  right:30px;
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:#2b2725;
  color:white;
  cursor:pointer;
  font-size:18px;
}

/* =========================
   HEADER
========================= */

.guide-header{
  text-align:center;

  margin-bottom:50px;
}

.guide-header h2{
  font-size: 24px;

  color:#433733;

  margin-bottom:14px;
}

.guide-header p{
  color:#72615b;
}

/* =========================
   GRID
========================= */

.guide-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:28px;

}

/* =========================
  CARD
========================= */

.guide-card{
  position:relative;
  background:white;
  padding: 16px;
  overflow:hidden;
  transition:0.3s;
}

.guide-card:hover{
  transform:translateY(-6px);
}



.guide-card h3{
  position:relative;

  font-size:24px;
  margin-bottom: 24px;
  max-width: 400px;

  color:#fff;

  background-color: #6a615a;
  padding: 10px;
}



.guide-card li{
  padding:12px 0;

  border-bottom:1px solid rgba(0,0,0,0.06);
  color:#72615b;
}

.guide-card li:last-child{
  border-bottom:none;
}

.guide-card strong{
  display:block;

  margin-bottom:6px;

  color:#5b4a42;
}

.guide-card span{
  color:#72615b;

  line-height:1.7;

  font-size:14px;
}

.color-item{
  margin-left: 20px;
}

.color-item li{
  margin-left: 30px;
}

.color-item h4{
  font-size:18px;
  margin-bottom:6px;
  color:#5b4a42;
}

/* =========================
   DICAS
========================= */

.guide-tips{
  max-width: 400px;
  margin-top:50px;
  background:#2b2725;
  color:white;
  padding:36px;
  border-radius: 12px;
}

.guide-tips h3{
  margin-bottom:20px;
}

.guide-tips li{
  margin-bottom:14px;
  line-height:1.7;
}




@media(max-width:768px){

  .guide-content{
    padding:100px 5px;
  }

  .guide-header h2{
    font-size: 16px;
  }

  .guide-header p{
    font-size:14px;
    line-height:1.6;
  }

  .guide-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .guide-card{
    padding: 5px;
  }

  .guide-card h3{
    font-size:20px;
    margin-bottom:18px;
  }

  .guide-card li{
    padding:12px 0;
  }

  .guide-card strong{
    font-size:14px;
  }

  .guide-card span{
    font-size:13px;
    line-height:1.6;
  }

  .guide-tips{
    padding:24px;
    border-radius: 12px;
  }

  .guide-tips h3{
    font-size:20px;
  }

  .guide-tips li{
    font-size:14px;
  }

  .close-guide{
    width:40px;
    height:40px;

    top:14px;
    right:14px;
  }

  .color-item{
    margin-left: 10px;
  }

  .color-item ul li{
    margin-left: 25px;
  }

  .color-item h4{
    font-size:22px;
  }
}