/* Página de curso: Diploma en Data Science. Identidad propia: una línea de seis estaciones
   (una por materia) que recorre un mismo proyecto, del dato crudo al modelo en producción. */
.c-diploma-data-science {
  --dds: color-mix(in srgb, var(--accent) 70%, #6a4fd8); --dds-py: #f2c14e; --dds-risk: #e0603f;
  --dds-ed: #0f1d2b; --dds-ed2: #16283a; --dds-ink: #d7e6f2; --dds-dim: #7f97ab; --dds-kw: #5fd4c4;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
:root[data-theme="dark"] .c-diploma-data-science { --dds: color-mix(in srgb, var(--accent) 70%, #a58cff); --dds-risk: #f08a6c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-diploma-data-science { --dds: color-mix(in srgb, var(--accent) 70%, #a58cff); --dds-risk: #f08a6c; } }

.c-diploma-data-science .c-hero h1 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem); max-width: 18ch; }
.c-diploma-data-science .c-hero h1 em, .c-diploma-data-science h2 em { color: var(--dds); }
.c-diploma-data-science .cs-step-n { display: inline-flex; justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: .74rem; letter-spacing: .04em; color: var(--on-accent); background: var(--dds); }
.c-diploma-data-science .gain-list span { -webkit-text-stroke-color: var(--dds); }

/* ---------- Portada ---------- */
.dds-line { left: -22px; top: -18px; gap: 6px; animation: c-in .7s .5s cubic-bezier(.2, .8, .2, 1) both; }
.dds-line ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; }
.dds-line li { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-family: var(--f-data); font-size: .62rem; color: var(--muted); background: var(--surface); border: 2px solid var(--line); animation: dds-lit 6s ease-in-out infinite; }
.dds-line li + li { margin-left: 12px; }
.dds-line li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 14px; height: 2px; background: var(--line); }
.dds-line li:nth-child(2) { animation-delay: .5s; } .dds-line li:nth-child(3) { animation-delay: 1s; } .dds-line li:nth-child(4) { animation-delay: 1.5s; } .dds-line li:nth-child(5) { animation-delay: 2s; } .dds-line li:nth-child(6) { animation-delay: 2.5s; }
@keyframes dds-lit { 0%, 6% { background: var(--surface); color: var(--muted); border-color: var(--line); } 12%, 80% { background: var(--dds); color: #fff; border-color: var(--dds); } 100% { background: var(--surface); color: var(--muted); border-color: var(--line); } }
.dds-pred { right: -16px; bottom: 14%; animation: c-in .7s .8s cubic-bezier(.2, .8, .2, 1) both, c-bob 5s 1.6s ease-in-out infinite; }
.dds-pred strong { color: var(--dds-risk); font-family: var(--mono); }

/* ---------- Historia ---------- */
.c-diploma-data-science .s2, .c-diploma-data-science .s4 { display: block; }
.c-diploma-data-science .s5 { padding: 7%; }
.c-diploma-data-science .s1.scene { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--dds) 12%, transparent), transparent 60%); }
.dds-stage { font-size: .88rem; }
.dds-chip { position: absolute; left: 7%; top: 6%; z-index: 2; display: inline-flex; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 600; color: var(--dds); background: color-mix(in srgb, var(--dds) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--dds) 35%, var(--line)); }
.dds-chip--dark { color: #d8ccff; background: rgba(138, 92, 246, .18); border-color: rgba(185, 160, 255, .35); }
.dds-chip--dark .ai-spark { color: #c4b0ff; }

/* Escena 1 */
.dds-ask { position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: 56%; padding: 16px 18px; border-radius: 16px; text-align: center; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: #fff; background: var(--dds); box-shadow: var(--shadow); --d: .1s; }
.dds-src { position: absolute; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 20px -14px rgba(16, 42, 67, .5); font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.dds-src b { display: grid; place-items: center; min-width: 30px; height: 22px; padding: 0 4px; border-radius: 6px; font-size: .6rem; color: #fff; background: var(--accent); }
.dds-src.a { left: 6%; top: 18%; rotate: -3deg; --d: .2s; }
.dds-src.b { right: 6%; top: 24%; rotate: 2deg; --d: .3s; } .dds-src.b b { background: var(--muted); }
.dds-src.c { left: 9%; bottom: 13%; rotate: 2deg; --d: .4s; } .dds-src.c b { background: #1d7044; }
.dds-src.d { right: 7%; bottom: 9%; rotate: -2deg; --d: .5s; } .dds-src.d b { background: #b5651d; }
.cs-stage:not([data-step="1"]) .s1 .dds-src { opacity: 0; transform: translateY(14px); }
.cs-stage:not([data-step="1"]) .s1 .dds-ask { opacity: 0; transform: scale(.94); }

/* Escena 2: SQL */
.c-diploma-data-science .s2.scene { background: var(--dds-ed); color: var(--dds-ink); }
.dds-sql { position: absolute; left: 7%; right: 7%; top: 18%; margin: 0; font-family: var(--mono); font-size: .76rem; line-height: 1.65; white-space: pre-wrap; color: var(--dds-ink); }
.dds-sql b { color: var(--dds-kw); font-weight: 600; }
.dds-rows { position: absolute; left: 7%; right: 7%; bottom: 7%; margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--dds-ed2); font-family: var(--mono); font-size: .76rem; color: #7ee2a8; --d: .4s; }
.cs-stage:not([data-step="2"]) .s2 .dds-sql { opacity: 0; transform: translateY(-10px); }
.cs-stage:not([data-step="2"]) .s2 .dds-rows { opacity: 0; transform: translateY(12px); }

/* Escena 3: notebook */
.dds-cell { position: absolute; left: 7%; right: 7%; top: 17%; display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--dds-py); font-family: var(--mono); font-size: .72rem; line-height: 1.5; }
.dds-in { color: var(--muted); }
.dds-cell code { white-space: pre-wrap; color: var(--ink); }
.dds-cell u { text-decoration: none; color: #b5651d; }
.dds-df { position: absolute; left: 7%; right: 7%; bottom: 7%; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); font-family: var(--mono); font-size: .72rem; --d: .3s; }
.dds-df .r { display: grid; grid-template-columns: .4fr 1fr 1fr 1.4fr; padding: 6px 12px; border-top: 1px solid var(--line); }
.dds-df .r.h { border-top: 0; font-weight: 700; background: var(--sky); }
.dds-df .r:nth-child(odd):not(.h) { background: color-mix(in srgb, var(--sky) 45%, var(--surface)); }
.dds-df s { color: var(--dds-risk); text-decoration: line-through; margin-right: 6px; transition: opacity .4s 1s; }
.dds-df em { font-style: normal; font-weight: 700; color: #1a9e5c; opacity: 0; transition: opacity .4s 1.2s; }
.cs-stage[data-step="3"] .dds-df em { opacity: 1; }
.cs-stage[data-step="3"] .dds-df s { opacity: .55; }
.cs-stage:not([data-step="3"]) .s3 .dds-cell, .cs-stage:not([data-step="3"]) .s3 .dds-df { opacity: 0; transform: translateY(14px); }

/* Escena 4: tablero interactivo */
.dds-dash { position: absolute; left: 7%; right: 7%; top: 17%; bottom: 7%; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); --d: .1s; }
.dds-dash header { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 600; }
.dds-sel { padding: 3px 9px; border-radius: 8px; font-size: .7rem; border: 1px solid var(--line); background: var(--bg); color: var(--muted); }
.dds-scatter { width: 100%; height: 100%; min-height: 0; overflow: visible; }
.dds-scatter .ax { fill: none; stroke: var(--line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dds-scatter circle { transition: opacity .4s, transform .5s; transform-box: fill-box; transform-origin: center; }
.dds-scatter .ok circle { fill: color-mix(in srgb, var(--accent) 65%, var(--surface)); }
.dds-scatter .risk circle { fill: var(--dds-risk); transition-delay: .4s; }
.dds-scatter .ring { fill: none; stroke: var(--dds-risk); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; transition: opacity .5s .9s; }
.cs-stage:not([data-step="4"]) .dds-scatter circle { opacity: 0; transform: scale(0); }
.cs-stage:not([data-step="4"]) .dds-scatter .ring { opacity: 0; }
.dds-insight { margin: 0; font-size: .78rem; color: var(--dds-risk); font-weight: 600; }

/* Escena 5: modelo */
.dds-model { position: absolute; left: 7%; right: 7%; top: 17%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); font-size: .8rem; }
.dds-model .r { display: grid; grid-template-columns: .8fr 2fr; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); font-family: var(--mono); }
.dds-model .r.h { border-top: 0; font-family: var(--f-data); font-size: .7rem; color: var(--muted); background: var(--sky); }
.dds-model .p { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.dds-model .p i { display: block; height: 10px; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, var(--teal), var(--dds-risk)); transform-origin: left; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.dds-model .r:nth-child(3) .p i { transition-delay: .1s; } .dds-model .r:nth-child(4) .p i { transition-delay: .2s; } .dds-model .r:nth-child(5) .p i { transition-delay: .3s; }
.cs-stage:not([data-step="5"]) .dds-model .p i { transform: scaleX(0); }
.dds-prod { position: absolute; left: 7%; bottom: 8%; padding: 6px 12px; border-radius: 999px; font-size: .74rem; font-weight: 600; color: #1a9e5c; background: color-mix(in srgb, #1a9e5c 14%, var(--surface)); --d: .5s; }
.dds-memo { position: absolute; right: 7%; bottom: 7%; max-width: 50%; padding: 9px 12px; border-radius: 12px; font-size: .78rem; line-height: 1.35; color: var(--on-deep); background: var(--deep); --d: .7s; }
.dds-memo b { color: var(--on-deep-accent); }
.cs-stage:not([data-step="5"]) .s5 .dds-prod, .cs-stage:not([data-step="5"]) .s5 .dds-memo, .cs-stage:not([data-step="5"]) .s5 .dds-model { opacity: 0; transform: translateY(12px); }

/* ---------- Programa: tarjetas de materia ---------- */
.dds-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; counter-reset: m; }
.dds-subj { position: relative; padding-top: 26px; border-top: 4px solid var(--dds); }
.dds-subj .unit-n { font-family: var(--f-data); text-transform: none; letter-spacing: .02em; color: var(--dds); }
.dds-subj h3 a { color: var(--ink); text-decoration: none; }
.dds-subj h3 a:hover { color: var(--dds); }
.dds-subj p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.5; }
.dds-more { justify-self: start; margin-top: 4px; font-size: .88rem; font-weight: 600; color: var(--dds); text-decoration: none; }
.dds-more:hover { text-decoration: underline; }
.dds-subj--ia { grid-row: auto; background: var(--dds-ed); border-color: transparent; border-top-color: #b9a0ff; color: var(--dds-ink); }
.dds-subj--ia h3 a { color: #fff; } .dds-subj--ia p { color: var(--dds-ink); font-size: 1rem; }
.dds-subj--ia .unit-n, .dds-subj--ia .dds-more { color: #c4b0ff; }
.c-diploma-data-science .dds-subj--ia .ai-tag { color: #3b2a7a; background: #e4dcff; }
:root[data-theme="dark"] .dds-subj--ia { background: #101a33; border: 1px solid color-mix(in srgb, #8a5cf6 45%, transparent); border-top: 4px solid #b9a0ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dds-subj--ia { background: #101a33; border: 1px solid color-mix(in srgb, #8a5cf6 45%, transparent); border-top: 4px solid #b9a0ff; } }
.dds-seg { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 6px; }
.dds-seg i { height: 10px; border-radius: 5px; background: var(--line); transition: background-color .3s; }
.road-classes.on .dds-seg i { background: var(--dds); }
.road-classes.on .dds-seg i:nth-child(n+3) { transition-delay: .15s; } .road-classes.on .dds-seg i:nth-child(n+5) { transition-delay: .3s; }

.dds-sum { grid-column: span 2; display: grid; grid-template-columns: repeat(3, auto 1fr); align-items: baseline; gap: 6px 10px; padding: 22px; border-radius: 20px; background: var(--deep); color: var(--on-deep); align-content: center; }
.dds-sum b { font-family: var(--f-display); font-size: 2.2rem; line-height: 1; color: var(--on-deep-accent); }
.dds-sum span { font-size: .9rem; color: color-mix(in srgb, var(--on-deep) 78%, transparent); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) { .dds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dds-sum { grid-column: auto; grid-template-columns: auto 1fr; } }
@media (max-width: 900px) { .dds-line { left: -8px; } .dds-pred { right: -6px; } }
@media (max-width: 560px) {
  .dds-stage { font-size: .74rem; }
  .dds-line li { width: 28px; height: 28px; font-size: .54rem; } .dds-line li + li { margin-left: 8px; } .dds-line li + li::before { width: 10px; }
  .dds-chip { font-size: .58rem; padding: 3px 8px; top: 5%; }
  .dds-ask { width: 64%; font-size: .86rem; padding: 10px 12px; }
  .dds-src { font-size: .56rem; padding: 4px 6px; gap: 5px; } .dds-src b { min-width: 24px; height: 18px; font-size: .5rem; }
  .dds-src.a { top: 16%; left: 4%; } .dds-src.b { right: 4%; top: 24%; } .dds-src.c { left: 4%; bottom: 10%; } .dds-src.d { right: 4%; bottom: 5%; }
  .dds-sql { font-size: .54rem; line-height: 1.5; top: 16%; } .dds-rows { font-size: .6rem; padding: 6px 9px; }
  .dds-cell { font-size: .54rem; padding: 6px 8px; gap: 6px; top: 15%; } .dds-df { font-size: .56rem; } .dds-df .r { padding: 3px 8px; }
  .dds-dash { padding: 8px 10px; top: 15%; } .dds-dash header { font-size: .62rem; } .dds-sel { font-size: .56rem; } .dds-insight { font-size: .62rem; }
  .dds-model { font-size: .62rem; top: 15%; } .dds-model .r { padding: 4px 9px; } .dds-model .r.h { font-size: .56rem; }
  .dds-prod { font-size: .58rem; padding: 4px 8px; bottom: 24%; } .dds-memo { font-size: .6rem; padding: 6px 9px; max-width: 54%; bottom: 5%; }
  .dds-grid { grid-template-columns: minmax(0, 1fr); } .dds-sum { grid-template-columns: repeat(3, auto 1fr); } .dds-sum b { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dds-line, .dds-line li, .dds-pred { animation: none !important; }
  .dds-scatter circle, .dds-scatter .ring, .dds-model .p i, .dds-df s, .dds-df em, .dds-seg i { transition: none !important; }
}