/* Tráfego para Consultórios — "Clareira" light review layer.
   Opus, 16 Oct 2026. Loaded after styles.css and experiment-20261014.css;
   both source layers and app.js stay byte-identical. Light only:
   paper/white/mist surfaces, petroleum ink, lime as the single signal. */

:root {
  --paper: #f5f5f2;
  --white: #ffffff;
  --mist: #e5eae5;
  --rule: #d9dcd6;
  --ink: #0f3038;
  --ink-2: #334e55;
  --ink-3: #4f666c;
  --ink-hover: #1d4550;
  --lime: #d5ff46;
  --lime-hover: #c8ef42;
  --field: #778a90;
  --error: #b3261e;
  --hair: rgb(15 48 56 / 12%);
  --hair-strong: rgb(15 48 56 / 28%);

  --gutter: clamp(28px, 5.5vw, 80px);
  --inset: clamp(8px, 1.1vw, 16px);
  --pad: calc(var(--gutter) - var(--inset));
  --content: 1280px;
  --col-gap: clamp(24px, 3.2vw, 48px);

  --r-sheet: clamp(24px, 2.4vw, 36px);
  --r-card: clamp(20px, 1.8vw, 28px);
  --r-field: 14px;

  --text: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  --lead: clamp(1.25rem, 1.08rem + .7vw, 1.5rem);
  --h2: clamp(2rem, 1.15rem + 3.2vw, 3.5rem);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms;
  --t-med: 220ms;

  --lift: 0 1px 0 rgb(15 48 56 / 4%), 0 24px 48px -30px rgb(15 48 56 / 42%);
  --float: 0 1px 0 rgb(15 48 56 / 4%), 0 36px 72px -44px rgb(15 48 56 / 52%);

  --arrow-lime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23D5FF46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E");
  --arrow-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F3038' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E");
  --check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F3038' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

html {
  scroll-padding-top: 16px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection {
  background: var(--lime);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip-link {
  top: -72px;
  left: 12px;
  z-index: 120;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  transition: top var(--t-fast) var(--ease);
}

.skip-link:focus-visible {
  top: 12px;
  outline-color: var(--ink);
}

/* ---------- Actions ---------- */

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 8px 8px 8px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(15 48 56 / 16%);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

/* Petroleum chip with a lime arrow: anchors the lime pill on light surfaces. */
.cta::after {
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink) var(--arrow-lime) center / 18px 18px no-repeat;
  transition: transform var(--t-med) var(--ease);
}

.cta:hover {
  background: var(--lime-hover);
  color: var(--ink);
}

.cta:active {
  background: var(--lime-hover);
  color: var(--ink);
  transform: scale(.985);
}

.cta:focus-visible,
.hero-copy .cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (hover: hover) {
  .cta:hover::after {
    transform: translateX(3px);
  }
}

@media (max-width: 400px) {
  .cta {
    gap: 12px;
    padding-left: 20px;
  }
}

/* Small petroleum actions: header and near-footer bar. Narrow bars use a capped
   two-line pill; grid column 3 reserves its max-content, so nothing overflows. */
.site-header #main-nav .cta-nav,
.near-footer .near-footer-cta {
  flex: 0 1 auto;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  max-width: 128px;
  height: auto;
  min-height: 46px;
  padding: 6px 12px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.site-header #main-nav .cta-nav::after,
.near-footer .near-footer-cta::after {
  content: none;
}

.site-header #main-nav .cta-nav:hover,
.site-header #main-nav .cta-nav:active,
.near-footer .near-footer-cta:hover,
.near-footer .near-footer-cta:active {
  background: var(--ink-hover);
  color: var(--paper);
}

@media (min-width: 520px) {
  .site-header #main-nav .cta-nav,
  .near-footer .near-footer-cta {
    flex: none;
    gap: 10px;
    max-width: none;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 14px;
    white-space: nowrap;
  }
}

/* ---------- Header (mobile: menu · logo · action, as the near-footer bar) ---------- */

.site-header {
  position: absolute;
  top: 10px;
  bottom: auto;
  left: var(--inset);
  right: var(--inset);
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(44px, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: none;
  height: 64px;
  margin: 0;
  padding: 0 6px;
  border-radius: 22px;
  background: rgb(255 255 255 / 84%);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 0 0 1px var(--hair), 0 14px 32px -26px rgb(15 48 56 / 45%);
  transition: box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}

.site-header .menu-toggle,
.near-footer .near-footer-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}

.site-header .menu-toggle:hover,
.near-footer .near-footer-toggle:hover {
  background: var(--mist);
}

.site-header .brand {
  grid-column: 2;
  justify-self: center;
}

.site-header .brand-logo {
  width: clamp(104px, 29vw, 140px);
}

.site-header #main-nav {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-header #main-nav a:not(.cta) {
  display: none;
}

.site-header .brand,
.near-footer .near-footer-brand {
  min-width: 0;
}

/* 360: 44 + 104 logo + 128 action + gaps fit the 332 px interior; wider bars centre the logo. */
@media (min-width: 520px) {
  .site-header {
    gap: 8px;
    padding: 0 8px;
  }
}

/* ---------- Hero ---------- */

/* r3 "Vitrine": a statement (headline + one support group of paragraph and CTA) above a
   stage that shows ONE real public site, Dra. Tainá, in its desktop and mobile renderings.
   The hero is an inline-size container with no inline padding, so 100cqi is its exact
   width and --hero-c is the exact content width C used for the headline measure and for
   the stage crop. Text and CTA never move; the captures are static images, not links. */
.hero {
  --hero-c: min(var(--content), 100vw - 2 * var(--gutter));
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 0;
  padding: 112px 0 var(--inset);
  background: var(--paper);
  color: var(--ink);
  overflow: clip;
  container-type: inline-size;
}

@supports (width: 1cqi) {
  .hero {
    --hero-c: min(var(--content), 100cqi - 2 * var(--gutter));
  }
}

.hero-shell {
  position: relative;
  z-index: 1;
  width: min(var(--content), 100% - 2 * var(--gutter));
  max-width: none;
  margin-inline: auto;
}

.hero .hero-copy {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.hero .hero-copy-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: auto;
  max-width: none;
}

.hero-copy h1 {
  max-width: 12em;
  color: var(--ink);
  font-size: clamp(2.3rem, 1.25rem + 4.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}

/* Paragraph and action form one group (no gap between "what we do" and "ask for it"). */
.hero-support {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-top: 22px;
}

.hero-copy p {
  max-width: 44ch;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.hero-copy .cta {
  width: 100%;
  min-height: 56px;
  margin-top: 0;
  white-space: normal;
}

/* Page-edge atmosphere (Aurora cue, static): a mist band from the top edge and a faint
   petroleum haze beyond the top-right corner. Behind everything, never a subject. */
.hero-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(64% 40% at 100% -12%, rgb(15 48 56 / 10%) 0%, rgb(15 48 56 / 4%) 50%, rgb(15 48 56 / 0%) 100%),
    linear-gradient(180deg, rgb(229 234 229 / 70%) 0%, rgb(229 234 229 / 0%) 28%);
  pointer-events: none;
  user-select: none;
}

/* ---- The stage: real work at meaningful scale ----
   A mist sheet across the sheet width (same inset as the sheets below), its inner box on
   the content grid. Desktop capture: 83% of C, left edge on the headline's left edge.
   Mobile capture of the SAME site: right edge on the CTA column's right edge, lower than
   the desktop capture and overlapping its right edge, separated by a mist cut-out ring.
   The stage floor crops both captures inside a gap of the source page, so no pictured
   button or WhatsApp bubble is shown (desktop source row 660, mobile source row 538):
     stage height = C * (.045 + .83 * 660 / 1440) = C * .42542
     mobile top   = stage height - mobile width * 538 / 390 */
.hero-work {
  --stage-h: calc(var(--hero-c) * .42542);
  --wm: clamp(150px, var(--hero-c) * .25, 304px);
  --glow-x: 42%;
  position: relative;
  z-index: 1;
  isolation: isolate;
  height: var(--stage-h);
  margin: clamp(40px, 4.4vw, 64px) var(--inset) 0;
  overflow: clip;
  border-radius: var(--r-sheet);
  background: var(--mist);
}

/* Stage light (Aurora + organic-background cues, static except one entry below):
   lime light from the top edge behind the captures, a pale plaster highlight at the
   top-right, petroleum haze rising from both lower corners. */
.hero-work::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(50% 64% at var(--glow-x) -8%, rgb(213 255 70 / 32%) 0%, rgb(213 255 70 / 11%) 44%, rgb(213 255 70 / 0%) 76%),
    radial-gradient(40% 70% at 100% 0%, rgb(255 255 255 / 72%) 0%, rgb(255 255 255 / 0%) 70%),
    radial-gradient(42% 90% at -4% 104%, rgb(15 48 56 / 15%) 0%, rgb(15 48 56 / 0%) 72%),
    radial-gradient(36% 80% at 104% 100%, rgb(15 48 56 / 11%) 0%, rgb(15 48 56 / 0%) 70%);
  pointer-events: none;
}

.hero-work-inner {
  position: relative;
  width: min(var(--content), 100% - 2 * var(--pad));
  height: 100%;
  margin-inline: auto;
}

.work-shot {
  position: absolute;
  display: block;
  margin: 0;
  user-select: none;
}

.work-desktop {
  top: calc(var(--hero-c) * .045);
  left: 0;
  width: calc(var(--hero-c) * .83);
}

.work-desktop img,
.work-mobile {
  display: block;
  height: auto;
  background: var(--ink);
  color: var(--paper);
}

.work-desktop img {
  width: 100%;
  border-radius: clamp(10px, calc(var(--hero-c) * .012), 16px);
  box-shadow: 0 0 0 1px rgb(15 48 56 / 12%), 0 44px 90px -48px rgb(15 48 56 / 60%);
}

.work-mobile {
  top: calc(var(--stage-h) - var(--wm) * 1.3795);
  right: 0;
  width: var(--wm);
  border-radius: calc(var(--wm) * .075);
  box-shadow: 0 0 0 clamp(4px, calc(var(--wm) * .02), 6px) var(--mist), 0 36px 70px -30px rgb(15 48 56 / 58%);
}

/* Phones: only the mobile capture (the desktop source swaps to a 1x1 placeholder, so it is
   never downloaded). It sits on the text column's left edge, cropped at the same row. */
@media (max-width: 640px) {
  .hero-work {
    --wm: min(var(--hero-c) * .78, 300px);
    --work-top: clamp(24px, 7vw, 36px);
    --stage-h: calc(var(--work-top) + var(--wm) * 1.3795);
    --glow-x: 88%;
  }

  .work-desktop {
    display: none;
  }

  .work-mobile {
    top: var(--work-top);
    right: auto;
    left: 0;
  }
}

/* ---------- Section system: paper canvas and rounded sheets ---------- */

.section {
  padding: clamp(72px, 8.5vw, 120px) var(--gutter);
  background: var(--paper);
  color: var(--ink);
}

.section-inner {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

.section.sheet {
  margin-inline: var(--inset);
  padding: clamp(56px, 7vw, 104px) var(--pad);
  border-radius: var(--r-sheet);
  background: var(--white);
}

.section.sheet + .section.sheet {
  margin-top: var(--inset);
}

.section.sheet-mist {
  background: var(--mist);
}

.section .divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.section h2 {
  color: var(--ink);
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}

/* ---------- Agency ---------- */

.agency-grid {
  display: grid;
  gap: 28px;
}

.agency .agency-grid > * {
  order: 0;
}

.agency-grid > h2 {
  max-width: 12em;
}

.agency .lead-paragraph {
  max-width: 34ch;
  color: var(--ink);
  font-size: var(--lead);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.agency .agency-photo {
  display: block;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--mist);
}

.agency .agency-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.agency .agency-copy {
  display: grid;
  gap: 20px;
}

.agency .agency-copy p {
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--text);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-wrap: pretty;
}

/* ---------- Solutions: Huge-style modules, Cuberto state change, light ---------- */

.section.solution {
  background: var(--paper);
  color: var(--ink);
}

.solution .section-inner {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
}

.solution .solution-intro {
  display: grid;
  gap: 20px;
}

.solution-intro h2 {
  max-width: 11em;
  color: var(--ink);
}

.solution .solution-copy {
  display: grid;
  gap: 14px;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: var(--text);
  line-height: 1.6;
  letter-spacing: 0;
}

.solution .solution-copy p:first-child {
  color: var(--ink);
}

.service-nav {
  display: grid;
  gap: 12px;
  border: 0;
}

.service-nav a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  grid-template-areas:
    "index arrow"
    "name name"
    "desc desc";
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  min-height: 0;
  padding: 18px 18px 26px 24px;
  border: 0;
  border-radius: var(--r-card);
  background: var(--mist);
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px transparent;
  -webkit-tap-highlight-color: transparent;
  container-type: inline-size;
  transition: background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.service-nav a::before {
  content: none;
}

.service-nav a::after {
  content: "";
  grid-area: arrow;
  justify-self: end;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white) var(--arrow-ink) center / 18px 18px no-repeat;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: background-color var(--t-med) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.service-nav .service-name {
  grid-area: name;
  margin-top: 28px;
  color: inherit;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  /* "Atendimento" ≈ 5.8em: 16cqi keeps the longest name inside the card (901 px ≈ 33 px). */
  font-size: min(clamp(2rem, 1.4rem + 2vw, 2.75rem), 16cqi);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.service-nav .service-description {
  grid-area: desc;
  max-width: 32ch;
  margin-top: 10px;
  color: var(--ink-2);
  font-size: var(--text);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-wrap: pretty;
}

/* Local surface light, after React Bits "Spotlight Card"
   (https://reactbits.dev/components/spotlight-card): the source .service-art span is
   an invisible layer behind the card text that fades in a fixed, soft lime-tinted
   wash near the arrow chip on hover, keyboard focus and tap. No pointer tracking. */
.service-nav .service-art {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  display: block;
  grid-area: auto;
  place-self: stretch;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: radial-gradient(85% 75% at 84% 6%, rgb(213 255 70 / 30%) 0%, rgb(213 255 70 / 12%) 42%, rgb(213 255 70 / 0%) 78%);
  box-shadow: none;
  opacity: 0;
  transform: none;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}

.service-nav a:is(:hover, :focus-visible, :active) {
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--hair), var(--lift);
}

.service-nav a:is(:hover, :focus-visible, :active) .service-art {
  opacity: 1;
}

/* Touch: the same visible state, applied without a fade. */
@media (hover: none) {
  .service-nav .service-art {
    transition: none;
  }
}

.service-nav a:is(:hover, :focus-visible, :active) .service-name {
  text-decoration: none;
}

.service-nav a:is(:hover, :focus-visible, :active)::after {
  background-color: var(--ink);
  background-image: var(--arrow-lime);
  box-shadow: none;
  transform: rotate(90deg);
}

.service-nav a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.service-nav a:active {
  transform: translateY(-1px) scale(.995);
}

@media (hover: hover) {
  .service-nav a:hover {
    transform: translateY(-4px);
  }
}

/* ---------- Service chapters ---------- */

.section.chapter {
  padding-inline: 0;
}

.chapter > .section-inner {
  width: min(var(--content), calc(100% - 2 * var(--pad)));
}

.chapter-grid {
  display: grid;
  gap: 0;
}

.chapter .chapter-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: clamp(28px, 4vw, 56px);
  font-size: clamp(2.75rem, 1.6rem + 5.6vw, 7rem);
  line-height: .96;
  letter-spacing: -.055em;
}

.chapter .chapter-lead {
  max-width: 36ch;
  color: var(--ink);
  font-size: var(--lead);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.chapter .chapter-photo {
  display: block;
  margin-top: 28px;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--mist);
}

.chapter .chapter-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.chapter .chapter-copy {
  display: grid;
  gap: 18px;
  max-width: 60ch;
  margin-top: 28px;
  color: var(--ink-2);
  font-size: var(--text);
  line-height: 1.6;
}

.chapter .chapter-copy p {
  text-wrap: pretty;
}

/* No-JS state: the services line carries its own rule. */
.chapter .divider {
  display: none;
}

.section.chapter .services-line {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
}

/* Static rails (r2). The rails IIFE now builds ONE aria-hidden set of the unique source
   labels as pills, with no animation, duplicates or pause control. Once the pills exist,
   the source line becomes screen-reader-only text at every width and motion setting.
   Without JS it stays visible with the rule above. (0,4,0) beats every legacy rails rule. */
.section.chapter.has-service-rails .services-line {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.chapter .service-rails {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: min(var(--content), calc(100% - 2 * var(--pad)));
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.chapter .service-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--ink);
  font: 500 17px/1.3 var(--font);
  letter-spacing: -.01em;
  white-space: normal;
}

/* ---------- Process: a quiet node timeline (no generated numbers) ---------- */

.process .section-inner > .divider {
  display: none;
}

/* Overrides the legacy two-column .process-grid: H2 always sits above the steps. */
.process .process-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5.5vw, 72px);
}

