/* ==========================================================================
   /ecuador — «El día dura lo mismo.» Ecuador, hoy.
   Loads after /pages.css and only adds to it. Three surfaces, top to bottom:
   - the panel «Ahora, en Quito» (ink, the first screen): title row with the clock at the h1's size,
     the day line you scrub (.dl), the live rows (.lv) and the status line;
   - the document (white): lede, index (sticky from 1100px), the eight questions (.cap: number and
     question, answer, principal figure, chart, ledger rows), the short answers and «Fuentes y
     criterios» with the one list of sources of the page;
   - the footer (blue, ink bar), as on /legal.
   Values marked data-v="on" (inside <template data-vivo>) exist only with JS (/ecuador/ecuador.js);
   their data-v="off" twins are the published figures. html.vivo = the live values rendered;
   html.no-vivo = they cannot be (the line folds its reading zone). Motion
   (/ecuador/ecuador-fx.js) only in the «Movimiento» block, under html.fx-ecuador-pagina; the
   slider's own travel (.3s react on a tap, .6s settle back to «now») works without it.
   ========================================================================== */

:root {
  --fg2-ink: rgba(255, 255, 255, 0.64);   /* secondary text on ink, ~7.7:1 */
  --rule-ink: rgba(255, 255, 255, 0.18);
  --wash: rgba(12, 24, 33, 0.08);         /* the 100 % well under a share */
  --measure: 760px;                       /* prose and rows */
  --wide: 976px;                          /* charts */
  --small: 15px;
  --ease-settle: cubic-bezier(0.65, 0, 0.35, 1);
  --h1: clamp(44px, 7.8vw, 116px);
}

@media (max-width: 719px) {
  :root { --h1: clamp(44px, 13.6vw, 72px); }
}

[hidden] { display: none !important; }

/* The notes jump by native anchor; smooth only for readers who did not ask for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Ink masthead (same nav as /legal, other surface) ---------- */
[data-surface="ink"] .brand svg { stroke: var(--white); }

.skip { background: var(--white); color: var(--ink); }
.skip:focus-visible { outline-color: var(--white); }

a.nav-meta {
  text-decoration-line: underline;
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

@media (hover: hover) {
  a.nav-meta:hover { text-decoration-color: currentColor; }
}

/* Legacy anchors (#tiempo-y-lugar, #gente, #dinero…): empty marks at the top of their new place. Pinned to
   the top edge of their section (over its 1px rule), with the section's own scroll margin, so #dinero lands
   where #moneda does; the panel's (#tiempo-y-lugar) lands where #ahora does. */
.cap { position: relative; }
.anchor { position: absolute; top: -1px; left: 0; height: 0; }
.cap > .anchor { scroll-margin-top: 24px; }

/* ---------- Status tags: the homepage «En desarrollo» grammar (blue dot + quiet text) ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--fg2-white);
  white-space: nowrap;
  vertical-align: 0.12em;
}

.tag::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}

[data-surface="ink"] .tag { color: var(--fg2-ink); }

/* ==========================================================================
   Panel «Ahora, en Quito» (ink)
   ========================================================================== */

.panel {
  position: relative;
  padding: clamp(24px, 3vw, 44px) var(--gutter) clamp(24px, 2.6vw, 36px);
}

.panel .eyebrow {
  margin-bottom: clamp(12px, 1.4vw, 18px);
  font-weight: 700;
  font-size: clamp(19px, 1.6vw, 22px);
  letter-spacing: -0.01em;
  color: var(--white);
}

.panel h1 {
  max-width: 11ch;
  font-size: var(--h1);
  color: var(--blue);
}

@media (max-width: 608px) { .panel h1 { letter-spacing: -0.035em; } }

/* The clock: a figure at the h1's own size, on the h1's last baseline (12-column grid). */
.clock-l {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: var(--small);
  line-height: 1.3;
  color: var(--fg2-ink);
}

.clock-v {
  font-weight: 900;
  font-size: var(--h1);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin-inline-start: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--white);
}

.clock-n {
  max-width: 36ch;
  margin-top: 10px;
  font-weight: 500;
  font-size: var(--small);
  line-height: 1.45;
  color: var(--fg2-ink);
  text-wrap: pretty;
}

/* The live note («UTC−5, sin horario de verano. La misma hora donde estás.») takes two lines at every
   width; until it is in, its place is kept, so the swap after a first paint moves nothing below it. */
html.js:not(.vivo):not(.no-vivo) .clock-n { min-height: 2.9em; min-height: 2lh; }

.panel-title > .clock-top,
.clock > .clock-top { margin-top: clamp(20px, 5vw, 28px); }

@media (min-width: 720px) {
  .panel-title {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 1.8vw, 24px);
  }
  .panel-title > .eyebrow { grid-column: 1 / -1; }
  .panel-title > h1 { grid-column: 1 / 9; grid-row: 2; align-self: end; align-self: last baseline; }
  .clock { display: contents; }
  .panel-title > .clock-top,
  .clock > .clock-top { grid-column: 9 / -1; grid-row: 2; margin-top: 0; align-self: end; align-self: last baseline; }
  .clock > .clock-n { grid-column: 9 / -1; grid-row: 3; }
}

/* ---------- The day line you scrub (.dl) ----------
   Full bleed; the scale is inset by the gutter. One band, top to bottom (desktop):
     0–22   the scrubbed hour (thumb readout)        28–44  «Ahora 14:41» over its line (48–80)
     72     the line: hairline night, 2px white day  76/80  hour ticks (1×4, 1×8 every 6 h)
     88     0 h · sunrise · sunset · 24 h; while scrubbing, under the thumb (24–84) its caption
            «De día · donde estás, 22:30», and the labels it would cover step aside
   then the foot: the instruction and «Volver a ahora», then «Otro día del año».
   Every position is a fraction of the day (--sr, --ss, --now, --t): CSS places, nothing measures. */
.dl {
  --line: 72px;
  --lab: 88px;
  --band: 106px;
  margin: clamp(10px, 1.4vw, 20px) calc(var(--gutter) * -1) 0;
}

