/* W34b (2026-10-10): public pages of VMS (pages/make_vms_pages.py). Theme copied from the blog CSS (make_blog_pages.py) and the
   landing of src/style.css (hero, pills, OSCE steps, standards cards), same class names; new: free badge, features, explore chips,
   FAQ, detail pages. Justified text (rule of Claude_MedSim_Activos.md, 2026-10-08). */
:root {
  --bg-primary: #0a1f44; --bg-secondary: #0f2a5c; --bg-card: #13306a; --bg-card-hover: #1c3f7a;
  --text-primary: #ffffff; --text-secondary: #c9d6ee; --text-muted: #8fa3c8;
  --accent: #3a7bd5; --accent-dim: #24498c; --accent-glow: rgba(58, 123, 213, 0.12);
  --accent-red: #d7263d; --accent-amber: #3a7bd5; --amber-glow: rgba(58, 123, 213, 0.12);
  --border-subtle: rgba(58, 123, 213, 0.18); --border-card: rgba(201, 214, 238, 0.12);
  --font: 'Roboto', 'Segoe UI', Arial, sans-serif;
  --max-width: 1000px; --read-width: 760px; --nav-height: 64px; --radius: 8px; --radius-lg: 16px; --transition: 0.3s ease;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font); background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.65; font-weight: 300;
  min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
body::after { content: ''; position: fixed; top: -50%; left: -25%; width: 150%; height: 100%; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 50% 0%, rgba(58,123,213,0.10) 0%, rgba(58,123,213,0.04) 40%, transparent 70%); }
main { flex: 1; width: 100%; }
h1, h2, h3 { font-weight: 700; line-height: 1.25; color: var(--text-primary); }
h1 { font-size: clamp(1.9rem, 4.8vw, 2.9rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); color: var(--accent); }
h3 { font-size: 1.15rem; }
p, li { color: var(--text-secondary); }
p, li, dd, blockquote { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--text-primary); }
.muted { color: var(--text-muted); }

/* Nav (same as the blog) */
.site-nav { position: sticky; top: 0; z-index: 1000; background: rgba(10,31,68,0.9); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-subtle); height: var(--nav-height); display: flex; align-items: center; }
.nav-inner { max-width: var(--max-width); width: 100%; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; }
.nav-logo { display: flex; align-items: center; gap: 0.75rem; color: var(--text-primary); }
.nav-logo img { height: 36px; width: 36px; object-fit: contain; }
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: 'Michroma', 'Roboto', Arial, sans-serif; font-weight: 400; font-size: 1.05rem; letter-spacing: 0.08em; color: #ffffff; white-space: nowrap; } /* MS164: the mark (la 8) */
.brand-name .ms-a { display: inline-block; vertical-align: baseline; width: 1.0625em; height: .7533em; margin-right: .08em; overflow: visible; fill: currentColor; }
.brand-sub { font-weight: 700; font-size: 0.6rem; letter-spacing: 0.14em; color: var(--accent); margin-top: 0.2rem; }
.nav-links { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; font-weight: 500; }
.lang-select select { padding: 0.3rem 0.5rem; font-family: var(--font); font-size: 0.82rem; color: var(--text-primary); background: var(--bg-card);
  border: 1px solid var(--border-card); border-radius: var(--radius); cursor: pointer; }
.lang-select select:hover, .lang-select select:focus { border-color: var(--accent-dim); outline: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.6rem; border-radius: var(--radius); font-size: 0.95rem;
  font-weight: 700; transition: all var(--transition); border: none; cursor: pointer; font-family: var(--font); }
.btn-small { padding: 0.4rem 0.9rem; font-size: 0.82rem; }
.btn-primary { background: var(--accent); color: #ffffff; box-shadow: 0 2px 12px rgba(58,123,213,0.25); }
.btn-primary:hover { background: #ffdf6b; color: #0a1f44; box-shadow: 0 4px 20px rgba(58,123,213,0.35); }
.btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent-dim); }
.btn-outline:hover { border-color: var(--accent); background: var(--accent-glow); color: var(--text-primary); }

