/* =========================================================================
   Seven Thousand Feet - single stylesheet.
   No web font, no import, no CDN, no external request of any kind.
   Class vocabulary: prefix vga- , borrowed from adobe building (viga, portal,
   placita, banco, nicho, latilla, tramo, dintel, zaguan, cimiento, lamina).
   Colour, type and rhythm are set once in the :root block below.
   ========================================================================= */

:root {
  /* ---- Colour: plastered wall, alpenglow plum, near-black ink ---------- */
  --papel: #e7e2da;         /* page background, warm stone */
  --papel-hondo: #d8d1c4;   /* contents rail, summary blocks, footer */
  --papel-claro: #f6f3ee;   /* callouts, tables, figures, gateway cards */
  --tinta: #241f22;         /* body copy and headings */
  --tinta-suave: #5f5450;   /* summaries, captions, small print */
  --acento: #7b2d4f;        /* links, numerals, rules */
  --acento-hondo: #5a1e39;  /* hover and pressed states */
  --linde: #c5bcac;         /* hairlines */
  --realce: #eedde3;        /* text selection and active contents entry */

  /* ---- Type ----------------------------------------------------------- */
  --letra-titulo: Cochin, "Big Caslon", "Hoefler Text", Perpetua, "Baskerville Old Face", "Book Antiqua", "Palatino Linotype", Georgia, serif;
  --letra-texto: Calibri, Carlito, Seravek, "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --letra-cota: "Lucida Console", Monaco, "Andale Mono", "DejaVu Sans Mono", "Courier New", monospace;

  /* ---- Rhythm --------------------------------------------------------- */
  --medida: 70ch;           /* maximum line length */
  --banco-ancho: 19rem;     /* width of the contents column, held on the right */
  --paso: 1.4rem;           /* base spacing unit */
  --interlinea: 1.68;
  --cifra: 0.95rem;         /* size of the section numerals */
  --filete: 1px;
  --canto: 2px;
  --pagina-max: 66rem;

  /* ---- Heading sizes, fluid, never overflowing ------------------------ */
  --n1: clamp(2rem, 1.4rem + 2.4vw, 3.15rem);
  --n2: clamp(1.28rem, 1.1rem + 0.85vw, 1.65rem);
  --n3: clamp(1.02rem, 0.98rem + 0.3vw, 1.16rem);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--letra-texto);
  font-size: 1.02rem;
  line-height: var(--interlinea);
  overflow-wrap: break-word;
  border-top: 4px solid var(--acento);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

::selection { background: var(--realce); }

a { color: var(--acento); }
a:hover { color: var(--acento-hondo); }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

/* ---- Utilities ---------------------------------------------------------- */
.vga-atajo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinta);
  color: var(--papel);
  padding: 0.6rem 1rem;
  z-index: 20;
}
.vga-atajo:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.vga-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.vga-placita {
  width: 100%;
  max-width: var(--pagina-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4.5vw, 2.75rem);
}

/* ---- Header: brand on one line, navigation on the next ------------------ */
.vga-portal {
  border-bottom: var(--filete) solid var(--linde);
  background: var(--papel);
}

.vga-portal__fila {
  padding-block: 1.15rem 0;
}

.vga-rotulo {
  display: inline-block;
  font-family: var(--letra-titulo);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--tinta);
  text-decoration: none;
}
.vga-rotulo span {
  display: block;
  font-family: var(--letra-cota);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: 0.25rem;
}

.vga-sendero {
  margin-top: 0.95rem;
  border-top: var(--filete) solid var(--linde);
}
.vga-sendero ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.vga-sendero a {
  display: inline-block;
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding-block: 0.7rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.vga-sendero a:hover,
.vga-sendero a[aria-current="page"] {
  color: var(--acento);
  border-bottom-color: var(--acento);
}

/* ---- Page opening ------------------------------------------------------- */
.vga-zaguan {
  padding-block: clamp(1.9rem, 5vw, 3.4rem) var(--paso);
  border-bottom: var(--filete) solid var(--linde);
}

.vga-rastro {
  font-family: var(--letra-cota);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 0.85rem;
}
.vga-rastro a { color: var(--tinta-suave); }
.vga-rastro span { padding-inline: 0.4rem; color: var(--acento); }

.vga-titulo {
  font-family: var(--letra-titulo);
  font-size: var(--n1);
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 0.7rem;
  max-width: 26ch;
}

.vga-entrada {
  max-width: var(--medida);
  font-size: 1.08rem;
  color: var(--tinta-suave);
  margin: 0;
}

.vga-apunte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.4rem;
  list-style: none;
  margin: calc(var(--paso) * 1.1) 0 0;
  padding: 0.7rem 0 0;
  border-top: var(--filete) solid var(--linde);
  font-family: var(--letra-cota);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.vga-apunte li { display: flex; align-items: baseline; gap: 0.45rem; }
.vga-apunte li::before {
  content: "\002B";           /* small cross, adobe survey mark */
  color: var(--acento);
  font-size: 0.85rem;
  line-height: 1;
  flex: none;
}

/* ---- Solar: content on the left, contents rail on the right ------------- */
.vga-solar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--banco-ancho);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  /* never align-items: start, the rail must stretch the full row height or
     the sticky contents stops following after a few hundred pixels. */
  align-items: stretch;
  padding-block: clamp(1.9rem, 4vw, 3rem) clamp(2.6rem, 6vw, 4.5rem);
}

