/* ============================================================
   PAMPAS — OJS 3.3 Theme · HTML Prototype
   Design: Maria del Castillo (upupepops.design)
   Build: OJS-Services
   ------------------------------------------------------------
   Elegant · Modern · Minimal · Bold · Generous white space
   Palette: limited (teal accent + neutrals)
   Type:    Inter (body) + Bricolage Grotesque (display/accent)
   Note: This is a static prototype to validate the theme's
         character before OJS development. Values mirror the
         Figma "UI KIT" and "About the theme" boards.
   ============================================================ */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS  (these mirror the Figma variables 1:1)
   PRIMARY & ACCENT are "user selection" in Figma → themeable.
---------------------------------------------------------------- */
:root {
  /* Brand — user selectable in OJS admin. The plugin injects --pampas-*
     inline before this sheet; literals are the theme's defaults/fallbacks. */
  /* r2 (Maria): the ACCENT is ONE colour — no 600/700/300/100 shades.
     Hover/interaction states use --ink; tints use --secondary / --background. */
  --accent:        var(--pampas-accent, #737A2B);     /* ACCENT (user choice) */
  --primary:       var(--pampas-primary, #6F7065);    /* PRIMARY (structural) */
  --secondary:     var(--pampas-secondary, #E9EAE8);  /* r3: Primary at 15% (white 85%) */
  --background:    var(--pampas-background, #F8F8F7); /* r3: Primary at  5% (white 95%) */

  /* Neutrals — fixed (BLACK / WHITE / GREY + scale) */
  --ink:           var(--pampas-ink, #222222);   /* BLACK — decoupled from Primary */
  --bg:            #FAFAFA;   /* WHITE / page background */
  --grey:          #8E8E8E;   /* GREY    */
  --grey-700:      #585858;
  --grey-500:      #737373;
  --grey-300:      #B3B3B3;
  --surface:       var(--secondary);   /* r2: surfaces follow Secondary */
  --surface-2:     var(--secondary);
  --line:          #DFDFDF;   /* borders / dividers */
  --line-2:        #E8E8E8;
  --white:         #FFFFFF;

  /* Feedback (designed in UI KIT) */
  --ok:            #1F8A53;  --ok-bg:#E8F5EC;
  --err:           #C0392B;  --err-bg:#FBEAE7;
  --warn:          #B7791F;  --warn-bg:#FBF1DF;
  --info:          var(--accent); --info-bg:var(--background);

  /* Typography */
  --font-body:   var(--pampas-font-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --font-accent: var(--pampas-font-accent, "Bricolage Grotesque", "Inter", system-ui, sans-serif);

  /* Fluid type scale (changes across breakpoints, per "Font styles") */
  --t-h1:   clamp(2.6rem, 1.6rem + 4.4vw, 5.25rem);   /* H1 display */
  --t-h1a:  clamp(2.0rem, 1.4rem + 2.6vw, 3.25rem);   /* H1 (articles) */
  --t-h2:   clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem);
  --t-h2a:  clamp(1.4rem, 1.15rem + 1.0vw, 1.9rem);
  --t-h3:   clamp(1.15rem, 1.0rem + 0.6vw, 1.45rem);
  --t-xl:   clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  --t-l:    1.125rem;
  --t-m:    1rem;
  --t-s:    0.875rem;
  --t-xs:   0.78rem;

  /* Layout — content width per "About the theme" board */
  --content-w: 70vw;          /* Desktop & widescreen  */
  --content-max: 1040px;      /* contained reading column (~Figma 1000px); hero is full-bleed (outside .container) */
  --gutter: clamp(1.1rem, 2vw, 2rem);

  /* Shape & motion — minimal, square-ish */
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(34,34,34,.05);
  --shadow:    0 6px 24px -12px rgba(34,34,34,.18);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .5s;
}

/* ----------------------------------------------------------------
   2. RESET / BASE
---------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none!important; transition:none!important; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--background);   /* r2: page bg follows Primary tint */
  overflow-x: clip;   /* clip stray full-bleed overflow WITHOUT turning body into a
                         scroll container (plain `hidden` forces overflow-y:auto, which
                         can disturb sticky/scroll behaviours). */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }
button { font: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--font-accent); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; margin: 0 0 .5em; color: var(--ink); }
p { margin: 0 0 1rem; }
/* r3 (Maria): selection + scrollbar follow the admin's accent colour.
   --pampas-accent-rgb is injected by the plugin next to --pampas-accent. */
::selection { background: rgba(var(--pampas-accent-rgb, 115,122,43), .3); color: var(--ink); }
body::-webkit-scrollbar { width: 10px; background: var(--ink); }
body::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 20px; background-clip: padding-box; }
html { scrollbar-width: thin; scrollbar-color: var(--accent) var(--ink); }
/* Core templates use this for screen-reader-only text; without a definition
   the label renders visibly (e.g. the search form's "Search for"). */
.pkp_screen_reader { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ----------------------------------------------------------------
   3. LAYOUT
---------------------------------------------------------------- */
.container {
  width: min(var(--content-w), var(--content-max));
  margin-inline: auto;
}
/* r3 (Maria): ONE spacing standard for every section — .section--tight is gone. */
.section { padding-block: 4em; }
/* Número actual = distinct rounded panel sitting on the page (Figma) */
.current-issue .container { background: var(--white); border-radius: 24px; box-shadow: var(--shadow);
  padding: clamp(1.75rem, 4vw, 3.25rem); }
.stack > * + * { margin-top: 1rem; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* eyebrow + section heading rhythm */
.section-head { margin-bottom: clamp(1.5rem, 3vw, 2.75rem); }
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 .6rem;
}
.section-title { font-size: var(--t-h2); margin: 0; }
.section-head .lead { color: var(--grey-700); max-width: 60ch; margin-top: .6rem; }

/* ----------------------------------------------------------------
   4. TYPOGRAPHY UTILITY CLASSES
   ("treat each variable as a class" — usable inside the OJS editor)
---------------------------------------------------------------- */
.h1            { font-family: var(--font-accent); font-weight: 800; font-size: var(--t-h1);  line-height: 1.02; letter-spacing: -.02em; }
.h1-article    { font-family: var(--font-accent); font-weight: 700; font-size: var(--t-h1a); line-height: 1.1; }
.h2            { font-family: var(--font-accent); font-weight: 700; font-size: var(--t-h2);  }
.h2-article    { font-family: var(--font-accent); font-weight: 700; font-size: var(--t-h2a); }
.h3            { font-family: var(--font-accent); font-weight: 600; font-size: var(--t-h3);  }
.text-sans-xl  { font-family: var(--font-body); font-size: var(--t-xl); line-height: 1.5; }
.text-sans-l   { font-family: var(--font-body); font-size: var(--t-l);  }
.text-sans-m   { font-family: var(--font-body); font-size: var(--t-m);  }
.text-sans-s   { font-family: var(--font-body); font-size: var(--t-s);  }
.accent-text-xl{ font-family: var(--font-accent); font-weight: 600; font-size: var(--t-xl); }
.accent-text-l { font-family: var(--font-accent); font-weight: 600; font-size: var(--t-l);  }
.accent-text-m { font-family: var(--font-accent); font-weight: 600; font-size: var(--t-m);  }
.accent-text-s { font-family: var(--font-accent); font-weight: 600; font-size: var(--t-s);  }
.muted { color: var(--grey-700); }
.muted-2 { color: var(--grey); }

/* Colour utility classes (each palette colour exposed as a class) */
.text-primary{color:var(--primary)} .text-accent{color:var(--accent)} .text-ink{color:var(--ink)}
.text-grey{color:var(--grey)} .text-white{color:var(--white)}
.bg-accent{background:var(--accent);color:#fff} .bg-primary{background:var(--primary);color:#fff}
.bg-surface{background:var(--surface)} .bg-white{background:var(--white)} .bg-tint{background:var(--background)}

/* ----------------------------------------------------------------
   5. BUTTONS  (Primary / Dark / Secondary / Ghost)
---------------------------------------------------------------- */
.btn, .ref-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-accent); font-weight: 600; font-size: 16px; letter-spacing: 0;
  line-height: 1; padding: .8rem 1.25rem; border: 1.5px solid transparent;
  border-radius: var(--radius); transition: all .22s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--ink); color:#fff; transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; color:#fff; transform: translateY(-1px); }
.btn-secondary, .ref-toggle { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-secondary:hover, .ref-toggle:hover { background: transparent; color: #000; border-color: #000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm, .ref-toggle { padding: .55rem .85rem; }
.btn-block { display: flex; width: 100%; justify-content: center; }
.btn-pdf { background: var(--accent); color:#fff; }
.btn-pdf:hover{ background: #000; color:#fff; }

/* Native "back to top" floating button (revealed after scrolling — pampas.js) */
.to-top { position:fixed; right:20px; bottom:20px; z-index:60;
  width:44px; height:44px; border-radius:50%; border:none; background: var(--ink); color:#fff;
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), background .2s; }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { background:#000; }
.to-top svg { transform:rotate(180deg); }

/* ---- RTL refinements (Arabic ar_IQ) — flexbox already mirrors the layout;
   these fix the few direction-specific bits. ---- */
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .index-head-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .to-top { right: auto; left: 20px; }
[dir="rtl"] .menu.open { border-radius: 0 20px 20px 20px; }
[dir="rtl"] .index-more, [dir="rtl"] .issues-more { text-align: right; }
[dir="rtl"] .article-pages, [dir="rtl"] .article-row .side { text-align: left; }
[dir="rtl"] .prose .abstract { border-left: 0; border-right: 4px solid var(--accent); border-radius: var(--radius) 0 0 var(--radius); }

/* tags / chips */
.tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: var(--radius); background: var(--surface); color: var(--grey-700);
}
.tag-accent { background: var(--background); color: var(--ink); }
.tag-outline{ background: transparent; border:1px solid var(--line); color: var(--grey-700); }

/* ----------------------------------------------------------------
   6. FORMS  (inputs, alerts/feedback)
---------------------------------------------------------------- */
.field { display: block; margin-bottom: .9rem; }
.field label { display:block; font-size:.82rem; font-weight:600; margin-bottom:.35rem; color:var(--grey-700); }
.input, input[type=text], input[type=email], input[type=password], input[type=search], textarea, select {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: .7rem .85rem; transition: border-color .2s, box-shadow .2s;
}
.input:focus, input:focus, textarea:focus, select:focus { outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--secondary); }
::placeholder { color: var(--grey-300); }

.alert { display:flex; gap:.7rem; padding: .9rem 1.1rem; border-radius: var(--radius); border-left: 4px solid; margin-bottom: 1rem; font-size:.92rem; }
.alert strong{ font-family:var(--font-accent); }
.alert-success { background: var(--ok-bg);  border-color: var(--ok);  color:#1a5e3a; }
.alert-error   { background: var(--err-bg); border-color: var(--err); color:#8e2c20; }
.alert-warning { background: var(--warn-bg);border-color: var(--warn);color:#7c5512; }
.alert-info    { background: var(--info-bg);border-color: var(--info);color: var(--ink); }

/* ----------------------------------------------------------------
   7. HEADER / NAVIGATION  (sticky)
---------------------------------------------------------------- */
.topbar { background: var(--ink); color: #cfd6d6; font-size: .78rem; }
.topbar .container { display:flex; justify-content: space-between; align-items:center; min-height: 38px; }
.topbar a { color:#cfd6d6; } .topbar a:hover{ color:#fff; }
.topbar .langs a { margin-left: .9rem; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: none;   /* r2 */
  transition: box-shadow .3s, background .3s;
}
.site-header.is-scrolled { box-shadow: none; }   /* r2 */
.nav { display:flex; align-items:center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }
.brand { display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.brand .mark { width: 42px; height: 42px; color: var(--accent); }
.brand .wordmark { font-family: var(--font-accent); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: var(--ink); line-height:1; }
.brand .wordmark small { display:block; font-family: var(--font-body); font-weight:500; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color: var(--grey); margin-top:3px; }
.menu { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.85rem 1.4rem; list-style:none; margin:0; padding:0; }
.menu a { font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-700); position:relative; padding: .3rem 0; }
.menu a:hover, .menu a.active { color: var(--ink); }
.menu a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background: var(--accent); transition: width .25s var(--ease); }
.menu a:hover::after, .menu a.active::after { width:100%; }
/* No dark fill behind a top-level menu item on hover (desktop/laptop) — only the
   accent underline + ink colour. */
#navigationPrimary > li > a:hover { background-color: transparent; }
.nav-actions { display:flex; align-items:center; gap:.6rem; }
.icon-btn { width:42px; height:42px; display:grid; place-items:center; border-radius: var(--radius); border:none; background:transparent; color:var(--ink); }
.icon-btn:hover{ background: var(--surface); }
.nav-toggle { display:none; }

/* ----------------------------------------------------------------
   8. HERO
---------------------------------------------------------------- */
/* White, minimal hero: photographic feature image + oversized journal
   wordmark overlapping its base (the Figma "HOME/Desktop" treatment). */
/* Hero (Maria QA): a tall secondary-tinted band. The feature image floats
   contained in the middle (the secondary tint shows around it), and the
   oversized wordmark sits at the base — BEHIND the image by default, or in
   front (admin option data-wordmark). The wordmark is fluid: its font-size is
   driven by --ch (its character count) so short and long names both fill it. */
.hero { position: relative; background: var(--secondary); height: 92vh; min-height: 480px; overflow: hidden; padding: 0; }
.hero-figure { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 7vh, 6rem) var(--gutter) clamp(5rem, 11vh, 9rem); }
/* r2: two hero image modes, chosen in admin (data-fit).
   cover (default) = fills the whole hero · contained = floats inside the band. */
.hero[data-fit="contained"] .hero-figure img { max-width: min(100%, 1040px); max-height: 100%;
  width: auto; height: auto; object-fit: contain; display: block; }
.hero[data-fit="cover"] .hero-figure { padding: 0; }
.hero[data-fit="cover"] .hero-figure img { width: 100%; min-width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block; }
/* No homepage image → the hero stays empty (secondary band + wordmark only). */
.hero-fallback { display: none; }
.hero-wordmark { position: absolute; left: 50%; bottom: clamp(.4rem, 2.5vh, 2.5rem); transform: translateX(-50%); margin: 0;
  font-family: var(--font-accent); font-weight: 800;
  --fluid-size: calc((100vw / var(--ch, 10)) * 1.5);
  font-size: clamp(2.5rem, var(--fluid-size), 15rem); line-height: .9;
  letter-spacing: -0.03em; color: var(--primary); white-space: nowrap; text-align: center; pointer-events: none; }
/* Wordmark layer — behind the image (Maria's default) or in front (admin flip). */
.hero[data-wordmark="back"]  .hero-wordmark { z-index: -1; }
.hero[data-wordmark="front"] .hero-wordmark { z-index: 2; }
.hero-eyebrow { text-align: center; margin-top: 1rem; }
.hero-sub { font-size: var(--t-l); max-width: 62ch; margin: .9rem auto 0; text-align: center; color: var(--grey-700); }
.hero-dots { display:flex; gap:.5rem; margin: 1.4rem 0 0; justify-content:center; }
.hero-dots button { width:9px; height:9px; border-radius:50%; border:0; background: var(--line); padding:0; cursor:pointer; }
.hero-dots button[aria-current="true"]{ background: var(--accent); width:24px; border-radius:5px; }

/* page hero (interior pages) */
.page-hero { background: var(--accent); color:#fff; min-height:60vh; display:flex; align-items:flex-end; position:relative; overflow:hidden; }
.page-hero .container { padding-block: 2em; }
.breadcrumb { font-size:.9em; color:#fff; margin-bottom:.25rem; text-transform:uppercase; font-weight:bold; }   /* r4 */
.breadcrumb a{ color:#fff; } .breadcrumb a:hover{ color:#fff; text-decoration:underline; }   /* r4: full white for contrast */
/* Maria QA: page-hero title sized clamp(3rem,7vw,5rem), line-height 1. */
.page-hero h1 { font-family:var(--font-accent); font-weight:700; font-size:clamp(3rem, 7vw, 5rem); line-height:1; letter-spacing:-.02em; margin:0; color:#fff; }
.page-hero .page-hero-meta { margin-top:1rem; color:#fff; font-size:.95rem; margin-bottom:0; }   /* r3 */

/* Inner-page double-title fix: the teal hero already shows the page title, but core/PKP
   fallback pages (policies, …) reprint it as a leading .page_title inside .page. Hide that
   copy. On the article page .page_title lives inside .obj_article_details (not a direct
   child of .page), so the article title is untouched. Plain-<h1> duplicates
   (about/submissions, about/editorialTeam) are removed by the dedup in pampas.js. */
.page > .page_title { display: none; }

/* Consistent body spacing: core/PKP fallback pages (submissions, policies, about, contact,
   editorialTeam, databases, privacy, search…) wrap content in .page, which had no padding and
   sat flush against the teal hero. Give it the same top offset as Pampas .section pages so
   every page's body starts from the same place. (Pampas issue/article/forthcoming use .section,
   never .page, so they are unaffected.) The selector is deliberately specific enough to
   beat plugin CSS that also targets .page (e.g. the Indexing/partners plugin's .page.ipm-page,
   which otherwise forces a smaller 36px offset). Only the block (top/bottom) padding is set,
   so any plugin's horizontal layout is preserved. */
main.pampas-main .page { padding-block: clamp(3rem, 6vw, 6.5rem); }

/* Same consistency for the Editorial Board Manager plugin page (about/editorialTeam), which
   renders in .ebm-page-wrapper with a tight 24px top padding (content ~56px under the hero).
   Bump it so its content lands at the same offset as every other page (its inner content sits
   ~32px below the wrapper's padding box, hence the -32px). Beats the plugin's inline <style>. */
/* r3 (Maria): and it keeps to the same content column as every other page —
   the plugin's own card/colour styles are untouched. */
body.pampas .ebm-page-wrapper { padding-top: calc(clamp(3rem, 6vw, 6.5rem) - 32px);
  width: min(var(--content-w), var(--content-max)); max-width:100%; margin-inline:auto; }

/* ----------------------------------------------------------------
   9. HOME — intro / current issue / news / indexing / social / related
---------------------------------------------------------------- */
/* Intro / About (Maria QA): a full-height, vertically-centred band. The cover
   is bare (no white card, no border) so the journal artwork sits directly on
   the page. Desktop & laptop = .8fr / 1fr; tablet & mobile collapse to 1 column
   (see the responsive block). */
.intro { display:grid; grid-template-columns: .8fr 1fr; gap: 2em;
  align-items:center; }   /* r2: min-height dropped — .section padding carries the rhythm */
.cover-card { background:transparent; border:none; border-radius:0; padding:0; box-shadow:none;
  align-self:stretch; }   /* r3: stretch so the cover can fill the row */
/* r3 (Maria): the cover takes the full available height and crops, so the
   intro looks the same whatever proportions the uploaded artwork has. */
.cover-card .cover { border-radius: 4px; overflow:hidden; height:100%; max-height:60vh; }
.cover-card .cover img { width:100%; height:100%; object-fit:cover; }
.cover-actions { display:grid; gap:.55rem; margin-top: 1rem; }
.intro-body h2 { font-size: var(--t-h2); }
/* Maria QA: the intro eyebrow (journal name label) is hidden — the description
   speaks for itself. Kept in the DOM so it can be re-enabled with one override. */
.intro-body .eyebrow { display: none; }
.intro-body .lead { font-size: var(--t-l); color: var(--grey-700); }
/* Issue card identification next to the cover — Figma: Bricolage 600 / 40px / line-height 100% */
.intro-body .section-display { font-size: 40px; line-height: 1; letter-spacing: 0; margin: 0; }
.issue-date { font-family: var(--font-body); font-size: .95rem; color: var(--grey-700); margin: .55rem 0 1.3rem; }
.issue-galleys { margin-top: 1.5rem; }
.issue-view .issue-articles { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
/* The issue-page header reuses .intro but is a compact card (cover + id + galleys,
   then the article list) — not the full-height Home "About" band. Undo the
   Home-only min-height:100vh / vertical centring here (Figma: compact header). */
.issue-view .intro { min-height: 0; align-content: center; align-items: center; }   /* r3 */

/* article list (current issue) */
.article-list { display:grid; gap:0; }
.article-row { display:grid; grid-template-columns: 1fr auto; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--line); align-items:start; }
.article-row:last-child{ border-bottom:1px solid var(--line); }
/* Section-grouped rows (home Número actual + issue TOC): NO dividers (Figma) — spacing only */
.toc-group .article-row { border-top: none; }
.toc-group .article-row:last-child { border-bottom: none; }
.article-row .meta { display:flex; gap:.6rem; align-items:center; margin-bottom:.5rem; flex-wrap:wrap; }
.article-row h3 { font-size: var(--t-h3); margin:.1rem 0 .35rem; }
.article-row h3 a{ color:var(--ink); } .article-row h3 a:hover{ color:var(--accent); }
.article-row .authors { color: var(--grey-700); font-size:.92rem; margin:0 0 .6rem; }
/* Número actual row (Figma): author · title (Inter 700 20/30) · DOI · galleys, page no. right */
.article-row .row-author { font-family: var(--font-body); font-size:.9rem; color: var(--grey-700); margin:0 0 .4rem; }
/* Maria QA: article title is an H4 — 18/25. */
.article-row .row-title a { color: var(--ink); }
.article-row .row-title { font-family: var(--font-body); font-weight:700; font-size:18px; line-height:25px; letter-spacing:0; margin:0 0 .45rem; }
.article-row .row-doi { display:inline-block; font-family: var(--font-body); font-size:.9rem; color: var(--accent); word-break:break-word; margin:0 0 .95rem; }
.article-row .row-doi:hover { color: var(--ink); text-decoration:none; }
.article-pages { font-family: var(--font-body); font-size:.9rem; color: var(--grey-700); white-space:nowrap; text-align:right; }
.article-row .row-actions { display:flex; align-items:center; gap:1rem; }
.article-row .side { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; }
.views { display:inline-flex; align-items:center; gap:.35rem; color:var(--grey); font-size:.82rem; }

/* indexing logos — from the Indexing Page Manager plugin: big display heading + arrow to
   the plugin's full page, then real logo images in a 6-col grid (full colour). */
.indexaciones .index-head { margin-bottom: clamp(1.5rem, 3vw, 2.75rem); }
/* r3 (Maria): display headings — including the ones an admin types into OJS'
   "Additional content" — share ONE definition, so a change (or a journal's own
   CSS override) reaches all of them. Colour is --grey-500 for contrast. */
.section-display, .additional-content h1, .additional-content h2 {
  font-family: var(--font-accent); font-weight: 600; font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 1; letter-spacing: 0; color: var(--grey-500); margin: 0; }
.additional-content h1, .additional-content h2 { margin-bottom: 1.25rem; }
.section-sub { font-size: var(--t-l); color: var(--grey-700); margin: .5rem 0 0; }
.index-head-arrow { display: inline-block; vertical-align: middle; color: var(--accent);
  transition: transform .2s var(--ease); }
.index-head-arrow svg { width: .5em; height: .5em; display: block; }
.index-head-arrow:hover { transform: translateX(5px); }

.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2vw, 2rem); }
.logo-img { display: flex; align-items: center; justify-content: center; min-width: 0; }
.logo-img img { max-height: 52px; max-width: 100%; width: auto; height: auto; object-fit: contain;
  opacity: .9; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.logo-img:hover img { opacity: 1; transform: translateY(-2px); }
.index-more { text-align: left; margin-top: 3rem; }   /* r2 */
@media (max-width: 1024px){ .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }

/* OJS "Additional Content" — styled as the homepage sponsorship / "Sumate a la
   red" section (admin enters heading + text + sponsor logos in Settings →
   Website → Appearance → Advanced). Sits below the indexing logos. */
.additional-content h3 { font-family: var(--font-accent); font-size: var(--t-xl); color: var(--ink); margin: 0 0 .6rem; }
.additional-content p { font-size: var(--t-l); line-height: 1.65; color: var(--grey-700); max-width: 70ch; margin: 0 0 1.1rem; }
.additional-content a { color: var(--accent); font-weight: 600; }
.additional-content a:hover { color: var(--ink); }
.additional-content ul, .additional-content ol { color: var(--grey-700); font-size: var(--t-l); margin: 0 0 1.1rem 1.2rem; }
.additional-content img { max-width: 100%; height: auto; }
.additional-content .sponsor-logos { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2vw, 2rem); margin-top: clamp(1.75rem, 4vw, 3rem); }
.additional-content .sponsor-logos a, .additional-content .sponsor-logos span { display: flex; align-items: center; justify-content: center; min-width: 0; }
.additional-content .sponsor-logos img { max-height: 150px; max-width: 100%; width: auto; height: auto; object-fit: contain;
  opacity: .95; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.additional-content .sponsor-logos a:hover img, .additional-content .sponsor-logos img:hover { opacity: 1; transform: translateY(-2px); }
@media (max-width: 1024px){ .additional-content .sponsor-logos { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .additional-content .sponsor-logos { grid-template-columns: repeat(3, 1fr); } }


/* r3 (Maria): "Past issues" and "Related titles" are the SAME component as the
   archive's issue card — same markup, same grid, same styles (section 10). The
   separate .related-grid component is gone. */
/* Placeholder (no real cover): Figma 237/355 box. Real images keep their own aspect (no crop). */
.cover-blank { aspect-ratio: 237/355; width:100%; background: var(--accent); }
.issues-more { text-align:left; margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* ----------------------------------------------------------------
   10. ARCHIVE — Biblioteca cover grid + filters + pagination
---------------------------------------------------------------- */
.archive-toolbar { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; margin-bottom: 2rem; }
.filters { display:flex; flex-wrap:wrap; gap:.6rem; }
/* Archive grid — respects the admin "Archive columns" option (--arc-cols, default 4).
   Maria QA: stays at the chosen count on desktop AND laptop (down to 1201), then
   3 on tablet (≤1200) and 2 on mobile (≤880) via the responsive block. */
.cover-grid { display:grid; grid-template-columns: repeat(var(--arc-cols,4),1fr); gap: clamp(1.2rem,2.4vw,2.2rem); }
.issue-card { display:flex; flex-direction:column; gap:.75rem; }
.issue-info { display:flex; flex-direction:column; gap:.15rem; }
.issue-card .issue-sub { font-size:.8rem; color:var(--grey-700); }   /* r4 */
/* r3 (Maria): a fixed cover box (the Figma 237×355 proportion) + object-fit, so
   every cover is the same height however the uploaded files differ. */
/* r4 (Maria): no border on issue covers anywhere — archive, past issues and
   related titles are this one component, so removing it here covers all three. */
.issue-card .cover { display:block; aspect-ratio:237/355; border-radius: 4px; overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s; }
.issue-card .cover img { display:block; width:100%; height:100%; object-fit:cover; }
.issue-card:hover .cover { transform: translateY(-4px); box-shadow: var(--shadow); }
.issue-card .issue-meta { font-size:.82rem; color:var(--grey-700); }
.issue-card .issue-title { font-family:var(--font-accent); font-weight:600; font-size:.98rem; color:var(--ink); }
.issue-card .issue-title:hover{ color:var(--accent); }
/* Maria QA: hide the core "second DOI" (.doiInSummary) shown in issue TOC summaries;
   the theme already prints the DOI once as .row-doi. */
.doiInSummary { display:none; }

.pagination { display:flex; justify-content:center; align-items:center; gap:.35rem; margin-top: clamp(2rem,4vw,3.5rem); }
.pagination a, .pagination span { min-width:40px; height:40px; display:grid; place-items:center; border-radius:var(--radius); border:1px solid var(--line); color:var(--grey-700); font-size:.9rem; font-weight:600; padding:0 .5rem; }
.pagination a:hover{ border-color:var(--accent); color:var(--accent); }
.pagination .current{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pagination .gap{ border:0; }

/* ----------------------------------------------------------------
   11. ARTICLE detail — 2-col, abstract, refs, cite, downloads, metrics
---------------------------------------------------------------- */
/* Maria QA: narrower right column (content nav) — 1fr / .2fr. */
.article-shell { display:grid; grid-template-columns: 1fr .2fr; gap: clamp(2rem,4vw,4rem); align-items:start; }
.article-main .article-head { display:flex; gap:1.4rem; align-items:flex-start; }
.article-main .article-head .thumb { width:96px; flex-shrink:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.article-title { font-size: var(--t-h2); line-height:1.12; margin:.1rem 0 .7rem; }
.author-line { color:var(--grey-700); font-size:.98rem; margin:0 0 .4rem; }
.author-line b{ color:var(--ink); font-weight:600; }
.article-tags { display:flex; gap:.5rem; flex-wrap:wrap; margin:.8rem 0; }
.meta-grid { display:grid; grid-template-columns: repeat(3,auto); gap:.4rem 2rem; margin:1rem 0 1.5rem; font-size:.85rem; color:var(--grey-700); }
.meta-grid b{ color:var(--ink); display:block; font-family:var(--font-accent); font-size:.95rem; }
.galley-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1.5rem; }

.prose h2 { font-size: var(--t-h2a); margin-top: 2.4rem; padding-bottom:.5rem; border-bottom:2px solid var(--secondary); }
.prose h2:first-child{ margin-top:0; }
.prose p { color: #2c2c2c; }
.prose .abstract { background: var(--surface); border-left:4px solid var(--accent); padding:1.2rem 1.4rem; border-radius:0 var(--radius) var(--radius) 0; }
.ref-list { counter-reset: ref; list-style:none; padding:0; margin:0; }
.ref-list li { counter-increment: ref; position:relative; padding:.6rem 0 .6rem 2.2rem; border-bottom:1px solid var(--line-2); font-size:.92rem; color:var(--grey-700); }
.ref-list li::before { content: counter(ref); position:absolute; left:0; top:.6rem; font-family:var(--font-accent); font-weight:700; color:var(--accent); }
.ref-list.is-collapsed .ref-extra { display:none; }
/* r3 (Maria): the References toggle is a Secondary button — it joins the button
   selector groups above, so only its own spacing is defined here. */
.ref-toggle { margin-top:1.25rem; }
.cite-box { background: var(--secondary); border:none; border-radius:var(--radius); padding:1.1rem 1.3rem; font-size:.9rem; color:var(--ink); }   /* r3 */

/* metrics chart */
.metrics-card { background: var(--surface); border-radius: var(--radius-lg); padding: clamp(1.2rem,2.5vw,2rem); }
/* r4 (Maria): the bars carried no readable value. There is now a labelled Y
   scale (max / half / 0) with two faint guides, plus the exact number above a
   bar on hover. --chart-pad keeps the scale column and the plot aligned. */
.chart-area { --chart-pad:1.75rem; display:grid; grid-template-columns:auto 1fr; gap:0 .7rem; }
.chart-y { grid-column:1; grid-row:1; display:flex; flex-direction:column; justify-content:space-between;
  height:230px; padding-top:var(--chart-pad); box-sizing:border-box;
  font-size:.7rem; line-height:1; color:var(--grey); text-align:right; font-variant-numeric:tabular-nums; }
.chart-y span:last-child { transform:translateY(50%); }
.chart { grid-column:2; grid-row:1; position:relative; display:flex; align-items:flex-end; gap: clamp(.3rem,1vw,1rem); height: 230px; padding-top:var(--chart-pad); box-sizing:border-box; border-bottom:2px solid var(--line); }
.chart::before, .chart::after { content:""; position:absolute; left:0; right:0; border-top:1px dashed var(--line); pointer-events:none; }
.chart::before { top:var(--chart-pad); }
.chart::after { top:calc(50% + (var(--chart-pad) / 2)); }
.chart .bar { flex:1; background: var(--primary); border-radius: 3px 3px 0 0; position:relative; transition: height .8s var(--ease); display:flex; justify-content:center; }
.chart .bar:hover { background: var(--accent); }
.chart .bar span { position:absolute; top:-1.4rem; font-size:.7rem; color:var(--ink); font-weight:600;
  font-variant-numeric:tabular-nums; opacity:0; pointer-events:none; transition:opacity .2s var(--ease); }
.chart .bar:hover span, .chart .bar:focus-visible span { opacity:1; }
.chart-labels { grid-column:2; grid-row:2; display:flex; gap: clamp(.3rem,1vw,1rem); margin-top:.5rem; }
.chart-labels span { flex:1; text-align:center; font-size:.7rem; color:var(--grey); }
.cc-license { display:flex; gap:1rem; align-items:center; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.88rem; color:var(--grey-700); }
.cc-license .cc-icons{ display:flex; gap:.25rem; }
.cc-license .cc-icons span{ width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-weight:700;color:var(--grey-700); }

/* sidebar */
.aside-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.3rem; margin-bottom:1.2rem; box-shadow:var(--shadow-sm); }
.aside-card h4 { font-size:1.02rem; margin:0 0 .8rem; display:flex; align-items:center; gap:.5rem; }
.aside-card h4 svg{ width:1.1em;height:1.1em;color:var(--accent); }
/* Novedades / announcement card (Figma: radius 20, padding 20/40, soft shadow, gap 10) */
.news-card { display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--white); border-radius:20px; padding:20px 40px; margin:0 0 1rem; color:var(--ink);
  box-shadow:3px 3px 3px -3px rgba(0,0,0,.15); transition: transform .2s var(--ease); }
/* r3 (Maria): a subtle scale is the ONLY hover interaction on a news card,
   everywhere the component appears (home + announcements list). */
.news-card:hover { transform: scale(1.015); }
.news-card svg { color:var(--accent); flex-shrink:0; }
.aside-nav { list-style:none; margin:0; padding:0; }
.aside-nav li a { display:block; padding:.4rem 0; color:var(--grey-700); font-size:.92rem; border-bottom:1px dashed var(--line); }
.aside-nav li a:hover{ color:var(--accent); padding-left:.3rem; }
.download-row{ display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; border-bottom:1px solid var(--line-2); font-size:.85rem; }
.download-row b{ color:var(--ink); }
/* "On this page" nav follows the scroll and stays visible (Kerim: click a link → page jumps →
   the nav must move with you / always be visible). For sticky to have travel room, the grid
   cell (.aside) must stretch to the full row height (the shell uses align-items:start). The
   nav + blocks stick together as ONE column (Kerim: "birlikte kaymalı" — they must NOT overlap).
   The cell (.aside) is stretched to the row height so the sticky column has travel room. */
.article-shell .aside { align-self: stretch; }
.is-sticky { position: sticky; top: 96px; }

/* ----------------------------------------------------------------
   12. FOOTER
---------------------------------------------------------------- */
.site-footer { background: var(--white); margin-top: 4em; }   /* r3 */
.footer-grid { display:grid; grid-template-columns: 1.2fr 1fr 1.1fr; gap: clamp(2rem,4vw,4rem); padding-block: clamp(2.5rem,5vw,4.5rem); }
.footer-brand .mark{ width:64px; color:var(--ink); margin-bottom:1rem; }
.footer-brand p{ color:var(--grey-700); font-size:.9rem; max-width:36ch; }
.footer-logo{ width: clamp(110px, 13vw, 150px); height:auto; margin-bottom:1.1rem; }
/* No footer logo uploaded → the journal name stands in as a text wordmark (never an icon). */
.footer-wordmark{ display:block; font-family:var(--font-accent); font-weight:800; font-size:1.35rem;
  line-height:1.15; letter-spacing:-.02em; color:var(--ink); margin-bottom:1.1rem; max-width:22ch; }
.socials{ display:flex; gap:.6rem; margin-top:1rem; }
.socials a{ width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;transition:transform .2s,background .2s; }
.socials a:hover{ background:var(--ink); transform:translateY(-2px); }
.footer-news h3{ font-family: var(--font-accent); font-weight: 600; font-size: 28px;
  line-height: 1; letter-spacing: 0; color: var(--grey); margin: 0 0 .7rem; }
.footer-news form{ display:grid; gap:.6rem; max-width:340px; }
.footer-cta{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(1.5rem,2.4vw,2.1rem); }
.footer-cta .logos{ display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; margin-bottom:1.1rem; }
.footer-cta .logos img{ max-height:46px; max-width:120px; width:auto; height:auto; object-fit:contain; }
.footer-cta p{ font-size:.9rem; color:var(--grey-700); line-height:1.55; }
.footer-cta .btn{ margin-top:.4rem; }
.footer-cta .cta-image{ display:block; width:100%; height:auto; margin-bottom:1.2rem; }
.footer-bottom{ background: var(--accent); color:rgba(255,255,255,.9); text-align:center; font-size:.78rem; padding:.9rem; }   /* r3: side padding so mobile text clears the edge */
.footer-bottom a{ color:#fff; text-decoration:none; }
.footer-bottom a:hover{ font-weight:bold; }

/* ----------------------------------------------------------------
   13. ENTRANCE ANIMATIONS
---------------------------------------------------------------- */
/* The hidden start state needs `pampas-anim` on <html>, which pampas.js sets when it runs:
   without JavaScript (or if the script fails to load) nothing stays hidden. */
.pampas-anim [data-animate]{ opacity:0; transform: translateY(22px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
[data-animate].in{ opacity:1; transform:none; }
[data-animate][data-delay="1"]{ transition-delay:.08s } [data-animate][data-delay="2"]{ transition-delay:.16s }
[data-animate][data-delay="3"]{ transition-delay:.24s } [data-animate][data-delay="4"]{ transition-delay:.32s }
/* Printing (and "save as PDF") shows everything, also what was never scrolled into view. */
@media print { [data-animate]{ opacity:1 !important; transform:none !important; transition:none !important; } }
/* The entrance animation resets `transform` on .in, at the same specificity as a
   plain :hover rule and later in the file — so a card's hover transform has to be
   re-stated here to win. (This is why the old translate-on-hover never fired.) */
.news-card.in:hover { transform: scale(1.015); }

/* ----------------------------------------------------------------
   14. RESPONSIVE  (breakpoints from "About the theme")
   Desktop & widescreen >1366 · Laptop 1201–1366 · Tablet 881–1200 · Mobile <880
---------------------------------------------------------------- */
@media (max-width: 1366px){          /* Laptop */
  :root{ --content-w: 80vw; --content-max: 1180px; }
}
@media (max-width: 1200px){          /* Tablet */
  :root{ --content-w: 80vw; }
  .article-shell{ grid-template-columns: 1fr; }
  /* r3 (Maria): the local article navigation reads as a horizontal row here. */
  .article-toc ul{ display:flex; flex-direction:row; flex-wrap:wrap; gap:20px; }
  .article-shell .aside{ order:-1; }
  .is-sticky{ position:static; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-cta{ grid-column: 1 / -1; }
  /* Maria QA: archive drops to 3 columns at the tablet tier. */
  .cover-grid{ grid-template-columns: repeat(3,1fr); }
  /* Maria QA: intro collapses to 1 column, cover centred at 70%. */
  .intro{ grid-template-columns:1fr; align-items:center; }
  .cover-card{ width:70%; max-width:400px; justify-self:center; }   /* r2 cap */
}
@media (max-width: 880px){           /* Mobile */
  :root{ --content-w: 90vw; --t-l: 1rem; }   /* r3 */
  .cover-card .cover{ max-height:50vh; }     /* r3 */
  body{ font-size:16px; }
  /* Maria QA: cover full-width & centred (was capped at 280px). */
  .intro{ grid-template-columns:1fr; }
  .cover-card{ width:100%; max-width:450px; justify-self:center; }   /* r2 cap */
  .cover-grid{ grid-template-columns: repeat(2,1fr); }
  /* r3 (Maria): the page number stays on the title's row, not below it. */
  .article-row{ grid-template-columns:1fr .1fr; gap:10px; }
  .footer-grid{ grid-template-columns:1fr; }
  .meta-grid{ grid-template-columns: repeat(2,auto); }
  .article-main .article-head{ flex-direction:column; }
}

/* ================================================================
   15. OJS INTEGRATION — style the default-theme markup used on the
   pages Pampas inherits (login, register, about, search, profile…)
   so they stay on-brand: container width, typography, buttons,
   forms, notifications (system feedback), breadcrumbs, pagination,
   sidebar blocks, reader nav, galley links and article prose.
   ================================================================ */
.pkp_structure_page { background: var(--bg); }
.pkp_structure_content { padding-block: clamp(2rem,4vw,3.5rem); }
.pkp_structure_main { float: none; width: auto; }
.pkp_structure_content > .container,
.pkp_structure_head > .container { width: min(var(--content-w), var(--content-max)); margin-inline: auto; }
.page { width: min(var(--content-w), var(--content-max)); margin-inline: auto; }
.pkp_structure_content h1, .page > h1 { font-family: var(--font-accent); font-size: var(--t-h1a); letter-spacing:-.015em; }
.pkp_structure_content h2 { font-family: var(--font-accent); font-size: var(--t-h2a); }

/* Sidebar + blocks */
.pkp_structure_sidebar { padding-left: clamp(1rem,3vw,2.5rem); }
.pkp_block { background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 1.2rem; margin-bottom: 1.2rem; }
.pkp_block .title { font-family: var(--font-accent); font-size: 1.02rem; margin: 0 0 .7rem; }

/* Buttons (default theme + reader toolbar) */
.pkp_button, a.cmp_button, .cmp_button, button.pkp_button,
.pkp_structure_content .btn, input[type="submit"].submitFormButton {
  display:inline-flex; align-items:center; gap:.5rem; background: var(--accent); color:#fff;
  font-family: var(--font-body); font-weight:600; font-size:.92rem; line-height:1;
  padding:.8rem 1.25rem; border:1.5px solid var(--accent); border-radius: var(--radius); transition: all .22s var(--ease);
}
.pkp_button:hover, a.cmp_button:hover, .cmp_button:hover { background: var(--ink); border-color: var(--ink); color:#fff; }

/* Forms */
.pkp_structure_content label { font-weight:600; font-size:.85rem; color: var(--grey-700); }
.pkp_structure_content fieldset { border:1px solid var(--line); border-radius: var(--radius-lg); padding: 1.2rem 1.4rem; }

/* Notifications = system feedback messages (success / error / warning / info) */
.pkp_notification .pkp_notification_content,
ul.pkp_notification li, .cmp_notification {
  border-left:4px solid var(--accent); background: var(--background); color: var(--ink);
  padding:.9rem 1.1rem; border-radius: var(--radius); margin-bottom:1rem; font-size:.95rem;
}
.pkp_notification .success, li.success, .notifySuccess { border-left-color: var(--ok); background: var(--ok-bg); color:#1a5e3a; }
.pkp_notification .warning, li.warning, .notifyError, li.error, .error { border-left-color: var(--err); background: var(--err-bg); color:#8e2c20; }
.pkp_notification .notice, li.notice { border-left-color: var(--warn); background: var(--warn-bg); color:#7c5512; }
.pkp_form .pkp_form_error, .pkp_form .error, span.error { color: var(--err); font-size:.82rem; }

/* Breadcrumbs */
.cmp_breadcrumbs { font-size:.82rem; color: var(--grey); }
.cmp_breadcrumbs a { color: var(--accent); }

/* Pagination (search / lists) */
.cmp_pagination { margin-top: 2rem; }
.cmp_pagination .current, .cmp_pagination a { display:inline-grid; place-items:center; min-width:40px; height:40px; border:1px solid var(--line); border-radius: var(--radius); margin:.15rem; color: var(--grey-700); }
.cmp_pagination .current { background: var(--accent); border-color: var(--accent); color:#fff; }

/* Reader / galley download buttons (inherited article + galley views) */
.obj_galley_link, a.obj_galley_link, .article-galleys a, .download a {
  display:inline-flex; align-items:center; gap:.4rem; background: var(--accent); color:#fff;
  padding:.55rem .9rem; border-radius: var(--radius); font-weight:600; font-size:.85rem; margin:.2rem .3rem .2rem 0; border:0;
}
.obj_galley_link:hover { background: var(--ink); color:#fff; }
.obj_galley_link.pdf::before, .obj_galley_link.file::before { content:""; }

/* Article prose (inherited obj_article_details) */
.obj_article_details .main_entry, .obj_article_details .item.abstract { font-size: 1.02rem; line-height:1.7; }
.obj_article_details .page_title { font-family: var(--font-accent); font-size: var(--t-h2); letter-spacing:-.01em; }
.obj_article_details .item.abstract h2, .obj_article_details .item h3 { font-family: var(--font-accent); }
.obj_article_details .item.references .label { font-family: var(--font-accent); }

/* Issue TOC (inherited) */
.obj_issue_toc h2 { font-family: var(--font-accent); }
.obj_issue_toc .title a { color: var(--ink); } .obj_issue_toc .title a:hover { color: var(--accent); }

/* Tables / blockquotes inside content */
.pkp_structure_content table { border-collapse: collapse; width:100%; }
.pkp_structure_content th, .pkp_structure_content td { border:1px solid var(--line); padding:.6rem .8rem; text-align:left; }
.pkp_structure_content blockquote { border-left:4px solid var(--accent); background: var(--surface); padding:1rem 1.2rem; margin:1.2rem 0; border-radius:0 var(--radius) var(--radius) 0; }

/* ---- Hero slider (1 slide = static, 2+ = carousel) ---- */
.hero[data-hero-slider] .hero-slide { display:none; }
.hero[data-hero-slider] .hero-slide.is-active { display:block; animation: pampasFade .6s var(--ease); }
@keyframes pampasFade { from{ opacity:.35 } to{ opacity:1 } }
.hero-nav { position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:46px; height:46px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.4); backdrop-filter: blur(4px); }
.hero-nav:hover { background:rgba(255,255,255,.32); color:#fff; }
.hero-prev { left: clamp(1rem,3vw,2.5rem); } .hero-next { right: clamp(1rem,3vw,2.5rem); }
@media (max-width: 880px){ .hero-nav{ display:none; } }
.hero[data-hero-slider]{ position:relative; }
.hero[data-hero-slider] .hero-dots{ position:absolute; left:0; right:0; bottom:1.6rem; z-index:3; justify-content:center; }
.hero-has-slider .hero-inner{ min-height: clamp(320px,40vw,520px); }
.page-hero-strip .container{ padding-block: clamp(1.4rem,3vw,2.4rem); }
.header-search{ margin:0; }
@media (max-width: 880px){ .header-cta{ display:none; } }
/* Article hero = teal band showing the SECTION name (shorter than the archive hero) */
.article-hero{ min-height:clamp(220px,34vh,380px); }
.article-hero h1{ font-size:clamp(2.5rem,6vw,4.75rem); max-width:24ch; }

/* Article head: cover + date + share + title + authors */
.article-main .article-head{ display:flex; gap:clamp(1.2rem,2.5vw,2rem); align-items:flex-start; margin-bottom:clamp(1.75rem,3.5vw,2.75rem); }
/* Maria QA: bigger issue cover (~20vw), no border/shadow. */
.article-cover{ display:block; width:clamp(180px,20vw,300px); min-width:20vw; flex-shrink:0; border-radius:var(--radius); overflow:hidden; border:none; box-shadow:none; }
.article-cover img{ display:block; width:100%; height:auto; }
.article-head-body{ min-width:0; }
.article-socials{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
/* Maria QA: smaller social icons — 24px. */
.article-socials a{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff; transition:background .2s var(--ease),transform .2s var(--ease); }
.article-socials a:hover{ background:var(--ink); transform:translateY(-2px); }
.article-socials svg{ width:12px; height:12px; }
/* date + DOI on one row (DOI to the right of the date) */
.article-meta-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1.1rem; margin:0 0 1.1rem; font-size:.9rem; }
.article-date{ font-family:var(--font-body); color:var(--grey-700); }
.article-doi{ color:var(--accent); word-break:break-word; }
.article-doi:hover{ color:var(--ink); text-decoration:none; }
/* r3 (Maria): the section name moved out of the hero onto this row, in bold. */
.article-section-name{ font-family:var(--font-body); font-weight:700; color:var(--ink); }
.article-title{ font-family:var(--font-body); font-weight:700; font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.25; letter-spacing:0; color:var(--ink); margin:0 0 1.15rem; }
/* Authors — Maria QA/Figma: full-width block UNDER keywords, ABOVE abstract.
   Name Bricolage 700/18 + ORCID iD icon, affiliation Inter 400/12. */
.article-authors{ display:flex; flex-direction:column; gap:.85rem; margin:0 0 clamp(1.5rem,3vw,2.5rem); }
.article-authors .author{ display:flex; flex-direction:column; gap:.18rem; }
.article-authors .author-line{ display:flex; align-items:center; gap:.4rem; }
.article-authors .author-name{ font-family:var(--font-accent); font-weight:700; font-size:18px; line-height:1.1; color:var(--ink); }
.article-authors .author-orcid{ display:inline-flex; flex-shrink:0; }
.article-authors .author-orcid svg{ width:16px; height:16px; display:block; }
.article-authors .author-aff{ font-family:var(--font-body); font-weight:400; font-size:12px; line-height:1.3; color:var(--grey-700); }

/* Content sections + gray headings */
/* jump-to-section (On this page) must clear the sticky header + leave generous breathing room */
.article-section{ margin-top:6em; scroll-margin-top:140px; }   /* r3 */
/* Maria QA: no underline beneath section headings. */
.article-h{ font-family:var(--font-accent); font-weight:600; font-size:clamp(1.5rem,2.8vw,2rem); line-height:1.1; letter-spacing:0; color:var(--grey-500); margin:0 0 1rem; padding-bottom:0; border-bottom:none; }   /* r3 */
/* Keywords — pill buttons below the author block (Figma: ~25px tall, 4px radius, 1px border) */
.article-keywords{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.15rem; }
/* Maria QA: keyword pills are UPPERCASE. */
.kw-pill{ display:inline-flex; align-items:center; height:25px; padding:1px 10px 0 10px; border:1px solid #222222; border-radius:4px; background:transparent; font-family:var(--font-body); font-size:.78rem; line-height:1; text-transform:uppercase; color:#222222; transition:background .2s var(--ease),color .2s var(--ease); }
.kw-pill:hover{ background:transparent; color:var(--accent); border-color:var(--accent); }

/* Descargas stats */
.dl-stats{ display:flex; gap:2.5rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.dl-stat{ display:flex; flex-direction:column; }
.dl-stat b{ font-family:var(--font-accent); font-weight:700; font-size:1.8rem; line-height:1; color:var(--ink); }
.dl-stat span{ font-size:.82rem; color:var(--grey-700); margin-top:.3rem; }

/* Prev / next */
.article-pn{ display:flex; justify-content:space-between; gap:1rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.9rem; }
.article-pn a{ color:var(--grey-700); } .article-pn a:hover{ color:var(--accent); }
.article-pn .pn-next{ text-align:right; margin-left:auto; }

/* Right column — article section nav (the only article-owned block) */
.article-toc{ border-left:2px solid var(--accent); padding:.2rem 0 .2rem 1.1rem; }
.article-toc-head{ font-family:var(--font-accent); font-weight:600; font-size:1.35rem; line-height:1.15; letter-spacing:0; text-transform:none; color:var(--grey-500); margin:0 0 .9rem; }   /* r3 */
.article-toc ul{ list-style:none; margin:0; padding:0; }
.article-toc li a{ display:block; padding:.35rem 0; color:var(--ink); font-size:.92rem; }   /* r3 */
.article-toc li a:hover{ color:var(--accent); font-weight:700; }   /* r3: no shift, weight instead */
/* OJS classic sidebar blocks (showSiteSidebar) — restyled to match the theme */
.site-blocks{ margin-top:1.75rem; }
.site-blocks .pkp_block{ background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; padding:1.4rem 0 0; margin:1.4rem 0 0; }
.site-blocks > .pkp_block:first-child{ border-top:0; padding-top:0; margin-top:0; }
.site-blocks .pkp_block .title{ font-family:var(--font-accent); font-weight:600; font-size:1.35rem; line-height:1.15; letter-spacing:0; text-transform:none; color:var(--grey); margin:0 0 .9rem; }
.site-blocks .pkp_block ul{ list-style:none; margin:0; padding:0; }
.site-blocks .pkp_block li{ margin:0; }
.site-blocks .pkp_block li a{ display:block; padding:.32rem 0; color:var(--grey-700); font-size:.9rem; line-height:1.45; }
.site-blocks .pkp_block li a:hover{ color:var(--accent); }
.site-blocks .pkp_block p{ font-size:.88rem; color:var(--grey-700); margin:0 0 .5rem; line-height:1.5; }
.site-blocks .pkp_block a{ color:var(--accent); }
/* Keyword cloud renders as an SVG <text> cloud — theme its fill (drop the rainbow),
   keep the frequency-based size variation. CSS fill beats the inline presentation attr. */
.site-blocks .block_Keywordcloud text{ fill:var(--grey-700) !important; }
.site-blocks .block_Keywordcloud text:hover{ fill:var(--accent) !important; cursor:pointer; }
.site-blocks .block_Keywordcloud a{ color:var(--grey-700) !important; }
/* Most Read Articles — clear list: article icon per row + eye icon on the view count
   (the block ships a Font Awesome <span class="fa fa-eye"> that the theme doesn't load) */
.site-blocks .block_developed_by ul{ list-style:none; margin:0; padding:0; }
.site-blocks .block_developed_by li{ padding:.65rem 0; border-bottom:1px solid var(--line-2); }
.site-blocks .block_developed_by li:last-child{ border-bottom:0; padding-bottom:0; }
.site-blocks .most_read_article_title{ display:flex; align-items:flex-start; gap:.55rem; }
.site-blocks .most_read_article_title::before{ content:""; flex:0 0 auto; width:14px; height:14px; margin-top:.18em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230A818A'%3E%3Cpath d='M12 2l2.9 5.88 6.49.94-4.7 4.58 1.11 6.46L12 17.3l-5.8 3.05 1.11-6.46-4.7-4.58 6.49-.94z'/%3E%3C/svg%3E") no-repeat center/contain; }
.site-blocks .most_read_article_title a{ color:var(--ink); font-size:.9rem; line-height:1.4; }
.site-blocks .most_read_article_title a:hover{ color:var(--accent); }
.site-blocks .most_read_article_journal{ display:flex; align-items:center; gap:.35rem; padding-left:calc(14px + .55rem); margin-top:.3rem; font-size:.82rem; color:var(--grey); }
.site-blocks .most_read_article_journal .fa-eye{ display:inline-block; width:14px; height:14px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E8E' stroke-width='2'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center/contain; }

/* Single-column reading width when there is no right column */
.article-shell--solo{ grid-template-columns:1fr; }

/* OJS recommendation block (Similar Articles) — now contained in .container; themed */
.article-similar h3{ font-family:var(--font-accent); font-weight:600; font-size:clamp(1.5rem,2.8vw,2rem); line-height:1.1; letter-spacing:0; color:var(--grey); margin:0 0 1.2rem; padding-bottom:.5rem; border-bottom:1px solid var(--line); }
.article-similar ul{ list-style:none; margin:0; padding:0; }
.article-similar li{ padding:.85rem 0; border-bottom:1px solid var(--line-2); }
.article-similar .similar-authors{ font-family:var(--font-body); font-size:.85rem; color:var(--grey-700); margin-bottom:.3rem; }
.article-similar .similar-meta{ font-family:var(--font-body); font-size:.95rem; line-height:1.5; color:var(--grey-700); }
.article-similar .similar-meta a{ color:var(--grey-700); }
.article-similar .similar-meta a:first-of-type{ color:var(--ink); font-weight:700; }
.article-similar .similar-meta a:hover{ color:var(--accent); }
.article-similar p{ font-size:.9rem; color:var(--grey-700); margin:1.1rem 0 0; }
.article-similar p a{ color:var(--accent); }
/* Cap each recommendation list (Similar + same-author) to 5 items, drop the pager,
   and space the two plugin sections apart */
.article-similar ul li:nth-child(n+6){ display:none; }
.article-similar ul + p, .article-similar ul + div{ display:none; }
.article-similar .container > div + div{ margin-top:clamp(2.2rem,4vw,3.2rem); }
/* keep both section headings the same gray (recommendBySimilarity wraps its title in a link) */
.article-similar h3 a{ color:inherit; text-decoration:none; }

/* ---- Primary nav dropdowns (OJS {load_menu} nested <ul>) ---- */
.menu, .menu ul { list-style:none; }
.menu > li { position:relative; }
.menu ul { position:absolute; top:calc(100% + 6px); left:0; min-width:230px; margin:0;
  display:none; z-index:60; }   /* r4: matches the language / account dropdowns */
/* That 6px gap would otherwise be a dead zone the cursor crosses on its way
   down, closing the menu — the same invisible bridge the language menu uses. */
.menu > li { position:relative; }
.menu ul::before { content:""; position:absolute; left:0; right:0; top:-9px; height:9px; }
/* r4: .is-open is the tap equivalent of :hover — a parent that owns a dropdown
   no longer navigates, so on touch the panel has to open from the tap. */
.menu li:hover > ul, .menu li:focus-within > ul, .menu li.is-open > ul { display:block; }
.menu ul li { width:100%; }
.menu ul a { display:block; padding:.55rem 1.1rem; text-transform:none; letter-spacing:0; font-weight:500; font-size:.9rem; }
.menu ul a::after { display:none; }

/* ── r3 (Maria): the nav dropdown, the language menu and the user menu are ONE
   component. Panel, item, hover and current-item state live here only, so a
   change to one is a change to all three. Declared before the mobile block
   below, which deliberately flattens the panel inside the burger menu. ── */
.menu ul, .lang-menu, .user-dropdown { background:var(--ink); border:none;
  border-radius:var(--radius-lg); padding:.35rem; box-shadow:var(--shadow); }
.menu ul a, .lang-menu a, .user-dropdown a { color:#fff; border-radius:var(--radius); }
.menu ul a:hover, .lang-menu a:hover, .user-dropdown a:hover { background:rgba(255,255,255,.12); color:#fff; }
/* "You are here" — set on the open page's item (see pampas.js). */
/* The panel is --ink, so a very dark admin Primary would read as no highlight
   at all; the hairline ring keeps the selected item legible either way. */
.menu ul a.active, .lang-menu a.on { background:var(--primary); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
/* Collapse the nav into a hamburger at/below 1200px (Tablet + Mobile) — long
   menus get a clean dropdown panel instead of cramping. Above 1200 (Laptop +
   Desktop) the full menu wraps centered. */
@media (max-width: 1200px){
  .menu { display:none; }
  .nav-toggle { display:grid; }
  /* Dark rounded dropdown panel, inset from the tablet viewport edges. */
  /* r3 (Maria): breathing room between items, and a long menu scrolls inside a
     fixed panel height instead of running off the screen. */
  .menu.open { display:flex; flex-wrap:nowrap; position:absolute; left:10vw; right:10vw; top:calc(100% + .4rem); flex-direction:column; gap:20px; background:var(--ink); border-bottom:none; box-shadow:none; border-radius:20px 0 20px 20px; padding:.6rem 0; overflow:hidden auto; max-height:min(600px, 70vh); }
  .menu.open li { width:100%; display:flex; flex-direction:column; gap:10px; }
  /* Larger, sentence-case, white links on the black panel. */
  .menu a { font-size:1.5em; letter-spacing:0; text-transform:none; color:#fff; }
  .menu.open a { display:block; padding:.25em 1em; width:100%; white-space:normal; }
  .menu.open a:hover, .menu.open a.active { color:#fff; opacity:.75; }
  .menu.open a::after { display:none; }
  /* r3 (Maria): sub-items read as part of the dark panel — no white box, and a
     size that sits under the parent item rather than shrinking away. */
  .menu.open ul { position:static; display:block; background:transparent; box-shadow:none; border:0; border-radius:0; padding:0 0 0 1rem; min-width:0; }
  .menu.open ul a { font-size:1em; }
  .menu.open > li { width:100%; }
}
/* Narrower inset on phones. */
@media (max-width: 880px){
  .menu.open { left:5vw; right:5vw; }
}

/* ================================================================
   16. SECONDARY PAGES (about, contact, search, login, register, 404…)
   ================================================================ */
.pampas-page { max-width: 80ch; }
.pampas-page h2 { font-family:var(--font-accent); font-size:var(--t-h2a); margin-top:2rem; }
.pampas-page h3 { font-family:var(--font-accent); }
.pampas-page img { border-radius: var(--radius); }
.pampas-page table { border-collapse:collapse; width:100%; }
.pampas-page th, .pampas-page td { border:1px solid var(--line); padding:.6rem .8rem; }

/* Auth (login / register / lost password) */
.auth-wrap { max-width: 480px; margin-inline:auto; }
.auth-wrap.wide { max-width: 760px; }
.auth-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.5rem,4vw,2.6rem); box-shadow:var(--shadow-sm); }
.auth-card .field { margin-bottom:1.05rem; }
.auth-card label { display:block; }
.auth-card label .label { display:block; font-weight:600; font-size:.85rem; margin-bottom:.35rem; color:var(--grey-700); }
.auth-card .checkbox label { display:flex; align-items:center; gap:.5rem; font-size:.92rem; }
.auth-card .checkbox .label { margin:0; font-weight:500; }
.auth-card .buttons { display:flex; align-items:center; gap:1rem; margin-top:1.3rem; flex-wrap:wrap; }
.auth-card .forgot { font-size:.82rem; margin-top:.4rem; display:inline-block; }
.auth-aside { color:var(--grey-700); font-size:.92rem; margin-top:1.2rem; text-align:center; }
.auth-card fieldset { border:0; padding:0; margin:0; }

/* ── Login page (Maria QA / Figma): a full-bleed background — the admin image,
   or the accent colour when none is set — with a white card floating on the
   right. Scoped to .auth-hero so register / lost-password keep the centred
   card. Big "Entrar" title, stacked Primary + Secondary buttons. ── */
/* r4 (Maria): the negative margin cancels .site-footer's 4em top margin, so the
   full-bleed image runs straight into the footer with no white band. */
.auth-hero{ position:relative; background:var(--accent); background-size:cover; background-position:center; background-repeat:no-repeat;
  display:flex; align-items:center; min-height:calc(100vh - 72px); padding:clamp(2rem,6vh,5rem) 0;
  margin-bottom:-4em; }
.auth-hero-inner{ width:min(92vw, var(--content-max)); margin-inline:auto; display:flex; justify-content:flex-end; }
/* r2: keep the auth card inside the page margins at every tier */
@media (min-width:1367px){ .auth-hero-inner{ max-width:70vw; } }
@media (min-width:1201px) and (max-width:1366px){ .auth-hero-inner{ max-width:80vw; } }
@media (min-width:881px)  and (max-width:1200px){ .auth-hero-inner{ max-width:80vw; } }
@media (max-width:880px){ .auth-hero-inner{ max-width:90vw; } }
.auth-hero .auth-card{ width:min(100%, 430px); border:none; box-shadow:var(--shadow); padding:clamp(1.9rem,3vw,3rem); }
/* r4 (Maria): login, register and 404 had three different H1 treatments. One
   definition now covers all three. (.error-title keeps the body.pampas prefix
   so it still beats the error-page plugin's own fallback <style>.) */
.auth-title, body.pampas .error-title{ font-family:var(--font-accent); font-weight:bold; font-size:3em;
  line-height:1; letter-spacing:-.01em; color:var(--grey-500); margin:0 0 1.6rem; }
/* login: stacked full-width buttons (register keeps auto-width — see .is-center) */
.auth-hero:not(.is-center) .auth-card .buttons{ flex-direction:column; align-items:stretch; gap:.7rem; margin-top:1.5rem; }
[dir="rtl"] .auth-hero-inner{ justify-content:flex-start; }

/* Register (Maria QA / Figma): same full-bleed hero, but the card is CENTRED
   and WIDE, and the core registration fields lay out as a 2-column grid. */
.auth-hero.is-center .auth-hero-inner{ justify-content:center; }
.auth-hero .auth-card.auth-card--wide{ width:min(100%, 780px); }
.register .identity, .register .login{ border:0; padding:0; margin:0; }
.register legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } /* hide profile/login legends, keep for a11y */
.register .fields{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.4rem; margin-bottom:1rem; }
.register .fields > div{ min-width:0; }
/* Plugin-added single-field groups (ORCID iD, phone…) span the full width
   instead of leaving an empty second column. */
.register .fields > div:only-child{ grid-column:1 / -1; }
.register .fields label{ display:block; }
.register .fields .label{ display:block; font-weight:600; font-size:.85rem; margin-bottom:.35rem; color:var(--grey-700); }
.register .fields input, .register .fields select{ width:100%; }
.register .fields .required{ color:var(--accent); }
.register .consent{ border:0; padding:0; margin:.4rem 0 0; display:flex; flex-direction:column; gap:.6rem; }
.register .consent .checkbox label{ display:flex; align-items:flex-start; gap:.5rem; font-size:.9rem; color:var(--grey-700); }
.register .consent .checkbox .label{ margin:0; font-weight:500; }
.register .buttons{ margin-top:1.4rem; }
.auth-switch{ margin-top:1.6rem; display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }
.auth-switch p{ margin:0; color:var(--grey-700); font-size:.92rem; }
/* r4 (Maria): the form error summary reads as a sentence, not a bulleted list. */
ul.pkp_form_error_list { list-style-type:none; padding-left:0; font-weight:bold; line-height:1.3em; margin-top:2px; }
ul.pkp_form_error_list li a { color:var(--err); }
@media (max-width:640px){ .register .fields{ grid-template-columns:1fr; } }

@media (max-width:880px){ .auth-hero-inner{ justify-content:center; } .auth-hero .auth-card{ width:100%; } }

/* ── Themed 404 (Themed Error Pages plugin) — Maria QA / Figma: same full-bleed
   hero as login, with a light card floating on the right showing "Error 404".
   Scoped as body.pampas to override the plugin's neutral fallback <style>. ── */
body.pampas .error-hero{ position:relative; background:var(--accent); background-size:cover; background-position:center; background-repeat:no-repeat;
  display:flex; align-items:center; min-height:calc(100vh - 72px); padding:clamp(2rem,6vh,5rem) 0;
  margin-bottom:-4em; }   /* r4 */
body.pampas .error-hero-inner{ width:min(92vw, var(--content-max)); max-width:none; margin-inline:auto; display:flex; justify-content:flex-end; }
body.pampas .error-card{ width:min(100%, 460px); background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:clamp(2rem,3.5vw,3.4rem); text-align:left; }
body.pampas .error-msg{ color:var(--grey-700); font-size:1.05rem; opacity:1; margin:0 0 1.7rem; max-width:34ch; }
[dir="rtl"] body.pampas .error-hero-inner{ justify-content:flex-start; }
@media (max-width:880px){ body.pampas .error-hero-inner{ justify-content:center; } body.pampas .error-card{ width:100%; } }

/* Contact */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin-top:1.5rem; }
.contact-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.4rem; box-shadow:var(--shadow-sm); }
.contact-card h3 { font-family:var(--font-accent); font-size:1.05rem; margin:0 0 .7rem; display:flex; align-items:center; gap:.5rem; }
.contact-card .name { font-weight:600; }
.contact-card .row { color:var(--grey-700); font-size:.92rem; margin-top:.3rem; }

/* Search */
.search-form { margin-bottom:2.5rem; }   /* r3: uses the full content column */
.search-form .query-row { display:flex; gap:.6rem; }
.search-form .query-row input { flex:1; }
/* r3 (Maria): no filter box — just fields. The date groups keep their
   From / To legends (they are the only labels the mockup shows). */
.search-form .field { margin-top:.6rem; }
.search-form .search-dates { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.2rem; }
.search-form fieldset { display:grid; gap:.5rem; border:0; padding:0; margin:0; }
.search-form legend { font-family:var(--font-accent); font-weight:600; padding:0; margin-bottom:.2rem; }
.search-form fieldset select { width:100%; }
@media (max-width:880px){ .search-form .search-dates { grid-template-columns:1fr; } }
.search-results { list-style:none; padding:0; margin:0; }
.search-results > li { border-top:1px solid var(--line); padding:1.3rem 0; }
.search-results > li:last-child { border-bottom:1px solid var(--line); }

/* 404 / error */
.error-hero { text-align:center; padding-block:clamp(3rem,9vw,7rem); }
.error-hero .code { font-family:var(--font-accent); font-weight:800; font-size:clamp(4.5rem,16vw,10rem); line-height:.9; color:var(--accent); letter-spacing:-.04em; }
.error-hero p { color:var(--grey-700); max-width:46ch; margin:1rem auto 1.6rem; }

/* ================================================================
   17. HOME refinements (match Figma HOME/Desktop)
   ================================================================ */
/* Journal metric chips in the intro */
.metric-chips { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.3rem; }
/* Maria QA: chips use the secondary tint, no border, black text. */
.metric-chips .chip { background:var(--secondary); border:none; border-radius:var(--radius);
  padding:.5rem .9rem; font-size:.82rem; font-weight:600; color:var(--ink); }

/* Current issue — section group headings (ARTÍCULOS, COMUNICACIONES BREVES…) */
.toc-group { margin-top: 1.8rem; }
/* Maria QA: the section title is an H3 — black, 1em, no tracking, sits on its rule. */
.toc-group-head { display:inline-block; font-family:var(--font-body); text-transform:uppercase; letter-spacing:0; font-size:1em;
  font-weight:700; color:var(--ink); border-bottom:2px solid #222222; padding-bottom:0; margin:0 0 .25rem; }

/* article row: dual-language galley buttons sit inline */
.article-row .galleys { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }


/* ================================================================
   18. Header language + profile dropdowns (match Figma header)
   ================================================================ */
.nav-primary { flex:1 1 auto; min-width:0; display:flex; justify-content:center; }
.lang-switch, .user-menu { position: relative; display:flex; align-items:center; }
.lang-current { display:inline-flex; align-items:center; gap:.3rem; background:transparent; border:0;
  font-family:var(--font-body); font-weight:700; font-size:.82rem; letter-spacing:.06em; color:var(--ink); padding:.5rem .35rem; cursor:pointer; }
.lang-current svg { transition: transform .2s var(--ease); }
.lang-switch:hover .lang-current svg, .lang-switch:focus-within .lang-current svg { transform: rotate(180deg); }
.lang-menu, .user-dropdown { position:absolute; top:calc(100% + 6px); right:0; min-width:64px;
  display:none; z-index:70; }
/* transparent bridge across the 6px gap so moving the cursor into the menu
   never crosses a non-hover dead zone (kept the menu unreachable before) */
.lang-menu::before, .user-dropdown::before { content:""; position:absolute; left:0; right:0; top:-9px; height:9px; }
.lang-switch:hover .lang-menu, .lang-switch:focus-within .lang-menu,
.user-menu:hover .user-dropdown, .user-menu:focus-within .user-dropdown { display:block; }
.lang-menu a, .user-dropdown a { display:block; padding:.55rem .85rem;
  font-size:.85rem; font-weight:600; letter-spacing:.05em; }
.lang-menu a::after, .user-dropdown a::after { display:none; }
/* r3 (Maria): language items are centred (they are 2-letter codes); the user
   menu keeps its left alignment because its items are full words. */
.lang-menu a { text-align:center; }
.user-dropdown { min-width:200px; }
.user-dropdown a { letter-spacing:0; }

/* Intro description justified; arrow links keep text + arrow on one line */
/* Maria QA: left-aligned, no hyphenation. `start` keeps it left in LTR and
   correctly flips to right under [dir=rtl] (Arabic). */
.intro-body .lead { text-align: start; hyphens: none; }
/* r3 (Maria): links inside OJS' "Additional content" are journal-authored HTML,
   so we cannot put a class on them — they join the arrow-link style here instead.
   Same single source of truth, nothing for the admin to hand-write. */
.link-arrow, .additional-content p > a { display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-accent); font-weight:700; color:var(--accent); }
.link-arrow { white-space:nowrap; }
.link-arrow svg { width:1.05em; height:1.05em; flex:0 0 auto; }
.link-arrow:hover, .additional-content p > a:hover { color:#000; }

/* Header is contained to the same reading column as the body (logo aligns with
   the content; menu stays grouped and wraps centered if long) — NOT full-bleed.
   Only the hero image + wordmark break wider than this column. */
.menu a { white-space: nowrap; }

/* r3 (Maria): "you are here" inside the burger menu — the matched sub-item keeps
   its background rather than the panel's dimmed-link treatment. */
@media (max-width: 1200px){
  .menu.open ul a.active { background:var(--primary); color:#fff; opacity:1; }
}

/* ================================================================
   19. STANDALONE GALLEY READER  (pdfJsViewer / htmlArticleGalley)
   These plugins render their OWN minimal page — no theme header or
   footer — and rely on the ACTIVE THEME to supply the top bar and a
   full-height container. Pampas replaces the parent theme's
   stylesheet entirely, so without these rules the reader fell back to
   its inline min-height:500px (a PDF shown in half a screen) and the
   bar rendered as three bare links. The page has no `pampas` body
   class, so nothing here may be scoped to it.
   ================================================================ */
.header_view{ position:relative; z-index:2; display:flex; align-items:center; gap:1rem;
  height:56px; padding-inline:clamp(.75rem,2vw,1.5rem); background:var(--ink); color:#fff; }
.header_view a{ text-decoration:none; }
.header_view .return{ flex:0 0 auto; width:36px; height:36px; border-radius:var(--radius);
  background-color:rgba(255,255,255,.12); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:20px 20px;
  transition:background-color .2s var(--ease); }
.header_view .return:hover{ background-color:rgba(255,255,255,.24); }
.header_view .title{ flex:1 1 auto; min-width:0; color:#fff; font-family:var(--font-accent);
  font-weight:600; font-size:1rem; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.header_view .title:hover{ color:#fff; opacity:.8; }
.header_view .download{ flex:0 0 auto; background:var(--accent); color:#fff;
  font-family:var(--font-accent); font-weight:600; font-size:.85rem; line-height:1;
  padding:.6rem .95rem; border-radius:var(--radius);
  transition:background .2s var(--ease), color .2s var(--ease); }
.header_view .download:hover{ background:#fff; color:var(--ink); }

.galley_view{ display:flex; flex-direction:column; width:100%;
  height:calc(100vh - 56px); background:var(--background); }
.galley_view iframe{ flex:1 1 auto; width:100%; border:0; display:block; }
/* Viewing an older version of the record — the plugin prints a notice above the file. */
.galley_view_notice{ flex:0 0 auto; }
.galley_view_notice_message{ background:var(--warn-bg); color:#7c5512;
  border-left:4px solid var(--warn); padding:.7rem 1.1rem; font-size:.9rem; }