/*
 * Irradiada · Clínica: shared system and site frame (fisiatria.com.br).
 * Tokens, reset, browser surfaces, buttons, links, the header and the footer. Everything is scoped
 * under .irr, so nothing here styles the old page bodies (two rules stand outside the scope, see
 * "Site frame chrome": one hides the theme's empty footer container, the other takes the page
 * under the open menu panel out of the focus order). The header and the footer are printed
 * on every page by mu-plugins/fisiatria-irradiada.php, each in its own .irr.irr-frame wrapper
 * outside the page body. The homepage body is a third .irr root; its sections are styled by
 * mu-plugins/fisiatria-home/irradiada-home.css, which loads after this file.
 * 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; the token keeps its first name, --irr-evidence),
 * green = rehabilitation and function (black text), amber = guides and articles (black text).
 */

/* ---------- Site frame chrome (the two rules outside .irr) ---------- */
/* GeneratePress still prints its footer container after its footer callbacks are removed. */
html body.irr-framed .site-footer:not(:has(*)) {
  display: none;
}
/* While the menu is open (below 1280 px) its panel covers the page. Everything under it leaves
   the focus order, the accessibility tree and the page length: every element that follows the
   header frame in the body, which is the page body (#page), the footer frame and, on the old
   pages, the blocks the theme prints between the header and #page (page heroes, the route
   selector of Artigos). Before this rule the Tab key went on from the panel's phone number to
   links of the page hidden behind the panel (WCAG 2.4.11, Focus Not Obscured).
   #page is skipped with content-visibility: hidden, which keeps it alive, so nothing in it
   restarts when the menu closes (display: none replays the hero's ring drawing on every
   close). A browser without content-visibility takes display: none there too. A browser
   without :has() keeps the earlier behaviour. Closed, the menu changes nothing here. */
@media (max-width: 1279.98px) {
  html body.irr-framed:has(.irr-frame--header .irr-menu[open]) > .irr-frame--header ~ :not(#page, #wpadminbar) {
    display: none;
  }
  @supports (content-visibility: hidden) {
    html body.irr-framed:has(.irr-frame--header .irr-menu[open]) > #page {
      content-visibility: hidden;
    }
  }
  @supports not (content-visibility: hidden) {
    html body.irr-framed:has(.irr-frame--header .irr-menu[open]) > #page {
      display: none;
    }
  }
}