/* Hero */
.page-wrapper { max-width: var(--max-width); margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.page-hero { text-align: center; padding: 2.2rem 0 1.5rem; }
.page-hero h1 { background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1rem; }
.page-hero .subtitle { font-size: 1.08rem; max-width: 700px; margin: 0 auto 1.5rem; }
.page-hero p, .site-footer p, .lead, .osce-programs, .faq-more { text-align: justify; text-align-last: center; }
.hero-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; }
.free-badge { display: inline-flex; align-items: center; gap: 0.55rem; background: var(--amber-glow); border: 1px solid var(--accent-amber);
  color: var(--accent-amber); border-radius: 8px; padding: 0.4rem 1.1rem; font-weight: 700; font-size: 0.98rem; margin: 0 0 1.2rem; }
.free-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent-amber); box-shadow: 0 0 10px var(--accent-amber); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.free-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.7rem; }
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.4rem; }
.pill { font-size: 0.8rem; color: var(--text-secondary); border: 1px solid var(--border-card); border-radius: 8px; padding: 0.25rem 0.75rem; }
.coming-soon { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: center; align-items: center; margin-top: 1.2rem; font-size: 0.95rem; color: var(--text-secondary); }
.coming-soon b { color: var(--text-primary); font-weight: 700; }
.coming-tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; background: var(--accent); border-radius: 8px; padding: 0.2rem 0.7rem; }

/* Sections of the home */
.features, .osce, .standards, .explore, .faq-teaser { padding: 1rem 0 2.5rem; }
.features h2, .osce h2, .standards h2, .explore h2, .faq-teaser h2 { text-align: center; margin-bottom: 0.4rem; }
.lead { max-width: 720px; margin: 0 auto 1.4rem; }
.feat-grid, .std-grid, .sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0.9rem; }
.feat-card, .std-card, .sec-card, .osce-step { background: linear-gradient(160deg, rgba(28,63,122,0.75), rgba(10,31,68,0.9));
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; }
.feat-tag, .std-tag { color: var(--accent-red); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.feat-card h3, .std-card h3 { font-size: 1.15rem; margin: 0.15rem 0 0.5rem; color: #ffffff; }
.feat-card p, .std-card p, .sec-card p { font-size: 0.95rem; }
.sec-card h2 { font-size: 1.15rem; margin-bottom: 0.45rem; }
.std-card a { border-bottom: 1px solid var(--accent-dim); }
.std-card a.std-head { display: block; border-bottom: none; }
.std-card a.std-head:hover h3 { color: var(--accent); }
.std-note, .page-note { max-width: 820px; margin: 1.4rem auto 0; font-size: 0.82rem; color: var(--text-muted); text-align: justify; text-align-last: center; }
.osce-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0.9rem; counter-reset: osce; }
.osce-step::before { counter-increment: osce; content: counter(osce); display: inline-flex; align-items: center; justify-content: center; width: 1.7rem;
  height: 1.7rem; border-radius: 50%; background: var(--accent); color: #ffffff; font-weight: 900; margin-bottom: 0.5rem; }
.osce-step h3 { font-size: 1.05rem; color: #ffffff; margin-bottom: 0.3rem; }
.osce-step p { font-size: 0.92rem; }
.osce-programs { margin-top: 1.2rem; font-size: 0.92rem; }

/* Explore chips */
.explore-grid { display: grid; gap: 1rem; max-width: 820px; margin: 1rem auto 0; }
.explore-row h3 { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-block; font-size: 0.9rem; font-weight: 500; color: var(--text-primary); background: var(--bg-card);
  border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0.4rem 1rem; transition: all var(--transition); }
.chip:hover { border-color: var(--accent); background: var(--bg-card-hover); color: var(--accent); }

/* FAQ */
.faq-group { max-width: 820px; margin: 2rem auto 0; }
.faq-group h2 { font-size: 1.3rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 0.9rem; }
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.6rem; }
.faq-item { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 0.9rem 1.2rem; }
.faq-item[open] { border-color: var(--border-subtle); }
.faq-item summary { cursor: pointer; list-style: none; font-weight: 500; font-size: 1.05rem; color: var(--text-primary); display: flex;
  justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--accent); font-weight: 700; font-size: 1.2rem; line-height: 1; }
.faq-item[open] summary::after { content: '\2013'; }
.faq-item p { margin-top: 0.6rem; }
.faq-more { margin-top: 1rem; font-weight: 500; }

/* Exam and program pages */
.crumbs { font-size: 0.85rem; color: var(--text-muted); }
.crumbs .sep { margin: 0 0.35rem; }
.detail { max-width: var(--read-width); margin: 2rem auto 0; }
.detail h2 { margin-bottom: 0.7rem; }
.detail h3 { font-size: 0.95rem; margin: 1.1rem 0 0.4rem; color: var(--text-primary); }
.detail p { margin-bottom: 0.9rem; font-size: 1.02rem; }
.ticks, .official { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.ticks li { position: relative; padding-left: 1.7rem; font-size: 1.02rem; }
.ticks li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 900; }
.official li::before { content: '\2197  '; color: var(--accent); }
.related { max-width: var(--read-width); margin: 2rem auto 0; display: grid; gap: 1rem; }
.read-next { font-size: 0.95rem; }

/* Call to action (same as the blog) */
.cta { max-width: var(--read-width); margin: 3rem auto 0; background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 1.5rem; }
.cta-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff;
  background: var(--accent-amber); border-radius: 8px; padding: 0.15rem 0.65rem; margin-bottom: 0.6rem; }
