/*
 * brand-roksolana.css — Roksolana Pyrtko (LatAm commercial real-estate).
 * Ported from progress/roksolana-home-mockup.html (revised, audit-fixed). Loads
 * AFTER base.css.
 *
 * Archetype: a property-showcase MAGAZINE, deliberately not a broadsheet.
 * Structure diverges (dark full-bleed hero -> horizontal approach band -> asymmetric
 * portfolio mosaic -> markets contents-index -> dark contact strip). Palette: warm
 * champagne paper, charcoal ink, carmine accent, gold HAIRLINES ONLY.
 *
 * Fonts (display headings only): a self-hosted high-contrast serif — Playfair
 * Display (OFL, weight 400 normal + italic, latin subset) — so the brand looks
 * IDENTICAL on Windows/Android/Linux (~85% of visitors), not just Apple where
 * Didot exists. Didot/Bodoni/Georgia remain the fallback chain. Body/meta stay on
 * the system-sans (zero body web-fonts, no network cost for reading). font-display
 * is swap, so text paints instantly in the fallback then swaps — never blocks LCP.
 *
 * (a) re-skins the shared --nn-* tokens so article/archive/page inherit the
 *     champagne + carmine palette; (b) adds Roksolana-only components under .rk-*.
 */

/* .rk-sources carries its own .wrap padding; zero it inside main. */
.article-main .rk-sources { padding-inline: 0; max-width: 100%; }

/* ---------- Self-hosted display serif — Playfair Display (D4/E4) ----------
   Only weight 400 is ever requested via var(--display) (grep-verified: headings
   are font-weight:400 everywhere). Latin subset covers ES accents (á é í ó ú ñ ü),
   « » guillemets and typographic punctuation — all inside U+0000–00FF / U+2000–206F.
   Paths are relative to THIS file (assets/css/ -> ../fonts/), so they resolve the
   same on every host regardless of the WP install path. Cache-busting is handled by
   the stylesheet's own filemtime query arg (inc/brand.php); the woff2 URLs are
   stable, which is correct — the binaries never change. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/playfair-display-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/playfair-display-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Token re-skin + brand tokens ---------- */
:root {
  --paper:      #F4ECE0;
  --paper-2:    #EBE0CF;
  --ink:        #1E1915;
  --ink-2:      #2A231D;
  --ink-soft:   #5A5045;
  --carmine:    #C42B3A;
  --carmine-deep:#9A1F2C;
  --gold:       #B08D4C;   /* hairlines / borders only, never text on paper */
  --gold-soft:  #DCC9A4;   /* text-safe on dark ink only */

  --display: "Playfair Display", "Didot", "Bodoni MT", "Bodoni 72", "Hoefler Text", Georgia, "Times New Roman", serif;
  --rk-sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;

  /* re-skin shared engine tokens -> Roksolana palette (articles inherit these) */
  --nn-ink:         #1E1915;
  --nn-indigo:      #1E1915;   /* headings/primary render as charcoal ink */
  --nn-indigo-deep: #2A231D;
  --nn-teal:        #C42B3A;   /* links */
  --nn-teal-deep:   #9A1F2C;   /* link hover / accents */
  --nn-gold:        #B08D4C;
  --nn-bg:          #F4ECE0;
  --nn-paper:       #FBF7EF;
  --nn-gray:        #5A5045;
  --nn-mist:        #D9CDBB;

  --font-serif: var(--display);
  --font-sans:  var(--rk-sans);
  --wrap: 1240px;
  /* Reading column for internal pages (article/static). ~704px border-box; with
     the wrap's 30px inline padding the actual line length is ~644px ≈ 66-70ch at
     17-19px — the editorial sweet spot. Used by the D1 design-fix to give
     .wrap--narrow a REAL narrow measure (base's 720px was being neutralised by the
     brand `.wrap{max-width:1240}` override at equal specificity). */
  --rk-measure: 44rem;

  /* ---- Roksolana-scoped 8-pt spacing scale ---- */
  --rk-space-1: 0.25rem;  /*  4px */
  --rk-space-2: 0.5rem;   /*  8px */
  --rk-space-3: 1rem;     /* 16px */
  --rk-space-4: 1.5rem;   /* 24px */
  --rk-space-5: 2.5rem;   /* 40px */
  --rk-space-6: 4rem;     /* 64px */

  /* ---- Roksolana-scoped fluid type scale ----
     Each clamp MAX equals the prior fixed DESKTOP px, so wide viewports are
     pixel-identical (no regression); narrow/tablet viewports now scale down
     smoothly, filling the former 620–1000px adaptation gap (AC C4). Steps -1/0
     also lift the smallest labels/meta to a 11–12px floor (AC D2). */
  --rk-step--1: clamp(0.6875rem, 0.66rem + 0.1vw,  0.75rem);   /* 11 -> 12 : micro-labels     */
  --rk-step-0:  clamp(0.75rem,   0.72rem + 0.13vw, 0.8125rem); /* 12 -> 13 : captions         */
  --rk-step-1:  clamp(1.0625rem, 1rem + 0.3vw,     1.1875rem); /* 17 -> 19 : sub-heads        */
  --rk-step-2:  clamp(1.375rem,  1.2rem + 0.9vw,   1.625rem);  /* 22 -> 26 : market/footer H  */
  --rk-step-3:  clamp(1.75rem,   3.4vw,            2.5rem);    /* 28 -> 40 : section H2 (=old)*/
  --rk-step-4:  clamp(2.375rem,  6.4vw,            4.875rem);  /* 38 -> 78 : hero H1    (=old)*/
}

/* ---------- Base refinements ---------- */
/* Offset in-page anchor jumps so section headings clear the sticky header
   (mobile ~61px, desktop 70px). One rule covers every #anchor + smooth scroll. */