/* ---------- Tokens ---------- */
.irr {
  --irr-black: #070707;
  --irr-white: #fafafa;
  --irr-gray: #929292;
  --irr-ink-2: #4d4d4d;
  --irr-alert: #ed4423;
  --irr-evidence: #1d54c1;
  --irr-function: #42c070;
  --irr-guides: #fcba43;
  --irr-press: #dcdcdc;

  --irr-font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Content width: the window minus two gutters, up to --irr-max. Up to 1440 px every value
     below is exactly what it was while the content stopped at 1280 px. Past 1440 px the gutter,
     the column gap, the type and the spacing keep growing with the window, so a large desktop
     window is used instead of leaving a band on each side: the gap reaches 40 px at 1800 px, and
     the gutter 120 px at 1920 px, where the content reaches its 1680 px (97 px each side at 1647,
     104 px at 1728; there is no plateau on the way). --irr-over is the width of the window past
     1440 px; a value written min(ceiling, clamp(...) + --irr-over * rate) is the old clamp up to
     1440 px and grows on from there to its new ceiling. */
  --irr-over: max(0px, 100vw - 1440px);
  --irr-max: 1680px;
  --irr-gutter: min(120px, clamp(16px, 5.556vw, 80px) + var(--irr-over) * 0.0833);
  --irr-gap: clamp(16px, 2.222vw, 40px);
  --irr-vw: 100vw;
  --irr-bleed: max(var(--irr-gutter), (var(--irr-vw) - var(--irr-max)) / 2);

  /* Type ramp. At 1440 px the sizes are 88, 72, 22, 19, 52, 40, 32 and 26 px, as before; the new
     ceilings (80, 22, 20, 56, 44, 36 and 28 px) are reached between 1516 and 1620 px. The display
     size grows more slowly past 1440 px, to 108 px at 1920 px (96.6 px at 1647, 100 px at 1728):
     it is held one step under its column, so the longest line of the h1 stays 0.6 em or more
     clear of the hero rings and the hero keeps its air. Reading text never passes 22 px. */
  --irr-fs-h1: min(108px, clamp(40px, 6.111vw, 88px) + var(--irr-over) * 0.04167);
  --irr-fs-h2: min(80px, clamp(32px, 5vw, 72px) + var(--irr-over) * 0.05);
  --irr-fs-lede: clamp(19px, 1.528vw, 22px);
  --irr-fs-body: min(20px, clamp(18px, 1.32vw, 19px) + var(--irr-over) * 0.0132);
  --irr-fs-h3-xl: min(56px, clamp(34px, 3.611vw, 52px) + var(--irr-over) * 0.03611);
  --irr-fs-h3-lg: min(44px, clamp(26px, 2.778vw, 40px) + var(--irr-over) * 0.02778);
  --irr-fs-h3: min(36px, clamp(24px, 2.222vw, 32px) + var(--irr-over) * 0.02222);
  --irr-fs-h3-sm: min(28px, clamp(22px, 1.806vw, 26px) + var(--irr-over) * 0.01806);
  /* Uppercase labels, tags and table terms. 16 px everywhere, so the dark-surface floor holds. */
  --irr-fs-label: 16px;

  /* Spacing scale. Space follows type: every value here is what it was up to 1440 px and keeps
     growing past it at its own vw rate, to 1.111 times its 1440 value at about 1600 px, where
     the h2 reaches its 80 px (72 x 1.111). Three speeds: 8 to 16 px inside a group (literals in
     the component rules), the component steps below between the groups of one component, and
     the section paddings between sections.

     Section paddings: 168, 176 and 192 px at 1440; 187, 196 and 213 px from 1600. */
  --irr-pad-top: min(187px, clamp(72px, 11.67vw, 168px) + var(--irr-over) * 0.1167);
  --irr-pad-bot: min(196px, clamp(80px, 12.22vw, 176px) + var(--irr-over) * 0.1222);
  --irr-pad-bot-lg: min(213px, clamp(88px, 13.33vw, 192px) + var(--irr-over) * 0.1333);
  /* Header: the space above the bar. 32 px at 1440, 36 px from 1620. The standalone bar of the
     other pages sets its own, smaller value (see Header). */
  --irr-header-pad: min(36px, clamp(12px, 2.222vw, 32px) + var(--irr-over) * 0.02222);

  /* Block steps: from a section head to its first block, and between the blocks of one section.
     Each is named by its value at 1440 px; from about 1600 px they are 71, 80, 89, 98, 107, 116,
     133, 151 and 169 px. The floor in each clamp is the smallest one the page uses on phones; a
     rule that needs a larger floor writes max(floor, token). */
  --irr-step-64: min(71px, clamp(40px, 4.444vw, 64px) + var(--irr-over) * 0.04444);
  --irr-step-72: min(80px, clamp(48px, 5vw, 72px) + var(--irr-over) * 0.05);
  --irr-step-80: min(89px, clamp(36px, 5.556vw, 80px) + var(--irr-over) * 0.05556);
  --irr-step-88: min(98px, clamp(40px, 6.111vw, 88px) + var(--irr-over) * 0.06111);
  --irr-step-96: min(107px, clamp(40px, 6.667vw, 96px) + var(--irr-over) * 0.06667);
  --irr-step-104: min(116px, clamp(40px, 7.222vw, 104px) + var(--irr-over) * 0.07222);
  --irr-step-120: min(133px, clamp(64px, 8.333vw, 120px) + var(--irr-over) * 0.08333);
  --irr-step-136: min(151px, clamp(72px, 9.444vw, 136px) + var(--irr-over) * 0.09444);
  --irr-step-152: min(169px, clamp(56px, 10.556vw, 152px) + var(--irr-over) * 0.10556);

  /* Ruled items (a rule, a title, a text): the space between the rule and the title, so there is
     more space above the title than below it. 24 px up to 1152 px, 30 px at 1440, 36 px at 1920. */
  --irr-rule-pad: min(36px, clamp(24px, 2.083vw, 30px) + var(--irr-over) * 0.0125);
  /* Physician rows: the padding is the row title's own size above it (never under 28 px) and
     1.29 times that below (never under 36 px): 32 and 41 px at 1440, 36 and 46 px from 1620. */
  --irr-row-pad: max(28px, var(--irr-fs-h3));
  --irr-row-pad-end: max(36px, var(--irr-fs-h3) * 1.29);
  /* Treatment tiles from 1024 px. An ordinary tile: 26 px above the name to 1337 px, 28 px at
     1440, 32 px from 1646 (bottom 30, 32 and 36); at the sides 24 px to 1360 px, where a third
     of the grid is under 300 px wide and every pixel of the measure counts, then 28 px at 1440
     and 32 px from 1646. With 24 px the line of every ordinary tile is three or four lines
     from 1331 px (from about 1350 px with the wider sides this replaces). From 1280 to 1330 px
     a third of the grid is 281 to 292 px and two lines still take five ("Infiltração de
     pontos-gatilho" to 1330 px, "Infiltração no dedo em gatilho" to 1292 px): plain wrapping
     gives five lines there too, ending on one word, so they stay balanced.
     A featured, photograph or ring tile: 32 px to 1280 px, 36 px at 1440, 40 px from 1600
     (bottom 36, 40 and 44). */
  --irr-tile-pad: min(32px, clamp(26px, 1.944vw, 28px) + var(--irr-over) * 0.01944);
  --irr-tile-pad-x: min(32px, clamp(24px, 24px + (100vw - 1360px) * 0.05, 28px) + var(--irr-over) * 0.01944);
  --irr-tile-pad-end: min(36px, clamp(30px, 2.222vw, 32px) + var(--irr-over) * 0.02222);
  --irr-tile-pad-lg: min(40px, clamp(32px, 2.5vw, 36px) + var(--irr-over) * 0.025);
  --irr-tile-pad-lg-end: min(44px, clamp(36px, 2.778vw, 40px) + var(--irr-over) * 0.02778);

  /* Hero seams. Phones (below 768 px) use four fixed steps; the photograph band is shorter to
     pay for them, so the booking button and the physician line stay inside 390 x 844.
     From 768 px (the block after this one) each seam is a width term in the same recipe, held by
     a height term: a short window falls back toward the compact values, so the booking button
     stays in the first viewport (1366 x 650 included) and the running line with the physician's
     name and CRM stays inside 1280 x 800 and 1024 x 768. The height terms give the 1440 values
     on a window 900 px tall and the compact floor on one about 730 px tall or less. From
     1024 px the floors are 40, 40 and 28 px (top, field, actions) and the h1 pays for them on a
     short window (the second block after this one).
       top      header to the photograph and the h1's cap line: 56 px at 1440 x 900, 64 px at
                1647 x 971, 72 px at 1920 x 1080; 42 px at 1280 x 800
       field    the least distance from the h1 to the definition: 57, 68 and 80 px; 42 px
       actions  definition to the buttons: 36, 41 and 48 px; 28 px
       rule     photograph and buttons to the hairline: 48, 55 and 64 px; 36 px
       strip    running line to the facts strip: 28, 32 and 36 px
       end      facts strip to the end of the black field: 80, 92 and 104 px */
  --irr-hero-top: 12px;
  --irr-hero-field: 18px;
  --irr-hero-actions: 20px;
  --irr-hero-rule: 20px;
  --irr-hero-strip: min(36px, clamp(24px, 1.944vw, 28px) + var(--irr-over) * 0.01944);
  --irr-hero-end: min(104px, clamp(56px, 5.556vw, 80px) + var(--irr-over) * 0.05556);

  /* Hero ring set: 136 px wide at 1440 (72 px at 768), 153 px at 1647, 176 px from 1920. */
  --irr-ring-w: min(176px, clamp(72px, 9.444vw, 136px) + var(--irr-over) * 0.0833);
  --irr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --irr-focus: var(--irr-guides);
  --irr-sel-bg: var(--irr-guides);
  --irr-sel-fg: var(--irr-black);

  position: relative;
  isolation: isolate;
  background: var(--irr-black);
  color: var(--irr-white);
  font-family: var(--irr-font);
  font-size: var(--irr-fs-body);
  font-weight: 400;
  line-height: 1.5;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@supports (width: 1cqw) {
  .irr {
    container-type: inline-size;
    --irr-vw: 100cqw;
  }
}
/* Hero seams from 768 px (spacing scale above): the width term, held by the window height. */
@media (min-width: 768px) {
  .irr {
    --irr-hero-top: max(32px, min(72px, clamp(32px, 3.889vw, 56px) + var(--irr-over) * 0.03889, 14vh - 70px));
    --irr-hero-field: max(24px, min(80px, clamp(24px, 4.444vw, 64px) + var(--irr-over) * 0.04444, 15vh - 78px));
    --irr-hero-actions: max(24px, min(48px, clamp(24px, 2.5vw, 36px) + var(--irr-over) * 0.025, 8vh - 36px));
    --irr-hero-rule: max(32px, min(64px, clamp(32px, 3.333vw, 48px) + var(--irr-over) * 0.03333, 12vh - 60px));
  }
}
/* Short desktop windows, from 1024 px. On a laptop window (1366 x 650, 1536 x 730) every seam
   above stood on its floor beside a headline sized by the width alone: 32 px over the h1, 24 px
   to the definition, 24 px to the buttons. Here the headline gives way first: it is never
   larger than 11vh (71.5 px in a window 650 px tall, 80.3 px at 730; the term is never under
   64 px), and from 1280 px the three seams around the copy never go under 40, 40 and 28 px. The 11vh term
   only makes the h1 smaller: where the width gives less (62.6 px at 1024, 83.5 px at
   1366 x 768, 88 px at 1440 x 900, 96.6 px at 1647 x 971, 108 px at 1920 x 1080) the size is
   the width's, as before. */
@media (min-width: 1024px) {
  .irr {
    --irr-fs-h1: min(108px, clamp(40px, 6.111vw, 88px) + var(--irr-over) * 0.04167, max(64px, 11vh));
  }
}
/* The raised seam floors start at 1280 px: below it the h1 is already at or under its 64 px
   term and cannot give way, so higher floors only pushed the booking button under the fold
   (1024 x 600) and left the name and CRM line 3 px from it (1024 x 768). */
@media (min-width: 1280px) {
  .irr {
    --irr-hero-top: max(40px, min(72px, clamp(32px, 3.889vw, 56px) + var(--irr-over) * 0.03889, 14vh - 70px));
    --irr-hero-field: max(40px, min(80px, clamp(24px, 4.444vw, 64px) + var(--irr-over) * 0.04444, 15vh - 78px));
    --irr-hero-actions: max(28px, min(48px, clamp(24px, 2.5vw, 36px) + var(--irr-over) * 0.025, 8vh - 36px));
  }
}

/* ---------- Frame wrappers ---------- */
/* The header and footer wrappers use no container units. Without layout containment the open
   menu panel also counts toward the scroll height of the page. Long words break as they do
   inside the theme's content container, where the header and footer were first approved: a
   word wider than its column breaks instead of running into the gutter. */
.irr.irr-frame {
  container-type: normal;
  --irr-vw: 100vw;
  overflow-wrap: break-word;
}
/* The open menu panel covers the page below the header. */
.irr.irr-frame--header {
  z-index: 100;
}

/* ---------- Frame reset ---------- */
/* On the old pages the frame sits beside the theme's element styles and 190 KB of legacy rules.
   Whatever those could set on the frame's own elements is put back to neutral here, one step
   above element and single-class selectors. The component rules below have the same weight and
   come later, so they win. */
.irr.irr-frame :where(header, footer, nav, div, details, summary, ul, li, p, a, span, button) {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-shadow: none;
  text-indent: 0;
  color: inherit;
  opacity: 1;
}

/* ---------- Reset inside the page ---------- */
.irr *,
.irr *::before,
.irr *::after {
  box-sizing: border-box;
}
.irr :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, figcaption) {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.irr :where(ul, ol) {
  list-style: none;
}
.irr :where(img) {
  display: block;
  max-width: none;
  border: 0;
  border-radius: 0;
}
.irr :where(svg) {
  display: block;
  overflow: hidden;
}
.irr :where(h1, h2, h3) {
  overflow-wrap: normal;
  hyphens: manual;
  text-wrap: balance;
}
.irr :where(p, dd, li, figcaption) {
  text-wrap: pretty;
}
.irr :where(.irr-wrap, [class*="irr-"]) {
  min-width: 0;
}

/* ---------- Browser surfaces ---------- */
.irr a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}
.irr a:hover {
  color: inherit;
  text-decoration-thickness: 4px;
}
.irr a:focus {
  outline: none;
}
.irr a:focus-visible,
.irr summary:focus-visible {
  outline: 3px solid var(--irr-focus);
  outline-offset: 4px;
}
.irr ::selection {
  background: var(--irr-sel-bg);
  color: var(--irr-sel-fg);
}

