/* Página de curso: Tutoría Excel. Identidad propia: un proyecto que avanza semana a semana
   (pizarra, notas adhesivas, tablero de tareas y presentación final). Acento coral cálido.
   Detalle tipográfico: los pasos se rotulan como etiquetas de reunión en letra redondeada, levemente inclinadas. */
.c-tutoria-excel {
  --xt: #b8461f; --xt-soft: #fbe6dc; --xt-card: #ffffff; --xt-line: #e3d6cf; --xt-note: #fff1a8; --xt-note-ink: #4a3b00; --xt-ok: #1a9e5c; --xt-board: #fdfbf8;
}
:root[data-theme="dark"] .c-tutoria-excel { --xt: #f08a63; --xt-soft: #3a2118; --xt-card: #0f1d2a; --xt-line: #2c4258; --xt-ok: #4cc38a; --xt-board: #13212f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-tutoria-excel { --xt: #f08a63; --xt-soft: #3a2118; --xt-card: #0f1d2a; --xt-line: #2c4258; --xt-ok: #4cc38a; --xt-board: #13212f; }
}

.c-tutoria-excel .c-hero h1 { font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.5rem); max-width: 18ch; }
.c-tutoria-excel .c-hero h1 em, .c-tutoria-excel h2 em { color: var(--xt); }
.c-tutoria-excel .c-btn-big { background: var(--xt); border-color: var(--xt); }
:root[data-theme="dark"] .c-tutoria-excel .c-btn-big { color: #2a0f05; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-tutoria-excel .c-btn-big { color: #2a0f05; } }
.c-tutoria-excel .c-solo-emp { display: inline-block; margin: 0; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--xt); background: var(--xt-soft); }
.c-tutoria-excel .cs-step-n {
  justify-self: start; padding: 4px 12px; border-radius: 4px; font-family: var(--f-data); font-size: .86rem; letter-spacing: .02em;
  color: var(--xt-note-ink); background: var(--xt-note); transform: rotate(-2deg); box-shadow: 0 6px 12px -8px rgba(0,0,0,.4);
}

/* ---------- Portada: tablero del proyecto ---------- */
.xt-cover { aspect-ratio: 3 / 2; display: grid; grid-template-rows: auto auto 1fr; gap: 6%; padding: 6% 7%; background: var(--xt-board); border: 1px solid var(--xt-line); container-type: inline-size; }
.xt-cover-head { display: grid; gap: 2px; }
.xt-cover-head span { font-size: clamp(.7rem, 2.6cqw, .9rem); font-weight: 600; color: var(--xt); letter-spacing: .06em; text-transform: uppercase; }
.xt-cover-head b { font-family: var(--f-display); font-size: clamp(1rem, 4.2cqw, 1.5rem); line-height: 1.15; }
.xt-weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); position: relative; }
.xt-weeks::before { content: ""; position: absolute; left: 7%; right: 7%; top: calc(1.1em + 2px); height: 3px; background: var(--xt-line); }
.xt-weeks li { position: relative; display: grid; justify-items: center; gap: 4px; font-size: clamp(.55rem, 2cqw, .74rem); color: var(--muted); }
.xt-weeks b { width: 2.2em; height: 2.2em; display: grid; place-items: center; border-radius: 50%; background: var(--xt-card); border: 2px solid var(--xt-line); font-size: 1.1em; }
.xt-weeks .done b { background: var(--xt); border-color: var(--xt); color: #fff; }
.xt-weeks .now b { border-color: var(--xt); color: var(--xt); animation: xt-pulse 1.8s ease-in-out infinite; }
@keyframes xt-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--xt) 25%, transparent); } }
.xt-cover-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; min-height: 0; }
.xt-cover-cols div { display: grid; align-content: start; gap: 6px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--xt-line) 40%, transparent); }
.xt-cover-cols small { font-size: clamp(.55rem, 2cqw, .72rem); color: var(--muted); font-weight: 600; }
.xt-cover-cols i { height: clamp(10px, 4cqw, 18px); border-radius: 4px; background: var(--xt-card); border: 1px solid var(--xt-line); }
.xt-cover-cols i.hl { background: var(--xt-note); border-color: transparent; }
.xt-cover-cols i.ok { border-left: 4px solid var(--xt-ok); }
.xt-sticky { position: absolute; right: -14px; bottom: -28px; width: min(52%, 220px); display: grid; gap: 4px; padding: 12px 14px; border-radius: 4px; background: var(--xt-note); color: var(--xt-note-ink); font-family: var(--f-data); font-size: .86rem; line-height: 1.35; box-shadow: 0 16px 28px -16px rgba(0,0,0,.5); transform: rotate(3deg); animation: c-in .7s .6s cubic-bezier(.2, .8, .2, 1) both, xt-sway 6s 1.4s ease-in-out infinite; }
.xt-sticky small { font-size: .7rem; opacity: .7; }
@keyframes xt-sway { 50% { transform: rotate(1deg) translateY(-5px); } }

