/* Licia — «Expediente», an experimental visual language layered over app.css.

   The thesis: the product reads an official file for you, so the page is the
   file — warm paper, one ink, a deep pine for the claims, a serif for what is
   said and a grotesk for what is operated, and a highlighter for the one thing
   that matters in a sentence. Motion tells the product's story instead of
   decorating it: the pliego is read row by row, the verdict resolves, the
   citation is underlined as you reach it.

   Loaded after app.css. Token overrides sit in `tokens` (the later
   declaration wins inside a layer), component restyles in `pages`, so the
   accessibility floors in `utilities` / `overrides` still win. Springs are
   CSS `linear()` curves generated with spring-easing (data/motion-build/
   springs.mjs), so a press or a hover runs no script at all. */

@layer tokens {
  :root {
    --ink: #16181B;
    --ink-2: #3B3F44;
    --white: #FFFFFF;
    --paper: #F7F5EF;
    --grey: #EFEBE2;
    --field: #10241F;
    --field-deep: #0A1915;
    --field-2: #1B3A32;
    --muted-on-field: #C3D4CC;
    --line-on-field: rgba(247, 245, 239, 0.16);
    --line: #E3DED3;
    --line-soft: color-mix(in srgb, var(--line) 60%, transparent);
    --line-strong: #8C877C;
    --muted: #625E57;
    --mark: #F5DC7E;
    --mark-soft: #FBEFC0;
    --go: #17704A;
    --go-bg: #E2F1E8;
    --scrim: rgba(16, 20, 18, 0.45);

    --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;

    --stretch-text: 100%;
    --stretch-title: 100%;
    --stretch-display: 100%;
    --weight-heading: 600;
    --weight-display: 600;

    --display-sm: clamp(2.125rem, 1.4rem + 1.9vw, 3.25rem);
    --display-md: clamp(2.5rem, 1.3rem + 2.8vw, 3.75rem);
    --display-lg: clamp(3.1rem, 1.6rem + 4.6vw, 6rem);
    --stat: clamp(3rem, 6vw, 5.5rem);

    --radius: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(22, 24, 20, 0.05), 0 0 0 1px rgba(22, 24, 20, 0.05);
    --shadow-md: 0 1px 2px rgba(22, 24, 20, 0.06), 0 18px 48px -18px rgba(22, 24, 20, 0.28);
    --shadow-lg: 0 2px 4px rgba(22, 24, 20, 0.05), 0 40px 80px -30px rgba(16, 36, 31, 0.38);

    /* Springs (mass 1): snappy k520/c38 for presses and menus, soft k170/c24
       for reveals, bounce k260/c16 for the verdict only. The duration is the
       settle time; the curve does most of its travel in the first third. */
    --spring-snappy: linear(0, 0.04, 0.135 5.4%, 0.504 13.5%, 0.707, 0.847, 0.932 29.7%, 0.959 32.4%, 0.992 37.8%, 1.008 45.9%, 1);
    --spring-snappy-dur: 500ms;
    --spring-soft: linear(0, 0.024, 0.083 5.4%, 0.513 18.9%, 0.656, 0.766 29.7%, 0.809 32.4%, 0.877 37.8%, 0.94 45.9%, 0.965, 0.98 56.8%, 0.998 73%, 1.001);
    --spring-soft-dur: 667ms;
    --spring-bounce: linear(0, 0.058, 0.202 5.4%, 0.77 13.5%, 0.923, 1.038, 1.114, 1.155, 1.166, 1.156 29.7%, 1.012 43.2%, 0.993 45.9%, 0.974 51.4% 56.8%, 1.003 75.7%, 1);
    --spring-bounce-dur: 833ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  }

  @font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("fonts/InstrumentSans[wdth,wght].woff2?v=1.000") format("woff2");
  }
  @font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/Newsreader[opsz,wght].woff2?v=1.106") format("woff2");
  }
}

