/* ============================================================================
   Dr. Waldir Altmann Junior. Grammar: prontuário (clinical record).
   Theme is six colour roles and two faces; everything else derives.
   ========================================================================== */

:root {
  --sc-canvas:     #EDEAE3;
  --sc-surface:    #E4E0D7;
  --sc-ink:        #16150F;
  --sc-ink-soft:   #6A665B;
  --sc-accent:     #1D4E55;
  --sc-accent-ink: #F2F0EA;

  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --sc-shadow-color: 40 34 22;
  --sc-section: clamp(3.5rem, 6.5vw, 6.5rem);
  --spine-w: 15rem;
  --r: 2px;                    /* one radius scale, held across the page */
}

/* The one licensed two-stop accent: a page that hard-cuts to a dark ground
   cannot clear 4.5:1 on both with a single lightness. One hue, two stops. */
.on-dark {
  --sc-canvas:     #0E1112;
  --sc-surface:    #161B1C;
  --sc-ink:        #E9E6DE;
  --sc-ink-soft:   #AEBABB;
  --sc-accent:     #6FCBD3;
  --sc-accent-ink: #0E1112;
  color: var(--sc-ink);        /* colour is inherited computed; restate it */
}

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

body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
}

.sc-grain { opacity: 0.03; }

:is(h1, h2, h3, .scope__i h3, .step h3, .frente__h) { hyphens: manual; overflow-wrap: break-word; }

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

:where(a, button, summary, input, details):focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: var(--r);
}

.skip {
  position: fixed; top: -100px; left: var(--sc-4); z-index: 99;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: var(--sc-3) var(--sc-4); border-radius: var(--r);
  font-size: var(--sc-t-sm); text-decoration: none;
}
.skip:focus-visible { top: var(--sc-4); }

/* The brand mark is a white bitmap in the supplied SVG. Masking it lets it
   take the page ink on either ground instead of disappearing on paper. */
.mark {
  display: block; width: 8.5rem; height: 1.5rem;
  background: currentColor;
  -webkit-mask: url("assets/logo-mark.png") no-repeat left center / contain;
  mask: url("assets/logo-mark.png") no-repeat left center / contain;
}
.mark--sm { width: 6.25rem; height: 1.1rem; }

/* ------------------------------------------------------------- the spine -- */

.spine {
  position: fixed; inset-block: 0; left: 0; width: var(--spine-w);
  z-index: var(--sc-z-chrome);
  display: flex; flex-direction: column; gap: var(--sc-5);
  padding: var(--sc-6) var(--sc-5);
  border-right: 1px solid var(--sc-hairline);
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  backdrop-filter: blur(10px);
  transition: color 500ms var(--sc-ease-out), background-color 500ms var(--sc-ease-out), border-color 500ms var(--sc-ease-out);
}
.spine__mark { color: var(--sc-ink); text-decoration: none; }

.spine__glyph { display: flex; align-items: center; gap: var(--sc-3); }
.ring { width: 3.25rem; height: 3.25rem; overflow: visible; }
.ring circle {
  fill: none; stroke-width: 3; stroke-linecap: butt;
  transform: rotate(-96deg); transform-origin: 36px 36px;
}
.ring__track { stroke: var(--sc-hairline-strong); stroke-dasharray: 150 20; }
.ring__prog {
  stroke: var(--sc-accent); stroke-linecap: round;
  stroke-dasharray: 169.6; stroke-dashoffset: 169.6;
  transition: stroke-dashoffset 480ms var(--sc-ease-out);
}

.spine__count { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); line-height: 1.3; color: var(--sc-ink-soft); }
.spine__countnum { display: block; font-size: var(--sc-t-lg); color: var(--sc-ink); font-variant-numeric: tabular-nums; }

