/* ═══════════════════════════════════════════════════════════════════════
   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 · balón · presidencia)
   13  Colophon & event blocks
   14  Impacto — figures & globe
   15  Autoridades
   16  Sitios oficiales
   17  Footer
   18  Back to top
   19  Responsive
   20  Reduced motion & print
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ 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;

  /* 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.8125rem;
  --fs-meta:    0.75rem;

  /* 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: 2px solid var(--oro);
  outline-offset: 4px;
}

::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; 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.55rem; }
.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);
}
.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;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 0;
  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 {
  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); }

.hero__media {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  background: var(--tinta);
  box-shadow: -1px 0 0 var(--linea);   /* crisp paper-to-image edge, no border box */
}
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 64%;
}

/* 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 & EVENT ════════════════════════════════════════════ */

.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);
}

.event { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--linea-dark); }
.event .meta { color: var(--gris-light); }
.event__date {
  font-family: var(--sans);
  font-size: clamp(1.7rem, 1rem + 2.2vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: var(--s-3);
}
.event__place { font-size: var(--fs-small); color: var(--gris-light); margin-top: var(--s-2); }


/* ═══ 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)); }
.roster__list { border-top: 1px solid var(--linea); counter-reset: officer; }

/* Each officer is a ruled record carrying an index, the convention of a
   governance annex rather than a team page. */
.person {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem 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::before {
  counter-increment: officer;
  content: counter(officer, decimal-leading-zero);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--oro);
  align-self: baseline;
}
.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;
  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);
}


/* ═══ 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;
  }
  /* matches the crop's own proportion, so the ball is never clipped */
  .hero__media { aspect-ratio: 1 / 1; }
  .hero__media img { object-position: center; }
  .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: 2.5rem minmax(0, 1fr); row-gap: 0.4rem; padding-block: var(--s-4); }
  .person__role { white-space: normal; text-align: left; grid-column: 2; }

  .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); }
  .hero__media img { transform: none !important; }
}

/* 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__media { 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__media { aspect-ratio: auto; max-width: 90mm; }
  .hero__media img { object-fit: contain; height: auto; }

  .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; }
}