/* ProveedoresDeGobierno.com — the public site's shared stylesheet.
   Light redesign, 2026-10: the site now speaks the app's own visual language, so a visitor who
   clicks «Comienza gratis» lands on a sign-in page that looks like the same product.

   Every value below is carried over from Proveedores-Admin (src/app/globals.css, the «paper»
   reader palette; tailwind.config.ts; layout.tsx) — see docs/UX/design-system-2026-08-28.md.
   Plain static CSS: no build step, no framework — opens from file:// and deploys to Cloudflare
   Pages as-is. Shared by index.html, precios.html and every page in guias/. */

/* The app's faces: Instrument Sans (reading), Schibsted Grotesk (display), JetBrains Mono.
   Imported here as well as linked from index/precios so the guide pages, whose HTML is not
   part of this work, get them too. The browser fetches the same URL once. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Schibsted+Grotesk:wght@500;600;700&display=swap");

/* ---------- tokens ----------
   Colours are RGB channels, as in the app, so any of them takes an alpha:
   rgb(var(--ink-4) / .4). There is no border token in the app either: a border is --ink-4 at
   an alpha, and the alpha is the weight dial. */
:root {
  color-scheme: light dark;

  --paper: 246 247 249;     /* #f6f7f9 — the page */
  --paper-2: 255 255 255;   /* #ffffff — cards and raised surfaces */
  --paper-3: 238 240 243;   /* #eef0f3 — chips, quiet fills, hover */
  --ink: 23 26 31;          /* #171a1f — headings, primary text, the primary button */
  --ink-2: 61 67 76;        /* #3d434c — body */
  --ink-3: 91 100 114;      /* #5b6472 — secondary text (5.3:1 on the page) */
  --ink-4: 182 188 199;     /* #b6bcc7 — borders via /25–/50 */
  --warm: 199 74 8;         /* #c74a08 — deadlines and plazos only */
  --warm-soft: 255 247 240;
  --cool: 36 86 214;        /* #2456d6 — links */
  --cool-soft: 238 242 252;
  --plan: 166 30 77;        /* #a61e4d — «Prepara», and nothing else */
  --plan-soft: 253 238 242;

  --font-sans: "Instrument Sans", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: "Schibsted Grotesk", "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The app's corners (diario dialect): rounded-md for buttons, rounded-lg for cards,
     rounded-xl for the one hero-weight panel. */
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --rule: rgb(var(--ink-4) / .4);        /* card borders (border-ink-4/40) */
  --rule-soft: rgb(var(--ink-4) / .3);   /* section rules (border-ink-4/30) */
  --shadow-sm: 0 1px 2px rgb(var(--ink) / .05);   /* shadow-sm: depth is mostly paper-2 on paper */

  --wrap: 1080px;
  --measure: 42rem;  /* max-w-2xl: prose is never wider */
}

