/* Maquetas de los tres formatos del curso (09/11/2026). Autocontenidas: funcionan sobre fondo oscuro (home) y
   claro (landing). Tres formas distintas a propósito: reproductor oscuro, acción con resultado amarillo, lección
   abierta tipo ficha. Texto real, legible en móvil; sin imágenes que mantener. */
.fm { --fm-ink: #0b1a2f; --fm-muted: #5b6b80; --fm-line: #dfe6f0; --fm-paper: #ffffff; --fm-gold: #f3be34; --fm-night: #071427; --fm-display: "Barlow Condensed", "Arial Narrow", Manrope, sans-serif;
  position: relative; box-sizing: border-box; width: 100%; border-radius: 16px; overflow: hidden; font-family: Manrope, system-ui, sans-serif; color: var(--fm-ink); box-shadow: 0 30px 60px -30px rgba(2, 10, 24, .75); }
.fm * { box-sizing: border-box; }
.fm-kicker { display: inline-block; font: 800 .7rem/1.2 Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--fm-muted); }
.fm-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.fm-progress, .fm-back { font-size: .74rem; font-weight: 700; color: var(--fm-muted); white-space: nowrap; }
.fm-back { color: #0b67d9; }

/* APRENDER — reproductor */
.fm--video { background: #0a1730; color: #fff; border: 1px solid rgba(255, 255, 255, .1); }
.fm-screen { position: relative; display: grid; align-content: end; gap: 10px; min-height: 240px; padding: 18px 18px 16px; background:
  radial-gradient(90% 70% at 20% 10%, rgba(11, 103, 217, .45), transparent 60%),
  radial-gradient(60% 60% at 90% 90%, rgba(243, 190, 52, .18), transparent 60%),
  linear-gradient(180deg, #0f2246, #071427); }
.fm--video .fm-kicker { color: #9fb6d6; }
.fm .fm-video-title { margin: 0; color: #fff; font: 800 clamp(1.4rem, 3.2vw, 2rem)/1.02 var(--fm-display); text-transform: uppercase; letter-spacing: 0; max-width: 16ch; }
.fm-play { position: absolute; right: 18px; top: 18px; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--fm-gold); box-shadow: 0 14px 30px -10px rgba(243, 190, 52, .8); }
.fm-play i { display: block; width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #171204; }
.fm-bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.fm-bar-fill { display: block; width: 38%; height: 100%; border-radius: 999px; background: var(--fm-gold); }
.fm-video-meta { display: flex; justify-content: space-between; font-size: .78rem; color: #c6d2e2; }
.fm-chapters { margin: 0; padding: 8px 10px 10px; list-style: none; display: grid; gap: 4px; background: #0a1730; }
.fm-chapters li { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: .84rem; color: #c6d2e2; }
.fm-chapters li b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: .72rem; color: #fff; }
.fm-chapters li.is-now { background: rgba(243, 190, 52, .14); color: #fff; font-weight: 700; }
.fm-chapters li.is-now b { background: var(--fm-gold); color: #171204; }

/* HACER — acción con resultado */
.fm--action { padding: 16px 18px 14px; background: var(--fm-paper); border: 1px solid var(--fm-line); }
.fm .fm-action-title { margin: 0 0 12px; font: 800 clamp(1.3rem, 2.8vw, 1.75rem)/1.05 var(--fm-display); text-transform: uppercase; letter-spacing: 0; color: var(--fm-ink); }
.fm-rows { margin: 0 0 12px; display: grid; gap: 0; }
.fm-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--fm-line); }
.fm .fm-rows dt { margin: 0; font-size: .86rem; color: var(--fm-muted); }
.fm .fm-rows dd { margin: 0; color: var(--fm-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.fm-result { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--fm-night); color: #fff; }
.fm-result span { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #9fb6d6; font-weight: 800; }
.fm-result strong { font: 800 clamp(2.2rem, 5vw, 3rem)/1 var(--fm-display); color: var(--fm-gold); letter-spacing: 0; }
.fm-result small { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .78rem; color: #c6d2e2; }
.fm-result small::before { content: "✓"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #1f9d55; color: #fff; font-size: .62rem; font-weight: 900; }
.fm .fm-note { margin: 10px 0 0; font-size: .74rem; color: var(--fm-muted); }

/* CONSULTAR — lección abierta */
.fm--lesson { padding: 16px 18px 16px; background: #fbf8f1; border: 1px solid #ebe3d2; background-image: linear-gradient(90deg, rgba(243, 190, 52, .9) 0, rgba(243, 190, 52, .9) 5px, transparent 5px); }
.fm .fm-lesson-title { margin: 0 0 10px; color: var(--fm-ink); font: 800 clamp(1.3rem, 2.8vw, 1.75rem)/1.05 var(--fm-display); text-transform: uppercase; letter-spacing: 0; }
.fm .fm-lesson-text { margin: 0 0 10px; font-size: .95rem; line-height: 1.5; color: #2b3a50; }
.fm-lesson-text mark { background: rgba(243, 190, 52, .45); color: inherit; padding: 0 3px; border-radius: 3px; }
.fm-lesson-links { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.fm-lesson-links li { white-space: nowrap; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid #ebe3d2; font-size: .78rem; color: #2b3a50; }

/* Compacta: para el trío de la landing. */
.fm--compact .fm-screen { min-height: 190px; padding: 14px; }
.fm--compact .fm-play { width: 48px; height: 48px; top: 14px; right: 14px; }
.fm--compact .fm-play i { border-width: 10px 0 10px 17px; }
.fm--compact .fm-chapters li:nth-child(n+3) { display: none; }
.fm--compact .fm-lesson-text:nth-of-type(3) { display: none; }
.fm--compact .fm-result strong { font-size: clamp(1.9rem, 4vw, 2.4rem); }

/* Trío ver → hacer → consultar */
.fm-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.fm-trio-item { position: relative; display: grid; gap: 8px; }
.fm-trio-label { display: inline-flex; align-items: center; gap: 8px; font: 800 .8rem/1 Manrope, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: inherit; }
.fm-trio-label b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f3be34; color: #171204; font-size: .76rem; }
.fm-trio-item + .fm-trio-item::before { content: "→"; position: absolute; left: -14px; top: 0; font-weight: 800; color: #f3be34; }
@media (max-width: 900px) {
  .fm-trio { grid-template-columns: 1fr; }
  .fm-trio-item + .fm-trio-item::before { content: "↓"; left: 4px; top: -18px; }
  .fm-trio-item + .fm-trio-item { margin-top: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .fm-bar-fill { animation: fm-fill 6s ease-in-out infinite alternate; }
  @keyframes fm-fill { from { width: 34%; } to { width: 46%; } }
}

/* Colores blindados: las maquetas viven dentro de secciones oscuras (home) y claras (landing) con sus propias reglas
   de texto; aquí mandan las de la maqueta. */
.fm--lesson .fm-lesson-title, .fm--action .fm-action-title, .fm--action .fm-rows dd { color: #0b1a2f !important; }
.fm--lesson .fm-lesson-text, .fm--lesson .fm-lesson-links li { color: #2b3a50 !important; }
.fm--video .fm-video-title { color: #fff !important; padding-right: 72px; }
.fm--action .fm-rows dt, .fm--action .fm-note, .fm--lesson .fm-kicker, .fm--action .fm-kicker { color: #5b6b80 !important; }
.fm--video .fm-kicker { color: #9fb6d6 !important; }

/* En columnas estrechas (el trío de la landing) las piezas se simplifican en vez de apretarse. */
.ii-inside-mock, .fm-trio-item { container-type: inline-size; }
@container (max-width: 360px) {
  .fm-screen { min-height: 200px; padding: 14px; }
  .fm .fm-video-title { font-size: 1.25rem; padding-right: 60px; }
  .fm-play { width: 48px; height: 48px; top: 14px; right: 14px; }
  .fm-play i { border-width: 10px 0 10px 17px; }
  .fm-chapters li:not(.is-now) { display: none; }
  .fm-head { flex-wrap: wrap; }
  .fm-lesson-links li:nth-child(n+3) { display: none; }
  .fm .fm-lesson-text:nth-of-type(3) { display: none; }
  .fm-rows > div { flex-wrap: wrap; gap: 2px 12px; }
  .fm .fm-result strong { font-size: 2rem; }
}

/* Panel de operación (hero): la importación entera, de anuncio a matrícula, con las etapas marcándose una a una. */
.fm--op { padding: 18px 18px 14px; background: linear-gradient(180deg, #0f2246, #071427); color: #fff; border: 1px solid rgba(255, 255, 255, .12); }
.fm--op .fm-kicker { color: #9fb6d6 !important; }
.fm .fm-op-car { margin: 6px 0 0; font: 800 clamp(1.3rem, 2.6vw, 1.7rem)/1.05 var(--fm-display); text-transform: uppercase; color: #fff !important; }
.fm .fm-op-source { margin: 2px 0 0; font-size: .82rem; color: #c6d2e2 !important; }
.fm-op-stages { position: relative; margin: 16px 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; }
.fm-op-stages::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: rgba(255, 255, 255, .14); }
.fm-op-stages li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.fm-op-dot { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #0f2246; border: 2px solid rgba(255, 255, 255, .3); }
.fm-op-dot i { width: 10px; height: 6px; border-left: 2px solid #171204; border-bottom: 2px solid #171204; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.fm-op-stages strong { display: block; font: 800 1rem/1.2 var(--fm-display); text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.fm-op-stages li > div > span { display: block; font-size: .8rem; line-height: 1.4; color: #c6d2e2; }
.fm-op-result { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; }
.fm-op-cost { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.fm-op-cost span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #9fb6d6; font-weight: 800; }
.fm-op-cost strong { font: 800 clamp(1.9rem, 4vw, 2.6rem)/1 var(--fm-display); color: var(--fm-gold); }
.fm-op-cost small { font-size: .76rem; color: #c6d2e2; }
.fm-op-plate { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; align-self: center; padding: 6px 12px 6px 6px; border-radius: 8px; background: #fff; color: #11161c; border: 2px solid #11161c; }
.fm-op-plate-band { grid-row: 1 / span 2; display: grid; place-items: center; align-self: stretch; border-radius: 4px; background: #1a4fcf; color: #fff; font: 800 .8rem/1 Manrope, sans-serif; }
.fm-op-plate-text { font: 800 1.15rem/1 var(--fm-display); text-transform: uppercase; letter-spacing: .04em; }
.fm-op-plate small { font-size: .66rem; color: #5b6b80; white-space: nowrap; }
.fm--op .fm-note { color: #9fb6d6 !important; }
@media (max-width: 420px) { .fm-op-result { grid-template-columns: 1fr; } .fm-op-plate { justify-self: start; } }

/* Secuencia: cada etapa se marca a su turno y el ciclo se repite; con movimiento reducido, todo marcado y quieto. */
.fm-op-stages li { --t: 9s; }
.fm-op-dot { animation: fm-op-dot var(--t) calc(var(--i) * 1.3s) infinite both; }
.fm-op-dot i { animation: fm-op-tick var(--t) calc(var(--i) * 1.3s) infinite both; }
.fm-op-stages li > div { animation: fm-op-text var(--t) calc(var(--i) * 1.3s) infinite both; }
@keyframes fm-op-dot { 0%, 8% { background: #0f2246; border-color: rgba(255, 255, 255, .3); } 12%, 100% { background: #f3be34; border-color: #f3be34; } }
@keyframes fm-op-tick { 0%, 8% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes fm-op-text { 0%, 8% { opacity: .55; } 12%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fm-op-dot, .fm-op-dot i, .fm-op-stages li > div { animation: none; }
  .fm-op-dot { background: #f3be34; border-color: #f3be34; }
  .fm-op-dot i { opacity: 1; }
}