.process-grid h2 {
  max-width: 13em;
}

.process .process-steps {
  position: relative;
  display: grid;
  gap: 0;
}

.process .process-steps::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 11px;
  width: 1.5px;
  background: var(--hair-strong);
}

.process .process-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 0 0 36px 48px;
  border: 0;
}

.process .process-step:last-child {
  padding-bottom: 0;
}

.process .process-step::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 7px var(--paper);
}

.process .process-step:first-child::before {
  background: var(--lime);
  box-shadow: inset 0 0 0 2px var(--ink);
}

.process-step h3 {
  color: var(--ink);
  font-size: clamp(1.25rem, 1.08rem + .6vw, 1.5rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.process-step p {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: var(--text);
  line-height: 1.6;
  letter-spacing: 0;
  text-wrap: pretty;
}

/* ---------- Testimonials: one primary, two secondary, real names only ---------- */

.testimonials h2 {
  max-width: 12em;
  margin-bottom: clamp(32px, 4.5vw, 64px);
}

.testimonial-grid {
  display: grid;
  gap: 12px;
}

.testimonials .testimonial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
  margin: 0;
  padding: clamp(24px, 3vw, 44px);
  border-radius: var(--r-card);
  background: var(--white);
  color: var(--ink);
}

.testimonials .testimonial-mark {
  display: block;
  height: .5em;
  color: var(--lime);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}

.testimonials blockquote {
  max-width: none;
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.012em;
  text-wrap: pretty;
}

.testimonials blockquote p + p {
  margin-top: .9em;
}

.testimonials figcaption {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}

.testimonials figcaption::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 1.5px var(--ink);
}

