/* ═════════════════════ FUENTES · Editorial v39.0 ═════════════════════
 * Estilo derivado del diseño Fuente CNAE.html + ficha.css.
 * Tokens compatibles con empresa-editorial.css existente.
 * Scope: aplica solo dentro de body.fuentes-page para no contaminar.
 */

/* Si --paper-deep o --gold no están en stitch.css, definir fallback */
.fuentes-page {
    --rule-soft: #efe9d8;
    --garnet-deep: #6e0019;
    --green: #3a6b3a;
    --wrap: 1240px;
    --gap: 24px;
    background: var(--paper, #faf7f0);
    color: var(--ink, #1a1410);
    font-family: var(--sans, "IBM Plex Sans", -apple-system, sans-serif);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.fuentes-page .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ─── Breadcrumbs (puede coexistir con el del header global) ─── */
.fuentes-page .crumbs {
    padding: 24px 32px 8px;
    color: var(--ink-muted, #8a8275);
    font-size: 13px;
    max-width: 1240px;
    margin: 0 auto;
}
.fuentes-page .crumbs a { color: inherit; text-decoration: none; }
.fuentes-page .crumbs a:hover { color: var(--garnet, #8f0020); }
.fuentes-page .crumbs span { margin: 0 6px; opacity: .5; }
.fuentes-page .crumbs__current { color: var(--ink, #1a1410); font-weight: 500; }

/* ─── HERO ─── */
.fuentes-page .hero {
    padding: 32px 32px 48px;
    max-width: 1240px;
    margin: 0 auto;
}
.fuentes-page .hero__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.fuentes-page .hero__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.fuentes-page .chip {
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--rule-soft, #efe9d8);
    color: var(--ink-soft, #4a423a);
    border: 1px solid var(--rule, #e6dfce);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.fuentes-page .chip--live {
    background: rgba(58, 107, 58, 0.08);
    color: var(--green, #3a6b3a);
    border-color: rgba(58, 107, 58, 0.2);
}
.fuentes-page .chip--ghost { background: transparent; }
.fuentes-page .chip__pulse {
    width: 8px; height: 8px;
    background: var(--green, #3a6b3a);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(58, 107, 58, 0.55);
    animation: ob-pulse 2.2s infinite;
}
@keyframes ob-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(58, 107, 58, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(58, 107, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(58, 107, 58, 0); }
}
.fuentes-page .hero__updated {
    font-size: 13px;
    color: var(--ink-muted, #8a8275);
}
.fuentes-page .hero__updated strong { color: var(--ink, #1a1410); font-weight: 600; }
.fuentes-page .dotsep { margin: 0 4px; opacity: .4; }

.fuentes-page .kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-muted, #8a8275);
    margin: 0 0 12px;
    font-weight: 600;
}
.fuentes-page .hero__title {
    font-family: var(--serif, "Fraunces", Georgia, serif);
    font-size: clamp(44px, 7vw, 88px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.95;
    margin: 0 0 24px;
    color: var(--ink, #1a1410);
    font-variation-settings: "opsz" 144;
}
.fuentes-page .hero__title span {
    color: var(--garnet, #8f0020);
    font-style: italic;
    font-weight: 500;
}
.fuentes-page .hero__lede {
    font-family: var(--serif, "Fraunces", Georgia, serif);
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 400;
    line-height: 1.55;
    max-width: 72ch;
    color: var(--ink-soft, #4a423a);
    margin: 0 0 32px;
    font-variation-settings: "opsz" 24;
}
.fuentes-page .hero__lede strong { color: var(--ink, #1a1410); font-weight: 600; }

.fuentes-page .idcard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin: 0 0 32px;
    border: 1px solid var(--rule, #e6dfce);
    border-radius: 10px;
    background: var(--white, #fefcf7);
}
.fuentes-page .idcard > div {
    padding: 16px 20px;
    border-right: 1px solid var(--rule, #e6dfce);
    border-bottom: 1px solid var(--rule, #e6dfce);
}
.fuentes-page .idcard > div:last-child { border-right: 0; }
.fuentes-page .idcard dt {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-muted, #8a8275);
    margin: 0 0 6px;
    font-weight: 600;
}
.fuentes-page .idcard dd {
    margin: 0;
    font-size: 14px;
    color: var(--ink, #1a1410);
    font-weight: 500;
    line-height: 1.35;
}
.fuentes-page .idcard dd.mono { font-family: var(--mono, "IBM Plex Mono", monospace); font-weight: 600; }

.fuentes-page .hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.fuentes-page .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--white, #fefcf7);
    border: 1px solid var(--rule, #e6dfce);
    border-radius: 8px;
    color: var(--ink, #1a1410);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    font-family: inherit;
    transition: border-color .15s, background .15s;
    cursor: pointer;
}
.fuentes-page .btn:hover { border-color: var(--ink, #1a1410); }
.fuentes-page .btn--primary {
    background: var(--ink, #1a1410);
    color: var(--white, #fefcf7);
    border-color: var(--ink, #1a1410);
}
.fuentes-page .btn--primary:hover {
    background: var(--garnet, #8f0020);
    border-color: var(--garnet, #8f0020);
}
.fuentes-page .btn--ghost { background: transparent; }

/* ─── KPI strip ─── */
.fuentes-page .kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    border: 1px solid var(--rule, #e6dfce);
    border-radius: 10px;
    margin: 0 32px 48px;
    max-width: 1176px;
    background: var(--white, #fefcf7);
    overflow: hidden;
}
.fuentes-page .kpis.wrap { margin-left: auto; margin-right: auto; padding: 0; }
.fuentes-page .kpi {
    padding: 24px 24px;
    border-right: 1px solid var(--rule, #e6dfce);
    border-bottom: 1px solid transparent;
}
.fuentes-page .kpi:last-child { border-right: 0; }
.fuentes-page .kpi--accent {
    background: var(--ink, #1a1410);
    color: var(--white, #fefcf7);
}
.fuentes-page .kpi--accent .kpi__label { color: rgba(255,255,255,0.6); }
.fuentes-page .kpi--accent .kpi__delta { color: rgba(255,255,255,0.55); }
.fuentes-page .kpi__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-muted, #8a8275);
    margin-bottom: 12px;
    font-weight: 600;
}
.fuentes-page .kpi__value {
    font-family: var(--serif, "Fraunces", Georgia, serif);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    color: inherit;
    font-variation-settings: "opsz" 36;
    font-variant-numeric: tabular-nums;
}
.fuentes-page .kpi__value span {
    font-size: 0.6em;
    font-weight: 400;
    color: var(--ink-muted, #8a8275);
    letter-spacing: 0;
}
.fuentes-page .kpi--accent .kpi__value span { color: rgba(255,255,255,0.5); }
.fuentes-page .kpi__delta {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--ink-muted, #8a8275);
    line-height: 1.45;
}

/* ─── Subnav ─── */
.fuentes-page .subnav {
    border-top: 1px solid var(--rule, #e6dfce);
    border-bottom: 1px solid var(--rule, #e6dfce);
    margin: 0 0 48px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--paper, #faf7f0);
}
.fuentes-page .subnav__inner {
    display: flex;
    gap: 8px;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.fuentes-page .subnav__link {
    padding: 16px 4px;
    margin-right: 28px;
    font-size: 13.5px;
    color: var(--ink-muted, #8a8275);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    font-weight: 500;
}
.fuentes-page .subnav__link:hover { color: var(--ink, #1a1410); }
.fuentes-page .subnav__link.is-active {
    color: var(--garnet, #8f0020);
    border-bottom-color: var(--garnet, #8f0020);
}

/* ─── Section base ─── */
.fuentes-page .layout { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.fuentes-page .sec { padding: 48px 0 64px; border-bottom: 1px solid var(--rule, #e6dfce); }
.fuentes-page .sec:last-child, .fuentes-page .sec--last { border-bottom: 0; }
.fuentes-page .sec__head { margin-bottom: 32px; max-width: 72ch; }
.fuentes-page .sec__head--row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    max-width: none;
    flex-wrap: wrap;
}
.fuentes-page .sec__title {
    font-family: var(--serif, "Fraunces", Georgia, serif);
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--ink, #1a1410);
    margin: 0 0 14px;
    font-variation-settings: "opsz" 36;
}
.fuentes-page .sec__sub {
    font-size: 16px;
    color: var(--ink-soft, #4a423a);
    line-height: 1.65;
    margin: 0;
    max-width: 70ch;
}
.fuentes-page .listhead__right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.fuentes-page .rowcta {
    font-size: 14px;
    color: var(--garnet, #8f0020);
    text-decoration: none;
    font-weight: 500;
}
.fuentes-page .rowcta:hover { color: var(--garnet-deep, #6e0019); text-decoration: underline; }
.fuentes-page .counter {
    font-size: 12px;
    color: var(--ink-muted, #8a8275);
    font-family: var(--mono, monospace);
}

/* ─── sectable (grid de fuentes editorial) ─── */
.fuentes-page .sectable {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--ink, #1a1410);
    border-left: 1px solid var(--rule, #e6dfce);
    margin-bottom: 14px;
}
.fuentes-page .secrow {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    border-right: 1px solid var(--rule, #e6dfce);
    border-bottom: 1px solid var(--rule, #e6dfce);
    background: var(--white, #fefcf7);
    transition: background .12s, transform .12s;
    text-decoration: none;
    color: var(--ink, #1a1410);
    position: relative;
}
.fuentes-page .secrow:hover { background: var(--paper-deep, #f3ede0); }
.fuentes-page .secrow__letter {
    font-family: var(--serif, "Fraunces", Georgia, serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--garnet, #8f0020);
    text-align: center;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 36;
}
.fuentes-page .secrow strong {
    font-family: var(--serif, "Fraunces", Georgia, serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink, #1a1410);
    line-height: 1.3;
    font-variation-settings: "opsz" 24;
    letter-spacing: -0.005em;
}
.fuentes-page .secrow__sub {
    display: block;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--ink-muted, #8a8275);
    margin-top: 2px;
    line-height: 1.4;
}
.fuentes-page .secrow__div {
    font-size: 11.5px;
    color: var(--ink-muted, #8a8275);
    padding: 3px 9px;
    background: var(--paper, #faf7f0);
    border: 1px solid var(--rule, #e6dfce);
    border-radius: 999px;
    white-space: nowrap;
    font-weight: 500;
}
.fuentes-page .secrow__n {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink, #1a1410);
    font-family: var(--mono, monospace);
    font-variant-numeric: tabular-nums;
    min-width: 70px;
    text-align: right;
}
.fuentes-page .secrow--lead, .fuentes-page .secrow--lead2 {
    grid-column: span 2;
    background: var(--ink, #1a1410);
    color: var(--white, #fefcf7);
    position: relative;
    padding: 28px 24px 32px;
}
.fuentes-page .secrow--lead strong, .fuentes-page .secrow--lead2 strong {
    color: var(--white, #fefcf7);
    font-size: 26px;
}
.fuentes-page .secrow--lead .secrow__sub, .fuentes-page .secrow--lead2 .secrow__sub {
    color: rgba(255,255,255,0.65);
    font-size: 13.5px;
    margin-top: 4px;
}
.fuentes-page .secrow--lead .secrow__letter, .fuentes-page .secrow--lead2 .secrow__letter {
    color: var(--gold, #b58a3a); font-size: 36px;
}
.fuentes-page .secrow--lead .secrow__div, .fuentes-page .secrow--lead2 .secrow__div {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.78);
}
.fuentes-page .secrow--lead .secrow__n, .fuentes-page .secrow--lead2 .secrow__n {
    color: var(--white, #fefcf7);
    font-size: 18px;
}
.fuentes-page .secrow--lead2 { background: var(--garnet, #8f0020); }
.fuentes-page .secrow--lead2 .secrow__letter { color: var(--white, #fefcf7); }

/* ─── featgrid (cómo lo usamos) ─── */
.fuentes-page .featgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 24px;
}
.fuentes-page .feat {
    padding: 28px 24px;
    background: var(--white, #fefcf7);
    border: 1px solid var(--rule, #e6dfce);
    border-radius: 10px;
}
.fuentes-page .feat__num {
    display: inline-block;
    font-family: var(--mono, monospace);
    font-size: 12px;
    color: var(--garnet, #8f0020);
    font-weight: 600;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
}
.fuentes-page .feat h3 {
    font-family: var(--serif, "Fraunces", Georgia, serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink, #1a1410);
    line-height: 1.25;
    margin: 0 0 10px;
    letter-spacing: -0.005em;
}
.fuentes-page .feat p {
    font-size: 14.5px;
    color: var(--ink-soft, #4a423a);
    line-height: 1.6;
    margin: 0;
}

/* ─── readout (lista clave-valor) ─── */
.fuentes-page .readout {
    margin-top: 32px;
    border-top: 1px solid var(--rule, #e6dfce);
}
.fuentes-page .readout__item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule, #e6dfce);
}
.fuentes-page .readout__label {
    font-size: 13px;
    color: var(--ink-muted, #8a8275);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.fuentes-page .readout__value {
    font-size: 14.5px;
    color: var(--ink, #1a1410);
    text-align: right;
    line-height: 1.4;
}

/* ─── prose (texto editorial libre) ─── */
.fuentes-page .prose {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink, #1a1410);
    max-width: 68ch;
}
.fuentes-page .prose p { margin: 0 0 16px; }
.fuentes-page .prose strong { font-weight: 600; }
.fuentes-page .prose em { color: var(--ink-soft, #4a423a); }
.fuentes-page .prose a { color: var(--garnet, #8f0020); border-bottom: 1px solid; }

/* ─── caption ─── */
.fuentes-page .caption {
    font-size: 13.5px;
    color: var(--ink-muted, #8a8275);
    line-height: 1.6;
    font-style: italic;
    max-width: 68ch;
    margin-top: 14px;
}

/* ─── sources list (referencias oficiales) ─── */
.fuentes-page .sources {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}
.fuentes-page .sources li {
    display: flex;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--rule, #e6dfce);
}
.fuentes-page .src__check {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--green, #3a6b3a);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}
.fuentes-page .sources li > div { flex: 1; }
.fuentes-page .sources h4 {
    font-family: var(--serif, "Fraunces", Georgia, serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink, #1a1410);
    margin: 0 0 6px;
}
.fuentes-page .sources p {
    font-size: 14px;
    color: var(--ink-soft, #4a423a);
    line-height: 1.55;
    margin: 0 0 8px;
}
.fuentes-page .sources a {
    color: var(--garnet, #8f0020);
    text-decoration: none;
    font-size: 13.5px;
    border-bottom: 1px solid;
}

/* ─── Tipografía utilitaria ─── */
.fuentes-page .mono { font-family: var(--mono, "IBM Plex Mono", monospace); }
.fuentes-page .link {
    color: var(--garnet, #8f0020);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.fuentes-page .link:hover { color: var(--garnet-deep, #6e0019); }

/* ─── Responsive ─── */
@media (max-width: 1100px) {
    .fuentes-page .sectable { grid-template-columns: 1fr; }
    .fuentes-page .secrow { border-right: 0; }
    .fuentes-page .secrow--lead, .fuentes-page .secrow--lead2 { grid-column: span 1; }
}
@media (max-width: 720px) {
    .fuentes-page .hero { padding: 24px 20px 32px; }
    .fuentes-page .kpis { margin: 0 20px 32px; grid-template-columns: 1fr 1fr; }
    .fuentes-page .layout { padding: 0 20px; }
    .fuentes-page .sec { padding: 36px 0 48px; }
    .fuentes-page .hero__title { font-size: clamp(36px, 9vw, 56px); }
    .fuentes-page .idcard { grid-template-columns: 1fr 1fr; }
    .fuentes-page .readout__item { flex-direction: column; gap: 4px; }
    .fuentes-page .readout__value { text-align: left; }
}