.irr .irr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.irr .irr-skip {
  position: absolute;
  z-index: 40;
  left: var(--irr-gutter);
  top: 8px;
  padding: 12px 18px;
  background: var(--irr-white);
  color: var(--irr-black);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}
.irr .irr-skip:focus-visible {
  transform: none;
  outline-color: var(--irr-guides);
}
/* .irr a:hover sets color: inherit, which is white here: with the pointer resting over the
   focused skip link its black label turned white on the white block. */
.irr .irr-skip:hover {
  color: var(--irr-black);
}

/* ---------- Layout primitives ---------- */
.irr .irr-wrap {
  width: min(var(--irr-max), 100% - 2 * var(--irr-gutter));
  margin-inline: auto;
}

/* Uppercase labels and tags. */
.irr .irr-label,
.irr .irr-tag {
  font-size: var(--irr-fs-label);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Buttons and links ---------- */
.irr .irr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 32px;
  border: 2px solid var(--irr-white);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}
.irr .irr-btn--solid {
  background: var(--irr-white);
  color: var(--irr-black);
}
.irr .irr-btn--solid:hover {
  background: var(--irr-press);
  border-color: var(--irr-press);
  color: var(--irr-black);
}
.irr .irr-btn--line {
  min-height: 48px;
  padding: 10px 20px;
  background: var(--irr-black);
  color: var(--irr-white);
  font-size: 16px;
  font-weight: 700;
}
.irr .irr-btn--line:hover {
  background: var(--irr-white);
  color: var(--irr-black);
}
.irr .irr-btn--lg {
  min-height: 64px;
  padding: 14px 36px;
}
/* Outline button: every secondary action. Field of the ground it stands on, 2 px border and
   label in the ground's text colour, a drawn arrow after the last word. Hover inverts it: the
   field takes the text colour and the label the ground colour (set per ground with
   --irr-btn-hover-bg and --irr-btn-hover-fg; the defaults are for black). Same height as the
   primary button, so the two share one baseline in a row. */
