/* Public site. Requires /assets/css/tokens.css + base.css.
   Type system — three voices, never more:
     SANS  Montserrat 800, caps, tight: attitude, information, the "headline" voice.
     IT    Playfair Display italic: interference, emotion, signature. Never the whole title.
     NUM   Montserrat 200 numerals + tracked micro labels: the technical, "ficha" voice.
   Colour is used as planes, tabs, rails and interruptions — not only as section backgrounds. */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

:root {
  --sans-display: 800;
  --track-display: -0.045em;
  /* width available to a display word; divided by the word's character count (--fit) to size it */
  --line: calc(min(100vw, var(--max)) - 2 * var(--gutter));
}
/* inside a sub-column, display words must fit THAT column, not the full line */
@media (min-width: 64rem) {
  .col-5 { --line: calc((min(100vw, var(--max)) - 2 * var(--gutter)) * 5 / 12 - var(--gutter) / 2); }
}

/* ---------- voices ---------- */
.num { font-family: var(--sans); font-weight: 300; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.mix { display: block; line-height: 0.88; }
.mix__sans {
  display: block;
  font-family: var(--sans); font-weight: var(--sans-display); text-transform: uppercase; letter-spacing: var(--track-display);
  /* never wider than the line: --fit = characters of the longest word */
  font-size: min(var(--mix-size, var(--step-5)), calc(var(--line) / (var(--fit, 10) * 0.8)));
  line-height: 0.9;
}
.mix__it {
  display: block; position: relative; z-index: 1;
  margin-top: -0.08em; padding-left: var(--mix-indent, 0.9em);
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em;
  font-size: min(calc(var(--mix-size, var(--step-5)) * 0.82), calc(var(--line) / (var(--fit-it, 12) * 0.5)));
  line-height: 1; color: var(--laranja-tinta);
}

.label .num { margin-right: 0.35rem; font-size: 1.15em; }
.kicker { display: flex; gap: 0.25rem; align-items: baseline; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--papel); color: var(--cacau);
  border-bottom: 1px solid var(--cacau-12);
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 4.25rem; }
.brand-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
.brand-link img { height: 2.25rem; width: auto; }
.brand-link .brand-link__wide { display: none; }
@media (min-width: 48rem) {
  .brand-link .brand-link__compact { display: none; }
  .brand-link .brand-link__wide { display: block; height: 2.6rem; }
}
.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); }
.nav a:not(.btn) {
  display: inline-flex; min-height: 2.75rem; align-items: center;
  font-size: var(--step--1); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none;
  background: linear-gradient(var(--laranja-nobre), var(--laranja-nobre)) no-repeat 0 78% / 0 2px;
  transition: background-size var(--dur-ui) var(--ease-out);
}
.nav a[aria-current="page"], .nav a:not(.btn):hover { background-size: 100% 2px; }
.menu-button {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.25rem;
  background: none; border: 0; font-size: var(--step--1); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
}
.menu-button__lines { display: grid; gap: 5px; width: 22px; }
.menu-button__lines span { display: block; height: 2px; background: currentColor; }
.menu-button__lines span:last-child { width: 60%; background: var(--laranja-nobre); }
@media (min-width: 64rem) {
  .nav { display: block; }
  .menu-button { display: none; }
}

/* mobile menu — native dialog gives focus containment and Esc */
.menu-dialog {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--cacau); color: var(--pergaminho);
}
.menu-dialog::backdrop { background: var(--cacau-80); }
/* open: the panel is uncovered top-down, items follow in a short stagger, the italic numbers land last.
   close: the mask simply reverses (allow-discrete keeps the dialog rendered while it closes).
   Native <dialog> behaviour — focus containment, Esc, focus return — is untouched. */
@media (prefers-reduced-motion: no-preference) {
  .menu-dialog {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 380ms var(--ease-out), overlay 380ms allow-discrete, display 380ms allow-discrete;
  }
  .menu-dialog[open] { clip-path: inset(0); }
  @starting-style { .menu-dialog[open] { clip-path: inset(0 0 100% 0); } }
  .menu-dialog[open] nav li { animation: menu-item 460ms var(--ease-out) both; }
  .menu-dialog[open] nav li:nth-child(1) { animation-delay: 120ms; }
  .menu-dialog[open] nav li:nth-child(2) { animation-delay: 170ms; }
  .menu-dialog[open] nav li:nth-child(3) { animation-delay: 220ms; }
  .menu-dialog[open] nav li:nth-child(4) { animation-delay: 270ms; }
  .menu-dialog[open] nav a span { animation: menu-num 520ms 380ms var(--ease-out) both; }
}
@keyframes menu-item { from { opacity: 0; transform: translateY(14px); } }
@keyframes menu-num { from { opacity: 0; transform: translateX(-8px); } }
.menu-dialog__inner { display: flex; flex-direction: column; min-height: 100%; padding: 1rem var(--gutter) var(--space-4); }
.menu-dialog__top { display: flex; justify-content: space-between; align-items: center; min-height: 3.25rem; }
.menu-dialog__top img { height: 2.25rem; width: auto; }
.menu-dialog nav { margin-top: var(--space-4); }
.menu-dialog nav li { border-top: 1px solid var(--pergaminho-20); }
.menu-dialog nav a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; min-height: 3.5rem;
  font-family: var(--sans); font-weight: var(--sans-display); text-transform: uppercase; letter-spacing: -0.03em;
  font-size: clamp(1.5rem, 1rem + 3vw, 2.25rem); line-height: 1; text-decoration: none;
}
.menu-dialog nav a span { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--step-1); letter-spacing: 0; text-transform: none; color: var(--clay); }
.menu-dialog__foot { margin-top: auto; padding-top: var(--space-4); display: grid; gap: var(--space-2); }
.menu-dialog .menu-button { color: var(--pergaminho); }

/* ---------- chapters ---------- */
.chapter { position: relative; padding-block: var(--space-6); overflow: clip; }
.chapter--cacau { background: var(--cacau); color: var(--pergaminho); }
.chapter--oliva { background: var(--oliva); color: var(--branco); }
.chapter--laranja { background: var(--laranja-nobre); color: var(--papel); }
.chapter--rosa { background: var(--rosa-terroso); color: var(--cacau); }
.chapter--pergaminho { background: var(--pergaminho); color: var(--cacau); }
.chapter--tight { padding-block: var(--space-5); }

/* ---------- OPENING (home hero) ----------
   Mobile: NATURALIZAÇÃO runs vertically up the left edge as a graphic spine; the image plane,
   "com método." and the lede stack beside it. Desktop: the word crosses the whole grid and
   overlaps the base of the plane; "com método." interrupts below, off-axis. */
