/* =====================================================
   LUM360 - Curso SEO Local (Arquitectura GBP)
   Vanilla CSS, responsive, printable, no framework.
   ===================================================== */

:root {
  --lum-dark: #0F1115;
  --lum-charcoal: #1A1D24;
  --lum-graphite: #2B2F38;
  --lum-gold: #C8A96A;
  --lum-gold-soft: #E3D0A2;
  --lum-ivory: #F5F1E8;
  --lum-stone: #D8D2C4;
  --lum-muted: #8D929C;
  --lum-success: #5FA878;
  --lum-error: #B66A6A;
  --lum-white: #FFFFFF;
  --lum-black: #000000;

  --ink: var(--lum-ivory);
  --ink-soft: var(--lum-stone);
  --ink-muted: var(--lum-muted);
  --paper: var(--lum-ivory);
  --paper-2: #ECE5D8;
  --paper-3: #FFFDF8;
  --dark-alpha-92: rgba(15, 17, 21, 0.92);
  --dark-alpha-82: rgba(15, 17, 21, 0.82);
  --dark-alpha-68: rgba(15, 17, 21, 0.68);
  --dark-alpha-44: rgba(15, 17, 21, 0.44);
  --light-alpha-12: rgba(255, 255, 255, 0.12);
  --light-alpha-08: rgba(255, 255, 255, 0.08);
  --light-alpha-04: rgba(255, 255, 255, 0.04);
  --gold-alpha-35: rgba(200, 169, 106, 0.35);
  --gold-alpha-24: rgba(200, 169, 106, 0.24);
  --gold-alpha-16: rgba(200, 169, 106, 0.16);
  --gold-alpha-10: rgba(200, 169, 106, 0.10);
  --gold-alpha-06: rgba(200, 169, 106, 0.06);
  --success-alpha-16: rgba(95, 168, 120, 0.16);
  --success-alpha-28: rgba(95, 168, 120, 0.28);
  --error-alpha-16: rgba(182, 106, 106, 0.16);
  --error-alpha-28: rgba(182, 106, 106, 0.28);
  --shadow-soft: 0 20px 64px rgba(0, 0, 0, 0.24);
  --shadow-tight: 0 12px 28px rgba(0, 0, 0, 0.20);
  --hairline: 1px solid var(--gold-alpha-16);
  --hairline-light: 1px solid rgba(15, 17, 21, 0.10);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --header-h: 72px;
  --sidebar-w: 316px;
  --content-max: 980px;
  --font-display: "Cormorant Garamond", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --print-paper: #FFFFFF;
  --print-ink: #111111;
  --print-muted: #4F4F4F;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; overflow-x: clip; }
html { font-size: 16px; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: radial-gradient(circle at 76% 8%, var(--gold-alpha-16), transparent 26rem), radial-gradient(circle at 18% 26%, rgba(95, 168, 120, 0.10), transparent 22rem), linear-gradient(180deg, var(--lum-dark), var(--lum-charcoal) 46%, var(--lum-dark)); line-height: 1.7; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(var(--light-alpha-04) 1px, transparent 1px), linear-gradient(90deg, var(--light-alpha-04) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(180deg, var(--lum-black), transparent 72%); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, li, button, span, strong { min-width: 0; overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.05; }
h1 { font-size: clamp(2.6rem, 7vw, 6.1rem); }
h2 { font-size: clamp(2rem, 4.5vw, 4.25rem); }
h3 { font-size: clamp(1.35rem, 2vw, 2rem); }
p { margin: 0; }
strong { font-weight: 650; }
::selection { color: var(--lum-dark); background: var(--lum-gold-soft); }
:focus-visible { outline: 2px solid var(--lum-gold-soft); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 0.75rem 1rem; color: var(--lum-dark); background: var(--lum-gold-soft); border-radius: var(--radius-sm); transform: translateY(-140%); transition: transform 160ms var(--ease); }
.skip-link:focus { transform: translateY(0); }

/* ---------- Header ---------- */
.topbar { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; padding: 0 clamp(1rem, 3vw, 2rem); background: var(--dark-alpha-92); border-bottom: var(--hairline); backdrop-filter: blur(22px); }
.brand-mark { display: inline-flex; align-items: center; gap: 0.75rem; min-width: 0; }
.brand-cluster { display: inline-flex; align-items: center; gap: clamp(0.6rem, 2vw, 1rem); min-width: 0; justify-self: start; }
.brand-mark img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold-alpha-35); }
.brand-mark span { display: grid; gap: 0.05rem; }
.brand-mark strong { color: var(--lum-gold-soft); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; }
.brand-mark small { color: var(--ink-muted); font-size: 0.72rem; }
.course-site-nav { display: inline-flex; align-items: center; gap: 0.4rem; }
.course-site-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.8rem; border: var(--hairline); border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--light-alpha-04); font: inherit; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.course-site-link:hover, .course-site-link:focus-visible, .course-tools-dropdown.is-open .course-tools-toggle { color: var(--lum-gold-soft); background: var(--gold-alpha-10); }
.course-tools-dropdown { position: relative; }
.course-tools-toggle::after { content: ""; width: 7px; height: 7px; margin-left: 0.5rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 180ms var(--ease); }
.course-tools-dropdown:hover .course-tools-toggle::after, .course-tools-dropdown:focus-within .course-tools-toggle::after, .course-tools-dropdown.is-open .course-tools-toggle::after { transform: rotate(-135deg) translateY(-2px); }
.course-tools-panel { position: absolute; top: calc(100% + 0.6rem); left: 0; width: min(280px, calc(100vw - 2rem)); padding: 0.55rem; border: var(--hairline); border-radius: var(--radius-md); background: rgba(15, 17, 21, 0.96); box-shadow: var(--shadow-tight); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms var(--ease); }
.course-tools-dropdown:hover .course-tools-panel, .course-tools-dropdown:focus-within .course-tools-panel, .course-tools-dropdown.is-open .course-tools-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.course-tools-panel a { display: block; padding: 0.72rem 0.8rem; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 0.86rem; line-height: 1.35; }
.course-tools-panel a:hover, .course-tools-panel a:focus-visible, .course-tools-panel a.is-active { color: var(--lum-gold-soft); background: var(--gold-alpha-10); }
.top-progress { display: inline-flex; align-items: center; gap: 0.75rem; justify-self: center; color: var(--lum-gold-soft); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.progress-track { width: clamp(110px, 18vw, 220px); height: 4px; overflow: hidden; background: var(--light-alpha-08); border-radius: 999px; }
.progress-fill { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--lum-gold), var(--lum-gold-soft)); border-radius: inherit; transition: width 420ms var(--ease); }
.topbar-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.55rem; min-width: 0; }
.menu-button { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: var(--lum-gold-soft); background: var(--light-alpha-04); border: var(--hairline); border-radius: var(--radius-sm); }
.menu-button span:not(.sr-only) { width: 18px; height: 1px; background: currentColor; }