.irr .irr-btn--out {
  padding: 12px 24px;
  border-color: currentColor;
  background: transparent;
  color: inherit;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.irr .irr-btn--out:hover {
  border-color: var(--irr-btn-hover-bg, var(--irr-white));
  background: var(--irr-btn-hover-bg, var(--irr-white));
  color: var(--irr-btn-hover-fg, var(--irr-black));
}
/* The label is one flex item and one run of text. A word joiner ties the arrow to the last
   word, so a label that has to wrap ends with "word ->". A label may carry an optional line
   break (.irr-btn__br), shown only where a row of buttons stands in narrow columns. */
.irr .irr-btn__label {
  text-wrap: balance;
}
.irr .irr-btn__br {
  display: none;
}
.irr .irr-btn svg {
  display: inline-block;
  margin-left: 10px;
  vertical-align: -0.14em;
  transition: transform 160ms var(--irr-ease-out);
}
.irr .irr-btn:hover svg {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .irr .irr-btn svg {
    transition: none;
  }
  .irr .irr-btn:hover svg {
    transform: none;
  }
}
/* Below 360 px "Agendar pelo WhatsApp" keeps one line. */
@media (max-width: 359.98px) {
  .irr .irr-btn--solid,
  .irr .irr-btn--out {
    padding-inline: 14px;
  }
}
.irr .irr-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 18px;
  font-weight: 700;
}
/* A run of text that keeps one line (the CRM number in the hero's running line). */
.irr .irr-nowrap {
  white-space: nowrap;
}

