@charset "UTF-8";
@font-face {
  font-family: "MyriadPro-Bold";
  src: url("../fonts/MYRIADPRO-BOLD.woff") format("woff");
}
@font-face {
  font-family: "MyriadPro-Bold-Cond";
  src: url("../fonts/MYRIADPRO-BOLDCOND.woff") format("woff");
}
@font-face {
  font-family: "MyriadPro-Bold-Cond-It";
  src: url("../fonts/MYRIADPRO-BOLDCONDIT.woff") format("woff");
}
@font-face {
  font-family: "MyriadPro-Bold-It";
  src: url("../fonts/MYRIADPRO-BOLDIT.woff") format("woff");
}
@font-face {
  font-family: "MyriadPro-Cond";
  src: url("../fonts/MYRIADPRO-COND.woff") format("woff");
}
@font-face {
  font-family: "MyriadPro-Cond-It";
  src: url("../fonts/MYRIADPRO-CONDIT.woff") format("woff");
}
@font-face {
  font-family: "MyriadPro-Light";
  src: url("../fonts/MyriadPro-Light.woff") format("woff");
}
@font-face {
  font-family: "MyriadPro-Regular";
  src: url("../fonts/MYRIADPRO-REGULAR.woff") format("woff");
}
@font-face {
  font-family: "MyriadPro-SemiBold";
  src: url("../fonts/MYRIADPRO-SEMIBOLD.woff") format("woff");
}
@font-face {
  font-family: "MyriadPro-SemiBold-It";
  src: url("../fonts/MYRIADPRO-SEMIBOLDIT.woff") format("woff");
}
.btn-white {
  background: white;
  font-family: "MyriadPro-Regular";
}
.btn-white:hover {
  background: white;
  border: white;
}

html{
  font-size: 16px; /* Tamaño base para 1rem */
}

@media (max-width: 768px) {
  html {
    font-size: 12px;
    /* Otros estilos específicos para pantallas pequeñas */
  }
}

body {
  border: 0;
  padding: 0;
  background: #000 !important;
  font-size: 1.2rem;
  font-family: "MyriadPro-Regular";
}


.container-fluid {
  border: none;
  padding: 0;
  justify-content: center !important;
}

#home {
  height: calc(100vh - 64px);
  background-image: url("../img/top_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  #home {
    height: calc(100vh - 95px);
    background-image: url("../img/top_bg_small.png");
  }
}
#img_top_banner {
  margin-top: 0px;
  padding: 3rem;
}

.full-width-image {
  width: 100%;
  vertical-align: center;
}

.vertical-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 64px);
}

.full-height{
  height: 100vh;
}

.separator {
  min-height: 10rem;
  text-align: center;
  color: white;
  font-size: 3rem;
  font-family: "MyriadPro-Light";
  display: flex;
  align-items: center;
  justify-content: center;
}

.separator-gold {
  background-color: #ada276;
  display: block;
  font-size: 1rem;
}
.separator-gold .title {
  color: white;
  font-size: 3rem;
  font-family: "MyriadPro-Light";
  padding-top: 1rem;
  text-transform: uppercase;
}
.separator-gold .body {
  font-size: 1rem;
  padding-bottom: 1rem;
}
.separator-gold .button {
  border: 1px solid white;
  color: white;
  padding: 0.5rem 1rem;
  display: inline-block;
  border-radius: 2rem;
}
.separator-gold .button:hover {
  color: #87c8d9;
  border-color: #87c8d9;
}
.separator-gold a {
  text-decoration: none;
}

@media (max-width: 768px) {
  .separator-gold .title {
    font-size: 2rem;
  }
}
.separator-paralax {
  background-image: url("../img/bk-paralax-10.jpg");
  height: 20rem;
  background-size: cover;
  background-color: #434758;
  text-align: center;
  color: white;
  font-size: 3rem;
  font-family: "MyriadPro-Light";
  display: flex;
  align-items: center;
  justify-content: center;
}

.separator_line_white {
  height: 0.3rem;
  background: white;
}

.separador-white {
  height: 10rem;
  background-image: url("../img/separator_white.png");
  background-size: cover;
  background-position: center;
}

.separador-black {
  height: 5rem;
  background-image: url("../img/separator_white.png");
  background-color: #1f1f1f;
  background-size: cover;
  background-position: center;
}