/* ---------- Buttons ---------- */
.primary-button, .secondary-button, .ghost-button, .icon-button { min-height: 44px; border-radius: var(--radius-sm); border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease); }
.primary-button { color: var(--lum-dark); background: linear-gradient(135deg, var(--lum-gold-soft), var(--lum-gold)); box-shadow: 0 12px 26px var(--gold-alpha-16); }
.secondary-button { color: var(--lum-gold-soft); background: var(--light-alpha-04); border-color: var(--gold-alpha-24); }
.ghost-button, .icon-button { color: var(--ink-soft); background: transparent; border-color: var(--light-alpha-12); }
.ghost-button.danger { color: var(--lum-error); border-color: var(--error-alpha-28); }
.primary-button:hover, .secondary-button:hover, .ghost-button:hover, .icon-button:hover { transform: translateY(-1px); }
.primary-button:active, .secondary-button:active, .ghost-button:active, .icon-button:active { transform: translateY(0); }
.primary-button:disabled, .secondary-button:disabled, .ghost-button:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }

/* ---------- Layout ---------- */
.course-frame { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; padding-top: var(--header-h); }
.course-sidebar { position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 1rem; background: linear-gradient(180deg, var(--dark-alpha-82), var(--dark-alpha-68)), var(--lum-charcoal); border-right: var(--hairline); }
.sidebar-panel { padding: 1.2rem; background: var(--light-alpha-04); border: var(--hairline); border-radius: var(--radius-md); box-shadow: inset 0 1px 0 var(--light-alpha-08); }
.sidebar-kicker, .section-label, .eyebrow { margin: 0 0 0.85rem; color: var(--lum-gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.sidebar-panel h2 { color: var(--lum-ivory); font-size: 1.85rem; }
.sidebar-score { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--light-alpha-08); }
.sidebar-score span { color: var(--ink-muted); font-size: 0.76rem; }
.sidebar-score strong { color: var(--lum-gold-soft); }
.sidebar-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--light-alpha-08); }
.sidebar-tools .ghost-button { width: 100%; min-width: 0; padding-inline: 0.65rem; font-size: 0.72rem; }
.module-nav { display: grid; gap: 0.45rem; margin-top: 1rem; }
.module-link { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.85rem; color: var(--ink-muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); text-align: left; line-height: 1.35; transition: color 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease); }
.module-link span { min-width: 2.15rem; height: 2.15rem; display: inline-flex; align-items: center; justify-content: center; color: var(--lum-gold-soft); border: 1px solid var(--gold-alpha-24); border-radius: 50%; font-size: 0.7rem; font-weight: 800; }
.module-link:hover, .module-link.is-active { color: var(--lum-ivory); background: var(--gold-alpha-10); border-color: var(--gold-alpha-24); }
.module-link.is-completed span { color: var(--lum-dark); background: var(--lum-gold); border-color: var(--lum-gold); }
.course-main { min-width: 0; padding-bottom: 2rem; }

