#home-sec-1 {
   overflow-x: hidden
 }

 .carousel-features {
   padding: 20px;
   width: 100%
 }

 .carousel-features div {
   position: relative
 }

 .carousel-features img {
   height: 150px;
   margin: 0 30px
 }

 .carousel-item {
   padding: 0 10px
 }

 .barra {
   padding: 0 45px 0 10px;
   text-align: right;
   margin: 3px 30px 15px 0;
   height: 40px;
   line-height: 40px;
   font-size: 35px;
   font-family: "Urbanist";
   font-weight: 700;
   cursor: pointer;
   transition: all .3s;
   position: relative
 }

 .barra::after {
   background: url(../images/flecha.svg) right center no-repeat;
   background-size: contain;
   content: '';
   height: 25px;
   width: 40px;
   position: absolute;
   right: 8px;
   top: 10px
 }

 .barra:hover {
   background: var(--gris)
 }

 .calendario-container>div, .calendly-container, .calendly-frame, .calendly-frame iframe, .calendly-frame iframe * {
   overflow: hidden !important;
 }

  .calendly-back-btn{
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 5px;
    border: none;
 }

 .calendario-container {
   padding: 0;
   background-repeat: no-repeat;
   background-color: var(--blanco);
   border: var(--borde-negro);
   border-radius: var(--esquina);
   max-width: 350px;
   max-height: 600px;
   position: relative;
   margin: 30px auto
 }

 .calendario-container::after {
   top: calc(var(--sombra-distancia) * 1.5);
   left: calc(var(--sombra-distancia) * -1.5);
   border: var(--borde-negro);
   border-radius: var(--esquina);
   width: 100%;
   height: 100%;
   position: absolute;
   content: '';
   z-index: -1
 }

 .calendario-container>div {
   border-radius: var(--esquina);
   overflow-y: scroll;
   height: 100%;
   max-height: 598px;
 }

 .calendario-title {
   margin: 0;
   background: var(--amarillo);
   text-align: center;
   padding: 10px;
   border-radius: var(--esquina) var(--esquina) 0 0;
   letter-spacing: var(--distancia-letras);
   font-size: 1.8em;
   text-wrap: balance;
   margin-bottom: 30px
 }

 .calendly-frame {
   width: 355px;
   height: 500px;
   border-radius: var(--esquina) var(--esquina);
   padding: 10px;
   background: #FFF;
 }

 #calendly-container {
   position: relative;
   display: none
 }

 #calendario-selector {
   background-color: var(--blanco);
   border-radius: var(--esquina) var(--esquina);
   padding-bottom: 40px;
   overflow-y: scroll;
 }

 iframe {
   position: relative;
   top: 0;
   left: 0;
   border-radius: var(--esquina) var(--esquina)
 }

 #home-sec-1 {
   padding-top: 60px;
 }

 #home-sec-2 {
   margin: 30px 0 0;
   position: relative;
   background: linear-gradient(-180deg, var(--verde) calc(100% - 50px), var(--verde) calc(100% - 50px))
 }

 #home-sec-2::before {
   background: url(../images/img-giftrow1.svg) center no-repeat;
   background-size: cover;
   width: 100%;
   position: absolute;
   content: '';
   height: 120px;
   top: -65px;
   left: 0
 }

 .img-card {
   margin: 0 auto 30px;
   max-width: 230px;
   display: block;
 }

 .hub-logo {
   padding-bottom: 30px
 }

 .hub-logo:hover {
   background: url(../images/logo-hover.svg) center 10px no-repeat;
   background-size: 90%
 }

 .hub-logo:hover button {
   background-color: var(--azul-medio)
 }

 @media screen and (min-width:992px) {
   .barra {
     padding: 0 40px 0 40px;
     margin: 3px 40px 15px 0;
   }

   .home-book {
     height: 90%;
     left: 0
   }

   .img-hub {
     margin-left: -110px;
     width: calc(100% + 40px);
     max-width: none;
   }

   .calendario-container {
     position: absolute;
     right: 30px;
     bottom: -10px;
     max-width: 320px;
     height: 450px;
   }

   #calendario-selector {
     height: 430px;
     overflow: hidden;
   }

   .calendly-frame {
     width: 354px;
     height: 420px;
     transform: scale(0.92);
     transform-origin: top left;
   }

   h1 {
     font-size: 3.6rem
   }

   h2 {
     font-size: 2.5rem
   }

   #home-sec-1 h1+img+p {
     font-size: 1.25em;
     max-width: 500px;
   }

   #home-sec-1 .carousel-features {
     padding: 0 0;
     max-width: 70%;
     margin-left: -25px;
   }

   #home-sec-1 .carousel-features img {
     margin: 0 5px;
     height: 150px;
   }

   #home-sec-2 {
     margin: 30px 0 0
   }

   #home-sec-2::before {
     background: url(../images/img-giftrow1.svg) center no-repeat;
     background-size: contain
   }

   #home-sec-2 .btn-new {
     font-size: 0.85em;
   }
 }

 @media only screen and (min-width:767px) and (max-width:991px) {}

 @media only screen and (min-width:1550px) {
   .hub-logo:hover {
     background: url(../images/logo-hover.svg) center 10px no-repeat;
     background-size: 80%
   }
 }