/* inter-300 - latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local(''),
         url('fonts/inter-v12-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('fonts/inter-v12-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  /* inter-400 - latin */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
         url('fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('fonts/inter-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local(''),
         url('fonts/inter-v12-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('fonts/inter-v12-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''),
         url('fonts/inter-v12-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('fonts/inter-v12-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  
  @media screen and (max-width < 900px) {
     ul {
          margin: auto;
     }
     
     /* img {
          height: 50%;
          width: 50%;
     } */

  }

  .fondo {
     height: 100%;
     background-image: url("../img/back-red.jpg");
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
  }

.boton {
     position: relative;
     padding: 10px 20px;
     border-radius: 7px;
     border: 3px solid rgb(154, 40, 40);
     font-size: 14px;
     text-transform: uppercase;
     font-weight: 600;
     letter-spacing: 2px;
     background: transparent;
     color: #fff;
     overflow: hidden;
     box-shadow: 0 0 0 0 transparent;
     -webkit-transition: all 0.2s ease-in;
     -moz-transition: all 0.2s ease-in;
     transition: all 0.2s ease-in;
   }
   
   .boton:hover {
     background: rgba(123, 4, 10, 0.653);
     box-shadow: 0 0 30px 5px rgba(148, 9, 9, 0.815);
     -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
     transition: all 0.2s ease-out;
   }
   
   .boton:hover::before {
     -webkit-animation: sh02 0.5s 0s linear;
     -moz-animation: sh02 0.5s 0s linear;
     animation: sh02 0.5s 0s linear;
   }
   
   .boton::before {
     content: '';
     display: block;
     width: 0px;
     height: 86%;
     position: absolute;
     top: 7%;
     left: 0%;
     opacity: 0;
     background: #fff;
     box-shadow: 0 0 50px 30px #fff;
     -webkit-transform: skewX(-20deg);
     -moz-transform: skewX(-20deg);
     -ms-transform: skewX(-20deg);
     -o-transform: skewX(-20deg);
     transform: skewX(-20deg);
   }
   
   @keyframes sh02 {
     from {
       opacity: 0;
       left: 0%;
     }
   
     50% {
       opacity: 1;
     }
   
     to {
       opacity: 0;
       left: 100%;
     }
   }
   
   @media (max-width: 768px) {
  .navbar-brand {
    padding: 5px;
    /* Reduce el padding */
  }

  .nav-item {
    margin: 0 5px;
    /* Reduce el margen entre elementos */
  }
}

@media (max-width: 768px) {
  .navbar-nav {
    flex-wrap: wrap;
    /* Permite que los elementos se envuelvan */
  }

  .nav-link {
    font-size: 12px;
    /* Ajusta el tamaño del texto */
  }

  .nav-item:last-child {
    flex-basis: 100%;
    /* Asegura que "Mockups" ocupe toda la fila */
    text-align: center;
    /* Centra el texto */
  }
}
   
   .boton:active {
     box-shadow: 0 0 0 0 transparent;
     -webkit-transition: box-shadow 0.2s ease-in;
     -moz-transition: box-shadow 0.2s ease-in;
     transition: box-shadow 0.2s ease-in;
   }
   
   .form-control:hover {
     border-color: #b30d0dd1;
     box-shadow: -10px -10px 10px 0px rgba(171, 10, 10, 0.814), 5px 5px 10px 0px red;
   }

   .form-control:focus {
     border-color: #b30d0dd1;
     box-shadow: -5px -5px 5px 0px rgba(171, 10, 10, 0.814), 5px 5px 10px 0px red;
   }

   #mostrar {
     border: 1px solid #fff; 
   }

   .card-body input[type="text"],
   .card-body input[type="password"]    {
     background: transparent;
     color: #fff;
     letter-spacing: 1px;
     font-weight: 400;
   } 

   .lead {
    font-weight: 400;
   }

  .dis:hover {
    width: 400px;
  }

  .editar:hover, .eliminar:hover {
    border: solid 1px #fff;
    border-radius: 5px;
  }