.vga-banco {
  min-width: 0;
  align-self: stretch;
  order: 2;
}

.vga-sala {
  min-width: 0;
  max-width: var(--medida);
  order: 1;
}

/* ---- Sticky contents ---------------------------------------------------- */
.vga-latillas {
  position: sticky;
  top: var(--paso);
  max-height: calc(100vh - var(--paso) * 2);
  overflow-y: auto;
  background: var(--papel-hondo);
  border: var(--filete) solid var(--linde);
  border-top: 3px solid var(--acento);
  border-radius: 0 0 var(--canto) var(--canto);
  padding: 0.95rem 1.05rem 1.15rem;
}

.vga-latillas__rotulo {
  font-family: var(--letra-cota);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.vga-latillas__rotulo::-webkit-details-marker { display: none; }
.vga-latillas__rotulo::after {
  content: "\25B4";           /* small up triangle: the panel is open */
  font-size: 0.9rem;
  line-height: 1;
  color: var(--acento);
}
.vga-latillas:not([open]) .vga-latillas__rotulo::after { content: "\25BE"; }

.vga-latillas__lista {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  counter-reset: viga;
}

.vga-latillas__viga { border-top: var(--filete) solid var(--linde); }
.vga-latillas__viga:first-child { border-top: 0; }

.vga-latillas__viga > a {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: baseline;
  padding: 0.55rem 0.3rem 0.55rem 0.85rem;
  margin-left: -1.05rem;
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.32;
  border-left: 3px solid transparent;
}
.vga-latillas__viga > a::before {
  counter-increment: viga;
  content: counter(viga, decimal-leading-zero);
  font-family: var(--letra-cota);
  font-size: 0.76rem;
  color: var(--acento);
  letter-spacing: 0.03em;
}
.vga-latillas__viga > a:hover {
  background: var(--papel-claro);
  color: var(--acento);
}
.vga-latillas__viga > a[aria-current="true"] {
  background: var(--realce);
  border-left-color: var(--acento);
  font-weight: 700;
}

/* optional second level of the contents */
.vga-latillas__ramas {
  list-style: none;
  margin: 0 0 0.45rem;
  padding: 0 0 0 2.35rem;
}
.vga-latillas__ramas a {
  display: block;
  padding: 0.22rem 0;
  font-size: 0.83rem;
  color: var(--tinta-suave);
  text-decoration: none;
}
.vga-latillas__ramas a:hover { color: var(--acento); }

.vga-banco__nicho {
  margin: var(--paso) 0 0;
  padding: 0.85rem 0.95rem;
  font-size: 0.85rem;
  color: var(--tinta-suave);
  background: var(--papel-claro);
  border: var(--filete) solid var(--linde);
  border-radius: var(--canto);
}
.vga-banco__nicho p { margin: 0; }

/* ---- Numbered sections, flush left, ruled heading ----------------------- */
.vga-tramo {
  padding-block: 0 clamp(1.8rem, 4vw, 2.7rem);
  scroll-margin-top: var(--paso);
}
.vga-tramo + .vga-tramo {
  border-top: var(--filete) solid var(--linde);
  padding-top: clamp(1.9rem, 4vw, 2.7rem);
}

.vga-tramo__dintel {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: start;
  gap: 0.2rem;
  font-family: var(--letra-titulo);
  font-size: var(--n2);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 0.95rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--linde);
}
.vga-tramo__cifra {
  font-family: var(--letra-cota);
  font-size: var(--cifra);
  font-weight: 400;
  color: var(--acento);
  letter-spacing: 0.04em;
  padding-top: 0.3em;
}

.vga-tramo > h3 {
  font-family: var(--letra-titulo);
  font-size: var(--n3);
  margin-top: calc(var(--paso) * 1.25);
  margin-bottom: 0.45rem;
  scroll-margin-top: var(--paso);
}

.vga-tramo p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.vga-tramo > ul,
.vga-tramo > ol {
  margin-bottom: 1.1rem;
  padding-left: 1.1rem;
}
.vga-tramo > ul > li,
.vga-tramo > ol > li { margin-bottom: 0.45rem; }

