:root { --color-qostum-primary:#D97D55; --color-qostum-secondary:#C86D45; --color-qostum-tint:#FEF3EC; --color-success:#6B9B7C; --color-info:#5B7C99; --color-warning:#D9A855; --color-danger:#C85A54; --color-gray-50:#f9fafb; --color-gray-100:#f3f4f6; --color-gray-200:#e5e7eb; --color-gray-300:#d1d5db; --color-gray-400:#9ca3af; --color-gray-500:#6b7280; --color-gray-600:#4b5563; --color-gray-700:#374151; --color-gray-800:#1f2937; --color-gray-900:#111827; --shadow-md:0 4px 6px -1px rgba(0,0,0,0.1); }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { font-family:'Inter',sans-serif; font-size:16px; line-height:1.6; color:var(--color-gray-800); background:#fff; min-height:100vh; position:relative; }
body::before { content:''; position:fixed; inset:0; background-size:40px 40px; background-image:linear-gradient(to right, rgba(226,232,240,0.3) 1px, transparent 1px),linear-gradient(to bottom, rgba(226,232,240,0.3) 1px, transparent 1px); z-index:-1; mask-image:linear-gradient(to bottom, black 60%, transparent 100%); -webkit-mask-image:linear-gradient(to bottom, black 60%, transparent 100%); pointer-events:none; }
.page-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--color-gray-200); }
.page-header-inner { max-width:1280px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--color-gray-800); }
.brand svg { width:28px; height:28px; }
.brand-name { font-size:18px; font-weight:800; letter-spacing:-0.3px; }
.brand-divider { width:1px; height:22px; background:var(--color-gray-300); margin:0 4px; }
.breadcrumb { font-size:13px; color:var(--color-gray-500); font-weight:500; }
.breadcrumb strong { color:var(--color-gray-800); font-weight:600; }
.header-spacer { flex:1; }
.header-actions { display:flex; gap:10px; }
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; transition:all 0.18s; font-family:inherit; }
.btn-primary { background:var(--color-qostum-primary); color:white; }
.btn-primary:hover { background:var(--color-qostum-secondary); transform:translateY(-1px); box-shadow:0 4px 12px rgba(217,125,85,0.35); }
.btn-secondary { background:white; color:var(--color-gray-700); border:1.5px solid var(--color-gray-300); }
.btn-secondary:hover { border-color:var(--color-qostum-primary); color:var(--color-qostum-primary); }
.hero { max-width:1280px; margin:0 auto; padding:60px 24px 40px; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; background:var(--color-qostum-tint); color:var(--color-qostum-secondary); border-radius:100px; font-size:13px; font-weight:600; margin-bottom:20px; }
.hero h1 { font-size:56px; font-weight:800; line-height:1.05; letter-spacing:-1.5px; color:var(--color-gray-900); margin-bottom:20px; max-width:900px; }
.hero h1 em { font-style:normal; color:var(--color-qostum-primary); }
.hero p { font-size:19px; color:var(--color-gray-600); max-width:720px; line-height:1.55; margin-bottom:32px; }
.hero-meta { display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
.hero-meta-item { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--color-gray-500); }
.hero-meta-item strong { color:var(--color-gray-800); font-weight:600; }
.hero-meta-icon { width:32px; height:32px; border-radius:50%; background:var(--color-qostum-tint); color:var(--color-qostum-primary); display:flex; align-items:center; justify-content:center; font-weight:700; }
.layout { max-width:1280px; margin:40px auto 80px; padding:0 24px; display:grid; grid-template-columns:260px 1fr; gap:56px; align-items:start; }
.sidebar { position:sticky; top:80px; align-self:start; max-height:calc(100vh - 100px); overflow-y:auto; padding-right:8px; }
.toc-label { font-size:11px; font-weight:700; letter-spacing:1.2px; color:var(--color-gray-400); text-transform:uppercase; margin-bottom:14px; padding-left:14px; }
.toc { list-style:none; border-left:2px solid var(--color-gray-200); }
.toc a { display:block; padding:8px 14px; font-size:14px; color:var(--color-gray-500); text-decoration:none; transition:all 0.15s; border-left:2px solid transparent; margin-left:-2px; line-height:1.4; }
.toc a:hover { color:var(--color-gray-800); }
.toc a.active { color:var(--color-qostum-primary); font-weight:600; border-left-color:var(--color-qostum-primary); }
.toc .toc-step { display:inline-block; width:22px; height:22px; border-radius:50%; background:var(--color-gray-100); color:var(--color-gray-600); font-size:11px; font-weight:700; text-align:center; line-height:22px; margin-right:8px; vertical-align:middle; }
.toc a.active .toc-step { background:var(--color-qostum-primary); color:white; }
.content { min-width:0; }
.section { padding-bottom:60px; margin-bottom:60px; border-bottom:1px solid var(--color-gray-100); scroll-margin-top:80px; }
.section:last-child { border-bottom:none; }
.section-eyebrow { display:inline-block; padding:4px 10px; background:var(--color-qostum-tint); color:var(--color-qostum-secondary); border-radius:4px; font-size:11px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; margin-bottom:14px; }
.section h2 { font-size:36px; font-weight:800; letter-spacing:-0.8px; color:var(--color-gray-900); margin-bottom:14px; line-height:1.15; }
.section .lead { font-size:18px; color:var(--color-gray-600); line-height:1.55; margin-bottom:28px; max-width:720px; }
.section h3 { font-size:22px; font-weight:700; color:var(--color-gray-800); margin-top:36px; margin-bottom:14px; }
.section p { font-size:16px; color:var(--color-gray-700); line-height:1.65; margin-bottom:16px; }
.section ul, .section ol { margin:12px 0 20px 0; padding-left:22px; }
.section li { font-size:16px; color:var(--color-gray-700); line-height:1.65; margin-bottom:6px; }
.section strong { color:var(--color-gray-900); font-weight:600; }
.section code { background:var(--color-gray-100); padding:2px 7px; border-radius:4px; font-size:0.92em; font-family:'JetBrains Mono','Courier New',monospace; color:var(--color-qostum-secondary); }
.callout { background:var(--color-gray-50); border-left:4px solid var(--color-gray-400); padding:16px 20px; border-radius:0 8px 8px 0; margin:24px 0; }
.callout-title { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; margin-bottom:6px; }
.callout p { font-size:15px; margin-bottom:0; }
.callout-tip { background:#EAF7EE; border-left-color:var(--color-success); }
.callout-tip .callout-title { color:#2D5A3A; }
.callout-info { background:#EFF4F9; border-left-color:var(--color-info); }
.callout-info .callout-title { color:#2D4A66; }
.callout-warning { background:#FEF6E7; border-left-color:var(--color-warning); }
.callout-warning .callout-title { color:#7A5500; }
.callout-danger { background:#FEEFEE; border-left-color:var(--color-danger); }
.callout-danger .callout-title { color:#7A2823; }
.step-list { display:flex; flex-direction:column; gap:14px; margin:24px 0; }
.step-row { display:grid; grid-template-columns:48px 1fr; gap:18px; padding:18px 20px; background:white; border:1px solid var(--color-gray-200); border-radius:10px; transition:all 0.2s; }
.step-row:hover { border-color:var(--color-qostum-primary); box-shadow:var(--shadow-md); }
.step-num { width:36px; height:36px; border-radius:50%; background:var(--color-qostum-primary); color:white; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; }
.step-content h4 { font-size:17px; font-weight:700; color:var(--color-gray-900); margin-bottom:6px; }
.step-content p { font-size:15px; color:var(--color-gray-600); margin-bottom:0; line-height:1.5; }
.formula-box { background:linear-gradient(135deg, var(--color-qostum-tint) 0%, rgba(217,125,85,0.05) 100%); border:1px solid rgba(217,125,85,0.30); border-radius:12px; padding:28px; text-align:center; margin:28px 0; }
.formula-line { font-size:34px; font-weight:800; color:var(--color-gray-900); letter-spacing:-0.5px; margin-bottom:8px; }
.formula-line em { font-style:normal; color:var(--color-qostum-primary); }
.formula-sub { font-size:14px; color:var(--color-gray-600); }
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0; }
.compare-side { background:white; border:1px solid var(--color-gray-200); border-radius:10px; padding:20px; }
.compare-side.bad { border-color:rgba(200,90,84,0.30); background:rgba(200,90,84,0.03); }
.compare-side.good { border-color:rgba(217,125,85,0.40); background:var(--color-qostum-tint); }
.compare-tag { font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; }
.compare-side.bad .compare-tag { color:var(--color-danger); }
.compare-side.good .compare-tag { color:var(--color-qostum-primary); }
.compare-side h4 { font-size:18px; font-weight:800; color:var(--color-gray-900); margin-bottom:10px; line-height:1.2; }
.compare-side ul { list-style:none; padding:0; margin:0; }
.compare-side li { font-size:14px; padding:5px 0; display:flex; align-items:flex-start; gap:8px; color:var(--color-gray-700); }
.compare-side.bad li::before { content:'✗'; color:var(--color-danger); font-weight:900; }
.compare-side.good li::before { content:'✓'; color:var(--color-success); font-weight:900; }
.ex-table { background:white; border:1px solid var(--color-gray-200); border-radius:10px; overflow:hidden; margin:20px 0; }
.ex-table-head { background:var(--color-gray-50); display:grid; grid-template-columns:2fr 1fr 1fr 1fr; padding:10px 14px; font-size:11px; font-weight:800; color:var(--color-gray-500); text-transform:uppercase; letter-spacing:0.6px; }
.ex-table-row { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; padding:10px 14px; border-top:1px solid var(--color-gray-100); font-size:14px; align-items:center; }
.ex-table-row strong { color:var(--color-qostum-primary); }
.use-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:24px 0; }
.use-card { background:white; border:1px solid var(--color-gray-200); border-radius:10px; padding:20px; }
.use-card-tag { display:inline-block; padding:3px 10px; background:var(--color-qostum-tint); color:var(--color-qostum-secondary); border-radius:100px; font-size:11px; font-weight:700; margin-bottom:8px; letter-spacing:0.5px; }
.use-card h4 { font-size:16px; font-weight:700; color:var(--color-gray-900); margin-bottom:8px; }
.use-card p { font-size:14px; color:var(--color-gray-600); margin:0; line-height:1.5; }
.next-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:24px 0; }
.next-card { background:white; border:1px solid var(--color-gray-200); border-radius:10px; padding:20px; text-decoration:none; color:inherit; transition:all 0.2s; display:block; }
.next-card:hover { border-color:var(--color-qostum-primary); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.next-card-num { font-size:12px; font-weight:700; color:var(--color-qostum-primary); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.next-card h4 { font-size:18px; font-weight:700; color:var(--color-gray-900); margin-bottom:8px; }
.next-card p { font-size:14px; color:var(--color-gray-600); margin:0; line-height:1.5; }
.gantt-mock { background:white; border:1px solid var(--color-gray-200); border-radius:12px; padding:18px; margin:24px 0; box-shadow:var(--shadow-md); overflow-x:auto; }
.gantt-mock-row { display:grid; grid-template-columns:170px 1fr; gap:12px; align-items:center; padding:5px 0; font-size:13px; }
.gantt-mock-name { color:var(--color-gray-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gantt-mock-track { position:relative; height:18px; background:var(--color-gray-50); border-radius:4px; }
.gantt-mock-bar { position:absolute; top:2px; height:14px; border-radius:4px; background:var(--color-qostum-primary); }
.gantt-mock-bar.crit { background:var(--color-danger); }
.gantt-mock-bar.done { background:var(--color-success); }
.gantt-mock-milestone { position:absolute; top:0; width:16px; height:16px; background:var(--color-gray-800); transform:rotate(45deg); }
.footer-cta { max-width:1280px; margin:60px auto 80px; padding:48px 24px; background:linear-gradient(135deg, var(--color-qostum-primary) 0%, var(--color-qostum-secondary) 100%); border-radius:20px; text-align:center; color:white; }
.footer-cta h3 { font-size:32px; font-weight:800; letter-spacing:-0.5px; margin-bottom:12px; }
.footer-cta p { font-size:17px; opacity:0.95; margin-bottom:24px; max-width:600px; margin-left:auto; margin-right:auto; }
.footer-cta .btn-primary { background:white; color:var(--color-qostum-primary); font-weight:700; padding:12px 24px; }
@media (max-width: 900px) {
  .layout { grid-template-columns:1fr; gap:32px; }
  .sidebar { position:static; max-height:none; }
  .hero h1 { font-size:38px; }
  .section h2 { font-size:28px; }
  .formula-line { font-size:24px; }
  .compare-grid, .use-grid, .next-grid { grid-template-columns:1fr; }
  .ex-table-head, .ex-table-row { grid-template-columns:1fr; gap:4px; }
}
.tut-nav-widget { background:#fafbfc; border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; margin-bottom:18px; }
.tut-nav-label { font-size:10px; font-weight:700; letter-spacing:1.2px; color:#9ca3af; text-transform:uppercase; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.tut-nav-select { width:100%; padding:7px 10px; border:1px solid #e5e7eb; border-radius:6px; font-family:inherit; font-size:13px; background:white; color:#1f2937; cursor:pointer; outline:none; }
.tut-nav-select:focus { border-color:#D97D55; box-shadow:0 0 0 3px rgba(217,125,85,0.15); }
.tut-nav-select optgroup { font-weight:700; color:#6b7280; }


/* QOSTUM dark mode (auto) — generado, no tocar modo claro */
html[data-theme="dark"] body { background-color: var(--qd-surface) !important; }
html[data-theme="dark"] .btn-secondary { background-color: var(--qd-surface) !important; }
html[data-theme="dark"] .callout-tip { background-color: var(--qd-surface) !important; }
html[data-theme="dark"] .callout-tip .callout-title { color: var(--qd-text) !important; }
html[data-theme="dark"] .callout-warning { background-color: var(--qd-surface-2) !important; }
html[data-theme="dark"] .callout-warning .callout-title { color: var(--qd-text) !important; }
html[data-theme="dark"] .step-row { background-color: var(--qd-surface) !important; }
html[data-theme="dark"] .compare-side { background-color: var(--qd-surface) !important; }
html[data-theme="dark"] .ex-table { background-color: var(--qd-surface) !important; }
html[data-theme="dark"] .use-card { background-color: var(--qd-surface) !important; }
html[data-theme="dark"] .next-card { background-color: var(--qd-surface) !important; }
html[data-theme="dark"] .gantt-mock { background-color: var(--qd-surface) !important; }
html[data-theme="dark"] .footer-cta .btn-primary { background-color: var(--qd-surface) !important; }
html[data-theme="dark"] .tut-nav-widget { background-color: var(--qd-surface-2) !important; }
html[data-theme="dark"] .tut-nav-widget { border-color: var(--qd-border-soft) !important; }
html[data-theme="dark"] .tut-nav-label { color: var(--qd-text-muted) !important; }
html[data-theme="dark"] .tut-nav-select { background-color: var(--qd-surface) !important; }
html[data-theme="dark"] .tut-nav-select { color: var(--qd-text) !important; }
html[data-theme="dark"] .tut-nav-select { border-color: var(--qd-border-soft) !important; }
html[data-theme="dark"] .tut-nav-select optgroup { color: var(--qd-text-muted) !important; }