/* ═══════════════════════════════════════════════════════════════════════
   SPORT AND PEACE — Organismo del Deporte de la OMPP WOFP
   Institutional stylesheet

   01  Fonts
   02  Design tokens
   03  Reset & base
   04  Layout primitives
   05  Typography
   06  Rules & reveal motion
   07  Buttons
   08  Header · navigation · language
   09  Mobile navigation
   10  Hero
   11  Origen
   12  Split sections (libro · presidencia · votación)
   13  Colophon
   14  Impacto — figures & globe
   15  Autoridades
   16  Sitios oficiales
   17  Footer
   18  Back to top
   19  Responsive
   20  Reduced motion & print
   21  Proyectos y reconocimientos
   22  Páginas interiores
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ 01 · FONTS ═══════════════════════════════════════════════════════ */

@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-400-normal-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-400-normal-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-400-italic-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-400-italic-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-400-normal-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-400-normal-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ═══ 02 · DESIGN TOKENS ═══════════════════════════════════════════════ */

:root {
  /* Colour */
  --papel:      #FAF9F7;
  --papel-alt:  #F2F0EC;
  --tinta:      #0D1B2A;
  --azul:       #16345C;
  /* Greys are chosen against the ground they actually sit on, so caption-sized
     text clears WCAG AA everywhere: 4.98:1 on --papel, 4.60:1 on --papel-alt. */
  --gris:       #5A6F7E;
  --gris-light: #A3ACB8;   /* 7.6:1 on --tinta */
  --linea:      #DCD8D1;
  --linea-soft: #E7E4DE;
  --linea-dark: #1E3350;
  --oro:        #A9853F;
  /* Gold is a rule and marker colour; at small type it only clears 3.2:1, so
     text-sized gold uses this darker tone (4.9:1 on paper, 4.5:1 on the alt ground). */
  --oro-texto:  #866932;

  /* Type */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.6rem, 1.4rem + 4.6vw, 4.75rem);
  --fs-h1:      clamp(1.95rem, 1.25rem + 2.4vw, 3.15rem);
  --fs-h2:      clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
  --fs-figure:  clamp(2.7rem, 1.6rem + 3.6vw, 4.25rem);
  --fs-lead:    clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);
  --fs-body:    clamp(1.0rem, 0.95rem + 0.26vw, 1.1875rem);
  --fs-small:   clamp(0.9375rem, 0.9rem + 0.16vw, 1rem);
  --fs-caption: 0.875rem;
  --fs-meta:    0.8125rem;

  /* Spacing (8px base) */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 1rem;    --s-4: 1.5rem;
  --s-5: 2rem;     --s-6: 3rem;     --s-7: 4rem;    --s-8: 6rem;
  --s-9: 8rem;     --s-10: 10rem;   --s-11: 12.5rem;

  --section-y:  clamp(4.5rem, 2.5rem + 7vw, 10rem);
  --section-y-l: clamp(5.5rem, 3rem + 9vw, 12.5rem);

  /* Layout */
  --wrap-max: 1440px;
  --gutter:   clamp(1.5rem, 0.4rem + 4.4vw, 10rem);
  --measure:  34rem;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  0.7s;
  --header-h: 5.5rem;
}


/* ═══ 03 · RESET & BASE ════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
hr { border: 0; margin: 0; }

:focus-visible {
  outline: 3px solid var(--oro-texto);
  outline-offset: 3px;
}

::selection { background: var(--tinta); color: var(--papel); }

.skip-link {
  position: fixed; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--tinta); color: var(--papel);
  padding: 0.9rem 1.5rem;
  font-size: var(--fs-meta); letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translateY(0); }


/* ═══ 04 · LAYOUT PRIMITIVES ═══════════════════════════════════════════ */

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--papel { background: var(--papel); }
.section--alt   { background: var(--papel-alt); }
.section--tinta { background: var(--tinta); color: var(--papel); }

.section--flagship { padding-block: var(--section-y-l) var(--section-y); }
.section--president { padding-block: var(--section-y) var(--section-y-l); }

/* the two dark sections read as one chapter, divided by a single rule */
.section--president::before {
  content: "";
  position: absolute; inset-inline: var(--gutter); top: 0;
  height: 1px; background: var(--linea-dark);
}

.section--tinta .eyebrow,
.section--tinta .meta,
.section--tinta .caption { color: var(--gris-light); }


/* ═══ 05 · TYPOGRAPHY ══════════════════════════════════════════════════ */

