/* Página de curso: Software estadístico R Avanzado (solo empresas). Identidad propia: los
   hexágonos de los paquetes (tidyverse, ggplot2, rmarkdown, shiny) y el pipe |> como firma. */
.c-software-r-avanzado {
  --ra: #1f8f84; --ra2: #3a6fc4; --ra3: #c3702b; --ra4: #2a5b9a;
  --ra-soft: color-mix(in srgb, #1f8f84 12%, var(--surface));
  --ra-ed: #13202e; --ra-ink: #d9e6f0; --ra-dim: #8aa0b4;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
:root[data-theme="dark"] .c-software-r-avanzado { --ra: #45c2b4; --ra2: #7aa8ef; --ra3: #eba066; --ra4: #6f9be0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-software-r-avanzado { --ra: #45c2b4; --ra2: #7aa8ef; --ra3: #eba066; --ra4: #6f9be0; } }

.c-software-r-avanzado .c-hero h1 { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.6rem); max-width: 17ch; }
.c-software-r-avanzado .c-hero h1 em, .c-software-r-avanzado h2 em { color: var(--ra); }
.c-software-r-avanzado .cs-step-n { font-family: var(--mono); font-size: .9rem; color: var(--ra); letter-spacing: 0; }
.c-software-r-avanzado .cs-step-n::after { content: " |>"; color: var(--faint); }
.c-software-r-avanzado .gain-list span { -webkit-text-stroke-color: var(--ra); }

.c-solo-emp { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--ink); background: var(--ra-soft); border: 1px solid color-mix(in srgb, var(--ra) 40%, var(--line)); }
.c-solo-emp::before { content: ""; width: 12px; height: 12px; clip-path: var(--hex); background: var(--ra); }

/* ---------- Portada: hexágonos de paquetes ---------- */
.ra-hexes { position: absolute; right: -26px; bottom: -34px; width: 190px; height: 170px; }
.hx { position: absolute; display: grid; place-items: center; width: 86px; height: 76px; clip-path: var(--hex); font-family: var(--mono); font-size: .68rem; font-weight: 700; color: #fff; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .25)); animation: c-in .6s cubic-bezier(.2, .8, .2, 1) both, ra-float 6s ease-in-out infinite; }
.hx.h1 { left: 0; top: 40px; background: var(--ra); animation-delay: .5s, 1.2s; }
.hx.h2 { left: 66px; top: 2px; background: var(--ra2); animation-delay: .65s, 1.6s; }
.hx.h3 { left: 66px; top: 80px; background: var(--ra3); animation-delay: .8s, 2s; }
.hx.h4 { left: 132px; top: 40px; background: var(--ra4); animation-delay: .95s, 2.4s; }
@keyframes ra-float { 50% { transform: translateY(-5px); } }

/* ---------- Historia ---------- */
.c-software-r-avanzado .s2, .c-software-r-avanzado .s4 { display: block; }
.c-software-r-avanzado .s5 { padding: 7%; }
.c-software-r-avanzado .s1.scene { background: radial-gradient(circle at 20% 90%, color-mix(in srgb, var(--bad) 10%, transparent), transparent 55%); }
.c-software-r-avanzado .s2.scene, .c-software-r-avanzado .s4.scene { background: var(--ra-ed); color: var(--ra-ink); }
.ra-stage { font-size: .88rem; }
.ra-pkg { position: absolute; right: 6%; top: 6%; z-index: 2; display: grid; place-items: center; width: 74px; height: 64px; clip-path: var(--hex); font-family: var(--mono); font-size: .62rem; font-weight: 700; color: #fff; background: var(--ra); transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .4s; }
.s3 .ra-pkg { background: var(--ra2); } .s4 .ra-pkg { background: var(--ra3); } .s5 .ra-pkg { background: var(--ra4); }
.cs-stage:not([data-step="2"]) .s2 .ra-pkg, .cs-stage:not([data-step="3"]) .s3 .ra-pkg, .cs-stage:not([data-step="4"]) .s4 .ra-pkg, .cs-stage:not([data-step="5"]) .s5 .ra-pkg { transform: rotate(-60deg) scale(.4); opacity: 0; }

/* Escena 1 */
.ra-doc { position: absolute; left: 7%; top: 9%; width: 44%; height: 76%; display: grid; align-content: start; gap: 9px; padding: 0 0 14px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); rotate: -2deg; overflow: hidden; }
.ra-doc header { padding: 7px 10px; font-size: .64rem; font-weight: 600; color: #fff; background: #2b579a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-doc i { height: 7px; margin: 0 12px; border-radius: 3px; background: var(--line); }
.ra-doc i.s { width: 55%; }
.ra-pasted { margin: 2px 12px; height: 70px; display: grid; place-items: center; border: 2px dashed var(--bad); border-radius: 6px; font-size: .68rem; color: var(--bad); rotate: 3deg; }
.ra-todo { position: absolute; right: 7%; top: 14%; width: 40%; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .84rem; }
.ra-todo li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); transition: opacity .4s, transform .5s; }
.ra-todo li::before { content: ""; flex: none; width: 12px; height: 12px; border: 2px solid var(--muted); border-radius: 3px; }
.ra-todo li:nth-child(2) { transition-delay: .08s; } .ra-todo li:nth-child(3) { transition-delay: .16s; } .ra-todo li:nth-child(4) { transition-delay: .24s; } .ra-todo li:nth-child(5) { transition-delay: .32s; }
.ra-cal { position: absolute; right: 7%; bottom: 8%; padding: 7px 13px; border-radius: 999px; font-weight: 600; font-size: .8rem; color: #fff; background: var(--bad); --d: .5s; }
.cs-stage:not([data-step="1"]) .ra-todo li { opacity: 0; transform: translateX(16px); }
.cs-stage:not([data-step="1"]) .ra-doc, .cs-stage:not([data-step="1"]) .ra-cal { opacity: 0; transform: translateY(16px); }

/* Escena 2 */
.ra-code { margin: 0; font-family: var(--mono); font-size: .84rem; line-height: 1.65; white-space: pre; color: var(--ra-ink); }
.ra-code b { color: #f0b86a; font-weight: 700; }
.ra-tib { position: absolute; left: 7%; right: 7%; bottom: 7%; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #fff 6%, var(--ra-ed)); font-family: var(--mono); font-size: .78rem; --d: .35s; }
.ra-tib .cap { margin: 0 0 4px; color: var(--ra-dim); }
.ra-tib .r { display: grid; grid-template-columns: 1fr 1.2fr 1fr; padding: 3px 0; font-variant-numeric: tabular-nums; }
.ra-tib .r.h { color: var(--ra-dim); border-bottom: 1px dashed rgba(255, 255, 255, .15); }
.ra-tib .r:not(.h) span:nth-child(2) { color: #7fe0d2; }
.cs-stage:not([data-step="2"]) .s2 .ra-code { opacity: 0; transform: translateY(-10px); }
.cs-stage:not([data-step="2"]) .s2 .ra-tib { opacity: 0; transform: translateY(14px); }

/* Escena 3: capas */
.ra-layers { position: absolute; left: 7%; top: 7%; width: 62%; list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-family: var(--mono); font-size: .74rem; }
.ra-layers li { padding: 5px 9px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ra2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s, transform .5s; }
.ra-layers li:nth-child(2) { transition-delay: .35s; } .ra-layers li:nth-child(3) { transition-delay: .7s; } .ra-layers li:nth-child(4) { transition-delay: 1.05s; }
.cs-stage:not([data-step="3"]) .ra-layers li { opacity: 0; transform: translateX(-12px); }
.ra-plot { position: absolute; left: 7%; right: 7%; bottom: 6%; width: 86%; height: 52%; overflow: visible; }
.ra-plot .grid path { stroke: var(--line); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; transition: opacity .4s 1.05s; }
.ra-plot .l1, .ra-plot .l2 { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1s .35s ease; }
.ra-plot .l1 { stroke: var(--ra2); } .ra-plot .l2 { stroke: var(--ra3); }
.ra-plot .pts circle { fill: var(--ra2); transition: opacity .4s .7s; }
.cs-stage[data-step="3"] .ra-plot .l1, .cs-stage[data-step="3"] .ra-plot .l2 { stroke-dashoffset: 0; }
.cs-stage:not([data-step="3"]) .ra-plot .pts circle, .cs-stage:not([data-step="3"]) .ra-plot .grid path { opacity: 0; }

/* Escena 4: Rmd a informe */
.ra-rmd { position: absolute; left: 7%; top: 7%; width: 44%; margin: 0; font-family: var(--mono); font-size: .72rem; line-height: 1.55; white-space: pre-wrap; color: var(--ra-ink); }
.ra-rmd em { font-style: normal; color: var(--ra-dim); }
.ra-rmd b { color: #f0b86a; }
.ra-knit { position: absolute; left: 7%; bottom: 8%; padding: 6px 12px; border-radius: 8px; font-family: var(--mono); font-size: .76rem; font-weight: 700; color: var(--ra-ed); background: #f0b86a; --d: .3s; }
.ra-report { position: absolute; right: 6%; top: 26%; bottom: 7%; width: 42%; display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 12px 14px; border-radius: 8px; background: #fff; color: #1d2b3a; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); --d: .55s; }
.ra-report h4 { margin: 0; font-size: .95rem; }
.ra-report p { margin: 0; font-size: .74rem; }
.ra-report small { font-size: .66rem; color: #1a7f5a; font-weight: 600; }
.ra-mini { display: flex; align-items: flex-end; gap: 6px; min-height: 0; border-bottom: 1px solid #d6dee6; }
.ra-mini i { flex: 1; height: var(--h); background: var(--ra2); border-radius: 3px 3px 0 0; }
.cs-stage:not([data-step="4"]) .s4 .ra-rmd, .cs-stage:not([data-step="4"]) .s4 .ra-knit { opacity: 0; transform: translateY(12px); }
.cs-stage:not([data-step="4"]) .s4 .ra-report { opacity: 0; transform: translateX(24px) rotate(3deg); }

/* Escena 5: Shiny */
.ra-app { position: absolute; left: 7%; right: 7%; top: 24%; bottom: 14%; display: grid; grid-template-rows: auto 1fr; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); --d: .15s; }
.ra-app-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: color-mix(in srgb, var(--line) 55%, var(--surface)); font-size: .66rem; color: var(--muted); }
.ra-app-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.ra-app-bar span { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--surface); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-app-body { display: grid; grid-template-columns: 34% 1fr; min-height: 0; }
.ra-app-body aside { display: grid; align-content: start; gap: 5px; padding: 12px; border-right: 1px solid var(--line); background: var(--bg); font-size: .7rem; }
.ra-app-body label { color: var(--muted); font-weight: 600; }
.ra-dd { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 6px; }
.ra-slider { position: relative; height: 4px; margin: 8px 2px; border-radius: 2px; background: var(--line); }
.ra-slider i { position: absolute; top: -5px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--ra4); animation: ra-slide 4s ease-in-out infinite; }
@keyframes ra-slide { 0%, 100% { left: 10%; } 50% { left: 75%; } }
.ra-app-plot { display: flex; align-items: flex-end; gap: 6%; padding: 14px 14px 10px; min-height: 0; }
.ra-app-plot i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--ra4) 75%, var(--surface)); transform-origin: bottom; animation: ra-react 4s ease-in-out infinite; }
.ra-app-plot i:nth-child(2n) { animation-delay: .2s; } .ra-app-plot i:nth-child(3n) { animation-delay: .4s; }
@keyframes ra-react { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.7); } }
.ra-live { position: absolute; left: 7%; bottom: 5%; padding: 5px 12px; border-radius: 999px; font-size: .74rem; font-weight: 600; color: #1a9e5c; background: color-mix(in srgb, #1a9e5c 14%, var(--surface)); --d: .45s; }
.cs-stage:not([data-step="5"]) .s5 .ra-app, .cs-stage:not([data-step="5"]) .s5 .ra-live { opacity: 0; transform: translateY(14px); }

:root[data-theme="dark"] .c-software-r-avanzado :is(.hx, .ra-pkg, .ra-hx) { color: #0b2236; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-software-r-avanzado :is(.hx, .ra-pkg, .ra-hx) { color: #0b2236; } }

/* ---------- Programa ---------- */
.c-software-r-avanzado .unit-n { display: flex; align-items: center; gap: 10px; font-family: var(--mono); text-transform: none; letter-spacing: 0; color: var(--ra); }
.ra-hx { display: grid; place-items: center; width: 62px; height: 54px; clip-path: var(--hex); font-style: normal; font-size: .54rem; font-weight: 700; color: #fff; background: var(--ra); }
.unit:nth-child(2) .ra-hx { background: var(--ra2); } .unit:nth-child(3) .ra-hx { background: var(--ra3); } .unit:nth-child(4) .ra-hx { background: var(--ra4); }
.c-software-r-avanzado .unit li::before { background: var(--ra); }
.ra-dots { grid-template-columns: repeat(8, 1fr); max-width: 240px; gap: 6px; }
.ra-dots i { clip-path: var(--hex); border-radius: 0 !important; }
.c-software-r-avanzado .road-classes.on .ra-dots i { background: var(--ra); }
.ra-link { color: var(--on-deep-accent); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) { .ra-hexes { right: -6px; } }
@media (max-width: 560px) {
  .ra-stage { font-size: .72rem; }
  .ra-hexes { transform: scale(.78); transform-origin: right bottom; right: -4px; bottom: -40px; }
  .ra-pkg { width: 54px; height: 47px; font-size: .48rem; top: 5%; right: 4%; }
  .ra-doc { width: 46%; gap: 6px; } .ra-doc header { font-size: .5rem; padding: 4px 7px; } .ra-pasted { height: 40px; font-size: .54rem; }
  .ra-todo { width: 44%; gap: 4px; font-size: .6rem; top: 10%; } .ra-todo li { padding: 4px 6px; gap: 5px; } .ra-todo li::before { width: 9px; height: 9px; }
  .ra-cal { font-size: .62rem; padding: 4px 9px; bottom: 6%; }
  .ra-code { font-size: .58rem; line-height: 1.5; } .ra-tib { font-size: .54rem; padding: 5px 8px; } .ra-tib .r { padding: 1px 0; }
  .ra-layers { font-size: .54rem; width: 68%; gap: 3px; } .ra-layers li { padding: 3px 6px; }
  .ra-plot { height: 38%; }
  .ra-rmd { font-size: .52rem; width: 48%; line-height: 1.45; } .ra-knit { font-size: .58rem; padding: 4px 8px; }
  .ra-report { width: 42%; padding: 7px 8px; top: 30%; } .ra-report h4 { font-size: .7rem; } .ra-report p { font-size: .56rem; } .ra-report small { font-size: .5rem; }
  .ra-app { top: 26%; bottom: 15%; } .ra-app-bar { font-size: .52rem; padding: 4px 7px; } .ra-app-body aside { padding: 7px; font-size: .54rem; gap: 3px; } .ra-dd { padding: 3px 5px; }
  .ra-live { font-size: .6rem; padding: 4px 9px; bottom: 4%; }
  .ra-hx { width: 50px; height: 44px; font-size: .46rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hx, .ra-slider i, .ra-app-plot i { animation: none !important; }
  .ra-plot .l1, .ra-plot .l2, .ra-layers li, .ra-todo li, .ra-pkg { transition: none !important; }
}