.opening { position: relative; background: var(--papel); overflow: clip; padding-block: 1.5rem 3rem; }
.opening__grid { position: relative; display: flex; flex-direction: column; gap: 1.5rem; padding-left: calc(var(--word-size) * 0.95 + 0.9rem); --word-size: min(19vw, calc((100svh - 10rem) / 9.6)); }
.opening__meta { order: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; color: var(--cacau-80); }
@media (max-width: 47.99rem) {
  /* mobile: the index number competes with the plane; descriptor and profession are enough */
  .opening__meta span:first-child { display: none; }
  .opening__meta { letter-spacing: 0.14em; }
}
.opening__meta span:first-child { color: var(--laranja-tinta); }
.opening__title { order: 2; margin: 0; }
.opening__word {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--word-size) * 0.95);
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; justify-content: flex-end;
  font-family: var(--sans); font-weight: var(--sans-display); text-transform: uppercase;
  font-size: var(--word-size); letter-spacing: var(--track-display); line-height: 0.95; color: var(--cacau);
}
.opening__em {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 5vw, 7.5rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--laranja-tinta);
}
.opening__plane { order: 1; position: relative; }
.opening__plane .frame { aspect-ratio: 5 / 5.4; }
.opening__lede { order: 3; display: grid; gap: 1.5rem; }
.opening__lede > p { font-size: var(--step-1); line-height: 1.45; max-width: 26rem; }
.opening__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }

@media (min-width: 48rem) {
  .opening { padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(2.5rem, 2rem + 2vw, 4rem); }
  .opening__grid {
    display: grid; padding-left: var(--gutter); gap: 0 var(--gutter);
    /* measured: NATURALIZAÇÃO in Montserrat 800 at -0.045em = 8.64em wide */
    --word-size: min(calc(var(--line) / 8.75), 11rem);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "meta  meta  meta  meta  meta  meta  meta  meta  meta  meta  meta  meta"
      "lede  lede  lede  lede  lede  .     plane plane plane plane plane plane"
      "title title title title title title title title title title title title";
  }
  .opening__meta { grid-area: meta; justify-content: space-between; margin-bottom: 1.25rem; }
  .opening__plane { grid-area: plane; }
  .opening__plane .frame { aspect-ratio: auto; height: min(50svh, 32rem); }
  /* lede at the top, actions at the base but clear of the word that overlaps the plane */
  .opening__lede { grid-area: lede; align-self: stretch; align-content: space-between; padding-bottom: calc(var(--word-size) * 0.62); }
  .opening__lede > p { font-size: var(--step-2); line-height: 1.3; max-width: 22rem; }
  .opening__title { grid-area: title; position: relative; z-index: 2; margin-top: calc(var(--word-size) * -0.42); }
  .opening__word {
    position: static; width: auto; writing-mode: horizontal-tb; transform: none; display: block;
    font-size: var(--word-size); line-height: 0.86; white-space: nowrap;
  }
  .opening__em { margin-top: 0.06em; padding-left: 38%; font-size: min(calc(var(--line) / 11), 8rem); }
}

/* load motion (a cover being set): the photo comes down into its frame, NATURALIZAÇÃO is uncovered by a mask,
   "com método." arrives last on its own, softer timing. Transform/clip/opacity only — no layout shift. */
@media (prefers-reduced-motion: no-preference) {
  .opening__plane .frame { animation: plane-in 1000ms var(--ease-out) both; }
  .opening__word { animation: word-in 900ms 220ms var(--ease-out) both; }
  .opening__em { animation: rise-in 800ms 620ms var(--ease-out) both; }
}
@keyframes plane-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes word-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(-10% -2% -10% -2%); } }
@keyframes rise-in { from { transform: translateY(0.22em); opacity: 0; } }

/* ---------- OPENING as a campaign cover (real photograph) ----------
   The photograph is the protagonist: it bleeds to the edges and takes most of the first screen. The type sits on it —
   pergaminho on the photo's own near-black background (sampled #1a120b–#1d1411), clay italic on the darkened base.
   The two gradients only extend the dark background (left edge and base) for legibility; the person is never covered
   by them, recoloured or altered. */