html { scroll-padding-top: 84px; }
body { background: var(--paper); color: var(--ink); font-family: var(--rk-sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 30px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; color: var(--ink); letter-spacing: .005em; }

/* focus-visible: carmine on paper, gold-soft on dark surfaces */
:focus-visible { outline: 2.5px solid var(--carmine); outline-offset: 3px; border-radius: 2px; }
.rk-siteheader :focus-visible,
#rk-mobilenav :focus-visible,
.rk-hero :focus-visible,
.rk-contactstrip :focus-visible,
.rk-footer :focus-visible { outline-color: var(--gold-soft); }

/* shared atoms */
.kicker { font-family: var(--rk-sans); font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--carmine-deep); margin: 0; }
.meta { font-family: var(--rk-sans); font-size: var(--rk-step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }

/* ====================================================================== */
/* HEADER                                                                 */
/* ====================================================================== */
.rk-siteheader { position: sticky; top: 0; z-index: 100; background: rgba(30,25,21,.96); color: var(--paper); border-bottom: 1px solid rgba(220,201,164,.22); }
.rk-siteheader .wrap { display: flex; align-items: center; gap: 20px; height: 70px; }
.rk-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--paper); }
.rk-logo-mark { width: 26px; height: auto; color: currentColor; transition: color .25s ease; }
.rk-brand:hover .rk-logo-mark { color: var(--carmine); }
.rk-brand .wm { display: flex; flex-direction: column; line-height: 1; }
.rk-brand .wm b { font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: .02em; }
.rk-brand .wm b em { font-style: italic; color: var(--carmine); }
.rk-brand .wm span { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-soft); margin-top: 4px; }

.rk-mainnav { display: flex; gap: 2px; margin-left: auto; }
.rk-mainnav a { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; padding: 8px 13px; color: var(--paper); position: relative; opacity: .92; }
.rk-mainnav a:hover { opacity: 1; color: var(--gold-soft); }
.rk-mainnav a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; background: var(--carmine); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.rk-mainnav a:hover::after { transform: scaleX(1); }

.rk-head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.rk-lang { display: inline-flex; border: 1px solid rgba(220,201,164,.4); border-radius: 999px; overflow: hidden; }
.rk-lang a, .rk-lang span { font-family: var(--rk-sans); font-size: 11px; letter-spacing: .14em; font-weight: 700; padding: 5px 11px; background: transparent; color: var(--gold-soft); }
.rk-lang a:hover { color: #fff; text-decoration: none; }
.rk-lang [aria-current="true"] { background: var(--paper); color: var(--ink); }

.rk-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--rk-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 11px 20px; cursor: pointer; border: 1px solid transparent; transition: all .22s ease; }
.rk-btn .arrow { font-family: var(--display); font-style: normal; }
.rk-btn-primary { background: var(--carmine); color: #fff; }
.rk-btn-primary:hover { background: var(--carmine-deep); transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(196,43,58,.7); color: #fff; text-decoration: none; }
.rk-btn-ghost { background: transparent; color: var(--paper); border-color: rgba(244,236,224,.55); }
.rk-btn-ghost:hover { background: var(--paper); color: var(--ink); text-decoration: none; }

.rk-nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid rgba(220,201,164,.4); color: var(--paper); cursor: pointer; border-radius: 4px; }
.rk-nav-toggle svg { width: 20px; height: 20px; }
#rk-mobilenav { display: none; background: var(--ink-2); border-bottom: 1px solid rgba(220,201,164,.22); }
#rk-mobilenav[data-open="true"] { display: block; }
#rk-mobilenav .wrap { padding-top: 6px; padding-bottom: 14px; }
#rk-mobilenav a { display: block; color: var(--paper); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 13px 4px; border-bottom: 1px solid rgba(220,201,164,.14); }
#rk-mobilenav .wrap > a:last-of-type { border-bottom: 0; }
#rk-mobilenav a:hover { color: var(--gold-soft); }
/* language switch inside the mobile drawer — pill pair, 44px tap targets.
   Higher specificity than "#rk-mobilenav a" so the block-link rules don't apply. */
#rk-mobilenav .rk-mnav-lang { display: flex; gap: 10px; align-items: center; padding: 16px 4px 4px; margin-top: 6px; border-top: 1px solid rgba(220,201,164,.14); }
#rk-mobilenav .rk-mnav-lang a,
#rk-mobilenav .rk-mnav-lang span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; min-height: 44px; padding: 0 16px;
  font-family: var(--rk-sans); font-size: 13px; letter-spacing: .14em; font-weight: 700;
  text-transform: uppercase; border: 1px solid rgba(220,201,164,.4); border-radius: 999px;
  color: var(--gold-soft);
}
#rk-mobilenav .rk-mnav-lang [aria-current="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
#rk-mobilenav .rk-mnav-lang a:hover { color: #fff; text-decoration: none; }

