/* ==========================================================================
   PULZ / MAJORS — Hub editorial de las carreras del mundo
   Sistema visual autocontenido: hereda ADN PULZ (Bebas + Inter + JetBrains
   Mono, cream layered light, dark premium) + capa cromática por major.
   ========================================================================== */

:root {
    --bg: #0A0A0C;
    --bg2: #0F0F12;
    --bg3: #151518;
    --bg4: #1B1B1F;
    --brd: #1E1E22;
    --brd2: #2A2A30;
    --brd3: #35353C;
    --txt: #E5E1DA;
    --txt2: #B0B0B7;
    --txt3: #76767F;
    --txt4: #5C5C64;
    --pulse: #DEFF00;
    --pulse-rgb: 222,255,0;
    --pulse-tint-soft: rgba(222,255,0,0.03);
    --pulse-tint-med: rgba(222,255,0,0.06);
    --pulse-tint-strong: rgba(222,255,0,0.12);
    --brand-strava: #FC4C02;

    /* Color por major — heredado del branding oficial de cada carrera.
       Uso: fondo del hero-photo simulado, tint de card featured, accents. */
    --m-boston: #8B2635;
    --m-boston-rgb: 139,38,53;
    --m-london: #1F3A5F;
    --m-london-rgb: 31,58,95;
    --m-berlin: #E8B923;
    --m-berlin-rgb: 232,185,35;
    --m-chicago: #C8102E;
    --m-chicago-rgb: 200,16,46;
    --m-nyc: #FF8C42;
    --m-nyc-rgb: 255,140,66;
    --m-tokyo: #BC002D;
    --m-tokyo-rgb: 188,0,45;
    --m-sydney: #F2A900;
    --m-sydney-rgb: 242,169,0;
    --m-capetown: #007A4D;
    --m-capetown-rgb: 0,122,77;

    --elev-1: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
    --elev-2: 0 2px 4px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.35);
    --ease: cubic-bezier(0.4, 0.0, 0.2, 1);

    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 40px;
    --sp-2xl: 64px;
    --sp-3xl: 96px;
}

[data-theme="light"] {
    --bg: #ECE7DD;
    --bg2: #F8F4ED;
    --bg3: #DFD9CD;
    --bg4: #D2CBBC;
    --brd: #C8C0AE;
    --brd2: #B4AB93;
    --brd3: #A2987E;
    --txt: #1A1A20;
    --txt2: #4A4A54;
    --txt3: #706A5D;
    --txt4: #8F8877;
    --pulse: #506600;
    --pulse-rgb: 80,102,0;
    --pulse-tint-soft: rgba(80,102,0,0.025);
    --pulse-tint-med: rgba(80,102,0,0.05);
    --pulse-tint-strong: rgba(80,102,0,0.10);
    --elev-1: 0 1px 2px rgba(15,15,25,0.04), 0 2px 8px rgba(15,15,25,0.05);
    --elev-2: 0 2px 4px rgba(15,15,25,0.06), 0 8px 20px rgba(15,15,25,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--txt);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
    /* --m-current es el color canónico de la major en foco. Cada subpage
       define `data-major="X"` en el body y el resto del CSS lo lee de acá. */
    --m-current: var(--m-boston);
    --m-current-rgb: var(--m-boston-rgb);
}
body[data-major="london"]   { --m-current: var(--m-london);   --m-current-rgb: var(--m-london-rgb); }
body[data-major="berlin"]   { --m-current: var(--m-berlin);   --m-current-rgb: var(--m-berlin-rgb); }
body[data-major="chicago"]  { --m-current: var(--m-chicago);  --m-current-rgb: var(--m-chicago-rgb); }
body[data-major="nyc"]      { --m-current: var(--m-nyc);      --m-current-rgb: var(--m-nyc-rgb); }
body[data-major="tokyo"]    { --m-current: var(--m-tokyo);    --m-current-rgb: var(--m-tokyo-rgb); }
body[data-major="sydney"]   { --m-current: var(--m-sydney);   --m-current-rgb: var(--m-sydney-rgb); }
body[data-major="capetown"] { --m-current: var(--m-capetown); --m-current-rgb: var(--m-capetown-rgb); }
a { color: inherit; text-decoration: none; }

/* ==========================================================================
   HEADER — minimalista editorial, share con el sitio principal el logo
   pero no la lógica de auth/language switcher del app (evita duplicar JS).
   ========================================================================== */
/* v169.2 · Header majors ahora usa los ÁTOMOS CANÓNICOS del site
   (.theme-toggle + .lang-sw + .lang-btn del css/style.css). Los estilos
   viejos .mj-theme-toggle + .mj-lang* fueron eliminados por feedback
   consistency-audit: no duplicar componentes canónicos.
   Los átomos canónicos se copian abajo del bloque (single source of truth
   sigue siendo css/style.css — copiados aquí porque majors no carga style.css). */
.mj-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10,10,12,0.85);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--brd);
    /* Altura canónica 96px matcheando el site header (css/style.css línea 680).
       padding lateral 3rem edge-to-edge, sin max-width interno. */
    padding: 0 3rem;
    height: 96px;
    display: flex;
    align-items: center;
}
[data-theme="light"] .mj-header {
    background: rgba(236,231,221,0.90);
}
.mj-header-inner {
    max-width: 100%; margin: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.mj-brand {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Bebas Neue', sans-serif; font-size: 20px;
    letter-spacing: 0.15em; color: var(--txt);
}
.mj-brand-dot {
    width: 6px; height: 6px; background: var(--pulse);
    border-radius: 50%; opacity: 0.6;
    animation: mjDot 2.5s ease-in-out infinite;
}
@keyframes mjDot { 0%,100%{opacity:0.4} 50%{opacity:1} }
.mj-crumb {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.15em; color: var(--txt3);
    text-transform: uppercase;
}
.mj-crumb a { color: var(--txt3); transition: color 0.2s; }
.mj-crumb a:hover { color: var(--pulse); }
.mj-crumb .sep { margin: 0 8px; opacity: 0.5; }
.mj-nav { display: flex; gap: 10px; align-items: center; }
.mj-nav a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--txt3); transition: color 0.2s;
}
.mj-nav a:hover { color: var(--pulse); }
/* Back links (Volver a PULZ + Volver al hub) usan el mismo pattern pill
   compacto del site — mismo look que .hdr-contact del header canónico. */
.mj-nav-back-pulz, .mj-nav > a:not(.mj-nav-back-pulz) {
    display: inline-flex; align-items: center;
    height: 32px; padding: 0 0.65rem;
    background: var(--bg2);
    border: 1px solid var(--brd);
    border-radius: 8px;
    color: var(--txt2) !important;
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em;
    text-transform: none;
    transition: all 0.3s var(--ease);
    white-space: nowrap;
}
.mj-nav-back-pulz:hover, .mj-nav > a:not(.mj-nav-back-pulz):hover {
    border-color: rgba(var(--pulse-rgb),0.3);
    background: var(--bg3);
    color: var(--pulse) !important;
}

/* ==========================================================================
   ÁTOMOS CANÓNICOS DEL SITE — copiados exactos de css/style.css
   NO INVENTAR duplicados. Si necesitás cambios, cambialos en el site + acá.
   ========================================================================== */
