/*
 * Irradiada · Clínica (I1): fisiatria.com.br front page (WordPress page 1274), sections only.
 * Everything is scoped under .irr; the front-page chrome reset is scoped under body.irr-front.
 * Loaded only on the front page by mu-plugins/fisiatria-irradiada.php, after the shared
 * stylesheet mu-plugins/fisiatria-irradiada/irradiada-frame.css, which holds the tokens, the
 * reset, the browser surfaces, buttons, links, the header and the footer
 * (source: 03-ops/homepage-irradiada/sitewide/irradiada-frame.css).
 * Role colors: vermilion = the nerve route (black text only), cobalt = the physician, his
 * specialty and his credentials (white text), green = rehabilitation and function (black text),
 * amber = guides and articles (black text).
 * Since 2026-10-01 the page is a landing page for the physician: no alert section, the
 * treatments are a bento of 31 tiles in six families, the cobalt section is the physician,
 * and every secondary action is an outline button (.irr-btn--out, in the shared stylesheet).
 */

/* ---------- Front-page chrome reset (GeneratePress containers become full-bleed) ---------- */
html:has(> body.irr-front) {
  background: #070707;
  scrollbar-color: #929292 #070707;
}
html body.irr-front.home {
  margin: 0;
  background: #070707;
}
html body.irr-front #page,
html body.irr-front .site.grid-container,
html body.irr-front .site-content,
html body.irr-front .content-area,
html body.irr-front .site-main,
html body.irr-front .inside-article,
html body.irr-front .entry-content {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
  background: transparent;
  border: 0;
}
html body.irr-front .site-content {
  display: block;
}
html body.irr-front .site-main > article,
html body.irr-front article.page {
  margin: 0;
  padding: 0;
  background: transparent;
}
html body.irr-front .entry-content:not(:first-child) {
  margin-top: 0;
}

/* ---------- Layout primitives ---------- */
.irr .irr-sec {
  position: relative;
  overflow: hidden;
}
.irr .irr-rule {
  border-top: 3px solid currentColor;
}

/* Section labels are a margin column beside the heading from 768 px. Below 768 px there is
   no margin column, and a label stacked above the h2 would be an eyebrow, so it is removed:
   the section's own field, its rule and the h2's top margin mark the start of the section. */
.irr .irr-head .irr-label {
  display: none;
}
.irr .irr-head .irr-h2,
.irr .irr-head .irr-head__main {
  margin-top: 52px;
}
.irr .irr-h2 {
  font-size: var(--irr-fs-h2);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.irr .irr-head__main .irr-h2 {
  margin-top: 0;
}
.irr .irr-lede {
  margin-top: clamp(20px, 2.222vw, 32px);
  max-width: 760px;
  font-size: var(--irr-fs-lede);
  line-height: 1.45;
}

@media (min-width: 768px) {
  .irr .irr-head {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--irr-gap);
    align-items: start;
  }
  .irr .irr-head .irr-label {
    display: block;
    grid-column: 1;
    margin-top: calc(var(--irr-fs-h2) * 0.19);
  }
  .irr .irr-head .irr-h2,
  .irr .irr-head .irr-head__main {
    grid-column: 2 / 5;
    margin-top: 0;
  }
}
/* From 1280 px a head with a lede uses all four columns: the label in column 1, the h2 on
   columns 2 and 3, the lede in column 4, so the head reaches the right content edge like the
   rows under it. One column is a short measure, so the lede is set at Body size there (18 to
   20 px, about 30 to 40 characters a line) instead of Lede size, and its lines are balanced:
   "pretty" only moves a last line of one word shorter than a third of the column, which left
   "e nervo." and "pelo WhatsApp." alone at some widths. It hangs from the same first baseline
   as the label (16 px and 1.045 em are the measured distances from the top of each box to its
   first baseline: the label at 16 px and line-height 1.3, the lede at line-height 1.45; 0.21 em
   of the h2 is where the label hangs beside a heading at line-height 1.04).
   A head without a lede keeps its h2 on columns 2 to 4. */
@media (min-width: 1280px) {
  /* Headings of two and three lines: at line-height 1 a descender ended 5 to 8 px over the next
     line. 1.04 adds 0.02 em above the first line, so the label, the lede in column 4 and the
     button of Artigos, which hang from the heading's lines, move down by the same 0.02 em. */
  .irr .irr-h2 {
    line-height: 1.04;
  }
  .irr .irr-head .irr-label {
    margin-top: calc(var(--irr-fs-h2) * 0.21);
  }
  .irr .irr-head .irr-head__main {
    display: contents;
  }
  .irr .irr-head .irr-head__main .irr-h2 {
    grid-column: 2 / 4;
  }
  .irr .irr-head .irr-head__main .irr-lede {
    grid-column: 4;
    max-width: none;
    margin-top: calc(var(--irr-fs-h2) * 0.21 + 16px - var(--irr-fs-body) * 1.045);
    font-size: var(--irr-fs-body);
    text-wrap: balance;
  }
  /* The same holds for the two rows of three one-column items (O que é Fisiatria, Consulta):
     three to five short lines each, balanced, so none ends on one word. */
  .irr .irr-s2__items p,
  .irr .irr-s9__items p {
    text-wrap: balance;
  }
  /* The CRM stays on one line with its number. */
  .irr .irr-s9__crm {
    white-space: nowrap;
  }
}

/* ---------- Hero ---------- */
.irr .irr-hero {
  position: relative;
  overflow: hidden;
  background: var(--irr-black);
  color: var(--irr-white);
  padding: 0 0 var(--irr-hero-end);
}
.irr .irr-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "copy" "label" "proof";
}
/* The running line. From 768 px it opens with the physician's name and CRM (.irr-hero__who), so
   both stay in the first viewport now that the facts strip starts at or under the fold. On
   phones the first cell of the strip, right under this line, already reads "name · CRM", so
   the opening is not shown there. It is hidden from assistive technology in the markup: the
   strip states the same two facts under their term, once. */
.irr .irr-hero__label {
  grid-area: label;
  margin-top: var(--irr-hero-rule);
  padding-top: 12px;
  border-top: 1px solid var(--irr-white);
  color: var(--irr-gray);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}
