/* /tecnologias-e-estrutura/ as a bold page (plan 03-notes/curvatura-inner-bold-20261002/plans/tecnologias-e-estrutura.md):
   the page's own layout. Loaded after bold-kit.css, only on this page (lib/pages-bold.php).
   Markup: lib/pages-bold/tecnologias.php. Every rule starts with
   html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias (the <main>), px only.
   Layouts: two columns from 901px, stacked at 900px and under (tablet 641 to 900, phone to 640).
   Work log: 03-notes/curvatura-inner-bold-20261002/wave2-livros-tecnologias.md. */

/* one unit of the 1440 frame (1px at 1440 and above, smaller under it): what the line bundles pass by is sized
   with it, because the drawings shrink with the screen (mpb-bundle--fit) */
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias { --mpb-tecnologias-u: calc(min(100vw, 1440px) / 1440); }

/* ---------- cover (navy): the title at 104px beside a photo that fills the right of the band, top to bottom and
   out to the screen edge. The kit's 8-4 grid is too narrow for "Tecnologias" (8.59em wide): the photo column is
   25vw, between 280 and 360px (so the photo, with its bleed, is never under 304px wide), and the title is sized
   from the text column, so it can never reach the photo. */
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mpb-gap); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-h1-rest {
	display: block; margin-top: 16px; color: var(--mpb-fg);
	font-family: var(--mpc-font) !important; font-size: clamp(20px, 1.95vw, 28px) !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-lead { margin-top: 28px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-actions { margin-top: 36px; }
@media (min-width: 901px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-grid { --mpb-tecnologias-photo: max(280px, min(25vw, 360px)); grid-template-columns: minmax(0, 1fr) var(--mpb-tecnologias-photo); align-items: stretch; }
	/* the bottom padding is the channel of the line bundle's lower run: it scales with the drawing */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-copy { box-sizing: border-box; min-height: calc(720 * var(--mpb-tecnologias-u)); padding: calc(104 * var(--mpb-tecnologias-u)) 0 max(96px, calc(124 * var(--mpb-tecnologias-u))); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover .mpb-cover-title { --mpb-cover-size: min(104px, calc((100vw - 2 * var(--mpc-pad) - var(--mpb-gap) - var(--mpb-tecnologias-photo)) / 8.8)); --mpb-cover-lh: 1.02; }
	/* the lead keeps its share of the frame, so the lines always rise at its right */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-lead { max-width: calc(620 * var(--mpb-tecnologias-u)); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-photo { --mpb-fig-min: 0px; }
	/* 901 to 1559px: the upright crop (capa-alta, 408:720) is the box itself at 1440; where the box is wider than
	   that ratio (1441 to 1559) the crop loses height, and the window stays on the applicator and the hand */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-photo img { object-position: 50% 40%; }
}
@media (min-width: 1560px) {
	/* the wide crop (capa, 700:720): the box shows 67% of its width at 1560 and all of it from 2024px; the
	   applicator and the whole hand stay in */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-photo img { object-position: 64% 50%; }
}
@media (max-width: 900px) {
	/* stacked: the title across the screen, lead, pills, a strip for the lines, then the whole frame edge to edge */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-grid { gap: calc(100vw * 84 / 390 + 16px); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-copy { padding-top: var(--mpb-band-y); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover .mpb-cover-title { --mpb-cover-size: clamp(30px, calc((100vw - 2 * var(--mpc-pad)) / 8.8), 104px); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-photo { min-height: 0; margin-inline: calc(-1 * var(--mpc-pad)); aspect-ratio: 3 / 2; }
	/* the drawing is 390 x 130 units, as wide as the screen; its y 84 is the photo's top edge (the photo is 3:2 and
	   lies over the rest), so its foot is 46 units under that edge */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-lines-capa .mpb-bundle-svg { bottom: calc(100vw * 2 / 3 - 100vw * 46 / 390); width: 100vw; height: calc(100vw * 130 / 390); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-lines-capa path { vector-effect: non-scaling-stroke; }
}
@media (max-width: 640px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-h1-rest { margin-top: 12px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-lead { margin-top: 20px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-cover-actions { margin-top: 28px; gap: 12px; }
}

/* ---------- index of resources (ground): seven row links, each with its numeral at 120px */
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-recursos-lead { margin-top: 24px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-rows { margin-top: 48px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-row {
	--mpb-tecnologias-num: clamp(88px, 8.4vw, 120px); --mpb-row-pad: 32px; --mpb-row-size: clamp(24px, 2.5vw, 36px);
	grid-template-columns: calc(var(--mpb-tecnologias-num) * 1.74) minmax(0, 1fr) var(--mpb-circle, 64px);
}
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-row .mpb-num { --mpb-num-size: var(--mpb-tecnologias-num); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-row .mpb-row-ctx { max-width: 760px; }
@media (max-width: 900px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-rows { margin-top: 40px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-row { --mpb-row-pad: 28px; --mpb-row-gap: 24px; }
}
@media (max-width: 640px) {
	/* the numeral and the circle on one line, the text under them */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-rows { margin-top: 32px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-row { --mpb-tecnologias-num: clamp(72px, 22vw, 96px); --mpb-row-pad: 24px; grid-template-columns: minmax(0, 1fr) 48px; grid-template-areas: "num circle" "text text"; row-gap: 18px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-row .mpb-num { grid-area: num; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-row .mpb-row-text { grid-area: text; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-row .mpb-circle { grid-area: circle; }
}

/* ---------- how a resource is chosen (cobalt): four pairs; the lines cross the empty bottom strip and go on, in
   cobalt, over the top padding of the next band */
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-escolha { padding-bottom: calc(200 * var(--mpb-tecnologias-u)); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-escolha-sub { max-width: 480px; margin-top: 28px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-pairs { --mpb-pair-col: clamp(180px, 18.3vw, 264px); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-escolha-actions { margin-top: 36px; }
/* the drawing is 1440 x 300 and its y 200 is the edge between the two bands (offsets scale with the drawing) */
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-sweep--a .mpb-bundle-svg { bottom: calc(-100 * var(--mpb-tecnologias-u)); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-sweep--b .mpb-bundle-svg { top: calc(-200 * var(--mpb-tecnologias-u)); }
@media (max-width: 900px) {
	/* stacked: a drawing as wide as the screen and 152px high, half in each band */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-escolha { padding-bottom: 116px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-uso { padding-top: 116px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-lines-escolha .mpb-bundle-svg { width: 100vw; height: 152px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-lines-escolha path { vector-effect: non-scaling-stroke; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-escolha-sub { max-width: 620px; margin-top: 20px; }
}

/* ---------- shock waves in use (ground): the head, then one large photo and two small ones, 12px apart */
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-uso-actions { margin-top: 24px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-mosaic { margin-top: 48px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tile { aspect-ratio: 3 / 2; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tile--main { aspect-ratio: 4 / 3; }
@media (min-width: 641px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tile { aspect-ratio: 444 / 264; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tile--main { aspect-ratio: 888 / 540; }
}
@media (min-width: 641px) and (max-width: 900px) {
	/* tablets: the large photo across, the two small ones side by side under it */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-mosaic-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-mosaic { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
	/* the large photo is exactly as tall as the two small ones and their gap */
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tile--main { aspect-ratio: auto; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tile--main img { position: absolute; inset: 0; }
}
/* the small tiles keep their plate on one line, so the applicator stays in sight */
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-mosaic-col .mpb-plate { max-width: 96%; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-mosaic-col .mpb-plate-label { font-size: clamp(15px, 1.25vw, 18px); white-space: nowrap; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-mosaic-col .mpb-plate-text { font-size: clamp(16px, 1.25vw, 18px); }
@media (max-width: 900px) { html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-mosaic { margin-top: 40px; } }

/* ---------- resources by tissue (tint): four ruled rows, label | sentence | one link */
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tecido-sub { margin-top: 24px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tissues { margin-top: 48px; border-top: 1.5px solid var(--mpb-line); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tissue { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 0 14px; border-bottom: 1px solid var(--mpb-hair); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tissue .mpb-subtitle { --mpb-subtitle-size: clamp(20px, 1.95vw, 28px); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-nowrap { white-space: nowrap; font-size: inherit; line-height: inherit; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tissue-link { display: inline-flex; align-items: center; gap: 14px; justify-self: start; padding: 11px 0; border-bottom: 0; }
@media (min-width: 901px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tissue { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); column-gap: var(--mpb-gap); align-items: start; padding: 32px 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tissue-link { justify-self: end; margin-top: -9px; text-align: right; }
}
@media (max-width: 900px) { html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-tissues { margin-top: 40px; } }

/* ---------- the rehabilitation room (ground): the cover's split, mirrored. The photo fills the left seven columns
   from the screen edge; its caption plate starts at the page gutter. */
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-reab-copy { display: flex; flex-direction: column; justify-content: center; padding-block: var(--mpb-band-y); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-reab-sub { margin-top: 28px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-reab-actions { margin-top: 36px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-reab-photo .mpb-plate { padding-left: var(--mpc-pad); }
@media (min-width: 901px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-reab-photo { --mpb-fig-min: calc(620 * var(--mpb-tecnologias-u)); }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-reab-photo .mpb-plate { max-width: 100%; padding-left: var(--mpb-edge); }
}
@media (max-width: 900px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-reab-photo { min-height: 0; margin-inline: calc(-1 * var(--mpc-pad)); aspect-ratio: 3 / 2; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-reab-copy { padding-block: 8px var(--mpb-band-y); }
}
@media (max-width: 640px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-reab-photo { aspect-ratio: 5 / 4; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-reab-copy { padding-top: 0; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-reab-sub { margin-top: 20px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-reab-actions { margin-top: 28px; }
}

/* ---------- questions and references (tint) */
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-faq-actions { margin-top: 32px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-refs { margin-top: 56px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-refs-list { margin-top: 14px; border-top: 1.5px solid var(--mpb-line); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-refs-list > li { border-bottom: 1px solid var(--mpb-hair); }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-ref { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 6px; border-bottom: 0; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-ref .mpc-ico { margin-top: 6px; }
html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-ref-text { padding-bottom: 16px; color: var(--mpb-text); font-size: 17px; line-height: 1.5; }
@media (max-width: 640px) {
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-faq-actions { margin-top: 24px; }
	html body:is(#mpc, .mpc-site).mpb-page .mpb-tecnologias .mpb-tecnologias-refs { margin-top: 40px; }
}