.cta h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.cta p { margin-bottom: 1rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--border-subtle); padding: 2rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.8rem;
  background: linear-gradient(180deg, transparent 0%, rgba(15,42,92,0.5) 100%); margin-top: 3rem; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.footer-inner p { color: var(--text-muted); font-size: 0.82rem; max-width: 760px; }
.footer-note { font-size: 0.75rem !important; opacity: 0.75; }
.footer-links { display: flex; gap: 0.5rem 1.5rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--accent); }
.footer-pages a { color: var(--text-secondary); font-weight: 500; }
.footer-small { gap: 0.4rem 0.9rem; font-size: 0.78rem; }

@media (max-width: 760px) {
  .nav-hide { display: none; }
}
@media (max-width: 560px) {
  .brand-sub { display: none; }
  .brand-name { font-size: .82rem; }
  .nav-links { gap: 0.6rem; }
  .lang-select select { padding: 0.3rem 0.35rem; font-size: 0.78rem; }
}

/* W34b (2026-10-10, Alejandro via chat 13): the claim in the H1 with the keyword line under it, the claim of every page, the line
   under the claims, and the "All in one" card across the whole row. */
.page-hero h1 .h1-sub { display: block; font-size: 0.5em; font-weight: 500; letter-spacing: 0; margin-top: 0.6rem; }
.claim { font-weight: 500; color: var(--text-primary); max-width: 700px; margin: 0 auto 0.4rem; }
.claim-note { font-size: 0.78rem; color: var(--text-muted); max-width: 700px; margin: 0.9rem auto 0; text-align: justify; text-align-last: center; }
.claim-note a { text-decoration: underline; }
.feat-grid .feat-card:first-child { grid-column: 1 / -1; text-align: center; }
.feat-grid .feat-card:first-child p { text-align-last: center; }

/* USA Navy (Alejandro 2026-10-10, "USA Navy sos un capo", para todo el juego y la web; MS94b_AI_Attending_Preview.html option 2):
   navy background, white text, yellow accent and titles, red main button, blue lines. */
