/* atlasfuturo.es — design system
   Editorial-cosmic, light-paper base, single bold accent
*/

:root {
  /* Paper & ink — warm-cool neutrals */
  --paper: #f5f1ea;        /* warm off-white */
  --paper-2: #ebe5da;      /* slightly deeper paper */
  --paper-3: #ddd5c5;      /* divider / muted band */
  --ink: #161413;          /* near-black, warm */
  --ink-2: #3a3531;        /* secondary text */
  --ink-3: #6a6258;        /* meta text */
  --rule: #d2c9b6;         /* hairline rules */

  /* Accent — single bold hue. Burnt vermilion. */
  --accent: oklch(0.62 0.17 35);
  --accent-ink: oklch(0.42 0.14 35);
  --accent-soft: oklch(0.92 0.04 35);

  /* Cosmic deep used SPARINGLY — single nav band, never as page bg */
  --deep: #0e1014;
  --deep-2: #1a1d24;

  /* Type */
  --serif: "Newsreader", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Scale */
  --maxw: 1280px;
}

* { box-sizing: border-box; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

body { font-feature-settings: "ss01", "cv11"; }

/* Typography primitives */
.af-serif { font-family: var(--serif); font-weight: 480; letter-spacing: -0.01em; }
.af-display {
  font-family: var(--serif);
  font-weight: 460;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-wrap: balance;
}
.af-mono { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }
.af-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.af-eyebrow.accent { color: var(--accent-ink); }
.af-meta { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); letter-spacing: 0.02em; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-ink); }