.eyebrow {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: var(--s-6);
}

.meta {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.h1 {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.h1 em { font-style: italic; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 32rem;
  color: var(--tinta);
}

.body {
  font-size: var(--fs-body);
  line-height: 1.65;
  max-width: var(--measure);
  text-wrap: pretty;
}
/* Work titles are set in the serif italic. The line-height is compensated so the
   larger optical size never opens up the leading of the line it sits on. */
.body em, .lead em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05em;
  line-height: 1.56;
}
.body + .body { margin-top: var(--s-4); }

.caption {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--gris);
  max-width: 26rem;
}


/* ═══ 06 · RULES & REVEAL MOTION ═══════════════════════════════════════ */

.rule {
  height: 1px;
  width: 100%;
  background: var(--linea);
  margin-block: var(--s-5);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--ease);
}
.rule.is-visible { transform: scaleX(1); }
.rule--dark { background: var(--linea-dark); }
.rule--gold { background: var(--oro); width: 3.5rem; }
.section--tinta .rule { background: var(--linea-dark); }

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.rule.reveal { transform: scaleX(0); }
.rule.reveal.is-visible { opacity: 1; transform: scaleX(1); }

@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
  .rule   { transform: scaleX(1); }
}


/* ═══ 07 · BUTTONS ═════════════════════════════════════════════════════ */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-7);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: 0.9rem 2.4rem;
  border: 1px solid var(--tinta);
  border-radius: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.btn--solid { background: var(--tinta); color: var(--papel); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--azul); border-color: var(--azul); }
.btn--ghost { color: var(--tinta); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--tinta); color: var(--papel); }


/* ═══ 08 · HEADER · NAVIGATION · LANGUAGE ══════════════════════════════ */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: saturate(120%) blur(14px);
  -webkit-backdrop-filter: saturate(120%) blur(14px);
  border-bottom-color: var(--linea);
}

.site-header__inner {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  transition: min-height 0.4s var(--ease);
}
.site-header.is-scrolled .site-header__inner { min-height: 4.25rem; }

/* Lockup: official emblem, cropped from the horizontal logo, + typographic name */
.lockup { display: flex; align-items: center; gap: 0.85rem; min-height: 44px; margin-right: auto; }

.lockup__mark {
  display: block;
  width: 2.375rem;
  aspect-ratio: 1;
  flex: none;
  transition: width 0.4s var(--ease);
}
.lockup__mark picture, .lockup__mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.site-header.is-scrolled .lockup__mark { width: 2rem; }

.lockup__type { display: flex; flex-direction: column; line-height: 1.15; }
.lockup__name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
}
.lockup__parent {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gris);
  margin-top: 0.15rem;
}

.nav__list { display: flex; gap: clamp(1.25rem, 1.8vw, 2.25rem); }
.nav__list a {
  position: relative;
  display: block;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta);
  padding-block: 0.65rem;
  transition: color 0.35s var(--ease);
}
/* the underline is drawn, not switched on: it grows from the left edge */
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.3rem;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s var(--ease);
}
.nav__list a:hover::after,
.nav__list a:focus-visible::after { transform: scaleX(1); }
.nav__list a.is-current { color: var(--azul); }
.nav__list a.is-current::after { background: var(--linea); transform: scaleX(1); }

.header__aside { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.75rem); }

/* Language control — a two-state register, not a toggle button */
.lang { display: flex; align-items: center; gap: 0.75rem; }
.lang__btn {
  position: relative;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gris);
  padding: 0.55rem 0.2rem;
  transition: color 0.28s var(--ease);
}
.lang__btn::after {
  content: "";
  position: absolute;
  left: 0.2rem; right: 0.2rem; bottom: 0.3rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.42s var(--ease);
}
/* Invisible vertical extension of the hit area — the visual box is unchanged,
   and the width is left alone so the two buttons never overlap. */
/* 44x44 hit area centred on the two-letter label, without widening the rule below it. */
.lang__btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.lang__btn:hover { color: var(--tinta); }
.lang__btn:hover::after { transform: scaleX(1); background: var(--oro); }
.lang__btn.is-active { color: var(--tinta); font-weight: 600; }
.lang__btn.is-active::after { transform: scaleX(1); background: var(--oro); }
.lang__sep { width: 1px; height: 0.7rem; background: var(--linea); }