/* ---------- Historia ---------- */
.c-tutoria-excel .cs-stage { container-type: inline-size; }
.c-tutoria-excel .scene { font-size: clamp(9.5px, 2.7cqw, 17px); }
.c-tutoria-excel .s1 { background: var(--xt-board); }
.c-tutoria-excel .s2, .c-tutoria-excel .s4 { display: block; }
.c-tutoria-excel .s5 { padding: 7%; }

/* Escena 1: pizarra */
.xt-board { position: absolute; left: 6%; top: 7%; width: 62%; padding: 1em 1.2em; border-radius: 10px; border: 2px solid var(--xt-line); background: var(--xt-card); }
.xt-hand { margin: 0; font-family: var(--f-data); color: var(--muted); font-size: .9em; }
.xt-big { margin: .1em 0 .7em; font-family: var(--f-display); font-weight: 700; font-size: 1.35em; line-height: 1.15; color: var(--xt); }
.xt-obj { display: grid; gap: .35em; font-size: .88em; }
.xt-obj small { font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.xt-obj span { display: flex; gap: .5em; align-items: baseline; }
.xt-obj span::before { content: ""; flex: none; width: .85em; height: .85em; border: 1.5px solid var(--xt); border-radius: 3px; translate: 0 .1em; }
.xt-note { position: absolute; width: 27%; display: grid; gap: .3em; padding: .7em .8em; border-radius: 3px; background: var(--xt-note); color: var(--xt-note-ink); font-family: var(--f-data); font-size: .84em; line-height: 1.3; box-shadow: 0 10px 18px -10px rgba(0,0,0,.45); }
.xt-note small { font-size: .78em; opacity: .7; }
.xt-note.n1 { right: 5%; top: 14%; transform: rotate(4deg); --d: .25s; }
.xt-note.n2 { right: 9%; bottom: 10%; transform: rotate(-3deg); background: #ffd7c4; --d: .4s; }
.cs-stage:not([data-step="1"]) .s1 .xt-board { opacity: 0; transform: translateY(16px); }
.cs-stage:not([data-step="1"]) .s1 .xt-note { opacity: 0; transform: translateY(-20px) rotate(0); }

/* Escena 2: ciclo semanal */
.xt-cycle { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8em; }
.xt-ring { grid-column: 2; grid-row: 1; width: 6.4em; height: 6.4em; border-radius: 50%; display: grid; place-content: center; text-align: center; border: 3px dashed var(--xt); }
.xt-ring b { display: block; }
.xt-ring b { font-size: .75em; color: var(--muted); font-weight: 600; }
.xt-ring strong { position: relative; display: block; height: 1.2em; font-family: var(--f-display); font-size: 2.2em; line-height: 1.2; color: var(--xt); }
.xt-ring strong span { position: absolute; inset: 0; opacity: 0; animation: xt-count 10s infinite; }
.xt-ring strong span:nth-child(2) { animation-delay: 2s; } .xt-ring strong span:nth-child(3) { animation-delay: 4s; } .xt-ring strong span:nth-child(4) { animation-delay: 6s; } .xt-ring strong span:nth-child(5) { animation-delay: 8s; }
@keyframes xt-count { 0%, 18% { opacity: 1; } 20%, 100% { opacity: 0; } }
.xt-half { display: grid; gap: .25em; padding: .7em .8em; border-radius: 10px; background: var(--xt-card); border: 1px solid var(--xt-line); font-size: .84em; line-height: 1.35; }
.xt-half small { font-size: .82em; font-weight: 700; color: var(--xt); }
.xt-half.h1 { grid-column: 1; grid-row: 1; } .xt-half.h2 { grid-column: 3; grid-row: 1; --d: .15s; }
.xt-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; margin-top: 1.4em; --d: .3s; }
.xt-kanban div { display: grid; align-content: start; gap: .4em; padding: .6em; border-radius: 10px; background: color-mix(in srgb, var(--xt-line) 40%, transparent); }
.xt-kanban small { font-size: .75em; font-weight: 700; color: var(--muted); }
.xt-kanban i { font-style: normal; padding: .5em .6em; border-radius: 6px; background: var(--xt-card); border: 1px solid var(--xt-line); font-size: .78em; line-height: 1.3; }
.xt-kanban i.hl { background: var(--xt-note); color: var(--xt-note-ink); border-color: transparent; }
.xt-kanban i.ok { border-left: 4px solid var(--xt-ok); }
.cs-stage:not([data-step="2"]) .s2 .xt-cycle, .cs-stage:not([data-step="2"]) .s2 .xt-kanban { opacity: 0; transform: translateY(14px); }

/* Escena 3: antes y ahora */
.c-tutoria-excel .s3 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6em; }
.xt-ba { display: grid; gap: .5em; padding: .7em; border-radius: 12px; background: var(--xt-card); border: 1px solid var(--xt-line); }
.xt-ba header { font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.xt-ba.before header { color: var(--bad); } .xt-ba.after header { color: var(--xt-ok); }
.xt-ba.after { border-color: var(--xt-ok); --d: .3s; }
.xt-g { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border: 1px solid var(--xt-line); font-family: "Segoe UI", Calibri, Arial, sans-serif; font-size: .78em; }
.xt-g span { padding: .3em .45em; border-right: 1px solid var(--xt-line); border-bottom: 1px solid var(--xt-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xt-g .m { grid-column: 1 / -1; text-align: center; font-weight: 700; background: #ffe08a; color: #4a3b00; }
.xt-g .c1 { background: #c8f0ff; color: #0b2236; } .xt-g .c2 { background: #ffd1dc; color: #3a0b16; }
.xt-g .hard { color: var(--bad); font-style: italic; }
.xt-g .th { font-weight: 700; color: #fff; background: #1d7044; }
.xt-g .st { color: var(--xt-ok); font-weight: 600; } .xt-g .st.p { color: var(--xt); }
.xt-ba ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2em; font-size: .78em; color: var(--muted); }
.xt-ba.before li::before { content: "✕ "; color: var(--bad); } .xt-ba.after li::before { content: "✓ "; color: var(--xt-ok); }
.xt-arrow { font-size: 1.6em; color: var(--xt); --d: .2s; }
.cs-stage:not([data-step="3"]) .s3 .xt-ba.before { opacity: 0; transform: translateX(-14px); }
.cs-stage:not([data-step="3"]) .s3 .xt-ba.after, .cs-stage:not([data-step="3"]) .s3 .xt-arrow { opacity: 0; transform: translateX(14px); }

/* Escena 4: presentación */
.xt-screen { position: absolute; left: 8%; right: 8%; top: 8%; display: grid; gap: .5em; padding: 1em 1.2em; border-radius: 12px; background: var(--deep); color: var(--on-deep); box-shadow: var(--shadow); border-bottom: 6px solid color-mix(in srgb, var(--on-deep) 20%, transparent); }
.xt-screen small { font-size: .78em; color: var(--on-deep-accent); text-transform: uppercase; letter-spacing: .08em; }
.xt-screen > b { font-family: var(--f-display); font-size: 1.3em; }
.xt-steps { display: grid; gap: .6em; margin-top: .4em; }
.xt-steps div { display: grid; grid-template-columns: 4.2em 1fr; align-items: center; gap: .2em .6em; font-size: .86em; }
.xt-steps span { color: color-mix(in srgb, var(--on-deep) 70%, transparent); }
.xt-steps i { height: 1.1em; width: calc(var(--n) * 10%); border-radius: 4px; background: repeating-linear-gradient(90deg, var(--xt) 0 calc(100% / var(--n) - 3px), transparent calc(100% / var(--n) - 3px) calc(100% / var(--n))); transform-origin: left; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.xt-steps div:last-child i { background: repeating-linear-gradient(90deg, var(--xt-ok) 0 calc(100% / var(--n) - 3px), transparent calc(100% / var(--n) - 3px) calc(100% / var(--n))); transition-delay: .4s; }
.xt-steps em { grid-column: 2; font-style: normal; font-size: .85em; color: color-mix(in srgb, var(--on-deep) 70%, transparent); }
.cs-stage:not([data-step="4"]) .xt-steps i { transform: scaleX(0); }
.xt-audience { position: absolute; left: 8%; right: 8%; bottom: 8%; display: flex; align-items: center; gap: .4em; --d: .4s; }
.xt-audience span { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; font-size: .8em; font-weight: 700; color: #fff; background: var(--brand); border: 2px solid var(--surface); }
.xt-audience span:nth-child(2) { background: var(--teal); } .xt-audience span:nth-child(3) { background: var(--xt); }
.xt-audience small { margin-left: .4em; font-size: .85em; color: var(--muted); }
.cs-stage:not([data-step="4"]) .s4 .xt-screen { opacity: 0; transform: translateY(-14px); }
.cs-stage:not([data-step="4"]) .s4 .xt-audience { opacity: 0; transform: translateY(14px); }

/* Escena 5: el conocimiento se reutiliza */
.xt-done { display: flex; align-items: center; gap: .8em; width: 66%; padding: .9em 1em; border-radius: 12px; background: var(--xt-card); border: 2px solid var(--xt-ok); }
.xt-done b { flex: none; width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--xt-ok); }
.xt-done span { display: grid; font-family: var(--f-display); font-weight: 700; font-size: 1.05em; }
.xt-done small { font-family: var(--f-body); font-weight: 600; font-size: .72em; color: var(--xt-ok); }
.xt-branch { position: absolute; left: 7%; right: 7%; top: 32%; height: 22%; width: 86%; overflow: visible; }
.xt-branch path { fill: none; stroke: var(--xt); stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; animation: c-flow 1.2s linear infinite; }
.xt-next { position: absolute; top: 55%; width: 36%; display: grid; gap: .2em; padding: .7em .9em; border-radius: 10px; border: 1.5px dashed var(--xt); background: var(--xt-soft); font-weight: 600; font-size: .9em; }
.xt-next small { font-size: .78em; font-weight: 500; color: var(--muted); }
.xt-next.n1 { left: 9%; --d: .3s; } .xt-next.n2 { right: 7%; --d: .45s; }
.xt-cap { position: absolute; left: 7%; right: 7%; bottom: 7%; margin: 0; font-size: .85em; color: var(--muted); --d: .6s; }
.cs-stage:not([data-step="5"]) .s5 > * { opacity: 0; transform: translateY(14px); }

/* ---------- Programa: etapas ---------- */
.xt-units { list-style: none; margin: 0; padding: 0; grid-template-columns: 1fr 1.6fr 1fr; }
.xt-units .unit--wide { grid-column: auto; grid-row: auto; background: var(--xt-soft); }
.c-tutoria-excel .unit-n { color: var(--xt); }
.c-tutoria-excel .unit li::before { background: var(--xt); }
.c-tutoria-excel .unit h3 { font-size: 1.35rem; }
.xt-more { margin-top: 18px; color: var(--muted); }

/* ---------- Recorrido ---------- */
.xt-road { grid-template-columns: 1.4fr 1fr 1fr; }
.c-tutoria-excel .dots { grid-template-columns: repeat(7, 1fr); max-width: 230px; }
.c-tutoria-excel .road-classes.on .dots i { background: var(--xt); }
.c-tutoria-excel .road-classes.on .dots i:last-child { background: var(--xt-ok); }
.c-tutoria-excel .road-ico { color: var(--xt); background: var(--xt-soft); }

@media (max-width: 1000px) { .xt-units { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .xt-sticky { right: -6px; bottom: -24px; }
  .xt-road { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .c-tutoria-excel .scene { padding: 5%; }
  .xt-board { left: 4%; top: 5%; width: 64%; padding: .7em .8em; } .xt-big { margin-bottom: .4em; }
  .xt-note { width: 30%; padding: .5em .6em; } .xt-note.n1 { right: 3%; } .xt-note.n2 { right: 4%; bottom: 6%; }
  .xt-ring { width: 5.2em; height: 5.2em; } .xt-kanban { margin-top: .8em; gap: .4em; } .xt-kanban div { padding: .4em; }
  .xt-ba { padding: .5em; } .xt-ba ul { display: none; }
  .xt-screen { left: 5%; right: 5%; top: 5%; padding: .7em .9em; } .xt-audience { left: 5%; bottom: 6%; }
  .xt-done { width: 80%; } .xt-next { width: 40%; } .xt-next.n1 { left: 5%; } .xt-next.n2 { right: 5%; } .xt-cap { left: 5%; bottom: 5%; }
  .xt-sticky { font-size: .78rem; padding: 9px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .xt-sticky, .xt-weeks .now b, .xt-branch path { animation: none !important; }
  .xt-ring strong span { animation: none !important; opacity: 0; } .xt-ring strong span:first-child { opacity: 1; }
  .xt-ring strong span:first-child::after { content: " a 6"; font-size: .5em; }
  .xt-steps i { transition: none !important; }
}