/* ---- .theme-toggle (site style.css línea 7737) ---- */
.theme-toggle {
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;height:32px;
    background:var(--bg2);
    border:1px solid var(--brd);
    border-radius:8px;
    cursor:pointer;
    transition:all 0.3s var(--ease);
    flex-shrink:0;
    position:relative;
    overflow:hidden;
}
.theme-toggle:hover{border-color:rgba(var(--pulse-rgb),0.3);background:var(--bg3)}
.theme-toggle:active{transform:scale(0.88);transition:transform 0.1s}
.theme-toggle svg{width:15px;height:15px;transition:all 0.35s var(--ease);position:absolute}
.theme-icon-sun{opacity:0;transform:rotate(-90deg) scale(0.5);color:var(--pulse)}
.theme-icon-moon{opacity:1;transform:rotate(0) scale(1);color:var(--txt2)}
[data-theme="light"] .theme-icon-sun{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .theme-icon-moon{opacity:0;transform:rotate(90deg) scale(0.5)}

/* ---- .lang-sw + .lang-btn (site style.css línea 1892-1911) ---- */
.lang-sw {
    display:flex;gap:2px;
    background:var(--bg2);
    border:1px solid var(--brd);
    border-radius:6px;
    padding:2px;
}
.lang-btn {
    background:none;border:none;
    color:var(--txt3);
    font-family:'JetBrains Mono',monospace;
    font-size:0.74rem;font-weight:600;
    padding:0.38rem 0.62rem;
    border-radius:4px;
    cursor:pointer;
    transition:all 0.2s;
    letter-spacing:0.06em;
}
.lang-btn:hover{color:var(--txt2)}
.lang-btn.active{background:var(--pulse);color:var(--bg)}
.lang-btn:active{transform:scale(0.92);transition:transform 0.1s}

/* ==========================================================================
   CONTAINER
   ========================================================================== */
.mj-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.mj-wrap-narrow { max-width: 900px; margin: 0 auto; padding: 0 24px; }

/* ==========================================================================
   HERO EDITORIAL — /majors landing
   ========================================================================== */
.mj-hero {
    padding: 88px 0 64px;
    border-bottom: 1px solid var(--brd);
    margin-bottom: 0;
}
.mj-hero-eye {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.18em; color: var(--pulse);
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px;
}
.mj-hero-eye::before {
    content: ''; width: 24px; height: 1px; background: var(--pulse);
}
.mj-hero h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(44px, 7vw, 92px);
    line-height: 0.9; letter-spacing: -0.012em;
    font-weight: 400;
    margin-bottom: 24px;
    max-width: 13ch;
}
/* .mj-hl italic — el glyph italic de Bebas Neue tiene overhang natural
   a la derecha. inline-block + padding-right dan aire suficiente para que
   la última letra (E de SIETE) no se corte del bounding box. */
.mj-hero h1 .mj-hl {
    display: inline-block;
    padding-right: 0.15em;
    background-image: linear-gradient(135deg, #C8F000 0%, #DEFF00 40%, #E8F5A0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
}
[data-theme="light"] .mj-hero h1 .mj-hl {
    background-image: linear-gradient(135deg, #506600 0%, #3D5000 60%, #2A3500 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.mj-hero-lede {
    font-size: 17px; line-height: 1.65; color: var(--txt2);
    max-width: 640px;
    margin-bottom: 20px;
}
.mj-hero-lede strong { color: var(--txt); font-weight: 600; }
.mj-hero-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.12em; color: var(--txt3);
    text-transform: uppercase; margin-top: 16px;
}

/* ==========================================================================
   B1 EDITORIAL LIST — 8 majors numeradas
   ========================================================================== */
.mj-list { padding: 24px 0 96px; }
/* .mj-row hover — refinamiento del feedback: quitar el recuadro verde
   cuadrado del hover. Reemplazado por sistema orgánico editorial:
   (1) accent line vertical (::before) crece de 0 → 60% de altura sutil
   a la izquierda; (2) shift horizontal más pronunciado; (3) radial glow
   difuso desde la izquierda que se disipa hacia el centro (no linear,
   no cuadrado); (4) el número sale de gris tímido a pulse verde brillante. */
.mj-row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 32px; align-items: center;
    padding: 32px 0;
    border-bottom: 1px solid var(--brd);
    transition: padding-left 0.4s var(--ease), background 0.35s var(--ease);
    position: relative;
    text-decoration: none; color: var(--txt);
}
.mj-row::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 2px; height: 0;
    background: var(--pulse);
    transform: translateY(-50%);
    transition: height 0.4s var(--ease), opacity 0.3s var(--ease);
    opacity: 0;
    box-shadow: 0 0 12px rgba(var(--pulse-rgb), 0.5);
}
.mj-row:hover {
    padding-left: 28px;
    background: radial-gradient(ellipse 55% 100% at 0% 50%, var(--pulse-tint-med) 0%, transparent 65%);
}
.mj-row:hover::before {
    height: 62%;
    opacity: 1;
}
/* .mj-row-num — filosofía PULZ colorista: cada número toma el color oficial
   de su major (Boston burgundy, London navy, Berlin yellow, etc.) con opacidad
   baja en estado base para no saturar. En hover salta a full color del major.
   Identidad cromática visible sin invadir la lectura. */
.mj-row-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 56px;
    color: var(--txt3);
    line-height: 1; letter-spacing: -0.02em;
    font-weight: 400;
    transition: color 0.35s var(--ease), opacity 0.35s var(--ease), text-shadow 0.35s var(--ease);
}
.mj-row-num--boston   { color: rgba(var(--m-boston-rgb), 0.75); }
.mj-row-num--london   { color: rgba(var(--m-london-rgb), 0.75); }
.mj-row-num--berlin   { color: rgba(var(--m-berlin-rgb), 0.75); }
.mj-row-num--chicago  { color: rgba(var(--m-chicago-rgb), 0.75); }
.mj-row-num--nyc      { color: rgba(var(--m-nyc-rgb), 0.75); }
.mj-row-num--tokyo    { color: rgba(var(--m-tokyo-rgb), 0.75); }
.mj-row-num--sydney   { color: rgba(var(--m-sydney-rgb), 0.75); }
.mj-row-num--capetown { color: rgba(var(--m-capetown-rgb), 0.75); }
.mj-row:hover .mj-row-num--boston   { color: var(--m-boston);   text-shadow: 0 0 24px rgba(var(--m-boston-rgb), 0.5); }
.mj-row:hover .mj-row-num--london   { color: var(--m-london);   text-shadow: 0 0 24px rgba(var(--m-london-rgb), 0.5); }
.mj-row:hover .mj-row-num--berlin   { color: var(--m-berlin);   text-shadow: 0 0 24px rgba(var(--m-berlin-rgb), 0.5); }
.mj-row:hover .mj-row-num--chicago  { color: var(--m-chicago);  text-shadow: 0 0 24px rgba(var(--m-chicago-rgb), 0.5); }
.mj-row:hover .mj-row-num--nyc      { color: var(--m-nyc);      text-shadow: 0 0 24px rgba(var(--m-nyc-rgb), 0.5); }
.mj-row:hover .mj-row-num--tokyo    { color: var(--m-tokyo);    text-shadow: 0 0 24px rgba(var(--m-tokyo-rgb), 0.5); }
.mj-row:hover .mj-row-num--sydney   { color: var(--m-sydney);   text-shadow: 0 0 24px rgba(var(--m-sydney-rgb), 0.5); }
.mj-row:hover .mj-row-num--capetown { color: var(--m-capetown); text-shadow: 0 0 24px rgba(var(--m-capetown-rgb), 0.5); }
/* Filosofía pulse en el título del major: el punto final se pinta en verde
   pulse. Pattern establecido de PULZ (v161 "Tu temporada te espera<accent>.</accent>").
   Toque signature sin invadir el nombre. */