/* Without the live values there is no «now» and no thumb: the reading zone folds away. Only when they
   are not coming (no JS, or html.no-vivo from ecuador.js): with JS the line keeps its live size from the
   first paint, so arming it after a paint (the scripts arrive after the HTML and the CSS) moves nothing
   below it. The foot keeps the room of its controls the same way (below). */
html:not(.js):not(.vivo) .dl,
html.no-vivo .dl { --line: 14px; --lab: 30px; --band: 48px; margin-top: clamp(24px, 3vw, 36px); }

.dl-band {
  position: relative;
  height: var(--band);
}

.dl-scale {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gutter);
  right: var(--gutter);
}

.dl-night {
  position: absolute;
  top: var(--line);
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  height: 1px;
  background: var(--rule-ink);
}

.dl-light {
  position: absolute;
  top: calc(var(--line) - 0.5px);
  height: 2px;
  left: calc(var(--sr, 0.2569) * 100%);
  width: calc((var(--ss, 0.7618) - var(--sr, 0.2569)) * 100%);
  background: var(--white);
  transition: left var(--t-micro) var(--ease-react), width var(--t-micro) var(--ease-react);
}

.dl-t {
  position: absolute;
  top: calc(var(--line) + 1px);
  left: calc(var(--at) * 100%);
  width: 1px;
  height: 4px;
  margin-left: -0.5px;
  background: var(--rule-ink);
}

.dl-t--m { height: 8px; background: var(--fg2-ink); }
.dl-t:first-of-type { margin-left: 0; }
.dl-t:last-of-type { margin-left: -1px; }

.dl-lab {
  position: absolute;
  top: var(--lab);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fg2-ink);
  transform: translateX(-50%);
  transition: opacity var(--t-micro) var(--ease-react);
}

.dl-0 { left: 0; transform: none; }
.dl-24 { right: 0; transform: none; }
.dl-sr { left: calc(var(--sr, 0.2569) * 100%); color: var(--white); }
.dl-ss { left: calc(var(--ss, 0.7618) * 100%); color: var(--white); }
.dl-lab.is-near { opacity: 0; }

/* «Now»: a 1px white line (y 48–80) with «Ahora 14:41» over it. Never a rhombus. */
.dl-now {
  position: absolute;
  top: 0;
  left: calc(var(--now, 0.5) * 100%);
  width: 0;
  height: 100%;
}

.dl-now-l {
  position: absolute;
  top: calc(var(--line) - 24px);
  left: -0.5px;
  width: 1px;
  height: 32px;
  background: var(--white);
  transition: background-color var(--t-micro) var(--ease-react);
}

.dl-now-t,
.dl-thumb-t,
.dl-thumb-c {
  position: absolute;
  left: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  transform: translateX(-50%);
}

.dl-now-t {
  top: calc(var(--line) - 44px);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  color: var(--white);
  transition: opacity var(--t-micro) var(--ease-react), color var(--t-micro) var(--ease-react);
}

/* The thumb: a 1px white line (y 24–96), the hour over it, day or night and the reader's hour under it. */
.dl-thumb {
  position: absolute;
  top: 0;
  left: calc(var(--t, 0.5) * 100%);
  width: 0;
  height: 100%;
  visibility: hidden;
}

.dl-thumb-l {
  position: absolute;
  top: calc(var(--line) - 48px);
  left: -0.5px;
  width: 1px;
  height: 60px;
  background: var(--white);
}

.dl-thumb-t {
  top: calc(var(--line) - 72px);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
  color: var(--white);
}

.dl-thumb-c {
  top: var(--lab);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  color: var(--white);
}

/* Near an edge, the readouts hang from the line instead of centring on it. */
[data-al="s"] > .dl-now-t,
[data-al="s"] > .dl-thumb-t,
[data-al="s"] > .dl-thumb-c { transform: translateX(-6px); }
[data-al="e"] > .dl-now-t,
[data-al="e"] > .dl-thumb-t,
[data-al="e"] > .dl-thumb-c { transform: translateX(calc(-100% + 6px)); }

.dl.is-scrub .dl-thumb,
.dl.is-back .dl-thumb { visibility: visible; }
.dl.is-scrub .dl-now-l { background: var(--fg2-ink); }
.dl.is-scrub .dl-now-t { color: var(--fg2-ink); }
.dl-now.is-near .dl-now-t { opacity: 0; }

/* A tap travels to its point (.3s react); «Volver a ahora» settles back (.6s). A drag is 1:1. */
.dl.is-jump .dl-thumb { transition: left var(--t-micro) var(--ease-react); }
.dl.is-back .dl-thumb { transition: left var(--t-short) var(--ease-settle); }

/* The slider: one element over the band. Horizontal drags scrub, vertical ones scroll the page. */
.dl-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.dl-hit:focus-visible { outline: none; }
.dl.is-drag .dl-hit { cursor: grabbing; }

/* Focus: a ring around the reading the slider is on (the thumb's hour, or «Ahora»). */
.dl.is-focus:not(.is-scrub) .dl-now-t,
.dl.is-focus.is-scrub .dl-thumb-t {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

.dl-foot { padding: 8px var(--gutter) 0; }

/* Before the scripts run, the foot holds the height its controls take once armed: padding 8 + .dl-ctl 28
   + .doy (margin 6 + one row of 28). On phones (below) the .doy stacks: label 13 × 1.3, gap 4, track 28,
   gap 4 and a readout of two lines (13 × 1.4 each), as it reads up to ~520 px. */
html.js:not(.vivo):not(.no-vivo) .dl-foot { min-height: calc(8px + 28px + 6px + 28px); }

.dl-cap,
.dl-ins {
  max-width: 64ch;
  font-weight: 500;
  font-size: var(--small);
  line-height: 1.45;
  color: var(--fg2-ink);
}

.dl-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  min-height: 28px;
}

.ins-coarse { display: none; }

@media (pointer: coarse) {
  .ins-fine { display: none; }
  .ins-coarse { display: inline; }
}

