/* =====================================================
   NAVBAR: base
===================================================== */
.custom-navbar{
  background:transparent;
  transition:background .3s ease, box-shadow .3s ease;
  position:fixed; top:0; width:100%; z-index:1030; /* debajo de modales/galería */
}
.custom-navbar.scrolled{
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(2, 35, 102, 0.06);
}

/* Colores de links (ganan a herencias como .text-white) */
.custom-navbar .nav-link{
  color:#022366 !important;
  transition:color .25s ease, background-size .25s ease;
}
.custom-navbar.scrolled .nav-link{
  color:rgb(33,37,41) !important;
}

.custom-navbar .nav-item{ position:relative; }

/* =====================================================
   SUBRAYADO ANIMADO (solo desktop) — SIN pseudo-elementos
===================================================== */
@media (min-width:992px){
  .custom-navbar .nav-link{
    position:relative;
    display:inline-block;
    padding-bottom:.25rem;                           /* espacio para la línea */
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat:no-repeat;
    background-position: center calc(100% + 0px);    /* justo bajo el texto */
    background-size: 0% 2px;                         /* inicia oculto */
  }
  .custom-navbar .nav-link:hover,
  .custom-navbar .nav-item.active .nav-link{
    background-size: 80% 2px;                        /* línea visible */
  }

  /* Dropdown: espacio para la flecha */
  .custom-navbar .nav-item.dropdown > .nav-link{ padding-right:1.1rem; }

  /* Caret del dropdown centrado y del color del link */
  .custom-navbar .dropdown-toggle::after{
    vertical-align: middle;
    margin-left:.35rem;
    border-top-color: currentColor;
  }
}

/* =====================================================
   DROPDOWN (desktop: hover) — fade/slide
===================================================== */
@media (min-width: 992px){
  .custom-dropdown-menu{
    position:absolute; top:100%; left:0; min-width:100%;
    background:#fff; border:none; border-radius:.5rem;
    box-shadow:0 8px 16px rgba(0,0,0,.1);
    padding:.5rem 0; opacity:0; transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease;
    display:none; pointer-events:none;
  }
  .custom-dropdown-menu .dropdown-item{
    padding:.75rem 1.5rem; color:#333;
    transition:background .2s ease, color .2s ease;
  }
  .custom-dropdown-menu .dropdown-item:hover,
  .custom-dropdown-menu .dropdown-item.active{
    background:var(--orange);
    color:#fff;
  }
  .custom-navbar .dropdown:hover .dropdown-menu{
    display:block; opacity:1; transform:translateY(0); pointer-events:auto;
  }
}

/* =====================================================
   MÓVIL
===================================================== */
@media (max-width:991.98px){
  .custom-navbar{
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(2, 35, 102, 0.06);
  }
  /* Asegurar que el collapse se muestre cuando está abierto */
  #navbarNavContent.collapse{ display:none; }
  #navbarNavContent.collapse.show{ display:block; }
  .custom-navbar.is-open #navbarNavContent{ display:block; }
  .custom-navbar.is-open .navbar-collapse{ display:block; }

  .custom-navbar .navbar-collapse{
    margin-top:1rem; padding:1rem; background:#fff;
    border-radius:.5rem; box-shadow:0 8px 16px rgba(0,0,0,.1);
  }
  .custom-navbar .navbar-nav{
    display:flex;
    flex-direction:column;
    gap:.25rem;
  }
  .custom-navbar .navbar-nav{ color:#022366; }
  .custom-navbar .nav-link{
    color:#022366 !important;
    padding:.75rem 0;
    background-size:0 0;
  }
  .custom-navbar .nav-item{ width:100%; border-bottom:1px solid #eee; }
  .custom-navbar .nav-item:last-child{ border-bottom:none; }
  .custom-navbar .dropdown-menu{
    position:static; width:100%; box-shadow:none;
    border:1px solid #eee; margin-top:.5rem; background:#f8f9fa;
  }
  .custom-navbar .dropdown-item{ color:#022366 !important; }
  .navbar-toggler{ border:none; outline:none; box-shadow:none !important; }
  .navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(2,35,102,.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  .custom-navbar.scrolled .navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33,37,41,.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}

/* =====================================================
   FIX: mostrar collapse en desktop (≥992px) aunque otro CSS lo oculte
===================================================== */
@media (min-width:992px){
  .custom-navbar.navbar.navbar-expand-lg .collapse.navbar-collapse{
    display:flex !important; visibility:visible !important; opacity:1 !important;
  }
  #navbarNavContent{ justify-content:center; }
}