/**
 * Megamenú Fondecom — NOVA
 *
 * Todo lo que se puede personalizar pasa por variables CSS declaradas en
 * .fdc-mm-wrap. El widget de Elementor sobrescribe esas variables en el
 * mismo contenedor: como las variables se heredan hacia los hijos, el
 * valor nuevo se aplica sin depender de la especificidad ni del orden
 * en que se carguen las hojas de estilo.
 */

.fdc-mm-wrap{
  /* Paleta.
     Traía valores propios parecidos pero distintos a los de Fondecom
     (#3B67A1 en vez de #185CB5, amarillo en vez de naranja). Ahora toma
     los tokens del sitio si existen, y si no cae en los de la marca. */
  --fdc-primario:var(--azul,#185CB5);
  --fdc-primario-d:var(--azul-d,#0D3974);
  --fdc-acento:var(--nar,#F59408);
  --fdc-cta:var(--ver,#32B12E);
  --fdc-txt:var(--ink,#111111);
  --fdc-txt-2:var(--txt,#4A4A4A);
  --fdc-ink:var(--ink,#111111);
  --fdc-linea:var(--ln,#D6DEE8);
  --fdc-superficie:var(--azul-l,#E8F0FB);
  --fdc-panel:#FFFFFF;

  /* Menú principal */
  --fdc-link-color:var(--fdc-txt);
  --fdc-link-bg:transparent;
  --fdc-link-color-hover:var(--fdc-primario);
  --fdc-link-bg-hover:var(--fdc-superficie);
  --fdc-link-pad-y:12px;
  --fdc-link-pad-x:14px;
  --fdc-link-radio:8px;
  --fdc-gap:2px;

  /* Panel desplegable */
  --fdc-panel-bg:var(--fdc-panel);
  --fdc-panel-radio:12px;
  --fdc-panel-pad:10px;
  --fdc-panel-ancho:min(760px,92vw);
  --fdc-sombra:0 15px 40px rgba(22,32,43,.15);

  /* Enlaces del panel */
  --fdc-label-color:var(--fdc-ink);
  --fdc-desc-color:var(--fdc-txt-2);
  --fdc-sub-bg-hover:var(--fdc-superficie);

  /* Iconos */
  --fdc-ico-color:var(--fdc-primario);
  --fdc-ico-bg:var(--fdc-superficie);
  /* naranja bajo un trazo azul no llega a AA: se queda en azul claro */
  --fdc-ico-bg-hover:var(--azul-l,#E8F0FB);
  --fdc-ico-size:40px;

  /* Botón móvil */
  --fdc-burger-color:var(--fdc-ink);
  --fdc-burger-bg:var(--fdc-superficie);
  --fdc-burger-barras:var(--fdc-primario);
  --fdc-movil-bg:var(--fdc-panel);

  --fdc-tap:48px;

  position:relative;
  display:flex;
  align-items:center;
  font-family:inherit;
}

/* ── Lista principal ── */
.fdc-mm{flex:1}
.fdc-mm__list{
  display:flex;
  align-items:center;
  gap:var(--fdc-gap);
  margin:0;
  padding:0;
  list-style:none;
}
.fdc-mm__item{position:relative;list-style:none;margin:0}

.fdc-mm__link{
  display:flex;
  align-items:center;
  gap:7px;
  padding:var(--fdc-link-pad-y) var(--fdc-link-pad-x);
  border-radius:var(--fdc-link-radio);
  /* !important porque muchos temas fuerzan color y subrayado en los <a>.
     El valor sigue saliendo de la variable, así que Elementor lo controla. */
  color:var(--fdc-link-color) !important;
  background:var(--fdc-link-bg) !important;
  font-weight:600;
  font-size:15px;
  line-height:1.3;
  text-decoration:none !important;
  white-space:nowrap;
  transition:color .18s ease,background-color .18s ease;
}
.fdc-mm__item--n0 > .fdc-mm__link{min-height:var(--fdc-tap)}

.fdc-mm__link:hover,
.fdc-mm__link:focus-visible,
.fdc-mm__item.is-current > .fdc-mm__link,
.fdc-mm__item--n0:hover > .fdc-mm__link,
.fdc-mm__item--n0:focus-within > .fdc-mm__link{
  color:var(--fdc-link-color-hover) !important;
  background:var(--fdc-link-bg-hover) !important;
}

/* Foco visible reforzado (accesibilidad) */
.fdc-mm-wrap :focus-visible{
  outline:4px solid var(--fdc-primario);
  outline-offset:2px;
  border-radius:8px;
}

.fdc-mm__caret{
  width:14px;height:14px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s ease;
}
.fdc-mm__item--n0:hover > .fdc-mm__link .fdc-mm__caret,
.fdc-mm__item--n0.is-open > .fdc-mm__link .fdc-mm__caret{transform:rotate(180deg)}

/* Reset de botones: los temas y Elementor los estilizan con alta
   especificidad y deformarían los controles del menú. */
.fdc-mm-wrap button.fdc-mm__abrir,
.fdc-mm-wrap button.fdc-mm__toggle{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:0 !important;
  margin:0;
  font:inherit;
  line-height:1.3 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-decoration:none !important;
  cursor:pointer;
  box-shadow:none !important;
  min-width:0 !important;
}

/* Botón de apertura (solo se usa en móvil) */
.fdc-mm-wrap button.fdc-mm__abrir{
  display:none;
  width:var(--fdc-tap) !important;
  height:var(--fdc-tap) !important;
  padding:0 !important;
  align-items:center;justify-content:center;
  background:none !important;
  color:var(--fdc-link-color);
  border-radius:8px !important;
}
.fdc-mm__abrir svg{
  width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;
}
.fdc-mm__item.is-open > .fdc-mm__abrir svg{transform:rotate(180deg)}

/* ── Panel del megamenú ── */
.fdc-mm__panel{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:var(--fdc-panel-ancho);
  background:var(--fdc-panel-bg) !important;
  border:1px solid var(--fdc-linea);
  border-radius:var(--fdc-panel-radio);
  box-shadow:var(--fdc-sombra);
  padding:var(--fdc-panel-pad);
  z-index:100;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.fdc-mm__item--mega:hover > .fdc-mm__panel,
.fdc-mm__item--mega:focus-within > .fdc-mm__panel,
.fdc-mm__item--mega.is-open > .fdc-mm__panel{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.fdc-mm__cols{
  display:grid;
  gap:4px;
  margin:0;padding:0;list-style:none;
}
.fdc-mm__cols--1{grid-template-columns:1fr}
.fdc-mm__cols--2{grid-template-columns:repeat(2,1fr)}
.fdc-mm__cols--3{grid-template-columns:repeat(3,1fr)}
.fdc-mm__cols--4{grid-template-columns:repeat(4,1fr)}

/* Enlaces dentro del panel */
.fdc-mm__panel .fdc-mm__link,
.fdc-mm__dropdown .fdc-mm__link{
  align-items:flex-start;
  gap:12px;
  padding:14px;
  min-height:var(--fdc-tap);
  white-space:normal;
  font-weight:600;
  background:transparent !important;
}
.fdc-mm__panel .fdc-mm__link:hover,
.fdc-mm__panel .fdc-mm__link:focus-visible,
.fdc-mm__dropdown .fdc-mm__link:hover,
.fdc-mm__dropdown .fdc-mm__link:focus-visible{
  background:var(--fdc-sub-bg-hover) !important;
}

.fdc-mm__ico-wrap{
  flex-shrink:0;
  width:var(--fdc-ico-size);
  height:var(--fdc-ico-size);
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--fdc-ico-bg) !important;
  transition:background-color .18s ease;
}
.fdc-mm__link:hover .fdc-mm__ico-wrap{background:var(--fdc-ico-bg-hover) !important}
.fdc-mm__ico{
  width:20px;height:20px;
  stroke:var(--fdc-ico-color) !important;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

.fdc-mm__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.fdc-mm__label{
  display:flex;align-items:center;gap:6px;
  color:var(--fdc-label-color) !important;
  font-size:15px;line-height:1.35;
}
.fdc-mm__label .fdc-mm__ico{width:12px;height:12px;stroke-width:2.2;opacity:.55}
.fdc-mm__desc{
  font-weight:400;
  font-size:13.5px;
  line-height:1.5;
  color:var(--fdc-desc-color) !important;
}

/* Enlace resaltado */
.fdc-mm__item.is-destacado > .fdc-mm__link{
  background:var(--fdc-superficie);
  box-shadow:inset 3px 0 0 var(--fdc-cta);
}

/* Submenú simple (ítem con hijos sin megamenú activo) */
.fdc-mm__dropdown{
  position:absolute;top:calc(100% + 6px);left:0;
  min-width:250px;
  background:var(--fdc-panel-bg);
  border:1px solid var(--fdc-linea);
  border-radius:var(--fdc-panel-radio);
  box-shadow:var(--fdc-sombra);
  padding:var(--fdc-panel-pad);margin:0;list-style:none;
  z-index:100;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.fdc-mm__item--n0:hover > .fdc-mm__dropdown,
.fdc-mm__item--n0:focus-within > .fdc-mm__dropdown,
.fdc-mm__item--n0.is-open > .fdc-mm__dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}

/* Cerrado a propósito (1.5.3). En escritorio el panel lo abre el CSS con
   :hover y :focus-within, así que Escape no tenía nada que cerrar: el foco
   volvía al enlace padre, que sigue dentro del ítem, y el panel seguía
   encima del contenido. El JS pone .is-cerrado al pulsar Escape o al elegir
   una sección de la misma página, y la quita cuando el ratón y el foco
   salen del ítem. Cuatro clases: gana a las de arriba y a las del puente. */
.fdc-mm-wrap .fdc-mm__item--n0.is-cerrado > .fdc-mm__dropdown,
.fdc-mm-wrap .fdc-mm__item--mega.is-cerrado > .fdc-mm__panel{
  opacity:0;visibility:hidden;
}
.fdc-mm-wrap .fdc-mm__item--n0.is-cerrado > .fdc-mm__link .fdc-mm__caret{transform:none}

/* ── Botón hamburguesa ── */
.fdc-mm-wrap button.fdc-mm__toggle{
  display:none;
  align-items:center;gap:9px;
  min-height:var(--fdc-tap);
  height:auto;
  padding:0 16px !important;
  margin-left:auto;
  background:var(--fdc-burger-bg) !important;
  border-radius:8px !important;
  color:var(--fdc-burger-color) !important;
  font-weight:700;font-size:15px;
}
.fdc-mm__toggle-bars{position:relative;width:20px;height:2px;display:block}
.fdc-mm__toggle-bars span,
.fdc-mm__toggle-bars::before,
.fdc-mm__toggle-bars::after{
  content:"";position:absolute;left:0;
  width:20px;height:2px;border-radius:2px;
  background:var(--fdc-burger-barras);
  transition:transform .2s ease,opacity .2s ease;
}
.fdc-mm__toggle-bars::before{top:-6px}
.fdc-mm__toggle-bars::after{top:6px}
.fdc-mm__toggle[aria-expanded="true"] .fdc-mm__toggle-bars span{opacity:0}
.fdc-mm__toggle[aria-expanded="true"] .fdc-mm__toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.fdc-mm__toggle[aria-expanded="true"] .fdc-mm__toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}

.fdc-mm-aviso{
  padding:10px 14px;border-radius:8px;
  background:#FFF8E1;border:1px solid var(--fdc-acento);
  color:#6b4f0a;font-size:14px;
}

.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── Móvil: el panel se vuelve acordeón ──
   1180px es el valor por defecto desde la 1.5.3 (antes 1080). Con seis
   entradas de primer nivel, logotipo y botón, el menú apretado a 13 px no
   cabe por debajo de unos 1.140 px de ventana: entre 1081 y 1180 la última
   entrada quedaba debajo del botón «Asóciate». Desde el widget de Elementor
   se puede cambiar; ese caso genera sus propias reglas que revierten este
   bloque por encima del valor elegido, y el JS lee el mismo número de
   data-fdc-bp. ── */
@media (max-width:1180px){
  .fdc-mm-wrap button.fdc-mm__toggle{display:inline-flex}

  .fdc-mm{
    position:absolute;top:100%;left:0;right:0;
    background:var(--fdc-movil-bg);
    border-top:1px solid var(--fdc-linea);
    box-shadow:var(--fdc-sombra);
    /* --fdc-mm-libre lo pone el JS con el alto que queda bajo la cabecera
       (1.5.3): con la cabecera fija el panel ya no se sale por abajo. */
    max-height:min(78vh,640px,var(--fdc-mm-libre,100vh));
    overflow-y:auto;
    z-index:95;
  }
  .fdc-mm:not(.is-open){display:none}

  .fdc-mm__list{flex-direction:column;align-items:stretch;gap:0;padding:8px}
  .fdc-mm__item--n0{border-bottom:1px solid var(--fdc-superficie)}
  .fdc-mm__item--n0:last-child{border-bottom:0}

  .fdc-mm__item--has-children{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .fdc-mm-wrap button.fdc-mm__abrir{display:flex}
  .fdc-mm__caret{display:none}

  /* El panel deja de flotar: se despliega en el flujo */
  .fdc-mm__panel,
  .fdc-mm__dropdown{
    position:static;
    grid-column:1/-1;
    transform:none;
    min-width:0;
    border:0;border-radius:0;
    box-shadow:none;
    padding:0 0 10px 12px;
    opacity:1;visibility:visible;
    display:none;
  }
  .fdc-mm__item.is-open > .fdc-mm__panel,
  .fdc-mm__item.is-open > .fdc-mm__dropdown{display:block}

  /* En móvil no hay hover: solo abre con el botón */
  .fdc-mm__item--mega:hover > .fdc-mm__panel,
  .fdc-mm__item--mega:focus-within > .fdc-mm__panel,
  .fdc-mm__item--n0:hover > .fdc-mm__dropdown,
  .fdc-mm__item--n0:focus-within > .fdc-mm__dropdown{display:none}
  .fdc-mm__item.is-open > .fdc-mm__panel,
  .fdc-mm__item.is-open > .fdc-mm__dropdown{display:block}

  .fdc-mm__cols{grid-template-columns:1fr}
  .fdc-mm__panel .fdc-mm__link{padding:12px 10px}
}

@media (prefers-reduced-motion:reduce){
  .fdc-mm-wrap *,
  .fdc-mm-wrap *::before,
  .fdc-mm-wrap *::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
  }
}