@layer base {
  body { background: var(--paper); font-feature-settings: "ss01" 1; }
  ::selection { background: var(--mark); color: var(--ink); }
  mark {
    background: linear-gradient(transparent 12%, var(--mark) 12%, var(--mark) 88%, transparent 88%);
    padding: 0 0.12em;
    margin: 0 -0.06em;
    font-weight: inherit;
    text-decoration: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  a:hover { color: var(--field-2); }
}

@layer pages {
  /* ------------------------------------------------------------ type */
  h1, .band > .container > h2, .band-title, .band-sub, .step h3, .close h2,
  .page-hero h1, .doc-hero h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-optical-sizing: auto;
    letter-spacing: -0.022em;
  }
  .band > .container > h2, .band-title {
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.028em;
  }

  /* ------------------------------------------------------------ grounds */
  .band { background: var(--paper); }
  .band--white { background: var(--white); }
  .band--grey { background: var(--grey); }
  .band--field {
    background:
      radial-gradient(120% 80% at 85% 0%, color-mix(in srgb, var(--field-2) 70%, transparent), transparent 60%),
      var(--field);
    color: var(--paper);
  }

  /* ------------------------------------------------------------ the bar */
  .topnav {
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    color: var(--ink);
    box-shadow: 0 1px 0 transparent;
    transition: box-shadow var(--dur-slow) var(--ease-out), background-color var(--dur-slow) var(--ease-out);
  }
  .topnav.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(22, 24, 20, 0.35); }
  .topnav .pub-nav-link, .topnav .lang-current, .topnav .btn--ghost { color: var(--ink); }
  .topnav .pub-nav-link { font-weight: 500; }
  .topnav .pub-nav-link:hover { color: var(--ink); }
  .topnav .pub-nav-link::after {
    left: 50%; right: auto; width: 100%; height: 2px; bottom: 16px; border-radius: 2px;
    background: var(--ink); opacity: 1;
    transform: translateX(-50%) scaleX(0);
    transition: transform var(--spring-snappy-dur) var(--spring-snappy);
  }
  .topnav .pub-nav-link:hover::after,
  .topnav .pub-nav-link.is-active::after,
  .topnav .pub-nav-link[aria-current="page"]::after,
  .topnav .pub-nav-link[aria-expanded="true"]::after { transform: translateX(-50%) scaleX(1); }
  .topnav .lang-current:hover { background: var(--grey); }
  .topnav .btn--ghost:hover { color: var(--ink); border-color: var(--ink); }
  .topnav .btn--on-field { color: var(--paper); background: var(--field); border-color: var(--field); }
  .topnav .btn--on-field:hover { color: var(--paper); background: var(--field-2); border-color: var(--field-2); }
  .mega {
    background: var(--white);
    border-bottom: 0;
    box-shadow: 0 1px 0 var(--line), 0 30px 60px -30px rgba(22, 24, 20, 0.35);
    transform: translateY(-8px) scale(0.995);
    transform-origin: top center;
    transition: opacity 180ms var(--ease-out), transform var(--spring-snappy-dur) var(--spring-snappy);
  }

  /* ------------------------------------------------------------ controls */
  .btn {
    border-radius: 10px;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--spring-snappy-dur) var(--spring-snappy);
  }
  .btn:not(.btn--ghost):not(.btn--quiet):hover { background: var(--field-2); border-color: var(--field-2); color: var(--paper); box-shadow: 0 8px 20px -10px rgba(16, 36, 31, 0.6); }
  .btn:active { transform: scale(0.97); transition-duration: 90ms; }
  .btn--secondary, .btn--secondary:hover { color: var(--ink); background: transparent; border-color: var(--ink); box-shadow: none; }
  .btn.btn--secondary:hover { color: var(--ink); background: var(--white); border-color: var(--ink); }
  .btn--on-field { color: var(--field); background: var(--paper); border-color: var(--paper); }
  .btn.btn--on-field:hover { color: var(--field); background: var(--white); border-color: var(--white); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5); }
  .search {
    border-radius: 14px;
    border-color: var(--line);
    background: var(--white);
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  }
  .search:focus-within { border-color: var(--ink); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--mark) 70%, transparent), var(--shadow-md); }
  .search .btn { border-radius: 10px; }
  .chip { border-radius: 999px; }
  .analysis-chips .chip {
    color: var(--ink); background: var(--white); border-color: var(--line);
    transition: border-color var(--dur-fast) var(--ease-out), transform var(--spring-snappy-dur) var(--spring-snappy), box-shadow var(--dur-base) var(--ease-out);
  }
  .analysis-chips .chip:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

  /* ------------------------------------------------------------ the hero */
  .band.hero {
    position: relative;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    padding: var(--space-64) 0 var(--space-96);
  }
  /* Ledger rules behind the hero, fading out: the page is a file. */
  .band.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--line) 75%, transparent) 31px 32px);
    -webkit-mask-image: radial-gradient(90% 70% at 30% 20%, #000 20%, transparent 75%);
    mask-image: radial-gradient(90% 70% at 30% 20%, #000 20%, transparent 75%);
    pointer-events: none;
  }
  .hero .container { position: relative; }
  .hero-grid { grid-template-columns: 6fr 5fr; gap: var(--space-64); align-items: center; }
  .hero h1 {
    font-size: var(--display-lg);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin-bottom: var(--space-32);
    color: var(--ink);
  }
  .band.hero .lead { color: var(--ink-2); font-size: var(--text-xl); line-height: 1.45; max-width: 40ch; }
  .band.hero .hero-note { color: var(--muted); }
  .band.hero a:not(.btn) { color: var(--ink); }
  .band.hero .hero-note a { font-weight: 500; }
  .band.hero a:not(.btn):hover { color: var(--field-2); }
  .hero .fact-line { border-top-color: var(--line); color: var(--muted); }
  .hero .fact-line strong, .hero .fact-line a { color: var(--ink); }
  .hero .search { border-color: var(--line); }

  /* The widget: the file, read. */
  .showcase.panel {
    position: relative;
    padding: var(--space-24);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
  }
  .showcase-exp { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0; color: var(--muted); }
  .showcase-title { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.015em; }
  .verdict-sign { position: relative; overflow: hidden; border-radius: 12px; padding: 14px 18px; }
  .verdict-sign strong { font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; letter-spacing: -0.03em; }
  .verdict-sign--go { background: var(--go); }
  .showcase-req { border-top-color: var(--line); }
  .showcase-req-meets { justify-self: start; font-size: var(--text-xs); padding: 2px 8px; border-radius: 999px; background: var(--grey); }
  .showcase-req--yes .showcase-req-meets { background: var(--go-bg); }
  .showcase-req--no .showcase-req-meets { background: var(--nogo-bg); }
  .showcase-req--unclear .showcase-req-meets { background: var(--review-bg); }
  .showcase-foot a { color: var(--ink); }

  /* ------------------------------------------------------------ citation */
  .cite {
    position: relative;
    border: 0;
    border-left: 3px solid var(--mark);
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--mark-soft) 45%, var(--white));
    padding: var(--space-12) var(--space-16);
  }
  .cite-text { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
  .cite-fragment { font-family: var(--font-mono); }
  .founder { background: none; border: 0; padding: 0; }
  .founder .cite-text { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.1rem); line-height: 1.28; letter-spacing: -0.015em; }

  /* ------------------------------------------------------------ bands */
  .cells > * { border-top: 1px solid var(--ink); }
  .cells dt { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; letter-spacing: -0.01em; }

  .how { position: relative; gap: var(--space-96); }
  .how-rail {
    position: absolute;
    left: -40px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--line);
    border-radius: 2px;
    pointer-events: none;
  }
  .how-rail > i {
    position: absolute;
    inset: 0;
    background: var(--field);
    border-radius: inherit;
    transform-origin: top;
    transform: scaleY(0);
  }
  .step-n {
    position: relative;
    z-index: 1;
    border-radius: 999px;
    background: var(--paper);
    color: var(--field);
    box-shadow: inset 0 0 0 2px var(--field);
    font-family: var(--font-display);
    font-weight: 600;
    transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
  }
  .step.is-reached .step-n { background: var(--field); color: var(--paper); }
  .step h3 { font-size: clamp(1.9rem, 1.4rem + 1vw, 2.5rem); font-weight: 500; letter-spacing: -0.025em; }
  .mini {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  .mini-q { border-bottom-color: var(--line); }

  .stat-list--row .stat { border-top: 1px solid var(--ink); color: var(--ink); }
  .stat-list--row .stat-value, .stat-value {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.035em;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .stat-list:not(.is-live) .stat, .stat.is-lit, .stat:hover { color: var(--ink); }

  .evidence-cols p { border-top-color: var(--line-on-field); }
  .evidence-cols strong { color: var(--paper); }
  .evidence-cols a, .band--field a:not(.btn) { color: var(--paper); }
  .band--field .btn--secondary { color: var(--paper); border-color: var(--paper); }

  .plan-link {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: transform var(--spring-snappy-dur) var(--spring-snappy), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  }
  .plan-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
  .plan-price { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; }
  .plan-link-price { font-family: var(--font-display); font-weight: 500; color: var(--ink); font-size: 1.9rem; }
  .band--grey .card, .band--grey .plan-link { border-color: var(--line); }

  .index-row a { transition: color var(--dur-fast) var(--ease-out); }
  .posts-title { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; }
  .data-rows { border-top-color: var(--ink); }
  .data-rows dt { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; }

  .faq-item { border-radius: var(--radius-md); background: var(--white); }
  .faq-arrow { transition: transform var(--spring-snappy-dur) var(--spring-snappy); }

  .close h2 { font-size: var(--display-md); line-height: 1.02; letter-spacing: -0.03em; }

  .table--tenders tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
  .table--tenders tbody tr:hover { background: color-mix(in srgb, var(--mark-soft) 35%, transparent); }

  .footer { background: var(--paper); border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- motion
   Hidden states exist only once the script has claimed the page
   (`html.mo`), so with JavaScript off, blocked or failed every element is
   already where it rests. The head script drops `mo` after 2.5 s if the
   motion script never reported in. */
@layer utilities {
  /* `.lead` is muted in utilities; the paper hero wants it one step darker. */
  .hero .lead { color: var(--ink-2); }

  /* Above the fold the hidden state must exist before the deferred script
     runs, or the hero paints once and then vanishes to animate in. */
  .mo .hero h1:not(.mo-split),
  .mo .hero-text > :not(h1):not([data-mo]),
  .mo .hero .showcase:not([data-mo]) { opacity: 0; }
  .mo [data-mo] { opacity: 0; }
  .mo [data-mo="up"] { transform: translateY(18px); }
  .mo [data-mo="rise"] { transform: translateY(28px) scale(0.985); }
  .mo .mo-word { display: inline-block; opacity: 0; transform: translateY(0.45em); }
  .mo .verdict-sign[data-mo] { transform: scale(0.94); }
  .mo [data-mo].is-in, .mo .mo-word.is-in { opacity: 1; transform: none; }
  /* The transition lives on the revealed state only: hiding is instant, so
     an element hidden after it was first painted does not start a 1 -> 0
     transition that the reveal would then cancel. */
  .mo [data-mo].is-in, .mo .mo-word.is-in {
    transition: opacity 420ms var(--ease-out), transform var(--spring-soft-dur) var(--spring-soft);
    transition-delay: var(--mo-delay, 0ms);
  }
  .mo .verdict-sign[data-mo].is-in { transition: opacity 240ms var(--ease-out), transform var(--spring-bounce-dur) var(--spring-bounce); transition-delay: var(--mo-delay, 0ms); }
  /* The citation's highlighter: drawn line by line when it is reached. */
  .mo .cite-text.mo-hl {
    background-image: linear-gradient(transparent 58%, color-mix(in srgb, var(--mark) 85%, transparent) 58%, color-mix(in srgb, var(--mark) 85%, transparent) 92%, transparent 92%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    display: inline;
  }
  .mo .cite-text.mo-hl.is-in { background-size: 100% 100%; transition: background-size 1600ms var(--ease-out); transition-delay: var(--mo-delay, 0ms); }
  .mo .showcase-req-meets[data-mo] { transform: scale(0.6); }
  .mo .showcase-req-meets[data-mo].is-in { transform: none; transition: opacity 200ms var(--ease-out), transform var(--spring-bounce-dur) var(--spring-bounce); transition-delay: var(--mo-delay, 0ms); }

  @media (prefers-reduced-motion: reduce) {
    .mo [data-mo], .mo .mo-word { opacity: 1; transform: none; }
    .mo .cite-text.mo-hl { background-size: 100% 100%; }
  }
}

@media (max-width: 960px) {
  @layer pages {
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-48); }
    .how-rail { display: none; }
  }
}

/* ======================================================================
   components
   ====================================================================== */

/* «Expediente» — components. Owned by one refinement pass; loaded after expediente.css.
   Component restyles go in `@layer pages` (or `components`), never a new layer.

   The shared kit on the new language: controls, surfaces, the status
   vocabulary, feedback, the shell chrome (bar, menus, drawer, footer, the
   cookie strip) and the bare shell of the way in. Two layers, on purpose:

   - `components` holds the kit. Every page-level rule in app.css and in the
     other area files outranks it, which is how a page keeps its say.
   - `pages` holds only what has to beat a rule expediente.css already put in
     `pages` (its generic button hover, `.band--field a` colouring a button
     link) and the few pages this pass owns outright: the bare shell, the
     signup door and the style tile. This file loads first among the area
     files, so a page agent's equal selector still wins.

   The focus ring. Orange measured 2.9:1 on the paper ground and ink 1.1:1 on
   the pine field, so neither can be the one ring. It is a highlighter ink,
   the `--mark` yellow taken down to an ochre: 3.7:1 on paper, 4.1:1 on
   white, 4.0:1 on pine and 3.0:1 on `--field-2`, 3 px with a 2 px gap
   everywhere — inputs included, so a field and a button announce focus the
   same way. */

@layer components {
  :root {
    --focus: #A87400;
    --btn-radius: 10px;
    --press-scale: 0.97;
  }

  /* ---------------------------------------------------------------- focus */
  :where(input, select, textarea):focus-visible {
    border-color: var(--ink);
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
  .search input:focus-visible { outline: none; }
  .tour-spotlight { outline: 3px solid var(--mark); outline-offset: 4px; border-radius: var(--radius-md); }
  .thirdparty-badge:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

  /* -------------------------------------------------------------- buttons
     Pine is the action; secondary is a white sheet on a hairline; ghost and
     quiet are text that gets a tint under it; danger is the no-go pair
     outlined; on-field is the paper block, the one button on the pine. */
  .btn {
    gap: var(--space-8);
    font-weight: 600;
    letter-spacing: -0.005em;
    border-width: 1px;
    border-radius: var(--btn-radius);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .btn--sm { height: 36px; padding: 0 14px; font-size: var(--text-sm); }
  .btn--lg { height: 54px; padding: 0 28px; font-size: var(--text-lg); }
  .btn--secondary { color: var(--ink); background: var(--white); border-color: var(--line); box-shadow: var(--shadow-sm); }
  .btn--ghost { color: var(--ink); background: transparent; border-color: transparent; }
  .btn--quiet { color: var(--muted); background: transparent; border-color: transparent; }
  .btn--danger { color: var(--nogo); background: var(--white); border-color: color-mix(in srgb, var(--nogo) 45%, var(--white)); }
  .btn--icon { padding: 0; }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }

  /* Loading: the label stays (its width does not jump) and a ring turns over
     it. `aria-busy` is the one hook; the label is what a reader hears. */
  .btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
  .btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border: 2px solid var(--paper);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  .btn--secondary[aria-busy="true"]::after, .btn--ghost[aria-busy="true"]::after,
  .btn--quiet[aria-busy="true"]::after { border-color: var(--ink); border-right-color: transparent; }

  /* ---------------------------------------------------------------- fields */
  .field { gap: 6px; }
  .field-label, .field > label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
  .label-hint { font-weight: 400; color: var(--muted); }
  .field-help { font-size: 13px; line-height: 1.45; color: var(--muted); }
  .field-error { display: flex; gap: 6px; align-items: baseline; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--nogo); }

  :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"],
                   [type="submit"], [type="button"], [type="hidden"]),
         select, textarea) {
    height: 46px;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--line-strong) 70%, var(--line));
    border-radius: var(--btn-radius);
    background-color: var(--white);
    box-shadow: inset 0 1px 1px rgba(22, 24, 20, 0.04);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  :where(textarea) { height: auto; }
  :where(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--line-strong); }
  :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--nogo);
    box-shadow: 0 0 0 3px var(--nogo-bg);
  }
  :where(input, select, textarea):disabled { background-color: var(--grey); border-color: var(--line); box-shadow: none; }
  ::placeholder { color: color-mix(in srgb, var(--muted) 85%, var(--white)); }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--field); cursor: pointer; }
  input[type="file"] { font-size: var(--text-sm); color: var(--muted); }
  input[type="file"]::file-selector-button {
    height: 36px;
    margin-right: var(--space-12);
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  input[type="file"]::file-selector-button:hover { border-color: var(--line-strong); }
  .consent-check { line-height: 1.5; }
  .consent-check input { margin-top: 3px; }
  .secret { border-radius: var(--radius-md); background: var(--paper); border: 1px dashed var(--line-strong); }

  /* -------------------------------------------------------------- surfaces */
  .card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .band--grey .card, .band--field .card { border-color: transparent; }
  .panel { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
  .divider { border-top-color: var(--line); }
  .frame { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
  .frame-bar { background: var(--paper); border-bottom: 1px solid var(--line); font-weight: 500; }
  dialog {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
  }
  dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

  /* ---------------------------------------------------------------- tables */
  .table-wrap, .table-scroll { border-top: 1px solid var(--ink); }
  .card .table-wrap, .card .table-scroll { border-top: 0; }
  .table th {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    border-bottom-color: var(--line);
  }
  .table td { border-bottom-color: var(--line-soft); }
  .table tbody tr td { transition: background-color var(--dur-fast) var(--ease-out); }
  .table tbody tr:hover td { background: color-mix(in srgb, var(--mark-soft) 35%, var(--white)); }
  .row-link { font-weight: 600; text-decoration-thickness: 1px; }
  .row-link:hover { color: var(--ink); }
  .table tr.is-locked td:first-child { border-left-color: var(--line-strong); }

  /* ------------------------------------------------------ status vocabulary
     The stamp is the verdict: the one uppercase, set tight and square-ish
     like a rubber stamp. Badges are pills; identifiers are mono. */
  .stamp { border-radius: 6px; font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.06em; }
  .stamp--lg, .stamp--xl { border-radius: var(--radius); }
  .stamp--draft { background: var(--field); }

  .badge { height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
  .badge--pre, .badge--off { background: var(--white); }
  .badge--closed { color: var(--ink-2); background: var(--grey); }
  .badge--link { color: var(--field); background: color-mix(in srgb, var(--field) 8%, var(--white)); border-color: color-mix(in srgb, var(--field) 18%, var(--white)); }
  .badge--link:hover { color: var(--field); background: color-mix(in srgb, var(--field) 14%, var(--white)); }

  .chip, .chip-exp, .chip-cpv, .chip-days, .lock-chip { border-radius: 999px; background: var(--white); }
  .chip-exp, .chip-cpv { border-radius: 6px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em; }
  .chip-src, .chip-hit { border-radius: 6px; }
  .chip-hit { color: var(--field); border-color: color-mix(in srgb, var(--field) 30%, var(--white)); }
  a.chip-hit:hover { background: var(--field); color: var(--paper); }
  .chip-days { font-weight: 600; }
  .chip-days--soon { color: var(--ink); border-color: var(--ink); }
  .chip-days--urgent { color: var(--paper); background: var(--field); border-color: var(--field); }
  .chip-days--past { background: transparent; }
  .lock-chip--mine { color: var(--ink); border-color: var(--ink); }

  .chip-applied { height: 32px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--field); color: var(--paper); }
  .chip-applied-x {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out);
  }
  .chip-applied-x:hover { color: var(--paper); background: var(--field-2); text-decoration: none; }
  .chip-clear { color: var(--ink); text-decoration-thickness: 1px; }

  .pill-filter {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    font-weight: 500;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out), transform var(--spring-snappy-dur) var(--spring-snappy);
  }
  a.pill-filter:hover { border-color: var(--ink); color: var(--ink); }
  a.pill-filter:active { transform: scale(var(--press-scale)); }
  .pill-filter.is-active { background: var(--field); border-color: var(--field); color: var(--paper); }
  a.pill-filter.is-active:hover { color: var(--paper); border-color: var(--field); }
  .pill-filter--quiet { border-style: dashed; background: transparent; }

  /* -------------------------------------------------------------- feedback
     A flash is a white slip with a rail in its state's colour, the message
     in ink; a notice is the same slip sitting flat in its section. */
  .flash {
    --flash-rail: var(--line-strong);
    position: relative;
    align-items: center;
    padding: 12px 12px 12px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    line-height: 1.5;
  }
  .flash--success { --flash-rail: var(--go); color: var(--ink); background: var(--white); }
  .flash--error { --flash-rail: var(--nogo); color: var(--ink); background: color-mix(in srgb, var(--nogo-bg) 55%, var(--white)); }
  .flash--warning { --flash-rail: var(--review); color: var(--ink); background: color-mix(in srgb, var(--review-bg) 55%, var(--white)); }
  .flash--info { --flash-rail: var(--field); color: var(--ink); background: var(--white); }
  .flash::before, .notice::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: var(--flash-rail);
  }
  .notice::before { background: var(--notice-rail); }
  .flash > span { flex: 1 1 auto; }
  .flash a { font-weight: 600; }
  .flash-undo { margin: 0; }
  .flash-close {
    width: 32px;
    height: 32px;
    color: var(--muted);
    font-size: 1.25rem;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .flash-close:hover { color: var(--ink); background: var(--grey); }

  .notice {
    --notice-rail: var(--line-strong);
    position: relative;
    padding: 12px 16px 12px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--ink-2);
    line-height: 1.5;
  }
  .notice--warning { --notice-rail: var(--review); color: var(--ink); background: color-mix(in srgb, var(--review-bg) 60%, var(--white)); }
  .notice--error { --notice-rail: var(--nogo); color: var(--ink); background: color-mix(in srgb, var(--nogo-bg) 60%, var(--white)); }
  .notice--progress { --notice-rail: var(--field); }
  .sysbar { border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--review) 22%, var(--review-bg)); }
  .sysbar--error { border-color: color-mix(in srgb, var(--nogo) 22%, var(--nogo-bg)); }
  .sysbar--view-as { background: var(--field); color: var(--paper); border-color: var(--field); }

  .busy-overlay { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .busy-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: kit-pop var(--spring-snappy-dur) var(--spring-snappy) both;
  }
  .busy-card p { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.01em; }
  .busy-card .busy-hint { font-family: var(--font-sans); letter-spacing: 0; }
  .busy-spinner { border-color: var(--line); border-top-color: var(--field); }

  .empty-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
  .card .empty-title { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 600; letter-spacing: 0; }

  .pager { gap: var(--space-16); }
  .pager a { color: var(--ink); }
  .pager-status { font-variant-numeric: tabular-nums; }

  /* ---------------------------------------------------------- breadcrumbs */
  .breadcrumbs { gap: 6px; font-size: 13px; }
  .breadcrumbs a { text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
  .breadcrumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }
  .breadcrumbs > span:not(.breadcrumb-current) { color: var(--line-strong); }

  /* -------------------------------------------------------- hints and tour
     The bubble is ink on a soft corner and settles in with the snappy
     spring from its anchor; `scale` is its own property so the centring
     `transform` of the base rule is left alone. */
  .hint-btn { width: 24px; height: 24px; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
  .hint-btn:hover { color: var(--ink); background: var(--grey); }
  .hint-pop {
    border-radius: var(--radius-md);
    background: var(--ink);
    color: var(--paper);
    box-shadow: var(--shadow-md);
    scale: 0.96;
    transform-origin: top center;
    transition: opacity 140ms var(--ease-out), scale var(--spring-snappy-dur) var(--spring-snappy), visibility 0s linear 140ms;
  }
  .hint:hover .hint-pop, .hint:focus-within .hint-pop, .hint-pop:hover {
    scale: 1;
    transition: opacity 140ms var(--ease-out), scale var(--spring-snappy-dur) var(--spring-snappy), visibility 0s;
  }
  .hint-pop-title { font-weight: 600; }
  @media (max-width: 640px) {
    .hint-pop, .hint--end .hint-pop { border-radius: var(--radius-lg) var(--radius-lg) 0 0; scale: 1; }
  }

  .tour-pop { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
  .tour-title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; letter-spacing: -0.015em; }
  .tour-close { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }

  /* ------------------------------------------------------------------ tabs */
  .profile-tabs { gap: var(--space-4); }
  .profile-tab {
    position: relative;
    padding: 12px 14px;
    border-bottom: 0;
    color: var(--muted);
    font-weight: 500;
  }
  .profile-tab::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transform: scaleX(0);
    transition: transform var(--spring-snappy-dur) var(--spring-snappy);
  }
  a.profile-tab:hover { color: var(--ink); }
  a.profile-tab:hover::after { transform: scaleX(0.4); background: var(--line-strong); }
  .profile-tab.is-current, a.profile-tab.is-current:hover { color: var(--ink); font-weight: 600; }
  .profile-tab.is-current::after, a.profile-tab.is-current:hover::after { transform: scaleX(1); background: var(--ink); }

  /* ------------------------------------------------------- the marketing bar */
  .wordmark { font-family: var(--font-sans); font-weight: 650; letter-spacing: -0.035em; }
  .lang-current { border-radius: var(--btn-radius); font-weight: 600; transition: background-color var(--dur-fast) var(--ease-out); }
  .lang-menu {
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }
  .lang-link { border-radius: var(--radius); transition: background-color var(--dur-fast) var(--ease-out); }
  .lang-link:hover { background: var(--paper); }
  .lang-link.is-active { font-weight: 600; }

  .mega-inner { gap: var(--space-32); padding-block: var(--space-32) var(--space-48); }
  .mega-col-title {
    margin: 0 0 var(--space-8);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
  }
  .mega-col ul { gap: 2px; }
  .mega-col a {
    display: block;
    margin-inline: -10px;
    padding: 7px 10px;
    border-radius: var(--radius);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.35;
    transition: background-color var(--dur-fast) var(--ease-out);
  }
  .mega-col a:hover { color: var(--ink); background: var(--paper); text-decoration: none; }
  .mega-col a[aria-current="page"] { background: var(--mark-soft); }
  .mega-preview { width: 300px; }
  .mega-preview .frame { box-shadow: var(--shadow-md); }
  .mega-preview-cap { font-size: 13px; }
  .mega-preview-cap a { color: var(--ink); font-weight: 600; }
  .mega-post-img { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
  .mega-post-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
  .mega-post:hover .mega-post-title { text-decoration: underline; text-decoration-thickness: 1px; }

  /* The drawer: a sheet of paper under the bar, its top level set in the
     serif so it reads as a table of contents rather than a settings list. */
  .nav-toggle {
    border: 1px solid var(--line);
    border-radius: var(--btn-radius);
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    transition: transform var(--spring-snappy-dur) var(--spring-snappy);
  }
  .nav-toggle:active { transform: scale(0.94); }
  .drawer .pub-nav-link, .drawer-group > summary {
    min-height: 56px;
    border-bottom-color: var(--line);
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: -0.015em;
  }
  .drawer-group > summary::after { width: 9px; height: 9px; border-width: 1.5px; transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
  .drawer-group .mega-col { margin: var(--space-12) 0 var(--space-12); }
  .drawer-group .mega-col-title { border-bottom: 0; padding-bottom: 0; }
  .drawer-group .mega-col a { margin-inline: 0; padding: 0; font-size: var(--text-md); color: var(--ink-2); }
  .drawer-group .mega-col a:hover { background: none; color: var(--ink); }
  .drawer-langs { gap: 2px; }
  .drawer-langs .lang-link { border-radius: 999px; padding: 0 10px; }
  .drawer-langs .lang-link.is-active { background: var(--white); box-shadow: 0 0 0 1px var(--line); }
  .drawer-actions { gap: var(--space-8); margin-top: var(--space-8); }

  /* ---------------------------------------------------------------- footer */
  .footer { font-size: var(--text-sm); }
  .footer-brand p { color: var(--muted); }
  .footer-col h2 { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--muted); }
  .footer-col ul { gap: 10px; }
  .footer-col a { color: var(--ink); text-decoration-thickness: 1px; }
  .footer-col a:hover { color: var(--ink); text-decoration: underline; }
  .footer-brand .footer-account a:not(.btn) { color: var(--ink); }
  .footer-bottom { border-top-color: var(--line); }
  .footer-langs .lang-link:hover { color: var(--ink); background: none; }

  /* ------------------------------------------------------------ the cookie
     A slip that floats over the page's bottom edge, not a strip welded to
     it. The three answers are the same button, the same weight, in the order
     the template writes them (AEPD: none may look like the way out). */
  .cookie-banner {
    inset: auto 16px 16px;
    max-width: 1120px;
    margin-inline: auto;
    padding: var(--space-16) var(--space-16) var(--space-16) var(--space-24);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: kit-rise var(--spring-soft-dur) var(--spring-soft) both;
  }
  .cookie-banner-text { color: var(--ink-2); }
  .cookie-banner-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
  .cookie-banner-actions { gap: var(--space-8); }
  @media (max-width: 640px) {
    .cookie-banner { inset: auto 8px 8px; padding: var(--space-16); border-radius: var(--radius-md); }
    .cookie-banner-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .cookie-banner-actions > .btn:last-child { grid-column: 1 / -1; }
  }

  @keyframes kit-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
  @keyframes kit-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

@layer pages {
  /* ------------------------------------------------------------ buttons
     expediente.css hovers every non-text button pine at (0,4,0); each
     variant answers at the same weight, later, so the outline stays an
     outline and the paper block stays paper. */
  .btn--secondary:not(.btn--ghost):not(.btn--quiet):hover { color: var(--ink); background: var(--white); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
  .btn--danger:not(.btn--ghost):not(.btn--quiet):hover { color: var(--nogo); background: var(--nogo-bg); border-color: var(--nogo); box-shadow: none; }
  .btn--on-field:not(.btn--ghost):not(.btn--quiet):hover { color: var(--field); background: var(--white); border-color: var(--white); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5); }
  /* In the bar the paper block is inverted to pine (expediente.css); it keeps
     that on hover instead of flipping to white. */
  .topnav .btn--on-field:not(.btn--ghost):not(.btn--quiet):hover { color: var(--paper); background: var(--field-2); border-color: var(--field-2); box-shadow: 0 8px 20px -10px rgba(16, 36, 31, 0.6); }
  .btn--secondary, .btn--secondary:hover { border-color: var(--line); background: var(--white); box-shadow: var(--shadow-sm); }
  .btn.btn--ghost:hover, .btn.btn--quiet:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); border-color: transparent; }
  .btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

  /* `.band--field a` (0,1,1) paints every link on the pine paper-coloured,
     button links included: the paper block went paper-on-paper on every
     closing band. A button's colour is its own business. */
  a.btn--on-field, .band--field a.btn--on-field { color: var(--field); }
  .band--field a.btn--ghost { color: var(--paper); }
  .band--field a.btn--ghost:hover { color: var(--paper); background: color-mix(in srgb, var(--paper) 12%, transparent); }
  .band--field .btn--secondary, .band--field .btn--secondary:not(.btn--ghost):not(.btn--quiet):hover { color: var(--paper); background: transparent; border-color: color-mix(in srgb, var(--paper) 55%, transparent); box-shadow: none; }
  .band--field .btn--secondary:not(.btn--ghost):not(.btn--quiet):hover { border-color: var(--paper); background: color-mix(in srgb, var(--paper) 8%, transparent); }

  /* expediente.css parks the closed mega menu at translateY(-8px) scale(.995)
     from `pages`, which also beat app.css's open state in `components`: the
     open panel sat 8px high and 4px short of each edge. */
  .mega.is-open { transform: none; }
  .no-js .mega { transform: none; box-shadow: none; }

  /* The search keeps its own box, and the one ring. */
  .search:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--ink); box-shadow: var(--shadow-md); }

  /* The cookie answers: one look for all three, never the pine block. */
  .cookie-banner .btn, .cookie-banner .btn:not(.btn--ghost):not(.btn--quiet):hover {
    height: 42px;
    padding: 0 18px;
    color: var(--ink);
    background: var(--white);
    border-color: var(--line-strong);
    box-shadow: none;
  }
  .cookie-banner .btn:not(.btn--ghost):not(.btn--quiet):hover { border-color: var(--ink); background: var(--paper); }

  /* ------------------------------------------------- the bare shell (way in)
     Paper, the ledger ruling of the landing's hero fading out behind the
     card, and one white sheet. */
  .bare { position: relative; isolation: isolate; background: var(--paper); }
  .bare::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--line) 75%, transparent) 31px 32px);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 10%, transparent 75%);
    mask-image: radial-gradient(70% 60% at 50% 30%, #000 10%, transparent 75%);
    pointer-events: none;
  }
  .bare-main { width: min(480px, 100%); }
  .bare-brand { gap: 10px; color: var(--ink); }
  .bare-wordmark { font-size: 1.6rem; }
  .bare-card {
    padding: var(--space-32) var(--space-32) var(--space-24);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .bare-card h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.025em;
  }
  .bare-intro { margin: var(--space-8) 0 var(--space-24); font-size: var(--text-md); color: var(--muted); }
  .bare-card .stack { gap: var(--space-16); }
  .bare-card .btn--block { height: 48px; margin-top: var(--space-8); font-size: var(--text-md); }
  .bare-card .flash { margin-bottom: var(--space-16); box-shadow: none; }
  .bare-foot { font-size: var(--text-sm); }
  .bare-foot a, .bare-alt a { color: var(--ink); text-decoration-thickness: 1px; }
  .bare-alt { margin-top: var(--space-24); padding-top: var(--space-16); border-top-color: var(--line); color: var(--muted); line-height: 1.5; }
  .code-input { height: 56px; text-align: center; font-size: 1.6rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) {
    .bare { justify-content: flex-start; padding: var(--space-32) 16px; }
    .bare-card { padding: var(--space-24) 20px 20px; }
  }

  /* ---------------------------------------------------- the signup door */
  .access-grid { gap: var(--space-32) var(--space-64); }
  .access-intro .doc-head h1 { font-size: var(--display-md); line-height: 1; letter-spacing: -0.03em; }
  .access-intro .lead { color: var(--ink-2); font-size: var(--text-xl); line-height: 1.45; }
  .access-form {
    padding: var(--space-32) var(--space-32) var(--space-24);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .access-form.stack { gap: var(--space-24); }
  .access-form .consent-check { color: var(--ink-2); }
  .access-partner > summary { color: var(--ink-2); list-style-position: inside; }
  .access-partner[open] > summary { margin-bottom: var(--space-8); }
  .access-actions { gap: var(--space-12); }
  .access-actions .btn { height: 52px; font-size: var(--text-lg); }
  .access-actions a:not(.btn) { color: var(--ink-2); text-decoration-thickness: 1px; }
  .access-col > .form-note { margin-top: var(--space-16); max-width: 60ch; }
  .access-more { display: grid; gap: var(--space-24); }
  .access-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: access-step; border-top: 1px solid var(--ink); }
  .access-steps li {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: var(--space-12);
    padding: var(--space-16) 0;
    border-bottom: 1px solid var(--line);
    counter-increment: access-step;
    color: var(--ink-2);
  }
  .access-steps li::before {
    content: counter(access-step);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
    color: var(--field);
  }
  .access-steps strong { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; }
  @media (max-width: 640px) {
    .access-form { padding: var(--space-24) 18px 20px; border-radius: var(--radius-md); }
    .access-intro .lead { font-size: var(--text-lg); }
  }

  /* ---------------------------------------------------------- style tile */
  .sg-swatch { border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(22, 24, 20, 0.08); }
  .sg-display-lg, .sg-display-md, .sg-display-sm, .sg-h1, .sg-h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-optical-sizing: auto;
  }
  .sg-display-lg { font-size: var(--display-lg); line-height: 0.98; letter-spacing: -0.035em; }
  .sg-display-md { font-size: var(--display-md); line-height: 1.02; letter-spacing: -0.03em; }
  .sg-display-sm { font-size: var(--display-sm); line-height: 1.05; letter-spacing: -0.028em; }
  .sg-h1 { letter-spacing: -0.02em; }
  .sg-swatch--paper { background: var(--paper); }
  .sg-swatch--field-2 { background: var(--field-2); }
  .sg-swatch--mark { background: var(--mark); }
  .sg-swatch--mark-soft { background: var(--mark-soft); }
  .sg-swatch--focus { background: var(--focus); }
  .sg-note { margin: var(--space-24) 0 0; }
  #sg-feedback .breadcrumbs { margin: var(--space-24) 0 0; }
  .sg-row + .pill-row { margin-top: var(--space-16); }
  .sg-row--focus { padding: var(--space-8) 0; }
  .sg-row--focus .btn { outline: 3px solid var(--focus); outline-offset: 2px; }
  .sg-focus-field { display: inline-flex; padding: var(--space-16); border-radius: var(--radius-md); background: var(--field); }
  #sg-cookies .cookie-banner { position: relative; inset: auto; z-index: auto; max-width: none; animation: none; }
}