/* Text buttons: 600/15, white, a 2px blue underline (the link grammar of the site). */
.dl-back,
.doy-hoy {
  padding: 4px 0;
  margin: -4px 0;
  border: 0;
  background: none;
  color: var(--white);
  font: inherit;
  font-weight: 600;
  font-size: var(--small);
  line-height: 1.3;
  text-decoration-line: underline;
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: text-decoration-color var(--t-micro) var(--ease-react);
}

@media (hover: hover) {
  .dl-back:hover,
  .doy-hoy:hover { text-decoration-color: var(--white); }
}

/* «Otro día del año»: a compact slider over the 365 days; its readout says the date and the light. */
.doy {
  display: grid;
  grid-template-columns: auto minmax(160px, 260px) minmax(0, 1fr) auto;
  grid-template-areas: "l track out hoy";
  align-items: center;
  column-gap: 20px;
  margin-top: 6px;
}

.doy-l { grid-area: l; font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--fg2-ink); white-space: nowrap; }
.doy-track { grid-area: track; position: relative; height: 28px; }
/* The readout is as wide as its text (its keyboard ring hugs it) and never leaves an hour alone on a line. */
.doy-out { grid-area: out; justify-self: start; max-width: 100%; font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--white); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.doy-hoy { grid-area: hoy; }

.doy-scale { position: absolute; inset: 0; }

.doy-rail {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule-ink);
}

.doy-m {
  position: absolute;
  top: calc(50% + 1px);
  left: calc(var(--at) * 100%);
  width: 1px;
  height: 4px;
  margin-left: -0.5px;
  background: var(--rule-ink);
}

.doy-today {
  position: absolute;
  top: calc(50% - 4px);
  left: calc(var(--today, 0) * 100%);
  width: 1px;
  height: 9px;
  margin-left: -0.5px;
  background: var(--fg2-ink);
}

.doy-thumb {
  position: absolute;
  top: calc(50% - 9px);
  left: calc(var(--d, 0) * 100%);
  width: 1px;
  height: 19px;
  margin-left: -0.5px;
  background: var(--white);
}

.doy-hit {
  position: absolute;
  inset: 0 -10px;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.doy-hit:focus-visible { outline: none; }
.doy.is-focus .doy-out { outline: 2px solid var(--white); outline-offset: 4px; }
.doy.is-drag .doy-hit { cursor: grabbing; }

@media (max-width: 719px) {
  .dl { --line: 62px; --lab: 76px; --band: 94px; }
  html:not(.js):not(.vivo) .dl,
  html.no-vivo .dl { --line: 14px; --lab: 28px; --band: 46px; }
  .dl-lab,
  .dl-thumb-c { font-size: 12px; }
  .dl-thumb-t { font-size: 17px; line-height: 1; top: calc(var(--line) - 62px); }
  .dl-thumb-l { top: calc(var(--line) - 42px); height: 54px; }
  .dl-now-t { top: calc(var(--line) - 40px); }
  .dl-now-l { top: calc(var(--line) - 22px); height: 30px; }
  .dl-cap,
  .dl-ins { font-size: 14px; }
  .doy {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "l hoy" "track track" "out out";
    row-gap: 4px;
  }
  html.js:not(.vivo):not(.no-vivo) .dl-foot { min-height: calc(8px + 28px + 6px + 13px * 1.3 + 4px + 28px + 4px + 2 * 13px * 1.4); }
}

/* ---------- Live rows: a ledger on ink, not cards ---------- */
.lv-rows {
  margin-top: clamp(16px, 2vw, 28px);
  border-bottom: 1px solid var(--rule-ink);
}

.lv {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 1.8vw, 24px);
  align-items: baseline;
  padding: 12px 0 14px;
  border-top: 1px solid var(--rule-ink);
}

.lv-l {
  grid-column: 1 / 4;
  font-weight: 600;
  font-size: var(--small);
  line-height: 1.35;
  color: var(--fg2-ink);
}

/* The gap before a status tag is the space before it, widened: when the tag wraps, the space stays at the
   end of the line above and the tag's dot starts on the row's left edge (a margin would step it in). */
.lv-l [data-v]:has(> .tag) { word-spacing: 8px; }
.lv-l [data-v]:has(> .tag) > * { word-spacing: normal; }

.lv-v {
  grid-column: 4 / 9;
  font-weight: 900;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--white);
}

/* Units of a duration ('h', 'min') speak in the text voice, as on the home (.eh-u). */
.lv-v .u {
  margin-inline: 0.12em 0.28em;
  font-weight: 600;
  font-size: clamp(13px, 0.34em, 19px);
  letter-spacing: 0;
}

.lv-n {
  grid-column: 9 / -1;
  font-weight: 500;
  font-size: var(--small);
  line-height: 1.45;
  color: var(--fg2-ink);
  text-wrap: pretty;
}

/* Tablet and small laptop: the clock and the notes take a fifth column (h1 1–7 | clock 8–12; label 1–3 |
   value 4–7 | note 8–12), so a note reads on two lines instead of three and the panel keeps to the first
   screen (spec §4.2, 1024×768); the readout of «Otro día del año» takes the width it needs. */
@media (min-width: 720px) and (max-width: 1099px) {
  .panel-title > h1 { grid-column: 1 / 8; }
  .panel-title > .clock-top,
  .clock > .clock-top,
  .clock > .clock-n { grid-column: 8 / -1; }
  .lv-v { grid-column: 4 / 8; }
  .lv-n { grid-column: 8 / -1; }
  .doy { grid-template-columns: auto minmax(120px, 1fr) auto auto; }
}

/* A short desktop screen: the masthead and the panel fit the first screen (spec §4.2: 1440×900, 1024×768;
   the third live row whole at 1280×720 and 1366×768). The title and the clock (one size, --h1) also follow
   the height, and the vertical rhythm tightens. */
@media (min-width: 720px) and (max-height: 920px) {
  :root {
    --h1: min(clamp(44px, 7.8vw, 116px), 10.5vh);
    --h1: min(clamp(44px, 7.8vw, 116px), 10.5svh);
  }
  .panel { padding-top: 24px; padding-bottom: 18px; }
  .panel .eyebrow { margin-bottom: 10px; }
  .dl { margin-top: 10px; }
  .lv-rows { margin-top: 12px; }
  .lv { padding: 9px 0 11px; }
}

