/* Página de curso: Analista de datos en Python. Identidad propia: un proyecto que avanza de carpeta en carpeta,
   con terminal y dos módulos codificados por color (Análisis en azul Python, Visualización en índigo). */
.c-analista-datos-python {
  --ap-1: #2f6ea5; --ap-2: #5b63e8; --ap-ok: #1f9e8f; --ap-term: #0e1a26; --ap-term2: #172a3c; --ap-tink: #d5e4f0; --ap-dim: #7f97ab;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
:root[data-theme="dark"] .c-analista-datos-python { --ap-1: #7fb4e6; --ap-2: #9aa0ff; --ap-ok: #3cc4b8; --ap-term: #08131d; --ap-term2: #11202f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-analista-datos-python { --ap-1: #7fb4e6; --ap-2: #9aa0ff; --ap-ok: #3cc4b8; --ap-term: #08131d; --ap-term2: #11202f; }
}

/* Detalle tipográfico: el <em> con un prompt de terminal delante; los pasos son rutas del proyecto */
.c-analista-datos-python .c-hero h1 { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.5rem); max-width: 17ch; }
.c-analista-datos-python h1 em, .c-analista-datos-python h2 em { color: var(--ap-ok); }
.c-analista-datos-python .c-hero h1 em::before { content: "$ "; font-family: var(--mono); font-style: normal; font-weight: 500; opacity: .55; }
.c-analista-datos-python .cs-step-n { font-family: var(--mono); color: var(--ap-ok); letter-spacing: 0; }