.mj-row-info h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(30px, 3vw, 40px);
    letter-spacing: -0.005em; line-height: 1;
    margin-bottom: 8px; font-weight: 400;
}
.mj-row-info h2 .mj-accent {
    color: var(--pulse);
    display: inline-block;
    transition: transform 0.3s var(--ease);
}
.mj-row:hover .mj-row-info h2 .mj-accent {
    transform: translateY(-2px) scale(1.2);
}
.mj-row-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: var(--txt3);
    letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 10px;
    display: flex; gap: 14px; flex-wrap: wrap;
}
.mj-row-meta .sep { opacity: 0.4; }
.mj-row-info p {
    font-size: 14px; color: var(--txt2);
    line-height: 1.6; max-width: 640px;
}
.mj-row-go {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--txt3);
    letter-spacing: 0.15em; text-transform: uppercase;
    transition: color 0.3s var(--ease);
    white-space: nowrap;
}
.mj-row:hover .mj-row-go { color: var(--pulse); }
/* Dot cromático por major — pequeño accent al lado del número */
.mj-row-dot {
    display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    margin-left: 4px; vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.mj-row:hover .mj-row-dot { opacity: 1; transform: scale(1.4); }

/* Cape Town — variante "emergente" (legacy — antes vivía dentro de mj-list como
   una row más. Ahora se usa la sección mj-candidate abajo. Estilos preservados
   por si otro contexto lo usa.) */
.mj-row-emerging .mj-row-num { opacity: 0.6; }
.mj-row-emerging-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pulse);
    background: var(--pulse-tint-strong);
    padding: 3px 8px; margin-left: 10px; vertical-align: middle;
    border-radius: 3px;
}

/* ==========================================================================
   CANDIDATE RACE — Cape Town en banda propia, separada del canon Abbott.
   Signals: divisor editorial claro (kicker + título + lede) + card grande
   con foto B&N + badge honesto (Approved 2026 · Debut 2027-28) + CTA.
   No penalizar visualmente — misma calidad premium que el resto, cambia
   solo el CONTEXTO donde aparece.
   ========================================================================== */
.mj-candidate {
    padding: 32px 0 96px;
    border-top: 1px solid var(--brd);
    margin-top: -1px;
}
.mj-candidate-divider {
    padding: 48px 0 32px;
    text-align: left;
    max-width: 720px;
}
.mj-candidate-divider-eye {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.18em; color: var(--pulse);
    text-transform: uppercase;
    margin-bottom: 16px;
    display: inline-flex; align-items: center; gap: 10px;
}
.mj-candidate-divider-eye::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--pulse);
}
.mj-candidate-divider-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 0.95; letter-spacing: -0.01em;
    color: var(--txt); font-weight: 400;
    margin-bottom: 18px;
}
.mj-candidate-divider-title .mj-hl {
    background-image: linear-gradient(135deg, #C8F000 0%, #DEFF00 40%, #E8F5A0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
    display: inline-block;
    padding-right: 0.15em;
}
[data-theme="light"] .mj-candidate-divider-title .mj-hl {
    background-image: linear-gradient(135deg, #506600 0%, #3D5000 60%, #2A3500 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.mj-candidate-divider-title .mj-accent {
    color: var(--pulse);
    display: inline-block;
}
.mj-candidate-divider-lede {
    font-size: 15px; line-height: 1.65;
    color: var(--txt2);
    max-width: 640px;
}
.mj-candidate-divider-lede strong { color: var(--txt); font-weight: 600; }
.mj-candidate-divider-lede em { color: var(--pulse); font-style: normal; font-weight: 600; }

/* Card grande Cape Town — banda full-bleed con foto B&N + verde SA */
.mj-candidate-card {
    display: block;
    position: relative;
    isolation: isolate;
    min-height: 460px;
    padding: 52px 48px 48px;
    overflow: hidden;
    border-radius: 8px;
    text-decoration: none;
    color: var(--txt);
    background-color: #000;
    box-shadow: 0 0 0 1px var(--brd2), 0 24px 60px -24px rgba(0,0,0,0.6);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.mj-candidate-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(var(--m-capetown-rgb), 0.5),
                0 32px 72px -24px rgba(0,0,0,0.7);
}
.mj-candidate-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(1.05) brightness(0.55);
    z-index: -2;
    transition: filter 0.35s var(--ease);
}
.mj-candidate-card:hover .mj-candidate-photo {
    filter: grayscale(100%) contrast(1.08) brightness(0.62);
}
.mj-candidate-tint {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.15) 100%),
        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
    z-index: -1;
}
.mj-candidate-body {
    max-width: 640px;
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,0.98);
}
.mj-candidate-badge {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.16em;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 3px;
    margin-bottom: 22px;
}
.mj-candidate-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(48px, 6.5vw, 88px);
    line-height: 0.9; letter-spacing: -0.015em;
    font-weight: 400;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.98);
    text-shadow: 0 2px 20px rgba(0,0,0,0.45);
}
.mj-candidate-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    margin-bottom: 22px;
}
.mj-candidate-meta .sep { opacity: 0.5; margin: 0 6px; }
.mj-candidate-lede {
    font-size: 15px; line-height: 1.65;
    color: rgba(255,255,255,0.85);
    max-width: 560px;
    margin-bottom: 24px;
}
.mj-candidate-lede strong { color: rgba(255,255,255,0.98); font-weight: 600; }
.mj-candidate-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent;
    color: var(--pulse);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 600;
    padding: 12px 20px;
    border: 1px solid var(--pulse);
    border-radius: 3px;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.mj-candidate-card:hover .mj-candidate-cta {
    background: var(--pulse);
    color: #0A0A0C;
}
.mj-candidate-caption {
    position: absolute;
    bottom: 18px; right: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    z-index: 2;
}

@media (max-width: 700px) {
    .mj-candidate { padding: 24px 0 72px; }
    .mj-candidate-divider { padding: 32px 0 24px; }
    .mj-candidate-card { padding: 40px 28px 36px; min-height: 400px; }
    .mj-candidate-caption { bottom: 12px; right: 14px; }
    .mj-candidate-lede { font-size: 14px; }
}

/* ==========================================================================
   BOSTON PILOT — sub-página
   ========================================================================== */

/* .mj-piloto-hero — REDISEÑO full-bleed cinematográfico.
   Foto icónica de la ciudad (Acorn Street para Boston) como backdrop del
   viewport entero. B&N con overlay del color del major encima. Contenido
   editorial posicionado abajo-izquierda como headline sobre poster.
   Pattern: Apple product pages / NYT Snow Fall / Rapha stories.
   Se mantiene dark siempre (incluso en light theme del resto del sitio) —
   "momento cinematográfico" independiente. */