.lang--footer .lang__btn { color: var(--gris-light); }
.lang--footer .lang__btn:hover,
.lang--footer .lang__btn.is-active { color: var(--papel); }
.lang--footer .lang__sep { background: var(--linea-dark); }

.menu-toggle {
  display: none;
  min-height: 44px;
  padding: 0.5rem 0.4rem;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* the rule stays tight under the word while the button keeps a 44px target */
.menu-toggle span { display: inline-block; padding-bottom: 0.3rem; border-bottom: 1px solid var(--linea); }


/* ═══ 09 · MOBILE NAVIGATION ═══════════════════════════════════════════ */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--papel);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.mobile-nav.is-open { opacity: 1; }
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav li + li { border-top: 1px solid var(--linea); }
.mobile-nav a {
  display: block;
  padding: 1.15rem 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.2;
}


/* ═══ 10 · HERO ════════════════════════════════════════════════════════ */

/* The masthead sits on paper, never over the image: the hero grid begins
   below it so the header can stay genuinely transparent at rest. */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: var(--header-h);
  /* Above the container width the hero would otherwise start at the raw gutter
     while every section below starts at the centred container edge, breaking the
     single left axis the document is built on. This restores it. */
  padding-left: max(0px, calc((100% - var(--wrap-max)) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  background: var(--papel);
  overflow: hidden;
}

.hero__text {
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 5rem)
           clamp(4rem, 8vw, 7rem) var(--gutter);
  max-width: 46rem;
}
.hero__text .eyebrow { margin-bottom: var(--s-5); }

.hero__title,
.page-intro__title {
  font-family: var(--serif);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: var(--s-3);
}

.hero__subtitle {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.28;
  color: var(--azul);
  max-width: 30ch;
  text-wrap: balance;
}

.hero .rule--gold { margin-block: var(--s-6) var(--s-5); }

/* The opening carries the emblem alone on a quiet panel: the identity leads, and
   no single project stands in for the whole organization. */
.hero__emblem {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: var(--s-7) var(--gutter);
  background: var(--papel-alt);
  box-shadow: -1px 0 0 var(--linea);   /* crisp paper-to-panel edge, no border box */
}
.hero__emblem picture { display: block; width: min(20rem, 72%); }
.hero__emblem img {
  display: block;
  width: 100%;
  height: auto;
  animation: hero-enter 1.1s var(--ease) 0.25s backwards;
}

/* The hero is above the fold, so it enters on a pure CSS timeline instead of
   waiting for the IntersectionObserver: the opening text paints with the first
   frame rather than after the script runs, and it survives a slow or failed JS load. */
@keyframes hero-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hero-rule  { from { opacity: 0; transform: scaleX(0); }        to { opacity: 1; transform: scaleX(1); } }

.hero__text > * { animation: hero-enter 0.85s var(--ease) backwards; }
.hero__text > *:nth-child(1) { animation-delay: 0.05s; }
.hero__text > *:nth-child(2) { animation-delay: 0.13s; }
.hero__text > *:nth-child(3) { animation-delay: 0.21s; }
.hero__text > *:nth-child(4) { animation-delay: 0.29s; }
.hero__text > *:nth-child(5) { animation-delay: 0.35s; }
.hero__text > *:nth-child(6) { animation-delay: 0.43s; }
.hero__text .rule { transform: scaleX(1); animation-name: hero-rule; }

/* field marking — the single vertical hairline */
.hero__tick {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(2rem, 5vh, 4rem);
  width: 1px;
  height: 4.5rem;
  background: var(--linea);
  transform-origin: top center;
  animation: tick-draw 0.9s var(--ease) 0.9s backwards;
}
@keyframes tick-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }


/* ═══ 11 · ORIGEN ══════════════════════════════════════════════════════ */

.origin {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.origin__date {
  font-family: var(--sans);
  font-size: clamp(1.6rem, 0.9rem + 2.4vw, 2.9rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--azul);
  max-width: 11ch;
}
.origin__body .h1 { margin-bottom: 0; }


/* ═══ 12 · SPLIT SECTIONS ══════════════════════════════════════════════ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--reverse .split__media { order: 2; }

.split__media img { width: 100%; }
.split__media .caption { margin-top: var(--s-4); }

/* Book cover — reproduced flat, as a document: no frame, only the shadow a
   physical object casts on the page. */
.split__media .plate {
  box-shadow:
    0 1px 0 rgba(13, 27, 42, 0.10),
    0 32px 60px -34px rgba(13, 27, 42, 0.42);
}

/* The flagship image runs off the right edge of the page — the one asymmetric
   moment in the document, and the reason this section reads as the centrepiece. */
@media (min-width: 961px) {
  .section--flagship { overflow: hidden; }
  .section--flagship .split__media {
    margin-right: calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter));
  }
  .section--flagship .split__media .caption {
    padding-right: var(--gutter);
    max-width: 34rem;   /* wide enough to keep the specification on one line */
  }
}

