:root {
  --navy-950: #031425;
  --navy-900: #061c35;
  --navy-850: #082641;
  --navy-800: #0b3151;
  --blue-700: #0062a9;
  --blue-600: #0072ce;
  --blue-500: #1598df;
  --cyan-400: #48d8f5;
  --cyan-200: #b9f4ff;
  --ink: #10263d;
  --muted: #617386;
  --line: #dbe6ef;
  --surface: #ffffff;
  --surface-soft: #f2f7fb;
  --red: #e33643;
  --red-dark: #bd1f2b;
  --green: #0da178;
  --amber: #e9a527;
  --violet: #7b68ee;
  --shadow-sm: 0 8px 24px rgba(5, 37, 66, .09);
  --shadow-md: 0 22px 60px rgba(5, 37, 66, .16);
  --shadow-xl: 0 40px 100px rgba(0, 17, 38, .32);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --font-scale: 1;
  --header-height: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: calc(16px * var(--font-scale)); }
body {
  margin: 0;
  color: var(--ink);
  background: #eef5fa;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }

.skip-link { position: fixed; top: -100px; left: 16px; z-index: 9999; padding: 12px 18px; color: #fff; background: #000; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.ambient { position: fixed; pointer-events: none; z-index: -1; border-radius: 50%; filter: blur(90px); opacity: .38; }
.ambient-one { width: 420px; height: 420px; top: -180px; left: -160px; background: #41c9f6; }
.ambient-two { width: 480px; height: 480px; top: 42vh; right: -230px; background: #0072ce; opacity: .16; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 clamp(18px, 4vw, 64px);
  color: #fff;
  background: rgba(5, 27, 50, .92);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; padding: 0; color: #fff; background: transparent; border: 0; text-align: left; }
.institutional-logo { display: grid; place-items: center; width: 178px; height: 50px; padding: 5px 8px; background: #fff; border-radius: 11px; box-shadow: 0 8px 24px rgba(0,0,0,.18); overflow: hidden; }
.institutional-logo img { display: block; width: 162px; height: auto; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-size: 1.05rem; letter-spacing: -.01em; }
.brand-copy small { color: #9ec3dc; font-size: .72rem; font-weight: 600; letter-spacing: .04em; }
.desktop-nav { display: flex; align-items: center; gap: 5px; padding: 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.05); }
.nav-link { position: relative; padding: 9px 17px; color: #b9d1e2; background: transparent; border: 0; border-radius: 999px; font-size: .9rem; font-weight: 700; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-link.active { color: #fff; background: var(--blue-600); box-shadow: 0 8px 18px rgba(0,114,206,.25); }
.top-actions { display: flex; justify-self: end; gap: 7px; }
.icon-button { display: inline-grid; place-items: center; min-width: 39px; height: 39px; padding: 0 9px; color: #d9ebf7; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; font-size: .8rem; font-weight: 800; }
.icon-button:hover { background: rgba(255,255,255,.14); }

.view { display: none; min-height: calc(100vh - var(--header-height)); }
.view.active { display: block; animation: view-in .38s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.section-shell { width: min(1260px, calc(100% - 40px)); margin-inline: auto; }
.reveal { animation: rise .65s cubic-bezier(.22,.75,.22,1) both; }
.delay-1 { animation-delay: .12s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.hero-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(500px, 1.12fr);
  align-items: center;
  min-height: 720px;
  padding: clamp(62px, 8vh, 108px) clamp(24px, 7vw, 116px) 80px;
  color: #fff;
  background:
    radial-gradient(circle at 74% 40%, rgba(0,140,213,.3), transparent 32%),
    linear-gradient(125deg, #041628 0%, #072844 54%, #063a5c 100%);
  overflow: hidden;
}
.hero-shell::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(94,231,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(94,231,255,.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to right, transparent 10%, #000 60%); }
.hero-shell::after { content: ""; position: absolute; width: 70vw; height: 70vw; right: -42vw; top: -32vw; border: 1px solid rgba(101,220,255,.1); border-radius: 50%; box-shadow: 0 0 0 90px rgba(70,204,241,.025), 0 0 0 180px rgba(70,204,241,.02); }
.hero-copy, .hero-visual { position: relative; z-index: 2; }
.eyebrow, .kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--cyan-400); font-size: .75rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-400); box-shadow: 0 0 0 0 rgba(72,216,245,.55); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(72,216,245,0); } 100% { box-shadow: 0 0 0 0 rgba(72,216,245,0); } }
.hero-copy h1, .page-hero h1 { margin: 24px 0 20px; max-width: 780px; font-size: clamp(3.35rem, 6.3vw, 6.75rem); line-height: .91; letter-spacing: -.065em; }
.hero-copy h1 span, .page-hero h1 span { color: var(--cyan-400); }
.hero-lead { max-width: 680px; margin: 0; color: #c5d9e8; font-size: clamp(1.05rem, 1.4vw, 1.28rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; padding: 12px 20px; border: 0; border-radius: 13px; font-weight: 850; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: #fff; background: linear-gradient(135deg, var(--blue-600), #179de6); box-shadow: 0 14px 35px rgba(0,114,206,.3); }
.button.primary:hover { box-shadow: 0 18px 42px rgba(0,114,206,.4); }
.button.glass { color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); }
.button.white { color: var(--navy-900); background: #fff; box-shadow: var(--shadow-md); }
.button.secondary { color: var(--blue-700); background: #e4f3fc; }
.button.danger { color: #fff; background: var(--red); }
.button.xl { min-height: 59px; padding: 15px 25px; border-radius: 16px; font-size: 1rem; }
.button.wide { width: 100%; }
.button[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; color: #8fb5cd; font-size: .78rem; font-weight: 700; }
.hero-trust span::first-letter { color: var(--cyan-400); }

.hero-visual { min-width: 0; }
.command-card { position: relative; padding: 18px; background: linear-gradient(145deg, rgba(11,57,87,.85), rgba(3,23,42,.92)); border: 1px solid rgba(116,223,255,.21); border-radius: 28px; box-shadow: var(--shadow-xl), inset 0 1px rgba(255,255,255,.06); transform: perspective(1200px) rotateY(-5deg) rotateX(2deg); }
.command-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(101,225,255,.6), transparent 35%, rgba(0,114,206,.32)); mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.command-head { display: flex; justify-content: space-between; align-items: center; padding: 1px 3px 15px; color: #90bed8; font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.command-head span { display: flex; align-items: center; gap: 8px; }
.command-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-400); box-shadow: 0 0 10px var(--cyan-400); }
.command-head .status-live { color: #75f0c4; }
.hospital-scene { position: relative; aspect-ratio: 1.55; border: 1px solid rgba(99,213,245,.14); border-radius: 19px; background: radial-gradient(circle at 52% 44%, rgba(37,142,191,.25), transparent 50%), #061f36; overflow: hidden; }
.hospital-scene > svg { display: block; width: 100%; height: 100%; }
.hospital-scene.real-photo-scene { background-color: #061f36; background-image: url("photos/huil-ortofoto-real.webp"); background-position: center; background-repeat: no-repeat; background-size: contain; }
.hospital-scene.real-photo-scene > svg { opacity: 0; }
.building { animation: float 5.5s ease-in-out infinite; transform-origin: center; }
@keyframes float { 50% { transform: translateY(-7px); } }
.route-line { animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -42; } }
.signal-tag { position: absolute; display: flex; align-items: center; gap: 8px; padding: 7px 10px; color: #daf8ff; background: rgba(3,22,40,.76); border: 1px solid rgba(85,219,251,.3); border-radius: 9px; backdrop-filter: blur(8px); font-size: .63rem; font-weight: 900; letter-spacing: .08em; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.signal-tag b { display: grid; place-items: center; width: 22px; height: 22px; color: var(--navy-950); background: var(--cyan-400); border-radius: 6px; font-size: .58rem; }
.signal-one { left: 5%; top: 20%; }
.signal-two { right: 6%; top: 34%; }
.signal-three { left: 13%; bottom: 9%; }
.command-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.command-footer div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); border-radius: 13px; }
.command-footer span { color: #86abc3; font-size: .67rem; }
.command-footer strong { color: #fff; font-size: 1rem; letter-spacing: .04em; }

.metrics-grid { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: -42px; }
.metric-card { min-height: 118px; display: flex; align-items: center; gap: 18px; padding: 23px; background: rgba(255,255,255,.96); border: 1px solid rgba(197,218,232,.8); border-radius: 20px; box-shadow: var(--shadow-md); backdrop-filter: blur(12px); }
.metric-number { color: var(--blue-600); font-size: 2.9rem; font-weight: 950; line-height: 1; letter-spacing: -.06em; }
.metric-card div { display: flex; flex-direction: column; }
.metric-card strong { font-size: .95rem; }
.metric-card small { margin-top: 3px; color: var(--muted); font-size: .73rem; }
.metric-card.emergency-metric { color: #fff; background: linear-gradient(135deg, var(--red-dark), var(--red)); border-color: transparent; }
.metric-card.emergency-metric small { color: #ffd8db; }
.metric-icon { display: grid; place-items: center; width: 55px; height: 55px; color: #fff; background: rgba(255,255,255,.14); border-radius: 16px; font-size: 2rem; }

.home-section { padding-top: 102px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.section-heading h2, .scenario-banner h2, .medals-panel h2 { margin: 8px 0 0; font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.03; letter-spacing: -.045em; }
.kicker { color: var(--blue-600); }
.text-link { padding: 8px 0; color: var(--blue-700); background: transparent; border: 0; border-bottom: 1px solid #9ecce9; font-size: .9rem; font-weight: 850; }
.text-link span { margin-left: 6px; }
.learning-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.learning-path article { position: relative; min-height: 250px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.learning-path article:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); }
.learning-path article::after { content: ""; position: absolute; right: -55px; bottom: -60px; width: 145px; height: 145px; border-radius: 50%; background: #eef8fd; }
.path-index { position: absolute; top: 20px; right: 22px; color: #d3e2ec; font-size: 2.2rem; font-weight: 950; letter-spacing: -.08em; }
.path-icon { display: grid; place-items: center; width: 57px; height: 57px; margin-bottom: 28px; border-radius: 18px; font-style: normal; font-size: 1.65rem; }
.path-icon.cyan { color: #057a9b; background: #dffaff; }
.path-icon.blue { color: #075eaa; background: #e1f1ff; }
.path-icon.amber { color: #9c6500; background: #fff2d6; }
.path-icon.green { color: #087b5b; background: #dcf8ef; }
.learning-path h3 { margin: 0 0 9px; font-size: 1.25rem; }
.learning-path p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: .92rem; }
.scenario-banner { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 90px; margin-bottom: 110px; padding: 48px 52px; color: #fff; background: radial-gradient(circle at 76% 20%, rgba(72,216,245,.3), transparent 27%), linear-gradient(135deg, #07345c, #0072ce); border-radius: 30px; box-shadow: 0 35px 80px rgba(0,83,145,.25); }
.scenario-banner .kicker { color: var(--cyan-200); }
.scenario-banner p { max-width: 700px; margin: 14px 0 0; color: #cae8f8; }
.simulator-entry { max-width: 390px; text-align: left; }
.simulator-entry.is-locked { color: #36566d; background: #e9f2f7; }

.page-hero { position: relative; padding: 78px 0 82px; color: #fff; background: radial-gradient(circle at 80% 20%, rgba(42,173,229,.26), transparent 32%), linear-gradient(125deg, #041628, #07395c); overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(94,231,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94,231,255,.05) 1px, transparent 1px); background-size: 40px 40px; }
.page-hero .section-shell { position: relative; z-index: 2; }
.page-hero h1 { max-width: 930px; margin: 18px 0 18px; font-size: clamp(3rem, 5vw, 5.7rem); }
.page-hero p { max-width: 800px; margin: 0; color: #bbd2e1; font-size: 1.1rem; }
.learning-progress { width: min(650px, 100%); margin-top: 34px; }
.learning-progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 8px; color: #bcd6e6; font-size: .82rem; }
.learning-progress strong { color: #fff; }
.progress-track { width: 100%; height: 8px; background: rgba(178,218,240,.2); border-radius: 99px; overflow: hidden; }
.progress-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan-400), #fff); border-radius: inherit; transition: width .45s ease; }
.learn-shell { padding-top: 42px; padding-bottom: 110px; }
.module-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 30px; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill { padding: 10px 16px; color: #526b80; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; font-weight: 800; }
.filter-pill.active { color: #fff; background: var(--navy-800); border-color: var(--navy-800); }
.module-search, .glossary-search { display: flex; align-items: center; gap: 9px; min-width: 300px; padding: 11px 15px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.module-search input, .glossary-search input { width: 100%; min-width: 0; color: var(--ink); background: transparent; border: 0; outline: 0; }
.modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.module-card { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 25px; background: #fff; border: 1px solid var(--line); border-radius: 23px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.module-card:hover { transform: translateY(-5px); border-color: #a9d4ee; box-shadow: var(--shadow-md); }
.module-card::before { content: ""; position: absolute; width: 170px; height: 170px; top: -90px; right: -75px; border-radius: 50%; background: var(--card-accent-soft); }
.module-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: start; }
.module-icon { display: grid; place-items: center; width: 54px; height: 54px; color: var(--card-accent); background: var(--card-accent-soft); border-radius: 16px; }
.module-icon svg { width: 29px; height: 29px; }
.module-number { color: #c7d8e4; font-size: 2.35rem; font-weight: 950; letter-spacing: -.07em; }
.module-category { margin-top: 25px; color: var(--card-accent); font-size: .67rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.module-card h2 { margin: 7px 0 9px; font-size: 1.28rem; line-height: 1.18; letter-spacing: -.025em; }
.module-card p { flex: 1; margin: 0; color: var(--muted); font-size: .87rem; }
.module-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 23px; padding-top: 17px; border-top: 1px solid #e9f0f5; }
.module-footer span { color: #718699; font-size: .72rem; font-weight: 750; }
.module-open { display: grid; place-items: center; width: 39px; height: 39px; color: #fff; background: var(--card-accent); border: 0; border-radius: 12px; font-weight: 900; }
.module-card.completed .module-number::after { content: "✓"; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 6px; color: #fff; background: var(--green); border-radius: 50%; font-size: .65rem; vertical-align: middle; }
.empty-state { grid-column: 1/-1; padding: 70px 30px; text-align: center; background: #fff; border: 1px dashed #aec7d8; border-radius: 23px; color: var(--muted); }

.module-hero { position: relative; padding: 44px 0 70px; color: #fff; background: linear-gradient(135deg, var(--navy-950), var(--module-color, #075d94)); overflow: hidden; }
.module-hero::after { content: attr(data-number); position: absolute; right: 5vw; top: -55px; color: rgba(255,255,255,.045); font-size: 17rem; font-weight: 950; line-height: 1; }
.module-hero-inner { position: relative; z-index: 2; width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.module-back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; color: #c7e0ee; background: transparent; border: 0; font-weight: 750; }
.module-hero-grid { display: grid; grid-template-columns: 1fr 230px; gap: 50px; align-items: end; margin-top: 40px; }
.module-hero .module-label { color: var(--cyan-200); font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.module-hero h1 { max-width: 850px; margin: 12px 0 18px; font-size: clamp(2.8rem, 5vw, 5rem); line-height: .96; letter-spacing: -.055em; }
.module-hero p { max-width: 760px; margin: 0; color: #c2dae8; font-size: 1.08rem; }
.module-hero-icon { display: grid; place-items: center; width: 190px; height: 190px; justify-self: end; color: var(--cyan-200); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 45px; transform: rotate(5deg); }
.module-hero-icon svg { width: 100px; height: 100px; }
.module-body { width: min(1120px, calc(100% - 40px)); margin: -25px auto 100px; position: relative; z-index: 4; }
.module-key { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: center; padding: 24px 28px; color: #fff; background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); border-radius: 20px; box-shadow: var(--shadow-md); }
.module-key > span { display: grid; place-items: center; width: 56px; height: 56px; background: rgba(255,255,255,.14); border-radius: 16px; font-size: 1.8rem; font-weight: 950; }
.module-key small { display: block; color: #bfe9ff; font-size: .67rem; font-weight: 900; letter-spacing: .13em; }
.module-key strong { display: block; margin-top: 4px; font-size: 1.08rem; }
.content-block { margin-top: 26px; padding: 34px; background: #fff; border: 1px solid var(--line); border-radius: 23px; box-shadow: var(--shadow-sm); }
.content-block h2 { margin: 0 0 21px; font-size: 1.75rem; letter-spacing: -.035em; }
.content-block h3 { margin: 25px 0 10px; font-size: 1.12rem; }
.content-block p { color: #4b6073; }
.content-block ul, .content-block ol { padding-left: 22px; color: #445c70; }
.content-block li { margin: 8px 0; }
.content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.content-tile { padding: 20px; background: var(--surface-soft); border: 1px solid #e1ebf2; border-radius: 16px; }
.content-tile strong { display: block; margin-bottom: 7px; color: var(--ink); }
.content-tile p { margin: 0; font-size: .9rem; }
.content-tile.accent { background: #e7f7ff; border-color: #b9e6fa; }
.content-tile.warning { background: #fff7e7; border-color: #f1d398; }
.content-tile.danger { background: #fff0f1; border-color: #f1c0c4; }
.content-tile.success { background: #eaf9f4; border-color: #b7e5d7; }
.flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; counter-reset: flow; }
.flow-step { position: relative; min-height: 135px; padding: 18px; background: #f1f7fb; border: 1px solid #d8e7f0; border-radius: 16px; }
.flow-step::before { counter-increment: flow; content: "0" counter(flow); display: block; margin-bottom: 11px; color: var(--blue-600); font-weight: 950; }
.flow-step strong { display: block; font-size: .9rem; }
.flow-step p { margin: 5px 0 0; font-size: .8rem; }
.callout { display: flex; gap: 15px; margin: 22px 0; padding: 18px 20px; border-radius: 15px; }
.callout > i { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-style: normal; font-weight: 950; }
.callout p { margin: 0; }
.callout.blue { background: #e9f7ff; color: #174f73; }
.callout.blue > i { color: #fff; background: var(--blue-600); }
.callout.red { background: #fff0f1; color: #7d2630; }
.callout.red > i { color: #fff; background: var(--red); }
.callout.amber { background: #fff6e5; color: #72501b; }
.callout.amber > i { color: #fff; background: var(--amber); }
.source-chip { display: inline-flex; margin-top: 18px; padding: 6px 10px; color: #597184; background: #eef4f8; border-radius: 8px; font-size: .7rem; font-weight: 750; }
.module-quiz-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 26px; padding: 31px; color: #fff; background: linear-gradient(135deg, #082943, #075c92); border-radius: 22px; }
.module-quiz-cta h2 { margin: 0 0 5px; }
.module-quiz-cta p { margin: 0; color: #bad5e5; }

.challenge-hero { padding: 80px 0; }
.challenge-intro { display: grid; grid-template-columns: 1fr 230px; gap: 60px; align-items: center; }
.score-orbit { position: relative; display: grid; place-items: center; justify-self: end; width: 190px; height: 190px; color: #fff; border: 1px solid rgba(112,226,255,.5); border-radius: 50%; box-shadow: inset 0 0 45px rgba(72,216,245,.1), 0 0 60px rgba(0,114,206,.15); }
.score-orbit span { font-size: 4rem; font-weight: 950; letter-spacing: -.08em; line-height: .9; }
.score-orbit small { color: var(--cyan-400); font-size: .66rem; font-weight: 900; letter-spacing: .18em; }
.score-orbit i { position: absolute; width: 10px; height: 10px; background: var(--cyan-400); border-radius: 50%; box-shadow: 0 0 12px var(--cyan-400); }
.score-orbit i:nth-of-type(1) { top: 13px; left: 48px; }
.score-orbit i:nth-of-type(2) { right: 8px; bottom: 60px; }
.score-orbit i:nth-of-type(3) { left: 11px; bottom: 45px; }
.levels-shell { padding-top: 52px; padding-bottom: 110px; }
.levels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; }
.level-card { position: relative; min-height: 430px; display: flex; flex-direction: column; padding: 29px; color: #fff; border-radius: 27px; overflow: hidden; box-shadow: var(--shadow-md); }
.level-card::after { content: ""; position: absolute; width: 250px; height: 250px; right: -115px; top: -100px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.025); }
.level-card.level-1 { background: linear-gradient(145deg, #075ca3, #063d69); }
.level-card.level-2 { background: linear-gradient(145deg, #0a7f89, #07505c); }
.level-card.level-3 { background: linear-gradient(145deg, #a54038, #641e2a); }
.level-card.locked { filter: saturate(.4); }
.level-card > * { position: relative; z-index: 2; }
.level-card-head { display: flex; justify-content: space-between; align-items: start; }
.level-badge { display: grid; place-items: center; width: 59px; height: 59px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; font-size: 1.75rem; }
.level-status { padding: 6px 10px; color: #d8f8ff; background: rgba(0,0,0,.16); border-radius: 999px; font-size: .65rem; font-weight: 900; letter-spacing: .09em; }
.level-card h2 { margin: 35px 0 9px; font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.level-card p { margin: 0; color: rgba(255,255,255,.72); font-size: .9rem; }
.level-stats { display: flex; gap: 18px; margin: 22px 0 25px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
.level-stats span { display: flex; flex-direction: column; font-size: .68rem; color: rgba(255,255,255,.6); }
.level-stats strong { color: #fff; font-size: 1rem; }
.level-topics { flex: 1; display: flex; flex-wrap: wrap; align-content: start; gap: 7px; }
.level-topics span { padding: 5px 8px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.11); border-radius: 7px; font-size: .65rem; }
.level-card .button { margin-top: 23px; color: var(--navy-900); background: #fff; }
.level-card.locked .button { color: #ced8dc; background: rgba(255,255,255,.16); }
.medals-panel { display: grid; grid-template-columns: .75fr 1.25fr; gap: 45px; align-items: center; margin-top: 42px; padding: 35px; background: #fff; border: 1px solid var(--line); border-radius: 25px; box-shadow: var(--shadow-sm); }
.medals-panel h2 { font-size: 2rem; }
.medals-panel p { color: var(--muted); }
.medals-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.medal { min-height: 126px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 14px; color: #9aabba; background: #f2f6f9; border: 1px solid #e1e9ef; border-radius: 16px; text-align: center; filter: grayscale(1); }
.medal.unlocked { color: var(--ink); background: #fff8e8; border-color: #efd49b; filter: none; box-shadow: 0 8px 22px rgba(186,128,20,.12); }
.medal-icon { display: grid; place-items: center; width: 47px; height: 47px; color: #fff; background: #abbac5; border-radius: 50%; font-size: 1.45rem; }
.medal.unlocked .medal-icon { background: linear-gradient(145deg, #f5bd3a, #d7890c); box-shadow: inset 0 0 0 4px rgba(255,255,255,.22); }
.medal strong { font-size: .7rem; line-height: 1.15; }
.progress-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 14px 18px; color: #60788a; background: rgba(255,255,255,.74); border: 1px solid var(--line); border-radius: 15px; font-size: .75rem; }
.progress-tools button { padding: 7px 0; color: var(--blue-700); background: transparent; border: 0; font-size: .75rem; font-weight: 850; }

.game-shell { min-height: calc(100vh - var(--header-height)); padding: 24px clamp(18px, 4vw, 58px) 80px; background: radial-gradient(circle at 80% 20%, rgba(0,114,206,.11), transparent 27%), #eaf3f8; }
.game-header { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 20px; width: min(1180px, 100%); margin: 0 auto 24px; }
.game-header .back-button { color: var(--ink); background: #fff; border-color: var(--line); }
.game-progress-wrap > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; color: #5e7385; font-size: .76rem; font-weight: 800; }
.game-progress-wrap .progress-track { background: #d4e1e9; }
.game-progress-wrap .progress-track i { background: linear-gradient(90deg, var(--blue-600), var(--cyan-400)); }
.score-chip { min-width: 94px; padding: 8px 14px; background: #fff; border: 1px solid var(--line); border-radius: 13px; text-align: center; box-shadow: var(--shadow-sm); }
.score-chip small { display: block; color: #7690a4; font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.score-chip strong { color: var(--blue-600); font-size: 1.45rem; line-height: 1.15; }
.game-layout { display: grid; grid-template-columns: 215px minmax(0, 820px); justify-content: center; gap: 24px; }
.game-aside { display: flex; flex-direction: column; gap: 14px; }
.streak-card { display: grid; place-items: center; padding: 20px; color: #fff; background: linear-gradient(145deg, #08365b, #061f36); border-radius: 19px; box-shadow: var(--shadow-sm); }
.streak-card span { color: #98bad0; font-size: .61rem; font-weight: 900; letter-spacing: .15em; }
.streak-card strong { font-size: 3.2rem; line-height: 1; letter-spacing: -.08em; }
.streak-card small { color: var(--cyan-400); }
.question-map { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.question-map i { aspect-ratio: 1; display: grid; place-items: center; color: #728799; background: #edf3f6; border-radius: 6px; font-size: .59rem; font-style: normal; font-weight: 800; }
.question-map i.current { color: #fff; background: var(--blue-600); box-shadow: 0 4px 10px rgba(0,114,206,.28); }
.question-map i.correct { color: #fff; background: var(--green); }
.question-map i.wrong { color: #fff; background: var(--red); }
.plan-tip { padding: 17px; background: #fff7e7; border: 1px solid #efd39a; border-radius: 16px; }
.plan-tip span { color: #91611a; font-size: .61rem; font-weight: 900; letter-spacing: .1em; }
.plan-tip p { margin: 6px 0 0; color: #6f542d; font-size: .77rem; }
.question-card { min-height: 630px; padding: clamp(25px, 4vw, 48px); background: #fff; border: 1px solid var(--line); border-radius: 27px; box-shadow: var(--shadow-md); }
.question-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 25px; }
.question-type, .question-topic { padding: 6px 10px; border-radius: 8px; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.question-type { color: #056199; background: #e2f4ff; }
.question-topic { color: #657b8d; background: #eef3f6; }
.timer { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--red); font-size: .78rem; }
.timer i { width: 9px; height: 9px; background: currentColor; border-radius: 50%; animation: pulse-red 1s infinite; }
@keyframes pulse-red { 50% { opacity: .3; } }
.question-card > h1 { margin: 0 0 13px; font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.13; letter-spacing: -.04em; }
.question-context { margin: 0 0 26px; color: var(--muted); }
.answers-grid { display: grid; gap: 11px; }
.answer-option { width: 100%; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 14px; padding: 15px 18px; color: #2c465b; background: #f7fafc; border: 1.5px solid #dbe6ed; border-radius: 15px; text-align: left; transition: border-color .16s, background .16s, transform .16s; }
.answer-option:hover { transform: translateX(3px); border-color: #8ac8eb; background: #eff9ff; }
.answer-option.selected { color: #084f7d; background: #e7f6ff; border-color: var(--blue-500); box-shadow: inset 0 0 0 1px var(--blue-500); }
.answer-option .answer-key { display: grid; place-items: center; width: 37px; height: 37px; color: #698397; background: #fff; border: 1px solid #d7e3eb; border-radius: 11px; font-weight: 900; }
.answer-option.selected .answer-key { color: #fff; background: var(--blue-600); border-color: var(--blue-600); }
.answer-option strong { font-size: .93rem; }
.tf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.tf-grid .answer-option { display: flex; min-height: 135px; justify-content: center; text-align: center; }
.tf-grid .answer-key { font-size: 1.5rem; }
.visual-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.visual-option { grid-template-columns: 92px 1fr; min-height: 132px; }
.visual-icon { display: grid; place-items: center; width: 86px; height: 86px; color: var(--blue-700); background: #fff; border: 1px solid #dce9f1; border-radius: 15px; }
.visual-icon svg { width: 58px; height: 58px; }
.sequence-list { display: grid; gap: 10px; }
.sequence-item { width: 100%; display: flex; align-items: center; gap: 13px; padding: 14px 17px; color: #365066; background: #f6f9fb; border: 1.5px solid #dbe6ed; border-radius: 14px; text-align: left; }
.sequence-item:hover { border-color: #8ac8eb; }
.sequence-item.picked { color: #07588e; background: #e5f5ff; border-color: #75c5ec; }
.sequence-rank { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; color: #fff; background: #9bb0bf; border-radius: 10px; font-size: .78rem; font-weight: 900; }
.sequence-item.picked .sequence-rank { background: var(--blue-600); }
.sequence-help { display: flex; justify-content: space-between; margin: 0 0 10px; color: #70879a; font-size: .75rem; }
.sequence-help button { color: var(--blue-700); background: transparent; border: 0; font-weight: 800; }
.matching-grid { display: grid; gap: 12px; }
.matching-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.matching-left { min-height: 53px; display: flex; align-items: center; padding: 12px 15px; color: #23425a; background: #eef6fa; border-radius: 13px; font-weight: 800; }
.matching-row select { width: 100%; min-height: 53px; padding: 10px 38px 10px 13px; color: #3c566b; background: #fff; border: 1.5px solid #ccdce7; border-radius: 13px; }
.question-actions { margin-top: 27px; }

.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,15,27,.72); backdrop-filter: blur(9px); animation: fade .2s ease both; }
@keyframes fade { from { opacity: 0; } }
.modal-panel { position: relative; z-index: 1; width: min(720px, 100%); max-height: calc(100vh - 40px); padding: 34px; background: #fff; border-radius: 26px; box-shadow: 0 40px 120px rgba(0,0,0,.38); overflow-y: auto; animation: modal-in .3s cubic-bezier(.22,.8,.22,1) both; }
@keyframes modal-in { from { opacity: 0; transform: scale(.95) translateY(16px); } }
.modal-close { position: absolute; top: 17px; right: 17px; display: grid; place-items: center; width: 39px; height: 39px; color: #566e81; background: #eef3f6; border: 0; border-radius: 12px; font-size: 1.4rem; }
.modal-kicker { color: var(--red); font-size: .66rem; font-weight: 900; letter-spacing: .15em; }
.modal-panel h2 { margin: 8px 45px 7px 0; font-size: 2rem; line-height: 1.05; letter-spacing: -.04em; }
.modal-lead { margin: 0 0 22px; color: var(--muted); }
.emergency-panel { width: min(780px, 100%); }
.phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.phone-grid article { display: flex; flex-direction: column; padding: 18px; background: #f4f8fb; border: 1px solid #dce7ee; border-radius: 16px; }
.phone-grid article span { color: #5f7588; font-size: .73rem; font-weight: 750; }
.phone-grid article a { margin-top: 3px; color: var(--blue-700); font-size: 1.65rem; font-weight: 950; text-decoration: none; letter-spacing: -.035em; }
.phone-grid article small { color: #7990a2; }
.phone-grid .phone-primary { color: #fff; background: linear-gradient(135deg, #075b98, #0072ce); border: 0; }
.phone-grid .phone-primary span, .phone-grid .phone-primary small { color: #c4e7f9; }
.phone-grid .phone-primary a { color: #fff; }
.phone-grid .phone-112 { color: #fff; background: linear-gradient(135deg, var(--red-dark), var(--red)); border: 0; }
.phone-grid .phone-112 span, .phone-grid .phone-112 small, .phone-grid .phone-112 a { color: #fff; }
.golden-rule { display: flex; gap: 14px; margin-top: 15px; padding: 17px; background: #fff7e8; border: 1px solid #efd7a5; border-radius: 15px; }
.golden-rule > i { display: grid; place-items: center; flex: 0 0 37px; height: 37px; color: #fff; background: var(--amber); border-radius: 11px; font-style: normal; font-weight: 950; }
.golden-rule strong { color: #79551b; }
.golden-rule p { margin: 2px 0 0; color: #715b39; font-size: .82rem; }
.glossary-panel { width: min(860px, 100%); }
.glossary-search { width: 100%; margin: 22px 0; background: #f7fafc; }
.glossary-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.glossary-item { display: grid; grid-template-columns: 70px 1fr; gap: 13px; padding: 14px; background: #f5f8fa; border-radius: 13px; }
.glossary-item b { color: var(--blue-700); font-size: .9rem; }
.glossary-item span { color: #526a7d; font-size: .8rem; }
.feedback-panel { width: min(650px, 100%); text-align: center; }
.feedback-icon { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 16px; color: #fff; border-radius: 50%; font-size: 2rem; font-weight: 950; }
.feedback-icon.correct { background: var(--green); box-shadow: 0 14px 35px rgba(13,161,120,.26); }
.feedback-icon.wrong { background: var(--red); box-shadow: 0 14px 35px rgba(227,54,67,.25); }
.feedback-panel h2 { margin: 0; }
.feedback-panel > p { color: var(--muted); }
.feedback-answer { margin: 18px 0; padding: 16px; color: #294d65; background: #eef7fb; border-radius: 14px; text-align: left; }
.feedback-source { display: inline-flex; margin-bottom: 20px; padding: 6px 9px; color: #667e90; background: #eff3f6; border-radius: 7px; font-size: .68rem; }
.feedback-points { color: var(--green); font-size: .85rem; font-weight: 900; }

.results-shell { padding-top: 65px; padding-bottom: 110px; }
.results-hero { display: grid; grid-template-columns: 260px 1fr; gap: 38px; align-items: center; padding: 39px; color: #fff; background: radial-gradient(circle at 20% 30%, rgba(72,216,245,.25), transparent 27%), linear-gradient(135deg, #061d35, #075c92); border-radius: 28px; box-shadow: var(--shadow-xl); }
.result-ring { --percent: 0; position: relative; display: grid; place-items: center; width: 210px; height: 210px; border-radius: 50%; background: conic-gradient(var(--cyan-400) calc(var(--percent) * 1%), rgba(255,255,255,.12) 0); }
.result-ring::before { content: ""; position: absolute; width: 168px; height: 168px; background: #082b48; border-radius: 50%; }
.result-ring div { position: relative; display: grid; place-items: center; }
.result-ring strong { font-size: 3.4rem; line-height: 1; letter-spacing: -.07em; }
.result-ring small { color: #a9d3e8; }
.results-copy .result-status { display: inline-flex; padding: 6px 11px; color: #07253e; background: var(--cyan-400); border-radius: 999px; font-size: .67rem; font-weight: 950; letter-spacing: .12em; }
.results-copy h1 { margin: 15px 0 9px; font-size: clamp(2.4rem, 4.7vw, 4.5rem); line-height: .96; letter-spacing: -.055em; }
.results-copy p { margin: 0; color: #c0dae8; }
.results-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.results-stats div { padding: 13px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; }
.results-stats strong { display: block; font-size: 1.35rem; }
.results-stats span { color: #9fc2d5; font-size: .68rem; }
.breakdown-card, .result-actions-card { margin-top: 25px; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 23px; box-shadow: var(--shadow-sm); }
.breakdown-card h2, .result-actions-card h2 { margin-top: 0; font-size: 1.8rem; letter-spacing: -.035em; }
.breakdown-row { display: grid; grid-template-columns: 180px 1fr 45px; gap: 15px; align-items: center; margin: 15px 0; }
.breakdown-row > span { color: #536b7e; font-size: .82rem; font-weight: 750; }
.breakdown-track { height: 9px; background: #e5edf2; border-radius: 99px; overflow: hidden; }
.breakdown-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-600), var(--cyan-400)); border-radius: inherit; }
.breakdown-row strong { text-align: right; font-size: .82rem; }
.result-actions-card { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.result-actions-card p { margin: 5px 0 0; color: var(--muted); }
.result-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.emergency-fab { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; align-items: center; gap: 11px; padding: 9px 16px 9px 9px; color: #fff; background: linear-gradient(135deg, var(--red-dark), var(--red)); border: 2px solid rgba(255,255,255,.85); border-radius: 999px; box-shadow: 0 15px 38px rgba(159,20,32,.37); }
.emergency-fab:hover { transform: translateY(-2px); }
.fab-icon { display: grid; place-items: center; width: 39px; height: 39px; background: rgba(255,255,255,.16); border-radius: 50%; font-size: 1.1rem; }
.emergency-fab > span:last-child { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.emergency-fab small { color: #ffd8db; font-size: .55rem; font-weight: 900; letter-spacing: .12em; }
.emergency-fab strong { font-size: .78rem; }
.mobile-nav { display: none; }
.toast { position: fixed; left: 50%; bottom: 30px; z-index: 1500; max-width: calc(100% - 40px); padding: 11px 16px; color: #fff; background: #0c253b; border-radius: 11px; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .22s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.site-footer { display: flex; justify-content: space-between; gap: 30px; padding: 31px clamp(22px,5vw,70px) 100px; color: #90a9bb; background: var(--navy-950); font-size: .72rem; }
.site-footer div { display: flex; flex-direction: column; max-width: 720px; }
.site-footer strong { color: #fff; }

body.high-contrast { --ink: #000; --muted: #24313c; --line: #8295a3; --surface-soft: #edf4f7; }
body.high-contrast .hero-shell, body.high-contrast .page-hero, body.high-contrast .module-hero { background: #000; }
body.high-contrast .hero-lead, body.high-contrast .page-hero p, body.high-contrast .module-hero p { color: #fff; }
body.high-contrast .module-card, body.high-contrast .content-block, body.high-contrast .question-card { border-width: 2px; }
body.high-contrast .answer-option { border-color: #627585; }

@media (max-width: 1100px) {
  .hero-shell { grid-template-columns: 1fr 1fr; padding-inline: 40px; }
  .modules-grid { grid-template-columns: repeat(2, 1fr); }
  .learning-path { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .levels-grid { grid-template-columns: 1fr; }
  .level-card { min-height: 360px; }
  .medals-panel { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  :root { --header-height: 66px; }
  body { padding-bottom: 68px; }
  .topbar { grid-template-columns: 1fr auto; padding-inline: 14px; }
  .institutional-logo { width: 154px; height: 42px; padding: 4px 7px; }
  .institutional-logo img { width: 140px; }
  .brand-copy small { display: none; }
  .desktop-nav { display: none; }
  .top-actions .icon-button:not(.contrast-toggle) { display: none; }
  .hero-shell { grid-template-columns: 1fr; min-height: auto; padding: 58px 20px 80px; }
  .hero-copy h1 { font-size: clamp(3.45rem, 17vw, 5.5rem); }
  .hero-visual { margin-top: 48px; }
  .command-card { transform: none; padding: 11px; }
  .command-footer { grid-template-columns: 1fr; }
  .metrics-grid { margin-top: -38px; }
  .learning-path { grid-template-columns: 1fr 1fr; }
  .scenario-banner { align-items: start; flex-direction: column; padding: 34px 27px; }
  .module-toolbar { align-items: stretch; flex-direction: column; }
  .module-search { min-width: 0; }
  .module-hero-grid { grid-template-columns: 1fr; }
  .module-hero-icon { display: none; }
  .content-grid, .flow-steps { grid-template-columns: 1fr; }
  .challenge-intro { grid-template-columns: 1fr; }
  .score-orbit { display: none; }
  .game-layout { grid-template-columns: 1fr; }
  .game-aside { display: none; }
  .question-card { min-height: 0; }
  .results-hero { grid-template-columns: 1fr; text-align: center; }
  .result-ring { margin-inline: auto; }
  .results-stats { grid-template-columns: repeat(2, 1fr); text-align: left; }
  .result-actions-card { align-items: flex-start; flex-direction: column; }
  .result-actions { justify-content: flex-start; }
  .mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: repeat(4, 1fr); height: 68px; padding-bottom: env(safe-area-inset-bottom); color: #7890a2; background: rgba(255,255,255,.97); border-top: 1px solid #d9e5ec; box-shadow: 0 -8px 28px rgba(5,37,66,.12); backdrop-filter: blur(15px); }
  .mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: inherit; background: transparent; border: 0; font-size: .62rem; font-weight: 800; }
  .mobile-nav button span { font-size: 1.15rem; }
  .mobile-nav button.active { color: var(--blue-600); }
  .emergency-fab { right: 14px; bottom: 79px; padding-right: 9px; }
  .emergency-fab > span:last-child { display: none; }
  .site-footer { padding-bottom: 95px; flex-direction: column; }
}

@media (max-width: 590px) {
  .brand-copy { display: none; }
  .section-shell { width: min(100% - 26px, 1260px); }
  .hero-shell { padding-inline: 16px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-trust { gap: 9px 15px; }
  .hero-visual { margin-inline: -4px; }
  .hospital-scene { aspect-ratio: 1.25; }
  .signal-tag { transform: scale(.86); }
  .metrics-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 94px; }
  .home-section { padding-top: 72px; }
  .section-heading { align-items: start; flex-direction: column; }
  .learning-path { grid-template-columns: 1fr; }
  .learning-path article { min-height: 220px; }
  .scenario-banner { margin-top: 70px; margin-bottom: 75px; }
  .page-hero { padding: 60px 0 64px; }
  .page-hero h1 { font-size: clamp(2.9rem, 15vw, 4.8rem); }
  .modules-grid { grid-template-columns: 1fr; }
  .module-card { min-height: 270px; }
  .module-hero { padding-bottom: 55px; }
  .module-hero h1 { font-size: 2.8rem; }
  .module-body { width: min(100% - 24px, 1120px); }
  .module-key { grid-template-columns: 53px 1fr; padding: 19px; }
  .module-key > span { width: 47px; height: 47px; }
  .content-block { padding: 23px 19px; }
  .module-quiz-cta { align-items: stretch; flex-direction: column; padding: 25px 20px; }
  .phone-grid { grid-template-columns: 1fr; }
  .modal { padding: 10px; }
  .modal-panel { max-height: calc(100vh - 20px); padding: 28px 20px; border-radius: 20px; }
  .glossary-list { grid-template-columns: 1fr; }
  .glossary-item { grid-template-columns: 58px 1fr; }
  .levels-shell { padding-top: 25px; }
  .level-card { min-height: 410px; padding: 24px; }
  .medals-panel { padding: 25px 19px; }
  .medals-row { grid-template-columns: repeat(2, 1fr); }
  .game-shell { padding: 14px 10px 80px; }
  .game-header { grid-template-columns: 42px 1fr 78px; gap: 9px; }
  .score-chip { min-width: 0; padding-inline: 8px; }
  .question-card { padding: 26px 17px; border-radius: 20px; }
  .question-meta { align-items: flex-start; flex-wrap: wrap; }
  .timer { margin-left: 0; }
  .visual-grid { grid-template-columns: 1fr; }
  .visual-option { grid-template-columns: 70px 1fr; min-height: 105px; }
  .visual-icon { width: 66px; height: 66px; }
  .visual-icon svg { width: 45px; height: 45px; }
  .tf-grid { grid-template-columns: 1fr; }
  .tf-grid .answer-option { min-height: 84px; }
  .matching-row { grid-template-columns: 1fr; gap: 5px; padding: 10px; background: #f4f8fa; border-radius: 14px; }
  .results-shell { width: min(100% - 20px, 1260px); padding-top: 16px; }
  .results-hero { padding: 28px 17px; }
  .result-ring { width: 180px; height: 180px; }
  .result-ring::before { width: 144px; height: 144px; }
  .breakdown-card, .result-actions-card { padding: 24px 17px; }
  .breakdown-row { grid-template-columns: 110px 1fr 38px; gap: 8px; }
  .progress-tools { align-items: flex-start; flex-direction: column; }
}

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


/* ======================================================================
   VERSIÓN 3.0 · Design system, modo noche y nuevos componentes
   ====================================================================== */
:root {
  --ok: #0da178; --warn: #e9a527; --danger: #e33643; --info: #0072ce;
  --ill-line: #4b6376; --ill-dark: #1f3446; --ill-red: #e33643; --ill-amber: #e9a527;
  --ill-floor: #e9f1f6; --ill-wall: #d7e3ec; --ill-room: #f5f9fc; --ill-smoke: #8a99a6; --ill-door: #0da178;
  --ill-ground: #eef4f8; --ill-road: #d3dfe8; --ill-node: #e7f7ff; --ill-caption: #34506a;
  --blk-sat: #0072ce; --blk-n: #063d69; --blk-park: #8aa5b8; --blk-tech: #b8621c;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon-button svg { width: 20px; height: 20px; }
.theme-toggle { color: #ffe08a; }
.theme-toggle[aria-pressed="true"] { color: #bfe9ff; }

/* ---------- Modo noche (turno de noche) ---------- */
body.night {
  --ink: #e6eef6; --muted: #9db1c4; --line: #1f3549; --surface: #0b1d30; --surface-soft: #0f2538;
  --ill-floor: #10243a; --ill-wall: #17324a; --ill-room: #142c44; --ill-smoke: #6e8496; --ill-ground: #0c1f33; --ill-road: #1c3550;
  --ill-node: #12314a; --ill-caption: #bcd0e2; --ill-line: #7f9ab0; --ill-dark: #cfe0ee; --blk-park: #40597a;
  color: var(--ink); background: #061527;
}
body.night .ambient-one { opacity: .16; } body.night .ambient-two { opacity: .1; }
body.night .metric-card, body.night .learning-path article, body.night .module-card, body.night .empty-state, body.night .filter-pill,
body.night .module-search, body.night .glossary-search, body.night .medals-panel, body.night .question-card, body.night .question-map,
body.night .score-chip, body.night .modal-panel, body.night .breakdown-card, body.night .result-actions-card, body.night .reco-card,
body.night .game-header .back-button, body.night .smart-review, body.night .daily-card, body.night .prep-card, body.night .quick-tile,
body.night .map-panel, body.night .map-detail, body.night .pocket-card, body.night .sim-card, body.night .sim-role, body.night .module-art,
body.night .read-check, body.night .progress-tools { background: var(--surface); border-color: var(--line); color: var(--ink); }
body.night .learning-path article::after, body.night .module-card::before { opacity: .18; }
body.night .learning-path p, body.night .module-card p, body.night .module-footer span, body.night .medals-panel p, body.night .feedback-panel > p,
body.night .breakdown-row > span, body.night .results-copy p, body.night .glossary-item span, body.night .plan-tip p, body.night .prep-copy p,
body.night .daily-card p, body.night .quick-tile span:last-child, body.night .map-detail p, body.night .sim-intro, body.night .sim-role span { color: var(--muted); }
body.night .filter-pill.active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
body.night .module-search input, body.night .glossary-search input { color: var(--ink); }
body.night .content-tile { background: #0f2538; border-color: #21405a; }
body.night .content-tile.accent { background: #0d2f4a; border-color: #1d5b85; }
body.night .content-tile.warning { background: #3a2c10; border-color: #6b5320; }
body.night .content-tile.danger { background: #3c1418; border-color: #6a2a30; }
body.night .content-tile.success { background: #0f3128; border-color: #1f5a49; }
body.night .flow-step { background: #0f2538; border-color: #21405a; }
body.night .callout.blue { background: #0d2f4a; color: #cbe6f8; }
body.night .callout.red { background: #3c1418; color: #ffd6da; }
body.night .callout.amber { background: #3a2c10; color: #ffe2a8; }
body.night .content-block, body.night .content-block h2, body.night .content-block h3, body.night .content-block p, body.night .content-block li { color: var(--ink); }
body.night .source-chip { background: #12314a; color: #9fc2d5; }
body.night .answer-option, body.night .sequence-item, body.night .matching-left, body.night .matching-row select { color: var(--ink); background: #0f2538; border-color: #23415a; }
body.night .answer-option .answer-key { color: #9fc2d5; background: #12314a; border-color: #23415a; }
body.night .answer-option.selected, body.night .sequence-item.picked { color: #dff3ff; background: #0d3a5e; border-color: var(--blue-500); }
body.night .question-map i { color: #9fc2d5; background: #12314a; }
body.night .plan-tip { background: #3a2c10; border-color: #6b5320; } body.night .plan-tip span { color: #ffd27a; }
body.night .feedback-answer { color: #dff3ff; background: #0d3a5e; } body.night .feedback-source { color: #9fc2d5; background: #12314a; }
body.night .glossary-item { background: #0f2538; } body.night .glossary-item b { color: #6fc6ff; }
body.night .breakdown-track { background: #12314a; }
body.night .medal { color: #6d8399; background: #0f2538; border-color: #21405a; }
body.night .medal.unlocked { color: var(--ink); background: #3a2c10; border-color: #6b5320; }
body.night .game-shell { background: #061527; }
body.night .button.secondary { color: #bfe9ff; background: #12314a; }
body.night .button.white { color: #fff; background: #12314a; border: 1px solid #23415a; }
body.night .site-footer, body.night .mobile-nav { background: #03101f; }
body.night .mobile-nav { border-top: 1px solid var(--line); }
body.night .kicker { color: #6fc6ff; }
body.night .simulator-entry.is-locked { color: #9fc2d5; background: #12314a; }
body.night .modal-panel h2, body.night .question-card > h1 { color: var(--ink); }
body.night .status-pill { background: #12314a; }
body.night .hot-bg { fill: #0f2538; stroke: #23415a; }
body.night .ill-white { fill: #e6eef6; } body.night .ill-text-dark { fill: #0b1d30; }
body.night .dial-screen { background: #0f2538; color: #dff3ff; border-color: #23415a; }
body.night .dial-key { background: #12314a; color: var(--ink); border-color: #23415a; }
body.night .chain-step { background: #12314a; color: var(--ink); border-color: #23415a; }
body.night .semaforo-card { background: #12314a; color: var(--ink); }
body.night .legend-item { background: #12314a; color: var(--ink); border-color: #23415a; }
body.night .map-uses li { border-color: var(--line); }
body.night .sim-option { background: #0f2538; color: var(--ink); border-color: #23415a; }
body.night .sim-result.ok { background: #0f3128; color: #cdeee2; } body.night .sim-result.ko { background: #3c1418; color: #ffd6da; }
body.night .sim-log li { border-color: var(--line); } body.night .sim-log-result { color: var(--muted); }
body.night .prep-ring::before { background: var(--surface); }
body.night .read-check[data-state="done"] { background: #0f3128; border-color: #1f5a49; }
body.night .pocket-card h3 { color: #6fc6ff; } body.night .pocket-card section { border-color: var(--line); }
body.night .quick-tile strong { color: var(--ink); }

/* ---------- Inicio: estado de preparación y reto del día ---------- */
.prep-section { display: grid; grid-template-columns: 1.3fr .9fr; gap: 18px; padding-top: 70px; }
.prep-card { display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: center; padding: 28px 32px; background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-sm); }
.prep-ring { --percent: 0; position: relative; display: grid; place-items: center; width: 170px; height: 170px; border-radius: 50%; background: conic-gradient(var(--blue-600) calc(var(--percent) * 1%), #e3edf4 0); transition: background .6s ease; }
.prep-ring::before { content: ""; position: absolute; width: 136px; height: 136px; background: #fff; border-radius: 50%; }
.prep-ring div { position: relative; display: grid; place-items: center; }
.prep-ring strong { font-size: 2.4rem; line-height: 1; letter-spacing: -.06em; color: var(--blue-700); }
.prep-ring small { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.prep-copy h2 { margin: 6px 0 8px; font-size: 1.9rem; letter-spacing: -.04em; }
.prep-copy p { margin: 0; color: var(--muted); }
.prep-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.prep-stats div { display: flex; flex-direction: column; padding: 10px 12px; background: var(--surface-soft); border-radius: 12px; }
.prep-stats strong { font-size: 1.15rem; } .prep-stats span { color: var(--muted); font-size: .68rem; }
.daily-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px; color: #fff; background: radial-gradient(circle at 85% 15%, rgba(72,216,245,.35), transparent 30%), linear-gradient(140deg, #063d69, #0a7f89); border-radius: 26px; box-shadow: var(--shadow-md); }
.daily-card.done { background: linear-gradient(140deg, #0a5a46, #0da178); }
.daily-head { display: flex; align-items: center; gap: 14px; }
.daily-head .kicker { color: var(--cyan-200); } .daily-head strong { display: block; font-size: 1.1rem; }
.daily-icon { display: grid; place-items: center; width: 48px; height: 48px; background: rgba(255,255,255,.14); border-radius: 14px; font-size: 1.4rem; }
.daily-card p { margin: 0; color: #d3edf8; font-size: .92rem; }
.daily-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; }
.daily-foot span { font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.quick-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-top: 22px; }
.quick-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 20px; text-align: left; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.quick-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.quick-tile .quick-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--blue-600); background: #e7f7ff; border-radius: 12px; font-size: 1.2rem; }
.quick-tile strong { font-size: .98rem; } .quick-tile span:last-child { color: var(--muted); font-size: .78rem; }

/* ---------- Módulos: estado de lectura ---------- */
.module-status-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.status-pill { padding: 4px 9px; border-radius: 999px; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; background: #eef3f6; color: #6b8194; }
.status-pill.s-opened { background: #fff6e5; color: #91611a; } .status-pill.s-read { background: #e7f7ff; color: #0062a9; } .status-pill.s-completed { background: #eaf9f4; color: #0b7a5b; }
.module-read-track { flex: 1; height: 6px; background: #e5edf2; border-radius: 99px; overflow: hidden; }
.module-read-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-600), var(--ok)); border-radius: inherit; transition: width .4s ease; }
.read-check { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; margin: 26px 0 0; padding: 16px 18px; background: #fff7e7; border: 1px solid #efd39a; border-radius: 16px; }
.read-check i { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; background: var(--warn); border-radius: 12px; font-style: normal; font-weight: 950; }
.read-check[data-state="done"] { background: #eaf9f4; border-color: #b7e5d7; } .read-check[data-state="done"] i { background: var(--ok); }
.read-check strong { display: block; } .read-check span { color: var(--muted); font-size: .85rem; }
#readSentinel { height: 1px; }
.module-art { margin-top: 26px; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.module-art h3 { margin: 0 0 14px; font-size: 1.1rem; }
.module-art svg { width: 100%; height: auto; display: block; }
.ill-note { margin: 12px 0 0; color: var(--muted); font-size: .85rem; }

.module-photos { margin-top: 26px; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); }
.module-photos-head { display: grid; grid-template-columns: minmax(0, .9fr) minmax(260px, 1.1fr); gap: 28px; align-items: end; margin-bottom: 20px; }
.module-photos-head h3 { margin: 6px 0 0; font-size: 1.55rem; letter-spacing: -.035em; }
.module-photos-head p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.module-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.module-photo { min-width: 0; margin: 0; overflow: hidden; background: var(--surface-soft); border: 1px solid #dbe6ed; border-radius: 17px; }
.module-photo.wide { grid-column: 1 / -1; }
.module-photo-image { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: #061c35; }
.module-photo.wide .module-photo-image { aspect-ratio: 16 / 7; }
.module-photo-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.module-photo-image > span { position: absolute; top: 12px; left: 12px; padding: 6px 9px; color: #fff; background: rgba(4, 23, 40, .9); border: 1px solid rgba(255,255,255,.3); border-radius: 8px; font-size: .61rem; font-weight: 900; letter-spacing: .08em; }
.module-photo.is-simulation { border-color: #e5b0b6; }
.module-photo.is-simulation .module-photo-image > span { background: #b62939; }
.module-photo figcaption { padding: 12px 14px 14px; color: #526b7e; font-size: .8rem; line-height: 1.4; }
body.night .module-photos, body.night .module-photo { background: var(--surface); border-color: var(--line); }
body.night .module-photo figcaption { color: var(--muted); }

/* ---------- Ilustraciones ---------- */
.ill-figure { width: 100%; height: auto; display: block; font-family: inherit; }
.ill-red { fill: var(--ill-red); } .ill-steel { fill: #9fb3c2; } .ill-dark { fill: var(--ill-dark); } .ill-white { fill: #fff; } .ill-green { fill: #0da178; }
.ill-text-dark { fill: #1f3446; } .ill-caption { fill: var(--ill-caption); font-size: 13px; font-weight: 800; }
.ill-floor { fill: var(--ill-floor); } .ill-wall { fill: var(--ill-wall); } .ill-room { fill: var(--ill-room); } .ill-smoke { fill: var(--ill-smoke); }
.ill-door { fill: var(--ill-door); } .ill-ground { fill: var(--ill-ground); } .ill-node { fill: var(--ill-node); stroke: #9fd0ee; } .ill-node-green { fill: #0da178; }
.ill-flame { fill: #ff8a3d; } .ill-person { fill: #2a4560; stroke: #2a4560; } .ill-person-bed { fill: #6fa8d8; stroke: none; }
.hot-bg { fill: #f6f9fb; stroke: #dbe6ed; stroke-width: 2; transition: fill .2s ease, stroke .2s ease; }
.figure-wrap.interactive .hot { cursor: pointer; }
.figure-wrap.interactive .hot:hover .hot-bg, .figure-wrap.interactive .hot:focus-visible .hot-bg { fill: #e7f6ff; stroke: var(--blue-500); }
.hot.selected .hot-bg { fill: #dff3ff; stroke: var(--blue-600); stroke-width: 4; }
.hot:focus { outline: none; } .hot:focus-visible .hot-bg, .hot:focus-visible rect { stroke: #ffbf47; stroke-width: 4; }
.figure-wrap.static .hot { cursor: default; }
.blk-sat { fill: var(--blk-sat); } .blk-n { fill: var(--blk-n); } .blk-park { fill: var(--blk-park); } .blk-tech { fill: var(--blk-tech); }
.blk-letter { fill: #fff; font-size: 40px; font-weight: 950; letter-spacing: -.04em; } .blk-label { fill: #fff; font-size: 13px; font-weight: 900; } .blk-sub { fill: var(--ill-caption); font-size: 11px; font-weight: 800; }
.map-block rect { transition: filter .2s ease, opacity .2s ease; } .map-block:hover rect, .map-block.selected rect { filter: brightness(1.18); }
.map-block.selected rect { stroke: #ffbf47; stroke-width: 5; }
.pin-green { fill: #0da178; stroke: #fff; stroke-width: 3; } .pin-red { fill: #e33643; stroke: #fff; stroke-width: 3; } .pin-text { fill: #fff; font-size: 16px; font-weight: 950; }
.map-pin.selected circle { stroke: #ffbf47; stroke-width: 5; }
.noevac-ring { fill: none; stroke: #e33643; stroke-width: 4; stroke-dasharray: 10 6; }
.ill-smoke-anim { animation: smoke-drift 4s ease-in-out infinite alternate; transform-origin: center; }
@keyframes smoke-drift { from { transform: translateX(0); opacity: .55; } to { transform: translateX(12px); opacity: .85; } }
.persona { width: 64px; height: 64px; flex: 0 0 auto; }
.p-skin { fill: #f2c9a8; } .p-hair { fill: #6b4b2a; } .p-hair-dark { fill: #2c2c2c; } .p-helmet { fill: #e9a527; }
.p-uniform-blue { fill: #2c8dd6; } .p-uniform-green { fill: #2fa37f; } .p-uniform-grey { fill: #6f8394; } .p-uniform-amber { fill: #b8621c; }

/* ---------- Nuevos formatos de pregunta ---------- */
.hotspot-help { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.hotspot-help > span:first-child { color: var(--muted); font-size: .85rem; font-weight: 700; }
.hotspot-alt { display: flex; flex-wrap: wrap; gap: 6px; }
.hotspot-chip { padding: 7px 11px; color: #526b80; background: #f2f6f9; border: 1px solid #dbe6ed; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.hotspot-chip.selected { color: #fff; background: var(--blue-600); border-color: var(--blue-600); }
.classify-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.classify-option { min-height: 84px; font-size: 1rem; border-width: 2px; }
.classify-option.tone-green { border-color: #b7e5d7; } .classify-option.tone-amber { border-color: #f1d398; } .classify-option.tone-red { border-color: #f1c0c4; } .classify-option.tone-blue { border-color: #b9e6fa; }
.classify-option.tone-green .answer-key { color: #fff; background: var(--ok); border-color: var(--ok); } .classify-option.tone-amber .answer-key { color: #fff; background: var(--warn); border-color: var(--warn); }
.classify-option.tone-red .answer-key { color: #fff; background: var(--danger); border-color: var(--danger); } .classify-option.tone-blue .answer-key { color: #fff; background: var(--info); border-color: var(--info); }
.dial-pad { max-width: 320px; margin: 0 auto; }
.dial-screen { min-height: 64px; display: grid; place-items: center; margin-bottom: 12px; padding: 12px; color: var(--navy-900); background: #f2f6f9; border: 1.5px solid #dbe6ed; border-radius: 16px; font-size: 2rem; font-weight: 950; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.dial-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dial-key { min-height: 62px; color: var(--ink); background: #fff; border: 1.5px solid #dbe6ed; border-radius: 16px; font-size: 1.4rem; font-weight: 800; transition: transform .1s ease, background .15s ease; }
.dial-key:active { transform: scale(.96); }
.dial-key.dial-ok { color: #fff; background: var(--ok); border-color: var(--ok); } .dial-key.dial-del { color: var(--danger); }
.chain-visual { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; padding: 16px; background: var(--surface-soft); border-radius: 16px; }
.chain-step { padding: 10px 14px; color: #23425a; background: #fff; border: 1.5px solid #dbe6ed; border-radius: 12px; font-size: .85rem; font-weight: 800; }
.chain-blank { min-width: 52px; text-align: center; color: var(--warn); border: 2px dashed var(--warn); background: #fff7e7; }
.chain-blank.filled { color: #fff; background: var(--blue-600); border: 2px solid var(--blue-600); }
.chain-arrow { color: var(--muted); font-style: normal; font-weight: 900; }
.semaforo { display: flex; flex-direction: column; gap: 16px; }
.semaforo-progress { display: flex; gap: 6px; }
.semaforo-progress i { flex: 1; height: 8px; background: #e5edf2; border-radius: 99px; }
.semaforo-progress i.current { background: var(--blue-600); } .semaforo-progress i.ok { background: var(--ok); } .semaforo-progress i.ko { background: var(--danger); }
.semaforo-card { padding: 24px; color: var(--ink); background: var(--surface-soft); border-radius: 18px; }
.semaforo-card span { display: block; margin-bottom: 8px; color: var(--muted); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.semaforo-card strong { font-size: 1.3rem; line-height: 1.25; }
.semaforo-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.semaforo-btn { display: grid; place-items: center; min-height: 96px; color: #fff; border: 0; border-radius: 18px; font-size: 2.2rem; font-weight: 950; transition: transform .1s ease; }
.semaforo-btn small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.semaforo-btn.ok { background: linear-gradient(145deg, #12b98a, #0a7a5a); } .semaforo-btn.ko { background: linear-gradient(145deg, #ef4d5a, #b91f2b); }
.semaforo-btn:active { transform: scale(.97); }
.timer { position: relative; padding-left: 4px; }
.timer::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: currentColor; border-radius: 2px; transform-origin: left; transform: scaleX(calc(var(--left, 1) / var(--total, 1))); transition: transform 1s linear; }
.streak-card { position: relative; overflow: hidden; }
.streak-flame { position: absolute; inset: auto -10px -14px auto; width: 70px; height: 70px; background: radial-gradient(circle at 50% 70%, #ffb347, #ff6b1a 55%, transparent 72%); opacity: var(--flame, 0); filter: blur(2px); transition: opacity .4s ease; }
.question-card.shake { animation: card-shake .45s ease; } .question-card.glow { animation: card-glow .6s ease; }
@keyframes card-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes card-glow { 0% { box-shadow: 0 0 0 0 rgba(13,161,120,.45); } 100% { box-shadow: 0 0 0 26px rgba(13,161,120,0); } }
.feedback-icon.correct { animation: pop .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { from { transform: scale(.4); } to { transform: scale(1); } }

/* ---------- Camino de niveles ---------- */
.levels-grid { display: block; }
.learning-path-track { position: relative; display: grid; gap: 22px; margin: 0; padding: 0 0 0 56px; list-style: none; }
.learning-path-track::before { content: ""; position: absolute; left: 21px; top: 30px; bottom: 30px; width: 4px; background: linear-gradient(180deg, var(--blue-600), var(--cyan-400) 40%, #a54038); border-radius: 4px; opacity: .55; }
.path-node { position: relative; }
.path-marker { position: absolute; left: -56px; top: 22px; display: grid; place-items: center; width: 46px; height: 46px; color: #fff; background: var(--blue-600); border: 4px solid #fff; border-radius: 50%; box-shadow: var(--shadow-sm); font-weight: 950; }
.path-node.locked .path-marker { color: #7a8c9b; background: #d8e1e8; }
.path-node.done .path-marker { background: var(--ok); }
.path-node.level-sim .path-marker { background: #a54038; } .path-node.level-sim.done .path-marker { background: var(--ok); }
.learning-path-track .level-card { min-height: 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 6px 30px; }
.learning-path-track .level-card h2 { margin-top: 12px; font-size: 1.7rem; }
.learning-path-track .level-card > p { grid-row: 3; } .learning-path-track .level-card .level-card-head { grid-column: 1 / -1; }
.learning-path-track .level-card .level-stats { grid-column: 2; grid-row: 2 / 4; align-self: center; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0 0 0 26px; border-left: 1px solid rgba(255,255,255,.15); }
.learning-path-track .level-card .level-topics { grid-column: 1; margin-top: 12px; } .learning-path-track .level-card .button { grid-column: 1 / -1; justify-self: start; min-width: 260px; }
.level-card.level-sim { background: linear-gradient(145deg, #3d2e6b, #1c1440); }
.smart-review { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 22px; padding: 28px 32px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); }
.smart-review h2 { margin: 6px 0 6px; font-size: 1.6rem; letter-spacing: -.035em; } .smart-review p { margin: 0; color: var(--muted); }
.medal small { color: inherit; font-size: .6rem; opacity: .8; }

/* ---------- Resultados ---------- */
.results-hero.apt { background: radial-gradient(circle at 20% 30%, rgba(72,216,245,.25), transparent 27%), linear-gradient(135deg, #062b35, #0a7f68); }
.results-next { margin-top: 18px; }
.breakdown-track i.good { background: linear-gradient(90deg, #12b98a, var(--ok)); } .breakdown-track i.mid { background: linear-gradient(90deg, #f2c04d, var(--warn)); } .breakdown-track i.low { background: linear-gradient(90deg, #ef4d5a, var(--danger)); }
.reco-card { margin-top: 25px; padding: 32px; background: #fff7e7; border: 1px solid #efd39a; border-radius: 23px; }
.reco-card h2 { margin: 0 0 14px; font-size: 1.6rem; letter-spacing: -.035em; }
.reco-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.reco { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 16px; color: var(--ink); background: #fff; border: 1px solid #efd39a; border-radius: 14px; text-align: left; }
.reco span { color: #91611a; font-size: .75rem; font-weight: 800; } .reco strong { font-size: .95rem; }
body.night .reco-card { background: #3a2c10; border-color: #6b5320; } body.night .reco { background: #12314a; border-color: #23415a; color: var(--ink); } body.night .reco span { color: #ffd27a; }

/* ---------- Mapa ---------- */
.map-shell { display: grid; grid-template-columns: 1.4fr .9fr; gap: 22px; padding: 34px 0 110px; align-items: start; }
.map-panel { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-sm); }
.map-real-photo { margin: 0 0 20px; overflow: hidden; background: #061c35; border: 1px solid #dbe6ed; border-radius: 18px; }
.map-real-photo img { display: block; width: 100%; height: auto; }
.map-real-photo figcaption { display: grid; gap: 4px; padding: 14px 16px; background: #f3f8fb; }
.map-real-photo figcaption strong { color: var(--ink); font-size: .9rem; }
.map-real-photo figcaption span { color: var(--muted); font-size: .76rem; line-height: 1.45; }
body.night .map-real-photo { border-color: var(--line); }
body.night .map-real-photo figcaption { background: #0f2538; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.legend-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: #34506a; background: #f2f6f9; border: 1px solid #dbe6ed; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.legend-item[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.legend-item i { width: 12px; height: 12px; border-radius: 50%; } .lg-green { background: #0da178; } .lg-red { background: #e33643; } .lg-ring { background: transparent; border: 2px dashed #e33643; }
.map-figure svg { width: 100%; height: auto; }
.map-disclaimer { margin: 12px 0 0; color: var(--muted); font-size: .75rem; }
.map-detail { position: sticky; top: calc(var(--header-height) + 16px); min-height: 320px; padding: 26px 28px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-sm); }
.map-detail h2 { margin: 6px 0 12px; font-size: 1.7rem; letter-spacing: -.035em; }
.map-detail-empty { display: grid; place-items: center; text-align: center; gap: 8px; padding: 30px 10px; color: var(--muted); }
.map-detail-empty .module-icon { display: grid; place-items: center; width: 56px; height: 56px; color: var(--blue-600); background: #e7f7ff; border-radius: 16px; } .map-detail-empty svg { width: 30px; height: 30px; }
.map-detail-empty strong { color: var(--ink); }
.map-uses { margin: 0 0 14px; padding: 0; list-style: none; } .map-uses li { padding: 9px 0; border-bottom: 1px solid #e9f0f5; font-size: .9rem; } .map-uses li:last-child { border: 0; }
.map-lead { margin: 0 0 12px; font-size: 1rem; }

/* ---------- Tarjeta de bolsillo ---------- */
.card-shell { padding: 34px 0 110px; }
.pocket-card { max-width: 720px; margin: 0 auto; padding: 26px 30px; background: #fff; border: 2px solid var(--navy-900); border-radius: 18px; color: #10263d; }
.pocket-card header { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 2px solid var(--navy-900); }
.pocket-card header img { width: 120px; height: auto; } .pocket-card header strong { display: block; font-size: 1.05rem; } .pocket-card header span { font-size: .75rem; color: #526b80; }
.pocket-card section { padding: 14px 0; border-bottom: 1px dashed #b7c6d2; } .pocket-card section:last-of-type { border: 0; }
.pocket-card h3 { margin: 0 0 8px; color: var(--red-dark); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.pocket-phones div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .9rem; } .pocket-phones b { font-variant-numeric: tabular-nums; }
.pocket-card ol, .pocket-card ul { margin: 0; padding-left: 20px; font-size: .88rem; line-height: 1.5; }
.pocket-meeting { columns: 2; list-style: none; padding: 0; }
.pocket-card footer { margin-top: 12px; color: #526b80; font-size: .68rem; }
.card-actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; color: var(--muted); font-size: .85rem; }

/* ---------- Simulacro guiado ---------- */
.sim-shell { width: min(960px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 90px; }
.sim-header { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 18px; margin-bottom: 20px; }
.sim-header h1 { margin: 4px 0 0; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.04em; } .sim-header p { margin: 4px 0 0; color: var(--muted); }
.sim-intro { max-width: 720px; color: var(--muted); font-size: 1.02rem; }
.sim-role-title { margin: 26px 0 14px; font-size: 1.4rem; letter-spacing: -.03em; }
.sim-roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sim-role { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 20px; text-align: left; transition: transform .18s ease, border-color .18s ease; }
.sim-role:hover { transform: translateY(-3px); border-color: var(--blue-500); } .sim-role strong { font-size: .98rem; } .sim-role span { color: var(--muted); font-size: .78rem; }
.sim-timeline { display: flex; gap: 5px; margin-bottom: 18px; }
.sim-timeline i { position: relative; flex: 1; height: 10px; background: #e5edf2; border-radius: 99px; }
.sim-timeline i b { position: absolute; top: 14px; left: 0; color: var(--muted); font-size: .6rem; font-weight: 800; }
.sim-timeline i.current { background: var(--blue-600); } .sim-timeline i.ok { background: var(--ok); } .sim-timeline i.ko { background: var(--danger); }
.sim-card { margin-top: 30px; padding: clamp(22px, 4vw, 40px); background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-md); }
.sim-clock { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } .sim-clock span { font-size: 1.6rem; font-weight: 950; letter-spacing: -.04em; color: var(--blue-700); font-variant-numeric: tabular-nums; } .sim-clock strong { color: var(--muted); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.sim-scene { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px; } .sim-scene h2 { margin: 0 0 8px; font-size: 1.6rem; letter-spacing: -.035em; } .sim-scene p { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.sim-options { display: grid; gap: 10px; }
.sim-option { width: 100%; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 14px; padding: 15px 18px; color: #2c465b; background: #f7fafc; border: 1.5px solid #dbe6ed; border-radius: 15px; text-align: left; transition: transform .15s ease, border-color .15s ease; }
.sim-option:not([disabled]):hover { transform: translateX(3px); border-color: #8ac8eb; }
.sim-option .answer-key { display: grid; place-items: center; width: 37px; height: 37px; color: #698397; background: #fff; border: 1px solid #d7e3eb; border-radius: 11px; font-weight: 900; }
.sim-option.picked-ok { color: #0b5a43; background: #eaf9f4; border-color: var(--ok); } .sim-option.picked-ok .answer-key { color: #fff; background: var(--ok); }
.sim-option.picked-ko { color: #7d2630; background: #fff0f1; border-color: var(--danger); } .sim-option.picked-ko .answer-key { color: #fff; background: var(--danger); }
.sim-option.reveal-ok { border-color: var(--ok); border-style: dashed; } .sim-option.muted { opacity: .45; }
.sim-result { margin-top: 18px; padding: 18px 20px; border-radius: 16px; animation: rise .4s ease both; }
.sim-result.ok { background: #eaf9f4; color: #0b5a43; } .sim-result.ko { background: #fff0f1; color: #7d2630; }
.sim-result strong { display: block; margin-bottom: 6px; } .sim-result p { margin: 0 0 14px; }
.sim-log { margin: 0; padding: 0; list-style: none; }
.sim-log li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid #e9f0f5; }
.sim-log li:last-child { border: 0; }
.sim-log-time { padding-top: 2px; font-weight: 950; color: var(--muted); font-variant-numeric: tabular-nums; }
.sim-log li.ok .sim-log-time { color: var(--ok); } .sim-log li.ko .sim-log-time { color: var(--danger); }
.sim-log strong { display: block; } .sim-log p { margin: 4px 0 0; font-size: .88rem; } .sim-log-result { color: var(--muted); }

/* ---------- Utilidades y PWA ---------- */
.confetti { position: fixed; inset: 0; z-index: 1400; pointer-events: none; }
.footer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.footer-tools button { padding: 6px 10px; color: #cfe0ee; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; font-size: .7rem; font-weight: 800; }
.emergency-fab { animation: fab-beat 9s ease-in-out infinite; }
@keyframes fab-beat { 0%, 92%, 100% { transform: scale(1); } 95% { transform: scale(1.05); } 98% { transform: scale(1); } }

/* ---------- Responsive v3 ---------- */
@media (max-width: 1100px) { .quick-tiles { grid-template-columns: repeat(2, 1fr); } .prep-section { grid-template-columns: 1fr; } .sim-roles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .map-shell { grid-template-columns: 1fr; } .map-detail { position: static; } }
@media (max-width: 820px) {
  .top-actions .icon-button.theme-toggle { display: inline-grid; }
  .mobile-nav { grid-template-columns: repeat(5, 1fr); }
  .prep-card { grid-template-columns: 1fr; text-align: center; } .prep-ring { margin-inline: auto; } .prep-stats { text-align: left; }
  .daily-foot { flex-direction: column; align-items: stretch; }
  .learning-path-track { padding-left: 44px; } .path-marker { left: -44px; width: 38px; height: 38px; }
  .learning-path-track .level-card { grid-template-columns: 1fr; } .learning-path-track .level-card .level-stats { grid-column: 1; grid-row: auto; flex-direction: row; padding: 12px 0; border: 0; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
  .learning-path-track .level-card .button { min-width: 0; width: 100%; }
  .smart-review { flex-direction: column; align-items: stretch; }
  .classify-grid { grid-template-columns: 1fr; }
  .sim-header { grid-template-columns: 44px 1fr; } .sim-header .score-chip { grid-column: 1 / -1; justify-self: start; }
  .sim-roles { grid-template-columns: 1fr; } .sim-scene { flex-direction: column; } .sim-timeline i b { display: none; }
  .module-photos-head { grid-template-columns: 1fr; gap: 8px; }
  .pocket-meeting { columns: 1; }
}
@media (max-width: 590px) { .quick-tiles, .module-photo-grid { grid-template-columns: 1fr; } .module-photo.wide { grid-column: auto; } .module-photo.wide .module-photo-image { aspect-ratio: 16 / 10; } .semaforo-btn { min-height: 80px; font-size: 1.8rem; } }

/* ---------- Impresión de la tarjeta ---------- */
@media print {
  body * { visibility: hidden; }
  .pocket-card, .pocket-card * { visibility: visible; }
  .pocket-card { position: absolute; left: 0; top: 0; width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none; color: #000; background: #fff; }
  .no-print, .emergency-fab, .mobile-nav, .topbar, .site-footer { display: none !important; }
  @page { margin: 12mm; }
}
@media (prefers-reduced-motion: reduce) {
  .ill-smoke-anim, .flow-dot, .emergency-fab, .question-card.shake, .question-card.glow, .feedback-icon.correct { animation: none !important; }
}
/* Ajustes finales v3.0 */
.map-block .blk-sub { fill: #fff; opacity: .92; }
.figure-wrap.interactive.figure-map .map-block .blk-sub, .figure-wrap.interactive.figure-map [data-layer="noevac"] { display: none; }