.spine__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-1); }
.spine__list a {
  display: block; padding: var(--sc-1) 0 var(--sc-1) var(--sc-4);
  position: relative;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); text-decoration: none;
  transition: color 160ms var(--sc-ease-out);
}
.spine__list a::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 8px; height: 1px; background: currentColor; opacity: 0.5;
  transition: width 200ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .spine__list a:hover { color: var(--sc-ink); } }
.spine__list a.is-done { color: var(--sc-ink); }
.spine__list a.is-here { color: var(--sc-accent); }
.spine__list a.is-here::before { width: 16px; opacity: 1; }

/* The signature move made visible. A locked stage stays legible: the visitor
   can read where the page is going, they just cannot jump there yet. */
.spine__list a.is-locked { color: var(--sc-ink-soft); opacity: 0.42; }
.spine__list a.is-locked::before { width: 5px; opacity: 0.4; }
@media (hover: hover) and (pointer: fine) {
  .spine__list a.is-locked:hover { opacity: 0.72; }
}

.spine__note {
  margin: 0; min-height: 3.2em;
  font-size: var(--sc-t-sm); line-height: 1.32; color: var(--sc-accent);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out);
}
.spine__note.is-on { opacity: 1; transform: none; }

/* Sequence law: no action is offered before Investigação. */
.spine__act { margin-top: auto; }
.spine__act[hidden] { display: none; }

.cta {
  display: inline-block;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-normal);
  padding: var(--sc-3) var(--sc-5); border-radius: var(--r);
  text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .cta:hover { background: color-mix(in oklab, var(--sc-accent) 88%, black); } }
.cta:active { transform: translateY(1px); }
.cta--quiet { background: transparent; color: var(--sc-accent); border: 1px solid var(--sc-accent); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .cta--quiet:hover { background: var(--sc-accent); color: var(--sc-accent-ink); } }

.quiet { color: var(--sc-ink-soft); text-decoration: none; font-size: var(--sc-t-sm); border-bottom: 1px solid var(--sc-hairline-strong); padding-bottom: 1px; }
@media (hover: hover) and (pointer: fine) { .quiet:hover { color: var(--sc-ink); border-color: currentColor; } }

main { margin-left: var(--spine-w); }

/* ============================================================= 1 · QUEIXA */

.hero { background: var(--sc-canvas); }
.hero__plane { position: absolute; inset: 0; }
/* A global img rule would shrink an absolutely positioned plane on phones. */
.hero__plane img { max-width: none; }
/* transition on transform would ease every per-frame scroll write. Never. */
.hero__plane { transition: opacity 400ms var(--sc-ease-out); }