.testimonials .testimonial-featured {
  padding: clamp(28px, 3.6vw, 56px);
}

.testimonials .testimonial-featured .testimonial-mark {
  height: .5em;
  font-size: clamp(4rem, 3rem + 3vw, 6rem);
}

.testimonials .testimonial-featured blockquote {
  max-width: none;
  font-size: clamp(1.3125rem, 1rem + 1.25vw, 2rem);
  font-weight: 550;
  line-height: 1.36;
  letter-spacing: -.025em;
}

/* ---------- Ownership ---------- */

.ownership .section-inner > .divider {
  display: none;
}

.ownership .ownership-grid {
  display: grid;
  gap: 28px;
}

.ownership-grid h2 {
  max-width: 11em;
}

.ownership .ownership-copy {
  display: grid;
  gap: 0;
  max-width: 60ch;
  color: var(--ink-2);
  font-size: var(--text);
  line-height: 1.6;
  letter-spacing: 0;
}

.ownership .ownership-copy .lead {
  padding-bottom: 24px;
  color: var(--ink);
  font-size: var(--lead);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.ownership .ownership-copy p:not(.lead) {
  position: relative;
  padding: 18px 0 18px 28px;
  border-top: 1px solid var(--rule);
  text-wrap: pretty;
}

.ownership .ownership-copy p:not(.lead)::before {
  content: "";
  position: absolute;
  top: calc(18px + .8em - 5px);
  left: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 1.5px var(--ink);
}

/* ---------- Audience CTA band ---------- */

.section.audience {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* Active Theory principle (Heloísa: "animação para alguma parte do corpo... elementos
   orgânicos no fundo"), applied to this ONE body section: an organic light attached to the
   top-right edge, in the hero's language. Static and visible by default; tpc-motion.js may
   arm it so it drifts in once (2.4 s) the first time the band is seen, only with hover and
   motion allowed. Content and CTA are never animated. */
.section.audience::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(46% 110% at 104% -18%, rgb(213 255 70 / 24%) 0%, rgb(213 255 70 / 8%) 46%, rgb(213 255 70 / 0%) 74%),
    radial-gradient(30% 80% at 100% 120%, rgb(15 48 56 / 9%) 0%, rgb(15 48 56 / 0%) 70%),
    radial-gradient(34% 70% at -6% -10%, rgb(229 234 229 / 90%) 0%, rgb(229 234 229 / 0%) 70%);
  pointer-events: none;
}

.section.audience.atmos-armed::before {
  opacity: 0;
  transform: translate3d(8%, -4%, 0) scale(1.04);
}

.section.audience.atmos-armed.atmos-in::before {
  opacity: 1;
  transform: none;
  transition: opacity 2000ms var(--ease), transform 2400ms var(--ease);
}

.audience .divider {
  display: none;
}

.audience .audience-grid {
  display: grid;
  align-items: end;
  gap: 32px;
}

.audience .audience-copy {
  display: grid;
  gap: 20px;
  max-width: 780px;
}

.audience-copy h2 {
  max-width: 13em;
}

.audience-copy p {
  max-width: 58ch;
  color: var(--ink-2);
  font-size: var(--text);
  line-height: 1.6;
  letter-spacing: 0;
  text-wrap: pretty;
}

.audience-grid .cta {
  width: 100%;
  white-space: normal;
}

/* ---------- FAQ ---------- */

.faq .faq-grid {
  display: grid;
  gap: 32px;
}

.faq-grid h2 {
  max-width: 8em;
}

.faq .faq-list {
  display: block;
  border-top: 1px solid var(--rule);
}

.faq .faq-item {
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--rule);
}

.faq .faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-radius: 14px;
  cursor: pointer;
  list-style: none;
}