.irr .irr-hero__who {
  display: none;
}
.irr .irr-hero__media {
  grid-area: media;
  display: grid;
  /* Phone: the ring column sets the height (twice its width, 177 px at 390). The band is kept
     short so the h1, the definition, the booking button and the physician line fit 390 x 844
     with 12 px under the header and 18 to 20 px at each seam of the copy. */
  grid-template-columns: 24% minmax(0, 1fr);
  align-items: center;
  margin-top: var(--irr-hero-top);
  margin-right: calc(-1 * var(--irr-bleed));
}
.irr .irr-rings--hero {
  width: 100%;
  height: auto;
  aspect-ratio: 152 / 304;
  color: var(--irr-white);
}
.irr .irr-hero__img {
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 7;
  object-fit: cover;
  object-position: 50% 50%;
}
.irr .irr-hero__copy {
  grid-area: copy;
  margin-top: 16px;
}
.irr .irr-h1 {
  font-size: var(--irr-fs-h1);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.irr .irr-hero__sub {
  margin-top: var(--irr-hero-field);
  max-width: 560px;
  font-size: clamp(18px, 1.389vw, 22px);
  line-height: 1.4;
}
/* Phone: the two buttons stack at full width. */
.irr .irr-hero__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: var(--irr-hero-actions);
}
.irr .irr-proof {
  grid-area: proof;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px var(--irr-gap);
  margin-top: 10px;
}
.irr .irr-proof dt {
  color: var(--irr-gray);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.irr .irr-proof dd {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.35;
}
.irr .irr-proof dd > * {
  display: block;
  font-weight: 400;
}
.irr .irr-proof dd > strong {
  font-weight: 700;
}
.irr .irr-proof__crm {
  white-space: nowrap;
}
/* The phone number is a line of 16 or 18 px text: its hit area is 12 px taller on each side
   (46 px on phones, 49 px from 768 px). The space it takes is unchanged. */
.irr .irr-proof a {
  position: relative;
  text-decoration: none;
}
.irr .irr-proof a::after {
  content: "";
  position: absolute;
  inset: -12px 0;
}
.irr .irr-proof a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
/* Phone: the physician line reads as one line, as in the approved phone comp. */
.irr .irr-proof__item--doctor {
  grid-column: 1 / -1;
}
.irr .irr-proof__item--doctor dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.irr .irr-proof__item--doctor dd {
  margin-top: 0;
}
.irr .irr-proof__item--doctor dd > strong,
.irr .irr-proof__item--doctor .irr-proof__crm {
  display: inline;
  font-weight: 700;
}
.irr .irr-proof__item--doctor .irr-proof__crm::before {
  content: "· ";
}
/* Phone: Formação takes the full row, so "Residência: ..." and "Doutorado: ..." each stay on one line. */
.irr .irr-proof__item:last-child {
  grid-column: 1 / -1;
}
/* Below 390 px a half column is narrower than the word "ESPECIALIDADES", so the strip is one column. */
@media (max-width: 389.98px) {
  .irr .irr-proof {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 359.98px) {
  /* Too narrow for "name · CRM" on one line: stack them instead of breaking "CRM-SP" at its hyphen. */
  .irr .irr-proof__item--doctor .irr-proof__crm {
    display: block;
  }
  .irr .irr-proof__item--doctor .irr-proof__crm::before {
    content: none;
  }
}

@media (min-width: 768px) {
  /* Air above the headline: the photograph and the h1's cap line start one hero step under the
     header (56 px at 1440 x 900, 64 px at 1647 x 971, 72 px at 1920 x 1080; 32 px on a short
     window). */
  .irr .irr-hero {
    padding-top: var(--irr-hero-top);
  }
  /* No line above the h1 (No-Eyebrow Rule): as on phones, the running line is the first, gray
     line of the strip under the hero rule, and the rule is its top border. */
  .irr .irr-hero__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "copy copy media media"
      "label label label label"
      "proof proof proof proof";
    column-gap: var(--irr-gap);
  }
  .irr .irr-hero__label {
    padding-top: 16px;
  }
  .irr .irr-hero__who {
    display: inline;
  }
  /* The taller of the copy column and this floor sets the row height. The first viewport holds
     the header, the headline, the definition, the two buttons beside the photograph, the
     hairline and the running line; the facts strip starts at or just under the fold. So the
     floor is the window height less the header (its padding and the 56 px bar), the space above
     the photograph, the space under it, and 58 px for the hairline, the running line and 19 px
     of field under it: 650 px at 1440 x 900, 702 px at 1647 x 971, 794 px at 1920 x 1080. It is
     never under 480 px, and never over 46vw, 800 px or 7.41 times the h1 (the ratio of 800 px
     to the 108 px h1), which keeps the field between the h1 and the definition under 1.75
     lines of the h1 on a tall window. Up to about 1400 px the copy is the taller of the two. */
  .irr .irr-hero {
    --irr-hero-floor: min(max(480px, 100vh - var(--irr-header-pad) - 56px - var(--irr-hero-top) - var(--irr-hero-rule) - 58px), 46vw, 800px, var(--irr-fs-h1) * 7.41);
  }
  .irr .irr-hero__media {
    position: relative;
    display: block;
    margin-top: 0;
    min-height: var(--irr-hero-floor);
  }
  .irr .irr-rings--hero {
    position: absolute;
    right: 100%;
    top: -2px;
    width: var(--irr-ring-w);
  }
  .irr .irr-hero__img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
  /* The h1 hangs from the photograph's top edge and the definition with the booking row stands on
     its bottom edge; any spare height opens between the two. */
  .irr .irr-hero__copy {
    display: flex;
    flex-direction: column;
    margin-top: 0;
  }
  /* The h1 is held to the width left of the rings (column minus the ring set, plus the gap the
     rings sit in) less 0.6 em, so its balanced lines stay 0.6 em or more clear of the outer
     ring. The negative margin is the distance from the line box to the cap line (Schibsted
     Grotesk 800 at line-height 0.96), so the capitals' top meets the photograph's top edge
     (exact at 88 px, within 1 px at the fluid sizes). */
  .irr .irr-h1 {
    max-width: calc(100% - var(--irr-ring-w) + var(--irr-gap) - 0.6em);
    margin-top: -0.13em;
  }
  /* The definition: 30 em (four lines from 1280 px), never closer than 32 px to the photograph
     (the column gap is narrower than that up to 1440 px), and never closer to the h1 than the
     hero field step. */
  .irr .irr-hero__sub {
    margin-top: auto;
    padding-top: var(--irr-hero-field);
    max-width: min(30em, 100% + var(--irr-gap) - 32px);
  }
  /* Two columns of copy are narrower than the two buttons side by side until 1360 px; until
     then they stack at one width, the width of the booking button. */
  .irr .irr-hero__actions {
    grid-template-columns: max-content;
    justify-content: start;
    gap: 12px;
  }
  .irr .irr-proof {
    margin-top: var(--irr-hero-strip);
    gap: 20px var(--irr-gap);
  }
  .irr .irr-proof dd {
    margin-top: 8px;
    font-size: 18px;
    line-height: 1.4;
  }
  .irr .irr-proof__item--doctor,
  .irr .irr-proof__item:last-child {
    grid-column: auto;
  }
  .irr .irr-proof__item--doctor dt {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .irr .irr-proof__item--doctor dd {
    margin-top: 8px;
  }
  .irr .irr-proof__item--doctor dd > strong,
  .irr .irr-proof__item--doctor .irr-proof__crm {
    display: block;
  }
  .irr .irr-proof__item--doctor .irr-proof__crm {
    font-weight: 400;
  }
  .irr .irr-proof__item--doctor .irr-proof__crm::before {
    content: none;
  }
}
@media (min-width: 1024px) {
  .irr .irr-proof {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1360px) {
  .irr .irr-hero__actions {
    grid-template-columns: repeat(2, max-content);
    gap: 16px;
  }
}
/* From 1600 px the first line of every value of the strip is one line. The longest,
   "Residência: Hospital das Clínicas, USP", is 336 px wide at 18 px and a column is 327 px at
   1600 and 342 px at 1680: up to there the values are set at 17 px (317 px), so the line keeps
   inside its column and the four columns keep their shared right edge. */
@media (min-width: 1600px) {
  .irr .irr-proof__item:last-child dd > strong {
    white-space: nowrap;
  }
}
@media (min-width: 1600px) and (max-width: 1679.98px) {
  .irr .irr-proof dd {
    font-size: 17px;
  }
}

/* Signature motion: the hero rings draw outward from the source, once, on load.
   Each ring unfurls from its outer point toward the photograph; inner rings first. */
@media (prefers-reduced-motion: no-preference) {
  .irr .irr-rings--hero circle {
    animation: irr-ring-draw 820ms var(--irr-ease-out) both;
  }
  .irr .irr-rings--hero circle:nth-child(2) { animation-delay: 28ms; }
  .irr .irr-rings--hero circle:nth-child(3) { animation-delay: 56ms; }
  .irr .irr-rings--hero circle:nth-child(4) { animation-delay: 84ms; }
  .irr .irr-rings--hero circle:nth-child(5) { animation-delay: 112ms; }
  .irr .irr-rings--hero circle:nth-child(6) { animation-delay: 140ms; }
  .irr .irr-rings--hero circle:nth-child(7) { animation-delay: 168ms; }
  .irr .irr-rings--hero circle:nth-child(8) { animation-delay: 196ms; }
  .irr .irr-rings--hero circle:nth-child(9) { animation-delay: 224ms; }
  .irr .irr-rings--hero circle:nth-child(10) { animation-delay: 252ms; }
  .irr .irr-rings--hero circle:nth-child(11) { animation-delay: 280ms; }
  .irr .irr-rings--hero circle:nth-child(12) { animation-delay: 308ms; }
  .irr .irr-rings--hero circle:nth-child(13) { animation-delay: 336ms; }
  .irr .irr-rings--hero circle:nth-child(14) { animation-delay: 364ms; }
  .irr .irr-rings--hero circle:nth-child(15) { animation-delay: 392ms; }
}
@keyframes irr-ring-draw {
  from {
    stroke-dasharray: 0 1;
    stroke-dashoffset: 0;
  }
  to {
    stroke-dasharray: 0.5 0.5;
    stroke-dashoffset: 0.25;
  }
}

/* ---------- Ring strokes ---------- */
.irr .irr-rings {
  pointer-events: none;
}
.irr .irr-rings circle {
  stroke: currentColor;
}
.irr .irr-rings .irr-st-w {
  stroke: var(--irr-white);
}
.irr .irr-rings .irr-st-amber {
  stroke: var(--irr-guides);
}
.irr .irr-rings .irr-st-alert {
  stroke: var(--irr-alert);
}
.irr .irr-rings .irr-st-green {
  stroke: var(--irr-function);
}
.irr .irr-rings .irr-st-cobalt {
  stroke: var(--irr-evidence);
}
.irr .irr-rings .irr-st-w circle {
  stroke: var(--irr-white);
}

/* ---------- Light sections ---------- */
.irr .irr-s2,
.irr .irr-s3,
.irr .irr-s4,
.irr .irr-s6 {
  --irr-focus: var(--irr-black);
  --irr-btn-hover-bg: var(--irr-black);
  --irr-btn-hover-fg: var(--irr-white);
  background: var(--irr-white);
  color: var(--irr-black);
}

/* ---------- S2 O que é fisiatria ---------- */
.irr .irr-s2 {
  padding: var(--irr-pad-top) 0 var(--irr-pad-bot);
}
.irr .irr-s2__corner {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(84px, 22vw, 120px);
  height: auto;
  color: var(--irr-evidence);
}
.irr .irr-s2__media {
  position: relative;
  margin-top: var(--irr-step-80);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.irr .irr-s2__photo {
  position: relative;
}
.irr .irr-s2__photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 624 / 440;
  object-fit: cover;
  object-position: 50% 40%;
}
.irr .irr-s2__rings {
  display: none;
}
.irr .irr-s2__lede {
  margin-inline: calc(-1 * var(--irr-bleed));
  padding: 36px var(--irr-bleed) 40px;
  background: var(--irr-evidence);
  color: var(--irr-white);
}
.irr .irr-s2__lede p {
  max-width: 560px;
  font-size: clamp(24px, 2.361vw, 38px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.01em;
}
.irr .irr-s2__items {
  margin-top: max(48px, var(--irr-step-80));
  display: grid;
  gap: 40px var(--irr-gap);
}
.irr .irr-s2__items li {
  padding-top: 24px;
  border-top: 3px solid var(--irr-black);
}
.irr .irr-s2__items h3,
.irr .irr-s9__items h3 {
  font-size: var(--irr-fs-h3-sm);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.irr .irr-s2__items p {
  margin-top: 16px;
  font-size: var(--irr-fs-body);
  line-height: 1.5;
}
/* Three outline buttons. Phone: stacked at full width. */
.irr .irr-s2__links {
  margin-top: var(--irr-step-64);
  display: grid;
  gap: 12px var(--irr-gap);
}
.irr .irr-s2__links .irr-btn {
  display: flex;
}
/* Below 360 px no label fits on one line, so all three take the optional break. */
@media (max-width: 359.98px) {
  .irr .irr-s2__links .irr-btn__br {
    display: inline;
  }
}
/* From 360 to 379 px the longest label is 4 px wider than the button's text box: less side
   padding keeps all three on one line and at one height. */
@media (min-width: 360px) and (max-width: 379.98px) {
  .irr .irr-s2__links .irr-btn {
    padding-inline: 14px;
  }
}

@media (min-width: 768px) {
  .irr .irr-s2__corner {
    display: none;
  }
  .irr .irr-s2__media {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--irr-gap);
  }
  .irr .irr-s2__photo {
    grid-column: 1 / 3;
  }
  /* The statement can be taller than the photograph's 624:440 frame (768 to about 960 px);
     the photograph then fills the row so both fields keep one bottom edge. */
  .irr .irr-s2__photo img {
    height: 100%;
    min-height: 0;
  }
  /* Cobalt rings radiate from the photograph's lower-left corner into the empty first column. */
  .irr .irr-s2__rings {
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 100%;
    width: calc(100% - var(--irr-gap));
    height: auto;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    color: var(--irr-evidence);
  }
  .irr .irr-s2__lede {
    grid-column: 3 / 5;
    margin-inline: 0 calc(-1 * var(--irr-bleed));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(28px, 3.333vw, 48px) var(--irr-bleed) clamp(32px, 3.611vw, 52px) clamp(24px, 3.333vw, 48px);
  }
  .irr .irr-s2__items,
  .irr .irr-s2__links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--irr-gap);
  }
  .irr .irr-s2__items > li,
  .irr .irr-s2__links > li {
    grid-column: 2 / 5;
  }
  /* Stacked at one width: the longest label on one line. */
  .irr .irr-s2__links .irr-btn {
    width: min(100%, 344px);
  }
}
/* From 768 to about 930 px the frame is taller than the photograph (see above) and the centred
   crop took up to 29.5 % of its width, ending at the physician's ear at the right edge. Here
   the crop is taken almost only from the left (the lamp), judged by eye at 768, 800, 834 and
   900 px: his head stays whole at the right edge and the spine model, with both hands, keeps
   about 12 px from the left edge at 768 px (at 100 % the model touched the edge). */
@media (min-width: 768px) and (max-width: 931.98px) {
  .irr .irr-s2__photo img {
    object-position: 92% 40%;
  }
}
@media (min-width: 1024px) {
  .irr .irr-s2__items > li:nth-child(1),
  .irr .irr-s2__links > li:nth-child(1) {
    grid-column: 2;
  }
  .irr .irr-s2__items > li:nth-child(2),
  .irr .irr-s2__links > li:nth-child(2) {
    grid-column: 3;
  }
  .irr .irr-s2__items > li:nth-child(3),
  .irr .irr-s2__links > li:nth-child(3) {
    grid-column: 4;
  }
  .irr .irr-s2__items > li,
  .irr .irr-s2__links > li {
    grid-row: 1;
  }
  /* One button under each item, as wide as its column. A column is narrower than the longest
     label, so every label is set on two fixed lines and the three buttons keep one height.
     The button is a row: the label flush left, the arrow at the right edge, centred on the
     button's height. */
  .irr .irr-s2__links .irr-btn {
    width: 100%;
    height: 100%;
    min-height: 76px;
    padding: 14px 16px 14px 18px;
    text-align: left;
  }
  .irr .irr-s2__links .irr-btn__label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-wrap: wrap;
  }
  .irr .irr-s2__links .irr-btn svg {
    flex: none;
    margin-left: 0;
  }
  .irr .irr-s2__links .irr-btn__br {
    display: inline;
  }
  /* Ruled items on the desktop grid: more space above the title than below it. */
  .irr .irr-s2__items li {
    padding-top: var(--irr-rule-pad);
  }
}
/* From 1024 to 1151 px a column is 210 to 237 px wide and "Quando procurar" is 155 px: the
   button gives up side padding so the label keeps its two lines beside the arrow. */
@media (min-width: 1024px) and (max-width: 1151.98px) {
  .irr .irr-s2__links .irr-btn {
    padding-inline: 10px;
  }
  .irr .irr-s2__links .irr-btn__label {
    gap: 8px;
  }
}

/* ---------- S3 Guias por tema ---------- */
.irr .irr-s3 {
  padding: 0 0 var(--irr-pad-bot);
}
.irr .irr-s3 > .irr-wrap,
.irr .irr-s4 > .irr-wrap {
  padding-top: var(--irr-step-152);
}
.irr .irr-routes {
  margin-top: var(--irr-step-96);
  display: grid;
  gap: 40px;
}
/* The whole row is the hit area of its link (the colour tile included), as an atlas item is:
   the heading's link is stretched over the row. A row holds one link. The stretched area
   stands at the level of the tile's name (z-index 1) and after it, so the name is part of the
   hit area too. */
.irr .irr-route {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.irr .irr-route__body h3 a::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
}
.irr .irr-route__tile {
  position: relative;
  overflow: hidden;
  height: 104px;
  background: var(--irr-tile);
  color: var(--irr-tile-ink);
}
.irr .irr-route__tile svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.irr .irr-route__label {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  padding: 14px 12px 10px 18px;
  background: var(--irr-tile);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.irr .irr-route--amber { --irr-tile: var(--irr-guides); --irr-tile-ink: var(--irr-black); }
.irr .irr-route--alert { --irr-tile: var(--irr-alert); --irr-tile-ink: var(--irr-black); }
.irr .irr-route--green { --irr-tile: var(--irr-function); --irr-tile-ink: var(--irr-black); }
.irr .irr-route--cobalt { --irr-tile: var(--irr-evidence); --irr-tile-ink: var(--irr-white); }
.irr .irr-route--black { --irr-tile: var(--irr-black); --irr-tile-ink: var(--irr-white); }
.irr .irr-route__body h3 {
  font-size: var(--irr-fs-h3-lg);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.irr .irr-route__body h3 a,
.irr .irr-atlas h3 a,
.irr .irr-guides h3 a {
  text-decoration: none;
}
.irr .irr-route__body h3 a:hover,
.irr .irr-atlas h3 a:hover,
.irr .irr-guides h3 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}
.irr .irr-route__body p {
  margin-top: 10px;
  font-size: var(--irr-fs-body);
  line-height: 1.5;
}

@media (min-width: 768px) {
  .irr .irr-routes {
    gap: 0;
  }
  .irr .irr-route {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--irr-gap);
  }
  .irr .irr-route__tile {
    height: auto;
    min-height: 168px;
  }
  .irr .irr-route__body {
    padding: 28px 0 32px;
    border-top: 1px solid var(--irr-black);
  }
  .irr .irr-route:last-child .irr-route__body {
    border-bottom: 1px solid var(--irr-black);
  }
}
@media (min-width: 1024px) {
  /* A row is as tall as its colour tile (296 x 192) or as its text, whichever is taller, and
     every row takes the height of the tallest. From about 1260 px the tile is the taller one
     and nothing here shows. From 1024 px to there the text in column 4 runs to four or five
     lines and is as tall as the tile or taller: the tile then stretches with the row (its ratio
     is a minimum, set by the ::before, not a fixed height), so the five tiles stay one unbroken
     column, and the text keeps 20 px above the next rule instead of standing on it. */
  .irr .irr-routes {
    grid-auto-rows: 1fr;
  }
  .irr .irr-route {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .irr .irr-route__tile {
    grid-column: 1;
    min-height: 0;
  }
  .irr .irr-route__tile::before {
    content: "";
    display: block;
    padding-top: calc(192 / 296 * 100%);
  }
  .irr .irr-route__label {
    padding: 18px 12px 10px 20px;
  }
  .irr .irr-route__body {
    grid-column: 2 / 5;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--irr-gap);
    align-content: start;
    padding: 30px 0 20px;
  }
  .irr .irr-route__body h3 {
    grid-column: 1 / 3;
  }
  .irr .irr-route__body p {
    grid-column: 3;
    margin-top: 8px;
  }
}

/* ---------- S4 Atlas ---------- */
.irr .irr-s4 {
  padding: 0 0 var(--irr-pad-bot);
}
.irr .irr-s4__photos {
  margin-top: var(--irr-step-88);
  display: grid;
  gap: 32px var(--irr-gap);
}
.irr .irr-s4__photos img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.irr .irr-s4__room img {
  aspect-ratio: 16 / 10;
}
.irr .irr-s4__rehab img {
  aspect-ratio: 4 / 3;
  object-position: 78% 50%;
}
.irr figcaption {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.4;
}
.irr .irr-s4 figcaption {
  color: var(--irr-ink-2);
}
.irr .irr-atlas {
  margin-top: max(56px, var(--irr-step-104));
  display: grid;
  gap: 40px var(--irr-gap);
}
.irr .irr-atlas li {
  position: relative;
  padding-top: 22px;
  border-top: 3px solid var(--irr-black);
}
.irr .irr-atlas h3 {
  font-size: clamp(24px, 2.083vw, 32px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.irr .irr-atlas h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.irr .irr-atlas__q {
  margin-top: 16px;
  font-size: clamp(18px, 1.389vw, 22px);
  font-weight: 700;
  line-height: 1.3;
}
.irr .irr-atlas p:not(.irr-atlas__q) {
  margin-top: 10px;
  color: var(--irr-ink-2);
  font-size: 18px;
  line-height: 1.5;
}
.irr .irr-atlas li:hover h3 a {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

@media (min-width: 768px) {
  .irr .irr-s4__photos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .irr .irr-s4__room {
    grid-column: 1 / 4;
  }
  .irr .irr-s4__rehab {
    grid-column: 4;
  }
  .irr .irr-s4__room img {
    aspect-ratio: 952 / 520;
  }
  .irr .irr-s4__rehab img {
    aspect-ratio: 296 / 520;
  }
  .irr .irr-atlas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 56px;
  }
}
@media (min-width: 1024px) {
  .irr .irr-atlas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: max(72px, var(--irr-step-72));
  }
  .irr .irr-atlas li {
    padding-top: var(--irr-rule-pad);
  }
}

/* ---------- Architecture band ---------- */
.irr .irr-band {
  background: var(--irr-black);
  color: var(--irr-white);
  padding-bottom: max(72px, var(--irr-step-120));
}
.irr .irr-band figcaption,
.irr .irr-s9 figcaption {
  color: var(--irr-gray);
}
.irr .irr-band__full img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 60%;
}
.irr .irr-band__full figcaption {
  margin-top: 14px;
}
.irr .irr-pair {
  margin-top: var(--irr-step-72);
  display: grid;
  gap: 32px var(--irr-gap);
}
.irr .irr-pair img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (min-width: 768px) {
  .irr .irr-band__full img {
    aspect-ratio: 16 / 9;
  }
  .irr .irr-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .irr .irr-band__full img {
    aspect-ratio: 1440 / 600;
  }
}

/* ---------- S6 Tratamentos: 31 tiles in six families ---------- */
/* A ruled bento. Each family is a box of cells divided by 1 px black hairlines (the box's black
   ground shows through a 1 px gap). Black and white carry the grid: an ordinary tile is white,
   three of the four featured tiles are black, the fourth opens on a photograph, and the
   Reabilitação family stands on green (function). Spans change by family, so no two families
   have the same rhythm.
   Each family is a native <details>. On phones the first two are open and the other four are
   one tap away; a closed family lists the names of its treatments under its own name, so every
   treatment can be read without a tap. From 768 px every family is shown open (see the
   @supports block below). */
.irr .irr-s6 {
  /* clip, not hidden: a scroll container here would stop the sticky family names. */
  overflow: clip;
  padding: var(--irr-pad-bot) 0;
}
.irr .irr-fams {
  margin-top: var(--irr-step-88);
}
.irr .irr-fam {
  border-top: 3px solid var(--irr-black);
}
.irr .irr-fam[open] {
  padding-bottom: 40px;
}
.irr .irr-fam__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  min-height: 80px;
  padding: 12px 0;
  list-style: none;
  cursor: pointer;
}
.irr .irr-fam__head::-webkit-details-marker {
  display: none;
}
.irr .irr-fam__head::marker {
  content: "";
}
.irr .irr-fam__name {
  font-size: var(--irr-fs-h3);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* The names of the family's treatments, under the family name while the family is closed. */
.irr .irr-fam__list {
  grid-column: 1 / -1;
  display: block;
  padding-bottom: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  text-wrap: pretty;
}
.irr .irr-fam[open] .irr-fam__list {
  display: none;
}
/* The toggle is drawn like the menu toggle: a 48 px square with a 2 px border. */
.irr .irr-fam__chev {
  grid-column: 2;
  grid-row: 1;
  width: 48px;
  height: 48px;
  padding: 10px;
  border: 2px solid var(--irr-black);
}
.irr .irr-fam[open] .irr-fam__chev {
  transform: rotate(180deg);
}
.irr .irr-fam__head:hover .irr-fam__chev {
  background: var(--irr-black);
  color: var(--irr-white);
}

.irr .irr-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  border: 1px solid var(--irr-black);
  background: var(--irr-black);
}
.irr .irr-tile {
  position: relative;
  padding: 20px 18px 24px;
  background: var(--irr-white);
}
.irr .irr-tile h4 {
  font-size: clamp(22px, 1.597vw, 24px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* Names are balanced; lines are set with "pretty", which only keeps the last line from ending
   on a single word. Plain wrapping leaves one-word last lines in a third of the tiles. */
.irr .irr-tile p {
  margin-top: 8px;
  font-size: var(--irr-fs-body);
  line-height: 1.45;
  text-wrap: pretty;
}

/* Featured tiles: black field, white text, a larger name and a lede-sized line. */
.irr .irr-tile--feat {
  padding: 26px 18px 30px;
  background: var(--irr-black);
  color: var(--irr-white);
}
.irr .irr-tile--feat h4,
.irr .irr-tile--photo h4 {
  font-size: var(--irr-fs-h3-lg);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.irr .irr-tile--poster h4 {
  font-size: var(--irr-fs-h3-xl);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.irr .irr-tile--feat p,
.irr .irr-tile--photo p {
  margin-top: 14px;
  max-width: 30em;
  font-size: var(--irr-fs-lede);
}

/* Acupuntura médica: the photograph is the tile's field; the text stands beside or under it on
   white, never on the photograph. */
.irr .irr-tile--photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  padding: 0;
  background: var(--irr-black);
}
.irr .irr-tile__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 24% 50%;
}
.irr .irr-tile--photo .irr-tile__body {
  padding: 24px 18px 28px;
  background: var(--irr-white);
}

/* Agulhamento seco: from 1024 px, where the tile is two rows tall, a ring set radiates from its
   lower right corner. Below that the tile is one row of text and carries no rings. */
.irr .irr-tile__corner {
  display: none;
}

/* Ondas de choque: a ring set radiates from the tile's right edge, as the pulses do from the
   applicator. Phone: a ring band above the text. The rings never run under the text. */
.irr .irr-tile--rings {
  padding: 0;
}
.irr .irr-tile__rings {
  width: 100%;
  height: 96px;
  color: var(--irr-white);
}
.irr .irr-tile--rings .irr-tile__body {
  padding: 22px 18px 30px;
}

/* Reabilitação: the function field. */
.irr .irr-fam--reabilitacao .irr-bento {
  --irr-sel-bg: var(--irr-black);
  --irr-sel-fg: var(--irr-function);
}
.irr .irr-fam--reabilitacao .irr-tile {
  background: var(--irr-function);
}
/* Below 768 px the whole family stands on the field, closed or open, and the field bleeds to
   the viewport edges; its 3 px rule stays on the grid. The field's bottom edge closes the list. */
@media (max-width: 767.98px) {
  .irr .irr-fam--reabilitacao {
    --irr-sel-bg: var(--irr-black);
    --irr-sel-fg: var(--irr-function);
    margin-inline: calc(-1 * var(--irr-bleed));
    padding-inline: var(--irr-bleed);
    border-top: 0;
    background: var(--irr-function);
  }
  .irr .irr-fam--reabilitacao .irr-fam__head {
    border-top: 3px solid var(--irr-black);
  }
  .irr .irr-fam--reabilitacao:not([open]) {
    padding-bottom: 16px;
  }
}

/* Booking band: the last and widest block of the grid. */
.irr .irr-book {
  --irr-focus: var(--irr-guides);
  margin-top: max(40px, var(--irr-step-80));
  display: grid;
  gap: 24px var(--irr-gap);
  padding: 28px 18px 24px;
  background: var(--irr-black);
  color: var(--irr-white);
}
/* The line breaks before and after the physician's name, never inside it. The first break is
   for a narrow column only. */
.irr .irr-book__line {
  font-size: var(--irr-fs-h3);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: wrap;
}
.irr .irr-book__actions {
  display: grid;
  gap: 8px;
}
.irr .irr-book__tel {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 24px;
  font-weight: 800;
  text-decoration: none;
}
.irr .irr-book__tel:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Two columns. The photograph tile, the featured tiles and the odd tile of a family take the
   full row. */
@media (min-width: 600px) {
  .irr .irr-tile {
    padding: 22px 22px 26px;
  }
  .irr .irr-tile--feat {
    padding: 28px 22px 32px;
  }
  .irr .irr-tile--photo,
  .irr .irr-tile--rings {
    padding: 0;
  }
  .irr .irr-tile--photo .irr-tile__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px 22px 32px;
  }
  /* The ring set fills the right 44% of the tile; the text keeps to the left 56%. */
  .irr .irr-tile--rings {
    display: flex;
    flex-direction: column;
  }
  .irr .irr-tile__rings {
    position: absolute;
    top: 0;
    right: 0;
    width: 44%;
    height: 100%;
  }
  .irr .irr-tile--rings .irr-tile__body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 56%;
    padding: 28px 22px 32px;
  }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .irr .irr-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .irr .irr-tile--photo,
  .irr .irr-tile--feat,
  .irr .irr-tile--pair {
    grid-column: 1 / -1;
  }
  /* Photograph on the left half at the full height of the tile, its text on the right half. */
  .irr .irr-tile--photo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 300px;
  }
  .irr .irr-tile__img {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(50% - 0.5px);
    height: 100%;
    aspect-ratio: auto;
  }
  .irr .irr-tile--photo .irr-tile__body {
    grid-column: 2;
  }
}
@media (min-width: 768px) {
  .irr .irr-fam + .irr-fam {
    margin-top: max(48px, var(--irr-step-80));
  }
  .irr .irr-fam[open] {
    padding-bottom: 0;
  }
  .irr .irr-book {
    padding: clamp(32px, 3.889vw, 56px);
  }
  .irr .irr-book__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
  }
}
/* From 768 to 1023 px the line has the full width of the band, and from 1360 px its column
   holds "Consulta com o Dr. Marcus Yu Bin Pai," on one line. */