.opening--cover { background: var(--cacau); color: var(--pergaminho); padding-block: 0 var(--space-4); }
.opening--cover .opening__grid { position: static; }
.opening--cover .opening__meta { position: relative; z-index: 2; color: var(--pergaminho-70); }
.opening--cover .opening__meta span:first-child { color: var(--clay); }
.opening--cover .opening__title { position: relative; z-index: 2; }
.opening--cover .opening__word { color: var(--papel); }
.opening--cover .opening__em { color: var(--clay); }
.opening--cover .opening__plane .frame { aspect-ratio: auto; width: 100%; height: 100%; background: #1d1411; }
.opening--cover .opening__plane::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.opening--cover .opening__lede > p { color: var(--pergaminho); }
.opening--cover .btn { background: var(--pergaminho); color: var(--cacau); }
@media (hover: hover) and (pointer: fine) { .opening--cover .btn:hover { background: var(--laranja-nobre); color: var(--papel); } }

/* phone + tablet: the photo fills the screen under the header; NATURALIZAÇÃO runs up its dark left margin and
   "com método." lands on its darkened base; the lede and actions follow on cacau */
@media (max-width: 63.99rem) {
  .opening--cover .opening__grid {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cover" "lede"; gap: var(--space-3);
    padding-left: var(--gutter); --word-size: min(16vw, calc((100svh - 13rem) / 9.4), 7rem);
  }
  .opening--cover .opening__plane, .opening--cover .opening__title, .opening--cover .opening__meta { grid-area: cover; }
  .opening--cover .opening__plane { margin-inline: calc(var(--gutter) * -1); height: max(30rem, calc(100svh - 4.25rem - 4.5rem)); }
  .opening--cover .opening__plane::after {
    background:
      linear-gradient(90deg, rgb(29 20 17 / 0.72) 0, rgb(29 20 17 / 0) calc(var(--word-size) * 1.6)),
      linear-gradient(0deg, rgb(50 36 31 / 0.92) 0, rgb(50 36 31 / 0) 34%);
  }
  .opening--cover .opening__meta { align-self: start; padding-top: 1.1rem; padding-left: calc(var(--word-size) * 0.95 + 0.9rem); }
  .opening--cover .opening__title {
    align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 0 1.25rem calc(var(--word-size) * 0.95 + 0.9rem);
  }
  /* vertical on phones AND tablets: the tablet rules above (≥48rem) would lay it flat and cut it */
  .opening--cover .opening__word {
    position: absolute; left: 0; top: 1rem; bottom: 1.25rem; width: calc(var(--word-size) * 0.95);
    writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: flex-end;
    white-space: normal; font-size: var(--word-size); line-height: 0.95;
  }
  .opening--cover .opening__title { margin-top: 0; }
  .opening--cover .opening__em { padding-left: 0; margin-top: 0; font-size: clamp(2.6rem, 1.6rem + 5vw, 5.5rem); }
  .opening--cover .opening__lede { grid-area: lede; padding-bottom: 0; }
  /* show more of the dark background on the left so the profile stays clear of the vertical word */
  .frame--photo[data-slot="hero"] .frame__photo { object-position: 18% 22%; }
}

/* desktop: the photograph takes the right 60% at full height, bleeding to the top, right and bottom edges; the cacau
   field and the photo's own dark background merge; NATURALIZAÇÃO crosses field and photo at the base */
@media (min-width: 64rem) {
  .opening--cover { position: relative; padding-block: 0; }
  .opening--cover .opening__grid {
    min-height: calc(100svh - 4.25rem); padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "meta  meta  meta  meta  meta  .     .     .     .     .     .     ."
      "lede  lede  lede  lede  .     .     .     .     .     .     .     ."
      "title title title title title title title title title title title title";
  }
  .opening--cover .opening__meta { flex-direction: column; justify-content: flex-start; gap: 0.35rem; margin-bottom: var(--space-4); }
  /* 52% keeps the frame tall enough to show face, hand AND the tattooed arm */
  .opening--cover .opening__plane { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; }
  .opening--cover .opening__plane::after {
    background:
      linear-gradient(90deg, var(--cacau) 0, rgb(50 36 31 / 0) 20%),
      linear-gradient(0deg, rgb(50 36 31 / 0.9) 0, rgb(50 36 31 / 0) 36%);
  }
  .opening--cover .opening__lede { align-self: start; padding-bottom: 0; gap: var(--space-4); }
  .opening--cover .opening__lede > p { font-size: var(--step-2); max-width: 20rem; }
  .opening--cover .opening__title { margin-top: 0; padding-top: var(--space-4); }
  .opening--cover .opening__em { padding-left: 42%; }
  .frame--photo[data-slot="hero"] .frame__photo { object-position: 50% 30%; }
}

/* cover entry: the photograph is visible from the first frame and settles down into place (no empty screen);
   the word is uncovered, the italic and the lede arrive after it */
@media (prefers-reduced-motion: no-preference) {
  .opening--cover .opening__plane .frame { animation: none; }
  .opening--cover .opening__plane .frame > picture { animation: cover-settle 1600ms var(--ease-out) both; }
  .opening--cover .opening__meta, .opening--cover .opening__lede { animation: fade-up 800ms 700ms var(--ease-out) both; }
}
@keyframes cover-settle { from { transform: translateY(-4%) scale(1.05); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }

/* ---------- strip: cacau interruption with the three pillars ---------- */
.strip { background: var(--cacau); color: var(--pergaminho); }
.strip__row {
  width: 100%; max-width: var(--max); margin-inline: auto; padding: 1.1rem var(--gutter);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.25rem;
  font-weight: var(--sans-display); text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--step--1);
}
.strip__row span { display: inline-flex; align-items: center; gap: 1.25rem; }
.strip__row span + span::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--laranja-nobre); }
@media (max-width: 29.99rem) {
  .strip__row { justify-content: flex-start; font-size: var(--step--2); }
}

/* ---------- manifesto ---------- */
.manifesto__grid { display: grid; gap: var(--space-4); }
.manifesto__index { color: var(--laranja-tinta); }
.manifesto__title { --fit: 9; --fit-it: 13; --mix-indent: 1.4em; }
.manifesto__text { display: grid; gap: 1rem; max-width: 30rem; font-size: var(--step-1); line-height: 1.5; }
.manifesto__text p:last-child { font-weight: 600; }
@media (min-width: 64rem) {
  .manifesto__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .manifesto__index { grid-column: 1 / span 2; padding-top: 1rem; }
  .manifesto__title { grid-column: 2 / -1; --mix-indent: 3.2em; }
  .manifesto__text { grid-column: 8 / span 5; }
}

/* ---------- method (home): descending cascade ---------- */
.method { --mix-size: var(--step-5); }
.method__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.method .kicker { color: var(--pergaminho); }
.method__title { --fit: 7; --fit-it: 14; }
.method__title .mix__sans { color: var(--cacau); }
.method__title .mix__it { color: var(--papel); }
.method__intro { max-width: 28rem; font-size: var(--step-1); line-height: 1.5; }
.cascade { display: grid; }
.cascade__step {
  display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 1rem; align-items: baseline;
  padding-block: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.35);
}
.cascade__n { grid-row: span 2; font-family: var(--sans); font-weight: 200; font-size: var(--step-3); line-height: 0.85; letter-spacing: -0.04em; color: var(--pergaminho); }
.cascade__name { font-family: var(--serif); font-style: italic; font-size: var(--step-2); line-height: 1.1; color: var(--papel); }
.cascade__text { margin-top: 0.35rem; max-width: 24rem; }
@media (min-width: 64rem) {
  .method__head { grid-template-columns: 8fr 4fr; grid-template-areas: "kicker kicker" "title intro"; align-items: end; column-gap: var(--gutter); }
  .method__head .kicker { grid-area: kicker; }
  .method__title { grid-area: title; }
  .method__intro { grid-area: intro; padding-bottom: 0.5rem; }
  .cascade__step { grid-template-columns: 9rem minmax(0, 1fr) 20rem; column-gap: var(--gutter); padding-block: 1.5rem; }
  .cascade__n { grid-row: auto; font-size: var(--step-4); }
  .cascade__name { font-size: var(--step-3); }
  .cascade__text { margin-top: 0; }
  .cascade__step:nth-child(2) { margin-left: 8%; }
  .cascade__step:nth-child(3) { margin-left: 16%; }
  .cascade__step:nth-child(4) { margin-left: 24%; }
  .cascade__step:nth-child(5) { margin-left: 32%; }
}