.mj-piloto-hero {
    position: relative;
    isolation: isolate;
    padding: 140px 0 88px;
    min-height: 88vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-color: #000;
    color: #fff;
    border-bottom: 1px solid var(--brd);
    margin-bottom: 0;
}
.mj-piloto-hero-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(1.05) brightness(0.72);
    z-index: -2;
    transform: scale(1.02);
}
/* B&N puro — sin tint cromática. Solo fade oscuro abajo para legibilidad
   del texto. El accent burgundy vive en el H1 (color spot sobre grayscale
   = pattern editorial New Yorker / NYT). */
.mj-piloto-hero-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.82) 100%);
    z-index: -1;
}
.mj-piloto-hero-inner {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}
.mj-piloto-crumb {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.12em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase; margin-bottom: 20px;
}
.mj-piloto-crumb a { color: var(--pulse); transition: opacity 0.2s; }
.mj-piloto-crumb a:hover { opacity: 0.7; }
.mj-piloto-eye {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.15em; color: var(--pulse);
    text-transform: uppercase; margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px;
}
.mj-piloto-eye::before {
    content: ''; width: 24px; height: 1px; background: var(--pulse);
}
.mj-piloto-hero h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(64px, 10vw, 140px);
    line-height: 0.86; letter-spacing: -0.02em;
    margin-bottom: 18px; font-weight: 400;
    color: rgba(255,255,255,0.98);
    text-shadow: 0 2px 20px rgba(0,0,0,0.45);
}
/* Sobre foto B&N pura, el color del major destaca al máximo (accent spot).
   Se mantiene el token --m-<major> tal cual — pattern editorial New Yorker /
   NYT: grayscale + un solo color signature. */
.mj-piloto-hero .mj-piloto-place {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; letter-spacing: 0.15em;
    color: rgba(255,255,255,0.72);
    text-transform: uppercase; margin-bottom: 26px;
}
.mj-piloto-hero p {
    font-size: 17px; line-height: 1.65;
    color: rgba(255,255,255,0.85);
    max-width: 560px;
}
.mj-piloto-hero p strong { color: rgba(255,255,255,0.98); font-weight: 600; }
/* Caption discreta abajo-derecha (crédito/tagline de la foto) */
.mj-piloto-hero-caption {
    position: absolute;
    bottom: 24px; right: 28px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    z-index: 2;
}

/* Botón "★ Guardar en Mi próximo major" — vive en el hero del piloto.
   Toggle vía window.pulzMajorFavToggle (defined en auth.js). Persistencia
   en localStorage.pulz-major-favs. Cuando está activo, star pulse verde y
   label cambia a "En favoritos". */
.mj-fav-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: transparent;
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.35);
    padding: 10px 16px 10px 14px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 600;
    cursor: pointer;
    margin-top: 24px;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.mj-fav-btn:hover {
    border-color: var(--pulse);
    color: var(--pulse);
}
.mj-fav-btn .mj-fav-star {
    font-size: 16px; line-height: 1;
    color: rgba(255,255,255,0.55);
    transition: color 0.2s var(--ease), text-shadow 0.2s var(--ease);
}
.mj-fav-btn:hover .mj-fav-star { color: var(--pulse); }
.mj-fav-btn.is-favorited {
    border-color: var(--pulse);
    color: var(--pulse);
    background: rgba(var(--pulse-rgb), 0.08);
}
.mj-fav-btn.is-favorited .mj-fav-star {
    color: var(--pulse);
    text-shadow: 0 0 8px rgba(var(--pulse-rgb), 0.55);
}
/* .mj-piloto-photo — hero photo real. Estrategia: foto en color pero pasada a
   B&N con filter grayscale + contrast bump, encima overlay con el color del
   major aplicado como mix-blend-mode (multiply para dark, soft-light para
   light). Esto tinta la foto sin perder el B&N — pattern editorial NYT/New
   Yorker. Gradient inferior extra para legibilidad de la caption. */
.mj-piloto-photo {
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--m-boston) 0%, #4A1521 60%, #1F0B0E 100%);
    background-size: cover;
    background-position: center;
    border-radius: 4px; position: relative; overflow: hidden;
    box-shadow: var(--elev-2);
}
.mj-piloto-photo--has-image {
    background-color: #000;
    background-blend-mode: normal;
}
.mj-piloto-photo--has-image::before {
    content: '';
    position: absolute; inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(1.08) brightness(0.92);
    z-index: 1;
}
.mj-piloto-photo--has-image::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.75) 100%),
        linear-gradient(135deg, rgba(var(--m-boston-rgb), 0.30) 0%, rgba(var(--m-boston-rgb), 0.10) 55%, rgba(0,0,0,0.15) 100%);
    z-index: 2;
    mix-blend-mode: normal;
}
[data-theme="light"] .mj-piloto-photo--has-image::before {
    filter: grayscale(100%) contrast(1.05) brightness(0.95);
}
[data-theme="light"] .mj-piloto-photo--has-image::after {
    background:
        linear-gradient(180deg, rgba(20,15,15,0) 40%, rgba(20,15,15,0.6) 100%),
        linear-gradient(135deg, rgba(var(--m-boston-rgb), 0.42) 0%, rgba(var(--m-boston-rgb), 0.20) 55%, rgba(30,20,20,0.25) 100%);
}
/* Fallback: si no hay foto o falla la descarga, cae al gradient placeholder. */
.mj-piloto-photo:not(.mj-piloto-photo--has-image)::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 60% 40%, rgba(255,220,180,0.15) 0%, transparent 55%),
                repeating-linear-gradient(45deg, transparent 0px, transparent 20px, rgba(255,255,255,0.02) 20px, rgba(255,255,255,0.02) 21px);
}
.mj-piloto-photo:not(.mj-piloto-photo--has-image)::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%);
}
.mj-piloto-photo-caption {
    position: absolute; bottom: 18px; left: 22px; right: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.12em;
    color: rgba(255,255,255,0.85); text-transform: uppercase;
    z-index: 3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Stat bar horizontal — 6 datos comparables por major */
.mj-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px; background: var(--brd);
    border-bottom: 1px solid var(--brd);
    margin-bottom: 0;
}
.mj-stat { background: var(--bg); padding: 24px 20px; }
.mj-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.14em; color: var(--txt3);
    text-transform: uppercase; margin-bottom: 8px;
}
.mj-stat-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px; color: var(--txt);
    line-height: 1; letter-spacing: -0.005em; font-weight: 400;
}
.mj-stat-value .mj-unit {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: var(--txt3);
    margin-left: 4px; letter-spacing: 0.05em;
    text-transform: uppercase; font-weight: 500;
}

/* ==========================================================================
   SECTION SYSTEM — cada bloque del content model
   ========================================================================== */
.mj-sec { padding: 72px 0; border-bottom: 1px solid var(--brd); }
.mj-sec:last-child { border-bottom: none; }
.mj-sec-eye {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.15em; color: var(--pulse);
    text-transform: uppercase; margin-bottom: 12px;
    display: flex; align-items: center; gap: 10px;
}
.mj-sec-eye::before {
    content: ''; width: 24px; height: 1px; background: var(--pulse);
}
.mj-sec-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 0.95; letter-spacing: -0.008em;
    margin-bottom: 20px; font-weight: 400;
    max-width: 16ch;
}
/* Signature PULZ: punto verde pulse al final de cada H2 de sección.
   Pattern establecido (v161 dashboard title accent) extendido al hub Majors. */
.mj-sec-title .mj-accent {
    color: var(--pulse);
    display: inline-block;
}
/* Highlight inline pulse — para pintar palabras clave editoriales dentro de
   párrafos (accent tipo NYT/The Athletic). Uso escaso, no más de 2 por sección. */