@media (min-width: 768px) and (max-width: 1023.98px), (min-width: 1360px) {
  .irr .irr-book__br--a {
    display: none;
  }
}
@media (max-width: 359.98px) {
  .irr .irr-book {
    padding-inline: 12px;
  }
}
/* From 360 to 379 px two labels are a few pixels wider than their button's text box and set on
   two lines (a taller button than every other one): "Agendar pelo WhatsApp" inside the booking
   band, which has its own side padding, and "Conhecer o Colégio Médico" with its arrow. Less
   side padding keeps both on one line, as the relief below 360 px does for the other buttons. */
@media (min-width: 360px) and (max-width: 379.98px) {
  .irr .irr-book .irr-btn--solid {
    padding-inline: 28px;
  }
  .irr .irr-sources .irr-btn {
    padding-inline: 20px;
  }
}
/* Three columns on a six-track grid: a tile is a third, a wide tile is a half, the featured
   tiles span two thirds, and two of them are two rows tall. */
@media (min-width: 1024px) {
  .irr .irr-bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  /* Padding follows the tile: 24 to 32 px in an ordinary tile, 32 to 40 px in a featured one
     (tokens in the shared stylesheet). The name stands 12 px over its line, and the line keeps
     18/27 px at every desktop width (about 33 characters in a third of the grid); featured
     lines keep Lede size. A line in an ordinary tile is three to five short lines in one
     column: balanced, like the one-column texts of the section heads, so none ends on one
     word ("pretty" leaves a long last word alone: "contratura.", "escoliose.", "muscular.").
     Featured lines keep "pretty", which breaks them at the sentence. */
  .irr .irr-tile {
    grid-column: span 2;
    padding: var(--irr-tile-pad) var(--irr-tile-pad-x) var(--irr-tile-pad-end);
  }
  .irr .irr-tile p {
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.5;
    text-wrap: balance;
  }
  .irr .irr-tile--half {
    grid-column: span 3;
  }
  .irr .irr-tile--feat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--irr-tile-pad-lg) var(--irr-tile-pad-lg) var(--irr-tile-pad-lg-end);
  }
  .irr .irr-tile--feat p,
  .irr .irr-tile--photo p {
    margin-top: 24px;
    font-size: var(--irr-fs-lede);
    line-height: 1.45;
    text-wrap: pretty;
  }
  /* Photograph on two thirds, its text on the last third. The photograph's 3:2 frame sets the
     row; if the text is taller, the photograph fills the row. */
  .irr .irr-tile--photo {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    padding: 0;
  }
  .irr .irr-tile__img {
    height: auto;
    min-height: 100%;
    aspect-ratio: 3 / 2;
  }
  .irr .irr-tile--photo .irr-tile__body {
    padding: var(--irr-tile-pad-lg) var(--irr-tile-pad-lg) var(--irr-tile-pad-lg-end);
  }
  /* Agulhamento seco: two thirds wide and two rows tall, beside two ordinary tiles. The ring
     set keeps to the right 40% of the tile and below the name; the line keeps to the left 56%. */
  .irr .irr-tile--poster {
    grid-column: 3 / 7;
    grid-row: 2 / span 2;
  }
  .irr .irr-tile--poster p {
    max-width: 56%;
  }
  .irr .irr-tile__corner {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40%;
    height: calc(100% - 132px);
    color: var(--irr-white);
  }
  .irr .irr-tile--banner {
    grid-column: span 4;
  }
  /* Ondas de choque: two thirds wide, beside the laser tile. */
  .irr .irr-tile--rings {
    grid-column: span 4;
    padding: 0;
  }
  .irr .irr-tile--rings .irr-tile__body {
    padding: var(--irr-tile-pad-lg) var(--irr-tile-pad-lg) var(--irr-tile-pad-lg-end);
  }
  .irr .irr-book {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* Every family open from 768 px. A closed <details> hides its content with content-visibility on
   ::details-content; showing it again keeps the phone's native toggle and needs no script. The
   family name is then a plain heading: the summary is taken out of the pointer and keyboard
   order (visibility: hidden) and only the heading inside it stays visible, so there is no
   focus stop that toggles nothing. A browser without ::details-content keeps the toggle at
   every width, so every family can still be opened. */
@supports selector(::details-content) {
  @media (min-width: 768px) {
    .irr .irr-fam::details-content {
      content-visibility: visible;
    }
    .irr .irr-fam__head {
      min-height: 0;
      padding: 20px 0 24px;
      visibility: hidden;
      pointer-events: none;
      cursor: default;
    }
    .irr .irr-fam__name {
      visibility: visible;
    }
    .irr .irr-fam__chev,
    .irr .irr-fam__list {
      display: none;
    }
  }
  /* The family name moves to the margin column. */
  @media (min-width: 1280px) {
    .irr .irr-fam {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: var(--irr-gap);
      align-items: start;
    }
    .irr .irr-fam__head {
      grid-column: 1;
      padding: 22px 0 24px;
    }
    .irr .irr-fam::details-content {
      grid-column: 2 / 5;
    }
    /* The family's 3 px rule is the top edge of its box. */
    .irr .irr-bento {
      border-top: 0;
    }
  }
  /* The name stays in view while its tiles scroll past. A position that follows the scroll is
     left out when the reader asks for reduced motion. */
  @media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
    .irr .irr-fam__head {
      position: sticky;
      top: 0;
    }
  }
}