/* ---------- areas (home) ---------- */
.areas .kicker { color: var(--laranja-tinta); margin-bottom: var(--space-4); }
.area { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: var(--space-3); align-items: end; }
.area + .area { margin-top: var(--space-5); }
.area__letter { font-family: var(--serif); font-style: italic; font-size: var(--step-4); line-height: 0.8; color: var(--laranja-tinta); }
.area__name {
  font-family: var(--sans); font-weight: var(--sans-display); text-transform: uppercase; letter-spacing: var(--track-display);
  font-size: min(clamp(3rem, 2rem + 5vw, 7.5rem), calc(var(--line) / 7.6)); line-height: 0.88; padding-bottom: 0.05em;
}
.area__body { grid-column: 1 / -1; display: grid; gap: 1rem; max-width: 28rem; }
@media (min-width: 64rem) {
  .area { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .area__letter { grid-column: 1; grid-row: 1; }
  .area__name { grid-column: 2 / span 7; grid-row: 1; }
  .area__body { grid-column: 2 / span 5; grid-row: 2; align-self: start; }
  .area--b .area__letter { grid-column: 6; }
  .area--b .area__name { grid-column: 7 / -1; }
  .area--b .area__body { grid-column: 7 / span 5; }
}

/* ---------- person (home) + profile (sobre) name treatment ---------- */
.person__grid, .profile__grid { display: grid; gap: var(--space-4); }
.person__name { display: grid; line-height: 0.86; }
.person__pre { font-family: var(--sans); font-weight: 700; font-size: var(--step--1); letter-spacing: var(--track-micro); text-transform: uppercase; }
.person__first {
  font-family: var(--sans); font-weight: var(--sans-display); text-transform: uppercase; letter-spacing: var(--track-display);
  font-size: min(var(--step-5), calc(var(--line) / 5.2));
}
.person__last { font-family: var(--serif); font-style: italic; font-size: min(calc(var(--step-5) * 0.9), calc(var(--line) / 4.4)); padding-left: 1.1em; margin-top: -0.06em; }
.person__text { display: grid; gap: var(--space-3); align-content: end; }
.person__creds { display: grid; gap: 0.5rem; padding-top: 1rem; border-top: 2px solid var(--cacau); }
/* collage: a laranja plane offset behind the portrait slot */
.person__media, .profile__media { position: relative; margin-right: 1.25rem; margin-bottom: 1.25rem; }
.person__media::before, .profile__media::before {
  content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; background: var(--laranja-nobre);
}
.person__media .frame, .profile__media .frame { position: relative; }

/* ---------- band ---------- */
.band__quote { font-family: var(--serif); font-style: italic; font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.02em; max-width: 16ch; }
.band__row { display: grid; gap: var(--space-4); align-items: end; }
@media (min-width: 64rem) { .band__row { grid-template-columns: 1fr auto; } }

/* ---------- home teasers: the inner pages' photographs on the home ----------
   Each teaser is one of the home's own chapters (areas, person, band) carrying the photograph of the page it opens
   (tratamentos · sobre · agendar), large and bled: phone = photo edge to edge, then text; desktop = photo 46% at the
   full height of the chapter, text in counterpoint. Photos alternate sides (left · right · left): rhythm, not mosaic. */
.teaser { padding-block: 0; }
.teaser__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.teaser__photo { position: relative; }
.teaser__photo .frame { aspect-ratio: 4 / 5; }
.teaser__content { display: grid; gap: var(--space-3); align-content: center; padding: var(--space-5) var(--gutter); }
.teaser__cta { justify-self: start; }
.teaser--cacau { background: var(--cacau); color: var(--pergaminho); }
.teaser--cacau .kicker { color: var(--clay); }
.teaser--cacau .area__letter { color: var(--clay); }
.teaser--cacau .area__name { color: var(--papel); }
.teaser--cacau .btn { background: var(--pergaminho); color: var(--cacau); }
@media (hover: hover) and (pointer: fine) { .teaser--cacau .btn:hover { background: var(--laranja-nobre); color: var(--papel); } }
/* inside the teaser column the areas and the band stack (their standalone multi-column layouts do not apply) */
.teaser .area { grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; }
.teaser .area + .area { margin-top: var(--space-4); }
.teaser .area__letter, .teaser .area__name, .teaser .area__body { grid-row: auto; }
.teaser .area__letter { grid-column: 1; }
.teaser .area__name { grid-column: 2; font-size: min(clamp(3rem, 2rem + 5vw, 6rem), calc(var(--teaser-line, var(--line)) / 7.6)); }
.teaser .area__body { grid-column: 1 / -1; }
.teaser .band__row { grid-template-columns: minmax(0, 1fr); align-items: start; }
.teaser .band__row .btn { justify-self: start; }

/* ---------- two conversion paths: site request (primary, solid) + WhatsApp (secondary, editorial) ----------
   The WhatsApp control inherits the colour of its block (papel on laranja, cacau on papel). Its text is set at
   19px+/800 so it counts as large text: papel on laranja nobre (4.18:1) passes the 3:1 large-text threshold. */
.cta-pair { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.cta-wa {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0.4rem 0;
  background: none; border: 0; border-bottom: 2px solid currentColor; border-radius: 0; color: inherit; cursor: pointer;
  font-family: var(--sans); font-size: var(--step-1); font-weight: var(--sans-display); letter-spacing: 0.02em; line-height: 1.1;
  text-transform: uppercase; text-decoration: none; text-align: left;
}
.cta-wa__arrow { display: inline-block; transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cta-wa:not(:disabled):hover .cta-wa__arrow { transform: translate(3px, -3px); } }
.cta-wa:disabled { opacity: 0.55; cursor: not-allowed; }
.cta-wa-pending { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.lead-form__alt { display: grid; gap: 0.5rem; justify-items: start; padding-top: var(--space-3); border-top: 1px solid var(--cacau-12); }
.lead-form__alt-note { font-size: var(--step--1); color: var(--cacau-80); }
@media (max-width: 29.99rem) {
  .cta-pair { flex-direction: column; align-items: stretch; }
  .cta-pair .btn { width: 100%; }
  .cta-pair .cta-wa { justify-content: space-between; }
  .cta-pair .cta-wa-pending { justify-content: space-between; }
}
.teaser .band__quote { font-size: var(--step-4); }
@media (min-width: 64rem) {
  .teaser { --teaser-line: calc(54vw - var(--space-5) - var(--gutter)); }
  .teaser__grid { grid-template-columns: 46% minmax(0, 1fr); min-height: min(92svh, 60rem); }
  .teaser--right .teaser__grid { grid-template-columns: minmax(0, 1fr) 46%; }
  .teaser__photo { grid-column: 1; grid-row: 1; }
  .teaser__content { grid-column: 2; grid-row: 1; padding: var(--space-6) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) var(--space-6) var(--space-5); }
  .teaser--right .teaser__photo { grid-column: 2; }
  .teaser--right .teaser__content { grid-column: 1; padding: var(--space-6) var(--space-5) var(--space-6) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .teaser__photo .frame { aspect-ratio: auto; height: 100%; min-height: 100%; }
  .teaser .person__name { --line: var(--teaser-line); }
  .teaser .area__body { grid-column: 2; }
}

/* editorial CTA line: closes internal pages without repeating the laranja band */
.cta-line { padding-block: var(--space-5); }
.cta-line--pergaminho { background: var(--pergaminho); }
.cta-line__row {
  display: grid; gap: var(--space-3); padding-top: var(--space-3); align-items: end;
  /* rule drawn inside the gutters (a border would span the .wrap padding) */
  background: linear-gradient(var(--cacau), var(--cacau)) no-repeat var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 3px;
}
.cta-line__quote { font-family: var(--serif); font-style: italic; font-size: var(--step-3); line-height: 1.05; letter-spacing: -0.02em; max-width: 18ch; }
.cta-line__link {
  display: inline-flex; align-items: center; gap: 0.75rem; min-height: 3rem; justify-self: start;
  font-weight: var(--sans-display); text-transform: uppercase; letter-spacing: -0.01em; font-size: var(--step-2); text-decoration: none;
  background: linear-gradient(var(--laranja-nobre), var(--laranja-nobre)) no-repeat 0 100% / 100% 3px; padding-bottom: 0.2rem;
}
.cta-line__link span { transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cta-line__link:hover span { transform: translateX(6px); } }
@media (min-width: 64rem) { .cta-line__row { grid-template-columns: 1fr auto; } .cta-line__link { justify-self: end; } }

/* ---------- masthead (inner pages) ---------- */
.masthead { position: relative; overflow: clip; padding-block: clamp(2.5rem, 2rem + 4vw, 6rem) clamp(2.5rem, 2rem + 3vw, 5rem); }
.masthead--oliva { background: var(--oliva); color: var(--branco); }
.masthead--oliva .mix__sans { color: var(--cacau); }
.masthead--oliva .mix__it { color: var(--papel); }
.masthead--cacau { background: var(--cacau); color: var(--pergaminho); }
.masthead--cacau .mix__sans { color: var(--pergaminho); }
.masthead--cacau .mix__it { color: var(--clay); }
.masthead--cacau .masthead__index { color: var(--clay); }
.masthead--pergaminho { background: var(--pergaminho); color: var(--cacau); }
.masthead--compact { padding-block: clamp(2rem, 1.5rem + 3vw, 4.5rem); }
.masthead__grid { display: grid; gap: var(--space-3); }
.masthead__title { --fit: 7; --fit-it: 15; }
.masthead__lede { font-size: var(--step-1); max-width: 24rem; }
.masthead__aside { display: none; }
.page-privacidade .masthead__title { --fit: 11; }
/* variation: italic leads and the sans answers on the same baseline (tratamentos) */
.mix--inline { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.25em; }
.mix--inline .mix__it { padding-left: 0; margin-top: 0; font-size: min(var(--step-5), calc(var(--line) / 3.6)); color: var(--clay); }
.mix--inline .mix__sans { font-size: min(var(--step-4), calc(var(--line) / 8.2)); }
/* variation: the italic closes the line from the right edge (agendar) */
.mix--end .mix__it { padding-left: 0; text-align: right; margin-top: -0.02em; }
/* variation: single sans voice + a ruled technical caption instead of the italic (privacidade) */
.masthead__rule { display: flex; align-items: center; gap: 1rem; max-width: 40rem; letter-spacing: 0.08em; }
.masthead__rule::before { content: ""; flex: none; width: 3rem; height: 3px; background: var(--laranja-nobre); }
@media (min-width: 64rem) {
  .masthead__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .masthead__index { grid-column: 1 / -1; }
  .masthead__title { grid-column: 1 / span 10; }
  .masthead__lede { grid-column: 9 / -1; justify-self: end; text-align: right; }
  .masthead__rule { grid-column: 1 / span 8; }
  .masthead__aside { display: block; position: absolute; right: var(--gutter); top: 50%; writing-mode: vertical-rl; opacity: 0.8; }
}

/* ---------- /metodo/ process: numbered narrative with a running spine ---------- */
.process__intro { max-width: 32rem; font-size: var(--step-2); line-height: 1.3; font-family: var(--serif); font-style: italic; margin-bottom: var(--space-5); }
.process__list { position: relative; display: grid; }
.process__list::before { content: ""; position: absolute; left: 1.35rem; top: 0; bottom: 0; width: 2px; background: var(--oliva); }
.process__step { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1.25rem; padding-block: var(--space-4); }
.process__n {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  background: var(--oliva); color: var(--branco); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.04em;
}
.process__body { display: grid; gap: 0.75rem; max-width: 34rem; min-width: 0; }
.process__body .label { color: var(--laranja-tinta); }
.process__name {
  font-family: var(--sans); font-weight: var(--sans-display); text-transform: uppercase; letter-spacing: var(--track-display);
  /* longest word: ACOMPANHAMENTO (14) in the column beside the 2.75rem numeral */
  font-size: min(var(--step-4), calc((var(--line) - 4rem) / 12)); line-height: 0.95;
}
.process__step:last-child .process__n { background: var(--laranja-nobre); }
/* the spine draws itself as the list is read; fully drawn when the last step reaches the bottom of the screen.
   Without scroll-timelines (or with reduced motion) it is simply complete. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .process__list::before { transform-origin: 50% 0; animation: spine-draw linear both; animation-timeline: view(); animation-range: entry 0% exit 0%; }
  }
}
@keyframes spine-draw { from { transform: scaleY(0.03); } to { transform: scaleY(1); } }
@media (min-width: 64rem) {
  .process__list::before { left: calc(25% + 1.35rem); }
  .process__step { grid-template-columns: 25% 2.75rem minmax(0, 1fr); }
  .process__n { grid-column: 2; }
  .process__body { grid-column: 3; }
  .process__step:nth-child(odd) .process__body { padding-left: 8%; }
}

/* ---------- /tratamentos/: one editorial piece ----------
   A single photograph (the syringe portrait) holds the three areas A · B · C — no image per area, no colour tabs.
   Desktop: the photograph IS the right column — full height of the composition, bleeding to the top, right and
   bottom edges — so Facial, Corporal and Tecnologias are read beside one single image. Phone: title → photo → areas. */
.treat { --line: calc(100vw - 2 * var(--gutter)); background: var(--cacau); color: var(--pergaminho); overflow: clip; }
.treat__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.treat__head { display: grid; gap: var(--space-3); padding: clamp(2.5rem, 2rem + 4vw, 5rem) var(--gutter) var(--space-4); }
.treat__head .masthead__index { color: var(--clay); }
.treat__title .mix__sans { color: var(--pergaminho); }
.treat__title .mix__it { color: var(--clay); }
.treat__lede { font-size: var(--step-1); line-height: 1.45; max-width: 24rem; }
.treat__photo { position: relative; }
.treat__photo .frame { aspect-ratio: auto; height: min(calc(100svh - 7rem), 150vw); background: #57413c; }
.treat__body { display: grid; padding: var(--space-4) var(--gutter) var(--space-5); }
.treat__index { padding-bottom: var(--space-4); }
.treat__index-label { color: var(--clay); margin-bottom: 0.75rem; }
.treat__index ol { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.treat__index a {
  display: inline-flex; align-items: baseline; gap: 0.5rem; min-height: 2.75rem; padding-top: 0.5rem;
  font-weight: var(--sans-display); text-transform: uppercase; letter-spacing: -0.01em; font-size: var(--step-1); text-decoration: none;
  background: linear-gradient(var(--laranja-nobre), var(--laranja-nobre)) no-repeat 0 88% / 0 2px; transition: background-size var(--dur-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .treat__index a:hover { background-size: 100% 2px; } }
.treat__key { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--step-2); color: var(--clay); }
.treat__note { margin-top: 0.75rem; max-width: 30rem; font-size: var(--step--1); color: var(--pergaminho-70); }
.core {
  display: grid; grid-template-columns: clamp(3.5rem, 2rem + 5vw, 7rem) minmax(0, 1fr); column-gap: 1rem;
  padding-block: var(--space-4); border-top: 1px solid var(--pergaminho-20); scroll-margin-top: 5rem;
}
.core--a { --core-tone: var(--clay); }
.core--b { --core-tone: var(--oliva); }
.core--c { --core-tone: var(--rosa-terroso); }
.core__key { font-family: var(--serif); font-style: italic; font-size: clamp(4rem, 2.5rem + 6vw, 8rem); line-height: 0.75; color: var(--core-tone); }
.core__body { display: grid; gap: 0.75rem; max-width: 34rem; min-width: 0; }
.core__count { color: var(--clay); }
.core__name {
  font-family: var(--sans); font-weight: var(--sans-display); text-transform: uppercase; letter-spacing: var(--track-display);
  font-size: min(var(--step-4), calc((var(--line) - 8rem) / 9.2)); line-height: 0.9; color: var(--papel);
}
.core__lead { font-size: var(--step-1); line-height: 1.4; }
.core .notice { background: var(--pergaminho); color: var(--cacau); }
@media (min-width: 64rem) {
  .treat { --line: calc(54vw - 2 * var(--gutter)); }
  .treat__grid { grid-template-columns: minmax(0, 1fr) 46%; grid-template-rows: auto 1fr; }
  .treat__head, .treat__body { grid-column: 1; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); padding-right: var(--space-5); }
  .treat__head { grid-row: 1; }
  .treat__body { grid-row: 2; }
  .treat__photo { grid-column: 2; grid-row: 1 / span 2; }
  .treat__photo .frame { height: 100%; min-height: calc(100svh - 4.25rem); }
}

/* ---------- /sobre/ profile ---------- */
.profile { background: var(--rosa-terroso); color: var(--cacau); padding-block: clamp(2.5rem, 2rem + 4vw, 6rem); overflow: clip; }
.profile__index { color: var(--cacau); }
.profile__text { display: grid; gap: 1rem; max-width: 30rem; }
.profile__bio { font-size: var(--step-1); }
/* phone + tablet: the portrait bleeds edge to edge, the laranja plane shows as a band under it */
@media (max-width: 63.99rem) {
  .profile__media { margin: 0 calc(var(--gutter) * -1) 1.25rem; }
  .profile__media::before { inset: auto 0 -1.25rem 38%; height: 45%; }
  .profile__media .frame { aspect-ratio: 4 / 5; }
}
@media (min-width: 64rem) {
  .profile__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; }
  .profile__index { grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--space-3); }
  /* the portrait is the page: six columns, close to screen height */
  .profile__media { grid-column: 6 / -1; grid-row: 2 / span 2; margin-right: 0; }
  .profile__media .frame { aspect-ratio: auto; height: min(calc(100svh - 8rem), 52rem); }
  /* the name crosses over the portrait slot */
  .profile__name { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; align-self: center; }
  .profile__text { grid-column: 1 / span 5; grid-row: 3; align-self: end; }
}

/* spec sheet ("ficha") */
.spec { display: grid; gap: var(--space-4); }
.spec__title { --fit: 8; --fit-it: 10; --mix-size: var(--step-4); }
.spec__table { border: 2px solid var(--cacau); }
.spec__table > div { display: grid; gap: 0.25rem; padding: 1rem 1.1rem; }
.spec__table > div + div { border-top: 1px solid var(--cacau-60); }
.spec__table dt { font-size: var(--step--2); font-weight: 700; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--laranja-tinta); }
@media (min-width: 48rem) { .spec__table > div { grid-template-columns: 11rem 1fr; align-items: baseline; } }
@media (min-width: 64rem) { .spec { grid-template-columns: 5fr 7fr; align-items: start; } }

/* ---------- /agendar/ ---------- */
.booking { background: var(--papel); padding-block: clamp(2rem, 1.5rem + 3vw, 5rem) var(--space-6); }
.booking__grid { display: grid; gap: var(--space-5); }
.booking__head { display: grid; gap: var(--space-3); align-content: start; }
.booking__title { --fit: 9; --fit-it: 10; }
.booking__lede { font-size: var(--step-1); line-height: 1.45; max-width: 24rem; }
.booking__info { display: grid; gap: 0; border-top: 2px solid var(--cacau); }
.booking__info > div { display: grid; gap: 0.25rem; padding-block: 0.9rem; border-bottom: 1px solid var(--cacau-12); }
.booking__info dt { font-size: var(--step--2); font-weight: 700; letter-spacing: var(--track-micro); text-transform: uppercase; }
/* the contact photograph: a large piece in counterpoint to the form, over an offset oliva plane (same collage
   system as the portrait) */
.booking__media { position: relative; margin: 0 calc(var(--gutter) * -1) 1.25rem; }
.booking__media::before { content: ""; position: absolute; inset: auto 38% -1.25rem 0; height: 45%; background: var(--oliva); }
.booking__media .frame { position: relative; aspect-ratio: 3 / 4; }
/* desktop: the telephone photograph IS the left column — full height of the page section, bleeding to the edges —
   with the title, the form and the details in counterpoint on the right */
@media (min-width: 64rem) {
  .booking { padding-block: 0; }
  .booking__grid { max-width: none; padding: 0; grid-template-columns: 44% minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 0; row-gap: var(--space-4); align-items: start; }
  .booking__media { grid-column: 1; grid-row: 1 / span 3; align-self: stretch; margin: 0; }
  .booking__media::before { display: none; }
  .booking__media .frame { height: 100%; min-height: calc(100svh - 4.25rem); aspect-ratio: auto; }
  .booking__head, .lead-form, .booking__info { grid-column: 2; padding-left: var(--space-5); padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .booking__head { grid-row: 1; padding-top: clamp(2rem, 1.5rem + 3vw, 4.5rem); }
  .lead-form { grid-row: 2; }
  .booking__info { grid-row: 3; margin-left: var(--space-5); padding-left: 0; margin-bottom: var(--space-5); }
}

.lead-form { display: grid; gap: var(--space-4); align-content: start; }
.q { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 0.75rem; align-items: start; }
.q__n { padding-top: 0.2rem; font-weight: 200; font-size: var(--step-2); line-height: 1; letter-spacing: -0.04em; color: var(--laranja-tinta); }
.lead-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.lead-form legend, .lead-form .field > label { font-size: var(--step-0); font-weight: 700; letter-spacing: 0; padding: 0; margin-bottom: 0.5rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--cacau); border-radius: var(--radius); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.choice input:checked + span { background: var(--cacau); color: var(--papel); }
.choice input:focus-visible + span { outline: 2px solid var(--laranja-tinta); outline-offset: 2px; }
.lead-form__end { display: grid; gap: 1rem; padding-left: 3.5rem; }
.proc-list { display: grid; gap: 0.35rem; padding-left: 1.1rem; list-style: square; }
.proc-list li::marker { color: var(--laranja-nobre); }
/* field line: on focus a laranja rule runs in from the left over the cacau line (focus stays visible without motion) */
.lead-form .input--line {
  background: linear-gradient(var(--laranja-tinta), var(--laranja-tinta)) no-repeat 0 100% / 0 3px;
  transition: background-size 380ms var(--ease-out), border-color var(--dur-ui) ease;
}
.lead-form .input--line:focus-visible { box-shadow: none; background-size: 100% 3px; }
@media (hover: hover) and (pointer: fine) {
  .btn { transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(0.97); }
}
.notice { padding: 0.9rem 1rem; border-left: 4px solid var(--laranja-nobre); background: var(--pergaminho); font-size: var(--step--1); }
.form-status { font-weight: 600; }
.form-status:empty { display: none; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 29.99rem) { .lead-form__end { padding-left: 0; } .lead-form__end .btn { width: 100%; } }

/* ---------- /privacidade/ ---------- */
.legal { display: grid; max-width: 52rem; }
.legal__item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: 0.6rem; padding-block: 1.5rem; border-top: 1px solid var(--cacau-12); }
.legal__item > * { grid-column: 2; }
.legal__n { grid-column: 1; grid-row: 1 / span 3; font-weight: 200; font-size: var(--step-2); line-height: 1; color: var(--laranja-tinta); }
.legal h2 { font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--step-0); }
.legal ul { display: grid; gap: 0.4rem; padding-left: 1.1rem; list-style: square; }
.legal li::marker { color: var(--laranja-nobre); }
@media (min-width: 64rem) {
  .legal { max-width: none; grid-template-columns: 1fr 1fr; column-gap: calc(var(--gutter) * 2); }
  .legal__item { grid-template-columns: 5rem minmax(0, 1fr); padding-block: 2rem; }
  .legal__n { font-size: var(--step-3); }
  /* section 03 (the longest) spans the right column; 04 and 05 close the grid */
  .legal__item:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
  .legal__item:nth-child(4) { grid-column: 1; grid-row: 3; }
  .legal__item:nth-child(5) { grid-column: 2; grid-row: 3; }
}