.room__light {
  position: absolute; inset: 0;
  background:
    radial-gradient(86% 62% at 72% 2%, #FFFFFF 0%, rgba(255,255,255,0) 64%),
    linear-gradient(178deg, #F6F4EF 0%, #EFECE5 58%, #E7E3DA 100%);
}
/* One hairline where a wall would meet a floor. It is the whole architecture:
   enough to read as a room, not enough to read as a diagram. */
.room__line {
  position: absolute; left: 0; right: 0; top: 68%; height: 1px;
  background: color-mix(in oklab, var(--sc-ink) 7%, transparent);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 78%, transparent 100%);
}
.hero__plane--ring { display: grid; place-items: center; }
.hero__ring {
  width: min(78vh, 52rem); height: auto; overflow: visible;
  translate: 14% -4%;
}
.hero__ring circle {
  fill: none;
  stroke: color-mix(in oklab, var(--sc-ink) 13%, transparent);
  stroke-width: 0.6;
  /* r = 96 -> circumference 603.2. One gap, same proportion as the wordmark. */
  stroke-dasharray: 512 91.2;
  transform: rotate(-104deg);
  transform-origin: 100px 100px;
}

.hero__plane--subject { display: flex; align-items: flex-end; justify-content: flex-end; }
.hero__subject {
  width: auto; height: 84%;
  margin-right: 6vw;
  object-fit: contain; object-position: bottom;
  /* The photograph was retouched on kie.ai (relit, sharpened, 1288x1893) and
     cut out there with a clean alpha. No mask-image here: a mask clips at the
     element's border box, which cut the blurred drop-shadow off in straight
     lines and drew a faint rectangle behind him. */
  filter: drop-shadow(0 30px 50px rgb(var(--sc-shadow-color) / 0.18));
}

/* Foreground dips where the subject stands so it never eats the copy. */
.hero__plane--fore {
  top: auto; bottom: -6%; height: 34%;
  background: linear-gradient(to top, rgba(220,215,203,0.8) 0%, rgba(220,215,203,0.35) 46%, rgba(220,215,203,0) 100%);
  /* dips away completely where he stands: it was washing out the coat */
  mask-image: radial-gradient(120% 110% at 76% 120%, transparent 0%, transparent 58%, #000 76%);
}
/* A corner of density sized to the copy block, not a full-frame wash: the
   display word and the coat both pass under the credential line between 700
   and 1080px, a band the harness does not sample. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 78% at 0% 100%,
    rgba(240,237,229,0.94) 0%, rgba(240,237,229,0.72) 38%, rgba(240,237,229,0) 68%);
}
.hero__floor {
  position: absolute; inset-inline: 0; bottom: 0; height: 96px;
  background: linear-gradient(to bottom, rgba(237,234,227,0) 0%, var(--sc-canvas) 86%);
  z-index: 2;
}

.hero__copy {
  position: absolute; z-index: 4;
  left: var(--sc-gutter); right: auto;
  top: clamp(4.5rem, 15vh, 10rem);
  bottom: clamp(2.5rem, 9vh, 6rem);
  max-width: min(52rem, 52vw);
  /* the name holds the top of the empty left column, the thesis the bottom */
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--sc-6);
}

.hero__name { margin: 0; font-family: var(--sc-font-display); font-weight: 500; color: var(--sc-ink); }
.hero__dr {
  display: block; margin-bottom: var(--sc-3);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); font-weight: 400;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft);
}
.hero__big {
  display: block;
  font-size: clamp(3.2rem, 7.4vw, 8.5rem);
  line-height: 0.9; letter-spacing: -0.045em;
  white-space: nowrap;
}
/* the suffix reads as part of the name without claiming a third display line */
.hero__jr {
  font-size: 0.3em; font-weight: 400; letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink-soft); vertical-align: baseline;
}
.hero__role {
  margin: var(--sc-5) 0 0;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft);
}
.hero__what { max-width: 40rem; }
/* The thesis steps down now that the name carries the top of the hierarchy. */
.hero__h1 { margin: 0; font-weight: 500; font-size: clamp(1.7rem, 2.7vw, 3rem); line-height: 1.04; }
.hero__h1 em { font-style: normal; color: var(--sc-accent); }
.hero__lede { margin-top: var(--sc-5); color: var(--sc-ink-soft); max-width: 36ch; font-size: var(--sc-t-base); }

/* ========================================================= 2 . O QUE TRATO */

.act--trato { border-top: 1px solid var(--sc-hairline); }
.trato { display: grid; gap: var(--sc-7); }
.trato__head { max-width: 62ch; }
.trato__head .sc-label { color: var(--sc-accent); }

/* Rows on a hairline grid, not a grid of identical cards. */
.scope { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4.5rem); }
.scope__i { padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline); position: relative; }
.scope__i h3 { margin: 0 0 var(--sc-2); font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: var(--sc-track-snug); line-height: 1.1; max-width: 22ch; }
.scope__i p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 44ch; }
.scope__sys { position: absolute; top: var(--sc-5); right: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); opacity: 0.75; }

/* ============================================================ 3 . O METODO */

.metodo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: var(--sc-7) var(--sc-gutter); background: var(--sc-canvas); }
.metodo__left { display: grid; align-content: center; gap: var(--sc-7); }

