html { scroll-behavior: smooth; }

      /* ================================
         PROFESSIONAL SCROLLBAR
      ================================ */
      
      /* Chrome, Edge, Safari */
      ::-webkit-scrollbar {
        width: 10px;
      }
      
      ::-webkit-scrollbar-track {
        background: #f2f2f2;
      }
      
      ::-webkit-scrollbar-thumb {
        background: linear-gradient(
          180deg,
          #00303A,
          #0a5c66
        );
        border-radius: 50px;
        border: 2px solid #f2f2f2;
        transition: all .3s ease;
      }
      
      ::-webkit-scrollbar-thumb:hover {
        background: #cdd51c;
      }
      
      /* Firefox */
      html {
        scrollbar-width: thin;
        scrollbar-color: #00303A #f2f2f2;
      }


    
/* Animaciones */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all .8s ease;
}
.fade-up.active {
  opacity: 1;
  transform: translateY(0);
}

.stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: all .6s ease;
}
.stagger.active > *:nth-child(1){transition-delay:.1s}
.stagger.active > *:nth-child(2){transition-delay:.2s}
.stagger.active > *:nth-child(3){transition-delay:.3s}
.stagger.active > *:nth-child(4){transition-delay:.4s}
.stagger.active > * {
  opacity: 1;
  transform: translateY(0);
}

body{font-family:'Montserrat',sans-serif}
.hero-overlay{background:rgba(0,47,52,.72)}
.fade{opacity:0;transform:translateY(50px);transition:all .9s cubic-bezier(.22,.61,.36,1)}
.fade.active{opacity:1;transform:translateY(0)}
.btn-outline{
border:1px solid #fff;
padding:16px 40px;
letter-spacing:.2em;
}
.btn-outline2{
border:1px solid #cdd51c;
background-color: #cdd51c;
color: #00303A;
padding:16px 40px;
letter-spacing:.2em;
}
.btn-outline:hover{
background:#fff;
color:#002F34;
}
.btn-outline2:hover{
background:transparent;
color:#fff;
}
.card-shadow{
box-shadow:0 20px 40px rgba(0,0,0,.25);
}