/* ---------- photo frame / editorial placeholder ---------- */
.frame { position: relative; overflow: hidden; background: var(--cacau); }
.frame--4x5 { aspect-ratio: 4 / 5; }
.frame--3x4 { aspect-ratio: 3 / 4; }
.frame--3x2 { aspect-ratio: 3 / 2; }
.frame > picture, .frame > picture img, .frame > img { width: 100%; height: 100%; object-fit: cover; }
.frame__fallback { position: absolute; inset: 0; display: grid; }
.frame__fallback--oliva { background: var(--oliva); }
.frame__fallback--cobre { background: var(--cobre); }
.frame__fallback--laranja { background: var(--laranja-nobre); }
.frame__fallback--cacau { background: var(--cacau); }
.frame__fallback--rosa { background: var(--rosa-terroso); }
.frame__fallback img { position: absolute; width: 150%; max-width: none; right: -55%; bottom: -30%; opacity: 0.18; }
/* Each slot is a temporary editorial composition built only from official marks, colour planes, crop and scale
   (never redrawn, recoloured or rotated). A real approved photo replaces the whole fallback via the registry. */
.frame__fallback::after { content: ""; position: absolute; inset: 0.75rem; border: 1px solid rgb(245 239 232 / 0.25); pointer-events: none; }
.frame__fallback[data-slot="hero"]::before { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 26%; background: var(--laranja-nobre); }
.frame__fallback[data-slot="hero"] img { width: 190%; right: -62%; left: auto; top: -14%; bottom: auto; opacity: 0.3; }
.frame__fallback[data-slot="area_corporal"] img { width: 210%; right: -6%; left: auto; top: -8%; bottom: auto; opacity: 0.3; }
.frame__fallback[data-slot="retrato"] img { width: 46%; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -58%); opacity: 1; }
.frame__caption { position: absolute; left: 1.5rem; bottom: 1.5rem; right: 1.5rem; color: var(--pergaminho); }