.vga-tramo > .vga-itinerario,
.vga-tramo > .vga-registro,
.vga-tramo > .vga-peldanos { padding-left: 0; }
.vga-tramo > .vga-itinerario > li,
.vga-tramo > .vga-registro > li { margin-bottom: 0; }
.vga-tramo > .vga-peldanos > li { margin-bottom: 0.8rem; }

/* ---- Ordered steps, square markers -------------------------------------- */
.vga-peldanos {
  list-style: none;
  counter-reset: peldano;
  padding-left: 0;
}
.vga-peldanos > li {
  counter-increment: peldano;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 0.8rem;
}
.vga-peldanos > li::before {
  content: counter(peldano, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.18rem;
  width: 1.95rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  font-family: var(--letra-cota);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--papel);
  background: var(--acento);
}

/* ---- End-of-section summary --------------------------------------------- */
.vga-nicho {
  background: var(--papel-hondo);
  border: var(--filete) solid var(--linde);
  border-left: 5px solid var(--acento);
  border-radius: 0 var(--canto) var(--canto) 0;
  padding: 1rem 1.2rem 1.1rem;
  margin-top: calc(var(--paso) * 1.25);
}
.vga-nicho__rotulo {
  font-family: var(--letra-cota);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--acento);
  margin: 0 0 0.55rem;
}
.vga-nicho__puntos {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vga-nicho__puntos li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.4rem;
  font-size: 0.97rem;
}
.vga-nicho__puntos li:last-child { margin-bottom: 0; }
.vga-nicho__puntos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--acento);
}

/* ---- Supporting callout -------------------------------------------------- */
.vga-banda {
  background: var(--papel-claro);
  border: var(--filete) solid var(--linde);
  border-top: 3px solid var(--tinta-suave);
  border-radius: 0 0 var(--canto) var(--canto);
  padding: 0.95rem 1.1rem;
  margin: calc(var(--paso) * 0.95) 0;
}
.vga-banda__rotulo {
  font-family: var(--letra-cota);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tinta-suave);
  margin: 0 0 0.4rem;
}
.vga-banda p:last-child { margin-bottom: 0; }

/* ---- Definitions --------------------------------------------------------- */
.vga-lexico {
  margin: 0;
  border-top: 2px solid var(--linde);
}
.vga-lexico dt {
  font-weight: 700;
  font-family: var(--letra-titulo);
  font-size: 1.06rem;
  padding-top: 0.7rem;
}
.vga-lexico dd {
  margin: 0.15rem 0 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: var(--filete) solid var(--linde);
  color: var(--tinta-suave);
}

/* ---- Tables with clean horizontal scrolling ------------------------------ */
.vga-tabla {
  overflow-x: auto;
  border: var(--filete) solid var(--linde);
  border-radius: var(--canto);
  background: var(--papel-claro);
  margin: calc(var(--paso) * 0.95) 0;
}
.vga-tabla table {
  border-collapse: collapse;
  width: 100%;
  min-width: 31rem;
  font-size: 0.93rem;
}
.vga-tabla caption {
  text-align: left;
  padding: 0.7rem 0.9rem;
  font-family: var(--letra-cota);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-bottom: var(--filete) solid var(--linde);
}
.vga-tabla th,
.vga-tabla td {
  text-align: left;
  padding: 0.62rem 0.9rem;
  border-bottom: var(--filete) solid var(--linde);
  vertical-align: top;
}
.vga-tabla thead th {
  background: var(--papel-hondo);
  font-family: var(--letra-cota);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.vga-tabla tbody tr:last-child td { border-bottom: 0; }

/* ---- Figures ------------------------------------------------------------- */
.vga-lamina {
  margin: calc(var(--paso) * 0.95) 0;
}
.vga-lamina img {
  display: block;
  width: 100%;
  height: auto;
  /* Plates are shot in three ratios. Width and height attributes hold the true
     pixel size, so the box is reserved before the file lands; this cap keeps a
     tall plate from swallowing a screen, without cropping the source file. */
  max-height: 78vh;
  object-fit: cover;
  object-position: center 40%;
  border: var(--filete) solid var(--linde);
  border-radius: var(--canto);
  background: var(--papel-claro);
}
.vga-lamina figcaption {
  font-size: 0.84rem;
  color: var(--tinta-suave);
  margin-top: 0.5rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--acento);
}