.faq .faq-item summary::before {
  content: none;
}

.faq .faq-question {
  color: var(--ink);
  font-size: clamp(1.125rem, 1rem + .55vw, 1.4375rem);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.02em;
  text-wrap: pretty;
}

.faq .faq-icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.faq .faq-icon img {
  position: absolute;
  inset: 10px;
  width: 24px;
  height: 24px;
}

.faq .faq-item summary:hover .faq-icon {
  background: var(--mist);
}

.faq .faq-item[open] .faq-icon {
  background: var(--lime);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.faq .faq-item summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.faq .faq-item > p {
  max-width: 62ch;
  padding: 0 0 26px;
  color: var(--ink-2);
  font-size: var(--text);
  line-height: 1.65;
  letter-spacing: 0;
  text-wrap: pretty;
}

/* ---------- Raio-X close and application form ---------- */

.section.contact {
  color: var(--ink);
}

.contact .contact-grid {
  display: grid;
  gap: 32px;
}

.contact .contact-copy {
  display: grid;
  align-content: start;
  gap: 20px;
}

.contact-copy h2 {
  max-width: 11em;
  color: var(--ink);
}

.contact-copy .lead {
  max-width: 30ch;
  color: var(--ink);
  font-size: var(--lead);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.contact-copy p:not(.lead) {
  max-width: 44ch;
  color: var(--ink-2);
  font-size: var(--text);
  line-height: 1.6;
  letter-spacing: 0;
  text-wrap: pretty;
}

#raio-x-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
  padding: clamp(20px, 3.2vw, 44px);
  border-radius: clamp(22px, 2vw, 28px);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--float);
}

