/* Estilos personalizados para el menú */
.navbar-nav > li > a {
  font-weight: 600;
  text-transform: uppercase;
}

button.navbar-toggler.fen-menu-btn {
    background: #fff;
    border-radius: 50px;
}

.fen-overlay-close {
  color: #ffffff; /* Esto cambia el color del icono a blanco */
}

.fen-navbar {
    background: linear-gradient(to bottom, rgba(0, 48, 87, 0.9) 0%, rgba(0, 48, 87, 0.4) 95%, rgba(0, 48, 87, 0.1) 100%);
    backdrop-filter: blur(4px);
}

button.navbar-toggler.fen-menu-btn path{
  color:#0d3253;
}
.navbar-nav > li > a:hover {
  color: var(--fenalce-brand);
}

.navbar-toggler {
  border: 2px solid var(--fenalce-brand);
}

header {
    position: fixed;
    top: 0;
    z-index: 20;
    width: 100%;
    
}

/* Asegúrate de que .float-bar no tenga estilos por defecto del <ul> */
.float-bar {
  list-style: none;
  padding: 0;
  margin: 0;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

/* Cada <li> */
.float-bar .menu-item {
  margin-bottom: 10px;
}

/* Estilo del enlace */
.float-bar .menu-item a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px 0 0 8px;
  padding: 8px;
  width: 60px;
  height: 60px;
  transition: background 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

/* Hover del botón */
.float-bar .menu-item a:hover { 
  background: #f2c26a;
}

/* Imagen dentro del botón */
.float-bar .menu-item a img {
  width: 45px;
  height: auto;
}

/* Tooltip */
.float-bar .menu-item a .tooltip-label {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: #0d3253;
  color: white;
  font-family: 'Montserrat', sans-serif;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  margin-right: 10px;
}

/* Mostrar tooltip al hacer hover */
.float-bar .menu-item a:hover .tooltip-label {
  opacity: 1;
}

.float-bar li {
    list-style: none;
}

/* Evitar “sliver” visible al cargar por transform del offcanvas */
html, body { overflow-x: hidden; }

/* Logo siempre 200px */
.fen-navbar .navbar-brand img,
.fen-navbar .custom-logo { width:180px; max-width:180px; height:auto; display:block; }
.fen-navbar .navbar-brand { display:flex; align-items:center; }

/* Toggler a la derecha */
.fen-navbar .fen-menu-btn { margin-left:auto; }

/* ========== Overlay fullscreen ========== */
.fen-overlay{
  position: fixed; inset: 0; z-index: 1080; /* por encima del nav/backdrops */
  background: rgba(13,50,83,.85);
  backdrop-filter: blur(2px);
  color:#fff;
  visibility: hidden; opacity: 0;
  transition: opacity .25s ease, visibility 0s linear .25s; /* oculta tras desvanecer */
}
.fen-overlay.show{
  visibility: visible; opacity: 1;
  transition: opacity .25s ease;
}

/* Contenido interno centrado */
.fen-overlay-inner{
  position: relative; width:100%; height:100vh;
  display:flex; align-items:center; justify-content:center; padding:4rem 2rem;
}

/* Botón cerrar arriba-derecha */
.fen-overlay-close{
  position:absolute; top:1rem; right:1rem; z-index:2;

}

/* Lista de menú grande (como tu mockup) */
.fen-overlay-navwrap{ width:min(1100px, 90vw); }
.fen-overlay-nav .menu-item {
    margin: 0 0 10px 0;
    width: fit-content;
}

ul.sub-menu
 {
    display: flex
;
    flex-direction: column;
    align-items: flex-end;
}

.fen-overlay-nav .menu-item a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.25);
  color:#fff;
}

/* Evitar scroll del body cuando el overlay está abierto */
body.fen-menu-open{ overflow: hidden; }

/* Opcional: mejorar contraste del icono hamburguesa */
.navbar-toggler { border-color: rgba(0,0,0,.15); }
.navbar-toggler .navbar-toggler-icon { background-image: var(--bs-navbar-toggler-icon-bg); }