@media (min-width: 720px) and (max-height: 760px) {
  :root {
    --h1: min(clamp(44px, 7.8vw, 116px), 10vh);
    --h1: min(clamp(44px, 7.8vw, 116px), 10svh);
  }
  .lv { padding: 8px 0 9px; }
}

@media (max-width: 479px) {
  .lv { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .lv-l,
  .lv-v,
  .lv-n { grid-column: 1; }
  .lv-v { font-size: 36px; }
}

.panel-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 12px;
  font-weight: 500;
  font-size: var(--small);
  line-height: 1.45;
  color: var(--fg2-ink);
}

/* ==========================================================================
   The document (white)
   ========================================================================== */

/* Prose and rows stay at 760; charts may use 976 (spec §4.1: toc 240 | gap 96 | body 976 at 1440). */
.doc { grid-template-columns: minmax(0, var(--wide)); }
.doc-intro,
.doc-body > section > :not(.chart) { max-width: var(--measure); }

@media (min-width: 1100px) {
  .doc {
    grid-template-columns: minmax(200px, 240px) minmax(0, var(--wide));
    column-gap: clamp(56px, 6.7vw, 96px);
  }
  .toc { top: 32px; }
}

.revisado {
  margin-top: 14px;
  font-size: var(--small) !important;
  line-height: 1.45 !important;
  color: var(--fg2-white);
}

/* ---------- Index: numbers written in the markup; the chapter on screen is aria-current ---------- */
.toc li { counter-increment: none; }
.toc a::before { content: none; }

.toc a {
  grid-template-columns: 2.4em minmax(0, 1fr);
  color: var(--fg2-white);
  font-weight: 500;
  transition: color var(--t-micro) var(--ease-react), font-weight var(--t-micro) var(--ease-react);
}

.toc-n { font-variant-numeric: tabular-nums; }

.toc a[aria-current="location"] {
  color: var(--ink);
  font-weight: 650;
}

/* ---------- A chapter: rule, number, question ---------- */
.doc-body > section { scroll-margin-top: 24px; }
.doc-body > section + section { margin-top: clamp(64px, 8vw, 104px); }

.cap { padding-top: 40px; }

.doc-body .cap h2 {
  gap: 14px;
  max-width: 20ch;
  margin-bottom: 0;
  font-weight: 750;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* The answer in words (01, 04). */
.doc .answer {
  max-width: 36ch;
  margin-top: 20px;
  font-weight: 550;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.42;
  letter-spacing: -0.015em;
}

/* ---------- The principal figure ---------- */
.fig { margin-top: clamp(28px, 3.2vw, 40px); }

.doc .fig-n {
  --fig: clamp(56px, 6.4vw, 96px);
  position: relative;
  font-weight: 900;
  font-size: var(--fig);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin-inline-start: -0.04em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 719px) {
  .doc .fig-n { --fig: clamp(40px, 12.4vw, 60px); }
}

.doc .fig-l {
  max-width: 44ch;
  margin-top: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.doc .fig-s {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: 10px;
  font-size: var(--small);
  line-height: 1.5;
  color: var(--fg2-white);
}

.fig-f { font-variant-numeric: tabular-nums; }

/* A share: 2px of ink on a 1px rule, as long as the share, under its own figure. */
.fig--pct .fig-n { padding-bottom: 18px; }

.fig--pct .fig-n::before,
.fig--pct .fig-n::after {
  content: "";
  position: absolute;
  left: 0.04em;
  bottom: 0;
}

.fig--pct .fig-n::before { right: 0; height: 1px; background: var(--rule-white); }
.fig--pct .fig-n::after { bottom: -0.5px; height: 2px; width: calc(var(--pct, 0) * (100% - 0.04em)); background: var(--ink); }

/* ---------- 05: three display rows (not columns), on their last baseline ---------- */
.disp {
  margin-top: clamp(28px, 3.2vw, 40px);
  border-bottom: 1px solid var(--rule-white);
}

.disp-r {
  display: grid;
  grid-template-columns: 2.75em minmax(0, 1fr);
  column-gap: clamp(16px, 2.4vw, 32px);
  align-items: last baseline;
  padding: 14px 0 16px;
  border-top: 1px solid var(--rule-white);
  font-size: clamp(44px, 5.4vw, 80px);
}

.doc .disp-v {
  font-weight: 900;
  font-size: 1em;
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.doc .disp-l {
  font-weight: 500;
  font-size: var(--text-size);
  line-height: 1.35;
  text-wrap: balance;
}

/* ---------- Ledger rows: label (+ note call) | value | note ---------- */
.doc .sub {
  margin: clamp(40px, 4.6vw, 56px) 0 4px;
  font-weight: 700;
  font-size: var(--text-size);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.doc .aside {
  margin-top: 14px;
  font-size: var(--small);
  line-height: 1.5;
  color: var(--fg2-white);
}

/* Phones: each row its own grid, label | value (right), the note under both. From 720px one grid per
   ledger, every row a subgrid of it: the values share one column, as wide as the widest value of the
   ledger (up to a cap), so labels, values and notes line up from row to row. */
.ledger {
  margin-top: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--rule-white);
}

.sub + .ledger { margin-top: 8px; }

.lr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) fit-content(48%);
  column-gap: 16px;
  row-gap: 4px;
  align-items: baseline;
  padding: 14px 0 16px;
  border-top: 1px solid var(--rule-white);
}

.doc .lr dt {
  font-weight: 500;
  font-size: var(--text-size);
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.doc .lr dt:has(> .tag) { word-spacing: 8px; }
.doc .lr dt:has(> .tag) > * { word-spacing: normal; }

.doc .lr-v {
  font-weight: 650;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-wrap: balance;
}

.doc .lr-n {
  grid-column: 1 / -1;
  max-width: 64ch;
  font-weight: 450;
  font-size: var(--small);
  line-height: 1.5;
  color: var(--fg2-white);
  text-wrap: pretty;
}

/* A calculation's formula, on its own line in figures that line up. */
.lr-f {
  display: block;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Text figures (laws, rules) and groups: on phones label, text and note stack across the row. */
.lr--text > *,
.lr--group > * { grid-column: 1 / -1; }

.doc .lr--text .lr-v {
  text-align: left;
  font-weight: 600;
  font-size: var(--text-size);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* A share: 2px of ink in a full-width well (the well is 100 %), inside the row, under its own label
   and value. A bar on the row's rule sat between two labels and read as the share of the row above. */
.lr--pct::before,
.lr--pct::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  height: 2px;
  margin-top: 6px;
}

.lr--pct::before { background: var(--wash); }
.lr--pct::after { width: calc(var(--pct, 0) * 100%); background: var(--ink); }
.lr--pct > .lr-n { grid-row: 3; }

/* A group in one row (ages, cantons): name | value, and a bar under each share. */
.doc .lr--group .lr-v { text-align: left; font-size: var(--text-size); }

.lr-list { list-style: none; }

.doc .lr-li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: baseline;
  padding: 0;
  font-size: var(--text-size);
  line-height: 1.4;
}

.doc .lr-li + .lr-li { margin-top: 8px; }
.lr-li-l { font-weight: 450; }

.lr-li > data {
  font-weight: 650;
  font-size: clamp(19px, 1.6vw, 22px);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

.lr-li--pct::before,
.lr-li--pct::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: 2;
  height: 2px;
  margin-top: 6px;
}

.lr-li--pct::before { background: var(--wash); }
.lr-li--pct::after { width: calc(var(--pct, 0) * 100%); background: var(--ink); }

/* From 720px every ledger of the page has the same three tracks, so the values and the notes share one x
   from chapter to chapter (a track sized to each ledger's own widest value made the figures zig-zag).
   --lr-val holds the widest value of the page («USD 208.214 millones»: ~228px at 22px, ~197px at 19px);
   a rarer, longer one wraps (balance) instead of widening its ledger. */
@media (min-width: 720px) {
  .ledger {
    --lr-val: 200px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lr-val) minmax(0, 0.9fr);
    column-gap: 24px;
  }
  .lr { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 24px; }
  @supports not (grid-template-columns: subgrid) {
    .lr { grid-template-columns: minmax(0, 1fr) var(--lr-val) minmax(0, 0.9fr); }
  }
  .doc .lr-v { text-align: left; }
  .doc .lr-n { grid-column: 3; grid-row: 1 / span 2; }
  .lr--pct::before,
  .lr--pct::after { grid-column: 1 / 3; }
  .lr--pct > .lr-n { grid-row: 1 / span 2; }
  .lr--text > dt,
  .lr--group > dt { grid-column: 1; }
  .doc .lr--text .lr-v,
  .doc .lr--group .lr-v { grid-column: 2 / -1; }
  .doc .lr--text .lr-n,
  .doc .lr--group .lr-n { grid-column: 2 / -1; grid-row: 2; }
}

@media (min-width: 1100px) {
  .ledger { --lr-val: 232px; }
}

@media (max-width: 479px) {
  .lr { column-gap: 12px; }
}

/* ==========================================================================
   Numbered notes (span.fn): superior figures after the punctuation, never inside a figure.
   ========================================================================== */
.fn {
  font-weight: 600;
  font-variant-position: super;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--fg2-white);
}