.metodo__media {
  position: relative; margin: 0; align-self: center;
  aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--sc-hairline);
  box-shadow: 0 34px 70px -46px rgb(var(--sc-shadow-color) / 0.55);
}
.metodo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.metodo__img[data-when="talk"] { opacity: 1; }
/* Visible across step 02 only, ramped at both ends, driven off the act's own
   progress so the picture changes when the argument does. */
.metodo__img[data-when="exam"] {
  opacity: calc(
    clamp(0, (var(--sc-p, 0) - 0.26) / 0.06, 1) *
    clamp(0, (0.56 - var(--sc-p, 0)) / 0.06, 1)
  );
}
.metodo__ground .sc-label { color: var(--sc-accent); margin: 0 0 var(--sc-4); }
.metodo__h { margin: 0; font-weight: 500; }
.metodo__sub { margin: var(--sc-5) 0 0; color: var(--sc-ink-soft); max-width: 40ch; }

/* The four steps share one cell and cross over inside it, so the frame holds
   still while the argument advances. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; align-content: center; min-height: 34vh; }
.steps .step { grid-area: 1 / 1; align-self: center; display: grid; gap: var(--sc-3); padding-left: var(--sc-7); border-left: 1px solid var(--sc-accent); }
.step__n { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); color: var(--sc-accent); }
.step h3 { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); font-weight: 500; letter-spacing: var(--sc-track-snug); line-height: 1.04; }
.step p { margin: 0; color: var(--sc-ink-soft); max-width: 46ch; }

/* ========================================================= 6 . TRAJETORIA */

.traj { display: grid; gap: var(--sc-7); }
.traj__head { max-width: 68ch; }
.traj__head .sc-label { color: var(--sc-accent); }
.quote { margin: var(--sc-6) 0 0; padding-left: var(--sc-5); border-left: 1px solid var(--sc-accent); }
.quote p { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.38; letter-spacing: var(--sc-track-snug); }
.quote cite { display: block; margin-top: var(--sc-3); font-style: normal; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }

.creds { margin: 0; display: grid; gap: 0; }
.creds > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--sc-5); padding: var(--sc-3) 0; border-top: 1px solid var(--sc-hairline); }
.creds dt { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.creds dd { margin: 0; font-size: var(--sc-t-sm); max-width: 62ch; }

.traj__cols { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }

/* ======================================================= 4 · INVESTIGAÇÃO */

.inv { display: grid; align-items: center; background: var(--sc-canvas); }
.rail { display: flex; align-items: stretch; gap: clamp(1.5rem, 3vw, 4rem); padding-inline: var(--sc-gutter); will-change: transform; }
.rail__lead { flex: 0 0 clamp(18rem, 26vw, 34rem); align-self: center; display: grid; gap: var(--sc-4); align-content: center; }
.rail__lead .sc-label { color: var(--sc-accent); margin: 0; }
.rail__lead h2 { margin: 0; }

.frente {
  flex: 0 0 clamp(18rem, 24vw, 30rem);
  display: grid; gap: var(--sc-3); align-content: start;
  padding: var(--sc-6) var(--sc-5);
  background: color-mix(in oklab, var(--sc-surface) 70%, var(--sc-canvas));
  border: 1px solid var(--sc-hairline);
  border-top: 2px solid var(--sc-accent);
  border-radius: var(--r);
}
.frente__sys { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft); }
.frente__h { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: var(--sc-track-snug); line-height: 1.08; }
.frente__p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.frente__l { margin: var(--sc-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sc-2); }
.frente__l li { font-size: var(--sc-t-sm); padding-top: var(--sc-2); border-top: 1px solid var(--sc-hairline); }

.rail__close { flex: 0 0 clamp(20rem, 30vw, 40rem); align-self: center; display: grid; gap: var(--sc-4); }
.rail__close .sc-label { color: var(--sc-accent); margin: 0; }
.refusal { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 46ch; }
.refusal--hard { color: var(--sc-ink); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.34; letter-spacing: var(--sc-track-snug); }

