/* ==========================================================================
   HUELLA DEPORTIVA · Tema «laboratorio nocturno»
   Se carga después de styles.css y lo reviste con el diseño de la portada:
   fondo carbón con grano, titulares en Barlow Condensed en mayúsculas,
   etiquetas en Varela Round, azul para lo que funciona y naranja para el dolor.
   La estructura, el contenido y el SEO de cada página no cambian.
   ========================================================================== */
:root:root:root:root:root, :root:root:root:root:not([data-theme="light"]), :root:root:root:root[data-theme] {
  --bg: #1c1e22; --surface: #24272c; --raised: #2e3237; --soft: #2a2d32; --paper: #24272c;
  --line: #3a3e45; --ink: #f2efe8; --ink2: #d4d1ca; --muted: #a6a9ae;
  --blue: #6b84f5; --blue-text: #8a9dff; --glow: #8fd0f7; --pain: #ff6a1f; --on-blue: #16181b;
  --bone: #4a4e55; --bone-edge: #8d9096; --bone-hover: #5c6068;
  --electric: #2a45ff; --deep: #0f1013;
  --accent: #8a9dff; --accent-ink: #16181b; --hot: #ff6a1f; --new: #ff6a1f; --new-ink: #16181b;
  --c-les: #ff6a1f; --c-dep: #8a9dff; --c-cal: #f2efe8; --c-con: #8a9dff;
  --band-bg: #1c1e22; --band-fg: #f2efe8; --band-muted: #a6a9ae;
  --plate: #f2efe8; --plate-dot: rgba(28, 30, 34, .16);
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --monoui: "Varela Round", "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--display); --font-body: var(--body); --ui: var(--body); --mono: var(--monoui);
  --r: 2px; --r-lg: 2px;
  color-scheme: dark;
}

/* ---------- Base ---------- */
html, body { background: var(--bg) !important; color: var(--ink) !important; }
body { font-family: var(--body) !important; font-size: 17px !important; line-height: 1.55 !important; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
::selection { background: var(--blue) !important; color: var(--on-blue) !important; }
a { color: var(--blue-text) !important; text-decoration-color: rgba(138, 157, 255, .4) !important; text-underline-offset: 4px; }
a:hover { color: var(--ink) !important; text-decoration-color: currentColor !important; }
:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--blue-text) !important; outline-offset: 3px !important; }
h1, h2, h3, h4 { color: var(--ink) !important; }
h1, h2 { font-family: var(--display) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: -.005em !important; text-wrap: balance; }
h3, h4 { font-family: var(--body) !important; font-weight: 600 !important; letter-spacing: -.01em !important; text-transform: none !important; }
strong, b { color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); }

/* Etiquetas: Varela Round, mayúsculas espaciadas, como las lecturas del instrumento */
.eyebrow, .label, .crumbs, .crumbs a, .article-meta, .ad-label, .zone-h, .ficha-grid dt, .side-box h3, .toc-box > summary,
.footer-legal, .footer-legal a, .footer-cols b, .footer-cols nav b, .vs-k, th, .tl-date, .series-meta, .shoe-cat, .plan-tag, .shoe-specs dt, .contact-list dt,
.calc-k, .legend, .footmap-cap, .figure-sub, .legs-key, .schema-title, .sub-n, .ex-n, .ex-dose, .dose, .hn-mark, .m-zone, .m-zgroup > summary em,
.nav a, .nav-drop, .btn, .m-book, .f-cta, .hdr-cta, .search-btn span, .m-label, .pager a span, .feature-label, .stat-src, .shoe-src, .source, .pmid,
.figure-note, .clinic-sub, .key, .knee-legend, .footmap-legend, .profile-role, .tile-cap, .sz-cause, .search-label, .panel-foot a, .m-all a, .m-links a,
.sports-list em, .m-group > summary, .m-zgroup > summary span, .m-home, .to-top, .ficha-alarm, .copyable, .vs-head .vs-a, .vs-head .vs-b, .series-num {
  font-family: var(--monoui) !important; text-transform: uppercase !important; letter-spacing: .1em !important; font-weight: 400 !important;
}
.crumbs, .article-meta, .ad-label, .zone-h, .ficha-grid dt, .side-box h3, .toc-box > summary, .footer-legal, .vs-k, th, .tl-date, .series-meta, .shoe-cat,
.plan-tag, .shoe-specs dt, .contact-list dt, .calc-k, .legend, .footmap-cap, .figure-sub, .legs-key, .schema-title, .sub-n, .ex-n, .figure-note, .source,
.pmid, .stat-src, .shoe-src, .profile-role, .tile-cap, .sports-list em, .search-label, .hn-mark, .m-zgroup > summary em {
  font-size: 11px !important; color: var(--muted) !important;
}
.source a, .pmid { color: var(--blue-text) !important; }

