/* ═══════════════════════════════════════════════════════════════════
   MEGA-MENÚ "Funciones" — dropdown por columnas (estilo Harbiz)
   Desktop: hover/focus abre panel con columnas.
   Mobile: se integra al menú desplegable existente (.mob-p) como lista.
   ═══════════════════════════════════════════════════════════════════ */

/* Wrapper del ítem "Funciones" en la navbar desktop */
.hdr-nav .has-mega{ position:static; }        /* el panel se ancla al header, no al link */
/* El trigger debe verse EXACTAMENTE como los demás links de la navbar */
.mega-trigger{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  padding:8px 14px;
  font-size:14px;
  font-weight:600;
  color:var(--t2);
  font-family:inherit;
  border-radius:999px;
  transition:color .25s ease;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.mega-trigger:hover{ color:var(--cd); }
.has-mega.open .mega-trigger{ color:var(--cd); }
.mega-trigger .mega-caret{
  width:14px; height:14px; transition:transform .25s ease; flex:0 0 auto; margin-top:1px;
}
.has-mega.open .mega-trigger .mega-caret{ transform:rotate(180deg); }

/* Panel del mega-menú — ancho de la navbar, alineado a sus bordes */
.mega-panel{
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  right:0;
  transform:translateY(-8px);
  width:auto;
  background:#fff;
  border:1px solid var(--bd, #dfe6ed);
  border-radius:18px;
  box-shadow:0 24px 64px rgba(15,23,42,.16), 0 4px 12px rgba(15,23,42,.06);
  padding:26px 30px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1), visibility .22s;
  z-index:1200;
}
.has-mega.open .mega-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

/* Grid: 2 columnas anchas + 1 franja que apila 2 bloques */
.mega-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px 26px;
}
.mega-col-stack{ display:flex; flex-direction:column; gap:20px; }

/* Título de cada columna */
.mega-cat-title{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--c, #00b9e6);
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--bd, #dfe6ed);
}

/* Ítems */
.mega-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.mega-list a{
  display:flex; align-items:center; gap:11px;
  padding:9px 10px;
  border-radius:11px;
  color:var(--t, #0c1222);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:background .16s ease, color .16s ease;
}
.mega-list a:hover{ background:var(--cl, #e8f9fe); color:var(--cd, #0091b8); }
.mega-list a::after{ display:none; }  /* anula el underline animado de .hdr-nav a */

.mega-ic{
  flex:0 0 auto; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px;
  background:var(--sf, #f5f8fb);
  color:var(--cd, #0091b8);
  transition:background .16s ease, color .16s ease;
}
.mega-list a:hover .mega-ic{ background:#fff; color:var(--c, #00b9e6); }
.mega-ic svg{ width:18px; height:18px; }

.mega-it-txt{ display:flex; flex-direction:column; line-height:1.25; }
.mega-it-name{ font-size:14px; font-weight:650; }
.mega-it-desc{ font-size:11.5px; font-weight:500; color:var(--t2, #64748b); }

/* Puente invisible para que el hover no se corte entre el link y el panel */
.has-mega::after{
  content:'';
  position:absolute;
  top:100%; left:0; right:0; height:14px;
  display:none;
}
.has-mega:hover::after{ display:block; }

/* ── Mobile: dentro del menú desplegable existente ── */
/* Fix scroll: el panel puede tener muchos ítems (acordeón Funciones) → scroll interno */
@media(max-width:860px){
  .mob-p{
    max-height:calc(100vh - 84px);
    max-height:calc(100dvh - 84px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  /* Cuando el menú móvil está abierto, bloquear el scroll del fondo */
  body.mobmenu-open{ overflow:hidden; }
}
.mob-mega{ display:flex; flex-direction:column; }
.mob-mega-cat{
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c, #00b9e6); margin:12px 0 4px; padding:0 2px;
}
.mob-mega a{
  padding:8px 10px !important; font-size:14px; border-radius:9px;
  display:flex; align-items:center; gap:9px;
}
.mob-mega a:hover{ background:var(--cl, #e8f9fe); }
.mob-mega .mega-ic{ width:28px; height:28px; }
.mob-mega .mega-ic svg{ width:15px; height:15px; }

/* El detalle <details> del sub-acordeón de Funciones en mobile */
.mob-fn{ border:none; }
.mob-fn > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; font-size:14.5px; font-weight:500; color:var(--t,#0c1222);
  border-radius:10px;
}
.mob-fn > summary::-webkit-details-marker{ display:none; }
.mob-fn > summary .mega-caret{ width:15px; height:15px; transition:transform .2s; }
.mob-fn[open] > summary .mega-caret{ transform:rotate(180deg); }

@media(max-width:980px){
  .mega-grid{ gap:12px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Franja blanca bajo el footer: la landing reserva padding-bottom:72px
   en el body para su sticky bar. Las páginas hijas (planes, ecosistema,
   funciones) NO tienen sticky bar, así que ese espacio queda como una
   franja blanca colgando. Lo anulamos solo en esas páginas.
   (index.html conserva su padding porque sí tiene sticky bar.)
   ═══════════════════════════════════════════════════════════════════ */
body.fn-page,
body.planes-page,
body.ecosistema-page{ padding-bottom:0; }