.btn-primary { background: #d7263d !important; color: #ffffff !important; box-shadow: 0 2px 12px rgba(215,38,61,0.3) !important; }
.btn-primary:hover, .btn-primary:hover:not(:disabled) { background: #e8394f !important; color: #ffffff !important; }
.std-tag, .feat-tag { color: #7fb5ff !important; }

/* Alejandro 2026-10-12: "<- Alehundred Studios" under the menu of the home (same as src/style.css W22b). */
.top-strips { max-width: var(--max-width); width: 100%; margin: 0.6rem auto 0; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; font-size: 0.85rem; }
.top-strips .studio-link { color: var(--text-muted); text-decoration: none; }
.top-strips .studio-link:hover { color: var(--accent-gold); }

/* ---------- W38e (2026-10-11): one menu, Back, whole-card links, pale cream title ---------- */
:root { color-scheme: dark; --title: #fff6d6; }
.page-hero h1, .page-hero h1 .h1-sub { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--title) !important; }
.page-hero h1 .h1-sub { opacity: 0.85; }
.nav-inner { max-width: 1200px; }
.nav-menu { display: flex; align-items: center; gap: 0.1rem; margin: 0 auto; }   /* 2026-10-12: centered (Alejandro) */
.nav-menu a, .nav-drawer a:not(.btn) { color: var(--text-secondary); font-weight: 500; font-size: 0.88rem; padding: 0.35rem 0.6rem; border-radius: 6px; }
.nav-menu a:hover, .nav-drawer a:not(.btn):hover { color: var(--accent); background: var(--accent-glow); }
.nav-menu a.cur, .nav-drawer a.cur { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 6px 6px 0 0; }
.nav-burger { display: none; position: relative; }
.nav-burger summary { list-style: none; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--text-primary); padding: 0.3rem 0.6rem;
  border: 1px solid var(--border-card); border-radius: var(--radius); }
.nav-burger summary::-webkit-details-marker { display: none; }
.nav-burger[open] summary { border-color: var(--accent); color: var(--accent); }
.nav-drawer { position: absolute; right: 0; top: calc(100% + 0.6rem); min-width: 220px; display: flex; flex-direction: column; gap: 0.15rem;
  background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 0.6rem; box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
.nav-drawer a:not(.btn) { padding: 0.6rem 0.7rem; font-size: 0.95rem; }
.nav-drawer .btn { margin-top: 0.4rem; }
@media (max-width: 1100px) { .nav-menu { display: none; } .nav-burger { display: block; } }
@media (max-width: 560px) { .nav-start { display: none; } }
.backbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin-bottom: 0.4rem; }
.back-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 500; color: var(--accent);
  border: 1px solid var(--border-subtle); background: var(--accent-glow); border-radius: 8px; padding: 0.2rem 0.85rem 0.2rem 0.7rem; }
.back-link:hover { border-color: var(--accent); color: var(--accent); }
.backbar .crumbs { margin: 0; }
.lk-card { position: relative; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.lk-card .stretch { color: inherit; }
.lk-card .stretch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.lk-card a:not(.stretch) { position: relative; z-index: 2; }
.lk-card:hover, .lk-card:focus-within { border-color: var(--accent); transform: translateY(-3px);
  background: linear-gradient(160deg, rgba(36,78,148,0.85), rgba(14,40,86,0.95)); box-shadow: 0 8px 26px rgba(0,0,0,0.35), 0 0 0 1px rgba(58,123,213,0.25); }
.lk-card:hover h2, .lk-card:hover h3 { color: var(--accent); }
.lk-card .go { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.7rem; font-size: 0.86rem; font-weight: 500; color: var(--accent); }
.lk-card .go .arr { margin-left: auto; transition: transform 0.15s ease; }
.lk-card:hover .go .arr { transform: translateX(4px); }
.feat-grid .feat-card:first-child .go { justify-content: center; }
.feat-grid .feat-card:first-child .go .arr { margin-left: 0; }
.std-card a.stretch { border-bottom: none; }
.std-read { font-size: 0.88rem; margin-top: 0.5rem; }
a.pill { color: var(--text-secondary); transition: all 0.15s ease; }
a.pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
a.free-badge { text-decoration: none; transition: all 0.15s ease; }
a.free-badge:hover { background: rgba(58,123,213,0.22); color: var(--accent-amber); transform: translateY(-1px); }
.go-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.go-link { display: inline-block; font-weight: 500; font-size: 0.92rem; color: var(--accent); border: 1px solid var(--border-subtle);
  background: var(--accent-glow); border-radius: 8px; padding: 0.35rem 0.95rem; }
.go-link:hover { border-color: var(--accent); color: var(--accent); }
.faq-go { margin-top: 0.6rem; }
.flash { box-shadow: 0 0 0 2px var(--accent); }
/* Free cases (2026-10-11, Alejandro): always the badge of the home with the platform line on its own line under it, never a plain
   yellow paragraph; the blog and every generator take these from here. */
.free-badge { display: inline-flex; align-items: center; gap: 0.55rem; background: rgba(58,123,213,0.12); border: 1px solid #3a7bd5;
  color: #3a7bd5; border-radius: 8px; padding: 0.4rem 1.1rem; font-weight: 700; font-size: 0.98rem; margin: 0.6rem 0 0.4rem; text-align: left; }
.free-dot { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #3a7bd5; box-shadow: 0 0 10px #3a7bd5; }
.free-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem; }
/* No word breaks ("tar-jeta") in the short centered lines: hero texts, badge, notes, quote, claims, call to action (2026-10-11). The
   long article text keeps justified text with word breaks (rule of 2026-10-08). */
.page-hero p, .page-hero .subtitle, .free-note, .free-badge, .founder-quote p, .claim, .claim-note, .cta p, .lead {
  -webkit-hyphens: manual; hyphens: manual; }
/* Menu categories (2026-10-11, preview W38e_Menu_Preview.html option B, chevron in a circle): hover on PC, tap in the phone menu. */
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-secondary);
  font-weight: 500; font-size: 0.88rem; padding: 0.35rem 0.6rem; border-radius: 6px; }
.dd > summary::-webkit-details-marker { display: none; }
.dd .tri { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid currentColor;
  border-radius: 50%; transition: transform 0.15s ease; }
.dd[open] .tri, .nav-menu .dd:hover .tri { transform: rotate(180deg); }
.dd:hover > summary, .dd[open] > summary, .dd.cur > summary { color: var(--accent); background: var(--accent-glow); }
.dd-menu { display: none; position: absolute; left: 0; top: 100%; min-width: 220px; flex-direction: column; background: var(--bg-secondary);
  border: 1px solid var(--border-subtle); border-radius: 12px; padding: 0.45rem; box-shadow: 0 12px 30px rgba(0,0,0,0.45); z-index: 1001; }
.nav-menu .dd:hover .dd-menu, .dd[open] .dd-menu { display: flex; }
.dd-menu a { color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; padding: 0.5rem 0.7rem; border-radius: 8px; }
.dd-menu a:hover, .dd-menu a.cur { color: var(--accent); background: var(--accent-glow); box-shadow: none; }
.nav-drawer .dd { display: block; }
.nav-drawer .dd > summary { width: 100%; justify-content: space-between; padding: 0.6rem 0.7rem; font-size: 0.95rem; }
.nav-drawer .dd-menu { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 0.8rem; min-width: 0; }
/* W56e (2026-10-14, preview W56e_Menu_Carreras_Preview.html): the careers menu, plain name first and who it is for under it. */
.dd-careers { min-width: 300px; }
.dd-careers a { display: grid; gap: 2px; padding: 0.55rem 0.75rem; }
.dd-careers a b { color: var(--text-primary); font-weight: 700; font-size: 0.95rem; }
.dd-careers a:hover b, .dd-careers a.cur b { color: var(--accent); }
.dd-careers a span { font-size: 0.78rem; color: var(--text-muted); }
.dd-careers a.dd-all { border-top: 1px solid var(--border-card); margin-top: 0.3rem; padding-top: 0.6rem; border-radius: 0 0 8px 8px;
  color: var(--accent); font-size: 0.85rem; }
.nav-drawer .dd-careers { min-width: 0; }
/* W57e (2026-10-14, preview W57e_Menu_Examenes_Preview.html, Alejandro: "two columns"): the Exams menu, each exam with its country and
   who takes it under it (same look as the careers menu), in two columns on PC; one column in the phone menu. */
.nav-menu .dd-exams { left: 50%; transform: translateX(-50%); width: min(680px, 92vw); }
.nav-menu .dd:hover .dd-exams, .nav-menu .dd[open] .dd-exams { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.4rem; }
.nav-menu .dd-exams a.dd-all { grid-column: 1 / -1; }
.dd-careers a.dd-all + a.dd-all { border-top: 0; margin-top: 0; padding-top: 0.35rem; }
/* W57e "By country": the page exams/by-country/, one card per country (preview W57e_Por_Pais_Preview.html). */
.bc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.bc-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 1.1rem; min-width: 0; }
.bc-card h2 { margin: 0 0 0.6rem; font-size: 1.15rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.6rem; }
.bc-code { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; color: #ffffff; background: var(--accent); border-radius: 6px; padding: 3px 6px; }
.bc-ex { display: grid; gap: 1px; padding: 0.5rem 0.6rem; border-radius: 10px; }
.bc-ex:hover { background: var(--accent-glow); }
.bc-ex b { color: var(--text-primary); }
.bc-ex:hover b { color: var(--accent); }
.bc-ex span { font-size: 0.8rem; color: var(--text-muted); }
.bc-other { border-color: var(--border-subtle); background: linear-gradient(160deg, var(--bg-card-hover), var(--bg-card)); display: flex; flex-direction: column; gap: 0.6rem; }
.bc-other p { color: var(--text-secondary); margin: 0; line-height: 1.5; text-align: justify; }
.bc-go { align-self: flex-start; color: var(--accent); font-weight: 700; }
/* W59e (2026-10-14, preview W59e_Crea_Tu_OSCE_Preview.html): "Also for educators" under the By country card, the educators card of
   create-your-osce/, and For students s7 ("Write your own cases") across the whole row. */
.bc-small { align-self: flex-start; font-size: 0.85rem; color: var(--text-muted); }
.bc-small:hover { color: var(--accent); }
.own-edu { max-width: var(--read-width); margin: 0.5rem auto 0; }
.own-edu .feat-tag { color: #7fb5ff; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.own-edu h2 { font-size: 1.2rem; margin: 0.15rem 0 0.45rem; }
.sec-grid > .sec-card:nth-child(7):last-child { grid-column: 1 / -1; }
/* The signed quote of Alejandro under the H1 (2026-10-11, preview W38e_Cita_Preview.html): Roboto italic, light text color; the
   signature bold in the cream of the title. */
.founder-quote { max-width: 720px; margin: 0.4rem auto 1.4rem; padding: 0; border: 0; }
.founder-quote p { font-style: italic; font-weight: 400; font-size: 1.08rem; line-height: 1.6; color: var(--text-secondary);
  text-align: justify; text-align-last: center; }
.founder-quote cite { display: block; margin-top: 0.5rem; font-style: normal; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em;
  color: var(--title); text-align: center; }

/* ---------- W49a (2026-10-12): Medical Score ----------
   The band of the home (the whole band a link to score/) and the score page. Approved preview MedSim_Web/W49a_Score_Web_Preview.html.
   make_vms_pages.py appends this file to public/site.css; the same block is at the end of src/style.css (React home). */
.score-band { padding: 0.5rem 0 2.5rem; }
.score-card { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 1.8rem; align-items: center; max-width: 960px;
  margin: 0 auto; background: linear-gradient(160deg, rgba(28,63,122,0.85), rgba(10,31,68,0.95)); border: 1px solid var(--accent);
  border-radius: var(--radius-lg); padding: 1.6rem 1.8rem; box-shadow: 0 0 0 1px rgba(58,123,213,0.15), 0 10px 34px rgba(0,0,0,0.3); }
.score-badge { width: 100%; max-width: 240px; height: auto; justify-self: center; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
  transition: transform 0.25s ease; }
.score-card:hover .score-badge, .score-card:focus-within .score-badge { transform: rotate(-4deg) scale(1.04); }
.score-text { min-width: 0; text-align: left; }
.score-text h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0.2rem 0 0.6rem; color: var(--title); text-align: left; }
.score-points { list-style: none; padding: 0; margin: 0.9rem 0; display: grid; gap: 0.45rem; }
.score-points li { position: relative; padding-left: 1.3rem; font-size: 0.95rem; }
.score-points li::before { content: ''; position: absolute; left: 0.2rem; top: 0.62em; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--accent); }
.score-points b { color: var(--text-primary); font-weight: 700; }
.score-conts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.score-conts span { font-size: 0.8rem; font-weight: 500; padding: 0.25rem 0.75rem; border-radius: 8px; border: 1px solid var(--border-card);
  background: rgba(10,31,68,0.6); color: var(--text-secondary); }