/* ---------- Botones ---------- */
.btn, .m-book, .f-cta, .hdr-cta, .btn-main {
  display: inline-flex !important; align-items: center; gap: 10px; font-size: 12px !important; padding: 14px 20px !important; border-radius: 2px !important;
  background: var(--blue) !important; color: var(--on-blue) !important; border: 0 !important; box-shadow: none !important; text-decoration: none !important;
  transition: box-shadow .3s, background .3s, color .3s;
}
.btn:hover, .m-book:hover, .f-cta:hover, .hdr-cta:hover, .btn-main:hover { background: var(--blue) !important; color: var(--on-blue) !important; box-shadow: 0 0 28px 4px rgba(107, 132, 245, .6) !important; }
.btn-ghost, .cta-strip .btn + .btn { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink) !important; }
.btn-ghost:hover, .cta-strip .btn + .btn:hover { background: var(--ink) !important; color: var(--bg) !important; }

/* ---------- Cabecera ---------- */
.site-header { background: rgba(28, 30, 34, .88) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line) !important; box-shadow: none !important; }
.site-header::after { display: none !important; }
.site-header > .wrap { min-height: 64px; padding-block: 0 !important; }
.brand { color: var(--ink) !important; text-decoration: none !important; display: flex; align-items: center; gap: 10px; }
.brand-mark { display: none !important; }
.brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); flex-shrink: 0; box-shadow: 0 0 0 4px rgba(143, 208, 247, .35), 0 0 14px 4px var(--glow); }
.brand-name { display: flex; flex-direction: column; line-height: 1; font-family: var(--display) !important; font-weight: 800 !important; font-size: 19px !important; text-transform: uppercase; letter-spacing: 0 !important; color: var(--ink) !important; }
.brand-name small { font-family: var(--monoui); font-weight: 400; font-size: 10px; letter-spacing: .1em; color: var(--muted); margin-top: 4px; }
.nav a, .nav-drop { font-size: 11px !important; color: var(--muted) !important; background: none !important; border: 0 !important; border-bottom: 1px solid transparent !important; padding: 10px 8px !important; }
.nav-drop svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav a:hover, .nav-drop:hover, .nav-drop[aria-expanded="true"] { color: var(--ink) !important; }
.nav-drop.is-current, .nav a[aria-current="page"] { color: var(--ink) !important; border-bottom-color: var(--blue-text) !important; }
.search-btn { background: transparent !important; color: var(--ink) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--line) !important; border-radius: 2px !important; }
.search-btn:hover, .search-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--ink) !important; }
.search-btn svg, .hero-search-box svg { fill: none; stroke: currentColor; }
.search-btn span { font-size: 11px !important; color: inherit !important; }
.hdr-cta { padding: 10px 14px !important; }
.m-menu { background: transparent !important; color: var(--ink) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--line) !important; border-radius: 2px !important; }
.m-burger i { background: var(--ink) !important; }
.m-label { font-size: 11px !important; color: var(--ink) !important; }

