/* W20e / MS98b: Making Synapses blog. Same theme as the Making Synapses web (MedSim_Web/src/style.css): USA navy, yellow #3a7bd5, Roboto. */
: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);
  --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; }
body { font-family: var(--font); background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.7; 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.14) 0%, rgba(58,123,213,0.04) 40%, transparent 70%); }
main { flex: 1; width: 100%; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; color: var(--text-primary); }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); color: var(--accent); }
h3 { font-size: 1.15rem; }
p, li { color: var(--text-secondary); }
/* Justified text (Alejandro 2026-10-08): both edges, English hyphenation; centered blocks keep the last line centered. */
p, li, blockquote { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.page-hero p, .site-footer p { text-align-last: center; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--text-primary); }
strong { color: var(--text-primary); font-weight: 500; }

.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; }

.btn { display: inline-flex; align-items: center; padding: 0.65rem 1.5rem; border-radius: var(--radius); font-size: 0.9rem;
  font-weight: 700; transition: all var(--transition); }
.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: #24498c; color: #ffffff; box-shadow: 0 4px 20px rgba(58,123,213,0.35); }

.page-wrapper { max-width: var(--max-width); margin: 0 auto; padding: 2rem 1rem 3rem; }
.page-hero { text-align: center; padding: 2rem 0 1rem; }
.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: 0.75rem; }
.page-hero .subtitle { font-size: 1.05rem; max-width: 680px; margin: 0 auto; }

.bucket { margin-top: 2.5rem; }
.bucket h2 { font-size: 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 1rem; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.post-card { display: flex; flex-direction: column; gap: 0.5rem; background: var(--bg-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-lg); padding: 1.25rem; transition: all var(--transition); }
.post-card:hover { background: var(--bg-card-hover); border-color: var(--border-subtle); transform: translateY(-2px); }
.post-card h3 { color: var(--text-primary); }
.post-card p { font-size: 0.92rem; flex: 1; }
.post-card .read { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

.crumbs { max-width: var(--read-width); margin: 0 auto 1.25rem; font-size: 0.85rem; color: var(--text-muted); }
.crumbs span { margin: 0 0.35rem; }
.post { max-width: var(--read-width); margin: 0 auto; overflow-wrap: break-word; }
.post-head { margin-bottom: 1.75rem; }
.post-head h1 { margin-bottom: 0.6rem; }
.post-meta { font-size: 0.85rem; color: var(--text-muted); }
.post p { margin: 0 0 1.1rem; font-size: 1.05rem; }
.post h2 { margin: 2.4rem 0 0.9rem; }
.post h3 { margin: 1.6rem 0 0.5rem; }
.post ul, .post ol { margin: 0 0 1.2rem 1.4rem; }
.post li { margin-bottom: 0.45rem; font-size: 1.02rem; }
.post li::marker { color: var(--accent); }
.post blockquote { border-left: 3px solid var(--accent); background: var(--accent-glow); padding: 0.9rem 1.1rem; margin: 0 0 1.2rem;
  border-radius: 0 var(--radius) var(--radius) 0; }
.post blockquote p { margin: 0; color: var(--text-primary); }
.post #sources ~ ol li { font-size: 0.9rem; }

.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; color: #ffffff; background: var(--accent);
  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; }

.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; }
.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); }

/* W32a: language selector (same list as Making Synapses Web). */
.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; }

/* W36d: categories (bar, chips on cards and articles) and the "best" claims with the contact line. */
.cat-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.5rem auto 0; }
.cat-chip { display: inline-block; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; color: var(--accent);
  border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0.2rem 0.75rem; background: var(--accent-glow); }
a.cat-chip:hover, .cat-chip.active { background: var(--accent); color: #ffffff; }
.post-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.card-cats { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.card-cats .cat-chip { font-size: 0.7rem; padding: 0.1rem 0.55rem; }
.page-hero .eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; }
.claim { color: var(--text-primary); margin-top: 0.6rem; }
.page-hero .claim, .page-hero .cta-free { max-width: 680px; margin: 0.6rem auto 0; }
.cta-free { font-weight: 500; color: var(--accent); }
.claim-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.6rem; }
.page-hero .claim-note { max-width: 680px; margin: 0.4rem auto 0; }
.cta .claim-note { margin: 0.8rem 0 0; }

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

/* USA Navy (Alejandro 2026-10-10, same block as pages/site.css): red main button. */
.btn-primary { background: #d7263d !important; color: #ffffff !important; box-shadow: 0 2px 12px rgba(215,38,61,0.3) !important; }
.btn-primary:hover { background: #e8394f !important; color: #ffffff !important; }

/* W38e (2026-10-11): whole-card links in the blog, bucket titles to their category, "Practice it" at the end of an article. */
.post-card { position: relative; }
.post-card .read .arr { display: inline-block; transition: transform 0.15s ease; }
.post-card:hover .read .arr { transform: translateX(4px); }
.post-card .stretch { color: var(--text-primary); }
.post-card:hover .stretch { color: var(--accent); }
.bucket h2 a { color: var(--accent); }
.bucket h2 a .arr { font-size: 0.85em; transition: transform 0.15s ease; display: inline-block; }
.bucket h2 a:hover .arr { transform: translateX(4px); }
.practice { max-width: var(--read-width); margin: 2.5rem auto 0; border: 1px solid var(--accent-dim); background: var(--accent-glow);
  border-radius: var(--radius-lg); padding: 1.2rem 1.4rem; }
.practice h2 { font-size: 1.2rem; margin-bottom: 0.8rem; }
.backbar { max-width: var(--read-width); margin-left: auto; margin-right: auto; }
.crumbs span { margin: 0 0.35rem; }

/* ---------- 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; }