/* Escolhas IFE: one accent (deep green), system sans with tabular figures everywhere (no web fonts: the CSP allows none), cool neutrals.
   Mobile first: everything is designed at 360-390 px and widened from 760 px up. */

:root {
  --bg: #f5f6f4;
  --surface: #ffffff;
  --surface-2: #eef1ee;
  --ink: #0f1513;
  --ink-2: #3c4642;
  --ink-3: #66716c;
  --line: #d9dfdb;
  --line-2: #c3cbc6;
  --accent: #0a6b4d;
  --accent-hover: #075a40;
  --accent-ink: #ffffff;
  --accent-soft: #c9e6da;
  --accent-tint: #e5f2ec;
  --accent-strong: #04442f;
  --band: #4c9f80;          /* the 8-in-10 closing range: at least 3:1 against the surface (3,2:1 on white) */
  --field-line: #8a958f;    /* borders of inputs and selects: at least 3:1 against the surface */
  --track: #e3e8e4;
  --you: #0f1513;
  --b: #3c4642;            /* compared number: dashed ink marker (keeps one accent) */
  --danger: #a3271f;
  --shadow: 0 1px 2px rgba(15, 21, 19, .06), 0 4px 16px rgba(15, 21, 19, .05);
  --r: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bar-h: 0px;
  --chart-w: clamp(240px, 36vw, 460px); /* one chart column width for the axis, the specialties and the institutions */
  --gut: 62px;                          /* right gutter on every row (the star slot) so all charts end at the same x */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 140px; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-x: hidden;
}
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(28px, 6.4vw, 44px); font-weight: 750; }
h2 { font-size: 21px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 650; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
code { font-size: .92em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 10px 14px; z-index: 50; border-radius: 8px; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 760px) { .wrap { padding-inline: 28px; } }

/* ---------------------------------------------------------------- top bar */
.topbar { background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: clip; }
.topbar-in { max-width: 1120px; margin: 0 auto; padding: 0 16px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 760px) { .topbar-in { padding: 0 28px; } }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: 44px; min-width: 44px; }
@media (hover: hover) { .brand:hover { color: var(--ink); } }
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand-mark rect { fill: var(--accent); }
.brand-mark path { stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.brand-name { font-size: 16px; font-weight: 500; white-space: nowrap; }
.brand-name b { font-weight: 750; }
.nav { display: flex; gap: 2px; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; padding: 0 10px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; white-space: nowrap; }
@media (hover: hover) { .nav a:hover { background: var(--surface-2); color: var(--ink); } }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2.5px 0 var(--accent); border-radius: 0; }
/* phones (up to 760 px): the four links give way to one «Menu» button and a full-width sheet (common.js setupMenu) */
.menu-btn {
  display: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 10px; min-height: 44px; min-width: 44px; padding: 0 14px 0 12px;
  align-items: center; gap: 8px; cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.menu-btn[aria-expanded="true"] { background: var(--surface-2); }
@media (max-width: 760px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
}
.msheet-back { position: fixed; inset: 0; z-index: 80; background: rgba(15, 21, 19, .32); }
.msheet {
  position: fixed; left: 0; right: 0; top: 0; z-index: 81; background: var(--surface); border-bottom: 1px solid var(--line);
  border-radius: 0 0 16px 16px; box-shadow: 0 12px 32px rgba(15, 21, 19, .18); max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
}
.msheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); }
.msheet-t { font-size: 16px; font-weight: 700; color: var(--ink-2); }
.msheet-x { width: 44px; height: 44px; margin-right: -6px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.msheet-list { list-style: none; margin: 0; padding: 8px 0 0; display: grid; gap: 4px; }
.msheet-list a { display: flex; flex-direction: column; gap: 2px; min-height: 64px; justify-content: center; padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.msheet-list a b { font-size: 18px; font-weight: 700; }
.msheet-list a span { font-size: 16px; color: var(--ink-2); line-height: 1.35; }
.msheet-list a[aria-current="page"] { background: var(--accent-tint); box-shadow: inset 4px 0 0 var(--accent); }
@media (hover: hover) { .msheet-list a:hover { background: var(--surface-2); } .msheet-x:hover { background: var(--surface-2); } }
@media (min-width: 761px) { .msheet, .msheet-back { display: none !important; } }

/* ---------------------------------------------------------------- generic */
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.lede { font-size: 17px; color: var(--ink-2); max-width: 70ch; margin-top: 12px; }
.small { font-size: 14px; color: var(--ink-3); }
.loading { padding: 28px 16px; color: var(--ink-3); }
.btn {
  font: inherit; font-size: 15px; font-weight: 550; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 10px; min-height: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
@media (hover: hover) { .btn:hover { border-color: var(--ink-3); color: var(--ink); } }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (hover: hover) { .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); } }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
@media (hover: hover) { .btn.ghost:hover { background: var(--accent-tint); } }
.btn.small { font-size: 14px; padding: 0 10px; }
.btn[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-strong); }
.btn[disabled] { opacity: .55; cursor: default; }

.fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fld > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fld > span i { font-style: normal; font-weight: 400; color: var(--ink-3); }
input[type="text"], input[type="search"], input:not([type]), select, textarea {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--field-line);
  border-radius: 10px; min-height: 44px; padding: 8px 12px; width: 100%; min-width: 0;
}
select {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
textarea { resize: vertical; min-height: 110px; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.tscroll {
  overflow-x: auto; margin: 12px 0 8px; -webkit-overflow-scrolling: touch;
  /* scroll shadows: a soft edge shows that there are more columns to the side */
  --tbg: var(--bg);
  background:
    linear-gradient(to right, var(--tbg) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--tbg) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), transparent) right center / 12px 100% no-repeat scroll;
}
.watch .tscroll { --tbg: var(--surface); }
.nw { white-space: nowrap; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; font-weight: 600; color: var(--ink-3); vertical-align: bottom; }
td.r, th.r { text-align: right; white-space: nowrap; }
th.r { white-space: normal; min-width: 90px; }
td:first-child { min-width: 110px; }
.prose .tscroll { max-width: 960px; }
td.r { font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- index: intro and catches */
.page-index { display: flex; flex-direction: column; gap: 20px; padding-top: 28px; padding-bottom: 40px; }
.intro .lede { margin-top: 10px; }
.lede-sub { font-size: 14px; color: var(--ink-3); margin-top: 6px; }
.catches { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 16px 16px 18px; }
.catches-head { font-size: 18px; margin: -6px 0; }
.catches-tg { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; cursor: pointer; font-weight: 700; }
.catches-tg:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.catches-tg .car { margin-top: 0; }
.ps-n { font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.catches.collapsed { padding-bottom: 16px; }
.catches.collapsed .catches-body { display: none; }
.catch-list { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: c; display: grid; gap: 10px; }
.catch-list li { counter-increment: c; position: relative; padding-left: 34px; color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }
.catch-list li::before { content: counter(c); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 6px; background: var(--accent-tint); color: var(--accent-strong); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.catch-list b { color: var(--ink); font-weight: 650; }
.catch-sub { margin-top: 6px; font-size: 14.5px; color: var(--ink-3); }
.catches .more { margin-top: 10px; font-size: 15px; font-weight: 550; padding-left: 34px; }
.catches .more a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) { .catch-list { grid-template-columns: 1fr 1fr; column-gap: 32px; } }

/* ---------------------------------------------------------------- sticky number bar */
.controls {
  position: sticky; top: 0; z-index: 20; margin-inline: -16px; padding: 10px 16px 11px;
  background: var(--bg);
}
/* the background and the shadow are layers of their own (app.js adds them): the bar's change of state
   moves them with transform and opacity only, never the layout of the page */
.controls:has(> .bar-bg) { background: none; }
.bar-bg { position: absolute; inset: 0; z-index: -1; background: var(--bg); pointer-events: none; }
.bar-shadow { position: absolute; inset: 0; border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(15, 21, 19, .06); opacity: 0; }
.controls.stuck .bar-shadow { opacity: 1; }
/* one change of state, 200 ms ease-out, on transform and opacity only; app.js turns it on after the first
   paint (never on load or after a jump) and never with reduced motion */
.controls.bar-anim, .controls.bar-anim .bar-bg, .controls.bar-anim .slidefield { transition: transform 200ms cubic-bezier(.2, .7, .2, 1); }
.controls.bar-anim .bar-shadow { transition: opacity 200ms cubic-bezier(.2, .7, .2, 1); }
.controls.bar-moving, .controls.bar-moving .bar-bg { will-change: transform; }
/* two 1 px marks under the bar's place in the page (app.js): it sticks past the lower, unsticks above the upper */
.bar-host { position: relative; }
.bar-sentinel { position: absolute; left: 0; top: 100%; width: 1px; height: 0; pointer-events: none; }
.bar-sentinel i { position: absolute; left: 0; width: 1px; height: 1px; }
.bar-sentinel .s-off { top: 28px; }
.bar-sentinel .s-on { top: 84px; }
@media (min-width: 760px) { .controls { margin-inline: -28px; padding: 12px 28px 13px; } }
.numrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
.numfield { display: flex; flex-direction: column; gap: 3px; }
.lab { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.numbox { display: flex; align-items: stretch; background: var(--surface); border: 1.5px solid var(--ink); border-radius: 12px; overflow: hidden; height: 52px; }
.numbox:has(input:focus) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* the site's standard focus ring on the number boxes too (the soft halo alone is about 1.2:1) */
.numbox:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.numbox input { border: 0; border-radius: 0; box-shadow: none !important; min-height: 0; height: 100%; width: 104px; text-align: center; font-size: 26px; font-weight: 700; font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; padding: 0 4px; background: transparent; }
.numbox input::placeholder { font-size: 17px; font-weight: 500; letter-spacing: 0; }
.numbox input[aria-invalid="true"] { color: var(--danger); }
.numbox.b { border-style: dashed; border-color: var(--b); }
.numbox.b input { width: 92px; font-size: 22px; color: var(--ink); }
.step { font: inherit; font-size: 22px; line-height: 1; width: 44px; border: 0; background: var(--surface-2); color: var(--ink); cursor: pointer; flex: none; }
@media (hover: hover) { .step:hover { background: var(--line); } }
.step:focus-visible { outline-offset: -3px; border-radius: 9px; background: var(--accent-tint); }
.step.x { font-size: 20px; color: var(--ink-3); background: transparent; }
.slidefield { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; }
.hint { font-size: 13px; color: var(--ink-3); min-height: 18px; }
.hint.warn { color: var(--danger); }
.hint.note { color: var(--ink-2); }
.hint.note:not(:empty)::before { content: "ⓘ "; color: var(--ink-3); }
/* the slider: a thin track in a 44 px hit area; with no number yet, the thumb is a hollow placeholder */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--track); border: 1px solid var(--line-2); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--track); border: 1px solid var(--line-2); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4.5px var(--accent); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4.5px var(--accent); }
input[type="range"].unset::-webkit-slider-thumb { background: var(--surface); box-shadow: 0 0 0 1.5px var(--ink-3); opacity: .7; }
input[type="range"].unset::-moz-range-thumb { background: var(--surface); box-shadow: 0 0 0 1.5px var(--ink-3); opacity: .7; }
.numtools { display: flex; gap: 8px; align-items: flex-end; padding-bottom: 4px; }
.numtools .btn.small { min-height: 44px; }
.chip { font-weight: 650; color: var(--accent-strong); border-color: var(--accent); background: var(--accent-tint); }
/* with nothing saved the chip keeps its place on wide screens (the slider does not jump when it appears) */
.chip.off { visibility: hidden; }
@media (max-width: 759px) { .chip.off { display: none; } }
@media (max-width: 599px) { .chip .wide { display: none; } }
@media (max-width: 479px) { #btn-compare .xl { display: none; } }
@media (max-width: 759px) {
  .numrow { gap: 6px 10px; }
  .numfield.cmp .lab, .numfield .lab { font-size: 12px; }
  .numbox { height: 48px; }
  .numbox input { width: 84px; font-size: 23px; }
  .numbox.b input { width: 72px; font-size: 20px; }
  .slidefield { flex-basis: 100%; }
  .hint { min-height: 0; }
  .numtools { padding-bottom: 2px; }
  #btn-compare svg { display: none; }
  /* once stuck on a phone, the bar shows only the number box (same size, ≥ 44 px targets) and any message
     about the number (never hidden while it explains what the list shows). Its layout does not change:
     the bar slides up, the background's bottom edge slides up to the box, the rest fades out and takes
     no taps; the bar keeps its full height in the page (app.js), so nothing beneath moves */
  .controls.compact { transform: translateY(calc(-1 * var(--bar-lift, 0px))); pointer-events: none; }
  .controls.compact .bar-bg { transform: translateY(var(--bg-y, 0px)); }
  .controls.compact .numfield:not(.cmp) .numbox, .controls.compact .hint { pointer-events: auto; }
  .controls.compact.has-msg .slidefield { transform: translateY(var(--msg-y, 0px)); }
  .controls .numfield .lab, .controls .numfield.cmp, .controls .numtools, .controls .slidefield,
  .controls .slidefield input[type="range"], .controls .slidefield .hint, .controls .lote-line { transition: none; }
  .controls.bar-anim .numfield .lab, .controls.bar-anim .numfield.cmp, .controls.bar-anim .numtools,
  .controls.bar-anim .slidefield input[type="range"], .controls.bar-anim .slidefield .hint, .controls.bar-anim .lote-line {
    transition: opacity 200ms cubic-bezier(.2, .7, .2, 1), visibility 0s;
  }
  .controls.bar-anim .slidefield { transition: transform 200ms cubic-bezier(.2, .7, .2, 1), opacity 200ms cubic-bezier(.2, .7, .2, 1), visibility 0s; }
  .controls.compact .numfield .lab, .controls.compact .numfield.cmp, .controls.compact .numtools,
  .controls.compact:not(.has-msg) .slidefield, .controls.compact .slidefield input[type="range"],
  .controls.compact .slidefield .hint:not(.warn):not(.note), .controls.compact .lote-line { opacity: 0; visibility: hidden; }
  .controls.bar-anim.compact .numfield .lab, .controls.bar-anim.compact .numfield.cmp, .controls.bar-anim.compact .numtools,
  .controls.bar-anim.compact .slidefield input[type="range"], .controls.bar-anim.compact .slidefield .hint, .controls.bar-anim.compact .lote-line {
    transition: opacity 200ms cubic-bezier(.2, .7, .2, 1), visibility 0s 200ms;
  }
  .controls.bar-anim.compact .slidefield { transition: transform 200ms cubic-bezier(.2, .7, .2, 1), opacity 200ms cubic-bezier(.2, .7, .2, 1), visibility 0s 200ms; }
}
@media (max-width: 420px) {
  /* the boxes keep 44 px tap targets inside their 1.5 px borders; the inputs shrink instead of the buttons */
  .numbox input { width: 76px; font-size: 22px; }
  .numbox.b input { width: 62px; font-size: 19px; }
}

/* ---------------------------------------------------------------- toolbar */
.toolbar { display: flex; flex-direction: column; gap: 12px; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filters .grow { grid-column: 1 / -1; }
@media (max-width: 479px) { .filters { grid-template-columns: 1fr; } }
@media (min-width: 760px) {
  .filters { grid-template-columns: minmax(220px, 1fr) 230px 230px; }
  .filters .grow { grid-column: auto; }
}
/* one «Partilhar» button with a small menu */
.share-row { display: flex; }
.share { position: relative; }
.share > summary { list-style: none; }
.share > summary::-webkit-details-marker { display: none; }
.share[open] > summary { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-strong); }
.share-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 15; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; min-width: 230px;
}
.share-menu .btn { justify-content: flex-start; color: var(--ink); }
.linkbtn { font: inherit; color: var(--accent); background: none; border: 0; padding: 10px 0; margin-block: -10px; min-width: 44px; justify-content: center; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; vertical-align: middle; text-align: left; }
.fld > .hint { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.results-caveat { font-size: 14.5px; color: var(--ink); background: var(--accent-tint); border-left: 3px solid var(--accent); border-radius: 6px; padding: 8px 12px; max-width: 80ch; }

/* ---------------------------------------------------------------- summary */
.summary { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; }
.linkbanner { grid-column: 1 / -1; font-size: 14.5px; color: var(--ink); background: var(--surface); border: 1px dashed var(--b); border-radius: var(--r); padding: 8px 14px; }
@media (min-width: 640px) { .summary { grid-template-columns: repeat(3, 1fr); } }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; min-width: 0; }
.tile-lab { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tile-num { font-size: 30px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; margin-top: 4px; }
.tile-num small { font-size: 16px; font-weight: 500; color: var(--ink-3); }
.tile-cap { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.tile .bars { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--track); margin-top: 10px; }
.tile .bars i { display: block; height: 100%; }
.bars .b-hi { background: var(--accent); }
.bars .b-mid { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.bar-key { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.bar-key span { display: inline-flex; align-items: center; gap: 4px; }
.bar-key i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.bk-hi { background: var(--accent); }
.bk-mid { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.bk-lo { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.tile-cap b { color: var(--ink); font-weight: 650; }
.tile .cmp-line { font-size: 14px; color: var(--ink-2); margin-top: 6px; border-top: 1px dashed var(--line); padding-top: 6px; }
.tile .cmp-line b { color: var(--b); }
.tile .bar-key + .cmp-line { margin-bottom: 4px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.tile-warn { border-color: var(--ink-3); }
.tile-alert { font-size: 14px; color: var(--ink); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.empty-start { grid-column: 1 / -1; background: var(--accent-tint); border: 1px dashed var(--accent); border-radius: var(--r); padding: 16px; color: var(--ink); }
.empty-start b { font-weight: 650; }

/* ---------------------------------------------------------------- legend */
.results { display: flex; flex-direction: column; gap: 12px; }
.results-head { display: flex; flex-direction: column; gap: 4px; }
.results-note { font-size: 14.5px; color: var(--ink-2); max-width: 80ch; }
.legend { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.legend-sig, .legend-chart { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.legend-chart span { display: inline-flex; align-items: center; gap: 6px; }
.legend-txt { color: var(--ink-3); max-width: 100ch; }
.legend-more > summary { list-style: none; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
.legend-more > summary::-webkit-details-marker { display: none; }
.legend-more > summary::after { content: " ▾"; content: " ▾" / ""; text-decoration: none; margin-left: 4px; } /* decorative: not read out */
.legend-more[open] > summary::after { content: " ▴"; content: " ▴" / ""; }
.legend-body { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 760px) { .legend-more > summary { display: none; } }
.k-rng { width: 26px; height: 9px; border-radius: 5px; background: var(--band); display: inline-block; }
.k-tick { width: 3px; height: 16px; background: var(--accent-strong); display: inline-block; border-radius: 1px; margin: 0 4px; }
.k-clip { width: 22px; height: 10px; display: inline-block; background: linear-gradient(to right, var(--band) 55%, transparent); clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); }
.k-med { width: 10px; height: 10px; background: var(--accent-strong); display: inline-block; border-radius: 2px; transform: rotate(45deg); margin: 0 2px; }
.k-prev { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); display: inline-block; }
.k-nofill { width: 14px; height: 14px; border-radius: 3px; background: repeating-linear-gradient(135deg, var(--ink-3) 0 1.5px, transparent 1.5px 4px); display: inline-block; }
.k-you { position: relative; width: 2px; height: 18px; background: var(--you); display: inline-block; margin: 0 5px; }
.k-you::before { content: ""; position: absolute; top: -1px; left: -5px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--you); }
.k-you.b { background: repeating-linear-gradient(to bottom, var(--b) 0 3px, transparent 3px 6px); }
.k-you.b::before { border-top-color: var(--b); }
.legend-notes { font-size: 13px; color: var(--ink-3); max-width: 100ch; }

/* signal: shape + word, accent only for "provável" */
.sig { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.sig i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; border: 2px solid var(--accent); }
.sig-hi { color: var(--accent-strong); }
.sig-hi i { background: var(--accent); }
.sig-mid { color: var(--ink); }
.sig-mid i { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
/* outlined but full contrast: an unlikely option is still one to keep on the list, not a disabled one */
.sig-lo { color: var(--ink-2); }
.sig-lo i { border-color: var(--ink-2); background: transparent; }

/* ---------------------------------------------------------------- list */
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.axis { display: block; padding: 6px 14px 4px 44px; border-bottom: 1px solid var(--line); color: var(--ink-3); position: sticky; top: var(--bar-h); background: var(--surface); z-index: 5; border-radius: var(--r) var(--r) 0 0; }
.axis .a-name, .axis .a-ch { display: none; }
.axis .ticks { position: relative; display: block; height: 34px; }
.axis .ticks span { position: absolute; bottom: 0; transform: translateX(-50%); white-space: nowrap; font-size: 12.5px; }
.axis .ticks span.first { transform: none; } .axis .ticks span.last { transform: translateX(-100%); }
.axis .ticks .flag { bottom: 16px; background: var(--you); color: var(--bg); padding: 0 5px; border-radius: 4px; font-weight: 700; }
.axis .ticks .flag.b { background: var(--b); }
.axis .ticks .flag.r { transform: translateX(-100%); border-bottom-right-radius: 0; } /* near the right end: stays inside the card */
.axis .ticks .flag.l { transform: none; border-bottom-left-radius: 0; }
.axis .ticks.stack { height: 52px; }
.axis .ticks .flag.up { bottom: 34px; }
.axis .ticks .t-hide { visibility: hidden; }
@media (max-width: 759px) { .axis .ticks .t-sm-hide { display: none; } }
.row { border-top: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + 48px); }
.list > .row:first-of-type, .list > .axis + .row { border-top: 0; }
/* a row head: the button (caret + name) opens the row; the signal word is its own button beside it, so the
   chance, the chart and the text are siblings (a tap anywhere else on the head opens the row too, app.js) */
.rowhead {
  display: grid; cursor: pointer; padding: 12px 14px 12px 12px;
  grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "btn btn chance" ". chart chart" ". txt txt"; gap: 4px 10px; align-items: center;
}
@media (hover: hover) { .rowhead:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); } }
.rowbtn { all: unset; box-sizing: border-box; grid-area: btn; align-self: stretch; display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.rowhead:has(> .rowbtn:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: -3px; border-radius: 6px; }
@supports not selector(:has(*)) { .rowbtn:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; } }
.rowbtn .car { align-self: flex-start; flex: none; }
.rowbtn .nm { flex: 1 1 auto; }
.car { grid-area: car; align-self: start; margin-top: 3px; width: 20px; height: 20px; color: var(--ink-3); transition: transform .15s; }
.car svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[aria-expanded="true"] > .car { transform: rotate(90deg); color: var(--accent); }
.nm { grid-area: name; min-width: 0; }
/* proper names are never hyphenated: they break at spaces, and at the <wbr> after «/» */
.nm b { display: block; font-weight: 650; font-size: 16.5px; line-height: 1.25; overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }
.nm .sub { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 1px; }
.nm .sumnote { display: block; font-size: 13px; color: var(--ink); font-weight: 600; margin-top: 3px; padding-left: 18px; position: relative; }
.nm .sumnote::before { content: "!"; position: absolute; left: 0; top: 1px; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--ink-2); font-size: 9.5px; line-height: 10px; text-align: center; font-weight: 800; color: var(--ink-2); }
.ch { grid-area: chance; justify-self: end; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ch .pct { font-size: 22px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; }
.ch .na { font-size: 15px; color: var(--ink-3); font-weight: 500; }
.ch .any { font-size: 12px; color: var(--ink-3); white-space: nowrap; line-height: 1.2; }
/* compare: one line per number (number, percentage, word), in fixed columns so the pairs line up row to row */
.ch .two { display: grid; grid-template-columns: auto 3.6em 8.4em; gap: 1px 6px; align-items: center; }
.ch .two .pill { display: contents; }
.ch .two .pct { text-align: right; }
.ch .two .sig { justify-self: start; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ch .two .who.b { border-bottom: 1.5px dashed var(--b); }
.ch .two .who { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.ch .two .who.b { color: var(--b); }
.ch .two .pct { font-size: 19px; }
.chart { grid-area: chart; min-width: 0; padding-top: 6px; }
.txt { grid-area: txt; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.txt .sep { color: var(--line-2); margin: 0 4px; }

/* chart: band = 8 in 10 simulations, diamond = most likely closing, ring = 2025, line with a ▼ cap = your number */
.strip { position: relative; display: block; height: 24px; }
.strip .trk { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--track); border-radius: 1px; }
.strip .rng { position: absolute; top: 7px; height: 10px; background: var(--band); border-radius: 5px; }
.strip .rng.open { border-radius: 5px 0 0 5px; }
.strip .nofill { position: absolute; right: 0; top: 5px; width: 14px; height: 14px; border-radius: 3px; background: repeating-linear-gradient(135deg, var(--ink-3) 0 1.5px, transparent 1.5px 4px); }
.strip .med { position: absolute; top: 6px; width: 12px; height: 12px; margin-left: -6px; background: var(--accent-strong); border: 2px solid var(--surface); border-radius: 2px; transform: rotate(45deg); }
.strip .prev { position: absolute; top: 6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; box-shadow: 0 0 0 1.5px var(--surface), inset 0 0 0 1px var(--surface); } /* a ring on top: what is under it still shows; ink with a surface halo, at least 3:1 on the band and the track */
.strip .you { position: absolute; top: -4px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--you); }
.strip .you::before { content: ""; position: absolute; top: -2px; left: -5px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--you); }
.strip .you.b { background: repeating-linear-gradient(to bottom, var(--b) 0 3px, transparent 3px 6px); }
.strip .you.b::before { border-top-color: var(--b); }
.strip .hy { position: absolute; top: 8.5px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px var(--surface); }
/* the zoomed chart has its own scale: a framed box with its own heading and labels, so it is never read
   against the shared axis pinned above the list */
.zoom { margin: 10px 0 2px; max-width: 560px; padding: 8px 12px 6px; border: 1px dashed var(--line-2); border-radius: 10px; background: var(--surface); }
.zoom-h { font-size: 12.5px; font-weight: 650; color: var(--ink-2); margin-bottom: 2px; }
.zflags { position: relative; display: block; height: 18px; }
.zflag { position: absolute; bottom: 0; transform: translateX(-50%); font-size: 12px; font-weight: 700; background: var(--you); color: var(--bg); padding: 0 5px; border-radius: 4px; white-space: nowrap; }
.zflag.b { background: var(--b); }
.zflag.r { transform: translateX(-100%); } .zflag.l { transform: none; }
.zticks { position: relative; display: block; height: 18px; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.zticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.zticks .first { transform: none; } .zticks .last { transform: translateX(-100%); }
.divider { border-top: 2px solid var(--you); background: var(--surface-2); padding: 7px 14px 7px 44px; font-size: 13.5px; font-weight: 650; color: var(--ink); scroll-margin-top: calc(var(--bar-h) + 52px); }
.divider:focus { outline: none; }
.divider.sub { padding-left: 24px; border-top-width: 1.5px; font-weight: 600; font-size: 13px; }
@media (min-width: 760px) { .divider.sub { margin: 0 8px 0 30px; padding-left: 36px; } }
.before { padding: 6px 14px 6px 34px; border-bottom: 1px solid var(--line); }
.sub-list .before { border-bottom: 1px dashed var(--line); }
.before .btn { white-space: normal; text-align: left; padding-block: 6px; line-height: 1.3; justify-content: flex-start; }
@media (min-width: 760px) { .before { padding-left: 42px; } .sub-list .before { padding-left: 72px; } }
/* a deep-linked row: a short highlight instead of a focus ring */
@keyframes flash { from { background: var(--accent-tint); } to { background: transparent; } }
.flash { animation: flash 2.4s ease-out 1; }
.divider:focus-visible { outline: 2.5px solid var(--accent); outline-offset: -3px; }

/* institutions */
.sub-list { background: var(--bg); border-top: 1px solid var(--line); padding: 4px 0 8px; }
.sub-note { font-size: 13.5px; color: var(--ink-3); padding: 8px 14px 4px 44px; }
.sub-hist .sub-note { padding-bottom: 2px; }
.yrs { list-style: none; margin: 0; padding: 2px 14px 4px 44px; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 13.5px; }
.yrs li { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; color: var(--ink); white-space: nowrap; }
.yrs .y { color: var(--ink-3); font-size: 12px; margin-right: 2px; }
.yrs .left { color: var(--ink-3); }
.sub-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 4px 14px 4px 34px; }
.sub-actions .btn { font-size: 14px; }
/* on a phone institution rows are not indented, so their chart starts and ends where the axis does */
.cell { position: relative; margin: 0; border-left: 2px solid var(--band); scroll-margin-top: calc(var(--bar-h) + 48px); }
.cell + .cell { border-top: 1px dashed var(--line); }
.cell .rowhead { padding-left: 10px; }
.cell .nm b { font-size: 15.5px; font-weight: 600; }
.cell .ch .pct { font-size: 19px; }
.star {
  position: absolute; top: 6px; right: 4px; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--ink-3); border-radius: 10px;
}
@media (hover: hover) { .star:hover { background: var(--surface-2); color: var(--ink); } }
.star svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.star[aria-pressed="true"] { color: var(--accent); }
.star[aria-pressed="true"] svg { fill: currentColor; }
.cell .ch { margin-right: 42px; } /* the star sits there */
.wmove { display: flex; align-items: center; gap: 4px; padding: 0 14px 6px 44px; font-size: 13.5px; color: var(--ink-3); }
.wmove .wrank { font-weight: 700; color: var(--ink-2); margin-right: 4px; min-width: 2.2em; }
.wmove .btn { min-height: 44px; padding: 0 8px; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-radius: 5px; padding: 0 6px; margin-left: 2px; vertical-align: 2px; white-space: normal; max-width: 100%; }
.detail { padding: 4px 14px 14px 12px; }
.detail h4 { font-size: 13.5px; font-weight: 650; margin: 12px 0 2px; color: var(--ink-2); }
.detail .tscroll { margin: 4px 0 4px; }
.detail .tscroll table { width: auto; min-width: 240px; }
.detail table { font-size: 14px; }
.detail td, .detail th { padding: 6px 10px 6px 0; }
.detail .facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--ink-2); }
.detail .facts b { color: var(--ink); font-weight: 650; }
.empty { padding: 26px 16px; color: var(--ink-2); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

@media (min-width: 760px) {
  .axis {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(150px, max-content) var(--chart-w); gap: 0 16px; align-items: end;
    padding: 12px var(--gut) 8px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-3);
    position: sticky; top: var(--bar-h); background: var(--surface); z-index: 5; border-radius: var(--r) var(--r) 0 0;
  }
  .axis .a-name, .axis .a-ch { display: block; }
  .axis .a-name { grid-column: 2; } .axis .a-ch { text-align: right; }
  .axis .ticks { grid-column: 4; }
  .ticks { position: relative; height: 34px; }
  .ticks span { position: absolute; bottom: 0; font-size: 12px; transform: translateX(-50%); font-weight: 500; white-space: nowrap; }
  .ticks span.first { transform: none; } .ticks span.last { transform: translateX(-100%); }
  .ticks .flag { bottom: 16px; color: var(--accent-ink); background: var(--you); color: var(--bg); padding: 0 5px; border-radius: 4px; font-weight: 700; font-size: 12px; }
  .ticks .flag.b { background: var(--b); }
  .rowhead {
    grid-template-columns: 22px minmax(0, 1fr) minmax(150px, max-content) var(--chart-w); grid-template-areas: "btn btn chance chart" "btn btn chance txt";
    gap: 2px 16px; padding: 14px var(--gut) 14px 14px;
  }
  .rowbtn { gap: 16px; }
  .chart { padding-top: 0; align-self: end; }
  .txt { align-self: start; }
  .ch { justify-self: end; }
  /* institution rows: indented on the left only; 8 px in from the right, so 8 px less right padding */
  .cell { margin: 0 8px 0 30px; }
  .cell .rowhead { padding-left: 14px; padding-right: calc(var(--gut) - 8px); }
  .cell .ch { margin-right: 0; }
  .detail { padding-left: 50px; padding-right: calc(var(--gut) - 8px); }
  .wmove { padding-left: 50px; }
  .divider { padding-left: 52px; }
}

/* ---------------------------------------------------------------- watchlist */
.watch { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 0 6px; }
.watch-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 14px 6px; }
.watch-head h2 { font-size: 18px; }
.watch-note { padding: 0 14px 8px; color: var(--ink-3); font-size: 14px; max-width: 90ch; }
.watch-note b { color: var(--ink-2); font-weight: 650; }
.watch-hint { margin: 0 14px 10px; font-size: 14px; color: var(--ink); background: var(--surface-2); border-radius: 8px; padding: 4px 10px; }
.watch .axis { position: sticky; border-top: 1px solid var(--line); border-radius: 0; }
.watch:focus { outline: none; }
@media (min-width: 760px) { .watch .cell { margin-left: 8px; } }

/* ---------------------------------------------------------------- teaser */
.teaser { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 16px; }
.teaser h2 { margin-bottom: 6px; }
.teaser p:not(.eyebrow) { color: var(--ink-2); }
.teaser .teaser-more { margin-top: 4px; }
.teaser .teaser-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 550; }
@media (min-width: 760px) { .teaser { flex-direction: row; justify-content: space-between; align-items: center; padding: 20px 22px; } }