/* Desplegables y menú móvil */
.sports-panel, .search-panel { background: var(--surface) !important; border-bottom: 1px solid var(--line) !important; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7) !important; }
.m-sheet { background: var(--bg) !important; }
.sports-list a { color: var(--ink) !important; text-decoration: none !important; border-radius: 2px !important; background: transparent !important; box-shadow: none !important; }
.sports-list a:hover { background: var(--raised) !important; }
.sports-list b, .m-group ul b, .guide-list b { font-family: var(--display) !important; font-weight: 700 !important; text-transform: uppercase; font-size: 20px !important; letter-spacing: 0 !important; color: var(--ink) !important; line-height: 1 !important; }
.sports-list a:hover b, .guide-list a:hover b { color: var(--blue-text) !important; }
.sports-list span, .m-group ul span, .guide-list span { color: var(--muted) !important; font-size: 15px !important; }
.sports-list .is-live em::before { background: var(--pain) !important; }
.zone-h { border-bottom: 1px solid var(--line) !important; }
.panel-sub, .m-sub { color: var(--blue-text) !important; }
.panel-foot a, .m-all a, .m-links a, .m-home { font-size: 11px !important; color: var(--blue-text) !important; }
.m-group, .m-zgroup { border-color: var(--line) !important; }
.m-group > summary, .m-zgroup > summary span { font-size: 12px !important; color: var(--ink) !important; }
.site-search input, .m-search input, #q-top { font: inherit !important; font-size: 16px !important; color: var(--ink) !important; background: var(--bg) !important; border: 1px solid var(--line) !important; border-radius: 2px !important; padding: 13px 14px !important; box-shadow: none !important; }
.site-search input:focus { outline: none !important; border-color: var(--blue-text) !important; box-shadow: 0 0 0 1px var(--blue-text) !important; }
.search-results { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 2px !important; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8) !important; }
.search-results a { color: var(--ink) !important; }
.search-results [aria-selected="true"], .search-results a:hover { background: var(--raised) !important; }
.skip-link { background: var(--blue) !important; color: var(--on-blue) !important; }

/* ---------- Cabecera de página (banner) ---------- */
header.banner, .banner { position: relative; background:
  linear-gradient(var(--line) 1px, transparent 1px) 0 0/100% 48px,
  linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/48px 100%, var(--bg) !important;
  border-bottom: 1px solid var(--line) !important; color: var(--ink) !important; }
header.banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 30, 34, .55), var(--bg) 92%); pointer-events: none; }
header.banner > .wrap { position: relative; }
.banner-compact .banner-grid, .banner .banner-grid { padding-block: clamp(40px, 7vw, 88px) clamp(32px, 5vw, 56px) !important; }
.banner h1 { font-size: clamp(44px, 7.4vw, 96px) !important; line-height: .88 !important; max-width: 18ch; margin-top: 16px !important; }
.banner-lede { color: var(--muted) !important; font-size: 19px !important; max-width: 52ch !important; margin-top: 20px !important; }
.crumbs { gap: 8px !important; margin-top: 0 !important; }
.crumbs a { color: var(--muted) !important; text-decoration: none !important; }
.crumbs a:hover { color: var(--ink) !important; }
.crumbs > span:last-child { color: var(--blue-text) !important; }
.banner-profile .profile-photo img { border-radius: 2px !important; border: 1px solid var(--line); filter: none !important; box-shadow: none !important; }

/* ---------- Artículo ---------- */
.article p, .article li, .article dd, .main-grid p, .main-grid li { color: var(--ink2) !important; }
.article { font-size: 17px; }
.article h2 { font-size: clamp(30px, 4.4vw, 44px) !important; line-height: .95 !important; margin: 2.2em 0 .55em !important; padding-top: 0 !important; border-top: 0 !important; }
.article h3, .article .h3, .faq h3 { font-size: 21px !important; line-height: 1.25 !important; }
.article-meta { gap: 8px 18px !important; border-bottom: 1px solid var(--line) !important; padding-bottom: 16px; }
.article-meta a { color: var(--blue-text) !important; }
.answer { font-family: var(--body) !important; font-style: normal !important; font-size: 21px !important; line-height: 1.45 !important; color: var(--ink) !important; border-left: 3px solid var(--blue) !important; padding-left: 18px !important; }
.article strong { color: var(--ink); font-weight: 600; }