.split__text .meta { margin-bottom: var(--s-3); }
.split__text .h1 + .meta { margin-top: var(--s-3); margin-bottom: 0; }


/* ═══ 13 · COLOPHON ════════════════════════════════════════════════════ */

.colophon { margin-top: var(--s-7); border-top: 1px solid var(--linea); }
.colophon__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--linea);
}
.colophon dt {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  padding-top: 0.2rem;
}
.colophon dd {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
}
.colophon__note {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--gris);
}



/* ═══ 14 · IMPACTO — FIGURES & GLOBE ═══════════════════════════════════ */

.section--impact { overflow: hidden; }

/* The graticule sits in the right margin as a watermark, deliberately faint
   enough that it never crosses a numeral with visible contrast. */
/* A meridian crossing a figure is the one distraction this section cannot afford,
   so the graticule is held to true watermark strength and pushed into the margin:
   it should register as texture behind the register, never as a line over a number. */
.globe {
  position: absolute;
  inset-block: 0;
  right: calc(var(--gutter) * -1.4);
  width: min(44rem, 62vw);
  color: var(--linea);
  opacity: 0.3;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.globe svg { width: 100%; height: auto; }

.section--impact .wrap { position: relative; }

/* Figures are set as a ruled register: rules align across the row, and the
   source notes sit on one common baseline whatever the label length. */
.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
  row-gap: clamp(2.5rem, 4.5vw, 4rem);
  margin-top: var(--s-8);
}
.figure {
  display: flex;
  flex-direction: column;
  /* children stay full-column width so the rules form one continuous register
     across the row, rather than each rule measuring its own numeral */
}
.figure__value {
  font-family: var(--sans);
  font-size: var(--fs-figure);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--azul);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.figure__value::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: var(--s-4);
  background: var(--linea);
}
.figure__label {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  line-height: 1.45;
  max-width: 24ch;
  flex: 1;                 /* pushes every source note to a shared baseline */
}
.figure__source {
  margin-top: var(--s-4);
  font-size: var(--fs-caption);
  font-style: italic;
  line-height: 1.4;
  color: var(--gris);
  max-width: 27ch;
}


/* ═══ 15 · AUTORIDADES ═════════════════════════════════════════════════ */

.roster {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.roster__head { position: sticky; top: calc(var(--header-h) + var(--s-6)); }

/* The two senior officers are pictured small beside the heading: faces for the
   register, without turning governance into a gallery. */
.roster__portraits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  max-width: 22rem;
  margin-top: var(--s-6);
}
.roster__portrait { margin: 0; }
.roster__portrait img { display: block; width: 100%; height: auto; }
.roster__portrait figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: var(--s-2);
}
.roster__portrait-name {
  font-family: var(--serif);
  font-size: var(--fs-small);
  line-height: 1.25;
}
.roster__portrait-role {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}
.roster__list { border-top: 1px solid var(--linea); }

/* Cada autoridad es un registro con su filete. Sin numerar: una nómina
   numerada se lee como un orden de jerarquía entre personas. */
.person {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--linea);
  transition: background-color 0.45s var(--ease);
}
.person::after {
  content: "";
  position: absolute;
  inset: 0 calc(var(--s-4) * -1);
  background: var(--linea-soft);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.45s var(--ease);
}
.person:hover::after { opacity: 0.55; }

.person__name {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
}
.person__role {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
  text-align: right;
}


/* ═══ 16 · SITIOS OFICIALES ════════════════════════════════════════════ */

.section--sites { padding-bottom: var(--section-y-l); }

.sites {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--s-8);
}

.site-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--s-6);
  padding: clamp(2rem, 3.2vw, 3rem);
  border: 1px solid var(--linea);
  background: var(--papel);
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.site-card:hover, .site-card:focus-visible {
  border-color: var(--tinta);
  transform: translateY(-2px);
}

/* One shared box for both marks, so the names below them align exactly.
   Each logo is contained within it rather than scaled to a fixed height. */