/* ---------- Header ---------- */
.irr .irr-header {
  background: var(--irr-black);
  color: var(--irr-white);
  padding-top: var(--irr-header-pad);
}
/* Standalone bar. On the homepage the header opens the black hero. On every other page an old
   page body follows it, so the bar closes with the space it opens with. At the widths the article
   gate measures (1366, 855, 390, 320) it is never taller than the theme header it replaces, so
   every article opening stays at or above the position the gate measured.
   The bar ends on the system's gray hairline. Articles with the dark layout open on a near-black
   field (#13181c); without the rule the two blacks meet and read as a color error. The hairline
   is an inset shadow, a flat 1 px line inside the bar, so the bar keeps its height. */
.irr .irr-header--bar {
  --irr-header-pad: clamp(12px, 1.389vw, 20px);
  padding-bottom: var(--irr-header-pad);
  box-shadow: inset 0 -1px 0 var(--irr-gray);
}
.irr .irr-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}
.irr .irr-brand {
  padding: 10px 8px 10px 0;
  font-size: clamp(22px, 1.667vw, 24px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.irr .irr-brand span {
  font-weight: 400;
  color: var(--irr-gray);
}
.irr .irr-brand:hover span {
  color: var(--irr-white);
}
.irr .irr-nav,
.irr .irr-mega,
.irr .irr-header__cta {
  display: none;
}
/* The booking button of the bar on every page but the homepage (whose hero carries the page's
   main button): the amber field, with the line button's size and weight, so the bar has the
   same measures on every page. */
.irr .irr-btn--amber {
  min-height: 48px;
  padding: 10px 20px;
  border-color: var(--irr-guides);
  background: var(--irr-guides);
  color: var(--irr-black);
  font-size: 16px;
  font-weight: 700;
}
.irr .irr-btn--amber:hover {
  border-color: var(--irr-white);
  background: var(--irr-white);
  color: var(--irr-black);
}

/* Menu without JavaScript: <details>, keyboard reachable, visible close. */
.irr .irr-menu > summary {
  position: relative;
  z-index: 31;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--irr-white);
  background: var(--irr-black);
  color: var(--irr-white);
  list-style: none;
  cursor: pointer;
}
.irr .irr-menu > summary::-webkit-details-marker {
  display: none;
}
.irr .irr-menu > summary::marker {
  content: "";
}
.irr .irr-menu > summary:hover {
  background: var(--irr-white);
  color: var(--irr-black);
}
.irr .irr-menu__open,
.irr .irr-menu__close {
  display: flex;
}
.irr .irr-menu__close,
.irr .irr-menu[open] .irr-menu__open {
  display: none;
}
.irr .irr-menu[open] .irr-menu__close {
  display: flex;
}
.irr .irr-menu:not([open]) .irr-menu__panel {
  display: none;
}
.irr .irr-menu__panel {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--irr-header-pad) + 88px) var(--irr-gutter) 56px;
  background: var(--irr-black);
  color: var(--irr-white);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.irr .irr-menu__panel ul {
  border-bottom: 1px solid var(--irr-gray);
}
.irr .irr-menu__panel li {
  border-top: 1px solid var(--irr-gray);
}
.irr .irr-menu__panel nav a {
  display: flex;
  align-items: center;
  min-height: 64px;
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.irr .irr-menu__panel nav a[aria-current],
.irr .irr-menu__panel nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}
.irr .irr-menu__cta {
  width: 100%;
}
.irr .irr-menu__tel {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 24px;
  font-weight: 800;
  text-decoration: none;
}

