:root {
  --bg: #100f0e;
  --panel: #1b1917;
  --panel-2: #24211e;
  --panel-3: #2b2723;
  --text: #f4eee6;
  --muted: #bdb2a6;
  --line: #3d3731;
  --cream: #f1dfc6;
  --orange: #f47b35;
  --green: #a6bb74;
  --lavender: #b6a1d8;
  --blue: #7ea7bd;
  --rose: #d59a9a;
  --yellow: #e4c96b;
  --cyan: #74b9b2;
  --danger: #d97878;
  --accent: var(--orange);
  --accent-rgb: 244, 123, 53;
  --shadow: 0 18px 44px rgba(0,0,0,.28);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--accent-rgb), .13), transparent 30rem),
    radial-gradient(circle at 100% 15%, rgba(166, 187, 116, .07), transparent 32rem),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.009) 3px 4px),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
body[data-accent="green"] { --accent: var(--green); --accent-rgb: 166,187,116; }
body[data-accent="lavender"] { --accent: var(--lavender); --accent-rgb: 182,161,216; }
body[data-accent="blue"] { --accent: var(--blue); --accent-rgb: 126,167,189; }
body[data-accent="rose"] { --accent: var(--rose); --accent-rgb: 213,154,154; }
body[data-accent="yellow"] { --accent: var(--yellow); --accent-rgb: 228,201,107; }
body[data-accent="cyan"] { --accent: var(--cyan); --accent-rgb: 116,185,178; }

::selection { background: rgba(var(--accent-rgb), .28); }
a { color: inherit; }
button, input, select { font: inherit; }
button { color: inherit; }
code { color: var(--cream); }
.shell { width: min(1180px, calc(100% - 28px)); margin-inline: auto; }

.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(16,15,14,.86);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.nav { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 950; text-decoration: none; letter-spacing: -.025em; }
.brand-mark { width: 31px; aspect-ratio: 1; display:grid; place-items:center; border:1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--accent); transform: rotate(-2deg); }
.nav-links { display: flex; flex-wrap: wrap; align-items:center; gap: 8px; }
.nav-link, .button {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height: 42px; padding: 8px 13px; border:1px solid var(--line); border-radius: 11px;
  background: var(--panel-2); color: var(--text); text-decoration:none; cursor:pointer; font-weight:800;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.nav-link:hover, .button:hover { transform: translateY(-1px); border-color: var(--accent); }
.button.primary { background: var(--accent); border-color: var(--accent); color:#15120f; }
.button.ghost { background: transparent; }
.button.danger:hover { border-color: var(--danger); background: rgba(217,120,120,.08); }
.button.small { min-height: 36px; padding: 6px 10px; font-size:.85rem; }

.hero { padding: clamp(38px,7vw,86px) 0 34px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,.72fr); gap:22px; align-items:stretch; }
.hero-copy, .hero-panel, .surface { border:1px solid var(--line); border-radius:var(--radius); background:rgba(27,25,23,.92); box-shadow:var(--shadow); }
.hero-copy { padding:clamp(25px,5vw,50px); position:relative; overflow:hidden; }
.hero-copy::after { content:""; position:absolute; width:190px; height:190px; right:-75px; bottom:-90px; border:32px solid rgba(var(--accent-rgb),.12); transform:rotate(18deg); }
.eyebrow { margin:0 0 10px; color:var(--accent); font-size:.78rem; font-weight:950; letter-spacing:.14em; text-transform:uppercase; }
h1 { max-width:15ch; margin:0; font-size:clamp(2.45rem,7vw,5.5rem); line-height:.95; letter-spacing:-.058em; }
.lead { max-width:68ch; margin:22px 0 0; color:var(--muted); font-size:clamp(1rem,2.1vw,1.15rem); }
.hero-actions { margin-top:24px; display:flex; gap:10px; flex-wrap:wrap; }
.hero-panel { padding:28px; display:grid; align-content:center; gap:18px; }
.stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.stat { padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.stat strong { display:block; font-size:1.08rem; color:var(--cream); }
.stat span { display:block; margin-top:2px; color:var(--muted); font-size:.78rem; }

.progress-ring { --progress:0deg; width:154px; aspect-ratio:1; margin-inline:auto; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--accent) var(--progress), var(--panel-2) 0); position:relative; }
.progress-ring::before { content:""; position:absolute; width:119px; aspect-ratio:1; border-radius:50%; background:var(--panel); }
.progress-number { position:relative; font-size:1.9rem; font-weight:950; }
.progress-caption { margin:10px 0 0; text-align:center; color:var(--muted); }
.progress-detail { margin:2px 0 0; text-align:center; color:var(--cream); font-size:.86rem; }