.score-conts span.w { border-color: var(--accent); color: var(--accent); }
.score-card .go { font-size: 0.95rem; margin-top: 1rem; }
.score-hero .score-badge { display: block; max-width: 200px; margin: 0 auto 0.8rem; }
.score-formula { display: inline-block; font-weight: 500; color: var(--text-primary) !important; border: 1px dashed var(--border-subtle);
  background: var(--accent-glow); border-radius: 8px; padding: 0.35rem 1.1rem; margin: 0.2rem auto 1.2rem; font-size: 0.92rem;
  text-align: center !important; text-align-last: center; }
.score-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.7rem; }
.score-ladder div { text-align: center; font-size: 0.75rem; line-height: 1.35; padding: 0.5rem 0.3rem; border-radius: 8px;
  background: rgba(10,31,68,0.6); border: 1px solid var(--border-card); color: var(--text-muted); }
.score-ladder b { display: block; color: var(--text-primary); font-size: 0.85rem; margin-bottom: 0.15rem; }
.score-ladder .lv3 { border-color: var(--accent); }
.score-ladder .lv3 b { color: var(--accent); }
.score-faq { max-width: 820px; margin: 2.2rem auto 0; }
.score-faq h2 { text-align: center; margin-bottom: 0.9rem; }
#score { scroll-margin-top: calc(var(--nav-height, 64px) + 1rem); }
@media (max-width: 680px) {
  .score-card { grid-template-columns: 1fr; gap: 1rem; padding: 1.3rem 1.1rem; }
  .score-badge { max-width: 170px; }
  .score-text h2 { text-align: center; }
  .score-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .score-badge { transition: none; }
  .score-card:hover .score-badge, .score-card:focus-within .score-badge { transform: none; }
}