/* The booking button is in view on every page. Below 1024 px the homepage carries it in the
   hero. The other pages carry it in the bar: after the menu toggle from 600 px, and on a row of
   its own on phones, where the bar is 136 px tall with the brand and the toggle at the same
   height as on the homepage. At every width the bar reads in markup order (brand, menu, button),
   so the keyboard focus moves the way the eye does. */
@media (max-width: 1023.98px) {
  .irr .irr-header--bar .irr-header__cta {
    display: inline-flex;
    white-space: nowrap;
  }
}
@media (max-width: 599.98px) {
  .irr .irr-header--bar .irr-header__bar {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-block: 4px;
  }
  .irr .irr-header--bar .irr-header__cta {
    flex: 1 0 100%;
  }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .irr .irr-header--bar .irr-menu {
    margin-left: auto;
  }
}
/* From 1024 to 1279 px six links and the button do not fit one row: the bar keeps the menu
   toggle, on every page, to the left of the booking button. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .irr .irr-menu {
    margin-left: auto;
  }
}
/* The open menu panel covers the bar. What it covers leaves the focus order, so the keyboard
   never lands on a link that cannot be seen: the brand on every page, and the bar's booking
   button on the pages that carry one (the panel has its own). From 600 px the button also leaves
   the row, so the close button stands at the right edge, in line with the panel below it.
   The page body and the footer under the panel leave it too: see "Site frame chrome". */
@media (max-width: 1279.98px) {
  .irr .irr-header__bar:has(.irr-menu[open]) .irr-brand,
  .irr .irr-header__bar:has(.irr-menu[open]) .irr-header__cta {
    visibility: hidden;
  }
}
@media (min-width: 600px) and (max-width: 1279.98px) {
  .irr .irr-header__bar:has(.irr-menu[open]) .irr-header__cta {
    display: none;
  }
}

@media (min-width: 1024px) {
  /* The booking button keeps one line. */
  .irr .irr-header__cta {
    display: inline-flex;
    flex: none;
    white-space: nowrap;
  }
  .irr .irr-brand {
    flex: none;
  }
}

/* ---------- Navigation and its panels ---------- */
/* Six links from 1280 px (owner approval of 2026-10-07). Three of them open a panel while the
   pointer is on the link or in the panel, or while the keyboard focus is inside either: where it
   hurts (the groups of /artigos/ and three articles), the treatments (eight, with a photograph)
   and the physician. No JavaScript; a panel is not drawn until it opens, so its images load then.
   From 1440 px the bar stands on the page's four columns: the brand takes column 1, the links
   start on column 2, the booking button ends column 4. From 1280 to 1439 px a page column is
   too narrow for that: the brand takes its own width and the links stand beside the button.
   The links may take a second row under a reader's text spacing (WCAG 1.4.12) or minimum font
   size; they never run under the button. */