/* ---------- S7 Dr. Marcus Yu Bin Pai (cobalt) ---------- */
.irr .irr-s7 {
  --irr-btn-hover-bg: var(--irr-white);
  --irr-btn-hover-fg: var(--irr-evidence);
  background: var(--irr-evidence);
  color: var(--irr-white);
  padding: var(--irr-pad-bot) 0 calc(clamp(150px, 25vw, 360px) + 32px);
}
.irr .irr-s7__rings {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(150px, 25vw, 360px);
  height: auto;
  color: var(--irr-white);
}
.irr .irr-s7 .irr-lede {
  max-width: 700px;
}
/* Three ruled rows: title, description and the row's button. */
.irr .irr-sources {
  position: relative;
  margin-top: max(40px, var(--irr-step-80));
  border-bottom: 1px solid var(--irr-white);
}
.irr .irr-sources li {
  display: grid;
  gap: 12px var(--irr-gap);
  padding: 24px 0 32px;
  border-top: 1px solid var(--irr-white);
}
.irr .irr-sources li:first-child {
  border-top-width: 3px;
}
.irr .irr-sources__t {
  font-size: var(--irr-fs-h3);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.irr .irr-sources__d {
  max-width: 34em;
  font-size: var(--irr-fs-body);
  line-height: 1.5;
}
/* Phone: the button takes the full width of the row. */
.irr .irr-sources .irr-btn {
  margin-top: 12px;
}
/* The section closes with the booking action under the last rule. */
.irr .irr-s7__book {
  position: relative;
  margin-top: 32px;
}
/* From 1280 px the physician's name keeps one line across columns 2 to 4, and the lede stands
   under it on columns 3 and 4, on the same left edge as the descriptions of the rows below
   (the name is the title of the first row, the lede its description). */
@media (min-width: 1280px) {
  .irr .irr-s7 .irr-head .irr-head__main .irr-h2 {
    grid-column: 2 / 5;
  }
  .irr .irr-s7 .irr-head .irr-head__main .irr-lede {
    grid-column: 3 / 5;
    max-width: 36em;
    margin-top: clamp(20px, 2.222vw, 32px);
    font-size: var(--irr-fs-lede);
    text-wrap: pretty;
  }
}
/* Below 768 px there is no margin column: the CRM stands as a line after the lede, never above
   the heading. */
@media (max-width: 767.98px) {
  .irr .irr-s7 .irr-head {
    display: flex;
    flex-direction: column;
  }
  .irr .irr-s7 .irr-head .irr-label {
    display: block;
    order: 2;
    margin-top: 20px;
  }
}
@media (min-width: 768px) {
  .irr .irr-s7 {
    padding-bottom: var(--irr-pad-bot-lg);
  }
  .irr .irr-sources,
  .irr .irr-s7__book {
    margin-left: calc((100% - 3 * var(--irr-gap)) / 4 + var(--irr-gap));
  }
  /* 64 px at 1440 (40 px at 768, as before): the booking row is a block of its own under the
     last rule, at the smallest block step of the page. */
  .irr .irr-s7__book {
    margin-top: var(--irr-step-64);
  }
  .irr .irr-sources .irr-btn {
    justify-self: start;
  }
}
@media (min-width: 1024px) {
  .irr .irr-sources li {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    padding: var(--irr-row-pad) 0 var(--irr-row-pad-end);
  }
  .irr .irr-sources__t {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .irr .irr-sources__d,
  .irr .irr-sources .irr-btn {
    grid-column: 2 / 4;
  }
}

/* ---------- S8 Artigos (amber: guides) ---------- */
.irr .irr-s8 {
  --irr-focus: var(--irr-black);
  --irr-sel-bg: var(--irr-black);
  --irr-sel-fg: var(--irr-guides);
  --irr-btn-hover-bg: var(--irr-black);
  --irr-btn-hover-fg: var(--irr-guides);
  background: var(--irr-guides);
  color: var(--irr-black);
  /* Phone: the section ends one ring set below the full-width button, so the corner rings
     never reach into it. */
  padding: var(--irr-pad-bot) 0 calc(clamp(150px, 22.222vw, 320px) + 24px);
}
.irr .irr-s8__rings {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(150px, 22.222vw, 320px);
  height: auto;
  color: var(--irr-black);
}
.irr .irr-s8__body {
  position: relative;
  margin-top: var(--irr-step-88);
  display: grid;
  gap: 48px var(--irr-gap);
}
.irr .irr-s8__book img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 55%;
}
.irr .irr-guides {
  display: grid;
  gap: 40px var(--irr-gap);
}
/* The whole entry is the hit area of its title's link. An entry holds one link. */
.irr .irr-guides li {
  position: relative;
  padding-top: 22px;
  border-top: 2px solid var(--irr-black);
}
.irr .irr-guides h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.irr .irr-guides h3 {
  font-size: clamp(22px, 1.597vw, 24px);
  font-weight: 800;
  line-height: 1.32;
}
.irr .irr-guides p {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.5;
}
.irr .irr-guides .irr-tag {
  margin-top: 18px;
  font-size: var(--irr-fs-label);
  line-height: 1.3;
}
/* Phone: the button takes the full width. */
.irr .irr-more {
  display: flex;
  margin-top: 40px;
}
/* The same button stands in the head from 1280 px (see below); until then it is not shown. */
.irr .irr-head__more {
  display: none;
}
@media (min-width: 768px) {
  .irr .irr-s8 {
    padding-bottom: var(--irr-pad-bot-lg);
  }
  .irr .irr-s8__body {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }
  .irr .irr-s8__book img {
    aspect-ratio: 296 / 444;
  }
  .irr .irr-s8__list {
    grid-column: 2 / 5;
  }
  .irr .irr-more {
    display: inline-flex;
  }
  .irr .irr-guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 48px;
  }
}
@media (min-width: 1024px) {
  .irr .irr-guides li {
    padding-top: var(--irr-rule-pad);
  }
}
/* From 1280 px the head uses all four columns: the h2 on columns 2 and 3 and the button
   "Ver todos os artigos" in column 4, flush left on the column, its bottom edge on the baseline
   of the heading's last line (0.17 em above the bottom of the h2's box at line-height 1.04). The
   button under the list is not shown here; the markup carries both so the keyboard order is the
   drawn order at every width. The h2 may use the gap beside it: "artrose e tendinite" is as
   wide as two columns to within 2 px. As on phones, the section ends one ring set below the
   list, so the box of the corner rings never reaches the last row of articles (about the depth
   the section had with the button under the list). */