/* ======================================================================
   marketing
   ====================================================================== */

/* «Expediente» — marketing. Owned by one refinement pass; loaded after expediente.css.
   Component restyles go in `@layer pages` (or `components`), never a new layer.

   The public pages read as one family with the landing:

   - Every page opens on paper, like the landing does. The pine field is kept
     for what the page claims — «por qué no un chat», the evidence and the
     close — so a reader meets it as the argument, not as a header slab. The
     heroes keep `band--field` in their markup (tests and the campaign
     attribution read it); the paper is decided here, on `.page-hero--paper` (added in
     the templates), `.fl-hero` (the feature landings) and `.exp-hero`.
   - One serif voice for what a section says (titles, card titles, answers,
     prices), one sans for what is operated (links, labels, buttons, tables).
   - Cards are white on paper or grey: 1px `--line`, `--radius-md`, soft shadow.
   - Figures are lining and tabular; mono is for identifiers only. */

@layer pages {
  /* ------------------------------------------------------------ paper heroes */
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) {
    position: relative;
    overflow: hidden;
    padding: var(--space-64) 0 var(--space-64);
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  /* The landing's ledger rules, fainter and fading to the right: the same
     file, one page further in. */
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero)::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--line) 60%, transparent) 31px 32px);
    -webkit-mask-image: radial-gradient(80% 90% at 20% 10%, #000 15%, transparent 70%);
    mask-image: radial-gradient(80% 90% at 20% 10%, #000 15%, transparent 70%);
    pointer-events: none;
  }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) > .container { position: relative; }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) h1 {
    max-width: 24ch;
    margin-bottom: var(--space-24);
    color: var(--ink);
    font-size: var(--display-md);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) a { color: var(--ink); }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) a:hover { color: var(--field-2); }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .breadcrumbs { margin-bottom: var(--space-24); }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .breadcrumbs,
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .breadcrumbs a { color: var(--muted); }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .breadcrumbs a:hover,
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .breadcrumb-current { color: var(--ink); }
  /* On paper the hero's one action is the primary pine button, whatever
     class the markup gives it for the pine bands. */
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .btn.btn--on-field {
    color: var(--paper);
    background: var(--field);
    border-color: var(--field);
  }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .btn.btn--on-field:hover {
    color: var(--paper);
    background: var(--field-2);
    border-color: var(--field-2);
  }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .btn.btn--ghost,
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .btn.btn--secondary {
    color: var(--ink);
    background: transparent;
    border-color: var(--ink);
  }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .btn.btn--ghost:hover,
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .btn.btn--secondary:hover {
    color: var(--ink);
    background: var(--white);
    border-color: var(--ink);
  }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .hero-actions { margin-top: var(--space-32); }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .hero-aside { color: var(--muted); }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .hero-aside a { color: var(--ink); font-weight: 500; }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .fl-hero-more {
    max-width: 64ch;
    margin-top: var(--space-48);
    padding-top: var(--space-24);
    border-top: 1px solid var(--line);
    color: var(--ink-2);
  }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .search { border-color: var(--line); }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .exp-form label { color: var(--ink); }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .exp-form .label-hint { color: var(--muted); }
  /* The MCP address: a white card with the copy button on its right. */
  .band--field.page-hero.page-hero--paper .secret {
    max-width: 36rem;
    margin-top: var(--space-32);
    padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-size: var(--text-md);
  }

  /* ------------------------------------------------------------ the close
     `.band--field a` paints every link paper, which reached the close's
     paper button and left it blank. The button's own colours again. */
  .band--field .close .btn.btn--on-field,
  .band--field .close .btn.btn--on-field:hover { color: var(--field); }
  .close h2 { text-wrap: balance; }
  .close > div > p { max-width: 60ch; margin: var(--space-24) 0 0; font-size: var(--text-lg); line-height: 1.5; }
  .band--field .close > div > p { color: var(--muted-on-field); }
  .band--field .close > div > p a { color: var(--paper); }
  .band--grey .close > div > p { color: var(--ink-2); }
  .close-actions a:not(.btn) { font-weight: 500; }
  .band--grey .close-actions a:not(.btn) { color: var(--ink); }

  /* ------------------------------------------------------------ rhythm
     A section title with a lead under it: the two read as one statement,
     and the content starts a breath further down. */
  .band > .container > h2:has(+ .lead),
  .band > .container > .band-title:has(+ .lead),
  .band-title:has(+ .data-lead) { margin-bottom: var(--space-16); }
  .band > .container > h2 + .lead,
  .band > .container > .band-title + .lead { margin: 0 0 var(--space-48); max-width: 62ch; }

  /* ------------------------------------------------------------ cells & rows */
  .cells > * { border-top-width: 1px; }
  .cells h3 {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .data-rows > * { padding: var(--space-24) 0; }
  ul.data-rows > li { color: var(--ink); }
  .next-steps { border-top-width: 1px; }
  .next-steps li { padding: var(--space-24) 0; }
  .next-steps a {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .next-steps a:hover { color: var(--field-2); }
  .latest-sub {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2rem);
    letter-spacing: -0.02em;
  }
  .band-sub { font-weight: 500; font-stretch: 100%; }

  /* ------------------------------------------------------------ plan doors (home) */
  .home-plans { align-items: stretch; gap: var(--space-16); }
  .home-plans .plan-link {
    display: flex;
    flex-direction: column;
    padding: var(--space-24) var(--space-24) 28px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border-color: var(--line);
  }
  .home-plans .plan-link-title {
    margin-bottom: var(--space-8);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .home-plans .plan-link:hover .plan-link-title { text-decoration: none; }
  .home-plans .plan-link-price { margin-bottom: var(--space-12); font-size: 2rem; letter-spacing: -0.02em; }
  .home-plans .plan-link-body { font-size: var(--text-sm); line-height: 1.55; }

  /* ------------------------------------------------------------ /producto chapters */
  .chapter h2 { text-wrap: balance; }
  .chapter-limit strong { font-weight: 600; }
  .chapter .frame, #cita .frame {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }

  /* ------------------------------------------------------------ /precios */
  .pricing-plans { gap: var(--space-16); }
  .plan-card {
    padding: 28px var(--space-24);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .plan-card.is-featured {
    border: 1px solid var(--field);
    box-shadow: 0 0 0 1px var(--field), var(--shadow-md);
  }
  .plan-card .plan-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  /* The flag sits on the featured card's top edge, so the four names, prices
     and buttons stay on one line across the row. */
  .plan-card.is-featured { position: relative; }
  .plan-card.is-featured .plan-flag {
    position: absolute;
    top: 0;
    left: var(--space-24);
    transform: translateY(-50%);
    padding: 3px 12px;
    border-radius: 999px;
    font-weight: 500;
  }
  .plan-card .plan-price {
    font-family: var(--font-display);
    font-weight: 500;
    font-stretch: 100%;
    letter-spacing: -0.03em;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .plan-price-note { font-family: var(--font-sans); }
  .plan-card .plan-includes li::before { border-color: var(--go); }
  .pricing-fine { border-top-width: 1px; }
  /* The matrix on /precios: the feature column reads left, the figures in
     the UI face with tabular digits, the four tiers centred under their name. */
  #comparar .plan-matrix .plan-table th[scope="col"]:first-child { text-align: left; }
  #comparar .plan-matrix .plan-table th[scope="col"] { font-weight: 600; }
  #comparar .plan-matrix .plan-table th[scope="row"] { color: var(--ink); }
  #comparar .plan-matrix .plan-table { background: var(--white); }
  .pricing-usage .beta-note p:first-child {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  /* «Antes de decidir»: the three doors as the home's plan doors. */
  .band .plans-links:not(.home-plans) { gap: var(--space-16); }
  .band .plans-links:not(.home-plans) .plan-link {
    padding: var(--space-24);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .band .plans-links:not(.home-plans) .plan-link-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .band .plans-links:not(.home-plans) .plan-link:hover .plan-link-title { text-decoration: none; }
  .band .plans-links:not(.home-plans) .plan-link-body { font-size: var(--text-sm); line-height: 1.55; color: var(--ink-2); }

  /* ------------------------------------------------------------ /casos-go-no-go */
  .case-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.4rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .case-head h2 a { color: var(--ink); text-decoration: none; }
  .case-head h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
  .case-kicker { font-weight: 500; color: var(--muted); }
  .case-band .verdict-sign { max-width: 66rem; margin-top: var(--space-32); }
  .case-band .mini--read { max-width: 66rem; }

  /* ------------------------------------------------------------ /demo */
  .demo-card {
    padding: var(--space-48);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  .demo-pitch h1 {
    font-size: clamp(2rem, 1.5rem + 1.2vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  /* ------------------------------------------------------------ /contacto */
  .contact-mail h2, .contact-topics > h2, .contact-close h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .contact-mail .contact-address { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
  .contact-topic h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; }
  .contact-close { border-top-width: 1px; }

  /* ------------------------------------------------------------ /herramientas */
  .tool-row { padding: 28px 0; }
  .tool-row h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    font-stretch: 100%;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .tool-row:hover h2 a { color: var(--field-2); }
  .tool-row-go { color: var(--ink); transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
  .tool-row:hover .tool-row-go { transform: translateX(4px); }
  /* A tool page: the form card, the answer beside it, and room before the
     explanation below. */
  .tool-split { margin-bottom: var(--space-64); }
  .tool-split .card { border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
  .tool-out > h2, .tool-out .card h2, .tool-form h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.015em;
  }
  .tool-answer {
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  .tool-answer strong { font-weight: 600; }
  .tool-out .facts dd, .tool-out td { font-variant-numeric: lining-nums tabular-nums; }
  .tw-check h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; }
}

@layer utilities {
  /* `.band--field .lead` lives here, above `pages`: on the paper heroes the
     lead is ink again. */
  /* `.t-mono` too: a quota is a figure, not an identifier. */
  #comparar .plan-matrix .t-mono {
    font-family: var(--font-sans);
    font-size: 1em;
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .lead {
    max-width: 60ch;
    color: var(--ink-2);
    font-size: var(--text-xl);
    line-height: 1.45;
  }
}

@media (max-width: 900px) {
  @layer pages {
    .demo-card { padding: var(--space-24); }
  }
}

@media (max-width: 640px) {
  @layer pages {
    .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) { padding: var(--space-32) 0 var(--space-48); }
    .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) h1 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 2.6rem); }
    .band > .container > h2 + .lead,
    .band > .container > .band-title + .lead { margin-bottom: var(--space-32); }
    .demo-card { padding: var(--space-16); border-radius: var(--radius-md); }
    .plan-card { padding: var(--space-24) var(--space-16); }
    .tool-row h2 { font-size: 1.3rem; }
  }
  @layer utilities {
    .band--field.page-hero:is(.page-hero--paper, .fl-hero, .exp-hero) .lead { font-size: var(--text-lg); }
  }
}

/* ======================================================================
   content
   ====================================================================== */

/* «Expediente» — content. Owned by one refinement pass; loaded after expediente.css.
   Component restyles go in `@layer pages` (or `components`), never a new layer.

   Scope: the editorial and reference pages — the blog and its cards, the
   author page, the guides, /ayuda, the glossary, /jurisprudencia, the legal
   documents, /accesibilidad, /metodologia, /novedades, /cobertura, /api, and
   the public data pages (/mercado, /informe, /contratos-una-sola-oferta,
   /licitaciones-desiertas, /organismos).

   The serif earns its keep here. Long reading is set in Newsreader at text
   size with optical sizing on (the face draws a sturdier, wider-set cut below
   20px, which is what makes it read well on a screen); headings, figures and
   quotations are Newsreader too. Everything that is operated — tables,
   tables of contents, metadata, buttons, labels — stays in Instrument Sans.

   Templates that render in both shells carry `ed-data` or `ed-doc` on their
   root so a shared component (`.summary`, `.app-head`, `.card-head`) can be
   given the editorial treatment here without touching it anywhere else. */

@layer pages {
  :root {
    /* The reading measure and the text size of a long read. 19px serif
       is roughly the colour of 18px sans; 1.6 keeps the Spanish legal
       sentences (long, comma-heavy) from turning into a grey slab. */
    --ed-measure: 68ch;
    --ed-body: #24272B;
    --ed-text: 1.1875rem;
    --ed-leading: 1.62;
    --ed-h2: clamp(1.625rem, 1.3rem + 0.9vw, 2rem);
    --ed-h3: clamp(1.3rem, 1.15rem + 0.4vw, 1.5rem);
    --ed-figure: clamp(2.25rem, 1.6rem + 1.6vw, 3rem);
  }

  /* ============================================================ the head
     Every reading page opens the same way: crumbs, a serif title, a lead in
     the ink's second step, and the dated line under it. */
  .ed-doc .doc-head h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-optical-sizing: auto;
    letter-spacing: -0.026em;
    line-height: 1.02;
    text-wrap: balance;
  }
  .ed-doc .doc-head .lead {
    text-wrap: pretty;
  }
  .ed-doc .doc-meta { font-variant-numeric: lining-nums tabular-nums; }
  .ed-doc .doc-meta code, .ed-doc .doc-meta .t-mono { font-size: 0.92em; }
  .ed-doc .breadcrumbs { font-size: var(--text-sm); }

  /* ============================================================ prose
     `.article-content` is every long read (legal pages, /metodologia,
     /accesibilidad, /api, the guides' prose); `.post-prose` is a post. */
  .ed-doc .article-content,
  .ed-doc .post-prose {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: var(--ed-text);
    line-height: var(--ed-leading);
    /* A serif's hairlines thin out on screen; the body takes the full ink
       rather than the second step the sans used. */
    color: var(--ed-body);
    font-variant-numeric: lining-nums proportional-nums;
    hanging-punctuation: first;
    text-wrap: pretty;
  }
  .ed-doc .article-content > :where(p, ul, ol, h2, h3, h4, blockquote, dl) { max-width: var(--ed-measure); }
  .ed-doc .post-prose > :where(p, ul, ol, h2, h3, h4, blockquote, dl) { max-width: none; }
  .ed-doc .article-content :where(strong, b) { font-weight: 600; color: var(--ink); }
  .ed-doc .article-content a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  .ed-doc .article-content a:hover { text-decoration-thickness: 2px; }

  .ed-doc .article-content :where(h2, h3) {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    color: var(--ink);
    text-wrap: balance;
  }
  .ed-doc .article-content h2,
  .ed-doc .post-prose h2 {
    font-size: var(--ed-h2);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: var(--space-64) 0 var(--space-16);
    padding-top: var(--space-24);
    border-top: 1px solid var(--line);
  }
  .ed-doc .article-content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .ed-doc .post-prose hr { margin: var(--space-48) 0 0; border-top-color: var(--line); }
  .ed-doc .post-prose hr + h2 { margin-top: var(--space-24); padding-top: 0; border-top: 0; }
  .ed-doc .article-content h3,
  .ed-doc .post-prose h3 {
    font-size: var(--ed-h3);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.012em;
    margin: var(--space-48) 0 var(--space-12);
  }
  /* h4 is a run-in label, not a fourth size of serif. */
  .ed-doc .article-content h4 {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink);
    margin: var(--space-32) 0 var(--space-8);
  }
  .ed-doc .article-content p { margin: 0 0 1.05em; }
  .ed-doc .article-content :where(ul, ol) { padding-left: 1.35em; margin-bottom: 1.2em; }
  .ed-doc .article-content li { margin-bottom: 0.45em; padding-left: 0.15em; }
  .ed-doc .article-content li::marker { color: var(--line-strong); }
  .ed-doc .article-content ol > li::marker { font-variant-numeric: lining-nums tabular-nums; color: var(--muted); }
  .ed-doc .article-content :where(li > ul, li > ol) { margin: 0.45em 0 0; }

  /* Quotations are said, so they are the serif at a step up, hung on a
     single ink rule. Only a citation gets the highlighter. */
  .ed-doc .article-content blockquote {
    margin: var(--space-32) 0;
    padding: 0 0 0 var(--space-24);
    border-left: 2px solid var(--ink);
    font-size: 1.22em;
    line-height: 1.45;
    color: var(--ink);
  }
  .ed-doc .article-content blockquote p:last-child { margin-bottom: 0; }

  .ed-doc .article-content hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-48) 0; }

  /* Inline code: identifiers, so the mono, on the paper's own grey. */
  .ed-doc .article-content :not(pre) > code {
    font-size: 0.8em;
    padding: 0.08em 0.36em;
    border-radius: 5px;
    border-color: var(--line);
    background: var(--grey);
    color: var(--ink);
  }
  .ed-doc .article-content > pre {
    border-radius: var(--radius-md);
    background: var(--white);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-mono);
  }

  /* Fenced blocks were a navy slate from the cobalt system. On pine now,
     paper-coloured text, the header a step lighter. */
  .ed-doc .code-block-wrap {
    background: var(--field-deep);
    border: 1px solid var(--field-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .ed-doc .code-header {
    background: var(--field);
    border-bottom-color: var(--line-on-field);
    color: var(--muted-on-field);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
  }
  .ed-doc .code-lang { color: var(--paper); font-weight: 600; }
  .ed-doc .copy-code-btn {
    background: transparent;
    border-color: var(--line-on-field);
    color: var(--paper);
    border-radius: 6px;
    font-family: var(--font-sans);
  }
  .ed-doc .copy-code-btn:hover { background: var(--paper); border-color: var(--paper); color: var(--field); }

  /* Tables inside a read: white card, ruled, the head on the paper's grey;
     the sans and tabular figures, because a table is consulted, not read. */
  .ed-doc .article-content .table-wrap {
    margin: var(--space-32) 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-sm);
  }
  .ed-doc .article-content table {
    font-family: var(--font-sans);
    font-variant-numeric: lining-nums tabular-nums;
    background: var(--white);
  }
  .ed-doc .article-content :where(th, td) {
    font-size: var(--text-sm);
    line-height: 1.5;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
  }
  .ed-doc .article-content :where(th, td) + :where(th, td) { border-left: 1px solid var(--line-soft); }
  .ed-doc .article-content thead th {
    background: var(--grey);
    color: var(--ink);
    font-weight: 600;
    vertical-align: bottom;
  }
  .ed-doc .article-content tbody tr:last-child > * { border-bottom: 0; }
  /* The legal documents and /metodologia wrap their tables in the shared
     `.table-scroll`; inside a read it is the same white card as above. */
  .ed-doc .article-content .table-scroll {
    margin: var(--space-24) 0 var(--space-32);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-sm);
  }
  .ed-doc .article-content tbody th {
    background: color-mix(in srgb, var(--paper) 60%, var(--white));
    color: var(--ink);
    font-weight: 600;
    text-align: left;
    vertical-align: top;
  }
  .ed-doc .article-content tr:nth-child(even) td,
  .ed-doc .post-prose tr:nth-child(even) td { background: transparent; }
  .ed-doc .article-content tbody tr:hover td { background: color-mix(in srgb, var(--mark-soft) 30%, transparent); }

  /* Figures: the caption is a label, sans, not italic. */
  .ed-doc .article-figure figcaption,
  .ed-doc .post-prose .article-figure figcaption {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: var(--text-sm);
    color: var(--muted);
    text-align: left;
  }
  .ed-doc .article-figure img, .ed-doc .article-inline-img { border-color: var(--line); border-radius: var(--radius-md); }

  /* Callouts: white cards with one coloured rule. The decorative glyph the
     Markdown engine draws in the head is dropped: the label says it. */
  .ed-doc .article-content .callout-box,
  .ed-doc .post-prose .callout-box {
    margin: var(--space-32) 0;
    padding: var(--space-16) var(--space-24) var(--space-24);
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink);
    border-radius: 4px var(--radius-md) var(--radius-md) 4px;
    box-shadow: var(--shadow-sm);
    font-size: var(--text-md);
  }
  .ed-doc .callout-head {
    gap: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink);
    margin-bottom: var(--space-8);
  }
  .ed-doc .callout-head svg { display: none; }
  .ed-doc .callout-body {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink-2);
  }
  .ed-doc .callout-body strong { color: var(--ink); font-weight: 600; }
  .ed-doc .callout-box.callout--note { border-left-color: var(--field); }
  .ed-doc .callout-box.callout--note .callout-head { color: var(--field); }
  .ed-doc .callout-box.callout--important { border-left-color: var(--ink); }
  .ed-doc .callout-box.callout--important .callout-head { color: var(--ink); }
  .ed-doc .callout-box.callout--warning { border-left-color: var(--nogo); }
  .ed-doc .callout-box.callout--warning .callout-head { color: var(--nogo); }
  .ed-doc .callout-box.callout--example { border-left-color: var(--line-strong); background: color-mix(in srgb, var(--paper) 55%, var(--white)); }
  .ed-doc .callout-box.callout--example .callout-head { color: var(--muted); }

  /* A checklist is something to tick: sans, the box drawn in ink. */
  .ed-doc .article-content .checklist-list { gap: 8px; }
  .ed-doc .article-content .checklist-item {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.5;
    padding: 12px 16px;
    border-color: var(--line);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink-2);
  }
  .ed-doc .article-content .checklist-item.is-checked { background: var(--go-bg); border-color: color-mix(in srgb, var(--go) 30%, var(--line)); }
  .ed-doc .check-box { border-radius: 4px; margin-top: 3px; }
  .ed-doc .check-box.unchecked { border: 1.5px solid var(--line-strong); background: var(--white); }
  .ed-doc .check-box.checked { background: var(--go); }

  /* ============================================================ the post */
  .ed-doc .doc-head.post-head h1 { font-size: var(--display-sm); line-height: 1.04; max-width: 24ch; }
  .ed-doc .doc-head.post-head .lead { max-width: 40rem; }
  .post-byline { border-top-color: var(--line); padding-top: var(--space-24); margin-top: var(--space-32); }
  .post-byline-avatar { background: var(--white); border-color: var(--line); }
  .post-byline-text { font-variant-numeric: lining-nums tabular-nums; }
  .post-byline-name a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .share-btn {
    border-color: var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    transition: border-color var(--dur-fast) var(--ease-out), transform var(--spring-snappy-dur) var(--spring-snappy);
  }
  .share-btn:hover { border-color: var(--ink); color: var(--ink); }
  .share-btn:active { transform: scale(0.94); transition-duration: 90ms; }

  @media (min-width: 1101px) {
    .post-layout { grid-template-columns: minmax(0, 44rem) 15rem; column-gap: clamp(var(--space-48), 6vw, var(--space-96)); }
    .post-rail { position: sticky; top: calc(64px + var(--space-32)); align-self: start; max-height: calc(100vh - 64px - var(--space-64)); overflow-y: auto; }
  }
  .post-hero-img { border-color: var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

  .post-takeaways {
    margin-bottom: var(--space-48);
    padding: var(--space-24) var(--space-32) var(--space-32);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .post-takeaways-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.375rem;
    letter-spacing: -0.012em;
    margin-bottom: var(--space-16);
  }
  .post-takeaways ul { padding-left: 1.2em; }
  .post-takeaways li {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--ink-2);
  }
  .post-takeaways li::marker { color: var(--field); }

  /* The contents rail: a quiet, sticky index in the sans. */
  .post-toc-title { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
  .post-toc-list { padding-left: 0; border-left: 1px solid var(--line); font-variant-numeric: lining-nums tabular-nums; }
  .post-toc-list li + li { margin-top: 2px; }
  .post-toc-list a {
    display: block;
    margin-left: -1px;
    padding: 5px 0 5px var(--space-16);
    border-left: 2px solid transparent;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .post-toc-list .toc-level-3 { padding-left: 0; }
  .post-toc-list .toc-level-3 a { padding-left: calc(var(--space-16) + var(--space-12)); font-size: 0.8125rem; }
  .post-toc-list a:hover, .post-toc-list a[aria-current] { color: var(--ink); text-decoration: none; border-left-color: var(--ink); }
  .post-toc-inline { background: var(--white); border-color: var(--line); border-radius: var(--radius-md); }
  .post-toc-inline .post-toc-list { border-left: 0; }
  .post-toc-inline .post-toc-list a { padding-left: 0; border-left: 0; }
  .post-toc-inline .post-toc-list .toc-level-3 a { padding-left: var(--space-16); }

  /* «Fuentes oficiales» and «Correcciones»: the apparatus at the foot of a
     read, so a step smaller, numbered like notes, the host in grey. */
  .ed-doc .post-after { margin-top: var(--space-64); }
  .ed-doc .post-after h2 {
    font-size: var(--ed-h3);
    font-weight: 500;
    margin-top: 0;
    padding-top: var(--space-24);
    border-top: 1px solid var(--ink);
  }
  .ed-doc .post-after > p { font-size: var(--text-md); color: var(--muted); font-family: var(--font-sans); line-height: 1.55; }
  .ed-doc .post-after :where(ol, ul) {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.5;
  }
  .ed-doc .post-after ol { counter-reset: ed-note; list-style: none; padding-left: 0; }
  .ed-doc .post-after ol > li {
    counter-increment: ed-note;
    position: relative;
    padding: var(--space-8) 0 var(--space-8) 2.5rem;
    margin: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .ed-doc .post-after ol > li::before {
    content: counter(ed-note);
    position: absolute;
    left: 0;
    top: var(--space-8);
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--muted);
  }
  .ed-doc .post-after li a { color: var(--ink); font-weight: 500; }
  .post-source-host { color: var(--muted); font-family: var(--font-mono); font-size: 0.86em; }

  .post-section-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--ed-h2);
    letter-spacing: -0.02em;
  }
  .post-faq { border-top-color: var(--ink); }

  .post-cta {
    margin-top: var(--space-64);
    padding: var(--space-32);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  .post-cta h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.625rem;
    line-height: 1.15;
    letter-spacing: -0.018em;
    margin-bottom: var(--space-12);
    max-width: 28ch;
    text-wrap: balance;
  }
  .post-cta p { font-size: var(--text-md); line-height: 1.55; max-width: 60ch; }
  .post-cta-link { color: var(--ink); }

  .post-tags { border-top-color: var(--line); }
  .post-author { border-top-color: var(--line); }
  .post-author-name { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; }
  .post-author-name a { color: var(--ink); }
  .post-author-name span { font-family: var(--font-sans); }

  .post-related { margin-top: var(--space-96); padding-top: var(--space-32); border-top: 1px solid var(--ink); }

  /* ============================================================ cards
     The blog grid and the related posts speak the landing's «Guías» band:
     a serif title on a hairline, the meta in the sans above it. */
  .post-card { border-top-color: var(--ink); padding-top: var(--space-16); }
  .post-card-meta { font-variant-numeric: lining-nums tabular-nums; }
  .post-card-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.45rem;
    line-height: 1.16;
    letter-spacing: -0.014em;
    text-wrap: balance;
  }
  .post-card-title a { color: var(--ink); transition: color var(--dur-fast) var(--ease-out); }
  .post-card:hover .post-card-title a { color: var(--field-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
  .post-card-excerpt { color: var(--muted); line-height: 1.5; }
  .post-grid { gap: var(--space-64) var(--space-48); }

  .blog-featured { margin-bottom: var(--space-96); }
  .blog-featured-media {
    border-color: var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: var(--field);
  }
  .blog-featured-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);
    line-height: 1.04;
    letter-spacing: -0.024em;
    text-wrap: balance;
  }
  .blog-featured-title a { color: var(--ink); }
  .blog-featured:hover .blog-featured-title a { color: var(--field-2); text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
  .blog-featured-excerpt { font-size: var(--text-lg); line-height: 1.5; }
  .blog-featured-byline img { background: var(--white); border-radius: 50%; border: 1px solid var(--line); }

  .blog-topics { border-top: 1px solid var(--ink); }
  .blog-topics-title, .blog-standards h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: -0.015em;
  }
  .blog-topics-list a { color: var(--ink); font-weight: 500; }
  .blog-standards { border-top-color: var(--line); }
  .blog-standards-list dt { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }

  /* ============================================================ doc TOC
     `_doc_toc.html`: the legal pages, /metodologia, /api, /accesibilidad. */
  .ed-doc .doc-toc-title { font-weight: 600; }
  .ed-doc .doc-toc ol { font-variant-numeric: lining-nums tabular-nums; }
  .ed-doc .doc-toc ol a { transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
  .ed-doc .doc-toc-num { color: var(--line-strong); }
  .ed-doc .doc-toc ol a:hover .doc-toc-num, .ed-doc .doc-toc ol a[aria-current] .doc-toc-num { color: var(--ink); }
  .ed-doc .doc-toc-fold { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 var(--space-16); }
  .ed-doc .doc-toc-fold ol { border-left: 0; }
  .ed-doc .doc-toc-fold ol a { padding-left: 0; border-left: 0; }

  /* ============================================================ glossary */
  .glossary-letters a {
    background: var(--white);
    border-color: var(--line);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ink);
    transition: border-color var(--dur-fast) var(--ease-out), transform var(--spring-snappy-dur) var(--spring-snappy);
  }
  .glossary-letters a:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
  .glossary-group { border-top: 1px solid var(--ink); }
  .glossary-letter {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 2.75rem;
    letter-spacing: -0.02em;
  }
  .glossary-entry { padding: var(--space-16) 0; }
  .glossary-entry dt {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1875rem;
    line-height: 1.25;
  }
  .glossary-entry dt a { color: var(--ink); }
  .glossary-entry dt span { font-family: var(--font-sans); margin-top: 2px; }
  .glossary-entry dd { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.55; }
  /* A term page is short: its sections step down one size from a post's. */
  .ed-doc .glossary-term-body.article-content h2 {
    font-size: var(--ed-h3);
    margin-top: var(--space-48);
  }
  .ed-doc .glossary-term-body.article-content h2:first-child { margin-top: 0; }

  /* ============================================================ case law */
  .ruling { max-width: 44rem; padding: var(--space-48) 0; }
  .ruling-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.45rem, 1.25rem + 0.5vw, 1.75rem);
    line-height: 1.18;
    letter-spacing: -0.018em;
    text-wrap: balance;
  }
  .ruling-meta { font-variant-numeric: lining-nums tabular-nums; }
  .ruling-summary {
    font-family: var(--font-display);
    font-size: var(--ed-text);
    line-height: var(--ed-leading);
  }
  /* The tribunal's own words are a citation: the highlighter rule. */
  .ruling-quote {
    margin: var(--space-24) 0;
    padding: var(--space-16) var(--space-24);
    border-left: 3px solid var(--mark);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: color-mix(in srgb, var(--mark-soft) 45%, var(--white));
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.55;
  }
  .caselaw-week {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
    border-bottom-color: var(--ink);
  }

  /* ============================================================ changelog */
  .release { border-top-color: var(--line); }
  .release-log .release-head { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.012em; }
  .release-version { font-variant-numeric: lining-nums tabular-nums; }
  .release-head time { font-family: var(--font-sans); font-variant-numeric: lining-nums tabular-nums; }
  .ed-doc .release-notes h3 { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
  .ed-doc .release-notes li { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }

  /* ============================================================ guides */
  .ed-doc .doc-head.guide-head h1 { font-size: var(--display-sm); line-height: 1.04; }
  .guide-prose h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--ed-h2); letter-spacing: -0.02em; }
  .guide-prose p { font-family: var(--font-display); font-size: var(--ed-text); line-height: var(--ed-leading); }
  .guide-caveat {
    padding: var(--space-24) var(--space-32);
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--field);
    border-radius: 4px var(--radius-md) var(--radius-md) 4px;
    box-shadow: var(--shadow-sm);
  }
  .guide-caveat h2 { font-size: 1.375rem; }
  .guide-cite { background: var(--white); border-color: var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

  /* ============================================================ /api
     Samples are white cards like the tables; the HTTP method is an
     identifier, so ink in the mono — green belongs to a verdict. */
  .ed-doc .dev-code {
    background: var(--white);
    border-color: var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .ed-doc .dev-code-head { font-family: var(--font-sans); border-bottom-color: var(--line); }
  .ed-doc .dev-code pre { font-family: var(--font-mono); font-size: 0.8125rem; }
  .ed-doc .api-method { color: var(--ink); font-weight: 600; }
  .ed-doc .article-content .api-endpoint h3 {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0;
    margin: 0 0 var(--space-4);
  }
  .ed-doc .dev-defs dt { color: var(--ink); }
  .ed-doc .dev-defs dd { font-size: var(--text-md); }

  /* ============================================================ /ayuda */
  .help-section > h2, .help-section-intro + * h2 { font-family: var(--font-display); font-weight: 500; }
  .help-section-intro { color: var(--ink-2); max-width: 64ch; }

  /* ============================================================ data pages
     Figures in the display serif; every figure's sample stays right under
     it, in the sans, never dimmed below the contrast floor. */
  .public-body .ed-data .app-head h1,
  .public-body .ed-data .page-header h1,
  .public-body .ed-data > .doc-head h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-optical-sizing: auto;
    font-size: var(--display-sm);
    line-height: 1.05;
    letter-spacing: -0.024em;
    text-wrap: balance;
    max-width: 30ch;
  }
  .public-body .ed-data .app-head-sub, .public-body .ed-data .page-sub {
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 62ch;
  }
  .ed-data .summary {
    gap: 1px;
    background: var(--line);
    border-color: var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .ed-data .summary-cell { padding: var(--space-24); }
  .ed-data .summary-label { color: var(--ink-2); font-size: var(--text-sm); }
  .ed-data .summary-value {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: var(--ed-figure);
    font-stretch: 100%;
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-variant-numeric: lining-nums tabular-nums;
    margin: var(--space-4) 0 var(--space-4);
  }
  .ed-data .summary-value--money { font-size: clamp(1.75rem, 1.35rem + 1vw, 2.25rem); }
  .ed-data .summary-value--empty {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: -0.01em;
  }
  .ed-data .summary-hint { font-variant-numeric: lining-nums tabular-nums; }
  .ed-data .summary-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.375rem;
    letter-spacing: -0.012em;
  }
  .ed-data .card-head h2, .ed-doc .card-head h2,
  .ed-data .card > h2,
  .ed-data section > h2:not([class]) {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  .ed-data .metric-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--ink);
  }
  .ed-data .metric-value--empty { font-weight: 400; font-size: var(--text-sm); font-family: var(--font-sans); color: var(--muted); }
  .ed-data .metric-n { font-variant-numeric: lining-nums tabular-nums; }
  .ed-data .table { font-variant-numeric: lining-nums tabular-nums; }

  /* The «Copiar con fuente» quote: what may be cited, verbatim, so it is a
     citation and carries the highlighter rule. */
  .ed-data .cite-block, .ed-data .buyer-cite {
    background: color-mix(in srgb, var(--mark-soft) 45%, var(--white));
    border: 0;
    border-left: 3px solid var(--mark);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }
  .ed-data .cite-block-quote {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    line-height: 1.5;
    color: var(--ink);
  }
  .ed-data .cite-block-note { color: var(--ink-2); }
  .ed-data .buyer-cite [data-cite-text] { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }

  .buyers-num { font-family: var(--font-display); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }

  /* The close band on these pages: `.band--field a` (paper) outranked the
     on-field button's pine text, so the button printed paper on paper. */
  .ed-close .close-actions .btn--on-field,
  .ed-close .close-actions .btn--on-field:hover { color: var(--field); }
  .ed-close .close h2 { font-family: var(--font-display); font-weight: 500; }

  /* A phone holds about 40 characters of 19px serif: a step down keeps the
     line near 45, and the cards give the text back their inner margin. */
  @media (max-width: 640px) {
    :root {
      --ed-text: 1.0625rem;
      --ed-leading: 1.6;
    }
    .ed-doc .post-takeaways { padding: var(--space-16) var(--space-16) var(--space-24); border-radius: var(--radius-md); }
    .ed-doc .post-cta { padding: var(--space-24) var(--space-16); }
    .ed-doc .article-content .callout-box, .ed-doc .post-prose .callout-box { padding: var(--space-12) var(--space-16) var(--space-16); }
    .ed-doc .article-content blockquote { padding-left: var(--space-16); font-size: 1.12em; }
    /* A post's tables stack into one record per row here (app.css): the
       cell rules above would box every label, so the row carries the rule. */
    .ed-doc .article-content .table-wrap :where(th, td),
    .ed-doc .article-content .table-wrap :where(th, td) + :where(th, td) { border: 0; padding: 4px 0; }
    .ed-doc .article-content .table-wrap tbody tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
    .ed-doc .article-content .table-wrap tbody tr:last-child { border-bottom: 0; }
    .ed-data .summary-cell { padding: var(--space-16); }
    .guide-caveat { padding: var(--space-16) var(--space-16) var(--space-24); }
    .glossary-letter { font-size: 2.25rem; }
  }
}