.section { padding: 28px 0 68px; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:17px; }
.section-head h2 { margin:0; font-size:clamp(1.6rem,4vw,2.5rem); letter-spacing:-.035em; }
.section-head p { max-width:65ch; margin:5px 0 0; color:var(--muted); }

.toolbar-wrap { position:sticky; top:64px; z-index:30; padding:10px 0; background:linear-gradient(to bottom,rgba(16,15,14,.97),rgba(16,15,14,.88),transparent); backdrop-filter:blur(8px); }
.toolbar { display:grid; grid-template-columns:minmax(220px,1fr) repeat(2,minmax(145px,auto)) auto; gap:10px; padding:12px; border:1px solid var(--line); border-radius:15px; background:rgba(27,25,23,.97); }
.field { min-height:44px; padding:0 13px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); color:var(--text); }
.field:focus-visible, .button:focus-visible, a:focus-visible, .switch input:focus-visible + .slider { outline:3px solid rgba(var(--accent-rgb),.34); outline-offset:2px; }

.course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.course-card { min-height:320px; display:flex; flex-direction:column; padding:20px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(36,33,30,.95),rgba(27,25,23,.95)); box-shadow:0 12px 30px rgba(0,0,0,.16); }
.course-card[data-accent="green"] { --card-accent:var(--green); }
.course-card[data-accent="lavender"] { --card-accent:var(--lavender); }
.course-card[data-accent="orange"] { --card-accent:var(--orange); }
.course-card[data-accent="blue"] { --card-accent:var(--blue); }
.course-card[data-accent="rose"] { --card-accent:var(--rose); }
.course-card[data-accent="yellow"] { --card-accent:var(--yellow); }
.course-card[data-accent="cyan"] { --card-accent:var(--cyan); }
.course-topline { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.course-index { width:45px; height:45px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; color:var(--card-accent); background:#151311; font-weight:950; }
.pill-row { display:flex; flex-wrap:wrap; gap:6px; }
.pill { display:inline-flex; align-items:center; min-height:25px; padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.055); color:var(--muted); font-size:.72rem; font-weight:850; }
.pill.accent { background:color-mix(in srgb, var(--card-accent) 14%, transparent); color:var(--card-accent); }
.course-card h3 { margin:21px 0 7px; font-size:1.4rem; line-height:1.08; letter-spacing:-.03em; }
.course-card p { margin:0; color:var(--muted); }
.course-meta { margin:16px 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; color:var(--cream); font-size:.8rem; }
.card-progress { margin-top:auto; }
.progress-track { height:8px; border-radius:999px; overflow:hidden; background:#12110f; border:1px solid var(--line); }
.progress-fill { width:0; height:100%; background:var(--card-accent,var(--accent)); transition:width .25s ease; }
.progress-copy { display:flex; justify-content:space-between; gap:10px; margin:7px 0 13px; color:var(--muted); font-size:.78rem; }
.course-card .button { width:100%; --accent:var(--card-accent); }

.continue-box { display:none; margin-bottom:22px; padding:18px; border:1px solid rgba(var(--accent-rgb),.38); border-radius:15px; background:rgba(var(--accent-rgb),.07); }
.continue-box.is-visible { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.continue-box h2 { margin:0; font-size:1.15rem; }
.continue-box p { margin:3px 0 0; color:var(--muted); }

.module { margin-top:30px; scroll-margin-top:145px; }
.module-header { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:end; margin-bottom:13px; }
.module-kicker { margin:0 0 4px; color:var(--accent); font-size:.76rem; font-weight:950; letter-spacing:.13em; text-transform:uppercase; }
.module h2 { margin:0; font-size:clamp(1.35rem,3.4vw,2.12rem); letter-spacing:-.03em; }
.module-summary { max-width:75ch; margin:7px 0 0; color:var(--muted); }
.module-progress { white-space:nowrap; color:var(--muted); font-size:.88rem; }
.resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.resource-card { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:start; min-height:190px; padding:18px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(145deg,rgba(36,33,30,.95),rgba(27,25,23,.95)); transition:opacity .18s ease,border-color .18s ease,transform .18s ease; }
.resource-card:hover { border-color:#5b5148; transform:translateY(-1px); }
.resource-card.is-watched { opacity:.66; border-color:rgba(166,187,116,.45); }
.resource-card.is-watched .resource-title { text-decoration:line-through; text-decoration-color:var(--green); text-decoration-thickness:1px; }
.order { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:#151311; color:var(--accent); font-weight:950; }
.resource-title { margin:0; font-size:1.04rem; line-height:1.3; }
.channel { margin:4px 0 0; color:var(--cream); font-size:.87rem; }
.description { margin:10px 0 14px; color:var(--muted); font-size:.9rem; }
.resource-link { display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-weight:850; text-decoration:none; }
.resource-link:hover { text-decoration:underline; }
.status-wrap { display:grid; justify-items:end; gap:7px; }
.status-label { min-width:59px; color:var(--muted); font-size:.72rem; font-weight:850; text-align:center; }
.switch { position:relative; width:54px; height:30px; display:inline-block; }
.switch input { width:1px; height:1px; opacity:0; position:absolute; }
.slider { position:absolute; inset:0; border:1px solid var(--line); border-radius:999px; background:#151311; cursor:pointer; transition:.2s ease; }
.slider::before { content:""; position:absolute; width:22px; height:22px; left:3px; top:3px; border-radius:50%; background:var(--muted); transition:.2s ease; }
.switch input:checked + .slider { border-color:var(--green); background:rgba(166,187,116,.18); }
.switch input:checked + .slider::before { transform:translateX(24px); background:var(--green); }

.assignment { margin-top:13px; display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.assignment-card { padding:17px; border:1px dashed #514940; border-radius:14px; background:rgba(20,18,16,.55); }
.assignment-card h3 { margin:0 0 7px; color:var(--cream); font-size:.88rem; letter-spacing:.07em; text-transform:uppercase; }
.assignment-card p { margin:0; color:var(--muted); font-size:.91rem; }
.assignment-card.delivery { border-style:solid; border-color:rgba(var(--accent-rgb),.32); background:rgba(var(--accent-rgb),.055); }

.empty-state { display:none; padding:48px 20px; border:1px dashed var(--line); border-radius:15px; color:var(--muted); text-align:center; }
.noscript { margin:14px auto; padding:12px 15px; border:1px solid var(--danger); border-radius:10px; background:rgba(217,120,120,.08); }
.footer { padding:27px 0 44px; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; }
.footer-grid { display:flex; justify-content:space-between; align-items:start; gap:24px; }
.footer strong { color:var(--cream); }
.hidden { display:none !important; }

@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; }
  .course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .toolbar { grid-template-columns:1fr 1fr; }
  .toolbar .search { grid-column:1/-1; }
  .resource-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .shell { width:min(100% - 18px,1180px); }
  .nav { align-items:flex-start; padding:10px 0; }
  .nav-links { justify-content:flex-end; }
  .nav-link .wide-label { display:none; }
  .hero { padding-top:22px; }
  .hero-copy { padding:27px 20px; }
  .course-grid, .toolbar, .assignment { grid-template-columns:1fr; }
  .toolbar .search { grid-column:auto; }
  .course-card { min-height:0; }
  .module-header { align-items:start; }
  .resource-card { grid-template-columns:40px minmax(0,1fr); }
  .order { width:40px; height:40px; }
  .status-wrap { grid-column:1/-1; grid-template-columns:auto auto; justify-content:end; align-items:center; }
  .continue-box.is-visible, .footer-grid { display:block; }
  .continue-box .button { margin-top:12px; width:100%; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }


/* Catálogo generado y cursos mixtos */
.catalog-status { margin:0 0 14px; color:var(--muted); font-size:.86rem; }
.catalog-status[data-state="error"] { color:var(--danger); }
.fallback-note { margin:0 0 18px; padding:12px 14px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); background:rgba(255,255,255,.02); }
.pill.live { color:var(--yellow); border:1px solid color-mix(in srgb,var(--yellow) 42%,transparent); background:color-mix(in srgb,var(--yellow) 8%,transparent); }
.resource-card[data-live="true"] { border-left:3px solid var(--yellow); }
.resource-card[data-live="true"].is-watched { opacity:.83; }
.resource-card[data-live="true"].is-watched .resource-title { text-decoration:none; }
.status-label { max-width:90px; line-height:1.2; }
.course-card .course-symbol { font-size:1.25rem; }
.course-card[data-status="En construcción"] { border-style:dashed; }
.course-card[data-status="Planeado"] { opacity:.75; }
.template-note, .notice { margin:18px 0; padding:16px; border:1px solid rgba(var(--accent-rgb),.3); border-radius:14px; background:rgba(var(--accent-rgb),.055); color:var(--muted); }
.notice strong { color:var(--cream); }
.plain-list { padding-left:1.2rem; color:var(--muted); }
.plain-list li+li { margin-top:.45rem; }
code.file { display:inline-block; padding:.08rem .35rem; border:1px solid var(--line); border-radius:6px; background:#151311; }
@media (max-width:900px){ .course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .course-grid { grid-template-columns:1fr; } }