/* ============================================================ 5 · SÍNTESE */

.synth {
  background: var(--sc-canvas);
  display: grid; place-items: center;
  padding: var(--sc-7) var(--sc-gutter);
}
/* Keep the standing figure clear of the copy column at every desktop ratio. */
.synth :is(video[data-sc-scrub], .sc-stage__poster) { object-position: 41% 50%; }
/* On squarer desktop stages the clip is cropped at the sides and the figure,
   with the translucent volume it grows mid-clip, slid under the copy at
   1440x900 (2.21:1). Push the frame so the figure sits in the left third. */
@media (min-width: 861px) and (max-aspect-ratio: 16/10) {
  .synth :is(video[data-sc-scrub], .sc-stage__poster) { object-position: 80% 50%; }
}

.synth__scrim {
  position: absolute; inset: 0 0 0 auto; width: min(50rem, 66%);
  background: linear-gradient(to left, rgba(14,17,18,0.97) 0%, rgba(14,17,18,0.93) 26%, rgba(14,17,18,0.7) 55%, rgba(14,17,18,0) 100%);
  z-index: 1; pointer-events: none;
}
.synth__copy { position: relative; z-index: 2; width: 100%; max-width: 27rem; margin-left: auto; margin-right: clamp(0rem, 3vw, 3rem); }

/* ---- the treatment index ---------------------------------------------------
   Every value below is continuous in --sc-p, which the engine writes on the
   act every frame, so the list moves with the hand exactly as the clip does.
   Per row: --in rises as its window opens, --act is 1 only inside it, --fill
   runs 0 to 1 across it. Opacities are 0.5 upcoming, 1 current, 0.7 done. */
.treat__label { margin: 0 0 var(--sc-5); color: var(--sc-accent); }
.treat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2); }
.treat__row {
  --in:   clamp(0, calc((var(--sc-p, 0) - var(--a)) / 0.04), 1);
  --out:  clamp(0, calc((var(--b) - var(--sc-p, 0)) / 0.04), 1);
  --act:  calc(var(--in) * var(--out));
  --fill: clamp(0, calc((var(--sc-p, 0) - var(--a)) / (var(--b) - var(--a))), 1);
  position: relative; padding: var(--sc-2) 0 var(--sc-2) var(--sc-5);
}
.treat__rail { position: absolute; left: 0; top: var(--sc-3); bottom: var(--sc-2); width: 1px; background: color-mix(in oklab, var(--sc-ink) 16%, transparent); }
.treat__rail::after {
  content: ""; position: absolute; inset: 0; background: var(--sc-accent);
  transform: scaleY(var(--fill)); transform-origin: top;
}
.treat__name {
  margin: 0; display: flex; align-items: baseline; gap: var(--sc-3);
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-xl); line-height: 1.1; letter-spacing: var(--sc-track-snug);
  opacity: calc(0.5 + 0.2 * var(--in) + 0.3 * var(--act));
  color: color-mix(in oklab, var(--sc-accent) calc(var(--act) * 100%), var(--sc-ink));
}
.treat__n { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); color: var(--sc-ink-soft); }
/* space is always reserved, so a sentence arriving never pushes the rows below */
.treat__desc { margin: var(--sc-2) 0 0; min-height: 3.1em; font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); max-width: 34ch; }
.treat__end { margin-top: var(--sc-4); padding-top: var(--sc-4); border-top: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); }
.treat__verdict { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1.06; letter-spacing: var(--sc-track-tight); color: var(--sc-accent); text-wrap: balance; }
.treat__sub { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 40ch; }

.places { display: grid; gap: var(--sc-6); }
.place h3 { margin: 0 0 var(--sc-2); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500; letter-spacing: var(--sc-track-snug); }
.place p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