.form-progress {
  gap: 16px;
}

.form-progress .progress-label {
  width: auto;
  min-width: 44px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.form-progress .progress-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--mist);
}

.form-progress .progress-fill {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--ink);
  transition: width 240ms var(--ease);
}

.form-progress .progress-fill::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 2px var(--ink);
}

.form-step {
  gap: 14px;
}

.form-step label,
.form-step legend {
  color: var(--ink);
  font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.form-step legend {
  margin-bottom: 14px;
  padding: 0;
}

.form-step .field-hint {
  margin-top: -4px;
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.5;
}

.form-step input[type="text"],
.form-step input[type="email"],
.form-step input[type="tel"],
.form-step textarea {
  height: 58px;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid var(--field);
  border-radius: var(--r-field);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.form-step textarea {
  height: auto;
  min-height: 140px;
  padding: 16px 18px;
  line-height: 1.55;
}

.form-step input:hover,
.form-step textarea:hover {
  border-color: var(--ink-2);
}

.form-step input[type="text"]:focus-visible,
.form-step input[type="email"]:focus-visible,
.form-step input[type="tel"]:focus-visible,
.form-step textarea:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.form-step input[aria-invalid="true"],
.form-step textarea[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

/* The controller focuses the invalid field; keep the error colour while focused. */
.form-step input[aria-invalid="true"]:focus-visible,
.form-step textarea[aria-invalid="true"]:focus-visible {
  border-color: var(--error);
  outline-color: var(--error);
}

.form-step .field-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--error);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
}

.form-step .field-error::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: .42em;
  border-radius: 50%;
  background: var(--error);
}