/* ---------- real photographs ----------
   Only crop (object-position per slot and viewport) and scale. The person is never altered.
   Crop priority: face → gesture/object → silhouette → composition. */
/* clip, not hidden: overflow:hidden would make the frame a scroll container and freeze the view() timeline */
.frame--photo { overflow: clip; }
.frame--photo > picture { display: block; width: 100%; height: 100%; }
.frame--photo .frame__photo { width: 100%; height: 100%; object-fit: cover; }
/* HOME — profile, face high, tattooed arm through the middle: trim the knee, never the top of the head */
.frame--photo[data-slot="hero"] .frame__photo { object-position: 50% 18%; }
/* SOBRE — top of the hair, face, hand and posture */
.frame--photo[data-slot="retrato"] .frame__photo { object-position: 50% 22%; }
/* TRATAMENTOS — the whole syringe, mouth and face in the upper third */
.frame--photo[data-slot="tratamentos"] .frame__photo { object-position: 50% 28%; }
/* AGENDAR — telephone, expression and the folder with the Mariah Pires identity */
.frame--photo[data-slot="contato"] .frame__photo { object-position: 50% 30%; }
/* the parallax scale grows from the right: the folder with the Mariah Pires identity stays whole */
.frame--photo[data-slot="contato"] .frame__photo { transform-origin: 88% 50%; }
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .frame--photo[data-slot="hero"] .frame__photo { object-position: 50% 14%; }
  .frame--photo[data-slot="contato"] .frame__photo { object-position: 50% 26%; }
}
@media (min-width: 90rem) {
  .frame--photo[data-slot="hero"] .frame__photo { object-position: 50% 20%; }
}

