/* Página de curso: Fundamentos de Ingeniería de datos (solo empresas).
   Identidad propia: el dato como un flujo que pasa por etapas. Acento ámbar de "tubería" junto al teal del sitio,
   números de etapa en mayúsculas espaciadas y líneas punteadas que se mueven. */
.c-fundamentos-ingenieria-datos { --fi: #b8680f; --fi-2: #e0912f; --fi-soft: color-mix(in srgb, #e0912f 16%, var(--surface)); }
:root[data-theme="dark"] .c-fundamentos-ingenieria-datos { --fi: #f0a94a; --fi-2: #f0a94a; --fi-soft: color-mix(in srgb, #f0a94a 16%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-fundamentos-ingenieria-datos { --fi: #f0a94a; --fi-2: #f0a94a; --fi-soft: color-mix(in srgb, #f0a94a 16%, var(--surface)); } }

.c-fundamentos-ingenieria-datos .c-hero h1 { font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.6rem); max-width: 17ch; }
.c-fundamentos-ingenieria-datos .c-hero h1 em,
.c-fundamentos-ingenieria-datos h2 em { color: var(--fi); }
.c-solo-emp {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--ink); background: var(--fi-soft); border: 1px solid color-mix(in srgb, var(--fi) 35%, var(--line));
}
.c-solo-emp::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--fi); }
.c-fundamentos-ingenieria-datos .cs-step-n { font-family: var(--f-data); text-transform: uppercase; letter-spacing: .22em; color: var(--fi); display: flex; align-items: center; gap: 10px; }
.c-fundamentos-ingenieria-datos .cs-step-n::after { content: ""; flex: 0 0 56px; height: 2px; background: repeating-linear-gradient(90deg, var(--fi) 0 6px, transparent 6px 11px); }

/* ---------- Portada: mini pipeline con un paquete que viaja ---------- */
.fi-float {
  position: absolute; left: -22px; bottom: -26px; width: min(84%, 380px); padding: 12px 14px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: c-in .8s .5s cubic-bezier(.2, .8, .2, 1) both;
}
.fi-float small { font-family: var(--f-data); font-size: .7rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.fi-mini { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; position: relative; }
.fi-mini::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--fi-2) 0 5px, transparent 5px 9px); animation: fi-dash 1s linear infinite; }
.fi-mini li { position: relative; padding: 7px 2px; border-radius: 8px; text-align: center; font-size: .66rem; font-weight: 600; background: var(--bg); border: 1px solid var(--line); animation: fi-lit 5s infinite; }
.fi-mini li:nth-child(2) { animation-delay: 1s; } .fi-mini li:nth-child(3) { animation-delay: 2s; } .fi-mini li:nth-child(4) { animation-delay: 3s; } .fi-mini li:nth-child(5) { animation-delay: 4s; }
.fi-packet { position: absolute; left: 10%; bottom: 25px; width: 10px; height: 10px; border-radius: 3px; background: var(--fi-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fi-2) 25%, transparent); animation: fi-travel 5s linear infinite; }
@keyframes fi-dash { to { background-position: 18px 0; } }
@keyframes fi-lit { 0%, 16% { border-color: var(--fi-2); background: var(--fi-soft); } 24%, 100% { border-color: var(--line); background: var(--bg); } }
@keyframes fi-travel { from { left: 9%; } to { left: 88%; } }

/* ---------- Historia ---------- */
.fi-stage { font-size: .86rem; }
.c-fundamentos-ingenieria-datos .s2, .c-fundamentos-ingenieria-datos .s4 { display: block; }
.c-fundamentos-ingenieria-datos .s5 { padding: 7%; }
.c-fundamentos-ingenieria-datos .s1 { background: radial-gradient(color-mix(in srgb, var(--line) 80%, transparent) 1px, transparent 1px) 0 0 / 18px 18px; }