@media (min-width: 1280px) {
  .irr .irr-menu {
    display: none;
  }
  .irr .irr-nav {
    display: block;
  }
  .irr .irr-header {
    position: relative;
    --irr-mega-bridge: 8px;
  }
  .irr .irr-header--bar {
    --irr-mega-bridge: calc(var(--irr-header-pad) + 8px);
  }
  .irr .irr-header__bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--irr-gap);
  }
  .irr .irr-nav {
    justify-self: end;
  }
  .irr .irr-header__cta {
    justify-self: end;
  }
  .irr .irr-nav__list {
    display: flex;
    flex-wrap: wrap;
    column-gap: clamp(18px, 6.98vw - 71.3px, 24px);
  }
  .irr .irr-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    font-size: clamp(16px, 1vw + 1.5px, 18px);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  /* The link of the page being read, the link under the pointer and the link of an open panel:
     an amber rule under the word. */
  .irr .irr-nav__link[aria-current],
  .irr .irr-nav__link:hover,
  .irr .irr-nav__item--panel:hover > .irr-nav__link,
  .irr .irr-nav__item--panel:focus-within > .irr-nav__link {
    text-decoration: underline;
    text-decoration-color: var(--irr-guides);
    text-decoration-thickness: 3px;
    text-underline-offset: 10px;
  }
  .irr .irr-nav__item--panel:hover > .irr-mega,
  .irr .irr-nav__item--panel:focus-within > .irr-mega {
    display: block;
  }
  .irr .irr-mega {
    position: absolute;
    z-index: 90;
    left: 0;
    right: 0;
    top: 100%;
    padding: 44px 0 56px;
    border-bottom: 3px solid var(--irr-black);
    background: var(--irr-white);
    color: var(--irr-black);
    --irr-focus: var(--irr-black);
    --irr-sel-bg: var(--irr-black);
    --irr-sel-fg: var(--irr-guides);
  }
  /* The strip between a link and its panel belongs to the panel, so the pointer can cross it. */
  .irr .irr-mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--irr-mega-bridge);
  }
  .irr .irr-mega__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--irr-gap);
    align-items: start;
  }
  .irr .irr-mega__label {
    margin-bottom: 18px;
  }
  .irr .irr-mega svg {
    display: inline-block;
    flex: none;
    margin-left: 10px;
    vertical-align: -0.14em;
  }
  .irr .irr-mega__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--irr-press);
  }
  .irr .irr-mega__more {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-top: 12px;
    font-size: 17px;
    font-weight: 800;
  }
  /* Where it hurts: the groups on columns 1 and 2, read row by row; three articles on 3 and 4. */
  .irr .irr-mega__part--rows {
    grid-column: 1 / 3;
  }
  .irr .irr-mega__part--cards {
    grid-column: 3 / 5;
  }
  .irr .irr-mega__rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--irr-gap);
  }
  .irr .irr-mega__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 8px 0;
    border-top: 1px solid var(--irr-black);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-decoration: none;
  }
  .irr .irr-mega__n {
    flex: none;
    color: var(--irr-ink-2);
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
  }
  .irr .irr-mega__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
  }
  .irr .irr-mega__card,
  .irr .irr-mega__tile {
    display: block;
    text-decoration: none;
  }
  .irr .irr-mega__title {
    display: block;
    margin-top: 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
  }
  .irr .irr-mega__row:hover .irr-mega__name,
  .irr .irr-mega__card:hover .irr-mega__title,
  .irr .irr-mega__tile:hover .irr-mega__tname,
  .irr .irr-mega__door:hover {
    text-decoration: underline;
    text-decoration-thickness: 3px;
  }
  /* Treatments: the black field, eight photographs on the page's four columns. */
  .irr .irr-mega--tratamentos {
    border-bottom: 0;
    box-shadow: inset 0 1px 0 var(--irr-gray), inset 0 -1px 0 var(--irr-gray);
    background: var(--irr-black);
    color: var(--irr-white);
    --irr-focus: var(--irr-guides);
    --irr-sel-bg: var(--irr-guides);
    --irr-sel-fg: var(--irr-black);
  }
  .irr .irr-mega__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
  }
  .irr .irr-mega__top .irr-mega__label {
    margin-bottom: 0;
  }
  .irr .irr-mega__top .irr-mega__more {
    margin-top: 0;
  }
  .irr .irr-mega__tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px var(--irr-gap);
  }
  .irr .irr-mega__tile .irr-mega__img {
    aspect-ratio: 2 / 1;
    background: var(--irr-ink-2);
  }
  .irr .irr-mega__tname {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    border-bottom: 1px solid var(--irr-gray);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
  }
  /* The physician: a photograph of the work on columns 1 and 2, three doors on 3 and 4. */
  .irr .irr-mega--medico {
    padding: 0;
  }
  .irr .irr-mega--medico .irr-mega__grid {
    align-items: stretch;
  }
  .irr .irr-mega__photo {
    grid-column: 1 / 3;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--irr-press);
  }
  .irr .irr-mega__part--doors {
    grid-column: 3 / 5;
    padding: 44px 0 40px;
  }
  .irr .irr-mega__part--doors .irr-mega__label {
    margin-bottom: 0;
  }
  .irr .irr-mega__who {
    margin: 12px 0 24px;
    font-size: clamp(36px, 3.33vw, 48px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
  }
  .irr .irr-mega__doors {
    border-bottom: 1px solid var(--irr-black);
  }
  .irr .irr-mega__door {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    border-top: 1px solid var(--irr-black);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-decoration: none;
  }
}
@media (min-width: 1440px) {
  .irr .irr-header__bar {
    grid-template-columns: calc((100% - 3 * var(--irr-gap)) / 4) minmax(0, 1fr) auto;
  }
  .irr .irr-nav {
    justify-self: start;
  }
  .irr .irr-nav__list {
    column-gap: clamp(28px, 1.93vw + 0.2px, 32px);
  }
}
@media (min-width: 1280px) and (forced-colors: active) {
  .irr .irr-mega {
    border: 2px solid CanvasText;
  }
}