/* Dark mode. The app's reader screens are light only, so this is the site's own dark version
   of the paper palette: same roles, same names, contrast checked against the same 4.5:1 bar. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: 17 19 23;        /* #111317 */
    --paper-2: 25 28 33;      /* #191c21 */
    --paper-3: 35 39 46;      /* #23272e */
    --ink: 238 240 243;       /* #eef0f3 */
    --ink-2: 198 203 211;     /* #c6cbd3 */
    --ink-3: 156 164 177;     /* #9ca4b1 */
    --ink-4: 96 104 117;      /* #606875 */
    --warm: 245 145 84;       /* #f59154 */
    --warm-soft: 46 29 18;
    --cool: 133 166 247;      /* #85a6f7 */
    --cool-soft: 24 33 56;
    --plan: 243 122 160;      /* #f37aa0 */
    --plan-soft: 54 22 35;
    --rule: rgb(var(--ink-4) / .55);
    --rule-soft: rgb(var(--ink-4) / .45);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .3);
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: rgb(var(--paper));
  color: rgb(var(--ink-2));
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgb(var(--ink)); color: rgb(var(--paper)); }
h1, h2, h3 {
  font-family: var(--font-display);
  color: rgb(var(--ink));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
b, strong { color: rgb(var(--ink)); font-weight: 600; }
a { color: rgb(var(--cool)); text-decoration: none; transition: color .15s; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible { outline: 2px solid rgb(var(--cool)); outline-offset: 2px; border-radius: var(--radius-md); }
img { max-width: 100%; }
.num { white-space: nowrap; }

/* ---------- layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section-tight { padding: 40px 0; }
.prose { max-width: var(--measure); }
.eyebrow { font-size: 14px; font-weight: 600; color: rgb(var(--ink-3)); }   /* sentence case, never small caps */
.eyebrow + h1, .eyebrow + h2 { margin-top: 6px; }
.lede { font-size: 17px; color: rgb(var(--ink-2)); max-width: var(--measure); }
.h2 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); }
.h2-xl { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.625rem); line-height: 1.15; letter-spacing: -0.02em; }
.intro { margin: 14px 0 0; max-width: var(--measure); }
.note { font-size: 14px; color: rgb(var(--ink-3)); margin: 12px 0 0; }
.fine-print { font-size: 14px; color: rgb(var(--ink-3)); line-height: 1.55; max-width: var(--measure); margin: 24px 0 0; }
.textlink { color: rgb(var(--cool)); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .section { padding: 48px 0; }
  .lede { font-size: 16px; }
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgb(var(--paper) / .9);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav .wrap { display: flex; align-items: center; gap: 24px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: rgb(var(--ink)); }
.brand:hover { text-decoration: none; }
.brand i { color: rgb(var(--ink-3)); font-size: 19px; }  /* the guide pages still carry an icon */
.nav .spacer, .foot .spacer { flex: 1; }
.navgroup { display: flex; gap: 24px; }
.nav a.navlink { color: rgb(var(--ink-2)); font-size: 15px; font-weight: 500; }
.nav a.navlink:hover { color: rgb(var(--ink)); text-decoration: none; }
.nav a.navlink[aria-current="page"] { color: rgb(var(--ink)); }
.nav a.navlink.enter {
  color: rgb(var(--ink)); font-weight: 600;
  border: 1px solid rgb(var(--ink-3)); border-radius: var(--radius-md); padding: 6px 14px;
}
.nav a.navlink.enter:hover { background: rgb(var(--paper-3)); }
@media (max-width: 560px) { .nav a.navlink.hide-sm { display: none; } }
/* On a phone the two page links move to a second row instead of disappearing: the guide is
   part of the copy's navigation, and «Entrar» stays on the first row next to the name. */
@media (max-width: 760px) {
  .nav { position: static; }
  .nav .wrap { flex-wrap: wrap; gap: 0 16px; padding-top: 10px; padding-bottom: 8px; }
  .nav .navgroup { order: 3; width: 100%; gap: 20px; padding: 8px 0 2px; }
  .nav .navgroup a.navlink { font-size: 14px; }
  .brand { font-size: 16px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.2;
  border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: rgb(var(--ink)); color: rgb(var(--paper)); }
.btn-primary:hover { background: rgb(var(--ink-2)); }
.btn-ghost { background: transparent; color: rgb(var(--ink)); border-color: rgb(var(--ink-3)); }
.btn-ghost:hover { background: rgb(var(--paper-3)); }
.btn-lg { min-height: 50px; padding: 12px 24px; font-size: 16px; }
.btn-block { width: 100%; }
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }
@media (max-width: 480px) { .actions .btn { width: 100%; } }

/* ---------- small labels ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; line-height: 1.3;
  padding: 4px 10px; border-radius: 999px;
  background: rgb(var(--paper-3)); color: rgb(var(--ink-2)); border: 1px solid var(--rule-soft);
}
.tag svg { width: 15px; height: 15px; }
/* The plan's own colour, where the plan itself is the subject (app: PlanBadge). */
.tag-plan { background: rgb(var(--plan-soft)); color: rgb(var(--plan)); border-color: rgb(var(--plan) / .25); }

/* ---------- hero ---------- */
.hero { padding: 88px 0 72px; }
.hero h1 { font-size: clamp(2.125rem, 1.25rem + 3.6vw, 3.625rem); line-height: 1.06; letter-spacing: -0.025em; font-weight: 700; max-width: 20ch; }
.hero .hero-lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: rgb(var(--ink-2)); max-width: 40rem; margin: 24px 0 0; }
.hero .hero-lead strong { font-weight: 700; }
/* The guide pages use .hero with a .lede */
.hero .lede { margin-top: 18px; }
@media (max-width: 640px) { .hero { padding: 48px 0 40px; } }