[data-surface="ink"] .fn { color: var(--fg2-ink); }

.fn a {
  position: relative;
  color: inherit;
  text-decoration: none !important;
  scroll-margin-top: 96px;
  transition: color var(--t-micro) var(--ease-react);
}

/* A target 24px tall around a glyph a few pixels wide. In a call to several documents each target stops
   at its own number (the comma goes to the document before it), so no part of a number opens the next
   document; a lone call is a centred box at least 24px wide. */
.fn a::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.fn a:not(:first-of-type)::after { left: 0; }
.fn a:not(:last-of-type)::after { right: -0.1em; }

.fn a:only-of-type::after {
  left: 50%;
  right: auto;
  width: max(24px, 100% + 12px);
  transform: translateX(-50%);
}

/* The comma between two documents: Geist has no superior comma, so it is set small and raised to the
   superior figures' baseline. A call right after a digit, «%» or «*» (.fn-d, written by data:sync) keeps a
   little air so it never reads as an exponent. */
.fn-sep {
  font-variant-position: normal;
  font-size: 0.55em;
  line-height: 0;
  vertical-align: 0.4em;
}

.fn-d { margin-left: 0.18em; }

@media (hover: hover) {
  .fn a:hover { color: var(--ink); }
  [data-surface="ink"] .fn a:hover { color: var(--white); }
}

.fn a:focus-visible { color: var(--ink); outline: 2px solid currentColor; outline-offset: 2px; }
[data-surface="ink"] .fn a:focus-visible { color: var(--white); }

/* Coming back from the list: the call it came from is marked. */
.fn a:target {
  color: var(--ink);
  text-decoration: underline 1px currentColor !important;
  text-underline-offset: 3px;
}

/* On a large figure the call is the superior figure of a 22px call (17px on phones): Geist draws those
   .55 as tall, their top on the cap height. They are set here as plain figures at that size, so that a
   call to several documents («17,28,29») keeps its commas on the figures' baseline (Geist has no superior
   comma). Top: the figure's cap height (.08em under its .92 line box) less the call's own (.13em
   under its line box); 4px after the last glyph. */
.fig-n .fn {
  --fn: calc(22px * 0.55);
  position: relative;
  top: calc(var(--fig) * 0.08 - 0.13em);
  margin-left: 4px;
  font-size: var(--fn);
  font-variant-position: normal;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: top;
}

.fig-n .fn-sep { font-size: 1em; vertical-align: baseline; line-height: inherit; }

@media (max-width: 719px) {
  .fig-n .fn { --fn: calc(17px * 0.55); }
  .fn a { scroll-margin-top: 72px; }
}