@media (max-width: 768px) {
  .separador-black {
    height: 1rem;
  }
}
.separador-fondo {
  height: 5rem;
  background-image: url("../img/elements-04.png");
  background-color: #1f1f1f;
  background-size: cover;
  background-position: bottom;
}

.seccion {
  padding: 0rem 0;
}

.seccion-blanco {
  background-color: white;
}

.seccion-gris {
  background-color: #252832;
  color: white;
}

.seccion-pricing {
  background-image: url(../img/bg_pricing.jpg);
}
.seccion-pricing > .row {
  background-color: #0000006b;
}

.page_title {
  font-size: 3rem;
  text-align: center;
  font-family: "MyriadPro-Light";
  padding: 1rem;
  padding-top: 2.5rem;
  color: #ada276;
}

@media (max-width: 768px) {
  .page_title {
    font-size: 1.7rem;
  }
}
.page_body {
  margin: 0 1rem;
  text-align: justify;
}
.page_body p {
  text-align: center;
}

.page_small_title {
  font-size: 1.1rem;
  text-transform: uppercase;
  text-align: center;
  font-family: "MyriadPro-Bold";
  padding: 0.2rem;
  color: #87c8d9;
}

.contact_wrapper {
  padding: 0 1rem;
}
.contact_wrapper .title {
  font-size: 1.6rem;
  font-family: "MyriadPro-Bold";
  text-align: center;
  text-transform: uppercase;
}
.contact_wrapper .subtitle {
  font-size: 1.2rem;
  font-family: "MyriadPro-Light";
  text-align: center;
  color: #000;
  padding: 1rem;
}
.contact_wrapper p {
  font-size: 1rem;
  font-family: "MyriadPro-Light";
  text-align: center;
}
.contact_wrapper a {
  font-family: "MyriadPro-Light";
  color: #000;
}
.contact_wrapper .max {
  font-family: "MyriadPro-Light";
  color: #000;
}

.form{
  padding: 2rem;
}

.form_input{
  border-radius: 20px;
}

.form_input_area{
  border-radius: 10px;
}

.contact_map_wrapper {
  background-image: url(../img/4seasons.png);
  min-height: 20rem;
  height: 100%;
  position: relative;
}
.contact_map_wrapper .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact_map_wrapper .overlay .button {
  color: white;
  border: 1px solid white;
  font-family: "MyriadPro-Light";
  display: inline-block;
  width: 15rem;
  height: 4rem;
  text-align: center;
  font-size: 2rem;
  border-radius: 2rem;
  line-height: 4rem;
}
.contact_map_wrapper .overlay .button a {
  color: white;
  text-decoration: none;
}
footer  {
  font-size: 0.9rem;
  background-color: #000 !important;
}
footer p {
  color: #fff ;
}
footer a {
  color: #fff;
}

#navbar {
  font-family: "MyriadPro-Bold";
  font-size: 1.3rem;
  margin-top: 2rem;
  background-color: transparent;
  position: fixed;
  width: 100%;
  z-index: 1000;
  //transition: background-color 1s ease;

}
.navbar-toggler {
  cursor: none;
}

.navbar-toggler:focus {
  box-shadow:none !important;
}

.navbar-brand {
  color: #fff;
}

li.nav-item {
  padding-right: 1.5rem;
}

.navbar-nav{
  margin-top: 5rem;
}

.navbar-nav .nav-link {
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
  text-transform: uppercase;
  font-family: "MyriadPro-Regular";
  padding: auto 2rem;
}

.navbar-nav .nav-link.active {
  color: #ada276;
}

.navbar-text {
  color: white;
  width: 50%;
  font-family: "MyriadPro-Light";
}

.icon{
  font-size: 1rem;
}

.system-logo { height: 100%; width: auto; max-width: 300rem; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; }

.navHeader{
  background-color: #000 !important;
  text-align: right;
  padding: 0.5rem;
  padding-right: 11rem;
  font-size: 1rem;
  font-family: "MyriadPro-Light";
}

.amenidades-container{
  display: flex;
  justify-content: space-between;
}

.amenidades-icon{
  text-align: center;
  font-size: 1rem;
}

.amenidades-icon i{
  font-size: 2.5rem;
  color: #000;
  background: #ada276;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  align-content: center;
  transition: width 0.3s ease, height 0.3s ease; /* Transición suave */

}

.amenidades-icon i:hover {
  transform:scale(1.2)
}