/* ── Top utility bar ── */
.af-utility {
  background: var(--deep);
  color: #c8c1b3;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 0;
}
.af-utility .dot { color: var(--accent); }
.af-utility a { color: #c8c1b3; }
.af-utility a:hover { color: #fff; }

/* ── Masthead ── */
.af-masthead {
  border-bottom: 1px solid var(--rule);
  padding: 28px 0 22px;
}
.af-logo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
}
.af-logo .dot { color: var(--accent); }
.af-logo .tld {
  font-family: var(--mono);
  font-size: 0.42em;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: uppercase;
  align-self: center;
  margin-left: 4px;
}
.af-tagline {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Primary nav ── */
.af-nav {
  border-bottom: 2px solid var(--ink);
  border-top: 1px solid var(--rule);
}
.af-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.af-nav li { position: relative; }
.af-nav li + li::before {
  content: "";
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 1px;
  background: var(--rule);
}
.af-nav a {
  display: block;
  padding: 14px 20px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.af-nav a:hover { background: var(--paper-2); color: var(--ink); }
.af-nav a.active {
  background: var(--ink);
  color: var(--paper);
}
.af-nav .search-cell {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  gap: 8px;
}

/* ── Layout helpers ── */
.af-rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.af-rule-thick { height: 2px; background: var(--ink); border: 0; margin: 0; }
.af-section-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 12px;
}
.af-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.af-section-label .num {
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}

/* ── Article cards ── */
.af-card { display: flex; flex-direction: column; gap: 10px; }
.af-card .img-frame {
  aspect-ratio: 16/10;
  background: var(--paper-3);
  position: relative;
  overflow: hidden;
}
.af-card .kicker { font-size: 0.72rem; }
.af-card h3 {
  font-family: var(--serif);
  font-weight: 480;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 4px 0 6px;
  text-wrap: pretty;
  font-size: 1.35rem;
}
.af-card h3 a:hover { color: var(--accent-ink); }
.af-card .dek {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.45;
  text-wrap: pretty;
}
.af-card .byline { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }

/* Hero card */
.af-hero h1 {
  font-family: var(--serif);
  font-weight: 460;
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  margin: 16px 0 18px;
  text-wrap: balance;
}
.af-hero .dek {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Image placeholder pattern */
.img-placeholder {
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(135deg,
      transparent 0, transparent 14px,
      rgba(0,0,0,0.04) 14px, rgba(0,0,0,0.04) 15px),
    linear-gradient(180deg, #c4baa3, #b3a888);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.img-placeholder.dark {
  background:
    repeating-linear-gradient(135deg,
      transparent 0, transparent 14px,
      rgba(255,255,255,0.05) 14px, rgba(255,255,255,0.05) 15px),
    radial-gradient(ellipse at 30% 20%, #2a2438, #0e1014 70%);
  color: #c8c1b3;
}
.img-placeholder.warm {
  background:
    repeating-linear-gradient(135deg,
      transparent 0, transparent 14px,
      rgba(0,0,0,0.05) 14px, rgba(0,0,0,0.05) 15px),
    linear-gradient(180deg, #d4906f, #b06143);
  color: #f5f1ea;
}
.img-placeholder.cool {
  background:
    repeating-linear-gradient(135deg,
      transparent 0, transparent 14px,
      rgba(0,0,0,0.05) 14px, rgba(0,0,0,0.05) 15px),
    linear-gradient(180deg, #93a8b6, #5e7787);
  color: #f5f1ea;
}
.img-placeholder .label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.85);
  background: rgba(0,0,0,0.18);
  padding: 4px 8px;
  border: 1px solid rgba(245, 241, 234, 0.35);
}

/* Category pill */
.af-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  text-decoration: none;
}
.af-pill.solid { background: var(--ink); color: var(--paper); }
.af-pill.accent { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Pagination pills are interactive nav — give them a comfortable tap target
   (WCAG 2.5.8 wants >=24x24; we use 40). Flex centering comes from Bootstrap
   utilities on the links; only the min size / padding (which Bootstrap can't
   express) lives here. Scoped so compact category tag pills are unaffected. */
.posts-pagination .af-pill {
  min-width: 40px;
  min-height: 40px;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
}

/* Footer */
.af-footer {
  background: var(--deep);
  color: #c8c1b3;
  padding: 56px 0 28px;
  margin-top: 80px;
}
.af-footer h4 {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}
.af-footer a { color: #c8c1b3; }
.af-footer a:hover { color: #fff; }
.af-footer .colophon {
  border-top: 1px solid #2a2d34;
  margin-top: 40px;
  padding-top: 20px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #6a6258;
  text-transform: uppercase;
}

/* Buttons (also the newsletter plugin's form button, SUB7) */
.af-btn,
.af-boletin button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.86rem;
  border: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.af-btn:hover, .af-boletin button:hover { background: var(--accent); color: #fff; }
.af-btn.outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.af-btn.outline:hover { background: var(--ink); color: var(--paper); }

/* Cookie consent banner (inc/consent.php, assets/js/consent.js): fixed at the bottom; real space is kept below the page while
   it shows (--af-consent-h is its height, set by consent.js), so the last footer links are never under it. */
.af-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 16px 20px;
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 0.9rem;
  max-height: 100vh;
  overflow-y: auto;
}

.af-consent[hidden] { display: none; }

.af-consent__text {
  margin: 0;
  flex: 1 1 28rem;
}

.af-consent__text a {
  color: var(--ink);
  text-decoration: underline;
}

.af-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.af-consent__actions .af-btn {
  min-width: 9rem;
  justify-content: center;
}

html.af-consent-shown { scroll-padding-bottom: var(--af-consent-h, 0); }

html.af-consent-shown body { padding-bottom: var(--af-consent-h, 0); }

/* Pull quote */
.af-pullquote {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 28px 0;
  margin: 32px 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.af-pullquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Article body */
.af-article-body {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--ink);
}
.af-article-body p { margin: 0 0 1.2em; text-wrap: pretty; }
.af-article-body p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 4.6em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.08em 0 -0.04em;
  color: var(--accent-ink);
}
.af-article-body h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: -0.015em;
  margin: 2em 0 0.6em;
}
.af-article-body figure { margin: 2em 0; }
.af-article-body figcaption {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--accent);
  line-height: 1.5;
}
.af-article-body a { color: var(--accent-ink); border-bottom: 1px solid var(--accent); }
.af-article-body ul,
.af-article-body ol { margin: 0 0 1.2em 1.25em; padding: 0; }
.af-article-body li { margin: 0 0 0.5em; text-wrap: pretty; }

/* Previous / next post navigation (single.php) */
.af-post-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.af-post-nav__prev,
.af-post-nav__next {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 240px;
  min-width: 0; /* let the title ellipsis inside a flex item */
  color: var(--ink);
}
.af-post-nav__next {
  margin-left: auto; /* keep "next" right-aligned even when "prev" is absent */
  flex-direction: row-reverse;
  text-align: right;
}
.af-post-nav__arrow {
  flex: none;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-3);
}
.af-post-nav__prev:hover .af-post-nav__arrow,
.af-post-nav__next:hover .af-post-nav__arrow { color: var(--accent-ink); }
.af-post-nav__text { display: flex; flex-direction: column; min-width: 0; }
.af-post-nav__label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.af-post-nav__title {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.3;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* CSS safety net on top of the 60-grapheme server cut */
}
@media (max-width: 560px) {
  .af-post-nav { flex-direction: column; }
  .af-post-nav__prev,
  .af-post-nav__next { flex-basis: auto; max-width: 100%; }
}

/* Sidebar */
.af-side h2,
.af-side h4 {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.af-side ol {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: rank;
}
.af-side ol li {
  counter-increment: rank;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.af-side ol li::before {
  content: counter(rank, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--accent-ink);
  font-weight: 500;
}
.af-side ol li h3,
.af-side ol li h5 {
  font-family: var(--serif);
  font-weight: 480;
  font-size: 1.02rem;
  line-height: 1.18;
  margin: 0 0 6px;
}
.af-side ol li .meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Newsletter strip */
.af-newsletter {
  background: var(--ink);
  color: var(--paper);
  padding: 48px 0;
  margin-top: 64px;
}
.af-newsletter h3 {
  font-family: var(--serif);
  font-weight: 460;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 8px;
}
.af-newsletter .form-row {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(245,241,234,0.3);
}
.af-newsletter input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--paper);
  padding: 14px 0;
  font-family: var(--sans);
  font-size: 1rem;
  outline: none;
}
.af-newsletter input::placeholder { color: rgba(245,241,234,0.5); }
.af-newsletter button {
  background: transparent;
  color: var(--accent);
  border: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 0 0 16px;
  cursor: pointer;
}
.af-newsletter button:hover { color: #fff; }

/* Tag cloud */
.af-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.af-tagcloud a {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  color: var(--ink-2);
}
.af-tagcloud a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.af-tagcloud a.lg { font-size: 0.92rem; padding: 8px 14px; color: var(--ink); }
.af-tagcloud a.md { font-size: 0.84rem; }

/* Issue / date marker */
.af-issue {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  gap: 18px;
  align-items: center;
}
.af-issue .num { color: var(--accent-ink); }

/* Misc */
.divider-dot::before { content: "·"; margin: 0 6px; color: var(--ink-3); }

/* Screen-reader-only: visible to assistive tech, hidden visually. Used for
   section headings that keep the document outline valid without changing the
   editorial layout (WCAG 1.3.1 / 2.4.10). Matches WordPress core .screen-reader-text. */
.af-sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}

/* ── Homepage lead row: stop the empty gap ──
   The hero column is shorter than the aside; default flex stretch left a tall
   blank space. align-items:start keeps the hero at its natural height; the
   aside scrolls with a sticky offset on desktop. */
.af-home-lead { align-items: start; }
@media (min-width: 992px) {
  .af-home-lead .af-side {
    position: sticky;
    top: 24px;
  }
}

/* ── Accessibility: visible keyboard focus (WCAG 2.4.11/2.4.13) ── */
:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 2px;
}
/* Don't double-draw for mouse users on elements that already style :focus */
:focus:not(:focus-visible) { outline: none; }

/* Page background variant: when whole page should look like a single mockup screen */
.mock-frame {
  background: var(--paper);
  min-height: 100%;
  width: 100%;
  overflow: hidden;
}

/* ─── Utilities & components migrated from inline styles ─────────
   Replaces static style="" attributes across templates (project rule:
   no inline styles except genuinely dynamic per-instance values). */

/* Text colors */
.af-c-ink       { color: var(--ink); }
.af-c-ink-2     { color: var(--ink-2); }
.af-c-ink-3     { color: var(--ink-3); }
.af-c-accent    { color: var(--accent); }
.af-c-paper     { color: var(--paper); }
.af-c-paper-85  { color: rgba(245, 241, 234, 0.85); }
.af-c-paper-60  { color: rgba(245, 241, 234, 0.6); }
.af-c-paper-50  { color: rgba(245, 241, 234, 0.5); }
.af-c-footer    { color: #a89e8d; }

/* Rules / dividers */
.af-bt          { border-top: 1px solid var(--rule); }
.af-bt-ink      { border-top: 2px solid var(--ink); }
.af-bt-faint    { border-top: 1px solid rgba(245, 241, 234, 0.15); }
.af-bb          { border-bottom: 1px solid var(--rule); }
.af-bb-ink      { border-bottom: 2px solid var(--ink); }
.af-underline   { border-bottom: 1px solid var(--rule); }
.af-vrule       { width: 1px; height: 32px; background: var(--rule); }
.af-rule-page   { max-width: var(--maxw); margin: 0 auto; }

/* Measure (max line length) */
.af-measure-32  { max-width: 32ch; }
.af-measure-60  { max-width: 60ch; }
.af-measure-62  { max-width: 62ch; }
.af-measure-70  { max-width: 70ch; }

/* Aspect ratios for image frames. (object-fit:cover uses Bootstrap's
   .object-fit-cover; margin:0 uses Bootstrap's .m-0 — not duplicated here.) */
.af-ratio-21x9  { aspect-ratio: 21/9; }
.af-ratio-1x1   { aspect-ratio: 1/1; overflow: hidden; }

/* Section bands (dark hero headers) */
.af-band {
  background: var(--deep);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  padding: 56px 0 48px;
}
.af-band--tall { min-height: 640px; padding: 0; }
/* Opacity values Bootstrap doesn't provide (it ships 0/25/50/75/100 only).
   Positioning uses Bootstrap's .position-absolute + inset utilities. */
.op-40 { opacity: 0.4; }
.op-55 { opacity: 0.55; }
.af-band__pad  { padding-top: 64px; padding-bottom: 64px; }

/* Archive / section heads */
.af-head        { padding: 40px 0 36px; }
.af-head.af-bb  { border-bottom: 1px solid var(--rule); }
.af-head--lg    { padding: 48px 0; }
.af-head--tint  { background: var(--paper-2); border-bottom: 1px solid var(--rule); padding: 48px 0 40px; }

/* Display heading sizes (preserve exact clamps per context) */
.af-h-single    { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.af-h-archive   { font-size: clamp(2.4rem, 5vw, 4rem); }
.af-h-archive-lg{ font-size: clamp(2.6rem, 5.5vw, 4.6rem); }
.af-h-tag       { font-size: clamp(2.6rem, 5vw, 4rem); margin: 0; }
.af-h-cat       { font-size: clamp(3rem, 6vw, 5.4rem); }
.af-h-404       { font-size: clamp(3rem, 7vw, 6rem); }

/* Lead / dek paragraphs (serif intros) */
.af-lead        { font-size: 1.35rem; }
.af-lead-2      { font-size: 1.25rem; }
.af-lead-3      { font-size: 1.18rem; }
.af-lead-4      { font-size: 1.15rem; }
.af-lead-tag    { font-size: 1.18rem; line-height: 1.25; }

/* Footer brand sizing */
.af-footer-brand { color: #f5f1ea; font-size: 1.8rem; }
.af-footer-brand .tld { color: rgba(245, 241, 234, 0.5); }

/* Misc text sizes used in bylines / labels */
.af-fs-070      { font-size: 0.7rem; }
.af-fs-092      { font-size: 0.92rem; }
.af-fs-098      { font-size: 0.98rem; line-height: 1.5; }
.af-fs-100      { font-size: 1rem; }
.af-fs-105      { font-size: 1.05rem; line-height: 1.5; }
.af-fs-110      { font-size: 1.1rem; }
.af-fs-120      { font-size: 1.2rem; }
.af-fs-145      { font-size: 1.45rem; line-height: 1.18; font-weight: 480; }
.af-fs-160      { font-size: 1.6rem; font-weight: 480; }
.af-fs-200      { font-size: 2rem; }
.af-fs-240      { font-size: 2.4rem; }
.af-balance     { text-wrap: balance; }
.af-pretty      { text-wrap: pretty; }

/* Search field (big serif input) */
.af-search-field {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--serif);
  font-weight: 460;
  letter-spacing: -0.025em;
  font-size: clamp(2rem, 4vw, 3.4rem);
  padding: 8px 0;
}
.af-search-field--sm {
  outline: none;
  font-family: var(--serif);
  font-size: 1.2rem;
  padding: 8px 0;
}

/* Newsletter form controls (dark strip) */
.af-newsletter__input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--paper);
  padding: 14px 0;
  font-family: var(--sans);
  font-size: 1rem;
  outline: none;
}
.af-newsletter__submit {
  background: transparent;
  color: var(--accent);
  border: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 0 0 16px;
  cursor: pointer;
}

/* The newsletter plugin's form on a page (atlasfuturo-newsletter; SUB7) */
.af-boletin { max-width: 40rem; }
.af-boletin fieldset { margin: 0 0 1.2em; }

.af-boletin legend {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4em;
}
.af-boletin fieldset label { margin-right: 1em; }
.af-boletin p > label { display: block; } /* Bootstrap's reboot makes a label inline-block: the field below takes its full width. */

.af-boletin input[type="email"] {
  display: block;
  width: 100%;
  margin-top: 0.3em;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  background: #fff;
  font: inherit;
}

.af-article-body .af-boletin p::first-letter {
  float: none;
  font: inherit;
  margin: 0;
  color: inherit;
}

/* Comment reply link */
.af-reply-link { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* River compact card (front-page secondary items) */
.af-river-compact { border-top: 1px solid var(--rule); padding-top: 14px; }

/* Source attribution box (single article, from af_source_* meta) */
.af-source-box {
  background: var(--paper-2);
  border-radius: 4px;
}
.af-source-box a { border-bottom: 1px solid var(--rule); }
.af-source-box a:hover { color: var(--accent-ink); }

/* Button modifiers */
.af-btn.accent  { background: var(--accent); color: #fff; }
.af-btn.accent:hover { background: var(--accent-ink); color: #fff; }
.af-btn.on-dark { color: var(--paper); border-color: rgba(245, 241, 234, 0.4); }

/* 404 suggestion cards (on dark band) */
.af-suggest {
  display: block;
  padding: 20px;
  border-left: 1px solid rgba(245, 241, 234, 0.2);
  color: var(--paper);
}
.af-suggest-title {
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--paper);
  font-weight: 480;
}

/* ─── Custom Logo (responsive) ──────────────────────────
   functions.php strips width/height attributes from the <img>,
   so plain CSS controls sizing without !important. */
.custom-logo-link {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}
.custom-logo {
  display: inline-block;
  max-height: 56px;
  max-width: min(280px, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 767.98px) {
  .custom-logo {
    max-height: 44px;
    max-width: min(220px, 100%);
  }
}
@media (max-width: 480px) {
  .custom-logo {
    max-height: 36px;
    max-width: min(180px, 100%);
  }
}

/* Social follow module — FOLLOW (brand relationship), separate from the SHARE row. */
.af-follow {
  margin-top: 2rem;
}
.af-follow--card {
  padding-top: 1.75rem;
}
.af-follow__intro {
  margin-bottom: 0.9rem;
}
.af-follow__title {
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0.25rem 0 0.4rem;
}
.af-follow__text {
  margin: 0;
  max-width: 46ch;
}
.af-follow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.af-follow--card .af-follow__list {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 576px) {
  .af-follow--card .af-follow__list {
    grid-template-columns: 1fr 1fr;
  }
}
.af-follow__link {
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-family: var(--sans);
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.af-follow__link:hover {
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}
.af-follow__link:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}
.af-follow__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.af-follow--footer {
  margin-top: 1.1rem;
}
.af-follow--footer h4 {
  margin-bottom: 0.6rem;
}
.af-follow--footer .af-follow__list {
  gap: 0.5rem;
}
.af-follow--footer .af-follow__link {
  padding: 0.4rem 0.7rem;
  border-color: rgba(255, 255, 255, 0.22);
  color: #c8c1b3;
}
.af-follow--footer .af-follow__link:hover {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.af-follow--footer .af-follow__link:focus-visible {
  outline-color: #fff;
}
/* Compact icon-only variant (homepage aside, under "Lo más leído"). */
.af-follow--bar {
  margin-top: 1.25rem;
}
.af-follow--bar .af-follow__eyebrow {
  display: block;
  margin-bottom: 0.55rem;
}
.af-follow--bar .af-follow__list {
  gap: 0.5rem;
}
.af-follow--bar .af-follow__link {
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  justify-content: center;
  gap: 0;
}
.af-follow--bar .af-follow__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
/* Ultra-compact icon row for the top utility bar — its color comes from .af-utility a, which matches the link itself. */
.af-follow--inline .af-follow__list {
  gap: 0.4rem;
}
.af-follow--inline .af-follow__link {
  min-height: 0;
  padding: 4px;
  border: 0;
  gap: 0;
}
.af-follow--inline .af-follow__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.af-follow--inline .af-follow__link:focus-visible {
  outline-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .af-follow__link {
    transition: none;
  }
}