@import url(../plugins/fontawesome/css/fontawesome.min.css);
@import url(../plugins/fontawesome/css/all.min.css);
@import url(webfontkit/stylesheet.css);
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Outfit:wght@100..900&display=swap');
body {
    
  font-family: "Didact Gothic", sans-serif;
    --bs-red: #fc3a33;
    --bs-redlight: #FF5D59;
    --bs-reddark: #E20F09;
    --bs-gray: #525252;
    color: #333333;
   

}

.color-red {
  color: var(--bs-red);
}
.color-white {
  color: #ffffff;
}

.br-30 {
  border-radius: 30px;
}



.header {
  border-radius: 30px;
  background: #f4f4f4;
  padding: 10px 20px;
  margin: 20px;
}

.fixed-header {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  width: 100%; 
  background: #ffffff;
  padding: 10px 20px 10px 0;
  z-index: 10;
  
  
}

.redes {
  margin-top: 20px;
  font-size: 1.7em;
  text-align: right;
}

.redes.fixed-header {
  text-align: center;
}

.redes .item-red {
  color: var(--bs-red);
  margin-right: 15px;
}

.content_intro {
  margin: 30px;

}

.bloque1 {
  background: #f4f4f4;
  border-radius: 30px 0 0px 30px;
  padding: 5%;
 
}

.bloque1_1 {
  background: #f4f4f4;
}


.bloque1_2 {
  background: #ffffff;
  border-radius: 0 30px 0 0;
  padding: 5% 5% 0 0;

}

.bloque1_3 {
 
  background: #f4f4f4;
  border-radius: 30px;
  padding: 10%;

  text-align: justify;
  font-size: 1.4em;
 
}

.bloque2 {
  background: #f4f4f4;
  border-radius: 0 30px 30px 30px;
 
}

.content {
  margin: 20px;
}

.content_text {
  background: #f4f4f4;
  border-radius: 30px;
  padding: 5%;
  font-size: 1.4em;
}

.content_text.bg-red {
  background-color: var(--bs-red);
}

.content_text.bg-red h2{
  color: #ffffff;
}



h1 {
  font-size: 5em;
  font-weight: 800;
  color: var(--bs-gray);
  margin-top: 5%;
  font-family: "Outfit", sans-serif;
  line-height: .6em;
}

h1 .name {
  font-size: 900;
  color: var(--bs-red);
  display: block;
  font-size: .4em;
  letter-spacing: 5px;
}

h3 {
  font-family: "Outfit", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 0;
}

h2 {
  font-size: 3em;
  font-weight: bold;
  font-family: "Outfit", sans-serif;
  line-height: .8em;
}

.txt-destacado {
  font-weight: 900;
  text-decoration: underline;
  font-family: "Outfit", sans-serif;
}

.precio {
  font-size: 3em;
  font-family: "Outfit", sans-serif;
  margin-bottom: 0;
  line-height: .7em;
}

.precio .small_text {
  display: block;
  font-size: .4em;
  padding-left: 10px;
}



.img-rounded {
  border-radius: 30px;
  width: 90%;
  max-width: 900px;
  margin: 5% auto;
}

.img-planos {
  background: url(../img/PB_img1.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  border-radius: 30px;
  min-height: 800px;
  margin: auto;
}


.item-feature {
  text-align: center;
  margin-top: 5%;
  flex: 1 1 0px;
}

.item-feature p {
  margin-top: 10%;
  font-size: .9em;
  line-height: .9em;
}

.item-feature img{
  width: 50px;
  
}

.elementspago {
  width: 100%;
  max-width: 900px;
  margin: 5% auto 0 auto;
}

.item-pago {
  flex: 1 1 0px;
  padding: 5%;
  background: var(--bs-red);
  border-radius: 30px;
  margin: 30px;
  text-align: center;
  color: #ffffff;
}

.item-pago:hover {
  background: #000000;
}

.item-pago img {
  width: 100px;
  
}

.item-pago p {
  display: block;
  font-size: .9em;
  line-height: .9em;
  margin-top: 15%;
}

.item-amenidad {
  text-align: center;
  margin-top: 5%;
}

.item-amenidad img{
  width: 100px;
}

.item-amenidad p{
  margin-top: 10%;
  font-size: .9em;
}

.qxCTlb {
  border-radius: 30px !important;
  font-size: .6em;
  padding: 10px 20px;
  border: none;
  font-weight: normal !important;
}

.btn_cita {
  background: var(--bs-redlight);
  color: #ffffff;
  padding: 10% 20%;
  border-radius: 30px;
  text-decoration: none;
  display: inline-block;

}



.btn_cita:hover {
  background: var(--bs-reddark);
}

.promociones {
  color: #ffffff;

}

blockquote {
  background: #ffffff;
  border-radius: 30px;
  padding: 5%;

  color: #000000;
}

.footer {
  text-align: center;
  padding: 20px 0;
}

.footer a {
  color: var(--bs-red);
  text-decoration: none;
}

#modalContactForm .modal-content {
  background: #000000;

}

#modalContactForm .mensaje_form {
  color: #dad8d8;
  font-size: 1.2em;
  padding: 0 5%;
}

#modalContactForm .form-control {

  background: #333333;
  border-radius: 0;
  height: 50px;
  border: none;
  color: #ffffff;

}

#modalContactForm .form-label {

  color: #ffffff;

}

#modalContactForm .btn-send {
  background: var(--bs-red);
  border-radius: 30px;
  padding: 10px 20px;
  color: #ffffff;
}

label.error {
  color: var(--bs-redlight);
}


@media only screen and (max-width: 600px) { 

  .redes {
    text-align: center;
  }

  h1 {
    font-size: 3em;
    line-height: 1em;
  }

  .bloque1 {
    margin-top: 5%;
    border-radius: 0 30px 30px 30px;
  }

  .bloque1_1 {
    background: transparent;

  }

  .bloque1_2 {
    border-radius: 0 30px 30px 30px;
    padding: 5% 0;
  }

  .img-planos {
    min-height: 300px;
    margin-bottom: 5%;
  }

  h2 {
    font-size: 2em;
  }
  
}