/* ---------- Hero ---------- */
.hero-section { min-height: calc(100vh - var(--header-h)); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(3rem, 8vw, 7rem) clamp(1.1rem, 5vw, 5rem); position: relative; }
.hero-section::after { content: ""; position: absolute; inset: auto 6vw 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-alpha-35), transparent); }
.hero-copy { max-width: 880px; }
.hero-copy h1 { max-width: 880px; color: var(--lum-ivory); letter-spacing: 0; }
.hero-lead { max-width: 760px; margin-top: 1.25rem; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.22rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 2rem; max-width: 760px; }
.hero-stats span { min-height: 86px; display: grid; align-content: center; gap: 0.18rem; padding: 0.9rem; color: var(--ink-muted); background: var(--light-alpha-04); border: var(--hairline); border-radius: var(--radius-md); }
.hero-stats strong { display: block; color: var(--lum-gold-soft); font-family: var(--font-display); font-size: 1.75rem; line-height: 1; }
.hero-visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.hero-visual::before { content: ""; position: absolute; width: min(88%, 480px); aspect-ratio: 1; border: 1px solid var(--gold-alpha-16); border-radius: 50%; background: radial-gradient(circle, var(--gold-alpha-16), transparent 26%), conic-gradient(from 140deg, transparent, var(--gold-alpha-24), transparent, var(--success-alpha-16), transparent); filter: blur(0.2px); opacity: 0.88; }
.decision-card { position: relative; z-index: 2; width: min(88vw, 340px); padding: 1.5rem; color: var(--lum-ivory); background: linear-gradient(145deg, var(--dark-alpha-92), rgba(43, 47, 56, 0.78)); border: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.decision-card-main { min-height: 190px; display: grid; align-content: end; }
.decision-card p { color: var(--ink-soft); font-size: 1rem; }
.decision-card strong { margin-top: 0.2rem; color: var(--lum-gold-soft); font-family: var(--font-display); font-size: 2rem; line-height: 1.05; }
.map-pin { position: absolute; top: 1.2rem; right: 1.2rem; width: 38px; height: 38px; border: 1px solid var(--lum-gold); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.map-pin::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--lum-gold); }
.signal-grid { position: absolute; inset: auto 0 2.5rem; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.signal-grid span { padding: 0.55rem 0.65rem; color: var(--ink-soft); background: var(--dark-alpha-68); border: 1px solid var(--light-alpha-08); border-radius: var(--radius-sm); text-align: center; font-size: 0.78rem; }

/* ---------- Content ---------- */
.content-band { padding: clamp(2rem, 5vw, 4rem) clamp(1.1rem, 5vw, 5rem); }
.content-narrow { max-width: var(--content-max); }
.intro-panel { background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--lum-dark); border-block: var(--hairline-light); }
.intro-panel h2 { max-width: 760px; color: var(--lum-dark); }
.intro-panel p:not(.section-label) { max-width: 780px; margin-top: 1rem; color: var(--lum-graphite); font-size: 1.04rem; }
.is-js .module-section, .is-js .summary-section { display: none; }
.is-js .module-section.is-active, .is-js .summary-section.is-active { display: block; }
.hero-section.is-hidden, .intro-panel.is-hidden { display: none; }
.module-section { max-width: calc(var(--content-max) + 6rem); margin: 0 auto; padding: clamp(2rem, 5vw, 5rem) clamp(1.1rem, 4vw, 3rem); animation: moduleIn 420ms var(--ease); }