.site-card__logo {
  display: flex;
  align-items: center;
  height: 7rem;
}
.site-card__logo picture { display: block; height: 100%; }
.site-card__logo img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: multiply;
}
.site-card__logo--wide img { max-width: 17rem; }

.site-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: var(--s-5);
  border-top: 1px solid var(--linea);
}
.site-card__name {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem);
  line-height: 1.25;
}
.site-card__url {
  font-size: var(--fs-caption);
  letter-spacing: 0.05em;
  color: var(--gris);
}
.site-card__go {
  font-size: 1.05rem;
  color: var(--gris);
  justify-self: end;
  align-self: end;
  transition: transform 0.42s var(--ease), color 0.42s var(--ease);
}
.site-card:hover .site-card__go { transform: translateX(8px); color: var(--tinta); }

.sites__note { margin-top: var(--s-5); max-width: 40rem; }


/* ═══ 17 · FOOTER ══════════════════════════════════════════════════════ */

.site-footer {
  background: var(--tinta);
  color: var(--papel);
}

/* Endorsement band — the official marks reproduced on their own light ground,
   as they are in printed institutional documents. */
.footer__marks {
  background: var(--papel-alt);
  border-top: 1px solid var(--linea);
  padding-block: var(--s-6);
}
.footer__markslabel {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: var(--s-5);
}
.footer__markrow {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  flex-wrap: wrap;
}
.footer__mark {
  height: 5.25rem;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.footer__mark--wide { height: 3.5rem; }
.footer__markrule { width: 1px; align-self: stretch; min-height: 4rem; background: var(--linea); }

.footer__body {
  /* the lower padding also keeps the closing line clear of the back-to-top control */
  padding-block: var(--s-8);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 5vw, 5rem);
}
.footer__org { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
.footer__parent {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--gris-light);
  max-width: 30rem;
}
.footer__founded {
  margin-top: var(--s-3);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--gris-light);
}

.footer__colhead {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-light);
  margin-bottom: var(--s-4);
}
.footer__nav ul { display: flex; flex-direction: column; gap: 0.8rem; }
.footer__nav a {
  display: inline-block;
  padding-block: 0.3rem;
  display: inline-block;
  font-size: var(--fs-small);
  color: var(--gris-light);
  transition: color 0.35s var(--ease);
}
.footer__nav a:hover, .footer__nav a:focus-visible { color: var(--papel); }

/* Institutional contact records: name over address, ruled, not a bare link list */
.footer__nav .footer__site {
  display: block;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--papel);
}
.footer__nav .footer__url {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: var(--fs-caption);
  letter-spacing: 0.05em;
  color: var(--gris-light);
  border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.footer__nav a:hover .footer__url,
.footer__nav a:focus-visible .footer__url {
  color: var(--gris-light);
  border-bottom-color: var(--oro);
}
.footer__nav--contact li + li { margin-top: var(--s-4); }

/* Postal address: set as a block record, not italicised as the UA default does */
.footer__address {
  font-style: normal;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--gris-light);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--linea-dark);
}
.footer__address .footer__site { margin-bottom: 0.35rem; }

.site-footer .rule { margin-block: var(--s-7) var(--s-5); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.footer__legal, .footer__copy {
  font-size: var(--fs-caption);
  letter-spacing: 0.03em;
  color: var(--gris-light);
}
.footer__copy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer__copy a:hover, .footer__copy a:focus-visible { color: var(--papel); }


/* ═══ 18 · BACK TO TOP ═════════════════════════════════════════════════ */

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 90;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: var(--papel);
  border: 1px solid var(--linea);
  color: var(--tinta);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
              visibility 0.4s, background-color 0.3s, color 0.3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }


/* ═══ 19 · RESPONSIVE ══════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .nav__list { gap: 1.1rem; }
  .lockup__parent { display: none; }
}

@media (max-width: 960px) {
  :root { --header-h: 4.5rem; }

  .nav { display: none; }
  .menu-toggle { display: block; }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* .hero already reserves the masthead height — adding it again here was
     stacking two header offsets and opening a dead band above the eyebrow */
  .hero__text {
    padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(3rem, 7vw, 4.5rem);
    max-width: none;
  }
  .hero__emblem { padding-block: var(--s-7); box-shadow: 0 -1px 0 var(--linea); }
  .hero__emblem picture { width: 12rem; }
  .hero__tick { display: none; }

  .origin,
  .split,
  .split--reverse,
  .roster { grid-template-columns: 1fr; gap: var(--s-6); }
  .roster__head { position: static; }

  /* on narrow screens the image always precedes the text — alternation is
     invisible in a single column and reads as inconsistency */
  .split--reverse .split__media { order: -1; }
  .split__media { max-width: 32rem; }

  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .globe { right: -18%; width: 42rem; opacity: 0.4; }

  .sites { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__mark { height: 3.5rem; }
  .footer__mark--wide { height: 2.5rem; }
  .site-card__logo { height: 6rem; }
}