/* Geist did not load: no superior glyphs to switch to, so the call is raised and set small. */
.no-geist .fn {
  font-variant-position: normal;
  font-size: 0.62em;
  line-height: 0;
  vertical-align: super;
}

.no-geist .fig-n .fn { font-size: 14px; line-height: 1; vertical-align: top; }
.no-geist .fn-sep { font-size: 1em; vertical-align: baseline; }
.no-geist :is(.panel h1, .clock-v, .lv-v, .fig-n, .disp-v) { letter-spacing: -0.02em; }

/* ---------- Respuestas breves ---------- */
.qa-item {
  padding: 18px 0 20px;
  border-top: 1px solid var(--rule-white);
}

.qa-item:last-child { border-bottom: 1px solid var(--rule-white); }

.doc .qa h3 {
  margin-bottom: 8px;
  font-weight: 700;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------- Fuentes y criterios ---------- */
.src .calc { font-variant-numeric: tabular-nums; white-space: nowrap; }

.doc ol.fuentes { list-style: none; margin-top: 12px; }
.fuentes ol { list-style: none; }
.fuentes-grupo + .fuentes-grupo { margin-top: 28px; }

.doc .fuentes-cap {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
  font-weight: 650;
  font-size: var(--small);
  line-height: 1.4;
  letter-spacing: 0;
}

.doc .fuentes li[id] {
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--rule-white);
  color: var(--fg2-white);
  scroll-margin-top: 96px;
  transition: color var(--t-micro) var(--ease-react);
}

.doc .fuentes li[id]:focus { outline: none; }
.doc .fuentes .nw { white-space: nowrap; }
.doc .fuentes li[id]:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.doc .fuente-ref {
  font-weight: 450;
  font-size: var(--small);
  line-height: 1.5;
}

.fuente-n {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: underline 1px transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-micro) var(--ease-react);
}

.doc .fuente-vueltas {
  margin-top: 4px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
}

.doc .fuentes a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc .fuente-vueltas a { text-decoration-thickness: 2px; }

/* The entry a note jumped to: ink text, its number underlined in ink. */
.doc .fuentes li[id]:target { color: var(--ink); }
.fuentes li[id]:target .fuente-n { text-decoration-color: var(--ink); }

@media (max-width: 719px) {
  .doc .fuentes li[id] { scroll-margin-top: 72px; }
}

/* ---------- Gráficos: series drawn at build time (scripts/lib/ecuador-charts.mjs) ----------
   A figure.chart holds its title (with its footnote) and summary, the plot (div.area: the SVG data
   layer plus HTML labels at --x/--y, percentages of the plot) and, under it, the note and the data
   table. Lines are 2px: ink, and one blue series when a chart has several; the grid is 1px rule, the
   base at 0 is ink. Labels never scale. Where each label goes was decided at build time: data-at, --o
   (the leader's length) and --a (the anchor) on phones, data-wat, --wo and --wa from 720px; end labels
   sit inside the plot on phones and in a column right of it from 720px (--wy: their place there).
   Only lines, rules and 4px squares: nothing filled, blurred or blended. */
.chart {
  --h: 180px;
  margin-top: 40px;
}

@media (min-width: 720px) { .chart { --h: 220px; } }
@media (min-width: 1100px) { .chart { --h: 240px; } }

.doc .chart-t {
  max-width: 60ch;
  font-weight: 650;
  font-size: var(--text-size);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.doc .chart-s,
.doc .chart-n {
  max-width: 64ch;
  font-size: var(--small);
  line-height: 1.5;
  color: var(--fg2-white);
}

.doc .chart-s { margin-top: 6px; }
.doc .chart-n { margin-top: 4px; }
.chart-n .tag { margin-right: 6px; }

.chart .plot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 28px 0 36px;
}

.chart .area,
.chart .ends {
  grid-area: 1 / 1;
  position: relative;
  height: var(--h);
}

.chart .ends { pointer-events: none; }

.chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart svg path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart .grid path { stroke: var(--rule-white); stroke-width: 1px; stroke-linecap: butt; }
.chart .grid .base { stroke: var(--ink); }
.chart .ink path { stroke: var(--ink); stroke-width: 2px; }
.chart .focus path { stroke: var(--blue); stroke-width: 2px; }

.chart .yl,
.chart .xl,
.chart .ann,
.chart .end {
  position: absolute;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0;
}

.chart .yl,
.chart .xl {
  color: var(--fg2-white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* y: above its line, at the left; only the top one carries the unit. */
.chart .yl {
  left: 0;
  top: var(--y);
  transform: translateY(calc(-100% - 2px));
}

/* On a phone the plot is narrow and a steep first segment can run through a label («50» of 01): the
   label is knocked out of the page's white, so the line passes behind it and the digits stay whole. */
@media (max-width: 719px) {
  .chart .yl {
    padding-inline-end: 4px;
    background: var(--white);
  }
}

/* x: under the base, on a 1×4 tick (first and last aligned to the edges). */
.chart .xl {
  left: var(--x);
  top: 100%;
  margin-top: 8px;
  transform: translateX(-50%);
}

.chart .xl::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 1px;
  height: 4px;
  margin-left: -0.5px;
  background: var(--ink);
}

.chart .xl-s { transform: none; }
.chart .xl-s::before { left: 0; margin-left: 0; }
.chart .xl-e { transform: translateX(-100%); }
.chart .xl-e::before { left: auto; right: 0; margin-left: 0; }

/* 4px squares: a survey, a period not yet complete. Never rotated. */
.chart .sq {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--ink);
}

.chart .sq.f { background: var(--blue); }

/* Annotations: lines of 24ch at most, broken by the build (<br>), joined to their point by a 1px
   leader --o long. */
.chart .ann {
  left: var(--x);
  top: var(--y);
  white-space: nowrap;
  color: var(--ink);
  transform: translate(var(--tx, 0), var(--ty, 0));
}

.chart .ann::after {
  content: "";
  position: absolute;
  background: var(--ink);
}