/* Cajas: superficies planas con filete, sin sombras */
.figure, .ficha, .footmap, .legs-fig, .calc, .exercise, .shoe, .feature, .clinic, .plan, .stat-card, .when > div, .takeaway, .note-box, .ask-box, .legal-box,
.schema-branch, .versus, .vs > div, .book, .series-item, .icon-grid > *, .faq-item, .sub, .ex-fold, .side-box, .toc-box, .next-box, .hub-link a, .clinic-mini, .p {
  background: var(--surface) !important; border-color: var(--line) !important; border-radius: 2px !important; box-shadow: none !important; color: var(--ink) !important;
}
.figure, .ficha, .footmap, .legs-fig, .calc, .exercise, .shoe, .feature, .clinic, .plan, .stat-card, .when > div, .schema-branch, .versus, .series-item { border: 1px solid var(--line) !important; }
.note-box, .ask-box, .takeaway { border-left: 3px solid var(--blue) !important; }
.legal-box { border-left: 3px solid var(--pain) !important; }
.legal-box b { color: var(--pain) !important; font-family: var(--body) !important; }
.note-box b, .ask-box b, .takeaway b { color: var(--ink) !important; }
.feature:hover, .shoe:hover { box-shadow: 0 0 0 1px var(--muted) !important; transform: none !important; }
.figure-title, .when b, .defs dt, .facts b, .step b, .services b, .timeline b, .soon dt { font-family: var(--body) !important; font-weight: 600 !important; color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
.defs > div { border-color: var(--line) !important; }
.defs dt { font-size: 17px !important; }

/* Ficha rápida */
.ficha-grid > div { border-color: var(--line) !important; }
.ficha-grid dt svg { stroke: var(--blue-text) !important; color: var(--blue-text) !important; }
.ficha-grid dd { color: var(--ink) !important; font-size: 17px !important; }
.ficha-alarm { color: var(--pain) !important; box-shadow: inset 0 0 0 1px var(--pain) !important; border: 0 !important; background: transparent !important; font-size: 11px !important; border-radius: 2px !important; text-decoration: none !important; }
.ficha-alarm:hover { background: var(--pain) !important; color: var(--on-blue) !important; }

/* Dibujos de línea: tinta clara sobre carbón, punto de dolor en naranja */
.gl, .fm-foot path, .fm-plantar path, .fm-side path, .ficha-map path, .dw path { stroke: var(--ink) !important; }
.ga, .gar, .legs-fig .ga, .legs-fig .gar { stroke: var(--blue-text) !important; }
.fm-spot circle, .fm-spot .fm-halo, .dw-dot { fill: var(--pain) !important; }
.ficha-map circle { fill: var(--pain) !important; }

/* Desplegables de lectura: subapartados, ejercicios, preguntas y referencias */
.sub > summary, .ex-fold > summary, .faq-item > summary, .refs-fold > summary, details > summary { color: var(--ink) !important; }
.sub-n, .ex-n { color: var(--blue-text) !important; box-shadow: inset 0 0 0 1px var(--line) !important; background: transparent !important; border-radius: 2px !important; }
.sub[open], .ex-fold[open], .faq-item[open] { box-shadow: 0 0 0 1px var(--muted) !important; }
.faq-item { border: 1px solid var(--line) !important; }
.exercise ol li::marker { color: var(--blue-text) !important; font-family: var(--monoui) !important; }
.ex-dose, .dose { color: var(--blue-text) !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--line) !important; border-radius: 2px !important; font-size: 11px !important; }
.refs { border-top: 1px solid var(--ink) !important; }
.refs li:target { background: var(--raised) !important; }