/* ---------- the statement (B.3) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 56px; align-items: start; }
.split p { margin: 0; font-size: 17px; }
.rule-top { border-top: 1px solid var(--rule-soft); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split p { font-size: 16px; } }

/* ---------- headline numbers (B.4) ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 32px; background: rgb(var(--paper-2));
  border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.stat { padding: 22px 22px 20px; display: flex; flex-direction: column; border-left: 1px solid var(--rule-soft); }
.stat:first-child { border-left: 0; }
.stat .n { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: rgb(var(--ink)); text-wrap: balance; }
.stat .l { font-size: 15px; color: rgb(var(--ink-2)); margin-top: 8px; line-height: 1.45; flex: 1; }
.stat .p { font-family: var(--font-mono); font-size: 12px; color: rgb(var(--ink-3)); margin-top: 14px; }
.source { font-size: 14px; color: rgb(var(--ink-3)); margin: 14px 0 0; max-width: var(--measure); }
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
}
@media (max-width: 640px) { .stat { padding: 16px 14px 14px; } .stat .l { font-size: 14px; } .stat .p { font-size: 11.5px; } }

/* ---------- the proof band (B.5) ---------- */
.band { background: rgb(var(--paper-2)); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.band h2 { max-width: 30ch; }
.band .body { font-size: 18px; max-width: var(--measure); margin: 20px 0 0; }
.band .bridge {
  max-width: var(--measure); margin: 24px 0 0; padding: 14px 0 0 0;
  border-top: 1px solid var(--rule-soft); color: rgb(var(--ink));
}
@media (max-width: 640px) { .band .body { font-size: 16px; } }

/* ---------- question lists (B.6, B.7) ---------- */
.qlist { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; counter-reset: q; }
.qlist li { counter-increment: q; position: relative; padding: 18px 0 18px 40px; border-top: 1px solid var(--rule-soft); }
.qlist li::before {
  content: counter(q, decimal-leading-zero);
  position: absolute; left: 0; top: 21px;
  font-family: var(--font-mono); font-size: 12.5px; color: rgb(var(--ink-3));
}
.qlist li b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; }
.qlist li span { font-size: 15.5px; }
.qlist.inline li b { display: inline; font-size: inherit; font-family: var(--font-sans); }
@media (max-width: 820px) { .qlist { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .qlist li { padding: 14px 0 14px 34px; } .qlist li::before { top: 17px; } .qlist li span { font-size: 15px; } }

/* ---------- Prepara panel (B.7) ---------- */
.plan-panel {
  background: rgb(var(--paper-2)); border: 1px solid var(--rule); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); padding: 40px 44px 36px;
  border-top: 3px solid rgb(var(--plan));
}
.plan-panel .lede { margin-top: 16px; }
.price-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule-soft);
}
.price-line .amt { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: rgb(var(--ink)); }
.price-line .unit { font-size: 15px; color: rgb(var(--ink-3)); }
.after-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; margin-top: 12px; }
.after-actions .note { margin: 0; }
@media (max-width: 640px) { .plan-panel { padding: 28px 20px 24px; border-radius: var(--radius-lg); } }

/* ---------- the guide (B.8) ---------- */
.guide-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; align-items: center;
  background: rgb(var(--paper-2)); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 36px 40px;
}
.guide-card p { margin: 14px 0 0; }
.guide-card .textlink { display: inline-block; margin-top: 18px; }
/* The five stages, drawn the way the app's ContractJourney draws them: dots on a line, no
   dates, no state — a timeline, not a progress bar. Decorative: the body names the stages. */
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.journey::before { content: ""; position: absolute; left: 10%; right: 10%; top: 6px; height: 1px; background: rgb(var(--ink-4)); }
.journey li { position: relative; text-align: center; font-size: 13.5px; line-height: 1.35; color: rgb(var(--ink-2)); padding: 24px 4px 0; }
.journey li::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 50%; background: rgb(var(--paper-2)); border: 2px solid rgb(var(--ink-3));
}
@media (max-width: 860px) {
  .guide-card { grid-template-columns: 1fr; padding: 28px 20px; }
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .journey li { text-align: left; padding: 0 0 12px 28px; }
  .journey li:last-child { padding-bottom: 0; }
  .journey li::before { left: 0; top: 4px; transform: none; }
}