.form-step .radio-options {
  gap: 10px;
}

.form-step .radio-option {
  min-height: 58px;
  padding: 14px 18px;
  border: 1px solid var(--field);
  border-radius: var(--r-field);
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.form-step .radio-option:hover {
  border-color: var(--ink-2);
  background: var(--paper);
}

.form-step .radio-option:has(input:checked) {
  border-color: var(--ink);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.form-step .radio-option:has(input[aria-invalid="true"]) {
  border-color: var(--error);
}

.radio-option input[type="radio"] {
  width: 22px;
  height: 22px;
  background: var(--white);
  background-image: none;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.radio-option input[type="radio"]:checked {
  background: var(--lime);
  background-image: none;
  box-shadow: inset 0 0 0 6px var(--ink);
}

/* Actions wrap in DOM (= focus) order instead of overflowing the card. */
.form-actions {
  flex-wrap: wrap;
  gap: 12px;
}

#form-back {
  flex: none;
  min-height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

#form-back:hover {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
  text-decoration: none;
}

#form-next {
  flex: 1 1 auto;
  margin-left: auto;
  white-space: nowrap;
}

/* Phones: one consistent stack for steps 2–8 — "Voltar" first, full-width primary below. */
@media (max-width: 480px) {
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #form-back {
    align-self: flex-start;
  }

  #form-next {
    width: 100%;
    margin-left: 0;
    white-space: normal;
  }
}

#raio-x-form #form-next:disabled {
  opacity: .72;
  cursor: progress;
  transform: none;
}

#raio-x-form #form-next:disabled::after {
  border: 2.5px solid rgb(213 255 70 / 28%);
  border-top-color: var(--lime);
  background: var(--ink);
  transform: none;
}

#raio-x-form #form-back:disabled {
  opacity: .5;
  cursor: not-allowed;
}

#form-status {
  padding: 16px 18px;
  border-radius: var(--r-field);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

#form-status[data-state="error"] {
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--error);
  color: var(--error);
}

/* Success: the controller hides the actions and progress; the status remains. */
#raio-x-form:has(.form-actions[hidden]) #form-status {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 20px;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  font-size: var(--text);
}

#raio-x-form:has(.form-actions[hidden]) #form-status::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lime) var(--check-ink) center / 20px 20px no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.privacy-link {
  align-self: flex-start;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--hair-strong);
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}

.privacy-link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(40px, 5vw, 56px);
  background: var(--paper);
  color: var(--ink);
}

.site-footer .footer-inner {
  display: grid;
  gap: 28px;
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

.site-footer .footer-brand {
  display: grid;
  justify-items: start;
  gap: 16px;
  max-width: none;
}

.footer-brand .brand-logo {
  width: 196px;
}

.site-footer .footer-brand p {
  max-width: 36ch;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.site-footer nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  width: auto;
}

.site-footer nav a {
  padding: 10px 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--t-fast) var(--ease);
}

.site-footer nav a:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* ---------- Near-footer bar (mobile; controller-driven) ---------- */

.near-footer {
  top: 10px;
  left: var(--inset);
  right: var(--inset);
  gap: 8px;
  max-width: none;
  margin: 0;
}

.near-footer .near-footer-bar {
  display: grid;
  grid-template-columns: minmax(44px, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 6px;
  height: 64px;
  padding: 0 6px;
  border-radius: 22px;
  background: rgb(255 255 255 / 88%);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 0 0 1px var(--hair), 0 18px 40px -26px rgb(15 48 56 / 50%);
}

@media (min-width: 520px) {
  .near-footer .near-footer-bar {
    gap: 8px;
    padding: 0 8px;
  }
}

.near-footer .near-footer-brand {
  flex: none;
  justify-self: center;
  min-width: 0;
}

.near-footer .near-footer-brand img {
  width: clamp(104px, 29vw, 140px);
  max-width: none;
}

.near-footer .near-footer-cta {
  justify-self: end;
}

.near-footer .near-footer-toggle[aria-expanded="true"] img {
  opacity: 0;
}

.near-footer .near-footer-toggle[aria-expanded="true"]::before,
.near-footer .near-footer-toggle[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  right: 12px;
  height: 1.5px;
  margin-top: -.75px;
  background: var(--ink);
  transform: rotate(45deg);
}

.near-footer .near-footer-toggle[aria-expanded="true"]::after {
  transform: rotate(-45deg);
}

.near-footer .near-footer-panel {
  gap: 0;
  padding: 6px 20px;
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--hair), var(--float);
}