/* ---- Home programme, a numbered list and never a card grid --------------- */
.vga-itinerario {
  list-style: none;
  counter-reset: capitulo;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--linde);
}
.vga-itinerario > li {
  counter-increment: capitulo;
  border-bottom: var(--filete) solid var(--linde);
}
.vga-itinerario a {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  gap: 0.15rem 0.55rem;
  padding: 1rem 0.35rem 1.05rem 0;
  text-decoration: none;
  color: var(--tinta);
}
.vga-itinerario a:hover { background: var(--papel-claro); }
.vga-itinerario a::before {
  content: counter(capitulo, decimal-leading-zero);
  grid-row: 1 / span 3;
  font-family: var(--letra-cota);
  font-size: 0.9rem;
  color: var(--acento);
  padding-top: 0.4rem;
}
.vga-itinerario__titulo {
  font-family: var(--letra-titulo);
  font-size: var(--n3);
  font-weight: 700;
  line-height: 1.28;
}
.vga-itinerario a:hover .vga-itinerario__titulo { color: var(--acento); }
.vga-itinerario__resumen {
  color: var(--tinta-suave);
  font-size: 0.95rem;
  margin-top: 0.22rem;
}
.vga-itinerario__senas {
  margin-top: 0.4rem;
  font-family: var(--letra-cota);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.vga-itinerario__senas b {
  font-weight: 400;
  color: var(--acento);
}

/* ---- Dense section index -------------------------------------------------- */
.vga-registro {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vga-registro > li {
  padding: 0.9rem 0;
  border-bottom: var(--filete) solid var(--linde);
}
.vga-registro__titulo {
  font-family: var(--letra-titulo);
  font-size: var(--n3);
  margin: 0 0 0.22rem;
}
.vga-registro__titulo a { text-decoration: none; color: var(--tinta); }
.vga-registro__titulo a:hover { color: var(--acento); text-decoration: underline; }
.vga-registro__resumen {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.95rem;
}
.vga-registro__senas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  font-family: var(--letra-cota);
  font-size: 0.71rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ---- Gateway to the next pages ------------------------------------------- */
.vga-puente {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: calc(var(--paso) * 1.5);
  border-top: 2px solid var(--linde);
  padding-top: var(--paso);
}
.vga-puente a {
  display: block;
  padding: 0.85rem 1rem;
  border: var(--filete) solid var(--linde);
  border-left: 3px solid var(--linde);
  border-radius: 0 var(--canto) var(--canto) 0;
  background: var(--papel-claro);
  text-decoration: none;
  color: var(--tinta);
}
.vga-puente a:hover { border-left-color: var(--acento); }
.vga-puente small {
  display: block;
  font-family: var(--letra-cota);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.25rem;
}
.vga-puente b {
  font-family: var(--letra-titulo);
  font-weight: 700;
  font-size: 1.04rem;
}

/* ---- Footer --------------------------------------------------------------- */
.vga-cimiento {
  border-top: var(--filete) solid var(--linde);
  background: var(--papel-hondo);
  padding-block: clamp(1.7rem, 4vw, 2.6rem);
  font-size: 0.92rem;
}
.vga-cimiento__fila {
  display: grid;
  gap: var(--paso);
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}
.vga-cimiento h2 {
  font-family: var(--letra-cota);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: var(--filete) solid var(--linde);
  color: var(--tinta-suave);
}
.vga-cimiento ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vga-cimiento li { margin-bottom: 0.35rem; }
.vga-cimiento a { color: var(--tinta); }
.vga-cimiento a:hover { color: var(--acento); }
.vga-cimiento__pie {
  margin-top: var(--paso);
  padding-top: 0.85rem;
  border-top: 2px solid var(--linde);
  color: var(--tinta-suave);
  font-size: 0.84rem;
}
.vga-cimiento__pie span { display: block; }

/* =========================================================================
   Small widths: the contents rail moves back above the content and stops
   being sticky.
   ========================================================================= */
@media (max-width: 62rem) {
  .vga-solar {
    grid-template-columns: minmax(0, 1fr);
  }
  .vga-banco { order: 0; }
  .vga-sala { order: 0; max-width: none; }
  .vga-latillas {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .vga-banco__nicho { margin-top: 0.9rem; }
}

@media (max-width: 34rem) {
  :root {
    --paso: 1.1rem;
    --pagina-max: 100%;
  }
  body { font-size: 1rem; }
  .vga-sendero ul { gap: 0 1.1rem; }
  .vga-tramo__dintel { grid-template-columns: 2.1rem minmax(0, 1fr); }
  .vga-itinerario a { grid-template-columns: 2.3rem minmax(0, 1fr); }
  .vga-titulo { max-width: none; }
}

/* ---- Print ---------------------------------------------------------------- */
@media print {
  .vga-banco,
  .vga-sendero,
  .vga-atajo,
  .vga-puente { display: none; }
  .vga-solar { display: block; }
  body { background: #fff; color: #000; border-top: 0; }
  .vga-sala { max-width: none; }
}