/* End labels: the name in the text voice, the value bold. */
.chart .end {
  color: var(--ink);
  white-space: nowrap;
}

.chart .end b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 719px) {
  .chart .xl-w { display: none; }                 /* an x label with no room on a phone */
  .chart .ann[data-at="a"] { --tx: calc(var(--a) * -1); --ty: calc(-100% - var(--o)); }
  .chart .ann[data-at="b"] { --tx: calc(var(--a) * -1); --ty: var(--o); }
  .chart .ann[data-at="r"] { --tx: var(--o); --ty: calc(var(--a) * -1); }
  .chart .ann[data-at="l"] { --tx: calc(-100% - var(--o)); --ty: calc(var(--a) * -1); }
  .chart .ann[data-at="a"]::after,
  .chart .ann[data-at="b"]::after { left: var(--a); width: 1px; height: var(--o); margin-left: -0.5px; }
  .chart .ann[data-at="a"]::after { top: 100%; }
  .chart .ann[data-at="b"]::after { bottom: 100%; }
  .chart .ann[data-at="r"]::after,
  .chart .ann[data-at="l"]::after { top: var(--a); width: var(--o); height: 1px; margin-top: -0.5px; }
  .chart .ann[data-at="r"]::after { right: 100%; }
  .chart .ann[data-at="l"]::after { left: 100%; }

  /* Inside the plot, right-aligned at the end of the line, --o over or under it. */
  .chart .end {
    left: var(--x);
    top: var(--y);
    text-align: right;
    transform: translate(-100%, calc(-100% - var(--o)));
  }
  .chart .end[data-at="b"] { transform: translate(-100%, var(--o)); }
  .chart .end-2 b { display: block; }
}

@media (min-width: 720px) {
  .chart .ann[data-wat="a"] { --tx: calc(var(--wa) * -1); --ty: calc(-100% - var(--wo)); }
  .chart .ann[data-wat="b"] { --tx: calc(var(--wa) * -1); --ty: var(--wo); }
  .chart .ann[data-wat="r"] { --tx: var(--wo); --ty: calc(var(--wa) * -1); }
  .chart .ann[data-wat="l"] { --tx: calc(-100% - var(--wo)); --ty: calc(var(--wa) * -1); }
  .chart .ann[data-wat="a"]::after,
  .chart .ann[data-wat="b"]::after { left: var(--wa); width: 1px; height: var(--wo); margin-left: -0.5px; }
  .chart .ann[data-wat="a"]::after { top: 100%; }
  .chart .ann[data-wat="b"]::after { bottom: 100%; }
  .chart .ann[data-wat="r"]::after,
  .chart .ann[data-wat="l"]::after { top: var(--wa); width: var(--wo); height: 1px; margin-top: -0.5px; }
  .chart .ann[data-wat="r"]::after { right: 100%; }
  .chart .ann[data-wat="l"]::after { left: 100%; }

  /* A column right of the plot, at least 64px, as wide as its widest label; name over value. */
  .chart .plot { grid-template-columns: minmax(0, 1fr) auto; }
  .chart .ends {
    grid-area: 1 / 2;
    display: grid;
    grid-template-rows: var(--h);
    min-width: 64px;
    padding-left: 12px;
  }
  .chart .end {
    grid-area: 1 / 1;
    position: relative;
    top: var(--wy);
    align-self: start;
    transform: translateY(-50%);
  }
  .chart .end b { display: block; }
}

/* The data, without the chart: a table that opens on request (no JS needed). */
.chart-data { margin-top: 12px; }

.chart-data summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--small);
  line-height: 1.5;
  text-decoration-line: underline;
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.chart-data summary::-webkit-details-marker { display: none; }
.chart-data summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.chart-data table,
.chart .receipt {
  width: 100%;
  max-width: var(--measure);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.chart-data table { margin-top: 12px; }

.chart-data caption {
  caption-side: top;
  padding-bottom: 8px;
  text-align: left;
  font-weight: 600;
  font-size: var(--small);
  line-height: 1.45;
}

.chart-data th,
.chart-data td {
  padding: 6px 0 6px 16px;
  border-top: 1px solid var(--rule-white);
  font-size: var(--small);
  line-height: 1.4;
  text-align: right;
  vertical-align: baseline;
}

.chart-data th:first-child { padding-left: 0; text-align: left; font-weight: 500; }
.chart-data thead th { font-weight: 600; color: var(--fg2-white); vertical-align: bottom; }
.chart-data td { font-weight: 450; white-space: nowrap; }
.chart-data tbody tr:last-child > * { border-bottom: 1px solid var(--rule-white); }

/* The receipt (06): label | value, a 1px rule between lines, a 2px ink rule over each total. */
.chart .receipt { margin-top: 20px; }

.chart .receipt th,
.chart .receipt td {
  padding: 11px 0 12px;
  border-top: 1px solid var(--rule-white);
  font-size: var(--text-size);
  line-height: 1.35;
  vertical-align: baseline;
}

.chart .receipt th { padding-right: 24px; text-align: left; font-weight: 450; }
.chart .receipt td { text-align: right; font-weight: 600; white-space: nowrap; }
.chart .receipt .tot > * { border-top: 2px solid var(--ink); font-weight: 700; }
.chart .receipt tr:last-child > * { border-bottom: 1px solid var(--rule-white); }
.chart .receipt + .chart-n { margin-top: 12px; }

/* ==========================================================================
   Movimiento (/ecuador/ecuador-fx.js; spec §5)
   Everything here hangs from html.fx-ecuador-pagina, added only by a motion init that succeeded:
   without it (no JS, reduced motion, no GSAP, a failed init) none of this applies and the page reads
   as above. The one start state written here is [data-fx="rise"], a block the script prepared that
   waits for its turn. Each 1px border the script draws becomes an element or pseudo-element that
   scales with a custom property, 1 when unset (--draw a row's top rule, --close the rule that closes
   a list, --cap a chapter's rule); bars scale with --grow. The script writes those properties and
   inline opacity and transform; it never measures per frame.
   ========================================================================== */

/* Rolling digits (sistema.css draws the slots): each slot shares its figure's line box. */
.fx-ecuador-pagina .clock-v .odo-d { height: 0.94em; height: 1lh; line-height: 0.94em; }
.fx-ecuador-pagina .lv-v .odo-d { height: 0.95em; height: 1lh; line-height: 0.95em; }

/* Row rules: a row the script draws (.fx-r) hides its border, and the element it adds (.fx-rule)
   draws it. Not a pseudo-element of a cell: the cells rise on their own, the rule stays put. */
.fx-ecuador-pagina .fx-r {
  position: relative;
  border-top-color: transparent;
}

.fx-ecuador-pagina .fx-rule {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule-white);
  transform: scaleX(var(--draw, 1));
  transform-origin: 0 50%;
  pointer-events: none;
}