.mj-hl-inline {
    color: var(--pulse);
    font-weight: 600;
}
/* Highlight con color del major — para palabras clave que refuerzan la
   identidad cromática de la carrera. Usar en H1 del piloto o en stats hero. */
.mj-major-color--boston   { color: var(--m-boston); }
.mj-major-color--london   { color: var(--m-london); }
.mj-major-color--berlin   { color: var(--m-berlin); }
.mj-major-color--chicago  { color: var(--m-chicago); }
.mj-major-color--nyc      { color: var(--m-nyc); }
.mj-major-color--tokyo    { color: var(--m-tokyo); }
.mj-major-color--sydney   { color: var(--m-sydney); }
.mj-major-color--capetown { color: var(--m-capetown); }
/* Stat "hero" — el stat más importante de la barra en color pulse (BQ time,
   récord, etc.). Se distingue visualmente sin necesidad de otra jerarquía. */
.mj-stat-value.mj-stat-value--pulse { color: var(--pulse); }
.mj-stat-value.mj-stat-value--major-color { color: var(--m-current); }
.mj-sec-lede {
    font-size: 16px; line-height: 1.7; color: var(--txt2);
    max-width: 640px; margin-bottom: 32px;
}
.mj-sec-lede strong { color: var(--txt); font-weight: 600; }
.mj-sec-body { font-size: 15px; line-height: 1.75; color: var(--txt2); max-width: 720px; }
.mj-sec-body p { margin-bottom: 16px; }
.mj-sec-body p:last-child { margin-bottom: 0; }
.mj-sec-body strong { color: var(--txt); font-weight: 600; }

/* ==========================================================================
   ELEVATION SVG — signature visual editorial
   ========================================================================== */
.mj-elev {
    background: var(--bg2);
    border-radius: 6px;
    padding: 32px;
    box-shadow: 0 0 0 1px var(--brd2), inset 0 1px 0 rgba(255,255,255,0.04);
    margin-bottom: 24px;
    position: relative;
}
[data-theme="light"] .mj-elev {
    box-shadow: 0 0 0 1px var(--brd);
}
.mj-elev-head {
    display: flex; justify-content: space-between;
    align-items: baseline; margin-bottom: 20px;
    flex-wrap: wrap; gap: 8px;
}
.mj-elev-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.15em; color: var(--txt3);
    text-transform: uppercase;
}
.mj-elev-net {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px; color: var(--m-current);
    line-height: 1; letter-spacing: -0.005em; font-weight: 400;
}
[data-theme="light"] .mj-elev-net { color: var(--m-current); }
.mj-elev-svg { width: 100%; height: auto; display: block; }
.mj-elev-svg .elev-fill { fill: rgba(var(--m-current-rgb), 0.15); }
.mj-elev-svg .elev-line { fill: none; stroke: var(--m-current); stroke-width: 2; }
.mj-elev-svg .elev-grid { stroke: var(--brd2); stroke-width: 0.5; stroke-dasharray: 2 4; }
.mj-elev-svg .elev-axis { stroke: var(--brd); stroke-width: 1; }
.mj-elev-svg .elev-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.1em;
    fill: var(--txt3); text-transform: uppercase;
}
.mj-elev-svg .elev-marker {
    fill: var(--pulse); stroke: var(--bg); stroke-width: 2;
}
.mj-elev-svg .elev-marker-label {
    font-family: 'Inter', sans-serif;
    font-size: 10px; font-weight: 600;
    fill: var(--txt);
}

/* ==========================================================================
   LANDMARKS — Puntos icónicos del recorrido
   Signature editorial de PULZ: 5-8 hitos curados con storytelling breve + dato
   curioso. Ningún competidor lo tiene estructurado así. Card con km gigante +
   nombre + narrative + fact chip. Border-left accent en color del major para
   identidad. Grid responsive 3→2→1. Ubicación: después del course profile.
   ========================================================================== */
.mj-landmarks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}
.mj-landmark {
    padding: 26px 22px;
    background: var(--bg2);
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--brd2), inset 0 1px 0 rgba(255,255,255,0.04);
    position: relative;
    overflow: hidden;
    transition: all 0.35s var(--ease);
}
[data-theme="light"] .mj-landmark { box-shadow: 0 0 0 1px var(--brd); }
.mj-landmark::before {
    content: '';
    position: absolute;
    top: 22px; bottom: 22px; left: 0;
    width: 2px;
    background: var(--m-current);
    opacity: 0.7;
    transition: opacity 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.mj-landmark:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(var(--pulse-rgb), 0.35),
                inset 0 1px 0 rgba(255,255,255,0.08),
                0 16px 40px -12px rgba(0,0,0,0.5);
}
.mj-landmark:hover::before {
    opacity: 1;
    box-shadow: 0 0 16px rgba(var(--m-current-rgb), 0.6);
}

.mj-landmark-head {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 8px;
}
.mj-landmark-km {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.15em;
    color: var(--pulse);
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--pulse-tint-strong);
    border-radius: 3px;
    font-weight: 600;
    flex-shrink: 0;
}
.mj-landmark-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    line-height: 1.05; letter-spacing: -0.005em;
    font-weight: 400;
    color: var(--txt);
}
.mj-landmark-story {
    font-size: 13px;
    line-height: 1.6;
    color: var(--txt2);
    margin-bottom: 16px;
}
.mj-landmark-story em { color: var(--txt); font-style: italic; }
.mj-landmark-fact {
    padding-top: 14px;
    border-top: 1px solid var(--brd);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.mj-landmark-fact-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.14em;
    color: var(--txt3);
    text-transform: uppercase;
    flex-shrink: 0;
    padding-top: 2px;
    min-width: 62px;
}
.mj-landmark-fact-txt {
    font-size: 12px; line-height: 1.55;
    color: var(--txt2);
}
.mj-landmark-fact-txt strong { color: var(--pulse); font-weight: 600; }

/* ==========================================================================
   LANDMARKS-LAYOUT — split 2 col con elevation sticky + landmarks vertical.
   Scrollytelling signature: mientras el user scrollea las cards de landmarks,
   el elev-svg de la izquierda queda pineado con un marker pulse verde que
   se mueve al km del landmark en foco (IntersectionObserver + SVG cx/cy JS).
   Pattern: Strava Featured Stories / NYT interactive.
   ========================================================================== */