.faq { border-top: 1px solid var(--sc-hairline); }
.faq details { border-bottom: 1px solid var(--sc-hairline); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--sc-4) 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-4);
  font-size: var(--sc-t-base);
  transition: color 160ms var(--sc-ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sc-font-mono); color: var(--sc-accent); flex: none; }
.faq details[open] summary::after { content: "–"; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--sc-accent); } }
.faq details p { margin: 0 0 var(--sc-5); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 62ch; }

/* ============================================================ 7 · CONDUTA */

.conduta { display: grid; place-items: center; padding: var(--sc-6) var(--sc-gutter); background: var(--sc-canvas); }
.conduta__plate {
  width: min(58rem, 100%);
  background: color-mix(in oklab, #FBF9F3 78%, var(--sc-canvas));
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--r);
  box-shadow: 0 40px 80px -56px rgb(var(--sc-shadow-color) / 0.55);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  display: grid; gap: var(--sc-4);
}
.plate__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); padding-bottom: var(--sc-4); border-bottom: 1px solid var(--sc-hairline); }
.plate__head .sc-label { color: var(--sc-accent); margin: 0; }
.conduta__h { margin: var(--sc-3) 0 0; font-weight: 500; }
.conduta__p { margin: 0; color: var(--sc-ink-soft); max-width: 56ch; }
.conduta__carry {
  margin: 0; padding: var(--sc-4); border-radius: var(--r);
  background: color-mix(in oklab, var(--sc-accent) 9%, transparent);
  border-left: 1px solid var(--sc-accent);
  font-size: var(--sc-t-sm);
}
.conduta__carry strong { font-weight: 600; }
.conduta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5); margin-top: var(--sc-3); }
.plate__sign { margin-top: var(--sc-4); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); display: grid; gap: var(--sc-2); }
.sign__name { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-base); font-weight: 600; }
.sign__reg { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); color: var(--sc-ink-soft); }
.sign__small { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--sc-ink-soft); max-width: 70ch; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--sc-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------- privacy --- */
.privacy { border: 0; padding: 0; background: transparent; max-width: min(42rem, 92vw); color: var(--sc-ink); }
.privacy::backdrop { background: rgb(var(--sc-shadow-color) / 0.55); backdrop-filter: blur(4px); }
.privacy__in { background: var(--sc-canvas); border: 1px solid var(--sc-hairline-strong); border-radius: var(--r); padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: var(--sc-4); max-height: 82vh; overflow: auto; }
.privacy h3 { margin: var(--sc-4) 0 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent); }
.privacy .sc-body { font-size: var(--sc-t-sm); }
.privacy .cta { justify-self: start; margin-top: var(--sc-4); }

/* ============================================================== RESPONSIVE
   Mobile is art-directed, not shrunk: the spine becomes a bottom rail, the
   subject is cropped and anchored, and the headline sits above it rather
   than behind it.
   ========================================================================= */

