/* Formation template: three blocks from the approved Education reference. */
.fx-formation .fx-h1,
.fx-formation .fx-h2,
.fx-formation h3,
.fx-formation p,
.fx-formation figure,
.fx-formation blockquote { margin: 0; }
.fx-formation__docket { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fx-space-3); padding-bottom: var(--fx-space-3); margin-bottom: var(--fx-space-8); border-bottom: 1px solid var(--fx-color-line); color: var(--fx-color-text-muted); }
.fx-formation__docket-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-3); }
.fx-formation__docket .fx-section-heading__eyebrow { margin-bottom: 0; }
.fx-formation__docket-right { color: var(--fx-color-text-secondary); letter-spacing: 0.05em; }
.fx-formation__title { font-size: var(--fx-text-display); line-height: var(--fx-leading-display); letter-spacing: var(--fx-track-display); max-width: var(--fx-content-max); text-wrap: balance; }
.fx-formation__overview-copy,
.fx-formation__overview-aside { display: grid; align-content: start; gap: var(--fx-space-6); min-width: 0; }
.fx-formation__contrast { gap: var(--fx-space-3); }
.fx-formation__contrast-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--fx-space-4); min-height: 11rem; padding: var(--fx-space-5); background: var(--fx-color-surface-container); border: 1px solid var(--fx-color-line); }
.fx-formation__card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fx-space-3); }
.fx-formation__card-index { color: var(--fx-color-text-secondary); }
.fx-formation__contrast-card--outcome .fx-formation__card-index { color: var(--fx-color-primary-soft-dim); }
.fx-formation__contrast-card--outcome { background: var(--fx-color-carbon); border-color: var(--fx-color-carbon); color: var(--fx-color-text-inverse); }
.fx-formation__contrast-card--outcome .fx-formation__micro { color: var(--fx-color-primary-soft-dim); }
.fx-formation__contrast-card strong { display: block; margin-bottom: var(--fx-space-2); }
.fx-formation__card-note { display: block; padding-top: var(--fx-space-2); border-top: 1px solid var(--fx-color-line); }
.fx-formation__contrast-card--outcome .fx-formation__card-note { border-color: var(--fx-color-text-secondary); }
.fx-formation__cue { display: inline-flex; align-items: center; gap: var(--fx-space-2); max-width: 18rem; }
.fx-formation__cue-marker { width: 8px; height: 8px; flex: 0 0 8px; background: var(--fx-color-primary); }
.fx-formation__specs { padding: 0; }
.fx-formation__specs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-3); padding: var(--fx-space-3) var(--fx-space-5); background: var(--fx-color-surface-container); border-bottom: 1px solid var(--fx-color-line); }
.fx-formation__specs-code { color: var(--fx-color-text-secondary); }
.fx-formation__panel-head { padding: var(--fx-space-3) var(--fx-space-5); border-bottom: 1px solid var(--fx-color-line); }
.fx-formation__specs dl { margin: 0; }
.fx-formation__specs dl > div { display: flex; justify-content: space-between; gap: var(--fx-space-5); padding: var(--fx-space-3) var(--fx-space-5); border-top: 1px solid var(--fx-color-line); }
.fx-formation__specs dl > div:first-child { border-top: 0; }
.fx-formation__specs dt { white-space: nowrap; }
.fx-formation__specs dd { margin: 0; text-align: right; font-weight: 600; }
.fx-formation__diagnosis { margin-top: var(--fx-space-12); padding: var(--fx-space-6); background: var(--fx-color-surface-container); border: 1px solid var(--fx-color-line); }
.fx-formation__block-heading { padding-bottom: var(--fx-space-4); margin-bottom: var(--fx-space-4); border-bottom: 1px solid var(--fx-color-line); }
.fx-formation__block-heading p { margin-top: var(--fx-space-2); }
.fx-formation__diagnosis-title { text-wrap: balance; }
.fx-formation__states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fx-space-3); }
.fx-formation__state { display: flex; flex-direction: column; gap: var(--fx-space-3); padding: var(--fx-space-5); }
.fx-formation__state-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fx-space-3); }
.fx-formation__state-head .fx-formation__micro:first-child { color: var(--fx-color-primary); font-weight: 600; }
.fx-formation__state h3 { padding-top: var(--fx-space-2); border-top: 1px solid var(--fx-color-line); text-transform: uppercase; }
.fx-formation__state p { flex: 1; }
.fx-formation__conclusion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--fx-space-6); align-items: center; margin-top: var(--fx-space-3) !important; padding: var(--fx-space-3) var(--fx-space-5); }
.fx-formation__conclusion-text { display: flex; align-items: flex-start; gap: var(--fx-space-2); }
.fx-formation__arrow { color: var(--fx-color-primary); font-family: var(--fx-font-mono); }
.fx-formation__conclusion-principle { color: var(--fx-color-primary); font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; }
.fx-formation__section-heading { padding-bottom: var(--fx-space-5); margin-bottom: var(--fx-space-6); border-bottom: 1px solid var(--fx-color-line); }
.fx-formation__practice-title { text-wrap: balance; }
.fx-formation__pipeline-caption { padding-bottom: var(--fx-space-3); margin-bottom: var(--fx-space-4); border-bottom: 1px solid var(--fx-color-line); color: var(--fx-color-text-muted); }
.fx-formation__pipeline-grid { gap: var(--fx-space-3); }
.fx-formation__stratum { display: flex; flex-direction: column; padding: var(--fx-space-4); }
.fx-formation__stratum:first-child { background: var(--fx-color-surface-container); }
.fx-formation__stratum--output { background: var(--fx-color-carbon); border-color: var(--fx-color-carbon); color: var(--fx-color-text-inverse); }
.fx-formation__stratum .fx-formation__panel-head { padding: 0 0 var(--fx-space-3); color: var(--fx-color-primary); font-size: var(--fx-text-label); font-weight: 600; letter-spacing: 0.04em; }
.fx-formation__stratum--output .fx-formation__panel-head { color: var(--fx-color-primary-soft-dim); border-color: var(--fx-color-text-secondary); }
.fx-formation__stratum ul { margin: var(--fx-space-5) 0 0; padding-left: var(--fx-space-5); }
.fx-formation__stratum li + li { margin-top: var(--fx-space-3); }
.fx-formation__stratum-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--fx-space-3); margin-top: auto; padding-top: var(--fx-space-3); border-top: 1px solid var(--fx-color-line); }
.fx-formation__stratum-foot--between { align-items: center; }
.fx-formation__foot-label { color: var(--fx-color-primary); font-weight: 600; }
.fx-formation__stratum--output .fx-formation__stratum-foot { border-color: var(--fx-color-text-secondary); }
.fx-formation__stratum--output .fx-formation__foot-label { color: var(--fx-color-primary-soft-dim); }
.fx-formation__foot-tail { white-space: nowrap; color: var(--fx-color-text-secondary); }
.fx-formation__stratum--output .fx-formation__foot-tail { color: var(--fx-color-primary-soft-dim); }
.fx-formation__phases { gap: var(--fx-space-2); margin-top: var(--fx-space-4); }
.fx-formation__phase { padding: var(--fx-space-3); border: 1px solid var(--fx-color-line); background: var(--fx-color-surface-container); }
.fx-formation__phase .fx-formation__micro { padding-bottom: var(--fx-space-2); margin-bottom: var(--fx-space-2); border-bottom: 1px solid var(--fx-color-line); color: var(--fx-color-primary); }
.fx-formation__phase h3 { text-transform: uppercase; }
.fx-formation__phase p { margin-top: var(--fx-space-2); }
.fx-formation__case { margin-bottom: var(--fx-space-12); }
.fx-formation__steps { display: grid; gap: var(--fx-space-3); }
.fx-formation__step { padding: var(--fx-space-4); }
.fx-formation__step > .fx-formation__micro { display: flex; justify-content: space-between; gap: var(--fx-space-3); padding-bottom: var(--fx-space-2); margin-bottom: var(--fx-space-2); border-bottom: 1px solid var(--fx-color-line); color: var(--fx-color-primary); }
.fx-formation__step > .fx-formation__micro > .fx-muted { text-align: right; }
.fx-formation__micro-leading { display: inline-flex; align-items: center; gap: var(--fx-space-2); }
.fx-formation__phase-marker { width: 8px; height: 8px; flex: 0 0 8px; background: var(--fx-color-primary); }
.fx-formation__step-title { font-size: var(--fx-text-body-lg); line-height: var(--fx-leading-body-lg); font-weight: 600; margin-bottom: 0; }
.fx-formation__step-text { margin-top: var(--fx-space-2); margin-bottom: 0; }
.fx-formation__case-side { display: grid; gap: var(--fx-space-3); align-content: start; min-width: 0; }
.fx-formation__learning { align-self: start; padding: var(--fx-space-5); background: var(--fx-color-surface-container); }
.fx-formation__learning p { margin-top: var(--fx-space-3); }
.fx-formation__protocol { margin-bottom: var(--fx-space-12); }
.fx-formation__protocol-label { display: block; margin-bottom: var(--fx-space-4); }
.fx-formation__protocol-grid { gap: var(--fx-space-3); }
.fx-formation__protocol-card { display: flex; flex-direction: column; padding: var(--fx-space-5); }
.fx-formation__protocol-card--before { background: var(--fx-color-surface-container); }
.fx-formation__protocol-card--after { border-color: var(--fx-color-primary); }
.fx-formation__protocol-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fx-space-3); padding-bottom: var(--fx-space-3); border-bottom: 1px solid var(--fx-color-line); }
.fx-formation__protocol-title { color: var(--fx-color-primary); font-weight: 600; }
.fx-formation__protocol-flag { color: var(--fx-color-text-secondary); }
.fx-formation__protocol-card ol { margin: var(--fx-space-5) 0; padding: 0; list-style: none; }
/* Flujo del formato convencional: elementos descartados con flechas de descenso. */
.fx-formation__protocol-card--before ol { display: grid; gap: var(--fx-space-1); justify-items: start; }
.fx-formation__protocol-card--before li.fx-chip { text-decoration: line-through !important; color: var(--fx-color-text-secondary); }
.fx-formation__protocol-card--before li.fx-chip:hover { border-color: var(--fx-color-line-strong); color: var(--fx-color-text-secondary); }
.fx-formation__flow-arrow { color: var(--fx-color-primary); padding: 0 var(--fx-space-2); font-size: var(--fx-text-label); }
/* Flujo del Protocolo Falexom: piezas de ancho natural con flechas,
   wrap libre según el espacio disponible. */