/* scroll parallax: a few percent of the frame, CSS scroll-driven (no scroll listener). The 1.09 scale leaves ~4.5%
   of image beyond each edge, more than the 3.5% travel, so the frame never shows an empty edge. Browsers without
   scroll-timelines and reduced-motion users get a still photograph. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .frame--photo .frame__photo { animation: photo-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    /* SOBRE: the laranja plane travels against the portrait — depth, not a 3D effect */
    .profile__media::before { animation: plane-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes photo-drift { from { transform: translateY(-3.5%) scale(1.09); } to { transform: translateY(3.5%) scale(1.09); } }
@keyframes plane-drift { from { transform: translateY(5%); } to { transform: translateY(-5%); } }

/* ---------- footer ---------- */
.site-footer { background: var(--cacau); color: var(--pergaminho); padding-block: var(--space-4) var(--space-3); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-top { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem 1.5rem; align-items: start; padding-bottom: var(--space-3); border-bottom: 1px solid var(--pergaminho-20); }
.footer-logo img { width: 6.5rem; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.footer-nav a, .footer-access a { display: inline-flex; min-height: 2.75rem; align-items: center; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--2); }
.footer-access { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.footer-access a { color: var(--clay); }
.footer-ficha { padding-top: var(--space-3); }
.footer-ficha__title { color: var(--clay); margin-bottom: 0.75rem; }
.footer-ficha__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; font-size: var(--step--1); }
.footer-ficha__grid > div { display: grid; gap: 0.25rem; min-width: 0; align-content: start; }
.footer-ficha__grid dt { font-size: var(--step--2); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.72; }
.footer-ficha__grid dd { overflow-wrap: break-word; }
/* narrow cells: the pendente tag sits above its label instead of squeezing it */
.footer-ficha__grid .missing { flex-wrap: wrap; row-gap: 0.15em; }
.footer-ficha__wide { grid-column: 1 / -1; }
.footer-base { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--pergaminho-20); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; font-size: var(--step--2); }
@media (min-width: 64rem) {
  .footer-top { grid-template-columns: 12rem 1fr auto; align-items: center; }
  .footer-logo img { width: 8rem; }
  .footer-nav { display: flex; flex-wrap: wrap; gap: 0 2rem; }
  .footer-access { grid-column: auto; }
  .footer-ficha { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; }
  .footer-ficha__title { margin: 0; }
  .footer-ficha__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2rem; }
  .footer-ficha__wide { grid-column: auto; }
}