.mj-landmarks-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.3fr;
    gap: 44px;
    align-items: start;
    margin-top: 32px;
}
.mj-landmarks-sticky {
    position: sticky;
    top: 88px; /* deja aire debajo del header sticky (56px header + 32px breathing) */
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mj-landmarks-sticky .mj-elev { margin-bottom: 0; }

/* Marker activo — punto pulse verde que se mueve por el perfil según el
   landmark en foco. Transición smooth entre puntos. */
.mj-elev-svg .elev-active-marker {
    fill: var(--pulse);
    stroke: var(--bg2);
    stroke-width: 2.5;
    filter: drop-shadow(0 0 8px rgba(var(--pulse-rgb), 0.85));
    transition: cx 0.55s var(--ease), cy 0.55s var(--ease), opacity 0.35s var(--ease);
}
.mj-elev-svg .elev-active-line {
    stroke: var(--pulse);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    opacity: 0.5;
    transition: x1 0.55s var(--ease), x2 0.55s var(--ease), opacity 0.35s var(--ease);
}

/* Indicator del km activo — display tipográfico premium con el nombre
   del landmark en foco (fed por JS). */
.mj-active {
    background: var(--bg2);
    border-radius: 6px;
    padding: 22px 24px;
    box-shadow: 0 0 0 1px var(--brd2), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="light"] .mj-active { box-shadow: 0 0 0 1px var(--brd); }
.mj-active-eye {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.15em;
    color: var(--txt3);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
.mj-active-eye::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pulse);
    box-shadow: 0 0 8px rgba(var(--pulse-rgb), 0.6);
    animation: mjDot 2s ease-in-out infinite;
}
.mj-active-km {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px; line-height: 1;
    color: var(--pulse);
    letter-spacing: -0.005em;
    margin-bottom: 6px;
    font-weight: 400;
    transition: color 0.3s var(--ease);
}
.mj-active-name {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--txt2);
    line-height: 1.4;
    transition: color 0.3s var(--ease);
}
.mj-active-name.mj-active-hot {
    color: var(--txt);
    font-weight: 600;
}

/* Landmarks list column — cards apiladas verticalmente en 1 col dentro del
   layout 2-col. Hover state y border-left burgundy se mantienen. */
.mj-landmarks-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mj-landmarks-list .mj-landmark {
    scroll-margin-top: 120px; /* para que el sticky funcione con anchor jumps */
}
/* Highlight del landmark actualmente en foco — sombra pulse subtle */
.mj-landmark.mj-landmark-active {
    box-shadow: 0 0 0 1px rgba(var(--pulse-rgb), 0.45),
                inset 0 1px 0 rgba(255,255,255,0.08),
                0 20px 48px -14px rgba(0,0,0,0.55);
    transform: translateY(-1px);
}
.mj-landmark.mj-landmark-active::before {
    opacity: 1;
    box-shadow: 0 0 20px rgba(var(--m-current-rgb), 0.75);
}

@media (max-width: 900px) {
    .mj-landmarks-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .mj-landmarks-sticky {
        position: static;
        top: auto;
    }
    .mj-active { display: none; } /* redundante en mobile con el sticky flat */
}
/* Legacy: cuando el grid .mj-landmarks se usa en OTRAS majors sin scrollytelling.
   Se mantiene por compatibilidad — el hub Boston pasa por .mj-landmarks-layout. */
@media (max-width: 900px) {
    .mj-landmarks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .mj-landmarks { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HOW TO ENTER — grid con vías de acceso
   ========================================================================== */
.mj-ways {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}
.mj-way {
    padding: 24px 22px;
    background: var(--bg2);
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--brd2), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: all 0.3s var(--ease);
}
[data-theme="light"] .mj-way {
    box-shadow: 0 0 0 1px var(--brd);
}
.mj-way:hover {
    box-shadow: 0 0 0 1px rgba(var(--pulse-rgb),0.35),
                inset 0 1px 0 rgba(255,255,255,0.08),
                0 16px 40px -12px rgba(0,0,0,0.5);
    transform: translateY(-2px);
}
.mj-way-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.14em; color: var(--pulse);
    text-transform: uppercase; margin-bottom: 10px;
}
.mj-way h4 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; letter-spacing: -0.005em;
    line-height: 1.1; margin-bottom: 6px; font-weight: 400;
}
.mj-way-prob {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: var(--txt3);
    letter-spacing: 0.05em; margin-bottom: 12px;
}
.mj-way-prob strong { color: var(--pulse); font-weight: 600; }
.mj-way p {
    font-size: 13px; color: var(--txt2);
    line-height: 1.6;
}

/* ==========================================================================
   FACTS GRID — 3-column stat cards para weather, fueling, race day
   ========================================================================== */
.mj-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}
.mj-fact {
    padding: 24px 22px;
    background: var(--bg2);
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--brd2), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="light"] .mj-fact { box-shadow: 0 0 0 1px var(--brd); }
.mj-fact-eye {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.14em; color: var(--txt3);
    text-transform: uppercase; margin-bottom: 10px;
}
.mj-fact-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 42px; line-height: 1;
    letter-spacing: -0.005em; color: var(--txt);
    margin-bottom: 10px; font-weight: 400;
}
.mj-fact-value .mj-unit {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; color: var(--txt3);
    margin-left: 4px; letter-spacing: 0.05em;
    text-transform: uppercase;
}
.mj-fact-caption { font-size: 12px; color: var(--txt2); line-height: 1.55; }

/* ==========================================================================
   LATAM LENS — bloque diferencial premium
   ========================================================================== */
.mj-latam {
    padding: 40px 36px;
    background: var(--bg2);
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--brd2), inset 0 1px 0 rgba(255,255,255,0.04);
    margin-top: 32px;
    position: relative;
    overflow: hidden;
}
[data-theme="light"] .mj-latam { box-shadow: 0 0 0 1px var(--brd); }
.mj-latam::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 4px; height: 100%; background: var(--pulse);
}
.mj-latam-eye {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.15em; color: var(--pulse);
    text-transform: uppercase; margin-bottom: 8px;
}
.mj-latam h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 34px; letter-spacing: -0.005em;
    margin-bottom: 16px; font-weight: 400;
}
.mj-latam-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px 32px; margin-top: 24px;
}
.mj-latam-item h5 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.12em; color: var(--pulse);
    text-transform: uppercase; margin-bottom: 6px;
}
.mj-latam-item p {
    font-size: 13px; color: var(--txt2); line-height: 1.6;
}
.mj-latam-item p strong { color: var(--txt); font-weight: 600; }

/* ==========================================================================
   QUALIFIERS PULZ — cross-link al buscador
   ========================================================================== */
.mj-qual-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin-top: 24px;
}
.mj-qual-card {
    padding: 22px 20px;
    background: var(--bg2);
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--brd2), inset 0 1px 0 rgba(255,255,255,0.04);
    text-decoration: none; color: var(--txt);
    transition: all 0.3s var(--ease);
    display: block;
}
[data-theme="light"] .mj-qual-card { box-shadow: 0 0 0 1px var(--brd); }
.mj-qual-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(var(--pulse-rgb),0.4),
                inset 0 1px 0 rgba(255,255,255,0.08),
                0 12px 32px -10px rgba(0,0,0,0.5);
}
.mj-qual-flag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: var(--pulse);
    letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 8px;
}
.mj-qual-card h6 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; letter-spacing: -0.005em;
    line-height: 1.05; margin-bottom: 4px; font-weight: 400;
}
.mj-qual-place {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: var(--txt3);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 12px;
}
.mj-qual-cert {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: var(--txt3); letter-spacing: 0.05em;
}
.mj-qual-cert strong { color: var(--pulse); font-weight: 600; }

/* ==========================================================================
   PACE STRATEGY — split tabla
   ========================================================================== */