/* ---------- W51a (2026-10-12): the Suggest line under the feature cards of the home (the game's chat Suggest tab, MS125a) ---------- */
.suggest-note { display: flex; align-items: center; gap: 0.9rem; max-width: 960px; margin: 1.1rem auto 0; padding: 0.9rem 1.2rem;
  border: 1px dashed var(--accent); border-radius: var(--radius-lg); background: var(--accent-glow); color: var(--text-secondary);
  text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
.suggest-note:hover { border-style: solid; background: rgba(58,123,213,0.18); color: var(--text-primary); }
.suggest-tag { flex: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #ffffff;
  background: var(--accent); border-radius: 8px; padding: 0.25rem 0.75rem; }
.suggest-text { flex: 1; min-width: 0; font-size: 0.95rem; text-align: left; -webkit-hyphens: manual; hyphens: manual; }
.suggest-note .arr { flex: none; color: var(--accent); font-weight: 700; }
@media (max-width: 680px) { .suggest-note { flex-direction: column; align-items: flex-start; } }

/* ---------- W52a (2026-10-13): Our patients (Blocky) ----------
   The page patients/: Blocky in 3D (pages/patients.js) with the rail to combine him. Approved preview
   MedSim_Web/W52a_Nuestros_Pacientes_Preview.html. make_vms_pages.py appends this file to public/site.css. */
.pt-by { max-width: 720px; margin: 0 auto; font-size: 0.95rem; color: var(--text-muted); }
.pt-by b { font-weight: 700; color: var(--accent); }
.pt-lab { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 1.1rem; align-items: start; width: min(1180px, calc(100vw - 3rem));
  margin: 1.2rem 0 0 50%; transform: translateX(-50%); }
.pt-stage { position: sticky; top: calc(var(--nav-height) + 12px); height: min(calc(100vh - var(--nav-height) - 24px), 640px); min-height: 400px;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle);
  background: radial-gradient(ellipse at 50% 38%, #f7f8fa 0%, #dde2ea 100%); }
#pt-cv { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
#pt-cv:active { cursor: grabbing; }
.pt-tip { position: absolute; right: 14px; left: 14px; bottom: 12px; text-align: right; line-height: 1.4; font-size: 0.8rem; font-weight: 400; color: #1b2a47; opacity: 0.65; pointer-events: none; }
.pt-hud { position: absolute; left: 14px; top: 12px; right: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  color: #1b2a47; pointer-events: none; }
.pt-hud b { font-size: 1.25rem; font-weight: 700; }
.pt-hud span { font-size: 0.9rem; font-weight: 400; opacity: 0.75; }
.pt-rail { min-width: 0; background: var(--bg-secondary); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 1rem; }
.pt-railhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.pt-railhead h2 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--title); }
.pt-rnd { all: unset; cursor: pointer; padding: 0.55rem 1.2rem; border-radius: var(--radius); background: var(--accent); color: #ffffff;
  font-size: 0.95rem; font-weight: 500; line-height: 1.2; transition: transform 0.15s ease; }
.pt-rnd:hover { transform: translateY(-1px); }
.pt-grp { padding: 0.9rem 0; border-top: 1px solid var(--border-card); }
.pt-grp:last-child { padding-bottom: 0; }
.pt-grp h3 { margin: 0 0 0.6rem; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.pt-cast { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pt-who { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 5px 4px 6px; border-radius: 10px;
  border: 1px solid var(--border-card); background: var(--bg-card); font-size: 0.72rem; font-weight: 400; line-height: 1.2; text-align: center;
  color: var(--text-secondary); transition: transform 0.15s ease, border-color 0.15s ease; }
.pt-who canvas { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: 7px; background: radial-gradient(ellipse at 50% 38%, #f7f8fa 0%, #dde2ea 100%); }
.pt-who:hover { transform: translateY(-2px); border-color: var(--accent-dim); }
.pt-who[aria-pressed="true"] { border-color: var(--accent); background: var(--bg-card-hover); color: var(--accent); }
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-chip { all: unset; cursor: pointer; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--border-card); background: var(--bg-card);
  font-size: 0.86rem; font-weight: 400; color: var(--text-secondary); }
.pt-chip:hover { border-color: var(--accent-dim); color: var(--text-primary); }
.pt-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-glow); color: var(--accent); }
.pt-chip[disabled] { opacity: 0.35; cursor: default; }
.pt-outfits { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.pt-sw { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 5px; align-items: center; padding: 6px 3px; border-radius: 8px;
  border: 1px solid var(--border-card); background: var(--bg-card); font-size: 0.7rem; font-weight: 400; text-align: center; line-height: 1.2;
  color: var(--text-secondary); }
.pt-sw i { display: block; width: 34px; height: 40px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); }
.pt-sw[aria-pressed="true"] { border-color: var(--accent); background: var(--bg-card-hover); color: var(--accent); }
.pt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-row + .pt-row, .pt-chips + .pt-row { margin-top: 10px; }
.pt-lbl { font-size: 0.82rem; font-weight: 400; color: var(--text-muted); min-width: 62px; }
.pt-dot { all: unset; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
.pt-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--accent); }
.pt-tog { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 400; color: var(--text-secondary); cursor: pointer; }
.pt-tog input { accent-color: var(--accent); width: 16px; height: 16px; }
.pt-tog:has(input:disabled) { opacity: 0.35; cursor: default; }
.pt-who:focus-visible, .pt-chip:focus-visible, .pt-sw:focus-visible, .pt-dot:focus-visible, .pt-rnd:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pt-why { max-width: 980px; margin: 3.2rem auto 0; }
.pt-why > h2 { margin: 0 0 0.4rem; font-size: clamp(1.5rem, 3.6vw, 2rem); color: var(--title); text-align: center; }
.pt-why .pt-intro { max-width: 720px; margin: 0 auto; text-align: justify; text-align-last: center; }
.pt-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 2.5rem; margin: 1.6rem 0 1.8rem; }
.pt-point { min-width: 0; padding-top: 1.1rem; border-top: 1px solid var(--border-subtle); }
.pt-point h3 { margin: 0 0 0.4rem; font-size: 1.08rem; font-weight: 500; color: var(--accent); }
.pt-point p { margin: 0 0 0.9rem; font-size: 0.98rem; }
@media (max-width: 960px) {
  .pt-lab { grid-template-columns: minmax(0, 1fr); width: auto; margin-left: 0; transform: none; }
  .pt-stage { top: calc(var(--nav-height) + 6px); height: 44vh; min-height: 280px; z-index: 5; box-shadow: 0 10px 24px rgba(4,12,27,0.55); }
  .pt-points { grid-template-columns: minmax(0, 1fr); }
}

/* W52a: the band of Blocky on the home (under the Medical Score band): the mini 3D scene on the left, the whole band a link to patients/. */
.pt-band .score-card { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
.pt-mini { aspect-ratio: 4 / 3; width: 100%; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 38%, #f7f8fa 0%, #dde2ea 100%);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35); }
.pt-mini canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 760px) { .pt-band .score-card { grid-template-columns: 1fr; } }