/* =========================================================
   LA LEY DEL NORTE · V2 — REDISEÑO 2026
   Sistema visual reconstruido desde cero.
   Sin parallax, sin filtros de pantalla completa y sin blur.
   ========================================================= */

:root {
    --black: #060606;
    --black-2: #0a0a0a;
    --black-3: #101010;
    --surface: #121212;
    --surface-2: #171717;
    --surface-3: #1c1c1c;
    --line: #292929;
    --line-soft: #1d1d1d;
    --white: #f2f0e9;
    --text: #d2d0c9;
    --muted: #888883;
    --muted-2: #5e5e5a;
    --red: #9d2b25;
    --red-bright: #c43a32;
    --green: #729780;
    --amber: #b99a5f;
    --danger: #b95b55;
    --rail: 252px;
    --page: 1460px;
    --pad: clamp(22px, 3.2vw, 56px);
    --radius: 4px;
    --display: Georgia, "Times New Roman", serif;
    --serif: Georgia, "Times New Roman", serif;
    --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--black); color-scheme: dark; scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background:
        radial-gradient(circle at 82% 10%, rgba(157,43,37,.035), transparent 24%),
        var(--black);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--red); color: white; }

.skip-link {
    position: fixed;
    left: 18px;
    top: 18px;
    z-index: 999;
    transform: translateY(-160%);
    padding: 10px 14px;
    background: var(--white);
    color: #111;
    font-weight: 800;
}
.skip-link:focus { transform: none; }