/* ---------- Footer ---------- */
.irr .irr-footer {
  background: var(--irr-black);
  color: var(--irr-white);
  padding: 0 0 64px;
}
.irr .irr-footer > .irr-wrap {
  padding-top: max(64px, var(--irr-step-96));
  border-top: 1px solid var(--irr-gray);
}
.irr .irr-footer .irr-label {
  color: var(--irr-gray);
}
.irr .irr-footer__top {
  display: grid;
  gap: 48px var(--irr-gap);
}
/* The brand keeps one line down to 320 px: 12vw there (38.4 px), 40 px from 334 px, as before. */
.irr .irr-footer__brand {
  font-size: clamp(min(40px, 12vw), 3.889vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.irr .irr-footer__brand span {
  font-weight: 400;
  color: var(--irr-gray);
}
.irr .irr-footer__mast p + p {
  margin-top: 18px;
  font-size: var(--irr-fs-body);
}
.irr .irr-footer__editor p + p {
  margin-top: 10px;
  font-size: var(--irr-fs-body);
  line-height: 1.5;
}
.irr .irr-footer__editor .irr-link {
  margin-top: 6px;
}
.irr .irr-footer__nav {
  margin-top: max(56px, var(--irr-step-88));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px var(--irr-gap);
}
.irr .irr-footer__nav > div {
  padding-top: 18px;
  border-top: 1px solid var(--irr-white);
}
.irr .irr-footer__nav ul {
  margin-top: 8px;
}
.irr .irr-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 18px;
  line-height: 1.3;
  text-decoration: none;
}
.irr .irr-footer__nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.irr .irr-footer__bottom {
  margin-top: max(56px, var(--irr-step-96));
  padding-top: 24px;
  border-top: 1px solid var(--irr-gray);
  display: grid;
  gap: 12px var(--irr-gap);
  color: var(--irr-gray);
  font-size: 16px;
  line-height: 1.5;
}
.irr .irr-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
}
.irr .irr-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--irr-white);
}
@media (max-width: 479.98px) {
  .irr .irr-footer__nav {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 768px) {
  .irr .irr-footer__top {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .irr .irr-footer__mast {
    grid-column: 1 / 3;
  }
  .irr .irr-footer__editor {
    grid-column: 3 / 5;
  }
  .irr .irr-footer__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
  .irr .irr-footer__bottom p:first-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1024px) {
  .irr .irr-footer__nav,
  .irr .irr-footer__bottom {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .irr .irr-footer__bottom p:first-child {
    grid-column: 1 / 3;
  }
}
/* After an old page body the edge of the black field is the start of the footer; the gray
   hairline belongs to the homepage, where the footer follows a black section. */
.irr .irr-footer--bar > .irr-wrap {
  border-top: 0;
}

/* ---------- Print ---------- */
/* Browsers print no backgrounds, so the black header and footer came out as white and gray text
   on white paper. On paper the frame is black on white: the wordmark alone in the header (no
   navigation, menu or booking button, which do nothing on paper), the footer's text and links
   in black under a rule. */
@media print {
  .irr .irr-skip,
  .irr .irr-nav,
  .irr .irr-menu,
  .irr .irr-header .irr-header__cta,
  .irr .irr-header--bar .irr-header__cta {
    display: none;
  }
  .irr .irr-header,
  .irr .irr-header--bar,
  .irr .irr-footer {
    position: static;
    background: none;
    color: var(--irr-black);
  }
  .irr .irr-header__bar {
    border-bottom: 1px solid var(--irr-black);
  }
  .irr .irr-header .irr-brand,
  .irr .irr-header .irr-brand span,
  .irr .irr-footer .irr-footer__brand,
  .irr .irr-footer .irr-footer__brand span,
  .irr .irr-footer .irr-label,
  .irr .irr-footer p,
  .irr .irr-footer a,
  .irr .irr-footer .irr-footer__nav a,
  .irr .irr-footer .irr-footer__legal a {
    color: var(--irr-black);
  }
  .irr .irr-footer > .irr-wrap,
  .irr .irr-footer--bar > .irr-wrap {
    border-top: 1px solid var(--irr-black);
  }
  /* A colour still in transition prints at its screen value: the browser takes the page before
     the 120 ms have run, and the wordmark came out white on white. Nothing animates on paper. */
  .irr a,
  .irr .irr-btn--out,
  .irr .irr-btn svg {
    transition: none;
  }
}