@media (max-width: 560px) {
  /* the masthead stays on one line: a wrapping wordmark reads as a broken lockup */
  .site-header__inner { gap: var(--s-3); }
  .lockup { gap: 0.6rem; }
  .lockup__mark { width: 2rem; }
  .lockup__name { white-space: nowrap; font-size: 0.9375rem; }
  .header__aside { gap: var(--s-3); }
  .menu-toggle { font-size: 0.6875rem; letter-spacing: 0.1em; }

  /* the standing line is long in both languages; tighter tracking keeps it to
     two comfortable lines instead of three ragged ones */
  .hero__text .eyebrow { letter-spacing: 0.09em; }

  .origin__date { max-width: none; }
  .figures { grid-template-columns: 1fr; row-gap: var(--s-6); }
  .figure__label { flex: none; }
  .globe { display: none; }
  .actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }

  .person { grid-template-columns: minmax(0, 1fr); row-gap: 0.4rem; padding-block: var(--s-4); }
  .person__role { white-space: normal; text-align: left; }

  .footer__markrow { gap: 1.5rem; }
  .footer__markrule { display: none; }
  .footer__mark { height: 3rem; }
  .footer__mark--wide { height: 2.25rem; }
  .site-card__logo { height: 5rem; }
  .site-card__logo--wide img { max-width: 13rem; }
  .colophon__row { grid-template-columns: 1fr; gap: var(--s-2); }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}


/* ═══ 20 · REDUCED MOTION & PRINT ══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .rule   { transform: scaleX(1); }
}

/* This page is printed to PDF and forwarded. The print sheet is not optional. */
@media print {
  @page { size: A4; margin: 18mm 16mm; }

  html { scroll-behavior: auto; }
  body {
    background: #fff; color: #000;
    font-size: 10pt; line-height: 1.5;
  }
  .site-header, .mobile-nav, .to-top, .skip-link, .actions,
  .lang, .globe, .hero__tick, .site-card__go { display: none !important; }

  .footer__marks { background: #fff !important; border-top: 1px solid #999; }
  .footer__mark { filter: grayscale(100%); }
  .person::after, .site-card { box-shadow: none !important; transform: none !important; }
  .figures { display: grid !important; grid-template-columns: repeat(3, 1fr); }

  .section, .hero { padding-block: 12mm; break-inside: avoid; }
  .section--tinta, .site-footer, .hero__emblem { background: #fff !important; color: #000 !important; }
  .section--tinta *, .site-footer * { color: #000 !important; }
  .section--president::before { background: #999; }

  .hero { min-height: 0; display: block; }
  .hero__emblem { max-width: 40mm; padding: 0; box-shadow: none; }

  .reveal, .rule { opacity: 1 !important; transform: none !important; }
  .rule { background: #999 !important; }

  .h1, .hero__title { break-after: avoid; }
  .split, .origin, .roster, .figures { display: block; }
  .split__media { max-width: 70mm; margin-bottom: 6mm; }
  .figure { break-inside: avoid; margin-bottom: 6mm; }
  .figure__value { color: #000; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}


/* ═══ 21 · PROYECTOS Y RECONOCIMIENTOS ════════════════════════════════ */

/* The second page opens with the hero's type but not its panel: it is a
   register of work, so it starts as a document rather than a poster. */
.page-intro {
  padding: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)) 0 var(--section-y);
  background: var(--papel);
}
.page-intro .eyebrow { margin-bottom: var(--s-5); }
.page-intro .rule--gold { margin-block: var(--s-6) var(--s-5); }
.page-intro .lead { max-width: var(--measure); }

.page-index ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--linea);
}
.page-index a {
  display: inline-block;
  padding-block: 0.5rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  transition: color 0.28s var(--ease);
}
.page-index a:hover, .page-index a:focus-visible { color: var(--tinta); }

/* The vote's figures sit in the text column, under the paragraph they count. */
.split__text .figures { margin-top: var(--s-7); }

/* Events — rectangular photograph above, short text below. The photograph sets
   the row height; the text blocks start on one line whatever their length. */
.events {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 2.6vw, 2.5rem);
  row-gap: clamp(2.5rem, 4.5vw, 4rem);
  margin-top: var(--s-8);
}
.event-card { display: flex; flex-direction: column; }
.event-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0;
  background: var(--papel-alt);
}
.event-card__media picture { display: block; height: 100%; }
.event-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
/* For photographs whose subject sits high in the frame. */
.event-card__media--top img { object-position: center 18%; }
.event-card:hover .event-card__media img { transform: scale(1.03); }
.event-card__meta {
  margin-top: var(--s-4);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oro-texto);
}
.event-card__title {
  margin-top: var(--s-2);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 0.98rem + 0.55vw, 1.45rem);
  font-weight: 400;
  line-height: 1.25;
}
.event-card__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: var(--s-3);
  background: var(--linea);
}
.event-card__text {
  margin-top: var(--s-3);
  max-width: 38ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--gris);
}