/* ---------- estructura global ---------- */
.site-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: var(--rail);
    display: flex;
    flex-direction: column;
    background: #080808;
    border-right: 1px solid var(--line);
}
.rail-brand-wrap { padding: 32px 28px 26px; border-bottom: 1px solid var(--line-soft); }
.rail-brand { display: grid; justify-items: start; gap: 12px; }
.rail-logo { width: 58px; height: 58px; object-fit: contain; }
.rail-wordmark { width: 176px; display: block; }
.rail-edition {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.rail-nav { padding: 26px 18px; overflow: auto; flex: 1; scrollbar-width: thin; }
.rail-nav-group + .rail-nav-group { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.rail-nav-label {
    display: block;
    padding: 0 10px 10px;
    color: var(--muted-2);
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.rail-nav a {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    min-height: 42px;
    padding: 8px 10px;
    border-left: 1px solid transparent;
    color: #a6a59f;
    font-size: .96rem;
    font-weight: 700;
    letter-spacing: .015em;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.rail-nav a span { color: #4e4e4b; font-size: .72rem; letter-spacing: .08em; }
.rail-nav a:hover,
.rail-nav a.is-current { color: var(--white); background: #101010; border-left-color: var(--red); }
.rail-nav a.is-current span { color: var(--red-bright); }
.rail-nav-staff a { grid-template-columns: 1fr; min-height: 38px; font-size: .90rem; }
.rail-account { padding: 18px; border-top: 1px solid var(--line-soft); }
.rail-user { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; min-width: 0; }
.rail-user img, .rail-user-fallback { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.rail-user-fallback { display: grid; place-items: center; background: var(--surface-3); color: var(--white); font-weight: 900; }
.rail-user strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--white); font-size: .78rem; }
.rail-user small { display: block; color: var(--muted); font-size: .65rem; }
.rail-auth-link { display: inline-block; margin-top: 12px; color: var(--muted); font-size: .7rem; }
.rail-auth-link:hover { color: var(--white); }
.rail-login {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid #313131;
    color: var(--white);
    font-size: .78rem;
    font-weight: 800;
}
.rail-login:hover { background: var(--white); color: #0a0a0a; }

.mobile-bar { display: none; }
.site-stage { min-height: 100vh; margin-left: var(--rail); display: flex; flex-direction: column; }
.page-shell { width: min(100%, var(--page)); margin: 0 auto; padding: 0 var(--pad) 80px; flex: 1; }
.footer {
    width: min(100%, var(--page));
    margin: 0 auto;
    padding: 28px var(--pad) 38px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--muted-2);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ---------- tipografía ---------- */
.eyebrow {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
}
h1, h2, h3, h4 { margin: 0; color: var(--white); font-family: var(--serif); line-height: 1.04; font-weight: 500; }
h1 { font-size: clamp(2.7rem, 6vw, 6.6rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2rem, 3.7vw, 4.4rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.8rem); letter-spacing: -.02em; }
p { margin: 0 0 1em; }
.muted, small { color: var(--muted); }
code { padding: 2px 5px; background: #111; border: 1px solid var(--line); color: #d8d5ca; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid #383838;
    border-radius: 0;
    background: transparent;
    color: var(--white);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.button:hover { border-color: #5a5a5a; background: #161616; }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--white); border-color: var(--white); color: #0a0a0a; }
.button.primary:hover { background: #dcd9d0; border-color: #dcd9d0; }
.button.secondary { background: transparent; }
.button.small { min-height: 36px; padding: 8px 12px; font-size: .68rem; }
.button.danger, .danger { border-color: rgba(185,91,85,.55); color: #d88781; }
.button.disabled, .button:disabled { opacity: .42; pointer-events: none; }
.text-link { display: inline-flex; gap: 10px; align-items: center; color: #b7b5ae; font-size: .8rem; font-weight: 800; }
.text-link span { color: var(--red-bright); }
.text-link:hover { color: white; }

/* ---------- avisos ---------- */
.flash { margin: 22px 0 0; padding: 14px 16px; border-left: 2px solid #777; background: #111; color: #ddd; font-size: .84rem; }
.flash-success { border-color: var(--green); }
.flash-warning { border-color: var(--amber); }
.flash-error { border-color: var(--danger); }

/* =========================================================
   HOME — composición editorial/cinemática
   ========================================================= */
.v3-home-hero {
    min-height: min(820px, 92vh);
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
    border-bottom: 1px solid var(--line);
}
.v3-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(62px, 8vw, 126px) clamp(24px, 5vw, 74px) clamp(54px, 7vw, 100px) 0;
}
.v3-kicker { display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: .68rem; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; }
.v3-kicker span { width: 42px; height: 1px; background: var(--red); }
.v3-title-lockup { position: relative; margin: 30px 0 28px; width: min(640px, 100%); }
.v3-wordmark { display: block; width: 100%; }
.v3-edition-badge {
    position: absolute;
    right: 0;
    bottom: -34px;
    width: clamp(64px, 7vw, 96px);
    transform: rotate(-4deg);
}
.v3-hero-lead { max-width: 670px; color: #aaa8a0; font-family: var(--serif); font-size: clamp(1.08rem, 1.55vw, 1.42rem); line-height: 1.55; }
.v3-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 26px; margin-top: 26px; }
.v3-hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 650px; margin-top: 60px; border-top: 1px solid var(--line); }
.v3-hero-meta div { padding: 18px 16px 0 0; }
.v3-hero-meta strong { display: block; color: var(--white); font-family: var(--serif); font-size: 1.18rem; font-weight: 500; }
.v3-hero-meta span { display: block; margin-top: 3px; color: var(--muted-2); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }

.v3-hero-visual { position: relative; min-height: 680px; overflow: hidden; border-left: 1px solid var(--line); background: #0b0b0b; }
.v3-hero-landscape {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #060606 0%, rgba(6,6,6,.08) 27%, rgba(6,6,6,.12) 72%, #060606 100%),
        linear-gradient(0deg, #060606 0%, transparent 34%, rgba(0,0,0,.05) 100%),
        url("../img/optimized/background.webp") center / cover no-repeat;
    opacity: .65;
}
.v3-hero-landscape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), transparent 52%, rgba(0,0,0,.8)); }
.v3-hero-character { position: absolute; z-index: 2; right: -4%; bottom: 0; width: min(82%, 760px); max-height: 96%; object-fit: contain; object-position: bottom right; }
.v3-hero-number { position: absolute; z-index: 1; top: 4%; left: 5%; color: rgba(255,255,255,.045); font-family: var(--serif); font-size: clamp(9rem, 20vw, 24rem); line-height: .8; }
.v3-hero-caption { position: absolute; z-index: 3; left: 28px; right: 28px; bottom: 28px; display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.v3-hero-caption span { color: #888; font-size: .58rem; font-weight: 900; letter-spacing: .18em; }
.v3-hero-caption strong { max-width: 270px; color: #ddd; font-size: .68rem; text-align: right; letter-spacing: .12em; }

.v3-section { padding: clamp(74px, 8vw, 122px) 0; border-bottom: 1px solid var(--line); content-visibility: auto; contain-intrinsic-size: 900px; }
.v3-section-head { display: grid; grid-template-columns: 70px minmax(300px, .8fr) minmax(260px, .52fr); gap: clamp(24px, 4vw, 72px); align-items: start; margin-bottom: 54px; }
.v3-section-head > p { max-width: 430px; color: var(--muted); font-size: .9rem; }
.v3-section-number { color: var(--red); font-family: var(--serif); font-size: 1.1rem; }
.v3-section-head h2 { max-width: 700px; font-size: clamp(2.2rem, 4vw, 4.2rem); }

.v3-registry-index { border-top: 1px solid var(--line); }
.v3-registry-row {
    display: grid;
    grid-template-columns: 70px minmax(230px, .8fr) minmax(260px, 1.05fr) 190px;
    gap: 28px;
    align-items: center;
    min-height: 116px;
    border-bottom: 1px solid var(--line);
    transition: background .16s ease, padding .16s ease;
}
.v3-registry-row:hover { background: #0d0d0d; padding-left: 12px; }
.v3-registry-no { color: var(--muted-2); font-family: var(--serif); font-size: .86rem; }
.v3-registry-main small { display: block; margin-bottom: 5px; color: var(--muted-2); font-size: .62rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.v3-registry-main strong { display: block; color: var(--white); font-family: var(--serif); font-size: clamp(1.25rem, 1.9vw, 1.72rem); font-weight: 500; }
.v3-registry-copy { color: #8c8b86; font-size: .82rem; line-height: 1.5; }
.v3-registry-action { justify-self: end; color: #a9a8a2; font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.v3-registry-action b { color: var(--red-bright); margin-left: 6px; }
.v3-registry-row:hover .v3-registry-action { color: white; }

.v3-discover-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.v3-discover-item { min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #090909; transition: background .16s ease; }
.v3-discover-item:hover { background: #111; }
.v3-discover-no { color: var(--red); font-family: var(--serif); font-size: 1rem; }
.v3-discover-item small { color: var(--muted-2); font-size: .62rem; text-transform: uppercase; letter-spacing: .18em; }
.v3-discover-item strong { display: block; margin: 10px 0 14px; color: var(--white); font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 500; }
.v3-discover-item p { max-width: 340px; color: var(--muted); font-size: .82rem; }
.v3-discover-item > b { align-self: flex-end; color: var(--red-bright); font-size: 1.15rem; }
.v3-discover-lore { position: relative; overflow: hidden; }
.v3-discover-lore::before { content: ""; position: absolute; inset: 0; background: url("../img/optimized/map.webp") center / cover no-repeat; opacity: .055; pointer-events: none; }
.v3-discover-lore > * { position: relative; }

.v3-endnote { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding: clamp(70px, 8vw, 120px) 0 10px; }
.v3-endnote h2 { max-width: 800px; }

/* =========================================================
   CABECERAS INTERIORES
   ========================================================= */
.v3-page-intro,
.registry-hero,
.page-title {
    padding: clamp(64px, 8vw, 120px) 0 clamp(46px, 6vw, 78px);
    border-bottom: 1px solid var(--line);
}
.registry-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .38fr); gap: 56px; align-items: end; }
.registry-hero-copy { max-width: 900px; }
.registry-hero p, .page-title p { max-width: 760px; color: var(--muted); }
.registry-hero h1, .page-title h1 { margin-bottom: 20px; }

/* ---------- lore ---------- */
.v3-lore-intro { display: grid; grid-template-columns: minmax(0, .84fr) minmax(380px, .7fr); gap: clamp(48px, 7vw, 110px); align-items: end; }
.v3-lore-intro > div:first-child p:last-child { max-width: 700px; color: var(--muted); font-family: var(--serif); font-size: 1.14rem; }
.v3-lore-map { position: relative; align-self: stretch; min-height: 330px; overflow: hidden; background: #0b0b0b; border-left: 1px solid var(--line); }
.v3-lore-map img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.v3-lore-map::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#060606 0%,transparent 42%),linear-gradient(0deg,#060606 0%,transparent 60%); }
.v3-lore-map span { position: absolute; z-index: 2; left: 22px; bottom: 20px; color: #999; font-size: .58rem; font-weight: 900; letter-spacing: .18em; }
.v3-lore-chronicle { content-visibility: auto; contain-intrinsic-size: 1200px; }
.v3-lore-chapter { display: grid; grid-template-columns: 170px minmax(0, 820px); justify-content: center; gap: clamp(36px, 6vw, 92px); padding: clamp(74px, 9vw, 132px) 0; border-bottom: 1px solid var(--line); }
.v3-lore-chapter aside { padding-top: 4px; border-top: 1px solid var(--red); }
.v3-lore-chapter aside span { display: block; padding-top: 12px; color: var(--muted-2); font-size: .58rem; letter-spacing: .18em; }
.v3-lore-chapter aside strong { display: block; margin-top: 14px; color: #333; font-family: var(--serif); font-size: 5rem; font-weight: 400; line-height: 1; }
.v3-lore-chapter h2 { margin-bottom: 28px; }
.v3-lore-chapter p { color: #aaa8a0; font-family: var(--serif); font-size: 1.08rem; line-height: 1.85; }
.v3-lore-chapter .button { margin-top: 20px; }

/* =========================================================
   NORMATIVA + GUÍAS
   ========================================================= */
.rules-registry-hero, .guides-archive-hero { padding-bottom: 52px; }
.law-badge-card, .guide-badge-card, .form-side-seal {
    justify-self: end;
    width: 210px;
    min-height: 210px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    color: var(--muted);
    text-align: center;
}
.law-badge-card > span, .guide-badge-card > span, .form-side-seal > span { color: var(--red); font-family: var(--serif); font-size: 3.8rem; line-height: 1; }
.law-badge-card strong, .guide-badge-card strong, .form-side-seal strong { color: var(--white); font-size: .74rem; letter-spacing: .13em; }
.law-badge-card small, .guide-badge-card small, .form-side-seal small { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }

.rules-control-panel, .guides-control-panel { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(34px, 5vw, 74px); padding: 58px 0 20px; align-items: start; }
.rules-sidebar, .guides-sidebar { position: sticky; top: 24px; }
.rules-sidebar-stamp { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.rules-sidebar-stamp h2 { font-size: 2rem; }
.rules-sidebar-stamp p { color: var(--muted); font-size: .78rem; }
.rules-tab-list { display: grid; margin-top: 10px; }
.rules-tab {
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: start;
    padding: 15px 8px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: none;
    color: var(--muted);
    text-align: left;
    cursor: pointer;
}
.rules-tab-number { color: #444; font-family: var(--serif); }
.rules-tab strong { display: block; color: #aaa; font-family: var(--serif); font-weight: 500; font-size: .98rem; }
.rules-tab small { display: block; margin-top: 2px; color: var(--muted-2); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.rules-tab:hover strong, .rules-tab.is-active strong { color: var(--white); }
.rules-tab.is-active { border-left: 2px solid var(--red); padding-left: 14px; background: #0c0c0c; }
.rules-tab.is-active .rules-tab-number { color: var(--red-bright); }
.rules-help-box { margin-top: 28px; padding: 18px 0; border-top: 1px solid var(--line); color: var(--muted); }
.rules-help-box strong { color: #aaa; font-size: .72rem; }
.rules-help-box p { font-size: .72rem; }

.rules-reader, .guides-reader { min-width: 0; }
.rules-reader-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.rules-reader-toolbar h2 { font-size: clamp(2rem, 3.4vw, 3.6rem); }
.rules-search { width: min(330px, 100%); }
.rules-search span { display: block; margin-bottom: 7px; color: var(--muted-2); font-size: .6rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.rules-search input { width: 100%; }
.rules-document-panel { padding-top: 34px; }
.rules-document-panel[hidden] { display: none !important; }
.rules-panel-header { display: flex; justify-content: space-between; align-items: start; gap: 30px; padding-bottom: 30px; }
.rules-panel-header h2 { font-size: clamp(2rem, 3.5vw, 3.8rem); }
.rules-panel-header h2 span { color: var(--red); font-family: var(--serif); font-size: .42em; vertical-align: top; margin-right: 8px; }
.rules-panel-header p { max-width: 680px; color: var(--muted); }
.rules-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rules-accordion-list { border-top: 1px solid var(--line); }
.rule-accordion { border-bottom: 1px solid var(--line); }
.rule-accordion.is-hidden-by-search { display: none; }
.rule-accordion summary { list-style: none; display: grid; grid-template-columns: 44px 1fr 28px; gap: 18px; align-items: center; padding: 22px 6px; cursor: pointer; }
.rule-accordion summary::-webkit-details-marker { display: none; }
.rule-accordion-count { color: var(--muted-2); font-family: var(--serif); font-size: .8rem; }
.rule-accordion-title { color: #d4d1c8; font-family: var(--serif); font-size: 1.08rem; }
.rule-accordion-toggle { color: var(--muted-2); font-size: 1.4rem; font-weight: 300; text-align: center; transition: transform .14s ease; }
.rule-accordion[open] .rule-accordion-toggle { transform: rotate(45deg); color: var(--red-bright); }
.rule-accordion[open] summary { background: #0d0d0d; }
.rule-accordion-body { padding: 0 50px 34px 68px; color: #aaa8a0; }
.rich-content { color: #aaa8a0; line-height: 1.8; }
.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4 { margin: 1.5em 0 .6em; font-size: 1.35rem; }
.rich-content p { margin: 0 0 1.1em; }
.rich-content a { color: #d1a39f; text-decoration: underline; text-underline-offset: 3px; }
.rich-content blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 2px solid var(--red); color: #c5c2b9; }
.rich-content ul, .rich-content ol { padding-left: 1.4em; }
.rules-empty-search { padding: 30px 0; color: var(--muted); }

.guide-panel-actions { display: flex; gap: 12px; align-items: center; margin: 0 0 24px; }
.guide-copy-feedback { color: var(--green); font-size: .7rem; }
.guide-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.guide-image-card { margin: 0; background: #0a0a0a; border: 1px solid var(--line); }
.guide-image-card img { display: block; width: 100%; max-height: 460px; object-fit: cover; }
.guide-image-card figcaption { padding: 10px 12px; color: var(--muted); font-size: .7rem; }

.rules-final-callout, .guides-final-callout { margin-top: 64px; }

/* =========================================================
   DASHBOARD / REGISTRO
   ========================================================= */
.player-passport { justify-self: end; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; min-width: 260px; padding: 18px 0 18px 18px; border-left: 1px solid var(--line); }
.passport-avatar img, .passport-avatar span { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: grid; place-items:center; background:#171717; color:white; }
.passport-label { display: block; color: var(--muted-2); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }
.player-passport strong { display: block; color: var(--white); }
.player-passport small { display: block; font-size: .66rem; }
.registry-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.registry-stats article { padding: 28px 24px 28px 0; border-right: 1px solid var(--line); }
.registry-stats article + article { padding-left: 24px; }
.registry-stats article:last-child { border-right: 0; }
.registry-stats span { display: block; color: var(--white); font-family: var(--serif); font-size: 2.5rem; line-height: 1; }
.registry-stats strong { display: block; margin-top: 8px; color: #bab8b1; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.registry-stats small { display: block; margin-top: 2px; font-size: .64rem; }
.section-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding: 74px 0 30px; }
.section-heading-row h2 { font-size: clamp(2rem, 3.4vw, 3.6rem); max-width: 760px; }

.application-status-grid { border-top: 1px solid var(--line); }
.application-status-card {
    position: relative;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) minmax(240px, .7fr) auto;
    gap: 28px;
    align-items: center;
    min-height: 134px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}
.application-status-card .dossier-card-ribbon { grid-column:1; grid-row:1; color: var(--muted-2); font-size: .62rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.dossier-card-icon { display: none; }
.status-card-head { grid-column:2; grid-row:1; display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.status-card-head h3 { font-size: 1.45rem; }
.application-status-card > p { grid-column:3; grid-row:1; margin: 0; color: var(--muted); font-size: .8rem; }
.status-meta { grid-column:2; grid-row:2; display: grid; gap: 2px; color: var(--muted-2); font-size: .64rem; }
.status-actions { grid-column:4; grid-row:1 / span 2; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.status { display: inline-flex; align-items: center; width: max-content; min-height: 26px; padding: 5px 9px; border: 1px solid #363636; color: #aaa; font-size: .58rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.status::before { content:""; width:5px; height:5px; margin-right:7px; border-radius:50%; background:#777; }
.status-pending::before, .status-open::before { background: var(--amber); }
.status-approved::before { background: var(--green); }
.status-rejected::before { background: var(--danger); }
.status-needs_changes::before { background: #9a83aa; }
.retry-box { grid-column: 3 / -1; grid-row:2; padding: 10px 12px; border-left: 2px solid var(--amber); background: #0d0d0d; color: #a8a59b; font-size: .72rem; }
.muted-box { border-left-color: #444; }

.archive-table-card { margin-top: 74px; }
.section-header { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.section-header h2 { font-size: clamp(1.8rem, 3vw, 3rem); }

/* =========================================================
   FORMULARIOS
   ========================================================= */
.form-registry-hero { align-items: center; }
.form-desk-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(36px, 5vw, 74px); align-items: start; padding-top: 56px; }
.form-guidance-card { position: sticky; top: 24px; padding-top: 18px; border-top: 1px solid var(--red); }
.form-guidance-card h2 { margin-bottom: 16px; font-size: 2rem; }
.form-guidance-card p, .form-guidance-card li { color: var(--muted); font-size: .78rem; }
.form-guidance-card ul { padding-left: 18px; }
.card, .form-card, .detail-card, .status-panel, .mini-card, .content-editor-card, .announcement-history-card, .announcement-help-card, .business-board-section, .ranch-board-section, .faction-board-section { background: transparent; }
.official-form-card { counter-reset: field; border-top: 1px solid var(--line); }
.paper-form-head { padding: 28px 0 30px; border-bottom: 1px solid var(--line); }
.paper-form-head h2 { font-size: 2rem; }
.paper-clip { display: none; }
.field { counter-increment: field; display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 30px 0; border-bottom: 1px solid var(--line); }
.field::before { content: counter(field, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 4; color: var(--muted-2); font-family: var(--serif); font-size: .72rem; padding-top: 4px; }
.field > label, .field > input, .field > textarea, .field > select, .field > small, .field > .option-checkbox-list { grid-column: 2; }
.field > label { margin-bottom: 10px; color: #d2d0c9; font-family: var(--serif); font-size: 1.05rem; }
input[type="text"], input[type="search"], input[type="url"], input[type="number"], input[type="email"], textarea, select {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #3a3a3a;
    border-radius: 0;
    outline: none;
    background: #0b0b0b;
    color: var(--white);
    padding: 13px 14px;
    transition: border-color .14s ease, background .14s ease;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { border-color: #8b8b84; background: #101010; }
.field small { display: block; margin-top: 7px; color: var(--muted-2); font-size: .64rem; }
.field-check label { display: flex; gap: 12px; align-items: start; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--red); }
.option-checkbox-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.option-question-label { grid-column: 1 / -1; color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; }
.option-checkbox-item { display: flex; gap: 9px; align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); color: #aaa; font-size: .78rem; cursor: pointer; }
.option-checkbox-item:has(input:checked) { border-color: #666; background: #111; color: var(--white); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 28px; }
.wax-actions { justify-content: flex-end; padding-top: 14px; }
.staff-application-requirements { display: grid; grid-template-columns: 150px .8fr 1fr; gap: 34px; margin-top: 46px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.requirements-stamp { color: var(--red); font-size: .64rem; font-weight: 900; letter-spacing: .15em; }
.requirements-copy h2 { font-size: 1.7rem; }
.requirements-copy p, .requirements-list { color: var(--muted); font-size: .78rem; }
.requirements-list { margin: 0; padding-left: 20px; }
.locked-card { margin-top: 48px; padding: 36px 0; border-top: 1px solid var(--line); }
.locked-stamp { color: var(--red); font-size: .68rem; letter-spacing: .18em; font-weight: 900; }
.status-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 28px; background: var(--line); }
.status-panel > div { padding: 18px; background: #0a0a0a; }
.status-panel span { display:block; color:var(--muted-2); font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; }
.status-panel strong { display:block; margin-top:4px; color:var(--white); font-size:.8rem; }

/* =========================================================
   EXPEDIENTE INDIVIDUAL
   ========================================================= */
.dossier-verdict-stamp { justify-self: end; padding: 10px 14px; border: 1px solid currentColor; color: var(--muted); font-size: .72rem; font-weight: 900; letter-spacing: .16em; transform: rotate(-2deg); }
.dossier-verdict-stamp.status-approved { color: var(--green); }
.dossier-verdict-stamp.status-rejected { color: var(--danger); }
.official-dossier { padding: 54px 0 0; }
.status-info-box { margin: 28px 0; padding: 20px 0 20px 22px; border-left: 2px solid var(--line); }
.status-info-box strong { color: var(--white); }
.status-info-box p { color: var(--muted); }
.staff-note { margin: 30px 0; padding: 22px; background: #0d0d0d; border-left: 2px solid var(--red); }
.staff-note strong { color: var(--white); }
.answer-list { border-top: 1px solid var(--line); }
.answer { display: grid; grid-template-columns: minmax(220px,.45fr) minmax(0,1fr); gap: 42px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.answer h3 { font-size: 1rem; }
.answer p { margin: 0; color: #aaa8a0; }

/* =========================================================
   TABLAS / STAFF / EDITORES
   ========================================================= */
.filters { padding: 22px 0; border-bottom: 1px solid var(--line); }
.filters-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }
.filters-form label { min-width: 190px; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.filters-form select { margin-top: 6px; }
.table-wrap, .business-board-table-wrap, .ranch-board-table-wrap, .faction-board-table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 15px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
th { color: var(--muted-2); font-size: .6rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
td { color: #aaa8a0; font-size: .76rem; }
td a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
tbody tr:hover { background: #0d0d0d; }
.empty { padding: 28px 0; color: var(--muted); }

.grid { display: grid; gap: 16px; }
.grid.two, .compact-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid.three, .compact-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid.four, .compact-grid.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.mini-card { padding: 22px; border: 1px solid var(--line); }
.mini-card h3 { margin-bottom: 8px; }
.meta-grid, .visual-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); }
.meta-grid > div, .visual-meta-grid > div { background: #090909; padding: 16px; }

.content-editor-layout, .announcement-editor-layout, .business-board-layout, .ranch-board-layout, .faction-board-layout, .staff-review-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 34px; align-items: start; }
.content-editor-sidebar, .announcement-help-card, .business-board-help-card, .ranch-board-help-card, .faction-board-help-card { position: sticky; top: 24px; }
.content-editor-card, .announcement-history-card, .announcement-help-card, .business-board-section, .ranch-board-section, .faction-board-section, .rule-admin-card, .guide-admin-card, .form-admin-card { padding: 22px 0; border-top: 1px solid var(--line); }
.content-editor-nav, .request-list { display: grid; gap: 1px; }
.content-editor-nav a, .request-list a { padding: 11px 12px; background: #0b0b0b; color: #aaa; font-size: .76rem; }
.content-editor-nav a:hover, .request-list a:hover { background: #121212; color: white; }
.content-editor-form, .announcement-form, .business-board-form, .ranch-board-form, .faction-board-form, .staff-review-form, .rule-section-edit-form, .guide-section-edit-form { display: grid; gap: 18px; }
.content-editor-form label, .announcement-form label, .business-board-form label, .ranch-board-form label, .faction-board-form label, .staff-review-form label, .rule-section-edit-form label, .guide-section-edit-form label { color: #bbb; font-size: .74rem; }
.checkline { display:flex; gap:10px; align-items:center; }
.feature-toggle-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.feature-toggle-card { display:flex; gap:10px; padding:16px; border:1px solid var(--line); }
.sticky-save-bar { position: sticky; bottom: 0; z-index: 5; display:flex; justify-content:flex-end; gap:10px; padding:14px 0; background:rgba(6,6,6,.96); border-top:1px solid var(--line); }

.admin-rules-grid, .admin-guides-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.rule-admin-card, .guide-admin-card { border:1px solid var(--line); padding:20px; }
.rule-section-admin-list, .guide-admin-image-list, .form-field-list { display:grid; gap:10px; }
.rule-section-admin-item, .guide-admin-image-item, .form-field-editor { padding:14px; border:1px solid var(--line-soft); background:#0b0b0b; }
.field-editor-head { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.field-actions { display:flex; flex-wrap:wrap; gap:8px; }
.guide-admin-image-thumb { width:100%; max-height:180px; object-fit:cover; background:#111; }
.guide-admin-image-fields { display:grid; gap:10px; }
.guide-admin-images-panel { padding:18px 0; }

/* rich editor */
.rich-editor-shell { border:1px solid var(--line); background:#0a0a0a; }
.rich-editor-toolbar { display:flex; flex-wrap:wrap; gap:4px; padding:8px; border-bottom:1px solid var(--line); }
.rich-editor-button { min-width:34px; min-height:32px; border:1px solid #303030; background:#101010; color:#bbb; cursor:pointer; }
.rich-editor-button:hover { color:white; background:#181818; }
.rich-editor-surface { min-height:220px; padding:16px; outline:none; color:#ddd; }

/* utilidades antiguas que siguen usando algunos paneles */
.split-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.45fr); gap:48px; padding:48px 0; border-top:1px solid var(--line); }
.split-section h2 { font-size:2.4rem; }
.split-section p { color:var(--muted); }
.parchment, .darker-note { background:transparent !important; }
.timeline { display:grid; gap:1px; background:var(--line); }
.timeline-item { padding:16px; background:#090909; }
.bullet-list { color:var(--muted); }
.tiny { font-size:.65rem; }
.wide { grid-column:1/-1; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
    :root { --rail: 224px; }
    .v3-home-hero { grid-template-columns: minmax(0,1fr) minmax(360px,.8fr); }
    .v3-registry-row { grid-template-columns: 54px minmax(210px,.8fr) minmax(230px,1fr) 160px; gap:18px; }
    .rules-control-panel, .guides-control-panel { grid-template-columns: 250px minmax(0,1fr); gap:34px; }
    .application-status-card { grid-template-columns: 130px minmax(0,1fr) minmax(210px,.65fr); }
    .status-actions { grid-column:2; grid-row:auto; justify-content:flex-start; }
}

@media (max-width: 900px) {
    :root { --rail: min(86vw, 320px); --pad: clamp(18px,5vw,34px); }
    body { padding-top: 64px; }
    body.nav-is-open { overflow: hidden; }
    .mobile-bar {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 80;
        height: 64px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 14px;
        background: #080808;
        border-bottom: 1px solid var(--line);
    }
    .mobile-brand { display:flex; align-items:center; gap:10px; }
    .mobile-brand > img:first-child { width:40px; height:40px; object-fit:contain; }
    .mobile-wordmark { width:150px; }
    .nav-toggle { width:44px; height:44px; display:grid; place-content:center; gap:5px; border:0; background:transparent; cursor:pointer; }
    .nav-toggle span { width:22px; height:1px; background:#ddd; display:block; transition:transform .15s ease, opacity .15s ease; }
    body.nav-is-open .nav-toggle span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
    body.nav-is-open .nav-toggle span:nth-child(2) { opacity:0; }
    body.nav-is-open .nav-toggle span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
    .site-rail { width: var(--rail); transform: translateX(-101%); transition: transform .2s ease; top:64px; }
    body.nav-is-open .site-rail { transform:none; }
    body.nav-is-open::after { content:""; position:fixed; inset:64px 0 0 0; z-index:40; background:rgba(0,0,0,.72); }
    .site-stage { margin-left:0; }
    .page-shell { padding-bottom:60px; }

    .v3-home-hero { min-height:0; grid-template-columns:1fr; }
    .v3-hero-copy { padding:64px 0 52px; }
    .v3-hero-visual { min-height:520px; border-left:0; border-top:1px solid var(--line); }
    .v3-hero-character { width:min(72%,620px); right:2%; }
    .v3-section-head { grid-template-columns:44px 1fr; }
    .v3-section-head > p { grid-column:2; }
    .v3-registry-row { grid-template-columns:44px minmax(0,1fr) auto; min-height:108px; }
    .v3-registry-copy { grid-column:2; }
    .v3-registry-action { grid-column:3; grid-row:1/span 2; align-self:center; }
    .v3-discover-grid { grid-template-columns:1fr; }
    .v3-discover-item { min-height:230px; }

    .registry-hero, .v3-lore-intro { grid-template-columns:1fr; }
    .law-badge-card, .guide-badge-card, .form-side-seal, .player-passport { justify-self:start; }
    .v3-lore-map { min-height:300px; }
    .v3-lore-chapter { grid-template-columns:100px minmax(0,1fr); gap:34px; }
    .v3-lore-chapter aside strong { font-size:3.8rem; }

    .rules-control-panel, .guides-control-panel { grid-template-columns:1fr; }
    .rules-sidebar, .guides-sidebar { position:static; }
    .rules-tab-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); }
    .rules-tab { background:#090909; border:0; }
    .rules-tab.is-active { border-left:0; border-bottom:2px solid var(--red); padding-left:8px; }
    .rules-help-box { display:none; }
    .rules-reader-toolbar { align-items:start; flex-direction:column; }
    .rules-search { width:100%; }

    .registry-stats { grid-template-columns:repeat(2,1fr); }
    .registry-stats article:nth-child(2) { border-right:0; }
    .registry-stats article:nth-child(n+3) { border-top:1px solid var(--line); }
    .application-status-card { grid-template-columns:130px minmax(0,1fr); }
    .application-status-card > p, .status-meta, .status-actions, .retry-box { grid-column:2; grid-row:auto; }

    .form-desk-layout { grid-template-columns:1fr; }
    .form-guidance-card { position:static; }
    .staff-application-requirements { grid-template-columns:110px 1fr; }
    .requirements-list { grid-column:2; }
    .content-editor-layout, .announcement-editor-layout, .business-board-layout, .ranch-board-layout, .faction-board-layout, .staff-review-grid { grid-template-columns:1fr; }
    .content-editor-sidebar, .announcement-help-card, .business-board-help-card, .ranch-board-help-card, .faction-board-help-card { position:static; }
}

@media (max-width: 640px) {
    body { font-size:15px; }
    .mobile-wordmark { width:128px; }
    .page-shell { padding-inline:18px; }
    .v3-hero-copy { padding-top:48px; }
    .v3-title-lockup { margin-top:24px; }
    .v3-hero-meta { grid-template-columns:1fr; }
    .v3-hero-meta div { display:flex; justify-content:space-between; gap:18px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
    .v3-hero-meta span { text-align:right; }
    .v3-hero-visual { min-height:430px; }
    .v3-hero-character { width:88%; right:-6%; }
    .v3-hero-caption { left:18px; right:18px; bottom:18px; }
    .v3-hero-caption strong { max-width:180px; }
    .v3-section { padding:64px 0; }
    .v3-section-head { grid-template-columns:32px 1fr; gap:14px; margin-bottom:36px; }
    .v3-section-head > p { font-size:.78rem; }
    .v3-registry-row { grid-template-columns:34px 1fr; gap:12px; padding:20px 0; }
    .v3-registry-row:hover { padding-left:0; }
    .v3-registry-copy { grid-column:2; }
    .v3-registry-action { grid-column:2; grid-row:auto; justify-self:start; }
    .v3-discover-item { min-height:210px; padding:22px; }
    .v3-endnote { align-items:start; flex-direction:column; }
    .footer { flex-direction:column; }

    .v3-lore-intro { padding-top:48px; gap:34px; }
    .v3-lore-map { min-height:220px; }
    .v3-lore-chapter { grid-template-columns:1fr; padding:62px 0; }
    .v3-lore-chapter aside { display:flex; align-items:center; gap:14px; }
    .v3-lore-chapter aside strong { margin-top:0; font-size:2rem; }
    .v3-lore-chapter aside span { padding-top:0; }

    .registry-hero { padding-top:52px; gap:34px; }
    .law-badge-card, .guide-badge-card, .form-side-seal { width:150px; min-height:150px; }
    .rules-tab-list { grid-template-columns:1fr; }
    .rules-panel-header { flex-direction:column; }
    .rule-accordion summary { grid-template-columns:32px 1fr 24px; gap:10px; padding:18px 2px; }
    .rule-accordion-body { padding:0 8px 28px 42px; }
    .guide-image-grid { grid-template-columns:1fr; }

    .registry-stats { grid-template-columns:1fr 1fr; }
    .registry-stats article { padding:20px 14px 20px 0; }
    .registry-stats article + article { padding-left:14px; }
    .section-heading-row { align-items:start; flex-direction:column; padding-top:54px; }
    .application-status-card { grid-template-columns:1fr; gap:12px; padding:22px 0; }
    .application-status-card .dossier-card-ribbon, .application-status-card > p, .status-meta, .status-actions, .retry-box { grid-column:1; grid-row:auto; }
    .status-card-head { grid-column:1; grid-row:auto; align-items:start; }
    .status-actions { justify-content:flex-start; }

    .form-desk-layout { padding-top:38px; }
    .field { grid-template-columns:32px minmax(0,1fr); padding:24px 0; }
    .option-checkbox-list { grid-template-columns:1fr; }
    .staff-application-requirements { grid-template-columns:1fr; }
    .requirements-list { grid-column:1; }
    .status-panel { grid-template-columns:1fr 1fr; }
    .answer { grid-template-columns:1fr; gap:10px; }
    .form-actions { align-items:stretch; }
    .form-actions .button { width:100%; }

    .grid.two, .grid.three, .grid.four, .compact-grid.two, .compact-grid.three, .compact-grid.four, .admin-rules-grid, .admin-guides-grid, .meta-grid, .visual-meta-grid, .feature-toggle-grid { grid-template-columns:1fr; }
    .split-section { grid-template-columns:1fr; }
}

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

/* clases creadas dinámicamente por app.js */
.rich-editor-wrap { border: 1px solid var(--line); background: #0a0a0a; }
.rich-editor-area { min-height: 240px; padding: 16px; outline: none; color: #ddd; line-height: 1.7; }
.rich-editor-source { display: none !important; }
.rich-editor-button-link { min-width: auto; padding-inline: 10px; }

/* detalles de administración */
.form-editor-overview { margin: 34px 0; }
.content-editor-main { min-width: 0; }
.announcement-links-block { display: grid; gap: 10px; }
.announcement-link-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.announcement-mention-check { margin-top: 6px; }
.business-board-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.business-board-status { display: inline-flex; padding: 4px 8px; border: 1px solid var(--line); color: #aaa; font-size: .6rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.business-board-status-open, .business-board-status-pending { border-color: rgba(185,154,95,.45); color: #c0a76f; }
.business-board-status-closed, .business-board-status-rejected { border-color: rgba(185,91,85,.45); color: #c77b75; }
.business-board-status-approved, .business-board-status-active { border-color: rgba(114,151,128,.45); color: #86aa91; }
.staff-timeline-card { padding-top: 18px; border-top: 1px solid var(--line); }
.guide-image-checks { grid-template-columns: 32px 1fr; }
.guide-image-checks::before { grid-column: 1; }
.guide-image-checks > label { grid-column: 2; }
.stamped-meta { color: var(--muted-2); }


/* =========================================================
   REVISIÓN VISUAL · AJUSTES DE IDENTIDAD Y FLUIDEZ
   ========================================================= */
:root {
    --page: 1280px;
}

.rail-brand-wrap {
    padding: 28px 22px 22px;
    display: flex;
    justify-content: center;
}
.rail-brand {
    width: 100%;
    justify-items: center;
}
.rail-logo-large {
    width: min(148px, 100%);
    height: auto;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .28));
}
.rail-wordmark,
.rail-edition {
    display: none;
}

.mobile-brand { gap: 12px; }
.mobile-brand-text {
    color: var(--white);
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mobile-wordmark { display: none; }

.v3-home-hero {
    min-height: min(670px, 78vh);
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1fr);
}
.v3-hero-copy {
    padding: clamp(44px, 5vw, 78px) clamp(22px, 4vw, 48px) clamp(32px, 4vw, 50px) 0;
}
.v3-title-lockup {
    margin: 22px 0 20px;
    width: min(470px, 100%);
}
.v3-hero-lead {
    max-width: 560px;
    font-size: clamp(1rem, 1.25vw, 1.22rem);
}
.v3-hero-actions { margin-top: 22px; }
.v3-hero-meta {
    max-width: 560px;
    margin-top: 34px;
}
.v3-hero-visual { min-height: 540px; }
.v3-hero-character {
    width: min(66%, 510px);
    right: 1%;
}
.v3-hero-number {
    font-size: clamp(6rem, 10vw, 8rem);
    opacity: .05;
}

.v3-section-head {
    grid-template-columns: 56px minmax(280px, .8fr) minmax(250px, .52fr);
    gap: clamp(18px, 3vw, 48px);
    margin-bottom: 40px;
}
.v3-section-head-compact {
    align-items: center;
}
.v3-section-head-compact .eyebrow {
    margin-bottom: 0;
}
.v3-registry-row {
    grid-template-columns: 54px minmax(290px, .85fr) minmax(220px, 1fr) 150px;
    gap: 18px;
}
.v3-registry-main-head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}
.v3-registry-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: #efede6;
    border: 1px solid #2a2a2a;
    box-shadow: 0 8px 18px rgba(0,0,0,.16);
}
.v3-registry-main-text small { margin-bottom: 3px; }
.v3-registry-copy { max-width: 430px; }

.rules-panel-actions,
.guide-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.guide-copy-feedback { color: var(--green); font-size: .7rem; min-height: 1em; }

@media (max-width: 1180px) {
    :root { --page: 1180px; }
    .v3-home-hero { min-height: 620px; grid-template-columns: minmax(0,1fr) minmax(320px,.86fr); }
    .v3-registry-row { grid-template-columns: 54px minmax(230px,.8fr) minmax(220px,1fr) 140px; }
}

@media (max-width: 900px) {
    .mobile-brand-text { font-size: .78rem; }
    .v3-home-hero { min-height: 0; grid-template-columns: 1fr; }
    .v3-hero-copy { padding: 44px 0 38px; }
    .v3-hero-visual { min-height: 430px; }
    .v3-hero-character { width: min(72%, 460px); }
    .v3-section-head,
    .v3-section-head-compact { grid-template-columns: 40px 1fr; margin-bottom: 26px; }
    .v3-registry-row { grid-template-columns: 44px minmax(0,1fr) auto; }
    .v3-registry-main-head { grid-template-columns: 48px minmax(0,1fr); gap: 12px; }
    .v3-registry-icon { width: 42px; height: 42px; }
}

@media (max-width: 640px) {
    .mobile-brand-text {
        max-width: 160px;
        font-size: .72rem;
        letter-spacing: .06em;
    }
    .v3-title-lockup { width: min(360px, 100%); }
    .v3-hero-visual { min-height: 380px; }
    .v3-registry-row { grid-template-columns: 34px 1fr; }
    .v3-registry-main-head { grid-template-columns: 44px minmax(0,1fr); }
    .v3-registry-icon { width: 38px; height: 38px; }
}


/* =========================================================
   REVISIÓN 05 · ANCHO COMPLETO, HERO COMPACTO E ICONOS PNG
   ========================================================= */
:root {
    --page: 100%;
}

/* La zona de trabajo usa siempre todo el ancho libre a la derecha del menú. */
.page-shell,
.footer {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Portada: encabezado aproximadamente a la mitad de la revisión anterior. */
.v3-home-hero {
    min-height: 340px;
    grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
}
.v3-hero-copy {
    justify-content: center;
    padding-top: 24px;
    padding-bottom: 24px;
}
.v3-kicker {
    font-size: .62rem;
}
.v3-title-lockup {
    width: min(400px, 100%);
    margin: 14px 0 12px;
}
.v3-hero-lead {
    max-width: 600px;
    margin-bottom: 0;
    font-size: clamp(.94rem, 1.05vw, 1.1rem);
    line-height: 1.45;
}
.v3-hero-actions {
    margin-top: 14px;
    gap: 12px 20px;
}
.v3-hero-meta {
    max-width: 620px;
    margin-top: 18px;
}
.v3-hero-meta div {
    padding-top: 10px;
}
.v3-hero-meta strong {
    font-size: 1rem;
}
.v3-hero-meta span {
    font-size: .59rem;
}
.v3-hero-visual {
    min-height: 340px;
}
.v3-hero-character {
    width: min(58%, 390px);
}
.v3-hero-caption {
    bottom: 14px;
}

/* Cabeceras interiores también más compactas. */
.v3-page-intro,
.registry-hero,
.page-title {
    padding-top: clamp(30px, 3.5vw, 52px);
    padding-bottom: clamp(24px, 3vw, 42px);
}
.rules-registry-hero,
.guides-archive-hero {
    padding-bottom: 34px;
}

/* Los assets entregados ya son PNG transparentes: no añadimos ninguna caja. */
.v3-registry-icon {
    width: 58px;
    height: 58px;
    object-fit: contain;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: .92;
}
.v3-registry-row:hover .v3-registry-icon {
    opacity: 1;
}

.v3-lore-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

@media (max-width: 1180px) {
    :root { --page: 100%; }
    .v3-home-hero {
        min-height: 330px;
        grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
    }
    .v3-hero-visual { min-height: 330px; }
}

@media (max-width: 900px) {
    .v3-home-hero {
        min-height: 0;
        grid-template-columns: 1fr;
    }
    .v3-hero-copy {
        padding-top: 34px;
        padding-bottom: 30px;
    }
    .v3-hero-visual {
        min-height: 360px;
    }
    .v3-registry-icon {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 640px) {
    .v3-hero-visual {
        min-height: 320px;
    }
    .v3-registry-icon {
        width: 42px;
        height: 42px;
    }
    .v3-lore-hero-actions .button {
        width: 100%;
    }
}

/* =========================================================
   CONTENIDO DOCUMENTAL ENRIQUECIDO · Editor V3
   ========================================================= */
.rich-content table {
    width: 100%;
    margin: 22px 0;
    border-collapse: collapse;
    font-size: .94em;
}
.rich-content th,
.rich-content td {
    padding: 10px 12px;
    border: 1px solid var(--line);
    vertical-align: top;
    text-align: left;
}
.rich-content th {
    background: rgba(255,255,255,.045);
    color: var(--white);
    font-weight: 800;
}
.rich-content figure {
    margin: 24px 0;
}
.rich-content figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--line);
}
.rich-content figcaption {
    margin-top: 8px;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.5;
    text-align: center;
}
.rich-content mark {
    padding: 0 .12em;
    background: #d7c47e;
    color: #111;
}
.rich-content .doc-callout {
    margin: 22px 0;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 3px solid #777;
    background: #0d0d0d;
}
.rich-content .doc-callout > strong:first-child {
    display: block;
    margin-bottom: 8px;
    color: var(--white);
    font-family: var(--sans);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .12em;
}
.rich-content .doc-callout p:last-child { margin-bottom: 0; }
.rich-content .doc-callout-note { border-left-color: #6f8ba0; }
.rich-content .doc-callout-important { border-left-color: var(--red-bright); }
.rich-content .doc-callout-warning { border-left-color: var(--amber); }
.rich-content .doc-callout-example { border-left-color: var(--green); }


/* =========================================================
   V3.0.2 — Ajustes finales de portada y navegación lateral
   ========================================================= */
/* La sección 01 arranca más cerca del hero y funciona como
   una cabecera compacta, sin el bloque descriptivo lateral. */
.v3-entry-section {
    padding-top: 32px;
}
.v3-entry-section .v3-section-head-compact {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    .v3-entry-section {
        padding-top: 26px;
    }
    .v3-entry-section .v3-section-head-compact {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 14px;
        margin-bottom: 20px;
    }
}