/* ---------- reveal (one-shot, time-based; the only scroll-linked motion is the CSS photo drift above) ----------
   Types: (default) fade + short rise · mask (display type uncovered + small rise) · photo (the frame, already
   two-thirds open, completes downward while the picture settles — never an empty frame).
   Delays stagger only semantically related elements: label → heading → body (→ media). */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="mask"] { opacity: 1; transform: translateY(0.12em); clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-out), transform 900ms var(--ease-out); }
.js [data-reveal="mask"].is-in { transform: none; clip-path: inset(-20% -5% -25% -5%); }

/* photos: the frame completes top-down while the picture settles from a few percent above */
.js [data-reveal="photo"] { opacity: 1; transform: none; }
.js [data-reveal="photo"] .frame { clip-path: inset(0 0 35% 0); transition: clip-path 1000ms var(--ease-out); transition-delay: inherit; }
.js [data-reveal="photo"] .frame > picture { transform: translateY(-5%); transition: transform 1200ms var(--ease-out); transition-delay: inherit; }
.js [data-reveal="photo"].is-in .frame { clip-path: inset(0); }
.js [data-reveal="photo"].is-in .frame > picture { transform: none; }
/* the offset colour plane behind a photo arrives a beat later */
.js [data-reveal="photo"]::before { opacity: 0; transition: opacity 700ms 250ms var(--ease-out); }
.js [data-reveal="photo"].is-in::before { opacity: 1; }


/* /metodo/ steps: number, label, title and text arrive in a short coordinated sequence */
.js .process__step[data-reveal] { opacity: 1; transform: none; }
.js .process__step[data-reveal] .process__n { opacity: 0; transform: scale(0.6); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.js .process__step[data-reveal] .process__body > * { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js .process__step[data-reveal] .process__body > :nth-child(1) { transition-delay: 90ms; }
.js .process__step[data-reveal] .process__body > :nth-child(2) { transition-delay: 160ms; }
.js .process__step[data-reveal] .process__body > :nth-child(3) { transition-delay: 240ms; }
.js .process__step[data-reveal].is-in .process__n, .js .process__step[data-reveal].is-in .process__body > * { opacity: 1; transform: none; }

.js [data-reveal-delay="1"] { transition-delay: 80ms; }
.js [data-reveal-delay="2"] { transition-delay: 160ms; }
.js [data-reveal-delay="3"] { transition-delay: 240ms; }
.js [data-reveal-delay="4"] { transition-delay: 320ms; }

/* reduced motion and print: every element immediately visible, nothing clipped, no transform */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal]::before, .js [data-reveal]::after,
  .js [data-reveal] .frame, .js [data-reveal] .frame > picture,
  .js .process__step[data-reveal] .process__n, .js .process__step[data-reveal] .process__body > * {
    opacity: 1; transform: none; clip-path: none; transition: none; animation: none;
  }
  .js [data-reveal].is-in, .js [data-reveal].is-in .frame { clip-path: none; }
}
@media print {
  .js [data-reveal], .js [data-reveal]::before, .js [data-reveal]::after,
  .js [data-reveal] .frame, .js [data-reveal] .frame > picture,
  .js .process__step[data-reveal] .process__n, .js .process__step[data-reveal] .process__body > * {
    opacity: 1; transform: none; clip-path: none; transition: none; animation: none;
  }
  .js [data-reveal].is-in, .js [data-reveal].is-in .frame { clip-path: none; }
}