/* Color del icono: usa currentColor */
.fen-menu-btn { color: #fff; border: none; background: transparent; }
.fen-menu-btn .fen-icon-burger { display:block; }

/* Si el fondo es claro y quieres oscurecer el icono: */
/* .fen-menu-btn { color:#212529; } */

.fen-menu-btn:hover { opacity: .85; }
.fen-overlay-close { color:#fff; background:transparent; border:0; }
/* --- Overlay base (ya lo tienes; añado submenús) --- */

/* Enlaces de 1er nivel (grandes, como tu mockup) */
.fen-overlay-nav > .menu-item > a{
  display:inline-block;
  font-family:'Bebas Kai',sans-serif;
  font-size:40px;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none;
    padding: 10px 20px;
  background:rgb(255, 255, 255, .39);
  transition:transform .2s ease, background .2s ease, color .2s ease;
  position:relative;
  padding-right:2.25rem; /* espacio para el chevron */
}

.fen-overlay-nav > .menu-item:nth-child(3n+1) > a { color: #F2C26A; }

/* 2, 6, 10... */
.fen-overlay-nav > .menu-item:nth-child(3n+2) > a { color: #EF8E9A; }

/* 3, 7, 11... */
.fen-overlay-nav > .menu-item:nth-child(3n+3) > a { color: #F4A36F; }


.fen-overlay-nav > .menu-item > a:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.25);
  color:#fff;
}

.navbar {
    padding: 0.5rem 1rem!important;
}

/* Botón chevron para desplegar */
.fen-subtoggle{
  position:absolute; top:50%; right:.35rem; transform:translateY(-50%);
  width:2rem; height:2rem; display:grid; place-items:center;
  background:transparent; border:0; color:#fff; opacity:.9; cursor:pointer;
}
.fen-subtoggle svg{ transition: transform .2s ease; }

/* Contenedor del submenú oculto por defecto (animación con max-height) */
.fen-overlay-nav .sub-menu{
  margin: .5rem 0 0 0;
  padding-left:1rem;
  list-style:none;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .3s ease, opacity .3s ease;
}

/* Al abrir el item */
.fen-overlay-nav .menu-item.open > .sub-menu{
  max-height: 1000px;      /* suficientemente grande para el contenido */
  opacity:1;
}
.fen-overlay-nav .menu-item.open > a .fen-subtoggle svg{
  transform: rotate(180deg);
}

/* Enlaces de 2º nivel (más pequeños) */
.fen-overlay-nav .sub-menu > .menu-item > a{
  display:block;
  font-family:'Bebas Kai',sans-serif;
  font-size: clamp(1.25rem, 3vw, 2rem);
  text-transform:uppercase;
  color:#fff;
  padding:.3em 0;
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
  background-color: rgba(255, 255, 255, 0.30);
  padding: 5px 10px;
   display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.fen-overlay-nav .sub-menu > .menu-item > a:hover{
  color:#0d6efd;
  transform: translateX(4px);
}

/* Niveles más profundos (indentación) */
.fen-overlay-nav .sub-menu .sub-menu{ padding-left:1rem; }

/* Todos los items con hijos sirven de “ancla” para posicionar el chevron */
.fen-overlay-nav .menu-item-has-children{
  position: relative;        
  text-align: right;   /* <= clave */
}

/* Deja espacio a la derecha del enlace para que no tape al chevron */
.fen-overlay-nav .menu-item-has-children > a{
  padding-right: 2.25rem;       /* <= espacio para el botón */
}

/* Botón chevron posicionado a la derecha del item (en todos los niveles) */
.fen-overlay-nav .menu-item-has-children > .fen-subtoggle{
  position: absolute;
  top: 30px;
  right: .35rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: #fff;                  /* usa currentColor del SVG */
  opacity: .95;
  cursor: pointer;
  z-index: 2;                   /* por si hay fondos/efectos */
}
.fen-subtoggle svg{ transition: transform .2s ease; }

/* Animación de submenú (si no la tenías) */
.fen-overlay-nav .sub-menu{
  margin:0 0 0 0; padding-left:1rem; list-style:none;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .3s ease, opacity .3s ease;
}
.fen-overlay-nav .menu-item.open > .sub-menu{ max-height:1000px; opacity:1; }
.fen-overlay-nav .menu-item.open > .fen-subtoggle svg{ transform: rotate(180deg); }

ul#menu-menu-principal {
    display: flex
;
    flex-direction: column;
    align-items: flex-end;
}

.fen-navbar.scrolled {
 background: linear-gradient(to bottom, rgba(0,48,87,0.9) 0%, rgba(0,48,87,0.4) 95%,rgba(0,48,87,0.1) 100% );
  backdrop-filter: blur(4px);
}

.carousel-control-next-icon, .carousel-control-prev-icon{
  width: 1rem!important;
}

li#menu-item-29385 {
    margin: 10px 0;
}
button.fen-overlay-close {
    position: absolute;
    right: 230px;
    top: 80px;
    width: 40px;
    color: #fff;
}
/* Responsive tweaks */
@media (max-width: 575.98px){
  .fen-overlay-inner{ padding:3rem 1rem; }


  .fen-funds img{
    width: 100%;
    height: 37px;
  }

  .fen-bottom-bar.d-flex.justify-content-between.align-items-center.mt-4 {
    display: inline !important;
}
.fen-funds.d-flex.gap-3.align-items-center {
    margin: 0 0 20px 0;
}
}