.fx-formation__protocol-card--after ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
.fx-formation__protocol-card--after li.fx-chip { background: var(--fx-color-surface-container); border-color: var(--fx-color-line); }
.fx-formation__protocol-card--after li.fx-chip:hover { border-color: var(--fx-color-line-strong); color: var(--fx-color-carbon); }
.fx-formation__protocol-card--after li.fx-formation__flow-arrow { padding: 0 var(--fx-space-1); align-self: center; }
.fx-formation__protocol-card--after li.fx-chip:last-child { background: var(--fx-color-primary); border-color: var(--fx-color-primary); color: var(--fx-color-text-inverse); font-weight: 600; }
.fx-formation__protocol-card--after li.fx-chip:last-child:hover { background: var(--fx-color-primary-deep); border-color: var(--fx-color-primary); color: var(--fx-color-text-inverse); }
.fx-formation__protocol-card p { margin-top: auto; padding-top: var(--fx-space-3); border-top: 1px solid var(--fx-color-line); }
.fx-formation__closing { padding: var(--fx-space-8); background: var(--fx-color-carbon); color: var(--fx-color-text-inverse); }
.fx-formation__closing > .fx-formation__micro { display: block; padding-bottom: var(--fx-space-3); margin-bottom: var(--fx-space-5); border-bottom: 1px solid var(--fx-color-text-secondary); color: var(--fx-color-primary-soft-dim); }
.fx-formation__closing-grid { align-items: center; }
.fx-formation__before { margin-bottom: var(--fx-space-4); color: var(--fx-color-primary-soft-dim); }
.fx-formation__before span,
.fx-formation__after span { display: block; margin-bottom: var(--fx-space-2); }
.fx-formation__closing blockquote { padding: var(--fx-space-4); margin-top: var(--fx-space-6); border-left: 2px solid var(--fx-color-primary-soft-dim); background: var(--fx-color-carbon-soft); }
.fx-formation__closing blockquote span { display: block; color: var(--fx-color-primary-soft-dim); }
.fx-formation__closing blockquote p { margin-top: var(--fx-space-2); }
.fx-formation__contact { display: grid; gap: var(--fx-space-3); padding: var(--fx-space-5); background: var(--fx-color-carbon-soft); border: 1px solid var(--fx-color-text-secondary); }
.fx-formation__contact > .fx-formation__micro { color: var(--fx-color-primary-soft-dim); }
.fx-formation__contact h3 { color: var(--fx-color-text-inverse); }
.fx-formation__contact .fx-button { width: 100%; justify-content: center; }
/* En el bloque oscuro, el CTA principal usa el azul de marca (Primary).
   El componente base es Carbon; aquí se integra con la superficie oscura
   usando únicamente tokens aprobados. */
.fx-formation__contact .fx-button--primary {
  background: var(--fx-color-primary);
  color: var(--fx-color-text-inverse);
}

.fx-formation__contact .fx-button--primary:hover,
.fx-formation__contact .fx-button--primary:active {
  background: var(--fx-color-primary-deep);
}
.fx-formation__email { color: var(--fx-color-primary-soft-dim); }

@media (max-width: 1199px) {
  .fx-formation__states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-formation__stratum--output { grid-column: 1 / -1; }
  .fx-formation__title { font-size: 2.75rem; line-height: 3.375rem; }
}
@media (max-width: 767px) {
  .fx-formation__states { grid-template-columns: minmax(0, 1fr); }
  .fx-formation__stratum--output { grid-column: auto; }
  .fx-formation__diagnosis,
  .fx-formation__pipeline,
  .fx-formation__closing { padding: var(--fx-space-4); }
  .fx-formation__title { font-size: var(--fx-text-display); line-height: var(--fx-leading-display); }
  .fx-formation__conclusion { grid-template-columns: 1fr; gap: var(--fx-space-3); align-items: start; }
}