/* ====================================================================== */
/* FULL-BLEED DARK HERO                                                    */
/* ====================================================================== */
.rk-hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; min-height: clamp(520px,82vh,760px); display: flex; align-items: flex-end; }
.rk-hero-art { position: absolute; inset: 0; z-index: 0; }
.rk-hero-art .grad { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,16,13,.94) 0%, rgba(20,16,13,.72) 42%, rgba(20,16,13,.30) 100%),
    linear-gradient(0deg, rgba(20,16,13,.9) 0%, rgba(20,16,13,0) 55%),
    linear-gradient(125deg,#241d19 0%, #3a2621 48%, #61202b 100%); }
.rk-hero-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rk-hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 0 clamp(48px,7vw,84px); }
.rk-hero-eyebrow { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.rk-hero-eyebrow .kline { width: 46px; height: 1px; background: var(--gold); }
.rk-hero-eyebrow .k { font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-soft); }
.rk-hero h1 { font-family: var(--display); font-weight: 400; margin: 0 0 26px; max-width: 17ch; font-size: var(--rk-step-4); line-height: 1.0; letter-spacing: .005em; color: var(--paper); }
.rk-hero h1 em { font-style: italic; color: #EA9195; }
.rk-hero .lede { font-size: clamp(15px,1.7vw,19px); color: #EADFCF; max-width: 56ch; margin: 0 0 34px; line-height: 1.6; }
.rk-hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.rk-hero-corner { position: absolute; top: 26px; right: 30px; z-index: 2; text-align: right; font-size: var(--rk-step--1); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft); opacity: .9; }
.rk-hero-imglabel { position: absolute; left: 30px; bottom: 14px; z-index: 2; font-size: var(--rk-step--1); letter-spacing: .2em; text-transform: uppercase; color: #D8CDBE; opacity: .75; }

/* ====================================================================== */
/* APPROACH BAND (horizontal, no numbered triad)                          */
/* ====================================================================== */
.rk-approach { background: var(--paper-2); border-bottom: 1px solid rgba(30,25,21,.14); }
/* D1/R1: padding-BLOCK only — the old `padding: X 0` shorthand wiped the wrap's
   inline padding, so on any viewport < the 1240 max (mobile + tablet) the lead
   sentence and capability row touched the screen edge. Inline padding now falls
   back to .wrap (30px desktop / 18px <=620). */
.rk-approach .wrap { padding-block: var(--rk-space-5); }
.rk-approach-grid { display: grid; grid-template-columns: 1.15fr 2fr; gap: 44px; align-items: center; }
.rk-approach-lead { font-family: var(--display); font-weight: 400; font-size: clamp(21px,2.3vw,28px); line-height: 1.28; margin: 0; color: var(--ink); }
.rk-approach-lead em { font-style: italic; color: var(--carmine-deep); }
.rk-cap-row { display: flex; gap: 0; flex-wrap: wrap; }
.rk-cap-cell { flex: 1 1 180px; padding: var(--rk-space-1) 22px; border-left: 1px solid var(--gold); }
.rk-cap-cell:first-child { padding-left: 0; border-left: 0; }
.rk-cap-cell h3 { font-family: var(--display); font-weight: 400; font-size: var(--rk-step-1); margin: 0 0 7px; color: var(--ink); }
.rk-cap-cell p { font-size: var(--rk-step-0); color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* ====================================================================== */
/* PORTFOLIO MOSAIC                                                        */
/* ====================================================================== */
.rk-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 26px; }
.rk-section-head .st { display: flex; flex-direction: column; gap: 8px; }
.rk-section-head h2 { font-family: var(--display); font-weight: 400; font-size: var(--rk-step-3); margin: 0; line-height: 1; color: var(--ink); }
.rk-section-head .lk { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--carmine-deep); }
.rk-section-head .lk:hover { color: var(--carmine); }

.rk-portfolio { padding: var(--rk-space-6) 0 20px; }
.rk-mosaic { display: grid; grid-template-columns: repeat(12,1fr); grid-auto-rows: 150px; gap: var(--rk-space-3); }
.rk-card { position: relative; overflow: hidden; background: var(--ink); border: 1px solid var(--gold); display: block; transition: transform .3s ease, box-shadow .3s ease; }
.rk-card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(30,25,21,.7); text-decoration: none; }
.rk-card .art { position: absolute; inset: 0; }
.rk-card .art img { width: 100%; height: 100%; object-fit: cover; opacity: .95; }
.rk-card svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rk-card .scrim { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(18,13,11,.96) 6%,rgba(18,13,11,.38) 52%,rgba(18,13,11,.05) 80%); }
.rk-card .figc { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; color: var(--paper); padding: 18px; }
.rk-card .cat { font-size: var(--rk-step--1); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft); font-weight: 700; }
.rk-card .ttl { font-family: var(--display); font-weight: 400; line-height: 1.1; margin-top: 7px; color: var(--paper); text-shadow: 0 1px 6px rgba(18,13,11,.55); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.rk-card:hover .ttl { color: #F2CDD0; }
.rk-card .kpi { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: var(--display); background: rgba(196,43,58,.94); color: #fff; padding: 6px 11px; font-size: 14px; letter-spacing: .02em; }
.rk-card .flag { position: absolute; top: 14px; right: 14px; z-index: 3; font-size: var(--rk-step--1); letter-spacing: .18em; text-transform: uppercase; color: #fff; font-weight: 700; background: rgba(18,13,11,.85); padding: 5px 9px; }
.rk-c-feature { grid-column: span 7; grid-row: span 3; }
.rk-c-feature .ttl { font-size: clamp(24px,2.4vw,32px); }
.rk-c-tall { grid-column: span 5; grid-row: span 3; }
.rk-c-tall .ttl { font-size: 22px; }
.rk-c-wide { grid-column: span 5; grid-row: span 2; }
.rk-c-wide .ttl { font-size: 20px; }
.rk-c-sm { grid-column: span 4; grid-row: span 2; }
.rk-c-sm .ttl { font-size: 18px; }
.rk-c-3 { grid-column: span 3; grid-row: span 2; }
.rk-c-3 .ttl { font-size: 17px; }
.rk-d1 { background: linear-gradient(150deg,#2c221e,#5a1f28); }
.rk-d2 { background: linear-gradient(150deg,#241d19,#7a2531); }
.rk-d3 { background: linear-gradient(150deg,#332a22,#4a1c22); }
.rk-d4 { background: linear-gradient(150deg,#2a221d,#671f28); }
.rk-d5 { background: linear-gradient(150deg,#201915,#48232a); }
.rk-d6 { background: linear-gradient(150deg,#2e241d,#6b2230); }

/* ====================================================================== */
/* MARKETS INDEX                                                           */
/* ====================================================================== */
.rk-markets { padding: 56px 0 var(--rk-space-4); }
.rk-mkt-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--gold); border: 1px solid var(--gold); }
.rk-mkt { background: var(--paper); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.rk-mkt .top { display: flex; align-items: baseline; justify-content: space-between; }
.rk-mkt h3 { font-family: var(--display); font-weight: 400; font-size: var(--rk-step-2); margin: 0; color: var(--ink); }
.rk-mkt .idx { font-family: var(--display); font-size: 15px; color: var(--carmine-deep); }
.rk-mkt .desk-line { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.rk-mkt ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rk-mkt li a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(30,25,21,.12); font-family: var(--display); font-size: 17px; line-height: 1.22; color: var(--ink); }
.rk-mkt li:last-child a { border-bottom: 0; }
.rk-mkt li a:hover { color: var(--carmine-deep); text-decoration: none; }
.rk-mkt li a span { display: block; font-family: var(--rk-sans); font-size: var(--rk-step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 5px; font-weight: 600; }

/* ====================================================================== */
/* CONTACT STRIP                                                           */
/* ====================================================================== */
.rk-contactstrip { margin-top: 60px; background: var(--ink); color: var(--paper); }
/* D1/R1: padding-BLOCK only (same edge-touch bug as .rk-approach — the "HABLAR
   CON NOSOTROS" heading + button sat flush against the screen edge on mobile). */
.rk-contactstrip .wrap { padding-block: 56px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.rk-contactstrip h2 { font-family: var(--display); font-weight: 400; font-size: clamp(26px,3.2vw,40px); margin: 0; max-width: 20ch; line-height: 1.08; color: var(--paper); }
.rk-contactstrip h2 em { font-style: italic; color: #EA9195; }

/* ====================================================================== */
/* FOOTER                                                                  */
/* ====================================================================== */
.rk-footer { background: var(--ink-2); color: var(--paper); padding: 44px 0 30px; }
/* Brand block + three link columns = 4 children; a 4-track grid keeps them on
   one aligned row (fixes the isolated "Legal y Editorial" column / mid gap). */
.rk-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; align-items: start; }
.rk-foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rk-foot-brand .rk-logo-mark { width: 24px; color: var(--gold-soft); }
.rk-footer .rk-foot-name { font-family: var(--display); font-weight: 400; font-size: var(--rk-step-2); margin: 0; color: var(--paper); }
.rk-footer .rk-foot-name em { font-style: italic; color: var(--carmine); }
.rk-foot-pub { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); font-weight: 600; }
.rk-foot-trust { font-size: 12.5px; color: #d6caba; max-width: 42ch; margin-top: 14px; line-height: 1.6; }
.rk-fcol .meta { color: var(--gold-soft); margin-bottom: 12px; display: block; }
.rk-fcol a { font-size: 13px; color: #eae0d1; display: block; padding: 4px 0; }
.rk-fcol a:hover { color: #F2CDD0; }
.rk-foot-base { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(220,201,164,.18); display: flex; justify-content: space-between; gap: var(--rk-space-3); flex-wrap: wrap; font-size: var(--rk-step--1); letter-spacing: .14em; text-transform: uppercase; color: #A99C8C; }

/* ====================================================================== */
/* ARTICLE / ARCHIVE / PAGE — premium warm treatment                      */
/* ====================================================================== */
.article-title, .page-title { font-family: var(--display); font-weight: 400; color: var(--ink); letter-spacing: .005em; }
.article-dek { font-family: var(--display); color: var(--ink-soft); }
.breadcrumbs { font-family: var(--rk-sans); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.breadcrumbs li::after { color: var(--gold); }
.article-body { font-family: var(--rk-sans); }
.article-body h2, .article-body h3, .entry-content h2, .entry-content h3 { font-family: var(--display); font-weight: 400; color: var(--ink); }
.article-body a { color: var(--carmine-deep); border-bottom: 1px solid var(--gold); }
.article-body blockquote { border-inline-start: 3px solid var(--carmine); font-family: var(--display); color: var(--ink); font-style: italic; }
.byline__avatar { background: var(--carmine); font-family: var(--display); }
.byline__name a { color: var(--ink); }
.author-box { background: var(--paper-2); border-inline-start: 3px solid var(--carmine); }
.related { border-top: 2px solid var(--ink); }
.translation-note { background: var(--paper-2); border: 1px solid var(--nn-mist); }
.section-head { border-bottom-color: var(--ink); }
.section-head::after { background: var(--gold); }
.card { background: var(--paper); border: 1px solid var(--nn-mist); border-radius: 0; box-shadow: none; }
.card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -22px rgba(30,25,21,.5); }
.card__media { border-bottom: 1px solid var(--nn-mist); }
.card__title { font-family: var(--display); font-weight: 400; }
.card__title a { color: var(--ink); }
.card__title a:hover { color: var(--carmine-deep); }
.pagination .page-numbers { border: 1px solid var(--nn-mist); border-radius: 0; color: var(--ink); background: transparent; }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pagination a.page-numbers:hover { border-color: var(--carmine); color: var(--carmine-deep); }
.btn { background: var(--carmine); border-radius: 0; }
.btn:hover { background: var(--carmine-deep); }
.page-header { border-bottom: 2px solid var(--ink); }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); animation: rk-rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.rk-d-1 { animation-delay: .05s; }
.rk-d-2 { animation-delay: .16s; }
.rk-d-3 { animation-delay: .28s; }
.rk-d-4 { animation-delay: .4s; }
@keyframes rk-rise { to { opacity: 1; transform: none; } }
/* Hero content is the LCP surface (large H1). Never opacity-gate it — a hidden
   ->visible fade defers Largest Contentful Paint. Keep a transform-only rise so
   the text paints immediately at full opacity (AC E1). */
.rk-hero .reveal { opacity: 1; animation-name: rk-rise-y; }
@keyframes rk-rise-y { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .rk-hero .reveal { animation: none; transform: none; }
  .rk-mainnav a::after, .rk-card { transition: none; }
  .rk-siteheader { position: static; }
}

/* ====================================================================== */
/* RESPONSIVE                                                              */
/* ====================================================================== */
/* Collapse to the mobile disclosure BEFORE the header can overflow. The full
   masthead (brand + 5 nav + lang + CTA) intrinsically needs ~1060px; at <=1024
   it overflowed and clipped the CTA. Switch to the toggle by 1100px so the
   769–1100px range has zero horizontal overflow (AC C1/C2). Keep this in its own
   query, separate from the content-layout breakpoint below. */
@media (max-width: 1100px) {
  .rk-mainnav, .rk-head-actions .rk-btn, .rk-head-actions .rk-lang { display: none; } /* lang moves into #rk-mobilenav drawer */
  .rk-nav-toggle { display: inline-flex; }
}
@media (max-width: 1000px) {
  .rk-approach-grid { grid-template-columns: 1fr; gap: 26px; }
  .rk-mosaic { grid-template-columns: repeat(6,1fr); grid-auto-rows: 150px; }
  .rk-c-feature { grid-column: span 6; grid-row: span 3; }
  .rk-c-tall { grid-column: span 6; grid-row: span 2; }
  .rk-c-wide, .rk-c-sm { grid-column: span 3; grid-row: span 2; }
  .rk-c-3 { grid-column: span 3; grid-row: span 2; }
  .rk-mkt-grid { grid-template-columns: 1fr; }
}
/* Intermediate step (AC C4): the former 620–1000px band kept full desktop
   vertical rhythm. Fluid type already scales; this tightens section spacing and
   drops the footer to a 2-column grid so tablets/large phones read correctly. */
@media (max-width: 820px) {
  .rk-portfolio { padding-top: var(--rk-space-5); }        /* 64 -> 40 */
  .rk-markets { padding-top: var(--rk-space-5); }          /* 56 -> 40 */
  .rk-contactstrip { margin-top: var(--rk-space-5); }      /* 60 -> 40 */
  .rk-contactstrip .wrap { padding-block: var(--rk-space-5); } /* 56 -> 40 */
  .rk-mosaic { gap: 12px; }
  .rk-foot-grid { grid-template-columns: 1fr 1fr; gap: var(--rk-space-4); }
}
@media (max-width: 620px) {
  .wrap { padding: 0 18px; }
  .rk-siteheader .wrap { height: 60px; }
  .rk-brand .wm span { display: none; }
  /* tap targets >=44px (WCAG 2.5.5 / Apple HIG) */
  .rk-hero .rk-btn { padding-block: 14px; }
  .rk-fcol a { padding: 13px 0; }
  .rk-cap-cell { flex: 1 1 100%; border-left: 0; padding: 14px 0; border-top: 1px solid var(--gold); }
  .rk-cap-cell:first-child { border-top: 0; padding-top: 0; }
  /* Keep the editorial hierarchy on mobile: the feature stays full-width AND
     taller (row-span 3) so it still reads as the lead; the rest are the same
     full-width standard height. Prevents "all cards identical" (AC C3). */
  .rk-mosaic { grid-template-columns: repeat(2,1fr); grid-auto-rows: 140px; }
  .rk-c-feature { grid-column: span 2; grid-row: span 3; }
  .rk-c-tall, .rk-c-wide, .rk-c-sm, .rk-c-3 { grid-column: span 2; grid-row: span 2; }
  .rk-contactstrip .wrap { flex-direction: column; align-items: flex-start; }
  .rk-foot-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ====================================================================== */
/* PHASE 2 — AUTHORITY / "SOBRE LA EDITORIAL" (B1)                         */
/* Portrait-bridge + founder regalia as CONTEXT + KPI facts + CTA.         */
/* Tokens only (--rk-space-*, --rk-step-*); champagne/carmine/gold palette.*/
/* ====================================================================== */
.rk-authority { background: var(--paper); border-bottom: 1px solid rgba(30,25,21,.14); padding: var(--rk-space-6) 0; }
.rk-authority-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.rk-authority-portrait { position: relative; align-self: stretch; }
.rk-authority-portrait img { width: 100%; height: auto; display: block; border: 1px solid var(--gold); }
/* Placeholder shown until assets/portrait.jpg exists (graceful fallback). */
.rk-authority-portrait-ph { aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--ink) 0%, #3a2621 62%, var(--carmine-deep) 130%); border: 1px solid var(--gold); }
.rk-authority-portrait-ph .rk-authority-mark { width: 92px; height: auto; color: var(--gold-soft); opacity: .5; }
.rk-authority .kicker { display: block; margin-bottom: var(--rk-space-2); }
.rk-authority h2 { font-size: var(--rk-step-3); line-height: 1.05; margin: 0 0 var(--rk-space-3); color: var(--ink); }
.rk-authority-lead { font-size: var(--rk-step-1); line-height: 1.6; color: var(--ink-2); margin: 0 0 var(--rk-space-4); max-width: 60ch; }
.rk-authority-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--rk-space-3);
  margin: 0 0 var(--rk-space-4); padding: var(--rk-space-4) 0 0; border-top: 1px solid var(--gold); }
.rk-authority-kpis .rk-kpi { margin: 0; display: flex; flex-direction: column; gap: var(--rk-space-1); }
.rk-authority-kpis dt { font-family: var(--display); font-weight: 400; font-size: var(--rk-step-2); color: var(--carmine-deep); line-height: 1; }
.rk-authority-kpis dd { margin: 0; font-family: var(--rk-sans); font-size: var(--rk-step--1); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 600; line-height: 1.35; }
.rk-authority-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--rk-sans); font-size: var(--rk-step--1);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--carmine); padding: 12px 22px; }
.rk-authority-cta .arrow { font-family: var(--display); font-style: normal; }
.rk-authority-cta:hover { background: var(--carmine-deep); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(196,43,58,.7); }

/* ====================================================================== */
/* PHASE 2 — TRUST / METHODOLOGY STRIP (B2)                                */
/* ====================================================================== */
.rk-method { background: var(--paper-2); border-block: 1px solid rgba(30,25,21,.14); padding: var(--rk-space-5) 0; }
.rk-method-grid { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.rk-method-intro .kicker { display: block; margin-bottom: var(--rk-space-2); }
.rk-method-intro h2 { font-size: var(--rk-step-2); line-height: 1.1; margin: 0; color: var(--ink); }
.rk-method-trust { font-size: var(--rk-step-1); line-height: 1.55; color: var(--ink-2); margin: 0 0 var(--rk-space-4); max-width: 62ch; }
.rk-method-sources { margin-bottom: var(--rk-space-4); }
.rk-method-sources .meta { display: block; margin-bottom: var(--rk-space-1); }
.rk-method-sources p { font-family: var(--display); font-size: var(--rk-step-1); color: var(--ink); margin: 0; letter-spacing: .01em; line-height: 1.4; }
.rk-method-links { display: flex; flex-wrap: wrap; gap: var(--rk-space-4); }
.rk-method-links a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--rk-sans); font-size: var(--rk-step--1);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--carmine-deep); border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
.rk-method-links a:hover { color: var(--carmine); }
.rk-method-links .arrow { font-family: var(--display); font-style: normal; }

/* Phase 2 responsive: stack both new blocks; keep KPIs readable (>=2 cols). */
@media (max-width: 820px) {
  .rk-authority { padding: var(--rk-space-5) 0; }
  .rk-authority-grid { grid-template-columns: 1fr; gap: var(--rk-space-4); }
  .rk-authority-portrait { max-width: 260px; }
  .rk-authority-kpis { grid-template-columns: repeat(2,1fr); gap: var(--rk-space-4) var(--rk-space-3); }
  .rk-method-grid { grid-template-columns: 1fr; gap: var(--rk-space-3); }
}
@media (max-width: 620px) {
  .rk-authority-portrait { max-width: 200px; }
}

/* ====================================================================== */
/* PHASE 3 — EDITORIAL CONTACT FORM (A1/A3)                                */
/* Zero-plugin form appended to /contacto-privacidad/. Tokens only         */
/* (--rk-space-*, --rk-step-*); champagne/carmine/gold palette. Responsive */
/* 360–1440 with no overflow; keyboard + AA contrast.                      */
/* ====================================================================== */
.rk-contact { padding: var(--rk-space-6) 0 0; }
.rk-contact:focus { outline: none; } /* programmatic focus target (PRG anchor) */
.rk-contact__title { font-family: var(--display); font-weight: 400; font-size: var(--rk-step-3); line-height: 1.05; margin: 0 0 var(--rk-space-3); color: var(--ink); }
.rk-contact__intro { font-size: var(--rk-step-1); line-height: 1.6; color: var(--ink-2); margin: 0 0 var(--rk-space-4); max-width: 60ch; }
.rk-contact__privacy { max-width: 640px; margin: var(--rk-space-4) 0 0; font-size: var(--rk-step-00, .82rem); line-height: 1.55; color: var(--ink-soft, var(--ink-2)); }

/* Status region (aria-live). Rendered only after a PRG round-trip. */
.rk-contact__status { margin: 0 0 var(--rk-space-4); }
.rk-contact__status p { margin: 0; font-family: var(--rk-sans); font-size: var(--rk-step-0); line-height: 1.5; padding: var(--rk-space-3) var(--rk-space-4); border-inline-start: 3px solid var(--gold); background: var(--paper-2); color: var(--ink); }
.rk-contact__status.is-ok p { border-inline-start-color: #2f7d4f; }
.rk-contact__status.is-error p { border-inline-start-color: var(--carmine); color: var(--carmine-deep); }

.rk-contact__form { max-width: 640px; }
.rk-field { margin-bottom: var(--rk-space-4); }
.rk-field label { display: block; font-family: var(--rk-sans); font-size: var(--rk-step-0); font-weight: 700; letter-spacing: .04em; color: var(--ink); margin-bottom: var(--rk-space-2); }
.rk-req { color: var(--carmine); }
.rk-field input[type="text"],
.rk-field input[type="email"],
.rk-field textarea {
  width: 100%; max-width: 100%; box-sizing: border-box;
  font-family: var(--rk-sans); font-size: var(--rk-step-1); line-height: 1.5; color: var(--ink);
  background: var(--nn-paper); border: 1px solid var(--ink-soft); border-radius: 0;
  padding: 12px 14px; transition: border-color .18s ease, box-shadow .18s ease;
}
.rk-field textarea { resize: vertical; min-height: 140px; }
.rk-field input::placeholder,
.rk-field textarea::placeholder { color: var(--ink-soft); }
.rk-field input:focus,
.rk-field textarea:focus { outline: none; border-color: var(--carmine); box-shadow: 0 0 0 3px rgba(196,43,58,.18); }
.rk-field input[aria-invalid="true"],
.rk-field textarea[aria-invalid="true"] { border-color: var(--carmine); background: #FBEDEC; }
.rk-field__err { display: block; margin-top: var(--rk-space-2); font-family: var(--rk-sans); font-size: var(--rk-step-0); font-weight: 600; color: var(--carmine-deep); }

/* GDPR consent: checkbox + wrapping label sitting to its right. */
.rk-field--check { display: grid; grid-template-columns: auto 1fr; column-gap: var(--rk-space-3); row-gap: var(--rk-space-2); align-items: start; }
.rk-field--check input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--carmine); flex-shrink: 0; }
.rk-field--check label { grid-column: 2; margin: 0; font-weight: 400; font-size: var(--rk-step-0); line-height: 1.5; color: var(--ink-2); letter-spacing: normal; }
.rk-field--check .rk-field__err { grid-column: 2; }

.rk-contact__actions { margin-top: var(--rk-space-5); }
.rk-contact__actions .rk-btn { padding-block: 14px; }

/* Honeypot: removed from the visual + a11y tree, still in the DOM for bots. */
.rk-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

@media (max-width: 620px) {
  .rk-contact { padding-top: var(--rk-space-5); }
  .rk-contact__actions .rk-btn { width: 100%; justify-content: center; }
}

/* ====================================================================== */
/* PHASE 4 — STRUCTURAL DIVERGENCE OF THE ARTICLE (G1)                        */
/* All scoped under .rk-article (added by single.php on Roksolana posts    */
/* ONLY) or under the post-article/page hooks, so Symbol/Energy markup is  */
/* untouched. Tokens only (--rk-space-*, --rk-step-*); champagne palette.  */
/* ====================================================================== */

/* Drop-cap: a structural lede marker on the first body paragraph. ::first-letter
   styles the REAL first letter (it stays in the text), so screen readers still
   read the opening word normally — no duplicated/hidden node. */
.rk-article > p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.04em 0.12em 0 0;
  margin: 0.02em 0.04em 0 0;
  color: var(--carmine);
}

/* Pull-quote: the shared engine emits a plain <blockquote>; the rk-pullquote hook
   class (added by nn_roksolana_pullquotes) upgrades it into an offset display
   pull-quote with a carmine mark and a gold rule — a real structural/visual
   divergence from Symbol, while remaining a semantic <blockquote>. */
.rk-article blockquote.rk-pullquote {
  position: relative;
  border-inline-start: 0;
  margin: var(--rk-space-6) 0;
  padding: var(--rk-space-2) 0 var(--rk-space-2) var(--rk-space-5);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--rk-step-2);
  line-height: 1.28;
  color: var(--ink);
}
.rk-article blockquote.rk-pullquote::before {
  content: "\201C";
  position: absolute;
  inset-inline-start: 0;
  top: -0.12em;
  font-family: var(--display);
  font-size: 2.4em;
  line-height: 1;
  color: var(--carmine);
}
.rk-article blockquote.rk-pullquote::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.35em;
  bottom: 0.2em;
  width: 2px;
  background: var(--gold);
}
.rk-article blockquote.rk-pullquote p { margin: 0 0 0.4em; }
.rk-article blockquote.rk-pullquote p:last-child { margin-bottom: 0; }

/* Body H2 gets a structural editorial divider — a top hairline plus a short
   carmine tick (spacing + rule, not merely a recolor). rk-article scope only. */
.rk-article h2 {
  position: relative;
  margin-top: 2em;
  padding-top: var(--rk-space-4);
  border-top: 1px solid var(--gold);
}
.rk-article h2::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  width: 48px;
  height: 3px;
  background: var(--carmine);
}

/* Post-article "Fuentes y metodología" + editorial disclaimer (G1): a genuine
   new DOM node the shared Symbol/Energy article never emits. */
.rk-sources { margin-top: var(--rk-space-6); padding-top: var(--rk-space-5); border-top: 2px solid var(--ink); }
.rk-sources__title { font-family: var(--display); font-weight: 400; font-size: var(--rk-step-2); line-height: 1.1; margin: 0 0 var(--rk-space-3); color: var(--ink); }
.rk-sources__trust { font-family: var(--rk-sans); font-size: var(--rk-step-0); line-height: 1.6; color: var(--ink-2); margin: 0 0 var(--rk-space-4); max-width: 62ch; }
.rk-sources__meta { margin-bottom: var(--rk-space-4); }
.rk-sources__meta .meta { display: block; margin-bottom: var(--rk-space-1); }
.rk-sources__list { font-family: var(--display); font-size: var(--rk-step-1); color: var(--ink); margin: 0; line-height: 1.4; letter-spacing: .01em; }
.rk-sources__links { display: flex; flex-wrap: wrap; gap: var(--rk-space-4); margin-bottom: var(--rk-space-4); }
.rk-sources__links a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--rk-sans); font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--carmine-deep); border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
.rk-sources__links a:hover { color: var(--carmine); }
.rk-sources__links .arrow { font-family: var(--display); font-style: normal; }
.rk-sources__disclaimer { font-family: var(--rk-sans); font-size: var(--rk-step-0); line-height: 1.6; color: var(--ink-soft); margin: 0; padding: var(--rk-space-3) var(--rk-space-4); border-inline-start: 3px solid var(--gold); background: var(--paper-2); }

/* ====================================================================== */
/* PHASE 4 — E-E-A-T PAGE LAYOUT HOOKS (G2)                                */
/* Appended after page content on About / Sources (roksolana + slug gated).*/
/* ====================================================================== */
.rk-eeat-facts { margin-top: var(--rk-space-6); padding-top: var(--rk-space-5); border-top: 2px solid var(--ink); }
.rk-eeat-facts__label { font-family: var(--rk-sans); font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--carmine-deep); margin: 0 0 var(--rk-space-4); }
.rk-eeat-facts__kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--rk-space-4) var(--rk-space-3); margin: 0 0 var(--rk-space-4); padding: 0; }
.rk-eeat-facts__kpis .rk-kpi { margin: 0; display: flex; flex-direction: column; gap: var(--rk-space-1); }
.rk-eeat-facts__kpis dt { font-family: var(--display); font-weight: 400; font-size: var(--rk-step-2); color: var(--carmine-deep); line-height: 1; }
.rk-eeat-facts__kpis dd { margin: 0; font-family: var(--rk-sans); font-size: var(--rk-step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; line-height: 1.35; }
.rk-eeat-facts__trust { font-family: var(--rk-sans); font-size: var(--rk-step-0); line-height: 1.6; color: var(--ink-2); margin: 0 0 var(--rk-space-4); max-width: 62ch; }
.rk-eeat-facts__links { display: flex; flex-wrap: wrap; gap: var(--rk-space-4); }
.rk-eeat-facts__links a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--rk-sans); font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--carmine-deep); border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
.rk-eeat-facts__links a:hover { color: var(--carmine); }
.rk-eeat-facts__links .arrow { font-family: var(--display); font-style: normal; }

.rk-source-chips { margin-top: var(--rk-space-6); padding-top: var(--rk-space-5); border-top: 2px solid var(--ink); }
.rk-source-chips__label { font-family: var(--rk-sans); font-size: var(--rk-step--1); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--carmine-deep); margin: 0 0 var(--rk-space-3); }
.rk-source-chips__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--rk-space-2); }
.rk-source-chips__list li { font-family: var(--rk-sans); font-size: var(--rk-step-0); font-weight: 600; letter-spacing: .04em; color: var(--ink); background: var(--paper-2); border: 1px solid var(--gold); padding: 6px 14px; }

/* Phase 4 responsive: keep facts scannable on tablet/phone; ease the drop-cap. */
@media (max-width: 820px) {
  .rk-eeat-facts__kpis { grid-template-columns: repeat(2,1fr); gap: var(--rk-space-4) var(--rk-space-3); }
}
@media (max-width: 620px) {
  .rk-article > p:first-of-type::first-letter { font-size: 3em; }
  .rk-article blockquote.rk-pullquote { padding-inline-start: var(--rk-space-4); font-size: var(--rk-step-1); }
}

/* ====================================================================== */
/* PHASE 5 — DESIGN-FIX (ROX-D1, 2026-07-17)                              */
/* Internal pages (article + static) must read as part of the ROX design  */
/* language, not a stray left-hugging column. Tokens only; brand-CSS only  */
/* (core markup LOCKED). The fix is a champagne reading column    */
/* framed by a gold spine + colophon — a composition unique to ROX.        */
/* ====================================================================== */

/* --- MASTER FIX (R2/R3/R5): give .wrap--narrow a REAL narrow measure. ---
   Root cause: `.wrap{max-width:1240}` (this file) beat base `.wrap--narrow`
   {max-width:720} at EQUAL specificity + later source order, so every narrow
   wrapper (article head/body/sources/translation-note, and the whole page.php
   article) rendered 1240px wide while its children left-clamped at ragged
   widths (title 22ch, dek 60ch, body 720) -> dead right half + width battering.
   Win on SPECIFICITY (0,2,0 beats 0,1,0), not source order, so no future .wrap
   rule can regress it. This single rule collapses head/body/sources onto one
   centered 704px column and, because .article-hero and .related are plain
   .wrap (not --narrow), they keep breaking wider -> intentional editorial
   rhythm (cover + related wider than the read). */
.wrap.wrap--narrow { max-width: var(--rk-measure); margin-inline: auto; }

/* R5: drop the 22ch title cap so H1 fills the measure (fewer, calmer lines);
   balance the ragged wrap. Now H1/dek/body share one left edge + width. */
.article-title { max-width: none; text-wrap: balance; }

/* R6: give the breadcrumb air under the sticky masthead (was ~8px). */
.article-head { padding-block-start: clamp(var(--rk-space-4), 4vw, var(--rk-space-6)); }

/* --- SIGNATURE 1 (divergence): colophon dateline band. ---
   The byline becomes a gold-hairline-framed dateline (a print colophon), not a
   loose row. Also fixes R9: on mobile the avatar wrapped onto its own line;
   nowrap + min-width:0 keeps avatar beside the name and lets the meta wrap
   inside its own block. Scoped to the article head so cards are untouched. */
.article-head .byline {
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--rk-space-3);
  margin-top: var(--rk-space-4);
  padding-block: var(--rk-space-3);
  border-block: 1px solid var(--gold);
}
.article-head .byline > div { min-width: 0; }