@layer utilities {
  /* A figure is said, not an identifier. In the indicator tables of the data
     pages (`_ui.stat_row`, the guide's own copy) the value is set in the mono
     by `.t-mono`, which lives in `utilities` and outranks `pages`; this
     narrow override, scoped to the value column of those pages, gives the
     figure the display serif. The DIR3 code and other identifiers keep it. */
  .ed-data td[data-label="Valor"] .t-mono {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--ink);
  }

  /* A glossary term's definition is the answer the reader came for, so it is
     said in the serif, in ink, a size up — not a grey standfirst. `.lead`'s
     colour and size live in `utilities`, so this override does too. */
  .ed-doc .glossary-term-head .lead {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
    line-height: 1.42;
    letter-spacing: -0.008em;
    color: var(--ink);
    max-width: 38rem;
  }
}

/* ======================================================================
   listings
   ====================================================================== */

/* «Expediente» — listings. Owned by one refinement pass; loaded after expediente.css.
   Component restyles go in `@layer pages` (or `components`), never a new layer.

   Scope: discovery (/licitaciones, the sector and province landings, the map,
   the radar, the competitor and company pages, the watch and shared-search
   pages) and the tender page. Two ideas carry it:

   - The row is read left to right in one breath: the title in ink, a quiet
     line of identifiers under it (expediente and CPV in mono, because they are
     codes to copy), the órgano a step down, the state as a quiet pill, the
     plazo as a countdown over its date, and the importe in the serif as the
     one figure a row ends on.
   - The tender page is the landing's showcase card scaled up: the verdict is
     a resolved sign, the requirements are a ledger, and a citation is the
     pliego's own sentence under the highlighter rule.

   Every selector here is scoped to a listing (`.listing`, `.result-tools`,
   `.listing-filters`) or to the tender page (`.tender-page`, `.shared-file`),
   so the generic components keep the components pass's shape everywhere else. */