/* ---------------------------------------------------------------- prose pages */
.prose-page, .page-vagas { padding-top: 28px; padding-bottom: 48px; }
.page-head { margin-bottom: 22px; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 28px; }
.toc a { font-size: 14px; font-weight: 550; text-decoration: none; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) { .toc a:hover { border-color: var(--accent); color: var(--accent); } }
.prose { max-width: 820px; padding: 22px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.prose h2 { margin-bottom: 10px; }
.prose h3 { margin: 18px 0 6px; }
.prose p, .prose li, .prose dd { color: var(--ink-2); }
.prose p + p { margin-top: 10px; }
.prose ul { padding-left: 20px; margin: 8px 0 0; }
.prose li { margin-bottom: 8px; }
.prose li b { color: var(--ink); }
.defs { margin: 6px 0 0; }
.defs dt { font-weight: 650; margin-top: 14px; }
.defs dd { margin: 3px 0 0; }
.catch-long h3:first-child { margin-top: 4px; }
.prose .two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 32px; margin-top: 6px; }
.prose .two > * { min-width: 0; }
@media (min-width: 900px) { .prose .two { grid-template-columns: 300px minmax(0, 1fr); } }
.page-vagas .prose, .prose-page .prose { max-width: none; }
.prose-page .prose > p, .prose-page .prose > ul, .prose-page .defs, .prose-page .catch-long { max-width: 76ch; }
.calib { width: 100%; max-width: 300px; height: auto; margin-top: 10px; }
.calib text { fill: var(--ink-2); font-size: 13px; font-family: var(--font); }
.calib .lab { font-size: 13px; }
.calib .grid { stroke: var(--line); stroke-width: 1; }
.calib .diag { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.calib .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.calib .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }

/* ---------------------------------------------------------------- vagas 2027 */
.kpis { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(3, 1fr); } .kpis.two-up { grid-template-columns: repeat(2, 1fr); } }
.kpi-sub { font-size: 13.5px; color: var(--ink-3); margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.callout { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ink-3); border-radius: var(--r); padding: 16px 18px; margin: -10px 0 28px; }
.callout h2 { font-size: 18px; margin-bottom: 6px; }
.callout p, .callout li { color: var(--ink-2); font-size: 15px; }
.callout ul { margin: 6px 0 0; padding-left: 20px; }
.callout li { margin-bottom: 4px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.kpi:first-child { border-top: 4px solid var(--accent); }
.kpi-lab { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.kpi-num { font-size: 36px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; margin-top: 6px; }
.kpi-cap { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.vsec { margin-bottom: 18px; }
.vsec > .filters { margin: 14px 0 10px; }
.vsec > .legend { margin-bottom: 10px; }
@media (min-width: 760px) { .vsec > .filters { grid-template-columns: minmax(220px, 1fr) 220px 260px; } }
.vsec .results-note + .results-note { margin-top: 4px; }
.vlist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.vrow { border-top: 1px solid var(--line); }
.vlist > .vrow:first-child { border-top: 0; }
.vbtn {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; gap: 4px 12px; padding: 12px 14px 12px 12px; align-items: center;
  grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "car name nums" "car chart chart";
}
@media (hover: hover) { .vbtn:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); } }
.vbtn:focus-visible { outline: 2.5px solid var(--accent); outline-offset: -3px; border-radius: 6px; }
.vbtn .nums { grid-area: nums; text-align: right; }
.vbtn .nums b { font-size: 19px; font-weight: 750; letter-spacing: -0.02em; }
.vbtn .nums > span { display: block; font-size: 13px; color: var(--ink-3); }
.vbtn .chart { padding-top: 4px; }
@media (min-width: 760px) {
  .vbtn { grid-template-columns: 22px minmax(0, 1fr) 170px minmax(0, 1.2fr); grid-template-areas: "car name nums chart"; padding: 12px 18px 12px 14px; }
  .vbtn .chart { padding-top: 0; }
}
.v-axis { display: block; padding: 10px 14px 6px 44px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.v-axis .a-name, .v-axis .a-ch { display: none; }
.v-axis .ticks { position: relative; display: block; height: 18px; }
.v-axis .ticks span { position: absolute; bottom: 0; transform: translateX(-50%); white-space: nowrap; font-size: 12px; }
.v-axis .ticks span.first { transform: none; } .v-axis .ticks span.last { transform: translateX(-100%); }
@media (min-width: 760px) {
  .v-axis { display: grid; grid-template-columns: 22px minmax(0, 1fr) 170px minmax(0, 1.2fr); gap: 0 12px; padding: 10px 18px 6px 14px; position: relative; }
  .v-axis .a-name, .v-axis .a-ch { display: block; font-weight: 600; } .v-axis .a-name { grid-column: 2; } .v-axis .a-ch { text-align: right; }
}
.vcells { list-style: none; margin: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 4px 14px 10px 44px; }
.vcells li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.vcells li:last-child { border-bottom: 0; }
.vc-n { min-width: 0; } .vc-n b { display: block; font-weight: 600; font-size: 15px; } .vc-n > span { font-size: 13.5px; color: var(--ink-3); }
.vc-v { text-align: right; flex: none; } .vc-v b { display: block; font-size: 17px; font-weight: 700; } .vc-v span { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.vcells .ret { font-weight: 650; color: var(--accent-strong); }
.vstrip { position: relative; display: block; height: 20px; }
.vstrip .trk { position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--track); }
.vstrip .rng { position: absolute; top: 5px; height: 10px; background: var(--band); border-radius: 5px; }
.vstrip .ref { position: absolute; top: 2px; width: 3px; height: 16px; margin-left: -1.5px; background: var(--accent-strong); border-radius: 1px; }
/* a band cut at the edge of the scale ends in an arrow */
.vstrip.clip-r .rng { border-radius: 5px 0 0 5px; }
.vstrip.clip-l .rng { border-radius: 0 5px 5px 0; }
.vstrip.clip-r::after, .vstrip.clip-l::before { content: ""; position: absolute; top: 3px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.vstrip.clip-r::after { right: -7px; border-left: 8px solid var(--band); }
.vstrip.clip-l::before { left: -7px; border-right: 8px solid var(--band); }
.vclip { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.vcells-wrap { background: var(--bg); border-top: 1px solid var(--line); padding: 4px 0 6px; }
.vcells-wrap .vcells { background: transparent; border-top: 0; padding-top: 0; }
.vc-cap { font-size: 13px; font-weight: 650; color: var(--ink-2); padding: 10px 14px 0 44px; }
.vc-v .vc-range { display: block; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.vc-v .vc-cat { display: block; font-size: 12.5px; }
.vc-n b { hyphens: manual; -webkit-hyphens: manual; }

/* ---------------------------------------------------------------- feedback + footer */
.feedback { padding: 8px 0 26px; }
.fb-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.fb-box summary { list-style: none; cursor: pointer; padding: 14px 16px; min-height: 56px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.fb-box summary::-webkit-details-marker { display: none; }
.fb-box summary #fb-title { font-weight: 700; font-size: 17px; }
.fb-pm::after { content: "+"; color: var(--accent); font-weight: 700; font-size: 17px; margin-left: 6px; }
.fb-box[open] .fb-pm::after { content: "−"; }
.fb-use-n { font: inherit; font-size: 14px; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }
.fb-hint { font-size: 14px; color: var(--ink-3); }
.fb-form { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.fb-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .fb-row { grid-template-columns: 200px 1fr; } }
.fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.fb-status { font-size: 14.5px; color: var(--ink-2); }
.fb-status.ok { color: var(--accent-strong); font-weight: 600; }
.fb-status.err { color: var(--danger); font-weight: 600; }
.fb-note { font-size: 13px; color: var(--ink-3); }
.fb-note a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.footer { border-top: 1px solid var(--line); padding: 22px 0 calc(28px + env(safe-area-inset-bottom)); font-size: 14px; color: var(--ink-3); }
.footer-in { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .footer-in { grid-template-columns: 1fr 1.2fr; gap: 32px; } }
.footer p + p { margin-top: 6px; }
.footer a { color: var(--ink-2); display: inline-block; padding-block: 12px; }
.footer .f-links { margin-block: -6px; }
.f-strong { color: var(--ink); font-weight: 650; }
.f-ver { font-size: 13px; }
/* the one-line legal notice: footer of every page, and under the number box (index, simulador) */
.f-disc { font-size: 13px; color: var(--ink-2); }
.footer .f-disc a, .disc-line a { padding-block: 12px; margin-block: -12px; }
.disc-line { font-size: 13px; color: var(--ink-3); margin: 2px 0 0; max-width: 80ch; }
.disc-line a { color: var(--ink-2); display: inline-block; }
.page-index > .disc-line { margin-top: -14px; } /* sits under the number bar, inside the page's 20 px flex gap */

/* always in the page as a live region; shown with .show (hidden only visually, so announcements are not lost) */
.toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate(-50%, 8px); z-index: 60;
  background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 550; padding: 11px 16px; border-radius: 10px; box-shadow: var(--shadow);
  max-width: calc(100vw - 32px); cursor: pointer; overflow-wrap: anywhere;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.toast:empty { padding: 0; }
.toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.copybox {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 61; max-width: 560px; margin: 0 auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow);
  padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px;
}
.copybox textarea { min-height: 120px; font-size: 14px; }
.copybox .btn { align-self: flex-end; }

@media (prefers-reduced-motion: reduce) { .car, .toast, .controls, .controls * { transition: none !important; } .flash { animation: none; } html { scroll-behavior: auto; } }
@media print {
  .controls, .share-row, .filters, .feedback, .teaser, .star, .wmove, .catches-head button { display: none !important; }
  .list, .tile { box-shadow: none; }
}
.legend.legend-chart { flex-direction: row; }
@media (min-width: 760px) { .row, .cell { scroll-margin-top: calc(var(--bar-h) + 96px); } }
.fb-t { display: flex; align-items: baseline; }
@media (max-width: 759px) {
  /* the chance block may wrap its word, so the name keeps most of the row; the icon never parts from it */
  .ch { max-width: 112px; min-width: 76px; }
  .ch .sig { display: block; white-space: normal; line-height: 1.2; text-align: right; }
  .ch .sig i { display: inline-block; vertical-align: -1px; margin-right: 5px; }
  .ch .any { white-space: normal; text-align: right; }
  /* compare: the block gets its own line under the name, one pill per number («800 · 53 % ◐ incerto») */
  .rowhead.cmpc { grid-template-areas: "btn btn btn" ". chance chance" ". chart chart" ". txt txt"; }
  .cell .rowhead.cmpc .rowbtn { padding-right: 40px; } /* the star sits there */
  .rowhead.cmpc .ch { max-width: none; min-width: 0; justify-self: stretch; align-items: flex-start; text-align: left; margin-right: 0; }
  .ch .two { display: flex; flex-wrap: wrap; gap: 4px 6px; }
  .ch .two .pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 999px; padding: 2px 10px 2px 8px; }
  .ch .two .pill.b { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
  .ch .two .sig { display: inline-flex; white-space: nowrap; text-align: left; }
  .ch .two .pct { font-size: 17px; }
  .rowhead.cmpc .ch .any { text-align: left; }
}

/* ---------------------------------------------------------------- lote, merged lines, protocoladas */
.lotebar { grid-column: 1 / -1; font-size: 14.5px; color: var(--ink); background: var(--accent-tint); border: 1px solid var(--accent-soft); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 10px 14px; }
.lotebar b { font-weight: 700; }
.lotebar a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.txt .sites { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.prot-here { border-bottom: 1px dashed var(--line-2); padding-bottom: 6px; margin-bottom: 4px; }
code.hash { font-size: 12px; overflow-wrap: anywhere; word-break: break-all; }
.tscroll-hint { font-size: 12.5px; color: var(--ink-3); margin: 10px 0 -6px; }
.prose > * + h2 { margin-top: 28px; }

/* ---------------------------------------------------------------- final round */
/* a long note about the number has a one-line version for the stuck bar on a phone */
.hint .h-short { display: none; }
@media (max-width: 759px) {
  .controls.compact .hint .h-full { display: none; }
  .controls.compact .hint .h-short { display: inline; }
}
/* the stepper at an end of the list: dimmed, still focusable */
.step[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
@media (hover: hover) { .step[aria-disabled="true"]:hover { background: var(--surface-2); } }
/* a number no longer on the list: the note takes the lote's place, in the alert style */
.gapbar { background: var(--surface); border-color: var(--danger); border-left-color: var(--danger); }
.share-row { flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.nm .sub + .sumnote, .nm .sumnote + .sumnote { margin-top: 3px; }

/* ---------------------------------------------------------------- tooltips and the signal-word balloon */
/* one tooltip for every icon (common.js): above the icon, or below it near the top of the screen */
.tip {
  position: fixed; z-index: 70; left: 0; top: 0; max-width: min(300px, calc(100vw - 16px)); pointer-events: none;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--shadow);
  font-size: 13.5px; font-weight: 500; line-height: 1.35; padding: 6px 10px; text-align: left; white-space: normal;
  visibility: hidden; opacity: 0; transition: opacity .12s;
}
.tip.show { visibility: visible; opacity: 1; }
.tip::after {
  content: ""; position: absolute; left: var(--ax, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: var(--surface); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transform: rotate(45deg);
}
.tip.below::after { bottom: auto; top: -6px; transform: rotate(-135deg); }
.tip.rich { max-width: min(320px, calc(100vw - 16px)); padding: 8px 12px; }
.tip-h { font-weight: 700; margin-bottom: 4px; }
.tip-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* the swatches keep their own width inside a 26 px slot, so the texts line up */
.tip-keys li { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; }
.tip-keys li > i { justify-self: center; margin: 0; }
.tip-keys .k-rng, .tip-keys .k-clip { width: 22px; }
.tip-foot { color: var(--ink-3); font-size: 12.5px; margin-top: 6px; }
.k-hy { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); display: inline-block; margin: 0 4px; }
/* icon glyphs on the charts: a larger invisible hit area for the tooltip */
.strip [data-tip]::after, .vstrip [data-tip]::after { content: ""; position: absolute; inset: -6px -5px; }
.strip .rng[data-tip]::after, .vstrip .rng[data-tip]::after { inset: -7px 0; }
.strip [data-tip], .vstrip [data-tip] { cursor: help; }
.calib .hit { fill: transparent; cursor: help; }
.nm .sumnote[data-tip], .tag[data-tip] { cursor: help; }
/* the «?» on the chart's axis: 44 px, in the axis's left gutter */
.axis .tipq, .v-axis .tipq {
  position: absolute; left: 0; bottom: 0; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0;
  display: grid; place-items: center; font: inherit; font-size: 13px; font-weight: 750; color: var(--ink-2);
}
.tipq::before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink-3); top: 50%; left: 50%; transform: translate(-50%, -50%); }
@media (hover: hover) { .tipq:hover { color: var(--ink); } .tipq:hover::before { border-color: var(--ink); } }
.tipq:focus-visible { outline-offset: -4px; border-radius: 10px; }
.v-axis { min-height: 44px; }

/* the signal word as a button: same look as before, a dotted underline says it opens an explanation */
.sigbtn { font: inherit; font-weight: 600; font-size: 13.5px; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; position: relative; text-align: inherit; }
.sig.sigbtn { color: inherit; }
.sig-hi.sigbtn { color: var(--accent-strong); } .sig-mid.sigbtn { color: var(--ink); } .sig-lo.sigbtn { color: var(--ink-2); }
.sigbtn .w { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (hover: hover) { .sigbtn:hover .w { text-decoration-style: solid; } }
.sigbtn[aria-expanded="true"] .w { text-decoration-style: solid; }
/* a 44 px tap area around the word, without moving anything */
.sigbtn::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100% + 12px, 44px); height: 44px; transform: translate(-50%, -50%); }
.ch .two .sigbtn::after { height: 30px; } /* two lines close together in compare mode: the areas do not overlap */
.bar-key .sigbtn { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.bar-key { gap: 2px 16px; margin-top: 8px; }
.legend-sig .sigbtn { min-height: 32px; }
.legend-tap { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 759px) { .ch .sigbtn { display: block; text-align: right; } .rowhead.cmpc .ch .sigbtn, .ch .two .sigbtn { display: inline-flex; text-align: left; } }

.pop {
  position: absolute; z-index: 40; width: min(380px, calc(100vw - 24px)); max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 2px 6px rgba(15, 21, 19, .1), 0 12px 32px rgba(15, 21, 19, .18); padding: 12px 14px 6px 16px; font-size: 14.5px; line-height: 1.45;
}
.pop:focus { outline: none; }
.pop:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.pop-x {
  float: right; width: 44px; height: 44px; margin: -8px -10px 0 8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: inherit; font-size: 22px; line-height: 1; color: var(--ink-2);
}
@media (hover: hover) { .pop-x:hover { background: var(--surface-2); color: var(--ink); } }
.pop-x:focus-visible { outline-offset: -3px; }
.pop .pop-h { font-size: 16px; margin: 4px 0 2px; }
.pop .pop-h .sig { font-size: 16px; font-weight: 700; }
.pop p { color: var(--ink-2); margin-top: 8px; }
.pop p b { color: var(--ink); font-weight: 650; }
.pop .pop-note { font-size: 13.5px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 8px; }
.pop .pop-more { margin-top: 2px; }
.pop .pop-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }
@media print { .tip, .pop, .tipq { display: none !important; } }

/* ---------------------------------------------------------------- phone view, v2: one hierarchy per screen */
/* intro: a one-line title, one sentence, and the long figures behind «Detalhes» */
.intro-more { margin-top: 6px; }
.intro-more > summary { list-style: none; cursor: pointer; color: var(--accent); font-size: 15px; font-weight: 550; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.intro-more > summary::-webkit-details-marker { display: none; }
.intro-more > summary::after { content: "▾"; content: "▾" / ""; font-size: 13px; }
.intro-more[open] > summary::after { content: "▴"; content: "▴" / ""; }
.intro-more .lede-sub { margin-top: 0; }
.lote-line { margin-top: 8px; font-size: 16px; color: var(--ink-2); }
.lote-line b { color: var(--ink); font-weight: 650; }
.sum-more { align-self: flex-start; margin-top: -8px; }
@media (min-width: 760px) { .lote-line, .sum-more { display: none !important; } }
@media (max-width: 759px) {
  .page-index { gap: 24px; padding-top: 20px; }
  .page-index .intro .eyebrow { display: none; }
  .page-index h1 { font-size: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-index .intro .lede { font-size: 16px; margin-top: 8px; }
  .lede-sub { font-size: 16px; }
  /* the number box is the hero: full width, large figures (the compact stuck bar keeps the same box) */
  .controls .numfield:not(.cmp) { flex: 1 1 100%; min-width: 0; }
  .controls .numfield:not(.cmp) .lab { font-size: 15px; }
  .controls .numfield:not(.cmp) .numbox { height: 60px; }
  .controls .numfield:not(.cmp) .numbox input { width: 0; min-width: 0; flex: 1 1 0; font-size: 30px; }
  .controls .numfield:not(.cmp) .step { width: 56px; font-size: 26px; }
  .page-index > .disc-line { margin-top: -20px; font-size: 14px; }
  /* one summary card; the others, the lote details and the long captions behind «Mais resumo» */
  .summary:not(.more) > .lotebar:not(.gapbar), .summary:not(.more) > .tile:not(.tile-main):not(.tile-warn), .summary:not(.more) > .tile-main > .tile-cap { display: none; }
  .tile-lab { font-size: 15px; }
  .tile-cap, .tile .cmp-line, .tile-alert { font-size: 15px; }
  .catch-list li { font-size: 16px; }
  .catch-sub { font-size: 15px; }
  .results-note, .results-caveat { font-size: 15px; }
  .filters { grid-template-columns: 1fr 1fr; }
  .results-caveat:not(.reg) { display: none; }
  .rowbtn { align-items: flex-start; }
  .legend .dsk, .sub-note .dsk, .legend-more .legend-chart { display: none; }
  .catches-tg .car { align-self: center; }
  /* list rows: name, chance, the closing sentence and the caret; the rest only once the row is open */
  .rowhead:not(.open) .nm .sub, .rowhead:not(.open) .nm .sumnote, .rowhead:not(.open) .txt .tx2 { display: none; }
  .rowhead .chart, .list > .axis, .watch .axis { display: none; }
  .rowhead { padding-top: 16px; padding-bottom: 16px; row-gap: 6px; }
  .txt { font-size: 15px; line-height: 1.45; }
  .nm .sub { font-size: 15px; }
  .nm .sumnote { font-size: 14px; }
}
@media (max-width: 359px) { .filters { grid-template-columns: 1fr; } }

/* folded sections (simulador: «Adesão por lote», «Como ler»; vagas: «Vale a pena esperar»): closed on a phone, open from 760 px (common.js, data-desk-open) */
.cx-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.cx-fold > summary::-webkit-details-marker { display: none; }
.cx-fold > summary h2 { margin-bottom: 0; }
.cx-fold > summary:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.cx-fold[open] > summary .car { transform: rotate(90deg); color: var(--accent); }
.cx-fold[open] > summary { margin-bottom: 6px; }
.kpi-more > summary { list-style: none; cursor: pointer; color: var(--accent); font-size: 15px; font-weight: 550; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.kpi-more > summary::-webkit-details-marker { display: none; }
.kpi-more > summary::after { content: "▾"; content: "▾" / ""; font-size: 13px; }
.kpi-more[open] > summary::after { content: "▴"; content: "▴" / ""; }
@media (max-width: 759px) {
  .page-vagas .page-head .lede { font-size: 16px; }
  .page-vagas h1 { font-size: 28px; }
  .kpi-cap, .kpi-sub, .callout p, .callout li { font-size: 16px; }
  .callout.cx-fold { padding: 6px 16px; margin-top: 0; }
  .callout.cx-fold[open] { padding-bottom: 16px; }
  .callout.cx-fold > summary h2 { font-size: 18px; }
}
@media (max-width: 759px) { .teaser > div > p:not(.eyebrow):not(.teaser-more) { display: none; } }