.near-footer.is-open {
  top: 10px;
  left: var(--inset);
  right: var(--inset);
  max-width: none;
  padding: 0;
  background: transparent;
}

.near-footer.is-open .near-footer-panel {
  padding: 6px 20px;
  border-radius: 22px;
}

.near-footer .near-footer-panel a {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-decoration: none;
}

.near-footer .near-footer-panel a:last-child {
  border-bottom: 0;
}

.near-footer .near-footer-panel a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

/* Light frosted scrim while the mobile menu is open; it never intercepts taps. */
body:has(.near-footer.is-open)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgb(245 245 242 / 72%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* ---------- Tablet refinements (641–900) ---------- */

@media (min-width: 641px) {
  .hero-copy .cta,
  .audience-grid .cta {
    width: auto;
  }

  #form-next {
    flex: 0 0 auto;
    min-width: 220px;
  }

  .faq .faq-item > p {
    padding-right: 64px;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .agency .agency-photo img,
  .chapter .chapter-photo img {
    aspect-ratio: 16 / 10;
  }
}

/* ---------- Desktop (901+) ---------- */

@media (min-width: 901px) {
  html {
    scroll-padding-top: 104px;
  }

  .site-header {
    position: fixed;
    top: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    width: calc(100% - 32px);
    height: 72px;
    margin-inline: auto;
    padding: 0 10px 0 20px;
    border-radius: 999px;
  }

  .site-header.is-scrolled {
    background: rgb(255 255 255 / 92%);
    box-shadow: 0 0 0 1px var(--hair), 0 18px 40px -28px rgb(15 48 56 / 55%);
  }

  .site-header .menu-toggle {
    display: none;
  }

  .site-header .brand-logo {
    width: 140px;
  }

  .site-header #main-nav {
    gap: 2px;
  }

  .site-header #main-nav a:not(.cta) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--t-fast) var(--ease);
  }

  .site-header #main-nav a:not(.cta):hover {
    background: var(--mist);
    text-decoration: none;
  }

  .site-header #main-nav a.is-current {
    background: var(--mist);
  }

  .site-header #main-nav .cta-nav {
    min-height: 48px;
    margin-left: 6px;
    padding: 0 16px;
  }

  .hero {
    padding-top: clamp(136px, 10.5vw, 152px);
  }

  /* 901–1099: stacked statement; 12em keeps the same three-line break as wider screens
     ("Seja encontrado por / pacientes que procuram / sua especialidade"). */
  .hero-copy h1 {
    max-width: 12em;
    font-size: clamp(3.5rem, 1.6rem + 3.6vw, 4.75rem);
    line-height: 1.02;
  }

  .hero-support {
    margin-top: 28px;
  }

  .hero-copy p {
    max-width: 46ch;
  }

  .agency-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    column-gap: var(--col-gap);
    row-gap: clamp(40px, 4.5vw, 64px);
  }

  .agency-grid > h2 {
    grid-column: 1 / span 6;
  }

  .agency .lead-paragraph {
    grid-column: 7 / -1;
  }

  .agency .agency-photo {
    grid-column: 1 / span 6;
  }

  .agency .agency-copy {
    grid-column: 7 / -1;
    align-self: end;
  }

  .agency .agency-photo img {
    aspect-ratio: 16 / 11;
  }

  .solution .solution-intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    column-gap: var(--col-gap);
  }

  .solution-intro h2 {
    grid-column: 1 / span 7;
  }

  .solution .solution-copy {
    grid-column: 8 / -1;
  }

  .service-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .service-nav a {
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "index arrow"
      "art art"
      "name name"
      "desc desc";
    align-items: start;
    min-height: clamp(320px, 26vw, 380px);
    padding: 24px 24px 32px 28px;
  }

  .service-nav .service-name {
    margin-top: 0;
  }

  .chapter-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--col-gap);
  }

  .chapter .chapter-title {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: clamp(18px, 2vw, 28px);
  }

  .chapter .chapter-lead {
    grid-column: 1 / span 6;
    grid-row: 2;
  }

  .chapter .chapter-copy {
    grid-column: 1 / span 6;
    grid-row: 3;
  }

  .chapter .chapter-photo {
    position: sticky;
    top: 112px;
    grid-column: 7 / -1;
    grid-row: 2 / span 2;
    margin-top: 0;
  }

  .chapter .divider,
  .chapter .services-line {
    grid-column: 1 / -1;
  }

  .chapter-flip .chapter-lead,
  .chapter-flip .chapter-copy {
    grid-column: 7 / -1;
  }

  .chapter-flip .chapter-photo {
    grid-column: 1 / span 6;
  }

  .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .testimonials .testimonial-featured {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ownership .ownership-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--col-gap);
  }

  .ownership-grid h2 {
    grid-column: 1 / span 5;
  }

  .ownership .ownership-copy {
    grid-column: 7 / -1;
  }

  .audience .audience-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 64px;
  }

  .audience-grid .cta {
    align-self: end;
  }

  .contact .contact-copy {
    max-width: 720px;
  }

  #raio-x-form {
    max-width: 720px;
  }

  .site-footer .footer-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 48px;
  }

  .site-footer nav {
    justify-content: flex-end;
  }
}