@layer pages {
  /* ================================================================ listing */

  /* The page head: the sentence under the title reads as a standfirst. */
  .listing-explore { font-weight: 500; }

  /* Filters: one white sheet, the disclosure above it a quiet control. */
  .filter-panel > .filter-panel-toggle,
  .listing-more > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--ink-2);
    font-weight: 500;
    list-style: none;
  }
  .filter-panel > .filter-panel-toggle:hover,
  .listing-more > summary:hover { color: var(--ink); }
  .filter-panel > .filter-panel-toggle::-webkit-details-marker,
  .listing-more > summary::-webkit-details-marker { display: none; }
  .filter-panel > .filter-panel-toggle::before,
  .listing-more > summary::before {
    content: "";
    width: 7px;
    height: 7px;
    margin: 0 2px 3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--spring-snappy-dur) var(--spring-snappy);
  }
  .filter-panel[open] > .filter-panel-toggle::before,
  .listing-more[open] > summary::before { transform: rotate(45deg); margin-bottom: 5px; }
  .listing-filters.card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }

  /* The toolbar: Lista / Mapa and the page size as segmented controls, the
     direction and the copy link as plain text controls beside them. */
  .result-tools { gap: var(--space-8) var(--space-12); }
  .result-tools .scope-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--grey) 55%, var(--white));
    color: var(--muted);
    font-size: var(--text-sm);
  }
  /* «Mostrar» is the label of the size control: it sits outside the track. */
  .result-tools .scope-toggle[aria-label="Licitaciones por página"] { padding-left: var(--space-12); }
  .result-tools .scope-option {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 var(--space-12);
    border: 0;
    border-radius: 7px;
    color: var(--ink-2);
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .result-tools .scope-toggle .scope-option:hover { color: var(--ink); background: color-mix(in srgb, var(--white) 70%, transparent); }
  .result-tools .scope-toggle .scope-option.is-active,
  .result-tools .scope-toggle .scope-option.is-active:hover {
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(22, 24, 20, 0.08), 0 0 0 1px rgba(22, 24, 20, 0.06);
  }
  /* The direction toggle, outside any track. */
  .result-tools > .scope-option {
    min-height: 38px;
    padding: 0 var(--space-12);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
  }
  .result-tools > .scope-option:hover { border-color: var(--line-strong); color: var(--ink); }
  .result-count { color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }

  /* The table sheet. */
  .card--flush:has(> .table-scroll > .listing),
  .card--flush:has(> .table-cards > .listing) {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-sm);
  }
  .listing thead th {
    padding-block: var(--space-12);
    background: color-mix(in srgb, var(--paper) 55%, var(--white));
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0;
  }
  .listing td { padding-block: var(--space-16) 18px; border-color: var(--line-soft); }
  .listing tbody tr:last-child td { border-bottom: 0; }
  .listing.table--tenders tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
  .listing.table--tenders tbody tr:hover,
  .listing.table--tenders tbody tr:hover td { background: color-mix(in srgb, var(--paper) 65%, var(--white)); }

  /* Title. */
  .listing .row-link {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: -0.006em;
    text-decoration: none;
  }
  .listing .row-link:hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--line-strong);
  }
  .listing tr:hover .row-link { text-decoration-color: var(--ink); }

  /* The identifier line: codes in mono, words in the sans, all a step down. */
  .listing .row-sub { gap: 2px var(--space-12); margin-top: 6px; line-height: 1.4; }
  .listing :is(.row-exp, .chip-cpv) {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .listing .row-exp { color: var(--ink-2); max-width: 34ch; }
  .listing :is(.chip-src, .row-kind) { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
  .listing .chip-cpv--more { font-family: var(--font-sans); }
  .listing .row-age { font-size: 0.75rem; color: var(--muted); }
  .listing .row-winner { color: var(--ink-2); font-size: var(--text-sm); }
  .listing .row-winner .t-mono { font-family: var(--font-sans); font-size: inherit; font-variant-numeric: lining-nums tabular-nums; }

  /* The two row links: quiet until pointed at. */
  .listing .row-links { gap: 2px var(--space-16); margin-top: var(--space-8); font-size: 0.8125rem; }
  .listing :is(.row-qv, .row-official) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--line);
    transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
  }
  .listing :is(.row-qv, .row-official):hover { color: var(--ink); text-decoration-color: var(--ink); }
  .listing .row-qv svg { flex: none; }
  .listing .chip-hit { border-radius: 999px; padding: 0 9px; border-color: var(--line); color: var(--ink-2); font-weight: 500; }
  .listing a.chip-hit:hover { background: var(--field); border-color: var(--field); color: var(--paper); }

  /* Órgano and place. */
  .listing .td-wide { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; }
  .listing .td-wide .row-sub { margin-top: 4px; }
  .listing .row-place { font-size: 0.8125rem; color: var(--muted); }

  /* State: a quiet pill, the dot carries the family. */
  .listing .td-status .badge {
    gap: 6px;
    min-height: 24px;
    padding: 0 10px 0 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
  }
  .listing .td-status .badge--open .badge-dot { background: var(--go); }
  .listing .td-status .badge--hold .badge-dot,
  .listing .td-status .badge--urgent .badge-dot { background: var(--review); }
  .listing .td-status .badge--closed .badge-dot { background: var(--ink); }
  .listing .td-status :is(.badge--neutral, .badge--pre, .badge--off) .badge-dot { background: var(--line-strong); }
  .listing .td-status .badge--blocked .badge-dot { background: var(--nogo); }

  /* Plazo: the countdown over the close as published. */
  .listing .td-deadline .chip-days {
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
  }
  .listing .td-deadline .chip-days--soon { color: var(--field-2); }
  .listing .td-deadline .chip-days--urgent {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--field);
    color: var(--paper);
  }
  .listing .td-deadline .chip-days--past { color: var(--muted); font-weight: 500; }
  .listing .td-deadline .row-deadline {
    margin-top: 3px;
    color: var(--ink-2);
    font-size: 0.875rem;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .listing .td-deadline > .row-deadline.t-muted { color: var(--muted); font-size: 0.8125rem; }

  /* Importe: the one figure a row ends on, in the serif. */
  .listing .td-amount,
  .listing td.td-amount.t-mono {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.012em;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
  }

  /* A locked row keeps its title readable, with a rail. */
  .listing tr.is-locked td:first-child { border-left-color: var(--line-strong); }

  /* Row actions. */
  .listing .td-action .row-state { color: var(--muted); font-size: var(--text-sm); }

  /* Pager. */
  .pager { gap: var(--space-12); }
  .pager-status { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: lining-nums tabular-nums; }

  /* The way into the sector and province landings at the foot of a listing. */
  .sector-more .sector-filter-label { color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.012em; }
  .sector-more .pill-filter,
  .track-filter .pill-filter {
    border-radius: 999px;
    border-color: var(--line);
    background: var(--white);
    color: var(--ink-2);
    font-weight: 500;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--spring-snappy-dur) var(--spring-snappy);
  }
  .sector-more a.pill-filter:hover,
  .track-filter a.pill-filter:hover { border-color: var(--ink); color: var(--ink); }
  .track-filter .pill-filter.is-active { background: var(--field); border-color: var(--field); color: var(--paper); }

  /* The quick view's sheet. */
  .qv-dialog {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-lg);
  }
  .qv-dialog::backdrop { background: var(--scrim); }
  .qv-meta { gap: var(--space-8); }
  .qv-meta .row-exp { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: -0.01em; max-width: 30ch; }
  .qv-meta .chip-src, .qv-meta .row-kind { border-radius: 999px; }
  .qv-meta .badge { border-radius: 999px; font-weight: 500; }
  .qv-title {
    margin: var(--space-12) 0 var(--space-8);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .qv-body-line { color: var(--ink-2); }
  .qv-facts { padding-top: var(--space-16); border-top: 1px solid var(--ink); }
  .qv-facts dt { font-weight: 500; }
  .qv-facts dd { font-variant-numeric: lining-nums tabular-nums; }
  .qv-facts .qv-amount { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; }
  .qv-facts .chip-cpv { font-family: var(--font-mono); font-size: 0.75rem; border-radius: 6px; }
  .qv-facts .chip-days { height: auto; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 0.75rem; font-weight: 600; text-decoration: none; }
  .qv-facts .chip-days--past { color: var(--muted); font-weight: 500; }
  .qv-facts .chip-days--soon { color: var(--field-2); }
  .qv-facts .chip-days--urgent { padding: 2px 8px; border-radius: 999px; background: var(--field); color: var(--paper); }
  .qv-facts .row-deadline { font-size: 0.875rem; }
  .qv-summary { line-height: 1.55; }

  /* The sector and province landings: the hero's search and the section
     heads that follow it. */
  .sector-search { align-items: stretch; }
  .sector-search .btn { height: auto; min-height: 44px; }
  .sector-hero-cpv .chip-cpv { border-radius: 999px; background: var(--white); font-family: var(--font-sans); font-weight: 500; }
  .sector-hero ~ .section-head h2,
  .sector-hero ~ .card > .card-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: -0.018em;
  }
  .sector-hero ~ .section-head .card-note { font-variant-numeric: lining-nums tabular-nums; }

  /* ============================================================ tender page */

  /* The head: chips, the title in the serif, the órgano under it. */
  .tender-page .dossier-chips { gap: var(--space-8); }
  .tender-page .dossier-chips .row-exp {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    max-width: none;
  }
  .tender-page .dossier-chips .badge {
    border-radius: 999px;
    font-weight: 500;
  }
  .tender-page .dossier-title,
  .shared-file .dossier-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-optical-sizing: auto;
    font-size: clamp(1.85rem, 1.3rem + 1.5vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.024em;
    max-width: 34ch;
    margin: var(--space-8) 0 var(--space-12);
    text-wrap: balance;
  }
  /* Under the app bar the record's tabs own the page: one step smaller. */
  .app-body .tender-page .dossier-title {
    font-size: clamp(1.6rem, 1.2rem + 0.9vw, 2.15rem);
    line-height: 1.12;
    max-width: 40ch;
  }
  .tender-page .dossier-body-org { color: var(--ink-2); font-size: 1.0625rem; }
  .tender-page .dossier-body-org a { color: var(--ink-2); }
  .tender-page .dossier-body-org a:hover { color: var(--ink); }
  .tender-page .dossier-headline {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--ink);
    max-width: 62ch;
  }
  .tender-page .dossier-oneliner { color: var(--ink-2); max-width: 75ch; }

  /* The verdict in the head: a small resolved sign beside the chips. */
  .tender-head .dossier-top > .stamp--lg {
    height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-sm);
  }

  /* The four key facts: a ruled ledger, the figures in the serif. */
  .tender-page .tender-keyfacts {
    border-top: 1px solid var(--ink);
    padding-block: var(--space-16) var(--space-16);
  }
  .tender-page .tender-keyfacts dt,
  .tender-page .tender-facts dt { color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; }
  .tender-page .tender-keyfacts dd {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.012em;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .tender-page .tender-keyfacts dd .dossier-amount,
  .tender-page .tender-keyfacts .dossier-amount {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: -0.024em;
  }
  /* The same facts as the record's «Detalles» rail: a column, not a band. */
  .tender-page .record-props .tender-keyfacts dd { font-size: 1.05rem; }
  .tender-page .record-props .tender-keyfacts .dossier-amount { font-size: 1.35rem; letter-spacing: -0.015em; }
  .tender-page .tender-keyfacts dd :is(.chip-days, .label-hint, a) { font-family: var(--font-sans); letter-spacing: 0; }
  .tender-page .tender-keyfacts dd .chip-days { vertical-align: 0.3em; margin-left: var(--space-4); }
  .tender-page .tender-facts { border-color: var(--line); }
  .tender-page .tender-facts dd { color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
  .tender-page .tender-facts .chip-cpv,
  .tender-page .record-props .chip-cpv {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: -0.01em;
    border-radius: 6px;
    background: var(--white);
  }

  /* Deadline chips on the page, outside the listing. */
  .tender-page .chip-days { border-radius: 999px; font-size: 0.75rem; font-weight: 600; height: 22px; padding: 0 8px; }
  .tender-page .chip-days--past { text-decoration: none; border-style: solid; border-color: var(--line); color: var(--muted); font-weight: 500; }
  .tender-page .chip-days--soon { color: var(--field-2); border-color: color-mix(in srgb, var(--field-2) 45%, var(--line)); }
  .tender-page .chip-days--urgent { background: var(--field); border-color: var(--field); color: var(--paper); }

  /* What the page holds: quiet pills, anchors. */
  .tender-page .tender-head .dossier-links { gap: var(--space-8); margin-top: var(--space-16); }
  .tender-page .tender-head .dossier-links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 var(--space-12);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .tender-page .tender-head .dossier-links a:hover { border-color: var(--ink); color: var(--ink); }
  .tender-page .tender-head .dossier-links a[href="#puede-presentarse"] { border-color: var(--field); color: var(--field); }
  .tender-page .tender-head .dossier-links a[href="#puede-presentarse"]:hover { background: var(--field); color: var(--paper); }
  .tender-page .dossier-dups { color: var(--muted); font-size: 0.8125rem; }
  .tender-page .dossier-summary {
    margin-top: var(--space-16);
    padding: 2px 0 2px var(--space-16);
    border-left: 2px solid var(--line);
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.55;
  }

  /* Card headings on the page: the serif, as the file's section titles. */
  .tender-page .layout-main > .card > .card-head h2,
  .tender-page .layout-main > section > .card-head h2,
  .tender-page .winners-band .card-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: -0.018em;
  }
  .tender-page .layout-side .card-head h2,
  .tender-page .entrance .card-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: -0.012em;
  }

  /* ------------------------------------------------ the requirement ledger */
  .tender-page .req-list { counter-reset: req; }
  .tender-page .req-item {
    padding: var(--space-24) 0 var(--space-24);
    border-bottom: 1px solid var(--line-soft);
  }
  .tender-page .req-item:first-child { padding-top: var(--space-16); }
  .tender-page .req-head { gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-8); }
  .tender-page .req-chip,
  .tender-page .req-head > .badge--neutral {
    height: 24px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--grey);
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 500;
  }
  /* Eliminatory kinds decide the verdict: an ink outline, the rest a tint. */
  .tender-page :is(.req-chip--technical_solvency, .req-chip--economic_solvency, .req-chip--classification, .req-chip--exclusion) {
    background: var(--white);
    border-color: var(--ink);
    color: var(--ink);
  }
  .tender-page .req-confidence {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--muted);
    letter-spacing: 0;
  }
  .tender-page .req-desc {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 72ch;
    text-wrap: pretty;
  }
  .tender-page .req-desc + .req-desc { margin-top: var(--space-8); }
  .tender-page .explained-note { color: var(--ink-2); }

  /* The citations disclosure: a quiet control, the quote under the rule. */
  .tender-page .citations,
  .shared-file .citations { margin-top: var(--space-12); }
  .tender-page .citations > summary,
  .shared-file .citations > summary,
  .tender-page .cite-context > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    color: var(--ink-2);
    font-weight: 500;
    list-style: none;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .tender-page .citations > summary::-webkit-details-marker,
  .shared-file .citations > summary::-webkit-details-marker,
  .tender-page .cite-context > summary::-webkit-details-marker { display: none; }
  .tender-page .citations > summary::before,
  .shared-file .citations > summary::before,
  .tender-page .cite-context > summary::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--spring-snappy-dur) var(--spring-snappy);
  }
  .tender-page .citations[open] > summary::before,
  .shared-file .citations[open] > summary::before,
  .tender-page .cite-context[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
  .tender-page .citations > summary:hover,
  .shared-file .citations > summary:hover,
  .tender-page .cite-context > summary:hover { color: var(--ink); }
  .tender-page .citations .cite,
  .shared-file .citations .cite { margin: var(--space-12) 0 0; max-width: 72ch; }
  .tender-page .cite,
  .shared-file .cite { gap: var(--space-8); }
  .tender-page .cite-text,
  .shared-file .cite-text { font-size: 1rem; line-height: 1.55; color: var(--ink); }
  .tender-page .cite-meta,
  .shared-file .cite-meta { color: var(--muted); font-size: 0.75rem; font-weight: 500; }
  .tender-page .cite-fragment,
  .shared-file .cite-fragment { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: -0.01em; }
  .tender-page .cite-context-text { color: var(--ink-2); font-size: 0.875rem; }
  .tender-page .cite-quote { color: var(--ink-2); font-style: normal; }

  /* --------------------------------------------------- the Go/No-Go verdict */
  .tender-page .assessment-head {
    align-items: flex-start;
    gap: var(--space-16) var(--space-24);
    margin: var(--space-8) 0 var(--space-24);
  }
  /* The verdict at display size on its own colour, the hint under it: the
     showcase's resolved sign at page scale. The hint is the stamp's own
     title, so nothing is printed that the macro does not already carry. */
  .tender-page .assessment-head > .stamp--xl {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    height: auto;
    min-width: 9.5rem;
    padding: 14px 22px 15px;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    box-shadow: var(--shadow-md);
  }
  .tender-page .assessment-head > .stamp--xl[title]::after {
    content: attr(title);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: color-mix(in srgb, var(--white) 86%, transparent);
  }
  .tender-page .assessment-meta {
    flex: 1 1 22rem;
    align-self: center;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--muted);
    font-variant-numeric: lining-nums tabular-nums;
  }
  .tender-page .assessment-summary {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    line-height: 1.55;
    letter-spacing: -0.004em;
    color: var(--ink);
    max-width: 66ch;
    text-wrap: pretty;
  }
  .tender-page #veredicto h3 { margin: var(--space-32) 0 var(--space-4); font-size: 1.15rem; }
  /* The counters over the verdict: figures in the serif. */
  .tender-page [data-verdict-counters] dd { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
  .tender-page [data-verdict-counters] dd a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

  /* Verdict tables: rows read top-down, the meets pill a quiet pill. */
  .tender-page #veredicto .table--compact td { vertical-align: top; }
  .tender-page #veredicto .table--compact td .badge,
  .tender-page #veredicto .table--compact td .cite-check {
    border-radius: 999px;
    font-weight: 500;
    white-space: nowrap;
  }
  .tender-page #veredicto .table--compact td.td-lead > .badge--neutral { margin-right: 4px; }
  .tender-page #veredicto .table--compact thead th { color: var(--muted); font-size: 0.75rem; font-weight: 500; }

  /* ----------------------------------------------------------- documents */
  .tender-page .documents-table .table td.td-lead { color: var(--ink); font-weight: 500; }
  .tender-page .documents-table .doc-cell a {
    font-weight: 500;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .tender-page .documents-table td.t-mono { font-family: var(--font-sans); font-variant-numeric: lining-nums tabular-nums; }
  .tender-page .documents-table [data-doc-state] { margin-top: 4px; }
  .tender-page .documents-table [data-doc-state="read"] { color: var(--go); }

  /* -------------------------------------------- the entrance card (rail) */
  .tender-page .entrance {
    border-color: var(--line);
    box-shadow: var(--shadow-md);
  }
  .tender-page .entrance-lead { color: var(--ink-2); line-height: 1.55; }
  .tender-page .entrance-facts { border-top-color: var(--line); }
  .tender-page .entrance-sub { color: var(--ink); font-size: 0.8125rem; font-weight: 600; }

  /* ------------------------------------------- the shared file (/compartida) */
  .shared-file .dossier-meta dd { font-variant-numeric: lining-nums tabular-nums; }
  .shared-file .dossier-amount { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; letter-spacing: -0.024em; }
  .shared-file .req-item { padding: var(--space-24) 0; border-bottom: 1px solid var(--line-soft); }
  .shared-file .req-desc { color: var(--ink); font-size: 1rem; line-height: 1.6; max-width: 72ch; }
  .shared-file .assessment-head { align-items: flex-start; gap: var(--space-16) var(--space-24); margin: var(--space-8) 0 var(--space-24); }
  .shared-file .assessment-head > .stamp {
    height: auto;
    padding: 14px 22px 15px;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    box-shadow: var(--shadow-md);
  }
  .shared-file .assessment-meta { align-self: center; font-family: var(--font-sans); font-size: 0.8125rem; color: var(--muted); }
  .shared-file .assessment-summary { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.55; color: var(--ink); max-width: 66ch; }
  .shared-file .card > .card-head h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.018em; }
  .shared-file td .badge { border-radius: 999px; font-weight: 500; white-space: nowrap; }

  /* ------------------------------------------------------------- radar */
  .radar-table td { vertical-align: top; }
  .radar-table .row-link { display: block; font-weight: 600; line-height: 1.38; }
  .radar-table .chip-cpv { margin-top: 6px; border: 0; padding: 0; height: auto; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
  .radar-table .metric-value,
  .radar-table td.metric:not(:has(.metric-value)):not(:has(.badge)) {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .radar-table .radar-window { font-variant-numeric: lining-nums tabular-nums; }
  .radar-table .radar-window .chip-days { margin-left: var(--space-4); border-radius: 999px; font-size: 0.75rem; height: 22px; }
  .radar-table .radar-window .chip-days--urgent { background: var(--field); border-color: var(--field); color: var(--paper); }
  .radar-table .radar-window .chip-days--soon { color: var(--field-2); }
  .radar-table .badge { border-radius: 999px; font-weight: 500; }
  .radar-anchor { display: block; margin-top: 4px; color: var(--muted); font-size: 0.75rem; }

  /* ------------------------------------------- competitor watches, company */
  .watch-card { align-items: center; padding: var(--space-16) 0; border-top-color: var(--line-soft); }
  .watch-card strong { font-weight: 600; }
  .watch-meta { margin: 4px 0 0; line-height: 1.5; }
  .watch-meta .badge { border-radius: 999px; font-weight: 500; }
  .company-aliases { color: var(--muted); font-size: var(--text-sm); }

  /* --------------------------------------------- «Quién gana aquí» band */
  .tender-page .winners-band { border-color: var(--line); }
  .winners-band__list li::before {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--muted);
    font-variant-numeric: lining-nums tabular-nums;
  }
  .winners-band__name { font-weight: 600; }
  .winners-band .facts dd {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .winners-band .facts dd .t-muted {
    display: block;
    margin-top: 2px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    letter-spacing: 0;
    line-height: 1.45;
  }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 900px) {
  @layer pages {
    /* The row as a card: title and identifiers, the órgano a step down, the
       state, then plazo and importe on one ruled line. */
    .listing.table tr {
      grid-template-areas: "pick pick" "lead lead" "body body" "st amount" "dl amount" "act act";
      column-gap: 0;
      padding: 18px var(--gutter) var(--space-16);
      border-bottom: 1px solid var(--line-soft);
    }
    .listing.table tbody tr:last-child { border-bottom: 0; }
    /* The desktop cell padding above lives in `pages`, which outranks the
       card layout in `components`: give it back to the grid here. */
    .card--flush .listing.table td { padding: 0; }
    .listing .row-link { font-size: 1rem; line-height: 1.35; }
    .listing .row-sub { margin-top: 6px; }
    .listing .row-links { margin-top: 0; gap: 0 var(--space-16); }
    .listing .row-links a { min-height: 40px; }
    .card--flush .listing.table td.td-wide { padding-top: 0; font-size: 0.875rem; color: var(--muted); }
    .card--flush .listing.table td.td-status,
    .card--flush .listing.table td.td-amount {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--line-soft);
    }
    .card--flush .listing.table td.td-deadline { padding-top: var(--space-8); }
    .card--flush .listing.table td.td-amount {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding-left: var(--space-12);
      font-size: 1.35rem;
      line-height: 1.1;
    }
    .card--flush .listing.table td.td-action { padding-top: var(--space-12); }
    .listing .td-deadline .row-deadline { font-size: 0.8125rem; }
  }
}

