/* ===========================
   MEGA MENU (desktop ≥ 992px)
   =========================== */
@media (min-width: 992px) {
  .main-nav .menu-list { display:flex; gap:28px; }
  .main-nav .menu-list > li { position: static; } /* clave para fullwidth */
  .main-nav .menu-link { color:#fff; text-decoration:none; padding:16px 6px; display:inline-block;  font-size: 14px; font-weight: 400; transition: .3s;}
  a.menu-link.menu-link-level-1:hover {
    opacity: .8;
  }

  /* Panel */
  .mega{
    position:absolute;
    left:0; right:0; top:85%;
    background: #061C2C; /* fondo del panel */
    padding: 36px;
    box-shadow: 0 16px 40px rgba(0,0,0,.25);
    opacity:0; visibility:hidden; transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 50;
  }
  .has-mega:hover > .mega,
  .has-mega:focus-within > .mega{
    opacity:1; visibility:visible; transform:none; transition-delay:0s;
  }
  .mega__inner{
    display:grid; grid-template-columns: 1fr 1fr;
    gap:36px; align-items:stretch;
  }

  /* Columna menú */
  .mega__col--menu .mega__menu{ list-style:none; margin:0; padding:0; columns:2; column-gap:40px; }
  .mega__col--menu .mega__menu > li{ break-inside:avoid; margin:0 0 10px; }
  .mega__col--menu .mega__menu a{
    color:#fff; display:inline-block; padding:6px 0;
    font-weight:600; transition: transform .2s ease;
  }
.mega__col--menu .mega__menu a:hover {
    transform: translate(10px, 0px);
}

  /* Columna insight */
  .mega__col--insight{ display:flex; flex-direction:column; gap:16px; }
  .mega-insight__thumb { display:block; overflow:hidden; }
  .mega-insight__thumb img{ width:100%; height:190px; object-fit:cover; display:block; }
  .mega-insight__thumb--ph{ height:190px; background:linear-gradient(135deg,#16365f,#0b2141);}
  .mega-insight__title{ margin:8px 0 6px; font-size:18px; font-weight:700; }
  .mega-insight__title a {
  display: inline-block;
  color: #fff;
  transition: transform .2s ease, color .2s ease; /* incluye color para no ser pisada */
}
.mega-insight__title a:hover {
  transform: translateX(10px);
}

  .btn.btn-borde{
    border:1px solid rgba(255,255,255,.5);
    color:#fff; background:transparent; padding:10px 16px; 
    display:inline-block; text-decoration:none;
  }
}
/* ============================================================
   MEGAMENU — Diseño profesional y responsivo (desktop)
   ============================================================ */
.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  background: #01224D;
  color: #fff;
  padding: 60px 80px;
  display: none;
  z-index: 99;
  border-top: 2px solid #0A66C2;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.menu-item-has-children:hover > .mega-dropdown {
  display: block;
  animation: fadeSlide .25s ease forwards;
}

/* === Estructura general === */
.mega-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
}

/* === Columna izquierda (links) === */
.mega__col.mega__col--menu {
    border-right: 1px solid #fff;
}
/* === Columna derecha (insight destacado) === */
.mega-insight {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 36px;
  position: relative;
}

.mega-insight img {
  width: 260px;
  height: 160px;
  object-fit: cover;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.mega-insight img:hover {
  transform: scale(1.03);
}

.mega-insight-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.mega-insight h4 a {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.mega-insight p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* === Botón "Ver todos los insights" === */
.mega-insight .btn-borde {
    display: inline-block;
    border: 1px solid #ffffff;
    color: #fff;
    text-decoration: none;
    padding: 8px 20px;
    font-size: 14px;
    transition: all 0.25s ease;
    position: absolute;
    bottom: 0;
    right: 0;
}
.mega-insight .btn-borde:hover {
  background: #fff;
  color: #01224D;
}

/* === Animación suave === */
@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Responsivo: ocultar en mobile === */
@media (max-width: 992px) {
  .mega-dropdown {
    display: none !important;
  }
}


/* ⚠️ Si quedó algún bloque viejo con .mega-dropdown en el HTML, lo ocultamos
   para que NO interfiera con el layout basado en .mega/.mega__*. */
.mega-dropdown{ display:none !important; }

/* ===============================
   MENÚ MÓVIL – Submenús colapsables (≤ 991px)
   =============================== */
@media (max-width: 991px) {
  /* Ocultar megamenú de desktop en móvil */
  .has-mega > .mega{ display:none !important; }

  /* Lista base */
  .mobile-menu-list{ list-style:none; margin:0; padding:0; }
  .mobile-menu-list > li{
    position:relative;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .mobile-menu-list a{
    color:#fff; text-decoration:none; display:block;
    padding:14px 24px; font-weight:600;
  }
  .mobile-menu-list li.open > a{ background:rgba(255,255,255,.05); }

  /* Botón toggle (+/–) */
  .submenu-toggle{
    position:absolute; right:20px; top:25px;
    transform:translateY(-50%);
    background:none; border:0; color:#fff; cursor:pointer;
    padding: 1px 3px 6px 3px; width:auto; height:auto;
    font-size:0; /* ocultamos texto accesible del botón */
    line-height:1; opacity:.8; z-index:2;
    border-radius: 5px;
  }
  .submenu-toggle:hover {
    opacity: 1;
    padding: 1px 3px 6px 3px;
    
}
  .submenu-toggle::before{
    content:"+"; display:inline-block; width:18px; text-align:center;
    font-size:22px; font-weight:700;
  }
  .mobile-menu li.open > .submenu-toggle::before{ content:"–"; }

  /* Submenú */
  .mobile-menu .sub-menu{
    list-style:none; margin:0; padding:0 0 0 16px;
    border-left:1px solid rgba(255,255,255,.15);
    display:none; opacity:0; max-height:0; overflow:hidden;
    transition:opacity .25s ease,max-height .25s ease;
  }
  .mobile-menu li.open > .sub-menu{
    display:block; opacity:1; max-height:1000px; padding-top:8px; padding-bottom:8px;
  }
  .mobile-menu .sub-menu a{ padding:12px 24px 12px 14px; font-weight:500; }
}