html {
    scroll-behavior: smooth;
  }

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    font-family: "Sansation", sans-serif;
  }
  .iconos{
    color: #172e4a;
    font-size: 45pt;
  }
  .instagram{
    color: #E1306C;
  }
  .facebook{
    color: #3b5998;
  }
  .parrafo{
    color: #525e68;
  }
  .titulo{
    color: #172e4a;
  }
  .titulo-n{
    color: #e6670c;
  }
  .titulo-c{
    color: #0ea79b;
  }
  .titulo-g{
    color: #505e69;
  }
.contenedor{
    width: auto;
    height: 15px;
}
.navbar-expand-lg{
    position: sticky;
    background-color:#fff;
}
.btn1:hover{
    border-style: none;
}
.btn1:focus{
    border-style: none;
    border-color: #525e68;
}

/*botones cajas*/ 
.btnHover {
    width: auto;
    height: auto;
    padding: 30;
    cursor: pointer;
    color: white;
}
.btnHover:hover {
    transition: all .4s;
  }
.imagen {

    display: none; /* inicialmente oculta */

}

/*botones*/ 
.borde{
  border: 2px solid #ccc; /* filo gris */
  border-radius: 12px;
  padding: 20px;
  background: transparent;
  transition: border-color 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  width: 350px;
  height: auto;
}
.borde:hover{
    border: 2px solid #0ea79b;
}
.btn1 {
        color: #0ea79b;
    }
.btn1:hover{
            color: #e6670c;
        }
.btn1:active{
            color: #0ea79b;
        }
.btn2 {
    color: #ffffff;
}
.btn2:hover{
        color: #0ea79b;
    }
.btn-act{
        color: #0ea79b;
    }
.btn-act1{
        color: #e6670c;
    }
.btn3 a{
        color: #ffffff;
    }
.btn3 a:hover{
        color: #0ea79b;
    }
.btn-act2{
        color: #0ea79b;
        font-size: 14pt;
    }
.botones:hover{
  color: #525e68;
}
/*boton arriba*/ 
.bi-up{
        font-size: 1.5rem;
        color: white;
    }
#botonArriba{
    position: fixed;
    bottom: 10px;
    right: 20px;
    transition: .2s;
}
.btn-up{
        margin-right: -10px;
        margin-bottom: 10px;
        width: 3rem;
        height: 3rem;
        background-color: #0ea79b;
        border-color: #0ea79b;
    }   
.btn-up:hover{
        width: 3rem;
        height: 3rem;
        background-color: #525e68;
        border-color: #525e68;
    }  
.btn-icon{
    padding-top: 7px;
    padding-left: 8px;
    padding-right: 2rem;
    border-radius: 10px 0 0 10px;
    box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.42);
    transition: all .4s;
    }
.btn-icon:hover{
    padding-right: 3rem;
    border-radius: 1rem 0 0 1rem;
    box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.42);
    transition: all .4s;
    }

header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #172e4a;
    transition: background-color 0.3s ease;
      }

header.scrolled {
        background-color: #505e69;
      }
   /* scroll moviemintos */
.box {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease-out;
      }
  
      /* Cuando entra en pantalla */
      .box.show {
        opacity: 1;
        transform: translateY(0);
      }

      .caja {
        opacity: 0;
        transform: translateX(-150px);
        transition: all 0.8s ease-out;
      }
      .caja.show {
        opacity: 1;
        transform: translateX(0);
      }
      .derecha{
        opacity: 0;
        transform: translateX(150px);
        transition: all 0.8s ease-out;
      }
      .derecha.show {
        opacity: 1;
        transform: translateX(0);
      }