@media (max-width: 640px) {
  @layer pages {
    .result-tools .scope-toggle { flex-wrap: nowrap; }
    .result-tools .scope-option { min-height: 38px; }
    .tender-page .dossier-title { font-size: 1.85rem; line-height: 1.1; }
    .tender-page .tender-keyfacts dd { font-size: 1.15rem; }
    .tender-page .tender-keyfacts .dossier-amount { font-size: 1.5rem; }
    .tender-page .tender-head .dossier-links a { min-height: 40px; padding: 0 var(--space-12); }
    .tender-page .assessment-head > .stamp--xl { font-size: 2.2rem; min-width: 0; width: 100%; }
    .tender-page .assessment-summary { font-size: 1.125rem; }
    .tender-page .req-item { padding: var(--space-16) 0; }
    .qv-title { font-size: 1.4rem; }
  }
}

/* ======================================================================
   app
   ====================================================================== */

/* «Expediente» — app. Owned by one refinement pass; loaded after expediente.css.
   Component restyles go in `@layer pages` (or `components`), never a new layer.

   The logged-in platform and admin: a calm working tool, denser than the
   marketing pages. Every rule here is scoped to `.app-body` (the session
   shell) or to a class only an app page renders, so a public page keeps what
   marketing.css and content.css give it.

   Ground. The desk is paper (`--paper`), the work is white: every card is a
   white sheet with a hairline, laid on warm paper. For a long session that
   is the calmer of the two — a white canvas puts the same #FFF behind the
   chrome, the gutters and the work, so nothing separates and the eye reads
   one glaring field; paper around white sheets gives the content its own
   edge without a shadow doing the work, and the warm ground sits closer to
   the printed pliego the product reads. The sidebar is one step deeper than
   the desk and quieter than the content: no white, no cards, ink-2 words,
   and the current section as the only sheet in it.

   Type. Instrument Sans for everything operated; Newsreader only for the
   page title, the big figures and the pliego's own words. JetBrains Mono
   stays for identifiers (expedientes, usernames, tokens), never for counts. */