@media (max-width: 1080px) {
  main { margin-left: 0; }

  /* Tablets: the larger retouched portrait filled most of an 820px stage and
     the top-anchored name landed on his hair at 1.01:1. From here down the
     hero reads top to bottom: text first, the portrait below and to the right,
     and the scrim moves to the corner the text actually occupies. */
  .hero__copy { display: block; bottom: auto; top: clamp(3.5rem, 9vh, 6rem); }
  .hero__what { margin-top: var(--sc-6); }
  .hero__subject { height: 54%; }
  .hero__scrim {
    background: radial-gradient(120% 90% at 0% 0%,
      rgba(240,237,229,0.94) 0%, rgba(240,237,229,0.7) 40%, rgba(240,237,229,0) 70%);
  }
  .spine {
    inset: auto 0 0 0; width: auto; flex-direction: row; align-items: center;
    gap: var(--sc-4); padding: var(--sc-3) var(--sc-gutter);
    border-right: 0; border-top: 1px solid var(--sc-hairline);
    padding-bottom: max(var(--sc-3), env(safe-area-inset-bottom));
  }
  .spine__mark { display: none; }
  .spine__glyph { gap: var(--sc-2); flex: none; }
  .ring { width: 2.25rem; height: 2.25rem; }
  /* "0 de 6 sinais" wrapped to three lines at 390px and collided with the
     stage list. The glyph already carries the meaning here. */
  .spine__count { font-size: var(--sc-t-sm); white-space: nowrap; flex: none; }
  .spine__countnum { display: inline; font-size: var(--sc-t-sm); color: var(--sc-ink); }
  /* Read from the DOM, not hardcoded: a literal went stale the moment the
     stage count changed from 6 to 7. */
  .spine__countnum::after { content: attr(data-total); color: var(--sc-ink-soft); }
  .spine__countof { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .spine__list { display: flex; gap: var(--sc-4); overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
  .spine__list::-webkit-scrollbar { display: none; }
  .spine__list a { padding: var(--sc-2) 0; white-space: nowrap; }
  .spine__list a::before { display: none; }
  .spine__act { margin-top: 0; flex: none; }
  .spine__act .cta { padding: var(--sc-2) var(--sc-4); }

  .traj__cols { grid-template-columns: minmax(0, 1fr); }
  .scope { grid-template-columns: minmax(0, 1fr); }
  .metodo { grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--sc-5); }
  .metodo__left { gap: var(--sc-5); }
  .metodo__media { aspect-ratio: 16 / 10; max-height: 26vh; justify-self: stretch; }
  .steps { min-height: 30vh; }
  .creds > div { grid-template-columns: minmax(0, 1fr); gap: var(--sc-1); }

  /* Below 1080 the figure is wide relative to the copy column, so a right-hand
     scrim protects nothing. Band it from the bottom and move the copy down. */
  .synth__copy { max-width: none; margin-right: 0; align-self: end; }
  .synth__scrim {
    inset: auto 0 0 0; width: auto; height: 52%;
    background: linear-gradient(to top, rgba(14,17,18,0.98) 0%, rgba(14,17,18,0.95) 38%, rgba(14,17,18,0.66) 68%, rgba(14,17,18,0) 100%);
  }
  /* Stacked, the five copy blocks made the column tall enough to push the
     first line up into the figure, where it measured 3.78:1. They never share
     a moment, so they can share a cell and cross over in place. */
  /* One grid for the whole block: four stage columns with horizontal rails,
     and every sentence plus the verdict sharing ONE cell below them, so the
     text changes in place instead of stacking up the screen. */
  .treat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sc-2); }
  .treat__label { grid-column: 1 / -1; margin-bottom: var(--sc-3); }
  .treat__list, .treat__row { display: contents; }
  .treat__row:nth-child(1) > * { grid-column: 1; }
  .treat__row:nth-child(2) > * { grid-column: 2; }
  .treat__row:nth-child(3) > * { grid-column: 3; }
  .treat__row:nth-child(4) > * { grid-column: 4; }
  .treat__rail { position: relative; grid-row: 2; height: 2px; width: auto; top: auto; bottom: auto; left: auto; }
  .treat__rail::after { transform: scaleX(var(--fill)); transform-origin: left; }
  .treat__name { grid-row: 3; margin-top: var(--sc-2); font-size: clamp(0.66rem, 2.9vw, 0.84rem); letter-spacing: 0; }
  .treat__n { display: none; }
  .treat__row > .treat__desc, .treat__end { grid-column: 1 / -1; grid-row: 4; align-self: start; margin: var(--sc-4) 0 0; }
  .treat__desc { font-size: var(--sc-t-base); max-width: none; }
  .treat__end { border-top: 0; padding-top: 0; }
  /* Sharing one cell, two sentences mid-handoff printed on top of each other.
     Here each sentence lives strictly inside its own window with a gap before
     the next, so they hand off in place instead of overlapping. Continuous in
     --sc-p like everything else; !important because the engine writes the
     cue opacity inline, and on this layout it must not overlap. */
  .treat__row > .treat__desc {
    opacity: calc(
      clamp(0, calc((var(--sc-p, 0) - var(--a) - 0.02) / 0.03), 1) *
      clamp(0, calc((var(--b) - 0.02 - var(--sc-p, 0)) / 0.03), 1)
    ) !important;
  }
  .treat__row:nth-child(1) > .treat__desc {
    opacity: clamp(0, calc((var(--b) - 0.02 - var(--sc-p, 0)) / 0.03), 1) !important;
  }
  .synth { align-items: end; padding-bottom: var(--sc-8); }
}

