/*Vars*/
:root {
  --dark-text-color: #060000;
  --light-text-color: #f5f5f5;
  --primary-color: rgb(21, 92, 186);
  --primary-color-lighter: rgb(102, 149, 218);  
  --primary-color-darker: rgb(15, 66, 133);
}


/*Fonts*/
@font-face {
  font-family:"MorrisSansMedium";
  src: url('/files/FontsFree-Net-Morris-Sans-W01-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family:"OceanDemiBold";
  src: url('/files/FontsFree-Net-Ocean-DemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}
/*Estilos personalizados*/
.bg-dots-1{
        background-image: url(/files/dots_bg_1.png),url(/files/dots_bg_1_reflected.png);
        background-repeat: no-repeat;
        background-position: 0 0,101% 0;
}
.fadeIn{
    opacity: 0;
    animation: fadeIn 3s forwards;
}
.slideLeft{
    animation: slideLeft 2s ease-out forwards;
}
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
@keyframes slideLeft {
    from {
        transform: translateX(50px);
    }

    to {
        transform: translateX(0);
    }
}

    .mainFont{
        color: #171717;
        font-size: 48px;
        font-weight: 500;
        line-height: 52px;
        text-align: left;
        font-family: greycliff-cf;
    }
    .h2Font{
        color: #171717;
        font-size: 44px;
        font-weight: 500;
        line-height: 48px;
        text-align: left;
        font-family: greycliff-cf;
    }
    .morrisFont{
        font-family: "MorrisSansMedium";
    }
    .oceanFont{
        font-family: "OceanDemiBold"
    }

/*Menus*/
.menu-link.underline-on-hover:after{
  content: "";
  display: block;
  margin: auto;
  height: 2px;
  width: 0;
  top: 5px;
  background: transparent;
  transition: all 0.3s;
}

.menu-link.underline-on-hover:hover::after,.menu-link.underline-on-hover.active-link::after{
  width: 100%;
  background-color:var(--primary-color);
}
.menu-link.underline-on-hover.light-text-color:hover::after,.menu-link.underline-on-hover.active-link::after{
    background-color:var(--primary-color);
}
/*Menu hamburguer*/
/*Navbar lat container*/
.navbar-lat-container{
    transition:all 0.2s 0s;
    background-color: var(--primary-color-darker);
    position:fixed;
    right:-300px;
    height: 100vh;
    width:300px;
    top:0;
}
.navbar-lat-container.active{
    right:0px;
}
.lat-menu-link.active{
    background-color: var(--primary-color);
}
.lat-menu-link:hover{
    background-color: var(--primary-color);
}
.menu-ham-close-button:hover{
    cursor:pointer;
}

/*Modals*/
.modal{
  display: none; /* Por defecto, estará oculto */
  position: fixed; /* Posición fija */
  z-index: 100; /* Se situará por encima de otros elementos de la página*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; 
  max-width: 80vw;
  height: 400px;
  max-height:80vh;
  overflow: auto; /* Se activará el scroll si es necesario */
}
.modal.active{
    display:block;
}
.modal.show {
  animation: modalSlideDownFadeIn 0.4s ease-out forwards;
}

.modal.hide {
  animation: modalSlideUpFadeOut 0.3s ease-in forwards;
}
/*Animaciones para el modal*/
@keyframes modalSlideDownFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50px); /* centrado horizontal, más desplazamiento vertical */
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%); /* posición centrada original */
  }
}

@keyframes modalSlideUpFadeOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50px); /* hacia arriba */
  }
}
/* Animaciones para el backdrop */
@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes backdropFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.modal-backdrop.show {
  animation: backdropFadeIn 0.3s ease-out forwards;
}

.modal-backdrop.hide {
  animation: backdropFadeOut 0.2s ease-in forwards;
}