@media (min-width: 1280px) {
  .irr .irr-guides {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 56px;
  }
  .irr .irr-s8 .irr-head .irr-h2 {
    grid-column: 2 / 4;
    margin-right: calc(-1 * var(--irr-gap));
  }
  .irr .irr-head__more {
    display: inline-flex;
    grid-column: 4;
    align-self: end;
    justify-self: start;
    margin-bottom: calc(var(--irr-fs-h2) * 0.17);
  }
  .irr .irr-more {
    display: none;
  }
  .irr .irr-s8 {
    padding-bottom: calc(clamp(150px, 22.222vw, 320px) + 24px);
  }
}

/* ---------- S9 Consulta ---------- */
.irr .irr-s9 {
  background: var(--irr-black);
  color: var(--irr-white);
  padding: var(--irr-pad-bot) 0 0;
}
.irr .irr-s9__row {
  margin-top: var(--irr-step-104);
  display: grid;
  gap: 40px var(--irr-gap);
}
.irr .irr-s9__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 55% 60%;
}
.irr .irr-s9__items {
  display: grid;
  gap: 32px var(--irr-gap);
}
.irr .irr-s9__items li {
  padding-top: 22px;
  border-top: 1px solid var(--irr-white);
}
.irr .irr-s9__items p {
  margin-top: 12px;
  font-size: var(--irr-fs-body);
  line-height: 1.5;
}
.irr .irr-s9__events {
  margin-top: var(--irr-step-120);
}
/* Both event photographs are 3:2 in a 3:2 frame (.irr-pair img), centred: the whole picture is
   shown and nobody is cut. */