/* Distinctions — replaces the old Flash slideshow with a plain grid. */
.distinctions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: var(--s-8);
}
.distinction { margin: 0; }
.distinction__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--papel-alt);
  border: 1px solid var(--linea-soft);
}
.distinction__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.distinction figcaption {
  margin-top: var(--s-2);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--gris);
}

@media (max-width: 900px) {
  .events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .distinctions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .events { grid-template-columns: 1fr; }
  .distinctions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__emblem img { animation: none; }
  .event-card:hover .event-card__media img { transform: none; }
}


/* Homenaje — la pieza audiovisual cierra la sección de eventos. El fondo
   oscuro evita el destello blanco entre que carga la portada y arranca. */
.tribute { margin-top: var(--s-8); max-width: 52rem; }
.tribute__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--tinta);
}
.tribute__caption { margin-top: var(--s-4); max-width: 34rem; }

/* Documentos reproducidos enteros — el mensaje de Blatter para el libro y el
   ensayo de Carlos Peralta. Son textos de 2006, largos y para leer seguido:
   la columna va más angosta que el resto y el fondo los separa del cuerpo
   de la página, para que se lean como lo que son, documentos citados. */
.message {
  margin-top: var(--s-8);
  max-width: 42rem;
  padding: var(--s-6) clamp(1.25rem, 3vw, var(--s-6));
  background: var(--papel-alt);
  border-left: 2px solid var(--oro);
}
.section--alt .message { background: var(--papel); }
.message__title { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.2; }
.message__meta { margin-bottom: var(--s-2); }
.message .rule { margin-block: var(--s-4) var(--s-5); }
.message .body + .body { margin-top: var(--s-4); }
.message__close { font-style: italic; }
.message__sign {
  margin-top: var(--s-5);
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}

/* Cada hito declara de qué tipo es. Lo pide el criterio editorial: un acto
   celebrado y un proyecto anunciado no pueden leerse igual. El punto de la
   línea lo repite sin depender del color: lleno = documentado, hueco =
   anunciado, apagado = antecedente relatado. */
.timeline__kind {
  margin-bottom: var(--s-2);
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}
.timeline__item--anunciado .timeline__kind { color: var(--oro-texto); }
.timeline__item--anunciado::before { background: var(--papel); border: 2px solid var(--oro); }
.timeline__item--antecedente::before { background: var(--linea); }

/* De dónde sale cada hito. Va como cita y no como enlace: varias de las
   páginas citadas son del archivo de 2006 y el .htaccess las redirige a las
   páginas nuevas, así que un enlace volvería acá mismo. La dirección
   original queda en data-fuente. */
.timeline__source {
  margin-top: var(--s-3);
  font-family: var(--sans);
  font-size: var(--fs-meta);
  color: var(--gris);
}
.timeline__source::before { content: "Fuente: "; }
:root[data-lang="en"] .timeline__source::before { content: "Source: "; }

/* Un párrafo de cuerpo justo después del encabezado de sección necesita
   separarse del resumen, o los dos se leen como un bloque solo. */
.section-head + .body { margin-top: var(--s-6); max-width: var(--measure); }
.records + .caption { margin-top: var(--s-5); }
.caption + .records { margin-top: var(--s-7); }

/* ═══ 22 · PÁGINAS INTERIORES ════════════════════════════════════════ */

