/* ============================================================================
   menu-capacitaciones.css — El menú «Capacitaciones» de la cabecera (1.10.42).
   Hoja GLOBAL (la enlaza includes/header.php en todas las páginas). Marcado:
   includes/menu-capacitaciones.php · comportamiento: assets/js/menu-capacitaciones.js.

   Pedido del dueño (05/10), con su referencia menu-06-capacitaciones-abierto:
   panel blanco pegado bajo la barra (colgando de «Capacitaciones»), con las
   esquinas de abajo redondeadas; a la izquierda un riel gris claro con «CATEGORÍAS» y cada
   categoría (nombre, cifra y flecha; la activa en blanco con sombra); a la
   derecha la categoría con sus subcategorías en dos columnas y, debajo de cada
   una, SUS CURSOS; la tarjeta del más vendido y los dos botones. Abajo del riel,
   «Presenciales y en vivo» en AZUL («ahí lo está mostrando el texto en verde,
   pero ponlo en azul»). Medidas tomadas de la referencia (lienzo de 1440 px).
   «Espacio para más categorías. Si pasan de 6, la lista se desplaza» es una
   nota del diseñador: no se escribe; la lista enseña seis y se desplaza.

   LA CABECERA NO CAMBIA (palabras del dueño). Aquí no hay una sola regla que
   toque la barra cerrada: solo el panel, y dos detalles invisibles del <li>
   (que el panel se mida contra la barra entera y el puente para el ratón).
   ========================================================================== */

/* Texto solo para lectores de pantalla («7» se lee «7 cursos»). */
.vc-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* El panel se mide contra la CABECERA (que es position:relative y ocupa todo el ancho), no contra el <li>: así va
   pegado a la barra y centrado en la pantalla, como en la referencia. Cambiar el posicionamiento del <li> no mueve
   nada de la barra (no tiene desplazamientos). */
.site-header .nav-item.nav-item--mega { position: static; }
/* Puente invisible entre el enlace y el panel (los 17 px de barra que quedan debajo del enlace): al bajar el ratón
   no se cruza tierra de nadie. Solo existe con el menú abierto; cerrado no agranda el blanco del enlace. */
.site-header .nav-item--mega > .nav-link { position: relative; }
.site-header .nav-item--mega > .nav-link::after {
  content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 22px; pointer-events: none;
}
.site-header .nav-item--mega.is-open > .nav-link::after { pointer-events: auto; }