@layer pages {
  /* ------------------------------------------------------------ the shell */
  .app-body {
    --side: color-mix(in srgb, var(--paper) 45%, var(--grey));
    --side-w: 248px;
    /* The ring is pine, not the old orange: orange was «Señal»'s brand
       signal and reads as an error next to the verdict colours. 3px with a
       2px gap reads on white, paper and the pine button alike. */
    --focus: var(--field-2);
    background: var(--paper);
  }
  .app-body :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .app-body :where(input, select, textarea):focus-visible {
    border-color: var(--field-2);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-2) 18%, transparent);
  }
  /* app.css draws app fields in `--line`, which is 1.2:1 against the paper
     desk: a white box on paper vanished. Fields keep the component kit's
     border (≥3:1 against white and paper) and the listing's filter form is a
     white sheet, like every other card in the app. */
  .app-body :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"],
                   [type="submit"], [type="button"], [type="hidden"]),
         select, textarea) {
    border-color: color-mix(in srgb, var(--line-strong) 70%, var(--line));
    background-color: var(--white);
  }
  .app-body .listing-filters.card { background: var(--white); }

  .appbar {
    background: var(--side);
    border-right: 1px solid var(--line);
  }
  .appbar-inner { padding: var(--space-16) var(--space-12) var(--space-12); gap: 1px; }
  .appbar-top { padding: 0 0 var(--space-16) var(--space-8); }
  .appbar-wordmark { font-size: 1.3rem; }
  .appbar-top .btn--icon { color: var(--ink-2); border-radius: var(--radius); }
  .appbar-top .btn--icon:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }

  /* The workspace pill: the company the screens are about. A white sheet,
     because it is the one control in the bar that says whose file this is. */
  .appbar-pill {
    height: 42px;
    padding: 0 var(--space-12) 0 var(--space-8);
    border-color: var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 1px rgba(22, 24, 20, 0.04);
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .appbar-pill:hover { border-color: var(--line-strong); }
  .appbar-pill-mark {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--field);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
  }
  .appbar-search {
    height: 36px;
    margin: var(--space-8) 0 var(--space-12);
    padding: 0 var(--space-12);
    background: color-mix(in srgb, var(--white) 55%, transparent);
    border-color: var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .appbar-search:hover { background: var(--white); border-color: var(--line-strong); color: var(--ink); }

  .appbar .nav-item {
    height: 34px;
    min-height: 34px;
    padding: 0 var(--space-12);
    border-radius: var(--radius);
    color: var(--ink-2);
    font-weight: 500;
  }
  .appbar .nav-item .nav-icon { width: 17px; height: 17px; color: var(--muted); }
  .appbar .nav-item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
  .appbar .nav-item[aria-current="page"] {
    background: var(--white);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(22, 24, 20, 0.05);
  }
  .appbar .nav-item[aria-current="page"] .nav-icon { color: var(--field); }
  .appbar-group {
    margin: var(--space-24) 0 var(--space-4);
    padding: 0 var(--space-12);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0;
  }
  .appbar-actions { padding-top: var(--space-16); border-top: 1px solid var(--line); margin-top: auto; }
  .appbar-account-button { height: 40px; padding: 0 var(--space-8); border-radius: var(--radius); }
  .appbar-account-button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
  .appbar-avatar { background: var(--ink); color: var(--paper); }

  /* The counts in the bar: a quiet tag, ink on the highlighter — the same
     yellow the product marks the one thing that matters with. Never a red
     dot: a count of tenders closing is a fact, not an alarm. */
  .app-body .nav-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--mark);
    color: var(--ink);
    font-weight: 600;
    line-height: 20px;
  }
  .app-body .nav-count--quiet { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); font-weight: 500; }
  .app-body .bell-count { top: -3px; right: -6px; min-width: 18px; line-height: 18px; padding: 0 5px; font-size: 11px; }
  .nav-item--admin { font-family: var(--font-sans); font-size: var(--text-sm); }

  /* The menus the bar opens: a white sheet on the float shadow. */
  .appbar-card {
    padding: var(--space-8);
    border-color: var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }
  .appbar-card-link { padding: 7px var(--space-12); border-radius: 6px; color: var(--ink-2); }
  .appbar-card-link:hover { background: var(--paper); color: var(--ink); }
  .appbar-card-link.is-active { color: var(--ink); }
  .appbar-card-user { color: var(--muted); }

  /* On a desktop the bar's menus open beside the sidebar, not inside it: the
     sidebar scrolls (`overflow-y: auto`), so a card positioned within it was
     clipped at its right edge — the bell's 360px list showed a 48px sliver.
     Fixed to the viewport, each opens level with the control that opened it.
     Without JavaScript the cards stay in flow (app.css `.no-js`). */
  @media (min-width: 901px) {
    html:not(.no-js) .appbar .appbar-card { position: fixed; left: calc(var(--side-w) + var(--space-8)); width: 280px; }
    html:not(.no-js) .appbar-bell-card { top: var(--space-12); width: 360px; }
    html:not(.no-js) .appbar-company .appbar-card { top: 64px; }
    html:not(.no-js) .appbar .appbar-card--up { top: auto; bottom: var(--space-12); }
  }
  /* The bell's list. */
  .bell-link { border-radius: 6px; }
  .bell-link:hover, .bell-link:focus-visible { background: var(--paper); }
  .bell-dot { background: var(--field); }
  .bell-head { color: var(--ink-2); }

  /* The page beside the bar: centred in what remains, a little narrower than
     before so a table line is still read in one movement at 1920. */
  .app-body .app-main {
    margin-left: var(--side-w);
    padding-top: var(--space-32);
    padding-inline: max(40px, calc((100vw - var(--side-w) - 1280px) / 2));
  }
  .app-body .appfoot {
    margin-top: var(--space-48);
    padding-top: var(--space-16);
    border-top-color: var(--line);
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.6;
  }
  .app-body .appfoot a { color: var(--ink-2); }

  /* ------------------------------------------------------------ page head */
  .app-body .app-head {
    align-items: flex-end;
    margin-bottom: var(--space-24);
    padding-bottom: var(--space-16);
    border-bottom: 1px solid var(--line);
  }
  .app-body .app-head h1 {
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 1.35rem + 0.7vw, 2.125rem);
    max-width: 46ch;
    font-weight: 500;
    font-optical-sizing: auto;
    line-height: 1.12;
    letter-spacing: -0.022em;
    color: var(--ink);
  }
  .app-body .app-head-sub { margin-top: var(--space-8); max-width: 72ch; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
  .app-body .sync-chip {
    height: 30px;
    border-radius: var(--radius);
    background: transparent;
    border-color: var(--line);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }
  .app-body a.sync-chip:hover { border-color: var(--line-strong); color: var(--ink); }

  /* ------------------------------------------------------------ surfaces
     A card is a white sheet: hairline, a 12px corner, the faintest lift.
     The corner is smaller than the landing's 18 because a working screen
     holds a dozen of them and a big radius repeated twelve times is a
     pattern of pills. */
  .app-body .card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(22, 24, 20, 0.04);
  }
  .app-body .card-head { margin-bottom: var(--space-12); }
  .app-body .card-head h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.008em; line-height: 1.3; }
  .app-body .card h3 { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.005em; }
  .app-body .card-note { color: var(--muted); line-height: 1.5; }
  .app-body .card-link { color: var(--ink); font-weight: 600; }
  .app-body .card-foot-hint { border-top-color: var(--line); }
  /* The feedback box inside a card: the app's own corner, not a capsule. */
  .app-body .notice, .app-body .flash, .app-body .sysbar { border-radius: var(--radius); }
  .app-body .notice { border-width: 1px; }
  .app-body .notice:not(.notice--warning):not(.notice--error) { border-color: var(--line); background: var(--paper); color: var(--ink-2); }

  /* The banner: a fact about this account (the demo company, a read-only
     seat). A white sheet with the pine rule; a warning on the
     highlighter's pale. */
  .app-body .banner {
    gap: var(--space-4);
    padding: var(--space-16) var(--space-24);
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--field);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(22, 24, 20, 0.04);
  }
  .app-body .banner--warn { background: color-mix(in srgb, var(--mark-soft) 55%, var(--white)); border-left-color: var(--review); }
  .app-body .banner--alert { border-left-color: var(--nogo); }
  .app-body .banner-title { font-size: var(--text-md); font-weight: 600; }
  .app-body .banner-body { color: var(--ink-2); line-height: 1.55; }

  /* ------------------------------------------------------------ figures
     The KPI strip: the figure is the sign, in the serif, lining and tabular.
     The cell that needs the person carries the highlighter under its figure
     instead of a coloured bar on top. */
  .app-body .summary {
    border-color: var(--line);
    border-radius: var(--radius-md);
    background: var(--line);
    box-shadow: 0 1px 2px rgba(22, 24, 20, 0.04);
  }
  .app-body .summary-cell { gap: 2px; padding: var(--space-16) var(--space-24) var(--space-16); }
  .app-body .summary-cell.is-hot { border-top: 0; padding-top: var(--space-16); }
  .app-body a.summary-cell { transition: background-color var(--dur-fast) var(--ease-out); }
  .app-body a.summary-cell:hover { background: color-mix(in srgb, var(--paper) 60%, var(--white)); }
  .app-body .summary-label { order: 0; color: var(--ink-2); font-size: var(--text-sm); }
  .app-body .summary-value {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 500;
    font-optical-sizing: auto;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  .app-body .summary-cell.is-hot .summary-value { align-self: flex-start; }
  .app-body .summary-cell.is-hot .summary-value {
    background: linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 90%, transparent 90%);
    padding: 0 0.08em;
    margin-left: -0.08em;
  }
  .app-body .summary-value--money { font-size: 1.75rem; }
  /* «Sin muestra»: a missing figure is said, not drawn as a figure. */
  .app-body .summary-value--empty {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--muted);
  }
  .app-body .summary-hint { color: var(--muted); line-height: 1.45; }
  .app-body .summary--inset { box-shadow: none; }

  /* Counts and money in a table read as figures, not as identifiers. */
  .app-body :is(td, th).t-mono:not(:has(a, code)) { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
  .app-body td.num, .app-body td.t-right { font-variant-numeric: tabular-nums; }

  /* ------------------------------------------------------------ the panel */
  @media (min-width: 1101px) { .dash-grid { grid-template-columns: minmax(0, 1fr) 336px; } }
  .dash-rail .card { padding: var(--space-16) var(--space-24); }
  .dash-rail .card-head h2 { font-size: var(--text-md); }
  .app-body .card-tabs { margin-bottom: var(--space-12); border-bottom-color: var(--line); background: transparent; }
  .app-body .record-tab-count.is-hot { background: var(--ink); color: var(--paper); }
  .app-body .wl-group-head { border-bottom-color: var(--line); }
  .app-body .wl-title { color: var(--ink); }
  .app-body .wl-title:hover { color: var(--field-2); }
  .stage-row a { padding: 6px var(--space-8); border-radius: var(--radius); }
  .stage-row a:hover { background: var(--paper); }
  .stage-bar { height: 3px; }
  .todo-mark { border-color: var(--line-strong); }
  .todo-item.is-done .todo-mark { background: var(--go); border-color: var(--go); color: var(--white); }
  .todo-item.is-next .todo-mark { border-color: var(--field); box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 9px var(--mark); }
  .todo-title a:hover { color: var(--field-2); }
  .dash-steps .progress { height: 4px; }
  .app-body .pipeline-help > summary { color: var(--ink); }

  /* ------------------------------------------------------------ the funnel
     Lanes are a shade of the desk, not a grey slab: the cards are what is
     read. A card is a white index card with a hairline; picked up, it takes
     the float shadow. */
  .app-body .board { gap: var(--space-12); grid-auto-columns: minmax(268px, 1fr); }
  .app-body .board-col {
    padding: var(--space-8);
    background: color-mix(in srgb, var(--grey) 55%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: var(--radius-md);
  }
  .app-body .board-col-head { padding: var(--space-4) var(--space-4) 0; }
  .app-body .board-col-hint, .app-body .board-col-value { color: var(--muted); line-height: 1.45; }
  .app-body .board-card {
    gap: 6px;
    padding: var(--space-12);
    border: 0;
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(22, 24, 20, 0.05);
    transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .app-body .board-card:hover { box-shadow: 0 0 0 1px var(--line-strong), 0 6px 16px -8px rgba(22, 24, 20, 0.22); }
  .app-body .board-card.is-dragging { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md); }
  .app-body .board-card .wl-title { font-weight: 600; line-height: 1.35; }
  .app-body .board-card .wl-amount { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .app-body .board-cards.is-drop-target { outline: 2px dashed var(--field-2); outline-offset: 3px; border-radius: var(--radius); }
  .app-body .board-empty {
    padding: var(--space-24) var(--space-8);
    border: 1px dashed color-mix(in srgb, var(--line-strong) 55%, transparent);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: var(--text-xs);
  }
  .app-body .board-archive summary { color: var(--ink-2); }
  .app-body .board-count { color: var(--muted); }
  /* The filter strip is chrome around the board, so it sits on the desk. */
  .app-body .filter-bar {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: none;
  }
  .app-body .board-pills .check-pill:has(input:checked) { background: var(--paper); color: var(--ink); }

  /* ------------------------------------------------------------ /perfil */
  .app-body .profile-tabs { margin-bottom: var(--space-12); border-bottom-color: var(--line); }
  .app-body .profile-tab { color: var(--muted); font-weight: 500; }
  .app-body a.profile-tab:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
  .app-body .profile-tab.is-current,
  .app-body a.profile-tab.is-current:hover { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
  .app-body .profile-tabs-blurb { color: var(--muted); }
  .company-switch a { border-width: 1px; border-radius: var(--radius); background: var(--white); }
  .company-switch a:hover { border-color: var(--line-strong); }
  .company-switch a[aria-current="page"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .app-body .card-section { border-top-color: var(--line); }
  .app-body .pref { border-bottom-color: var(--line); }
  .app-body .pref-label { font-size: var(--text-sm); font-weight: 600; }
  .app-body .connector { border-top-color: var(--line); }
  .app-body .connector h3 { font-size: var(--text-md); }

  /* ------------------------------------------------------------ dossier */
  .ready-line {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.018em;
    line-height: 1.2;
  }
  .app-body .missing li { border-top-color: var(--line); }
  .missing-more > summary { color: var(--ink); }
  .check-evidence a { color: var(--ink); }
  #deuc > p:has(> .btn) { display: flex; flex-wrap: wrap; gap: var(--space-8); }
  .mark-note { font-family: var(--font-display); font-size: 1rem; font-style: normal; color: var(--ink-2); }

  /* ------------------------------------------------------------ drafts
     A draft is a document to be read: on its own page it is set like one —
     the serif, a measure that fits a line in one movement, and no inner
     scroll box (a page whose point is reading must not nest a second
     scrollbar inside itself). On the tender page the same block keeps its
     scroll box, because there it is one section among nine. */
  .draft-cover .assessment-meta {
    margin: 0 0 var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
  }
  .app-body .draft-cover h3 {
    margin: 0 0 var(--space-16);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.016em;
    max-width: 48ch;
  }
  .draft-cover .dossier-meta { border-top: 1px solid var(--ink); }
  .draft-cover .dossier-meta dt { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
  .draft-cover .dossier-meta dd { font-size: var(--text-sm); }
  .draft-checks-aside {
    border-left-color: var(--review);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: color-mix(in srgb, var(--mark-soft) 45%, var(--white));
  }
  .draft-checks-aside h4 { font-size: var(--text-sm); font-weight: 600; margin: 0 0 var(--space-4); }
  .draft-pane { border-top-color: var(--line); }
  .draft-pane > summary { padding: var(--space-8) 0; }
  .draft-rendered { border-color: var(--line); border-radius: var(--radius); background: var(--white); }
  .draft-mark { background: var(--mark-soft); }
  .draft-reader .draft-rendered {
    max-height: none;
    overflow: visible;
    padding: var(--space-24) 0 var(--space-8);
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ink);
  }
  .draft-reader .draft-rendered > * { max-width: 68ch; }
  .draft-reader .draft-rendered :is(h1, h2, h3, h4) {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.25;
    border-top: 0;
  }
  .draft-reader .draft-rendered h1 { font-size: 1.75rem; }
  .draft-reader .draft-rendered h2 { font-size: 1.4rem; margin: var(--space-32) 0 var(--space-12); padding-top: 0; }
  .draft-reader .draft-rendered h3 { font-size: 1.2rem; }
  .draft-reader .draft-rendered :is(li, p) { margin-bottom: var(--space-8); }
  .draft-reader .draft-rendered strong { font-weight: 600; }
  .draft-reader .draft-rendered :is(table, code) { font-family: var(--font-sans); font-size: var(--text-sm); }
  .draft-reader + .ai-disclaimer { margin-top: var(--space-24); color: var(--muted); font-size: var(--text-xs); text-align: left; }

  /* The editor: a long text worked on for an hour, so a reading line height
     and room around the words, not a form field's 36px rhythm. */
  .app-body #ed-texto { min-height: 60vh; padding: var(--space-16) var(--space-24); font-size: 0.9375rem; line-height: 1.7; }

  /* ------------------------------------------------------------ billing */
  .app-body .billing-actions { border-top-color: var(--line); }
  .app-body .billing-actions h3 { font-size: var(--text-md); }

  /* ------------------------------------------------------------ avisos */
  .app-body .notify-item { border-bottom-color: var(--line); }
  .app-body .notify-item.is-unread .notify-title::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 8px 1px 0;
    border-radius: 50%;
    background: var(--field);
    vertical-align: middle;
  }

  /* ------------------------------------------------------------ admin */
  .app-body .msg-body { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
  .app-body .msg--written { border-width: 1px; border-color: var(--ink); border-radius: var(--radius); }
  .app-body .msg-count { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
  .app-body .subnav { margin-bottom: var(--space-16); }
  /* The outreach counters: hairlines drawn by the cells, so a last row that
     is not full ends in white instead of a grey slab of gap. */
  .app-body .track-steps { gap: 0; background: none; border: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 0; }
  .app-body .track-step { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .app-body .track-step a:hover { background: var(--paper); }
  .app-body .track-step-count { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; }

  /* ------------------------------------------------------------ onboarding
     The bare column on the desk: a white sheet on paper, the four steps as
     a quiet ladder with the current one in ink. */
  .bare:has(.onb) { background: var(--paper); }
  .bare:has(.onb) .bare-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border-color: var(--line); }
  .onb h1 {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: -0.022em;
  }
  .onb-progress li {
    width: auto;
    min-width: 28px;
    height: 6px;
    flex: 1;
    border: 0;
    border-radius: 3px;
    background: var(--line);
    color: transparent;
    font-size: 0;
  }
  .onb-progress li.is-done { background: var(--field-2); }
  .onb-progress li.is-active { background: var(--ink); }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 900px) {
  @layer pages {
    .app-body .app-main { margin-left: 0; padding-top: var(--space-24); padding-inline: 20px; }
    .appbar { background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-right: 0; border-bottom: 1px solid var(--line); }
    .appbar-inner { padding: 0 var(--space-16); }
    .appbar-top { padding: 0; }
    .app-body .drawer { background: var(--paper); }
  }
}
@media (max-width: 640px) {
  @layer pages {
    .app-body .app-main { padding-inline: 16px; }
    .app-body .app-head { align-items: flex-start; }
    .app-body .summary-cell { padding: var(--space-12) var(--space-16); }
    .app-body .summary-value { font-size: 1.85rem; }
    .app-body .summary-value--money { font-size: 1.4rem; }
    .app-body .summary-value--empty { font-size: var(--text-sm); }
    .app-body .banner { padding: var(--space-16); }
    /* The deadline pills wrap and share the width: three in a row ran 240px
       off a 390px screen. */
    .app-body .board-pills { flex-wrap: wrap; }
    .app-body .board-pills .check-pill { flex: 1 1 auto; min-width: 0; white-space: normal; }
    .app-body .board-filters .board-urgency { flex: 1 1 100%; min-width: 0; }
    /* Six sections do not fit 390px: scrolled sideways, the current one was
       often off screen. Two rows keep every section, and the one open, in view. */
    .app-body .profile-tabs { flex-wrap: wrap; overflow: visible; }
    .app-body .profile-tab { padding-inline: var(--space-12); }
    .ready-line { font-size: 1.35rem; }
    /* The envelope download names its envelope in full, which is wider than
       a phone: it wraps inside the button instead of running off screen. */
    .app-body a.btn[href*="/sobres/"] { height: auto; min-height: 40px; padding-block: var(--space-8); white-space: normal; text-align: left; }
    .draft-reader .draft-rendered { font-size: 1.0625rem; }
  }
}

/* ======================================================================
   motion
   ====================================================================== */

/* «Expediente» — motion. Owned by one refinement pass; loaded after expediente.css.
   Component restyles go in `@layer pages` (or `components`), never a new layer.

   Two registers, one vocabulary:

   - The public site *tells*: a page's head rises into place on load, its
     bands are revealed once as they are reached, a figure counts to the value
     the server printed, a citation is underlined. Rise 12–28px plus fade on
     `--spring-soft`, a 40–90ms stagger inside a group, capped.
   - The app *answers*: menus, sheets, dialogs, tabs, notices and the funnel
     board give feedback on what was just done, in 250ms or less, on
     `--ease-out`, never revealing on scroll and never holding input.

   Only `opacity` and `transform` move (the one exception is a <details>
   opening to its height, which the platform interpolates for us and which
   costs one small layout per frame for 200ms). Every hidden state is opt-in
   from script (`html.mo`, `.is-collapsible`, `html:not(.no-js)`), so with
   JavaScript off or failed everything is where it rests, and the base
   layer's reduced-motion floor in app.css (`!important`, so it wins from the
   earliest layer) takes every transition to zero. */

/* ------------------------------------------------------------------------
   Cross-document view transitions: a fast root crossfade between pages of
   this origin, with the bar held still so the page underneath appears to
   change in place. Nothing waits on it (the new document renders as soon as
   it would have anyway), and a reader who asked for less motion gets a plain
   navigation. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

@layer pages {
  .topnav { view-transition-name: licia-topbar; }
  .appbar { view-transition-name: licia-appbar; }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: var(--ease-out);
  }
  ::view-transition-group(licia-topbar),
  ::view-transition-group(licia-appbar),
  ::view-transition-new(licia-topbar),
  ::view-transition-new(licia-appbar) { animation: none; }
  ::view-transition-old(licia-topbar),
  ::view-transition-old(licia-appbar) { display: none; }

  /* ----------------------------------------------------------------------
     Menus and popovers (app.js toggles `hidden` and then `.is-open` one frame
     later, and hides again 200ms after `.is-open` goes). Scale from the
     corner the card hangs from; out faster than in, and done well inside
     the 200ms before `hidden` lands. Without scripting `.no-js` keeps the
     cards open and in flow, so the hidden state is scoped away from it. */
  html:not(.no-js) :is(.appbar-card, .lang-menu)[data-menu] {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
    transform-origin: top left;
    transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
  }
  html:not(.no-js) :is(.appbar-card, .lang-menu)[data-menu].is-open {
    opacity: 1;
    transform: none;
    transition: opacity 150ms var(--ease-out), transform 200ms var(--ease-out);
  }
  html:not(.no-js) .lang-menu[data-menu] { transform-origin: top right; }
  html:not(.no-js) .appbar-card--up[data-menu] { transform: translateY(4px) scale(0.97); transform-origin: bottom left; }
  html:not(.no-js) .appbar-card--up[data-menu].is-open { transform: none; }
  @media (max-width: 900px) {
    html:not(.no-js) .appbar-bell-card[data-menu] { transform-origin: top right; }
  }

  /* The mega menu drops from the bar: in on the snappy spring, out quick. */
  .mega { transition: opacity 120ms var(--ease-out), transform 140ms var(--ease-out); }
  .mega.is-open { transition: opacity 180ms var(--ease-out), transform var(--spring-snappy-dur) var(--spring-snappy); }
  /* `transform: none` restated for the open and the no-script panel: the
     resting offset in expediente.css sits in a later layer than app.css's
     own states, so the panel stayed 8px up and 0.5% small. */
  .mega.is-open, .no-js .mega { transform: none; }

  /* ----------------------------------------------------------------------
     Dialogs: the quick view is a sheet from the right edge, so it slides in
     from that edge; the video is centred, so it scales up from 0.96. Both
     leave faster than they arrive. `display`/`overlay` are discrete so the
     exit plays before the top layer lets go; a browser without them simply
     closes at once. */
  .qv-dialog, .video-dialog {
    opacity: 0;
    transition: opacity 140ms var(--ease-out), transform 160ms var(--ease-out),
                overlay 160ms allow-discrete, display 160ms allow-discrete;
  }
  .qv-dialog { transform: translateX(16px); }
  .video-dialog { transform: scale(0.98); }
  .qv-dialog[open], .video-dialog[open] {
    opacity: 1;
    transform: none;
    transition: opacity 180ms var(--ease-out), transform 240ms var(--ease-out),
                overlay 240ms allow-discrete, display 240ms allow-discrete;
  }
  @starting-style {
    .qv-dialog[open] { opacity: 0; transform: translateX(32px); }
    .video-dialog[open] { opacity: 0; transform: scale(0.96); }
  }
  .qv-dialog::backdrop, .video-dialog::backdrop {
    opacity: 0;
    transition: opacity 160ms var(--ease-out), overlay 160ms allow-discrete, display 160ms allow-discrete;
  }
  .qv-dialog[open]::backdrop, .video-dialog[open]::backdrop { opacity: 1; }
  @starting-style {
    .qv-dialog[open]::backdrop, .video-dialog[open]::backdrop { opacity: 0; }
  }

  /* ----------------------------------------------------------------------
     Notices. A flash arrives with the page (or, on the funnel board, when
     board.js unhides it) and settles 6px down into place; its close button
     fades it out from expediente.js before it is removed. */
  .flash {
    transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
  }
  @starting-style {
    .flash { opacity: 0; transform: translateY(-6px); }
  }

  /* The busy overlay: an answer that comes back at once never flashes it,
     and one that does not fades it in with the card settling. */
  .busy-overlay { transition: opacity 180ms var(--ease-out) 120ms; }
  .busy-overlay .busy-card { transition: transform 220ms var(--ease-out) 120ms; }
  @starting-style {
    .busy-overlay { opacity: 0; }
    .busy-overlay .busy-card { transform: scale(0.96); }
  }

  /* ----------------------------------------------------------------------
     The phone drawer: a sheet under the bar, so it drops 8px into place; its
     rows follow 30ms apart on the way in and simply go with the sheet on the
     way out (held until the sheet has faded, so nothing empties first). */
  @media (max-width: 900px) {
    .is-collapsible + .drawer {
      transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out),
                  visibility 0s linear 150ms;
    }
    .is-collapsible.is-open + .drawer {
      transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s;
    }
    .is-collapsible + .drawer :is(.drawer-nav > *, .drawer-langs, .drawer-actions) {
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0s linear 150ms, transform 0s linear 150ms;
    }
    .is-collapsible.is-open + .drawer :is(.drawer-nav > *, .drawer-langs, .drawer-actions) {
      opacity: 1;
      transform: none;
      transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out);
      transition-delay: calc(var(--mo-i, 0) * 30ms + 40ms);
    }
    .drawer-nav > :nth-child(2) { --mo-i: 1; }
    .drawer-nav > :nth-child(3) { --mo-i: 2; }
    .drawer-nav > :nth-child(4) { --mo-i: 3; }
    .drawer-nav > :nth-child(n + 5) { --mo-i: 4; }
    .drawer-langs { --mo-i: 5; }
    .drawer-actions { --mo-i: 6; }
  }

  /* ----------------------------------------------------------------------
     Tabs: one ink bar that slides to the chosen tab (expediente.js places
     it). The tab's own underline stands down only once the ink exists. */
  .card-tabs.has-ink { position: relative; }
  .record-tabs.has-ink .record-tab[aria-selected="true"] { border-bottom-color: transparent; }
  .mo-tab-ink {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 2px;
    background: var(--ink);
    opacity: 0;
    transform-origin: 0 0;
    pointer-events: none;
  }
  .record-tabs.ink-ready .mo-tab-ink { transition: transform 220ms var(--ease-out), opacity 120ms var(--ease-out); }

  /* ----------------------------------------------------------------------
     Disclosures open to their height and close the same way, where the
     browser can interpolate `auto` (elsewhere they open at once, as before). */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    :is(.faq-item, .citations, .cite-context, .disclosure, .drawer-group, .filter-panel,
        .listing-more, .wl-more, .doc-toc-fold, .post-toc-inline, .billing-request, .plan-buy)::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size 200ms var(--ease-out), content-visibility 200ms allow-discrete;
    }
    :is(.faq-item, .citations, .cite-context, .disclosure, .drawer-group, .filter-panel,
        .listing-more, .wl-more, .doc-toc-fold, .post-toc-inline, .billing-request, .plan-buy)[open]::details-content {
      block-size: auto;
    }
  }

  /* ----------------------------------------------------------------------
     The funnel board (board.js sets the classes): a picked-up card tilts on
     the snappy spring and drops back level; a card being saved dims. */
  .app-body .board-card {
    transition: box-shadow var(--dur-fast) var(--ease-out), opacity 150ms var(--ease-out),
                transform var(--spring-snappy-dur) var(--spring-snappy);
  }
  .app-body .board-card.is-dragging { transition-duration: var(--dur-fast), 120ms, 200ms; }

  /* Hover lifts only where there is a pointer that hovers: on a touch screen
     `:hover` sticks after a tap and leaves the card floating. */
  @media (hover: none) {
    .plan-link:hover, .analysis-chips .chip:hover { transform: none; }
  }
}