.fx-ecuador-pagina .lv > .fx-rule { background: var(--rule-ink); }

/* A block waiting for its turn (the start state of sistema.reveal). */
.fx-ecuador-pagina [data-fx="rise"] {
  opacity: 0;
  transform: translateY(24px);
}

/* The rule that closes a list. */
.fx-ecuador-pagina :is(.lv-rows, .ledger, .disp) {
  position: relative;
  border-bottom-color: transparent;
}

.fx-ecuador-pagina .qa-item:last-child { border-bottom-color: transparent; }

.fx-ecuador-pagina :is(.lv-rows, .ledger, .disp, .qa-item:last-child)::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule-white);
  transform: scaleX(var(--close, 1));
  transform-origin: 0 50%;
}

.fx-ecuador-pagina .lv-rows::after { background: var(--rule-ink); }

/* A chapter's 1px ink rule. */
.fx-ecuador-pagina .doc-body > section {
  position: relative;
  border-top-color: transparent;
}

.fx-ecuador-pagina .doc-body > section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(var(--cap, 1));
  transform-origin: 0 50%;
}

/* Bars grow from their start. */
.fx-ecuador-pagina :is(.fig--pct .fig-n, .lr--pct, .lr-li--pct)::after {
  transform: scaleX(var(--grow, 1));
  transform-origin: 0 50%;
}

/* The day line: the night rule opens from the «now» point; «now» glides to each new minute. */
.fx-ecuador-pagina .dl-night {
  transform-origin: calc(var(--gutter) + var(--now, 0.5) * (100% - 2 * var(--gutter))) 50%;
}

.fx-ecuador-pagina .dl-now { transition: left var(--t-short) var(--ease-settle); }
.fx-ecuador-pagina .dl.is-wrap .dl-now { transition: none; }

/* Then → now: two twins in one place while the outgoing one fades over the incoming one. */
.fx-ecuador-pagina .fx-xf { position: relative; }

.fx-ecuador-pagina .fx-out {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* The receipt: separate borders (the same look), so each cell paints its own; while a total's rule
   draws, a 2px element placed on the row stands in for its border. */
.fx-ecuador-pagina .chart[data-kind="receipt"] { position: relative; }
.fx-ecuador-pagina .chart .receipt { border-collapse: separate; border-spacing: 0; }
.fx-ecuador-pagina .chart .receipt.is-drawing .tot > * { border-top-color: transparent; }

.fx-ecuador-pagina .rc-rule {
  position: absolute;
  height: 2px;
  background: var(--ink);
  transform-origin: 0 50%;
  pointer-events: none;
}

@media print {
  .fx-ecuador-pagina .rc-rule { display: none; }
  .fx-ecuador-pagina [data-fx="rise"] { opacity: 1; transform: none; }   /* beforeprint finishes the rest */
}

/* ---------- Forced colors: lines, bars and squares keep their shape ---------- */
@media (forced-colors: active) {
  .dl-light, .dl-t, .dl-now-l, .dl-thumb-l, .doy-thumb, .doy-today, .doy-rail, .doy-m,
  .lr--pct::after, .lr-li--pct::after, .fig--pct .fig-n::after {
    forced-color-adjust: none;
    background: CanvasText;
  }
  .dl-night, .lr--pct::before, .lr-li--pct::before { forced-color-adjust: none; background: GrayText; }
  .tag::before { forced-color-adjust: none; background: CanvasText; }
  .chart svg path,
  .chart .ink path,
  .chart .grid .base { stroke: CanvasText; }
  .chart .focus path { stroke: Highlight; }
  .chart .grid path:not(.base) { stroke: GrayText; }
  .chart .sq, .chart .ann::after, .chart .xl::before { forced-color-adjust: none; background: CanvasText; }
  /* The drawn rules stay plain borders here. */
  .fx-ecuador-pagina :is(.fx-r, .doc-body > section) { border-top-color: CanvasText; }
  .fx-ecuador-pagina :is(.lv-rows, .ledger, .disp, .qa-item:last-child) { border-bottom-color: CanvasText; }
  .fx-ecuador-pagina .chart .receipt.is-drawing .tot > * { border-top-color: CanvasText; }
  .fx-ecuador-pagina .fx-rule,
  .fx-ecuador-pagina .doc-body > section::before,
  .fx-ecuador-pagina :is(.lv-rows, .ledger, .disp, .qa-item:last-child)::after,
  .fx-ecuador-pagina .rc-rule { display: none; }
}

/* ---------- Print: the page as a plain ledger; the sources print their addresses ---------- */
@media print {
  .dl, .panel-status, .doy { display: none !important; }
  .panel { padding: 0 0 16px; }
  .panel h1, .clock-v, .lv-v { color: #000; }
  .clock-l, .clock-n, .lv-l, .lv-n, .fn { color: #000 !important; }
  .lv, .lv-rows { border-color: #000; }
  .tag::before { display: none; }
  .doc-body > section + section { margin-top: 32px; }
  .lr--pct::after, .lr-li--pct::after, .fig--pct .fig-n::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .chart .sq, .chart .ann::after, .chart .xl::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .chart { break-inside: avoid; }
  #fuentes a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    overflow-wrap: anywhere;
  }
  .doc .fuentes li[id] { color: #000; break-inside: avoid; }
}