.irr .irr-s9__cta {
  position: relative;
  overflow: hidden;
  /* 600 px at 1440; the band keeps its 12:5 frame up to 1920 px, so the four colour rings stay
     whole circles on a large window. */
  height: min(800px, clamp(480px, 41.667vw, 600px) + var(--irr-over) * 0.41667);
  margin-top: var(--irr-step-136);
}
.irr .irr-s9__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--irr-white);
}
/* The booking button, the phone and the profile button stand inside the innermost ring. The two
   buttons share the width of the booking button, so the cluster is one block at every width. */
.irr .irr-s9__cluster {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: max-content;
  justify-content: center;
  align-content: center;
  gap: 12px;
  text-align: center;
}
.irr .irr-s9__tel {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: clamp(26px, 2.222vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.irr .irr-s9__tel:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
@media (min-width: 768px) {
  .irr .irr-s9__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }
  .irr .irr-s9__photo img {
    aspect-ratio: 1;
  }
  .irr .irr-s9__items {
    grid-column: 2 / 5;
  }
}
@media (min-width: 1024px) {
  .irr .irr-s9__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .irr .irr-s9__items li {
    padding-top: var(--irr-rule-pad);
  }
  .irr .irr-s9__cluster {
    gap: 16px;
  }
}

/* ---------- Large desktop windows (past 1440 px) ---------- */
/* The content grows to 1680 px, and the type and the spacing scale grow with it (tokens in the
   shared stylesheet; the hero's h1, its seams and the photograph's floor are set there and in
   the Hero block). These rules keep each composition whole in the wider frame. Nothing here
   applies at 1440 px or below. */
@media (min-width: 1441px) {
  /* The width sets the h1 (--irr-fs-h1, 108 px at most). On a short, wide window the h1 gives
     way before the first viewport does: four lines of the h1 are 3.71 em, and the definition
     (four lines, 124 px), the button row (56 px) and the two seams around the definition take
     the rest of the photograph's floor. Never under 88 px, its size at 1440 px. At 1647 x 971
     and 1920 x 1080 the width term is the smaller one, so the size is 96.6 and 108 px. */
  .irr .irr-h1 {
    font-size: min(var(--irr-fs-h1), max(88px, (var(--irr-hero-floor) - var(--irr-hero-field) - var(--irr-hero-actions) - 180px) / 3.71));
  }
  /* The statement keeps its 16.5 em measure as its size grows. */
  .irr .irr-s2__lede p {
    max-width: 16.5em;
  }
  /* Atlas photographs: the room sets the row; the rehabilitation photograph fills the same
     height. With a 40 px gap the two 520-high frames no longer share one height by ratio alone. */
  .irr .irr-s4__rehab {
    display: flex;
    flex-direction: column;
  }
  .irr .irr-s4__rehab img {
    flex: 1 1 0;
    height: 0;
    min-height: 0;
    aspect-ratio: auto;
  }
  /* Consulta: a column is wider than the three items are tall, so the podium photograph is 4:3
     here (a square would leave the items row half empty below the text). */
  .irr .irr-s9__photo img {
    aspect-ratio: 4 / 3;
  }
}
/* From 1680 px a column holds the longest of the three labels under "O que é Fisiatria" on one
   line beside its arrow (322 px with the padding; a column is 345 px here), so the fixed break
   goes and the three buttons are ordinary rows, 64 px tall. */
@media (min-width: 1680px) {
  .irr .irr-s2__links .irr-btn {
    min-height: 64px;
  }
  .irr .irr-s2__links .irr-btn__br {
    display: none;
  }
}
/* Past 1920 px the closing ring set stays 1920 px wide, centred on the button. */
@media (min-width: 1921px) {
  .irr .irr-s9__rings {
    left: calc(50% - 960px);
    right: auto;
    width: 1920px;
  }
}