/* Escena 1: sistemas y números que no cierran */
.fi-srcs, .fi-reps { position: absolute; top: 6%; height: 76%; list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(4, 1fr); align-items: center; }
.fi-srcs { left: 6%; width: 24%; }
.fi-srcs li { padding: 8px 10px; border-radius: 10px; font-weight: 600; font-size: .8rem; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 18px -12px rgba(10, 30, 60, .35); }
.fi-reps { right: 6%; width: 30%; }
.fi-reps li { display: grid; padding: 7px 10px; border-radius: 10px; background: var(--bg); border: 1px dashed var(--line); }
.fi-reps small { font-size: .66rem; color: var(--muted); }
.fi-reps b { font-family: var(--f-data); font-size: .86rem; color: var(--bad); }
.fi-tangle { position: absolute; inset: 0; width: 100%; height: 100%; }
.fi-tangle path { fill: none; stroke: var(--bad); stroke-width: 1.6; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; opacity: .55; animation: fi-dash2 1.4s linear infinite; }
@keyframes fi-dash2 { to { stroke-dashoffset: -18; } }
.fi-q { position: absolute; left: 50%; bottom: 5%; translate: -50% 0; margin: 0; padding: 8px 14px; border-radius: 999px; white-space: nowrap; background: var(--bad); color: #fff; font-weight: 600; font-size: .82rem; --d: .4s; }
.cs-stage:not([data-step="1"]) .s1 .fi-srcs, .cs-stage:not([data-step="1"]) .s1 .fi-reps { opacity: 0; transform: translateY(16px); }
.cs-stage:not([data-step="1"]) .s1 .fi-q { opacity: 0; transform: scale(.85); }

/* Escena 2: ciclo de vida vertical, cada etapa se enciende */
.fi-cap { margin: 0 0 12px; font-family: var(--f-data); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fi-life { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 8px; position: relative; }
.fi-life::before { content: ""; position: absolute; left: 20px; top: 16px; bottom: 16px; width: 2px; background: repeating-linear-gradient(180deg, var(--fi-2) 0 5px, transparent 5px 10px); }
.fi-life li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 0 12px; align-items: center; padding: 6px 12px 6px 0; border-radius: 12px; opacity: .25; transform: translateX(-8px); transition: opacity .5s, transform .5s; }
.fi-life span { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-family: var(--f-data); font-weight: 700; color: var(--fi); background: var(--surface); border: 2px solid var(--fi-2); z-index: 1; }
.fi-life b { font-size: .95rem; }
.fi-life small { font-size: .74rem; color: var(--muted); }
.cs-stage[data-step="2"] .fi-life li { opacity: 1; transform: none; }
.cs-stage[data-step="2"] .fi-life li:nth-child(2) { transition-delay: .25s; } .cs-stage[data-step="2"] .fi-life li:nth-child(3) { transition-delay: .5s; }
.cs-stage[data-step="2"] .fi-life li:nth-child(4) { transition-delay: .75s; } .cs-stage[data-step="2"] .fi-life li:nth-child(5) { transition-delay: 1s; }
.cs-stage[data-step="2"] .fi-life li:nth-child(5) span { background: var(--fi-2); color: #fff; }

/* Escena 3: lago y depósito */
.c-fundamentos-ingenieria-datos .s3 { display: flex; align-items: center; gap: 2%; }
.fi-lake, .fi-wh { flex: 1; min-width: 0; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 26px -16px rgba(10, 30, 60, .4); }
.fi-lake header, .fi-wh header { display: grid; padding: 9px 12px; font-weight: 700; font-size: .86rem; border-bottom: 1px solid var(--line); }
.fi-lake header small, .fi-wh header small { font-weight: 500; font-size: .68rem; color: var(--muted); }
.fi-water { position: relative; height: 170px; background: linear-gradient(color-mix(in srgb, var(--teal) 10%, var(--surface)), color-mix(in srgb, var(--teal) 30%, var(--surface))); }
.fi-water::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: radial-gradient(12px 7px at 12px 0, var(--surface) 98%, transparent) 0 0 / 24px 12px repeat-x; }
.fi-water i { position: absolute; padding: 3px 7px; border-radius: 6px; font-style: normal; font-family: var(--f-data); font-size: .64rem; background: var(--surface); border: 1px solid var(--line); animation: fi-bob 4s ease-in-out infinite; }
.fi-water i:nth-child(1) { left: 8%; top: 22%; } .fi-water i:nth-child(2) { left: 40%; top: 40%; animation-delay: -1s; transform: rotate(-6deg); }
.fi-water i:nth-child(3) { left: 12%; top: 60%; animation-delay: -2s; } .fi-water i:nth-child(4) { left: 46%; top: 76%; animation-delay: -3s; } .fi-water i:nth-child(5) { left: 52%; top: 14%; animation-delay: -1.5s; }
@keyframes fi-bob { 50% { translate: 0 -5px; } }
.fi-arrow { flex: 0 0 34px; width: 34px; height: 18px; overflow: visible; --d: .2s; }
.fi-arrow path { fill: none; stroke: var(--fi-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fi-wh { --d: .35s; }
.fi-star { position: relative; height: 170px; }
.fi-star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fi-star path { stroke: var(--fi-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fi-star span { position: absolute; z-index: 1; padding: 5px 8px; border-radius: 7px; font-family: var(--f-data); font-size: .66rem; background: var(--bg); border: 1px solid var(--line); translate: -50% -50%; }
.fi-star .f { left: 50%; top: 50%; padding: 8px 12px; font-weight: 700; font-size: .74rem; color: #fff; background: var(--fi-2); border-color: transparent; }
.fi-star .d1 { left: 22%; top: 18%; } .fi-star .d2 { left: 78%; top: 18%; } .fi-star .d3 { left: 22%; top: 82%; } .fi-star .d4 { left: 78%; top: 82%; }
.cs-stage:not([data-step="3"]) .s3 > * { opacity: 0; transform: translateY(18px); }

/* Escena 4: on-premise y nube */
.c-fundamentos-ingenieria-datos .s4 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4%; grid-template-rows: none; align-items: center; align-content: center; }
.fi-onprem, .fi-cloud { display: grid; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.fi-onprem header, .fi-cloud header { font-weight: 700; font-size: .9rem; }
.fi-onprem small, .fi-cloud small { font-size: .72rem; color: var(--muted); line-height: 1.35; }
.fi-rack { display: grid; gap: 5px; padding: 8px; border-radius: 10px; background: var(--deep); }
.fi-rack i { height: 16px; border-radius: 4px; background: color-mix(in srgb, var(--on-deep) 12%, transparent); position: relative; }
.fi-rack i::after { content: ""; position: absolute; right: 8px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: #3ecf8e; animation: fi-led 1.2s steps(2) infinite; }
.fi-rack i:nth-child(2)::after { animation-delay: .3s; } .fi-rack i:nth-child(3)::after { animation-delay: .6s; } .fi-rack i:nth-child(4)::after { animation-delay: .9s; background: #f0a33a; }
@keyframes fi-led { 50% { opacity: .2; } }
.fi-cloud { --d: .2s; background: linear-gradient(160deg, var(--fi-soft), var(--surface) 70%); border-color: color-mix(in srgb, var(--fi) 35%, var(--line)); }
.fi-prov, .fi-svc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fi-prov li { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .8rem; color: #fff; background: var(--fi-2); }
.fi-svc li { padding: 5px 9px; border-radius: 8px; font-size: .72rem; background: var(--bg); border: 1px solid var(--line); }
.cs-stage:not([data-step="4"]) .s4 > * { opacity: 0; transform: translateY(18px); }

/* Escena 5: Git, Docker y Scrum */
.c-fundamentos-ingenieria-datos .s5 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 10px; }
.fi-git, .fi-dock, .fi-board { padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.fi-git header, .fi-dock header, .fi-board header { font-family: var(--f-data); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fi); margin-bottom: 8px; }
.fi-git ol { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 9px; position: relative; font-size: .74rem; }
.fi-git ol::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--fi-2); }
.fi-git li { position: relative; padding-left: 20px; line-height: 1.3; }
.fi-git li i { position: absolute; left: 0; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--fi-2); }
.fi-git li.br { padding-left: 34px; } .fi-git li.br i { left: 14px; border-color: var(--teal); }
.fi-git code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; color: var(--muted); margin-right: 4px; }
.fi-dock { --d: .15s; display: grid; align-content: start; }
.fi-box { display: grid; gap: 3px; padding: 6px; border-radius: 10px; border: 2px solid var(--teal); }
.fi-box span { padding: 4px 6px; border-radius: 6px; font-size: .66rem; text-align: center; background: color-mix(in srgb, var(--teal) 14%, var(--surface)); }
.fi-box span:first-child { font-weight: 700; color: #fff; background: var(--teal); }
.fi-dock small { margin-top: 6px; font-size: .68rem; color: var(--muted); }
.fi-board { grid-column: 1 / -1; --d: .3s; }
.fi-board .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fi-board .cols div { display: grid; gap: 5px; align-content: start; padding: 6px; border-radius: 9px; background: var(--bg); min-height: 64px; }
.fi-board small { font-size: .64rem; color: var(--muted); font-weight: 600; }
.fi-board i { padding: 5px 7px; border-radius: 6px; font-style: normal; font-size: .68rem; background: var(--surface); border-left: 3px solid var(--fi-2); box-shadow: 0 3px 8px -6px rgba(10, 30, 60, .5); }
.fi-board .cols div:last-child i { border-left-color: #1a9e5c; }
.cs-stage[data-step="5"] .fi-board .cols div:nth-child(2) i { animation: fi-move .9s .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fi-move { from { transform: translateX(-110%); opacity: 0; } }
.cs-stage:not([data-step="5"]) .s5 > * { opacity: 0; transform: translateY(16px); }

/* ---------- Programa ---------- */
.c-fundamentos-ingenieria-datos .unit-n { font-family: var(--f-data); letter-spacing: .2em; color: var(--fi); }
.c-fundamentos-ingenieria-datos .unit li::before { background: var(--fi-2); border-radius: 2px; }
.fi-unit-main { background: var(--fi-soft) !important; border-color: color-mix(in srgb, var(--fi) 30%, var(--line)); }
.fi-unit-main ul { font-size: 1rem; }
.c-fundamentos-ingenieria-datos .cs-path-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-fundamentos-ingenieria-datos .road-line i { background: linear-gradient(90deg, var(--fi-2), var(--teal)); }

@media (max-width: 900px) {
  .fi-float { left: -10px; bottom: -22px; width: 86%; }
  .c-fundamentos-ingenieria-datos .cs-path-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .fi-stage { font-size: .76rem; }
  .fi-mini li { font-size: .56rem; padding: 6px 1px; }
  .fi-srcs li { font-size: .64rem; padding: 5px 6px; }
  .fi-reps { width: 33%; } .fi-reps li { padding: 4px 6px; } .fi-reps small { font-size: .54rem; } .fi-reps b { font-size: .68rem; }
  .fi-q { font-size: .68rem; padding: 6px 10px; }
  .fi-cap { margin-bottom: 6px; font-size: .6rem; }
  .fi-life { gap: 2px; } .fi-life::before { left: 15px; }
  .fi-life li { grid-template-columns: 24px 1fr; gap: 0 8px; padding: 2px 0; }
  .fi-life span { width: 24px; height: 24px; border-radius: 7px; font-size: .7rem; } .fi-life b { font-size: .74rem; } .fi-life small { font-size: .6rem; }
  .fi-lake header, .fi-wh header { padding: 6px 8px; font-size: .7rem; } .fi-lake header small, .fi-wh header small { font-size: .56rem; }
  .fi-water, .fi-star { height: 110px; } .fi-water i { font-size: .52rem; padding: 2px 4px; } .fi-star span { font-size: .52rem; padding: 3px 5px; } .fi-star .f { font-size: .6rem; padding: 5px 7px; }
  .fi-onprem, .fi-cloud { padding: 9px; gap: 6px; } .fi-onprem header, .fi-cloud header { font-size: .74rem; }
  .fi-rack i { height: 11px; } .fi-rack i::after { top: 3px; width: 5px; height: 5px; }
  .fi-prov li { font-size: .64rem; padding: 4px 8px; } .fi-svc li { font-size: .56rem; padding: 3px 6px; }
  .fi-onprem small, .fi-cloud small { font-size: .58rem; }
  .c-fundamentos-ingenieria-datos .s5 { gap: 6px; }
  .fi-git, .fi-dock, .fi-board { padding: 7px 8px; } .fi-git header, .fi-dock header, .fi-board header { font-size: .54rem; margin-bottom: 5px; }
  .fi-git ol { font-size: .58rem; gap: 5px; } .fi-git code { display: none; }
  .fi-box span { font-size: .52rem; padding: 2px 4px; } .fi-dock small { font-size: .54rem; }
  .fi-board .cols div { min-height: 40px; padding: 4px; gap: 3px; } .fi-board small { font-size: .52rem; } .fi-board i { font-size: .54rem; padding: 3px 5px; }
  .c-fundamentos-ingenieria-datos .cs-path-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .fi-float, .fi-mini::before, .fi-mini li, .fi-packet, .fi-tangle path, .fi-water i, .fi-rack i::after, .fi-board i { animation: none !important; }
  .fi-packet { display: none; }
  .fi-life li { transition: none !important; }
}