/* The seven condition pages as bold pages (/dor-na-coluna/, /dor-no-ombro/, /dor-no-quadril/, /dor-no-joelho/,
   /dor-neuropatica/, /dor-miofascial/, /cefaleia-enxaqueca/), 2026-10-02: the page design's own layout.
   Markup: lib/pages-bold/condicao.php (one renderer, seven data sets). Shared vocabulary: bold-kit.css (loaded
   before this file). Design: 03-notes/curvatura-inner-bold-20261002/plans/_condicao-template.md. Work log:
   03-notes/curvatura-inner-bold-20261002/wave2-condicao.md.
   Every rule starts with html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao (the <main>); the two nav rules use
   the same class on <body>. px only (1rem is 10px).
   Two cover variants, set by a class on each section: mpb-condicao--a (upright photo slab at the left, colour
   bands cobalt then navy) and mpb-condicao--b (the giant word across the page, wide slab at the right, navy then
   cobalt).
   Layouts: two columns from 901px; stacked at 900px and under (tablet 641 to 900, phone to 640).
   Sizes at 1440: giant word 120, small line 40, sub-head 32, lead 22; titles 56 / 48 / 44; statements 32;
   checklist 24; cells 30; guide rows 44 beside 120px numerals; article count 168; FAQ 40 / 22. */

/* ---------- header: "Condições" is the section these pages belong to (the site nav marks exact paths only).
   Same declarations as the site's [aria-current] rule; no aria-current here, the link is the parent page. */