.mj-pace-tips { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.mj-pace-tip {
    display: grid; grid-template-columns: 80px 1fr; gap: 20px;
    padding: 18px 0; border-bottom: 1px solid var(--brd);
    align-items: start;
}
.mj-pace-tip:last-child { border-bottom: 0; }
.mj-pace-tip-km {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px; color: var(--pulse);
    letter-spacing: -0.005em; line-height: 1; font-weight: 400;
}
.mj-pace-tip-txt {
    font-size: 14px; color: var(--txt2); line-height: 1.6;
}
.mj-pace-tip-txt strong { color: var(--txt); }

/* ==========================================================================
   FOOTER (compartido con el sitio principal)
   ========================================================================== */
.mj-footer {
    padding: 72px 24px 40px;
    border-top: 1px solid var(--brd);
    background: var(--bg);
    margin-top: 96px;
}
.mj-footer-inner {
    max-width: 1140px; margin: 0 auto;
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
}
.mj-footer-col { display: flex; flex-direction: column; gap: 8px; }
.mj-footer-brand-logo {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Bebas Neue', sans-serif; font-size: 20px;
    letter-spacing: 0.15em; color: var(--txt2);
}
.mj-footer-brand-dot {
    width: 6px; height: 6px; background: var(--pulse);
    border-radius: 50%; opacity: 0.6;
    animation: mjDot 2.5s ease-in-out infinite;
}
.mj-footer-tagline {
    font-size: 13px; color: var(--txt2);
    line-height: 1.5; max-width: 240px; margin-top: 8px;
}
.mj-footer-heading {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; font-weight: 700;
    color: var(--txt); letter-spacing: 0.14em;
    text-transform: uppercase; margin-bottom: 6px; opacity: 0.5;
}
.mj-footer-link {
    font-size: 12px; color: var(--txt3); text-decoration: none;
    transition: color 0.2s; line-height: 1.6; padding: 0;
    background: none; border: none; cursor: pointer;
    font-family: inherit; text-align: left;
}
.mj-footer-link:hover { color: var(--pulse); }
.mj-footer-social {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 3px;
}
.mj-footer-social-icon {
    width: 14px; height: 14px; opacity: 0.85;
    flex-shrink: 0; transition: opacity 0.2s;
}
.mj-footer-social:hover .mj-footer-social-icon { opacity: 1; }
.mj-footer-social-handle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.02em;
}
.mj-footer-bottom {
    grid-column: 1 / -1;
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--brd);
    margin-top: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: var(--txt3);
    letter-spacing: 0.08em; text-transform: uppercase;
}

/* ==========================================================================
   OFFICIAL RESOURCES — sitio, inscripción, redes sociales, referencias
   Cierra la página con los links para actuar. 3 columnas:
   (1) Organizador (sitio oficial, Wikipedia)
   (2) Inscripción y resultados (portal registro, results, charity)
   (3) Redes sociales (IG, X, FB, YT con handles)
   ========================================================================== */
.mj-official {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 32px;
}
.mj-official-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mj-official-heading {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--pulse);
    text-transform: uppercase;
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 8px;
}
.mj-official-heading::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--pulse);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.mj-official-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg2);
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--brd2), inset 0 1px 0 rgba(255,255,255,0.04);
    text-decoration: none;
    color: var(--txt);
    transition: all 0.3s var(--ease);
}
[data-theme="light"] .mj-official-link { box-shadow: 0 0 0 1px var(--brd); }
.mj-official-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(var(--pulse-rgb), 0.4),
                inset 0 1px 0 rgba(255,255,255,0.08),
                0 8px 20px -6px rgba(0,0,0,0.4);
}
.mj-official-icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: var(--txt2);
    transition: color 0.2s;
}
.mj-official-link:hover .mj-official-icon { color: var(--pulse); }
.mj-official-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.mj-official-label {
    font-size: 13px;
    color: var(--txt);
    font-weight: 500;
    line-height: 1.2;
}
.mj-official-url {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--txt3);
    letter-spacing: 0.03em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mj-official-link:hover .mj-official-url { color: var(--pulse); }
.mj-official-arrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--txt3);
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
}
.mj-official-link:hover .mj-official-arrow {
    color: var(--pulse);
    transform: translateX(2px);
}

@media (max-width: 900px) {
    .mj-official { grid-template-columns: 1fr; gap: 24px; }
}

/* ==========================================================================
   RELATED / OTHER MAJORS — cross-link
   ========================================================================== */
.mj-related {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px; margin-top: 32px;
}
.mj-related-card {
    padding: 18px 16px;
    background: var(--bg2);
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--brd2), inset 0 1px 0 rgba(255,255,255,0.04);
    text-decoration: none; color: var(--txt);
    transition: all 0.3s var(--ease);
}
[data-theme="light"] .mj-related-card { box-shadow: 0 0 0 1px var(--brd); }
.mj-related-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(var(--pulse-rgb),0.35),
                inset 0 1px 0 rgba(255,255,255,0.08),
                0 12px 32px -10px rgba(0,0,0,0.5);
}
.mj-related-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: var(--pulse);
    letter-spacing: 0.14em; margin-bottom: 6px;
}
.mj-related-card h6 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px; letter-spacing: -0.005em;
    line-height: 1; font-weight: 400; margin-bottom: 4px;
}
.mj-related-card .mj-related-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: var(--txt3);
    letter-spacing: 0.08em; text-transform: uppercase;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .mj-piloto-hero { min-height: 82vh; padding: 100px 0 72px; }
    .mj-stats { grid-template-columns: repeat(3, 1fr); }
    .mj-ways, .mj-facts, .mj-qual-grid, .mj-latam-grid { grid-template-columns: 1fr; }
    .mj-related { grid-template-columns: repeat(2, 1fr); }
    .mj-footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
    .mj-footer-col:first-child { grid-column: 1 / -1; }
    .mj-row { grid-template-columns: 48px 1fr; }
    .mj-row-num { font-size: 40px; }
    .mj-row-go { display: none; }
}
@media (max-width: 600px) {
    /* Bug #6 fix — header apretado en 390px por 4 elementos (crumb + link nav +
       switcher + theme). Ocultamos crumb (redundante con logo PULZ) + link
       "Volver al hub" (el logo PULZ funciona como back implícito universal).
       Solo queda PULZ + switcher + theme: leve, respirado, sin wrap. */
    .mj-crumb { display: none; }
    .mj-nav > a { display: none; }
    .mj-nav { gap: 8px; }
    .mj-lang { margin-right: 4px; }
    .mj-hero { padding: 56px 0 40px; }
    .mj-piloto-hero { min-height: 78vh; padding: 80px 0 56px; }
    .mj-piloto-hero-caption { bottom: 16px; right: 18px; }
    .mj-stats { grid-template-columns: repeat(2, 1fr); }
    .mj-sec { padding: 48px 0; }
    .mj-related { grid-template-columns: 1fr; }
    .mj-footer-inner { grid-template-columns: 1fr; }
    .mj-header-inner { gap: 8px; }
    .mj-crumb { display: none; }
    .mj-nav { gap: 12px; }
    /* v169.1 · Padding lateral reducido en mobile para respetar viewport 375px */
    .mj-header { padding: 14px 20px; }
}

/* ==========================================================================
   READING PROGRESS BAR — barra finita arriba, mide scroll de la página.
   Feed forward premium (Medium/Vercel/Rapha pattern). Ancho animado por JS
   con requestAnimationFrame, altura 2px, color pulse. Position fixed encima
   del header sticky (z-index > 100).
   ========================================================================== */
.mj-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: var(--pulse);
    z-index: 110;
    box-shadow: 0 0 10px rgba(var(--pulse-rgb), 0.5);
    pointer-events: none;
    will-change: width;
    transition: opacity 0.3s var(--ease);
}