@keyframes moduleIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.module-header { max-width: 860px; margin-bottom: 1.7rem; }
.module-header h2 { color: var(--lum-ivory); letter-spacing: 0; }
.module-header > p:not(.section-label) { margin-top: 0.9rem; color: var(--ink-soft); font-size: 1.08rem; }
.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.learning-card, .business-application, .quiz-shell, .summary-section, .soft-cta, .accordion-list, .seven-day-plan, .factor-row, .media-principles { border-radius: var(--radius-md); }
.learning-card { min-height: 210px; padding: clamp(1.1rem, 2vw, 1.35rem); color: var(--lum-dark); background: var(--paper); border: var(--hairline-light); box-shadow: var(--shadow-tight); }
.learning-card span { display: inline-flex; margin-bottom: 0.85rem; color: var(--lum-gold); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.learning-card p + p { margin-top: 0.85rem; }
.learning-card p { color: var(--lum-graphite); }
.learning-card.key-card { color: var(--lum-ivory); background: radial-gradient(circle at 88% 0%, var(--gold-alpha-24), transparent 15rem), linear-gradient(145deg, var(--lum-charcoal), var(--lum-dark)); border-color: var(--gold-alpha-24); }
.learning-card.key-card p { color: var(--lum-ivory); font-family: var(--font-display); font-size: clamp(1.55rem, 2.7vw, 2.5rem); line-height: 1.1; }
.learning-card.example-card { background: linear-gradient(180deg, var(--paper-3), var(--paper)); border-left: 3px solid var(--lum-success); }
.learning-card.error-card { background: linear-gradient(180deg, var(--paper-3), var(--paper)); border-left: 3px solid var(--lum-error); }
.business-application { margin-top: 1rem; padding: clamp(1.1rem, 2vw, 1.35rem); background: var(--light-alpha-04); border: var(--hairline); }
.business-application h3 { margin-bottom: 1rem; color: var(--lum-gold-soft); font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.interactive-checklist { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.interactive-checklist label { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px; padding: 0.7rem 0.8rem; color: var(--ink-soft); background: var(--dark-alpha-44); border: 1px solid var(--light-alpha-08); border-radius: var(--radius-sm); transition: color 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease); cursor: pointer; }
.interactive-checklist label:hover { color: var(--lum-ivory); border-color: var(--gold-alpha-24); }
.interactive-checklist input { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 0.15rem; accent-color: var(--lum-gold); }
.interactive-checklist label.is-checked { color: var(--lum-gold-soft); background: var(--gold-alpha-10); border-color: var(--gold-alpha-24); }

/* ---------- Tables & Special Blocks ---------- */
.table-wrap { margin-top: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); border: var(--hairline); box-shadow: var(--shadow-tight); }
.course-table { width: 100%; min-width: 720px; border-collapse: collapse; color: var(--lum-dark); background: var(--paper); }
.course-table th, .course-table td { padding: 0.95rem 1rem; text-align: left; vertical-align: top; border-bottom: var(--hairline-light); }
.course-table th { color: var(--lum-gold-soft); background: var(--lum-charcoal); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.course-table td { color: var(--lum-graphite); }
.course-table tr:nth-child(even) td { background: var(--paper-3); }
.course-table .highlight-row td { background: var(--lum-gold-soft); }

/* ---------- Quiz ---------- */
.quiz-shell { margin-top: 1.2rem; padding: clamp(1rem, 2vw, 1.35rem); background: radial-gradient(circle at 90% 0%, var(--gold-alpha-16), transparent 16rem), var(--lum-charcoal); border: var(--hairline); box-shadow: var(--shadow-tight); }
.quiz-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--light-alpha-08); }
.quiz-head h3 { color: var(--lum-ivory); font-family: var(--font-body); font-size: 1rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.quiz-head p { color: var(--ink-muted); font-size: 0.9rem; }
.quiz-status { align-self: start; padding: 0.4rem 0.65rem; color: var(--lum-gold-soft); background: var(--gold-alpha-10); border: 1px solid var(--gold-alpha-16); border-radius: var(--radius-sm); font-size: 0.76rem; font-weight: 750; white-space: nowrap; }
.quiz-question { padding: 1rem 0; border-bottom: 1px solid var(--light-alpha-08); }
.quiz-question:last-of-type { border-bottom: 0; }
.question-title { color: var(--lum-ivory); font-weight: 650; line-height: 1.55; }
.question-title small { display: block; margin-bottom: 0.35rem; color: var(--lum-gold); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.quiz-options { display: grid; gap: 0.55rem; margin-top: 0.85rem; }
.quiz-option { min-height: 50px; display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; padding: 0.72rem 0.8rem; color: var(--ink-soft); background: var(--light-alpha-04); border: 1px solid var(--light-alpha-08); border-radius: var(--radius-sm); text-align: left; transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease); }
.quiz-option:hover:not(:disabled), .quiz-option.is-selected { color: var(--lum-ivory); background: var(--gold-alpha-10); border-color: var(--gold-alpha-35); }
.quiz-option:disabled { cursor: default; }
.quiz-option.is-correct { color: var(--lum-ivory); background: var(--success-alpha-16); border-color: var(--success-alpha-28); }
.quiz-option.is-wrong { color: var(--lum-ivory); background: var(--error-alpha-16); border-color: var(--error-alpha-28); }
.option-letter { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: inherit; border: 1px solid currentColor; border-radius: 50%; font-size: 0.72rem; font-weight: 800; }
.question-feedback { display: none; margin-top: 0.8rem; padding: 0.85rem 0.95rem; color: var(--ink-soft); background: var(--light-alpha-04); border-left: 3px solid var(--lum-gold); border-radius: var(--radius-sm); }
.question-feedback.is-visible { display: block; }
.question-feedback.is-success { border-left-color: var(--lum-success); background: var(--success-alpha-16); }
.question-feedback.is-error { border-left-color: var(--lum-error); background: var(--error-alpha-16); }
.quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.quiz-result { display: none; margin-top: 1rem; padding: 1rem; color: var(--lum-ivory); background: var(--gold-alpha-10); border: 1px solid var(--gold-alpha-24); border-radius: var(--radius-md); }
.quiz-result.is-visible { display: block; }
.quiz-result strong { color: var(--lum-gold-soft); }

/* ---------- Summary ---------- */
.summary-section { max-width: calc(var(--content-max) + 6rem); margin: 0 auto; padding: clamp(2rem, 5vw, 5rem) clamp(1.1rem, 4vw, 3rem); }
.print-heading { padding: clamp(1.2rem, 3vw, 2rem); color: var(--lum-dark); background: var(--paper); border: var(--hairline-light); border-radius: var(--radius-md); }
.print-heading p { color: var(--lum-graphite); }
.print-heading h2 { margin: 0.25rem 0 0.7rem; color: var(--lum-dark); }
.certificate-card { margin-top: 1rem; padding: 1.35rem; color: var(--lum-dark); background: linear-gradient(135deg, var(--lum-gold-soft), var(--lum-gold)); border-radius: var(--radius-md); }
.certificate-card p { font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.certificate-card h3 { margin-top: 0.35rem; color: var(--lum-dark); }
.certificate-card span { display: inline-flex; margin-top: 0.5rem; color: var(--lum-graphite); }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.summary-grid article, .summary-block { padding: 1rem; color: var(--lum-dark); background: var(--paper); border: var(--hairline-light); border-radius: var(--radius-md); }
.summary-grid span { display: block; color: var(--lum-graphite); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.summary-grid strong { display: block; margin-top: 0.3rem; color: var(--lum-gold); font-family: var(--font-display); font-size: 2.2rem; line-height: 1; }
.summary-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1rem; }
.summary-block { margin-top: 1rem; }
.summary-block h3 { margin-bottom: 0.8rem; color: var(--lum-dark); font-family: var(--font-body); font-size: 1rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.answers-summary { display: grid; gap: 0.75rem; }
.answer-row { padding: 0.85rem; background: var(--paper-3); border: var(--hairline-light); border-radius: var(--radius-sm); }
.answer-row strong { color: var(--lum-dark); }
.answer-row span { display: inline-flex; margin-top: 0.35rem; color: var(--lum-graphite); }
.answer-row.is-correct { border-left: 3px solid var(--lum-success); }
.answer-row.is-wrong { border-left: 3px solid var(--lum-error); }
.checklist-summary ul, .sources-block ul, #action-plan-summary ul { margin: 0; padding-left: 1.2rem; color: var(--lum-graphite); }

/* ---------- Controls & Dialog ---------- */
.course-controls { position: static; z-index: 80; display: flex; align-items: center; gap: 0.65rem; width: fit-content; margin: 1rem clamp(1rem, 3vw, 2rem) 1rem auto; padding: 0.65rem; background: var(--dark-alpha-82); border: var(--hairline); border-radius: var(--radius-md); backdrop-filter: blur(18px); box-shadow: var(--shadow-soft); }
.sidebar-backdrop { position: fixed; inset: var(--header-h) 0 0; z-index: 70; background: rgba(0, 0, 0, 0.52); }
.glossary-dialog { width: min(980px, calc(100vw - 2rem)); max-height: min(760px, calc(100vh - 2rem)); padding: 0; color: var(--lum-ivory); background: var(--lum-charcoal); border: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.glossary-dialog::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(8px); }
.dialog-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; background: var(--dark-alpha-92); border-bottom: var(--hairline); }
.dialog-head h2 { color: var(--lum-ivory); font-size: clamp(1.8rem, 4vw, 3rem); }
.glossary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding: 1rem; }
.glossary-grid article { padding: 1rem; background: var(--light-alpha-04); border: 1px solid var(--light-alpha-08); border-radius: var(--radius-md); }
.glossary-grid h3 { margin-bottom: 0.35rem; color: var(--lum-gold-soft); font-family: var(--font-body); font-size: 0.95rem; font-weight: 800; }
.glossary-grid p { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .course-frame { grid-template-columns: 1fr; }
  .course-sidebar { position: fixed; top: var(--header-h); left: 0; z-index: 90; width: min(88vw, var(--sidebar-w)); transform: translateX(-105%); transition: transform 240ms var(--ease); box-shadow: var(--shadow-soft); }
  .course-sidebar.is-open { transform: translateX(0); }
  .menu-button { display: inline-flex; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .top-progress { display: none; }
  .hero-section { grid-template-columns: 1fr; }
  .hero-visual { min-height: 420px; }
}

@media (max-width: 760px) {
  :root { --header-h: 66px; }
  .topbar { padding: 0 0.75rem; }
  .brand-cluster { gap: 0.5rem; }
  .course-site-nav > .course-site-link:not(.course-tools-toggle) { display: none; }
  .course-site-link { min-height: 34px; padding: 0 0.62rem; font-size: 0.66rem; }
  .course-tools-panel { left: auto; right: 0; }
  .brand-mark small { display: none; }
  .brand-mark strong { max-width: 120px; }
  .topbar-actions .ghost-button { display: none; }
  .hero-section { min-height: auto; padding-top: 2.3rem; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats span { min-height: 78px; }
  .hero-visual { min-height: 330px; }
  .signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; inset: auto; width: 100%; margin-top: -2rem; }
  .module-grid, .summary-grid, .glossary-grid { grid-template-columns: 1fr; }
  .learning-card { min-height: auto; }
  .quiz-head { display: grid; }
  .quiz-status { justify-self: start; }
  .course-controls { width: calc(100% - 1.5rem); margin: 1rem auto 0.75rem; justify-content: space-between; }
  .course-controls .ghost-button { display: none; }
  .course-controls button { flex: 1; padding-inline: 0.6rem; font-size: 0.76rem; }
}

@media (max-width: 430px) {
  h1 { font-size: clamp(2.25rem, 15vw, 3.3rem); }
  .hero-actions, .summary-actions, .quiz-actions { display: grid; }
  .hero-actions button, .summary-actions button, .quiz-actions button { width: 100%; }
  .hero-stats { grid-template-columns: 1fr; }
  .decision-card strong { font-size: 1.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Print ---------- */
@media print {
  @page { margin: 14mm; }
  html, body { overflow: visible; background: var(--print-paper) !important; color: var(--print-ink) !important; }
  body::before, .no-print, .topbar, .course-sidebar, .hero-section, .intro-panel, .module-section, .course-controls, .sidebar-backdrop, .glossary-dialog { display: none !important; }
  .course-frame { display: block; min-height: auto; padding: 0; }
  .course-main { padding: 0; }
  .summary-section { display: block !important; max-width: none; margin: 0; padding: 0; color: var(--print-ink); }
  .print-heading, .summary-grid article, .summary-block, .certificate-card, .answer-row { break-inside: avoid; color: var(--print-ink) !important; background: var(--print-paper) !important; border: 1px solid var(--print-muted) !important; box-shadow: none !important; }
  .print-heading h2, .summary-block h3, .certificate-card h3, .summary-grid strong, .answer-row strong { color: var(--print-ink) !important; }
  .print-heading p, .summary-grid span, .answer-row span, .source-note, .checklist-summary ul, .sources-block ul, #action-plan-summary ul { color: var(--print-muted) !important; }
  .summary-grid { grid-template-columns: repeat(3, 1fr); }
  .answers-summary { gap: 0.35rem; }
}