/* ==========================================================================
   FT · DESPLEGABLE DE «INTEGRACIONES Y AUTOMATIZACIÓN»            13-09-2026
   Victor: en ese punto del menú no salían los servicios que hay detrás.
   Los cinco viven en soluciones.html con su ancla; aquí se asoman.
   Sin dependencias, con teclado, y en móvil se despliega en línea (no flota).
   ========================================================================== */
.ft-navitem { position: relative; display: inline-flex; align-items: center; }
.ft-navitem > .nav-link { padding-right: 4px; }

.ft-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: -2px; padding: 0;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  color: currentColor; opacity: .75;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s, background .18s;
}
.ft-caret:hover { opacity: 1; background: rgba(11,15,26,.06); }
.ft-caret:focus-visible { outline: 3px solid #6B3FA0; outline-offset: 2px; opacity: 1; }
.ft-navitem.is-open > .ft-caret { transform: rotate(180deg); opacity: 1; }

.ft-submenu {
  position: absolute; top: calc(100% + 10px); left: -14px; z-index: 1200;
  min-width: 290px; margin: 0; padding: 8px;
  list-style: none;
  background: #fff; border: 1px solid rgba(11,15,26,.10); border-radius: 14px;
  box-shadow: 0 18px 46px -22px rgba(11,15,26,.30);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.ft-navitem.is-open > .ft-submenu,
.ft-navitem:hover > .ft-submenu,
.ft-navitem:focus-within > .ft-submenu { opacity: 1; visibility: visible; transform: none; }

/* Puente invisible: sin él, el ratón cruza el hueco y el panel se cierra. */
.ft-submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

.ft-sub-link {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 14.5px; line-height: 1.35; font-weight: 600;
  color: #0B0F1A; text-decoration: none; white-space: nowrap;
}
.ft-sub-link:hover, .ft-sub-link:focus-visible { background: #F2F4F8; color: #6B3FA0; }
.ft-sub-link:focus-visible { outline: 3px solid #6B3FA0; outline-offset: -1px; }
.ft-sub-todos {
  margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(11,15,26,.10);
  font-weight: 700; color: #6B3FA0;
}

/* --- Móvil: el menú ya es una columna, así que el panel va en línea --- */
@media (max-width: 1120px) {
  .ft-navitem { display: block; width: 100%; }
  .ft-navitem > .nav-link { display: inline-block; }
  .ft-caret { position: absolute; right: 8px; top: 6px; width: 34px; height: 34px; }
  .ft-submenu {
    position: static; min-width: 0; margin: 2px 0 6px 12px; padding: 4px 0 4px 10px;
    border: 0; border-left: 2px solid rgba(107,63,160,.28); border-radius: 0;
    box-shadow: none; transform: none;
    display: none; opacity: 1; visibility: visible;
  }
  .ft-navitem.is-open > .ft-submenu { display: block; }
  .ft-navitem:hover > .ft-submenu, .ft-navitem:focus-within > .ft-submenu { display: none; }
  .ft-navitem.is-open:hover > .ft-submenu, .ft-navitem.is-open:focus-within > .ft-submenu { display: block; }
  .ft-sub-link { white-space: normal; padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-caret, .ft-submenu { transition: none; }
}