/* ==========================================================================
   SCROLL REVEALS — fade + translateY suave al entrar viewport.
   Pattern Linear/Vercel/Apple. Aplicar la clase .mj-reveal al elemento,
   JS agrega .mj-in cuando entra viewport. Cadencia respetuosa (400ms).
   Los elementos base son opacity:0 + translateY(18px) — al aparecer suben.
   ========================================================================== */
.mj-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    will-change: opacity, transform;
}
.mj-reveal.mj-in {
    opacity: 1;
    transform: translateY(0);
}
/* Delay escalonado opcional para grids (landmarks, facts). Se agrega
   .mj-reveal-stagger al padre y los hijos toman delay incremental. */
.mj-reveal-stagger > .mj-reveal:nth-child(1) { transition-delay: 0s; }
.mj-reveal-stagger > .mj-reveal:nth-child(2) { transition-delay: 0.08s; }
.mj-reveal-stagger > .mj-reveal:nth-child(3) { transition-delay: 0.16s; }
.mj-reveal-stagger > .mj-reveal:nth-child(4) { transition-delay: 0.24s; }
.mj-reveal-stagger > .mj-reveal:nth-child(5) { transition-delay: 0.32s; }
.mj-reveal-stagger > .mj-reveal:nth-child(6) { transition-delay: 0.40s; }
.mj-reveal-stagger > .mj-reveal:nth-child(7) { transition-delay: 0.48s; }

/* ==========================================================================
   PHOTO BAND — banda editorial full-bleed con foto B&N de fondo + tinta
   del color del major encima. Rompe el ritmo entre secciones densas de
   texto/data. Contenido opcional: quote editorial breve + attribution.
   Pattern NYT "Snow Fall" / Rapha Stories.
   ========================================================================== */
.mj-band {
    position: relative;
    padding: 120px 24px;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    text-align: center;
    background-color: #000;
}
.mj-band-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(1.10) brightness(0.6);
    z-index: -2;
}
.mj-band-tint {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.55) 100%),
        linear-gradient(135deg, rgba(var(--m-current-rgb), 0.35) 0%, rgba(0,0,0,0.3) 100%);
    z-index: -1;
}
.mj-band-inner {
    max-width: 780px;
    margin: 0 auto;
}
.mj-band-eye {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.18em;
    color: var(--pulse);
    text-transform: uppercase;
    margin-bottom: 18px;
    display: inline-flex; align-items: center; gap: 12px;
}
.mj-band-eye::before, .mj-band-eye::after {
    content: ''; width: 24px; height: 1px;
    background: var(--pulse);
}
.mj-band-quote {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(28px, 4.2vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.008em;
    font-weight: 400;
    color: rgba(255,255,255,0.98);
    margin-bottom: 20px;
    max-width: 20ch;
    margin-left: auto; margin-right: auto;
}
.mj-band-quote .mj-accent { color: var(--pulse); }
.mj-band-attr {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
}
.mj-band-attr strong { color: rgba(255,255,255,0.9); font-weight: 600; }

/* Variante sin foto (fallback tipografía-driven) — usa gradient tinted del
   color del major sobre bg negro con SVG lineart de la ciudad para signature. */
.mj-band-typo {
    background:
        radial-gradient(ellipse 60% 80% at 50% 50%, rgba(var(--m-current-rgb), 0.18) 0%, transparent 65%),
        linear-gradient(180deg, #050505 0%, #0A0A0C 100%);
}
[data-theme="light"] .mj-band-typo {
    background:
        radial-gradient(ellipse 60% 80% at 50% 50%, rgba(var(--m-current-rgb), 0.14) 0%, transparent 65%),
        linear-gradient(180deg, #15100E 0%, #1F1815 100%);
}

/* ==========================================================================
   FINALE — cierre editorial premium antes del cross-link a otras majors.
   Signature moment memorable. Foto B&N (opcional) + quote iconic + credit.
   Diferencia con .mj-band: es más grande, más ceremonial.
   ========================================================================== */
.mj-finale {
    position: relative;
    padding: 160px 24px 140px;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-bottom: 1px solid var(--brd);
}
.mj-finale-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(1.15) brightness(0.55);
    z-index: -2;
}
.mj-finale-tint {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 90% at 50% 40%, rgba(var(--m-current-rgb), 0.28) 0%, transparent 65%),
        linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.75) 100%);
    z-index: -1;
}
.mj-finale-inner {
    max-width: 820px;
    margin: 0 auto;
}
.mj-finale-eye {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.20em;
    color: var(--pulse);
    text-transform: uppercase;
    margin-bottom: 24px;
    display: inline-flex; align-items: center; gap: 12px;
}
.mj-finale-eye::before, .mj-finale-eye::after {
    content: ''; width: 32px; height: 1px;
    background: var(--pulse);
}
.mj-finale-quote {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(40px, 6.5vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.014em;
    font-weight: 400;
    color: rgba(255,255,255,0.98);
    margin-bottom: 28px;
}
.mj-finale-quote .mj-accent { color: var(--pulse); }
.mj-finale-quote .mj-italic { font-style: italic; }
.mj-finale-sub {
    font-size: 15px; line-height: 1.7;
    color: rgba(255,255,255,0.78);
    max-width: 560px;
    margin: 0 auto 32px;
}
.mj-finale-sub strong { color: rgba(255,255,255,0.95); font-weight: 600; }
.mj-finale-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.16em;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 3px;
}

/* Reset light-mode: en finale/band SIEMPRE mantenemos dark backdrop porque
   la foto B&N y el color del major necesitan negro para leerse bien.
   Es una decisión editorial — el finale es "momento oscuro solemne" incluso
   en light mode del resto del sitio (patrón Apple product pages video moment). */

@media (max-width: 600px) {
    .mj-band { padding: 80px 20px; }
    .mj-finale { padding: 100px 20px 80px; }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
/* Skip link — visible solo al recibir focus via keyboard. Permite saltar del
   header al contenido principal sin tab-crawling por el nav completo. */
.mj-skip-link {
    position: absolute;
    top: -100px; left: 12px;
    background: var(--pulse); color: #0A0A0C;
    padding: 12px 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 600;
    text-decoration: none;
    border-radius: 3px;
    z-index: 1000;
    transition: top 0.15s ease;
}
.mj-skip-link:focus,
.mj-skip-link:focus-visible {
    top: 12px;
    outline: 2px solid var(--pulse);
    outline-offset: 3px;
}
/* Focus visible mejorado — outline pulse verde 2px con offset. Visible sobre
   fondos oscuros y claros. Sobreescribe el 'auto 1px' del user-agent. */
.mj-nav a:focus-visible,
.lang-btn:focus-visible,
.theme-toggle:focus-visible,
.mj-fav-btn:focus-visible,
.mj-row:focus-visible,
.mj-way:focus-visible,
.mj-qual-card:focus-visible,
.mj-related-card:focus-visible,
.mj-official-link:focus-visible,
.mj-candidate-card:focus-visible,
.mj-landmark:focus-visible,
.mj-piloto-crumb a:focus-visible,
.mj-crumb a:focus-visible {
    outline: 2px solid var(--pulse);
    outline-offset: 3px;
    border-radius: 4px;
}
/* Screen reader only — texto invisible visualmente pero leído por lectores */
.mj-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .mj-reveal { opacity: 1; transform: none; }
    .mj-skip-link { transition: none; }
}