/* ---------- Portada: terminal que levanta el dashboard ---------- */
.ap-term {
  position: absolute; left: -26px; bottom: -32px; width: min(80%, 370px); border-radius: 14px; overflow: hidden;
  background: var(--ap-term); color: var(--ap-tink); font-family: var(--mono); font-size: .74rem; box-shadow: 0 24px 50px -18px rgba(5, 20, 35, .55);
  border: 1px solid rgba(255,255,255,.06); animation: c-in .8s .5s cubic-bezier(.2, .8, .2, 1) both;
}
.ap-term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--ap-term2); color: var(--ap-dim); font-size: .68rem; }
.ap-term-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff6b6b; } .ap-term-bar i:nth-child(2) { background: #ffc857; } .ap-term-bar i:nth-child(3) { background: #3ecf8e; }
.ap-term-bar span { margin-left: 6px; }
.ap-term pre { margin: 0; padding: 10px 12px; min-height: 5.2em; white-space: pre-wrap; font: inherit; line-height: 1.6; }
.ap-ps { color: #ffc857; } .ap-ok { color: #6fe0c6; } .ap-dimt { color: var(--ap-dim); }
.ap-mods { display: flex; gap: 6px; padding: 0 12px 12px; flex-wrap: wrap; }
.ap-mods span { padding: 3px 9px; border-radius: 999px; font-size: .64rem; border: 1px solid rgba(255,255,255,.14); color: var(--ap-dim); transition: background .4s, color .4s, border-color .4s; }
.ap-mods span.on.m1 { background: #2f6ea5; color: #fff; border-color: #2f6ea5; }
.ap-mods span.on.m2 { background: #5b63e8; color: #fff; border-color: #5b63e8; }

/* ---------- Historia ---------- */
.ap-stage { font-size: .86rem; }
.c-analista-datos-python .s1 { background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--ap-ok) 12%, transparent), transparent 55%); }
.c-analista-datos-python .s2, .c-analista-datos-python .s4 { display: block; }
.c-analista-datos-python .s5 { padding: 7%; }
.ap-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-family: var(--mono); font-size: .7rem; font-weight: 600; color: #fff; }
.ap-badge.m1 { background: #2f6ea5; } .ap-badge.m2 { background: #5b63e8; }

/* Escena 1 */
.ap-msg { position: absolute; left: 7%; top: 8%; width: 70%; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ap-msg header { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.ap-msg header small { margin-left: auto; color: var(--faint); }
.ap-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .72rem; color: #fff; background: var(--ap-ok); }
.ap-msg p { margin: 8px 0 0; font-size: .92rem; line-height: 1.45; }
.ap-files { position: absolute; right: 7%; top: 48%; width: 58%; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; --d: .2s; }
.ap-files li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-family: var(--mono); font-size: .72rem; }
.ap-files small { margin-left: auto; font-family: var(--f-body); color: var(--muted); font-size: .68rem; }
.ap-files .x { padding: 2px 5px; border-radius: 4px; font-size: .58rem; font-weight: 700; color: #fff; background: var(--muted); }
.ap-files .x.g { background: #1d7044; }
.ap-crash { position: absolute; left: 7%; bottom: 8%; margin: 0; padding: 7px 12px; border-radius: 999px; background: var(--bad); color: #fff; font-weight: 600; font-size: .8rem; --d: .45s; }
.cs-stage:not([data-step="1"]) .s1 > * { opacity: 0; transform: translateY(18px); }

/* Escena 2: merge */
.ap-join { margin-top: 18px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px 8px; align-items: center; }
.ap-t { border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); font-family: var(--mono); font-size: .72rem; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.ap-t header { padding: 6px 10px; font-weight: 700; color: #fff; background: #2f6ea5; }
.ap-t span { display: block; padding: 4px 10px; border-top: 1px solid var(--line); }
.ap-t span b { color: var(--ap-ok); }
.ap-t.c { grid-column: 1 / -1; justify-self: center; width: 62%; border-color: var(--ap-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-ok) 20%, transparent); transition-delay: .45s; }
.ap-t.c header { background: var(--ap-ok); }
.ap-plus, .ap-eq { font-family: var(--mono); font-weight: 700; font-size: 1.1rem; color: var(--muted); }
.ap-eq { grid-column: 1 / -1; justify-self: center; line-height: 1; }
.ap-code { margin: 14px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--ap-term); color: var(--ap-tink); font-family: var(--mono); font-size: .74rem; white-space: pre-wrap; line-height: 1.5; }
.ap-code u, .ap-app u { color: #f2b66d; text-decoration: none; } .ap-app b { color: #a9b0ff; font-weight: 600; }
.cs-stage:not([data-step="2"]) .s2 .ap-t.a { transform: translateX(-30px); opacity: 0; }
.cs-stage:not([data-step="2"]) .s2 .ap-t.b { transform: translateX(30px); opacity: 0; }
.cs-stage:not([data-step="2"]) .s2 .ap-t.c { transform: translateY(20px); opacity: 0; }

/* Escena 3: crosstab con calor */
.s3 .ap-code { margin: 12px 0; }
.ap-cross { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 4px; font-size: .74rem; --d: .2s; }
.ap-cross span { padding: 6px 8px; color: var(--muted); }
.ap-cross span.h { font-weight: 600; color: var(--ink); }
.ap-cross i { font-style: normal; padding: 8px; border-radius: 6px; text-align: right; font-family: var(--mono); font-size: .72rem; color: var(--ink); background: color-mix(in srgb, #2f6ea5 calc(var(--v) * 70%), var(--surface)); }
.ap-cross i[style*=".9"], .ap-cross i[style*=".7"] { color: #fff; }
.ap-stat { margin: 12px 0 0; font-size: .8rem; color: var(--muted); --d: .4s; }
.ap-stat b { font-family: var(--mono); color: var(--ap-1); }
.cs-stage:not([data-step="3"]) .s3 > * { opacity: 0; transform: translateY(14px); }

/* Escena 4: código → dashboard */
.ap-split { margin-top: 14px; display: grid; grid-template-columns: 1.1fr auto 1fr; gap: 10px; align-items: center; }
.ap-app { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--ap-term); color: var(--ap-tink); font-family: var(--mono); font-size: .66rem; line-height: 1.5; white-space: pre-wrap; }
.ap-arrow { font-size: 1.3rem; color: #5b63e8; font-weight: 700; --d: .25s; }
.ap-dash { padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 8px; --d: .4s; }
.ap-dash-top span { display: inline-block; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: .7rem; }
.ap-dash-top b { color: #5b63e8; }
:root[data-theme="dark"] .ap-dash-top b { color: #9aa0ff; }
.ap-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ap-kpis span { display: grid; padding: 6px 8px; border-radius: 8px; background: var(--bg); }
.ap-kpis small { font-size: .62rem; color: var(--muted); } .ap-kpis b { font-family: var(--f-display); font-size: 1rem; }
.ap-dash svg { width: 100%; height: 60px; }
.ap-dash path { fill: none; stroke: #5b63e8; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 1.2s .7s ease; }
.cs-stage[data-step="4"] .ap-dash path { stroke-dashoffset: 0; }
.cs-stage:not([data-step="4"]) .s4 .ap-split > * { opacity: 0; transform: translateY(14px); }
.s4 .ap-split > * { transition: opacity .5s, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }

/* Escena 5: entrega */
.ap-final { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ap-final li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.ap-final li:nth-child(2) { transition-delay: .12s; } .ap-final li:nth-child(3) { transition-delay: .24s; } .ap-final li:nth-child(4) { transition-delay: .36s; }
.ap-final b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; background: var(--line); color: var(--ink); }
.ap-final .done b { background: var(--ap-ok); color: #fff; }
.ap-final .now { border-color: var(--ap-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-ok) 18%, transparent); }
.ap-final .now b { background: color-mix(in srgb, var(--ap-ok) 20%, var(--surface)); color: var(--ap-ok); animation: ap-pulse 1.6s ease-in-out infinite; }
.ap-final span { display: grid; font-size: .74rem; color: var(--muted); line-height: 1.35; }
.ap-final strong { color: var(--ink); font-size: .86rem; }
.ap-cert { position: absolute; right: 7%; bottom: 7%; display: grid; padding: 10px 14px; border-radius: 12px; background: var(--deep); color: var(--on-deep); font-weight: 700; font-size: .82rem; --d: .6s; }
.ap-cert small { font-weight: 500; opacity: .75; }
.cs-stage:not([data-step="5"]) .s5 .ap-final li { opacity: 0; transform: translateX(-16px); }
.cs-stage:not([data-step="5"]) .s5 .ap-cert { opacity: 0; transform: translateY(12px); }
@keyframes ap-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ap-ok) 0%, transparent); } 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ap-ok) 35%, transparent); } }

/* ---------- Programa: un módulo por tarjeta ---------- */
.ap-mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-mod-grid .ap-mod { grid-row: auto; grid-column: auto; gap: 14px; }
.ap-mod-1 { border-top: 5px solid #2f6ea5; } .ap-mod-2 { border-top: 5px solid #5b63e8; }
.c-analista-datos-python .ap-mod .unit-n { font-family: var(--mono); text-transform: none; letter-spacing: 0; }
.c-analista-datos-python .ap-mod-1 .unit-n { color: var(--ap-1); } .c-analista-datos-python .ap-mod-2 .unit-n { color: var(--ap-2); }
.ap-mod h3 { font-size: 1.4rem; }
.ap-mod h3 a { color: inherit; text-decoration: none; }
.ap-mod h3 a:hover { color: var(--accent); }
.ap-mod-units { display: grid; gap: 12px; }
.ap-mod-units h4 { margin: 0; font-size: .98rem; }
.ap-mod-units p { margin: 3px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.ap-mod code { font-family: var(--mono); font-size: .86em; padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, var(--ap-1) 10%, var(--surface)); color: var(--ap-1); }
@media (min-width: 901px) { .ap-road { grid-template-columns: 1.5fr 1fr; } }
.ap-road .dots { grid-template-columns: repeat(10, 1fr); }
.road-classes.on .dots i.m2 { background: #5b63e8; }

@media (max-width: 900px) {
  .ap-term { left: -10px; bottom: -24px; width: 76%; }
}
@media (max-width: 760px) { .ap-mod-grid { grid-template-columns: minmax(0, 1fr); } .ap-mod { grid-column: auto; } }
@media (max-width: 560px) {
  .ap-stage { font-size: .76rem; }
  .ap-term { font-size: .64rem; } .ap-term pre { min-height: 4.6em; }
  .ap-msg { width: 84%; padding: 9px 11px; top: 5%; } .ap-msg p { font-size: .72rem; margin-top: 5px; } .ap-msg header { font-size: .66rem; } .ap-av { width: 20px; height: 20px; font-size: .6rem; }
  .ap-files { width: 78%; top: 46%; gap: 3px; } .ap-files li { padding: 4px 7px; font-size: .58rem; } .ap-files small { font-size: .54rem; }
  .ap-crash { font-size: .64rem; padding: 5px 9px; bottom: 5%; }
  .ap-badge { font-size: .58rem; padding: 3px 8px; }
  .ap-join { margin-top: 8px; gap: 5px; } .ap-t { font-size: .58rem; } .ap-t header { padding: 3px 7px; } .ap-t span { padding: 2px 7px; } .ap-t.c { width: 72%; }
  .ap-code { font-size: .58rem; margin-top: 8px; padding: 6px 8px; }
  .s3 .ap-code { margin: 6px 0; } .ap-cross { gap: 2px; font-size: .58rem; } .ap-cross span { padding: 3px 4px; } .ap-cross i { padding: 4px; font-size: .56rem; } .ap-stat { font-size: .64rem; margin-top: 6px; }
  .ap-split { grid-template-columns: 1fr; gap: 6px; margin-top: 8px; } .ap-arrow { display: none; } .ap-app { font-size: .54rem; padding: 6px 8px; } .ap-dash { padding: 6px; gap: 4px; grid-template-columns: auto 1fr; align-items: center; } .ap-dash svg { height: 30px; grid-column: 1 / -1; } .ap-kpis b { font-size: .8rem; }
  .ap-final { gap: 5px; } .ap-final li { padding: 6px 9px; gap: 8px; } .ap-final b { width: 22px; height: 22px; font-size: .64rem; } .ap-final strong { font-size: .7rem; } .ap-final span { font-size: .6rem; }
  .ap-cert { font-size: .66rem; padding: 6px 10px; bottom: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-term, .ap-final .now b { animation: none !important; }
  .ap-t, .ap-final li, .ap-dash path, .s4 .ap-split > *, .ap-mods span { transition: none !important; }
}