/* Semáforo «cuándo sí / cuándo no» y comparativas */
.when-yes { border-top: 3px solid var(--blue) !important; }
.when-no { border-top: 3px solid var(--pain) !important; }
.vs-head .vs-a { background: var(--pain) !important; color: var(--on-blue) !important; }
.vs-head .vs-b { background: var(--blue) !important; color: var(--on-blue) !important; }
.vs-row .vs-a { color: #ffa070 !important; }
.vs-row .vs-b { color: var(--blue-text) !important; }
.cmp-track { background: var(--raised) !important; border-radius: 2px !important; }
.cmp-fill { background: var(--blue) !important; color: var(--on-blue) !important; border-radius: 2px !important; font-family: var(--monoui) !important; }
.cmp-fill.b { background: var(--bone-edge) !important; }
.cmp-fill.a { background: var(--pain) !important; }
.stance { background: var(--blue) !important; color: var(--on-blue) !important; font-family: var(--monoui) !important; }
.swing { background: var(--raised) !important; color: var(--muted) !important; font-family: var(--monoui) !important; }
.bar { border-radius: 2px !important; }
table { border-color: var(--line) !important; }
th, td { border-color: var(--line) !important; }
td { color: var(--ink2); }

/* Zapatillas */
.shoe-specs dd, .shoe-ojo { color: var(--ink2) !important; }
.shoe-ojo { border-color: var(--line) !important; }
.shoe-line { color: var(--muted) !important; }

/* Calculadora y formularios */
.calc-input input, input[type="number"], input[type="text"], input[type="email"], select, textarea {
  background: var(--bg) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 2px !important; font-family: var(--body) !important;
}
.calc-out b, .plan-price, .stat b, .sz-num { color: var(--blue-text) !important; font-family: var(--display) !important; font-weight: 800 !important; }
.sz-num { color: var(--on-blue) !important; background: var(--pain) !important; border-radius: 2px !important; }
.copyable { color: var(--ink) !important; font-size: 13px !important; }

/* Barra lateral: índice y cajas */
.toc-box, .side-box { background: transparent !important; border: 0 !important; border-top: 1px solid var(--ink) !important; }
.toc a { color: var(--muted) !important; text-decoration: none !important; font-family: var(--body) !important; font-size: 15px !important; }
.toc a:hover, .toc a[aria-current="true"], .toc a.is-on { color: var(--ink) !important; }
.side-box p { color: var(--muted) !important; }

/* Siguientes lecturas */
.guide-list { border-top: 1px solid var(--ink) !important; }
.guide-list a { border-bottom: 1px solid var(--line) !important; color: var(--ink) !important; text-decoration: none !important; }
.pager a { border-top: 1px solid var(--ink) !important; color: var(--ink) !important; font-family: var(--display) !important; text-transform: uppercase; font-weight: 700 !important; font-size: 22px !important; line-height: 1 !important; text-decoration: none !important; }
.pager a span { display: block; margin-bottom: 6px; }
.pager a:hover { border-top-color: var(--blue-text) !important; color: var(--blue-text) !important; }
.series-num { color: var(--blue-text) !important; font-size: 13px !important; }

/* Franja de cita: sección azul de la portada */
.cta-strip { background: #4560e3 !important; color: #fff !important; border-radius: 2px !important; border: 0 !important; }
.cta-strip b { font-family: var(--display) !important; font-weight: 800 !important; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 40px) !important; line-height: .95 !important; color: #fff !important; }
.cta-strip p { color: #eef1ff !important; }
.cta-strip .btn { background: #fff !important; color: #1c1e22 !important; }
.cta-strip .btn:hover { box-shadow: 0 0 28px 4px rgba(255, 255, 255, .45) !important; }
.cta-strip .btn + .btn { background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1px #fff !important; }
.cta-strip .btn + .btn:hover { background: #fff !important; color: #1c1e22 !important; }

/* Publicidad: discreta, del mismo carbón */
.ad-placeholder { background: var(--surface) !important; border: 1px dashed var(--line) !important; border-radius: 2px !important; color: var(--muted) !important; font-family: var(--monoui) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: .1em; }

/* Aviso sanitario */
.health-notice { background: var(--bg) !important; border-top: 1px solid var(--line) !important; border-bottom: 0 !important; }
.health-notice p { color: var(--muted) !important; font-size: 14px !important; }
.health-notice .hn-mark { color: var(--pain) !important; }

/* Pie */
.site-footer { background: var(--bg) !important; border-top: 1px solid var(--line) !important; color: var(--muted) !important; }
.footer-cols .f-name { font-family: var(--display) !important; font-weight: 800 !important; text-transform: uppercase; font-size: 22px !important; color: var(--ink) !important; letter-spacing: 0 !important; display: flex; align-items: center; gap: 10px; }
.f-about p { color: var(--muted) !important; font-size: 14px !important; }
.footer-cols b, .footer-cols nav b { color: var(--muted) !important; }
.site-footer a { color: var(--muted) !important; font-size: 14px; }
.site-footer a:hover { color: var(--ink) !important; }
.site-footer .f-cta { color: var(--on-blue) !important; font-size: 12px !important; }
.footer-legal { border-top: 1px solid var(--line) !important; }
.to-top { background: var(--blue) !important; color: var(--on-blue) !important; border-radius: 2px !important; font-size: 11px !important; box-shadow: none !important; }

/* Páginas de clínicas, consulta y estudio */
.clinic h2, .clinic h3, .plan h3 { font-family: var(--display) !important; text-transform: uppercase; font-weight: 800 !important; }
.contact-list dd { color: var(--ink) !important; }
.plan-main { box-shadow: 0 0 0 1px var(--blue) !important; }
.timeline > * { border-color: var(--line) !important; }
.tl-place { color: var(--blue-text) !important; font-family: var(--body) !important; }
.chips a, .zone-nav a { font-family: var(--monoui) !important; font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; border: 1px solid var(--line) !important; background: transparent !important; border-radius: 999px !important; text-decoration: none !important; }
.chips a:hover, .zone-nav a:hover { color: var(--ink) !important; border-color: var(--muted) !important; }

/* Mapa del pie de «dolor-pie»: zonas en naranja */
.footmap { background: radial-gradient(80% 70% at 50% 42%, #2b2e34, #16181b) !important; }

/* Figura interactiva de barefoot (viene de la primera web) */
.bf { margin: 40px 0 8px; border: 1px solid var(--line); background: #121317; padding: 20px; border-radius: 2px; }
.bf-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 180px); gap: 20px; align-items: center; }
.bf svg { width: 100%; height: auto; max-height: 520px; display: block; }
.bf .anno { font-family: var(--monoui); font-size: 10px; letter-spacing: .08em; fill: #f2b8a6; }
.bf .annob { font-family: var(--monoui); font-size: 10px; letter-spacing: .08em; fill: var(--blue-text); }
.bf .shoe { fill: none !important; stroke: var(--blue); stroke-width: 2.4; stroke-linejoin: round; background: none !important; border: 0 !important; }
.bf .shoe2 { fill: none; stroke: var(--blue); stroke-width: 1; opacity: .45; stroke-dasharray: 3 4; }
.bf .dim { stroke: #f2b8a6; stroke-width: 1; fill: none; }
.bf .dim2 { stroke: #f2b8a6; stroke-width: 1; fill: none; stroke-dasharray: 2 3; opacity: .7; }
.bf .toe { stroke: #3a3d44; stroke-width: 1; }
.bf-read { display: grid; gap: 18px; font-family: var(--monoui); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--muted); }
.bf-read strong { display: block; font-family: var(--display); font-size: 40px; letter-spacing: 0; line-height: 1; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.bf-read .st { font-size: 14px; color: var(--ink) !important; letter-spacing: .02em; text-transform: none; font-family: var(--body); margin: 0; }
.bf-ctrl { margin-top: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; font-family: var(--monoui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bf-ctrl input { width: 100%; accent-color: var(--blue); height: 32px; cursor: pointer; background: none !important; border: 0 !important; }
.bf-cap { margin-top: 10px; font-size: 13px; color: var(--muted); font-family: var(--body); }
@media (max-width: 640px) { .bf-stage { grid-template-columns: 1fr; } .bf-read { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .bf-read strong { font-size: 28px; } .bf-read .st { grid-column: 1/-1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Ajustes de la página de lesiones */
.hub-link a { border: 1px solid var(--line) !important; border-left: 3px solid var(--pain) !important; padding: 20px 24px !important; }
.hub-link b { color: var(--ink) !important; font-family: var(--display) !important; text-transform: uppercase; font-size: 24px !important; font-weight: 800 !important; }
.hub-link span { color: var(--muted) !important; }
.hub-link a:hover b { color: var(--blue-text) !important; }
.zone-nav a, .chips a { min-height: 40px !important; padding: 0 16px !important; display: inline-flex !important; align-items: center; box-shadow: none !important; }
.site-footer .footer-cols b.f-name { font-family: var(--display) !important; text-transform: uppercase !important; letter-spacing: 0 !important; font-size: 22px !important; color: var(--ink) !important; font-weight: 800 !important; }
/* Titulares siempre en Barlow Condensed 800 */
:root body h1, :root body h2 { font-weight: 800 !important; font-family: var(--display) !important; }
@media (max-width: 860px) { .brand-name { display: flex !important; font-size: 17px !important; } .brand-name small { font-size: 9px; margin-top: 3px; } }
@media (max-width: 340px) { .brand-name { display: none !important; } }
/* Marca: «Huella Deportiva por Guillermo Zapata» */
.footer-cols .f-name { flex-wrap: wrap; row-gap: 4px; }
.footer-cols .f-name small { flex-basis: 100%; padding-left: 19px; font-family: var(--monoui); font-weight: 400; font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.brand-name small { color: var(--blue-text) !important; }

/* Apartados plegables numerados: número centrado en su casilla y alineado con el título */
:root body .sub > summary, :root body .ex-fold > summary { display: flex !important; align-items: center !important; gap: 16px !important; padding: 16px 18px !important; }
:root body .sub-n, :root body .ex-n, :root body .ex-fold .ex-n {
  flex: 0 0 36px !important; width: 36px !important; height: 36px !important; min-width: 36px !important; margin: 0 !important; padding: 0 !important;
  display: grid !important; place-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important;
  font-family: var(--display) !important; font-weight: 800 !important; font-size: 18px !important; letter-spacing: 0 !important;
  color: var(--blue-text) !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--blue-text) !important; border-radius: 2px !important;
}
:root body .sub > summary .h3, :root body .ex-fold > summary h3, :root body .ex-fold > summary .ex-head { margin: 0 !important; flex: 1 1 auto; min-width: 0; }
:root body .sub-body { padding-left: 70px !important; }
@media (max-width: 600px) { :root body .sub > summary, :root body .ex-fold > summary { padding: 14px !important; gap: 12px !important; } :root body .sub-body { padding-left: 14px !important; } }

/* Comparativa «A vs B»: insignia VS grande y visible sobre la unión de las dos columnas */
:root body .vs-head { position: relative; }
:root body .vs-head .vs-mid {
  width: 56px !important; height: 56px !important; margin: 0 -28px !important; border-radius: 50% !important; z-index: 2;
  background: #f2efe8 !important; color: #1c1e22 !important; box-shadow: 0 0 0 4px var(--bg), 0 6px 18px rgba(0, 0, 0, .5) !important;
  font-family: var(--display) !important; font-weight: 800 !important; font-size: 22px !important; letter-spacing: .02em !important; text-transform: uppercase !important;
}
:root body .vs-head .vs-a, :root body .vs-head .vs-b { padding-block: 18px !important; }
/* Ejercicios: la dosis siempre debajo del título, alineada con él */
:root body .ex-head { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
:root body .ex-head .ex-dose { padding: 4px 8px !important; }

/* Esquema del espolón calcáneo */
.spur-fig svg { width: 100%; height: auto; display: block; margin-top: 12px; }
.spur-fig .sp-skin { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.spur-fig .sp-bone { fill: var(--bone); stroke: var(--bone-edge); stroke-width: 1.5; }
.spur-fig .sp-muscle { fill: none; stroke: #b25a4a; stroke-width: 12; stroke-linecap: round; opacity: .55; }
.spur-fig .sp-fascia { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linecap: round; }
.spur-fig .sp-spur { fill: var(--pain); stroke: var(--pain); stroke-width: 1.5; stroke-linejoin: round; }
.spur-fig .sp-lab path { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .8; }
.spur-fig text { font-family: var(--monoui); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; fill: var(--ink); }
.spur-fig text.blue { fill: var(--blue-text); }
/* Corrección de desbordamiento: si la fuente tarda o falla y el texto ocupa más de lo previsto,
   la marca se recorta en lugar de empujar el botón de menú fuera de la pantalla.
   Con Barlow Condensed cargada el texto cabe y no cambia nada. */
.site-header > .wrap { min-width: 0; }
.site-header .brand { min-width: 0; flex-shrink: 1; }
.site-header .brand-name { min-width: 0; overflow: hidden; }
.site-header .brand-name, .site-header .brand-name small { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.site-header .hdr-actions { flex-shrink: 0; }
/* Corrección: correos largos que desbordaban en móviles de 320 px (solo se parten si no caben) */
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Nombres largos de clínica: pueden pasar a la línea siguiente sin desbordar */
.clinic-mini b, .clinic h2, .lh-clinic h3 { overflow-wrap: break-word; }
@media (max-width: 600px) { .clinic-mini { grid-template-columns: minmax(0, 1fr); } }

/* Sin guiones de corte: ninguna palabra se parte al final de línea */
*, *::before, *::after { -webkit-hyphens: none !important; hyphens: none !important; }