@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');


.fondo_loading{
    background-image: url('../images/fondo_loading.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height: 100vh;
}

@media (pointer: coarse) and (hover: none) {
    .fondo_loading {
      background-image: url('../images/fondo_loading_movil.jpg');
      background-size: cover;
      height: 100vh;
    }
}

.fondo1{
    background-image: url('../images/img-principal-sitio-BeB.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height: 100vh;
}

.btnCal {   
    display: block;      
    position: absolute;
    left: 47%;
    bottom: 50px;
    z-index: 1;
  
    .ref{
      display: block;
      text-decoration: none;
      text-align: center;
      background: #8535b9;
      width: 210px;
      color: #fff;
      font-weight: bold;
      border-radius: 10px;
      padding: 18px 0px;
      font-size: 20px;
    }
}

.btnCal2 {   
    display: block;      
    position: absolute;
    left: 47%;
    bottom: -20px;
    z-index: 1;

    .terminos{
        display: block;
        text-decoration: none;
        text-align: center;
        background: #8535b9;
        width: 210px;
        color: #fff;
        font-weight: bold;
        border-radius: 10px;
        padding: 10px;
        font-size: 20px;
    }
}

@media (pointer: coarse) and (hover: none) {
    .fondo1 {
      background-image: url('../images/img-principal-sitio-BeB-movil.jpg');
      background-size: cover;
      height: 85vh;
    }

    .btnCal {
        display: block;      
        position: absolute;
        left: 5%;
        bottom: 15%;
        z-index: 1;
      
        .ref {
          display: block;
          text-decoration: none;
          text-align: center;
          background: #8535b9;
          width: 180px;
          color: #fff;
          font-weight: bold;
          border-radius: 10px;
          padding: 10px 0px;
          font-size: 15px;     
          
        }
    }
      
    .btnCal2 {   
        display: block;      
        position: absolute;
        left: 52%;
        bottom: 17%;
        z-index: 1;
    
        .terminos{
            display: block;
            text-decoration: none;
            text-align: center;
            background: #8535b9;
            width: 180px;
            color: #fff;
            font-weight: bold;
            border-radius: 10px;
            padding: 12px;
            font-size: 12px;
        }
    }
}


/* Gradiente Verde */
/* .gradiente-1{
    background-image: linear-gradient(120deg, #9fcdcc 0, #56b4b3 50%, #2c9e9c 100%);
} */

.gradiente-1{
    background: rgb(149,157,230);
    background: radial-gradient(circle, rgba(149,157,230,1) 0%, rgba(122,147,210,0.8127450809425333) 31%, rgba(255,103,162,0.6390756131554185) 65%, rgba(217,209,123,1) 100%); 
}

.gradiente-2{
    background: rgb(149,157,230);
    background: linear-gradient(0deg, rgba(149,157,230,1) 0%, rgba(122,147,210,0.8127450809425333) 65%, rgba(255,103,162,0.6390756131554185) 83%, rgba(217,209,123,1) 100%);  
}

.text-orange {
    color: #f5b335;
}

.text-blue {
    color: #00a2dc;
}

.btn-morado {
    color: #fff;
    background-color: #8535b9;
    border-color: #8535b9;
}  

.btn-morado:hover {
    color: #fff;
    background-color: #8f5db1;
    border-color: #8f5db1;
}

.btn-orange {
    color: black;
    background-color: #f5b335;
    border-color: #f5b335;
    font-size: 25px;
}

.btn-orange:hover {
    color: black;
    background-color: white;
    border-color: #d89c2b;
}

.bg-morado{
    background: #8535b9;
}

.bg-blue{
    background: #00a2dc;
}

.bg-orange{
    background: #d8d179;
}

.bg-green{
    background: #46afb5;
}

.bg-green2{
    background: #76b87a;
}

.whatsApp {
    height: 80px;
    width: 80px;
    position: fixed;
    right: 0px;
    bottom: 20px;
    z-index: 99;
  
    a {
      display: block;
      height: 80px;
      width: 80px;
      display: flex;
      justify-content: center;
  
      img {
        height: 80px;
      }
    }
}