/* ---------------------------------- El panel ---------------------------------- */
.vc-menu {
  --vc-rail: 329px;
  --vc-tinta: #0F172A;
  --vc-gris: #64748B;
  --vc-gris-2: #7C879A;   /* las cifras: claras como en la referencia, pero legibles (3,3:1) */
  --vc-linea: #EDF0F5;
  --vc-verde: #16A34A;
  --vc-verde-txt: #15803D;
  position: absolute; top: 100%; left: 0; right: 0; margin-inline: auto;
  width: min(1064px, calc(100vw - 48px)); min-height: 500px;
  max-height: calc(100vh - var(--tope-h, 108px) - 12px); max-height: calc(100dvh - var(--tope-h, 108px) - 12px);
  display: grid; grid-template-columns: var(--vc-rail) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  /* El riel es el fondo de la primera columna (con su filete de 1 px): así el recuadro azul, que en el documento va
     al final, se sienta en el riel sin un contenedor que lo obligue a ir antes en el orden del tabulador. */
  background: linear-gradient(90deg, #F3F6F9 0 calc(var(--vc-rail) - 1px), #E8EDF3 calc(var(--vc-rail) - 1px) var(--vc-rail), #fff var(--vc-rail));
  color: var(--vc-tinta); text-align: left;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 0 0 1px rgba(14, 26, 56, .06), 0 22px 48px rgba(14, 26, 56, .24), 0 6px 14px rgba(14, 26, 56, .08);
  font-family: var(--font-display); font-weight: 500; line-height: 1.35; white-space: normal;
  z-index: var(--z-menu, 1200);
  /* Cerrándose ya no atrapa el ratón: un clic en la página durante el desvanecido llega a la página. */
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
/* Con el guion, el panel cuelga de «Capacitaciones» (menu-capacitaciones.js calcula --vc-izq: el riel empieza 46 px
   antes del enlace, como en la referencia, sin salirse de la pantalla). A 1440 es el mismo sitio que centrado; a 1920
   y 2560 sigue debajo del enlace en vez de flotar en medio de la pantalla. */
.vc-menu.vc-menu--anclado { left: var(--vc-izq, 0px); right: auto; margin-inline: 0; }
/* Abierto: con el guion, por la clase que pone menu-capacitaciones.js (con su retardo de intención). Sin el guion
   (o mientras carga), como siempre: al pasar el ratón o con el foco dentro. */
.nav-item--mega.is-open > .vc-menu,
.nav-item--mega:not(.vc-js):hover > .vc-menu,
.nav-item--mega:not(.vc-js):focus-within > .vc-menu {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .2s var(--ease-entrada, ease-out), transform .22s var(--ease-entrada, ease-out), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .vc-menu, .nav-item--mega.is-open > .vc-menu { transform: none; transition-duration: 0s; }
}
/* Los arreglos de base van con :where() (peso cero): no le pueden ganar a ninguna regla de abajo. */
:where(.vc-menu) :where(a) { color: inherit; text-decoration: none; }
:where(.vc-menu) :where(p) { margin: 0; }
:where(.vc-menu) :where(ul) { list-style: none; margin: 0; padding: 0; }
.vc-menu a:focus-visible { outline: 2px solid var(--vc-verde); outline-offset: 2px; border-radius: 6px; }

/* ----------------------------------- El riel ----------------------------------- */
.vc-menu__rail { grid-column: 1; grid-row: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 19px; }
.vc-menu__eti {
  margin: 0 26px 10px; font-size: 12px; font-weight: 700; line-height: 16px;
  letter-spacing: .1em; text-transform: uppercase; color: #4B5563;
}
/* Seis categorías a la vista; desde la séptima, la lista se desplaza dentro del riel (y la sombra de la activa no se
   recorta: el relleno lateral de la lista es el margen del riel). Va con .vc-menu delante porque base.css quita el
   relleno a toda lista con role="list" y pesa más que una clase sola. */
.vc-menu .vc-menu__cats {
  display: flex; flex-direction: column; gap: 3px;
  padding: 0 12px 8px; max-height: calc(6 * 45px + 5 * 3px + 8px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #C7D0DD transparent;
}
.vc-menu__cats::-webkit-scrollbar { width: 6px; }
.vc-menu__cats::-webkit-scrollbar-thumb { background: #C7D0DD; border-radius: 99px; }
.vc-cat {
  display: flex; align-items: center; gap: 11px; min-height: 45px; padding: 0 15px 0 14px;
  border-radius: 10px; color: var(--vc-tinta);
  transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
.vc-cat__nom { flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.vc-cat__n { flex: none; font-size: 11.5px; font-weight: 700; color: var(--vc-gris-2); }
.vc-cat__fl { flex: none; width: 13px; height: 13px; margin-right: -3px; color: #9AA4B5; stroke-width: 2.4; }
.vc-cat:hover { background: rgba(255, 255, 255, .6); }
.vc-cat.is-on { background: #fff; color: var(--vc-verde-txt); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .07); }
.vc-cat.is-on .vc-cat__fl { color: var(--vc-verde); }
.vc-menu .vc-cat:focus-visible { outline-offset: -2px; }   /* dentro de la caja: la lista se desplaza y recortaría el anillo de fuera */

/* -------------------------- «Presenciales y en vivo» --------------------------
   Azul, como pidió el dueño (la referencia lo traía con el texto en verde). El azul del texto (#1D4ED8) da 4,7:1 sobre
   el fondo celeste, por encima del 4,5 que pide la norma para texto pequeño. */
.vc-pres {
  display: flex; align-items: center; gap: 12px; min-height: 65px; padding: 0 16px 0 13px;
  border-radius: 12px; background: #BDDDF7; border: 1px solid rgba(29, 78, 216, .08); color: #0F172A;
  text-decoration: none; transition: background .15s ease, box-shadow .15s ease;
}
.vc-pres:hover { background: #B1D5F5; box-shadow: 0 4px 14px rgba(29, 78, 216, .14); }
.vc-pres__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #3D75EF; color: #fff; }
.vc-pres__ic svg { width: 20px; height: 20px; }
.vc-pres__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vc-pres__t b { font-family: var(--font-display); font-size: 14px; font-weight: 800; line-height: 1.3; color: #0F172A; }
.vc-pres__t small { font-family: var(--font-display); font-size: 12px; font-weight: 800; line-height: 1.3; color: #1D4ED8; }
.vc-pres__fl { flex: none; width: 15px; height: 15px; color: #5C9BF4; stroke-width: 2.4; transition: transform .15s ease; }
.vc-pres:hover .vc-pres__fl { transform: translateX(2px); }
.vc-pres--menu { grid-column: 1; grid-row: 2; align-self: end; margin: 12px 12px 19px; }

/* ------------------------------- La parte derecha ------------------------------- */
.vc-menu__der {
  grid-column: 2; grid-row: 1 / span 2; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; padding: 22px 28px 23px 30px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #C7D0DD transparent;
}
/* Los paneles de todas las categorías ocupan la MISMA celda: el alto es el del más alto y no salta al pasar de una
   categoría a otra; la tarjeta y los botones quedan siempre en el mismo sitio. Solo se ve (y se puede enfocar) el
   de la categoría activa. */
.vc-menu__panes { flex: 1 1 auto; display: grid; }
.vc-pane { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; visibility: hidden; }
/* «inherit» y no «visible»: un hijo con visible se ve aunque el panel esté oculto, y con el menú cerrado sus enlaces
   quedarían al alcance del tabulador y del lector de pantalla. Así, la activa se ve solo cuando el menú se ve. */
.vc-pane.is-on { visibility: inherit; }

.vc-pane__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 8px; }
.vc-pane__t { min-width: 0; font-size: 20px; line-height: 26px; }
.vc-pane__nom { font-weight: 800; letter-spacing: -.008em; color: var(--vc-tinta); }
.vc-pane__n { margin-left: 6px; font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: var(--vc-gris); white-space: nowrap; }
/* El verde del texto, un punto más oscuro que el de los botones: el #16A34A sobre blanco se queda en 3,3:1. */
.vc-pane__ver { flex: none; font-size: 14px; font-weight: 800; letter-spacing: -.01em; color: var(--vc-verde-txt); white-space: nowrap; }
.vc-pane__ver:hover { color: #166534; text-decoration: underline; text-underline-offset: 3px; }

/* Subcategorías en dos columnas, cada una con sus cursos debajo y su filete. */
.vc-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-content: start; margin-bottom: 18px; }
.vc-grupo { min-width: 0; padding: 0 0 12px; border-bottom: 1px solid var(--vc-linea); }
.vc-grupo__cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 17px 0 6px; font-size: 15px; font-weight: 500; line-height: 20px; color: #293142;
}
.vc-grupo__nom { min-width: 0; }
.vc-grupo__n { flex: none; font-size: 13px; font-weight: 500; color: var(--vc-gris-2); }
a.vc-grupo__cab:hover .vc-grupo__nom { color: var(--vc-verde-txt); }
.vc-grupo__cursos { display: flex; flex-direction: column; gap: 1px; }
.vc-grupo__cursos a {
  display: block; padding: 3px 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: #57667D;
  transition: color .12s ease;
}
.vc-grupo__cursos a:hover { color: var(--vc-verde-txt); }
.vc-menu .vc-mas { font-weight: 700; color: #3E4C61; }
.vc-menu .vc-mas:hover { color: var(--vc-verde-txt); }

/* Una categoría SIN subcategorías: sus cursos son las filas (nombre y duración), como las de la referencia. */
.vc-filas li { min-width: 0; }
.vc-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 17px 0 12px; border-bottom: 1px solid var(--vc-linea);
  font-size: 15px; font-weight: 500; line-height: 20px; color: #293142;
}
.vc-fila__nom { min-width: 0; }
.vc-fila__dato { flex: none; font-size: 13px; color: var(--vc-gris); }
.vc-fila:hover .vc-fila__nom { color: var(--vc-verde-txt); }

/* La tarjeta del más vendido (el de más alumnos de la categoría), siempre abajo. */
.vc-top {
  margin-top: auto; display: flex; align-items: center; gap: 20px; min-height: 93px; padding: 11px 16px 11px 11px;
  border: 1px solid #EBEEF3; border-radius: 12px; background: #FAFBFD;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vc-top:hover { border-color: #DCE2EA; box-shadow: 0 6px 18px rgba(15, 23, 42, .07); }
.vc-top__img { flex: none; width: 114px; height: 69px; border-radius: 8px; overflow: hidden; background: #E3E8EF; }
.vc-top__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vc-top__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vc-top__eti { font-size: 11.5px; font-weight: 800; line-height: 16px; letter-spacing: .055em; text-transform: uppercase; color: #B45309; }
.vc-top__tit { margin-top: 2px; font-size: 15.5px; font-weight: 600; line-height: 20px; letter-spacing: -.01em; color: var(--vc-tinta); }
.vc-top:hover .vc-top__tit { color: var(--vc-verde-txt); }
.vc-top__meta { margin-top: 2px; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--vc-gris); }
.vc-top__precio { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-size: 18px; font-weight: 800; line-height: 1.2; color: var(--vc-tinta); }
.vc-top__precio s { font-size: 12px; font-weight: 600; color: #94A3B8; }

/* Los dos botones, bajo un filete muy suave (son de todas las categorías). */
.vc-menu__acc { flex: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; padding-top: 16px; border-top: 1px solid #F1F4F8; }
.vc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-height: 44px; padding: 0 18px;
  border-radius: 10px; font-size: 14px; font-weight: 800; line-height: 1.2; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.vc-menu .vc-btn--verde { background: var(--vc-verde); color: #fff; box-shadow: 0 1px 2px rgba(22, 163, 74, .25); }
.vc-menu .vc-btn--verde:hover { background: #12873D; box-shadow: 0 6px 16px rgba(22, 163, 74, .28); }
.vc-btn--borde { padding: 0 16px; background: #fff; border: 1px solid #DFE4EC; color: var(--vc-tinta); }
.vc-btn--borde:hover { border-color: #C9D2DE; background: #F8FAFC; }

/* ============================================================================
   EL CAJÓN DEL TELÉFONO (menú hamburguesa): lo mismo, en acordeón.
   Va sobre el azul del cajón; filas de 44 px como el resto del cajón (nada que
   haya que tocar con la punta del dedo).
   ========================================================================== */
.vc-mov {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 10px 22px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .12);
}
:where(.vc-mov) :where(ul) { list-style: none; margin: 0; padding: 0; }
:where(.vc-mov) :where(a) { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.vc-mov__todos, .vc-mov__puesto, .vc-mov__cat-s {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px 0 12px; border-radius: 10px;
  font-size: .95rem; line-height: 1.25; cursor: pointer;
}
.vc-mov__todos > span, .vc-mov__puesto > span, .vc-mov__cat-s > span { flex: 1 1 auto; min-width: 0; }
.vc-mov__todos { font-weight: 700; color: #fff; }
.vc-mov__puesto { font-weight: 600; color: #E6EDF7; margin-top: 2px; }
.vc-mov__fl { flex: none; width: 16px; height: 16px; color: #8FA3C4; }
.vc-mov__todos:hover, .vc-mov__puesto:hover, .vc-mov__cat-s:hover { background: rgba(255, 255, 255, .06); }
.vc-mov__cats { display: flex; flex-direction: column; gap: 2px; }
.vc-mov__cat-s { list-style: none; font-weight: 600; color: #DCE4F1; user-select: none; -webkit-tap-highlight-color: transparent; }
.vc-mov__cat-s::-webkit-details-marker { display: none; }
.vc-mov__chev { flex: none; width: 17px; height: 17px; color: #8FA3C4; transition: transform .22s var(--ease-suave, ease); }
.vc-mov__cat[open] > .vc-mov__cat-s { color: #fff; }
.vc-mov__cat[open] > .vc-mov__cat-s .vc-mov__chev { transform: rotate(180deg); }
.vc-mov__cat[open] > .vc-mov__cuerpo { animation: vcMovAbre .2s var(--ease-entrada, ease-out) both; }
@keyframes vcMovAbre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vc-mov__cat[open] > .vc-mov__cuerpo { animation: none; } }
.vc-mov__cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 10px 12px; }
.vc-mov__grupo { display: flex; flex-direction: column; }
.vc-mov__sub {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; margin: 0; padding: 0 10px 0 0;
  font-size: .8rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3; color: #9FB2D0;
}
.vc-mov__sub i { flex: none; font-style: normal; font-weight: 700; color: #8FA3C4; }
a.vc-mov__sub:hover { color: #fff; }
.vc-mov__cursos a {
  display: flex; align-items: center; gap: .35em; min-height: 44px; padding: 6px 10px 6px 12px; border-radius: 10px;
  font-size: .93rem; font-weight: 500; line-height: 1.3; color: #C9D5E8;
}
.vc-mov__cursos a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.vc-mov .vc-mas { font-weight: 700; color: #E6EDF7; }
.vc-mov__ver { display: flex; align-items: center; gap: .35em; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: .92rem; font-weight: 700; color: #6EE7A8; }
.vc-mov__ver:hover { background: rgba(110, 231, 168, .08); color: #8FF3BF; }
.vc-pres--mov { margin: 8px 0 4px; }
.vc-mov a:focus-visible, .vc-mov summary:focus-visible { outline: 2px solid #6EE7A8; outline-offset: -2px; }
.vc-mov .vc-pres:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }