/* =========================================================
   MOBILE MENU (LIMPIO Y FUNCIONAL)
========================================================= */
@media (max-width: 992px){

  /* NAV PANEL */
  #main-nav{
    position: fixed;
    top: 0;
    right: -100%;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,.80);
    backdrop-filter: blur(8px);

    transition: .4s ease;
    z-index: 1050;

    padding: 10px;
  }

  /* MOSTRAR MENU */
  #main-nav.open{
    right: 0;
  }

  /* CAJA BLANCA DEL MENU */
  .menu-box{
    background: white;
    height: 100%;
    overflow-y: auto;

    width: 88%;
    max-width: 380px;

    border-radius: 0 25px 25px 0;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0);

    animation: slideMenu .35s ease;
  }

  @keyframes slideMenu{
    from{
      transform: translateX(-40px);
      opacity:0;
    }
    to{
      transform: translateX(0);
      opacity:1;
    }
  }

  /* HEADER */
  .menu-header{
    position: relative;

    background: #0f4c5c;
    color: white;

    min-height: 95px;

    padding: 22px 22px;

    display:flex;
    align-items:center;

    font-size: 17px;
    font-weight: 700;

    letter-spacing:.5px;

    overflow:visible;
  }

  /* MENU LISTA */
  #main-nav > .menu-box > ul{
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 20px;
  }

  #main-nav li{
    width: 100%;
    list-style: none;
  }

  /* LINKS PRINCIPALES */
  #main-nav li > a{
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 54px;

    padding: 12px 15px;

    border-radius: 15px;

    color: #1c2554;

    font-size: 15px;
    font-weight: 600;

    transition: .25s ease;
  }

  #main-nav li > a:hover{
    background: rgba(20,99,119,.08);
    transform: translateX(4px);
  }

  /* ICONOS */
  #main-nav li > a i{
    color: #0d4655;
    font-size: 16px;
  }

  /* FLECHA */
  .flecha{
    margin-left: auto;
    font-size: 12px !important;
    transition: .3s ease;
  }

  /* ROTAR FLECHA CUANDO ABRE */
  .menu-dropdown.open .flecha{
    transform: rotate(180deg);
  }

  /* SUBMENU */
  .submenu-box{
    display: none;
    flex-direction: column;

    gap: 6px;

    background: rgba(20,99,119,.05);

    padding: 10px;
    margin-top: 8px;

    border-radius: 14px;
  }

  /* ABRIR SUBMENU */
  .menu-dropdown.open .submenu-box{
    display: flex;
  }

  /* LINKS SUBMENU */
  .submenu-box a{
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 12px;

    border-radius: 10px;

    font-size: 13px;
    font-weight: 500;

    color: #1c2554;

    transition: .25s ease;
  }

  .submenu-box a:hover{
    background: rgba(20,99,119,.10);
    color: #023e4c;
  }

  /* ICONOS SUBMENU */
  .submenu-box a i{
    color: #146377;
    font-size: 14px;
  }


.borrego{

    position:fixed;

    top:65px;

    left:250px;

    width:70px;
    height:auto;

    z-index:99999;
}

}


@media (max-width:992px){

.menu-btn{

    display:flex !important;

    position:fixed;

    top:22px;
    right:20px;

    width:50px;
    height:50px;

    justify-content:center;
    align-items:center;

    background:#fff;

    border:none;
    border-radius:50%;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

    z-index:999999;
}

.menu-btn i{
    font-size:30px;
    color:#123d63;
}

}