/* /formacion-empresas — «Formación para empresas» (módulo B2B).
   Tokens de styles.css (--ink, --line, --bg-card, --navy, --radius, …). */

/* ── Dos formas de contratar: pack vs. pay-as-you-go ── */
.fe-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.fe-models__card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 4px;
}
.fe-models__icon { font-size: 30px; margin-bottom: 4px; }
.fe-models__title { font-size: 19px; font-weight: 800; margin: 0; color: var(--ink); }
.fe-models__tagline { font-size: 14.5px; color: var(--ink-3); margin: 0 0 12px; }
.fe-models__list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.fe-models__list li { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.fe-models__best { margin: 14px 0 0; padding-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--navy); border-top: 1px dashed var(--line); }

/* ── Flujo: de la solicitud a la factura ── */
.fe-flow { display: flex; flex-direction: column; max-width: 920px; margin: 0 auto; }
.fe-flow__step { display: flex; gap: 16px; position: relative; }
.fe-flow__num-col { display: flex; flex-direction: column; align-items: center; flex: none; }
.fe-flow__num {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--bg-card); border: 2px solid var(--navy-2);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  position: relative; z-index: 1;
}
.fe-flow__stem { flex: 1; width: 2px; min-height: 20px; background: var(--line); margin: 4px 0; }
.fe-flow__step:last-child .fe-flow__stem { display: none; }
.fe-flow__text { flex: 1; padding-bottom: 22px; }
.fe-flow__step:last-child .fe-flow__text { padding-bottom: 0; }
.fe-flow__title { font-weight: 700; font-size: 16.5px; margin: 6px 0 4px; }
.fe-flow__desc { font-size: 15px; color: var(--ink-3); line-height: 1.55; margin: 0; }

@media (min-width: 820px) {
  .fe-flow { flex-direction: row; align-items: flex-start; }
  .fe-flow__step { flex: 1; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
  .fe-flow__num-col { flex-direction: row; }
  .fe-flow__stem { display: none; }
  .fe-flow__step:not(:last-child)::after {
    content: ""; position: absolute; top: 21px; left: 50%; width: 100%; height: 2px;
    background: var(--line); z-index: 0;
  }
  .fe-flow__num { margin: 0 auto 14px; }
  .fe-flow__text { padding-bottom: 0; }
}

/* ── Catálogo «Cursos LMS» — recuadros compactos por categoría, un acento de
   color por grupo vía custom properties (--fe-cat-*) fijadas inline en cada
   .fe-cat-group (2026-07-20 rediseño: antes cada curso era una tarjeta alta
   con descripción; ahora es una fila — título en bullet, chips de duración/
   precio debajo, botón "Más info" a la derecha). ── */
.fe-courses__groups { display: flex; flex-direction: column; gap: 16px; }
/* En móvil el wrapper de columna desaparece de la caja (`display:contents`)
   y sus `.fe-cat-group` pasan a ser hijos directos del flex de arriba — el
   `order` inline de cada uno (ver formacion-empresas.jsx) restaura el orden
   natural IA/OKR/Lean&Agile/Scrum. En escritorio (media query más abajo)
   `.fe-col` vuelve a ser una caja real: cada columna apila solo sus propias
   categorías, con su propia altura — así la columna corta (OKR) no deja un
   hueco vacío en la columna larga. */
.fe-col { display: contents; }
.fe-cat-group {
  background: var(--bg-card); border: 1px solid var(--line); border-left: 3px solid var(--fe-cat-border, var(--line));
  border-radius: var(--radius); padding: 16px 18px 6px;
}
.fe-cat-group__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.fe-cat-group__label {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fe-cat-accent);
}
.fe-cat-group__count { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); flex: none; }

.fe-crow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 11px 2px; border-top: 1px solid var(--line); }
.fe-cat-group > .fe-crow:first-of-type { border-top: none; }
.fe-crow__title { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.35; margin: 0; }
.fe-crow__title::before { content: ""; width: 6px; height: 6px; flex: none; margin-top: 6px; border-radius: 2px; background: var(--fe-cat-accent); }
.fe-crow__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0 14px; }

.fe-chip {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--fe-cat-bg); border: 1px solid var(--fe-cat-border); color: var(--ink-2); white-space: nowrap;
}
.fe-chip--price { color: var(--ink); font-weight: 700; }
.fe-chip--price s { font-weight: 500; color: var(--ink-4); margin-right: 4px; }
.fe-chip--beta { background: rgba(220, 150, 20, .14); border-color: rgba(220, 150, 20, .3); color: #a05a10; }

.fe-more-btn {
  font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  padding: 8px 15px; border-radius: var(--btn-radius); border: 1px solid var(--line-2); background: var(--bg-card);
  transition: border-color .15s, color .15s;
}
.fe-more-btn:hover { border-color: var(--fe-cat-accent); color: var(--fe-cat-accent); }
.fe-more-btn::after { content: "→"; margin-left: 6px; }

.fe-courses__state { color: var(--ink-3); font-size: 15.5px; padding: 8px 0 0; }
.fe-courses__tiers { font-size: 14.5px; color: var(--ink-3); margin: 16px 0 0; text-align: center; }
.fe-courses__sk { height: 122px; border-radius: var(--radius); background: var(--bg-soft, rgba(15, 27, 46, .06)); animation: fe-pulse 1.3s ease-in-out infinite; }
@keyframes fe-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .fe-courses__sk { animation: none; } }

/* ── In-company (2 días + paquete completo): fe-journey · regalos: fe-gift ── */
.fe-journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.fe-journey__item {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 4px;
}
.fe-journey__icon { font-size: 26px; margin-bottom: 4px; }
.fe-journey__title { font-weight: 700; font-size: 16px; margin: 0; color: var(--ink); }
.fe-journey__text { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.fe-journey__foot { margin: 18px auto 0; max-width: 720px; text-align: center; font-size: 14.5px; color: var(--ink-2); }
.fe-journey__foot a { color: var(--navy); font-weight: 700; }

.fe-gift {
  display: flex; align-items: flex-start; gap: 14px; margin-top: 22px; padding: 18px 20px;
  background: var(--navy-soft); border: 1px dashed var(--navy-2); border-radius: var(--radius);
}
.fe-gift__icon { font-size: 26px; flex: none; line-height: 1; }
.fe-gift p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* Escritorio: 2 columnas reales — izquierda Lean & Agile sola (la categoría
   con más cursos), derecha IA + OKR + Scrum apiladas (FE_COL_LEFT en
   formacion-empresas.jsx decide qué va en cada `.fe-col`). El orden del DOM
   no cambia (IA primero, decisión de Alex de más protagonismo) — por debajo
   de este ancho `.fe-col` vuelve a `display:contents` y el `order` manda. */
@media (min-width: 860px) {
  .fe-courses__groups { flex-direction: row; align-items: flex-start; }
  .fe-col { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 16px; }
  .fe-crow { padding: 10px 4px; }
}

/* Móvil: el botón "Más info" pasa a la línea de chips en vez de robarle una
   columna al título. `.fe-crow__body` se vuelve `display:contents` (mismo
   truco que `.fe-col` más arriba) para que título y chips entren como
   celdas propias del grid de `.fe-crow` — así el botón queda en la fila de
   los chips, pegado a la derecha, sin tocar el JSX. */
@media (max-width: 520px) {
  .fe-cat-group { padding: 13px 14px 4px; }
  .fe-crow {
    grid-template-columns: 1fr auto; grid-template-areas: "title title" "chips button";
    row-gap: 5px; column-gap: 8px; padding: 10px 1px;
  }
  .fe-crow__body { display: contents; }
  .fe-crow__title { grid-area: title; font-size: 13.5px; }
  .fe-crow__chips { grid-area: chips; margin: 0 0 0 14px; }
  .fe-more-btn { grid-area: button; align-self: center; font-size: 12px; padding: 5px 12px; }
  .fe-more-btn::after { content: none; }
}

/* ── Bonificación FUNDAE (detalle ampliado) ── */
.fe-fundae {
  display: flex; gap: 18px; margin-top: 28px; padding: 24px;
  background: var(--navy-soft); border: 1px solid var(--navy-2); border-radius: var(--radius);
}
.fe-fundae__icon { font-size: 30px; flex: none; line-height: 1; }
.fe-fundae h3 { font-size: 17.5px; margin: 0 0 8px; }
.fe-fundae p { font-size: 15.5px; line-height: 1.6; margin: 0 0 10px; color: var(--ink-2); }
.fe-fundae ul { margin: 0 0 10px; padding-left: 20px; }
.fe-fundae li { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin-bottom: 4px; }
.fe-fundae p:last-child { margin-bottom: 0; }