/* ------------------------------------------------------------------------
   The public site's reveals, beside the landing's in expediente.css (same
   layer, same `html.mo` contract). A page's head is hidden before the first
   paint so it never shows and then vanishes to animate in; the script marks
   exactly the same children and reveals them. The breadcrumbs are
   navigation and stay put. */
@layer utilities {
  .mo .public-body .page-hero > .container > :not(.breadcrumbs):not([data-mo]),
  .mo .public-body .doc-head > :not([data-mo]),
  .mo .public-body .sector-hero > :not([data-mo]) { opacity: 0; }
  .mo [data-mo="soft"] { transform: translateY(14px); }
  .mo [data-mo="frame"] { transform: translateY(24px) scale(0.985); }
  .mo [data-mo="stamp"] { transform: scale(0.9); }
  .mo [data-mo="row"] { transform: translateY(6px); }

  /* The tender page's verdict echo is the app's: short and crisp. */
  .mo [data-mo="stamp"].is-in, .mo [data-mo="row"].is-in {
    transition: opacity 180ms var(--ease-out), transform 260ms var(--ease-out);
    transition-delay: var(--mo-delay, 0ms);
  }

  /* An input during a reveal, or printing, finishes it at once. */
  .mo.mo-skip [data-mo].is-in, .mo.mo-skip .mo-word.is-in, .mo.mo-skip .mo-ink.is-in,
  .mo .mo-skip [data-mo].is-in, .mo .mo-skip .mo-word.is-in, .mo .mo-skip .mo-ink.is-in {
    transition-duration: 0s;
    transition-delay: 0s;
  }

  /* The highlighter. Drawn at rest for a reader with reduced motion or a
     page whose script never claimed it; under `html.mo` it is drawn from
     zero when reached. It sits on an inline span (expediente.js wraps the
     passage), so its strip runs through the lines in reading order. */
  .mo-ink {
    background-image: linear-gradient(transparent 58%, color-mix(in srgb, var(--mark) 85%, transparent) 58%, color-mix(in srgb, var(--mark) 85%, transparent) 92%, transparent 92%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .mo .mo-ink { background-size: 0% 100%; }
  .mo .mo-ink.is-in {
    background-size: 100% 100%;
    transition: background-size var(--mo-ink-dur, 1100ms) var(--ease-out);
    transition-delay: var(--mo-delay, 0ms);
  }
}