/* --- SIGNATURE 2 (divergence): gold margin-rule spine. ---
   A thin gold vertical hairline runs down the left gutter beside the reading
   column on wide screens — a ROX print device the broadsheet/energy brands
   don't have. Purely decorative; gated to >=1024 where the gutter is wide
   enough to hold it clear of the text. */
.rk-article { position: relative; }
@media (min-width: 1024px) {
  .rk-article::before {
    content: "";
    position: absolute;
    top: 0.35em;
    bottom: 0;
    inset-inline-start: calc(-1 * var(--rk-space-5));
    inline-size: 1px;
    background: var(--gold);
    opacity: .6;
  }
}

/* --- R4: related block degenerate counts (only 1-2 posts in a category). ---
   :has() is progressive enhancement — unsupported browsers keep today's
   behaviour (no new regression). 1 card -> one wide card capped to the article
   measure and centred, so the lone related post echoes the reading column
   instead of stranding in the left third. 2 cards -> a clean 2-up. */
.related .grid--3:has(> .card:only-child) {
  grid-template-columns: minmax(0, var(--rk-measure));
  justify-content: center;
}
/* 2-up only from tablet up — below 621px base collapses .grid--3 to 1fr, and two
   ~165px cards read worse than a stack on the narrowest phones. */
@media (min-width: 621px) {
  .related .grid--3:has(> .card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- R7: card double category label. ---
   .card prints the category as a kicker AND again inside .card__meta. Keep the
   prominent carmine kicker; drop the duplicate category link (+ its dot) from
   the meta, leaving just the date. Only .card__meta is touched — the byline
   meta and home mosaic labels are unaffected. */
.card__meta > a,
.card__meta > a + .dot { display: none; }

/* --- R8: mobile hero legibility + caption collision (<=620). ---
   The decorative SVG skyline (drawn ABOVE .grad inside .rk-hero-art, z-index 0)
   showed through behind the lede, and the "ILUSTRACIÓN…" credit collided with
   the CTA. Add a vertical scrim as .rk-hero::after at z-index 1 — ABOVE the art
   stacking context (z 0) but BELOW .rk-hero-inner (z 2) — so the skyline recedes
   and the text/CTA stay fully legible. Hide the colliding credit; add breathing
   room under the lede. */
@media (max-width: 620px) {
  .rk-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(20,16,13,.32) 0%, rgba(20,16,13,.74) 52%, rgba(20,16,13,.93) 100%);
  }
  .rk-hero-imglabel { display: none; }
  .rk-hero .lede { margin-bottom: var(--rk-space-5); }
}