@media (max-width: 700px) {
  :root { --sc-gutter: 1.25rem; }

  /* The stage strip measured 88px wide between the counter and the button,
     and the longest stage name is 98px: no amount of scrolling made it
     readable. On a phone the bar names the CURRENT stage only, and the small
     ring goes, since 5/7 already says the same thing. */
  .spine .ring { display: none; }
  .spine__list { overflow: visible; }
  .spine__list li:not(:has(.is-here)) { display: none; }
  .spine__list a { white-space: nowrap; }

  /* The subject rises behind top-anchored copy as the planes separate, and a
     white coat under grey type measured 1.67:1. A band, not a full-frame wash. */
  .hero__scrim {
    display: block;
    background: linear-gradient(to bottom, rgba(244,241,234,0.97) 0%, rgba(244,241,234,0.9) 46%, rgba(244,241,234,0) 100%);
    inset: 0 0 auto 0; height: 64%;
  }

  /* On a phone the block flows top-down above the subject: name, thesis, lede. */
  .hero__copy { bottom: auto; top: clamp(3.5rem, 9vh, 6rem); max-width: none; display: block; }
  .hero__big { font-size: clamp(2.6rem, 11.5vw, 3.6rem); }
  .hero__dr { margin-bottom: var(--sc-2); font-size: var(--sc-t-xs); }
  .hero__role { margin-top: var(--sc-3); font-size: 0.66rem; }

  .hero__what { margin-top: var(--sc-5); }
  .hero__h1 { font-size: var(--sc-t-xl); }
  .hero__lede { font-size: var(--sc-t-sm); max-width: 36ch; margin-top: var(--sc-3); }
  /* subject anchored bottom, cropped, BEHIND nothing: type is above it */
  .hero__plane--subject { justify-content: center; }
  .hero__subject { height: 50%; margin-right: 0; margin-left: 12%; }
  .hero__ring { width: 120vw; translate: 6% 6%; }
  .hero__plane--fore { height: 26%; mask-image: radial-gradient(150% 100% at 56% 130%, transparent 0%, transparent 40%, #000 66%); }
  .hero__floor { height: 160px; }

  .scope__i h3 { font-size: var(--sc-t-lg); max-width: 26ch; }
  .scope__sys { position: static; display: block; margin-top: var(--sc-2); }
  .step h3 { font-size: var(--sc-t-xl); }
  .metodo__media { display: none; }
  .steps .step { padding-left: var(--sc-5); }

  .rail__lead { flex-basis: 15rem; }
  .frente { flex-basis: 15.5rem; padding: var(--sc-5) var(--sc-4); }
  .frente__h { font-size: var(--sc-t-lg); }
  .rail__close { flex-basis: 18rem; }
  .conduta__actions { gap: var(--sc-4); }
  .conduta { padding-bottom: var(--sc-9); }
}

@media (prefers-reduced-motion: reduce) {
  /* Meaning is kept, position change is dropped: the figure shows complete. */
  .hero__plane { transform: none !important; }
  .cta, .spine__list a, .faq summary, .spine__note { transition-duration: 1ms; }
}

/* One clause per line wherever the registration would otherwise strand
   "RQE 20.684" alone on a second line (820px tablets and down). */
@media (max-width: 900px) {
  .hero__role > span { display: block; }
  .hero__role .hero__sep { display: none; }
}