/* ---------- Wide desktop (1100+) ---------- */

@media (min-width: 1100px) {
  /* Statement left (cols 1–8), support group right (cols 9–12), bottom-aligned so the CTA
     closes on the headline's last line. The H1 size is derived from its 8-column measure:
     the widest line, "pacientes que procuram", measures about 10.72em in Manrope 700. */
  .hero .hero-copy-inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    column-gap: var(--col-gap);
  }

  .hero-copy h1 {
    grid-column: 1 / span 8;
    max-width: none;
    font-size: min(4.75rem, calc((var(--hero-c) * .6667 - var(--col-gap) * .3333) / 11));
  }

  .hero-support {
    grid-column: 9 / -1;
    margin-top: 0;
  }

  /* Body size in the 4-column group keeps paragraph + CTA no taller than the headline. */
  .hero-copy p {
    max-width: none;
    font-size: var(--text);
  }

  .agency-grid > h2 {
    grid-column: 1 / span 7;
  }

  .agency .lead-paragraph,
  .agency .agency-copy {
    grid-column: 8 / -1;
  }

  .agency .agency-photo {
    grid-column: 1 / span 7;
  }

  .chapter .chapter-lead,
  .chapter .chapter-copy {
    grid-column: 1 / span 5;
  }

  .chapter-flip .chapter-lead,
  .chapter-flip .chapter-copy {
    grid-column: 8 / -1;
  }

  .chapter-flip .chapter-photo {
    grid-column: 1 / span 6;
  }

  /* Full-width three-column line (≈300–395 px per step); below 1100 the vertical timeline stays. */
  .process .process-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .process .process-steps::before {
    top: 13px;
    right: 0;
    bottom: auto;
    left: 12px;
    width: auto;
    height: 1.5px;
  }

  .process .process-step,
  .process .process-step:last-child {
    padding: 52px 0 0;
  }

  .testimonial-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .testimonials .testimonial-featured {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
  }

  .testimonials .testimonial:not(.testimonial-featured) {
    grid-column: 8 / -1;
  }

  .faq .faq-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--col-gap);
  }

  .faq-grid h2 {
    position: sticky;
    top: 120px;
    grid-column: 1 / span 4;
  }

  .faq .faq-list {
    grid-column: 6 / -1;
  }

  .contact .contact-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    column-gap: var(--col-gap);
  }

  .contact .contact-copy {
    position: sticky;
    top: 120px;
    grid-column: 1 / span 5;
    max-width: none;
  }

  #raio-x-form {
    grid-column: 7 / -1;
    max-width: none;
  }
}

@media (min-width: 1121px) {
  .site-header {
    width: min(1320px, calc(100% - 2 * var(--gutter) + 40px));
    padding: 0 12px 0 20px;
  }

  .site-header .brand-logo {
    width: 176px;
  }

  .site-header #main-nav {
    gap: 4px;
  }

  .site-header #main-nav a:not(.cta) {
    padding: 0 14px;
    font-size: 15px;
  }

  .site-header #main-nav .cta-nav {
    margin-left: 8px;
    padding: 0 22px;
    font-size: 15px;
  }
}

/* ---------- Motion: state transitions + two finite background entries ---------- */

/* The hero stage light comes up once on load (1.6 s). Captures, text and CTA are static. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .hero-work::before {
    animation: tpc-stage-light 1600ms var(--ease) 120ms backwards;
  }
}

@keyframes tpc-stage-light {
  from { opacity: 0; transform: scale(1.06); }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .form-step:not([hidden]) {
    animation: tpc-rise 240ms var(--ease) backwards;
  }

  .faq .faq-item[open] > p {
    animation: tpc-rise 220ms var(--ease) backwards;
  }

  .near-footer:not([hidden]) {
    animation: tpc-drop 220ms var(--ease) backwards;
  }

  #raio-x-form #form-next:disabled::after {
    animation: tpc-spin 800ms linear infinite;
  }
}

@keyframes tpc-rise {
  from { opacity: 0; transform: translateY(6px); }
}

@keyframes tpc-drop {
  from { opacity: 0; transform: translateY(-8px); }
}

@keyframes tpc-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .service-nav a:hover,
  .service-nav a:active,
  .cta:active {
    transform: none;
  }

  .cta:hover::after {
    transform: none;
  }
}