/* ---------- closing call (B.10, C.7) ----------
   The heaviest rule on the page, used once — as the app closes a session (border-t-2 ink). */
.closing { border-top: 2px solid rgb(var(--ink)); padding: 56px 0 72px; }
.closing h2 { max-width: 24ch; }
.closing .actions { margin-top: 24px; }

/* ---------- pricing: plan cards (C.3) ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan-card {
  display: flex; flex-direction: column;
  background: rgb(var(--paper-2)); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 28px 28px 26px;
}
.plan-card .name { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: rgb(var(--ink)); display: flex; align-items: center; gap: 8px; }
.plan-card .name svg { width: 18px; height: 18px; }
.plan-card.prepara .name { color: rgb(var(--plan)); }
.plan-card .price { margin-top: 18px; font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: rgb(var(--ink)); }
.plan-card .price-note { font-size: 14px; color: rgb(var(--ink-3)); margin-top: 4px; }
.plan-card .question { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule-soft); font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.4; color: rgb(var(--ink)); }
.plan-card .list-head { margin: 18px 0 0; font-size: 15px; font-weight: 600; color: rgb(var(--ink)); }
.plan-card ul { list-style: none; margin: 12px 0 0; padding: 0; flex: 1; }
.plan-card li { position: relative; padding: 7px 0 7px 20px; font-size: 15.5px; line-height: 1.45; }
.plan-card li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 1.5px; background: rgb(var(--ink-3)); }
.plan-card .cta { margin-top: 24px; }
.plan-card .cta .note { margin-top: 10px; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } .plan-card { padding: 24px 20px 22px; } }

/* ---------- pricing: questions (C.4) ---------- */
.faq { margin: 28px 0 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.faq dt, .faq dd { margin: 0; padding: 18px 0; border-top: 1px solid var(--rule-soft); }
.faq dt { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: rgb(var(--ink)); padding-right: 32px; }
@media (max-width: 760px) {
  .faq { grid-template-columns: 1fr; }
  .faq dd { border-top: 0; padding-top: 4px; }
}

/* ---------- pricing: question by question (C.5) ----------
   Words in every cell, no ticks or crosses. On a phone each row becomes a card, so nothing
   scrolls sideways inside a box. */
.compare-wrap { margin-top: 28px; background: rgb(var(--paper-2)); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
table.compare { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 1.45; }
table.compare th, table.compare td { text-align: left; vertical-align: top; padding: 14px 18px; border-top: 1px solid var(--rule-soft); }
table.compare thead th { border-top: 0; background: rgb(var(--paper-3)); font-family: var(--font-display); font-size: 15px; font-weight: 600; color: rgb(var(--ink)); }
table.compare thead th.prepara { color: rgb(var(--plan)); }
table.compare col.c-q { width: 34%; }
table.compare th[scope="row"] { font-weight: 600; color: rgb(var(--ink)); }
table.compare td { color: rgb(var(--ink-2)); }
@media (max-width: 760px) {
  .compare-wrap { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  table.compare, table.compare tbody, table.compare tr, table.compare th, table.compare td { display: block; width: auto; }
  table.compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.compare colgroup { display: none; }
  table.compare tr { background: rgb(var(--paper-2)); border: 1px solid var(--rule); border-radius: var(--radius-lg); margin-bottom: 10px; padding: 4px 16px 6px; }
  table.compare th[scope="row"] { border-top: 0; padding: 12px 0 8px; font-family: var(--font-display); font-size: 16px; }
  table.compare td { padding: 8px 0 10px; }
  table.compare td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 600; color: rgb(var(--ink-3)); margin-bottom: 2px; }
}

.fine-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.fine-list li { font-size: 14px; color: rgb(var(--ink-3)); padding: 4px 0; line-height: 1.55; }

/* ---------- app screenshots (pass 2) ----------
   The app's reader screens are light only, and the screenshots are real captures of them, so
   they are never recoloured, dimmed or inverted. Instead each one sits in a frame that IS the
   app's page colour in both modes: on the light site it reads as a raised card; on the dark site
   it reads as a lit window into the app, an object on the page rather than a hole in it.
   The frame colour is the app's --paper value, written literally on purpose: it must not follow
   the site's dark tokens. */
.shot { margin: 0; }
.shot-frame {
  display: block; overflow: hidden;
  background: #f6f7f9;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgb(var(--ink) / .05), 0 10px 28px -12px rgb(var(--ink) / .18);
  padding: 10px;
}
.shot-frame img { display: block; width: 100%; height: auto; border-radius: 4px; }
a.shot-frame { transition: border-color .15s; }
a.shot-frame:hover { border-color: rgb(var(--ink-3)); }
/* A crop done in CSS, so a retake of the same file replaces it in place: the frame shows the
   top of the image, at the aspect ratio given inline as --crop-ratio (image width / height kept). */
.shot-frame.crop { padding: 10px 10px 0; }
.shot-frame.crop .cropbox { display: block; overflow: hidden; aspect-ratio: var(--crop-ratio); }
.shot figcaption { font-size: 14px; color: rgb(var(--ink-3)); line-height: 1.45; margin-top: 10px; }
@media (prefers-color-scheme: dark) {
  .shot-frame { border-color: rgb(255 255 255 / .14); box-shadow: 0 12px 32px -14px rgb(0 0 0 / .7); }
}

/* Text beside a screenshot: the image column is sized so the app's text in a 2x capture shows
   close to its real size (about 540–580 px wide). */
.with-shot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 32px 56px; align-items: start; }
.with-shot > .shot { margin-top: 6px; }
@media (max-width: 980px) { .with-shot { grid-template-columns: 1fr; } .with-shot > .shot { max-width: 600px; } }

/* Prepara panel, with its two screenshots: lead | open tender, then list | one document. */
.plan-panel .with-shot + .with-shot { margin-top: 8px; }
@media (min-width: 981px) { .plan-panel .with-shot { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px 44px; } }
.plan-panel .qlist.single { grid-template-columns: 1fr; margin-top: 24px; }
@media (min-width: 981px) { .plan-panel .with-shot > .shot.sticky { position: sticky; top: 84px; margin-top: 32px; } }

/* Pricing: one screenshot under each plan card, in the same two columns. */
.plan-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; align-items: start; }
@media (max-width: 760px) { .plan-shots { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- the 2025 chart (B.4, pass 2) ----------
   Drawn in HTML so it follows dark mode and stays sharp. One series, one neutral fill, a zero
   baseline and a number on every bar, as the app's own monthly chart on a category page does.
   No bar is highlighted: the point is that every month has public tenders, not which month has
   more (reader rule: every month has public tenders; no season angle). It is an ordered list,
   so a screen reader reads «enero: 988 licitaciones…» in order. */
.chart { margin: 48px 0 0; padding: 28px 28px 22px; background: rgb(var(--paper-2)); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.chart-cap { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: rgb(var(--ink)); line-height: 1.3; }
.bars { --max: 1379; list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 220px; border-bottom: 1px solid rgb(var(--ink-4)); }
.bars li { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; min-width: 0; }
.bars .v { font-family: var(--font-mono); font-size: 12.5px; color: rgb(var(--ink-2)); text-align: center; margin-bottom: 6px; white-space: nowrap; }
.bars .bar { display: block; height: calc(var(--v) / var(--max) * 170px); background: rgb(var(--ink-4) / .75); border-radius: 4px 4px 0 0; }
.months { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.months li { text-align: center; font-size: 13px; color: rgb(var(--ink-3)); }
.chart-lead { margin: 6px 0 0; font-size: 15px; color: rgb(var(--ink-2)); max-width: var(--measure); }
.chart-src { font-size: 14px; color: rgb(var(--ink-3)); margin: 16px 0 0; }
@media (prefers-color-scheme: dark) { .bars .bar { background: rgb(var(--ink-4) / .9); } }
/* On a phone twelve columns are too narrow for «1,379», so the chart turns on its side:
   one row per month, the bar's length is the count, the number at its end. */
@media (max-width: 640px) {
  .chart { padding: 20px 16px 16px; }
  .bars { height: auto; grid-template-columns: 1fr; gap: 6px; border-bottom: 0; border-left: 1px solid rgb(var(--ink-4)); margin-left: 40px; }
  .bars li { flex-direction: row-reverse; justify-content: flex-end; align-items: center; height: 20px; position: relative; }
  .bars .v { margin: 0 0 0 8px; font-size: 12px; text-align: left; }
  .bars .bar { height: 14px; width: calc(var(--v) / var(--max) * (100% - 52px)); border-radius: 0 3px 3px 0; flex: 0 0 auto; }
  .bars .m-side { position: absolute; left: -40px; width: 32px; font-size: 12.5px; color: rgb(var(--ink-3)); }
  .months { display: none; }
}
@media (min-width: 641px) { .bars .m-side { display: none; } }

/* ---------- callouts (the guide pages) ---------- */
.callout { display: flex; gap: 12px; border-radius: var(--radius-lg); padding: 16px 18px; font-size: 15.5px; line-height: 1.6; color: rgb(var(--ink-2)); margin: 18px 0; max-width: var(--measure); border: 1px solid var(--rule-soft); }
.callout .ci { font-size: 20px; flex: 0 0 22px; margin-top: 1px; color: rgb(var(--ink-3)); }
.callout.info { background: rgb(var(--cool-soft)); border-color: rgb(var(--cool) / .2); }
.callout.info .ci { color: rgb(var(--cool)); }
.callout.ok { background: rgb(var(--paper-2)); }

/* ---------- tables in the guide pages ---------- */
.scroller { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: rgb(var(--paper-2)); }
table.tz { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
table.tz th, table.tz td { border-bottom: 1px solid var(--rule-soft); padding: 12px 15px; text-align: left; vertical-align: top; }
table.tz th { background: rgb(var(--paper-3)); font-weight: 600; font-size: 14px; color: rgb(var(--ink)); }
table.tz tr:last-child td { border-bottom: none; }

/* ---------- guide page body text ---------- */
.section > .wrap > p { max-width: var(--measure); }
.section > .wrap > h2:not([class]) { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); }

/* Article and vertical video (Darío's two guide pages, due to come down). */
.video-vertical { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; margin-top: 24px; border-radius: var(--radius-lg); overflow: hidden; background: rgb(var(--paper-3)); }
.video-vertical iframe { width: 100%; height: 100%; border: 0; display: block; }
.byline { font-size: 14px; color: rgb(var(--ink-3)); margin-top: 14px; }
.article { max-width: 70ch; font-size: 16.5px; }
.article p { margin: 0 0 14px; }
.article h2 { font-size: 24px; margin: 38px 0 12px; }
.article h3 { font-size: 18px; margin: 26px 0 8px; }
.article ul { margin: 0 0 16px; padding-left: 22px; }
.article li { margin: 7px 0; }
.article blockquote { margin: 18px 0; padding: 12px 18px; border-left: 3px solid rgb(var(--ink-4)); background: rgb(var(--paper-2)); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule-soft); padding: 32px 0 48px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.foot .brand { font-size: 15px; }
.foot a:not(.brand) { color: rgb(var(--ink-2)); font-size: 14.5px; }
.foot a:not(.brand):hover { color: rgb(var(--ink)); }
.foot .fine { font-size: 14px; color: rgb(var(--ink-3)); width: 100%; margin: 8px 0 0; }
@media (max-width: 640px) { .foot .spacer { flex-basis: 100%; height: 0; } }

/* ---------- utility ---------- */
.center { text-align: center; }
.mt-s { margin-top: 10px; } .mt-m { margin-top: 20px; } .mt-l { margin-top: 32px; }
.divider { height: 1px; background: var(--rule-soft); border: 0; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }