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

/* ── Jerarquía de títulos (2026-07-30, Alex: los h2 de sección se veían MÁS
   GRANDES que el propio h1 — 54px vs 50px en pantallas ~1280px). El h1 del
   hero lleva fontSize inline clamp(30px,4.5vw,50px) (más pequeño que el
   clamp(40px,6.4vw,88px) global de styles.css), pero los h2 se quedaban con
   el clamp global de hasta 56px, sin override propio. .fe-h2 los topa muy
   por debajo del h1; .fe-sub da el ritmo vertical a los h3 de subsección
   (salvo el de <ComoFuncionanCursos as="h3"/>, que trae los suyos vía .cf*
   en styles.css — no dupliques esos estilos aquí, test guard). ── */
.fe-h2 { font-size: clamp(24px, 3.4vw, 36px); }
.fe-sub { margin: 0 0 40px; }
.fe-sub:last-child { margin-bottom: 0; }
/* Regla simple de espaciado (Alex, 2026-07-30): un h3 que viene tras contenido
   respira 56px por arriba — más que los 32px iniciales, menos que el salto
   entre secciones h2. El único h3 que va pegado a su h2 (el de
   ComoFuncionanCursos, "Cómo funcionan…") conserva su margen corto en .cf*. */
.fe-sub h3 { text-align: center; margin: 56px 0 10px; }
.fe-sub > p { text-align: center; color: var(--ink-2); max-width: 640px; margin: 0 auto 20px; }

/* ── Ritmo de la página (2026-07-30, Alex: «separa un poco más las secciones»).
   La página encadena 7 bloques y casi todos son `.section--tight` (55% del
   padding base): con `data-density="compact"` eso deja ~22px entre secciones y
   se leían pegadas. Se sube el multiplicador solo aquí, sin tocar el token
   global (--pad-section lo comparte todo el sitio). ── */
.fe-page .section--tight { padding: calc(var(--pad-section) * 0.85) 0; }

/* ── Hero: lede ancho con negritas + las dos rutas como accesos visuales ── */
.fe-lede { font-size: 18.5px; color: var(--ink-2); line-height: 1.65; max-width: 780px; margin: 0 auto; }
.fe-lede b { color: var(--ink); font-weight: 700; }

.fe-routes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px auto 0; }
.fe-route {
  display: flex; align-items: center; gap: 12px; text-align: left; text-decoration: none;
  padding: 12px 18px 12px 14px; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--line);
  transition: border-color .15s, transform .15s;
}
.fe-route:hover { border-color: var(--navy-2); transform: translateY(-2px); }
.fe-route__icon { font-size: 24px; line-height: 1; flex: none; }
.fe-route__body { display: flex; flex-direction: column; }
.fe-route__body b { font-size: 15.5px; color: var(--ink); }
.fe-route__body span { font-size: 13.5px; color: var(--ink-3); }
.fe-route::after { content: "↓"; margin-left: 4px; color: var(--ink-4); font-size: 15px; }
/* En móvil, ambas rutas a ancho completo: apiladas con anchos distintos (cada
   una según su texto) se leen como dos piezas sueltas, no como dos opciones. */
@media (max-width: 560px) {
  .fe-routes { flex-direction: column; }
  .fe-route { width: 100%; justify-content: flex-start; }
  .fe-route::after { margin-left: auto; }
}

/* ── 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; }