html body:is(#mpc, .mpc-site).mpb-page.mpb-condicao .mph-nav a.mpc-navlink[href$="/condicoes-tratadas/"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--mpc-accent); text-decoration-thickness: 1.5px; }
html body:is(#mpc, .mpc-site).mpb-page.mpb-condicao .mph-menu-list a.mpc-navlink[href$="/condicoes-tratadas/"] { color: var(--mpc-accent); }

/* ---------- cover (ground). The h1 is the stored title drawn as: small line (40), ONE giant word (120), a channel
   of 152, the sub-head (Albert Sans 600, 32). Owner decision 2026-10-02 (board #08): lines never cross a title.
   The vermilion bundle runs in the channel only, so everything above the channel is sized in units of the
   1440 frame (--mpb-cu: 1px at 1440 and above, smaller below), the same scale the drawing shrinks by
   (mpb-bundle--fit). Vertical positions in units, from the band's top: small line 56 to 100, giant word 104 to
   229, channel 229 to 381. A page without a small line (cefaleia) starts its word at 104 too.
   --mpb-em (inline, per page) is the width of the giant word in em; --mpb-c-before / --mpb-c-after say whether
   the page has a small line above / beside the word. Do not change these numbers without moving the drawing. */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cover { --mpb-cu: calc(min(100vw, 1440px) / 1440); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cover-grid { row-gap: 0; align-items: start; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-h1 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(28 * var(--mpb-cu)); margin: 0; padding-top: calc((104 - 48 * var(--mpb-c-before)) * var(--mpb-cu)); color: var(--mpb-fg); font-size: 18px !important; line-height: 1 !important; text-wrap: initial; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-h1-small { flex: 0 0 100%; color: var(--mpb-fg); font-size: calc(40 * var(--mpb-cu)); line-height: 1.1; white-space: nowrap; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-h1-after { flex: 0 0 auto; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-h1-big { flex: 0 0 auto; margin-top: calc(4 * var(--mpb-c-before) * var(--mpb-cu)); --mpb-cover-size: calc(120 * var(--mpb-cu)); --mpb-cover-lh: 1.04; white-space: nowrap; }
/* the sub-head keeps the stored lower case in the markup; the capital is drawn */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-h1-sub { box-sizing: border-box; flex: 0 0 100%; max-width: none; margin-top: calc(152 * var(--mpb-cu)); font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.25; text-wrap: balance; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-h1-sub::first-letter { text-transform: uppercase; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cover-copy { padding-bottom: 80px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cover-copy .mpb-lead { max-width: 600px; margin-top: 24px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cover-copy .mpc-actions { margin-top: 32px; }
/* Release answer 2026-10-03 (Q22 a): a long article-pill label ("Artigos sobre cefaleia e enxaqueca") has a short
   twin, "Artigos do tema" plus the topic as hidden text (marcuspai_bold_condicao_artigos_pill()). One of the two is
   out of the page at a time (display), so a screen reader hears one label; the short one shows under 375px. */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-pill-short { display: none; }
@media (max-width: 374px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-pill-full { display: none; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-pill-short { display: inline; }
}
/* the stacked drawings (cover channel, top of the colour band): a 390 x 84 unit frame stretched to the screen width */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-phone-lines { left: 0; width: 100vw; height: calc(100vw * 84 / 390); margin-left: 0; }
@media (min-width: 901px) {
	/* the photo slab: from the cover into the colour band under it (96px), bleeding off the screen edge. Above
	   1920px it stops growing (the crops are cut for boxes up to 825px wide). */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-slab { align-self: stretch; margin-bottom: -96px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-slab img { position: absolute; inset: 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-slab.mpb-bleed-left, html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-larga.mpb-bleed-left { margin-left: calc(-1 * min(var(--mpb-edge), 288px)); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-slab.mpb-bleed-right, html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-larga.mpb-bleed-right { margin-right: calc(-1 * min(var(--mpb-edge), 288px)); }
	/* variant A: upright slab in the five columns at the left, the whole text in the seven at the right */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--a .mpb-condicao-h1 { grid-column: 2; grid-row: 1; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--a .mpb-condicao-cover-copy { grid-column: 2; grid-row: 2; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--a .mpb-condicao-slab { grid-column: 1; grid-row: 1 / 3; }
	/* variant B: the word has the whole line; the slab starts 24 units under it, in the five columns at the right */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--b .mpb-condicao-h1 { grid-column: 1 / -1; grid-row: 1; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--b .mpb-condicao-h1-sub { padding-right: calc(100% * 5 / 12 + var(--mpb-gap) * 7 / 12); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--b .mpb-condicao-cover-copy { grid-column: 1; grid-row: 2; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--b .mpb-condicao-slab { grid-column: 2; grid-row: 1 / 3; margin-top: calc(253 * var(--mpb-cu)); }
}
@media (max-width: 900px) {
	/* stacked: h1, lead, pills, then the photo full-bleed (no overhang). The word is sized from the screen so it
	   is always one line; the channel between the word and the sub-head holds the small drawing. */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cover {
		--mpb-cw: clamp(30px, calc((100vw - 2 * var(--mpc-pad)) * 0.96 / var(--mpb-em)), 120px);
		--mpb-cs: clamp(18px, calc(var(--mpb-cw) / 3), 40px);
		--mpb-ctop: 44px;
		--mpb-chan: calc(100vw * 84 / 390);
		--mpb-chan-top: calc(var(--mpb-ctop) + var(--mpb-c-before) * (var(--mpb-cs) * 1.1 + 4px) + var(--mpb-cw) * 1.04 + var(--mpb-c-after) * (var(--mpb-cs) * 1.1 + 6px));
	}
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-h1 { padding-top: var(--mpb-ctop); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-h1-small { font-size: var(--mpb-cs); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-h1-after { flex: 0 0 100%; margin-top: 6px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-h1-big { margin-top: calc(4px * var(--mpb-c-before)); --mpb-cover-size: var(--mpb-cw); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-h1-sub { margin-top: var(--mpb-chan); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-capa-lines .mpb-bundle-svg { top: var(--mpb-chan-top); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cover-copy { padding-bottom: 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cover-copy .mpb-lead { max-width: 640px; margin-top: 20px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-slab { margin: 48px calc(-1 * var(--mpc-pad)) 0; aspect-ratio: 11 / 10; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--a .mpb-condicao-slab { aspect-ratio: 1 / 1; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--a .mpb-condicao-slab img { object-position: var(--mpb-condicao-fone-pos, 50% 50%) !important; }
}
@media (max-width: 640px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cover { --mpb-ctop: 36px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cover-copy .mpc-actions { margin-top: 28px; gap: 12px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-slab, html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--a .mpb-condicao-slab { margin-top: 40px; aspect-ratio: 4 / 5; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-slab img { object-position: var(--mpb-condicao-fone-pos, 50% 50%) !important; }
}

/* ---------- "<condição> em poucas linhas" (the stored label was "Resposta direta"; A: cobalt, B: navy): the cover's grid again, so the text keeps one vertical axis
   through both bands; the five empty columns hold the slab's last 96px and the lines that come back out from
   under it. Sizes: 44 / 32 / 18. */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-gap { min-height: 1px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-resposta-text .mpb-statement { max-width: none; margin-top: 28px; text-wrap: pretty; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-resposta-text .mpb-title + .mpb-statement { margin-top: 36px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-resposta-text .mpb-rule { margin-top: 44px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-revisao { margin-top: 16px; }
@media (max-width: 900px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-gap { display: none; }
	/* the top padding is the channel of the stacked drawing */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-resposta { padding-top: calc(100vw * 84 / 390 + 28px); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-resposta .mpb-condicao-phone-lines { top: 4px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-resposta-text .mpb-statement { margin-top: 22px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-resposta-text .mpb-title + .mpb-statement { margin-top: 28px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-resposta-text .mpb-rule { margin-top: 36px; }
}

/* ---------- causes and clues (ground): text in five columns, the large photo in seven plus the gutter, as tall
   as the text (the crops are cut to that box). A: text | photo. B: photo | text. Sizes: 44 / 24 / 19. */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas-text .mpb-title { --mpb-title-lh: 1.08; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas-text .mpb-text { margin-top: 28px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas-text .mpb-text + .mpb-text { margin-top: 14px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-pistas-label { margin-top: 40px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-marks { margin-top: 14px; border-top: 1.5px solid var(--mpb-line); border-bottom: 1px solid var(--mpb-hair); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-marks > li { padding: 12px 0; font-size: clamp(20px, 1.67vw, 24px); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-pairs { margin-top: 32px; --mpb-pair-col: 180px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-pairs .mpb-pair-label { font-size: clamp(17px, 1.39vw, 20px); line-height: 1.2; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas-text .mpb-condicao-causas-after { margin-top: 28px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-larga { --mpb-fig-min: 560px; }
@media (min-width: 901px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--a .mpb-condicao-causas-text { grid-column: 1; grid-row: 1; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--a .mpb-condicao-larga { grid-column: 2; grid-row: 1; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--b .mpb-condicao-causas-text { grid-column: 2; grid-row: 1; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao--b .mpb-condicao-larga { grid-column: 1; grid-row: 1; }
}
@media (min-width: 901px) and (max-width: 1199px) {
	/* a photo that only exists as a wide strip keeps a wide box at the top of its column instead of growing as tall
	   as the text (data field 'larga_strip'). No page uses it since the review fix of 2026-10-02: miofascial's
	   second photo is now a 1240px hands-only cut that fills its column. Kept for a page whose photo needs it. */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-larga--strip { align-self: start; min-height: 0; aspect-ratio: 10 / 7; }
}
@media (min-width: 1200px) {
	/* a long list of short clues in two columns (miofascial), so the photo beside it keeps a wide frame */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-marks--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-marks--2 > li:nth-child(2) { border-top: 0; }
}
@media (max-width: 900px) {
	/* stacked: the photo full-bleed at the top of the band, 3:2, then the text */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas { padding-top: 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas-grid { gap: 48px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-larga { order: -1; min-height: 0; margin-inline: calc(-1 * var(--mpc-pad)); aspect-ratio: 3 / 2; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-larga img { object-position: 50% 50% !important; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas-text .mpb-text { margin-top: 22px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-pistas-label { margin-top: 32px; }
}
@media (max-width: 640px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas-grid { gap: 40px; }
	/* the planned line breaks are for the 44px title; on a phone the browser balances the lines */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas-text .mpb-title br { display: none; }
}
/* Owner decision 2026-10-02 (board 2 #a23): a photo shown WHOLE (data field 'larga_whole': miofascial's
   point-marking frame, ombro's exam frame). The box takes the frame's own ratio (--mpb-ratio, inline) on every
   screen, so nothing is cut and nothing is letterboxed. From 1200px: at the top of its column beside the text
   (seven columns plus the bleed). From 901 to 1199 the band stacks as on phones (the photo full-bleed at the top
   of the band, then the text), because a whole frame in seven columns there is half as tall as the text. */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-larga.mpb-condicao-larga--whole { align-self: start; min-height: 0; aspect-ratio: var(--mpb-ratio); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-larga.mpb-condicao-larga--whole img { position: absolute; inset: 0; }
/* a clue that takes two lines in its column (ombro: "Dor que vem do pescoço") breaks in the middle */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas--whole .mpb-condicao-marks--2 > li { text-wrap: balance; }
@media (min-width: 901px) and (max-width: 1199px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas.mpb-condicao-causas--whole { padding-top: 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas--whole .mpb-condicao-causas-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas--whole .mpb-condicao-larga--whole { grid-column: 1; grid-row: 1; margin-inline: calc(-1 * var(--mpb-edge)); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas--whole .mpb-condicao-causas-text { grid-column: 1; grid-row: 2; max-width: 760px; }
}
@media (min-width: 641px) and (max-width: 1199px) {
	/* stacked with the whole text width: miofascial's seven one-word clues in two columns, as from 1200px */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas--whole .mpb-condicao-marks--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-causas--whole .mpb-condicao-marks--2 > li:nth-child(2) { border-top: 0; }
}

/* ---------- O que avalio (A: navy, B: cobalt): the exam checklist in three columns and the page's one safety
   block. No photo, no drawing. Sizes: 56 / 24 / 19. */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-avalio-statement { max-width: 640px; text-wrap: pretty; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--mpb-gap); margin-top: 56px; border-top: 1.5px solid var(--mpb-line); border-bottom: 1.5px solid var(--mpb-line); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-checks > li { padding: 20px 0; border-top: 1px solid var(--mpb-hair); color: var(--mpb-fg); font-size: clamp(20px, 1.67vw, 24px); font-weight: 600; line-height: 1.25; text-wrap: pretty; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-checks > li:nth-child(-n+3) { border-top: 0; }
/* an item too long for one column (neuropática: "Histórico de …") takes the whole last row on one line; the short
   items after it move up into the gap, so every row is full and one line tall. The markup keeps the stored order. */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-checks--dense { grid-auto-flow: row dense; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-checks > li.mpb-condicao-check--wide { grid-column: 1 / -1; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-avalio-text { max-width: 760px; margin-top: 32px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-avalio .mpc-actions { margin-top: 36px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-alerta { margin-top: 64px; padding-top: 28px; border-top: 1.5px solid var(--mpb-fg); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-alerta .mpb-mark { margin-bottom: 20px; background: #FFFFFF; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-alerta .mpb-text { max-width: 720px; }
@media (max-width: 1100px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-checks > li:nth-child(3) { border-top: 1px solid var(--mpb-hair); }
}
@media (max-width: 900px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-avalio-head { gap: 20px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-alerta { gap: 16px; margin-top: 56px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-alerta .mpb-mark { margin-bottom: 16px; }
}
@media (max-width: 640px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-checks { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-checks > li { padding: 15px 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-checks > li:nth-child(2) { border-top: 1px solid var(--mpb-hair); }
}

/* ---------- Tratamentos (tint): four link cells under the head's rule, hairlines between them; the name keeps
   two lines so the context lines start level; the circle sits at the bottom of the cell. Sizes: 48 / 30 / 19. */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-trat-head .mpb-title { --mpb-title-lh: 1.08; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-trat-intro { flex: 0 1 520px; max-width: 520px; text-wrap: pretty; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--mpb-hair); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cells > li { display: flex; border-left: 1px solid var(--mpb-hair); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cells > li:first-child { border-left: 0; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cell { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 280px; padding: 28px 24px 32px; color: var(--mpb-fg); text-decoration: none; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cells > li:first-child .mpb-condicao-cell { padding-left: 0; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cells > li:last-child .mpb-condicao-cell { padding-right: 0; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cell-name { min-height: 2.4em; margin: 0; text-wrap: balance; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cell-text { display: block; margin: 12px 0 28px; text-wrap: pretty; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cell .mpb-circle { margin-top: auto; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cell:is(:hover, :focus-visible) .mpb-circle { background: var(--mpb-fg); color: var(--mpb-surface); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cell:is(:hover, :focus-visible) .mpb-condicao-cell-name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-trat .mpc-actions { margin-top: 40px; }
@media (max-width: 1100px) {
	/* the title takes the line breaks the screen gives it */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-trat-head br { display: none; }
	/* two by two */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cells > li:nth-child(odd) { border-left: 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cells > li:nth-child(n+3) { border-top: 1px solid var(--mpb-hair); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cell { min-height: 232px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cells > li:nth-child(odd) .mpb-condicao-cell { padding-left: 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cells > li:nth-child(even) .mpb-condicao-cell { padding-right: 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cell-name { min-height: 0; }
}
@media (max-width: 640px) {
	/* one per row: name and line at the left, the circle at the right */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cells { grid-template-columns: minmax(0, 1fr); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cells > li { border-left: 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cells > li + li { border-top: 1px solid var(--mpb-hair); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cell { display: grid; grid-template-columns: minmax(0, 1fr) 48px; column-gap: 16px; align-items: center; min-height: 0; padding: 20px 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cell-name { grid-column: 1; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cell-text { grid-column: 1; margin: 6px 0 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-cell .mpb-circle { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-trat .mpc-actions { margin-top: 32px; }
}

/* ---------- Guias (ground): four display rows, each a link, a vermilion numeral in front. The cobalt drawing
   crosses the empty right half of the head and leaves above the first rule. Sizes: 56 and 44 display, 120
   numerals, 20. */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-guias .mpb-title { --mpb-title-lh: 1.06; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-guias-list { margin-top: 64px; --mpb-condicao-num: clamp(72px, 8.34vw, 120px); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-guia { grid-template-columns: calc(var(--mpb-condicao-num) * 1.67) minmax(0, 1fr) var(--mpb-circle, 64px); column-gap: clamp(24px, 2.78vw, 40px); --mpb-row-pad: 36px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-guia .mpb-num { --mpb-num-size: var(--mpb-condicao-num); line-height: 0.82; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-guia .mpb-row-title { text-wrap: balance; }
@media (max-width: 900px) {
	/* the numeral above the title */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-guias-list { margin-top: 40px; --mpb-condicao-num: clamp(72px, 14vw, 104px); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-guia { grid-template-columns: minmax(0, 1fr) var(--mpb-circle, 64px); row-gap: 20px; --mpb-row-pad: 28px; --mpb-row-size: clamp(22px, 5.6vw, 40px); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-guia .mpb-num { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-guias-list { margin-top: 32px; --mpb-condicao-num: clamp(72px, 22vw, 96px); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-guia { row-gap: 16px; --mpb-row-pad: 24px; }
}
@media (max-width: 359px) {
	/* the narrowest phones: a one-word title (SUPRAESPINHOSO, CONDROMALÁCIA) stays whole at 18px beside the 48px
	   circle. Measured: at 22px the widest word is 241px and its cell is 256px at 360, so 360 and up keep 22px. */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-guia { column-gap: 16px; --mpb-row-size: 18px; }
}

/* ---------- Artigos sobre … (tint, live): the count and the title at the left (they stay in view while the
   list scrolls), the links in two columns at the right. The h2 carries the anchor #artigos-<key> that every
   post of the hub links to. Sizes: 168 numeral, 44, 18. */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-artigos-head .mpb-num { line-height: 0.82; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-artigos-title { margin-top: 36px; scroll-margin-top: 32px; --mpb-title-lh: 1.08; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-hub-label { display: block; font-size: inherit; line-height: inherit; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-artigos-head .mpc-actions { margin-top: 36px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-artigos-list > .mpb-condicao-links { border-top: 1.5px solid var(--mpb-line); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-links > li { display: flex; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-links .mpb-link { flex: 1; text-wrap: pretty; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-more .mpb-more-body { border-top: 0; margin-top: 12px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-more .mpb-condicao-links { border-top: 1px solid var(--mpb-hair); }
@media (min-width: 1101px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-artigos-head { position: sticky; top: 40px; }
}
@media (max-width: 1100px) {
	/* the head across the band (count beside the title), the links in two columns under it */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-artigos-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-artigos-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; align-items: end; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-artigos-title { margin-top: 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-artigos-head .mpc-actions { grid-column: 1 / -1; margin-top: 32px; }
}
@media (max-width: 640px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-artigos-grid { gap: 36px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-artigos-head { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-artigos-head .mpc-actions { margin-top: 0; gap: 12px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-links { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Perguntas frequentes (ground): title with the pill at the right; the three stored questions, all
   open, question | answer on one row from 901px */
html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-faq .mpb-faq { margin-top: 28px; }
@media (min-width: 901px) {
	/* a one-line question is under 44px tall once the type shrinks: the button keeps a 48px target */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-faq .mpb-faq--wide .mpb-faq-btn { min-height: 48px; }
}
@media (min-width: 901px) and (max-width: 1279px) {
	/* the kit's 620px answer column leaves the question three words per line on a narrow laptop */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-faq .mpb-faq--wide .mpb-faq-item { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 40px; }
}
@media (max-width: 640px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-condicao .mpb-condicao-faq .mpb-faq { margin-top: 20px; }
}