.amenidades-icon p{
  font-size: .8rem;
  font-weight: 500;
  color: #000;
  margin-top: 10px;
  font-family: 'MyriadPro-Regular';
}

.descripcion{
  background: black;
}

.animacion {
  view-timeline-name: --image;
  view-timeline-axis: block;
  animation-timeline: --image;
  animation-name: show;
  animation-range: entry 25% cover 30%;
  animation-fill-mode: both;
}

.animacion2{
  view-timeline-name: --image;
  view-timeline-axis: block;
  animation-timeline: --image;
  animation-name: show2;
  animation-range: entry 100% cover 50%;
  animation-fill-mode: both;
}

.animacionGrow{
  view-timeline-name: --image;
  view-timeline-axis: block;
  animation-timeline: scroll(root);
  animation-name: grow auto linear;
  animation-range: 0% 50%;
  animation-fill-mode: both;
}

.animacion3{
  animation: mover-derecha-izquierda 2s linear;
}

.animacion4{
  animation: aparecer 2s 1;
 }

 .animacion5{
  animation: aparecer 4s 1;
 }

 .animacion6{
  animation: aparecer 6s 1;
 }

 @keyframes grow {
  from{
    width: 0%;
  }

  to{
    width: 100%;
  }
  
 }

@keyframes mover-derecha-izquierda {
  from {
    transform:translateX(100px);
  }
  to {
    transform:translateX(0px);
  }
}

@keyframes show {
  from {
    opacity: 0;
    scale:25%;
  }
  to {
    opacity: 1;
    scale:100%;
  }
}

@keyframes aparecer {
  from {
    scale:100%;
    opacity: 0;
  }
  to {
    opacity: 0.7;
    scale:90%;
  }
}

@keyframes show2{
  from {
    opacity: 0;
    scale:100%;
  }
  to {
    opacity: 1;
    scale:90%;
  }
}



.image-carousel{
  width: 50%;
  background-size: cover;
  background-position: center center;
}

.text-carousel{
  width: 50%;
  padding: 1rem;
  color: darkgray;
  text-align: center;
  background-color: #000;
}

.contenido-carousel{
  padding: 0.1rem;
  height: 30rem;
}

.carousel-caption {
  position: absolute;
  right: 10%;
  left: 30%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: right;
  top: 30%;
}

.banner-titulo{
  font-family: 'MyriadPro-Bold';
  font-size: 4rem;
}

.banner p{
  font-family: 'MyriadPro-Regular';
  font-size: 1.3rem;
}

.banner-overlay{
  opacity: 0.8;
  object-fit: cover;
}

.banner-subrayado{
  background-color: #ada276;
  color: #000;
  padding: .5rem;
}

.carousel-prices {
  position: absolute;
  
  left: 30%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: right;
  top: 70%;
}

.carousel-title {
  position: absolute;
  right: 40%;
  left: 40%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #000;
  text-align: center;
  top: 80%;
  background-color: #ada276;
  font-family: 'MyriadPro-Bold-It';
  bottom:10%;
}

.price-box{
  right: 0;
  display: inline-block;
  background-color: black !important;
  opacity: 0.7 ;
  border-color: #ada276;
  border-style: solid;
  border-width: 0.2rem;
  border-radius: 20px;
  text-align: center;
  width: fit-content;
  padding: 1rem;
}

.form label {
  display: inline-block;
  text-align: left !important;
}

.gold-btn{
  color: white;
  background-color: #ada276;
  width: 200px;
  font-size: 1.2rem;
  font-family: "MyriadPro-Semibold";
  border-radius: 10px;
  height: 50px;
}

.tipo-title{
  font-size: 1.5rem;
  color: #ada276;
  border-bottom: 1px solid #ada276;
}

.tipo-descripcion{
  font-size: 1.3rem;
  color: white;
}

.tipologia-list{
  list-style: none;
  text-align: left;
  color: white;
}

.tipologia-list li{
  margin: 1rem;
}

.tipologia-list li i{
  margin-right: 1rem;
  color: #ada276;
}

.inline{
  display: inline-flex !important;
}

.div_overlay_banner{
  background-color: #ada276;
  opacity: 0.3;
  position: absolute;
  top: 30%;
  width: 100%;
  height: 20rem;
  left: 30%;
}

.div_overlay{
  background-color: #ada276;
  opacity: 0.3;
  top: 30%;
  width: 100%;
  height: 8rem;
}

.row{
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}