/* Section opening with heading, rule and a short lead. */
.section-head { max-width: 46rem; }
.section-head .lead { margin-top: var(--s-5); }
.section-head + .split { margin-top: var(--s-8); }

/* Home — what we do: four lines of work, each a ruled column. */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
  margin-top: var(--s-8);
}
.pillar {
  display: flex;
  flex-direction: column;
  padding-top: var(--s-4);
  border-top: 1px solid var(--tinta);
}
.pillar__title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
}
.pillar__text {
  flex: 1;
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--gris);
}
.pillar__link, .record__link {
  display: inline-block;
  margin-top: var(--s-3);
  padding-block: 0.6rem;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul);
  transition: color 0.28s var(--ease);
}
.record__link { margin-top: var(--s-2); }
.pillar__link:hover, .pillar__link:focus-visible,
.record__link:hover, .record__link:focus-visible { color: var(--tinta); }

/* Home — pathways to the interior pages. */
.pathways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.pathway {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--linea);
  background: var(--papel);
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.pathway:hover, .pathway:focus-visible { border-color: var(--tinta); transform: translateY(-2px); }
.pathway__title { font-family: var(--serif); font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); line-height: 1.2; }
.pathway__text { font-size: var(--fs-small); line-height: 1.5; color: var(--gris); }
.pathway__go { justify-self: end; color: var(--gris); }

/* Interior block: heading column beside the body, like the governance register. */
.block {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.block__head { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.block__subtitle {
  margin-top: var(--s-7);
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.25;
}
.block__cta { margin-top: var(--s-6); }

/* Records — dated cases, one ruled entry each. */
.records { margin-top: var(--s-6); border-top: 1px solid var(--linea); }
.record { padding-block: var(--s-5); border-bottom: 1px solid var(--linea); }
.record__meta {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oro-texto);
}
.record__title {
  margin-top: var(--s-2);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 0.98rem + 0.55vw, 1.45rem);
  font-weight: 400;
  line-height: 1.25;
}
.record__text {
  margin-top: var(--s-2);
  max-width: var(--measure);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--gris);
}
.split + .records { margin-top: var(--s-8); }
.records--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 0;
}
.records--pair .record { border-top: 1px solid var(--linea); border-bottom: 0; }

/* Names — a plain register of ambassadors. */
.names {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-4);
}
.names li {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 0.98rem + 0.4vw, 1.3rem);
  line-height: 1.35;
}
.names li:not(:last-child)::after { content: "·"; margin-left: var(--s-3); color: var(--oro); }

/* Timeline — year column, hairline spine, gold marker. */
.timeline { margin-top: var(--s-7); border-left: 1px solid var(--linea); }
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--s-5);
  padding: var(--s-5) 0 var(--s-5) var(--s-6);
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: calc(var(--s-5) + 0.55rem);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro);
}
.timeline__date {
  font-family: var(--sans);
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--azul);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.timeline__title {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 0.98rem + 0.55vw, 1.45rem);
  font-weight: 400;
  line-height: 1.25;
}
.timeline__text {
  margin-top: var(--s-2);
  max-width: var(--measure);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--gris);
}

/* Contact card. */
.contact-card {
  max-width: 36rem;
  padding: clamp(2rem, 3.2vw, 3rem);
  border: 1px solid var(--linea);
  background: var(--papel);
}
.contact-card__label {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}
.contact-card address {
  margin-top: var(--s-3);
  font-style: normal;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.45;
}

.contact-card__label--mail { margin-top: var(--s-5); }
.contact-card__mail {
  display: inline-block;
  margin-top: var(--s-2);
  padding-block: 0.45rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  color: var(--azul);
  border-bottom: 1px solid var(--linea);
  transition: color 0.28s var(--ease), border-color 0.28s var(--ease);
}
.contact-card__mail:hover, .contact-card__mail:focus-visible { color: var(--tinta); border-color: var(--tinta); }

@media (max-width: 1100px) {
  .pillars, .pathways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .block { grid-template-columns: 1fr; gap: var(--s-5); }
  .block__head { position: static; }
  .records--pair { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pillars, .pathways { grid-template-columns: 1fr; }
  .timeline__item { grid-template-columns: 1fr; gap: var(--s-2); padding-left: var(--s-5); }
}
@media (prefers-reduced-motion: reduce) {
  .pathway:hover, .pathway:focus-visible { transform: none; }
}